diff --git a/.agents/skills/homarr-custom-widget/SKILL.md b/.agents/skills/homarr-custom-widget/SKILL.md
new file mode 100644
index 000000000..3121374ab
--- /dev/null
+++ b/.agents/skills/homarr-custom-widget/SKILL.md
@@ -0,0 +1,28 @@
+---
+name: homarr-custom-widget
+description: Author safe Homarr Custom JSX v2 widgets from API documentation.
+---
+
+# Homarr Custom Widget
+
+Author one widget at a time. When connected to Homarr, retrieve `homarr://custom-widgets/schema` and only the component resources needed for the design. The live resources are authoritative for the installed release.
+
+1. Read the API documentation.
+2. Create one credential-free widget with keyed `sources`, keyed `requests`, optional keyed `options`, and safe JSX `template`.
+3. Validate, preview, test queries and simulated actions, visually inspect, and iterate.
+4. Configure deployment-specific source URLs and request credentials through Homarr; never repeat plaintext.
+5. Save only after narrow/wide, light/dark, loading, empty, error, and success states work.
+
+Use `{option:name}` or `$option` for saved options. Use `{param:name}` or `$param` for values supplied by `SubFetch`, `ActionButton`, or `ToggleSwitch`. Load queries cannot use invocation parameters. Templates read `data`, `status`, `options`, and temporary `inputs`.
+
+`SubFetch` with `trigger="manual"` renders its own load button. Pass a card or image through `triggerContent` with `triggerAriaLabel` when that content should launch the request. Its callback is `(result, meta)`; never author `onClick` or a fetch callback.
+
+Use standard Mantine compound names and deliberate visual hierarchy, spacing, restrained semantic color, and responsive layouts. Avoid excessive nested cards.
+
+Do not use imports, hooks, refs, raw HTML, raw event callbacks, browser requests, arbitrary functions, eval, bigint, npm packages, authored statement blocks, IIFEs, or recursion. Do not pretend MCP tools exist in an offline chat session.
+
+To install an existing widget, use `customWidget_workshopSearch`, inspect it with `customWidget_workshopGet`, then use `customWidget_workshopInstall`. Configure each self-hosted source afterward with `customWidget_sourceConfigure`, or call `customWidget_configurationRequestUser` so the user can enter the server URL and credentials directly in Homarr.
+
+Preview-scoped configuration expires with the preview. To persist user-entered values for a new widget, create the widget first, request configuration for its definition ID, then create a final preview with that definition ID so Homarr loads the stored credentials.
+
+When this skill is installed from the repository, optional offline details are in `references/schema.md`, `references/runtime.md`, and `references/security.md`. MCP-only clients should use the live Homarr resources instead.
diff --git a/.agents/skills/homarr-custom-widget/references/runtime.md b/.agents/skills/homarr-custom-widget/references/runtime.md
new file mode 100644
index 000000000..7c2cab770
--- /dev/null
+++ b/.agents/skills/homarr-custom-widget/references/runtime.md
@@ -0,0 +1,16 @@
+# Runtime
+
+Templates read `data.requestId`, `status.requestId`, `options.name`, and temporary `inputs.name`. Status contains `loading`, `ok`, `status`, `statusText`, and `error`.
+
+`bind="search"` creates an in-memory input. It is never persisted. Supply invocation values only through `params`, for example:
+
+```jsx
+<TextInput bind="search" label="Search" />
+<SubFetch requestId="search" params={{ query: inputs.search }}>
+  {(items) => <Stack>{(items ?? []).map(item => <Text key={item.id}>{item.name}</Text>)}</Stack>}
+</SubFetch>
+```
+
+`SubFetch` with `trigger="manual"` renders its own load button. To make a card or image launch the request, pass that node through `triggerContent` and provide `triggerAriaLabel`; Homarr supplies the click and keyboard behavior. Its optional second callback argument contains `{ ok, status, statusText, loading: false }`; loading and request failures are rendered by `SubFetch` before the callback runs. Do not author `onClick` or a fetch callback.
+
+Use expression callbacks for supported collection methods and trusted slots. Do not use callback blocks, IIFEs, authored recursion, or raw events. Bounded regex literals work only with safe string matching/replacement operations.
diff --git a/.agents/skills/homarr-custom-widget/references/schema.md b/.agents/skills/homarr-custom-widget/references/schema.md
new file mode 100644
index 000000000..ad1a1b1a0
--- /dev/null
+++ b/.agents/skills/homarr-custom-widget/references/schema.md
@@ -0,0 +1,22 @@
+# Schema
+
+```ts
+interface HomarrCustomWidgetV2 {
+  $schema: "homarr-custom-widget-v2";
+  name: string;
+  description?: string;
+  iconUrl?: string;
+  sources: Record<string, CustomWidgetSource>;
+  requests: Record<string, CustomWidgetRequest>;
+  options?: Record<string, CustomWidgetOption>;
+  template: string;
+}
+```
+
+Sources require `default`. A request defaults to the default source, query, GET, load, inherited auth, and view permission. An action defaults to manual and modify permission. DELETE uses full permission and confirmation.
+
+Use stable real URLs for public APIs and clear suggested URLs for self-hosted services. Homarr collects the installer's server URL, network scope, and credentials as source setup; credentials remain outside the manifest.
+
+Paths use `{option:name}` and `{param:name}`. Query/body data uses `{ "$option": "name" }` and `{ "$param": "name" }`. Load queries cannot use params. Runtime parameter names and primitive values are inferred from references.
+
+Every option has `label`, `control`, and `default`. Optional fields are `description`, `choices`, `choicesFrom`, `min`, `max`, `step`, `advanced`, and `group`.
diff --git a/.agents/skills/homarr-custom-widget/references/security.md b/.agents/skills/homarr-custom-widget/references/security.md
new file mode 100644
index 000000000..1abec790b
--- /dev/null
+++ b/.agents/skills/homarr-custom-widget/references/security.md
@@ -0,0 +1,7 @@
+# Security
+
+All requests use Homarr's protected server executor. Source origin, network scope, DNS, redirects, SSRF, rate limits, permissions, size limits, timeouts, and encrypted credential injection remain enforced.
+
+The JSX interpreter blocks imports, hooks, refs, raw event callbacks, browser requests, eval, arbitrary functions, prototype access, unsafe URLs, global CSS escape, arbitrary portals, bigint, statement blocks, IIFEs, and recursion. Regex literals must be bounded and reject backreferences, lookbehind, nested quantifiers, excessive length, and unsupported flags.
+
+Credentials are stored separately and never exported or returned to an agent. A published self-hosted source URL is only a suggestion: installers must confirm or replace private and loopback URLs for their own Homarr deployment. Source origins cannot be controlled through widget options.
diff --git a/.dockerignore b/.dockerignore
index 521c55109..c0f2129a3 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -17,7 +17,8 @@ coverage
 dev
 .build
 e2e
-apps/docs
+apps/docs/*
+!apps/docs/package.json
 apps/nextjs/.next
 .env
 .env.*
diff --git a/.env.example b/.env.example
index 22dca3adb..997d60865 100644
--- a/.env.example
+++ b/.env.example
@@ -61,9 +61,30 @@ TURBO_TELEMETRY_DISABLED=1
 # Enable mock integration
 UNSAFE_ENABLE_MOCK_INTEGRATION=true
 
+# Public URL contract. Values must be absolute HTTP(S) URLs without credentials,
+# query strings, or fragments. Trailing slashes are normalized at startup.
+HOMARR_WEBSITE_URL=https://homarr.dev
+# PocketBase API used by Homarr and by the standalone documentation site.
+# Defaults to HOMARR_WEBSITE_URL.
+# WORKSHOP_API_URL=https://homarr.dev
+# Public Workshop page opened from Homarr. Defaults to HOMARR_WEBSITE_URL/workshop.
+# WORKSHOP_WEB_URL=https://homarr.dev/workshop
+
+# Documentation and PocketBase deployment settings.
+# WORKSHOP_PUBLIC_ORIGIN=https://homarr.dev
+# PB_ALLOWED_ORIGINS=*
+
+# Local Workshop stack:
+# HOMARR_WEBSITE_URL=http://127.0.0.1:3003
+# WORKSHOP_API_URL=http://127.0.0.1:8090
+# WORKSHOP_WEB_URL=http://127.0.0.1:3003/workshop
+# WORKSHOP_PUBLIC_ORIGIN=http://127.0.0.1:3003
+# Optional: GITHUB_CLIENT_ID=
+# Optional: GITHUB_CLIENT_SECRET=
+
 # Enable demo mode (seeds a demo user "demo"/"demo", a sample board and a mock integration)
 # DEMO_MODE=true
 
 # Whether demo mode is read-only. Defaults to true (the public demo blocks all mutations).
 # Set to false for writable preview deployments so the demo user can modify the dashboard.
-# DEMO_READ_ONLY=false
\ No newline at end of file
+# DEMO_READ_ONLY=false
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 0d8b33a33..d4b730726 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -33,6 +33,7 @@ body:
       options:
         # The below comment is used to insert a new version with on-release.yml
         #NEXT_VERSION#
+        - 1.74.0
         - 1.73.0
         - 1.72.0
         - 1.71.0
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index ed325c9a8..d227e66d7 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -16,6 +16,6 @@
 **When contributing a new integration or widget:**
 
 - [ ] I confirmed manually that the integration or widget is working with a real system and performed basic smoke
-  tests (e.g. what happens if it is offline)
+      tests (e.g. what happens if it is offline)
 - [ ] Optional but recommended: I confirm that I am willing to be added to the `CODEOWNERS` of this feature and will
-  provide support and maintain the integration (e.g. in case of breaking or failure)
\ No newline at end of file
+      provide support and maintain the integration (e.g. in case of breaking or failure)
diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml
index 026d45cb6..733e21eb9 100644
--- a/.github/workflows/autofix.yml
+++ b/.github/workflows/autofix.yml
@@ -1,4 +1,4 @@
-name: Auto-fix lint and format
+name: Formatting
 
 on:
   pull_request:
@@ -6,42 +6,30 @@ on:
     branches: ["*"]
 
 permissions:
-  contents: write
+  contents: read
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
   cancel-in-progress: true
 
 jobs:
-  autofix:
-    name: Auto-fix
-    if: github.event.pull_request.head.repo.id == github.repository_id
+  format:
+    name: Check formatting
     runs-on: ubuntu-latest
     timeout-minutes: 5
     steps:
       - uses: actions/checkout@v7
         with:
           fetch-depth: 0
-          ref: ${{ github.head_ref }}
+          persist-credentials: false
 
       - name: Setup
         uses: ./tooling/github/setup
 
-      - name: Get changed files
-        id: changed
+      - name: Check changed files
         env:
           BASE_REF: ${{ github.base_ref }}
         run: |
-          git diff --name-only --diff-filter=ACMR "origin/${BASE_REF}...HEAD" -- '*.ts' '*.tsx' '*.js' '*.jsx' > /tmp/changed-files
-          echo "count=$(wc -l < /tmp/changed-files | tr -d '[:space:]')" >> $GITHUB_OUTPUT
-
-      - name: Auto-fix lint + format
-        if: steps.changed.outputs.count != '0'
-        run: |
-          xargs -r -a /tmp/changed-files pnpm exec oxlint --fix || true
-          xargs -r -a /tmp/changed-files pnpm exec oxfmt --write
-
-      - name: Commit fixes
-        uses: stefanzweifel/git-auto-commit-action@v7
-        with:
-          commit_message: "style: auto-fix lint and format [skip ci]"
+          git diff --name-only --diff-filter=ACMR -z "origin/${BASE_REF}...HEAD" -- \
+            '*.css' '*.js' '*.json' '*.jsonc' '*.jsx' '*.md' '*.mdx' '*.scss' '*.ts' '*.tsx' '*.yaml' '*.yml' \
+            | xargs -0 -r pnpm exec oxfmt --check --
diff --git a/.github/workflows/automatic-approval.yml b/.github/workflows/automatic-approval.yml
deleted file mode 100644
index 9e246f838..000000000
--- a/.github/workflows/automatic-approval.yml
+++ /dev/null
@@ -1,35 +0,0 @@
-name: "[Dependency Updates] Auto Approve"
-on:
-  pull_request:
-    types: [opened, synchronize]
-
-permissions: {}
-
-jobs:
-  approve-automatic-prs:
-    runs-on: ubuntu-latest
-    timeout-minutes: 2
-    # 158783068: homarr-renovate[bot]
-    # 190541745: homarr-crowdin[bot]
-    # 210161987: homarr-update-contributors[bot]
-    # 175486441: homarr-releases[bot]
-    # Extracted from https://api.github.com/users/<username>
-    if: github.actor_id == 158783068 || github.actor_id == 190541745 || github.actor_id == 210161987 || github.actor_id == 175486441
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v7
-      - name: Obtain token
-        id: obtainToken
-        uses: actions/create-github-app-token@v3
-        with:
-          private-key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
-          client-id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
-          permission-pull-requests: write # required to approve pull request
-
-      - name: Install GitHub CLI
-        run: sudo apt-get install -y gh
-      - name: Approve automatic PRs
-        env:
-          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
-        run: |
-          gh pr review ${{github.event.pull_request.number}} --approve --body "Automatically approved by GitHub Action"
diff --git a/.github/workflows/bot-auto-merge-reconcile.yml b/.github/workflows/bot-auto-merge-reconcile.yml
new file mode 100644
index 000000000..d82f759f5
--- /dev/null
+++ b/.github/workflows/bot-auto-merge-reconcile.yml
@@ -0,0 +1,43 @@
+name: "[Bots] Reconcile Auto-merge"
+
+on:
+  schedule:
+    - cron: "*/30 * * * *"
+  workflow_dispatch:
+
+permissions: {}
+
+jobs:
+  reconcile:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v7
+
+      - name: Obtain token
+        id: obtainToken
+        uses: actions/create-github-app-token@v3
+        with:
+          private-key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
+          client-id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
+          permission-pull-requests: write # required to enable auto-merge
+
+      - name: Install GitHub CLI
+        run: sudo apt-get install -y gh
+
+      - name: Re-enable auto-merge for prepared bot PRs
+        env:
+          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
+        run: |
+          # 158783068: homarr-renovate[bot]
+          # 190541745: homarr-crowdin[bot]
+          # 210161987: homarr-update-contributors[bot]
+          # 175441: homarr-releases[bot]
+          gh pr list --repo "${{ github.repository }}" --base dev --state open --limit 100 \
+            --json number,author,reviewDecision,mergeStateStatus,autoMergeRequest \
+            --jq '.[] | select(.author.login as $login | ["app/homarr-renovate", "app/homarr-crowdin", "app/homarr-update-contributors", "app/homarr-releases"] | index($login)) | select(.reviewDecision == "APPROVED") | select(.mergeStateStatus == "CLEAN") | select(.autoMergeRequest == null) | .number' \
+          | while read -r pr; do
+              echo "Re-enabling auto-merge on PR #$pr"
+              gh pr merge "$pr" --auto --squash
+            done
diff --git a/.github/workflows/bot-pr-automerge.yml b/.github/workflows/bot-pr-automerge.yml
new file mode 100644
index 000000000..35c5461fa
--- /dev/null
+++ b/.github/workflows/bot-pr-automerge.yml
@@ -0,0 +1,47 @@
+name: "[Bots] Approve and Auto-merge"
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
+
+permissions: {}
+
+jobs:
+  approve-and-automerge:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    # 158783068: homarr-renovate[bot]
+    # 190541745: homarr-crowdin[bot]
+    # 210161987: homarr-update-contributors[bot]
+    # 175441: homarr-releases[bot]
+    # Extracted from https://api.github.com/users/<username>
+    if: |
+      (github.actor_id == 158783068 || github.actor_id == 190541745 || github.actor_id == 210161987 || github.actor_id == 175441) &&
+      github.event.pull_request.head.repo.full_name == github.repository &&
+      github.event.pull_request.base.ref == 'dev'
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v7
+
+      - name: Obtain token
+        id: obtainToken
+        uses: actions/create-github-app-token@v3
+        with:
+          private-key: ${{ secrets.RENOVATE_APPROVE_PRIVATE_KEY }}
+          client-id: ${{ secrets.RENOVATE_APPROVE_APP_ID }}
+          permission-pull-requests: write # required to approve a pull request and enable auto-merge
+
+      - name: Install GitHub CLI
+        run: sudo apt-get install -y gh
+
+      - name: Approve and enable auto-merge
+        env:
+          GITHUB_TOKEN: ${{ steps.obtainToken.outputs.token }}
+        run: |
+          PR_NUMBER="${{ github.event.pull_request.number }}"
+          if [ "$(gh pr view "$PR_NUMBER" --json reviewDecision --jq .reviewDecision)" != "APPROVED" ]; then
+            gh pr review "$PR_NUMBER" --approve --body "Automatically approved by Homarr bot policy"
+          fi
+          if [ "$(gh pr view "$PR_NUMBER" --json autoMergeRequest --jq '.autoMergeRequest != null')" != "true" ]; then
+            gh pr merge "$PR_NUMBER" --auto --squash
+          fi
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index addcf5e7d..643c4f436 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -8,7 +8,7 @@ on:
     types: [closed]
     branches: ["*"]
   push:
-    branches: [main, dev, beta, next]
+    branches: [main, dev, beta, next, v2]
   merge_group:
   workflow_dispatch:
     inputs:
@@ -34,8 +34,10 @@ permissions:
   contents: read
 
 concurrency:
-  group: ${{ github.workflow }}-${{ github.event_name }}-${{ github.event.pull_request.number || inputs.pr_number || github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
+  # Every event for a PR shares one group so a close event cancels stale image
+  # publication and a newer synchronize run cannot be overwritten by an older run.
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || inputs.pr_number || github.ref }}
+  cancel-in-progress: ${{ github.event_name == 'pull_request' || github.event_name == 'pull_request_target' || github.event_name == 'workflow_dispatch' || github.ref != 'refs/heads/main' }}
 
 env:
   FORCE_COLOR: 3
@@ -82,11 +84,22 @@ jobs:
         run: cp .env.example .env
 
       - name: Lint, typecheck, and build affected workspaces
-        run: pnpm turbo run lint typecheck build --affected --continue=dependencies-successful --concurrency=4
+        run: pnpm turbo run lint typecheck build --affected --continue=dependencies-successful --concurrency=2
 
       - name: Validate workspace configuration
         run: pnpm lint:ws
 
+      - name: Validate Custom Widget architecture
+        run: pnpm check:custom-widgets
+
+      - name: Validate checked-in OpenAPI schema
+        run: pnpm check:openapi
+
+      - name: Validate Custom Widget bundle budget
+        run: |
+          pnpm --filter nextjs build
+          pnpm check:custom-widget-bundle
+
       - name: Run unit tests
         run: pnpm test
 
@@ -102,6 +115,8 @@ jobs:
     permissions:
       contents: read
       packages: write
+    outputs:
+      digest: ${{ steps.preview-build.outputs.digest }}
     steps:
       - uses: actions/checkout@v7
         if: "!env.ACT"
@@ -184,38 +199,166 @@ jobs:
           path: e2e/test-results/
           retention-days: 7
 
-      - name: Determine preview tag
-        id: preview
+      - name: Log in to GHCR for preview publication
         if: |
           !env.ACT &&
           (
             (github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository) ||
             (github.event_name == 'workflow_dispatch' && inputs.operation == 'publish')
           )
-        env:
-          PR_NUMBER: ${{ github.event.pull_request.number || inputs.pr_number }}
-        run: echo "tag=pr-${PR_NUMBER}" >> "$GITHUB_OUTPUT"
-
-      - name: Log in to GHCR
-        if: steps.preview.outputs.tag != ''
         uses: docker/login-action@v4
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Push preview image
-        if: steps.preview.outputs.tag != ''
-        env:
-          PREVIEW_TAG: ${{ steps.preview.outputs.tag }}
-        run: |
-          docker tag homarr-ci "${PREVIEW_IMAGE}:${PREVIEW_TAG}"
-          docker push "${PREVIEW_IMAGE}:${PREVIEW_TAG}"
+      - name: Push amd64 preview image by digest
+        id: preview-build
+        if: |
+          !env.ACT &&
+          (
+            (github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository) ||
+            (github.event_name == 'workflow_dispatch' && inputs.operation == 'publish')
+          )
+        uses: docker/build-push-action@v7
+        with:
+          context: .
+          network: host
+          platforms: linux/amd64
+          outputs: type=image,"name=${{ env.PREVIEW_IMAGE }}",push-by-digest=true,name-canonical=true,push=true
+          cache-from: type=gha,scope=homarr-linux-amd64
+          secrets: |
+            TURBO_API=${{ secrets.TURBO_API }}
+            TURBO_TEAM=${{ secrets.TURBO_TEAM }}
+            TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}
+            TURBO_REMOTE_CACHE_SIGNATURE_KEY=${{ secrets.TURBO_REMOTE_CACHE_SIGNATURE_KEY }}
 
       - name: Show Act publication result
         if: env.ACT
         run: echo "Act validated the publication path; external GHCR writes are disabled locally."
 
+  preview-arm64:
+    name: Build arm64 preview image
+    needs: fast-gate
+    if: |
+      (
+        (github.event_name == 'pull_request' && github.event.pull_request.draft == false && github.event.pull_request.head.repo.full_name == github.repository) ||
+        (github.event_name == 'workflow_dispatch' && inputs.operation == 'publish')
+      )
+    runs-on: ubuntu-24.04-arm
+    timeout-minutes: 20
+    permissions:
+      contents: read
+      packages: write
+    outputs:
+      digest: ${{ steps.preview-build.outputs.digest }}
+    steps:
+      - uses: actions/checkout@v7
+        if: "!env.ACT"
+        with:
+          persist-credentials: false
+          ref: ${{ github.event_name == 'workflow_dispatch' && inputs.ref || '' }}
+
+      - name: Log in to GHCR
+        if: "!env.ACT"
+        uses: docker/login-action@v4
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        if: "!env.ACT"
+        uses: docker/setup-buildx-action@v4
+
+      - name: Build and push arm64 preview image by digest
+        id: preview-build
+        if: "!env.ACT"
+        uses: docker/build-push-action@v7
+        with:
+          context: .
+          network: host
+          platforms: linux/arm64
+          outputs: type=image,"name=${{ env.PREVIEW_IMAGE }}",push-by-digest=true,name-canonical=true,push=true
+          cache-from: type=gha,scope=homarr-linux-arm64
+          cache-to: type=gha,scope=homarr-linux-arm64,mode=max
+          secrets: |
+            TURBO_API=${{ secrets.TURBO_API }}
+            TURBO_TEAM=${{ secrets.TURBO_TEAM }}
+            TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}
+            TURBO_REMOTE_CACHE_SIGNATURE_KEY=${{ secrets.TURBO_REMOTE_CACHE_SIGNATURE_KEY }}
+
+  publish-preview:
+    name: Publish multi-platform preview image
+    needs: [container, preview-arm64]
+    if: |
+      (
+        (github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository) ||
+        (github.event_name == 'workflow_dispatch' && inputs.operation == 'publish')
+      )
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    permissions:
+      contents: read
+      packages: write
+      pull-requests: read
+    env:
+      PREVIEW_TAG: pr-${{ github.event.pull_request.number || inputs.pr_number }}
+    steps:
+      - name: Log in to GHCR
+        if: "!env.ACT"
+        uses: docker/login-action@v4
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        if: "!env.ACT"
+        uses: docker/setup-buildx-action@v4
+
+      - name: Verify PR head before publication
+        if: github.event_name == 'pull_request'
+        uses: actions/github-script@v8
+        env:
+          EXPECTED_HEAD_SHA: ${{ github.event.pull_request.head.sha }}
+        with:
+          script: |
+            const { data: pull } = await github.rest.pulls.get({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: context.payload.pull_request.number,
+            });
+            if (pull.state !== "open") {
+              core.setFailed(`PR #${pull.number} is ${pull.state}; refusing to publish its preview.`);
+              return;
+            }
+            if (pull.head.sha !== process.env.EXPECTED_HEAD_SHA) {
+              core.setFailed(`PR #${pull.number} moved from ${process.env.EXPECTED_HEAD_SHA} to ${pull.head.sha}.`);
+            }
+
+      - name: Publish preview manifest
+        if: "!env.ACT"
+        env:
+          AMD64_DIGEST: ${{ needs.container.outputs.digest }}
+          ARM64_DIGEST: ${{ needs.preview-arm64.outputs.digest }}
+        run: |
+          docker buildx imagetools create -t "${PREVIEW_IMAGE}:${PREVIEW_TAG}" \
+            "${PREVIEW_IMAGE}@${AMD64_DIGEST}" \
+            "${PREVIEW_IMAGE}@${ARM64_DIGEST}"
+
+      - name: Verify preview manifest platforms
+        if: "!env.ACT"
+        run: |
+          image="${PREVIEW_IMAGE}:${PREVIEW_TAG}"
+          manifest="$(docker buildx imagetools inspect "$image" --raw)"
+          for architecture in amd64 arm64; do
+            jq --exit-status --arg architecture "$architecture" \
+              'any(.manifests[]; .platform.os == "linux" and .platform.architecture == $architecture)' \
+              <<<"$manifest" >/dev/null
+          done
+          docker buildx imagetools inspect "$image"
+
   cleanup:
     name: Clean up preview image
     if: github.event_name == 'pull_request_target' || (github.event_name == 'workflow_dispatch' && inputs.operation == 'cleanup')
diff --git a/.github/workflows/workshop.yml b/.github/workflows/workshop.yml
new file mode 100644
index 000000000..658fc7985
--- /dev/null
+++ b/.github/workflows/workshop.yml
@@ -0,0 +1,63 @@
+name: Workshop
+
+on:
+  pull_request:
+  push:
+    branches: [dev, v2, main]
+
+permissions:
+  contents: read
+
+jobs:
+  validate:
+    runs-on: ubuntu-24.04
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@v7
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24.18.0
+      - uses: pnpm/action-setup@v6
+        with:
+          version: 11.11.0
+          run_install: false
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm --filter @homarr/workshop typecheck
+      - run: pnpm --filter @homarr/docs typecheck
+      - run: pnpm test:workshop
+      - run: docker build --target production -f apps/workshop/Dockerfile .
+
+  publish:
+    if: github.event_name == 'push' && (github.ref_name == 'v2' || github.ref_name == 'main')
+    needs: validate
+    runs-on: ubuntu-24.04
+    timeout-minutes: 30
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v7
+      - uses: docker/setup-qemu-action@v4
+      - uses: docker/setup-buildx-action@v4
+      - uses: docker/login-action@v4
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - uses: docker/metadata-action@v6
+        id: metadata
+        with:
+          images: ghcr.io/homarr-labs/workshop
+          tags: |
+            type=sha,prefix=sha-,format=long
+            type=raw,value=v2,enable=${{ github.ref_name == 'v2' }}
+            type=raw,value=latest,enable=${{ github.ref_name == 'main' }}
+      - uses: docker/build-push-action@v7
+        with:
+          context: .
+          file: apps/workshop/Dockerfile
+          target: production
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.metadata.outputs.tags }}
+          labels: ${{ steps.metadata.outputs.labels }}
diff --git a/.gitignore b/.gitignore
index c22262f6d..82e02993b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,7 @@ out/
 next-env.d.ts
 
 # artifacts
+.ai-evaluations/
 packages/db/migrations/*/migrate.cjs
 
 # nitro
@@ -71,10 +72,15 @@ apps/nextjs/public/images/background.png
 
 # personal agent config
 .opencode
-.agents/
+.agents/*
+!.agents/skills/
+.agents/skills/*
+!.agents/skills/homarr-custom-widget/
+!.agents/skills/homarr-custom-widget/**
 skills-lock.json
 
 # docusaurus
 apps/docs/.docusaurus
 apps/docs/build
 .pnpm-store
+benchmark-results
diff --git a/.impeccable/critique/2026-07-21T11-32-50Z__apps-docs-src-components-workshop.md b/.impeccable/critique/2026-07-21T11-32-50Z__apps-docs-src-components-workshop.md
new file mode 100644
index 000000000..7ea4baa64
--- /dev/null
+++ b/.impeccable/critique/2026-07-21T11-32-50Z__apps-docs-src-components-workshop.md
@@ -0,0 +1,116 @@
+---
+target: Workshop store in the docs
+total_score: 20
+p0_count: 1
+p1_count: 3
+timestamp: 2026-07-21T11-32-50Z
+slug: apps-docs-src-components-workshop
+---
+
+# Workshop Store Critique
+
+## Design Health Score
+
+| #         | Heuristic                           |     Score | Key issue                                                                                                                                                        |
+| --------- | ----------------------------------- | --------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 1         | Visibility of system status         |       1/4 | Fetch failure can show beside an empty-store message, so the system communicates two incompatible states.                                                        |
+| 2         | Match between system and real world |       3/4 | Widget, CSS, voting, revisions, and comments use familiar language.                                                                                              |
+| 3         | User control and freedom            |       2/4 | Filters are reversible, but the crashed route and failed fetch state offer no useful recovery.                                                                   |
+| 4         | Consistency and standards           |       2/4 | The submission editor uses CodeMirror, while revision editing falls back to a textarea; several tiny custom controls do not follow the shared button vocabulary. |
+| 5         | Error prevention                    |       2/4 | Submission validation exists, but disabled progression does not explain what is missing and destructive actions use a brief inline confirmation.                 |
+| 6         | Recognition rather than recall      |       3/4 | Labels, type choices, and the submission stepper are understandable without documentation.                                                                       |
+| 7         | Flexibility and efficiency          |       2/4 | Search covers titles only, signed-out users can select Yours, and installation is reduced to ambiguous Copy and Download actions.                                |
+| 8         | Aesthetic and minimalist design     |       3/4 | The restrained visual system is clean, but the browse toolbar and card action rows become dense.                                                                 |
+| 9         | Help users recover from errors      |       0/4 | The production route crashes with React error 130; the fetch error has no retry action or useful context.                                                        |
+| 10        | Help and documentation              |       2/4 | The editor explains its fields, but the store does not teach the full inspect, trust, download, and install journey.                                             |
+| **Total** |                                     | **20/40** | **Needs work before release**                                                                                                                                    |
+
+## Anti-Patterns Verdict
+
+The surface does not look like obvious AI-generated decoration. Its visual restraint, familiar controls, and practical editor are credible product UI. The weakness is product behavior rather than styling: contradictory states, tiny action controls, an overloaded responsive toolbar, and a primary installation journey that is not explicit.
+
+The deterministic Impeccable scan returned zero findings for `apps/docs/src/components/workshop`. This is useful but incomplete. The detector did not catch runtime failures, semantic state conflicts, touch-target sizing, or responsive grouping. Browser evidence found a full route crash, React error 130, and an earlier state that rendered both `Something went wrong.` and `No submissions yet`.
+
+No visual overlay was injected because the available browser evaluation surface is read-only. Screenshots, DOM snapshots, console logs, and source inspection were used instead.
+
+## Overall Impression
+
+The submission modal is now one of the stronger parts of the Workshop. The store around it is not release-ready. The single biggest opportunity is to make discovery and installation a dependable, explicit path: load reliably, show one truthful state, help users evaluate a submission, and give them one obvious next action.
+
+## What Is Working
+
+1. The visual system is restrained and consistent with the Homarr documentation. Typography, color, radii, and spacing do not compete with the content.
+2. The submission flow chunks a complex task into Type, Details, and Media. The shared JSON/CSS editor, drag-and-drop import, metadata autofill, and capped media previews reduce creator effort.
+3. The detail design exposes revision, author, reports, changelog, source content, and comments. This supports inspection rather than treating community code as a blind install.
+
+## Priority Issues
+
+### P0: The Workshop route crashes in the production docs build
+
+**Why it matters:** No visual polish matters if the store becomes a Docusaurus error page. A fresh independent tab consistently reached `This page crashed` with React error 130. The console attributed the thrown error to the Kapa widget bundle.
+
+**Fix:** Isolate or disable the Kapa script on Workshop routes, prevent third-party widget failures from reaching the Docusaurus route boundary, and add a route-level Workshop boundary that preserves navigation and retry. Reproduce against the built Docker docs image, not only the development server.
+
+**Suggested command:** `$impeccable harden`
+
+### P1: Failure and empty states contradict each other
+
+**Why it matters:** Showing `Something went wrong.` followed by `No submissions yet` makes users believe the store is both broken and empty. The generic message gives no cause and no recovery.
+
+**Fix:** Make loading, failure, empty, and results mutually exclusive. The failure state should say that listings could not be loaded, preserve the current filters, and provide `Try loading again`. Do not render filters or an empty store as authoritative data after the initial request fails.
+
+**Suggested command:** `$impeccable harden`
+
+### P1: Mobile discovery controls are too dense and do not form a responsive hierarchy
+
+**Why it matters:** The toolbar's inner row contains four type choices, sorting, and outdated visibility without wrapping. Most controls are 24 to 28 pixels tall. At narrow widths this is difficult to scan, easy to clip, and below a comfortable touch target.
+
+**Fix:** Put a full-width search first on mobile, keep All, Widgets, and CSS as the primary segmented choice, move sorting and outdated visibility into a compact secondary row or popover, and hide Yours when signed out or make it a sign-in affordance. Use at least 40 to 44 pixel touch targets. Add `aria-pressed` or proper tab semantics to the type filter.
+
+**Suggested command:** `$impeccable adapt`
+
+### P1: The store does not make the install journey obvious
+
+**Why it matters:** A first-time user sees Copy and Download without knowing which is recommended, what will be copied, how to inspect safety, or where the file goes in Homarr. This weakens the store's main purpose.
+
+**Fix:** Make the detail page the decision surface. Use one primary action named for its result, such as `Download widget JSON` or `Copy CSS`, with a short `Install in Homarr` explanation linked to the correct in-app flow. Cards should prioritize title, preview, compatibility, score, and `View details`; secondary utilities should not compete with evaluation.
+
+**Suggested command:** `$impeccable clarify`
+
+### P2: Card and moderation actions are too small and too numerous
+
+**Why it matters:** Vote, copy, download, comment, delete, and report controls compete in a compact footer. Low-contrast icon buttons are hard to discover and hard to use by touch. CSS columns also create a top-to-bottom visual reading order that can differ from the expected row order.
+
+**Fix:** Use a regular responsive grid, remove hover scaling, keep one or two visible card actions, and move owner/moderation actions to a menu. Keep voting visible but increase its target size. Correct the report copy: reports and reporter identities are moderation data, not public social proof.
+
+**Suggested command:** `$impeccable distill`
+
+## Persona Red Flags
+
+### Jordan, first-time self-hoster
+
+Jordan opens Workshop to install a widget. The route can crash before any listing appears. In the partial failure state, Jordan sees both an error and an empty store. If listings load, Copy and Download do not explain the Homarr destination or recommended path. Jordan is likely to leave before installing anything.
+
+### Alex, experienced Homarr administrator
+
+Alex can understand the JSON and appreciates the source viewer, but title-only search and limited filtering make a larger catalog inefficient. Compatibility and required secret information are not prominent at browse time. Tiny moderation and owner controls slow repeated management tasks.
+
+### Morgan, mobile user
+
+Morgan encounters a toolbar with more controls than fit comfortably in one decision group, 24 to 28 pixel targets, and a signed-out Yours filter that leads to an unhelpful no-results state. Submission cards add another dense row of small actions.
+
+## Minor Observations
+
+- Future submission steps are focusable buttons even when clicking them does nothing. Disable them or render non-interactive progress markers.
+- The report textarea relies on placeholder text and needs a persistent accessible label.
+- The revision editor should reuse the same JSON/CSS CodeMirror component as creation.
+- Search should include title, description, and author at minimum.
+- The timed inline `Confirm?` deletion pattern is easy to miss and weak for keyboard and touch users.
+- The detail-page changelog uses an uppercase tracked label, which is unnecessary in this otherwise restrained interface.
+- Loading comments should use the same skeleton vocabulary as listings rather than centered status text.
+
+## Questions to Consider
+
+1. Is Workshop primarily a catalog for discovery, or a technical exchange for copying source? The primary card and detail actions should commit to one answer.
+2. Should users evaluate compatibility and required secrets before opening a listing, or only on the detail page?
+3. Does Workshop need every moderation and ownership action visible inline, or should those actions live behind a menu?
diff --git a/.impeccable/critique/2026-07-21T12-29-41Z__apps-docs-src-components-workshop.md b/.impeccable/critique/2026-07-21T12-29-41Z__apps-docs-src-components-workshop.md
new file mode 100644
index 000000000..0021929a4
--- /dev/null
+++ b/.impeccable/critique/2026-07-21T12-29-41Z__apps-docs-src-components-workshop.md
@@ -0,0 +1,64 @@
+---
+target: Workshop store in the docs
+total_score: 38
+p0_count: 0
+p1_count: 0
+timestamp: 2026-07-21T12-29-41Z
+slug: apps-docs-src-components-workshop
+---
+
+# Workshop Store Critique — Post-Polish
+
+## Design Health Score
+
+| #         | Heuristic                           |     Score | Evidence                                                                                                                                                         |
+| --------- | ----------------------------------- | --------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 1         | Visibility of system status         |       4/4 | Loading, initial failure, stale refresh failure, empty, and results states are mutually exclusive; recovery actions are visible.                                 |
+| 2         | Match between system and real world |       4/4 | Actions describe their result: Download widget JSON, Copy CSS, View details, and Install in Homarr.                                                              |
+| 3         | User control and freedom            |       4/4 | Filters can be cleared, errors retried, dialogs cancelled, and destructive submission deletion requires explicit confirmation.                                   |
+| 4         | Consistency and standards           |       4/4 | Creation and revision editing share CodeMirror, buttons follow the shared system, and cards use a predictable responsive grid.                                   |
+| 5         | Error prevention                    |       3/4 | Validation, disabled progression, pending states, RLS, and confirmations are strong; disabled form progression could explain unmet requirements more explicitly. |
+| 6         | Recognition rather than recall      |       4/4 | Persistent labels, type descriptions, step status, source previews, and installation instructions minimize recall.                                               |
+| 7         | Flexibility and efficiency          |       4/4 | Search spans title, description, and author; signed-in filtering, sorting, responsive controls, and direct detail actions support repeat use.                    |
+| 8         | Aesthetic and minimalist design     |       3/4 | The catalog is restrained and scannable; long source documents and the complete creator form necessarily remain dense on small screens.                          |
+| 9         | Help users recover from errors      |       4/4 | Route, listing, edit, report, copy, OAuth, and detail failures remain local and provide a clear next action.                                                     |
+| 10        | Help and documentation              |       4/4 | The detail page explains the exact Homarr destination and links to updated Workshop documentation.                                                               |
+| **Total** |                                     | **38/40** | **Release-quality; minor polish remains**                                                                                                                        |
+
+## Anti-Patterns Verdict
+
+The surface is product-led rather than decorative. The redesign removes the overloaded card footer, hover scaling, tiny touch controls, public moderation details, contradictory states, and ambiguous install actions. The deterministic Impeccable detector reports zero findings.
+
+## What Improved
+
+1. The production route no longer collapses into the Docusaurus crash screen without recovery. A route-local boundary protects navigation, and the fresh-volume production path renders without console errors.
+2. Loading, failure, empty, stale-results, and populated states are truthful and mutually exclusive.
+3. Search and filters form a clear responsive hierarchy. Mobile targets are 40–44 pixels, signed-out users do not see Yours, and cards no longer overflow at 390 pixels.
+4. Cards prioritize evaluation: title, author, type, score, description, comments, and View details. Copy, download, reporting, editing, and deletion moved to the detail page.
+5. The detail page now teaches the installation journey and names its primary action precisely.
+6. Reports and reporter identities are admin-only through PocketBase rules. Public catalog UI no longer turns reports into social proof.
+7. The creator and revision dialogs share the CodeMirror editor, use bounded internal scrolling, expose pending/error states, and avoid step-selection layout shifts.
+
+## Remaining Minor Opportunities
+
+### P2: Explain disabled progression inline
+
+The Type and Details steps are understandable, but a disabled Next button could state the missing requirement for keyboard and first-time users. This is a refinement, not a blocker, because required fields and validation messages are already present.
+
+### P2: Consider a compact source summary on very small screens
+
+The read-only source viewer is intentionally complete and horizontally scrollable. A future collapse/expand summary could reduce page length for nontechnical visitors without hiding inspection entirely.
+
+## Verification Evidence
+
+- Fresh Docker Compose PocketBase volume and production docs image.
+- Populated catalog with widget, CSS, and outdated examples.
+- Desktop and 390px mobile layouts in light and dark themes.
+- Widget detail, installation instructions, CodeMirror source view, and comments.
+- Signed-in submission wizard through Type and Details, including the shared editor.
+- Zero browser console errors after the final fixes.
+- Impeccable deterministic detector: zero findings.
+
+## Compatibility Note
+
+An existing local development volume created from an earlier unreleased version of the reset migration still has a stale Workshop view. It is intentionally not migrated or deleted. A fresh volume created from the current unreleased migration is the supported validation target and works correctly.
diff --git a/.impeccable/critique/2026-07-22T15-58-15Z__apps-docs-src-components-workshop.md b/.impeccable/critique/2026-07-22T15-58-15Z__apps-docs-src-components-workshop.md
new file mode 100644
index 000000000..66884800a
--- /dev/null
+++ b/.impeccable/critique/2026-07-22T15-58-15Z__apps-docs-src-components-workshop.md
@@ -0,0 +1,106 @@
+---
+target: Homarr Workshop docs UI
+total_score: 27
+p0_count: 0
+p1_count: 2
+timestamp: 2026-07-22T15-58-15Z
+slug: apps-docs-src-components-workshop
+---
+
+## Design Health Score
+
+| #         | Heuristic                       |     Score | Key Issue                                                                                                                                     |
+| --------- | ------------------------------- | --------: | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| 1         | Visibility of System Status     |         3 | Strong loading, retry, stale-data, pending, and copy states; successful report/edit actions still end silently.                               |
+| 2         | Match System / Real World       |         3 | Core Workshop language is clear, but `networkScope`, query/action, and schema terminology assumes technical fluency.                          |
+| 3         | User Control and Freedom        |         3 | Back, cancel, clear filters, vote toggling, and destructive confirmations are present; destructive actions have no undo.                      |
+| 4         | Consistency and Standards       |         3 | Shared primitives are coherent, though Docusaurus chrome and the denser app-store vocabulary still feel slightly stitched together.           |
+| 5         | Error Prevention                |         2 | Validation and confirmations are good, but install safety and credential context appears after download/copy actions on small screens.        |
+| 6         | Recognition Rather Than Recall  |         3 | Author, revision, source, filters, and capabilities are visible; installation still asks users to remember a separate Homarr navigation path. |
+| 7         | Flexibility and Efficiency      |         2 | Search, filters, sort, drag-and-drop, autofill, and comment shortcuts help; the install handoff remains manual.                               |
+| 8         | Aesthetic and Minimalist Design |         2 | Hierarchy is clear, but repeated panels, badges, uppercase metadata labels, and overlapping install actions add noise.                        |
+| 9         | Error Recognition and Recovery  |         3 | Errors are plain-language and usually preserve work; the global action error can be detached from the failed control.                         |
+| 10        | Help and Documentation          |         3 | The installation guide and source explanation are useful; security terminology lacks inline definitions.                                      |
+| **Total** |                                 | **27/40** | **Acceptable, significant improvements needed**                                                                                               |
+
+## Anti-Patterns Verdict
+
+**LLM assessment:** Moderate AI-assisted feel, not outright slop. Domain-specific copy, extensive state coverage, and transparent source/capability information make the feature credible. The generic card grid, repeated rounded panels, icon tiles, uppercase tracked labels, and decorative changelog stripe still expose a component-recipe grammar. It looks competent but not fully edited into a distinctive Homarr store.
+
+**Deterministic scan:** `detect.mjs --json apps/docs/src/components/workshop` exited 0 with exact output `[]`: zero findings, zero triggered rules, and no false positives. The scan found none of Impeccable's deterministic anti-patterns.
+
+**Visual overlays:** No reliable user-visible overlay is available. The independent detector agent had no browser backend. The parent fallback opened a fresh browser tab and visually inspected the listing, but the browser API did not expose a mutable evaluation method for the required preflight, so injection and `[Human]` visibility were correctly skipped. Browser/source evidence was used instead.
+
+## Overall Impression
+
+The Workshop is already substantially better than a generic gallery: it communicates authorship, source code, API capabilities, secrets, revision history, reports, and discussion. The biggest opportunity is to turn that information into a deliberate trust sequence. Today the interface lets the user act first and understand safety later, especially on mobile.
+
+## What's Working
+
+- **State coverage is unusually strong.** Listing failures, stale data, loading skeletons, empty results, filter recovery, comment errors, pending actions, and destructive confirmations have explicit UI.
+- **Pre-install transparency is excellent.** API hosts, methods, configurable options, network scope, and credential requirements are visible instead of hidden behind a download.
+- **The new primitive layer is coherent.** Search, filters, menus, switches, dialogs, and code presentation share one restrained interaction vocabulary across light and dark themes.
+
+## Priority Issues
+
+### [P1] Safety context arrives after the install action on mobile
+
+**Why it matters:** Download and copy actions appear in the header, while source capabilities, credential requirements, and installation guidance live in an aside that drops below the long source and discussion sections under the desktop breakpoint. A first-time mobile user can commit before understanding what the widget contacts or what secrets it needs.
+
+**Fix:** Put a compact “Before you install” summary immediately below the header on small screens: API hosts, network scopes, credential count, and action/query counts. Keep the full sticky details panel on desktop.
+
+**Suggested command:** `$impeccable layout`
+
+### [P1] Primary button and own-comment contrast misses AA
+
+**Why it matters:** The requested theme's primary red with white foreground is about 3.4:1, below 4.5:1 for small text. The same pairing affects primary buttons and the author's comment bubbles.
+
+**Fix:** Darken the primary red or use a dark foreground in light mode, then verify default buttons and comment bubbles in both themes.
+
+**Suggested command:** `$impeccable colorize`
+
+### [P2] The listing's server-rendered fallback is blank
+
+**Why it matters:** Before hydration, the listing renders an empty block instead of preserving the page's hierarchy and indicating progress. This creates a visible dead zone on slower self-hosted deployments.
+
+**Fix:** Render the listing heading, toolbar silhouette, and shared skeleton cards as the `BrowserOnly` fallback, matching the detail page's loading treatment.
+
+**Suggested command:** `$impeccable harden`
+
+### [P2] Download, copy, source, and install compete for the same task
+
+**Why it matters:** “Download widget,” “Copy JSON,” a full source viewer, and a separate installation panel all appear as parallel paths. Users must infer the recommended workflow.
+
+**Fix:** Make “Download widget JSON” the single primary header action. Keep copy beside the source viewer and place the next import step directly beside or immediately after download.
+
+**Suggested command:** `$impeccable clarify`
+
+### [P2] Repeated metadata scaffolding creates visual noise
+
+**Why it matters:** Card shells, badges, icon tiles, uppercase tracked labels, and the changelog stripe make the detail page feel assembled from recipes and slow scanning.
+
+**Fix:** Flatten the widget details into a compact definition list, reserve badges for status, and remove the decorative changelog stripe.
+
+**Suggested command:** `$impeccable distill`
+
+## Persona Red Flags
+
+**Jordan, first-timer:** “Network scope,” queries, actions, options, and the manifest schema appear without inline explanation. Download versus copy has no stated recommendation. On mobile, credential and installation context arrives after source and discussion.
+
+**Sam, accessibility-dependent user:** Primary controls and author comment bubbles miss small-text contrast. Copy, optimistic votes, filter result changes, and successful report/edit completion do not expose explicit live-region behavior. Gallery controls and dots are below comfortable touch-target sizes.
+
+**Casey, distracted mobile user:** The most important safety panel falls to the bottom, while primary actions stay at the top. Long source and discussion content separate the decision from its explanation. The submit type selector remains dense at narrow widths.
+
+## Minor Observations
+
+- The internal installation guide uses an external-link icon.
+- The final publication action says “Submit” rather than “Publish submission.”
+- Dark-theme tokens are declared in two blocks, increasing drift risk.
+- Screenshot dots rely on opacity alone and lack `aria-current`.
+- Successful report and edit actions deserve a small confirmation instead of silent dismissal.
+
+## Questions to Consider
+
+- If source review is important enough to say “Review exactly what will be installed,” why can users download before seeing the capability and credential summary?
+- Is Workshop primarily a code catalog or a safety-conscious app store? The current action hierarchy tries to be both.
+- Should the successful end state be a downloaded file, or a confident handoff into Homarr with the next step already visible?
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
index dfe3385bd..c5532ca72 100644
--- a/.oxfmtrc.json
+++ b/.oxfmtrc.json
@@ -3,5 +3,15 @@
   "printWidth": 120,
   "endOfLine": "lf",
   "sortPackageJson": true,
-  "ignorePatterns": ["**/*.cjs", "**/lang/**", "static-data/**", "CHANGELOG.md", "apps/docs/.docusaurus/**", "apps/docs/build/**", "apps/docs/blog/**"]
+  "ignorePatterns": [
+    "**/*.cjs",
+    "**/lang/**",
+    "static-data/**",
+    "CHANGELOG.md",
+    "apps/docs/.docusaurus/**",
+    "apps/docs/build/**",
+    "apps/docs/blog/**",
+    "packages/custom-widgets/src/core/component-catalog.generated.json",
+    "apps/docs/static/custom-widgets/component-catalog-v1.json"
+  ]
 }
diff --git a/.oxlintrc.json b/.oxlintrc.json
index 946ca3e6c..8f0096195 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -30,7 +30,15 @@
   "options": {
     "reportUnusedDisableDirectives": "off"
   },
-  "ignorePatterns": ["**/*.config.js", "**/*.config.mjs", "**/*.cjs", "**/lang/*.d.json.ts", ".next/**", "apps/docs/.docusaurus/**", "apps/docs/build/**"],
+  "ignorePatterns": [
+    "**/*.config.js",
+    "**/*.config.mjs",
+    "**/*.cjs",
+    "**/lang/*.d.json.ts",
+    ".next/**",
+    "apps/docs/.docusaurus/**",
+    "apps/docs/build/**"
+  ],
   "settings": {
     "react": { "version": "19" }
   }
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f89968fdb..a829e2042 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,5 @@
+## [1.74.0](https://github.com/homarr-labs/homarr/compare/v1.73.0...v1.74.0) (2026-08-07)
+
 ## [1.73.0](https://github.com/homarr-labs/homarr/compare/v1.72.0...v1.73.0) (2026-07-31)
 
 ## [1.72.0](https://github.com/homarr-labs/homarr/compare/v1.71.0...v1.72.0) (2026-07-24)
diff --git a/Dockerfile b/Dockerfile
index 526f353da..f07fcae3b 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -3,12 +3,18 @@
 FROM node:24.18.0-alpine AS base
 
 FROM base AS builder
+ARG TARGETPLATFORM
 WORKDIR /app
-RUN apk add --no-cache libc6-compat curl bash && apk update
+# Native dependencies normally use prebuilds, but the build must remain
+# reproducible when a prebuild download times out and compilation is required.
+RUN apk add --no-cache libc6-compat curl bash python3 make g++
 
 RUN corepack enable pnpm
-COPY pnpm-lock.yaml pnpm-workspace.yaml package.json ./
+COPY .npmrc pnpm-lock.yaml pnpm-workspace.yaml package.json ./
 COPY patches ./patches
+COPY --parents ./apps/*/package.json ./packages/*/package.json ./tooling/*/package.json ./
+# @homarr/definitions generates documentation types during install.
+COPY --parents ./packages/definitions/src ./
 # Workaround for pnpm/pnpm#5268: pnpm fetch crashes when patchedDependencies
 # are configured with nodeLinker: hoisted. The applyPatchToDir function tries
 # to chdir into node_modules/<pkg> which doesn't exist during fetch (only the
@@ -22,11 +28,13 @@ RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store \
     pnpm fetch --ignore-scripts && \
     sed -i 's/nodeLinker: isolated/nodeLinker: hoisted/' pnpm-workspace.yaml
 
-COPY . .
-# Follow the pnpm fetch pattern from https://pnpm.io/cli/fetch
-# --frozen-lockfile is omitted as recommended by the pnpm fetch docs
+# Install only from the fetched, committed lockfile so local and Docker builds
+# resolve the same dependency graph. Serial lifecycle builds avoid esbuild's
+# atomic binary replacement racing across the hoisted workspace (pnpm/pnpm#8200).
 RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store \
-    pnpm install --recursive
+    npm_config_nodedir=/usr/local pnpm install --recursive --offline --frozen-lockfile --child-concurrency=1
+
+COPY . .
 
 ARG SKIP_ENV_VALIDATION='true'
 ARG CI='true'
@@ -37,7 +45,9 @@ RUN --mount=type=secret,id=TURBO_API,env=TURBO_API \
     --mount=type=secret,id=TURBO_TEAM,env=TURBO_TEAM \
     --mount=type=secret,id=TURBO_TOKEN,env=TURBO_TOKEN \
     --mount=type=secret,id=TURBO_REMOTE_CACHE_SIGNATURE_KEY,env=TURBO_REMOTE_CACHE_SIGNATURE_KEY \
-    TURBO_PLATFORM="${TARGETPLATFORM:-linux/amd64}" pnpm build
+    --mount=type=cache,id=homarr-next-build-${TARGETPLATFORM},target=/app/apps/nextjs/.next/cache,sharing=locked \
+    TURBO_PLATFORM="${TARGETPLATFORM:-linux/amd64}" \
+    pnpm turbo build --filter=@homarr/nextjs... --filter=@homarr/cli
 
 FROM base AS runner
 WORKDIR /app
@@ -85,5 +95,6 @@ ENV AUTH_PROVIDERS='credentials'
 ENV REDIS_IS_EXTERNAL='false'
 ENV NODE_ENV='production'
 
+EXPOSE 7575
 ENTRYPOINT [ "/app/entrypoint.sh" ]
 CMD ["sh", "run.sh"]
diff --git a/MANTINE.md b/MANTINE.md
new file mode 100644
index 000000000..a87cbbd48
--- /dev/null
+++ b/MANTINE.md
@@ -0,0 +1,474 @@
+# Mantine UI - LLM Documentation
+
+This index lists Mantine documentation pages formatted for LLMs.
+Each link points to a standalone Markdown file under the /llms path.
+
+For a single consolidated file with all content, use:
+- https://mantine.dev/llms-full.txt
+
+## FAQ
+
+- [Are Mantine components accessible?](https://mantine.dev/llms/q-are-mantine-components-accessible.md): Learn about Mantine components accessibility features
+- [Browser zooms in when input is focused. What should I do?](https://mantine.dev/llms/q-browser-zooms-on-focus.md): Use meta tag to disable browser scaling or increase input size
+- [Can I have color schemes other than light and dark?](https://mantine.dev/llms/q-light-dark-is-not-enough.md): Learn about the difference between color scheme and theme
+- [Can I have different primary color for light and dark color schemes?](https://mantine.dev/llms/q-primary-virtual-color.md): Learn how to use virtual color with primary color in theme object
+- [Can I remove MultiSelect placeholder when the component has selected values?](https://mantine.dev/llms/q-multiselect-value-placeholder.md): Learn why MultiSelect placeholder is not removed when values are selected and how to remove it with CSS
+- [Can I use an array of strings as a list in use-form?](https://mantine.dev/llms/q-list-of-strings-in-use-form.md): Learn about use-form lists limitations
+- [Can I use Mantine components as server components?](https://mantine.dev/llms/q-server-components.md): Learn about use client directive and server components usage
+- [Can I use Mantine with Astro?](https://mantine.dev/llms/q-can-i-use-mantine-with-astro.md): No, Astro does not support React context
+- [Can I use Mantine with Create React App (CRA)?](https://mantine.dev/llms/q-can-i-use-mantine-with-cra.md): Learn how to use Mantine without postcss-preset-mantine or how to eject CRA and customize webpack.config.js and use postcss-preset-mantine
+- [Can I use Mantine with Emotion/styled-components/tailwindcss?](https://mantine.dev/llms/q-third-party-styles.md): Learn about limitations of third-party styles
+- [Can I use Mantine with Vue/Svelte/Angular/etc.?](https://mantine.dev/llms/q-vue-svelte-angular.md): No, Mantine is a React library and does not support other frameworks/libraries
+- [Can I use nested inline styles with Mantine components?](https://mantine.dev/llms/q-nested-inline-styles.md): Nested styles are supported only in CSS files
+- [Can I use PostCSS function in inline styles?](https://mantine.dev/llms/q-postcss-fns-inline.md): Learn where PostCSS functions can be used in Mantine
+- [Can I use private CSS variables to style components?](https://mantine.dev/llms/q-private-css-variables.md): No, it is not safe and will not work with future versions of Mantine.
+- [Can I use SegmentedControl with empty value?](https://mantine.dev/llms/q-segmented-control-no-value.md): SegmentedControl cannot be used without a value
+- [How can I add dynamic CSS styles?](https://mantine.dev/llms/q-dynamic-css-styles.md): Use data attributes, CSS variables or inline styles
+- [How can I add fuzzy search to Select component?](https://mantine.dev/llms/q-select-fuzzy.md): Learn how to integrate third-party fuzzy search libraries with Mantine Select component
+- [How can I add hover styles to an element?](https://mantine.dev/llms/q-how-to-add-hover-styles.md): Learn how to add hover classes to an element with CSS modules, &:hover or @mixin hover
+- [How can I apply styles to all Mantine components?](https://mantine.dev/llms/q-apply-styles-to-all.md): Learn how to use attribute selector to apply styles to all Mantine components
+- [How can I change body background color?](https://mantine.dev/llms/q-body-background.md): Use CSS to change body background color
+- [How can I change component color prop value depending on the color scheme?](https://mantine.dev/llms/q-color-scheme-color.md): Learn how to use CSS variables resolver to change color value depending on the color scheme
+- [How can I change input focus styles?](https://mantine.dev/llms/q-input-focus-styles.md): Learn how to use Styles API with Mantine inputs
+- [How can I change Tabs border color?](https://mantine.dev/llms/q-tabs-border-color.md): Learn how to use Styles API with Tabs component
+- [How can I contribute to the library?](https://mantine.dev/llms/q-how-can-i-contribute.md): There are multiple ways to contribute even without writing code
+- [How can I disable all inputs/input groups inside a form?](https://mantine.dev/llms/q-disable-all-inputs-in-form.md): Learn how to disable all inputs/input groups inside a form with the unstyled Fieldset component
+- [How can I display different elements in light and dark color schemes?](https://mantine.dev/llms/q-light-dark-elements.md): Learn how to hide/show elements based on color scheme
+- [How can I focus the first input with error with use-form?](https://mantine.dev/llms/q-focus-first-input-with-error.md): Learn how to handle focus with use-form hook
+- [How can I get current color scheme value in JavaScript?](https://mantine.dev/llms/q-how-to-get-color-scheme-value-in-js.md): How to use useMantineColorScheme and useComputedColorScheme hooks to get current color scheme value in JavaScript
+- [How can I lint CSS files?](https://mantine.dev/llms/q-how-to-setup-stylelint.md): Learn how to set up Stylelint for Mantine postcss syntax
+- [How can I load fonts in Next.js?](https://mantine.dev/llms/q-next-load-fonts.md): A guide to load custom fonts in Next.js with CSS and next/font package
+- [How can I load fonts in React Router?](https://mantine.dev/llms/q-react-router-load-fonts.md): A guide to load custom fonts in React Router
+- [How can I load fonts in Vite?](https://mantine.dev/llms/q-vite-load-fonts.md): A guide to load custom fonts in Vite
+- [How can I lock scroll in my application?](https://mantine.dev/llms/q-how-to-lock-scroll.md): Use react-remove-scroll library to lock scroll in your application
+- [How can I submit a template to Mantine documentation?](https://mantine.dev/llms/q-submit-template.md): Learn how to create and submit a template to Mantine documentation
+- [How can I test Modal/Drawer/Popover components?](https://mantine.dev/llms/q-portals-testing.md): Learn how to use react-testing-library to test components that use portals and transitions.
+- [How can I test Select/MultiSelect components?](https://mantine.dev/llms/q-combobox-testing.md): Learn how to use react-testing-library to test Select and MultiSelect components.
+- [How can I upload files from Dropzone component?](https://mantine.dev/llms/q-dropzone-upload.md): Learn how to process files dropped into Dropzone component
+- [How is that thing done on the mantine.dev website?](https://mantine.dev/llms/q-how-that-thing-is-done.md): Learn how various elements are implemented on the mantine.dev website
+- [How to align input with a button in a flex container?](https://mantine.dev/llms/q-align-input-button.md): Learn how to align Mantine inputs with buttons using Group component
+- [How to call a function when Modal/Drawer closes and animation completes?](https://mantine.dev/llms/q-how-to-call-function-when-modal-closes.md): How to use transitionProps in Modal/Drawer components
+- [How to change background color for FiveM?](https://mantine.dev/llms/q-fivem-background-color.md): Unset body background color and color-scheme styles for FiveM
+- [How to change input placeholder color?](https://mantine.dev/llms/q-inputs-placeholder-color.md): Learn how to change placeholder color with Styles API
+- [How to integrate custom input with use-form hook?](https://mantine.dev/llms/q-custom-input-use-form.md): Learn how to add use-form support for custom inputs
+- [How to prevent Modal from closing?](https://mantine.dev/llms/q-how-to-prevent-modal-from-closing.md): Learn how to prevent Modal from closing when the user clicks outside of it or presses the Escape key
+- [How to scroll to the top of the form if the form is submitted with errors?](https://mantine.dev/llms/q-scroll-to-the-top-of-the-form.md): Learn how to call a function when the form is submitted with errors
+- [How to update Mantine dependencies?](https://mantine.dev/llms/q-how-to-update-dependencies.md): Learn how to update @mantine/*, @mantinex/* and postcss-preset-mantine dependencies manually or with ncu script
+- [How to use Dropzone with @mantine/form?](https://mantine.dev/llms/q-how-to-use-dropzone-with-form.md): Learn how to use Dropzone with @mantine/form to handle file selection state
+- [How to use Mantine template on GitHub?](https://mantine.dev/llms/q-templates-usage.md): Learn how to create a new repository based on Mantine template
+- [I get hydration warning about data-mantine-color-scheme attribute, what does it mean?](https://mantine.dev/llms/q-color-scheme-hydration-warning.md): Learn how hydration works and how to fix warnings
+- [Is there a comparison with other libraries?](https://mantine.dev/llms/q-other-libs.md): Comparison with other libraries is not provided, you are trusted to make your own decision based on documentation examples
+- [Is there a floating action button component?](https://mantine.dev/llms/q-floating-action-button.md): No, but you can build it with Affix and ActionIcon components
+- [Is there DataGrid component that I can use with Mantine?](https://mantine.dev/llms/q-data-grid-i-need.md): A list of community packages that provide DataGrid component that can be used with Mantine.
+- [It is not possible to pinch to zoom when a Modal is opened. What should I do?](https://mantine.dev/llms/q-pinch-to-zoom-modal.md): Use removeScrollProps to configure react-remove-scroll options
+- [MantineProvider was not found in component tree. What should I do?](https://mantine.dev/llms/q-mantine-provider-missing.md): Learn how to resolve MantineProvider issues
+- [My buttons are transparent and the background is visible only on hover, what is wrong?](https://mantine.dev/llms/q-transparent-buttons.md): You have installed a third-party library that overrides Mantine styles
+- [My Popover dropdown closes when I click on the dropdown of a nested Popover](https://mantine.dev/llms/q-nested-popover-closes.md): Popover dropdown is closed when it detects click-outside events
+- [My styles are broken with disabled JavaScript. What should I do?](https://mantine.dev/llms/q-disabled-js.md): Learn how to use Mantine without JavaScript enabled
+- [My styles are overridden by Mantine components styles, what should I do?](https://mantine.dev/llms/q-styles-order.md): Learn how to use CSS layers to control styles order and prevent Mantine components from overriding your styles
+- [Native browser validation does not work in some components, what should I do?](https://mantine.dev/llms/q-native-required.md): Learn why native browser validation does not work in some components
+- [The use-local-storage hook returns the real value only after mounting. Is it a bug?](https://mantine.dev/llms/q-local-storage-effect.md): Learn how Mantine retrieves local storage value
+- [What is the difference between searchable Select and Autocomplete?](https://mantine.dev/llms/q-select-autocomplete-difference.md): Searchable Select and Autocomplete are similar components, but they serve different purposes.
+- [Where can I find the roadmap?](https://mantine.dev/llms/q-roadmap.md): The roadmap is private and only available to the team.
+- [Why are my Carousel slides in vertical orientation?](https://mantine.dev/llms/q-carousel-missing-styles.md): You forgot to import carousel styles
+- [Why are my notifications displayed at the wrong position?](https://mantine.dev/llms/q-notifications-missing-styles.md): Because you did not import styles
+- [Why can I not use one polymorphic component in the component prop of another polymorphic component?](https://mantine.dev/llms/q-polymorphic-in-polymorphic.md): Learn how polymorphic components types work
+- [Why can I not use value/label data structure with Autocomplete/TagsInput?](https://mantine.dev/llms/q-autocomplete-value-label.md): Learn the difference between Autocomplete and Select components
+- [Why can VSCode not autoimport the Text component?](https://mantine.dev/llms/q-why-vscode-cannot-autoimport-text.md): It is confused by the native Text constructor
+- [Why do I see color scheme flickering on page load?](https://mantine.dev/llms/q-color-scheme-flickering.md): Color scheme flickering is caused by incorrect usage of ColorSchemeScript
+- [Why do my dates components look broken?](https://mantine.dev/llms/q-dates-missing-styles.md): Because you did not import styles
+- [Why does FileButton not work in Menu?](https://mantine.dev/llms/q-file-button-in-menu.md): Learn how to use FileButton in Menu component
+- [Why is it required to have 10 shades per color?](https://mantine.dev/llms/q-ten-shades-per-color.md): Learn how Mantine uses theme colors
+- [Why is my screen completely empty after I](https://mantine.dev/llms/q-notifications-empty-screen.md): You have used Notifications component incorrectly
+
+## Core
+
+- [Accordion](https://mantine.dev/llms/core-accordion.md): Divide content into collapsible sections
+- [ActionIcon](https://mantine.dev/llms/core-action-icon.md): Icon button
+- [Affix](https://mantine.dev/llms/core-affix.md): Renders children inside portal at fixed position
+- [Alert](https://mantine.dev/llms/core-alert.md): Attract user attention with important static message
+- [AlphaSlider](https://mantine.dev/llms/core-alpha-slider.md): Slider component for selecting alpha channel in color pickers (0 – 1)
+- [Anchor](https://mantine.dev/llms/core-anchor.md): Display link with theme styles
+- [AngleSlider](https://mantine.dev/llms/core-angle-slider.md): Pick angle value between 0 and 360
+- [AppShell](https://mantine.dev/llms/core-app-shell.md): Responsive shell for your application with header, navbar, aside and footer
+- [AspectRatio](https://mantine.dev/llms/core-aspect-ratio.md): Maintain responsive consistent width/height ratio
+- [Autocomplete](https://mantine.dev/llms/core-autocomplete.md): Autocomplete user input with any list of options
+- [Avatar](https://mantine.dev/llms/core-avatar.md): Display user profile image, initials or fallback icon
+- [BackgroundImage](https://mantine.dev/llms/core-background-image.md): Displays image as background
+- [Badge](https://mantine.dev/llms/core-badge.md): Display badge, pill or tag
+- [Blockquote](https://mantine.dev/llms/core-blockquote.md): Blockquote with optional cite
+- [Box](https://mantine.dev/llms/core-box.md): Base component for all Mantine components
+- [Breadcrumbs](https://mantine.dev/llms/core-breadcrumbs.md): Separates list of react nodes with given separator
+- [Burger](https://mantine.dev/llms/core-burger.md): Open/close navigation button
+- [Button](https://mantine.dev/llms/core-button.md): Button component to render button or link
+- [Card](https://mantine.dev/llms/core-card.md): Card with sections
+- [Cascader](https://mantine.dev/llms/core-cascader.md): Select a path from hierarchical data with cascading columns
+- [Center](https://mantine.dev/llms/core-center.md): Centers content vertically and horizontally
+- [Checkbox](https://mantine.dev/llms/core-checkbox.md): Capture boolean input from user
+- [Chip](https://mantine.dev/llms/core-chip.md): Pick one or multiple values with inline controls
+- [CloseButton](https://mantine.dev/llms/core-close-button.md): Button with close icon
+- [Code](https://mantine.dev/llms/core-code.md): Inline and block code
+- [Collapse](https://mantine.dev/llms/core-collapse.md): Animate presence with slide down/up transition
+- [ColorInput](https://mantine.dev/llms/core-color-input.md): Capture color from user
+- [ColorPicker](https://mantine.dev/llms/core-color-picker.md): Pick colors in hex(a), rgb(a), hsl(a) and hsv(a) formats
+- [ColorSwatch](https://mantine.dev/llms/core-color-swatch.md): Displays color
+- [Combobox](https://mantine.dev/llms/core-combobox.md): Create custom select, autocomplete or multiselect inputs
+- [ComboboxPopover](https://mantine.dev/llms/core-combobox-popover.md): Add combobox dropdown to any button element
+- [Container](https://mantine.dev/llms/core-container.md): Center content with padding and max-width
+- [CopyButton](https://mantine.dev/llms/core-copy-button.md): Copies given text to clipboard
+- [CorePackage](https://mantine.dev/llms/core-package.md)
+- [DataList](https://mantine.dev/llms/core-data-list.md): Display label-value pairs as a description list
+- [Dialog](https://mantine.dev/llms/core-dialog.md): Display a fixed overlay dialog at any side of the screen
+- [Divider](https://mantine.dev/llms/core-divider.md): Horizontal line with optional label or vertical divider
+- [Drawer](https://mantine.dev/llms/core-drawer.md): Display overlay area at any side of the screen
+- [EmptyState](https://mantine.dev/llms/core-empty-state.md): Display a placeholder for no data, empty results and first-run states
+- [Fieldset](https://mantine.dev/llms/core-fieldset.md): Group related elements in a form
+- [FileButton](https://mantine.dev/llms/core-file-button.md): Open file picker with a button click
+- [FileInput](https://mantine.dev/llms/core-file-input.md): Capture files from user
+- [Flex](https://mantine.dev/llms/core-flex.md): Compose elements in a flex container
+- [FloatingIndicator](https://mantine.dev/llms/core-floating-indicator.md): Display a floating indicator over a group of elements
+- [FloatingWindow](https://mantine.dev/llms/core-floating-window.md): Draggable floating area
+- [FocusTrap](https://mantine.dev/llms/core-focus-trap.md): Trap focus at child node
+- [Grid](https://mantine.dev/llms/core-grid.md): Responsive 12 columns grid system
+- [Group](https://mantine.dev/llms/core-group.md): Compose elements and components in a horizontal flex container
+- [Highlight](https://mantine.dev/llms/core-highlight.md): Highlight given part of a string with mark
+- [HoverCard](https://mantine.dev/llms/core-hover-card.md): Display popover section when target element is hovered
+- [HueSlider](https://mantine.dev/llms/core-hue-slider.md): Slider component for selecting hue channel in color pickers (0 – 360 degrees)
+- [Image](https://mantine.dev/llms/core-image.md): Image with optional fallback
+- [Indicator](https://mantine.dev/llms/core-indicator.md): Display element at the corner of another element
+- [Input](https://mantine.dev/llms/core-input.md): Base component to create custom inputs
+- [JsonInput](https://mantine.dev/llms/core-json-input.md): Capture json data from user
+- [Kbd](https://mantine.dev/llms/core-kbd.md): Display keyboard key
+- [List](https://mantine.dev/llms/core-list.md): Display ordered or unordered list
+- [Loader](https://mantine.dev/llms/core-loader.md): Indicate loading state
+- [LoadingOverlay](https://mantine.dev/llms/core-loading-overlay.md): An overlay with centered loader
+- [Mark](https://mantine.dev/llms/core-mark.md): Highlight part of the text
+- [Marquee](https://mantine.dev/llms/core-marquee.md): Create continuous scrolling animation for content
+- [MaskInput](https://mantine.dev/llms/core-mask-input.md): Input with mask pattern for formatted text entry
+- [Menu](https://mantine.dev/llms/core-menu.md): Combine a list of secondary actions into single interactive area
+- [Menubar](https://mantine.dev/llms/core-menubar.md): Desktop application style menubar with a row of menu triggers
+- [Modal](https://mantine.dev/llms/core-modal.md): An accessible overlay dialog
+- [MultiSelect](https://mantine.dev/llms/core-multi-select.md): Custom searchable multi select
+- [NativeSelect](https://mantine.dev/llms/core-native-select.md): Native select element based on Input
+- [NavLink](https://mantine.dev/llms/core-nav-link.md): Navigation link
+- [Notification](https://mantine.dev/llms/core-notification.md): Show dynamic notifications and alerts to user, part of notifications system
+- [NumberFormatter](https://mantine.dev/llms/core-number-formatter.md): Format number with thousands/decimal separators and suffix/prefix
+- [NumberInput](https://mantine.dev/llms/core-number-input.md): Capture number from user
+- [OverflowList](https://mantine.dev/llms/core-overflow-list.md): Hide items that do not fit in a container and display them as a single collapsed item
+- [Overlay](https://mantine.dev/llms/core-overlay.md): Overlays parent element with div element with any color and opacity
+- [Pagination](https://mantine.dev/llms/core-pagination.md): Display active page and navigate between multiple pages
+- [Paper](https://mantine.dev/llms/core-paper.md): Renders white or dark background depending on color scheme
+- [PasswordInput](https://mantine.dev/llms/core-password-input.md): Capture password data from user
+- [Pill](https://mantine.dev/llms/core-pill.md): Removable and non-removable tags
+- [PillsInput](https://mantine.dev/llms/core-pills-input.md): Base component for custom tags inputs and multi selects
+- [PinInput](https://mantine.dev/llms/core-pin-input.md): Capture pin code or one time password from the user
+- [Popover](https://mantine.dev/llms/core-popover.md): Display popover section relative to given target element
+- [Portal](https://mantine.dev/llms/core-portal.md): Renders component outside of parent element tree
+- [Progress](https://mantine.dev/llms/core-progress.md): Give user feedback for status of the task
+- [Radio](https://mantine.dev/llms/core-radio.md): Wrapper for input type radio
+- [RangeSlider](https://mantine.dev/llms/core-range-slider.md): RangeSlider component
+- [Rating](https://mantine.dev/llms/core-rating.md): Pick and display rating
+- [RingProgress](https://mantine.dev/llms/core-ring-progress.md): Give user feedback for status of the task with circle diagram
+- [RollingNumber](https://mantine.dev/llms/core-rolling-number.md): Animate value changes with rolling digits
+- [ScrollArea](https://mantine.dev/llms/core-scroll-area.md): Area with custom scrollbars
+- [Scroller](https://mantine.dev/llms/core-scroller.md): Horizontal scroll container with navigation controls
+- [SegmentedControl](https://mantine.dev/llms/core-segmented-control.md): A linear set of two or more segments
+- [Select](https://mantine.dev/llms/core-select.md): Custom searchable select
+- [SemiCircleProgress](https://mantine.dev/llms/core-semi-circle-progress.md): Represent progress with semi circle diagram
+- [SimpleGrid](https://mantine.dev/llms/core-simple-grid.md): Responsive grid in which each item takes equal amount of space
+- [Skeleton](https://mantine.dev/llms/core-skeleton.md): Indicate content loading state
+- [Slider](https://mantine.dev/llms/core-slider.md): Slider component
+- [Space](https://mantine.dev/llms/core-space.md): Add horizontal or vertical spacing from theme
+- [Splitter](https://mantine.dev/llms/core-splitter.md): Resizable split pane layout
+- [Spoiler](https://mantine.dev/llms/core-spoiler.md): Hide long sections of content under a spoiler
+- [Stack](https://mantine.dev/llms/core-stack.md): Compose elements and components in a vertical flex container
+- [Stepper](https://mantine.dev/llms/core-stepper.md): Display content divided into a steps sequence
+- [Switch](https://mantine.dev/llms/core-switch.md): Capture boolean input from user
+- [Table](https://mantine.dev/llms/core-table.md): Render table with theme styles
+- [TableOfContents](https://mantine.dev/llms/core-table-of-contents.md): Renders a list of headings on the page and tracks current heading visible in the viewport
+- [Tabs](https://mantine.dev/llms/core-tabs.md): Switch between different views
+- [TagsInput](https://mantine.dev/llms/core-tags-input.md): Capture a list of values from user with free input and suggestions
+- [Text](https://mantine.dev/llms/core-text.md): Display text
+- [Textarea](https://mantine.dev/llms/core-textarea.md): Autosize or regular textarea
+- [TextInput](https://mantine.dev/llms/core-text-input.md): Capture string input from user
+- [ThemeIcon](https://mantine.dev/llms/core-theme-icon.md): Render icon inside element with theme colors
+- [Timeline](https://mantine.dev/llms/core-timeline.md): Display list of events in chronological order
+- [Title](https://mantine.dev/llms/core-title.md): h1-h6 heading
+- [Tooltip](https://mantine.dev/llms/core-tooltip.md): Renders tooltip at given element on mouse over or other event
+- [Transition](https://mantine.dev/llms/core-transition.md): Animate presence of component with pre-made animations
+- [Tree](https://mantine.dev/llms/core-tree.md): Display a Tree structure
+- [TreeSelect](https://mantine.dev/llms/core-tree-select.md): Select with hierarchical tree data
+- [Typography](https://mantine.dev/llms/core-typography.md): Styles provider for html content
+- [UnstyledButton](https://mantine.dev/llms/core-unstyled-button.md): Unstyled polymorphic button
+- [VisuallyHidden](https://mantine.dev/llms/core-visually-hidden.md): Hide element visually but keep it accessible for screen readers
+
+## Hooks
+
+- [HooksPackage](https://mantine.dev/llms/hooks-package.md)
+- [use-element-size](https://mantine.dev/llms/hooks-use-element-size.md): Returns element width and height and observes changes with ResizeObserver
+- [useClickOutside](https://mantine.dev/llms/hooks-use-click-outside.md)
+- [useClipboard](https://mantine.dev/llms/hooks-use-clipboard.md)
+- [useCollapse](https://mantine.dev/llms/hooks-use-collapse.md)
+- [useColorScheme](https://mantine.dev/llms/hooks-use-color-scheme.md)
+- [useCounter](https://mantine.dev/llms/hooks-use-counter.md)
+- [useDebouncedCallback](https://mantine.dev/llms/hooks-use-debounced-callback.md)
+- [useDebouncedState](https://mantine.dev/llms/hooks-use-debounced-state.md)
+- [useDebouncedValue](https://mantine.dev/llms/hooks-use-debounced-value.md)
+- [useDidUpdate](https://mantine.dev/llms/hooks-use-did-update.md)
+- [useDisclosure](https://mantine.dev/llms/hooks-use-disclosure.md)
+- [useDocumentTitle](https://mantine.dev/llms/hooks-use-document-title.md)
+- [useDocumentVisibility](https://mantine.dev/llms/hooks-use-document-visibility.md)
+- [useDrag](https://mantine.dev/llms/hooks-use-drag.md)
+- [useEventListener](https://mantine.dev/llms/hooks-use-event-listener.md)
+- [useEyeDropper](https://mantine.dev/llms/hooks-use-eye-dropper.md)
+- [useFavicon](https://mantine.dev/llms/hooks-use-favicon.md)
+- [useFetch](https://mantine.dev/llms/hooks-use-fetch.md)
+- [useFileDialog](https://mantine.dev/llms/hooks-use-file-dialog.md)
+- [useFloatingWindow](https://mantine.dev/llms/hooks-use-floating-window.md)
+- [useFocusReturn](https://mantine.dev/llms/hooks-use-focus-return.md)
+- [useFocusTrap](https://mantine.dev/llms/hooks-use-focus-trap.md)
+- [useFocusWithin](https://mantine.dev/llms/hooks-use-focus-within.md)
+- [useForceUpdate](https://mantine.dev/llms/hooks-use-force-update.md)
+- [useFullscreen](https://mantine.dev/llms/hooks-use-fullscreen.md)
+- [useHash](https://mantine.dev/llms/hooks-use-hash.md)
+- [useHeadroom](https://mantine.dev/llms/hooks-use-headroom.md)
+- [useHotkeys](https://mantine.dev/llms/hooks-use-hotkeys.md)
+- [useHover](https://mantine.dev/llms/hooks-use-hover.md)
+- [useId](https://mantine.dev/llms/hooks-use-id.md)
+- [useIdle](https://mantine.dev/llms/hooks-use-idle.md)
+- [useInputState](https://mantine.dev/llms/hooks-use-input-state.md)
+- [useIntersection](https://mantine.dev/llms/hooks-use-intersection.md)
+- [useInterval](https://mantine.dev/llms/hooks-use-interval.md)
+- [useInViewport](https://mantine.dev/llms/hooks-use-in-viewport.md)
+- [useIsFirstRender](https://mantine.dev/llms/hooks-use-is-first-render.md)
+- [useIsomorphicEffect](https://mantine.dev/llms/hooks-use-isomorphic-effect.md)
+- [useListState](https://mantine.dev/llms/hooks-use-list-state.md)
+- [useLocalStorage](https://mantine.dev/llms/hooks-use-local-storage.md)
+- [useLogger](https://mantine.dev/llms/hooks-use-logger.md)
+- [useLongPress](https://mantine.dev/llms/hooks-use-long-press.md)
+- [useMap](https://mantine.dev/llms/hooks-use-map.md)
+- [useMask](https://mantine.dev/llms/hooks-use-mask.md)
+- [useMediaQuery](https://mantine.dev/llms/hooks-use-media-query.md)
+- [useMergedRef](https://mantine.dev/llms/hooks-use-merged-ref.md)
+- [useMounted](https://mantine.dev/llms/hooks-use-mounted.md)
+- [useMouse](https://mantine.dev/llms/hooks-use-mouse.md)
+- [useMove](https://mantine.dev/llms/hooks-use-move.md)
+- [useMutationObserver](https://mantine.dev/llms/hooks-use-mutation-observer.md)
+- [useNetwork](https://mantine.dev/llms/hooks-use-network.md)
+- [useOrientation](https://mantine.dev/llms/hooks-use-orientation.md)
+- [useOs](https://mantine.dev/llms/hooks-use-os.md)
+- [usePageLeave](https://mantine.dev/llms/hooks-use-page-leave.md)
+- [usePagination](https://mantine.dev/llms/hooks-use-pagination.md)
+- [usePrevious](https://mantine.dev/llms/hooks-use-previous.md)
+- [useQueue](https://mantine.dev/llms/hooks-use-queue.md)
+- [useRadialMove](https://mantine.dev/llms/hooks-use-radial-move.md)
+- [useReducedMotion](https://mantine.dev/llms/hooks-use-reduced-motion.md)
+- [useResizeObserver](https://mantine.dev/llms/hooks-use-resize-observer.md)
+- [useRovingIndex](https://mantine.dev/llms/hooks-use-roving-index.md)
+- [useScrollDirection](https://mantine.dev/llms/hooks-use-scroll-direction.md)
+- [useScroller](https://mantine.dev/llms/hooks-use-scroller.md)
+- [useScrollIntoView](https://mantine.dev/llms/hooks-use-scroll-into-view.md)
+- [useScrollSpy](https://mantine.dev/llms/hooks-use-scroll-spy.md)
+- [useSelection](https://mantine.dev/llms/hooks-use-selection.md)
+- [useSet](https://mantine.dev/llms/hooks-use-set.md)
+- [useSetState](https://mantine.dev/llms/hooks-use-set-state.md)
+- [useShallowEffect](https://mantine.dev/llms/hooks-use-shallow-effect.md)
+- [useSplitter](https://mantine.dev/llms/hooks-use-splitter.md)
+- [useStateHistory](https://mantine.dev/llms/hooks-use-state-history.md)
+- [useTextSelection](https://mantine.dev/llms/hooks-use-text-selection.md)
+- [useThrottledCallback](https://mantine.dev/llms/hooks-use-throttled-callback.md)
+- [useThrottledState](https://mantine.dev/llms/hooks-use-throttled-state.md)
+- [useThrottledValue](https://mantine.dev/llms/hooks-use-throttled-value.md)
+- [useTimeout](https://mantine.dev/llms/hooks-use-timeout.md)
+- [useToggle](https://mantine.dev/llms/hooks-use-toggle.md)
+- [useUncontrolled](https://mantine.dev/llms/hooks-use-uncontrolled.md)
+- [useValidatedState](https://mantine.dev/llms/hooks-use-validated-state.md)
+- [useViewportSize](https://mantine.dev/llms/hooks-use-viewport-size.md)
+- [useWindowEvent](https://mantine.dev/llms/hooks-use-window-event.md)
+- [useWindowScroll](https://mantine.dev/llms/hooks-use-window-scroll.md)
+
+## Form
+
+- [Form context](https://mantine.dev/llms/form-create-form-context.md): Add context support to use-form with createFormContext
+- [formActions](https://mantine.dev/llms/form-actions.md)
+- [formAllInputs](https://mantine.dev/llms/form-all-inputs.md)
+- [formErrors](https://mantine.dev/llms/form-errors.md)
+- [formGetInputProps](https://mantine.dev/llms/form-get-input-props.md)
+- [formNested](https://mantine.dev/llms/form-nested.md)
+- [FormPackage](https://mantine.dev/llms/form-package.md)
+- [formRecipes](https://mantine.dev/llms/form-recipes.md)
+- [formSchemaValidation](https://mantine.dev/llms/form-schema-validation.md)
+- [formStatus](https://mantine.dev/llms/form-status.md)
+- [formUncontrolled](https://mantine.dev/llms/form-uncontrolled.md)
+- [formValidation](https://mantine.dev/llms/form-validation.md)
+- [formValidators](https://mantine.dev/llms/form-validators.md)
+- [formValues](https://mantine.dev/llms/form-values.md)
+- [use-field](https://mantine.dev/llms/form-use-field.md): use-field hook – manage single field state
+- [use-form](https://mantine.dev/llms/form-use-form.md): Manage form state
+
+## Dates
+
+- [Calendar](https://mantine.dev/llms/dates-calendar.md): Base component for custom date pickers
+- [DateInput](https://mantine.dev/llms/dates-date-input.md): Free form date input
+- [DatePicker](https://mantine.dev/llms/dates-date-picker.md): Inline date, multiple dates and dates range picker
+- [DatePickerInput](https://mantine.dev/llms/dates-date-picker-input.md): Date, multiple dates and dates range picker input
+- [DateTimePicker](https://mantine.dev/llms/dates-date-time-picker.md): Capture datetime from the user
+- [GettingStartedDates](https://mantine.dev/llms/dates-getting-started.md)
+- [InlineDateTimePicker](https://mantine.dev/llms/dates-inline-date-time-picker.md): Inline date and time picker with range support
+- [MiniCalendar](https://mantine.dev/llms/dates-mini-calendar.md): Compact calendar to display a small number of days in a row
+- [MonthPicker](https://mantine.dev/llms/dates-month-picker.md): Inline month, multiple months and months range picker
+- [MonthPickerInput](https://mantine.dev/llms/dates-month-picker-input.md): Month, multiple months and months range picker input
+- [TimeGrid](https://mantine.dev/llms/dates-time-grid.md): Captures time value from the user with a predefined set of options
+- [TimeInput](https://mantine.dev/llms/dates-time-input.md): Capture time from the user
+- [TimePicker](https://mantine.dev/llms/dates-time-picker.md): Captures time value from the user
+- [TimeValue](https://mantine.dev/llms/dates-time-value.md): Display a formatted time value
+- [YearPicker](https://mantine.dev/llms/dates-year-picker.md): Inline year, multiple years and years range picker
+- [YearPickerInput](https://mantine.dev/llms/dates-year-picker-input.md): Inline year, multiple years and years range picker
+
+## Charts
+
+- [AreaChart](https://mantine.dev/llms/charts-area-chart.md): Area chart component with stacked, percent and split variants
+- [BarChart](https://mantine.dev/llms/charts-bar-chart.md): Bar chart component with stacked and percent variants
+- [BarsList](https://mantine.dev/llms/charts-bars-list.md): Display a list of bars with names and values
+- [BubbleChart](https://mantine.dev/llms/charts-bubble-chart.md): Bubble chart component
+- [BulletChart](https://mantine.dev/llms/charts-bullet-chart.md): Compact KPI chart with value, target, and qualitative ranges
+- [CompositeChart](https://mantine.dev/llms/charts-composite-chart.md): Composed chart with support for Area, Bar and Line charts
+- [DonutChart](https://mantine.dev/llms/charts-donut-chart.md): Donut chart component
+- [FunnelChart](https://mantine.dev/llms/charts-funnel-chart.md): Funnel chart component
+- [GettingStartedCharts](https://mantine.dev/llms/charts-getting-started.md)
+- [Heatmap](https://mantine.dev/llms/charts-heatmap.md): Heatmap chart component
+- [LineChart](https://mantine.dev/llms/charts-line-chart.md): Line chart component
+- [PieChart](https://mantine.dev/llms/charts-pie-chart.md): Pie chart component
+- [RadarChart](https://mantine.dev/llms/charts-radar-chart.md): Radar chart component
+- [RadialBarChart](https://mantine.dev/llms/charts-radial-bar-chart.md): Radial bar chart component
+- [SankeyChart](https://mantine.dev/llms/charts-sankey-chart.md): Sankey diagram component
+- [ScatterChart](https://mantine.dev/llms/charts-scatter-chart.md): Scatter chart component
+- [Sparkline](https://mantine.dev/llms/charts-sparkline.md): Simplified area chart to show trends
+- [SunburstChart](https://mantine.dev/llms/charts-sunburst-chart.md): Sunburst chart component for hierarchical data
+- [Treemap](https://mantine.dev/llms/charts-treemap.md): Treemap chart component
+
+## Schedule
+
+- [AgendaView](https://mantine.dev/llms/schedule-agenda-view.md): Vertical list view of events grouped by date
+- [DayView](https://mantine.dev/llms/schedule-day-view.md): Standalone schedule day view component
+- [GettingStartedSchedule](https://mantine.dev/llms/schedule-getting-started.md)
+- [MobileMonthView](https://mantine.dev/llms/schedule-mobile-month-view.md): Mobile-optimized schedule month view component
+- [MonthView](https://mantine.dev/llms/schedule-month-view.md): Standalone schedule month view component
+- [RecurringEventsSchedule](https://mantine.dev/llms/schedule-recurring-events.md)
+- [ResourcesDayView](https://mantine.dev/llms/schedule-resources-day-view.md): Day view with resource columns for scheduling across resources
+- [ResourcesMonthView](https://mantine.dev/llms/schedule-resources-month-view.md): Month view with resource lanes for scheduling across resources
+- [ResourcesSchedule](https://mantine.dev/llms/schedule-resources-schedule.md): Schedule wrapper component that combines resource day, week and month views
+- [ResourcesWeekView](https://mantine.dev/llms/schedule-resources-week-view.md): Week view with resource rows for scheduling across resources
+- [Schedule](https://mantine.dev/llms/schedule-schedule.md): Schedule component with day, week, month and year views
+- [ScheduleEventsData](https://mantine.dev/llms/schedule-events-data.md)
+- [WeekView](https://mantine.dev/llms/schedule-week-view.md): Standalone schedule week view component
+- [YearView](https://mantine.dev/llms/schedule-year-view.md): Standalone schedule year view component
+
+## Guides
+
+- [ControlledVsUncontrolled](https://mantine.dev/llms/guides-controlled-vs-uncontrolled.md)
+- [CustomComponents](https://mantine.dev/llms/guides-custom-components.md)
+- [EightToNine](https://mantine.dev/llms/guides-8x-to-9x.md)
+- [FunctionsReference](https://mantine.dev/llms/guides-functions-reference.md)
+- [Gatsby](https://mantine.dev/llms/guides-gatsby.md)
+- [Icons](https://mantine.dev/llms/guides-icons.md)
+- [JavaScript](https://mantine.dev/llms/guides-javascript.md)
+- [Jest](https://mantine.dev/llms/guides-jest.md)
+- [LLMDocumentation](https://mantine.dev/llms/guides-llms.md)
+- [NextJs](https://mantine.dev/llms/guides-next.md)
+- [Polymorphic](https://mantine.dev/llms/guides-polymorphic.md)
+- [ReactRouter](https://mantine.dev/llms/guides-react-router.md)
+- [Redwood](https://mantine.dev/llms/guides-redwood.md)
+- [SevenToEight](https://mantine.dev/llms/guides-7x-to-8x.md)
+- [SixToSeven](https://mantine.dev/llms/guides-6x-to-7x.md)
+- [Storybook](https://mantine.dev/llms/guides-storybook.md)
+- [Tiptap3Migration](https://mantine.dev/llms/guides-tiptap-3-migration.md)
+- [TypeScript](https://mantine.dev/llms/guides-typescript.md)
+- [Vite](https://mantine.dev/llms/guides-vite.md)
+- [Vitest](https://mantine.dev/llms/guides-vitest.md)
+
+## Theming
+
+- [Colors](https://mantine.dev/llms/theming-colors.md)
+- [ColorSchemes](https://mantine.dev/llms/theming-color-schemes.md)
+- [DefaultProps](https://mantine.dev/llms/theming-default-props.md)
+- [MantineProvider](https://mantine.dev/llms/theming-mantine-provider.md)
+- [ThemeObject](https://mantine.dev/llms/theming-theme-object.md)
+- [Typography](https://mantine.dev/llms/theming-typography.md): Styles provider for html content
+
+## Styles
+
+- [ColorFunctions](https://mantine.dev/llms/styles-color-functions.md)
+- [CSSFilesList](https://mantine.dev/llms/styles-css-files-list.md)
+- [CSSModules](https://mantine.dev/llms/styles-css-modules.md)
+- [CssVariables](https://mantine.dev/llms/styles-css-variables.md)
+- [CSSVariablesList](https://mantine.dev/llms/styles-css-variables-list.md)
+- [DataAttributes](https://mantine.dev/llms/styles-data-attributes.md)
+- [Emotion](https://mantine.dev/llms/styles-emotion.md)
+- [GlobalStyles](https://mantine.dev/llms/styles-global-styles.md)
+- [MantineStyles](https://mantine.dev/llms/styles-mantine-styles.md)
+- [PostCSSPreset](https://mantine.dev/llms/styles-postcss-preset.md)
+- [Rem](https://mantine.dev/llms/styles-rem.md)
+- [ResponsiveStyles](https://mantine.dev/llms/styles-responsive.md)
+- [Rtl](https://mantine.dev/llms/styles-rtl.md)
+- [StyleProp](https://mantine.dev/llms/styles-style.md)
+- [StyleProps](https://mantine.dev/llms/styles-style-props.md)
+- [StylesApi](https://mantine.dev/llms/styles-styles-api.md)
+- [StylesOverview](https://mantine.dev/llms/styles-styles-overview.md)
+- [StylesPerformance](https://mantine.dev/llms/styles-styles-performance.md)
+- [UnstyledComponents](https://mantine.dev/llms/styles-unstyled.md)
+- [UsageWithSass](https://mantine.dev/llms/styles-sass.md)
+- [VanillaExtract](https://mantine.dev/llms/styles-vanilla-extract.md)
+- [VariantsAndSizes](https://mantine.dev/llms/styles-variants-sizes.md)
+
+## X
+
+- [Carousel](https://mantine.dev/llms/x-carousel.md): Embla based carousel component
+- [CodeHighlight](https://mantine.dev/llms/x-code-highlight.md): Highlight code with shiki or highlight.js
+- [Dropzone](https://mantine.dev/llms/x-dropzone.md): Capture files from user with drag and drop
+- [ExtensionsPackage](https://mantine.dev/llms/x-extensions.md)
+- [Modals manager](https://mantine.dev/llms/x-modals.md): Centralized modals manager with option to handle state of multi-step modals
+- [NavigationProgress](https://mantine.dev/llms/x-nprogress.md): Navigation progress bar
+- [Notifications system](https://mantine.dev/llms/x-notifications.md): Mantine notifications system
+- [Rich text editor](https://mantine.dev/llms/x-tiptap.md): Tiptap based rich text editor
+- [Spotlight](https://mantine.dev/llms/x-spotlight.md): Command center for your application
+
+## Other
+
+- [About](https://mantine.dev/llms/about.md)
+- [AllReleases](https://mantine.dev/llms/changelog-all-releases.md)
+- [BrowserSupport](https://mantine.dev/llms/browser-support.md)
+- [Changelog700](https://mantine.dev/llms/changelog-7-0-0.md)
+- [Changelog710](https://mantine.dev/llms/changelog-7-1-0.md)
+- [Changelog7100](https://mantine.dev/llms/changelog-7-10-0.md)
+- [Changelog7110](https://mantine.dev/llms/changelog-7-11-0.md)
+- [Changelog7120](https://mantine.dev/llms/changelog-7-12-0.md)
+- [Changelog7130](https://mantine.dev/llms/changelog-7-13-0.md)
+- [Changelog7140](https://mantine.dev/llms/changelog-7-14-0.md)
+- [Changelog7150](https://mantine.dev/llms/changelog-7-15-0.md)
+- [Changelog7160](https://mantine.dev/llms/changelog-7-16-0.md)
+- [Changelog7170](https://mantine.dev/llms/changelog-7-17-0.md)
+- [Changelog720](https://mantine.dev/llms/changelog-7-2-0.md)
+- [Changelog730](https://mantine.dev/llms/changelog-7-3-0.md)
+- [Changelog740](https://mantine.dev/llms/changelog-7-4-0.md)
+- [Changelog750](https://mantine.dev/llms/changelog-7-5-0.md)
+- [Changelog760](https://mantine.dev/llms/changelog-7-6-0.md)
+- [Changelog770](https://mantine.dev/llms/changelog-7-7-0.md)
+- [Changelog780](https://mantine.dev/llms/changelog-7-8-0.md)
+- [Changelog790](https://mantine.dev/llms/changelog-7-9-0.md)
+- [Changelog800](https://mantine.dev/llms/changelog-8-0-0.md)
+- [Changelog810](https://mantine.dev/llms/changelog-8-1-0.md)
+- [Changelog820](https://mantine.dev/llms/changelog-8-2-0.md)
+- [Changelog830](https://mantine.dev/llms/changelog-8-3-0.md)
+- [Changelog900](https://mantine.dev/llms/changelog-9-0-0.md)
+- [Changelog910](https://mantine.dev/llms/changelog-9-1-0.md)
+- [Changelog920](https://mantine.dev/llms/changelog-9-2-0.md)
+- [Changelog930](https://mantine.dev/llms/changelog-9-3-0.md)
+- [Changelog940](https://mantine.dev/llms/changelog-9-4-0.md)
+- [Changelog950](https://mantine.dev/llms/changelog-9-5-0.md)
+- [Contribute](https://mantine.dev/llms/contribute.md)
+- [GettingStarted](https://mantine.dev/llms/getting-started.md)
+- [NotFound](https://mantine.dev/llms/404.md)
+- [OxcConfig](https://mantine.dev/llms/oxc-config-mantine.md)
+- [PreviousChangelogs](https://mantine.dev/llms/changelog-previous-versions.md)
+- [Support](https://mantine.dev/llms/support.md)
diff --git a/PRODUCT.md b/PRODUCT.md
new file mode 100644
index 000000000..bac6f41bd
--- /dev/null
+++ b/PRODUCT.md
@@ -0,0 +1,39 @@
+# Product
+
+## Register
+
+product
+
+## Users
+
+Homarr is for self-hosters and administrators who assemble dashboards for services across home labs and private infrastructure. They need dense, reliable controls and status at a glance, while retaining enough guidance to configure advanced features without hiding how they work.
+
+## Product Purpose
+
+Homarr provides one place to organize, observe, and operate self-hosted services. Success means users can build useful dashboards quickly, understand their state, recover from configuration errors, act on services, and reshape their workspace without repeatedly leaving the board. Boards must load immediately, stay visually stable, and keep widgets legible across screen sizes.
+
+## Brand Personality
+
+Direct, capable, precise, and approachable. Homarr should feel calm under load, be truthful about system state, and reward users who refine details.
+
+## Anti-references
+
+- Decorative dashboards, oversized metric cards, and motion without state meaning.
+- Wizard flows that fight ordinary scrolling or rigid layouts that force one workflow.
+- Hidden configuration magic and implementation complexity exposed before it is needed.
+- Clever custom controls where familiar platform or Mantine interactions already work.
+
+## Design Principles
+
+1. Keep configuration, consequences, and system state visible.
+2. Make simple tasks short without limiting advanced workflows.
+3. Preserve expert depth while prioritizing urgent information at small sizes.
+4. Reveal dense workspaces progressively through a consistent advanced focus mode.
+5. Isolate failures and show loading, stale, partial, empty, and failed states truthfully.
+6. Use the existing Mantine design language consistently across management and board surfaces.
+7. Keep spatial actions direct: moving, resizing, nesting, and using fixed rails happen on the canvas with immediate feedback.
+8. Preserve predictable widget composition with fixed logical tile sizes and horizontal scrolling before controls become inaccessible.
+
+## Accessibility & Inclusion
+
+Target WCAG 2.2 AA. Every pointer interaction needs a keyboard and coarse-pointer path. Support screen readers, visible and restored focus, sufficient contrast, reduced motion, non-color status cues, responsive layouts, actionable error messages, and keyboard equivalents for drag and resize operations.
diff --git a/REVIEW.md b/REVIEW.md
new file mode 100644
index 000000000..d78b4fc5e
--- /dev/null
+++ b/REVIEW.md
@@ -0,0 +1,263 @@
+# PR #6502 widget-modernization ultra-review
+
+## Executive result
+
+**Merge recommendation: changes required.** No P0 was found, but the current branch still has five P1 issues: a pre-existing Custom API authorization/redirect weakness exposed by this subsystem review, an inaccessible manual advanced-focus interaction, a likely fixed-position/transform geometry defect, systemic false empty states for failed queries, and unvalidated integration-provided navigation URLs. Eight P2 issues cover raw error disclosure, unsafe runtime-ref interfaces, localization, responsive/theming drift, test coverage, and inaccurate PR copy.
+
+Audit health (Impeccable rubric): accessibility 1/4, performance 2/4, responsive design 2/4, theming 2/4, anti-patterns 3/4; **10/20 (Acceptable, significant work required)**. The UI does not look generically AI-generated; its problem is inconsistent technical behavior beneath an otherwise coherent Mantine vocabulary.
+
+## Reviewed revision and environment
+
+| Item | Value |
+| --- | --- |
+| PR | #6502, `feat: modernize dashboard widgets` |
+| Reviewed head | `96e92485a5fd45f3648cfac0453e614779c414ba` |
+| Base branch / fetched base | `dev` / `d58a47b776a55d04dee2220f59d072b9af8bbed3` |
+| Merge base | `d58a47b776a55d04dee2220f59d072b9af8bbed3` |
+| Diff | 359 files, +15,721/-4,478 |
+| PR state | open, non-draft, `BLOCKED`; no approval decision |
+| Hosted checks at audit start | Fast gate, Container and E2E, CodeQL, JS/TS analysis, Actions analysis, title, auto-fix: green |
+| Inline threads | 34 total, 7 unresolved; only 2 remain substantively valid |
+| Mantine | repository lock: `@mantine/core`, hooks, charts and dates 9.4.1 |
+| Local tools | Node 24.16.0 and pnpm 9.5.0; repository requires Node >=24.18.0 and pnpm >=11.15.1 |
+
+The former red baseline `7b7045202d289b7d83946befcee5d2845ea4a706` had a green Fast gate and a failed Container/E2E run (`30748255760`, job `91498308523`). The latest head has a green Container/E2E job (`30756067198`, job `91519039504`). This proves the current suite passed once; it does not satisfy the requested three-run flake characterization.
+
+## PR-description traceability
+
+| Claim | Result | Evidence / correction |
+| --- | --- | --- |
+| “all 54 widget renderers with compact and advanced modes” | **Inaccurate** | 54 `WidgetKind` values exist. `displayMode="advanced"` reaches 53; `app` is deliberately excluded in `item-content.tsx:51` and documented as compact-only. Change copy to “53 widget renderers; app tiles remain compact,” or implement app advanced mode. |
+| advanced focus: hover, keyboard, touch, geometry | **Partial** | Entry paths, Escape ownership, reduced motion, close focus, touch button and zero-dimension guards exist. WID-002/003 remain. |
+| richer widget context actions | **Partial** | `Menu.ContextMenu` is a good Mantine choice and query scope is item-aware. Dispatch still crosses `any`; Custom API action authorization is not represented. |
+| standardized query identity/cache/status | **Partial** | Query keys, matchers, runtime capture, recovery and tests exist. Thirty-nine of 53 renderer query calls do not read errors; runtime ref registration is render-time mutable state. |
+| safe polling | **Mostly confirmed** | defaults are limited to `widget` namespace; Custom API resume immediately refetches; per-widget intervals exist. State/ref typing still needs redesign. |
+| partial-failure rendering | **Partial** | settlement helper and several routers are strong; many renderer-level total failures still appear empty/disconnected. |
+| bounded integration responses | **Mostly confirmed** | common bounded reader, Custom API 2 MiB, timetable 512 KiB, Traefik bounds and Beszel queue bounds exist. Custom action execution remains outside the hardened fetch path. |
+| timetable hardening | **Confirmed** | board/item permission checks, saved-value comparison, public-address resolution, private ranges, per-request DNS re-resolution, pinned dispatcher, redirect rejection, timeouts, response bounds and schemas are present. |
+| precise placement | **Mostly confirmed** | mouse, touch tolerance, keyboard, occupied-cell validation, dynamic bounds, nearest fit and immediate persistence exist. Failure/race/live responsive coverage remains insufficient. |
+| widget catalog documentation | **Partial** | all kinds have pages and shared interactions; wording overclaims focus behavior and validation counts are stale. |
+| validation: 40 files/162 tests, 6/6 E2E | **Stale** | current diff contains 57 changed unit-spec files (including three E2E specs); repository has 42 widget spec files and six E2E specs. Update from the exact final run. |
+| independent reviews “pass” | **Not supported** | unresolved valid findings, current P1s, and unavailable live QA contradict an unqualified pass. |
+
+## Mantine suitability ledger
+
+Legend: **U** already used appropriately; **C** consolidation/replacement candidate; **R** relevant but current implementation can stay; **N** not relevant to widget runtime; **D** dependency/version addition. Exact 9.4.1 package archives were inspected in `/tmp`; live docs/Context7 include 9.5.0.
+
+### Core catalog
+
+- **U:** ActionIcon, Alert, Anchor, Avatar, Badge, Box, Button, Card, Center, Code, Divider, Flex, Grid, Group, Image, Loader, Menu (`Menu.ContextMenu`), Overlay, Paper, Popover, Portal, Progress, RingProgress, ScrollArea, SimpleGrid, Skeleton, Stack, Table, Tabs, Text, ThemeIcon, Title, Tooltip, UnstyledButton.
+- **C:** Accordion (dense integration sections), DataList (semantic label/value stats), EmptyState (replace bespoke empty state), FocusTrap and Modal compound API (WID-002), LoadingOverlay (background refetch without deleting content), NumberFormatter, OverflowList/Scroller (responsive action and chip rows), Table.ScrollContainer, Timeline (activity/feed histories), VisuallyHidden and Kbd, CloseButton, Dialog/HoverCard/Notification where persistent errors/actions need semantics.
+- **R:** Affix, AppShell, AspectRatio, BackgroundImage, Breadcrumbs, Burger, Checkbox, Chip, Collapse, ColorInput/ColorPicker/ColorSwatch/AlphaSlider/AngleSlider/HueSlider, Combobox/ComboboxPopover, Container, CopyButton, Drawer, Fieldset, FileButton/FileInput, FloatingIndicator/FloatingWindow, Highlight, Indicator, Input/JsonInput, List, Mark, Marquee, MaskInput, Menubar, MultiSelect/NativeSelect/NumberInput/PasswordInput/PillsInput/PinInput/Radio/RangeSlider/Rating/SegmentedControl/Select/Slider/Switch/TagsInput/Textarea/TextInput, Pagination, Pill, SemiCircleProgress, Space, Splitter, Spoiler, Stepper, Transition, Tree/TreeSelect, Typography. Use only where an existing widget requirement matches; do not churn working layouts.
+- **N:** Alpha/color/angle primitives outside configuration forms, AppShell/navigation primitives, TableOfContents, CorePackage documentation.
+- **D (9.5, not 9.4.1):** Cascader. **RollingNumber and Splitter are present in 9.4.1.**
+
+### Hooks catalog
+
+- **C:** `useFocusReturn`, `useFocusTrap`, `useReducedMotion`, `useRovingIndex`, `useLongPress`, `useScroller`, `useElementSize`, `useViewportSize`, `useHotkeys`, `useMediaQuery`, `useResizeObserver`.
+- **U/R:** focus-within, hover, disclosure, click-outside, merged-ref, interval/timeout, local-storage, event/window listeners, throttled/debounced values and list/set/map/state helpers are available in 9.4.1 and should replace local mechanics only when behavior and tests improve.
+- **N:** document title/favicon/hash/headroom/page-leave/OS/eye-dropper/fullscreen/network/orientation and other page-level utilities have no direct widget-remediation need. Every hook listed under `## Hooks` in `MANTINE.md` is covered by this rule; no hook requires 9.5 for the recommendations above.
+
+### Form, dates, charts, schedule, extensions, theme and styles
+
+- **Form:** existing `@homarr/form` should remain the abstraction over all cataloged form APIs. No widget-runtime replacement; use current validation/status APIs for widget editors (**R**).
+- **Dates:** all catalog entries are in installed 9.4.1 dates. `Calendar`, `MiniCalendar`, and `TimeValue` are candidates; other picker/input entries are editor-only (**R**). Importing dates directly into `@homarr/widgets` requires adding that workspace dependency (**D**).
+- **Charts:** 9.4.1 exports Area, Bar, BarsList, Bubble, Composite, Donut, Funnel, Heatmap, Line, Pie, Radar, RadialBar, Sankey, Scatter, Sparkline and Treemap (**C/R**). Prefer Sparkline for tiny trends, BarsList for ranked values, Heatmap for calendar/activity density, Composite for mixed analytics. **BulletChart and SunburstChart are 9.5-only (D)**. Replacement requires accessibility and bundle comparison, not blanket Recharts removal.
+- **Schedule:** all `AgendaView`, day/week/month/year/resource views and Schedule pages require new `@mantine/schedule` dependency (**D**). AgendaView is the only plausible calendar-widget candidate; its weight and semantics must beat the existing grouped list before adoption.
+- **Guides/FAQ/Other:** server components, portal testing, scroll lock, accessibility, nested popovers, zoom, responsive styling and version changelogs are relevant references (**R**); framework/setup/contribution/old migration entries are **N**. The 9.5 changelog is informational only.
+- **Theming/styles:** Colors, ColorSchemes, DefaultProps, MantineProvider, ThemeObject, CSS variables, data attributes, CSS Modules, responsive/RTL/style props/Styles API/performance are **U/R**. WID-009 requires shared layer/color tokens. Emotion, Sass, Vanilla Extract and unrelated global setup are **N**.
+- **Extensions:** existing modals, notifications, spotlight and rich-text abstractions are **U**; Carousel could consolidate Immich only after behavior parity; Dropzone/CodeHighlight/NProgress are **N** for this audit.
+
+## Complete 54-widget coverage matrix
+
+“Test” means a focused widget-local spec exists, not that all required states are covered. Every row still requires the common contract suite in WID-013.
+
+| WidgetKind | Family | Advanced | Focused test | Principal audit gap |
+| --- | --- | --- | --- | --- |
+| clock | basic | yes | no | query error, locale-format options |
+| weather | basic/feed | yes | yes | query error; dayjs locale/time patterns |
+| app | basic/link | **no** | no | PR wording; URL contract |
+| iframe | custom content | yes | yes | manual focus/iframe trapping; URL privacy thread now fixed |
+| video | custom content | yes | no | media/focus/live behavior |
+| notebook | notes | yes (inner) | yes | editor focus inside manual surface |
+| anchorNote | notes | yes | no | query error, save/error regression |
+| dnsHoleSummary | network | yes | no | total query error, hard-coded chart colors |
+| dnsHoleControls | network/security | yes | no | total error and permission matrix |
+| smartHome-entityState | smart home | yes | no | raw state in aria; action permissions |
+| smartHome-executeAutomation | smart home | yes | no | mutation/permission/edit-mode E2E |
+| stockPrice | analytics | yes | yes | total error |
+| mediaServer | media | yes | no | total error and table a11y |
+| calendar | calendar | yes | yes | total error; fixed HH:mm; schedule tradeoff |
+| downloads | media | yes | yes | four-state/component coverage, arbitrary z-index |
+| mediaRequests-requestList | media | yes | no | total error; external URLs/actions |
+| mediaRequests-requestStats | media | yes | no | total error; links/colors |
+| mediaTranscoding | media | yes | yes | total error and responsive table |
+| mediaMissing | media | yes | yes | total error and external URL |
+| minecraftServerStatus | infrastructure | yes | no | total error/malformed payload |
+| networkControllerSummary | networking | yes | no | total error; WAN/unknown localization |
+| networkControllerStatus | networking | yes | no | responsive rule duplication |
+| rssFeed | feed | yes | yes | strong stale/partial state; locale relative time |
+| bookmarks | basic/link | yes | yes | recomputation; URL contract |
+| indexerManager | media | yes | no | total error; runtime action ref |
+| healthMonitoring | infrastructure | yes | yes | integration query error |
+| releases | infrastructure/feed | yes | yes | secret/item authorization needs E2E |
+| mediaReleases | media | yes | no | total error; external URLs |
+| dockerContainers | infrastructure | yes | yes | total error; z-index/table semantics |
+| firewall | networking/security | yes | yes | partial-query matrix; loose router generics |
+| notifications | infrastructure | yes | no | total error; untrusted href |
+| systemResources | infrastructure | yes | yes | total error; previous network thread fixed |
+| coolify | infrastructure | yes | yes | total error; URL validation |
+| systemDisks | infrastructure | yes | yes | total error |
+| timetable | calendar | yes | no | backend strong; component locale/live tests absent |
+| immich-serverStats | media | yes | yes | two ignored query errors |
+| immich-albumCarousel | media | yes | yes (query) | query error and nested overlay/focus E2E |
+| paperlessNgx | analytics | yes | no | former error thread fixed, no regression spec |
+| patchmon | infrastructure | yes | yes | total error |
+| bazarr | media | yes | yes | total error |
+| tracearr | analytics | yes | yes | total error |
+| speedtestTracker | analytics | yes | yes | total error |
+| uptimeKuma | infrastructure | yes | yes | total error |
+| audioStats | media | yes | yes | good dual-error handling; partial-state tests needed |
+| umami | analytics | yes | no | runtime query registration; chart a11y |
+| vpn | networking/security | yes | no | total error; status/permission matrix |
+| archiveTeamWarrior | infrastructure | yes | yes | suspense path; docs present |
+| ups | infrastructure | yes | no | total error |
+| beszelSystemTable | monitoring | yes | yes | nested chart/focus and live subscription |
+| beszelSystemGrid | monitoring | yes | no | live/error UI; no focused renderer test |
+| beszelAlerts | monitoring | yes | no | partial error and status semantics |
+| beszelSystemStats | monitoring | yes | yes | runtime refs, locale tooltip |
+| traefik | networking | yes | no | total error; bounded backend positive |
+| customApi | custom content/security | yes | yes | WID-001/007/008; polling resume fixed |
+
+## Severity-ranked findings
+
+### WID-001 — P1 confirmed, pre-existing: Custom API actions lack resource authorization and hardened fetch policy
+
+- **Location/claim:** `packages/api/src/router/custom-widget/custom-widget-router.ts:57-102,392-451`; “harden Custom API” and action-permission semantics.
+- **Evidence/reproduction:** any authenticated account can call `customWidget.all`, learn every definition ID and URL, then call `customWidget.execute({definitionId})`. The mutation verifies neither board nor item nor an action permission. It decrypts administrator-provided secrets, uses `new URL()` only, and `redirect: "follow"`. The PR hardened `widget.customApi.getData`, but not this sibling execution path.
+- **Impact/rule:** unauthorized side effects against internal services and authenticated redirect chains; broken object-level authorization. A view-only account can invoke administrator-created controls outside any board context.
+- **Correction:** require `{boardId,itemId,definitionId}`; load the item and verify it is `customApi`, belongs to the board, references the definition, and the caller has an explicit execute policy. Until that policy exists, restrict to admin. Share `validateCustomApiUrl`, timeout, redirect rejection, bounded disposal and redacted errors with getData. Compatibility: old direct callers must send item/board context.
+- **Tests:** procedure tests for anonymous, unrelated authenticated, view-only, modifier, admin, mismatched item/definition, disabled definition, redirects, credential URL, timeout and secret non-disclosure; E2E action button across roles.
+
+### WID-002 — P1 confirmed, PR-introduced: manual advanced focus is not an accessible modal
+
+- **Location:** `advanced-focus/context.tsx:194-209`, `items/item-content.tsx:113-189`.
+- **Evidence:** manual mode renders an Overlay plus a `role="region"` Card. There is no FocusTrap, `aria-modal`, background inertness, scroll lock or backdrop dismissal. Only the close button is initially focused; Tab can leave the surface and activate dimmed board controls.
+- **Impact/rule:** keyboard/screen-reader users lose the interaction boundary; WCAG 2.1.2, 2.4.3 and ARIA dialog pattern. Iframes/editors make escape especially likely.
+- **Correction/Mantine:** render manual mode through `Modal.Root` compound parts (or ModalBase), using its portal, FocusTrap, scroll lock, Escape/return-focus and semantic content. Preserve preview mode as non-modal. Configure nested overlays and `removeScrollProps`; keep a 44px `Modal.CloseButton` and explicit title via VisuallyHidden if needed.
+- **Tests:** RTL portal/focus-cycle/return tests; Playwright Tab/Shift+Tab, nested Menu/Select/Popover/editor/iframe, backdrop and every close path; reduced motion and 200% zoom.
+
+### WID-003 — P1 probable, PR-introduced: fixed advanced surface remains under transformed Gridstack ancestry
+
+- **Location:** `advanced-focus.module.css:35-42`; Card remains inside the Gridstack item while only the backdrop is portaled.
+- **Evidence:** CSS fixed descendants establish their containing block at a transformed ancestor. Gridstack uses transforms for positioned items, so viewport-derived `left/top` can be interpreted relative to the item on affected layouts. A Portal wrapper exists only for Overlay.
+- **Impact:** off-screen, clipped or incorrectly scaled focus surface across breakpoints/remounts.
+- **Correction:** portal the focused surface itself (naturally achieved by WID-002) and calculate geometry in the same viewport coordinate system. Do not compensate with transform-specific offsets.
+- **Tests:** real Gridstack at every layout/viewport, scrolled page, header, dynamic section and resize/remount; assert bounding rect within viewport and finite scale.
+
+### WID-004 — P1 confirmed, regression-exposed/systemic: query failures still become valid empty/disconnected UI
+
+- **Location:** 39 of 53 renderer query calls do not read `error`, including bookmarks, weather, calendar, media server, system resources, Coolify, DNS Hole, Tracearr, notifications, Immich, VPN and others listed in the matrix. Query defaults do not set `throwOnError` (`trpc.tsx:69-93`).
+- **Evidence:** TanStack Query returns `data=undefined` on total failure. Components default to `[]`, `null`, or empty branches, so the board ErrorBoundary is never reached. Network Controller and Paperless were fixed, proving the pattern; it was not completed.
+- **Impact:** operators are told “empty” or “disconnected” when monitoring failed, violating the product’s truthful-state requirement.
+- **Correction/Mantine:** introduce a shared `WidgetQueryState` contract distinguishing initial Skeleton, background LoadingOverlay, stale Alert, partial warning, true EmptyState and terminal error. Either explicitly throw only when no usable cached data or render a shared error Alert. Preserve stale data.
+- **Tests:** parameterized contract tests for every queried widget: initial, success-empty, total failure, stale+failure, partial failure, refetch, remount/persisted cache and sibling isolation.
+
+### WID-005 — P1 confirmed, PR-introduced/systemic: integration-provided links bypass a shared URL policy
+
+- **Location:** examples include `media-missing/component.tsx:291`, `notifications/component.tsx:77`, media requests list/stats, Coolify resource/server links, releases, bookmarks and iframe. Only RSS and custom JSX visibly use explicit protocol sanitizers.
+- **Evidence:** dynamic strings are assigned directly to `href`/new-tab controls. Integration APIs and remote feeds are trust boundaries; no renderer-wide `http/https` guard is enforced.
+- **Impact:** unsafe schemes, credential-bearing URLs, internal detail disclosure and inconsistent opener behavior.
+- **Correction:** add one typed application URL helper returning a sanitized URL/undefined, with allowed schemes per use case, credential stripping/rejection, consistent `noopener noreferrer`, and disabled non-link presentation. Validate again server-side for action endpoints.
+- **Tests:** `javascript:`, `data:`, malformed, credential, relative, http/https and missing URLs for each shared link primitive.
+
+### WID-006 — P2 confirmed, PR-introduced: runtime query/action state mutates untyped refs during render
+
+- **Location:** `definition.ts:121-162`; runtime registration calls in media missing/transcoding, audio, calendar, Umami, Beszel and Immich; `widget-context-menu.tsx:157-174`.
+- **Evidence:** `setWidgetRuntimeQueries` mutates a shared object during render; concurrent/aborted renders can publish uncommitted query identity. Action dispatch casts the definition to `Record<string,unknown>` and `any`, then casts its result back.
+- **Correction:** make definition generics preserve kind/options/action types end-to-end; replace stringly opaque ref slots with a typed per-item registration API updated in a committed effect (or use `useSyncExternalStore`). Separate query registration from imperative actions.
+- **Tests:** StrictMode, interrupted/remount, options change and cleanup; compile-time `tsd`/type assertions rejecting wrong action props.
+
+### WID-007 — P2 confirmed, regression-exposed: raw backend errors are exposed to users and assistive text
+
+- **Location:** Custom API UI `component.tsx:561-576`; API `custom-api.ts:79-85`; several partial fallbacks use `error.message`.
+- **Impact:** internal hostnames, request paths and implementation details can appear in tooltips/aria labels and logs.
+- **Correction/Mantine:** return stable error codes plus redacted public messages; keep detailed causes server-side with correlation IDs. Render localized Alert/Notification details, never raw throwable text.
+- **Tests:** errors containing credentials, query strings, private hosts and multiline backend bodies must not reach tRPC payload, DOM, accessibility tree or notifications.
+
+### WID-008 — P2 confirmed, PR-introduced/regression-exposed: locale handling remains incomplete
+
+- **Locations:** Beszel chart/tooltip dayjs formats, calendar event `HH:mm`, downloads `YYYY-MM-DD HH:mm`, timetable `HH:mm:ss`, weather day/month/time formats; `_inputs/widget-location-input.tsx:199` hardcodes `Intl.NumberFormat("en")`.
+- **Also:** `beszel/_shared/disk-usage.tsx:41`, stats loading aria label, Network Controller `WAN`/`unknown` are English/raw accessible strings.
+- **Correction:** centralize app-locale date/time/number/duration/status helpers; load canonical dayjs locale only at the boundary; use localized translation keys for aria/status. NumberFormatter is suitable for simple display but application helpers should own locale.
+- **Tests:** at least `en-US`, `fr-FR`, `de-DE`, RTL locale, 12/24-hour preference and long translations, including accessibility names.
+
+### WID-009 — P2 confirmed: layer and color tokens are inconsistent
+
+- **Locations:** downloads z-index 1000 and rgba row colors; item title z-index 4; item menu/dynamic menu 10; media server white rgba; Indexer Manager hex colors; DNS Hole rgba palette; Umami hex tick colors.
+- **Correction:** define shared semantic layer tokens relative to Mantine CSS z-index variables and semantic status/chart tokens respecting light/dark/forced colors. Do not replace intentional service branding.
+- **Tests:** light/dark/forced-colors with nested overlays and tooltip ordering.
+
+### WID-010 — P2 confirmed: responsive decisions are duplicated and under-tested
+
+- **Location:** Network Controller Status `component.tsx:44,59-78` (open valid thread); Bookmark `component.tsx:94` recomputation (valid but low-impact thread); similar width/height literals across renderers.
+- **Correction:** small typed breakpoint lookup helpers per family, memoized only for genuinely expensive layout. Prefer container-query Grid/SimpleGrid where structural. Do not cargo-cult `useMemo` for a cheap pure calculation; benchmark Bookmark before accepting the review suggestion.
+- **Tests:** boundary tables for minimum/typical/wide/short/advanced sizes and 200% zoom.
+
+### WID-011 — P2 confirmed: PR/docs overstate behavior and validation
+
+- **Location:** PR body, board/getting-started copy “advanced preview in place,” validation numbers, and unqualified review pass.
+- **Correction:** state 53 advanced renderers plus compact-only app; call manual focus an overlay only after WID-002/003; publish exact final-SHA check/test counts and disclose unsupported/live-untested states.
+
+### WID-012 — P2 confirmed: focused automated coverage is far below the 54-widget/data-state claim
+
+- **Evidence:** 42 widget-local spec files are helper-heavy; 20+ renderers have no focused spec. Six E2E files exist, but only board interactions and Custom JSX directly exercise this modernization. The earlier Custom JSX login wait failed once and current exact-route wait remains.
+- **Correction:** add shared renderer contract harness plus family E2Es. Replace Custom JSX’s exact post-submit URL race with a shared login helper that waits for authenticated session/stable destination, then run it three times in CI.
+
+### WID-013 — P2 confirmed: open review-thread state no longer matches code
+
+| Thread | Classification |
+| --- | --- |
+| iframe complete URL | already fixed/false positive at current line: only host is rendered |
+| system resources network gate | already fixed, outdated |
+| RSS total error | already fixed: no-data error throws; stale data retained |
+| bookmarks memoization | valid P3/P2-low; benchmark first |
+| network-controller total error | already fixed, outdated |
+| network-controller breakpoint consolidation | valid P2 maintainability |
+| Paperless total error | already fixed, outdated |
+
+Resolve the five stale threads with evidence; address or explicitly disposition the two live suggestions. Re-run review because CodeRabbit was paused during active development.
+
+## Systemic remediation roadmap
+
+1. **Security/authorization:** WID-001 and WID-005; add negative-role/protocol tests before merge.
+2. **Interaction accessibility:** replace manual focus with portaled Mantine modal semantics (WID-002/003), then test nested widget content.
+3. **Truthful data state:** build the shared query-state contract and migrate all 39 ambiguous sites; keep valid stale data and partial results.
+4. **Typed interfaces:** replace `widgetStateRef` slot mutation and `any` context dispatch with committed typed registrations.
+5. **Widget families:** media/downloads, infrastructure, networking/security, smart-home, analytics/calendar/feed, then Beszel; apply URL, state, locale, responsive and a11y contracts in that order.
+6. **Design-system cleanup:** semantic layers/colors and restrained Mantine consolidation. Do not add Schedule or upgrade to 9.5 without a separate dependency/bundle decision.
+7. **Docs/PR:** correct renderer count, behavior and exact validation evidence.
+8. **Final proof:** frozen install on supported Node/pnpm; format, lint, full typecheck, affected and full unit tests, production and docs builds; Custom JSX three times; complete production-container E2E; desktop/tablet/mobile keyboard/touch/light/dark/reduced-motion/zoom/a11y-tree QA. Push nothing until all refer to one unchanged SHA; close every review thread and obtain required approval.
+
+## Positive findings
+
+- Timetable is the strongest security work in the PR: saved resource authorization, private-range rejection, DNS rebinding resistance through pinned lookup, redirect rejection, bounds and schemas are coherently tested.
+- Bounded response helpers, Beszel bounded queue/cancellation, and partial-integration settlement materially reduce failure blast radius.
+- RSS preserves stale data and distinguishes partial feed failure; Network Controller and Paperless now correctly escalate total failures.
+- Item-scoped query matchers and tests address sibling-widget refresh isolation; global polling defaults are restricted to the widget namespace.
+- Touch long-press has movement tolerance; focus scale guards prevent Infinity/NaN; reduced-motion and remount cleanup are present.
+- Existing Homarr theme, Mantine components and shared UI vocabulary are generally preserved. Most proposed Mantine work is consolidation, not redesign.
+
+## Validation evidence and uncertainty
+
+- `MANTINE.md` was fetched from `https://mantine.dev/llms.txt` and passed byte-for-byte `cmp`; `llms-full.txt` stayed in `/tmp`.
+- Context7 current Mantine docs were queried for overlay/focus, responsive/data-state/accessibility, charts and Schedule. Static 9.4.1 archives verified exact exports; Cascader, BulletChart and SunburstChart are 9.5-only.
+- Local frozen install could not start because host Node/pnpm are below repository engine requirements. No dependencies, source files or machine toolchain were changed.
+- Docker API access is denied, so production-container E2E could not be rerun locally. Hosted exact-head Fast gate and Container/E2E are green.
+- `agent-browser` is not installed. Temporary `npx` execution was rejected by the environment’s security reviewer, so live exploratory QA/a11y-tree inspection was not performed.
+- External integrations were not available; malformed/partial/permission combinations are static-analysis conclusions unless a focused test already exists.
+- This review intentionally changes no production code and makes no commit, push, thread resolution or PR edit.
+
+Finalization must re-query the PR head/checks/threads. If the head differs from the reviewed SHA, this report is a snapshot and the delta requires review before merge.
+
+**Final refresh (2026-08-03):** head remained `96e92485a5fd45f3648cfac0453e614779c414ba`; all reported hosted checks remained successful; merge state remained `BLOCKED` with no approval decision; unresolved threads remained 7 of 34. The branch did not change during the audit.
diff --git a/apps/docs/.vscode/settings.json b/apps/docs/.vscode/settings.json
index c5a1b2892..2eef88bf3 100644
--- a/apps/docs/.vscode/settings.json
+++ b/apps/docs/.vscode/settings.json
@@ -1,10 +1,3 @@
 {
-    "cSpell.words": [
-        "Homarr",
-        "Lidarr",
-        "Nextcloud",
-        "Radarr",
-        "Readarr",
-        "Sonarr"
-    ]
-}
\ No newline at end of file
+  "cSpell.words": ["Homarr", "Lidarr", "Nextcloud", "Radarr", "Readarr", "Sonarr"]
+}
diff --git a/apps/docs/README.md b/apps/docs/README.md
index b66530488..ede750aa7 100644
--- a/apps/docs/README.md
+++ b/apps/docs/README.md
@@ -21,8 +21,14 @@ pnpm dev:docs
 
 # Or from within this directory
 pnpm dev
+
+# Point the docs at a local PocketBase instance
+WORKSHOP_API_URL=http://127.0.0.1:8090 pnpm dev:docs
 ```
 
+The standalone docs use `WORKSHOP_API_URL` for PocketBase and `HOMARR_WEBSITE_URL` for the public site origin. The old
+`WORKSHOP_URL` name is a deprecated one-release alias.
+
 ## Build
 
 ```bash
@@ -40,7 +46,7 @@ Uses oxlint and oxfmt (same as the rest of the monorepo):
 ```bash
 pnpm lint        # oxlint
 pnpm format      # oxfmt (check)
-pnpm format -- --write  # oxfmt (fix)
+pnpm format:fix    # oxfmt (fix)
 ```
 
 ## Typecheck
@@ -71,7 +77,7 @@ Each integration/widget doc follows a consistent pattern:
 The docs app has `@homarr/definitions` as a workspace dependency. You can import integration kinds, widget kinds, and other definitions directly:
 
 ```typescript
-import { IntegrationKind } from '@homarr/definitions';
+import { IntegrationKind } from "@homarr/definitions";
 ```
 
 This enables type-safe references to homarr domain concepts within documentation code.
@@ -90,15 +96,15 @@ pnpm verify:search
 
 ## Tech Stack
 
-| Layer | Technology |
-|---|---|
+| Layer          | Technology                                  |
+| -------------- | ------------------------------------------- |
 | Site generator | Docusaurus 3 (`@docusaurus/preset-classic`) |
-| Styling | Tailwind CSS 3 + Docusaurus Infima |
-| Icons | `@tabler/icons-react` |
-| Diagrams | Mermaid (`@docusaurus/theme-mermaid`) |
-| Search | Algolia DocSearch |
-| Analytics | PostHog |
-| Charts | @nivo/line |
+| Styling        | Tailwind CSS 4 + Docusaurus Infima          |
+| Icons          | `@tabler/icons-react`                       |
+| Diagrams       | Mermaid (`@docusaurus/theme-mermaid`)       |
+| Search         | Algolia DocSearch                           |
+| Analytics      | PostHog                                     |
+| Charts         | @nivo/line                                  |
 
 ## Contributing
 
diff --git a/apps/docs/components.json b/apps/docs/components.json
new file mode 100644
index 000000000..15e244db4
--- /dev/null
+++ b/apps/docs/components.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/css/custom.css",
+    "baseColor": "mist",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "tabler",
+  "rtl": false,
+  "menuColor": "default",
+  "menuAccent": "subtle"
+}
diff --git a/apps/docs/docs/advanced/command-line/_category_.json b/apps/docs/docs/advanced/command-line/_category_.json
index f3ee30aa5..4b4aec4c3 100644
--- a/apps/docs/docs/advanced/command-line/_category_.json
+++ b/apps/docs/docs/advanced/command-line/_category_.json
@@ -1,4 +1,4 @@
 {
   "collapsed": true,
   "label": "Command line interface"
-}
\ No newline at end of file
+}
diff --git a/apps/docs/docs/advanced/command-line/fix-usernames/index.mdx b/apps/docs/docs/advanced/command-line/fix-usernames/index.mdx
index d3b9f50cc..bf8808118 100644
--- a/apps/docs/docs/advanced/command-line/fix-usernames/index.mdx
+++ b/apps/docs/docs/advanced/command-line/fix-usernames/index.mdx
@@ -14,4 +14,4 @@ homarr fix-usernames
 
 This will convert all credential usernames to lowercase and update the database accordingly.
 
-![](./img/screenshot-cli.png)
\ No newline at end of file
+![](./img/screenshot-cli.png)
diff --git a/apps/docs/docs/advanced/command-line/index.mdx b/apps/docs/docs/advanced/command-line/index.mdx
index 0e3e802f7..287985739 100644
--- a/apps/docs/docs/advanced/command-line/index.mdx
+++ b/apps/docs/docs/advanced/command-line/index.mdx
@@ -1,7 +1,7 @@
 # Command line interface
 
 The Homarr image ships with a built-in recovery tool. This can be useful, if you do not have access to Homarr or if something is not working.
-Please note that the CLI is an *emergency tool*, not an API tool.
+Please note that the CLI is an _emergency tool_, not an API tool.
 
 :::caution
 
@@ -12,10 +12,10 @@ You should also create a backup of the database, in case you break something.
 
 ## Execute CLI with Docker
 
-1. Execute ``docker ps | grep homarr`` on the root system with Docker to find the container ID of your Homarr container.
-2. Run ``docker exec -it <container-id> /bin/bash homarr <your-command-goes-here>``. \
-Replace ``<container-id>`` with your container ID from step 1. \
-Replace ``<your-command-goes-here>`` with the command you want to execute (see sub-pages).
+1. Execute `docker ps | grep homarr` on the root system with Docker to find the container ID of your Homarr container.
+2. Run `docker exec -it <container-id> /bin/bash homarr <your-command-goes-here>`. \
+   Replace `<container-id>` with your container ID from step 1. \
+   Replace `<your-command-goes-here>` with the command you want to execute (see sub-pages).
 
 ## Execute CLI with QNAP
 
diff --git a/apps/docs/docs/advanced/command-line/integrations/index.mdx b/apps/docs/docs/advanced/command-line/integrations/index.mdx
index dfdb587b0..b958e9d2b 100644
--- a/apps/docs/docs/advanced/command-line/integrations/index.mdx
+++ b/apps/docs/docs/advanced/command-line/integrations/index.mdx
@@ -7,6 +7,7 @@ This guide requires that you understand [how to access the CLI](../).
 :::
 
 Using these commands, you can manage the integrations from the CLI:
+
 ```bash
 Group of commands to manage integrations
 
@@ -43,7 +44,7 @@ Flags:
 ## Delete Integration
 
 - Requires a database connection
-- Requires one parameter: ``id`` or ``name``
+- Requires one parameter: `id` or `name`
 - Deletes an integration permanently from the database
 
 ```bash
@@ -57,4 +58,4 @@ Flags:
   -n, --name string   Name of the integration
   -h, --help          help for integrations delete
   -v, --version       version for homarr-cli
-```
\ No newline at end of file
+```
diff --git a/apps/docs/docs/advanced/command-line/password-recovery/index.mdx b/apps/docs/docs/advanced/command-line/password-recovery/index.mdx
index e5a80f669..844b44140 100644
--- a/apps/docs/docs/advanced/command-line/password-recovery/index.mdx
+++ b/apps/docs/docs/advanced/command-line/password-recovery/index.mdx
@@ -12,8 +12,8 @@ All sessions for that user will be terminated and the user must re-login.
 
 ![](./img/screenshot-cli.png)
 
-Using the ``--username`` parameter, you can specify who you want to reset the password for.
+Using the `--username` parameter, you can specify who you want to reset the password for.
 Executing the command will create a new random password, update the database and display the new password.
 All sessions for this user will be terminated and they must re-login.
 
-![](./img/screenshot-cli-result.png)
\ No newline at end of file
+![](./img/screenshot-cli-result.png)
diff --git a/apps/docs/docs/advanced/command-line/users/index.mdx b/apps/docs/docs/advanced/command-line/users/index.mdx
index a867fa72d..93170259a 100644
--- a/apps/docs/docs/advanced/command-line/users/index.mdx
+++ b/apps/docs/docs/advanced/command-line/users/index.mdx
@@ -7,6 +7,7 @@ This guide requires that you understand [how to access the CLI](../).
 :::
 
 Using these commands, you can manage the users from the CLI:
+
 ```bash
 Group of commands to manage users
 
@@ -42,7 +43,7 @@ yj52ek5cyb6du4bp4osbkjry        admin           xxxx@example.com
 ## Delete User
 
 - Requires a database connection
-- Requires one parameter: ``id`` or ``username``
+- Requires one parameter: `id` or `username`
 
 ```bash
 Delete a user by id or username
@@ -76,4 +77,4 @@ Flags:
   -p, --password          New password
   -h, --help              help for users update-password
   -v, --version           version for homarr-cli
-```
\ No newline at end of file
+```
diff --git a/apps/docs/docs/advanced/development/_category_.json b/apps/docs/docs/advanced/development/_category_.json
index 9f659a536..bf0464672 100644
--- a/apps/docs/docs/advanced/development/_category_.json
+++ b/apps/docs/docs/advanced/development/_category_.json
@@ -1,9 +1,8 @@
 {
-    "label": "Developer guides",
-    "position": 6,
-    "collapsed": true,
-    "link": {
-      "type": "generated-index"
-    }
+  "label": "Developer guides",
+  "position": 6,
+  "collapsed": true,
+  "link": {
+    "type": "generated-index"
   }
-  
\ No newline at end of file
+}
diff --git a/apps/docs/docs/advanced/development/getting-started.mdx b/apps/docs/docs/advanced/development/getting-started.mdx
index e8f68ea6d..de119072c 100644
--- a/apps/docs/docs/advanced/development/getting-started.mdx
+++ b/apps/docs/docs/advanced/development/getting-started.mdx
@@ -8,70 +8,121 @@ tags:
 sidebar_position: 1
 ---
 
-## Setting up your development environment
-
-This guide will help you set up your development environment to start contributing to homarr.
+## Set up your development environment
 
 ### Prerequisites
 
-- **Node.js (lts)**: You can download it from the [official website](https://nodejs.org/).
-- **pnpm (latest)**: You can install it by running `npm install -g pnpm`.
+- **Node.js 24.18 or newer**: You can download it from the [official website](https://nodejs.org/).
+- **Corepack**: Run `corepack enable` so the repository selects its pinned pnpm 11 version.
 - **Git**: You can download it from the [official website](https://git-scm.com/).
 - **Docker or Docker Desktop**: Required for the Redis service and the developer Docker CLI.
 - **Go 1.25+**: Required only for the developer Docker CLI. You can download it from the [official website](https://go.dev/).
 - **GitHub CLI**: Required only for pull-request image features. Install it from the [official website](https://cli.github.com/), then authenticate with `gh auth login`.
 
-### Setting up the project
+The versions in the root `package.json` are the supported baseline. Let Corepack select the repository version instead
+of installing an unrelated global pnpm:
 
-1. Fork the repository by clicking on the "Fork" button on the top right corner of the repository page.
+```sh
+corepack enable
+corepack install
+pnpm install --frozen-lockfile
+```
 
-![Fork button](./img/fork.png)
+### Run the Homarr application
 
-2. Clone the repository to your local machine with `git clone`. You can find the url to use by clicking on the "Code" button on the top right corner of your forks repository page.
+1. Copy `.env.example` to `.env`.
+2. Set `DB_URL` to an absolute writable SQLite file path.
+3. Keep Redis and the optional local databases running in one terminal.
+4. Apply migrations and start Next.js in another terminal.
 
-![Clone button](./img/clone.png)
+```sh
+cp .env.example .env
+```
 
-3. Change directory to the project folder with `cd homarr`.
+Terminal 1:
 
-4. Install the dependencies with `pnpm install`.
+```sh
+pnpm docker:dev
+```
 
-5. Create `.env` from `.env.example`. In a POSIX shell, run `cp .env.example .env`; in PowerShell, run `Copy-Item .env.example .env`. Set `DB_URL` to an absolute path for your SQLite file.
+Terminal 2:
 
-6. Start Redis in the background with `pnpm docker:dev:up` if your development workflow needs it.
+```sh
+pnpm db:migration:sqlite:run
+pnpm dev
+```
 
-7. Create or update the database with `pnpm db:migration:sqlite:run`. This also seeds the default data. To run the seed explicitly later, use `pnpm db:seed`.
+The infrastructure command remains in the foreground. Open `http://127.0.0.1:3000`; the first user created through
+Homarr becomes the instance administrator.
+Use `pnpm docker:dev:up` instead when you only need Redis in the background. Running the migration also seeds the
+default data; use `pnpm db:seed` to seed it explicitly later.
 
-8. Start the development server with `pnpm dev` and wait for a message that says `✓ Ready in 10.7s`
+### Run PocketBase and documentation
 
-9. Open your browser and navigate to [http://localhost:3000](http://localhost:3000). (Loading the page might take up to 2 minutes the first time)
+Start PocketBase in another terminal:
 
-### Useful npm scripts
+```sh
+cp apps/workshop/.env.example apps/workshop/.env
+docker compose --env-file apps/workshop/.env -f apps/workshop/docker-compose.yml up --build workshop
+```
 
-#### During development
+Then start Docusaurus in a third terminal:
 
-- `pnpm dev`: Start the development server.
-- `pnpm dev:cli -- dev`: Browse and run local images and remote pull-request images.
-- `pnpm dev:cli -- build <name>`: Build the current checkout as `homarr:<name>`.
-- `pnpm dev:cli -- build --pr <number>`: Build a pull request locally from a temporary checkout.
-- `pnpm dev:cli -- rebuild <name>`: Rebuild a local image from its recorded checkout or pull request.
-- `pnpm dev:cli:install`: Optionally install the developer CLI as a `homarr` binary.
-- `pnpm cli`: Run cli commands.
-- `pnpm db:migration:sqlite:run`: Run the migrations to create or update the sqlite db file.
-- `pnpm db:seed`: Explicitly seed the default database data.
-- `pnpm docker:dev:up`: Start the Redis development service in the background.
-- `pnpm db:migration:sqlite:generate`: Generate a new migration file for the sqlite db. Also works with `mysql`.
-- `pnpm db:studio`: Open a visual studio for the database.
-- `pnpm package:new`: Create a new package in the monorepo.
+```sh
+WORKSHOP_API_URL=http://127.0.0.1:8090 pnpm dev:docs
+```
 
-#### Checking code quality
+PocketBase runs on port 8090 and Docusaurus on port 3003. Stopping the services preserves the PocketBase volume.
 
-- `pnpm lint`: Run the linter to check for code quality issues.
-- `pnpm format:fix`: Run the formatter to fix code style issues.
-- `pnpm test`: Run the tests. You can also use `pnpm test:ui` to get a UI for the tests.
-- `pnpm typecheck`: Run the typescript type checker.
+Open `http://127.0.0.1:8090/_/` and create the first PocketBase superuser. The Workshop UI is available at
+`http://127.0.0.1:3003/workshop`.
 
-#### Building the project
+Point Homarr at the local services with:
 
-- `pnpm build`: Build the project for production.
-- `pnpm dev:cli -- build <name>`: Build a `homarr:<name>` image and record its checkout for later rebuilds.
-- `docker run -p 7575:7575 -e SECRET_ENCRYPTION_KEY='your_64_character_hex_string' homarr:<name>`: Run the created docker image.
+```dotenv
+HOMARR_WEBSITE_URL=http://127.0.0.1:3003
+WORKSHOP_API_URL=http://127.0.0.1:8090
+WORKSHOP_WEB_URL=http://127.0.0.1:3003/workshop
+```
+
+Restart `pnpm dev` after changing `.env`. GitHub OAuth is optional locally. See
+[`apps/workshop/README.md`](https://github.com/homarr-labs/homarr/blob/HEAD/apps/workshop/README.md) for OAuth,
+Workshop moderator promotion, logs, tests, backup, restore, stopping, and intentional volume reset.
+
+### URL testing
+
+Docusaurus reads `HOMARR_WEBSITE_URL` and `WORKSHOP_API_URL` when it starts or builds. Homarr also reads
+`WORKSHOP_WEB_URL` when its server starts, so these values do not rely on `NEXT_PUBLIC_*` build variables. Test a
+separate API origin before release:
+
+```sh
+HOMARR_WEBSITE_URL=http://127.0.0.1:3003 \
+WORKSHOP_API_URL=http://127.0.0.1:8090 \
+WORKSHOP_WEB_URL=http://127.0.0.1:3003/workshop \
+pnpm dev:docs
+```
+
+### Useful commands
+
+- `pnpm dev` — Next.js on port 3000.
+- `pnpm dev:benchmark` — authenticated-board benchmark; readiness-only `--smoke` runs are not performance claims.
+- `pnpm dev:cli -- dev` — browse and run local images and remote pull-request images.
+- `pnpm dev:cli -- build <name>` — build the current checkout as `homarr:<name>`.
+- `pnpm dev:cli -- build --pr <number>` — build a pull request from a temporary checkout.
+- `pnpm dev:cli -- rebuild <name>` — rebuild an image from its recorded checkout or pull request.
+- `pnpm dev:cli:install` — optionally install the developer CLI as a `homarr` binary.
+- `pnpm dev:docs` — Docusaurus only on port 3003.
+- `pnpm docker:workshop` — local PocketBase through Docker Compose.
+- `pnpm docker:dev:up` — Redis development service in the background.
+- `pnpm cli` — Homarr operations CLI.
+- `pnpm db:migration:sqlite:run` — create or update a SQLite database.
+- `pnpm db:seed` — seed the default database data explicitly.
+- `pnpm db:studio` — inspect the database.
+- `pnpm format` / `pnpm format:fix` — check or apply oxfmt.
+- `pnpm lint` / `pnpm lint:fix` — check or apply oxlint.
+- `pnpm typecheck` — typecheck all workspaces.
+- `pnpm test` — unit and contract suites.
+- `pnpm test:workshop` — disposable Workshop integration suite.
+- `pnpm build` — production monorepo build.
+- `docker build -t homarr .` — build a production Docker image.
+- `docker run -p 7575:7575 -e SECRET_ENCRYPTION_KEY='your_64_character_hex_string' homarr:<name>` — run it.
diff --git a/apps/docs/docs/advanced/development/kubernetes.mdx b/apps/docs/docs/advanced/development/kubernetes.mdx
index e27b3ccbc..ff58b6c0a 100644
--- a/apps/docs/docs/advanced/development/kubernetes.mdx
+++ b/apps/docs/docs/advanced/development/kubernetes.mdx
@@ -132,4 +132,4 @@ This command should return CPU and memory usage statistics for each node.
 
 ## Conclusion
 
-You have successfully set up a multi-node Kubernetes cluster using kind and installed the Metrics Server for monitoring resource usage. This setup is useful for local development and testing Kubernetes workloads before deploying them to a production environment.
\ No newline at end of file
+You have successfully set up a multi-node Kubernetes cluster using kind and installed the Metrics Server for monitoring resource usage. This setup is useful for local development and testing Kubernetes workloads before deploying them to a production environment.
diff --git a/apps/docs/docs/advanced/environment-variables/index.mdx b/apps/docs/docs/advanced/environment-variables/index.mdx
index ad249e734..9caa898a5 100644
--- a/apps/docs/docs/advanced/environment-variables/index.mdx
+++ b/apps/docs/docs/advanced/environment-variables/index.mdx
@@ -25,15 +25,17 @@ This is especially useful for [docker secrets](https://docs.docker.com/engine/sw
 Using the `PUID` and `PGID` will require you to set the correct permissions on the mounted volumes and if used the docker socket. See more in the [Running as a different user](/docs/advanced/running-as-different-user) documentation.
 :::
 
-| Environment Variable     | Description | Possible values | Default |
-| ------------------------ | ----------- | --------------- | ------- |
-| ``PUID``                 | User ID to run the container as | Any valid user ID | ``0`` |
-| ``PGID``                 | Group ID to run the container as | Any valid group ID | ``0`` |
-| ``LOG_LEVEL``           | Log level to use | ``debug`` / ``info`` / ``warn`` / ``error`` | ``info`` |
-| ``NO_EXTERNAL_CONNECTION`` | Disables some requests that need internet connection | `true` or `false` | `false` |
-| ``ENABLE_DNS_CACHING`` | Enables dns caching. Enabled by default, but if you experience issues with IPv6 or static IPs, see [#4006](https://github.com/homarr-labs/homarr/issues/4006) or disable this flag | `true` or `false` | `true` |
-
-
+| Environment Variable     | Description                                                                                                                                                                                                                            | Possible values                     | Default                       |
+| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------------------------- |
+| `PUID`                   | User ID to run the container as                                                                                                                                                                                                        | Any valid user ID                   | `0`                           |
+| `PGID`                   | Group ID to run the container as                                                                                                                                                                                                       | Any valid group ID                  | `0`                           |
+| `LOG_LEVEL`              | Log level to use                                                                                                                                                                                                                       | `debug` / `info` / `warn` / `error` | `info`                        |
+| `NO_EXTERNAL_CONNECTION` | Disables Homarr's internet-backed requests, including update checks, weather, and RSS feeds                                                                                                                                            | `true` or `false`                   | `false`                       |
+| `ENABLE_DNS_CACHING`     | Enables dns caching. Enabled by default, but if you experience issues with IPv6 or static IPs, see [#4006](https://github.com/homarr-labs/homarr/issues/4006) or disable this flag                                                     | `true` or `false`                   | `true`                        |
+| `HOMARR_DISABLE_IPV6`    | Disables the IPv6 listener of the internal nginx proxy, even when the host supports IPv6. IPv6 is normally disabled automatically when the host has no IPv6 configured. See [#4596](https://github.com/homarr-labs/homarr/issues/4596) | `true` or `false`                   | `false`                       |
+| `HOMARR_WEBSITE_URL`     | Main Homarr documentation/site base used by runtime links. Must be an absolute HTTP(S) URL.                                                                                                                                            | HTTP(S) URL                         | `https://homarr.dev`          |
+| `WORKSHOP_API_URL`       | PocketBase API used by Homarr and standalone documentation.                                                                                                                                                                            | HTTP(S) URL                         | `HOMARR_WEBSITE_URL`          |
+| `WORKSHOP_WEB_URL`       | Public Workshop page opened from Homarr.                                                                                                                                                                                               | HTTP(S) URL                         | `HOMARR_WEBSITE_URL/workshop` |
 
 ## Authentication
 
@@ -43,9 +45,9 @@ See [Single Sign-On](/docs/advanced/single-sign-on) for more informations.
 
 The `SECRET_ENCRYPTION_KEY` is required. If none is specified before starting the container, a random key will be shown in the error message and the container will exit.
 
-| Environment Variable     | Description | Possible values | Default |
-| ------------------------ | ----------- | --------------- | ------- |
-| ``SECRET_ENCRYPTION_KEY``  | Secret used to encrypt secrets in database. | 64 character hex string | - |
+| Environment Variable    | Description                                 | Possible values         | Default |
+| ----------------------- | ------------------------------------------- | ----------------------- | ------- |
+| `SECRET_ENCRYPTION_KEY` | Secret used to encrypt secrets in database. | 64 character hex string | -       |
 
 :::info
 A random secret can be generated by using the following command: `openssl rand -hex 32`
@@ -53,27 +55,27 @@ A random secret can be generated by using the following command: `openssl rand -
 
 ## Docker
 
-| Environment Variable     | Description | Possible values | Default |
-| ------------------------ | ----------- | --------------- | ------- |
-| ``DOCKER_HOSTNAMES``          | Comma-separated list of hostnames to connect to | For example `localhost,docker.example.com` | - |
-| ``DOCKER_PORTS``             | Comma-separated list of ports to connect to | For example `2375,2376` | - |
-| ``DOCKER_SOCKET_PATHS``             | Comma-separated list of mounted Docker-compatible socket paths. See the [Docker and Podman integration guide](/docs/integrations/docker) | For example `/var/run/docker.sock,/var/run/podman.sock` | - |
+| Environment Variable  | Description                                                                                                                              | Possible values                                         | Default |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- |
+| `DOCKER_HOSTNAMES`    | Comma-separated list of hostnames to connect to                                                                                          | For example `localhost,docker.example.com`              | -       |
+| `DOCKER_PORTS`        | Comma-separated list of ports to connect to                                                                                              | For example `2375,2376`                                 | -       |
+| `DOCKER_SOCKET_PATHS` | Comma-separated list of mounted Docker-compatible socket paths. See the [Docker and Podman integration guide](/docs/integrations/docker) | For example `/var/run/docker.sock,/var/run/podman.sock` | -       |
 
 ## Database
-| Environment Variable     | Description | Possible values | Default |
-| ------------------------ | ----------- | --------------- | ------- |
-| ``DB_DRIVER``            | Database driver to use. Currently `better-sqlite3` is used for sqlite, `mysql2` for mysql and `node-postgres` for postgresql | ``better-sqlite3`` / ``mysql2`` /  ``node-postgres`` | ``better-sqlite3`` |
-| ``DB_DIALECT``           | Database dialect to use. | ``sqlite`` / ``mysql`` / ``postgresql``  | ``sqlite`` |
-| ``DB_URL`` | Database URL to connect to. | Any valid database URL | ``/appdata/db/db.sqlite`` | 
-| ``DB_HOST`` | Database host to connect to. | Any valid database host | - |
-| ``DB_PORT`` | Database port to connect to. | Any valid database port | - |
-| ``DB_NAME`` | Database name to connect to. | Any valid database name | - |
-| ``DB_USER`` | Database user to connect with. | Any valid database user | - |
-| ``DB_PASSWORD`` | Database password to connect with. | Any valid database password | - |
+
+| Environment Variable | Description                                                                                                                  | Possible values                               | Default                 |
+| -------------------- | ---------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------------------- |
+| `DB_DRIVER`          | Database driver to use. Currently `better-sqlite3` is used for sqlite, `mysql2` for mysql and `node-postgres` for postgresql | `better-sqlite3` / `mysql2` / `node-postgres` | `better-sqlite3`        |
+| `DB_DIALECT`         | Database dialect to use.                                                                                                     | `sqlite` / `mysql` / `postgresql`             | `sqlite`                |
+| `DB_URL`             | Database URL to connect to.                                                                                                  | Any valid database URL                        | `/appdata/db/db.sqlite` |
+| `DB_HOST`            | Database host to connect to.                                                                                                 | Any valid database host                       | -                       |
+| `DB_PORT`            | Database port to connect to.                                                                                                 | Any valid database port                       | -                       |
+| `DB_NAME`            | Database name to connect to.                                                                                                 | Any valid database name                       | -                       |
+| `DB_USER`            | Database user to connect with.                                                                                               | Any valid database user                       | -                       |
+| `DB_PASSWORD`        | Database password to connect with.                                                                                           | Any valid database password                   | -                       |
 
 You can either use the url or host, port, name and credentials combined. The URL will be prioritized over the other values.
 
-
 ## Redis
 
 By default Redis is running within the installation. (for example in Docker).
@@ -83,25 +85,23 @@ However for example for K8s it can be useful to use an external Redis instance.
 External redis is currently not supported with Proxmox Community Scripts
 :::
 
-| Environment Variable     | Description | Possible values | Default |
-| ------------------------ | ----------- | --------------- | ------- |
-| `REDIS_IS_EXTERNAL`     | Whether Redis is running externally. | `true` / `false` | `false` |
-| `REDIS_HOST`            | Hostname of the Redis instance. | Any valid hostname | - |
-| `REDIS_PORT`            | Port of the Redis instance. | Any valid port | `6379` |
-| `REDIS_USERNAME`        | Username to connect to the Redis instance. | Any valid username | - |
-| `REDIS_PASSWORD`        | Password to connect to the Redis instance. | Any valid password | - |
-| `REDIS_DATABASE_INDEX`  | Select which database of your redis instance should be used. | Any numeric index | - |
-| `REDIS_TLS_CA`         | CA certificate for Redis TLS connections. If a certificate is specified the connection will use TLS. | Any valid CA certificate | - |
-
+| Environment Variable   | Description                                                                                          | Possible values          | Default |
+| ---------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------ | ------- |
+| `REDIS_IS_EXTERNAL`    | Whether Redis is running externally.                                                                 | `true` / `false`         | `false` |
+| `REDIS_HOST`           | Hostname of the Redis instance.                                                                      | Any valid hostname       | -       |
+| `REDIS_PORT`           | Port of the Redis instance.                                                                          | Any valid port           | `6379`  |
+| `REDIS_USERNAME`       | Username to connect to the Redis instance.                                                           | Any valid username       | -       |
+| `REDIS_PASSWORD`       | Password to connect to the Redis instance.                                                           | Any valid password       | -       |
+| `REDIS_DATABASE_INDEX` | Select which database of your redis instance should be used.                                         | Any numeric index        | -       |
+| `REDIS_TLS_CA`         | CA certificate for Redis TLS connections. If a certificate is specified the connection will use TLS. | Any valid CA certificate | -       |
 
 ## Proxy
 
-| Environment Variable     | Description | Possible values | Default |
-| ------------------------ | ----------- | --------------- | ------- |
-| ``HTTP_PROXY``           | HTTP proxy to use | Any valid HTTP proxy URL | - |
-| ``HTTPS_PROXY``          | HTTPS proxy to use | Any valid HTTPS proxy URL | - |
-| ``NO_PROXY``             | Comma separated list of hosts that should be excluded from proxying | Any valid hostnames | - |
-
+| Environment Variable | Description                                                         | Possible values           | Default |
+| -------------------- | ------------------------------------------------------------------- | ------------------------- | ------- |
+| `HTTP_PROXY`         | HTTP proxy to use                                                   | Any valid HTTP proxy URL  | -       |
+| `HTTPS_PROXY`        | HTTPS proxy to use                                                  | Any valid HTTPS proxy URL | -       |
+| `NO_PROXY`           | Comma separated list of hosts that should be excluded from proxying | Any valid hostnames       | -       |
 
 ## Advanced deployments
 
@@ -109,6 +109,12 @@ External redis is currently not supported with Proxmox Community Scripts
 The advanced deployments environment variables should only be used if you know what you are doing.
 :::
 
-| Environment Variable     | Description |
-| ------------------------ | ----------- |
-| ``DB_MIGRATIONS_DISABLED`` | Disable db migrations. For example for helm charts |
+| Environment Variable     | Description                                                                                                                         |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `DB_MIGRATIONS_DISABLED` | Disable db migrations. For example for helm charts.                                                                                 |
+| `WORKSHOP_PUBLIC_ORIGIN` | Origin used in PocketBase-generated links and email. It must be set explicitly in production.                                       |
+| `PB_ALLOWED_ORIGINS`     | Browser origins accepted by PocketBase. The central public community defaults to `*` so self-hosted Homarr instances can use OAuth. |
+
+All public URL variables reject non-HTTP protocols, embedded credentials, query strings, and fragments, and normalize
+trailing slashes when Homarr or Docusaurus starts. The Docusaurus-only `WORKSHOP_URL` name is accepted as a deprecated alias for
+`WORKSHOP_API_URL` for one release. `WORKSHOP_API_URL` takes precedence.
diff --git a/apps/docs/docs/advanced/icons/index.mdx b/apps/docs/docs/advanced/icons/index.mdx
index b73d49e02..4fd21d95f 100644
--- a/apps/docs/docs/advanced/icons/index.mdx
+++ b/apps/docs/docs/advanced/icons/index.mdx
@@ -9,14 +9,16 @@ tags:
 ---
 
 ## Icon picker
+
 Icons in Homarr are automatically requested from multiple sources:
-  - [Dashboard Icons](https://dashboardicons.com/) - Our recommended source with over 1888+ curated, high-quality icons
-  - [selfh.st icons](https://github.com/selfhst/icons)
-  - [Simple icons](https://github.com/simple-icons/simple-icons)
-  - [Tabler icons](https://tabler-icons.io/)
-  - [Papirus icons](https://github.com/PapirusDevelopmentTeam/papirus-icon-theme)
-  - [Homelab Svg assets](https://github.com/loganmarchione/homelab-svg-assets)
-  - **Local icons**: automatically fetched from the [medias feature](/docs/management/media/)
+
+- [Dashboard Icons](https://dashboardicons.com/) - Our recommended source with over 1888+ curated, high-quality icons
+- [selfh.st icons](https://github.com/selfhst/icons)
+- [Simple icons](https://github.com/simple-icons/simple-icons)
+- [Tabler icons](https://tabler-icons.io/)
+- [Papirus icons](https://github.com/PapirusDevelopmentTeam/papirus-icon-theme)
+- [Homelab Svg assets](https://github.com/loganmarchione/homelab-svg-assets)
+- **Local icons**: automatically fetched from the [medias feature](/docs/management/media/)
 
 Using these icon sources, Homarr provides a total collection of over 11,000 icons at your fingertips.
 The icon picker is a fast searcher that helps you to find your desired icon simply by entering a search term.
@@ -30,5 +32,6 @@ If you can't find the icon you're looking for in Homarr's built-in picker, we st
 Icons that are high quality and printable ([SVG](https://wikipedia.org/wiki/Scalable_Vector_Graphics)) are marked with a red badge "SVG" at the top right.
 
 ### Using external icons
+
 If you don't find the icon you're looking for on Dashboard Icons or wish to use a different source, you can simply enter a URL that points to an icon.
 Direct HTTP(S) image URLs are used as entered instead of being searched in the built-in repositories. It is important that the URL directly points to the file without any advertisements or elements around it.
diff --git a/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx b/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
index 8dfe0f285..bc971bc4a 100644
--- a/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
+++ b/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
@@ -6,16 +6,22 @@ tags:
 
 Homarr has the following keyboard shortcuts:
 
-| Shortcut | Description |
-| -------- | ----------- |
-| `MOD` + `K` | Opens the search bar |
-| `MOD` + `J` | Toggles Dark Mode |
-| `MOD` + `E` | Toggles Edit Mode |
+| Shortcut                                       | Description                                |
+| ---------------------------------------------- | ------------------------------------------ |
+| `MOD` + `K`                                    | Opens the search bar                       |
+| `MOD` + `J`                                    | Toggles Dark Mode                          |
+| `MOD` + `E`                                    | Toggles Edit Mode                          |
+| Hold `Shift` while hovering a supported widget | Opens its temporary advanced view          |
+| `Shift` + `Enter` on a supported widget        | Opens its advanced view until it is closed |
+| `Esc`                                          | Closes an open advanced view or board menu |
 
 :::tip
 
 Here `MOD` refers to the modifier key, which is `Ctrl` on Windows and `Cmd` on macOS.
 
+Advanced view is available outside edit mode. Widgets without a distinct advanced experience adapt to their normal
+dimensions instead.
+
 :::
 
 :::note
diff --git a/apps/docs/docs/advanced/proxy/index.mdx b/apps/docs/docs/advanced/proxy/index.mdx
index ef4e41f1d..fbe33bfa4 100644
--- a/apps/docs/docs/advanced/proxy/index.mdx
+++ b/apps/docs/docs/advanced/proxy/index.mdx
@@ -9,16 +9,17 @@ tags:
   - Security
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
 ## Allowing self-signed certificates
+
 Some users may come across a barrier, where they're unable to receive a 200 response from the Ping widget for some apps, while using self-signed certificates or a local certificate authory.
 
 :::note What's going on?
 
 Homarr is trying to communicate to your apps via the integrations.
-It usually doesn't matter if Homarr is running on ``http`` or ``https``.
+It usually doesn't matter if Homarr is running on `http` or `https`.
 Your apps have a self-signed certificate - Homarr will recognize that the certificate was signed by an unknown authority and requests will be blocked.
 
 :::
@@ -28,8 +29,9 @@ To allow self-signed certificates, you can configure them on the certificates ma
 ## Securing Homarr with Traefik
 
 Copying the configuration straight from the docker-compose file won't work if you are running Homarr behind Traefik, such as a Portainer setup, or docker-swarm. In that case, you should use the following slightly modified configuration:
+
 ```yaml
-version: '3'
+version: "3"
 services:
   homarr:
     container_name: homarr
@@ -47,18 +49,18 @@ services:
       traefik.http.routers.homarr.rule: Host(`your.internal.dns.address.here.com`)
       traefik.http.routers.homarr.entrypoints: websecure
       traefik.http.routers.homarr-secure.app: homarr
-      traefik.http.apps.homarr.loadbalancer.server.port: 7575
 
 networks:
   proxy:
     external: true
 ```
 
-<br/>
+<br />
 
 A sample Traefik docker-compose.yml using Cloudflare for certificate generation that works with the configuration above would be:
+
 ```yaml
-version: '3'
+version: "3"
 
 apps:
   traefik:
@@ -104,7 +106,6 @@ networks:
     external: true
 ```
 
-
 :::tip
 Of particular note here is that both configurations explicitly define which network they are using, in this case "proxy", but it can be named anything. It just has to be the same across all apps for which Traefik is serving as a proxy. These are marked as external because the proxy network was manually created by running: `docker network create proxy` but this might be unnecessary depending on HOW exactly you are running Traefik. For example, if running [Traefik with Portainer](https://docs.portainer.io/advanced/reverse-proxy/traefik#deploying-in-a-docker-standalone-scenario), you can follow their official docs on how to set up Traefik and Portainer together, and you can just focus on the Homarr docker labels instead.
 :::
@@ -115,7 +116,6 @@ If you are using Caddy as the reverse proxy for your setup, your `docker-compose
 
 ```yaml
 services:
-  
   # <-- [Homarr installation]
 
   caddy:
@@ -141,14 +141,17 @@ networks:
   proxy:
     external: true
 ```
+
 :::important
 Homarr needs to be on the same network so you will need to add the following property to your homarr install:
+
 ```yaml
 homarr:
   ...
   networks:
     - proxy
 ```
+
 :::
 
 Next, create a file named `Caddyfile` at the same level as your `docker-compose.yml` file with the following content:
diff --git a/apps/docs/docs/advanced/running-as-different-user/index.mdx b/apps/docs/docs/advanced/running-as-different-user/index.mdx
index a4ebcf0f4..91c02fb9d 100644
--- a/apps/docs/docs/advanced/running-as-different-user/index.mdx
+++ b/apps/docs/docs/advanced/running-as-different-user/index.mdx
@@ -8,7 +8,7 @@ tags:
   - PUID
 ---
 
-By default the container is running with user `root` and group `root`. 
+By default the container is running with user `root` and group `root`.
 You can change the user and group by using the `PUID` and `PGID` environment variables.
 Important to note is, that you'll also need to change the permissions for the mounted directories accordingly.
 
@@ -32,11 +32,11 @@ services:
     volumes:
       - ./homarr/appdata:/appdata
     environment:
-        - SECRET_ENCRYPTION_KEY=your_64_character_hex_string # <--- can be generated with `openssl rand -hex 32`
-        - PUID=1000
-        - PGID=1000
+      - SECRET_ENCRYPTION_KEY=your_64_character_hex_string # <--- can be generated with `openssl rand -hex 32`
+      - PUID=1000
+      - PGID=1000
     ports:
-      - '7575:7575'
+      - "7575:7575"
 ```
 
 After that you'll need to create the appdata directory and set the correct permissions:
@@ -76,11 +76,11 @@ services:
       - /var/run/docker.sock:/var/run/docker.sock
       - ./homarr/appdata:/appdata
     environment:
-        - SECRET_ENCRYPTION_KEY=your_64_character_hex_string # <--- can be generated with `openssl rand -hex 32`
-        - PUID=1000
-        - PGID=999
+      - SECRET_ENCRYPTION_KEY=your_64_character_hex_string # <--- can be generated with `openssl rand -hex 32`
+      - PUID=1000
+      - PGID=999
     ports:
-      - '7575:7575'
+      - "7575:7575"
 ```
 
 And set the permissions for the mounted directories:
@@ -90,4 +90,4 @@ mkdir -p ./homarr/appdata
 chown -R 1000:999 ./homarr/appdata
 ```
 
-Important here is that the group ID is set to `999` as we created the `docker` group with this ID.
\ No newline at end of file
+Important here is that the group ID is set to `999` as we created the `docker` group with this ID.
diff --git a/apps/docs/docs/advanced/single-sign-on/index.mdx b/apps/docs/docs/advanced/single-sign-on/index.mdx
index ae1d9ca31..505fe9867 100644
--- a/apps/docs/docs/advanced/single-sign-on/index.mdx
+++ b/apps/docs/docs/advanced/single-sign-on/index.mdx
@@ -10,20 +10,21 @@ tags:
   - Active Directory
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
 # Single Sign On
 
 Homarr supports multiple authentication options, from internal userbase (credentials), to LDAP (with Active directory support), and OIDC.
 
 ### Auth configuration common variables
-| Environment Variable      | Description | Default Value |
-|---------------------------|-------------|---------------|
-| AUTH_PROVIDERS             | Select Which provider to use between *credentials*, *ldap* and *oidc*. <br /> Multiple providers can be enabled with by separating them with `,`, (ex. `AUTH_PROVIDERS=credentials,oidc`, it is highly recommended to just enable one provider).  |  credentials  |
-| AUTH_LOGOUT_REDIRECT_URL  | URL to redirect to after clicking logging out.  | --- |
-| AUTH_SESSION_EXPIRY_TIME  | Time for the session to time out. Can be set as pure number, which will automatically be used in seconds, or followed by s, m, h or d for seconds, minutes, hours or days. (ex: "30m") | "30d"  |
-| AUTH_COOKIE_PREFIX  | Prefix used for all authentication cookies (session, csrf, callback, pkce, state, nonce). Change this if you run another Auth.js/NextAuth app on the same hostname as Homarr (browsers scope cookies by host, not by port) to avoid cookie name collisions. Only letters, numbers, hyphens and underscores are allowed. | `homarr`  |
+
+| Environment Variable     | Description                                                                                                                                                                                                                                                                                                             | Default Value |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| AUTH_PROVIDERS           | Select Which provider to use between _credentials_, _ldap_ and _oidc_. <br /> Multiple providers can be enabled with by separating them with `,`, (ex. `AUTH_PROVIDERS=credentials,oidc`, it is highly recommended to just enable one provider).                                                                        | credentials   |
+| AUTH_LOGOUT_REDIRECT_URL | URL to redirect to after clicking logging out.                                                                                                                                                                                                                                                                          | ---           |
+| AUTH_SESSION_EXPIRY_TIME | Time for the session to time out. Can be set as pure number, which will automatically be used in seconds, or followed by s, m, h or d for seconds, minutes, hours or days. (ex: "30m")                                                                                                                                  | "30d"         |
+| AUTH_COOKIE_PREFIX       | Prefix used for all authentication cookies (session, csrf, callback, pkce, state, nonce). Change this if you run another Auth.js/NextAuth app on the same hostname as Homarr (browsers scope cookies by host, not by port) to avoid cookie name collisions. Only letters, numbers, hyphens and underscores are allowed. | `homarr`      |
 
 <Tabs>
   <TabItem value="credentials" label="Credentials Provider" default>
diff --git a/apps/docs/docs/advanced/styling/index.mdx b/apps/docs/docs/advanced/styling/index.mdx
index 9be382ec3..56d4305e5 100644
--- a/apps/docs/docs/advanced/styling/index.mdx
+++ b/apps/docs/docs/advanced/styling/index.mdx
@@ -19,12 +19,14 @@ Homarr uses https://mantine.dev/ under the hood. You can change the look & feel
 using custom CSS, that extends or overwrites the styles from Mantine.
 
 ## Getting into CSS
+
 If you don't have any experience with CSS,
 we strongly recommend you to go through the courses here: https://www.w3schools.com/css/.
 Due to the infinite scenarios and setups possible with custom CSS,
 our support team will not provide any support with your own written CSS.
 
 ## Limitations and dangers
+
 When using custom CSS, you can break the page or certain functionalities.
 Although CSS can improve the design & feel of the page, it **<ins>cannot do any of the following</ins>**:
 
@@ -33,21 +35,23 @@ Although CSS can improve the design & feel of the page, it **<ins>cannot do any
 - Completely revamp the design of the page, only smaller changes are possible
 
 Here are some dangers of using custom CSS:
+
 - Updates may contain breaking changes in the structure, built-in styling or how styling is processed. Therefore,
-custom CSS may break unexpectedly without any warning
+  custom CSS may break unexpectedly without any warning
 - Custom CSS may make certain elements invisible or not possible to click / interact with
 - Custom CSS could make readability and accessibility worse for impaired people
 
 ## How to inspect the page
-When styling the page, you can use the ``Inspector`` to inspect elements on the page and try out styles.
+
+When styling the page, you can use the `Inspector` to inspect elements on the page and try out styles.
 This may vary depending on your browser and operating system, but the workflow usually goes like this:
 
 - Open the Homarr page
-- Press ``Ctrl`` + ``Shift`` + ``I`` at the same time.
-Alternatively, right-click on the page and choose ``Inspect`` or ``Inspect element``.
-- Open the tab ``Elements`` if it isn't open yet.
+- Press `Ctrl` + `Shift` + `I` at the same time.
+  Alternatively, right-click on the page and choose `Inspect` or `Inspect element`.
+- Open the tab `Elements` if it isn't open yet.
 - Search the element you want to change in the DOM tree or use the element picker (usually at the top left)
-to select it by clicking on the page.
+  to select it by clicking on the page.
 - Experiment by changing the CSS code on the right side
 
 When writing custom CSS, it is important to also remember or create a selector, which tells the browser
@@ -55,17 +59,19 @@ which element to apply the styles to. If you accidentally broke something or wan
 simply reload the page.
 
 ## Using Homarr's classes
+
 Homarr's elements will already have a lot of classes and styles pre-applied.
 You can reuse those classes to apply additional styles or overwrite them.
-When overwriting, remember to add the ``!important`` flag  to your CSS property to tell the browser to use our instruction instead.
+When overwriting, remember to add the `!important` flag to your CSS property to tell the browser to use our instruction instead.
 
-Classes with random number suffixes, such as ``mantine-Card-x2fske``, should be avoided, since those are dynamic
+Classes with random number suffixes, such as `mantine-Card-x2fske`, should be avoided, since those are dynamic
 CSS classes that will change with every build. This means, every time you update Homarr,
 your styles will no longer apply to them
 
 ## Defining custom classes for widgets
+
 If you want to apply the styles only for one widget, you can define custom class names only for that widget.
-To do that, enter edit mode on your board, click the three dots of your widget, click ``Edit item`` and click ``Advanced options``.
+To do that, enter edit mode on your board, click the three dots of your widget, click `Edit item` and click `Advanced options`.
 Then, you can enter as many custom classes as you'd like:
 
 ![](./img/widget-custom-classes.png)
@@ -73,6 +79,7 @@ Then, you can enter as many custom classes as you'd like:
 To save them, click `Save changes` on both modals and exit edit mode.
 
 ## Where to enter custom CSS
+
 After you wrote your custom CSS, it is time to permanently save it, so you don't need to use the inspector anymore.
 To do this, enter the board settings:
 
@@ -84,11 +91,12 @@ Here you can enter your CSS code, which will be applied on the respective board
 ![](./img/custom-css-setting.png)
 
 ## Using variables
+
 You can also change the values of the theme variables, which are located here: https://mantine.dev/styles/css-variables-list/.
 To do this, see the following example CSS:
 
 ```css
 :root {
-    --mantine-primary-color-filled: #ffbb00;
+  --mantine-primary-color-filled: #ffbb00;
 }
-```
\ No newline at end of file
+```
diff --git a/apps/docs/docs/community/donate.mdx b/apps/docs/docs/community/donate.mdx
index aeb95dcac..3651a2a7b 100644
--- a/apps/docs/docs/community/donate.mdx
+++ b/apps/docs/docs/community/donate.mdx
@@ -7,12 +7,15 @@ tags:
 ---
 
 # Donate
+
 ## Why to donate
+
 Our team of 4 developers is working on Homarr in their free time.
 Homarr has become a big part of our daily things we work on - and therefore we invest a lot of time into maintaining Homarr,
 providing support and implementing new features.
 We also incur monetary costs while developing Homarr for the tools that we need.
 A few examples include:
+
 - Renting for a Cloud VPS for our cloud services (status page, monitoring, email, analytics, [demo instance](https://demo.homarr.dev/), ...)
 - Paying for (IDE-) licenses
 
@@ -20,6 +23,7 @@ Using a donation, you help us to cover these expenses and enable the development
 Homarr is completely free to use. We'd highly appreciate if you consider donating, especially if you use Homarr in a commercial environment.
 
 ## Where to donate
+
 We accept donations on our official [OpenCollective](https://opencollective.com/homarr).
 You may also sponsor us directly by providing a useful service / product to us other means.
-You can get into contact with us [here](/docs/community/get-in-touch).
\ No newline at end of file
+You can get into contact with us [here](/docs/community/get-in-touch).
diff --git a/apps/docs/docs/community/faq.mdx b/apps/docs/docs/community/faq.mdx
index 465c7bbaf..19f2cd0e0 100644
--- a/apps/docs/docs/community/faq.mdx
+++ b/apps/docs/docs/community/faq.mdx
@@ -5,43 +5,57 @@ tags:
   - Help
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
 ### Can I install Homarr on a Raspberry Pi?
+
 Yes, Homarr is compatible with the architecture of the Raspberry Pi. Have a look in our <a href="/docs/category/installation-1">installation guide</a> on how to do so.
 
 ### I have a suggestion / idea for improvement or want to report a bug
+
 You can report issues, suggestions, or ideas for improvements <a href="https://github.com/homarr-labs/homarr/issues/new/choose">here</a>.
 
 ### Can I use my own custom icons for apps?
+
 Yes, check out our guide on <a href="/docs/advanced/customizations/icons">how to add your custom icons</a>.
 
 ### Some of my online icons are not working (anymore)
+
 It seems the `cdn.jsdelivr.net` database of icon sometimes appear in the lists for DNS-Holes (PiHole, AdGuard Home...). <br />
 So make sure to manually whitelist this address.
 
 ### Can I add my own widgets? Do I need programming skills?
-We have decided, not to support custom widgets, until Homarr is in a stable and highly polished state.
-Enabling users to write their own widgets is easy at the first glance, but there are some major issues with it:
 
-- There are mainly two options for adding plugins or custom widgets to Homarr. The first option is, to allow and inject custom code in Homarr. Apps like Nextcloud can do this easily, because they use the Runtime to render all components of the application (In reality, the process is still a bit more complicated). In contrast, Homarr is using Next.js - a framework that needs to be compiled in production. That means, that each time you would modify a custom widget or plugin, the app would have to be restarted. There are options to avoid this, but they are quite flakey and bring disadvantages in our experience. The second option is, to write widgets declaratively instead of imperatively. This way, we would be able to render and modify widgets without any restarting at all. However, we'd have to write our own interpreter for said declarative schema. This is totally possible, but requires a lot of planning and architecture design to function properly. The required work to implement either option is therefore quite substantial.
-- Custom widgets would need to be able to request data, so they work properly. We use tRPC for this. Many APIs use different formats and we'd have to convert and read those.
-- Using custom widgets, one could easily create harmful widgets, leak your personal data (potentially including your tokens) and trick your users. A proper implementation (eg. official plugin store, where we can ban harmful widgets from) would resolve this problem to a certain extent, but again requires additional work and time to be put in.
+Yes. A [Custom Widget](/docs/management/custom-widgets) can read a public or private HTTP API.
 
-If you still want to add a widget, please consider to contribute it directly to Homarr. For that, basic programming skills are required. Our [Developer Guides](/docs/advanced/development/getting-started) explain this even more detailed.
+It can show responsive Mantine JSX. It can also use widget options and actions with board permission checks.
+
+Custom JSX v2 is the only Custom Widget format. Write the JSON and JSX in the workbench.
+
+You can also use the AI copy prompt. An MCP agent can validate and preview a definition before it saves the definition.
+
+The workbench reads a pasted AI response. It shows request capabilities and redacted diagnostics.
+
+A template cannot import packages or run arbitrary JavaScript. It cannot call browser `fetch`.
+
+Named requests use the Homarr server. The server applies board permissions and the network policy.
+
+Before installation, examine the origins, methods, permissions, and actions. Use the same review before publication.
 
 ### Is it secure to expose Homarr to the web?
 
-Yes, since v0.14.0, we are confident that Homarr is secure enough to be exposed to the web. 
+Yes, since v0.14.0, we are confident that Homarr is secure enough to be exposed to the web.
 Make sure to enable the "allow anonymous access" [option in the settings](/docs/management/boards#access-control), if you want to allow people without an account to be able to see your dashboard (not edit)
 
 ### How do I open the console / log?
+
 There are two different sources of information:
+
 - console: This is your client (browser). It can tell us, if there is an issue on the client (crash, bug, ...).
 - log: This is your server. It will tell us, if there are issues with connections for the integrations, crashes and errors.
 
-Both variants *can* contain personal data. It's recommended, that you don't post them publicly or remove personal data from it.
+Both variants _can_ contain personal data. It's recommended, that you don't post them publicly or remove personal data from it.
 
 <Tabs>
   <TabItem value="apple" label="Read console" default>
@@ -49,39 +63,45 @@ Both variants *can* contain personal data. It's recommended, that you don't post
 > Note: This will not work on most mobile browsers.
 
 Open your browser and ensure, that Homarr is your current tab.
-Press ``CTRL`` + ``SHIFT`` + ``I`` on your keyboard. If this shortcut doesn't work, please use one of the alternatives: https://developer.chrome.com/docs/devtools/open/.
-Click on ``Console`` in the new window, that opened. There, you should see white, orange and sometimes red messages. You can use the Windows Snip & Sketch tool (or your respective tool on Linux / MacOS) to screenshot those messages.
+Press `CTRL` + `SHIFT` + `I` on your keyboard. If this shortcut doesn't work, please use one of the alternatives: https://developer.chrome.com/docs/devtools/open/.
+Click on `Console` in the new window, that opened. There, you should see white, orange and sometimes red messages. You can use the Windows Snip & Sketch tool (or your respective tool on Linux / MacOS) to screenshot those messages.
 
 > Please never execute any commands in the console. Scammers are using the console to let you execute harmful commands. If you want to resolve an issue in Homarr, **you'll never have to execute any commands here**
 
   </TabItem>
   <TabItem value="orange" label="Read log">
 
-This depends on your installation method. If you use Unraid, you can simply click on the App and on ``Log``. If you have a bare Docker install, use ``docker container logs homarr``. If you used a different name than ``homarr`` for your container, you need to replace said argument. Here is some additional information about the command: https://geekflare.com/check-docker-logs/.
+This depends on your installation method. If you use Unraid, you can simply click on the App and on `Log`. If you have a bare Docker install, use `docker container logs homarr`. If you used a different name than `homarr` for your container, you need to replace said argument. Here is some additional information about the command: https://geekflare.com/check-docker-logs/.
 
   </TabItem>
 </Tabs>
 
 ### How do I post logs?
+
 Please check [the section above](#how-do-i-open-the-console--log), on how to obtain logs. Logs should always be posted to https://pastebin.com/ or https://rentry.co/.
 
 ### Can I use Homarr at my company?
+
 Yes, you can! But please consider a donation, if our work has been useful to you.
 
 ### I think I found a bug. What can I do?
+
 If you think, that you found a bug, please create an issue <a href="https://github.com/homarr-labs/homarr/issues/new/choose">here</a>.
 
 ### Why can't I use my custom icons?
+
 You need to restart the Homarr Docker container after adding icons.
 
 ### Why can't homarr see/ping containers running locally behind GluetunVPN?
+
 This is because GluetunVPN, and many other docker VPN services, secure their VPN connections with strict firewalls. These firewalls often block access to local containers, even on the same docker network. The workaround for <a href="https://github.com/qdm12/gluetun-wiki/blob/main/setup/options/firewall.md">GluetunVPN</a> is to add "- FIREWALL_OUTBOUND_SUBNETS=192.168.1.0/24" into the environmental variables of the docker compose file. If you are using a firewall on your system, you will need to add a rule that allows requests from ip's in the range of 192.168.xxx.xxx . If you are using UFW the command would be "sudo ufw allow from 192.168.0.0/16".
 Tip: If you are running your torrent client behind a VPN, and running Sonarr (or something similar) normally, make sure to open your torrent client's port in your firewall. If you don't, Sonarr will not be able to see it. Furthermore, use your machines IP (192.168.x.x) rather then 127.0.0.1 or localhost.
 
 ### Can I get in touch with you?
+
 Yes, go <a href="/docs/community/get-in-touch">here</a> to get with us in touch.
 
-<hr/>
+<hr />
 
 :::tip
 
diff --git a/apps/docs/docs/community/get-in-touch.mdx b/apps/docs/docs/community/get-in-touch.mdx
index 7651f5ea2..eecd2e1f3 100644
--- a/apps/docs/docs/community/get-in-touch.mdx
+++ b/apps/docs/docs/community/get-in-touch.mdx
@@ -9,16 +9,16 @@ tags:
 We're happy to talk with you! Shoot us a message at the following places:
 
 ## E-Mail
+
 We are open to discuss sponsorships, security vulnerabilities and other private requests through our email.
 Please do not report any bugs / feature requests here - they will be ignored and deleted.
 
 [homarr-labs@proton.me](mailto:homarr-labs@proton.me)
 
 ## Discord
+
 We have a Discord Server, where we announce new releases, discuss features and bugs and show off our dashboards.
 There are over 4'000 members and we're happy to answer your questions or concerns.
 You're also open to discuss new / upcoming features and any offtopic selfhosting content.
 
 [_![](https://discordapp.com/api/guilds/972958686051962910/widget.png?style=banner2)_](https://discord.gg/aCsmEV5RgA)
-
-
diff --git a/apps/docs/docs/community/license.mdx b/apps/docs/docs/community/license.mdx
index e36a5d684..3d1f82890 100644
--- a/apps/docs/docs/community/license.mdx
+++ b/apps/docs/docs/community/license.mdx
@@ -7,6 +7,7 @@ tags:
 Homarr is licensed under [Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0).
 
 ## TL;DR
+
 | Action         | Allowed |
 | -------------- | ------- |
 | Copy           | ✅      |
@@ -24,8 +25,6 @@ Please consider [making a donation](/docs/community/donate) to Homarr, if this p
 
 :::
 
-
-
 ## Full License
 
 ```txt
diff --git a/apps/docs/docs/community/translations.mdx b/apps/docs/docs/community/translations.mdx
index 074db939d..68eea8a1e 100644
--- a/apps/docs/docs/community/translations.mdx
+++ b/apps/docs/docs/community/translations.mdx
@@ -5,30 +5,31 @@ tags:
   - Translations
 ---
 
-We want to make Homarr accessible for everyone. 
-But to do that, we need your help. 
-We are running a community program that enables everyone to translate Homarr into their language – no programming required. 
-We are using [Crowdin](https://crowdin.com/) to manage our translations. 
+We want to make Homarr accessible for everyone.
+But to do that, we need your help.
+We are running a community program that enables everyone to translate Homarr into their language – no programming required.
+We are using [Crowdin](https://crowdin.com/) to manage our translations.
 You can find the translations [here](https://translate.homarr.dev/).
 
 ## How to translate
 
-
 ### Using crowdin's online platform
-Go to the [Crowdin translations](https://translate.homarr.dev/) and select a language you want to translate. 
-You can then enter the translation mode and start translating. 
-After you've submitted your translations, a Proofreader will review your changes. 
-After a translation has been approved, it will be merged to the language development branch. 
-We merge this one periodically to the development branch. 
+
+Go to the [Crowdin translations](https://translate.homarr.dev/) and select a language you want to translate.
+You can then enter the translation mode and start translating.
+After you've submitted your translations, a Proofreader will review your changes.
+After a translation has been approved, it will be merged to the language development branch.
+We merge this one periodically to the development branch.
 After the next update of Homarr, all changes from the development branch will be merged, including the changes in the translations.
 
 ### Using live translate
+
 You can also help translate homarr directly from the app!
 For this you can simply change your language to "Crowdin (live translations)"
 
 ![](./img/crowdin-language-select.png)
 
-Then you'll be prompted to connect to your Crowdin account and choose the language in which you want to transalte. 
+Then you'll be prompted to connect to your Crowdin account and choose the language in which you want to transalte.
 You can then start translating directly from the app by selecting some text on the app.
 If some text cannot be selected to be edited with the live translation tool, you can still translate it inside of the In-Context popup at the Home tab, it will be red if it's not translated yet.
 
@@ -47,7 +48,8 @@ Do you want to become a proofreader? [Let us know on our Discord](/docs/communit
 :::
 
 ## Guidelines
+
 1. Translate with context: Some translations can't be translated 1:1 - they need context. Ensure that your translations make sense in the context.
 2. Keep things simple and original - no additional characters are needed.
 3. Don't translate the same thing twice - if you see a translation that is already translated, don't translate it again unless you have a better translation.
-5. Keep your translations as close to the original as possible.
+4. Keep your translations as close to the original as possible.
diff --git a/apps/docs/docs/getting-started/after-the-installation.mdx b/apps/docs/docs/getting-started/after-the-installation.mdx
index 7ac904bf4..3785aac56 100644
--- a/apps/docs/docs/getting-started/after-the-installation.mdx
+++ b/apps/docs/docs/getting-started/after-the-installation.mdx
@@ -54,11 +54,7 @@ You must choose a username and password (both can later be changed).
 We enforce strict password requirements when you enter your password to protect your instance if you accidentally
 expose it to the internet.
 
-<img
-  src={imageStartFromScratchStepAdminUser}
-  alt={"Screenshot form to create admin user"}
-  width={300}
-/>
+<img src={imageStartFromScratchStepAdminUser} alt={"Screenshot form to create admin user"} width={300} />
 
 If you selected external providers (such as LDAP or OIDC), you'll be prompted to create an admin group.
 This group will be used to synchronize users from your provider to Homarr.
@@ -116,22 +112,14 @@ The onboarding can no longer be started again.
 From here you can click on one of the provided links to continue your journey.
 We recommend you to continue with the section [creating your first board on this page](#creating-your-first-board).
 
-<img
-  src={imageStartFromScratchStepFinish}
-  alt={"Screenshot of the finish onboarding process with links"}
-  width={300}
-/>
+<img src={imageStartFromScratchStepFinish} alt={"Screenshot of the finish onboarding process with links"} width={300} />
 
 ### Importing a ZIP from version before 1.0.0
 
 This is recommended when you used Homarr before and want to re-import your data.
 It is important that you first migrate correctly using [the list of breaking changes for 1.0](/blog/2024/09/23/version-1.0).
 
-<img
-  src={manageExportOldHomarr}
-  alt="Export from old Homarr"
-  style={{ maxWidth: 500 }}
-/>
+<img src={manageExportOldHomarr} alt="Export from old Homarr" style={{ maxWidth: 500 }} />
 
 **How to export and import data**
 
@@ -149,7 +137,8 @@ It is important that you first migrate correctly using [the list of breaking cha
 ## Creating your first board
 
 In Homarr, you organize your apps and widgets on boards.
-Boards can be organized using the interactive drag and drop.
+Boards use fixed-size tiles so the same widget keeps the same proportions on every screen.
+Drag, resize, and section controls are available in edit mode.
 Let's create your first board by navigating here: `Manage` > `Boards` > `New board`:
 ![](./img/manage-create-board-button.png)
 
@@ -197,38 +186,28 @@ Here you have the following options in the header:
 
 When entering the edit mode, you'll get some additional buttons to work with:
 
-<img
-  src={manageBoardHeaderEditMode}
-  alt={"Screenshot of buttons in the edit mode"}
-  width={200}
-/>
+<img src={manageBoardHeaderEditMode} alt={"Screenshot of buttons in the edit mode"} width={200} />
 
 - **Add item**: Click this button to add new elements to your page.
-- **Exit edit mode**: Click this btuton to save your changes and exit edit mode.
+- **Exit edit mode**: Click this button to save your changes and exit edit mode.
+
+Outside edit mode, right-click a widget for its live status, refresh, settings, quick options, and supported actions.
+Hold `Shift` while hovering a widget that supports advanced view to expand it in place while the rest of the board
+stays visible but dimmed. Release `Shift` to close it. You can also focus that widget and press `Shift` + `Enter` to
+keep its advanced view open until you close it. Widgets without a distinct advanced experience adapt in place.
 
 To continue, click the option "New Item":
 
-<img
-  src={manageBoardHeaderAddItem}
-  alt={"Screenshot of the add item menu"}
-  width={200}
-/>
+<img src={manageBoardHeaderAddItem} alt={"Screenshot of the add item menu"} width={200} />
 
 Next, you can choose what item you'd like to add.
 We will discuss the other options in the following sections - for now choose "App" to continue.
 
-<img
-  src={manageBoardHeaderChooseItem}
-  alt={"Screenshot of choosing the app item in the modal"}
-  width={300}
-/>
+<img src={manageBoardHeaderChooseItem} alt={"Screenshot of choosing the app item in the modal"} width={300} />
 
 As soon as you chose the app, the modal will close and you'll get the following item on your board:
 
-<img
-  src={manageBoardNoApp}
-  alt="Screenshot of the No app element on the board"
-/>
+<img src={manageBoardNoApp} alt="Screenshot of the No app element on the board" />
 
 This is expected, because you haven't told Homarr what app it should show in this item.
 To configure this, click on the small 3 dots at the top of the item in the edit mode and choose "Edit item" in the menu.
@@ -240,21 +219,28 @@ In the modal you can edit the app that you want to display:
 ![](./img/manage-board-choose-app.png)
 
 As soon as you save your changes, the tile on the board will refresh and display your app.
-Using the small bidirectional arrow at the bottom right you can resize the element.
-Start pressing with your mouse button down, move your mouse to resize and release your finger as soon your you're happy with the size.
+Use the resize handle at the bottom right to resize the tile.
+Press and hold the handle, move the pointer, and release it when the tile has the size you want.
 
 ![](./img/resize-item.gif)
 
-To move your item to a different position on the board, simply hold the mouse button anywhere on the item and move with the mouse to the desired position.
-As soon as you release your finger, the item will snap in place in the grid.
+To move a tile in edit mode, press and hold its content, move it to the desired position, and release it.
+Widget content is disabled while editing so its controls do not intercept the drag; use the tile's settings button for edit actions.
+The tile snaps to the grid. Equally-sized tiles swap when one is dropped into the other's slot, while other neighboring tiles move out of the way automatically.
 
 ![](./img/move-item.gif)
 
+Every `1 × 1` tile has a logical content size of `200 × 200` pixels.
+Larger tiles use multiples of that fixed unit, with a consistent gap between cells.
+Homarr scales the complete board uniformly, like zooming a page.
+It stops shrinking at 75% and lets you scroll horizontally instead of making text and controls too small.
+It does not squeeze or reflow the content of individual widgets, so a widget keeps the same design and proportions across screen sizes.
+
 :::note
 
-You cannot move items freely on the vertical axis.
-We always align all items to the top of the page to simply organization.
-To move items to the bottom, you must add more items or resize items.
+Viewing a board initially uses the lightweight, non-interactive layout.
+For users with edit access, Homarr prepares drag-and-drop and resize controls in the background after the board becomes interactive.
+If you enter edit mode before that finishes, the existing board stays visible until the editor is ready.
 
 :::
 
@@ -265,8 +251,10 @@ This helps you to explore the capabilities of Homarr before you build your board
 
 :::
 
-Users on touch or mobile devices may not be able to drag and drop or move items.
-They can use the "Move / resize item" option in the edit menu of items instead:
+Keyboard users can focus a tile, press Enter or Space, then use arrow keys to move and Shift plus arrow keys to resize.
+Press Escape to stop.
+For precise numeric controls or touch input, choose **Move / resize item** from the tile's edit menu.
+The dialog can also move the tile to another section or fixed sidebar:
 
 ![](./img/manage-board-move-resize-item-menu.png)
 
@@ -338,43 +326,36 @@ As with every change, don't forget to save your changes using the exit edit mode
 
 ![](./img/exit-edit-mode.png)
 
-## Grouping your items
+## Organizing items with Containers
 
-As the last step, let's organize your freshly created items using two different options.
-You can choose either or both of them on your boards.
+Containers are resizable areas for apps, widgets, and nested Containers.
+The same Container works on the main canvas, inside a fixed rail, or inside another Container.
+Each Container can configure:
 
-### Using dynamic sections
+- Its label and whether that label is visible.
+- Allow or disable collapsing.
+- Show or hide **Open all in new tabs**.
+- Change its border color and custom CSS classes.
 
-Dynamic sections are a simple, resizable visual group to group items.
+Open the add-content menu and choose **New Container**.
+In edit mode, move and resize it like any other item, then drag items into or out of it.
+Nested content stays within the Container's bounds.
+While resizing, the solid outline follows the pointer continuously and the dashed grid preview shows the size that will be saved on release.
 
-![](./img/create-dynamic-section.png)
+### Collapsing and opening apps
 
-After adding a dynamic section, you can simply drag and drop items into the section:
+Users can collapse an eligible Container like an accordion in view mode without changing its saved expanded size.
+The full-width header becomes the compact expansion bar, so the half-row state has no empty pill-shaped spacer.
+Expanding it restores its bounds and makes room for its contents.
+If **Open all in new tabs** is enabled, the Container menu can open every app link it contains.
 
-![](./img/dynamic-section.gif)
+### Fixed rails
 
-### Using categories
-
-Categories are more advanced and complicated than dynamic sections.
-To create a category, open the add item modal and choose "new category":
-
-![](./img/add-category.png)
-
-Every category must have a name. After you click "Add category", you will get a new item on your board:
-
-![](./img/category.gif)
-
-You can drag and drop items in to this category in the edit mode.
-Categories will have a big space before and after them in the edit mode to
-enable you to drag and drop items outside the category.
-You can also collapse or open categories in edit mode to facilitate your editing process.
-
-:::note
-
-A current limitation of categories is, that they will always have a width of 100%.
-You cannot reduce their horizontal width.
-
-:::
+Open the board's **Layout** settings to enable the left or right rail for each responsive layout.
+Choose one, two, or three columns with the slider and use the preview to check the remaining canvas width.
+The rail reserves those columns from the dashboard, so Homarr moves canvas items into the next available positions.
+Rail content stays visible while the page scrolls and remains editable.
+Each responsive layout keeps its own rail widths, item positions, and item sizes.
 
 ## Guided tours
 
diff --git a/apps/docs/docs/getting-started/glossary.mdx b/apps/docs/docs/getting-started/glossary.mdx
index 8d690245c..989c71e1c 100644
--- a/apps/docs/docs/getting-started/glossary.mdx
+++ b/apps/docs/docs/getting-started/glossary.mdx
@@ -1,12 +1,13 @@
 # Glossary
-In the glossary, you'll learn the different components and their names of Homarr.
 
-| Term            | Definition                                                                                                     |
-|-----------------|----------------------------------------------------------------------------------------------------------------|
-| Apps            | An piece of software that you or a third party hosts (eg. Google)                                              |
-| Integration     | A connection to a service outside of Homarr                                                                    |
-| Dynamic section | Resizeable area where items on your board can be placed and grouped                                            |
-| Widget          | A tile that uses your integrations to display data or enables you to interact with with them                   |
-| Edit mode       | Temporary state that you can enter where you can drag and drop, edit or customize your board                   |
-| Board           | Customizable page which can be edited using the edit mode. This is where apps, sections and widgets are placed |
-| Tasks           | Workloads that are performed in the background - even if there is no user present                              |
+This glossary explains Homarr's main components and the terms used for them.
+
+| Term        | Definition                                                                              |
+| ----------- | --------------------------------------------------------------------------------------- |
+| Apps        | A piece of software that you or a third party hosts (for example, Google)               |
+| Integration | A connection to a service outside of Homarr                                             |
+| Container   | A resizable area that can hold apps, widgets, and nested Containers                     |
+| Widget      | A tile that uses your integrations to display data or enables you to interact with them |
+| Edit mode   | A temporary state where you can drag, resize, edit, or customize your board             |
+| Board       | A customizable page where apps, widgets, and Containers are arranged                    |
+| Tasks       | Workloads that are performed in the background, even if no user is present              |
diff --git a/apps/docs/docs/getting-started/index.mdx b/apps/docs/docs/getting-started/index.mdx
index 4dc986658..0d6a44a4e 100644
--- a/apps/docs/docs/getting-started/index.mdx
+++ b/apps/docs/docs/getting-started/index.mdx
@@ -8,13 +8,14 @@ tags:
   - Unraid
 ---
 
-import Link from '@docusaurus/Link';
-import { IconArrowRight } from '@tabler/icons-react';
+import Link from "@docusaurus/Link";
+import { IconArrowRight } from "@tabler/icons-react";
 
 Before you try to install Homarr, please review if your device meets the requirements.
 Installing on an unsupported device may lead to unstable behaviour and no support will be provided.
 
 ## Hardware
+
 - At least 500MB RAM
 - At least 600MB of free disk space for the Docker image. SSD is preferred.
 - Single or dual core CPU
@@ -24,8 +25,8 @@ Installing on an unsupported device may lead to unstable behaviour and no suppor
 
 We build Homarr for a bunch of different architectures, including ARM. Please ensure that your device architecture is supported by Homarr. We won't be able to provide support for unusual or outdated architectures.
 
-| Architecture | Supported       |
-|--------------|-----------------|
+| Architecture | Supported        |
+| ------------ | ---------------- |
 | linux/amd64  | ✅ Supported     |
 | linux/arm64  | ✅ Supported     |
 | linux/arm/v7 | ❌ Not supported |
@@ -34,10 +35,10 @@ We build Homarr for a bunch of different architectures, including ARM. Please en
 
 <Link
   data-attr="Go to installation"
-  className={'button button--secondary button--lg rounded-3xl dark:border-zinc-600 dark:bg-zinc-800'}
+  className={"button button--secondary button--lg rounded-3xl dark:border-zinc-600 dark:bg-zinc-800"}
   to="/docs/category/installation-1"
 >
-  <div className={'flex items-center gap-3'}>
+  <div className={"flex items-center gap-3"}>
     <span className={"dark:text-gray-200"}>Go to Installation</span>
     <IconArrowRight className={"dark:text-gray-200"} size={20} />
   </div>
diff --git a/apps/docs/docs/getting-started/installation/docker.mdx b/apps/docs/docs/getting-started/installation/docker.mdx
index 956a6c2d6..5a56a848a 100644
--- a/apps/docs/docs/getting-started/installation/docker.mdx
+++ b/apps/docs/docs/getting-started/installation/docker.mdx
@@ -1,21 +1,23 @@
-import { DockerInstallSnippet } from '@site/src/components/pages/installation/docker/dynamic-docker-install'
+import { DockerInstallSnippet } from "@site/src/components/pages/installation/docker/dynamic-docker-install";
 
 # Docker
+
 Docker is our recommended installation method for beginners and professionals.
 It is easy to use, ships with all dependencies inside a single container and is easy to use and maintain.
 It requires at least some basic knowledge of [Docker](https://www.docker.com/).
 We recommend [NetworkChuck's Docker Containers 101](https://www.youtube.com/watch?v=eGz9DS-aIeY) as a good start for complete beginners.
 
 ## Docker compose
+
 ### Prerequisites
 
 - A Linux or Windows based system that meets the [hardware prerequisites](/docs/getting-started/#hardware) and [architecture prerequisites](/docs/getting-started/#architecture).
 - [Docker](https://docs.docker.com/get-docker/)
-- [Docker Compose](https://docs.docker.com/compose/install/) - *preinstalled on many systems nowadays*
+- [Docker Compose](https://docs.docker.com/compose/install/) - _preinstalled on many systems nowadays_
 
 ### Installation
 
-<DockerInstallSnippet data-visual-test="blackout"/>
+<DockerInstallSnippet data-visual-test="blackout" />
 Finally, run ``docker compose up -d`` in the same directory. This will start the Homarr container in the background.
 
 :::caution
@@ -26,27 +28,26 @@ Docker compose creates a network by default. Some integrations may not work (spe
 
 ### Updating
 
-To update, navigate to the directory with the ``docker-compose.yaml`` located.
+To update, navigate to the directory with the `docker-compose.yaml` located.
 
-- Stop Homarr using ``docker compose down``
-- Pull the newest image of Homarr using ``docker compose pull``
-- Start Homarr again using ``docker compose up -d`` (``-d`` for detached mode - start in background)
-- Delete the old image using ``docker image prune`` (*Warning: this also removes you other unused images - not just Homarr*)
+- Stop Homarr using `docker compose down`
+- Pull the newest image of Homarr using `docker compose pull`
+- Start Homarr again using `docker compose up -d` (`-d` for detached mode - start in background)
+- Delete the old image using `docker image prune` (_Warning: this also removes you other unused images - not just Homarr_)
 
 You can automate this process using [Watchtower](https://containrrr.dev/watchtower/).
 
 ### Uninstalling
 
-To uninstall, navigate to the directory with the ``docker-compose.yaml`` located.
+To uninstall, navigate to the directory with the `docker-compose.yaml` located.
 
-- Stop Homarr using ``docker compose down``
-- Delete the created directories & files on your root file system (check ``docker-compose.yaml`` file for your specific locations)
-- Delete compose file using ``rm docker-compose.yaml``
-- Prune unused Docker images using ``docker image prune`` (*Warning: this also removes you other unused images - not just Homarr*)
+- Stop Homarr using `docker compose down`
+- Delete the created directories & files on your root file system (check `docker-compose.yaml` file for your specific locations)
+- Delete compose file using `rm docker-compose.yaml`
+- Prune unused Docker images using `docker image prune` (_Warning: this also removes you other unused images - not just Homarr_)
 - (Optional): Prune any network or volumes if you use any.
 - (Optional): Remove Homarr from your reverse proxy, VPNs or tunnels if you use any.
 
-
 ## Docker standalone
 
 :::caution
@@ -77,15 +78,16 @@ docker run  \
 
 :::note
 
-Docker will mount the configuration files and icons to your host machine. Please make sure to replace ``<your-path>`` from the docker run command with your desired storage location. The path must be absolute.
+Docker will mount the configuration files and icons to your host machine. Please make sure to replace `<your-path>` from the docker run command with your desired storage location. The path must be absolute.
 
 :::
 
 ### Updating
+
 To update Homarr, you must remove your container first. Make sure that you've mounted your data and that you have access to it, so your configuration doesn't get lost.
 
-1. Run ``docker rm homarr`` to remove the container.
-2. Pull the latest Homarr image ``docker pull ghcr.io/homarr-labs/homarr:latest``.
+1. Run `docker rm homarr` to remove the container.
+2. Pull the latest Homarr image `docker pull ghcr.io/homarr-labs/homarr:latest`.
 3. Re-run the command you used to install Homarr.
 
 This process can get tideous, if you update frequently. Thus, we recommend [using docker-compose](#docker-compose)
@@ -98,8 +100,8 @@ Want to update all your containers automatically? Checkout [Watchtower](https://
 
 ### Uninstalling
 
-1. Obtain the container ID of your Homarr container using ``docker ps | grep homarr``.
-2. Delete the container using ``docker rm <your-container-id>``
-3. Prune unused Docker images using ``docker image prune`` (*Warning: this also removes you other unused images - not just Homarr*)
+1. Obtain the container ID of your Homarr container using `docker ps | grep homarr`.
+2. Delete the container using `docker rm <your-container-id>`
+3. Prune unused Docker images using `docker image prune` (_Warning: this also removes you other unused images - not just Homarr_)
 4. (Optional): Prune any network or volumes if you use any.
 5. (Optional): Remove Homarr from your reverse proxy, VPNs or tunnels if you use any.
diff --git a/apps/docs/docs/getting-started/installation/helm.md b/apps/docs/docs/getting-started/installation/helm.md
index 051c38955..7507cdc18 100644
--- a/apps/docs/docs/getting-started/installation/helm.md
+++ b/apps/docs/docs/getting-started/installation/helm.md
@@ -2,9 +2,9 @@
 
 <img src="https://raw.githubusercontent.com/homarr-labs/charts/refs/heads/main/charts/homarr/icon.svg" align="right" width="92" alt="homarr logo">
 
-![Version: 8.25.0](https://img.shields.io/badge/Version-8.25.0-informational?style=flat)
+![Version: 8.26.0](https://img.shields.io/badge/Version-8.26.0-informational?style=flat)
 ![Type: application](https://img.shields.io/badge/Type-application-informational?style=flat)
-![AppVersion: v1.73.0](https://img.shields.io/badge/AppVersion-v1.73.0-informational?style=flat)
+![AppVersion: v1.74.0](https://img.shields.io/badge/AppVersion-v1.74.0-informational?style=flat)
 
 A Helm chart to deploy homarr for Kubernetes
 
@@ -12,7 +12,7 @@ A Helm chart to deploy homarr for Kubernetes
 
 ## Source Code
 
-* <https://github.com/homarr-labs/homarr>
+- <https://github.com/homarr-labs/homarr>
 
 ## Requirements
 
@@ -76,38 +76,38 @@ To avoid including sensitive information in plain text within your version contr
 
 Below is an exhaustive list of all secrets:
 
-| FEATURE   | SECRET NAME             | SECRET KEYS                             | Required |
-|-----------|-------------------------|-----------------------------------------|----------|
-| OIDC      | auth-oidc-secret        | oidc-client-id<br>oidc-client-secret    | No       |
-| LDAP      | auth-ldap-secret        | bind-password                           | No       |
-| DATABASE  | db-secret               | db-url                                  | No       |
-| DATABASE  | db-encryption           | db-encryption-key                       | yes      |
+| FEATURE  | SECRET NAME      | SECRET KEYS                          | Required |
+| -------- | ---------------- | ------------------------------------ | -------- |
+| OIDC     | auth-oidc-secret | oidc-client-id<br>oidc-client-secret | No       |
+| LDAP     | auth-ldap-secret | bind-password                        | No       |
+| DATABASE | db-secret        | db-url                               | No       |
+| DATABASE | db-encryption    | db-encryption-key                    | yes      |
 
 ### Database
 
 You have multiple options for configuring the database:
 
-| DRIVER TYPE    | Persistence mode                |
-|----------------|---------------------------------|
-| better-sqlite3 | Pod disk                        |
-| better-sqlite3 | homarr-database PVC             |
-| mysql2         | External MySql database         |
-| node-postgres  | External Postgresql database    |
+| DRIVER TYPE    | Persistence mode             |
+| -------------- | ---------------------------- |
+| better-sqlite3 | Pod disk                     |
+| better-sqlite3 | homarr-database PVC          |
+| mysql2         | External MySql database      |
+| node-postgres  | External Postgresql database |
 
 #### Pod disk
 
-No additional configuration is required. However, keep in mind that if the pod restarts, all data will be lost. This setup is not *recommended* for production use.
+No additional configuration is required. However, keep in mind that if the pod restarts, all data will be lost. This setup is not _recommended_ for production use.
 
 To create the necessary database secret, execute the following command:
 
 <details>
 <summary>Required Secrets</summary>
 
-````yaml
+```yaml
 kubectl create secret generic db-encryption \
 --from-literal=db-encryption-key='<SECRET_ENCRYPTION_KEY_SECRET_TO_CHANGE>' \
 --namespace homarr
-````
+```
 
 </details>
 
@@ -120,11 +120,11 @@ Associated secret to create :
 <details>
 <summary>DB Required Secrets</summary>
 
-````yaml
+```yaml
 kubectl create secret generic db-encryption \
 --from-literal=db-encryption-key='<SECRET_ENCRYPTION_KEY_SECRET_TO_CHANGE>' \
 --namespace homarr
-````
+```
 
 </details>
 
@@ -133,13 +133,13 @@ Bellow an example of the override value file :
 <details>
 <summary>values.yaml</summary>
 
-````yaml
+```yaml
 persistence:
   homarrDatabase:
     enabled: true
     storageClassName: "default"
     size: "1Gi"
-````
+```
 
 </details>
 
@@ -150,17 +150,18 @@ To create the necessary database secrets, execute the following command:
 <details>
 <summary>Required Secrets</summary>
 
-````yaml
+```yaml
 kubectl create secret generic db-encryption \
 --from-literal=db-encryption-key='<SECRET_ENCRYPTION_KEY_SECRET_TO_CHANGE>' \
 --namespace homarr
-````
+```
 
-````yaml
+```yaml
 kubectl create secret generic db-secret \
 --from-literal=db-url='mysql://user:password@host:port/homarrdb' \
 --namespace homarr
-````
+```
+
 </details>
 
 Below is an example of the override values file:
@@ -168,10 +169,11 @@ Below is an example of the override values file:
 <details>
 <summary>values.yaml</summary>
 
-````yaml
+```yaml
 database:
   type: mysql
-````
+```
+
 </details>
 
 #### External Postgresql database
@@ -181,17 +183,17 @@ To create the necessary database secrets, execute the following command:
 <details>
 <summary>Required Secrets</summary>
 
-````yaml
+```yaml
 kubectl create secret generic db-encryption \
 --from-literal=db-encryption-key='<SECRET_ENCRYPTION_KEY_SECRET_TO_CHANGE>' \
 --namespace homarr
-````
+```
 
-````yaml
+```yaml
 kubectl create secret generic db-secret \
 --from-literal=db-url='postgresql://user:password@host:port/homarrdb' \
 --namespace homarr
-````
+```
 
 </details>
 
@@ -200,10 +202,11 @@ Below is an example of the override values file:
 <details>
 <summary>values.yaml</summary>
 
-````yaml
+```yaml
 database:
   type: postgresql
-````
+```
+
 </details>
 
 ### Ingress
@@ -213,7 +216,7 @@ The ingress section in the values.yaml file allows you to configure how external
 <details>
 <summary>values.yaml</summary>
 
-````yaml
+```yaml
 service:
   enabled: true # Ensure the service is enabled for Ingress to route traffic
 ingress:
@@ -231,7 +234,8 @@ ingress:
         - "homarr.homelab.dev"
         - "www.homarr.homelab.dev"
       secretName: homelab-tls
-````
+```
+
 </details>
 
 ### HTTPRoute (Gateway API)
@@ -242,9 +246,9 @@ This provides a more expressive and future-proof alternative to Ingress, with su
 <details>
 <summary>values.yaml</summary>
 
-````yaml
+```yaml
 service:
-  enabled: true  # must be enabled for HTTPRoute to forward traffic
+  enabled: true # must be enabled for HTTPRoute to forward traffic
 httproute:
   enabled: true
   parentRefs:
@@ -260,14 +264,15 @@ httproute:
       backendRefs:
         - name: homarr
           port: 7575
-````
+```
+
 </details>
 
 #### Notes:
 
 - parentRefs: the Gateway(s) this route attaches to. Gateways must already exist.
 - hostnames: domain names this route applies to.
-- rules:  each rule can define matches (paths, headers, queries), optional filters, and backendRefs to services
+- rules: each rule can define matches (paths, headers, queries), optional filters, and backendRefs to services
 - TLS must be configured on the Gateway (not on HTTPRoute). For example, the Gateway can have a TLS listener for homarr.homelab.dev, and this route will automatically apply once matched.
 
 ### Certificates
@@ -284,7 +289,7 @@ Use inline certificates to generate a ConfigMap, mounted as individual files.
 <details>
 <summary>values.yaml</summary>
 
-````yaml
+```yaml
 persistence:
   homarrTrustedCerts:
     enabled: true
@@ -298,7 +303,8 @@ persistence:
         -----BEGIN CERTIFICATE-----
         MIID...EFGH==
         -----END CERTIFICATE-----
-````
+```
+
 </details>
 
 Behavior:
@@ -313,7 +319,7 @@ Use inline certificates to generate a Kubernetes Secret, mounted as files.
 <details>
 <summary>values.yaml</summary>
 
-````yaml
+```yaml
 persistence:
   homarrTrustedCerts:
     enabled: true
@@ -327,7 +333,8 @@ persistence:
         -----BEGIN CERTIFICATE-----
         MIIC...XYZ==
         -----END CERTIFICATE-----
-````
+```
+
 </details>
 
 Behavior:
@@ -342,16 +349,17 @@ Use an existing Kubernetes Secret, assuming its keys are filenames.
 <details>
 <summary>values.yaml</summary>
 
-````yaml
+```yaml
 persistence:
   homarrTrustedCerts:
     enabled: true
     type: existingSecret
     existingSecretName: "existingSecretName"
     existingSecretKeys:
-        - cert3.crt
-        - cert4.crt
-````
+      - cert3.crt
+      - cert4.crt
+```
+
 </details>
 
 Behavior:
@@ -372,114 +380,115 @@ All available values are listed on the [artifacthub](https://artifacthub.io/pack
 
 ## Values
 
-| Key | Type | Default | Description |
-|-----|------|---------|-------------|
-| additionalObjects | list | `[]` | Additional resources to deploy. These objects are templated. |
-| affinity | object | `{}` | Node affinity for pod scheduling |
-| autoscaling.enabled | bool | `false` | Enable autoscaling |
-| autoscaling.maxReplicas | int | `100` | Maximum replicas |
-| autoscaling.minReplicas | int | `1` | Minimum replicas |
-| autoscaling.targetCPUUtilizationPercentage | int | `80` | Target CPU utilization for autoscaling |
-| containerPorts | object | `{"http":{"port":7575,"protocol":"TCP"}}` | containerPorts defines the ports to open on the container. It is a map where each entry specifies:    - `port`     (int)    (required): The port number to expose inside the container.    - `protocol` (string) (required): The network protocol (TCP or UDP) used for the port.    - `disabled` (bool)              : Optional flag to disable this port (defaults to false). Can be overridden via Helm values.  By default, this configuration exposes TCP port 7575 with the name `http`. |
-| database.migrationEnabled | bool | `true` | Database migration configuration. DB_MIGRATIONS_DISABLED Set to `true` to disable database migrations. Migrations are enabled by default (`false`). |
-| database.type | string | `"sqlite"` | Database type: sqlite, mysql or postgresql |
-| env.AUTH_COOKIE_PREFIX | string | `"homarr"` | Prefix used for all authentication cookies. Change if you run another Auth.js/NextAuth app on the same hostname to avoid cookie name collisions. Only letters, numbers, hyphens and underscores. |
-| env.AUTH_LDAP_BASE | string | `nil` | Base dn of your LDAP server |
-| env.AUTH_LDAP_BIND_DN | string | `nil` | User used for finding users and groups |
-| env.AUTH_LDAP_GROUP_CLASS | string | `"groupOfUniqueNames"` | Class used for querying groups |
-| env.AUTH_LDAP_GROUP_FILTER_EXTRA_ARG | string | `nil` | Extra arguments for user's groups search filter (& based) |
-| env.AUTH_LDAP_GROUP_MEMBER_ATTRIBUTE | string | `"member"` | Attribute used for querying group member |
-| env.AUTH_LDAP_GROUP_MEMBER_USER_ATTRIBUTE | string | `"dn"` | User attribute used for comparing with group member |
-| env.AUTH_LDAP_SEARCH_SCOPE | string | `"base"` | LDAP search scope between base, one or sub |
-| env.AUTH_LDAP_URI | string | `nil` | URI of your LDAP server |
-| env.AUTH_LDAP_USERNAME_ATTRIBUTE | string | `"uid"` | Attribute used for username |
-| env.AUTH_LDAP_USERNAME_FILTER_EXTRA_ARG | string | `nil` | Extra arguments for user search filter (& based) |
-| env.AUTH_LDAP_USER_MAIL_ATTRIBUTE | string | `"mail"` | Attribute used for mail field |
-| env.AUTH_LOGOUT_REDIRECT_URL | string | `nil` | URL to redirect to after clicking logging out. |
-| env.AUTH_OIDC_AUTO_LOGIN | string | `"false"` | Automatically redirect to OIDC login |
-| env.AUTH_OIDC_CLIENT_NAME | string | `"OIDC"` | Display name of provider (in login screen) |
-| env.AUTH_OIDC_GROUPS_ATTRIBUTE | string | `"groups"` | Attribute used for groups (roles) claim |
-| env.AUTH_OIDC_ISSUER | string | `nil` | Issuer URI of OIDC provider without trailing slash (/) |
-| env.AUTH_OIDC_NAME_ATTRIBUTE_OVERWRITE | string | `nil` | Overwrite name attribute. By default, it will use preferred_username if it does not contain a @ and otherwise name. |
-| env.AUTH_OIDC_SCOPE_OVERWRITE | string | `"openid email profile groups"` | Override the OIDC scopes |
-| env.AUTH_PROVIDERS | string | `"credentials"` | Enabled authentication methods. Multiple providers can be enabled with by separating them with , (ex. AUTH_PROVIDERS=credentials,oidc, it is highly recommended to just enable one provider). |
-| env.AUTH_SESSION_EXPIRY_TIME | string | `"30d"` | Time for the session to time out. Can be set as pure number, which will automatically be used in seconds, or followed by s, m, h or d for seconds, minutes, hours or days. (ex: "30m") |
-| env.ENABLE_DNS_CACHING | string | `"false"` | Enables dns caching. This is not yet working for all users. See #4006 |
-| env.LOG_LEVEL | string | `"info"` | Log level to use. Possible values: debug/info/warn/error |
-| env.NO_EXTERNAL_CONNECTION | string | `"false"` | Disables some requests that need internet connection |
-| env.TZ | string | `"Europe/Paris"` | Your local time zone |
-| envSecrets.authLdapCredentials.existingSecret | string | `"auth-ldap-secret"` | Name of existing secret containing LDAP credentials |
-| envSecrets.authLdapCredentials.ldapBindingPassword | string | `"bind-password"` | Password for bind user secret key |
-| envSecrets.authOidcCredentials.existingSecret | string | `"auth-oidc-secret"` | Name of existing secret containing OIDC credentials |
-| envSecrets.authOidcCredentials.oidcClientId | string | `"oidc-client-id"` | ID of OIDC client (application) secret key |
-| envSecrets.authOidcCredentials.oidcClientSecret | string | `"oidc-client-secret"` | Secret of OIDC client (application) secret key |
-| envSecrets.dbCredentials.dbUrlKey | string | `"db-url"` | Secret key for DB_URL Example for external database: `mysql://username:password@host:port/homarrdb` or `postgresql://username:password@host:port/homarrdb` |
-| envSecrets.dbCredentials.existingSecret | string | `"db-secret"` | Name of existing secret containing DB credentials |
-| envSecrets.dbEncryption.existingSecret | string | `"db-encryption"` | Name of existing secret containing DB encryption |
-| envSecrets.dbEncryption.key | string | `"db-encryption-key"` | Secret key for SECRET_ENCRYPTION_KEY can be generated with `openssl rand -hex 32` |
-| fullnameOverride | string | `""` | Overrides chart's fullname |
-| hostAliases | list | `[]` | Add static entries to /etc/hosts in the Pod. This is useful in the following cases: - You are running in a dual-stack cluster (IPv4 + IPv6) and want to force usage of IPv4 for specific hostnames - Your application is having DNS resolution issues or IPv6 preference issues - You need to override or simulate DNS entries without changing global DNS - You are running in an air-gapped or isolated environment without external DNS Example: hostAliases:   - ip: "192.168.1.10"     hostnames:       - "example.com"       - "example.internal" |
-| httproute | object | `{"enabled":false,"hostnames":["chart-example.local"],"parentRefs":[{"name":"my-gateway","namespace":"default"}],"rules":[{"backendRefs":[{"name":"homarr","port":7575}],"filters":[],"matches":[{"path":{"type":"PathPrefix","value":"/"}}]}]}` | Gateway API HTTPRoute configuration |
-| httproute.enabled | bool | `false` | Enable HTTPRoute |
-| httproute.hostnames | list | `["chart-example.local"]` | Hostnames this route matches (similar to ingress.hosts.host) |
-| httproute.parentRefs | list | `[{"name":"my-gateway","namespace":"default"}]` | References to the parent Gateway(s) this route attaches to. Each item must include at least a `name`, and optionally a `namespace`. |
-| httproute.rules | list | `[{"backendRefs":[{"name":"homarr","port":7575}],"filters":[],"matches":[{"path":{"type":"PathPrefix","value":"/"}}]}]` | List of routing rules. Each rule can include: - matches: path/header/query matching - filters: optional transformations (redirects, header modifications, etc.) - backendRefs: one or more Kubernetes Services to forward traffic to |
-| httproute.rules[0].filters | list | `[]` | Optional filters for this rule (default: empty) |
-| httproute.rules[0].matches[0].path.type | string | `"PathPrefix"` | Path match type. One of: Exact, PathPrefix, RegularExpression |
-| httproute.rules[0].matches[0].path.value | string | `"/"` | Path value to match |
-| image.pullPolicy | string | `"IfNotPresent"` | Image pull policy |
-| image.repository | string | `"ghcr.io/homarr-labs/homarr"` | Image repository |
-| image.tag | string | `"v1.73.0"` | Overrides the image tag whose default is the chart appVersion |
-| imagePullSecrets | list | `[]` | Secrets for Docker registry |
-| ingress.annotations | object | `{}` | Ingress annotations |
-| ingress.enabled | bool | `false` | Enable ingress |
-| ingress.hosts | list | `[{"host":"chart-example.local","paths":[{"path":"/"}]}]` | Ingress hosts configuration |
-| ingress.ingressClassName | string | `""` | Ingress class name |
-| ingress.tls | list | `[]` | Ingress TLS configuration |
-| livenessProbe.failureThreshold | int | `3` | Failure threshold for liveness probe - number of consecutive failures before pod is restarted |
-| livenessProbe.httpGet.path | string | `"/api/health/live"` | This is the liveness check endpoint used by Kubernetes to determine if the application is still running. |
-| livenessProbe.httpGet.port | int | `7575` | The port on which the liveness check will be performed. This must be the same as the container port exposed by the application. |
-| livenessProbe.initialDelaySeconds | int | `10` | Initial delay in seconds before the liveness probe starts |
-| livenessProbe.periodSeconds | int | `10` | Period in seconds between liveness probe checks |
-| livenessProbe.timeoutSeconds | int | `1` | Timeout in seconds for each liveness probe check |
-| nameOverride | string | `""` | Overrides chart's name |
-| nodeSelector | object | `{}` | Node selectors for pod scheduling |
-| persistence.homarrDatabase.accessMode | string | `"ReadWriteOnce"` | homarr-database access mode |
-| persistence.homarrDatabase.enabled | bool | `false` | Enable homarr-database persistent storage |
-| persistence.homarrDatabase.mountPath | string | `"/appdata"` | homarr-database mount path inside the pod |
-| persistence.homarrDatabase.name | string | `"homarr-database"` | homarr-database persistent storage name |
-| persistence.homarrDatabase.size | string | `"50Mi"` | homarr-database storage size |
-| persistence.homarrDatabase.storageClassName | string | `"local-path"` | homarr-database storage class name |
-| persistence.homarrDatabase.volumeClaimName | string | `""` | homarr-database optional volumeClaimName to target specific PV |
-| persistence.homarrTrustedCerts.certificates | string | `nil` | homarr-trusted-certificates certificates, each entry will become a new trusted certificate as a dedicated file (works only for "configmap" and "secret" mode) |
-| persistence.homarrTrustedCerts.enabled | bool | `false` | Enable trusted certificates persistence |
-| persistence.homarrTrustedCerts.existingSecretKeys | string | `nil` | List of keys (filenames) to mount from the existing secret (used only when type is "existingSecret") |
-| persistence.homarrTrustedCerts.existingSecretName | string | `""` | Name of the existing Kubernetes Secret to mount (required if type is "existingSecret") |
-| persistence.homarrTrustedCerts.mountPath | string | `"/appdata/trusted-certificates"` | homarr-trusted-certificates  mount path inside the pod |
-| persistence.homarrTrustedCerts.type | string | `"configmap"` | Persistence mode can be : configmap (declarative), secret (declarative) or existingSecret (mount an existing Kubernetes Secret by name and specify which keys to mount as files) |
-| podAnnotations | object | `{}` | Pod annotations |
-| podLabels | object | `{}` | Pod labels |
-| podSecurityContext | object | `{}` | Pod security context |
-| rbac | object | `{"enabled":false}` | Enable RBAC resources for Kubernetes integration Creates Role, ClusterRole, and associated bindings for Homarr's Kubernetes features |
-| rbac.enabled | bool | `false` | Enable to create RBAC resources and activate Kubernetes integration |
-| readinessProbe.failureThreshold | int | `3` | Failure threshold for readiness probe - number of consecutive failures before pod is considered unready |
-| readinessProbe.httpGet.path | string | `"/api/health/ready"` | This is the readiness check endpoint used by Kubernetes to determine if the application is ready to handle traffic. |
-| readinessProbe.httpGet.port | int | `7575` | The port on which the readiness check will be performed. This must match the container's exposed port. |
-| readinessProbe.initialDelaySeconds | int | `10` | Initial delay in seconds before the readiness probe starts. increase this value if the pod is slow to fully start. |
-| readinessProbe.periodSeconds | int | `10` | Period in seconds between readiness probe checks |
-| readinessProbe.timeoutSeconds | int | `1` | Timeout in seconds for each readiness probe check |
-| replicaCount | int | `1` | Number of replicas |
-| resources | object | `{}` | Resource configuration |
-| securityContext | object | `{}` | Security context |
-| service.enabled | bool | `true` | Enable service |
-| service.ipFamilies | list | `[]` | List of IP families to use for the service. Examples: - ["IPv4"] - ["IPv6"] - ["IPv4", "IPv6"] for dual-stack Leave empty to use cluster default behavior |
-| service.ipFamilyPolicy | string | `"SingleStack"` | Defines how the service assigns IP families (IPv4/IPv6) Possible values: - SingleStack (default): Only one IP family, usually IPv4 - PreferDualStack: Use dual-stack if the cluster supports it, fallback to single - RequireDualStack: Fail if dual-stack cannot be assigned |
-| service.ports.app.port | int | `7575` | Service port |
-| service.ports.app.protocol | string | `"TCP"` | Service protocol |
-| service.ports.app.targetPort | string | `"http"` | Service target port |
-| service.type | string | `"ClusterIP"` | Service type |
-| strategyType | string | `"RollingUpdate"` | `strategyType` specifies the strategy used to replace old Pods by new ones. `strategyType` can be `"Recreate"` or `"RollingUpdate"`. `"RollingUpdate"` is the default value and updates Pods in a rolling update fashion. `"Recreate"` will kill all existing Pods before new ones are created. The `"Recreate"` strategy is necessary when persistent volume's `accessMode` is set to `"ReadWriteOnce"` when using `helm upgrade`, as pod volume attachments to an existing PersistentVolumeClaim need to be cleared before a new pod can attach to it. |
-| tolerations | list | `[]` | Node tolerations for pod scheduling |
+| Key                                                | Type   | Default                                                                                                                                                                                                                                          | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| -------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| additionalObjects                                  | list   | `[]`                                                                                                                                                                                                                                             | Additional resources to deploy. These objects are templated.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| affinity                                           | object | `{}`                                                                                                                                                                                                                                             | Node affinity for pod scheduling                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| autoscaling.enabled                                | bool   | `false`                                                                                                                                                                                                                                          | Enable autoscaling                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| autoscaling.maxReplicas                            | int    | `100`                                                                                                                                                                                                                                            | Maximum replicas                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| autoscaling.minReplicas                            | int    | `1`                                                                                                                                                                                                                                              | Minimum replicas                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| autoscaling.targetCPUUtilizationPercentage         | int    | `80`                                                                                                                                                                                                                                             | Target CPU utilization for autoscaling                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| containerPorts                                     | object | `{"http":{"port":7575,"protocol":"TCP"}}`                                                                                                                                                                                                        | containerPorts defines the ports to open on the container. It is a map where each entry specifies: - `port` (int) (required): The port number to expose inside the container. - `protocol` (string) (required): The network protocol (TCP or UDP) used for the port. - `disabled` (bool) : Optional flag to disable this port (defaults to false). Can be overridden via Helm values. By default, this configuration exposes TCP port 7575 with the name `http`.                                                                                         |
+| database.migrationEnabled                          | bool   | `true`                                                                                                                                                                                                                                           | Database migration configuration. DB_MIGRATIONS_DISABLED Set to `true` to disable database migrations. Migrations are enabled by default (`false`).                                                                                                                                                                                                                                                                                                                                                                                                      |
+| database.type                                      | string | `"sqlite"`                                                                                                                                                                                                                                       | Database type: sqlite, mysql or postgresql                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| env.AUTH_COOKIE_PREFIX                             | string | `"homarr"`                                                                                                                                                                                                                                       | Prefix used for all authentication cookies. Change if you run another Auth.js/NextAuth app on the same hostname to avoid cookie name collisions. Only letters, numbers, hyphens and underscores.                                                                                                                                                                                                                                                                                                                                                         |
+| env.AUTH_LDAP_BASE                                 | string | `nil`                                                                                                                                                                                                                                            | Base dn of your LDAP server                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| env.AUTH_LDAP_BIND_DN                              | string | `nil`                                                                                                                                                                                                                                            | User used for finding users and groups                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| env.AUTH_LDAP_GROUP_CLASS                          | string | `"groupOfUniqueNames"`                                                                                                                                                                                                                           | Class used for querying groups                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| env.AUTH_LDAP_GROUP_FILTER_EXTRA_ARG               | string | `nil`                                                                                                                                                                                                                                            | Extra arguments for user's groups search filter (& based)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| env.AUTH_LDAP_GROUP_MEMBER_ATTRIBUTE               | string | `"member"`                                                                                                                                                                                                                                       | Attribute used for querying group member                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| env.AUTH_LDAP_GROUP_MEMBER_USER_ATTRIBUTE          | string | `"dn"`                                                                                                                                                                                                                                           | User attribute used for comparing with group member                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| env.AUTH_LDAP_SEARCH_SCOPE                         | string | `"base"`                                                                                                                                                                                                                                         | LDAP search scope between base, one or sub                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| env.AUTH_LDAP_URI                                  | string | `nil`                                                                                                                                                                                                                                            | URI of your LDAP server                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| env.AUTH_LDAP_USERNAME_ATTRIBUTE                   | string | `"uid"`                                                                                                                                                                                                                                          | Attribute used for username                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| env.AUTH_LDAP_USERNAME_FILTER_EXTRA_ARG            | string | `nil`                                                                                                                                                                                                                                            | Extra arguments for user search filter (& based)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| env.AUTH_LDAP_USER_MAIL_ATTRIBUTE                  | string | `"mail"`                                                                                                                                                                                                                                         | Attribute used for mail field                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| env.AUTH_LOGOUT_REDIRECT_URL                       | string | `nil`                                                                                                                                                                                                                                            | URL to redirect to after clicking logging out.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| env.AUTH_OIDC_AUTO_LOGIN                           | string | `"false"`                                                                                                                                                                                                                                        | Automatically redirect to OIDC login                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| env.AUTH_OIDC_CLIENT_NAME                          | string | `"OIDC"`                                                                                                                                                                                                                                         | Display name of provider (in login screen)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| env.AUTH_OIDC_GROUPS_ATTRIBUTE                     | string | `"groups"`                                                                                                                                                                                                                                       | Attribute used for groups (roles) claim                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| env.AUTH_OIDC_ISSUER                               | string | `nil`                                                                                                                                                                                                                                            | Issuer URI of OIDC provider without trailing slash (/)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| env.AUTH_OIDC_NAME_ATTRIBUTE_OVERWRITE             | string | `nil`                                                                                                                                                                                                                                            | Overwrite name attribute. By default, it will use preferred_username if it does not contain a @ and otherwise name.                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| env.AUTH_OIDC_SCOPE_OVERWRITE                      | string | `"openid email profile groups"`                                                                                                                                                                                                                  | Override the OIDC scopes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| env.AUTH_PROVIDERS                                 | string | `"credentials"`                                                                                                                                                                                                                                  | Enabled authentication methods. Multiple providers can be enabled with by separating them with , (ex. AUTH_PROVIDERS=credentials,oidc, it is highly recommended to just enable one provider).                                                                                                                                                                                                                                                                                                                                                            |
+| env.AUTH_SESSION_EXPIRY_TIME                       | string | `"30d"`                                                                                                                                                                                                                                          | Time for the session to time out. Can be set as pure number, which will automatically be used in seconds, or followed by s, m, h or d for seconds, minutes, hours or days. (ex: "30m")                                                                                                                                                                                                                                                                                                                                                                   |
+| env.ENABLE_DNS_CACHING                             | string | `"false"`                                                                                                                                                                                                                                        | Enables dns caching. This is not yet working for all users. See #4006                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| env.LOG_LEVEL                                      | string | `"info"`                                                                                                                                                                                                                                         | Log level to use. Possible values: debug/info/warn/error                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| env.NO_EXTERNAL_CONNECTION                         | string | `"false"`                                                                                                                                                                                                                                        | Disables some requests that need internet connection                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| env.TZ                                             | string | `"Europe/Paris"`                                                                                                                                                                                                                                 | Your local time zone                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| envSecrets.authLdapCredentials.existingSecret      | string | `"auth-ldap-secret"`                                                                                                                                                                                                                             | Name of existing secret containing LDAP credentials                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| envSecrets.authLdapCredentials.ldapBindingPassword | string | `"bind-password"`                                                                                                                                                                                                                                | Password for bind user secret key                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| envSecrets.authOidcCredentials.existingSecret      | string | `"auth-oidc-secret"`                                                                                                                                                                                                                             | Name of existing secret containing OIDC credentials                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| envSecrets.authOidcCredentials.oidcClientId        | string | `"oidc-client-id"`                                                                                                                                                                                                                               | ID of OIDC client (application) secret key                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| envSecrets.authOidcCredentials.oidcClientSecret    | string | `"oidc-client-secret"`                                                                                                                                                                                                                           | Secret of OIDC client (application) secret key                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| envSecrets.dbCredentials.dbUrlKey                  | string | `"db-url"`                                                                                                                                                                                                                                       | Secret key for DB_URL Example for external database: `mysql://username:password@host:port/homarrdb` or `postgresql://username:password@host:port/homarrdb`                                                                                                                                                                                                                                                                                                                                                                                               |
+| envSecrets.dbCredentials.existingSecret            | string | `"db-secret"`                                                                                                                                                                                                                                    | Name of existing secret containing DB credentials                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| envSecrets.dbEncryption.existingSecret             | string | `"db-encryption"`                                                                                                                                                                                                                                | Name of existing secret containing DB encryption                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| envSecrets.dbEncryption.key                        | string | `"db-encryption-key"`                                                                                                                                                                                                                            | Secret key for SECRET_ENCRYPTION_KEY can be generated with `openssl rand -hex 32`                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| fullnameOverride                                   | string | `""`                                                                                                                                                                                                                                             | Overrides chart's fullname                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| hostAliases                                        | list   | `[]`                                                                                                                                                                                                                                             | Add static entries to /etc/hosts in the Pod. This is useful in the following cases: - You are running in a dual-stack cluster (IPv4 + IPv6) and want to force usage of IPv4 for specific hostnames - Your application is having DNS resolution issues or IPv6 preference issues - You need to override or simulate DNS entries without changing global DNS - You are running in an air-gapped or isolated environment without external DNS Example: hostAliases: - ip: "192.168.1.10" hostnames: - "example.com" - "example.internal"                    |
+| httproute                                          | object | `{"enabled":false,"hostnames":["chart-example.local"],"parentRefs":[{"name":"my-gateway","namespace":"default"}],"rules":[{"backendRefs":[{"name":"homarr","port":7575}],"filters":[],"matches":[{"path":{"type":"PathPrefix","value":"/"}}]}]}` | Gateway API HTTPRoute configuration                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| httproute.enabled                                  | bool   | `false`                                                                                                                                                                                                                                          | Enable HTTPRoute                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| httproute.hostnames                                | list   | `["chart-example.local"]`                                                                                                                                                                                                                        | Hostnames this route matches (similar to ingress.hosts.host)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| httproute.parentRefs                               | list   | `[{"name":"my-gateway","namespace":"default"}]`                                                                                                                                                                                                  | References to the parent Gateway(s) this route attaches to. Each item must include at least a `name`, and optionally a `namespace`.                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| httproute.rules                                    | list   | `[{"backendRefs":[{"name":"homarr","port":7575}],"filters":[],"matches":[{"path":{"type":"PathPrefix","value":"/"}}]}]`                                                                                                                          | List of routing rules. Each rule can include: - matches: path/header/query matching - filters: optional transformations (redirects, header modifications, etc.) - backendRefs: one or more Kubernetes Services to forward traffic to                                                                                                                                                                                                                                                                                                                     |
+| httproute.rules[0].filters                         | list   | `[]`                                                                                                                                                                                                                                             | Optional filters for this rule (default: empty)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| httproute.rules[0].matches[0].path.type            | string | `"PathPrefix"`                                                                                                                                                                                                                                   | Path match type. One of: Exact, PathPrefix, RegularExpression                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| httproute.rules[0].matches[0].path.value           | string | `"/"`                                                                                                                                                                                                                                            | Path value to match                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| image.pullPolicy                                   | string | `"IfNotPresent"`                                                                                                                                                                                                                                 | Image pull policy                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| image.repository                                   | string | `"ghcr.io/homarr-labs/homarr"`                                                                                                                                                                                                                   | Image repository                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| image.tag                                          | string | `"v1.74.0"`                                                                                                                                                                                                                                      | Overrides the image tag whose default is the chart appVersion                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| imagePullSecrets                                   | list   | `[]`                                                                                                                                                                                                                                             | Secrets for Docker registry                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| ingress.annotations                                | object | `{}`                                                                                                                                                                                                                                             | Ingress annotations                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| ingress.enabled                                    | bool   | `false`                                                                                                                                                                                                                                          | Enable ingress                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| ingress.hosts                                      | list   | `[{"host":"chart-example.local","paths":[{"path":"/"}]}]`                                                                                                                                                                                        | Ingress hosts configuration                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| ingress.ingressClassName                           | string | `""`                                                                                                                                                                                                                                             | Ingress class name                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ingress.tls                                        | list   | `[]`                                                                                                                                                                                                                                             | Ingress TLS configuration                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| livenessProbe.failureThreshold                     | int    | `3`                                                                                                                                                                                                                                              | Failure threshold for liveness probe - number of consecutive failures before pod is restarted                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| livenessProbe.httpGet.path                         | string | `"/api/health/live"`                                                                                                                                                                                                                             | This is the liveness check endpoint used by Kubernetes to determine if the application is still running.                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| livenessProbe.httpGet.port                         | int    | `7575`                                                                                                                                                                                                                                           | The port on which the liveness check will be performed. This must be the same as the container port exposed by the application.                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| livenessProbe.initialDelaySeconds                  | int    | `10`                                                                                                                                                                                                                                             | Initial delay in seconds before the liveness probe starts                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| livenessProbe.periodSeconds                        | int    | `10`                                                                                                                                                                                                                                             | Period in seconds between liveness probe checks                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| livenessProbe.timeoutSeconds                       | int    | `1`                                                                                                                                                                                                                                              | Timeout in seconds for each liveness probe check                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| nameOverride                                       | string | `""`                                                                                                                                                                                                                                             | Overrides chart's name                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| nodeSelector                                       | object | `{}`                                                                                                                                                                                                                                             | Node selectors for pod scheduling                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| persistence.homarrDatabase.accessMode              | string | `"ReadWriteOnce"`                                                                                                                                                                                                                                | homarr-database access mode                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| persistence.homarrDatabase.enabled                 | bool   | `false`                                                                                                                                                                                                                                          | Enable homarr-database persistent storage                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| persistence.homarrDatabase.mountPath               | string | `"/appdata"`                                                                                                                                                                                                                                     | homarr-database mount path inside the pod                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| persistence.homarrDatabase.name                    | string | `"homarr-database"`                                                                                                                                                                                                                              | homarr-database persistent storage name                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| persistence.homarrDatabase.size                    | string | `"50Mi"`                                                                                                                                                                                                                                         | homarr-database storage size                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| persistence.homarrDatabase.storageClassName        | string | `"local-path"`                                                                                                                                                                                                                                   | homarr-database storage class name                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| persistence.homarrDatabase.volumeClaimName         | string | `""`                                                                                                                                                                                                                                             | homarr-database optional volumeClaimName to target specific PV                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| persistence.homarrTrustedCerts.certificates        | string | `nil`                                                                                                                                                                                                                                            | homarr-trusted-certificates certificates, each entry will become a new trusted certificate as a dedicated file (works only for "configmap" and "secret" mode)                                                                                                                                                                                                                                                                                                                                                                                            |
+| persistence.homarrTrustedCerts.enabled             | bool   | `false`                                                                                                                                                                                                                                          | Enable trusted certificates persistence                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| persistence.homarrTrustedCerts.existingSecretKeys  | string | `nil`                                                                                                                                                                                                                                            | List of keys (filenames) to mount from the existing secret (used only when type is "existingSecret")                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| persistence.homarrTrustedCerts.existingSecretName  | string | `""`                                                                                                                                                                                                                                             | Name of the existing Kubernetes Secret to mount (required if type is "existingSecret")                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| persistence.homarrTrustedCerts.mountPath           | string | `"/appdata/trusted-certificates"`                                                                                                                                                                                                                | homarr-trusted-certificates mount path inside the pod                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| persistence.homarrTrustedCerts.type                | string | `"configmap"`                                                                                                                                                                                                                                    | Persistence mode can be : configmap (declarative), secret (declarative) or existingSecret (mount an existing Kubernetes Secret by name and specify which keys to mount as files)                                                                                                                                                                                                                                                                                                                                                                         |
+| podAnnotations                                     | object | `{}`                                                                                                                                                                                                                                             | Pod annotations                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| podLabels                                          | object | `{}`                                                                                                                                                                                                                                             | Pod labels                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| podSecurityContext                                 | object | `{}`                                                                                                                                                                                                                                             | Pod security context                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| rbac                                               | object | `{"enabled":false}`                                                                                                                                                                                                                              | Enable RBAC resources for Kubernetes integration Creates Role, ClusterRole, and associated bindings for Homarr's Kubernetes features                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| rbac.enabled                                       | bool   | `false`                                                                                                                                                                                                                                          | Enable to create RBAC resources and activate Kubernetes integration                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| readinessProbe.failureThreshold                    | int    | `3`                                                                                                                                                                                                                                              | Failure threshold for readiness probe - number of consecutive failures before pod is considered unready                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| readinessProbe.httpGet.path                        | string | `"/api/health/ready"`                                                                                                                                                                                                                            | This is the readiness check endpoint used by Kubernetes to determine if the application is ready to handle traffic.                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| readinessProbe.httpGet.port                        | int    | `7575`                                                                                                                                                                                                                                           | The port on which the readiness check will be performed. This must match the container's exposed port.                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| readinessProbe.initialDelaySeconds                 | int    | `10`                                                                                                                                                                                                                                             | Initial delay in seconds before the readiness probe starts. increase this value if the pod is slow to fully start.                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| readinessProbe.periodSeconds                       | int    | `10`                                                                                                                                                                                                                                             | Period in seconds between readiness probe checks                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| readinessProbe.timeoutSeconds                      | int    | `1`                                                                                                                                                                                                                                              | Timeout in seconds for each readiness probe check                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| replicaCount                                       | int    | `1`                                                                                                                                                                                                                                              | Number of replicas                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| resources                                          | object | `{}`                                                                                                                                                                                                                                             | Resource configuration                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| securityContext                                    | object | `{}`                                                                                                                                                                                                                                             | Security context                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| service.enabled                                    | bool   | `true`                                                                                                                                                                                                                                           | Enable service                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| service.ipFamilies                                 | list   | `[]`                                                                                                                                                                                                                                             | List of IP families to use for the service. Examples: - ["IPv4"] - ["IPv6"] - ["IPv4", "IPv6"] for dual-stack Leave empty to use cluster default behavior                                                                                                                                                                                                                                                                                                                                                                                                |
+| service.ipFamilyPolicy                             | string | `"SingleStack"`                                                                                                                                                                                                                                  | Defines how the service assigns IP families (IPv4/IPv6) Possible values: - SingleStack (default): Only one IP family, usually IPv4 - PreferDualStack: Use dual-stack if the cluster supports it, fallback to single - RequireDualStack: Fail if dual-stack cannot be assigned                                                                                                                                                                                                                                                                            |
+| service.ports.app.port                             | int    | `7575`                                                                                                                                                                                                                                           | Service port                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| service.ports.app.protocol                         | string | `"TCP"`                                                                                                                                                                                                                                          | Service protocol                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| service.ports.app.targetPort                       | string | `"http"`                                                                                                                                                                                                                                         | Service target port                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| service.type                                       | string | `"ClusterIP"`                                                                                                                                                                                                                                    | Service type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| strategyType                                       | string | `"RollingUpdate"`                                                                                                                                                                                                                                | `strategyType` specifies the strategy used to replace old Pods by new ones. `strategyType` can be `"Recreate"` or `"RollingUpdate"`. `"RollingUpdate"` is the default value and updates Pods in a rolling update fashion. `"Recreate"` will kill all existing Pods before new ones are created. The `"Recreate"` strategy is necessary when persistent volume's `accessMode` is set to `"ReadWriteOnce"` when using `helm upgrade`, as pod volume attachments to an existing PersistentVolumeClaim need to be cleared before a new pod can attach to it. |
+| tolerations                                        | list   | `[]`                                                                                                                                                                                                                                             | Node tolerations for pod scheduling                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 
 ---
+
 Autogenerated from chart metadata using [helm-docs](https://github.com/norwoodj/helm-docs)
diff --git a/apps/docs/docs/getting-started/installation/home-assistant.mdx b/apps/docs/docs/getting-started/installation/home-assistant.mdx
index 9f5a50f52..9ba9c5d01 100644
--- a/apps/docs/docs/getting-started/installation/home-assistant.mdx
+++ b/apps/docs/docs/getting-started/installation/home-assistant.mdx
@@ -14,7 +14,7 @@ Homarr can be seamlessly integrated into your Home Assistant setup with this add
 ## Installation
 
 1. **Add Repository**: Navigate to your Home Assistant Supervisor panel, and go to the Add-on Store. Add the following repository URL: `https://github.com/Wiggen94/ha-homarr-v1-server` or click this button
-[![Open your Home Assistant instance and show the add add-on repository dialog with a specific repository URL pre-filled.](https://my.home-assistant.io/badges/supervisor_add_addon_repository.svg)](https://my.home-assistant.io/redirect/supervisor_add_addon_repository/?repository_url=https%3A%2F%2Fgithub.com%2FWiggen94%2Fha-homarr-v1-server)
+   [![Open your Home Assistant instance and show the add add-on repository dialog with a specific repository URL pre-filled.](https://my.home-assistant.io/badges/supervisor_add_addon_repository.svg)](https://my.home-assistant.io/redirect/supervisor_add_addon_repository/?repository_url=https%3A%2F%2Fgithub.com%2FWiggen94%2Fha-homarr-v1-server)
 
 2. **Install the Add-on**: Search for "Homarr Server" in the Add-on Store and select it. Click on "Install" to start the installation process.
 
diff --git a/apps/docs/docs/getting-started/installation/portainer.mdx b/apps/docs/docs/getting-started/installation/portainer.mdx
index f816d77fe..0442b215e 100644
--- a/apps/docs/docs/getting-started/installation/portainer.mdx
+++ b/apps/docs/docs/getting-started/installation/portainer.mdx
@@ -1,5 +1,7 @@
 # Portainer
+
 ## Portainer Stacks
+
 ### Prerequisites
 
 - [Portainer Stacks](https://www.portainer.io/blog/stacks-docker-compose-the-portainer-way)
@@ -23,15 +25,14 @@ services:
     environment:
       - SECRET_ENCRYPTION_KEY=your_64_character_hex_string # <--- can be generated with `openssl rand -hex 32`
     ports:
-      - '7575:7575'
+      - "7575:7575"
 ```
 
-
 :::note
-Portainer will mount the files to your host machine. Please make sure to replace ``<your-path>`` from the docker run command with your desired storage location. The path must be absolute.
+Portainer will mount the files to your host machine. Please make sure to replace `<your-path>` from the docker run command with your desired storage location. The path must be absolute.
 :::
 
-Then, click on ``Deploy the stack`` and wait until the container has started.
+Then, click on `Deploy the stack` and wait until the container has started.
 
 :::tip
 
@@ -43,5 +44,5 @@ If you're unsure how to create a stack, checkout the [Portainer Documentation](h
 
 To update Homarr using Docker Compose or Portainer Stacks, simply pull the latest image and restart the container.
 
-1. Run ``docker pull ghcr.io/homarr-labs/homarr:latest`` to pull the latest image.
-2. Re-run ``docker-compose up -d`` or re-deploy the stack in Portainer.
+1. Run `docker pull ghcr.io/homarr-labs/homarr:latest` to pull the latest image.
+2. Re-run `docker-compose up -d` or re-deploy the stack in Portainer.
diff --git a/apps/docs/docs/getting-started/installation/proxmox.mdx b/apps/docs/docs/getting-started/installation/proxmox.mdx
index f6f5fb120..bd33b4040 100644
--- a/apps/docs/docs/getting-started/installation/proxmox.mdx
+++ b/apps/docs/docs/getting-started/installation/proxmox.mdx
@@ -31,7 +31,7 @@ After you've installed Homarr, you can find a new LXC "homarr".
 
 # Updating
 
-Updating is as simple as executing 
+Updating is as simple as executing
 
 ```bash
 update
@@ -49,17 +49,19 @@ Some Homarr features require setting environment variables. When installing Homa
 
 # Troubleshooting
 
-If something does not work after an update, please first try rebooting the LXC or the homarr Service with 
+If something does not work after an update, please first try rebooting the LXC or the homarr Service with
 
 ```bash
 systemctl restart homarr
 ```
 
 # Getting help
+
 - If you are looking for help with the script, updating the LXC or troubleshooting the installer, please get in contact with the support of the community scripts. They provide support on their [Discord](https://discord.gg/2wvnMDgdnU). If you found vulnerabilities, bugs or have a request for the script, [create a new issue here](https://github.com/community-scripts/ProxmoxVE/issues/new/choose).
 - If you are looking to report a bug, vulnerability or request a new feature, use https://github.com/homarr-labs/homarr . You can ask for help on our Discord.
 
 # How to find logs
+
 Homarr runs under a system service called `homarr`, so getting the logs is a simple as using the following command inside the LXC (Container) Shell
 
 ```bash
diff --git a/apps/docs/docs/getting-started/installation/qnap.mdx b/apps/docs/docs/getting-started/installation/qnap.mdx
index a655db5b3..b8c1f977b 100644
--- a/apps/docs/docs/getting-started/installation/qnap.mdx
+++ b/apps/docs/docs/getting-started/installation/qnap.mdx
@@ -4,6 +4,6 @@
 QNAP installation guide has not updated to 1.0 yet. There guide is still for 0.15.10.
 :::
 
-When installing on QNAP, we recommend you to install Homarr using [Container Station]( https://www.qnap.com/en/software/container-station) or [this third-party image](https://www.myqnap.org/product/homarr/).
+When installing on QNAP, we recommend you to install Homarr using [Container Station](https://www.qnap.com/en/software/container-station) or [this third-party image](https://www.myqnap.org/product/homarr/).
 
 There is also a guide available, but note that it is written in Chinese: https://post.smzdm.com/p/awzm7op2/
diff --git a/apps/docs/docs/getting-started/installation/runtipi.mdx b/apps/docs/docs/getting-started/installation/runtipi.mdx
index 53a669c90..c2b2823b7 100644
--- a/apps/docs/docs/getting-started/installation/runtipi.mdx
+++ b/apps/docs/docs/getting-started/installation/runtipi.mdx
@@ -1,4 +1,4 @@
-#  Runtipi
+# Runtipi
 
 Runtipi is a self-hosted orchestrator that makes it easy to manage and run multiple services on a single server. It is based on Docker and comes with a simple web interface to manage your services. Runtipi is designed to be easy to use, so you don't have to worry about manual configuration or networking.
 
@@ -11,6 +11,7 @@ https://runtipi.io
 # Installation
 
 Installing Homarr is pretty untuitive, the app is available in the default appstore :
+
 1. Search for **"Homarr"** in the App-Store page and select it
 2. Click on **"Install"**.
 3. Choose the method you want to access Homarr, through any port or domain name then select **"Install"**
@@ -18,13 +19,15 @@ Installing Homarr is pretty untuitive, the app is available in the default appst
 # Maintenance
 
 After installation, all you need is available from the WebUI in **"My apps"** > **"Homarr"** :
- - Start/Stop
- - Update
- - Backup
- - Logs
- 
+
+- Start/Stop
+- Update
+- Backup
+- Logs
+
 If you like to tinker with your apps, you can also edit your app's docker-compose with a [user-config](https://runtipi.io/docs/guides/customize-app-config).
 
 # Getting help
+
 - If you are looking for help with anything in Runtipi. They provide support on their [Discord](https://discord.gg/Bu9qEPnHsc) and [forums](https://forums.runtipi.io/). If you found vulnerabilities or bugs, [create a new issue here](https://github.com/runtipi/runtipi-appstore/issues).
-- If you are looking to report a bug, vulnerability or request a new feature for Homarr, use https://github.com/homarr-labs/homarr . You can ask for help on our Discord.
\ No newline at end of file
+- If you are looking to report a bug, vulnerability or request a new feature for Homarr, use https://github.com/homarr-labs/homarr . You can ask for help on our Discord.
diff --git a/apps/docs/docs/getting-started/installation/saltbox.mdx b/apps/docs/docs/getting-started/installation/saltbox.mdx
index 2f284d72b..88805eafb 100644
--- a/apps/docs/docs/getting-started/installation/saltbox.mdx
+++ b/apps/docs/docs/getting-started/installation/saltbox.mdx
@@ -5,6 +5,7 @@ Saltbox installation command has not updated to 1.0 yet. There command still run
 :::
 
 You can also use this to install on Saltbox:
+
 ```bash
 sb install sandbox-homarr
-```
\ No newline at end of file
+```
diff --git a/apps/docs/docs/getting-started/installation/source.mdx b/apps/docs/docs/getting-started/installation/source.mdx
index 933b264dd..838f0d0a2 100644
--- a/apps/docs/docs/getting-started/installation/source.mdx
+++ b/apps/docs/docs/getting-started/installation/source.mdx
@@ -28,15 +28,29 @@ This method is only useful, when you want to develop on Homarr or extend it with
 ## Steps
 
 <ol>
-  <li>Clone the Repository using <code>git clone https://github.com/homarr-labs/homarr.git</code></li>
-  <li>Enter the created directory using <code>cd homarr</code></li>
-  <li>Install all dependencies using <code>pnpm install</code></li>
-  <li>Copy the `.env.example` file to `.env` and replace `DB_URL` with the full path you want to use for the sqlite database file. For example `DB_URL='/home/username/homarr/db.sqlite`</li>
-  <li>Replace `AUTH_SECRET` and `SECRET_ENCRYPTION_KEY` both with a secure random string by using `openssl rand -hex 32`</li>
+  <li>
+    Clone the Repository using <code>git clone https://github.com/homarr-labs/homarr.git</code>
+  </li>
+  <li>
+    Enter the created directory using <code>cd homarr</code>
+  </li>
+  <li>
+    Install all dependencies using <code>pnpm install</code>
+  </li>
+  <li>
+    Copy the `.env.example` file to `.env` and replace `DB_URL` with the full path you want to use for the sqlite
+    database file. For example `DB_URL='/home/username/homarr/db.sqlite`
+  </li>
+  <li>
+    Replace `AUTH_SECRET` and `SECRET_ENCRYPTION_KEY` both with a secure random string by using `openssl rand -hex 32`
+  </li>
   <li>Replace `CRON_JOB_API_KEY` with a secure random string by using `openssl rand -base64 32`</li>
   <li>Run `pnpm run db:migration:sqlite:run` and wait that it completes</li>
   <li>Build the source using `pnpm build`</li>
-  <li>Copy better-sqlite3.node files with `mkdir build` and `cp ./node_modules/better-sqlite3/build/Release/better_sqlite3.node ./build/better_sqlite3.node`</li>
+  <li>
+    Copy better-sqlite3.node files with `mkdir build` and `cp
+    ./node_modules/better-sqlite3/build/Release/better_sqlite3.node ./build/better_sqlite3.node`
+  </li>
   <li>Start a redis server using `redis-server`</li>
   <li>Run the server using `pnpm start`</li>
   <li>Open `http://localhost:3000` in your browser</li>
diff --git a/apps/docs/docs/getting-started/installation/unraid.mdx b/apps/docs/docs/getting-started/installation/unraid.mdx
index 5fa7cc9b0..18588c5d4 100644
--- a/apps/docs/docs/getting-started/installation/unraid.mdx
+++ b/apps/docs/docs/getting-started/installation/unraid.mdx
@@ -1,5 +1,5 @@
-import Link from '@docusaurus/Link';
-import { IconDownload } from '@tabler/icons-react';
+import Link from "@docusaurus/Link";
+import { IconDownload } from "@tabler/icons-react";
 
 # Unraid
 
@@ -14,17 +14,17 @@ You can install Homarr directly from your Unraid Dashboard, no terminal required
 
 <Link
   data-attr="Install Unraid Community Apps"
-  className={'button button--secondary button--lg rounded-3xl dark:border-zinc-600 dark:bg-zinc-800'}
+  className={"button button--secondary button--lg rounded-3xl dark:border-zinc-600 dark:bg-zinc-800"}
   to="https://forums.unraid.net/topic/38582-plug-in-community-applications/"
 >
-  <div className={'flex items-center gap-3'}>
+  <div className={"flex items-center gap-3"}>
     <span className={"dark:text-gray-200"}>Install community applications plugin</span>
     <IconDownload className={"dark:text-gray-200"} size={20} />
   </div>
 </Link>
 
-<br/>
-<br/>
+<br />
+<br />
 
 :::tip
 
@@ -46,4 +46,3 @@ After you've installed the Community Apps Plugin, you can install Homarr from th
 After you've installed Homarr, you can find it under the tab "Docker".
 
 The official support thread is located [here](https://forums.unraid.net/topic/123478-support-smartphonelover-homarr/), but we prefer to communicate over GitHub and Discord instead.
-
diff --git a/apps/docs/docs/integrations/adguard-home/index.mdx b/apps/docs/docs/integrations/adguard-home/index.mdx
index b4cb6cdb6..52b26f66f 100644
--- a/apps/docs/docs/integrations/adguard-home/index.mdx
+++ b/apps/docs/docs/integrations/adguard-home/index.mdx
@@ -1,37 +1,44 @@
 ---
-title: 'AdGuard Home'
+title: "AdGuard Home"
 description: "AdGuard Home is a network-wide software for blocking ads and trackers, providing a safer and faster internet experience."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconAd, IconDeviceGamepad } from "@tabler/icons-react";
-import { adguardHomeIntegration } from '.';
-import { dnsHoleSummaryWidget } from '@site/docs/widgets/dns-hole-summary';
-import { dnsHoleControlsWidget } from '@site/docs/widgets/dns-hole-controls';
+import { adguardHomeIntegration } from ".";
+import { dnsHoleSummaryWidget } from "@site/docs/widgets/dns-hole-summary";
+import { dnsHoleControlsWidget } from "@site/docs/widgets/dns-hole-controls";
 
-<IntegrationHeader
-    integration={adguardHomeIntegration}
-    categories={['DNS Hole']}
-/>
+<IntegrationHeader integration={adguardHomeIntegration} categories={["DNS Hole"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: dnsHoleSummaryWidget,
-    },{
-        widget: dnsHoleControlsWidget
-    }]}
+  items={[
+    {
+      widget: dnsHoleSummaryWidget,
+    },
+    {
+      widget: dnsHoleControlsWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['username', 'password'],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["username", "password"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/anchor/index.mdx b/apps/docs/docs/integrations/anchor/index.mdx
index e4d897767..2e43195cc 100644
--- a/apps/docs/docs/integrations/anchor/index.mdx
+++ b/apps/docs/docs/integrations/anchor/index.mdx
@@ -1,40 +1,45 @@
 ---
-title: 'Anchor'
+title: "Anchor"
 description: "Anchor is a self-hosted note-taking application."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { anchorIntegration } from '.';
-import { anchorNoteWidget } from '@site/docs/widgets/anchor-note';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { anchorIntegration } from ".";
+import { anchorNoteWidget } from "@site/docs/widgets/anchor-note";
 
-
-<IntegrationHeader
-  integration={anchorIntegration}
-  categories={['Notes']}
-/>
+<IntegrationHeader integration={anchorIntegration} categories={["Notes"]} />
 
 The Anchor integration lets Homarr connect to your Anchor instance so you can display and edit selected notes directly from your dashboard.
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-  items={[{
-    widget: anchorNoteWidget
-  }]}
+  items={[
+    {
+      widget: anchorNoteWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-  credentials: ['apiKey'],
-  steps: [
-    'Open your Anchor instance.',
-    'Generate or copy an API key from Anchor settings.',
-    'Paste that key into the API Key secret field in Homarr.'
-  ]
-}]} />
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [
+        "Open your Anchor instance.",
+        "Generate or copy an API key from Anchor settings.",
+        "Paste that key into the API Key secret field in Homarr.",
+      ],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/aria2/index.mdx b/apps/docs/docs/integrations/aria2/index.mdx
index 9950fec2f..8ec92a5d0 100644
--- a/apps/docs/docs/integrations/aria2/index.mdx
+++ b/apps/docs/docs/integrations/aria2/index.mdx
@@ -1,38 +1,43 @@
 ---
-title: 'Aria2'
+title: "Aria2"
 description: "Lightweight multiprotocol & multi-source command-line download utility. It supports HTTP/HTTPS, FTP, SFTP, BitTorrent and Metalink"
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { aria2Integration } from '.';
-import { downloadsWidget } from '@site/docs/widgets/downloads';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { aria2Integration } from ".";
+import { downloadsWidget } from "@site/docs/widgets/downloads";
 
-<IntegrationHeader
-  integration={aria2Integration}
-  categories={['Download', 'Multiprotocol', 'Multi-source']}
-/>
+<IntegrationHeader integration={aria2Integration} categories={["Download", "Multiprotocol", "Multi-source"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-  items={[{
-    widget: downloadsWidget,
-  }]}
+  items={[
+    {
+      widget: downloadsWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[
-  {
-    credentials: ['apiKey'],
-    steps: []
-  },
-  {
-    credentials: [],
-    steps: []
-  }]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+    {
+      credentials: [],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/audiobookshelf/index.mdx b/apps/docs/docs/integrations/audiobookshelf/index.mdx
index 156525ba5..a052d2fff 100644
--- a/apps/docs/docs/integrations/audiobookshelf/index.mdx
+++ b/apps/docs/docs/integrations/audiobookshelf/index.mdx
@@ -1,41 +1,40 @@
 ---
-title: 'Audiobookshelf'
+title: "Audiobookshelf"
 description: "Audiobookshelf is a self-hosted audiobook and podcast server that lets you manage and stream your audio library."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { audiobookshelfIntegration } from '.';
-import { audioStatsWidget } from '@site/docs/widgets/audio-stats';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { audiobookshelfIntegration } from ".";
+import { audioStatsWidget } from "@site/docs/widgets/audio-stats";
 
-
-<IntegrationHeader
-    integration={audiobookshelfIntegration}
-    categories={['Media']}
-/>
+<IntegrationHeader integration={audiobookshelfIntegration} categories={["Media"]} />
 
 Audiobookshelf provides library statistics including audiobook and podcast counts, listening time, and active sessions.
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[
-        { widget: audioStatsWidget },
-    ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: audioStatsWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: [
-        'Open your Audiobookshelf instance',
-        'Go to Settings → Users',
-        'Click on your user account',
-        'Copy the API token from the user details',
-    ]
-}]} />
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [
+        "Open your Audiobookshelf instance",
+        "Go to Settings → Users",
+        "Click on your user account",
+        "Copy the API token from the user details",
+      ],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/bazarr/index.mdx b/apps/docs/docs/integrations/bazarr/index.mdx
index f9400a45e..7e1ad2d64 100644
--- a/apps/docs/docs/integrations/bazarr/index.mdx
+++ b/apps/docs/docs/integrations/bazarr/index.mdx
@@ -1,31 +1,30 @@
 ---
-title: 'Bazarr'
+title: "Bazarr"
 description: "Bazarr is a companion application to Sonarr and Radarr that manages and downloads subtitles."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { bazarrIntegration } from '.';
-import { bazarrWidget } from '@site/docs/widgets/bazarr';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { bazarrIntegration } from ".";
+import { bazarrWidget } from "@site/docs/widgets/bazarr";
 
-<IntegrationHeader
-  integration={bazarrIntegration}
-  categories={['Subtitles', 'Media']}
-/>
+<IntegrationHeader integration={bazarrIntegration} categories={["Subtitles", "Media"]} />
 
 Bazarr complements Sonarr and Radarr by managing subtitle downloads. The Homarr integration uses your Bazarr API key to fetch missing subtitle counts and health badges.
 
 ### Screenshots
 
-import apiKeySettings from './img/api-key-settings.png';
-import widgetOverview from '@site/docs/widgets/bazarr/img/widget-overview.png';
+import apiKeySettings from "./img/api-key-settings.png";
+import widgetOverview from "@site/docs/widgets/bazarr/img/widget-overview.png";
 
 <div className="flex flex-col gap-4">
   <div>
-    <p>API key location in Bazarr (<strong>Settings → General → Security</strong>):</p>
+    <p>
+      API key location in Bazarr (<strong>Settings → General → Security</strong>):
+    </p>
     <img src={apiKeySettings} alt="bazarr-api-key-settings" width={128 * 4} />
   </div>
   <div>
@@ -35,20 +34,25 @@ import widgetOverview from '@site/docs/widgets/bazarr/img/widget-overview.png';
 </div>
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[{ widget: bazarrWidget }]}
-/>
+
+<IntegrationCapabilites items={[{ widget: bazarrWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
+
 You can find your Bazarr API key under **Settings → General → Security**.
 
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: [
-      "Open Bazarr and go to Settings → General → Security.",
-      "Copy the API key and paste it into Homarr when creating the integration.",
-    ],
-}]} />
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [
+        "Open Bazarr and go to Settings → General → Security.",
+        "Copy the API key and paste it into Homarr when creating the integration.",
+      ],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/beszel/index.mdx b/apps/docs/docs/integrations/beszel/index.mdx
index 0c93cdc9f..8ddda77c6 100644
--- a/apps/docs/docs/integrations/beszel/index.mdx
+++ b/apps/docs/docs/integrations/beszel/index.mdx
@@ -1,25 +1,22 @@
 ---
-title: 'Beszel'
+title: "Beszel"
 description: "Beszel is a lightweight server monitoring platform with Docker stats, historical data, and alert functions."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { beszelIntegration } from '.';
-import { beszelSystemStatsWidget } from '@site/docs/widgets/beszel-system-stats';
-import { beszelSystemGridWidget } from '@site/docs/widgets/beszel-system-grid';
-import { beszelSystemTableWidget } from '@site/docs/widgets/beszel-system-table';
-import { beszelAlertsWidget } from '@site/docs/widgets/beszel-alerts';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { beszelIntegration } from ".";
+import { beszelSystemStatsWidget } from "@site/docs/widgets/beszel-system-stats";
+import { beszelSystemGridWidget } from "@site/docs/widgets/beszel-system-grid";
+import { beszelSystemTableWidget } from "@site/docs/widgets/beszel-system-table";
+import { beszelAlertsWidget } from "@site/docs/widgets/beszel-alerts";
 
-import beszelDashboard from './img/beszel-dashboard.png';
+import beszelDashboard from "./img/beszel-dashboard.png";
 
-<IntegrationHeader
-    integration={beszelIntegration}
-    categories={['System Monitoring']}
-/>
+<IntegrationHeader integration={beszelIntegration} categories={["System Monitoring"]} />
 
 Beszel monitors your servers in real time via lightweight agents, collecting CPU, memory, disk, network, GPU, temperature, and Docker container metrics. It stores historical data and supports configurable alerts.
 
@@ -28,26 +25,33 @@ Beszel monitors your servers in real time via lightweight agents, collecting CPU
 <img src={beszelDashboard} alt="Beszel dashboard overview showing all four widgets" />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[
-        { widget: beszelSystemStatsWidget },
-        { widget: beszelSystemGridWidget },
-        { widget: beszelSystemTableWidget },
-        { widget: beszelAlertsWidget },
-    ]}
+  items={[
+    { widget: beszelSystemStatsWidget },
+    { widget: beszelSystemGridWidget },
+    { widget: beszelSystemTableWidget },
+    { widget: beszelAlertsWidget },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['username', 'password'],
-    steps: [
-        'Open your Beszel hub instance (default port 8090)',
-        'Use the same credentials you use to log in to the Beszel web UI',
-    ]
-}]} />
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["username", "password"],
+      steps: [
+        "Open your Beszel hub instance (default port 8090)",
+        "Use the same credentials you use to log in to the Beszel web UI",
+      ],
+    },
+  ]}
+/>
 
 :::tip
 Beszel uses PocketBase under the hood. The default admin credentials are set during the initial Beszel setup.
diff --git a/apps/docs/docs/integrations/coolify/index.mdx b/apps/docs/docs/integrations/coolify/index.mdx
index 56e5e6c29..7b828cc18 100644
--- a/apps/docs/docs/integrations/coolify/index.mdx
+++ b/apps/docs/docs/integrations/coolify/index.mdx
@@ -1,29 +1,24 @@
 ---
-title: 'Coolify'
-description: 'Self-hosted PaaS and deployment platform'
+title: "Coolify"
+description: "Self-hosted PaaS and deployment platform"
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { coolifyIntegration } from '.';
-import { coolifyWidget } from '../../widgets/coolify';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { coolifyIntegration } from ".";
+import { coolifyWidget } from "../../widgets/coolify";
 
-<IntegrationHeader
-  integration={coolifyIntegration}
-  categories={['System monitoring', 'Deployment']}
-/>
+<IntegrationHeader integration={coolifyIntegration} categories={["System monitoring", "Deployment"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-  items={[
-    { widget: coolifyWidget }
-  ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: coolifyWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 :::info URL configuration
@@ -31,16 +26,28 @@ Use the root URL of your Coolify instance, for example `https://coolify.example.
 :::
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-  credentials: ['apiKey'],
-  steps: [
-    'Open your Coolify instance and make sure you are in the team you want Homarr to monitor.',
-    (<span>Enable API access under <strong>Settings &gt; Advanced</strong> if it is disabled.</span>),
-    (<span>Go to <strong>Security &gt; API Tokens</strong>.</span>),
-    'Enter a name, e.g. "Homarr".',
-    (<span>Select the <code>read</code> permission. The Coolify widget only reads version, server, project, application, and service data.</span>),
-    'Click "Create".',
-    'Copy the generated token immediately. Coolify only shows it once.',
-    'Paste the token into the API Key field in Homarr.'
-  ]
-}]} />
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [
+        "Open your Coolify instance and make sure you are in the team you want Homarr to monitor.",
+        <span>
+          Enable API access under <strong>Settings &gt; Advanced</strong> if it is disabled.
+        </span>,
+        <span>
+          Go to <strong>Security &gt; API Tokens</strong>.
+        </span>,
+        'Enter a name, e.g. "Homarr".',
+        <span>
+          Select the <code>read</code> permission. The Coolify widget only reads version, server, project, application,
+          and service data.
+        </span>,
+        'Click "Create".',
+        "Copy the generated token immediately. Coolify only shows it once.",
+        "Paste the token into the API Key field in Homarr.",
+      ],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/dash-dot/index.mdx b/apps/docs/docs/integrations/dash-dot/index.mdx
index 512bc6c8d..9c400321c 100644
--- a/apps/docs/docs/integrations/dash-dot/index.mdx
+++ b/apps/docs/docs/integrations/dash-dot/index.mdx
@@ -1,32 +1,33 @@
 ---
-title: 'Dash.'
+title: "Dash."
 description: "Dash. is a system performance and resource monitoring tool"
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconHeartRateMonitor } from "@tabler/icons-react";
-import { dashDotIntegration } from '.';
-import { healthMonitoringWidget } from '@site/docs/widgets/health-monitoring';
-import { systemResourcesWidget } from '@site/docs/widgets/system-resources';
+import { dashDotIntegration } from ".";
+import { healthMonitoringWidget } from "@site/docs/widgets/health-monitoring";
+import { systemResourcesWidget } from "@site/docs/widgets/system-resources";
 
-
-<IntegrationHeader
-  integration={dashDotIntegration}
-  categories={['System monitoring']}
-/>
+<IntegrationHeader integration={dashDotIntegration} categories={["System monitoring"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-      widget: healthMonitoringWidget
-    }, {
-      widget: systemResourcesWidget
-    }]}
+  items={[
+    {
+      widget: healthMonitoringWidget,
+    },
+    {
+      widget: systemResourcesWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
-<AddingIntegration />
\ No newline at end of file
+
+<AddingIntegration />
diff --git a/apps/docs/docs/integrations/deluge/index.mdx b/apps/docs/docs/integrations/deluge/index.mdx
index 24aadb910..89f906c0c 100644
--- a/apps/docs/docs/integrations/deluge/index.mdx
+++ b/apps/docs/docs/integrations/deluge/index.mdx
@@ -1,36 +1,41 @@
 ---
-title: 'Deluge'
+title: "Deluge"
 description: "Deluge is a lightweight, Free Software, cross-platform BitTorrent client."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconDownload } from "@tabler/icons-react";
-import Alert from '@theme/Admonition';
-import { delugeIntegration } from '.';
-import { downloadsWidget } from '@site/docs/widgets/downloads';
+import Alert from "@theme/Admonition";
+import { delugeIntegration } from ".";
+import { downloadsWidget } from "@site/docs/widgets/downloads";
 
-
-<IntegrationHeader
-    integration={delugeIntegration}
-    categories={['Torrent client']}
-/>
+<IntegrationHeader integration={delugeIntegration} categories={["Torrent client"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: downloadsWidget
-    }]}
+  items={[
+    {
+      widget: downloadsWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['password'],
-    steps: [],
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["password"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/docker/index.mdx b/apps/docs/docs/integrations/docker/index.mdx
index 2af43c67e..40ade4912 100644
--- a/apps/docs/docs/integrations/docker/index.mdx
+++ b/apps/docs/docs/integrations/docker/index.mdx
@@ -1,32 +1,31 @@
 ---
-title: 'Docker'
+title: "Docker"
 description: "Docker is a platform where you can run your applications in containers, allowing for easy deployment and management of applications."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconBrandDocker, IconTool } from "@tabler/icons-react";
-import { dockerIntegration } from '.';
-import { dockerContainersWidget } from '@site/docs/widgets/docker-containers';
+import { dockerIntegration } from ".";
+import { dockerContainersWidget } from "@site/docs/widgets/docker-containers";
 
-
-<IntegrationHeader
-  integration={dockerIntegration}
-  categories={['Containers']}
-/>
+<IntegrationHeader integration={dockerIntegration} categories={["Containers"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
+  items={[
+    {
       widget: dockerContainersWidget,
-      note: "This widget can only be used with administrator privileges"
-    }]}
+      note: "This widget can only be used with administrator privileges",
+    },
+  ]}
 />
 
-
 ## Enabling the Docker integration
+
 This integration must first be enabled.
 If you directly run on the host system and you have docker installed, it will be enabled by default.
 Otherwise, you'll need to mount the [docker socket](https://docs.docker.com/engine/security/protect-access/) to the Homarr container,
@@ -49,7 +48,7 @@ services:
     environment:
       - SECRET_ENCRYPTION_KEY=your_64_character_hex_string # <--- can be generated with `openssl rand -hex 32`
     ports:
-      - '7575:7575'
+      - "7575:7575"
 ```
 
 With docker run, add this parameter: `-v /var/run/docker.sock:/var/run/docker.sock`.
@@ -124,8 +123,10 @@ services:
 ```
 
 ### Managing your Docker containers within Homarr
+
 Homarr allows you to interact with Docker containers running on your system.
 Each container row has an action menu with the following options:
+
 - **View logs** - opens a dedicated logs page with a live terminal
 - **Start** - start a stopped container
 - **Stop** - stop a running container
@@ -166,11 +167,13 @@ Currently Homarr supports one label for configuration of the containers:
 - **homarr.hide:** If set to any value, the container will be hidden from the Docker Containers widget and tools page.
 
 ### Security
+
 Mounting docker sockets can be risky, as they permit full control over your docker service.
 As an example, a thread actor could abuse Homarr use the socket to start, stop or delete containers on your system.
 
 Therefore we recommend the usage of a socket proxy, which can prohibit certain actions.
 A few examples include:
+
 - https://github.com/linuxserver/docker-socket-proxy
 - https://github.com/Tecnativa/docker-socket-proxy
 
@@ -178,36 +181,44 @@ See documentation of the respective proxies on how to configure them.
 Homarr may behave in unexpected ways when you use proxies.
 
 #### Permissions
+
 Homarr needs the following permissions from the Docker API:
+
 - Containers/Start
 - Containers/Stop
 - Containers/Restart
 - Containers/Remove
 
 For socket proxies, you will need these permissions:
+
 - `CONTAINERS=1`
 - `POST=1`
 
 **Caution:** `POST` access is security critical as it provides extensive capabilities to modify your docker environment. Please leave it disabled if you're concerned about this.
 
 As a workaround, you can use [LSIO's socket proxy](https://github.com/linuxserver/docker-socket-proxy) and set the following:
+
 - ALLOW_START=1
 - ALLOW_STOP=1
 - ALLOW_RESTARTS=1
 
-These will work even with `POST=0`. 
+These will work even with `POST=0`.
 
 You lose the ability to remove containers, but start, stop and restarts should work just fine.
 
 #### Connecting to Docker via Socket Proxies
+
 To connect to Docker via a socket proxy, you'll need to add these two environment variables in the compose file:
+
 - `DOCKER_HOSTNAMES=<name of the socket proxy container>`
 - `DOCKER_PORTS=<socket proxy port, usually 2375>`
 
 Refer: https://homarr.dev/docs/advanced/environment-variables/
 
 You will also need to add Homarr to the network of your socket proxy. You can do it like this:
+
 1. Add the network to your compose file (with appropriate changes):
+
 ```yaml
 networks:
   socket-proxy:
@@ -216,6 +227,7 @@ networks:
 ```
 
 2. Add the network to the homarr service in the compose file:
+
 ```yaml
 networks:
   - socket-proxy
diff --git a/apps/docs/docs/integrations/emby/index.mdx b/apps/docs/docs/integrations/emby/index.mdx
index 907d2bd96..2426a1561 100644
--- a/apps/docs/docs/integrations/emby/index.mdx
+++ b/apps/docs/docs/integrations/emby/index.mdx
@@ -1,37 +1,35 @@
 ---
-title: 'Emby'
+title: "Emby"
 description: "Emby is a media server platform that allows you to organize, manage, and stream your personal media collection."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconVideo, IconTicket } from "@tabler/icons-react";
-import { embyIntegration } from '.';
-import { mediaServerWidget } from '@site/docs/widgets/media-server';
-import { mediaReleasesWidget } from '@site/docs/widgets/media-releases';
+import { embyIntegration } from ".";
+import { mediaServerWidget } from "@site/docs/widgets/media-server";
+import { mediaReleasesWidget } from "@site/docs/widgets/media-releases";
 
-
-<IntegrationHeader
-    integration={embyIntegration}
-    categories={['Media server']}
-/>
+<IntegrationHeader integration={embyIntegration} categories={["Media server"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[
-        { widget: mediaServerWidget }, 
-        { widget: mediaReleasesWidget }
-    ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: mediaServerWidget }, { widget: mediaReleasesWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/glances/index.mdx b/apps/docs/docs/integrations/glances/index.mdx
index 2639f87e5..bd047e81d 100644
--- a/apps/docs/docs/integrations/glances/index.mdx
+++ b/apps/docs/docs/integrations/glances/index.mdx
@@ -1,37 +1,43 @@
 ---
-title: 'Glances'
+title: "Glances"
 description: "Glances is a cross-platform system monitoring tool."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { glancesIntegration } from '.';
-import { systemResourcesWidget } from '@site/docs/widgets/system-resources';
-import { healthMonitoringWidget } from '@site/docs/widgets/health-monitoring';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { glancesIntegration } from ".";
+import { systemResourcesWidget } from "@site/docs/widgets/system-resources";
+import { healthMonitoringWidget } from "@site/docs/widgets/health-monitoring";
 
-
-<IntegrationHeader
-    integration={glancesIntegration}
-    categories={['System Monitoring']}
-/>
+<IntegrationHeader integration={glancesIntegration} categories={["System Monitoring"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: systemResourcesWidget
-    }, {
-        widget: healthMonitoringWidget
-    }]}
+  items={[
+    {
+      widget: systemResourcesWidget,
+    },
+    {
+      widget: healthMonitoringWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: [],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: [],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/gluetun/index.mdx b/apps/docs/docs/integrations/gluetun/index.mdx
index 7c936fc1f..dca490781 100644
--- a/apps/docs/docs/integrations/gluetun/index.mdx
+++ b/apps/docs/docs/integrations/gluetun/index.mdx
@@ -1,20 +1,17 @@
 ---
-title: 'Gluetun'
-description: 'Connect Gluetun to Homarr as a VPN integration.'
+title: "Gluetun"
+description: "Connect Gluetun to Homarr as a VPN integration."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { gluetunIntegration } from '.';
-import { vpnWidget } from '@site/docs/widgets/vpn';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { gluetunIntegration } from ".";
+import { vpnWidget } from "@site/docs/widgets/vpn";
 
-<IntegrationHeader
-  integration={gluetunIntegration}
-  categories={['VPN', 'Network']}
-/>
+<IntegrationHeader integration={gluetunIntegration} categories={["VPN", "Network"]} />
 
 [Gluetun](https://github.com/qdm12/gluetun) exposes a control server that Homarr can query to report the VPN tunnel
 status, DNS status, public IP address, and active provider details in the VPN widget.
@@ -22,9 +19,11 @@ status, DNS status, public IP address, and active provider details in the VPN wi
 ### Widgets & Capabilities
 
 <IntegrationCapabilites
-  items={[{
-    widget: vpnWidget,
-  }]}
+  items={[
+    {
+      widget: vpnWidget,
+    },
+  ]}
 />
 
 ### Setting up the Gluetun control server
@@ -40,13 +39,20 @@ Refer to the [Gluetun control server documentation](https://github.com/qdm12/glu
 Gluetun's control server can be left unprotected or secured with either an API key or HTTP Basic authentication.
 Choose the option that matches how your Gluetun instance integration is set up.
 
-<IntegrationSecrets secrets={[{
-  credentials: [],
-  steps: [],
-},{
-  credentials: ['username', 'password'],
-  steps: [],
-},{
-  credentials: ['apiKey'],
-  steps: [],
-},,]} />
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: [],
+      steps: [],
+    },
+    {
+      credentials: ["username", "password"],
+      steps: [],
+    },
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+    ,
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/gotify/index.mdx b/apps/docs/docs/integrations/gotify/index.mdx
index 09c81265b..43cde77b0 100644
--- a/apps/docs/docs/integrations/gotify/index.mdx
+++ b/apps/docs/docs/integrations/gotify/index.mdx
@@ -1,33 +1,39 @@
 ---
-title: 'Gotify'
+title: "Gotify"
 description: "Gotify is a simple, self-hosted server for sending and receiving messages in real time."
 hide_title: true
 ---
 
-import { notificationsWidget } from '@site/docs/widgets/notifications';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { gotifyIntegration } from '.';
+import { notificationsWidget } from "@site/docs/widgets/notifications";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { gotifyIntegration } from ".";
 
-<IntegrationHeader
-    integration={gotifyIntegration}
-    categories={['Notifications', 'Messaging']}
-/>
+<IntegrationHeader integration={gotifyIntegration} categories={["Notifications", "Messaging"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: notificationsWidget
-    }]}
+  items={[
+    {
+      widget: notificationsWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['username', 'password'],
-    steps: []
-}]} />
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["username", "password"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/home-assistant/index.mdx b/apps/docs/docs/integrations/home-assistant/index.mdx
index 98ad591d6..65d09d166 100644
--- a/apps/docs/docs/integrations/home-assistant/index.mdx
+++ b/apps/docs/docs/integrations/home-assistant/index.mdx
@@ -1,45 +1,51 @@
 ---
-title: 'Home Assistant'
+title: "Home Assistant"
 description: "Home Assistant is an open-source home automation platform that focuses on privacy and local control, allowing you to automate and control your smart home devices."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconBinaryTree } from "@tabler/icons-react";
-import { homeAssistantIntegration } from '.';
-import { smartHomeEntityStateWidget } from '@site/docs/widgets/smart-home-entity-state';
-import { smartHomeExecuteAutomationWidget } from '@site/docs/widgets/smart-home-execute-automation';
+import { homeAssistantIntegration } from ".";
+import { smartHomeEntityStateWidget } from "@site/docs/widgets/smart-home-entity-state";
+import { smartHomeExecuteAutomationWidget } from "@site/docs/widgets/smart-home-execute-automation";
 
-
-<IntegrationHeader
-    integration={homeAssistantIntegration}
-    categories={['Smart Home', 'Automation']}
-/>
+<IntegrationHeader integration={homeAssistantIntegration} categories={["Smart Home", "Automation"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: smartHomeEntityStateWidget
-    }, {
-        widget: smartHomeExecuteAutomationWidget,
-    }]}
+  items={[
+    {
+      widget: smartHomeEntityStateWidget,
+    },
+    {
+      widget: smartHomeExecuteAutomationWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: [
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [
         "Click on your profile in the bottom left corner of Home Assistant.",
         "Switch to the Security tab.",
         "Scroll down to the Long-lived access tokens section.",
         "Click on the Create Token button.",
         "Enter a name for the token (e.g., 'Homarr Integration') and click Create.",
         "Copy the generated token and paste it into the Homarr integration settings.",
-    ]
-}]} />
\ No newline at end of file
+      ],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/ical/index.mdx b/apps/docs/docs/integrations/ical/index.mdx
index 5f5ffc422..475229a34 100644
--- a/apps/docs/docs/integrations/ical/index.mdx
+++ b/apps/docs/docs/integrations/ical/index.mdx
@@ -1,38 +1,44 @@
 ---
-title: 'iCal'
+title: "iCal"
 description: "iCal is a standard for calendar data exchange, allowing users to share and manage calendar events across different platforms."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconZoomQuestion, IconChartBar, IconSearch } from "@tabler/icons-react";
-import { icalIntegration } from '.';
-import { calendarWidget } from '@site/docs/widgets/calendar';
+import { icalIntegration } from ".";
+import { calendarWidget } from "@site/docs/widgets/calendar";
 
-<IntegrationHeader
-  integration={icalIntegration}
-  categories={['Calendar']}
-/>
+<IntegrationHeader integration={icalIntegration} categories={["Calendar"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-      widget: calendarWidget
-    }]}
+  items={[
+    {
+      widget: calendarWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['url'],
-    steps: []
-}]} />
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["url"],
+      steps: [],
+    },
+  ]}
+/>
 
 ## Using the iCal integration
 
-The iCal integration allows you to add external calendars to Homarr. Any calendar that provides a public iCal URL can be integrated, such as Google Calendar, Apple Calendar, or Outlook.
\ No newline at end of file
+The iCal integration allows you to add external calendars to Homarr. Any calendar that provides a public iCal URL can be integrated, such as Google Calendar, Apple Calendar, or Outlook.
diff --git a/apps/docs/docs/integrations/immich/index.mdx b/apps/docs/docs/integrations/immich/index.mdx
index a0a351f15..efe4c5106 100644
--- a/apps/docs/docs/integrations/immich/index.mdx
+++ b/apps/docs/docs/integrations/immich/index.mdx
@@ -1,36 +1,29 @@
 ---
-title: 'Immich'
+title: "Immich"
 description: "Self-hosted photo and video management solution"
 hide_title: true
 ---
 
-import { immichAlbumCarouselWidget } from '../../widgets/immich-album-carousel';import {
-  IntegrationHeader
-} from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { immichIntegration } from '.';
-import { immichServerStatsWidget } from '../../widgets/immich-server-stats';
+import { immichAlbumCarouselWidget } from "../../widgets/immich-album-carousel";
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { immichIntegration } from ".";
+import { immichServerStatsWidget } from "../../widgets/immich-server-stats";
 
-
-<IntegrationHeader
-  integration={immichIntegration}
-  categories={['Photo server']}
-/>
+<IntegrationHeader integration={immichIntegration} categories={["Photo server"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-  items={[
-    { widget: immichAlbumCarouselWidget },
-    { widget: immichServerStatsWidget }
-  ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: immichAlbumCarouselWidget }, { widget: immichServerStatsWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
+
 <IntegrationSecrets secrets={[{
   credentials: ['apiKey'],
   steps: [
@@ -55,9 +48,10 @@ import { immichServerStatsWidget } from '../../widgets/immich-server-stats';
     <code>asset.statistics</code>,{" "}
     <code>server.statistics</code>,{" "}
     <code>server.about</code>.
+
   </span>
 
 ),
-    'Create the integration in Homarr and copy the API key to there'
-    ]
+'Create the integration in Homarr and copy the API key to there'
+]
 }]} />
diff --git a/apps/docs/docs/integrations/jellyfin/index.mdx b/apps/docs/docs/integrations/jellyfin/index.mdx
index 4826386b8..83e23fd45 100644
--- a/apps/docs/docs/integrations/jellyfin/index.mdx
+++ b/apps/docs/docs/integrations/jellyfin/index.mdx
@@ -1,40 +1,39 @@
 ---
-title: 'Jellyfin'
+title: "Jellyfin"
 description: "Jellyfin is a free and open-source media server software that allows you to organize, manage, and share your media files."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconVideo, IconTicket } from "@tabler/icons-react";
-import { jellyfinIntegration } from '.';
-import { mediaServerWidget } from '@site/docs/widgets/media-server';
-import { mediaReleasesWidget } from '@site/docs/widgets/media-releases';
+import { jellyfinIntegration } from ".";
+import { mediaServerWidget } from "@site/docs/widgets/media-server";
+import { mediaReleasesWidget } from "@site/docs/widgets/media-releases";
 
-
-<IntegrationHeader
-    integration={jellyfinIntegration}
-    categories={['Media server']}
-/>
+<IntegrationHeader integration={jellyfinIntegration} categories={["Media server"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[
-        { widget: mediaServerWidget }, 
-        { widget: mediaReleasesWidget }
-    ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: mediaServerWidget }, { widget: mediaReleasesWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: []
-},{
-    credentials: ['username', 'password'],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+    {
+      credentials: ["username", "password"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/jellyseerr/index.mdx b/apps/docs/docs/integrations/jellyseerr/index.mdx
index a85d7bd9f..e752906bb 100644
--- a/apps/docs/docs/integrations/jellyseerr/index.mdx
+++ b/apps/docs/docs/integrations/jellyseerr/index.mdx
@@ -1,45 +1,52 @@
 ---
-title: 'Jellyseerr'
+title: "Jellyseerr"
 description: "Jellyseerr is a self-hosted media request management system that integrates with Jellyfin and other media servers."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconZoomQuestion, IconChartBar, IconSearch } from "@tabler/icons-react";
-import { jellyseerrIntegration } from '.';
-import { mediaRequestListWidget } from '@site/docs/widgets/media-request-list';
-import { mediaRequestStatsWidget } from '@site/docs/widgets/media-request-stats';
+import { jellyseerrIntegration } from ".";
+import { mediaRequestListWidget } from "@site/docs/widgets/media-request-list";
+import { mediaRequestStatsWidget } from "@site/docs/widgets/media-request-stats";
 
-
-<IntegrationHeader
-  integration={jellyseerrIntegration}
-  categories={['Media requests']}
-/>
+<IntegrationHeader integration={jellyseerrIntegration} categories={["Media requests"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: mediaRequestListWidget,
-    },{
-        widget: mediaRequestStatsWidget,
-    }, {
-        capability: {
-            icon: IconSearch,
-            name: "Media Search",
-            description: "Search for movies and TV shows directly from Spotlight and request them.",
-            path: "../../management/search-engines/#media-request-search"
-        }
-    }]}
+  items={[
+    {
+      widget: mediaRequestListWidget,
+    },
+    {
+      widget: mediaRequestStatsWidget,
+    },
+    {
+      capability: {
+        icon: IconSearch,
+        name: "Media Search",
+        description: "Search for movies and TV shows directly from Spotlight and request them.",
+        path: "../../management/search-engines/#media-request-search",
+      },
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/kubernetes/index.mdx b/apps/docs/docs/integrations/kubernetes/index.mdx
index 899c60931..662874467 100644
--- a/apps/docs/docs/integrations/kubernetes/index.mdx
+++ b/apps/docs/docs/integrations/kubernetes/index.mdx
@@ -1,20 +1,16 @@
 ---
-title: 'Kubernetes'
+title: "Kubernetes"
 description: "Kubernetes is a powerful container orchestration platform that automates the deployment, scaling, and management of containerized applications."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconBrandDocker, IconTool } from "@tabler/icons-react";
-import { kubernetesIntegration } from '.';
+import { kubernetesIntegration } from ".";
 
-
-<IntegrationHeader
-  integration={kubernetesIntegration}
-  categories={['Containers']}
-/>
+<IntegrationHeader integration={kubernetesIntegration} categories={["Containers"]} />
 
 Homarr provides a user-friendly Kubernetes dashboard that offers an overview of your cluster’s resources in a clear and structured interface. It allows users to view key Kubernetes objects, including `Pods`, `Services`, `Ingresses`, `Nodes`, `ConfigMaps`, `Secrets`, `Namespaces`, and `Volumes`, as well as basic metrics when the Kubernetes Metrics Server is enabled.
 
@@ -47,7 +43,7 @@ Enabling RBAC in the Helm chart creates the necessary Kubernetes Role-Based Acce
 - Service Account: A dedicated service account for Homarr.
 - Role & RoleBinding: Grants permissions within a specific namespace to list, watch, and get pods, services, secrets, configmaps, and more.
 - ClusterRole & ClusterRoleBinding: Extends the same permissions cluster-wide for additional flexibility.
-:::
+  :::
 
 ### Homarr Dashboard Overview
 
diff --git a/apps/docs/docs/integrations/lidarr/index.mdx b/apps/docs/docs/integrations/lidarr/index.mdx
index 498503617..ad5916a3f 100644
--- a/apps/docs/docs/integrations/lidarr/index.mdx
+++ b/apps/docs/docs/integrations/lidarr/index.mdx
@@ -1,35 +1,40 @@
 ---
-title: 'Lidarr'
+title: "Lidarr"
 description: "Lidarr is a music management tool that automates the process of downloading, sorting, and renaming music."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconCalendar } from "@tabler/icons-react";
-import { lidarrIntegration } from '.';
-import { calendarWidget } from '@site/docs/widgets/calendar';
+import { lidarrIntegration } from ".";
+import { calendarWidget } from "@site/docs/widgets/calendar";
 
-
-<IntegrationHeader
-    integration={lidarrIntegration}
-    categories={['Media manager', "Servarr"]}
-/>
+<IntegrationHeader integration={lidarrIntegration} categories={["Media manager", "Servarr"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: calendarWidget
-    }]}
+  items={[
+    {
+      widget: calendarWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/navidrome/index.mdx b/apps/docs/docs/integrations/navidrome/index.mdx
index 6a9f4059e..d5b1993ad 100644
--- a/apps/docs/docs/integrations/navidrome/index.mdx
+++ b/apps/docs/docs/integrations/navidrome/index.mdx
@@ -1,41 +1,39 @@
 ---
-title: 'Navidrome'
+title: "Navidrome"
 description: "Navidrome is a self-hosted music server and streamer compatible with the Subsonic API."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { navidromeIntegration } from '.';
-import { audioStatsWidget } from '@site/docs/widgets/audio-stats';
-import { mediaServerWidget } from '@site/docs/widgets/media-server';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { navidromeIntegration } from ".";
+import { audioStatsWidget } from "@site/docs/widgets/audio-stats";
+import { mediaServerWidget } from "@site/docs/widgets/media-server";
 
-
-<IntegrationHeader
-    integration={navidromeIntegration}
-    categories={['Media', 'Media server']}
-/>
+<IntegrationHeader integration={navidromeIntegration} categories={["Media", "Media server"]} />
 
 Navidrome provides music library statistics including artist, album, and song counts, as well as now playing audio streams via the Subsonic API.
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[
-        { widget: audioStatsWidget },
-        { widget: mediaServerWidget },
-    ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: audioStatsWidget }, { widget: mediaServerWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['username', 'password'],
-    steps: [
-        'Use the same credentials you use to log in to Navidrome',
-        'The user must have access to the Subsonic API (enabled by default)',
-    ]
-}]} />
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["username", "password"],
+      steps: [
+        "Use the same credentials you use to log in to Navidrome",
+        "The user must have access to the Subsonic API (enabled by default)",
+      ],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/nextcloud/index.mdx b/apps/docs/docs/integrations/nextcloud/index.mdx
index ba5ab8ee9..f7d7e05fa 100644
--- a/apps/docs/docs/integrations/nextcloud/index.mdx
+++ b/apps/docs/docs/integrations/nextcloud/index.mdx
@@ -1,40 +1,43 @@
 ---
-title: 'Nextcloud'
+title: "Nextcloud"
 description: "Nextcloud is a self-hosted productivity platform that provides file storage, collaboration tools, and more."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconCalendar } from "@tabler/icons-react";
-import Alert from '@theme/Admonition';
-import { nextcloudIntegration } from '.';
-import { calendarWidget } from '@site/docs/widgets/calendar';
-import { notificationsWidget } from '@site/docs/widgets/notifications';
+import Alert from "@theme/Admonition";
+import { nextcloudIntegration } from ".";
+import { calendarWidget } from "@site/docs/widgets/calendar";
+import { notificationsWidget } from "@site/docs/widgets/notifications";
 
-<IntegrationHeader
-  integration={nextcloudIntegration}
-  categories={['Calendar', 'Notifications']}
-/>
+<IntegrationHeader integration={nextcloudIntegration} categories={["Calendar", "Notifications"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[
-        { widget: calendarWidget },
-        { widget: notificationsWidget }
-    ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: calendarWidget }, { widget: notificationsWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['username', 'password'],
-    steps: [],
-    header: <Alert type="info">
-      Users who use 2FA will have to use Nextcloud's App Password tool to grant Homarr access, as 2FA breaks the traditional process. For more information, see [Nextcloud's Documentation](https://docs.nextcloud.com/server/stable/admin_manual/configuration_user/authentication.html#app-passwords)
-    </Alert>,
-}]} />
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["username", "password"],
+      steps: [],
+      header: (
+        <Alert type="info">
+          Users who use 2FA will have to use Nextcloud's App Password tool to grant Homarr access, as 2FA breaks the
+          traditional process. For more information, see [Nextcloud's
+          Documentation](https://docs.nextcloud.com/server/stable/admin_manual/configuration_user/authentication.html#app-passwords)
+        </Alert>
+      ),
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/ntfy/index.mdx b/apps/docs/docs/integrations/ntfy/index.mdx
index 4b21d16a4..a132de923 100644
--- a/apps/docs/docs/integrations/ntfy/index.mdx
+++ b/apps/docs/docs/integrations/ntfy/index.mdx
@@ -1,37 +1,44 @@
 ---
-title: 'Ntfy'
+title: "Ntfy"
 description: "Ntfy is a simple, open-source notification service that allows you to send and receive notifications across devices."
 hide_title: true
 ---
 
-import { notificationsWidget } from '@site/docs/widgets/notifications';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
+import { notificationsWidget } from "@site/docs/widgets/notifications";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
 import { IconMessage } from "@tabler/icons-react";
-import { ntfyIntegration } from '.';
+import { ntfyIntegration } from ".";
 
-<IntegrationHeader
-    integration={ntfyIntegration}
-    categories={['Notifications', 'Messaging']}
-/>
+<IntegrationHeader integration={ntfyIntegration} categories={["Notifications", "Messaging"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: notificationsWidget
-    }]}
+  items={[
+    {
+      widget: notificationsWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['topic'],
-    steps: []
-}, {
-    credentials: ['topic', 'apiKey'],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["topic"],
+      steps: [],
+    },
+    {
+      credentials: ["topic", "apiKey"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/nzbget/index.mdx b/apps/docs/docs/integrations/nzbget/index.mdx
index 3479f317a..1b7c23a1f 100644
--- a/apps/docs/docs/integrations/nzbget/index.mdx
+++ b/apps/docs/docs/integrations/nzbget/index.mdx
@@ -1,36 +1,41 @@
 ---
-title: 'NZBGet'
+title: "NZBGet"
 description: "NZBGet is a lightweight and efficient Usenet downloader."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconDownload } from "@tabler/icons-react";
-import { nzbgetIntegration } from '.';
-import Alert from '@theme/Admonition';
-import { downloadsWidget } from '@site/docs/widgets/downloads';
+import { nzbgetIntegration } from ".";
+import Alert from "@theme/Admonition";
+import { downloadsWidget } from "@site/docs/widgets/downloads";
 
-
-<IntegrationHeader
-  integration={nzbgetIntegration}
-  categories={['Usenet client']}
-/>
+<IntegrationHeader integration={nzbgetIntegration} categories={["Usenet client"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: downloadsWidget,
-    }]}
+  items={[
+    {
+      widget: downloadsWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['username', 'password'],
-    steps: [],
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["username", "password"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/open-media-vault/index.mdx b/apps/docs/docs/integrations/open-media-vault/index.mdx
index ac0a42290..b934bf797 100644
--- a/apps/docs/docs/integrations/open-media-vault/index.mdx
+++ b/apps/docs/docs/integrations/open-media-vault/index.mdx
@@ -1,42 +1,52 @@
 ---
-title: 'Open Media Vault'
+title: "Open Media Vault"
 description: "Open Media Vault is a free network-attached storage server based on the Debian operating system."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconHeartRateMonitor } from "@tabler/icons-react";
-import { openMediaVaultIntegration } from '.';
-import Alert from '@theme/Admonition'
-import { healthMonitoringWidget } from '@site/docs/widgets/health-monitoring';
-import { systemResourcesWidget } from '@site/docs/widgets/system-resources';
+import { openMediaVaultIntegration } from ".";
+import Alert from "@theme/Admonition";
+import { healthMonitoringWidget } from "@site/docs/widgets/health-monitoring";
+import { systemResourcesWidget } from "@site/docs/widgets/system-resources";
 
-<IntegrationHeader
-  integration={openMediaVaultIntegration}
-  categories={['System monitoring']}
-/>
+<IntegrationHeader integration={openMediaVaultIntegration} categories={["System monitoring"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: healthMonitoringWidget,
-        note: "To use this widget, you must have the OpenMediaVault plugin openmediavault-cputemp installed.",
-    }, {
-      widget: systemResourcesWidget
-    }]}
+  items={[
+    {
+      widget: healthMonitoringWidget,
+      note: "To use this widget, you must have the OpenMediaVault plugin openmediavault-cputemp installed.",
+    },
+    {
+      widget: systemResourcesWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['username', 'password'],
-    steps: [],
-    body: <Alert type="caution">
-        The user used here must have administrative permissions or Homarr won't be able to read the system performance and resource data.
-    </Alert>
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["username", "password"],
+      steps: [],
+      body: (
+        <Alert type="caution">
+          The user used here must have administrative permissions or Homarr won't be able to read the system performance
+          and resource data.
+        </Alert>
+      ),
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/opnsense/index.mdx b/apps/docs/docs/integrations/opnsense/index.mdx
index 37e9a78c6..9a3a2b1ee 100644
--- a/apps/docs/docs/integrations/opnsense/index.mdx
+++ b/apps/docs/docs/integrations/opnsense/index.mdx
@@ -1,65 +1,75 @@
 ---
-title: 'OPNsense'
+title: "OPNsense"
 description: "OPNsense is an open-source, easy-to-use, and easy-to-build firewall and routing platform."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconHeartRateMonitor } from "@tabler/icons-react";
-import { opnsenseIntegration } from '.';
-import Alert from '@theme/Admonition'
-import { firewallWidget } from '../../widgets/firewall';
+import { opnsenseIntegration } from ".";
+import Alert from "@theme/Admonition";
+import { firewallWidget } from "../../widgets/firewall";
 
-<IntegrationHeader
-  integration={opnsenseIntegration}
-  categories={['Firewall']}
-/>
+<IntegrationHeader integration={opnsenseIntegration} categories={["Firewall"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: firewallWidget,
-    }]}
+  items={[
+    {
+      widget: firewallWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    tabLabel: "ApiKey (Key & Secret)",
-    credentials: ['opnsenseApiKey', 'opnsenseApiSecret'],
-    header: <Alert type="info">
-                This integration does not require full API access to the firewall. The following guide outlines the process for creating a restricted OPNsense user with a scrambled password, designed exclusively for API access. This ensures minimal permissions and prevents local login capability.
-    </Alert>,
-    steps: [
+
+<IntegrationSecrets
+  secrets={[
+    {
+      tabLabel: "ApiKey (Key & Secret)",
+      credentials: ["opnsenseApiKey", "opnsenseApiSecret"],
+      header: (
+        <Alert type="info">
+          This integration does not require full API access to the firewall. The following guide outlines the process
+          for creating a restricted OPNsense user with a scrambled password, designed exclusively for API access. This
+          ensures minimal permissions and prevents local login capability.
+        </Alert>
+      ),
+      steps: [
         "Log in to the OPNsense web interface as an administrator",
         "Navigate to System → Access → Users",
         "Click the + (Add) button to create a new user",
         <>
-        Fill in the user details:
-            <ul>
-                <li>Username: Enter a unique name</li>
-                <li>Password: Leave empty</li>
-                <li>Scrambled Password: Enable this option</li>
-                <li>Full name: (Optional) Add a descriptive name</li>
-            </ul>
+          Fill in the user details:
+          <ul>
+            <li>Username: Enter a unique name</li>
+            <li>Password: Leave empty</li>
+            <li>Scrambled Password: Enable this option</li>
+            <li>Full name: (Optional) Add a descriptive name</li>
+          </ul>
         </>,
         <>
-        In Privileges section → Select the option below:
-            <ul>
-                <li>Lobby: Dashboard</li>
-                <li>Reporting: Traffic</li>
-            </ul>
+          In Privileges section → Select the option below:
+          <ul>
+            <li>Lobby: Dashboard</li>
+            <li>Reporting: Traffic</li>
+          </ul>
         </>,
         "Click Save",
         "Return to the Users list",
         "Find the user and click the ticket icon in the Commands column",
         "Click Yes in the popup to confirm",
         "A txt file will download automatically, containing: Key and Secret",
-        "Save this file securely—this information will only be shown once"
-    ],
-}]} />
\ No newline at end of file
+        "Save this file securely—this information will only be shown once",
+      ],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/overseerr/index.mdx b/apps/docs/docs/integrations/overseerr/index.mdx
index ce9e0a3e5..2dd2d7c8a 100644
--- a/apps/docs/docs/integrations/overseerr/index.mdx
+++ b/apps/docs/docs/integrations/overseerr/index.mdx
@@ -1,45 +1,52 @@
 ---
-title: 'Overseerr'
+title: "Overseerr"
 description: "Overseerr is a self-hosted media request management system that integrates with Plex."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconZoomQuestion, IconChartBar, IconSearch } from "@tabler/icons-react";
-import { overseerrIntegration } from '.';
-import { mediaRequestListWidget } from '@site/docs/widgets/media-request-list';
-import { mediaRequestStatsWidget } from '@site/docs/widgets/media-request-stats';
+import { overseerrIntegration } from ".";
+import { mediaRequestListWidget } from "@site/docs/widgets/media-request-list";
+import { mediaRequestStatsWidget } from "@site/docs/widgets/media-request-stats";
 
-
-<IntegrationHeader
-  integration={overseerrIntegration}
-  categories={['Media requests']}
-/>
+<IntegrationHeader integration={overseerrIntegration} categories={["Media requests"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: mediaRequestListWidget
-    }, {
-        widget: mediaRequestStatsWidget
-    }, {
-        capability: {
-            icon: IconSearch,
-            name: "Media Search",
-            description: "Search for movies and TV shows directly from Spotlight and request them.",
-            path: "../../management/search-engines/#media-request-search"
-        }
-    }]}
+  items={[
+    {
+      widget: mediaRequestListWidget,
+    },
+    {
+      widget: mediaRequestStatsWidget,
+    },
+    {
+      capability: {
+        icon: IconSearch,
+        name: "Media Search",
+        description: "Search for movies and TV shows directly from Spotlight and request them.",
+        path: "../../management/search-engines/#media-request-search",
+      },
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/paperless-ngx/index.mdx b/apps/docs/docs/integrations/paperless-ngx/index.mdx
index e08840110..175fdb15a 100644
--- a/apps/docs/docs/integrations/paperless-ngx/index.mdx
+++ b/apps/docs/docs/integrations/paperless-ngx/index.mdx
@@ -1,41 +1,40 @@
 ---
-title: 'Paperless-ngx'
+title: "Paperless-ngx"
 description: "Paperless-ngx is a document management system that transforms your physical documents into a searchable online archive."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { paperlessNgxIntegration } from '.';
-import { paperlessNgxWidget } from '@site/docs/widgets/paperless-ngx';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { paperlessNgxIntegration } from ".";
+import { paperlessNgxWidget } from "@site/docs/widgets/paperless-ngx";
 
-
-<IntegrationHeader
-    integration={paperlessNgxIntegration}
-    categories={['Documents']}
-/>
+<IntegrationHeader integration={paperlessNgxIntegration} categories={["Documents"]} />
 
 Paperless-ngx provides document statistics including total documents, inbox count, correspondents, tags, and document types.
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[
-        { widget: paperlessNgxWidget },
-    ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: paperlessNgxWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: [
-        'Open your Paperless-ngx instance',
-        'Navigate to Settings → Django Admin → Tokens',
-        'Create a new token for your user',
-        'Copy the token value',
-    ]
-}]} />
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [
+        "Open your Paperless-ngx instance",
+        "Navigate to Settings → Django Admin → Tokens",
+        "Create a new token for your user",
+        "Copy the token value",
+      ],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/patchmon/index.mdx b/apps/docs/docs/integrations/patchmon/index.mdx
index 95b827df0..b60c20962 100644
--- a/apps/docs/docs/integrations/patchmon/index.mdx
+++ b/apps/docs/docs/integrations/patchmon/index.mdx
@@ -1,43 +1,42 @@
 ---
-title: 'PatchMon'
+title: "PatchMon"
 description: "PatchMon is a patch management and monitoring solution for Linux hosts."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { patchmonIntegration } from '.';
-import { patchmonWidget } from '@site/docs/widgets/patchmon';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { patchmonIntegration } from ".";
+import { patchmonWidget } from "@site/docs/widgets/patchmon";
 
-
-<IntegrationHeader
-    integration={patchmonIntegration}
-    categories={['Health Monitoring']}
-/>
+<IntegrationHeader integration={patchmonIntegration} categories={["Health Monitoring"]} />
 
 PatchMon provides host and package update statistics including total hosts, hosts needing updates, and security update counts.
 
 The PatchMon widget requires users to be **signed in to Homarr**; see the [PatchMon widget documentation](/docs/widgets/patchmon#authentication) for details on authentication and public boards.
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[
-        { widget: patchmonWidget },
-    ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: patchmonWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['patchmonApiKey', 'patchmonApiSecret'],
-    steps: [
-        'Open your PatchMon instance',
-        'Navigate to Settings and create a new GetHomepage API key',
-        'Copy the API key and secret from the success dialog',
-        'Paste them into Homarr — Basic authentication is handled automatically',
-    ]
-}]} />
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["patchmonApiKey", "patchmonApiSecret"],
+      steps: [
+        "Open your PatchMon instance",
+        "Navigate to Settings and create a new GetHomepage API key",
+        "Copy the API key and secret from the success dialog",
+        "Paste them into Homarr — Basic authentication is handled automatically",
+      ],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/peanut/index.mdx b/apps/docs/docs/integrations/peanut/index.mdx
index 751200bed..7eb7b845b 100644
--- a/apps/docs/docs/integrations/peanut/index.mdx
+++ b/apps/docs/docs/integrations/peanut/index.mdx
@@ -1,48 +1,53 @@
 ---
-title: 'PeaNUT'
-description: 'A tiny dashboard for Network UPS Tools (NUT) servers.'
+title: "PeaNUT"
+description: "A tiny dashboard for Network UPS Tools (NUT) servers."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { peaNutIntegration } from '.';
-import { upsWidget } from '@site/docs/widgets/ups';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { peaNutIntegration } from ".";
+import { upsWidget } from "@site/docs/widgets/ups";
 
-<IntegrationHeader
-  integration={peaNutIntegration}
-  categories={['UPS', 'Hardware']}
-/>
+<IntegrationHeader integration={peaNutIntegration} categories={["UPS", "Hardware"]} />
 
 [PeaNUT](https://github.com/Brandawg93/PeaNUT) exposes the data of your [Network UPS Tools](https://networkupstools.org/) servers
 over a REST API, which Homarr reads to display the status of your UPS devices.
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
+  items={[
+    {
       widget: upsWidget,
-    }]}
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
+
 PeaNUT secures its API with HTTP Basic authentication when the `WEB_USERNAME` and `WEB_PASSWORD` environment variables
 are set on the PeaNUT instance. Provide the same credentials here. If the instance runs with `AUTH_DISABLED=true`, no
 secrets are required.
 
-<IntegrationSecrets secrets={[{
-    credentials: ['username', 'password'],
-    steps: [
-      "Set WEB_USERNAME and WEB_PASSWORD on your PeaNUT instance.",
-      "Create an integration in Homarr with the PeaNUT URL and those credentials.",
-    ],
-},{
-    credentials: [],
-    steps: [
-      "If PeaNUT runs with AUTH_DISABLED=true, create the integration with no credentials.",
-    ],
-}]} />
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["username", "password"],
+      steps: [
+        "Set WEB_USERNAME and WEB_PASSWORD on your PeaNUT instance.",
+        "Create an integration in Homarr with the PeaNUT URL and those credentials.",
+      ],
+    },
+    {
+      credentials: [],
+      steps: ["If PeaNUT runs with AUTH_DISABLED=true, create the integration with no credentials."],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/pi-hole/index.mdx b/apps/docs/docs/integrations/pi-hole/index.mdx
index ca2b400e7..d724b026d 100644
--- a/apps/docs/docs/integrations/pi-hole/index.mdx
+++ b/apps/docs/docs/integrations/pi-hole/index.mdx
@@ -1,47 +1,54 @@
 ---
-title: 'Pi-hole'
+title: "Pi-hole"
 description: "Pi-hole is a network-wide ad blocker that acts as a DNS sinkhole, blocking unwanted content and improving your browsing experience."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconAd, IconDeviceGamepad } from "@tabler/icons-react";
-import Alert from '@theme/Admonition';
-import { dnsHoleSummaryWidget } from '@site/docs/widgets/dns-hole-summary';
-import { dnsHoleControlsWidget } from '@site/docs/widgets/dns-hole-controls';
-import { piHoleIntegration } from '.';
+import Alert from "@theme/Admonition";
+import { dnsHoleSummaryWidget } from "@site/docs/widgets/dns-hole-summary";
+import { dnsHoleControlsWidget } from "@site/docs/widgets/dns-hole-controls";
+import { piHoleIntegration } from ".";
 
+<IntegrationHeader integration={piHoleIntegration} categories={["DNS Hole"]} />
 
-<IntegrationHeader
-    integration={piHoleIntegration}
-    categories={['DNS Hole']}
-/>
-
-<Alert type="note" className='my-2'>
-    Homarr supports both Pi-hole v5 and v6. It automatically detects the version and uses the correct API.
+<Alert type="note" className="my-2">
+  Homarr supports both Pi-hole v5 and v6. It automatically detects the version and uses the correct API.
 </Alert>
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: dnsHoleSummaryWidget,
-    },{
-        widget: dnsHoleControlsWidget
-    }]}
+  items={[
+    {
+      widget: dnsHoleSummaryWidget,
+    },
+    {
+      widget: dnsHoleControlsWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: [],
-    body: "Please note, that in v6 of Pi-hole you no longer specify an API key, but instead either a password or application password. We suggest to use the application password when possible."
-}, {
-    credentials: [],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+      body: "Please note, that in v6 of Pi-hole you no longer specify an API key, but instead either a password or application password. We suggest to use the application password when possible.",
+    },
+    {
+      credentials: [],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/plex/index.mdx b/apps/docs/docs/integrations/plex/index.mdx
index b6394b918..b6e35a6e3 100644
--- a/apps/docs/docs/integrations/plex/index.mdx
+++ b/apps/docs/docs/integrations/plex/index.mdx
@@ -1,41 +1,47 @@
 ---
-title: 'Plex'
+title: "Plex"
 description: "Plex is a media server platform that allows you to organize, manage, and stream your personal media collection."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconVideo, IconTicket } from "@tabler/icons-react";
-import { plexIntegration } from '.';
-import { mediaServerWidget } from '@site/docs/widgets/media-server';
-import { mediaReleasesWidget } from '@site/docs/widgets/media-releases';
+import { plexIntegration } from ".";
+import { mediaServerWidget } from "@site/docs/widgets/media-server";
+import { mediaReleasesWidget } from "@site/docs/widgets/media-releases";
 
-
-<IntegrationHeader
-  integration={plexIntegration}
-  categories={['Media server']}
-/>
+<IntegrationHeader integration={plexIntegration} categories={["Media server"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[
-        { widget: mediaServerWidget }, 
-        { widget: mediaReleasesWidget }
-    ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: mediaServerWidget }, { widget: mediaReleasesWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: [
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [
         <span>
-            Follow the official <a href="https://support.plex.tv/articles/204059436-finding-an-authentication-token-x-plex-token/" target="_blank" rel="noopener noreferrer">Plex documentation</a> to find your authentication token.
-        </span>
-    ]
-}]} />
\ No newline at end of file
+          Follow the official{" "}
+          <a
+            href="https://support.plex.tv/articles/204059436-finding-an-authentication-token-x-plex-token/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Plex documentation
+          </a>{" "}
+          to find your authentication token.
+        </span>,
+      ],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/prowlarr/index.mdx b/apps/docs/docs/integrations/prowlarr/index.mdx
index 0c5561f91..b3624a97e 100644
--- a/apps/docs/docs/integrations/prowlarr/index.mdx
+++ b/apps/docs/docs/integrations/prowlarr/index.mdx
@@ -1,32 +1,34 @@
 ---
-title: 'Prowlarr'
+title: "Prowlarr"
 description: "Prowlarr is an indexer manager for Usenet and BitTorrent, providing a unified interface to manage your indexers."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconHeartRateMonitor } from "@tabler/icons-react";
-import { prowlarrIntegration } from '.';
-import { indexerManagerWidget } from '@site/docs/widgets/indexer-manager';
+import { prowlarrIntegration } from ".";
+import { indexerManagerWidget } from "@site/docs/widgets/indexer-manager";
 
-<IntegrationHeader
-  integration={prowlarrIntegration}
-  categories={['Indexer']}
-/>
+<IntegrationHeader integration={prowlarrIntegration} categories={["Indexer"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[{ widget: indexerManagerWidget }]}
-/>
+
+<IntegrationCapabilites items={[{ widget: indexerManagerWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/proxmox/index.mdx b/apps/docs/docs/integrations/proxmox/index.mdx
index 4ea8eda98..f038dd007 100644
--- a/apps/docs/docs/integrations/proxmox/index.mdx
+++ b/apps/docs/docs/integrations/proxmox/index.mdx
@@ -1,103 +1,107 @@
 ---
-title: 'Proxmox'
+title: "Proxmox"
 description: "Proxmox is a powerful open-source virtualization platform that allows you to run virtual machines and containers."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconHeartRateMonitor } from "@tabler/icons-react";
-import { proxmoxIntegration } from '.';
-import Alert from '@theme/Admonition'
-import { healthMonitoringWidget } from '@site/docs/widgets/health-monitoring';
-import { systemResourcesWidget } from '@site/docs/widgets/system-resources';
+import { proxmoxIntegration } from ".";
+import Alert from "@theme/Admonition";
+import { healthMonitoringWidget } from "@site/docs/widgets/health-monitoring";
+import { systemResourcesWidget } from "@site/docs/widgets/system-resources";
 
-<IntegrationHeader
-  integration={proxmoxIntegration}
-  categories={['System monitoring']}
-/>
+<IntegrationHeader integration={proxmoxIntegration} categories={["System monitoring"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[
-        { widget: healthMonitoringWidget },
-        
-    ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: healthMonitoringWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    header: <Alert type="caution">
-        The Proxmox API may not work with Linux PAM standard authentication. It is strongly recommended to use the Proxmox VE authentication server realm when creating your API user.
-    </Alert>,
-    credentials: ['username', 'tokenId', 'realm', 'apiKey'],
-    steps: [
+
+<IntegrationSecrets
+  secrets={[
+    {
+      header: (
+        <Alert type="caution">
+          The Proxmox API may not work with Linux PAM standard authentication. It is strongly recommended to use the
+          Proxmox VE authentication server realm when creating your API user.
+        </Alert>
+      ),
+      credentials: ["username", "tokenId", "realm", "apiKey"],
+      steps: [
         "Navigate to the Proxmox portal, click on Datacenter",
         "Expand Permissions, click on Groups",
         "Click the Create button",
         "Name the group something informative, like api-users",
         "Click on the Permissions 'folder'",
         <>
-            Click Add {"->"} Group Permission
-            <ul>
-                <li>Path: /</li>
-                <li>Group: group from Step 4 above</li>
-                <li>Role: PVEAuditor</li>
-                <li>Propagate: Checked</li>
-            </ul>
+          Click Add {"->"} Group Permission
+          <ul>
+            <li>Path: /</li>
+            <li>Group: group from Step 4 above</li>
+            <li>Role: PVEAuditor</li>
+            <li>Propagate: Checked</li>
+          </ul>
         </>,
         "Expand Permissions, click on Users",
         <>
-            Click the Add button
-            <ul>
-                <li>User name: something informative like api</li>
-                <li>Realm: Proxmox VE authentication server</li>
-                <li>Password: create a secure password for the user</li>
-                <li>Confirm Password: re-enter the password</li>
-                <li>Group: group from Step 4 above</li>
-            </ul>
+          Click the Add button
+          <ul>
+            <li>User name: something informative like api</li>
+            <li>Realm: Proxmox VE authentication server</li>
+            <li>Password: create a secure password for the user</li>
+            <li>Confirm Password: re-enter the password</li>
+            <li>Group: group from Step 4 above</li>
+          </ul>
         </>,
         "Expand Permissions, click on API Tokens",
         <>
-            Click the Add button
-            <ul>
-                <li>User: user from Step 8 above</li>
-                <li>Token ID: something informative like the application or purpose like homarr</li>
-                <li>Privilege Separation: unchecked</li>
-            </ul>
+          Click the Add button
+          <ul>
+            <li>User: user from Step 8 above</li>
+            <li>Token ID: something informative like the application or purpose like homarr</li>
+            <li>Privilege Separation: unchecked</li>
+          </ul>
         </>,
         "Copy the Secret that is shown in Step 10 because it is only shown once",
         "Go back to the 'Permissions' menu",
         <>
-            Click Add {"->"} API Token Permission
-            <ul>
-                <li>Path: /</li>
-                <li>API Token: select the API token created in Step 10</li>
-                <li>Role: PVE Auditor</li>
-                <li>Propagate: Checked</li>
-            </ul>
+          Click Add {"->"} API Token Permission
+          <ul>
+            <li>Path: /</li>
+            <li>API Token: select the API token created in Step 10</li>
+            <li>Role: PVE Auditor</li>
+            <li>Propagate: Checked</li>
+          </ul>
         </>,
-        ],
-    body: <>
-        <span>
-            Sometimes you'll also find the <code>api@pve!homarr</code> format, 
-            within Homarr you'll have to split it up into:
-        </span>
-        <ul>
+      ],
+      body: (
+        <>
+          <span>
+            Sometimes you'll also find the <code>api@pve!homarr</code> format, within Homarr you'll have to split it up
+            into:
+          </span>
+          <ul>
             <li>
-                <b>Username:</b> api
+              <b>Username:</b> api
             </li>
             <li>
-                <b>Realm:</b> pve
+              <b>Realm:</b> pve
             </li>
             <li>
-                <b>Token ID:</b> homarr
+              <b>Token ID:</b> homarr
             </li>
-        </ul>
-    </>
-}]} />
\ No newline at end of file
+          </ul>
+        </>
+      ),
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/q-bittorent/index.mdx b/apps/docs/docs/integrations/q-bittorent/index.mdx
index ae85fc0ea..0bf2474ec 100644
--- a/apps/docs/docs/integrations/q-bittorent/index.mdx
+++ b/apps/docs/docs/integrations/q-bittorent/index.mdx
@@ -1,37 +1,39 @@
 ---
-title: 'qBittorrent'
+title: "qBittorrent"
 description: "qBittorrent is a free and open-source BitTorrent client."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconDownload } from "@tabler/icons-react";
-import { qBittorentIntegration } from '.';
-import Alert from '@theme/Admonition';
-import { downloadsWidget } from '@site/docs/widgets/downloads';
+import { qBittorentIntegration } from ".";
+import Alert from "@theme/Admonition";
+import { downloadsWidget } from "@site/docs/widgets/downloads";
 
-
-<IntegrationHeader
-  integration={qBittorentIntegration}
-  categories={['Torrent client']}
-/>
+<IntegrationHeader integration={qBittorentIntegration} categories={["Torrent client"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[{ widget: downloadsWidget }]}
-/>
+
+<IntegrationCapabilites items={[{ widget: downloadsWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: []
-},{
-    credentials: ['username', 'password'],
-    steps: [],
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+    {
+      credentials: ["username", "password"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/radarr/index.mdx b/apps/docs/docs/integrations/radarr/index.mdx
index 286e1b0b7..09548cab7 100644
--- a/apps/docs/docs/integrations/radarr/index.mdx
+++ b/apps/docs/docs/integrations/radarr/index.mdx
@@ -1,33 +1,34 @@
 ---
-title: 'Radarr'
+title: "Radarr"
 description: "Radarr is a movie management tool that automates the process of downloading, sorting, and renaming movies."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconCalendar } from "@tabler/icons-react";
-import { radarrIntegration } from '.';
-import { calendarWidget } from '@site/docs/widgets/calendar';
+import { radarrIntegration } from ".";
+import { calendarWidget } from "@site/docs/widgets/calendar";
 
-
-<IntegrationHeader
-  integration={radarrIntegration}
-  categories={['Media manager', "Servarr"]}
-/>
+<IntegrationHeader integration={radarrIntegration} categories={["Media manager", "Servarr"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[{ widget: calendarWidget }]}
-/>
+
+<IntegrationCapabilites items={[{ widget: calendarWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/readarr/index.mdx b/apps/docs/docs/integrations/readarr/index.mdx
index a2c153a91..aec31fe1a 100644
--- a/apps/docs/docs/integrations/readarr/index.mdx
+++ b/apps/docs/docs/integrations/readarr/index.mdx
@@ -1,33 +1,34 @@
 ---
-title: 'Readarr'
+title: "Readarr"
 description: "Readarr is a book management tool that automates the process of downloading, sorting, and renaming books."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconCalendar } from "@tabler/icons-react";
-import { readarrIntegration } from '.';
-import { calendarWidget } from '@site/docs/widgets/calendar';
+import { readarrIntegration } from ".";
+import { calendarWidget } from "@site/docs/widgets/calendar";
 
-
-<IntegrationHeader
-  integration={readarrIntegration}
-  categories={['Media manager', "Servarr"]}
-/>
+<IntegrationHeader integration={readarrIntegration} categories={["Media manager", "Servarr"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[{ widget: calendarWidget }]}
-/>
+
+<IntegrationCapabilites items={[{ widget: calendarWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/sabnzbd/index.mdx b/apps/docs/docs/integrations/sabnzbd/index.mdx
index 5de72d8c3..8c91c6fef 100644
--- a/apps/docs/docs/integrations/sabnzbd/index.mdx
+++ b/apps/docs/docs/integrations/sabnzbd/index.mdx
@@ -1,34 +1,35 @@
 ---
-title: 'SABnzbd'
+title: "SABnzbd"
 description: "SABnzbd is an Open Source Binary Newsreader."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconDownload } from "@tabler/icons-react";
-import { sabnzbdIntegration } from '.';
-import Alert from '@theme/Admonition';
-import { downloadsWidget } from '@site/docs/widgets/downloads';
+import { sabnzbdIntegration } from ".";
+import Alert from "@theme/Admonition";
+import { downloadsWidget } from "@site/docs/widgets/downloads";
 
-
-<IntegrationHeader
-  integration={sabnzbdIntegration}
-  categories={['Usenet client']}
-/>
+<IntegrationHeader integration={sabnzbdIntegration} categories={["Usenet client"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[{ widget: downloadsWidget}]}
-/>
+
+<IntegrationCapabilites items={[{ widget: downloadsWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: [],
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/seerr/index.mdx b/apps/docs/docs/integrations/seerr/index.mdx
index 81b7e0fb1..a1e30798e 100644
--- a/apps/docs/docs/integrations/seerr/index.mdx
+++ b/apps/docs/docs/integrations/seerr/index.mdx
@@ -1,45 +1,52 @@
 ---
-title: 'Seerr'
+title: "Seerr"
 description: "Seerr is a self-hosted media request management system that integrates with various media servers."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconZoomQuestion, IconChartBar, IconSearch } from "@tabler/icons-react";
-import { seerrIntegration } from '.';
-import { mediaRequestListWidget } from '@site/docs/widgets/media-request-list';
-import { mediaRequestStatsWidget } from '@site/docs/widgets/media-request-stats';
+import { seerrIntegration } from ".";
+import { mediaRequestListWidget } from "@site/docs/widgets/media-request-list";
+import { mediaRequestStatsWidget } from "@site/docs/widgets/media-request-stats";
 
-
-<IntegrationHeader
-  integration={seerrIntegration}
-  categories={['Media requests']}
-/>
+<IntegrationHeader integration={seerrIntegration} categories={["Media requests"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: mediaRequestListWidget
-    }, {
-        widget: mediaRequestStatsWidget
-    }, {
-        capability: {
-            icon: IconSearch,
-            name: "Media Search",
-            description: "Search for movies and TV shows directly from Spotlight and request them.",
-            path: "../../management/search-engines/#media-request-search"
-        }
-    }]}
+  items={[
+    {
+      widget: mediaRequestListWidget,
+    },
+    {
+      widget: mediaRequestStatsWidget,
+    },
+    {
+      capability: {
+        icon: IconSearch,
+        name: "Media Search",
+        description: "Search for movies and TV shows directly from Spotlight and request them.",
+        path: "../../management/search-engines/#media-request-search",
+      },
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/slskd/index.mdx b/apps/docs/docs/integrations/slskd/index.mdx
index 70674cb04..705ab43c0 100644
--- a/apps/docs/docs/integrations/slskd/index.mdx
+++ b/apps/docs/docs/integrations/slskd/index.mdx
@@ -1,34 +1,39 @@
 ---
-title: 'Slskd'
+title: "Slskd"
 description: "A modern client-server application for the Soulseek file sharing network."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { slskdIntegration } from '.';
-import { downloadsWidget } from '@site/docs/widgets/downloads';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { slskdIntegration } from ".";
+import { downloadsWidget } from "@site/docs/widgets/downloads";
 
-
-<IntegrationHeader
-    integration={slskdIntegration}
-    categories={['System Monitoring']}
-/>
+<IntegrationHeader integration={slskdIntegration} categories={["System Monitoring"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: downloadsWidget
-    }]}
+  items={[
+    {
+      widget: downloadsWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ["apiKey"],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/sonarr/index.mdx b/apps/docs/docs/integrations/sonarr/index.mdx
index 7dc3c7a64..c65d3ce3d 100644
--- a/apps/docs/docs/integrations/sonarr/index.mdx
+++ b/apps/docs/docs/integrations/sonarr/index.mdx
@@ -1,33 +1,34 @@
 ---
-title: 'Sonarr'
+title: "Sonarr"
 description: "Sonarr is a TV series management tool that automates the process of downloading, sorting, and renaming episodes."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconCalendar } from "@tabler/icons-react";
-import { sonarrIntegration } from '.';
-import { calendarWidget } from '@site/docs/widgets/calendar';
+import { sonarrIntegration } from ".";
+import { calendarWidget } from "@site/docs/widgets/calendar";
 
-
-<IntegrationHeader
-  integration={sonarrIntegration}
-  categories={['Media manager', "Servarr"]}
-/>
+<IntegrationHeader integration={sonarrIntegration} categories={["Media manager", "Servarr"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[{ widget: calendarWidget }]}
-/>
+
+<IntegrationCapabilites items={[{ widget: calendarWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/speedtest-tracker/index.mdx b/apps/docs/docs/integrations/speedtest-tracker/index.mdx
index 2041dad5c..146a09eca 100644
--- a/apps/docs/docs/integrations/speedtest-tracker/index.mdx
+++ b/apps/docs/docs/integrations/speedtest-tracker/index.mdx
@@ -1,34 +1,39 @@
 ---
-title: 'Speedtest Tracker'
-description: 'Speedtest Tracker is a self-hosted internet performance tracking application.'
+title: "Speedtest Tracker"
+description: "Speedtest Tracker is a self-hosted internet performance tracking application."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { speedtestTrackerIntegration } from '.';
-import { speedtestTrackerWidget } from '@site/docs/widgets/speedtest-tracker';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { speedtestTrackerIntegration } from ".";
+import { speedtestTrackerWidget } from "@site/docs/widgets/speedtest-tracker";
 
-
-<IntegrationHeader
-    integration={speedtestTrackerIntegration}
-    categories={['Speedtest']}
-/>
+<IntegrationHeader integration={speedtestTrackerIntegration} categories={["Speedtest"]} />
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: speedtestTrackerWidget
-    }]}
+  items={[
+    {
+      widget: speedtestTrackerWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: []
-}]} />
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/synology/index.mdx b/apps/docs/docs/integrations/synology/index.mdx
index 4d836513e..c3f50fc3f 100644
--- a/apps/docs/docs/integrations/synology/index.mdx
+++ b/apps/docs/docs/integrations/synology/index.mdx
@@ -19,11 +19,7 @@ import Alert from "@theme/Admonition";
 ### Widgets & Capabilities
 
 <IntegrationCapabilites
-  items={[
-    { widget: healthMonitoringWidget },
-    { widget: systemResourcesWidget },
-    { widget: systemDisksWidget },
-  ]}
+  items={[{ widget: healthMonitoringWidget }, { widget: systemResourcesWidget }, { widget: systemDisksWidget }]}
 />
 
 ### Supported metrics
diff --git a/apps/docs/docs/integrations/tdarr/index.mdx b/apps/docs/docs/integrations/tdarr/index.mdx
index 89a0730d2..47956343d 100644
--- a/apps/docs/docs/integrations/tdarr/index.mdx
+++ b/apps/docs/docs/integrations/tdarr/index.mdx
@@ -1,36 +1,38 @@
 ---
-title: 'Tdarr'
+title: "Tdarr"
 description: "Tdarr is a distributed media transcoding system that allows you to process and optimize your media files across multiple nodes."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconTransform } from "@tabler/icons-react";
-import { tdarrIntegration } from '.';
-import { mediaTranscodingWidget } from '@site/docs/widgets/media-transcoding';
+import { tdarrIntegration } from ".";
+import { mediaTranscodingWidget } from "@site/docs/widgets/media-transcoding";
 
-
-<IntegrationHeader
-  integration={tdarrIntegration}
-  categories={['Media Transcoding']}
-/>
+<IntegrationHeader integration={tdarrIntegration} categories={["Media Transcoding"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[{ widget: mediaTranscodingWidget }]}
-/>
+
+<IntegrationCapabilites items={[{ widget: mediaTranscodingWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: []
-}, {
-    credentials: [],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [],
+    },
+    {
+      credentials: [],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/technitium-dns/index.mdx b/apps/docs/docs/integrations/technitium-dns/index.mdx
index 3ca8bda7c..3bf39d820 100644
--- a/apps/docs/docs/integrations/technitium-dns/index.mdx
+++ b/apps/docs/docs/integrations/technitium-dns/index.mdx
@@ -1,62 +1,72 @@
 ---
-title: 'Technitium DNS'
+title: "Technitium DNS"
 description: "Technitium DNS Server is a self-hosted DNS server with ad-blocking and network-wide filtering capabilities."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import Alert from '@theme/Admonition';
-import { technitiumDnsIntegration } from '.';
-import { dnsHoleSummaryWidget } from '@site/docs/widgets/dns-hole-summary';
-import { dnsHoleControlsWidget } from '@site/docs/widgets/dns-hole-controls';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import Alert from "@theme/Admonition";
+import { technitiumDnsIntegration } from ".";
+import { dnsHoleSummaryWidget } from "@site/docs/widgets/dns-hole-summary";
+import { dnsHoleControlsWidget } from "@site/docs/widgets/dns-hole-controls";
 
-<IntegrationHeader
-    integration={technitiumDnsIntegration}
-    categories={['DNS Hole']}
-/>
+<IntegrationHeader integration={technitiumDnsIntegration} categories={["DNS Hole"]} />
 
-<Alert type="note" className='my-2'>
-    Homarr supports Technitium DNS v11 and above. The correct API version is detected automatically - no manual configuration is required.
+<Alert type="note" className="my-2">
+  Homarr supports Technitium DNS v11 and above. The correct API version is detected automatically - no manual
+  configuration is required.
 </Alert>
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[{
-        widget: dnsHoleSummaryWidget,
-    },{
-        widget: dnsHoleControlsWidget
-    }]}
+  items={[
+    {
+      widget: dnsHoleSummaryWidget,
+    },
+    {
+      widget: dnsHoleControlsWidget,
+    },
+  ]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
 
-<Alert type="info" className='my-2'>
-    The **API token** option is recommended. API tokens are non-expiring and do not require storing your admin password in Homarr.
-    Username and password authentication uses a session token that expires after inactivity, triggering a silent re-login on the next request.
+<Alert type="info" className="my-2">
+  The **API token** option is recommended. API tokens are non-expiring and do not require storing your admin password in
+  Homarr. Username and password authentication uses a session token that expires after inactivity, triggering a silent
+  re-login on the next request.
 </Alert>
 
-<Alert type="warning" className='my-2'>
-    The **DNS Hole Controls** widget (enabling, disabling, and timed disabling of blocking) requires the token to have settings-level permissions.
-    The **DNS Hole Summary** widget (stats only) works with any valid token.
-    If Homarr cannot read the blocking status due to insufficient permissions, the status indicator will be hidden but statistics will still be shown.
+<Alert type="warning" className="my-2">
+  The **DNS Hole Controls** widget (enabling, disabling, and timed disabling of blocking) requires the token to have
+  settings-level permissions. The **DNS Hole Summary** widget (stats only) works with any valid token. If Homarr cannot
+  read the blocking status due to insufficient permissions, the status indicator will be hidden but statistics will
+  still be shown.
 </Alert>
 
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: [
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [
         "Open the Technitium DNS web console and sign in.",
-        "Click on your username in the top-right corner and select \"Create API Token\".",
-        "Give the token a name (e.g. \"Homarr\") and click \"Create Token\".",
-        "Copy the generated token and paste it into the API Key field in Homarr."
-    ]
-}, {
-    credentials: ['username', 'password'],
-    steps: [],
-    body: "Enter your Technitium DNS admin credentials. Homarr will exchange them for a session token and transparently re-authenticate when the session expires."
-}]} />
+        'Click on your username in the top-right corner and select "Create API Token".',
+        'Give the token a name (e.g. "Homarr") and click "Create Token".',
+        "Copy the generated token and paste it into the API Key field in Homarr.",
+      ],
+    },
+    {
+      credentials: ["username", "password"],
+      steps: [],
+      body: "Enter your Technitium DNS admin credentials. Homarr will exchange them for a session token and transparently re-authenticate when the session expires.",
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/tracearr/index.mdx b/apps/docs/docs/integrations/tracearr/index.mdx
index dc4dde8e0..03954a1cc 100644
--- a/apps/docs/docs/integrations/tracearr/index.mdx
+++ b/apps/docs/docs/integrations/tracearr/index.mdx
@@ -1,38 +1,37 @@
 ---
-title: 'Tracearr'
+title: "Tracearr"
 description: "Tracearr is a comprehensive media monitoring solution that tracks streams, user activity, and policy violations in your media server (including Plex, Jellyfin, Emby)."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
-import { tracearrIntegration } from '.';
-import { tracearrWidget } from '@site/docs/widgets/tracearr';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { tracearrIntegration } from ".";
+import { tracearrWidget } from "@site/docs/widgets/tracearr";
 
-
-<IntegrationHeader
-  integration={tracearrIntegration}
-  categories={['Media Monitoring']}
-/>
+<IntegrationHeader integration={tracearrIntegration} categories={["Media Monitoring"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[
-        { widget: tracearrWidget }
-    ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: tracearrWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: [
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [
         <span>
-            In Tracearr, go to <strong>Settings → API</strong> and generate or copy your API key.
-        </span>
-    ]
-}]} />
+          In Tracearr, go to <strong>Settings → API</strong> and generate or copy your API key.
+        </span>,
+      ],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/transmission/index.mdx b/apps/docs/docs/integrations/transmission/index.mdx
index da0c0209e..c17dbe862 100644
--- a/apps/docs/docs/integrations/transmission/index.mdx
+++ b/apps/docs/docs/integrations/transmission/index.mdx
@@ -1,34 +1,35 @@
 ---
-title: 'Transmission'
+title: "Transmission"
 description: "A Fast, Easy and Free Bittorrent Client."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconDownload } from "@tabler/icons-react";
-import { transmissionIntegration } from '.';
-import Alert from '@theme/Admonition';
-import { downloadsWidget } from '@site/docs/widgets/downloads';
+import { transmissionIntegration } from ".";
+import Alert from "@theme/Admonition";
+import { downloadsWidget } from "@site/docs/widgets/downloads";
 
-
-<IntegrationHeader
-  integration={transmissionIntegration}
-  categories={['Torrent client']}
-/>
+<IntegrationHeader integration={transmissionIntegration} categories={["Torrent client"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[{ widget: downloadsWidget }]}
-/>
+
+<IntegrationCapabilites items={[{ widget: downloadsWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['username', 'password'],
-    steps: [],
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["username", "password"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/truenas/index.mdx b/apps/docs/docs/integrations/truenas/index.mdx
index 5d29a7019..3ec09bbcf 100644
--- a/apps/docs/docs/integrations/truenas/index.mdx
+++ b/apps/docs/docs/integrations/truenas/index.mdx
@@ -1,61 +1,67 @@
 ---
-title: 'TrueNAS'
+title: "TrueNAS"
 description: "Enterprise network-attached storage for your home, office, and cloud."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { truenasIntegration } from '.';
-import { systemResourcesWidget } from '@site/docs/widgets/system-resources';
-import { healthMonitoringWidget } from '@site/docs/widgets/health-monitoring';
-import Alert from '@theme/Admonition';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { truenasIntegration } from ".";
+import { systemResourcesWidget } from "@site/docs/widgets/system-resources";
+import { healthMonitoringWidget } from "@site/docs/widgets/health-monitoring";
+import Alert from "@theme/Admonition";
 
-
-<IntegrationHeader
-  integration={truenasIntegration}
-  categories={['NAS', 'Hardware']}
-/>
+<IntegrationHeader integration={truenasIntegration} categories={["NAS", "Hardware"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[
-      { widget: healthMonitoringWidget },
-      { widget: systemResourcesWidget },
-      ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: healthMonitoringWidget }, { widget: systemResourcesWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 <Alert type="info" title="Use the HTTPS address">
-    TrueNAS only serves its API over HTTPS, so enter the <code>https://</code> URL of your TrueNAS web interface. If it uses a self-signed certificate (the default), add it under <a href="/docs/management/certificates">Management &gt; Tools &gt; Certificates</a> so Homarr can establish the connection.
+  TrueNAS only serves its API over HTTPS, so enter the <code>https://</code> URL of your TrueNAS web interface. If it
+  uses a self-signed certificate (the default), add it under{" "}
+  <a href="/docs/management/certificates">Management &gt; Tools &gt; Certificates</a> so Homarr can establish the
+  connection.
 </Alert>
 
 ### Secrets
-<IntegrationSecrets secrets={[
+
+<IntegrationSecrets
+  secrets={[
     {
-        credentials: ['apiKey'],
-        header: <Alert type="tip" title="Recommended">
-            API key authentication is the recommended method. It works across current TrueNAS versions and does not depend on user group membership.
-        </Alert>,
-        steps: [
-            "In the TrueNAS web interface, click your user avatar in the top-right corner and select \"API Keys\".",
-            "Click \"Add\", give the key a name such as \"Homarr\", and confirm.",
-            "Copy the generated key immediately - TrueNAS only shows it once - and paste it as the API Key when creating the integration in Homarr.",
-        ],
+      credentials: ["apiKey"],
+      header: (
+        <Alert type="tip" title="Recommended">
+          API key authentication is the recommended method. It works across current TrueNAS versions and does not depend
+          on user group membership.
+        </Alert>
+      ),
+      steps: [
+        'In the TrueNAS web interface, click your user avatar in the top-right corner and select "API Keys".',
+        'Click "Add", give the key a name such as "Homarr", and confirm.',
+        "Copy the generated key immediately - TrueNAS only shows it once - and paste it as the API Key when creating the integration in Homarr.",
+      ],
     },
     {
-        credentials: ['username', 'password'],
-        steps: [
-            "In the TrueNAS web interface, go to \"Credentials\" > \"Users\" > \"Add\" and create a user with a secure password.",
-            "Grant the user administrative access so Homarr can read system, pool, and reporting data.",
-            "Save the user and create the integration in Homarr with these credentials.",
-        ],
-        body: <Alert type="caution" title="Administrative access required">
-            The account must have administrative API access. The <code>auxiliary_administrator</code> group was removed in TrueNAS 25.10; on that version or newer, use API key authentication instead, or assign the user a full-admin role.
-        </Alert>,
+      credentials: ["username", "password"],
+      steps: [
+        'In the TrueNAS web interface, go to "Credentials" > "Users" > "Add" and create a user with a secure password.',
+        "Grant the user administrative access so Homarr can read system, pool, and reporting data.",
+        "Save the user and create the integration in Homarr with these credentials.",
+      ],
+      body: (
+        <Alert type="caution" title="Administrative access required">
+          The account must have administrative API access. The <code>auxiliary_administrator</code> group was removed in
+          TrueNAS 25.10; on that version or newer, use API key authentication instead, or assign the user a full-admin
+          role.
+        </Alert>
+      ),
     },
-]} />
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/umami/index.mdx b/apps/docs/docs/integrations/umami/index.mdx
index 8aeb3c194..6aa5ddced 100644
--- a/apps/docs/docs/integrations/umami/index.mdx
+++ b/apps/docs/docs/integrations/umami/index.mdx
@@ -1,53 +1,52 @@
 ---
-title: 'Umami'
-description: 'Privacy-focused, open-source web analytics'
+title: "Umami"
+description: "Privacy-focused, open-source web analytics"
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { umamiIntegration } from '.';
-import { umamiWidget } from '../../widgets/umami';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { umamiIntegration } from ".";
+import { umamiWidget } from "../../widgets/umami";
 
-<IntegrationHeader
-  integration={umamiIntegration}
-  categories={['Analytics']}
-/>
+<IntegrationHeader integration={umamiIntegration} categories={["Analytics"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-  items={[
-    { widget: umamiWidget }
-  ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: umamiWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 :::tip URL configuration
+
 - **Umami Cloud:** Use `https://api.umami.is/v1`
 - **Self-hosted:** Use `http://your-umami-host:3000/api`
-:::
+  :::
 
 ### Secrets
-<IntegrationSecrets secrets={[
-  {
-    credentials: ['apiKey'],
-    steps: [
-      'Log in to your Umami instance (or Umami Cloud at https://cloud.umami.is)',
-      'Open Settings → API Keys',
-      'Click "Create API key"',
-      'Enter a name, e.g. "Homarr", and save',
-      'Copy the generated API key into Homarr',
-    ]
-  },
-  {
-    credentials: ['username', 'password'],
-    steps: [
-      'Use the username and password of your Umami account',
-      'Note: username/password auth is for self-hosted instances only - Umami Cloud requires an API key',
-    ]
-  }
-]} />
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [
+        "Log in to your Umami instance (or Umami Cloud at https://cloud.umami.is)",
+        "Open Settings → API Keys",
+        'Click "Create API key"',
+        'Enter a name, e.g. "Homarr", and save',
+        "Copy the generated API key into Homarr",
+      ],
+    },
+    {
+      credentials: ["username", "password"],
+      steps: [
+        "Use the username and password of your Umami account",
+        "Note: username/password auth is for self-hosted instances only - Umami Cloud requires an API key",
+      ],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/unifi-controller/index.mdx b/apps/docs/docs/integrations/unifi-controller/index.mdx
index 134ce91b8..f25cecaac 100644
--- a/apps/docs/docs/integrations/unifi-controller/index.mdx
+++ b/apps/docs/docs/integrations/unifi-controller/index.mdx
@@ -1,40 +1,40 @@
 ---
-title: 'Unifi Controller'
+title: "Unifi Controller"
 description: "Unifi Controller is a network management platform for Unifi devices."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import {IntegrationSecrets} from '@site/src/components/integrations/secrets';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
 import { IconTopologyFull } from "@tabler/icons-react";
-import { unifiControllerIntegration } from '.';
-import { networkControllerSummaryWidget } from '@site/docs/widgets/network-controller-summary';
-import { networkControllerStatusWidget } from '@site/docs/widgets/network-controller-status';
+import { unifiControllerIntegration } from ".";
+import { networkControllerSummaryWidget } from "@site/docs/widgets/network-controller-summary";
+import { networkControllerStatusWidget } from "@site/docs/widgets/network-controller-status";
 
-
-<IntegrationHeader
-  integration={unifiControllerIntegration}
-  categories={['Network controller']}
-/>
+<IntegrationHeader integration={unifiControllerIntegration} categories={["Network controller"]} />
 
 This integration is using the [node-unifi](https://www.npmjs.com/package/node-unifi) library under the hood to connect to the Unifi Controller.
 Therfore it should support CloudKey Gen1, CloudKey Gen2, UnifiOS-based UDM-Pro controllers as well as self-hosted UniFi controllers.
 
 ### Widgets & Capabilities
+
 <IntegrationCapabilites
-    items={[
-        { widget: networkControllerSummaryWidget },
-        { widget: networkControllerStatusWidget}
-    ]}
+  items={[{ widget: networkControllerSummaryWidget }, { widget: networkControllerStatusWidget }]}
 />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['username', 'password'],
-    steps: []
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["username", "password"],
+      steps: [],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/unraid/index.mdx b/apps/docs/docs/integrations/unraid/index.mdx
index bd1546a78..a629fe844 100644
--- a/apps/docs/docs/integrations/unraid/index.mdx
+++ b/apps/docs/docs/integrations/unraid/index.mdx
@@ -1,59 +1,71 @@
 ---
-title: 'Unraid'
+title: "Unraid"
 description: "Versatile operating system that lets you run applications, virtual machines, and storage devices on your server"
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { unraidIntegration } from '.';
-import { systemResourcesWidget } from '@site/docs/widgets/system-resources';
-import { healthMonitoringWidget } from '@site/docs/widgets/health-monitoring';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { unraidIntegration } from ".";
+import { systemResourcesWidget } from "@site/docs/widgets/system-resources";
+import { healthMonitoringWidget } from "@site/docs/widgets/health-monitoring";
 
 import imgManagement from "./imgs/unraid-management.png";
 import imgCreateApiKey from "./imgs/unraid-create-api-key.png";
 import imgCopyApiKey from "./imgs/copy-api-key.png";
 import imgSelectApikeyPreset from "./imgs/unraid-select-api-key-preset.png";
 
-
-<IntegrationHeader
-  integration={unraidIntegration}
-  categories={['NAS', 'Hardware']}
-/>
+<IntegrationHeader integration={unraidIntegration} categories={["NAS", "Hardware"]} />
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[
-      { widget: healthMonitoringWidget },
-      { widget: systemResourcesWidget },
-      ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: healthMonitoringWidget }, { widget: systemResourcesWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['apiKey'],
-    steps: [
-      <span>Are you using Unraid pre-7.2? If yes, please first <a href={"https://docs.unraid.net/API/#plugin-installation-pre-72-and-advanced-users"} target={"_blank"}>follow the steps here to install the Unraid API</a>.</span>,
-      <>
-        <span>Open the settings and open the management access</span><br/>
-        <img src={imgManagement} alt="Unraid management" style={{ height: 160 }} />
-      </>,
-      <>
-        <span>Click on the "API Keys" tab at the top and click on the "create API key" button. Choose "Create new"</span><br/>
-        <img src={imgCreateApiKey} alt="Unraid management" style={{ height: 120 }} />
-      </>,
-      <>
-        <span>Enter a suitable name for your API key (e.g. Homarr), select the "Viewer" preset and submit the modal.</span><br/>
-        <img src={imgSelectApikeyPreset} alt="Unraid management" style={{ height: 350 }} />
-      </>,
-      <>
-        <span>Last, copy the API key after your API key has been created</span><br/>
-        <img src={imgCopyApiKey} alt="Unraid management" style={{ height: 200 }} />
-      </>
-    ],
-}]} />
\ No newline at end of file
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["apiKey"],
+      steps: [
+        <span>
+          Are you using Unraid pre-7.2? If yes, please first{" "}
+          <a href={"https://docs.unraid.net/API/#plugin-installation-pre-72-and-advanced-users"} target={"_blank"}>
+            follow the steps here to install the Unraid API
+          </a>
+          .
+        </span>,
+        <>
+          <span>Open the settings and open the management access</span>
+          <br />
+          <img src={imgManagement} alt="Unraid management" style={{ height: 160 }} />
+        </>,
+        <>
+          <span>
+            Click on the "API Keys" tab at the top and click on the "create API key" button. Choose "Create new"
+          </span>
+          <br />
+          <img src={imgCreateApiKey} alt="Unraid management" style={{ height: 120 }} />
+        </>,
+        <>
+          <span>
+            Enter a suitable name for your API key (e.g. Homarr), select the "Viewer" preset and submit the modal.
+          </span>
+          <br />
+          <img src={imgSelectApikeyPreset} alt="Unraid management" style={{ height: 350 }} />
+        </>,
+        <>
+          <span>Last, copy the API key after your API key has been created</span>
+          <br />
+          <img src={imgCopyApiKey} alt="Unraid management" style={{ height: 200 }} />
+        </>,
+      ],
+    },
+  ]}
+/>
diff --git a/apps/docs/docs/integrations/uptime-kuma/index.mdx b/apps/docs/docs/integrations/uptime-kuma/index.mdx
index 63e6df82b..14834969f 100644
--- a/apps/docs/docs/integrations/uptime-kuma/index.mdx
+++ b/apps/docs/docs/integrations/uptime-kuma/index.mdx
@@ -1,43 +1,42 @@
 ---
-title: 'Uptime Kuma'
+title: "Uptime Kuma"
 description: "Uptime Kuma is a self-hosted monitoring tool that tracks the availability of your services and websites."
 hide_title: true
 ---
 
-import { IntegrationHeader } from '@site/src/components/integrations/header';
-import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
-import { AddingIntegration } from '@site/src/components/integrations/adding';
-import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
-import { uptimeKumaIntegration } from '.';
-import { uptimeKumaWidget } from '@site/docs/widgets/uptime-kuma';
+import { IntegrationHeader } from "@site/src/components/integrations/header";
+import { IntegrationCapabilites } from "@site/src/components/integrations/widgets";
+import { AddingIntegration } from "@site/src/components/integrations/adding";
+import { IntegrationSecrets } from "@site/src/components/integrations/secrets";
+import { uptimeKumaIntegration } from ".";
+import { uptimeKumaWidget } from "@site/docs/widgets/uptime-kuma";
 
-
-<IntegrationHeader
-    integration={uptimeKumaIntegration}
-    categories={['Monitoring']}
-/>
+<IntegrationHeader integration={uptimeKumaIntegration} categories={["Monitoring"]} />
 
 Uptime Kuma monitors the availability of your services and provides uptime statistics through its status page API.
 
 ### Widgets & Capabilities
-<IntegrationCapabilites
-    items={[
-        { widget: uptimeKumaWidget },
-    ]}
-/>
+
+<IntegrationCapabilites items={[{ widget: uptimeKumaWidget }]} />
 
 ### Adding the integration
+
 <AddingIntegration />
 
 ### Secrets
-<IntegrationSecrets secrets={[{
-    credentials: ['slug'],
-    steps: [
-        'Navigate to your Uptime Kuma instance',
-        'Go to Status Pages and create or select a status page',
+
+<IntegrationSecrets
+  secrets={[
+    {
+      credentials: ["slug"],
+      steps: [
+        "Navigate to your Uptime Kuma instance",
+        "Go to Status Pages and create or select a status page",
         'The slug is the URL path of your status page (e.g. "default" for /status/default)',
-    ]
-}]} />
+      ],
+    },
+  ]}
+/>
 
 :::tip
 If you don't specify a slug, Homarr will use `default` as the status page slug.
diff --git a/apps/docs/docs/management/api/index.mdx b/apps/docs/docs/management/api/index.mdx
index 2c5bd42e2..35e9f49e4 100644
--- a/apps/docs/docs/management/api/index.mdx
+++ b/apps/docs/docs/management/api/index.mdx
@@ -82,4 +82,33 @@ The OpenAPI and MCP APIs include board management endpoints for common automatio
 - Set desktop and mobile home boards for the current user
 - Configure global board defaults such as public home boards and status behavior
 
+Board layout responses identify each layout with a `mobile`, `base`, or `custom` role. Mobile and Base are protected. Layout-saving clients must preserve existing roles, keep Mobile at breakpoint `0`, keep Base as the highest breakpoint, and use unique custom breakpoints between them. The layout save operation returns the canonical saved layouts, including server-generated IDs for new custom layouts. A non-Base layout can be regenerated from Base with the protected reset operation.
+
 Use the interactive API reference to inspect the exact request body for each endpoint under the `boards` and `settings` tags.
+
+## Partial integration failures
+
+Multi-integration widget queries keep data from integrations that remain available. Calendar and media-server results include
+an optional `error` on a failed integration; media-request responses expose a `failedIntegrations` array, and the latest
+requests endpoint returns its items in `requests`. When every selected integration fails, the query returns an error instead
+of a partial response.
+
+### Saving dashboard layouts
+
+The dashboard editor saves item positions and sections as one board update.
+Canvas height follows its content automatically and does not require a separate API setting.
+Responsive layouts store optional left and right gutter widths from zero to three columns.
+Gutter columns are reserved from the layout's total column count, and changing them reflows affected items.
+
+## Get Custom Widget authoring resources
+
+Custom JSX v2 provides four HTTP discovery endpoints:
+
+- `GET /api/custom-widgets/authoring-prompt` returns the current prompt plus MCP and HTTP resource identifiers.
+- `GET /api/custom-widgets/schema` returns the canonical widget JSON Schema.
+- `GET /api/custom-widgets/components` returns the release-matched static component catalog.
+- `GET /api/custom-widgets/skill` returns the concise live `SKILL.md` plus skills.sh, source, and install metadata. Retrieve the schema, component catalog, and examples through their dedicated resources only when needed.
+
+Call `customWidget_configurationRequestUser` to create a temporary API source setup URL where the user can confirm their server URL and enter credentials. Do not construct or save this URL.
+
+Authenticated tRPC and MCP procedures support definition management, validation, previews, template patches, and credential writes. An exported definition does not contain credentials.
diff --git a/apps/docs/docs/management/backup.mdx b/apps/docs/docs/management/backup.mdx
index 558afb82e..1c86837a9 100644
--- a/apps/docs/docs/management/backup.mdx
+++ b/apps/docs/docs/management/backup.mdx
@@ -24,12 +24,12 @@ Navigate to `Management` → `Tools` → `Backup`. You must have **admin** permi
 
 Click the **Export** button in the export card. You'll be prompted to type `I understand` to confirm. Once confirmed, a ZIP file downloads containing:
 
-| File                 | Description                                                         |
-| -------------------- | ------------------------------------------------------------------- |
-| `db.sqlite`          | Full SQLite database with all entities                              |
-| `metadata.json`      | Backup metadata: Homarr version, creation timestamp, encryption key |
+| File            | Description                                                         |
+| --------------- | ------------------------------------------------------------------- |
+| `db.sqlite`     | Full SQLite database with all entities                              |
+| `metadata.json` | Backup metadata: Homarr version, creation timestamp, encryption key |
 
-The backup includes everything: apps, integrations, secrets, boards, users, groups, permissions, search engines, custom widgets, and server settings. (It just backs-up the whole database)
+The backup contains the complete database. It includes Custom Widgets and all other Homarr configuration.
 
 ## Restoring a Backup
 
diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx
index 07323fc12..d0921fb5c 100644
--- a/apps/docs/docs/management/boards/index.mdx
+++ b/apps/docs/docs/management/boards/index.mdx
@@ -9,11 +9,11 @@ tags:
   - Layout
 ---
 
-import iconColorImage from './img/icon-color.png'
-import itemRadiusImage from './img/item-radius.png'
-import layoutLargeImage from './img/layout-large.png'
-import layoutMediumImage from './img/layout-medium.png'
-import layoutSmallImage from './img/layout-small.png'
+import iconColorImage from "./img/icon-color.png";
+import itemRadiusImage from "./img/item-radius.png";
+import layoutLargeImage from "./img/layout-large.png";
+import layoutMediumImage from "./img/layout-medium.png";
+import layoutSmallImage from "./img/layout-small.png";
 
 Each dashboard is called a "board".
 You can create as many boards as you want.
@@ -24,24 +24,30 @@ Other boards can be viewed by direct links (e.g. my-homarr.com/board/smart-home)
 Names of boards must be unique because this will be used in the URL to load the desired board.
 
 ## Create a new board
+
 When creating a board, the availability of the board name will be checked for you.
 
 ![](./img/create-board-modal.png)
 
 ### Name
+
 The name must not include any special characters and must be at least one character long.
 Underscores and hyphen-minus are allowed.
 
 ### Column count
-Homarr has a complex drag and drop system that can be used from the browser.
-The column count defines how many horizontal columns are available to drag and drop elements to.
+
+The column count defines how many fixed-width cells are available in each row.
+One cell contains a `200 × 200` logical-pixel tile.
+Homarr scales the whole board uniformly instead of changing widget proportions, with horizontal scrolling when further shrinking would make controls too small.
 
 ### Public
+
 This will enable public access for everyone - regardless of whether they are logged in or not.
-This can be really useful if you want to have public boards in your company or for family and fiends.
+This can be really useful if you want to have public boards in your company or for family and friends.
 Modifications for public boards must be allowed explicitly using user groups and their permissions.
 
 ## Board settings
+
 You navigate to the board settings by clicking on these three dots:
 
 ![](./img/navigate-to-settings.png)
@@ -50,8 +56,12 @@ Alternatively, you can also navigate from the board page itself using the cog ic
 
 ![](./img/navigate-to-settings-2.png)
 
+All board settings are edited on a single page. Click the **Save changes** button in the save bar at the bottom to apply them, or **Discard** to restore the last saved values. The save bar only appears when you have unsaved changes. Access control and the Danger zone are independent sections and are applied immediately.
+
 ### General
+
 #### Page title
+
 This is the title that will be visible at the top left in the navigation bar:
 
 ![](./img/page-title.png)
@@ -59,6 +69,7 @@ This is the title that will be visible at the top left in the navigation bar:
 This field is optional and Homarr will fall back to "Homarr" if nothing is set.
 
 #### Meta title
+
 This is the secondary title of the page that is not directly visible in the page itself.
 Browser will use it to set the title of tabs:
 
@@ -67,78 +78,151 @@ Browser will use it to set the title of tabs:
 Homarr will fall back to the board name and a suffix if nothing is set.
 
 #### Logo image URL
+
 This is the URL that is used for the image at the top left.
 Homarr will fall back to the Homarr logo if nothing is set.
 
 #### Favicon image URL
+
 This is the URL that is used for the favicon in the tab title.
 Homarr will fall back to the Homarr logo if nothing is set.
 
 ### Layout
 
-In this section you can configure the different responsive layouts. Depending on your screens width the layout will change.
+In this section you can configure the different responsive layouts. Homarr selects the layout with the highest breakpoint that is not wider than the current screen, then scales its complete fixed-size canvas uniformly.
 
 ![](./img/layout-settings.png)
 
-On each element the position and size of items can be changed seperately.
-When adding a new layout the position and sizes will automatically be generated depending on the column count.
-When adding a new item / dynamic section that will always be 1x1 on each layout and placed on the first available position.
+Every board has two protected layouts:
+
+- **Mobile** starts at `0px` and uses three columns on new boards.
+- **Base** is the widest layout and starts at `768px` on new boards.
+
+Mobile and Base can be renamed and their column counts and rails can be changed, but they cannot be removed. You can add removable custom layouts between their breakpoints.
+
+Each layout stores independent positions and sizes. Moving or resizing a widget while editing Mobile does not move it in Base or any custom layout. New custom layouts are generated from Base and scaled to their selected column count.
+
+Use **Reset from Base** on Mobile or a custom layout to replace all of its positions and sizes with a newly generated version of Base. The layout's name, breakpoint, and column count are kept.
+
+Every `1 × 1` tile has a `200 × 200` logical-pixel content area, with a separate `24` logical-pixel gap between tiles. Homarr scales the whole canvas to the available width without shrinking below 75%; narrower screens scroll horizontally so controls remain accessible.
+
+The board edge is a hard drag boundary. Moving a tile outside it cancels the placement, while adding content can still create the rows it needs. New items use their widget's default size and new Containers use a useful `4 × 3` size when space allows.
 
 #### Name
 
-The name of the layout can be choosen freely. It is only used for the management and will not be visible on the board.
+The name of the layout can be chosen freely. It is only used for management and is not displayed on the board.
 
 #### Column count
 
-Amount of columns for this layout. Defines how many items can be placed in a row. When changed it will automatically adjust the position and size of the items.
+The total number of columns in the layout. Changing it projects the saved positions and sizes into the new grid width without overlap.
+
+#### Fixed rails
+
+Each layout can reserve a fixed left rail, a fixed right rail, or both. Set a rail width to zero to disable it, or choose one to three columns. Reserved rail columns reduce the main canvas width. Apps, widgets, and Containers in rails use the same fixed cell sizes and remain visible while the page scrolls.
 
 #### Breakpoint
 
-Minimum width of the screen where the layout will be used. 
-Once the minmum of the next layout is reached the layout will change.
+The minimum screen width where the layout is used. Mobile is fixed at `0px`. Custom breakpoints must be unique and sit between Mobile and Base. Base must remain the highest breakpoint.
+
+#### View and edit modes
+
+View mode renders a static board without executing the drag-and-drop editor.
+After the board is interactive, Homarr prepares the editor in the background for users who can modify it.
+Entering edit mode keeps the static board visible until that preparation finishes, then enables collision-aware movement and resizing without changing the board geometry.
+Widget content is inert in edit mode, so dragging anywhere on the content moves the tile instead of activating the widget; its settings button remains visible in the compact header above the tile.
+Dropping a tile into another tile's exact slot swaps their positions when both resulting placements fit without overlapping other content.
+For other collisions, or when a tile grows into occupied space, nearby tiles are compacted out of the way.
+The visible corner controls provide a 44-pixel resize target, and edge controls appear on hover for horizontal or vertical resizing.
+Resize handles stop at the tile's minimum allowed size while the pointer is still moving.
+Exit edit mode to save the resulting positions.
+
+Pointer users can drag anywhere on a widget tile. Containers use the grab button at their top-left corner.
+Resize tiles from any edge or corner handle.
+On a touch screen, press and hold the tile before moving it; resize handles support direct touch input.
+Keyboard users can focus a tile, press Enter or Space to start editing, use the arrow keys to move it, and use Shift plus the arrow keys to resize it.
+Press Enter, Space, or Escape to stop keyboard editing.
+Keyboard moves and resizes apply immediately; Escape stops keyboard editing without undoing those changes.
+During a pointer or touch interaction, Escape cancels the move or resize and restores the layout from before that interaction.
+The **Move / resize item** action in the edit menu remains available for precise numeric input.
 
 #### Preview
 
-<img src={layoutSmallImage}  height={256} />
-<img src={layoutMediumImage}  height={256} />
-<img src={layoutLargeImage}  height={256} />
+Layout Settings shows a lightweight structural preview for every layout, including saved spans, Containers, widget labels, and app icons. The canvas width represents the screen range where that layout is active.
+
+Choose **Edit layout** to open the real board editor at that representative width on desktop. Save returns to Layout Settings. Cancel discards the local changes. On phones and tablets, the normal board editor continues to use the layout selected by the device width.
+
+<img src={layoutSmallImage} height={256} />
+<img src={layoutMediumImage} height={256} />
+<img src={layoutLargeImage} height={256} />
+
+### Containers and rails
+
+Containers can hold apps, widgets, and nested Containers.
+The same Container model works on the main canvas, inside a fixed rail, or inside another Container.
+Move and resize Containers directly in edit mode; nested content stays within the Container's local bounds.
+Resize outlines follow the pointer continuously while a dashed preview marks the grid size that will be applied on release.
+Each responsive layout stores its own Container position and size.
+
+Each Container can configure:
+
+- Its label and whether that label is visible.
+- Whether users can collapse and expand it like an accordion.
+- Whether its menu shows **Open all in new tabs** for the app links it contains.
+- Its border color and custom CSS classes.
+
+Collapsing a Container reduces its full-width header to a half-row expansion bar and compacts the surrounding layout without losing its expanded size.
+Expanding it smoothly restores those bounds and moves following items out of the way without reloading the widgets inside it.
 
 ### Background
+
 #### Background image URL
+
 Homarr can display a background image behind apps and widgets.
 This URL can be used to define what image should be shown.
 
 #### Background image attachment
+
 This defines whether the background should move when the user scrolls.
 
 #### Background image size
+
 This defines whether the background should cover the entire page (and possibly be cropped) or never be cropped but may not cover the entire page.
 
 #### Background image repeat
+
 This defines whether the background should be repeated if it cannot cover the entire page.
 This option can be useful if you have patterns that can be repeated easily (e.g. patterns):
 
 ![](./img/background-repeat.png)
 
 ### Appearance
+
 #### Primary color
+
 Color that can be chosen freely to give accents to active elements.
+
 #### Secondary color
+
 Color that can be chosen freely to give accents.
+
 #### Opacity
+
 Opacity of the colors.
+
 #### Icon color
+
 Change the color of your bookmark / app icons.
 
-<img src={iconColorImage}  height={100} />
+<img src={iconColorImage} height={100} />
 
 #### Item radius
-Change the radius of your items / categories.
 
-<img src={itemRadiusImage}  height={100} />
+Change the radius of your items and Containers.
 
+<img src={itemRadiusImage} height={100} />
 
 ### Custom CSS
+
 This is the field where you can enter custom CSS.
 The styling will only be applied on the respective board page.
 
@@ -151,14 +235,30 @@ editable review form before requesting approval to save the change.
 ### Behaviour
 
 #### Disable app status
+
 This will disable the status check for apps.
 
+#### Work directly from the board
+
+Widgets expose their routine controls without requiring edit mode:
+
+- Hold `Shift` while hovering a widget that supports advanced view to expand it in place while the other widgets
+  remain visible but dimmed. Release `Shift` to close it. Focus that widget and press `Shift` + `Enter` to keep the view
+  open until you close it. On touch devices, open it from the widget menu. Other widgets adapt in place instead.
+- Right-click a widget to inspect its live query status, refresh its data, change quick options, open settings, or run
+  supported actions. Available controls follow your board and integration permissions.
+- If you can modify the board, right-click or touch and hold an empty grid cell to add an item there. Focus a board
+  section and press `Shift` + `F10` for the keyboard equivalent.
+
+Widget and empty-space context menus follow the **Enable right click on widgets** preference in your user settings.
+
 ### Access control
+
 With the access control, you can permit a single user or a group to your board.
 The users and groups can have one of these three levels of access:
 
 | **Permission Level** | View board | Edit mode | Settings | Danger zone (eg. delete) |
-|----------------------|------------|-----------|----------|--------------------------|
+| -------------------- | ---------- | --------- | -------- | ------------------------ |
 | View board           | X          |           |          |                          |
 | Modify board         | X          | X         | X        |                          |
 | Full access          | X          | X         | X        | X                        |
@@ -177,22 +277,27 @@ After editing permissions, the save button below the table must be pressed.
 Otherwise, all changes will be discarded.
 
 ### Danger zone
+
 #### Rename
+
 Renaming a board will break all existing links to it permanently with no redirect.
 
 #### Board visibility
+
 By default, boards will be private. This means only authenticated users that are authorized have access.
 Making a board public will expose it to everyone - including unauthenticated users.
 
 #### Delete
+
 This will permanently delete the board.
 This action is irreversible and cannot be undone.
 
 ## Delete boards
+
 The deletion of boards is permanent and cannot be undone.
 There are two ways to delete a board:
 
-- Navigate to the settings of your board, open the "Danger zone" dropdown and click on the "delete this board" button.
+- Navigate to the settings of your board, open the "Danger zone" section and click on the "delete this board" button.
 - Navigate to the list of boards in the management pages, click the three dots and click on "delete permanently".
 
 Both actions will execute the same deletion process.
@@ -200,7 +305,7 @@ Both actions will execute the same deletion process.
 ## Duplicate boards
 
 :::note
-Duplicating a board will not copy the users and groups that have access to the board 
+Duplicating a board will not copy the users and groups that have access to the board
 nor the integrations the user does not have access to.
 :::
 
@@ -210,47 +315,51 @@ You can duplicate a board by clicking on the three dots in the list of boards an
 ![](./img/duplicate-board-modal.png)
 
 ## Setting boards as your home board
+
 The home board is the dashboard, that will be shown at the root path of Homarr or if no board name was passed in the URL.
 All the following paths will lead to the home board:
-- ``my-homarr.com``
-- ``my-homarr.com/boards``
+
+- `my-homarr.com`
+- `my-homarr.com/boards`
 
 Your home board will have a special small badge at the top right in the list of boards:
 
 ![](./img/home-board-flag.png)
 
 ### For yourself
+
 To set the home board yourself, the easiest option is to set it directly in the list of boards:
 
 ![](./img/set-as-home-board-menu.png)
 
 Alternatively, you can also define it via your user profile:
+
 1. Click on your user profile at the top right
-2. Click on ``Your preferences``
-3. Change the home board in the ``home board`` dropdown and click on ``Save``.
+2. Click on `Your preferences`
+3. Change the home board in the `home board` dropdown and click on `Save`.
 
 ### For other users
 
-1. Navigate to the users: ``Management`` > ``Users`` > ``Manage``
+1. Navigate to the users: `Management` > `Users` > `Manage`
 2. Click on the username of the user that you want to adjust
-3. Select the desired home board via the dropdown and click on ``Save`` \
-![](./img/set-home-board-other-user.png)
+3. Select the desired home board via the dropdown and click on `Save` \
+   ![](./img/set-home-board-other-user.png)
 
 ### For user groups
 
-1. Navigate to the user groups: ``Management`` > ``Users`` > ``Groups`` > ``Manage``
-2. Go to tab ``Settings``
-3. Select the desired home board via the dropdown and click on ``Save`` \
-![](./img/set-home-board-user-group.png)
+1. Navigate to the user groups: `Management` > `Users` > `Groups` > `Manage`
+2. Go to tab `Settings`
+3. Select the desired home board via the dropdown and click on `Save` \
+   ![](./img/set-home-board-user-group.png)
 
 ### For whole server
 
 You can also set a global home board that will be used for all users that have not set a home board themselves.
 It will also be used for anonymous users.
 
-1. Navigate to the settings: ``Management`` > ``Settings`` > ``Boards``
-2. Select the desired home board via the dropdown and click on ``Save`` \
-![](./img/set-home-board-global.png)
+1. Navigate to the settings: `Management` > `Settings` > `Boards`
+2. Select the desired home board via the dropdown and click on `Save` \
+   ![](./img/set-home-board-global.png)
 
 :::note
 For the global home board you can only select boards that are public.
diff --git a/apps/docs/docs/management/certificates/index.mdx b/apps/docs/docs/management/certificates/index.mdx
index cceaa54fd..aa843bfe0 100644
--- a/apps/docs/docs/management/certificates/index.mdx
+++ b/apps/docs/docs/management/certificates/index.mdx
@@ -7,27 +7,29 @@ tags:
 ---
 
 # Certificates
-On this page you can manage your trusted certificates. 
+
+On this page you can manage your trusted certificates.
 For example if you use a self signed certificate for one of the integrations you want to connect, you can add it here.
 
-Below you can see a screenshot of the certificates page. 
-The items show the subject, filename and when it expires. 
+Below you can see a screenshot of the certificates page.
+The items show the subject, filename and when it expires.
 The color of the icon indicates how long it is valid.
 
 ![](./img/screenshot.png)
 
-| Color | Meaning |
-| --- | --- |
-| 🟩 Green | Valid for more than 30 days |
+| Color     | Meaning                     |
+| --------- | --------------------------- |
+| 🟩 Green  | Valid for more than 30 days |
 | 🟨 Yellow | Valid for less than 30 days |
-| 🟧 Orange | Valid for less than a week |
-| 🟥 Red | Valid for less than a day |
-
+| 🟧 Orange | Valid for less than a week  |
+| 🟥 Red    | Valid for less than a day   |
 
 ## Opening the certificates page
-Navigate to ``Management`` > ``Tools`` > ``Certificates``.
+
+Navigate to `Management` > `Tools` > `Certificates`.
 
 ## Add a certificate
+
 To add a certificate click on the "Add certificate" button.
 
 ![](./img/add-button.png)
@@ -62,4 +64,4 @@ Below you can find instructions for some of the integrations.
 
 Since version 6 of Pi-hole, the web interface can be accessed through HTTPS.
 The certificate can be found in the path `/etc/pihole/tls_ca.crt`. To add the certificate, this file needs to be copied and uploaded to Homarr.
-You can find more details regarding SSL / TLS for Pi-hole [here](https://docs.pi-hole.net/api/tls/).
\ No newline at end of file
+You can find more details regarding SSL / TLS for Pi-hole [here](https://docs.pi-hole.net/api/tls/).
diff --git a/apps/docs/docs/management/custom-widgets/_category_.json b/apps/docs/docs/management/custom-widgets/_category_.json
new file mode 100644
index 000000000..23e215294
--- /dev/null
+++ b/apps/docs/docs/management/custom-widgets/_category_.json
@@ -0,0 +1,9 @@
+{
+  "label": "Custom Widgets",
+  "collapsed": true,
+  "position": 8,
+  "link": {
+    "type": "doc",
+    "id": "management/custom-widgets/index"
+  }
+}
diff --git a/apps/docs/docs/management/custom-widgets/agent-authoring.mdx b/apps/docs/docs/management/custom-widgets/agent-authoring.mdx
new file mode 100644
index 000000000..25afa3724
--- /dev/null
+++ b/apps/docs/docs/management/custom-widgets/agent-authoring.mdx
@@ -0,0 +1,104 @@
+# Use agents and skills.sh
+
+An external agent creates one widget at a time with the Homarr MCP server. The agent harness manages the list for multiple widgets.
+
+Homarr does not create widget packs or drafts for multiple widgets.
+
+The MCP API key must belong to a Homarr administrator. Non-administrator keys do not list Custom Widget tools, prompts,
+or resources. The same administrator requirement applies to the matching HTTP authoring endpoints.
+
+<a className="button button--primary" href="https://www.skills.sh/homarr-labs/homarr/homarr-custom-widget">
+  View the Custom Widget Skill on skills.sh
+</a>
+
+Install the Agent Skill from the verified Homarr repository:
+
+```sh
+npx skills add https://github.com/homarr-labs/homarr --skill homarr-custom-widget
+```
+
+The portable skill gives concise authoring guidance. The Homarr MCP prompt gives connected agents a retrieval workflow: read the live schema, then fetch only the component documentation needed for the widget.
+
+The workbench's **Copy AI prompt** action is separate. It creates a self-contained prompt below 12,000 characters for an ordinary ChatGPT or Claude conversation. It includes the lean contract, bindings, recommended components, and two polished examples. It never tells an offline model to call MCP tools.
+
+The source is in [`.agents/skills/homarr-custom-widget`](https://github.com/homarr-labs/homarr/tree/HEAD/.agents/skills/homarr-custom-widget). `HEAD` follows the repository default branch, so the link is not tied to an unreleased feature branch. Homarr does not provide a ZIP archive.
+
+After publication, run the installation command once. This action registers installation activity.
+
+Then, verify the skills.sh page. Request official maker attribution for `homarr-labs` from skills.sh.
+
+Repository code cannot give this attribution.
+
+## Get MCP resources
+
+- Prompt: `homarr-custom-widget-author`
+- Resources: `homarr://custom-widgets/schema`, `components`, `components/{name}`, `examples/{name}`, and `skill`
+- HTTP: `GET /api/custom-widgets/authoring-prompt`, `schema`, `components`, and `skill`
+
+The authoring-prompt tool description contains one sentence. The prompt contains the workflow instructions and resource links.
+
+`GET /api/custom-widgets/skill` and the MCP tool return the concise skill discovery payload:
+
+```ts
+{
+  name: "homarr-custom-widget";
+  version: string;
+  skillMd: string;
+  skillsShUrl: string;
+  sourceUrl: string;
+  installCommand: string;
+}
+```
+
+The full installed component catalog stays available through `homarr://custom-widgets/components` and per-component resources. It is deliberately not embedded in the skill or clipboard prompt.
+
+These interfaces do not return an archive URL or archive hash.
+
+## Create a Custom Widget with MCP
+
+1. Get the prompt, live schema, and component catalog.
+2. Read the external API documentation.
+3. Build one definition.
+4. Validate the definition without saving it.
+5. Create a preview session.
+6. Test the queries and actions.
+7. Open the preview URL with browser tools.
+8. Inspect the redacted journal and revise the local candidate until it is valid.
+9. Create the widget, including any source URLs and credentials the user already supplied.
+10. Otherwise, ask the user to configure the saved definition with the ten-minute Homarr source-setup URL.
+11. Create a final preview with the saved definition ID so Homarr loads its stored credentials, then test it again.
+12. Update the saved definition if the final verification finds a problem.
+13. Repeat the procedure for the next widget.
+
+Each source-configuration URL applies to one definition or preview and one source. It is short-lived, single-use, and
+can only be opened and completed by an authenticated Homarr administrator. The administrator confirms the server URL,
+network scope, and required credential fields directly in Homarr. The agent receives only request status and never
+receives plaintext credentials. Preview-scoped values expire with that preview; definition-scoped values persist.
+
+Agents can install existing widgets without regenerating them:
+
+1. Search with `customWidget_workshopSearch`.
+2. Inspect and validate a result with `customWidget_workshopGet`.
+3. Install it with `customWidget_workshopInstall`.
+4. Configure deployment-specific URLs and supplied credentials with `customWidget_sourceConfigure`.
+5. If the agent does not have those values, call `customWidget_configurationRequestUser` and wait for completion.
+6. Test the installed definition, then use `board_addItem` with kind `customApi` and the returned definition ID.
+
+Homarr encrypts the plaintext immediately. Homarr does not return the plaintext.
+
+## Evaluate the copied prompt
+
+Homarr maintainers can run the same self-contained prompt that the workbench copies through the live generation-quality suite:
+
+```sh
+OPENROUTER_API_KEY=... pnpm --filter @homarr/custom-widgets test:ai
+```
+
+The suite uses DeepSeek V4 Pro to author Pokédex, Portainer, football, Jellyfin, and Home Assistant widgets. Before DeepSeek V4 Flash judges a result, it must pass Homarr's real clipboard parser, canonical schema, and deterministic scenario checks for the documented API routes, authentication, bindings, actions, and essential runtime components. It saves every response, validated widget manifest, and detailed category scores under `packages/custom-widgets/.ai-evaluations/`.
+
+Each scenario stops as soon as it passes and has a hard limit of ten generation attempts. Override the models or
+per-scenario limit with `OPENROUTER_GENERATOR_MODEL`, `OPENROUTER_JUDGE_MODEL`, and
+`CUSTOM_WIDGET_AI_MAX_LOOPS`. Generated artifacts are local and ignored by Git; promote a reviewed, validated result
+into the bundled-widget source deliberately.
+
+The reference API check uses a real PokeAPI list/detail request and a read-only Portainer container query when `PORTAINER_BASE_URL` and `PORTAINER_API_KEY` are set. Use `pnpm --filter @homarr/custom-widgets test:reference-apis -- --pokeapi-only` for the public PokeAPI check alone. To exercise start, restart, and stop against a disposable container, also set `PORTAINER_TEST_CONTAINER_ID` and the explicit safeguard `PORTAINER_ALLOW_MUTATIONS=1`; the script restores the container's original running state.
diff --git a/apps/docs/docs/management/custom-widgets/authoring.mdx b/apps/docs/docs/management/custom-widgets/authoring.mdx
new file mode 100644
index 000000000..429827c55
--- /dev/null
+++ b/apps/docs/docs/management/custom-widgets/authoring.mdx
@@ -0,0 +1,38 @@
+# Create a Custom Widget
+
+import { CanonicalCustomWidgetExample } from "@site/src/components/custom-widget-code";
+
+The workbench is visual-first: configure the default API connection, add request cards, add option rows, then write JSX. Additional sources and raw manifest JSON remain under Advanced. Code and preview sit side by side on desktop and use tabs on mobile.
+
+## Manual workflow
+
+1. Configure the default API source, network scope, authentication, and credential.
+2. Add query/action cards. Values can be literals, widget options, or invocation parameters.
+3. Add widget options with their control and default value.
+4. Write responsive JSX using `data`, `status`, `options`, and temporary `inputs`.
+5. Test and preview, inspect Data and the redacted request journal, then save.
+
+<CanonicalCustomWidgetExample
+  id="named-widget-requests"
+  label="Named queries and actions"
+  example="requests"
+  height="420px"
+/>
+
+<CanonicalCustomWidgetExample id="widget-options" label="Widget options" example="options" height="360px" />
+
+Every option has a default. Supported controls include text, textarea, number, switch, select, multi-select, slider, date, time, color, icon, URL, duration, time zone, and JSON. Dynamic choices use `choicesFrom` with a query ID and value/label paths.
+
+## ChatGPT or Claude
+
+Enter the desired widget and optional API documentation URL, then select **Copy AI prompt**. The single self-contained prompt is below 12,000 characters, starts with your request, includes the lean contract and two polished examples, and never claims that an offline chat has MCP tools.
+
+The model must return one fenced `json` block containing the complete widget, including the JSX in its `template`
+field. Copy that single block and select **Paste AI response**. Homarr fills the visual builders and the JSX editor
+without any placeholder replacement or second paste.
+
+Homarr shows all actionable schema or JSX errors inline. Enter credentials separately. The prompt deliberately
+recommends a focused Mantine component set, visual hierarchy, responsive layout, theme compatibility, and loading,
+empty, failure, and success states.
+
+Connected agents should use the skills.sh skill and retrieve the live schema and individual component metadata only as needed.
diff --git a/apps/docs/docs/management/custom-widgets/component-reference.mdx b/apps/docs/docs/management/custom-widgets/component-reference.mdx
new file mode 100644
index 000000000..15adc109a
--- /dev/null
+++ b/apps/docs/docs/management/custom-widgets/component-reference.mdx
@@ -0,0 +1,13 @@
+---
+title: Component reference
+sidebar_position: 3
+tags: [Custom Widgets, JSX, Mantine, Components]
+---
+
+import { CustomJsxComponentReference } from "@site/src/components/custom-jsx-component-reference";
+
+# Custom JSX component reference
+
+Search the components and properties exposed by Homarr's safe Custom JSX runtime. The live schema and diagnostics remain authoritative: properties marked as blocked cannot be passed from widget code, and denied components are shown only for explanation.
+
+<CustomJsxComponentReference />
diff --git a/apps/docs/docs/management/custom-widgets/custom-jsx.mdx b/apps/docs/docs/management/custom-widgets/custom-jsx.mdx
new file mode 100644
index 000000000..a8bb3bd85
--- /dev/null
+++ b/apps/docs/docs/management/custom-widgets/custom-jsx.mdx
@@ -0,0 +1,45 @@
+# Use the safe JSX runtime
+
+Templates are JSX expressions interpreted inside a widget-local safety and render budget. They can read:
+
+- `data.requestId` — the latest response
+- `status.requestId` — `{ loading, ok, status, statusText, error }`
+- `options.name` — saved widget configuration
+- `inputs.name` — temporary values from declarative `bind`
+
+Use normal Mantine layouts, typography, feedback, dates, and charts. Official compound names such as `Card.Section`, `Tabs.List`, and `Radio.Group` are supported. Ordinary safe props pass through; a dangerous capability produces an explicit error.
+
+## Temporary inputs
+
+```jsx
+<Stack>
+  <TextInput bind="search" defaultValue="" label="Search" />
+  <SubFetch requestId="search" params={{ query: inputs.search }}>
+    {(results) => (
+      <Stack>
+        {(results ?? []).map((item) => (
+          <Text key={item.id}>{item.name}</Text>
+        ))}
+      </Stack>
+    )}
+  </SubFetch>
+</Stack>
+```
+
+Bound values live only in React memory while the widget is mounted. They are not saved to the database, board options, exports, browser storage, or `localStorage`. Remounting resets them. Components can share a binding when their adapter types agree.
+
+## Expression language
+
+Use expressions, conditionals, optional chaining, arrays, objects, template strings, safe standard helpers, and expression callbacks for `map`, `filter`, `sort`, and trusted runtime slots. Callback blocks, authored `const`, IIFEs, authored recursion, arbitrary functions, imports, hooks, refs, raw events, browser requests, `eval`, and bigint are blocked.
+
+Bounded regex literals are supported for string matching, splitting, search, and replacement. Patterns with lookbehind, backreferences, nested quantifiers, excessive length, or unsupported flags are rejected.
+
+## Runtime components
+
+- `SubFetch` runs a manual query with its `params`. Set `triggerContent` to a card or image to make that content the accessible click and keyboard trigger instead of showing the default load button.
+- `ActionButton` and `ToggleSwitch` run actions.
+- `RefreshButton` renders a compact, accessible icon control that refreshes load queries for authenticated viewers. It
+  is disabled for anonymous public-board viewers because refreshing invalidates shared server cache state.
+- `Icon`/`TablerIcon` resolves installed safe icons.
+
+Always include responsive loading, empty, error, and success states. Runtime failures remain inside the widget tile.
diff --git a/apps/docs/docs/management/custom-widgets/index.mdx b/apps/docs/docs/management/custom-widgets/index.mdx
index 3bc624bb7..5d054fe89 100644
--- a/apps/docs/docs/management/custom-widgets/index.mdx
+++ b/apps/docs/docs/management/custom-widgets/index.mdx
@@ -1,216 +1,134 @@
 ---
-tags:
-  - Custom Widgets
-  - API
-  - Widgets
-  - JSX
+title: Custom Widgets
+sidebar_label: Overview
+tags: [Custom Widgets, API, JSX, MCP]
 ---
 
+import { BundledCustomWidgetGallery, CustomWidgetCodeExample } from "@site/src/components/custom-widget-code";
+
+export const completeManifest = `{
+  "$schema": "homarr-custom-widget-v2",
+  "name": "Service status",
+  "sources": {
+    "default": { "name": "Service API", "baseUrl": "https://status.example.com", "networkScope": "public", "auth": "none" }
+  },
+  "requests": { "status": { "path": "/api/status" } },
+  "options": {},
+  "template": "<Badge color={data.status?.ok ? 'green' : 'red'}>{data.status?.label ?? 'Unknown'}</Badge>"
+}`;
+
 # Custom Widgets
 
-:::warning
+:::warning Experimental feature
 
-Custom widgets are a new feature. Share feedback, ask questions, and discuss ideas in our [GitHub Discussions](https://github.com/homarr-labs/homarr/discussions/categories/custom-widgets).
+This feature is experimental and will probably change. If you encounter bugs, need more capabilities, or find something confusing, tell us in the [official discussion thread](https://github.com/homarr-labs/homarr/discussions/categories/custom-widgets). Your feedback directly shapes what comes next. Happy hacking!
 
 :::
 
-Custom widgets allow you to fetch data from any HTTP API and display it on your Homarr dashboard. You define the API endpoint, authentication, and how the response should be rendered - no code compilation or server restart required.
+Custom JSX v2 is Homarr's only Custom Widget format. A definition contains keyed API sources, keyed requests, optional widget options, and one safe JSX template. Credentials are encrypted separately and never exported.
 
-## Creating a Custom Widget
-
-To create a custom widget, navigate to the **Custom Widgets** section in the management sidebar and click the **Add** button. Fill in the configuration:
-
-- **Name** - Display name shown in the widget picker and on the dashboard
-- **Description** - Optional description shown in tooltips and management UI
-- **Icon URL** - Optional URL to an icon image for the widget
-- **URL** - The API endpoint to fetch data from (must include protocol, e.g. `https://api.example.com/stats`)
-- **Authentication** - How the API request is authenticated:
-  - `none` - Public APIs with no authentication
-  - `bearer` - Bearer token authentication
-  - `basic` - HTTP Basic auth (username + password)
-  - `apiKeyHeader` - API key sent as a custom HTTP header
-  - `apiKeyQuery` - API key sent as a query parameter
-- **Header Name** - Custom header or query parameter name for API key auth (e.g. `X-API-Key`)
-- **HTTP Method** - `GET`, `POST`, `PUT`, `PATCH`, or `DELETE`
-- **Request Body** - JSON string body for `POST`/`PUT`/`PATCH` requests
-- **Display Type** - How the API response is rendered (see below)
-
-## Display Types
-
-| Display Type         | Description                                          | Best For                                 |
-| -------------------- | ---------------------------------------------------- | ---------------------------------------- |
-| **Single Value**     | Extracts a single value with a label and unit        | Metrics: temperature, uptime, user count |
-| **Key Value**        | Multiple labeled key-value pairs with optional units | System stats: CPU, memory, disk          |
-| **Table**            | API array data rendered as a sortable table          | Lists of items with columns              |
-| **Stat Grid**        | Labeled values in colored stat cards                 | Counts: movies, series, albums           |
-| **Progress Bars**    | Values as progress bars with percentages             | Usage: disk, quota, capacity             |
-| **Status Indicator** | Green/red status dots for health checks              | Service monitoring                       |
-| **Count Grid**       | Simple counts in a grid (no colors)                  | Library counts                           |
-| **Raw**              | Pretty-prints the raw JSON response                  | Debugging                                |
-| **Action Button**    | Clickable button executing the API request           | Triggers: restart, clear cache           |
-| **Custom JSX**       | Custom JSX template with Mantine v9 components       | Full layout control                      |
-
-### Design with AI
-
-The **Design with AI** action is available while creating or editing a custom widget. Describe what the
-widget should show and, when [Homarr Assistant](../assistant) is enabled, send the request directly from
-the form. The assistant receives the widget schema, the current non-secret configuration, and the latest
-test response. It can then propose and run the matching create or update tool after you approve the
-mutation in the conversation.
-
-Run **Test** first when possible so the prompt includes the endpoint's real response shape. Saved secret
-values are never added to the prompt. **Copy to clipboard** remains available when Homarr Assistant is
-disabled or when you prefer to use another AI service such as ChatGPT, Claude, or Gemini.
-
-<details>
-<summary>Example: Pokédex widget using Custom JSX</summary>
-
-```json
-{
-  "$schema": "homarr-custom-widget-v2",
-  "name": "Pokédex",
-  "description": "Browseable Pokémon list",
-  "iconUrl": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/items/poke-ball.png",
-  "url": "https://pokeapi.co/api/v2/pokemon?limit=75",
-  "authType": "none",
-  "method": "GET",
-  "displayType": "customJsx",
-  "displayConfig": {
-    "type": "customJsx",
-    "template": "<Stack gap=\"md\" p=\"xs\">\n  <Card withBorder radius=\"xl\" p=\"md\" shadow=\"md\">\n    <Group justify=\"space-between\">\n      <Title order={3}>Pokédex</Title>\n    </Group>\n  </Card>\n  <PaginatedList pageSize={12}>\n    <Grid gutter=\"sm\">\n      {data.results.map((pokemon, i) =>\n        <Grid.Col span={1.5}>\n          <Anchor href={pokemon.url} target=\"_blank\" underline=\"never\">\n            <Card withBorder radius=\"xl\" p=\"xs\" shadow=\"md\">\n              <Stack gap=\"sm\" align=\"center\">\n                <Group justify=\"space-between\" style={{ width: \"100%\" }}>\n                  <Badge size=\"sm\" color=\"red\">#{i + 1}</Badge>\n                  <Text fw={800} tt=\"capitalize\">{pokemon.name}</Text>\n                </Group>\n                <Avatar\n                  src={\"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/\" + (i + 1) + \".png\"}\n                  size={92}\n                  radius=\"xl\"\n                />\n              </Stack>\n            </Card>\n          </Anchor>\n        </Grid.Col>\n      )}\n    </Grid>\n  </PaginatedList>\n</Stack>"
-  }
+```ts
+interface HomarrCustomWidgetV2 {
+  $schema: "homarr-custom-widget-v2";
+  name: string;
+  description?: string;
+  iconUrl?: string;
+  sources: Record<string, CustomWidgetSource>;
+  requests: Record<string, CustomWidgetRequest>;
+  options?: Record<string, CustomWidgetOption>;
+  template: string;
 }
 ```
 
-</details>
+### Design with AI
 
-## Importing and Exporting
+The **Design with AI** action is available while creating or editing a custom widget. Describe what the widget should show and, when [Homarr Assistant](../assistant) is enabled, send the request directly from the form. The assistant receives the widget schema, current non-secret configuration, and latest test response, then proposes the matching create or update tool for your approval.
 
-Custom widgets can be exported and imported as JSON files. To export, select the widget in the list and click the export button. To import, click the import button and paste the JSON. Secrets (API keys, passwords) are never included in exports and must be configured after import.
+Run **Test** first when possible so the prompt includes the endpoint's real response shape. Saved secrets are never added to the prompt. **Copy to clipboard** remains available when the Assistant is disabled or when you prefer another AI service.
 
-The import format uses `"$schema": "homarr-custom-widget-v2"` to identify the widget version.
+<CustomWidgetCodeExample
+  id="complete-widget-manifest"
+  label="Complete manifest"
+  code={completeManifest}
+  height="360px"
+/>
 
-## Available Mantine Components for Custom JSX
+The browser renders JSX. Homarr's server executes named requests, applies board permissions and network protections, and injects credentials. The browser never receives source credentials.
 
-When using the `customJsx` display type, your template has access to a whitelist of [Mantine v9](https://mantine.dev) components. Unrecognized components, event handlers, and dangerous tags are stripped for security.
+## Permissions
 
-### Layout
+Custom Widget management is an administrator-only surface. Only a Homarr administrator can create, import, migrate,
+preview, publish, install, configure, or write secrets, including through HTTP authoring resources or MCP. An API key
+only lists Custom Widget MCP tools, prompts, and resources when its owner is an administrator.
 
-| Component           | Doc                                           |
-| ------------------- | --------------------------------------------- |
-| `Stack`             | [docs](https://mantine.dev/core/stack)        |
-| `Group`             | [docs](https://mantine.dev/core/group)        |
-| `Flex`              | [docs](https://mantine.dev/core/flex)         |
-| `Grid` / `Grid.Col` | [docs](https://mantine.dev/core/grid)         |
-| `SimpleGrid`        | [docs](https://mantine.dev/core/simple-grid)  |
-| `Center`            | [docs](https://mantine.dev/core/center)       |
-| `Container`         | [docs](https://mantine.dev/core/container)    |
-| `Space`             | [docs](https://mantine.dev/core/space)        |
-| `AspectRatio`       | [docs](https://mantine.dev/core/aspect-ratio) |
+Adding or configuring a Custom Widget placement requires both administrator access and permission to modify that
+board. A non-administrator with board-modify access can move, resize, change presentation settings, or remove an
+existing placement, but cannot add one, change its definition, refresh interval, or Custom Widget options. Duplicating
+a board that contains Custom Widgets also requires an administrator.
 
-### Typography & Content
+Once an administrator has placed a widget, ordinary board permissions apply to rendering and requests. Authorized
+non-administrators can use it on private boards, and queries can render for anonymous viewers on public boards.
+Mutations remain authenticated and enforce each request's view, modify, or full permission.
 
-| Component         | Doc                                               |
-| ----------------- | ------------------------------------------------- |
-| `Text`            | [docs](https://mantine.dev/core/text)             |
-| `Title`           | [docs](https://mantine.dev/core/title)            |
-| `Code`            | [docs](https://mantine.dev/core/code)             |
-| `Highlight`       | [docs](https://mantine.dev/core/highlight)        |
-| `Mark`            | [docs](https://mantine.dev/core/mark)             |
-| `Kbd`             | [docs](https://mantine.dev/core/kbd)              |
-| `Blockquote`      | [docs](https://mantine.dev/core/blockquote)       |
-| `Anchor`          | [docs](https://mantine.dev/core/anchor)           |
-| `NumberFormatter` | [docs](https://mantine.dev/core/number-formatter) |
+## Authoring paths
 
-### Data Display
+- [Create a Custom Widget](./authoring) visually or with one copied AI prompt.
+- [Use the JSX runtime](./custom-jsx) for data, Mantine components, temporary inputs, and diagnostics.
+- [Browse the supported component reference](./component-reference).
+- [Configure requests and security](./requests-and-security).
+- [Use MCP and the skills.sh skill](./agent-authoring).
+- [Correct problems](./troubleshooting).
 
-| Component                 | Doc                                               |
-| ------------------------- | ------------------------------------------------- |
-| `Badge`                   | [docs](https://mantine.dev/core/badge)            |
-| `Card` / `Card.Section`   | [docs](https://mantine.dev/core/card)             |
-| `Paper`                   | [docs](https://mantine.dev/core/paper)            |
-| `Alert`                   | [docs](https://mantine.dev/core/alert)            |
-| `ThemeIcon`               | [docs](https://mantine.dev/core/theme-icon)       |
-| `ColorSwatch`             | [docs](https://mantine.dev/core/color-swatch)     |
-| `Avatar` / `Avatar.Group` | [docs](https://mantine.dev/core/avatar)           |
-| `Image`                   | [docs](https://mantine.dev/core/image)            |
-| `BackgroundImage`         | [docs](https://mantine.dev/core/background-image) |
-| `Indicator`               | [docs](https://mantine.dev/core/indicator)        |
-| `Pill`                    | [docs](https://mantine.dev/core/pill)             |
-| `Spoiler`                 | [docs](https://mantine.dev/core/spoiler)          |
+The workbench keeps one continuous layout with visual source, request, and option editors. Advanced raw JSON remains available for experts and AI paste. Invalid values stay inline and disable both preview and Save/Create until they are corrected.
 
-### Tables
+Exports, imports, the official Workshop client, and MCP validate the same schema. PocketBase stores community
+submissions without interpreting their content, and Homarr validates them before installation. Widgets saved in the v1
+format remain visible to administrators with a **Migration required** badge after upgrading. Use **Copy migration
+prompt**, give the redacted prompt to an LLM, copy its single complete JSON block, then select **Paste migrated widget**
+from that widget's action menu. Homarr reads the `template` value into the JSX editor automatically. The prompt keeps safe
+request metadata but deliberately omits the v1 display configuration because legacy free-text and JSX can contain
+hard-coded credentials. Add a credential-free description of the widget's visible layout and behavior when sending the
+prompt.
 
-| Component                               | Doc                                    |
-| --------------------------------------- | -------------------------------------- |
-| `Table` / `Table.Thead` / `Table.Tbody` | [docs](https://mantine.dev/core/table) |
-| `Table.Tr` / `Table.Th` / `Table.Td`    | [docs](https://mantine.dev/core/table) |
+Homarr keeps the original v1 definition and encrypted secret as a compatibility backup even after the validated v2
+replacement is created. The v2 record uses the same stable ID and takes precedence. The archived v1 copy stays hidden
+while the replacement exists; deleting the v2 record surfaces the v1 entry as migration-required again. Automatic
+legacy deletion is intentionally unavailable during v2 stabilization. Credentials are never included in prompts,
+logs, or exports.
 
-### Lists
+For administrators adding widgets while editing a board, the Custom Widgets section includes **Install from
+Workshop**. Non-administrators do not see the Custom Widget picker or Workshop actions. The Workshop and API source
+review open above the widget picker without closing it. After import, the new definition appears in the picker. Its tile
+waits for the board to be saved before server requests run and loads automatically after a successful save; no page
+reload is required.
 
-| Component                    | Doc                                       |
-| ---------------------------- | ----------------------------------------- |
-| `List` / `List.Item`         | [docs](https://mantine.dev/core/list)     |
-| `Timeline` / `Timeline.Item` | [docs](https://mantine.dev/core/timeline) |
+## Import and Workshop
 
-### Feedback & Loading
+Import review shows origins, authentication modes, network scopes, methods, actions, and permissions. Every source has a suggested URL, but private and loopback sources must be confirmed or replaced for the current Homarr installation. The same screen accepts API keys, tokens, usernames, and passwords; credentials remain optional at install time and missing values stay visible on the Custom Widgets page.
 
-| Component                       | Doc                                            |
-| ------------------------------- | ---------------------------------------------- |
-| `Progress` / `Progress.Section` | [docs](https://mantine.dev/core/progress)      |
-| `RingProgress`                  | [docs](https://mantine.dev/core/ring-progress) |
-| `Skeleton`                      | [docs](https://mantine.dev/core/skeleton)      |
-| `Loader`                        | [docs](https://mantine.dev/core/loader)        |
+For example, installing **Tautulli Activity** asks for both the user's Tautulli URL and API key. A stable public source such as PokéAPI keeps its published URL without creating unnecessary setup work.
 
-### Navigation & Overlay
+Workshop publishes technically valid widgets immediately; users can vote or report them, and Workshop moderators can
+delete submissions. Community moderation is separate from Homarr administration and is not a security boundary.
+Publishers should replace personal private-network hosts with a clear service placeholder before publishing. Homarr
+performs definitive validation again at install time.
 
-| Component                                                                | Doc                                          |
-| ------------------------------------------------------------------------ | -------------------------------------------- |
-| `TabsContainer` / `TabPanel`                                             | Custom interactive component                 |
-| `Accordion` / `Accordion.Item` / `Accordion.Control` / `Accordion.Panel` | [docs](https://mantine.dev/core/accordion)   |
-| `ScrollArea`                                                             | [docs](https://mantine.dev/core/scroll-area) |
-| `Tooltip`                                                                | [docs](https://mantine.dev/core/tooltip)     |
+Connected agents can search, inspect, and install Workshop widgets with `customWidget_workshopSearch`, `customWidget_workshopGet`, and `customWidget_workshopInstall`. After installation they can set a source URL and credentials with `customWidget_sourceConfigure`, or create a secure user-facing setup URL with `customWidget_configurationRequestUser`. Secret values are never returned through MCP.
 
-### Charts
+These tools are only exposed to API keys owned by Homarr administrators. Opening and completing a source-configuration
+URL also requires the same authenticated administrator; the URL is short-lived, single-use, and redacted.
 
-| Component        | Doc                                                 |
-| ---------------- | --------------------------------------------------- |
-| `AreaChart`      | [docs](https://mantine.dev/charts/area-chart)       |
-| `BarChart`       | [docs](https://mantine.dev/charts/bar-chart)        |
-| `LineChart`      | [docs](https://mantine.dev/charts/line-chart)       |
-| `DonutChart`     | [docs](https://mantine.dev/charts/donut-chart)      |
-| `PieChart`       | [docs](https://mantine.dev/charts/pie-chart)        |
-| `RadarChart`     | [docs](https://mantine.dev/charts/radar-chart)      |
-| `RadialBarChart` | [docs](https://mantine.dev/charts/radial-bar-chart) |
-| `Sparkline`      | [docs](https://mantine.dev/charts/sparkline)        |
+## Reliability and rollback
 
-### Interactive Components
+Custom Widget response caches and action invalidation use shared Redis state, so multiple Homarr replicas see the same
+versioned cache generation. Deployments must point every replica at the same Redis service.
 
-| Component       | Description                              |
-| --------------- | ---------------------------------------- |
-| `PaginatedList` | Client-side pagination wrapper           |
-| `Collapsible`   | Expandable/collapsible section           |
-| `StatBar`       | Horizontal stat bar                      |
-| `TypeBadge`     | Type-styled badge                        |
-| `Divider`       | [docs](https://mantine.dev/core/divider) |
+Before upgrading, back up the database and `SECRET_ENCRYPTION_KEY`; a v1 binary can still read preserved v1 tables
+during application rollback. Widgets created only in v2 may be unavailable to the rolled-back binary, but do not
+replace the v1 backup.
 
-## Template Bindings
+## Bundled examples
 
-Your template receives:
+Homarr seeds five disabled examples without credentials and never overwrites an edited seed. They use the same public contract. The Tautulli example is the highest-scoring widget preserved from Homarr's AI authoring evaluation:
 
-- `data` - The sanitized API response object. Access fields via `data.fieldName` or `data.results[0].name`.
-- `String(v)` - Type-safe string conversion
-- `Number(v)` - Type-safe number conversion
-- `Boolean(v)` - Type-safe boolean conversion
-- `Math` - Safe subset: `round`, `floor`, `ceil`, `abs`, `min`, `max`, `pow`, `sqrt`, `PI`
-- `JSON.stringify(v)` - JSON serialization
-- `Array.isArray(v)` - Array type check
-- `Object.keys(v)`, `Object.values(v)`, `Object.entries(v)` - Object utilities
-
-## Security Constraints
-
-- Event handlers (`onClick`, `onChange`, etc.) are stripped
-- Dangerous HTML attributes (`dangerouslySetInnerHTML`) are stripped
-- `script`, `iframe`, `object`, `embed`, `form`, `style`, `link`, `meta`, `base` tags are forbidden
-- Template strings containing `eval`, `Function`, `import`, `require`, `globalThis`, `window`, `document`, `fetch` are rejected
-- Anchor `href` attributes are validated to only allow `https://`, relative (`/`), and hash (`#`) URLs
+<BundledCustomWidgetGallery />
diff --git a/apps/docs/docs/management/custom-widgets/requests-and-security.mdx b/apps/docs/docs/management/custom-widgets/requests-and-security.mdx
new file mode 100644
index 000000000..1cae3ced1
--- /dev/null
+++ b/apps/docs/docs/management/custom-widgets/requests-and-security.mdx
@@ -0,0 +1,53 @@
+# Configure requests and security
+
+Most widgets use a single source named `default`. Extra keyed sources are available under Advanced for widgets that combine APIs. Authentication is `none`, `bearer`, `basic`, an API-key header, or an API-key query parameter. Credentials belong to the widget but remain outside its manifest.
+
+## Named requests
+
+Requests are keyed by ID. `source`, `kind`, `method`, `trigger`, `auth`, and `permission` have sensible defaults, so a load query can be as small as:
+
+```json
+{ "status": { "path": "/api/status" } }
+```
+
+The request `path` is appended to the source `baseUrl`, including a base path such as `/api/v2`.
+
+GET, POST, PUT, and PATCH work for queries and actions. DELETE is restricted to actions so it can never run while a
+board loads. Kind controls the remaining behavior: load queries run automatically, manual queries run through
+`SubFetch`, and actions run only from `ActionButton` or `ToggleSwitch`.
+
+Bind values directly where they are used:
+
+```json
+{
+  "containers": {
+    "path": "/api/endpoints/{option:endpointId}/docker/containers/json",
+    "query": { "all": { "$option": "showAll" } }
+  },
+  "restart": {
+    "kind": "action",
+    "method": "POST",
+    "path": "/api/endpoints/{option:endpointId}/docker/containers/{param:id}/restart",
+    "invalidates": ["containers"]
+  }
+}
+```
+
+`{option:name}` and `$option` read saved widget options. `{param:name}` and `$param` read invocation-time `params`. Load queries cannot use invocation parameters. Homarr infers the exact parameter names and primitive values from these references, rejecting missing or extra invocation params at the request boundary.
+
+Paths and query-string values must resolve to text, numbers, or booleans. JSON bodies can also use structured `json` and `multiSelect` option values, for example `{ "entity_ids": { "$option": "entities" } }`.
+
+## Protection
+
+Every request uses Homarr's existing server executor: same-origin source enforcement, network scope, DNS and redirect validation, SSRF protection, board permissions, rate and request limits, body and response limits, timeouts, and encrypted credential injection. Static headers cannot override credentials, cookies, routing, proxy, forwarding, or hop-by-hop headers.
+
+Queries default to view permission and actions to modify. DELETE always requires full permission and confirmation. Actions are never cached, retried, or run on load.
+
+Management and runtime are intentionally separate. A Homarr administrator with board-modify permission places and
+configures the widget. After placement, query and action authorization follows the request's board permission. Public
+boards may execute queries for anonymous viewers, but mutations stay authenticated. This includes shared-cache
+invalidation: `RefreshButton` is disabled for anonymous viewers, while ordinary scheduled query rendering remains
+available.
+
+Responses use bounded, versioned shared-Redis cache keys. Action invalidation advances the shared version so every
+Homarr replica stops serving the previous response without scanning or deleting a key prefix.
diff --git a/apps/docs/docs/management/custom-widgets/troubleshooting.mdx b/apps/docs/docs/management/custom-widgets/troubleshooting.mdx
new file mode 100644
index 000000000..068d8a21e
--- /dev/null
+++ b/apps/docs/docs/management/custom-widgets/troubleshooting.mdx
@@ -0,0 +1,83 @@
+# Correct Custom Widget problems
+
+## Correct an unavailable widget
+
+The definition does not exist. If it was deleted, remove the unavailable tile from the board.
+
+If the Custom Widgets page shows the definition with a **Migration required** badge, an administrator can open its
+action menu and select **Copy migration prompt**. Give that redacted prompt to an LLM, then import the resulting v2 JSON
+from the same menu. The LLM returns one complete JSON block; copy it once and select **Paste migrated widget**. Homarr
+places its `template` value into the JSX editor automatically. Because arbitrary v1 display text or JSX may contain
+credentials, the prompt omits that display configuration; describe the old widget's visible layout and behavior without
+including secrets. Other viewers see **Contact an administrator** instead of a migration link.
+
+Homarr keeps the v1 definition and encrypted secret after migration. The validated v2 replacement uses the same ID and
+takes precedence; the archived v1 record reappears if the v2 replacement is deleted. There is no v1 permanent-delete
+action during the v2 stabilization period.
+
+Otherwise, install or create a Custom JSX v2 definition.
+
+## Correct an invalid saved definition
+
+The Custom Widgets page isolates a definition that does not conform to the current schema. The other definitions remain available.
+
+An invalid definition shows its validation errors. You can delete it.
+
+You cannot edit, enable, export, duplicate, publish, or select an invalid v2 definition. Recreate the definition or import a valid definition. Preserved v1 definitions use the separate **Migration required** workflow described above.
+
+## Correct validation errors
+
+Read the first schema or JSX diagnostic. Use its path to find the invalid value.
+
+Make sure keyed API source and request names are valid and unique.
+
+Make sure that each named request references an API source. Use explicit `$option` and `$param` references.
+
+Make sure every option default matches its control. Use the correct request kind for each runtime component.
+
+An incomplete API source URL or icon URL causes a form validation error. The workbench keeps the draft open.
+
+The workbench marks the invalid field while you type. An invalid URL does not replace the form with the error boundary.
+
+An invalid definition disables widget preview and Save/Create. The Data, Options, Actions, and Diagnostics tabs remain available so you can correct it.
+
+The Diagnostics tab shows the current schema errors.
+
+## Workshop unavailable
+
+If Workshop is unavailable, check `WORKSHOP_API_URL` and PocketBase health. Widgets that are already installed continue
+to work.
+
+## Correct request errors
+
+Check the API source network scope. Check the base URL and credentials.
+
+Check the request method, path, body, direct value bindings, and board permission.
+
+For “invalid placeholder,” use `{option:name}` or `{param:name}`. Load queries can only reference options. The preview journal does not show credentials.
+
+The journal shows the method, request ID, path template, status, and duration.
+
+In a multi-instance deployment, all Homarr replicas must share Redis. Versioned cache invalidation is distributed
+through Redis; replicas connected to different Redis databases can serve stale query responses after an action.
+
+## Correct a Mantine prop warning
+
+`UNKNOWN_MANTINE_PROP` is a warning. Homarr passes the prop to Mantine.
+
+Check the prop in the documentation for the installed Mantine version. `BLOCKED_CAPABILITY` identifies an unsafe capability.
+
+Use safe widget options, temporary inputs, or named requests instead.
+
+## Repair an existing item
+
+The widget option definitions changed and the saved values are invalid. Open the item settings.
+
+Correct the marked configuration values. Homarr does not infer widget option migrations.
+
+## Roll back safely
+
+Before an application upgrade, back up the database and preserve the exact `SECRET_ENCRYPTION_KEY`. The v2 schema keeps
+the physical v1 definition and secret tables readable by a v1 binary. Roll back the application without running
+manual cleanup, verify legacy widgets, and restore the database backup if the migration itself must be reversed.
+PocketBase Workshop data is a separate backup and restore operation.
diff --git a/apps/docs/docs/management/integrations/index.mdx b/apps/docs/docs/management/integrations/index.mdx
index 51b3424d3..de819e692 100644
--- a/apps/docs/docs/management/integrations/index.mdx
+++ b/apps/docs/docs/management/integrations/index.mdx
@@ -6,11 +6,13 @@ tags:
 ---
 
 # Integrations
+
 Integrations are connections to supported third party applications.
 This page will describe the process of managing integrations but the process may vary depending on your specific integration.
 Check [the available integrations](/docs/category/integrations) for further information.
 
 ## Create an integration
+
 To create an integration, you can choose the supported application from the dropdown at the top right:
 
 ![](./img/create-integration-dropdown.png)
@@ -20,19 +22,24 @@ Next, you'll need to fill out the required fields to configure the integration:
 ![](./img/form-create-integration.png)
 
 ### Name
+
 Must be at least 1 character long, can be chosen freely.
 
 ### Url
+
 This must be the base URL of the application where Homarr should connect to.
 A few examples for this field include:
+
 - http://sabnzbd.example.com
 - https://example.com/sabnzbd
 
 You must not append any path after the base URL. Some examples for incorrect usage:
+
 - http://sabnzbd.example.com/settings
 - https://example.com/sabnzbd/settings
 
 ### Secrets
+
 An integration may or may not require secrets to function.
 To process to obtain them is usually [documented in the integration pages](/docs/category/integrations).
 Secrets are encrypted using a symmetric encryption and stored in the database.
@@ -47,6 +54,7 @@ If you already have an application created, you can also link it to the integrat
 On the edit page you can always change or remove the linked application.
 
 ### Testing and saving integration
+
 It is not allowed to create an integration without passing the test.
 This is to ensure that you minimize the amount of broken applications on your Homarr instance.
 The test and create button will perform a network request to the application and authenticate if required.
@@ -62,6 +70,7 @@ On the edit page of an integration, you can manage which users / groups can
 ![](./img/integration-permissions.png)
 
 ## Troubleshooting connection
+
 The connection to your integrations can fail due to many factors. Most of the time it should show you the reason why it failed.
 If it doesn't, you can follow these steps to troubleshoot the issue:
 
@@ -70,23 +79,23 @@ If it doesn't, you can follow these steps to troubleshoot the issue:
    - The secrets must be correct and have the correct permissions.
 2. If you use https to connect to the application, check the chapter below about [certificate issues](#certificate-issues).
 3. Check whether you followed the Homarr documentation and didn't skip any steps.
-This is the most often mistake that create many noisy support requests and following all steps will often resolve the problems.
+   This is the most often mistake that create many noisy support requests and following all steps will often resolve the problems.
 4. Check Homarr's logs for more information. As we have no control over breaking changes in upstream APIs and third party software,
-they can break without notice in unexpected ways which can also lead to errors within Homarr. In such case, these occurrences must be reported
-and fixed within the source code of Homarr.
-5. Check whether the host can reach the destination hostname / IP using ``ping`` and ``curl`` or ``wget`` afterward.
-Execute this command on the host machine, not inside containers, to check whether it can connect or not.
+   they can break without notice in unexpected ways which can also lead to errors within Homarr. In such case, these occurrences must be reported
+   and fixed within the source code of Homarr.
+5. Check whether the host can reach the destination hostname / IP using `ping` and `curl` or `wget` afterward.
+   Execute this command on the host machine, not inside containers, to check whether it can connect or not.
 6. Check whether the container / pod can reach the destination hostname / IP. Execute the same commands in the shell inside the container / pod.
 7. Check your reverse proxy / authentication proxy logs for failures / hints
 8. Check your security log of tunnels and VPNs
 9. Check your router for security events
 10. Check your VLAN configuration and firewall rules
 11. Check your DNS settings for the host machine and the containers / pods and whether they can resolve the hostnames
-12. Check throughput and stability of your network connection using ``iperf3``
+12. Check throughput and stability of your network connection using `iperf3`
 13. Check syslog / drivers of your OS for hints
 14. Check logs of your destination applications (eg. SABnzbd)
 15. Attempt to disable CSRF / tamper protections when absolutely no other workaround available -> this comes with some security implications - be careful!
-Re-enable if this didn't fix the issue.
+    Re-enable if this didn't fix the issue.
 
 If none of these troubleshooting steps worked, you can request support from our team in Discord or GitHub.
 
@@ -95,4 +104,4 @@ If none of these troubleshooting steps worked, you can request support from our
 If you are using a self-signed certificate you'll need to add it to the [trusted certificates](../certificates) in Homarr.
 Most of the time you should also get a button to add the certificate automatically when you try to connect to the integration.
 Please check that the certificate is the one you are expecting to prevent Man in the Middle attacks.
-For some integrations, you can find a guide on how to retrieve the certificate [here](../certificates/#obtaining-certificates).
\ No newline at end of file
+For some integrations, you can find a guide on how to retrieve the certificate [here](../certificates/#obtaining-certificates).
diff --git a/apps/docs/docs/management/mcp.mdx b/apps/docs/docs/management/mcp.mdx
index 540988f29..724a71c0b 100644
--- a/apps/docs/docs/management/mcp.mdx
+++ b/apps/docs/docs/management/mcp.mdx
@@ -96,6 +96,10 @@ MCP supports two authentication methods:
 
 API key authentication is simpler and recommended for most setups. The API key inherits the permissions of the user who created it. Tools that require higher privileges will return permission errors if the key lacks access.
 
+Custom Widget and Workshop authoring are different: their tools, prompts, and resources are exposed only when the API
+key owner is a Homarr administrator. Non-administrator keys cannot discover or invoke those capabilities. Creating an
+API key never elevates the owner.
+
 ## Testing the Connection
 
 Verify your MCP endpoint is working:
@@ -124,25 +128,26 @@ curl -s -X POST \
 
 Homarr exposes 50+ tools organized by namespace. Each tool is either a **query** (GET, read-only) or **mutation** (POST, write action).
 
-| Namespace          | Example Tools                                            | Type       |
-| ------------------ | -------------------------------------------------------- | ---------- |
-| `app`              | List all apps, get app by ID, create/update/delete app   | GET + POST |
-| `apiKeys`          | List API keys                                            | GET        |
-| `beszel`           | Systems status, alerts, historical system metrics        | GET        |
+| Namespace          | Example Tools                                              | Type       |
+| ------------------ | ---------------------------------------------------------- | ---------- |
+| `app`              | List all apps, get app by ID, create/update/delete app     | GET + POST |
+| `apiKeys`          | List API keys                                              | GET        |
+| `beszel`           | Systems status, alerts, historical system metrics          | GET        |
 | `board`            | List boards, read settings/CSS, create/update/delete board | GET + POST |
-| `docker`           | List containers, inspect container, start/stop/restart   | GET + POST |
-| `icon`             | Search icons                                             | GET        |
-| `info`             | Server health, version info                              | GET        |
-| `integration`      | List integrations, test connection, delete integration   | GET + POST |
-| `invite`           | List invitations, delete invite                          | GET + POST |
-| `calendar`         | Calendar events from media servers                       | GET        |
-| `dnsHole`          | DNS hole summary, toggle blocking                        | GET + POST |
-| `downloads`        | Active downloads, pause/resume/delete                    | GET + POST |
-| `healthMonitoring` | Resource usage stats                                     | GET        |
-| `patchmon`         | Host patch and security update statistics                | GET        |
-| `mediaRequests`    | Approve/decline media requests                           | GET + POST |
-| `mediaServer`      | Media server sessions and stats                          | GET        |
-| `smartHome`        | Execute automations, device states                       | GET + POST |
+| `docker`           | List containers, inspect container, start/stop/restart     | GET + POST |
+| `icon`             | Search icons                                               | GET        |
+| `info`             | Server health, version info                                | GET        |
+| `integration`      | List integrations, test connection, delete integration     | GET + POST |
+| `invite`           | List invitations, delete invite                            | GET + POST |
+| `calendar`         | Calendar events from media servers                         | GET        |
+| `customWidget`     | Validate, preview, create, and iteratively update widgets  | GET + POST |
+| `dnsHole`          | DNS hole summary, toggle blocking                          | GET + POST |
+| `downloads`        | Active downloads, pause/resume/delete                      | GET + POST |
+| `healthMonitoring` | Resource usage stats                                       | GET        |
+| `patchmon`         | Host patch and security update statistics                  | GET        |
+| `mediaRequests`    | Approve/decline media requests                             | GET + POST |
+| `mediaServer`      | Media server sessions and stats                            | GET        |
+| `smartHome`        | Execute automations, device states                         | GET + POST |
 
 The tools table on the MCP tab is dynamically generated - it always reflects the latest available procedures from your Homarr instance.
 
@@ -152,6 +157,8 @@ The tools table on the MCP tab is dynamically generated - it always reflects the
 - Tools inherit the permissions of the API key's owner
 - OAuth endpoints are rate-limited to prevent abuse
 - Tool execution errors are contained - a failing tool call does not crash the MCP server
+- Custom-widget MCP actions are simulation-only; live preview actions must be enabled explicitly in the browser workbench
+- Custom-widget secret values are never returned through MCP
 - All communication uses HTTPS (configure HTTP → HTTPS redirects on your reverse proxy)
 
 ## Use Cases
@@ -163,3 +170,75 @@ The tools table on the MCP tab is dynamically generated - it always reflects the
 - **"How many users are on my Homarr instance?"** - AI lists all users (admin only)
 - **"Toggle Pi-hole blocking for 5 minutes"** - AI interacts with DNS controls
 - **"How are my servers doing?"** - AI fetches Beszel system stats including CPU, memory, disk, and alerts
+- **"Build a Custom Widget for this API"** - AI validates and previews one definition before it saves the definition
+
+## Create a Custom Widget with an AI agent
+
+An agent creates one `homarr-custom-widget-v2` definition at a time. Start with the native prompt `homarr-custom-widget-author`.
+
+The API key owner must be a Homarr administrator. The same rule applies to management, import, migration, preview,
+secrets, publication, Workshop installation, and the HTTP authoring resources.
+
+Then, read the live schema and component resources. These resources describe the installed Mantine components.
+
+1. Call `customWidget_getAuthoringPrompt` and `customWidget_schema`.
+2. Build one Custom Widget definition.
+3. Call `customWidget_validate` without saving the definition.
+4. Call `customWidget_previewCreate`.
+5. Test named requests with `customWidget_previewQuery` and `customWidget_previewAction`.
+6. Open the returned preview URL.
+7. Examine `customWidget_previewJournal`.
+8. Revise the local candidate and create another preview session until it is ready.
+9. Call `customWidget_create`, supplying any credentials and deployment-specific source URLs the user already provided.
+10. If the user must enter the source URL or credentials, call `customWidget_configurationRequestUser` with the new definition ID and wait for completion.
+11. Create a final preview with that definition ID so Homarr loads its stored credentials, then test it again.
+12. Use `customWidget_update` or `customWidget_templatePatch` for any final saved-definition corrections.
+13. Repeat this procedure for the next Custom Widget.
+
+The agent receives the configuration-request status. The agent does not receive plaintext credentials. A preview-scoped setup URL configures only that temporary preview; use a definition-scoped URL when the values must persist.
+
+Discovery resources:
+
+- `homarr://custom-widgets/schema`
+- `homarr://custom-widgets/components`
+- `homarr://custom-widgets/components/{name}`
+- `homarr://custom-widgets/examples/{name}`
+- `homarr://custom-widgets/skill`
+
+An authenticated administrator can use the matching `/api/custom-widgets/authoring-prompt`, `/schema`, `/components`,
+and `/skill` endpoints instead of MCP resource URIs. These endpoints are not public schema downloads.
+
+The Custom Widget tools are:
+
+- `customWidget_schema`
+- `customWidget_validate`
+- `customWidget_list`
+- `customWidget_get`
+- `customWidget_create`
+- `customWidget_update`
+- `customWidget_delete`
+- `customWidget_templatePatch`
+- `customWidget_previewCreate`
+- `customWidget_previewQuery`
+- `customWidget_previewAction`
+- `customWidget_previewJournal`
+- `customWidget_secretSet`
+- `customWidget_sourceConfigure`
+- `customWidget_configurationRequestUser`
+- `customWidget_workshopSearch`
+- `customWidget_workshopGet`
+- `customWidget_workshopInstall`
+- `customWidget_getAuthoringPrompt`
+- `customWidget_getSkill`
+
+Custom Widget permissions are not assignable group capabilities. Administrator status is required for the complete
+authoring surface. A source-configuration URL is short-lived and single-use, requires the same logged-in administrator
+to open and complete it, and never returns plaintext credentials to the agent.
+
+Adding a `customApi` item through `board_addItem`, changing its definition or options, and duplicating a board that
+contains one also require an administrator with board-modify access. Existing placements continue to render and run
+authorized requests according to normal board permissions.
+
+Homarr applies its request security controls during request execution. These controls include SSRF, DNS, redirect, size, timeout, rate, and permission controls.
+
+Read [Use agents and skills.sh](./custom-widgets/agent-authoring) for the complete procedure and the portable Agent Skill.
diff --git a/apps/docs/docs/management/media/index.mdx b/apps/docs/docs/management/media/index.mdx
index 090a6559b..e55a05659 100644
--- a/apps/docs/docs/management/media/index.mdx
+++ b/apps/docs/docs/management/media/index.mdx
@@ -7,7 +7,8 @@ tags:
 ---
 
 # Media
+
 Using the media feature, you can upload images for custom icons to Homarr.
 Images will be stored in the database. They can be selected in the [icon picker](/docs/advanced/icons).
 
-![](./img/screenshot.png)
\ No newline at end of file
+![](./img/screenshot.png)
diff --git a/apps/docs/docs/management/search-engines/index.mdx b/apps/docs/docs/management/search-engines/index.mdx
index ef9fba2a3..07f2f3098 100644
--- a/apps/docs/docs/management/search-engines/index.mdx
+++ b/apps/docs/docs/management/search-engines/index.mdx
@@ -6,6 +6,7 @@ tags:
 ---
 
 # Search Engines
+
 Using the search engines, terms can be quickly searched simply by opening the search bar at the top or using the keyboard shortcut `CTRL + K`.
 
 ![](./img/search-engines.png)
@@ -13,31 +14,36 @@ Using the search engines, terms can be quickly searched simply by opening the se
 You can add any search engine that has a search URL that accepts a search term as a parameter.
 
 ## Create search engine
+
 To create a custom search engine, you can click the button at the top of the page.
 
 ![](./img/create-search-engine.png)
 
 ### Name
+
 The name can be chosen freely. It will be displayed in the search box popover.
 
 ### Short
+
 Prefix that is used to choose the search engine in the popover using the keyboard.
-It is recommended that this value is kept short (for example ``g`` for Google and ``e`` for Ecosia).
+It is recommended that this value is kept short (for example `g` for Google and `e` for Ecosia).
 
 ### Configuration
 
 In the configuration section you can select between two options.
 
 #### Search template
-The template must be a valid URL that incldues the ``%s`` placeholder.
-Homarr will replace the ``%s`` with the term that the user entered.
+
+The template must be a valid URL that incldues the `%s` placeholder.
+Homarr will replace the `%s` with the term that the user entered.
 
 ##### Examples
-- Google: ``https://www.google.com/search?q=%s``
-- Ecosia: ``https://www.ecosia.org/search?q=%s``
-- DuckDuckGo: ``https://duckduckgo.com/?q=%s``
-- Bing: ``https://www.bing.com/search?q=%s``
-- YouTube: ``https://www.youtube.com/results?search_query=%s``
+
+- Google: `https://www.google.com/search?q=%s`
+- Ecosia: `https://www.ecosia.org/search?q=%s`
+- DuckDuckGo: `https://duckduckgo.com/?q=%s`
+- Bing: `https://www.bing.com/search?q=%s`
+- YouTube: `https://www.youtube.com/results?search_query=%s`
 
 ## Media request search
 
@@ -45,12 +51,14 @@ Jellyseerr, Overseerr, and Seerr integrations have a dedicated **Spotlight mode*
 This mode does not require creating a search engine entry - it is available automatically when you have a compatible integration configured.
 
 You can access it from:
+
 - The **Modes list** in Spotlight (opened with `CTRL + K`)
 - The **search button** on the media request list and stats widgets
 
 ### Availability indicators
 
 Search results display colored status badges showing the media's current state in your integration:
+
 - **Available** - fully available in your media library
 - **Partial** - some content (e.g. seasons) is available
 - **Processing** - currently being downloaded or processed
diff --git a/apps/docs/docs/management/settings/index.mdx b/apps/docs/docs/management/settings/index.mdx
index 016d56d10..8507d2b4f 100644
--- a/apps/docs/docs/management/settings/index.mdx
+++ b/apps/docs/docs/management/settings/index.mdx
@@ -13,6 +13,8 @@ tags:
 The settings page applies options to the whole Homarr application.
 Some changes need a full page reload before they take effect.
 
+All changes are collected in a single form. Click the **Save changes** button in the save bar at the bottom of the page to apply them. The save bar only appears when you have unsaved changes, and the **Discard** button reverts your changes.
+
 ## Analytics
 
 Homarr uses [PostHog](https://posthog.com/) to collect anonymous usage data.
diff --git a/apps/docs/docs/management/tasks/index.mdx b/apps/docs/docs/management/tasks/index.mdx
index bd9395610..c47eb1a74 100644
--- a/apps/docs/docs/management/tasks/index.mdx
+++ b/apps/docs/docs/management/tasks/index.mdx
@@ -38,6 +38,3 @@ You can disable a task by clicking the "Power" button, which will change it to a
 When a task is disabled, it will not run automatically according to its schedule.
 You can enable it again by clicking the "Power-Off" button, which will change it back to a "Power" button.
 Running a task manually is still possible when it is disabled.
-
-
-
diff --git a/apps/docs/docs/management/users/index.mdx b/apps/docs/docs/management/users/index.mdx
index 7be233af0..a7181a1f5 100644
--- a/apps/docs/docs/management/users/index.mdx
+++ b/apps/docs/docs/management/users/index.mdx
@@ -20,8 +20,10 @@ Homarr supports [single sign on for easier and seamless authentication](/docs/ad
 :::
 
 ## Manage users
+
 ### Creating new users
-To create new users, you must navigate to ``Mangement`` > ``Users`` > ``Manage`` and click on the create button to create a new one: \
+
+To create new users, you must navigate to `Mangement` > `Users` > `Manage` and click on the create button to create a new one: \
 ![](./img/button-create-user.png)
 
 You'll be guided through the process using a wizard: \
@@ -35,25 +37,31 @@ After you completed all steps, you can start over to create another user or choo
 ![](./img/wizard-complete.png)
 
 ## Editing a user
-A user can be edited on the ``Mangement`` > ``Users`` > ``Manage`` page when you click on the username.
+
+A user can be edited on the `Mangement` > `Users` > `Manage` page when you click on the username.
 Here you'll have access to two tabs: **General** and **Security**.
 
 ### General tab
+
 #### Username
+
 This is the unique username that identifies this user. It can be changed to anything but must be at least 3 characters long with a limit of 255 characters.
 This name will be used for the credential's login. It is also used to auto-generate profile pictures if no picture was uploaded.
 
 #### E-Mail
+
 This is the unique email of the user. As of 1.0, it is not used for any notifications and only for organizational purposes.
 This field is optional.
 
 #### Language
+
 This is the currently selected language of the user.
 Changing the language will change all text & the right to left (RTL) feature in some languages.
 By default, Homarr will choose English as the default language. Here you can override the language for this specific user.
 The user may choose a different language by themselves afterward.
 
 #### Home board
+
 Optional field for the board that is loaded by default if no board was specified in the URL.
 Only boards that the user has permission to are being shown.
 
@@ -70,6 +78,7 @@ Choose the first day of the week for the user. This will affect the calendar wid
 Option to show icons for status check instead of colored dots.
 
 #### Delete
+
 This action will permanently delete the user from the database, including any preferences they set.
 If the user created boards, they wil **not** be deleted.
 This action is **irreversible** and cannot be undone. All data is permanently lost.
@@ -77,6 +86,7 @@ This action is **irreversible** and cannot be undone. All data is permanently lo
 ### Security tab
 
 #### Change password
+
 Here the password for this user can be changed.
 It must also meet the password requirements of Homarr.
 The password is stored as an encrypted value with a salt in the database - this means the value cannot be read out from the database afterward.
@@ -85,50 +95,63 @@ This functionality can also be useful to lock out a bad actor without tampering
 For security reasons, you must confirm the password a second time.
 
 ## Groups
+
 Using groups, you can manage the permissions of users.
 Members can be directly assigned to groups.
 
-A user will have the permissions of all groups they are a member of. 
+A user will have the permissions of all groups they are a member of.
 Some permissions include other permissions, for example the "Full board access" permission includes all board permissions.
 
 By default, a group called "credentials-admin" will be generated where the first user will be placed.
 However, you can create as many groups as you'd like.
 
 ### Creating a group
-Click on the button ``New group`` to create a new one.
+
+Click on the button `New group` to create a new one.
 Homarr will prompt you for a group name.
 
 ### Managing a group
+
 #### General tab
+
 ##### Name
+
 Name for the group that can be chosen freely.
 
 ##### Transfer ownership
+
 Every group has an owner. Using this button, the ownership can be transferred to a different user.
 Group ownership is only organizational.
 
 ##### Delete
+
 Deletes the group permanently. This change is irreversible.
 
 #### Settings tab
+
 In this tab, you can configure some settings for the group. Those settings will be prioritized by the order of the groups on the groups list page
 
 ##### Priorization
+
 The higher a group in the list, the higher the priority. This means that if a user is in multiple groups, the permissions of the group with the highest priority will be used.
 It will always fallback to the everyone group if no other group permissions are set.
 
 ![](./img/groups-list.png)
 
 ##### Boards
+
 Configure board settings for a group. User specific settings will override group settings.
 
 ###### Home board
+
 The board that is loaded by default if no board was specified in the URL.
 
 ###### Mobile board
+
 The board that is loaded by default on mobile devices.
 
 #### Members tab
+
 In this tab, you can assign users to the group. With the button at the top right, a new member can be added to the group:
 
 ![](./img/add-group-member.png)
@@ -138,6 +161,7 @@ Members can be removed from the group using the remove button at the end:
 ![](./img/remove-group-member.png)
 
 #### Permissions tab
+
 In this tab, you manage what permissions the members of this group will have.
 Currently, the following permissions are available:
 
@@ -153,14 +177,21 @@ Currently, the following permissions are available:
   - **Full integration access**: Allow members to manage, use and interact with any integration
 - **Administrator**: Members with this permission have full access to all features and settings
 
+Custom Widget authoring, import, migration, preview, secrets, Workshop access, and placement configuration are reserved
+for administrators and are not separate assignable group permissions. Board modifiers can still move, resize, change
+presentation settings, or remove an existing Custom Widget placement, and board viewers can use placed widgets as
+allowed by each request.
+
 When you changed permissions, you must confirm your changes by clicking the banner at the bottom:
 
 ![](./img/changing-group-permissions.png)
 
 #### Special groups
+
 Currently one special group exists. This group is `everyone`. It automatically adds every user that is known to Homarr to its members. Neither its name nor its members can be changed.
 
 ## Invites
+
 Invites are an easy-to-use system to allow users to onboard themselves.
 It is useful in companies or large-scale homelabs where many users must be onboarded at the same time.
 You should trust the end user that they enter their data truthfully as the administrator will not confirm the entered data after the user has completed the onboarding.
@@ -169,6 +200,7 @@ This feature can only be used when credentials authentication is enabled.
 An invitation link can be used indefinitely.
 
 ### Creating an invitation
+
 Click on the button:
 
 ![](./img/create-invitation-button.png)
@@ -179,14 +211,15 @@ The default is 4 hours in the future.
 
 ![](./img/invitation-expiry-date.png)
 
-Next, click ``Create`` and you'll get a confirmation with an ID, Token and a link that can be copied:
+Next, click `Create` and you'll get a confirmation with an ID, Token and a link that can be copied:
 
 ![](./img/create-invitation-confirmation.png)
 
 Both ID and Token are also in the URL. Ensure that you copy either ID & Token or the URL - it will never be shown again.
-Clicking the ``Copy & close`` button will copy the URL to your clipboard.
+Clicking the `Copy & close` button will copy the URL to your clipboard.
 
 ### Self-onboarding
+
 Clicking the invitation link will bring up a form with fields for the username and password:
 
 ![](./img/invitation-self-onboarding.png)
@@ -194,6 +227,7 @@ Clicking the invitation link will bring up a form with fields for the username a
 At the bottom of the page, the user who created the invitation can be seen.
 
 ### Deleting an invitation
+
 If an invitation needs to be deleted before or after the expiry, the delete button at the end of the table can be used:
 
 ![](./img/deleting-invitation.png)
diff --git a/apps/docs/docs/management/workshop/index.mdx b/apps/docs/docs/management/workshop/index.mdx
new file mode 100644
index 000000000..7caffcd42
--- /dev/null
+++ b/apps/docs/docs/management/workshop/index.mdx
@@ -0,0 +1,121 @@
+---
+tags:
+  - Workshop
+  - Custom Widgets
+  - Custom CSS
+---
+
+# Community Workshop
+
+:::warning Experimental feature
+
+This feature is experimental and will probably change. If you encounter bugs, need more capabilities, or find something confusing, tell us in the [official discussion thread](https://github.com/homarr-labs/homarr/discussions/categories/custom-widgets). Your feedback directly shapes what comes next. Happy hacking!
+
+:::
+
+The [Community Workshop](pathname:///workshop) is where Homarr users share and discover
+**custom CSS themes** and **custom widgets**. You can browse submissions, upvote the ones
+you like, report abuse, and install entries directly into your own Homarr instance.
+
+The central `homarr.dev` Workshop is a public community. Browsing it on the website is public. Browsing, installing,
+publishing, or importing Workshop content **inside a Homarr instance is restricted to Homarr administrators**.
+
+:::warning
+
+The Workshop contains community-made content. Moderation is not a security boundary, and PocketBase does not interpret
+or validate submission content. Always review widget capabilities, network origins, actions, and CSS before installing.
+Homarr's installation-time validator is definitive and can reject content that the public service accepted earlier.
+Back up your instance before installing untrusted content.
+
+:::
+
+## Browsing and voting
+
+- Filter by **Widgets** or **CSS**, show or hide outdated entries, and sort by popularity, creation date, recent updates, or discussion activity.
+- Sign in with **GitHub** to upvote/downvote, submit your own creations, or report a submission.
+- Each submission shows its title, description, linked GitHub author, revision, optional screenshots, comments, and full content. Widget pages also summarize API sources, actions, options, network access, and required credentials before installation.
+- A new submission receives one real upvote owned by its author. Votes remain unique per user and submission.
+- Report details and reporter identities are visible only to Workshop moderators. Reported submissions are highlighted in the moderation page, where each open report can be dismissed or the submission can be deleted. Reports do not automatically remove a submission.
+- The manual **Outdated** badge warns visitors that a submission may need an update.
+
+## Comments
+
+Comments are publicly readable and appear in chronological conversation bubbles with the author's avatar and GitHub profile. Signed-in users can post; authors can edit or delete their own comments, and Workshop moderators can delete any comment. Failed posts keep the text you typed. When SMTP and `WORKSHOP_PUBLIC_ORIGIN` are configured, the submission author receives one email for a comment from another user. Self-comments, edits, and deletions do not send mail.
+
+## Submitting
+
+1. Sign in with GitHub.
+2. Click **Share yours** and choose the type:
+   - **Custom widget** — paste the JSON exported from **Manage → Custom Widgets → Export**.
+     It must match the `homarr-custom-widget-v2` schema (validated before submission).
+   - **Custom CSS** — paste your stylesheet (max 16384 characters).
+3. Review the widget JSON or CSS in the syntax-aware editor, then add a title, description, optional screenshots, and changelog.
+4. Submit the entry.
+
+Submissions are published immediately. Reported entries are reviewed and may be removed.
+Authors can edit a submission later to publish a new revision. The edit form can keep or remove existing screenshots and add new PNG, JPG, or WebP images without changing the Workshop URL.
+
+When SMTP and `WORKSHOP_PUBLIC_ORIGIN` are configured, every current Workshop moderator receives an email when a report is submitted. If a moderator deletes the reported submission, its author receives a separate removal email. Author self-deletion does not send a moderation email.
+
+:::info Separate roles
+
+A Workshop moderator is a user with PocketBase's internal `isAdmin` field. This role moderates the central community
+and is unrelated to a Homarr instance administrator.
+
+:::
+
+## Submission guidelines
+
+Submissions must be useful to Homarr users and safe to install. Do not submit content that is
+malicious, deceptive, illegal, hateful, sexually explicit, gore, gambling-focused, spam, or content
+that primarily promotes unrelated products or services.
+
+## Installing into Homarr
+
+You can install workshop entries without leaving Homarr:
+
+- **Custom widgets (Homarr administrators only)** — go to **Manage → Custom Widgets**, or use **Install from Workshop** in the
+  board widget picker. Pick an entry, review its capabilities, and enter any required local secrets before import.
+- **Custom CSS from Workshop (Homarr administrators only)** — open a board's **Settings → Custom CSS**, click **Install from Workshop**, and
+  pick a theme to load it into the editor before saving.
+
+Alternatively, open a submission in the Workshop and use **Download widget JSON** or **Copy CSS**. The submission page shows the matching manual installation steps before the source code.
+
+Custom Widget imports detect required bearer, basic, header, or query credentials. You can enter them during import or explicitly defer them; secret values are never stored in Workshop content. Missing credentials remain visible on the local Custom Widget afterward.
+
+## Workshop deployment
+
+Workshop is powered by [PocketBase](https://pocketbase.io). The production image compiles the current Docusaurus site and serves it together with the API from one origin. The deployment lives in `apps/workshop/` with a Dockerfile, Compose configuration, version-controlled migrations, hooks, a smoke test, and ACT-local workflow instructions.
+
+Run `pnpm docker:workshop` for PocketBase on port 8090, then run
+`WORKSHOP_API_URL=http://127.0.0.1:8090 pnpm dev:docs` for Docusaurus on port 3003. `pnpm docker:docs` builds the
+combined production layout. Normal start and stop commands retain data; `down --volumes` is an intentional,
+irreversible development reset.
+
+GitHub needs only the central callback `https://<workshop-host>/api/oauth2-redirect`. Keep PocketBase origins unrestricted
+unless every self-hosted Homarr caller is explicitly listed. Configure both `GITHUB_CLIENT_ID` and
+`GITHUB_CLIENT_SECRET`; supplying only one is a startup error. Set `WORKSHOP_PUBLIC_ORIGIN` in production so generated
+links and email use the public host. Workshop uses the OAuth provider username as the public display name instead of
+the profile's full name. Configure SMTP for comment, report, and removal notices.
+
+The public URL contract is:
+
+| Variable                 | Purpose                                           | Default                       |
+| ------------------------ | ------------------------------------------------- | ----------------------------- |
+| `HOMARR_WEBSITE_URL`     | Documentation/site base used by Homarr links      | `https://homarr.dev`          |
+| `WORKSHOP_API_URL`       | PocketBase API used by Homarr and standalone docs | `HOMARR_WEBSITE_URL`          |
+| `WORKSHOP_WEB_URL`       | Public Workshop page linked from Homarr           | `HOMARR_WEBSITE_URL/workshop` |
+| `WORKSHOP_PUBLIC_ORIGIN` | PocketBase-generated links and email              | Required in production        |
+| `PB_ALLOWED_ORIGINS`     | PocketBase browser origins                        | `*` for the central community |
+
+The deprecated docs-only `WORKSHOP_URL` alias remains for one release; `WORKSHOP_API_URL` takes precedence. Restart
+services after changing these values.
+
+Back up application and PocketBase data before deployment. Publish the combined image by immutable digest, test the
+exact digest in staging, rehearse application rollback and PocketBase restore, then promote that same digest.
+
+## Client architecture
+
+Workshop access is centralized in `@homarr/workshop/backend`. It exports the typed `WorkshopBackend`, its typed PocketBase instance, stable TanStack Query option factories, and the `useWorkshop…` query and mutation hooks used by Homarr. The documentation site uses the same backend rather than maintaining a second API contract.
+
+Listing fields derived by the `workshop_listings` view—such as submission type, score, and counts—are normalized by the shared client. Healthy deployments keep filtering, sorting, and pagination in PocketBase. If a persistent development volume still has an older view that rejects those fields, the client retries without them and applies the same operations locally; it can also fall back to the base submissions collection. Production deployments should nevertheless apply the current migration so the view exposes the complete metadata.
diff --git a/apps/docs/docs/widgets/anchor-note/index.mdx b/apps/docs/docs/widgets/anchor-note/index.mdx
index 453a5b51c..522252a1a 100644
--- a/apps/docs/docs/widgets/anchor-note/index.mdx
+++ b/apps/docs/docs/widgets/anchor-note/index.mdx
@@ -1,42 +1,46 @@
 ---
-title: 'Anchor Note'
-description: 'Display and edit a selected note from Anchor'
+title: "Anchor Note"
+description: "Display and edit a selected note from Anchor"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { anchorNoteWidget } from '.';
-import { anchorIntegration } from '@site/docs/integrations/anchor';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { anchorNoteWidget } from ".";
+import { anchorIntegration } from "@site/docs/integrations/anchor";
 
-<WidgetHeader
-  widget={anchorNoteWidget}
-  categories={['Notes']}
-/>
+<WidgetHeader widget={anchorNoteWidget} categories={["Notes"]} />
 
 The Anchor Note widget shows a selected note from your Anchor integration. If your note permissions allow it, you can also edit the note title and content directly in Homarr.
 
 ### Screenshots
 
-import anchorNoteWidgetScreenshot from './img/widget.png';
+import anchorNoteWidgetScreenshot from "./img/widget.png";
 
 <img src={anchorNoteWidgetScreenshot} alt="anchor-note-widget" width={256} height={256} />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: anchorIntegration
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: anchorIntegration,
+    },
+  ]}
+/>
 
 ### Interactions
 
-- Click **Edit** to start editing the selected note.
+- Hover the widget, focus within it, or use a touch device to reveal **Edit**, then select it to start editing the note.
 - Click **Save** to persist changes to Anchor.
 - Click **Cancel** to discard unsaved changes.
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/app/index.mdx b/apps/docs/docs/widgets/app/index.mdx
index ec62d862e..dd5cef590 100644
--- a/apps/docs/docs/widgets/app/index.mdx
+++ b/apps/docs/docs/widgets/app/index.mdx
@@ -1,37 +1,39 @@
 ---
-title: 'App'
-description: 'Embeds an app into the board.'
+title: "App"
+description: "Embeds an app into the board."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { appWidget } from '.';
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { appWidget } from ".";
 
-
-<WidgetHeader
-  widget={appWidget}
-  categories={['Links', 'Apps']}
-/>
+<WidgetHeader widget={appWidget} categories={["Links", "Apps"]} />
 
 The app widget allows you to add a link to an application or a website that you want to access quickly from your Homarr board.
 It also supports a status check to indicate whether Homarr can reach the application or website.
 
 ### Screenshots
 
-import githubApp from './img/github.png';
-import jellyseerrApp from './img/jellyseerr-description-tooltip.png';
-import piHoleApp from './img/pi-hole-ping-icon.png';
+import githubApp from "./img/github.png";
+import jellyseerrApp from "./img/jellyseerr-description-tooltip.png";
+import piHoleApp from "./img/pi-hole-ping-icon.png";
 
-<div className='flex gap-1'>
+<div className="flex gap-1">
   <img src={githubApp} alt="app github with-status-check" width={128 * 1.5} height={128 * 1.5} />
   <img src={piHoleApp} alt="app pi-hole with-status-check status-check-icon" width={128 * 1.5} height={128 * 1.5} />
   <img src={jellyseerrApp} alt="app jellyseerr with-description-tooltip" height={128 * 1.5} />
 </div>
+
+### Interactions
+
+App tiles stay compact and open their configured destination directly. Right-click a tile to inspect its status or change its settings when the board and your preferences allow it.
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={appWidget.configuration} />
diff --git a/apps/docs/docs/widgets/archive-team-warrior/index.mdx b/apps/docs/docs/widgets/archive-team-warrior/index.mdx
new file mode 100644
index 000000000..5eceed2c2
--- /dev/null
+++ b/apps/docs/docs/widgets/archive-team-warrior/index.mdx
@@ -0,0 +1,38 @@
+---
+title: "ArchiveTeam Warrior"
+description: "Monitor ArchiveTeam Warrior status, projects, bandwidth, and active archival jobs."
+hide_title: true
+---
+
+import { archiveTeamWarriorIntegration } from "@site/docs/integrations/archiveteam-warrior";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+import { archiveTeamWarriorWidget } from ".";
+
+<WidgetHeader widget={archiveTeamWarriorWidget} categories={["Archiving", "Monitoring"]} />
+
+Use this widget to see what your ArchiveTeam Warrior is preserving without leaving Homarr. The compact view keeps the current project, runner state, job counts, bandwidth, and broadcast message visible. Advanced view adds the complete active-job list and exact update time.
+
+### Supported integration
+
+<WidgetIntegrations
+  items={[
+    {
+      integration: archiveTeamWarriorIntegration,
+      note: "Shows status and active archival work from one Warrior instance",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+
+<WidgetConfig configuration={archiveTeamWarriorWidget.configuration} />
diff --git a/apps/docs/docs/widgets/archive-team-warrior/index.ts b/apps/docs/docs/widgets/archive-team-warrior/index.ts
new file mode 100644
index 000000000..5a66b9fbb
--- /dev/null
+++ b/apps/docs/docs/widgets/archive-team-warrior/index.ts
@@ -0,0 +1,19 @@
+import type { WidgetDefinition } from "@site/src/types";
+import { IconArchive } from "@tabler/icons-react";
+
+export const archiveTeamWarriorWidget: WidgetDefinition = {
+  icon: IconArchive,
+  name: "ArchiveTeam Warrior",
+  description: "Monitor ArchiveTeam Warrior status, projects, bandwidth, and active archival jobs.",
+  path: "../../widgets/archive-team-warrior",
+  configuration: {
+    items: [
+      {
+        name: "Show broadcast message",
+        description: "Show the message broadcast by the selected Warrior project when space allows.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};
diff --git a/apps/docs/docs/widgets/audio-stats/index.mdx b/apps/docs/docs/widgets/audio-stats/index.mdx
index 88fa87f79..f79a588c3 100644
--- a/apps/docs/docs/widgets/audio-stats/index.mdx
+++ b/apps/docs/docs/widgets/audio-stats/index.mdx
@@ -4,6 +4,8 @@ description: "Displays media and listening statistics from Navidrome or Audioboo
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -36,6 +38,8 @@ Only options relevant to your linked integration are shown in the configuration
   ]}
 />
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/bazarr/index.mdx b/apps/docs/docs/widgets/bazarr/index.mdx
index e262cfa75..cb35f6c71 100644
--- a/apps/docs/docs/widgets/bazarr/index.mdx
+++ b/apps/docs/docs/widgets/bazarr/index.mdx
@@ -1,26 +1,25 @@
 ---
-title: 'Bazarr'
-description: 'Displays missing subtitle counts and health indicators from your Bazarr instance.'
+title: "Bazarr"
+description: "Displays missing subtitle counts and health indicators from your Bazarr instance."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { bazarrWidget } from '.';
-import { bazarrIntegration } from '@site/docs/integrations/bazarr';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={bazarrWidget}
-  categories={['Subtitles', 'Media']}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { bazarrWidget } from ".";
+import { bazarrIntegration } from "@site/docs/integrations/bazarr";
+
+<WidgetHeader widget={bazarrWidget} categories={["Subtitles", "Media"]} />
 
 This widget shows subtitle status from your Bazarr instance, including missing episode and movie subtitles, provider issues, and health warnings.
 
 ### Screenshots
 
-import widgetOverview from './img/widget-overview.png';
+import widgetOverview from "./img/widget-overview.png";
 
 <div className="flex flex-col gap-2">
   <img src={widgetOverview} alt="bazarr-widget-overview" width={128 * 4} />
@@ -28,14 +27,21 @@ import widgetOverview from './img/widget-overview.png';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: bazarrIntegration,
-  note: "Displays missing subtitle counts and health indicators"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: bazarrIntegration,
+      note: "Displays missing subtitle counts and health indicators",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={bazarrWidget.configuration} />
diff --git a/apps/docs/docs/widgets/beszel-alerts/index.mdx b/apps/docs/docs/widgets/beszel-alerts/index.mdx
index 3a4899d17..d1abe2d2e 100644
--- a/apps/docs/docs/widgets/beszel-alerts/index.mdx
+++ b/apps/docs/docs/widgets/beszel-alerts/index.mdx
@@ -1,22 +1,21 @@
 ---
-title: 'Beszel Alerts'
-description: 'View Beszel alert configurations and history with triggered/ok status indicators.'
+title: "Beszel Alerts"
+description: "View Beszel alert configurations and history with triggered/ok status indicators."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { beszelAlertsWidget } from '.';
-import { beszelIntegration } from '@site/docs/integrations/beszel';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-import beszelAlerts from './img/beszel-alerts.png';
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { beszelAlertsWidget } from ".";
+import { beszelIntegration } from "@site/docs/integrations/beszel";
 
-<WidgetHeader
-  widget={beszelAlertsWidget}
-  categories={['System Monitoring', 'Alerts']}
-/>
+import beszelAlerts from "./img/beszel-alerts.png";
+
+<WidgetHeader widget={beszelAlertsWidget} categories={["System Monitoring", "Alerts"]} />
 
 This widget displays your Beszel alert configurations separated by status (triggered and ok). It also shows alert history with timestamps. Alerts are updated in real time via WebSocket subscriptions.
 
@@ -26,14 +25,21 @@ This widget displays your Beszel alert configurations separated by status (trigg
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: beszelIntegration,
-  note: "Displays alert configurations and trigger history"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: beszelIntegration,
+      note: "Displays alert configurations and trigger history",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={beszelAlertsWidget.configuration} />
diff --git a/apps/docs/docs/widgets/beszel-system-grid/index.mdx b/apps/docs/docs/widgets/beszel-system-grid/index.mdx
index e3b17623b..993974914 100644
--- a/apps/docs/docs/widgets/beszel-system-grid/index.mdx
+++ b/apps/docs/docs/widgets/beszel-system-grid/index.mdx
@@ -1,22 +1,19 @@
 ---
-title: 'Beszel Systems (Grid)'
-description: 'Card grid view of all Beszel-monitored systems with real-time metrics.'
+title: "Beszel Systems (Grid)"
+description: "Card grid view of all Beszel-monitored systems with real-time metrics."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { beszelSystemGridWidget } from '.';
-import { beszelIntegration } from '@site/docs/integrations/beszel';
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { beszelSystemGridWidget } from ".";
+import { beszelIntegration } from "@site/docs/integrations/beszel";
 
-import beszelSystemGrid from './img/beszel-system-grid.png';
+import beszelSystemGrid from "./img/beszel-system-grid.png";
 
-<WidgetHeader
-  widget={beszelSystemGridWidget}
-  categories={['System Monitoring']}
-/>
+<WidgetHeader widget={beszelSystemGridWidget} categories={["System Monitoring"]} />
 
 This widget displays all your Beszel-monitored systems as a responsive card grid. Each card shows real-time metrics like CPU, memory, disk, network, temperature, and more. Cards adapt their layout based on available space. If Beszel reports multiple filesystems, the disk bar exposes a hover breakdown for the root disk and each extra mount.
 
@@ -28,14 +25,19 @@ Select a system card to open the complete statistics view, including system, fil
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: beszelIntegration,
-  note: "Displays all monitored systems as a card grid"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: beszelIntegration,
+      note: "Displays all monitored systems as a card grid",
+    },
+  ]}
+/>
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={beszelSystemGridWidget.configuration} />
diff --git a/apps/docs/docs/widgets/beszel-system-stats/index.mdx b/apps/docs/docs/widgets/beszel-system-stats/index.mdx
index e29d083ba..6ac158aac 100644
--- a/apps/docs/docs/widgets/beszel-system-stats/index.mdx
+++ b/apps/docs/docs/widgets/beszel-system-stats/index.mdx
@@ -4,6 +4,8 @@ description: "Time-series charts for CPU, memory, disk, network, and Docker cont
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -32,6 +34,8 @@ This widget displays time-series charts for a selected Beszel system, including
   ]}
 />
 
+<WidgetInteractionGuide advancedView={false} />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/beszel-system-table/index.mdx b/apps/docs/docs/widgets/beszel-system-table/index.mdx
index 163d14a2f..b09edf530 100644
--- a/apps/docs/docs/widgets/beszel-system-table/index.mdx
+++ b/apps/docs/docs/widgets/beszel-system-table/index.mdx
@@ -1,25 +1,21 @@
 ---
-title: 'Beszel Systems (Table)'
-description: 'Table view of all Beszel-monitored systems with sortable columns and status indicators.'
+title: "Beszel Systems (Table)"
+description: "Table view of all Beszel-monitored systems with sortable columns and status indicators."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { beszelSystemTableWidget } from '.';
-import { beszelIntegration } from '@site/docs/integrations/beszel';
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { beszelSystemTableWidget } from ".";
+import { beszelIntegration } from "@site/docs/integrations/beszel";
 
-
-<WidgetHeader
-  widget={beszelSystemTableWidget}
-  categories={['System Monitoring']}
-/>
+<WidgetHeader widget={beszelSystemTableWidget} categories={["System Monitoring"]} />
 
 This widget displays all your Beszel-monitored systems in a sortable data table. Each row shows system metrics like CPU, memory, disk, network, temperature, and more. Columns can be toggled on or off, dragged into a different order, and resized from their headers. Column order and widths are saved automatically for each widget. When Beszel reports extra filesystems, the disk column adds a hover breakdown for each mount alongside the root disk.
 
-Select a system row to open the complete statistics view, including system, filesystem, Docker, historical, and realtime charts.
+Select a system row to open the complete statistics view.
 
 ### Interactions
 
@@ -30,14 +26,19 @@ Select a system row to open the complete statistics view, including system, file
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: beszelIntegration,
-  note: "Displays all monitored systems in a sortable table"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: beszelIntegration,
+      note: "Displays all monitored systems in a sortable table",
+    },
+  ]}
+/>
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={beszelSystemTableWidget.configuration} />
diff --git a/apps/docs/docs/widgets/bookmarks/index.mdx b/apps/docs/docs/widgets/bookmarks/index.mdx
index c3104ad5b..b61f8f072 100644
--- a/apps/docs/docs/widgets/bookmarks/index.mdx
+++ b/apps/docs/docs/widgets/bookmarks/index.mdx
@@ -1,44 +1,46 @@
 ---
-title: 'Bookmarks'
-description: 'Displays multiple app links'
+title: "Bookmarks"
+description: "Displays multiple app links"
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { bookmarksWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { bookmarksWidget } from ".";
 
-<WidgetHeader
-  widget={bookmarksWidget}
-  categories={['Links', 'Apps']}
-/>
+<WidgetHeader widget={bookmarksWidget} categories={["Links", "Apps"]} />
 
 The bookmarks widget allows you to display multiple app links in a single widget.
 You can add links to your favorite applications, websites, or any other resources you want quick access to.
+Its normal view adapts each configured layout to the available width and height: lower-priority hostnames are hidden before names or icons, and larger collections scroll instead of crushing cards.
 
 ### Screenshots
 
-import gridIconsOnly from './img/grid-icons-only.png';
-import gridWithTitle from './img/grid-with-title.png';
-import verticalListAll from './img/vertical-list-all.png';
-import vericalListSimple from './img/vertical-list-simple.png';
+import gridIconsOnly from "./img/grid-icons-only.png";
+import gridWithTitle from "./img/grid-with-title.png";
+import verticalListAll from "./img/vertical-list-all.png";
+import verticalListSimple from "./img/vertical-list-simple.png";
 
 <div className='flex gap-1'>
     <div className='flex flex-col gap-1'>
         <img src={gridIconsOnly} alt="bookmarks grid icons-only" width={128} height={128} />
-        <img src={vericalListSimple} alt="bookmarks vertical-list no-domain" width={128} height={128} />
+        <img src={verticalListSimple} alt="bookmarks vertical-list no-domain" width={128} height={128} />
     </div>
 
     <img src={gridWithTitle} alt="bookmarks grid with-title" width={256 + 4} height={256 + 4} />
     <img src={verticalListAll} alt="bookmarks vertical-list all-elements" width={128} height={256 + 4} />
+
 </div>
 
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={bookmarksWidget.configuration} />
diff --git a/apps/docs/docs/widgets/calendar/index.mdx b/apps/docs/docs/widgets/calendar/index.mdx
index fe9df0379..c6b7397a6 100644
--- a/apps/docs/docs/widgets/calendar/index.mdx
+++ b/apps/docs/docs/widgets/calendar/index.mdx
@@ -1,30 +1,28 @@
 ---
-title: 'Calendar'
-description: 'Display events from your integrations in a calendar view within a certain relative time period'
+title: "Calendar"
+description: "Display events from your integrations in a calendar view within a certain relative time period"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { calendarWidget } from '.';
-import { lidarrIntegration } from '@site/docs/integrations/lidarr';
-import { nextcloudIntegration } from '@site/docs/integrations/nextcloud';
-import { homeAssistantIntegration } from '@site/docs/integrations/home-assistant';
-import { radarrIntegration } from '@site/docs/integrations/radarr';
-import { readarrIntegration } from '@site/docs/integrations/readarr';
-import { sonarrIntegration } from '@site/docs/integrations/sonarr';
-import { icalIntegration } from '@site/docs/integrations/ical';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { calendarWidget } from ".";
+import { lidarrIntegration } from "@site/docs/integrations/lidarr";
+import { nextcloudIntegration } from "@site/docs/integrations/nextcloud";
+import { homeAssistantIntegration } from "@site/docs/integrations/home-assistant";
+import { radarrIntegration } from "@site/docs/integrations/radarr";
+import { readarrIntegration } from "@site/docs/integrations/readarr";
+import { sonarrIntegration } from "@site/docs/integrations/sonarr";
+import { icalIntegration } from "@site/docs/integrations/ical";
 
-
-<WidgetHeader
-  widget={calendarWidget}
-  categories={['Media manager', "Servarr"]}
-/>
+<WidgetHeader widget={calendarWidget} categories={["Media manager", "Servarr"]} />
 
 The calendar widget shows a month view of events from different integrations.
 It allows you to view calendar events or upcoming releases from your media managers.
@@ -33,45 +31,58 @@ the same data is requested through Homarr's MCP or Assistant tools.
 
 ### Screenshots
 
-import popover from './img/popover.png';
-import withIntegrations from './img/with-integrations.png';
-import withoutIntegrations from './img/without-integrations.png';
+import popover from "./img/popover.png";
+import withIntegrations from "./img/with-integrations.png";
+import withoutIntegrations from "./img/without-integrations.png";
 
-<div className='flex gap-1'>
-    <img src={withIntegrations} alt="calendar with-integrations big-size" width={256 + 4} height={256 + 4} />
-    <div className='flex flex-col gap-1'>
-        <img src={popover} alt="calendar popover-details the-mandalorian" width={128 * 3} height={128} />
-        <img src={withoutIntegrations} alt="calendar without-integrations small-size" width={256} height={128} />
-    </div>
+<div className="flex gap-1">
+  <img src={withIntegrations} alt="calendar with-integrations big-size" width={256 + 4} height={256 + 4} />
+  <div className="flex flex-col gap-1">
+    <img src={popover} alt="calendar popover-details the-mandalorian" width={128 * 3} height={128} />
+    <img src={withoutIntegrations} alt="calendar without-integrations small-size" width={256} height={128} />
+  </div>
 </div>
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: nextcloudIntegration,
-}, {
-  integration: lidarrIntegration,
-}, {
-  integration: radarrIntegration,
-}, {
-  integration: readarrIntegration,
-}, {
-  integration: sonarrIntegration,
-}, {
-  integration: icalIntegration
-}, {
-  integration: homeAssistantIntegration
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: nextcloudIntegration,
+    },
+    {
+      integration: lidarrIntegration,
+    },
+    {
+      integration: radarrIntegration,
+    },
+    {
+      integration: readarrIntegration,
+    },
+    {
+      integration: sonarrIntegration,
+    },
+    {
+      integration: icalIntegration,
+    },
+    {
+      integration: homeAssistantIntegration,
+    },
+  ]}
+/>
 
 ### Interactions
 
 - Hover over a marked date to preview its events in a popover.
-- Click on a marked date to pin the popover open (it will stay visible even after moving the mouse away).
-- Click the date again or click outside to close the pinned popover.
+- The advanced view replaces the month grid with a grouped event list. Use its previous and next controls to change months.
+- If one selected integration is unavailable, its warning indicator remains visible while events from healthy integrations continue to load.
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={calendarWidget.configuration} />
diff --git a/apps/docs/docs/widgets/clock/index.mdx b/apps/docs/docs/widgets/clock/index.mdx
index efdab31d4..157e79d0b 100644
--- a/apps/docs/docs/widgets/clock/index.mdx
+++ b/apps/docs/docs/widgets/clock/index.mdx
@@ -1,38 +1,38 @@
 ---
-title: 'Date and time'
-description: 'Displays the current date and time.'
+title: "Date and time"
+description: "Displays the current date and time."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { clockWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { clockWidget } from ".";
 
-<WidgetHeader
-  widget={clockWidget}
-  categories={['Time']}
-/>
+<WidgetHeader widget={clockWidget} categories={["Time"]} />
 
 The clock widget displays the current date and time in a customizable format.
 
 ### Screenshots
 
-import localClock from './img/local.png';
-import londonClock from './img/london-with-seconds.png';
-import tokyoClock from './img/tokyo-12-hour.png';
+import localClock from "./img/local.png";
+import londonClock from "./img/london-with-seconds.png";
+import tokyoClock from "./img/tokyo-12-hour.png";
 
-<div className='flex gap-1'>
-    <img src={localClock} alt="clock format-24-hours timezone-local" width={128} height={128} />
-    <img src={londonClock} alt="clock format-24-hours with-seconds timezone-london" width={256} height={128} />
-    <img src={tokyoClock} alt="clock format-12-hours timezone-tokyo" width={256} height={128} />
+<div className="flex gap-1">
+  <img src={localClock} alt="clock format-24-hours timezone-local" width={128} height={128} />
+  <img src={londonClock} alt="clock format-24-hours with-seconds timezone-london" width={256} height={128} />
+  <img src={tokyoClock} alt="clock format-12-hours timezone-tokyo" width={256} height={128} />
 </div>
 
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={clockWidget.configuration} />
diff --git a/apps/docs/docs/widgets/coolify/index.mdx b/apps/docs/docs/widgets/coolify/index.mdx
index 23eb6ba03..2feec3a94 100644
--- a/apps/docs/docs/widgets/coolify/index.mdx
+++ b/apps/docs/docs/widgets/coolify/index.mdx
@@ -1,28 +1,33 @@
 ---
-title: 'Coolify'
-description: 'Overview of your Coolify instance with servers, applications, and services.'
+title: "Coolify"
+description: "Overview of your Coolify instance with servers, applications, and services."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { coolifyWidget } from '.';
-import { coolifyIntegration } from '@site/docs/integrations/coolify';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={coolifyWidget}
-  categories={['System monitoring', 'Deployment']}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { coolifyWidget } from ".";
+import { coolifyIntegration } from "@site/docs/integrations/coolify";
+
+<WidgetHeader widget={coolifyWidget} categories={["System monitoring", "Deployment"]} />
 
 The Coolify widget displays a compact overview of your Coolify instance. It can show servers, applications, and services with status indicators, project and environment context, direct links to Coolify, and the installed Coolify version.
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: coolifyIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: coolifyIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
@@ -34,11 +39,11 @@ The Coolify widget displays a compact overview of your Coolify instance. It can
 
 ### Sections
 
-| Section | Description |
-|---|---|
-| **Servers** | Lists Coolify servers, reachability status, and application/service counts per server. |
+| Section          | Description                                                                                                                        |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| **Servers**      | Lists Coolify servers, reachability status, and application/service counts per server.                                             |
 | **Applications** | Lists applications with runtime status, project and environment context, public URL links, Coolify dashboard links, and log links. |
-| **Services** | Lists services with runtime status, project and environment context, public URL links, Coolify dashboard links, and log links. |
+| **Services**     | Lists services with runtime status, project and environment context, public URL links, Coolify dashboard links, and log links.     |
 
 ### Notes
 
diff --git a/apps/docs/docs/widgets/custom-api/index.mdx b/apps/docs/docs/widgets/custom-api/index.mdx
index 78d0bcbba..9325a86fe 100644
--- a/apps/docs/docs/widgets/custom-api/index.mdx
+++ b/apps/docs/docs/widgets/custom-api/index.mdx
@@ -1,29 +1,59 @@
 ---
-title: 'Custom API'
-description: 'Displays data from a custom API endpoint using configurable display types and optional JSX templates.'
+title: "Custom API"
+description: "Displays data from a custom API endpoint using configurable display types and optional JSX templates."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { customApiWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { customApiWidget } from ".";
 
-<WidgetHeader
-  widget={customApiWidget}
-  categories={['Custom', 'API']}
-/>
+<WidgetHeader widget={customApiWidget} categories={["Custom", "API"]} />
 
-This widget fetches data from a custom API endpoint defined in [Custom Widgets management](/docs/management/custom-widgets) and renders it using configurable display types.
+A definition contains API sources, named requests, a widget options schema, and one safe JSX template.
 
-Custom API widgets are created and configured through the admin management page. Each widget definition specifies the API endpoint, authentication, display type, and refresh interval.
+Temporary inputs exist only while the tile is mounted. Homarr encrypts source credentials separately.
 
-See the [Custom Widgets documentation](/docs/management/custom-widgets) for full details on creating and configuring custom widgets.
+Homarr does not send these credentials to the browser. Homarr does not include them in an export.
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
+Select a definition from the searchable picker. Configure its generated widget options.
+
+Select a refresh interval. The board item stores the definition ID and the validated widget option values.
+
+Credentials remain on the server.
+
 :::note
 Custom API widgets must first be created in **Management → Custom Widgets** before they appear in the widget picker.
+Action buttons can only be executed by administrators.
 :::
+
+### Permissions and actions
+
+Each named request declares its minimum board permission. This permission does not depend on the HTTP method.
+
+Queries and actions can use GET, POST, PUT, or PATCH. DELETE is valid only for actions so it can never run
+automatically while a board loads. The `kind` value controls the remaining runtime behavior.
+
+A DELETE request requires full board permission and confirmation. An anonymous viewer cannot run an action.
+
+Homarr disables interactive controls in board edit mode. An action runs only after a user action.
+
+Mounting, refresh polling, and automatic retries do not run actions. An authoring preview simulates actions by default.
+
+An administrator can enable live actions for the short preview session.
+
+### Refresh behavior
+
+The refresh interval runs load queries again. `SubFetch` runs manual queries.
+
+Each query can declare a cache duration. A successful action can invalidate only its declared queries.
+
+Read [Custom Widgets management](/docs/management/custom-widgets) for authoring, widget options, named requests, Mantine, network scopes, and security limits.
diff --git a/apps/docs/docs/widgets/custom-api/index.ts b/apps/docs/docs/widgets/custom-api/index.ts
index c6c56bc53..6b72691d0 100644
--- a/apps/docs/docs/widgets/custom-api/index.ts
+++ b/apps/docs/docs/widgets/custom-api/index.ts
@@ -4,6 +4,7 @@ import { IconApi } from "@tabler/icons-react";
 export const customApiWidget: WidgetDefinition = {
   icon: IconApi,
   name: "Custom API",
-  description: "Displays data from a custom API endpoint using configurable display types and optional JSX templates.",
+  description:
+    "Renders an administrator-defined Custom JSX v2 widget with server-side API requests, options, and actions.",
   path: "../../widgets/custom-api",
 };
diff --git a/apps/docs/docs/widgets/dns-hole-controls/index.mdx b/apps/docs/docs/widgets/dns-hole-controls/index.mdx
index cea517545..9b9d1f26f 100644
--- a/apps/docs/docs/widgets/dns-hole-controls/index.mdx
+++ b/apps/docs/docs/widgets/dns-hole-controls/index.mdx
@@ -1,57 +1,64 @@
 ---
-title: 'DNS Hole Controls'
-description: "Control PiHole or AdGuard from your dashboard."
+title: "DNS Hole Controls"
+description: "Control Pi-hole, AdGuard Home, or Technitium DNS from your dashboard."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { dnsHoleControlsWidget } from '.';
-import { adguardHomeIntegration } from '@site/docs/integrations/adguard-home';
-import { piHoleIntegration } from '@site/docs/integrations/pi-hole';
-import { technitiumDnsIntegration } from '@site/docs/integrations/technitium-dns';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { dnsHoleControlsWidget } from ".";
+import { adguardHomeIntegration } from "@site/docs/integrations/adguard-home";
+import { piHoleIntegration } from "@site/docs/integrations/pi-hole";
+import { technitiumDnsIntegration } from "@site/docs/integrations/technitium-dns";
 
+<WidgetHeader widget={dnsHoleControlsWidget} categories={["DNS Hole"]} />
 
-<WidgetHeader
-  widget={dnsHoleControlsWidget}
-  categories={['DNS Hole']}
-/>
-
-This widget allows you to enable or disable your DNS Hole.
+This widget lets permitted users enable, disable, or temporarily pause one or more DNS services. It shares the summary query and cache with DNS Hole Summary. Every selected source stays available in the normal scrollable view, while cards and controls adapt to the widget&apos;s width and height.
 
 ### Screenshots
 
-import bigSize from './img/big.png';
-import smallSize from './img/small.png';
-
+import bigSize from "./img/big.png";
+import smallSize from "./img/small.png";
 
 <img src={bigSize} alt="dns-hole-controls big-size with-toggle-all-buttons" width={256} height={128} />
 <img src={smallSize} alt="dns-hole-controls small-size no-toggle-all-buttons" width={128} height={128} />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: adguardHomeIntegration,
-}, {
-  integration: piHoleIntegration,
-}, {
-  integration: technitiumDnsIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: adguardHomeIntegration,
+    },
+    {
+      integration: piHoleIntegration,
+    },
+    {
+      integration: technitiumDnsIntegration,
+    },
+  ]}
+/>
 
 ### Interactions
 
-- Enable / Disable one dns-hole by clicking on the badge.
-- Disable one dns-hole in x seconds by clicking on the clock icon.
-- Do all of the above for all dns-holes by using the top button row.
+- Enable or disable one DNS service by clicking its status badge.
+- Temporarily disable one service with the clock action.
+- Apply an action to all available services from the top action row. Homarr keeps successful results visible and reports how many sources failed.
+- Interaction controls only appear when the current user has permission for that integration.
+
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={dnsHoleControlsWidget.configuration} />
diff --git a/apps/docs/docs/widgets/dns-hole-summary/index.mdx b/apps/docs/docs/widgets/dns-hole-summary/index.mdx
index 1dcb123da..1e7b966b9 100644
--- a/apps/docs/docs/widgets/dns-hole-summary/index.mdx
+++ b/apps/docs/docs/widgets/dns-hole-summary/index.mdx
@@ -1,38 +1,36 @@
 ---
-title: 'DNS Hole Summary'
+title: "DNS Hole Summary"
 description: "Displays the summary of your DNS Hole."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { dnsHoleSummaryWidget } from '.';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { dnsHoleSummaryWidget } from ".";
 
+<WidgetHeader widget={dnsHoleSummaryWidget} categories={["DNS Hole"]} />
 
-<WidgetHeader
-  widget={dnsHoleSummaryWidget}
-  categories={['DNS Hole']}
-/>
-
-This widget allows you to display statistics about your DNS Hole like total queries, blocked queries, and more.
+This widget combines statistics from every selected DNS service, including total queries, blocked queries, and blocklist size. Its data is cached under the same DNS query family as DNS Hole Controls, so placing both widgets on a board does not create a second integration request. When the widget has enough room, it adds a scrollable status row naming each selected source.
 
 ### Screenshots
 
-import gridLayout from './img/grid.png';
-import verticalLayout from './img/vertical.png';
-import horizontalLayout from './img/horizontal.png';
-import { adguardHomeIntegration } from '@site/docs/integrations/adguard-home';
-import { piHoleIntegration } from '@site/docs/integrations/pi-hole';
-import { technitiumDnsIntegration } from '@site/docs/integrations/technitium-dns';
+import gridLayout from "./img/grid.png";
+import verticalLayout from "./img/vertical.png";
+import horizontalLayout from "./img/horizontal.png";
+import { adguardHomeIntegration } from "@site/docs/integrations/adguard-home";
+import { piHoleIntegration } from "@site/docs/integrations/pi-hole";
+import { technitiumDnsIntegration } from "@site/docs/integrations/technitium-dns";
 
-<div className='flex gap-2'>
+<div className="flex gap-2">
   <img src={gridLayout} alt="grid-layout pi-hole-colors" width={256 + 8} height={256 + 8} />
-  <div className='flex flex-col gap-2'>
+  <div className="flex flex-col gap-2">
     <img src={verticalLayout} alt="vertical-layout no-colors" width={128} height={128} />
     <img src={horizontalLayout} alt="horizontal-layout pi-hole-colors" width={128 * 3} height={128} />
   </div>
@@ -40,17 +38,26 @@ import { technitiumDnsIntegration } from '@site/docs/integrations/technitium-dns
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: adguardHomeIntegration,
-}, {
-  integration: piHoleIntegration,
-}, {
-  integration: technitiumDnsIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: adguardHomeIntegration,
+    },
+    {
+      integration: piHoleIntegration,
+    },
+    {
+      integration: technitiumDnsIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={dnsHoleSummaryWidget.configuration} />
diff --git a/apps/docs/docs/widgets/docker-containers/index.mdx b/apps/docs/docs/widgets/docker-containers/index.mdx
index 3dfa40d7f..397520a7e 100644
--- a/apps/docs/docs/widgets/docker-containers/index.mdx
+++ b/apps/docs/docs/widgets/docker-containers/index.mdx
@@ -1,24 +1,22 @@
 ---
-title: 'Docker stats'
-description: 'Stats of your containers'
+title: "Docker stats"
+description: "Stats of your containers"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { dockerContainersWidget } from '.';
-import { dockerIntegration } from '@site/docs/integrations/docker';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { dockerContainersWidget } from ".";
+import { dockerIntegration } from "@site/docs/integrations/docker";
 
-
-<WidgetHeader
-  widget={dockerContainersWidget}
-  categories={['Containers']}
-/>
+<WidgetHeader widget={dockerContainersWidget} categories={["Containers"]} />
 
 This widget displays the resource usage of your Docker containers and allows you to manage them.
 
@@ -28,20 +26,26 @@ This widget can only be used with administrator privileges.
 
 ### Screenshots
 
-import dockerTable from './img/table.png';
+import dockerTable from "./img/table.png";
 
 <img src={dockerTable} alt="docker-stats table docker-containers" width={128 * 3} height={128 * 2} />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: dockerIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: dockerIntegration,
+    },
+  ]}
+/>
 
 ### Interactions
 
 Hover a column header to reveal its grab handle, then drag it to reorder the table or drag the header's edge to resize it. The layout is saved automatically for each widget instance and restored after a reload. These controls are disabled while the board is in edit mode.
 
+Advanced mode exposes every available column regardless of the compact-mode column selection.
+
 Each container row has an action menu, accessible via the three-dot icon or by right-clicking the row, with the following options:
 
 - **View logs** - opens a dedicated terminal page streaming the container's logs
@@ -49,6 +53,8 @@ Each container row has an action menu, accessible via the three-dot icon or by r
 - **Remove** - permanently remove the container after a second confirmation click
 - **Add to Homarr** - create a bookmark app from the container
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/downloads/index.mdx b/apps/docs/docs/widgets/downloads/index.mdx
index d73ad02bb..5d4cca498 100644
--- a/apps/docs/docs/widgets/downloads/index.mdx
+++ b/apps/docs/docs/widgets/downloads/index.mdx
@@ -1,43 +1,41 @@
 ---
-title: 'Download Client'
-description: 'Allows you to view and manage your Downloads from both Torrent and Usenet clients.'
+title: "Download Client"
+description: "Allows you to view and manage your Downloads from both Torrent and Usenet clients."
 hide_title: true
 ---
 
-import { aria2Integration } from '@site/docs/integrations/aria2';
-import { delugeIntegration } from '@site/docs/integrations/deluge';
-import { nzbgetIntegration } from '@site/docs/integrations/nzbget';
-import { qBittorentIntegration } from '@site/docs/integrations/q-bittorent';
-import { sabnzbdIntegration } from '@site/docs/integrations/sabnzbd';
-import { transmissionIntegration } from '@site/docs/integrations/transmission';
-import { slskdIntegration } from '@site/docs/integrations/slskd';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { downloadsWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { aria2Integration } from "@site/docs/integrations/aria2";
+import { delugeIntegration } from "@site/docs/integrations/deluge";
+import { nzbgetIntegration } from "@site/docs/integrations/nzbget";
+import { qBittorentIntegration } from "@site/docs/integrations/q-bittorent";
+import { sabnzbdIntegration } from "@site/docs/integrations/sabnzbd";
+import { transmissionIntegration } from "@site/docs/integrations/transmission";
+import { slskdIntegration } from "@site/docs/integrations/slskd";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { downloadsWidget } from ".";
 
-<WidgetHeader
-  widget={downloadsWidget}
-  categories={['Torrent client', 'Usenet client', 'Downloads']}
-/>
+<WidgetHeader widget={downloadsWidget} categories={["Torrent client", "Usenet client", "Downloads"]} />
 
 This widget displays a list of torrents or usenet-articles that are currently being downloaded, along with their progress and other relevant information. It supports 7 download client integrations and provides a rich, responsive table interface.
 
 ### Screenshots
 
-import downloadsCard from './img/screenshot.png';
-import contextMenuImg from './img/context-menu.png';
+import downloadsCard from "./img/screenshot.png";
+import contextMenuImg from "./img/context-menu.png";
 
 <div>
-    <img src={downloadsCard} alt="Downloads widget showing torrent and usenet items" width={128 * 4} />
+  <img src={downloadsCard} alt="Downloads widget showing torrent and usenet items" width={128 * 4} />
 </div>
 
 #### Right-click context menu
 
 <div>
-    <img src={contextMenuImg} alt="Downloads widget context menu with pause, delete, and copy actions" width={128 * 4} />
+  <img src={contextMenuImg} alt="Downloads widget context menu with pause, delete, and copy actions" width={128 * 4} />
 </div>
 
 ### Features
@@ -56,28 +54,38 @@ import contextMenuImg from './img/context-menu.png';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: sabnzbdIntegration,
-  note: "Usenet client"
-}, {
-  integration: nzbgetIntegration,
-  note: "Usenet client"
-}, {
-  integration: delugeIntegration,
-  note: "Torrent client"
-}, {
-  integration: transmissionIntegration,
-  note: "Torrent client"
-}, {
-  integration: qBittorentIntegration,
-  note: "Torrent client"
-}, {
-  integration: aria2Integration,
-  note: "Multi-protocol download client"
-}, {
-  integration: slskdIntegration,
-  note: "Soulseek client (read-only)"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: sabnzbdIntegration,
+      note: "Usenet client",
+    },
+    {
+      integration: nzbgetIntegration,
+      note: "Usenet client",
+    },
+    {
+      integration: delugeIntegration,
+      note: "Torrent client",
+    },
+    {
+      integration: transmissionIntegration,
+      note: "Torrent client",
+    },
+    {
+      integration: qBittorentIntegration,
+      note: "Torrent client",
+    },
+    {
+      integration: aria2Integration,
+      note: "Multi-protocol download client",
+    },
+    {
+      integration: slskdIntegration,
+      note: "Soulseek client (read-only)",
+    },
+  ]}
+/>
 
 ### Interactions
 
@@ -89,9 +97,12 @@ import contextMenuImg from './img/context-menu.png';
 - **Filter** by integration or status using the filter button in the footer
 - **Sort** by clicking column headers (with persistent sort direction)
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={downloadsWidget.configuration} />
diff --git a/apps/docs/docs/widgets/firewall/index.mdx b/apps/docs/docs/widgets/firewall/index.mdx
index 95aaa56d6..aec2d89d9 100644
--- a/apps/docs/docs/widgets/firewall/index.mdx
+++ b/apps/docs/docs/widgets/firewall/index.mdx
@@ -1,22 +1,20 @@
 ---
-title: 'Firewall Monitoring'
-description: 'Displays a summary of firewalls.'
+title: "Firewall Monitoring"
+description: "Displays a summary of firewalls."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { firewallWidget } from '.';
-import { opnsenseIntegration } from '../../integrations/opnsense';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { firewallWidget } from ".";
+import { opnsenseIntegration } from "../../integrations/opnsense";
 
-<WidgetHeader
-  widget={firewallWidget}
-  categories={['Firewall']}
-/>
+<WidgetHeader widget={firewallWidget} categories={["Firewall"]} />
 
 ### Screenshots
 
@@ -24,9 +22,15 @@ import { opnsenseIntegration } from '../../integrations/opnsense';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: opnsenseIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: opnsenseIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/health-monitoring/index.mdx b/apps/docs/docs/widgets/health-monitoring/index.mdx
index 603207451..bc50cf2c7 100644
--- a/apps/docs/docs/widgets/health-monitoring/index.mdx
+++ b/apps/docs/docs/widgets/health-monitoring/index.mdx
@@ -4,6 +4,8 @@ description: "Displays information showing the health and status of your system(
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -62,6 +64,8 @@ import { synologyIntegration } from "@site/docs/integrations/synology";
   ]}
 />
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/iframe/index.mdx b/apps/docs/docs/widgets/iframe/index.mdx
index 5be26f3b2..5f410a7f3 100644
--- a/apps/docs/docs/widgets/iframe/index.mdx
+++ b/apps/docs/docs/widgets/iframe/index.mdx
@@ -1,19 +1,17 @@
 ---
-title: 'iFrame'
-description: 'Embed any content from the internet. Some websites may restrict access.'
+title: "iFrame"
+description: "Embed any content from the internet. Some websites may restrict access."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { iframeWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { iframeWidget } from ".";
 
-<WidgetHeader
-  widget={iframeWidget}
-  categories={['Embed']}
-/>
+<WidgetHeader widget={iframeWidget} categories={["Embed"]} />
 
 If your application is not supported natively by Homarr, you can integrate it using the iframe widget.
 It uses the [iframe element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe),
@@ -22,14 +20,16 @@ This means, no traffic is routed through Homarr (and the URL must be reachable f
 
 ### Screenshots
 
-import wikipediaHomepage from './img/wikipedia.png';
-import youtubeStream from './img/nasa-iss-stream.png';
+import wikipediaHomepage from "./img/wikipedia.png";
+import youtubeStream from "./img/nasa-iss-stream.png";
 
 <div>
   <img src={wikipediaHomepage} alt="iframe wikipedia-homepage" width={128 * 3} />
   <img src={youtubeStream} alt="iframe youtube-iss-stream" width={128 * 3} />
 </div>
 
+<WidgetInteractionGuide advancedView={false} />
+
 ### Adding the widget
 
 <AddingWidget />
@@ -39,26 +39,27 @@ import youtubeStream from './img/nasa-iss-stream.png';
 Although you can integrate many websites, some may not work.
 This is because the administrators of those sites disallow iframes
 for security reasons, as users could easily be tricked
-by embeding the original site on a malicious page.
+by embedding the original site on a malicious page.
 
 Some proxies disallow iframes by default for this reason.
-You can use https://iframetest.com to check, if the site is allowing iframes.
+You can use https://iframetest.com to check whether the site allows iframes.
 
 If you manage all of your own applications, you can usually change that by configuring
-the appropriate headers (such as `X-Frame-Options` or `Content-Security-Policy`) to allow iframes.
+the `Content-Security-Policy` header and its `frame-ancestors` directive. The obsolete
+`X-Frame-Options: ALLOW-FROM` directive is not supported by modern browsers.
 
 For example, to allow your site to be embedded in iframes from specific domains:
 
 **Apache (.htaccess or httpd.conf):**
+
 ```apache
 Header set Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com"
-Header set X-Frame-Options "ALLOW-FROM https://trusted-domain.com"
 ```
 
 **Nginx:**
+
 ```nginx
 add_header Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com";
-add_header X-Frame-Options "ALLOW-FROM https://trusted-domain.com";
 ```
 
 ### Example URLs
@@ -67,6 +68,7 @@ add_header X-Frame-Options "ALLOW-FROM https://trusted-domain.com";
 - **Any YouTube video or stream:** https://www.youtube.com/embed/dQw4w9WgXcQ?si=MWUbbG66UNTla_Ni
 
 ### Configuration
+
 <WidgetConfig configuration={iframeWidget.configuration} />
 
 ### Transparent iframes
@@ -75,28 +77,30 @@ To create a transparent iframe like below you can use the following html code an
 
 ```html
 <html style="color-scheme: dark;">
-<body style="background: none; display: flex; justify-content: center; align-items: center;">
+  <body style="background: none; display: flex; justify-content: center; align-items: center;">
     <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/homarr.svg" width="90" height="90" />
-</body>
+  </body>
 </html>
 ```
 
 ![transparent iframe](./img/transparent-iframe.png)
 
-### Third party content
+### Third-party content
+
 :::warning
 
-The content below is an overview of third party projects. All support requests/problems must be redirected to the appropriate repository.
+The content below is an overview of third-party projects. All support requests/problems must be redirected to the appropriate repository.
 We cannot guarantee the functionality nor security of these tools.
 
 :::
 
 ### homarr-iframes from Diogo Valentim
+
 The project [homarr-iframes](https://github.com/diogovalentte/homarr-iframes) has iframes designed to be used with Homarr, these iframes offer a minimalist view of other systems:
 
 - [Vikunja](https://github.com/go-vikunja/vikunja): overview of your tasks with links to them.
 - [Linkwarden](https://github.com/linkwarden/linkwarden): overview of your bookmarks with links to them.
-- [Cinemark Brazil](https://www.cinemark.com.br): overview of the movies in Cinemark theaters in your city (*only in Brazil*).
+- [Cinemark Brazil](https://www.cinemark.com.br): overview of the movies in Cinemark theaters in your city (_only in Brazil_).
 
 ![Image of the Vikunja (left), Linkwarden (middle), and Cinemark Brazil (right) iframes on a Homarr dashboard](./img/homarr-iframes-example.webp "Image of the Vikunja (left), Linkwarden (middle), and Cinemark Brazil (right) iframes on a Homarr dashboard")
 
diff --git a/apps/docs/docs/widgets/immich-album-carousel/index.mdx b/apps/docs/docs/widgets/immich-album-carousel/index.mdx
index 703bd5a57..4a0cc6eef 100644
--- a/apps/docs/docs/widgets/immich-album-carousel/index.mdx
+++ b/apps/docs/docs/widgets/immich-album-carousel/index.mdx
@@ -1,39 +1,44 @@
 ---
-title: 'Immich Album Carousel'
-description: 'Shows a slideshow of pictures from an Immich album or your full library'
+title: "Immich Album Carousel"
+description: "Shows a slideshow of pictures from an Immich album or your full library"
 hide_title: true
 ---
 
-import { immichIntegration } from '../../integrations/immich';import {
-  AddingWidget
-} from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { immichAlbumCarouselWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { immichIntegration } from "../../integrations/immich";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { immichAlbumCarouselWidget } from ".";
 
-<WidgetHeader
-  widget={immichAlbumCarouselWidget}
-  categories={['Photos Service']}
-/>
+<WidgetHeader widget={immichAlbumCarouselWidget} categories={["Photos Service"]} />
 
 ### Screenshots
 
-import screen from './img/screen.png';
+import screen from "./img/screen.png";
 
 <img src={screen} height={256} alt="immich album size-big" />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: immichIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: immichIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
+
+Hover or focus the widget to pause its slideshow; touch devices keep the control available. A paused slideshow keeps its resume control visible. The advanced view groups previous, pause or resume, and next together and adds a thumbnail strip for quick navigation.
 
 ### Adding the widget
 
 <AddingWidget />
 
-
 ### Configuration
+
 <WidgetConfig configuration={immichAlbumCarouselWidget.configuration} />
diff --git a/apps/docs/docs/widgets/immich-server-stats/index.mdx b/apps/docs/docs/widgets/immich-server-stats/index.mdx
index 73d278a91..e2c967365 100644
--- a/apps/docs/docs/widgets/immich-server-stats/index.mdx
+++ b/apps/docs/docs/widgets/immich-server-stats/index.mdx
@@ -1,40 +1,44 @@
 ---
-title: 'Immich Server Stats'
-description: 'Information about your Immich instance'
+title: "Immich Server Stats"
+description: "Information about your Immich instance"
 hide_title: true
 ---
 
-import { immichIntegration } from '../../integrations/immich';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { immichServerStatsWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { immichIntegration } from "../../integrations/immich";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { immichServerStatsWidget } from ".";
 
-<WidgetHeader
-  widget={immichServerStatsWidget}
-  categories={['Photos server']}
-/>
+<WidgetHeader widget={immichServerStatsWidget} categories={["Photos server"]} />
 
 ### Screenshots
 
-import screen from './img/screen.png';
-
+import screen from "./img/screen.png";
 
 <img src={screen} height={256} alt="immich server stats size-big" />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: immichIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: immichIntegration,
+    },
+  ]}
+/>
+
+In advanced mode, the widget also ranks the largest albums by asset count. To keep the dashboard response lightweight, it shows up to 50 albums.
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
-
 ### Configuration
-<WidgetConfig configuration={immichServerStatsWidget.configuration} />
 
+<WidgetConfig configuration={immichServerStatsWidget.configuration} />
diff --git a/apps/docs/docs/widgets/indexer-manager/index.mdx b/apps/docs/docs/widgets/indexer-manager/index.mdx
index fad8c341b..2deeecd66 100644
--- a/apps/docs/docs/widgets/indexer-manager/index.mdx
+++ b/apps/docs/docs/widgets/indexer-manager/index.mdx
@@ -1,47 +1,50 @@
 ---
-title: 'Indexer manager status'
-description: 'View the status of your indexers.'
+title: "Indexer manager status"
+description: "View the status of your indexers."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { indexerManagerWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { indexerManagerWidget } from ".";
 
-<WidgetHeader
-  widget={indexerManagerWidget}
-  categories={['Indexer']}
-/>
+<WidgetHeader widget={indexerManagerWidget} categories={["Indexer"]} />
 
 ### Screenshots
 
-import bigItem from './img/big.png';
-import smallItem from './img/small.png';
-import { prowlarrIntegration } from '@site/docs/integrations/prowlarr';
+import bigItem from "./img/big.png";
+import smallItem from "./img/small.png";
+import { prowlarrIntegration } from "@site/docs/integrations/prowlarr";
 
-<div className='flex gap-1'>
+<div className="flex gap-1">
   <img src={bigItem} height={256} alt="indexer-manager size-big" />
   <img src={smallItem} height={128} alt="indexer-manager size-small" />
 </div>
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: prowlarrIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: prowlarrIntegration,
+    },
+  ]}
+/>
 
 ### Interactions
 
 - Test all indexers by clicking on the test button.
 
+<WidgetInteractionGuide advancedView={false} />
+
 ### Adding the widget
 
 <AddingWidget />
 
-
 ### Configuration
-<WidgetConfig configuration={indexerManagerWidget.configuration} />
 
+<WidgetConfig configuration={indexerManagerWidget.configuration} />
diff --git a/apps/docs/docs/widgets/media-missing/index.mdx b/apps/docs/docs/widgets/media-missing/index.mdx
index 648bd4190..643da6a3c 100644
--- a/apps/docs/docs/widgets/media-missing/index.mdx
+++ b/apps/docs/docs/widgets/media-missing/index.mdx
@@ -1,29 +1,28 @@
 ---
-title: 'Media Missing & Queue'
-description: 'Track missing media and active downloads from Radarr and Sonarr'
+title: "Media Missing & Queue"
+description: "Track missing media and active downloads from Radarr and Sonarr"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { mediaMissingWidget } from '.';
-import { radarrIntegration } from '@site/docs/integrations/radarr';
-import { sonarrIntegration } from '@site/docs/integrations/sonarr';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={mediaMissingWidget}
-  categories={['Media', 'Downloads']}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { mediaMissingWidget } from ".";
+import { radarrIntegration } from "@site/docs/integrations/radarr";
+import { sonarrIntegration } from "@site/docs/integrations/sonarr";
+
+<WidgetHeader widget={mediaMissingWidget} categories={["Media", "Downloads"]} />
 
 Monitor which movies and episodes are missing from your library, and track what is currently being downloaded. The widget pulls data from Radarr and Sonarr and groups results by type in two tabs.
 
 ### Screenshots
 
-import widgetMissing from './img/missing.png';
-import widgetQueued from './img/queued.png';
-import widgetCompact from './img/compact.png';
+import widgetMissing from "./img/missing.png";
+import widgetQueued from "./img/queued.png";
+import widgetCompact from "./img/compact.png";
 
 <div className="flex gap-2 flex-wrap">
   <img src={widgetMissing} alt="media-missing widget showing missing movies and episodes in a grid" width={360} />
@@ -33,18 +32,23 @@ import widgetCompact from './img/compact.png';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: radarrIntegration,
-}, {
-  integration: sonarrIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: radarrIntegration,
+    },
+    {
+      integration: sonarrIntegration,
+    },
+  ]}
+/>
 
 ### Tabs
 
-| Tab | Description |
-|---|---|
+| Tab         | Description                                                                                           |
+| ----------- | ----------------------------------------------------------------------------------------------------- |
 | **Missing** | Lists movies (Radarr) and episodes (Sonarr) that are monitored but not yet available in your library. |
-| **Queued** | Shows items currently being downloaded with a progress bar and estimated time remaining. |
+| **Queued**  | Shows items currently being downloaded with a progress bar and estimated time remaining.              |
 
 ### Sizing
 
@@ -56,6 +60,8 @@ The widget adapts to its container size, so it looks good at any grid size:
 
 Each item shows its poster art (with the artwork bleeding softly behind the card), a type badge, and — on the queue — an animated progress bar with the estimated time remaining.
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/media-releases/index.mdx b/apps/docs/docs/widgets/media-releases/index.mdx
index fece199eb..14695f0fe 100644
--- a/apps/docs/docs/widgets/media-releases/index.mdx
+++ b/apps/docs/docs/widgets/media-releases/index.mdx
@@ -1,30 +1,28 @@
 ---
-title: 'Media releases'
-description: 'Display newly added medias or upcoming releases from different integrations'
+title: "Media releases"
+description: "Display newly added media or upcoming releases from different integrations"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { mediaReleasesWidget } from '.';
-import { embyIntegration } from '@site/docs/integrations/emby';
-import { jellyfinIntegration } from '@site/docs/integrations/jellyfin';
-import { plexIntegration } from '@site/docs/integrations/plex';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { mediaReleasesWidget } from ".";
+import { embyIntegration } from "@site/docs/integrations/emby";
+import { jellyfinIntegration } from "@site/docs/integrations/jellyfin";
+import { plexIntegration } from "@site/docs/integrations/plex";
 
-<WidgetHeader
-  widget={mediaReleasesWidget}
-  categories={['Releases', 'Media']}
-/>
+<WidgetHeader widget={mediaReleasesWidget} categories={["Releases", "Media"]} />
 
 Provides a list of newly added media or upcoming releases from your media server.
 
 ### Screenshots
 
-import backdrop from './img/backdrop.png';
-import poster from './img/poster.png';
+import backdrop from "./img/backdrop.png";
+import poster from "./img/poster.png";
 
 <div className="flex gap-1">
   <img src={backdrop} alt="media-releases layout-backdrop" width={256} />
@@ -33,17 +31,26 @@ import poster from './img/poster.png';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: embyIntegration,
-}, {
-  integration: jellyfinIntegration,
-}, {
-  integration: plexIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: embyIntegration,
+    },
+    {
+      integration: jellyfinIntegration,
+    },
+    {
+      integration: plexIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={mediaReleasesWidget.configuration} />
diff --git a/apps/docs/docs/widgets/media-request-list/index.mdx b/apps/docs/docs/widgets/media-request-list/index.mdx
index 1c491a051..840315831 100644
--- a/apps/docs/docs/widgets/media-request-list/index.mdx
+++ b/apps/docs/docs/widgets/media-request-list/index.mdx
@@ -4,6 +4,8 @@ description: "See a list of all media requests from your integration"
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -44,6 +46,9 @@ import mediaRequestList from "./img/list.png";
 
 - Approve / decline a request by clicking on the thumbs up or down icon.
 - Hover over the widget to reveal a **search button** that opens Spotlight in media request search mode, scoped to the widget's integrations.
+- A warning indicator identifies unavailable integrations without hiding requests returned by healthy integrations.
+
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/media-request-stats/index.mdx b/apps/docs/docs/widgets/media-request-stats/index.mdx
index a7b40f624..3adfcbffb 100644
--- a/apps/docs/docs/widgets/media-request-stats/index.mdx
+++ b/apps/docs/docs/widgets/media-request-stats/index.mdx
@@ -1,45 +1,51 @@
 ---
-title: 'Media Requests Stats'
-description: 'Statistics about your media requests'
+title: "Media Requests Stats"
+description: "Statistics about your media requests"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { mediaRequestStatsWidget } from '.';
-import { jellyseerrIntegration } from '@site/docs/integrations/jellyseerr';
-import { overseerrIntegration } from '@site/docs/integrations/overseerr';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { mediaRequestStatsWidget } from ".";
+import { jellyseerrIntegration } from "@site/docs/integrations/jellyseerr";
+import { overseerrIntegration } from "@site/docs/integrations/overseerr";
 
+<WidgetHeader widget={mediaRequestStatsWidget} categories={["Media requests"]} />
 
-<WidgetHeader
-  widget={mediaRequestStatsWidget}
-  categories={['Media requests']}
-/>
-
-Provide a statistics overview of your media requests, such as mount of requests, open requests, approvement and rejections.
+Provides an overview of media requests, including totals, availability, approvals, and rejections. Resize the widget to reveal denser stat tiles; the user ranking remains scrollable instead of being truncated.
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: jellyseerrIntegration,
-}, {
-  integration: overseerrIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: jellyseerrIntegration,
+    },
+    {
+      integration: overseerrIntegration,
+    },
+  ]}
+/>
 
 ### Screenshots
 
-import mediaRequestStats from './img/stats.png';
+import mediaRequestStats from "./img/stats.png";
 
 <img src={mediaRequestStats} alt="media-request-stats" width={256} height={256} />
 
 ### Interactions
 
 - Hover over the widget to reveal a **search button** that opens Spotlight in media request search mode, scoped to the widget's integrations.
+- A warning indicator identifies unavailable integrations while totals from healthy integrations remain visible.
+
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/media-server/index.mdx b/apps/docs/docs/widgets/media-server/index.mdx
index 8fb0c857c..d0acb93b2 100644
--- a/apps/docs/docs/widgets/media-server/index.mdx
+++ b/apps/docs/docs/widgets/media-server/index.mdx
@@ -1,56 +1,66 @@
 ---
-title: 'Media server streams'
-description: 'Show the current streams on your media servers'
+title: "Media server streams"
+description: "Show the current streams on your media servers"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { mediaServerWidget } from '.';
-import { embyIntegration } from '@site/docs/integrations/emby';
-import { jellyfinIntegration } from '@site/docs/integrations/jellyfin';
-import { navidromeIntegration } from '@site/docs/integrations/navidrome';
-import { plexIntegration } from '@site/docs/integrations/plex';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { mediaServerWidget } from ".";
+import { embyIntegration } from "@site/docs/integrations/emby";
+import { jellyfinIntegration } from "@site/docs/integrations/jellyfin";
+import { navidromeIntegration } from "@site/docs/integrations/navidrome";
+import { plexIntegration } from "@site/docs/integrations/plex";
 
+<WidgetHeader widget={mediaServerWidget} categories={["Media server"]} />
 
-<WidgetHeader
-  widget={mediaServerWidget}
-  categories={['Media server']}
-/>
-
-The media server widget enables you to watch and view current active sessions over all your media servers. 
-It also displays useful information, that you can use when providing support to users or debugging a problem.
-
+The media server widget shows active sessions across your media servers.
+It shows playback progress, pause state, time remaining, and whether each session is direct play, direct stream, or transcoding audio or video. Location and bitrate can be toggled independently.
 
+Select a session to inspect its media metadata. Advanced mode adds search, sorting, and a summary of playing and transcoding sessions while keeping separate integration instances identifiable.
+If one selected server is unavailable, a warning indicator identifies the degraded result while sessions from healthy servers remain usable.
+Sessions without user metadata remain visible and are labeled as an unknown user.
 
 ### Screenshots
 
-import mediaTable from './img/table.png';
+import mediaTable from "./img/table.png";
 
 <img src={mediaTable} alt="media-server-streams" width={128 * 3 * 1.5} height={128 * 1.5} />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: embyIntegration,
-}, {
-  integration: jellyfinIntegration,
-}, {
-  integration: navidromeIntegration,
-  note: "Will always show only currently playing audio streams, not all active sessions."
-}, {
-  integration: plexIntegration,
-  note: "Will always show only currently playing streams, not all active sessions."
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: embyIntegration,
+    },
+    {
+      integration: jellyfinIntegration,
+    },
+    {
+      integration: navidromeIntegration,
+      note: "Will always show only currently playing audio streams, not all active sessions.",
+    },
+    {
+      integration: plexIntegration,
+      note: "Will always show only currently playing streams, not all active sessions.",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={mediaServerWidget.configuration} />
diff --git a/apps/docs/docs/widgets/media-transcoding/index.mdx b/apps/docs/docs/widgets/media-transcoding/index.mdx
index 0fc280021..256b8edd6 100644
--- a/apps/docs/docs/widgets/media-transcoding/index.mdx
+++ b/apps/docs/docs/widgets/media-transcoding/index.mdx
@@ -1,35 +1,31 @@
 ---
-title: 'Media transcoding'
-description: 'Statistics, current queue and worker status of your media transcoding'
+title: "Media transcoding"
+description: "Statistics, current queue and worker status of your media transcoding"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { mediaTranscodingWidget } from '.';
-import { tdarrIntegration } from '@site/docs/integrations/tdarr';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { mediaTranscodingWidget } from ".";
+import { tdarrIntegration } from "@site/docs/integrations/tdarr";
 
+<WidgetHeader widget={mediaTranscodingWidget} categories={["Media transcoding"]} />
 
-<WidgetHeader
-  widget={mediaTranscodingWidget}
-  categories={['Media transcoding']}
-/>
-
-The media transcoding widget provides you with an overview of your media transcoding status. 
+The media transcoding widget provides you with an overview of your media transcoding status.
 It shows you the current queue, worker status, and statistics about your transcoding jobs.
 
-
-
 ### Screenshots
 
-import queueCard from './img/queue.png';
-import workersCard from './img/workers.png';
-import statisticsCard from './img/statistics.png';
+import queueCard from "./img/queue.png";
+import workersCard from "./img/workers.png";
+import statisticsCard from "./img/statistics.png";
 
 <div className="flex gap-1 flex-wrap">
   <img src={workersCard} alt="media-transcoding workers-tab" width={128 * 3} />
@@ -39,13 +35,20 @@ import statisticsCard from './img/statistics.png';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: tdarrIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: tdarrIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={mediaTranscodingWidget.configuration} />
diff --git a/apps/docs/docs/widgets/minecraft-server-status/index.mdx b/apps/docs/docs/widgets/minecraft-server-status/index.mdx
index 51101246b..4df364116 100644
--- a/apps/docs/docs/widgets/minecraft-server-status/index.mdx
+++ b/apps/docs/docs/widgets/minecraft-server-status/index.mdx
@@ -1,44 +1,45 @@
 ---
-title: 'Minecraft Server Status'
-description: 'Displays the status of a Minecraft server.'
+title: "Minecraft Server Status"
+description: "Displays the status of a Minecraft server."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import TabItem from '@theme/TabItem';
-import Tabs from '@theme/Tabs';
-import { minecraftServerStatusWidget } from '.';
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import { minecraftServerStatusWidget } from ".";
 
-
-<WidgetHeader
-  widget={minecraftServerStatusWidget}
-  categories={['Gaming', 'Minecraft']}
-/>
+<WidgetHeader widget={minecraftServerStatusWidget} categories={["Gaming", "Minecraft"]} />
 
 Shows the status and amount of players on a Minecraft server. It supports both Java and Bedrock editions, however only public servers are supported which can be reached through the used api of [api.mcsrvstat.us](https://api.mcsrvstat.us).
 
 ### Screenshots
 
-import javaItem from './img/java.png';
-import bedrockItem from './img/bedrock.png';
+import javaItem from "./img/java.png";
+import bedrockItem from "./img/bedrock.png";
 
-<div className='flex gap-1'>
+<div className="flex gap-1">
   <img src={javaItem} alt="minecraft-server-status java-edition" width={128 * 1.5} height={128 * 1.5} />
-  <img src={bedrockItem} alt="minecraft-server-status bedrock-editon" width={128 * 1.5} height={128 * 1.5} />
+  <img src={bedrockItem} alt="minecraft-server-status bedrock-edition" width={128 * 1.5} height={128 * 1.5} />
 </div>
 
+<WidgetInteractionGuide advancedView={false} />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={minecraftServerStatusWidget.configuration} />
 
 ### Data source
 
 We use the Minecraft Server Status API to fetch the server status.
-If you need to whitelist the api, please use the following URL: `hhttps://api.mcsrvstat.us`
\ No newline at end of file
+If you need to whitelist the API, use the following URL: `https://api.mcsrvstat.us`.
diff --git a/apps/docs/docs/widgets/network-controller-status/index.mdx b/apps/docs/docs/widgets/network-controller-status/index.mdx
index a01496234..ad0feaf9d 100644
--- a/apps/docs/docs/widgets/network-controller-status/index.mdx
+++ b/apps/docs/docs/widgets/network-controller-status/index.mdx
@@ -1,44 +1,49 @@
 ---
-title: 'Network Status'
-description: 'Display connected devices on a network'
+title: "Network Status"
+description: "Display connected devices on a network"
 hide_title: true
 ---
 
-import { unifiControllerIntegration } from '@site/docs/integrations/unifi-controller';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { unifiControllerIntegration } from "@site/docs/integrations/unifi-controller";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import TabItem from '@theme/TabItem';
-import Tabs from '@theme/Tabs';
-import { networkControllerStatusWidget } from '.';
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import { networkControllerStatusWidget } from ".";
 
-
-<WidgetHeader
-  widget={networkControllerStatusWidget}
-  categories={['Network controller']}
-/>
+<WidgetHeader widget={networkControllerStatusWidget} categories={["Network controller"]} />
 
 Shows connected users and connected guest devices on wired or wireless networks.
 
 ### Screenshots
 
-import wifiCard from './img/wifi.png';
-import wiredCard from './img/wired.png';
+import wifiCard from "./img/wifi.png";
+import wiredCard from "./img/wired.png";
 
 <img src={wifiCard} alt="network-controller-status wifi" width={128 * 1.5} height={128 * 1.5} />
 <img src={wiredCard} alt="network-controller-status wired" width={128 * 1.5} height={128 * 1.5} />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: unifiControllerIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: unifiControllerIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={networkControllerStatusWidget.configuration} />
diff --git a/apps/docs/docs/widgets/network-controller-summary/index.mdx b/apps/docs/docs/widgets/network-controller-summary/index.mdx
index fe4cd3357..a71c9233a 100644
--- a/apps/docs/docs/widgets/network-controller-summary/index.mdx
+++ b/apps/docs/docs/widgets/network-controller-summary/index.mdx
@@ -1,38 +1,42 @@
 ---
-title: 'Network Controller Summary'
-description: 'Displays the summary of a Network Controller'
+title: "Network Controller Summary"
+description: "Displays the summary of a Network Controller"
 hide_title: true
 ---
 
-import { unifiControllerIntegration } from '@site/docs/integrations/unifi-controller';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { unifiControllerIntegration } from "@site/docs/integrations/unifi-controller";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import TabItem from '@theme/TabItem';
-import Tabs from '@theme/Tabs';
-import { networkControllerSummaryWidget } from '.';
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import { networkControllerSummaryWidget } from ".";
 
+<WidgetHeader widget={networkControllerSummaryWidget} categories={["Network controller"]} />
 
-<WidgetHeader
-  widget={networkControllerSummaryWidget}
-  categories={['Network controller']}
-/>
-
-Shows information whether your WAN is connected, Wi-Fi is active and several other information.
+Shows whether your WAN, internet, Wi-Fi, LAN, and VPN are available. Wider or taller layouts progressively reveal latency, ping, and connected-client counts without a separate view.
 
 ### Screenshots
 
-import summaryCard from './img/summary.png';
+import summaryCard from "./img/summary.png";
 
 <img src={summaryCard} alt="network-controller-summary" width={128 * 1.5} height={128 * 1.5} />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: unifiControllerIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: unifiControllerIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/notebook/index.mdx b/apps/docs/docs/widgets/notebook/index.mdx
index 393137ed2..887908372 100644
--- a/apps/docs/docs/widgets/notebook/index.mdx
+++ b/apps/docs/docs/widgets/notebook/index.mdx
@@ -4,6 +4,8 @@ description: "A simple notebook widget that supports markdown."
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
 import { WidgetHeader } from "@site/src/components/widgets/header";
@@ -24,6 +26,8 @@ import editOn from "./img/edit.png";
   <img src={editOn} alt="notebook edit-on" width={128 * 3} />
 </div>
 
+<WidgetInteractionGuide advancedView={false} />
+
 ### Adding the widget
 
 <AddingWidget />
@@ -34,7 +38,7 @@ import editOn from "./img/edit.png";
 
 ### Editing
 
-When the permissions of the user allows it, you can enter the editing of the text by clicking the following button in the top right.
+When your permissions allow it, hover the widget, focus within it, or use a touch device to reveal the edit button in the top right. You can also double-click the document to edit it directly.
 
 ![](./img/notebook-enter-editing.webp)
 
diff --git a/apps/docs/docs/widgets/notifications/index.mdx b/apps/docs/docs/widgets/notifications/index.mdx
index 0a715ab3c..89771e35b 100644
--- a/apps/docs/docs/widgets/notifications/index.mdx
+++ b/apps/docs/docs/widgets/notifications/index.mdx
@@ -1,44 +1,41 @@
 ---
-title: 'Notifications'
-description: 'Display notification history from an integration'
+title: "Notifications"
+description: "Display notification history from an integration"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { notificationsWidget } from '.';
-import { ntfyIntegration } from '@site/docs/integrations/ntfy';
-import { nextcloudIntegration } from '@site/docs/integrations/nextcloud';
-import { gotifyIntegration } from '@site/docs/integrations/gotify';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={notificationsWidget}
-  categories={['Notifications', "Messaging"]}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { IconAd } from "@tabler/icons-react";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { notificationsWidget } from ".";
+import { ntfyIntegration } from "@site/docs/integrations/ntfy";
+import { nextcloudIntegration } from "@site/docs/integrations/nextcloud";
+import { gotifyIntegration } from "@site/docs/integrations/gotify";
+
+<WidgetHeader widget={notificationsWidget} categories={["Notifications", "Messaging"]} />
 
 The notifications widget allows you to display notifications from various integrations in a unified view.
 
 ### Screenshots
 
-import notificationsScreenshot from './img/notifications.png';
+import notificationsScreenshot from "./img/notifications.png";
 
 <img src={notificationsScreenshot} alt="notifications" width={256} height={256} />
 
 ### Supported Integrations
 
 <WidgetIntegrations
-  items={[
-    { integration: ntfyIntegration },
-    { integration: nextcloudIntegration },
-    { integration: gotifyIntegration }
-  ]}
+  items={[{ integration: ntfyIntegration }, { integration: nextcloudIntegration }, { integration: gotifyIntegration }]}
 />
 
+<WidgetInteractionGuide advancedView={false} />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/paperless-ngx/index.mdx b/apps/docs/docs/widgets/paperless-ngx/index.mdx
index 3dd684efd..a2ef00ebe 100644
--- a/apps/docs/docs/widgets/paperless-ngx/index.mdx
+++ b/apps/docs/docs/widgets/paperless-ngx/index.mdx
@@ -1,34 +1,39 @@
 ---
-title: 'Paperless-ngx'
-description: 'Displays document management statistics including inbox ratio, document counts, and metadata.'
+title: "Paperless-ngx"
+description: "Displays document management statistics including inbox ratio, document counts, and metadata."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { paperlessNgxWidget } from '.';
-import { paperlessNgxIntegration } from '@site/docs/integrations/paperless-ngx';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { paperlessNgxWidget } from ".";
+import { paperlessNgxIntegration } from "@site/docs/integrations/paperless-ngx";
 
-<WidgetHeader
-  widget={paperlessNgxWidget}
-  categories={['Documents']}
-/>
+<WidgetHeader widget={paperlessNgxWidget} categories={["Documents"]} />
 
 This widget displays statistics from your Paperless-ngx instance, including an inbox ratio ring showing how many documents are in your inbox versus total, along with counts for correspondents, tags, and document types.
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: paperlessNgxIntegration,
-  note: "Displays document statistics and inbox ratio"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: paperlessNgxIntegration,
+      note: "Displays document statistics and inbox ratio",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={paperlessNgxWidget.configuration} />
diff --git a/apps/docs/docs/widgets/patchmon/index.mdx b/apps/docs/docs/widgets/patchmon/index.mdx
index d16ab8d68..90bb6754c 100644
--- a/apps/docs/docs/widgets/patchmon/index.mdx
+++ b/apps/docs/docs/widgets/patchmon/index.mdx
@@ -1,21 +1,19 @@
 ---
-title: 'PatchMon'
-description: 'Displays host patch statistics from PatchMon including update and security counts.'
+title: "PatchMon"
+description: "Displays host patch statistics from PatchMon including update and security counts."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { patchmonWidget } from '.';
-import { patchmonIntegration } from '@site/docs/integrations/patchmon';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { patchmonWidget } from ".";
+import { patchmonIntegration } from "@site/docs/integrations/patchmon";
 
-<WidgetHeader
-  widget={patchmonWidget}
-  categories={['Health Monitoring']}
-/>
+<WidgetHeader widget={patchmonWidget} categories={["Health Monitoring"]} />
 
 This widget displays patch statistics from your PatchMon instance, including total hosts, hosts needing updates, and security update counts. Each stat is shown with a dedicated icon and severity-tinted card background for quick visual scanning.
 
@@ -39,13 +37,13 @@ In **1-column-wide** layouts (such as 1×1), the compliance hero switches to a r
 
 When **Enable threshold colors** is on (default), stat values and card backgrounds are colored for at-a-glance severity:
 
-| Stat | Green | Yellow | Red |
-|------|-------|--------|-----|
-| Needs Updates | 0 | 1–4 | 5+ |
-| Security Updates | 0 | 1–9 | 10+ |
-| Hosts with Security Updates | 0 | — | 1+ |
-| Up-to-Date Hosts | 100% of total | 90–99% | below 90% |
-| Outdated Packages | 0 | 1–49 | 50+ |
+| Stat                        | Green         | Yellow | Red       |
+| --------------------------- | ------------- | ------ | --------- |
+| Needs Updates               | 0             | 1–4    | 5+        |
+| Security Updates            | 0             | 1–9    | 10+       |
+| Hosts with Security Updates | 0             | —      | 1+        |
+| Up-to-Date Hosts            | 100% of total | 90–99% | below 90% |
+| Outdated Packages           | 0             | 1–49   | 50+       |
 
 Enable **Advanced thresholds** to override warning and critical values per stat, using either absolute counts or percentages of total hosts.
 
@@ -62,13 +60,13 @@ The OS distribution limit defaults to **All**. A widget size of **2×3** or larg
 
 The widget adapts its layout based on the available space:
 
-| Widget size | Layout |
-|-------------|--------|
-| **1×1** | Primary selected content: compliance ring (no label), compact OS distribution, or up to two enabled stats |
+| Widget size       | Layout                                                                                                              |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------- |
+| **1×1**           | Primary selected content: compliance ring (no label), compact OS distribution, or up to two enabled stats           |
 | **2×1** / **1×2** | Compact primary content; **2×1** shows compliance label and host ratio beside the ring; **1×2** uses ring-only hero |
-| **2×2** (default) | Compliance hero, stat grid with icons, and tinted cards |
-| **2×3** / **3×2** | Hero, stats, OS distribution, and "last updated" footer |
-| **3×3** or larger | Full layout with up to 4-column stat grid, donut chart, and optional OS legend |
+| **2×2** (default) | Compliance hero, stat grid with icons, and tinted cards                                                             |
+| **2×3** / **3×2** | Hero, stats, OS distribution, and "last updated" footer                                                             |
+| **3×3** or larger | Full layout with up to 4-column stat grid, donut chart, and optional OS legend                                      |
 
 ### Last updated
 
@@ -76,14 +74,21 @@ When the widget has enough space, a "last updated" timestamp appears at the bott
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: patchmonIntegration,
-  note: "Displays host patch and security update statistics"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: patchmonIntegration,
+      note: "Displays host patch and security update statistics",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={patchmonWidget.configuration} />
diff --git a/apps/docs/docs/widgets/releases/index.mdx b/apps/docs/docs/widgets/releases/index.mdx
index faf386a13..38134344a 100644
--- a/apps/docs/docs/widgets/releases/index.mdx
+++ b/apps/docs/docs/widgets/releases/index.mdx
@@ -4,6 +4,8 @@ description: "Displays a list of the current version of the given repositories w
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
 import { WidgetHeader } from "@site/src/components/widgets/header";
@@ -33,6 +35,8 @@ GitHub, Docker Hub, GitLab, NPM, Codeberg, GitHub Container Registry, Quay, and
 For GitHub Container Registry, use `owner/package` identifiers such as `homarr-labs/homarr`.
 Full image references such as `ghcr.io/homarr-labs/homarr:latest` are also accepted.
 
+<WidgetInteractionGuide advancedView={false} />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/rss-feed/index.mdx b/apps/docs/docs/widgets/rss-feed/index.mdx
index 68bbb1071..6fe5325de 100644
--- a/apps/docs/docs/widgets/rss-feed/index.mdx
+++ b/apps/docs/docs/widgets/rss-feed/index.mdx
@@ -1,37 +1,42 @@
 ---
-title: 'RSS Feed'
-description: 'Monitor and display one or more generic RSS, ATOM or JSON feeds.'
+title: "RSS Feed"
+description: "Monitor and display one or more generic RSS, ATOM or JSON feeds."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { rssFeedWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { rssFeedWidget } from ".";
 
-<WidgetHeader
-  widget={rssFeedWidget}
-  categories={['Feeds']}
-/>
+<WidgetHeader widget={rssFeedWidget} categories={["Feeds"]} />
 
 Using the RSS standard, you can integrate most News websites, applications and more on your dashboard.
 
 ### Screenshots
 
-import screenshot from './img/screenshot.png';
+import screenshot from "./img/screenshot.png";
 
 <img src={screenshot} alt="rss-feed noted-lol" width={128 * 4} />
 
+<WidgetInteractionGuide advancedView={false} />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={rssFeedWidget.configuration} />
 
+If one configured feed fails, the widget keeps entries from healthy feeds visible and shows a warning. If a refresh fails after entries have loaded, the previous entries stay visible with a stale-data warning.
+
 ### Examples
+
 Here's a small collection of examples, that you can use for testing or actual use (in no particular order):
+
 - https://noted.lol/rss/
 - https://blog.google/products/chrome/rss/
 - https://www.w3.org/blog/feed/
@@ -45,4 +50,4 @@ Here's a small collection of examples, that you can use for testing or actual us
 - http://feeds.foxnews.com/foxnews/latest
 
 There is a good list of feeds here:
-https://github.com/greysonp/rss-feeds/blob/master/feeds.json
\ No newline at end of file
+https://github.com/greysonp/rss-feeds/blob/master/feeds.json
diff --git a/apps/docs/docs/widgets/smart-home-entity-state/index.mdx b/apps/docs/docs/widgets/smart-home-entity-state/index.mdx
index d101d6376..9cd6d19a8 100644
--- a/apps/docs/docs/widgets/smart-home-entity-state/index.mdx
+++ b/apps/docs/docs/widgets/smart-home-entity-state/index.mdx
@@ -1,34 +1,32 @@
 ---
-title: 'Entity State'
-description: 'Display the state of an entity and toggle it optionally'
+title: "Entity State"
+description: "Display the state of an entity and toggle it optionally"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { smartHomeEntityStateWidget } from '.';
-import { homeAssistantIntegration } from '@site/docs/integrations/home-assistant';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { smartHomeEntityStateWidget } from ".";
+import { homeAssistantIntegration } from "@site/docs/integrations/home-assistant";
 
-
-<WidgetHeader
-  widget={smartHomeEntityStateWidget}
-  categories={['Smart home']}
-/>
+<WidgetHeader widget={smartHomeEntityStateWidget} categories={["Smart home"]} />
 
 The entity state enables you to display the current state of an entity.
-This works with most entities and enables you display almost any data. 
+This works with most entities and enables you display almost any data.
 It is recommended that you transform data on the integration as much as possible since Homarr's capabilities in transformation are very limited.
 
 ### Screenshots
 
-import sun from './img/sun.png';
-import lightSwitch from './img/light-switch.png';
-import temperature from './img/temperature.png';
+import sun from "./img/sun.png";
+import lightSwitch from "./img/light-switch.png";
+import temperature from "./img/temperature.png";
 
 <img src={sun} alt="smart-home-entity-state sun" width={128 * 1.5} height={128 * 1.5} />
 <img src={lightSwitch} alt="smart-home-entity-state light-switch" width={128 * 1.5} height={128 * 1.5} />
@@ -36,32 +34,41 @@ import temperature from './img/temperature.png';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: homeAssistantIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: homeAssistantIntegration,
+    },
+  ]}
+/>
 
 ### Interactions
 
 - Toggle entity state by clicking on the entity (only when clickable enabled).
+- If Homarr cannot refresh an entity, the last known state stays visible but toggling is disabled until the connection recovers.
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={smartHomeEntityStateWidget.configuration} />
 
 ### How to find the entity ID
 
 To find the entity ID in Home Assistant, follow these steps:
+
 1. Open Home Assistant and go to the **Developer Tools** section (usually found in the sidebar).
 2. Click on the **States** tab.
 3. In the list of entities, find the entity you want to use.
 4. The entity ID will be displayed in the format `domain.object_id` (e.g., `light.living_room_light`).
 5. Copy the entity ID and paste it into the widget configuration in Homarr. It will then show the State that is visible in Home Assistant.
 
-import retrieveEntityId from './img/retrieve-entity-id.png';
+import retrieveEntityId from "./img/retrieve-entity-id.png";
 
 <div>
   <img src={retrieveEntityId} alt="homeassistant retrieve-entity-id" width={256 * 2} />
-</div>
\ No newline at end of file
+</div>
diff --git a/apps/docs/docs/widgets/smart-home-execute-automation/index.mdx b/apps/docs/docs/widgets/smart-home-execute-automation/index.mdx
index 522c113ca..f0118799a 100644
--- a/apps/docs/docs/widgets/smart-home-execute-automation/index.mdx
+++ b/apps/docs/docs/widgets/smart-home-execute-automation/index.mdx
@@ -1,50 +1,60 @@
 ---
-title: 'Execute Automation'
-description: 'Trigger an automation with one click'
+title: "Execute Automation"
+description: "Trigger an automation with one click"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { smartHomeExecuteAutomationWidget } from '.';
-import { homeAssistantIntegration } from '@site/docs/integrations/home-assistant';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { smartHomeExecuteAutomationWidget } from ".";
+import { homeAssistantIntegration } from "@site/docs/integrations/home-assistant";
 
-
-<WidgetHeader
-  widget={smartHomeExecuteAutomationWidget}
-  categories={['Automation']}
-/>
+<WidgetHeader widget={smartHomeExecuteAutomationWidget} categories={["Automation"]} />
 
 The execute automation widget allows you to trigger an automation with one click.
 
 ### Screenshots
 
-import empty from './img/empty.png';
-import withDisplayname from './img/with-displayname.png';
+import empty from "./img/empty.png";
+import withDisplayname from "./img/with-displayname.png";
 
 <div className="flex gap-1">
   <img src={empty} alt="smart-home-execute-automation empty" width={128 * 1.5} height={128 * 1.5} />
-  <img src={withDisplayname} alt="smart-home-execute-automation with-displayname" width={128 * 1.5} height={128 * 1.5} />
+  <img
+    src={withDisplayname}
+    alt="smart-home-execute-automation with-displayname"
+    width={128 * 1.5}
+    height={128 * 1.5}
+  />
 </div>
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: homeAssistantIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: homeAssistantIntegration,
+    },
+  ]}
+/>
 
 ### Interactions
 
 - Trigger the automation by clicking on the widget.
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={smartHomeExecuteAutomationWidget.configuration} />
diff --git a/apps/docs/docs/widgets/speedtest-tracker/index.mdx b/apps/docs/docs/widgets/speedtest-tracker/index.mdx
index 94be18dd7..c6c0bd992 100644
--- a/apps/docs/docs/widgets/speedtest-tracker/index.mdx
+++ b/apps/docs/docs/widgets/speedtest-tracker/index.mdx
@@ -1,39 +1,45 @@
 ---
-title: 'Speedtest Tracker'
-description: 'Displays speed test results from your Speedtest Tracker instance.'
+title: "Speedtest Tracker"
+description: "Displays speed test results from your Speedtest Tracker instance."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { speedtestTrackerWidget } from '.';
-import { speedtestTrackerIntegration } from '@site/docs/integrations/speedtest-tracker';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={speedtestTrackerWidget}
-  categories={['Speedtest']}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { speedtestTrackerWidget } from ".";
+import { speedtestTrackerIntegration } from "@site/docs/integrations/speedtest-tracker";
+
+<WidgetHeader widget={speedtestTrackerWidget} categories={["Speedtest"]} />
 
 This widget displays internet speed test results from your [Speedtest Tracker](https://docs.speedtest-tracker.dev/) instance,
 including the latest result, historical averages, and a live chart of the last 12 hours.
 
 ### Screenshots
 
-import screenshot from './img/screenshot.png';
+import screenshot from "./img/screenshot.png";
 
 <img src={screenshot} alt="speedtest-tracker image" width={500} height={355} />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: speedtestTrackerIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: speedtestTrackerIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={speedtestTrackerWidget.configuration} />
diff --git a/apps/docs/docs/widgets/stock-price/index.mdx b/apps/docs/docs/widgets/stock-price/index.mdx
index 5d9a24c64..a95ed13bf 100644
--- a/apps/docs/docs/widgets/stock-price/index.mdx
+++ b/apps/docs/docs/widgets/stock-price/index.mdx
@@ -1,28 +1,27 @@
 ---
-title: 'Stock Price'
-description: 'Displays the current stock price of a company.'
+title: "Stock Price"
+description: "Displays the current stock price of a company."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { stockPriceWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { stockPriceWidget } from ".";
 
-<WidgetHeader
-  widget={stockPriceWidget}
-  categories={['Finance', "Market"]}
-/>
+<WidgetHeader widget={stockPriceWidget} categories={["Finance", "Market"]} />
 
 Using the Stocks widget, you can show the current stock prices of your favorite companies on your dashboard.
+The widget prioritizes the symbol, current price, and trend. Company name, change, time range, and a taller chart appear progressively when both widget dimensions can support them.
 
 ### Screenshots
 
-import apple from './img/apple.png';
-import google from './img/google.png';
-import ethereum from './img/ethereum.png';
-import nvidia from './img/nvidia.png';
+import apple from "./img/apple.png";
+import google from "./img/google.png";
+import ethereum from "./img/ethereum.png";
+import nvidia from "./img/nvidia.png";
 
 <div className="flex gap-1">
   <div className="flex flex-col gap-1">
@@ -34,17 +33,21 @@ import nvidia from './img/nvidia.png';
   </div>
   <img src={nvidia} alt="stock-price nvidia" width={128 * 2 + 2} height={128 * 2 + 4} />
 </div>
-  
+
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={stockPriceWidget.configuration} />
 
 ### Examples
+
 Here's a small collection of examples, that you can use for testing or actual use (in no particular order):
+
 - AAPL
 - GOOGL
 - AMZN
@@ -59,4 +62,4 @@ Here's a small collection of examples, that you can use for testing or actual us
 ### Data source
 
 We use the Yahoo Finance API to fetch the stock prices.
-If you need to whitelist the api, please use the following URL: `https://query1.finance.yahoo.com`
\ No newline at end of file
+If you need to whitelist the api, please use the following URL: `https://query1.finance.yahoo.com`
diff --git a/apps/docs/docs/widgets/system-disks/index.mdx b/apps/docs/docs/widgets/system-disks/index.mdx
index b3be87e1d..d533fa025 100644
--- a/apps/docs/docs/widgets/system-disks/index.mdx
+++ b/apps/docs/docs/widgets/system-disks/index.mdx
@@ -4,6 +4,8 @@ description: "Disk usage of your system"
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -42,6 +44,8 @@ This widget displays filesystem and SMART disk usage for supported server and NA
   ]}
 />
 
+<WidgetInteractionGuide advancedView={false} />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/system-disks/index.ts b/apps/docs/docs/widgets/system-disks/index.ts
index 8dd68f057..ade53efc0 100644
--- a/apps/docs/docs/widgets/system-disks/index.ts
+++ b/apps/docs/docs/widgets/system-disks/index.ts
@@ -19,7 +19,11 @@ export const systemDisksWidget: WidgetDefinition = {
         description: "How disk usage values are shown",
         values: {
           type: "select",
-          options: ["Percentage (e.g., 76%)", "Absolute values (e.g., 800GB / 1TB)", "Free space percentage (e.g., 24% free)"],
+          options: [
+            "Percentage (e.g., 76%)",
+            "Absolute values (e.g., 800GB / 1TB)",
+            "Free space percentage (e.g., 24% free)",
+          ],
         },
         defaultValue: "Percentage (e.g., 76%)",
       },
diff --git a/apps/docs/docs/widgets/system-resources/index.mdx b/apps/docs/docs/widgets/system-resources/index.mdx
index 16ad19750..cdc258f4c 100644
--- a/apps/docs/docs/widgets/system-resources/index.mdx
+++ b/apps/docs/docs/widgets/system-resources/index.mdx
@@ -4,6 +4,8 @@ description: "Displays CPU, RAM and network of your host in real time"
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -65,6 +67,8 @@ import { synologyIntegration } from "@site/docs/integrations/synology";
   ]}
 />
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/timetable/index.mdx b/apps/docs/docs/widgets/timetable/index.mdx
index e9bdfd326..1aede99cd 100644
--- a/apps/docs/docs/widgets/timetable/index.mdx
+++ b/apps/docs/docs/widgets/timetable/index.mdx
@@ -4,6 +4,8 @@ description: "Displays departure times for a station."
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
 import { WidgetHeader } from "@site/src/components/widgets/header";
@@ -19,18 +21,12 @@ import trainDepartures from "./img/train-departures.png";
 import streetDepartures from "./img/street-departures.png";
 
 <div className="flex gap-2">
-  <img
-    src={trainDepartures}
-    alt="timetable-widget-train-departures"
-    width={128 * 2}
-  />
-  <img
-    src={streetDepartures}
-    alt="timetable-widget-bus-and-tram-departures"
-    width={128 * 2}
-  />
+  <img src={trainDepartures} alt="timetable-widget-train-departures" width={128 * 2} />
+  <img src={streetDepartures} alt="timetable-widget-bus-and-tram-departures" width={128 * 2} />
 </div>
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
@@ -38,3 +34,7 @@ import streetDepartures from "./img/street-departures.png";
 ### Configuration
 
 <WidgetConfig configuration={timetableWidget.configuration} />
+
+For security, all custom base URLs must resolve to a public IP address whenever Homarr uses them. Private and local hosts are rejected.
+
+If a timetable refresh fails after departures have loaded, the widget keeps the previous departures visible and marks them as stale. The advanced view also shows their last update time.
diff --git a/apps/docs/docs/widgets/timetable/index.ts b/apps/docs/docs/widgets/timetable/index.ts
index 1cefb6bcd..32b9e2bcf 100644
--- a/apps/docs/docs/widgets/timetable/index.ts
+++ b/apps/docs/docs/widgets/timetable/index.ts
@@ -11,7 +11,7 @@ export const timetableWidget: WidgetDefinition = {
       {
         name: "Search.ch URL",
         description: "Base URL for the Search.ch timetable API.",
-        values: "Any valid URL.",
+        values: "An HTTP(S) URL that resolves to a public IP address.",
         defaultValue: "https://search.ch",
       },
       {
diff --git a/apps/docs/docs/widgets/tracearr/index.mdx b/apps/docs/docs/widgets/tracearr/index.mdx
index a579d8af3..ff02699ca 100644
--- a/apps/docs/docs/widgets/tracearr/index.mdx
+++ b/apps/docs/docs/widgets/tracearr/index.mdx
@@ -1,52 +1,57 @@
 ---
-title: 'Tracearr'
-description: 'Monitor media server streams, user activity, and policy violations.'
+title: "Tracearr"
+description: "Monitor media server streams, user activity, and policy violations."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { tracearrWidget } from '.';
-import { tracearrIntegration } from '@site/docs/integrations/tracearr';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { tracearrWidget } from ".";
+import { tracearrIntegration } from "@site/docs/integrations/tracearr";
 
-<WidgetHeader
-  widget={tracearrWidget}
-  categories={['Media Monitoring']}
-/>
+<WidgetHeader widget={tracearrWidget} categories={["Media Monitoring"]} />
 
 The Tracearr widget provides a real-time monitoring dashboard for your media server activity. It displays active streams, user statistics, recent watching history, and policy violations.
 
 ### Sections
 
-| Section | Description |
-|---|---|
-| **Stats Bar** | Displays Active Streams, Total Users, Transcode Count, and Total Bandwidth at a glance. |
-| **Active Streams** | Shows currently playing media with poster art, user info, progress bar, resolution, and transcoding status (Direct Play or Transcode). |
-| **Recent Activity** | A paginated list of watching history with user avatars and watched status. |
-| **Violations** | Alerts for policy violations (e.g., concurrent stream limits) with severity levels. |
+| Section             | Description                                                                                                                            |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| **Stats Bar**       | Displays Active Streams, Total Users, Transcode Count, and Total Bandwidth at a glance.                                                |
+| **Active Streams**  | Shows currently playing media with poster art, user info, progress bar, resolution, and transcoding status (Direct Play or Transcode). |
+| **Recent Activity** | A paginated list of watching history with user avatars and watched status.                                                             |
+| **Violations**      | Alerts for policy violations (e.g., concurrent stream limits) with severity levels.                                                    |
 
 ### Screenshots
 
-import widgetOverview from './img/widget-overview.png';
-import streamsAndStats from './img/streams-and-stats.png';
+import widgetOverview from "./img/widget-overview.png";
+import streamsAndStats from "./img/streams-and-stats.png";
 
 <div className="flex flex-col gap-2">
   <img src={widgetOverview} alt="tracearr-widget-overview" width={128 * 4} />
   <img src={streamsAndStats} alt="tracearr-streams-and-stats" width={128 * 4} />
 </div>
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: tracearrIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: tracearrIntegration,
+    },
+  ]}
+/>
 
 ### Configuration
+
 <WidgetConfig configuration={tracearrWidget.configuration} />
diff --git a/apps/docs/docs/widgets/traefik/index.mdx b/apps/docs/docs/widgets/traefik/index.mdx
index dc9f6a6c4..dfc2f9247 100644
--- a/apps/docs/docs/widgets/traefik/index.mdx
+++ b/apps/docs/docs/widgets/traefik/index.mdx
@@ -4,6 +4,8 @@ description: "Displays Traefik router, service, middleware, and entry point coun
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -26,6 +28,8 @@ This widget displays a compact overview of your Traefik instance, including tota
   ]}
 />
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/umami/index.mdx b/apps/docs/docs/widgets/umami/index.mdx
index 0d0006054..6f2c2bb7f 100644
--- a/apps/docs/docs/widgets/umami/index.mdx
+++ b/apps/docs/docs/widgets/umami/index.mdx
@@ -1,28 +1,33 @@
 ---
-title: 'Umami Analytics'
-description: 'Display visitor stats from your Umami analytics instance'
+title: "Umami Analytics"
+description: "Display visitor stats from your Umami analytics instance"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { umamiWidget } from '.';
-import { umamiIntegration } from '@site/docs/integrations/umami';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={umamiWidget}
-  categories={['Analytics']}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { umamiWidget } from ".";
+import { umamiIntegration } from "@site/docs/integrations/umami";
+
+<WidgetHeader widget={umamiWidget} categories={["Analytics"]} />
 
 The Umami Analytics widget displays key visitor metrics from a website tracked by your [Umami](https://umami.is) instance - pageviews, unique visitors, visits, bounce rate, avg. visit duration, and real-time active visitor count. The widget body can be switched between a visitor/event chart, a multi-event chart, and ranked top pages or referrers lists.
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: umamiIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: umamiIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
@@ -34,12 +39,12 @@ The Umami Analytics widget displays key visitor metrics from a website tracked b
 
 ### View modes
 
-| View | Description |
-|---|---|
-| **Chart** | Bar chart or sparkline of unique visitors over the selected time frame. Optionally overlay a single named event as a second series. |
-| **Events chart** | Multi-select one or more named events and chart each as its own colored series - no visitor baseline. Supports bar and sparkline. |
-| **Top pages** | Ranked list of URLs by pageview count for the selected time frame. |
-| **Top referrers** | Ranked list of referrer sources by session count. Direct traffic (no referrer) is labeled "Direct". |
+| View              | Description                                                                                                                         |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| **Chart**         | Bar chart or sparkline of unique visitors over the selected time frame. Optionally overlay a single named event as a second series. |
+| **Events chart**  | Multi-select one or more named events and chart each as its own colored series - no visitor baseline. Supports bar and sparkline.   |
+| **Top pages**     | Ranked list of URLs by pageview count for the selected time frame.                                                                  |
+| **Top referrers** | Ranked list of referrer sources by session count. Direct traffic (no referrer) is labeled "Direct".                                 |
 
 ### Notes
 
diff --git a/apps/docs/docs/widgets/ups/index.mdx b/apps/docs/docs/widgets/ups/index.mdx
index bf512990d..8a3d7037e 100644
--- a/apps/docs/docs/widgets/ups/index.mdx
+++ b/apps/docs/docs/widgets/ups/index.mdx
@@ -1,20 +1,19 @@
 ---
-title: 'UPS'
-description: 'Monitor the status of your UPS devices through a NUT server.'
+title: "UPS"
+description: "Monitor the status of your UPS devices through a NUT server."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { upsWidget } from '.';
-import { peaNutIntegration } from '@site/docs/integrations/peanut';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={upsWidget}
-  categories={['UPS']}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { upsWidget } from ".";
+import { peaNutIntegration } from "@site/docs/integrations/peanut";
+
+<WidgetHeader widget={upsWidget} categories={["UPS"]} />
 
 This widget displays the status of the UPS devices reported by a Network UPS Tools (NUT) server. Each device shows its
 status (online, on battery, charging or low battery), battery charge and estimated runtime, output load, and input and
@@ -22,27 +21,34 @@ output voltage.
 
 ### Layouts
 
-import screenshotFull from './img/screenshot.png';
-import screenshotCompact from './img/screenshot-compact.png';
-import screenshotMini from './img/screenshot-mini.png';
+import screenshotFull from "./img/screenshot.png";
+import screenshotCompact from "./img/screenshot-compact.png";
+import screenshotMini from "./img/screenshot-mini.png";
 
 The widget adapts to the size of the tile, so it stays readable from a full dashboard panel down to a single cell. Multiple UPS devices scroll within the widget at any height.
 
-| Layout | Size | Preview |
-| --- | --- | --- |
-| Full | 3+ columns wide | <img src={screenshotFull} alt="UPS widget full layout" width={239} /> |
-| Compact | ~2 columns | <img src={screenshotCompact} alt="UPS widget compact layout" width={171} /> |
-| Mini | 1 column | <img src={screenshotMini} alt="UPS widget mini layout" width={90} /> |
+| Layout  | Size            | Preview                                                                     |
+| ------- | --------------- | --------------------------------------------------------------------------- |
+| Full    | 3+ columns wide | <img src={screenshotFull} alt="UPS widget full layout" width={239} />       |
+| Compact | ~2 columns      | <img src={screenshotCompact} alt="UPS widget compact layout" width={171} /> |
+| Mini    | 1 column        | <img src={screenshotMini} alt="UPS widget mini layout" width={90} />        |
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: peaNutIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: peaNutIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={upsWidget.configuration} />
diff --git a/apps/docs/docs/widgets/uptime-kuma/index.mdx b/apps/docs/docs/widgets/uptime-kuma/index.mdx
index 3a6592b2e..6c5eefa16 100644
--- a/apps/docs/docs/widgets/uptime-kuma/index.mdx
+++ b/apps/docs/docs/widgets/uptime-kuma/index.mdx
@@ -1,34 +1,39 @@
 ---
-title: 'Uptime Kuma'
-description: 'Displays monitor uptime statistics, average uptime percentage, and service status counts.'
+title: "Uptime Kuma"
+description: "Displays monitor uptime statistics, average uptime percentage, and service status counts."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { uptimeKumaWidget } from '.';
-import { uptimeKumaIntegration } from '@site/docs/integrations/uptime-kuma';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { uptimeKumaWidget } from ".";
+import { uptimeKumaIntegration } from "@site/docs/integrations/uptime-kuma";
 
-<WidgetHeader
-  widget={uptimeKumaWidget}
-  categories={['Monitoring']}
-/>
+<WidgetHeader widget={uptimeKumaWidget} categories={["Monitoring"]} />
 
 This widget displays uptime statistics from your Uptime Kuma status page, including a visual uptime ring, average uptime percentage, and per-status monitor counts.
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: uptimeKumaIntegration,
-  note: "Displays monitors from the configured status page"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: uptimeKumaIntegration,
+      note: "Displays monitors from the configured status page",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={uptimeKumaWidget.configuration} />
diff --git a/apps/docs/docs/widgets/video/index.mdx b/apps/docs/docs/widgets/video/index.mdx
index 3ccf3760a..fbf41c4e3 100644
--- a/apps/docs/docs/widgets/video/index.mdx
+++ b/apps/docs/docs/widgets/video/index.mdx
@@ -1,19 +1,17 @@
 ---
-title: 'Video Stream'
-description: 'Embed a video stream or video from a camera or a website.'
+title: "Video Stream"
+description: "Embed a video stream or video from a camera or a website."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { videoWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { videoWidget } from ".";
 
-<WidgetHeader
-  widget={videoWidget}
-  categories={["Video", "Surveillance"]}
-/>
+<WidgetHeader widget={videoWidget} categories={["Video", "Surveillance"]} />
 
 Do you run surveilance cameras? Or maybe you have a favourite video?
 The video widget enables you to integrate both seamlessly into your dashboard.
@@ -22,7 +20,6 @@ This widget uses [video.js](https://videojs.com/) to play HLS or DASH video nati
 DRM content is not yet supported. More info here:
 https://videojs.com/guides/faqs/#q-what-is-videojs
 
-
 You can use the following URL to test:
 http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
 
@@ -30,9 +27,12 @@ http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp
 
 ![video big-buck-bunny](./img/bunny.png)
 
+<WidgetInteractionGuide advancedView={false} />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={videoWidget.configuration} />
diff --git a/apps/docs/docs/widgets/video/index.tsx b/apps/docs/docs/widgets/video/index.tsx
index e0df87ce0..7d57a27ad 100644
--- a/apps/docs/docs/widgets/video/index.tsx
+++ b/apps/docs/docs/widgets/video/index.tsx
@@ -5,7 +5,7 @@ export const videoWidget: WidgetDefinition = {
   icon: IconDeviceCctv,
   name: "Video Stream",
   description: "Embed a video stream or video from a camera or a website.",
-  path: "../../widgets/stock-price",
+  path: "../../widgets/video",
   configuration: {
     items: [
       {
diff --git a/apps/docs/docs/widgets/vpn/index.mdx b/apps/docs/docs/widgets/vpn/index.mdx
index 0aa6a1a16..0e23619e5 100644
--- a/apps/docs/docs/widgets/vpn/index.mdx
+++ b/apps/docs/docs/widgets/vpn/index.mdx
@@ -1,19 +1,18 @@
 ---
-title: 'VPN'
-description: 'Monitor the status of your VPN integrations.'
+title: "VPN"
+description: "Monitor the status of your VPN integrations."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { vpnWidget } from '.';
-import { gluetunIntegration } from '@site/docs/integrations/gluetun';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={vpnWidget}
-  categories={['Network', 'Security']}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { vpnWidget } from ".";
+import { gluetunIntegration } from "@site/docs/integrations/gluetun";
+
+<WidgetHeader widget={vpnWidget} categories={["Network", "Security"]} />
 
 The VPN widget provides a compact overview of each configured VPN integration. It shows whether the tunnel and DNS
 services are up, the currently exposed public IP address, and the VPN provider and protocol being used.
@@ -23,7 +22,7 @@ current status at a glance.
 
 ### Screenshots
 
-import singleIntegrationImage from './img/single.png';
+import singleIntegrationImage from "./img/single.png";
 
 <div>
   <img src={singleIntegrationImage} alt="VPN widget showing a single integration" width={128 * 3} />
@@ -31,9 +30,15 @@ import singleIntegrationImage from './img/single.png';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: gluetunIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: gluetunIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/weather/index.mdx b/apps/docs/docs/widgets/weather/index.mdx
index 0ff4081d7..f36dc68ea 100644
--- a/apps/docs/docs/widgets/weather/index.mdx
+++ b/apps/docs/docs/widgets/weather/index.mdx
@@ -1,40 +1,44 @@
 ---
-title: 'Weather'
-description: 'Displays the current weather information of a set location.'
+title: "Weather"
+description: "Displays the current weather information of a set location."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { weatherWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { weatherWidget } from ".";
 
-<WidgetHeader
-  widget={weatherWidget}
-  categories={["Weather"]}
-/>
+<WidgetHeader widget={weatherWidget} categories={["Weather"]} />
 
 The Weather Widget uses your location to display the current, highest and lowest temperature.
+In the compact view, select a condition icon or forecast day to open details with a mouse, keyboard or touch.
+The advanced view always combines current conditions with the full seven-day forecast, including humidity, wind,
+gusts, sunrise and sunset. Both views reuse the same cached Open Meteo response.
 
 ### Screenshots
 
-import forecastWeather from './img/forecast.png';
-import currentWeather from './img/current.png';
+import forecastWeather from "./img/forecast.png";
+import currentWeather from "./img/current.png";
 
 <div className="flex flex-col gap-1">
   <img src={forecastWeather} alt="weather forecast-5-days" width={128 * 4.5} />
   <img src={currentWeather} alt="weather current" width={128 * 3} />
 </div>
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={weatherWidget.configuration} />
 
 ### Data source
 
 We use the Open Meteo API to fetch the weather and locations.
-If you need to whitelist the api, please use the following URL: `https://open-meteo.com`
\ No newline at end of file
+If you need to whitelist the api, please use the following URL: `https://open-meteo.com`
diff --git a/apps/docs/docusaurus.config.ts b/apps/docs/docusaurus.config.ts
index 0edf8a8f3..13040b826 100644
--- a/apps/docs/docusaurus.config.ts
+++ b/apps/docs/docusaurus.config.ts
@@ -1,17 +1,30 @@
 import type * as Preset from "@docusaurus/preset-classic";
 import type { Config } from "@docusaurus/types";
 import { themes as prismThemes } from "prism-react-renderer";
+import { resolveHomarrUrlConfig } from "@homarr/workshop/schema";
 const a11yEmoji = require("@fec/remark-a11y-emoji");
 
+const deprecatedWorkshopUrl = process.env.WORKSHOP_URL;
+if (deprecatedWorkshopUrl && !process.env.WORKSHOP_API_URL) {
+  console.warn("WORKSHOP_URL is deprecated; use WORKSHOP_API_URL instead.");
+}
+
+const publicUrls = resolveHomarrUrlConfig({
+  homarrWebsiteUrl: process.env.HOMARR_WEBSITE_URL,
+  workshopApiUrl: process.env.WORKSHOP_API_URL ?? deprecatedWorkshopUrl,
+});
 const config: Config = {
   title: "Homarr documentation",
   tagline: "A simple yet powerful dashboard for your server.",
-  url: "https://homarr.dev",
+  url: publicUrls.homarrWebsiteUrl,
   baseUrl: "/",
   trailingSlash: undefined,
   favicon: "img/logo.png",
   organizationName: "homarr-labs",
   projectName: "homarr",
+  customFields: {
+    workshopUrl: publicUrls.workshopApiUrl,
+  },
   i18n: {
     defaultLocale: "en",
     locales: ["en"],
@@ -43,17 +56,6 @@ const config: Config = {
 
   themes: ["@docusaurus/theme-mermaid"],
 
-  scripts: [
-    {
-      src: "https://widget.kapa.ai/kapa-widget.bundle.js",
-      "data-website-id": "1e4656f4-abeb-4343-bbae-1d8626f52378",
-      "data-project-name": "Homarr",
-      "data-project-color": "#2B2B2B",
-      "data-project-logo": "https://homarr.dev/img/favicon.png",
-      async: true,
-    },
-  ],
-
   presets: [
     [
       "classic",
@@ -123,21 +125,30 @@ const config: Config = {
           label: "Blog",
           position: "left",
           to: "/blog",
+          className: "navbar-item--secondary",
+        },
+        {
+          label: "Workshop",
+          position: "left",
+          to: "/workshop",
         },
         {
           label: "About us",
           position: "left",
           to: "/about-us",
+          className: "navbar-item--collapse-first",
         },
         {
           to: "https://demo.homarr.dev/",
           label: "Demo",
           position: "right",
+          className: "navbar-item--secondary",
         },
         {
           to: "https://opencollective.com/homarr",
           label: "💴 Donate",
           position: "right",
+          className: "navbar-item--collapse-first",
         },
         {
           type: "dropdown",
@@ -236,11 +247,19 @@ const config: Config = {
         },
       ],
       logo: {
-        alt: "Homarr Logo",
-        src: "img/logo.png",
-        height: 100,
+        alt: "Homarr home",
+        src: "img/logo.svg",
+        href: "/",
+        width: 86,
+        height: 58,
       },
-      copyright: `<span class="copyright_text">Copyright © ${new Date().getFullYear()} Homarr<span> — <a href="/docs/community/license">License</a>`,
+      copyright: `
+        <div class="footer__brand-copy">
+          <strong class="footer__brand-name">Homarr</strong>
+          <span class="footer__brand-tagline">Your dashboard for the services you run.</span>
+          <span class="copyright_text">© ${new Date().getFullYear()} Homarr · <a href="/docs/community/license">License</a></span>
+        </div>
+      `,
     },
     prism: {
       theme: prismThemes.github,
@@ -277,8 +296,22 @@ const config: Config = {
     function homarrPackagesPlugin() {
       return {
         name: "resolve-homarr-packages",
-        configureWebpack() {
-          return { resolve: { symlinks: false } };
+        configureWebpack(_config, isServer, { getJSLoader }) {
+          return {
+            resolve: {
+              symlinks: false,
+              alias: { "@": require("path").resolve(__dirname, "src") },
+            },
+            module: {
+              rules: [
+                {
+                  test: /\.[jt]sx?$/iu,
+                  include: /node_modules[\\/]@homarr/u,
+                  use: [getJSLoader({ isServer })],
+                },
+              ],
+            },
+          };
         },
       };
     },
@@ -309,7 +342,67 @@ const config: Config = {
         },
       };
     },
-    "@signalwire/docusaurus-plugin-llms-txt",
+    function workshopRoutesPlugin() {
+      return {
+        name: "workshop-routes",
+        injectHtmlTags() {
+          return {
+            headTags: [
+              {
+                tagName: "style",
+                innerHTML: `
+#workshop-detail-route-fallback { display: none; }
+html[data-workshop-detail-loading] #__docusaurus { display: none; }
+html[data-workshop-detail-loading] #workshop-detail-route-fallback {
+  align-items: center;
+  background: #fff;
+  box-sizing: border-box;
+  color: #4b5563;
+  display: flex;
+  font: 500 0.875rem/1.5 Inter, system-ui, sans-serif;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 2rem;
+}
+@media (prefers-color-scheme: dark) {
+  html[data-workshop-detail-loading] #workshop-detail-route-fallback {
+    background: #18191a;
+    color: #d1d5db;
+  }
+}`,
+              },
+              {
+                tagName: "script",
+                innerHTML: `(function () {
+  var match = window.location.pathname.match(/^\\/workshop\\/([^/]+)\\/?$/);
+  if (match && match[1] !== "admin") {
+    document.documentElement.setAttribute("data-workshop-detail-loading", "");
+  }
+})();`,
+              },
+            ],
+            preBodyTags: [
+              {
+                tagName: "div",
+                attributes: {
+                  id: "workshop-detail-route-fallback",
+                  role: "status",
+                  "aria-live": "polite",
+                },
+                innerHTML: "Loading Workshop…",
+              },
+            ],
+          };
+        },
+        async contentLoaded({ actions }) {
+          actions.addRoute({
+            path: "/workshop/:id",
+            component: "@site/src/components/workshop/WorkshopDetailRoutePage",
+            exact: true,
+          });
+        },
+      };
+    },
     async function tailwindCssPlugin() {
       return {
         name: "docusaurus-tailwindcss",
diff --git a/apps/docs/package.json b/apps/docs/package.json
index a627a4d37..bec22d5ea 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -21,29 +21,45 @@
     "verify:search": "node ./scripts/verify-algolia-search.mjs"
   },
   "dependencies": {
+    "@base-ui/react": "^1.5.0",
     "@docusaurus/core": "^3.10.1",
     "@docusaurus/faster": "^3.10.1",
     "@docusaurus/plugin-content-docs": "^3.10.1",
     "@docusaurus/plugin-sitemap": "^3.10.1",
     "@docusaurus/preset-classic": "^3.10.1",
+    "@homarr/custom-widgets": "workspace:^",
     "@homarr/definitions": "workspace:^",
+    "@homarr/workshop": "workspace:^",
+    "@mantine/core": "catalog:",
     "@mdx-js/react": "^3.1.1",
     "@nivo/line": "^0.99.0",
     "@scalar/api-reference-react": "catalog:",
-    "@signalwire/docusaurus-plugin-llms-txt": "^1.2.2",
+    "@shadcn/react": "catalog:",
     "@tabler/icons-react": "catalog:",
     "@tailwindcss/postcss": "^4.3.2",
+    "class-variance-authority": "^0.7.1",
     "clsx": "catalog:",
+    "cmdk": "catalog:",
+    "date-fns": "catalog:",
     "dayjs": "catalog:",
     "docusaurus-plugin-image-zoom": "^3.0.1",
+    "embla-carousel-react": "catalog:",
+    "input-otp": "catalog:",
     "leader-line-new": "^1.1.9",
+    "next-themes": "catalog:",
+    "pocketbase": "catalog:",
     "postcss": "^8.5.16",
     "posthog-docusaurus": "^2.0.5",
     "prism-react-renderer": "^2.4.1",
     "random-word-slugs": "^0.1.7",
     "react": "catalog:",
+    "react-day-picker": "catalog:",
     "react-dom": "catalog:",
+    "react-resizable-panels": "catalog:",
+    "recharts": "3.8.0",
+    "sonner": "catalog:",
     "swiper": "^14.0.5",
+    "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.2"
   },
   "devDependencies": {
diff --git a/apps/docs/scripts/dump-contributors.mjs b/apps/docs/scripts/dump-contributors.mjs
index f2cd60fb4..b16057c99 100644
--- a/apps/docs/scripts/dump-contributors.mjs
+++ b/apps/docs/scripts/dump-contributors.mjs
@@ -1,14 +1,14 @@
-import { z } from 'zod';
-import fs from 'fs/promises';
+import { z } from "zod";
+import fs from "fs/promises";
 
 const sources = {
   crowdin: [
-    { projectId: 534422, tokenName: 'HOMARR_CROWDIN_TOKEN' },
-    { projectId: 742587, tokenName: 'HOMARR_LABS_CROWDIN_TOKEN' },
+    { projectId: 534422, tokenName: "HOMARR_CROWDIN_TOKEN" },
+    { projectId: 742587, tokenName: "HOMARR_LABS_CROWDIN_TOKEN" },
   ],
   github: [
-    { repository: 'homarr', slug: 'ajnart' },
-    { repository: 'homarr', slug: 'homarr-labs' },
+    { repository: "homarr", slug: "ajnart" },
+    { repository: "homarr", slug: "homarr-labs" },
   ],
 };
 
@@ -23,11 +23,11 @@ const env = schema.parse(process.env);
 const fetchGithubContributors = async (slug, repository) => {
   const url = `https://api.github.com/repos/${slug}/${repository}/contributors?per_page=999`;
   const options = {
-    method: 'GET',
+    method: "GET",
     headers: {
       Authorization: `Bearer ${env.GITHUB_TOKEN}`,
-      Accept: 'application/vnd.github+json',
-      'X-GitHub-Api-Version': '2022-11-28',
+      Accept: "application/vnd.github+json",
+      "X-GitHub-Api-Version": "2022-11-28",
     },
   };
 
@@ -39,7 +39,7 @@ const fetchGithubContributors = async (slug, repository) => {
       login: z.string(),
       avatar_url: z.string().url(),
       contributions: z.number(),
-    })
+    }),
   );
 
   return dataSchema.parse(data);
@@ -48,9 +48,9 @@ const fetchGithubContributors = async (slug, repository) => {
 const fetchCrowdinMembers = async (projectId, tokenName) => {
   const url = `https://crowdin.com/api/v2/projects/${projectId}/members`;
   const options = {
-    method: 'GET',
+    method: "GET",
     headers: {
-      Accept: 'application/json',
+      Accept: "application/json",
       Authorization: `Bearer ${env[tokenName]}`,
     },
   };
@@ -65,7 +65,7 @@ const fetchCrowdinMembers = async (projectId, tokenName) => {
           username: z.string(),
           avatarUrl: z.string().url(),
         }),
-      })
+      }),
     ),
   });
 
@@ -88,16 +88,11 @@ const distinctGithubContributors = githubContributors
   .filter(distinctBy((contributor) => contributor.login))
   .sort((a, b) => b.contributions - a.contributions)
   .map(({ contributions, ...props }) => props)
-  .filter((contributor) => !contributor.login.includes('[bot]'));
-await fs.writeFile('./static/data/contributions.json', JSON.stringify(distinctGithubContributors));
+  .filter((contributor) => !contributor.login.includes("[bot]"));
+await fs.writeFile("./static/data/contributions.json", JSON.stringify(distinctGithubContributors));
 
 for (const { projectId, tokenName } of sources.crowdin) {
   crowdinContributors.push(...(await fetchCrowdinMembers(projectId, tokenName)));
 }
-const distinctCrowdinContributors = crowdinContributors.filter(
-  distinctBy((contributor) => contributor.username)
-);
-await fs.writeFile(
-  './static/data/translation-contributions.json',
-  JSON.stringify(distinctCrowdinContributors)
-);
+const distinctCrowdinContributors = crowdinContributors.filter(distinctBy((contributor) => contributor.username));
+await fs.writeFile("./static/data/translation-contributions.json", JSON.stringify(distinctCrowdinContributors));
diff --git a/apps/docs/scripts/verify-algolia-search.mjs b/apps/docs/scripts/verify-algolia-search.mjs
index 4aa5e30e7..93e83baa8 100644
--- a/apps/docs/scripts/verify-algolia-search.mjs
+++ b/apps/docs/scripts/verify-algolia-search.mjs
@@ -1,41 +1,32 @@
-const APP_ID = 'N69WSPZTID';
-const API_KEY = 'b2b00f4ed8ca3dc87b5d211c55121416';
-const DOCSEARCH_INDEX = 'Docusaurus';
-const MARKDOWN_INDEX = 'markdown';
+const APP_ID = "N69WSPZTID";
+const API_KEY = "b2b00f4ed8ca3dc87b5d211c55121416";
+const DOCSEARCH_INDEX = "Docusaurus";
+const MARKDOWN_INDEX = "markdown";
 const MIN_DOCSEARCH_HITS = 100;
 const MIN_MARKDOWN_HITS = 10;
 
-const DOCSEARCH_FACETS = [
-  'docusaurus_tag',
-  'language',
-  'lang',
-  'version',
-  'type',
-];
+const DOCSEARCH_FACETS = ["docusaurus_tag", "language", "lang", "version", "type"];
 
 const SEARCH_CASES = [
-  { term: 'docker', minHits: 1 },
-  { term: 'coolify', minHits: 1 },
-  { term: 'jellyseerr', minHits: 1 },
-  { term: 'keyboard shortcuts', minHits: 1 },
-  { term: 'version 0.12', minHits: 1 },
+  { term: "docker", minHits: 1 },
+  { term: "coolify", minHits: 1 },
+  { term: "jellyseerr", minHits: 1 },
+  { term: "keyboard shortcuts", minHits: 1 },
+  { term: "version 0.12", minHits: 1 },
 ];
 
 const STALE_URL_PATTERN = /\/docs\/(next|\d+(?:\.\d+)+)\//;
 
 async function algoliaQuery(index, body) {
-  const response = await fetch(
-    `https://${APP_ID}-dsn.algolia.net/1/indexes/${index}/query`,
-    {
-      method: 'POST',
-      headers: {
-        'X-Algolia-Application-Id': APP_ID,
-        'X-Algolia-API-Key': API_KEY,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(body),
+  const response = await fetch(`https://${APP_ID}-dsn.algolia.net/1/indexes/${index}/query`, {
+    method: "POST",
+    headers: {
+      "X-Algolia-Application-Id": APP_ID,
+      "X-Algolia-API-Key": API_KEY,
+      "Content-Type": "application/json",
     },
-  );
+    body: JSON.stringify(body),
+  });
 
   if (!response.ok) {
     throw new Error(`Algolia query on "${index}" failed: HTTP ${response.status}`);
@@ -45,7 +36,7 @@ async function algoliaQuery(index, body) {
 }
 
 function reportLine(ok, message) {
-  const prefix = ok ? 'OK' : 'FAIL';
+  const prefix = ok ? "OK" : "FAIL";
   console.log(`${prefix}: ${message}`);
   return ok;
 }
@@ -54,14 +45,14 @@ async function resolveDocsearchIndex() {
   const candidates = [DOCSEARCH_INDEX, `${DOCSEARCH_INDEX}.tmp`];
 
   for (const index of candidates) {
-    const result = await algoliaQuery(index, { query: '', hitsPerPage: 0 });
+    const result = await algoliaQuery(index, { query: "", hitsPerPage: 0 });
     const hitCount = result.nbHits ?? 0;
     if (hitCount >= MIN_DOCSEARCH_HITS) {
       return { index, hitCount };
     }
   }
 
-  const fallback = await algoliaQuery(DOCSEARCH_INDEX, { query: '', hitsPerPage: 0 });
+  const fallback = await algoliaQuery(DOCSEARCH_INDEX, { query: "", hitsPerPage: 0 });
   return { index: DOCSEARCH_INDEX, hitCount: fallback.nbHits ?? 0 };
 }
 
@@ -69,14 +60,14 @@ async function resolveMarkdownIndex() {
   const candidates = [MARKDOWN_INDEX, `${MARKDOWN_INDEX}.tmp`];
 
   for (const index of candidates) {
-    const result = await algoliaQuery(index, { query: '', hitsPerPage: 0 });
+    const result = await algoliaQuery(index, { query: "", hitsPerPage: 0 });
     const hitCount = result.nbHits ?? 0;
     if (hitCount >= MIN_MARKDOWN_HITS) {
       return { index, hitCount };
     }
   }
 
-  const fallback = await algoliaQuery(MARKDOWN_INDEX, { query: '', hitsPerPage: 0 });
+  const fallback = await algoliaQuery(MARKDOWN_INDEX, { query: "", hitsPerPage: 0 });
   return { index: MARKDOWN_INDEX, hitCount: fallback.nbHits ?? 0 };
 }
 
@@ -87,13 +78,13 @@ async function verifyDocsearchIndex(index, hitCount) {
   );
 
   const sample = await algoliaQuery(index, {
-    query: 'docker',
+    query: "docker",
     hitsPerPage: 1,
     attributesToRetrieve: DOCSEARCH_FACETS,
   });
 
   const record = sample.hits?.[0] ?? {};
-  const recordFields = ['docusaurus_tag', 'language', 'lang', 'version', 'type'];
+  const recordFields = ["docusaurus_tag", "language", "lang", "version", "type"];
   for (const field of recordFields) {
     const present = record[field] !== undefined && record[field] !== null;
     ok = reportLine(present, `records include "${field}"`) && ok;
@@ -103,7 +94,7 @@ async function verifyDocsearchIndex(index, hitCount) {
     const result = await algoliaQuery(index, {
       query: searchCase.term,
       hitsPerPage: 5,
-      attributesToRetrieve: ['url'],
+      attributesToRetrieve: ["url"],
     });
 
     const caseHits = result.nbHits ?? 0;
@@ -113,9 +104,7 @@ async function verifyDocsearchIndex(index, hitCount) {
         `"${searchCase.term}" returns ${caseHits} hits (need >= ${searchCase.minHits})`,
       ) && ok;
 
-    const staleUrls = (result.hits ?? [])
-      .map((hit) => hit.url)
-      .filter((url) => STALE_URL_PATTERN.test(url));
+    const staleUrls = (result.hits ?? []).map((hit) => hit.url).filter((url) => STALE_URL_PATTERN.test(url));
 
     ok =
       reportLine(
@@ -134,51 +123,39 @@ async function verifyMarkdownIndex(index, hitCount) {
   );
 
   const coolify = await algoliaQuery(index, {
-    query: 'coolify',
+    query: "coolify",
     hitsPerPage: 3,
-    attributesToRetrieve: ['url', 'title', 'heading', 'text'],
+    attributesToRetrieve: ["url", "title", "heading", "text"],
   });
 
   ok =
-    reportLine(
-      (coolify.nbHits ?? 0) >= 1,
-      `markdown index "${index}" returns coolify (${coolify.nbHits ?? 0} hits)`,
-    ) && ok;
+    reportLine((coolify.nbHits ?? 0) >= 1, `markdown index "${index}" returns coolify (${coolify.nbHits ?? 0} hits)`) &&
+    ok;
 
   const sample = coolify.hits?.[0];
-  ok =
-    reportLine(
-      Boolean(sample?.text?.length),
-      `markdown records include chunked text content`,
-    ) && ok;
+  ok = reportLine(Boolean(sample?.text?.length), `markdown records include chunked text content`) && ok;
 
   return ok;
 }
 
 async function main() {
-  console.log('Verifying Algolia DocSearch + markdown indices...\n');
+  console.log("Verifying Algolia DocSearch + markdown indices...\n");
 
   const docsearch = await resolveDocsearchIndex();
   console.log(`Using DocSearch index: ${docsearch.index}\n`);
-  const docsearchOk = await verifyDocsearchIndex(
-    docsearch.index,
-    docsearch.hitCount,
-  );
+  const docsearchOk = await verifyDocsearchIndex(docsearch.index, docsearch.hitCount);
 
-  console.log('');
+  console.log("");
   const markdown = await resolveMarkdownIndex();
   console.log(`Using markdown index: ${markdown.index}\n`);
-  const markdownOk = await verifyMarkdownIndex(
-    markdown.index,
-    markdown.hitCount,
-  );
+  const markdownOk = await verifyMarkdownIndex(markdown.index, markdown.hitCount);
 
   const allOk = docsearchOk && markdownOk;
-  console.log('');
+  console.log("");
   console.log(
     allOk
-      ? 'All checks passed.'
-      : 'Some checks failed — ensure the crawler config in docsearch.config.js is applied and a full recrawl has finished.',
+      ? "All checks passed."
+      : "Some checks failed — ensure the crawler config in docsearch.config.js is applied and a full recrawl has finished.",
   );
   process.exit(allOk ? 0 : 1);
 }
diff --git a/apps/docs/src/components/custom-jsx-component-reference.module.css b/apps/docs/src/components/custom-jsx-component-reference.module.css
new file mode 100644
index 000000000..66fe6bff0
--- /dev/null
+++ b/apps/docs/src/components/custom-jsx-component-reference.module.css
@@ -0,0 +1,451 @@
+.explorer {
+  --catalog-border: color-mix(in srgb, var(--ifm-color-emphasis-500) 42%, transparent);
+  --catalog-surface: color-mix(in srgb, var(--ifm-background-surface-color) 90%, var(--ifm-color-primary) 10%);
+  border: 1px solid var(--catalog-border);
+  border-radius: 18px;
+  margin: 1.5rem 0 2rem;
+  overflow: hidden;
+}
+
+.header {
+  align-items: flex-start;
+  background: linear-gradient(135deg, color-mix(in srgb, var(--ifm-color-primary) 13%, transparent), transparent 65%);
+  display: flex;
+  gap: 1.5rem;
+  justify-content: space-between;
+  padding: 1.4rem;
+}
+
+.eyebrow {
+  color: var(--ifm-color-primary);
+  font-size: 0.72rem;
+  font-weight: 750;
+  letter-spacing: 0.09em;
+  margin: 0 0 0.35rem;
+  text-transform: uppercase;
+}
+
+.title {
+  font-size: clamp(1.25rem, 3vw, 1.65rem);
+  margin: 0;
+}
+
+.summary {
+  color: var(--ifm-color-emphasis-700);
+  margin: 0.45rem 0 0;
+  max-width: 68ch;
+}
+
+.rawLink,
+.expandButton,
+.showMoreButton,
+.resetButton {
+  align-items: center;
+  border-radius: 9px;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-weight: 650;
+  justify-content: center;
+}
+
+.rawLink,
+.expandButton,
+.showMoreButton {
+  background: var(--ifm-color-primary);
+  border: 1px solid var(--ifm-color-primary);
+  color: var(--ifm-color-white);
+  padding: 0.58rem 0.85rem;
+  text-decoration: none;
+}
+
+.rawLink {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.rawLink:hover,
+.expandButton:hover,
+.showMoreButton:hover {
+  background: var(--ifm-color-primary-dark);
+  color: var(--ifm-color-white);
+  text-decoration: none;
+}
+
+.versions {
+  border-bottom: 1px solid var(--catalog-border);
+  border-top: 1px solid var(--catalog-border);
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: 0;
+}
+
+.globalProps {
+  align-items: center;
+  border-bottom: 1px solid var(--catalog-border);
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 1fr) auto;
+  padding: 1rem 1.4rem;
+  scroll-margin-top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+.globalProps h4,
+.globalProps p {
+  margin: 0;
+}
+
+.globalProps p {
+  color: var(--ifm-color-emphasis-700);
+  font-size: 0.86rem;
+  margin-top: 0.2rem;
+}
+
+.globalPropsTable {
+  grid-column: 1 / -1;
+}
+
+.versions div {
+  padding: 0.75rem 1.4rem;
+}
+
+.versions div + div {
+  border-left: 1px solid var(--catalog-border);
+}
+
+.versions dt {
+  color: var(--ifm-color-emphasis-700);
+  font-size: 0.72rem;
+  font-weight: 650;
+  text-transform: uppercase;
+}
+
+.versions dd {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.86rem;
+  margin: 0.12rem 0 0;
+}
+
+.filters {
+  align-items: end;
+  background: var(--catalog-surface);
+  display: grid;
+  gap: 0.8rem;
+  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(130px, 1fr));
+  padding: 1.15rem 1.4rem;
+}
+
+.filters label:not(.checkboxField) {
+  display: grid;
+  gap: 0.3rem;
+}
+
+.filters label > span {
+  color: var(--ifm-color-emphasis-700);
+  font-size: 0.76rem;
+  font-weight: 700;
+}
+
+.filters input[type="search"],
+.filters select {
+  background: var(--ifm-background-color);
+  border: 1px solid var(--catalog-border);
+  border-radius: 9px;
+  color: var(--ifm-font-color-base);
+  font: inherit;
+  min-height: 42px;
+  padding: 0.55rem 0.68rem;
+  width: 100%;
+}
+
+.filters input:focus-visible,
+.filters select:focus-visible,
+.expandButton:focus-visible,
+.showMoreButton:focus-visible,
+.resetButton:focus-visible,
+.anchorLink:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--ifm-color-primary) 45%, transparent);
+  outline-offset: 2px;
+}
+
+.checkboxField {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+  grid-column: 1 / -1;
+}
+
+.checkboxField input {
+  height: 1rem;
+  margin: 0;
+  width: 1rem;
+}
+
+.resultSummary {
+  align-items: center;
+  border-bottom: 1px solid var(--catalog-border);
+  display: flex;
+  gap: 0.6rem;
+  min-height: 48px;
+  padding: 0.7rem 1.4rem;
+}
+
+.resetButton {
+  background: transparent;
+  border: 0;
+  color: var(--ifm-color-primary);
+  margin-left: auto;
+  padding: 0.35rem;
+}
+
+.componentList {
+  display: grid;
+}
+
+.componentCard {
+  scroll-margin-top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+.componentCard + .componentCard {
+  border-top: 1px solid var(--catalog-border);
+}
+
+.componentHeading {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  padding: 1rem 1.4rem;
+}
+
+.componentNameRow {
+  align-items: baseline;
+  display: flex;
+  gap: 0.45rem;
+}
+
+.componentNameRow h4 {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 1.05rem;
+  margin: 0;
+}
+
+.anchorLink {
+  font-weight: 700;
+  opacity: 0;
+  text-decoration: none;
+}
+
+.componentCard:hover .anchorLink,
+.anchorLink:focus-visible {
+  opacity: 1;
+}
+
+.badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.38rem;
+  margin-top: 0.45rem;
+}
+
+.badges span {
+  background: var(--ifm-color-emphasis-200);
+  border-radius: 999px;
+  color: var(--ifm-color-emphasis-800);
+  font-size: 0.7rem;
+  padding: 0.2rem 0.48rem;
+}
+
+.badges span[data-safety="allowed"] {
+  background: color-mix(in srgb, #2f9e44 18%, transparent);
+  color: color-mix(in srgb, #2f9e44 78%, var(--ifm-font-color-base));
+}
+
+.badges span[data-safety="wrapped"] {
+  background: color-mix(in srgb, var(--ifm-color-primary) 18%, transparent);
+  color: var(--ifm-color-primary-darkest);
+}
+
+.badges span[data-safety="denied"] {
+  background: color-mix(in srgb, #e03131 18%, transparent);
+  color: color-mix(in srgb, #e03131 78%, var(--ifm-font-color-base));
+}
+
+.expandButton {
+  background: transparent;
+  color: var(--ifm-color-primary);
+  flex: 0 0 auto;
+  padding: 0.42rem 0.7rem;
+}
+
+.expandButton:hover {
+  background: color-mix(in srgb, var(--ifm-color-primary) 12%, transparent);
+  color: var(--ifm-color-primary-dark);
+}
+
+.description,
+.deniedReason {
+  color: var(--ifm-color-emphasis-700);
+  margin: -0.45rem 1.4rem 1rem;
+}
+
+.deniedReason {
+  color: #c92a2a;
+}
+
+.details {
+  background: var(--catalog-surface);
+  border-top: 1px solid var(--catalog-border);
+  padding: 1.25rem 1.4rem;
+}
+
+.details h5 {
+  font-size: 0.9rem;
+  margin: 0 0 0.6rem;
+}
+
+.detailsGrid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
+  margin-bottom: 1.2rem;
+}
+
+.detailsGrid > section {
+  background: var(--ifm-background-color);
+  border: 1px solid var(--catalog-border);
+  border-radius: 12px;
+  min-width: 0;
+  padding: 0.9rem;
+}
+
+.detailsGrid p:last-of-type {
+  margin-bottom: 0.6rem;
+}
+
+.a11yList {
+  font-size: 0.86rem;
+  margin: 0 0 0.7rem;
+  padding-left: 1.1rem;
+}
+
+.tableScroll {
+  border: 1px solid var(--catalog-border);
+  border-radius: 10px;
+  max-height: 480px;
+  overflow: auto;
+}
+
+.propsTable {
+  display: table;
+  font-size: 0.78rem;
+  margin: 0;
+  width: 100%;
+}
+
+.propsTable th {
+  background: var(--ifm-background-color);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.propsTable th,
+.propsTable td {
+  min-width: 96px;
+  padding: 0.58rem;
+  vertical-align: top;
+}
+
+.propsTable td:nth-child(2) {
+  max-width: 340px;
+  min-width: 190px;
+}
+
+.type {
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.muted {
+  color: var(--ifm-color-emphasis-600);
+}
+
+.rawComponent {
+  margin-top: 1rem;
+}
+
+.rawComponent summary {
+  color: var(--ifm-color-primary);
+  cursor: pointer;
+  font-weight: 650;
+}
+
+.rawComponent > div {
+  margin-top: 0.6rem;
+}
+
+.showMoreButton {
+  display: flex;
+  margin: 1.1rem auto;
+}
+
+.loading,
+.error,
+.empty {
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 12px;
+  margin: 1rem 0;
+  padding: 1rem;
+}
+
+.empty {
+  border: 0;
+  margin: 0;
+  text-align: center;
+}
+
+.error {
+  border-color: color-mix(in srgb, #e03131 58%, transparent);
+}
+
+@media (max-width: 996px) {
+  .filters {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .searchField {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 650px) {
+  .header,
+  .componentHeading {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .rawLink,
+  .expandButton {
+    align-self: flex-start;
+  }
+
+  .versions,
+  .filters,
+  .detailsGrid,
+  .globalProps {
+    grid-template-columns: 1fr;
+  }
+
+  .versions div + div {
+    border-left: 0;
+    border-top: 1px solid var(--catalog-border);
+  }
+
+  .searchField,
+  .checkboxField {
+    grid-column: auto;
+  }
+}
diff --git a/apps/docs/src/components/custom-jsx-component-reference.tsx b/apps/docs/src/components/custom-jsx-component-reference.tsx
new file mode 100644
index 000000000..23c028787
--- /dev/null
+++ b/apps/docs/src/components/custom-jsx-component-reference.tsx
@@ -0,0 +1,497 @@
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import { useEffect, useMemo, useState } from "react";
+
+import { buildCustomJsxComponentUsageExample } from "@homarr/custom-widgets/catalog-example";
+import type {
+  CustomJsxAuthoringCatalog,
+  CustomJsxComponentApi,
+  CustomJsxPropDescriptor,
+} from "@homarr/custom-widgets/catalog";
+
+import { CustomWidgetCodeExample } from "./custom-widget-code";
+import styles from "./custom-jsx-component-reference.module.css";
+
+type ComponentCatalog = CustomJsxAuthoringCatalog;
+type CatalogComponent = CustomJsxComponentApi;
+type CatalogProp = CustomJsxPropDescriptor;
+
+const PAGE_SIZE = 40;
+
+export function CustomJsxComponentReference() {
+  return (
+    <BrowserOnly fallback={<ComponentReferenceFallback />}>{() => <CustomJsxComponentReferenceClient />}</BrowserOnly>
+  );
+}
+
+function ComponentReferenceFallback() {
+  return (
+    <div className={styles.loading} aria-busy="true">
+      Loading the Custom JSX component catalog…
+    </div>
+  );
+}
+
+function CustomJsxComponentReferenceClient() {
+  const catalogUrl = useBaseUrl("/custom-widgets/component-catalog-v1.json");
+  const [catalog, setCatalog] = useState<ComponentCatalog | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [query, setQuery] = useState("");
+  const [packageFilter, setPackageFilter] = useState("all");
+  const [categoryFilter, setCategoryFilter] = useState("all");
+  const [safetyFilter, setSafetyFilter] = useState("available");
+  const [bindableOnly, setBindableOnly] = useState(false);
+  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
+  const [expanded, setExpanded] = useState<ReadonlySet<string>>(() => new Set());
+  const [showGlobalProps, setShowGlobalProps] = useState(false);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    setLoadError(null);
+
+    void fetch(catalogUrl, { signal: controller.signal })
+      .then(async (response) => {
+        if (!response.ok) throw new Error(`The catalog request returned HTTP ${response.status}.`);
+        return (await response.json()) as ComponentCatalog;
+      })
+      .then((value) => {
+        if (!Array.isArray(value.components) || !Array.isArray(value.types) || !Array.isArray(value.globalProps)) {
+          throw new Error("The catalog response has an unsupported shape.");
+        }
+        setCatalog(value);
+      })
+      .catch((error: unknown) => {
+        if (controller.signal.aborted) return;
+        setLoadError(error instanceof Error ? error.message : "The component catalog could not be loaded.");
+      });
+
+    return () => controller.abort();
+  }, [catalogUrl]);
+
+  const categories = useMemo(
+    () => [...new Set(catalog?.components.map((component) => component.category) ?? [])].sort(),
+    [catalog],
+  );
+  const packages = useMemo(
+    () => [...new Set(catalog?.components.map((component) => component.package) ?? [])].sort(),
+    [catalog],
+  );
+  const filteredComponents = useMemo(() => {
+    if (!catalog) return [];
+    const normalizedQuery = query.trim().toLocaleLowerCase();
+    return catalog.components.filter((component) => {
+      if (packageFilter !== "all" && component.package !== packageFilter) return false;
+      if (categoryFilter !== "all" && component.category !== categoryFilter) return false;
+      if (safetyFilter === "available" && component.safety === "denied") return false;
+      if (safetyFilter !== "all" && safetyFilter !== "available" && component.safety !== safetyFilter) return false;
+      if (bindableOnly && !component.bind) return false;
+      if (!normalizedQuery) return true;
+
+      return [
+        component.name,
+        component.package,
+        component.category,
+        component.description,
+        component.deniedReason,
+        ...component.subcomponents,
+        ...component.props.map((prop) => prop.name),
+      ].some((value) => value?.toLocaleLowerCase().includes(normalizedQuery));
+    });
+  }, [bindableOnly, catalog, categoryFilter, packageFilter, query, safetyFilter]);
+  const visibleComponents = filteredComponents.slice(0, visibleCount);
+
+  useEffect(() => {
+    setVisibleCount(PAGE_SIZE);
+  }, [bindableOnly, categoryFilter, packageFilter, query, safetyFilter]);
+
+  useEffect(() => {
+    if (!catalog) return;
+
+    const revealHashTarget = () => {
+      const hash = decodeLocationHash(window.location.hash);
+      const component = catalog.components.find((entry) => componentAnchor(entry.name) === hash);
+      if (!component) return;
+
+      if (!document.getElementById(hash)) {
+        setQuery(component.name);
+        setPackageFilter("all");
+        setCategoryFilter("all");
+        setSafetyFilter(component.safety === "denied" ? "all" : "available");
+        setBindableOnly(false);
+        setVisibleCount(PAGE_SIZE);
+      }
+      setExpanded((current) => new Set([...current, component.name]));
+      window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => document.getElementById(hash)?.scrollIntoView({ block: "start" }));
+      });
+    };
+
+    revealHashTarget();
+    window.addEventListener("hashchange", revealHashTarget);
+    return () => window.removeEventListener("hashchange", revealHashTarget);
+  }, [catalog]);
+
+  if (loadError) {
+    return (
+      <div className={styles.error} role="alert">
+        <strong>Component catalog unavailable.</strong> {loadError} <a href={catalogUrl}>Open the raw catalog</a> to
+        inspect the generated data directly.
+      </div>
+    );
+  }
+
+  if (!catalog) return <ComponentReferenceFallback />;
+
+  return (
+    <section className={styles.explorer} aria-label="Custom JSX component catalog">
+      <header className={styles.header}>
+        <div>
+          <p className={styles.eyebrow}>Release-matched static catalog</p>
+          <h3 className={styles.title}>Explore {catalog.components.length} Custom JSX components</h3>
+          <p className={styles.summary}>
+            This browser reads the same versioned JSON artifact used by offline authoring. It never imports or executes
+            the listed component objects.
+          </p>
+        </div>
+        <a className={styles.rawLink} href={catalogUrl} target="_blank" rel="noreferrer">
+          Open raw JSON
+        </a>
+      </header>
+
+      <dl className={styles.versions}>
+        <div>
+          <dt>Catalog schema</dt>
+          <dd>v{catalog.schemaVersion}</dd>
+        </div>
+        <div>
+          <dt>Custom Widget</dt>
+          <dd>{catalog.customWidgetVersion}</dd>
+        </div>
+        <div>
+          <dt>Mantine</dt>
+          <dd>{catalog.mantineVersion}</dd>
+        </div>
+        <div>
+          <dt>Blocked capabilities</dt>
+          <dd>{catalog.blockedCapabilities.length}</dd>
+        </div>
+      </dl>
+
+      <section className={styles.globalProps} id="custom-jsx-global-props">
+        <div>
+          <h4>Shared serializable props</h4>
+          <p>
+            Every available component also receives these {catalog.globalProps.length} generated global, ARIA, data, and
+            safe style props. Component cards below list only their component-specific additions.
+          </p>
+        </div>
+        <button
+          type="button"
+          className={styles.expandButton}
+          aria-expanded={showGlobalProps}
+          aria-controls="custom-jsx-global-props-table"
+          onClick={() => setShowGlobalProps((current) => !current)}
+        >
+          {showGlobalProps ? "Hide global props" : "View global props"}
+        </button>
+        {showGlobalProps && (
+          <div className={styles.globalPropsTable} id="custom-jsx-global-props-table">
+            <PropTable props={catalog.globalProps} types={catalog.types} />
+          </div>
+        )}
+      </section>
+
+      <div className={styles.filters}>
+        <label className={styles.searchField}>
+          <span>Search names, props, and subcomponents</span>
+          <input
+            type="search"
+            value={query}
+            onChange={(event) => setQuery(event.currentTarget.value)}
+            placeholder="For example: TextInput, bind, chart…"
+          />
+        </label>
+        <label>
+          <span>Package</span>
+          <select value={packageFilter} onChange={(event) => setPackageFilter(event.currentTarget.value)}>
+            <option value="all">All packages</option>
+            {packages.map((packageName) => (
+              <option key={packageName} value={packageName}>
+                {packageName}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label>
+          <span>Category</span>
+          <select value={categoryFilter} onChange={(event) => setCategoryFilter(event.currentTarget.value)}>
+            <option value="all">All categories</option>
+            {categories.map((category) => (
+              <option key={category} value={category}>
+                {humanize(category)}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label>
+          <span>Availability</span>
+          <select value={safetyFilter} onChange={(event) => setSafetyFilter(event.currentTarget.value)}>
+            <option value="available">Available only</option>
+            <option value="all">Available and denied</option>
+            <option value="allowed">Allowed only</option>
+            <option value="wrapped">Wrapped only</option>
+            <option value="denied">Denied only</option>
+          </select>
+        </label>
+        <label className={styles.checkboxField}>
+          <input
+            type="checkbox"
+            checked={bindableOnly}
+            onChange={(event) => setBindableOnly(event.currentTarget.checked)}
+          />
+          Supports temporary <code>bind</code>
+        </label>
+      </div>
+
+      <div className={styles.resultSummary} aria-live="polite">
+        <strong>{filteredComponents.length}</strong> matching component{filteredComponents.length === 1 ? "" : "s"}
+        {(query ||
+          packageFilter !== "all" ||
+          categoryFilter !== "all" ||
+          safetyFilter !== "available" ||
+          bindableOnly) && (
+          <button
+            type="button"
+            className={styles.resetButton}
+            onClick={() => {
+              setQuery("");
+              setPackageFilter("all");
+              setCategoryFilter("all");
+              setSafetyFilter("available");
+              setBindableOnly(false);
+            }}
+          >
+            Reset filters
+          </button>
+        )}
+      </div>
+
+      {filteredComponents.length === 0 ? (
+        <div className={styles.empty}>No component matches these filters.</div>
+      ) : (
+        <div className={styles.componentList}>
+          {visibleComponents.map((component) => {
+            const isExpanded = expanded.has(component.name);
+            return (
+              <article className={styles.componentCard} id={componentAnchor(component.name)} key={component.name}>
+                <div className={styles.componentHeading}>
+                  <div>
+                    <div className={styles.componentNameRow}>
+                      <h4>{component.name}</h4>
+                      <a
+                        className={styles.anchorLink}
+                        href={`#${componentAnchor(component.name)}`}
+                        aria-label={`Link to ${component.name}`}
+                      >
+                        #
+                      </a>
+                    </div>
+                    <div className={styles.badges}>
+                      <span>{component.package}</span>
+                      <span>{humanize(component.category)}</span>
+                      <span data-safety={component.safety}>{component.safety}</span>
+                      {component.bind && <span>bind: {component.bind.type}</span>}
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    className={styles.expandButton}
+                    aria-expanded={isExpanded}
+                    aria-controls={`${componentAnchor(component.name)}-details`}
+                    onClick={() => {
+                      setExpanded((current) => {
+                        const next = new Set(current);
+                        if (next.has(component.name)) next.delete(component.name);
+                        else next.add(component.name);
+                        return next;
+                      });
+                    }}
+                  >
+                    {isExpanded ? "Hide API" : "View API"}
+                  </button>
+                </div>
+                {(component.description || component.deniedReason) && (
+                  <p className={component.safety === "denied" ? styles.deniedReason : styles.description}>
+                    {component.deniedReason ?? component.description}
+                  </p>
+                )}
+
+                {isExpanded && (
+                  <ComponentDetails
+                    id={`${componentAnchor(component.name)}-details`}
+                    component={component}
+                    types={catalog.types}
+                  />
+                )}
+              </article>
+            );
+          })}
+        </div>
+      )}
+
+      {visibleCount < filteredComponents.length && (
+        <button
+          type="button"
+          className={styles.showMoreButton}
+          onClick={() => setVisibleCount((current) => current + PAGE_SIZE)}
+        >
+          Show {Math.min(PAGE_SIZE, filteredComponents.length - visibleCount)} more
+        </button>
+      )}
+    </section>
+  );
+}
+
+function decodeLocationHash(hash: string) {
+  const value = hash.slice(1);
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+
+function ComponentDetails({ id, component, types }: { id: string; component: CatalogComponent; types: string[] }) {
+  return (
+    <div className={styles.details} id={id}>
+      <div className={styles.detailsGrid}>
+        <section>
+          <CustomWidgetCodeExample
+            id={`${componentAnchor(component.name)}-usage`}
+            label="Usage example"
+            language="jsx"
+            code={buildCustomJsxComponentUsageExample(component, { types })}
+            height="180px"
+          />
+        </section>
+
+        <section>
+          <h5>Component contract</h5>
+          {component.bind ? (
+            <p>
+              <code>bind</code> stores a temporary <code>{component.bind.type}</code> input. Initialize it with{" "}
+              <code>{component.bind.initialProp}</code>.
+            </p>
+          ) : (
+            <p>This component does not expose a temporary-input adapter.</p>
+          )}
+          {component.subcomponents.length > 0 && (
+            <p>
+              <strong>Subcomponents:</strong>{" "}
+              {component.subcomponents.map((name, index) => (
+                <span key={name}>
+                  {index > 0 && ", "}
+                  <code>{name}</code>
+                </span>
+              ))}
+            </p>
+          )}
+          {component.blockedProps.length > 0 && (
+            <ul className={styles.a11yList}>
+              {component.blockedProps.map((prop) => (
+                <li key={prop.name}>
+                  <code>{prop.name}</code> is blocked: {prop.reason}
+                </li>
+              ))}
+            </ul>
+          )}
+          {component.accessibilityRequirements.length > 0 && (
+            <ul className={styles.a11yList}>
+              {component.accessibilityRequirements.map((requirement) => (
+                <li key={requirement}>{requirement}</li>
+              ))}
+            </ul>
+          )}
+          <a href={component.documentationUrl} target="_blank" rel="noreferrer">
+            Open upstream documentation
+          </a>
+        </section>
+      </div>
+
+      <section>
+        <h5>
+          Component props <span className={styles.muted}>({component.props.length})</span>
+        </h5>
+        {component.props.length === 0 ? (
+          <p>No component-specific props are exposed.</p>
+        ) : (
+          <PropTable props={component.props} types={types} />
+        )}
+      </section>
+
+      <details className={styles.rawComponent}>
+        <summary>Raw component JSON</summary>
+        <CustomWidgetCodeExample
+          id={`${componentAnchor(component.name)}-json`}
+          label="Component JSON"
+          code={JSON.stringify(component, null, 2)}
+          height="320px"
+        />
+      </details>
+    </div>
+  );
+}
+
+function PropTable({ props, types }: { props: CatalogProp[]; types: string[] }) {
+  return (
+    <div className={styles.tableScroll}>
+      <table className={styles.propsTable}>
+        <thead>
+          <tr>
+            <th>Prop</th>
+            <th>Type</th>
+            <th>Required</th>
+            <th>Known values</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.map((prop) => (
+            <tr key={prop.name}>
+              <td>
+                <code>{prop.name}</code>
+              </td>
+              <td>
+                <code className={styles.type}>{types[prop.typeRef] ?? "unknown"}</code>
+              </td>
+              <td>{prop.required ? <strong>Yes</strong> : "No"}</td>
+              <td>
+                {prop.literalValues?.length ? (
+                  <code>{prop.literalValues.map(formatLiteral).join(" | ")}</code>
+                ) : (
+                  <span className={styles.muted}>—</span>
+                )}
+              </td>
+              <td>{prop.description ?? <span className={styles.muted}>—</span>}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function componentAnchor(name: string) {
+  return `custom-jsx-component-${name
+    .replaceAll(".", "-")
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .toLowerCase()}`;
+}
+
+function humanize(value: string) {
+  return value.replaceAll("-", " ").replace(/\b\w/g, (character) => character.toUpperCase());
+}
+
+function formatLiteral(value: string | number | boolean | null) {
+  return typeof value === "string" ? JSON.stringify(value) : String(value);
+}
diff --git a/apps/docs/src/components/custom-widget-code-client.tsx b/apps/docs/src/components/custom-widget-code-client.tsx
new file mode 100644
index 000000000..ff4829738
--- /dev/null
+++ b/apps/docs/src/components/custom-widget-code-client.tsx
@@ -0,0 +1,114 @@
+import { useState } from "react";
+import { useColorMode } from "@docusaurus/theme-common";
+import { MantineProvider, Select, Stack, Text } from "@mantine/core";
+/* oxlint-disable import/no-unassigned-import -- Mantine component styles intentionally load for side effects. */
+import "@mantine/core/styles.layer.css";
+/* oxlint-enable import/no-unassigned-import */
+
+import {
+  BUNDLED_CUSTOM_WIDGETS,
+  CUSTOM_WIDGET_OPTIONS_EXAMPLES,
+  CUSTOM_WIDGET_REQUEST_EXAMPLES,
+} from "@homarr/custom-widgets/core";
+import type { CustomWidgetEditorMessages } from "@homarr/custom-widgets/workbench";
+import { CustomWidgetCodeEditor, ReadOnlyCustomWidgetCode } from "@homarr/custom-widgets/workbench";
+
+import type {
+  CanonicalCustomWidgetExampleProps,
+  CustomWidgetCodeExampleProps,
+  CustomWidgetCodeInputProps,
+} from "./custom-widget-code";
+
+const messages: CustomWidgetEditorMessages = {
+  languageJsx: "JSX",
+  languageJson: "JSON",
+  undo: "Undo",
+  redo: "Redo",
+  components: "Components",
+  componentSearch: "Search components",
+  componentEmpty: "No matching components",
+  componentCount: (count) => `${count} components`,
+  insertStarter: "Insert starter",
+  format: "Format",
+  copy: "Copy",
+  copied: "Copied",
+  schema: "Schema",
+  schemaTab: "JSON Schema",
+  minimalTab: "Minimal example",
+  fullTab: "Full example",
+  errors: (count) => `${count} errors`,
+  warnings: (count) => `${count} warnings`,
+  ready: "Read-only example",
+  position: ({ line, column }) => `Ln ${line}, Col ${column}`,
+  characters: (count, limit) => (limit ? `${count} / ${limit}` : `${count} characters`),
+  diagnosticsTitle: "Diagnostics",
+  diagnostic: (diagnostic) => diagnostic.value ?? diagnostic.code,
+};
+const editableMessages: CustomWidgetEditorMessages = { ...messages, ready: "Ready" };
+
+export function CanonicalCustomWidgetExampleClient({ id, label, example, height }: CanonicalCustomWidgetExampleProps) {
+  const value = example === "requests" ? CUSTOM_WIDGET_REQUEST_EXAMPLES.full : CUSTOM_WIDGET_OPTIONS_EXAMPLES.full;
+
+  return <CustomWidgetCodeExampleClient id={id} label={label} code={JSON.stringify(value, null, 2)} height={height} />;
+}
+
+export function CustomWidgetCodeExampleClient(props: CustomWidgetCodeExampleProps) {
+  const { colorMode } = useColorMode();
+
+  return (
+    <MantineProvider forceColorScheme={colorMode}>
+      <ReadOnlyCustomWidgetCode
+        id={props.id}
+        label={props.label}
+        language={props.language ?? "json"}
+        value={props.code}
+        messages={messages}
+        height={props.height}
+      />
+    </MantineProvider>
+  );
+}
+
+export function CustomWidgetCodeInputClient(props: CustomWidgetCodeInputProps) {
+  const { colorMode } = useColorMode();
+
+  return (
+    <MantineProvider forceColorScheme={colorMode}>
+      <CustomWidgetCodeEditor {...props} messages={editableMessages} />
+    </MantineProvider>
+  );
+}
+
+export function BundledCustomWidgetGalleryClient() {
+  const { colorMode } = useColorMode();
+  const [selectedId, setSelectedId] = useState(BUNDLED_CUSTOM_WIDGETS[0]?.id ?? null);
+  const selected = BUNDLED_CUSTOM_WIDGETS.find(({ id }) => id === selectedId) ?? BUNDLED_CUSTOM_WIDGETS[0];
+  if (!selected) return null;
+
+  return (
+    <MantineProvider forceColorScheme={colorMode}>
+      <Stack gap="md">
+        <Select
+          label="Bundled widget"
+          data={BUNDLED_CUSTOM_WIDGETS.map(({ id, widget }) => ({ value: id, label: widget.name }))}
+          value={selected.id}
+          onChange={(value) => {
+            if (value) setSelectedId(value);
+          }}
+          allowDeselect={false}
+        />
+        <Text size="sm" c="dimmed">
+          {selected.widget.description}
+        </Text>
+        <ReadOnlyCustomWidgetCode
+          id={`${selected.id}-manifest`}
+          label="Complete widget.json"
+          language="json"
+          value={JSON.stringify(selected.widget, null, 2)}
+          messages={messages}
+          height="680px"
+        />
+      </Stack>
+    </MantineProvider>
+  );
+}
diff --git a/apps/docs/src/components/custom-widget-code.tsx b/apps/docs/src/components/custom-widget-code.tsx
new file mode 100644
index 000000000..57777bbe7
--- /dev/null
+++ b/apps/docs/src/components/custom-widget-code.tsx
@@ -0,0 +1,82 @@
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+import {
+  BundledCustomWidgetGalleryClient,
+  CanonicalCustomWidgetExampleClient,
+  CustomWidgetCodeInputClient,
+  CustomWidgetCodeExampleClient,
+} from "./custom-widget-code-client";
+
+export interface CustomWidgetCodeExampleProps {
+  id: string;
+  label: string;
+  code: string;
+  language?: "json" | "jsx";
+  height?: string;
+}
+
+export interface CustomWidgetCodeInputProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange(value: string): void;
+  language: "json" | "css";
+  description?: string;
+  placeholder?: string;
+  height?: string;
+  required?: boolean;
+  maxLength?: number;
+}
+
+export interface CanonicalCustomWidgetExampleProps {
+  id: string;
+  label: string;
+  example: "requests" | "options";
+  height?: string;
+}
+
+export function CanonicalCustomWidgetExample(props: CanonicalCustomWidgetExampleProps) {
+  return (
+    <BrowserOnly fallback={<CodeExampleFallback height={props.height} />}>
+      {() => <CanonicalCustomWidgetExampleClient {...props} />}
+    </BrowserOnly>
+  );
+}
+
+export function CustomWidgetCodeExample(props: CustomWidgetCodeExampleProps) {
+  return (
+    <BrowserOnly fallback={<CodeExampleFallback height={props.height} />}>
+      {() => <CustomWidgetCodeExampleClient {...props} />}
+    </BrowserOnly>
+  );
+}
+
+export function CustomWidgetCodeInput(props: CustomWidgetCodeInputProps) {
+  return (
+    <BrowserOnly fallback={<CodeExampleFallback height={props.height} />}>
+      {() => <CustomWidgetCodeInputClient {...props} />}
+    </BrowserOnly>
+  );
+}
+
+export function BundledCustomWidgetGallery() {
+  return (
+    <BrowserOnly fallback={<CodeExampleFallback height="520px" />}>
+      {() => <BundledCustomWidgetGalleryClient />}
+    </BrowserOnly>
+  );
+}
+
+function CodeExampleFallback({ height }: { height?: string }) {
+  return (
+    <div
+      style={{
+        minHeight: height ?? "220px",
+        border: "1px solid var(--ifm-color-emphasis-300)",
+        borderRadius: "var(--ifm-global-radius)",
+        background: "var(--ifm-background-surface-color)",
+      }}
+      aria-busy="true"
+    />
+  );
+}
diff --git a/apps/docs/src/components/pages/home/integrations/available-integrations.module.css b/apps/docs/src/components/pages/home/integrations/available-integrations.module.css
index a9c057d1c..d65f59e95 100644
--- a/apps/docs/src/components/pages/home/integrations/available-integrations.module.css
+++ b/apps/docs/src/components/pages/home/integrations/available-integrations.module.css
@@ -1,20 +1,20 @@
 @keyframes scrolling {
-    0% {
-        transform: translateY(0);
-    }
-    100% {
-        transform: translateY(-50.8%);
-    }
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-50.8%);
+  }
 }
 
 .scrollAnimationContainer {
-    animation: scrolling;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
+  animation: scrolling;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .scrollAnimationContainer {
-        animation: none !important;
-    }
-}
\ No newline at end of file
+  .scrollAnimationContainer {
+    animation: none !important;
+  }
+}
diff --git a/apps/docs/src/components/pages/home/review-list/styles.module.css b/apps/docs/src/components/pages/home/review-list/styles.module.css
index 5cff5a7d2..53f4abaaa 100644
--- a/apps/docs/src/components/pages/home/review-list/styles.module.css
+++ b/apps/docs/src/components/pages/home/review-list/styles.module.css
@@ -4,8 +4,6 @@
   margin-bottom: 50px;
 }
 
-
-
 .communityFeedbackPlaceholderImage {
   display: block;
   margin: 0 auto;
@@ -14,5 +12,3 @@
 .communityFeedbackPlaceholderText {
   text-align: center;
 }
-
-
diff --git a/apps/docs/src/components/ui/accordion.tsx b/apps/docs/src/components/ui/accordion.tsx
new file mode 100644
index 000000000..dd991f9b5
--- /dev/null
+++ b/apps/docs/src/components/ui/accordion.tsx
@@ -0,0 +1,60 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+
+import { cn } from "@/lib/utils";
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return <AccordionPrimitive.Root data-slot="accordion" className={cn("flex w-full flex-col", className)} {...props} />;
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item data-slot="accordion-item" className={cn("not-last:border-b", className)} {...props} />
+  );
+}
+
+function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <IconChevronDown
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <IconChevronUp
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/apps/docs/src/components/ui/alert-dialog.tsx b/apps/docs/src/components/ui/alert-dialog.tsx
new file mode 100644
index 000000000..4cada504c
--- /dev/null
+++ b/apps/docs/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm";
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {
+  return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />;
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};
diff --git a/apps/docs/src/components/ui/alert.tsx b/apps/docs/src/components/ui/alert.tsx
new file mode 100644
index 000000000..5bf519db4
--- /dev/null
+++ b/apps/docs/src/components/ui/alert.tsx
@@ -0,0 +1,40 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-3 [&>svg]:mt-0.5 [&>svg]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-card text-card-foreground",
+        success:
+          "border-emerald-600/30 bg-emerald-500/10 text-emerald-800 dark:border-emerald-400/30 dark:text-emerald-300 [&_[data-slot=alert-description]]:text-emerald-800/85 dark:[&_[data-slot=alert-description]]:text-emerald-300/85",
+        destructive:
+          "border-destructive/30 bg-destructive/10 text-destructive [&_[data-slot=alert-description]]:text-destructive/85",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return <div role="alert" data-slot="alert" className={cn(alertVariants({ variant }), className)} {...props} />;
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="alert-title" className={cn("col-start-2 font-medium leading-none", className)} {...props} />;
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn("col-start-2 text-sm leading-relaxed text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertDescription, AlertTitle };
diff --git a/apps/docs/src/components/ui/aspect-ratio.tsx b/apps/docs/src/components/ui/aspect-ratio.tsx
new file mode 100644
index 000000000..a7285fceb
--- /dev/null
+++ b/apps/docs/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,18 @@
+import { cn } from "@/lib/utils";
+
+function AspectRatio({ ratio, className, ...props }: React.ComponentProps<"div"> & { ratio: number }) {
+  return (
+    <div
+      data-slot="aspect-ratio"
+      style={
+        {
+          "--ratio": ratio,
+        } as React.CSSProperties
+      }
+      className={cn("relative aspect-(--ratio)", className)}
+      {...props}
+    />
+  );
+}
+
+export { AspectRatio };
diff --git a/apps/docs/src/components/ui/attachment.tsx b/apps/docs/src/components/ui/attachment.tsx
new file mode 100644
index 000000000..5c4811cd8
--- /dev/null
+++ b/apps/docs/src/components/ui/attachment.tsx
@@ -0,0 +1,185 @@
+import * as React from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+const attachmentVariants = cva(
+  "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
+  {
+    variants: {
+      size: {
+        default:
+          "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+        xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
+      },
+      orientation: {
+        horizontal: "min-w-40 items-center",
+        vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
+      },
+    },
+  },
+);
+
+function Attachment({
+  className,
+  state = "done",
+  size = "default",
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof attachmentVariants> & {
+    state?: "idle" | "uploading" | "processing" | "error" | "done";
+  }) {
+  return (
+    <div
+      data-slot="attachment"
+      data-state={state}
+      data-size={size}
+      data-orientation={orientation}
+      className={cn(attachmentVariants({ size, orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+const attachmentMediaVariants = cva(
+  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        icon: "",
+        image:
+          "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "icon",
+    },
+  },
+);
+
+function AttachmentMedia({
+  className,
+  variant = "icon",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>) {
+  return (
+    <div
+      data-slot="attachment-media"
+      data-variant={variant}
+      className={cn(attachmentMediaVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AttachmentContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="attachment-content"
+      className={cn(
+        "max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AttachmentTitle({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="attachment-title"
+      className={cn(
+        "block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AttachmentDescription({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="attachment-description"
+      className={cn(
+        "mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80",
+        "max-w-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AttachmentActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="attachment-actions"
+      className={cn(
+        "relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AttachmentAction({ className, variant, size = "icon-xs", ...props }: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="attachment-action"
+      variant={variant ?? "ghost"}
+      size={size}
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+function AttachmentTrigger({ className, render, type, ...props }: useRender.ComponentProps<"button">) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        type: render ? type : (type ?? "button"),
+        className: cn("absolute inset-0 z-10 outline-none", className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "attachment-trigger",
+    },
+  });
+}
+
+function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="attachment-group"
+      className={cn(
+        "flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Attachment,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentContent,
+  AttachmentTitle,
+  AttachmentDescription,
+  AttachmentActions,
+  AttachmentAction,
+  AttachmentTrigger,
+};
diff --git a/apps/docs/src/components/ui/avatar.tsx b/apps/docs/src/components/ui/avatar.tsx
new file mode 100644
index 000000000..562ad20eb
--- /dev/null
+++ b/apps/docs/src/components/ui/avatar.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+
+import { cn } from "@/lib/utils";
+
+function Avatar({ className, ...props }: AvatarPrimitive.Root.Props) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full object-cover", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarFallback, AvatarImage };
diff --git a/apps/docs/src/components/ui/badge.tsx b/apps/docs/src/components/ui/badge.tsx
index 5776a59c3..e1997af40 100644
--- a/apps/docs/src/components/ui/badge.tsx
+++ b/apps/docs/src/components/ui/badge.tsx
@@ -1,13 +1,49 @@
-import { ReactNode } from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
 
-interface BadgeProps {
-  children: ReactNode;
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  });
 }
 
-export const Badge = ({ children }: BadgeProps) => {
-  return (
-    <span className="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap  overflow-hidden border-transparent dark:bg-slate-700 bg-slate-200">
-      {children}
-    </span>
-  );
-};
+export { Badge, badgeVariants };
diff --git a/apps/docs/src/components/ui/breadcrumb.tsx b/apps/docs/src/components/ui/breadcrumb.tsx
new file mode 100644
index 000000000..fe56c9676
--- /dev/null
+++ b/apps/docs/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { cn } from "@/lib/utils";
+import { IconChevronRight, IconDots } from "@tabler/icons-react";
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1", className)} {...props} />;
+}
+
+function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn("transition-colors hover:text-foreground", className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link",
+    },
+  });
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <IconChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-5 items-center justify-center [&>svg]:size-4", className)}
+      {...props}
+    >
+      <IconDots />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};
diff --git a/apps/docs/src/components/ui/bubble.tsx b/apps/docs/src/components/ui/bubble.tsx
new file mode 100644
index 000000000..ce6ce8735
--- /dev/null
+++ b/apps/docs/src/components/ui/bubble.tsx
@@ -0,0 +1,118 @@
+import * as React from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+function BubbleGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="bubble-group" className={cn("flex min-w-0 flex-col gap-2", className)} {...props} />;
+}
+
+const bubbleVariants = cva(
+  "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  {
+    variants: {
+      variant: {
+        default:
+          "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+        secondary:
+          "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        muted:
+          "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+        tinted:
+          "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+        outline:
+          "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        ghost:
+          "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+        destructive:
+          "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Bubble({
+  variant = "default",
+  align = "start",
+  className,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof bubbleVariants> & {
+    align?: "start" | "end";
+  }) {
+  return (
+    <div
+      data-slot="bubble"
+      data-variant={variant}
+      data-align={align}
+      className={cn(bubbleVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function BubbleContent({ className, render, ...props }: useRender.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
+          className,
+        ),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "bubble-content",
+    },
+  });
+}
+
+const bubbleReactionsVariants = cva(
+  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  {
+    variants: {
+      side: {
+        top: "top-0 -translate-y-3/4",
+        bottom: "bottom-0 translate-y-3/4",
+      },
+      align: {
+        start: "left-3",
+        end: "right-3",
+      },
+    },
+    defaultVariants: {
+      side: "bottom",
+      align: "end",
+    },
+  },
+);
+
+function BubbleReactions({
+  side = "bottom",
+  align = "end",
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  align?: "start" | "end";
+  side?: "top" | "bottom";
+}) {
+  return (
+    <div
+      data-slot="bubble-reactions"
+      data-align={align}
+      data-side={side}
+      className={cn(bubbleReactionsVariants({ side, align }), className)}
+      {...props}
+    />
+  );
+}
+
+export { BubbleGroup, Bubble, BubbleContent, BubbleReactions };
diff --git a/apps/docs/src/components/ui/button-group.tsx b/apps/docs/src/components/ui/button-group.tsx
new file mode 100644
index 000000000..b8cd427ac
--- /dev/null
+++ b/apps/docs/src/components/ui/button-group.tsx
@@ -0,0 +1,78 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical:
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          className,
+        ),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "button-group-text",
+    },
+  });
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
diff --git a/apps/docs/src/components/ui/button.tsx b/apps/docs/src/components/ui/button.tsx
new file mode 100644
index 000000000..914b2251f
--- /dev/null
+++ b/apps/docs/src/components/ui/button.tsx
@@ -0,0 +1,50 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return <ButtonPrimitive data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+}
+
+export { Button, buttonVariants };
diff --git a/apps/docs/src/components/ui/calendar.tsx b/apps/docs/src/components/ui/calendar.tsx
new file mode 100644
index 000000000..aab6cc2d3
--- /dev/null
+++ b/apps/docs/src/components/ui/calendar.tsx
@@ -0,0 +1,169 @@
+import * as React from "react";
+import { DayPicker, getDefaultClassNames, type DayButton, type Locale } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { IconChevronLeft, IconChevronRight, IconChevronDown } from "@tabler/icons-react";
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
+        dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label,
+        ),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday,
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+        week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_end,
+        ),
+        today: cn(
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today,
+        ),
+        outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />;
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return <IconChevronLeft className={cn("size-4", className)} {...props} />;
+          }
+
+          if (orientation === "right") {
+            return <IconChevronRight className={cn("size-4", className)} {...props} />;
+          }
+
+          return <IconChevronDown className={cn("size-4", className)} {...props} />;
+        },
+        DayButton: ({ ...props }) => <CalendarDayButton locale={locale} {...props} />,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>
+            </td>
+          );
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  locale,
+  ...props
+}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString(locale?.code)}
+      data-selected-single={
+        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };
diff --git a/apps/docs/src/components/ui/card.tsx b/apps/docs/src/components/ui/card.tsx
new file mode 100644
index 000000000..9ac0597c8
--- /dev/null
+++ b/apps/docs/src/components/ui/card.tsx
@@ -0,0 +1,70 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, size = "default", ...props }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex break-inside-avoid flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-description" className={cn("text-sm text-muted-foreground", className)} {...props} />;
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn("px-(--card-spacing)", className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center rounded-b-xl border-t border-border bg-muted/50 p-(--card-spacing)", className)}
+      {...props}
+    />
+  );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
diff --git a/apps/docs/src/components/ui/carousel.tsx b/apps/docs/src/components/ui/carousel.tsx
new file mode 100644
index 000000000..eb5c95173
--- /dev/null
+++ b/apps/docs/src/components/ui/carousel.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins,
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext],
+  );
+
+  React.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+
+  React.useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
+      <div className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)} {...props} />
+    </div>
+  );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
+      {...props}
+    />
+  );
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation rounded-full",
+        orientation === "horizontal" ? "inset-y-0 -left-12 my-auto" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <IconChevronLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation rounded-full",
+        orientation === "horizontal" ? "inset-y-0 -right-12 my-auto" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <IconChevronRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+}
+
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel };
diff --git a/apps/docs/src/components/ui/chart.tsx b/apps/docs/src/components/ui/chart.tsx
new file mode 100644
index 000000000..1e5cd6e14
--- /dev/null
+++ b/apps/docs/src/components/ui/chart.tsx
@@ -0,0 +1,307 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import type { TooltipValueType } from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+const INITIAL_DIMENSION = { width: 320, height: 200 } as const;
+type TooltipNameType = number | string;
+
+export type ChartConfig = Record<
+  string,
+  {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })
+>;
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  initialDimension = INITIAL_DIMENSION,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+  initialDimension?: {
+    width: number;
+    height: number;
+  };
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+  } & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">) {
+  const { config } = useChart();
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+
+    const [item] = payload;
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value = !labelKey && typeof label === "string" ? (config[label]?.label ?? label) : itemConfig?.label;
+
+    if (labelFormatter) {
+      return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>;
+    }
+
+    if (!value) {
+      return null;
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+  if (!active || !payload?.length) {
+    return null;
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color ?? item.payload?.fill ?? item.color;
+
+            return (
+              <div
+                key={index}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center",
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          })}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center",
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">{itemConfig?.label ?? item.name}</span>
+                      </div>
+                      {item.value != null && (
+                        <span className="font-mono font-medium text-foreground tabular-nums">
+                          {typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> & {
+  hideIcon?: boolean;
+  nameKey?: string;
+} & RechartsPrimitive.DefaultLegendContentProps) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}>
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item, index) => {
+          const key = `${nameKey ?? item.dataKey ?? "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={index}
+              className={cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground")}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle };
diff --git a/apps/docs/src/components/ui/checkbox.tsx b/apps/docs/src/components/ui/checkbox.tsx
new file mode 100644
index 000000000..e6af75822
--- /dev/null
+++ b/apps/docs/src/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+
+import { cn } from "@/lib/utils";
+import { IconCheck } from "@tabler/icons-react";
+
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <IconCheck />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };
diff --git a/apps/docs/src/components/ui/collapsible.tsx b/apps/docs/src/components/ui/collapsible.tsx
new file mode 100644
index 000000000..ee4277aa5
--- /dev/null
+++ b/apps/docs/src/components/ui/collapsible.tsx
@@ -0,0 +1,15 @@
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+  return <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />;
+}
+
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />;
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/apps/docs/src/components/ui/combobox.tsx b/apps/docs/src/components/ui/combobox.tsx
new file mode 100644
index 000000000..437a5d254
--- /dev/null
+++ b/apps/docs/src/components/ui/combobox.tsx
@@ -0,0 +1,261 @@
+"use client";
+
+import * as React from "react";
+import { Combobox as ComboboxPrimitive } from "@base-ui/react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group";
+import { IconChevronDown, IconX, IconCheck } from "@tabler/icons-react";
+
+const Combobox = ComboboxPrimitive.Root;
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
+}
+
+function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <IconChevronDown className="pointer-events-none size-4 text-muted-foreground" />
+    </ComboboxPrimitive.Trigger>
+  );
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <IconX className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  );
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean;
+  showClear?: boolean;
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            render={<ComboboxTrigger />}
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          />
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  );
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn(
+            "group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
+      >
+        <IconCheck className="pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  );
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return <ComboboxPrimitive.Group data-slot="combobox-group" className={cn(className)} {...props} />;
+}
+
+function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />;
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean;
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <IconX className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  );
+}
+
+function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null);
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+};
diff --git a/apps/docs/src/components/ui/command.tsx b/apps/docs/src/components/ui/command.tsx
new file mode 100644
index 000000000..6993c0d53
--- /dev/null
+++ b/apps/docs/src/components/ui/command.tsx
@@ -0,0 +1,151 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { InputGroup, InputGroupAddon } from "@/components/ui/input-group";
+import { IconSearch, IconCheck } from "@tabler/icons-react";
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="p-1 pb-0">
+      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          className={cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)}
+          {...props}
+        />
+        <InputGroupAddon>
+          <IconSearch className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn("py-6 text-center text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <IconCheck className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+    </CommandPrimitive.Item>
+  );
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/apps/docs/src/components/ui/context-menu.tsx b/apps/docs/src/components/ui/context-menu.tsx
new file mode 100644
index 000000000..a2be63903
--- /dev/null
+++ b/apps/docs/src/components/ui/context-menu.tsx
@@ -0,0 +1,235 @@
+"use client";
+
+import * as React from "react";
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
+
+import { cn } from "@/lib/utils";
+import { IconChevronRight, IconCheck } from "@tabler/icons-react";
+
+function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
+}
+
+function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuContent({
+  className,
+  align = "start",
+  alignOffset = 4,
+  side = "right",
+  sideOffset = 0,
+  ...props
+}: ContextMenuPrimitive.Popup.Props &
+  Pick<ContextMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <ContextMenuPrimitive.Popup
+          data-slot="context-menu-content"
+          className={cn(
+            "z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        />
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ContextMenuPrimitive.GroupLabel.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.GroupLabel
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ContextMenuPrimitive.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
+  return <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ContextMenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubmenuTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <IconChevronRight className="ml-auto" />
+    </ContextMenuPrimitive.SubmenuTrigger>
+  );
+}
+
+function ContextMenuSubContent({ ...props }: React.ComponentProps<typeof ContextMenuContent>) {
+  return <ContextMenuContent data-slot="context-menu-sub-content" className="shadow-lg" side="right" {...props} />;
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: ContextMenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.CheckboxItemIndicator>
+          <IconCheck />
+        </ContextMenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Props) {
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: ContextMenuPrimitive.RadioItem.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.RadioItemIndicator>
+          <IconCheck />
+        </ContextMenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Separator.Props) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};
diff --git a/apps/docs/src/components/ui/dialog.tsx b/apps/docs/src/components/ui/dialog.tsx
new file mode 100644
index 000000000..1794a2773
--- /dev/null
+++ b/apps/docs/src/components/ui/dialog.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { IconX } from "@tabler/icons-react";
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={<Button variant="ghost" className="absolute top-2 right-2" size="icon-sm" />}
+          >
+            <IconX />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="dialog-header" className={cn("flex flex-col gap-2", className)} {...props} />;
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && <DialogPrimitive.Close render={<Button variant="outline" />}>Close</DialogPrimitive.Close>}
+    </div>
+  );
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("font-heading text-base leading-none font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/apps/docs/src/components/ui/direction.tsx b/apps/docs/src/components/ui/direction.tsx
new file mode 100644
index 000000000..069471640
--- /dev/null
+++ b/apps/docs/src/components/ui/direction.tsx
@@ -0,0 +1 @@
+export { DirectionProvider, useDirection } from "@base-ui/react/direction-provider";
diff --git a/apps/docs/src/components/ui/drawer.tsx b/apps/docs/src/components/ui/drawer.tsx
new file mode 100644
index 000000000..0365c4d74
--- /dev/null
+++ b/apps/docs/src/components/ui/drawer.tsx
@@ -0,0 +1,209 @@
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+
+import { cn } from "@/lib/utils";
+
+type DrawerContextProps = {
+  hasSnapPoints: boolean;
+  modal: DrawerPrimitive.Root.Props["modal"];
+  showSwipeHandle: boolean;
+  swipeDirection: NonNullable<DrawerPrimitive.Root.Props["swipeDirection"]>;
+};
+
+const DrawerContext = React.createContext<DrawerContextProps | null>(null);
+
+function useDrawer() {
+  const context = React.useContext(DrawerContext);
+
+  if (!context) {
+    throw new Error("useDrawer must be used within a Drawer.");
+  }
+
+  return context;
+}
+
+function Drawer({
+  modal = true,
+  showSwipeHandle = false,
+  snapPoints,
+  swipeDirection = "down",
+  ...props
+}: DrawerPrimitive.Root.Props & {
+  showSwipeHandle?: boolean;
+}) {
+  const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
+  const contextValue = React.useMemo(
+    () => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
+    [hasSnapPoints, modal, showSwipeHandle, swipeDirection],
+  );
+
+  return (
+    <DrawerContext.Provider value={contextValue}>
+      <DrawerPrimitive.Root
+        data-slot="drawer"
+        modal={modal}
+        snapPoints={snapPoints}
+        swipeDirection={swipeDirection}
+        {...props}
+      />
+    </DrawerContext.Provider>
+  );
+}
+
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({ className, ...props }: DrawerPrimitive.Backdrop.Props) {
+  return (
+    <DrawerPrimitive.Backdrop
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerSwipeHandle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-swipe-handle"
+      aria-hidden="true"
+      className={cn(
+        "relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.Props) {
+  const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
+  const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
+
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      {modal === true && <DrawerOverlay data-snap-points={hasSnapPoints ? "" : undefined} />}
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        data-modal={modal}
+        className="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto"
+      >
+        <DrawerPrimitive.Popup
+          data-slot="drawer-popup"
+          data-swipe-axis={swipeAxis}
+          data-snap-points={hasSnapPoints ? "" : undefined}
+          className={cn(
+            // Base.
+            "group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b",
+            // Nested.
+            "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
+            // Bleed.
+            "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
+            // Sizing.
+            "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
+            // Stack.
+            "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
+            // Transitions.
+            "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
+            // Axis: y.
+            "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
+            // Axis: x.
+            "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
+            // Direction: down.
+            "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: up.
+            "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: left.
+            "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
+            // Direction: right.
+            "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",
+            className,
+          )}
+          {...props}
+        >
+          {showSwipeHandle && <DrawerSwipeHandle />}
+          <DrawerPrimitive.Content
+            data-slot="drawer-content"
+            className={cn(
+              "flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none",
+            )}
+          >
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("font-heading text-base font-medium text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-balance text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerSwipeHandle,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};
diff --git a/apps/docs/src/components/ui/dropdown-menu.tsx b/apps/docs/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 000000000..178b6beae
--- /dev/null
+++ b/apps/docs/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,252 @@
+import * as React from "react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+
+import { cn } from "@/lib/utils";
+import { IconChevronRight, IconCheck } from "@tabler/icons-react";
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn(
+            "z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <IconChevronRight className="ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className,
+      )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <IconCheck />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <IconCheck />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};
diff --git a/apps/docs/src/components/ui/empty.tsx b/apps/docs/src/components/ui/empty.tsx
new file mode 100644
index 000000000..eb57cbd11
--- /dev/null
+++ b/apps/docs/src/components/ui/empty.tsx
@@ -0,0 +1,87 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="empty-header" className={cn("flex max-w-sm flex-col items-center gap-2", className)} {...props} />
+  );
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("font-heading text-sm font-medium tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance", className)}
+      {...props}
+    />
+  );
+}
+
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };
diff --git a/apps/docs/src/components/ui/field.tsx b/apps/docs/src/components/ui/field.tsx
new file mode 100644
index 000000000..093c322d3
--- /dev/null
+++ b/apps/docs/src/components/ui/field.tsx
@@ -0,0 +1,218 @@
+"use client";
+
+import { useMemo } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className)}
+      {...props}
+    />
+  );
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
+  variants: {
+    orientation: {
+      vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+      horizontal:
+        "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      responsive:
+        "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+});
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className)}
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode;
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className)}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>;
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+
+    if (!errors?.length) {
+      return null;
+    }
+
+    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
+      </ul>
+    );
+  }, [children, errors]);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+};
diff --git a/apps/docs/src/components/ui/header.tsx b/apps/docs/src/components/ui/header.tsx
index 5e99e0cff..ef5907cbb 100644
--- a/apps/docs/src/components/ui/header.tsx
+++ b/apps/docs/src/components/ui/header.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Badge } from "../ui/badge";
 
 interface DocsHeaderProps {
@@ -18,7 +18,7 @@ export const DocsHeader = (props: DocsHeaderProps) => {
           <h1 className="!mb-0 text-4xl">{props.title}</h1>
           <div className="flex gap-2">
             {props.categories.map((category) => (
-              <Badge>{category}</Badge>
+              <Badge key={category}>{category}</Badge>
             ))}
           </div>
         </div>
diff --git a/apps/docs/src/components/ui/hover-card.tsx b/apps/docs/src/components/ui/hover-card.tsx
new file mode 100644
index 000000000..b4be50f7c
--- /dev/null
+++ b/apps/docs/src/components/ui/hover-card.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+
+import { cn } from "@/lib/utils";
+
+function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
+  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
+  return <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
+}
+
+function HoverCardContent({
+  className,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 4,
+  ...props
+}: PreviewCardPrimitive.Popup.Props &
+  Pick<PreviewCardPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+  return (
+    <PreviewCardPrimitive.Portal data-slot="hover-card-portal">
+      <PreviewCardPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PreviewCardPrimitive.Popup
+          data-slot="hover-card-content"
+          className={cn(
+            "z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        />
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  );
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/apps/docs/src/components/ui/input-group.tsx b/apps/docs/src/components/ui/input-group.tsx
new file mode 100644
index 000000000..3d0d5e922
--- /dev/null
+++ b/apps/docs/src/components/ui/input-group.tsx
@@ -0,0 +1,130 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+        "inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+  },
+});
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: "button" | "submit" | "reset";
+  }) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };
diff --git a/apps/docs/src/components/ui/input-otp.tsx b/apps/docs/src/components/ui/input-otp.tsx
new file mode 100644
index 000000000..d81c98a75
--- /dev/null
+++ b/apps/docs/src/components/ui/input-otp.tsx
@@ -0,0 +1,81 @@
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+
+import { cn } from "@/lib/utils";
+import { IconMinus } from "@tabler/icons-react";
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn("cn-input-otp flex items-center has-disabled:opacity-50", containerClassName)}
+      spellCheck={false}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn(
+        "flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number;
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      role="separator"
+      {...props}
+    >
+      <IconMinus />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
diff --git a/apps/docs/src/components/ui/input.tsx b/apps/docs/src/components/ui/input.tsx
new file mode 100644
index 000000000..abb87eb98
--- /dev/null
+++ b/apps/docs/src/components/ui/input.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/apps/docs/src/components/ui/item.tsx b/apps/docs/src/components/ui/item.tsx
new file mode 100644
index 000000000..db31094bf
--- /dev/null
+++ b/apps/docs/src/components/ui/item.tsx
@@ -0,0 +1,179 @@
+import * as React from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+  return <Separator data-slot="item-separator" orientation="horizontal" className={cn("my-2", className)} {...props} />;
+}
+
+const itemVariants = cva(
+  "group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50",
+      },
+      size: {
+        default: "gap-2.5 px-3 py-2.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(itemVariants({ variant, size, className })),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "item",
+      variant,
+      size,
+    },
+  });
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="item-actions" className={cn("flex items-center gap-2", className)} {...props} />;
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+};
diff --git a/apps/docs/src/components/ui/kbd.tsx b/apps/docs/src/components/ui/kbd.tsx
new file mode 100644
index 000000000..7cafd26db
--- /dev/null
+++ b/apps/docs/src/components/ui/kbd.tsx
@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils";
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return <kbd data-slot="kbd-group" className={cn("inline-flex items-center gap-1", className)} {...props} />;
+}
+
+export { Kbd, KbdGroup };
diff --git a/apps/docs/src/components/ui/label.tsx b/apps/docs/src/components/ui/label.tsx
new file mode 100644
index 000000000..3b6c94e09
--- /dev/null
+++ b/apps/docs/src/components/ui/label.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    // Generic primitive: consumers either provide htmlFor or wrap the associated control.
+    // oxlint-disable-next-line jsx-a11y/label-has-associated-control
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/apps/docs/src/components/ui/marker.tsx b/apps/docs/src/components/ui/marker.tsx
new file mode 100644
index 000000000..9492f0561
--- /dev/null
+++ b/apps/docs/src/components/ui/marker.tsx
@@ -0,0 +1,68 @@
+import * as React from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const markerVariants = cva(
+  "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "",
+        separator:
+          "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+        border: "border-b border-border pb-2",
+      },
+    },
+  },
+);
+
+function Marker({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & VariantProps<typeof markerVariants>) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(markerVariants({ variant, className })),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "marker",
+      variant,
+    },
+  });
+}
+
+function MarkerIcon({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="marker-icon"
+      aria-hidden="true"
+      className={cn("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    />
+  );
+}
+
+function MarkerContent({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="marker-content"
+      className={cn(
+        "min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Marker, MarkerIcon, MarkerContent, markerVariants };
diff --git a/apps/docs/src/components/ui/menubar.tsx b/apps/docs/src/components/ui/menubar.tsx
new file mode 100644
index 000000000..a9d7dbd33
--- /dev/null
+++ b/apps/docs/src/components/ui/menubar.tsx
@@ -0,0 +1,256 @@
+import * as React from "react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
+
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { IconCheck } from "@tabler/icons-react";
+
+function Menubar({ className, ...props }: MenubarPrimitive.Props) {
+  return (
+    <MenubarPrimitive
+      data-slot="menubar"
+      className={cn("flex h-8 items-center gap-0.5 rounded-lg border p-[3px]", className)}
+      {...props}
+    />
+  );
+}
+
+function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {
+  return <DropdownMenu data-slot="menubar-menu" {...props} />;
+}
+
+function MenubarGroup({ ...props }: React.ComponentProps<typeof DropdownMenuGroup>) {
+  return <DropdownMenuGroup data-slot="menubar-group" {...props} />;
+}
+
+function MenubarPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPortal>) {
+  return <DropdownMenuPortal data-slot="menubar-portal" {...props} />;
+}
+
+function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof DropdownMenuTrigger>) {
+  return (
+    <DropdownMenuTrigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="menubar-content"
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        "min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuItem>) {
+  return (
+    <DropdownMenuItem
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenuPrimitive.CheckboxItemIndicator>
+          <IconCheck />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  );
+}
+
+function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
+  return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />;
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenuPrimitive.RadioItemIndicator>
+          <IconCheck />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  );
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuLabel> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuLabel
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn("px-1.5 py-1 text-sm font-medium data-inset:pl-7", className)}
+      {...props}
+    />
+  );
+}
+
+function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuSeparator>) {
+  return (
+    <DropdownMenuSeparator
+      data-slot="menubar-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function MenubarShortcut({ className, ...props }: React.ComponentProps<typeof DropdownMenuShortcut>) {
+  return (
+    <DropdownMenuShortcut
+      data-slot="menubar-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarSub({ ...props }: React.ComponentProps<typeof DropdownMenuSub>) {
+  return <DropdownMenuSub data-slot="menubar-sub" {...props} />;
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuSubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuSubContent>) {
+  return (
+    <DropdownMenuSubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        "min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+};
diff --git a/apps/docs/src/components/ui/message-scroller.tsx b/apps/docs/src/components/ui/message-scroller.tsx
new file mode 100644
index 000000000..457530742
--- /dev/null
+++ b/apps/docs/src/components/ui/message-scroller.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import * as React from "react";
+import {
+  MessageScroller as MessageScrollerPrimitive,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
+} from "@shadcn/react/message-scroller";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { IconArrowDown } from "@tabler/icons-react";
+
+function MessageScrollerProvider(props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>) {
+  return <MessageScrollerPrimitive.Provider {...props} />;
+}
+
+function MessageScroller({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {
+  return (
+    <MessageScrollerPrimitive.Root
+      data-slot="message-scroller"
+      className={cn("group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden", className)}
+      {...props}
+    />
+  );
+}
+
+function MessageScrollerViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {
+  return (
+    <MessageScrollerPrimitive.Viewport
+      data-slot="message-scroller-viewport"
+      className={cn(
+        "size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MessageScrollerContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {
+  return (
+    <MessageScrollerPrimitive.Content
+      data-slot="message-scroller-content"
+      className={cn("flex h-max min-h-full flex-col gap-6", className)}
+      {...props}
+    />
+  );
+}
+
+function MessageScrollerItem({
+  className,
+  scrollAnchor = false,
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {
+  return (
+    <MessageScrollerPrimitive.Item
+      data-slot="message-scroller-item"
+      scrollAnchor={scrollAnchor}
+      className={cn("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className)}
+      {...props}
+    />
+  );
+}
+
+function MessageScrollerButton({
+  direction = "end",
+  className,
+  children,
+  render,
+  variant = "secondary",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <MessageScrollerPrimitive.Button
+      data-slot="message-scroller-button"
+      data-direction={direction}
+      data-variant={variant}
+      data-size={size}
+      direction={direction}
+      className={cn(
+        "absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+        className,
+      )}
+      render={render ?? <Button variant={variant} size={size} />}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <IconArrowDown />
+          <span className="sr-only">{direction === "end" ? "Scroll to end" : "Scroll to start"}</span>
+        </>
+      )}
+    </MessageScrollerPrimitive.Button>
+  );
+}
+
+export {
+  MessageScrollerProvider,
+  MessageScroller,
+  MessageScrollerViewport,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerButton,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
+};
diff --git a/apps/docs/src/components/ui/message.tsx b/apps/docs/src/components/ui/message.tsx
new file mode 100644
index 000000000..6761f20b4
--- /dev/null
+++ b/apps/docs/src/components/ui/message.tsx
@@ -0,0 +1,75 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function MessageGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="message-group" className={cn("flex min-w-0 flex-col gap-2", className)} {...props} />;
+}
+
+function Message({ className, align = "start", ...props }: React.ComponentProps<"div"> & { align?: "start" | "end" }) {
+  return (
+    <div
+      data-slot="message"
+      data-align={align}
+      className={cn(
+        "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MessageAvatar({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="message-avatar"
+      className={cn(
+        "flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MessageContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="message-content"
+      className={cn(
+        "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MessageHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="message-header"
+      className={cn(
+        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MessageFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="message-footer"
+      className={cn(
+        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { MessageGroup, Message, MessageAvatar, MessageContent, MessageFooter, MessageHeader };
diff --git a/apps/docs/src/components/ui/native-select.tsx b/apps/docs/src/components/ui/native-select.tsx
new file mode 100644
index 000000000..60bd243af
--- /dev/null
+++ b/apps/docs/src/components/ui/native-select.tsx
@@ -0,0 +1,48 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { IconSelector } from "@tabler/icons-react";
+
+type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+  size?: "sm" | "default";
+};
+
+function NativeSelect({ className, size = "default", ...props }: NativeSelectProps) {
+  return (
+    <div
+      className={cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className)}
+      data-slot="native-select-wrapper"
+      data-size={size}
+    >
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+        {...props}
+      />
+      <IconSelector
+        className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
+        aria-hidden="true"
+        data-slot="native-select-icon"
+      />
+    </div>
+  );
+}
+
+function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">) {
+  return (
+    <option data-slot="native-select-option" className={cn("bg-[Canvas] text-[CanvasText]", className)} {...props} />
+  );
+}
+
+function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">) {
+  return (
+    <optgroup
+      data-slot="native-select-optgroup"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  );
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };
diff --git a/apps/docs/src/components/ui/navigation-menu.tsx b/apps/docs/src/components/ui/navigation-menu.tsx
new file mode 100644
index 000000000..e08348612
--- /dev/null
+++ b/apps/docs/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,144 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { IconChevronDown } from "@tabler/icons-react";
+
+function NavigationMenu({
+  align = "start",
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, "align">) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      className={cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className)}
+      {...props}
+    >
+      {children}
+      <NavigationMenuPositioner align={align} />
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn("group flex flex-1 list-none items-center justify-center gap-0", className)}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItem({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item data-slot="navigation-menu-item" className={cn("relative", className)} {...props} />
+  );
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted",
+);
+
+function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuPrimitive.Trigger.Props) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <IconChevronDown
+        className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({ className, ...props }: NavigationMenuPrimitive.Content.Props) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuPositioner({
+  className,
+  side = "bottom",
+  sideOffset = 8,
+  align = "start",
+  alignOffset = 0,
+  ...props
+}: NavigationMenuPrimitive.Positioner.Props) {
+  return (
+    <NavigationMenuPrimitive.Portal>
+      <NavigationMenuPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        className={cn(
+          "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
+          className,
+        )}
+        {...props}
+      >
+        <NavigationMenuPrimitive.Popup className="data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
+          <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
+        </NavigationMenuPrimitive.Popup>
+      </NavigationMenuPrimitive.Positioner>
+    </NavigationMenuPrimitive.Portal>
+  );
+}
+
+function NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Link.Props) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
+  return (
+    <NavigationMenuPrimitive.Icon
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className,
+      )}
+      {...props}
+    >
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    </NavigationMenuPrimitive.Icon>
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+  NavigationMenuPositioner,
+};
diff --git a/apps/docs/src/components/ui/pagination.tsx b/apps/docs/src/components/ui/pagination.tsx
new file mode 100644
index 000000000..e1c8b4d53
--- /dev/null
+++ b/apps/docs/src/components/ui/pagination.tsx
@@ -0,0 +1,96 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { IconChevronLeft, IconChevronRight, IconDots } from "@tabler/icons-react";
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  );
+}
+
+function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
+  return <ul data-slot="pagination-content" className={cn("flex items-center gap-0.5", className)} {...props} />;
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />;
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">;
+
+function PaginationLink({ className, isActive, size = "icon", ...props }: PaginationLinkProps) {
+  return (
+    <Button
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      className={cn(className)}
+      nativeButton={false}
+      render={
+        // Base UI moves Button children into this render element at runtime.
+        // oxlint-disable-next-line jsx-a11y/anchor-has-content
+        <a aria-current={isActive ? "page" : undefined} data-slot="pagination-link" data-active={isActive} {...props} />
+      }
+    />
+  );
+}
+
+function PaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink aria-label="Go to previous page" size="default" className={cn("pl-1.5!", className)} {...props}>
+      <IconChevronLeft data-icon="inline-start" />
+      <span className="hidden sm:block">{text}</span>
+    </PaginationLink>
+  );
+}
+
+function PaginationNext({
+  className,
+  text = "Next",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink aria-label="Go to next page" size="default" className={cn("pr-1.5!", className)} {...props}>
+      <span className="hidden sm:block">{text}</span>
+      <IconChevronRight data-icon="inline-end" />
+    </PaginationLink>
+  );
+}
+
+function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      <IconDots />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};
diff --git a/apps/docs/src/components/ui/popover.tsx b/apps/docs/src/components/ui/popover.tsx
new file mode 100644
index 000000000..c38eb4f27
--- /dev/null
+++ b/apps/docs/src/components/ui/popover.tsx
@@ -0,0 +1,63 @@
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+
+import { cn } from "@/lib/utils";
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: PopoverPrimitive.Popup.Props &
+  Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="popover-header" className={cn("flex flex-col gap-0.5 text-sm", className)} {...props} />;
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return <PopoverPrimitive.Title data-slot="popover-title" className={cn("font-medium", className)} {...props} />;
+}
+
+function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };
diff --git a/apps/docs/src/components/ui/progress.tsx b/apps/docs/src/components/ui/progress.tsx
new file mode 100644
index 000000000..87508c922
--- /dev/null
+++ b/apps/docs/src/components/ui/progress.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+
+import { cn } from "@/lib/utils";
+
+function Progress({ className, children, value, ...props }: ProgressPrimitive.Root.Props) {
+  return (
+    <ProgressPrimitive.Root
+      value={value}
+      data-slot="progress"
+      className={cn("flex flex-wrap gap-3", className)}
+      {...props}
+    >
+      {children}
+      <ProgressTrack>
+        <ProgressIndicator />
+      </ProgressTrack>
+    </ProgressPrimitive.Root>
+  );
+}
+
+function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
+  return (
+    <ProgressPrimitive.Track
+      className={cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", className)}
+      data-slot="progress-track"
+      {...props}
+    />
+  );
+}
+
+function ProgressIndicator({ className, ...props }: ProgressPrimitive.Indicator.Props) {
+  return (
+    <ProgressPrimitive.Indicator
+      data-slot="progress-indicator"
+      className={cn("h-full bg-primary transition-all", className)}
+      {...props}
+    />
+  );
+}
+
+function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
+  return (
+    <ProgressPrimitive.Label className={cn("text-sm font-medium", className)} data-slot="progress-label" {...props} />
+  );
+}
+
+function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
+  return (
+    <ProgressPrimitive.Value
+      className={cn("ml-auto text-sm text-muted-foreground tabular-nums", className)}
+      data-slot="progress-value"
+      {...props}
+    />
+  );
+}
+
+export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue };
diff --git a/apps/docs/src/components/ui/radio-group.tsx b/apps/docs/src/components/ui/radio-group.tsx
new file mode 100644
index 000000000..c59208c65
--- /dev/null
+++ b/apps/docs/src/components/ui/radio-group.tsx
@@ -0,0 +1,27 @@
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+
+import { cn } from "@/lib/utils";
+
+function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+  return <RadioGroupPrimitive data-slot="radio-group" className={cn("grid w-full gap-2", className)} {...props} />;
+}
+
+function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
+  return (
+    <RadioPrimitive.Root
+      data-slot="radio-group-item"
+      className={cn(
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className,
+      )}
+      {...props}
+    >
+      <RadioPrimitive.Indicator data-slot="radio-group-indicator" className="flex size-4 items-center justify-center">
+        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Root>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };
diff --git a/apps/docs/src/components/ui/resizable.tsx b/apps/docs/src/components/ui/resizable.tsx
new file mode 100644
index 000000000..add9c0051
--- /dev/null
+++ b/apps/docs/src/components/ui/resizable.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "@/lib/utils";
+
+function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean;
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />}
+    </ResizablePrimitive.Separator>
+  );
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
diff --git a/apps/docs/src/components/ui/scroll-area.tsx b/apps/docs/src/components/ui/scroll-area.tsx
new file mode 100644
index 000000000..1dcbbc368
--- /dev/null
+++ b/apps/docs/src/components/ui/scroll-area.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+
+import { cn } from "@/lib/utils";
+
+function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props) {
+  return (
+    <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({ className, orientation = "vertical", ...props }: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb data-slot="scroll-area-thumb" className="relative flex-1 rounded-full bg-border" />
+    </ScrollAreaPrimitive.Scrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };
diff --git a/apps/docs/src/components/ui/select.tsx b/apps/docs/src/components/ui/select.tsx
new file mode 100644
index 000000000..fbd671c7e
--- /dev/null
+++ b/apps/docs/src/components/ui/select.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import * as React from "react";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+
+import { cn } from "@/lib/utils";
+import { IconSelector, IconCheck, IconChevronUp, IconChevronDown } from "@tabler/icons-react";
+
+const Select = SelectPrimitive.Root;
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return <SelectPrimitive.Group data-slot="select-group" className={cn("scroll-my-1 p-1", className)} {...props} />;
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value data-slot="select-value" className={cn("flex flex-1 text-left", className)} {...props} />
+  );
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon render={<IconSelector className="pointer-events-none size-4 text-muted-foreground" />} />
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<SelectPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn(
+            "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
+      >
+        <IconCheck className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <IconChevronUp />
+    </SelectPrimitive.ScrollUpArrow>
+  );
+}
+
+function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <IconChevronDown />
+    </SelectPrimitive.ScrollDownArrow>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/apps/docs/src/components/ui/separator.tsx b/apps/docs/src/components/ui/separator.tsx
new file mode 100644
index 000000000..e99046a0d
--- /dev/null
+++ b/apps/docs/src/components/ui/separator.tsx
@@ -0,0 +1,19 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+
+import { cn } from "@/lib/utils";
+
+function Separator({ className, orientation = "horizontal", ...props }: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };
diff --git a/apps/docs/src/components/ui/sheet.tsx b/apps/docs/src/components/ui/sheet.tsx
new file mode 100644
index 000000000..2cef95563
--- /dev/null
+++ b/apps/docs/src/components/ui/sheet.tsx
@@ -0,0 +1,102 @@
+import * as React from "react";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { IconX } from "@tabler/icons-react";
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={<Button variant="ghost" className="absolute top-3 right-3" size="icon-sm" />}
+          >
+            <IconX />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="sheet-header" className={cn("flex flex-col gap-0.5 p-4", className)} {...props} />;
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("font-heading text-base font-medium text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };
diff --git a/apps/docs/src/components/ui/sidebar.tsx b/apps/docs/src/components/ui/sidebar.tsx
new file mode 100644
index 000000000..1393add44
--- /dev/null
+++ b/apps/docs/src/components/ui/sidebar.tsx
@@ -0,0 +1,673 @@
+import * as React from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { IconLayoutSidebar } from "@tabler/icons-react";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open],
+  );
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed";
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  );
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn(className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <IconLayoutSidebar />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("h-8 w-full bg-background shadow-none", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupLabel({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & React.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          className,
+        ),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-label",
+      sidebar: "group-label",
+    },
+  });
+}
+
+function SidebarGroupAction({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"button"> & React.ComponentProps<"button">) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          className,
+        ),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-action",
+      sidebar: "group-action",
+    },
+  });
+}
+
+function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-0", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function SidebarMenuButton({
+  render,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  React.ComponentProps<"button"> & {
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  } & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const { isMobile, state } = useSidebar();
+  const comp = useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      },
+      props,
+    ),
+    render: !tooltip ? render : <TooltipTrigger render={render} />,
+    state: {
+      slot: "sidebar-menu-button",
+      sidebar: "menu-button",
+      size,
+      active: isActive,
+    },
+  });
+
+  if (!tooltip) {
+    return comp;
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      {comp}
+      <TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile} {...tooltip} />
+    </Tooltip>
+  );
+}
+
+function SidebarMenuAction({
+  className,
+  render,
+  showOnHover = false,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  React.ComponentProps<"button"> & {
+    showOnHover?: boolean;
+  }) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          showOnHover &&
+            "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+          className,
+        ),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-action",
+      sidebar: "menu-action",
+    },
+  });
+}
+
+function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean;
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  });
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubButton({
+  render,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: useRender.ComponentProps<"a"> &
+  React.ComponentProps<"a"> & {
+    size?: "sm" | "md";
+    isActive?: boolean;
+  }) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn(
+          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+          className,
+        ),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-sub-button",
+      sidebar: "menu-sub-button",
+      size,
+      active: isActive,
+    },
+  });
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/apps/docs/src/components/ui/skeleton.tsx b/apps/docs/src/components/ui/skeleton.tsx
new file mode 100644
index 000000000..152fae685
--- /dev/null
+++ b/apps/docs/src/components/ui/skeleton.tsx
@@ -0,0 +1,7 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="skeleton" className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />;
+}
+
+export { Skeleton };
diff --git a/apps/docs/src/components/ui/slider.tsx b/apps/docs/src/components/ui/slider.tsx
new file mode 100644
index 000000000..e2c6dd1ea
--- /dev/null
+++ b/apps/docs/src/components/ui/slider.tsx
@@ -0,0 +1,41 @@
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+
+import { cn } from "@/lib/utils";
+
+function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }: SliderPrimitive.Root.Props) {
+  const _values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max];
+
+  return (
+    <SliderPrimitive.Root
+      className={cn("data-horizontal:w-full data-vertical:h-full", className)}
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      {...props}
+    >
+      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
+        <SliderPrimitive.Track
+          data-slot="slider-track"
+          className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+        >
+          <SliderPrimitive.Indicator
+            data-slot="slider-range"
+            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+          />
+        </SliderPrimitive.Track>
+        {Array.from({ length: _values.length }, (_, index) => (
+          <SliderPrimitive.Thumb
+            data-slot="slider-thumb"
+            key={index}
+            className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+          />
+        ))}
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  );
+}
+
+export { Slider };
diff --git a/apps/docs/src/components/ui/sonner.tsx b/apps/docs/src/components/ui/sonner.tsx
new file mode 100644
index 000000000..3c885c845
--- /dev/null
+++ b/apps/docs/src/components/ui/sonner.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { useColorMode } from "@docusaurus/theme-common";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+import { IconCircleCheck, IconInfoCircle, IconAlertTriangle, IconAlertOctagon, IconLoader } from "@tabler/icons-react";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { colorMode } = useColorMode();
+
+  return (
+    <Sonner
+      theme={colorMode}
+      className="toaster group"
+      icons={{
+        success: <IconCircleCheck className="size-4" />,
+        info: <IconInfoCircle className="size-4" />,
+        warning: <IconAlertTriangle className="size-4" />,
+        error: <IconAlertOctagon className="size-4" />,
+        loading: <IconLoader className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };
diff --git a/apps/docs/src/components/ui/spinner.tsx b/apps/docs/src/components/ui/spinner.tsx
new file mode 100644
index 000000000..e0d43916f
--- /dev/null
+++ b/apps/docs/src/components/ui/spinner.tsx
@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils";
+import { IconLoader } from "@tabler/icons-react";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <IconLoader
+      data-slot="spinner"
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };
diff --git a/apps/docs/src/components/ui/switch.tsx b/apps/docs/src/components/ui/switch.tsx
new file mode 100644
index 000000000..d0b82e29b
--- /dev/null
+++ b/apps/docs/src/components/ui/switch.tsx
@@ -0,0 +1,30 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+
+import { cn } from "@/lib/utils";
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };
diff --git a/apps/docs/src/components/ui/table.tsx b/apps/docs/src/components/ui/table.tsx
new file mode 100644
index 000000000..b6940ffb2
--- /dev/null
+++ b/apps/docs/src/components/ui/table.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table data-slot="table" className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+  return (
+    <caption data-slot="table-caption" className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+  );
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/apps/docs/src/components/ui/tabs.tsx b/apps/docs/src/components/ui/tabs.tsx
new file mode 100644
index 000000000..62a586181
--- /dev/null
+++ b/apps/docs/src/components/ui/tabs.tsx
@@ -0,0 +1,69 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+function Tabs({ className, orientation = "horizontal", ...props }: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel data-slot="tabs-content" className={cn("flex-1 text-sm outline-none", className)} {...props} />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
diff --git a/apps/docs/src/components/ui/textarea.tsx b/apps/docs/src/components/ui/textarea.tsx
new file mode 100644
index 000000000..d102c701b
--- /dev/null
+++ b/apps/docs/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };
diff --git a/apps/docs/src/components/ui/toggle-group.tsx b/apps/docs/src/components/ui/toggle-group.tsx
new file mode 100644
index 000000000..fab89f1cf
--- /dev/null
+++ b/apps/docs/src/components/ui/toggle-group.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import * as React from "react";
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import { type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "@/components/ui/toggle";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 2,
+  orientation: "horizontal",
+});
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 2,
+  orientation = "horizontal",
+  children,
+  ...props
+}: ToggleGroupPrimitive.Props &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+  }) {
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing, orientation }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  );
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <TogglePrimitive
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </TogglePrimitive>
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/apps/docs/src/components/ui/toggle.tsx b/apps/docs/src/components/ui/toggle.tsx
new file mode 100644
index 000000000..c1fe60fad
--- /dev/null
+++ b/apps/docs/src/components/ui/toggle.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
+      },
+      size: {
+        default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return <TogglePrimitive data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props} />;
+}
+
+export { Toggle, toggleVariants };
diff --git a/apps/docs/src/components/ui/tooltip.tsx b/apps/docs/src/components/ui/tooltip.tsx
new file mode 100644
index 000000000..407be2e9d
--- /dev/null
+++ b/apps/docs/src/components/ui/tooltip.tsx
@@ -0,0 +1,52 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/apps/docs/src/components/widgets/interactions.tsx b/apps/docs/src/components/widgets/interactions.tsx
new file mode 100644
index 000000000..c75102f92
--- /dev/null
+++ b/apps/docs/src/components/widgets/interactions.tsx
@@ -0,0 +1,62 @@
+import { IconArrowsMaximize, IconLayoutGrid, IconMouse2, IconPlus } from "@tabler/icons-react";
+
+const advancedInteraction = {
+  icon: IconArrowsMaximize,
+  title: "Advanced view",
+  description:
+    "Hold Shift while hovering for an in-place preview, press Shift + Enter, or choose Open advanced view from the widget menu.",
+} as const;
+
+const standardInteractions = [
+  {
+    icon: IconMouse2,
+    title: "Widget actions",
+    description:
+      "Right-click for live query status, refresh, settings, quick options, and actions supported by the widget.",
+  },
+  {
+    icon: IconPlus,
+    title: "Place it precisely",
+    description:
+      "With board changes allowed, right-click or touch and hold empty grid space to add there. Keyboard users can press Shift + F10.",
+  },
+  {
+    icon: IconLayoutGrid,
+    title: "Adaptive detail",
+    description:
+      "Resize a widget to tune its density. Compact views keep primary status visible, then reveal details and controls as space or intent allows.",
+  },
+] as const;
+
+export const WidgetInteractionGuide = ({ advancedView = true }: { advancedView?: boolean }) => {
+  const interactions = advancedView ? [advancedInteraction, ...standardInteractions] : standardInteractions;
+
+  return (
+    <details className="group my-6 overflow-hidden rounded-xl border border-solid border-[#e5e7eb] bg-slate-50/70 dark:border-[#333] dark:bg-gray-900/40">
+      <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 font-semibold marker:hidden">
+        <span>Power-user controls</span>
+        <span className="text-xs font-normal text-[#696969] group-open:hidden dark:text-[#999]">Show shortcuts</span>
+        <span className="hidden text-xs font-normal text-[#696969] group-open:inline dark:text-[#999]">
+          Hide shortcuts
+        </span>
+      </summary>
+      <div
+        className={`grid gap-3 border-0 border-t border-solid border-[#e5e7eb] p-4 md:grid-cols-2 ${advancedView ? "xl:grid-cols-4" : "xl:grid-cols-3"} dark:border-[#333]`}
+      >
+        {interactions.map(({ icon: Icon, title, description }) => (
+          <div key={title} className="rounded-lg bg-white p-3 shadow-sm dark:bg-gray-950">
+            <Icon aria-hidden size={20} stroke={1.5} className="mb-2 stroke-red-500" />
+            <div className="font-semibold">{title}</div>
+            <p className="mb-0 mt-1 text-sm text-[#696969] dark:text-[#999]">{description}</p>
+          </div>
+        ))}
+      </div>
+      {advancedView && (
+        <p className="m-0 px-4 pb-4 text-xs text-[#696969] dark:text-[#999]">
+          Advanced view reuses the widget&apos;s live data and cache. The rest of the board stays visible but dimmed. On
+          touch devices, use the widget menu; compact-only widgets adapt in place instead.
+        </p>
+      )}
+    </details>
+  );
+};
diff --git a/apps/docs/src/components/workshop/DetailComments.tsx b/apps/docs/src/components/workshop/DetailComments.tsx
new file mode 100644
index 000000000..d0ae971fb
--- /dev/null
+++ b/apps/docs/src/components/workshop/DetailComments.tsx
@@ -0,0 +1,357 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { IconCheck, IconEdit, IconMessageCircle, IconRefresh, IconSend, IconTrash, IconX } from "@tabler/icons-react";
+
+import type { WorkshopComment } from "@site/src/lib/pocketbase";
+import { getWorkshopBackend } from "@site/src/lib/pocketbase";
+import type { WorkshopUser } from "@homarr/workshop/schema";
+import { errorMessage } from "@site/src/lib/utils";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+import { formatRelativeTime } from "./format";
+
+interface CommentsSectionProps {
+  submissionId: string;
+  backend: ReturnType<typeof getWorkshopBackend>;
+  currentUser: WorkshopUser | null;
+  onRequireAuth: (action: string) => Promise<string | null>;
+}
+
+const avatarFallback = (name: string) => name.trim().slice(0, 1).toUpperCase() || "?";
+
+export const CommentsSection = ({ submissionId, backend, currentUser, onRequireAuth }: CommentsSectionProps) => {
+  const [rows, setRows] = useState<WorkshopComment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [reloadKey, setReloadKey] = useState(0);
+  const [newComment, setNewComment] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editContent, setEditContent] = useState("");
+  const [mutationError, setMutationError] = useState<string | null>(null);
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+
+  const loadComments = useCallback(async () => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      setRows(await backend.listComments(submissionId));
+    } catch (caught) {
+      const message = errorMessage(caught, "Failed to load comments");
+      setFetchError(
+        /collection context/iu.test(message)
+          ? "Comments are unavailable because this Workshop database has not applied the current comments migration."
+          : message,
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [backend, submissionId]);
+
+  useEffect(() => {
+    void loadComments();
+  }, [loadComments, reloadKey]);
+
+  const handleAdd = async () => {
+    const trimmed = newComment.trim();
+    if (!trimmed || !(await onRequireAuth("comment"))) return;
+    try {
+      setMutationError(null);
+      const created = await backend.createComment(submissionId, trimmed);
+      setRows((previous) => [...previous, created]);
+      setNewComment("");
+    } catch (caught) {
+      setMutationError(errorMessage(caught, "Failed to post comment"));
+    }
+  };
+
+  const handleUpdate = async (id: string) => {
+    const trimmed = editContent.trim();
+    if (!trimmed) return;
+    try {
+      setMutationError(null);
+      const updated = await backend.updateComment(id, trimmed);
+      setRows((previous) => previous.map((comment) => (comment.id === id ? updated : comment)));
+      setEditingId(null);
+    } catch (caught) {
+      setMutationError(errorMessage(caught, "Failed to update comment"));
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      setMutationError(null);
+      await backend.deleteComment(id);
+      setRows((previous) => previous.filter((comment) => comment.id !== id));
+      setConfirmDeleteId(null);
+    } catch (caught) {
+      setMutationError(errorMessage(caught, "Failed to delete comment"));
+    }
+  };
+
+  return (
+    <section aria-labelledby="workshop-comments-heading" className="space-y-5">
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <div className="flex items-center gap-2">
+            <IconMessageCircle size={18} className="text-muted-foreground" />
+            <h2 id="workshop-comments-heading" className="text-lg font-semibold">
+              Discussion
+            </h2>
+            {!loading && <Badge variant="secondary">{rows.length}</Badge>}
+          </div>
+          <p className="m-0 mt-1 text-sm text-muted-foreground">Questions, fixes, and feedback from the community.</p>
+        </div>
+      </div>
+
+      {loading && (
+        <div className="space-y-4" aria-label="Loading comments">
+          <div className="h-20 w-3/4 animate-pulse rounded-xl bg-muted" />
+          <div className="ml-auto h-20 w-2/3 animate-pulse rounded-xl bg-primary/10" />
+        </div>
+      )}
+
+      {!loading && fetchError && (
+        <Alert variant="destructive">
+          <IconMessageCircle />
+          <AlertTitle>Comments could not be loaded</AlertTitle>
+          <AlertDescription>{fetchError}</AlertDescription>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="col-start-2 mt-2 w-fit text-destructive hover:bg-destructive/10"
+            onClick={() => setReloadKey((value) => value + 1)}
+          >
+            <IconRefresh size={14} /> Retry comments
+          </Button>
+        </Alert>
+      )}
+
+      {!loading && !fetchError && rows.length === 0 && (
+        <div className="rounded-xl bg-muted/40 px-4 py-8 text-center">
+          <IconMessageCircle size={24} className="mx-auto text-muted-foreground" />
+          <p className="m-0 mt-2 text-sm font-medium">Start the discussion</p>
+          <p className="m-0 mt-1 text-sm text-muted-foreground">
+            Share a question or something you learned using this submission.
+          </p>
+        </div>
+      )}
+
+      {!loading && !fetchError && rows.length > 0 && (
+        <div className="space-y-4">
+          {rows.map((comment) => {
+            const ownComment = currentUser?.id === comment.author;
+            const canDelete = ownComment || currentUser?.isAdmin === true;
+            const isEditing = editingId === comment.id;
+            const edited = comment.updated !== comment.created;
+            const authorName = ownComment ? (currentUser?.displayName ?? comment.authorName) : comment.authorName;
+            const avatarUrl = ownComment
+              ? (currentUser?.avatarUrl ?? comment.authorAvatarUrl)
+              : comment.authorAvatarUrl;
+            const profileUrl = ownComment
+              ? (currentUser?.githubProfileUrl ?? comment.authorGithubProfileUrl)
+              : comment.authorGithubProfileUrl;
+
+            return (
+              <article
+                key={comment.id}
+                className={ownComment ? "ml-auto w-full max-w-[44rem]" : "w-full max-w-[44rem]"}
+              >
+                <div className={ownComment ? "flex flex-row-reverse items-start gap-3" : "flex items-start gap-3"}>
+                  <a
+                    href={profileUrl || undefined}
+                    target={profileUrl ? "_blank" : undefined}
+                    rel="noreferrer"
+                    aria-label={profileUrl ? `Open ${authorName}'s GitHub profile` : undefined}
+                    className="mt-0.5 shrink-0 rounded-full outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                  >
+                    <Avatar className="size-9 ring-1 ring-border">
+                      {avatarUrl && <AvatarImage src={avatarUrl} alt="" />}
+                      <AvatarFallback>{avatarFallback(authorName)}</AvatarFallback>
+                    </Avatar>
+                  </a>
+
+                  <div className={ownComment ? "flex min-w-0 flex-1 flex-col items-end" : "min-w-0 flex-1"}>
+                    <div
+                      className={
+                        ownComment
+                          ? "mb-1.5 flex flex-wrap items-center justify-end gap-x-2 px-1"
+                          : "mb-1.5 flex flex-wrap items-center gap-x-2 px-1"
+                      }
+                    >
+                      <a
+                        href={profileUrl || undefined}
+                        target={profileUrl ? "_blank" : undefined}
+                        rel="noreferrer"
+                        className="truncate text-sm font-semibold text-primary hover:underline"
+                      >
+                        {authorName}
+                      </a>
+                      {ownComment && (
+                        <Badge variant="secondary" className="h-5 px-1.5 text-[0.6875rem]">
+                          You
+                        </Badge>
+                      )}
+                      <span className="text-xs text-muted-foreground">
+                        {formatRelativeTime(comment.created)}
+                        {edited && " · edited"}
+                      </span>
+                    </div>
+
+                    <div
+                      className={
+                        ownComment
+                          ? "w-fit max-w-full rounded-xl rounded-tr-sm bg-primary px-3.5 py-2.5 text-primary-foreground"
+                          : "w-fit max-w-full rounded-xl rounded-tl-sm border border-border/70 bg-muted/60 px-3.5 py-2.5 text-foreground"
+                      }
+                    >
+                      {isEditing ? (
+                        <div className="flex items-center gap-1.5">
+                          <Input
+                            className="min-w-48 bg-background text-foreground"
+                            aria-label="Edit comment"
+                            value={editContent}
+                            onChange={(event) => setEditContent(event.target.value)}
+                            onKeyDown={(event) => {
+                              if (event.key === "Enter") void handleUpdate(comment.id);
+                            }}
+                          />
+                          <Button
+                            size="icon-sm"
+                            variant="secondary"
+                            aria-label="Save comment"
+                            onClick={() => void handleUpdate(comment.id)}
+                          >
+                            <IconCheck size={12} />
+                          </Button>
+                          <Button
+                            size="icon-sm"
+                            variant="ghost"
+                            aria-label="Cancel editing"
+                            onClick={() => setEditingId(null)}
+                          >
+                            <IconX size={12} />
+                          </Button>
+                        </div>
+                      ) : (
+                        <p className="m-0 break-words whitespace-pre-wrap text-[0.9375rem] leading-6">
+                          {comment.content}
+                        </p>
+                      )}
+                    </div>
+
+                    {(ownComment || canDelete) && !isEditing && (
+                      <div className={ownComment ? "mt-1 flex justify-end gap-1" : "mt-1 flex gap-1"}>
+                        {ownComment && (
+                          <Button
+                            variant="ghost"
+                            size="xs"
+                            className="text-muted-foreground"
+                            onClick={() => {
+                              setEditingId(comment.id);
+                              setEditContent(comment.content);
+                            }}
+                          >
+                            <IconEdit /> Edit
+                          </Button>
+                        )}
+                        {canDelete && (
+                          <Button
+                            variant="ghost"
+                            size="xs"
+                            className="text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+                            onClick={() => setConfirmDeleteId(comment.id)}
+                          >
+                            <IconTrash /> Delete
+                          </Button>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </article>
+            );
+          })}
+        </div>
+      )}
+
+      <div className="rounded-xl border border-border bg-muted/30 p-3">
+        <div className="flex items-start gap-2.5">
+          <Avatar className="mt-0.5 size-9 bg-background ring-1 ring-border">
+            {currentUser?.avatarUrl && <AvatarImage src={currentUser.avatarUrl} alt="" />}
+            <AvatarFallback className="bg-background">
+              {avatarFallback(currentUser?.displayName ?? "Guest")}
+            </AvatarFallback>
+          </Avatar>
+          <Textarea
+            className="min-h-16 flex-1 resize-none bg-background"
+            placeholder={currentUser ? "Add to the discussion…" : "Write a comment, you will be asked to sign in…"}
+            aria-label="Write a comment"
+            value={newComment}
+            maxLength={2000}
+            onChange={(event) => setNewComment(event.target.value)}
+            onKeyDown={(event) => {
+              if ((event.metaKey || event.ctrlKey) && event.key === "Enter") void handleAdd();
+            }}
+          />
+          <Button
+            size="icon-lg"
+            className="self-end"
+            disabled={!newComment.trim()}
+            onClick={() => void handleAdd()}
+            aria-label="Post comment"
+          >
+            <IconSend size={15} />
+          </Button>
+        </div>
+        <p className="m-0 mt-2 pl-12 text-xs text-muted-foreground">Press Ctrl or ⌘ + Enter to post.</p>
+        {mutationError && (
+          <Alert variant="destructive" className="mt-3">
+            <IconMessageCircle />
+            <AlertTitle>Comment was not saved</AlertTitle>
+            <AlertDescription>{mutationError}</AlertDescription>
+          </Alert>
+        )}
+      </div>
+
+      <AlertDialog
+        open={Boolean(confirmDeleteId)}
+        onOpenChange={(open) => {
+          if (!open) setConfirmDeleteId(null);
+        }}
+      >
+        <AlertDialogContent size="sm">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete this comment?</AlertDialogTitle>
+            <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              variant="destructive"
+              onClick={() => {
+                if (confirmDeleteId) void handleDelete(confirmDeleteId);
+              }}
+            >
+              Delete comment
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </section>
+  );
+};
diff --git a/apps/docs/src/components/workshop/DetailPage.tsx b/apps/docs/src/components/workshop/DetailPage.tsx
new file mode 100644
index 000000000..9c04274b1
--- /dev/null
+++ b/apps/docs/src/components/workshop/DetailPage.tsx
@@ -0,0 +1,1038 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import Link from "@docusaurus/Link";
+import { useLocation } from "@docusaurus/router";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+
+import {
+  IconArrowBigDown,
+  IconArrowBigUp,
+  IconArrowLeft,
+  IconBrandGithub,
+  IconCheck,
+  IconCopy,
+  IconDownload,
+  IconExternalLink,
+  IconFlag,
+  IconInfoCircle,
+  IconKey,
+  IconLoader2,
+  IconPencil,
+  IconRefresh,
+  IconServer,
+  IconSettings,
+  IconX,
+} from "@tabler/icons-react";
+import type { ClientResponseError } from "pocketbase";
+import { toast } from "sonner";
+
+import type { WorkshopSubmission, WorkshopVote } from "@site/src/lib/pocketbase";
+import { getWorkshopBackend } from "@site/src/lib/pocketbase";
+import type { SubmissionType } from "@site/src/lib/workshop-schema";
+import type { HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
+import {
+  MAX_WORKSHOP_SCREENSHOTS,
+  MAX_WORKSHOP_SCREENSHOT_BYTES,
+  WORKSHOP_SCREENSHOT_MIME_TYPES,
+} from "@homarr/workshop";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Toaster } from "@/components/ui/sonner";
+import { CustomWidgetCodeExample, CustomWidgetCodeInput } from "../custom-widget-code";
+import { validateSubmissionContent } from "@site/src/lib/workshop-schema";
+import { cn, errorMessage, oauthErrorMessage } from "@site/src/lib/utils";
+
+import { CommentsSection } from "./DetailComments";
+import { CodeBlock, DeleteConfirmButton, DetailSkeleton, ScreenshotGallery } from "./DetailSections";
+import { formatRelativeTime } from "./format";
+import { ScreenshotEditor } from "./ScreenshotEditor";
+import { WorkshopErrorBoundary } from "./WorkshopErrorBoundary";
+import { downloadSubmissionJson, voteAndReconcile } from "./workshop-utils";
+
+const typeLabels: Record<SubmissionType, string> = { customCss: "CSS", customWidget: "Widget" };
+const typeDotColors: Record<SubmissionType, string> = { customCss: "bg-blue-500", customWidget: "bg-yellow-500" };
+const contentLanguages: Record<SubmissionType, string> = { customCss: "css", customWidget: "json" };
+const copyState = [
+  { Icon: IconCopy, iconClass: "" },
+  { Icon: IconCheck, iconClass: "text-green-500" },
+] as const;
+
+interface PendingScreenshot {
+  id: string;
+  file: File;
+  previewUrl: string;
+}
+
+const parseSubmissionId = (pathname: string) => {
+  const segments = pathname.split("/").filter(Boolean);
+  const last = segments[segments.length - 1];
+  if (!last || last === "workshop") return null;
+  return last;
+};
+
+const isNotFound = (caught: unknown) =>
+  typeof caught === "object" && caught !== null && "status" in caught && (caught as ClientResponseError).status === 404;
+
+const avatarFallback = (name: string) => name.trim().slice(0, 1).toUpperCase() || "?";
+
+const sourceHost = (baseUrl: string) => {
+  try {
+    return new URL(baseUrl).host;
+  } catch {
+    return baseUrl;
+  }
+};
+
+const sourceAuthLabel = (auth: HomarrCustomWidgetV2["sources"][string]["auth"]) => {
+  if (typeof auth === "string")
+    return auth === "none" ? "No credentials" : auth === "basic" ? "Basic auth" : "Bearer token";
+  return auth.type === "apiKeyHeader" ? `API key header · ${auth.name}` : `API key query · ${auth.name}`;
+};
+
+const sourceNeedsSecret = (auth: HomarrCustomWidgetV2["sources"][string]["auth"]) => auth !== "none";
+
+const WidgetSafetySummary = ({ widget }: { widget: HomarrCustomWidgetV2 }) => {
+  const sources = Object.entries(widget.sources);
+  const requests = Object.values(widget.requests);
+  const protectedSources = sources.filter(([, source]) => sourceNeedsSecret(source.auth));
+  const queryCount = requests.filter((request) => request.kind === "query").length;
+  const actionCount = requests.filter((request) => request.kind === "action").length;
+  const credentialLabel =
+    protectedSources.length === 0
+      ? "None required"
+      : protectedSources.length === 1
+        ? sourceAuthLabel(protectedSources[0][1].auth)
+        : `${protectedSources.length} credentials required`;
+
+  return (
+    <section
+      aria-labelledby="workshop-mobile-safety-heading"
+      className="mt-6 overflow-hidden rounded-lg border border-border bg-muted/20 xl:hidden"
+    >
+      <div className="flex items-start gap-3 border-b border-border px-4 py-3.5">
+        <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+          <IconInfoCircle size={17} />
+        </div>
+        <div className="min-w-0 flex-1">
+          <h2 id="workshop-mobile-safety-heading" className="text-sm font-semibold">
+            Before you install
+          </h2>
+          <p className="mt-0.5 text-xs leading-relaxed text-muted-foreground sm:text-sm">
+            Review its connections and credentials. Secrets are added in Homarr and never included in the download.
+          </p>
+        </div>
+      </div>
+
+      <dl className="grid text-sm sm:grid-cols-[minmax(0,1fr)_minmax(10rem,0.65fr)_auto] sm:divide-x sm:divide-border">
+        <div className="min-w-0 px-4 py-3">
+          <dt className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+            <IconServer size={14} /> Connects to
+          </dt>
+          <dd className="mt-1.5 space-y-1.5">
+            {sources.slice(0, 2).map(([id, source]) => (
+              <span key={id} className="flex min-w-0 items-center justify-between gap-2">
+                <span className="truncate font-mono text-xs font-medium">{sourceHost(source.baseUrl)}</span>
+                <Badge variant="secondary" className="shrink-0 font-normal">
+                  {source.networkScope}
+                </Badge>
+              </span>
+            ))}
+            {sources.length > 2 && <span className="text-xs text-muted-foreground">+{sources.length - 2} more</span>}
+          </dd>
+        </div>
+
+        <div className="border-t border-border px-4 py-3 sm:border-t-0">
+          <dt className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+            <IconKey size={14} /> Credentials
+          </dt>
+          <dd className="mt-1.5 truncate font-medium">{credentialLabel}</dd>
+        </div>
+
+        <div className="border-t border-border px-4 py-3 sm:border-t-0">
+          <dt className="text-xs font-medium text-muted-foreground">Capabilities</dt>
+          <dd className="mt-1.5 whitespace-nowrap font-medium tabular-nums">
+            {queryCount} {queryCount === 1 ? "query" : "queries"}
+            {actionCount > 0 && ` · ${actionCount} ${actionCount === 1 ? "action" : "actions"}`}
+          </dd>
+        </div>
+      </dl>
+    </section>
+  );
+};
+
+const MarketplaceDetail = ({ workshopUrl }: { workshopUrl: string }) => {
+  const location = useLocation();
+  const submissionId = parseSubmissionId(location.pathname);
+  const backend = useMemo(() => getWorkshopBackend(workshopUrl), [workshopUrl]);
+
+  const [submission, setSubmission] = useState<WorkshopSubmission | null>(null);
+  const [userVote, setUserVote] = useState<WorkshopVote | undefined>();
+  const [user, setUser] = useState(backend.currentUser);
+  const [loading, setLoading] = useState(true);
+  const [notFound, setNotFound] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [copyFailed, setCopyFailed] = useState(false);
+  const [editOpen, setEditOpen] = useState(false);
+  const [editTitle, setEditTitle] = useState("");
+  const [editDescription, setEditDescription] = useState("");
+  const [editChangelog, setEditChangelog] = useState("");
+  const [editContent, setEditContent] = useState("");
+  const [editExistingScreenshots, setEditExistingScreenshots] = useState<string[]>([]);
+  const [editNewScreenshots, setEditNewScreenshots] = useState<PendingScreenshot[]>([]);
+  const [editScreenshotError, setEditScreenshotError] = useState<string | null>(null);
+  const [editError, setEditError] = useState<string | null>(null);
+  const [editPending, setEditPending] = useState(false);
+  const [reportOpen, setReportOpen] = useState(false);
+  const [reportCategory, setReportCategory] = useState("other");
+  const [reportExplanation, setReportExplanation] = useState("");
+  const [reportPending, setReportPending] = useState(false);
+  const [reportError, setReportError] = useState<string | null>(null);
+  const [reloadKey, setReloadKey] = useState(0);
+  const copyTimer = useRef<ReturnType<typeof setTimeout>>(null);
+  const copyFailedTimer = useRef<ReturnType<typeof setTimeout>>(null);
+  const editPreviewUrls = useRef(new Set<string>());
+  const voting = useRef(false);
+
+  const revokeEditPreviewUrls = useCallback(() => {
+    editPreviewUrls.current.forEach(URL.revokeObjectURL);
+    editPreviewUrls.current.clear();
+  }, []);
+
+  const resetEditScreenshotDraft = useCallback(() => {
+    revokeEditPreviewUrls();
+    setEditNewScreenshots([]);
+    setEditScreenshotError(null);
+  }, [revokeEditPreviewUrls]);
+
+  const requireUserId = useCallback(
+    async (action: string) => {
+      if (!backend.currentUser) {
+        try {
+          await backend.signInWithGitHub();
+        } catch (caught) {
+          setError(oauthErrorMessage(caught));
+          return null;
+        }
+      }
+      const userId = backend.currentUser?.id;
+      if (!userId) {
+        setError(`Sign in to ${action}`);
+        return null;
+      }
+      return userId;
+    },
+    [backend],
+  );
+
+  useEffect(() => {
+    void backend.refreshAuth();
+    return backend.subscribeToAuth(setUser);
+  }, [backend]);
+
+  useEffect(
+    () => () => {
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+      if (copyFailedTimer.current) clearTimeout(copyFailedTimer.current);
+      revokeEditPreviewUrls();
+    },
+    [revokeEditPreviewUrls],
+  );
+
+  useEffect(() => {
+    if (!submissionId) {
+      setNotFound(true);
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    setLoading(true);
+    setNotFound(false);
+    setError(null);
+
+    const load = async () => {
+      try {
+        const record = await backend.get(submissionId);
+        if (cancelled) return;
+        setSubmission(record);
+
+        if (backend.currentUser) {
+          const votes = await backend.listVotesForCurrentUser();
+          if (!cancelled) setUserVote(votes.find((vote) => vote.submission === submissionId));
+        }
+      } catch (caught) {
+        if (cancelled) return;
+        if (isNotFound(caught)) setNotFound(true);
+        else setError(errorMessage(caught, "Failed to load submission"));
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [backend, submissionId, reloadKey]);
+
+  const screenshotUrls = useMemo(
+    () => submission?.screenshots?.map((file) => backend.fileUrl(submission.id, file)) ?? [],
+    [submission, backend],
+  );
+
+  const widgetDefinition = useMemo<HomarrCustomWidgetV2 | null>(() => {
+    if (submission?.type !== "customWidget") return null;
+    const result = validateSubmissionContent("customWidget", submission.content);
+    return result.success && typeof result.data === "object" ? result.data : null;
+  }, [submission]);
+
+  const handleVote = async (value: 1 | -1) => {
+    if (!submission || voting.current) return;
+    voting.current = true;
+
+    if (!(await requireUserId("vote"))) {
+      voting.current = false;
+      return;
+    }
+
+    try {
+      const reconciled = await voteAndReconcile(backend, submission.id, value);
+      setSubmission(reconciled.submission);
+      setUserVote(reconciled.votes.find((vote) => vote.submission === submission.id));
+    } catch (caught) {
+      setError(errorMessage(caught, "Failed to register your vote"));
+    } finally {
+      voting.current = false;
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!submission) return;
+    try {
+      await backend.delete(submission.id);
+      window.location.href = "/workshop/";
+    } catch (caught) {
+      setError(errorMessage(caught, "Failed to delete submission"));
+    }
+  };
+
+  const handleOutdated = async () => {
+    if (!submission) return;
+    try {
+      const updated = await backend.toggleOutdated(submission.id, !submission.outdated);
+      setSubmission(updated);
+      setError(null);
+      toast.success(updated.outdated ? "Submission marked as outdated" : "Submission marked as current");
+    } catch (caught) {
+      setError(errorMessage(caught, "Failed to update submission status"));
+    }
+  };
+
+  const addEditScreenshots = (files: FileList | File[]) => {
+    const available = MAX_WORKSHOP_SCREENSHOTS - editExistingScreenshots.length - editNewScreenshots.length;
+    const selected = Array.from(files);
+    const supported = selected.filter(
+      (file) =>
+        WORKSHOP_SCREENSHOT_MIME_TYPES.includes(file.type as (typeof WORKSHOP_SCREENSHOT_MIME_TYPES)[number]) &&
+        file.size <= MAX_WORKSHOP_SCREENSHOT_BYTES,
+    );
+    const accepted = supported.slice(0, Math.max(0, available));
+
+    if (supported.length !== selected.length)
+      setEditScreenshotError("Use PNG, JPG, or WebP images no larger than 5 MB each.");
+    else if (accepted.length !== selected.length)
+      setEditScreenshotError(`A submission can have up to ${MAX_WORKSHOP_SCREENSHOTS} screenshots.`);
+    else setEditScreenshotError(null);
+
+    if (accepted.length === 0) return;
+    const additions = accepted.map((file) => {
+      const previewUrl = URL.createObjectURL(file);
+      editPreviewUrls.current.add(previewUrl);
+      return { id: `new:${previewUrl}`, file, previewUrl };
+    });
+    setEditNewScreenshots((current) => [...current, ...additions]);
+  };
+
+  const removeEditScreenshot = (id: string) => {
+    if (id.startsWith("saved:")) {
+      const filename = id.slice("saved:".length);
+      setEditExistingScreenshots((current) => current.filter((item) => item !== filename));
+    } else {
+      setEditNewScreenshots((current) => {
+        const removed = current.find((item) => item.id === id);
+        if (removed) {
+          URL.revokeObjectURL(removed.previewUrl);
+          editPreviewUrls.current.delete(removed.previewUrl);
+        }
+        return current.filter((item) => item.id !== id);
+      });
+    }
+    setEditScreenshotError(null);
+  };
+
+  const closeEdit = () => {
+    setEditOpen(false);
+    resetEditScreenshotDraft();
+  };
+
+  const openEdit = () => {
+    if (!submission) return;
+    resetEditScreenshotDraft();
+    setEditTitle(submission.title);
+    setEditDescription(submission.description);
+    setEditChangelog("");
+    setEditContent(submission.content);
+    setEditExistingScreenshots(submission.screenshots);
+    setEditError(null);
+    setEditOpen(true);
+  };
+
+  const handleEdit = async () => {
+    if (!submission) return;
+    const validation = validateSubmissionContent(submission.type, editContent);
+    if (!validation.success) {
+      setEditError(validation.error);
+      return;
+    }
+    setEditPending(true);
+    setEditError(null);
+    try {
+      const updated = await backend.update(
+        submission.id,
+        {
+          type: submission.type,
+          title: editTitle.trim(),
+          description: editDescription.trim(),
+          content: editContent,
+          changelog: editChangelog.trim(),
+          outdated: submission.outdated,
+        },
+        {
+          additions: editNewScreenshots.map((item) => item.file),
+          removals: submission.screenshots.filter((filename) => !editExistingScreenshots.includes(filename)),
+        },
+      );
+      setSubmission(updated);
+      closeEdit();
+      setError(null);
+      toast.success("Revision published", { description: "Your changes are now live in the Workshop." });
+    } catch (caught) {
+      setEditError(errorMessage(caught, "Failed to update submission"));
+    } finally {
+      setEditPending(false);
+    }
+  };
+
+  const handleReport = async () => {
+    if (!submission) return;
+    const userId = await requireUserId("report this submission");
+    if (!userId) return;
+    setReportPending(true);
+    setReportError(null);
+    try {
+      await backend.report(
+        submission.id,
+        reportCategory as "malicious" | "spam" | "copyright" | "inappropriate" | "other",
+        reportExplanation,
+      );
+      setReportOpen(false);
+      setReportExplanation("");
+      setError(null);
+      toast.success("Report submitted", { description: "A Workshop moderator can now review it." });
+    } catch (caught) {
+      setReportError(errorMessage(caught, "Failed to submit report"));
+    } finally {
+      setReportPending(false);
+    }
+  };
+
+  const handleCopy = async () => {
+    if (!submission) return;
+    try {
+      await navigator.clipboard.writeText(submission.content);
+      setCopied(true);
+      setCopyFailed(false);
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+      if (copyFailedTimer.current) clearTimeout(copyFailedTimer.current);
+      copyTimer.current = setTimeout(() => setCopied(false), 1500);
+    } catch {
+      setCopyFailed(true);
+      if (copyFailedTimer.current) clearTimeout(copyFailedTimer.current);
+      copyFailedTimer.current = setTimeout(() => setCopyFailed(false), 2000);
+    }
+  };
+
+  if (loading) return <DetailSkeleton />;
+
+  if (error && !submission) {
+    return (
+      <div className="mx-auto flex min-h-[50vh] max-w-xl flex-col items-center justify-center gap-4 px-4 text-center">
+        <div className="flex size-11 items-center justify-center rounded-xl bg-destructive/10 text-destructive">
+          <IconX size={22} />
+        </div>
+        <div>
+          <h1 className="text-xl font-semibold">Submission could not be loaded</h1>
+          <p className="mt-1 text-sm text-muted-foreground">Check the Workshop service and try again.</p>
+        </div>
+        <div className="flex flex-wrap justify-center gap-2">
+          <Button variant="outline" onClick={() => setReloadKey((value) => value + 1)}>
+            <IconRefresh size={15} /> Try loading again
+          </Button>
+          <Button variant="ghost" nativeButton={false} render={<Link to="/workshop" />}>
+            Back to Workshop
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (notFound || !submission) {
+    return (
+      <div className="mx-auto max-w-4xl px-4 py-16 text-center">
+        <p className="text-lg font-medium">Submission not found</p>
+        <p className="mt-1 text-sm text-muted-foreground">This listing may have been removed or the link is invalid.</p>
+        <Link
+          to="/workshop"
+          className="mt-6 inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          <IconArrowLeft size={14} /> Back to Workshop
+        </Link>
+      </div>
+    );
+  }
+
+  const score = submission.upvotes - submission.downvotes;
+  const { Icon: CopyIcon, iconClass: copyIconClass } = copyState[Number(copied)];
+
+  const canManage = user?.id === submission.author || user?.isAdmin === true;
+  const canEdit = user?.id === submission.author;
+  const signedInAuthor = user?.id === submission.author ? user : null;
+  const authorName = signedInAuthor?.displayName || submission.authorName;
+  const authorAvatarUrl = signedInAuthor?.avatarUrl || submission.authorAvatarUrl;
+  const authorGithubUsername = signedInAuthor?.githubUsername || submission.authorGithubUsername;
+  const authorGithubProfileUrl = signedInAuthor?.githubProfileUrl || submission.authorGithubProfileUrl;
+  const sources = widgetDefinition ? Object.entries(widgetDefinition.sources) : [];
+  const requests = widgetDefinition ? Object.entries(widgetDefinition.requests) : [];
+  const options = widgetDefinition ? Object.entries(widgetDefinition.options) : [];
+  const protectedSources = sources.filter(([, source]) => sourceNeedsSecret(source.auth));
+
+  return (
+    <div className="mx-auto max-w-[90rem] px-4 pb-20 pt-8 sm:px-6 lg:px-8">
+      <Toaster position="bottom-right" richColors />
+      <Link
+        to="/workshop"
+        className="mb-6 inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground"
+      >
+        <IconArrowLeft size={14} /> Back to Workshop
+      </Link>
+
+      {error && (
+        <Alert variant="destructive" className="mb-4">
+          <IconInfoCircle />
+          <AlertTitle>Workshop action failed</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      <div className="grid items-start gap-10 xl:grid-cols-[minmax(0,1fr)_22rem]">
+        <main className="min-w-0">
+          <header className="border-b border-border pb-6">
+            <div className="flex flex-wrap items-start justify-between gap-5">
+              <div className="min-w-0">
+                <div className="mb-3 flex flex-wrap items-center gap-2">
+                  <Badge variant="secondary" className="gap-1.5">
+                    <span className={cn("size-2 rounded-full", typeDotColors[submission.type])} />
+                    {typeLabels[submission.type]}
+                  </Badge>
+                  {submission.outdated && <Badge variant="destructive">Outdated</Badge>}
+                  <span className="text-xs text-muted-foreground">Revision {submission.revision}</span>
+                </div>
+                <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">{submission.title}</h1>
+                {submission.description && (
+                  <p className="mt-3 max-w-3xl text-base leading-relaxed text-muted-foreground">
+                    {submission.description}
+                  </p>
+                )}
+                <div className="mt-5 flex items-center gap-3">
+                  <a
+                    href={authorGithubProfileUrl || undefined}
+                    target={authorGithubProfileUrl ? "_blank" : undefined}
+                    rel="noreferrer"
+                  >
+                    <Avatar className="size-10 bg-primary/10 ring-1 ring-primary/20">
+                      {authorAvatarUrl && <AvatarImage src={authorAvatarUrl} alt="" />}
+                      <AvatarFallback className="bg-primary/10 text-sm text-primary">
+                        {avatarFallback(authorName)}
+                      </AvatarFallback>
+                    </Avatar>
+                  </a>
+                  <div className="min-w-0">
+                    <a
+                      href={authorGithubProfileUrl || undefined}
+                      target={authorGithubProfileUrl ? "_blank" : undefined}
+                      rel="noreferrer"
+                      className="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-primary"
+                    >
+                      {authorName}
+                      {authorGithubProfileUrl && <IconBrandGithub size={14} />}
+                    </a>
+                    <p className="text-xs text-muted-foreground">
+                      {authorGithubUsername ? `@${authorGithubUsername} · ` : ""}
+                      Published {formatRelativeTime(submission.created)}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-px rounded-lg border border-border bg-muted/40 p-1">
+                <button
+                  type="button"
+                  onClick={() => void handleVote(1)}
+                  aria-label="Upvote"
+                  aria-pressed={userVote?.value === 1}
+                  className={cn(
+                    "flex size-9 items-center justify-center rounded-md transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50",
+                    userVote?.value === 1 && "bg-primary/15 text-primary",
+                  )}
+                >
+                  <IconArrowBigUp size={18} />
+                </button>
+                <span
+                  aria-live="polite"
+                  className="min-w-7 text-center text-sm font-semibold tabular-nums text-foreground"
+                >
+                  {score}
+                </span>
+                <button
+                  type="button"
+                  onClick={() => void handleVote(-1)}
+                  aria-label="Downvote"
+                  aria-pressed={userVote?.value === -1}
+                  className={cn(
+                    "flex size-9 items-center justify-center rounded-md transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50",
+                    userVote?.value === -1 && "bg-primary/15 text-primary",
+                  )}
+                >
+                  <IconArrowBigDown size={18} />
+                </button>
+              </div>
+            </div>
+
+            {widgetDefinition && <WidgetSafetySummary widget={widgetDefinition} />}
+
+            <div className="mt-6 flex flex-wrap items-center gap-2">
+              {submission.type === "customWidget" && (
+                <Button size="sm" className="min-h-11 sm:min-h-8" onClick={() => downloadSubmissionJson(submission)}>
+                  <IconDownload size={14} /> Download widget JSON
+                </Button>
+              )}
+              <Button
+                variant={submission.type === "customCss" ? "default" : "outline"}
+                size="sm"
+                className="min-h-11 sm:min-h-8"
+                aria-live="polite"
+                onClick={() => void handleCopy()}
+              >
+                {copyFailed ? (
+                  <>
+                    <IconX size={14} className="text-destructive" /> Copy failed
+                  </>
+                ) : (
+                  <>
+                    <CopyIcon size={14} className={copyIconClass} />
+                    {copied ? "Copied" : submission.type === "customCss" ? "Copy CSS" : "Copy JSON"}
+                  </>
+                )}
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="min-h-11 text-muted-foreground sm:min-h-8"
+                onClick={() => setReportOpen(true)}
+              >
+                <IconFlag size={14} /> Report
+              </Button>
+            </div>
+          </header>
+
+          {screenshotUrls.length > 0 && (
+            <section className="mt-8">
+              <ScreenshotGallery urls={screenshotUrls} title={submission.title} />
+            </section>
+          )}
+
+          {submission.changelog && (
+            <section className="mt-8 border-l-2 border-primary/50 pl-4">
+              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">What changed</p>
+              <p className="mt-1 text-sm leading-relaxed">{submission.changelog}</p>
+            </section>
+          )}
+
+          <section className="mt-8" aria-labelledby="workshop-source-heading">
+            <div className="mb-3 flex items-end justify-between gap-3">
+              <div>
+                <h2 id="workshop-source-heading" className="text-lg font-semibold">
+                  Source
+                </h2>
+                <p className="mt-1 text-sm text-muted-foreground">Review exactly what will be installed.</p>
+              </div>
+            </div>
+            {submission.type === "customWidget" ? (
+              <CustomWidgetCodeExample
+                id={`workshop-${submission.id}`}
+                label="widget.json"
+                code={submission.content}
+                language="json"
+                height="min(58vh, 640px)"
+              />
+            ) : (
+              <CodeBlock content={submission.content} language={contentLanguages[submission.type]} />
+            )}
+          </section>
+
+          <div className="mt-12 border-t border-border pt-9">
+            <CommentsSection
+              submissionId={submission.id}
+              backend={backend}
+              currentUser={user}
+              onRequireAuth={requireUserId}
+            />
+          </div>
+        </main>
+
+        <aside className="space-y-6 xl:sticky xl:top-24">
+          <section className="rounded-xl border border-border bg-card p-5 shadow-sm">
+            <div className="flex items-start gap-3">
+              <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                <IconDownload size={17} />
+              </div>
+              <div>
+                <h2 className="font-semibold">Install in Homarr</h2>
+                <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
+                  {submission.type === "customWidget"
+                    ? "Download the JSON, then import it from Manage → Custom Widgets."
+                    : "Copy the CSS and paste it into your board's Custom CSS settings."}
+                </p>
+              </div>
+            </div>
+            <Link
+              to="/docs/management/workshop/"
+              className="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
+            >
+              Installation guide <IconExternalLink size={13} />
+            </Link>
+          </section>
+
+          {widgetDefinition && (
+            <section className="rounded-xl border border-border bg-card p-5 shadow-sm">
+              <h2 className="font-semibold">Widget details</h2>
+              <div className="mt-5 space-y-5">
+                <div>
+                  <div className="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    <IconServer size={14} /> API sources
+                  </div>
+                  <div className="space-y-2.5">
+                    {sources.map(([id, source]) => (
+                      <div key={id} className="min-w-0">
+                        <div className="flex items-center justify-between gap-2 text-sm">
+                          <span className="truncate font-medium">{source.name || id}</span>
+                          <Badge variant="secondary" className="shrink-0">
+                            {source.networkScope}
+                          </Badge>
+                        </div>
+                        <p className="truncate text-xs text-muted-foreground">{sourceHost(source.baseUrl)}</p>
+                        <p className="mt-0.5 text-xs text-muted-foreground">{sourceAuthLabel(source.auth)}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="border-t border-border pt-4">
+                  <div className="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    <IconSettings size={14} /> Capabilities
+                  </div>
+                  <div className="flex flex-wrap gap-1.5">
+                    <Badge variant="secondary">
+                      {requests.filter(([, request]) => request.kind === "query").length} queries
+                    </Badge>
+                    <Badge variant="secondary">
+                      {requests.filter(([, request]) => request.kind === "action").length} actions
+                    </Badge>
+                    <Badge variant="secondary">{options.length} options</Badge>
+                  </div>
+                  {requests.length > 0 && (
+                    <div className="mt-3 space-y-1.5">
+                      {requests.slice(0, 6).map(([id, request]) => (
+                        <div key={id} className="flex items-center justify-between gap-2 text-xs">
+                          <span className="truncate text-muted-foreground">{id}</span>
+                          <span className="shrink-0 font-mono font-medium">{request.method}</span>
+                        </div>
+                      ))}
+                      {requests.length > 6 && (
+                        <p className="text-xs text-muted-foreground">+{requests.length - 6} more</p>
+                      )}
+                    </div>
+                  )}
+                </div>
+
+                {options.length > 0 && (
+                  <div className="border-t border-border pt-4">
+                    <div className="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      <IconSettings size={14} /> Configurable options
+                    </div>
+                    <div className="space-y-2">
+                      {options.slice(0, 6).map(([id, option]) => (
+                        <div key={id} className="flex items-start justify-between gap-3 text-xs">
+                          <span className="min-w-0 truncate text-muted-foreground">{option.label}</span>
+                          <span className="shrink-0 font-medium">{option.control}</span>
+                        </div>
+                      ))}
+                      {options.length > 6 && (
+                        <p className="text-xs text-muted-foreground">+{options.length - 6} more</p>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                <div className="border-t border-border pt-4">
+                  <div className="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    <IconKey size={14} /> Credentials
+                  </div>
+                  {protectedSources.length > 0 ? (
+                    <>
+                      <p className="text-sm">
+                        {protectedSources.length} source{protectedSources.length === 1 ? " requires" : "s require"}{" "}
+                        credentials.
+                      </p>
+                      <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+                        Secrets are entered after import and are never included in Workshop downloads.
+                      </p>
+                    </>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">No credentials required.</p>
+                  )}
+                </div>
+              </div>
+            </section>
+          )}
+
+          {canManage && (
+            <section className="border-t border-border pt-5">
+              <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                Manage submission
+              </p>
+              <div className="grid gap-1">
+                {canEdit && (
+                  <Button variant="ghost" size="sm" className="justify-start" onClick={openEdit}>
+                    <IconPencil size={14} /> Edit submission
+                  </Button>
+                )}
+                <Button variant="ghost" size="sm" className="justify-start" onClick={() => void handleOutdated()}>
+                  <IconInfoCircle size={14} /> {submission.outdated ? "Mark current" : "Mark outdated"}
+                </Button>
+                <DeleteConfirmButton className="w-full justify-start" onConfirm={handleDelete} />
+              </div>
+            </section>
+          )}
+        </aside>
+      </div>
+      <Dialog
+        open={reportOpen}
+        onOpenChange={(open) => {
+          if (reportPending) return;
+          setReportOpen(open);
+          if (!open) setReportError(null);
+        }}
+      >
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Report submission</DialogTitle>
+            <DialogDescription>
+              Only Workshop moderators can review report details and reporter identities.
+            </DialogDescription>
+          </DialogHeader>
+          {reportError && (
+            <Alert variant="destructive">
+              <IconFlag />
+              <AlertTitle>Report was not submitted</AlertTitle>
+              <AlertDescription>{reportError}</AlertDescription>
+            </Alert>
+          )}
+          <label htmlFor="workshop-report-category" className="grid gap-1.5 text-sm">
+            Category
+            <Select value={reportCategory} onValueChange={(value) => setReportCategory(value as string)}>
+              <SelectTrigger id="workshop-report-category" className="h-10 w-full">
+                <SelectValue>{(value) => String(value).replace(/^./u, (letter) => letter.toUpperCase())}</SelectValue>
+              </SelectTrigger>
+              <SelectContent align="start">
+                <SelectItem value="malicious">Malicious</SelectItem>
+                <SelectItem value="spam">Spam</SelectItem>
+                <SelectItem value="copyright">Copyright</SelectItem>
+                <SelectItem value="inappropriate">Inappropriate</SelectItem>
+                <SelectItem value="other">Other</SelectItem>
+              </SelectContent>
+            </Select>
+          </label>
+          <label htmlFor="workshop-report-explanation" className="grid gap-1.5 text-sm">
+            Explanation
+            <Textarea
+              id="workshop-report-explanation"
+              value={reportExplanation}
+              onChange={(event) => setReportExplanation(event.target.value)}
+              placeholder="Explain what should be reviewed"
+              maxLength={1000}
+              rows={5}
+            />
+          </label>
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setReportOpen(false)} disabled={reportPending}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              disabled={reportPending || reportExplanation.trim().length < 3}
+              onClick={() => void handleReport()}
+            >
+              {reportPending && <IconLoader2 size={14} className="animate-spin" />}
+              {reportPending ? "Submitting…" : "Submit report"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <Dialog
+        open={editOpen}
+        onOpenChange={(open) => {
+          if (editPending) return;
+          if (open) setEditOpen(true);
+          else closeEdit();
+        }}
+      >
+        <DialogContent className="max-h-[92vh] overflow-y-auto sm:max-w-5xl">
+          <DialogHeader>
+            <DialogTitle>Edit submission</DialogTitle>
+            <DialogDescription>Saving creates a new revision and keeps the same Workshop URL.</DialogDescription>
+          </DialogHeader>
+          {editError && (
+            <Alert variant="destructive">
+              <IconInfoCircle />
+              <AlertTitle>Revision could not be saved</AlertTitle>
+              <AlertDescription className="whitespace-pre-wrap">{editError}</AlertDescription>
+            </Alert>
+          )}
+          <div className="grid gap-5 lg:grid-cols-[minmax(0,1.45fr)_minmax(18rem,0.55fr)]">
+            <CustomWidgetCodeInput
+              id="workshop-edit-content"
+              label={submission.type === "customWidget" ? "Widget JSON" : "Custom CSS"}
+              language={submission.type === "customWidget" ? "json" : "css"}
+              value={editContent}
+              onChange={setEditContent}
+              height="min(46vh, 460px)"
+              required
+            />
+            <div className="flex flex-col gap-4">
+              <label htmlFor="workshop-edit-title" className="grid gap-1.5 text-sm">
+                Title
+                <Input
+                  id="workshop-edit-title"
+                  value={editTitle}
+                  onChange={(event) => setEditTitle(event.target.value)}
+                />
+              </label>
+              <label htmlFor="workshop-edit-description" className="grid gap-1.5 text-sm">
+                Description
+                <Textarea
+                  id="workshop-edit-description"
+                  value={editDescription}
+                  onChange={(event) => setEditDescription(event.target.value)}
+                  rows={5}
+                />
+              </label>
+              <label htmlFor="workshop-edit-changelog" className="grid gap-1.5 text-sm">
+                Changelog
+                <Textarea
+                  id="workshop-edit-changelog"
+                  value={editChangelog}
+                  onChange={(event) => setEditChangelog(event.target.value)}
+                  placeholder="What changed?"
+                  rows={4}
+                />
+              </label>
+            </div>
+          </div>
+          <div className="border-t border-border pt-5">
+            <ScreenshotEditor
+              items={[
+                ...editExistingScreenshots.map((filename) => ({
+                  id: `saved:${filename}`,
+                  src: backend.fileUrl(submission.id, filename),
+                  badge: "Current",
+                })),
+                ...editNewScreenshots.map((item) => ({
+                  id: item.id,
+                  src: item.previewUrl,
+                  badge: "New",
+                })),
+              ]}
+              onAdd={addEditScreenshots}
+              onRemove={removeEditScreenshot}
+              disabled={editPending}
+              description="Keep, remove, or add images for this revision. Changes apply only when you save."
+            />
+            {editScreenshotError && <p className="mt-2 text-xs text-destructive">{editScreenshotError}</p>}
+          </div>
+          <DialogFooter>
+            <Button variant="ghost" onClick={closeEdit} disabled={editPending}>
+              Cancel
+            </Button>
+            <Button
+              disabled={editPending || editTitle.trim().length < 3 || !editContent.trim()}
+              onClick={() => void handleEdit()}
+            >
+              {editPending && <IconLoader2 size={14} className="animate-spin" />}
+              {editPending ? "Saving…" : "Save revision"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default function MarketplaceDetailPage() {
+  const { siteConfig } = useDocusaurusContext();
+  const configuredWorkshopUrl = (siteConfig.customFields?.workshopUrl as string | undefined) ?? "";
+
+  useEffect(() => {
+    document.documentElement.removeAttribute("data-workshop-detail-loading");
+  }, []);
+
+  return (
+    <Layout title="Workshop" description="Community custom CSS and custom widgets for Homarr">
+      <main className="marketplace bg-background text-foreground min-h-[80vh]">
+        <BrowserOnly fallback={<DetailSkeleton />}>
+          {() => (
+            <WorkshopErrorBoundary>
+              <MarketplaceDetail workshopUrl={configuredWorkshopUrl || window.location.origin} />
+            </WorkshopErrorBoundary>
+          )}
+        </BrowserOnly>
+      </main>
+    </Layout>
+  );
+}
diff --git a/apps/docs/src/components/workshop/DetailSections.spec.tsx b/apps/docs/src/components/workshop/DetailSections.spec.tsx
new file mode 100644
index 000000000..df0dea378
--- /dev/null
+++ b/apps/docs/src/components/workshop/DetailSections.spec.tsx
@@ -0,0 +1,43 @@
+// @vitest-environment jsdom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ScreenshotGallery } from "./DetailSections";
+
+vi.mock("@docusaurus/theme-common", () => ({ useColorMode: () => ({ colorMode: "light" }) }));
+
+let host: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+
+afterEach(async () => {
+  await act(() => root.unmount());
+  host.remove();
+});
+
+async function render(urls: string[]) {
+  await act(async () => root.render(<ScreenshotGallery urls={urls} title="Gallery" />));
+}
+
+describe("ScreenshotGallery", () => {
+  it("resets an out-of-range selection when screenshots shrink", async () => {
+    await render(["/one.png", "/two.png", "/three.png"]);
+    const thirdThumbnail = host.querySelector<HTMLButtonElement>('button[aria-label="Show screenshot 3"]');
+    if (!thirdThumbnail) throw new Error("Third screenshot thumbnail was not rendered");
+    await act(async () => thirdThumbnail.click());
+    expect(host.querySelector<HTMLImageElement>('img[alt="Gallery screenshot 3"]')?.src).toContain("/three.png");
+
+    await render(["/one.png"]);
+    expect(host.querySelector<HTMLImageElement>('img[alt="Gallery screenshot 1"]')?.src).toContain("/one.png");
+    expect(host.querySelector('img[alt="Gallery screenshot 3"]')).toBeNull();
+  });
+});
diff --git a/apps/docs/src/components/workshop/DetailSections.tsx b/apps/docs/src/components/workshop/DetailSections.tsx
new file mode 100644
index 000000000..fa1bce490
--- /dev/null
+++ b/apps/docs/src/components/workshop/DetailSections.tsx
@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from "react";
+import { useColorMode } from "@docusaurus/theme-common";
+import { IconChevronLeft, IconChevronRight, IconTrash } from "@tabler/icons-react";
+import { Highlight, themes } from "prism-react-renderer";
+
+import { Button } from "@/components/ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@site/src/lib/utils";
+import { clampScreenshotIndex } from "./workshop-utils";
+
+const prismThemes = { light: themes.github, dark: themes.dracula } as const;
+const colorModeKeys = { dark: "dark", light: "light" } as const;
+
+export const DetailSkeleton = () => (
+  <div className="mx-auto max-w-[90rem] space-y-6 px-4 py-8 sm:px-6 lg:px-8">
+    <Skeleton className="h-4 w-24" />
+    <div className="grid gap-10 xl:grid-cols-[minmax(0,1fr)_22rem]">
+      <div className="space-y-6">
+        <div className="space-y-2">
+          <Skeleton className="h-9 w-2/3" />
+          <Skeleton className="h-4 w-2/5" />
+        </div>
+        <Skeleton className="aspect-video w-full rounded-xl" />
+        <Skeleton className="h-96 rounded-xl" />
+      </div>
+      <div className="space-y-5">
+        <Skeleton className="h-40 rounded-xl" />
+        <Skeleton className="h-72 rounded-xl" />
+      </div>
+    </div>
+  </div>
+);
+
+export const ScreenshotGallery = ({ urls, title }: { urls: string[]; title: string }) => {
+  const [idx, setIdx] = useState(0);
+  const selectedIndex = clampScreenshotIndex(idx, urls.length);
+  useEffect(() => setIdx((current) => clampScreenshotIndex(current, urls.length)), [urls.length]);
+
+  if (urls.length === 0) return null;
+
+  return (
+    <div className="group/gallery w-full">
+      <div className="relative aspect-video overflow-hidden rounded-lg border border-border bg-muted">
+        <img
+          className="h-full w-full object-contain"
+          src={urls[selectedIndex]}
+          alt={`${title} screenshot ${selectedIndex + 1}`}
+        />
+        {urls.length > 1 && (
+          <>
+            <button
+              type="button"
+              className="absolute left-3 top-1/2 flex size-11 -translate-y-1/2 items-center justify-center rounded-lg bg-background/85 opacity-80 shadow-sm transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring sm:size-9"
+              onClick={() => setIdx((i) => (i - 1 + urls.length) % urls.length)}
+              aria-label="Previous screenshot"
+            >
+              <IconChevronLeft size={16} />
+            </button>
+            <button
+              type="button"
+              className="absolute right-3 top-1/2 flex size-11 -translate-y-1/2 items-center justify-center rounded-lg bg-background/85 opacity-80 shadow-sm transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring sm:size-9"
+              onClick={() => setIdx((i) => (i + 1) % urls.length)}
+              aria-label="Next screenshot"
+            >
+              <IconChevronRight size={16} />
+            </button>
+          </>
+        )}
+      </div>
+      {urls.length > 1 && (
+        <fieldset className="mt-3 min-w-0">
+          <legend className="sr-only">Screenshot previews</legend>
+          <div className="flex gap-2 overflow-x-auto pb-1">
+            {urls.map((url, i) => {
+              const selected = i === selectedIndex;
+              return (
+                <button
+                  type="button"
+                  key={url}
+                  onClick={() => setIdx(i)}
+                  aria-label={`Show screenshot ${i + 1}`}
+                  aria-pressed={selected}
+                  className={cn(
+                    "aspect-video w-24 shrink-0 overflow-hidden rounded-md border-2 bg-muted transition-[border-color,opacity,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:w-28",
+                    selected
+                      ? "border-primary opacity-100 ring-2 ring-primary/20"
+                      : "border-border opacity-65 hover:border-muted-foreground/60 hover:opacity-100",
+                  )}
+                >
+                  <img className="h-full w-full object-cover" src={url} alt="" loading={selected ? "eager" : "lazy"} />
+                </button>
+              );
+            })}
+          </div>
+        </fieldset>
+      )}
+    </div>
+  );
+};
+
+export const CodeBlock = ({ content, language }: { content: string; language: string }) => {
+  const { colorMode } = useColorMode();
+  const theme = prismThemes[colorModeKeys[colorMode as keyof typeof colorModeKeys] ?? "light"];
+
+  return (
+    <Highlight theme={theme} code={content} language={language}>
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <pre
+          className={cn(className, "overflow-auto rounded-lg border border-border p-4 text-sm leading-relaxed")}
+          style={style}
+        >
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line })}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({ token })} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+};
+
+export const DeleteConfirmButton = ({ onConfirm, className }: { onConfirm: () => void; className?: string }) => {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger
+        render={
+          <Button variant="outline" size="sm" className={cn("text-destructive hover:bg-destructive/10", className)} />
+        }
+      >
+        <IconTrash size={14} /> Delete
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogMedia className="bg-destructive/10 text-destructive">
+            <IconTrash />
+          </AlertDialogMedia>
+          <AlertDialogTitle>Delete submission?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This permanently removes the Workshop listing, screenshots, votes, reports, and comments.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction variant="destructive" onClick={onConfirm}>
+            Delete submission
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
diff --git a/apps/docs/src/components/workshop/ScreenshotEditor.tsx b/apps/docs/src/components/workshop/ScreenshotEditor.tsx
new file mode 100644
index 000000000..d9608d752
--- /dev/null
+++ b/apps/docs/src/components/workshop/ScreenshotEditor.tsx
@@ -0,0 +1,125 @@
+import { useState } from "react";
+import { IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export interface ScreenshotEditorItem {
+  id: string;
+  src: string;
+  badge?: string;
+}
+
+interface ScreenshotEditorProps {
+  items: ScreenshotEditorItem[];
+  onAdd: (files: FileList | File[]) => void;
+  onRemove: (id: string) => void;
+  disabled?: boolean;
+  description?: string;
+  max?: number;
+}
+
+const dropState = {
+  idle: { Icon: IconUpload, title: "Choose or drop images", iconClass: "bg-muted text-muted-foreground" },
+  active: { Icon: IconPhoto, title: "Drop images here", iconClass: "bg-primary text-primary-foreground" },
+} as const;
+
+export const ScreenshotEditor = ({
+  items,
+  onAdd,
+  onRemove,
+  disabled = false,
+  description = "Add screenshots to help others preview your submission.",
+  max = 5,
+}: ScreenshotEditorProps) => {
+  const [dragOver, setDragOver] = useState(false);
+  const full = items.length >= max;
+  const { Icon, title, iconClass } = dropState[dragOver ? "active" : "idle"];
+
+  return (
+    <section className="flex flex-col gap-3" aria-labelledby="workshop-screenshots-heading">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h3 id="workshop-screenshots-heading" className="text-sm font-medium">
+            Screenshots
+          </h3>
+          <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>
+        </div>
+        <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+          {items.length}/{max}
+        </span>
+      </div>
+
+      {items.length > 0 && (
+        <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-5">
+          {items.map((item, index) => (
+            <div
+              key={item.id}
+              className="group relative aspect-[16/10] overflow-hidden rounded-lg border border-border bg-muted"
+            >
+              <img src={item.src} alt={`Screenshot ${index + 1}`} className="size-full object-cover" />
+              {item.badge && (
+                <span className="absolute bottom-1.5 left-1.5 rounded-md bg-background/90 px-1.5 py-0.5 text-[10px] font-medium text-foreground shadow-sm backdrop-blur-sm">
+                  {item.badge}
+                </span>
+              )}
+              <Button
+                type="button"
+                variant="destructive"
+                size="icon-sm"
+                disabled={disabled}
+                onClick={() => onRemove(item.id)}
+                className="absolute top-1.5 right-1.5 opacity-90 shadow-sm transition-opacity group-hover:opacity-100"
+                aria-label={`Remove screenshot ${index + 1}`}
+              >
+                <IconX size={14} />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {!full && (
+        // oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+        <label
+          onDragOver={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!disabled) setDragOver(true);
+          }}
+          onDragLeave={() => setDragOver(false)}
+          onDrop={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            setDragOver(false);
+            if (!disabled) onAdd(event.dataTransfer.files);
+          }}
+          className={cn(
+            "flex cursor-pointer items-center gap-3 rounded-lg border border-dashed border-border px-4 py-3 transition-colors hover:border-primary/50 hover:bg-primary/5",
+            dragOver && "border-primary bg-primary/10",
+            disabled && "pointer-events-none opacity-50",
+          )}
+        >
+          <span className={cn("flex size-9 shrink-0 items-center justify-center rounded-lg", iconClass)}>
+            <Icon size={18} />
+          </span>
+          <span className="min-w-0">
+            <span className="block text-sm font-medium">{title}</span>
+            <span className="block text-xs text-muted-foreground">PNG, JPG, or WebP · up to 5 MB each</span>
+          </span>
+          <input
+            type="file"
+            accept="image/png,image/jpeg,image/webp"
+            multiple
+            disabled={disabled}
+            className="hidden"
+            onChange={(event) => {
+              if (event.target.files) onAdd(event.target.files);
+              event.currentTarget.value = "";
+            }}
+          />
+        </label>
+      )}
+    </section>
+  );
+};
diff --git a/apps/docs/src/components/workshop/SubmitForm.tsx b/apps/docs/src/components/workshop/SubmitForm.tsx
new file mode 100644
index 000000000..ba4dddf98
--- /dev/null
+++ b/apps/docs/src/components/workshop/SubmitForm.tsx
@@ -0,0 +1,498 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  IconAlertCircle,
+  IconBraces,
+  IconCheck,
+  IconChevronLeft,
+  IconChevronRight,
+  IconFileUpload,
+  IconLoader2,
+  IconPalette,
+} from "@tabler/icons-react";
+
+import type { SubmissionType } from "@site/src/lib/workshop-schema";
+import { validateSubmissionContent } from "@site/src/lib/workshop-schema";
+
+import { CustomWidgetCodeInput } from "@/components/custom-widget-code";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn, errorMessage } from "@/lib/utils";
+
+import type { SubmitInput } from "./useWorkshop";
+import { ScreenshotEditor } from "./ScreenshotEditor";
+
+interface Props {
+  onClose: () => void;
+  onSubmit: (input: SubmitInput) => Promise<void>;
+}
+
+const steps = ["Type", "Details", "Media"] as const;
+const navDirection = [-1, 1];
+const stepAnimClass = ["submit-step-from-left", "submit-step-from-right"];
+const backLabels = ["Cancel", "Back"];
+const submitLabels = ["Publish submission", "Publishing…"];
+const connectorClass = ["bg-border", "bg-primary"];
+const dropOverlayClass = ["pointer-events-none opacity-0", "opacity-100"];
+
+const placeholders: Record<SubmissionType, string> = {
+  customWidget: '{\n  "$schema": "homarr-custom-widget-v2",\n  "name": "My widget",\n  ...\n}',
+  customCss: ".grid-stack-item-content {\n  border-radius: 16px;\n}",
+};
+const contentLabels: Record<SubmissionType, string> = {
+  customWidget: "Widget JSON (homarr-custom-widget-v2)",
+  customCss: "Custom CSS",
+};
+
+const parseJsonObject = (json: string): Record<string, unknown> | null => {
+  try {
+    const parsed = JSON.parse(json);
+    if (typeof parsed === "object" && parsed !== null) return parsed;
+  } catch {
+    /* invalid json */
+  }
+  return null;
+};
+
+export const SubmitForm = ({ onClose, onSubmit }: Props) => {
+  const [step, setStep] = useState(0);
+  const [direction, setDirection] = useState(1);
+  const [type, setType] = useState<SubmissionType | null>(null);
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [changelog, setChangelog] = useState("Initial publication");
+  const [content, setContent] = useState("");
+  const [screenshots, setScreenshots] = useState<File[]>([]);
+  const [previews, setPreviews] = useState<string[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+  const [jsonDropHint, setJsonDropHint] = useState(false);
+  const previewUrlsRef = useRef<Set<string>>(new Set());
+
+  const canAdvance = [type !== null, title.trim().length >= 3 && content.trim().length > 0, true];
+
+  const goTo = useCallback(
+    (next: number) => {
+      setDirection(navDirection[Number(next > step)]);
+      setStep(next);
+    },
+    [step],
+  );
+
+  const setContentAndAutofill = useCallback((json: string, currentTitle: string, currentDesc: string) => {
+    setContent(json);
+    const meta = parseJsonObject(json);
+    if (!meta) return;
+    if (typeof meta.name === "string" && !currentTitle) setTitle(meta.name);
+    if (typeof meta.description === "string" && !currentDesc) setDescription(String(meta.description));
+  }, []);
+
+  const handleJsonFileDrop = useCallback(
+    (files: FileList | File[]) => {
+      const jsonFile = Array.from(files).find((f) => f.name.endsWith(".json") || f.type === "application/json");
+      if (!jsonFile) return false;
+      const reader = new FileReader();
+      reader.addEventListener("load", (e) => {
+        const text = e.target?.result as string;
+        setType("customWidget");
+        setContentAndAutofill(text, title, description);
+        if (step === 0) goTo(1);
+      });
+      reader.addEventListener("error", () => setError("Could not read the file"));
+      reader.readAsText(jsonFile);
+      return true;
+    },
+    [step, title, description, setContentAndAutofill, goTo],
+  );
+
+  const addImageFiles = useCallback(
+    (files: FileList | File[]) => {
+      const incoming = Array.from(files)
+        .filter((f) => f.type.startsWith("image/"))
+        .slice(0, 5 - screenshots.length);
+      if (incoming.length === 0) return;
+      setScreenshots((prev) => [...prev, ...incoming].slice(0, 5));
+      const urls = incoming.map((f) => {
+        const url = URL.createObjectURL(f);
+        previewUrlsRef.current.add(url);
+        return url;
+      });
+      setPreviews((prev) => [...prev, ...urls].slice(0, 5));
+    },
+    [screenshots.length],
+  );
+
+  const removeScreenshot = (idx: number) => {
+    const url = previews[idx];
+    if (url) {
+      previewUrlsRef.current.delete(url);
+      URL.revokeObjectURL(url);
+    }
+    setScreenshots((prev) => prev.filter((_, i) => i !== idx));
+    setPreviews((prev) => prev.filter((_, i) => i !== idx));
+  };
+
+  useEffect(
+    () => () => {
+      previewUrlsRef.current.forEach(URL.revokeObjectURL);
+      previewUrlsRef.current.clear();
+    },
+    [],
+  );
+
+  const handleGlobalDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setJsonDropHint(false);
+      if (!handleJsonFileDrop(e.dataTransfer.files) && step === 2) addImageFiles(e.dataTransfer.files);
+    },
+    [handleJsonFileDrop, step, addImageFiles],
+  );
+
+  const handleSubmit = async () => {
+    if (!type) return;
+    const validation = validateSubmissionContent(type, content);
+    if (!validation.success) {
+      setError(validation.error);
+      goTo(1);
+      return;
+    }
+    setError(null);
+    setPending(true);
+    try {
+      await onSubmit({ type, title, description, changelog, content, screenshots });
+    } catch (caught) {
+      setError(errorMessage(caught, "Submission failed"));
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const onContentChange = (value: string) => {
+    if (type === "customWidget") setContentAndAutofill(value, title, description);
+    else setContent(value);
+  };
+
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open && !pending) onClose();
+      }}
+    >
+      {/* oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+      <DialogContent
+        className="max-h-[92vh] overflow-y-auto sm:max-w-5xl"
+        showCloseButton={!pending}
+        onDragOver={(e: React.DragEvent) => {
+          e.preventDefault();
+          setJsonDropHint(true);
+        }}
+        onDragLeave={() => setJsonDropHint(false)}
+        onDrop={handleGlobalDrop}
+      >
+        <div
+          aria-hidden={!jsonDropHint}
+          className={cn(
+            "absolute inset-0 z-50 flex flex-col items-center justify-center gap-3 rounded-xl bg-primary/10 backdrop-blur-sm transition-opacity duration-200",
+            dropOverlayClass[Number(jsonDropHint)],
+          )}
+        >
+          <div className="flex size-14 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
+            <IconFileUpload size={28} />
+          </div>
+          <p className="text-sm font-semibold">Drop JSON file to import widget</p>
+          <p className="text-xs text-muted-foreground">Title and description will be auto-filled</p>
+        </div>
+
+        <DialogHeader>
+          <DialogTitle>Share with the community</DialogTitle>
+          <DialogDescription>Submit a custom CSS theme or widget to the Workshop.</DialogDescription>
+        </DialogHeader>
+
+        <div className="flex items-center gap-2">
+          {steps.map((label, i) => (
+            <React.Fragment key={label}>
+              {i > 0 && <div className={cn("h-px flex-1 transition-colors", connectorClass[Number(i <= step)])} />}
+              <button
+                type="button"
+                onClick={() => {
+                  if (i < step) goTo(i);
+                }}
+                disabled={i > step}
+                aria-current={i === step ? "step" : undefined}
+                className={cn(
+                  "flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium transition-all",
+                  i === step && "bg-primary text-primary-foreground shadow-sm",
+                  i < step && "bg-primary/10 text-primary cursor-pointer hover:bg-primary/20",
+                  i > step && "bg-muted text-muted-foreground disabled:cursor-default",
+                )}
+              >
+                {i < step ? <IconCheck size={12} /> : <span className="tabular-nums">{i + 1}</span>}
+                {label}
+              </button>
+            </React.Fragment>
+          ))}
+        </div>
+
+        {error && (
+          <Alert variant="destructive">
+            <IconAlertCircle />
+            <AlertTitle>Submission needs attention</AlertTitle>
+            <AlertDescription className="whitespace-pre-wrap">{error}</AlertDescription>
+          </Alert>
+        )}
+
+        <div className="relative min-h-[280px] overflow-hidden">
+          <div key={step} className={cn("submit-step-enter", stepAnimClass[Number(direction > 0)])}>
+            {step === 0 && <StepType value={type} onChange={setType} onJsonDrop={handleJsonFileDrop} />}
+            {step === 1 && type && (
+              <StepDetails
+                type={type}
+                title={title}
+                setTitle={setTitle}
+                description={description}
+                setDescription={setDescription}
+                changelog={changelog}
+                setChangelog={setChangelog}
+                content={content}
+                onContentChange={onContentChange}
+              />
+            )}
+            {step === 2 && (
+              <ScreenshotEditor
+                items={previews.map((src) => ({ id: src, src }))}
+                onAdd={addImageFiles}
+                onRemove={(id) => removeScreenshot(previews.indexOf(id))}
+              />
+            )}
+          </div>
+        </div>
+
+        <DialogFooter className="sm:justify-between">
+          <Button
+            variant="ghost"
+            onClick={() => {
+              if (step === 0) onClose();
+              else goTo(step - 1);
+            }}
+            disabled={pending}
+          >
+            <IconChevronLeft size={14} /> {backLabels[Math.min(step, 1)]}
+          </Button>
+          <div className="flex items-center gap-2">
+            {step < 2 && (
+              <Button onClick={() => goTo(step + 1)} disabled={!canAdvance[step]}>
+                Next <IconChevronRight size={14} />
+              </Button>
+            )}
+            {step >= 2 && (
+              <Button onClick={() => void handleSubmit()} disabled={pending || !canAdvance[1]}>
+                {pending && <IconLoader2 size={14} className="animate-spin" />}
+                {submitLabels[Number(pending)]}
+              </Button>
+            )}
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const typeCards: { type: SubmissionType; icon: typeof IconBraces; label: string; desc: string }[] = [
+  {
+    type: "customWidget",
+    icon: IconBraces,
+    label: "Custom Widget",
+    desc: "A JSON-based widget using the homarr-custom-widget-v2 schema",
+  },
+  {
+    type: "customCss",
+    icon: IconPalette,
+    label: "Custom CSS",
+    desc: "A CSS theme or style override for Homarr dashboards",
+  },
+];
+
+const StepType = ({
+  value,
+  onChange,
+  onJsonDrop,
+}: {
+  value: SubmissionType | null;
+  onChange: (t: SubmissionType) => void;
+  onJsonDrop: (files: FileList | File[]) => boolean;
+}) => {
+  const [dropActive, setDropActive] = useState(false);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="grid grid-cols-2 gap-3">
+        {typeCards.map(({ type, icon: Icon, label, desc }) => (
+          <button
+            type="button"
+            key={type}
+            onClick={() => onChange(type)}
+            aria-pressed={value === type}
+            className={cn(
+              "group relative flex min-h-48 flex-col items-center justify-center gap-3 rounded-xl border-2 p-6 text-center transition-colors hover:border-primary/50 hover:bg-primary/5",
+              value === type ? "border-primary bg-primary/10 ring-1 ring-primary/20" : "border-border bg-card",
+            )}
+          >
+            <div
+              className={cn(
+                "flex size-12 items-center justify-center rounded-xl transition-colors",
+                value === type
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary",
+              )}
+            >
+              <Icon size={24} />
+            </div>
+            <div>
+              <p className="font-heading text-sm font-semibold">{label}</p>
+              <p className="mt-1 text-xs leading-relaxed text-muted-foreground">{desc}</p>
+            </div>
+            {value === type && (
+              <div className="absolute top-3 right-3 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground">
+                <IconCheck size={12} />
+              </div>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {/* oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+      <label
+        onDragOver={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setDropActive(true);
+        }}
+        onDragLeave={() => setDropActive(false)}
+        onDrop={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setDropActive(false);
+          onJsonDrop(e.dataTransfer.files);
+        }}
+        className={cn(
+          "flex cursor-pointer items-center gap-3 rounded-xl border border-dashed p-3 transition-all hover:border-primary/40 hover:bg-primary/5",
+          dropActive && "border-primary bg-primary/10",
+        )}
+      >
+        <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+          <IconFileUpload size={16} />
+        </div>
+        <div className="min-w-0">
+          <p className="text-xs font-medium">Or drop a .json file here</p>
+          <p className="text-xs text-muted-foreground">Auto-selects Widget type and fills title from JSON</p>
+        </div>
+        <input
+          type="file"
+          aria-label="Choose a widget JSON file"
+          accept=".json,application/json"
+          className="hidden"
+          onChange={(e) => {
+            if (e.target.files) onJsonDrop(e.target.files);
+          }}
+        />
+      </label>
+    </div>
+  );
+};
+
+const StepDetails = ({
+  type,
+  title,
+  setTitle,
+  description,
+  setDescription,
+  changelog,
+  setChangelog,
+  content,
+  onContentChange,
+}: {
+  type: SubmissionType;
+  title: string;
+  setTitle: (v: string) => void;
+  description: string;
+  setDescription: (v: string) => void;
+  changelog: string;
+  setChangelog: (v: string) => void;
+  content: string;
+  onContentChange: (v: string) => void;
+}) => (
+  <div className="grid gap-5 lg:grid-cols-[minmax(0,1.45fr)_minmax(18rem,0.55fr)]">
+    <div className="flex flex-col gap-1.5">
+      <CustomWidgetCodeInput
+        id="submit-content"
+        label={contentLabels[type]}
+        language={type === "customWidget" ? "json" : "css"}
+        value={content}
+        onChange={onContentChange}
+        placeholder={placeholders[type]}
+        required
+        height="min(44vh, 440px)"
+        maxLength={type === "customCss" ? 16_384 : undefined}
+        description={
+          type === "customWidget"
+            ? "Paste exported widget JSON. The title and description are filled from its metadata."
+            : "Paste the stylesheet that users will import into their board settings."
+        }
+      />
+    </div>
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1.5">
+        <label htmlFor="submit-title" className="text-xs font-medium text-muted-foreground">
+          Title *
+        </label>
+        <Input
+          id="submit-title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          required
+          minLength={3}
+          maxLength={100}
+          placeholder="My awesome theme"
+        />
+      </div>
+      <div className="flex flex-col gap-1.5">
+        <label htmlFor="submit-description" className="text-xs font-medium text-muted-foreground">
+          Description
+        </label>
+        <Textarea
+          id="submit-description"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          maxLength={2000}
+          rows={5}
+          placeholder="A brief description of what this does"
+        />
+      </div>
+      <div className="flex flex-col gap-1.5">
+        <label htmlFor="submit-changelog" className="text-xs font-medium text-muted-foreground">
+          Changelog
+        </label>
+        <Textarea
+          id="submit-changelog"
+          value={changelog}
+          onChange={(e) => setChangelog(e.target.value)}
+          maxLength={2000}
+          rows={4}
+          placeholder="What is included in this revision?"
+        />
+      </div>
+    </div>
+  </div>
+);
diff --git a/apps/docs/src/components/workshop/WorkshopAccountMenu.tsx b/apps/docs/src/components/workshop/WorkshopAccountMenu.tsx
new file mode 100644
index 000000000..8e083db2a
--- /dev/null
+++ b/apps/docs/src/components/workshop/WorkshopAccountMenu.tsx
@@ -0,0 +1,118 @@
+import React, { useEffect, useRef, useState } from "react";
+import { IconBrandGithub, IconChevronDown, IconExternalLink, IconLogout } from "@tabler/icons-react";
+
+import type { WorkshopUser } from "@homarr/workshop/schema";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const avatarFallback = (name: string) => name.trim().slice(0, 1).toUpperCase() || "?";
+
+const githubProfileUrl = (user: WorkshopUser) =>
+  user.githubProfileUrl ||
+  (user.githubUsername ? `https://github.com/${encodeURIComponent(user.githubUsername)}` : undefined);
+
+interface WorkshopAccountMenuProps {
+  user: WorkshopUser;
+  onSignOut: () => void;
+}
+
+export const WorkshopAccountMenu = ({ user, onSignOut }: WorkshopAccountMenuProps) => {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const profileUrl = githubProfileUrl(user);
+  const accountLabel = user.githubUsername ? `@${user.githubUsername}` : user.displayName || "Account";
+
+  useEffect(() => {
+    if (!open) return;
+
+    const closeOnOutsidePointer = (event: PointerEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
+    };
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+
+    document.addEventListener("pointerdown", closeOnOutsidePointer);
+    document.addEventListener("keydown", closeOnEscape);
+    return () => {
+      document.removeEventListener("pointerdown", closeOnOutsidePointer);
+      document.removeEventListener("keydown", closeOnEscape);
+    };
+  }, [open]);
+
+  return (
+    <div ref={rootRef} className="relative">
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-10 gap-2 px-2 sm:h-8"
+        aria-label="Workshop account menu"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+      >
+        <Avatar className="size-6">
+          {user.avatarUrl && <AvatarImage src={user.avatarUrl} alt="" />}
+          <AvatarFallback className="text-[10px]">{avatarFallback(user.displayName)}</AvatarFallback>
+        </Avatar>
+        <span className="max-w-36 truncate">{accountLabel}</span>
+        <IconChevronDown
+          size={13}
+          aria-hidden="true"
+          className={cn("text-muted-foreground transition-transform duration-150", open && "rotate-180")}
+        />
+      </Button>
+
+      {open && (
+        <div
+          role="menu"
+          aria-label="Workshop account"
+          className="absolute right-0 z-50 mt-2 w-64 rounded-lg border border-border bg-popover p-1.5 text-popover-foreground shadow-md"
+        >
+          <div className="flex items-center gap-3 px-2 py-2">
+            <Avatar className="size-9">
+              {user.avatarUrl && <AvatarImage src={user.avatarUrl} alt="" />}
+              <AvatarFallback>{avatarFallback(user.displayName)}</AvatarFallback>
+            </Avatar>
+            <div className="min-w-0">
+              <p className="truncate text-sm font-medium">{user.displayName}</p>
+              {user.githubUsername && <p className="truncate text-xs text-muted-foreground">@{user.githubUsername}</p>}
+            </div>
+          </div>
+
+          <div className="my-1 h-px bg-border" />
+
+          {profileUrl && (
+            <a
+              role="menuitem"
+              href={profileUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="flex h-9 items-center gap-2 rounded-md px-2 text-sm text-foreground no-underline hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+              onClick={() => setOpen(false)}
+            >
+              <IconBrandGithub size={16} aria-hidden="true" />
+              View GitHub profile
+              <IconExternalLink size={14} aria-hidden="true" className="ml-auto text-muted-foreground" />
+            </a>
+          )}
+
+          <button
+            type="button"
+            role="menuitem"
+            className="flex h-9 w-full items-center gap-2 rounded-md px-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+            onClick={() => {
+              setOpen(false);
+              onSignOut();
+            }}
+          >
+            <IconLogout size={16} aria-hidden="true" />
+            Sign out
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/docs/src/components/workshop/WorkshopAdmin.tsx b/apps/docs/src/components/workshop/WorkshopAdmin.tsx
new file mode 100644
index 000000000..ec4428115
--- /dev/null
+++ b/apps/docs/src/components/workshop/WorkshopAdmin.tsx
@@ -0,0 +1,319 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  IconBrandGithub,
+  IconExternalLink,
+  IconFlag,
+  IconLoader2,
+  IconRefresh,
+  IconShield,
+  IconTrash,
+} from "@tabler/icons-react";
+
+import { WorkshopBackend } from "@homarr/workshop/backend";
+import type { WorkshopReport, WorkshopSubmissionSummary, WorkshopUser } from "@homarr/workshop/schema";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+const avatarFallback = (name: string) => name.trim().slice(0, 1).toUpperCase() || "?";
+
+export function WorkshopAdmin({ workshopUrl }: { workshopUrl?: string }) {
+  const client = useMemo(() => {
+    const url = workshopUrl || (typeof window === "undefined" ? "" : window.location.origin);
+    return url ? new WorkshopBackend(url) : new WorkshopBackend();
+  }, [workshopUrl]);
+  const [user, setUser] = useState<WorkshopUser | null>(null);
+  const [reports, setReports] = useState<WorkshopReport[]>([]);
+  const [submissions, setSubmissions] = useState<WorkshopSubmissionSummary[]>([]);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [pendingDelete, setPendingDelete] = useState<WorkshopSubmissionSummary | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [nextReports, nextSubmissions] = await Promise.all([
+        client.listReports(),
+        client.listAll({ sort: "newest" }),
+      ]);
+      setReports(nextReports);
+      setSubmissions(nextSubmissions);
+      setError("");
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Unable to load Workshop moderation");
+    } finally {
+      setLoading(false);
+    }
+  }, [client]);
+
+  useEffect(() => {
+    const unsubscribe = client.subscribeToAuth(setUser);
+    void client.refreshAuth().then((nextUser) => {
+      setUser(nextUser);
+      if (nextUser?.isAdmin) void load();
+    });
+    return unsubscribe;
+  }, [client, load]);
+
+  const signIn = async () => {
+    try {
+      const nextUser = await client.signInWithGitHub();
+      setUser(nextUser);
+      if (nextUser?.isAdmin) await load();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "GitHub sign-in failed");
+    }
+  };
+
+  const dismiss = async (reportId: string) => {
+    setBusyId(reportId);
+    try {
+      await client.dismissReport(reportId);
+      await load();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Unable to dismiss report");
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const remove = async () => {
+    if (!pendingDelete) return;
+    setBusyId(pendingDelete.id);
+    try {
+      await client.delete(pendingDelete.id);
+      setPendingDelete(null);
+      await load();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Unable to delete submission");
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const grouped = submissions
+    .map((submission) => ({
+      submission,
+      reports: reports.filter((report) => report.submission === submission.id),
+    }))
+    .sort((left, right) => Number(right.reports.length > 0) - Number(left.reports.length > 0));
+
+  return (
+    <main className="marketplace mx-auto max-w-6xl px-4 pb-20 text-foreground sm:px-6">
+      <header className="flex flex-col gap-5 border-b border-border py-8 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <div className="mb-2 flex items-center gap-2 text-primary">
+            <IconShield size={18} />
+            <span className="text-sm font-medium">Restricted area</span>
+          </div>
+          <h1 className="text-3xl font-semibold tracking-tight">Workshop moderation</h1>
+          <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
+            Review reports and remove unsafe or outdated submissions. PocketBase rules enforce every action.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Button variant="outline" nativeButton={false} render={<a href="/workshop" aria-label="Back to Workshop" />}>
+            Back to Workshop
+          </Button>
+          {!user && (
+            <Button onClick={() => void signIn()}>
+              <IconBrandGithub size={15} /> Sign in with GitHub
+            </Button>
+          )}
+          {user?.isAdmin && (
+            <Button variant="outline" disabled={loading} onClick={() => void load()}>
+              <IconRefresh size={15} className={loading ? "animate-spin" : undefined} />
+              {loading ? "Refreshing" : "Refresh data"}
+            </Button>
+          )}
+        </div>
+      </header>
+
+      <div className="py-6">
+        {user && !user.isAdmin && (
+          <Alert variant="destructive" className="mb-5">
+            <IconShield />
+            <AlertTitle>Workshop moderator access required</AlertTitle>
+            <AlertDescription>This GitHub account cannot access Workshop moderation.</AlertDescription>
+          </Alert>
+        )}
+        {error && (
+          <Alert variant="destructive" className="mb-5">
+            <IconFlag />
+            <AlertTitle>Workshop moderation failed</AlertTitle>
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+
+        {user?.isAdmin && (
+          <section aria-busy={loading}>
+            {reports.length > 0 && (
+              <Alert variant="destructive" className="mb-5">
+                <IconFlag />
+                <AlertTitle>
+                  {reports.length} open {reports.length === 1 ? "report needs" : "reports need"} review
+                </AlertTitle>
+                <AlertDescription>
+                  Reported submissions are highlighted and shown first. Dismiss reports that need no action, or delete
+                  the submission when it should no longer be available.
+                </AlertDescription>
+              </Alert>
+            )}
+
+            <div className="mb-5 flex flex-wrap items-center gap-2 text-sm">
+              <Badge variant={reports.length > 0 ? "destructive" : "secondary"}>
+                {reports.length} open {reports.length === 1 ? "report" : "reports"}
+              </Badge>
+              <span className="text-muted-foreground">
+                {submissions.length} published {submissions.length === 1 ? "submission" : "submissions"}
+              </span>
+            </div>
+
+            <div className="space-y-4">
+              {grouped.map(({ submission, reports: submissionReports }) => (
+                <Card
+                  key={submission.id}
+                  className={
+                    submissionReports.length > 0
+                      ? "overflow-visible bg-destructive/[0.025] ring-destructive/50"
+                      : "overflow-visible"
+                  }
+                >
+                  <CardHeader className="border-b border-border pb-4 sm:grid-cols-[1fr_auto]">
+                    <div className="flex min-w-0 items-center gap-3">
+                      <Avatar className="size-10">
+                        {submission.authorAvatarUrl && <AvatarImage src={submission.authorAvatarUrl} alt="" />}
+                        <AvatarFallback>{avatarFallback(submission.authorName)}</AvatarFallback>
+                      </Avatar>
+                      <div className="min-w-0">
+                        <CardTitle className="truncate text-base">{submission.title}</CardTitle>
+                        <a
+                          href={submission.authorGithubProfileUrl || undefined}
+                          target={submission.authorGithubProfileUrl ? "_blank" : undefined}
+                          rel="noreferrer"
+                          className="text-xs text-muted-foreground hover:text-foreground hover:underline"
+                        >
+                          {submission.authorName}
+                        </a>
+                      </div>
+                    </div>
+                    <Badge variant={submissionReports.length > 0 ? "destructive" : "secondary"}>
+                      {submissionReports.length} {submissionReports.length === 1 ? "report" : "reports"}
+                    </Badge>
+                  </CardHeader>
+
+                  <CardContent className="space-y-5 pt-1">
+                    <div>
+                      <p className="text-sm leading-relaxed text-muted-foreground">
+                        {submission.description || "No description was provided."}
+                      </p>
+                      <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+                        <span>{submission.upvotes} upvotes</span>
+                        <span>{submission.downvotes} downvotes</span>
+                        <span>Score {submission.score}</span>
+                        <span>Updated {new Date(submission.updated).toLocaleDateString()}</span>
+                      </div>
+                    </div>
+
+                    {submissionReports.length > 0 && (
+                      <div className="space-y-3">
+                        {submissionReports.map((report) => (
+                          <Alert key={report.id} variant="destructive">
+                            <IconFlag />
+                            <div className="col-start-2 min-w-0">
+                              <div className="flex flex-wrap items-start justify-between gap-3">
+                                <div className="min-w-0">
+                                  <AlertTitle className="col-auto capitalize">{report.category} report</AlertTitle>
+                                  <p className="m-0 mt-1 text-xs text-destructive/75">
+                                    Reported by {report.reporterName} · {new Date(report.created).toLocaleString()}
+                                  </p>
+                                </div>
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  className="border-destructive/30 bg-background/70 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                                  disabled={busyId === report.id}
+                                  onClick={() => void dismiss(report.id)}
+                                >
+                                  {busyId === report.id && <IconLoader2 size={14} className="animate-spin" />}
+                                  {busyId === report.id ? "Dismissing" : "Dismiss report"}
+                                </Button>
+                              </div>
+                              <AlertDescription className="col-auto mt-3 whitespace-pre-wrap">
+                                {report.explanation}
+                              </AlertDescription>
+                            </div>
+                          </Alert>
+                        ))}
+                      </div>
+                    )}
+
+                    <div className="flex flex-wrap items-center gap-2 border-t border-border pt-4">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        nativeButton={false}
+                        render={<a href={`/workshop/${submission.id}`} aria-label={`Inspect ${submission.title}`} />}
+                      >
+                        <IconExternalLink size={14} /> Inspect submission
+                      </Button>
+                      <Button
+                        variant={submissionReports.length > 0 ? "destructive" : "ghost"}
+                        size="sm"
+                        className={submissionReports.length > 0 ? undefined : "text-destructive hover:text-destructive"}
+                        onClick={() => setPendingDelete(submission)}
+                      >
+                        <IconTrash size={14} /> Delete submission
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+
+            {!loading && grouped.length === 0 && (
+              <div className="rounded-xl border border-dashed border-border py-16 text-center">
+                <IconShield size={28} className="mx-auto text-muted-foreground" />
+                <p className="mt-3 text-sm font-medium">No Workshop submissions</p>
+                <p className="mt-1 text-sm text-muted-foreground">Published submissions will appear here.</p>
+              </div>
+            )}
+          </section>
+        )}
+      </div>
+
+      <Dialog open={pendingDelete !== null} onOpenChange={(open) => !open && !busyId && setPendingDelete(null)}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Delete {pendingDelete?.title}?</DialogTitle>
+            <DialogDescription>
+              This removes the Workshop listing and its reports, votes, screenshots, and comments. Installed local
+              copies remain. The submission author will be notified by email.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="ghost" disabled={busyId !== null} onClick={() => setPendingDelete(null)}>
+              Cancel
+            </Button>
+            <Button variant="destructive" disabled={busyId !== null} onClick={() => void remove()}>
+              {busyId && <IconLoader2 size={14} className="animate-spin" />}
+              {busyId ? "Deleting" : "Delete submission"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </main>
+  );
+}
diff --git a/apps/docs/src/components/workshop/WorkshopApp.tsx b/apps/docs/src/components/workshop/WorkshopApp.tsx
new file mode 100644
index 000000000..ced2158cf
--- /dev/null
+++ b/apps/docs/src/components/workshop/WorkshopApp.tsx
@@ -0,0 +1,542 @@
+import React, { useMemo, useState } from "react";
+import {
+  IconAlertCircle,
+  IconArrowBigDown,
+  IconArrowBigUp,
+  IconBrandCss3,
+  IconBrandGithub,
+  IconChevronLeft,
+  IconChevronRight,
+  IconEye,
+  IconMessage,
+  IconPackage,
+  IconPlus,
+  IconPuzzle,
+  IconRefresh,
+  IconSearch,
+} from "@tabler/icons-react";
+
+import type { WorkshopSubmission } from "@site/src/lib/pocketbase";
+import type { SubmissionType } from "@site/src/lib/workshop-schema";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { cn } from "@/lib/utils";
+
+import { SubmitForm } from "./SubmitForm";
+import { WorkshopAccountMenu } from "./WorkshopAccountMenu";
+import { formatRelativeTime } from "./format";
+import type { SortKey, TypeFilter } from "./useWorkshop";
+import { useWorkshop } from "./useWorkshop";
+
+const typeDotColors: Record<SubmissionType, string> = { customCss: "bg-blue-500", customWidget: "bg-yellow-500" };
+const typeLabels: Record<SubmissionType, string> = { customCss: "CSS", customWidget: "Widget" };
+const typeIcons: Record<SubmissionType, React.ComponentType<{ size: number; className?: string }>> = {
+  customCss: IconBrandCss3,
+  customWidget: IconPuzzle,
+};
+const typeBgColors: Record<SubmissionType, string> = { customCss: "bg-blue-500/5", customWidget: "bg-yellow-500/5" };
+const cardMediaClassName = "aspect-video w-full overflow-hidden bg-muted";
+const emptyState = {
+  none: { title: "No submissions yet", hint: "Be the first to share something." },
+  filtered: { title: "No matching results", hint: "Try adjusting your filters or search." },
+} as const;
+
+const typeFilters: { value: TypeFilter; label: string; dot?: string }[] = [
+  { value: "all", label: "All" },
+  { value: "customWidget", label: "Widgets", dot: typeDotColors.customWidget },
+  { value: "customCss", label: "CSS", dot: typeDotColors.customCss },
+];
+const sortOptions: { value: SortKey; label: string }[] = [
+  { value: "top", label: "Top rated" },
+  { value: "new", label: "Newest" },
+  { value: "recent", label: "Recently updated" },
+  { value: "discussed", label: "Most discussed" },
+];
+
+const stopCardNavigation = (event: React.MouseEvent<HTMLButtonElement>) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+
+const avatarFallback = (name: string) => name.trim().slice(0, 1).toUpperCase() || "?";
+
+export const WorkshopApp = ({ workshopUrl }: { workshopUrl: string }) => {
+  const workshop = useWorkshop(workshopUrl);
+  const [typeFilter, setTypeFilter] = useState<TypeFilter>("all");
+  const [sort, setSort] = useState<SortKey>("top");
+  const [search, setSearch] = useState("");
+  const [includeOutdated, setIncludeOutdated] = useState(true);
+  const [showSubmit, setShowSubmit] = useState(false);
+
+  // Stable sort order: only re-sort when filter/sort/search or submission set changes (not vote counts)
+  const submissionIds = useMemo(() => workshop.submissions.map((s) => s.id).join(","), [workshop.submissions]);
+  const sortedIds = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return workshop.submissions
+      .filter((item) => {
+        if (typeFilter === "yours") return item.author === workshop.user?.id;
+        return typeFilter === "all" || item.type === typeFilter;
+      })
+      .filter((item) => includeOutdated || !item.outdated)
+      .filter(
+        (item) =>
+          !q || [item.title, item.description, item.authorName].some((value) => value?.toLowerCase().includes(q)),
+      )
+      .toSorted(workshop.sorters[sort])
+      .map((s) => s.id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally keyed on submissionIds string, not the array
+  }, [submissionIds, workshop.sorters, typeFilter, sort, search, includeOutdated, workshop.user?.id]);
+
+  const visible = useMemo(() => {
+    const byId = new Map(workshop.submissions.map((s) => [s.id, s]));
+    return sortedIds.map((id) => byId.get(id)).filter(Boolean) as WorkshopSubmission[];
+  }, [workshop.submissions, sortedIds]);
+
+  const empty = emptyState[workshop.submissions.length === 0 ? "none" : "filtered"];
+  const initialLoadFailed = !workshop.loading && Boolean(workshop.error) && workshop.submissions.length === 0;
+  const availableTypeFilters = workshop.user
+    ? [...typeFilters, { value: "yours" as const, label: "Yours" }]
+    : typeFilters;
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 pb-16">
+      <div className="flex flex-col gap-5 py-8 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">Workshop</h1>
+          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            Discover community-made widgets and CSS. Review the source, then import it into Homarr.
+          </p>
+        </div>
+        <div className="flex items-center gap-2 self-start sm:self-auto">
+          {workshop.user ? (
+            <>
+              <Button className="h-10 sm:h-8" onClick={() => setShowSubmit(true)}>
+                <IconPlus size={14} /> Share yours
+              </Button>
+              <WorkshopAccountMenu
+                user={workshop.user}
+                onSignOut={() => {
+                  setTypeFilter("all");
+                  workshop.logout();
+                }}
+              />
+            </>
+          ) : (
+            <div className="flex flex-col items-start gap-1 sm:items-end">
+              <Button className="h-10 sm:h-8" onClick={() => void workshop.login()}>
+                <IconBrandGithub size={14} /> Sign in with GitHub
+              </Button>
+              <p className="text-xs text-muted-foreground">Vote, comment, report, and publish</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {workshop.submissions.length > 0 && (
+        <div className="mb-6 flex flex-col gap-3 rounded-lg border border-border bg-card p-3 sm:flex-row sm:items-center sm:justify-between">
+          <InputGroup className="order-first h-11 w-full sm:order-last sm:h-9 sm:w-64">
+            <InputGroupAddon>
+              <IconSearch size={16} />
+            </InputGroupAddon>
+            <InputGroupInput
+              placeholder="Search"
+              aria-label="Search submissions"
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+            />
+          </InputGroup>
+          <div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center">
+            <ToggleGroup
+              value={[typeFilter]}
+              onValueChange={(values) => values[0] && setTypeFilter(values[0] as TypeFilter)}
+              variant="default"
+              size="sm"
+              spacing={0}
+              className={cn("grid min-w-0 bg-muted/40 sm:flex", workshop.user ? "grid-cols-4" : "grid-cols-3")}
+              aria-label="Submission type"
+            >
+              {availableTypeFilters.map((opt) => (
+                <ToggleGroupItem
+                  key={opt.value}
+                  value={opt.value}
+                  className="min-h-10 min-w-0 gap-1.5 px-3 text-sm data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm sm:min-h-8 sm:text-xs"
+                >
+                  {opt.dot && <span className={cn("size-2 rounded-full", opt.dot)} />}
+                  {opt.label}
+                </ToggleGroupItem>
+              ))}
+            </ToggleGroup>
+            <div className="flex items-center gap-2">
+              <Select value={sort} onValueChange={(value) => setSort(value as SortKey)}>
+                <SelectTrigger aria-label="Sort submissions" className="h-10 min-w-40 flex-1 sm:h-8 sm:flex-none">
+                  <SelectValue>{(value) => sortOptions.find((option) => option.value === value)?.label}</SelectValue>
+                </SelectTrigger>
+                <SelectContent align="start">
+                  {sortOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Label className="h-10 shrink-0 cursor-pointer rounded-lg border border-input bg-background px-3 text-xs text-muted-foreground sm:h-8">
+                <Switch
+                  size="sm"
+                  checked={!includeOutdated}
+                  onCheckedChange={(checked) => setIncludeOutdated(!checked)}
+                />
+                Current only
+              </Label>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <p className="sr-only" aria-live="polite">
+        {workshop.loading ? "Loading Workshop listings" : `${visible.length} submissions shown`}
+      </p>
+
+      {initialLoadFailed && (
+        <div className="flex min-h-80 flex-col items-center justify-center gap-4 rounded-xl border border-border bg-card px-6 py-12 text-center">
+          <div className="flex size-11 items-center justify-center rounded-xl bg-destructive/10 text-destructive">
+            <IconAlertCircle size={22} />
+          </div>
+          <div>
+            <h2 className="text-base font-semibold">Workshop listings could not be loaded</h2>
+            <p className="mt-1 max-w-md text-sm text-muted-foreground">
+              Check the Workshop service and your connection, then try again.
+            </p>
+          </div>
+          <Button variant="outline" onClick={() => void workshop.refresh()}>
+            <IconRefresh size={15} /> Try loading again
+          </Button>
+        </div>
+      )}
+
+      {workshop.error && workshop.submissions.length > 0 && (
+        <Alert variant="destructive" className="mb-4 grid-cols-[auto_1fr_auto] items-center">
+          <IconAlertCircle />
+          <div>
+            <AlertTitle>Workshop data is out of date</AlertTitle>
+            <AlertDescription>The last refresh failed. Existing listings are still available.</AlertDescription>
+          </div>
+          <Button variant="ghost" size="sm" onClick={() => void workshop.refresh()}>
+            <IconRefresh size={14} /> Retry
+          </Button>
+        </Alert>
+      )}
+
+      {workshop.loading && workshop.submissions.length === 0 && (
+        <div className="grid auto-rows-fr grid-cols-1 items-stretch gap-4 lg:grid-cols-2 xl:grid-cols-3">
+          {Array.from({ length: 6 }, (_, i) => (
+            <SkeletonCard key={i} />
+          ))}
+        </div>
+      )}
+
+      {!workshop.loading && !workshop.error && visible.length === 0 && (
+        <div className="flex flex-col items-center gap-3 rounded-lg border border-dashed border-border py-16">
+          <IconPackage size={28} stroke={1.5} className="text-muted-foreground" />
+          <div className="text-center">
+            <p className="text-sm font-medium">{empty.title}</p>
+            <p className="mt-0.5 text-xs text-muted-foreground">{empty.hint}</p>
+          </div>
+          {workshop.submissions.length > 0 && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                setTypeFilter("all");
+                setSearch("");
+                setIncludeOutdated(true);
+              }}
+            >
+              Clear filters
+            </Button>
+          )}
+          {workshop.user && workshop.submissions.length === 0 && (
+            <Button size="sm" onClick={() => setShowSubmit(true)}>
+              <IconPlus size={14} /> Create submission
+            </Button>
+          )}
+        </div>
+      )}
+
+      <div className="grid auto-rows-fr grid-cols-1 items-stretch gap-4 lg:grid-cols-2 xl:grid-cols-3">
+        {visible.map((submission) => (
+          <SubmissionCard
+            key={submission.id}
+            submission={submission}
+            backend={workshop.backend}
+            userVote={workshop.votes[submission.id]?.value}
+            onVote={workshop.vote}
+          />
+        ))}
+      </div>
+
+      {showSubmit && (
+        <SubmitForm
+          onClose={() => setShowSubmit(false)}
+          onSubmit={async (input) => {
+            if (await workshop.submit(input)) setShowSubmit(false);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+interface SubmissionCardProps {
+  submission: WorkshopSubmission;
+  backend: ReturnType<typeof useWorkshop>["backend"];
+  userVote?: 1 | -1;
+  onVote: (submissionId: string, value: 1 | -1) => void;
+}
+
+const SubmissionCard = ({ submission, backend, userVote, onVote }: SubmissionCardProps) => {
+  const score = submission.upvotes - submission.downvotes;
+  const screenshotUrls = useMemo(
+    () => submission.screenshots?.map((file) => backend.fileUrl(submission.id, file)) ?? [],
+    [submission, backend],
+  );
+
+  const hasScreenshots = screenshotUrls.length > 0;
+  const TypeIcon = typeIcons[submission.type];
+
+  return (
+    <Card className="relative flex h-full min-w-0 w-full flex-col">
+      <a href={`/workshop/${submission.id}/`} className="block shrink-0">
+        {hasScreenshots ? (
+          <div className="relative">
+            <Badge
+              variant="secondary"
+              className="absolute left-2 top-2 z-10 gap-1.5 bg-background/80 px-2 backdrop-blur-sm"
+            >
+              <span className={cn("size-2 rounded-full", typeDotColors[submission.type])} />
+              {typeLabels[submission.type]}
+            </Badge>
+            <ScreenshotGallery urls={screenshotUrls} title={submission.title} />
+          </div>
+        ) : (
+          <div className={cn(cardMediaClassName, "flex items-center justify-center", typeBgColors[submission.type])}>
+            <TypeIcon size={32} className="text-muted-foreground/20" />
+          </div>
+        )}
+      </a>
+
+      <CardHeader className="flex flex-col gap-2 sm:grid">
+        <div className="flex items-center gap-2">
+          <a href={`/workshop/${submission.id}/`} className="min-w-0 hover:underline" title={submission.title}>
+            <CardTitle className="truncate">{submission.title}</CardTitle>
+          </a>
+          {!hasScreenshots && (
+            <Badge variant="secondary" className="shrink-0 gap-1.5 px-2">
+              <span className={cn("size-2 rounded-full", typeDotColors[submission.type])} />
+              {typeLabels[submission.type]}
+            </Badge>
+          )}
+        </div>
+        <CardDescription className="flex min-w-0 items-center gap-1 text-xs">
+          <a
+            href={submission.authorGithubProfileUrl || undefined}
+            target={submission.authorGithubProfileUrl ? "_blank" : undefined}
+            rel="noreferrer"
+            className="inline-flex min-w-0 items-center gap-1.5 hover:text-foreground"
+          >
+            <Avatar className="size-4">
+              {submission.authorAvatarUrl && <AvatarImage src={submission.authorAvatarUrl} alt="" />}
+              <AvatarFallback className="text-[9px]">{avatarFallback(submission.authorName)}</AvatarFallback>
+            </Avatar>
+            <span className="truncate">{submission.authorName}</span>
+          </a>
+          <span className="shrink-0 whitespace-nowrap">
+            · v{submission.revision} · {formatRelativeTime(submission.created)}
+          </span>
+        </CardDescription>
+        <CardAction className="col-start-auto row-span-1 row-start-auto self-auto justify-self-start sm:col-start-2 sm:row-span-2 sm:row-start-1 sm:self-start sm:justify-self-end">
+          <div className="flex items-center gap-px rounded-md border border-border bg-muted/40 p-px">
+            <button
+              type="button"
+              onClick={() => void onVote(submission.id, 1)}
+              aria-label="Upvote"
+              aria-pressed={userVote === 1}
+              className={cn(
+                "flex size-10 items-center justify-center rounded-[5px] transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50 sm:size-8",
+                userVote === 1 && "bg-primary/15 text-primary",
+              )}
+            >
+              <IconArrowBigUp size={14} />
+            </button>
+            <span aria-live="polite" className="min-w-5 text-center text-xs font-semibold tabular-nums text-foreground">
+              {score}
+            </span>
+            <button
+              type="button"
+              onClick={() => void onVote(submission.id, -1)}
+              aria-label="Downvote"
+              aria-pressed={userVote === -1}
+              className={cn(
+                "flex size-10 items-center justify-center rounded-[5px] transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50 sm:size-8",
+                userVote === -1 && "bg-primary/15 text-primary",
+              )}
+            >
+              <IconArrowBigDown size={14} />
+            </button>
+          </div>
+        </CardAction>
+      </CardHeader>
+
+      <CardContent className="min-h-[4.5rem] flex-1 overflow-hidden">
+        {submission.outdated && (
+          <div className="mb-2 flex flex-wrap gap-1.5">
+            <Badge variant="secondary">Outdated</Badge>
+          </div>
+        )}
+        {submission.description && (
+          <p className="line-clamp-2 text-xs leading-relaxed text-muted-foreground">{submission.description}</p>
+        )}
+      </CardContent>
+
+      <CardFooter className="justify-between gap-3 px-3 py-2.5">
+        <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+          <IconMessage size={14} /> {submission.commentCount} {submission.commentCount === 1 ? "comment" : "comments"}
+        </span>
+        <Button
+          className="h-10 sm:h-7"
+          size="sm"
+          nativeButton={false}
+          render={<a href={`/workshop/${submission.id}/`} aria-label={`View ${submission.title} details`} />}
+        >
+          <IconEye size={14} /> View details
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};
+
+const SkeletonCard = () => (
+  <Card className="h-full min-w-0 w-full">
+    <Skeleton className="aspect-video rounded-none" />
+    <CardHeader>
+      <div className="flex items-center gap-2">
+        <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-4 w-12 rounded-full" />
+      </div>
+      <Skeleton className="h-3 w-40" />
+    </CardHeader>
+    <CardContent className="min-h-[4.5rem]">
+      <div className="space-y-1.5">
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-2/3" />
+      </div>
+    </CardContent>
+    <CardFooter className="justify-between gap-3 px-3 py-2.5">
+      <Skeleton className="h-3 w-20" />
+      <Skeleton className="h-9 w-28" />
+    </CardFooter>
+  </Card>
+);
+
+export const WorkshopListingFallback = () => (
+  <div className="mx-auto max-w-7xl px-4 pb-16" aria-busy="true" aria-label="Loading Workshop listings">
+    <div className="flex flex-col gap-5 py-8 sm:flex-row sm:items-end sm:justify-between">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Workshop</h1>
+        <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+          Discover community-made widgets and CSS. Review the source, then import it into Homarr.
+        </p>
+      </div>
+      <Skeleton className="h-10 w-40 sm:h-8" />
+    </div>
+
+    <div className="mb-6 flex flex-col gap-3 rounded-xl border border-border bg-card p-3 sm:flex-row sm:justify-between">
+      <Skeleton className="h-10 w-full sm:w-80" />
+      <Skeleton className="h-10 w-full sm:w-64" />
+    </div>
+
+    <div className="grid auto-rows-fr grid-cols-1 items-stretch gap-4 lg:grid-cols-2 xl:grid-cols-3">
+      {Array.from({ length: 6 }, (_, index) => (
+        <SkeletonCard key={index} />
+      ))}
+    </div>
+  </div>
+);
+
+const ScreenshotGallery = ({ urls, title }: { urls: string[]; title: string }) => {
+  const [idx, setIdx] = useState(0);
+  const dotClass = ["bg-white/40", "bg-white"];
+
+  return (
+    <div className="group/gallery relative">
+      <div className={cardMediaClassName}>
+        <img
+          className="h-full w-full object-cover"
+          src={urls[idx]}
+          alt={`${title} screenshot ${idx + 1}`}
+          loading="lazy"
+        />
+      </div>
+      {urls.length > 1 && (
+        <>
+          <button
+            type="button"
+            className="absolute left-2 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-lg bg-background/85 opacity-80 shadow-sm transition-opacity hover:opacity-100 sm:size-8"
+            onClick={(event) => {
+              stopCardNavigation(event);
+              setIdx((i) => (i - 1 + urls.length) % urls.length);
+            }}
+            aria-label="Previous screenshot"
+          >
+            <IconChevronLeft size={14} />
+          </button>
+          <button
+            type="button"
+            className="absolute right-2 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-lg bg-background/85 opacity-80 shadow-sm transition-opacity hover:opacity-100 sm:size-8"
+            onClick={(event) => {
+              stopCardNavigation(event);
+              setIdx((i) => (i + 1) % urls.length);
+            }}
+            aria-label="Next screenshot"
+          >
+            <IconChevronRight size={14} />
+          </button>
+          <div className="absolute bottom-2 left-1/2 flex -translate-x-1/2 rounded-full bg-black/60 px-1 py-0.5">
+            {urls.map((_, i) => (
+              <button
+                type="button"
+                key={i}
+                onClick={(event) => {
+                  stopCardNavigation(event);
+                  setIdx(i);
+                }}
+                aria-label={`Screenshot ${i + 1}`}
+                aria-current={i === idx ? "true" : undefined}
+                className="flex size-8 items-center justify-center rounded-full focus-visible:ring-2 focus-visible:ring-white"
+              >
+                <span className={cn("size-1.5 rounded-full transition-colors", dotClass[Number(i === idx)])} />
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/apps/docs/src/components/workshop/WorkshopDetailRoutePage.tsx b/apps/docs/src/components/workshop/WorkshopDetailRoutePage.tsx
new file mode 100644
index 000000000..e0b66468e
--- /dev/null
+++ b/apps/docs/src/components/workshop/WorkshopDetailRoutePage.tsx
@@ -0,0 +1 @@
+export { default } from "./DetailPage";
diff --git a/apps/docs/src/components/workshop/WorkshopErrorBoundary.tsx b/apps/docs/src/components/workshop/WorkshopErrorBoundary.tsx
new file mode 100644
index 000000000..5d16af18d
--- /dev/null
+++ b/apps/docs/src/components/workshop/WorkshopErrorBoundary.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+
+interface State {
+  failed: boolean;
+}
+
+export class WorkshopErrorBoundary extends React.Component<React.PropsWithChildren<object>, State> {
+  public state: State = { failed: false };
+
+  public static getDerivedStateFromError(): State {
+    return { failed: true };
+  }
+
+  public render() {
+    if (!this.state.failed) return this.props.children;
+
+    return (
+      <div className="mx-auto flex min-h-[50vh] max-w-xl flex-col items-center justify-center gap-4 px-4 text-center">
+        <div className="flex size-11 items-center justify-center rounded-xl bg-destructive/10 text-destructive">
+          <IconAlertTriangle size={22} />
+        </div>
+        <div>
+          <h1 className="text-xl font-semibold">Workshop could not be displayed</h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Reload the page to try again. Your Homarr installation is not affected.
+          </p>
+        </div>
+        <Button onClick={() => window.location.reload()}>Reload Workshop</Button>
+      </div>
+    );
+  }
+}
diff --git a/apps/docs/src/components/workshop/format.ts b/apps/docs/src/components/workshop/format.ts
new file mode 100644
index 000000000..c77f4a725
--- /dev/null
+++ b/apps/docs/src/components/workshop/format.ts
@@ -0,0 +1,6 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
+
+export const formatRelativeTime = (date: string) => dayjs(date).fromNow();
diff --git a/apps/docs/src/components/workshop/useWorkshop.ts b/apps/docs/src/components/workshop/useWorkshop.ts
new file mode 100644
index 000000000..799595fa0
--- /dev/null
+++ b/apps/docs/src/components/workshop/useWorkshop.ts
@@ -0,0 +1,284 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import dayjs from "dayjs";
+
+import type { WorkshopComment, WorkshopSubmission, WorkshopVote } from "@site/src/lib/pocketbase";
+import { getWorkshopBackend } from "@site/src/lib/pocketbase";
+import type { SubmissionType } from "@site/src/lib/workshop-schema";
+import { validateSubmissionContent } from "@site/src/lib/workshop-schema";
+import { errorMessage, oauthErrorMessage } from "@site/src/lib/utils";
+
+import { voteAndReconcile } from "./workshop-utils";
+
+export type SortKey = "top" | "new" | "recent" | "discussed";
+export type TypeFilter = "all" | "yours" | SubmissionType;
+
+export interface SubmitInput {
+  type: SubmissionType;
+  title: string;
+  description: string;
+  changelog: string;
+  content: string;
+  screenshots: File[];
+}
+
+export interface CommentActions {
+  fetch: (submissionId: string) => Promise<WorkshopComment[]>;
+  add: (submissionId: string, content: string) => Promise<WorkshopComment | null>;
+  update: (commentId: string, content: string) => Promise<WorkshopComment | null>;
+  delete: (commentId: string) => Promise<boolean>;
+}
+
+const sorters: Record<SortKey, (a: WorkshopSubmission, b: WorkshopSubmission) => number> = {
+  top: (a, b) => b.upvotes - b.downvotes - (a.upvotes - a.downvotes),
+  new: (a, b) => dayjs(b.created).valueOf() - dayjs(a.created).valueOf(),
+  recent: (a, b) => dayjs(b.updated).valueOf() - dayjs(a.updated).valueOf(),
+  discussed: (a, b) => b.commentCount - a.commentCount || dayjs(b.created).valueOf() - dayjs(a.created).valueOf(),
+};
+
+export const useWorkshop = (workshopUrl: string) => {
+  const backend = useMemo(() => getWorkshopBackend(workshopUrl), [workshopUrl]);
+  const [submissions, setSubmissions] = useState<WorkshopSubmission[]>([]);
+  const [votes, setVotes] = useState<Record<string, WorkshopVote>>({});
+  const [user, setUser] = useState(backend.currentUser);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const votingIds = useRef(new Set<string>());
+
+  const refreshVotes = useCallback(async () => {
+    if (!backend.currentUser) {
+      setVotes({});
+      return;
+    }
+    const rows = await backend.listVotesForCurrentUser();
+    setVotes(Object.fromEntries(rows.map((row) => [row.submission, row])));
+  }, [backend]);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const rows = await backend.listAll({ sort: "newest" });
+      setSubmissions(rows.map((submission) => ({ ...submission, content: "" })));
+      await refreshVotes();
+    } catch (caught) {
+      setError(errorMessage(caught, "Failed to load the workshop"));
+    } finally {
+      setLoading(false);
+    }
+  }, [backend, refreshVotes]);
+
+  useEffect(() => {
+    let cancelled = false;
+    const unsubscribe = backend.subscribeToAuth((nextUser) => {
+      setUser(nextUser);
+      if (!nextUser) setVotes({});
+    });
+
+    const load = async () => {
+      await backend.refreshAuth();
+      if (!cancelled) await refresh();
+    };
+
+    void load();
+    return () => {
+      cancelled = true;
+      unsubscribe();
+    };
+  }, [backend, refresh]);
+
+  const ensureAuth = useCallback(async () => {
+    if (backend.currentUser) return true;
+    await backend.signInWithGitHub();
+    await refreshVotes();
+    return backend.currentUser !== null;
+  }, [backend, refreshVotes]);
+
+  const requireUserId = useCallback(
+    async (action: string) => {
+      let authenticated = false;
+      try {
+        authenticated = await ensureAuth();
+      } catch (caught) {
+        setError(oauthErrorMessage(caught));
+        return null;
+      }
+
+      if (!authenticated) {
+        setError(`Sign in to ${action}`);
+        return null;
+      }
+      const userId = backend.currentUser?.id;
+      if (!userId) {
+        setError(`Sign in to ${action}`);
+        return null;
+      }
+      return userId;
+    },
+    [backend, ensureAuth],
+  );
+
+  const login = useCallback(async () => {
+    try {
+      await ensureAuth();
+      setError(null);
+    } catch (caught) {
+      setError(oauthErrorMessage(caught));
+    }
+  }, [ensureAuth]);
+
+  const vote = useCallback(
+    async (submissionId: string, value: 1 | -1) => {
+      if (votingIds.current.has(submissionId)) return;
+      votingIds.current.add(submissionId);
+
+      if (!(await requireUserId("vote"))) {
+        votingIds.current.delete(submissionId);
+        return;
+      }
+
+      try {
+        const reconciled = await voteAndReconcile(backend, submissionId, value);
+        setVotes(Object.fromEntries(reconciled.votes.map((row) => [row.submission, row])));
+        setSubmissions((current) =>
+          current.map((submission) =>
+            submission.id === submissionId
+              ? {
+                  ...submission,
+                  upvotes: reconciled.submission.upvotes,
+                  downvotes: reconciled.submission.downvotes,
+                }
+              : submission,
+          ),
+        );
+      } catch (caught) {
+        setError(errorMessage(caught, "Failed to register your vote"));
+      } finally {
+        votingIds.current.delete(submissionId);
+      }
+    },
+    [backend, requireUserId],
+  );
+
+  const report = useCallback(
+    async (
+      submissionId: string,
+      category: "malicious" | "spam" | "copyright" | "inappropriate" | "other",
+      explanation: string,
+    ) => {
+      try {
+        if (!(await requireUserId("report"))) return;
+        await backend.report(submissionId, category, explanation);
+      } catch (caught) {
+        setError(errorMessage(caught, "Failed to submit your report"));
+      }
+    },
+    [backend, requireUserId],
+  );
+
+  const deleteSubmission = useCallback(
+    async (submissionId: string) => {
+      try {
+        await backend.delete(submissionId);
+        setSubmissions((prev) => prev.filter((s) => s.id !== submissionId));
+        return true;
+      } catch (caught) {
+        setError(errorMessage(caught, "Failed to delete submission"));
+        return false;
+      }
+    },
+    [backend],
+  );
+
+  const submit = useCallback(
+    async (input: SubmitInput): Promise<boolean> => {
+      const validation = validateSubmissionContent(input.type, input.content);
+      if (!validation.success) throw new Error(validation.error);
+      if (!(await ensureAuth())) throw new Error("Sign in required to submit");
+      await backend.create(
+        {
+          type: input.type,
+          title: input.title,
+          description: input.description,
+          content: input.content,
+          changelog: input.changelog || "Initial publication",
+          outdated: false,
+        },
+        input.screenshots,
+      );
+      await refresh();
+      return true;
+    },
+    [backend, ensureAuth, refresh],
+  );
+
+  const fetchComments = useCallback((submissionId: string) => backend.listComments(submissionId), [backend]);
+
+  const addComment = useCallback(
+    async (submissionId: string, content: string) => {
+      const userId = await requireUserId("comment");
+      if (!userId) return null;
+      try {
+        return await backend.createComment(submissionId, content);
+      } catch (caught) {
+        setError(errorMessage(caught, "Failed to post comment"));
+        return null;
+      }
+    },
+    [backend, requireUserId],
+  );
+
+  const updateComment = useCallback(
+    async (commentId: string, content: string) => {
+      try {
+        return await backend.updateComment(commentId, content);
+      } catch (caught) {
+        setError(errorMessage(caught, "Failed to update comment"));
+        return null;
+      }
+    },
+    [backend],
+  );
+
+  const deleteComment = useCallback(
+    async (commentId: string) => {
+      try {
+        await backend.deleteComment(commentId);
+        return true;
+      } catch (caught) {
+        setError(errorMessage(caught, "Failed to delete comment"));
+        return false;
+      }
+    },
+    [backend],
+  );
+
+  const logout = useCallback(() => backend.signOut(), [backend]);
+
+  const comments = useMemo<CommentActions>(
+    () => ({
+      fetch: fetchComments,
+      add: addComment,
+      update: updateComment,
+      delete: deleteComment,
+    }),
+    [fetchComments, addComment, updateComment, deleteComment],
+  );
+
+  return {
+    backend,
+    submissions,
+    votes,
+    user,
+    loading,
+    error,
+    sorters,
+    comments,
+    refresh,
+    login,
+    logout,
+    vote,
+    report,
+    submit,
+    deleteSubmission,
+  };
+};
diff --git a/apps/docs/src/components/workshop/workshop-utils.spec.ts b/apps/docs/src/components/workshop/workshop-utils.spec.ts
new file mode 100644
index 000000000..06a3b92ab
--- /dev/null
+++ b/apps/docs/src/components/workshop/workshop-utils.spec.ts
@@ -0,0 +1,27 @@
+import { describe, expect, it, vi } from "vitest";
+
+import type { WorkshopSubmission, WorkshopVote } from "@site/src/lib/pocketbase";
+
+import { clampScreenshotIndex, voteAndReconcile } from "./workshop-utils";
+
+describe("Workshop state reconciliation", () => {
+  it("reloads both the submission counts and authenticated vote after voting", async () => {
+    const submission = { id: "submission-1", upvotes: 8, downvotes: 2 } as WorkshopSubmission;
+    const vote = { id: "vote-1", submission: "submission-1", value: 1 } as WorkshopVote;
+    const backend = {
+      vote: vi.fn().mockResolvedValue(vote),
+      get: vi.fn().mockResolvedValue(submission),
+      listVotesForCurrentUser: vi.fn().mockResolvedValue([vote]),
+    };
+
+    await expect(voteAndReconcile(backend, submission.id, 1)).resolves.toEqual({ submission, votes: [vote] });
+    expect(backend.vote).toHaveBeenCalledWith(submission.id, 1);
+    expect(backend.get).toHaveBeenCalledWith(submission.id);
+    expect(backend.listVotesForCurrentUser).toHaveBeenCalledOnce();
+  });
+
+  it("clamps a selected screenshot when the gallery shrinks", () => {
+    expect(clampScreenshotIndex(3, 2)).toBe(1);
+    expect(clampScreenshotIndex(2, 0)).toBe(0);
+  });
+});
diff --git a/apps/docs/src/components/workshop/workshop-utils.ts b/apps/docs/src/components/workshop/workshop-utils.ts
new file mode 100644
index 000000000..4a6dca79b
--- /dev/null
+++ b/apps/docs/src/components/workshop/workshop-utils.ts
@@ -0,0 +1,25 @@
+import type { WorkshopSubmission, WorkshopVote } from "@site/src/lib/pocketbase";
+
+export const downloadSubmissionJson = (submission: WorkshopSubmission) => {
+  const url = URL.createObjectURL(new Blob([submission.content], { type: "application/json" }));
+  Object.assign(document.createElement("a"), {
+    href: url,
+    download: `${submission.title.replace(/[^a-z0-9-_]+/gi, "-").toLowerCase()}.json`,
+  }).click();
+  URL.revokeObjectURL(url);
+};
+
+interface WorkshopVoteBackend {
+  vote(submissionId: string, value: 1 | -1): Promise<WorkshopVote | null>;
+  get(submissionId: string): Promise<WorkshopSubmission>;
+  listVotesForCurrentUser(): Promise<WorkshopVote[]>;
+}
+
+export const voteAndReconcile = async (backend: WorkshopVoteBackend, submissionId: string, value: 1 | -1) => {
+  await backend.vote(submissionId, value);
+  const [submission, votes] = await Promise.all([backend.get(submissionId), backend.listVotesForCurrentUser()]);
+  return { submission, votes };
+};
+
+export const clampScreenshotIndex = (index: number, screenshotCount: number) =>
+  Math.min(Math.max(0, index), Math.max(0, screenshotCount - 1));
diff --git a/apps/docs/src/css/custom.css b/apps/docs/src/css/custom.css
index 93d4ab319..2980dd7a9 100644
--- a/apps/docs/src/css/custom.css
+++ b/apps/docs/src/css/custom.css
@@ -1,12 +1,82 @@
-@import url("https://api.fontshare.com/v2/css?f[]=work-sans@2,1&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
 @import "tailwindcss/theme" layer(theme);
 @import "tailwindcss/utilities" layer(utilities);
 
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
-@theme {
+/* tweakcn theme cmrw8cy5g000104jv0b88cnsb on shadcn base-nova */
+@theme inline {
   --spacing-128: 32rem;
   --breakpoint-3xl: 1697px;
+
+  --font-heading: var(--font-sans);
+  --font-sans: "Inter", sans-serif;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --font-mono: "JetBrains Mono", monospace;
+  --font-serif: Georgia, serif;
+  --radius: 0.75rem;
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+  --tracking-normal: var(--tracking-normal);
+  --shadow-2xl: var(--shadow-2xl);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-md: var(--shadow-md);
+  --shadow: var(--shadow);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-2xs: var(--shadow-2xs);
+  --spacing: var(--spacing);
+  --letter-spacing: var(--letter-spacing);
+  --shadow-offset-y: var(--shadow-offset-y);
+  --shadow-offset-x: var(--shadow-offset-x);
+  --shadow-spread: var(--shadow-spread);
+  --shadow-blur: var(--shadow-blur);
+  --shadow-opacity: var(--shadow-opacity);
+  --color-shadow-color: var(--shadow-color);
+  --color-destructive-foreground: var(--destructive-foreground);
 }
 
 :root {
@@ -23,14 +93,79 @@
 
   --aa-primary-color-rgb: #fa5252 !important;
   --aa-muted-color-rgb: #fa5252 !important;
-  --aa-background-color-rgb: 200,200,200 !important;
+  --aa-background-color-rgb: 200, 200, 200 !important;
 
-  --ifm-font-family-base: 'Work Sans', sans-serif;
+  --ifm-font-family-base: var(--font-sans);
   --ifm-color-content-inverse: var(--ifm-color-emphasis-100);
+
+  /* Bridge Docusaurus to shadcn theme */
+  --ifm-background-color: var(--background);
+  --ifm-font-color-base: var(--foreground);
+  --ifm-navbar-background-color: var(--card);
+  --ifm-footer-background-color: var(--card);
+
+  --radius: 0.75rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.2178 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.2178 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.2178 0 0);
+  --primary: #fa5252;
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.2178 0 0);
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.9674 0.0013 286.3752);
+  --muted-foreground: oklch(0.5517 0.0138 285.9385);
+  --accent: oklch(0.955 0.025 25.6509);
+  --accent-foreground: oklch(0.48 0.18 25.6509);
+  --destructive: oklch(0.6368 0.2078 25.3313);
+  --border: oklch(0.9197 0.004 286.3202);
+  --input: oklch(0.9197 0.004 286.3202);
+  --ring: #fa5252;
+  --chart-1: oklch(0.6646 0.2222 25.6509);
+  --chart-2: oklch(0.2178 0 0);
+  --chart-3: oklch(0.6231 0.188 259.8145);
+  --chart-4: oklch(0.6959 0.1491 162.4796);
+  --chart-5: oklch(0.7686 0.1647 70.0804);
+  --sidebar: oklch(0.9791 0 0);
+  --sidebar-foreground: oklch(0.2178 0 0);
+  --sidebar-primary: #fa5252;
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.9551 0 0);
+  --sidebar-accent-foreground: oklch(0.6646 0.2222 25.6509);
+  --sidebar-border: oklch(0.9276 0.0058 264.5313);
+  --sidebar-ring: oklch(0.56 0.205 25.6509);
+  --destructive-foreground: oklch(0.9851 0 0);
+  --font-sans: "Inter", sans-serif;
+  --font-serif: Georgia, serif;
+  --font-mono: "JetBrains Mono", monospace;
+  --shadow-color: #000000;
+  --shadow-opacity: 0.1;
+  --shadow-blur: 10px;
+  --shadow-spread: -2px;
+  --shadow-offset-x: 0px;
+  --shadow-offset-y: 4px;
+  --letter-spacing: -0.02em;
+  --spacing: 0.25rem;
+  --shadow-2xs: 0px 4px 10px -2px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0px 4px 10px -2px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0px 4px 10px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1);
+  --shadow: 0px 4px 10px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0px 4px 10px -2px hsl(0 0% 0% / 0.1), 0px 2px 4px -3px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0px 4px 10px -2px hsl(0 0% 0% / 0.1), 0px 4px 6px -3px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0px 4px 10px -2px hsl(0 0% 0% / 0.1), 0px 8px 10px -3px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0px 4px 10px -2px hsl(0 0% 0% / 0.25);
+  --tracking-normal: -0.02em;
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: var(--ifm-font-family-base);
+}
+
+[data-theme="dark"] {
   --ifm-color-primary: #fa5252;
   --ifm-color-primary-dark: #f93232;
   --ifm-color-primary-darker: #f92222;
@@ -39,13 +174,58 @@
   --ifm-color-primary-lighter: #fb8282;
   --ifm-color-primary-lightest: #fdc3c3;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-  --homarr-secondary-bg: #181818;
+  --homarr-secondary-bg: oklch(0.245 0.006 223.9);
   --ifm-color-content-inverse: var(--ifm-color-emphasis-100);
 
-
   --aa-primary-color-rgb: #fa5252 !important;
   --aa-muted-color-rgb: #fa5252 !important;
-  --aa-background-color-rgb: 24,24,24 !important;
+  --aa-background-color-rgb: 24, 24, 24 !important;
+}
+
+/* Reset form elements that don't inherit by default (no preflight in Docusaurus).
+   Must live inside @layer theme so layer(utilities) wins in the cascade. */
+@layer theme {
+  :where(
+      main.marketplace,
+      [data-slot="dialog-portal"],
+      [data-slot="alert-dialog-content"],
+      [data-slot="dropdown-menu-content"],
+      [data-slot="select-content"],
+      [data-slot="popover-content"]
+    )
+    :where(button, input, select, textarea) {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  :where(
+      main.marketplace,
+      [data-slot="dialog-portal"],
+      [data-slot="alert-dialog-content"],
+      [data-slot="dropdown-menu-content"],
+      [data-slot="select-content"],
+      [data-slot="popover-content"]
+    )
+    :where(button) {
+    cursor: pointer;
+  }
+
+  :where(
+    [data-slot="dialog-portal"],
+    [data-slot="alert-dialog-content"],
+    [data-slot="dropdown-menu-content"],
+    [data-slot="select-content"],
+    [data-slot="popover-content"]
+  ) {
+    font-family: var(--ifm-font-family-base);
+    color: var(--foreground);
+  }
 }
 
 .aa-DetachedOverlay {
@@ -79,8 +259,89 @@
   background-color: var(--homarr-secondary-bg) !important;
 }
 
+.footer__bottom {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 1.25rem;
+  width: min(100%, 38rem);
+  margin: 2.5rem auto 0;
+  padding-top: 2rem;
+  border-top: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
+  text-align: left !important;
+}
+
+.footer__bottom .margin-bottom--sm {
+  margin: 0 !important;
+}
+
+.footer__logo {
+  display: block;
+  width: 5.375rem;
+  height: auto;
+  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.footer__bottom a:hover .footer__logo {
+  transform: translateY(-2px);
+}
+
+.footer__copyright {
+  text-align: left;
+}
+
+.footer__brand-copy {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.2rem;
+}
+
+.footer__brand-name {
+  color: var(--foreground);
+  font-size: 1.125rem;
+  line-height: 1.25;
+  letter-spacing: -0.025em;
+}
+
+.footer__brand-tagline {
+  color: color-mix(in srgb, var(--foreground) 78%, transparent);
+  font-size: 0.875rem;
+  line-height: 1.45;
+}
+
 .footer__copyright span.copyright_text {
-  opacity: .6;
+  color: color-mix(in srgb, var(--foreground) 72%, transparent);
+  font-size: 0.75rem;
+}
+
+@media (max-width: 640px) {
+  .footer__bottom {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    gap: 0.875rem;
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    text-align: center !important;
+  }
+
+  .footer__copyright {
+    text-align: center;
+  }
+
+  .footer__brand-copy {
+    align-items: center;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .footer__logo {
+    transition: none;
+  }
+
+  .footer__bottom a:hover .footer__logo {
+    transform: none;
+  }
 }
 
 .medium-zoom-overlay {
@@ -97,7 +358,7 @@
 
 .announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module {
   background-color: transparent !important;
-  background-image: radial-gradient(circle,  rgb(253, 126, 20) 0%, rgb(250, 82, 82) 100%) !important;
+  background-image: radial-gradient(circle, rgb(253, 126, 20) 0%, rgb(250, 82, 82) 100%) !important;
   font-weight: 600;
 }
 
@@ -111,6 +372,20 @@
   white-space: nowrap;
 }
 
+/* Keep the primary docs destinations readable before Docusaurus switches to its mobile menu. */
+@media (min-width: 997px) and (max-width: 1399px) {
+  .navbar__inner > .navbar__items > .navbar-item--collapse-first,
+  .navbar__inner > .navbar__items > .navbar-item--secondary {
+    display: none;
+  }
+}
+
+@media (min-width: 997px) and (max-width: 1179px) {
+  .navbar__inner .navbar__title {
+    display: none;
+  }
+}
+
 /*.navbar__items.navbar__items--right .navbar__item.navbar__link:first-of-type {
   background-color: var(--ifm-color-primary-light) !important;
   border-radius: 30px;
@@ -135,7 +410,7 @@ html[data-theme="dark"] div#__docusaurus div[role="banner"] button svg {
   color: var(--ifm-color-primary);
 }
 
-:is(p, h3, h4, h5, h6):has(+ :is(ul, ol)){
+:is(p, h3, h4, h5, h6):has(+ :is(ul, ol)) {
   margin-bottom: 4px !important;
 }
 
@@ -164,7 +439,6 @@ html[data-theme="dark"] div#__docusaurus div[role="banner"] button svg {
   padding: 6px 12px;
 }
 
-
 .hero-cards {
   transform: rotate(20deg) scale(0.8) skew(21deg);
   -webkit-transform: rotate(20deg) scale(0.8) skew(21deg);
@@ -180,7 +454,7 @@ html[data-theme="dark"] div#__docusaurus div[role="banner"] button svg {
 }
 
 .app-card img {
-  transition:  transform 0.1s ease-in-out;
+  transition: transform 0.1s ease-in-out;
 }
 
 .app-card:hover img {
@@ -188,7 +462,7 @@ html[data-theme="dark"] div#__docusaurus div[role="banner"] button svg {
 }
 
 .hover-animation {
-  animation:  hover-animation 5s ease-in-out forwards;
+  animation: hover-animation 5s ease-in-out forwards;
   animation-iteration-count: infinite;
 }
 
@@ -203,3 +477,93 @@ html[data-theme="dark"] div#__docusaurus div[role="banner"] button svg {
     transform: translateY(0);
   }
 }
+
+.submit-step-enter {
+  animation: submit-step-enter 0.2s ease-in-out forwards;
+}
+
+.submit-step-from-right {
+  --submit-step-x: 80px;
+}
+
+.submit-step-from-left {
+  --submit-step-x: -80px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .submit-step-enter {
+    animation: none;
+  }
+}
+
+@keyframes submit-step-enter {
+  from {
+    transform: translateX(var(--submit-step-x, 80px));
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+[data-theme="dark"] {
+  --background: #1b1b1d;
+  --foreground: oklch(0.9791 0 0);
+  --card: oklch(0.245 0.006 223.9);
+  --card-foreground: oklch(0.9791 0 0);
+  --popover: oklch(0.245 0.006 223.9);
+  --popover-foreground: oklch(0.9791 0 0);
+  --primary: #fa5252;
+  --primary-foreground: oklch(0.15 0.025 25.6509);
+  --secondary: oklch(0.2739 0.0055 286.0326);
+  --secondary-foreground: oklch(0.9851 0 0);
+  --muted: oklch(0.2739 0.0055 286.0326);
+  --muted-foreground: oklch(0.7118 0.0129 286.0665);
+  --accent: oklch(0.31 0.055 25.6509);
+  --accent-foreground: oklch(0.86 0.1 25.6509);
+  --destructive: oklch(0.3958 0.1331 25.723);
+  --destructive-foreground: oklch(0.9705 0.0129 17.3797);
+  --border: oklch(0.2739 0.0055 286.0326);
+  --input: oklch(0.2739 0.0055 286.0326);
+  --ring: #fa5252;
+  --chart-1: oklch(0.6646 0.2222 25.6509);
+  --chart-2: oklch(0.4419 0.0146 285.7864);
+  --chart-3: oklch(0.7137 0.1434 254.624);
+  --chart-4: oklch(0.7729 0.1535 163.2231);
+  --chart-5: oklch(0.8369 0.1644 84.4286);
+  --radius: 0.75rem;
+  --sidebar: oklch(0.2178 0 0);
+  --sidebar-foreground: oklch(0.9791 0 0);
+  --sidebar-primary: #fa5252;
+  --sidebar-primary-foreground: oklch(0.15 0.025 25.6509);
+  --sidebar-accent: oklch(0.2739 0.0055 286.0326);
+  --sidebar-accent-foreground: oklch(0.6646 0.2222 25.6509);
+  --sidebar-border: oklch(0.2739 0.0055 286.0326);
+  --sidebar-ring: oklch(0.72 0.16 25.6509);
+  --font-sans: "Inter", sans-serif;
+  --font-serif: Georgia, serif;
+  --font-mono: "JetBrains Mono", monospace;
+  --shadow-color: #000000;
+  --shadow-opacity: 0.5;
+  --shadow-blur: 20px;
+  --shadow-spread: -5px;
+  --shadow-offset-x: 0px;
+  --shadow-offset-y: 10px;
+  --letter-spacing: -0.02em;
+  --spacing: 0.25rem;
+  --shadow-2xs: 0px 10px 20px -5px hsl(0 0% 0% / 0.25);
+  --shadow-xs: 0px 10px 20px -5px hsl(0 0% 0% / 0.25);
+  --shadow-sm: 0px 10px 20px -5px hsl(0 0% 0% / 0.5), 0px 1px 2px -6px hsl(0 0% 0% / 0.5);
+  --shadow: 0px 10px 20px -5px hsl(0 0% 0% / 0.5), 0px 1px 2px -6px hsl(0 0% 0% / 0.5);
+  --shadow-md: 0px 10px 20px -5px hsl(0 0% 0% / 0.5), 0px 2px 4px -6px hsl(0 0% 0% / 0.5);
+  --shadow-lg: 0px 10px 20px -5px hsl(0 0% 0% / 0.5), 0px 4px 6px -6px hsl(0 0% 0% / 0.5);
+  --shadow-xl: 0px 10px 20px -5px hsl(0 0% 0% / 0.5), 0px 8px 10px -6px hsl(0 0% 0% / 0.5);
+  --shadow-2xl: 0px 10px 20px -5px hsl(0 0% 0% / 1.25);
+}
+
+@layer base {
+  body {
+    letter-spacing: var(--tracking-normal);
+  }
+}
diff --git a/apps/docs/src/hooks/use-mobile.ts b/apps/docs/src/hooks/use-mobile.ts
new file mode 100644
index 000000000..502fd3239
--- /dev/null
+++ b/apps/docs/src/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}
diff --git a/apps/docs/src/lib/pocketbase.ts b/apps/docs/src/lib/pocketbase.ts
new file mode 100644
index 000000000..43f338594
--- /dev/null
+++ b/apps/docs/src/lib/pocketbase.ts
@@ -0,0 +1,21 @@
+import { WorkshopBackend, type TypedWorkshopPocketBase } from "@homarr/workshop/backend";
+import type { WorkshopSubmissionSummary } from "@homarr/workshop/schema";
+
+export type { WorkshopComment, WorkshopVote } from "@homarr/workshop/schema";
+
+const backends = new Map<string, WorkshopBackend>();
+
+export const getWorkshopBackend = (url: string): WorkshopBackend => {
+  const normalizedUrl = url.replace(/\/$/u, "");
+  const existing = backends.get(normalizedUrl);
+  if (existing) return existing;
+  const backend = new WorkshopBackend(normalizedUrl);
+  backends.set(normalizedUrl, backend);
+  return backend;
+};
+
+export const getPocketBase = (url: string): TypedWorkshopPocketBase => getWorkshopBackend(url).pocketBase;
+
+export type WorkshopSubmission = WorkshopSubmissionSummary & {
+  content: string;
+};
diff --git a/apps/docs/src/lib/utils.ts b/apps/docs/src/lib/utils.ts
new file mode 100644
index 000000000..a0ed0e903
--- /dev/null
+++ b/apps/docs/src/lib/utils.ts
@@ -0,0 +1,21 @@
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function errorMessage(caught: unknown, fallback: string) {
+  return caught instanceof Error ? caught.message : fallback;
+}
+
+export function oauthErrorMessage(caught: unknown) {
+  const message = errorMessage(caught, "GitHub sign-in failed");
+  if (/popup.*block|blocked.*popup/iu.test(message))
+    return "GitHub sign-in popup was blocked. Allow popups for this site and try again.";
+  if (/cancel|closed.*popup|popup.*closed/iu.test(message)) return "GitHub sign-in was cancelled before it completed.";
+  if (/provider|oauth|redirect|callback|client.?id/iu.test(message))
+    return "GitHub sign-in is not configured correctly on the Workshop server.";
+  return message;
+}
diff --git a/apps/docs/src/lib/workshop-schema.spec.ts b/apps/docs/src/lib/workshop-schema.spec.ts
new file mode 100644
index 000000000..65ed69759
--- /dev/null
+++ b/apps/docs/src/lib/workshop-schema.spec.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+
+import { CUSTOM_WIDGET_STARTER } from "@homarr/custom-widgets/core";
+
+import { validateSubmissionContent } from "./workshop-schema";
+
+const validWidget = CUSTOM_WIDGET_STARTER;
+
+describe("validateSubmissionContent", () => {
+  it("accepts a valid homarr-custom-widget-v2 JSON", () => {
+    expect(validateSubmissionContent("customWidget", JSON.stringify(validWidget)).success).toBe(true);
+  });
+
+  it("rejects an old/unknown widget schema version", () => {
+    const result = validateSubmissionContent(
+      "customWidget",
+      JSON.stringify({ ...validWidget, $schema: "homarr-custom-widget-v1" }),
+    );
+    expect(result.success).toBe(false);
+  });
+
+  it("rejects widgets without a schema version", () => {
+    const { $schema: _schema, ...widgetWithoutSchema } = validWidget;
+
+    expect(validateSubmissionContent("customWidget", JSON.stringify(widgetWithoutSchema)).success).toBe(false);
+  });
+
+  it("rejects malformed widget JSON", () => {
+    expect(validateSubmissionContent("customWidget", "{ not json").success).toBe(false);
+  });
+
+  it("accepts non-empty CSS and rejects empty CSS", () => {
+    expect(validateSubmissionContent("customCss", ".card { color: red; }").success).toBe(true);
+    expect(validateSubmissionContent("customCss", "   ").success).toBe(false);
+  });
+});
diff --git a/apps/docs/src/lib/workshop-schema.ts b/apps/docs/src/lib/workshop-schema.ts
new file mode 100644
index 000000000..e4f752f7f
--- /dev/null
+++ b/apps/docs/src/lib/workshop-schema.ts
@@ -0,0 +1,24 @@
+import { CUSTOM_WIDGET_SCHEMA, type HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
+import {
+  MAX_WORKSHOP_CSS_LENGTH,
+  type WorkshopSubmissionType,
+  validateWorkshopContent,
+  WORKSHOP_CSS_SCHEMA,
+} from "@homarr/workshop/schema";
+
+export type SubmissionType = WorkshopSubmissionType;
+export const WIDGET_SCHEMA_VERSION = CUSTOM_WIDGET_SCHEMA;
+export const CSS_SCHEMA_VERSION = WORKSHOP_CSS_SCHEMA;
+export const MAX_CSS_LENGTH = MAX_WORKSHOP_CSS_LENGTH;
+
+export type WorkshopValidationResult =
+  | { success: true; data: HomarrCustomWidgetV2 | string }
+  | { success: false; error: string };
+
+export const schemaVersionByType = {
+  customWidget: WIDGET_SCHEMA_VERSION,
+  customCss: CSS_SCHEMA_VERSION,
+} satisfies Record<SubmissionType, string>;
+
+export const validateSubmissionContent = (type: SubmissionType, raw: string): WorkshopValidationResult =>
+  validateWorkshopContent(type, raw);
diff --git a/apps/docs/src/pages/index.module.css b/apps/docs/src/pages/index.module.css
index baeb80f6d..726246ae2 100644
--- a/apps/docs/src/pages/index.module.css
+++ b/apps/docs/src/pages/index.module.css
@@ -27,7 +27,6 @@ section {
   max-width: min(100%, 500px);
 }
 
-
 .heroBanner {
   padding: 4rem;
   position: relative;
diff --git a/apps/docs/src/pages/workshop/admin/index.tsx b/apps/docs/src/pages/workshop/admin/index.tsx
new file mode 100644
index 000000000..a8baf5bcf
--- /dev/null
+++ b/apps/docs/src/pages/workshop/admin/index.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+
+import { WorkshopAdmin } from "@site/src/components/workshop/WorkshopAdmin";
+export default function WorkshopAdminRoute() {
+  const { siteConfig } = useDocusaurusContext();
+  const workshopUrl = (siteConfig.customFields?.workshopUrl as string | undefined) ?? "";
+  return (
+    <Layout title="Workshop moderation" noFooter>
+      <WorkshopAdmin workshopUrl={workshopUrl} />
+    </Layout>
+  );
+}
diff --git a/apps/docs/src/pages/workshop/index.tsx b/apps/docs/src/pages/workshop/index.tsx
new file mode 100644
index 000000000..f7fadabf8
--- /dev/null
+++ b/apps/docs/src/pages/workshop/index.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+
+import { WorkshopApp, WorkshopListingFallback } from "@site/src/components/workshop/WorkshopApp";
+import { WorkshopErrorBoundary } from "@site/src/components/workshop/WorkshopErrorBoundary";
+
+export default function WorkshopPage() {
+  const { siteConfig } = useDocusaurusContext();
+  const configuredWorkshopUrl = (siteConfig.customFields?.workshopUrl as string | undefined) ?? "";
+
+  return (
+    <Layout title="Workshop" description="Community custom CSS and custom widgets for Homarr">
+      <main className="marketplace bg-background text-foreground min-h-[80vh]">
+        <BrowserOnly fallback={<WorkshopListingFallback />}>
+          {() => (
+            <WorkshopErrorBoundary>
+              <WorkshopApp workshopUrl={configuredWorkshopUrl || window.location.origin} />
+            </WorkshopErrorBoundary>
+          )}
+        </BrowserOnly>
+      </main>
+    </Layout>
+  );
+}
diff --git a/apps/docs/static/api/open-api-schema.json b/apps/docs/static/api/open-api-schema.json
index ca2f93d64..76f954a20 100644
--- a/apps/docs/static/api/open-api-schema.json
+++ b/apps/docs/static/api/open-api-schema.json
@@ -1 +1,4732 @@
-{"openapi":"3.1.0","info":{"title":"Homarr API documentation","version":"1.1.0"},"servers":[{"url":"http://localhost:3000"}],"externalDocs":{"url":"https://homarr.dev"},"paths":{"/api/apps/paginated":{"get":{"operationId":"appRouter-getPaginated","tags":["apps"],"security":[{"apikey":[]}],"parameters":[{"in":"query","name":"search","schema":{"type":"string"}},{"in":"query","name":"pageSize","schema":{"default":10,"type":"integer","exclusiveMinimum":0,"maximum":9007199254740991}},{"in":"query","name":"page","schema":{"default":1,"type":"integer","exclusiveMinimum":0,"maximum":9007199254740991}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"object","properties":{"items":{"type":"array","items":{"type":"object","properties":{"id":{"type":"string"},"name":{"type":"string"},"description":{"anyOf":[{"type":"string"},{"type":"null"}]},"iconUrl":{"type":"string"},"href":{"anyOf":[{"type":"string"},{"type":"null"}]},"pingUrl":{"anyOf":[{"type":"string"},{"type":"null"}]}},"required":["id","name","description","iconUrl","href","pingUrl"],"additionalProperties":false}},"totalCount":{"type":"number"}},"required":["items","totalCount"],"additionalProperties":false}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/apps":{"get":{"operationId":"appRouter-all","tags":["apps"],"security":[{"apikey":[]}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"type":"object","properties":{"id":{"type":"string"},"name":{"type":"string"},"description":{"anyOf":[{"type":"string"},{"type":"null"}]},"iconUrl":{"type":"string"},"href":{"anyOf":[{"type":"string"},{"type":"null"}]},"pingUrl":{"anyOf":[{"type":"string"},{"type":"null"}]}},"required":["id","name","description","iconUrl","href","pingUrl"],"additionalProperties":false}}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}},"post":{"operationId":"appRouter-create","tags":["apps"],"security":[{"apikey":[]}],"parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"name":{"type":"string","minLength":1,"maxLength":64},"description":{"anyOf":[{"type":"string","maxLength":512},{"type":"null"}]},"iconUrl":{"type":"string","minLength":1},"href":{"anyOf":[{"anyOf":[{"type":"string","pattern":"^(?!javascript)[a-zA-Z]*:\\/\\/"},{"type":"string","const":""}]},{"type":"null"}]},"pingUrl":{"anyOf":[{"anyOf":[{"type":"string","pattern":"^https?:\\/\\/"},{"type":"string","const":""}]},{"type":"null"}]}},"required":["name","description","iconUrl","href","pingUrl"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"allOf":[{"type":"object","properties":{"appId":{"type":"string"}},"required":["appId"],"additionalProperties":false},{"type":"object","properties":{"id":{"type":"string"},"name":{"type":"string"},"description":{"anyOf":[{"type":"string"},{"type":"null"}]},"iconUrl":{"type":"string"},"href":{"anyOf":[{"type":"string"},{"type":"null"}]},"pingUrl":{"anyOf":[{"type":"string"},{"type":"null"}]}},"required":["id","name","description","iconUrl","href","pingUrl"],"additionalProperties":false}]}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/apps/search":{"get":{"operationId":"appRouter-search","tags":["apps"],"security":[{"apikey":[]}],"parameters":[{"in":"query","name":"query","schema":{"type":"string"},"required":true},{"in":"query","name":"limit","schema":{"default":10,"type":"number","minimum":1,"maximum":100}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"type":"object","properties":{"id":{"type":"string"},"name":{"type":"string"},"description":{"anyOf":[{"type":"string"},{"type":"null"}]},"iconUrl":{"type":"string"},"href":{"anyOf":[{"type":"string"},{"type":"null"}]},"pingUrl":{"anyOf":[{"type":"string"},{"type":"null"}]}},"required":["id","name","description","iconUrl","href","pingUrl"],"additionalProperties":false}}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/apps/selectable":{"get":{"operationId":"appRouter-selectable","tags":["apps"],"security":[{"apikey":[]}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"type":"object","properties":{"id":{"type":"string"},"name":{"type":"string"},"iconUrl":{"type":"string"},"href":{"anyOf":[{"type":"string"},{"type":"null"}]},"pingUrl":{"anyOf":[{"type":"string"},{"type":"null"}]},"description":{"anyOf":[{"type":"string"},{"type":"null"}]}},"required":["id","name","iconUrl","href","pingUrl","description"],"additionalProperties":false}}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/apps/{id}":{"get":{"operationId":"appRouter-byId","tags":["apps"],"security":[{"apikey":[]}],"parameters":[{"in":"path","name":"id","schema":{"type":"string"},"required":true}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"object","properties":{"id":{"type":"string"},"name":{"type":"string"},"description":{"anyOf":[{"type":"string"},{"type":"null"}]},"iconUrl":{"type":"string"},"href":{"anyOf":[{"type":"string"},{"type":"null"}]},"pingUrl":{"anyOf":[{"type":"string"},{"type":"null"}]}},"required":["id","name","description","iconUrl","href","pingUrl"],"additionalProperties":false}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}},"patch":{"operationId":"appRouter-update","tags":["apps"],"security":[{"apikey":[]}],"parameters":[{"in":"path","name":"id","schema":{"type":"string"},"required":true}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"name":{"type":"string","minLength":1,"maxLength":64},"description":{"anyOf":[{"type":"string","maxLength":512},{"type":"null"}]},"iconUrl":{"type":"string","minLength":1},"href":{"anyOf":[{"anyOf":[{"type":"string","pattern":"^(?!javascript)[a-zA-Z]*:\\/\\/"},{"type":"string","const":""}]},{"type":"null"}]},"pingUrl":{"anyOf":[{"anyOf":[{"type":"string","pattern":"^https?:\\/\\/"},{"type":"string","const":""}]},{"type":"null"}]}},"required":["name","description","iconUrl","href","pingUrl"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}},"delete":{"operationId":"appRouter-delete","tags":["apps"],"security":[{"apikey":[]}],"parameters":[{"in":"path","name":"id","schema":{"type":"string"},"required":true}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/boards":{"get":{"operationId":"boardRouter-getAllBoards","tags":["boards"],"security":[{"apikey":[]}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"type":"object","properties":{"id":{"type":"string"},"name":{"type":"string"},"logoImageUrl":{"anyOf":[{"type":"string"},{"type":"null"}]},"isPublic":{"type":"boolean"},"creator":{"anyOf":[{"type":"object","properties":{"id":{"type":"string"},"name":{"anyOf":[{"type":"string"},{"type":"null"}]},"image":{"anyOf":[{"type":"string"},{"type":"null"}]},"email":{"anyOf":[{"type":"string"},{"type":"null"}]}},"required":["id","name","image","email"],"additionalProperties":false},{"type":"null"}]},"isHome":{"type":"boolean"},"isMobileHome":{"type":"boolean"},"userPermissions":{"type":"array","items":{"type":"object","properties":{"permission":{"type":"string","enum":["view","modify","full"]}},"required":["permission"],"additionalProperties":false}},"groupPermissions":{"type":"array","items":{"type":"object","properties":{"permission":{"type":"string","enum":["view","modify","full"]}},"required":["permission"],"additionalProperties":false}}},"required":["id","name","logoImageUrl","isPublic","creator","isHome","isMobileHome","userPermissions","groupPermissions"],"additionalProperties":false}}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}},"post":{"operationId":"boardRouter-createBoard","tags":["boards"],"security":[{"apikey":[]}],"parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"name":{"type":"string","minLength":1,"maxLength":255,"pattern":"^[A-Za-z0-9-_]*$"},"columnCount":{"type":"number","minimum":1,"maximum":24},"isPublic":{"type":"boolean"}},"required":["name","columnCount","isPublic"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"object","properties":{"boardId":{"type":"string"}},"required":["boardId"],"additionalProperties":false}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/boards/{id}/duplicate":{"post":{"operationId":"boardRouter-duplicateBoard","tags":["boards"],"security":[{"apikey":[]}],"parameters":[{"in":"path","name":"id","schema":{"type":"string"},"required":true}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"name":{"type":"string","minLength":1,"maxLength":255,"pattern":"^[A-Za-z0-9-_]*$"}},"required":["name"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"object","properties":{"boardId":{"type":"string"}},"required":["boardId"],"additionalProperties":false}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/boards/{id}/name":{"patch":{"operationId":"boardRouter-renameBoard","tags":["boards"],"security":[{"apikey":[]}],"parameters":[{"in":"path","name":"id","schema":{"type":"string"},"required":true}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"name":{"type":"string","minLength":1,"maxLength":255,"pattern":"^[A-Za-z0-9-_]*$"}},"required":["name"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/boards/{id}/visibility":{"patch":{"operationId":"boardRouter-changeBoardVisibility","tags":["boards"],"security":[{"apikey":[]}],"parameters":[{"in":"path","name":"id","schema":{"type":"string"},"required":true}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"visibility":{"type":"string","enum":["public","private"]}},"required":["visibility"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/boards/{id}":{"delete":{"operationId":"boardRouter-deleteBoard","tags":["boards"],"security":[{"apikey":[]}],"parameters":[{"in":"path","name":"id","schema":{"type":"string"},"required":true}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/boards/{id}/home":{"patch":{"operationId":"boardRouter-setHomeBoard","tags":["boards"],"security":[{"apikey":[]}],"parameters":[{"in":"path","name":"id","schema":{"type":"string"},"required":true}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/boards/{id}/mobile-home":{"patch":{"operationId":"boardRouter-setMobileHomeBoard","tags":["boards"],"security":[{"apikey":[]}],"parameters":[{"in":"path","name":"id","schema":{"type":"string"},"required":true}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/boards/{id}/settings":{"patch":{"operationId":"boardRouter-savePartialBoardSettings","tags":["boards"],"security":[{"apikey":[]}],"parameters":[{"in":"path","name":"id","schema":{"type":"string"},"required":true}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"pageTitle":{"anyOf":[{"type":"string"},{"type":"null"}]},"metaTitle":{"anyOf":[{"type":"string"},{"type":"null"}]},"logoImageUrl":{"anyOf":[{"type":"string"},{"type":"null"}]},"faviconImageUrl":{"anyOf":[{"type":"string"},{"type":"null"}]},"backgroundImageUrl":{"anyOf":[{"type":"string"},{"type":"null"}]},"backgroundImageAttachment":{"type":"string","enum":["fixed","scroll"]},"backgroundImageRepeat":{"type":"string","enum":["repeat","repeat-x","repeat-y","no-repeat"]},"backgroundImageSize":{"type":"string","enum":["cover","contain"]},"primaryColor":{"type":"string","pattern":"^#[0-9A-Fa-f]{6}$"},"secondaryColor":{"type":"string","pattern":"^#[0-9A-Fa-f]{6}$"},"opacity":{"type":"number","minimum":0,"maximum":100},"customCss":{"type":"string","maxLength":16384},"iconColor":{"anyOf":[{"anyOf":[{"type":"string","pattern":"^#[0-9A-Fa-f]{6}$"},{"type":"string","const":""}]},{"type":"null"}]},"itemRadius":{"anyOf":[{"type":"string","const":"xs"},{"type":"string","const":"sm"},{"type":"string","const":"md"},{"type":"string","const":"lg"},{"type":"string","const":"xl"}]},"disableStatus":{"type":"boolean"}}}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/boards/items":{"post":{"operationId":"boardRouter-addItem","tags":["boards"],"security":[{"apikey":[]}],"parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"boardId":{"type":"string"},"kind":{"type":"string","enum":["clock","weather","app","iframe","video","notebook","anchorNote","dnsHoleSummary","dnsHoleControls","smartHome-entityState","smartHome-executeAutomation","stockPrice","mediaServer","calendar","downloads","mediaRequests-requestList","mediaRequests-requestStats","mediaTranscoding","minecraftServerStatus","networkControllerSummary","networkControllerStatus","rssFeed","bookmarks","indexerManager","healthMonitoring","releases","mediaReleases","dockerContainers","firewall","notifications","systemResources","coolify","systemDisks","timetable","immich-serverStats","immich-albumCarousel","paperlessNgx","tracearr","speedtestTracker","uptimeKuma","audioStats","umami","vpn","archiveTeamWarrior","ups","beszelSystemTable","beszelSystemGrid","beszelAlerts","beszelSystemStats","customApi"]},"options":{"default":{},"type":"object","propertyNames":{"type":"string"},"additionalProperties":{}},"integrationIds":{"default":[],"type":"array","items":{"type":"string"}}},"required":["boardId","kind"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"object","properties":{"itemId":{"type":"string"}},"required":["itemId"],"additionalProperties":false}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/info":{"get":{"operationId":"infoRouter-getInfo","tags":["info"],"security":[{"apikey":[]}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"object","properties":{"version":{"type":"string"}},"required":["version"],"additionalProperties":false}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/invites":{"get":{"operationId":"inviteRouter-getAll","tags":["invites"],"security":[{"apikey":[]}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"type":"object","properties":{"id":{"type":"string"},"expirationDate":{"type":"string"},"creator":{"type":"object","properties":{"name":{"anyOf":[{"type":"string"},{"type":"null"}]},"id":{"type":"string"}},"required":["name","id"],"additionalProperties":false}},"required":["id","expirationDate","creator"],"additionalProperties":false}}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}},"post":{"operationId":"inviteRouter-createInvite","tags":["invites"],"security":[{"apikey":[]}],"parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"expirationDate":{"type":"string"}},"required":["expirationDate"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"object","properties":{"id":{"type":"string"},"token":{"type":"string"}},"required":["id","token"],"additionalProperties":false}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/invites/{id}":{"delete":{"operationId":"inviteRouter-deleteInvite","tags":["invites"],"security":[{"apikey":[]}],"parameters":[{"in":"path","name":"id","schema":{"type":"string"},"required":true}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"not":{}}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/settings/board":{"get":{"operationId":"serverSettingsRouter-getBoardSettings","tags":["settings"],"security":[{"apikey":[]}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"object","properties":{"homeBoardId":{"anyOf":[{"type":"string"},{"type":"null"}]},"mobileHomeBoardId":{"anyOf":[{"type":"string"},{"type":"null"}]},"enableStatusByDefault":{"type":"boolean"},"forceDisableStatus":{"type":"boolean"}},"required":["homeBoardId","mobileHomeBoardId","enableStatusByDefault","forceDisableStatus"],"additionalProperties":false}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}},"patch":{"operationId":"serverSettingsRouter-updateBoardSettings","tags":["settings"],"security":[{"apikey":[]}],"parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"homeBoardId":{"anyOf":[{"type":"string"},{"type":"null"}]},"mobileHomeBoardId":{"anyOf":[{"type":"string"},{"type":"null"}]},"enableStatusByDefault":{"type":"boolean"},"forceDisableStatus":{"type":"boolean"}}}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"object","properties":{"homeBoardId":{"anyOf":[{"type":"string"},{"type":"null"}]},"mobileHomeBoardId":{"anyOf":[{"type":"string"},{"type":"null"}]},"enableStatusByDefault":{"type":"boolean"},"forceDisableStatus":{"type":"boolean"}},"required":["homeBoardId","mobileHomeBoardId","enableStatusByDefault","forceDisableStatus"],"additionalProperties":false}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/users":{"post":{"operationId":"userRouter-create","tags":["users"],"security":[{"apikey":[]}],"parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"username":{"type":"string","minLength":3,"maxLength":255},"password":{"type":"string","minLength":8,"maxLength":255},"confirmPassword":{"type":"string"},"email":{"anyOf":[{"type":"string","format":"email","pattern":"^(?!\\.)(?!.*\\.\\.)([A-Za-z0-9_'+\\-\\.]*)[A-Za-z0-9_+-]@([A-Za-z0-9][A-Za-z0-9\\-]*\\.)+[A-Za-z]{2,}$"},{"type":"string","minLength":0,"maxLength":0}]},"groupIds":{"type":"array","items":{"type":"string"}}},"required":["username","password","confirmPassword","groupIds"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}},"get":{"operationId":"userRouter-getAll","tags":["users"],"security":[{"apikey":[]}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"type":"object","properties":{"id":{"type":"string"},"name":{"anyOf":[{"type":"string"},{"type":"null"}]},"email":{"anyOf":[{"type":"string"},{"type":"null"}]},"emailVerified":{"anyOf":[{"type":"string"},{"type":"null"}]},"image":{"anyOf":[{"type":"string"},{"type":"null"}]}},"required":["id","name","email","emailVerified","image"],"additionalProperties":false}}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/users/profileImage":{"put":{"operationId":"userRouter-setProfileImage","tags":["users"],"security":[{"apikey":[]}],"parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"userId":{"type":"string"},"image":{"anyOf":[{"type":"string","maxLength":350000,"pattern":"^data:image\\/(png|jpeg|gif|webp);base64,[A-Za-z0-9/+]+=*$"},{"type":"null"}]}},"required":["userId","image"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/users/selectable":{"get":{"operationId":"userRouter-selectable","tags":["users"],"security":[{"apikey":[]}],"parameters":[{"in":"query","name":"providers","schema":{"type":"array","items":{"type":"string","enum":["credentials","oidc","ldap"]}}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"type":"object","properties":{"id":{"type":"string"},"name":{"anyOf":[{"type":"string"},{"type":"null"}]},"image":{"anyOf":[{"type":"string"},{"type":"null"}]},"email":{"anyOf":[{"type":"string"},{"type":"null"}]}},"required":["id","name","image","email"],"additionalProperties":false}}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/users/search":{"post":{"operationId":"userRouter-search","tags":["users"],"security":[{"apikey":[]}],"parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"query":{"type":"string"},"limit":{"default":10,"type":"number","minimum":1,"maximum":100}},"required":["query"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"type":"object","properties":{"id":{"type":"string"},"name":{"anyOf":[{"type":"string"},{"type":"null"}]},"image":{"anyOf":[{"type":"string"},{"type":"null"}]},"email":{"anyOf":[{"type":"string"},{"type":"null"}]}},"required":["id","name","image","email"],"additionalProperties":false}}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/users/{userId}":{"get":{"operationId":"userRouter-getById","tags":["users"],"security":[{"apikey":[]}],"parameters":[{"in":"path","name":"userId","schema":{"type":"string"},"required":true}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"object","properties":{"id":{"type":"string"},"name":{"anyOf":[{"type":"string"},{"type":"null"}]},"email":{"anyOf":[{"type":"string"},{"type":"null"}]},"emailVerified":{"anyOf":[{"type":"string"},{"type":"null"}]},"image":{"anyOf":[{"type":"string"},{"type":"null"}]},"provider":{"type":"string"},"homeBoardId":{"anyOf":[{"type":"string"},{"type":"null"}]},"mobileHomeBoardId":{"anyOf":[{"type":"string"},{"type":"null"}]},"firstDayOfWeek":{"type":"integer","minimum":-9007199254740991,"maximum":9007199254740991},"pingIconsEnabled":{"type":"boolean"},"defaultSearchEngineId":{"anyOf":[{"type":"string"},{"type":"null"}]},"openSearchInNewTab":{"type":"boolean"},"ddgBangs":{"type":"boolean"},"completedManageTour":{"type":"boolean"},"completedBoardTour":{"type":"boolean"}},"required":["id","name","email","emailVerified","image","provider","homeBoardId","mobileHomeBoardId","firstDayOfWeek","pingIconsEnabled","defaultSearchEngineId","openSearchInNewTab","ddgBangs","completedManageTour","completedBoardTour"],"additionalProperties":false}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}},"delete":{"operationId":"userRouter-delete","tags":["users"],"security":[{"apikey":[]}],"parameters":[{"in":"path","name":"userId","schema":{"type":"string"},"required":true}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/users/profile":{"put":{"operationId":"userRouter-editProfile","tags":["users"],"security":[{"apikey":[]}],"parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"id":{"type":"string"},"name":{"type":"string","minLength":3,"maxLength":255},"email":{"anyOf":[{"anyOf":[{"type":"string","format":"email","pattern":"^(?!\\.)(?!.*\\.\\.)([A-Za-z0-9_'+\\-\\.]*)[A-Za-z0-9_+-]@([A-Za-z0-9][A-Za-z0-9\\-]*\\.)+[A-Za-z]{2,}$"},{"type":"string","const":""}]},{"type":"null"}]}},"required":["id","name"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/users/{userId}/changePassword":{"patch":{"operationId":"userRouter-changePassword","tags":["users"],"security":[{"apikey":[]}],"parameters":[{"in":"path","name":"userId","schema":{"type":"string"},"required":true}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"previousPassword":{"type":"string","minLength":1},"password":{"type":"string","minLength":8,"maxLength":255},"confirmPassword":{"type":"string"}},"required":["previousPassword","password","confirmPassword"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/users/changeHome":{"patch":{"operationId":"userRouter-changeHomeBoards","tags":["users"],"security":[{"apikey":[]}],"parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"homeBoardId":{"anyOf":[{"type":"string"},{"type":"null"}]},"mobileHomeBoardId":{"anyOf":[{"type":"string"},{"type":"null"}]},"userId":{"type":"string"}},"required":["homeBoardId","mobileHomeBoardId","userId"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/users/changeSearchEngine":{"patch":{"operationId":"userRouter-changeDefaultSearchEngine","tags":["users"],"security":[{"apikey":[]}],"deprecated":true,"parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"defaultSearchEngineId":{"anyOf":[{"type":"string","minLength":1},{"type":"null"}]},"ddgBangsEnabled":{"type":"boolean"},"userId":{"type":"string"}},"required":["defaultSearchEngineId","ddgBangsEnabled","userId"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/users/search-preferences":{"patch":{"operationId":"userRouter-changeSearchPreferences","tags":["users"],"security":[{"apikey":[]}],"parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"defaultSearchEngineId":{"anyOf":[{"type":"string","minLength":1},{"type":"null"}]},"openInNewTab":{"type":"boolean"},"ddgBangsEnabled":{"type":"boolean"},"userId":{"type":"string"}},"required":["defaultSearchEngineId","openInNewTab","ddgBangsEnabled","userId"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/users/changeScheme":{"patch":{"operationId":"userRouter-changeColorScheme","tags":["users"],"security":[{"apikey":[]}],"parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"colorScheme":{"type":"string","enum":["auto","light","dark"]}},"required":["colorScheme"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/users/ddg-bangs":{"patch":{"operationId":"userRouter-changeDdgBangs","tags":["users"],"security":[{"apikey":[]}],"deprecated":true,"parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"ddgBangs":{"type":"boolean"},"id":{"type":"string"}},"required":["ddgBangs","id"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}},"/api/users/firstDayOfWeek":{"patch":{"operationId":"userRouter-changeFirstDayOfWeek","tags":["users"],"security":[{"apikey":[]}],"parameters":[],"requestBody":{"required":true,"content":{"application/json":{"schema":{"type":"object","properties":{"firstDayOfWeek":{"type":"number","minimum":0,"maximum":6},"id":{"type":"string"}},"required":["firstDayOfWeek","id"]}}}},"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{}}}},"400":{"description":"Invalid input data","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.BAD_REQUEST"}}}},"401":{"description":"Authorization not provided","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.UNAUTHORIZED"}}}},"403":{"description":"Insufficient access","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.FORBIDDEN"}}}},"404":{"description":"Not found","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.NOT_FOUND"}}}},"500":{"description":"Internal server error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/error.INTERNAL_SERVER_ERROR"}}}}}}}},"components":{"schemas":{"error.BAD_REQUEST":{"type":"object","properties":{"message":{"type":"string","description":"The error message","example":"Invalid input data"},"code":{"type":"string","description":"The error code","example":"BAD_REQUEST"},"issues":{"description":"An array of issues that were responsible for the error","example":[],"type":"array","items":{"type":"object","properties":{"message":{"type":"string"}},"required":["message"],"additionalProperties":false}}},"required":["message","code"],"additionalProperties":false,"title":"Invalid input data error (400)","description":"The error information","example":{"code":"BAD_REQUEST","message":"Invalid input data","issues":[]}},"error.UNAUTHORIZED":{"type":"object","properties":{"message":{"type":"string","description":"The error message","example":"Authorization not provided"},"code":{"type":"string","description":"The error code","example":"UNAUTHORIZED"},"issues":{"description":"An array of issues that were responsible for the error","example":[],"type":"array","items":{"type":"object","properties":{"message":{"type":"string"}},"required":["message"],"additionalProperties":false}}},"required":["message","code"],"additionalProperties":false,"title":"Authorization not provided error (401)","description":"The error information","example":{"code":"UNAUTHORIZED","message":"Authorization not provided","issues":[]}},"error.FORBIDDEN":{"type":"object","properties":{"message":{"type":"string","description":"The error message","example":"Insufficient access"},"code":{"type":"string","description":"The error code","example":"FORBIDDEN"},"issues":{"description":"An array of issues that were responsible for the error","example":[],"type":"array","items":{"type":"object","properties":{"message":{"type":"string"}},"required":["message"],"additionalProperties":false}}},"required":["message","code"],"additionalProperties":false,"title":"Insufficient access error (403)","description":"The error information","example":{"code":"FORBIDDEN","message":"Insufficient access","issues":[]}},"error.NOT_FOUND":{"type":"object","properties":{"message":{"type":"string","description":"The error message","example":"Not found"},"code":{"type":"string","description":"The error code","example":"NOT_FOUND"},"issues":{"description":"An array of issues that were responsible for the error","example":[],"type":"array","items":{"type":"object","properties":{"message":{"type":"string"}},"required":["message"],"additionalProperties":false}}},"required":["message","code"],"additionalProperties":false,"title":"Not found error (404)","description":"The error information","example":{"code":"NOT_FOUND","message":"Not found","issues":[]}},"error.INTERNAL_SERVER_ERROR":{"type":"object","properties":{"message":{"type":"string","description":"The error message","example":"Internal server error"},"code":{"type":"string","description":"The error code","example":"INTERNAL_SERVER_ERROR"},"issues":{"description":"An array of issues that were responsible for the error","example":[],"type":"array","items":{"type":"object","properties":{"message":{"type":"string"}},"required":["message"],"additionalProperties":false}}},"required":["message","code"],"additionalProperties":false,"title":"Internal server error error (500)","description":"The error information","example":{"code":"INTERNAL_SERVER_ERROR","message":"Internal server error","issues":[]}}},"securitySchemes":{"apikey":{"type":"apiKey","name":"ApiKey","description":"API key which can be obtained in the Homarr administration dashboard","in":"header"}}}}
\ No newline at end of file
+{
+  "openapi": "3.1.0",
+  "info": {
+    "title": "Homarr API documentation",
+    "version": "1.1.0"
+  },
+  "servers": [
+    {
+      "url": "http://localhost:3000"
+    }
+  ],
+  "externalDocs": {
+    "url": "https://homarr.dev"
+  },
+  "paths": {
+    "/api/apps/paginated": {
+      "get": {
+        "operationId": "appRouter-getPaginated",
+        "tags": ["apps"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "query",
+            "name": "search",
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "in": "query",
+            "name": "pageSize",
+            "schema": {
+              "default": 10,
+              "type": "integer",
+              "exclusiveMinimum": 0,
+              "maximum": 9007199254740991
+            }
+          },
+          {
+            "in": "query",
+            "name": "page",
+            "schema": {
+              "default": 1,
+              "type": "integer",
+              "exclusiveMinimum": 0,
+              "maximum": 9007199254740991
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "items": {
+                      "type": "array",
+                      "items": {
+                        "type": "object",
+                        "properties": {
+                          "id": {
+                            "type": "string"
+                          },
+                          "name": {
+                            "type": "string"
+                          },
+                          "description": {
+                            "anyOf": [
+                              {
+                                "type": "string"
+                              },
+                              {
+                                "type": "null"
+                              }
+                            ]
+                          },
+                          "iconUrl": {
+                            "type": "string"
+                          },
+                          "href": {
+                            "anyOf": [
+                              {
+                                "type": "string"
+                              },
+                              {
+                                "type": "null"
+                              }
+                            ]
+                          },
+                          "pingUrl": {
+                            "anyOf": [
+                              {
+                                "type": "string"
+                              },
+                              {
+                                "type": "null"
+                              }
+                            ]
+                          }
+                        },
+                        "required": ["id", "name", "description", "iconUrl", "href", "pingUrl"],
+                        "additionalProperties": false
+                      }
+                    },
+                    "totalCount": {
+                      "type": "number"
+                    }
+                  },
+                  "required": ["items", "totalCount"],
+                  "additionalProperties": false
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/apps": {
+      "get": {
+        "operationId": "appRouter-all",
+        "tags": ["apps"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "type": "object",
+                    "properties": {
+                      "id": {
+                        "type": "string"
+                      },
+                      "name": {
+                        "type": "string"
+                      },
+                      "description": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      },
+                      "iconUrl": {
+                        "type": "string"
+                      },
+                      "href": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      },
+                      "pingUrl": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      }
+                    },
+                    "required": ["id", "name", "description", "iconUrl", "href", "pingUrl"],
+                    "additionalProperties": false
+                  }
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      },
+      "post": {
+        "operationId": "appRouter-create",
+        "tags": ["apps"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "name": {
+                    "type": "string",
+                    "minLength": 1,
+                    "maxLength": 64
+                  },
+                  "description": {
+                    "anyOf": [
+                      {
+                        "type": "string",
+                        "maxLength": 512
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "iconUrl": {
+                    "type": "string",
+                    "minLength": 1
+                  },
+                  "href": {
+                    "anyOf": [
+                      {
+                        "anyOf": [
+                          {
+                            "type": "string",
+                            "pattern": "^(?!javascript)[a-zA-Z]*:\\/\\/"
+                          },
+                          {
+                            "type": "string",
+                            "const": ""
+                          }
+                        ]
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "pingUrl": {
+                    "anyOf": [
+                      {
+                        "anyOf": [
+                          {
+                            "type": "string",
+                            "pattern": "^https?:\\/\\/"
+                          },
+                          {
+                            "type": "string",
+                            "const": ""
+                          }
+                        ]
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  }
+                },
+                "required": ["name", "description", "iconUrl", "href", "pingUrl"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "allOf": [
+                    {
+                      "type": "object",
+                      "properties": {
+                        "appId": {
+                          "type": "string"
+                        }
+                      },
+                      "required": ["appId"],
+                      "additionalProperties": false
+                    },
+                    {
+                      "type": "object",
+                      "properties": {
+                        "id": {
+                          "type": "string"
+                        },
+                        "name": {
+                          "type": "string"
+                        },
+                        "description": {
+                          "anyOf": [
+                            {
+                              "type": "string"
+                            },
+                            {
+                              "type": "null"
+                            }
+                          ]
+                        },
+                        "iconUrl": {
+                          "type": "string"
+                        },
+                        "href": {
+                          "anyOf": [
+                            {
+                              "type": "string"
+                            },
+                            {
+                              "type": "null"
+                            }
+                          ]
+                        },
+                        "pingUrl": {
+                          "anyOf": [
+                            {
+                              "type": "string"
+                            },
+                            {
+                              "type": "null"
+                            }
+                          ]
+                        }
+                      },
+                      "required": ["id", "name", "description", "iconUrl", "href", "pingUrl"],
+                      "additionalProperties": false
+                    }
+                  ]
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/apps/search": {
+      "get": {
+        "operationId": "appRouter-search",
+        "tags": ["apps"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "query",
+            "name": "query",
+            "schema": {
+              "type": "string"
+            },
+            "required": true
+          },
+          {
+            "in": "query",
+            "name": "limit",
+            "schema": {
+              "default": 10,
+              "type": "number",
+              "minimum": 1,
+              "maximum": 100
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "type": "object",
+                    "properties": {
+                      "id": {
+                        "type": "string"
+                      },
+                      "name": {
+                        "type": "string"
+                      },
+                      "description": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      },
+                      "iconUrl": {
+                        "type": "string"
+                      },
+                      "href": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      },
+                      "pingUrl": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      }
+                    },
+                    "required": ["id", "name", "description", "iconUrl", "href", "pingUrl"],
+                    "additionalProperties": false
+                  }
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/apps/selectable": {
+      "get": {
+        "operationId": "appRouter-selectable",
+        "tags": ["apps"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "type": "object",
+                    "properties": {
+                      "id": {
+                        "type": "string"
+                      },
+                      "name": {
+                        "type": "string"
+                      },
+                      "iconUrl": {
+                        "type": "string"
+                      },
+                      "href": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      },
+                      "pingUrl": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      },
+                      "description": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      }
+                    },
+                    "required": ["id", "name", "iconUrl", "href", "pingUrl", "description"],
+                    "additionalProperties": false
+                  }
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/apps/{id}": {
+      "get": {
+        "operationId": "appRouter-byId",
+        "tags": ["apps"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "path",
+            "name": "id",
+            "schema": {
+              "type": "string"
+            },
+            "required": true
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "id": {
+                      "type": "string"
+                    },
+                    "name": {
+                      "type": "string"
+                    },
+                    "description": {
+                      "anyOf": [
+                        {
+                          "type": "string"
+                        },
+                        {
+                          "type": "null"
+                        }
+                      ]
+                    },
+                    "iconUrl": {
+                      "type": "string"
+                    },
+                    "href": {
+                      "anyOf": [
+                        {
+                          "type": "string"
+                        },
+                        {
+                          "type": "null"
+                        }
+                      ]
+                    },
+                    "pingUrl": {
+                      "anyOf": [
+                        {
+                          "type": "string"
+                        },
+                        {
+                          "type": "null"
+                        }
+                      ]
+                    }
+                  },
+                  "required": ["id", "name", "description", "iconUrl", "href", "pingUrl"],
+                  "additionalProperties": false
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      },
+      "patch": {
+        "operationId": "appRouter-update",
+        "tags": ["apps"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "path",
+            "name": "id",
+            "schema": {
+              "type": "string"
+            },
+            "required": true
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "name": {
+                    "type": "string",
+                    "minLength": 1,
+                    "maxLength": 64
+                  },
+                  "description": {
+                    "anyOf": [
+                      {
+                        "type": "string",
+                        "maxLength": 512
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "iconUrl": {
+                    "type": "string",
+                    "minLength": 1
+                  },
+                  "href": {
+                    "anyOf": [
+                      {
+                        "anyOf": [
+                          {
+                            "type": "string",
+                            "pattern": "^(?!javascript)[a-zA-Z]*:\\/\\/"
+                          },
+                          {
+                            "type": "string",
+                            "const": ""
+                          }
+                        ]
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "pingUrl": {
+                    "anyOf": [
+                      {
+                        "anyOf": [
+                          {
+                            "type": "string",
+                            "pattern": "^https?:\\/\\/"
+                          },
+                          {
+                            "type": "string",
+                            "const": ""
+                          }
+                        ]
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  }
+                },
+                "required": ["name", "description", "iconUrl", "href", "pingUrl"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      },
+      "delete": {
+        "operationId": "appRouter-delete",
+        "tags": ["apps"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "path",
+            "name": "id",
+            "schema": {
+              "type": "string"
+            },
+            "required": true
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/boards": {
+      "get": {
+        "operationId": "boardRouter-getAllBoards",
+        "tags": ["boards"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "type": "object",
+                    "properties": {
+                      "id": {
+                        "type": "string"
+                      },
+                      "name": {
+                        "type": "string"
+                      },
+                      "logoImageUrl": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      },
+                      "isPublic": {
+                        "type": "boolean"
+                      },
+                      "creator": {
+                        "anyOf": [
+                          {
+                            "type": "object",
+                            "properties": {
+                              "id": {
+                                "type": "string"
+                              },
+                              "name": {
+                                "anyOf": [
+                                  {
+                                    "type": "string"
+                                  },
+                                  {
+                                    "type": "null"
+                                  }
+                                ]
+                              },
+                              "image": {
+                                "anyOf": [
+                                  {
+                                    "type": "string"
+                                  },
+                                  {
+                                    "type": "null"
+                                  }
+                                ]
+                              },
+                              "email": {
+                                "anyOf": [
+                                  {
+                                    "type": "string"
+                                  },
+                                  {
+                                    "type": "null"
+                                  }
+                                ]
+                              }
+                            },
+                            "required": ["id", "name", "image", "email"],
+                            "additionalProperties": false
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      },
+                      "isHome": {
+                        "type": "boolean"
+                      },
+                      "isMobileHome": {
+                        "type": "boolean"
+                      },
+                      "userPermissions": {
+                        "type": "array",
+                        "items": {
+                          "type": "object",
+                          "properties": {
+                            "permission": {
+                              "type": "string",
+                              "enum": ["view", "modify", "full"]
+                            }
+                          },
+                          "required": ["permission"],
+                          "additionalProperties": false
+                        }
+                      },
+                      "groupPermissions": {
+                        "type": "array",
+                        "items": {
+                          "type": "object",
+                          "properties": {
+                            "permission": {
+                              "type": "string",
+                              "enum": ["view", "modify", "full"]
+                            }
+                          },
+                          "required": ["permission"],
+                          "additionalProperties": false
+                        }
+                      }
+                    },
+                    "required": [
+                      "id",
+                      "name",
+                      "logoImageUrl",
+                      "isPublic",
+                      "creator",
+                      "isHome",
+                      "isMobileHome",
+                      "userPermissions",
+                      "groupPermissions"
+                    ],
+                    "additionalProperties": false
+                  }
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      },
+      "post": {
+        "operationId": "boardRouter-createBoard",
+        "tags": ["boards"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "name": {
+                    "type": "string",
+                    "minLength": 1,
+                    "maxLength": 255,
+                    "pattern": "^[A-Za-z0-9-_]*$"
+                  },
+                  "columnCount": {
+                    "type": "number",
+                    "minimum": 1,
+                    "maximum": 24
+                  },
+                  "isPublic": {
+                    "type": "boolean"
+                  }
+                },
+                "required": ["name", "columnCount", "isPublic"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "boardId": {
+                      "type": "string"
+                    }
+                  },
+                  "required": ["boardId"],
+                  "additionalProperties": false
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/boards/{id}/duplicate": {
+      "post": {
+        "operationId": "boardRouter-duplicateBoard",
+        "tags": ["boards"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "path",
+            "name": "id",
+            "schema": {
+              "type": "string"
+            },
+            "required": true
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "name": {
+                    "type": "string",
+                    "minLength": 1,
+                    "maxLength": 255,
+                    "pattern": "^[A-Za-z0-9-_]*$"
+                  }
+                },
+                "required": ["name"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "boardId": {
+                      "type": "string"
+                    }
+                  },
+                  "required": ["boardId"],
+                  "additionalProperties": false
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/boards/{id}/name": {
+      "patch": {
+        "operationId": "boardRouter-renameBoard",
+        "tags": ["boards"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "path",
+            "name": "id",
+            "schema": {
+              "type": "string"
+            },
+            "required": true
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "name": {
+                    "type": "string",
+                    "minLength": 1,
+                    "maxLength": 255,
+                    "pattern": "^[A-Za-z0-9-_]*$"
+                  }
+                },
+                "required": ["name"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/boards/{id}/visibility": {
+      "patch": {
+        "operationId": "boardRouter-changeBoardVisibility",
+        "tags": ["boards"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "path",
+            "name": "id",
+            "schema": {
+              "type": "string"
+            },
+            "required": true
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "visibility": {
+                    "type": "string",
+                    "enum": ["public", "private"]
+                  }
+                },
+                "required": ["visibility"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/boards/{id}": {
+      "delete": {
+        "operationId": "boardRouter-deleteBoard",
+        "tags": ["boards"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "path",
+            "name": "id",
+            "schema": {
+              "type": "string"
+            },
+            "required": true
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/boards/{id}/home": {
+      "patch": {
+        "operationId": "boardRouter-setHomeBoard",
+        "tags": ["boards"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "path",
+            "name": "id",
+            "schema": {
+              "type": "string"
+            },
+            "required": true
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/boards/{id}/mobile-home": {
+      "patch": {
+        "operationId": "boardRouter-setMobileHomeBoard",
+        "tags": ["boards"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "path",
+            "name": "id",
+            "schema": {
+              "type": "string"
+            },
+            "required": true
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/boards/{id}/settings": {
+      "patch": {
+        "operationId": "boardRouter-savePartialBoardSettings",
+        "tags": ["boards"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "path",
+            "name": "id",
+            "schema": {
+              "type": "string"
+            },
+            "required": true
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "pageTitle": {
+                    "anyOf": [
+                      {
+                        "type": "string"
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "metaTitle": {
+                    "anyOf": [
+                      {
+                        "type": "string"
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "logoImageUrl": {
+                    "anyOf": [
+                      {
+                        "type": "string"
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "faviconImageUrl": {
+                    "anyOf": [
+                      {
+                        "type": "string"
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "backgroundImageUrl": {
+                    "anyOf": [
+                      {
+                        "type": "string"
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "backgroundImageAttachment": {
+                    "type": "string",
+                    "enum": ["fixed", "scroll"]
+                  },
+                  "backgroundImageRepeat": {
+                    "type": "string",
+                    "enum": ["repeat", "repeat-x", "repeat-y", "no-repeat"]
+                  },
+                  "backgroundImageSize": {
+                    "type": "string",
+                    "enum": ["cover", "contain"]
+                  },
+                  "primaryColor": {
+                    "type": "string",
+                    "pattern": "^#[0-9A-Fa-f]{6}$"
+                  },
+                  "secondaryColor": {
+                    "type": "string",
+                    "pattern": "^#[0-9A-Fa-f]{6}$"
+                  },
+                  "opacity": {
+                    "type": "number",
+                    "minimum": 0,
+                    "maximum": 100
+                  },
+                  "customCss": {
+                    "type": "string",
+                    "maxLength": 16384
+                  },
+                  "iconColor": {
+                    "anyOf": [
+                      {
+                        "anyOf": [
+                          {
+                            "type": "string",
+                            "pattern": "^#[0-9A-Fa-f]{6}$"
+                          },
+                          {
+                            "type": "string",
+                            "const": ""
+                          }
+                        ]
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "itemRadius": {
+                    "anyOf": [
+                      {
+                        "type": "string",
+                        "const": "xs"
+                      },
+                      {
+                        "type": "string",
+                        "const": "sm"
+                      },
+                      {
+                        "type": "string",
+                        "const": "md"
+                      },
+                      {
+                        "type": "string",
+                        "const": "lg"
+                      },
+                      {
+                        "type": "string",
+                        "const": "xl"
+                      }
+                    ]
+                  },
+                  "disableStatus": {
+                    "type": "boolean"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/boards/items": {
+      "post": {
+        "operationId": "boardRouter-addItem",
+        "tags": ["boards"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "boardId": {
+                    "type": "string"
+                  },
+                  "kind": {
+                    "type": "string",
+                    "enum": [
+                      "clock",
+                      "weather",
+                      "app",
+                      "iframe",
+                      "video",
+                      "notebook",
+                      "anchorNote",
+                      "dnsHoleSummary",
+                      "dnsHoleControls",
+                      "smartHome-entityState",
+                      "smartHome-executeAutomation",
+                      "stockPrice",
+                      "mediaServer",
+                      "calendar",
+                      "downloads",
+                      "mediaRequests-requestList",
+                      "mediaRequests-requestStats",
+                      "mediaTranscoding",
+                      "mediaMissing",
+                      "minecraftServerStatus",
+                      "networkControllerSummary",
+                      "networkControllerStatus",
+                      "rssFeed",
+                      "bookmarks",
+                      "indexerManager",
+                      "healthMonitoring",
+                      "releases",
+                      "mediaReleases",
+                      "dockerContainers",
+                      "firewall",
+                      "notifications",
+                      "systemResources",
+                      "coolify",
+                      "systemDisks",
+                      "timetable",
+                      "immich-serverStats",
+                      "immich-albumCarousel",
+                      "paperlessNgx",
+                      "patchmon",
+                      "bazarr",
+                      "tracearr",
+                      "speedtestTracker",
+                      "uptimeKuma",
+                      "audioStats",
+                      "umami",
+                      "vpn",
+                      "archiveTeamWarrior",
+                      "ups",
+                      "beszelSystemTable",
+                      "beszelSystemGrid",
+                      "beszelAlerts",
+                      "beszelSystemStats",
+                      "traefik",
+                      "customApi"
+                    ]
+                  },
+                  "options": {
+                    "default": {},
+                    "type": "object",
+                    "propertyNames": {
+                      "type": "string"
+                    },
+                    "additionalProperties": {}
+                  },
+                  "integrationIds": {
+                    "default": [],
+                    "type": "array",
+                    "items": {
+                      "type": "string"
+                    }
+                  }
+                },
+                "required": ["boardId", "kind"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "itemId": {
+                      "type": "string"
+                    }
+                  },
+                  "required": ["itemId"],
+                  "additionalProperties": false
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/info": {
+      "get": {
+        "operationId": "infoRouter-getInfo",
+        "tags": ["info"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "version": {
+                      "type": "string"
+                    }
+                  },
+                  "required": ["version"],
+                  "additionalProperties": false
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/invites": {
+      "get": {
+        "operationId": "inviteRouter-getAll",
+        "tags": ["invites"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "type": "object",
+                    "properties": {
+                      "id": {
+                        "type": "string"
+                      },
+                      "expirationDate": {
+                        "type": "string"
+                      },
+                      "creator": {
+                        "type": "object",
+                        "properties": {
+                          "name": {
+                            "anyOf": [
+                              {
+                                "type": "string"
+                              },
+                              {
+                                "type": "null"
+                              }
+                            ]
+                          },
+                          "id": {
+                            "type": "string"
+                          }
+                        },
+                        "required": ["name", "id"],
+                        "additionalProperties": false
+                      }
+                    },
+                    "required": ["id", "expirationDate", "creator"],
+                    "additionalProperties": false
+                  }
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      },
+      "post": {
+        "operationId": "inviteRouter-createInvite",
+        "tags": ["invites"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "expirationDate": {
+                    "type": "string"
+                  }
+                },
+                "required": ["expirationDate"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "id": {
+                      "type": "string"
+                    },
+                    "token": {
+                      "type": "string"
+                    }
+                  },
+                  "required": ["id", "token"],
+                  "additionalProperties": false
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/invites/{id}": {
+      "delete": {
+        "operationId": "inviteRouter-deleteInvite",
+        "tags": ["invites"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "path",
+            "name": "id",
+            "schema": {
+              "type": "string"
+            },
+            "required": true
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "not": {}
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/settings/board": {
+      "get": {
+        "operationId": "serverSettingsRouter-getBoardSettings",
+        "tags": ["settings"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "homeBoardId": {
+                      "anyOf": [
+                        {
+                          "type": "string"
+                        },
+                        {
+                          "type": "null"
+                        }
+                      ]
+                    },
+                    "mobileHomeBoardId": {
+                      "anyOf": [
+                        {
+                          "type": "string"
+                        },
+                        {
+                          "type": "null"
+                        }
+                      ]
+                    },
+                    "enableStatusByDefault": {
+                      "type": "boolean"
+                    },
+                    "forceDisableStatus": {
+                      "type": "boolean"
+                    }
+                  },
+                  "required": ["homeBoardId", "mobileHomeBoardId", "enableStatusByDefault", "forceDisableStatus"],
+                  "additionalProperties": false
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      },
+      "patch": {
+        "operationId": "serverSettingsRouter-updateBoardSettings",
+        "tags": ["settings"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "homeBoardId": {
+                    "anyOf": [
+                      {
+                        "type": "string"
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "mobileHomeBoardId": {
+                    "anyOf": [
+                      {
+                        "type": "string"
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "enableStatusByDefault": {
+                    "type": "boolean"
+                  },
+                  "forceDisableStatus": {
+                    "type": "boolean"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "homeBoardId": {
+                      "anyOf": [
+                        {
+                          "type": "string"
+                        },
+                        {
+                          "type": "null"
+                        }
+                      ]
+                    },
+                    "mobileHomeBoardId": {
+                      "anyOf": [
+                        {
+                          "type": "string"
+                        },
+                        {
+                          "type": "null"
+                        }
+                      ]
+                    },
+                    "enableStatusByDefault": {
+                      "type": "boolean"
+                    },
+                    "forceDisableStatus": {
+                      "type": "boolean"
+                    }
+                  },
+                  "required": ["homeBoardId", "mobileHomeBoardId", "enableStatusByDefault", "forceDisableStatus"],
+                  "additionalProperties": false
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users": {
+      "post": {
+        "operationId": "userRouter-create",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "username": {
+                    "type": "string",
+                    "minLength": 3,
+                    "maxLength": 255
+                  },
+                  "password": {
+                    "type": "string",
+                    "minLength": 8,
+                    "maxLength": 255
+                  },
+                  "confirmPassword": {
+                    "type": "string"
+                  },
+                  "email": {
+                    "anyOf": [
+                      {
+                        "type": "string",
+                        "format": "email",
+                        "pattern": "^[^\\s@\"]{1,64}@[^\\s@]{1,255}$"
+                      },
+                      {
+                        "type": "string",
+                        "minLength": 0,
+                        "maxLength": 0
+                      }
+                    ]
+                  },
+                  "groupIds": {
+                    "type": "array",
+                    "items": {
+                      "type": "string"
+                    }
+                  }
+                },
+                "required": ["username", "password", "confirmPassword", "groupIds"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      },
+      "get": {
+        "operationId": "userRouter-getAll",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "type": "object",
+                    "properties": {
+                      "id": {
+                        "type": "string"
+                      },
+                      "name": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      },
+                      "email": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      },
+                      "emailVerified": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      },
+                      "image": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      }
+                    },
+                    "required": ["id", "name", "email", "emailVerified", "image"],
+                    "additionalProperties": false
+                  }
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users/profileImage": {
+      "put": {
+        "operationId": "userRouter-setProfileImage",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "userId": {
+                    "type": "string"
+                  },
+                  "image": {
+                    "anyOf": [
+                      {
+                        "type": "string",
+                        "maxLength": 350000,
+                        "pattern": "^data:image\\/(png|jpeg|gif|webp);base64,[A-Za-z0-9/+]+=*$"
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  }
+                },
+                "required": ["userId", "image"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users/selectable": {
+      "get": {
+        "operationId": "userRouter-selectable",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "query",
+            "name": "providers",
+            "schema": {
+              "type": "array",
+              "items": {
+                "type": "string",
+                "enum": ["credentials", "oidc", "ldap"]
+              }
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "type": "object",
+                    "properties": {
+                      "id": {
+                        "type": "string"
+                      },
+                      "name": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      },
+                      "image": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      },
+                      "email": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      }
+                    },
+                    "required": ["id", "name", "image", "email"],
+                    "additionalProperties": false
+                  }
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users/search": {
+      "post": {
+        "operationId": "userRouter-search",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "query": {
+                    "type": "string"
+                  },
+                  "limit": {
+                    "default": 10,
+                    "type": "number",
+                    "minimum": 1,
+                    "maximum": 100
+                  }
+                },
+                "required": ["query"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "type": "object",
+                    "properties": {
+                      "id": {
+                        "type": "string"
+                      },
+                      "name": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      },
+                      "image": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      },
+                      "email": {
+                        "anyOf": [
+                          {
+                            "type": "string"
+                          },
+                          {
+                            "type": "null"
+                          }
+                        ]
+                      }
+                    },
+                    "required": ["id", "name", "image", "email"],
+                    "additionalProperties": false
+                  }
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users/{userId}": {
+      "get": {
+        "operationId": "userRouter-getById",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "path",
+            "name": "userId",
+            "schema": {
+              "type": "string"
+            },
+            "required": true
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "id": {
+                      "type": "string"
+                    },
+                    "name": {
+                      "anyOf": [
+                        {
+                          "type": "string"
+                        },
+                        {
+                          "type": "null"
+                        }
+                      ]
+                    },
+                    "email": {
+                      "anyOf": [
+                        {
+                          "type": "string"
+                        },
+                        {
+                          "type": "null"
+                        }
+                      ]
+                    },
+                    "emailVerified": {
+                      "anyOf": [
+                        {
+                          "type": "string"
+                        },
+                        {
+                          "type": "null"
+                        }
+                      ]
+                    },
+                    "image": {
+                      "anyOf": [
+                        {
+                          "type": "string"
+                        },
+                        {
+                          "type": "null"
+                        }
+                      ]
+                    },
+                    "provider": {
+                      "type": "string"
+                    },
+                    "homeBoardId": {
+                      "anyOf": [
+                        {
+                          "type": "string"
+                        },
+                        {
+                          "type": "null"
+                        }
+                      ]
+                    },
+                    "mobileHomeBoardId": {
+                      "anyOf": [
+                        {
+                          "type": "string"
+                        },
+                        {
+                          "type": "null"
+                        }
+                      ]
+                    },
+                    "firstDayOfWeek": {
+                      "type": "integer",
+                      "minimum": -9007199254740991,
+                      "maximum": 9007199254740991
+                    },
+                    "pingIconsEnabled": {
+                      "type": "boolean"
+                    },
+                    "enableRightClickOnWidgets": {
+                      "type": "boolean"
+                    },
+                    "defaultSearchEngineId": {
+                      "anyOf": [
+                        {
+                          "type": "string"
+                        },
+                        {
+                          "type": "null"
+                        }
+                      ]
+                    },
+                    "openSearchInNewTab": {
+                      "type": "boolean"
+                    },
+                    "ddgBangs": {
+                      "type": "boolean"
+                    },
+                    "completedManageTour": {
+                      "type": "boolean"
+                    },
+                    "completedBoardTour": {
+                      "type": "boolean"
+                    }
+                  },
+                  "required": [
+                    "id",
+                    "name",
+                    "email",
+                    "emailVerified",
+                    "image",
+                    "provider",
+                    "homeBoardId",
+                    "mobileHomeBoardId",
+                    "firstDayOfWeek",
+                    "pingIconsEnabled",
+                    "enableRightClickOnWidgets",
+                    "defaultSearchEngineId",
+                    "openSearchInNewTab",
+                    "ddgBangs",
+                    "completedManageTour",
+                    "completedBoardTour"
+                  ],
+                  "additionalProperties": false
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      },
+      "delete": {
+        "operationId": "userRouter-delete",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "path",
+            "name": "userId",
+            "schema": {
+              "type": "string"
+            },
+            "required": true
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users/profile": {
+      "put": {
+        "operationId": "userRouter-editProfile",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "id": {
+                    "type": "string"
+                  },
+                  "name": {
+                    "type": "string",
+                    "minLength": 3,
+                    "maxLength": 255
+                  },
+                  "email": {
+                    "anyOf": [
+                      {
+                        "anyOf": [
+                          {
+                            "type": "string",
+                            "format": "email",
+                            "pattern": "^[^\\s@\"]{1,64}@[^\\s@]{1,255}$"
+                          },
+                          {
+                            "type": "string",
+                            "const": ""
+                          }
+                        ]
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  }
+                },
+                "required": ["id", "name"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users/{userId}/changePassword": {
+      "patch": {
+        "operationId": "userRouter-changePassword",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [
+          {
+            "in": "path",
+            "name": "userId",
+            "schema": {
+              "type": "string"
+            },
+            "required": true
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "previousPassword": {
+                    "type": "string",
+                    "minLength": 1
+                  },
+                  "password": {
+                    "type": "string",
+                    "minLength": 8,
+                    "maxLength": 255
+                  },
+                  "confirmPassword": {
+                    "type": "string"
+                  }
+                },
+                "required": ["previousPassword", "password", "confirmPassword"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users/changeHome": {
+      "patch": {
+        "operationId": "userRouter-changeHomeBoards",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "homeBoardId": {
+                    "anyOf": [
+                      {
+                        "type": "string"
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "mobileHomeBoardId": {
+                    "anyOf": [
+                      {
+                        "type": "string"
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "userId": {
+                    "type": "string"
+                  }
+                },
+                "required": ["homeBoardId", "mobileHomeBoardId", "userId"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users/changeSearchEngine": {
+      "patch": {
+        "operationId": "userRouter-changeDefaultSearchEngine",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "deprecated": true,
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "defaultSearchEngineId": {
+                    "anyOf": [
+                      {
+                        "type": "string",
+                        "minLength": 1
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "ddgBangsEnabled": {
+                    "type": "boolean"
+                  },
+                  "userId": {
+                    "type": "string"
+                  }
+                },
+                "required": ["defaultSearchEngineId", "ddgBangsEnabled", "userId"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users/search-preferences": {
+      "patch": {
+        "operationId": "userRouter-changeSearchPreferences",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "defaultSearchEngineId": {
+                    "anyOf": [
+                      {
+                        "type": "string",
+                        "minLength": 1
+                      },
+                      {
+                        "type": "null"
+                      }
+                    ]
+                  },
+                  "openInNewTab": {
+                    "type": "boolean"
+                  },
+                  "ddgBangsEnabled": {
+                    "type": "boolean"
+                  },
+                  "userId": {
+                    "type": "string"
+                  }
+                },
+                "required": ["defaultSearchEngineId", "openInNewTab", "ddgBangsEnabled", "userId"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users/changeScheme": {
+      "patch": {
+        "operationId": "userRouter-changeColorScheme",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "colorScheme": {
+                    "type": "string",
+                    "enum": ["auto", "light", "dark"]
+                  }
+                },
+                "required": ["colorScheme"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users/right-click-widgets": {
+      "patch": {
+        "operationId": "userRouter-changeEnableRightClickOnWidgets",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "enableRightClickOnWidgets": {
+                    "type": "boolean"
+                  },
+                  "id": {
+                    "type": "string"
+                  }
+                },
+                "required": ["enableRightClickOnWidgets", "id"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users/ddg-bangs": {
+      "patch": {
+        "operationId": "userRouter-changeDdgBangs",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "deprecated": true,
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "ddgBangs": {
+                    "type": "boolean"
+                  },
+                  "id": {
+                    "type": "string"
+                  }
+                },
+                "required": ["ddgBangs", "id"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users/firstDayOfWeek": {
+      "patch": {
+        "operationId": "userRouter-changeFirstDayOfWeek",
+        "tags": ["users"],
+        "security": [
+          {
+            "apikey": []
+          }
+        ],
+        "parameters": [],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "firstDayOfWeek": {
+                    "type": "number",
+                    "minimum": 0,
+                    "maximum": 6
+                  },
+                  "id": {
+                    "type": "string"
+                  }
+                },
+                "required": ["firstDayOfWeek", "id"]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "400": {
+            "description": "Invalid input data",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.BAD_REQUEST"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Authorization not provided",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.UNAUTHORIZED"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Insufficient access",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.FORBIDDEN"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.NOT_FOUND"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "Internal server error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/error.INTERNAL_SERVER_ERROR"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "components": {
+    "schemas": {
+      "error.BAD_REQUEST": {
+        "type": "object",
+        "properties": {
+          "message": {
+            "type": "string",
+            "description": "The error message",
+            "example": "Invalid input data"
+          },
+          "code": {
+            "type": "string",
+            "description": "The error code",
+            "example": "BAD_REQUEST"
+          },
+          "issues": {
+            "description": "An array of issues that were responsible for the error",
+            "example": [],
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "message": {
+                  "type": "string"
+                }
+              },
+              "required": ["message"],
+              "additionalProperties": false
+            }
+          }
+        },
+        "required": ["message", "code"],
+        "additionalProperties": false,
+        "title": "Invalid input data error (400)",
+        "description": "The error information",
+        "example": {
+          "code": "BAD_REQUEST",
+          "message": "Invalid input data",
+          "issues": []
+        }
+      },
+      "error.UNAUTHORIZED": {
+        "type": "object",
+        "properties": {
+          "message": {
+            "type": "string",
+            "description": "The error message",
+            "example": "Authorization not provided"
+          },
+          "code": {
+            "type": "string",
+            "description": "The error code",
+            "example": "UNAUTHORIZED"
+          },
+          "issues": {
+            "description": "An array of issues that were responsible for the error",
+            "example": [],
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "message": {
+                  "type": "string"
+                }
+              },
+              "required": ["message"],
+              "additionalProperties": false
+            }
+          }
+        },
+        "required": ["message", "code"],
+        "additionalProperties": false,
+        "title": "Authorization not provided error (401)",
+        "description": "The error information",
+        "example": {
+          "code": "UNAUTHORIZED",
+          "message": "Authorization not provided",
+          "issues": []
+        }
+      },
+      "error.FORBIDDEN": {
+        "type": "object",
+        "properties": {
+          "message": {
+            "type": "string",
+            "description": "The error message",
+            "example": "Insufficient access"
+          },
+          "code": {
+            "type": "string",
+            "description": "The error code",
+            "example": "FORBIDDEN"
+          },
+          "issues": {
+            "description": "An array of issues that were responsible for the error",
+            "example": [],
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "message": {
+                  "type": "string"
+                }
+              },
+              "required": ["message"],
+              "additionalProperties": false
+            }
+          }
+        },
+        "required": ["message", "code"],
+        "additionalProperties": false,
+        "title": "Insufficient access error (403)",
+        "description": "The error information",
+        "example": {
+          "code": "FORBIDDEN",
+          "message": "Insufficient access",
+          "issues": []
+        }
+      },
+      "error.NOT_FOUND": {
+        "type": "object",
+        "properties": {
+          "message": {
+            "type": "string",
+            "description": "The error message",
+            "example": "Not found"
+          },
+          "code": {
+            "type": "string",
+            "description": "The error code",
+            "example": "NOT_FOUND"
+          },
+          "issues": {
+            "description": "An array of issues that were responsible for the error",
+            "example": [],
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "message": {
+                  "type": "string"
+                }
+              },
+              "required": ["message"],
+              "additionalProperties": false
+            }
+          }
+        },
+        "required": ["message", "code"],
+        "additionalProperties": false,
+        "title": "Not found error (404)",
+        "description": "The error information",
+        "example": {
+          "code": "NOT_FOUND",
+          "message": "Not found",
+          "issues": []
+        }
+      },
+      "error.INTERNAL_SERVER_ERROR": {
+        "type": "object",
+        "properties": {
+          "message": {
+            "type": "string",
+            "description": "The error message",
+            "example": "Internal server error"
+          },
+          "code": {
+            "type": "string",
+            "description": "The error code",
+            "example": "INTERNAL_SERVER_ERROR"
+          },
+          "issues": {
+            "description": "An array of issues that were responsible for the error",
+            "example": [],
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "message": {
+                  "type": "string"
+                }
+              },
+              "required": ["message"],
+              "additionalProperties": false
+            }
+          }
+        },
+        "required": ["message", "code"],
+        "additionalProperties": false,
+        "title": "Internal server error error (500)",
+        "description": "The error information",
+        "example": {
+          "code": "INTERNAL_SERVER_ERROR",
+          "message": "Internal server error",
+          "issues": []
+        }
+      }
+    },
+    "securitySchemes": {
+      "apikey": {
+        "type": "apiKey",
+        "name": "ApiKey",
+        "description": "API key which can be obtained in the Homarr administration dashboard",
+        "in": "header"
+      }
+    }
+  }
+}
diff --git a/apps/docs/static/custom-widgets/component-catalog-v1.json b/apps/docs/static/custom-widgets/component-catalog-v1.json
new file mode 100644
index 000000000..b302fa69a
--- /dev/null
+++ b/apps/docs/static/custom-widgets/component-catalog-v1.json
@@ -0,0 +1 @@
+{"schemaVersion":1,"mantineVersion":"9.4.1","customWidgetVersion":"2.0.0","types":["\"\" | \"anonymous\" | \"use-credentials\"","\"-moz-initial\" | \"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | \"auto\" | \"fixed\"","\"-moz-initial\" | \"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | \"none\" | \"auto\" | \"all\" | \"fill\" | \"stroke\" | \"painted\" | \"visible\" | \"visibleFill\" | \"visiblePainted\" | \"visibleStroke\"","\"-moz-initial\" | \"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | \"none\" | \"block\" | \"inline\" | \"both\" | \"horizontal\" | \"vertical\"","\"-moz-initial\" | \"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | \"none\" | \"contain\" | \"cover\" | \"fill\" | \"scale-down\"","\"-moz-initial\" | \"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | \"wrap\" | \"nowrap\" | \"wrap-reverse\"","\"12h\" | \"24h\"","\"activity\" | \"display-none\"","\"all\" | \"parent\" | \"child\"","\"all\" | \"segment\"","\"always\" | \"hover\" | \"not-hover\" | \"never\"","\"area\" | \"radial\" | \"scatter\"","\"auto\" | \"scroll\" | \"always\" | \"hover\" | \"never\"","\"auto-fit\" | \"auto-fill\"","\"block\" | \"grid\"","\"both\" | \"rightSection\" | \"clear\"","\"bottom\" | \"top\"","\"bottom\" | \"top\" | \"baseline\" | \"middle\"","\"bottom\" | \"top\" | \"middle\"","\"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\" | \"bottom-center\" | \"top-center\" | \"middle-center\" | \"middle-end\" | \"middle-start\"","\"button\" | \"submit\" | \"reset\"","\"center\" | \"bottom\"","\"center\" | \"left\" | \"right\"","\"center\" | \"left\" | \"right\" | \"justify\" | \"char\"","\"center\" | \"side\" | \"merge\"","\"checkbox\" | \"radio\"","\"dashed\" | \"dotted\" | \"solid\"","\"default\" | \"gradient\"","\"default\" | \"responsive\"","\"default\" | \"stacked\" | \"percent\" | \"split\"","\"default\" | \"stacked\" | \"percent\" | \"waterfall\"","\"div\" | \"label\"","\"end\" | \"start\"","\"filled\" | \"light\"","\"fixed\" | \"absolute\"","\"hex\" | \"hexa\" | \"rgba\" | \"rgb\" | \"hsl\" | \"hsla\"","\"horizontal\" | \"vertical\"","\"hover\" | \"click\" | \"click-hover\"","\"inherit\" | \"auto\" | \"baseline\" | \"before-edge\" | \"text-before-edge\" | \"middle\" | \"central\" | \"after-edge\" | \"text-after-edge\" | \"ideographic\" | \"alphabetic\" | \"hanging\" | \"mathematical\"","\"inherit\" | \"auto\" | \"sRGB\" | \"linearRGB\"","\"inherit\" | \"auto\" | \"text-before-edge\" | \"middle\" | \"central\" | \"text-after-edge\" | \"ideographic\" | \"alphabetic\" | \"hanging\" | \"mathematical\" | \"use-script\" | \"no-change\" | \"reset-size\"","\"inherit\" | \"end\" | \"start\" | \"middle\"","\"inherit\" | \"nonzero\" | \"evenodd\"","\"inherit\" | \"round\" | \"butt\" | \"square\"","\"inherit\" | \"round\" | \"miter\" | \"bevel\"","\"initial\" | \"medial\" | \"terminal\" | \"isolated\"","\"inside\" | \"outside\"","\"left\" | \"right\"","\"left\" | \"right\" | \"bottom\" | \"top\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\"","\"left\" | \"right\" | \"inside\"","\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"","\"media\" | \"container\"","\"month\" | \"year\" | \"decade\"","\"native\" | \"scrollarea\"","\"none\" | \"all\" | \"rows\" | \"groups\" | \"columns\"","\"none\" | \"all\" | \"with-indicators\"","\"none\" | \"ascending\" | \"descending\" | \"other\"","\"none\" | \"inline\" | \"list\" | \"both\"","\"none\" | \"strict\" | \"blur\"","\"none\" | \"sum\"","\"none\" | \"thousand\" | \"lakh\" | \"wan\"","\"none\" | \"x\" | \"y\" | \"xy\"","\"number\" | RegExp | \"alphanumeric\"","\"off\" | \"assertive\" | \"polite\"","\"off\" | \"on\"","\"ordered\" | \"unordered\"","\"right-to-left\" | \"left-to-right\"","\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"","\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\"","\"step\" | \"bump\" | \"linear\" | \"natural\" | \"monotone\" | \"stepBefore\" | \"stepAfter\"","\"stepInactive\" | \"stepProgress\" | \"stepCompleted\"","\"sum\" | \"replace\"","\"td\" | \"th\"","\"text\" | \"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text additions\" | \"text removals\"","\"text\" | \"tel\" | \"password\"","\"time\" | \"duration\"","\"up\" | \"down\"","\"value\" | \"name\" | \"percent\"","\"viewport\"","\"wrap\" | \"nowrap\" | \"balance\" | \"pretty\" | \"stable\"","\"x\" | \"y\"","\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"","\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | (string & {})","\"yes\" | \"no\"","'Text' | 'Title' | 'Badge' | 'Code' | 'Image'","'auto' | 'manual'","'json' | 'text'","'xs' | 'sm' | 'md' | 'lg' | 'xl'","(\"input\" | \"label\" | \"description\" | \"error\")[]","(\"next\" | \"previous\" | \"level\")[]","(ActionIconProps & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>)","(CartesianChartProps<unknown> & { ref?: React.Ref<SVGSVGElement>; })","(CloseButtonProps & ElementProps<\"button\"> & DataAttributes)","(CloseButtonProps & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>)","(ElementProps<\"button\"> & DataAttributes)","(InputDescriptionProps & DataAttributes)","(InputErrorProps & DataAttributes)","(InputLabelProps & DataAttributes)","(InputSuccessProps & DataAttributes)","(Multiple extends true ? Value[] : Value | null)","(OverlayProps & ElementProps<\"div\">)","(PolarChartProps<unknown> & { ref?: React.Ref<SVGSVGElement>; })","(React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & DataAttributes)","(React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & DataAttributes)","(React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & DataAttributes)","(React.ClassAttributes<HTMLSelectElement> & React.SelectHTMLAttributes<HTMLSelectElement> & DataAttributes)","(Type extends \"default\" ? boolean : never)","(Type extends \"range\" ? boolean : never)","(Value | SegmentedControlItem<Value>)[]","(number | null)[]","(string & {}) | \"bars\" | \"dots\" | \"oval\"","(string & {}) | \"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\"","(string & {}) | AccordionVariant","(string & {}) | ActionIconVariant","(string & {}) | AlertVariant","(string & {}) | AvatarVariant","(string & {}) | BadgeVariant","(string & {}) | ButtonVariant","(string & {}) | CheckboxIndicatorVariant","(string & {}) | CheckboxVariant","(string & {}) | ChipVariant","(string & {}) | CloseButtonVariant","(string & {}) | DividerVariant","(string & {}) | FieldsetVariant","(string & {}) | InputVariant","(string & {}) | NavLinkVariant","(string & {}) | PillVariant","(string & {}) | RadioIndicatorVariant","(string & {}) | RadioVariant","(string & {}) | TableVariant","(string & {}) | TabsVariant","(string & {}) | TextVariant","(string & {}) | ThemeIconVariant","0 | -1","0 | 2 | 3 | 4 | 5 | 6 | 1","1 | 2 | 3 | 4 | 5 | 6","2 | 3 | 4 | 5 | 6","2 | 3 | 4 | 5 | 6 | 1","AccordionValue<Multiple>","AreaChartSeries[]","AriaRole","BarChartSeries[]","BarsListBarData[]","BoxMod","BubbleChartDataKey","ButtonSize","CSSProperties","CalendarAriaLabels","ChartData","ChartReferenceLineProps[]","ChartSeries[]","ComboboxData<Value>","ComboboxGenericData","ComboboxProps","ComboboxStringGroupData","CompositeChartSeries[]","DatePickerPreset<\"default\">[]","DatePickerPreset<Type>[]","DatePickerType | Type","DatePickerValue<Type, DateValue>","DateValue","DayOfWeek[]","DefaultMantineColor","DefaultMantineColor | \"initials\"","DefaultMantineColor[]","DonutChartCell[]","FlatTreeLineState[]","FunnelChartCell[]","GridBreakpoints","HTMLElement | null","HTMLInputAutoCompleteAttribute","HTMLInputTypeAttribute","InputClearButtonProps","Key | null","LineChartGradientStop[]","LineChartSeries[]","LoaderProps","MantineBreakpoint","MantineChartDotProps","MantineGradient","MantineRadius","MantineShadow","MantineSize | (string & {})","MantineSpacing","Mode","MonthPickerPreset<Type>[]","Multiple","NumberInputValue<T>","Omit<AreaProps<any, any>, \"data\" | \"ref\" | \"dataKey\">","Omit<CartesianGridProps, \"ref\">","Omit<LegendProps, \"ref\">","Omit<PolarAngleAxisProps, \"ref\">","Omit<PolarGridProps, \"ref\">","Omit<PolarRadiusAxisProps, \"ref\">","Omit<RadialBarProps, \"ref\">","Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"value\">","Omit<TimePickerProps, \"value\" | \"defaultValue\">","Omit<TooltipProps<any, any>, \"ref\">","Omit<XAxisProps, \"ref\">","Omit<YAxisProps, \"ref\">","Omit<ZAxisProps<any, any>, \"ref\">","OverlayProps","Partial<Omit<FunnelProps, \"ref\">>","Partial<Omit<PieProps, \"ref\">>","Partial<Omit<PopoverProps, \"children\">>","Partial<Omit<RechartsSankeyProps, \"data\" | \"ref\">>","Partial<Omit<RechartsTreemapProps<TreemapDataType, any>, \"data\" | \"ref\" | \"dataKey\">>","Partial<Omit<ScatterProps, \"ref\">>","Partial<Omit<TransitionProps, \"mounted\">>","Partial<Record<\"actions\", CSSProperties>>","Partial<Record<\"col\", CSSProperties>>","Partial<Record<\"control\", CSSProperties>>","Partial<Record<\"description\", CSSProperties>>","Partial<Record<\"divider\", CSSProperties>>","Partial<Record<\"dots\", CSSProperties>>","Partial<Record<\"dropdown\", CSSProperties>>","Partial<Record<\"indicator\", CSSProperties>>","Partial<Record<\"item\", CSSProperties>>","Partial<Record<\"itemLabel\", CSSProperties>>","Partial<Record<\"itemValue\", CSSProperties>>","Partial<Record<\"label\", CSSProperties>>","Partial<Record<\"list\", CSSProperties>>","Partial<Record<\"pane\", CSSProperties>>","Partial<Record<\"panel\", CSSProperties>>","Partial<Record<\"section\", CSSProperties>>","Partial<Record<\"title\", CSSProperties>>","Partial<Record<(string & {}) | \"bars\" | \"dots\" | \"oval\", MantineLoaderComponent>>","Partial<Record<AccordionControlStylesNames, CSSProperties>>","Partial<Record<AccordionPanelStylesNames, CSSProperties>>","Partial<Record<ListItemStylesNames, CSSProperties>>","Partial<Record<MenuCheckboxItemStylesNames, CSSProperties>>","Partial<Record<MenuItemStylesNames, CSSProperties>>","Partial<Record<MenuRadioItemStylesNames, CSSProperties>>","Partial<Record<MenuSubItemStylesNames, CSSProperties>>","Partial<Record<PopoverStylesNames, CSSProperties>>","Partial<Record<StepperStepStylesNames, CSSProperties>>","Partial<Record<TabsTabStylesNames, CSSProperties>>","Partial<Record<TimelineItemStylesNames, CSSProperties>>","Partial<Record<string, React.CSSProperties>>","Partial<TooltipFloatingProps>","PieChartCell[]","PopoverMiddlewares","PopoverProps","PopoverWidth","Property.AlignItems","Property.BackgroundColor","Property.BorderRadius<string | number>","Property.Height<string | number>","Property.JustifyContent","Property.ListStyleType","Property.MaxHeight<string | number>","Property.MinWidth<string | number>","Property.Overflow","Property.OverscrollBehavior","Property.Width<string | number>","RadarChartSeries[]","RangeSliderValue","React.CSSProperties","React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>","React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>","React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>","React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>","React.HTMLInputTypeAttribute","React.ReactNode","ReactNode","Record<string, RegExp>","Record<string, any>","Record<string, any>[]","Record<string, any>[] | readonly Record<string, any>[]","Record<string, number>","Record<string, string | number | boolean>","RingProgressSection[]","SankeyChartData","ScatterChartSeries[]","ScrollAreaProps","SimpleGridProps","SliderMark[]","SparklineTrendColors","SplitterPaneSize","SplitterPaneSize[]","SplitterStep","StyleProp<\"text\" | (string & {}) | \"monospace\" | \"heading\">","StyleProp<ColSpan>","StyleProp<DefaultMantineColor>","StyleProp<MantineSpacing>","StyleProp<Property.AlignItems>","StyleProp<Property.AlignSelf>","StyleProp<Property.BackgroundAttachment>","StyleProp<Property.BackgroundPosition<string | number>>","StyleProp<Property.BackgroundRepeat>","StyleProp<Property.BackgroundSize<string | number>>","StyleProp<Property.Border<string | number>>","StyleProp<Property.Display>","StyleProp<Property.Flex<string | number>>","StyleProp<Property.FlexDirection>","StyleProp<Property.FlexWrap>","StyleProp<Property.FontStyle>","StyleProp<Property.FontWeight>","StyleProp<Property.Height<string | number>>","StyleProp<Property.JustifyContent>","StyleProp<Property.LetterSpacing<string | number>>","StyleProp<Property.MaxHeight<string | number>>","StyleProp<Property.MaxWidth<string | number>>","StyleProp<Property.MinHeight<string | number>>","StyleProp<Property.MinWidth<string | number>>","StyleProp<Property.Opacity>","StyleProp<Property.TextAlign>","StyleProp<Property.TextDecoration<string | number>>","StyleProp<Property.TextTransform>","StyleProp<Property.Width<string | number>>","StyleProp<number | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | MantineFontSize>","StyleProp<number | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | MantineLineHeight>","StyleProp<number>","T","T[]","TableData","TimePickerAmPmLabels","TimePickerPresets","TitleSize","TooltipMiddlewares","TreeNodeData","TreeNodeData[]","TreeSelectChevronAriaLabels","TreeSelectValue<Mode>","TreemapData[]","Type","Type | DatePickerType","UseTreeReturnType","Value","Value | null","Value[]","WrapperProps","YearPickerPreset<Type>[]","[DefaultMantineColor, DefaultMantineColor]","[number, number]","[string, string]","boolean","boolean | SafePolygonOptions","boolean | string","boolean[]","false | \"x\" | \"y\" | \"xy\"","false | true","false | true | \"auto\" | \"true\" | \"false\"","false | true | \"dialog\" | \"menu\" | \"grid\" | \"true\" | \"false\" | \"listbox\" | \"tree\"","false | true | \"end\" | \"start\"","false | true | \"odd\" | \"even\"","false | true | \"time\" | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\"","false | true | \"true\" | \"false\"","false | true | \"true\" | \"false\" | \"grammar\" | \"spelling\"","false | true | \"true\" | \"false\" | \"mixed\"","false | true | \"user\" | \"environment\"","false | true | \"x\" | \"y\" | \"present\"","null | string","number","number | FloatingAxesOffsets","number | MantineSize | (string & {})","number | MantineSize | (string & {}) | \"input-xs\" | \"input-sm\" | \"input-md\" | \"input-lg\" | \"input-xl\"","number | { x: number; y: number; }","readonly Record<string, any>[]","string","string | (string & {})","string | (string | RegExp)[]","string | Date","string | Date | null","string | false | true","string | number","string | number | readonly string[]","string | string[] | HighlightTerm[]","string[]","undefined","unknown","{ area?: Record<string, any>; legend?: Record<string, any>; grid?: Record<string, any>; root?: Record<string, any>; ... 14 more ...; tooltipBody?: Record<...>; }","{ area?: Record<string, any>; legend?: Record<string, any>; line?: Record<string, any>; grid?: Record<string, any>; ... 16 more ...; tooltipBody?: Record<...>; }","{ body?: Record<string, any>; input?: Record<string, any>; label?: Record<string, any>; root?: Record<string, any>; ... 4 more ...; labelWrapper?: Record<...>; }","{ body?: Record<string, any>; input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; ... 19 more ...; swatch?: Record<...>; }","{ body?: Record<string, any>; input?: Record<string, any>; label?: Record<string, any>; track?: Record<string, any>; ... 5 more ...; trackLabel?: Record<...>; }","{ body?: Record<string, any>; label?: Record<string, any>; root?: Record<string, any>; icon?: Record<string, any>; ... 4 more ...; labelWrapper?: Record<...>; }","{ body?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; children?: Record<string, any>; root?: Record<...>; chevron?: Record<...>; description?: Record<...>; collapse?: Record<...>; } | u...","{ body?: Record<string, any>; label?: Record<string, any>; title?: Record<string, any>; root?: Record<string, any>; icon?: Record<...>; wrapper?: Record<...>; message?: Record<...>; closeButton?: Record<...>; }","{ body?: Record<string, any>; slider?: Record<string, any>; wrapper?: Record<string, any>; sliderOverlay?: Record<string, any>; ... 6 more ...; swatch?: Record<...>; }","{ body?: Record<string, any>; title?: Record<string, any>; root?: Record<string, any>; description?: Record<string, any>; indicator?: Record<...>; actions?: Record<...>; }","{ body?: Record<string, any>; title?: Record<string, any>; root?: Record<string, any>; icon?: Record<string, any>; loader?: Record<...>; closeButton?: Record<...>; description?: Record<...>; }","{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 12 more ...; monthPickerRoot?: Record<...>; }","{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 4 more ...; monthsListControl?: Record<...>; }","{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 4 more ...; yearsListRow?: Record<...>; }","{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 5 more ...; monthsListControl?: Record<...>; }","{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 5 more ...; yearsListRow?: Record<...>; }","{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 8 more ...; yearPickerRoot?: Record<...>; }","{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; calendarHeaderControlIcon?: Record<...>; }","{ caption?: Record<string, any>; table?: Record<string, any>; tbody?: Record<string, any>; td?: Record<string, any>; tfoot?: Record<...>; th?: Record<...>; thead?: Record<...>; tr?: Record<...>; }","{ card?: Record<string, any>; }","{ cite?: Record<string, any>; root?: Record<string, any>; icon?: Record<string, any>; }","{ col?: Record<string, any>; root?: Record<string, any>; inner?: Record<string, any>; container?: Record<string, any>; }","{ content?: Record<string, any>; root?: Record<string, any>; chevron?: Record<string, any>; control?: Record<string, any>; container?: Record<...>; }","{ content?: Record<string, any>; root?: Record<string, any>; control?: Record<string, any>; }","{ content?: Record<string, any>; root?: Record<string, any>; group?: Record<string, any>; }","{ content?: Record<string, any>; root?: Record<string, any>; scrollbar?: Record<string, any>; thumb?: Record<string, any>; viewport?: Record<...>; corner?: Record<...>; }","{ content?: Record<string, any>; root?: Record<string, any>; separator?: Record<string, any>; step?: Record<string, any>; ... 9 more ...; stepDescription?: Record<...>; }","{ day?: Record<string, any>; }","{ dropdown?: Record<string, any>; overlay?: Record<string, any>; arrow?: Record<string, any>; }","{ group?: Record<string, any>; }","{ groupSection?: Record<string, any>; }","{ hover: boolean; focus: boolean; touch: boolean; }","{ icon?: Record<string, any>; indicator?: Record<string, any>; }","{ image?: Record<string, any>; root?: Record<string, any>; placeholder?: Record<string, any>; }","{ input?: Record<string, any>; label?: Record<string, any>; option?: Record<string, any>; section?: Record<string, any>; ... 11 more ...; groupLabel?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; option?: Record<string, any>; section?: Record<string, any>; ... 14 more ...; inputField?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; root?: Record<string, any>; control?: Record<string, any>; indicator?: Record<...>; innerLabel?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; root?: Record<string, any>; iconWrapper?: Record<string, any>; checkIcon?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; root?: Record<string, any>; starSymbol?: Record<string, any>; symbolBody?: Record<...>; symbolGroup?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 17 more ...; presetControl?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 18 more ...; yearPickerRoot?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 22 more ...; monthPickerRoot?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 30 more ...; presetButton?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 31 more ...; datePickerRoot?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 37 more ...; rangeInfo?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 5 more ...; bottomSection?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 7 more ...; controls?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 7 more ...; innerInput?: Record<...>; }","{ input?: Record<string, any>; root?: Record<string, any>; pinInput?: Record<string, any>; }","{ input?: Record<string, any>; section?: Record<string, any>; wrapper?: Record<string, any>; bottomSection?: Record<string, any>; }","{ label?: Record<string, any>; content?: Record<string, any>; root?: Record<string, any>; item?: Record<string, any>; ... 4 more ...; control?: Record<...>; }","{ label?: Record<string, any>; legend?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; ... 9 more ...; tooltipBody?: Record<...>; }","{ label?: Record<string, any>; mark?: Record<string, any>; root?: Record<string, any>; thumb?: Record<string, any>; marks?: Record<...>; }","{ label?: Record<string, any>; mark?: Record<string, any>; track?: Record<string, any>; root?: Record<string, any>; ... 4 more ...; markLabel?: Record<...>; }","{ label?: Record<string, any>; root?: Record<string, any>; control?: Record<string, any>; dots?: Record<string, any>; items?: Record<...>; }","{ label?: Record<string, any>; root?: Record<string, any>; description?: Record<string, any>; error?: Record<string, any>; success?: Record<...>; required?: Record<...>; }","{ label?: Record<string, any>; root?: Record<string, any>; node?: Record<string, any>; subtree?: Record<string, any>; }","{ label?: Record<string, any>; root?: Record<string, any>; remove?: Record<string, any>; }","{ label?: Record<string, any>; root?: Record<string, any>; }","{ label?: Record<string, any>; search?: Record<string, any>; item?: Record<string, any>; chevron?: Record<string, any>; ... 6 more ...; divider?: Record<...>; }","{ label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; loader?: Record<string, any>; inner?: Record<...>; }","{ label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; }","{ label?: Record<string, any>; svg?: Record<string, any>; root?: Record<string, any>; curve?: Record<string, any>; }","{ label?: Record<string, any>; svg?: Record<string, any>; root?: Record<string, any>; emptySegment?: Record<string, any>; filledSegment?: Record<...>; }","{ legend?: Record<string, any>; grid?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; ... 14 more ...; scatter?: Record<...>; }","{ legend?: Record<string, any>; grid?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; ... 14 more ...; tooltipBody?: Record<...>; }","{ legend?: Record<string, any>; legendItem?: Record<string, any>; legendItemColor?: Record<string, any>; legendItemName?: Record<...>; }","{ legend?: Record<string, any>; line?: Record<string, any>; grid?: Record<string, any>; root?: Record<string, any>; ... 14 more ...; tooltipBody?: Record<...>; }","{ legend?: Record<string, any>; rect?: Record<string, any>; root?: Record<string, any>; weekdayLabel?: Record<string, any>; monthLabel?: Record<...>; legendLabel?: Record<...>; legendRect?: Record<...>; }","{ legend?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; container?: Record<string, any>; ... 9 more ...; tooltipBody?: Record<...>; }","{ legend?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; legendItem?: Record<string, any>; ... 8 more ...; tooltipBody?: Record<...>; }","{ legend?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; legendItem?: Record<string, any>; legendItemColor?: Record<...>; legendItemName?: Record<...>; }","{ legend?: Record<string, any>; root?: Record<string, any>; }","{ levelsGroup?: Record<string, any>; }","{ month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; monthRow?: Record<string, any>; ... 17 more ...; yearsListRow?: Record<...>; }","{ month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; monthRow?: Record<string, any>; ... 20 more ...; datePickerRoot?: Record<...>; }","{ month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; monthRow?: Record<string, any>; ... 4 more ...; day?: Record<...>; }","{ month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; monthRow?: Record<string, any>; ... 8 more ...; calendarHeaderControlIcon?: Record<...>; }","{ month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; monthRow?: Record<string, any>; ... 9 more ...; levelsGroup?: Record<...>; }","{ monthsList?: Record<string, any>; monthsListCell?: Record<string, any>; monthsListRow?: Record<string, any>; monthsListControl?: Record<...>; }","{ pickerControl?: Record<string, any>; }","{ root?: Record<string, any>; alphaOverlay?: Record<string, any>; shadowOverlay?: Record<string, any>; colorOverlay?: Record<...>; childrenOverlay?: Record<...>; }","{ root?: Record<string, any>; bar?: Record<string, any>; barLabel?: Record<string, any>; barValue?: Record<string, any>; labelsRow?: Record<...>; }","{ root?: Record<string, any>; burger?: Record<string, any>; }","{ root?: Record<string, any>; container?: Record<string, any>; }","{ root?: Record<string, any>; control?: Record<string, any>; day?: Record<string, any>; days?: Record<string, any>; dayMonth?: Record<...>; dayNumber?: Record<...>; }","{ root?: Record<string, any>; control?: Record<string, any>; simpleGrid?: Record<string, any>; }","{ root?: Record<string, any>; digit?: Record<string, any>; digitColumn?: Record<string, any>; char?: Record<string, any>; }","{ root?: Record<string, any>; icon?: Record<string, any>; loader?: Record<string, any>; }","{ root?: Record<string, any>; indicator?: Record<string, any>; }","{ root?: Record<string, any>; item?: Record<string, any>; itemLabel?: Record<string, any>; itemValue?: Record<string, any>; }","{ root?: Record<string, any>; item?: Record<string, any>; itemLabel?: Record<string, any>; itemWrapper?: Record<string, any>; itemIcon?: Record<...>; }","{ root?: Record<string, any>; item?: Record<string, any>; itemTitle?: Record<string, any>; itemBody?: Record<string, any>; itemContent?: Record<...>; itemBullet?: Record<...>; }","{ root?: Record<string, any>; loader?: Record<string, any>; overlay?: Record<string, any>; }","{ root?: Record<string, any>; month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; ... 27 more ...; rangeInfo?: Record<...>; }","{ root?: Record<string, any>; panel?: Record<string, any>; list?: Record<string, any>; tab?: Record<string, any>; tabSection?: Record<...>; tabLabel?: Record<...>; }","{ root?: Record<string, any>; separator?: Record<string, any>; breadcrumb?: Record<string, any>; }","{ root?: Record<string, any>; thumb?: Record<string, any>; handle?: Record<string, any>; pane?: Record<string, any>; }","{ root?: Record<string, any>; tooltip?: Record<string, any>; axis?: Record<string, any>; }","{ root?: Record<string, any>; tooltip?: Record<string, any>; tooltipItem?: Record<string, any>; tooltipItemBody?: Record<...>; ... 4 more ...; tooltipBody?: Record<...>; }","{ root?: Record<string, any>; }","{ scrollContainer?: Record<string, any>; scrollContainerInner?: Record<string, any>; }","{ section?: Record<string, any>; root?: Record<string, any>; }","{ slider?: Record<string, any>; sliderOverlay?: Record<string, any>; thumb?: Record<string, any>; }","{ tooltip?: Record<string, any>; arrow?: Record<string, any>; }","{ tooltip?: Record<string, any>; tooltipItem?: Record<string, any>; tooltipItemBody?: Record<string, any>; tooltipItemColor?: Record<...>; tooltipItemName?: Record<...>; tooltipItemData?: Record<...>; tooltipLabel?: Record<...>; tool...","{ value: number; label?: string; }[]","{ weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; }","{ x: string; y: string; }","{ x?: number; y?: number; }","{ x?: string; y?: string; }","{ yearsListControl?: Record<string, any>; yearsList?: Record<string, any>; yearsListCell?: Record<string, any>; yearsListRow?: Record<...>; }"],"globalProps":[{"name":"abbr","required":false,"source":"global","typeRef":359},{"name":"about","required":false,"source":"global","typeRef":359},{"name":"accentHeight","required":false,"source":"global","typeRef":365},{"name":"accept","required":false,"source":"global","typeRef":359},{"name":"accessKey","required":false,"source":"global","typeRef":359},{"name":"accumulate","required":false,"source":"global","literalValues":["none","sum"],"typeRef":59},{"name":"additive","required":false,"source":"global","literalValues":["replace","sum"],"typeRef":71},{"name":"align","required":false,"source":"global","literalValues":["center","char","justify","left","right"],"typeRef":22},{"name":"alignmentBaseline","required":false,"source":"global","literalValues":["after-edge","alphabetic","auto","baseline","before-edge","central","hanging","ideographic","inherit","mathematical","middle","text-after-edge","text-before-edge"],"typeRef":38},{"name":"allowReorder","required":false,"source":"global","literalValues":["no","yes"],"typeRef":83},{"name":"alphabetic","required":false,"source":"global","typeRef":365},{"name":"alt","required":false,"source":"global","typeRef":359},{"name":"amplitude","required":false,"source":"global","typeRef":365},{"name":"arabicForm","required":false,"source":"global","literalValues":["initial","isolated","medial","terminal"],"typeRef":45},{"name":"aria-activedescendant","required":false,"source":"global","description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","typeRef":359},{"name":"aria-atomic","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","typeRef":347},{"name":"aria-autocomplete","required":false,"source":"global","literalValues":["both","inline","list","none"],"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.","typeRef":57},{"name":"aria-braillelabel","required":false,"source":"global","description":"Defines a string value that labels the current element, which is intended to be converted into Braille.","typeRef":359},{"name":"aria-brailleroledescription","required":false,"source":"global","description":"Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.","typeRef":359},{"name":"aria-busy","required":false,"source":"global","literalValues":[false,"false",true,"true"],"typeRef":347},{"name":"aria-checked","required":false,"source":"global","literalValues":[false,"false","mixed",true,"true"],"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.","typeRef":349},{"name":"aria-colcount","required":false,"source":"global","description":"Defines the total number of columns in a table, grid, or treegrid.","typeRef":353},{"name":"aria-colindex","required":false,"source":"global","description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.","typeRef":353},{"name":"aria-colindextext","required":false,"source":"global","description":"Defines a human readable text alternative of aria-colindex.","typeRef":359},{"name":"aria-colspan","required":false,"source":"global","description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.","typeRef":353},{"name":"aria-controls","required":false,"source":"global","description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.","typeRef":359},{"name":"aria-current","required":false,"source":"global","literalValues":["date",false,"false","location","page","step","time",true,"true"],"description":"Indicates the element that represents the current item within a container or set of related elements.","typeRef":346},{"name":"aria-describedby","required":false,"source":"global","description":"Identifies the element (or elements) that describes the object.","typeRef":359},{"name":"aria-description","required":false,"source":"global","description":"Defines a string value that describes or annotates the current element.","typeRef":359},{"name":"aria-details","required":false,"source":"global","description":"Identifies the element that provides a detailed, extended description for the object.","typeRef":359},{"name":"aria-disabled","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.","typeRef":347},{"name":"aria-dropeffect","required":false,"source":"global","literalValues":["copy","execute","link","move","none","popup"],"description":"Indicates what functions can be performed when a dragged object is released on the drop target.","typeRef":50},{"name":"aria-errormessage","required":false,"source":"global","description":"Identifies the element that provides an error message for the object.","typeRef":359},{"name":"aria-expanded","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","typeRef":347},{"name":"aria-flowto","required":false,"source":"global","description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.","typeRef":359},{"name":"aria-grabbed","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.","typeRef":347},{"name":"aria-haspopup","required":false,"source":"global","literalValues":["dialog",false,"false","grid","listbox","menu","tree",true,"true"],"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","typeRef":343},{"name":"aria-hidden","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates whether the element is exposed to an accessibility API.","typeRef":347},{"name":"aria-invalid","required":false,"source":"global","literalValues":[false,"false","grammar","spelling",true,"true"],"description":"Indicates the entered value does not conform to the format expected by the application.","typeRef":348},{"name":"aria-keyshortcuts","required":false,"source":"global","description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","typeRef":359},{"name":"aria-label","required":false,"source":"global","description":"Defines a string value that labels the current element.","typeRef":359},{"name":"aria-labelledby","required":false,"source":"global","description":"Identifies the element (or elements) that labels the current element.","typeRef":359},{"name":"aria-level","required":false,"source":"global","description":"Defines the hierarchical level of an element within a structure.","typeRef":353},{"name":"aria-live","required":false,"source":"global","literalValues":["assertive","off","polite"],"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","typeRef":63},{"name":"aria-modal","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates whether an element is modal when displayed.","typeRef":347},{"name":"aria-multiline","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","typeRef":347},{"name":"aria-multiselectable","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates that the user may select more than one item from the current selectable descendants.","typeRef":347},{"name":"aria-orientation","required":false,"source":"global","literalValues":["horizontal","vertical"],"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","typeRef":36},{"name":"aria-owns","required":false,"source":"global","description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.","typeRef":359},{"name":"aria-placeholder","required":false,"source":"global","description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.","typeRef":359},{"name":"aria-posinset","required":false,"source":"global","description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.","typeRef":353},{"name":"aria-pressed","required":false,"source":"global","literalValues":[false,"false","mixed",true,"true"],"description":"Indicates the current \"pressed\" state of toggle buttons.","typeRef":349},{"name":"aria-readonly","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates that the element is not editable, but is otherwise operable.","typeRef":347},{"name":"aria-relevant","required":false,"source":"global","literalValues":["additions","additions removals","additions text","all","removals","removals additions","removals text","text","text additions","text removals"],"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.","typeRef":73},{"name":"aria-required","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates that user input is required on the element before a form may be submitted.","typeRef":347},{"name":"aria-roledescription","required":false,"source":"global","description":"Defines a human-readable, author-localized description for the role of an element.","typeRef":359},{"name":"aria-rowcount","required":false,"source":"global","description":"Defines the total number of rows in a table, grid, or treegrid.","typeRef":353},{"name":"aria-rowindex","required":false,"source":"global","description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.","typeRef":353},{"name":"aria-rowindextext","required":false,"source":"global","description":"Defines a human readable text alternative of aria-rowindex.","typeRef":359},{"name":"aria-rowspan","required":false,"source":"global","description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.","typeRef":353},{"name":"aria-selected","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates the current \"selected\" state of various widgets.","typeRef":347},{"name":"aria-setsize","required":false,"source":"global","description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.","typeRef":353},{"name":"aria-sort","required":false,"source":"global","literalValues":["ascending","descending","none","other"],"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","typeRef":56},{"name":"aria-valuemax","required":false,"source":"global","description":"Defines the maximum allowed value for a range widget.","typeRef":353},{"name":"aria-valuemin","required":false,"source":"global","description":"Defines the minimum allowed value for a range widget.","typeRef":353},{"name":"aria-valuenow","required":false,"source":"global","description":"Defines the current value for a range widget.","typeRef":353},{"name":"aria-valuetext","required":false,"source":"global","description":"Defines the human readable text alternative of aria-valuenow for a range widget.","typeRef":359},{"name":"ascent","required":false,"source":"global","typeRef":365},{"name":"attributeName","required":false,"source":"global","typeRef":359},{"name":"attributeType","required":false,"source":"global","typeRef":359},{"name":"autoCapitalize","required":false,"source":"global","literalValues":["characters","none","off","on","sentences","words"],"typeRef":111},{"name":"autoComplete","required":false,"source":"global","typeRef":170},{"name":"autoCorrect","required":false,"source":"global","typeRef":359},{"name":"autoReverse","required":false,"source":"global","literalValues":[false,"false",true,"true"],"typeRef":347},{"name":"autoSave","required":false,"source":"global","typeRef":359},{"name":"azimuth","required":false,"source":"global","typeRef":365},{"name":"baseFrequency","required":false,"source":"global","typeRef":365},{"name":"baseProfile","required":false,"source":"global","typeRef":365},{"name":"baselineShift","required":false,"source":"global","typeRef":365},{"name":"bbox","required":false,"source":"global","typeRef":365},{"name":"bd","required":false,"source":"global","description":"Border","typeRef":291},{"name":"bdrs","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"BorderRadius, theme key: theme.radius","typeRef":284},{"name":"begin","required":false,"source":"global","typeRef":365},{"name":"bg","required":false,"source":"global","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Background, theme key: theme.colors","typeRef":283},{"name":"bga","required":false,"source":"global","literalValues":["-moz-initial","fixed","inherit","initial","local","revert","revert-layer","scroll","unset"],"description":"BackgroundAttachment","typeRef":287},{"name":"bgcolor","required":false,"source":"global","typeRef":359},{"name":"bgp","required":false,"source":"global","description":"BackgroundPosition","typeRef":288},{"name":"bgr","required":false,"source":"global","literalValues":["-moz-initial","inherit","initial","no-repeat","repeat","repeat-x","repeat-y","revert","revert-layer","round","space","unset"],"description":"BackgroundRepeat","typeRef":289},{"name":"bgsz","required":false,"source":"global","description":"BackgroundSize","typeRef":290},{"name":"bias","required":false,"source":"global","typeRef":365},{"name":"border","required":false,"source":"global","typeRef":353},{"name":"by","required":false,"source":"global","typeRef":365},{"name":"c","required":false,"source":"global","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color","typeRef":283},{"name":"calcMode","required":false,"source":"global","typeRef":365},{"name":"capHeight","required":false,"source":"global","typeRef":365},{"name":"capture","required":false,"source":"global","literalValues":["environment",false,true,"user"],"typeRef":350},{"name":"cellPadding","required":false,"source":"global","typeRef":365},{"name":"cellSpacing","required":false,"source":"global","typeRef":365},{"name":"checked","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"clip","required":false,"source":"global","typeRef":365},{"name":"clipPath","required":false,"source":"global","typeRef":359},{"name":"clipPathUnits","required":false,"source":"global","typeRef":365},{"name":"clipRule","required":false,"source":"global","typeRef":365},{"name":"colSpan","required":false,"source":"global","typeRef":353},{"name":"color","required":false,"source":"global","literalValues":["blue","cyan","dark","grape","gray","green","indigo","initials","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":359},{"name":"colorInterpolation","required":false,"source":"global","typeRef":365},{"name":"colorInterpolationFilters","required":false,"source":"global","literalValues":["auto","inherit","linearRGB","sRGB"],"typeRef":39},{"name":"colorProfile","required":false,"source":"global","typeRef":365},{"name":"colorRendering","required":false,"source":"global","typeRef":365},{"name":"cols","required":false,"source":"global","typeRef":353},{"name":"content","required":false,"source":"global","typeRef":359},{"name":"contentScriptType","required":false,"source":"global","typeRef":365},{"name":"contentStyleType","required":false,"source":"global","typeRef":365},{"name":"contextMenu","required":false,"source":"global","typeRef":359},{"name":"crossOrigin","required":false,"source":"global","literalValues":["","anonymous","use-credentials"],"typeRef":0},{"name":"cursor","required":false,"source":"global","typeRef":365},{"name":"cx","required":false,"source":"global","typeRef":365},{"name":"cy","required":false,"source":"global","typeRef":365},{"name":"d","required":false,"source":"global","typeRef":359},{"name":"darkHidden","required":false,"source":"global","literalValues":[false,true],"description":"Determines whether component should be hidden in dark color scheme with `display: none`","typeRef":341},{"name":"datatype","required":false,"source":"global","typeRef":359},{"name":"decelerate","required":false,"source":"global","typeRef":365},{"name":"defaultChecked","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"defaultValue","required":false,"source":"global","typeRef":366},{"name":"descent","required":false,"source":"global","typeRef":365},{"name":"diffuseConstant","required":false,"source":"global","typeRef":365},{"name":"dir","required":false,"source":"global","typeRef":359},{"name":"dirName","required":false,"source":"global","typeRef":359},{"name":"direction","required":false,"source":"global","typeRef":365},{"name":"disabled","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"display","required":false,"source":"global","literalValues":["-moz-initial","-ms-flexbox","-ms-grid","-ms-inline-flexbox","-ms-inline-grid","-webkit-flex","-webkit-inline-flex","block","contents","flex","flow","flow-root","grid","inherit","initial","inline","inline-block","inline-flex","inline-grid","inline-list-item","inline-table","list-item","none","revert","revert-layer","ruby","ruby-base","ruby-base-container","ruby-text","ruby-text-container","run-in","table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row","table-row-group","unset"],"typeRef":292},{"name":"divisor","required":false,"source":"global","typeRef":365},{"name":"dominantBaseline","required":false,"source":"global","literalValues":["alphabetic","auto","central","hanging","ideographic","inherit","mathematical","middle","no-change","reset-size","text-after-edge","text-before-edge","use-script"],"typeRef":40},{"name":"draggable","required":false,"source":"global","literalValues":[false,"false",true,"true"],"typeRef":347},{"name":"dur","required":false,"source":"global","typeRef":365},{"name":"dx","required":false,"source":"global","typeRef":365},{"name":"dy","required":false,"source":"global","typeRef":365},{"name":"edgeMode","required":false,"source":"global","typeRef":365},{"name":"elevation","required":false,"source":"global","typeRef":365},{"name":"enableBackground","required":false,"source":"global","typeRef":365},{"name":"end","required":false,"source":"global","typeRef":365},{"name":"enterKeyHint","required":false,"source":"global","literalValues":["done","enter","go","next","previous","search","send"],"typeRef":67},{"name":"exponent","required":false,"source":"global","typeRef":365},{"name":"exportparts","required":false,"source":"global","typeRef":359},{"name":"externalResourcesRequired","required":false,"source":"global","literalValues":[false,"false",true,"true"],"typeRef":347},{"name":"ff","required":false,"source":"global","literalValues":["heading","monospace","text"],"description":"FontFamily","typeRef":281},{"name":"fill","required":false,"source":"global","typeRef":359},{"name":"fillOpacity","required":false,"source":"global","typeRef":365},{"name":"fillRule","required":false,"source":"global","literalValues":["evenodd","inherit","nonzero"],"typeRef":42},{"name":"filter","required":false,"source":"global","typeRef":359},{"name":"filterRes","required":false,"source":"global","typeRef":365},{"name":"filterUnits","required":false,"source":"global","typeRef":365},{"name":"flex","required":false,"source":"global","typeRef":293},{"name":"floodColor","required":false,"source":"global","typeRef":365},{"name":"floodOpacity","required":false,"source":"global","typeRef":365},{"name":"focusable","required":false,"source":"global","literalValues":["auto",false,"false",true,"true"],"typeRef":342},{"name":"fontFamily","required":false,"source":"global","typeRef":359},{"name":"fontSize","required":false,"source":"global","typeRef":365},{"name":"fontSizeAdjust","required":false,"source":"global","typeRef":365},{"name":"fontStretch","required":false,"source":"global","typeRef":365},{"name":"fontStyle","required":false,"source":"global","typeRef":365},{"name":"fontVariant","required":false,"source":"global","typeRef":365},{"name":"fontWeight","required":false,"source":"global","typeRef":365},{"name":"format","required":false,"source":"global","typeRef":365},{"name":"fr","required":false,"source":"global","typeRef":365},{"name":"frame","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"from","required":false,"source":"global","typeRef":365},{"name":"fs","required":false,"source":"global","literalValues":["-moz-initial","inherit","initial","italic","normal","oblique","revert","revert-layer","unset"],"description":"FontStyle","typeRef":296},{"name":"fw","required":false,"source":"global","literalValues":["-moz-initial","bold","bolder","inherit","initial","lighter","normal","revert","revert-layer","unset"],"description":"FontWeight","typeRef":297},{"name":"fx","required":false,"source":"global","typeRef":365},{"name":"fy","required":false,"source":"global","typeRef":365},{"name":"fz","required":false,"source":"global","literalValues":["h1","h2","h3","h4","h5","h6","lg","md","sm","xl","xs"],"description":"FontSize, theme key: theme.fontSizes","typeRef":310},{"name":"g1","required":false,"source":"global","typeRef":365},{"name":"g2","required":false,"source":"global","typeRef":365},{"name":"glyphName","required":false,"source":"global","typeRef":365},{"name":"glyphOrientationHorizontal","required":false,"source":"global","typeRef":365},{"name":"glyphOrientationVertical","required":false,"source":"global","typeRef":365},{"name":"gradientTransform","required":false,"source":"global","typeRef":359},{"name":"gradientUnits","required":false,"source":"global","typeRef":359},{"name":"h","required":false,"source":"global","description":"Height, theme key: theme.spacing","typeRef":298},{"name":"hanging","required":false,"source":"global","typeRef":365},{"name":"headers","required":false,"source":"global","typeRef":359},{"name":"height","required":false,"source":"global","typeRef":365},{"name":"hidden","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"hiddenFrom","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"Breakpoint above which the component is hidden with `display: none`","typeRef":177},{"name":"horizAdvX","required":false,"source":"global","typeRef":365},{"name":"horizOriginX","required":false,"source":"global","typeRef":365},{"name":"href","required":false,"source":"global","typeRef":359},{"name":"id","required":false,"source":"global","description":"Static id used as base to generate `aria-` attributes, by default generates random id","typeRef":359},{"name":"ideographic","required":false,"source":"global","typeRef":365},{"name":"imageRendering","required":false,"source":"global","typeRef":365},{"name":"in","required":false,"source":"global","typeRef":359},{"name":"in2","required":false,"source":"global","typeRef":365},{"name":"inert","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"inlist","required":false,"source":"global","typeRef":370},{"name":"inputMode","required":false,"source":"global","literalValues":["decimal","email","none","numeric","search","tel","text","url"],"description":"Hints at the type of data that might be entered by the user while editing the element or its contents","typeRef":68},{"name":"intercept","required":false,"source":"global","typeRef":365},{"name":"is","required":false,"source":"global","description":"Specify that a standard HTML element should behave like a defined custom built-in element","typeRef":359},{"name":"itemID","required":false,"source":"global","typeRef":359},{"name":"itemProp","required":false,"source":"global","typeRef":359},{"name":"itemScope","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"itemType","required":false,"source":"global","typeRef":359},{"name":"k","required":false,"source":"global","typeRef":365},{"name":"k1","required":false,"source":"global","typeRef":365},{"name":"k2","required":false,"source":"global","typeRef":365},{"name":"k3","required":false,"source":"global","typeRef":365},{"name":"k4","required":false,"source":"global","typeRef":365},{"name":"kernelMatrix","required":false,"source":"global","typeRef":365},{"name":"kernelUnitLength","required":false,"source":"global","typeRef":365},{"name":"kerning","required":false,"source":"global","typeRef":365},{"name":"key","required":false,"source":"global","description":"Stable identity used by React when rendering collections.","typeRef":173},{"name":"keyPoints","required":false,"source":"global","typeRef":365},{"name":"keySplines","required":false,"source":"global","typeRef":365},{"name":"keyTimes","required":false,"source":"global","typeRef":365},{"name":"lang","required":false,"source":"global","typeRef":359},{"name":"lengthAdjust","required":false,"source":"global","typeRef":365},{"name":"letterSpacing","required":false,"source":"global","typeRef":365},{"name":"lh","required":false,"source":"global","literalValues":["h1","h2","h3","h4","h5","h6","lg","md","sm","xl","xs"],"description":"LineHeight, theme key: lineHeights","typeRef":311},{"name":"lightHidden","required":false,"source":"global","literalValues":[false,true],"description":"Determines whether component should be hidden in light color scheme with `display: none`","typeRef":341},{"name":"lightingColor","required":false,"source":"global","typeRef":365},{"name":"limitingConeAngle","required":false,"source":"global","typeRef":365},{"name":"list","required":false,"source":"global","typeRef":359},{"name":"local","required":false,"source":"global","typeRef":365},{"name":"lts","required":false,"source":"global","description":"LetterSpacing","typeRef":300},{"name":"m","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"Margin, theme key: theme.spacing","typeRef":284},{"name":"mah","required":false,"source":"global","description":"MaxHeight, theme key: theme.spacing","typeRef":301},{"name":"markerEnd","required":false,"source":"global","typeRef":359},{"name":"markerHeight","required":false,"source":"global","typeRef":365},{"name":"markerMid","required":false,"source":"global","typeRef":359},{"name":"markerStart","required":false,"source":"global","typeRef":359},{"name":"markerUnits","required":false,"source":"global","typeRef":365},{"name":"markerWidth","required":false,"source":"global","typeRef":365},{"name":"mask","required":false,"source":"global","typeRef":359},{"name":"maskContentUnits","required":false,"source":"global","typeRef":365},{"name":"maskUnits","required":false,"source":"global","typeRef":365},{"name":"mathematical","required":false,"source":"global","typeRef":365},{"name":"maw","required":false,"source":"global","description":"MaxWidth, theme key: theme.spacing","typeRef":302},{"name":"max","required":false,"source":"global","typeRef":365},{"name":"maxLength","required":false,"source":"global","typeRef":353},{"name":"mb","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginBottom, theme key: theme.spacing","typeRef":284},{"name":"me","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginInlineEnd, theme key: theme.spacing","typeRef":284},{"name":"media","required":false,"source":"global","typeRef":359},{"name":"method","required":false,"source":"global","typeRef":359},{"name":"mie","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginInlineEnd, theme key: theme.spacing","typeRef":284},{"name":"mih","required":false,"source":"global","description":"MinHeight, theme key: theme.spacing","typeRef":303},{"name":"min","required":false,"source":"global","typeRef":365},{"name":"minLength","required":false,"source":"global","typeRef":353},{"name":"mis","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginInlineStart, theme key: theme.spacing","typeRef":284},{"name":"miw","required":false,"source":"global","description":"MinWidth, theme key: theme.spacing","typeRef":304},{"name":"ml","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginLeft, theme key: theme.spacing","typeRef":284},{"name":"mod","required":false,"source":"global","description":"Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed","typeRef":143},{"name":"mode","required":false,"source":"global","typeRef":365},{"name":"mr","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginRight, theme key: theme.spacing","typeRef":284},{"name":"ms","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginInlineStart, theme key: theme.spacing","typeRef":284},{"name":"mt","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginTop, theme key: theme.spacing","typeRef":284},{"name":"multiple","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"mx","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginInline, theme key: theme.spacing","typeRef":284},{"name":"my","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginBlock, theme key: theme.spacing","typeRef":284},{"name":"name","required":false,"source":"global","typeRef":359},{"name":"nonce","required":false,"source":"global","typeRef":359},{"name":"numOctaves","required":false,"source":"global","typeRef":365},{"name":"offset","required":false,"source":"global","typeRef":365},{"name":"opacity","required":false,"source":"global","literalValues":["-moz-initial","inherit","initial","revert","revert-layer","unset"],"typeRef":305},{"name":"operator","required":false,"source":"global","typeRef":365},{"name":"order","required":false,"source":"global","typeRef":365},{"name":"orient","required":false,"source":"global","typeRef":365},{"name":"orientation","required":false,"source":"global","typeRef":365},{"name":"origin","required":false,"source":"global","typeRef":365},{"name":"overflow","required":false,"source":"global","typeRef":365},{"name":"overlinePosition","required":false,"source":"global","typeRef":365},{"name":"overlineThickness","required":false,"source":"global","typeRef":365},{"name":"p","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"Padding, theme key: theme.spacing","typeRef":284},{"name":"paintOrder","required":false,"source":"global","typeRef":365},{"name":"panose1","required":false,"source":"global","typeRef":365},{"name":"part","required":false,"source":"global","typeRef":359},{"name":"path","required":false,"source":"global","typeRef":359},{"name":"pathLength","required":false,"source":"global","typeRef":365},{"name":"pattern","required":false,"source":"global","typeRef":359},{"name":"patternContentUnits","required":false,"source":"global","typeRef":359},{"name":"patternTransform","required":false,"source":"global","typeRef":365},{"name":"patternUnits","required":false,"source":"global","typeRef":359},{"name":"pb","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingBottom, theme key: theme.spacing","typeRef":284},{"name":"pe","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingInlineEnd, theme key: theme.spacing","typeRef":284},{"name":"pie","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingInlineEnd, theme key: theme.spacing","typeRef":284},{"name":"pis","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingInlineStart, theme key: theme.spacing","typeRef":284},{"name":"pl","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingLeft, theme key: theme.spacing","typeRef":284},{"name":"placeholder","required":false,"source":"global","typeRef":359},{"name":"pointerEvents","required":false,"source":"global","typeRef":365},{"name":"points","required":false,"source":"global","typeRef":359},{"name":"pointsAtX","required":false,"source":"global","typeRef":365},{"name":"pointsAtY","required":false,"source":"global","typeRef":365},{"name":"pointsAtZ","required":false,"source":"global","typeRef":365},{"name":"pr","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingRight, theme key: theme.spacing","typeRef":284},{"name":"prefix","required":false,"source":"global","typeRef":359},{"name":"preserveAlpha","required":false,"source":"global","literalValues":[false,"false",true,"true"],"typeRef":347},{"name":"preserveAspectRatio","required":false,"source":"global","typeRef":359},{"name":"primitiveUnits","required":false,"source":"global","typeRef":365},{"name":"property","required":false,"source":"global","typeRef":359},{"name":"ps","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingInlineStart, theme key: theme.spacing","typeRef":284},{"name":"pt","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingTop, theme key: theme.spacing","typeRef":284},{"name":"px","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingInline, theme key: theme.spacing","typeRef":284},{"name":"py","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingBlock, theme key: theme.spacing","typeRef":284},{"name":"r","required":false,"source":"global","typeRef":365},{"name":"radioGroup","required":false,"source":"global","typeRef":359},{"name":"radius","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem","typeRef":180},{"name":"readOnly","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"rel","required":false,"source":"global","typeRef":359},{"name":"renderingIntent","required":false,"source":"global","typeRef":365},{"name":"repeatCount","required":false,"source":"global","typeRef":365},{"name":"repeatDur","required":false,"source":"global","typeRef":365},{"name":"required","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"requiredExtensions","required":false,"source":"global","typeRef":365},{"name":"requiredFeatures","required":false,"source":"global","typeRef":365},{"name":"resource","required":false,"source":"global","typeRef":359},{"name":"restart","required":false,"source":"global","typeRef":365},{"name":"result","required":false,"source":"global","typeRef":359},{"name":"results","required":false,"source":"global","typeRef":353},{"name":"rev","required":false,"source":"global","typeRef":359},{"name":"role","required":false,"source":"global","typeRef":140},{"name":"rotate","required":false,"source":"global","typeRef":365},{"name":"rowSpan","required":false,"source":"global","typeRef":353},{"name":"rows","required":false,"source":"global","typeRef":353},{"name":"rules","required":false,"source":"global","literalValues":["all","columns","groups","none","rows"],"typeRef":54},{"name":"rx","required":false,"source":"global","typeRef":365},{"name":"ry","required":false,"source":"global","typeRef":365},{"name":"scale","required":false,"source":"global","typeRef":365},{"name":"scope","required":false,"source":"global","typeRef":359},{"name":"security","required":false,"source":"global","typeRef":359},{"name":"seed","required":false,"source":"global","typeRef":365},{"name":"shadow","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.shadows` or any other valid CSS `box-shadow` value","typeRef":181},{"name":"shapeRendering","required":false,"source":"global","typeRef":365},{"name":"size","required":false,"source":"global","literalValues":["compact-lg","compact-md","compact-sm","compact-xl","compact-xs","input-lg","input-md","input-sm","input-xl","input-xs","lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"slope","required":false,"source":"global","typeRef":365},{"name":"slot","required":false,"source":"global","typeRef":359},{"name":"spacing","required":false,"source":"global","typeRef":365},{"name":"specularConstant","required":false,"source":"global","typeRef":365},{"name":"specularExponent","required":false,"source":"global","typeRef":365},{"name":"speed","required":false,"source":"global","typeRef":365},{"name":"spellCheck","required":false,"source":"global","literalValues":[false,"false",true,"true"],"typeRef":347},{"name":"spreadMethod","required":false,"source":"global","typeRef":359},{"name":"src","required":false,"source":"global","typeRef":359},{"name":"startOffset","required":false,"source":"global","typeRef":365},{"name":"stdDeviation","required":false,"source":"global","typeRef":365},{"name":"stemh","required":false,"source":"global","typeRef":365},{"name":"stemv","required":false,"source":"global","typeRef":365},{"name":"step","required":false,"source":"global","typeRef":365},{"name":"stitchTiles","required":false,"source":"global","typeRef":365},{"name":"stopColor","required":false,"source":"global","typeRef":359},{"name":"stopOpacity","required":false,"source":"global","typeRef":365},{"name":"strikethroughPosition","required":false,"source":"global","typeRef":365},{"name":"strikethroughThickness","required":false,"source":"global","typeRef":365},{"name":"string","required":false,"source":"global","typeRef":365},{"name":"stroke","required":false,"source":"global","typeRef":359},{"name":"strokeDasharray","required":false,"source":"global","typeRef":365},{"name":"strokeDashoffset","required":false,"source":"global","typeRef":365},{"name":"strokeLinecap","required":false,"source":"global","literalValues":["butt","inherit","round","square"],"typeRef":43},{"name":"strokeLinejoin","required":false,"source":"global","literalValues":["bevel","inherit","miter","round"],"typeRef":44},{"name":"strokeMiterlimit","required":false,"source":"global","typeRef":365},{"name":"strokeOpacity","required":false,"source":"global","typeRef":365},{"name":"strokeWidth","required":false,"source":"global","typeRef":365},{"name":"style","required":false,"source":"global","description":"Style to apply to the root element, used for virtualizer positioning","typeRef":146},{"name":"styles","required":false,"source":"global","typeRef":220},{"name":"summary","required":false,"source":"global","typeRef":359},{"name":"surfaceScale","required":false,"source":"global","typeRef":365},{"name":"systemLanguage","required":false,"source":"global","typeRef":365},{"name":"ta","required":false,"source":"global","literalValues":["-khtml-center","-khtml-left","-khtml-right","-moz-center","-moz-initial","-moz-left","-moz-right","-webkit-center","-webkit-left","-webkit-match-parent","-webkit-right","center","end","inherit","initial","justify","left","match-parent","revert","revert-layer","right","start","unset"],"description":"TextAlign","typeRef":306},{"name":"tabIndex","required":false,"source":"global","description":"Tab index for the node","typeRef":353},{"name":"tableValues","required":false,"source":"global","typeRef":365},{"name":"target","required":false,"source":"global","typeRef":359},{"name":"targetX","required":false,"source":"global","typeRef":365},{"name":"targetY","required":false,"source":"global","typeRef":365},{"name":"td","required":false,"source":"global","description":"TextDecoration","typeRef":307},{"name":"textAnchor","required":false,"source":"global","literalValues":["end","inherit","middle","start"],"typeRef":41},{"name":"textDecoration","required":false,"source":"global","typeRef":365},{"name":"textLength","required":false,"source":"global","typeRef":365},{"name":"textRendering","required":false,"source":"global","typeRef":365},{"name":"title","required":false,"source":"global","description":"Item title, displayed next to the bullet","typeRef":359},{"name":"to","required":false,"source":"global","typeRef":365},{"name":"transform","required":false,"source":"global","typeRef":359},{"name":"translate","required":false,"source":"global","literalValues":["no","yes"],"typeRef":83},{"name":"tt","required":false,"source":"global","literalValues":["-moz-initial","capitalize","full-size-kana","full-width","inherit","initial","lowercase","math-auto","none","revert","revert-layer","unset","uppercase"],"description":"TextTransform","typeRef":308},{"name":"type","required":false,"source":"global","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":20},{"name":"typeof","required":false,"source":"global","typeRef":359},{"name":"u1","required":false,"source":"global","typeRef":365},{"name":"u2","required":false,"source":"global","typeRef":365},{"name":"underlinePosition","required":false,"source":"global","typeRef":365},{"name":"underlineThickness","required":false,"source":"global","typeRef":365},{"name":"unicode","required":false,"source":"global","typeRef":365},{"name":"unicodeBidi","required":false,"source":"global","typeRef":365},{"name":"unicodeRange","required":false,"source":"global","typeRef":365},{"name":"unitsPerEm","required":false,"source":"global","typeRef":365},{"name":"unselectable","required":false,"source":"global","literalValues":["off","on"],"typeRef":64},{"name":"vAlphabetic","required":false,"source":"global","typeRef":365},{"name":"vHanging","required":false,"source":"global","typeRef":365},{"name":"vIdeographic","required":false,"source":"global","typeRef":365},{"name":"vMathematical","required":false,"source":"global","typeRef":365},{"name":"valign","required":false,"source":"global","literalValues":["baseline","bottom","middle","top"],"typeRef":17},{"name":"value","required":false,"source":"global","typeRef":366},{"name":"values","required":false,"source":"global","typeRef":359},{"name":"variant","required":false,"source":"global","literalValues":["contained","contrast","dashed","default","dot","dotted","filled","gradient","light","outline","pills","separated","solid","subtle","text","transparent","unstyled","vertical","white"],"description":"Variant passed from parent component, sets `data-variant`","typeRef":359},{"name":"vectorEffect","required":false,"source":"global","typeRef":365},{"name":"version","required":false,"source":"global","typeRef":359},{"name":"vertAdvY","required":false,"source":"global","typeRef":365},{"name":"vertOriginX","required":false,"source":"global","typeRef":365},{"name":"vertOriginY","required":false,"source":"global","typeRef":365},{"name":"viewBox","required":false,"source":"global","typeRef":359},{"name":"viewTarget","required":false,"source":"global","typeRef":365},{"name":"visibility","required":false,"source":"global","typeRef":365},{"name":"visibleFrom","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"Breakpoint below which the component is hidden with `display: none`","typeRef":177},{"name":"vocab","required":false,"source":"global","typeRef":359},{"name":"w","required":false,"source":"global","description":"Width, theme key: theme.spacing","typeRef":309},{"name":"width","required":false,"source":"global","typeRef":365},{"name":"widths","required":false,"source":"global","typeRef":365},{"name":"withBorder","required":false,"source":"global","literalValues":[false,true],"description":"Adds border to the root element","typeRef":341},{"name":"wordSpacing","required":false,"source":"global","typeRef":365},{"name":"wrap","required":false,"source":"global","typeRef":359},{"name":"writingMode","required":false,"source":"global","typeRef":365},{"name":"x","required":false,"source":"global","typeRef":365},{"name":"x1","required":false,"source":"global","typeRef":365},{"name":"x2","required":false,"source":"global","typeRef":365},{"name":"xChannelSelector","required":false,"source":"global","typeRef":359},{"name":"xHeight","required":false,"source":"global","typeRef":365},{"name":"xlinkActuate","required":false,"source":"global","typeRef":359},{"name":"xlinkArcrole","required":false,"source":"global","typeRef":359},{"name":"xlinkHref","required":false,"source":"global","typeRef":359},{"name":"xlinkRole","required":false,"source":"global","typeRef":359},{"name":"xlinkShow","required":false,"source":"global","typeRef":359},{"name":"xlinkTitle","required":false,"source":"global","typeRef":359},{"name":"xlinkType","required":false,"source":"global","typeRef":359},{"name":"xmlBase","required":false,"source":"global","typeRef":359},{"name":"xmlLang","required":false,"source":"global","typeRef":359},{"name":"xmlSpace","required":false,"source":"global","typeRef":359},{"name":"xmlns","required":false,"source":"global","typeRef":359},{"name":"xmlnsXlink","required":false,"source":"global","typeRef":359},{"name":"y","required":false,"source":"global","typeRef":365},{"name":"y1","required":false,"source":"global","typeRef":365},{"name":"y2","required":false,"source":"global","typeRef":365},{"name":"yChannelSelector","required":false,"source":"global","typeRef":359},{"name":"z","required":false,"source":"global","typeRef":365},{"name":"zoomAndPan","required":false,"source":"global","typeRef":359}],"blockedCapabilities":[{"kind":"prop","name":"__proto__","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"apply","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"arguments","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"autoFocus","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"backdropFilter","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"behavior","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"bottom","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"call","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"callee","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"caller","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"children","reason":"Children must be expressed as interpreted JSX, not passed as a raw prop."},{"kind":"prop","name":"className","reason":"Unscoped class injection can escape widget CSS isolation."},{"kind":"prop","name":"classNames","reason":"Unscoped class injection can escape widget CSS isolation."},{"kind":"prop","name":"classes","reason":"Unscoped class injection can escape widget CSS isolation."},{"kind":"prop","name":"clipPath","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"component","reason":"Polymorphic roots can replace the Homarr-owned element boundary."},{"kind":"prop","name":"constructor","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"content","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"contentEditable","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"dangerouslySetInnerHTML","reason":"Raw HTML injection is not available to authored widgets."},{"kind":"prop","name":"filter","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"form","reason":"External form submission is outside the named-request security boundary."},{"kind":"prop","name":"formAction","reason":"External form submission is outside the named-request security boundary."},{"kind":"prop","name":"formEncType","reason":"External form submission is outside the named-request security boundary."},{"kind":"prop","name":"formMethod","reason":"External form submission is outside the named-request security boundary."},{"kind":"prop","name":"formNoValidate","reason":"External form submission is outside the named-request security boundary."},{"kind":"prop","name":"formTarget","reason":"External form submission is outside the named-request security boundary."},{"kind":"prop","name":"innerRef","reason":"Refs expose underlying React components and DOM nodes."},{"kind":"prop","name":"inset","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"left","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"mask","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"ping","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"pointerEvents","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"popover","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"popoverTarget","reason":"Portal targeting can render or interact outside the widget root."},{"kind":"prop","name":"popoverTargetAction","reason":"Portal targeting can render or interact outside the widget root."},{"kind":"prop","name":"portalProps","reason":"Portal targeting can render or interact outside the widget root."},{"kind":"prop","name":"pos","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"position","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"prototype","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"ref","reason":"Refs expose underlying React components and DOM nodes."},{"kind":"prop","name":"renderRoot","reason":"Polymorphic roots can replace the Homarr-owned element boundary."},{"kind":"prop","name":"right","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"srcDoc","reason":"Raw HTML injection is not available to authored widgets."},{"kind":"prop","name":"suppressContentEditableWarning","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"suppressHydrationWarning","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"top","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"withinPortal","reason":"Portal targeting can render or interact outside the widget root."},{"kind":"prop","name":"zIndex","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop-pattern","name":"on*","reason":"Authored event callbacks can execute code outside the declarative runtime."},{"kind":"prop-pattern","name":"*Ref","reason":"Refs expose underlying React components and DOM nodes."},{"kind":"prop-pattern","name":"__*","reason":"Private and prototype-related properties are outside the supported authoring surface."}],"components":[{"name":"Accordion","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion/","props":[{"name":"attributes","required":false,"source":"component","typeRef":421},{"name":"chevron","required":false,"source":"component","description":"Custom chevron icon","typeRef":263},{"name":"chevronIconSize","required":false,"source":"component","description":"Size of the default chevron icon. Ignored when `chevron` prop is set. Use `chevronSize` instead when using custom chevron.","typeRef":365},{"name":"chevronPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the chevron relative to the item label","typeRef":47},{"name":"chevronSize","required":false,"source":"component","description":"Size of the chevron icon container","typeRef":365},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":138},{"name":"disableChevronRotation","required":false,"source":"component","literalValues":[false,true],"description":"If set, chevron rotation is disabled","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set to `false`, panels are unmounted when collapsed. By default, panels stay mounted when collapsed.","typeRef":341},{"name":"loop","required":false,"source":"component","literalValues":[false,true],"description":"If set, arrow keys loop through items (first to last and last to first)","typeRef":341},{"name":"multiple","required":false,"source":"component","description":"If set, multiple items can be opened at the same time","typeRef":186},{"name":"order","required":false,"source":"component","literalValues":[2,3,4,5,6],"description":"Sets heading level (h2-h6) for `Accordion.Control` elements. Wraps each control in the corresponding heading tag, recommended to meet WAI-ARIA accessibility requirements. Has no visual effect.","typeRef":136},{"name":"transitionDuration","required":false,"source":"component","description":"Transition duration in ms","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":138},{"name":"variant","required":false,"source":"component","literalValues":["contained","default","filled","separated"],"typeRef":112}],"blockedProps":[],"subcomponents":["Accordion.Chevron","Accordion.Control","Accordion.Item","Accordion.Panel"],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Accordion.Chevron","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"display","required":false,"source":"component","typeRef":365},{"name":"opacity","required":false,"source":"component","typeRef":365},{"name":"radius","required":false,"source":"component","typeRef":365},{"name":"size","required":false,"source":"component","description":"Controls `width` and `height` of the icon, `16` by default","typeRef":365},{"name":"type","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Accordion.Control","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion/","props":[{"name":"chevron","required":false,"source":"component","description":"Custom chevron icon","typeRef":263},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"icon","required":false,"source":"component","description":"Icon displayed next to the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":227},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Accordion.Item","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":217},{"name":"value","required":true,"source":"component","description":"Value that is used to manage the accordion state","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Accordion.Panel","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, overrides the Accordion-level `keepMounted` value. When undefined (default), uses Accordion's `keepMounted` setting.","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":228},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"AccordionChevron","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion-chevron/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"display","required":false,"source":"component","typeRef":365},{"name":"opacity","required":false,"source":"component","typeRef":365},{"name":"radius","required":false,"source":"component","typeRef":365},{"name":"size","required":false,"source":"component","description":"Controls `width` and `height` of the icon, `16` by default","typeRef":365},{"name":"type","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"AccordionControl","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion-control/","props":[{"name":"chevron","required":false,"source":"component","description":"Custom chevron icon","typeRef":263},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"icon","required":false,"source":"component","description":"Icon displayed next to the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":227},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"AccordionItem","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion-item/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":217},{"name":"value","required":true,"source":"component","description":"Value that is used to manage the accordion state","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"AccordionPanel","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion-panel/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, overrides the Accordion-level `keepMounted` value. When undefined (default), uses Accordion's `keepMounted` setting.","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":228},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"ActionButton","package":"@homarr/widgets","category":"network","safety":"wrapped","description":"Runs a named user-triggered action.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"color","source":"component","required":false,"typeRef":359},{"name":"confirmMessage","source":"component","required":false,"typeRef":359},{"name":"disabled","source":"component","required":false,"typeRef":338},{"name":"errorMessage","source":"component","required":false,"typeRef":359},{"name":"fullWidth","source":"component","required":false,"typeRef":338},{"name":"icon","source":"component","required":false,"typeRef":359},{"name":"label","source":"component","required":false,"typeRef":359},{"name":"params","source":"component","required":false,"typeRef":270},{"name":"requestId","source":"component","required":false,"description":"Identifier of the named Custom Widget action.","typeRef":359},{"name":"size","source":"component","required":false,"typeRef":359},{"name":"successMessage","source":"component","required":false,"typeRef":359},{"name":"variant","source":"component","required":false,"typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Action labels must describe their effect; destructive actions require confirmation."]},{"name":"ActionIcon","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/action-icon/","props":[{"name":"attributes","required":false,"source":"component","typeRef":459},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color.","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"gradient","required":false,"source":"component","description":"Gradient values used with `variant=\"gradient\"`.","typeRef":179},{"name":"loaderProps","required":false,"source":"component","description":"Props passed down to the `Loader` component. Ignored when `loading` prop is not set.","typeRef":176},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"If set, `Loader` component is displayed instead of the `children`","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["input-lg","input-md","input-sm","input-xl","input-xs","lg","md","sm","xl","xs"],"description":"Controls width and height of the button. Numbers are converted to rem.","typeRef":356},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","subtle","transparent","white"],"typeRef":113}],"blockedProps":[],"subcomponents":["ActionIcon.Group","ActionIcon.GroupSection"],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ActionIcon.Group","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/action-icon/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"borderWidth","required":false,"source":"component","description":"`border-width` of the child components.","typeRef":365},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Group orientation","typeRef":36},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ActionIcon.GroupSection","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/action-icon/","props":[{"name":"attributes","required":false,"source":"component","typeRef":401},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gradient","required":false,"source":"component","description":"Gradient values used with `variant=\"gradient\"`.","typeRef":179},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls section `height`, `font-size` and horizontal `padding`","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","subtle","transparent","white"],"typeRef":113}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ActionIconGroup","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/action-icon-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"borderWidth","required":false,"source":"component","description":"`border-width` of the child components.","typeRef":365},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Group orientation","typeRef":36},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ActionIconGroupSection","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/action-icon-group-section/","props":[{"name":"attributes","required":false,"source":"component","typeRef":401},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gradient","required":false,"source":"component","description":"Gradient values used with `variant=\"gradient\"`.","typeRef":179},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls section `height`, `font-size` and horizontal `padding`","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","subtle","transparent","white"],"typeRef":113}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Affix","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/affix/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes the widget layout boundary"},{"name":"Alert","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/alert/","props":[{"name":"attributes","required":false,"source":"component","typeRef":378},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"closeButtonLabel","required":false,"source":"component","description":"Close button `aria-label`","typeRef":359},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"icon","required":false,"source":"component","description":"Icon displayed next to the title","typeRef":263},{"name":"title","required":false,"source":"component","description":"Alert title","typeRef":263},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","light","outline","transparent","white"],"typeRef":114},{"name":"withCloseButton","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether close button should be displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"AlphaSlider","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/alpha-slider/","props":[{"name":"attributes","required":false,"source":"component","typeRef":474},{"name":"color","required":true,"source":"component","typeRef":359},{"name":"focusable","required":false,"source":"component","literalValues":[false,true],"description":"If set, slider thumb can be focused","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Slider size","typeRef":182},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":true,"source":"component","description":"Controlled component value","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Anchor","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/anchor/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration, ignored when `variant` is not `gradient`","typeRef":179},{"name":"inherit","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether font properties should be inherited from the parent","typeRef":341},{"name":"inline","required":false,"source":"component","literalValues":[false,true],"description":"Sets `line-height` to 1 for centering","typeRef":341},{"name":"lineClamp","required":false,"source":"component","description":"Number of lines after which Text will be truncated","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size` and `line-height`","typeRef":82},{"name":"textWrap","required":false,"source":"component","literalValues":["balance","nowrap","pretty","stable","wrap"],"description":"Controls `text-wrap` CSS property","typeRef":79},{"name":"truncate","required":false,"source":"component","literalValues":["end",false,"start",true],"description":"Side on which Text must be truncated, if `true`, text is truncated from the start","typeRef":344},{"name":"underline","required":false,"source":"component","literalValues":["always","hover","never","not-hover"],"description":"Defines when `text-decoration: underline` styles are applied.","typeRef":10},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["gradient","text"],"typeRef":131}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"AngleSlider","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/angle-slider/","props":[{"name":"attributes","required":false,"source":"component","typeRef":423},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":353},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":261},{"name":"marks","required":false,"source":"component","description":"Array of marks displayed on the slider","typeRef":477},{"name":"restrictToMarks","required":false,"source":"component","literalValues":[false,true],"description":"If set, the selection is allowed only from the given marks array","typeRef":341},{"name":"size","required":false,"source":"component","description":"Slider size in px","typeRef":353},{"name":"step","required":false,"source":"component","description":"Step between values","typeRef":353},{"name":"thumbSize","required":false,"source":"component","description":"Size of the thumb in px. Calculated based on the `size` value by default.","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withLabel","required":false,"source":"component","literalValues":[false,true],"description":"If set, the label is displayed inside the slider","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"AppShell","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell/","props":[],"blockedProps":[],"subcomponents":["AppShell.Aside","AppShell.Footer","AppShell.Header","AppShell.Main","AppShell.Navbar","AppShell.Section"],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShell.Aside","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShell.Footer","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShell.Header","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShell.Main","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShell.Navbar","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShell.Section","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShellAside","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell-aside/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShellFooter","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell-footer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShellHeader","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell-header/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShellMain","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell-main/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShellNavbar","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell-navbar/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShellSection","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell-section/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AreaChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/area-chart/","props":[{"name":"activeDotProps","required":false,"source":"component","description":"Props passed down to all active dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"areaChartProps","required":false,"source":"component","description":"Props passed down to recharts `AreaChart` component","typeRef":91},{"name":"attributes","required":false,"source":"component","typeRef":371},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"connectNulls","required":false,"source":"component","literalValues":[false,true],"description":"If set, points with `null` values are connected","typeRef":341},{"name":"curveType","required":false,"source":"component","literalValues":["bump","linear","monotone","natural","step","stepAfter","stepBefore"],"description":"Type of the curve","typeRef":69},{"name":"data","required":true,"source":"component","description":"Data used to display chart","typeRef":148},{"name":"dataKey","required":true,"source":"component","description":"Key of the `data` object for x-axis values","typeRef":359},{"name":"dotProps","required":false,"source":"component","description":"Props passed down to all dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"fillOpacity","required":false,"source":"component","description":"Controls fill opacity of all areas","typeRef":353},{"name":"gridAxis","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which lines should be displayed in the grid, `'x'` by default","typeRef":61},{"name":"gridColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the grid and cursor lines, by default depends on color scheme","typeRef":162},{"name":"gridProps","required":false,"source":"component","description":"Props passed down to the `CartesianGrid` component","typeRef":189},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to the `Legend` component","typeRef":190},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Chart orientation, `'horizontal'` by default","typeRef":36},{"name":"referenceLines","required":false,"source":"component","description":"Reference lines that should be displayed on the chart","typeRef":149},{"name":"rightYAxisLabel","required":false,"source":"component","description":"A label to display next to the right y-axis","typeRef":359},{"name":"rightYAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component rendered on the right side","typeRef":199},{"name":"series","required":true,"source":"component","description":"An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array.","typeRef":139},{"name":"splitColors","required":false,"source":"component","description":"A tuple of colors used when `type=\"split\"` is set, ignored in all other cases. A tuple may include theme colors reference or any valid CSS colors","typeRef":333},{"name":"splitOffset","required":false,"source":"component","description":"Offset for the split gradient. By default, value is inferred from `data` and `series` if possible. Must be generated from the data array with `getSplitOffset` function.","typeRef":353},{"name":"strokeWidth","required":false,"source":"component","description":"Stroke width for the chart areas","typeRef":353},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the text displayed inside the chart, `'dimmed'` by default","typeRef":162},{"name":"tickLine","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which axis should have tick line, `'y'` by default","typeRef":61},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip position animation duration in ms, `0` by default","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to the `Tooltip` component","typeRef":197},{"name":"type","required":false,"source":"component","literalValues":["default","percent","split","stacked"],"description":"Controls how chart areas are positioned relative to each other","typeRef":29},{"name":"unit","required":false,"source":"component","description":"Unit displayed next to each tick in y-axis","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withDots","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dots should be displayed","typeRef":341},{"name":"withGradient","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the chart area should be represented with a gradient instead of the solid color","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart legend should be displayed, `false` by default","typeRef":341},{"name":"withPointLabels","required":false,"source":"component","literalValues":[false,true],"description":"If set, each point has an associated label","typeRef":341},{"name":"withRightYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart tooltip should be displayed, `true` by default","typeRef":341},{"name":"withXAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether x-axis should be displayed, `true` by default","typeRef":341},{"name":"withYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether y-axis should be displayed, `true` by default","typeRef":341},{"name":"xAxisLabel","required":false,"source":"component","description":"A label to display below the x-axis","typeRef":359},{"name":"xAxisProps","required":false,"source":"component","description":"Props passed down to the `XAxis` recharts component","typeRef":198},{"name":"yAxisLabel","required":false,"source":"component","description":"A label to display next to the y-axis","typeRef":359},{"name":"yAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component","typeRef":199}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"AreaGradient","package":"@mantine/charts","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/charts/area-gradient/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level chart implementation helper"},{"name":"AspectRatio","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/aspect-ratio/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"ratio","required":false,"source":"component","description":"Aspect ratio, for example, `16 / 9`, `4 / 3`, `1920 / 1080`","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Autocomplete","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/autocomplete/","props":[{"name":"attributes","required":false,"source":"component","typeRef":405},{"name":"autoSelectOnBlur","required":false,"source":"component","literalValues":[false,true],"description":"If set, the highlighted option is selected when the input loses focus","typeRef":341},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":172},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"If set, the clear button is displayed when the component has a value","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"comboboxProps","required":false,"source":"component","description":"Props passed down to `Combobox` component","typeRef":153},{"name":"data","required":false,"source":"component","description":"Data used to display options. Values must be unique.","typeRef":152},{"name":"defaultDropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled dropdown initial opened state","typeRef":341},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"dropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled dropdown opened state","typeRef":341},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"floatingHeight","required":false,"source":"component","literalValues":["viewport"],"description":"If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware.","typeRef":78},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"limit","required":false,"source":"component","description":"Maximum number of options displayed at a time, `Infinity` by default","typeRef":353},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxDropdownHeight","required":false,"source":"component","description":"`max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default","typeRef":365},{"name":"openOnFocus","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown opens when the input receives focus","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props passed to the underlying `ScrollArea` component in the dropdown","typeRef":274},{"name":"selectFirstOptionOnChange","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when value changes, `false` by default","typeRef":341},{"name":"selectFirstOptionOnDropdownOpen","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when dropdown opens, `false` by default","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withScrollArea","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Avatar","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/avatar/","props":[{"name":"allowedInitialsColors","required":false,"source":"component","description":"A list of colors that is used for autogenerated initials. By default, all default Mantine colors can be used except gray and dark.","typeRef":164},{"name":"attributes","required":false,"source":"component","typeRef":404},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","initials","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":163},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration for `variant=\"gradient\"`","typeRef":179},{"name":"imageProps","required":false,"source":"component","description":"Attributes passed down to `img` element","typeRef":260},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Width and height of the avatar, numbers are converted to rem","typeRef":355},{"name":"src","required":false,"source":"component","description":"Image url, if the image cannot be loaded or `src={null}`, then placeholder is displayed instead","typeRef":352},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","transparent","white"],"typeRef":115}],"blockedProps":[],"subcomponents":["Avatar.Group"],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Avatar.Group","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/avatar/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"spacing","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Negative space between Avatar components","typeRef":183},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"AvatarGroup","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/avatar-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"spacing","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Negative space between Avatar components","typeRef":183},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"BackgroundImage","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/background-image/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"src","required":true,"source":"component","description":"Image url","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Badge","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/badge/","props":[{"name":"attributes","required":false,"source":"component","typeRef":432},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"circle","required":false,"source":"component","literalValues":[false,true],"description":"If set, badge `min-width` becomes equal to its `height` and horizontal padding is removed","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether Badge should take 100% of its parent width","typeRef":341},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration used when `variant=\\\"gradient\\\"`","typeRef":179},{"name":"leftSection","required":false,"source":"component","description":"Content displayed on the left side of the badge label","typeRef":263},{"name":"rightSection","required":false,"source":"component","description":"Content displayed on the right side of the badge label","typeRef":263},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size`, `height` and horizontal `padding`","typeRef":182},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","dot","filled","gradient","light","outline","transparent","white"],"typeRef":116}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"BarChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/bar-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":436},{"name":"barChartProps","required":false,"source":"component","description":"Props passed down to recharts `BarChart` component","typeRef":91},{"name":"barLabelColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the bar label, by default the value is determined by the chart orientation","typeRef":162},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"cursorFill","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Fill of hovered bar section, by default value is based on color scheme","typeRef":162},{"name":"data","required":true,"source":"component","description":"Data used to display chart.","typeRef":267},{"name":"dataKey","required":true,"source":"component","description":"Key of the `data` object for x-axis values","typeRef":359},{"name":"fillOpacity","required":false,"source":"component","description":"Controls fill opacity of all bars","typeRef":353},{"name":"gridAxis","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which lines should be displayed in the grid, `'x'` by default","typeRef":61},{"name":"gridColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the grid and cursor lines, by default depends on color scheme","typeRef":162},{"name":"gridProps","required":false,"source":"component","description":"Props passed down to the `CartesianGrid` component","typeRef":189},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to the `Legend` component","typeRef":190},{"name":"maxBarWidth","required":false,"source":"component","description":"Maximum bar width in px","typeRef":353},{"name":"minBarSize","required":false,"source":"component","description":"Sets minimum height of the bar in px","typeRef":353},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Chart orientation, `'horizontal'` by default","typeRef":36},{"name":"referenceLines","required":false,"source":"component","description":"Reference lines that should be displayed on the chart","typeRef":149},{"name":"rightYAxisLabel","required":false,"source":"component","description":"A label to display next to the right y-axis","typeRef":359},{"name":"rightYAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component rendered on the right side","typeRef":199},{"name":"series","required":true,"source":"component","description":"An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array.","typeRef":141},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the text displayed inside the chart, `'dimmed'` by default","typeRef":162},{"name":"tickLine","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which axis should have tick line, `'y'` by default","typeRef":61},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip position animation duration in ms, `0` by default","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to the `Tooltip` component","typeRef":197},{"name":"type","required":false,"source":"component","literalValues":["default","percent","stacked","waterfall"],"description":"Controls how bars are positioned relative to each other","typeRef":30},{"name":"unit","required":false,"source":"component","description":"Unit displayed next to each tick in y-axis","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withBarValueLabel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether a label with bar value should be displayed on top of each bar, incompatible with `type=\"stacked\"` and `type=\"percent\"`","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart legend should be displayed, `false` by default","typeRef":341},{"name":"withRightYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart tooltip should be displayed, `true` by default","typeRef":341},{"name":"withXAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether x-axis should be displayed, `true` by default","typeRef":341},{"name":"withYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether y-axis should be displayed, `true` by default","typeRef":341},{"name":"xAxisLabel","required":false,"source":"component","description":"A label to display below the x-axis","typeRef":359},{"name":"xAxisProps","required":false,"source":"component","description":"Props passed down to the `XAxis` recharts component","typeRef":198},{"name":"yAxisLabel","required":false,"source":"component","description":"A label to display next to the y-axis","typeRef":359},{"name":"yAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component","typeRef":199}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"BarsList","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/bars-list/","props":[{"name":"attributes","required":false,"source":"component","typeRef":453},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color","typeRef":341},{"name":"barColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Default bar background color, used when item does not have color specified","typeRef":162},{"name":"barGap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls gap between bars","typeRef":183},{"name":"barHeight","required":false,"source":"component","description":"Bar height","typeRef":365},{"name":"barTextColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Bar text color, overrides autoContrast","typeRef":162},{"name":"barsLabel","required":false,"source":"component","description":"Label displayed above the bars column","typeRef":359},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data for bars","typeRef":142},{"name":"minBarSize","required":false,"source":"component","description":"Minimum bar width","typeRef":365},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"valueLabel","required":false,"source":"component","description":"Label displayed above the values column","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Blockquote","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/blockquote/","props":[{"name":"attributes","required":false,"source":"component","typeRef":391},{"name":"cite","required":false,"source":"component","description":"Reference to a cited quote","typeRef":263},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"icon","required":false,"source":"component","description":"Blockquote icon, displayed at the top left side","typeRef":263},{"name":"iconSize","required":false,"source":"component","description":"Controls icon `width` and `height`, numbers are converted to rem","typeRef":365},{"name":"textWrap","required":false,"source":"component","literalValues":["balance","nowrap","pretty","stable","wrap"],"description":"Controls `text-wrap` CSS property","typeRef":79},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Box","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/box/","props":[{"name":"size","required":false,"source":"component","description":"Size passed from parent component, sets `data-size` if value is not number like","typeRef":365},{"name":"variant","required":false,"source":"component","description":"Variant passed from parent component, sets `data-variant`","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Breadcrumbs","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/breadcrumbs/","props":[{"name":"attributes","required":false,"source":"component","typeRef":467},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"separator","required":false,"source":"component","description":"Separator between children","typeRef":263},{"name":"separatorMargin","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls spacing between separator and breadcrumb","typeRef":183},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"BubbleChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/bubble-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":469},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the chart items. Key of `theme.colors` or any valid CSS color.","typeRef":162},{"name":"data","required":true,"source":"component","description":"Chart data","typeRef":267},{"name":"dataKey","required":true,"source":"component","description":"Data keys for x, y and z axis","typeRef":144},{"name":"gridColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the grid and cursor lines, by default depends on color scheme","typeRef":162},{"name":"label","required":false,"source":"component","description":"Chart label displayed next to the x axis","typeRef":359},{"name":"range","required":true,"source":"component","description":"Z axis range","typeRef":334},{"name":"scatterProps","required":false,"source":"component","description":"Props passed down to the `Scatter` component","typeRef":207},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the text displayed inside the chart","typeRef":162},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to the `Tooltip` component","typeRef":197},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the tooltip should be displayed","typeRef":341},{"name":"xAxisProps","required":false,"source":"component","description":"Props passed down to the `XAxis` recharts component","typeRef":198},{"name":"yAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component","typeRef":199},{"name":"zAxisProps","required":false,"source":"component","description":"Props passed down to the `ZAxis` recharts component","typeRef":200}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Burger","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/burger/","props":[{"name":"attributes","required":false,"source":"component","typeRef":454},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` of any valid CSS value, by default `theme.white` in dark color scheme and `theme.black` in light","typeRef":162},{"name":"lineSize","required":false,"source":"component","description":"Controls height of lines, by default calculated based on `size` prop","typeRef":365},{"name":"opened","required":false,"source":"component","literalValues":[false,true],"description":"State of the burger, when `true` burger is transformed into X","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls burger `width` and `height`, numbers are converted to rem","typeRef":355},{"name":"transitionDuration","required":false,"source":"component","description":"`transition-duration` property value in ms","typeRef":353},{"name":"transitionTimingFunction","required":false,"source":"component","description":"`transition-timing-function` property value","typeRef":359},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Button","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/button/","props":[{"name":"attributes","required":false,"source":"component","typeRef":431},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Sets `width: 100%`","typeRef":341},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration used for `variant=\"gradient\"`","typeRef":179},{"name":"justify","required":false,"source":"component","literalValues":["-moz-initial","center","end","flex-end","flex-start","inherit","initial","left","normal","revert","revert-layer","right","space-around","space-between","space-evenly","start","stretch","unset"],"description":"Sets `justify-content` of `inner` element, can be used to change distribution of sections and label","typeRef":248},{"name":"leftSection","required":false,"source":"component","description":"Content on the left side of the button label","typeRef":263},{"name":"loaderProps","required":false,"source":"component","description":"Props added to the `Loader` component (only visible when `loading` prop is set)","typeRef":176},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"If set, the `Loader` component is displayed over the button","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content on the right side of the button label","typeRef":263},{"name":"size","required":false,"source":"component","literalValues":["compact-lg","compact-md","compact-sm","compact-xl","compact-xs","lg","md","sm","xl","xs"],"description":"Controls button `height`, `font-size` and horizontal `padding`","typeRef":145},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","subtle","transparent","white"],"typeRef":117}],"blockedProps":[],"subcomponents":["Button.Group","Button.GroupSection"],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Button.Group","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/button/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"borderWidth","required":false,"source":"component","description":"`border-width` of the child `Button` components. Numbers are converted to rem.","typeRef":365},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Orientation of the group","typeRef":36},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Button.GroupSection","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/button/","props":[{"name":"attributes","required":false,"source":"component","typeRef":401},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration used when `variant=\"gradient\"`","typeRef":179},{"name":"size","required":false,"source":"component","literalValues":["compact-lg","compact-md","compact-sm","compact-xl","compact-xs","lg","md","sm","xl","xs"],"description":"Controls section `height`, `font-size` and horizontal `padding`","typeRef":145},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","subtle","transparent","white"],"typeRef":117}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ButtonGroup","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/button-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"borderWidth","required":false,"source":"component","description":"`border-width` of the child `Button` components. Numbers are converted to rem.","typeRef":365},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Orientation of the group","typeRef":36},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"ButtonGroupSection","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/button-group-section/","props":[{"name":"attributes","required":false,"source":"component","typeRef":401},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration used when `variant=\"gradient\"`","typeRef":179},{"name":"size","required":false,"source":"component","literalValues":["compact-lg","compact-md","compact-sm","compact-xl","compact-xs","lg","md","sm","xl","xs"],"description":"Controls section `height`, `font-size` and horizontal `padding`","typeRef":145},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","subtle","transparent","white"],"typeRef":117}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Calendar","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/calendar/","props":[{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":445},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level in uncontrolled mode","typeRef":52},{"name":"enableKeyboardNavigation","required":false,"source":"component","literalValues":[false,true],"description":"Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view)","typeRef":341},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level displayed in controlled mode","typeRef":52},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Max level that user can go up to (decade, year, month)","typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Min level that user can go down to (decade, year, month)","typeRef":52},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"static","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"CalendarHeader","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/calendar-header/","props":[{"name":"attributes","required":false,"source":"component","typeRef":388},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the header should take the full width of its container","typeRef":341},{"name":"hasNextLevel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next level button should be enabled","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"label","required":false,"source":"component","description":"Label displayed between next and previous buttons","typeRef":263},{"name":"levelControlAriaLabel","required":false,"source":"component","description":"Level control `aria-label`","typeRef":359},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withNext","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next control should be rendered","typeRef":341},{"name":"withPrevious","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether previous control should be rendered","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"Card","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/card/","props":[{"name":"attributes","required":false,"source":"component","typeRef":473},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Card orientation","typeRef":36},{"name":"padding","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value to set padding","typeRef":183},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":["Card.Section"],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Card.Section","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/card/","props":[{"name":"inheritPadding","required":false,"source":"component","literalValues":[false,true],"description":"If set, the section inherits padding from the parent `Card`","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":224},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"CardSection","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/card-section/","props":[{"name":"inheritPadding","required":false,"source":"component","literalValues":[false,true],"description":"If set, the section inherits padding from the parent `Card`","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":224},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Center","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/center/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"inline","required":false,"source":"component","literalValues":[false,true],"description":"If set, `inline-flex` is used instead of `flex`","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"ChartLegend","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/chart-legend/","props":[{"name":"attributes","required":false,"source":"component","typeRef":437},{"name":"centered","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the legend should be centered","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"legendPosition","required":true,"source":"component","literalValues":["bottom","middle","top"],"description":"Position of the legend relative to the chart, used to apply margin on the corresponding side","typeRef":18},{"name":"payload","required":false,"source":"component","description":"Chart data provided by recharts","typeRef":358},{"name":"series","required":false,"source":"component","description":"Data used for labels, only applicable for area charts: AreaChart, LineChart, BarChart","typeRef":150},{"name":"showColor","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether color swatch should be shown next to the label","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"ChartTooltip","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/chart-tooltip/","props":[{"name":"attributes","required":false,"source":"component","typeRef":476},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"label","required":false,"source":"component","description":"Main tooltip label","typeRef":263},{"name":"payload","required":false,"source":"component","description":"Chart data provided by recharts","typeRef":268},{"name":"segmentId","required":false,"source":"component","description":"Segment to display data for, identified by its index in the data array (preferred, isolates duplicate names) or by its name. Only applicable when `type=\"radial\"`. If not set, all data is rendered.","typeRef":365},{"name":"series","required":false,"source":"component","description":"Chart series data, applicable only for `area` type","typeRef":150},{"name":"showColor","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the color swatch should be visible","typeRef":341},{"name":"type","required":false,"source":"component","literalValues":["area","radial","scatter"],"description":"Tooltip type that determines the content and styles, `area` for LineChart, AreaChart and BarChart, `radial` for DonutChart and PieChart","typeRef":11},{"name":"unit","required":false,"source":"component","description":"Data units, provided by parent component","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"CheckIcon","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/check-icon/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"display","required":false,"source":"component","typeRef":365},{"name":"opacity","required":false,"source":"component","typeRef":365},{"name":"radius","required":false,"source":"component","typeRef":365},{"name":"size","required":false,"source":"component","typeRef":365},{"name":"type","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Checkbox","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/checkbox/","props":[{"name":"attributes","required":false,"source":"component","typeRef":373},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts icon color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to set input background color in checked state","typeRef":162},{"name":"description","required":false,"source":"component","description":"Description below the label","typeRef":263},{"name":"error","required":false,"source":"component","description":"Error message below the label","typeRef":263},{"name":"iconColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`.","typeRef":162},{"name":"indeterminate","required":false,"source":"component","literalValues":[false,true],"description":"Indeterminate state of the checkbox. If set, `checked` prop is dismissed.","typeRef":341},{"name":"label","required":false,"source":"component","description":"`label` associated with the checkbox","typeRef":263},{"name":"labelPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the label relative to the input","typeRef":47},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the component","typeRef":182},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","outline"],"typeRef":119},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"If set, applies error styles to the checkbox when `error` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":103}],"blockedProps":[],"subcomponents":["Checkbox.Card","Checkbox.Group","Checkbox.Indicator"],"bind":{"type":"boolean","initialProp":"defaultChecked"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Checkbox.Card","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/checkbox/","props":[{"name":"attributes","required":false,"source":"component","typeRef":390},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value of the checkbox, used with `Checkbox.Group`","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Checkbox.Group","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/checkbox/","props":[{"name":"attributes","required":false,"source":"component","typeRef":426},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":330},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input for uncontrolled forms","typeRef":104},{"name":"hiddenInputValuesSeparator","required":false,"source":"component","description":"Separator for values in the hidden input for uncontrolled forms","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelElement","required":false,"source":"component","literalValues":["div","label"],"description":"Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually.","typeRef":31},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"maxSelectedValues","required":false,"source":"component","description":"Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the `Input.Wrapper`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":330},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element (`Input.Wrapper` component)","typeRef":103}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string[]","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Checkbox.Indicator","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/checkbox/","props":[{"name":"attributes","required":false,"source":"component","typeRef":403},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts icon color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to set input background color in checked state","typeRef":162},{"name":"iconColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast`","typeRef":162},{"name":"indeterminate","required":false,"source":"component","literalValues":[false,true],"description":"Indeterminate state of the checkbox. If set, `checked` prop is ignored.","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the component","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","outline"],"typeRef":118}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"CheckboxCard","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/checkbox-card/","props":[{"name":"attributes","required":false,"source":"component","typeRef":390},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value of the checkbox, used with `Checkbox.Group`","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"CheckboxGroup","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/checkbox-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":426},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":330},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input for uncontrolled forms","typeRef":104},{"name":"hiddenInputValuesSeparator","required":false,"source":"component","description":"Separator for values in the hidden input for uncontrolled forms","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelElement","required":false,"source":"component","literalValues":["div","label"],"description":"Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually.","typeRef":31},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"maxSelectedValues","required":false,"source":"component","description":"Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the `Input.Wrapper`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":330},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element (`Input.Wrapper` component)","typeRef":103}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string[]","initialProp":"defaultValue"},"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"CheckboxIndicator","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/checkbox-indicator/","props":[{"name":"attributes","required":false,"source":"component","typeRef":403},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts icon color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to set input background color in checked state","typeRef":162},{"name":"iconColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast`","typeRef":162},{"name":"indeterminate","required":false,"source":"component","literalValues":[false,true],"description":"Indeterminate state of the checkbox. If set, `checked` prop is ignored.","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the component","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","outline"],"typeRef":118}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Chip","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/chip/","props":[{"name":"attributes","required":false,"source":"component","typeRef":408},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on the chip background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color.","typeRef":162},{"name":"icon","required":false,"source":"component","description":"Any element or component to replace the default icon","typeRef":263},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls various properties related to the component size","typeRef":81},{"name":"type","required":false,"source":"component","literalValues":["checkbox","radio"],"description":"Chip input type","typeRef":25},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","light","outline"],"typeRef":120},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":103}],"blockedProps":[],"subcomponents":["Chip.Group"],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Chip.Group","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/chip/","props":[{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component initial value","typeRef":99},{"name":"multiple","required":false,"source":"component","description":"If set, multiple values can be selected","typeRef":186},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":99}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ChipGroup","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/chip-group/","props":[{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component initial value","typeRef":99},{"name":"multiple","required":false,"source":"component","description":"If set, multiple values can be selected","typeRef":186},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":99}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"CloseButton","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/close-button/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"icon","required":false,"source":"component","description":"React node to replace the default close icon. If set, `iconSize` prop is ignored.","typeRef":263},{"name":"iconSize","required":false,"source":"component","description":"`X` icon `width` and `height`","typeRef":365},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls width and height of the button. Numbers are converted to rem.","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["subtle","transparent"],"typeRef":121}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"CloseIcon","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/close-icon/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"display","required":false,"source":"component","typeRef":365},{"name":"opacity","required":false,"source":"component","typeRef":365},{"name":"radius","required":false,"source":"component","typeRef":365},{"name":"size","required":false,"source":"component","description":"Icon width and height, `var(--icon-size)` by default","typeRef":359},{"name":"type","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Code","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/code/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"block","required":false,"source":"component","literalValues":[false,true],"description":"If set, code is rendered in `pre`","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls `background-color` of the code. By default, calculated based on the color scheme.","typeRef":162},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Collapse","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/collapse/","props":[{"name":"animateOpacity","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the opacity is animated","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"expanded","required":true,"source":"component","literalValues":[false,true],"description":"Expanded state","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation.","typeRef":341},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Collapse orientation","typeRef":36},{"name":"transitionDuration","required":false,"source":"component","description":"Transition duration in ms","typeRef":353},{"name":"transitionTimingFunction","required":false,"source":"component","description":"Transition timing function","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Collapsible","package":"@homarr/widgets","category":"interaction","safety":"allowed","description":"Shows and hides a bounded content section.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"defaultOpen","source":"component","required":false,"typeRef":336},{"name":"title","source":"component","required":true,"typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ColorInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/color-input/","props":[{"name":"attributes","required":false,"source":"component","typeRef":374},{"name":"closeOnColorSwatchClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is closed when one of the color swatches is clicked","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"disallowInput","required":false,"source":"component","literalValues":[false,true],"description":"If input is not allowed, the user can only pick value with color picker and swatches","typeRef":341},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"eyeDropperButtonProps","required":false,"source":"component","description":"Props passed down to the eye dropper button","typeRef":266},{"name":"eyeDropperIcon","required":false,"source":"component","description":"An icon to replace the default eye dropper icon","typeRef":263},{"name":"fixOnBlur","required":false,"source":"component","literalValues":[false,true],"description":"If set, the input value resets to the last known valid value when the input loses focus","typeRef":341},{"name":"format","required":false,"source":"component","literalValues":["hex","hexa","hsl","hsla","rgb","rgba"],"description":"Color format. `hexa`, `rgba`, `hsla` values render alpha channel slider","typeRef":35},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"popoverProps","required":false,"source":"component","description":"Props passed down to the `Popover` component","typeRef":242},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"swatches","required":false,"source":"component","description":"A list of colors used to display swatches list below the color picker","typeRef":368},{"name":"swatchesPerRow","required":false,"source":"component","description":"Number of swatches per row","typeRef":353},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withEyeDropper","required":false,"source":"component","literalValues":[false,true],"description":"If set, the eye dropper button is displayed in the right section","typeRef":341},{"name":"withPicker","required":false,"source":"component","literalValues":[false,true],"description":"If `false`, the component displays only swatches","typeRef":341},{"name":"withPreview","required":false,"source":"component","literalValues":[false,true],"description":"If set, the preview color swatch is displayed in the left section of the input","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ColorPicker","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/color-picker/","props":[{"name":"alphaLabel","required":false,"source":"component","description":"Alpha slider `aria-label`","typeRef":359},{"name":"attributes","required":false,"source":"component","typeRef":379},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":359},{"name":"focusable","required":false,"source":"component","literalValues":[false,true],"description":"If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard","typeRef":341},{"name":"format","required":false,"source":"component","literalValues":["hex","hexa","hsl","hsla","rgb","rgba"],"description":"Color format. `hexa`, `rgba`, `hsla` values render alpha channel slider","typeRef":35},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"If set, the component takes 100% width of its container","typeRef":341},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props spread to the hidden input","typeRef":104},{"name":"hueLabel","required":false,"source":"component","description":"Hue slider `aria-label`","typeRef":359},{"name":"saturationLabel","required":false,"source":"component","description":"Saturation slider `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":182},{"name":"swatches","required":false,"source":"component","description":"A list of colors used to display swatches list below the color picker","typeRef":368},{"name":"swatchesPerRow","required":false,"source":"component","description":"Number of swatches per row","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withPicker","required":false,"source":"component","literalValues":[false,true],"description":"If `false`, the component displays only swatches","typeRef":341}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ColorSchemeScript","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/color-scheme-script/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Writes global document state"},{"name":"ColorSwatch","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/color-swatch/","props":[{"name":"attributes","required":false,"source":"component","typeRef":452},{"name":"color","required":true,"source":"component","description":"Valid CSS color to display","typeRef":359},{"name":"size","required":false,"source":"component","description":"Swatch `width` and `height`, any valid CSS value, numbers are converted to rem.","typeRef":254},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withShadow","required":false,"source":"component","literalValues":[false,true],"description":"If set, the swatch has inner `box-shadow`","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Combobox","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":["Combobox.Chevron","Combobox.ClearButton","Combobox.Dropdown","Combobox.DropdownTarget","Combobox.Empty","Combobox.EventsTarget","Combobox.Footer","Combobox.Group","Combobox.Header","Combobox.HiddenInput","Combobox.Option","Combobox.Options","Combobox.Search","Combobox.Target"],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Chevron","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.ClearButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Dropdown","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.DropdownTarget","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Empty","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.EventsTarget","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Footer","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Group","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Header","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.HiddenInput","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Option","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Options","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Search","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Target","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxChevron","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-chevron/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxClearButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-clear-button/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxDropdown","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-dropdown/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxDropdownTarget","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-dropdown-target/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxEmpty","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-empty/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxEventsTarget","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-events-target/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxFooter","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-footer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxGroup","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-group/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxHeader","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-header/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxHiddenInput","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-hidden-input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxOption","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-option/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxOptions","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-options/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxPopover","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-popover/","props":[],"blockedProps":[],"subcomponents":["ComboboxPopover.Target"],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxPopover.Target","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-popover/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxPopoverTarget","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-popover-target/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxSearch","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-search/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxTarget","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-target/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"CompositeChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/composite-chart/","props":[{"name":"activeDotProps","required":false,"source":"component","description":"Props passed down to all active dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"attributes","required":false,"source":"component","typeRef":372},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"composedChartProps","required":false,"source":"component","description":"Props passed down to recharts `AreaChart` component","typeRef":91},{"name":"connectNulls","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether points with `null` values should be connected","typeRef":341},{"name":"curveType","required":false,"source":"component","literalValues":["bump","linear","monotone","natural","step","stepAfter","stepBefore"],"description":"Type of the curve","typeRef":69},{"name":"data","required":true,"source":"component","description":"Data used to display chart","typeRef":267},{"name":"dataKey","required":true,"source":"component","description":"Key of the `data` object for x-axis values","typeRef":359},{"name":"dotProps","required":false,"source":"component","description":"Props passed down to all dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"gridAxis","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which lines should be displayed in the grid, `'x'` by default","typeRef":61},{"name":"gridColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the grid and cursor lines, by default depends on color scheme","typeRef":162},{"name":"gridProps","required":false,"source":"component","description":"Props passed down to the `CartesianGrid` component","typeRef":189},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to the `Legend` component","typeRef":190},{"name":"maxBarWidth","required":false,"source":"component","description":"Maximum bar width in px","typeRef":353},{"name":"minBarSize","required":false,"source":"component","description":"Sets minimum height of the bar in px","typeRef":353},{"name":"referenceLines","required":false,"source":"component","description":"Reference lines that should be displayed on the chart","typeRef":149},{"name":"rightYAxisLabel","required":false,"source":"component","description":"A label to display next to the right y-axis","typeRef":359},{"name":"rightYAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component rendered on the right side","typeRef":199},{"name":"series","required":true,"source":"component","description":"An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array.","typeRef":155},{"name":"strokeWidth","required":false,"source":"component","description":"Stroke width for the chart lines","typeRef":353},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the text displayed inside the chart, `'dimmed'` by default","typeRef":162},{"name":"tickLine","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which axis should have tick line, `'y'` by default","typeRef":61},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip position animation duration in ms, `0` by default","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to the `Tooltip` component","typeRef":197},{"name":"unit","required":false,"source":"component","description":"Unit displayed next to each tick in y-axis","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withBarValueLabel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether a label with bar value should be displayed on top of each bar","typeRef":341},{"name":"withDots","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dots should be displayed","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart legend should be displayed, `false` by default","typeRef":341},{"name":"withPointLabels","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether each point should have associated label","typeRef":341},{"name":"withRightYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart tooltip should be displayed, `true` by default","typeRef":341},{"name":"withXAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether x-axis should be displayed, `true` by default","typeRef":341},{"name":"withYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether y-axis should be displayed, `true` by default","typeRef":341},{"name":"xAxisLabel","required":false,"source":"component","description":"A label to display below the x-axis","typeRef":359},{"name":"xAxisProps","required":false,"source":"component","description":"Props passed down to the `XAxis` recharts component","typeRef":198},{"name":"yAxisLabel","required":false,"source":"component","description":"A label to display next to the y-axis","typeRef":359},{"name":"yAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component","typeRef":199}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Container","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/container/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"fluid","required":false,"source":"component","literalValues":[false,true],"description":"If set, the container takes 100% width of its parent and `size` prop is ignored.","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"`max-width` of the container, value is not responsive – it is the same for all screen sizes. Numbers are converted to rem. Ignored when `fluid` prop is set.","typeRef":355},{"name":"strategy","required":false,"source":"component","literalValues":["block","grid"],"description":"Centering strategy","typeRef":14},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"CopyButton","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/copy-button/","props":[{"name":"timeout","required":false,"source":"component","description":"Copied status timeout in ms","typeRef":353},{"name":"value","required":true,"source":"component","description":"Value that is copied to the clipboard when the button is clicked","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"DataList","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/data-list/","props":[{"name":"attributes","required":false,"source":"component","typeRef":461},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value to set gap between items","typeRef":183},{"name":"labelWidth","required":false,"source":"component","description":"Controls min-width of the label (dt) element, any valid CSS value","typeRef":251},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Controls arrangement of label and value within each item. `horizontal` renders label and value side by side, `vertical` stacks label on top of value","typeRef":36},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size` and `line-height`","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withDivider","required":false,"source":"component","literalValues":[false,true],"description":"Adds border between items","typeRef":341}],"blockedProps":[],"subcomponents":["DataList.Item","DataList.ItemLabel","DataList.ItemValue"],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"DataList.Item","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/data-list/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":217},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"DataList.ItemLabel","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/data-list/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":218},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"DataList.ItemValue","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/data-list/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":219},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"DataListItem","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/data-list-item/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":217},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"DataListItemLabel","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/data-list-item-label/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":218},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"DataListItemValue","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/data-list-item-value/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":219},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"DateInput","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/date-input/","props":[{"name":"allowDeselect","required":false,"source":"component","literalValues":[false,true],"description":"If set, the value can be deselected by deleting everything from the input or by clicking the selected date in the dropdown. By default, `true` if `clearable` prop is set, `false` otherwise.","typeRef":341},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":413},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":258},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set.","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level (uncontrolled)","typeRef":52},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":160},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fixOnBlur","required":false,"source":"component","literalValues":[false,true],"description":"If set to `false`, invalid user input is preserved and is not corrected on blur","typeRef":341},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"hasNextLevel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next level button should be enabled","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level (controlled)","typeRef":52},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Max level that user can go up to","typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"popoverProps","required":false,"source":"component","description":"Props passed down to the `Popover` component","typeRef":204},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":156},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":160},{"name":"valueFormat","required":false,"source":"component","description":"`dayjs` format to display input value, `\"MMMM D, YYYY\"` by default","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withNext","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next control should be rendered","typeRef":341},{"name":"withPrevious","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether previous control should be rendered","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"withTime","required":false,"source":"component","literalValues":[false,true],"description":"If set to `true`, the time part of the value is preserved. Set this to `true` when `valueFormat` includes time (e.g. `\"YYYY-MM-DD HH:mm\"`).","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"DatePicker","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/date-picker/","props":[{"name":"allowDeselect","required":false,"source":"component","description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\"","typeRef":106},{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":446},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level (uncontrolled)","typeRef":52},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":159},{"name":"enableKeyboardNavigation","required":false,"source":"component","literalValues":[false,true],"description":"Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view)","typeRef":341},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level (controlled)","typeRef":52},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":157},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"type","required":false,"source":"component","literalValues":["default","multiple","range"],"description":"Picker type: range, multiple or default","typeRef":326},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value for controlled component","typeRef":159},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"DatePickerInput","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/date-picker-input/","props":[{"name":"allowDeselect","required":false,"source":"component","description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\"","typeRef":106},{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":414},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":258},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set.","typeRef":341},{"name":"closeOnChange","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the dropdown is closed when date is selected, not applicable with `type=\"multiple\"`","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level (uncontrolled)","typeRef":52},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":159},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"enableKeyboardNavigation","required":false,"source":"component","literalValues":[false,true],"description":"Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view)","typeRef":341},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"labelSeparator","required":false,"source":"component","description":"Separator between range value","typeRef":359},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level (controlled)","typeRef":52},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"popoverProps","required":false,"source":"component","description":"Props passed down to `Popover` component","typeRef":204},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":157},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"sortDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dates values should be sorted before `onChange` call, only applicable with type=\"multiple\"","typeRef":341},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["default","multiple","range"],"description":"Picker type: range, multiple or default","typeRef":158},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value for controlled component","typeRef":159},{"name":"valueFormat","required":false,"source":"component","description":"`dayjs` format for input value","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[{"name":"dropdownType","reason":"Modal picker mode escapes the widget overlay boundary"},{"name":"modalProps","reason":"Modal picker configuration escapes the widget overlay boundary"}],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"DateTimePicker","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/date-time-picker/","props":[{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":415},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":258},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set.","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level in uncontrolled mode","typeRef":52},{"name":"defaultTimeValue","required":false,"source":"component","description":"Default time value in HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected.","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":159},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"endTimePickerProps","required":false,"source":"component","description":"Props passed down to the end time `TimePicker` component in range mode","typeRef":196},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"labelSeparator","required":false,"source":"component","description":"Separator between range values","typeRef":359},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level displayed in controlled mode","typeRef":52},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Max level that user can go up to","typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"popoverProps","required":false,"source":"component","description":"Props passed down to `Popover` component","typeRef":204},{"name":"presets","required":false,"source":"component","description":"Presets values","typeRef":157},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"sortDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dates values should be sorted before `onChange` call, only applicable with type=\"multiple\"","typeRef":341},{"name":"submitButtonProps","required":false,"source":"component","description":"Props passed down to the submit button","typeRef":90},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"timePickerProps","required":false,"source":"component","description":"Props passed down to `TimePicker` component","typeRef":196},{"name":"type","required":false,"source":"component","description":"Picker type: range or default","typeRef":325},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":159},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSeconds","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the seconds input should be displayed","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[{"name":"dropdownType","reason":"Modal picker mode escapes the widget overlay boundary"},{"name":"modalProps","reason":"Modal picker configuration escapes the widget overlay boundary"}],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"DatesProvider","package":"@mantine/dates","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/dates/dates-provider/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Replaces a Homarr-owned provider boundary"},{"name":"Day","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/day/","props":[{"name":"attributes","required":false,"source":"component","typeRef":398},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"date","required":true,"source":"component","description":"Date that is displayed in `YYYY-MM-DD` format","typeRef":359},{"name":"firstInRange","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the day is first in range selection","typeRef":341},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the day should take the full width of its cell","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"inRange","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the day is selected in range","typeRef":341},{"name":"lastInRange","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the day is last in range selection","typeRef":341},{"name":"outside","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the day is outside of the current month","typeRef":341},{"name":"selected","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the day is selected","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Control width and height of the day","typeRef":81},{"name":"static","required":false,"source":"component","literalValues":[false,true],"description":"Determines which element is used as root, `'button'` by default, `'div'` if static prop is set","typeRef":341},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the day is considered to be a weekend","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"DecadeLevel","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/decade-level/","props":[{"name":"attributes","required":false,"source":"component","typeRef":384},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"decade","required":true,"source":"component","description":"Displayed decade","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"levelControlAriaLabel","required":false,"source":"component","description":"Level control `aria-label`","typeRef":359},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"styles","required":false,"source":"component","typeRef":238},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withNext","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next control should be rendered","typeRef":341},{"name":"withPrevious","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether previous control should be rendered","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"DecadeLevelGroup","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/decade-level-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":386},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"decade","required":true,"source":"component","description":"Displayed decade","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns to display next to each other","typeRef":353},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"styles","required":false,"source":"component","typeRef":238},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"Dialog","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/dialog/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes the widget layout and focus boundary"},{"name":"DirectionProvider","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/direction-provider/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Replaces a Homarr-owned provider boundary"},{"name":"Divider","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/divider/","props":[{"name":"attributes","required":false,"source":"component","typeRef":429},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color value","typeRef":162},{"name":"label","required":false,"source":"component","description":"Divider label, visible only with `orientation=\"horizontal\"`","typeRef":263},{"name":"labelPosition","required":false,"source":"component","literalValues":["center","left","right"],"description":"Label position","typeRef":22},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Divider orientation","typeRef":36},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls width/height (depends on orientation)","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["dashed","dotted","solid"],"typeRef":122}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"DonutChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/donut-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":422},{"name":"chartLabel","required":false,"source":"component","description":"Chart label, displayed in the center of the chart","typeRef":365},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data used to render chart","typeRef":165},{"name":"endAngle","required":false,"source":"component","description":"Controls angle at which charts ends. Set to `0` to render the chart as semicircle.","typeRef":353},{"name":"labelColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls text color of all labels, by default depends on color scheme","typeRef":162},{"name":"labelsType","required":false,"source":"component","literalValues":["name","percent","value"],"description":"Type of labels to display, `'value'` by default","typeRef":77},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to recharts `Legend` component","typeRef":190},{"name":"paddingAngle","required":false,"source":"component","description":"Controls padding between segments","typeRef":353},{"name":"pieChartProps","required":false,"source":"component","description":"Props passed down to recharts `PieChart` component","typeRef":101},{"name":"pieProps","required":false,"source":"component","description":"Props passed down to recharts `Pie` component","typeRef":203},{"name":"size","required":false,"source":"component","description":"Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`.","typeRef":353},{"name":"startAngle","required":false,"source":"component","description":"Controls angle at which chart starts. Set to `180` to render the chart as semicircle.","typeRef":353},{"name":"strokeColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the segments stroke, by default depends on color scheme","typeRef":162},{"name":"strokeWidth","required":false,"source":"component","description":"Controls width of segments stroke","typeRef":353},{"name":"thickness","required":false,"source":"component","description":"Controls thickness of the chart segments","typeRef":353},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip animation duration in ms","typeRef":353},{"name":"tooltipDataSource","required":false,"source":"component","literalValues":["all","segment"],"description":"Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment.","typeRef":9},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to `Tooltip` recharts component","typeRef":197},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withLabels","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether each segment should have associated label","typeRef":341},{"name":"withLabelsLine","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether segments labels should have lines that connect the segment with the label","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the legend should be displayed","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the tooltip should be displayed when one of the section is hovered","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Drawer","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":["Drawer.Body","Drawer.CloseButton","Drawer.Content","Drawer.Header","Drawer.Overlay","Drawer.Root","Drawer.Stack","Drawer.Title"],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.Body","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.CloseButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.Content","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.Header","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.Overlay","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.Root","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.Stack","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.Title","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerBody","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-body/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerCloseButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-close-button/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerContent","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-content/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerHeader","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-header/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerOverlay","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-overlay/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerRoot","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-root/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerStack","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-stack/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerTitle","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-title/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"EmptyState","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","left","right"],"description":"Content alignment. `center` stacks the content in a centered column, `left`/`right` place the indicator on the side with the content next to it","typeRef":22},{"name":"attributes","required":false,"source":"component","typeRef":380},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, used by `filled` and `light` variants","typeRef":162},{"name":"description","required":false,"source":"component","description":"Description content, rendered inside `EmptyState.Description`","typeRef":263},{"name":"icon","required":false,"source":"component","description":"Icon or illustration, rendered inside `EmptyState.Indicator`","typeRef":263},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls indicator size, gap between elements and font sizes of title and description","typeRef":81},{"name":"title","required":false,"source":"component","description":"Title content, rendered inside `EmptyState.Title`","typeRef":263},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","light"],"description":"Controls the indicator appearance. `filled` and `light` display a colored circular background behind the icon. If not set, the icon is displayed with dimmed color","typeRef":33},{"name":"withIndicatorBackground","required":false,"source":"component","literalValues":[false,true],"description":"If set, a neutral circular background is displayed behind the indicator. Setting `variant` always displays a colored background regardless of this prop","typeRef":341}],"blockedProps":[],"subcomponents":["EmptyState.Actions","EmptyState.Description","EmptyState.Indicator","EmptyState.Title"],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyState.Actions","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":209},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyState.Description","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":212},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyState.Indicator","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":216},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyState.Title","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"order","required":false,"source":"component","literalValues":[1,2,3,4,5,6],"description":"Heading order, renders the title as `h1`–`h6` element. By default, the title is rendered as a `div` without semantic heading level","typeRef":137},{"name":"styles","required":false,"source":"component","typeRef":225},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyStateActions","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state-actions/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":209},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyStateDescription","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state-description/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":212},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyStateIndicator","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state-indicator/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":216},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyStateTitle","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state-title/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"order","required":false,"source":"component","literalValues":[1,2,3,4,5,6],"description":"Heading order, renders the title as `h1`–`h6` element. By default, the title is rendered as a `div` without semantic heading level","typeRef":137},{"name":"styles","required":false,"source":"component","typeRef":225},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Fieldset","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/fieldset/","props":[{"name":"attributes","required":false,"source":"component","typeRef":443},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"legend","required":false,"source":"component","description":"Fieldset legend","typeRef":263},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":123}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"FileButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/file-button/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Requests local file-system access"},{"name":"FileInput","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/file-input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Requests local file-system access"},{"name":"FlatTreeNode","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/flat-tree-node/","props":[{"name":"checkOnSpace","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node is checked on space key press","typeRef":341},{"name":"expandOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node with children is expanded on click","typeRef":341},{"name":"expandOnSpace","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node with children is expanded on space key press","typeRef":341},{"name":"expanded","required":true,"source":"component","literalValues":[false,true],"description":"Whether the node is expanded","typeRef":341},{"name":"hasChildren","required":true,"source":"component","literalValues":[false,true],"description":"Whether the node has children","typeRef":341},{"name":"level","required":true,"source":"component","description":"Nesting level of the node, starts at 1","typeRef":353},{"name":"linesPath","required":false,"source":"component","description":"Line state per ancestor + own level, computed by `flattenTreeData`. When provided and the tree root has `data-with-lines`, connector lines are rendered.","typeRef":166},{"name":"node","required":true,"source":"component","description":"Node data from tree data","typeRef":320},{"name":"parent","required":true,"source":"component","description":"Value of the parent node, `null` for root nodes","typeRef":352},{"name":"selectOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node is selected on click","typeRef":341},{"name":"style","required":false,"source":"component","description":"Style to apply to the root element, used for virtualizer positioning","typeRef":257},{"name":"tree","required":true,"source":"component","description":"Tree controller instance, return value of `useTree` hook","typeRef":327}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Flex","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/flex/","props":[{"name":"align","required":false,"source":"component","literalValues":["-moz-initial","anchor-center","baseline","center","end","flex-end","flex-start","inherit","initial","normal","revert","revert-layer","self-end","self-start","start","stretch","unset"],"description":"`align-items` CSS property","typeRef":285},{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnGap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"`column-gap` CSS property","typeRef":284},{"name":"direction","required":false,"source":"component","literalValues":["-moz-initial","column","column-reverse","inherit","initial","revert","revert-layer","row","row-reverse","unset"],"description":"`flex-direction` CSS property","typeRef":294},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"`gap` CSS property","typeRef":284},{"name":"justify","required":false,"source":"component","literalValues":["-moz-initial","center","end","flex-end","flex-start","inherit","initial","left","normal","revert","revert-layer","right","space-around","space-between","space-evenly","start","stretch","unset"],"description":"`justify-content` CSS property","typeRef":299},{"name":"rowGap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"`row-gap` CSS property","typeRef":284},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"wrap","required":false,"source":"component","literalValues":["-moz-initial","inherit","initial","nowrap","revert","revert-layer","unset","wrap","wrap-reverse"],"description":"`flex-wrap` CSS property","typeRef":295}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"FloatingArrow","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/floating-arrow/","props":[{"name":"arrowOffset","required":true,"source":"component","typeRef":353},{"name":"arrowPosition","required":true,"source":"component","literalValues":["center","merge","side"],"typeRef":24},{"name":"arrowRadius","required":true,"source":"component","typeRef":353},{"name":"arrowSize","required":true,"source":"component","typeRef":353},{"name":"arrowX","required":false,"source":"component","typeRef":353},{"name":"arrowY","required":false,"source":"component","typeRef":353},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"position","required":true,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"typeRef":48},{"name":"visible","required":false,"source":"component","literalValues":[false,true],"typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"FloatingIndicator","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/floating-indicator/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"displayAfterTransitionEnd","required":false,"source":"component","literalValues":[false,true],"description":"Controls whether the indicator should be hidden initially and displayed after the parent's transition ends. Set to `true` when the parent container has CSS transitions (e.g., `transform: scale()`) to prevent the indicator from appearing at the wrong position during the parent's animation.","typeRef":341},{"name":"parent","required":false,"source":"component","description":"Parent container element that must have `position: relative`. The indicator's position is calculated relative to this element.","typeRef":169},{"name":"target","required":false,"source":"component","description":"Target element over which the indicator is displayed. The indicator will be positioned to match the target's size and position.","typeRef":169},{"name":"transitionDuration","required":false,"source":"component","description":"Transition duration in ms","typeRef":365},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"FloatingWindow","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/floating-window/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Creates a separate browser window"},{"name":"FocusTrap","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/focus-trap/","props":[],"blockedProps":[],"subcomponents":["FocusTrap.InitialFocus"],"accessibilityRequirements":[],"deniedReason":"Can capture focus outside the widget interaction flow"},{"name":"FocusTrap.InitialFocus","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/focus-trap/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Can capture focus outside the widget interaction flow"},{"name":"FocusTrapInitialFocus","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/focus-trap-initial-focus/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Can capture focus outside the widget interaction flow"},{"name":"FunnelChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/funnel-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":441},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data used to render chart","typeRef":167},{"name":"funnelChartProps","required":false,"source":"component","description":"Props passed down to recharts `FunnelChart` component","typeRef":91},{"name":"funnelProps","required":false,"source":"component","description":"Props passed down to recharts `Pie` component","typeRef":202},{"name":"labelColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls text color of all labels","typeRef":162},{"name":"labelsPosition","required":false,"source":"component","literalValues":["inside","left","right"],"description":"Controls labels position relative to the segment","typeRef":49},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to recharts `Legend` component","typeRef":190},{"name":"size","required":false,"source":"component","description":"Controls chart width and height","typeRef":353},{"name":"strokeColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the segments stroke, by default depends on color scheme","typeRef":162},{"name":"strokeWidth","required":false,"source":"component","description":"Controls width of segments stroke","typeRef":353},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip animation duration in ms","typeRef":353},{"name":"tooltipDataSource","required":false,"source":"component","literalValues":["all","segment"],"description":"Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment.","typeRef":9},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to `Tooltip` recharts component","typeRef":197},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withLabels","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether each segment should have associated label","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the legend should be displayed","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the tooltip should be displayed when a section is hovered","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Grid","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/grid/","props":[{"name":"align","required":false,"source":"component","literalValues":["-moz-initial","anchor-center","baseline","center","end","flex-end","flex-start","inherit","initial","normal","revert","revert-layer","self-end","self-start","start","stretch","unset"],"description":"Sets `align-items`","typeRef":244},{"name":"attributes","required":false,"source":"component","typeRef":392},{"name":"breakpoints","required":false,"source":"component","description":"Breakpoints values, only used with `type=\"container\"`","typeRef":168},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnGap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Column gap, overrides `gap` for horizontal spacing","typeRef":284},{"name":"columns","required":false,"source":"component","description":"Number of columns in each row","typeRef":353},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Gap between columns and rows, key of `theme.spacing` or any valid CSS value","typeRef":284},{"name":"grow","required":false,"source":"component","literalValues":[false,true],"description":"If set, columns in the last row expand to fill all available space","typeRef":341},{"name":"justify","required":false,"source":"component","literalValues":["-moz-initial","center","end","flex-end","flex-start","inherit","initial","left","normal","revert","revert-layer","right","space-around","space-between","space-evenly","start","stretch","unset"],"description":"Sets `justify-content`","typeRef":248},{"name":"overflow","required":false,"source":"component","literalValues":["-moz-hidden-unscrollable","-moz-initial","auto","clip","hidden","inherit","initial","overlay","revert","revert-layer","scroll","unset","visible"],"description":"Sets `overflow` CSS property on the root element","typeRef":252},{"name":"rowGap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Row gap, overrides `gap` for vertical spacing","typeRef":284},{"name":"type","required":false,"source":"component","literalValues":["container","media"],"description":"Type of queries used for responsive styles","typeRef":51},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":["Grid.Col"],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Grid.Col","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/grid/","props":[{"name":"align","required":false,"source":"component","literalValues":["-moz-initial","anchor-center","auto","baseline","center","end","flex-end","flex-start","inherit","initial","normal","revert","revert-layer","self-end","self-start","start","stretch","unset"],"description":"Vertical alignment of the column, controls `align-self` CSS property","typeRef":286},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"offset","required":false,"source":"component","description":"Column start offset – number of empty columns before this column","typeRef":312},{"name":"order","required":false,"source":"component","description":"Column order, use to reorder columns at different viewport sizes","typeRef":312},{"name":"span","required":false,"source":"component","literalValues":["auto","content"],"description":"Column span","typeRef":282},{"name":"styles","required":false,"source":"component","typeRef":210},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"GridCol","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/grid-col/","props":[{"name":"align","required":false,"source":"component","literalValues":["-moz-initial","anchor-center","auto","baseline","center","end","flex-end","flex-start","inherit","initial","normal","revert","revert-layer","self-end","self-start","start","stretch","unset"],"description":"Vertical alignment of the column, controls `align-self` CSS property","typeRef":286},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"offset","required":false,"source":"component","description":"Column start offset – number of empty columns before this column","typeRef":312},{"name":"order","required":false,"source":"component","description":"Column order, use to reorder columns at different viewport sizes","typeRef":312},{"name":"span","required":false,"source":"component","literalValues":["auto","content"],"description":"Column span","typeRef":282},{"name":"styles","required":false,"source":"component","typeRef":210},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Group","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/group/","props":[{"name":"align","required":false,"source":"component","literalValues":["-moz-initial","anchor-center","baseline","center","end","flex-end","flex-start","inherit","initial","normal","revert","revert-layer","self-end","self-start","start","stretch","unset"],"description":"Controls `align-items` CSS property","typeRef":244},{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem","typeRef":183},{"name":"grow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether each child element should have `flex-grow: 1` style","typeRef":341},{"name":"justify","required":false,"source":"component","literalValues":["-moz-initial","center","end","flex-end","flex-start","inherit","initial","left","normal","revert","revert-layer","right","space-around","space-between","space-evenly","start","stretch","unset"],"description":"Controls `justify-content` CSS property","typeRef":248},{"name":"preventGrowOverflow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether children should take only dedicated amount of space (`max-width` style is set based on the number of children)","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"wrap","required":false,"source":"component","literalValues":["-moz-initial","inherit","initial","nowrap","revert","revert-layer","unset","wrap","wrap-reverse"],"description":"Controls `flex-wrap` CSS property","typeRef":5}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"HeadlessMantineProvider","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/headless-mantine-provider/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Replaces a Homarr-owned provider boundary"},{"name":"Heatmap","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/heatmap/","props":[{"name":"attributes","required":false,"source":"component","typeRef":439},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"colors","required":false,"source":"component","description":"Colors array, used to calculate color for each value, by default 4 shades of green colors are used","typeRef":368},{"name":"data","required":true,"source":"component","description":"Heatmap data, key is date in `YYYY-MM-DD` format (interpreted as a UTC calendar day)","typeRef":269},{"name":"domain","required":false,"source":"component","description":"Heatmap domain, array of 2 numbers, min and max values, calculated from data by default","typeRef":334},{"name":"endDate","required":false,"source":"component","description":"Heatmap end date. Current date by default. Date is normalized to UTC midnight of the intended calendar day.","typeRef":362},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"First day of week, 0 – Sunday, 1 – Monday.","typeRef":134},{"name":"fontSize","required":false,"source":"component","description":"Font size of month and weekday labels","typeRef":353},{"name":"gap","required":false,"source":"component","description":"Gap between rects in px","typeRef":353},{"name":"legendLabels","required":false,"source":"component","description":"Legend labels, array of 2 elements: [min label, max label]","typeRef":335},{"name":"monthLabels","required":false,"source":"component","description":"Month labels, array of 12 elements, can be used for localization","typeRef":368},{"name":"monthsLabelsHeight","required":false,"source":"component","description":"Height of month labels row","typeRef":353},{"name":"radius","required":false,"source":"component","typeRef":365},{"name":"rectRadius","required":false,"source":"component","description":"Rect radius in px","typeRef":353},{"name":"rectSize","required":false,"source":"component","description":"Size of day rect in px","typeRef":353},{"name":"splitMonths","required":false,"source":"component","literalValues":[false,true],"description":"If set, inserts a spacer column between months","typeRef":341},{"name":"startDate","required":false,"source":"component","description":"Heatmap start date. Current date - 1 year by default. Date is normalized to UTC midnight of the intended calendar day.","typeRef":362},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to the `Tooltip.Floating` component","typeRef":239},{"name":"type","required":false,"source":"component","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekdayLabels","required":false,"source":"component","description":"Weekday labels, array of 7 elements, can be used for localization","typeRef":368},{"name":"weekdaysLabelsWidth","required":false,"source":"component","description":"Width of weekday labels column","typeRef":353},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"If set, legend with color levels is displayed below the heatmap","typeRef":341},{"name":"withMonthLabels","required":false,"source":"component","literalValues":[false,true],"description":"If set, month labels are displayed","typeRef":341},{"name":"withOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"If set, trailing dates that do not fall into the given `startDate` – `endDate` range are displayed to fill empty space.","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"If set, tooltip is displayed on rect hover","typeRef":341},{"name":"withWeekdayLabels","required":false,"source":"component","literalValues":[false,true],"description":"If set, weekday labels are displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"HiddenDatesInput","package":"@mantine/dates","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/dates/hidden-dates-input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Internal date-input primitive"},{"name":"Highlight","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/highlight/","props":[{"name":"accentInsensitive","required":false,"source":"component","literalValues":[false,true],"description":"Perform accent-insensitive matching. When enabled cafe will match cafe, café, cafè, etc.","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"caseInsensitive","required":false,"source":"component","literalValues":[false,true],"description":"Perform case-insensitive matching.","typeRef":341},{"name":"color","required":false,"source":"component","description":"Default background color for all highlighted text. Key of `theme.colors` or any valid CSS color, passed to `Mark` component. Can be overridden per term when using HighlightTerm objects.","typeRef":360},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration, ignored when `variant` is not `gradient`","typeRef":179},{"name":"highlight","required":true,"source":"component","description":"Substring(s) to highlight in `children`. Can be: - string: single term - string[]: multiple terms with same color - HighlightTerm[]: multiple terms with custom colors per term - Matching is case-insensitive and accent-insensitive by default, use `caseInsensitive` and `accentInsensitive` props to control this behavior - Regex special characters are automatically escaped - When multiple substrings are provided, longer matches take precedence - Empty strings and whitespace-only strings are ignored","typeRef":367},{"name":"inherit","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether font properties should be inherited from the parent","typeRef":341},{"name":"inline","required":false,"source":"component","literalValues":[false,true],"description":"Sets `line-height` to 1 for centering","typeRef":341},{"name":"lineClamp","required":false,"source":"component","description":"Number of lines after which Text will be truncated","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size` and `line-height`","typeRef":82},{"name":"span","required":false,"source":"component","literalValues":[false,true],"description":"Shorthand for `component=\"span\"`","typeRef":341},{"name":"textWrap","required":false,"source":"component","literalValues":["balance","nowrap","pretty","stable","wrap"],"description":"Controls `text-wrap` CSS property","typeRef":79},{"name":"truncate","required":false,"source":"component","literalValues":["end",false,"start",true],"description":"Side on which Text must be truncated, if `true`, text is truncated from the start","typeRef":344},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["gradient","text"],"typeRef":131},{"name":"wholeWord","required":false,"source":"component","literalValues":[false,true],"description":"Only match whole words (adds word boundaries to regex). When enabled, 'the' will not match 'there'.","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"HoverCard","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hover-card/","props":[{"name":"arrowOffset","required":false,"source":"component","description":"Arrow offset in px","typeRef":353},{"name":"arrowPosition","required":false,"source":"component","literalValues":["center","merge","side"],"description":"Arrow position","typeRef":24},{"name":"arrowRadius","required":false,"source":"component","description":"Arrow `border-radius` in px","typeRef":353},{"name":"arrowSize","required":false,"source":"component","description":"Arrow size in px","typeRef":353},{"name":"attributes","required":false,"source":"component","typeRef":399},{"name":"clickOutsideEvents","required":false,"source":"component","description":"Events that trigger outside clicks","typeRef":368},{"name":"closeDelay","required":false,"source":"component","description":"Delay in ms before the dropdown closes after mouse leaves the target or dropdown. Overridden by HoverCard.Group delay if used within a group.","typeRef":353},{"name":"closeOnClickOutside","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dropdown should be closed on outside clicks","typeRef":341},{"name":"closeOnEscape","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dropdown should be closed when `Escape` key is pressed","typeRef":341},{"name":"defaultOpened","required":false,"source":"component","literalValues":[false,true],"description":"Initial opened state for uncontrolled component","typeRef":341},{"name":"floatingStrategy","required":false,"source":"component","literalValues":["absolute","fixed"],"description":"Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy)","typeRef":34},{"name":"hideDetached","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen","typeRef":341},{"name":"initiallyOpened","required":false,"source":"component","literalValues":[false,true],"description":"Initial opened state","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead.","typeRef":341},{"name":"keepMountedMode","required":false,"source":"component","literalValues":["activity","display-none"],"description":"Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles","typeRef":7},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling","typeRef":241},{"name":"offset","required":false,"source":"component","description":"Offset of the dropdown element","typeRef":354},{"name":"openDelay","required":false,"source":"component","description":"Delay in ms before the dropdown opens after mouse enters the target. Overridden by HoverCard.Group delay if used within a group.","typeRef":353},{"name":"overlayProps","required":false,"source":"component","description":"Props passed down to `Overlay` component","typeRef":100},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Dropdown position relative to the target element","typeRef":48},{"name":"preventPositionChangeWhenVisible","required":false,"source":"component","literalValues":[false,true],"description":"If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change.","typeRef":341},{"name":"returnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be automatically returned to control when dropdown closes","typeRef":341},{"name":"transitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component. Use to configure duration and animation type.","typeRef":208},{"name":"trapFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be trapped within dropdown","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"width","required":false,"source":"component","description":"Dropdown width, or `'target'` to make dropdown width the same as target element","typeRef":243},{"name":"withArrow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether component should have an arrow","typeRef":341},{"name":"withOverlay","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the overlay should be displayed when the dropdown is opened","typeRef":341},{"name":"withRoles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dropdown and target elements should have accessible roles","typeRef":341}],"blockedProps":[],"subcomponents":["HoverCard.Dropdown","HoverCard.Group","HoverCard.Target"],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"HoverCard.Dropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hover-card/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":234},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"HoverCard.Group","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hover-card/","props":[{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms","typeRef":353},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"HoverCard.Target","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hover-card/","props":[{"name":"eventPropsWrapperName","required":false,"source":"component","description":"Name of the prop to wrap event listeners in. Use when the target component expects event listeners in a nested object. For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`.","typeRef":359},{"name":"popupType","required":false,"source":"component","description":"Popup accessible type","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"HoverCardDropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hover-card-dropdown/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":234},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"HoverCardGroup","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hover-card-group/","props":[{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms","typeRef":353},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"HoverCardTarget","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hover-card-target/","props":[{"name":"eventPropsWrapperName","required":false,"source":"component","description":"Name of the prop to wrap event listeners in. Use when the target component expects event listeners in a nested object. For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`.","typeRef":359},{"name":"popupType","required":false,"source":"component","description":"Popup accessible type","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"HueSlider","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hue-slider/","props":[{"name":"attributes","required":false,"source":"component","typeRef":474},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"focusable","required":false,"source":"component","literalValues":[false,true],"description":"If set, slider thumb can be focused","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Slider size","typeRef":182},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":true,"source":"component","description":"Controlled component value","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Image","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/image/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"fallbackSrc","required":false,"source":"component","description":"Image url used as a fallback if the image cannot be loaded","typeRef":359},{"name":"fit","required":false,"source":"component","literalValues":["-moz-initial","contain","cover","fill","inherit","initial","none","revert","revert-layer","scale-down","unset"],"description":"Controls `object-fit` style","typeRef":4},{"name":"src","required":false,"source":"component","description":"Image url","typeRef":370},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Indicator","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/indicator/","props":[{"name":"attributes","required":false,"source":"component","typeRef":460},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color value","typeRef":162},{"name":"inline","required":false,"source":"component","literalValues":[false,true],"description":"Changes container display from block to inline-block, use when wrapping elements with fixed width","typeRef":341},{"name":"label","required":false,"source":"component","description":"Label displayed inside the indicator, for example, notification count","typeRef":263},{"name":"maxValue","required":false,"source":"component","description":"Maximum value to display. If label is a number greater than this value, it will be displayed as `{maxValue}+`","typeRef":353},{"name":"offset","required":false,"source":"component","description":"Distance in pixels to offset the indicator from its default position, useful for elements with border-radius. Can be a number for uniform offset or an object with `x` and `y` properties for separate horizontal and vertical offsets","typeRef":357},{"name":"position","required":false,"source":"component","literalValues":["bottom-center","bottom-end","bottom-start","middle-center","middle-end","middle-start","top-center","top-end","top-start"],"description":"Indicator position relative to the target element","typeRef":19},{"name":"processing","required":false,"source":"component","literalValues":[false,true],"description":"If set, the indicator has processing animation","typeRef":341},{"name":"showZero","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether indicator with label `0` should be displayed","typeRef":341},{"name":"size","required":false,"source":"component","description":"Indicator width and height","typeRef":365},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"InlineDateTimePicker","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/inline-date-time-picker/","props":[{"name":"allowDeselect","required":false,"source":"component","description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\"","typeRef":106},{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":465},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level (uncontrolled)","typeRef":52},{"name":"defaultTimeValue","required":false,"source":"component","description":"Default time value in `HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected.","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":159},{"name":"enableKeyboardNavigation","required":false,"source":"component","literalValues":[false,true],"description":"Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view)","typeRef":341},{"name":"endTimePickerProps","required":false,"source":"component","description":"Props passed down to the end time `TimePicker` component in range mode","typeRef":196},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"labelSeparator","required":false,"source":"component","description":"Separator between range values","typeRef":359},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level (controlled)","typeRef":52},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Max date","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Min date","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":157},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"submitButtonProps","required":false,"source":"component","description":"Props passed down to the submit button","typeRef":90},{"name":"timePickerProps","required":false,"source":"component","description":"Props passed down to `TimePicker` component","typeRef":196},{"name":"type","required":false,"source":"component","literalValues":["default","multiple","range"],"description":"Picker type: range, multiple or default","typeRef":158},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value for controlled component","typeRef":159},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withSeconds","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the seconds input should be displayed","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"InlineStyles","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/inline-styles/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Writes unscoped style rules"},{"name":"Input","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":["Input.ClearButton","Input.Description","Input.Error","Input.Label","Input.Placeholder","Input.Success","Input.Wrapper"],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Input.ClearButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Input.Description","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Input.Error","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Input.Label","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Input.Placeholder","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Input.Success","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Input.Wrapper","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputBase","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-base/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputClearButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-clear-button/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputClearSection","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-clear-section/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputDescription","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-description/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputError","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-error/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputLabel","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-label/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputPlaceholder","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-placeholder/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputSuccess","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-success/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputWrapper","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-wrapper/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"JsonInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/json-input/","props":[{"name":"attributes","required":false,"source":"component","typeRef":416},{"name":"autoComplete","required":false,"source":"component","typeRef":359},{"name":"autosize","required":false,"source":"component","literalValues":[false,true],"description":"If set, enables textarea height growing with its content","typeRef":341},{"name":"bottomSection","required":false,"source":"component","description":"Content rendered at the bottom of the input, inside the border","typeRef":263},{"name":"bottomSectionProps","required":false,"source":"component","description":"Props passed down to the `bottomSection` element","typeRef":259},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"formatOnBlur","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the value should be formatted on blur","typeRef":341},{"name":"indentSpaces","required":false,"source":"component","description":"Number of spaces to use as white space for formatting. Passed as the third argument to `serialize` function.","typeRef":353},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxRows","required":false,"source":"component","description":"Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set","typeRef":353},{"name":"minRows","required":false,"source":"component","description":"Minimum rows of autosize textarea, ignored if `autosize` prop is not set","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"resize","required":false,"source":"component","literalValues":["-moz-initial","block","both","horizontal","inherit","initial","inline","none","revert","revert-layer","unset","vertical"],"description":"Controls `resize` CSS property","typeRef":3},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"validationError","required":false,"source":"component","description":"Error message shown when the input value is invalid JSON (checked on blur). If not provided, a generic error state is shown. Takes precedence over the `error` prop when validation fails.","typeRef":263},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Kbd","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/kbd/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size` and `padding`","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"LevelsGroup","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/levels-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":444},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the group should take the full width of its container","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"LineChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/line-chart/","props":[{"name":"activeDotProps","required":false,"source":"component","description":"Props passed down to all active dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"attributes","required":false,"source":"component","typeRef":438},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"connectNulls","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether points with `null` values should be connected","typeRef":341},{"name":"curveType","required":false,"source":"component","literalValues":["bump","linear","monotone","natural","step","stepAfter","stepBefore"],"description":"Type of the curve","typeRef":69},{"name":"data","required":true,"source":"component","description":"Data used to display chart","typeRef":267},{"name":"dataKey","required":true,"source":"component","description":"Key of the `data` object for x-axis values","typeRef":359},{"name":"dotProps","required":false,"source":"component","description":"Props passed down to all dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"fillOpacity","required":false,"source":"component","description":"Controls fill opacity of all lines","typeRef":353},{"name":"gradientStops","required":false,"source":"component","description":"Data used to generate gradient stops","typeRef":174},{"name":"gridAxis","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which lines should be displayed in the grid, `'x'` by default","typeRef":61},{"name":"gridColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the grid and cursor lines, by default depends on color scheme","typeRef":162},{"name":"gridProps","required":false,"source":"component","description":"Props passed down to the `CartesianGrid` component","typeRef":189},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to the `Legend` component","typeRef":190},{"name":"lineChartProps","required":false,"source":"component","description":"Props passed down to recharts `LineChart` component","typeRef":91},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Chart orientation, `'horizontal'` by default","typeRef":36},{"name":"referenceLines","required":false,"source":"component","description":"Reference lines that should be displayed on the chart","typeRef":149},{"name":"rightYAxisLabel","required":false,"source":"component","description":"A label to display next to the right y-axis","typeRef":359},{"name":"rightYAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component rendered on the right side","typeRef":199},{"name":"series","required":true,"source":"component","description":"An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array.","typeRef":175},{"name":"strokeWidth","required":false,"source":"component","description":"Stroke width for the chart lines","typeRef":353},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the text displayed inside the chart, `'dimmed'` by default","typeRef":162},{"name":"tickLine","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which axis should have tick line, `'y'` by default","typeRef":61},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip position animation duration in ms, `0` by default","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to the `Tooltip` component","typeRef":197},{"name":"type","required":false,"source":"component","literalValues":["default","gradient"],"description":"Controls styles of the line","typeRef":27},{"name":"unit","required":false,"source":"component","description":"Unit displayed next to each tick in y-axis","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withDots","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dots should be displayed","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart legend should be displayed, `false` by default","typeRef":341},{"name":"withPointLabels","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether each point should have associated label","typeRef":341},{"name":"withRightYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart tooltip should be displayed, `true` by default","typeRef":341},{"name":"withXAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether x-axis should be displayed, `true` by default","typeRef":341},{"name":"withYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether y-axis should be displayed, `true` by default","typeRef":341},{"name":"xAxisLabel","required":false,"source":"component","description":"A label to display below the x-axis","typeRef":359},{"name":"xAxisProps","required":false,"source":"component","description":"Props passed down to the `XAxis` recharts component","typeRef":198},{"name":"yAxisLabel","required":false,"source":"component","description":"A label to display next to the y-axis","typeRef":359},{"name":"yAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component","typeRef":199}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"List","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/list/","props":[{"name":"attributes","required":false,"source":"component","typeRef":462},{"name":"center","required":false,"source":"component","literalValues":[false,true],"description":"Vertically centers list items with their icons","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"icon","required":false,"source":"component","description":"Icon to replace default list markers. Applied to all items unless overridden on individual List.Item components","typeRef":263},{"name":"listStyleType","required":false,"source":"component","literalValues":["-moz-initial","inherit","initial","none","revert","revert-layer","unset"],"description":"Controls CSS `list-style-type` property. Overrides the default list marker style based on list type","typeRef":249},{"name":"reversed","required":false,"source":"component","literalValues":[false,true],"description":"Reverses the order of list items (only works with type=\"ordered\")","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size` and `line-height`","typeRef":81},{"name":"spacing","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value to set spacing between items","typeRef":183},{"name":"start","required":false,"source":"component","description":"Starting value for ordered list numbering (only works with type=\"ordered\")","typeRef":353},{"name":"type","required":false,"source":"component","literalValues":["ordered","unordered"],"description":"List type","typeRef":65},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withPadding","required":false,"source":"component","literalValues":[false,true],"description":"Adds extra horizontal padding to the list, useful for nested lists","typeRef":341}],"blockedProps":[],"subcomponents":["List.Item"],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"List.Item","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/list/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"icon","required":false,"source":"component","description":"Icon to replace item bullet","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":229},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"ListItem","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/list-item/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"icon","required":false,"source":"component","description":"Icon to replace item bullet","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":229},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Loader","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/loader/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"loaders","required":false,"source":"component","description":"Object of loaders components, can be customized via default props or inline.","typeRef":226},{"name":"radius","required":false,"source":"component","typeRef":365},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `width` and `height` of the loader. `Loader` has predefined `xs`-`xl` values. Numbers are converted to rem.","typeRef":355},{"name":"type","required":false,"source":"component","literalValues":["bars","dots","oval"],"description":"Loader type, key of `loaders` prop","typeRef":110},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"LoadingOverlay","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/loading-overlay/","props":[{"name":"attributes","required":false,"source":"component","typeRef":464},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"loaderProps","required":false,"source":"component","description":"Props passed down to `Loader` component","typeRef":176},{"name":"overlayProps","required":false,"source":"component","description":"Props passed down to `Overlay` component. Use to customizing blur, opacity, color and other properties.","typeRef":201},{"name":"transitionProps","required":false,"source":"component","description":"Props passed down to `Transition` component. Set `duration` to create custom transition or override default transition.","typeRef":208},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"visible","required":false,"source":"component","literalValues":[false,true],"description":"Controls overlay visibility. Typically used with state (useState, useDisclosure).","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"MantineProvider","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/mantine-provider/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Replaces a Homarr-owned provider boundary"},{"name":"MantineThemeProvider","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/mantine-theme-provider/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Replaces a Homarr-owned provider boundary"},{"name":"Mark","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/mark/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Marquee","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/marquee/","props":[{"name":"attributes","required":false,"source":"component","typeRef":395},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"duration","required":false,"source":"component","description":"Animation duration in ms","typeRef":353},{"name":"fadeEdgeColor","required":false,"source":"component","description":"Color of the fade gradient,","typeRef":359},{"name":"fadeEdgeSize","required":false,"source":"component","description":"Size of the fade gradient,","typeRef":359},{"name":"fadeEdges","required":false,"source":"component","literalValues":[false,true],"description":"Whether to show gradient fade on edges,","typeRef":341},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Gap between repeated children, key of `theme.spacing` or any valid CSS value","typeRef":183},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Scroll orientation","typeRef":36},{"name":"pauseOnHover","required":false,"source":"component","literalValues":[false,true],"description":"Pauses animation on hover","typeRef":341},{"name":"repeat","required":false,"source":"component","description":"Number of times children are repeated inline for seamless scrolling","typeRef":353},{"name":"reverse","required":false,"source":"component","literalValues":[false,true],"description":"Reverses animation direction","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"MaskInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/mask-input/","props":[{"name":"alwaysShowMask","required":false,"source":"component","literalValues":[false,true],"description":"Show mask pattern even when field is empty and unfocused","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":416},{"name":"autoClear","required":false,"source":"component","literalValues":[false,true],"description":"Clear value on blur when mask is incomplete, `false` by default","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"mask","required":true,"source":"component","description":"Mask pattern string or array of string literals and RegExp objects","typeRef":361},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"separate","required":false,"source":"component","literalValues":[false,true],"description":"When true, raw and display values are decoupled","typeRef":341},{"name":"showMaskOnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Show mask placeholder on focus, `true` by default","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"slotChar","required":false,"source":"component","description":"Character displayed in unfilled slots, `\"_\"` by default","typeRef":352},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"tokens","required":false,"source":"component","description":"Override or extend the default token map","typeRef":265},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Menu","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"alignItemsLabels","required":false,"source":"component","literalValues":["all","none","with-indicators"],"description":"Controls how indicator slot space is reserved on menu items for label alignment. `'all'` reserves space on every `Menu.Item`, `'with-indicators'` reserves space only on `Menu.CheckboxItem` and `Menu.RadioItem`, `'none'` reserves space only on items that currently display an indicator.","typeRef":55},{"name":"arrowOffset","required":false,"source":"component","description":"Arrow offset in px","typeRef":353},{"name":"arrowPosition","required":false,"source":"component","literalValues":["center","merge","side"],"description":"Arrow position","typeRef":24},{"name":"arrowRadius","required":false,"source":"component","description":"Arrow `border-radius` in px","typeRef":353},{"name":"arrowSize","required":false,"source":"component","description":"Arrow size in px","typeRef":353},{"name":"attributes","required":false,"source":"component","typeRef":430},{"name":"checkIcon","required":false,"source":"component","description":"Custom icon rendered as the indicator of checked `Menu.CheckboxItem` and selected `Menu.RadioItem`. Can be overridden per item with the `checkIcon` prop.","typeRef":263},{"name":"clickOutsideEvents","required":false,"source":"component","description":"Events that trigger outside click detection. Includes mousedown for desktop clicks, touchstart for mobile, and keydown for Escape key handling","typeRef":368},{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms, applicable only to `trigger=\"hover\"` variant","typeRef":353},{"name":"closeOnClickOutside","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is closed on outside clicks","typeRef":341},{"name":"closeOnEscape","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is closed when the `Escape` key is pressed","typeRef":341},{"name":"closeOnItemClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, the Menu is closed when one of the items is clicked. Can be overridden per item with `closeMenuOnClick` prop","typeRef":341},{"name":"defaultOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled menu initial opened state","typeRef":341},{"name":"floatingStrategy","required":false,"source":"component","literalValues":["absolute","fixed"],"description":"Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy)","typeRef":34},{"name":"hideDetached","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead.","typeRef":341},{"name":"keepMountedMode","required":false,"source":"component","literalValues":["activity","display-none"],"description":"Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles","typeRef":7},{"name":"loop","required":false,"source":"component","literalValues":[false,true],"description":"If set, arrow key presses wrap around from last item to first and vice versa","typeRef":341},{"name":"menuItemTabIndex","required":false,"source":"component","literalValues":[-1,0],"description":"Set the `tabindex` on all menu items. Use `0` to allow Tab key navigation through menu items (required for navigation menus following WAI-ARIA disclosure pattern).","typeRef":133},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling","typeRef":241},{"name":"offset","required":false,"source":"component","description":"Offset of the dropdown element","typeRef":354},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms, applicable only to `trigger=\"hover\"` variant","typeRef":353},{"name":"opened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled menu opened state","typeRef":341},{"name":"overlayProps","required":false,"source":"component","description":"Props passed down to `Overlay` component","typeRef":100},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Dropdown position relative to the target element","typeRef":48},{"name":"preventPositionChangeWhenVisible","required":false,"source":"component","literalValues":[false,true],"description":"If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change.","typeRef":341},{"name":"returnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be automatically returned to control when dropdown closes","typeRef":341},{"name":"transitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component. Use to configure duration and animation type.","typeRef":208},{"name":"trapFocus","required":false,"source":"component","literalValues":[false,true],"description":"If set, focus is trapped within the menu dropdown when it is opened","typeRef":341},{"name":"trigger","required":false,"source":"component","literalValues":["click","click-hover","hover"],"description":"Event trigger to open menu. Note: 'hover' is not keyboard accessible; prefer 'click-hover' for accessible hover menus","typeRef":37},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"width","required":false,"source":"component","description":"Dropdown width, or `'target'` to make dropdown width the same as target element","typeRef":243},{"name":"withArrow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether component should have an arrow","typeRef":341},{"name":"withInitialFocusPlaceholder","required":false,"source":"component","literalValues":[false,true],"description":"Adds a hidden focusable element at the start of the dropdown to prevent unexpected focus jumps when opening with keyboard. Set to false if you need custom focus management.","typeRef":341},{"name":"withOverlay","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the overlay should be displayed when the dropdown is opened","typeRef":341}],"blockedProps":[],"subcomponents":["Menu.CheckboxGroup","Menu.CheckboxItem","Menu.ContextMenu","Menu.Divider","Menu.Dropdown","Menu.Item","Menu.Label","Menu.RadioGroup","Menu.RadioItem","Menu.Search","Menu.Sub","Menu.Target"],"bind":{"type":"boolean","initialProp":"defaultChecked"},"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.CheckboxGroup","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled default selected values","typeRef":368},{"name":"value","required":false,"source":"component","description":"Controlled selected values","typeRef":368}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.CheckboxItem","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"checkIcon","required":false,"source":"component","description":"Replaces the default check icon rendered in the indicator slot when the item is checked. Overrides `checkIcon` set on `Menu`.","typeRef":263},{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, closes the menu when this item is clicked. By default, checkbox items do not close the menu.","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":230},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"value","required":false,"source":"component","description":"Value of the checkbox item. When used inside `Menu.CheckboxGroup`, determines whether the item is checked and what value is added/removed on toggle.","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.ContextMenu","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"longPressDelay","required":false,"source":"component","description":"Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.Divider","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":213},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.Dropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":215},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.Item","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"Controls whether the menu closes when this item is clicked. When undefined, inherits from Menu's `closeOnItemClick` prop. When true or false, overrides the Menu-level setting","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"leftSection","required":false,"source":"component","description":"Section displayed at the start of the label","typeRef":263},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":231},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.Label","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.RadioGroup","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled default selected value","typeRef":352},{"name":"value","required":false,"source":"component","description":"Controlled selected value","typeRef":352}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.RadioItem","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"checkIcon","required":false,"source":"component","description":"Replaces the default radio indicator rendered when the item is selected. Overrides `checkIcon` set on `Menu`.","typeRef":263},{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, closes the menu when this item is clicked. By default, radio items do not close the menu.","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":232},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"value","required":true,"source":"component","description":"Value of the radio item. Used by the parent `Menu.RadioGroup` to determine which item is selected.","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.Search","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"attributes","required":false,"source":"component","typeRef":420},{"name":"clearSearchOnClose","required":false,"source":"component","literalValues":[false,true],"description":"If set, clears the search value after the menu close transition completes. Requires a controlled `value`/`onChange` pair.","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"error","required":false,"source":"component","description":"Determines whether the input should have error styles and `aria-invalid` attribute","typeRef":263},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"multiline","required":false,"source":"component","literalValues":[false,true],"description":"Adjusts padding and sizing calculations for multiline inputs (use with `component=\"textarea\"`). Does not make the input multiline by itself.","typeRef":341},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Determines whether the input should have success styles","typeRef":263},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAria","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element of the `Input` component","typeRef":331}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.Sub","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"arrowOffset","required":false,"source":"component","description":"Arrow offset in px","typeRef":353},{"name":"arrowPosition","required":false,"source":"component","literalValues":["center","merge","side"],"description":"Arrow position","typeRef":24},{"name":"arrowRadius","required":false,"source":"component","description":"Arrow `border-radius` in px","typeRef":353},{"name":"arrowSize","required":false,"source":"component","description":"Arrow size in px","typeRef":353},{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms, applicable when hover trigger is used","typeRef":353},{"name":"floatingStrategy","required":false,"source":"component","literalValues":["absolute","fixed"],"description":"Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy)","typeRef":34},{"name":"hideDetached","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead.","typeRef":341},{"name":"keepMountedMode","required":false,"source":"component","literalValues":["activity","display-none"],"description":"Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles","typeRef":7},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling","typeRef":241},{"name":"offset","required":false,"source":"component","description":"Offset of the dropdown element","typeRef":354},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms, applicable when hover trigger is used","typeRef":353},{"name":"opened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled opened state","typeRef":341},{"name":"overlayProps","required":false,"source":"component","description":"Props passed down to `Overlay` component","typeRef":100},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Dropdown position relative to the target element","typeRef":48},{"name":"preventPositionChangeWhenVisible","required":false,"source":"component","literalValues":[false,true],"description":"If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change.","typeRef":341},{"name":"returnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be automatically returned to control when dropdown closes","typeRef":341},{"name":"safeAreaPolygon","required":false,"source":"component","description":"Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior.","typeRef":337},{"name":"transitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type","typeRef":208},{"name":"width","required":false,"source":"component","description":"Dropdown width, or `'target'` to make dropdown width the same as target element","typeRef":243},{"name":"withArrow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether component should have an arrow","typeRef":341},{"name":"withOverlay","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the overlay should be displayed when the dropdown is opened","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.Target","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuCheckboxGroup","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-checkbox-group/","props":[{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled default selected values","typeRef":368},{"name":"value","required":false,"source":"component","description":"Controlled selected values","typeRef":368}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuCheckboxItem","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-checkbox-item/","props":[{"name":"checkIcon","required":false,"source":"component","description":"Replaces the default check icon rendered in the indicator slot when the item is checked. Overrides `checkIcon` set on `Menu`.","typeRef":263},{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, closes the menu when this item is clicked. By default, checkbox items do not close the menu.","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":230},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"value","required":false,"source":"component","description":"Value of the checkbox item. When used inside `Menu.CheckboxGroup`, determines whether the item is checked and what value is added/removed on toggle.","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuContextMenu","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-context-menu/","props":[{"name":"longPressDelay","required":false,"source":"component","description":"Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuDivider","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-divider/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":213},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuDropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-dropdown/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":215},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuItem","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-item/","props":[{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"Controls whether the menu closes when this item is clicked. When undefined, inherits from Menu's `closeOnItemClick` prop. When true or false, overrides the Menu-level setting","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"leftSection","required":false,"source":"component","description":"Section displayed at the start of the label","typeRef":263},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":231},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuLabel","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-label/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuRadioGroup","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-radio-group/","props":[{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled default selected value","typeRef":352},{"name":"value","required":false,"source":"component","description":"Controlled selected value","typeRef":352}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuRadioItem","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-radio-item/","props":[{"name":"checkIcon","required":false,"source":"component","description":"Replaces the default radio indicator rendered when the item is selected. Overrides `checkIcon` set on `Menu`.","typeRef":263},{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, closes the menu when this item is clicked. By default, radio items do not close the menu.","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":232},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"value","required":true,"source":"component","description":"Value of the radio item. Used by the parent `Menu.RadioGroup` to determine which item is selected.","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSearch","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-search/","props":[{"name":"attributes","required":false,"source":"component","typeRef":420},{"name":"clearSearchOnClose","required":false,"source":"component","literalValues":[false,true],"description":"If set, clears the search value after the menu close transition completes. Requires a controlled `value`/`onChange` pair.","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"error","required":false,"source":"component","description":"Determines whether the input should have error styles and `aria-invalid` attribute","typeRef":263},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"multiline","required":false,"source":"component","literalValues":[false,true],"description":"Adjusts padding and sizing calculations for multiline inputs (use with `component=\"textarea\"`). Does not make the input multiline by itself.","typeRef":341},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Determines whether the input should have success styles","typeRef":263},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAria","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element of the `Input` component","typeRef":331}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSub","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-sub/","props":[{"name":"arrowOffset","required":false,"source":"component","description":"Arrow offset in px","typeRef":353},{"name":"arrowPosition","required":false,"source":"component","literalValues":["center","merge","side"],"description":"Arrow position","typeRef":24},{"name":"arrowRadius","required":false,"source":"component","description":"Arrow `border-radius` in px","typeRef":353},{"name":"arrowSize","required":false,"source":"component","description":"Arrow size in px","typeRef":353},{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms, applicable when hover trigger is used","typeRef":353},{"name":"floatingStrategy","required":false,"source":"component","literalValues":["absolute","fixed"],"description":"Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy)","typeRef":34},{"name":"hideDetached","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead.","typeRef":341},{"name":"keepMountedMode","required":false,"source":"component","literalValues":["activity","display-none"],"description":"Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles","typeRef":7},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling","typeRef":241},{"name":"offset","required":false,"source":"component","description":"Offset of the dropdown element","typeRef":354},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms, applicable when hover trigger is used","typeRef":353},{"name":"opened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled opened state","typeRef":341},{"name":"overlayProps","required":false,"source":"component","description":"Props passed down to `Overlay` component","typeRef":100},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Dropdown position relative to the target element","typeRef":48},{"name":"preventPositionChangeWhenVisible","required":false,"source":"component","literalValues":[false,true],"description":"If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change.","typeRef":341},{"name":"returnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be automatically returned to control when dropdown closes","typeRef":341},{"name":"safeAreaPolygon","required":false,"source":"component","description":"Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior.","typeRef":337},{"name":"transitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type","typeRef":208},{"name":"width","required":false,"source":"component","description":"Dropdown width, or `'target'` to make dropdown width the same as target element","typeRef":243},{"name":"withArrow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether component should have an arrow","typeRef":341},{"name":"withOverlay","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the overlay should be displayed when the dropdown is opened","typeRef":341}],"blockedProps":[],"subcomponents":["MenuSub.Dropdown","MenuSub.Item","MenuSub.Target"],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSub.Dropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-sub/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":215},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSub.Item","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-sub/","props":[{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, the menu is closed when the item is clicked. Overrides `closeOnItemClick` prop on the `Menu` component.","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"leftSection","required":false,"source":"component","description":"Section displayed at the start of the label","typeRef":263},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":233},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSub.Target","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-sub/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSubDropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-sub-dropdown/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":215},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSubItem","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-sub-item/","props":[{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, the menu is closed when the item is clicked. Overrides `closeOnItemClick` prop on the `Menu` component.","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"leftSection","required":false,"source":"component","description":"Section displayed at the start of the label","typeRef":263},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":233},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSubTarget","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-sub-target/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuTarget","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-target/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menubar","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/menubar/","props":[],"blockedProps":[],"subcomponents":["Menubar.Dropdown","Menubar.Menu","Menubar.Target"],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Menubar.Dropdown","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/menubar/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Menubar.Menu","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/menubar/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Menubar.Target","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/menubar/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"MenubarDropdown","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/menubar-dropdown/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"MenubarMenu","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/menubar-menu/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"MenubarTarget","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/menubar-target/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"MiniCalendar","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/mini-calendar/","props":[{"name":"attributes","required":false,"source":"component","typeRef":456},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"date","required":false,"source":"component","description":"Controlled component date value, start date of the interval","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Uncontrolled component default value, start date of the interval","typeRef":362},{"name":"locale","required":false,"source":"component","description":"dayjs locale used for formatting","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum date that can be selected, date object or date string in `YYYY-MM-DD` format","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum date that can be selected, date object or date string in `YYYY-MM-DD` format","typeRef":362},{"name":"monthLabelFormat","required":false,"source":"component","description":"Dayjs format string for month label","typeRef":359},{"name":"nextControlProps","required":false,"source":"component","description":"Props passed to next control button","typeRef":102},{"name":"numberOfDays","required":false,"source":"component","description":"Number of days to display in the calendar","typeRef":353},{"name":"previousControlProps","required":false,"source":"component","description":"Props passed to previous control button","typeRef":102},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Selected date, controlled value","typeRef":363},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"Modal","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":["Modal.Body","Modal.CloseButton","Modal.Content","Modal.Header","Modal.Overlay","Modal.Root","Modal.Stack","Modal.Title"],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.Body","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.CloseButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.Content","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.Header","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.Overlay","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.Root","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.Stack","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.Title","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBase","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-base/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBaseBody","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-base-body/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBaseCloseButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-base-close-button/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBaseContent","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-base-content/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBaseHeader","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-base-header/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBaseOverlay","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-base-overlay/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBaseTitle","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-base-title/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBody","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-body/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalCloseButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-close-button/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalContent","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-content/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalHeader","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-header/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalOverlay","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-overlay/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalRoot","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-root/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalStack","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-stack/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalTitle","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-title/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Month","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/month/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","left","right"],"typeRef":22},{"name":"attributes","required":false,"source":"component","typeRef":447},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the month should take the full width of its container","typeRef":341},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"locale","required":false,"source":"component","description":"`dayjs` locale, the default value is defined by `DatesProvider`","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date, in `YYYY-MM-DD` format","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date, in `YYYY-MM-DD` format","typeRef":362},{"name":"month","required":true,"source":"component","description":"Month to display, value `YYYY-MM-DD`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size","typeRef":81},{"name":"static","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated by space","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"MonthLevel","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/month-level/","props":[{"name":"attributes","required":false,"source":"component","typeRef":448},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"hasNextLevel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next level button should be enabled","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"levelControlAriaLabel","required":false,"source":"component","description":"Aria-label for change level control","typeRef":359},{"name":"locale","required":false,"source":"component","description":"`dayjs` locale, the default value is defined by `DatesProvider`","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date, in `YYYY-MM-DD` format","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date, in `YYYY-MM-DD` format","typeRef":362},{"name":"month","required":true,"source":"component","description":"Month that is currently displayed","typeRef":359},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size","typeRef":81},{"name":"static","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":238},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated by space","typeRef":341},{"name":"withNext","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next control should be rendered","typeRef":341},{"name":"withPrevious","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether previous control should be rendered","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"MonthLevelGroup","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/month-level-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":449},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"hasNextLevel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next level button should be enabled","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"locale","required":false,"source":"component","description":"`dayjs` locale, the default value is defined by `DatesProvider`","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date, in `YYYY-MM-DD` format","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date, in `YYYY-MM-DD` format","typeRef":362},{"name":"month","required":true,"source":"component","description":"Month to display","typeRef":359},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns to display next to each other","typeRef":353},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size","typeRef":81},{"name":"static","required":false,"source":"component","literalValues":[false,true],"description":"Passed as `isStatic` prop to `Month` component","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":238},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated by space","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"MonthPicker","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/month-picker/","props":[{"name":"allowDeselect","required":false,"source":"component","description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\"","typeRef":106},{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":382},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level (uncontrolled)","typeRef":52},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":159},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level (controlled)","typeRef":52},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Max level that user can go up to","typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":185},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"type","required":false,"source":"component","literalValues":["default","multiple","range"],"description":"Picker type: range, multiple or default","typeRef":158},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value for controlled component","typeRef":159},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"MonthPickerInput","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/month-picker-input/","props":[{"name":"allowDeselect","required":false,"source":"component","description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\"","typeRef":106},{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":412},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":258},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set.","typeRef":341},{"name":"closeOnChange","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the dropdown is closed when date is selected, not applicable with `type=\"multiple\"`","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level (uncontrolled)","typeRef":52},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":159},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"labelSeparator","required":false,"source":"component","description":"Separator between range value","typeRef":359},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level (controlled)","typeRef":52},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Max level that user can go up to","typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"popoverProps","required":false,"source":"component","description":"Props passed down to `Popover` component","typeRef":204},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":185},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"sortDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dates values should be sorted before `onChange` call, only applicable with type=\"multiple\"","typeRef":341},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["default","multiple","range"],"description":"Picker type: range, multiple or default","typeRef":158},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value for controlled component","typeRef":159},{"name":"valueFormat","required":false,"source":"component","description":"`dayjs` format for input value","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[{"name":"dropdownType","reason":"Modal picker mode escapes the widget overlay boundary"},{"name":"modalProps","reason":"Modal picker configuration escapes the widget overlay boundary"}],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"MonthsList","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/months-list/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","left","right"],"typeRef":22},{"name":"attributes","required":false,"source":"component","typeRef":450},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"year","required":true,"source":"component","description":"Year for which months list should be displayed","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"MultiSelect","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/multi-select/","props":[{"name":"attributes","required":false,"source":"component","typeRef":406},{"name":"checkIconPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the checkmark icon shown next to selected options in the dropdown","typeRef":47},{"name":"chevronColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the default chevron","typeRef":162},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":172},{"name":"clearSearchOnChange","required":false,"source":"component","literalValues":[false,true],"description":"Clear search value when item is selected","typeRef":341},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"When enabled, displays a clear button to remove all selected values (hidden when component is empty, disabled, or read-only)","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"comboboxProps","required":false,"source":"component","description":"Props passed down to `Combobox` component","typeRef":153},{"name":"data","required":false,"source":"component","description":"Data used to generate options. Values must be unique, otherwise an error will be thrown and component will not render.","typeRef":151},{"name":"defaultDropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled dropdown initial opened state","typeRef":341},{"name":"defaultSearchValue","required":false,"source":"component","description":"Default search value","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":330},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"dropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled dropdown opened state","typeRef":341},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"floatingHeight","required":false,"source":"component","literalValues":["viewport"],"description":"If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware.","typeRef":78},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":195},{"name":"hiddenInputValuesDivider","required":false,"source":"component","description":"Divider used to separate values in the hidden input `value` attribute","typeRef":359},{"name":"hidePickedOptions","required":false,"source":"component","literalValues":[false,true],"description":"When enabled, selected options are hidden from the dropdown list","typeRef":341},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"limit","required":false,"source":"component","description":"Maximum number of options displayed at a time, `Infinity` by default","typeRef":353},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxDropdownHeight","required":false,"source":"component","description":"`max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default","typeRef":365},{"name":"maxValues","required":false,"source":"component","description":"Maximum number of values, no limit if not set","typeRef":353},{"name":"nothingFoundMessage","required":false,"source":"component","description":"Message displayed when no options match the search query (when searchable is enabled) or when the data array is empty. If not set, the dropdown will be hidden instead.","typeRef":263},{"name":"openOnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Controls whether dropdown opens when the input receives focus","typeRef":341},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props passed down to the underlying `ScrollArea` component in the dropdown","typeRef":274},{"name":"searchValue","required":false,"source":"component","description":"Controlled search value","typeRef":359},{"name":"searchable","required":false,"source":"component","literalValues":[false,true],"description":"Allows searching through options by user input","typeRef":341},{"name":"selectFirstOptionOnChange","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when value changes, `false` by default","typeRef":341},{"name":"selectFirstOptionOnDropdownOpen","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when dropdown opens, `false` by default","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":330},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAlignedLabels","required":false,"source":"component","literalValues":[false,true],"description":"If set, unchecked labels are aligned with checked ones","typeRef":341},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withCheckIcon","required":false,"source":"component","literalValues":[false,true],"description":"If set, the check icon is displayed near the selected option label","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withPillsReorder","required":false,"source":"component","literalValues":[false,true],"description":"If set, selected values can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set.","typeRef":341},{"name":"withScrollArea","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string[]","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"NativeScrollArea","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/native-scroll-area/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"NativeSelect","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/native-select/","props":[{"name":"attributes","required":false,"source":"component","typeRef":416},{"name":"autoComplete","required":false,"source":"component","typeRef":359},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":false,"source":"component","description":"Data used to render options. Accepts strings, objects with label/value, or grouped options. If `children` prop is provided, `data` will be ignored.","typeRef":154},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"NavLink","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/nav-link/","props":[{"name":"active","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the link should have active styles","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":377},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"childrenOffset","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls indentation of nested NavLink components, key of `theme.spacing` or any valid CSS value","typeRef":183},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to control active styles","typeRef":162},{"name":"defaultOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled nested items collapse initial state","typeRef":341},{"name":"description","required":false,"source":"component","description":"Link description, displayed below the label","typeRef":263},{"name":"disableRightSectionRotation","required":false,"source":"component","literalValues":[false,true],"description":"If set, right section will not be rotated when collapse is opened","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set to `false`, child `NavLinks` are unmounted when collapsed","typeRef":341},{"name":"label","required":false,"source":"component","description":"Main link label","typeRef":263},{"name":"leftSection","required":false,"source":"component","description":"Section displayed on the left side of the label","typeRef":263},{"name":"noWrap","required":false,"source":"component","literalValues":[false,true],"description":"If set, label and description are truncated with ellipsis instead of wrapping","typeRef":341},{"name":"opened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled nested items collapse state","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Section displayed on the right side of the label","typeRef":263},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","light","subtle"],"typeRef":125}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Notification","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/notification/","props":[{"name":"attributes","required":false,"source":"component","typeRef":381},{"name":"closeButtonProps","required":false,"source":"component","description":"Props passed down to the close button","typeRef":94},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls icon background color or notification accent line color, key of `theme.colors` or any valid CSS color. When `icon` is provided, sets the icon background color. When no icon is provided, sets the colored accent line on the left.","typeRef":162},{"name":"icon","required":false,"source":"component","description":"Notification icon, replaces color line","typeRef":263},{"name":"loaderProps","required":false,"source":"component","description":"Props passed down to the `Loader` component","typeRef":176},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"If set, displays a `Loader` component instead of the icon. Takes precedence over the `icon` prop if both are provided.","typeRef":341},{"name":"title","required":false,"source":"component","description":"Notification title, displayed above the message body","typeRef":263},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCloseButton","required":false,"source":"component","literalValues":[false,true],"description":"If set, the close button is visible","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"NumberFormatter","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/number-formatter/","props":[{"name":"allowNegative","required":false,"source":"component","literalValues":[false,true],"description":"If set, negative values are allowed","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"decimalScale","required":false,"source":"component","description":"Limits the number of digits that are displayed after the decimal point","typeRef":353},{"name":"decimalSeparator","required":false,"source":"component","description":"Character used as a decimal separator, `'.'` by default","typeRef":359},{"name":"fixedDecimalScale","required":false,"source":"component","literalValues":[false,true],"description":"If set, zeros are added after `decimalSeparator` to match given `decimalScale`.","typeRef":341},{"name":"suffix","required":false,"source":"component","description":"Suffix added after the value","typeRef":359},{"name":"thousandSeparator","required":false,"source":"component","description":"A character used to separate thousands","typeRef":364},{"name":"thousandsGroupStyle","required":false,"source":"component","literalValues":["lakh","none","thousand","wan"],"description":"Defines the thousand grouping style","typeRef":60},{"name":"value","required":false,"source":"component","description":"Value to format","typeRef":365}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"NumberInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/number-input/","props":[{"name":"allowDecimal","required":false,"source":"component","literalValues":[false,true],"description":"If set, decimal values are allowed","typeRef":341},{"name":"allowLeadingZeros","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether leading zeros are allowed during input. If `false`, leading zeros are removed as you type (e.g., typing `007` results in `7`). Works in conjunction with `trimLeadingZeroesOnBlur`.","typeRef":341},{"name":"allowNegative","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether negative numbers are allowed. If `false`, the input will not accept negative values, and the decrement button will stop at `0` (when `min` is not set).","typeRef":341},{"name":"allowedDecimalSeparators","required":false,"source":"component","description":"Characters which when pressed result in a decimal separator. These characters will be replaced by the `decimalSeparator` in the input value.","typeRef":368},{"name":"attributes","required":false,"source":"component","typeRef":417},{"name":"clampBehavior","required":false,"source":"component","literalValues":["blur","none","strict"],"description":"Controls how values are clamped to the `min`/`max` range: - `'blur'` (default): User can type any value, but it's clamped when the input loses focus - `'strict'`: User cannot type values outside the range - `'none'`: No clamping; `min`/`max` only apply to increment/decrement controls and arrow keys","typeRef":58},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"decimalScale","required":false,"source":"component","description":"Limits the number of digits that can be entered after the decimal point","typeRef":353},{"name":"decimalSeparator","required":false,"source":"component","description":"Character used as a decimal separator. Generally used with `allowedDecimalSeparators` prop.","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":187},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"fixedDecimalScale","required":false,"source":"component","literalValues":[false,true],"description":"If `true`, automatically pads the decimal part with zeros to match `decimalScale` (e.g., with `decimalScale={2}`, typing `5.1` displays as `5.10`). Requires `decimalScale` to be set.","typeRef":341},{"name":"hideControls","required":false,"source":"component","literalValues":[false,true],"description":"If set, the up/down controls are hidden","typeRef":341},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"max","required":false,"source":"component","description":"Maximum possible value","typeRef":313},{"name":"min","required":false,"source":"component","description":"Minimum possible value","typeRef":313},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"selectAllOnFocus","required":false,"source":"component","literalValues":[false,true],"description":"If set, all text is selected when the input receives focus","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"startValue","required":false,"source":"component","description":"Value used when incrementing/decrementing an empty input. If `min` is set and `startValue < min`, `min` is used instead.","typeRef":313},{"name":"step","required":false,"source":"component","description":"Number by which value will be incremented/decremented with up/down controls and keyboard arrows","typeRef":313},{"name":"stepHoldDelay","required":false,"source":"component","description":"Initial delay in milliseconds before stepping the value.","typeRef":353},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"suffix","required":false,"source":"component","description":"Suffix added after the input value","typeRef":359},{"name":"thousandSeparator","required":false,"source":"component","description":"A character used to separate thousands","typeRef":364},{"name":"thousandsGroupStyle","required":false,"source":"component","literalValues":["lakh","none","thousand","wan"],"description":"Defines the thousand grouping style. 'thousand' (1,000), 'lakh' (1,00,000), 'wan' (1,0000), 'none'.","typeRef":60},{"name":"trimLeadingZeroesOnBlur","required":false,"source":"component","literalValues":[false,true],"description":"If set, leading zeros are removed on blur. For example, `00100` -> `100`","typeRef":341},{"name":"type","required":false,"source":"component","literalValues":["password","tel","text"],"description":"Controls input `type` attribute","typeRef":74},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":187},{"name":"valueIsNumericString","required":false,"source":"component","literalValues":[false,true],"description":"Advanced: Set to `true` if you're passing numeric strings (e.g., `\"12345\"`) and using formatting props like `prefix` or `suffix`. In most cases, you don't need this prop. See [react-number-format docs](https://www.npmjs.com/package/react-number-format) for details.","typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withKeyboardEvents","required":false,"source":"component","literalValues":[false,true],"description":"If set, up/down keyboard events increment/decrement value","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"number","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"OptionalPortal","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/optional-portal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Can render outside the widget root"},{"name":"OptionsDropdown","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/options-dropdown/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"OverflowList","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/overflow-list/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"collapseFrom","required":false,"source":"component","literalValues":["end","start"],"description":"Direction from which items are collapsed when they overflow, `'end'` collapses last items, `'start'` collapses first items","typeRef":32},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Array of items to display","typeRef":314},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem","typeRef":183},{"name":"maxRows","required":false,"source":"component","description":"Number of rows to display","typeRef":353},{"name":"maxVisibleItems","required":false,"source":"component","description":"Maximum number of visible items","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Overlay","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/overlay/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"backgroundOpacity","required":false,"source":"component","description":"Overlay `background-color` opacity 0–1, ignored when `gradient` prop is set","typeRef":353},{"name":"blur","required":false,"source":"component","description":"Overlay background blur in px (converted to rem). Applies `backdrop-filter: blur()`. Note: backdrop-filter is not supported in all browsers.","typeRef":365},{"name":"center","required":false,"source":"component","literalValues":[false,true],"description":"Centers content inside the overlay using flexbox (sets display: flex, align-items: center, justify-content: center)","typeRef":341},{"name":"color","required":false,"source":"component","description":"Overlay `background-color`","typeRef":245},{"name":"fixed","required":false,"source":"component","literalValues":[false,true],"description":"Changes position from `absolute` to `fixed` (viewport-relative instead of parent-relative)","typeRef":341},{"name":"gradient","required":false,"source":"component","description":"Changes overlay to gradient. If set, both `color` and `backgroundOpacity` props are ignored.","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"PaginatedList","package":"@homarr/widgets","category":"interaction","safety":"allowed","description":"Renders a bounded page of collection items.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"pageSize","source":"component","required":false,"typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[{"name":"attributes","required":false,"source":"component","typeRef":425},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on the active page background color to ensure sufficient contrast","typeRef":341},{"name":"boundaries","required":false,"source":"component","description":"Number of elements visible on the left/right edges","typeRef":353},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors`, active item color","typeRef":162},{"name":"defaultValue","required":false,"source":"component","description":"Active page for uncontrolled component, must be an integer in [1, total] interval","typeRef":353},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing`, gap between controls","typeRef":183},{"name":"hideWithOnePage","required":false,"source":"component","literalValues":[false,true],"description":"If set, the pagination is hidden when only one page is available (`total={1}`)","typeRef":341},{"name":"layout","required":false,"source":"component","literalValues":["default","responsive"],"description":"Determines how the pagination is displayed, `'responsive'` uses CSS container queries to switch between pages and a compact label","typeRef":28},{"name":"siblings","required":false,"source":"component","description":"Number of siblings displayed on the left/right side of the selected page","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["input-lg","input-md","input-sm","input-xl","input-xs","lg","md","sm","xl","xs"],"description":"`height` and `min-width` of controls","typeRef":356},{"name":"startValue","required":false,"source":"component","description":"Starting page number, defaults to 1","typeRef":353},{"name":"total","required":true,"source":"component","description":"Total number of pages, must be an integer","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Active page for controlled component, must be an integer in [1, total] interval","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withControls","required":false,"source":"component","literalValues":[false,true],"description":"If set, next/previous controls are displayed","typeRef":341},{"name":"withEdges","required":false,"source":"component","literalValues":[false,true],"description":"If set, first/last controls are displayed","typeRef":341},{"name":"withPages","required":false,"source":"component","literalValues":[false,true],"description":"If set to `false`, page number buttons are hidden, only next/previous controls remain","typeRef":341}],"blockedProps":[],"subcomponents":["Pagination.Control","Pagination.Dots","Pagination.First","Pagination.Items","Pagination.Label","Pagination.Last","Pagination.Next","Pagination.Previous","Pagination.Root"],"bind":{"type":"number","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Control","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[{"name":"active","required":false,"source":"component","literalValues":[false,true],"description":"Applies active styles, adds `data-active` attribute","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":211},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withPadding","required":false,"source":"component","literalValues":[false,true],"description":"Applies padding","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Dots","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":214},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.First","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Items","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Label","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Last","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Next","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Previous","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Root","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[{"name":"attributes","required":false,"source":"component","typeRef":425},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on the active page background color to ensure sufficient contrast","typeRef":341},{"name":"boundaries","required":false,"source":"component","description":"Number of elements visible on the left/right edges","typeRef":353},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors`, active item color","typeRef":162},{"name":"defaultValue","required":false,"source":"component","description":"Active page for uncontrolled component, must be an integer in [1, total] interval","typeRef":353},{"name":"layout","required":false,"source":"component","literalValues":["default","responsive"],"description":"Determines how the pagination is displayed, `'responsive'` uses CSS container queries to switch between pages and a compact label","typeRef":28},{"name":"siblings","required":false,"source":"component","description":"Number of siblings displayed on the left/right side of the selected page","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["input-lg","input-md","input-sm","input-xl","input-xs","lg","md","sm","xl","xs"],"description":"`height` and `min-width` of controls","typeRef":356},{"name":"startValue","required":false,"source":"component","description":"Starting page number, defaults to 1","typeRef":353},{"name":"total","required":true,"source":"component","description":"Total number of pages, must be an integer","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Active page for controlled component, must be an integer in [1, total] interval","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"PaginationControl","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-control/","props":[{"name":"active","required":false,"source":"component","literalValues":[false,true],"description":"Applies active styles, adds `data-active` attribute","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":211},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withPadding","required":false,"source":"component","literalValues":[false,true],"description":"Applies padding","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationDots","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-dots/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":214},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationFirst","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-first/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationItems","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-items/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationLabel","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-label/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationLast","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-last/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationNext","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-next/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationPrevious","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-previous/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationRoot","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-root/","props":[{"name":"attributes","required":false,"source":"component","typeRef":425},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on the active page background color to ensure sufficient contrast","typeRef":341},{"name":"boundaries","required":false,"source":"component","description":"Number of elements visible on the left/right edges","typeRef":353},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors`, active item color","typeRef":162},{"name":"defaultValue","required":false,"source":"component","description":"Active page for uncontrolled component, must be an integer in [1, total] interval","typeRef":353},{"name":"layout","required":false,"source":"component","literalValues":["default","responsive"],"description":"Determines how the pagination is displayed, `'responsive'` uses CSS container queries to switch between pages and a compact label","typeRef":28},{"name":"siblings","required":false,"source":"component","description":"Number of siblings displayed on the left/right side of the selected page","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["input-lg","input-md","input-sm","input-xl","input-xs","lg","md","sm","xl","xs"],"description":"`height` and `min-width` of controls","typeRef":356},{"name":"startValue","required":false,"source":"component","description":"Starting page number, defaults to 1","typeRef":353},{"name":"total","required":true,"source":"component","description":"Total number of pages, must be an integer","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Active page for controlled component, must be an integer in [1, total] interval","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Paper","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/paper/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"PasswordInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/password-input/","props":[{"name":"attributes","required":false,"source":"component","typeRef":418},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultVisible","required":false,"source":"component","literalValues":[false,true],"description":"If set, the input value is visible by default","typeRef":341},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"visibilityToggleButtonProps","required":false,"source":"component","description":"Props passed down to the visibility toggle button","typeRef":266},{"name":"visible","required":false,"source":"component","literalValues":[false,true],"description":"If set, the input value is visible","typeRef":341},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"PickerControl","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/picker-control/","props":[{"name":"attributes","required":false,"source":"component","typeRef":451},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"firstInRange","required":false,"source":"component","literalValues":[false,true],"description":"Assigns first in range styles","typeRef":341},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the control should take the full width of its cell","typeRef":341},{"name":"inRange","required":false,"source":"component","literalValues":[false,true],"description":"Assigns in range styles","typeRef":341},{"name":"lastInRange","required":false,"source":"component","literalValues":[false,true],"description":"Assigns last in range styles","typeRef":341},{"name":"selected","required":false,"source":"component","literalValues":[false,true],"description":"Assigns selected styles","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"PickerInputBase","package":"@mantine/dates","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/dates/picker-input-base/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Internal date-input primitive"},{"name":"PieChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/pie-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":441},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data used to render chart","typeRef":240},{"name":"endAngle","required":false,"source":"component","description":"Controls angle at which charts ends. Set to `0` to render the chart as semicircle.","typeRef":353},{"name":"labelColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls text color of all labels, white by default","typeRef":162},{"name":"labelsPosition","required":false,"source":"component","literalValues":["inside","outside"],"description":"Controls labels position relative to the segment","typeRef":46},{"name":"labelsType","required":false,"source":"component","literalValues":["name","percent","value"],"description":"Type of labels to display","typeRef":77},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to recharts `Legend` component","typeRef":190},{"name":"paddingAngle","required":false,"source":"component","description":"Controls padding between segments","typeRef":353},{"name":"pieChartProps","required":false,"source":"component","description":"Props passed down to recharts `PieChart` component","typeRef":101},{"name":"pieProps","required":false,"source":"component","description":"Props passed down to recharts `Pie` component","typeRef":203},{"name":"size","required":false,"source":"component","description":"Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`.","typeRef":353},{"name":"startAngle","required":false,"source":"component","description":"Controls angle at which chart starts. Set to `180` to render the chart as semicircle.","typeRef":353},{"name":"strokeColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the segments stroke, by default depends on color scheme","typeRef":162},{"name":"strokeWidth","required":false,"source":"component","description":"Controls width of segments stroke","typeRef":353},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip animation duration in ms","typeRef":353},{"name":"tooltipDataSource","required":false,"source":"component","literalValues":["all","segment"],"description":"Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment.","typeRef":9},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to `Tooltip` recharts component","typeRef":197},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withLabels","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether each segment should have associated label","typeRef":341},{"name":"withLabelsLine","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether segments labels should have lines that connect the segment with the label","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the legend should be displayed","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the tooltip should be displayed when one of the section is hovered","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Pill","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pill/","props":[{"name":"attributes","required":false,"source":"component","typeRef":428},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"removeButtonProps","required":false,"source":"component","description":"Props passed down to the remove button","typeRef":93},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls pill `font-size` and `padding`","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["contrast","default"],"typeRef":126},{"name":"withRemoveButton","required":false,"source":"component","literalValues":[false,true],"description":"Controls visibility of the remove button","typeRef":341}],"blockedProps":[],"subcomponents":["Pill.Group"],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Pill.Group","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pill/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls spacing between pills, by default controlled by `size`","typeRef":355},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the child `Pill` components and gap between them","typeRef":182},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PillGroup","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pill-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls spacing between pills, by default controlled by `size`","typeRef":355},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the child `Pill` components and gap between them","typeRef":182},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PillsInput","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/pills-input/","props":[],"blockedProps":[],"subcomponents":["PillsInput.Field"],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"PillsInput.Field","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/pills-input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"PillsInputField","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/pills-input-field/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"PinInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pin-input/","props":[{"name":"ariaLabel","required":false,"source":"component","description":"`aria-label` attribute","typeRef":359},{"name":"attributes","required":false,"source":"component","typeRef":419},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":359},{"name":"error","required":false,"source":"component","literalValues":[false,true],"description":"Sets `aria-invalid` attribute and applies error styles to all inputs","typeRef":341},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem","typeRef":183},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":261},{"name":"inputType","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"description":"Inputs `type` attribute, inferred from the `type` prop if not specified","typeRef":262},{"name":"length","required":false,"source":"component","description":"Number of inputs","typeRef":353},{"name":"manageFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be moved automatically to the next input once filled","typeRef":341},{"name":"mask","required":false,"source":"component","literalValues":[false,true],"description":"Changes input type to `\"password\"`","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls inputs `width` and `height`","typeRef":81},{"name":"success","required":false,"source":"component","literalValues":[false,true],"description":"Applies success styles to all inputs","typeRef":341},{"name":"type","required":false,"source":"component","literalValues":["alphanumeric","number"],"description":"Determines which values can be entered","typeRef":62},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Popover","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/popover/","props":[{"name":"arrowOffset","required":false,"source":"component","description":"Arrow offset in px","typeRef":353},{"name":"arrowPosition","required":false,"source":"component","literalValues":["center","merge","side"],"description":"Arrow position","typeRef":24},{"name":"arrowRadius","required":false,"source":"component","description":"Arrow `border-radius` in px","typeRef":353},{"name":"arrowSize","required":false,"source":"component","description":"Arrow size in px","typeRef":353},{"name":"attributes","required":false,"source":"component","typeRef":399},{"name":"clickOutsideEvents","required":false,"source":"component","description":"Events that trigger outside clicks","typeRef":368},{"name":"closeOnClickOutside","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dropdown should be closed on outside clicks","typeRef":341},{"name":"closeOnEscape","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dropdown should be closed when `Escape` key is pressed","typeRef":341},{"name":"defaultOpened","required":false,"source":"component","literalValues":[false,true],"description":"Initial opened state for uncontrolled component","typeRef":341},{"name":"floatingStrategy","required":false,"source":"component","literalValues":["absolute","fixed"],"description":"Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy)","typeRef":34},{"name":"hideDetached","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead.","typeRef":341},{"name":"keepMountedMode","required":false,"source":"component","literalValues":["activity","display-none"],"description":"Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles","typeRef":7},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling","typeRef":241},{"name":"offset","required":false,"source":"component","description":"Offset of the dropdown element","typeRef":354},{"name":"opened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled dropdown opened state","typeRef":341},{"name":"overlayProps","required":false,"source":"component","description":"Props passed down to `Overlay` component","typeRef":100},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Dropdown position relative to the target element","typeRef":48},{"name":"preventPositionChangeWhenVisible","required":false,"source":"component","literalValues":[false,true],"description":"If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change.","typeRef":341},{"name":"returnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be automatically returned to control when dropdown closes","typeRef":341},{"name":"transitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component. Use to configure duration and animation type.","typeRef":208},{"name":"trapFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be trapped within dropdown","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"width","required":false,"source":"component","description":"Dropdown width, or `'target'` to make dropdown width the same as target element","typeRef":243},{"name":"withArrow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether component should have an arrow","typeRef":341},{"name":"withOverlay","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the overlay should be displayed when the dropdown is opened","typeRef":341},{"name":"withRoles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dropdown and target elements should have accessible roles","typeRef":341}],"blockedProps":[],"subcomponents":["Popover.ContextMenu","Popover.Dropdown","Popover.Target"],"bind":{"type":"boolean","initialProp":"defaultChecked"},"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Popover.ContextMenu","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/popover/","props":[{"name":"longPressDelay","required":false,"source":"component","description":"Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Popover.Dropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/popover/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":234},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Popover.Target","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/popover/","props":[{"name":"popupType","required":false,"source":"component","description":"Popup accessible type","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"PopoverContextMenu","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/popover-context-menu/","props":[{"name":"longPressDelay","required":false,"source":"component","description":"Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"PopoverDropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/popover-dropdown/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":234},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"PopoverTarget","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/popover-target/","props":[{"name":"popupType","required":false,"source":"component","description":"Popup accessible type","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Portal","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/portal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Can render outside the widget root"},{"name":"Progress","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/progress/","props":[{"name":"animated","required":false,"source":"component","literalValues":[false,true],"description":"If set, the sections stripes are animated (automatically enables striped)","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":432},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts label text color based on section background color for readability","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS value","typeRef":162},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Controls orientation","typeRef":36},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls track height","typeRef":355},{"name":"striped","required":false,"source":"component","literalValues":[false,true],"description":"If set, the section has stripes","typeRef":341},{"name":"transitionDuration","required":false,"source":"component","description":"Controls sections width transition duration, value is specified in ms","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":true,"source":"component","description":"Value of the progress","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":["Progress.Label","Progress.Root","Progress.Section"],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"Progress.Label","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/progress/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"Progress.Root","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/progress/","props":[{"name":"attributes","required":false,"source":"component","typeRef":432},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts label text color based on section background color for readability","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Controls orientation","typeRef":36},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls track height","typeRef":355},{"name":"transitionDuration","required":false,"source":"component","description":"Controls sections width transition duration, value is specified in ms","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"Progress.Section","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/progress/","props":[{"name":"animated","required":false,"source":"component","literalValues":[false,true],"description":"If set, the sections stripes are animated, `striped` prop is ignored","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS value","typeRef":162},{"name":"striped","required":false,"source":"component","literalValues":[false,true],"description":"If set, the section has stripes","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":224},{"name":"value","required":true,"source":"component","description":"Value of the section in 0–100 range","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAria","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether `aria-*` props should be added to the root element","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"ProgressLabel","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/progress-label/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"ProgressRoot","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/progress-root/","props":[{"name":"attributes","required":false,"source":"component","typeRef":432},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts label text color based on section background color for readability","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Controls orientation","typeRef":36},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls track height","typeRef":355},{"name":"transitionDuration","required":false,"source":"component","description":"Controls sections width transition duration, value is specified in ms","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"ProgressSection","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/progress-section/","props":[{"name":"animated","required":false,"source":"component","literalValues":[false,true],"description":"If set, the sections stripes are animated, `striped` prop is ignored","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS value","typeRef":162},{"name":"striped","required":false,"source":"component","literalValues":[false,true],"description":"If set, the section has stripes","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":224},{"name":"value","required":true,"source":"component","description":"Value of the section in 0–100 range","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAria","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether `aria-*` props should be added to the root element","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"RadarChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/radar-chart/","props":[{"name":"activeDotProps","required":false,"source":"component","description":"Props passed down to all active dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"attributes","required":false,"source":"component","typeRef":440},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data used in the chart","typeRef":267},{"name":"dataKey","required":true,"source":"component","description":"Key of the `data` object for axis values","typeRef":359},{"name":"dotProps","required":false,"source":"component","description":"Props passed down to all dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"gridColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the grid lines. By default, color depends on the color scheme.","typeRef":162},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to recharts Legend component","typeRef":190},{"name":"polarAngleAxisProps","required":false,"source":"component","description":"Props passed down to recharts PolarAngleAxis component","typeRef":191},{"name":"polarGridProps","required":false,"source":"component","description":"Props passed down to recharts PolarGrid component","typeRef":192},{"name":"polarRadiusAxisProps","required":false,"source":"component","description":"Props passed down to recharts PolarRadiusAxis component","typeRef":193},{"name":"radarChartProps","required":false,"source":"component","description":"Props passed down to recharts RadarChart component","typeRef":101},{"name":"series","required":true,"source":"component","description":"Determines which data should be consumed from the `data` array.","typeRef":255},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of all text elements. By default, color depends on the color scheme.","typeRef":162},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip position animation duration in ms","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to recharts Tooltip component","typeRef":197},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withDots","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dots should be displayed","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the legend should be displayed","typeRef":341},{"name":"withPolarAngleAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether PolarAngleAxis component should be displayed","typeRef":341},{"name":"withPolarGrid","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether PolarGrid component should be displayed","typeRef":341},{"name":"withPolarRadiusAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether PolarRadiusAxisProps component should be displayed","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether Tooltip component should be displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"RadialBarChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/radial-bar-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":442},{"name":"barSize","required":false,"source":"component","description":"Size of bars in px, `20` by default","typeRef":353},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Chart data","typeRef":267},{"name":"dataKey","required":true,"source":"component","description":"Key from data object to use as data key","typeRef":359},{"name":"emptyBackgroundColor","required":false,"source":"component","description":"Color of the empty background, by default depends on the color scheme","typeRef":359},{"name":"endAngle","required":false,"source":"component","description":"Angle at which chart ends","typeRef":353},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to recharts Legend component","typeRef":190},{"name":"radialBarChartProps","required":false,"source":"component","description":"Props passed down to recharts RadarChartChart component","typeRef":101},{"name":"radialBarProps","required":false,"source":"component","description":"Props passed down to recharts RadialBar component","typeRef":194},{"name":"startAngle","required":false,"source":"component","description":"Angle at which chart starts","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to `Tooltip` recharts component","typeRef":197},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withBackground","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether empty bars area should be visible","typeRef":341},{"name":"withLabels","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether labels should be displayed","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the legend should be displayed","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the tooltip should be displayed when one of the bars is hovered","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Radio","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio/","props":[{"name":"attributes","required":false,"source":"component","typeRef":376},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of theme.colors or any valid CSS color to set radio background color in checked state","typeRef":162},{"name":"description","required":false,"source":"component","description":"Description displayed below the label","typeRef":263},{"name":"error","required":false,"source":"component","description":"Error displayed below the label","typeRef":263},{"name":"iconColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting","typeRef":162},{"name":"label","required":false,"source":"component","description":"Content of the `label` associated with the radio","typeRef":263},{"name":"labelPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the label relative to the input","typeRef":47},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the component","typeRef":182},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","outline"],"typeRef":128},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"If set, applies error styles to the radio when `error` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":103}],"blockedProps":[],"subcomponents":["Radio.Card","Radio.Group","Radio.Indicator"],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Radio.Card","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio/","props":[{"name":"attributes","required":false,"source":"component","typeRef":390},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value of the radio, used with Radio.Group","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Radio.Group","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio/","props":[{"name":"attributes","required":false,"source":"component","typeRef":426},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":329},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelElement","required":false,"source":"component","literalValues":["div","label"],"description":"Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually.","typeRef":31},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the `Input.Wrapper`","typeRef":81},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":329},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the `Input.Wrapper`","typeRef":103}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Radio.Indicator","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio/","props":[{"name":"attributes","required":false,"source":"component","typeRef":403},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of theme.colors or any valid CSS color to set indicator background color in checked state","typeRef":162},{"name":"iconColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting","typeRef":162},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the component","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","outline"],"typeRef":127}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"RadioCard","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio-card/","props":[{"name":"attributes","required":false,"source":"component","typeRef":390},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value of the radio, used with Radio.Group","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"RadioGroup","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":426},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":329},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelElement","required":false,"source":"component","literalValues":["div","label"],"description":"Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually.","typeRef":31},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the `Input.Wrapper`","typeRef":81},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":329},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the `Input.Wrapper`","typeRef":103}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"RadioIcon","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio-icon/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"display","required":false,"source":"component","typeRef":365},{"name":"opacity","required":false,"source":"component","typeRef":365},{"name":"radius","required":false,"source":"component","typeRef":365},{"name":"size","required":false,"source":"component","typeRef":365},{"name":"type","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"RadioIndicator","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio-indicator/","props":[{"name":"attributes","required":false,"source":"component","typeRef":403},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of theme.colors or any valid CSS color to set indicator background color in checked state","typeRef":162},{"name":"iconColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting","typeRef":162},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the component","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","outline"],"typeRef":127}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"RangeSlider","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/range-slider/","props":[{"name":"attributes","required":false,"source":"component","typeRef":424},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls color of track and thumb","typeRef":162},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":256},{"name":"domain","required":false,"source":"component","description":"Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain).","typeRef":334},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":261},{"name":"inverted","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether track values representation should be inverted","typeRef":341},{"name":"labelAlwaysOn","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the label should be visible when the slider is not being dragged or hovered","typeRef":341},{"name":"labelTransitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component","typeRef":208},{"name":"marks","required":false,"source":"component","description":"Marks displayed on the track","typeRef":276},{"name":"max","required":false,"source":"component","description":"Maximum possible value","typeRef":353},{"name":"maxRange","required":false,"source":"component","description":"Maximum range interval","typeRef":353},{"name":"min","required":false,"source":"component","description":"Minimal possible value","typeRef":353},{"name":"minRange","required":false,"source":"component","description":"Minimal range interval between the two thumbs. Consider this value relative to the total range (max - min).","typeRef":353},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Slider orientation","typeRef":36},{"name":"precision","required":false,"source":"component","description":"Number of significant digits after the decimal point","typeRef":353},{"name":"pushOnOverlap","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the other thumb should be pushed by the current thumb dragging when `minRange`/`maxRange` is reached","typeRef":341},{"name":"restrictToMarks","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the selection should be only allowed from the given marks array","typeRef":341},{"name":"showLabelOnHover","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the label should be displayed when the slider is hovered","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the track","typeRef":355},{"name":"step","required":false,"source":"component","description":"Number by which value will be incremented/decremented with thumb drag and arrows","typeRef":353},{"name":"thumbChildren","required":false,"source":"component","description":"Content rendered inside thumb","typeRef":263},{"name":"thumbFromLabel","required":false,"source":"component","description":"First thumb `aria-label`","typeRef":359},{"name":"thumbLabel","required":false,"source":"component","description":"`aria-label` for both thumbs (overridden by thumbFromLabel/thumbToLabel if provided)","typeRef":359},{"name":"thumbSize","required":false,"source":"component","description":"Thumb `width` and `height`, by default value is computed based on `size` prop","typeRef":365},{"name":"thumbToLabel","required":false,"source":"component","description":"Second thumb `aria-label`","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":256},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"number[]","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Rating","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/rating/","props":[{"name":"allowClear","required":false,"source":"component","literalValues":[false,true],"description":"When true, clicking the same rating value clears the rating to 0, default is false","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":409},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of theme.colors or any CSS color value, default is 'yellow'","typeRef":162},{"name":"count","required":false,"source":"component","description":"Number of rating items (stars), default is 5","typeRef":353},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":353},{"name":"fractions","required":false,"source":"component","description":"Number of fractions each item can be divided into, default is 1","typeRef":353},{"name":"highlightSelectedOnly","required":false,"source":"component","literalValues":[false,true],"description":"When true, only the clicked rating item is highlighted, not all items up to the selected value, default is false","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls component size","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"number","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"RefreshButton","package":"@homarr/widgets","category":"network","safety":"wrapped","description":"Refreshes load-triggered widget queries.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"color","source":"component","required":false,"typeRef":359},{"name":"label","source":"component","required":false,"typeRef":359},{"name":"size","source":"component","required":false,"typeRef":359},{"name":"variant","source":"component","required":false,"typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Action labels must describe their effect; destructive actions require confirmation."]},{"name":"RemoveScroll","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/remove-scroll/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Changes global page scrolling"},{"name":"RingProgress","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/ring-progress/","props":[{"name":"attributes","required":false,"source":"component","typeRef":433},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"label","required":false,"source":"component","description":"Label displayed in the center of the ring","typeRef":263},{"name":"rootColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the unfilled portion of the ring (background). Defaults to gray-2 in light mode, dark-4 in dark mode","typeRef":162},{"name":"roundCaps","required":false,"source":"component","literalValues":[false,true],"description":"Applies rounded line caps to the start and end of visible sections","typeRef":341},{"name":"sectionGap","required":false,"source":"component","description":"Gap between sections in degrees. Reduces the visual size of each section","typeRef":353},{"name":"sections","required":true,"source":"component","description":"Array of sections to display in the ring. Each section should have a `value` (0-100), `color`, and optional `tooltip`. Sections can also receive any valid SVG circle element props.","typeRef":271},{"name":"size","required":false,"source":"component","description":"Width and height of the progress ring","typeRef":353},{"name":"startAngle","required":false,"source":"component","description":"Starting angle in degrees. 0 = right, 90 = bottom, 180 = left, 270 = top","typeRef":353},{"name":"thickness","required":false,"source":"component","description":"Ring thickness in pixels. Cannot exceed size / 4 and will be automatically clamped if necessary","typeRef":353},{"name":"transitionDuration","required":false,"source":"component","description":"Transition duration in milliseconds for section value and color changes","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"RollingNumber","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/rolling-number/","props":[{"name":"animationDuration","required":false,"source":"component","description":"Animation duration in milliseconds","typeRef":353},{"name":"attributes","required":false,"source":"component","typeRef":458},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"decimalScale","required":false,"source":"component","description":"Number of decimal places to display","typeRef":353},{"name":"decimalSeparator","required":false,"source":"component","description":"Character used as a decimal separator","typeRef":359},{"name":"fixedDecimalScale","required":false,"source":"component","literalValues":[false,true],"description":"If set, trailing zeros are added to match `decimalScale`","typeRef":341},{"name":"suffix","required":false,"source":"component","description":"Suffix added after the value","typeRef":359},{"name":"tabularNumbers","required":false,"source":"component","literalValues":[false,true],"description":"If set, use tabular (monospace) numbers","typeRef":341},{"name":"thousandSeparator","required":false,"source":"component","description":"Character used to separate thousands, set to `true` for `,`","typeRef":364},{"name":"timingFunction","required":false,"source":"component","description":"CSS timing function for animation","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":true,"source":"component","description":"Number value to display","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withLiveRegion","required":false,"source":"component","literalValues":[false,true],"description":"If set, the root element acts as an `aria-live=\"polite\"` region (`role=\"status\"`) and screen readers announce every value change. When `false`, the root uses `role=\"img\"` so the current value is still accessible but updates are not announced.","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"SankeyChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/sankey-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":470},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"colors","required":false,"source":"component","description":"An array of colors used for nodes when no `color` is set on individual nodes","typeRef":164},{"name":"data","required":true,"source":"component","description":"Data used to render chart, must include `nodes` and `links` arrays","typeRef":272},{"name":"height","required":false,"source":"component","description":"Controls chart height","typeRef":353},{"name":"iterations","required":false,"source":"component","description":"The number of relaxation iterations","typeRef":353},{"name":"linkColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Default color for links, by default depends on color scheme","typeRef":162},{"name":"linkCurvature","required":false,"source":"component","description":"The curvature of links between nodes","typeRef":353},{"name":"linkOpacity","required":false,"source":"component","description":"Opacity of the link fill","typeRef":353},{"name":"nodeColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Default color for nodes, by default depends on color scheme","typeRef":162},{"name":"nodePadding","required":false,"source":"component","description":"The padding between nodes","typeRef":353},{"name":"nodeWidth","required":false,"source":"component","description":"The width of each node","typeRef":353},{"name":"sankeyProps","required":false,"source":"component","description":"Props passed down to recharts `Sankey` component","typeRef":205},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls text color of labels","typeRef":162},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip animation duration in ms","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to `Tooltip` recharts component","typeRef":197},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the tooltip should be displayed when hovered","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"ScatterChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/scatter-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":435},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data that is used to build the chart","typeRef":273},{"name":"dataKey","required":true,"source":"component","description":"Keys that should be used to retrieve data from the data array on x and y axis","typeRef":479},{"name":"gridAxis","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which lines should be displayed in the grid, `'x'` by default","typeRef":61},{"name":"gridColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the grid and cursor lines, by default depends on color scheme","typeRef":162},{"name":"gridProps","required":false,"source":"component","description":"Props passed down to the `CartesianGrid` component","typeRef":189},{"name":"labels","required":false,"source":"component","description":"Labels that should be used instead of keys names in the tooltip","typeRef":481},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to the `Legend` component","typeRef":190},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Chart orientation, `'horizontal'` by default","typeRef":36},{"name":"pointLabels","required":false,"source":"component","literalValues":["x","y"],"description":"If set, displays labels next to points for the given axis","typeRef":80},{"name":"referenceLines","required":false,"source":"component","description":"Reference lines that should be displayed on the chart","typeRef":149},{"name":"rightYAxisLabel","required":false,"source":"component","description":"A label to display next to the right y-axis","typeRef":359},{"name":"rightYAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component rendered on the right side","typeRef":199},{"name":"scatterChartProps","required":false,"source":"component","description":"Props passed down to recharts `ScatterChart` component","typeRef":91},{"name":"scatterProps","required":false,"source":"component","description":"Props passed down to recharts `Scatter` component","typeRef":207},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the text displayed inside the chart, `'dimmed'` by default","typeRef":162},{"name":"tickLine","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which axis should have tick line, `'y'` by default","typeRef":61},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip position animation duration in ms, `0` by default","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to the `Tooltip` component","typeRef":197},{"name":"unit","required":false,"source":"component","description":"Units displayed after value on axis and inside the tooltip","typeRef":481},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart legend should be displayed, `false` by default","typeRef":341},{"name":"withRightYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart tooltip should be displayed, `true` by default","typeRef":341},{"name":"withXAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether x-axis should be displayed, `true` by default","typeRef":341},{"name":"withYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether y-axis should be displayed, `true` by default","typeRef":341},{"name":"xAxisLabel","required":false,"source":"component","description":"A label to display below the x-axis","typeRef":359},{"name":"xAxisProps","required":false,"source":"component","description":"Props passed down to the `XAxis` recharts component","typeRef":198},{"name":"yAxisLabel","required":false,"source":"component","description":"A label to display next to the y-axis","typeRef":359},{"name":"yAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component","typeRef":199}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"ScrollArea","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/scroll-area/","props":[{"name":"attributes","required":false,"source":"component","typeRef":396},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"offsetScrollbars","required":false,"source":"component","literalValues":[false,"present",true,"x","y"],"description":"Determines whether scrollbars should be offset with padding on given axis - `true` - adds padding to offset both scrollbars (always) - `'x'` - adds padding to offset horizontal scrollbar (always) - `'y'` - adds padding to offset vertical scrollbar (always) - `'present'` - adds padding only when scrollbars are visible (dynamic)","typeRef":351},{"name":"overscrollBehavior","required":false,"source":"component","literalValues":["-moz-initial","auto","contain","inherit","initial","none","revert","revert-layer","unset"],"description":"Defines `overscroll-behavior` of the viewport","typeRef":253},{"name":"scrollHideDelay","required":false,"source":"component","description":"Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll`","typeRef":353},{"name":"scrollbarSize","required":false,"source":"component","description":"Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem)","typeRef":365},{"name":"scrollbars","required":false,"source":"component","literalValues":[false,"x","xy","y"],"description":"Axis at which scrollbars must be rendered - `'x'` - horizontal scrollbar only - `'y'` - vertical scrollbar only - `'xy'` - both scrollbars - `false` - no scrollbars rendered (content remains scrollable via mouse/touch)","typeRef":340},{"name":"startScrollPosition","required":false,"source":"component","description":"Initial scroll position set on mount","typeRef":480},{"name":"type","required":false,"source":"component","literalValues":["always","auto","hover","never","scroll"],"description":"Defines scrollbars behavior - `'hover'` – scrollbars visible on hover (default) - `'scroll'` – scrollbars visible during scrolling - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto) - `'always'` – scrollbars always visible, even when content doesn't overflow - `'never'` – scrollbars always hidden","typeRef":12},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"viewportProps","required":false,"source":"component","description":"Props passed down to the viewport element","typeRef":259}],"blockedProps":[],"subcomponents":["ScrollArea.Autosize"],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"ScrollArea.Autosize","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/scroll-area/","props":[{"name":"attributes","required":false,"source":"component","typeRef":396},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"offsetScrollbars","required":false,"source":"component","literalValues":[false,"present",true,"x","y"],"description":"Determines whether scrollbars should be offset with padding on given axis - `true` - adds padding to offset both scrollbars (always) - `'x'` - adds padding to offset horizontal scrollbar (always) - `'y'` - adds padding to offset vertical scrollbar (always) - `'present'` - adds padding only when scrollbars are visible (dynamic)","typeRef":351},{"name":"overscrollBehavior","required":false,"source":"component","literalValues":["-moz-initial","auto","contain","inherit","initial","none","revert","revert-layer","unset"],"description":"Defines `overscroll-behavior` of the viewport","typeRef":253},{"name":"scrollHideDelay","required":false,"source":"component","description":"Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll`","typeRef":353},{"name":"scrollbarSize","required":false,"source":"component","description":"Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem)","typeRef":365},{"name":"scrollbars","required":false,"source":"component","literalValues":[false,"x","xy","y"],"description":"Axis at which scrollbars must be rendered - `'x'` - horizontal scrollbar only - `'y'` - vertical scrollbar only - `'xy'` - both scrollbars - `false` - no scrollbars rendered (content remains scrollable via mouse/touch)","typeRef":340},{"name":"startScrollPosition","required":false,"source":"component","description":"Initial scroll position set on mount","typeRef":480},{"name":"type","required":false,"source":"component","literalValues":["always","auto","hover","never","scroll"],"description":"Defines scrollbars behavior - `'hover'` – scrollbars visible on hover (default) - `'scroll'` – scrollbars visible during scrolling - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto) - `'always'` – scrollbars always visible, even when content doesn't overflow - `'never'` – scrollbars always hidden","typeRef":12},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"viewportProps","required":false,"source":"component","description":"Props passed down to the viewport element","typeRef":259}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"ScrollAreaAutosize","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/scroll-area-autosize/","props":[{"name":"attributes","required":false,"source":"component","typeRef":396},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"offsetScrollbars","required":false,"source":"component","literalValues":[false,"present",true,"x","y"],"description":"Determines whether scrollbars should be offset with padding on given axis - `true` - adds padding to offset both scrollbars (always) - `'x'` - adds padding to offset horizontal scrollbar (always) - `'y'` - adds padding to offset vertical scrollbar (always) - `'present'` - adds padding only when scrollbars are visible (dynamic)","typeRef":351},{"name":"overscrollBehavior","required":false,"source":"component","literalValues":["-moz-initial","auto","contain","inherit","initial","none","revert","revert-layer","unset"],"description":"Defines `overscroll-behavior` of the viewport","typeRef":253},{"name":"scrollHideDelay","required":false,"source":"component","description":"Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll`","typeRef":353},{"name":"scrollbarSize","required":false,"source":"component","description":"Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem)","typeRef":365},{"name":"scrollbars","required":false,"source":"component","literalValues":[false,"x","xy","y"],"description":"Axis at which scrollbars must be rendered - `'x'` - horizontal scrollbar only - `'y'` - vertical scrollbar only - `'xy'` - both scrollbars - `false` - no scrollbars rendered (content remains scrollable via mouse/touch)","typeRef":340},{"name":"startScrollPosition","required":false,"source":"component","description":"Initial scroll position set on mount","typeRef":480},{"name":"type","required":false,"source":"component","literalValues":["always","auto","hover","never","scroll"],"description":"Defines scrollbars behavior - `'hover'` – scrollbars visible on hover (default) - `'scroll'` – scrollbars visible during scrolling - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto) - `'always'` – scrollbars always visible, even when content doesn't overflow - `'never'` – scrollbars always hidden","typeRef":12},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"viewportProps","required":false,"source":"component","description":"Props passed down to the viewport element","typeRef":259}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Scroller","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/scroller/","props":[{"name":"attributes","required":false,"source":"component","typeRef":393},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"controlSize","required":false,"source":"component","description":"Size of the control buttons,","typeRef":365},{"name":"draggable","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether content can be scrolled by dragging with mouse, `true` by default","typeRef":341},{"name":"edgeGradientColor","required":false,"source":"component","description":"Background color for the gradient fade on controls, `'var(--mantine-color-body)'` by default","typeRef":359},{"name":"endControlIcon","required":false,"source":"component","description":"Icon component for the end control, AccordionChevron by default","typeRef":263},{"name":"endControlProps","required":false,"source":"component","description":"Props passed to the end control button","typeRef":258},{"name":"scrollAmount","required":false,"source":"component","description":"Amount of pixels to scroll when clicking the control buttons, `200` by default","typeRef":353},{"name":"showEndControl","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether end control should always be visible regardless of scroll position, `false` by default","typeRef":341},{"name":"showStartControl","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether start control should always be visible regardless of scroll position, `false` by default","typeRef":341},{"name":"startControlIcon","required":false,"source":"component","description":"Icon component for the start control, AccordionChevron by default","typeRef":263},{"name":"startControlProps","required":false,"source":"component","description":"Props passed to the start control button","typeRef":258},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"SegmentedControl","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/segmented-control/","props":[{"name":"attributes","required":false,"source":"component","typeRef":407},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, automatically adjusts label text color for optimal contrast against the indicator background color","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, changes indicator background color. By default, uses white in light mode and dark.5 in dark mode","typeRef":162},{"name":"data","required":true,"source":"component","description":"Data based on which controls are rendered","typeRef":108},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":328},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the component should take 100% width of its parent","typeRef":341},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Component orientation","typeRef":36},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size`, `padding` and `height` properties","typeRef":182},{"name":"transitionDuration","required":false,"source":"component","description":"Indicator `transition-duration` in ms, set `0` to turn off transitions","typeRef":353},{"name":"transitionTimingFunction","required":false,"source":"component","description":"Indicator `transition-timing-function` property","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":328},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withItemsBorders","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether there should be borders between items","typeRef":341}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Select","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/select/","props":[{"name":"allowDeselect","required":false,"source":"component","literalValues":[false,true],"description":"Allows deselecting the selected option by clicking it","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":405},{"name":"autoSelectOnBlur","required":false,"source":"component","literalValues":[false,true],"description":"Automatically selects the highlighted option when input loses focus","typeRef":341},{"name":"checkIconPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the check icon relative to the option label","typeRef":47},{"name":"chevronColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the default chevron, by default depends on the color scheme","typeRef":162},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":172},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"Displays clear button in the right section when component has value","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"comboboxProps","required":false,"source":"component","description":"Props passed down to `Combobox` component","typeRef":153},{"name":"data","required":false,"source":"component","description":"Data used to generate options. Values must be unique, otherwise an error will be thrown and component will not render.","typeRef":151},{"name":"defaultDropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled dropdown initial opened state","typeRef":341},{"name":"defaultSearchValue","required":false,"source":"component","description":"Default search value","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":329},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"dropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled dropdown opened state","typeRef":341},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"floatingHeight","required":false,"source":"component","literalValues":["viewport"],"description":"If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware.","typeRef":78},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":195},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"limit","required":false,"source":"component","description":"Maximum number of options displayed at a time, `Infinity` by default","typeRef":353},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxDropdownHeight","required":false,"source":"component","description":"`max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default","typeRef":365},{"name":"nothingFoundMessage","required":false,"source":"component","description":"Message displayed when no options match the search query or when there is no data","typeRef":263},{"name":"openOnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Opens dropdown when input receives focus (requires searchable={true})","typeRef":341},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props passed down to the underlying `ScrollArea` component in the dropdown","typeRef":274},{"name":"searchValue","required":false,"source":"component","description":"Controlled search value","typeRef":359},{"name":"searchable","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the select should be searchable","typeRef":341},{"name":"selectFirstOptionOnChange","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when value changes, `false` by default","typeRef":341},{"name":"selectFirstOptionOnDropdownOpen","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when dropdown opens, `false` by default","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":329},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAlignedLabels","required":false,"source":"component","literalValues":[false,true],"description":"Aligns unchecked labels with the checked one","typeRef":341},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withCheckIcon","required":false,"source":"component","literalValues":[false,true],"description":"Displays check icon near the selected option label","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withScrollArea","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"SemiCircleProgress","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/semi-circle-progress/","props":[{"name":"attributes","required":false,"source":"component","typeRef":434},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"emptySegmentColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color value","typeRef":162},{"name":"fillDirection","required":false,"source":"component","literalValues":["left-to-right","right-to-left"],"description":"Direction from which the circle is filled","typeRef":66},{"name":"filledSegmentColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color value","typeRef":162},{"name":"label","required":false,"source":"component","description":"Label rendered inside the circle","typeRef":263},{"name":"labelPosition","required":false,"source":"component","literalValues":["bottom","center"],"description":"Label position relative to the circle center","typeRef":21},{"name":"orientation","required":false,"source":"component","literalValues":["down","up"],"description":"Orientation of the circle","typeRef":76},{"name":"size","required":false,"source":"component","description":"Width of the component and diameter of the full circle in px. The visible SVG height will be size/2","typeRef":353},{"name":"thickness","required":false,"source":"component","description":"Stroke width of the circle segments in px","typeRef":353},{"name":"transitionDuration","required":false,"source":"component","description":"Transition duration for the filled segment progress changes in ms. Does not affect color transitions","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":true,"source":"component","description":"Progress value from `0` to `100`","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"SimpleGrid","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/simple-grid/","props":[{"name":"attributes","required":false,"source":"component","typeRef":455},{"name":"autoFlow","required":false,"source":"component","literalValues":["auto-fill","auto-fit"],"description":"Grid repeat type when minColWidth is set","typeRef":13},{"name":"autoRows","required":false,"source":"component","description":"Sets the size of implicitly created grid rows","typeRef":359},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"cols","required":false,"source":"component","description":"Number of columns","typeRef":312},{"name":"minColWidth","required":false,"source":"component","description":"Minimum column width when using auto-fit/auto-fill. When set, cols prop is ignored","typeRef":365},{"name":"spacing","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Spacing between columns","typeRef":284},{"name":"type","required":false,"source":"component","literalValues":["container","media"],"description":"Determines type of queries that are used for responsive styles","typeRef":51},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"verticalSpacing","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Spacing between rows. When not set, falls back to spacing value","typeRef":284}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Skeleton","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/skeleton/","props":[{"name":"animate","required":false,"source":"component","literalValues":[false,true],"description":"Enables animation","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"circle","required":false,"source":"component","literalValues":[false,true],"description":"If set, Skeleton `width` and `border-radius` are equal to its `height`","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"height","required":false,"source":"component","description":"Skeleton `height`, numbers are converted to rem","typeRef":247},{"name":"radius","required":false,"source":"component","description":"Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem.","typeRef":246},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"visible","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether Skeleton overlay should be displayed","typeRef":341},{"name":"width","required":false,"source":"component","description":"Skeleton `width`, numbers are converted to rem, ignored when `circle` prop is set.","typeRef":254}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"Slider","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/slider/","props":[{"name":"attributes","required":false,"source":"component","typeRef":424},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls color of track and thumb","typeRef":162},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":353},{"name":"domain","required":false,"source":"component","description":"Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain).","typeRef":334},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":261},{"name":"inverted","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether track value representation should be inverted","typeRef":341},{"name":"labelAlwaysOn","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the label should be visible when the slider is not being dragged or hovered","typeRef":341},{"name":"labelTransitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component","typeRef":208},{"name":"marks","required":false,"source":"component","description":"Marks displayed on the track","typeRef":276},{"name":"max","required":false,"source":"component","description":"Maximum possible value","typeRef":353},{"name":"min","required":false,"source":"component","description":"Minimal possible value","typeRef":353},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Slider orientation","typeRef":36},{"name":"precision","required":false,"source":"component","description":"Number of significant digits after the decimal point","typeRef":353},{"name":"restrictToMarks","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the selection should be only allowed from the given marks array","typeRef":341},{"name":"showLabelOnHover","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the label should be displayed when the slider is hovered","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the track","typeRef":355},{"name":"startPointValue","required":false,"source":"component","description":"Value at which the filled bar starts. When set, the bar extends from this point toward the current value. Ignored when `inverted` is set.","typeRef":353},{"name":"step","required":false,"source":"component","description":"Number by which value will be incremented/decremented with thumb drag and arrows","typeRef":353},{"name":"thumbChildren","required":false,"source":"component","description":"Content rendered inside thumb","typeRef":263},{"name":"thumbLabel","required":false,"source":"component","description":"Thumb `aria-label`","typeRef":359},{"name":"thumbProps","required":false,"source":"component","description":"Props passed down to thumb element","typeRef":259},{"name":"thumbSize","required":false,"source":"component","description":"Thumb `width` and `height`, by default value is computed based on `size` prop","typeRef":365},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"number","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Space","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/space/","props":[{"name":"attributes","required":false,"source":"component","typeRef":369},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":369},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Sparkline","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/sparkline/","props":[{"name":"areaProps","required":false,"source":"component","description":"Props passed down to the underlying recharts `Area` component","typeRef":188},{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"connectNulls","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether null values should be connected with other values","typeRef":341},{"name":"curveType","required":false,"source":"component","literalValues":["bump","linear","monotone","natural","step","stepAfter","stepBefore"],"description":"Type of the curve","typeRef":69},{"name":"data","required":true,"source":"component","description":"Data used to render the chart","typeRef":109},{"name":"fillOpacity","required":false,"source":"component","description":"Controls fill opacity of the area","typeRef":353},{"name":"strokeWidth","required":false,"source":"component","description":"Area stroke width","typeRef":353},{"name":"trendColors","required":false,"source":"component","description":"If set, `color` prop is ignored and chart color is determined by the difference between first and last value.","typeRef":277},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withGradient","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the chart fill should be a gradient","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Splitter","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/splitter/","props":[{"name":"attributes","required":false,"source":"component","typeRef":468},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"handleColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color for the separator line","typeRef":162},{"name":"handleIcon","required":false,"source":"component","description":"Custom icon displayed in the handle thumb, by default uses grip icon based on orientation","typeRef":263},{"name":"lineSize","required":false,"source":"component","description":"CSS value for separator line thickness between panes","typeRef":365},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Layout direction","typeRef":36},{"name":"resetOnDoubleClick","required":false,"source":"component","literalValues":[false,true],"description":"Restore the two panes adjacent to a handle to their default ratio (preserving their combined size) when the handle is double-clicked","typeRef":341},{"name":"shiftStep","required":false,"source":"component","description":"Shift+arrow step size, a `number`/`%` is a percentage, `px`/`rem` is resolved to pixels","typeRef":280},{"name":"sizes","required":false,"source":"component","description":"Controlled sizes, each value keeps the unit it was declared in (number/`%` flexible, `px`/`rem` fixed)","typeRef":279},{"name":"step","required":false,"source":"component","description":"Keyboard step size, a `number`/`%` is a percentage, `px`/`rem` is resolved to pixels","typeRef":280},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withHandle","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the thumb with grip icon is displayed on the handle","typeRef":341}],"blockedProps":[],"subcomponents":["Splitter.Pane"],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Splitter.Pane","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/splitter/","props":[{"name":"collapseThreshold","required":false,"source":"component","description":"Size below which the pane snaps to collapsed, defaults to `min`","typeRef":278},{"name":"collapsible","required":false,"source":"component","literalValues":[false,true],"description":"Whether this pane can be collapsed","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultSize","required":true,"source":"component","description":"Initial size, a `number`/`%` is a flexible size (shares leftover space), `px`/`rem` is a fixed size. A bare number is treated as a percentage.","typeRef":278},{"name":"max","required":false,"source":"component","description":"Maximum size in the same units as `defaultSize`, no limit by default","typeRef":278},{"name":"min","required":false,"source":"component","description":"Minimum size in the same units as `defaultSize`","typeRef":278},{"name":"styles","required":false,"source":"component","typeRef":222},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"SplitterPane","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/splitter-pane/","props":[{"name":"collapseThreshold","required":false,"source":"component","description":"Size below which the pane snaps to collapsed, defaults to `min`","typeRef":278},{"name":"collapsible","required":false,"source":"component","literalValues":[false,true],"description":"Whether this pane can be collapsed","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultSize","required":true,"source":"component","description":"Initial size, a `number`/`%` is a flexible size (shares leftover space), `px`/`rem` is a fixed size. A bare number is treated as a percentage.","typeRef":278},{"name":"max","required":false,"source":"component","description":"Maximum size in the same units as `defaultSize`, no limit by default","typeRef":278},{"name":"min","required":false,"source":"component","description":"Minimum size in the same units as `defaultSize`","typeRef":278},{"name":"styles","required":false,"source":"component","typeRef":222},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Spoiler","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/spoiler/","props":[{"name":"attributes","required":false,"source":"component","typeRef":394},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultExpanded","required":false,"source":"component","literalValues":[false,true],"description":"Initial expanded state in uncontrolled mode. If `true`, content starts expanded. If `false`, content starts collapsed","typeRef":341},{"name":"expanded","required":false,"source":"component","literalValues":[false,true],"description":"Controlled expanded state value","typeRef":341},{"name":"hideAriaLabel","required":false,"source":"component","description":"Accessible label for the toggle button when expanded. If not set, `hideLabel` is used","typeRef":359},{"name":"hideLabel","required":false,"source":"component","description":"Content displayed in the toggle button when content is expanded (to collapse)","typeRef":263},{"name":"maxHeight","required":false,"source":"component","description":"Maximum height of visible content in px. When content exceeds this height, the toggle control appears","typeRef":353},{"name":"showAriaLabel","required":false,"source":"component","description":"Accessible label for the toggle button when collapsed. If not set, `showLabel` is used","typeRef":359},{"name":"showLabel","required":false,"source":"component","description":"Content displayed in the toggle button when content is collapsed (to expand)","typeRef":263},{"name":"transitionDuration","required":false,"source":"component","description":"Spoiler reveal transition duration in ms. Set to 0 to disable animation","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Stack","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/stack/","props":[{"name":"align","required":false,"source":"component","literalValues":["-moz-initial","anchor-center","baseline","center","end","flex-end","flex-start","inherit","initial","normal","revert","revert-layer","self-end","self-start","start","stretch","unset"],"description":"Controls `align-items` CSS property","typeRef":244},{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value to set `gap` property, numbers are converted to rem","typeRef":183},{"name":"justify","required":false,"source":"component","literalValues":["-moz-initial","center","end","flex-end","flex-start","inherit","initial","left","normal","revert","revert-layer","right","space-around","space-between","space-evenly","start","stretch","unset"],"description":"Controls `justify-content` CSS property","typeRef":248},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"StatBar","package":"@homarr/widgets","category":"interaction","safety":"allowed","description":"Displays a compact labeled statistic and progress value.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"color","source":"component","required":false,"typeRef":359},{"name":"label","source":"component","required":false,"typeRef":359},{"name":"max","source":"component","required":false,"typeRef":353},{"name":"value","source":"component","required":true,"typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Stepper","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/stepper/","props":[{"name":"active","required":true,"source":"component","description":"Index of the active step","typeRef":353},{"name":"allowNextStepsSelect","required":false,"source":"component","literalValues":[false,true],"description":"When true, users can click and jump to any step. When false, users can only navigate to completed steps","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":397},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls colors of active and progress steps","typeRef":162},{"name":"contentPadding","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content","typeRef":183},{"name":"iconPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Icon position relative to the step body","typeRef":47},{"name":"iconSize","required":false,"source":"component","description":"Controls size of the step icon, by default icon size is inferred from `size` prop","typeRef":365},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, all step content is kept mounted. React 19 `Activity` is used to preserve state while content is hidden.","typeRef":341},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Stepper orientation","typeRef":36},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of various Stepper elements","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"wrap","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether steps should wrap to the next line if no space is available","typeRef":341}],"blockedProps":[],"subcomponents":["Stepper.Completed","Stepper.Step"],"bind":{"type":"number","initialProp":"defaultValue"},"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Stepper.Completed","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/stepper/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Stepper.Step","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/stepper/","props":[{"name":"allowStepClick","required":false,"source":"component","literalValues":[false,true],"description":"Set to false to disable clicks on step","typeRef":341},{"name":"allowStepSelect","required":false,"source":"component","literalValues":[false,true],"description":"Should step selection be allowed","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors`, by default controlled by Stepper component","typeRef":162},{"name":"iconPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Icon position relative to step body, controlled by Stepper component","typeRef":47},{"name":"iconSize","required":false,"source":"component","description":"Icon wrapper size","typeRef":365},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Indicates loading state of the step","typeRef":341},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Component orientation","typeRef":36},{"name":"state","required":false,"source":"component","literalValues":["stepCompleted","stepInactive","stepProgress"],"description":"Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed","typeRef":70},{"name":"step","required":false,"source":"component","description":"0-based step index, automatically set by Stepper component","typeRef":353},{"name":"styles","required":false,"source":"component","typeRef":235},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withIcon","required":false,"source":"component","literalValues":[false,true],"description":"When false, hides the step icon. Useful for creating compact steppers with only labels","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"StepperCompleted","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/stepper-completed/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"StepperStep","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/stepper-step/","props":[{"name":"allowStepClick","required":false,"source":"component","literalValues":[false,true],"description":"Set to false to disable clicks on step","typeRef":341},{"name":"allowStepSelect","required":false,"source":"component","literalValues":[false,true],"description":"Should step selection be allowed","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors`, by default controlled by Stepper component","typeRef":162},{"name":"iconPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Icon position relative to step body, controlled by Stepper component","typeRef":47},{"name":"iconSize","required":false,"source":"component","description":"Icon wrapper size","typeRef":365},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Indicates loading state of the step","typeRef":341},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Component orientation","typeRef":36},{"name":"state","required":false,"source":"component","literalValues":["stepCompleted","stepInactive","stepProgress"],"description":"Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed","typeRef":70},{"name":"step","required":false,"source":"component","description":"0-based step index, automatically set by Stepper component","typeRef":353},{"name":"styles","required":false,"source":"component","typeRef":235},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withIcon","required":false,"source":"component","literalValues":[false,true],"description":"When false, hides the step icon. Useful for creating compact steppers with only labels","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"SubData","package":"@homarr/widgets","category":"network","safety":"wrapped","description":"Reads a nested value from a named manual-query result.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"as","source":"component","required":false,"literalValues":["Text","Title","Badge","Code","Image"],"typeRef":84},{"name":"c","source":"component","required":false,"typeRef":359},{"name":"color","source":"component","required":false,"typeRef":359},{"name":"fit","source":"component","required":false,"typeRef":359},{"name":"fw","source":"component","required":false,"typeRef":353},{"name":"h","source":"component","required":false,"typeRef":365},{"name":"order","source":"component","required":false,"literalValues":[1,2,3,4,5,6],"typeRef":135},{"name":"radius","source":"component","required":false,"typeRef":365},{"name":"size","source":"component","required":false,"typeRef":359},{"name":"variant","source":"component","required":false,"typeRef":359},{"name":"w","source":"component","required":false,"typeRef":365}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Action labels must describe their effect; destructive actions require confirmation."]},{"name":"SubFetch","package":"@homarr/widgets","category":"network","safety":"wrapped","description":"Runs a named manual query with invocation-time parameters.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"as","source":"component","required":false,"literalValues":["json","text"],"typeRef":86},{"name":"errorMessage","source":"component","required":false,"typeRef":359},{"name":"fallback","source":"component","required":false,"typeRef":264},{"name":"loadingLabel","source":"component","required":false,"typeRef":359},{"name":"params","source":"component","required":false,"typeRef":270},{"name":"refreshInterval","source":"component","required":false,"typeRef":353},{"name":"requestId","source":"component","required":false,"description":"Identifier of the named Custom Widget query.","typeRef":359},{"name":"trigger","source":"component","required":false,"literalValues":["auto","manual"],"typeRef":85},{"name":"triggerAriaLabel","source":"component","required":false,"description":"Accessible label for a custom manual-query trigger.","typeRef":359},{"name":"triggerContent","source":"component","required":false,"description":"Custom accessible trigger shown before a manual query runs.","typeRef":264}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Action labels must describe their effect; destructive actions require confirmation."]},{"name":"Switch","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/switch/","props":[{"name":"attributes","required":false,"source":"component","typeRef":375},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to set input color in checked state","typeRef":162},{"name":"description","required":false,"source":"component","description":"Description displayed below the label","typeRef":263},{"name":"error","required":false,"source":"component","description":"Error displayed below the label","typeRef":263},{"name":"label","required":false,"source":"component","description":"Content of the label associated with the switch","typeRef":263},{"name":"labelPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the label relative to the input","typeRef":47},{"name":"offLabel","required":false,"source":"component","description":"Inner label when the `Switch` is in unchecked state","typeRef":263},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of all elements","typeRef":182},{"name":"thumbIcon","required":false,"source":"component","description":"Icon inside the thumb of the switch","typeRef":263},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withThumbIndicator","required":false,"source":"component","literalValues":[false,true],"description":"If set, displays a colored dot inside the thumb that matches the track background color","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":103}],"blockedProps":[],"subcomponents":["Switch.Group"],"bind":{"type":"boolean","initialProp":"defaultChecked"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Switch.Group","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/switch/","props":[{"name":"attributes","required":false,"source":"component","typeRef":426},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":330},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input for uncontrolled forms","typeRef":104},{"name":"hiddenInputValuesSeparator","required":false,"source":"component","description":"Separator for values in the hidden input for uncontrolled forms","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelElement","required":false,"source":"component","literalValues":["div","label"],"description":"Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually.","typeRef":31},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"maxSelectedValues","required":false,"source":"component","description":"Maximum number of switches that can be selected. When the limit is reached, unselected switches will be disabled","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the `Input.Wrapper`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":330},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the `Input.Wrapper`","typeRef":103}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string[]","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"SwitchGroup","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/switch-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":426},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":330},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input for uncontrolled forms","typeRef":104},{"name":"hiddenInputValuesSeparator","required":false,"source":"component","description":"Separator for values in the hidden input for uncontrolled forms","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelElement","required":false,"source":"component","literalValues":["div","label"],"description":"Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually.","typeRef":31},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"maxSelectedValues","required":false,"source":"component","description":"Maximum number of switches that can be selected. When the limit is reached, unselected switches will be disabled","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the `Input.Wrapper`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":330},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the `Input.Wrapper`","typeRef":103}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string[]","initialProp":"defaultValue"},"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TabPanel","package":"@homarr/widgets","category":"interaction","safety":"allowed","description":"Renders content for one declarative tab.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"label","source":"component","required":false,"typeRef":359},{"name":"value","source":"component","required":true,"typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Table","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","left","right"],"typeRef":22},{"name":"attributes","required":false,"source":"component","typeRef":389},{"name":"borderColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of table borders, key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"captionSide","required":false,"source":"component","literalValues":["bottom","top"],"description":"Side of the `Table.Caption`","typeRef":16},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":false,"source":"component","description":"Data used to generate table, ignored if `children` prop is set","typeRef":315},{"name":"highlightOnHover","required":false,"source":"component","literalValues":[false,true],"description":"If set, table rows background changes to `highlightOnHoverColor` when hovered","typeRef":341},{"name":"highlightOnHoverColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Background color of table rows when hovered, key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"horizontalSpacing","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Horizontal cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem","typeRef":183},{"name":"layout","required":false,"source":"component","literalValues":["-moz-initial","auto","fixed","inherit","initial","revert","revert-layer","unset"],"description":"Value of `table-layout` style","typeRef":1},{"name":"stickyHeader","required":false,"source":"component","literalValues":[false,true],"description":"If set, `Table.Thead` is sticky","typeRef":341},{"name":"stickyHeaderOffset","required":false,"source":"component","description":"Offset from top at which `Table.Thead` should become sticky","typeRef":365},{"name":"striped","required":false,"source":"component","literalValues":["even",false,"odd",true],"description":"If set, every odd/even row background changes to `stripedColor`, if set to `true`, then `odd` value will be used","typeRef":345},{"name":"stripedColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Background color of striped rows, key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"tabularNums","required":false,"source":"component","literalValues":[false,true],"description":"If set, `font-variant-numeric: tabular-nums` style is applied","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129},{"name":"verticalSpacing","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Vertical cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem","typeRef":183},{"name":"withColumnBorders","required":false,"source":"component","literalValues":[false,true],"description":"If set, the table has borders between columns","typeRef":341},{"name":"withRowBorders","required":false,"source":"component","literalValues":[false,true],"description":"If set, the table has borders between rows","typeRef":341},{"name":"withTableBorder","required":false,"source":"component","literalValues":[false,true],"description":"If set, the table has the outer border","typeRef":341}],"blockedProps":[],"subcomponents":["Table.Caption","Table.DataRenderer","Table.ScrollContainer","Table.Tbody","Table.Td","Table.Tfoot","Table.Th","Table.Thead","Table.Tr"],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.Caption","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.DataRenderer","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"data","required":true,"source":"component","typeRef":315}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.ScrollContainer","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"attributes","required":false,"source":"component","typeRef":472},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"maxHeight","required":false,"source":"component","description":"`max-height` of the `Table` at which it should become scrollable","typeRef":250},{"name":"minWidth","required":false,"source":"component","description":"`min-width` of the `Table` at which it should become scrollable","typeRef":251},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props passed down to `ScrollArea` component, not applicable with `type=\"native\"`","typeRef":274},{"name":"type","required":false,"source":"component","literalValues":["native","scrollarea"],"description":"Type of the scroll container, `native` to use native scrollbars, `scrollarea` to use `ScrollArea` component","typeRef":53},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.Tbody","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.Td","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","char","justify","left","right"],"typeRef":23},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.Tfoot","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.Th","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","char","justify","left","right"],"typeRef":23},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.Thead","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.Tr","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableCaption","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-caption/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableOfContents","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/table-of-contents/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Observes headings and scrolling outside the widget root"},{"name":"TableScrollContainer","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-scroll-container/","props":[{"name":"attributes","required":false,"source":"component","typeRef":472},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"maxHeight","required":false,"source":"component","description":"`max-height` of the `Table` at which it should become scrollable","typeRef":250},{"name":"minWidth","required":false,"source":"component","description":"`min-width` of the `Table` at which it should become scrollable","typeRef":251},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props passed down to `ScrollArea` component, not applicable with `type=\"native\"`","typeRef":274},{"name":"type","required":false,"source":"component","literalValues":["native","scrollarea"],"description":"Type of the scroll container, `native` to use native scrollbars, `scrollarea` to use `ScrollArea` component","typeRef":53},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableTbody","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-tbody/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableTd","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-td/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","char","justify","left","right"],"typeRef":23},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableTfoot","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-tfoot/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableTh","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-th/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","char","justify","left","right"],"typeRef":23},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableThead","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-thead/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableTr","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-tr/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TablerIcon","package":"@homarr/widgets","category":"content","safety":"wrapped","description":"Resolves an installed Tabler icon by its safe name.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"color","source":"component","required":false,"typeRef":359},{"name":"name","source":"component","required":true,"typeRef":359},{"name":"size","source":"component","required":false,"typeRef":365},{"name":"stroke","source":"component","required":false,"typeRef":365}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Tabs","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tabs/","props":[{"name":"activateTabWithKeyboard","required":false,"source":"component","literalValues":[false,true],"description":"If set, tab is activated with arrow key press","typeRef":341},{"name":"allowTabDeactivation","required":false,"source":"component","literalValues":[false,true],"description":"If set, tab can be deactivated","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":466},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `pills` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants","typeRef":162},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":352},{"name":"inverted","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether tabs should have inverted styles","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active","typeRef":341},{"name":"keepMountedMode","required":false,"source":"component","literalValues":["activity","display-none"],"description":"Controls how inactive tabs content is hidden when `keepMounted` is `true`, `'activity'` – hidden with `Activity` component, `'display-none'` – hidden with `display: none` styles","typeRef":7},{"name":"loop","required":false,"source":"component","literalValues":[false,true],"description":"If set, arrow key presses loop though items (first to last and last to first)","typeRef":341},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Tabs orientation","typeRef":36},{"name":"placement","required":false,"source":"component","literalValues":["left","right"],"description":"`Tabs.List` placement relative to `Tabs.Panel`, applicable only when `orientation=\"vertical\"`","typeRef":47},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":352},{"name":"variant","required":false,"source":"component","literalValues":["default","outline","pills"],"typeRef":130}],"blockedProps":[],"subcomponents":["Tabs.List","Tabs.Panel","Tabs.Tab"],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Tabs.List","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tabs/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"grow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether tabs should take all available space","typeRef":341},{"name":"justify","required":false,"source":"component","literalValues":["-moz-initial","center","end","flex-end","flex-start","inherit","initial","left","normal","revert","revert-layer","right","space-around","space-between","space-evenly","start","stretch","unset"],"description":"Tabs alignment","typeRef":248},{"name":"styles","required":false,"source":"component","typeRef":221},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Tabs.Panel","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tabs/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":223},{"name":"value","required":true,"source":"component","description":"Value of associated control","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Tabs.Tab","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tabs/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls tab color based on `variant`","typeRef":162},{"name":"leftSection","required":false,"source":"component","description":"Content displayed on the left side of the label","typeRef":263},{"name":"rightSection","required":false,"source":"component","description":"Content displayed on the right side of the label","typeRef":263},{"name":"size","required":false,"source":"component","description":"Size passed from parent component, sets `data-size` if value is not number like","typeRef":365},{"name":"styles","required":false,"source":"component","typeRef":236},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":true,"source":"component","description":"Value of associated panel","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TabsContainer","package":"@homarr/widgets","category":"interaction","safety":"allowed","description":"Renders a declarative tab container.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"defaultTab","source":"component","required":false,"typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"TabsList","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tabs-list/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"grow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether tabs should take all available space","typeRef":341},{"name":"justify","required":false,"source":"component","literalValues":["-moz-initial","center","end","flex-end","flex-start","inherit","initial","left","normal","revert","revert-layer","right","space-around","space-between","space-evenly","start","stretch","unset"],"description":"Tabs alignment","typeRef":248},{"name":"styles","required":false,"source":"component","typeRef":221},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TabsPanel","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tabs-panel/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":223},{"name":"value","required":true,"source":"component","description":"Value of associated control","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TabsTab","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tabs-tab/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls tab color based on `variant`","typeRef":162},{"name":"leftSection","required":false,"source":"component","description":"Content displayed on the left side of the label","typeRef":263},{"name":"rightSection","required":false,"source":"component","description":"Content displayed on the right side of the label","typeRef":263},{"name":"size","required":false,"source":"component","description":"Size passed from parent component, sets `data-size` if value is not number like","typeRef":365},{"name":"styles","required":false,"source":"component","typeRef":236},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":true,"source":"component","description":"Value of associated panel","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TagsInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tags-input/","props":[{"name":"acceptValueOnBlur","required":false,"source":"component","literalValues":[false,true],"description":"If set, the value typed in by the user but not submitted is accepted when the input is blurred","typeRef":341},{"name":"allowDuplicates","required":false,"source":"component","literalValues":[false,true],"description":"If set, duplicate tags are allowed","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":406},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":172},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"If set, the clear button is displayed in the right section when the component has value","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"comboboxProps","required":false,"source":"component","description":"Props passed down to `Combobox` component","typeRef":153},{"name":"data","required":false,"source":"component","description":"Data displayed in the dropdown. Values must be unique.","typeRef":152},{"name":"defaultDropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled dropdown initial opened state","typeRef":341},{"name":"defaultSearchValue","required":false,"source":"component","description":"Default search value","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":368},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"dropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled dropdown opened state","typeRef":341},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"floatingHeight","required":false,"source":"component","literalValues":["viewport"],"description":"If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware.","typeRef":78},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":195},{"name":"hiddenInputValuesDivider","required":false,"source":"component","description":"Divider used to separate values in the hidden input `value` attribute","typeRef":359},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"limit","required":false,"source":"component","description":"Maximum number of options displayed at a time, `Infinity` by default","typeRef":353},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxDropdownHeight","required":false,"source":"component","description":"`max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default","typeRef":365},{"name":"maxTags","required":false,"source":"component","description":"Maximum number of tags","typeRef":353},{"name":"openOnFocus","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown opens when the input receives focus","typeRef":341},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props passed down to the underlying `ScrollArea` component in the dropdown","typeRef":274},{"name":"searchValue","required":false,"source":"component","description":"Controlled search value","typeRef":359},{"name":"selectFirstOptionOnChange","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when value changes, `false` by default","typeRef":341},{"name":"selectFirstOptionOnDropdownOpen","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when dropdown opens, `false` by default","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"splitChars","required":false,"source":"component","description":"Characters that should trigger tags split, `[',']` by default","typeRef":368},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":368},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withPillsReorder","required":false,"source":"component","literalValues":[false,true],"description":"If set, tags can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set.","typeRef":341},{"name":"withScrollArea","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string[]","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Text","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/text/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration, ignored when `variant` is not `gradient`","typeRef":179},{"name":"inherit","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether font properties should be inherited from the parent","typeRef":341},{"name":"inline","required":false,"source":"component","literalValues":[false,true],"description":"Sets `line-height` to 1 for centering","typeRef":341},{"name":"lineClamp","required":false,"source":"component","description":"Number of lines after which Text will be truncated","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size` and `line-height`","typeRef":82},{"name":"span","required":false,"source":"component","literalValues":[false,true],"description":"Shorthand for `component=\"span\"`","typeRef":341},{"name":"textWrap","required":false,"source":"component","literalValues":["balance","nowrap","pretty","stable","wrap"],"description":"Controls `text-wrap` CSS property","typeRef":79},{"name":"truncate","required":false,"source":"component","literalValues":["end",false,"start",true],"description":"Side on which Text must be truncated, if `true`, text is truncated from the start","typeRef":344},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["gradient","text"],"typeRef":131}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TextInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/text-input/","props":[{"name":"attributes","required":false,"source":"component","typeRef":416},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Textarea","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/textarea/","props":[{"name":"attributes","required":false,"source":"component","typeRef":416},{"name":"autoComplete","required":false,"source":"component","typeRef":359},{"name":"autosize","required":false,"source":"component","literalValues":[false,true],"description":"If set, enables textarea height growing with its content","typeRef":341},{"name":"bottomSection","required":false,"source":"component","description":"Content rendered at the bottom of the input, inside the border","typeRef":263},{"name":"bottomSectionProps","required":false,"source":"component","description":"Props passed down to the `bottomSection` element","typeRef":259},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxRows","required":false,"source":"component","description":"Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set","typeRef":353},{"name":"minRows","required":false,"source":"component","description":"Minimum rows of autosize textarea, ignored if `autosize` prop is not set","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"resize","required":false,"source":"component","literalValues":["-moz-initial","block","both","horizontal","inherit","initial","inline","none","revert","revert-layer","unset","vertical"],"description":"Controls `resize` CSS property","typeRef":3},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ThemeIcon","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/theme-icon/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color.","typeRef":162},{"name":"gradient","required":false,"source":"component","description":"Gradient data used when `variant=\"gradient\"`","typeRef":179},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls width and height of the button. Numbers are converted to rem.","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","transparent","white"],"typeRef":132}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TimeGrid","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/time-grid/","props":[{"name":"allowDeselect","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the value can be deselected when the current active option is clicked or activated with keyboard","typeRef":341},{"name":"amPmLabels","required":false,"source":"component","description":"Labels used for am/pm values","typeRef":316},{"name":"attributes","required":false,"source":"component","typeRef":457},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Time data in 24h format to be displayed in the grid, for example `['10:00', '18:30', '22:00']`. Time values must be unique.","typeRef":368},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":352},{"name":"format","required":false,"source":"component","literalValues":["12h","24h"],"description":"Time format displayed in the grid","typeRef":6},{"name":"maxTime","required":false,"source":"component","description":"All controls after this time are disabled","typeRef":359},{"name":"minTime","required":false,"source":"component","description":"All controls before this time are disabled","typeRef":359},{"name":"simpleGridProps","required":false,"source":"component","description":"Props passed down to the underlying `SimpleGrid` component","typeRef":275},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Control `font-size` of controls, key of `theme.fontSizes` or any valid CSS value","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":352},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withSeconds","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the seconds part should be displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"TimeInput","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/time-input/","props":[{"name":"attributes","required":false,"source":"component","typeRef":416},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxTime","required":false,"source":"component","description":"Maximum possible string time, if `withSeconds` is true, time should be in format HH:mm:ss, otherwise HH:mm","typeRef":359},{"name":"minTime","required":false,"source":"component","description":"Minimum possible string time, if `withSeconds` is true, time should be in format HH:mm:ss, otherwise HH:mm","typeRef":359},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSeconds","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether seconds input should be displayed","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"TimePicker","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/time-picker/","props":[{"name":"amPmInputLabel","required":false,"source":"component","description":"`aria-label` of am/pm input","typeRef":359},{"name":"amPmLabels","required":false,"source":"component","description":"Labels used for am/pm values","typeRef":316},{"name":"amPmSelectProps","required":false,"source":"component","description":"Props passed down to am/pm select","typeRef":105},{"name":"attributes","required":false,"source":"component","typeRef":410},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to clear button","typeRef":92},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the clear button should be displayed","typeRef":341},{"name":"closeDropdownOnPresetSelect","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is closed when a value is selected from the presets list","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"format","required":false,"source":"component","literalValues":["12h","24h"],"description":"Time format, `'24h'` by default","typeRef":6},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":104},{"name":"hoursInputLabel","required":false,"source":"component","description":"`aria-label` of hours input","typeRef":359},{"name":"hoursInputProps","required":false,"source":"component","description":"Props passed down to hours input","typeRef":104},{"name":"hoursPlaceholder","required":false,"source":"component","description":"Hours input placeholder,","typeRef":359},{"name":"hoursStep","required":false,"source":"component","description":"Number by which hours are incremented/decremented","typeRef":353},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"max","required":false,"source":"component","description":"Max possible time value in `hh:mm:ss` format","typeRef":359},{"name":"maxDropdownContentHeight","required":false,"source":"component","description":"Maximum height of the content displayed in the dropdown in px","typeRef":353},{"name":"min","required":false,"source":"component","description":"Min possible time value in `hh:mm:ss` format","typeRef":359},{"name":"minHoursDigits","required":false,"source":"component","description":"Minimum number of digits displayed in the hours input, applicable only when `type=\"duration\"` is set","typeRef":353},{"name":"minutesInputLabel","required":false,"source":"component","description":"`aria-label` of minutes input","typeRef":359},{"name":"minutesInputProps","required":false,"source":"component","description":"Props passed down to minutes input","typeRef":104},{"name":"minutesPlaceholder","required":false,"source":"component","description":"Minutes input placeholder,","typeRef":359},{"name":"minutesStep","required":false,"source":"component","description":"Number by which minutes are incremented/decremented","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"popoverProps","required":false,"source":"component","description":"Props passed down to `Popover` component","typeRef":242},{"name":"presets","required":false,"source":"component","description":"Time presets to display in the dropdown","typeRef":317},{"name":"reverseTimeControlsList","required":false,"source":"component","literalValues":[false,true],"description":"If set, the time controls list are reversed,","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props passed down to all underlying `ScrollArea` components","typeRef":274},{"name":"secondsInputLabel","required":false,"source":"component","description":"`aria-label` of seconds input","typeRef":359},{"name":"secondsInputProps","required":false,"source":"component","description":"Props passed down to seconds input","typeRef":104},{"name":"secondsPlaceholder","required":false,"source":"component","description":"Seconds input placeholder,","typeRef":359},{"name":"secondsStep","required":false,"source":"component","description":"Number by which seconds are incremented/decremented","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["duration","time"],"description":"TimePicker type, `'time'` for regular time input, `'duration'` for duration input that allows values greater than 24 hours","typeRef":75},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withDropdown","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the dropdown with time controls list should be visible when the input has focus","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSeconds","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the seconds input should be displayed","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"TimeValue","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/time-value/","props":[{"name":"amPmLabels","required":false,"source":"component","description":"AM/PM labels","typeRef":316},{"name":"format","required":false,"source":"component","literalValues":["12h","24h"],"description":"Time format","typeRef":6},{"name":"value","required":true,"source":"component","description":"Time to format","typeRef":362},{"name":"withSeconds","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether seconds should be displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"Timeline","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/timeline/","props":[{"name":"active","required":false,"source":"component","description":"Index of the active element","typeRef":353},{"name":"align","required":false,"source":"component","literalValues":["left","right"],"description":"Position of content relative to the bullet","typeRef":47},{"name":"attributes","required":false,"source":"component","typeRef":463},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"bulletSize","required":false,"source":"component","description":"Size of the bullet","typeRef":365},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to control active item colors","typeRef":162},{"name":"lineWidth","required":false,"source":"component","description":"Control width of the line","typeRef":365},{"name":"reverseActive","required":false,"source":"component","literalValues":[false,true],"description":"If set, the active items direction is reversed without reversing items order","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":["Timeline.Item"],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Timeline.Item","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/timeline/","props":[{"name":"bullet","required":false,"source":"component","description":"React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed.","typeRef":263},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to control active item colors","typeRef":162},{"name":"lineVariant","required":false,"source":"component","literalValues":["dashed","dotted","solid"],"description":"Controls line border style","typeRef":26},{"name":"styles","required":false,"source":"component","typeRef":237},{"name":"title","required":false,"source":"component","description":"Item title, displayed next to the bullet","typeRef":263},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TimelineItem","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/timeline-item/","props":[{"name":"bullet","required":false,"source":"component","description":"React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed.","typeRef":263},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to control active item colors","typeRef":162},{"name":"lineVariant","required":false,"source":"component","literalValues":["dashed","dotted","solid"],"description":"Controls line border style","typeRef":26},{"name":"styles","required":false,"source":"component","typeRef":237},{"name":"title","required":false,"source":"component","description":"Item title, displayed next to the bullet","typeRef":263},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Title","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/title/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"lineClamp","required":false,"source":"component","description":"Number of lines after which heading will be truncated","typeRef":353},{"name":"order","required":false,"source":"component","literalValues":[1,2,3,4,5,6],"description":"Heading order (1-6), controls `font-size` style if `size` prop is not set","typeRef":137},{"name":"size","required":false,"source":"component","description":"Changes title size, if not set, then size is controlled by `order` prop","typeRef":318},{"name":"textWrap","required":false,"source":"component","literalValues":["balance","nowrap","pretty","stable","wrap"],"description":"Heading `text-wrap` CSS property","typeRef":79},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"ToggleSwitch","package":"@homarr/widgets","category":"network","safety":"wrapped","description":"Runs named actions for the enabled and disabled states.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"color","source":"component","required":false,"typeRef":359},{"name":"disabled","source":"component","required":false,"typeRef":338},{"name":"disabledParams","source":"component","required":false,"typeRef":270},{"name":"enabledParams","source":"component","required":false,"typeRef":270},{"name":"errorMessage","source":"component","required":false,"typeRef":359},{"name":"initialValue","source":"component","required":false,"typeRef":338},{"name":"label","source":"component","required":false,"typeRef":359},{"name":"requestId","source":"component","required":false,"description":"Identifier of the named Custom Widget action.","typeRef":359},{"name":"size","source":"component","required":false,"typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Action labels must describe their effect; destructive actions require confirmation."]},{"name":"Tooltip","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tooltip/","props":[{"name":"arrowOffset","required":false,"source":"component","description":"Arrow offset in px","typeRef":353},{"name":"arrowPosition","required":false,"source":"component","literalValues":["center","merge","side"],"description":"Arrow position relative to the tooltip","typeRef":24},{"name":"arrowRadius","required":false,"source":"component","description":"Arrow `border-radius` in px","typeRef":353},{"name":"arrowSize","required":false,"source":"component","description":"Arrow size in px","typeRef":353},{"name":"attributes","required":false,"source":"component","typeRef":475},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms","typeRef":353},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls tooltip background, by default set based on current color scheme","typeRef":162},{"name":"defaultOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled tooltip initial opened state","typeRef":341},{"name":"events","required":false,"source":"component","description":"Determines which events will be used to show tooltip","typeRef":402},{"name":"floatingStrategy","required":false,"source":"component","literalValues":["absolute","fixed"],"description":"Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy)","typeRef":34},{"name":"inline","required":false,"source":"component","literalValues":[false,true],"description":"Must be set if the tooltip target is an inline element","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead","typeRef":341},{"name":"label","required":false,"source":"component","description":"Tooltip content","typeRef":263},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling, `{ flip: true, shift: true, inline: false }` by default","typeRef":319},{"name":"multiline","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether content should be wrapped on to the next line, `false` by default","typeRef":341},{"name":"offset","required":false,"source":"component","description":"Space between target element and tooltip in px","typeRef":354},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms","typeRef":353},{"name":"opened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled opened state","typeRef":341},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Tooltip position relative to target element (`Tooltip` component) or mouse (`Tooltip.Floating` component)","typeRef":48},{"name":"transitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type","typeRef":208},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withArrow","required":false,"source":"component","literalValues":[false,true],"description":"If set, the tooltip has an arrow","typeRef":341}],"blockedProps":[{"name":"target","reason":"String targets can select elements outside the widget root"}],"subcomponents":["Tooltip.Floating","Tooltip.Group"],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Tooltip.Floating","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tooltip/","props":[{"name":"attributes","required":false,"source":"component","typeRef":475},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls tooltip background, by default set based on current color scheme","typeRef":162},{"name":"defaultOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled tooltip initial opened state","typeRef":341},{"name":"label","required":false,"source":"component","description":"Tooltip content","typeRef":263},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling, `{ flip: true, shift: true, inline: false }` by default","typeRef":319},{"name":"multiline","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether content should be wrapped on to the next line, `false` by default","typeRef":341},{"name":"offset","required":false,"source":"component","description":"Offset from mouse in px","typeRef":353},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Tooltip position relative to target element (`Tooltip` component) or mouse (`Tooltip.Floating` component)","typeRef":48},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Tooltip.Group","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tooltip/","props":[{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms","typeRef":353},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TooltipFloating","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tooltip-floating/","props":[{"name":"attributes","required":false,"source":"component","typeRef":475},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls tooltip background, by default set based on current color scheme","typeRef":162},{"name":"defaultOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled tooltip initial opened state","typeRef":341},{"name":"label","required":false,"source":"component","description":"Tooltip content","typeRef":263},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling, `{ flip: true, shift: true, inline: false }` by default","typeRef":319},{"name":"multiline","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether content should be wrapped on to the next line, `false` by default","typeRef":341},{"name":"offset","required":false,"source":"component","description":"Offset from mouse in px","typeRef":353},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Tooltip position relative to target element (`Tooltip` component) or mouse (`Tooltip.Floating` component)","typeRef":48},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TooltipGroup","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tooltip-group/","props":[{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms","typeRef":353},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Transition","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/transition/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Requires an authored render callback"},{"name":"Tree","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tree/","props":[{"name":"allowRangeSelection","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree nodes range can be selected with click when `Shift` key is pressed","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":427},{"name":"checkOnSpace","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node is checked on space key press","typeRef":341},{"name":"clearSelectionOnOutsideClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, selection is cleared when user clicks outside of the tree","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data used to render nodes","typeRef":321},{"name":"expandOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node with children is expanded on click","typeRef":341},{"name":"expandOnSpace","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node with children is expanded on space key press","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, subtree content is kept mounted when collapsed. React 19 `Activity` is used to preserve state.","typeRef":341},{"name":"levelOffset","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Horizontal padding of each subtree level, key of `theme.spacing` or any valid CSS value","typeRef":183},{"name":"selectOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node is selected on click","typeRef":341},{"name":"tree","required":false,"source":"component","description":"Use-tree hook instance that can be used to manipulate component state","typeRef":327},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withDragHandle","required":false,"source":"component","literalValues":[false,true],"description":"If set, drag-and-drop must be initiated from an element that spreads `dragHandleProps` from the `renderNode` payload, rather than anywhere on the node.","typeRef":341},{"name":"withLines","required":false,"source":"component","literalValues":[false,true],"description":"If set, connecting lines are rendered showing parent-child relationships","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TreeSelect","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tree-select/","props":[{"name":"allowDeselect","required":false,"source":"component","literalValues":[false,true],"description":"Allows deselecting in single mode","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":406},{"name":"checkStrictly","required":false,"source":"component","literalValues":[false,true],"description":"Disables parent-child cascade in checkbox mode","typeRef":341},{"name":"checkedStrategy","required":false,"source":"component","literalValues":["all","child","parent"],"description":"Controls which checked nodes appear in value/pills in checkbox mode","typeRef":8},{"name":"chevronAriaLabels","required":false,"source":"component","description":"aria-label values for the expand/collapse chevron button","typeRef":322},{"name":"chevronColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls the default chevron color","typeRef":162},{"name":"clearButtonProps","required":false,"source":"component","description":"Props for the clear button","typeRef":172},{"name":"clearSearchOnChange","required":false,"source":"component","literalValues":[false,true],"description":"Clear search on selection change","typeRef":341},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"Shows clear button","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"comboboxProps","required":false,"source":"component","description":"Props passed to the underlying Combobox","typeRef":266},{"name":"data","required":true,"source":"component","description":"Tree data","typeRef":321},{"name":"defaultDropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Default dropdown state","typeRef":341},{"name":"defaultExpandAll","required":false,"source":"component","literalValues":[false,true],"description":"Expand all nodes by default","typeRef":341},{"name":"defaultExpandedValues","required":false,"source":"component","description":"Default expanded node values","typeRef":368},{"name":"defaultSearchValue","required":false,"source":"component","description":"Default search value","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Default value","typeRef":323},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"dropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled dropdown state","typeRef":341},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"expandOnClick","required":false,"source":"component","literalValues":[false,true],"description":"Also toggle expand when clicking a parent node (not just the chevron). In `single` and `multiple` modes, parent clicks only expand; only leaves can be selected. In `checkbox` mode, parent clicks both check and expand.","typeRef":341},{"name":"expandedValues","required":false,"source":"component","description":"Controlled expanded state","typeRef":368},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props for the hidden input","typeRef":195},{"name":"hiddenInputValuesDivider","required":false,"source":"component","description":"Divider for hidden input values","typeRef":359},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxDisplayedValues","required":false,"source":"component","description":"Maximum displayed pills before \"+N more\"","typeRef":353},{"name":"maxDropdownHeight","required":false,"source":"component","description":"Max dropdown height","typeRef":365},{"name":"maxValues","required":false,"source":"component","description":"Maximum selectable values (multiple/checkbox mode)","typeRef":353},{"name":"mode","required":false,"source":"component","description":"Selection mode: 'single', 'multiple', or 'checkbox' (with cascade)","typeRef":184},{"name":"nothingFoundMessage","required":false,"source":"component","description":"Message when no nodes match search","typeRef":263},{"name":"openOnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Opens dropdown on focus (searchable mode)","typeRef":341},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props for the ScrollArea in the dropdown","typeRef":274},{"name":"searchValue","required":false,"source":"component","description":"Controlled search value","typeRef":359},{"name":"searchable","required":false,"source":"component","literalValues":[false,true],"description":"Enables search filtering","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled value","typeRef":323},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withLines","required":false,"source":"component","literalValues":[false,true],"description":"Show tree connection lines between parent and child nodes","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TreeSelectOption","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tree-select-option/","props":[{"name":"checked","required":true,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"chevronAriaLabels","required":false,"source":"component","typeRef":322},{"name":"expanded","required":true,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"hasChildren","required":true,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"indeterminate","required":true,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"isLastChild","required":true,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"level","required":true,"source":"component","typeRef":353},{"name":"lineGuides","required":true,"source":"component","typeRef":339},{"name":"node","required":true,"source":"component","typeRef":320},{"name":"selected","required":true,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"showCheckbox","required":true,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"withLines","required":true,"source":"component","literalValues":[false,true],"typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Treemap","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/treemap/","props":[{"name":"aspectRatio","required":false,"source":"component","description":"The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given","typeRef":353},{"name":"attributes","required":false,"source":"component","typeRef":470},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether text color should be adjusted based on background color to improve contrast","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data used to render chart","typeRef":324},{"name":"dataKey","required":false,"source":"component","description":"Key in data object for the value","typeRef":359},{"name":"height","required":false,"source":"component","description":"Controls chart height","typeRef":353},{"name":"strokeColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the node stroke, by default depends on color scheme","typeRef":162},{"name":"strokeWidth","required":false,"source":"component","description":"Controls width of node stroke","typeRef":353},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls text color of labels","typeRef":162},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip animation duration in ms","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to `Tooltip` recharts component","typeRef":197},{"name":"treemapProps","required":false,"source":"component","description":"Props passed down to recharts `Treemap` component","typeRef":206},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the tooltip should be displayed when a node is hovered","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"TypeBadge","package":"@homarr/widgets","category":"interaction","safety":"allowed","description":"Displays a compact semantic type badge.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"size","source":"component","required":false,"literalValues":["xs","sm","md","lg","xl"],"typeRef":87},{"name":"type","source":"component","required":true,"typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Typography","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/typography/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"UnstyledButton","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/unstyled-button/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"size","required":false,"source":"component","description":"Size passed from parent component, sets `data-size` if value is not number like","typeRef":365},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"VisuallyHidden","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/visually-hidden/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"WeekdaysRow","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/weekdays-row/","props":[{"name":"attributes","required":false,"source":"component","typeRef":478},{"name":"cellComponent","required":false,"source":"component","literalValues":["td","th"],"description":"Sets cell type that is used for weekdays","typeRef":72},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, 0 – Sunday, 6 – Saturday","typeRef":134},{"name":"locale","required":false,"source":"component","description":"dayjs locale","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"If set, heading for week numbers is displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"YearLevel","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/year-level/","props":[{"name":"attributes","required":false,"source":"component","typeRef":383},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"hasNextLevel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next level button should be enabled","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"levelControlAriaLabel","required":false,"source":"component","description":"`aria-label` for change level control","typeRef":359},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"styles","required":false,"source":"component","typeRef":238},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withNext","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next control should be rendered","typeRef":341},{"name":"withPrevious","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether previous control should be rendered","typeRef":341},{"name":"year","required":true,"source":"component","description":"Displayed year value in `YYYY-MM-DD` format","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"YearLevelGroup","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/year-level-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":385},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"hasNextLevel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next level button should be enabled","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"styles","required":false,"source":"component","typeRef":238},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"year","required":true,"source":"component","description":"Displayed year","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"YearPicker","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/year-picker/","props":[{"name":"allowDeselect","required":false,"source":"component","description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\"","typeRef":106},{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":387},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":159},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":332},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"type","required":false,"source":"component","literalValues":["default","multiple","range"],"description":"Picker type: range, multiple or default","typeRef":158},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value for controlled component","typeRef":159},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"YearPickerInput","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/year-picker-input/","props":[{"name":"allowDeselect","required":false,"source":"component","description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\"","typeRef":106},{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":411},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":258},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set.","typeRef":341},{"name":"closeOnChange","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the dropdown is closed when date is selected, not applicable with `type=\"multiple\"`","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":159},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"labelSeparator","required":false,"source":"component","description":"Separator between range value","typeRef":359},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"popoverProps","required":false,"source":"component","description":"Props passed down to `Popover` component","typeRef":204},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":332},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"sortDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dates values should be sorted before `onChange` call, only applicable with type=\"multiple\"","typeRef":341},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["default","multiple","range"],"description":"Picker type: range, multiple or default","typeRef":158},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value for controlled component","typeRef":159},{"name":"valueFormat","required":false,"source":"component","description":"`dayjs` format to display input value","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[{"name":"dropdownType","reason":"Modal picker mode escapes the widget overlay boundary"},{"name":"modalProps","reason":"Modal picker configuration escapes the widget overlay boundary"}],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"YearsList","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/years-list/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","left","right"],"typeRef":22},{"name":"attributes","required":false,"source":"component","typeRef":482},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"decade","required":true,"source":"component","description":"Decade value to display","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]}]}
diff --git a/apps/docs/static/data/contributions.json b/apps/docs/static/data/contributions.json
index fbc3a2a80..18dd6bc05 100644
--- a/apps/docs/static/data/contributions.json
+++ b/apps/docs/static/data/contributions.json
@@ -1 +1,127 @@
-[{"login":"ajnart","avatar_url":"https://avatars.githubusercontent.com/u/49837342?v=4"},{"login":"manuel-rw","avatar_url":"https://avatars.githubusercontent.com/u/30572287?v=4"},{"login":"Meierschlumpf","avatar_url":"https://avatars.githubusercontent.com/u/63781622?v=4"},{"login":"SeDemal","avatar_url":"https://avatars.githubusercontent.com/u/26098587?v=4"},{"login":"lammersbjorn","avatar_url":"https://avatars.githubusercontent.com/u/71191962?v=4"},{"login":"LarveyOfficial","avatar_url":"https://avatars.githubusercontent.com/u/39219859?v=4"},{"login":"c00ldude1oo","avatar_url":"https://avatars.githubusercontent.com/u/15677803?v=4"},{"login":"InterN0te","avatar_url":"https://avatars.githubusercontent.com/u/10882916?v=4"},{"login":"Aandree5","avatar_url":"https://avatars.githubusercontent.com/u/32734153?v=4"},{"login":"Aimsucks","avatar_url":"https://avatars.githubusercontent.com/u/1828486?v=4"},{"login":"JannesV","avatar_url":"https://avatars.githubusercontent.com/u/5984244?v=4"},{"login":"MauriceNino","avatar_url":"https://avatars.githubusercontent.com/u/18658092?v=4"},{"login":"hillaliy","avatar_url":"https://avatars.githubusercontent.com/u/950010?v=4"},{"login":"Skeeww","avatar_url":"https://avatars.githubusercontent.com/u/9639992?v=4"},{"login":"jackwellerreal","avatar_url":"https://avatars.githubusercontent.com/u/97435840?v=4"},{"login":"RichyHBM","avatar_url":"https://avatars.githubusercontent.com/u/5472275?v=4"},{"login":"Bonfire","avatar_url":"https://avatars.githubusercontent.com/u/5704760?v=4"},{"login":"wieli99","avatar_url":"https://avatars.githubusercontent.com/u/46794825?v=4"},{"login":"ishaanparlikar","avatar_url":"https://avatars.githubusercontent.com/u/43013132?v=4"},{"login":"Zareix","avatar_url":"https://avatars.githubusercontent.com/u/29818713?v=4"},{"login":"tuggan","avatar_url":"https://avatars.githubusercontent.com/u/4325608?v=4"},{"login":"mvanhorn","avatar_url":"https://avatars.githubusercontent.com/u/455140?v=4"},{"login":"SergioChan","avatar_url":"https://avatars.githubusercontent.com/u/10103766?v=4"},{"login":"toineenzo","avatar_url":"https://avatars.githubusercontent.com/u/4921397?v=4"},{"login":"oben01","avatar_url":"https://avatars.githubusercontent.com/u/22369027?v=4"},{"login":"rezstje","avatar_url":"https://avatars.githubusercontent.com/u/45420315?v=4"},{"login":"Spillebulle","avatar_url":"https://avatars.githubusercontent.com/u/46653946?v=4"},{"login":"marektancak0106","avatar_url":"https://avatars.githubusercontent.com/u/25422667?v=4"},{"login":"spkesDE","avatar_url":"https://avatars.githubusercontent.com/u/1682314?v=4"},{"login":"j3lte","avatar_url":"https://avatars.githubusercontent.com/u/2557568?v=4"},{"login":"dslatt","avatar_url":"https://avatars.githubusercontent.com/u/5211001?v=4"},{"login":"Malong11-007","avatar_url":"https://avatars.githubusercontent.com/u/40298510?v=4"},{"login":"castielwaverly","avatar_url":"https://avatars.githubusercontent.com/u/137005689?v=4"},{"login":"xoxyuxu","avatar_url":"https://avatars.githubusercontent.com/u/3543416?v=4"},{"login":"StrandedTurtle","avatar_url":"https://avatars.githubusercontent.com/u/132835255?v=4"},{"login":"MaienM","avatar_url":"https://avatars.githubusercontent.com/u/583129?v=4"},{"login":"kylegrieder","avatar_url":"https://avatars.githubusercontent.com/u/25424229?v=4"},{"login":"HeapReaper","avatar_url":"https://avatars.githubusercontent.com/u/31496522?v=4"},{"login":"Copilot","avatar_url":"https://avatars.githubusercontent.com/in/1143301?v=4"},{"login":"Gilmoursa","avatar_url":"https://avatars.githubusercontent.com/u/10321421?v=4"},{"login":"StefanB7","avatar_url":"https://avatars.githubusercontent.com/u/22056509?v=4"},{"login":"souravghosh01","avatar_url":"https://avatars.githubusercontent.com/u/37548139?v=4"},{"login":"SR3u","avatar_url":"https://avatars.githubusercontent.com/u/2380522?v=4"},{"login":"Rikpat","avatar_url":"https://avatars.githubusercontent.com/u/33869814?v=4"},{"login":"NormanJS","avatar_url":"https://avatars.githubusercontent.com/u/83409549?v=4"},{"login":"No-Maines-Land","avatar_url":"https://avatars.githubusercontent.com/u/20687725?v=4"},{"login":"stark1tty","avatar_url":"https://avatars.githubusercontent.com/u/69326376?v=4"},{"login":"Momcilo42","avatar_url":"https://avatars.githubusercontent.com/u/10118137?v=4"},{"login":"marius-arch","avatar_url":"https://avatars.githubusercontent.com/u/72494359?v=4"},{"login":"Lumilias","avatar_url":"https://avatars.githubusercontent.com/u/10852161?v=4"},{"login":"Havock94","avatar_url":"https://avatars.githubusercontent.com/u/7635248?v=4"},{"login":"Lollyde","avatar_url":"https://avatars.githubusercontent.com/u/11347524?v=4"},{"login":"krishnamuppaneni","avatar_url":"https://avatars.githubusercontent.com/u/4703366?v=4"},{"login":"devtobi","avatar_url":"https://avatars.githubusercontent.com/u/28538704?v=4"},{"login":"TyxTang","avatar_url":"https://avatars.githubusercontent.com/u/90897955?v=4"},{"login":"alotlikebeans","avatar_url":"https://avatars.githubusercontent.com/u/19630511?v=4"},{"login":"WillyJL","avatar_url":"https://avatars.githubusercontent.com/u/49810075?v=4"},{"login":"anonysoul","avatar_url":"https://avatars.githubusercontent.com/u/105715150?v=4"},{"login":"cospeedster","avatar_url":"https://avatars.githubusercontent.com/u/52749645?v=4"},{"login":"diederbert","avatar_url":"https://avatars.githubusercontent.com/u/162878798?v=4"},{"login":"digdilem","avatar_url":"https://avatars.githubusercontent.com/u/4052275?v=4"},{"login":"dinghino","avatar_url":"https://avatars.githubusercontent.com/u/14729459?v=4"},{"login":"gfomichev","avatar_url":"https://avatars.githubusercontent.com/u/1596146?v=4"},{"login":"gnattu","avatar_url":"https://avatars.githubusercontent.com/u/12995396?v=4"},{"login":"tuxpizza","avatar_url":"https://avatars.githubusercontent.com/u/84710786?v=4"},{"login":"xmarkurion","avatar_url":"https://avatars.githubusercontent.com/u/46654687?v=4"},{"login":"huanga","avatar_url":"https://avatars.githubusercontent.com/u/732970?v=4"},{"login":"taos15","avatar_url":"https://avatars.githubusercontent.com/u/122130728?v=4"},{"login":"arghyadipchak","avatar_url":"https://avatars.githubusercontent.com/u/32430374?v=4"},{"login":"AuthorShin","avatar_url":"https://avatars.githubusercontent.com/u/4959043?v=4"},{"login":"benniblot","avatar_url":"https://avatars.githubusercontent.com/u/47495914?v=4"},{"login":"bebsworthy","avatar_url":"https://avatars.githubusercontent.com/u/5266759?v=4"},{"login":"catrielmuller","avatar_url":"https://avatars.githubusercontent.com/u/2272323?v=4"},{"login":"Vysp3r","avatar_url":"https://avatars.githubusercontent.com/u/62019735?v=4"},{"login":"DR-Blogs","avatar_url":"https://avatars.githubusercontent.com/u/96393186?v=4"},{"login":"singular0","avatar_url":"https://avatars.githubusercontent.com/u/1925883?v=4"},{"login":"diogovalentte","avatar_url":"https://avatars.githubusercontent.com/u/49578155?v=4"},{"login":"codezninja","avatar_url":"https://avatars.githubusercontent.com/u/4400773?v=4"},{"login":"fabricionaweb","avatar_url":"https://avatars.githubusercontent.com/u/15933?v=4"},{"login":"nyok1912","avatar_url":"https://avatars.githubusercontent.com/u/32163949?v=4"},{"login":"bo3bdo","avatar_url":"https://avatars.githubusercontent.com/u/5271380?v=4"},{"login":"hskrtich","avatar_url":"https://avatars.githubusercontent.com/u/1214484?v=4"},{"login":"ishults","avatar_url":"https://avatars.githubusercontent.com/u/7275442?v=4"},{"login":"jelliuk","avatar_url":"https://avatars.githubusercontent.com/u/4790959?v=4"},{"login":"Moohan","avatar_url":"https://avatars.githubusercontent.com/u/5982260?v=4"},{"login":"tesar-tech","avatar_url":"https://avatars.githubusercontent.com/u/33880579?v=4"},{"login":"jbruell","avatar_url":"https://avatars.githubusercontent.com/u/31685172?v=4"},{"login":"JasonLeeB06","avatar_url":"https://avatars.githubusercontent.com/u/82266978?v=4"},{"login":"jeffersonraimon","avatar_url":"https://avatars.githubusercontent.com/u/80064475?v=4"},{"login":"jo-chemla","avatar_url":"https://avatars.githubusercontent.com/u/16822841?v=4"},{"login":"joser93","avatar_url":"https://avatars.githubusercontent.com/u/6912089?v=4"},{"login":"justijndepover","avatar_url":"https://avatars.githubusercontent.com/u/9008623?v=4"},{"login":"leandroscardua","avatar_url":"https://avatars.githubusercontent.com/u/24698541?v=4"},{"login":"mairas","avatar_url":"https://avatars.githubusercontent.com/u/407010?v=4"},{"login":"itzTheMeow","avatar_url":"https://avatars.githubusercontent.com/u/50887230?v=4"},{"login":"NicolasNewman","avatar_url":"https://avatars.githubusercontent.com/u/16135852?v=4"},{"login":"NikeLaosClericus","avatar_url":"https://avatars.githubusercontent.com/u/39810627?v=4"},{"login":"noahcroghan","avatar_url":"https://avatars.githubusercontent.com/u/27422774?v=4"},{"login":"ohmzi","avatar_url":"https://avatars.githubusercontent.com/u/6551272?v=4"},{"login":"Rhiz3K","avatar_url":"https://avatars.githubusercontent.com/u/33246262?v=4"},{"login":"saschabuehrle","avatar_url":"https://avatars.githubusercontent.com/u/47737812?v=4"},{"login":"CrazyWolf13","avatar_url":"https://avatars.githubusercontent.com/u/96661824?v=4"},{"login":"VIVAAN-DHAWAN","avatar_url":"https://avatars.githubusercontent.com/u/150339722?v=4"},{"login":"generalmat82","avatar_url":"https://avatars.githubusercontent.com/u/110256073?v=4"},{"login":"lthomsen","avatar_url":"https://avatars.githubusercontent.com/u/28560325?v=4"},{"login":"pitschi","avatar_url":"https://avatars.githubusercontent.com/u/6841565?v=4"},{"login":"sharpsalat","avatar_url":"https://avatars.githubusercontent.com/u/15666932?v=4"},{"login":"tech62","avatar_url":"https://avatars.githubusercontent.com/u/16237642?v=4"},{"login":"AartSchinkel","avatar_url":"https://avatars.githubusercontent.com/u/189675191?v=4"},{"login":"afonsojramos","avatar_url":"https://avatars.githubusercontent.com/u/19473034?v=4"},{"login":"m0s4ik","avatar_url":"https://avatars.githubusercontent.com/u/26578395?v=4"},{"login":"ashtonbatty","avatar_url":"https://avatars.githubusercontent.com/u/230635?v=4"},{"login":"Oupsman","avatar_url":"https://avatars.githubusercontent.com/u/11260343?v=4"},{"login":"cethien","avatar_url":"https://avatars.githubusercontent.com/u/60463918?v=4"},{"login":"DZ945brH","avatar_url":"https://avatars.githubusercontent.com/u/42635243?v=4"},{"login":"dgshue","avatar_url":"https://avatars.githubusercontent.com/u/12952156?v=4"},{"login":"d-lindahl","avatar_url":"https://avatars.githubusercontent.com/u/690410?v=4"},{"login":"KartulUdus","avatar_url":"https://avatars.githubusercontent.com/u/23346150?v=4"},{"login":"ieugen","avatar_url":"https://avatars.githubusercontent.com/u/1050920?v=4"},{"login":"faugusto-oliveira","avatar_url":"https://avatars.githubusercontent.com/u/37384074?v=4"},{"login":"frankvHoof93","avatar_url":"https://avatars.githubusercontent.com/u/7346516?v=4"},{"login":"febrile42","avatar_url":"https://avatars.githubusercontent.com/u/14597122?v=4"},{"login":"Kaotic3","avatar_url":"https://avatars.githubusercontent.com/u/80522225?v=4"},{"login":"KelianB","avatar_url":"https://avatars.githubusercontent.com/u/11216155?v=4"},{"login":"hotrungnhan","avatar_url":"https://avatars.githubusercontent.com/u/40029631?v=4"}]
\ No newline at end of file
+[
+  { "login": "ajnart", "avatar_url": "https://avatars.githubusercontent.com/u/49837342?v=4" },
+  { "login": "manuel-rw", "avatar_url": "https://avatars.githubusercontent.com/u/30572287?v=4" },
+  { "login": "Meierschlumpf", "avatar_url": "https://avatars.githubusercontent.com/u/63781622?v=4" },
+  { "login": "SeDemal", "avatar_url": "https://avatars.githubusercontent.com/u/26098587?v=4" },
+  { "login": "lammersbjorn", "avatar_url": "https://avatars.githubusercontent.com/u/71191962?v=4" },
+  { "login": "LarveyOfficial", "avatar_url": "https://avatars.githubusercontent.com/u/39219859?v=4" },
+  { "login": "c00ldude1oo", "avatar_url": "https://avatars.githubusercontent.com/u/15677803?v=4" },
+  { "login": "InterN0te", "avatar_url": "https://avatars.githubusercontent.com/u/10882916?v=4" },
+  { "login": "Aandree5", "avatar_url": "https://avatars.githubusercontent.com/u/32734153?v=4" },
+  { "login": "Aimsucks", "avatar_url": "https://avatars.githubusercontent.com/u/1828486?v=4" },
+  { "login": "JannesV", "avatar_url": "https://avatars.githubusercontent.com/u/5984244?v=4" },
+  { "login": "MauriceNino", "avatar_url": "https://avatars.githubusercontent.com/u/18658092?v=4" },
+  { "login": "hillaliy", "avatar_url": "https://avatars.githubusercontent.com/u/950010?v=4" },
+  { "login": "Skeeww", "avatar_url": "https://avatars.githubusercontent.com/u/9639992?v=4" },
+  { "login": "jackwellerreal", "avatar_url": "https://avatars.githubusercontent.com/u/97435840?v=4" },
+  { "login": "RichyHBM", "avatar_url": "https://avatars.githubusercontent.com/u/5472275?v=4" },
+  { "login": "Bonfire", "avatar_url": "https://avatars.githubusercontent.com/u/5704760?v=4" },
+  { "login": "wieli99", "avatar_url": "https://avatars.githubusercontent.com/u/46794825?v=4" },
+  { "login": "ishaanparlikar", "avatar_url": "https://avatars.githubusercontent.com/u/43013132?v=4" },
+  { "login": "Zareix", "avatar_url": "https://avatars.githubusercontent.com/u/29818713?v=4" },
+  { "login": "tuggan", "avatar_url": "https://avatars.githubusercontent.com/u/4325608?v=4" },
+  { "login": "mvanhorn", "avatar_url": "https://avatars.githubusercontent.com/u/455140?v=4" },
+  { "login": "SergioChan", "avatar_url": "https://avatars.githubusercontent.com/u/10103766?v=4" },
+  { "login": "toineenzo", "avatar_url": "https://avatars.githubusercontent.com/u/4921397?v=4" },
+  { "login": "oben01", "avatar_url": "https://avatars.githubusercontent.com/u/22369027?v=4" },
+  { "login": "rezstje", "avatar_url": "https://avatars.githubusercontent.com/u/45420315?v=4" },
+  { "login": "Spillebulle", "avatar_url": "https://avatars.githubusercontent.com/u/46653946?v=4" },
+  { "login": "marektancak0106", "avatar_url": "https://avatars.githubusercontent.com/u/25422667?v=4" },
+  { "login": "spkesDE", "avatar_url": "https://avatars.githubusercontent.com/u/1682314?v=4" },
+  { "login": "j3lte", "avatar_url": "https://avatars.githubusercontent.com/u/2557568?v=4" },
+  { "login": "dslatt", "avatar_url": "https://avatars.githubusercontent.com/u/5211001?v=4" },
+  { "login": "Malong11-007", "avatar_url": "https://avatars.githubusercontent.com/u/40298510?v=4" },
+  { "login": "castielwaverly", "avatar_url": "https://avatars.githubusercontent.com/u/137005689?v=4" },
+  { "login": "xoxyuxu", "avatar_url": "https://avatars.githubusercontent.com/u/3543416?v=4" },
+  { "login": "StrandedTurtle", "avatar_url": "https://avatars.githubusercontent.com/u/132835255?v=4" },
+  { "login": "MaienM", "avatar_url": "https://avatars.githubusercontent.com/u/583129?v=4" },
+  { "login": "kylegrieder", "avatar_url": "https://avatars.githubusercontent.com/u/25424229?v=4" },
+  { "login": "HeapReaper", "avatar_url": "https://avatars.githubusercontent.com/u/31496522?v=4" },
+  { "login": "Copilot", "avatar_url": "https://avatars.githubusercontent.com/in/1143301?v=4" },
+  { "login": "Gilmoursa", "avatar_url": "https://avatars.githubusercontent.com/u/10321421?v=4" },
+  { "login": "StefanB7", "avatar_url": "https://avatars.githubusercontent.com/u/22056509?v=4" },
+  { "login": "souravghosh01", "avatar_url": "https://avatars.githubusercontent.com/u/37548139?v=4" },
+  { "login": "SR3u", "avatar_url": "https://avatars.githubusercontent.com/u/2380522?v=4" },
+  { "login": "Rikpat", "avatar_url": "https://avatars.githubusercontent.com/u/33869814?v=4" },
+  { "login": "NormanJS", "avatar_url": "https://avatars.githubusercontent.com/u/83409549?v=4" },
+  { "login": "No-Maines-Land", "avatar_url": "https://avatars.githubusercontent.com/u/20687725?v=4" },
+  { "login": "stark1tty", "avatar_url": "https://avatars.githubusercontent.com/u/69326376?v=4" },
+  { "login": "Momcilo42", "avatar_url": "https://avatars.githubusercontent.com/u/10118137?v=4" },
+  { "login": "marius-arch", "avatar_url": "https://avatars.githubusercontent.com/u/72494359?v=4" },
+  { "login": "Lumilias", "avatar_url": "https://avatars.githubusercontent.com/u/10852161?v=4" },
+  { "login": "Havock94", "avatar_url": "https://avatars.githubusercontent.com/u/7635248?v=4" },
+  { "login": "Lollyde", "avatar_url": "https://avatars.githubusercontent.com/u/11347524?v=4" },
+  { "login": "krishnamuppaneni", "avatar_url": "https://avatars.githubusercontent.com/u/4703366?v=4" },
+  { "login": "devtobi", "avatar_url": "https://avatars.githubusercontent.com/u/28538704?v=4" },
+  { "login": "TyxTang", "avatar_url": "https://avatars.githubusercontent.com/u/90897955?v=4" },
+  { "login": "alotlikebeans", "avatar_url": "https://avatars.githubusercontent.com/u/19630511?v=4" },
+  { "login": "WillyJL", "avatar_url": "https://avatars.githubusercontent.com/u/49810075?v=4" },
+  { "login": "anonysoul", "avatar_url": "https://avatars.githubusercontent.com/u/105715150?v=4" },
+  { "login": "cospeedster", "avatar_url": "https://avatars.githubusercontent.com/u/52749645?v=4" },
+  { "login": "diederbert", "avatar_url": "https://avatars.githubusercontent.com/u/162878798?v=4" },
+  { "login": "digdilem", "avatar_url": "https://avatars.githubusercontent.com/u/4052275?v=4" },
+  { "login": "dinghino", "avatar_url": "https://avatars.githubusercontent.com/u/14729459?v=4" },
+  { "login": "gfomichev", "avatar_url": "https://avatars.githubusercontent.com/u/1596146?v=4" },
+  { "login": "gnattu", "avatar_url": "https://avatars.githubusercontent.com/u/12995396?v=4" },
+  { "login": "tuxpizza", "avatar_url": "https://avatars.githubusercontent.com/u/84710786?v=4" },
+  { "login": "xmarkurion", "avatar_url": "https://avatars.githubusercontent.com/u/46654687?v=4" },
+  { "login": "huanga", "avatar_url": "https://avatars.githubusercontent.com/u/732970?v=4" },
+  { "login": "taos15", "avatar_url": "https://avatars.githubusercontent.com/u/122130728?v=4" },
+  { "login": "arghyadipchak", "avatar_url": "https://avatars.githubusercontent.com/u/32430374?v=4" },
+  { "login": "AuthorShin", "avatar_url": "https://avatars.githubusercontent.com/u/4959043?v=4" },
+  { "login": "benniblot", "avatar_url": "https://avatars.githubusercontent.com/u/47495914?v=4" },
+  { "login": "bebsworthy", "avatar_url": "https://avatars.githubusercontent.com/u/5266759?v=4" },
+  { "login": "catrielmuller", "avatar_url": "https://avatars.githubusercontent.com/u/2272323?v=4" },
+  { "login": "Vysp3r", "avatar_url": "https://avatars.githubusercontent.com/u/62019735?v=4" },
+  { "login": "DR-Blogs", "avatar_url": "https://avatars.githubusercontent.com/u/96393186?v=4" },
+  { "login": "singular0", "avatar_url": "https://avatars.githubusercontent.com/u/1925883?v=4" },
+  { "login": "diogovalentte", "avatar_url": "https://avatars.githubusercontent.com/u/49578155?v=4" },
+  { "login": "codezninja", "avatar_url": "https://avatars.githubusercontent.com/u/4400773?v=4" },
+  { "login": "fabricionaweb", "avatar_url": "https://avatars.githubusercontent.com/u/15933?v=4" },
+  { "login": "nyok1912", "avatar_url": "https://avatars.githubusercontent.com/u/32163949?v=4" },
+  { "login": "bo3bdo", "avatar_url": "https://avatars.githubusercontent.com/u/5271380?v=4" },
+  { "login": "hskrtich", "avatar_url": "https://avatars.githubusercontent.com/u/1214484?v=4" },
+  { "login": "ishults", "avatar_url": "https://avatars.githubusercontent.com/u/7275442?v=4" },
+  { "login": "jelliuk", "avatar_url": "https://avatars.githubusercontent.com/u/4790959?v=4" },
+  { "login": "Moohan", "avatar_url": "https://avatars.githubusercontent.com/u/5982260?v=4" },
+  { "login": "tesar-tech", "avatar_url": "https://avatars.githubusercontent.com/u/33880579?v=4" },
+  { "login": "jbruell", "avatar_url": "https://avatars.githubusercontent.com/u/31685172?v=4" },
+  { "login": "JasonLeeB06", "avatar_url": "https://avatars.githubusercontent.com/u/82266978?v=4" },
+  { "login": "jeffersonraimon", "avatar_url": "https://avatars.githubusercontent.com/u/80064475?v=4" },
+  { "login": "jo-chemla", "avatar_url": "https://avatars.githubusercontent.com/u/16822841?v=4" },
+  { "login": "joser93", "avatar_url": "https://avatars.githubusercontent.com/u/6912089?v=4" },
+  { "login": "justijndepover", "avatar_url": "https://avatars.githubusercontent.com/u/9008623?v=4" },
+  { "login": "leandroscardua", "avatar_url": "https://avatars.githubusercontent.com/u/24698541?v=4" },
+  { "login": "mairas", "avatar_url": "https://avatars.githubusercontent.com/u/407010?v=4" },
+  { "login": "itzTheMeow", "avatar_url": "https://avatars.githubusercontent.com/u/50887230?v=4" },
+  { "login": "NicolasNewman", "avatar_url": "https://avatars.githubusercontent.com/u/16135852?v=4" },
+  { "login": "NikeLaosClericus", "avatar_url": "https://avatars.githubusercontent.com/u/39810627?v=4" },
+  { "login": "noahcroghan", "avatar_url": "https://avatars.githubusercontent.com/u/27422774?v=4" },
+  { "login": "ohmzi", "avatar_url": "https://avatars.githubusercontent.com/u/6551272?v=4" },
+  { "login": "Rhiz3K", "avatar_url": "https://avatars.githubusercontent.com/u/33246262?v=4" },
+  { "login": "saschabuehrle", "avatar_url": "https://avatars.githubusercontent.com/u/47737812?v=4" },
+  { "login": "CrazyWolf13", "avatar_url": "https://avatars.githubusercontent.com/u/96661824?v=4" },
+  { "login": "VIVAAN-DHAWAN", "avatar_url": "https://avatars.githubusercontent.com/u/150339722?v=4" },
+  { "login": "generalmat82", "avatar_url": "https://avatars.githubusercontent.com/u/110256073?v=4" },
+  { "login": "lthomsen", "avatar_url": "https://avatars.githubusercontent.com/u/28560325?v=4" },
+  { "login": "pitschi", "avatar_url": "https://avatars.githubusercontent.com/u/6841565?v=4" },
+  { "login": "sharpsalat", "avatar_url": "https://avatars.githubusercontent.com/u/15666932?v=4" },
+  { "login": "tech62", "avatar_url": "https://avatars.githubusercontent.com/u/16237642?v=4" },
+  { "login": "AartSchinkel", "avatar_url": "https://avatars.githubusercontent.com/u/189675191?v=4" },
+  { "login": "afonsojramos", "avatar_url": "https://avatars.githubusercontent.com/u/19473034?v=4" },
+  { "login": "m0s4ik", "avatar_url": "https://avatars.githubusercontent.com/u/26578395?v=4" },
+  { "login": "ashtonbatty", "avatar_url": "https://avatars.githubusercontent.com/u/230635?v=4" },
+  { "login": "Oupsman", "avatar_url": "https://avatars.githubusercontent.com/u/11260343?v=4" },
+  { "login": "cethien", "avatar_url": "https://avatars.githubusercontent.com/u/60463918?v=4" },
+  { "login": "DZ945brH", "avatar_url": "https://avatars.githubusercontent.com/u/42635243?v=4" },
+  { "login": "dgshue", "avatar_url": "https://avatars.githubusercontent.com/u/12952156?v=4" },
+  { "login": "d-lindahl", "avatar_url": "https://avatars.githubusercontent.com/u/690410?v=4" },
+  { "login": "KartulUdus", "avatar_url": "https://avatars.githubusercontent.com/u/23346150?v=4" },
+  { "login": "ieugen", "avatar_url": "https://avatars.githubusercontent.com/u/1050920?v=4" },
+  { "login": "faugusto-oliveira", "avatar_url": "https://avatars.githubusercontent.com/u/37384074?v=4" },
+  { "login": "frankvHoof93", "avatar_url": "https://avatars.githubusercontent.com/u/7346516?v=4" },
+  { "login": "febrile42", "avatar_url": "https://avatars.githubusercontent.com/u/14597122?v=4" },
+  { "login": "Kaotic3", "avatar_url": "https://avatars.githubusercontent.com/u/80522225?v=4" },
+  { "login": "KelianB", "avatar_url": "https://avatars.githubusercontent.com/u/11216155?v=4" },
+  { "login": "hotrungnhan", "avatar_url": "https://avatars.githubusercontent.com/u/40029631?v=4" }
+]
diff --git a/apps/docs/static/data/translation-contributions.json b/apps/docs/static/data/translation-contributions.json
index 5818e6339..1c89663dd 100644
--- a/apps/docs/static/data/translation-contributions.json
+++ b/apps/docs/static/data/translation-contributions.json
@@ -1 +1,966 @@
-[{"username":"carlchina","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/6697/medium/d22bbe7797bbeb30dbdc73a5648d329a_default.png"},{"username":"zielmann","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/7795/medium/ad22b8b8d5eb33e4154d53a454c862fd_default.png"},{"username":"Thalyn","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12494028/medium/5faf5acc945a874ed116c4567edaa09f_default.png"},{"username":"magnushj","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12503488/medium/68f32e33ea7b891960055c9f831f7344_default.png"},{"username":"almontegil","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12580457/medium/f4136cacbdfdb4c28ae7f85dc5f840db_default.png"},{"username":"andibing","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12664938/medium/b8be63e4dcb2e791ced1ffc9e3a049a5.jpg"},{"username":"gronare","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12680911/medium/c6eb14d1504156f34a158e507f73aa3d_default.png"},{"username":"SmartPhoneLover","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12701640/medium/ec95486662ec875cda080e778c3ff702.jpg"},{"username":"marcelotk_15","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12773227/medium/ecf6bea16ab0c873c131df2154ee9718_default.png"},{"username":"S3OD177","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13051544/medium/11dd990837f61f7e8f7d36b041a7fddb_default.png"},{"username":"marcg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13153301/medium/ebcf60fbf27deb148ec40a659566c6ff_default.png"},{"username":"BeersTeddy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13185230/medium/2f1f4e1effe74a23422b195cbefb2a95_default.png"},{"username":"jamesmcmahon0","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13245578/medium/586aa873b4abddbd9abc6f3de99ab70e.jpeg"},{"username":"b1nar10","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13286752/medium/249b02e3368752cb175446082015737c_default.png"},{"username":"vannCN","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13330448/medium/9b8a9ee3611e51e951e22d5fd4eb7d8d.jpg"},{"username":"binswm","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13343482/medium/45dde0e6097b9b72705d2eba9dbbc276_default.png"},{"username":"SkewRam","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13496556/medium/188f5c2deb7938eda51eb786cc4539ca.jpeg"},{"username":"raphcatarino","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13547726/medium/b003511e67df13a4b4b5689488fa8099.jpg"},{"username":"shillos5","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13600557/medium/b17650b2b84f829d54fa548c44c1ab27.jpeg"},{"username":"wolong98","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13641407/medium/f4634edc58c7857a357e5293543c15cf.jpg"},{"username":"spair0039","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14012333/medium/72430e96027c09c19141cac38eae4617.png"},{"username":"MajorMarcin","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14072183/medium/0a197e64bb92b6ea94cecbb607512c45.jpg"},{"username":"KosmoMoustache","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14103535/medium/51c438cdd9f86e8811c75f4869de479c.png"},{"username":"Soochaehwa","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14118689/medium/496a1ce63111547bf455a1e0a7ac75f1_default.png"},{"username":"garryfield","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14187035/medium/520c964706676045f6eeec1b08edc880.jpg"},{"username":"droidenko","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14444264/medium/4aa3a8e824f72bc9e5ec0d8de307095e.jpeg"},{"username":"maathis","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14489950/medium/6eeddf13a757ee35f78f1763f94d95e1.jpeg"},{"username":"bukvam","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14546502/medium/a819dc40a13c57395a17dc46e847d3ce.jpg"},{"username":"gm.cinalli","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14670666/medium/2d466a0fdbda40764526be86c97c0ab4.jpeg"},{"username":"antoine2tt","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14722148/medium/f88d926900862dd59007ea4b3419cb9d.png"},{"username":"cretzen","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14799754/medium/3ba5c1805ec20c000d5810c07985afe9.jpg"},{"username":"ktKongTong","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14817246/medium/97cfc3c028dbdaf85ebd1102da71e58c.jpeg"},{"username":"marinkaberg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14861042/medium/2d5c4e62613f03082f3e645fa92efd59.jpeg"},{"username":"djismgaming","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14934947/medium/f5a8570713c34ab0f7d5405d105e2a9a.jpeg"},{"username":"f1refa11","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14949159/medium/fd2ae63b8eb4462200ba96abf943c1b9.png"},{"username":"jeffersonraimon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15057621/medium/6dff469563860e2618bc9d45646d0ab4.png"},{"username":"giop98","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15057987/medium/b8a4825d3fc39fc662f35ee258db4b2d.jpeg"},{"username":"tomislav.kraljevic","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15118857/medium/e133f1061cc92850b854d05d8faaeafd.png"},{"username":"Walkx","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15202182/medium/5c37361ae45aeed487b34582c1f7ca37.png"},{"username":"andrea.rosso","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15246318/medium/11f3f5ef44ec7f55b6f143090e208704_default.png"},{"username":"ajnart","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15270132/medium/a0f107a463c8910ee96bc2fa843a17e3.jpeg"},{"username":"Witchling","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15282238/medium/9e196b6783415b10ca571b7673c2ef33.jpg"},{"username":"guineuu","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15292058/medium/22fbb758bda3b7805d50bf21d38f2c20.jpeg"},{"username":"Bulgus","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15304568/medium/0e8787e5ceb02ed5c96a514d0068ae87.jpg"},{"username":"Narno","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15314996/medium/a6ba093f24884250a1bf6c6f2ca50f1b_default.png"},{"username":"BySempron","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15315986/medium/e3d22d7b1423c6823a9f36d595ed4bdb.png"},{"username":"jonathan.berglin.work","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15359236/medium/95930b2093db13b76179782f7322c5d5.png"},{"username":"icdmkg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15405504/medium/f334d16cde1ac4ffb935b440d03465af.gif"},{"username":"irithys","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15405614/medium/3086461c47cce0a0c031925e5f943412.png"},{"username":"JannesV","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15419912/medium/a7809eb4b817d7c49b62cf10ae86b950.png"},{"username":"benniblot","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15419914/medium/8086b1573d31f152ba41949b3a172445.jpeg"},{"username":"pacjo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15419916/medium/3cbeddbd7bc01faafb5a3bf47bba915b_default.png"},{"username":"Payou6994","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15419934/medium/37c9b9b17dfb578404c1c1ddb73ba7a8.png"},{"username":"fzibi21","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15419976/medium/0da688450358e0290a7b7359cc1f7328.png"},{"username":"WowMurdock","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15420118/medium/de19576fccb495b6dfe4c4c04a56b834.png"},{"username":"hbooo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15420120/medium/6c7c7f8db785061356ebb03d044d3329.jpeg"},{"username":"Manicraft1001","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15420178/medium/50ec94563a06a9f74f33bd09f01eed4d.jpg"},{"username":"Void123","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15420354/medium/86929d44df92a00f9fe900a985c196df_default.png"},{"username":"R4cc","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15422606/medium/a390979662b84694f59de30bdb732141.jpeg"},{"username":"fabricionaweb","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15425808/medium/a9354142e7ae5152c144409d55fda551_default.png"},{"username":"JokeOfDead","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15426890/medium/a383eac9365e9de64fd4ab1d6fd0cb95.jpeg"},{"username":"hkz","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15427174/medium/c88acefb0d7306e1f7470e872029fb39_default.png"},{"username":"Steken","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15428516/medium/d5aea5653c769c3a523182bdb60d1664.png"},{"username":"flar.anton","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15428592/medium/b01fdb365d892e9f811f77fcb50a80a2.jpeg"},{"username":"Bon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15433542/medium/5397da4dfc821f20b6ac14fe0c514e9a.jpeg"},{"username":"bfkadan","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15434162/medium/4f9a0b43cfe3acaea60124c14ba7f44a.png"},{"username":"BunnySweety","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15434662/medium/f0ef200a6a0dcf0e1d0e9ecd4148f560_default.png"},{"username":"HRKings","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15436168/medium/69a31e461d38549f01864e7ef10d642e.png"},{"username":"wiston81","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15439078/medium/10f292c8d12a7c21a44b54495fa4a3d8.jpeg"},{"username":"qaz0911","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15440860/medium/3d3e50ee388c72dc4bf7a771761f2d89_default.png"},{"username":"qqyule","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15441462/medium/7a3cdf82710ffb5d8f388bc0bd010665.png"},{"username":"Bims0n","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15445560/medium/603220b603eeb3367e0f0d3fa675247c.jpg"},{"username":"TariqDaCoder","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15446228/medium/50b0f4040112bbd67690b769477398e5_default.png"},{"username":"Anarchon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15449644/medium/e925e1f3e3ffbf0f982391ce263a1a28.jpeg"},{"username":"Ashun","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15453020/medium/ccdcf51c73d6aae40751bb30beee1915_default.png"},{"username":"sebekmartin","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15454038/medium/bcfb44598cdfd1d7cd4eb35812538962.jpeg"},{"username":"RagnarGraves","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15459882/medium/143d5af850c1154070a218bea124e9cb_default.png"},{"username":"PrtmPhlp","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15462414/medium/b80db55e9de301432dcd1f8c8b24fd49_default.png"},{"username":"DooYoo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15470768/medium/2a18cf4be67094724b508c9e1e698a21_default.png"},{"username":"espentruls","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15486092/medium/8e38afc3a4ff669226a0cfd3e420ff3a.jpeg"},{"username":"frisco82","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15486922/medium/4e1c5d4189b42508e660daa3c1c25b2a.jpeg"},{"username":"lupineDK","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15491798/medium/461bd501e8371c062bf29ea171aedd36_default.png"},{"username":"hillaliy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15492732/medium/0bae17b421604892d888e3fc70cf0587.jpeg"},{"username":"MarcOrfilaCarreras","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15501072/medium/ea52b26c3c6f21e4931e38e3ce3f3d6e.png"},{"username":"robertbridda","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15507822/medium/a368c2e30411bb2da9b49290084191f3.png"},{"username":"MKoniuszko","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15518090/medium/87605434fcc839f6763ab07c50f6d232.jpeg"},{"username":"HeroSizy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15518710/medium/4e79c0e98cbeb536dd961e656331b509.png"},{"username":"dwt136","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15520022/medium/554422503f2baea43ace85facb4546fb_default.png"},{"username":"asifthewebguy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15526719/medium/b18931dd0c800d725048bd440646198b_default.png"},{"username":"eiloogs","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15545537/medium/f290a2f1190983530a9b76b2e858a609.gif"},{"username":"_vytdv","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15547289/medium/60d8644cc8ad6f11a92ccea4a14cd098_default.png"},{"username":"crendasien","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15554645/medium/598ab1d4aaf6b8dccd5ba16be92da7b9.jpeg"},{"username":"edxo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15573823/medium/8a565b732a75a77f840dd123cdb30bf4.png"},{"username":"somerlev","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15617065/medium/f4b13513e311ec902d90b2f718412c55.jpg"},{"username":"kid1412621","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15643771/medium/dd455e32de652fa88e6fd97598bdffa7.png"},{"username":"suming","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15644717/medium/244159dfe10fa03436205506f80c9e25.png"},{"username":"nick.gher","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15647517/medium/5374a2c6fef60a3fbf0edf86b997c351_default.png"},{"username":"DataCat","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15650315/medium/ce7c1365adf35c5d490d77500a4607fb_default.png"},{"username":"dizo89","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15658375/medium/0ca745e5017d491fe1b22b0239904de8.jpeg"},{"username":"tee_noodle","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15674577/medium/804d9cf06f5196026acb6436b809d0da_default.png"},{"username":"Marty88","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15674593/medium/492b1509d52bd2809dea768121217125.jpeg"},{"username":"Spillebulle","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15677023/medium/20b98bb85062e07afe0e63618f8a5feb.PNG"},{"username":"petitmewen","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15685239/medium/15de9b62d2e0bc25013435f1784bbcc1.jpeg"},{"username":"NoProsNoNoobs","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15687709/medium/ae8f65fafeb8bcf74dcb8871bbe46461.png"},{"username":"y.gybson","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15690777/medium/b5cb5d2d5768904ff6586c727e3a6c77.jpeg"},{"username":"inside90","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15704947/medium/c1355fcb30dd76f8e39d98d1d49f1c52.png"},{"username":"RJSkudra","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15709853/medium/c3abf2774913dc4e81fb261d36d7668c.png"},{"username":"binge203","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15713937/medium/77c1cfa4314673db80e6881fd9f64668.gif"},{"username":"Mailootje","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15714337/medium/743c3bc4ab1989966a375eeeec83d8b8.jpeg"},{"username":"tim-wiegers","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15719805/medium/08a96f064813350661cd6b20bf3d7d99.png"},{"username":"GkhnG","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15722911/medium/71a027caec489ef6ce82bcf1888329d0_default.png"},{"username":"Zoen-Millo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15760967/medium/9e956f11adc5b34f5636268b5c485dbf.jpg"},{"username":"HooinKyoma","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15792897/medium/9489f0a9b368e0e827ae758b740a2eed.jpeg"},{"username":"wathergeen","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15794495/medium/a83b7fc80d180669ebfd6deb3544cfd0.png"},{"username":"MoeToo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15818233/medium/d35cd6953717706eaf20f6c143c62947.png"},{"username":"itodouble","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15836233/medium/e984caea18fb0673bf319fcf28cef649.png"},{"username":"loslocitos","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15847901/medium/fe30d12fd2cf38212f929e13b169f9ec.jpeg"},{"username":"Oversleep","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15849065/medium/06141f13a6d541d753f3c2f2947b8068_default.png"},{"username":"Beardy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15865139/medium/fca6b9d2b3f52e286d1568f52b83b6a0_default.png"},{"username":"raelyan","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15875457/medium/2f4fda1d1aaa5dcc79b328baf3f03151.jpeg"},{"username":"dolphin738","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15913763/medium/ee6fede7b8528ca642329ada80d1cc18.png"},{"username":"brunotco","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15916719/medium/09db45880fc05abc18adb8d932a5ecf9_default.png"},{"username":"LukeIsHereToDevelop","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15924739/medium/3e6cd3940297bb4ba7bb039c93e6f918.png"},{"username":"kennit","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15925879/medium/6b0733ad3c5949b91c55e4d8b03db8a5_default.png"},{"username":"kuunpire","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15950309/medium/8192a4f08f07086828ac9f74ed29a169.jpeg"},{"username":"Sandor-dev","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15951759/medium/0216c2da4eb028164ebbecf1c72f6271_default.png"},{"username":"Meierschlumpf","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15953187/medium/23c744faef1ab84fbdc9351a7850aab6.jpeg"},{"username":"harmlesscat","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15970733/medium/dd8d0214a0250c932bb518b1b55e45a2_default.png"},{"username":"OrzWTF","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15976121/medium/4c4557cbff7ff7b0503455bc59c020e0.jpeg"},{"username":"tagaishi","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15977271/medium/eade504c83a5a1ff831c80a538fbdb44_default.png"},{"username":"azurite928","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15981895/medium/547ccc459ee123e78b5401c499f1022d.png"},{"username":"Ronner231","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16021342/medium/7734d550df2de5a2fec2ffff33e7024c.jpeg"},{"username":"ugyes","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16034148/medium/ed001e3f470a2dea9a8ce955b18e7bd5.png"},{"username":"rpieja","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16045554/medium/bd55baca2ef8b92502a760cc9ee7c505_default.png"},{"username":"flambyisyou","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16051620/medium/3a3bc0c90f6b95ab4ef74396a0a17beb.png"},{"username":"Topbcy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16077170/medium/d3aed33ea56330338756cfcd89477cfe.jpeg"},{"username":"ai5d02sb","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16084674/medium/7c8119fe2a5ca71bb15f636916a42b95_default.png"},{"username":"explosiveparrot","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16097722/medium/7762f80fc1da63f5b2eb87de9d640324_default.png"},{"username":"DestroyCom","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16111544/medium/83e3d3ac5c8bfed634cd1a074854db67.png"},{"username":"neotraxo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16116966/medium/b30df957873329019a8a90a69f6efe3a.png"},{"username":"gzxpa","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16123314/medium/487b05577310a946b0b98bc72c11213b_default.png"},{"username":"TORIK","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16124732/medium/de770890e6411860ac06e8cc2dc0abd0_default.png"},{"username":"sergio.pibot","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16138114/medium/80db802b2fcd6bbf19ea4c7413367dca.jpeg"},{"username":"karam-ajaj","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16139838/medium/7539ab958d3c85d5f67e7849483ea8f7.jpeg"},{"username":"SimonHenz97","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16151520/medium/9b94a85b536688e2d94538c384fd0a76.png"},{"username":"olsson82","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16198988/medium/eeaab4cba210c537424d4204754b604e.png"},{"username":"bo3bdo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16222806/medium/8652f3beacb6098dde5a4cd0a29fe80d.jpeg"},{"username":"AngryPlayer04","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16245192/medium/342715274f4dc31fd4132cdae9126188.jpeg"},{"username":"ehatamm","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16245884/medium/979d5e5526fe545be9bf46db481f7182.jpeg"},{"username":"Balionelis","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16246058/medium/986d62ba363594c517d966fe9178dcbb.png"},{"username":"kwargs","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16248816/medium/19ce11f04bf1ae2637e0483399c675f9_default.png"},{"username":"lucicu","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16273892/medium/3b09e8f3bead221ef98d6a45a16851dc_default.png"},{"username":"Michael5564445","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16357688/medium/9d9026a8bf3eaccb0417da240932ebf7.png"},{"username":"Netscream","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16359198/medium/694e0c8572dc8a47e6d63da31ec5b992.png"},{"username":"belicstefan04","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16368142/medium/4742dcfd7bf7ad7e33e37ac44fba7e0f.png"},{"username":"Hamad2066","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16371478/medium/f37bbc7685b6757defdbd1494236af61.jpeg"},{"username":"3ct0pl4sm","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16399616/medium/ce796d1c40163975624c0a483e56374f.png"},{"username":"sanchez.marcell626","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16433865/medium/3ddde1314764cc2205ffdcd1ae719a91.png"},{"username":"Minoctis","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16490079/medium/91fd0849303a4eca033d660d0a7b6854.jpeg"},{"username":"homarr","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16657003/medium/3afabfd3de949a54ff5d40ad04552aba.png"},{"username":"mwgg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16658379/medium/763dd09f5c238cc5324d4d5357985292.png"},{"username":"kiwinho","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16671855/medium/bfe3a2d497dc4748a04d02e4ae2139cb.jpeg"},{"username":"tjvg4m34r13","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16679135/medium/7a483b9b0abe0d925e54808e1cb38fa0.jpeg"},{"username":"Diegoem","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16705921/medium/29ce68ebc191fc3f65499511b12de98f_default.png"},{"username":"bouks69","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16746091/medium/b58b1fc08520de416198be9df5d093eb.jpeg"},{"username":"futhgar","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16748067/medium/b8c526b097f9aa9d687250cac3df16dc.jpeg"},{"username":"GrimSQL","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16764343/medium/fff729a76d1f8fbcdaee9bb0c0f5f3fd.png"},{"username":"chnikel","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16767047/medium/3dda2a37e03049dafefe6697bb00f75c.png"},{"username":"yuki19870616","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16767951/medium/f59c848e38382cda6c8464b0a7b9e642_default.png"},{"username":"noamdal","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16782245/medium/b4a72a61f9caf138f0322c0cb987e6d0.png"},{"username":"MalithRukshan","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16809057/medium/084d6a5b35fbbeacc70e7021197d222f.png"},{"username":"minirope19","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16930929/medium/e8cbbc26747e31c5a8959215e1dd067b.jpeg"},{"username":"prubin","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17503492/medium/96ac87644691e49c1f983f2f094e541c_default.png"},{"username":"sam-tam-sam","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17578052/medium/1628dc2954ce3ae95e0caaa2bd60ab0c.png"},{"username":"toineenzo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12371852/medium/9f1b2bedb4794c59479cd289bdba9fab.png"},{"username":"ArcaneWater","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12421105/medium/1ac82517a6c658f6b62c48aebcb17e86_default.png"},{"username":"Ebedami","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12974801/medium/b596dea5c09454c4c828eac558389755.jpg"},{"username":"perrygamerptyt","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13117177/medium/1406c949507ecd438480473c8a1f6124.jpg"},{"username":"SergiSvK","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13320543/medium/3df3c79cc5f0c53716c559cd3fd2fc20.png"},{"username":"jeongeon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13362856/medium/eb572f72cde5e5526c517ca3a6489850_default.png"},{"username":"MrTranCFCVN","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13439475/medium/a1789d69c85d90c667194b5d6a518c08_default.png"},{"username":"Tobost06","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13467449/medium/9227dc07f6366bc060d28304f5cb8ce7.jpeg"},{"username":"Kf637","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13530622/medium/118b00bb72d01d3229c97409637e25d1_default.png"},{"username":"Cruellest","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13610615/medium/2a74faa0947ee08d18f7946fb8602c1e.jpg"},{"username":"olavinto","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14424644/medium/37c01732bd2b7a272b421807a05ccfeb.png"},{"username":"Thario","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14491372/medium/dd5e142070802a672900121aa3f332a6_default.png"},{"username":"Wjouter","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14585620/medium/b91a51513332bdc0a0a9ecbed99ecbc3.png"},{"username":"albanobattistella","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14686194/medium/564afcfd76f5cd24751bd669cf4943aa.jpg"},{"username":"Kachelkaiser","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14763406/medium/203a781797da4a18fe0f4e7db8fd547c.png"},{"username":"regi4","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14842936/medium/f7e1d672f562a7db61ba6b4b8f4de41d.png"},{"username":"baton5129","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14891064/medium/8d438f557b82977dd02f0ead3187265f.PNG"},{"username":"meviper","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15958903/medium/209f521ce33a05831fa8d7d1b7babc20_default.png"},{"username":"GerOriki","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16268376/medium/da00e54b08cd40348231d92873a0cd0a_default.png"},{"username":"TheRedCyclops","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16486399/medium/7f39226180120d5a9efcb8e13d8aec8e_default.png"},{"username":"dymek37","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16659221/medium/d1dc6d11d7e7fc370efc5070e837ae03.png"},{"username":"B3CKDOOR","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16744975/medium/e6c7b2d45e76465d54e6efb67c83da7d.png"},{"username":"Larsluph","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16779933/medium/ed7d36f8b44013bad3a16ac0491bd0f7.png"},{"username":"FOEDI","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16781001/medium/6b4552fb72e359aa016f7a054078fac8.png"},{"username":"xmarkurion","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16805443/medium/34a20428427de5aaef99c7d140646803.png"},{"username":"gregid","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16806705/medium/f3c8f4a20436e8538929130142bbc104.png"},{"username":"Flameberg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16820453/medium/d47be866148474c9d05fec6fbe406d88.png"},{"username":"Playfust","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16872865/medium/5f4609cc711e5fb9fa8a0b178635769c.jpeg"},{"username":"Cotignac","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16879297/medium/81ff353edf030699a159bb79cda26e84.jpg"},{"username":"LeaHun","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16916375/medium/618520f0543b1e212ebc83d66b683d4b_default.png"},{"username":"jackwellerreal","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16919717/medium/37bbfdc03893f141133ccc619593266d.png"},{"username":"renan.costaalencar","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16938427/medium/6d25b25320c5bde734118dec4af9cd5b.png"},{"username":"andrius.cim","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16967845/medium/46028fc1a0ddfaaeebcb37b39739625d_default.png"},{"username":"xjxexrxrxyx","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17041412/medium/d34d664166db6fb25579bca9ff3b50b4.jpeg"},{"username":"bilhal.fellah","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17044572/medium/d1ec6f17e4aa013e9eededc83778d2c6.png"},{"username":"the_octo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17058060/medium/7423ab3a4cabb67f5decb2e2dfa2b675_default.png"},{"username":"BamesJond","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17075846/medium/128d7ffd40254c8e376f45678e2fc620_default.png"},{"username":"Kornikus","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17134240/medium/d7a42b2c30db46ff152699ca01f9e11a_default.png"},{"username":"xoxyuxu","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17176526/medium/108055aa24343043de852e412bec74be.png"},{"username":"cryptodntsleep","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17249408/medium/b9e15aa2b24a0dbc1e4f194aa8ed5109.png"},{"username":"yaniorg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17261842/medium/7dbfc77f21c826845961243c44540d26.jpg"},{"username":"Vidariondr","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17262438/medium/45fbc71be02ef27296b6f423e97b6a03_default.png"},{"username":"Fastery","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17263066/medium/701b0edc59676174863ad651528bbb37.jpeg"},{"username":"stratself","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17290388/medium/57d9d8161b3fd0abf4dc5558b4a1fa05_default.png"},{"username":"wuzeqin","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17292606/medium/b9e0308410b31337e2d7aa6ed346d718_default.png"},{"username":"ChristopherBull","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17304338/medium/21a175ce596bfae81430767467908b90.jpeg"},{"username":"darkbcnlord","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17311436/medium/b271bc0b419ec3a26ddb7b63ff8ffc4b.png"},{"username":"zhoran1997","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17344028/medium/c8f450b5a8f1e9494a45dc60af7ce63e.png"},{"username":"gilalves1703","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17447768/medium/3f1de562a5c2391c88bbf8d5cf40a266.png"},{"username":"iServeCloud","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17470960/medium/11649b99d609438d66455a4d2fdc70f7.png"},{"username":"guibolzantvbox","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17474136/medium/59a576e6da538664ceb972253916fa02.jpeg"},{"username":"ivann136","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17506062/medium/67d09ada36fac5f444a1f7517e3a97bd_default.png"},{"username":"Maheshivara","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17516082/medium/576e1e6581cf969615b265de6aeff8b7.jpeg"},{"username":"brunogui81","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17517542/medium/7c0d174e810435af518fe8e0c05e151f.jpeg"},{"username":"michelwilhelm","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17542190/medium/4c6b33fd8993ff565fa75add2ce8355e.jpeg"},{"username":"dias-gxstavo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17547376/medium/8c6b109aae8aeb651192346a39ae9e5b.jpeg"},{"username":"ToxykAuBleu","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17614030/medium/8d21e0608560172b121bd46126d827c7.jpeg"},{"username":"e.erdemir","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17617994/medium/7259a29db9941c6171a8cbbd643b92bd.png"},{"username":"sjonkreutz","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17618306/medium/7601c45d015189a863656e21348d223b.png"},{"username":"volovich0377","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17620388/medium/c929a8fbd24f96d17620fa497ade7309.png"},{"username":"Hamstio1","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17624898/medium/406e0bf40094c24a01c3064f8f5b2a82.png"},{"username":"i3laa","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17627462/medium/613a9d283ed8b69819ee181903851660.jpeg"},{"username":"bastiengrignon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17629884/medium/ddfc3339285bd65195fcd834e512e9b7.jpeg"},{"username":"kauhee","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17644600/medium/def1b9066cf9275b4273a5a5dca7f325.png"},{"username":"hongminzheng","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17683860/medium/a764f4963912777d27a7cd98e136a2b2.png"},{"username":"d-lindahl","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17726729/medium/cbde348582fbabcfadd89a56cd5a0b40.png"},{"username":"Enoal-Fauchille-Bolle","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17734649/medium/6e6fb29198782dc7856ea21811db669c.jpeg"}]
\ No newline at end of file
+[
+  {
+    "username": "carlchina",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/6697/medium/d22bbe7797bbeb30dbdc73a5648d329a_default.png"
+  },
+  {
+    "username": "zielmann",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/7795/medium/ad22b8b8d5eb33e4154d53a454c862fd_default.png"
+  },
+  {
+    "username": "Thalyn",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/12494028/medium/5faf5acc945a874ed116c4567edaa09f_default.png"
+  },
+  {
+    "username": "magnushj",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/12503488/medium/68f32e33ea7b891960055c9f831f7344_default.png"
+  },
+  {
+    "username": "almontegil",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/12580457/medium/f4136cacbdfdb4c28ae7f85dc5f840db_default.png"
+  },
+  {
+    "username": "andibing",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/12664938/medium/b8be63e4dcb2e791ced1ffc9e3a049a5.jpg"
+  },
+  {
+    "username": "gronare",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/12680911/medium/c6eb14d1504156f34a158e507f73aa3d_default.png"
+  },
+  {
+    "username": "SmartPhoneLover",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/12701640/medium/ec95486662ec875cda080e778c3ff702.jpg"
+  },
+  {
+    "username": "marcelotk_15",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/12773227/medium/ecf6bea16ab0c873c131df2154ee9718_default.png"
+  },
+  {
+    "username": "S3OD177",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13051544/medium/11dd990837f61f7e8f7d36b041a7fddb_default.png"
+  },
+  {
+    "username": "marcg",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13153301/medium/ebcf60fbf27deb148ec40a659566c6ff_default.png"
+  },
+  {
+    "username": "BeersTeddy",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13185230/medium/2f1f4e1effe74a23422b195cbefb2a95_default.png"
+  },
+  {
+    "username": "jamesmcmahon0",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13245578/medium/586aa873b4abddbd9abc6f3de99ab70e.jpeg"
+  },
+  {
+    "username": "b1nar10",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13286752/medium/249b02e3368752cb175446082015737c_default.png"
+  },
+  {
+    "username": "vannCN",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13330448/medium/9b8a9ee3611e51e951e22d5fd4eb7d8d.jpg"
+  },
+  {
+    "username": "binswm",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13343482/medium/45dde0e6097b9b72705d2eba9dbbc276_default.png"
+  },
+  {
+    "username": "SkewRam",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13496556/medium/188f5c2deb7938eda51eb786cc4539ca.jpeg"
+  },
+  {
+    "username": "raphcatarino",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13547726/medium/b003511e67df13a4b4b5689488fa8099.jpg"
+  },
+  {
+    "username": "shillos5",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13600557/medium/b17650b2b84f829d54fa548c44c1ab27.jpeg"
+  },
+  {
+    "username": "wolong98",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13641407/medium/f4634edc58c7857a357e5293543c15cf.jpg"
+  },
+  {
+    "username": "spair0039",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14012333/medium/72430e96027c09c19141cac38eae4617.png"
+  },
+  {
+    "username": "MajorMarcin",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14072183/medium/0a197e64bb92b6ea94cecbb607512c45.jpg"
+  },
+  {
+    "username": "KosmoMoustache",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14103535/medium/51c438cdd9f86e8811c75f4869de479c.png"
+  },
+  {
+    "username": "Soochaehwa",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14118689/medium/496a1ce63111547bf455a1e0a7ac75f1_default.png"
+  },
+  {
+    "username": "garryfield",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14187035/medium/520c964706676045f6eeec1b08edc880.jpg"
+  },
+  {
+    "username": "droidenko",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14444264/medium/4aa3a8e824f72bc9e5ec0d8de307095e.jpeg"
+  },
+  {
+    "username": "maathis",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14489950/medium/6eeddf13a757ee35f78f1763f94d95e1.jpeg"
+  },
+  {
+    "username": "bukvam",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14546502/medium/a819dc40a13c57395a17dc46e847d3ce.jpg"
+  },
+  {
+    "username": "gm.cinalli",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14670666/medium/2d466a0fdbda40764526be86c97c0ab4.jpeg"
+  },
+  {
+    "username": "antoine2tt",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14722148/medium/f88d926900862dd59007ea4b3419cb9d.png"
+  },
+  {
+    "username": "cretzen",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14799754/medium/3ba5c1805ec20c000d5810c07985afe9.jpg"
+  },
+  {
+    "username": "ktKongTong",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14817246/medium/97cfc3c028dbdaf85ebd1102da71e58c.jpeg"
+  },
+  {
+    "username": "marinkaberg",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14861042/medium/2d5c4e62613f03082f3e645fa92efd59.jpeg"
+  },
+  {
+    "username": "djismgaming",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14934947/medium/f5a8570713c34ab0f7d5405d105e2a9a.jpeg"
+  },
+  {
+    "username": "f1refa11",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14949159/medium/fd2ae63b8eb4462200ba96abf943c1b9.png"
+  },
+  {
+    "username": "jeffersonraimon",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15057621/medium/6dff469563860e2618bc9d45646d0ab4.png"
+  },
+  {
+    "username": "giop98",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15057987/medium/b8a4825d3fc39fc662f35ee258db4b2d.jpeg"
+  },
+  {
+    "username": "tomislav.kraljevic",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15118857/medium/e133f1061cc92850b854d05d8faaeafd.png"
+  },
+  {
+    "username": "Walkx",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15202182/medium/5c37361ae45aeed487b34582c1f7ca37.png"
+  },
+  {
+    "username": "andrea.rosso",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15246318/medium/11f3f5ef44ec7f55b6f143090e208704_default.png"
+  },
+  {
+    "username": "ajnart",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15270132/medium/a0f107a463c8910ee96bc2fa843a17e3.jpeg"
+  },
+  {
+    "username": "Witchling",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15282238/medium/9e196b6783415b10ca571b7673c2ef33.jpg"
+  },
+  {
+    "username": "guineuu",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15292058/medium/22fbb758bda3b7805d50bf21d38f2c20.jpeg"
+  },
+  {
+    "username": "Bulgus",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15304568/medium/0e8787e5ceb02ed5c96a514d0068ae87.jpg"
+  },
+  {
+    "username": "Narno",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15314996/medium/a6ba093f24884250a1bf6c6f2ca50f1b_default.png"
+  },
+  {
+    "username": "BySempron",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15315986/medium/e3d22d7b1423c6823a9f36d595ed4bdb.png"
+  },
+  {
+    "username": "jonathan.berglin.work",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15359236/medium/95930b2093db13b76179782f7322c5d5.png"
+  },
+  {
+    "username": "icdmkg",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15405504/medium/f334d16cde1ac4ffb935b440d03465af.gif"
+  },
+  {
+    "username": "irithys",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15405614/medium/3086461c47cce0a0c031925e5f943412.png"
+  },
+  {
+    "username": "JannesV",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15419912/medium/a7809eb4b817d7c49b62cf10ae86b950.png"
+  },
+  {
+    "username": "benniblot",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15419914/medium/8086b1573d31f152ba41949b3a172445.jpeg"
+  },
+  {
+    "username": "pacjo",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15419916/medium/3cbeddbd7bc01faafb5a3bf47bba915b_default.png"
+  },
+  {
+    "username": "Payou6994",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15419934/medium/37c9b9b17dfb578404c1c1ddb73ba7a8.png"
+  },
+  {
+    "username": "fzibi21",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15419976/medium/0da688450358e0290a7b7359cc1f7328.png"
+  },
+  {
+    "username": "WowMurdock",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15420118/medium/de19576fccb495b6dfe4c4c04a56b834.png"
+  },
+  {
+    "username": "hbooo",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15420120/medium/6c7c7f8db785061356ebb03d044d3329.jpeg"
+  },
+  {
+    "username": "Manicraft1001",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15420178/medium/50ec94563a06a9f74f33bd09f01eed4d.jpg"
+  },
+  {
+    "username": "Void123",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15420354/medium/86929d44df92a00f9fe900a985c196df_default.png"
+  },
+  {
+    "username": "R4cc",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15422606/medium/a390979662b84694f59de30bdb732141.jpeg"
+  },
+  {
+    "username": "fabricionaweb",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15425808/medium/a9354142e7ae5152c144409d55fda551_default.png"
+  },
+  {
+    "username": "JokeOfDead",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15426890/medium/a383eac9365e9de64fd4ab1d6fd0cb95.jpeg"
+  },
+  {
+    "username": "hkz",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15427174/medium/c88acefb0d7306e1f7470e872029fb39_default.png"
+  },
+  {
+    "username": "Steken",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15428516/medium/d5aea5653c769c3a523182bdb60d1664.png"
+  },
+  {
+    "username": "flar.anton",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15428592/medium/b01fdb365d892e9f811f77fcb50a80a2.jpeg"
+  },
+  {
+    "username": "Bon",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15433542/medium/5397da4dfc821f20b6ac14fe0c514e9a.jpeg"
+  },
+  {
+    "username": "bfkadan",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15434162/medium/4f9a0b43cfe3acaea60124c14ba7f44a.png"
+  },
+  {
+    "username": "BunnySweety",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15434662/medium/f0ef200a6a0dcf0e1d0e9ecd4148f560_default.png"
+  },
+  {
+    "username": "HRKings",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15436168/medium/69a31e461d38549f01864e7ef10d642e.png"
+  },
+  {
+    "username": "wiston81",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15439078/medium/10f292c8d12a7c21a44b54495fa4a3d8.jpeg"
+  },
+  {
+    "username": "qaz0911",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15440860/medium/3d3e50ee388c72dc4bf7a771761f2d89_default.png"
+  },
+  {
+    "username": "qqyule",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15441462/medium/7a3cdf82710ffb5d8f388bc0bd010665.png"
+  },
+  {
+    "username": "Bims0n",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15445560/medium/603220b603eeb3367e0f0d3fa675247c.jpg"
+  },
+  {
+    "username": "TariqDaCoder",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15446228/medium/50b0f4040112bbd67690b769477398e5_default.png"
+  },
+  {
+    "username": "Anarchon",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15449644/medium/e925e1f3e3ffbf0f982391ce263a1a28.jpeg"
+  },
+  {
+    "username": "Ashun",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15453020/medium/ccdcf51c73d6aae40751bb30beee1915_default.png"
+  },
+  {
+    "username": "sebekmartin",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15454038/medium/bcfb44598cdfd1d7cd4eb35812538962.jpeg"
+  },
+  {
+    "username": "RagnarGraves",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15459882/medium/143d5af850c1154070a218bea124e9cb_default.png"
+  },
+  {
+    "username": "PrtmPhlp",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15462414/medium/b80db55e9de301432dcd1f8c8b24fd49_default.png"
+  },
+  {
+    "username": "DooYoo",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15470768/medium/2a18cf4be67094724b508c9e1e698a21_default.png"
+  },
+  {
+    "username": "espentruls",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15486092/medium/8e38afc3a4ff669226a0cfd3e420ff3a.jpeg"
+  },
+  {
+    "username": "frisco82",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15486922/medium/4e1c5d4189b42508e660daa3c1c25b2a.jpeg"
+  },
+  {
+    "username": "lupineDK",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15491798/medium/461bd501e8371c062bf29ea171aedd36_default.png"
+  },
+  {
+    "username": "hillaliy",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15492732/medium/0bae17b421604892d888e3fc70cf0587.jpeg"
+  },
+  {
+    "username": "MarcOrfilaCarreras",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15501072/medium/ea52b26c3c6f21e4931e38e3ce3f3d6e.png"
+  },
+  {
+    "username": "robertbridda",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15507822/medium/a368c2e30411bb2da9b49290084191f3.png"
+  },
+  {
+    "username": "MKoniuszko",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15518090/medium/87605434fcc839f6763ab07c50f6d232.jpeg"
+  },
+  {
+    "username": "HeroSizy",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15518710/medium/4e79c0e98cbeb536dd961e656331b509.png"
+  },
+  {
+    "username": "dwt136",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15520022/medium/554422503f2baea43ace85facb4546fb_default.png"
+  },
+  {
+    "username": "asifthewebguy",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15526719/medium/b18931dd0c800d725048bd440646198b_default.png"
+  },
+  {
+    "username": "eiloogs",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15545537/medium/f290a2f1190983530a9b76b2e858a609.gif"
+  },
+  {
+    "username": "_vytdv",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15547289/medium/60d8644cc8ad6f11a92ccea4a14cd098_default.png"
+  },
+  {
+    "username": "crendasien",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15554645/medium/598ab1d4aaf6b8dccd5ba16be92da7b9.jpeg"
+  },
+  {
+    "username": "edxo",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15573823/medium/8a565b732a75a77f840dd123cdb30bf4.png"
+  },
+  {
+    "username": "somerlev",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15617065/medium/f4b13513e311ec902d90b2f718412c55.jpg"
+  },
+  {
+    "username": "kid1412621",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15643771/medium/dd455e32de652fa88e6fd97598bdffa7.png"
+  },
+  {
+    "username": "suming",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15644717/medium/244159dfe10fa03436205506f80c9e25.png"
+  },
+  {
+    "username": "nick.gher",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15647517/medium/5374a2c6fef60a3fbf0edf86b997c351_default.png"
+  },
+  {
+    "username": "DataCat",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15650315/medium/ce7c1365adf35c5d490d77500a4607fb_default.png"
+  },
+  {
+    "username": "dizo89",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15658375/medium/0ca745e5017d491fe1b22b0239904de8.jpeg"
+  },
+  {
+    "username": "tee_noodle",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15674577/medium/804d9cf06f5196026acb6436b809d0da_default.png"
+  },
+  {
+    "username": "Marty88",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15674593/medium/492b1509d52bd2809dea768121217125.jpeg"
+  },
+  {
+    "username": "Spillebulle",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15677023/medium/20b98bb85062e07afe0e63618f8a5feb.PNG"
+  },
+  {
+    "username": "petitmewen",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15685239/medium/15de9b62d2e0bc25013435f1784bbcc1.jpeg"
+  },
+  {
+    "username": "NoProsNoNoobs",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15687709/medium/ae8f65fafeb8bcf74dcb8871bbe46461.png"
+  },
+  {
+    "username": "y.gybson",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15690777/medium/b5cb5d2d5768904ff6586c727e3a6c77.jpeg"
+  },
+  {
+    "username": "inside90",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15704947/medium/c1355fcb30dd76f8e39d98d1d49f1c52.png"
+  },
+  {
+    "username": "RJSkudra",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15709853/medium/c3abf2774913dc4e81fb261d36d7668c.png"
+  },
+  {
+    "username": "binge203",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15713937/medium/77c1cfa4314673db80e6881fd9f64668.gif"
+  },
+  {
+    "username": "Mailootje",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15714337/medium/743c3bc4ab1989966a375eeeec83d8b8.jpeg"
+  },
+  {
+    "username": "tim-wiegers",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15719805/medium/08a96f064813350661cd6b20bf3d7d99.png"
+  },
+  {
+    "username": "GkhnG",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15722911/medium/71a027caec489ef6ce82bcf1888329d0_default.png"
+  },
+  {
+    "username": "Zoen-Millo",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15760967/medium/9e956f11adc5b34f5636268b5c485dbf.jpg"
+  },
+  {
+    "username": "HooinKyoma",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15792897/medium/9489f0a9b368e0e827ae758b740a2eed.jpeg"
+  },
+  {
+    "username": "wathergeen",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15794495/medium/a83b7fc80d180669ebfd6deb3544cfd0.png"
+  },
+  {
+    "username": "MoeToo",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15818233/medium/d35cd6953717706eaf20f6c143c62947.png"
+  },
+  {
+    "username": "itodouble",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15836233/medium/e984caea18fb0673bf319fcf28cef649.png"
+  },
+  {
+    "username": "loslocitos",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15847901/medium/fe30d12fd2cf38212f929e13b169f9ec.jpeg"
+  },
+  {
+    "username": "Oversleep",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15849065/medium/06141f13a6d541d753f3c2f2947b8068_default.png"
+  },
+  {
+    "username": "Beardy",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15865139/medium/fca6b9d2b3f52e286d1568f52b83b6a0_default.png"
+  },
+  {
+    "username": "raelyan",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15875457/medium/2f4fda1d1aaa5dcc79b328baf3f03151.jpeg"
+  },
+  {
+    "username": "dolphin738",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15913763/medium/ee6fede7b8528ca642329ada80d1cc18.png"
+  },
+  {
+    "username": "brunotco",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15916719/medium/09db45880fc05abc18adb8d932a5ecf9_default.png"
+  },
+  {
+    "username": "LukeIsHereToDevelop",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15924739/medium/3e6cd3940297bb4ba7bb039c93e6f918.png"
+  },
+  {
+    "username": "kennit",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15925879/medium/6b0733ad3c5949b91c55e4d8b03db8a5_default.png"
+  },
+  {
+    "username": "kuunpire",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15950309/medium/8192a4f08f07086828ac9f74ed29a169.jpeg"
+  },
+  {
+    "username": "Sandor-dev",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15951759/medium/0216c2da4eb028164ebbecf1c72f6271_default.png"
+  },
+  {
+    "username": "Meierschlumpf",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15953187/medium/23c744faef1ab84fbdc9351a7850aab6.jpeg"
+  },
+  {
+    "username": "harmlesscat",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15970733/medium/dd8d0214a0250c932bb518b1b55e45a2_default.png"
+  },
+  {
+    "username": "OrzWTF",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15976121/medium/4c4557cbff7ff7b0503455bc59c020e0.jpeg"
+  },
+  {
+    "username": "tagaishi",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15977271/medium/eade504c83a5a1ff831c80a538fbdb44_default.png"
+  },
+  {
+    "username": "azurite928",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15981895/medium/547ccc459ee123e78b5401c499f1022d.png"
+  },
+  {
+    "username": "Ronner231",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16021342/medium/7734d550df2de5a2fec2ffff33e7024c.jpeg"
+  },
+  {
+    "username": "ugyes",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16034148/medium/ed001e3f470a2dea9a8ce955b18e7bd5.png"
+  },
+  {
+    "username": "rpieja",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16045554/medium/bd55baca2ef8b92502a760cc9ee7c505_default.png"
+  },
+  {
+    "username": "flambyisyou",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16051620/medium/3a3bc0c90f6b95ab4ef74396a0a17beb.png"
+  },
+  {
+    "username": "Topbcy",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16077170/medium/d3aed33ea56330338756cfcd89477cfe.jpeg"
+  },
+  {
+    "username": "ai5d02sb",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16084674/medium/7c8119fe2a5ca71bb15f636916a42b95_default.png"
+  },
+  {
+    "username": "explosiveparrot",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16097722/medium/7762f80fc1da63f5b2eb87de9d640324_default.png"
+  },
+  {
+    "username": "DestroyCom",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16111544/medium/83e3d3ac5c8bfed634cd1a074854db67.png"
+  },
+  {
+    "username": "neotraxo",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16116966/medium/b30df957873329019a8a90a69f6efe3a.png"
+  },
+  {
+    "username": "gzxpa",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16123314/medium/487b05577310a946b0b98bc72c11213b_default.png"
+  },
+  {
+    "username": "TORIK",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16124732/medium/de770890e6411860ac06e8cc2dc0abd0_default.png"
+  },
+  {
+    "username": "sergio.pibot",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16138114/medium/80db802b2fcd6bbf19ea4c7413367dca.jpeg"
+  },
+  {
+    "username": "karam-ajaj",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16139838/medium/7539ab958d3c85d5f67e7849483ea8f7.jpeg"
+  },
+  {
+    "username": "SimonHenz97",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16151520/medium/9b94a85b536688e2d94538c384fd0a76.png"
+  },
+  {
+    "username": "olsson82",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16198988/medium/eeaab4cba210c537424d4204754b604e.png"
+  },
+  {
+    "username": "bo3bdo",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16222806/medium/8652f3beacb6098dde5a4cd0a29fe80d.jpeg"
+  },
+  {
+    "username": "AngryPlayer04",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16245192/medium/342715274f4dc31fd4132cdae9126188.jpeg"
+  },
+  {
+    "username": "ehatamm",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16245884/medium/979d5e5526fe545be9bf46db481f7182.jpeg"
+  },
+  {
+    "username": "Balionelis",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16246058/medium/986d62ba363594c517d966fe9178dcbb.png"
+  },
+  {
+    "username": "kwargs",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16248816/medium/19ce11f04bf1ae2637e0483399c675f9_default.png"
+  },
+  {
+    "username": "lucicu",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16273892/medium/3b09e8f3bead221ef98d6a45a16851dc_default.png"
+  },
+  {
+    "username": "Michael5564445",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16357688/medium/9d9026a8bf3eaccb0417da240932ebf7.png"
+  },
+  {
+    "username": "Netscream",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16359198/medium/694e0c8572dc8a47e6d63da31ec5b992.png"
+  },
+  {
+    "username": "belicstefan04",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16368142/medium/4742dcfd7bf7ad7e33e37ac44fba7e0f.png"
+  },
+  {
+    "username": "Hamad2066",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16371478/medium/f37bbc7685b6757defdbd1494236af61.jpeg"
+  },
+  {
+    "username": "3ct0pl4sm",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16399616/medium/ce796d1c40163975624c0a483e56374f.png"
+  },
+  {
+    "username": "sanchez.marcell626",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16433865/medium/3ddde1314764cc2205ffdcd1ae719a91.png"
+  },
+  {
+    "username": "Minoctis",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16490079/medium/91fd0849303a4eca033d660d0a7b6854.jpeg"
+  },
+  {
+    "username": "homarr",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16657003/medium/3afabfd3de949a54ff5d40ad04552aba.png"
+  },
+  {
+    "username": "mwgg",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16658379/medium/763dd09f5c238cc5324d4d5357985292.png"
+  },
+  {
+    "username": "kiwinho",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16671855/medium/bfe3a2d497dc4748a04d02e4ae2139cb.jpeg"
+  },
+  {
+    "username": "tjvg4m34r13",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16679135/medium/7a483b9b0abe0d925e54808e1cb38fa0.jpeg"
+  },
+  {
+    "username": "Diegoem",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16705921/medium/29ce68ebc191fc3f65499511b12de98f_default.png"
+  },
+  {
+    "username": "bouks69",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16746091/medium/b58b1fc08520de416198be9df5d093eb.jpeg"
+  },
+  {
+    "username": "futhgar",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16748067/medium/b8c526b097f9aa9d687250cac3df16dc.jpeg"
+  },
+  {
+    "username": "GrimSQL",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16764343/medium/fff729a76d1f8fbcdaee9bb0c0f5f3fd.png"
+  },
+  {
+    "username": "chnikel",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16767047/medium/3dda2a37e03049dafefe6697bb00f75c.png"
+  },
+  {
+    "username": "yuki19870616",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16767951/medium/f59c848e38382cda6c8464b0a7b9e642_default.png"
+  },
+  {
+    "username": "noamdal",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16782245/medium/b4a72a61f9caf138f0322c0cb987e6d0.png"
+  },
+  {
+    "username": "MalithRukshan",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16809057/medium/084d6a5b35fbbeacc70e7021197d222f.png"
+  },
+  {
+    "username": "minirope19",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16930929/medium/e8cbbc26747e31c5a8959215e1dd067b.jpeg"
+  },
+  {
+    "username": "prubin",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17503492/medium/96ac87644691e49c1f983f2f094e541c_default.png"
+  },
+  {
+    "username": "sam-tam-sam",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17578052/medium/1628dc2954ce3ae95e0caaa2bd60ab0c.png"
+  },
+  {
+    "username": "toineenzo",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/12371852/medium/9f1b2bedb4794c59479cd289bdba9fab.png"
+  },
+  {
+    "username": "ArcaneWater",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/12421105/medium/1ac82517a6c658f6b62c48aebcb17e86_default.png"
+  },
+  {
+    "username": "Ebedami",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/12974801/medium/b596dea5c09454c4c828eac558389755.jpg"
+  },
+  {
+    "username": "perrygamerptyt",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13117177/medium/1406c949507ecd438480473c8a1f6124.jpg"
+  },
+  {
+    "username": "SergiSvK",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13320543/medium/3df3c79cc5f0c53716c559cd3fd2fc20.png"
+  },
+  {
+    "username": "jeongeon",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13362856/medium/eb572f72cde5e5526c517ca3a6489850_default.png"
+  },
+  {
+    "username": "MrTranCFCVN",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13439475/medium/a1789d69c85d90c667194b5d6a518c08_default.png"
+  },
+  {
+    "username": "Tobost06",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13467449/medium/9227dc07f6366bc060d28304f5cb8ce7.jpeg"
+  },
+  {
+    "username": "Kf637",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13530622/medium/118b00bb72d01d3229c97409637e25d1_default.png"
+  },
+  {
+    "username": "Cruellest",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/13610615/medium/2a74faa0947ee08d18f7946fb8602c1e.jpg"
+  },
+  {
+    "username": "olavinto",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14424644/medium/37c01732bd2b7a272b421807a05ccfeb.png"
+  },
+  {
+    "username": "Thario",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14491372/medium/dd5e142070802a672900121aa3f332a6_default.png"
+  },
+  {
+    "username": "Wjouter",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14585620/medium/b91a51513332bdc0a0a9ecbed99ecbc3.png"
+  },
+  {
+    "username": "albanobattistella",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14686194/medium/564afcfd76f5cd24751bd669cf4943aa.jpg"
+  },
+  {
+    "username": "Kachelkaiser",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14763406/medium/203a781797da4a18fe0f4e7db8fd547c.png"
+  },
+  {
+    "username": "regi4",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14842936/medium/f7e1d672f562a7db61ba6b4b8f4de41d.png"
+  },
+  {
+    "username": "baton5129",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/14891064/medium/8d438f557b82977dd02f0ead3187265f.PNG"
+  },
+  {
+    "username": "meviper",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/15958903/medium/209f521ce33a05831fa8d7d1b7babc20_default.png"
+  },
+  {
+    "username": "GerOriki",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16268376/medium/da00e54b08cd40348231d92873a0cd0a_default.png"
+  },
+  {
+    "username": "TheRedCyclops",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16486399/medium/7f39226180120d5a9efcb8e13d8aec8e_default.png"
+  },
+  {
+    "username": "dymek37",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16659221/medium/d1dc6d11d7e7fc370efc5070e837ae03.png"
+  },
+  {
+    "username": "B3CKDOOR",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16744975/medium/e6c7b2d45e76465d54e6efb67c83da7d.png"
+  },
+  {
+    "username": "Larsluph",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16779933/medium/ed7d36f8b44013bad3a16ac0491bd0f7.png"
+  },
+  {
+    "username": "FOEDI",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16781001/medium/6b4552fb72e359aa016f7a054078fac8.png"
+  },
+  {
+    "username": "xmarkurion",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16805443/medium/34a20428427de5aaef99c7d140646803.png"
+  },
+  {
+    "username": "gregid",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16806705/medium/f3c8f4a20436e8538929130142bbc104.png"
+  },
+  {
+    "username": "Flameberg",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16820453/medium/d47be866148474c9d05fec6fbe406d88.png"
+  },
+  {
+    "username": "Playfust",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16872865/medium/5f4609cc711e5fb9fa8a0b178635769c.jpeg"
+  },
+  {
+    "username": "Cotignac",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16879297/medium/81ff353edf030699a159bb79cda26e84.jpg"
+  },
+  {
+    "username": "LeaHun",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16916375/medium/618520f0543b1e212ebc83d66b683d4b_default.png"
+  },
+  {
+    "username": "jackwellerreal",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16919717/medium/37bbfdc03893f141133ccc619593266d.png"
+  },
+  {
+    "username": "renan.costaalencar",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16938427/medium/6d25b25320c5bde734118dec4af9cd5b.png"
+  },
+  {
+    "username": "andrius.cim",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/16967845/medium/46028fc1a0ddfaaeebcb37b39739625d_default.png"
+  },
+  {
+    "username": "xjxexrxrxyx",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17041412/medium/d34d664166db6fb25579bca9ff3b50b4.jpeg"
+  },
+  {
+    "username": "bilhal.fellah",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17044572/medium/d1ec6f17e4aa013e9eededc83778d2c6.png"
+  },
+  {
+    "username": "the_octo",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17058060/medium/7423ab3a4cabb67f5decb2e2dfa2b675_default.png"
+  },
+  {
+    "username": "BamesJond",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17075846/medium/128d7ffd40254c8e376f45678e2fc620_default.png"
+  },
+  {
+    "username": "Kornikus",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17134240/medium/d7a42b2c30db46ff152699ca01f9e11a_default.png"
+  },
+  {
+    "username": "xoxyuxu",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17176526/medium/108055aa24343043de852e412bec74be.png"
+  },
+  {
+    "username": "cryptodntsleep",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17249408/medium/b9e15aa2b24a0dbc1e4f194aa8ed5109.png"
+  },
+  {
+    "username": "yaniorg",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17261842/medium/7dbfc77f21c826845961243c44540d26.jpg"
+  },
+  {
+    "username": "Vidariondr",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17262438/medium/45fbc71be02ef27296b6f423e97b6a03_default.png"
+  },
+  {
+    "username": "Fastery",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17263066/medium/701b0edc59676174863ad651528bbb37.jpeg"
+  },
+  {
+    "username": "stratself",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17290388/medium/57d9d8161b3fd0abf4dc5558b4a1fa05_default.png"
+  },
+  {
+    "username": "wuzeqin",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17292606/medium/b9e0308410b31337e2d7aa6ed346d718_default.png"
+  },
+  {
+    "username": "ChristopherBull",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17304338/medium/21a175ce596bfae81430767467908b90.jpeg"
+  },
+  {
+    "username": "darkbcnlord",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17311436/medium/b271bc0b419ec3a26ddb7b63ff8ffc4b.png"
+  },
+  {
+    "username": "zhoran1997",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17344028/medium/c8f450b5a8f1e9494a45dc60af7ce63e.png"
+  },
+  {
+    "username": "gilalves1703",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17447768/medium/3f1de562a5c2391c88bbf8d5cf40a266.png"
+  },
+  {
+    "username": "iServeCloud",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17470960/medium/11649b99d609438d66455a4d2fdc70f7.png"
+  },
+  {
+    "username": "guibolzantvbox",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17474136/medium/59a576e6da538664ceb972253916fa02.jpeg"
+  },
+  {
+    "username": "ivann136",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17506062/medium/67d09ada36fac5f444a1f7517e3a97bd_default.png"
+  },
+  {
+    "username": "Maheshivara",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17516082/medium/576e1e6581cf969615b265de6aeff8b7.jpeg"
+  },
+  {
+    "username": "brunogui81",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17517542/medium/7c0d174e810435af518fe8e0c05e151f.jpeg"
+  },
+  {
+    "username": "michelwilhelm",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17542190/medium/4c6b33fd8993ff565fa75add2ce8355e.jpeg"
+  },
+  {
+    "username": "dias-gxstavo",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17547376/medium/8c6b109aae8aeb651192346a39ae9e5b.jpeg"
+  },
+  {
+    "username": "ToxykAuBleu",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17614030/medium/8d21e0608560172b121bd46126d827c7.jpeg"
+  },
+  {
+    "username": "e.erdemir",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17617994/medium/7259a29db9941c6171a8cbbd643b92bd.png"
+  },
+  {
+    "username": "sjonkreutz",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17618306/medium/7601c45d015189a863656e21348d223b.png"
+  },
+  {
+    "username": "volovich0377",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17620388/medium/c929a8fbd24f96d17620fa497ade7309.png"
+  },
+  {
+    "username": "Hamstio1",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17624898/medium/406e0bf40094c24a01c3064f8f5b2a82.png"
+  },
+  {
+    "username": "i3laa",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17627462/medium/613a9d283ed8b69819ee181903851660.jpeg"
+  },
+  {
+    "username": "bastiengrignon",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17629884/medium/ddfc3339285bd65195fcd834e512e9b7.jpeg"
+  },
+  {
+    "username": "kauhee",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17644600/medium/def1b9066cf9275b4273a5a5dca7f325.png"
+  },
+  {
+    "username": "hongminzheng",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17683860/medium/a764f4963912777d27a7cd98e136a2b2.png"
+  },
+  {
+    "username": "d-lindahl",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17726729/medium/cbde348582fbabcfadd89a56cd5a0b40.png"
+  },
+  {
+    "username": "Enoal-Fauchille-Bolle",
+    "avatarUrl": "https://crowdin-static.cf-downloads.crowdin.com/avatar/17734649/medium/6e6fb29198782dc7856ea21811db669c.jpeg"
+  }
+]
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index 1142ed3fb..d6f1416ba 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -15,16 +15,10 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
+      "@/*": ["./src/*"],
       "@site/*": ["./*"]
-    },
+    }
   },
-  "include": [
-    "**/*.ts",
-    "**/*.jsx",
-    "**/*.js",
-    "**/*.tsx",
-    "**/*.md",
-    "**/*.mdx",
-  ],
-  "exclude": ["node_modules"],
+  "include": ["**/*.ts", "**/*.jsx", "**/*.js", "**/*.tsx", "**/*.md", "**/*.mdx"],
+  "exclude": ["node_modules"]
 }
diff --git a/apps/nextjs/README.md b/apps/nextjs/README.md
index 437b0b8e9..6cecb43d3 100644
--- a/apps/nextjs/README.md
+++ b/apps/nextjs/README.md
@@ -1,28 +1,48 @@
-# Create T3 App
+# Homarr web application
 
-This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`.
+This workspace contains Homarr's Next.js application. It consumes the shared API, authentication, database, board,
+widget, translation, and UI packages from this monorepo.
 
-## What's next? How do I make an app with this?
+Run commands from the repository root:
 
-We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.
+```sh
+pnpm install --frozen-lockfile
+cp .env.example .env
+```
 
-If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help.
+Keep infrastructure running in the first terminal:
 
-- [Next.js](https://nextjs.org)
-- [NextAuth.js](https://next-auth.js.org)
-- [Drizzle](https://orm.drizzle.team)
-- [Tailwind CSS](https://tailwindcss.com)
-- [tRPC](https://trpc.io)
+```sh
+pnpm docker:dev
+```
 
-## Learn More
+Apply migrations and start the application in a second terminal:
 
-To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources:
+```sh
+pnpm db:migration:sqlite:run
+pnpm dev
+```
 
-- [Documentation](https://create.t3.gg/)
-- [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials
+The app listens on `http://127.0.0.1:3000`. Configure an absolute writable `DB_URL`, `AUTH_SECRET`, and
+`SECRET_ENCRYPTION_KEY` in `.env` before first startup.
 
-You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome!
+To test Custom Widgets against a local Community Workshop, start PocketBase and the docs in separate terminals:
 
-## How do I deploy this?
+```sh
+pnpm docker:workshop
+WORKSHOP_API_URL=http://127.0.0.1:8090 pnpm dev:docs
+```
 
-Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.
+Then set:
+
+```dotenv
+HOMARR_WEBSITE_URL=http://127.0.0.1:3003
+WORKSHOP_API_URL=http://127.0.0.1:8090
+WORKSHOP_WEB_URL=http://127.0.0.1:3003/workshop
+```
+
+Server-rendered runtime configuration exposes those URLs to the browser, so changing a production container's
+environment does not require rebuilding the Next.js bundle.
+
+See [`apps/docs/docs/advanced/development/getting-started.mdx`](../docs/docs/advanced/development/getting-started.mdx)
+for the full contributor setup.
diff --git a/apps/nextjs/next.config.ts b/apps/nextjs/next.config.ts
index 4ff31b9aa..240a3f47e 100644
--- a/apps/nextjs/next.config.ts
+++ b/apps/nextjs/next.config.ts
@@ -1,4 +1,6 @@
 // Importing env files here to validate on build
+import path from "node:path";
+
 import "@homarr/auth/env";
 import "@homarr/core/infrastructure/db/env";
 import "@homarr/common/env";
@@ -13,7 +15,21 @@ const withNextIntl = createNextIntlPlugin({
   requestConfig: "../../packages/translation/src/request.ts",
 });
 
+const getDevelopmentServiceAliases = () => {
+  if (process.env.NODE_ENV !== "development") {
+    return undefined;
+  }
+
+  return {
+    "@homarr/tasks": "./src/instrumentation-noop.ts",
+    "@homarr/websocket": "./src/instrumentation-noop.ts",
+  };
+};
+
 const nextConfig: NextConfig = {
+  // Next previews otherwise create agent instruction files in the application
+  // directory during development.
+  agentRules: false,
   env: {
     HOMARR_VERSION: process.env.HOMARR_VERSION ?? "unknown",
   },
@@ -30,19 +46,14 @@ const nextConfig: NextConfig = {
   serverExternalPackages: ["dockerode", "isomorphic-dompurify", "jsdom", "better-sqlite3"],
   experimental: {
     optimizePackageImports: ["@mantine/core", "@mantine/hooks", "@tabler/icons-react"],
-    turbopackFileSystemCacheForDev: true,
-    webpackMemoryOptimizations: true,
+    turbopackFileSystemCacheForBuild: true,
+    useTypeScriptCli: true,
   },
   turbopack: {
-    // ponytail: known Turbopack NFT warning from path.join(process.cwd(), …) in
-    // src/app/api/backup/{route,shared}.ts. No working placement in 16.2.x
-    // (see vercel/next.js#95125). Suppress until upstream fix lands.
-    ignoreIssue: [
-      {
-        path: "**/*",
-        title: "Encountered unexpected file in NFT list",
-      },
-    ],
+    root: path.resolve(import.meta.dirname, "../.."),
+    // Development runs tasks and WebSocket as separate processes. These aliases
+    // keep their production-only instrumentation imports out of the dev graph.
+    resolveAlias: getDevelopmentServiceAliases(),
   },
   transpilePackages: ["@homarr/ui", "@homarr/notifications", "@homarr/modals", "@homarr/spotlight", "@homarr/widgets"],
   images: {
@@ -68,6 +79,10 @@ const nextConfig: NextConfig = {
       {
         source: "/(.*)", // Apply CSP to all routes
         headers: [
+          {
+            key: "Accept-CH",
+            value: "Sec-CH-Viewport-Width",
+          },
           {
             key: "Content-Security-Policy",
             // worker-src / media-src with blob: is necessary for video.js, see https://github.com/homarr-labs/homarr/issues/3912 and https://stackoverflow.com/questions/65792855/problem-with-video-js-and-content-security-policy-csp
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
index d284a6f34..9caec3c7a 100644
--- a/apps/nextjs/package.json
+++ b/apps/nextjs/package.json
@@ -19,8 +19,12 @@
     "@assistant-ui/react-ai-sdk": "catalog:",
     "@assistant-ui/react-lexical": "catalog:",
     "@assistant-ui/react-markdown": "catalog:",
+    "@dnd-kit/abstract": "catalog:",
+    "@dnd-kit/collision": "catalog:",
     "@dnd-kit/core": "catalog:",
+    "@dnd-kit/dom": "catalog:",
     "@dnd-kit/modifiers": "catalog:",
+    "@dnd-kit/react": "catalog:",
     "@dnd-kit/sortable": "catalog:",
     "@dnd-kit/utilities": "catalog:",
     "@gfazioli/mantine-onboarding-tour": "catalog:",
@@ -31,12 +35,12 @@
     "@homarr/common": "workspace:^0.1.0",
     "@homarr/core": "workspace:^0.1.0",
     "@homarr/cron-job-status": "workspace:^0.1.0",
+    "@homarr/custom-widgets": "workspace:^0.1.0",
     "@homarr/db": "workspace:^0.1.0",
     "@homarr/definitions": "workspace:^0.1.0",
     "@homarr/docker": "workspace:^0.1.0",
     "@homarr/form": "workspace:^0.1.0",
     "@homarr/forms-collection": "workspace:^0.1.0",
-    "@homarr/gridstack": "catalog:",
     "@homarr/icons": "workspace:^0.1.0",
     "@homarr/image-proxy": "workspace:^0.1.0",
     "@homarr/integrations": "workspace:^0.1.0",
@@ -55,20 +59,21 @@
     "@homarr/validation": "workspace:^0.1.0",
     "@homarr/websocket": "workspace:^0.1.0",
     "@homarr/widgets": "workspace:^0.1.0",
+    "@homarr/workshop": "workspace:^0.1.0",
     "@mantine/colors-generator": "catalog:",
     "@mantine/core": "catalog:",
     "@mantine/dropzone": "catalog:",
+    "@mantine/form": "catalog:",
     "@mantine/hooks": "catalog:",
     "@mantine/modals": "catalog:",
     "@mantine/tiptap": "catalog:",
     "@modelcontextprotocol/sdk": "catalog:",
     "@scalar/api-reference-react": "catalog:",
     "@tabler/icons-react": "catalog:",
-    "@tanstack/query-async-storage-persister": "catalog:",
+    "@tanstack/react-devtools": "catalog:",
     "@tanstack/react-query": "catalog:",
     "@tanstack/react-query-devtools": "catalog:",
     "@tanstack/react-query-next-experimental": "catalog:",
-    "@tanstack/react-query-persist-client": "catalog:",
     "@trpc/client": "catalog:",
     "@trpc/next": "catalog:",
     "@trpc/react-query": "catalog:",
diff --git a/apps/nextjs/src/app/[locale]/_client-providers/development-tools.tsx b/apps/nextjs/src/app/[locale]/_client-providers/development-tools.tsx
new file mode 100644
index 000000000..a23164547
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/_client-providers/development-tools.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import { TanStackDevtools } from "@tanstack/react-devtools";
+import type { TanStackDevtoolsReactPlugin } from "@tanstack/react-devtools";
+import type { QueryClient } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
+import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+
+const valueStyle = { fontFamily: "monospace", overflowWrap: "anywhere" } as const;
+const metricStyle = {
+  background: "color-mix(in srgb, currentColor 4%, transparent)",
+  border: "1px solid color-mix(in srgb, currentColor 18%, transparent)",
+  borderRadius: 8,
+  padding: 12,
+} as const;
+
+const readDiagnostics = (queryClient: QueryClient) => {
+  const queries = queryClient.getQueryCache().getAll();
+  const mutations = queryClient.getMutationCache().getAll();
+  const board = document.querySelector("[data-homarr-dev-benchmark-board]");
+  const widgetItems = board?.querySelectorAll('[data-type="item"]').length ?? 0;
+  const readyWidgets = board?.querySelectorAll("[data-homarr-widget-ready]").length ?? 0;
+  const resources = performance.getEntriesByType("resource") as PerformanceResourceTiming[];
+
+  return {
+    active: queries.filter((query) => query.getObserversCount() > 0).length,
+    errors: queries.filter((query) => query.state.status === "error").length,
+    fetching: queries.filter((query) => query.state.fetchStatus === "fetching").length,
+    pendingMutations: mutations.filter((mutation) => mutation.state.status === "pending").length,
+    stale: queries.filter((query) => query.isStale()).length,
+    total: queries.length,
+    readyWidgets,
+    widgetItems,
+    scriptKiB: Math.round(
+      resources
+        .filter((resource) => resource.initiatorType === "script")
+        .reduce((total, resource) => total + resource.decodedBodySize, 0) / 1024,
+    ),
+  };
+};
+
+const Metric = ({ label, value }: { label: string; value: number | string }) => (
+  <div style={metricStyle}>
+    <div style={{ fontSize: 12, opacity: 0.7 }}>{label}</div>
+    <output style={{ ...valueStyle, display: "block", fontSize: 22, fontWeight: 600, marginTop: 4 }}>{value}</output>
+  </div>
+);
+
+const HomarrDevtoolsPanel = ({ active }: { active: boolean }) => {
+  const pathname = usePathname();
+  const queryClient = useQueryClient();
+  const [diagnostics, setDiagnostics] = useState(() => readDiagnostics(queryClient));
+
+  useEffect(() => {
+    if (!active) return;
+
+    const update = () => setDiagnostics(readDiagnostics(queryClient));
+    let frame: number | undefined;
+    const scheduleUpdate = () => {
+      if (frame !== undefined) return;
+      frame = window.requestAnimationFrame(() => {
+        frame = undefined;
+        update();
+      });
+    };
+    const unsubscribeQueries = queryClient.getQueryCache().subscribe(scheduleUpdate);
+    const unsubscribeMutations = queryClient.getMutationCache().subscribe(scheduleUpdate);
+    const observer = new MutationObserver(scheduleUpdate);
+    observer.observe(document.body, { childList: true, subtree: true });
+    update();
+
+    return () => {
+      unsubscribeQueries();
+      unsubscribeMutations();
+      observer.disconnect();
+      if (frame !== undefined) window.cancelAnimationFrame(frame);
+    };
+  }, [active, pathname, queryClient]);
+
+  if (!active) return null;
+
+  return (
+    <section data-homarr-devtools-panel style={{ fontFamily: "system-ui, sans-serif", padding: 16 }}>
+      <header style={{ marginBottom: 16 }}>
+        <h2 style={{ margin: 0 }}>Homarr performance</h2>
+        <p style={{ marginBlock: "4px 0", opacity: 0.7 }}>Live state for {pathname}</p>
+      </header>
+      <div style={{ display: "grid", gap: 8, gridTemplateColumns: "repeat(auto-fit, minmax(110px, 1fr))" }}>
+        <Metric label="Queries" value={diagnostics.total} />
+        <Metric label="Active" value={diagnostics.active} />
+        <Metric label="Fetching" value={diagnostics.fetching} />
+        <Metric label="Stale" value={diagnostics.stale} />
+        <Metric label="Errors" value={diagnostics.errors} />
+        <Metric label="Mutations" value={diagnostics.pendingMutations} />
+        <Metric label="Widgets ready" value={`${diagnostics.readyWidgets}/${diagnostics.widgetItems}`} />
+        <Metric label="Script KiB" value={diagnostics.scriptKiB} />
+      </div>
+    </section>
+  );
+};
+
+const developmentToolsPlugins = [
+  {
+    id: "tanstack-query",
+    name: "TanStack Query",
+    render: () => <ReactQueryDevtoolsPanel />,
+  },
+  {
+    id: "homarr-performance",
+    name: "Homarr",
+    defaultOpen: true,
+    render: (_element, { devtoolsOpen }) => <HomarrDevtoolsPanel active={devtoolsOpen} />,
+  },
+] satisfies TanStackDevtoolsReactPlugin[];
+
+export const DevelopmentTools = () => (
+  <TanStackDevtools config={{ position: "bottom-right", hideUntilHover: true }} plugins={developmentToolsPlugins} />
+);
diff --git a/apps/nextjs/src/app/[locale]/_client-providers/query-cache-persister.ts b/apps/nextjs/src/app/[locale]/_client-providers/query-cache-persister.ts
deleted file mode 100644
index 3af24c508..000000000
--- a/apps/nextjs/src/app/[locale]/_client-providers/query-cache-persister.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
-import superjson from "superjson";
-
-import { fetchApi } from "@homarr/api/client";
-import { getActiveQueryCacheBoardId, queryCacheStoragePrefix } from "@homarr/api/query-cache";
-
-const queryCacheStorage = {
-  getItem: (_key: string) => null as string | null,
-  async setItem(_key: string, value: string) {
-    const boardId = getActiveQueryCacheBoardId();
-    if (!boardId) return;
-    await fetchApi.queryCache.setItem.mutate({ boardId, value }).catch((error) => {
-      console.warn("[query-cache] persist failed", error);
-    });
-  },
-  async removeItem(_key: string) {
-    const boardId = getActiveQueryCacheBoardId();
-    if (!boardId) return;
-    await fetchApi.queryCache.removeItem.mutate({ boardId }).catch((error) => {
-      console.warn("[query-cache] remove failed", error);
-    });
-  },
-};
-
-export const createWidgetQueryPersister = () =>
-  createAsyncStoragePersister({
-    storage: typeof window === "undefined" ? undefined : queryCacheStorage,
-    key: queryCacheStoragePrefix,
-    throttleTime: 2000,
-    serialize: (data) => superjson.stringify(data),
-    deserialize: (data) => superjson.parse(data),
-  });
diff --git a/apps/nextjs/src/app/[locale]/_client-providers/query-retry.spec.ts b/apps/nextjs/src/app/[locale]/_client-providers/query-retry.spec.ts
new file mode 100644
index 000000000..77aa7c918
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/_client-providers/query-retry.spec.ts
@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { TRPCClientError } from "@trpc/client";
+
+import { createQueryRetry } from "./query-retry";
+
+const createTrpcError = (code: string) => {
+  const error = Object.assign(new Error(code), { data: { code } });
+  Object.setPrototypeOf(error, TRPCClientError.prototype);
+  return error;
+};
+
+describe("createQueryRetry", () => {
+  it.each(["BAD_REQUEST", "UNAUTHORIZED", "FORBIDDEN", "NOT_FOUND", "UNPROCESSABLE_CONTENT"])(
+    "does not retry the permanent %s response",
+    (code) => {
+      expect(createQueryRetry(3)(0, createTrpcError(code))).toBe(false);
+    },
+  );
+
+  it("retries transient and network failures only up to the configured limit", () => {
+    const retry = createQueryRetry(3);
+
+    expect(retry(0, createTrpcError("INTERNAL_SERVER_ERROR"))).toBe(true);
+    expect(retry(2, new Error("connection reset"))).toBe(true);
+    expect(retry(3, new Error("connection reset"))).toBe(false);
+  });
+});
diff --git a/apps/nextjs/src/app/[locale]/_client-providers/query-retry.ts b/apps/nextjs/src/app/[locale]/_client-providers/query-retry.ts
new file mode 100644
index 000000000..09b5f19c3
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/_client-providers/query-retry.ts
@@ -0,0 +1,20 @@
+import { TRPCClientError } from "@trpc/client";
+
+const nonRetryableTrpcCodes = new Set([
+  "PARSE_ERROR",
+  "BAD_REQUEST",
+  "UNAUTHORIZED",
+  "FORBIDDEN",
+  "NOT_FOUND",
+  "METHOD_NOT_SUPPORTED",
+  "CONFLICT",
+  "PRECONDITION_FAILED",
+  "PAYLOAD_TOO_LARGE",
+  "UNPROCESSABLE_CONTENT",
+]);
+
+export const createQueryRetry = (maxRetries: number) => (failureCount: number, error: unknown) => {
+  if (failureCount >= maxRetries) return false;
+  if (error instanceof TRPCClientError && error.data?.code && nonRetryableTrpcCodes.has(error.data.code)) return false;
+  return true;
+};
diff --git a/apps/nextjs/src/app/[locale]/_client-providers/session-query-scope.spec.ts b/apps/nextjs/src/app/[locale]/_client-providers/session-query-scope.spec.ts
new file mode 100644
index 000000000..f82001a5e
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/_client-providers/session-query-scope.spec.ts
@@ -0,0 +1,52 @@
+// @vitest-environment jsdom
+
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { describe, expect, it, vi } from "vitest";
+
+import { getSessionQueryScope, SessionQueryScopeGuard } from "./session-query-scope";
+
+describe("getSessionQueryScope", () => {
+  it("is stable when permission order changes", () => {
+    expect(getSessionQueryScope({ user: { id: "user-a", permissions: ["board-view", "integration-use"] } })).toBe(
+      getSessionQueryScope({ user: { id: "user-a", permissions: ["integration-use", "board-view"] } }),
+    );
+  });
+
+  it("changes for a different user or permission set", () => {
+    const original = getSessionQueryScope({ user: { id: "user-a", permissions: ["board-view"] } });
+
+    expect(getSessionQueryScope({ user: { id: "user-b", permissions: ["board-view"] } })).not.toBe(original);
+    expect(getSessionQueryScope({ user: { id: "user-a", permissions: [] } })).not.toBe(original);
+    expect(getSessionQueryScope(null)).toBeNull();
+  });
+
+  it("removes the previous session subtree before requesting a document reload", async () => {
+    const host = document.createElement("div");
+    const root = createRoot(host);
+    const onScopeChange = vi.fn();
+    const renderScope = async (currentScope: string) => {
+      await act(async () => {
+        root.render(
+          createElement(
+            SessionQueryScopeGuard,
+            { currentScope, initialScope: "a", onScopeChange },
+            createElement("span", null, "session-a-secret"),
+          ),
+        );
+      });
+    };
+
+    try {
+      await renderScope("a");
+      expect(host.textContent).toBe("session-a-secret");
+
+      await renderScope("b");
+      expect(host.textContent).not.toContain("session-a-secret");
+      expect(host.querySelector('[role="status"]')?.getAttribute("aria-busy")).toBe("true");
+      expect(onScopeChange).toHaveBeenCalledOnce();
+    } finally {
+      await act(async () => root.unmount());
+    }
+  });
+});
diff --git a/apps/nextjs/src/app/[locale]/_client-providers/session-query-scope.ts b/apps/nextjs/src/app/[locale]/_client-providers/session-query-scope.ts
new file mode 100644
index 000000000..d2fa1e732
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/_client-providers/session-query-scope.ts
@@ -0,0 +1,39 @@
+import type { PropsWithChildren } from "react";
+import { createElement, useEffect } from "react";
+
+interface QuerySession {
+  user: {
+    id: string;
+    permissions: string[];
+  };
+}
+
+export const getSessionQueryScope = (session: QuerySession | null | undefined) =>
+  session ? JSON.stringify([session.user.id, session.user.permissions.toSorted()]) : null;
+
+interface SessionQueryScopeGuardProps {
+  initialScope: string | null;
+  currentScope: string | null;
+  onScopeChange: () => void;
+}
+
+export const SessionQueryScopeGuard = ({
+  initialScope,
+  currentScope,
+  onScopeChange,
+  children,
+}: PropsWithChildren<SessionQueryScopeGuardProps>) => {
+  const hasScopeChanged = initialScope !== currentScope;
+  useEffect(() => {
+    if (hasScopeChanged) onScopeChange();
+  }, [hasScopeChanged, onScopeChange]);
+
+  if (!hasScopeChanged) return children;
+
+  return createElement("div", {
+    "aria-busy": true,
+    "aria-label": "Refreshing session",
+    role: "status",
+    style: { minHeight: "100dvh" },
+  });
+};
diff --git a/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx b/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
index 3e167dd8c..535d88e1c 100644
--- a/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
+++ b/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
@@ -1,12 +1,10 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { useState } from "react";
-import type { QueryKey } from "@tanstack/react-query";
-import { QueryClient } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { useEffect, useMemo, useState } from "react";
+import dynamic from "next/dynamic";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental";
-import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import {
   createWSClient,
   httpBatchStreamLink,
@@ -25,18 +23,24 @@ import { TRPCClientError } from "@trpc/client";
 import type { AppRouter } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import {
-  isPersistableWidgetQueryKey,
-  queryCacheBuster,
+  dashboardSupportingQueryPolicies,
   queryCacheDefaultGcTimeMs,
   queryCacheDefaultRefetchIntervalMs,
   queryCacheDefaultStaleTimeMs,
 } from "@homarr/api/query-cache";
 import { createHeadersCallbackForSource, getTrpcUrl } from "@homarr/api/shared";
+import { useSession } from "@homarr/auth/client";
 import { env } from "@homarr/common/env";
 import { showWarningNotification } from "@homarr/notifications";
-import { widgetImports } from "@homarr/widgets";
+import { widgetQueryRefetchIntervals } from "@homarr/widgets/refetch-intervals";
 
-import { createWidgetQueryPersister } from "./query-cache-persister";
+import { getSessionQueryScope, SessionQueryScopeGuard } from "./session-query-scope";
+import { createQueryRetry } from "./query-retry";
+
+const DevelopmentTools =
+  process.env.NODE_ENV === "development"
+    ? dynamic(() => import("./development-tools").then(({ DevelopmentTools: Tools }) => Tools), { ssr: false })
+    : () => null;
 
 const getWebSocketProtocol = () => {
   if (typeof window === "undefined") {
@@ -59,21 +63,46 @@ const constructWebsocketUrl = () => {
   return `${getWebSocketProtocol()}://${window.location.hostname}:${window.location.port}/websockets`;
 };
 
-const wsClient = createWSClient({
-  url: constructWebsocketUrl(),
-});
+export function TRPCReactProvider({ children }: PropsWithChildren) {
+  const { data: session } = useSession();
+  const sessionQueryScope = getSessionQueryScope(session);
+  const [initialSessionQueryScope] = useState(() => sessionQueryScope);
 
-export function TRPCReactProvider(props: PropsWithChildren) {
-  const [persister] = useState(() => createWidgetQueryPersister());
+  return (
+    <SessionQueryScopeGuard
+      initialScope={initialSessionQueryScope}
+      currentScope={sessionQueryScope}
+      onScopeChange={reloadPage}
+    >
+      <ScopedTRPCReactProvider>{children}</ScopedTRPCReactProvider>
+    </SessionQueryScopeGuard>
+  );
+}
+
+const reloadPage = () => window.location.reload();
+
+const ScopedTRPCReactProvider = ({ children }: PropsWithChildren) => {
+  const wsClient = useMemo(
+    () =>
+      createWSClient({
+        url: constructWebsocketUrl(),
+        lazy: { enabled: true, closeMs: 30_000 },
+      }),
+    [],
+  );
+  useEffect(
+    () => () => {
+      void wsClient.close();
+    },
+    [wsClient],
+  );
   const [queryClient] = useState(() => {
     const client = new QueryClient({
       defaultOptions: {
         queries: {
           staleTime: queryCacheDefaultStaleTimeMs,
           gcTime: queryCacheDefaultGcTimeMs,
-          refetchOnWindowFocus: false,
-          refetchOnReconnect: false,
-          retry: 3,
+          retry: createQueryRetry(env.NODE_ENV === "development" ? 1 : 3),
         },
         mutations: {
           onError(error) {
@@ -91,23 +120,29 @@ export function TRPCReactProvider(props: PropsWithChildren) {
         },
       },
     });
-    client.setQueryDefaults([["widget"]], { refetchInterval: queryCacheDefaultRefetchIntervalMs });
-    for (const { definition } of Object.values(widgetImports)) {
-      const def = definition as { refetchInterval?: number | null; queryKey?: QueryKey; kind: string };
-      if (def.refetchInterval === undefined) continue;
-      const key = def.queryKey ?? [["widget", def.kind]];
-      const interval = def.refetchInterval === null ? false : def.refetchInterval * 1000;
-      client.setQueryDefaults(key, { refetchInterval: interval });
+    client.setQueryDefaults([["widget"]], {
+      refetchInterval: queryCacheDefaultRefetchIntervalMs,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    });
+    for (const { queryKey, intervalSeconds } of widgetQueryRefetchIntervals) {
+      client.setQueryDefaults(queryKey, {
+        refetchInterval: intervalSeconds === null ? false : intervalSeconds * 1000,
+      });
+    }
+    for (const { queryKey, ...policy } of dashboardSupportingQueryPolicies) {
+      client.setQueryDefaults(queryKey, policy);
     }
     return client;
   });
 
-  const [trpcClient] = useState(() => {
+  useEffect(() => () => queryClient.clear(), [queryClient]);
+
+  const trpcClient = useMemo(() => {
     return clientApi.createClient({
       links: [
         loggerLink({
-          enabled: (opts) =>
-            env.NODE_ENV === "development" || (opts.direction === "down" && opts.result instanceof Error),
+          enabled: (opts) => opts.direction === "down" && opts.result instanceof Error,
         }),
         splitLink({
           condition: ({ type }) => type === "subscription",
@@ -147,25 +182,14 @@ export function TRPCReactProvider(props: PropsWithChildren) {
         }),
       ],
     });
-  });
+  }, [wsClient]);
 
   return (
     <clientApi.Provider client={trpcClient} queryClient={queryClient}>
-      <PersistQueryClientProvider
-        client={queryClient}
-        persistOptions={{
-          persister,
-          buster: queryCacheBuster,
-          maxAge: queryCacheDefaultGcTimeMs,
-          dehydrateOptions: {
-            shouldDehydrateQuery: (query) =>
-              query.state.status === "success" && isPersistableWidgetQueryKey(query.queryKey),
-          },
-        }}
-      >
-        <ReactQueryStreamedHydration transformer={superjson}>{props.children}</ReactQueryStreamedHydration>
-        <ReactQueryDevtools initialIsOpen={false} />
-      </PersistQueryClientProvider>
+      <QueryClientProvider client={queryClient}>
+        <ReactQueryStreamedHydration transformer={superjson}>{children}</ReactQueryStreamedHydration>
+        {process.env.NODE_ENV === "development" && <DevelopmentTools />}
+      </QueryClientProvider>
     </clientApi.Provider>
   );
-}
+};
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/(home)/_definition.ts b/apps/nextjs/src/app/[locale]/boards/(content)/(home)/_definition.ts
index 2357d7424..d64fdb56e 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/(home)/_definition.ts
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/(home)/_definition.ts
@@ -1,9 +1,9 @@
-import { api } from "@homarr/api/server";
+import { getHomeBoardAsync } from "@homarr/api/board-server";
 
 import { createBoardContentPage } from "../_creator";
 
 export default createBoardContentPage<{ locale: string }>({
   async getInitialBoardAsync() {
-    return await api.board.getHomeBoard();
+    return await getHomeBoardAsync();
   },
 });
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/[name]/(board)/_definition.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/[name]/(board)/_definition.tsx
index d3b65a5e9..f0924bb6e 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/[name]/(board)/_definition.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/[name]/(board)/_definition.tsx
@@ -1,9 +1,9 @@
-import { api } from "@homarr/api/server";
+import { getBoardByNameAsync } from "@homarr/api/board-server";
 
 import { createBoardContentPage } from "../../_creator";
 
 export default createBoardContentPage<{ locale: string; name: string }>({
   async getInitialBoardAsync({ name }) {
-    return await api.board.getBoardByName({ name });
+    return await getBoardByNameAsync(name);
   },
 });
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css b/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css
new file mode 100644
index 000000000..158ad16ae
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css
@@ -0,0 +1,22 @@
+.columns {
+  display: grid;
+  align-items: start;
+  gap: 24px;
+}
+
+.lane {
+  min-width: 0;
+}
+
+.gutter {
+  position: relative;
+  top: 0;
+  align-self: start;
+  padding-top: 24px;
+  margin-top: -24px;
+  max-height: calc(100dvh - var(--app-shell-header-offset, 0px) - var(--mantine-spacing-md));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  transform: translateY(var(--board-gutter-sticky-offset, 0px));
+}
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx
index 0ba502a9a..0b7f07638 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx
@@ -1,33 +1,204 @@
 "use client";
 
-import { Box, Stack } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { Box, Paper, Stack, Text } from "@mantine/core";
 
-import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { useCurrentLayout, useInitialViewportWidth, useLayoutOverride, useRequiredBoard } from "@homarr/boards/context";
+import { useScopedI18n } from "@homarr/translation/client";
 
-import { BoardCategorySection } from "~/components/board/sections/category-section";
+import { getRepresentativeLayoutWidth } from "../_layout-utils";
+import { BoardAdvancedFocusProvider } from "~/components/board/advanced-focus/context";
+import {
+  getBoardLaneColumnCount,
+  getInitialBoardLogicalHeight,
+  getLogicalTrackSize,
+  LOGICAL_GRID_GAP,
+  getRootSectionForLane,
+} from "~/components/board/layout";
+import { ScaledBoardCanvas } from "~/components/board/layout/scaled-board-canvas";
 import { BoardEmptySection } from "~/components/board/sections/empty-section";
+import { BoardGridEditorBoundary } from "~/components/board/sections/grid/board-grid-editor-boundary";
+import { BoardGridPortalHost, BoardGridPortalRenderer } from "~/components/board/sections/grid/grid-portal-host";
+import { BoardSectionCollapseProvider } from "~/components/board/sections/section-collapse";
 import { BoardBackgroundVideo } from "~/components/layout/background";
+import classes from "./_client.module.css";
+
+const APP_SHELL_INLINE_PADDING = 32;
+
+const useFixedBoardGutters = () => {
+  const [columns, setColumns] = useState<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!columns) return;
+
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      const columnsRect = columns.getBoundingClientRect();
+      const headerBottom = document.querySelector("[data-app-shell-header]")?.getBoundingClientRect().bottom ?? 0;
+      const stickyTop = Math.max(0, headerBottom + 16);
+
+      for (const gutter of columns.querySelectorAll<HTMLElement>("[data-board-gutter]")) {
+        const rect = gutter.getBoundingClientRect();
+        if (gutter.offsetWidth <= 0) continue;
+
+        const effectiveScale = rect.width / gutter.offsetWidth;
+        if (!Number.isFinite(effectiveScale) || effectiveScale <= 0) continue;
+
+        const previousOffset = Number(gutter.dataset.stickyOffset ?? 0);
+        const uncorrectedTop = rect.top - previousOffset * effectiveScale;
+        const maximumTop = columnsRect.bottom - rect.height;
+        const targetTop = Math.min(stickyTop, maximumTop);
+        const nextOffset = Math.max(0, targetTop - uncorrectedTop) / effectiveScale;
+
+        gutter.dataset.stickyOffset = String(nextOffset);
+        gutter.style.setProperty("--board-gutter-sticky-offset", `${nextOffset}px`);
+      }
+    };
+    const scheduleUpdate = () => {
+      if (frame !== 0) return;
+      frame = window.requestAnimationFrame(update);
+    };
+
+    const resizeObserver = new ResizeObserver(scheduleUpdate);
+    resizeObserver.observe(columns);
+    document.addEventListener("scroll", scheduleUpdate, { capture: true, passive: true });
+    window.addEventListener("scroll", scheduleUpdate, { passive: true });
+    window.addEventListener("resize", scheduleUpdate, { passive: true });
+    scheduleUpdate();
+
+    return () => {
+      window.cancelAnimationFrame(frame);
+      resizeObserver.disconnect();
+      document.removeEventListener("scroll", scheduleUpdate, { capture: true });
+      window.removeEventListener("scroll", scheduleUpdate);
+      window.removeEventListener("resize", scheduleUpdate);
+    };
+  }, [columns]);
+
+  return setColumns;
+};
 
 export const ClientBoard = () => {
   const board = useRequiredBoard();
+  const t = useScopedI18n("board.landmark");
+  const tPreview = useScopedI18n("board.setting.section.layout.preview");
   const currentLayoutId = useCurrentLayout();
+  const initialViewportWidth = useInitialViewportWidth();
+  const layoutOverrideId = useLayoutOverride();
+  const columnsRef = useFixedBoardGutters();
+  const currentLayout = board.layouts.find((layout) => layout.id === currentLayoutId) ?? board.layouts.at(0);
+  if (!currentLayout) throw new Error("Expected the board to contain a layout");
 
-  const fullWidthSortedSections = board.sections
-    .filter((section) => section.kind === "empty" || section.kind === "category")
-    .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
+  const mainSection = getRootSectionForLane(board, "main");
+  const leftSection = getRootSectionForLane(board, "left");
+  const rightSection = getRootSectionForLane(board, "right");
+  if (!mainSection) throw new Error("Expected the board to contain a main canvas section");
+
+  const leftColumnCount = getBoardLaneColumnCount(currentLayout, "left");
+  const mainColumnCount = getBoardLaneColumnCount(currentLayout, "main");
+  const rightColumnCount = getBoardLaneColumnCount(currentLayout, "right");
+  const laneWidths = [leftColumnCount, mainColumnCount, rightColumnCount]
+    .filter((columnCount) => columnCount > 0)
+    .map(getLogicalTrackSize);
+  const logicalWidth =
+    laneWidths.reduce((total, width) => total + width, 0) + (laneWidths.length - 1) * LOGICAL_GRID_GAP;
+  const initialLogicalHeight = getInitialBoardLogicalHeight(board, currentLayoutId) + LOGICAL_GRID_GAP;
+  const representativeWidth = layoutOverrideId ? getRepresentativeLayoutWidth(currentLayout, board.layouts) : null;
+  const initialAvailableWidth = Math.max(1, (representativeWidth ?? initialViewportWidth) - APP_SHELL_INLINE_PADDING);
+  const gridTemplateColumns = [
+    leftColumnCount > 0 ? `${getLogicalTrackSize(leftColumnCount)}px` : null,
+    `${getLogicalTrackSize(mainColumnCount)}px`,
+    rightColumnCount > 0 ? `${getLogicalTrackSize(rightColumnCount)}px` : null,
+  ]
+    .filter((value) => value !== null)
+    .join(" ");
+
+  const content = (
+    <BoardAdvancedFocusProvider>
+      <Box h="100%" pos="relative" data-homarr-dev-benchmark-board>
+        <BoardBackgroundVideo />
+        <BoardSectionCollapseProvider>
+          <BoardGridPortalHost>
+            <ScaledBoardCanvas
+              logicalWidth={logicalWidth}
+              initialLogicalHeight={initialLogicalHeight}
+              initialAvailableWidth={initialAvailableWidth}
+              label={board.name}
+            >
+              <BoardGridEditorBoundary key={currentLayoutId}>
+                <BoardGridPortalRenderer />
+                <div
+                  ref={columnsRef}
+                  className={classes.columns}
+                  style={{ gridTemplateColumns, paddingTop: LOGICAL_GRID_GAP }}
+                >
+                  {leftColumnCount > 0 && leftSection && (
+                    <aside
+                      className={`${classes.lane} ${classes.gutter}`}
+                      aria-label={t("leftRail")}
+                      data-board-gutter="left"
+                    >
+                      <BoardEmptySection
+                        key={`${currentLayoutId}-${leftSection.id}`}
+                        section={leftSection}
+                        columnCount={leftColumnCount}
+                        requestedRowCount={0}
+                        railPlacement="left"
+                      />
+                    </aside>
+                  )}
+
+                  <section className={classes.lane} aria-label={t("canvas")}>
+                    <BoardEmptySection
+                      key={`${currentLayoutId}-${mainSection.id}`}
+                      section={mainSection}
+                      columnCount={mainColumnCount}
+                      requestedRowCount={0}
+                    />
+                  </section>
+
+                  {rightColumnCount > 0 && rightSection && (
+                    <aside
+                      className={`${classes.lane} ${classes.gutter}`}
+                      aria-label={t("rightRail")}
+                      data-board-gutter="right"
+                    >
+                      <BoardEmptySection
+                        key={`${currentLayoutId}-${rightSection.id}`}
+                        section={rightSection}
+                        columnCount={rightColumnCount}
+                        requestedRowCount={0}
+                        railPlacement="right"
+                      />
+                    </aside>
+                  )}
+                </div>
+              </BoardGridEditorBoundary>
+            </ScaledBoardCanvas>
+          </BoardGridPortalHost>
+        </BoardSectionCollapseProvider>
+      </Box>
+    </BoardAdvancedFocusProvider>
+  );
+
+  if (representativeWidth === null) return content;
 
   return (
-    <Box h="100%" pos="relative">
-      <BoardBackgroundVideo />
-      <Stack h="100%">
-        {fullWidthSortedSections.map((section) =>
-          section.kind === "empty" ? (
-            <BoardEmptySection key={`${currentLayoutId}-${section.id}`} section={section} />
-          ) : (
-            <BoardCategorySection key={`${currentLayoutId}-${section.id}`} section={section} />
-          ),
-        )}
-      </Stack>
-    </Box>
+    <Stack align="center" gap="xs" p="md" mih="100%">
+      <Text size="xs" c="dimmed" fw={500}>
+        {tPreview("editorWidthLabel", { layoutName: currentLayout.name, width: representativeWidth })}
+      </Text>
+      <Paper
+        withBorder
+        shadow="sm"
+        radius="md"
+        w={`min(${representativeWidth}px, calc(100vw - 2rem))`}
+        mih="calc(100dvh - 8rem)"
+        style={{ overflow: "hidden" }}
+      >
+        {content}
+      </Paper>
+    </Stack>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx
index 1205d4115..ddb379fae 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx
@@ -1,16 +1,10 @@
 import type { Metadata } from "next";
-import { Suspense } from "react";
+import { cache } from "react";
 import { notFound, redirect } from "next/navigation";
 import { TRPCError } from "@trpc/server";
 
-// Placed here because gridstack styles are used for board content
-import "~/styles/gridstack.scss";
-
 import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
-import type { PersistedClient } from "@tanstack/react-query-persist-client";
-import superjson from "superjson";
-import { queryCacheBuster } from "@homarr/api/query-cache";
-import { getQueryClient } from "@homarr/api/server";
+import { makeQueryClient } from "@homarr/api/shared";
 import { IntegrationProvider } from "@homarr/auth/client";
 import { auth } from "@homarr/auth/next";
 import { getIntegrationsWithPermissionsAsync } from "@homarr/auth/server";
@@ -18,7 +12,6 @@ import { isNullOrWhitespace } from "@homarr/common";
 import { createLogger } from "@homarr/core/infrastructure/logs";
 import { ErrorWithMetadata } from "@homarr/core/infrastructure/logs/error";
 import type { WidgetKind } from "@homarr/definitions";
-import { getQueryCacheAsync } from "@homarr/redis";
 import { getI18n } from "@homarr/translation/server";
 import { prefetchForKindAsync } from "@homarr/widgets/prefetch";
 
@@ -26,10 +19,11 @@ import { createMetaTitle } from "~/metadata";
 import { env } from "~/env";
 import { createBoardLayout } from "../_layout-creator";
 import type { Board, Item } from "../_types";
-import { DynamicClientBoard } from "./_dynamic-client";
+import { ClientBoard } from "./_client";
 import { BoardContentHeaderActions } from "./_header-actions";
 
 const logger = createLogger({ module: "createBoardContentPage" });
+const getQueryClient = cache(makeQueryClient);
 
 export type Params = Record<string, unknown>;
 
@@ -78,7 +72,6 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
         }
         return acc;
       }, new Map<WidgetKind, Item[]>());
-
       const [integrations] = await Promise.all([
         getIntegrationsWithPermissionsAsync(session),
         ...Array.from(itemsMap).map(([kind, items]) =>
@@ -94,19 +87,12 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
         ),
       ]);
 
-      const userId = session?.user.id ?? "anonymous";
-
       return (
-        <>
-          <Suspense>
-            <QueryCacheHydration userId={userId} boardId={board.id} />
-          </Suspense>
-          <HydrationBoundary state={dehydrate(queryClient)}>
-            <IntegrationProvider integrations={integrations}>
-              <DynamicClientBoard />
-            </IntegrationProvider>
-          </HydrationBoundary>
-        </>
+        <HydrationBoundary state={dehydrate(queryClient)}>
+          <IntegrationProvider integrations={integrations}>
+            <ClientBoard />
+          </IntegrationProvider>
+        </HydrationBoundary>
       );
     },
     generateMetadataAsync: async ({ params }: { params: Promise<TParams> }): Promise<Metadata> => {
@@ -137,19 +123,3 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
     },
   };
 };
-
-async function QueryCacheHydration({ userId, boardId }: { userId: string; boardId: string }) {
-  try {
-    const serialized = await getQueryCacheAsync(userId, boardId);
-    if (!serialized) return null;
-
-    const persisted = superjson.parse<PersistedClient | undefined>(serialized);
-    if (!persisted || persisted.buster !== queryCacheBuster) return null;
-    if (!persisted.clientState?.queries?.length) return null;
-
-    return <HydrationBoundary state={persisted.clientState} />;
-  } catch (error) {
-    logger.warn(new ErrorWithMetadata("Failed to hydrate query cache", { userId, boardId }, { cause: error }));
-    return null;
-  }
-}
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_dynamic-client.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_dynamic-client.tsx
deleted file mode 100644
index 50b0aff66..000000000
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_dynamic-client.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-"use client";
-
-import dynamic from "next/dynamic";
-
-export const DynamicClientBoard = dynamic(() => import("./_client").then((mod) => mod.ClientBoard), {
-  ssr: false,
-});
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_edit-actions.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_edit-actions.tsx
new file mode 100644
index 000000000..ca2990680
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_edit-actions.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { Group, Menu } from "@mantine/core";
+import { IconBox, IconChevronDown, IconLayoutGridAdd, IconPlug, IconPlus, IconResize } from "@tabler/icons-react";
+
+import { useSession } from "@homarr/auth/client";
+import { useRequiredBoard } from "@homarr/boards/context";
+import { useModalAction } from "@homarr/modals";
+import { AppSelectModal } from "@homarr/modals-collection";
+import { useI18n } from "@homarr/translation/client";
+
+import { useItemActions } from "~/components/board/items/item-actions";
+import { ItemSelectModal } from "~/components/board/items/item-select-modal";
+import { useContainerActions } from "~/components/board/sections/container/container-actions";
+import { IntegrationSelectModal } from "~/components/integration/integration-select-modal";
+import { HeaderButton } from "~/components/layout/header/button";
+
+export default function BoardEditActions() {
+  return <AddMenu />;
+}
+
+const AddMenu = () => {
+  const { data: session } = useSession();
+  const board = useRequiredBoard();
+  const { openModal: openItemSelectModal } = useModalAction(ItemSelectModal);
+  const { openModal: openAppSelectModal } = useModalAction(AppSelectModal);
+  const { openModal: openIntegrationSelectModal } = useModalAction(IntegrationSelectModal);
+  const { addContainer } = useContainerActions();
+  const { createItem } = useItemActions();
+  const t = useI18n();
+
+  const handleSelectItem = () => {
+    openItemSelectModal({ boardId: board.id });
+  };
+
+  const handleSelectApp = () => {
+    openAppSelectModal({
+      onSelect: (app) => {
+        createItem({
+          kind: "app",
+          options: { appId: app.id },
+        });
+      },
+      withCreate: session?.user.permissions.includes("app-create") ?? false,
+    });
+  };
+
+  const handleAddIntegration = () => {
+    openIntegrationSelectModal({});
+  };
+
+  return (
+    <Menu position="bottom-end">
+      <Menu.Target>
+        <HeaderButton w="auto" px={4} aria-label={t("board.action.addContent")}>
+          <Group gap={4} wrap="nowrap">
+            <IconPlus stroke={1.5} />
+            <IconChevronDown color="gray" size={16} />
+          </Group>
+        </HeaderButton>
+      </Menu.Target>
+      <Menu.Dropdown style={{ transform: "translate(-3px, 0)" }}>
+        <Menu.Item leftSection={<IconResize size={20} />} onClick={handleSelectItem}>
+          {t("item.action.create")}
+        </Menu.Item>
+        <Menu.Item leftSection={<IconBox size={20} />} onClick={handleSelectApp}>
+          {t("app.action.add")}
+        </Menu.Item>
+        <Menu.Item leftSection={<IconPlug size={20} />} onClick={handleAddIntegration}>
+          {t("integration.action.create")}
+        </Menu.Item>
+        <Menu.Divider />
+        <Menu.Item leftSection={<IconLayoutGridAdd size={20} />} onClick={addContainer}>
+          {t("section.container.action.create")}
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+};
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx
index 30c91de40..cf50c0c69 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx
@@ -1,49 +1,58 @@
 "use client";
 
-import { useCallback, useEffect } from "react";
-import { useRouter } from "next/navigation";
-import { OnboardingTour } from "@gfazioli/mantine-onboarding-tour";
-import { Box, Group, Menu, ScrollArea } from "@mantine/core";
+import { startTransition, useCallback, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Box, Center, Loader, Menu, ScrollArea } from "@mantine/core";
 import { useHotkeys } from "@mantine/hooks";
 import {
-  IconBox,
-  IconBoxAlignTop,
-  IconChevronDown,
+  IconDeviceFloppy,
   IconLayoutBoard,
   IconPencil,
   IconPencilOff,
-  IconPlug,
-  IconPlus,
   IconReplace,
-  IconResize,
   IconSettings,
+  IconX,
 } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import { useSession } from "@homarr/auth/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { env } from "@homarr/common/env";
 import { hotkeys } from "@homarr/definitions";
-import { useConfirmModal, useModalAction } from "@homarr/modals";
-import { AppSelectModal } from "@homarr/modals-collection";
+import { useConfirmModal } from "@homarr/modals";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import { Link } from "@homarr/ui";
 
-import { useItemActions } from "~/components/board/items/item-actions";
-import { ItemSelectModal } from "~/components/board/items/item-select-modal";
 import { useBoardPermissions } from "~/components/board/permissions/client";
-import { useCategoryActions } from "~/components/board/sections/category/category-actions";
-import { CategoryEditModal } from "~/components/board/sections/category/category-edit-modal";
-import { useDynamicSectionActions } from "~/components/board/sections/dynamic/dynamic-actions";
-import { IntegrationSelectModal } from "~/components/integration/integration-select-modal";
+import { loadGridEditorAsync, scheduleGridEditorWarmup } from "~/components/board/sections/grid/grid-editor-loader";
 import { HeaderButton } from "~/components/layout/header/button";
+import { TourTarget } from "~/components/layout/header/tour-target";
+import type * as EditActionsModule from "./_edit-actions";
+
+let editActionsModulePromise: Promise<typeof EditActionsModule> | undefined;
+const loadEditActionsAsync = () => {
+  editActionsModulePromise ??= import("./_edit-actions").catch((error: unknown) => {
+    editActionsModulePromise = undefined;
+    throw error;
+  });
+  return editActionsModulePromise;
+};
+const loadBoardEditorAsync = async () =>
+  await Promise.all([
+    loadGridEditorAsync(),
+    loadEditActionsAsync(),
+    import("~/components/board/items/item-menu"),
+    import("~/components/board/sections/container/container-menu"),
+  ]);
+const BoardEditActions = dynamic(loadEditActionsAsync, { ssr: false });
 
 export const BoardContentHeaderActions = ({ demoReadOnly }: { demoReadOnly: boolean }) => {
   const [isEditMode] = useEditMode();
   const board = useRequiredBoard();
+  const t = useI18n();
   const { hasChangeAccess } = useBoardPermissions(board);
 
   if (!hasChangeAccess) {
@@ -52,16 +61,16 @@ export const BoardContentHeaderActions = ({ demoReadOnly }: { demoReadOnly: bool
 
   return (
     <>
-      {isEditMode && <AddMenu />}
+      {isEditMode && <BoardEditActions />}
 
       <EditModeMenu demoReadOnly={demoReadOnly} />
 
       {!demoReadOnly && (
-        <OnboardingTour.Target id="board-settings">
-          <HeaderButton href={`/boards/${board.name}/settings`}>
+        <TourTarget id="board-settings">
+          <HeaderButton href={`/boards/${board.name}/settings`} aria-label={t("board.action.settings")}>
             <IconSettings stroke={1.5} />
           </HeaderButton>
-        </OnboardingTour.Target>
+        </TourTarget>
       )}
 
       <SelectBoardsMenu />
@@ -69,99 +78,25 @@ export const BoardContentHeaderActions = ({ demoReadOnly }: { demoReadOnly: bool
   );
 };
 
-const AddMenu = () => {
-  const { data: session } = useSession();
-  const { openModal: openCategoryEditModal } = useModalAction(CategoryEditModal);
-  const { openModal: openItemSelectModal } = useModalAction(ItemSelectModal);
-  const { openModal: openAppSelectModal } = useModalAction(AppSelectModal);
-  const { openModal: openIntegrationSelectModal } = useModalAction(IntegrationSelectModal);
-  const { addCategoryToEnd } = useCategoryActions();
-  const { addDynamicSection } = useDynamicSectionActions();
-  const { createItem } = useItemActions();
-  const t = useI18n();
-
-  const handleAddCategory = useCallback(
-    () =>
-      openCategoryEditModal(
-        {
-          category: {
-            id: "new",
-            name: "",
-          },
-          onSuccess({ name }) {
-            addCategoryToEnd({ name });
-          },
-          submitLabel: t("section.category.create.submit"),
-        },
-        {
-          title: (t) => t("section.category.create.title"),
-        },
-      ),
-    [addCategoryToEnd, openCategoryEditModal, t],
-  );
-
-  const handleSelectItem = useCallback(() => {
-    openItemSelectModal();
-  }, [openItemSelectModal]);
-
-  const handleSelectApp = useCallback(() => {
-    openAppSelectModal({
-      onSelect: (app) => {
-        createItem({
-          kind: "app",
-          options: { appId: app.id },
-        });
-      },
-      withCreate: session?.user.permissions.includes("app-create") ?? false,
-    });
-  }, [openAppSelectModal, createItem]);
-
-  const handleAddIntegration = useCallback(() => {
-    openIntegrationSelectModal({});
-  }, [openIntegrationSelectModal]);
-
-  return (
-    <Menu position="bottom-end">
-      <Menu.Target>
-        <HeaderButton w="auto" px={4}>
-          <Group gap={4} wrap="nowrap">
-            <IconPlus stroke={1.5} />
-            <IconChevronDown color="gray" size={16} />
-          </Group>
-        </HeaderButton>
-      </Menu.Target>
-      <Menu.Dropdown style={{ transform: "translate(-3px, 0)" }}>
-        <Menu.Item leftSection={<IconResize size={20} />} onClick={handleSelectItem}>
-          {t("item.action.create")}
-        </Menu.Item>
-
-        <Menu.Item leftSection={<IconBox size={20} />} onClick={handleSelectApp}>
-          {t("app.action.add")}
-        </Menu.Item>
-
-        <Menu.Item leftSection={<IconPlug size={20} />} onClick={handleAddIntegration}>
-          {t("integration.action.create")}
-        </Menu.Item>
-
-        <Menu.Divider />
-
-        <Menu.Item leftSection={<IconBoxAlignTop size={20} />} onClick={handleAddCategory}>
-          {t("section.category.action.create")}
-        </Menu.Item>
-
-        <Menu.Item leftSection={<IconResize size={20} />} onClick={addDynamicSection}>
-          {t("section.dynamic.action.create")}
-        </Menu.Item>
-      </Menu.Dropdown>
-    </Menu>
-  );
-};
-
 const EditModeMenu = ({ demoReadOnly }: { demoReadOnly: boolean }) => {
   const [isEditMode, { open, close }] = useEditMode();
+  const [editorLoadState, setEditorLoadState] = useState<"scheduled" | "loading" | "ready" | "error">("scheduled");
+  const [isEnteringEditMode, setIsEnteringEditMode] = useState(false);
   const board = useRequiredBoard();
   const utils = clientApi.useUtils();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { openConfirmModal } = useConfirmModal();
+  const commonT = useI18n();
   const t = useScopedI18n("board.action.edit");
+  const returnToLayoutSettings =
+    isEditMode &&
+    searchParams.get("edit") === "true" &&
+    searchParams.get("layout") !== null &&
+    searchParams.get("returnTo") === "settings";
+  const latestBoardRef = useRef(board);
+
+  latestBoardRef.current = board;
   const { mutate: saveBoard, isPending } = clientApi.board.saveBoard.useMutation({
     onSuccess() {
       showSuccessNotification({
@@ -169,8 +104,10 @@ const EditModeMenu = ({ demoReadOnly }: { demoReadOnly: boolean }) => {
         message: t("notification.success.message"),
       });
       void utils.board.getBoardByName.invalidate({ name: board.name });
+      void utils.widget.customApi.getData.invalidate();
       void revalidatePathActionAsync(`/boards/${board.name}`);
       close();
+      if (returnToLayoutSettings) router.push(`/boards/${board.name}/settings?tab=layout`);
     },
     onError() {
       showErrorNotification({
@@ -185,40 +122,137 @@ const EditModeMenu = ({ demoReadOnly }: { demoReadOnly: boolean }) => {
     close();
   }, [utils, board.name, close]);
 
-  const toggle = useCallback(() => {
+  const prepareEditorAsync = useCallback(async () => {
+    if (editorLoadState === "ready") return;
+
+    setEditorLoadState("loading");
+    try {
+      await loadBoardEditorAsync();
+      setEditorLoadState("ready");
+    } catch {
+      setEditorLoadState("error");
+      throw new Error("Unable to load the board editor");
+    }
+  }, [editorLoadState]);
+
+  useEffect(() => {
+    return scheduleGridEditorWarmup(async () => {
+      setEditorLoadState("loading");
+      try {
+        await loadBoardEditorAsync();
+        setEditorLoadState("ready");
+      } catch {
+        setEditorLoadState("error");
+      }
+    });
+  }, []);
+
+  const prewarmEditor = useCallback(() => {
+    void prepareEditorAsync().catch(() => {
+      // A click or hotkey retries and reports the error.
+    });
+  }, [prepareEditorAsync]);
+
+  const toggle = useCallback(async () => {
     if (isEditMode) {
       if (demoReadOnly) return discardDemoChanges();
-      return saveBoard(board);
+      return saveBoard(latestBoardRef.current);
     }
-    open();
-  }, [board, isEditMode, demoReadOnly, saveBoard, open, discardDemoChanges]);
+    setIsEnteringEditMode(true);
+    try {
+      await prepareEditorAsync();
+      startTransition(open);
+    } catch {
+      showErrorNotification({
+        title: t("notification.loadError.title"),
+        message: t("notification.loadError.message"),
+      });
+    } finally {
+      setIsEnteringEditMode(false);
+    }
+  }, [demoReadOnly, discardDemoChanges, isEditMode, open, prepareEditorAsync, saveBoard, t]);
 
-  useHotkeys([[hotkeys.toggleBoardEdit, toggle]]);
+  const cancelLayoutEdit = useCallback(() => {
+    openConfirmModal({
+      title: commonT("board.setting.section.layout.edit.cancel.title"),
+      children: commonT("board.setting.section.layout.edit.cancel.message"),
+      confirmProps: { children: commonT("common.action.discard"), color: "red" },
+      onConfirm() {
+        void (async () => {
+          await utils.board.getBoardByName.invalidate({ name: board.name });
+          close();
+          router.push(`/boards/${board.name}/settings?tab=layout`);
+        })();
+      },
+    });
+  }, [board.name, close, commonT, openConfirmModal, router, utils.board.getBoardByName]);
+
+  useHotkeys([[hotkeys.toggleBoardEdit, () => void toggle()]]);
   usePreventLeaveWithDirty(isEditMode);
 
+  if (returnToLayoutSettings) {
+    return (
+      <>
+        <HeaderButton
+          onClick={() => saveBoard(board)}
+          loading={isPending}
+          aria-label={commonT("board.setting.section.layout.edit.save")}
+        >
+          <IconDeviceFloppy stroke={1.5} />
+        </HeaderButton>
+        <HeaderButton
+          onClick={cancelLayoutEdit}
+          disabled={isPending}
+          aria-label={commonT("board.setting.section.layout.edit.cancel.action")}
+        >
+          <IconX stroke={1.5} />
+        </HeaderButton>
+      </>
+    );
+  }
+
   return (
-    <OnboardingTour.Target id="board-edit-mode">
-      <HeaderButton onClick={toggle} loading={isPending}>
+    <TourTarget id="board-edit-mode">
+      <HeaderButton
+        onClick={() => void toggle()}
+        onFocus={prewarmEditor}
+        onPointerEnter={prewarmEditor}
+        loading={isPending || isEnteringEditMode}
+        data-testid="board-edit-mode-toggle"
+        data-board-editor-preload-state={editorLoadState}
+        aria-busy={isPending || isEnteringEditMode}
+        aria-label={isEditMode ? (demoReadOnly ? t("exit") : t("save")) : t("enter")}
+        aria-pressed={isEditMode}
+      >
         {isEditMode ? <IconPencilOff stroke={1.5} /> : <IconPencil stroke={1.5} />}
       </HeaderButton>
-    </OnboardingTour.Target>
+    </TourTarget>
   );
 };
 
 const SelectBoardsMenu = () => {
-  const { data: boards = [] } = clientApi.board.getAllBoards.useQuery();
+  const t = useI18n();
+  const [isOpen, setIsOpen] = useState(false);
+  const utils = clientApi.useUtils();
+  const { data: boards = [], isPending } = clientApi.board.getAllBoards.useQuery(undefined, { enabled: isOpen });
+  const preloadBoards = () => void utils.board.getAllBoards.prefetch();
 
   return (
-    <OnboardingTour.Target id="board-switcher">
-      <Box>
-        <Menu position="bottom-end">
+    <TourTarget id="board-switcher">
+      <Box onFocus={preloadBoards} onPointerEnter={preloadBoards}>
+        <Menu position="bottom-end" opened={isOpen} onChange={setIsOpen}>
           <Menu.Target>
-            <HeaderButton w="auto" px={4}>
+            <HeaderButton w="auto" px={4} aria-label={t("board.action.switch")}>
               <IconReplace stroke={1.5} />
             </HeaderButton>
           </Menu.Target>
           <Menu.Dropdown style={{ transform: "translate(-7px, 0)" }}>
             <ScrollArea.Autosize mah={300}>
+              {isPending && (
+                <Center p="xs">
+                  <Loader size="xs" />
+                </Center>
+              )}
               {boards.map((board) => (
                 <Menu.Item
                   key={board.id}
@@ -233,7 +267,7 @@ const SelectBoardsMenu = () => {
           </Menu.Dropdown>
         </Menu>
       </Box>
-    </OnboardingTour.Target>
+    </TourTarget>
   );
 };
 
@@ -246,15 +280,13 @@ const usePreventLeaveWithDirty = (isDirty: boolean) => {
   useEffect(() => {
     if (!isDirty) return;
 
-    const handleClick = (event: Event) => {
-      const target = (event.target as HTMLElement).closest("a");
-
-      if (!target) {
-        console.warn("No anchor element found for click event", event);
-        return;
-      }
+    const handleClick = (event: MouseEvent) => {
+      if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      const target = event.target instanceof Element ? event.target.closest<HTMLAnchorElement>(anchorSelector) : null;
+      if (!target) return;
 
       event.preventDefault();
+      event.stopPropagation();
 
       openConfirmModal({
         title: t("board.action.edit.confirmLeave.title"),
@@ -280,19 +312,14 @@ const usePreventLeaveWithDirty = (isDirty: boolean) => {
       event.returnValue = true;
     };
 
-    const anchors = document.querySelectorAll(anchorSelector);
-    anchors.forEach((link) => {
-      link.addEventListener("click", handleClick);
-    });
+    document.addEventListener("click", handleClick, true);
     window.addEventListener("popstate", handlePopState);
     window.addEventListener("beforeunload", handleBeforeUnload);
 
     return () => {
-      anchors.forEach((link) => {
-        link.removeEventListener("click", handleClick);
-      });
+      document.removeEventListener("click", handleClick, true);
       window.removeEventListener("popstate", handlePopState);
       window.removeEventListener("beforeunload", handleBeforeUnload);
     };
-  }, [isDirty]);
+  }, [isDirty, openConfirmModal, router, t]);
 };
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_integration-provider.spec.ts b/apps/nextjs/src/app/[locale]/boards/(content)/_integration-provider.spec.ts
new file mode 100644
index 000000000..77f18ac44
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_integration-provider.spec.ts
@@ -0,0 +1,54 @@
+import { createElement, act } from "react";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { BoardIntegrationProvider } from "./_integration-provider";
+
+const mocks = vi.hoisted(() => ({
+  providedIntegrations: undefined as unknown,
+}));
+
+vi.mock("@homarr/auth/client", async () => {
+  const React = await import("react");
+
+  return {
+    IntegrationProvider: ({ children, integrations }: { children: React.ReactNode; integrations: unknown }) => {
+      mocks.providedIntegrations = integrations;
+      return React.createElement(React.Fragment, null, children);
+    },
+  };
+});
+
+describe("board integration provider", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.append(container);
+    root = createRoot(container);
+    mocks.providedIntegrations = undefined;
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  test("provides the permission-filtered server result without a second client query", () => {
+    const initialIntegrations = [{ id: "initial" }];
+
+    act(() => {
+      root.render(
+        createElement(
+          BoardIntegrationProvider,
+          { initialIntegrations: initialIntegrations as never },
+          createElement("span", null, "board"),
+        ),
+      );
+    });
+
+    expect(mocks.providedIntegrations).toBe(initialIntegrations);
+  });
+});
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_integration-provider.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_integration-provider.tsx
new file mode 100644
index 000000000..554bc0c2e
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_integration-provider.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { IntegrationProvider } from "@homarr/auth/client";
+
+interface Props {
+  initialIntegrations: RouterOutputs["integration"]["all"];
+}
+
+export const BoardIntegrationProvider = ({ initialIntegrations, children }: PropsWithChildren<Props>) => {
+  return <IntegrationProvider integrations={initialIntegrations}>{children}</IntegrationProvider>;
+};
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/layout.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/layout.tsx
index 1f129e4c1..0c5fd10e0 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/layout.tsx
@@ -1,4 +1,4 @@
-import { api } from "@homarr/api/server";
+import { getBoardByNameAsync } from "@homarr/api/board-server";
 
 import { BoardOtherHeaderActions } from "../_header-actions";
 import { createBoardLayout } from "../_layout-creator";
@@ -6,6 +6,6 @@ import { createBoardLayout } from "../_layout-creator";
 export default createBoardLayout<{ locale: string; name: string }>({
   headerActions: <BoardOtherHeaderActions />,
   async getInitialBoardAsync({ name }) {
-    return await api.board.getBoardByName({ name });
+    return await getBoardByNameAsync(name);
   },
 });
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx
index 4af4af15f..b03168912 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx
@@ -19,130 +19,106 @@ import {
 import { useDisclosure } from "@mantine/hooks";
 import { IconX } from "@tabler/icons-react";
 
-import { useZodForm } from "@homarr/form";
+import type { UseFormReturnType } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
-import { boardSavePartialSettingsSchema } from "@homarr/validation/board";
 
-import type { Board } from "../../_types";
+import { SectionCard } from "~/components/manage/section-card";
 import { generateColors } from "../../(content)/_theme";
-import { useSavePartialSettingsMutation } from "./_shared";
+import type { FormValues } from "./_settings-form";
 
 interface Props {
-  board: Board;
+  form: UseFormReturnType<FormValues>;
 }
 
 const hexRegex = /^#[0-9a-fA-F]{6}$/;
 
 const progressPercentageLabel = (value: number) => `${value}%`;
 
-export const ColorSettingsContent = ({ board }: Props) => {
-  const form = useZodForm(boardSavePartialSettingsSchema, {
-    initialValues: {
-      primaryColor: board.primaryColor,
-      secondaryColor: board.secondaryColor,
-      opacity: board.opacity,
-      iconColor: board.iconColor ?? "",
-      itemRadius: board.itemRadius,
-    },
-  });
+export const ColorSettingsContent = ({ form }: Props) => {
   const [showPreview, { toggle }] = useDisclosure(false);
   const t = useI18n();
   const theme = useMantineTheme();
-  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
 
   return (
-    <form
-      onSubmit={form.onSubmit((values) => {
-        savePartialSettings({
-          id: board.id,
-          ...values,
-        });
-      })}
-    >
-      <Stack>
-        <Grid>
-          <Grid.Col span={{ sm: 12, md: 6 }}>
-            <Stack gap="xs">
-              <ColorInput
-                label={t("board.field.primaryColor.label")}
-                format="hex"
-                swatches={Object.values(theme.colors).map((color) => color[6])}
-                {...form.getInputProps("primaryColor")}
-              />
-            </Stack>
-          </Grid.Col>
-          <Grid.Col span={{ sm: 12, md: 6 }}>
+    <SectionCard title={t("board.setting.section.appearance.title")}>
+      <Grid>
+        <Grid.Col span={{ sm: 12, md: 6 }}>
+          <Stack gap="xs">
             <ColorInput
-              label={t("board.field.secondaryColor.label")}
+              label={t("board.field.primaryColor.label")}
               format="hex"
               swatches={Object.values(theme.colors).map((color) => color[6])}
-              {...form.getInputProps("secondaryColor")}
+              {...form.getInputProps("primaryColor")}
             />
-          </Grid.Col>
-          <Grid.Col span={12}>
-            <Anchor onClick={toggle}>{showPreview ? t("common.preview.hide") : t("common.preview.show")}</Anchor>
-          </Grid.Col>
-          <Grid.Col span={12}>
-            <Collapse expanded={showPreview}>
-              <Stack>
-                <ColorsPreview previewColor={form.values.primaryColor} />
-                <ColorsPreview previewColor={form.values.secondaryColor} />
-              </Stack>
-            </Collapse>
-          </Grid.Col>
-          <Grid.Col span={{ sm: 12, md: 6 }}>
-            <InputWrapper label={t("board.field.opacity.label")}>
-              <Slider
-                my={6}
-                min={0}
-                max={100}
-                step={5}
-                label={progressPercentageLabel}
-                {...form.getInputProps("opacity")}
-              />
-            </InputWrapper>
-          </Grid.Col>
-          <Grid.Col span={{ sm: 12, md: 6 }}>
-            <Group align="end">
-              <ColorInput
-                label={t("board.field.iconColor.label")}
-                format="hex"
-                swatches={Object.values(theme.colors).map((color) => color[6])}
-                flex={1}
-                {...form.getInputProps("iconColor")}
-              />
-              <Button
-                variant="subtle"
-                leftSection={<IconX />}
-                onClick={() => form.setFieldValue("iconColor", "")}
-                disabled={!form.values.iconColor}
-              >
-                {t("board.field.clearColor.label")}
-              </Button>
-            </Group>
-          </Grid.Col>
-          <Grid.Col span={{ sm: 12, md: 6 }}>
-            <Select
-              label={t("board.field.itemRadius.label")}
-              description={t("board.field.itemRadius.description")}
-              data={[
-                { label: t("board.field.itemRadius.option.xs"), value: "xs" },
-                { label: t("board.field.itemRadius.option.sm"), value: "sm" },
-                { label: t("board.field.itemRadius.option.md"), value: "md" },
-                { label: t("board.field.itemRadius.option.lg"), value: "lg" },
-                { label: t("board.field.itemRadius.option.xl"), value: "xl" },
-              ]}
-              {...form.getInputProps("itemRadius")}
+          </Stack>
+        </Grid.Col>
+        <Grid.Col span={{ sm: 12, md: 6 }}>
+          <ColorInput
+            label={t("board.field.secondaryColor.label")}
+            format="hex"
+            swatches={Object.values(theme.colors).map((color) => color[6])}
+            {...form.getInputProps("secondaryColor")}
+          />
+        </Grid.Col>
+        <Grid.Col span={12}>
+          <Anchor onClick={toggle}>{showPreview ? t("common.preview.hide") : t("common.preview.show")}</Anchor>
+        </Grid.Col>
+        <Grid.Col span={12}>
+          <Collapse expanded={showPreview}>
+            <Stack>
+              <ColorsPreview previewColor={form.values.primaryColor} />
+              <ColorsPreview previewColor={form.values.secondaryColor} />
+            </Stack>
+          </Collapse>
+        </Grid.Col>
+        <Grid.Col span={{ sm: 12, md: 6 }}>
+          <InputWrapper label={t("board.field.opacity.label")}>
+            <Slider
+              my={6}
+              min={0}
+              max={100}
+              step={5}
+              label={progressPercentageLabel}
+              {...form.getInputProps("opacity")}
             />
-          </Grid.Col>
-        </Grid>
-        <Group justify="end">
-          <Button type="submit" loading={isPending}>
-            {t("common.action.saveChanges")}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
+          </InputWrapper>
+        </Grid.Col>
+        <Grid.Col span={{ sm: 12, md: 6 }}>
+          <Group align="end">
+            <ColorInput
+              label={t("board.field.iconColor.label")}
+              format="hex"
+              swatches={Object.values(theme.colors).map((color) => color[6])}
+              flex={1}
+              {...form.getInputProps("iconColor")}
+            />
+            <Button
+              type="button"
+              variant="subtle"
+              leftSection={<IconX />}
+              onClick={() => form.setFieldValue("iconColor", "")}
+              disabled={!form.values.iconColor}
+            >
+              {t("board.field.clearColor.label")}
+            </Button>
+          </Group>
+        </Grid.Col>
+        <Grid.Col span={{ sm: 12, md: 6 }}>
+          <Select
+            label={t("board.field.itemRadius.label")}
+            description={t("board.field.itemRadius.description")}
+            data={[
+              { label: t("board.field.itemRadius.option.xs"), value: "xs" },
+              { label: t("board.field.itemRadius.option.sm"), value: "sm" },
+              { label: t("board.field.itemRadius.option.md"), value: "md" },
+              { label: t("board.field.itemRadius.option.lg"), value: "lg" },
+              { label: t("board.field.itemRadius.option.xl"), value: "xl" },
+            ]}
+            {...form.getInputProps("itemRadius")}
+          />
+        </Grid.Col>
+      </Grid>
+    </SectionCard>
   );
 };
 
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_background.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_background.tsx
index 7b105fe9c..8a796560f 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_background.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_background.tsx
@@ -1,41 +1,32 @@
 "use client";
 
 import { startTransition } from "react";
-import { ActionIcon, Autocomplete, Button, Center, Grid, Group, Popover, Stack, Text } from "@mantine/core";
+import { ActionIcon, Autocomplete, Center, Grid, Group, Popover, Stack, Text } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
 import { IconPhotoOff, IconUpload } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
 import { backgroundImageAttachments, backgroundImageRepeats, backgroundImageSizes } from "@homarr/definitions";
-import { useZodForm } from "@homarr/form";
+import type { UseFormReturnType } from "@homarr/form";
 import { UploadMedia } from "@homarr/forms-collection";
 import type { TranslationObject } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
 import type { SelectItemWithDescriptionBadge } from "@homarr/ui";
 import { SelectWithDescriptionBadge } from "@homarr/ui";
-import { boardSavePartialSettingsSchema } from "@homarr/validation/board";
 
-import type { Board } from "../../_types";
-import { useSavePartialSettingsMutation } from "./_shared";
+import { SectionCard } from "~/components/manage/section-card";
+import type { FormValues } from "./_settings-form";
 
 interface Props {
-  board: Board;
+  form: UseFormReturnType<FormValues>;
 }
-export const BackgroundSettingsContent = ({ board }: Props) => {
+
+export const BackgroundSettingsContent = ({ form }: Props) => {
   const t = useI18n();
   const { data: session } = useSession();
-  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
-  const form = useZodForm(boardSavePartialSettingsSchema, {
-    initialValues: {
-      backgroundImageUrl: board.backgroundImageUrl ?? "",
-      backgroundImageAttachment: board.backgroundImageAttachment,
-      backgroundImageRepeat: board.backgroundImageRepeat,
-      backgroundImageSize: board.backgroundImageSize,
-    },
-  });
 
-  const [debouncedSearch] = useDebouncedValue(form.values.backgroundImageUrl, 200);
+  const [debouncedSearch] = useDebouncedValue(form.values.backgroundImageUrl ?? "", 200);
   const medias = clientApi.media.getPaginated.useQuery({
     page: 1,
     pageSize: 10,
@@ -53,121 +44,106 @@ export const BackgroundSettingsContent = ({ board }: Props) => {
   const backgroundImageRepeatData = useBackgroundOptionData("backgroundImageRepeat", backgroundImageRepeats);
 
   return (
-    <form
-      onSubmit={form.onSubmit((values) => {
-        savePartialSettings({
-          id: board.id,
-          ...values,
-        });
-      })}
-    >
-      <Stack>
-        <Grid>
-          <Grid.Col span={12}>
-            <Group wrap="nowrap" gap="xs" w="100%" align="start">
-              <Autocomplete
-                flex={1}
-                leftSection={
-                  form.values.backgroundImageUrl &&
-                  form.values.backgroundImageUrl.trim().length >= 2 && (
-                    <Popover width={300} withArrow>
-                      <Popover.Target>
-                        <Center h="100%">
-                          <ImagePreview src={form.values.backgroundImageUrl} w={20} h={20} />
-                        </Center>
-                      </Popover.Target>
-                      <Popover.Dropdown>
-                        <ImagePreview src={form.values.backgroundImageUrl} w="100%" />
-                      </Popover.Dropdown>
-                    </Popover>
-                  )
-                }
-                // We filter it on the server
-                filter={({ options }) => options}
-                label={t("board.field.backgroundImageUrl.label")}
-                placeholder={`${t("board.field.backgroundImageUrl.placeholder")}...`}
-                renderOption={({ option }) => {
-                  const current = imageMap.get(option.value);
-                  if (!current) return null;
+    <SectionCard title={t("board.setting.section.background.title")}>
+      <Grid>
+        <Grid.Col span={12}>
+          <Group wrap="nowrap" gap="xs" w="100%" align="start">
+            <Autocomplete
+              flex={1}
+              leftSection={
+                form.values.backgroundImageUrl &&
+                form.values.backgroundImageUrl.trim().length >= 2 && (
+                  <Popover width={300} withArrow>
+                    <Popover.Target>
+                      <Center h="100%">
+                        <ImagePreview src={form.values.backgroundImageUrl} w={20} h={20} />
+                      </Center>
+                    </Popover.Target>
+                    <Popover.Dropdown>
+                      <ImagePreview src={form.values.backgroundImageUrl} w="100%" />
+                    </Popover.Dropdown>
+                  </Popover>
+                )
+              }
+              // We filter it on the server
+              filter={({ options }) => options}
+              label={t("board.field.backgroundImageUrl.label")}
+              placeholder={`${t("board.field.backgroundImageUrl.placeholder")}...`}
+              renderOption={({ option }) => {
+                const current = imageMap.get(option.value);
+                if (!current) return null;
 
-                  return (
-                    <Group gap="sm">
-                      <ImagePreview src={option.value} w={20} h={20} />
-                      <Stack gap={0}>
-                        <Text size="sm">{current.name}</Text>
-                        <Text size="xs" c="dimmed">
-                          {option.value}
-                        </Text>
-                      </Stack>
-                    </Group>
-                  );
+                return (
+                  <Group gap="sm">
+                    <ImagePreview src={option.value} w={20} h={20} />
+                    <Stack gap={0}>
+                      <Text size="sm">{current.name}</Text>
+                      <Text size="xs" c="dimmed">
+                        {option.value}
+                      </Text>
+                    </Stack>
+                  </Group>
+                );
+              }}
+              data={[
+                {
+                  group: t("board.field.backgroundImageUrl.group.your"),
+                  items: images
+                    .filter((media) => media.creatorId === session?.user.id)
+                    .map((media) => `/api/user-medias/${media.id}`),
+                },
+                {
+                  group: t("board.field.backgroundImageUrl.group.other"),
+                  items: images
+                    .filter((media) => media.creatorId !== session?.user.id)
+                    .map((media) => `/api/user-medias/${media.id}`),
+                },
+              ]}
+              {...form.getInputProps("backgroundImageUrl")}
+            />
+            {session?.user.permissions.includes("media-upload") && (
+              <UploadMedia
+                onSuccess={(uploadedMedias) => {
+                  const first = uploadedMedias.at(0);
+                  if (!first) return;
+
+                  startTransition(() => {
+                    form.setFieldValue("backgroundImageUrl", first.url);
+                  });
                 }}
-                data={[
-                  {
-                    group: t("board.field.backgroundImageUrl.group.your"),
-                    items: images
-                      .filter((media) => media.creatorId === session?.user.id)
-                      .map((media) => `/api/user-medias/${media.id}`),
-                  },
-                  {
-                    group: t("board.field.backgroundImageUrl.group.other"),
-                    items: images
-                      .filter((media) => media.creatorId !== session?.user.id)
-                      .map((media) => `/api/user-medias/${media.id}`),
-                  },
-                ]}
-                {...form.getInputProps("backgroundImageUrl")}
-              />
-              {session?.user.permissions.includes("media-upload") && (
-                <UploadMedia
-                  onSuccess={(medias) => {
-                    const first = medias.at(0);
-                    if (!first) return;
-
-                    startTransition(() => {
-                      form.setFieldValue("backgroundImageUrl", first.url);
-                    });
-                  }}
-                >
-                  {({ onClick, loading }) => (
-                    <ActionIcon onClick={onClick} loading={loading} mt={24} size={36} variant="default">
-                      <IconUpload size={16} stroke={1.5} />
-                    </ActionIcon>
-                  )}
-                </UploadMedia>
-              )}
-            </Group>
-          </Grid.Col>
-          <Grid.Col span={12}>
-            <SelectWithDescriptionBadge
-              label={t("board.field.backgroundImageAttachment.label")}
-              data={backgroundImageAttachmentData}
-              {...form.getInputProps("backgroundImageAttachment")}
-            />
-          </Grid.Col>
-          <Grid.Col span={12}>
-            <SelectWithDescriptionBadge
-              label={t("board.field.backgroundImageSize.label")}
-              data={backgroundImageSizeData}
-              {...form.getInputProps("backgroundImageSize")}
-            />
-          </Grid.Col>
-          <Grid.Col span={12}>
-            <SelectWithDescriptionBadge
-              label={t("board.field.backgroundImageRepeat.label")}
-              data={backgroundImageRepeatData}
-              {...form.getInputProps("backgroundImageRepeat")}
-            />
-          </Grid.Col>
-        </Grid>
-
-        <Group justify="end">
-          <Button type="submit" loading={isPending}>
-            {t("common.action.saveChanges")}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
+              >
+                {({ onClick, loading }) => (
+                  <ActionIcon onClick={onClick} loading={loading} mt={24} size={36} variant="default">
+                    <IconUpload size={16} stroke={1.5} />
+                  </ActionIcon>
+                )}
+              </UploadMedia>
+            )}
+          </Group>
+        </Grid.Col>
+        <Grid.Col span={12}>
+          <SelectWithDescriptionBadge
+            label={t("board.field.backgroundImageAttachment.label")}
+            data={backgroundImageAttachmentData}
+            {...form.getInputProps("backgroundImageAttachment")}
+          />
+        </Grid.Col>
+        <Grid.Col span={12}>
+          <SelectWithDescriptionBadge
+            label={t("board.field.backgroundImageSize.label")}
+            data={backgroundImageSizeData}
+            {...form.getInputProps("backgroundImageSize")}
+          />
+        </Grid.Col>
+        <Grid.Col span={12}>
+          <SelectWithDescriptionBadge
+            label={t("board.field.backgroundImageRepeat.label")}
+            data={backgroundImageRepeatData}
+            {...form.getInputProps("backgroundImageRepeat")}
+          />
+        </Grid.Col>
+      </Grid>
+    </SectionCard>
   );
 };
 
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_behavior.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_behavior.tsx
index 9eded5ec4..563fb97eb 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_behavior.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_behavior.tsx
@@ -1,48 +1,27 @@
 "use client";
 
-import { Button, Group, Stack, Switch } from "@mantine/core";
+import { Switch } from "@mantine/core";
 
-import { useForm } from "@homarr/form";
+import type { UseFormReturnType } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
 
-import type { Board } from "../../_types";
-import { useSavePartialSettingsMutation } from "./_shared";
+import { SectionCard } from "~/components/manage/section-card";
+import type { FormValues } from "./_settings-form";
 
 interface Props {
-  board: Board;
+  form: UseFormReturnType<FormValues>;
 }
 
-export const BehaviorSettingsContent = ({ board }: Props) => {
+export const BehaviorSettingsContent = ({ form }: Props) => {
   const t = useI18n();
-  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
-  const form = useForm({
-    initialValues: {
-      disableStatus: board.disableStatus,
-    },
-  });
 
   return (
-    <form
-      onSubmit={form.onSubmit((values) => {
-        savePartialSettings({
-          id: board.id,
-          ...values,
-        });
-      })}
-    >
-      <Stack>
-        <Switch
-          label={t("board.field.disableStatus.label")}
-          description={t("board.field.disableStatus.description")}
-          {...form.getInputProps("disableStatus", { type: "checkbox" })}
-        />
-
-        <Group justify="end">
-          <Button type="submit" loading={isPending}>
-            {t("common.action.saveChanges")}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
+    <SectionCard title={t("board.setting.section.behavior.title")}>
+      <Switch
+        label={t("board.field.disableStatus.label")}
+        description={t("board.field.disableStatus.description")}
+        {...form.getInputProps("disableStatus", { type: "checkbox" })}
+      />
+    </SectionCard>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_customCss.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_customCss.tsx
index e0d8ec565..2ad05962c 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_customCss.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_customCss.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Alert, Button, Group, Input, Stack } from "@mantine/core";
+import { Alert, Input } from "@mantine/core";
 import { highlight, languages } from "prismjs";
 import Editor from "react-simple-code-editor";
 
@@ -8,59 +8,44 @@ import "~/styles/prismjs.scss";
 
 import { IconInfoCircle } from "@tabler/icons-react";
 
-import { useForm } from "@homarr/form";
+import { useSession } from "@homarr/auth/client";
+import type { UseFormReturnType } from "@homarr/form";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
-import type { Board } from "../../_types";
-import { useSavePartialSettingsMutation } from "./_shared";
+import { SectionCard } from "~/components/manage/section-card";
+import { WorkshopCssImportButton } from "~/components/workshop/workshop-css-import-button";
+import type { FormValues } from "./_settings-form";
 import classes from "./customcss.module.css";
 
 interface Props {
-  board: Board;
+  form: UseFormReturnType<FormValues>;
 }
 
-export const CustomCssSettingsContent = ({ board }: Props) => {
+export const CustomCssSettingsContent = ({ form }: Props) => {
+  const { data: session } = useSession();
+  const isAdmin = session?.user.permissions.includes("admin") ?? false;
   const t = useI18n();
   const customCssT = useScopedI18n("board.field.customCss");
-  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
-  const form = useForm({
-    initialValues: {
-      customCss: board.customCss ?? "",
-    },
-  });
 
   return (
-    <form
-      onSubmit={form.onSubmit((values) => {
-        savePartialSettings({
-          id: board.id,
-          ...values,
-        });
-      })}
-    >
-      <Stack>
-        <CustomCssInput {...form.getInputProps("customCss")} />
+    <SectionCard title={t("board.setting.section.customCss.title")}>
+      <CustomCssInput {...form.getInputProps("customCss")} />
 
-        <Alert variant="light" color="cyan" title={customCssT("customClassesAlert.title")} icon={<IconInfoCircle />}>
-          {customCssT("customClassesAlert.description")}
-        </Alert>
-
-        <Group justify="end">
-          <Button type="submit" loading={isPending}>
-            {t("common.action.saveChanges")}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
+      <Alert variant="light" color="cyan" title={customCssT("customClassesAlert.title")} icon={<IconInfoCircle />}>
+        {customCssT("customClassesAlert.description")}
+      </Alert>
+      {isAdmin && <WorkshopCssImportButton onImport={(css) => form.setFieldValue("customCss", css)} />}
+    </SectionCard>
   );
 };
 
 interface CustomCssInputProps {
   value?: string;
   onChange: (value: string) => void;
+  error?: React.ReactNode;
 }
 
-const CustomCssInput = ({ value, onChange }: CustomCssInputProps) => {
+const CustomCssInput = ({ value, onChange, error }: CustomCssInputProps) => {
   const customCssT = useScopedI18n("board.field.customCss");
 
   return (
@@ -70,6 +55,7 @@ const CustomCssInput = ({ value, onChange }: CustomCssInputProps) => {
         htmlFor: "custom-css",
       }}
       description={customCssT("description")}
+      error={error}
       inputWrapperOrder={["label", "description", "input", "error"]}
     >
       <div className={classes.codeEditorRoot}>
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_danger.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_danger.tsx
index 699da6003..92454f20c 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_danger.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_danger.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback } from "react";
 import { useRouter } from "next/navigation";
-import { Button, Divider, Group, Stack, Text } from "@mantine/core";
+import { Button } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
@@ -10,7 +10,7 @@ import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { BoardRenameModal } from "~/components/board/modals/board-rename-modal";
-import classes from "./danger.module.css";
+import { DangerZoneItem, DangerZoneRoot } from "~/components/manage/danger-zone";
 
 export const DangerZoneSettingsContent = ({ hideVisibility }: { hideVisibility: boolean }) => {
   const board = useRequiredBoard();
@@ -82,60 +82,36 @@ export const DangerZoneSettingsContent = ({ hideVisibility }: { hideVisibility:
   }, [board.id, deleteBoard, router, t, openConfirmModal]);
 
   return (
-    <Stack gap="sm">
-      <Divider />
-      <DangerZoneRow
+    <DangerZoneRoot>
+      <DangerZoneItem
         label={t("section.dangerZone.action.rename.label")}
         description={t("section.dangerZone.action.rename.description")}
-        buttonText={t("section.dangerZone.action.rename.button")}
-        onClick={onRenameClick}
+        action={
+          <Button variant="subtle" color="red" onClick={onRenameClick}>
+            {t("section.dangerZone.action.rename.button")}
+          </Button>
+        }
       />
-      {hideVisibility ? null : (
-        <>
-          <Divider />
-          <DangerZoneRow
-            label={t("section.dangerZone.action.visibility.label")}
-            description={t(`section.dangerZone.action.visibility.description.${visibility}`)}
-            buttonText={t(`section.dangerZone.action.visibility.button.${visibility}`)}
-            onClick={onVisibilityClick}
-            isPending={isChangeVisibilityPending}
-          />
-        </>
+      {!hideVisibility && (
+        <DangerZoneItem
+          label={t("section.dangerZone.action.visibility.label")}
+          description={t(`section.dangerZone.action.visibility.description.${visibility}`)}
+          action={
+            <Button variant="subtle" color="red" loading={isChangeVisibilityPending} onClick={onVisibilityClick}>
+              {t(`section.dangerZone.action.visibility.button.${visibility}`)}
+            </Button>
+          }
+        />
       )}
-      <Divider />
-      <DangerZoneRow
+      <DangerZoneItem
         label={t("section.dangerZone.action.delete.label")}
         description={t("section.dangerZone.action.delete.description")}
-        buttonText={t("section.dangerZone.action.delete.button")}
-        onClick={onDeleteClick}
-        isPending={isDeletePending}
+        action={
+          <Button variant="subtle" color="red" loading={isDeletePending} onClick={onDeleteClick}>
+            {t("section.dangerZone.action.delete.button")}
+          </Button>
+        }
       />
-    </Stack>
-  );
-};
-
-interface DangerZoneRowProps {
-  label: string;
-  description: string;
-  buttonText: string;
-  isPending?: boolean;
-  onClick: () => void;
-}
-
-const DangerZoneRow = ({ label, description, buttonText, onClick, isPending }: DangerZoneRowProps) => {
-  return (
-    <Group justify="space-between" px="md" className={classes.dangerZoneGroup}>
-      <Stack gap={0}>
-        <Text fw="bold" size="sm">
-          {label}
-        </Text>
-        <Text size="sm">{description}</Text>
-      </Stack>
-      <Group justify="end" w={{ base: "100%", xs: "auto" }}>
-        <Button variant="subtle" color="red" loading={isPending} onClick={onClick}>
-          {buttonText}
-        </Button>
-      </Group>
-    </Group>
+    </DangerZoneRoot>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_general.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_general.tsx
index 0bfc79173..2fcb119a0 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_general.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_general.tsx
@@ -1,128 +1,66 @@
 "use client";
 
-import { useEffect, useRef } from "react";
-import { Button, Grid, Group, Loader, Stack, TextInput } from "@mantine/core";
+import { useEffect } from "react";
+import { Grid, Loader, TextInput } from "@mantine/core";
 import { useDebouncedValue, useDocumentTitle } from "@mantine/hooks";
 
 import { useUpdateBoard } from "@homarr/boards/updater";
-import { useZodForm } from "@homarr/form";
+import type { UseFormReturnType } from "@homarr/form";
 import { IconPicker } from "@homarr/forms-collection";
 import { useI18n } from "@homarr/translation/client";
-import { boardSavePartialSettingsSchema } from "@homarr/validation/board";
 
-import { homarrLogoPath } from "~/components/layout/logo/homarr-logo";
+import { SectionCard } from "~/components/manage/section-card";
 import { createMetaTitle } from "~/metadata";
 import type { Board } from "../../_types";
-import { useSavePartialSettingsMutation } from "./_shared";
+import type { FormValues } from "./_settings-form";
 
 interface Props {
   board: Board;
+  form: UseFormReturnType<FormValues>;
 }
 
-export const GeneralSettingsContent = ({ board }: Props) => {
+export const GeneralSettingsContent = ({ board, form }: Props) => {
   const t = useI18n();
-  const ref = useRef({
-    pageTitle: board.pageTitle,
-    logoImageUrl: board.logoImageUrl,
-  });
-  const { updateBoard } = useUpdateBoard();
-
-  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
-  const form = useZodForm(
-    boardSavePartialSettingsSchema
-      .pick({
-        pageTitle: true,
-        logoImageUrl: true,
-        metaTitle: true,
-        faviconImageUrl: true,
-      })
-      .required(),
-    {
-      initialValues: {
-        pageTitle: board.pageTitle ?? "",
-        logoImageUrl: board.logoImageUrl ?? "",
-        metaTitle: board.metaTitle ?? "",
-        faviconImageUrl: board.faviconImageUrl ?? "",
-      },
-      onValuesChange({ pageTitle }) {
-        updateBoard((previous) => ({
-          ...previous,
-          pageTitle,
-        }));
-      },
-    },
-  );
 
   useLogoPreview(form.values.logoImageUrl);
   const metaTitleStatus = useMetaTitlePreview(form.values.metaTitle);
 
-  // Cleanup for not applied changes of the page title and logo image URL
-  useEffect(() => {
-    return () => {
-      updateBoard((previous) => ({
-        ...previous,
-        pageTitle: ref.current.pageTitle,
-        logoImageUrl: ref.current.logoImageUrl,
-      }));
-    };
-  }, [updateBoard]);
-
   return (
-    <form
-      onSubmit={form.onSubmit((values) => {
-        // Save the current values to the ref so that it does not reset if the form is submitted
-        ref.current = {
-          pageTitle: values.pageTitle,
-          logoImageUrl: values.logoImageUrl,
-        };
-        updateFavicon(values.faviconImageUrl ?? homarrLogoPath);
-        savePartialSettings({
-          id: board.id,
-          ...values,
-        });
-      })}
-    >
-      <Stack>
-        <Grid>
-          <Grid.Col span={{ xs: 12, md: 6 }}>
-            <TextInput
-              label={t("board.field.pageTitle.label")}
-              placeholder="Homarr"
-              {...form.getInputProps("pageTitle")}
-            />
-          </Grid.Col>
-          <Grid.Col span={{ xs: 12, md: 6 }}>
-            <TextInput
-              label={t("board.field.metaTitle.label")}
-              placeholder={createMetaTitle(t("board.content.metaTitle", { boardName: board.name }))}
-              rightSection={metaTitleStatus.isPending && <Loader size="xs" />}
-              {...form.getInputProps("metaTitle")}
-            />
-          </Grid.Col>
-          <Grid.Col span={{ xs: 12, md: 6 }}>
-            <IconPicker
-              {...form.getInputProps("logoImageUrl")}
-              label={t("board.field.logoImageUrl.label")}
-              placeholder="/logo/logo.png"
-              withAsterisk={false}
-            />
-          </Grid.Col>
-          <Grid.Col span={{ xs: 12, md: 6 }}>
-            <IconPicker
-              {...form.getInputProps("faviconImageUrl")}
-              label={t("board.field.faviconImageUrl.label")}
-              placeholder="/logo/logo.png"
-              withAsterisk={false}
-            />
-          </Grid.Col>
-        </Grid>
-        <Group justify="end">
-          <Button type="submit" loading={isPending}>
-            {t("common.action.saveChanges")}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
+    <SectionCard title={t("board.setting.section.general.title")}>
+      <Grid>
+        <Grid.Col span={{ xs: 12, md: 6 }}>
+          <TextInput
+            label={t("board.field.pageTitle.label")}
+            placeholder="Homarr"
+            {...form.getInputProps("pageTitle")}
+          />
+        </Grid.Col>
+        <Grid.Col span={{ xs: 12, md: 6 }}>
+          <TextInput
+            label={t("board.field.metaTitle.label")}
+            placeholder={createMetaTitle(t("board.content.metaTitle", { boardName: board.name }))}
+            rightSection={metaTitleStatus.isPending && <Loader size="xs" />}
+            {...form.getInputProps("metaTitle")}
+          />
+        </Grid.Col>
+        <Grid.Col span={{ xs: 12, md: 6 }}>
+          <IconPicker
+            {...form.getInputProps("logoImageUrl")}
+            label={t("board.field.logoImageUrl.label")}
+            placeholder="/logo/logo.png"
+            withAsterisk={false}
+          />
+        </Grid.Col>
+        <Grid.Col span={{ xs: 12, md: 6 }}>
+          <IconPicker
+            {...form.getInputProps("faviconImageUrl")}
+            label={t("board.field.faviconImageUrl.label")}
+            placeholder="/logo/logo.png"
+            withAsterisk={false}
+          />
+        </Grid.Col>
+      </Grid>
+    </SectionCard>
   );
 };
 
@@ -146,14 +84,3 @@ const useMetaTitlePreview = (title: string | null) => {
     isPending: (title ?? "") !== metaTitleDebounced,
   };
 };
-
-// Previously we used the useFavicon hook from Mantine
-// However if the user tried to click on a link to a different page
-// it caused an error "Cannot read properties of null (reading 'removeChild')"
-// Probably because the head element was null (https://github.com/mantinedev/mantine/blob/b90d9b81031f45f5d15e75f25138ed6477f65bce/packages/%40mantine/hooks/src/use-favicon/use-favicon.ts#L21)
-// See https://github.com/homarr-labs/homarr/issues/4905
-const updateFavicon = (url: string) => {
-  const link: HTMLLinkElement | null = document.querySelector('link[rel="icon"]');
-  if (!link) return;
-  link.href = url;
-};
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.module.css b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.module.css
new file mode 100644
index 000000000..ad99b48f1
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.module.css
@@ -0,0 +1,70 @@
+.canvas {
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-md);
+  background: color-mix(in srgb, var(--mantine-color-body) 82%, var(--mantine-primary-color-light));
+  padding: var(--mantine-spacing-xs);
+  min-height: 7rem;
+  max-height: min(24rem, 48dvh);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+.section {
+  border-radius: var(--mantine-radius-sm);
+  background: color-mix(in srgb, var(--mantine-color-default) 78%, transparent);
+  padding: 0.35rem;
+}
+
+.grid {
+  display: grid;
+  gap: 3px;
+  grid-auto-rows: clamp(1.35rem, 2.2vw, 1.75rem);
+  min-height: 2.5rem;
+}
+
+.tile {
+  container-type: inline-size;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--mantine-primary-color-filled) 24%, var(--mantine-color-default-border));
+  border-radius: calc(var(--mantine-radius-sm) * 0.75);
+  background: color-mix(in srgb, var(--mantine-primary-color-light) 70%, var(--mantine-color-body));
+  padding-inline: 0.25rem;
+}
+
+.tileContent {
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.tileLabel {
+  display: none;
+  min-width: 0;
+  max-height: 2.1em;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  line-height: 1.05;
+}
+
+@container (min-width: 9rem) {
+  .tileContent {
+    justify-content: flex-start;
+  }
+
+  .tileLabel {
+    display: block;
+  }
+}
+
+.containerTile {
+  border-style: dashed;
+  background: color-mix(in srgb, var(--mantine-color-default) 88%, var(--mantine-primary-color-light));
+}
+
+.appIcon {
+  width: 0.85rem;
+  height: 0.85rem;
+}
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.tsx
new file mode 100644
index 000000000..a0816c831
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { Badge, Box, Group, Stack, Text, ThemeIcon, Tooltip } from "@mantine/core";
+import { IconLayoutGrid } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { getBoardLaneColumnCount, getRootSectionLane } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";
+import { MaskedOrNormalImage } from "@homarr/ui";
+import { widgetCatalogIcons } from "@homarr/widgets/catalog";
+
+import type { Board } from "../../_types";
+import type { BoardLayout } from "../../_layout-utils";
+import { getRepresentativeLayoutWidth, projectBoardLayout } from "../../_layout-utils";
+import classes from "./_layout-preview.module.css";
+
+interface Props {
+  board: Board;
+  layout: BoardLayout;
+  layouts: BoardLayout[];
+  sourceLayout: BoardLayout;
+  apps: RouterOutputs["app"]["byIds"];
+}
+
+export const LayoutPreview = ({ board, layout, layouts, sourceLayout, apps }: Props) => {
+  const t = useI18n();
+  const elements = projectBoardLayout(board, sourceLayout, layout);
+  const representativeWidth = getRepresentativeLayoutWidth(layout, layouts);
+  const largestRepresentativeWidth = Math.max(
+    ...layouts.map((candidate) => getRepresentativeLayoutWidth(candidate, layouts)),
+  );
+  const previewWidth = `${(representativeWidth / largestRepresentativeWidth) * 100}%`;
+  const appsById = new Map(apps.map((app) => [app.id, app]));
+  const rootSections = board.sections
+    .filter((section) => section.kind === "empty")
+    .toSorted((sectionA, sectionB) => sectionA.xOffset - sectionB.xOffset);
+
+  return (
+    <Stack gap={6} align="center" w="100%">
+      <Group gap="xs" justify="center">
+        <Badge variant="light" color={layout.role === "mobile" ? "teal" : layout.role === "base" ? "blue" : "gray"}>
+          {representativeWidth}px
+        </Badge>
+        <Text size="xs">
+          {layout.columnCount} {t("board.setting.section.layout.preview.columns")}
+        </Text>
+      </Group>
+      <Box w={{ base: "100%", md: previewWidth }} maw="100%" className={classes.canvas}>
+        {elements.length === 0 ? (
+          <Text size="xs" c="dimmed" ta="center" py="xl">
+            {t("board.setting.section.layout.preview.empty")}
+          </Text>
+        ) : (
+          <Stack gap="xs">
+            {rootSections.map((section) => {
+              const sectionElements = elements.filter((element) => element.sectionId === section.id);
+              const columnCount = getBoardLaneColumnCount(layout, getRootSectionLane(section.xOffset));
+              if (sectionElements.length === 0 || columnCount === 0) return null;
+
+              return (
+                <Stack key={section.id} gap={4} className={classes.section}>
+                  <Box
+                    className={classes.grid}
+                    style={{ gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))` }}
+                  >
+                    {sectionElements.map((element) => {
+                      const item =
+                        element.type === "item" ? board.items.find((candidate) => candidate.id === element.id) : null;
+                      const appId =
+                        item?.kind === "app" && typeof item.options.appId === "string" ? item.options.appId : null;
+                      const app = appId ? appsById.get(appId) : undefined;
+                      const container =
+                        element.type === "section"
+                          ? board.sections.find((candidate) => candidate.id === element.id)
+                          : undefined;
+                      const containerLabel =
+                        container?.kind === "container" && container.options.title
+                          ? container.options.title
+                          : t("section.container.untitled");
+                      const label = app?.name ?? (item ? t(`widget.${item.kind}.name`) : containerLabel);
+                      const WidgetIcon = item ? widgetCatalogIcons[item.kind] : IconLayoutGrid;
+
+                      return (
+                        <Tooltip key={`${element.type}-${element.id}`} label={label} openDelay={350}>
+                          <Box
+                            role="img"
+                            aria-label={label}
+                            className={`${classes.tile} ${element.type === "section" ? classes.containerTile : ""}`}
+                            style={{
+                              gridColumn: `${element.xOffset + 1} / span ${element.width}`,
+                              gridRow: `${element.yOffset + 1} / span ${element.height}`,
+                            }}
+                          >
+                            <Group gap={4} wrap="nowrap" className={classes.tileContent}>
+                              <ThemeIcon size="sm" variant="light" radius="sm" style={{ flexShrink: 0 }}>
+                                {app ? (
+                                  <MaskedOrNormalImage
+                                    imageUrl={app.iconUrl}
+                                    hasColor={false}
+                                    alt=""
+                                    className={classes.appIcon}
+                                  />
+                                ) : (
+                                  <WidgetIcon size={13} stroke={1.7} />
+                                )}
+                              </ThemeIcon>
+                              <Text component="span" size="xs" fw={500} className={classes.tileLabel}>
+                                {label}
+                              </Text>
+                            </Group>
+                          </Box>
+                        </Tooltip>
+                      );
+                    })}
+                  </Box>
+                </Stack>
+              );
+            })}
+          </Stack>
+        )}
+      </Box>
+    </Stack>
+  );
+};
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.module.css b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.module.css
new file mode 100644
index 000000000..7c8bdbebd
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.module.css
@@ -0,0 +1,47 @@
+.gutterSettings {
+  background: color-mix(in srgb, var(--mantine-color-default) 55%, transparent);
+}
+
+.gutterPreview {
+  display: grid;
+  gap: 6px;
+  width: 100%;
+  min-height: 112px;
+  padding: 8px;
+  overflow: hidden;
+  background: var(--mantine-color-body);
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-md);
+  transition: grid-template-columns 180ms ease-out;
+}
+
+.previewCanvas {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  min-width: 0;
+}
+
+.previewCanvas > div,
+.previewGutter {
+  background: var(--mantine-color-default);
+  border-radius: var(--mantine-radius-sm);
+}
+
+.previewCanvas > div:nth-child(1) {
+  grid-row: span 2;
+}
+
+.previewCanvas > div:nth-child(4) {
+  grid-column: span 2;
+}
+
+.previewGutter {
+  min-width: 12px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gutterPreview {
+    transition: none;
+  }
+}
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx
index 97a576a30..745c55b51 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx
@@ -1,115 +1,424 @@
 "use client";
 
-import { Button, Fieldset, Grid, Group, Input, NumberInput, Slider, Stack, Text, TextInput } from "@mantine/core";
+import { useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Badge,
+  Box,
+  Button,
+  Fieldset,
+  Grid,
+  Group,
+  Input,
+  NumberInput,
+  Paper,
+  Slider,
+  Stack,
+  Switch,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { IconEdit, IconRefresh } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { createId } from "@homarr/common";
-import { useZodForm } from "@homarr/form";
+import type { UseFormReturnType } from "@homarr/form";
+import { useConfirmModal } from "@homarr/modals";
+import { showErrorNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { boardSaveLayoutsSchema } from "@homarr/validation/board";
 
+import { SectionCard } from "~/components/manage/section-card";
 import type { Board } from "../../_types";
+import { LayoutPreview } from "./_layout-preview";
+import type { FormValues } from "./_settings-form";
+import classes from "./_layout.module.css";
 
 interface Props {
   board: Board;
+  form: UseFormReturnType<FormValues>;
+  isSaving: boolean;
+  saveSettingsAsync: () => Promise<FormValues | null>;
 }
-export const LayoutSettingsContent = ({ board }: Props) => {
+
+export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync }: Props) => {
   const t = useI18n();
+  const router = useRouter();
   const utils = clientApi.useUtils();
-  const { mutate: saveLayouts, isPending } = clientApi.board.saveLayouts.useMutation({
-    onSettled() {
-      void utils.board.getBoardByName.invalidate({ name: board.name });
-      void utils.board.getHomeBoard.invalidate();
-    },
-  });
-  const form = useZodForm(boardSaveLayoutsSchema.omit({ id: true }).required(), {
-    initialValues: {
-      layouts: board.layouts,
+  const { openConfirmModal } = useConfirmModal();
+  const [editingLayoutId, setEditingLayoutId] = useState<string | null>(null);
+  const [resettingLayoutId, setResettingLayoutId] = useState<string | null>(null);
+  const { mutateAsync: resetLayout } = clientApi.board.resetLayout.useMutation({
+    onError() {
+      showErrorNotification({
+        title: t("common.notification.update.error"),
+        message: t("common.notification.update.error"),
+      });
     },
   });
+  const appIds = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          board.items.flatMap((item) =>
+            item.kind === "app" && typeof item.options.appId === "string" ? [item.options.appId] : [],
+          ),
+        ),
+      ),
+    [board.items],
+  );
+  const { data: apps = [] } = clientApi.app.byIds.useQuery(appIds, { enabled: appIds.length > 0 });
+
+  const openLayoutEditorAsync = async (layout: FormValues["layouts"][number]) => {
+    setEditingLayoutId(layout.id);
+    try {
+      const persistedLayout = board.layouts.find((candidate) => candidate.id === layout.id);
+      const savedValues = form.isDirty() || !persistedLayout ? await saveSettingsAsync() : form.values;
+      const canonicalLayout = savedValues ? findCanonicalLayout(savedValues.layouts, layout) : undefined;
+      if (!canonicalLayout) return;
+
+      router.push(`/boards/${board.name}?layout=${encodeURIComponent(canonicalLayout.id)}&edit=true&returnTo=settings`);
+    } finally {
+      setEditingLayoutId(null);
+    }
+  };
+
+  const confirmReset = (layout: FormValues["layouts"][number]) => {
+    openConfirmModal({
+      title: t("board.setting.section.layout.reset.confirm.title", { layoutName: layout.name }),
+      children: t("board.setting.section.layout.reset.confirm.message"),
+      confirmProps: { children: t("board.setting.section.layout.reset.action"), color: "red" },
+      onConfirm() {
+        setResettingLayoutId(layout.id);
+        void (async () => {
+          try {
+            const savedValues = form.isDirty() ? await saveSettingsAsync() : form.values;
+            const canonicalLayout = savedValues ? findCanonicalLayout(savedValues.layouts, layout) : undefined;
+            if (!canonicalLayout) return;
+
+            await resetLayout({ boardId: board.id, layoutId: canonicalLayout.id });
+            await utils.board.getBoardByName.invalidate({ name: board.name });
+            router.refresh();
+          } catch {
+            // The mutation callback displays the error notification.
+          } finally {
+            setResettingLayoutId(null);
+          }
+        })();
+      },
+    });
+  };
+
+  const nextBreakpoint = getNextCustomBreakpoint(form.values.layouts);
+  const baseLayout = form.values.layouts.find((layout) => layout.role === "base");
+  const sortedLayouts = form.values.layouts
+    .map((layout, index) => ({ layout, index }))
+    .toSorted((entryA, entryB) => entryA.layout.breakpoint - entryB.layout.breakpoint);
 
   return (
-    <form
-      onSubmit={form.onSubmit((values) => {
-        saveLayouts({
-          id: board.id,
-          ...values,
-        });
-      })}
-    >
-      <Stack>
-        <Stack gap="sm">
-          <Group justify="space-between" align="center">
+    <SectionCard title={t("board.setting.section.layout.title")}>
+      <Stack gap="lg">
+        <Group justify="space-between" align="flex-start" wrap="wrap">
+          <Stack gap={2} maw="52rem">
             <Text fw={500}>{t("board.setting.section.layout.responsive.title")}</Text>
-            <Button
-              variant="subtle"
-              onClick={() => {
-                form.setValues({
-                  layouts: [
-                    ...form.values.layouts,
-                    {
-                      id: createId(),
-                      name: "",
-                      columnCount: 10,
-                      breakpoint: 0,
-                    },
-                  ],
-                });
-              }}
-            >
-              {t("board.setting.section.layout.responsive.action.add")}
-            </Button>
-          </Group>
-
-          {form.values.layouts.map((layout, index) => (
-            <Fieldset key={layout.id} legend={layout.name} bg="transparent">
-              <Grid>
-                <Grid.Col span={{ sm: 12, md: 6 }}>
-                  <TextInput {...form.getInputProps(`layouts.${index}.name`)} label={t("layout.field.name.label")} />
-                </Grid.Col>
-
-                <Grid.Col span={{ sm: 12, md: 6 }}>
-                  <Input.Wrapper label={t("layout.field.columnCount.label")}>
-                    <Slider mt="xs" min={1} max={24} step={1} {...form.getInputProps(`layouts.${index}.columnCount`)} />
-                  </Input.Wrapper>
-                </Grid.Col>
-
-                <Grid.Col span={{ sm: 12, md: 6 }}>
-                  <NumberInput
-                    {...form.getInputProps(`layouts.${index}.breakpoint`)}
-                    label={t("layout.field.breakpoint.label")}
-                    description={t("layout.field.breakpoint.description")}
-                  />
-                </Grid.Col>
-              </Grid>
-              {form.values.layouts.length >= 2 && (
-                <Group justify="end">
-                  <Button
-                    variant="subtle"
-                    onClick={() => {
-                      form.setValues((previous) =>
-                        previous.layouts !== undefined && previous.layouts.length >= 2
-                          ? {
-                              layouts: form.values.layouts.filter((filteredLayout) => filteredLayout.id !== layout.id),
-                            }
-                          : previous,
-                      );
-                    }}
-                  >
-                    {t("common.action.remove")}
-                  </Button>
-                </Group>
-              )}
-            </Fieldset>
-          ))}
-        </Stack>
-
-        <Group justify="end">
-          <Button type="submit" loading={isPending}>
-            {t("common.action.saveChanges")}
+            <Text size="sm">{t("board.setting.section.layout.responsive.description")}</Text>
+          </Stack>
+          <Button
+            type="button"
+            variant="light"
+            disabled={nextBreakpoint === null || !baseLayout}
+            onClick={() => {
+              if (nextBreakpoint === null || !baseLayout) return;
+              form.setFieldValue("layouts", [
+                ...form.values.layouts,
+                {
+                  id: createId(),
+                  name: t("board.setting.section.layout.custom.defaultName"),
+                  columnCount: baseLayout.columnCount,
+                  leftGutterColumnCount: baseLayout.leftGutterColumnCount,
+                  rightGutterColumnCount: baseLayout.rightGutterColumnCount,
+                  breakpoint: nextBreakpoint,
+                  role: "custom",
+                },
+              ]);
+            }}
+          >
+            {t("board.setting.section.layout.responsive.action.add")}
           </Button>
         </Group>
+
+        {sortedLayouts.map(({ layout, index }) => {
+          const persistedLayout = board.layouts.find((candidate) => candidate.id === layout.id);
+          const sourceLayout = persistedLayout ?? board.layouts.find((candidate) => candidate.role === "base");
+          const customBreakpoints = form.values.layouts
+            .filter((candidate) => candidate.role === "custom" && candidate.id !== layout.id)
+            .map((candidate) => candidate.breakpoint);
+          const baseBreakpoint = form.values.layouts.find((candidate) => candidate.role === "base")?.breakpoint ?? 768;
+
+          return (
+            <Fieldset
+              key={layout.id}
+              legend={
+                <Group gap="xs">
+                  <Text>{layout.name || t(`board.setting.section.layout.role.${layout.role}`)}</Text>
+                  <Badge size="sm" variant="default">
+                    {t(`board.setting.section.layout.role.${layout.role}`)}
+                  </Badge>
+                </Group>
+              }
+              bg="transparent"
+            >
+              <Grid gap={{ base: "lg", xl: "xl" }} align="flex-start">
+                <Grid.Col span={{ base: 12, md: 4 }}>
+                  <Stack gap="md">
+                    <TextInput {...form.getInputProps(`layouts.${index}.name`)} label={t("layout.field.name.label")} />
+                    <Input.Wrapper label={t("layout.field.columnCount.label")}>
+                      <Slider
+                        thumbLabel={`${t("layout.field.columnCount.label")} — ${layout.name}`}
+                        mt="xs"
+                        min={1}
+                        max={24}
+                        step={1}
+                        marks={[1, 6, 12, 18, 24].map((value) => ({ value, label: String(value) }))}
+                        styles={{
+                          markLabel: { color: "light-dark(var(--mantine-color-black), var(--mantine-color-white))" },
+                        }}
+                        value={layout.columnCount}
+                        onChange={(columnCount) => {
+                          const left = Math.min(layout.leftGutterColumnCount, Math.max(0, columnCount - 1));
+                          const right = Math.min(layout.rightGutterColumnCount, Math.max(0, columnCount - left - 1));
+                          form.setFieldValue(`layouts.${index}.columnCount`, columnCount);
+                          form.setFieldValue(`layouts.${index}.leftGutterColumnCount`, left);
+                          form.setFieldValue(`layouts.${index}.rightGutterColumnCount`, right);
+                        }}
+                      />
+                    </Input.Wrapper>
+                    <NumberInput
+                      {...form.getInputProps(`layouts.${index}.breakpoint`)}
+                      label={t("layout.field.breakpoint.label")}
+                      description={
+                        layout.role === "mobile"
+                          ? t("board.setting.section.layout.mobile.breakpointDescription")
+                          : t("layout.field.breakpoint.description")
+                      }
+                      disabled={layout.role === "mobile"}
+                      styles={{ description: { color: "var(--mantine-color-text)" } }}
+                      min={
+                        layout.role === "base"
+                          ? Math.max(1, ...customBreakpoints.map((breakpoint) => breakpoint + 1))
+                          : 1
+                      }
+                      max={layout.role === "custom" ? baseBreakpoint - 1 : 32767}
+                    />
+                    <GutterSettings
+                      left={layout.leftGutterColumnCount}
+                      right={layout.rightGutterColumnCount}
+                      columnCount={layout.columnCount}
+                      onLeftChange={(value) => form.setFieldValue(`layouts.${index}.leftGutterColumnCount`, value)}
+                      onRightChange={(value) => form.setFieldValue(`layouts.${index}.rightGutterColumnCount`, value)}
+                    />
+                  </Stack>
+                </Grid.Col>
+                <Grid.Col span={{ base: 12, md: 8 }}>
+                  {sourceLayout && (
+                    <LayoutPreview
+                      board={board}
+                      layout={layout}
+                      layouts={form.values.layouts}
+                      sourceLayout={sourceLayout}
+                      apps={apps}
+                    />
+                  )}
+                </Grid.Col>
+              </Grid>
+
+              <Group justify="space-between" mt="lg" gap="sm" wrap="wrap">
+                <Group gap="xs">
+                  {layout.role !== "base" && persistedLayout && (
+                    <Button
+                      type="button"
+                      variant="default"
+                      leftSection={<IconRefresh size={16} color="var(--mantine-color-red-5)" />}
+                      loading={resettingLayoutId === layout.id}
+                      disabled={isSaving}
+                      onClick={() => confirmReset(layout)}
+                    >
+                      {t("board.setting.section.layout.reset.action")}
+                    </Button>
+                  )}
+                  {layout.role === "custom" && (
+                    <Button
+                      type="button"
+                      variant="subtle"
+                      color="red"
+                      disabled={isSaving}
+                      onClick={() => {
+                        form.setFieldValue(
+                          "layouts",
+                          form.values.layouts.filter((candidate) => candidate.id !== layout.id),
+                        );
+                      }}
+                    >
+                      {t("common.action.remove")}
+                    </Button>
+                  )}
+                </Group>
+                <Button
+                  type="button"
+                  variant="default"
+                  leftSection={<IconEdit size={16} color="var(--mantine-color-red-5)" />}
+                  loading={editingLayoutId === layout.id}
+                  disabled={isSaving || !form.isValid()}
+                  onClick={() => void openLayoutEditorAsync(layout)}
+                >
+                  {form.isDirty() || !persistedLayout
+                    ? t("board.setting.section.layout.edit.saveAndEdit")
+                    : t("board.setting.section.layout.edit.action")}
+                </Button>
+              </Group>
+            </Fieldset>
+          );
+        })}
       </Stack>
-    </form>
+    </SectionCard>
+  );
+};
+
+const findCanonicalLayout = (layouts: FormValues["layouts"], layout: FormValues["layouts"][number]) =>
+  layouts.find((candidate) => candidate.id === layout.id) ??
+  layouts.find((candidate) => candidate.breakpoint === layout.breakpoint && candidate.role === layout.role);
+
+const getNextCustomBreakpoint = (layouts: Array<{ breakpoint: number }>) => {
+  const sortedBreakpoints = layouts
+    .map((layout) => layout.breakpoint)
+    .toSorted((breakpointA, breakpointB) => breakpointA - breakpointB);
+  let largestGap: { start: number; end: number } | null = null;
+
+  for (let index = 0; index < sortedBreakpoints.length - 1; index++) {
+    const start = sortedBreakpoints[index];
+    const end = sortedBreakpoints[index + 1];
+    if (start === undefined || end === undefined || end - start <= 1) continue;
+    if (!largestGap || end - start > largestGap.end - largestGap.start) largestGap = { start, end };
+  }
+
+  return largestGap ? Math.floor((largestGap.start + largestGap.end) / 2) : null;
+};
+
+interface GutterSettingsProps {
+  left: number;
+  right: number;
+  columnCount: number;
+  onLeftChange: (value: number) => void;
+  onRightChange: (value: number) => void;
+}
+
+const gutterMarks = [
+  { value: 1, label: "1" },
+  { value: 2, label: "2" },
+  { value: 3, label: "3" },
+];
+
+const GutterSettings = ({ left, right, columnCount, onLeftChange, onRightChange }: GutterSettingsProps) => {
+  const t = useI18n();
+  const maxGutterWidth = Math.min(3, Math.max(1, columnCount - 1));
+
+  return (
+    <Paper className={classes.gutterSettings} p="md">
+      <Stack gap="md">
+        <Box>
+          <Text fw={600}>{t("layout.field.gutters.label")}</Text>
+          <Text size="sm" c="dimmed">
+            {t("layout.field.gutters.description")}
+          </Text>
+        </Box>
+
+        <GutterPreview left={left} right={right} columnCount={columnCount} />
+
+        <Grid>
+          <Grid.Col span={{ base: 12, md: 6 }}>
+            <GutterControl
+              side="left"
+              value={left}
+              max={Math.min(maxGutterWidth, columnCount - right - 1)}
+              onChange={onLeftChange}
+            />
+          </Grid.Col>
+          <Grid.Col span={{ base: 12, md: 6 }}>
+            <GutterControl
+              side="right"
+              value={right}
+              max={Math.min(maxGutterWidth, columnCount - left - 1)}
+              onChange={onRightChange}
+            />
+          </Grid.Col>
+        </Grid>
+      </Stack>
+    </Paper>
+  );
+};
+
+const GutterControl = ({
+  side,
+  value,
+  max,
+  onChange,
+}: {
+  side: "left" | "right";
+  value: number;
+  max: number;
+  onChange: (value: number) => void;
+}) => {
+  const t = useI18n();
+  const enabled = value > 0;
+
+  return (
+    <Stack gap="sm">
+      <Switch
+        checked={enabled}
+        disabled={max < 1}
+        onChange={(event) => onChange(event.currentTarget.checked ? Math.min(2, max) : 0)}
+        label={t(`layout.field.gutters.${side}.label`)}
+        description={t(`layout.field.gutters.${side}.description`)}
+      />
+      {enabled && (
+        <Input.Wrapper label={t("layout.field.gutters.width.label")}>
+          <Slider
+            mt="xs"
+            min={1}
+            max={max}
+            value={Math.min(value, max)}
+            marks={gutterMarks.filter((mark) => mark.value <= max)}
+            restrictToMarks
+            thumbLabel={t(`layout.field.gutters.${side}.thumbLabel`)}
+            onChange={(nextValue) => onChange(Math.min(nextValue, max))}
+          />
+        </Input.Wrapper>
+      )}
+    </Stack>
+  );
+};
+
+const GutterPreview = ({ left, right, columnCount }: { left: number; right: number; columnCount: number }) => {
+  const t = useI18n();
+  const safeColumnCount = Math.max(1, columnCount);
+  const main = Math.max(1, safeColumnCount - left - right);
+  const tracks = [left > 0 ? `${left}fr` : null, `${main}fr`, right > 0 ? `${right}fr` : null]
+    .filter((track) => track !== null)
+    .join(" ");
+
+  return (
+    <Box
+      className={classes.gutterPreview}
+      aria-label={t("layout.field.gutters.preview.label")}
+      style={{ gridTemplateColumns: tracks }}
+    >
+      {left > 0 && <Box className={classes.previewGutter} data-side="left" />}
+      <Box className={classes.previewCanvas}>
+        <Box />
+        <Box />
+        <Box />
+        <Box />
+      </Box>
+      {right > 0 && <Box className={classes.previewGutter} data-side="right" />}
+    </Box>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_settings-form.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_settings-form.tsx
new file mode 100644
index 000000000..dfb4a8147
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_settings-form.tsx
@@ -0,0 +1,224 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { Button, Stack } from "@mantine/core";
+import type { z } from "zod/v4";
+
+import type { RouterOutputs } from "@homarr/api";
+import { useUpdateBoard } from "@homarr/boards/updater";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { env } from "@homarr/common/env";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { boardSaveLayoutsSchema, boardSavePartialSettingsSchema } from "@homarr/validation/board";
+
+import { homarrLogoPath } from "~/components/layout/logo/homarr-logo";
+import { SectionCard } from "~/components/manage/section-card";
+import { UnsavedChangesBar } from "~/components/manage/unsaved-changes-bar";
+
+import type { Board } from "../../_types";
+import { ColorSettingsContent } from "./_appereance";
+import { BackgroundSettingsContent } from "./_background";
+import { BehaviorSettingsContent } from "./_behavior";
+import { BoardAccessSettings } from "./_board-access";
+import { CustomCssSettingsContent } from "./_customCss";
+import { DangerZoneSettingsContent } from "./_danger";
+import { GeneralSettingsContent } from "./_general";
+import { LayoutSettingsContent } from "./_layout";
+import { useSaveLayoutsMutation, useSavePartialSettingsMutation } from "./_shared";
+
+const boardSettingsFormSchema = boardSavePartialSettingsSchema
+  .extend({
+    layouts: boardSaveLayoutsSchema.shape.layouts,
+  })
+  .required();
+
+export type FormValues = z.infer<typeof boardSettingsFormSchema>;
+
+const PARTIAL_FORM_KEYS = [
+  "pageTitle",
+  "metaTitle",
+  "logoImageUrl",
+  "faviconImageUrl",
+  "backgroundImageUrl",
+  "backgroundImageAttachment",
+  "backgroundImageRepeat",
+  "backgroundImageSize",
+  "primaryColor",
+  "secondaryColor",
+  "opacity",
+  "iconColor",
+  "itemRadius",
+  "customCss",
+  "disableStatus",
+] as const;
+
+const buildInitialValues = (board: Board): FormValues => ({
+  pageTitle: board.pageTitle ?? "",
+  metaTitle: board.metaTitle ?? "",
+  logoImageUrl: board.logoImageUrl ?? "",
+  faviconImageUrl: board.faviconImageUrl ?? "",
+  backgroundImageUrl: board.backgroundImageUrl ?? "",
+  backgroundImageAttachment: board.backgroundImageAttachment,
+  backgroundImageRepeat: board.backgroundImageRepeat,
+  backgroundImageSize: board.backgroundImageSize,
+  primaryColor: board.primaryColor,
+  secondaryColor: board.secondaryColor,
+  opacity: board.opacity,
+  iconColor: board.iconColor ?? "",
+  itemRadius: board.itemRadius,
+  customCss: board.customCss ?? "",
+  disableStatus: board.disableStatus,
+  layouts: board.layouts,
+});
+
+interface BoardSettingsFormProps {
+  board: Board;
+  permissions: RouterOutputs["board"]["getBoardPermissions"];
+  hasFullAccess: boolean;
+  hideVisibility: boolean;
+}
+
+export const BoardSettingsForm = ({ board, permissions, hasFullAccess, hideVisibility }: BoardSettingsFormProps) => {
+  const t = useI18n();
+  const tSection = useScopedI18n("board.setting.section");
+  const { updateBoard } = useUpdateBoard();
+  const savePartialSettings = useSavePartialSettingsMutation(board);
+  const saveLayouts = useSaveLayoutsMutation(board);
+
+  const form = useZodForm(boardSettingsFormSchema, {
+    initialValues: buildInitialValues(board),
+    onValuesChange({ pageTitle }) {
+      updateBoard((previous) => ({
+        ...previous,
+        pageTitle,
+      }));
+    },
+  });
+
+  const initialValuesRef = useRef(buildInitialValues(board));
+  const lastSavedRef = useRef({ pageTitle: board.pageTitle, logoImageUrl: board.logoImageUrl });
+
+  const isDirtyRef = useRef(false);
+  isDirtyRef.current = form.isDirty();
+
+  useEffect(() => {
+    return () => {
+      updateBoard((previous) => ({
+        ...previous,
+        pageTitle: lastSavedRef.current.pageTitle,
+        logoImageUrl: lastSavedRef.current.logoImageUrl,
+      }));
+    };
+  }, [updateBoard]);
+
+  useEffect(() => {
+    const handler = (event: BeforeUnloadEvent) => {
+      if (env.NODE_ENV === "development") return;
+      if (isDirtyRef.current) event.preventDefault();
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, []);
+
+  const saveSettingsAsync = async (values: FormValues): Promise<FormValues | null> => {
+    const defaults = initialValuesRef.current;
+    const changed = <TKey extends keyof FormValues>(...fields: TKey[]) =>
+      fields.some((field) => values[field] !== defaults[field]);
+
+    const { layouts, ...partialSettings } = values;
+    const partialSettingsChanged = changed(...PARTIAL_FORM_KEYS);
+    const layoutsChanged = changed("layouts");
+    if (!partialSettingsChanged && !layoutsChanged) return values;
+
+    try {
+      const [, canonicalLayouts] = await Promise.all([
+        partialSettingsChanged
+          ? savePartialSettings.mutateAsync({ id: board.id, ...partialSettings }).then(() => {
+              updateFavicon(values.faviconImageUrl ?? homarrLogoPath);
+            })
+          : Promise.resolve(),
+        layoutsChanged ? saveLayouts.mutateAsync({ id: board.id, layouts }) : Promise.resolve(null),
+      ]);
+      const canonicalValues = canonicalLayouts ? { ...values, layouts: canonicalLayouts } : values;
+
+      lastSavedRef.current = { pageTitle: canonicalValues.pageTitle, logoImageUrl: canonicalValues.logoImageUrl };
+      initialValuesRef.current = canonicalValues;
+      form.setValues(canonicalValues);
+      form.setInitialValues(canonicalValues);
+      form.resetDirty(canonicalValues);
+      await revalidatePathActionAsync(`/boards/${board.name}/settings`);
+      showSuccessNotification({
+        title: t("common.notification.update.success"),
+        message: t("common.notification.update.success"),
+      });
+      return canonicalValues;
+    } catch {
+      showErrorNotification({
+        title: t("common.notification.update.error"),
+        message: t("common.notification.update.error"),
+      });
+      return null;
+    }
+  };
+
+  const handleDiscard = () => {
+    form.setValues(initialValuesRef.current);
+    form.resetDirty();
+    updateBoard((previous) => ({
+      ...previous,
+      pageTitle: lastSavedRef.current.pageTitle,
+      logoImageUrl: lastSavedRef.current.logoImageUrl,
+    }));
+  };
+
+  const isPending = savePartialSettings.isPending || saveLayouts.isPending;
+
+  return (
+    <Stack gap="xl">
+      <form onSubmit={form.onSubmit((values) => void saveSettingsAsync(values))}>
+        <Stack gap="xl">
+          <GeneralSettingsContent board={board} form={form} />
+          <LayoutSettingsContent
+            board={board}
+            form={form}
+            isSaving={isPending}
+            saveSettingsAsync={() => saveSettingsAsync(form.values)}
+          />
+          <BackgroundSettingsContent form={form} />
+          <ColorSettingsContent form={form} />
+          <CustomCssSettingsContent form={form} />
+          <BehaviorSettingsContent form={form} />
+
+          {form.isDirty() && (
+            <UnsavedChangesBar>
+              <Button type="button" disabled={isPending} variant="default" onClick={handleDiscard}>
+                {t("common.action.discard")}
+              </Button>
+              <Button loading={isPending} type="submit" disabled={!form.isValid()}>
+                {t("common.action.saveChanges")}
+              </Button>
+            </UnsavedChangesBar>
+          )}
+        </Stack>
+      </form>
+
+      {hasFullAccess && (
+        <SectionCard title={tSection("access.title")}>
+          <BoardAccessSettings board={board} initialPermissions={permissions} />
+        </SectionCard>
+      )}
+
+      {hasFullAccess && <DangerZoneSettingsContent hideVisibility={hideVisibility} />}
+    </Stack>
+  );
+};
+
+// Previously part of the general settings section; applied on the unified save
+// https://github.com/homarr-labs/homarr/issues/4905
+const updateFavicon = (url: string) => {
+  const link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+  if (!link) return;
+  link.href = url;
+};
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_shared.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_shared.tsx
index 9fa888be2..d0fedf522 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_shared.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_shared.tsx
@@ -11,3 +11,13 @@ export const useSavePartialSettingsMutation = (board: Board) => {
     },
   });
 };
+
+export const useSaveLayoutsMutation = (board: Board) => {
+  const utils = clientApi.useUtils();
+  return clientApi.board.saveLayouts.useMutation({
+    onSettled() {
+      void utils.board.getBoardByName.invalidate({ name: board.name });
+      void utils.board.getHomeBoard.invalidate();
+    },
+  });
+};
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/danger.module.css b/apps/nextjs/src/app/[locale]/boards/[name]/settings/danger.module.css
deleted file mode 100644
index 39a60b735..000000000
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/danger.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@media (min-width: 36em) {
-  .dangerZoneGroup {
-    --group-wrap: nowrap !important;
-  }
-}
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
index a728e8949..609428b2f 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
@@ -1,44 +1,20 @@
-import type { PropsWithChildren } from "react";
 import { notFound } from "next/navigation";
-import { AccordionControl, AccordionItem, AccordionPanel, Container, Stack, Text, Title } from "@mantine/core";
-import {
-  IconAlertTriangle,
-  IconBrush,
-  IconClick,
-  IconFileTypeCss,
-  IconLayout,
-  IconPhoto,
-  IconSettings,
-  IconUser,
-} from "@tabler/icons-react";
+import { Container, Stack, Title } from "@mantine/core";
 import { TRPCError } from "@trpc/server";
 
 import { api } from "@homarr/api/server";
 import { capitalize } from "@homarr/common";
 import { db } from "@homarr/db";
 import { getServerSettingByKeyAsync } from "@homarr/db/queries";
-import type { TranslationObject } from "@homarr/translation";
 import { getScopedI18n } from "@homarr/translation/server";
-import type { TablerIcon } from "@homarr/ui";
 
 import { getBoardPermissionsAsync } from "~/components/board/permissions/server";
-import { ActiveTabAccordion } from "../../../../../components/active-tab-accordion";
-import { ColorSettingsContent } from "./_appereance";
-import { BackgroundSettingsContent } from "./_background";
-import { BehaviorSettingsContent } from "./_behavior";
-import { BoardAccessSettings } from "./_board-access";
-import { CustomCssSettingsContent } from "./_customCss";
-import { DangerZoneSettingsContent } from "./_danger";
-import { GeneralSettingsContent } from "./_general";
-import { LayoutSettingsContent } from "./_layout";
+import { BoardSettingsForm } from "./_settings-form";
 
 interface Props {
   params: Promise<{
     name: string;
   }>;
-  searchParams: Promise<{
-    tab?: keyof TranslationObject["board"]["setting"]["section"];
-  }>;
 }
 
 const getBoardAndPermissionsAsync = async (params: Awaited<Props["params"]>) => {
@@ -57,11 +33,7 @@ const getBoardAndPermissionsAsync = async (params: Awaited<Props["params"]>) =>
   } catch (error) {
     // Ignore not found errors and redirect to 404
     // error is already logged in _layout-creator.tsx
-    if (error instanceof TRPCError && error.code === "NOT_FOUND") {
-      notFound();
-    }
-
-    if (error instanceof TRPCError && error.code === "BAD_REQUEST") {
+    if (error instanceof TRPCError && (error.code === "NOT_FOUND" || error.code === "BAD_REQUEST")) {
       notFound();
     }
 
@@ -70,7 +42,6 @@ const getBoardAndPermissionsAsync = async (params: Awaited<Props["params"]>) =>
 };
 
 export default async function BoardSettingsPage(props: Props) {
-  const searchParams = await props.searchParams;
   const params = await props.params;
   const { board, permissions } = await getBoardAndPermissionsAsync(params);
   const boardSettings = await getServerSettingByKeyAsync(db, "board");
@@ -82,79 +53,16 @@ export default async function BoardSettingsPage(props: Props) {
   }
 
   return (
-    <Container>
+    <Container fluid px={{ base: "md", md: "xl" }}>
       <Stack>
         <Title>{t("title", { boardName: capitalize(board.name) })}</Title>
-        <ActiveTabAccordion variant="separated" defaultValue={searchParams.tab ?? "general"}>
-          <AccordionItemFor value="general" icon={IconSettings}>
-            <GeneralSettingsContent board={board} />
-          </AccordionItemFor>
-          <AccordionItemFor value="layout" icon={IconLayout}>
-            <LayoutSettingsContent board={board} />
-          </AccordionItemFor>
-          <AccordionItemFor value="background" icon={IconPhoto}>
-            <BackgroundSettingsContent board={board} />
-          </AccordionItemFor>
-          <AccordionItemFor value="appearance" icon={IconBrush}>
-            <ColorSettingsContent board={board} />
-          </AccordionItemFor>
-          <AccordionItemFor value="customCss" icon={IconFileTypeCss}>
-            <CustomCssSettingsContent board={board} />
-          </AccordionItemFor>
-          <AccordionItemFor value="behavior" icon={IconClick}>
-            <BehaviorSettingsContent board={board} />
-          </AccordionItemFor>
-          {hasFullAccess && (
-            <>
-              <AccordionItemFor value="access" icon={IconUser}>
-                <BoardAccessSettings board={board} initialPermissions={permissions} />
-              </AccordionItemFor>
-              <AccordionItemFor value="dangerZone" icon={IconAlertTriangle} danger noPadding>
-                <DangerZoneSettingsContent
-                  hideVisibility={
-                    boardSettings.homeBoardId === board.id || boardSettings.mobileHomeBoardId === board.id
-                  }
-                />
-              </AccordionItemFor>
-            </>
-          )}
-        </ActiveTabAccordion>
+        <BoardSettingsForm
+          board={board}
+          permissions={permissions}
+          hasFullAccess={hasFullAccess}
+          hideVisibility={boardSettings.homeBoardId === board.id || boardSettings.mobileHomeBoardId === board.id}
+        />
       </Stack>
     </Container>
   );
 }
-
-type AccordionItemForProps = PropsWithChildren<{
-  value: keyof TranslationObject["board"]["setting"]["section"];
-  icon: TablerIcon;
-  danger?: boolean;
-  noPadding?: boolean;
-}>;
-
-const AccordionItemFor = async ({ value, children, icon: Icon, danger, noPadding }: AccordionItemForProps) => {
-  const t = await getScopedI18n("board.setting.section");
-  return (
-    <AccordionItem
-      value={value}
-      styles={
-        danger
-          ? {
-              item: {
-                "--__item-border-color": "rgba(248,81,73,0.4)",
-                borderWidth: 4,
-              },
-            }
-          : undefined
-      }
-    >
-      <AccordionControl icon={<Icon />}>
-        <Text fw="bold" size="lg">
-          {t(`${value}.title`)}
-        </Text>
-      </AccordionControl>
-      <AccordionPanel styles={noPadding ? { content: { paddingRight: 0, paddingLeft: 0 } } : undefined}>
-        {children}
-      </AccordionPanel>
-    </AccordionItem>
-  );
-};
diff --git a/apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx b/apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx
index 3cddc6685..c06a20196 100644
--- a/apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx
@@ -1,19 +1,24 @@
 import type { JSX, PropsWithChildren } from "react";
+import { cookies, headers } from "next/headers";
 import { notFound, redirect } from "next/navigation";
 import { AppShellMain } from "@mantine/core";
 import { TRPCError } from "@trpc/server";
 
+import { getRscUserSettingsAsync } from "@homarr/api/user-server";
 import { auth } from "@homarr/auth/next";
-import { BoardProvider } from "@homarr/boards/context";
-import { EditModeProvider } from "@homarr/boards/edit-mode";
+import { constructBoardPermissions } from "@homarr/auth/shared";
+import { boardViewportWidthCookieName, getLayoutIdForViewportWidth } from "@homarr/boards/layout-selection";
 import { createLogger } from "@homarr/core/infrastructure/logs";
+import { ModalProvider } from "@homarr/modals";
 
 import { MainHeader } from "~/components/layout/header";
 import { BoardLogoWithTitle } from "~/components/layout/logo/board-logo";
 import { ClientShell } from "~/components/layout/shell";
-import { BoardTourProvider } from "~/components/onboarding/board-tour";
+import { BoardTourGate } from "~/components/onboarding/board-tour-gate";
+import { env } from "~/env";
 import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";
 import type { Board } from "./_types";
+import { BoardProviders } from "./_providers";
 import type { Params } from "./(content)/_creator";
 import { CustomCss } from "./(content)/_custom-css";
 import { BoardReadyProvider } from "./(content)/_ready-context";
@@ -21,11 +26,6 @@ import { BoardMantineProvider } from "./(content)/_theme";
 
 const logger = createLogger({ module: "createBoardLayout" });
 
-const BoardTourWrapper = ({ hasSession, children }: PropsWithChildren<{ hasSession: boolean }>) => {
-  if (!hasSession) return <>{children}</>;
-  return <BoardTourProvider>{children}</BoardTourProvider>;
-};
-
 interface CreateBoardLayoutProps<TParams extends Params> {
   headerActions: JSX.Element;
   getInitialBoardAsync: (params: TParams) => Promise<Board>;
@@ -43,8 +43,34 @@ export const createBoardLayout = <TParams extends Params>({
   }: PropsWithChildren<{
     params: Promise<TParams>;
   }>) => {
-    const session = await auth();
-    const initialBoard = await getInitialBoard(await params).catch((error) => {
+    const resolvedParams = await params;
+    const sessionPromise = auth();
+    const initialBoardPromise = getInitialBoard(resolvedParams).then(
+      (board) => ({ status: "fulfilled", board }) as const,
+      (error: unknown) => ({ status: "rejected", error }) as const,
+    );
+    const colorSchemePromise = getCurrentColorSchemeAsync();
+    const initialViewportWidthPromise = getInitialViewportWidthAsync();
+    const shouldRunBoardTourPromise = sessionPromise.then(async (session) => {
+      if (!withTour || !session || env.DEMO_MODE) return false;
+
+      try {
+        const user = await getRscUserSettingsAsync(session.user.id);
+        return user !== undefined && !user.completedBoardTour;
+      } catch (error) {
+        logger.error(new Error("Failed to load the board tour status", { cause: error }));
+        return false;
+      }
+    });
+    const [session, initialBoardResult, colorScheme, shouldRunBoardTour, initialViewportWidth] = await Promise.all([
+      sessionPromise,
+      initialBoardPromise,
+      colorSchemePromise,
+      shouldRunBoardTourPromise,
+      initialViewportWidthPromise,
+    ]);
+    if (initialBoardResult.status === "rejected") {
+      const { error } = initialBoardResult;
       if (error instanceof TRPCError && error.code === "NOT_FOUND") {
         if (!session) {
           logger.debug("No home board found for anonymous user, redirecting to login");
@@ -60,31 +86,57 @@ export const createBoardLayout = <TParams extends Params>({
       }
 
       throw error;
-    });
-    const colorScheme = await getCurrentColorSchemeAsync();
+    }
+    const initialBoard = initialBoardResult.board;
+    const { hasChangeAccess } = constructBoardPermissions(initialBoard, session);
+    const initialLayoutId = getLayoutIdForViewportWidth(initialBoard.layouts, initialViewportWidth);
 
     return (
-      <BoardProvider initialBoard={initialBoard}>
+      <BoardProviders
+        initialBoard={initialBoard}
+        initialLayoutId={initialLayoutId}
+        initialViewportWidth={initialViewportWidth}
+        canModify={hasChangeAccess}
+      >
         <BoardReadyProvider>
-          <EditModeProvider>
-            <BoardMantineProvider defaultColorScheme={colorScheme}>
+          <BoardMantineProvider defaultColorScheme={colorScheme}>
+            <ModalProvider>
               <CustomCss />
-              <BoardTourWrapper hasSession={withTour && !!session}>
+              <BoardTourGate enabled={shouldRunBoardTour}>
                 <ClientShell hasNavigation={false}>
                   <MainHeader
                     logo={<BoardLogoWithTitle size="md" hideTitleOnMobile />}
                     actions={headerActions}
                     hasNavigation={false}
                   />
-                  <AppShellMain>{children}</AppShellMain>
+                  <AppShellMain data-advanced-focus-background>{children}</AppShellMain>
                 </ClientShell>
-              </BoardTourWrapper>
-            </BoardMantineProvider>
-          </EditModeProvider>
+              </BoardTourGate>
+            </ModalProvider>
+          </BoardMantineProvider>
         </BoardReadyProvider>
-      </BoardProvider>
+      </BoardProviders>
     );
   };
 
   return Layout;
 };
+
+const getInitialViewportWidthAsync = async () => {
+  const cookieValue = (await cookies()).get(boardViewportWidthCookieName)?.value;
+  const cookieWidth = Number(cookieValue);
+  if (Number.isInteger(cookieWidth) && cookieWidth >= 200 && cookieWidth <= 10_000) {
+    return cookieWidth;
+  }
+
+  const requestHeaders = await headers();
+  const clientHintWidth = Number(requestHeaders.get("sec-ch-viewport-width"));
+  if (Number.isInteger(clientHintWidth) && clientHintWidth >= 200 && clientHintWidth <= 10_000) {
+    return clientHintWidth;
+  }
+
+  const userAgent = requestHeaders.get("user-agent") ?? "";
+  if (/iPad|Tablet|PlayBook|Silk/i.test(userAgent)) return 1024;
+  if (/Mobi|Android|iPhone|iPod|IEMobile|Opera Mini/i.test(userAgent)) return 390;
+  return 1440;
+};
diff --git a/apps/nextjs/src/app/[locale]/boards/_layout-utils.spec.ts b/apps/nextjs/src/app/[locale]/boards/_layout-utils.spec.ts
new file mode 100644
index 000000000..ff33fa20e
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/boards/_layout-utils.spec.ts
@@ -0,0 +1,111 @@
+import { describe, expect, test } from "vitest";
+
+import { BoardMockBuilder } from "~/components/board/items/actions/test/mocks/board-mock";
+import { ContainerSectionMockBuilder } from "~/components/board/items/actions/test/mocks/container-section-mock";
+import { EmptySectionMockBuilder } from "~/components/board/items/actions/test/mocks/empty-section-mock";
+import { ItemMockBuilder } from "~/components/board/items/actions/test/mocks/item-mock";
+import { getRepresentativeLayoutWidth, projectBoardLayout } from "./_layout-utils";
+
+const mobile = {
+  id: "mobile",
+  name: "Mobile",
+  columnCount: 3,
+  leftGutterColumnCount: 0,
+  rightGutterColumnCount: 0,
+  breakpoint: 0,
+  role: "mobile" as const,
+};
+const custom = {
+  id: "tablet",
+  name: "Tablet",
+  columnCount: 6,
+  leftGutterColumnCount: 0,
+  rightGutterColumnCount: 0,
+  breakpoint: 480,
+  role: "custom" as const,
+};
+const base = {
+  id: "base",
+  name: "Base",
+  columnCount: 12,
+  leftGutterColumnCount: 0,
+  rightGutterColumnCount: 0,
+  breakpoint: 768,
+  role: "base" as const,
+};
+
+describe("layout representative widths", () => {
+  test("uses a phone width, activation midpoint, and desktop minimum", () => {
+    const layouts = [mobile, custom, base];
+    expect(getRepresentativeLayoutWidth(mobile, layouts)).toBe(390);
+    expect(getRepresentativeLayoutWidth(custom, layouts)).toBe(624);
+    expect(getRepresentativeLayoutWidth(base, layouts)).toBe(1280);
+  });
+});
+
+describe("projectBoardLayout", () => {
+  test("returns exact saved positions without recursively re-projecting the active layout", () => {
+    const rootSection = new EmptySectionMockBuilder({ id: "root" }).build();
+    const container = new ContainerSectionMockBuilder({ id: "container" })
+      .addLayout({ layoutId: mobile.id, parentSectionId: rootSection.id, width: 3, height: 2 })
+      .build();
+    const board = new BoardMockBuilder().addLayout(mobile).addSections([rootSection, container]).build();
+
+    expect(projectBoardLayout(board, mobile, mobile)).toEqual([
+      expect.objectContaining({ id: container.id, sectionId: rootSection.id, width: 3, height: 2 }),
+    ]);
+  });
+
+  test("uses production ordering and sizing for items and containers", () => {
+    const rootSection = new EmptySectionMockBuilder({ id: "root" }).build();
+    const container = new ContainerSectionMockBuilder({ id: "container" })
+      .addLayout({ layoutId: base.id, parentSectionId: rootSection.id, width: 6, height: 3, xOffset: 6, yOffset: 0 })
+      .build();
+    const rootItem = new ItemMockBuilder({ id: "root-item", kind: "clock" })
+      .addLayout({ layoutId: base.id, sectionId: rootSection.id, width: 5, height: 2, xOffset: 0, yOffset: 0 })
+      .build();
+    const nestedItem = new ItemMockBuilder({ id: "nested-item", kind: "clock" })
+      .addLayout({ layoutId: base.id, sectionId: container.id, width: 4, height: 1, xOffset: 0, yOffset: 0 })
+      .build();
+    const board = new BoardMockBuilder()
+      .addLayout(mobile)
+      .addSections([rootSection, container])
+      .addItems([rootItem, nestedItem])
+      .build();
+
+    const projected = projectBoardLayout(board, base, mobile);
+
+    expect(projected.find((element) => element.id === rootItem.id)).toMatchObject({
+      type: "item",
+      width: 3,
+      height: 2,
+      xOffset: 0,
+      yOffset: 0,
+      sectionId: rootSection.id,
+    });
+    expect(projected.find((element) => element.id === container.id)).toMatchObject({
+      type: "section",
+      width: 3,
+      xOffset: 0,
+      yOffset: 2,
+      sectionId: rootSection.id,
+    });
+    expect(projected.find((element) => element.id === nestedItem.id)).toMatchObject({
+      type: "item",
+      width: 3,
+      sectionId: container.id,
+    });
+  });
+
+  test("ignores missing saved positions and supports empty boards", () => {
+    const rootSection = new EmptySectionMockBuilder({ id: "root" }).build();
+    const itemWithoutBasePosition = new ItemMockBuilder({ id: "missing", kind: "clock" }).build();
+    const board = new BoardMockBuilder()
+      .addLayout(mobile)
+      .addSection(rootSection)
+      .addItem(itemWithoutBasePosition)
+      .build();
+
+    expect(projectBoardLayout(board, base, mobile)).toEqual([]);
+  });
+});
diff --git a/apps/nextjs/src/app/[locale]/boards/_layout-utils.ts b/apps/nextjs/src/app/[locale]/boards/_layout-utils.ts
new file mode 100644
index 000000000..8e1d45fe8
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/boards/_layout-utils.ts
@@ -0,0 +1,122 @@
+import { generateResponsiveGridFor } from "@homarr/common";
+import type { GridAlgorithmItem } from "@homarr/common";
+import type { BoardLane } from "@homarr/definitions";
+import { boardLanes, getBoardLaneColumnCount, getRootSectionLane } from "@homarr/definitions";
+
+import type { Board } from "./_types";
+
+export type BoardLayout = Board["layouts"][number];
+type LayoutGeometry = Pick<BoardLayout, "id" | "columnCount" | "leftGutterColumnCount" | "rightGutterColumnCount">;
+
+export const getRepresentativeLayoutWidth = (layout: BoardLayout, allLayouts: BoardLayout[]) => {
+  if (layout.role === "mobile") return 390;
+  if (layout.role === "base") return Math.max(1280, layout.breakpoint);
+
+  const nextLayout = allLayouts
+    .filter((candidate) => candidate.breakpoint > layout.breakpoint)
+    .toSorted((layoutA, layoutB) => layoutA.breakpoint - layoutB.breakpoint)
+    .at(0);
+
+  return nextLayout ? Math.round((layout.breakpoint + nextLayout.breakpoint) / 2) : Math.max(1280, layout.breakpoint);
+};
+
+export const projectBoardLayout = (board: Board, sourceLayout: LayoutGeometry, targetLayout: LayoutGeometry) => {
+  const elements = getElementsForLayout(board, sourceLayout.id);
+
+  if (
+    sourceLayout.id === targetLayout.id &&
+    sourceLayout.columnCount === targetLayout.columnCount &&
+    sourceLayout.leftGutterColumnCount === targetLayout.leftGutterColumnCount &&
+    sourceLayout.rightGutterColumnCount === targetLayout.rightGutterColumnCount
+  ) {
+    return elements;
+  }
+
+  const emptyRoots = board.sections
+    .filter((section) => section.kind === "empty")
+    .toSorted((first, second) => first.xOffset - second.xOffset || first.id.localeCompare(second.id));
+  const rootByLane = new Map<BoardLane, (typeof emptyRoots)[number]>();
+  for (const root of emptyRoots) {
+    const lane = getRootSectionLane(root.xOffset);
+    if (!rootByLane.has(lane)) rootByLane.set(lane, root);
+  }
+
+  const mainRoot = rootByLane.get("main");
+  if (!mainRoot) return [];
+
+  const sourceRootById = new Map(
+    emptyRoots.map((section) => [section.id, getRootSectionLane(section.xOffset)] as const),
+  );
+  const targetLaneBySourceLane = new Map<BoardLane, BoardLane>(
+    boardLanes.map((lane) => [
+      lane,
+      lane !== "main" && getBoardLaneColumnCount(targetLayout, lane) === 0 ? "main" : lane,
+    ]),
+  );
+  const remappedElements = elements.map((element) => {
+    const sourceLane = sourceRootById.get(element.sectionId);
+    if (!sourceLane) return element;
+    const targetLane = targetLaneBySourceLane.get(sourceLane) ?? "main";
+    return { ...element, sectionId: (rootByLane.get(targetLane) ?? mainRoot).id };
+  });
+
+  return boardLanes.flatMap((lane) => {
+    const root = rootByLane.get(lane);
+    const width = getBoardLaneColumnCount(targetLayout, lane);
+    if (!root || width === 0) return [];
+
+    const sourceLanes = boardLanes.filter(
+      (sourceLane) =>
+        rootByLane.has(sourceLane) &&
+        getBoardLaneColumnCount(sourceLayout, sourceLane) > 0 &&
+        targetLaneBySourceLane.get(sourceLane) === lane,
+    );
+    const previousWidth =
+      sourceLanes.length === 1
+        ? getBoardLaneColumnCount(sourceLayout, sourceLanes[0] ?? "main")
+        : Number.MAX_SAFE_INTEGER;
+
+    return generateResponsiveGridFor({
+      items: remappedElements,
+      previousWidth,
+      width,
+      sectionId: root.id,
+    }).items;
+  });
+};
+
+const getElementsForLayout = (board: Board, layoutId: string): GridAlgorithmItem[] => [
+  ...board.items.flatMap((item) => {
+    const layout = item.layouts.find((candidate) => candidate.layoutId === layoutId);
+    return layout
+      ? [
+          {
+            id: item.id,
+            type: "item" as const,
+            height: layout.height,
+            width: layout.width,
+            xOffset: layout.xOffset,
+            yOffset: layout.yOffset,
+            sectionId: layout.sectionId,
+          },
+        ]
+      : [];
+  }),
+  ...board.sections.flatMap((section) => {
+    if (section.kind !== "container") return [];
+    const layout = section.layouts.find((candidate) => candidate.layoutId === layoutId);
+    return layout?.parentSectionId
+      ? [
+          {
+            id: section.id,
+            type: "section" as const,
+            height: layout.height,
+            width: layout.width,
+            xOffset: layout.xOffset,
+            yOffset: layout.yOffset,
+            sectionId: layout.parentSectionId,
+          },
+        ]
+      : [];
+  }),
+];
diff --git a/apps/nextjs/src/app/[locale]/boards/_providers.tsx b/apps/nextjs/src/app/[locale]/boards/_providers.tsx
new file mode 100644
index 000000000..c79644636
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/boards/_providers.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { useSearchParams } from "next/navigation";
+import { useMediaQuery } from "@mantine/hooks";
+
+import { BoardProvider } from "@homarr/boards/context";
+import { EditModeProvider } from "@homarr/boards/edit-mode";
+
+import type { Board } from "./_types";
+
+interface Props {
+  initialBoard: Board;
+  initialLayoutId: string;
+  initialViewportWidth: number;
+  canModify: boolean;
+}
+
+export const BoardProviders = ({
+  children,
+  initialBoard,
+  initialLayoutId,
+  initialViewportWidth,
+  canModify,
+}: PropsWithChildren<Props>) => {
+  const searchParams = useSearchParams();
+  const isDesktop = useMediaQuery("(min-width: 64em)");
+  const requestedLayoutId = searchParams.get("layout");
+  const isRequestedLayoutValid = initialBoard.layouts.some((layout) => layout.id === requestedLayoutId);
+  const isLayoutEditRequest = canModify && searchParams.get("edit") === "true" && isRequestedLayoutValid;
+  const layoutOverrideId = isLayoutEditRequest && isDesktop ? requestedLayoutId : null;
+
+  return (
+    <BoardProvider
+      initialBoard={initialBoard}
+      initialLayoutId={initialLayoutId}
+      initialViewportWidth={initialViewportWidth}
+      layoutOverrideId={layoutOverrideId}
+    >
+      <EditModeProvider initialOpen={isLayoutEditRequest}>{children}</EditModeProvider>
+    </BoardProvider>
+  );
+};
diff --git a/apps/nextjs/src/app/[locale]/boards/_types.ts b/apps/nextjs/src/app/[locale]/boards/_types.ts
index 7c202fe95..d1770d1e9 100644
--- a/apps/nextjs/src/app/[locale]/boards/_types.ts
+++ b/apps/nextjs/src/app/[locale]/boards/_types.ts
@@ -7,10 +7,9 @@ export type Item = Board["items"][number];
 export type ItemLayout = Item["layouts"][number];
 export type SectionItem = Omit<Item, "layouts"> & ItemLayout & { type: "item" };
 
-export type CategorySection = Extract<Section, { kind: "category" }>;
 export type EmptySection = Extract<Section, { kind: "empty" }>;
-export type DynamicSection = Extract<Section, { kind: "dynamic" }>;
-export type DynamicSectionLayout = DynamicSection["layouts"][number];
-export type DynamicSectionItem = Omit<DynamicSection, "layouts"> & DynamicSectionLayout & { type: "section" };
+export type ContainerSection = Extract<Section, { kind: "container" }>;
+export type ContainerSectionLayout = ContainerSection["layouts"][number];
+export type ContainerSectionItem = Omit<ContainerSection, "layouts"> & ContainerSectionLayout & { type: "section" };
 
 export type ItemOfKind<TKind extends WidgetKind> = Extract<Item, { kind: TKind }>;
diff --git a/apps/nextjs/src/app/[locale]/custom-widget-configuration/[token]/configuration-entry.tsx b/apps/nextjs/src/app/[locale]/custom-widget-configuration/[token]/configuration-entry.tsx
new file mode 100644
index 000000000..a8e243495
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/custom-widget-configuration/[token]/configuration-entry.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Alert,
+  Button,
+  Card,
+  Center,
+  PasswordInput,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  ThemeIcon,
+  Title,
+} from "@mantine/core";
+import { IconCheck, IconKey, IconLock } from "@tabler/icons-react";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+interface RequestDetails {
+  widgetName: string;
+  sourceName: string;
+  kinds: Array<"apiKey" | "username" | "password">;
+  expiresAt: number;
+  status: "pending" | "completed";
+  source: {
+    baseUrl: string;
+    networkScope: "public" | "private" | "loopback";
+  };
+}
+
+export function CustomWidgetConfigurationEntry({ token }: { token: string }) {
+  const t = useScopedI18n("customWidget.secretEntry");
+  const [details, setDetails] = useState<RequestDetails | null>(null);
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [baseUrl, setBaseUrl] = useState("");
+  const [networkScope, setNetworkScope] = useState<"public" | "private" | "loopback">("public");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    void fetch(`/api/custom-widgets/configuration-request/${encodeURIComponent(token)}`)
+      .then(async (response) => {
+        const body = (await response.json()) as RequestDetails | { error: string };
+        if (!response.ok || "error" in body) throw new Error("error" in body ? body.error : t("unavailable"));
+        setDetails(body);
+        setBaseUrl(body.source.baseUrl);
+        setNetworkScope(body.source.networkScope);
+      })
+      .catch((cause: unknown) => setError(cause instanceof Error ? cause.message : t("unavailable")))
+      .finally(() => setLoading(false));
+  }, [t, token]);
+
+  const submit = async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      const response = await fetch(`/api/custom-widgets/configuration-request/${encodeURIComponent(token)}`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ baseUrl, networkScope, secrets: values }),
+      });
+      const body = (await response.json()) as { status?: string; error?: string };
+      if (!response.ok) throw new Error(body.error ?? t("saveError"));
+      setDetails((current) => (current ? { ...current, status: "completed" } : current));
+      setValues({});
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : t("saveError"));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Center mih="100dvh" p="md">
+      <Card withBorder shadow="md" radius="lg" p="xl" w="100%" maw={480}>
+        <Stack gap="lg">
+          <ThemeIcon size={48} radius="xl" variant="light">
+            <IconLock size={24} />
+          </ThemeIcon>
+          <Stack gap={4}>
+            <Title order={1} size="h2">
+              {t("title")}
+            </Title>
+            <Text c="dimmed">{t("description")}</Text>
+          </Stack>
+          {loading && <Text c="dimmed">{t("loading")}</Text>}
+          {error && <Alert color="red">{error}</Alert>}
+          {details?.status === "completed" && (
+            <Alert color="green" icon={<IconCheck size={18} />}>
+              {t("saved")}
+            </Alert>
+          )}
+          {details?.status === "pending" && (
+            <Stack gap="md">
+              <Card withBorder bg="var(--mantine-color-default-hover)">
+                <Text fw={600}>{details.widgetName}</Text>
+                <Text size="sm" c="dimmed">
+                  {t("source", { name: details.sourceName })}
+                </Text>
+              </Card>
+              <TextInput
+                label={t("baseUrl")}
+                type="url"
+                value={baseUrl}
+                onChange={(event) => setBaseUrl(event.currentTarget.value)}
+                required
+              />
+              <Select
+                label={t("networkScope")}
+                data={["public", "private", "loopback"]}
+                value={networkScope}
+                allowDeselect={false}
+                onChange={(value) => value && setNetworkScope(value as typeof networkScope)}
+              />
+              {details.kinds.map((kind) => {
+                const Input = kind === "username" ? TextInput : PasswordInput;
+                return (
+                  <Input
+                    key={kind}
+                    label={t(`field.${kind}`)}
+                    leftSection={<IconKey size={16} />}
+                    value={values[kind] ?? ""}
+                    onChange={(event) => setValues((current) => ({ ...current, [kind]: event.currentTarget.value }))}
+                    autoComplete="off"
+                    required
+                  />
+                );
+              })}
+              <Button
+                loading={saving}
+                disabled={!URL.canParse(baseUrl) || details.kinds.some((kind) => !values[kind])}
+                onClick={() => void submit()}
+              >
+                {t("save")}
+              </Button>
+              <Text size="xs" c="dimmed">
+                {t("expires", { time: new Date(details.expiresAt).toLocaleTimeString() })}
+              </Text>
+            </Stack>
+          )}
+        </Stack>
+      </Card>
+    </Center>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/custom-widget-configuration/[token]/page.tsx b/apps/nextjs/src/app/[locale]/custom-widget-configuration/[token]/page.tsx
new file mode 100644
index 000000000..6485ec80e
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/custom-widget-configuration/[token]/page.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+
+import { auth } from "@homarr/auth/next";
+
+import { CustomWidgetConfigurationEntry } from "./configuration-entry";
+
+export const metadata: Metadata = {
+  title: "Configure custom widget API source",
+  robots: { index: false, follow: false },
+};
+
+export default async function CustomWidgetConfigurationPage({ params }: { params: Promise<{ token: string }> }) {
+  const session = await auth();
+  if (!session?.user.permissions.includes("admin")) redirect(session ? "/" : "/auth/login");
+  const { token } = await params;
+  return <CustomWidgetConfigurationEntry token={token} />;
+}
diff --git a/apps/nextjs/src/app/[locale]/init/page.tsx b/apps/nextjs/src/app/[locale]/init/page.tsx
index 212c74e73..0013c3170 100644
--- a/apps/nextjs/src/app/[locale]/init/page.tsx
+++ b/apps/nextjs/src/app/[locale]/init/page.tsx
@@ -1,8 +1,8 @@
 import type { JSX } from "react";
 import { Box, Center, Stack, Text, Title } from "@mantine/core";
 
-import { api } from "@homarr/api/server";
 import type { MaybePromise } from "@homarr/common/types";
+import { db } from "@homarr/db";
 import type { OnboardingStep } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
 
@@ -29,9 +29,16 @@ const stepComponents: Record<OnboardingStep, null | (() => MaybePromise<JSX.Elem
   finish: InitFinish,
 };
 
+const getCurrentOnboardingStepAsync = async () => {
+  const value = await db.query.onboarding.findFirst();
+  if (!value) return { current: "start" as const, previous: null };
+
+  return { current: value.step, previous: value.previousStep };
+};
+
 export default async function InitPage() {
   const t = await getScopedI18n("init.step");
-  const currentStep = await api.onboard.currentStep();
+  const currentStep = await getCurrentOnboardingStepAsync();
 
   const CurrentComponent = stepComponents[currentStep.current];
 
diff --git a/apps/nextjs/src/app/[locale]/layout.tsx b/apps/nextjs/src/app/[locale]/layout.tsx
index e665db9e7..1567f74e2 100644
--- a/apps/nextjs/src/app/[locale]/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/layout.tsx
@@ -14,24 +14,28 @@ import type { DayOfWeek } from "@mantine/dates";
 import { NextIntlClientProvider } from "next-intl";
 
 import { api } from "@homarr/api/server";
-import { env } from "@homarr/auth/env";
+import { env as authEnv } from "@homarr/auth/env";
+import { getRscServerSettingsAsync } from "@homarr/api/server-settings-server";
+import { getRscUserSettingsAsync } from "@homarr/api/user-server";
 import { auth } from "@homarr/auth/next";
-import { db } from "@homarr/db";
-import { getServerSettingsAsync } from "@homarr/db/queries";
+import { createLogger } from "@homarr/core/infrastructure/logs";
 import { ModalProvider } from "@homarr/modals";
 import { Notifications } from "@homarr/notifications";
 import { SettingsProvider } from "@homarr/settings";
 import { SpotlightProvider } from "@homarr/spotlight";
 import type { SupportedLanguage } from "@homarr/translation";
 import { isLocaleRTL, isLocaleSupported } from "@homarr/translation";
+import { resolveHomarrUrlConfig } from "@homarr/workshop/schema";
 
 import { Analytics } from "~/components/layout/analytics";
 import type { AssistantAvailability } from "~/components/assistant/assistant-gate";
 import { AssistantGate } from "~/components/assistant/assistant-gate";
 import { CrowdinLiveTranslation } from "~/components/layout/crowdin-live-translation";
+import { env } from "~/env";
 
 import { SearchEngineOptimization } from "~/components/layout/search-engine-optimization";
 import { ServiceWorkerRegistration } from "~/components/layout/service-worker-registration";
+import { ViewportHint } from "~/components/layout/viewport-hint";
 import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";
 import { DayJsLoader } from "./_client-providers/dayjs-loader";
 import { JotaiProvider } from "./_client-providers/jotai";
@@ -45,6 +49,8 @@ const fontSans = Inter({
   variable: "--font-sans",
 });
 
+const logger = createLogger({ module: "rootLayout" });
+
 // eslint-disable-next-line no-restricted-syntax
 export const generateMetadata = async (): Promise<Metadata> => ({
   title: "Homarr",
@@ -54,7 +60,7 @@ export const generateMetadata = async (): Promise<Metadata> => ({
     title: "Homarr Dashboard",
     description:
       "A self-hosted dashboard for the *arr stack and your entire homelab. Integrates with 50+ services, real-time widgets, no config files.",
-    url: "https://homarr.dev",
+    url: env.HOMARR_WEBSITE_URL,
     siteName: "Homarr",
   },
   icons: {
@@ -80,29 +86,45 @@ export default async function Layout(props: {
   children: React.ReactNode;
   params: Promise<{ locale: SupportedLanguage }>;
 }) {
-  if (!isLocaleSupported((await props.params).locale)) {
+  const { locale } = await props.params;
+  if (!isLocaleSupported(locale)) {
     notFound();
   }
 
-  const session = await auth();
-  const user = session ? await api.user.getById({ userId: session.user.id }).catch(() => null) : null;
-  const serverSettings = await getServerSettingsAsync(db);
-  // Resolved on the server so the assistant runtime chunk is never referenced by a page unless the
-  // assistant is actually usable. Reuses the availability check the management page invalidates.
-  // The states stay distinct so a signed-out visitor is told to sign in rather than that the
-  // instance is unconfigured, which the server cannot know for them.
-  const assistantAvailability: AssistantAvailability = !session
-    ? "unauthenticated"
-    : await api.assistant
-        .getAvailability()
-        .then((availability) => (availability.enabled ? ("enabled" as const) : ("unconfigured" as const)))
-        .catch(() => "error" as const);
-  const colorScheme = await getCurrentColorSchemeAsync();
-  const direction = isLocaleRTL((await props.params).locale) ? "rtl" : "ltr";
+  const sessionPromise = auth();
+  const userPromise = sessionPromise.then((session) =>
+    session
+      ? getRscUserSettingsAsync(session.user.id).catch((error: unknown) => {
+          logger.error(new Error("Failed to load the authenticated user in the root layout", { cause: error }));
+          return null;
+        })
+      : null,
+  );
+  const assistantAvailabilityPromise: Promise<AssistantAvailability> = sessionPromise.then((session) =>
+    !session
+      ? "unauthenticated"
+      : api.assistant
+          .getAvailability()
+          .then((availability) => (availability.enabled ? "enabled" : "unconfigured"))
+          .catch(() => "error"),
+  );
+  const [session, user, serverSettings, colorScheme, assistantAvailability] = await Promise.all([
+    sessionPromise,
+    userPromise,
+    getRscServerSettingsAsync(),
+    getCurrentColorSchemeAsync(),
+    assistantAvailabilityPromise,
+  ]);
+  const direction = isLocaleRTL(locale) ? "rtl" : "ltr";
+  const publicUrls = resolveHomarrUrlConfig({
+    homarrWebsiteUrl: env.HOMARR_WEBSITE_URL,
+    workshopApiUrl: env.WORKSHOP_API_URL,
+    workshopWebUrl: env.WORKSHOP_WEB_URL,
+  });
 
   const StackedProvider = composeWrappers([
     (innerProps) => {
-      return <AuthProvider session={session} logoutUrl={env.AUTH_LOGOUT_REDIRECT_URL} {...innerProps} />;
+      return <AuthProvider session={session} logoutUrl={authEnv.AUTH_LOGOUT_REDIRECT_URL} {...innerProps} />;
     },
     (innerProps) => (
       <SettingsProvider
@@ -138,8 +160,6 @@ export default async function Layout(props: {
     (innerProps) => <AssistantGate availability={assistantAvailability} {...innerProps} />,
   ]);
 
-  const { locale } = await props.params;
-
   return (
     // Instead of ColorSchemScript we use data-mantine-color-scheme to prevent flickering
     <html
@@ -152,11 +172,14 @@ export default async function Layout(props: {
       suppressHydrationWarning
     >
       <head>
+        <meta name="homarr-website-url" content={publicUrls.homarrWebsiteUrl} />
+        <meta name="homarr-workshop-api-url" content={publicUrls.workshopApiUrl} />
         <SearchEngineOptimization />
         <CrowdinLiveTranslation locale={locale} />
       </head>
       <body className={[fontSans.className, fontSans.variable].join(" ")} suppressHydrationWarning>
         <Analytics enabled={serverSettings.analytics.enableGeneral} />
+        <ViewportHint />
         <StackedProvider>
           <Notifications pauseResetOnHover="notification" />
           <ServiceWorkerRegistration />
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_beta-banner.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_beta-banner.tsx
index 6ac28cd7c..c26960c4d 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_beta-banner.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_beta-banner.tsx
@@ -1,18 +1,23 @@
+"use client";
+
 import { Alert, Anchor, Text } from "@mantine/core";
 import { IconFlask } from "@tabler/icons-react";
 
+import { useScopedI18n } from "@homarr/translation/client";
+
 const FEEDBACK_URL = "https://github.com/homarr-labs/homarr/discussions/categories/custom-widgets";
 
 export function CustomWidgetBetaBanner() {
+  const t = useScopedI18n("customWidget.betaBanner");
+
   return (
-    <Alert variant="light" color="yellow" title="Custom Widgets are in Beta" icon={<IconFlask />}>
+    <Alert variant="light" color="yellow" title={t("title")} icon={<IconFlask />}>
       <Text size="sm">
-        This feature is experimental and will probably change a lot in the future. If you encounter bugs, wish it did
-        more, or find something confusing, then please complain to us as much as possible! Only feedback posted on the{" "}
+        {t("description")}{" "}
         <Anchor href={FEEDBACK_URL} target="_blank" fw={600}>
-          official discussion thread
+          {t("discussionLink")}
         </Anchor>{" "}
-        will be taken into account. Happy Hacking!
+        {t("closing")}
       </Text>
     </Alert>
   );
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_code-editor.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_code-editor.tsx
new file mode 100644
index 000000000..82d9db64a
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_code-editor.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import type { ComponentProps } from "react";
+
+import { CustomWidgetCodeEditor } from "@homarr/custom-widgets/workbench";
+import { useScopedI18n } from "@homarr/translation/client";
+
+type SharedEditorProps = ComponentProps<typeof CustomWidgetCodeEditor>;
+type CodeEditorProps = Omit<SharedEditorProps, "messages">;
+
+export function CodeEditor(props: CodeEditorProps) {
+  const t = useScopedI18n("customWidget.editor");
+  return (
+    <CustomWidgetCodeEditor
+      {...props}
+      messages={{
+        languageJsx: t("language.jsx"),
+        languageJson: t("language.json"),
+        undo: t("action.undo"),
+        redo: t("action.redo"),
+        components: t("action.components"),
+        componentSearch: t("componentReference.search"),
+        componentEmpty: t("componentReference.empty"),
+        componentCount: (count) => t("componentReference.count", { count }),
+        insertStarter: t("action.insertStarter"),
+        format: t("action.format"),
+        copy: t("action.copy"),
+        copied: t("action.copied"),
+        schema: t("action.schema"),
+        schemaTab: t("reference.schema"),
+        minimalTab: t("reference.minimal"),
+        fullTab: t("reference.full"),
+        errors: (count) => t("status.errors", { count }),
+        warnings: (count) => t("status.warnings", { count }),
+        ready: t("status.ready"),
+        position: (cursor) => t("status.position", cursor),
+        characters: (count, limit) =>
+          limit ? t("status.charactersWithLimit", { count, limit }) : t("status.characters", { count }),
+        diagnosticsTitle: t("diagnostics.title"),
+        diagnostic: (diagnostic) =>
+          `${diagnostic.line ? `${t("diagnostics.line", { line: diagnostic.line })}: ` : ""}${t(
+            `diagnostics.${diagnostic.code}` as never,
+            { value: diagnostic.value ?? "" } as never,
+          )}`,
+      }}
+    />
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.spec.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.spec.ts
deleted file mode 100644
index ed662bfb9..000000000
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.spec.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { describe, expect, test } from "vitest";
-
-import { buildAiPrompt } from "./_copy-ai-prompt-button";
-
-const schema = {
-  type: "object",
-  required: ["name", "url", "displayType", "displayConfig"],
-};
-
-describe("buildAiPrompt", () => {
-  test("asks Homarr Assistant to create a definition and includes the user's request", () => {
-    const prompt = buildAiPrompt(
-      schema,
-      '{"status":"online"}',
-      {
-        $schema: "homarr-custom-widget-v2",
-        name: "Status",
-        url: "https://example.com/status",
-      },
-      "Show a compact green status when the service is online.",
-    );
-
-    expect(prompt).toContain("`customWidget_create`");
-    expect(prompt).toContain("`secrets: []`");
-    expect(prompt).toContain("do not ask for typed confirmation");
-    expect(prompt).toContain('```json\n{"status":"online"}\n```');
-    expect(prompt).toContain('"name": "Status"');
-    expect(prompt).toContain("Show a compact green status when the service is online.");
-  });
-
-  test("asks Homarr Assistant to update the selected definition without replacing its secrets", () => {
-    const prompt = buildAiPrompt(
-      schema,
-      null,
-      {
-        name: "Existing widget",
-        authType: "bearer",
-      },
-      "Use a progress bar.",
-      "widget-definition-id",
-    );
-
-    expect(prompt).toContain("custom widget definition `widget-definition-id`");
-    expect(prompt).toContain("`customWidget_update`");
-    expect(prompt).toContain("Preserve configured secrets by omitting the `secrets` field");
-    expect(prompt).not.toContain('"secrets"');
-  });
-
-  test("keeps copy-to-clipboard prompts useful before a request is entered", () => {
-    const prompt = buildAiPrompt(schema);
-
-    expect(prompt).toContain("PASTE_YOUR_API_RESPONSE_HERE");
-    expect(prompt).toContain("Describe what you want the widget to show or change here.");
-  });
-});
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.spec.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.spec.tsx
new file mode 100644
index 000000000..5e50b6127
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.spec.tsx
@@ -0,0 +1,37 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+import { buildCustomWidgetAiPrompt } from "@homarr/custom-widgets/authoring-prompt";
+
+describe("Copy AI prompt", () => {
+  it("uses one self-contained prompt without an embedded-skill branch", () => {
+    const source = readFileSync(
+      `${process.cwd()}/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.tsx`,
+      "utf8",
+    );
+    expect(source).toContain("buildCustomWidgetAiPrompt");
+    expect(source).not.toContain("embedded-authoring-prompt");
+    expect(source).not.toContain("Menu");
+  });
+
+  it("copies a complete prompt within the public size limit", () => {
+    const prompt = buildCustomWidgetAiPrompt(undefined, null, null, "Create a Pokédex");
+    expect(prompt.length).toBeLessThanOrEqual(12_000);
+    expect(prompt).toContain("exactly one complete `json` fenced block");
+    expect(prompt).toContain("Put the complete JSX source directly in the `template` string");
+  });
+
+  it("keeps AI actions and section navigation readable on narrow screens", () => {
+    const card = readFileSync(
+      `${process.cwd()}/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-ai-card.tsx`,
+      "utf8",
+    );
+    const styles = readFileSync(
+      `${process.cwd()}/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.module.css`,
+      "utf8",
+    );
+    expect(card).toContain("<SimpleGrid cols={{ base: 1, sm: 2 }}>");
+    expect(styles).toContain(".sectionNav > a");
+    expect(styles).toContain("flex: 0 0 auto");
+  });
+});
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.tsx
index 63c0f4e2f..5b12750f9 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.tsx
@@ -1,422 +1,85 @@
 "use client";
 
-import { Alert, Button, Group, Popover, Stack, Text, Textarea } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+import { Button, Group } from "@mantine/core";
 import { IconCopy, IconRobot, IconSparkles } from "@tabler/icons-react";
-import { useEffect, useRef, useState } from "react";
 
-import { clientApi } from "@homarr/api/client";
+import { buildCustomWidgetAiPrompt } from "@homarr/custom-widgets/authoring-prompt";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { useOptionalHomarrAssistant } from "~/components/assistant/assistant-context";
 
-const PROMPT_HEADER = `You are helping configure a Homarr custom widget. Homarr is a self-hosted dashboard that can display data from any API endpoint as a widget.
-
-## Your Task
-Generate a valid JSON configuration for a Homarr custom widget based on the user's description and the API response below. If you need clarification, ask specific questions.
-
-## Output Format
-- Output the JSON inside a \`\`\`json code block for syntax highlighting. If \`\`\`json is not supported, use a generic \`\`\` code block instead.
-- Do NOT include any text before or after the JSON block unless you have clarifying questions.
-- If your environment supports structured/JSON output mode, use it.
-
-## JSON Schema
-The output must conform to this JSON Schema:
-
-`;
-
-const PROMPT_RULES = `
-
-## Key Rules
-- The \`displayConfig.type\` field MUST match the \`displayType\` field exactly
-- All \`jsonPath\` fields use JSONPath syntax (e.g. \`$.data.count\`, \`$.items[*].name\`)
-- The \`$schema\` field should be \`"homarr-custom-widget-v2"\`
-- Do NOT include secrets/passwords in the output — those are configured separately in the UI
-- \`url\` must be a full URL including protocol (e.g. \`https://...\`)
-- For arrays of items, inspect the API response to find the correct paths
-
-## Display Type Guide
-- \`singleValue\`: Show one prominent number/text (e.g. total count, status)
-- \`keyValue\`: Show labeled pairs like "CPU: 45%" — use \`mappings\` array
-- \`table\`: Show tabular data from an array — needs \`tablePath\` for the array and \`columns\` for headers
-- \`statGrid\`: Grid of stat cards with optional colors — great for dashboards (e.g. "Movies: 38, Series: 63")
-- \`progressBars\`: Visual progress bars with value/max — for storage, quotas, etc.
-- \`statusIndicator\`: Green/red dots based on value matching — for service health checks
-- \`countGrid\`: Simple grid of counts — like statGrid but simpler, no colors
-- \`raw\`: Raw JSON display — for debugging or complex data
-- \`actionButton\`: A button that triggers the API call on click — for POST/PUT actions
-- \`customJsx\`: Custom JSX layout using whitelisted Mantine components — full creative control over presentation. Set \`displayConfig.template\` to a JSX string. Access API data via \`{data.fieldName}\` bindings (e.g. \`{data.name}\`, \`{data.items[0].title}\`).
-
-## Custom JSX (\`customJsx\`) — Available Mantine Components
-When using \`customJsx\`, the template supports whitelisted Mantine UI components. These are React components from the Mantine v9 library. Use their props as documented below.
-
-### Layout Components
-- **Stack** — Vertical flex container. Props: \`gap\` (xs|sm|md|lg|xl or number), \`align\` (stretch|center|flex-start|flex-end), \`justify\`
-- **Group** — Horizontal flex container. Props: \`gap\`, \`justify\` (flex-start|center|space-between|space-around|flex-end), \`wrap\` (wrap|nowrap), \`grow\` (boolean)
-- **Flex** — Generic flex container. Props: \`direction\` (row|column), \`gap\`, \`align\`, \`justify\`, \`wrap\`
-- **Grid** + **Grid.Col** — CSS grid layout. Grid props: \`gutter\` (gap). Grid.Col props: \`span\` (1-12 or "auto"), \`offset\`
-- **SimpleGrid** — Auto-column grid. Props: \`cols\` (number), \`spacing\`, \`verticalSpacing\`
-- **Center** — Centers content. Props: \`inline\` (boolean)
-- **Space** — Empty spacing. Props: \`h\` (height), \`w\` (width)
-- **Container** — Max-width wrapper. Props: \`size\` (xs|sm|md|lg|xl), \`fluid\` (boolean)
-- **AspectRatio** — Maintains aspect ratio. Props: \`ratio\` (number, e.g. 16/9)
-
-### Typography Components
-- **Text** — Body text. Props: \`size\` (xs|sm|md|lg|xl), \`fw\` (font-weight number, e.g. 700), \`c\` (color: "dimmed"|"red"|"blue"|...), \`ta\` (text-align), \`tt\` (text-transform: "capitalize"|"uppercase"|"lowercase"), \`td\` (text-decoration), \`lineClamp\` (number), \`truncate\` (boolean), \`span\` (renders as span)
-- **Title** — Heading. Props: \`order\` (1-6, maps to h1-h6), \`size\`, \`c\`, \`ta\`, \`tt\`
-- **Code** — Inline code. Props: \`color\`, \`block\` (boolean for code block)
-- **Highlight** — Text with highlighted substring. Props: \`highlight\` (string or string[])
-- **Mark** — Highlighted text background. Props: \`color\`
-- **Kbd** — Keyboard key display
-- **Blockquote** — Styled quote. Props: \`color\`, \`cite\`, \`icon\`
-- **Anchor** — Link. Props: \`href\`, \`target\`, \`underline\` ("always"|"hover"|"never")
-- **NumberFormatter** — Formatted number display. Props: \`value\` (number), \`prefix\` (e.g. "$"), \`suffix\` (e.g. "%"), \`thousandSeparator\` (boolean or string), \`decimalScale\` (number)
-
-### Data Display Components
-- **Badge** — Label badge. Props: \`color\`, \`variant\` (filled|light|outline|dot|default), \`size\` (xs|sm|md|lg|xl), \`radius\`, \`tt\`
-- **Card** + **Card.Section** — Content card. Card props: \`shadow\` (xs|sm|md|lg|xl), \`padding\`/\`p\`, \`radius\`, \`withBorder\` (boolean). Card.Section props: \`withBorder\`, \`inheritPadding\`
-- **Paper** — Surface container. Props: \`shadow\`, \`p\`, \`radius\`, \`withBorder\`
-- **Alert** — Notification box. Props: \`color\`, \`variant\` (filled|light|outline), \`title\`, \`icon\`
-- **ThemeIcon** — Icon container. Props: \`color\`, \`variant\`, \`size\`, \`radius\`
-- **ColorSwatch** — Color preview. Props: \`color\` (CSS color string)
-- **Table** + **Table.Thead**, **Table.Tbody**, **Table.Tr**, **Table.Th**, **Table.Td** — HTML table. Table props: \`striped\` (boolean), \`withTableBorder\`, \`withColumnBorders\`, \`highlightOnHover\`
-- **List** + **List.Item** — Ordered/unordered list. List props: \`type\` ("ordered"|"unordered"), \`icon\`, \`spacing\`
-- **Timeline** + **Timeline.Item** — Vertical timeline. Timeline props: \`active\` (number), \`bulletSize\`. Item props: \`title\`, \`bullet\`
-- **Accordion** + **.Item** + **.Control** + **.Panel** — Collapsible sections. Item props: \`value\` (string). Control: clickable header. Panel: content.
-- **Indicator** — Dot indicator on content. Props: \`color\`, \`position\`, \`size\`, \`label\`, \`processing\` (boolean)
-- **Pill** — Removable tag. Props: \`size\`, \`withRemoveButton\`
-- **Spoiler** — Show more/less. Props: \`maxHeight\` (number), \`showLabel\`, \`hideLabel\`
-
-### Feedback Components
-- **Progress** + **Progress.Section** — Progress bar. Progress props: \`value\` (0-100), \`color\`, \`size\`, \`radius\`, \`striped\`, \`animated\`. Section props: \`value\`, \`color\`
-- **RingProgress** — Circular progress. Props: \`sections\` (array of {value, color}), \`size\`, \`thickness\`, \`label\` (ReactNode)
-- **Skeleton** — Loading placeholder. Props: \`height\`, \`width\`, \`radius\`, \`visible\` (boolean)
-- **Loader** — Spinner. Props: \`size\`, \`color\`, \`type\` (oval|bars|dots)
-
-### Media Components
-- **Image** — Responsive image. Props: \`src\`, \`alt\`, \`w\` (width), \`h\` (height), \`radius\`, \`fit\` (cover|contain|fill)
-- **Avatar** + **Avatar.Group** — User avatar. Props: \`src\`, \`alt\`, \`size\` (xs|sm|md|lg|xl or number), \`radius\` (sm|xl), \`color\`
-- **BackgroundImage** — Background image container. Props: \`src\`, \`radius\`
-- **Tooltip** — Hover tooltip. Props: \`label\` (string), \`position\` (top|bottom|left|right), \`withArrow\`
-- **Divider** — Horizontal/vertical rule. Props: \`orientation\` (horizontal|vertical), \`label\`, \`labelPosition\`, \`size\`
-- **ScrollArea** — Scrollable container. Props: \`h\` (height), \`type\` (auto|always|scroll|hover)
-
-### Charts (@mantine/charts)
-- **AreaChart**, **BarChart**, **LineChart** — Props: \`data\` (array of objects), \`dataKey\` (x-axis key), \`series\` (array of {name, color}), \`h\` (height), \`curveType\` (for Area/Line)
-- **DonutChart**, **PieChart** — Props: \`data\` (array of {name, value, color}), \`h\`, \`withLabels\`, \`withLabelsLine\`
-- **RadarChart** — Props: \`data\`, \`dataKey\`, \`series\`
-- **RadialBarChart** — Props: \`data\` (array of {name, value, color}), \`h\`
-- **Sparkline** — Props: \`data\` (flat number array), \`h\`, \`w\`, \`color\`, \`curveType\`
-
-### Common Prop Patterns
-- **Spacing/sizing:** Most components accept \`p\` (padding), \`m\` (margin), \`px\`/\`py\`/\`mx\`/\`my\`/\`pt\`/\`pb\`/\`pl\`/\`pr\`/\`mt\`/\`mb\`/\`ml\`/\`mr\` with values xs|sm|md|lg|xl or numbers
-- **Colors:** Use Mantine color names: "red", "blue", "green", "orange", "violet", "pink", "cyan", "grape", "teal", "yellow", "lime", "indigo", "gray", "dark". Add shade suffix: "red.6", "blue.4"
-- **Styles:** Use \`style={{...}}\` for inline CSS. E.g. \`style={{flex: 1, minWidth: 0}}\`
-- **Conditional rendering:** Use ternaries: \`{condition ? <Text>Yes</Text> : <Text>No</Text>}\`
-- **Responsive:** Most size/spacing props accept object: \`{{ base: "sm", md: "lg" }}\`
-
-### Interactive Components (built-in, state-managed)
-These components manage their own internal state — they provide interactivity without event handlers:
-
-**PaginatedList** — Paginates its children with prev/next buttons.
-Props: \`pageSize\` (number, default 6)
-Usage: Wrap a \`.map()\` expression to paginate results.
-\`\`\`jsx
-<PaginatedList pageSize={8}>
-  {data.results.map(item =>
-    <Card withBorder p="xs" mb="xs">
-      <Text>{item.name}</Text>
-    </Card>
-  )}
-</PaginatedList>
-\`\`\`
-
-**TabsContainer + TabPanel** — Tabbed interface with automatic tab switching.
-TabsContainer props: \`defaultTab\` (string, optional — defaults to first tab)
-TabPanel props: \`value\` (string, required — unique tab ID), \`label\` (string, optional — tab display text)
-\`\`\`jsx
-<TabsContainer defaultTab="overview">
-  <TabPanel value="overview" label="Overview">
-    <Text>{data.description}</Text>
-  </TabPanel>
-  <TabPanel value="stats" label="Statistics">
-    <Text>Total: {data.count}</Text>
-  </TabPanel>
-</TabsContainer>
-\`\`\`
-
-**Collapsible** — Expandable/collapsible section with a title.
-Props: \`title\` (string, required), \`defaultOpen\` (boolean, default false)
-\`\`\`jsx
-<Collapsible title="Details" defaultOpen={true}>
-  <Text>{data.details}</Text>
-</Collapsible>
-\`\`\`
-
-**StatBar** — A horizontal stat bar with label/value (great for RPG-style stats, progress).
-Props: \`value\` (number), \`max\` (number, default 100), \`label\` (string), \`color\` (Mantine color)
-\`\`\`jsx
-<StatBar label="HP" value={45} max={100} color="red" />
-<StatBar label="ATK" value={80} max={255} color="orange" />
-\`\`\`
-
-**TypeBadge** — A colored badge that maps common type names to colors (normal, fire, water, electric, grass, ice, fighting, poison, ground, flying, psychic, bug, rock, ghost, dragon, dark, steel, fairy).
-Props: \`type\` (string), \`size\` (xs|sm|md|lg|xl, default sm)
-\`\`\`jsx
-<Group gap="xs">
-  <TypeBadge type="fire" />
-  <TypeBadge type="flying" />
-</Group>
-\`\`\`
-
-**Available bindings in templates:**
-- \`data\` — the full API response JSON object
-- \`String(v)\`, \`Number(v)\`, \`Boolean(v)\` — type coercion helpers
-- \`Math.round\`, \`Math.floor\`, \`Math.ceil\`, \`Math.abs\`, \`Math.min\`, \`Math.max\`, \`Math.pow\`, \`Math.sqrt\`, \`Math.PI\`
-- \`JSON.stringify(v)\`, \`Array.isArray(v)\`, \`Object.keys(v)\`, \`Object.values(v)\`, \`Object.entries(v)\`
-- Expression arrows for \`.map()\`, \`.filter()\`, \`.slice()\` — e.g. \`{data.items.map(item => <Text>{item.name}</Text>)}\`
-- Ternaries for conditionals — e.g. \`{data.count > 0 ? "active" : "idle"}\`
-
-**FORBIDDEN keywords (template will be rejected):** constructor, __proto__, eval, Function, import, require, globalThis, window, document, fetch
-
-**Chart data formats:**
-- BarChart/LineChart/AreaChart: \`data={data.items}\` + \`dataKey="month"\` (x-axis key) + \`series={[{ name: "count", color: "blue" }]}\` where series \`name\` matches a numeric key in each data row
-- DonutChart/PieChart: \`data={data.items}\` where each item is \`{ name: "Label", value: 42, color: "blue" }\` — NO dataKey or series
-- Sparkline: \`data={[1,2,3]}\` — flat number array
-- NumberFormatter: \`<NumberFormatter value={data.price} thousandSeparator prefix="$" />\`
-
-### Full Pokémon Card Example (demonstrating TypeBadge, StatBar, TabsContainer, Collapsible)
-API: \`https://pokeapi.co/api/v2/pokemon/charizard\`
-\`\`\`jsx
-<Stack gap="sm" p="xs">
-  <Group wrap="nowrap">
-    <Avatar src={data.sprites.front_default} size={80} radius="sm" />
-    <Stack gap={4} style={{flex: 1}}>
-      <Title order={3} tt="capitalize">{data.name}</Title>
-      <Text size="xs" c="dimmed">#{String(data.id).padStart(3, "0")}</Text>
-      <Group gap="xs">
-        {data.types.map(t => <TypeBadge type={t.type.name} />)}
-      </Group>
-    </Stack>
-  </Group>
-  <TabsContainer defaultTab="stats">
-    <TabPanel value="stats" label="Stats">
-      <Stack gap="xs" pt="xs">
-        {data.stats.map(s =>
-          <StatBar label={s.stat.name} value={s.base_stat} max={255} color={s.base_stat > 100 ? "green" : "red"} />
-        )}
-      </Stack>
-    </TabPanel>
-    <TabPanel value="abilities" label="Abilities">
-      <Stack gap="xs" pt="xs">
-        {data.abilities.map(a =>
-          <Badge variant={a.is_hidden ? "outline" : "filled"} tt="capitalize">
-            {a.ability.name}{a.is_hidden ? " (hidden)" : ""}
-          </Badge>
-        )}
-      </Stack>
-    </TabPanel>
-    <TabPanel value="moves" label="Moves">
-      <Collapsible title="Move list">
-        <Group gap="xs" pt="xs">
-          {data.moves.slice(0, 20).map(m =>
-            <Badge size="xs" variant="light" tt="capitalize">{m.move.name}</Badge>
-          )}
-        </Group>
-      </Collapsible>
-    </TabPanel>
-  </TabsContainer>
-</Stack>
-\`\`\`
-
-### Paginated List Example
-API: \`https://pokeapi.co/api/v2/pokemon?limit=50\`
-\`\`\`jsx
-<Stack gap="sm" p="xs">
-  <Group justify="space-between">
-    <Title order={3}>Pokédex</Title>
-    <Badge size="lg" color="red">{data.count} Pokémon</Badge>
-  </Group>
-  <PaginatedList pageSize={10}>
-    {data.results.map((pokemon, i) =>
-      <Card withBorder p="xs" mb="xs">
-        <Group wrap="nowrap">
-          <Avatar
-            src={"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + String(i + 1) + ".png"}
-            size="lg"
-            radius="sm"
-          />
-          <Stack gap={0} style={{ flex: 1 }}>
-            <Text fw={700} tt="capitalize">{pokemon.name}</Text>
-            <Text size="xs" c="dimmed">#{String(i + 1)}</Text>
-          </Stack>
-        </Group>
-      </Card>
-    )}
-  </PaginatedList>
-</Stack>
-\`\`\`
-
-## API Response
-`;
-
-const PROMPT_NO_RESPONSE = `Paste the raw JSON response from your API endpoint below:
-
-\`\`\`json
-PASTE_YOUR_API_RESPONSE_HERE
-\`\`\`
-`;
-
-const PROMPT_FOOTER = `
-## Your Request
-`;
-
-const PROMPT_REQUEST_PLACEHOLDER = "Describe what you want the widget to show or change here.";
-
-export function buildAiPrompt(
-  jsonSchema: unknown,
-  rawResponse?: string | null,
-  currentConfig?: Record<string, unknown> | null,
-  request?: string,
-  definitionId?: string,
-) {
-  const schemaStr = JSON.stringify(jsonSchema, null, 2);
-  const responseSection = rawResponse
-    ? `The API returned the following JSON:\n\n\`\`\`json\n${rawResponse}\n\`\`\`\n`
-    : PROMPT_NO_RESPONSE;
-
-  const configSection = currentConfig
-    ? `\n## Current Widget Configuration\nThe widget is currently configured as follows. Use this as a starting point and modify based on the user's request:\n\n\`\`\`json\n${JSON.stringify(currentConfig, null, 2)}\n\`\`\`\n`
-    : "";
-
-  const homarrActionSection = definitionId
-    ? `\n## Homarr Assistant Action\nThis is custom widget definition \`${definitionId}\`. If the customWidget tools are available, validate the proposed configuration and immediately call \`customWidget_update\` with this ID and the changed fields. Calling the tool is the required result and takes priority over the JSON-only output instruction above; do not ask for typed confirmation because Homarr will show its approval UI. Preserve configured secrets by omitting the \`secrets\` field. If tools are unavailable, return the JSON configuration instead.\n`
-    : `\n## Homarr Assistant Action\nIf the customWidget tools are available, validate the proposed configuration and immediately call \`customWidget_create\` with \`secrets: []\`. Calling the tool is the required result and takes priority over the JSON-only output instruction above; do not ask for typed confirmation because Homarr will show its approval UI. If tools are unavailable, return the JSON configuration instead.\n`;
-
-  const requestText = request?.trim() || PROMPT_REQUEST_PLACEHOLDER;
-
-  return (
-    PROMPT_HEADER +
-    schemaStr +
-    PROMPT_RULES +
-    responseSection +
-    configSection +
-    homarrActionSection +
-    PROMPT_FOOTER +
-    requestText
-  );
-}
-
 interface CopyAiPromptButtonProps {
   rawResponse?: string | null;
   currentConfig?: Record<string, unknown> | null;
-  definitionId?: string;
+  request?: string | null;
+  documentationUrl?: string | null;
 }
 
-export const CopyAiPromptButton = ({ rawResponse, currentConfig, definitionId }: CopyAiPromptButtonProps) => {
+export const CopyAiPromptButton = ({
+  rawResponse,
+  currentConfig,
+  request,
+  documentationUrl,
+}: CopyAiPromptButtonProps) => {
   const t = useScopedI18n("customWidget");
   const assistant = useOptionalHomarrAssistant();
-  const [opened, { toggle, close }] = useDisclosure(false);
-  const [request, setRequest] = useState("");
-  const requestInputRef = useRef<HTMLTextAreaElement>(null);
-  const { data: schema, isLoading } = clientApi.customWidget.schema.useQuery();
-
-  useEffect(() => {
-    if (opened) requestInputRef.current?.focus();
-  }, [opened]);
-
-  const getPrompt = () => (schema ? buildAiPrompt(schema, rawResponse, currentConfig, request, definitionId) : null);
+  const prompt = () => buildCustomWidgetAiPrompt(undefined, rawResponse, currentConfig, request, documentationUrl);
 
   const handleAssistant = () => {
-    const prompt = getPrompt();
-    if (!prompt || !assistant?.enabled || request.trim().length === 0) return;
-    if (!assistant.sendPrompt(prompt)) return;
-
-    close();
-    setRequest("");
+    if (!assistant?.enabled || !assistant.sendPrompt(prompt())) return;
     showSuccessNotification({ title: t("action.aiPrompt"), message: t("notification.aiPromptSent") });
   };
 
   const handleCopy = async () => {
-    const prompt = getPrompt();
-    if (!prompt) return;
     try {
-      await navigator.clipboard.writeText(prompt);
-      close();
-      showSuccessNotification({ title: t("action.copyAiPrompt"), message: t("notification.aiPromptCopied") });
+      const value = prompt();
+      await navigator.clipboard.writeText(value);
+      showSuccessNotification({
+        title: t("action.copyAiPrompt"),
+        message: t("notification.aiPromptCopiedWithCount", { count: value.length }),
+      });
     } catch {
       showErrorNotification({ title: t("action.copyAiPrompt"), message: t("notification.aiPromptCopyError") });
     }
   };
 
+  if (!assistant?.enabled) {
+    return (
+      <Button
+        type="button"
+        variant="light"
+        leftSection={<IconSparkles size={16} />}
+        onClick={() => void handleCopy()}
+        fullWidth
+        size="sm"
+      >
+        {t("action.copyAiPrompt")}
+      </Button>
+    );
+  }
+
   return (
-    <Popover opened={opened} onClose={close} width="target" position="bottom" shadow="md" withinPortal>
-      <Popover.Target>
-        <Button
-          type="button"
-          variant="light"
-          leftSection={<IconSparkles size={16} />}
-          onClick={toggle}
-          loading={isLoading}
-          disabled={!schema}
-          fullWidth
-          size="sm"
-        >
-          {t("action.aiPrompt")}
-        </Button>
-      </Popover.Target>
-      <Popover.Dropdown>
-        <Stack gap="sm">
-          <Text size="sm">{t("notification.aiPromptDescription")}</Text>
-          <Textarea
-            ref={requestInputRef}
-            label={t("notification.aiPromptRequestLabel")}
-            placeholder={t("notification.aiPromptRequestPlaceholder")}
-            value={request}
-            onChange={(event) => setRequest(event.currentTarget.value)}
-            autosize
-            minRows={3}
-            maxRows={6}
-            onKeyDown={(event) => {
-              if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
-                event.preventDefault();
-                handleAssistant();
-              }
-            }}
-          />
-          {!rawResponse && (
-            <Text size="xs" c="dimmed" fs="italic">
-              {t("notification.aiPromptNoResponse")}
-            </Text>
-          )}
-          {assistant?.enabled ? (
-            <Button
-              type="button"
-              leftSection={<IconRobot size={16} />}
-              onClick={handleAssistant}
-              disabled={request.trim().length === 0 || assistant.isRunning}
-              fullWidth
-            >
-              {assistant.isRunning ? t("notification.aiPromptAssistantBusy") : t("notification.aiPromptAssistant")}
-            </Button>
-          ) : (
-            <Alert color="gray" icon={<IconRobot size={16} />}>
-              {t("notification.aiPromptAssistantUnavailable")}
-            </Alert>
-          )}
-          <Group justify="flex-end">
-            <Button
-              type="button"
-              variant="default"
-              leftSection={<IconCopy size={16} />}
-              onClick={() => void handleCopy()}
-            >
-              {t("notification.aiPromptCopy")}
-            </Button>
-          </Group>
-        </Stack>
-      </Popover.Dropdown>
-    </Popover>
+    <Group grow gap="xs" wrap="nowrap">
+      <Button
+        type="button"
+        variant="light"
+        leftSection={<IconRobot size={16} />}
+        onClick={handleAssistant}
+        disabled={!request?.trim()}
+        size="sm"
+      >
+        {t("action.aiPrompt")}
+      </Button>
+      <Button
+        type="button"
+        variant="default"
+        leftSection={<IconCopy size={16} />}
+        onClick={() => void handleCopy()}
+        size="sm"
+      >
+        {t("notification.aiPromptCopy")}
+      </Button>
+    </Group>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-actions.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-actions.tsx
index ec8ba59c9..441ccec03 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-actions.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-actions.tsx
@@ -1,24 +1,29 @@
 "use client";
 
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { ActionIcon, Menu } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
 import {
+  IconBuildingStore,
+  IconClipboard,
   IconCopy,
   IconDots,
   IconDownload,
-  IconToggleLeft,
-  IconToggleRight,
+  IconSparkles,
   IconTrash,
   IconUpload,
 } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
+import { formatCustomWidgetImportIssues, parseCustomWidgetClipboardDetailed } from "@homarr/custom-widgets/core";
+import type { HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
 import { useConfirmModal } from "@homarr/modals";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 
-import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
+import { CustomWidgetImportDialog } from "~/components/custom-widgets/custom-widget-import-dialog";
+import { WorkshopPublishModal } from "~/components/workshop/workshop-publish-modal";
 
 const iconProps = { size: 16, stroke: 1.5 };
 
@@ -26,6 +31,8 @@ interface WidgetRef {
   id: string;
   name: string;
   enabled: boolean;
+  valid: boolean;
+  migrationRequired: boolean;
 }
 
 export const CustomWidgetRowActions = ({ widget }: { widget: WidgetRef }) => {
@@ -33,26 +40,71 @@ export const CustomWidgetRowActions = ({ widget }: { widget: WidgetRef }) => {
   const { openConfirmModal } = useConfirmModal();
   const deleteMutation = clientApi.customWidget.delete.useMutation();
   const duplicateMutation = clientApi.customWidget.duplicate.useMutation();
-  const toggleEnabledMutation = clientApi.customWidget.toggleEnabled.useMutation();
   const utils = clientApi.useUtils();
+  const [publishOpened, publishControls] = useDisclosure(false);
+  const [migrationOpened, migrationControls] = useDisclosure(false);
+  const migrationFileInputRef = useRef<HTMLInputElement>(null);
+  const [migratedWidget, setMigratedWidget] = useState<HomarrCustomWidgetV2 | null>(null);
 
-  const handleToggleEnabled = () => {
-    toggleEnabledMutation.mutate(
-      { id: widget.id, enabled: !widget.enabled },
-      {
-        onSuccess: () => {
-          void utils.customWidget.all.invalidate();
-          void utils.widget.customApi.getData.invalidate({ definitionId: widget.id });
-          void revalidatePathActionAsync("/manage/custom-widgets");
-        },
-        onError: () => {
-          showErrorNotification({
-            title: widget.enabled ? t("action.disable") : t("action.enable"),
-            message: t("notification.toggleError"),
-          });
-        },
-      },
-    );
+  const copyMigrationPrompt = async () => {
+    try {
+      const result = await utils.customWidget.legacyMigrationPrompt.fetch({ id: widget.id });
+      await navigator.clipboard.writeText(result.prompt);
+      showSuccessNotification({
+        title: t("action.copyMigrationPrompt"),
+        message: t("notification.migrationPromptCopied"),
+      });
+    } catch (error) {
+      showErrorNotification({
+        title: t("action.copyMigrationPrompt"),
+        message: error instanceof Error ? error.message : t("notification.migrationPromptCopyError"),
+      });
+    }
+  };
+
+  const queueMigratedWidget = (text: string) => {
+    const result = parseCustomWidgetClipboardDetailed(text);
+    if (!result.success) {
+      showErrorNotification({
+        title: t("action.migrate"),
+        message: formatCustomWidgetImportIssues(result.issues),
+      });
+      return;
+    }
+    setMigratedWidget(result.widget);
+    migrationControls.open();
+  };
+
+  const pasteMigratedWidget = async () => {
+    try {
+      queueMigratedWidget(await navigator.clipboard.readText());
+    } catch {
+      showErrorNotification({
+        title: t("action.migrate"),
+        message: t("notification.migrationError"),
+      });
+    }
+  };
+
+  const handleMigrationFile = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.addEventListener("load", (loadEvent) => {
+      try {
+        queueMigratedWidget(loadEvent.target?.result as string);
+      } catch {
+        showErrorNotification({
+          title: t("action.migrate"),
+          message: t("notification.migrationError"),
+        });
+      }
+    });
+    reader.addEventListener("error", () => {
+      showErrorNotification({ title: t("action.migrate"), message: t("notification.migrationError") });
+    });
+    reader.readAsText(file);
+    event.target.value = "";
   };
 
   const handleExport = async () => {
@@ -79,7 +131,7 @@ export const CustomWidgetRowActions = ({ widget }: { widget: WidgetRef }) => {
             title: t("action.duplicate"),
             message: t("notification.duplicated", { name: result.name }),
           });
-          void utils.customWidget.all.invalidate();
+          void utils.customWidget.list.invalidate();
           void revalidatePathActionAsync("/manage/custom-widgets");
         },
         onError: () => {
@@ -94,120 +146,104 @@ export const CustomWidgetRowActions = ({ widget }: { widget: WidgetRef }) => {
       title: t("action.delete"),
       children: t("action.deleteConfirm", { name: widget.name }),
       onConfirm: () => {
-        deleteMutation.mutate(
-          { id: widget.id },
-          {
-            onSuccess: () => {
-              showSuccessNotification({
-                title: t("action.delete"),
-                message: t("notification.deleted", { name: widget.name }),
-              });
-              void utils.customWidget.all.invalidate();
-              void utils.widget.customApi.getData.invalidate({ definitionId: widget.id });
-              void revalidatePathActionAsync("/manage/custom-widgets");
-            },
-            onError: () => {
-              showErrorNotification({ title: t("action.delete"), message: t("notification.deleteError") });
-            },
+        const callbacks = {
+          onSuccess: () => {
+            showSuccessNotification({
+              title: t("action.delete"),
+              message: t("notification.deleted", { name: widget.name }),
+            });
+            void utils.customWidget.list.invalidate();
+            void utils.customWidget.available.invalidate();
+            void utils.widget.customApi.getData.invalidate();
+            void revalidatePathActionAsync("/manage/custom-widgets");
           },
-        );
+          onError: () => {
+            showErrorNotification({ title: t("action.delete"), message: t("notification.deleteError") });
+          },
+        };
+        deleteMutation.mutate({ id: widget.id }, callbacks);
       },
     });
   };
 
-  return (
-    <Menu withinPortal position="bottom-end" shadow="md">
-      <Menu.Target>
-        <ActionIcon variant="subtle" color="gray" aria-label={t("action.menu")}>
-          <IconDots {...iconProps} />
-        </ActionIcon>
-      </Menu.Target>
-      <Menu.Dropdown>
-        <Menu.Item
-          onClick={handleToggleEnabled}
-          leftSection={widget.enabled ? <IconToggleLeft {...iconProps} /> : <IconToggleRight {...iconProps} />}
-          disabled={toggleEnabledMutation.isPending}
-        >
-          {widget.enabled ? t("action.disable") : t("action.enable")}
-        </Menu.Item>
-        <Menu.Divider />
-        <Menu.Item
-          onClick={handleDuplicate}
-          leftSection={<IconCopy {...iconProps} />}
-          disabled={duplicateMutation.isPending}
-        >
-          {t("action.duplicate")}
-        </Menu.Item>
-        <Menu.Item onClick={() => void handleExport()} leftSection={<IconDownload {...iconProps} />}>
-          {t("action.export")}
-        </Menu.Item>
-        <Menu.Divider />
-        <Menu.Item
-          color="red"
-          leftSection={<IconTrash {...iconProps} />}
-          onClick={handleDelete}
-          disabled={deleteMutation.isPending}
-        >
-          {t("action.delete")}
-        </Menu.Item>
-      </Menu.Dropdown>
-    </Menu>
-  );
-};
-
-export const ImportCustomWidgetButton = () => {
-  const t = useScopedI18n("customWidget");
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const utils = clientApi.useUtils();
-  const importMutation = clientApi.customWidget.import.useMutation({
-    onSuccess: () => {
-      showSuccessNotification({ title: t("action.import"), message: t("notification.imported") });
-      void utils.customWidget.all.invalidate();
-      void revalidatePathActionAsync("/manage/custom-widgets");
-    },
-    onError: () => {
-      showErrorNotification({ title: t("action.import"), message: t("notification.importError") });
-    },
-  });
-
-  const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      try {
-        const json = JSON.parse(e.target?.result as string);
-        importMutation.mutate(json);
-      } catch {
-        showErrorNotification({ title: t("action.import"), message: t("notification.importError") });
-      }
-    };
-    reader.onerror = () => {
-      showErrorNotification({ title: t("action.import"), message: t("notification.importError") });
-    };
-    reader.readAsText(file);
-    event.target.value = "";
-  };
-
   return (
     <>
-      <MobileAffixButton
-        variant="default"
-        leftSection={<IconUpload size={16} />}
-        onClick={() => fileInputRef.current?.click()}
-        loading={importMutation.isPending}
-      >
-        {t("action.import")}
-      </MobileAffixButton>
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept=".json"
-        hidden
-        onChange={handleImport}
-        aria-label="Import custom widget"
-      />
+      <Menu withinPortal position="bottom-end" shadow="md">
+        <Menu.Target>
+          <ActionIcon variant="subtle" color="gray" aria-label={t("action.menu")}>
+            <IconDots {...iconProps} />
+          </ActionIcon>
+        </Menu.Target>
+        <Menu.Dropdown>
+          {widget.valid && (
+            <>
+              <Menu.Item
+                onClick={handleDuplicate}
+                leftSection={<IconCopy {...iconProps} />}
+                disabled={duplicateMutation.isPending}
+              >
+                {t("action.duplicate")}
+              </Menu.Item>
+              <Menu.Item onClick={() => void handleExport()} leftSection={<IconDownload {...iconProps} />}>
+                {t("action.export")}
+              </Menu.Item>
+              <Menu.Item onClick={publishControls.open} leftSection={<IconBuildingStore {...iconProps} />}>
+                {t("action.publishWorkshop")}
+              </Menu.Item>
+              <Menu.Divider />
+            </>
+          )}
+          {widget.migrationRequired && (
+            <>
+              <Menu.Item onClick={() => void copyMigrationPrompt()} leftSection={<IconSparkles {...iconProps} />}>
+                {t("action.copyMigrationPrompt")}
+              </Menu.Item>
+              <Menu.Item onClick={() => void pasteMigratedWidget()} leftSection={<IconClipboard {...iconProps} />}>
+                {t("action.pasteMigration")}
+              </Menu.Item>
+              <Menu.Item
+                onClick={() => migrationFileInputRef.current?.click()}
+                leftSection={<IconUpload {...iconProps} />}
+              >
+                {t("action.importMigration")}
+              </Menu.Item>
+              <Menu.Divider />
+            </>
+          )}
+          {!widget.migrationRequired && (
+            <Menu.Item
+              color="red"
+              leftSection={<IconTrash {...iconProps} />}
+              onClick={handleDelete}
+              disabled={deleteMutation.isPending}
+            >
+              {t("action.delete")}
+            </Menu.Item>
+          )}
+        </Menu.Dropdown>
+      </Menu>
+      {widget.valid && <WorkshopPublishModal opened={publishOpened} onClose={publishControls.close} widget={widget} />}
+      {widget.migrationRequired && (
+        <>
+          <input
+            ref={migrationFileInputRef}
+            type="file"
+            accept=".json,.md,text/markdown,application/json"
+            hidden
+            onChange={handleMigrationFile}
+            aria-label={t("action.importMigration")}
+          />
+          <CustomWidgetImportDialog
+            opened={migrationOpened}
+            widget={migratedWidget}
+            legacyId={widget.id}
+            onClose={() => {
+              migrationControls.close();
+              setMigratedWidget(null);
+            }}
+          />
+        </>
+      )}
     </>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-advanced-manifest.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-advanced-manifest.tsx
new file mode 100644
index 000000000..2f2f42e21
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-advanced-manifest.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Accordion } from "@mantine/core";
+
+import { customWidgetDefinitionSchema } from "@homarr/custom-widgets/core";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { CodeEditor } from "./_code-editor";
+import { applyDefinition, parseJson } from "./_custom-widget-form-utils";
+import type { CustomWidgetWorkbenchForm } from "./_custom-widget-form-utils";
+
+export function CustomWidgetAdvancedManifest({ form }: { form: CustomWidgetWorkbenchForm }) {
+  const t = useScopedI18n("customWidget.workbench.builder");
+  const serialized = JSON.stringify(
+    {
+      $schema: "homarr-custom-widget-v2",
+      name: form.values.name,
+      ...(form.values.description ? { description: form.values.description } : {}),
+      ...(form.values.iconUrl ? { iconUrl: form.values.iconUrl } : {}),
+      sources: parseJson(form.values.sources),
+      requests: parseJson(form.values.requests),
+      options: parseJson(form.values.options),
+      template: form.values.template,
+    },
+    null,
+    2,
+  );
+  const [draft, setDraft] = useState(serialized);
+  const [error, setError] = useState<string>();
+  useEffect(() => setDraft(serialized), [serialized]);
+  return (
+    <Accordion variant="contained">
+      <Accordion.Item value="manifest">
+        <Accordion.Control>{t("advancedManifest")}</Accordion.Control>
+        <Accordion.Panel>
+          <CodeEditor
+            id="raw-widget-manifest"
+            label={t("manifestFilename")}
+            language="json"
+            value={draft}
+            error={error}
+            onChange={(next) => {
+              setDraft(next);
+              try {
+                const parsed = customWidgetDefinitionSchema.safeParse(JSON.parse(next) as unknown);
+                if (!parsed.success) {
+                  setError(parsed.error.issues[0]?.message ?? t("invalidWidget"));
+                  return;
+                }
+                setError(undefined);
+                applyDefinition(form, parsed.data);
+              } catch (cause) {
+                setError(cause instanceof Error ? cause.message : t("invalidJson"));
+              }
+            }}
+          />
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-ai-card.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-ai-card.tsx
new file mode 100644
index 000000000..86fa64951
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-ai-card.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { Button, Card, Group, SimpleGrid, Stack, Text, TextInput, Textarea } from "@mantine/core";
+import { IconSparkles } from "@tabler/icons-react";
+
+import type { HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { CopyAiPromptButton } from "./_copy-ai-prompt-button";
+
+interface AiCardProps {
+  candidate: HomarrCustomWidgetV2 | null;
+  request: string;
+  onRequestChange(value: string): void;
+  documentationUrl: string;
+  onDocumentationUrlChange(value: string): void;
+  onPaste(): void;
+}
+
+export function CustomWidgetAiCard(props: AiCardProps) {
+  const t = useScopedI18n("customWidget.workbench.ai");
+  return (
+    <Card withBorder p="md">
+      <Stack gap="sm">
+        <Group gap="xs">
+          <IconSparkles size={18} />
+          <Text fw={600}>{t("title")}</Text>
+        </Group>
+        <Text size="sm" c="dimmed">
+          {t("description")}
+        </Text>
+        <Textarea
+          label={t("request")}
+          value={props.request}
+          onChange={(event) => props.onRequestChange(event.currentTarget.value)}
+          autosize
+          minRows={2}
+        />
+        <TextInput
+          label={t("documentationUrl")}
+          value={props.documentationUrl}
+          onChange={(event) => props.onDocumentationUrlChange(event.currentTarget.value)}
+        />
+        <SimpleGrid cols={{ base: 1, sm: 2 }}>
+          <CopyAiPromptButton
+            currentConfig={props.candidate}
+            request={props.request}
+            documentationUrl={props.documentationUrl}
+          />
+          <Button type="button" variant="light" leftSection={<IconSparkles size={16} />} onClick={props.onPaste}>
+            {t("paste")}
+          </Button>
+        </SimpleGrid>
+      </Stack>
+    </Card>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-analysis.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-analysis.ts
new file mode 100644
index 000000000..915566cda
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-analysis.ts
@@ -0,0 +1,38 @@
+import type { CustomWidgetFormValues, EditorDiagnostic } from "@homarr/custom-widgets/workbench";
+
+import { isRecord, parseJson, parseSources } from "./_custom-widget-form-utils";
+
+export function createCustomWidgetCompletions(values: CustomWidgetFormValues, requestIds: string[]) {
+  const options = parseJson(values.options);
+  const optionKeys = Object.keys(isRecord(options) ? options : {});
+  return [
+    ...requestIds.flatMap((id) => [
+      { label: `data["${id}"]`, type: "variable", detail: `Response from ${id}` },
+      { label: `status["${id}"]`, type: "variable", detail: `Status for ${id}` },
+      { label: `requestId="${id}"`, type: "property", detail: "Named request" },
+    ]),
+    ...parseSources(values.sources).map(({ id }) => ({ label: id, type: "constant", detail: "Source ID" })),
+    ...optionKeys.map((key) => ({ label: `options.${key}`, type: "variable", detail: "Widget option" })),
+    { label: "inputs", type: "variable", detail: "Temporary bound input values" },
+  ];
+}
+
+export function getInvalidCustomWidgetSections(
+  issues: readonly { path: PropertyKey[] }[],
+  requestDiagnostics: EditorDiagnostic[],
+  templateDiagnostics: EditorDiagnostic[],
+) {
+  const result = new Set<string>();
+  for (const issue of issues) {
+    const field = String(issue.path[0] ?? "");
+    if (["name", "description", "iconUrl"].includes(field)) result.add("general");
+    else if (field === "sources") result.add("sources");
+    else if (field === "requests") result.add("requests");
+    else if (field === "options") result.add("options");
+    else if (field === "template") result.add("jsx");
+  }
+  if (requestDiagnostics.some((entry) => entry.severity === "error")) result.add("requests");
+  if (templateDiagnostics.some((entry) => entry.severity === "error")) result.add("jsx");
+  if (result.size > 0) result.add("preview");
+  return result;
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-layout.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-layout.tsx
new file mode 100644
index 000000000..90829066b
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-layout.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import type { ReactNode } from "react";
+import type { Icon } from "@tabler/icons-react";
+import { Button, Card, Group, Stack, Text, ThemeIcon } from "@mantine/core";
+import { IconAlertTriangle, IconCheck, IconPlayerPlay } from "@tabler/icons-react";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+import classes from "./_custom-widget-form.module.css";
+
+export function EditorSection({
+  id,
+  title,
+  icon: SectionIcon,
+  children,
+}: {
+  id: string;
+  title: string;
+  icon: Icon;
+  children: ReactNode;
+}) {
+  return (
+    <Card id={id} component="section" withBorder p="lg" className={classes.editorSection}>
+      <Stack gap="md">
+        <Group gap="sm">
+          <ThemeIcon variant="light" size="lg">
+            <SectionIcon size={18} />
+          </ThemeIcon>
+          <Text fw={700} size="lg">
+            {title}
+          </Text>
+        </Group>
+        {children}
+      </Stack>
+    </Card>
+  );
+}
+
+export function SaveActions({
+  dirty,
+  savePending,
+  previewPending,
+  invalid,
+  mode,
+  onPreview,
+}: {
+  dirty: boolean;
+  savePending: boolean;
+  previewPending: boolean;
+  invalid: boolean;
+  mode: "create" | "edit";
+  onPreview(): void;
+}) {
+  const t = useScopedI18n("customWidget.workbench");
+  return (
+    <Group justify="space-between" wrap="wrap">
+      <Group gap="xs">
+        {invalid ? (
+          <IconAlertTriangle size={16} color="var(--mantine-color-red-6)" />
+        ) : (
+          <IconCheck size={16} color="var(--mantine-color-green-6)" />
+        )}
+        <Text size="sm" fw={600}>
+          {invalid ? t("status.invalid") : dirty ? t("status.unsaved") : t("status.ready")}
+        </Text>
+      </Group>
+      <Group gap="xs" wrap="wrap">
+        <Button
+          type="button"
+          variant="light"
+          leftSection={<IconPlayerPlay size={16} />}
+          onClick={onPreview}
+          loading={previewPending}
+          disabled={invalid || savePending}
+        >
+          {previewPending ? t("action.previewLoading") : t("action.preview")}
+        </Button>
+        <Button type="submit" loading={savePending} disabled={invalid || previewPending}>
+          {mode === "create" ? t("action.create") : t("action.save")}
+        </Button>
+      </Group>
+    </Group>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-references.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-references.ts
new file mode 100644
index 000000000..c6ef0a018
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-references.ts
@@ -0,0 +1,18 @@
+import {
+  CUSTOM_WIDGET_OPTIONS_EXAMPLES,
+  CUSTOM_WIDGET_REQUEST_EXAMPLES,
+  getCustomWidgetOptionsJsonSchema,
+  getCustomWidgetRequestsJsonSchema,
+} from "@homarr/custom-widgets/core";
+
+export const customWidgetRequestReference = {
+  schema: getCustomWidgetRequestsJsonSchema(),
+  minimal: CUSTOM_WIDGET_REQUEST_EXAMPLES.minimal,
+  full: CUSTOM_WIDGET_REQUEST_EXAMPLES.full,
+};
+
+export const customWidgetOptionsSchemaReference = {
+  schema: getCustomWidgetOptionsJsonSchema(),
+  minimal: CUSTOM_WIDGET_OPTIONS_EXAMPLES.minimal,
+  full: CUSTOM_WIDGET_OPTIONS_EXAMPLES.full,
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-utils.spec.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-utils.spec.ts
new file mode 100644
index 000000000..0d0e9b779
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-utils.spec.ts
@@ -0,0 +1,115 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { customWidgetDefinitionSchema } from "@homarr/custom-widgets/core";
+
+import {
+  applyCustomWidgetAiResponse,
+  filterSecretsForSourceAuthentication,
+  getChangedSecrets,
+  getCustomWidgetPreviewOptionIssues,
+  loadPreviewQueries,
+  parseSources,
+} from "./_custom-widget-form-utils";
+
+const previewQuery = vi.hoisted(() => vi.fn());
+vi.mock("@homarr/api/client", () => ({ fetchApi: { customWidget: { previewQuery: { query: previewQuery } } } }));
+
+const definition = customWidgetDefinitionSchema.parse({
+  $schema: "homarr-custom-widget-v2",
+  name: "Preview options",
+  sources: { default: { name: "API", baseUrl: "https://example.com", networkScope: "public", auth: "none" } },
+  requests: { containers: { path: "/endpoints/{option:environmentId}/containers" } },
+  options: { environmentId: { label: "Environment", control: "number", default: 1 } },
+  template: "<Text>Preview</Text>",
+});
+
+describe("Custom Widget workbench preview options", () => {
+  it("loads one complete AI response into every editor field, including JSX", () => {
+    const setValues = vi.fn();
+    const result = applyCustomWidgetAiResponse(
+      {
+        values: {
+          name: "",
+          description: "",
+          iconUrl: "",
+          sources: "{}",
+          requests: "{}",
+          options: "{}",
+          template: "",
+          secrets: [],
+        },
+        setValues,
+      } as never,
+      `\`\`\`json\n${JSON.stringify(definition)}\n\`\`\``,
+    );
+
+    if (!result.success) throw new Error("Expected the complete AI response to be accepted");
+    expect(setValues).toHaveBeenCalledOnce();
+    const values = setValues.mock.calls[0]?.[0];
+    expect(values).toMatchObject({
+      name: "Preview options",
+      description: "",
+      iconUrl: "",
+      template: "<Text>Preview</Text>",
+      secrets: [],
+    });
+    expect(JSON.parse(values?.sources as string)).toEqual(result.widget.sources);
+    expect(JSON.parse(values?.requests as string)).toEqual(result.widget.requests);
+    expect(JSON.parse(values?.options as string)).toEqual(result.widget.options);
+  });
+
+  it("shows the default source first regardless of manifest key order", () => {
+    expect(
+      parseSources(
+        JSON.stringify({
+          secondary: { baseUrl: "https://secondary.example.com", networkScope: "public", auth: "none" },
+          default: { baseUrl: "https://default.example.com", networkScope: "public", auth: "none" },
+        }),
+      ).map(({ id }) => id),
+    ).toEqual(["default", "secondary"]);
+  });
+
+  it("keeps load-query option resolution on the server", async () => {
+    previewQuery.mockResolvedValueOnce({ ok: true, status: 200, data: [] });
+    await loadPreviewQueries(definition, "preview-1");
+    expect(previewQuery).toHaveBeenCalledWith({ sessionId: "preview-1", requestId: "containers", params: {} });
+  });
+
+  it("rejects invalid selected options", () => {
+    expect(getCustomWidgetPreviewOptionIssues(definition, { environmentId: "wrong" })).toEqual([
+      { path: "configuration.environmentId", message: "Expected a number" },
+    ]);
+  });
+
+  it("normalizes only changed secrets", () => {
+    expect(
+      getChangedSecrets({
+        name: "Widget",
+        description: "",
+        iconUrl: "",
+        sources: "{}",
+        requests: "{}",
+        options: "{}",
+        template: "<Text />",
+        secrets: [
+          { sourceId: "default", kind: "apiKey", value: "", hasValue: true },
+          { sourceId: "other", kind: "password", value: "replacement" },
+        ],
+      }),
+    ).toEqual([{ sourceId: "other", kind: "password", value: "replacement" }]);
+  });
+
+  it("drops credentials that do not apply after an authentication transition", () => {
+    expect(
+      filterSecretsForSourceAuthentication(
+        [
+          { sourceId: "default", kind: "username", value: "admin", hasValue: true },
+          { sourceId: "default", kind: "password", value: "secret", hasValue: true },
+          { sourceId: "secondary", kind: "apiKey", value: "unchanged", hasValue: true },
+        ],
+        "default",
+        "bearer",
+      ),
+    ).toEqual([{ sourceId: "secondary", kind: "apiKey", value: "unchanged", hasValue: true }]);
+  });
+});
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-utils.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-utils.ts
new file mode 100644
index 000000000..eba48aa67
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-utils.ts
@@ -0,0 +1,128 @@
+import { fetchApi } from "@homarr/api/client";
+import {
+  customWidgetDefinitionSchema,
+  getCustomWidgetDefaultOptions,
+  getCustomWidgetRequiredSecretKinds,
+  parseCustomWidgetAiResponse,
+  validateCustomWidgetOptions,
+} from "@homarr/custom-widgets/core";
+import type { CustomWidgetSource, HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
+import type { CustomWidgetFormValues } from "@homarr/custom-widgets/workbench";
+import type { UseFormReturnType } from "@mantine/form";
+
+export type CustomWidgetWorkbenchForm = UseFormReturnType<CustomWidgetFormValues>;
+
+export function buildDefinition(values: CustomWidgetFormValues) {
+  return customWidgetDefinitionSchema.safeParse({
+    $schema: "homarr-custom-widget-v2",
+    name: values.name,
+    description: values.description || undefined,
+    iconUrl: values.iconUrl || undefined,
+    sources: parseJson(values.sources),
+    requests: parseJson(values.requests),
+    options: parseJson(values.options),
+    template: values.template,
+  });
+}
+
+export function getChangedSecrets(values: CustomWidgetFormValues) {
+  return values.secrets
+    .filter((secret) => secret.value.trim())
+    .map(({ sourceId, kind, value }) => ({
+      sourceId,
+      kind: kind as "apiKey" | "username" | "password",
+      value,
+    }));
+}
+
+export function filterSecretsForSourceAuthentication(
+  secrets: CustomWidgetFormValues["secrets"],
+  sourceId: string,
+  authType: Parameters<typeof getCustomWidgetRequiredSecretKinds>[0],
+) {
+  const requiredKinds = new Set<string>(getCustomWidgetRequiredSecretKinds(authType));
+  return secrets.filter((secret) => secret.sourceId !== sourceId || requiredKinds.has(secret.kind));
+}
+
+export function applyDefinition(form: CustomWidgetWorkbenchForm, widget: HomarrCustomWidgetV2) {
+  form.setValues({
+    ...form.values,
+    name: widget.name,
+    description: widget.description ?? "",
+    iconUrl: widget.iconUrl ?? "",
+    sources: JSON.stringify(widget.sources, null, 2),
+    requests: JSON.stringify(widget.requests, null, 2),
+    options: JSON.stringify(widget.options, null, 2),
+    template: widget.template,
+  });
+}
+
+export function applyCustomWidgetAiResponse(form: CustomWidgetWorkbenchForm, response: string) {
+  const result = parseCustomWidgetAiResponse(response);
+  if (result.success) applyDefinition(form, result.widget);
+  return result;
+}
+
+export function parseSources(value: string): Array<CustomWidgetSource & { id: string }> {
+  const parsed = parseJson(value);
+  return isRecord(parsed)
+    ? Object.entries(parsed)
+        .flatMap(([id, entry]) => (isRecord(entry) ? [{ id, ...(entry as CustomWidgetSource) }] : []))
+        .toSorted((left, right) => Number(right.id === "default") - Number(left.id === "default"))
+    : [];
+}
+
+export function parseJson(value: string): unknown {
+  try {
+    return JSON.parse(value) as unknown;
+  } catch {
+    return null;
+  }
+}
+
+export function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+export function getCustomWidgetPreviewOptionIssues(definition: HomarrCustomWidgetV2, options: Record<string, unknown>) {
+  return validateCustomWidgetOptions(definition.options, options);
+}
+
+export function isRuntimeParams(
+  value: unknown,
+  expectedNames: readonly string[],
+): value is Record<string, string | number | boolean> {
+  if (!isRecord(value)) return false;
+  const names = Object.keys(value).toSorted();
+  return (
+    names.length === expectedNames.length &&
+    names.every((name, index) => name === expectedNames[index]) &&
+    Object.values(value).every((entry) => ["string", "number", "boolean"].includes(typeof entry))
+  );
+}
+
+export async function loadPreviewQueries(definition: HomarrCustomWidgetV2, sessionId: string) {
+  const data: Record<string, unknown> = {};
+  const status: Record<string, unknown> = {};
+  for (const [requestId] of Object.entries(definition.requests).filter(
+    ([, entry]) => entry.kind === "query" && entry.trigger === "load",
+  )) {
+    try {
+      const result = await fetchApi.customWidget.previewQuery.query({ sessionId, requestId, params: {} });
+      data[requestId] = result.data;
+      status[requestId] = { loading: false, ...result };
+    } catch (error) {
+      data[requestId] = null;
+      status[requestId] = {
+        loading: false,
+        ok: false,
+        error: error instanceof Error ? error.message : "Request failed",
+      };
+    }
+  }
+  return { data, status };
+}
+
+export function getDefinitionDefaults(definition: HomarrCustomWidgetV2) {
+  return getCustomWidgetDefaultOptions(definition.options);
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.module.css b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.module.css
new file mode 100644
index 000000000..90a81b026
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.module.css
@@ -0,0 +1,115 @@
+.form {
+  min-width: 0;
+}
+
+.sectionNav {
+  position: sticky;
+  top: 0.5rem;
+  z-index: 20;
+  display: flex;
+  gap: 0.25rem;
+  margin-bottom: var(--mantine-spacing-md);
+  padding: 0.35rem;
+  overflow-x: auto;
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-md);
+  background: color-mix(in srgb, var(--mantine-color-body) 94%, transparent);
+  backdrop-filter: blur(10px);
+}
+
+.sectionNav > a {
+  flex: 0 0 auto;
+}
+
+.editorSection {
+  scroll-margin-top: 5rem;
+}
+
+.previewCanvas {
+  display: flex;
+  justify-content: center;
+  overflow-x: auto;
+  padding: var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-md);
+  background: var(--mantine-color-default-hover);
+}
+
+.workbench {
+  display: grid;
+  gap: var(--mantine-spacing-xl);
+  align-items: start;
+}
+
+.paneSwitcher {
+  position: sticky;
+  top: var(--mantine-spacing-xs);
+  z-index: 10;
+  margin-bottom: var(--mantine-spacing-lg);
+  background: var(--mantine-color-body);
+}
+
+@media (max-width: 74.9375em) {
+  .sectionNav {
+    top: 3.5rem;
+  }
+
+  .workbench[data-mobile-pane="configure"] .previewPane,
+  .workbench[data-mobile-pane="preview"] .configuration {
+    display: none;
+  }
+}
+
+.configuration,
+.previewPane {
+  min-width: 0;
+}
+
+.previewPane {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-md);
+}
+
+.actionBar {
+  position: sticky;
+  bottom: var(--mantine-spacing-sm);
+  z-index: 10;
+  background: var(--mantine-color-body);
+}
+
+.mobileSaveBar {
+  position: sticky;
+  bottom: var(--mantine-spacing-sm);
+  z-index: 10;
+  background: var(--mantine-color-body);
+}
+
+@media (min-width: 75em) {
+  .paneSwitcher {
+    display: none;
+  }
+
+  .mobileSaveBar {
+    display: none;
+  }
+
+  .workbench {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .previewPane {
+    position: sticky;
+    top: 5rem;
+  }
+
+  .actionBar {
+    top: 5rem;
+    bottom: auto;
+  }
+}
+
+@media (min-width: 100em) {
+  .workbench {
+    grid-template-columns: 0.9fr 1.1fr;
+  }
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx
index 95a2efd5d..86e5a2231 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx
@@ -1,1415 +1,284 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { Accordion, Box, Button, Paper, SegmentedControl, Stack, TextInput, Textarea } from "@mantine/core";
 import {
-  ActionIcon,
-  Box,
-  Button,
-  Fieldset,
-  Group,
-  NumberInput,
-  PasswordInput,
-  SegmentedControl,
-  Select,
-  Stack,
-  Switch,
-  Text,
-  TextInput,
-  Textarea,
-} from "@mantine/core";
-import { IconPlayerPlay, IconPlus, IconTrash } from "@tabler/icons-react";
-import { z } from "zod/v4";
+  IconAlertCircle,
+  IconApi,
+  IconBraces,
+  IconCode,
+  IconDatabase,
+  IconEye,
+  IconSettings,
+} from "@tabler/icons-react";
 
-import { clientApi } from "@homarr/api/client";
+import {
+  analyzeJsxTemplate,
+  analyzeRequestManifest,
+  customWidgetFormSchema,
+  DEFAULT_CUSTOM_WIDGET_FORM_VALUES,
+} from "@homarr/custom-widgets/workbench";
+import { customWidgetOptionsSchema, getCustomWidgetDefaultOptions } from "@homarr/custom-widgets/core";
+import type { CustomWidgetFormValues } from "@homarr/custom-widgets/workbench";
 import { useZodForm } from "@homarr/form";
 import { IconPicker } from "@homarr/forms-collection";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 
-import type {
-  CustomWidgetAuthType,
-  CustomWidgetDisplayType,
-  CustomWidgetMethod,
-  CustomWidgetSecretKind,
-} from "@homarr/validation/custom-widget";
-import type { displayConfigSchema } from "@homarr/validation/custom-widget";
-import { JsonPathTreePicker } from "@homarr/widgets/_inputs/json-path-tree-picker";
-
-import { CopyAiPromptButton } from "./_copy-ai-prompt-button";
-import { CustomWidgetPreview } from "./_custom-widget-preview";
-import type { PreviewFetchResult } from "./_custom-widget-preview";
-
-const requiredFieldValidators: Record<string, (data: Record<string, unknown>, ctx: z.core.$RefinementCtx) => void> = {
-  singleValue: (data, ctx) => {
-    if (!data.jsonPath)
-      ctx.addIssue({
-        code: "too_small",
-        minimum: 1,
-        origin: "string",
-        inclusive: true,
-        input: data.jsonPath,
-        path: ["jsonPath"],
-      });
-  },
-  keyValue: (data, ctx) => {
-    (data.mappings as Array<{ label: string; jsonPath: string }>)?.forEach((m, i) => {
-      if (!m.label)
-        ctx.addIssue({
-          code: "too_small",
-          minimum: 1,
-          origin: "string",
-          inclusive: true,
-          input: m.label,
-          path: ["mappings", i, "label"],
-        });
-      if (!m.jsonPath)
-        ctx.addIssue({
-          code: "too_small",
-          minimum: 1,
-          origin: "string",
-          inclusive: true,
-          input: m.jsonPath,
-          path: ["mappings", i, "jsonPath"],
-        });
-    });
-  },
-  table: (data, ctx) => {
-    if (!data.tablePath)
-      ctx.addIssue({
-        code: "too_small",
-        minimum: 1,
-        origin: "string",
-        inclusive: true,
-        input: data.tablePath,
-        path: ["tablePath"],
-      });
-    (data.columns as Array<{ header: string; jsonPath: string }>)?.forEach((c, i) => {
-      if (!c.header)
-        ctx.addIssue({
-          code: "too_small",
-          minimum: 1,
-          origin: "string",
-          inclusive: true,
-          input: c.header,
-          path: ["columns", i, "header"],
-        });
-      if (!c.jsonPath)
-        ctx.addIssue({
-          code: "too_small",
-          minimum: 1,
-          origin: "string",
-          inclusive: true,
-          input: c.jsonPath,
-          path: ["columns", i, "jsonPath"],
-        });
-    });
-  },
-  statGrid: (data, ctx) => {
-    (data.statGridItems as Array<{ label: string; jsonPath: string }>)?.forEach((item, i) => {
-      if (!item.label)
-        ctx.addIssue({
-          code: "too_small",
-          minimum: 1,
-          origin: "string",
-          inclusive: true,
-          input: item.label,
-          path: ["statGridItems", i, "label"],
-        });
-      if (!item.jsonPath)
-        ctx.addIssue({
-          code: "too_small",
-          minimum: 1,
-          origin: "string",
-          inclusive: true,
-          input: item.jsonPath,
-          path: ["statGridItems", i, "jsonPath"],
-        });
-    });
-  },
-  progressBars: (data, ctx) => {
-    (data.progressBars as Array<{ label: string; valuePath: string }>)?.forEach((bar, i) => {
-      if (!bar.label)
-        ctx.addIssue({
-          code: "too_small",
-          minimum: 1,
-          origin: "string",
-          inclusive: true,
-          input: bar.label,
-          path: ["progressBars", i, "label"],
-        });
-      if (!bar.valuePath)
-        ctx.addIssue({
-          code: "too_small",
-          minimum: 1,
-          origin: "string",
-          inclusive: true,
-          input: bar.valuePath,
-          path: ["progressBars", i, "valuePath"],
-        });
-    });
-  },
-  statusIndicator: (data, ctx) => {
-    (
-      data.statusItems as Array<{
-        label: string;
-        jsonPath: string;
-        goodValues: string;
-      }>
-    )?.forEach((item, i) => {
-      if (!item.label)
-        ctx.addIssue({
-          code: "too_small",
-          minimum: 1,
-          origin: "string",
-          inclusive: true,
-          input: item.label,
-          path: ["statusItems", i, "label"],
-        });
-      if (!item.jsonPath)
-        ctx.addIssue({
-          code: "too_small",
-          minimum: 1,
-          origin: "string",
-          inclusive: true,
-          input: item.jsonPath,
-          path: ["statusItems", i, "jsonPath"],
-        });
-      if (!item.goodValues)
-        ctx.addIssue({
-          code: "too_small",
-          minimum: 1,
-          origin: "string",
-          inclusive: true,
-          input: item.goodValues,
-          path: ["statusItems", i, "goodValues"],
-        });
-    });
-  },
-  countGrid: (data, ctx) => {
-    (data.countGridItems as Array<{ label: string; jsonPath: string }>)?.forEach((item, i) => {
-      if (!item.label)
-        ctx.addIssue({
-          code: "too_small",
-          minimum: 1,
-          origin: "string",
-          inclusive: true,
-          input: item.label,
-          path: ["countGridItems", i, "label"],
-        });
-      if (!item.jsonPath)
-        ctx.addIssue({
-          code: "too_small",
-          minimum: 1,
-          origin: "string",
-          inclusive: true,
-          input: item.jsonPath,
-          path: ["countGridItems", i, "jsonPath"],
-        });
-    });
-  },
-  raw: (data, ctx) => {
-    if (!data.rawJsonPath)
-      ctx.addIssue({
-        code: "too_small",
-        minimum: 1,
-        origin: "string",
-        inclusive: true,
-        input: data.rawJsonPath,
-        path: ["rawJsonPath"],
-      });
-  },
-  actionButton: (data, ctx) => {
-    if (!data.buttonLabel)
-      ctx.addIssue({
-        code: "too_small",
-        minimum: 1,
-        origin: "string",
-        inclusive: true,
-        input: data.buttonLabel,
-        path: ["buttonLabel"],
-      });
-  },
-  customJsx: (data, ctx) => {
-    if (!data.template)
-      ctx.addIssue({
-        code: "too_small",
-        minimum: 1,
-        origin: "string",
-        inclusive: true,
-        input: data.template,
-        path: ["template"],
-      });
-  },
-};
-
-const formSchema = z
-  .object({
-    name: z.string().min(1).max(128),
-    description: z.string(),
-    iconUrl: z.string(),
-    url: z.string().min(1),
-    authType: z.string(),
-    headerName: z.string(),
-    method: z.string(),
-    requestBody: z.string(),
-    displayType: z.string(),
-    jsonPath: z.string(),
-    label: z.string(),
-    unit: z.string(),
-    valueSize: z.string(),
-    labelPosition: z.string(),
-    mappings: z.array(z.object({ label: z.string(), jsonPath: z.string(), unit: z.string() })),
-    kvLayout: z.string(),
-    kvColumns: z.number(),
-    tablePath: z.string(),
-    columns: z.array(z.object({ header: z.string(), jsonPath: z.string() })),
-    striped: z.boolean(),
-    compact: z.boolean(),
-    statGridItems: z.array(
-      z.object({
-        label: z.string(),
-        jsonPath: z.string(),
-        unit: z.string(),
-        color: z.string(),
-      }),
-    ),
-    statGridColumns: z.number(),
-    cardStyle: z.string(),
-    progressBars: z.array(
-      z.object({
-        label: z.string(),
-        valuePath: z.string(),
-        maxPath: z.string(),
-        unit: z.string(),
-        color: z.string(),
-      }),
-    ),
-    showPercentage: z.boolean(),
-    barSize: z.string(),
-    statusItems: z.array(
-      z.object({
-        label: z.string(),
-        jsonPath: z.string(),
-        goodValues: z.string(),
-      }),
-    ),
-    statusLayout: z.string(),
-    dotSize: z.string(),
-    countGridItems: z.array(z.object({ label: z.string(), jsonPath: z.string(), unit: z.string() })),
-    countGridColumns: z.number(),
-    countValueSize: z.string(),
-    rawJsonPath: z.string(),
-    rawMaxHeight: z.number(),
-    buttonLabel: z.string(),
-    buttonColor: z.string(),
-    confirmText: z.string(),
-    successMessage: z.string(),
-    template: z.string(),
-    secrets: z.array(
-      z.object({
-        kind: z.string(),
-        value: z.string(),
-        hasValue: z.boolean().optional(),
-      }),
-    ),
-  })
-  .superRefine((data, ctx) => {
-    const validator = requiredFieldValidators[data.displayType];
-    validator?.(data as unknown as Record<string, unknown>, ctx);
-  });
-
-const authTypeSecretFields: Record<string, Array<{ kind: string; labelKey: string; isPassword: boolean }>> = {
-  bearer: [{ kind: "apiKey", labelKey: "apiKey", isPassword: true }],
-  basic: [
-    { kind: "username", labelKey: "username", isPassword: false },
-    { kind: "password", labelKey: "password", isPassword: true },
-  ],
-  apiKeyHeader: [{ kind: "apiKey", labelKey: "apiKey", isPassword: true }],
-  apiKeyQuery: [{ kind: "apiKey", labelKey: "apiKey", isPassword: true }],
-};
-
-const showHeaderName: Record<string, boolean> = {
-  apiKeyHeader: true,
-  apiKeyQuery: true,
-};
-
-const defaultCreateValues: z.infer<typeof formSchema> = {
-  name: "",
-  description: "",
-  iconUrl: "",
-  url: "",
-  authType: "none",
-  headerName: "",
-  method: "GET",
-  requestBody: "",
-  displayType: "singleValue",
-  jsonPath: "$",
-  label: "",
-  unit: "",
-  valueSize: "lg",
-  labelPosition: "below",
-  mappings: [{ label: "", jsonPath: "$", unit: "" }],
-  kvLayout: "list",
-  kvColumns: 2,
-  tablePath: "$",
-  columns: [{ header: "", jsonPath: "$" }],
-  striped: true,
-  compact: false,
-  statGridItems: [{ label: "", jsonPath: "$", unit: "", color: "blue" }],
-  statGridColumns: 2,
-  cardStyle: "filled",
-  progressBars: [{ label: "", valuePath: "$", maxPath: "", unit: "", color: "blue" }],
-  showPercentage: true,
-  barSize: "md",
-  statusItems: [{ label: "", jsonPath: "$", goodValues: "online,true" }],
-  statusLayout: "list",
-  dotSize: "md",
-  countGridItems: [{ label: "", jsonPath: "$", unit: "" }],
-  countGridColumns: 2,
-  countValueSize: "md",
-  rawJsonPath: "$",
-  rawMaxHeight: 300,
-  buttonLabel: "Execute",
-  buttonColor: "blue",
-  confirmText: "",
-  successMessage: "",
-  template: "",
-  secrets: [],
-};
+import { CodeEditor } from "./_code-editor";
+import { CustomWidgetAiCard } from "./_custom-widget-ai-card";
+import { CustomWidgetAdvancedManifest } from "./_custom-widget-advanced-manifest";
+import { createCustomWidgetCompletions, getInvalidCustomWidgetSections } from "./_custom-widget-form-analysis";
+import { EditorSection, SaveActions } from "./_custom-widget-form-layout";
+import { customWidgetOptionsSchemaReference, customWidgetRequestReference } from "./_custom-widget-form-references";
+import { buildDefinition, getDefinitionDefaults, isRecord, parseJson } from "./_custom-widget-form-utils";
+import { CustomWidgetOptionsEditor } from "./_custom-widget-options-editor";
+import { CustomWidgetPreviewPanel } from "./_custom-widget-preview-panel";
+import type { PreviewState } from "./_custom-widget-preview-panel";
+import { CustomWidgetRequestsEditor } from "./_custom-widget-requests-editor";
+import { createCustomWidgetRenameHandlers } from "./_custom-widget-rename-handlers";
+import { CustomWidgetSaveIssuesAlert } from "./_custom-widget-save-issues-alert";
+import { CustomWidgetSourcesEditor } from "./_custom-widget-sources-editor";
+import { useCustomWidgetFormActions } from "./_use-custom-widget-form-actions";
+import { useUnsavedChangesGuard } from "./_use-unsaved-changes-guard";
+import classes from "./_custom-widget-form.module.css";
 
 interface CustomWidgetFormProps {
   mode: "create" | "edit";
-  initialValues?: Partial<z.infer<typeof formSchema>>;
+  initialValues?: Partial<CustomWidgetFormValues>;
   definitionId?: string;
 }
-
-const displayConfigBuilders: Record<string, (values: z.infer<typeof formSchema>) => Record<string, unknown>> = {
-  singleValue: (v) => ({
-    type: "singleValue",
-    jsonPath: v.jsonPath,
-    label: v.label,
-    unit: v.unit,
-    valueSize: v.valueSize,
-    labelPosition: v.labelPosition,
-  }),
-  keyValue: (v) => ({
-    type: "keyValue",
-    mappings: v.mappings,
-    layout: v.kvLayout,
-    columns: v.kvColumns,
-  }),
-  table: (v) => ({
-    type: "table",
-    tablePath: v.tablePath,
-    columns: v.columns,
-    striped: v.striped,
-    compact: v.compact,
-  }),
-  statGrid: (v) => ({
-    type: "statGrid",
-    items: v.statGridItems,
-    columns: v.statGridColumns,
-    cardStyle: v.cardStyle,
-  }),
-  progressBars: (v) => ({
-    type: "progressBars",
-    bars: v.progressBars.map((b) => ({
-      ...b,
-      maxPath: b.maxPath || undefined,
-    })),
-    showPercentage: v.showPercentage,
-    barSize: v.barSize,
-  }),
-  statusIndicator: (v) => ({
-    type: "statusIndicator",
-    items: v.statusItems.map((item) => ({
-      ...item,
-      goodValues: item.goodValues
-        .split(",")
-        .map((s) => s.trim())
-        .filter(Boolean),
-    })),
-    layout: v.statusLayout,
-    dotSize: v.dotSize,
-  }),
-  countGrid: (v) => ({
-    type: "countGrid",
-    items: v.countGridItems,
-    columns: v.countGridColumns,
-    valueSize: v.countValueSize,
-  }),
-  raw: (v) => ({
-    type: "raw",
-    jsonPath: v.rawJsonPath,
-    maxHeight: v.rawMaxHeight,
-  }),
-  actionButton: (v) => ({
-    type: "actionButton",
-    buttonLabel: v.buttonLabel,
-    buttonColor: v.buttonColor,
-    confirmText: v.confirmText || undefined,
-    successMessage: v.successMessage || undefined,
-  }),
-  customJsx: (v) => ({ type: "customJsx", template: v.template }),
-};
-
-const serverToFormFieldMap: Record<string, Record<string, string>> = {
-  statGrid: { items: "statGridItems" },
-  countGrid: { items: "countGridItems" },
-  statusIndicator: { items: "statusItems" },
-  progressBars: { bars: "progressBars" },
-  keyValue: { mappings: "mappings" },
-  table: { columns: "columns", tablePath: "tablePath" },
-  singleValue: { jsonPath: "jsonPath", label: "label", unit: "unit" },
-  raw: { jsonPath: "rawJsonPath" },
-  actionButton: { buttonLabel: "buttonLabel" },
-  customJsx: { template: "template" },
-};
-
-function extractServerErrors(err: unknown, displayType: string): Record<string, string> {
-  const errors: Record<string, string> = {};
-  const trpcErr = err as {
-    data?: { zodError?: { fieldErrors?: Record<string, string[]> } };
-    message?: string;
-  };
-
-  if (trpcErr?.data?.zodError?.fieldErrors) {
-    for (const [field, messages] of Object.entries(trpcErr.data.zodError.fieldErrors)) {
-      if (messages?.[0]) {
-        errors[field] = messages[0];
-      }
-    }
-    return errors;
-  }
-
-  try {
-    const issues = JSON.parse(trpcErr?.message ?? "[]") as Array<{
-      path: (string | number)[];
-      message: string;
-    }>;
-    const fieldMap = serverToFormFieldMap[displayType] ?? {};
-
-    for (const issue of issues) {
-      const path = [...issue.path];
-      if (path[0] === "displayConfig") {
-        path.shift();
-        const serverField = String(path[0]);
-        const formField = fieldMap[serverField] ?? serverField;
-        path[0] = formField;
-      }
-      errors[path.join(".")] = issue.message;
-    }
-  } catch {
-    // not parseable, ignore
-  }
-
-  return errors;
-}
-
-const listItemDefaults = {
-  mapping: { label: "", jsonPath: "$", unit: "" },
-  column: { header: "", jsonPath: "$" },
-  statGridItem: { label: "", jsonPath: "$", unit: "", color: "blue" },
-  progressBar: {
-    label: "",
-    valuePath: "$",
-    maxPath: "",
-    unit: "",
-    color: "blue",
-  },
-  statusItem: { label: "", jsonPath: "$", goodValues: "online,true" },
-  countGridItem: { label: "", jsonPath: "$", unit: "" },
-} as const;
-
-function cloneLast<T extends Record<string, unknown>>(arr: T[], fallback: T): T {
-  const last = arr[arr.length - 1];
-  return last ? { ...last } : { ...fallback };
-}
-
-const ALL_DISPLAY_TYPES = [
-  "singleValue",
-  "keyValue",
-  "table",
-  "statGrid",
-  "progressBars",
-  "statusIndicator",
-  "countGrid",
-  "raw",
-  "actionButton",
-  "customJsx",
-] as const;
-const MANTINE_COLORS = [
-  "blue",
-  "teal",
-  "green",
-  "red",
-  "orange",
-  "yellow",
-  "violet",
-  "pink",
-  "cyan",
-  "grape",
-  "indigo",
-  "lime",
+const sectionLinks = [
+  ["general", "section.general", IconSettings],
+  ["sources", "section.sources", IconApi],
+  ["requests", "section.requests", IconDatabase],
+  ["options", "section.options", IconBraces],
+  ["jsx", "section.jsx", IconCode],
+  ["preview", "section.preview", IconEye],
 ] as const;
 
 export function CustomWidgetForm({ mode, initialValues, definitionId }: CustomWidgetFormProps) {
-  const router = useRouter();
   const t = useScopedI18n("customWidget");
-  const utils = clientApi.useUtils();
-  const createMutation = clientApi.customWidget.create.useMutation();
-  const updateMutation = clientApi.customWidget.update.useMutation();
-  const previewMutation = clientApi.customWidget.preview.useMutation();
-  const [previewRefreshSignal, setPreviewRefreshSignal] = useState(0);
-  const [previewJson, setPreviewJson] = useState<unknown>(null);
-  const [previewFetchResult, setPreviewFetchResult] = useState<PreviewFetchResult | null>(null);
-  const hasTestedRef = useRef(false);
-
-  const form = useZodForm(formSchema, {
-    initialValues: { ...defaultCreateValues, ...initialValues },
+  const w = useScopedI18n("customWidget.workbench");
+  const formInitialValues: CustomWidgetFormValues = { ...DEFAULT_CUSTOM_WIDGET_FORM_VALUES, ...initialValues };
+  const form = useZodForm(customWidgetFormSchema, { initialValues: formInitialValues });
+  const [mobilePane, setMobilePane] = useState<"configure" | "preview">("configure");
+  const [request, setRequest] = useState("");
+  const [documentationUrl, setDocumentationUrl] = useState("");
+  const [preview, setPreview] = useState<PreviewState>({ data: {}, status: {}, session: null, outcome: "idle" });
+  const [previewSize, setPreviewSize] = useState("standard");
+  const [previewTheme, setPreviewTheme] = useState<"light" | "dark">("dark");
+  const [optionsSnapshot, setOptionsSnapshot] = useState<Record<string, unknown>>(() => {
+    const initialDefinition = buildDefinition(formInitialValues);
+    return initialDefinition.success ? getDefinitionDefaults(initialDefinition.data) : {};
   });
+  useUnsavedChangesGuard(form.isDirty());
 
-  const handleSubmit = form.onSubmit(async (values) => {
-    const buildConfig = displayConfigBuilders[values.displayType] ?? displayConfigBuilders.singleValue;
-    const displayConfig = buildConfig?.(values);
+  const candidate = useMemo(() => buildDefinition(form.values), [form.values]);
+  const parsedOptions = useMemo(
+    () => customWidgetOptionsSchema.safeParse(parseJson(form.values.options)),
+    [form.values.options],
+  );
+  const requestIds = useMemo(
+    () =>
+      Object.keys(
+        isRecord(parseJson(form.values.requests)) ? (parseJson(form.values.requests) as Record<string, unknown>) : {},
+      ),
+    [form.values.requests],
+  );
+  const jsxCompletions = useMemo(
+    () => createCustomWidgetCompletions(form.values, requestIds),
+    [form.values, requestIds],
+  );
+  const templateDiagnostics = useMemo(
+    () => analyzeJsxTemplate(form.values.template, { requestIds }),
+    [form.values.template, requestIds],
+  );
+  const requestDiagnostics = useMemo(() => analyzeRequestManifest(form.values.requests), [form.values.requests]);
+  const hasDiagnostics = [...templateDiagnostics, ...requestDiagnostics].some((entry) => entry.severity === "error");
+  const invalidSections = useMemo(
+    () =>
+      getInvalidCustomWidgetSections(
+        candidate.success ? [] : candidate.error.issues,
+        requestDiagnostics,
+        templateDiagnostics,
+      ),
+    [candidate, requestDiagnostics, templateDiagnostics],
+  );
 
-    const payload = {
-      name: values.name,
-      description: values.description || undefined,
-      iconUrl: values.iconUrl || undefined,
-      url: values.url,
-      authType: values.authType as CustomWidgetAuthType,
-      headerName: values.headerName || undefined,
-      method: values.method as "GET" | "POST" | "PUT" | "DELETE" | "PATCH",
-      requestBody: values.requestBody || undefined,
-      displayType: values.displayType as CustomWidgetDisplayType,
-      displayConfig: displayConfig as never,
-      secrets: values.secrets
-        .filter((s) => s.value)
-        .map((s) => ({
-          kind: s.kind as "apiKey" | "username" | "password",
-          value: s.value,
-        })),
-    };
-
-    try {
-      if (mode === "create") {
-        const result = await createMutation.mutateAsync(payload);
-        showSuccessNotification({
-          title: t("action.create"),
-          message: t("notification.created", { name: values.name }),
-        });
-        await utils.customWidget.all.invalidate();
-        router.push(`/manage/custom-widgets/edit/${result.id}`);
-      } else if (definitionId) {
-        await updateMutation.mutateAsync({ id: definitionId, ...payload });
-        showSuccessNotification({
-          title: t("action.save"),
-          message: t("notification.updated", { name: values.name }),
-        });
-        setPreviewRefreshSignal((n) => n + 1);
-        await utils.customWidget.all.invalidate();
-        await utils.customWidget.byId.invalidate({ id: definitionId });
-        await utils.widget.customApi.getData.invalidate({ definitionId });
-      }
-    } catch (err) {
-      const serverErrors = extractServerErrors(err, values.displayType);
-      if (Object.keys(serverErrors).length > 0) {
-        form.setErrors(serverErrors);
-      }
-      const errorKey = mode === "create" ? "notification.createError" : "notification.updateError";
-      showErrorNotification({
-        title: t("action.save"),
-        message: t(errorKey as never),
-      });
-    }
+  const { save, runPreview, pasteAiResponse, saveIssues, savePending, previewPending } = useCustomWidgetFormActions({
+    mode,
+    definitionId,
+    form,
+    candidate,
+    preview,
+    setPreview,
+    setMobilePane,
+    optionsSnapshot,
+    setOptionsSnapshot,
   });
-
-  const secretFields = authTypeSecretFields[form.values.authType] ?? [];
-
-  const getPreviewInput = useCallback(() => {
-    const values = form.values;
-    const buildConfig = displayConfigBuilders[values.displayType] ?? displayConfigBuilders.singleValue;
-    return {
-      url: values.url,
-      method: values.method as CustomWidgetMethod,
-      authType: values.authType as CustomWidgetAuthType,
-      headerName: values.headerName || undefined,
-      requestBody: values.requestBody || undefined,
-      displayType: values.displayType as CustomWidgetDisplayType,
-      displayConfig: buildConfig?.(values) as z.infer<typeof displayConfigSchema>,
-      secrets: values.secrets
-        .filter((s) => s.value)
-        .map((s) => ({
-          kind: s.kind as CustomWidgetSecretKind,
-          value: s.value,
-        })),
-      definitionId,
-    };
-  }, [form.values, definitionId]);
-
-  const handlePreviewTest = useCallback(async () => {
-    const input = getPreviewInput();
-    if (!input.url) return;
-    try {
-      const res = await previewMutation.mutateAsync(input);
-      hasTestedRef.current = true;
-      setPreviewFetchResult({
-        success: res.success,
-        error: res.success ? undefined : res.error,
-        responseInfo: res.responseInfo,
-        rawResponse: res.rawResponse,
-      });
-      if (res.success && res.rawResponse) {
-        try {
-          setPreviewJson(JSON.parse(res.rawResponse));
-        } catch {
-          setPreviewJson(null);
-        }
-      } else {
-        setPreviewJson(null);
-      }
-    } catch {
-      setPreviewFetchResult({
-        success: false,
-        error: t("notification.previewError"),
-        responseInfo: null,
-        rawResponse: null,
-      });
-      setPreviewJson(null);
-    }
-  }, [getPreviewInput, previewMutation]);
-
   useEffect(() => {
-    if (previewRefreshSignal > 0 && hasTestedRef.current) {
-      void handlePreviewTest();
-    }
-  }, [previewRefreshSignal]);
-
-  const previewInput = getPreviewInput();
-  const aiPromptCurrentConfig = {
-    $schema: "homarr-custom-widget-v2",
-    name: form.values.name,
-    description: form.values.description || undefined,
-    iconUrl: form.values.iconUrl || undefined,
-    url: form.values.url,
-    authType: form.values.authType,
-    headerName: form.values.headerName || undefined,
-    method: form.values.method,
-    requestBody: form.values.requestBody || undefined,
-    displayType: form.values.displayType,
-    displayConfig: previewInput.displayConfig,
-  };
+    if (parsedOptions.success) setOptionsSnapshot(getCustomWidgetDefaultOptions(parsedOptions.data));
+  }, [parsedOptions]);
 
+  const invalid = hasDiagnostics || !candidate.success;
+  const { renameRequest, renameOption } = createCustomWidgetRenameHandlers({
+    form,
+    candidate,
+    invalidWidgetMessage: w("invalidWidget"),
+  });
   return (
-    <form onSubmit={handleSubmit}>
-      <Group align="start" wrap="nowrap" gap="lg">
-        <Stack gap="lg" style={{ flex: 1, minWidth: 0 }}>
-          <Fieldset legend={t("fieldset.general")}>
-            <Stack gap="sm">
-              <TextInput label={t("field.name")} required {...form.getInputProps("name")} />
-              <Textarea label={t("field.description")} {...form.getInputProps("description")} />
-              <IconPicker withAsterisk={false} {...form.getInputProps("iconUrl")} />
-            </Stack>
-          </Fieldset>
-
-          <Fieldset legend={t("fieldset.connection")}>
-            <Stack gap="sm">
-              <Group align="end" wrap="nowrap" gap="xs">
-                <Select
-                  label={t("field.method")}
-                  data={["GET", "POST", "PUT", "DELETE", "PATCH"].map((value) => ({
-                    value,
-                    label: t(`method.${value}` as never),
-                  }))}
-                  w={110}
-                  {...form.getInputProps("method")}
-                  allowDeselect={false}
-                />
-                <TextInput
-                  label={t("field.url")}
-                  required
-                  placeholder={t("placeholder.url")}
-                  style={{ flex: 1 }}
-                  {...form.getInputProps("url")}
-                />
-                <Button
-                  size="sm"
-                  variant="light"
-                  leftSection={<IconPlayerPlay size={16} />}
-                  onClick={() => void handlePreviewTest()}
-                  loading={previewMutation.isPending}
-                  disabled={!form.values.url}
-                >
-                  {t("preview.test")}
-                </Button>
-              </Group>
-              <div>
-                <Text size="sm" fw={500} mb={4}>
-                  {t("field.authType")}
-                </Text>
-                <SegmentedControl
-                  fullWidth
-                  data={["none", "bearer", "basic", "apiKeyHeader", "apiKeyQuery"].map((value) => ({
-                    value,
-                    label: t(`authType.${value}` as never),
-                  }))}
-                  {...form.getInputProps("authType")}
-                  onChange={(value) => {
-                    form.setFieldValue("authType", value);
-                    const newSecrets = (authTypeSecretFields[value] ?? []).map((f) => ({
-                      kind: f.kind,
-                      value: form.values.secrets.find((s) => s.kind === f.kind)?.value ?? "",
-                    }));
-                    form.setFieldValue("secrets", newSecrets);
-                  }}
-                />
-              </div>
-              {showHeaderName[form.values.authType] && (
-                <TextInput
-                  label={t("field.headerName")}
-                  placeholder={t("placeholder.headerName")}
-                  {...form.getInputProps("headerName")}
-                />
-              )}
-              {secretFields.map((field) => {
-                const secretIndex = form.values.secrets.findIndex((s) => s.kind === field.kind);
-                if (secretIndex === -1) return null;
-                const secret = form.values.secrets[secretIndex];
-                if (!secret) return null;
-                const placeholder =
-                  secret.hasValue && !secret.value ? t("secret.savedPlaceholder" as never) : undefined;
-                return field.isPassword ? (
-                  <PasswordInput
-                    key={field.kind}
-                    label={t(`secret.${field.labelKey}` as never)}
-                    placeholder={placeholder}
-                    {...form.getInputProps(`secrets.${secretIndex}.value`)}
+    <form onSubmit={save} className={classes.form}>
+      <SegmentedControl
+        className={classes.paneSwitcher}
+        fullWidth
+        value={mobilePane}
+        onChange={(value) => setMobilePane(value as typeof mobilePane)}
+        data={[
+          { value: "configure", label: w("configure") },
+          { value: "preview", label: w("section.preview") },
+        ]}
+      />
+      <CustomWidgetSaveIssuesAlert issues={saveIssues} />
+      <nav className={classes.sectionNav} aria-label={w("sectionNavigation")}>
+        {sectionLinks.map(([id, key, SectionIcon]) => (
+          <Button
+            key={id}
+            component="a"
+            href={`#${id}`}
+            size="compact-sm"
+            variant="subtle"
+            color={invalidSections.has(id) ? "red" : undefined}
+            leftSection={<SectionIcon size={14} />}
+            rightSection={
+              invalidSections.has(id) ? <IconAlertCircle size={13} aria-label={w("status.invalid")} /> : undefined
+            }
+          >
+            {w(key)}
+          </Button>
+        ))}
+      </nav>
+      <div className={classes.workbench} data-mobile-pane={mobilePane}>
+        <Stack gap="lg" className={classes.configuration}>
+          <CustomWidgetAiCard
+            candidate={candidate.success ? candidate.data : null}
+            request={request}
+            onRequestChange={setRequest}
+            documentationUrl={documentationUrl}
+            onDocumentationUrlChange={setDocumentationUrl}
+            onPaste={() => void pasteAiResponse()}
+          />
+          <CustomWidgetAdvancedManifest form={form} />
+          <EditorSection id="general" title={w("generalInformation")} icon={IconSettings}>
+            <TextInput label={t("field.name")} required {...form.getInputProps("name")} />
+            <Textarea label={t("field.description")} autosize minRows={2} {...form.getInputProps("description")} />
+            <IconPicker withAsterisk={false} {...form.getInputProps("iconUrl")} />
+          </EditorSection>
+          <EditorSection id="sources" title={w("sources.title")} icon={IconApi}>
+            <CustomWidgetSourcesEditor form={form} definitionId={definitionId} />
+          </EditorSection>
+          <EditorSection id="requests" title={w("requests.title")} icon={IconDatabase}>
+            <CustomWidgetRequestsEditor form={form} onRename={renameRequest} />
+            <Accordion variant="contained">
+              <Accordion.Item value="raw">
+                <Accordion.Control>{w("builder.advancedJson")}</Accordion.Control>
+                <Accordion.Panel>
+                  <CodeEditor
+                    id="requests-editor"
+                    label={w("requests.label")}
+                    description={w("requests.description")}
+                    language="json"
+                    value={form.values.requests}
+                    onChange={(value) => form.setFieldValue("requests", value)}
+                    diagnostics={requestDiagnostics}
+                    error={form.errors.requests}
+                    reference={customWidgetRequestReference}
+                    required
                   />
-                ) : (
-                  <TextInput
-                    key={field.kind}
-                    label={t(`secret.${field.labelKey}` as never)}
-                    placeholder={placeholder}
-                    {...form.getInputProps(`secrets.${secretIndex}.value`)}
+                </Accordion.Panel>
+              </Accordion.Item>
+            </Accordion>
+          </EditorSection>
+          <EditorSection id="options" title={w("options.title")} icon={IconBraces}>
+            <CustomWidgetOptionsEditor form={form} onRename={renameOption} />
+            <Accordion variant="contained">
+              <Accordion.Item value="raw">
+                <Accordion.Control>{w("builder.advancedJson")}</Accordion.Control>
+                <Accordion.Panel>
+                  <CodeEditor
+                    id="options"
+                    label={w("options.title")}
+                    language="json"
+                    value={form.values.options}
+                    onChange={(value) => form.setFieldValue("options", value)}
+                    error={form.errors.options}
+                    reference={customWidgetOptionsSchemaReference}
                   />
-                );
-              })}
-              {form.values.method !== "GET" && (
-                <Textarea label={t("field.requestBody")} minRows={3} {...form.getInputProps("requestBody")} />
-              )}
-            </Stack>
-          </Fieldset>
-
-          <Fieldset legend={t("fieldset.display")}>
-            <Stack gap="sm">
-              <Select
-                label={t("field.displayType")}
-                data={ALL_DISPLAY_TYPES.map((value) => ({
-                  value,
-                  label: t(`displayType.${value}` as never),
-                }))}
-                {...form.getInputProps("displayType")}
-                allowDeselect={false}
-              />
-              <Text size="xs" c="dimmed">
-                {t(`displayTypeDescription.${form.values.displayType}` as never)}
-              </Text>
-
-              <DisplayTypeFields form={form} t={t} previewJson={previewJson} />
-            </Stack>
-          </Fieldset>
-
-          <Box hiddenFrom="md">
-            <Stack gap="sm">
-              <CopyAiPromptButton
-                rawResponse={previewFetchResult?.rawResponse}
-                currentConfig={aiPromptCurrentConfig}
-                definitionId={definitionId}
-              />
-              <CustomWidgetPreview
-                getFormValues={getPreviewInput}
-                formValues={previewInput}
-                fetchResult={previewFetchResult}
-                cachedJson={previewJson}
-                onTest={() => void handlePreviewTest()}
-                isTesting={previewMutation.isPending}
-                testError={previewMutation.error?.message ?? null}
-              />
-            </Stack>
-          </Box>
-
-          <Group justify="end">
-            <Button type="submit" loading={createMutation.isPending || updateMutation.isPending}>
-              {mode === "create" ? t("action.create") : t("action.save")}
-            </Button>
-          </Group>
+                </Accordion.Panel>
+              </Accordion.Item>
+            </Accordion>
+          </EditorSection>
+          <EditorSection id="jsx" title={w("jsx.title")} icon={IconCode}>
+            <CodeEditor
+              id="jsx-editor"
+              label={w("jsx.label")}
+              language="jsx"
+              value={form.values.template}
+              onChange={(value) => form.setFieldValue("template", value)}
+              diagnostics={templateDiagnostics}
+              completions={jsxCompletions}
+              error={form.errors.template}
+              required
+              maxLength={50_000}
+            />
+          </EditorSection>
+          <Paper p="md" className={classes.mobileSaveBar} shadow="sm">
+            <SaveActions
+              dirty={form.isDirty()}
+              savePending={savePending}
+              previewPending={previewPending}
+              invalid={invalid}
+              mode={mode}
+              onPreview={() => void runPreview()}
+            />
+          </Paper>
         </Stack>
-
-        <Box
-          w={480}
-          style={{
-            flexShrink: 0,
-            position: "sticky",
-            top: 80,
-            alignSelf: "start",
-            maxHeight: "calc(100vh - 100px)",
-            overflow: "auto",
-          }}
-          visibleFrom="md"
-        >
-          <Stack gap="sm">
-            <Button type="submit" fullWidth loading={createMutation.isPending || updateMutation.isPending}>
-              {mode === "create" ? t("action.create") : t("action.save")}
-            </Button>
-            <CopyAiPromptButton
-              rawResponse={previewFetchResult?.rawResponse}
-              currentConfig={aiPromptCurrentConfig}
-              definitionId={definitionId}
+        <Box id="preview" component="aside" className={classes.previewPane} aria-label={w("widgetPreview")}>
+          <Paper p="md" className={classes.actionBar} shadow="sm">
+            <SaveActions
+              dirty={form.isDirty()}
+              savePending={savePending}
+              previewPending={previewPending}
+              invalid={invalid}
+              mode={mode}
+              onPreview={() => void runPreview()}
             />
-            <CustomWidgetPreview
-              getFormValues={getPreviewInput}
-              formValues={previewInput}
-              fetchResult={previewFetchResult}
-              cachedJson={previewJson}
-              onTest={() => void handlePreviewTest()}
-              isTesting={previewMutation.isPending}
-              testError={previewMutation.error?.message ?? null}
-            />
-          </Stack>
+          </Paper>
+          <CustomWidgetPreviewPanel
+            candidate={candidate.success ? candidate.data : null}
+            validationIssues={
+              candidate.success
+                ? []
+                : candidate.error.issues.map((issue) => ({
+                    path: issue.path.map(String).join(".") || undefined,
+                    message: issue.message,
+                  }))
+            }
+            preview={preview}
+            size={previewSize}
+            onSizeChange={setPreviewSize}
+            theme={previewTheme}
+            onThemeChange={setPreviewTheme}
+            optionsSnapshot={optionsSnapshot}
+            onOptionsChange={setOptionsSnapshot}
+            onLiveActionsChange={(enabled) =>
+              setPreview((current) => ({
+                ...current,
+                session: current.session ? { ...current.session, liveActions: enabled } : null,
+              }))
+            }
+          />
         </Box>
-      </Group>
+      </div>
     </form>
   );
 }
-
-function DisplayTypeFields({
-  form,
-  t,
-  previewJson,
-}: {
-  form: ReturnType<typeof useZodForm<typeof formSchema>>;
-  t: ReturnType<typeof useScopedI18n<"customWidget">>;
-  previewJson: unknown;
-}) {
-  const dt = form.values.displayType;
-
-  if (dt === "singleValue") {
-    return (
-      <>
-        <JsonPathTreePicker
-          json={previewJson}
-          label={t("field.jsonPath")}
-          description={t("field.jsonPathHint")}
-          required
-          placeholder={t("placeholder.jsonPath")}
-          {...form.getInputProps("jsonPath")}
-        />
-        <TextInput
-          label={t("field.label")}
-          placeholder={t("placeholder.exampleLabel")}
-          {...form.getInputProps("label")}
-        />
-        <TextInput label={t("field.unit")} placeholder={t("placeholder.exampleUnit")} {...form.getInputProps("unit")} />
-        <Group grow>
-          <Select
-            label={t("field.valueSize")}
-            data={["sm", "md", "lg", "xl"].map((v) => ({
-              value: v,
-              label: t(`sizeOption.${v}` as never),
-            }))}
-            {...form.getInputProps("valueSize")}
-            allowDeselect={false}
-          />
-          <Select
-            label={t("field.labelPosition")}
-            data={["above", "below"].map((v) => ({
-              value: v,
-              label: t(`labelPositionOption.${v}` as never),
-            }))}
-            {...form.getInputProps("labelPosition")}
-            allowDeselect={false}
-          />
-        </Group>
-      </>
-    );
-  }
-
-  if (dt === "keyValue") {
-    return (
-      <Stack gap="xs">
-        <Group grow>
-          <Select
-            label={t("field.kvLayout")}
-            data={["list", "grid"].map((v) => ({
-              value: v,
-              label: t(`layoutOption.${v}` as never),
-            }))}
-            {...form.getInputProps("kvLayout")}
-            allowDeselect={false}
-          />
-          {form.values.kvLayout === "grid" && (
-            <NumberInput label={t("field.gridColumns")} min={1} max={3} {...form.getInputProps("kvColumns")} />
-          )}
-        </Group>
-        <Text size="sm" fw={500}>
-          {t("field.mappings")}
-        </Text>
-        {form.values.mappings.map((_m, i) => (
-          <Group key={i} align="end" wrap="nowrap">
-            <TextInput
-              label={t("field.label")}
-              placeholder={t("placeholder.exampleLabelShort")}
-              style={{ flex: 1 }}
-              {...form.getInputProps(`mappings.${i}.label`)}
-            />
-            <Box style={{ flex: 1 }}>
-              <JsonPathTreePicker
-                json={previewJson}
-                label={t("field.jsonPath")}
-                placeholder={t("placeholder.jsonPath")}
-                {...form.getInputProps(`mappings.${i}.jsonPath`)}
-              />
-            </Box>
-            <TextInput
-              label={t("field.unit")}
-              placeholder={t("placeholder.exampleUnit")}
-              style={{ width: 80 }}
-              {...form.getInputProps(`mappings.${i}.unit`)}
-            />
-            <ActionIcon
-              color="red"
-              variant="subtle"
-              onClick={() => form.removeListItem("mappings", i)}
-              disabled={form.values.mappings.length <= 1}
-              aria-label={t("action.removeMapping")}
-            >
-              <IconTrash size={16} />
-            </ActionIcon>
-          </Group>
-        ))}
-        <Button
-          variant="light"
-          size="xs"
-          leftSection={<IconPlus size={14} />}
-          onClick={() => form.insertListItem("mappings", cloneLast(form.values.mappings, listItemDefaults.mapping))}
-        >
-          {t("action.addMapping")}
-        </Button>
-      </Stack>
-    );
-  }
-
-  if (dt === "table") {
-    return (
-      <Stack gap="xs">
-        <JsonPathTreePicker
-          json={previewJson}
-          label={t("field.tablePath")}
-          description={t("field.tablePathHint")}
-          required
-          placeholder={t("placeholder.tablePath")}
-          {...form.getInputProps("tablePath")}
-        />
-        <Group grow>
-          <Switch label={t("field.striped")} {...form.getInputProps("striped", { type: "checkbox" })} />
-          <Switch label={t("field.compact")} {...form.getInputProps("compact", { type: "checkbox" })} />
-        </Group>
-        <Text size="sm" fw={500}>
-          {t("field.columns")}
-        </Text>
-        {form.values.columns.map((_col, i) => (
-          <Group key={i} align="end" wrap="nowrap">
-            <TextInput
-              label={t("field.header")}
-              placeholder={t("placeholder.exampleHeader")}
-              style={{ flex: 1 }}
-              {...form.getInputProps(`columns.${i}.header`)}
-            />
-            <Box style={{ flex: 1 }}>
-              <JsonPathTreePicker
-                json={previewJson}
-                label={t("field.jsonPath")}
-                placeholder={t("placeholder.columnJsonPath")}
-                {...form.getInputProps(`columns.${i}.jsonPath`)}
-              />
-            </Box>
-            <ActionIcon
-              color="red"
-              variant="subtle"
-              onClick={() => form.removeListItem("columns", i)}
-              disabled={form.values.columns.length <= 1}
-              aria-label={t("action.removeColumn")}
-            >
-              <IconTrash size={16} />
-            </ActionIcon>
-          </Group>
-        ))}
-        <Button
-          variant="light"
-          size="xs"
-          leftSection={<IconPlus size={14} />}
-          onClick={() => form.insertListItem("columns", cloneLast(form.values.columns, listItemDefaults.column))}
-        >
-          {t("action.addColumn")}
-        </Button>
-      </Stack>
-    );
-  }
-
-  if (dt === "statGrid") {
-    return (
-      <Stack gap="xs">
-        <Group grow>
-          <NumberInput label={t("field.gridColumns")} min={1} max={4} {...form.getInputProps("statGridColumns")} />
-          <Select
-            label={t("field.cardStyle")}
-            data={["filled", "outline", "subtle"].map((v) => ({
-              value: v,
-              label: t(`cardStyleOption.${v}` as never),
-            }))}
-            {...form.getInputProps("cardStyle")}
-            allowDeselect={false}
-          />
-        </Group>
-        <Text size="sm" fw={500}>
-          {t("field.items")}
-        </Text>
-        {form.values.statGridItems.map((_item, i) => (
-          <Group key={i} align="end" wrap="nowrap">
-            <TextInput
-              label={t("field.label")}
-              placeholder={t("placeholder.exampleLabelShort")}
-              style={{ flex: 1 }}
-              {...form.getInputProps(`statGridItems.${i}.label`)}
-            />
-            <Box style={{ flex: 1 }}>
-              <JsonPathTreePicker
-                json={previewJson}
-                label={t("field.jsonPath")}
-                placeholder={t("placeholder.jsonPath")}
-                {...form.getInputProps(`statGridItems.${i}.jsonPath`)}
-              />
-            </Box>
-            <TextInput
-              label={t("field.unit")}
-              placeholder={t("placeholder.exampleUnit")}
-              style={{ width: 80 }}
-              {...form.getInputProps(`statGridItems.${i}.unit`)}
-            />
-            <Select
-              label={t("field.color")}
-              data={MANTINE_COLORS.map((c) => ({ value: c, label: c }))}
-              style={{ width: 100 }}
-              {...form.getInputProps(`statGridItems.${i}.color`)}
-              allowDeselect={false}
-            />
-            <ActionIcon
-              color="red"
-              variant="subtle"
-              onClick={() => form.removeListItem("statGridItems", i)}
-              disabled={form.values.statGridItems.length <= 1}
-              aria-label={t("action.removeItem")}
-            >
-              <IconTrash size={16} />
-            </ActionIcon>
-          </Group>
-        ))}
-        <Button
-          variant="light"
-          size="xs"
-          leftSection={<IconPlus size={14} />}
-          onClick={() =>
-            form.insertListItem("statGridItems", cloneLast(form.values.statGridItems, listItemDefaults.statGridItem))
-          }
-        >
-          {t("action.addItem")}
-        </Button>
-      </Stack>
-    );
-  }
-
-  if (dt === "progressBars") {
-    return (
-      <Stack gap="xs">
-        <Group grow>
-          <Switch label={t("field.showPercentage")} {...form.getInputProps("showPercentage", { type: "checkbox" })} />
-          <Select
-            label={t("field.barSize")}
-            data={["sm", "md", "lg"].map((v) => ({
-              value: v,
-              label: t(`sizeOption.${v}` as never),
-            }))}
-            {...form.getInputProps("barSize")}
-            allowDeselect={false}
-          />
-        </Group>
-        <Text size="sm" fw={500}>
-          {t("field.bars")}
-        </Text>
-        {form.values.progressBars.map((_bar, i) => (
-          <Group key={i} align="end" wrap="nowrap">
-            <TextInput
-              label={t("field.label")}
-              placeholder={t("placeholder.exampleLabelShort")}
-              style={{ flex: 1 }}
-              {...form.getInputProps(`progressBars.${i}.label`)}
-            />
-            <Box style={{ flex: 1 }}>
-              <JsonPathTreePicker
-                json={previewJson}
-                label={t("field.valuePath")}
-                placeholder={t("placeholder.valuePath")}
-                {...form.getInputProps(`progressBars.${i}.valuePath`)}
-              />
-            </Box>
-            <Box style={{ flex: 1 }}>
-              <JsonPathTreePicker
-                json={previewJson}
-                label={t("field.maxPath")}
-                placeholder={t("placeholder.maxPath")}
-                {...form.getInputProps(`progressBars.${i}.maxPath`)}
-              />
-            </Box>
-            <TextInput
-              label={t("field.unit")}
-              placeholder={t("placeholder.exampleUnit")}
-              style={{ width: 60 }}
-              {...form.getInputProps(`progressBars.${i}.unit`)}
-            />
-            <Select
-              label={t("field.color")}
-              data={MANTINE_COLORS.map((c) => ({ value: c, label: c }))}
-              style={{ width: 100 }}
-              {...form.getInputProps(`progressBars.${i}.color`)}
-              allowDeselect={false}
-            />
-            <ActionIcon
-              color="red"
-              variant="subtle"
-              onClick={() => form.removeListItem("progressBars", i)}
-              disabled={form.values.progressBars.length <= 1}
-              aria-label={t("action.removeItem")}
-            >
-              <IconTrash size={16} />
-            </ActionIcon>
-          </Group>
-        ))}
-        <Button
-          variant="light"
-          size="xs"
-          leftSection={<IconPlus size={14} />}
-          onClick={() =>
-            form.insertListItem("progressBars", cloneLast(form.values.progressBars, listItemDefaults.progressBar))
-          }
-        >
-          {t("action.addBar")}
-        </Button>
-      </Stack>
-    );
-  }
-
-  if (dt === "statusIndicator") {
-    return (
-      <Stack gap="xs">
-        <Group grow>
-          <Select
-            label={t("field.kvLayout")}
-            data={["list", "grid"].map((v) => ({
-              value: v,
-              label: t(`layoutOption.${v}` as never),
-            }))}
-            {...form.getInputProps("statusLayout")}
-            allowDeselect={false}
-          />
-          <Select
-            label={t("field.dotSize")}
-            data={["sm", "md", "lg"].map((v) => ({
-              value: v,
-              label: t(`sizeOption.${v}` as never),
-            }))}
-            {...form.getInputProps("dotSize")}
-            allowDeselect={false}
-          />
-        </Group>
-        <Text size="sm" fw={500}>
-          {t("field.items")}
-        </Text>
-        {form.values.statusItems.map((_item, i) => (
-          <Group key={i} align="end" wrap="nowrap">
-            <TextInput
-              label={t("field.label")}
-              placeholder={t("placeholder.exampleLabelShort")}
-              style={{ flex: 1 }}
-              {...form.getInputProps(`statusItems.${i}.label`)}
-            />
-            <Box style={{ flex: 1 }}>
-              <JsonPathTreePicker
-                json={previewJson}
-                label={t("field.jsonPath")}
-                placeholder={t("placeholder.jsonPath")}
-                {...form.getInputProps(`statusItems.${i}.jsonPath`)}
-              />
-            </Box>
-            <TextInput
-              label={t("field.goodValues")}
-              placeholder={t("placeholder.goodValues")}
-              style={{ flex: 1 }}
-              {...form.getInputProps(`statusItems.${i}.goodValues`)}
-            />
-            <ActionIcon
-              color="red"
-              variant="subtle"
-              onClick={() => form.removeListItem("statusItems", i)}
-              disabled={form.values.statusItems.length <= 1}
-              aria-label={t("action.removeItem")}
-            >
-              <IconTrash size={16} />
-            </ActionIcon>
-          </Group>
-        ))}
-        <Button
-          variant="light"
-          size="xs"
-          leftSection={<IconPlus size={14} />}
-          onClick={() =>
-            form.insertListItem("statusItems", cloneLast(form.values.statusItems, listItemDefaults.statusItem))
-          }
-        >
-          {t("action.addItem")}
-        </Button>
-      </Stack>
-    );
-  }
-
-  if (dt === "countGrid") {
-    return (
-      <Stack gap="xs">
-        <Group grow>
-          <NumberInput label={t("field.gridColumns")} min={2} max={4} {...form.getInputProps("countGridColumns")} />
-          <Select
-            label={t("field.valueSize")}
-            data={["sm", "md", "lg"].map((v) => ({
-              value: v,
-              label: t(`sizeOption.${v}` as never),
-            }))}
-            {...form.getInputProps("countValueSize")}
-            allowDeselect={false}
-          />
-        </Group>
-        <Text size="sm" fw={500}>
-          {t("field.items")}
-        </Text>
-        {form.values.countGridItems.map((_item, i) => (
-          <Group key={i} align="end" wrap="nowrap">
-            <TextInput
-              label={t("field.label")}
-              placeholder={t("placeholder.exampleLabelShort")}
-              style={{ flex: 1 }}
-              {...form.getInputProps(`countGridItems.${i}.label`)}
-            />
-            <Box style={{ flex: 1 }}>
-              <JsonPathTreePicker
-                json={previewJson}
-                label={t("field.jsonPath")}
-                placeholder={t("placeholder.jsonPath")}
-                {...form.getInputProps(`countGridItems.${i}.jsonPath`)}
-              />
-            </Box>
-            <TextInput
-              label={t("field.unit")}
-              placeholder={t("placeholder.exampleUnit")}
-              style={{ width: 80 }}
-              {...form.getInputProps(`countGridItems.${i}.unit`)}
-            />
-            <ActionIcon
-              color="red"
-              variant="subtle"
-              onClick={() => form.removeListItem("countGridItems", i)}
-              disabled={form.values.countGridItems.length <= 1}
-              aria-label={t("action.removeItem")}
-            >
-              <IconTrash size={16} />
-            </ActionIcon>
-          </Group>
-        ))}
-        <Button
-          variant="light"
-          size="xs"
-          leftSection={<IconPlus size={14} />}
-          onClick={() =>
-            form.insertListItem("countGridItems", cloneLast(form.values.countGridItems, listItemDefaults.countGridItem))
-          }
-        >
-          {t("action.addItem")}
-        </Button>
-      </Stack>
-    );
-  }
-
-  if (dt === "raw") {
-    return (
-      <>
-        <JsonPathTreePicker
-          json={previewJson}
-          label={t("field.jsonPath")}
-          description={t("field.jsonPathHint")}
-          placeholder={t("placeholder.jsonPath")}
-          {...form.getInputProps("rawJsonPath")}
-        />
-        <NumberInput
-          label={t("field.maxHeight")}
-          min={50}
-          max={1000}
-          step={50}
-          {...form.getInputProps("rawMaxHeight")}
-        />
-      </>
-    );
-  }
-
-  if (dt === "actionButton") {
-    return (
-      <Stack gap="sm">
-        <TextInput label={t("field.buttonLabel")} required {...form.getInputProps("buttonLabel")} />
-        <Select
-          label={t("field.buttonColor")}
-          data={MANTINE_COLORS.map((c) => ({ value: c, label: c }))}
-          {...form.getInputProps("buttonColor")}
-          allowDeselect={false}
-        />
-        <TextInput
-          label={t("field.confirmText")}
-          description={t("field.confirmTextHint")}
-          {...form.getInputProps("confirmText")}
-        />
-        <TextInput
-          label={t("field.successMessage")}
-          description={t("field.successMessageHint")}
-          {...form.getInputProps("successMessage")}
-        />
-      </Stack>
-    );
-  }
-
-  if (dt === "customJsx") {
-    return (
-      <Textarea
-        label={t("field.template.label")}
-        description={t("field.template.description")}
-        placeholder={
-          '<Stack gap="sm">\n  <Title order={3}>{data.name}</Title>\n  <Text>{data.description}</Text>\n</Stack>'
-        }
-        minRows={8}
-        maxRows={20}
-        autosize
-        maxLength={10000}
-        styles={{ input: { fontFamily: "monospace" } }}
-        {...form.getInputProps("template")}
-      />
-    );
-  }
-
-  return null;
-}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-identifier-input.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-identifier-input.tsx
new file mode 100644
index 000000000..83098a3d9
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-identifier-input.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { CSSProperties, ReactNode } from "react";
+import { TextInput } from "@mantine/core";
+
+export function CustomWidgetIdentifierInput({
+  label,
+  value,
+  error,
+  disabled,
+  style,
+  onCommit,
+}: {
+  label: string;
+  value: string;
+  error?: ReactNode;
+  disabled?: boolean;
+  style?: CSSProperties;
+  onCommit(value: string): void;
+}) {
+  const [draft, setDraft] = useState(value);
+  useEffect(() => setDraft(value), [value]);
+  const commit = () => {
+    if (draft !== value) onCommit(draft);
+  };
+  return (
+    <TextInput
+      label={label}
+      value={draft}
+      error={error}
+      disabled={disabled}
+      style={style}
+      onChange={(event) => setDraft(event.currentTarget.value)}
+      onBlur={commit}
+      onKeyDown={(event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          event.currentTarget.blur();
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          setDraft(value);
+        }
+      }}
+    />
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-legacy-migration.spec.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-legacy-migration.spec.ts
new file mode 100644
index 000000000..eb3363582
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-legacy-migration.spec.ts
@@ -0,0 +1,30 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const readSource = (path: string) => readFileSync(`${process.cwd()}/${path}`, "utf8");
+
+describe("legacy custom widget migration UI", () => {
+  it("keeps legacy definitions visible and exposes the redacted LLM workflow", () => {
+    const list = readSource("apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-list.tsx");
+    const actions = readSource("apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-actions.tsx");
+
+    expect(list).toContain("widget.migrationRequired");
+    expect(list).toContain('t("page.list.migrationInstructions")');
+    expect(actions).toContain("legacyMigrationPrompt.fetch");
+    expect(actions).toContain("navigator.clipboard.writeText(result.prompt)");
+    expect(actions).toContain("navigator.clipboard.readText()");
+    expect(actions).toContain('t("action.pasteMigration")');
+    expect(actions).toContain("parseCustomWidgetClipboardDetailed");
+    expect(actions).toContain("legacyId={widget.id}");
+  });
+
+  it("replaces the legacy record through migration and refreshes every consumer", () => {
+    const dialog = readSource("apps/nextjs/src/components/custom-widgets/custom-widget-import-dialog.tsx");
+
+    expect(dialog).toContain("customWidget.migrateLegacy.useMutation");
+    expect(dialog).toContain("migrateMutation.mutate({ id: legacyId, widget: configuredWidget, secrets })");
+    expect(dialog).toContain("utils.customWidget.list.invalidate()");
+    expect(dialog).toContain("utils.customWidget.available.invalidate()");
+    expect(dialog).toContain("utils.widget.customApi.getData.invalidate()");
+  });
+});
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-list.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-list.tsx
index 7732dcc33..7e4386d20 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-list.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-list.tsx
@@ -1,32 +1,20 @@
 "use client";
 
-import { ActionIcon, Avatar, Badge, Group, Stack, Table, Text } from "@mantine/core";
-import { IconApi, IconPencil } from "@tabler/icons-react";
+import { ActionIcon, Avatar, Badge, Card, Group, Stack, Switch, Text, Tooltip } from "@mantine/core";
+import { IconAlertTriangle, IconApi, IconPencil, IconSparkles } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { showErrorNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 import { Link } from "@homarr/ui";
 
 import { NoResults } from "~/components/no-results";
 import { CustomWidgetRowActions } from "./_custom-widget-actions";
 
-const displayTypeBadgeColors: Record<string, string> = {
-  singleValue: "blue",
-  keyValue: "green",
-  table: "orange",
-  statGrid: "violet",
-  progressBars: "teal",
-  statusIndicator: "cyan",
-  countGrid: "indigo",
-  raw: "gray",
-  actionButton: "red",
-  customJsx: "pink",
-};
-
-const iconProps = { size: 16, stroke: 1.5 };
-
 interface CustomWidgetListProps {
-  definitions: RouterOutputs["customWidget"]["all"];
+  definitions: RouterOutputs["customWidget"]["list"];
 }
 
 export const CustomWidgetList = ({ definitions }: CustomWidgetListProps) => {
@@ -43,59 +31,173 @@ export const CustomWidgetList = ({ definitions }: CustomWidgetListProps) => {
   }
 
   return (
-    <Stack gap="md">
-      <Table striped highlightOnHover withTableBorder>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>{t("table.name")}</Table.Th>
-            <Table.Th>{t("table.url")}</Table.Th>
-            <Table.Th>{t("table.display")}</Table.Th>
-            <Table.Th w={90} />
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {definitions.map((def) => (
-            <Table.Tr key={def.id} style={{ opacity: def.enabled ? undefined : 0.5 }}>
-              <Table.Td>
-                <Group gap="xs" wrap="nowrap">
-                  {def.iconUrl ? (
-                    <Avatar size={20} radius="sm" src={def.iconUrl} styles={{ image: { objectFit: "contain" } }} />
-                  ) : (
-                    <IconApi size={16} />
-                  )}
-                  <Text size="sm" fw={500} lineClamp={1} c={def.enabled ? undefined : "dimmed"} style={{ minWidth: 0 }}>
-                    {def.name}
-                  </Text>
-                </Group>
-              </Table.Td>
-              <Table.Td>
-                <Text size="sm" c="dimmed" lineClamp={1}>
-                  {def.url}
-                </Text>
-              </Table.Td>
-              <Table.Td>
-                <Badge color={displayTypeBadgeColors[def.displayType] ?? "gray"} size="sm">
-                  {t(`displayType.${def.displayType}` as never)}
-                </Badge>
-              </Table.Td>
-              <Table.Td>
-                <Group gap={4} justify="flex-end" wrap="nowrap">
-                  <ActionIcon
-                    component={Link}
-                    href={`/manage/custom-widgets/edit/${def.id}`}
-                    variant="filled"
-                    color="red"
-                    aria-label={t("action.edit")}
-                  >
-                    <IconPencil {...iconProps} />
-                  </ActionIcon>
-                  <CustomWidgetRowActions widget={{ id: def.id, name: def.name, enabled: def.enabled }} />
-                </Group>
-              </Table.Td>
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
+    <Stack gap="sm">
+      {definitions.map((def) => (
+        <CustomWidgetCard key={def.id} widget={def} />
+      ))}
     </Stack>
   );
 };
+
+type WidgetDef = RouterOutputs["customWidget"]["list"][number];
+
+function CustomWidgetCard({ widget }: { widget: WidgetDef }) {
+  const t = useScopedI18n("customWidget");
+  const toggleMutation = clientApi.customWidget.toggleEnabled.useMutation();
+  const utils = clientApi.useUtils();
+
+  const handleToggle = () => {
+    toggleMutation.mutate(
+      { id: widget.id, enabled: !widget.enabled },
+      {
+        onSuccess: async () => {
+          await utils.widget.customApi.getData.cancel();
+          void utils.customWidget.list.invalidate();
+          void utils.widget.customApi.getData.invalidate();
+          void revalidatePathActionAsync("/manage/custom-widgets");
+        },
+        onError: () => {
+          showErrorNotification({
+            title: widget.enabled ? t("action.disable") : t("action.enable"),
+            message: t("notification.toggleError"),
+          });
+        },
+      },
+    );
+  };
+
+  return (
+    <Card
+      padding="sm"
+      withBorder={!widget.valid}
+      bd={
+        widget.migrationRequired
+          ? "1px solid var(--mantine-color-yellow-6)"
+          : !widget.valid
+            ? "1px solid var(--mantine-color-red-6)"
+            : undefined
+      }
+      style={{
+        opacity: widget.valid && !widget.enabled ? 0.55 : 1,
+        transition: "opacity 150ms ease",
+      }}
+    >
+      <Group justify="space-between" wrap="nowrap" gap="md">
+        <Group wrap="nowrap" gap="sm" style={{ flex: 1, minWidth: 0 }}>
+          {widget.iconUrl ? (
+            <Avatar size={36} radius="sm" src={widget.iconUrl} styles={{ image: { objectFit: "contain" } }} />
+          ) : (
+            <Avatar size={36} radius="sm" color="red">
+              <IconApi size={18} />
+            </Avatar>
+          )}
+          <Stack gap={2} style={{ minWidth: 0, flex: 1 }}>
+            <Text size="sm" fw={600} lineClamp={1} style={{ minWidth: 0 }}>
+              {widget.name}
+            </Text>
+            {widget.migrationRequired ? (
+              <Text size="xs" c="yellow.8">
+                {t("page.list.migrationDescription")}
+              </Text>
+            ) : !widget.valid ? (
+              <Text size="xs" c="red">
+                {t("page.list.invalidDefinitionDescription")}
+              </Text>
+            ) : null}
+            {widget.sources[0] && (
+              <Text size="xs" c="dimmed" ff="monospace" lineClamp={1} style={{ wordBreak: "break-all", minWidth: 0 }}>
+                {widget.sources.map((source) => source.origin).join(" · ")}
+              </Text>
+            )}
+          </Stack>
+          {widget.migrationRequired ? (
+            <Tooltip label={t("page.list.migrationInstructions")} multiline maw={420}>
+              <Badge
+                color="yellow"
+                size="sm"
+                variant="light"
+                leftSection={<IconSparkles size={12} />}
+                style={{ flexShrink: 0 }}
+              >
+                {t("page.list.migrationRequired")}
+              </Badge>
+            </Tooltip>
+          ) : widget.valid ? (
+            <Badge color="pink" size="sm" variant="light" style={{ flexShrink: 0 }}>
+              JSX · {widget.requestCount}
+            </Badge>
+          ) : (
+            <Tooltip
+              label={widget.validationIssues
+                .map((issue) => (issue.path ? `${issue.path}: ${issue.message}` : issue.message))
+                .join("\n")}
+              multiline
+              maw={520}
+            >
+              <Badge
+                color="red"
+                size="sm"
+                variant="light"
+                leftSection={<IconAlertTriangle size={12} />}
+                style={{ flexShrink: 0 }}
+              >
+                {t("page.list.invalidDefinition")}
+              </Badge>
+            </Tooltip>
+          )}
+          {widget.missingSecrets.length > 0 && (
+            <Tooltip
+              label={t("page.list.missingCredentialsDescription", { count: widget.missingSecrets.length })}
+              multiline
+              maw={320}
+            >
+              <Badge
+                color="yellow"
+                size="sm"
+                variant="light"
+                leftSection={<IconAlertTriangle size={12} />}
+                style={{ flexShrink: 0 }}
+              >
+                {t("page.list.missingCredentials", { count: widget.missingSecrets.length })}
+              </Badge>
+            </Tooltip>
+          )}
+        </Group>
+
+        <Group gap="xs" wrap="nowrap" style={{ flexShrink: 0 }}>
+          {widget.valid && (
+            <>
+              <Tooltip label={widget.enabled ? t("action.disable") : t("action.enable")}>
+                <Switch
+                  size="sm"
+                  checked={widget.enabled}
+                  onChange={handleToggle}
+                  disabled={toggleMutation.isPending}
+                  aria-label={widget.enabled ? t("action.disable") : t("action.enable")}
+                />
+              </Tooltip>
+              <ActionIcon
+                component={Link}
+                href={`/manage/custom-widgets/edit/${widget.id}`}
+                variant="subtle"
+                color="gray"
+                aria-label={t("action.edit")}
+              >
+                <IconPencil size={16} stroke={1.5} />
+              </ActionIcon>
+            </>
+          )}
+          <CustomWidgetRowActions
+            widget={{
+              id: widget.id,
+              name: widget.name,
+              enabled: widget.enabled,
+              valid: widget.valid,
+              migrationRequired: widget.migrationRequired,
+            }}
+          />
+        </Group>
+      </Group>
+    </Card>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-option-fields.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-option-fields.tsx
new file mode 100644
index 000000000..24d46c86f
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-option-fields.tsx
@@ -0,0 +1,196 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ActionIcon, Button, Group, MultiSelect, NumberInput, Select, Stack, Switch, TextInput } from "@mantine/core";
+import { IconPlus, IconTrash } from "@tabler/icons-react";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { CodeEditor } from "./_code-editor";
+
+export function DefaultValueEditor({
+  id,
+  control,
+  value,
+  choices = [],
+  onChange,
+}: {
+  id: string;
+  control: string;
+  value: unknown;
+  choices?: Array<{ label: string; value: string | number }>;
+  onChange: (value: unknown) => void;
+}) {
+  const t = useScopedI18n("customWidget.workbench.builder");
+  if (control === "switch")
+    return (
+      <Switch
+        label={t("default")}
+        checked={value === true}
+        onChange={(event) => onChange(event.currentTarget.checked)}
+      />
+    );
+  if (["number", "slider", "duration"].includes(control))
+    return <NumberInput label={t("default")} value={typeof value === "number" ? value : 0} onChange={onChange} />;
+  const choiceData = choices.map((choice) => ({ label: choice.label, value: String(choice.value) }));
+  if (control === "select" && choices.length > 0)
+    return (
+      <Select
+        label={t("default")}
+        data={choiceData}
+        value={value === undefined ? null : String(value)}
+        onChange={(next) => onChange(coerceChoice(next, choices))}
+      />
+    );
+  if (control === "multiSelect" && choices.length > 0)
+    return (
+      <MultiSelect
+        label={t("default")}
+        data={choiceData}
+        value={Array.isArray(value) ? value.map(String) : []}
+        onChange={(next) => onChange(next.map((entry) => coerceChoice(entry, choices)))}
+      />
+    );
+  if (control === "json" || control === "multiSelect")
+    return <JsonValueEditor id={id} label={t("default")} value={value} onChange={onChange} />;
+  return (
+    <TextInput
+      label={t("default")}
+      value={typeof value === "string" ? value : ""}
+      onChange={(event) => onChange(event.currentTarget.value)}
+    />
+  );
+}
+
+export function optionForControl(option: Record<string, unknown>, control: string | null): Record<string, unknown> {
+  const nextControl = control ?? "text";
+  const next: Record<string, unknown> = { ...option, control: nextControl, default: defaultForControl(nextControl) };
+  if (!["select", "multiSelect"].includes(nextControl)) {
+    next.choices = undefined;
+    next.choicesFrom = undefined;
+  }
+  if (!["number", "slider", "duration"].includes(nextControl)) {
+    next.min = undefined;
+    next.max = undefined;
+    next.step = undefined;
+  }
+  return next;
+}
+
+export function OptionChoicesEditor({
+  value,
+  onChange,
+}: {
+  value: Array<{ label: string; value: string | number }>;
+  onChange(value: Array<{ label: string; value: string | number }>): void;
+}) {
+  const t = useScopedI18n("customWidget.workbench.builder");
+  return (
+    <Stack gap="xs">
+      {value.map((choice, index) => (
+        <Group key={index} align="end" wrap="wrap">
+          <TextInput
+            style={{ flex: "1 1 10rem" }}
+            label={t("choiceLabel")}
+            value={choice.label}
+            onChange={(event) =>
+              onChange(
+                value.map((entry, entryIndex) =>
+                  entryIndex === index ? { ...entry, label: event.currentTarget.value } : entry,
+                ),
+              )
+            }
+          />
+          <TextInput
+            style={{ flex: "1 1 10rem" }}
+            label={t("choiceValue")}
+            value={String(choice.value)}
+            onChange={(event) =>
+              onChange(
+                value.map((entry, entryIndex) =>
+                  entryIndex === index ? { ...entry, value: parseChoiceValue(event.currentTarget.value) } : entry,
+                ),
+              )
+            }
+          />
+          <ActionIcon
+            type="button"
+            color="red"
+            variant="subtle"
+            aria-label={t("removeChoice")}
+            onClick={() => onChange(value.filter((_, entryIndex) => entryIndex !== index))}
+          >
+            <IconTrash size={16} />
+          </ActionIcon>
+        </Group>
+      ))}
+      <Button
+        type="button"
+        size="compact-sm"
+        variant="subtle"
+        leftSection={<IconPlus size={14} />}
+        onClick={() => onChange([...value, { label: t("newChoice"), value: `choice-${value.length + 1}` }])}
+      >
+        {t("addChoice")}
+      </Button>
+    </Stack>
+  );
+}
+
+export function JsonValueEditor({
+  id,
+  label,
+  description,
+  value,
+  onChange,
+}: {
+  id: string;
+  label: string;
+  description?: string;
+  value: unknown;
+  onChange(value: unknown): void;
+}) {
+  const t = useScopedI18n("customWidget.workbench.builder");
+  const serialized = JSON.stringify(value, null, 2);
+  const [draft, setDraft] = useState(serialized);
+  const [error, setError] = useState<string>();
+  useEffect(() => setDraft(serialized), [serialized]);
+  return (
+    <CodeEditor
+      id={`option-${id}`}
+      label={label}
+      description={description}
+      language="json"
+      value={draft}
+      height="140px"
+      error={error}
+      onChange={(next) => {
+        setDraft(next);
+        try {
+          onChange(JSON.parse(next) as unknown);
+          setError(undefined);
+        } catch (cause) {
+          setError(cause instanceof Error ? cause.message : t("invalidJson"));
+        }
+      }}
+    />
+  );
+}
+
+function defaultForControl(control: string | null) {
+  if (control === "switch") return false;
+  if (["number", "slider", "duration"].includes(control ?? "")) return 0;
+  if (control === "multiSelect") return [];
+  if (control === "json") return {};
+  return "";
+}
+
+function parseChoiceValue(value: string): string | number {
+  return /^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?$/u.test(value.trim()) ? Number(value) : value;
+}
+
+function coerceChoice(value: string | null, choices: Array<{ value: string | number }>) {
+  if (value === null) return "";
+  const numeric = choices.find((choice) => typeof choice.value === "number" && String(choice.value) === value);
+  return numeric?.value ?? value;
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-options-editor.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-options-editor.tsx
new file mode 100644
index 000000000..ccac21a3c
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-options-editor.tsx
@@ -0,0 +1,271 @@
+"use client";
+
+import {
+  Accordion,
+  ActionIcon,
+  Button,
+  Fieldset,
+  Group,
+  NumberInput,
+  Select,
+  Stack,
+  Switch,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { IconArrowDown, IconArrowUp, IconPlus, IconTrash } from "@tabler/icons-react";
+
+import { customWidgetOptionControls } from "@homarr/custom-widgets/core";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { isRecord, parseJson } from "./_custom-widget-form-utils";
+import type { CustomWidgetWorkbenchForm } from "./_custom-widget-form-utils";
+import { DefaultValueEditor, OptionChoicesEditor, optionForControl } from "./_custom-widget-option-fields";
+import { CustomWidgetIdentifierInput } from "./_custom-widget-identifier-input";
+
+export function CustomWidgetOptionsEditor({
+  form,
+  onRename,
+}: {
+  form: CustomWidgetWorkbenchForm;
+  onRename(currentName: string, nextName: string): void;
+}) {
+  const t = useScopedI18n("customWidget.workbench.builder");
+  const parsed = parseJson(form.values.options);
+  const entries = isRecord(parsed) ? Object.entries(parsed) : [];
+  const requests = parseJson(form.values.requests);
+  const requestIds = isRecord(requests) ? Object.keys(requests) : [];
+  const commit = (next: Array<[string, unknown]>) =>
+    form.setFieldValue("options", JSON.stringify(Object.fromEntries(next), null, 2));
+  const update = (index: number, id: string, option: Record<string, unknown>) =>
+    commit(entries.map((entry, i) => (i === index ? [id, option] : entry)));
+  const remove = (index: number) => commit(entries.filter((_, i) => i !== index));
+  const move = (index: number, direction: -1 | 1) => {
+    const next = [...entries];
+    const target = index + direction;
+    if (!next[index] || !next[target]) return;
+    [next[index], next[target]] = [next[target], next[index]];
+    commit(next);
+  };
+  const add = () => {
+    let suffix = entries.length + 1;
+    while (entries.some(([id]) => id === `option-${suffix}`)) suffix += 1;
+    commit([...entries, [`option-${suffix}`, { label: `Option ${suffix}`, control: "text", default: "" }]]);
+  };
+
+  return (
+    <Stack gap="sm">
+      {entries.map(([id, rawOption], index) => {
+        const option = isRecord(rawOption) ? rawOption : {};
+        const control = typeof option.control === "string" ? option.control : "text";
+        const choicesFrom = isRecord(option.choicesFrom) ? option.choicesFrom : null;
+        const choices = Array.isArray(option.choices)
+          ? option.choices.flatMap((choice) =>
+              isRecord(choice) &&
+              typeof choice.label === "string" &&
+              (typeof choice.value === "string" || typeof choice.value === "number")
+                ? [{ label: choice.label, value: choice.value }]
+                : [],
+            )
+          : [];
+        return (
+          <Fieldset key={index} legend={typeof option.label === "string" ? option.label : id}>
+            <Stack gap="sm">
+              <Group grow align="start">
+                <CustomWidgetIdentifierInput
+                  label={t("optionName")}
+                  value={id}
+                  error={form.errors.options}
+                  onCommit={(value) => onRename(id, value)}
+                />
+                <TextInput
+                  label={t("label")}
+                  value={typeof option.label === "string" ? option.label : ""}
+                  onChange={(event) => update(index, id, { ...option, label: event.currentTarget.value })}
+                />
+                <Select
+                  label={t("control")}
+                  data={[...customWidgetOptionControls]}
+                  value={control}
+                  allowDeselect={false}
+                  onChange={(value) => update(index, id, optionForControl(option, value))}
+                />
+              </Group>
+              <TextInput
+                label={t("description")}
+                value={typeof option.description === "string" ? option.description : ""}
+                onChange={(event) =>
+                  update(index, id, { ...option, description: event.currentTarget.value || undefined })
+                }
+              />
+              <DefaultValueEditor
+                id={`${index}-default`}
+                control={control}
+                value={option.default}
+                choices={choices}
+                onChange={(value) => update(index, id, { ...option, default: value })}
+              />
+              <Accordion variant="contained">
+                <Accordion.Item value="advanced">
+                  <Accordion.Control>{t("optionDetails")}</Accordion.Control>
+                  <Accordion.Panel>
+                    <Stack gap="sm">
+                      {["number", "slider", "duration"].includes(control) && (
+                        <Group grow>
+                          <NumberInput
+                            label={t("minimum")}
+                            value={typeof option.min === "number" ? option.min : ""}
+                            onChange={(value) =>
+                              update(index, id, { ...option, min: typeof value === "number" ? value : undefined })
+                            }
+                          />
+                          <NumberInput
+                            label={t("maximum")}
+                            value={typeof option.max === "number" ? option.max : ""}
+                            onChange={(value) =>
+                              update(index, id, { ...option, max: typeof value === "number" ? value : undefined })
+                            }
+                          />
+                          <NumberInput
+                            label={t("step")}
+                            value={typeof option.step === "number" ? option.step : ""}
+                            onChange={(value) =>
+                              update(index, id, { ...option, step: typeof value === "number" ? value : undefined })
+                            }
+                          />
+                        </Group>
+                      )}
+                      {["select", "multiSelect"].includes(control) && (
+                        <OptionChoicesEditor
+                          value={choices}
+                          onChange={(nextChoices) =>
+                            update(index, id, {
+                              ...option,
+                              choices: nextChoices.length > 0 ? nextChoices : undefined,
+                              choicesFrom: undefined,
+                              default:
+                                control === "select" &&
+                                !nextChoices.some((choice) => Object.is(choice.value, option.default))
+                                  ? (nextChoices[0]?.value ?? "")
+                                  : option.default,
+                            })
+                          }
+                        />
+                      )}
+                      {["select", "multiSelect"].includes(control) && (
+                        <Group grow align="start">
+                          <Select
+                            label={t("choicesRequest")}
+                            data={requestIds}
+                            value={typeof choicesFrom?.request === "string" ? choicesFrom.request : null}
+                            clearable
+                            onChange={(value) =>
+                              update(index, id, {
+                                ...option,
+                                choices: value ? undefined : option.choices,
+                                choicesFrom: value ? { request: value, valuePath: "id", labelPath: "name" } : undefined,
+                              })
+                            }
+                          />
+                          {choicesFrom && (
+                            <>
+                              <TextInput
+                                label={t("itemsPath")}
+                                placeholder={t("itemsPathPlaceholder")}
+                                value={String(choicesFrom.itemsPath ?? "")}
+                                onChange={(event) =>
+                                  update(index, id, {
+                                    ...option,
+                                    choicesFrom: { ...choicesFrom, itemsPath: event.currentTarget.value || undefined },
+                                  })
+                                }
+                              />
+                              <TextInput
+                                label={t("valuePath")}
+                                value={String(choicesFrom.valuePath ?? "")}
+                                onChange={(event) =>
+                                  update(index, id, {
+                                    ...option,
+                                    choicesFrom: { ...choicesFrom, valuePath: event.currentTarget.value },
+                                  })
+                                }
+                              />
+                              <TextInput
+                                label={t("labelPath")}
+                                value={String(choicesFrom.labelPath ?? "")}
+                                onChange={(event) =>
+                                  update(index, id, {
+                                    ...option,
+                                    choicesFrom: { ...choicesFrom, labelPath: event.currentTarget.value },
+                                  })
+                                }
+                              />
+                            </>
+                          )}
+                        </Group>
+                      )}
+                      <Group grow>
+                        <TextInput
+                          label={t("group")}
+                          value={typeof option.group === "string" ? option.group : ""}
+                          onChange={(event) =>
+                            update(index, id, { ...option, group: event.currentTarget.value || undefined })
+                          }
+                        />
+                        <Switch
+                          mt="xl"
+                          label={t("advancedOption")}
+                          checked={option.advanced === true}
+                          onChange={(event) => update(index, id, { ...option, advanced: event.currentTarget.checked })}
+                        />
+                      </Group>
+                    </Stack>
+                  </Accordion.Panel>
+                </Accordion.Item>
+              </Accordion>
+              <Group justify="space-between">
+                <Group gap="xs">
+                  <ActionIcon
+                    type="button"
+                    variant="subtle"
+                    aria-label={t("moveOptionUp")}
+                    disabled={index === 0}
+                    onClick={() => move(index, -1)}
+                  >
+                    <IconArrowUp size={16} />
+                  </ActionIcon>
+                  <ActionIcon
+                    type="button"
+                    variant="subtle"
+                    aria-label={t("moveOptionDown")}
+                    disabled={index === entries.length - 1}
+                    onClick={() => move(index, 1)}
+                  >
+                    <IconArrowDown size={16} />
+                  </ActionIcon>
+                </Group>
+                <Button
+                  type="button"
+                  color="red"
+                  variant="subtle"
+                  leftSection={<IconTrash size={16} />}
+                  onClick={() => remove(index)}
+                >
+                  {t("removeOption")}
+                </Button>
+              </Group>
+            </Stack>
+          </Fieldset>
+        );
+      })}
+      <Button type="button" variant="light" leftSection={<IconPlus size={16} />} onClick={add}>
+        {t("addOption")}
+      </Button>
+      {form.errors.options && (
+        <Text c="red" size="xs">
+          {form.errors.options}
+        </Text>
+      )}
+    </Stack>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-action.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-action.tsx
new file mode 100644
index 000000000..0b54945c3
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-action.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { useState } from "react";
+import { Button, Fieldset, Stack, Textarea } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import { collectCustomWidgetRequestReferences, getCustomWidgetConfirmation } from "@homarr/custom-widgets/core";
+import type { CustomJsxRequest } from "@homarr/custom-widgets/core";
+import { useConfirmModal } from "@homarr/modals";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { isRuntimeParams, parseJson } from "./_custom-widget-form-utils";
+
+export function PreviewActionControl({
+  request,
+  sessionId,
+}: {
+  request: CustomJsxRequest & { id: string };
+  sessionId?: string;
+}) {
+  const t = useScopedI18n("customWidget.workbench.preview");
+  const { openConfirmModal } = useConfirmModal();
+  const actionMutation = clientApi.customWidget.previewAction.useMutation();
+  const expectedParams = [...collectCustomWidgetRequestReferences(request).params].toSorted();
+  const initialParams = Object.fromEntries(expectedParams.map((name) => [name, ""]));
+  const [params, setParams] = useState(JSON.stringify(initialParams, null, 2));
+  const parsed = parseJson(params);
+  const validParams = isRuntimeParams(parsed, expectedParams) ? parsed : null;
+  const confirmation = getCustomWidgetConfirmation(request);
+  const run = async () => {
+    if (!sessionId || !validParams) return;
+    const needsConfirmation = request.confirmation !== undefined || request.method === "DELETE";
+    if (needsConfirmation) {
+      const confirmed = await new Promise<boolean>((resolve) => {
+        openConfirmModal({
+          title: confirmation?.title ?? request.id,
+          children: confirmation?.message ?? t("deleteConfirmation"),
+          labels: { confirm: confirmation?.confirmLabel },
+          confirmProps: { color: confirmation?.destructive || request.method === "DELETE" ? "red.9" : "blue" },
+          onConfirm: () => resolve(true),
+          onCancel: () => resolve(false),
+        });
+      });
+      if (!confirmed) return;
+    }
+    actionMutation.mutate(
+      { sessionId, requestId: request.id, params: validParams, confirmed: needsConfirmation },
+      {
+        onSuccess: (result) =>
+          showSuccessNotification({
+            title: request.id,
+            message: result.simulated ? t("simulated") : t("httpStatus", { status: result.status }),
+          }),
+        onError: (error) => showErrorNotification({ title: request.id, message: error.message }),
+      },
+    );
+  };
+  return (
+    <Fieldset legend={`${request.id} · ${request.method}`}>
+      <Stack gap="xs">
+        {expectedParams.length > 0 && (
+          <Textarea
+            label={t("actionParameters")}
+            autosize
+            minRows={2}
+            value={params}
+            error={validParams ? undefined : t("invalidParameters")}
+            onChange={(event) => setParams(event.currentTarget.value)}
+          />
+        )}
+        <Button
+          type="button"
+          variant="light"
+          color={confirmation?.destructive || request.method === "DELETE" ? "red" : undefined}
+          disabled={!sessionId || !validParams}
+          loading={actionMutation.isPending}
+          onClick={() => void run()}
+        >
+          {confirmation?.confirmLabel ??
+            (confirmation?.destructive || request.method === "DELETE" ? t("runDestructive") : t("runAction"))}
+        </Button>
+      </Stack>
+    </Fieldset>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-data.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-data.ts
new file mode 100644
index 000000000..ccdb646bb
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-data.ts
@@ -0,0 +1,51 @@
+import type { HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
+
+interface PreviewSnapshot {
+  data: Record<string, unknown>;
+  status: Record<string, unknown>;
+  session: { id: string; liveActions: boolean } | null;
+}
+
+export function createPreviewDisplayData({
+  candidate,
+  fixture,
+  preview,
+  options,
+  fixtureError,
+}: {
+  candidate: HomarrCustomWidgetV2 | null;
+  fixture: "live" | "loading" | "empty" | "error";
+  preview: PreviewSnapshot;
+  options: Record<string, unknown>;
+  fixtureError: string;
+}): Record<string, unknown> | null {
+  if (!candidate) return null;
+  const requests = Object.entries(candidate.requests);
+  const data = fixture === "empty" ? Object.fromEntries(requests.map(([id]) => [id, []])) : preview.data;
+  const status =
+    fixture === "loading"
+      ? Object.fromEntries(requests.map(([id]) => [id, { loading: true }]))
+      : fixture === "error"
+        ? Object.fromEntries(requests.map(([id]) => [id, { loading: false, ok: false, error: fixtureError }]))
+        : preview.status;
+  return {
+    template: candidate.template,
+    data,
+    status,
+    options,
+    requestCapabilities: requests.map(([id, { kind, method, trigger, permission, confirmation, invalidates }]) => ({
+      id,
+      kind,
+      method,
+      trigger,
+      minimumBoardPermission: permission,
+      confirmation:
+        typeof confirmation === "string" ? { title: "Confirm action", message: confirmation } : confirmation,
+      invalidates,
+    })),
+    previewSessionId: preview.session?.id,
+    previewLiveActions: preview.session?.liveActions ?? false,
+    queriesDisabled: fixture !== "live",
+    isEditMode: fixture !== "live",
+  };
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-panel.spec.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-panel.spec.tsx
new file mode 100644
index 000000000..dd4969177
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-panel.spec.tsx
@@ -0,0 +1,225 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { BUNDLED_CUSTOM_WIDGETS, customWidgetDefinitionSchema } from "@homarr/custom-widgets/core";
+
+import { CustomWidgetPreviewPanel } from "./_custom-widget-preview-panel";
+
+vi.mock("@homarr/api/client", () => ({
+  clientApi: {
+    customWidget: {
+      setPreviewLiveActions: { useMutation: () => ({ isPending: false, mutate: vi.fn() }) },
+      previewJournal: { useQuery: () => ({ data: [] }) },
+    },
+  },
+}));
+vi.mock("@homarr/translation/client", () => ({ useScopedI18n: () => (key: string) => key }));
+vi.mock("@homarr/notifications", () => ({ showErrorNotification: vi.fn() }));
+const rendererAttempt = vi.hoisted(() => vi.fn());
+
+vi.mock("@homarr/widgets/custom-api/custom-jsx-display", () => ({
+  default: ({ data }: { data: Record<string, unknown> }) => {
+    rendererAttempt(data);
+    if ((data.options as Record<string, unknown> | undefined)?.throwPreview === true) {
+      throw new Error("authored widget failed");
+    }
+    return <div>widget-renderer</div>;
+  },
+}));
+vi.mock("./_code-editor", () => ({ CodeEditor: ({ label }: { label: string }) => <div>{label}</div> }));
+vi.mock("./_custom-widget-preview-action", () => ({ PreviewActionControl: () => <div>action-control</div> }));
+
+let root: Root;
+let host: HTMLDivElement;
+
+beforeEach(() => {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    },
+  );
+  window.matchMedia = vi.fn().mockImplementation(() => ({
+    matches: false,
+    media: "",
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+
+afterEach(async () => {
+  await act(() => root.unmount());
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("Custom Widget preview panel", () => {
+  test("contains invalid definitions inside the widget canvas while keeping every inspection tab", async () => {
+    await act(async () => {
+      root.render(
+        <MantineProvider>
+          <CustomWidgetPreviewPanel
+            candidate={null}
+            validationIssues={[{ path: "sources.0.baseUrl", message: "Enter a complete URL." }]}
+            preview={{ data: { previous: true }, status: {}, session: null, outcome: "idle" }}
+            size="standard"
+            onSizeChange={vi.fn()}
+            theme="dark"
+            onThemeChange={vi.fn()}
+            optionsSnapshot={{}}
+            onOptionsChange={vi.fn()}
+            onLiveActionsChange={vi.fn()}
+          />
+        </MantineProvider>,
+      );
+    });
+
+    const previewCanvas = host.querySelector('[class*="previewCanvas"]');
+    expect(previewCanvas?.textContent).toContain("invalid");
+    for (const tab of ["widget", "data", "options", "actions", "diagnostics"]) {
+      expect(host.textContent).toContain(`tab.${tab}`);
+    }
+
+    const dataTab = [...host.querySelectorAll<HTMLElement>('[role="tab"]')].find((element) =>
+      element.textContent?.includes("tab.data"),
+    );
+    await act(async () => dataTab?.click());
+    expect(host.textContent).toContain("requestData");
+    expect(host.textContent).not.toContain("invalid");
+
+    const optionsTab = [...host.querySelectorAll<HTMLElement>('[role="tab"]')].find((element) =>
+      element.textContent?.includes("tab.options"),
+    );
+    await act(async () => optionsTab?.click());
+    expect(host.textContent).toContain("instanceOptions");
+    expect(host.textContent).not.toContain("invalid");
+
+    const actionsTab = [...host.querySelectorAll<HTMLElement>('[role="tab"]')].find((element) =>
+      element.textContent?.includes("tab.actions"),
+    );
+    await act(async () => actionsTab?.click());
+    expect(host.textContent).toContain("liveActions");
+    expect(host.textContent).not.toContain("invalid");
+
+    const diagnosticsTab = [...host.querySelectorAll<HTMLElement>('[role="tab"]')].find((element) =>
+      element.textContent?.includes("tab.diagnostics"),
+    );
+    expect(diagnosticsTab).toBeDefined();
+    await act(async () => diagnosticsTab?.click());
+
+    expect(host.textContent).toContain("sources.0.baseUrl");
+    expect(host.textContent).toContain("Enter a complete URL.");
+  });
+
+  test("contains renderer failures inside the widget tab and keeps the inspection tabs usable", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => undefined);
+    rendererAttempt.mockClear();
+    const bundledWidget = BUNDLED_CUSTOM_WIDGETS.at(0);
+    if (!bundledWidget) throw new Error("Expected at least one bundled Custom Widget");
+    const candidate = customWidgetDefinitionSchema.parse(bundledWidget.widget);
+    const preview = { data: {}, status: {}, session: null, outcome: "idle" } as const;
+    const failingOptions = { throwPreview: true };
+
+    await act(async () => {
+      root.render(
+        <MantineProvider>
+          <CustomWidgetPreviewPanel
+            candidate={{
+              ...candidate,
+              requests: Object.fromEntries(
+                Object.entries(candidate.requests).map(([id, request]) => [id, { ...request }]),
+              ),
+            }}
+            validationIssues={[]}
+            preview={preview}
+            size="standard"
+            onSizeChange={vi.fn()}
+            theme="dark"
+            onThemeChange={vi.fn()}
+            optionsSnapshot={{ ...failingOptions }}
+            onOptionsChange={vi.fn()}
+            onLiveActionsChange={vi.fn()}
+          />
+        </MantineProvider>,
+      );
+    });
+
+    expect(host.textContent).toContain("title");
+    expect(host.querySelector('[class*="previewCanvas"]')?.textContent).toContain("title");
+    for (const tab of ["widget", "data", "options", "actions", "diagnostics"]) {
+      expect(host.textContent).toContain(`tab.${tab}`);
+    }
+    const attemptsAfterFailure = rendererAttempt.mock.calls.length;
+
+    await act(async () => {
+      root.render(
+        <MantineProvider>
+          <CustomWidgetPreviewPanel
+            candidate={candidate}
+            validationIssues={[]}
+            preview={preview}
+            size="standard"
+            onSizeChange={vi.fn()}
+            theme="dark"
+            onThemeChange={vi.fn()}
+            optionsSnapshot={failingOptions}
+            onOptionsChange={vi.fn()}
+            onLiveActionsChange={vi.fn()}
+          />
+        </MantineProvider>,
+      );
+    });
+    expect(rendererAttempt).toHaveBeenCalledTimes(attemptsAfterFailure);
+
+    const dataTab = [...host.querySelectorAll<HTMLElement>('[role="tab"]')].find((element) =>
+      element.textContent?.includes("tab.data"),
+    );
+    await act(async () => dataTab?.click());
+    expect(host.textContent).toContain("requestData");
+
+    const diagnosticsTab = [...host.querySelectorAll<HTMLElement>('[role="tab"]')].find((element) =>
+      element.textContent?.includes("tab.diagnostics"),
+    );
+    await act(async () => diagnosticsTab?.click());
+    expect(host.textContent).toContain("validation.title");
+
+    const widgetTab = [...host.querySelectorAll<HTMLElement>('[role="tab"]')].find((element) =>
+      element.textContent?.includes("tab.widget"),
+    );
+    await act(async () => widgetTab?.click());
+    await act(async () => {
+      root.render(
+        <MantineProvider>
+          <CustomWidgetPreviewPanel
+            candidate={candidate}
+            validationIssues={[]}
+            preview={preview}
+            size="standard"
+            onSizeChange={vi.fn()}
+            theme="dark"
+            onThemeChange={vi.fn()}
+            optionsSnapshot={{}}
+            onOptionsChange={vi.fn()}
+            onLiveActionsChange={vi.fn()}
+          />
+        </MantineProvider>,
+      );
+    });
+    expect(host.textContent).toContain("widget-renderer");
+  });
+});
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-panel.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-panel.tsx
new file mode 100644
index 000000000..a12d52d85
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-panel.tsx
@@ -0,0 +1,273 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Alert,
+  Badge,
+  Box,
+  Card,
+  Group,
+  MantineProvider,
+  Paper,
+  SegmentedControl,
+  Stack,
+  Switch,
+  Tabs,
+  Text,
+} from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import type { HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
+import { analyzeCustomWidgetAccessibility, PreviewErrorBoundary } from "@homarr/custom-widgets/workbench";
+import { showErrorNotification } from "@homarr/notifications";
+import { useScopedI18n } from "@homarr/translation/client";
+import CustomJsxDisplay from "@homarr/widgets/custom-api/custom-jsx-display";
+
+import { CodeEditor } from "./_code-editor";
+import { getPreviewSummary, PreviewResult, PreviewStatusDot } from "./_custom-widget-preview-status";
+import type { PreviewOutcome } from "./_custom-widget-preview-status";
+import { PreviewActionControl } from "./_custom-widget-preview-action";
+import { createPreviewDisplayData } from "./_custom-widget-preview-data";
+import { JsonPreviewEditor } from "./_json-preview-editor";
+import classes from "./_custom-widget-form.module.css";
+
+export interface PreviewState {
+  data: Record<string, unknown>;
+  status: Record<string, unknown>;
+  session: { id: string; expiresAt: number; liveActions: boolean } | null;
+  outcome: PreviewOutcome;
+}
+
+interface PreviewPanelProps {
+  candidate: HomarrCustomWidgetV2 | null;
+  validationIssues: Array<{ path?: string; message: string }>;
+  preview: PreviewState;
+  size: string;
+  onSizeChange(value: string): void;
+  theme: "light" | "dark";
+  onThemeChange(value: "light" | "dark"): void;
+  optionsSnapshot: Record<string, unknown>;
+  onOptionsChange(value: Record<string, unknown>): void;
+  onLiveActionsChange(enabled: boolean): void;
+}
+
+export function CustomWidgetPreviewPanel(props: PreviewPanelProps) {
+  const t = useScopedI18n("customWidget.workbench.preview");
+  const errorBoundaryMessages = useScopedI18n("customWidget.editor.errorBoundary");
+  const [fixture, setFixture] = useState<"live" | "loading" | "empty" | "error">("live");
+  const liveActionsMutation = clientApi.customWidget.setPreviewLiveActions.useMutation();
+  const journalQuery = clientApi.customWidget.previewJournal.useQuery(
+    { sessionId: props.preview.session?.id ?? "" },
+    { enabled: Boolean(props.preview.session), refetchInterval: props.preview.session ? 2_000 : false },
+  );
+  const widths: Record<string, number> = { compact: 320, standard: 480, wide: 720 };
+  const candidate = props.candidate;
+  const accessibilityIssues = candidate ? analyzeCustomWidgetAccessibility(candidate.template) : [];
+  const displayData = createPreviewDisplayData({
+    candidate,
+    fixture,
+    preview: props.preview,
+    options: props.optionsSnapshot,
+    fixtureError: t("fixtureError"),
+  });
+  const previewSummary = getPreviewSummary(props.preview.status);
+  const rendererResetKey = JSON.stringify({
+    template: candidate?.template,
+    requests: candidate?.requests,
+    fixture,
+    data: props.preview.data,
+    status: props.preview.status,
+    sessionId: props.preview.session?.id,
+    options: props.optionsSnapshot,
+  });
+  const previewResult =
+    props.preview.outcome === "success"
+      ? {
+          title: t("result.success.title"),
+          description: t("result.success.description", previewSummary),
+        }
+      : props.preview.outcome === "error"
+        ? {
+            title: t("result.error.title"),
+            description: t("result.error.description", previewSummary),
+          }
+        : props.preview.outcome === "loading"
+          ? { title: t("result.loading.title"), description: t("result.loading.description") }
+          : { title: "", description: "" };
+
+  return (
+    <Card withBorder p="md">
+      <Stack gap="md">
+        <Group grow>
+          <SegmentedControl
+            size="xs"
+            value={props.size}
+            onChange={props.onSizeChange}
+            data={[
+              { value: "compact", label: t("size.compact") },
+              { value: "standard", label: t("size.standard") },
+              { value: "wide", label: t("size.wide") },
+            ]}
+          />
+          <SegmentedControl
+            size="xs"
+            value={props.theme}
+            onChange={(value) => props.onThemeChange(value as "light" | "dark")}
+            data={[
+              { value: "light", label: t("theme.light") },
+              { value: "dark", label: t("theme.dark") },
+            ]}
+          />
+        </Group>
+        <SegmentedControl
+          size="xs"
+          value={fixture}
+          disabled={!candidate}
+          onChange={(value) => setFixture(value as typeof fixture)}
+          data={[
+            { value: "live", label: t("fixture.live") },
+            { value: "loading", label: t("fixture.loading") },
+            { value: "empty", label: t("fixture.empty") },
+            { value: "error", label: t("fixture.error") },
+          ]}
+        />
+        {candidate && (
+          <PreviewResult
+            outcome={props.preview.outcome}
+            title={previewResult.title}
+            description={previewResult.description}
+          />
+        )}
+        <Tabs defaultValue="widget" keepMounted={false}>
+          <Tabs.List grow>
+            {(["widget", "data", "options", "actions", "diagnostics"] as const).map((tab) => (
+              <Tabs.Tab key={tab} value={tab}>
+                <Group gap={6} wrap="nowrap" justify="center">
+                  {t(`tab.${tab}`)}
+                  {tab === "data" && (
+                    <PreviewStatusDot outcome={props.preview.outcome} label={t(`status.${props.preview.outcome}`)} />
+                  )}
+                </Group>
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+          <Tabs.Panel value="widget" pt="sm">
+            <Box className={classes.previewCanvas}>
+              <MantineProvider forceColorScheme={props.theme}>
+                <Paper withBorder p="sm" h={360} w={widths[props.size] ?? 480} maw="100%" style={{ overflow: "auto" }}>
+                  {displayData ? (
+                    <PreviewErrorBoundary
+                      title={errorBoundaryMessages("title")}
+                      description={t("containedFailures")}
+                      retryLabel={errorBoundaryMessages("retry")}
+                      resetKeys={[rendererResetKey]}
+                    >
+                      <CustomJsxDisplay data={displayData} />
+                    </PreviewErrorBoundary>
+                  ) : (
+                    <Alert color="yellow">{t("invalid")}</Alert>
+                  )}
+                </Paper>
+              </MantineProvider>
+            </Box>
+          </Tabs.Panel>
+          <Tabs.Panel value="data" pt="sm">
+            <CodeEditor
+              id="preview-data"
+              label={t("requestData")}
+              language="json"
+              value={JSON.stringify({ data: props.preview.data, status: props.preview.status }, null, 2)}
+              onChange={() => undefined}
+            />
+          </Tabs.Panel>
+          <Tabs.Panel value="options" pt="sm">
+            <JsonPreviewEditor
+              id="preview-options"
+              label={t("instanceOptions")}
+              value={props.optionsSnapshot}
+              onChange={props.onOptionsChange}
+            />
+          </Tabs.Panel>
+          <Tabs.Panel value="actions" pt="sm">
+            <Stack gap="sm">
+              <Switch
+                label={t("liveActions")}
+                description={t("liveActionsDescription")}
+                checked={props.preview.session?.liveActions ?? false}
+                disabled={!props.preview.session || liveActionsMutation.isPending}
+                onChange={(event) => {
+                  if (!props.preview.session) return;
+                  const enabled = event.currentTarget.checked;
+                  liveActionsMutation.mutate(
+                    { sessionId: props.preview.session.id, enabled },
+                    {
+                      onSuccess: () => props.onLiveActionsChange(enabled),
+                      onError: (error) => showErrorNotification({ title: t("liveActions"), message: error.message }),
+                    },
+                  );
+                }}
+              />
+              {Object.entries(candidate?.requests ?? {})
+                .filter(([, request]) => request.kind === "action")
+                .map(([id, request]) => (
+                  <PreviewActionControl key={id} request={{ id, ...request }} sessionId={props.preview.session?.id} />
+                ))}
+              {Object.values(candidate?.requests ?? {}).every((request) => request.kind !== "action") && (
+                <Text size="sm" c="dimmed">
+                  {t("noActions")}
+                </Text>
+              )}
+            </Stack>
+          </Tabs.Panel>
+          <Tabs.Panel value="diagnostics" pt="sm">
+            <Stack gap="xs">
+              {props.preview.session ? (
+                <Badge color="green">{t("sessionActive")}</Badge>
+              ) : (
+                <Badge color="gray">{t("simulationPending")}</Badge>
+              )}
+              <Text size="sm" c="dimmed">
+                {t("containedFailures")}
+              </Text>
+              <Text size="sm" fw={600}>
+                {t("validation.title")}
+              </Text>
+              {props.validationIssues.length === 0 ? (
+                <Alert color="green">{t("validation.ready")}</Alert>
+              ) : (
+                props.validationIssues.map((issue, index) => (
+                  <Alert key={`${issue.path ?? "widget"}-${index}`} color="red" title={issue.path}>
+                    {issue.message}
+                  </Alert>
+                ))
+              )}
+              <Text size="sm" fw={600}>
+                {t("accessibility.title")}
+              </Text>
+              {!candidate ? (
+                <Alert color="gray">{t("accessibility.pending")}</Alert>
+              ) : accessibilityIssues.length === 0 ? (
+                <Alert color="green">{t("accessibility.ready")}</Alert>
+              ) : (
+                accessibilityIssues.map((issue) => (
+                  <Alert key={issue} color="yellow">
+                    {t(`accessibility.${issue}`)}
+                  </Alert>
+                ))
+              )}
+              {props.preview.session && (
+                <CodeEditor
+                  id="preview-journal"
+                  label={t("journal")}
+                  language="json"
+                  value={JSON.stringify(journalQuery.data ?? [], null, 2)}
+                  onChange={() => undefined}
+                />
+              )}
+            </Stack>
+          </Tabs.Panel>
+        </Tabs>
+      </Stack>
+    </Card>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-status.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-status.tsx
new file mode 100644
index 000000000..28d729f00
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview-status.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { Alert, Box, Text, Tooltip } from "@mantine/core";
+
+import { isRecord } from "./_custom-widget-form-utils";
+
+export type PreviewOutcome = "idle" | "loading" | "success" | "error";
+
+export function PreviewResult({
+  outcome,
+  title,
+  description,
+}: {
+  outcome: PreviewOutcome;
+  title: string;
+  description: string;
+}) {
+  if (outcome === "idle") return null;
+  return (
+    <Alert color={outcome === "error" ? "red" : outcome === "success" ? "green" : "yellow"}>
+      <Text size="sm" fw={600}>
+        {title}
+      </Text>
+      <Text size="sm">{description}</Text>
+    </Alert>
+  );
+}
+
+export function PreviewStatusDot({ outcome, label }: { outcome: PreviewOutcome; label: string }) {
+  const colors = { idle: "gray", loading: "yellow", success: "green", error: "red" } as const;
+  return (
+    <Tooltip label={label}>
+      <Box
+        component="output"
+        aria-label={label}
+        w={8}
+        h={8}
+        bg={`var(--mantine-color-${colors[outcome]}-6)`}
+        style={{ borderRadius: "50%", flexShrink: 0 }}
+      />
+    </Tooltip>
+  );
+}
+
+export function getPreviewSummary(status: Record<string, unknown>) {
+  return Object.values(status).reduce<{ succeeded: number; failed: number }>(
+    (summary, value) => {
+      if (isRecord(value) && value.ok === false) summary.failed += 1;
+      else summary.succeeded += 1;
+      return summary;
+    },
+    { succeeded: 0, failed: 0 },
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview.tsx
deleted file mode 100644
index 25a53ffd2..000000000
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import { Alert, Badge, Button, Card, Center, Code, Group, Loader, ScrollArea, Stack, Text, Title } from "@mantine/core";
-import { IconAlertTriangle, IconExternalLink, IconPlayerPlay } from "@tabler/icons-react";
-
-import { useScopedI18n } from "@homarr/translation/client";
-import { extractDisplayData } from "@homarr/widgets/custom-api/extract-display-data";
-
-import { displayComponents } from "@homarr/widgets/custom-api/component";
-
-interface PreviewInput {
-  url: string;
-  method: string;
-  authType: string;
-  headerName?: string;
-  requestBody?: string;
-  displayType: string;
-  displayConfig: Record<string, unknown>;
-  secrets: Array<{ kind: string; value: string }>;
-  definitionId?: string;
-}
-
-export interface PreviewFetchResult {
-  success: boolean;
-  error?: string;
-  responseInfo: { status: number; statusText: string } | null;
-  rawResponse: string | null;
-}
-
-interface CustomWidgetPreviewProps {
-  getFormValues: () => PreviewInput;
-  formValues: PreviewInput;
-  fetchResult: PreviewFetchResult | null;
-  cachedJson: unknown;
-  onTest: () => void;
-  isTesting: boolean;
-  testError?: string | null;
-}
-
-export function CustomWidgetPreview({
-  getFormValues,
-  formValues,
-  fetchResult,
-  cachedJson,
-  onTest,
-  isTesting,
-  testError,
-}: CustomWidgetPreviewProps) {
-  const t = useScopedI18n("customWidget");
-
-  const displayData = useMemo((): Record<string, unknown> | null => {
-    const { displayType, displayConfig } = formValues;
-    if (displayType === "actionButton") {
-      return extractDisplayData(null, displayType, displayConfig) as Record<string, unknown>;
-    }
-    if (!fetchResult?.success || cachedJson == null) return null;
-    return extractDisplayData(cachedJson, displayType, displayConfig) as Record<string, unknown>;
-  }, [fetchResult?.success, cachedJson, formValues]);
-
-  const handleTest = () => {
-    const values = getFormValues();
-    if (!values.url) return;
-    onTest();
-  };
-
-  return (
-    <Card withBorder shadow="sm" p="md">
-      <Stack gap="sm">
-        <Group justify="space-between" align="center">
-          <Title order={5}>{t("preview.title")}</Title>
-          <Button
-            size="xs"
-            variant="light"
-            leftSection={isTesting ? <Loader size={14} /> : <IconPlayerPlay size={14} />}
-            onClick={handleTest}
-            loading={isTesting}
-          >
-            {t("preview.test")}
-          </Button>
-        </Group>
-
-        {testError && (
-          <Alert color="red" icon={<IconAlertTriangle size={16} />} p="xs">
-            <Text size="xs">{testError}</Text>
-          </Alert>
-        )}
-
-        {fetchResult && !fetchResult.success && (
-          <Alert color="red" icon={<IconAlertTriangle size={16} />} p="xs">
-            <Text size="xs" fw={500}>
-              {fetchResult.error}
-            </Text>
-            {fetchResult.responseInfo && (
-              <Badge size="xs" color="red" variant="light" mt={4}>
-                {fetchResult.responseInfo.status} {fetchResult.responseInfo.statusText}
-              </Badge>
-            )}
-          </Alert>
-        )}
-
-        {displayData && (formValues.displayType === "actionButton" || fetchResult?.success) && (
-          <Stack gap="xs">
-            {fetchResult?.success && (
-              <Group gap="xs">
-                <Badge size="xs" color="green" variant="light">
-                  {fetchResult.responseInfo?.status} {fetchResult.responseInfo?.statusText}
-                </Badge>
-              </Group>
-            )}
-
-            <Card withBorder p="xs" bg="var(--mantine-color-dark-7)" mah={320} style={{ overflow: "auto" }}>
-              <PreviewDisplay data={displayData} />
-            </Card>
-
-            {fetchResult?.success && fetchResult.rawResponse && (
-              <Button
-                size="xs"
-                variant="subtle"
-                leftSection={<IconExternalLink size={14} />}
-                onClick={() => {
-                  const blob = new Blob([fetchResult.rawResponse ?? ""], {
-                    type: "application/json",
-                  });
-                  const blobUrl = URL.createObjectURL(blob);
-                  window.open(blobUrl);
-                  setTimeout(() => URL.revokeObjectURL(blobUrl), 60_000);
-                }}
-              >
-                {t("preview.rawResponse")}
-              </Button>
-            )}
-          </Stack>
-        )}
-
-        {!displayData && !testError && !isTesting && (
-          <Text size="xs" c="dimmed" ta="center">
-            {t("preview.hint")}
-          </Text>
-        )}
-      </Stack>
-    </Card>
-  );
-}
-
-function PreviewDisplay({ data }: { data: unknown }) {
-  const typed = data as Record<string, unknown>;
-  if (!typed || typeof typed !== "object") {
-    return (
-      <Text size="xs" c="dimmed">
-        No data
-      </Text>
-    );
-  }
-
-  const dataType = typed.type as string | undefined;
-
-  if (dataType === "actionButton") {
-    return (
-      <Center p="sm">
-        <Button size="sm" color={(typed.buttonColor as string) ?? "blue"} disabled>
-          {(typed.buttonLabel as string) ?? "Execute"}
-        </Button>
-      </Center>
-    );
-  }
-
-  const Component = dataType ? displayComponents[dataType] : undefined;
-  if (Component) {
-    return <Component data={typed} />;
-  }
-
-  return (
-    <ScrollArea h={100}>
-      <Code block style={{ fontSize: 11 }}>
-        {JSON.stringify(data, null, 2)}
-      </Code>
-    </ScrollArea>
-  );
-}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-rename-handlers.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-rename-handlers.ts
new file mode 100644
index 000000000..e8d24cc96
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-rename-handlers.ts
@@ -0,0 +1,38 @@
+import { renameCustomWidgetOption, renameCustomWidgetRequest } from "@homarr/custom-widgets/workbench";
+
+import { applyDefinition } from "./_custom-widget-form-utils";
+import type { buildDefinition, CustomWidgetWorkbenchForm } from "./_custom-widget-form-utils";
+
+interface RenameHandlersInput {
+  form: CustomWidgetWorkbenchForm;
+  candidate: ReturnType<typeof buildDefinition>;
+  invalidWidgetMessage: string;
+}
+
+export function createCustomWidgetRenameHandlers(input: RenameHandlersInput) {
+  const renameRequest = (currentId: string, nextId: string) => {
+    if (!input.candidate.success) {
+      input.form.setFieldError("requests", input.invalidWidgetMessage);
+      return;
+    }
+    try {
+      applyDefinition(input.form, renameCustomWidgetRequest(input.candidate.data, currentId, nextId));
+      input.form.clearFieldError("requests");
+    } catch (error) {
+      input.form.setFieldError("requests", error instanceof Error ? error.message : input.invalidWidgetMessage);
+    }
+  };
+  const renameOption = (currentName: string, nextName: string) => {
+    if (!input.candidate.success) {
+      input.form.setFieldError("options", input.invalidWidgetMessage);
+      return;
+    }
+    try {
+      applyDefinition(input.form, renameCustomWidgetOption(input.candidate.data, currentName, nextName));
+      input.form.clearFieldError("options");
+    } catch (error) {
+      input.form.setFieldError("options", error instanceof Error ? error.message : input.invalidWidgetMessage);
+    }
+  };
+  return { renameRequest, renameOption };
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-request-value-editors.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-request-value-editors.tsx
new file mode 100644
index 000000000..89a891193
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-request-value-editors.tsx
@@ -0,0 +1,228 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ActionIcon, Button, Group, Select, Stack, Text, TextInput } from "@mantine/core";
+import { IconPlus, IconTrash } from "@tabler/icons-react";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { CodeEditor } from "./_code-editor";
+import { isRecord } from "./_custom-widget-form-utils";
+import { CustomWidgetIdentifierInput } from "./_custom-widget-identifier-input";
+
+export function QueryValuesEditor({
+  value,
+  optionNames,
+  allowParams,
+  onChange,
+}: {
+  value: Record<string, unknown>;
+  optionNames: string[];
+  allowParams: boolean;
+  onChange(value: Record<string, unknown>): void;
+}) {
+  const t = useScopedI18n("customWidget.workbench.builder");
+  const entries = Object.entries(value);
+  const [nameErrors, setNameErrors] = useState<Record<number, string>>({});
+  return (
+    <Stack gap="xs">
+      <Text size="sm" fw={500}>
+        {t("queryValues")}
+      </Text>
+      {entries.map(([name, bound], index) => {
+        const kind =
+          isRecord(bound) && typeof bound.$option === "string"
+            ? "option"
+            : isRecord(bound) && typeof bound.$param === "string"
+              ? "param"
+              : "literal";
+        const current =
+          kind === "option"
+            ? String((bound as Record<string, unknown>).$option)
+            : kind === "param"
+              ? String((bound as Record<string, unknown>).$param)
+              : String(bound ?? "");
+        const commit = (nextName: string, nextKind: string, nextValue: string) =>
+          onChange(
+            Object.fromEntries(
+              entries.map(([key, child], i) =>
+                i === index
+                  ? [
+                      nextName,
+                      nextKind === "option"
+                        ? { $option: nextValue }
+                        : nextKind === "param"
+                          ? { $param: nextValue }
+                          : parseLiteral(nextValue),
+                    ]
+                  : [key, child],
+              ),
+            ),
+          );
+        const sourceChoices = [
+          { value: "literal", label: t("literal") },
+          { value: "option", label: t("widgetOption") },
+          ...(allowParams ? [{ value: "param", label: t("invocationParameter") }] : []),
+        ];
+        return (
+          <Group key={index} align="end" wrap="wrap">
+            <CustomWidgetIdentifierInput
+              style={{ flex: "1 1 10rem" }}
+              label={t("queryKey")}
+              value={name}
+              error={nameErrors[index]}
+              onCommit={(nextName) => {
+                if (
+                  !/^[A-Za-z][A-Za-z0-9_-]*$/u.test(nextName) ||
+                  entries.some(([entryName], entryIndex) => entryIndex !== index && entryName === nextName)
+                ) {
+                  setNameErrors((currentErrors) => ({ ...currentErrors, [index]: t("queryKeyInvalid") }));
+                  return;
+                }
+                setNameErrors((currentErrors) => {
+                  const nextErrors = { ...currentErrors };
+                  delete nextErrors[index];
+                  return nextErrors;
+                });
+                commit(nextName, kind, current);
+              }}
+            />
+            <Select
+              style={{ flex: "1 1 10rem" }}
+              label={t("valueSource")}
+              data={sourceChoices}
+              value={kind}
+              allowDeselect={false}
+              onChange={(nextKind) => commit(name, nextKind ?? "literal", current)}
+            />
+            {kind === "option" ? (
+              <Select
+                style={{ flex: "1 1 10rem" }}
+                label={t("option")}
+                data={optionNames}
+                value={current}
+                searchable
+                onChange={(next) => commit(name, kind, next ?? "")}
+              />
+            ) : (
+              <TextInput
+                style={{ flex: "1 1 10rem" }}
+                label={kind === "param" ? t("parameterName") : t("value")}
+                value={current}
+                onChange={(event) => commit(name, kind, event.currentTarget.value)}
+              />
+            )}
+            <ActionIcon
+              type="button"
+              color="red"
+              variant="subtle"
+              aria-label={t("removeQueryValue")}
+              onClick={() => onChange(Object.fromEntries(entries.filter((_, i) => i !== index)))}
+            >
+              <IconTrash size={16} />
+            </ActionIcon>
+          </Group>
+        );
+      })}
+      <Button
+        type="button"
+        size="compact-sm"
+        variant="subtle"
+        leftSection={<IconPlus size={14} />}
+        onClick={() => onChange({ ...value, [`value${entries.length + 1}`]: "" })}
+      >
+        {t("addQueryValue")}
+      </Button>
+    </Stack>
+  );
+}
+
+export function RequestBodyEditor({
+  id,
+  value,
+  optionNames,
+  allowParams,
+  onChange,
+}: {
+  id: string;
+  value: unknown;
+  optionNames: string[];
+  allowParams: boolean;
+  onChange(value: unknown): void;
+}) {
+  const t = useScopedI18n("customWidget.workbench.builder");
+  const serialized = value === undefined ? "" : JSON.stringify(value, null, 2);
+  const [draft, setDraft] = useState(serialized);
+  const [error, setError] = useState<string>();
+  const [optionName, setOptionName] = useState<string | null>(optionNames[0] ?? null);
+  const [parameterName, setParameterName] = useState("");
+  const [insertion, setInsertion] = useState({ text: "", key: 0 });
+  useEffect(() => setDraft(serialized), [serialized]);
+  return (
+    <Stack gap="xs">
+      <CodeEditor
+        id={`${id}-request-body-editor`}
+        label={t("jsonBody")}
+        description={t("jsonBodyDescription")}
+        language="json"
+        value={draft}
+        height="160px"
+        error={error}
+        insertText={insertion.text}
+        insertKey={insertion.key}
+        onChange={(next) => {
+          setDraft(next);
+          try {
+            onChange(next.trim() ? (JSON.parse(next) as unknown) : undefined);
+            setError(undefined);
+          } catch (cause) {
+            setError(cause instanceof Error ? cause.message : t("invalidJson"));
+          }
+        }}
+      />
+      <Group align="end" wrap="wrap">
+        <Select label={t("option")} data={optionNames} value={optionName} searchable onChange={setOptionName} />
+        <Button
+          type="button"
+          variant="light"
+          disabled={!optionName}
+          onClick={() =>
+            optionName &&
+            setInsertion((current) => ({ text: JSON.stringify({ $option: optionName }), key: current.key + 1 }))
+          }
+        >
+          {t("insertOptionReference")}
+        </Button>
+        {allowParams && (
+          <>
+            <TextInput
+              label={t("parameterName")}
+              value={parameterName}
+              onChange={(event) => setParameterName(event.currentTarget.value)}
+            />
+            <Button
+              type="button"
+              variant="light"
+              disabled={!parameterName.trim()}
+              onClick={() =>
+                setInsertion((current) => ({
+                  text: JSON.stringify({ $param: parameterName.trim() }),
+                  key: current.key + 1,
+                }))
+              }
+            >
+              {t("insertParameterReference")}
+            </Button>
+          </>
+        )}
+      </Group>
+    </Stack>
+  );
+}
+
+function parseLiteral(value: string): string | number | boolean {
+  if (value === "true") return true;
+  if (value === "false") return false;
+  if (/^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?$/u.test(value.trim())) return Number(value);
+  return value;
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-requests-editor.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-requests-editor.tsx
new file mode 100644
index 000000000..17236d9e8
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-requests-editor.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import { Accordion, ActionIcon, Button, Fieldset, Group, Select, Stack, Switch, Text, TextInput } from "@mantine/core";
+import { IconArrowDown, IconArrowUp, IconPlus, IconTrash } from "@tabler/icons-react";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { isRecord, parseJson } from "./_custom-widget-form-utils";
+import type { CustomWidgetWorkbenchForm } from "./_custom-widget-form-utils";
+import { QueryValuesEditor, RequestBodyEditor } from "./_custom-widget-request-value-editors";
+import { CustomWidgetIdentifierInput } from "./_custom-widget-identifier-input";
+
+const methods = ["GET", "POST", "PUT", "PATCH", "DELETE"];
+
+export function CustomWidgetRequestsEditor({
+  form,
+  onRename,
+}: {
+  form: CustomWidgetWorkbenchForm;
+  onRename(currentId: string, nextId: string): void;
+}) {
+  const t = useScopedI18n("customWidget.workbench.builder");
+  const parsed = parseJson(form.values.requests);
+  const entries = isRecord(parsed) ? Object.entries(parsed) : [];
+  const sources = parseJson(form.values.sources);
+  const sourceIds = isRecord(sources) ? Object.keys(sources) : ["default"];
+
+  const commit = (next: Array<[string, unknown]>) =>
+    form.setFieldValue("requests", JSON.stringify(Object.fromEntries(next), null, 2));
+  const update = (index: number, id: string, request: Record<string, unknown>) =>
+    commit(entries.map((entry, i) => (i === index ? [id, request] : entry)));
+  const remove = (index: number) => commit(entries.filter((_, i) => i !== index));
+  const move = (index: number, direction: -1 | 1) => {
+    const next = [...entries];
+    const target = index + direction;
+    if (!next[index] || !next[target]) return;
+    [next[index], next[target]] = [next[target], next[index]];
+    commit(next);
+  };
+  const add = () => {
+    let suffix = entries.length + 1;
+    while (entries.some(([id]) => id === `request-${suffix}`)) suffix += 1;
+    commit([...entries, [`request-${suffix}`, { path: "/api/data" }]]);
+  };
+
+  return (
+    <Stack gap="sm">
+      {entries.map(([id, rawRequest], index) => {
+        const request = isRecord(rawRequest) ? rawRequest : {};
+        const kind = request.kind === "action" ? "action" : "query";
+        const trigger = request.trigger === "manual" ? "manual" : "load";
+        return (
+          <Fieldset key={index} legend={id || t("request", { count: index + 1 })}>
+            <Stack gap="sm">
+              <Group grow align="start">
+                <CustomWidgetIdentifierInput
+                  label={t("requestId")}
+                  value={id}
+                  error={form.errors.requests}
+                  onCommit={(value) => onRename(id, value)}
+                />
+                <Select
+                  label={t("type")}
+                  data={["query", "action"]}
+                  value={kind}
+                  allowDeselect={false}
+                  onChange={(value) =>
+                    update(index, id, {
+                      ...request,
+                      kind: value,
+                      ...(value === "action" ? { trigger: "manual" } : {}),
+                    })
+                  }
+                />
+                <Select
+                  label={t("method")}
+                  data={methods}
+                  value={typeof request.method === "string" ? request.method : "GET"}
+                  allowDeselect={false}
+                  onChange={(value) =>
+                    update(index, id, {
+                      ...request,
+                      method: value,
+                      ...(value === "DELETE" ? { permission: "full" } : {}),
+                    })
+                  }
+                />
+              </Group>
+              <Group grow align="start">
+                <Select
+                  label={t("source")}
+                  data={sourceIds}
+                  value={typeof request.source === "string" ? request.source : "default"}
+                  allowDeselect={false}
+                  onChange={(value) => update(index, id, { ...request, source: value })}
+                />
+                {kind === "query" && (
+                  <Select
+                    label={t("run")}
+                    data={[
+                      { value: "load", label: t("runLoad") },
+                      { value: "manual", label: t("runManual") },
+                    ]}
+                    value={trigger}
+                    allowDeselect={false}
+                    onChange={(value) => update(index, id, { ...request, trigger: value })}
+                  />
+                )}
+                <Select
+                  label={t("permission")}
+                  data={["view", "modify", "full"]}
+                  value={
+                    typeof request.permission === "string" ? request.permission : kind === "action" ? "modify" : "view"
+                  }
+                  allowDeselect={false}
+                  onChange={(value) => update(index, id, { ...request, permission: value })}
+                />
+              </Group>
+              <TextInput
+                label={t("path")}
+                description={t("pathDescription")}
+                value={typeof request.path === "string" ? request.path : ""}
+                onChange={(event) => update(index, id, { ...request, path: event.currentTarget.value })}
+              />
+              <Accordion variant="contained">
+                <Accordion.Item value="values">
+                  <Accordion.Control>{t("requestDetails")}</Accordion.Control>
+                  <Accordion.Panel>
+                    <Stack gap="sm">
+                      <QueryValuesEditor
+                        value={isRecord(request.query) ? request.query : {}}
+                        optionNames={Object.keys(
+                          isRecord(parseJson(form.values.options))
+                            ? (parseJson(form.values.options) as Record<string, unknown>)
+                            : {},
+                        )}
+                        allowParams={trigger === "manual" || kind === "action"}
+                        onChange={(query) => update(index, id, { ...request, query })}
+                      />
+                      <RequestBodyEditor
+                        id={id}
+                        value={request.body}
+                        optionNames={Object.keys(
+                          isRecord(parseJson(form.values.options))
+                            ? (parseJson(form.values.options) as Record<string, unknown>)
+                            : {},
+                        )}
+                        allowParams={trigger === "manual" || kind === "action"}
+                        onChange={(body) => update(index, id, { ...request, body })}
+                      />
+                      {kind === "action" && (
+                        <TextInput
+                          label={t("confirmation")}
+                          value={typeof request.confirmation === "string" ? request.confirmation : ""}
+                          onChange={(event) =>
+                            update(index, id, { ...request, confirmation: event.currentTarget.value || undefined })
+                          }
+                        />
+                      )}
+                      {kind === "action" && (
+                        <TextInput
+                          label={t("invalidation")}
+                          description={t("invalidationDescription")}
+                          value={Array.isArray(request.invalidates) ? request.invalidates.join(", ") : ""}
+                          onChange={(event) =>
+                            update(index, id, {
+                              ...request,
+                              invalidates: event.currentTarget.value
+                                .split(",")
+                                .map((value) => value.trim())
+                                .filter(Boolean),
+                            })
+                          }
+                        />
+                      )}
+                      <Switch
+                        label={t("noAuth")}
+                        checked={request.auth === "none"}
+                        onChange={(event) =>
+                          update(index, id, { ...request, auth: event.currentTarget.checked ? "none" : "inherit" })
+                        }
+                      />
+                    </Stack>
+                  </Accordion.Panel>
+                </Accordion.Item>
+              </Accordion>
+              <Group justify="space-between">
+                <Group gap="xs">
+                  <ActionIcon
+                    type="button"
+                    variant="subtle"
+                    aria-label={t("moveRequestUp")}
+                    disabled={index === 0}
+                    onClick={() => move(index, -1)}
+                  >
+                    <IconArrowUp size={16} />
+                  </ActionIcon>
+                  <ActionIcon
+                    type="button"
+                    variant="subtle"
+                    aria-label={t("moveRequestDown")}
+                    disabled={index === entries.length - 1}
+                    onClick={() => move(index, 1)}
+                  >
+                    <IconArrowDown size={16} />
+                  </ActionIcon>
+                </Group>
+                <Button
+                  type="button"
+                  color="red"
+                  variant="subtle"
+                  leftSection={<IconTrash size={16} />}
+                  onClick={() => remove(index)}
+                >
+                  {t("removeRequest")}
+                </Button>
+              </Group>
+            </Stack>
+          </Fieldset>
+        );
+      })}
+      <Button type="button" variant="light" leftSection={<IconPlus size={16} />} onClick={add}>
+        {t("addRequest")}
+      </Button>
+      {form.errors.requests && (
+        <Text c="red" size="xs">
+          {form.errors.requests}
+        </Text>
+      )}
+    </Stack>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-save-errors.spec.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-save-errors.spec.ts
new file mode 100644
index 000000000..10936d838
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-save-errors.spec.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+
+import { extractCustomWidgetSaveIssues } from "./_custom-widget-save-errors";
+
+describe("extractCustomWidgetSaveIssues", () => {
+  it("extracts every flattened server validation message", () => {
+    expect(
+      extractCustomWidgetSaveIssues({
+        data: {
+          zodError: {
+            fieldErrors: {
+              template: [
+                "UNKNOWN_COMPONENT: 'Radio.Group' is not available. Did you mean 'RadioGroup'?",
+                "UNKNOWN_COMPONENT: 'Radio.Card' is not available. Did you mean 'RadioCard'?",
+              ],
+            },
+          },
+        },
+      }),
+    ).toEqual([
+      { path: "template", message: "UNKNOWN_COMPONENT: 'Radio.Group' is not available. Did you mean 'RadioGroup'?" },
+      { path: "template", message: "UNKNOWN_COMPONENT: 'Radio.Card' is not available. Did you mean 'RadioCard'?" },
+    ]);
+  });
+
+  it("extracts paths and messages from a serialized Zod issue list", () => {
+    const message = JSON.stringify([
+      {
+        code: "custom",
+        message: "UNKNOWN_COMPONENT: 'Radio.Indicator' is not available. Did you mean 'RadioIndicator'?",
+        path: ["template"],
+      },
+    ]);
+
+    expect(extractCustomWidgetSaveIssues({ message })).toEqual([
+      {
+        path: "template",
+        message: "UNKNOWN_COMPONENT: 'Radio.Indicator' is not available. Did you mean 'RadioIndicator'?",
+      },
+    ]);
+  });
+
+  it("preserves array indexes in serialized Zod issue paths", () => {
+    const message = JSON.stringify([
+      {
+        code: "custom",
+        message: "A load parameter requires an explicit binding.",
+        path: ["requests", "containers", "path"],
+      },
+    ]);
+
+    expect(extractCustomWidgetSaveIssues({ message })).toEqual([
+      {
+        path: "requests.containers.path",
+        message: "A load parameter requires an explicit binding.",
+      },
+    ]);
+  });
+
+  it("extracts root validation errors from the tRPC error shape", () => {
+    expect(
+      extractCustomWidgetSaveIssues({
+        shape: {
+          data: {
+            zodError: {
+              formErrors: ["The widget definition is invalid."],
+              fieldErrors: {},
+            },
+          },
+        },
+      }),
+    ).toEqual([{ message: "The widget definition is invalid." }]);
+  });
+});
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-save-errors.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-save-errors.ts
new file mode 100644
index 000000000..b75f7dd78
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-save-errors.ts
@@ -0,0 +1,64 @@
+export interface CustomWidgetSaveIssue {
+  path?: string;
+  message: string;
+}
+
+const MAX_SAVE_ISSUES = 20;
+
+export function extractCustomWidgetSaveIssues(error: unknown): CustomWidgetSaveIssue[] {
+  const record = asRecord(error);
+  const data = asRecord(record?.data) ?? asRecord(asRecord(record?.shape)?.data);
+  const zodError = asRecord(data?.zodError);
+  const fieldErrors = asRecord(zodError?.fieldErrors);
+  const flattened = fieldErrors
+    ? Object.entries(fieldErrors).flatMap(([path, value]) =>
+        Array.isArray(value)
+          ? value.flatMap((message) => (typeof message === "string" ? [{ path, message }] : []))
+          : [],
+      )
+    : [];
+  const formErrors = Array.isArray(zodError?.formErrors)
+    ? zodError.formErrors.flatMap((message) => (typeof message === "string" ? [{ message }] : []))
+    : [];
+  if (flattened.length > 0 || formErrors.length > 0) return uniqueIssues([...formErrors, ...flattened]);
+
+  const message = typeof record?.message === "string" ? record.message : null;
+  if (!message) return [];
+  const parsed = parseZodIssueMessage(message);
+  return parsed.length > 0 ? uniqueIssues(parsed) : [{ message }];
+}
+
+function parseZodIssueMessage(message: string): CustomWidgetSaveIssue[] {
+  try {
+    const parsed = JSON.parse(message) as unknown;
+    if (!Array.isArray(parsed)) return [];
+    return parsed.flatMap((candidate) => {
+      const issue = asRecord(candidate);
+      if (typeof issue?.message !== "string") return [];
+      const path = Array.isArray(issue.path)
+        ? issue.path
+            .filter((part) => typeof part === "string" || typeof part === "number")
+            .map(String)
+            .join(".")
+        : undefined;
+      return [{ path: path || undefined, message: issue.message }];
+    });
+  } catch {
+    return [];
+  }
+}
+
+function uniqueIssues(issues: CustomWidgetSaveIssue[]) {
+  return issues
+    .filter(
+      (issue, index) =>
+        issues.findIndex((candidate) => candidate.path === issue.path && candidate.message === issue.message) === index,
+    )
+    .slice(0, MAX_SAVE_ISSUES);
+}
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === "object" && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null;
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-save-issues-alert.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-save-issues-alert.tsx
new file mode 100644
index 000000000..c60cb2cd9
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-save-issues-alert.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { Alert, Button, CopyButton, Text, Textarea } from "@mantine/core";
+import { IconAlertCircle, IconCheck, IconCopy } from "@tabler/icons-react";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+import type { CustomWidgetSaveIssue } from "./_custom-widget-save-errors";
+
+export function CustomWidgetSaveIssuesAlert({ issues }: { issues: CustomWidgetSaveIssue[] }) {
+  const t = useScopedI18n("customWidget.workbench.saveError");
+  if (issues.length === 0) return null;
+  const value = issues.map((issue) => `${issue.path ? `${issue.path}: ` : ""}${issue.message}`).join("\n");
+
+  return (
+    <Alert color="red" title={t("title")} icon={<IconAlertCircle size={18} />}>
+      <Text size="sm" mb="xs">
+        {t("description")}
+      </Text>
+      <Textarea value={value} readOnly autosize minRows={2} maxRows={10} aria-label={t("errors")} mb="xs" />
+      <CopyButton value={value} timeout={2_000}>
+        {({ copied, copy }) => (
+          <Button
+            type="button"
+            size="compact-sm"
+            variant="light"
+            color={copied ? "green" : "red"}
+            leftSection={copied ? <IconCheck size={14} /> : <IconCopy size={14} />}
+            onClick={copy}
+          >
+            {copied ? t("copied") : t("copy")}
+          </Button>
+        )}
+      </CopyButton>
+    </Alert>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-source-dependencies.spec.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-source-dependencies.spec.ts
new file mode 100644
index 000000000..51281e800
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-source-dependencies.spec.ts
@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+
+import { getDependentRequestIds, removeDependentRequests } from "./_custom-widget-source-dependencies";
+
+const requests = JSON.stringify({
+  status: { source: "default", path: "/status" },
+  restart: { source: "secondary", path: "/restart", kind: "action" },
+  logs: { source: "secondary", path: "/logs" },
+});
+
+describe("custom widget source dependencies", () => {
+  it("lists every request that would be removed with a source", () => {
+    expect(getDependentRequestIds(requests, "secondary")).toEqual(["restart", "logs"]);
+  });
+
+  it("removes only requests that use the selected source", () => {
+    expect(removeDependentRequests(requests, "secondary")).toEqual({
+      status: { source: "default", path: "/status" },
+    });
+  });
+});
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-source-dependencies.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-source-dependencies.ts
new file mode 100644
index 000000000..6b1c8baa8
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-source-dependencies.ts
@@ -0,0 +1,27 @@
+export function getDependentRequestIds(requestsJson: string, sourceId: string) {
+  const requests = parseRequestRecord(requestsJson);
+  return Object.entries(requests).flatMap(([requestId, request]) =>
+    isRecord(request) && request.source === sourceId ? [requestId] : [],
+  );
+}
+
+export function removeDependentRequests(requestsJson: string, sourceId: string) {
+  return Object.fromEntries(
+    Object.entries(parseRequestRecord(requestsJson)).filter(
+      ([, request]) => !isRecord(request) || request.source !== sourceId,
+    ),
+  );
+}
+
+function parseRequestRecord(requestsJson: string): Record<string, unknown> {
+  try {
+    const requests = JSON.parse(requestsJson) as unknown;
+    return isRecord(requests) ? requests : {};
+  } catch {
+    return {};
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-source-field.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-source-field.tsx
new file mode 100644
index 000000000..8f2240aa6
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-source-field.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { Button, Fieldset, Group, PasswordInput, Select, Stack, TextInput } from "@mantine/core";
+import { IconKey, IconTrash } from "@tabler/icons-react";
+
+import { getCustomWidgetSourceUrlIssue } from "@homarr/custom-widgets/core";
+import type { CustomWidgetSource, CustomWidgetSourceUrlIssue } from "@homarr/custom-widgets/core";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import type { CustomWidgetWorkbenchForm } from "./_custom-widget-form-utils";
+import { CustomWidgetIdentifierInput } from "./_custom-widget-identifier-input";
+
+type SecretKind = "apiKey" | "username" | "password";
+
+const secretFields: Record<string, Array<{ kind: SecretKind }>> = {
+  bearer: [{ kind: "apiKey" }],
+  basic: [{ kind: "username" }, { kind: "password" }],
+  apiKeyHeader: [{ kind: "apiKey" }],
+  apiKeyQuery: [{ kind: "apiKey" }],
+};
+
+const sourceUrlErrorKeys: Record<CustomWidgetSourceUrlIssue, `baseUrlError.${CustomWidgetSourceUrlIssue}`> = {
+  invalid: "baseUrlError.invalid",
+  protocol: "baseUrlError.protocol",
+  credentials: "baseUrlError.credentials",
+  queryOrFragment: "baseUrlError.queryOrFragment",
+};
+
+interface CustomWidgetSourceFieldProps {
+  source: CustomWidgetSource & { id: string };
+  index: number;
+  form: CustomWidgetWorkbenchForm;
+  definitionId?: string;
+  clearSecretPending: boolean;
+  onUpdate(index: number, changes: Partial<CustomWidgetSource> & { id?: string }): void;
+  onSetAuthentication(index: number, type: string): void;
+  onSetSecret(sourceId: string, kind: string, value: string): void;
+  onClearSecret(sourceId: string, kind: SecretKind): Promise<void>;
+  onRemove(index: number): void;
+}
+
+export function CustomWidgetSourceField({
+  source,
+  index,
+  form,
+  definitionId,
+  clearSecretPending,
+  onUpdate,
+  onSetAuthentication,
+  onSetSecret,
+  onClearSecret,
+  onRemove,
+}: CustomWidgetSourceFieldProps) {
+  const t = useScopedI18n("customWidget.workbench.sources");
+  const baseUrlIssue = getCustomWidgetSourceUrlIssue(source.baseUrl);
+  const authType = typeof source.auth === "string" ? source.auth : source.auth.type;
+
+  return (
+    <Fieldset legend={index === 0 ? t("primary") : source.name}>
+      <Stack gap="sm">
+        <Group grow align="start">
+          <CustomWidgetIdentifierInput
+            label={t("id")}
+            value={source.id}
+            disabled={source.id === "default" || Boolean(definitionId)}
+            error={form.errors.sources}
+            onCommit={(value) => onUpdate(index, { id: value })}
+          />
+          <TextInput
+            label={t("name")}
+            value={source.name}
+            onChange={(event) => onUpdate(index, { name: event.currentTarget.value })}
+          />
+        </Group>
+        <TextInput
+          label={t("baseUrl")}
+          type="url"
+          value={source.baseUrl}
+          error={baseUrlIssue ? t(sourceUrlErrorKeys[baseUrlIssue]) : undefined}
+          onChange={(event) => onUpdate(index, { baseUrl: event.currentTarget.value })}
+        />
+        <Group grow align="start">
+          <Select
+            label={t("networkScope")}
+            data={["public", "private", "loopback"]}
+            value={source.networkScope}
+            onChange={(value) =>
+              value && onUpdate(index, { networkScope: value as CustomWidgetSource["networkScope"] })
+            }
+            allowDeselect={false}
+          />
+          <Select
+            label={t("authentication")}
+            data={["none", "bearer", "basic", "apiKeyHeader", "apiKeyQuery"]}
+            value={authType}
+            onChange={(value) => onSetAuthentication(index, value ?? "none")}
+            allowDeselect={false}
+          />
+        </Group>
+        {typeof source.auth === "object" && source.auth.type === "apiKeyHeader" && (
+          <TextInput
+            label={t("headerName")}
+            value={source.auth.name}
+            onChange={(event) => onUpdate(index, { auth: { type: "apiKeyHeader", name: event.currentTarget.value } })}
+          />
+        )}
+        {typeof source.auth === "object" && source.auth.type === "apiKeyQuery" && (
+          <TextInput
+            label={t("queryParameter")}
+            value={source.auth.name}
+            onChange={(event) => onUpdate(index, { auth: { type: "apiKeyQuery", name: event.currentTarget.value } })}
+          />
+        )}
+        {(secretFields[authType] ?? []).map(({ kind }) => {
+          const secret = form.values.secrets.find((entry) => entry.sourceId === source.id && entry.kind === kind);
+          const Input = kind === "username" ? TextInput : PasswordInput;
+          return (
+            <Group key={kind} align="end" wrap="nowrap">
+              <Input
+                style={{ flex: 1 }}
+                label={t(`secret.${kind}`)}
+                value={secret?.value ?? ""}
+                placeholder={secret?.hasValue ? t("configured") : undefined}
+                leftSection={<IconKey size={15} />}
+                onChange={(event) => onSetSecret(source.id, kind, event.currentTarget.value)}
+              />
+              {definitionId && secret?.hasValue && (
+                <Button
+                  type="button"
+                  color="red"
+                  variant="subtle"
+                  loading={clearSecretPending}
+                  onClick={() => void onClearSecret(source.id, kind)}
+                >
+                  {t("clear")}
+                </Button>
+              )}
+            </Group>
+          );
+        })}
+        {index > 0 && (
+          <Button
+            type="button"
+            color="red"
+            variant="subtle"
+            leftSection={<IconTrash size={16} />}
+            onClick={() => onRemove(index)}
+          >
+            {t("remove")}
+          </Button>
+        )}
+      </Stack>
+    </Fieldset>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-sources-editor.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-sources-editor.tsx
new file mode 100644
index 000000000..c3a2c44cc
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-sources-editor.tsx
@@ -0,0 +1,199 @@
+"use client";
+
+import { Accordion, Button, List, Stack, Text } from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import type { CustomWidgetSource } from "@homarr/custom-widgets/core";
+import { useConfirmModal } from "@homarr/modals";
+import { showSuccessNotification } from "@homarr/notifications";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { filterSecretsForSourceAuthentication, isRecord, parseJson, parseSources } from "./_custom-widget-form-utils";
+import type { CustomWidgetWorkbenchForm } from "./_custom-widget-form-utils";
+import { getDependentRequestIds, removeDependentRequests } from "./_custom-widget-source-dependencies";
+import { CustomWidgetSourceField } from "./_custom-widget-source-field";
+
+export function CustomWidgetSourcesEditor({
+  form,
+  definitionId,
+}: {
+  form: CustomWidgetWorkbenchForm;
+  definitionId?: string;
+}) {
+  const t = useScopedI18n("customWidget.workbench.sources");
+  const w = useScopedI18n("customWidget.workbench");
+  const { openConfirmModal } = useConfirmModal();
+  const utils = clientApi.useUtils();
+  const clearSecretMutation = clientApi.customWidget.secretClear.useMutation();
+  const sources = parseSources(form.values.sources);
+  const update = (index: number, changes: Partial<CustomWidgetSource> & { id?: string }) => {
+    const previousId = sources[index]?.id;
+    const nextId = changes.id ?? previousId;
+    if (nextId && sources.some((source, sourceIndex) => sourceIndex !== index && source.id === nextId)) {
+      form.setFieldError("sources", t("duplicateSourceId"));
+      return;
+    }
+    if (form.errors.sources === t("duplicateSourceId")) form.clearFieldError("sources");
+    const sourceEntries = sources.map(({ id, ...source }) => [id, source] as const);
+    form.setFieldValue(
+      "sources",
+      JSON.stringify(
+        Object.fromEntries(
+          sourceEntries.map(([id, source], i) => [
+            i === index ? nextId : id,
+            i === index ? { ...source, ...changes, id: undefined } : source,
+          ]),
+        ),
+        null,
+        2,
+      ),
+    );
+    if (previousId && nextId && previousId !== nextId) {
+      const parsedRequests = parseJson(form.values.requests);
+      const requests = isRecord(parsedRequests)
+        ? Object.fromEntries(
+            Object.entries(parsedRequests).map(([id, request]) => [
+              id,
+              isRecord(request) && request.source === previousId ? { ...request, source: nextId } : request,
+            ]),
+          )
+        : {};
+      form.setFieldValue("requests", JSON.stringify(requests, null, 2));
+      form.setFieldValue(
+        "secrets",
+        form.values.secrets.map((secret) =>
+          secret.sourceId === previousId ? { ...secret, sourceId: nextId } : secret,
+        ),
+      );
+    }
+  };
+  const setAuth = (index: number, type: string) => {
+    const auth =
+      type === "apiKeyHeader" ? { type, name: "X-API-Key" } : type === "apiKeyQuery" ? { type, name: "api_key" } : type;
+    update(index, { auth: auth as CustomWidgetSource["auth"] });
+    form.setFieldValue(
+      "secrets",
+      filterSecretsForSourceAuthentication(
+        form.values.secrets,
+        sources[index]?.id ?? "",
+        type as Parameters<typeof filterSecretsForSourceAuthentication>[2],
+      ),
+    );
+  };
+  const setSecret = (sourceId: string, kind: string, value: string) => {
+    const current = form.values.secrets.filter((secret) => !(secret.sourceId === sourceId && secret.kind === kind));
+    const existing = form.values.secrets.find((secret) => secret.sourceId === sourceId && secret.kind === kind);
+    form.setFieldValue("secrets", [...current, { sourceId, kind, value, hasValue: existing?.hasValue }]);
+  };
+  const addSource = () => {
+    const id = sources.length === 0 ? "default" : `source-${sources.length + 1}`;
+    form.setFieldValue(
+      "sources",
+      JSON.stringify(
+        Object.fromEntries([
+          ...sources.map(({ id: sourceId, ...source }) => [sourceId, source] as const),
+          [
+            id,
+            {
+              name: t("newName", { count: sources.length + 1 }),
+              baseUrl: "https://example.com",
+              networkScope: sources.length === 0 ? "public" : "private",
+              auth: "none",
+            },
+          ],
+        ]),
+        null,
+        2,
+      ),
+    );
+  };
+  const removeSourceAndDependents = (index: number) => {
+    const removedId = sources[index]?.id;
+    form.setFieldValue(
+      "sources",
+      JSON.stringify(
+        Object.fromEntries(sources.filter((_, i) => i !== index).map(({ id, ...source }) => [id, source])),
+        null,
+        2,
+      ),
+    );
+    if (!removedId) return;
+    form.setFieldValue("requests", JSON.stringify(removeDependentRequests(form.values.requests, removedId), null, 2));
+    form.setFieldValue(
+      "secrets",
+      form.values.secrets.filter((secret) => secret.sourceId !== removedId),
+    );
+  };
+  const removeSource = (index: number) => {
+    const removedId = sources[index]?.id;
+    if (!removedId) return;
+    const dependentRequestIds = getDependentRequestIds(form.values.requests, removedId);
+    if (dependentRequestIds.length === 0) {
+      removeSourceAndDependents(index);
+      return;
+    }
+    openConfirmModal({
+      title: t("remove"),
+      children: (
+        <Stack gap="xs">
+          <Text size="sm" fw={500}>
+            {w("requests.title")} ({dependentRequestIds.length})
+          </Text>
+          <List size="sm">
+            {dependentRequestIds.map((requestId) => (
+              <List.Item key={requestId}>{requestId}</List.Item>
+            ))}
+          </List>
+        </Stack>
+      ),
+      confirmProps: { children: t("remove") },
+      onConfirm: () => removeSourceAndDependents(index),
+    });
+  };
+  const clearSecret = async (sourceId: string, kind: "apiKey" | "username" | "password") => {
+    if (!definitionId) return;
+    await clearSecretMutation.mutateAsync({ definitionId, sourceId, kind });
+    const current = form.values.secrets.filter((secret) => !(secret.sourceId === sourceId && secret.kind === kind));
+    form.setFieldValue("secrets", [...current, { sourceId, kind, value: "", hasValue: false }]);
+    await utils.customWidget.get.invalidate({ id: definitionId });
+    showSuccessNotification({ title: t("credentialRemoved"), message: t("credentialRemovedDescription") });
+  };
+
+  return (
+    <Stack gap="sm">
+      {sources.map((source, index) => {
+        return (
+          <CustomWidgetSourceField
+            key={source.id}
+            source={source}
+            index={index}
+            form={form}
+            definitionId={definitionId}
+            clearSecretPending={clearSecretMutation.isPending}
+            onUpdate={update}
+            onSetAuthentication={setAuth}
+            onSetSecret={setSecret}
+            onClearSecret={clearSecret}
+            onRemove={removeSource}
+          />
+        );
+      })}
+      <Accordion variant="contained">
+        <Accordion.Item value="advanced">
+          <Accordion.Control>{t("advanced")}</Accordion.Control>
+          <Accordion.Panel>
+            <Button type="button" variant="light" leftSection={<IconPlus size={16} />} onClick={addSource}>
+              {t("add")}
+            </Button>
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
+      {form.errors.sources && (
+        <Text c="red" size="xs">
+          {form.errors.sources}
+        </Text>
+      )}
+    </Stack>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_form-error-boundary.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_form-error-boundary.tsx
new file mode 100644
index 000000000..b77b7cec1
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_form-error-boundary.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import type { ErrorInfo, ReactNode } from "react";
+import { Component } from "react";
+import { Alert, Button, Stack, Text } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+interface FormErrorBoundaryState {
+  error: Error | null;
+}
+
+interface FormErrorBoundaryProps {
+  children: ReactNode;
+}
+
+export class FormErrorBoundary extends Component<FormErrorBoundaryProps, FormErrorBoundaryState> {
+  public state: FormErrorBoundaryState = { error: null };
+
+  public static getDerivedStateFromError(error: Error): FormErrorBoundaryState {
+    return { error };
+  }
+
+  public componentDidCatch(error: Error, _info: ErrorInfo) {
+    console.error("Custom widget form error:", error);
+  }
+
+  public render() {
+    if (this.state.error) {
+      return <FormErrorFallback error={this.state.error} reset={() => this.setState({ error: null })} />;
+    }
+    return this.props.children;
+  }
+}
+
+function FormErrorFallback({ error, reset }: { error: Error; reset: () => void }) {
+  const t = useScopedI18n("customWidget");
+  return (
+    <Alert color="red" variant="light" icon={<IconAlertTriangle size={16} />} p="md">
+      <Stack gap="xs">
+        <Text size="sm" fw={600}>
+          {t("editor.errorBoundary.title")}
+        </Text>
+        <Text size="xs" c="dimmed" style={{ fontFamily: "monospace" }}>
+          {error.message}
+        </Text>
+        <Button size="xs" variant="light" color="red" onClick={reset}>
+          {t("editor.errorBoundary.retry")}
+        </Button>
+      </Stack>
+    </Alert>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_import-custom-widget-button.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_import-custom-widget-button.tsx
new file mode 100644
index 000000000..654ed6d4b
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_import-custom-widget-button.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useDisclosure } from "@mantine/hooks";
+import { IconUpload } from "@tabler/icons-react";
+
+import {
+  formatCustomWidgetImportIssues,
+  looksLikeCustomWidgetClipboard,
+  parseCustomWidgetClipboardDetailed,
+} from "@homarr/custom-widgets/core";
+import type { HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
+import { showErrorNotification } from "@homarr/notifications";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { CustomWidgetImportDialog } from "~/components/custom-widgets/custom-widget-import-dialog";
+import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
+
+export const ImportCustomWidgetButton = () => {
+  const t = useScopedI18n("customWidget");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [pendingImport, setPendingImport] = useState<HomarrCustomWidgetV2 | null>(null);
+  const [reviewOpened, { open: openReview, close: closeReview }] = useDisclosure(false);
+  const queueImport = useCallback(
+    (value: HomarrCustomWidgetV2) => {
+      setPendingImport(value);
+      openReview();
+    },
+    [openReview],
+  );
+
+  useEffect(() => {
+    const handlePaste = (event: ClipboardEvent) => {
+      if (event.target instanceof Element && event.target.matches("input, textarea, [contenteditable='true']")) return;
+      const text = event.clipboardData?.getData("text/plain") ?? "";
+      if (!looksLikeCustomWidgetClipboard(text)) return;
+      event.preventDefault();
+      const result = parseCustomWidgetClipboardDetailed(text);
+      if (!result.success) {
+        showErrorNotification({
+          title: t("action.import"),
+          message: formatCustomWidgetImportIssues(result.issues),
+        });
+        return;
+      }
+      queueImport(result.widget);
+    };
+    window.addEventListener("paste", handlePaste);
+    return () => window.removeEventListener("paste", handlePaste);
+  }, [queueImport, t]);
+
+  const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.addEventListener("load", (loadEvent) => {
+      try {
+        const result = parseCustomWidgetClipboardDetailed(loadEvent.target?.result as string);
+        if (!result.success) throw new Error(formatCustomWidgetImportIssues(result.issues));
+        queueImport(result.widget);
+      } catch (error) {
+        showErrorNotification({
+          title: t("action.import"),
+          message: error instanceof Error ? error.message : t("notification.importError"),
+        });
+      }
+    });
+    reader.addEventListener("error", () => {
+      showErrorNotification({ title: t("action.import"), message: t("notification.importError") });
+    });
+    reader.readAsText(file);
+    event.target.value = "";
+  };
+
+  return (
+    <>
+      <MobileAffixButton
+        variant="default"
+        leftSection={<IconUpload size={16} />}
+        onClick={() => fileInputRef.current?.click()}
+        title={t("action.pasteImportHint")}
+      >
+        {t("action.import")}
+      </MobileAffixButton>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".json,.md,text/markdown,application/json"
+        hidden
+        onChange={handleImport}
+        aria-label={t("importReview.fileLabel")}
+      />
+      <CustomWidgetImportDialog
+        opened={reviewOpened}
+        widget={pendingImport}
+        onClose={() => {
+          closeReview();
+          setPendingImport(null);
+        }}
+      />
+    </>
+  );
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_json-preview-editor.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_json-preview-editor.tsx
new file mode 100644
index 000000000..36edc12e7
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_json-preview-editor.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { CodeEditor } from "./_code-editor";
+import { isRecord, parseJson } from "./_custom-widget-form-utils";
+
+export function JsonPreviewEditor({
+  id,
+  label,
+  value,
+  onChange,
+}: {
+  id: string;
+  label: string;
+  value: Record<string, unknown>;
+  onChange(value: Record<string, unknown>): void;
+}) {
+  const serialized = JSON.stringify(value, null, 2);
+  const [draft, setDraft] = useState(serialized);
+  useEffect(() => setDraft(serialized), [serialized]);
+  return (
+    <CodeEditor
+      id={id}
+      label={label}
+      language="json"
+      value={draft}
+      onChange={(next) => {
+        setDraft(next);
+        const parsed = parseJson(next);
+        if (isRecord(parsed)) onChange(parsed);
+      }}
+    />
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_unsaved-changes-guard.spec.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_unsaved-changes-guard.spec.ts
new file mode 100644
index 000000000..353806380
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_unsaved-changes-guard.spec.ts
@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { registerUnsavedChangesGuard } from "./_unsaved-changes-guard";
+
+const cleanups: Array<() => void> = [];
+
+afterEach(() => {
+  cleanups.splice(0).forEach((cleanup) => cleanup());
+  document.body.replaceChildren();
+  window.history.replaceState(null, "", "/en/manage/custom-widgets/edit/widget-1");
+});
+
+describe("custom widget unsaved changes guard", () => {
+  it("blocks client-side link navigation and requests confirmation for a dirty form", () => {
+    window.history.replaceState(null, "", "/en/manage/custom-widgets/edit/widget-1");
+    const confirmNavigation = vi.fn();
+    cleanups.push(registerUnsavedChangesGuard({ isDirty: () => true, confirmNavigation }));
+    const link = document.createElement("a");
+    link.href = "/en/manage/custom-widgets";
+    link.textContent = "Custom widgets";
+    document.body.append(link);
+
+    const event = new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 });
+    link.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(true);
+    expect(confirmNavigation).toHaveBeenCalledWith("/en/manage/custom-widgets");
+  });
+
+  it("allows section links and navigation after the form is clean", () => {
+    window.history.replaceState(null, "", "/en/manage/custom-widgets/edit/widget-1");
+    let dirty = true;
+    const confirmNavigation = vi.fn();
+    cleanups.push(registerUnsavedChangesGuard({ isDirty: () => dirty, confirmNavigation }));
+    const sectionLink = document.createElement("a");
+    sectionLink.href = "#sources";
+    document.body.append(sectionLink);
+
+    expect(sectionLink.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 }))).toBe(
+      true,
+    );
+    dirty = false;
+    const listLink = document.createElement("a");
+    listLink.href = "/en/manage/custom-widgets";
+    document.body.append(listLink);
+    expect(listLink.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 }))).toBe(true);
+    expect(confirmNavigation).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_unsaved-changes-guard.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_unsaved-changes-guard.ts
new file mode 100644
index 000000000..280138de8
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_unsaved-changes-guard.ts
@@ -0,0 +1,42 @@
+interface UnsavedChangesGuardOptions {
+  isDirty(): boolean;
+  confirmNavigation(href: string): void;
+}
+
+export function registerUnsavedChangesGuard({ isDirty, confirmNavigation }: UnsavedChangesGuardOptions) {
+  const handleClick = (event: MouseEvent) => {
+    if (!isDirty() || event.defaultPrevented || event.button !== 0) return;
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+
+    const eventTarget = event.target instanceof Element ? event.target : null;
+    const anchor = eventTarget?.closest<HTMLAnchorElement>("a[href]");
+    if (!anchor || anchor.target === "_blank" || anchor.hasAttribute("download")) return;
+
+    const destination = new URL(anchor.href, window.location.href);
+    const current = new URL(window.location.href);
+    if (destination.origin !== current.origin) return;
+    if (
+      destination.pathname === current.pathname &&
+      destination.search === current.search &&
+      destination.hash !== current.hash
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    confirmNavigation(`${destination.pathname}${destination.search}${destination.hash}`);
+  };
+  const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+    if (!isDirty()) return;
+    event.preventDefault();
+    event.returnValue = true;
+  };
+
+  document.addEventListener("click", handleClick, true);
+  window.addEventListener("beforeunload", handleBeforeUnload);
+  return () => {
+    document.removeEventListener("click", handleClick, true);
+    window.removeEventListener("beforeunload", handleBeforeUnload);
+  };
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_use-custom-widget-form-actions.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_use-custom-widget-form-actions.ts
new file mode 100644
index 000000000..429f10ecb
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_use-custom-widget-form-actions.ts
@@ -0,0 +1,226 @@
+"use client";
+
+import { useState } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import { useRouter } from "next/navigation";
+import type { UseFormReturnType } from "@mantine/form";
+
+import { clientApi } from "@homarr/api/client";
+import { formatCustomWidgetImportIssues } from "@homarr/custom-widgets/core";
+import type { CustomWidgetFormValues } from "@homarr/custom-widgets/workbench";
+import { showErrorNotification, showSuccessNotification, showWarningNotification } from "@homarr/notifications";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import {
+  applyCustomWidgetAiResponse,
+  buildDefinition,
+  getChangedSecrets,
+  getDefinitionDefaults,
+  getCustomWidgetPreviewOptionIssues,
+  isRecord,
+  loadPreviewQueries,
+} from "./_custom-widget-form-utils";
+import type { PreviewState } from "./_custom-widget-preview-panel";
+import { extractCustomWidgetSaveIssues } from "./_custom-widget-save-errors";
+import type { CustomWidgetSaveIssue } from "./_custom-widget-save-errors";
+
+interface FormActionsInput {
+  mode: "create" | "edit";
+  definitionId?: string;
+  form: UseFormReturnType<CustomWidgetFormValues>;
+  candidate: ReturnType<typeof buildDefinition>;
+  preview: PreviewState;
+  setPreview: Dispatch<SetStateAction<PreviewState>>;
+  setMobilePane: Dispatch<SetStateAction<"configure" | "preview">>;
+  optionsSnapshot: Record<string, unknown>;
+  setOptionsSnapshot: Dispatch<SetStateAction<Record<string, unknown>>>;
+}
+
+export function useCustomWidgetFormActions(input: FormActionsInput) {
+  const router = useRouter();
+  const t = useScopedI18n("customWidget");
+  const w = useScopedI18n("customWidget.workbench");
+  const utils = clientApi.useUtils();
+  const createMutation = clientApi.customWidget.create.useMutation();
+  const updateMutation = clientApi.customWidget.update.useMutation();
+  const previewMutation = clientApi.customWidget.previewCreate.useMutation();
+  const [saveIssues, setSaveIssues] = useState<CustomWidgetSaveIssue[]>([]);
+  const [previewPending, setPreviewPending] = useState(false);
+
+  const save = input.form.onSubmit(async (values) => {
+    clearSaveIssues(input.form, saveIssues);
+    setSaveIssues([]);
+    const definition = buildDefinition(values);
+    if (!definition.success) {
+      reportSaveIssues(
+        input.form,
+        definition.error.issues.map((issue) => ({ path: issue.path.join("."), message: issue.message })),
+        setSaveIssues,
+        t("action.save"),
+        (count) => w("saveError.more", { count }),
+      );
+      return;
+    }
+    const changedSecrets = getChangedSecrets(values);
+    try {
+      if (input.mode === "create") {
+        const result = await createMutation.mutateAsync({ ...definition.data, secrets: changedSecrets });
+        await utils.customWidget.list.invalidate();
+        showSuccessNotification({
+          title: t("action.create"),
+          message: t("notification.created", { name: values.name }),
+        });
+        router.push(`/manage/custom-widgets/edit/${result.id}`);
+      } else if (input.definitionId) {
+        await updateMutation.mutateAsync({
+          id: input.definitionId,
+          ...definition.data,
+          secrets: changedSecrets.length ? changedSecrets : undefined,
+        });
+        await Promise.all([
+          utils.customWidget.list.invalidate(),
+          utils.customWidget.get.invalidate({ id: input.definitionId }),
+          utils.widget.customApi.getData.invalidate(),
+        ]);
+        input.form.setInitialValues(values);
+        input.form.resetDirty();
+        showSuccessNotification({
+          title: t("action.save"),
+          message: t("notification.updated", { name: values.name }),
+        });
+      }
+    } catch (error) {
+      const issues = extractCustomWidgetSaveIssues(error);
+      if (issues.length > 0) {
+        reportSaveIssues(input.form, issues, setSaveIssues, t("action.save"), (count) =>
+          w("saveError.more", { count }),
+        );
+      } else {
+        showErrorNotification({ title: t("action.save"), message: t("notification.updateError") });
+      }
+    }
+  });
+
+  const runPreview = async () => {
+    if (previewPending) return;
+    if (!input.candidate.success) {
+      showErrorNotification({
+        title: w("section.preview"),
+        message: input.candidate.error.issues[0]?.message ?? w("invalidWidget"),
+      });
+      return;
+    }
+    const optionIssues = getCustomWidgetPreviewOptionIssues(input.candidate.data, input.optionsSnapshot);
+    if (optionIssues.length > 0) {
+      const issue = optionIssues[0];
+      showErrorNotification({
+        title: w("section.preview"),
+        message: issue ? `${issue.path}: ${issue.message}` : w("invalidWidget"),
+      });
+      return;
+    }
+    input.setMobilePane("preview");
+    input.setPreview({ data: {}, status: {}, session: null, outcome: "loading" });
+    setPreviewPending(true);
+    try {
+      const created = await previewMutation.mutateAsync({
+        definition: input.candidate.data,
+        definitionId: input.definitionId,
+        options: input.optionsSnapshot,
+        secrets: getChangedSecrets(input.form.values),
+      });
+      const snapshot = await loadPreviewQueries(input.candidate.data, created.previewSession.id);
+      const failed = Object.values(snapshot.status).filter((status) => isRecord(status) && status.ok === false).length;
+      input.setPreview({
+        ...snapshot,
+        session: created.previewSession,
+        outcome: failed > 0 ? "error" : "success",
+      });
+      if (failed > 0) {
+        showWarningNotification({
+          title: w("preview.result.error.title"),
+          message: w("preview.result.error.description", {
+            succeeded: Object.keys(snapshot.status).length - failed,
+            failed,
+          }),
+        });
+      } else {
+        showSuccessNotification({
+          title: w("preview.result.success.title"),
+          message: w("preview.result.success.description", {
+            succeeded: Object.keys(snapshot.status).length,
+            failed: 0,
+          }),
+        });
+      }
+    } catch {
+      input.setPreview((current) => ({ ...current, outcome: "error" }));
+      showErrorNotification({ title: w("section.preview"), message: t("notification.previewError") });
+    } finally {
+      setPreviewPending(false);
+    }
+  };
+
+  const pasteAiResponse = async () => {
+    try {
+      const result = applyCustomWidgetAiResponse(input.form, await navigator.clipboard.readText());
+      if (!result.success) {
+        throw new Error(formatCustomWidgetImportIssues(result.issues));
+      }
+      input.setOptionsSnapshot(getDefinitionDefaults(result.widget));
+      input.setPreview({ data: {}, status: {}, session: null, outcome: "idle" });
+      showSuccessNotification({
+        title: w("ai.response"),
+        message:
+          result.warnings.length > 0
+            ? `${w("ai.loaded")} ${formatCustomWidgetImportIssues(result.warnings)}`
+            : w("ai.loaded"),
+      });
+    } catch (error) {
+      showErrorNotification({
+        title: w("ai.response"),
+        message:
+          error instanceof Error ? w("ai.invalidResponseDetail", { message: error.message }) : w("ai.invalidResponse"),
+      });
+    }
+  };
+
+  return {
+    save,
+    runPreview,
+    pasteAiResponse,
+    saveIssues,
+    savePending: createMutation.isPending || updateMutation.isPending,
+    previewPending,
+  };
+}
+
+function reportSaveIssues(
+  form: UseFormReturnType<CustomWidgetFormValues>,
+  issues: CustomWidgetSaveIssue[],
+  setIssues: Dispatch<SetStateAction<CustomWidgetSaveIssue[]>>,
+  title: string,
+  getRemainingLabel: (count: number) => string,
+) {
+  setIssues(issues);
+  const messagesByPath = new Map<string, string[]>();
+  for (const issue of issues) {
+    if (!issue.path) continue;
+    const field = issue.path.split(".")[0] ?? issue.path;
+    messagesByPath.set(field, [...(messagesByPath.get(field) ?? []), issue.message]);
+  }
+  for (const [path, messages] of messagesByPath) {
+    form.setFieldError(path, messages.join(" "));
+  }
+  const remaining = issues.length - 1;
+  showErrorNotification({
+    title,
+    message: `${issues[0]?.message ?? ""}${remaining > 0 ? ` ${getRemainingLabel(remaining)}` : ""}`,
+  });
+}
+
+function clearSaveIssues(form: UseFormReturnType<CustomWidgetFormValues>, issues: CustomWidgetSaveIssue[]) {
+  for (const path of new Set(issues.flatMap((issue) => (issue.path ? [issue.path.split(".")[0] ?? issue.path] : [])))) {
+    form.clearFieldError(path);
+  }
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_use-unsaved-changes-guard.ts b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_use-unsaved-changes-guard.ts
new file mode 100644
index 000000000..c69a845db
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_use-unsaved-changes-guard.ts
@@ -0,0 +1,34 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
+
+import { useConfirmModal } from "@homarr/modals";
+import { useI18n } from "@homarr/translation/client";
+import { registerUnsavedChangesGuard } from "./_unsaved-changes-guard";
+
+export function useUnsavedChangesGuard(isDirty: boolean) {
+  const t = useI18n();
+  const router = useRouter();
+  const { openConfirmModal } = useConfirmModal();
+  const dirtyRef = useRef(isDirty);
+  const confirmNavigationRef = useRef<(href: string) => void>(() => undefined);
+  dirtyRef.current = isDirty;
+  confirmNavigationRef.current = (href) => {
+    openConfirmModal({
+      title: t("board.action.edit.confirmLeave.title"),
+      children: t("board.action.edit.confirmLeave.message"),
+      confirmProps: { children: t("common.action.discard") },
+      onConfirm: () => router.push(href),
+    });
+  };
+
+  useEffect(
+    () =>
+      registerUnsavedChangesGuard({
+        isDirty: () => dirtyRef.current,
+        confirmNavigation: (href) => confirmNavigationRef.current(href),
+      }),
+    [],
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/edit/[id]/page.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/edit/[id]/page.tsx
index 29034648c..d6329be67 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/edit/[id]/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/edit/[id]/page.tsx
@@ -8,141 +8,7 @@ import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { catchTrpcNotFound } from "~/errors/trpc-catch-error";
 import { CustomWidgetBetaBanner } from "../../_beta-banner";
 import { CustomWidgetForm } from "../../_custom-widget-form";
-
-const authTypeExpectedSecrets: Record<string, string[]> = {
-  bearer: ["apiKey"],
-  basic: ["username", "password"],
-  apiKeyHeader: ["apiKey"],
-  apiKeyQuery: ["apiKey"],
-};
-
-function buildInitialSecrets(authType: string, dbSecrets: Array<{ kind: string; hasValue?: boolean }>) {
-  const expected = authTypeExpectedSecrets[authType] ?? [];
-  const existingKinds = new Set(dbSecrets.map((s) => s.kind));
-  const result = dbSecrets.map((s) => ({ kind: s.kind, value: "", hasValue: s.hasValue ?? false }));
-  for (const kind of expected) {
-    if (!existingKinds.has(kind)) {
-      result.push({ kind, value: "", hasValue: false });
-    }
-  }
-  return result;
-}
-
-function buildDisplayInitialValues(displayType: string, config: Record<string, unknown>) {
-  const base = {
-    displayType,
-    jsonPath: "$",
-    label: "",
-    unit: "",
-    valueSize: "lg",
-    labelPosition: "below",
-    mappings: [{ label: "", jsonPath: "$", unit: "" }],
-    kvLayout: "list",
-    kvColumns: 2,
-    tablePath: "$",
-    columns: [{ header: "", jsonPath: "$" }],
-    striped: true,
-    compact: false,
-    statGridItems: [{ label: "", jsonPath: "$", unit: "", color: "blue" }],
-    statGridColumns: 2,
-    cardStyle: "filled",
-    progressBars: [{ label: "", valuePath: "$", maxPath: "", unit: "", color: "blue" }],
-    showPercentage: true,
-    barSize: "md",
-    statusItems: [{ label: "", jsonPath: "$", goodValues: "online,true" }],
-    statusLayout: "list",
-    dotSize: "md",
-    countGridItems: [{ label: "", jsonPath: "$", unit: "" }],
-    countGridColumns: 2,
-    countValueSize: "md",
-    rawJsonPath: "$",
-    rawMaxHeight: 300,
-    buttonLabel: "Execute",
-    buttonColor: "blue",
-    confirmText: "",
-    successMessage: "",
-    template: "",
-  };
-
-  const typeOverrides: Record<string, () => Record<string, unknown>> = {
-    singleValue: () => ({
-      jsonPath: (config.jsonPath as string) ?? "$",
-      label: (config.label as string) ?? "",
-      unit: (config.unit as string) ?? "",
-      valueSize: (config.valueSize as string) ?? "lg",
-      labelPosition: (config.labelPosition as string) ?? "below",
-    }),
-    keyValue: () => ({
-      mappings: (config.mappings as Array<{ label: string; jsonPath: string; unit: string }>) ?? base.mappings,
-      kvLayout: (config.layout as string) ?? "list",
-      kvColumns: (config.columns as number) ?? 2,
-    }),
-    table: () => ({
-      tablePath: (config.tablePath as string) ?? "$",
-      columns: (config.columns as Array<{ header: string; jsonPath: string }>) ?? base.columns,
-      striped: (config.striped as boolean) ?? true,
-      compact: (config.compact as boolean) ?? false,
-    }),
-    statGrid: () => ({
-      statGridItems: (
-        (config.items as Array<{ label: string; jsonPath: string; unit: string; color?: string }>) ?? []
-      ).map((item) => ({
-        label: item.label,
-        jsonPath: item.jsonPath,
-        unit: item.unit,
-        color: item.color ?? "blue",
-      })),
-      statGridColumns: (config.columns as number) ?? 2,
-      cardStyle: (config.cardStyle as string) ?? "filled",
-    }),
-    progressBars: () => ({
-      progressBars: (
-        (config.bars as Array<{ label: string; valuePath: string; maxPath?: string; unit: string; color?: string }>) ??
-        []
-      ).map((bar) => ({
-        label: bar.label,
-        valuePath: bar.valuePath,
-        maxPath: bar.maxPath ?? "",
-        unit: bar.unit,
-        color: bar.color ?? "blue",
-      })),
-      showPercentage: (config.showPercentage as boolean) ?? true,
-      barSize: (config.barSize as string) ?? "md",
-    }),
-    statusIndicator: () => ({
-      statusItems: ((config.items as Array<{ label: string; jsonPath: string; goodValues: string[] }>) ?? []).map(
-        (item) => ({
-          label: item.label,
-          jsonPath: item.jsonPath,
-          goodValues: item.goodValues.join(", "),
-        }),
-      ),
-      statusLayout: (config.layout as string) ?? "list",
-      dotSize: (config.dotSize as string) ?? "md",
-    }),
-    countGrid: () => ({
-      countGridItems: (config.items as Array<{ label: string; jsonPath: string; unit: string }>) ?? base.countGridItems,
-      countGridColumns: (config.columns as number) ?? 2,
-      countValueSize: (config.valueSize as string) ?? "md",
-    }),
-    raw: () => ({
-      rawJsonPath: (config.jsonPath as string) ?? "$",
-      rawMaxHeight: (config.maxHeight as number) ?? 300,
-    }),
-    actionButton: () => ({
-      buttonLabel: (config.buttonLabel as string) ?? "Execute",
-      buttonColor: (config.buttonColor as string) ?? "blue",
-      confirmText: (config.confirmText as string) ?? "",
-      successMessage: (config.successMessage as string) ?? "",
-    }),
-    customJsx: () => ({
-      template: (config.template as string) ?? "",
-    }),
-  };
-
-  const overrides = typeOverrides[displayType]?.() ?? {};
-  return { ...base, ...overrides };
-}
+import { FormErrorBoundary } from "../../_form-error-boundary";
 
 interface EditCustomWidgetPageProps {
   params: Promise<{ id: string }>;
@@ -153,12 +19,8 @@ export default async function EditCustomWidgetPage(props: EditCustomWidgetPagePr
   if (!session || !session.user.permissions.includes("admin")) {
     redirect("/manage/custom-widgets");
   }
-
   const params = await props.params;
-  const definition = await api.customWidget.byId({ id: params.id }).catch(catchTrpcNotFound);
-
-  const displayConfig = definition.displayConfig as Record<string, unknown>;
-  const displayValues = buildDisplayInitialValues(definition.displayType, displayConfig);
+  const definition = await api.customWidget.get({ id: params.id }).catch(catchTrpcNotFound);
 
   return (
     <>
@@ -167,22 +29,27 @@ export default async function EditCustomWidgetPage(props: EditCustomWidgetPagePr
         <Stack>
           <Title>{definition.name}</Title>
           <CustomWidgetBetaBanner />
-          <CustomWidgetForm
-            mode="edit"
-            definitionId={params.id}
-            initialValues={{
-              name: definition.name,
-              description: definition.description ?? "",
-              iconUrl: definition.iconUrl ?? "",
-              url: definition.url,
-              authType: definition.authType,
-              headerName: definition.headerName ?? "",
-              method: definition.method,
-              requestBody: definition.requestBody ?? "",
-              ...displayValues,
-              secrets: buildInitialSecrets(definition.authType, definition.secrets),
-            }}
-          />
+          <FormErrorBoundary>
+            <CustomWidgetForm
+              mode="edit"
+              definitionId={params.id}
+              initialValues={{
+                name: definition.name,
+                description: definition.description ?? "",
+                iconUrl: definition.iconUrl ?? "",
+                sources: JSON.stringify(definition.sources, null, 2),
+                requests: JSON.stringify(definition.requests, null, 2),
+                options: JSON.stringify(definition.options, null, 2),
+                template: definition.template,
+                secrets: definition.secrets.map((secret) => ({
+                  sourceId: secret.sourceId,
+                  kind: secret.kind,
+                  value: "",
+                  hasValue: true,
+                })),
+              }}
+            />
+          </FormErrorBoundary>
         </Stack>
       </Container>
     </>
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/new/page.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/new/page.tsx
index 12a147997..52c114432 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/new/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/new/page.tsx
@@ -7,13 +7,13 @@ import { getScopedI18n } from "@homarr/translation/server";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { CustomWidgetBetaBanner } from "../_beta-banner";
 import { CustomWidgetForm } from "../_custom-widget-form";
+import { FormErrorBoundary } from "../_form-error-boundary";
 
 export default async function NewCustomWidgetPage() {
   const session = await auth();
   if (!session || !session.user.permissions.includes("admin")) {
     redirect("/manage/custom-widgets");
   }
-
   const t = await getScopedI18n("customWidget");
 
   return (
@@ -28,7 +28,9 @@ export default async function NewCustomWidgetPage() {
             </Text>
           </div>
           <CustomWidgetBetaBanner />
-          <CustomWidgetForm mode="create" />
+          <FormErrorBoundary>
+            <CustomWidgetForm mode="create" />
+          </FormErrorBoundary>
         </Stack>
       </Container>
     </>
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/page.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/page.tsx
index 1567bb5e0..21541929f 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/page.tsx
@@ -1,6 +1,6 @@
 import { redirect } from "next/navigation";
 import { Group } from "@mantine/core";
-import { IconPlus } from "@tabler/icons-react";
+import { IconExternalLink, IconPlus } from "@tabler/icons-react";
 
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
@@ -10,7 +10,8 @@ import { Link } from "@homarr/ui";
 import { ManagePageLayout } from "~/components/manage/manage-page-layout";
 import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
 import { CustomWidgetBetaBanner } from "./_beta-banner";
-import { ImportCustomWidgetButton } from "./_custom-widget-actions";
+import { WorkshopInstallButton } from "~/components/workshop/workshop-install-button";
+import { ImportCustomWidgetButton } from "./_import-custom-widget-button";
 import { CustomWidgetList } from "./_custom-widget-list";
 
 export default async function CustomWidgetsPage() {
@@ -19,8 +20,7 @@ export default async function CustomWidgetsPage() {
   if (!session || !session.user.permissions.includes("admin")) {
     redirect(session ? "/" : "/auth/login");
   }
-
-  const definitions = await api.customWidget.all();
+  const definitions = await api.customWidget.list();
   const t = await getScopedI18n("customWidget");
 
   return (
@@ -28,6 +28,17 @@ export default async function CustomWidgetsPage() {
       title={t("page.list.title")}
       primaryAction={
         <Group gap="xs">
+          <MobileAffixButton
+            component="a"
+            href="https://www.skills.sh/homarr-labs/homarr/homarr-custom-widget"
+            target="_blank"
+            rel="noopener noreferrer"
+            leftSection={<IconExternalLink size={16} />}
+            variant="default"
+          >
+            {t("action.downloadSkill")}
+          </MobileAffixButton>
+          <WorkshopInstallButton />
           <ImportCustomWidgetButton />
           <MobileAffixButton component={Link} href="/manage/custom-widgets/new" leftSection={<IconPlus size={16} />}>
             {t("action.create")}
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/preview/[id]/page.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/preview/[id]/page.tsx
new file mode 100644
index 000000000..93fb6681a
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/preview/[id]/page.tsx
@@ -0,0 +1,66 @@
+import { notFound, redirect } from "next/navigation";
+import { Badge, Box, Container, Group, Paper, Stack, Text, Title } from "@mantine/core";
+
+import { api } from "@homarr/api/server";
+import { auth } from "@homarr/auth/next";
+import CustomJsxDisplay from "@homarr/widgets/custom-api/custom-jsx-display";
+
+export default async function CustomWidgetPreviewPage({ params }: { params: Promise<{ id: string }> }) {
+  const session = await auth();
+  if (!session?.user.permissions.includes("admin")) redirect("/");
+  const { id } = await params;
+  const preview = await api.customWidget.previewGet({ sessionId: id }).catch(() => null);
+  if (!preview) notFound();
+
+  const loadRequests = preview.requests.filter((request) => request.kind === "query" && request.trigger === "load");
+  const results = await Promise.all(
+    loadRequests.map(async (request) => {
+      const result = await api.customWidget
+        .previewQuery({ sessionId: id, requestId: request.id, params: {} })
+        .catch((cause: unknown) => ({
+          ok: false,
+          status: 0,
+          statusText: "Error",
+          data: null,
+          error: cause instanceof Error ? cause.message : "Request failed",
+        }));
+      return [request.id, result] as const;
+    }),
+  );
+  const data = Object.fromEntries(results.map(([requestId, result]) => [requestId, result.data]));
+  const status = Object.fromEntries(
+    results.map(([requestId, result]) => [
+      requestId,
+      { loading: false, ok: result.ok, status: result.status, error: result.error },
+    ]),
+  );
+
+  return (
+    <Container size="xl" py="xl">
+      <Stack gap="lg">
+        <Group justify="space-between" align="end">
+          <Box>
+            <Text size="sm" c="dimmed" fw={600}>
+              CUSTOM WIDGET PREVIEW
+            </Text>
+            <Title>{preview.name}</Title>
+          </Box>
+          <Badge variant="light">Expires {new Date(preview.expiresAt).toLocaleTimeString()}</Badge>
+        </Group>
+        <Paper withBorder radius="lg" p="md" mih={360} style={{ overflow: "auto" }}>
+          <CustomJsxDisplay
+            data={{
+              template: preview.template,
+              data,
+              status,
+              options: preview.options,
+              requestCapabilities: preview.requests,
+              previewSessionId: preview.id,
+              previewLiveActions: preview.liveActions,
+            }}
+          />
+        </Paper>
+      </Stack>
+    </Container>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/layout.tsx b/apps/nextjs/src/app/[locale]/manage/layout.tsx
index 5e05cbfae..7e8a7fff2 100644
--- a/apps/nextjs/src/app/[locale]/manage/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/layout.tsx
@@ -5,6 +5,7 @@ import {
   IconApi,
   IconBook2,
   IconBox,
+  IconBuildingStore,
   IconBrandDiscord,
   IconBrandDocker,
   IconBrandGithub,
@@ -28,8 +29,10 @@ import {
   IconUsersGroup,
 } from "@tabler/icons-react";
 
+import { getRscUserSettingsAsync } from "@homarr/api/user-server";
 import { auth } from "@homarr/auth/next";
 import { isProviderEnabled } from "@homarr/auth/server";
+import { createLogger } from "@homarr/core/infrastructure/logs";
 import { createDocumentationLink } from "@homarr/definitions";
 import { dbEnv } from "@homarr/core/infrastructure/db/env";
 import { env } from "@homarr/docker/env";
@@ -40,11 +43,29 @@ import { homarrLogoPath } from "~/components/layout/logo/homarr-logo";
 import type { NavigationLink } from "~/components/layout/navigation";
 import { MainNavigation } from "~/components/layout/navigation";
 import { ClientShell } from "~/components/layout/shell";
-import { ManageTourProvider } from "~/components/onboarding/manage-tour";
+import { ManageTourGate } from "~/components/onboarding/manage-tour-gate";
+import { env as nextEnv } from "~/env";
+
+const logger = createLogger({ module: "manageLayout" });
 
 export default async function ManageLayout({ children }: PropsWithChildren) {
-  const t = await getScopedI18n("management.navbar");
-  const session = await auth();
+  const sessionPromise = auth();
+  const shouldRunManageTourPromise = sessionPromise.then(async (session) => {
+    if (!session || nextEnv.DEMO_MODE) return false;
+
+    try {
+      const user = await getRscUserSettingsAsync(session.user.id);
+      return user !== undefined && !user.completedManageTour;
+    } catch (error) {
+      logger.error(new Error("Failed to load the management tour status", { cause: error }));
+      return false;
+    }
+  });
+  const [t, session, shouldRunManageTour] = await Promise.all([
+    getScopedI18n("management.navbar"),
+    sessionPromise,
+    shouldRunManageTourPromise,
+  ]);
   const navigationLinks: NavigationLink[] = [
     {
       label: t("items.home"),
@@ -81,6 +102,12 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
       label: t("items.customWidgets"),
       hidden: !session?.user.permissions.includes("admin"),
     },
+    {
+      icon: IconBuildingStore,
+      href: "/manage/workshop",
+      label: t("items.workshop"),
+      hidden: !session?.user.permissions.includes("admin"),
+    },
     {
       icon: IconSearch,
       href: "/manage/search-engines",
@@ -232,7 +259,9 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
     </ClientShell>
   );
 
-  if (!session) return shell;
-
-  return <ManageTourProvider isAdmin={isAdmin}>{shell}</ManageTourProvider>;
+  return (
+    <ManageTourGate enabled={shouldRunManageTour} isAdmin={isAdmin}>
+      {shell}
+    </ManageTourGate>
+  );
 }
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx
index 9ad50b432..b68e28e90 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx
@@ -1,53 +1,22 @@
 "use client";
 
-import React from "react";
-import { Card, LoadingOverlay, Stack, Title } from "@mantine/core";
-
-import { clientApi } from "@homarr/api/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import { useForm } from "@homarr/form";
-import type { defaultServerSettings } from "@homarr/server-settings";
+import type { UseFormReturnType } from "@homarr/form";
 import { useScopedI18n } from "@homarr/translation/client";
 
-import { SwitchSetting } from "~/app/[locale]/manage/settings/_components/setting-switch";
+import { SectionCard } from "~/components/manage/section-card";
+import type { FormValues } from "./settings-form";
+import { SwitchSetting } from "./setting-switch";
 
 interface AnalyticsSettingsProps {
-  initialData: typeof defaultServerSettings.analytics;
+  form: UseFormReturnType<FormValues>;
 }
 
-export const AnalyticsSettings = ({ initialData }: AnalyticsSettingsProps) => {
+export const AnalyticsSettings = ({ form }: AnalyticsSettingsProps) => {
   const t = useScopedI18n("management.page.settings.section.analytics");
-  const { instanceId: _, ...formDefaults } = initialData;
-  const form = useForm({
-    initialValues: formDefaults,
-    onValuesChange: (updatedValues, _prev) => {
-      if (!form.isValid()) {
-        return;
-      }
-
-      void mutateAsync({
-        settingsKey: "analytics",
-        value: updatedValues,
-      });
-    },
-  });
-
-  const { mutateAsync, isPending } = clientApi.serverSettings.saveSettings.useMutation({
-    onSettled: async () => {
-      await revalidatePathActionAsync("/manage/settings");
-    },
-  });
 
   return (
-    <>
-      <Title order={2}>{t("title")}</Title>
-
-      <Card pos="relative">
-        <LoadingOverlay visible={isPending} />
-        <Stack>
-          <SwitchSetting form={form} formKey="enableGeneral" title={t("general.title")} text={t("general.text")} />
-        </Stack>
-      </Card>
-    </>
+    <SectionCard title={t("title")}>
+      <SwitchSetting form={form} formKey="enableGeneral" title={t("general.title")} text={t("general.text")} />
+    </SectionCard>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx
index 900caf0e4..e33afe1b6 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/appearance-settings-form.tsx
@@ -5,31 +5,32 @@ import { IconDeviceDesktop, IconMoon, IconSun } from "@tabler/icons-react";
 
 import type { ColorScheme } from "@homarr/definitions";
 import { colorSchemes } from "@homarr/definitions";
-import type { ServerSettings } from "@homarr/server-settings";
+import type { UseFormReturnType } from "@homarr/form";
 import { useScopedI18n } from "@homarr/translation/client";
 import { SelectWithCustomItems } from "@homarr/ui";
 
-import { CommonSettingsForm } from "./common-form";
+import { SectionCard } from "~/components/manage/section-card";
+import type { FormValues } from "./settings-form";
 
-export const AppearanceSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["appearance"] }) => {
-  const tApperance = useScopedI18n("management.page.settings.section.appearance");
+interface AppearanceSettingsFormProps {
+  form: UseFormReturnType<FormValues>;
+}
+
+export const AppearanceSettingsForm = ({ form }: AppearanceSettingsFormProps) => {
+  const tAppearance = useScopedI18n("management.page.settings.section.appearance");
 
   return (
-    <CommonSettingsForm settingKey="appearance" defaultValues={defaultValues}>
-      {(form) => (
-        <>
-          <SelectWithCustomItems
-            label={tApperance("defaultColorScheme.label")}
-            data={colorSchemes.map((scheme) => ({
-              value: scheme,
-              label: tApperance(`defaultColorScheme.options.${scheme}`),
-            }))}
-            {...form.getInputProps("defaultColorScheme")}
-            SelectOption={ApperanceCustomOption}
-          />
-        </>
-      )}
-    </CommonSettingsForm>
+    <SectionCard title={tAppearance("title")}>
+      <SelectWithCustomItems
+        label={tAppearance("defaultColorScheme.label")}
+        data={colorSchemes.map((scheme) => ({
+          value: scheme,
+          label: tAppearance(`defaultColorScheme.options.${scheme}`),
+        }))}
+        {...form.getInputProps("defaultColorScheme")}
+        SelectOption={AppearanceCustomOption}
+      />
+    </SectionCard>
   );
 };
 
@@ -39,7 +40,7 @@ const appearanceIcons = {
   dark: IconMoon,
 };
 
-const ApperanceCustomOption = ({ value, label }: { value: ColorScheme; label: string }) => {
+const AppearanceCustomOption = ({ value, label }: { value: ColorScheme; label: string }) => {
   const Icon = appearanceIcons[value];
 
   return (
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx
index 615c6ba38..801e0df9f 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx
@@ -3,49 +3,50 @@
 import { Switch, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import type { ServerSettings } from "@homarr/server-settings";
+import type { UseFormReturnType } from "@homarr/form";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { BoardSelect } from "~/components/board/board-select";
-import { CommonSettingsForm } from "./common-form";
+import { SectionCard } from "~/components/manage/section-card";
+import type { FormValues } from "./settings-form";
 
-export const BoardSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["board"] }) => {
+interface BoardSettingsFormProps {
+  form: UseFormReturnType<FormValues>;
+}
+
+export const BoardSettingsForm = ({ form }: BoardSettingsFormProps) => {
   const tBoard = useScopedI18n("management.page.settings.section.board");
   const [selectableBoards] = clientApi.board.getPublicBoards.useSuspenseQuery();
 
   return (
-    <CommonSettingsForm settingKey="board" defaultValues={defaultValues}>
-      {(form) => (
-        <>
-          <BoardSelect
-            label={tBoard("homeBoard.label")}
-            description={tBoard("homeBoard.description")}
-            clearable
-            boards={selectableBoards}
-            {...form.getInputProps("homeBoardId")}
-          />
+    <SectionCard title={tBoard("title")}>
+      <BoardSelect
+        label={tBoard("homeBoard.label")}
+        description={tBoard("homeBoard.description")}
+        clearable
+        boards={selectableBoards}
+        {...form.getInputProps("homeBoardId")}
+      />
 
-          <BoardSelect
-            label={tBoard("homeBoard.mobileLabel")}
-            description={tBoard("homeBoard.description")}
-            clearable
-            boards={selectableBoards}
-            {...form.getInputProps("mobileHomeBoardId")}
-          />
+      <BoardSelect
+        label={tBoard("homeBoard.mobileLabel")}
+        description={tBoard("homeBoard.description")}
+        clearable
+        boards={selectableBoards}
+        {...form.getInputProps("mobileHomeBoardId")}
+      />
 
-          <Text fw={500}>{tBoard("status.title")}</Text>
-          <Switch
-            {...form.getInputProps("enableStatusByDefault", { type: "checkbox" })}
-            label={tBoard("status.enableStatusByDefault.label")}
-            description={tBoard("status.enableStatusByDefault.description")}
-          />
-          <Switch
-            {...form.getInputProps("forceDisableStatus", { type: "checkbox" })}
-            label={tBoard("status.forceDisableStatus.label")}
-            description={tBoard("status.forceDisableStatus.description")}
-          />
-        </>
-      )}
-    </CommonSettingsForm>
+      <Text fw={500}>{tBoard("status.title")}</Text>
+      <Switch
+        {...form.getInputProps("enableStatusByDefault", { type: "checkbox" })}
+        label={tBoard("status.enableStatusByDefault.label")}
+        description={tBoard("status.enableStatusByDefault.description")}
+      />
+      <Switch
+        {...form.getInputProps("forceDisableStatus", { type: "checkbox" })}
+        label={tBoard("status.forceDisableStatus.label")}
+        description={tBoard("status.forceDisableStatus.description")}
+      />
+    </SectionCard>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/common-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/common-form.tsx
deleted file mode 100644
index 8a932dee1..000000000
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/common-form.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client";
-
-import { Button, Group, Stack } from "@mantine/core";
-
-import { clientApi } from "@homarr/api/client";
-import { useForm } from "@homarr/form";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import type { ServerSettings } from "@homarr/server-settings";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
-
-export const CommonSettingsForm = <TKey extends keyof ServerSettings>({
-  settingKey,
-  defaultValues,
-  children,
-}: {
-  settingKey: TKey;
-  defaultValues: ServerSettings[TKey];
-  children: (form: ReturnType<typeof useForm<ServerSettings[TKey]>>) => React.ReactNode;
-}) => {
-  const t = useI18n();
-  const tSettings = useScopedI18n("management.page.settings");
-  const { mutateAsync, isPending } = clientApi.serverSettings.saveSettings.useMutation({
-    onSuccess() {
-      showSuccessNotification({
-        message: tSettings("notification.success.message"),
-      });
-    },
-    onError() {
-      showErrorNotification({
-        message: tSettings("notification.error.message"),
-      });
-    },
-  });
-  const form = useForm({
-    initialValues: defaultValues,
-  });
-
-  const handleSubmitAsync = async (values: ServerSettings[TKey]) => {
-    await mutateAsync({
-      settingsKey: settingKey,
-      value: values,
-    });
-  };
-
-  return (
-    <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
-      <Stack gap="sm">
-        {children(form)}
-        <Group justify="end">
-          <Button type="submit" loading={isPending}>
-            {t("common.action.save")}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
-  );
-};
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/crawling-and-indexing.settings.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/crawling-and-indexing.settings.tsx
index 29206a473..15852c274 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/crawling-and-indexing.settings.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/crawling-and-indexing.settings.tsx
@@ -1,68 +1,35 @@
 "use client";
 
-import React from "react";
-import { Card, LoadingOverlay, Stack, Text, Title } from "@mantine/core";
+import { Text } from "@mantine/core";
 
-import { clientApi } from "@homarr/api/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import { useForm } from "@homarr/form";
-import type { defaultServerSettings } from "@homarr/server-settings";
+import type { UseFormReturnType } from "@homarr/form";
 import { useScopedI18n } from "@homarr/translation/client";
 
-import { SwitchSetting } from "~/app/[locale]/manage/settings/_components/setting-switch";
+import { SectionCard } from "~/components/manage/section-card";
+import type { FormValues } from "./settings-form";
+import { SwitchSetting } from "./setting-switch";
 
 interface CrawlingAndIndexingSettingsProps {
-  initialData: typeof defaultServerSettings.crawlingAndIndexing;
+  form: UseFormReturnType<FormValues>;
 }
 
-export const CrawlingAndIndexingSettings = ({ initialData }: CrawlingAndIndexingSettingsProps) => {
+export const CrawlingAndIndexingSettings = ({ form }: CrawlingAndIndexingSettingsProps) => {
   const t = useScopedI18n("management.page.settings.section.crawlingAndIndexing");
-  const form = useForm({
-    initialValues: initialData,
-    onValuesChange: (updatedValues, _) => {
-      if (!form.isValid()) {
-        return;
-      }
-
-      void mutateAsync({
-        settingsKey: "crawlingAndIndexing",
-        value: updatedValues,
-      });
-    },
-  });
-
-  const { mutateAsync, isPending } = clientApi.serverSettings.saveSettings.useMutation({
-    onSettled: async () => {
-      await revalidatePathActionAsync("/manage/settings");
-    },
-  });
 
   return (
-    <>
-      <Title order={2}>{t("title")}</Title>
-
-      <Card pos="relative">
-        <Text c={"dimmed"} mb={"lg"}>
-          {t("warning")}
-        </Text>
-        <LoadingOverlay visible={isPending} />
-        <Stack>
-          <SwitchSetting form={form} formKey="noIndex" title={t("noIndex.title")} text={t("noIndex.text")} />
-          <SwitchSetting form={form} formKey="noFollow" title={t("noFollow.title")} text={t("noFollow.text")} />
-          <SwitchSetting
-            form={form}
-            formKey="noTranslate"
-            title={t("noTranslate.title")}
-            text={t("noTranslate.text")}
-          />
-          <SwitchSetting
-            form={form}
-            formKey="noSiteLinksSearchBox"
-            title={t("noSiteLinksSearchBox.title")}
-            text={t("noSiteLinksSearchBox.text")}
-          />
-        </Stack>
-      </Card>
-    </>
+    <SectionCard title={t("title")}>
+      <Text c="dimmed" size="sm">
+        {t("warning")}
+      </Text>
+      <SwitchSetting form={form} formKey="noIndex" title={t("noIndex.title")} text={t("noIndex.text")} />
+      <SwitchSetting form={form} formKey="noFollow" title={t("noFollow.title")} text={t("noFollow.text")} />
+      <SwitchSetting form={form} formKey="noTranslate" title={t("noTranslate.title")} text={t("noTranslate.text")} />
+      <SwitchSetting
+        form={form}
+        formKey="noSiteLinksSearchBox"
+        title={t("noSiteLinksSearchBox.title")}
+        text={t("noSiteLinksSearchBox.text")}
+      />
+    </SectionCard>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx
index 7d9dff99e..da34c7019 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/culture-settings-form.tsx
@@ -1,26 +1,28 @@
 "use client";
 
-import type { ServerSettings } from "@homarr/server-settings";
+import type { UseFormReturnType } from "@homarr/form";
 import type { SupportedLanguage } from "@homarr/translation";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { LanguageCombobox } from "~/components/language/language-combobox";
-import { CommonSettingsForm } from "./common-form";
+import { SectionCard } from "~/components/manage/section-card";
+import type { FormValues } from "./settings-form";
 
-export const CultureSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["culture"] }) => {
+interface CultureSettingsFormProps {
+  form: UseFormReturnType<FormValues>;
+}
+
+export const CultureSettingsForm = ({ form }: CultureSettingsFormProps) => {
   const tCulture = useScopedI18n("management.page.settings.section.culture");
+  const localeInputProps = form.getInputProps("defaultLocale");
 
   return (
-    <CommonSettingsForm settingKey="culture" defaultValues={defaultValues}>
-      {(form) => (
-        <>
-          <LanguageCombobox
-            label={tCulture("defaultLocale.label")}
-            value={form.getInputProps("defaultLocale").value as SupportedLanguage}
-            {...form.getInputProps("defaultLocale")}
-          />
-        </>
-      )}
-    </CommonSettingsForm>
+    <SectionCard title={tCulture("title")}>
+      <LanguageCombobox
+        label={tCulture("defaultLocale.label")}
+        {...localeInputProps}
+        value={localeInputProps.value as SupportedLanguage}
+      />
+    </SectionCard>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/search-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/search-settings-form.tsx
index a39cab70d..904dd4b08 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/search-settings-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/search-settings-form.tsx
@@ -3,27 +3,28 @@
 import { Select } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import type { ServerSettings } from "@homarr/server-settings";
+import type { UseFormReturnType } from "@homarr/form";
 import { useScopedI18n } from "@homarr/translation/client";
 
-import { CommonSettingsForm } from "./common-form";
+import { SectionCard } from "~/components/manage/section-card";
+import type { FormValues } from "./settings-form";
 
-export const SearchSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["search"] }) => {
+interface SearchSettingsFormProps {
+  form: UseFormReturnType<FormValues>;
+}
+
+export const SearchSettingsForm = ({ form }: SearchSettingsFormProps) => {
   const tSearch = useScopedI18n("management.page.settings.section.search");
   const [selectableSearchEngines] = clientApi.searchEngine.getSelectable.useSuspenseQuery({ withIntegrations: false });
 
   return (
-    <CommonSettingsForm settingKey="search" defaultValues={defaultValues}>
-      {(form) => (
-        <>
-          <Select
-            label={tSearch("defaultSearchEngine.label")}
-            description={tSearch("defaultSearchEngine.description")}
-            data={selectableSearchEngines}
-            {...form.getInputProps("defaultSearchEngineId")}
-          />
-        </>
-      )}
-    </CommonSettingsForm>
+    <SectionCard title={tSearch("title")}>
+      <Select
+        label={tSearch("defaultSearchEngine.label")}
+        description={tSearch("defaultSearchEngine.description")}
+        data={selectableSearchEngines}
+        {...form.getInputProps("defaultSearchEngineId")}
+      />
+    </SectionCard>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/setting-switch.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/setting-switch.tsx
index adec086ad..4e1194d42 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/setting-switch.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/setting-switch.tsx
@@ -3,10 +3,13 @@ import React from "react";
 import type { MantineSpacing } from "@mantine/core";
 import { Group, Stack, Switch, Text, UnstyledButton } from "@mantine/core";
 
-import type { Modify } from "@homarr/common/types";
 import type { UseFormReturnType } from "@homarr/form";
 
-export const SwitchSetting = <TFormValue extends Record<string, boolean>>({
+type BooleanKeys<TFormValue> = {
+  [TKey in keyof TFormValue]: TFormValue[TKey] extends boolean ? TKey : never;
+}[keyof TFormValue];
+
+export const SwitchSetting = <TFormValue extends Record<string, unknown>>({
   form,
   ms,
   title,
@@ -14,13 +17,8 @@ export const SwitchSetting = <TFormValue extends Record<string, boolean>>({
   formKey,
   disabled,
 }: {
-  form: Modify<
-    UseFormReturnType<TFormValue, TFormValue>,
-    {
-      setFieldValue: (key: keyof TFormValue, value: (previous: boolean) => boolean) => void;
-    }
-  >;
-  formKey: keyof TFormValue;
+  form: UseFormReturnType<TFormValue, TFormValue>;
+  formKey: string & BooleanKeys<TFormValue>;
   ms?: MantineSpacing;
   title: string;
   text: ReactNode;
@@ -31,7 +29,7 @@ export const SwitchSetting = <TFormValue extends Record<string, boolean>>({
       return;
     }
 
-    form.setFieldValue(formKey, (previous) => !previous);
+    form.setFieldValue(formKey, (previous) => !previous as never);
   }, [form, formKey, disabled]);
 
   return (
@@ -44,7 +42,7 @@ export const SwitchSetting = <TFormValue extends Record<string, boolean>>({
           </Text>
         </Stack>
       </UnstyledButton>
-      <Switch disabled={disabled} onClick={handleClick} checked={form.values[formKey] && !disabled} />
+      <Switch disabled={disabled} onClick={handleClick} checked={Boolean(form.values[formKey])} />
     </Group>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/settings-form.tsx
new file mode 100644
index 000000000..ce64a3404
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/settings-form.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Button, Stack } from "@mantine/core";
+import { z } from "zod/v4";
+
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { env } from "@homarr/common/env";
+import { colorSchemes } from "@homarr/definitions";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import type { ServerSettings, defaultServerSettingsKeys } from "@homarr/server-settings";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+
+import { UnsavedChangesBar } from "~/components/manage/unsaved-changes-bar";
+import { AnalyticsSettings } from "./analytics.settings";
+import { AppearanceSettingsForm } from "./appearance-settings-form";
+import { BoardSettingsForm } from "./board-settings-form";
+import { CrawlingAndIndexingSettings } from "./crawling-and-indexing.settings";
+import { CultureSettingsForm } from "./culture-settings-form";
+import { SearchSettingsForm } from "./search-settings-form";
+import { UserSettingsForm } from "./user-settings-form";
+
+const settingsFormSchema = z.object({
+  enableGeneral: z.boolean(),
+  noIndex: z.boolean(),
+  noFollow: z.boolean(),
+  noTranslate: z.boolean(),
+  noSiteLinksSearchBox: z.boolean(),
+  homeBoardId: z.string().nullable(),
+  mobileHomeBoardId: z.string().nullable(),
+  enableStatusByDefault: z.boolean(),
+  forceDisableStatus: z.boolean(),
+  enableGravatar: z.boolean(),
+  defaultSearchEngineId: z.string().nullable(),
+  defaultColorScheme: z.enum(colorSchemes),
+  defaultLocale: z.string(),
+});
+
+export type FormValues = z.infer<typeof settingsFormSchema>;
+
+const buildInitialValues = (initialData: ServerSettings): FormValues => ({
+  enableGeneral: initialData.analytics.enableGeneral,
+  noIndex: initialData.crawlingAndIndexing.noIndex,
+  noFollow: initialData.crawlingAndIndexing.noFollow,
+  noTranslate: initialData.crawlingAndIndexing.noTranslate,
+  noSiteLinksSearchBox: initialData.crawlingAndIndexing.noSiteLinksSearchBox,
+  homeBoardId: initialData.board.homeBoardId,
+  mobileHomeBoardId: initialData.board.mobileHomeBoardId,
+  enableStatusByDefault: initialData.board.enableStatusByDefault,
+  forceDisableStatus: initialData.board.forceDisableStatus,
+  enableGravatar: initialData.user.enableGravatar,
+  defaultSearchEngineId: initialData.search.defaultSearchEngineId,
+  defaultColorScheme: initialData.appearance.defaultColorScheme,
+  defaultLocale: initialData.culture.defaultLocale,
+});
+
+interface SettingsFormProps {
+  initialData: ServerSettings;
+}
+
+export const SettingsForm = ({ initialData }: SettingsFormProps) => {
+  const t = useI18n();
+  const tSettings = useScopedI18n("management.page.settings");
+
+  const initialValues = buildInitialValues(initialData);
+  const initialValuesRef = useRef(initialValues);
+
+  const form = useZodForm(settingsFormSchema, {
+    initialValues,
+  });
+
+  const isDirtyRef = useRef(false);
+  isDirtyRef.current = form.isDirty();
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const saveSettingsMutation = clientApi.serverSettings.saveSettings.useMutation({
+    onError(error) {
+      showErrorNotification({ title: t("common.notification.update.error"), message: error.message });
+    },
+  });
+
+  useEffect(() => {
+    const handler = (event: BeforeUnloadEvent) => {
+      if (env.NODE_ENV === "development") return;
+      if (isDirtyRef.current) event.preventDefault();
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, []);
+
+  const handleSubmitAsync = async (values: FormValues) => {
+    const defaults = initialValuesRef.current;
+    const changed = <TKey extends keyof FormValues>(...fields: TKey[]) =>
+      fields.some((field) => values[field] !== defaults[field]);
+
+    const groups: {
+      settingsKey: (typeof defaultServerSettingsKeys)[number];
+      when: boolean;
+      value: Record<string, unknown>;
+    }[] = [
+      { settingsKey: "analytics", when: changed("enableGeneral"), value: { enableGeneral: values.enableGeneral } },
+      {
+        settingsKey: "crawlingAndIndexing",
+        when: changed("noIndex", "noFollow", "noTranslate", "noSiteLinksSearchBox"),
+        value: {
+          noIndex: values.noIndex,
+          noFollow: values.noFollow,
+          noTranslate: values.noTranslate,
+          noSiteLinksSearchBox: values.noSiteLinksSearchBox,
+        },
+      },
+      {
+        settingsKey: "board",
+        when: changed("homeBoardId", "mobileHomeBoardId", "enableStatusByDefault", "forceDisableStatus"),
+        value: {
+          homeBoardId: values.homeBoardId,
+          mobileHomeBoardId: values.mobileHomeBoardId,
+          enableStatusByDefault: values.enableStatusByDefault,
+          forceDisableStatus: values.forceDisableStatus,
+        },
+      },
+      { settingsKey: "user", when: changed("enableGravatar"), value: { enableGravatar: values.enableGravatar } },
+      {
+        settingsKey: "search",
+        when: changed("defaultSearchEngineId"),
+        value: { defaultSearchEngineId: values.defaultSearchEngineId },
+      },
+      {
+        settingsKey: "appearance",
+        when: changed("defaultColorScheme"),
+        value: { defaultColorScheme: values.defaultColorScheme },
+      },
+      { settingsKey: "culture", when: changed("defaultLocale"), value: { defaultLocale: values.defaultLocale } },
+    ];
+
+    const promises = groups
+      .filter((group) => group.when)
+      .map((group) => saveSettingsMutation.mutateAsync({ settingsKey: group.settingsKey, value: group.value }));
+    if (promises.length === 0) return;
+
+    setIsSubmitting(true);
+    try {
+      const results = await Promise.allSettled(promises);
+      if (!results.every((result) => result.status === "fulfilled")) {
+        return;
+      }
+
+      initialValuesRef.current = values;
+      form.setInitialValues(values);
+      form.resetDirty();
+      await revalidatePathActionAsync("/manage/settings");
+      showSuccessNotification({
+        title: t("common.notification.update.success"),
+        message: tSettings("notification.success.message"),
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDiscard = () => {
+    form.setValues(initialValuesRef.current);
+    form.resetDirty();
+  };
+
+  return (
+    <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
+      <Stack gap="xl">
+        <AnalyticsSettings form={form} />
+        <CrawlingAndIndexingSettings form={form} />
+        <BoardSettingsForm form={form} />
+        <UserSettingsForm form={form} />
+        <SearchSettingsForm form={form} />
+        <AppearanceSettingsForm form={form} />
+        <CultureSettingsForm form={form} />
+
+        {form.isDirty() && (
+          <UnsavedChangesBar>
+            <Button type="button" disabled={isSubmitting} variant="default" onClick={handleDiscard}>
+              {t("common.action.discard")}
+            </Button>
+            <Button loading={isSubmitting} type="submit" disabled={!form.isValid()}>
+              {t("common.action.saveChanges")}
+            </Button>
+          </UnsavedChangesBar>
+        )}
+      </Stack>
+    </form>
+  );
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/user-settings-form.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/user-settings-form.tsx
index 49b8f7219..41abb2882 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/user-settings-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/user-settings-form.tsx
@@ -2,25 +2,26 @@
 
 import { Switch } from "@mantine/core";
 
-import type { ServerSettings } from "@homarr/server-settings";
+import type { UseFormReturnType } from "@homarr/form";
 import { useScopedI18n } from "@homarr/translation/client";
 
-import { CommonSettingsForm } from "./common-form";
+import { SectionCard } from "~/components/manage/section-card";
+import type { FormValues } from "./settings-form";
 
-export const UserSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["user"] }) => {
+interface UserSettingsFormProps {
+  form: UseFormReturnType<FormValues>;
+}
+
+export const UserSettingsForm = ({ form }: UserSettingsFormProps) => {
   const tUser = useScopedI18n("management.page.settings.section.user");
 
   return (
-    <CommonSettingsForm settingKey="user" defaultValues={defaultValues}>
-      {(form) => (
-        <>
-          <Switch
-            {...form.getInputProps("enableGravatar", { type: "checkbox" })}
-            label={tUser("enableGravatar.label")}
-            description={tUser("enableGravatar.description")}
-          />
-        </>
-      )}
-    </CommonSettingsForm>
+    <SectionCard title={tUser("title")}>
+      <Switch
+        {...form.getInputProps("enableGravatar", { type: "checkbox" })}
+        label={tUser("enableGravatar.label")}
+        description={tUser("enableGravatar.description")}
+      />
+    </SectionCard>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/loading.tsx b/apps/nextjs/src/app/[locale]/manage/settings/loading.tsx
new file mode 100644
index 000000000..097406c3d
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/settings/loading.tsx
@@ -0,0 +1,9 @@
+import { Center, Loader } from "@mantine/core";
+
+export default function SettingsLoading() {
+  return (
+    <Center h="40vh">
+      <Loader />
+    </Center>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/page.tsx b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
index 4a7ea9bc0..eee563069 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
@@ -5,14 +5,8 @@ import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { getScopedI18n } from "@homarr/translation/server";
 
-import { CrawlingAndIndexingSettings } from "~/app/[locale]/manage/settings/_components/crawling-and-indexing.settings";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
-import { AnalyticsSettings } from "./_components/analytics.settings";
-import { AppearanceSettingsForm } from "./_components/appearance-settings-form";
-import { BoardSettingsForm } from "./_components/board-settings-form";
-import { CultureSettingsForm } from "./_components/culture-settings-form";
-import { SearchSettingsForm } from "./_components/search-settings-form";
-import { UserSettingsForm } from "./_components/user-settings-form";
+import { SettingsForm } from "./_components/settings-form";
 
 export async function generateMetadata() {
   const t = await getScopedI18n("management");
@@ -32,33 +26,13 @@ export default async function SettingsPage() {
 
   const serverSettings = await api.serverSettings.getAll();
   const tSettings = await getScopedI18n("management.page.settings");
+
   return (
     <>
       <DynamicBreadcrumb />
       <Stack>
         <Title order={1}>{tSettings("title")}</Title>
-        <AnalyticsSettings initialData={serverSettings.analytics} />
-        <CrawlingAndIndexingSettings initialData={serverSettings.crawlingAndIndexing} />
-        <Stack>
-          <Title order={2}>{tSettings("section.board.title")}</Title>
-          <BoardSettingsForm defaultValues={serverSettings.board} />
-        </Stack>
-        <Stack>
-          <Title order={2}>{tSettings("section.user.title")}</Title>
-          <UserSettingsForm defaultValues={serverSettings.user} />
-        </Stack>
-        <Stack>
-          <Title order={2}>{tSettings("section.search.title")}</Title>
-          <SearchSettingsForm defaultValues={serverSettings.search} />
-        </Stack>
-        <Stack>
-          <Title order={2}>{tSettings("section.appearance.title")}</Title>
-          <AppearanceSettingsForm defaultValues={serverSettings.appearance} />
-        </Stack>
-        <Stack>
-          <Title order={2}>{tSettings("section.culture.title")}</Title>
-          <CultureSettingsForm defaultValues={serverSettings.culture} />
-        </Stack>
+        <SettingsForm initialData={serverSettings} />
       </Stack>
     </>
   );
diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_reset-tours.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_reset-tours.tsx
index 76f33a8db..82e50d218 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_reset-tours.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_reset-tours.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useRouter } from "next/navigation";
 import { Badge, Button, Group, Stack, Text } from "@mantine/core";
 import { IconRefresh } from "@tabler/icons-react";
 
@@ -9,6 +10,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 export const ResetTours = () => {
   const t = useScopedI18n("management.page.user.setting.general.item.onboardingTours");
+  const router = useRouter();
   const utils = clientApi.useUtils();
   const { data: tourStatus } = clientApi.user.getTourStatus.useQuery();
   const { mutate: resetTours, isPending } = clientApi.user.resetTours.useMutation({
@@ -18,6 +20,7 @@ export const ResetTours = () => {
         message: t("resetSuccess.message"),
       });
       void utils.user.getTourStatus.invalidate();
+      router.refresh();
     },
   });
 
diff --git a/apps/nextjs/src/app/[locale]/manage/workshop/page.tsx b/apps/nextjs/src/app/[locale]/manage/workshop/page.tsx
new file mode 100644
index 000000000..d52825869
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/workshop/page.tsx
@@ -0,0 +1,42 @@
+import { redirect } from "next/navigation";
+import { Button } from "@mantine/core";
+import { IconExternalLink } from "@tabler/icons-react";
+
+import { auth } from "@homarr/auth/next";
+import { getScopedI18n } from "@homarr/translation/server";
+import { resolveHomarrUrlConfig } from "@homarr/workshop/schema";
+
+import { ManagePageLayout } from "~/components/manage/manage-page-layout";
+import { WorkshopInstaller } from "~/components/workshop/workshop-installer";
+import { env } from "~/env";
+
+export default async function WorkshopPage() {
+  const session = await auth();
+  if (!session?.user.permissions.includes("admin")) redirect(session ? "/" : "/auth/login");
+  const t = await getScopedI18n("workshop");
+  const { workshopWebUrl } = resolveHomarrUrlConfig({
+    homarrWebsiteUrl: env.HOMARR_WEBSITE_URL,
+    workshopApiUrl: env.WORKSHOP_API_URL,
+    workshopWebUrl: env.WORKSHOP_WEB_URL,
+  });
+  return (
+    <ManagePageLayout
+      title={t("title")}
+      size="xl"
+      primaryAction={
+        <Button
+          component="a"
+          href={workshopWebUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          variant="default"
+          leftSection={<IconExternalLink size={16} />}
+        >
+          {t("openCommunity")}
+        </Button>
+      }
+    >
+      <WorkshopInstaller />
+    </ManagePageLayout>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx b/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx
index 9bbc0ac93..882842ee7 100644
--- a/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx
+++ b/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx
@@ -1,41 +1,38 @@
 "use client";
 
-import { useCallback, useMemo, useState } from "react";
+import { use, useCallback, useState } from "react";
 import { ActionIcon, Affix, Card } from "@mantine/core";
 import { IconDimensions, IconPencil, IconToggleLeft, IconToggleRight } from "@tabler/icons-react";
 import { QueryErrorResetBoundary } from "@tanstack/react-query";
 import { ErrorBoundary } from "react-error-boundary";
 
-import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
+import { clientApi } from "@homarr/api/client";
+import type { WidgetKind } from "@homarr/definitions";
 import { useModalAction } from "@homarr/modals";
-import { showSuccessNotification } from "@homarr/notifications";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
 import type { BoardItemAdvancedOptions } from "@homarr/validation/shared";
-import { loadWidgetDynamic, reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
 import { WidgetError } from "@homarr/widgets/errors";
-import { WidgetEditModal } from "@homarr/widgets/modals";
+import { loadWidgetResources, reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
 
+import { LazyWidgetEditModal, preloadWidgetEditModal } from "~/components/board/items/lazy-widget-edit-modal";
 import type { Dimensions } from "./_dimension-modal";
 import { PreviewDimensionsModal } from "./_dimension-modal";
 
 interface WidgetPreviewPageContentProps {
   kind: WidgetKind;
-  integrationData: {
-    id: string;
-    name: string;
-    url: string;
-    kind: IntegrationKind;
-  }[];
 }
 
-export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPreviewPageContentProps) => {
+export const WidgetPreviewPageContent = ({ kind }: WidgetPreviewPageContentProps) => {
   const settings = useSettings();
   const t = useI18n();
-  const { openModal: openWidgetEditModal } = useModalAction(WidgetEditModal);
+  const utils = clientApi.useUtils();
+  const { openModal: openWidgetEditModal } = useModalAction(LazyWidgetEditModal);
   const { openModal: openPreviewDimensionsModal } = useModalAction(PreviewDimensionsModal);
-  const currentDefinition = useMemo(() => widgetImports[kind].definition, [kind]);
+  const { definition: currentDefinition, Component } = use(loadWidgetResources(kind));
   const [editMode, setEditMode] = useState(false);
+  const [isEditorLoading, setIsEditorLoading] = useState(false);
   const [dimensions, setDimensions] = useState<Dimensions>({
     width: 128,
     height: 128,
@@ -45,7 +42,7 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
     integrationIds: string[];
     advancedOptions: BoardItemAdvancedOptions;
   }>({
-    options: reduceWidgetOptionsWithDefaultValues(kind, settings, {}),
+    options: reduceWidgetOptionsWithDefinition(currentDefinition, settings, {}),
     integrationIds: [],
     advancedOptions: {
       title: null,
@@ -54,31 +51,41 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
     },
   });
 
-  const handleOpenEditWidgetModal = useCallback(() => {
-    openWidgetEditModal(
-      {
-        kind,
-        value: state,
-        onSuccessfulEdit: (value) => {
-          setState(value);
+  const handleOpenEditWidgetModal = useCallback(async () => {
+    const hasIntegrationSupport = "supportedIntegrations" in currentDefinition;
+    setIsEditorLoading(true);
+    preloadWidgetEditModal();
+    try {
+      const integrationData = hasIntegrationSupport ? await utils.integration.all.ensureData() : [];
+      openWidgetEditModal(
+        {
+          kind,
+          definition: currentDefinition,
+          value: state,
+          onSuccessfulEdit: (value) => {
+            setState(value);
+          },
+          integrationData: integrationData.filter((integration) =>
+            (currentDefinition.supportedIntegrations ?? []).includes(integration.kind),
+          ),
+          integrationSupport: hasIntegrationSupport,
+          settings,
         },
-        integrationData: integrationData.filter(
-          (integration) =>
-            "supportedIntegrations" in currentDefinition &&
-            (currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
-        ),
-        integrationSupport: "supportedIntegrations" in currentDefinition,
-        settings,
-      },
-      {
-        title(t) {
-          return `${t("item.edit.title")} - ${t(`widget.${kind}.name`)}`;
+        {
+          title(translate) {
+            return `${translate("item.edit.title")} - ${translate(`widget.${kind}.name`)}`;
+          },
         },
-      },
-    );
-  }, [currentDefinition, integrationData, kind, openWidgetEditModal, settings, state]);
-
-  const Comp = loadWidgetDynamic(kind);
+      );
+    } catch (error) {
+      showErrorNotification({
+        title: t("common.error"),
+        message: error instanceof Error ? error.message : String(error),
+      });
+    } finally {
+      setIsEditorLoading(false);
+    }
+  }, [currentDefinition, kind, openWidgetEditModal, settings, state, t, utils]);
 
   const toggleEditMode = useCallback(() => {
     setEditMode((editMode) => !editMode);
@@ -94,8 +101,11 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
     });
   }, [dimensions, openPreviewDimensionsModal]);
 
-  const updateOptions = ({ newOptions }: { newOptions: Record<string, unknown> }) =>
-    setState({ ...state, options: { ...state.options, newOptions } });
+  const updateOptions = useCallback(
+    ({ newOptions }: { newOptions: Record<string, unknown> }) =>
+      setState((current) => ({ ...current, options: { ...current.options, ...newOptions } })),
+    [],
+  );
 
   return (
     <>
@@ -105,10 +115,10 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
             <ErrorBoundary
               onReset={reset}
               fallbackRender={({ resetErrorBoundary, error }) => (
-                <WidgetError kind={kind} error={error} resetErrorBoundary={resetErrorBoundary} />
+                <WidgetError definition={currentDefinition} error={error} resetErrorBoundary={resetErrorBoundary} />
               )}
             >
-              <Comp
+              <Component
                 options={state.options as never}
                 integrationIds={state.integrationIds}
                 width={dimensions.width}
@@ -127,7 +137,10 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
           size={48}
           variant="default"
           radius="xl"
-          onClick={handleOpenEditWidgetModal}
+          onClick={() => void handleOpenEditWidgetModal()}
+          onFocus={preloadWidgetEditModal}
+          onPointerEnter={preloadWidgetEditModal}
+          loading={isEditorLoading}
           aria-label={t("common.action.edit")}
         >
           <IconPencil size={24} />
diff --git a/apps/nextjs/src/app/[locale]/widgets/[kind]/layout.tsx b/apps/nextjs/src/app/[locale]/widgets/[kind]/layout.tsx
index cfd213f9d..9cdf91241 100644
--- a/apps/nextjs/src/app/[locale]/widgets/[kind]/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/widgets/[kind]/layout.tsx
@@ -1,23 +1,18 @@
 import type { PropsWithChildren } from "react";
 
-import { widgetImports } from "@homarr/widgets";
+import { widgetKinds } from "@homarr/definitions";
+import { widgetCatalogIcons } from "@homarr/widgets/catalog";
 
 import { MainNavigation } from "~/components/layout/navigation";
 import { ClientShell } from "~/components/layout/shell";
 
-const getLinks = () => {
-  return Object.entries(widgetImports).map(([key, value]) => {
-    return {
-      href: `/widgets/${key}`,
-      icon: value.definition.icon,
-      label: value.definition.kind,
-    };
-  });
-};
+const links = widgetKinds.map((kind) => ({
+  href: `/widgets/${kind}`,
+  icon: widgetCatalogIcons[kind],
+  label: kind,
+}));
 
 export default function WidgetPreviewLayout({ children }: PropsWithChildren) {
-  const links = getLinks();
-
   return (
     <ClientShell hasHeader={false}>
       <MainNavigation links={links} />
diff --git a/apps/nextjs/src/app/[locale]/widgets/[kind]/page.tsx b/apps/nextjs/src/app/[locale]/widgets/[kind]/page.tsx
index fbcd741c2..454e7a805 100644
--- a/apps/nextjs/src/app/[locale]/widgets/[kind]/page.tsx
+++ b/apps/nextjs/src/app/[locale]/widgets/[kind]/page.tsx
@@ -1,10 +1,9 @@
+import { Suspense } from "react";
 import { notFound } from "next/navigation";
-import { Center } from "@mantine/core";
+import { Center, Loader } from "@mantine/core";
 
-import { env } from "@homarr/common/env";
-import { db } from "@homarr/db";
 import type { WidgetKind } from "@homarr/definitions";
-import { widgetImports } from "@homarr/widgets";
+import { widgetKinds } from "@homarr/widgets/manifest";
 
 import { WidgetPreviewPageContent } from "./_content";
 
@@ -13,24 +12,16 @@ interface Props {
 }
 
 export default async function WidgetPreview(props: Props) {
-  if (!((await props.params).kind in widgetImports || env.NODE_ENV !== "development")) {
+  const { kind } = await props.params;
+  if (!widgetKinds.includes(kind as WidgetKind)) {
     notFound();
   }
 
-  const integrationData = await db.query.integrations.findMany({
-    columns: {
-      id: true,
-      name: true,
-      url: true,
-      kind: true,
-    },
-  });
-
-  const sort = (await props.params).kind as WidgetKind;
-
   return (
     <Center h="100vh">
-      <WidgetPreviewPageContent kind={sort} integrationData={integrationData} />
+      <Suspense fallback={<Loader size="sm" />}>
+        <WidgetPreviewPageContent key={kind} kind={kind as WidgetKind} />
+      </Suspense>
     </Center>
   );
 }
diff --git a/apps/nextjs/src/app/api/custom-widgets/[resource]/route.ts b/apps/nextjs/src/app/api/custom-widgets/[resource]/route.ts
new file mode 100644
index 000000000..c608a54c6
--- /dev/null
+++ b/apps/nextjs/src/app/api/custom-widgets/[resource]/route.ts
@@ -0,0 +1,42 @@
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+import { CUSTOM_WIDGET_MCP_AUTHORING_PROMPT } from "@homarr/custom-widgets/authoring-prompt";
+import { getCustomWidgetComponentCatalog, getCustomWidgetSkill } from "@homarr/custom-widgets/authoring-resources";
+import { getCustomWidgetJsonSchema } from "@homarr/custom-widgets/core";
+
+import { adminRoute } from "../admin";
+
+interface RouteContext {
+  params: Promise<{ resource: string }>;
+}
+
+const resources = new Map<string, () => unknown>([
+  ["schema", getCustomWidgetJsonSchema],
+  ["components", getCustomWidgetComponentCatalog],
+  ["skill", getCustomWidgetSkill],
+  [
+    "authoring-prompt",
+    () => ({
+      version: 2,
+      prompt: CUSTOM_WIDGET_MCP_AUTHORING_PROMPT,
+      resources: [
+        "homarr://custom-widgets/schema",
+        "homarr://custom-widgets/components",
+        "homarr://custom-widgets/skill",
+      ],
+      httpResources: ["/api/custom-widgets/schema", "/api/custom-widgets/components", "/api/custom-widgets/skill"],
+    }),
+  ],
+]);
+
+const getAuthoringResource = async (_request: NextRequest, context: RouteContext): Promise<Response> => {
+  const { resource } = await context.params;
+  const loadResource = resources.get(resource);
+  if (!loadResource) {
+    return NextResponse.json({ error: "Custom Widget authoring resource not found." }, { status: 404 });
+  }
+  return NextResponse.json(loadResource());
+};
+
+export const GET = adminRoute(getAuthoringResource);
diff --git a/apps/nextjs/src/app/api/custom-widgets/admin.spec.ts b/apps/nextjs/src/app/api/custom-widgets/admin.spec.ts
new file mode 100644
index 000000000..d19b27aca
--- /dev/null
+++ b/apps/nextjs/src/app/api/custom-widgets/admin.spec.ts
@@ -0,0 +1,37 @@
+// @vitest-environment node
+
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  auth: vi.fn(),
+}));
+
+vi.mock("@homarr/auth/next", () => ({ auth: mocks.auth }));
+
+import { adminRoute } from "./admin";
+
+beforeEach(() => {
+  mocks.auth.mockResolvedValue({ user: { permissions: ["admin"] } });
+});
+
+describe("Custom Widget HTTP resource access", () => {
+  test("allows authenticated administrators", async () => {
+    const handler = vi.fn(async () => Response.json({ ok: true }));
+    const response = await adminRoute(handler)();
+
+    expect(response.status).toBe(200);
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  test.each([
+    ["anonymous users", null],
+    ["authenticated non-admins", { user: { permissions: ["board-modify-all"] } }],
+  ])("denies %s", async (_label, session) => {
+    mocks.auth.mockResolvedValue(session);
+    const handler = vi.fn(async () => Response.json({ ok: true }));
+    const response = await adminRoute(handler)();
+
+    expect(response.status).toBe(403);
+    expect(handler).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/nextjs/src/app/api/custom-widgets/admin.ts b/apps/nextjs/src/app/api/custom-widgets/admin.ts
new file mode 100644
index 000000000..054b0fcf1
--- /dev/null
+++ b/apps/nextjs/src/app/api/custom-widgets/admin.ts
@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+
+import { auth } from "@homarr/auth/next";
+
+type RouteHandler<Arguments extends unknown[]> = (...args: Arguments) => Response | Promise<Response>;
+
+export const adminRoute =
+  <Arguments extends unknown[]>(handler: RouteHandler<Arguments>) =>
+  async (...args: Arguments): Promise<Response> => {
+    const session = await auth();
+    if (!session?.user.permissions.includes("admin")) {
+      return NextResponse.json({ error: "Administrator access is required." }, { status: 403 });
+    }
+    return handler(...args);
+  };
diff --git a/apps/nextjs/src/app/api/custom-widgets/configuration-request/[token]/route.ts b/apps/nextjs/src/app/api/custom-widgets/configuration-request/[token]/route.ts
new file mode 100644
index 000000000..2e60d4b33
--- /dev/null
+++ b/apps/nextjs/src/app/api/custom-widgets/configuration-request/[token]/route.ts
@@ -0,0 +1,130 @@
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+import {
+  claimCustomWidgetConfigurationRequest,
+  completeCustomWidgetConfigurationRequest,
+  configureCustomWidgetSourceFromRequest,
+  configurePreviewSessionSource,
+  getCustomWidgetConfigurationRequest,
+  releaseCustomWidgetConfigurationRequest,
+} from "@homarr/api/custom-widget-configuration";
+import { customWidgetSourceSchema } from "@homarr/custom-widgets/core";
+import { invalidateCustomWidgetResponseCache } from "@homarr/custom-widgets/server";
+import { db } from "@homarr/db";
+
+import { adminRoute } from "../../admin";
+import { readConfigurationRequestBody } from "../body";
+
+interface RouteContext {
+  params: Promise<{ token: string }>;
+}
+
+const getConfigurationRequest = async (_request: NextRequest, context: RouteContext): Promise<Response> => {
+  const { token } = await context.params;
+  const request = await getCustomWidgetConfigurationRequest(token);
+  if (!request)
+    return NextResponse.json({ error: "This source configuration request is invalid or expired." }, { status: 404 });
+  return NextResponse.json(
+    {
+      widgetName: request.widgetName,
+      sourceName: request.sourceName,
+      kinds: request.kinds,
+      source: request.source,
+      expiresAt: request.expiresAt,
+      status: request.status,
+    },
+    { headers: { "Cache-Control": "no-store" } },
+  );
+};
+
+const completeConfigurationRequest = async (request: NextRequest, context: RouteContext): Promise<Response> => {
+  const { token } = await context.params;
+  const pending = await getCustomWidgetConfigurationRequest(token);
+  if (!pending || pending.status !== "pending") {
+    return NextResponse.json({ error: "This credential request is invalid, completed, or expired." }, { status: 404 });
+  }
+  const parsedBody = await readConfigurationRequestBody(request);
+  if (parsedBody.status === "too-large") {
+    return NextResponse.json({ error: "The configuration payload is too large." }, { status: 413 });
+  }
+  if (parsedBody.status !== "ok") {
+    return NextResponse.json({ error: "Enter a valid source configuration." }, { status: 400 });
+  }
+  const body = parsedBody.data;
+  const sourceResult = customWidgetSourceSchema.safeParse({
+    ...pending.source,
+    baseUrl: body.baseUrl,
+    networkScope: body.networkScope,
+  });
+  if (!sourceResult.success) {
+    return NextResponse.json(
+      { error: sourceResult.error.issues[0]?.message ?? "Enter a valid server URL." },
+      { status: 400 },
+    );
+  }
+  const secrets = pending.kinds.flatMap((kind) => {
+    const value = body.secrets[kind];
+    return typeof value === "string" && value.length > 0 && value.length <= 8192
+      ? [{ sourceId: pending.sourceId, kind, value }]
+      : [];
+  });
+  if (secrets.length !== pending.kinds.length) {
+    return NextResponse.json({ error: "Enter every requested credential field." }, { status: 400 });
+  }
+
+  const claimed = await claimCustomWidgetConfigurationRequest(token);
+  if (!claimed) {
+    return NextResponse.json(
+      { error: "This source configuration request is already being completed." },
+      { status: 409 },
+    );
+  }
+
+  try {
+    if (claimed.target.type === "preview") {
+      await configurePreviewSessionSource(
+        claimed.target.id,
+        claimed.userId,
+        claimed.sourceId,
+        sourceResult.data,
+        secrets,
+      );
+      invalidateCustomWidgetResponseCache([`custom-jsx:preview:${claimed.target.id}:`]);
+    } else {
+      const result = await configureCustomWidgetSourceFromRequest(db, {
+        definitionId: claimed.target.id,
+        sourceId: claimed.sourceId,
+        baseUrl: sourceResult.data.baseUrl,
+        networkScope: sourceResult.data.networkScope,
+        secrets,
+        expectedSource: claimed.source,
+      });
+      if (result.status === "definition-not-found") {
+        return NextResponse.json({ error: "The custom widget no longer exists." }, { status: 404 });
+      }
+      if (result.status === "source-not-found") {
+        return NextResponse.json(
+          { error: "This API source changed after the setup link was created. Request a new setup link." },
+          { status: 409 },
+        );
+      }
+      if (result.status === "binding-changed") {
+        return NextResponse.json(
+          {
+            error: "This API source authentication changed after the setup link was created. Request a new setup link.",
+          },
+          { status: 409 },
+        );
+      }
+    }
+
+    await completeCustomWidgetConfigurationRequest(token);
+    return NextResponse.json({ status: "completed" }, { headers: { "Cache-Control": "no-store" } });
+  } finally {
+    await releaseCustomWidgetConfigurationRequest(token);
+  }
+};
+
+export const GET = adminRoute(getConfigurationRequest);
+export const POST = adminRoute(completeConfigurationRequest);
diff --git a/apps/nextjs/src/app/api/custom-widgets/configuration-request/body.spec.ts b/apps/nextjs/src/app/api/custom-widgets/configuration-request/body.spec.ts
new file mode 100644
index 000000000..a178774ba
--- /dev/null
+++ b/apps/nextjs/src/app/api/custom-widgets/configuration-request/body.spec.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+
+import { MAX_CONFIGURATION_REQUEST_BODY_BYTES, readConfigurationRequestBody } from "./body";
+
+describe("custom widget configuration request body", () => {
+  it("rejects a streaming payload once it exceeds the byte budget", async () => {
+    const request = new Request("http://localhost/configure", {
+      method: "POST",
+      body: JSON.stringify({
+        baseUrl: "https://example.com",
+        networkScope: "public",
+        secrets: { apiKey: "x".repeat(MAX_CONFIGURATION_REQUEST_BODY_BYTES) },
+      }),
+    });
+
+    await expect(readConfigurationRequestBody(request)).resolves.toEqual({ status: "too-large" });
+  });
+
+  it("strictly parses a bounded configuration object", async () => {
+    const body = { baseUrl: "https://example.com", networkScope: "public", secrets: { apiKey: "secret" } };
+    await expect(
+      readConfigurationRequestBody(
+        new Request("http://localhost/configure", { method: "POST", body: JSON.stringify(body) }),
+      ),
+    ).resolves.toEqual({ status: "ok", data: body });
+
+    await expect(
+      readConfigurationRequestBody(
+        new Request("http://localhost/configure", {
+          method: "POST",
+          body: JSON.stringify({ ...body, unexpected: true }),
+        }),
+      ),
+    ).resolves.toEqual({ status: "invalid" });
+  });
+});
diff --git a/apps/nextjs/src/app/api/custom-widgets/configuration-request/body.ts b/apps/nextjs/src/app/api/custom-widgets/configuration-request/body.ts
new file mode 100644
index 000000000..dd061d1ec
--- /dev/null
+++ b/apps/nextjs/src/app/api/custom-widgets/configuration-request/body.ts
@@ -0,0 +1,52 @@
+import { z } from "zod/v4";
+
+export const MAX_CONFIGURATION_REQUEST_BODY_BYTES = 24 * 1024;
+const configurationRequestBodySchema = z.strictObject({
+  baseUrl: z.string(),
+  networkScope: z.enum(["public", "private", "loopback"]),
+  secrets: z.record(z.string(), z.string()),
+});
+
+export async function readConfigurationRequestBody(
+  request: Request,
+): Promise<
+  { status: "ok"; data: z.infer<typeof configurationRequestBodySchema> } | { status: "invalid" | "too-large" }
+> {
+  const contentLength = request.headers.get("content-length");
+  if (contentLength && Number(contentLength) > MAX_CONFIGURATION_REQUEST_BODY_BYTES) {
+    return { status: "too-large" };
+  }
+  if (!request.body) return { status: "invalid" };
+
+  const reader = request.body.getReader();
+  const chunks: Uint8Array[] = [];
+  let byteLength = 0;
+  try {
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      byteLength += value.byteLength;
+      if (byteLength > MAX_CONFIGURATION_REQUEST_BODY_BYTES) {
+        await reader.cancel();
+        return { status: "too-large" };
+      }
+      chunks.push(value);
+    }
+  } catch {
+    return { status: "invalid" };
+  }
+
+  const bytes = new Uint8Array(byteLength);
+  let offset = 0;
+  for (const chunk of chunks) {
+    bytes.set(chunk, offset);
+    offset += chunk.byteLength;
+  }
+  try {
+    const candidate = JSON.parse(new TextDecoder().decode(bytes)) as unknown;
+    const result = configurationRequestBodySchema.safeParse(candidate);
+    return result.success ? { status: "ok", data: result.data } : { status: "invalid" };
+  } catch {
+    return { status: "invalid" };
+  }
+}
diff --git a/apps/nextjs/src/app/api/mcp/[transport]/route.spec.ts b/apps/nextjs/src/app/api/mcp/[transport]/route.spec.ts
new file mode 100644
index 000000000..1fdb4e536
--- /dev/null
+++ b/apps/nextjs/src/app/api/mcp/[transport]/route.spec.ts
@@ -0,0 +1,275 @@
+// @vitest-environment node
+
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  authenticate: vi.fn(),
+  ipAddress: vi.fn(() => "127.0.0.1"),
+  toolProcedure: vi.fn(),
+  loggerWarn: vi.fn(),
+  buildPrompt: vi.fn((request?: string, documentationUrl?: string) =>
+    [`Request: ${request ?? ""}`, `Documentation: ${documentationUrl ?? ""}`].join("\n"),
+  ),
+  getComponent: vi.fn((name: string) => (name === "Text Input" ? { name, safety: "allowed" } : null)),
+}));
+
+vi.mock("next/server", () => ({ userAgent: () => ({ ua: "MCP route test" }) }));
+vi.mock("@homarr/api/mcp", () => ({
+  createTRPCContext: vi.fn(() => ({})),
+  mcpRouter: { createCaller: vi.fn(() => ({ board: { getAllBoards: mocks.toolProcedure } })) },
+}));
+vi.mock("@homarr/auth/api-key", () => ({
+  API_KEY_HEADER_NAME: "ApiKey",
+  getSessionFromApiKeyAsync: mocks.authenticate,
+}));
+vi.mock("@homarr/common", () => ({ extractBaseUrlFromHeaders: () => "http://localhost" }));
+vi.mock("@homarr/common/server", () => ({ ipAddressFromHeaders: mocks.ipAddress }));
+vi.mock("@homarr/core/infrastructure/logs", () => ({
+  createLogger: () => ({ info: vi.fn(), warn: mocks.loggerWarn, error: vi.fn() }),
+}));
+vi.mock("@homarr/custom-widgets/authoring-prompt", () => ({ buildCustomWidgetMcpPrompt: mocks.buildPrompt }));
+vi.mock("@homarr/custom-widgets/authoring-resources", () => ({
+  getCustomWidgetComponent: mocks.getComponent,
+  getCustomWidgetComponentCatalog: () => ({ components: [{ name: "Text Input" }] }),
+  getCustomWidgetSkillContent: () => "# Custom Widget Skill",
+}));
+vi.mock("@homarr/custom-widgets/core", () => ({
+  customJsxExamples: [{ id: "status-card", title: "Status card", template: "<Text>Status</Text>" }],
+  getCustomWidgetJsonSchema: () => ({ type: "object", title: "Custom Widget" }),
+}));
+vi.mock("@homarr/db", () => ({ db: {} }));
+vi.mock("~/versions/package-reader", () => ({ getPackageVersion: () => "test-version" }));
+vi.mock("../_extract-tools", () => ({
+  extractMcpTools: () => [
+    {
+      name: "board_getAllBoards",
+      description: "List boards",
+      pathInRouter: ["board", "getAllBoards"],
+      inputSchema: { type: "object", properties: {} },
+    },
+    {
+      name: "customWidget_list",
+      description: "List Custom Widgets",
+      pathInRouter: ["customWidget", "list"],
+      inputSchema: { type: "object", properties: {} },
+    },
+    {
+      name: "customWidget_workshopSearch",
+      description: "Search Workshop",
+      pathInRouter: ["customWidget", "workshopSearch"],
+      inputSchema: { type: "object", properties: {} },
+    },
+  ],
+}));
+
+import { POST } from "./route";
+
+interface JsonRpcResponse {
+  jsonrpc: "2.0";
+  id: number | null;
+  result?: Record<string, unknown>;
+  error?: { code: number; message: string };
+}
+
+beforeEach(() => {
+  mocks.authenticate.mockResolvedValue({ user: { id: "user-1", permissions: ["admin"] } });
+  mocks.buildPrompt.mockClear();
+  mocks.getComponent.mockClear();
+  mocks.ipAddress.mockClear();
+  mocks.ipAddress.mockReturnValue("127.0.0.1");
+  mocks.toolProcedure.mockReset();
+  mocks.toolProcedure.mockResolvedValue([]);
+  mocks.loggerWarn.mockClear();
+});
+
+async function callMcp(method: string, params: Record<string, unknown> = {}, id = 1) {
+  const request = new Request("http://localhost/api/mcp/mcp", {
+    method: "POST",
+    headers: {
+      Accept: "application/json, text/event-stream",
+      ApiKey: "key.secret",
+      "Content-Type": "application/json",
+      "X-Forwarded-For": "198.51.100.10",
+      "X-Real-IP": "127.0.0.1",
+    },
+    body: JSON.stringify({ jsonrpc: "2.0", id, method, params }),
+  });
+  const response = await POST(request as never);
+  const text = await response.text();
+  const data = response.headers.get("content-type")?.includes("text/event-stream")
+    ? text
+        .split("\n")
+        .find((line) => line.startsWith("data: "))
+        ?.slice("data: ".length)
+    : text;
+  if (!data) throw new Error(`MCP response did not contain JSON-RPC data: ${text}`);
+  return { response, body: JSON.parse(data) as JsonRpcResponse };
+}
+
+describe("authenticated MCP prompt protocol", () => {
+  test("initializes and advertises prompt and resource capabilities", async () => {
+    const { response, body } = await callMcp("initialize", {
+      protocolVersion: "2025-03-26",
+      capabilities: {},
+      clientInfo: { name: "route-test", version: "1.0.0" },
+    });
+
+    expect(response.status).toBe(200);
+    expect(body.error).toBeUndefined();
+    expect(body.result).toMatchObject({
+      protocolVersion: expect.any(String),
+      capabilities: { prompts: {}, resources: {} },
+      serverInfo: { name: "homarr", version: "test-version" },
+    });
+    expect(mocks.authenticate).toHaveBeenCalledWith({}, "key.secret", "127.0.0.1", "MCP route test");
+    expect(mocks.ipAddress).toHaveBeenCalledWith(expect.any(Headers));
+  });
+
+  test("lists and interpolates the custom-widget authoring prompt", async () => {
+    const listed = await callMcp("prompts/list");
+    expect(listed.body.result).toEqual({
+      prompts: [
+        {
+          name: "homarr-custom-widget-author",
+          description: "Author and iterate on one Homarr Custom JSX v2 widget.",
+          arguments: [
+            { name: "request", description: "The widget the user wants.", required: false },
+            { name: "documentationUrl", description: "External API documentation URL.", required: false },
+          ],
+        },
+      ],
+    });
+
+    const rendered = await callMcp("prompts/get", {
+      name: "homarr-custom-widget-author",
+      arguments: { request: "Build a status card", documentationUrl: "https://docs.example.test/api" },
+    });
+    expect(rendered.body.result).toMatchObject({
+      description: "Current Homarr Custom Widget authoring workflow.",
+      messages: [
+        {
+          role: "user",
+          content: {
+            type: "text",
+            text: "Request: Build a status card\nDocumentation: https://docs.example.test/api",
+          },
+        },
+      ],
+    });
+    expect(mocks.buildPrompt).toHaveBeenCalledWith("Build a status card", "https://docs.example.test/api");
+  });
+});
+
+describe("authenticated MCP resource protocol", () => {
+  test("lists concrete resources and URI templates with reviewed MIME types", async () => {
+    const listed = await callMcp("resources/list");
+    expect(listed.body.result).toEqual({
+      resources: [
+        { uri: "homarr://custom-widgets/schema", name: "Custom Widget schema", mimeType: "application/schema+json" },
+        { uri: "homarr://custom-widgets/components", name: "Custom Widget components", mimeType: "application/json" },
+        { uri: "homarr://custom-widgets/skill", name: "Custom Widget skill", mimeType: "text/markdown" },
+        {
+          uri: "homarr://custom-widgets/examples/status-card",
+          name: "Custom Widget example: Status card",
+          mimeType: "application/json",
+        },
+      ],
+    });
+
+    const templates = await callMcp("resources/templates/list");
+    expect(templates.body.result).toEqual({
+      resourceTemplates: [
+        expect.objectContaining({
+          uriTemplate: "homarr://custom-widgets/components/{name}",
+          mimeType: "application/json",
+        }),
+        expect.objectContaining({
+          uriTemplate: "homarr://custom-widgets/examples/{name}",
+          mimeType: "application/json",
+        }),
+      ],
+    });
+  });
+
+  test.each([
+    ["homarr://custom-widgets/schema", "application/schema+json", { type: "object", title: "Custom Widget" }],
+    ["homarr://custom-widgets/components", "application/json", { components: [{ name: "Text Input" }] }],
+    ["homarr://custom-widgets/skill", "text/markdown", "# Custom Widget Skill"],
+    [
+      "homarr://custom-widgets/examples/status-card",
+      "application/json",
+      { id: "status-card", title: "Status card", template: "<Text>Status</Text>" },
+    ],
+    ["homarr://custom-widgets/components/Text%20Input", "application/json", { name: "Text Input", safety: "allowed" }],
+  ])("dispatches %s with its MIME type", async (uri, mimeType, expected) => {
+    const { body } = await callMcp("resources/read", { uri });
+    const contents = body.result?.contents as Array<{ uri: string; mimeType: string; text: string }> | undefined;
+    const content = contents?.[0];
+    expect(content).toMatchObject({ uri, mimeType });
+    expect(mimeType === "text/markdown" ? content?.text : JSON.parse(content?.text ?? "null")).toEqual(expected);
+  });
+});
+
+describe("non-admin MCP discovery", () => {
+  test("does not list or expose Custom Widget tools, prompts or resources", async () => {
+    mocks.authenticate.mockResolvedValue({ user: { id: "user-1", permissions: ["board-view-all"] } });
+
+    const tools = await callMcp("tools/list");
+    expect(((tools.body.result?.tools ?? []) as Array<{ name: string }>).map(({ name }) => name)).toEqual([
+      "board_getAllBoards",
+    ]);
+
+    const prompts = await callMcp("prompts/list");
+    expect(prompts.body.result).toEqual({ prompts: [] });
+
+    const resources = await callMcp("resources/list");
+    expect(resources.body.result).toEqual({ resources: [] });
+
+    const templates = await callMcp("resources/templates/list");
+    expect(templates.body.result).toEqual({ resourceTemplates: [] });
+
+    const prompt = await callMcp("prompts/get", { name: "homarr-custom-widget-author" });
+    expect(prompt.body.result).toBeUndefined();
+    expect(prompt.body.error).toBeDefined();
+
+    const resource = await callMcp("resources/read", { uri: "homarr://custom-widgets/schema" });
+    expect(resource.body.result).toBeUndefined();
+    expect(resource.body.error).toBeDefined();
+  });
+});
+
+describe("MCP protocol errors", () => {
+  test.each([
+    ["prompts/get", { name: "unknown" }],
+    ["resources/read", { uri: "homarr://custom-widgets/unknown" }],
+  ])("returns JSON-RPC errors for unknown %s targets", async (method, params) => {
+    const { body } = await callMcp(method, params);
+    expect(body.result).toBeUndefined();
+    expect(body.error).toEqual(expect.objectContaining({ code: expect.any(Number), message: expect.any(String) }));
+  });
+
+  test("returns a protocol error for a malformed resource request", async () => {
+    const { body } = await callMcp("resources/read", {});
+    expect(body.result).toBeUndefined();
+    expect(body.error).toEqual(expect.objectContaining({ code: -32603, message: expect.any(String) }));
+  });
+
+  test("does not log sensitive tool error messages", async () => {
+    const failure = Object.assign(new Error("request to https://user:secret@example.test/private failed"), {
+      code: "BAD_GATEWAY",
+    });
+    mocks.toolProcedure.mockRejectedValue(failure);
+
+    const { body } = await callMcp("tools/call", { name: "board_getAllBoards", arguments: {} });
+
+    expect(JSON.stringify(body)).not.toContain("user:secret");
+    expect(mocks.loggerWarn).toHaveBeenCalledWith("MCP tool execution failed", {
+      tool: "board_getAllBoards",
+      errorName: "Error",
+      errorCode: "BAD_GATEWAY",
+    });
+    const metadata = mocks.loggerWarn.mock.calls.at(-1)?.[1] as Record<string, unknown>;
+    expect(metadata).not.toHaveProperty("error");
+    expect(metadata).not.toHaveProperty("message");
+  });
+});
diff --git a/apps/nextjs/src/app/api/mcp/[transport]/route.ts b/apps/nextjs/src/app/api/mcp/[transport]/route.ts
index 364fe90c5..048bdcbef 100644
--- a/apps/nextjs/src/app/api/mcp/[transport]/route.ts
+++ b/apps/nextjs/src/app/api/mcp/[transport]/route.ts
@@ -3,13 +3,28 @@ import type { NextRequest } from "next/server";
 import { userAgent } from "next/server";
 import { createMcpHandler } from "mcp-handler";
 import type { McpTool } from "trpc-to-mcp";
-import { CallToolRequestSchema, ListToolsRequestSchema } from "@modelcontextprotocol/sdk/types.js";
+import {
+  CallToolRequestSchema,
+  GetPromptRequestSchema,
+  ListPromptsRequestSchema,
+  ListResourcesRequestSchema,
+  ListResourceTemplatesRequestSchema,
+  ListToolsRequestSchema,
+  ReadResourceRequestSchema,
+} from "@modelcontextprotocol/sdk/types.js";
 
 import { createTRPCContext, mcpRouter } from "@homarr/api/mcp";
 import { API_KEY_HEADER_NAME, getSessionFromApiKeyAsync } from "@homarr/auth/api-key";
 import { extractBaseUrlFromHeaders } from "@homarr/common";
 import { ipAddressFromHeaders } from "@homarr/common/server";
 import { createLogger } from "@homarr/core/infrastructure/logs";
+import { buildCustomWidgetMcpPrompt } from "@homarr/custom-widgets/authoring-prompt";
+import {
+  getCustomWidgetComponent,
+  getCustomWidgetComponentCatalog,
+  getCustomWidgetSkillContent,
+} from "@homarr/custom-widgets/authoring-resources";
+import { customJsxExamples, getCustomWidgetJsonSchema } from "@homarr/custom-widgets/core";
 import { db } from "@homarr/db";
 
 import { getPackageVersion } from "~/versions/package-reader";
@@ -70,7 +85,12 @@ function clearAuthFailures(ip: string | null) {
   authFailures.delete(ip ?? "unknown");
 }
 
-const callerStorage = new AsyncLocalStorage<ReturnType<typeof mcpRouter.createCaller>>();
+interface McpCallerContext {
+  caller: ReturnType<typeof mcpRouter.createCaller>;
+  isAdmin: boolean;
+}
+
+const callerStorage = new AsyncLocalStorage<McpCallerContext>();
 
 const emptyObjectSchema = {
   type: "object" as const,
@@ -98,6 +118,20 @@ function getTools() {
   return toolsCache;
 }
 
+function getVisibleTools() {
+  const tools = getTools();
+  if (!isCustomWidgetMcpEnabled()) {
+    return tools.filter((tool) => !tool.name.startsWith("customWidget_"));
+  }
+  return tools;
+}
+
+function requireCustomWidgetMcpAdmin() {
+  if (!isCustomWidgetMcpEnabled()) throw new Error("Resource not found");
+}
+
+const isCustomWidgetMcpEnabled = () => Boolean(callerStorage.getStore()?.isAdmin);
+
 const SAFE_ERROR_MESSAGES: Record<string, string> = {
   UNAUTHORIZED: "You do not have permission to perform this action",
   FORBIDDEN: "Access denied",
@@ -168,13 +202,116 @@ If \`hasUseAccess\` is false, the API key owner lacks permission for that integr
 
 const mcpHandler = createMcpHandler(
   (server) => {
+    server.server.setRequestHandler(ListPromptsRequestSchema, () => ({
+      prompts: isCustomWidgetMcpEnabled()
+        ? [
+            {
+              name: "homarr-custom-widget-author",
+              description: "Author and iterate on one Homarr Custom JSX v2 widget.",
+              arguments: [
+                { name: "request", description: "The widget the user wants.", required: false },
+                { name: "documentationUrl", description: "External API documentation URL.", required: false },
+              ],
+            },
+          ]
+        : [],
+    }));
+
+    server.server.setRequestHandler(GetPromptRequestSchema, (request) => {
+      requireCustomWidgetMcpAdmin();
+      if (request.params.name !== "homarr-custom-widget-author") throw new Error("Prompt not found");
+      return {
+        description: "Current Homarr Custom Widget authoring workflow.",
+        messages: [
+          {
+            role: "user" as const,
+            content: {
+              type: "text" as const,
+              text: buildCustomWidgetMcpPrompt(
+                request.params.arguments?.request,
+                request.params.arguments?.documentationUrl,
+              ),
+            },
+          },
+        ],
+      };
+    });
+
+    server.server.setRequestHandler(ListResourcesRequestSchema, () => ({
+      resources: isCustomWidgetMcpEnabled()
+        ? [
+            {
+              uri: "homarr://custom-widgets/schema",
+              name: "Custom Widget schema",
+              mimeType: "application/schema+json",
+            },
+            {
+              uri: "homarr://custom-widgets/components",
+              name: "Custom Widget components",
+              mimeType: "application/json",
+            },
+            { uri: "homarr://custom-widgets/skill", name: "Custom Widget skill", mimeType: "text/markdown" },
+            ...customJsxExamples.map((example) => ({
+              uri: `homarr://custom-widgets/examples/${example.id}`,
+              name: `Custom Widget example: ${example.title}`,
+              mimeType: "application/json",
+            })),
+          ]
+        : [],
+    }));
+
+    server.server.setRequestHandler(ListResourceTemplatesRequestSchema, () => ({
+      resourceTemplates: isCustomWidgetMcpEnabled()
+        ? [
+            {
+              uriTemplate: "homarr://custom-widgets/components/{name}",
+              name: "Custom Widget component",
+              description: "Metadata for one installed Custom Widget component.",
+              mimeType: "application/json",
+            },
+            {
+              uriTemplate: "homarr://custom-widgets/examples/{name}",
+              name: "Custom Widget example",
+              description: "One canonical Custom Widget example.",
+              mimeType: "application/json",
+            },
+          ]
+        : [],
+    }));
+
+    server.server.setRequestHandler(ReadResourceRequestSchema, (request) => {
+      requireCustomWidgetMcpAdmin();
+      const { uri } = request.params;
+      let text: string;
+      let mimeType = "application/json";
+      if (uri === "homarr://custom-widgets/schema") {
+        text = JSON.stringify(getCustomWidgetJsonSchema());
+        mimeType = "application/schema+json";
+      } else if (uri === "homarr://custom-widgets/components") text = JSON.stringify(getCustomWidgetComponentCatalog());
+      else if (uri === "homarr://custom-widgets/skill") {
+        text = getCustomWidgetSkillContent();
+        mimeType = "text/markdown";
+      } else if (uri.startsWith("homarr://custom-widgets/components/")) {
+        const name = decodeURIComponent(uri.slice("homarr://custom-widgets/components/".length));
+        const component = getCustomWidgetComponent(name);
+        if (!component) throw new Error("Component resource not found");
+        text = JSON.stringify(component);
+      } else if (uri.startsWith("homarr://custom-widgets/examples/")) {
+        const name = decodeURIComponent(uri.slice("homarr://custom-widgets/examples/".length));
+        const example = customJsxExamples.find((candidate) => candidate.id === name);
+        if (!example) throw new Error("Example resource not found");
+        text = JSON.stringify(example);
+      } else throw new Error("Resource not found");
+      return { contents: [{ uri, mimeType, text }] };
+    });
+
     server.server.setRequestHandler(ListToolsRequestSchema, () => ({
-      tools: getTools(),
+      tools: getVisibleTools(),
     }));
 
     server.server.setRequestHandler(CallToolRequestSchema, async (request) => {
       const { name, arguments: args } = request.params;
-      const tools = getTools();
+      const tools = getVisibleTools();
       const tool = tools.find((t) => t.name === name);
 
       if (!tool) {
@@ -184,8 +321,8 @@ const mcpHandler = createMcpHandler(
         };
       }
 
-      const caller = callerStorage.getStore();
-      if (!caller) {
+      const callerContext = callerStorage.getStore();
+      if (!callerContext) {
         return {
           content: [{ type: "text" as const, text: "Authentication context not available" }],
           isError: true,
@@ -193,7 +330,7 @@ const mcpHandler = createMcpHandler(
       }
 
       try {
-        const procedure = tool.pathInRouter.reduce<any>((acc, part) => acc?.[part], caller);
+        const procedure = tool.pathInRouter.reduce<any>((acc, part) => acc?.[part], callerContext.caller);
         if (typeof procedure !== "function") {
           return {
             content: [{ type: "text" as const, text: `Tool "${name}" is not callable` }],
@@ -209,7 +346,9 @@ const mcpHandler = createMcpHandler(
         const message = sanitizeErrorMessage(error);
         logger.warn("MCP tool execution failed", {
           tool: name,
-          error: error instanceof Error ? error.message : String(error),
+          errorName: error instanceof Error ? error.name : "UnknownError",
+          errorCode:
+            error instanceof Error && "code" in error && typeof error.code === "string" ? error.code : undefined,
         });
         return {
           content: [{ type: "text" as const, text: JSON.stringify({ error: message }) }],
@@ -219,7 +358,7 @@ const mcpHandler = createMcpHandler(
     });
   },
   {
-    capabilities: { tools: {} },
+    capabilities: { tools: {}, prompts: {}, resources: {} },
     instructions: SERVER_INSTRUCTIONS,
     serverInfo: {
       name: "homarr",
@@ -296,7 +435,9 @@ const handler = async (req: NextRequest) => {
   const ctx = createTRPCContext({ session, headers: req.headers });
   const caller = mcpRouter.createCaller(ctx);
 
-  return callerStorage.run(caller, () => mcpHandler(req as unknown as Request));
+  return callerStorage.run({ caller, isAdmin: session.user.permissions.includes("admin") }, () =>
+    mcpHandler(req as unknown as Request),
+  );
 };
 
 export { handler as GET, handler as POST, handler as DELETE };
diff --git a/apps/nextjs/src/components/assistant/assistant-widget-tool.tsx b/apps/nextjs/src/components/assistant/assistant-widget-tool.tsx
index 02bd5aa64..1ad4552d2 100644
--- a/apps/nextjs/src/components/assistant/assistant-widget-tool.tsx
+++ b/apps/nextjs/src/components/assistant/assistant-widget-tool.tsx
@@ -213,6 +213,7 @@ export const AssistantConfigureWidgetTool = ({
           openModal(
             {
               kind: args.kind,
+              definition: widgetImports[args.kind].definition,
               value: configuration.value,
               integrationData: configuration.integrationData,
               integrationSupport: configuration.integrationSupport,
diff --git a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
new file mode 100644
index 000000000..1293638ba
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
@@ -0,0 +1,126 @@
+.backdrop {
+  pointer-events: none;
+  animation: focus-backdrop-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.manualBackdrop {
+  pointer-events: auto;
+}
+
+.surface {
+  position: fixed;
+  z-index: 1;
+  pointer-events: auto;
+  overflow: hidden;
+  background: var(--mantine-color-body);
+  box-shadow: var(--mantine-shadow-md);
+  overscroll-behavior: contain;
+  animation: focus-surface-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: top left;
+}
+
+.manualSurface {
+  position: fixed;
+  max-width: none;
+  max-height: none;
+  overflow: visible;
+  background: transparent;
+  box-shadow: none;
+  overscroll-behavior: contain;
+  animation: focus-surface-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: top left;
+}
+
+.manualSurface > div {
+  width: 100%;
+  height: 100%;
+  max-height: none !important;
+  overflow: visible;
+}
+
+.backdropClosing {
+  animation: focus-backdrop-out 180ms ease-in forwards;
+}
+
+.surfaceClosing {
+  animation: focus-surface-out 180ms ease-in forwards;
+}
+
+.sourcePlaceholder {
+  pointer-events: none;
+}
+
+.surfaceHost {
+  width: 100%;
+  height: 100%;
+}
+
+.surfacePortalTarget,
+.manualSurfaceMount {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.manualSurfaceMount {
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.surfaceHostAdvanced {
+  position: fixed;
+  inset: 0;
+  z-index: var(--homarr-z-index-widget-focus);
+  width: auto;
+  height: auto;
+  pointer-events: none;
+}
+
+.closeButton {
+  position: absolute;
+  z-index: 2;
+  pointer-events: auto;
+}
+
+@keyframes focus-backdrop-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes focus-surface-in {
+  from {
+    transform: translate(var(--focus-translate-x), var(--focus-translate-y))
+      scale(var(--focus-scale-x), var(--focus-scale-y));
+    opacity: 0.72;
+  }
+}
+
+@keyframes focus-backdrop-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes focus-surface-out {
+  to {
+    transform: translate(var(--focus-translate-x), var(--focus-translate-y))
+      scale(var(--focus-scale-x), var(--focus-scale-y));
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .backdrop,
+  .surface,
+  .manualSurface {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .backdrop {
+    background: Canvas;
+    opacity: 0.4;
+  }
+}
diff --git a/apps/nextjs/src/components/board/advanced-focus/context.tsx b/apps/nextjs/src/components/board/advanced-focus/context.tsx
new file mode 100644
index 000000000..6043a1a95
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/context.tsx
@@ -0,0 +1,275 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Overlay, Portal } from "@mantine/core";
+import { useIsomorphicEffect } from "@mantine/hooks";
+
+import { useEditMode } from "@homarr/boards/edit-mode";
+
+import classes from "./advanced-focus.module.css";
+import { isEscapeOwnedByNestedOverlay } from "./escape";
+import type { FocusRect } from "./geometry";
+
+interface ActiveFocus {
+  itemId: string;
+  source: HTMLElement;
+  sourceRect: FocusRect;
+  activation: "preview" | "manual";
+  autofocusClose: boolean;
+  restorePreviewFocus: boolean;
+  phase: "visible" | "closing";
+}
+
+interface OpenAdvancedFocusOptions {
+  activation?: ActiveFocus["activation"];
+  autofocusClose?: boolean;
+}
+
+interface AdvancedFocusContextValue {
+  active: ActiveFocus | null;
+  open: (itemId: string, source: HTMLElement, options?: OpenAdvancedFocusOptions) => void;
+  close: (restoreFocus?: boolean) => void;
+  dismiss: (itemId: string) => void;
+  hover: (itemId: string, source: HTMLElement) => void;
+  leave: (itemId: string) => void;
+}
+
+const AdvancedFocusContext = createContext<AdvancedFocusContextValue | null>(null);
+const HOVER_DELAY_MS = 150;
+const CLOSE_DURATION_MS = 180;
+const interactiveSelector =
+  "a[href], button, input, textarea, select, [contenteditable='true'], [role='button'], [role='link'], [role='menuitem'], [role='option']";
+
+const isEditableTarget = (target: EventTarget | null) =>
+  target instanceof HTMLElement &&
+  (target.matches("input, textarea, select, [contenteditable='true']") || target.isContentEditable);
+
+export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
+  const [isEditMode] = useEditMode();
+  const [active, setActive] = useState<ActiveFocus | null>(null);
+  const activeRef = useRef<ActiveFocus | null>(null);
+  const hoveredRef = useRef<{ itemId: string; source: HTMLElement } | null>(null);
+  const shiftHeldRef = useRef(false);
+  const hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const cancelHoverTimer = useCallback(() => {
+    if (hoverTimerRef.current === null) return;
+    clearTimeout(hoverTimerRef.current);
+    hoverTimerRef.current = null;
+  }, []);
+
+  const updateActive = useCallback((next: ActiveFocus | null) => {
+    activeRef.current = next;
+    setActive(next);
+  }, []);
+
+  const cancelCloseTimer = useCallback(() => {
+    if (closeTimerRef.current === null) return;
+    clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = null;
+  }, []);
+
+  const open = useCallback(
+    (itemId: string, source: HTMLElement, options: OpenAdvancedFocusOptions = {}) => {
+      if (isEditMode) return;
+      cancelHoverTimer();
+      cancelCloseTimer();
+      const rect = source.getBoundingClientRect();
+      updateActive({
+        itemId,
+        source,
+        sourceRect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height },
+        activation: options.activation ?? "manual",
+        autofocusClose: options.autofocusClose ?? false,
+        restorePreviewFocus: options.activation === "preview" && document.activeElement === source,
+        phase: "visible",
+      });
+    },
+    [cancelCloseTimer, cancelHoverTimer, isEditMode, updateActive],
+  );
+
+  const close = useCallback(
+    (restoreFocus = true) => {
+      cancelHoverTimer();
+      const current = activeRef.current;
+      if (!current || current.phase === "closing") return;
+      updateActive({ ...current, phase: "closing" });
+      const closeDuration = window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : CLOSE_DURATION_MS;
+      closeTimerRef.current = setTimeout(() => {
+        closeTimerRef.current = null;
+        updateActive(null);
+        if (restoreFocus && current.source.isConnected) requestAnimationFrame(() => current.source.focus());
+      }, closeDuration);
+    },
+    [cancelHoverTimer, updateActive],
+  );
+
+  const startHoverTimer = useCallback(() => {
+    cancelHoverTimer();
+    const hovered = hoveredRef.current;
+    if (!hovered || !shiftHeldRef.current || activeRef.current) return;
+    hoverTimerRef.current = setTimeout(
+      () => open(hovered.itemId, hovered.source, { activation: "preview" }),
+      HOVER_DELAY_MS,
+    );
+  }, [cancelHoverTimer, open]);
+
+  const hover = useCallback(
+    (itemId: string, source: HTMLElement) => {
+      hoveredRef.current = { itemId, source };
+      const current = activeRef.current;
+      if (current?.activation === "preview" && current.itemId !== itemId) {
+        cancelCloseTimer();
+        updateActive(null);
+        if (current.restorePreviewFocus && current.source.isConnected) current.source.focus({ preventScroll: true });
+      }
+      startHoverTimer();
+    },
+    [cancelCloseTimer, startHoverTimer, updateActive],
+  );
+
+  useEffect(() => {
+    const handlePointerMove = (event: PointerEvent) => {
+      const current = activeRef.current;
+      if (!shiftHeldRef.current || current?.activation !== "preview") return;
+      if (
+        event.target instanceof Element &&
+        event.target.closest(interactiveSelector)?.closest("[data-advanced-focus-surface]")
+      )
+        return;
+
+      const underlyingSource = document
+        .elementsFromPoint(event.clientX, event.clientY)
+        .map((element) =>
+          element instanceof HTMLElement
+            ? element.matches("[data-advanced-focus-source]")
+              ? element
+              : element.closest<HTMLElement>("[data-advanced-focus-source]")
+            : null,
+        )
+        .find((source) => source !== null && source !== current.source);
+      const itemId = underlyingSource?.dataset.itemId;
+      if (!underlyingSource || !itemId) return;
+
+      if (underlyingSource.hasAttribute("aria-keyshortcuts")) {
+        hover(itemId, underlyingSource);
+        return;
+      }
+
+      hoveredRef.current = null;
+      cancelHoverTimer();
+      cancelCloseTimer();
+      updateActive(null);
+    };
+
+    window.addEventListener("pointermove", handlePointerMove, { capture: true });
+    return () => window.removeEventListener("pointermove", handlePointerMove, { capture: true });
+  }, [cancelCloseTimer, cancelHoverTimer, hover, updateActive]);
+
+  const leave = useCallback(
+    (itemId: string) => {
+      if (hoveredRef.current?.itemId === itemId) hoveredRef.current = null;
+      cancelHoverTimer();
+    },
+    [cancelHoverTimer],
+  );
+
+  const dismiss = useCallback(
+    (itemId: string) => {
+      if (activeRef.current?.itemId !== itemId) return;
+      cancelHoverTimer();
+      cancelCloseTimer();
+      updateActive(null);
+    },
+    [cancelCloseTimer, cancelHoverTimer, updateActive],
+  );
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && activeRef.current) {
+        const advancedSurface = document.querySelector("[data-advanced-focus-surface]");
+        if (event.defaultPrevented || event.isComposing || isEscapeOwnedByNestedOverlay(event.target, advancedSurface))
+          return;
+        event.preventDefault();
+        close();
+        return;
+      }
+      if (isEditMode) return;
+      if (event.key !== "Shift" || event.repeat || isEditableTarget(event.target)) return;
+      if (activeRef.current?.activation === "manual") return;
+      shiftHeldRef.current = true;
+      startHoverTimer();
+    };
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key !== "Shift") return;
+      shiftHeldRef.current = false;
+      cancelHoverTimer();
+      if (activeRef.current?.activation === "preview") close(false);
+    };
+    const handleBlur = () => {
+      shiftHeldRef.current = false;
+      cancelHoverTimer();
+      if (activeRef.current?.activation === "preview") close(false);
+    };
+
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
+    window.addEventListener("keyup", handleKeyUp);
+    window.addEventListener("blur", handleBlur);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, { capture: true });
+      window.removeEventListener("keyup", handleKeyUp);
+      window.removeEventListener("blur", handleBlur);
+      cancelHoverTimer();
+      cancelCloseTimer();
+    };
+  }, [cancelCloseTimer, cancelHoverTimer, close, isEditMode, startHoverTimer]);
+
+  useEffect(() => {
+    if (isEditMode && activeRef.current) close(false);
+  }, [close, isEditMode]);
+
+  useIsomorphicEffect(() => {
+    if (active?.activation !== "manual") return;
+    const background = document.querySelectorAll<HTMLElement>("[data-advanced-focus-background]");
+    background.forEach((element) => {
+      element.inert = true;
+    });
+    return () => {
+      background.forEach((element) => {
+        element.inert = false;
+      });
+    };
+  }, [active?.activation]);
+
+  const value = useMemo(
+    () => ({ active, open, close, dismiss, hover, leave }),
+    [active, close, dismiss, hover, leave, open],
+  );
+
+  return (
+    <AdvancedFocusContext.Provider value={value}>
+      {children}
+      {active?.activation === "preview" && (
+        <Portal>
+          <Overlay
+            fixed
+            data-advanced-focus-overlay
+            backgroundOpacity={0.38}
+            blur={0}
+            zIndex="var(--homarr-z-index-widget-preview-backdrop)"
+            className={`${classes.backdrop} ${active.phase === "closing" ? classes.backdropClosing : ""}`}
+            aria-hidden
+          />
+        </Portal>
+      )}
+    </AdvancedFocusContext.Provider>
+  );
+};
+
+export const useAdvancedFocus = () => {
+  const context = useContext(AdvancedFocusContext);
+  if (!context) throw new Error("useAdvancedFocus must be used within BoardAdvancedFocusProvider");
+  return context;
+};
diff --git a/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts b/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts
new file mode 100644
index 000000000..e3c8a23ec
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts
@@ -0,0 +1,72 @@
+import { describe, expect, test } from "vitest";
+
+import { isEscapeOwnedByNestedOverlay } from "./escape";
+
+describe("isEscapeOwnedByNestedOverlay", () => {
+  test("allows Escape from the advanced surface itself", () => {
+    const surface = document.createElement("section");
+    surface.setAttribute("role", "dialog");
+    const button = document.createElement("button");
+    surface.append(button);
+
+    expect(isEscapeOwnedByNestedOverlay(button, surface)).toBe(false);
+  });
+
+  test("leaves Escape to a nested Mantine modal", () => {
+    const surface = document.createElement("section");
+    surface.setAttribute("role", "region");
+    const modal = document.createElement("section");
+    modal.setAttribute("role", "dialog");
+    const input = document.createElement("input");
+    modal.append(input);
+
+    expect(isEscapeOwnedByNestedOverlay(input, surface)).toBe(true);
+  });
+
+  test.each(["menu", "listbox"])("leaves Escape to a nested %s overlay", (role) => {
+    const surface = document.createElement("section");
+    surface.setAttribute("role", "region");
+    const overlay = document.createElement("div");
+    overlay.setAttribute("role", role);
+    const target = document.createElement("button");
+    overlay.append(target);
+
+    expect(isEscapeOwnedByNestedOverlay(target, surface)).toBe(true);
+  });
+
+  test("honors Mantine's stop-propagation marker for menus and comboboxes", () => {
+    const surface = document.createElement("section");
+    surface.setAttribute("role", "region");
+    const target = document.createElement("button");
+    target.setAttribute("data-mantine-stop-propagation", "true");
+    surface.append(target);
+
+    expect(isEscapeOwnedByNestedOverlay(target, surface)).toBe(true);
+  });
+
+  test("leaves Escape to a visible portalled menu when focus stays in the advanced surface", () => {
+    const surface = document.createElement("section");
+    surface.setAttribute("role", "dialog");
+    const target = document.createElement("button");
+    surface.append(target);
+    document.body.append(surface);
+
+    const menu = document.createElement("div");
+    menu.setAttribute("role", "menu");
+    menu.getClientRects = () => [{ width: 100, height: 100 }] as unknown as DOMRectList;
+    document.body.append(menu);
+
+    expect(isEscapeOwnedByNestedOverlay(target, surface)).toBe(true);
+
+    menu.remove();
+    surface.remove();
+  });
+
+  test("does not mistake the compact widget source for a nested overlay", () => {
+    const surface = document.createElement("section");
+    surface.setAttribute("role", "region");
+    const source = document.createElement("button");
+
+    expect(isEscapeOwnedByNestedOverlay(source, surface)).toBe(false);
+  });
+});
diff --git a/apps/nextjs/src/components/board/advanced-focus/escape.ts b/apps/nextjs/src/components/board/advanced-focus/escape.ts
new file mode 100644
index 000000000..8e58947a2
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/escape.ts
@@ -0,0 +1,19 @@
+const escapeOwnerSelector = [
+  '[data-mantine-stop-propagation="true"]',
+  '[role="dialog"]',
+  '[role="menu"]',
+  '[role="listbox"]',
+].join(", ");
+
+export const isEscapeOwnedByNestedOverlay = (target: EventTarget | null, advancedSurface: Element | null) => {
+  const escapeOwner = target instanceof Element ? target.closest(escapeOwnerSelector) : null;
+  if (escapeOwner !== null && escapeOwner !== advancedSurface) return true;
+
+  return Array.from(document.querySelectorAll(escapeOwnerSelector)).some(
+    (owner) =>
+      owner !== advancedSurface &&
+      owner.getAttribute("aria-hidden") !== "true" &&
+      owner.closest('[aria-hidden="true"]') === null &&
+      owner.getClientRects().length > 0,
+  );
+};
diff --git a/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts b/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts
new file mode 100644
index 000000000..1617a4858
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+
+import { getAdvancedFocusClosePosition, getAdvancedFocusRect } from "./geometry";
+
+describe("getAdvancedFocusRect", () => {
+  it("expands around the widget instead of centering a modal", () => {
+    const rect = getAdvancedFocusRect({ left: 450, top: 300, width: 300, height: 200 }, { width: 1200, height: 800 });
+
+    expect(rect).toEqual({ left: 200, top: 120, width: 800, height: 560 });
+    expect(rect.left + rect.width / 2).toBe(600);
+    expect(rect.top + rect.height / 2).toBe(400);
+  });
+
+  it("uses the available viewport on small screens", () => {
+    expect(getAdvancedFocusRect({ left: 0, top: 0, width: 400, height: 500 }, { width: 390, height: 700 })).toEqual({
+      left: 8,
+      top: 68,
+      width: 374,
+      height: 624,
+    });
+  });
+
+  it("keeps controls below the fixed board header on short screens", () => {
+    const rect = getAdvancedFocusRect({ left: 1200, top: 700, width: 500, height: 500 }, { width: 1366, height: 768 });
+
+    expect(rect.left).toBeGreaterThanOrEqual(16);
+    expect(rect.left + rect.width).toBeLessThanOrEqual(1350);
+    expect(rect.top).toBeGreaterThanOrEqual(76);
+    expect(rect.top + rect.height).toBeLessThanOrEqual(752);
+  });
+});
+
+describe("getAdvancedFocusClosePosition", () => {
+  it("keeps the close control outside the surface when the right side has room", () => {
+    expect(getAdvancedFocusClosePosition({ left: 16, top: 76, width: 800, height: 560 }, 1280)).toEqual({
+      left: 824,
+      top: 76,
+    });
+  });
+
+  it("uses the left side when the surface is anchored to the right edge", () => {
+    expect(getAdvancedFocusClosePosition({ left: 464, top: 76, width: 800, height: 560 }, 1280)).toEqual({
+      left: 412,
+      top: 76,
+    });
+  });
+
+  it("falls back to the inside corner on narrow screens", () => {
+    expect(getAdvancedFocusClosePosition({ left: 8, top: 68, width: 374, height: 624 }, 390)).toEqual({
+      left: 330,
+      top: 76,
+    });
+  });
+});
diff --git a/apps/nextjs/src/components/board/advanced-focus/geometry.ts b/apps/nextjs/src/components/board/advanced-focus/geometry.ts
new file mode 100644
index 000000000..e8859a5a8
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/geometry.ts
@@ -0,0 +1,54 @@
+import { appShellHeaderHeight } from "../../layout/constants";
+
+export interface FocusRect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+export interface FocusClosePosition {
+  left: number;
+  top: number;
+}
+
+const closeButtonSize = 44;
+const closeButtonGap = 8;
+
+export const getAdvancedFocusRect = (source: FocusRect, viewport: { width: number; height: number }): FocusRect => {
+  const margin = viewport.width < 640 ? 8 : 16;
+  const availableWidth = Math.max(0, viewport.width - margin * 2);
+  const availableHeight = Math.max(0, viewport.height - appShellHeaderHeight - margin * 2);
+  const preferredWidth = viewport.width < 640 ? availableWidth : Math.min(800, availableWidth);
+  const preferredHeight = viewport.width < 640 ? availableHeight : Math.min(560, availableHeight);
+  const width = Math.min(availableWidth, Math.max(source.width, preferredWidth));
+  const height = Math.min(availableHeight, Math.max(source.height, preferredHeight));
+  const minimumTop = appShellHeaderHeight + margin;
+  const maximumLeft = Math.max(margin, viewport.width - margin - width);
+  const maximumTop = Math.max(minimumTop, viewport.height - margin - height);
+
+  return {
+    left: Math.min(maximumLeft, Math.max(margin, source.left - (width - source.width) / 2)),
+    top: Math.min(maximumTop, Math.max(minimumTop, source.top - (height - source.height) / 2)),
+    width,
+    height,
+  };
+};
+
+export const getAdvancedFocusClosePosition = (surface: FocusRect, viewportWidth: number): FocusClosePosition => {
+  const outsideOffset = closeButtonSize + closeButtonGap;
+  const surfaceRight = surface.left + surface.width;
+
+  if (viewportWidth - surfaceRight >= outsideOffset) {
+    return { left: surfaceRight + closeButtonGap, top: surface.top };
+  }
+
+  if (surface.left >= outsideOffset) {
+    return { left: surface.left - outsideOffset, top: surface.top };
+  }
+
+  return {
+    left: Math.max(0, Math.min(viewportWidth - closeButtonSize, surfaceRight - outsideOffset)),
+    top: surface.top + closeButtonGap,
+  };
+};
diff --git a/apps/nextjs/src/components/board/advanced-focus/manual-surface.spec.ts b/apps/nextjs/src/components/board/advanced-focus/manual-surface.spec.ts
new file mode 100644
index 000000000..b659efc9c
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/manual-surface.spec.ts
@@ -0,0 +1,107 @@
+// @vitest-environment jsdom
+
+import { act, createElement, Fragment, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+import { AdvancedFocusManualSurface } from "./manual-surface";
+
+const sourceRect = { left: 100, top: 120, width: 240, height: 160 };
+const rect = { left: 40, top: 80, width: 640, height: 480 };
+const closePosition = { left: 688, top: 80 };
+
+describe("AdvancedFocusManualSurface", () => {
+  let host: HTMLDivElement | undefined;
+  let root: ReturnType<typeof createRoot> | undefined;
+
+  afterEach(async () => {
+    if (root) await act(async () => root?.unmount());
+    host?.remove();
+    document.querySelectorAll("[data-portal]").forEach((portal) => portal.remove());
+    vi.unstubAllGlobals();
+  });
+
+  test("portals dialog semantics, traps focus, closes from the backdrop, and restores focus", async () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal(
+      "matchMedia",
+      vi.fn().mockImplementation((query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    );
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+
+    const Harness = () => {
+      const [opened, setOpened] = useState(false);
+      const contentRef = useRef<HTMLDivElement>(null);
+
+      return createElement(
+        Fragment,
+        null,
+        createElement("button", { type: "button", onClick: () => setOpened(true) }, "Open advanced view"),
+        createElement(
+          AdvancedFocusManualSurface,
+          {
+            opened,
+            phase: "visible",
+            id: "advanced-focus-test",
+            label: "Test widget advanced view",
+            closeLabel: "Close advanced view",
+            rect,
+            closePosition,
+            sourceRect,
+            radius: "md",
+            contentRef,
+            onClose: () => setOpened(false),
+          },
+          createElement("button", { type: "button" }, "First widget action"),
+          createElement("button", { type: "button" }, "Last widget action"),
+        ),
+      );
+    };
+
+    await act(async () => root?.render(createElement(MantineProvider, null, createElement(Harness))));
+    const trigger = document.querySelector<HTMLButtonElement>("button");
+    expect(trigger).not.toBeNull();
+    trigger?.focus();
+    await act(async () => trigger?.click());
+    await act(async () => await new Promise((resolve) => setTimeout(resolve, 20)));
+
+    const dialog = document.querySelector<HTMLElement>("[role='dialog']");
+    const closeButton = dialog?.querySelector<HTMLButtonElement>("[aria-label='Close advanced view']");
+    const actions = dialog?.querySelectorAll<HTMLButtonElement>("button");
+    expect(dialog?.id).toBe("advanced-focus-test");
+    expect(dialog?.getAttribute("aria-modal")).toBe("true");
+    expect(dialog?.closest("[data-portal]")).not.toBeNull();
+    expect(dialog?.closest("[data-grid-item-id]")).toBeNull();
+    expect(document.getElementById(dialog?.getAttribute("aria-labelledby") ?? "")?.textContent).toBe(
+      "Test widget advanced view",
+    );
+    expect(document.activeElement).toBe(closeButton);
+
+    const lastAction = actions?.item((actions?.length ?? 1) - 1);
+    lastAction?.focus();
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true }));
+    expect(document.activeElement).toBe(closeButton);
+    closeButton?.focus();
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Tab", shiftKey: true, bubbles: true, cancelable: true }),
+    );
+    expect(document.activeElement).toBe(lastAction);
+
+    const backdrop = document.querySelector<HTMLElement>("[data-advanced-focus-overlay]");
+    await act(async () => backdrop?.click());
+    await act(async () => await new Promise((resolve) => setTimeout(resolve, 20)));
+    expect(document.activeElement).toBe(trigger);
+  });
+});
diff --git a/apps/nextjs/src/components/board/advanced-focus/manual-surface.tsx b/apps/nextjs/src/components/board/advanced-focus/manual-surface.tsx
new file mode 100644
index 000000000..9cd01848b
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/manual-surface.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import type { CSSProperties, PropsWithChildren, Ref } from "react";
+import { Modal, VisuallyHidden } from "@mantine/core";
+import { useReducedMotion } from "@mantine/hooks";
+
+import classes from "./advanced-focus.module.css";
+import type { FocusClosePosition, FocusRect } from "./geometry";
+
+interface AdvancedFocusManualSurfaceProps extends PropsWithChildren {
+  opened: boolean;
+  phase: "visible" | "closing";
+  id: string;
+  label: string;
+  closeLabel: string;
+  rect: FocusRect;
+  closePosition: FocusClosePosition;
+  sourceRect: FocusRect;
+  radius: string | number;
+  contentRef: Ref<HTMLDivElement>;
+  onClose: () => void;
+}
+
+export const AdvancedFocusManualSurface = ({
+  opened,
+  phase,
+  id,
+  label,
+  closeLabel,
+  rect,
+  closePosition,
+  sourceRect,
+  radius,
+  contentRef,
+  onClose,
+  children,
+}: AdvancedFocusManualSurfaceProps) => {
+  const reduceMotion = useReducedMotion();
+  const transitionDuration = reduceMotion ? 0 : 180;
+  const geometryStyle = {
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height,
+    "--focus-translate-x": `${sourceRect.left - rect.left}px`,
+    "--focus-translate-y": `${sourceRect.top - rect.top}px`,
+    "--focus-scale-x": rect.width > 0 ? sourceRect.width / rect.width : 1,
+    "--focus-scale-y": rect.height > 0 ? sourceRect.height / rect.height : 1,
+  } as CSSProperties;
+  const relativeClosePosition = {
+    left: closePosition.left - rect.left,
+    top: closePosition.top - rect.top,
+  };
+
+  return (
+    <Modal.Root
+      opened={opened}
+      onClose={onClose}
+      radius={radius}
+      padding={0}
+      shadow="none"
+      zIndex="var(--homarr-z-index-widget-focus)"
+      closeOnEscape={false}
+      closeOnClickOutside
+      lockScroll
+      trapFocus
+      returnFocus
+      removeScrollProps={{ allowPinchZoom: true }}
+      transitionProps={{ duration: transitionDuration, transition: "fade" }}
+    >
+      <Modal.Overlay
+        data-advanced-focus-overlay
+        backgroundOpacity={0.38}
+        blur={0}
+        className={`${classes.backdrop} ${classes.manualBackdrop} ${
+          phase === "closing" ? classes.backdropClosing : ""
+        }`}
+      />
+      <Modal.Content
+        ref={contentRef}
+        id={id}
+        data-advanced-focus-surface
+        className={`${classes.manualSurface} ${phase === "closing" ? classes.surfaceClosing : ""}`}
+        style={geometryStyle}
+      >
+        <Modal.Title>
+          <VisuallyHidden>{label}</VisuallyHidden>
+        </Modal.Title>
+        <Modal.CloseButton
+          className={classes.closeButton}
+          variant="default"
+          size={44}
+          aria-label={closeLabel}
+          aria-controls={id}
+          style={relativeClosePosition}
+        />
+        {children}
+      </Modal.Content>
+    </Modal.Root>
+  );
+};
diff --git a/apps/nextjs/src/components/board/advanced-focus/wheel.ts b/apps/nextjs/src/components/board/advanced-focus/wheel.ts
new file mode 100644
index 000000000..6f5d598de
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/wheel.ts
@@ -0,0 +1,26 @@
+const isVerticalScrollContainer = (element: Element) => {
+  if (element.scrollHeight <= element.clientHeight) return false;
+
+  const overflowY = getComputedStyle(element).overflowY;
+  return overflowY === "auto" || overflowY === "scroll";
+};
+
+const canScrollVertically = (element: Element, delta: number) => {
+  return delta < 0 ? element.scrollTop > 0 : element.scrollTop + element.clientHeight < element.scrollHeight;
+};
+
+export const redirectShiftWheel = (root: HTMLElement, target: EventTarget | null, delta: number) => {
+  if (delta === 0) return false;
+
+  let current = target instanceof Element ? target : null;
+  while (current && root.contains(current)) {
+    const isCurrentScrollContainer = isVerticalScrollContainer(current);
+    if (isCurrentScrollContainer && canScrollVertically(current, delta)) {
+      current.scrollTop += delta;
+      return true;
+    }
+    if (current === root) break;
+    current = current.parentElement;
+  }
+  return false;
+};
diff --git a/apps/nextjs/src/components/board/items/actions/create-item.ts b/apps/nextjs/src/components/board/items/actions/create-item.ts
index 4276bdf8a..bceaaacca 100644
--- a/apps/nextjs/src/components/board/items/actions/create-item.ts
+++ b/apps/nextjs/src/components/board/items/actions/create-item.ts
@@ -1,10 +1,12 @@
 import { getBoardLayouts } from "@homarr/boards/context";
 import { createId } from "@homarr/common";
 import type { Modify } from "@homarr/common/types";
+import { getRootSectionLane } from "@homarr/definitions";
 import type { WidgetKind } from "@homarr/definitions";
 import { widgetDefaultSizes } from "@homarr/definitions";
 
 import type { Board, EmptySection, Item, ItemLayout } from "~/app/[locale]/boards/_types";
+import { getBoardLaneColumnCount } from "~/components/board/layout";
 import { getFirstEmptyPosition } from "./empty-position";
 import { getSectionElements } from "./section-elements";
 
@@ -19,17 +21,21 @@ export const createItemCallback =
   ({ id, kind, options = {}, integrationIds = [] }: CreateItemInput) =>
   (previous: Board): Board => {
     const firstSection = previous.sections
-      .filter((section): section is EmptySection => section.kind === "empty")
+      .filter(
+        (section): section is EmptySection =>
+          section.kind === "empty" && getRootSectionLane(section.xOffset) === "main",
+      )
       .toSorted((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset)
       .at(0);
 
     if (!firstSection) return previous;
 
+    const itemLayouts = createItemLayouts(previous, firstSection, kind);
     const widget = {
       id: id ?? createId(),
       kind,
       options,
-      layouts: createItemLayouts(previous, firstSection, kind),
+      layouts: itemLayouts,
       integrationIds,
       advancedOptions: {
         title: null,
@@ -60,12 +66,14 @@ const createItemLayouts = (board: Board, currentSection: EmptySection, kind: Wid
   return layouts.map((layoutId) => {
     const boardLayout = board.layouts.find((layout) => layout.id === layoutId);
     const elements = getSectionElements(board, { sectionId: currentSection.id, layoutId });
-    const layoutItemSize = boardLayout
-      ? { ...itemSize, width: Math.min(itemSize.width, boardLayout.columnCount) }
-      : itemSize;
+    const columnCount = boardLayout ? getBoardLaneColumnCount(boardLayout, "main") : itemSize.width;
+    const size = {
+      width: Math.min(itemSize.width, columnCount),
+      height: itemSize.height,
+    };
 
     const emptyPosition = boardLayout
-      ? getFirstEmptyPosition(elements, boardLayout.columnCount, 9999, layoutItemSize)
+      ? getFirstEmptyPosition(elements, columnCount, undefined, size)
       : { xOffset: 0, yOffset: 0 };
 
     if (!emptyPosition) {
@@ -73,8 +81,8 @@ const createItemLayouts = (board: Board, currentSection: EmptySection, kind: Wid
     }
 
     return {
-      width: layoutItemSize.width,
-      height: layoutItemSize.height,
+      width: size.width,
+      height: size.height,
       ...emptyPosition,
       sectionId: currentSection.id,
       layoutId,
diff --git a/apps/nextjs/src/components/board/items/actions/duplicate-item.ts b/apps/nextjs/src/components/board/items/actions/duplicate-item.ts
index 5d6de18c3..b793bbcaf 100644
--- a/apps/nextjs/src/components/board/items/actions/duplicate-item.ts
+++ b/apps/nextjs/src/components/board/items/actions/duplicate-item.ts
@@ -1,6 +1,8 @@
 import { createId } from "@homarr/common";
+import { getRootSectionLane } from "@homarr/definitions";
 
 import type { Board, EmptySection, ItemLayout, Section } from "~/app/[locale]/boards/_types";
+import { getBoardLaneColumnCount } from "~/components/board/layout";
 import { getFirstEmptyPosition } from "./empty-position";
 import { getSectionElements } from "./section-elements";
 
@@ -15,16 +17,17 @@ export const duplicateItemCallback =
     if (!itemToDuplicate) return previous;
 
     const clonedItem = structuredClone(itemToDuplicate);
+    const clonedLayouts = clonedItem.layouts.map((layout) => ({
+      ...layout,
+      ...getNextPosition(previous, layout),
+    }));
 
     return {
       ...previous,
       items: previous.items.concat({
         ...clonedItem,
         id: createId(),
-        layouts: clonedItem.layouts.map((layout) => ({
-          ...layout,
-          ...getNextPosition(previous, layout),
-        })),
+        layouts: clonedLayouts,
       }),
     };
   };
@@ -42,8 +45,10 @@ const getNextPosition = (board: Board, layout: ItemLayout): { xOffset: number; y
   }
 
   const firstSection = board.sections
-    .filter((section): section is EmptySection => section.kind === "empty")
-    .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset)
+    .filter(
+      (section): section is EmptySection => section.kind === "empty" && getRootSectionLane(section.xOffset) === "main",
+    )
+    .toSorted((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset)
     .at(0);
 
   if (!firstSection) {
@@ -67,18 +72,21 @@ const getEmptySectionPosition = (
   layout: ItemLayout,
   section: Section,
 ): { xOffset: number; yOffset: number } | undefined => {
-  const boardLayout = board.layouts.find((boardLayout) => boardLayout.id === layout.layoutId);
+  const boardLayout = board.layouts.find((candidate) => candidate.id === layout.layoutId);
   if (!boardLayout) return;
 
-  const sectionElements = getSectionElements(board, { sectionId: layout.sectionId, layoutId: layout.layoutId });
-  if (section.kind !== "dynamic") {
-    return getFirstEmptyPosition(sectionElements, boardLayout.columnCount, undefined, {
+  const sectionElements = getSectionElements(board, { sectionId: section.id, layoutId: layout.layoutId });
+  if (section.kind === "empty") {
+    const columnCount = getBoardLaneColumnCount(boardLayout, getRootSectionLane(section.xOffset));
+
+    const size = {
       width: layout.width,
       height: layout.height,
-    });
+    };
+    return getFirstEmptyPosition(sectionElements, columnCount, undefined, size);
   }
 
-  const sectionLayout = section.layouts.find((sectionLayout) => sectionLayout.layoutId === layout.layoutId);
+  const sectionLayout = section.layouts.find((candidate) => candidate.layoutId === layout.layoutId);
   if (!sectionLayout) return;
 
   return getFirstEmptyPosition(sectionElements, sectionLayout.width, sectionLayout.height, {
diff --git a/apps/nextjs/src/components/board/items/actions/empty-position.ts b/apps/nextjs/src/components/board/items/actions/empty-position.ts
index 836b412cc..2f3875627 100644
--- a/apps/nextjs/src/components/board/items/actions/empty-position.ts
+++ b/apps/nextjs/src/components/board/items/actions/empty-position.ts
@@ -7,7 +7,7 @@ export const getFirstEmptyPosition = (
   size: { width: number; height: number } = { width: 1, height: 1 },
 ) => {
   for (let yOffset = 0; yOffset < rowCount + 1 - size.height; yOffset++) {
-    for (let xOffset = 0; xOffset <= columnCount - size.width; xOffset++) {
+    for (let xOffset = 0; xOffset < columnCount + 1 - size.width; xOffset++) {
       const isOccupied = elements.some(
         (element) =>
           element.yOffset < yOffset + size.height &&
diff --git a/apps/nextjs/src/components/board/items/actions/move-and-resize-item.ts b/apps/nextjs/src/components/board/items/actions/move-and-resize-item.ts
index 0348b3f06..8b8f3a02f 100644
--- a/apps/nextjs/src/components/board/items/actions/move-and-resize-item.ts
+++ b/apps/nextjs/src/components/board/items/actions/move-and-resize-item.ts
@@ -1,9 +1,8 @@
-import { getCurrentLayout } from "@homarr/boards/context";
-
 import type { Board } from "~/app/[locale]/boards/_types";
 
 export interface MoveAndResizeItemInput {
   itemId: string;
+  layoutId: string;
   xOffset: number;
   yOffset: number;
   width: number;
@@ -11,10 +10,8 @@ export interface MoveAndResizeItemInput {
 }
 
 export const moveAndResizeItemCallback =
-  ({ itemId, ...layoutInput }: MoveAndResizeItemInput) =>
+  ({ itemId, layoutId, ...layoutInput }: MoveAndResizeItemInput) =>
   (previous: Board): Board => {
-    const currentLayout = getCurrentLayout(previous);
-
     return {
       ...previous,
       items: previous.items.map((item) =>
@@ -23,7 +20,7 @@ export const moveAndResizeItemCallback =
           : {
               ...item,
               layouts: item.layouts.map((layout) =>
-                layout.layoutId !== currentLayout
+                layout.layoutId !== layoutId
                   ? layout
                   : {
                       ...layout,
diff --git a/apps/nextjs/src/components/board/items/actions/move-item-to-section.ts b/apps/nextjs/src/components/board/items/actions/move-item-to-section.ts
index 98d093826..6b7f8d314 100644
--- a/apps/nextjs/src/components/board/items/actions/move-item-to-section.ts
+++ b/apps/nextjs/src/components/board/items/actions/move-item-to-section.ts
@@ -1,9 +1,8 @@
-import { getCurrentLayout } from "@homarr/boards/context";
-
 import type { Board } from "~/app/[locale]/boards/_types";
 
 export interface MoveItemToSectionInput {
   itemId: string;
+  layoutId: string;
   sectionId: string;
   xOffset: number;
   yOffset: number;
@@ -12,10 +11,8 @@ export interface MoveItemToSectionInput {
 }
 
 export const moveItemToSectionCallback =
-  ({ itemId, ...layoutInput }: MoveItemToSectionInput) =>
+  ({ itemId, layoutId, ...layoutInput }: MoveItemToSectionInput) =>
   (board: Board): Board => {
-    const currentLayout = getCurrentLayout(board);
-
     return {
       ...board,
       items: board.items.map((item) =>
@@ -24,7 +21,7 @@ export const moveItemToSectionCallback =
           : {
               ...item,
               layouts: item.layouts.map((layout) =>
-                layout.layoutId !== currentLayout
+                layout.layoutId !== layoutId
                   ? layout
                   : {
                       ...layout,
diff --git a/apps/nextjs/src/components/board/items/actions/section-elements.ts b/apps/nextjs/src/components/board/items/actions/section-elements.ts
index 09efc67c8..0f84b7fcc 100644
--- a/apps/nextjs/src/components/board/items/actions/section-elements.ts
+++ b/apps/nextjs/src/components/board/items/actions/section-elements.ts
@@ -1,8 +1,8 @@
 import type { Board } from "~/app/[locale]/boards/_types";
 
 export const getSectionElements = (board: Board, { sectionId, layoutId }: { sectionId: string; layoutId: string }) => {
-  const dynamicSectionsOfFirstSection = board.sections
-    .filter((section) => section.kind === "dynamic")
+  const containersOfSection = board.sections
+    .filter((section) => section.kind === "container")
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     .map(({ layouts, ...section }) => ({ ...section, ...layouts.find((layout) => layout.layoutId === layoutId)! }))
     .filter((section) => section.parentSectionId === sectionId);
@@ -14,5 +14,5 @@ export const getSectionElements = (board: Board, { sectionId, layoutId }: { sect
     }))
     .filter((item) => item.sectionId === sectionId);
 
-  return [...items, ...dynamicSectionsOfFirstSection];
+  return [...items, ...containersOfSection];
 };
diff --git a/apps/nextjs/src/components/board/items/actions/test/create-item.spec.ts b/apps/nextjs/src/components/board/items/actions/test/create-item.spec.ts
index d3b3e81b3..9378a3dea 100644
--- a/apps/nextjs/src/components/board/items/actions/test/create-item.spec.ts
+++ b/apps/nextjs/src/components/board/items/actions/test/create-item.spec.ts
@@ -1,15 +1,33 @@
-import { describe, expect, test, vi } from "vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
 
 import * as boardContext from "@homarr/boards/context";
 
 import { createItemCallback } from "../create-item";
 import * as emptyPositionModule from "../empty-position";
 import { BoardMockBuilder } from "./mocks/board-mock";
-import { DynamicSectionMockBuilder } from "./mocks/dynamic-section-mock";
+import { ContainerSectionMockBuilder } from "./mocks/container-section-mock";
 import { ItemMockBuilder } from "./mocks/item-mock";
 import { LayoutMockBuilder } from "./mocks/layout-mock";
 
 describe("item actions create-item", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test("clips oversized widgets to each layout's column count", () => {
+    const board = new BoardMockBuilder()
+      .addLayout({ id: "mobile", name: "Mobile", role: "mobile", columnCount: 3, breakpoint: 0 })
+      .addEmptySection({ id: "section" })
+      .build();
+    const baseLayout = board.layouts.find((layout) => layout.role === "base");
+
+    const result = createItemCallback({ kind: "mediaMissing" })(board);
+
+    const createdItem = result.items.at(0);
+    expect(createdItem?.layouts.find((layout) => layout.layoutId === "mobile")?.width).toBe(3);
+    expect(createdItem?.layouts.find((layout) => layout.layoutId === baseLayout?.id)?.width).toBe(4);
+  });
+
   test("should add it to first section", () => {
     // Arrange
     const itemKind = "clock";
@@ -52,9 +70,9 @@ describe("item actions create-item", () => {
         ],
       }),
     );
-    expect(emptyPositionSpy).toHaveBeenCalledWith([], layout.columnCount, 9999, { height: 1, width: 1 });
+    expect(emptyPositionSpy).toHaveBeenCalledWith([], layout.columnCount, undefined, { height: 1, width: 1 });
   });
-  test("should correctly pass dynamic section and items to getFirstEmptyPosition", () => {
+  test("should correctly pass containers and items to getFirstEmptyPosition", () => {
     // Arrange
     const itemKind = "clock";
     const emptyPosition = { xOffset: 5, yOffset: 5 };
@@ -63,21 +81,21 @@ describe("item actions create-item", () => {
     const itemAndSectionPosition = { height: 2, width: 3, yOffset: 2, xOffset: 1 };
 
     const layout = new LayoutMockBuilder({ id: layoutId, columnCount: 4 }).build();
-    const dynamicSectionInFirstSection = new DynamicSectionMockBuilder({ id: "4" })
+    const containerInFirstSection = new ContainerSectionMockBuilder({ id: "4" })
       .addLayout({ ...itemAndSectionPosition, layoutId, parentSectionId: firstSectionId })
       .build();
     const itemInFirstSection = new ItemMockBuilder({ id: "12" })
       .addLayout({ ...itemAndSectionPosition, layoutId, sectionId: firstSectionId })
       .build();
-    const otherDynamicSection = new DynamicSectionMockBuilder({ id: "5" }).addLayout({ layoutId }).build();
+    const otherContainer = new ContainerSectionMockBuilder({ id: "5" }).addLayout({ layoutId }).build();
     const otherItem = new ItemMockBuilder({ id: "13" }).addLayout({ layoutId }).build();
     const board = new BoardMockBuilder()
       .addLayout(layout)
       .addEmptySection({ id: "1", yOffset: 2 })
       .addEmptySection({ id: firstSectionId, yOffset: 0 })
       .addEmptySection({ id: "3", yOffset: 1 })
-      .addSection(dynamicSectionInFirstSection)
-      .addSection(otherDynamicSection)
+      .addSection(containerInFirstSection)
+      .addSection(otherContainer)
       .addItem(itemInFirstSection)
       .addItem(otherItem)
       .build();
@@ -94,8 +112,10 @@ describe("item actions create-item", () => {
 
     // Assert
     expect(result.items.length).toBe(3);
-    const item = result.items.find((item) => item.id !== itemInFirstSection.id && item.id !== otherItem.id);
-    expect(item).toEqual(
+    const createdItem = result.items.find(
+      (candidate) => candidate.id !== itemInFirstSection.id && candidate.id !== otherItem.id,
+    );
+    expect(createdItem).toEqual(
       expect.objectContaining({
         kind: itemKind,
         layouts: [{ ...emptyPosition, height: 1, width: 1, sectionId: firstSectionId, layoutId }],
@@ -104,7 +124,7 @@ describe("item actions create-item", () => {
     expect(spy).toHaveBeenCalledWith(
       [expect.objectContaining(itemAndSectionPosition), expect.objectContaining(itemAndSectionPosition)],
       layout.columnCount,
-      9999,
+      undefined,
       { height: 1, width: 1 },
     );
   });
@@ -123,9 +143,36 @@ describe("item actions create-item", () => {
     expect(result.items.at(0)?.layouts.at(0)).toEqual(
       expect.objectContaining({ width: layout.columnCount, height: 4 }),
     );
-    expect(emptyPositionSpy).toHaveBeenCalledWith([], layout.columnCount, 9999, {
+    expect(emptyPositionSpy).toHaveBeenCalledWith([], layout.columnCount, undefined, {
       width: layout.columnCount,
       height: 4,
     });
   });
+
+  test("clamps wide defaults and places below a full automatic canvas", () => {
+    const board = new BoardMockBuilder().addEmptySection({ id: "canvas", yOffset: 0 }).build();
+    const layout = board.layouts[0];
+    if (!layout) throw new Error("Expected a board layout");
+    layout.id = "layout";
+    layout.columnCount = 1;
+    board.items.push(
+      new ItemMockBuilder({ id: "existing" })
+        .addLayout({ layoutId: layout.id, sectionId: "canvas", width: 1, height: 1 })
+        .build(),
+    );
+
+    const result = createItemCallback({ id: "created", kind: "mediaMissing" })(board);
+    const created = result.items.find((item) => item.id === "created");
+
+    expect(created?.layouts).toEqual([
+      expect.objectContaining({
+        layoutId: layout.id,
+        sectionId: "canvas",
+        width: 1,
+        height: 3,
+        xOffset: 0,
+        yOffset: 1,
+      }),
+    ]);
+  });
 });
diff --git a/apps/nextjs/src/components/board/items/actions/test/duplicate-item.spec.ts b/apps/nextjs/src/components/board/items/actions/test/duplicate-item.spec.ts
index a6dce4384..44c1c9fe0 100644
--- a/apps/nextjs/src/components/board/items/actions/test/duplicate-item.spec.ts
+++ b/apps/nextjs/src/components/board/items/actions/test/duplicate-item.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, test, vi } from "vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
 
 import { duplicateItemCallback } from "../duplicate-item";
 import * as emptyPositionModule from "../empty-position";
@@ -7,6 +7,10 @@ import { ItemMockBuilder } from "./mocks/item-mock";
 import { LayoutMockBuilder } from "./mocks/layout-mock";
 
 describe("item actions duplicate-item", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   test("should copy it in the same section", () => {
     // Arrange
     const itemKind = "minecraftServerStatus";
@@ -61,4 +65,28 @@ describe("item actions duplicate-item", () => {
       }),
     );
   });
+
+  test("uses the next automatic canvas row when it is the first available space", () => {
+    const board = new BoardMockBuilder().addEmptySection({ id: "canvas", yOffset: 0 }).build();
+    const layout = board.layouts[0];
+    if (!layout) throw new Error("Expected a board layout");
+    layout.id = "layout";
+    layout.columnCount = 1;
+    const currentItem = new ItemMockBuilder({ id: "source" })
+      .addLayout({ layoutId: layout.id, sectionId: "canvas", width: 1, height: 1 })
+      .build();
+    board.items.push(currentItem);
+
+    const result = duplicateItemCallback({ itemId: currentItem.id })(board);
+    const duplicated = result.items.find((item) => item.id !== currentItem.id);
+
+    expect(duplicated?.layouts[0]).toEqual(
+      expect.objectContaining({
+        layoutId: layout.id,
+        sectionId: "canvas",
+        xOffset: 0,
+        yOffset: 1,
+      }),
+    );
+  });
 });
diff --git a/apps/nextjs/src/components/board/items/actions/test/empty-position.spec.ts b/apps/nextjs/src/components/board/items/actions/test/empty-position.spec.ts
index 40bb09f1b..1325f41cc 100644
--- a/apps/nextjs/src/components/board/items/actions/test/empty-position.spec.ts
+++ b/apps/nextjs/src/components/board/items/actions/test/empty-position.spec.ts
@@ -108,7 +108,6 @@ describe("get first empty position", () => {
     expect(result).toEqual(expectedX !== undefined ? { xOffset: expectedX, yOffset: expectedY } : undefined);
   });
 });
-
 const createElementsFromLayout = (layout: string[][]) => {
   const elements: (Pick<Item["layouts"][number], "xOffset" | "yOffset" | "width" | "height"> & { char: string })[] = [];
   for (let yOffset = 0; yOffset < layout.length; yOffset++) {
diff --git a/apps/nextjs/src/components/board/items/actions/test/item-move-targets.spec.ts b/apps/nextjs/src/components/board/items/actions/test/item-move-targets.spec.ts
new file mode 100644
index 000000000..fdf11db49
--- /dev/null
+++ b/apps/nextjs/src/components/board/items/actions/test/item-move-targets.spec.ts
@@ -0,0 +1,123 @@
+import { describe, expect, test } from "vitest";
+
+import { getMoveTargets } from "../../item-move-modal";
+import { BoardMockBuilder } from "./mocks/board-mock";
+import { ContainerSectionMockBuilder } from "./mocks/container-section-mock";
+import { EmptySectionMockBuilder } from "./mocks/empty-section-mock";
+import { ItemMockBuilder } from "./mocks/item-mock";
+
+describe("item move targets", () => {
+  test("offers the canvas, enabled gutters, and nested sections", () => {
+    const board = new BoardMockBuilder().build();
+    const layout = board.layouts[0];
+    if (!layout) throw new Error("Expected the board mock to contain a layout");
+    layout.id = "layout";
+    layout.columnCount = 6;
+    layout.leftGutterColumnCount = 1;
+    layout.rightGutterColumnCount = 1;
+
+    board.sections.push(
+      new EmptySectionMockBuilder({ id: "canvas", xOffset: 0 }).build(),
+      new EmptySectionMockBuilder({ id: "left-gutter", xOffset: -1 }).build(),
+      new EmptySectionMockBuilder({ id: "right-gutter", xOffset: 1 }).build(),
+      new ContainerSectionMockBuilder({
+        id: "container",
+        options: {
+          title: "",
+          customCssClasses: [],
+          borderColor: "",
+          showLabel: true,
+          collapsible: false,
+          showOpenAll: false,
+        },
+      })
+        .addLayout({
+          layoutId: layout.id,
+          parentSectionId: "canvas",
+          width: 2,
+          height: 2,
+        })
+        .build(),
+    );
+
+    const targets = getMoveTargets(
+      board,
+      layout.id,
+      {
+        id: "weather",
+        type: "item",
+        xOffset: 0,
+        yOffset: 0,
+        width: 1,
+        height: 1,
+      },
+      {
+        canvas: "Dashboard canvas",
+        container: "New section",
+        leftRail: "Left dashboard rail",
+        rightRail: "Right dashboard rail",
+        numbered: (name, index) => `${name}, destination ${index}`,
+        located: (name, location, index) => `${name}, ${location}, destination ${index}`,
+      },
+    );
+
+    expect(targets.map((target) => target.label)).toEqual([
+      "Dashboard canvas, destination 1",
+      "Left dashboard rail, destination 2",
+      "Right dashboard rail, destination 3",
+      "New section, destination 4",
+    ]);
+    expect(new Set(targets.map((target) => target.label))).toHaveLength(targets.length);
+  });
+
+  test("does not offer canvases that are narrower than a nested section's contents", () => {
+    const board = new BoardMockBuilder().build();
+    const layout = board.layouts[0];
+    if (!layout) throw new Error("Expected the board mock to contain a layout");
+    layout.id = "layout";
+    layout.columnCount = 5;
+    layout.leftGutterColumnCount = 2;
+
+    const section = new ContainerSectionMockBuilder({ id: "source" })
+      .addLayout({
+        layoutId: layout.id,
+        parentSectionId: "canvas",
+        width: 4,
+        height: 2,
+      })
+      .build();
+    board.sections.push(
+      new EmptySectionMockBuilder({ id: "canvas" }).build(),
+      new EmptySectionMockBuilder({ id: "left-gutter", xOffset: -1 }).build(),
+      section,
+    );
+    board.items.push(
+      new ItemMockBuilder({ id: "nested" })
+        .addLayout({
+          layoutId: layout.id,
+          sectionId: section.id,
+          xOffset: 2,
+          width: 2,
+        })
+        .build(),
+    );
+
+    const sourceLayout = section.layouts[0];
+    if (!sourceLayout) throw new Error("Expected the source section to contain a layout");
+    const targets = getMoveTargets(
+      board,
+      layout.id,
+      { ...sourceLayout, id: section.id, type: "section" },
+      {
+        canvas: "Canvas",
+        container: "Section",
+        leftRail: "Left",
+        rightRail: "Right",
+        numbered: (name, index) => `${name} ${index}`,
+        located: (name, location, index) => `${name} ${location} ${index}`,
+      },
+    );
+
+    expect(targets).toEqual([]);
+  });
+});
diff --git a/apps/nextjs/src/components/board/items/actions/test/mocks/board-mock.ts b/apps/nextjs/src/components/board/items/actions/test/mocks/board-mock.ts
index 9a687c2e4..9dfc14d3e 100644
--- a/apps/nextjs/src/components/board/items/actions/test/mocks/board-mock.ts
+++ b/apps/nextjs/src/components/board/items/actions/test/mocks/board-mock.ts
@@ -1,7 +1,7 @@
 import { createId } from "@homarr/common";
 
-import type { Board, DynamicSection, EmptySection, Item, Section } from "~/app/[locale]/boards/_types";
-import { DynamicSectionMockBuilder } from "./dynamic-section-mock";
+import type { Board, ContainerSection, EmptySection, Item, Section } from "~/app/[locale]/boards/_types";
+import { ContainerSectionMockBuilder } from "./container-section-mock";
 import { EmptySectionMockBuilder } from "./empty-section-mock";
 import { ItemMockBuilder } from "./item-mock";
 import { LayoutMockBuilder } from "./layout-mock";
@@ -45,7 +45,10 @@ export class BoardMockBuilder {
           id: createId(),
           name: "Base",
           columnCount: 12,
-          breakpoint: 0,
+          leftGutterColumnCount: 0,
+          rightGutterColumnCount: 0,
+          breakpoint: 768,
+          role: "base",
         },
       ],
       ...board,
@@ -56,8 +59,8 @@ export class BoardMockBuilder {
     return this.addSection(new EmptySectionMockBuilder(emptySection).build());
   }
 
-  public addDynamicSection(dynamicSection?: Partial<DynamicSection>): BoardMockBuilder {
-    return this.addSection(new DynamicSectionMockBuilder(dynamicSection).build());
+  public addContainer(container?: Partial<ContainerSection>): BoardMockBuilder {
+    return this.addSection(new ContainerSectionMockBuilder(container).build());
   }
 
   public addSection(section: Section): BoardMockBuilder {
diff --git a/apps/nextjs/src/components/board/items/actions/test/mocks/category-section-mock.ts b/apps/nextjs/src/components/board/items/actions/test/mocks/category-section-mock.ts
deleted file mode 100644
index a29b93c26..000000000
--- a/apps/nextjs/src/components/board/items/actions/test/mocks/category-section-mock.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { createId } from "@homarr/common";
-
-import type { CategorySection } from "~/app/[locale]/boards/_types";
-
-export class CategorySectionMockBuilder {
-  private readonly section: CategorySection;
-
-  constructor(section?: Partial<CategorySection>) {
-    this.section = {
-      id: createId(),
-      kind: "category",
-      xOffset: 0,
-      yOffset: 0,
-      name: "Category",
-      collapsed: false,
-      ...section,
-    } satisfies CategorySection;
-  }
-
-  public build(): CategorySection {
-    return this.section;
-  }
-}
diff --git a/apps/nextjs/src/components/board/items/actions/test/mocks/container-section-mock.ts b/apps/nextjs/src/components/board/items/actions/test/mocks/container-section-mock.ts
new file mode 100644
index 000000000..906d6167d
--- /dev/null
+++ b/apps/nextjs/src/components/board/items/actions/test/mocks/container-section-mock.ts
@@ -0,0 +1,38 @@
+import { createId } from "@homarr/common";
+import { containerSectionOptionsSchema } from "@homarr/validation/shared";
+
+import type { ContainerSection } from "~/app/[locale]/boards/_types";
+
+type ContainerSectionMock = Omit<Partial<ContainerSection>, "options"> & {
+  options?: Partial<ContainerSection["options"]>;
+};
+
+export class ContainerSectionMockBuilder {
+  private readonly section: ContainerSection;
+
+  constructor(section?: ContainerSectionMock) {
+    this.section = {
+      id: section?.id ?? createId(),
+      kind: "container",
+      collapsed: section?.collapsed ?? false,
+      layouts: section?.layouts ?? [],
+      options: containerSectionOptionsSchema.parse(section?.options),
+    };
+  }
+
+  public addLayout(layout?: Partial<ContainerSection["layouts"][0]>): ContainerSectionMockBuilder {
+    this.section.layouts.push({
+      layoutId: layout?.layoutId ?? createId(),
+      parentSectionId: layout?.parentSectionId ?? createId(),
+      xOffset: layout?.xOffset ?? 0,
+      yOffset: layout?.yOffset ?? 0,
+      width: layout?.width ?? 1,
+      height: layout?.height ?? 1,
+    });
+    return this;
+  }
+
+  public build(): ContainerSection {
+    return structuredClone(this.section);
+  }
+}
diff --git a/apps/nextjs/src/components/board/items/actions/test/mocks/dynamic-section-mock.ts b/apps/nextjs/src/components/board/items/actions/test/mocks/dynamic-section-mock.ts
deleted file mode 100644
index dde39bcfb..000000000
--- a/apps/nextjs/src/components/board/items/actions/test/mocks/dynamic-section-mock.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { createId } from "@homarr/common";
-
-import type { DynamicSection } from "~/app/[locale]/boards/_types";
-
-export class DynamicSectionMockBuilder {
-  private readonly section: DynamicSection;
-
-  constructor(section?: Partial<DynamicSection>) {
-    this.section = {
-      id: createId(),
-      kind: "dynamic",
-      options: {
-        title: "",
-        borderColor: "",
-        customCssClasses: [],
-      },
-      layouts: [],
-      ...section,
-    } satisfies DynamicSection;
-  }
-
-  public addLayout(layout?: Partial<DynamicSection["layouts"][0]>): DynamicSectionMockBuilder {
-    this.section.layouts.push({
-      layoutId: "1",
-      height: 1,
-      width: 1,
-      xOffset: 0,
-      yOffset: 0,
-      parentSectionId: "0",
-      ...layout,
-    } satisfies DynamicSection["layouts"][0]);
-    return this;
-  }
-
-  public build(): DynamicSection {
-    return this.section;
-  }
-}
diff --git a/apps/nextjs/src/components/board/items/actions/test/mocks/layout-mock.ts b/apps/nextjs/src/components/board/items/actions/test/mocks/layout-mock.ts
index 8297062f6..edc8bcab2 100644
--- a/apps/nextjs/src/components/board/items/actions/test/mocks/layout-mock.ts
+++ b/apps/nextjs/src/components/board/items/actions/test/mocks/layout-mock.ts
@@ -10,7 +10,10 @@ export class LayoutMockBuilder {
       id: createId(),
       name: "Base",
       columnCount: 12,
-      breakpoint: 0,
+      leftGutterColumnCount: 0,
+      rightGutterColumnCount: 0,
+      breakpoint: 768,
+      role: "base",
       ...layout,
     } satisfies Board["layouts"][0];
   }
diff --git a/apps/nextjs/src/components/board/items/actions/test/move-and-resize-item.spec.ts b/apps/nextjs/src/components/board/items/actions/test/move-and-resize-item.spec.ts
index de3e5804b..d8c10cdd5 100644
--- a/apps/nextjs/src/components/board/items/actions/test/move-and-resize-item.spec.ts
+++ b/apps/nextjs/src/components/board/items/actions/test/move-and-resize-item.spec.ts
@@ -1,6 +1,4 @@
-import { describe, expect, test, vi } from "vitest";
-
-import * as boardContext from "@homarr/boards/context";
+import { describe, expect, test } from "vitest";
 
 import { moveAndResizeItemCallback } from "../move-and-resize-item";
 import { BoardMockBuilder } from "./mocks/board-mock";
@@ -11,8 +9,6 @@ describe("moveItemToSectionCallback should move item in section", () => {
     // Arrange
     const itemToMove = "2";
     const layoutId = "1";
-    const spy = vi.spyOn(boardContext, "getCurrentLayout");
-    spy.mockReturnValue(layoutId);
     const newPosition = {
       xOffset: 20,
       yOffset: 30,
@@ -25,7 +21,7 @@ describe("moveItemToSectionCallback should move item in section", () => {
     const board = new BoardMockBuilder().addItem(itemA).addItem(itemB).addItem(itemC).build();
 
     // Act
-    const updatedBoard = moveAndResizeItemCallback({ itemId: itemToMove, ...newPosition })(board);
+    const updatedBoard = moveAndResizeItemCallback({ itemId: itemToMove, layoutId, ...newPosition })(board);
 
     // Assert
     expect(updatedBoard.items).toHaveLength(3);
@@ -43,8 +39,6 @@ describe("moveItemToSectionCallback should move item in section", () => {
     // Arrange
     const itemToMove = "2";
     const layoutId = "1";
-    const spy = vi.spyOn(boardContext, "getCurrentLayout");
-    spy.mockReturnValue(layoutId);
     const newPosition = {
       xOffset: 20,
       yOffset: 30,
@@ -56,7 +50,7 @@ describe("moveItemToSectionCallback should move item in section", () => {
     const board = new BoardMockBuilder().addItem(itemA).addItem(itemC).build();
 
     // Act
-    const updatedBoard = moveAndResizeItemCallback({ itemId: itemToMove, ...newPosition })(board);
+    const updatedBoard = moveAndResizeItemCallback({ itemId: itemToMove, layoutId, ...newPosition })(board);
 
     // Assert
     expect(updatedBoard.items).toHaveLength(2);
diff --git a/apps/nextjs/src/components/board/items/actions/test/move-item-to-section.spec.ts b/apps/nextjs/src/components/board/items/actions/test/move-item-to-section.spec.ts
index 41e838ed2..5f930003a 100644
--- a/apps/nextjs/src/components/board/items/actions/test/move-item-to-section.spec.ts
+++ b/apps/nextjs/src/components/board/items/actions/test/move-item-to-section.spec.ts
@@ -1,6 +1,4 @@
-import { describe, expect, test, vi } from "vitest";
-
-import * as boardContext from "@homarr/boards/context";
+import { describe, expect, test } from "vitest";
 
 import { moveItemToSectionCallback } from "../move-item-to-section";
 import { BoardMockBuilder } from "./mocks/board-mock";
@@ -11,8 +9,6 @@ describe("moveItemToSectionCallback should move item to section", () => {
     // Arrange
     const itemToMove = "2";
     const layoutId = "1";
-    const spy = vi.spyOn(boardContext, "getCurrentLayout");
-    spy.mockReturnValue(layoutId);
     const newPosition = {
       sectionId: "3",
       xOffset: 20,
@@ -26,7 +22,7 @@ describe("moveItemToSectionCallback should move item to section", () => {
     const board = new BoardMockBuilder().addItem(itemA).addItem(itemB).addItem(itemC).build();
 
     // Act
-    const updatedBoard = moveItemToSectionCallback({ itemId: itemToMove, ...newPosition })(board);
+    const updatedBoard = moveItemToSectionCallback({ itemId: itemToMove, layoutId, ...newPosition })(board);
 
     // Assert
     expect(updatedBoard.items).toHaveLength(3);
@@ -44,8 +40,6 @@ describe("moveItemToSectionCallback should move item to section", () => {
     // Arrange
     const itemToMove = "2";
     const layoutId = "1";
-    const spy = vi.spyOn(boardContext, "getCurrentLayout");
-    spy.mockReturnValue(layoutId);
     const newPosition = {
       sectionId: "3",
       xOffset: 20,
@@ -58,7 +52,7 @@ describe("moveItemToSectionCallback should move item to section", () => {
     const board = new BoardMockBuilder().addItem(itemA).addItem(itemC).build();
 
     // Act
-    const updatedBoard = moveItemToSectionCallback({ itemId: itemToMove, ...newPosition })(board);
+    const updatedBoard = moveItemToSectionCallback({ itemId: itemToMove, layoutId, ...newPosition })(board);
 
     // Assert
     expect(updatedBoard.items).toHaveLength(2);
diff --git a/apps/nextjs/src/components/board/items/item-actions.tsx b/apps/nextjs/src/components/board/items/item-actions.tsx
index 29b5615e2..28f23179a 100644
--- a/apps/nextjs/src/components/board/items/item-actions.tsx
+++ b/apps/nextjs/src/components/board/items/item-actions.tsx
@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 
+import { useCurrentLayout } from "@homarr/boards/context";
 import { useUpdateBoard } from "@homarr/boards/updater";
 import type { BoardItemAdvancedOptions } from "@homarr/validation/shared";
 
@@ -31,13 +32,9 @@ interface UpdateItemIntegrations {
 
 export const useItemActions = () => {
   const { updateBoard } = useUpdateBoard();
+  const currentLayoutId = useCurrentLayout();
 
-  const createItem = useCallback(
-    (input: CreateItemInput) => {
-      updateBoard(createItemCallback(input));
-    },
-    [updateBoard],
-  );
+  const createItem = useCallback((input: CreateItemInput) => updateBoard(createItemCallback(input)), [updateBoard]);
 
   const duplicateItem = useCallback(
     ({ itemId }: DuplicateItemInput) => {
@@ -81,17 +78,17 @@ export const useItemActions = () => {
   );
 
   const moveAndResizeItem = useCallback(
-    (input: MoveAndResizeItemInput) => {
-      updateBoard(moveAndResizeItemCallback(input));
+    (input: Omit<MoveAndResizeItemInput, "layoutId">) => {
+      updateBoard(moveAndResizeItemCallback({ ...input, layoutId: currentLayoutId }));
     },
-    [updateBoard],
+    [currentLayoutId, updateBoard],
   );
 
   const moveItemToSection = useCallback(
-    (input: MoveItemToSectionInput) => {
-      updateBoard(moveItemToSectionCallback(input));
+    (input: Omit<MoveItemToSectionInput, "layoutId">) => {
+      updateBoard(moveItemToSectionCallback({ ...input, layoutId: currentLayoutId }));
     },
-    [updateBoard],
+    [currentLayoutId, updateBoard],
   );
 
   const removeItem = useCallback(
diff --git a/apps/nextjs/src/components/board/items/item-content.module.css b/apps/nextjs/src/components/board/items/item-content.module.css
index f0f6ce4bc..bead20b70 100644
--- a/apps/nextjs/src/components/board/items/item-content.module.css
+++ b/apps/nextjs/src/components/board/items/item-content.module.css
@@ -10,3 +10,17 @@
   background-color: var(--background-color) !important;
   border-color: var(--border-color) !important;
 }
+
+.editModeInertContent {
+  display: contents;
+}
+
+.editModeInertContent[data-board-grid-inert-content="true"] {
+  pointer-events: none;
+  user-select: none;
+}
+
+.editModeInertContent[data-board-grid-inert-content="true"] * {
+  pointer-events: none !important;
+  user-select: none !important;
+}
diff --git a/apps/nextjs/src/components/board/items/item-content.tsx b/apps/nextjs/src/components/board/items/item-content.tsx
index f8c0bab16..70813bc54 100644
--- a/apps/nextjs/src/components/board/items/item-content.tsx
+++ b/apps/nextjs/src/components/board/items/item-content.tsx
@@ -1,71 +1,374 @@
-import type { MutableRefObject } from "react";
-import { useRef } from "react";
-import { Badge, Card } from "@mantine/core";
-import { useElementSize } from "@mantine/hooks";
+import type { ComponentType, CSSProperties, KeyboardEvent, MutableRefObject } from "react";
+import { Suspense, use, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import dynamic from "next/dynamic";
+import type { CardProps } from "@mantine/core";
+import { Badge, Box, Card, Center, Loader, Portal } from "@mantine/core";
+import { useElementSize, useIsomorphicEffect, useViewportSize } from "@mantine/hooks";
 import { QueryErrorResetBoundary, useQueryClient } from "@tanstack/react-query";
 import combineClasses from "clsx";
 import { NoIntegrationSelectedError } from "@homarr/widgets/errors/classes";
+import type { FallbackProps } from "react-error-boundary";
 import { ErrorBoundary } from "react-error-boundary";
 
 import { useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { useSettings } from "@homarr/settings";
-import { loadWidgetDynamic, reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
+import { useI18n } from "@homarr/translation/client";
 import { WidgetError } from "@homarr/widgets/errors";
+import {
+  createWidgetRuntimeState,
+  getWidgetQueryKeys,
+  supportsAdvancedFocus as definitionSupportsAdvancedFocus,
+} from "@homarr/widgets/definition";
+import type { WidgetComponentProps, WidgetDefinition, WidgetRuntimeRef } from "@homarr/widgets/definition";
+import { loadWidgetResources, reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
+import advancedFocusClasses from "../advanced-focus/advanced-focus.module.css";
+import { useAdvancedFocus } from "../advanced-focus/context";
+import { getAdvancedFocusClosePosition, getAdvancedFocusRect } from "../advanced-focus/geometry";
+import { AdvancedFocusManualSurface } from "../advanced-focus/manual-surface";
+import { redirectShiftWheel } from "../advanced-focus/wheel";
 import classes from "../sections/item.module.css";
 import { useItemActions } from "./item-actions";
 import itemContentClasses from "./item-content.module.css";
-import { BoardItemMenu } from "./item-menu";
 import { WidgetContextMenu } from "./widget-context-menu";
-import { removePersistedWidgetQueries } from "./widget-query-recovery";
+import { removeWidgetDataQueries } from "./widget-query-recovery";
+
+const BoardItemMenu = dynamic(() => import("./item-menu").then((module) => module.BoardItemMenu), {
+  ssr: false,
+});
 
 interface BoardItemContentProps {
   item: SectionItem;
 }
 
-const getOverflowFromKind = (kind: SectionItem["kind"]) => {
-  if (kind === "iframe" || kind === "assistant") return "hidden";
-  if (kind === "systemResources") return "visible";
-  return undefined;
+const getOverflowFromKind = (kind: SectionItem["kind"], hasCustomCssClasses: boolean) => {
+  if (kind === "systemResources") return { overflowX: "visible", overflowY: "visible" } as const;
+  if (kind === "iframe" || kind === "assistant") return { overflowX: "hidden", overflowY: "hidden" } as const;
+  if (hasCustomCssClasses) return {};
+  return { overflowX: "hidden", overflowY: "auto" } as const;
 };
 
+type BoardItemCardProps = CardProps & {
+  item: SectionItem;
+  innerRef: (element: HTMLDivElement | null) => void;
+};
+
+const BoardItemCard = ({ item, innerRef, children, ...cardProps }: BoardItemCardProps) => {
+  const board = useRequiredBoard();
+
+  return (
+    <Card
+      {...cardProps}
+      ref={innerRef}
+      w="100%"
+      h="100%"
+      data-grid-item-content
+      className={combineClasses(
+        classes.itemCard,
+        `${item.kind}-wrapper`,
+        "board-grid-item-content",
+        item.advancedOptions.customCssClasses.join(" "),
+      )}
+      radius={board.itemRadius}
+      styles={{
+        root: {
+          "--opacity": board.opacity / 100,
+          containerType: "size",
+          ...getOverflowFromKind(item.kind, item.advancedOptions.customCssClasses.length > 0),
+          "--border-color": item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
+        },
+      }}
+      p={0}
+    >
+      {children}
+    </Card>
+  );
+};
+
+const WidgetDefinitionLoadError = ({
+  error,
+  resetErrorBoundary,
+  item,
+  innerRef,
+}: FallbackProps & Pick<BoardItemCardProps, "item" | "innerRef">) => (
+  <BoardItemCard item={item} innerRef={innerRef}>
+    <Center h="100%">
+      <WidgetError error={error} resetErrorBoundary={resetErrorBoundary} />
+    </Center>
+  </BoardItemCard>
+);
+
 export const BoardItemContent = ({ item }: BoardItemContentProps) => {
   const { ref, width, height } = useElementSize<HTMLDivElement>();
-  const board = useRequiredBoard();
   const widgetStateRef = useRef<Record<string, unknown> | null>(null);
+  const widgetRuntimeRef = useRef(createWidgetRuntimeState());
+
+  return (
+    <ErrorBoundary
+      resetKeys={[item.kind]}
+      fallbackRender={(fallbackProps) => <WidgetDefinitionLoadError {...fallbackProps} item={item} innerRef={ref} />}
+    >
+      <Suspense
+        fallback={
+          <BoardItemCard item={item} innerRef={ref}>
+            <Center h="100%">
+              <Loader size="sm" />
+            </Center>
+          </BoardItemCard>
+        }
+      >
+        <LoadedBoardItemContent
+          item={item}
+          width={width}
+          height={height}
+          widgetStateRef={widgetStateRef}
+          widgetRuntimeRef={widgetRuntimeRef}
+          contentRef={ref}
+        />
+      </Suspense>
+    </ErrorBoundary>
+  );
+};
+
+interface LoadedBoardItemContentProps {
+  item: SectionItem;
+  width: number;
+  height: number;
+  widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
+  widgetRuntimeRef: WidgetRuntimeRef;
+  contentRef: (element: HTMLDivElement | null) => void;
+}
+
+const LoadedBoardItemContent = ({
+  item,
+  width,
+  height,
+  widgetStateRef,
+  widgetRuntimeRef,
+  contentRef,
+}: LoadedBoardItemContentProps) => {
+  const { definition, Component } = use(loadWidgetResources(item.kind));
+  const sourceRef = useRef<HTMLDivElement>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const { width: viewportWidth, height: viewportHeight } = useViewportSize();
+  const board = useRequiredBoard();
+  const t = useI18n();
+  const [isEditMode] = useEditMode();
+  const [manualSurface, setManualSurface] = useState<HTMLDivElement | null>(null);
+  const [surfacePortalTarget, setSurfacePortalTarget] = useState<HTMLDivElement | null>(null);
+  const { active, open, close, dismiss, hover, leave } = useAdvancedFocus();
+  const supportsAdvancedFocus = definitionSupportsAdvancedFocus(definition);
+  const widgetName = t(`widget.${item.kind}.name`);
+  const advancedViewLabel = t("item.advancedFocus.label", { widget: widgetName });
+  const advancedViewId = `advanced-focus-${item.id}`;
+  const activeFocus = supportsAdvancedFocus && active?.itemId === item.id ? active : null;
+  const isAdvanced = activeFocus !== null;
+  const advancedRect = activeFocus
+    ? getAdvancedFocusRect(activeFocus.sourceRect, { width: viewportWidth, height: viewportHeight })
+    : null;
+  const closePosition = advancedRect ? getAdvancedFocusClosePosition(advancedRect, viewportWidth) : null;
+  const isPreview = activeFocus?.activation === "preview";
+  const isManual = activeFocus?.activation === "manual";
+
+  useIsomorphicEffect(() => {
+    if (!supportsAdvancedFocus) return;
+    const target = document.createElement("div");
+    target.className = advancedFocusClasses.surfacePortalTarget ?? "";
+    setSurfacePortalTarget(target);
+    return () => target.remove();
+  }, [supportsAdvancedFocus]);
+
+  useEffect(() => () => dismiss(item.id), [dismiss, item.id]);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (
+      event.currentTarget !== event.target ||
+      event.key !== "Enter" ||
+      !event.shiftKey ||
+      isEditMode ||
+      !supportsAdvancedFocus
+    )
+      return;
+    event.preventDefault();
+    if (sourceRef.current) open(item.id, sourceRef.current, { activation: "manual", autofocusClose: true });
+  };
+
+  useEffect(() => {
+    const surface = isManual ? manualSurface : cardRef.current;
+    if (!isAdvanced || !surface) return;
+
+    const handleWheel = (event: WheelEvent) => {
+      if (!event.shiftKey) return;
+      const multiplier = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? surface.clientHeight : 1;
+      const delta = (event.deltaY || event.deltaX) * multiplier;
+      if (!redirectShiftWheel(surface, event.target, delta)) return;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    surface.addEventListener("wheel", handleWheel, { capture: true, passive: false });
+    return () => surface.removeEventListener("wheel", handleWheel, { capture: true });
+  }, [isAdvanced, isManual, manualSurface]);
+
+  const mountPortalTarget = (node: HTMLDivElement | null, activation: "compact" | "preview" | "manual") => {
+    if (!node || !surfacePortalTarget) return;
+    const shouldMount =
+      (activation === "compact" && !isAdvanced) ||
+      (activation === "preview" && isPreview) ||
+      (activation === "manual" && isManual);
+    if (shouldMount) node.append(surfacePortalTarget);
+  };
+
+  const previewStyle =
+    isPreview && advancedRect && activeFocus
+      ? ({
+          left: advancedRect.left,
+          top: advancedRect.top,
+          width: advancedRect.width,
+          height: advancedRect.height,
+          "--focus-translate-x": `${activeFocus.sourceRect.left - advancedRect.left}px`,
+          "--focus-translate-y": `${activeFocus.sourceRect.top - advancedRect.top}px`,
+          "--focus-scale-x": advancedRect.width > 0 ? activeFocus.sourceRect.width / advancedRect.width : 1,
+          "--focus-scale-y": advancedRect.height > 0 ? activeFocus.sourceRect.height / advancedRect.height : 1,
+        } as CSSProperties)
+      : undefined;
+
+  const widgetCard = (
+    <Card
+      ref={cardRef}
+      id={isPreview ? advancedViewId : undefined}
+      role={isPreview ? "region" : undefined}
+      aria-label={isPreview ? advancedViewLabel : undefined}
+      data-advanced-focus-surface={isPreview || undefined}
+      data-grid-item-content
+      radius={board.itemRadius}
+      p={isAdvanced ? undefined : 0}
+      h={isManual ? "100%" : isAdvanced ? undefined : "100%"}
+      w={isManual ? "100%" : isAdvanced ? undefined : "100%"}
+      className={combineClasses(
+        classes.itemCard,
+        `${item.kind}-wrapper`,
+        "board-grid-item-content",
+        isPreview && advancedFocusClasses.surface,
+        activeFocus?.phase === "closing" && isPreview && advancedFocusClasses.surfaceClosing,
+        item.advancedOptions.customCssClasses.join(" "),
+      )}
+      styles={{
+        root: {
+          "--opacity": isAdvanced ? 0.98 : board.opacity / 100,
+          containerType: "size",
+          ...getOverflowFromKind(item.kind, item.advancedOptions.customCssClasses.length > 0),
+          "--border-color": item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
+        },
+      }}
+      style={previewStyle}
+    >
+      <Box ref={contentRef} w="100%" h="100%" mih={0}>
+        <ErrorBoundary
+          resetKeys={[item.kind]}
+          fallbackRender={({ resetErrorBoundary, error }) => (
+            <>
+              {isEditMode && (
+                <BoardItemMenu item={item} definition={definition} resetErrorBoundary={resetErrorBoundary} />
+              )}
+              <div
+                className={itemContentClasses.editModeInertContent}
+                data-board-grid-inert-content={isEditMode ? "true" : undefined}
+                inert={isEditMode}
+              >
+                <WidgetError definition={definition} error={error} resetErrorBoundary={resetErrorBoundary} />
+              </div>
+            </>
+          )}
+        >
+          <InnerContent
+            item={item}
+            width={width}
+            height={height}
+            widgetStateRef={widgetStateRef}
+            widgetRuntimeRef={widgetRuntimeRef}
+            displayMode={isAdvanced ? "advanced" : "compact"}
+            definition={definition}
+            Component={Component}
+          />
+        </ErrorBoundary>
+      </Box>
+    </Card>
+  );
 
   return (
     <>
-      <WidgetContextMenu item={item} widgetStateRef={widgetStateRef}>
-        <Card
-          ref={ref}
-          className={combineClasses(
-            classes.itemCard,
-            `${item.kind}-wrapper`,
-            "grid-stack-item-content",
-            item.advancedOptions.customCssClasses.join(" "),
-          )}
-          radius={board.itemRadius}
-          styles={{
-            root: {
-              "--opacity": board.opacity / 100,
-              containerType: "size",
-              overflow: getOverflowFromKind(item.kind),
-              "--border-color": item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
-            },
+      <WidgetContextMenu
+        item={item}
+        definition={definition}
+        widgetStateRef={widgetStateRef}
+        widgetRuntimeRef={widgetRuntimeRef}
+        sourceRef={sourceRef}
+      >
+        <Box
+          ref={sourceRef}
+          w="100%"
+          h="100%"
+          data-advanced-focus-source
+          data-item-id={item.id}
+          tabIndex={!isEditMode && supportsAdvancedFocus ? 0 : undefined}
+          role={!isEditMode && supportsAdvancedFocus ? "group" : undefined}
+          aria-label={
+            !isEditMode && supportsAdvancedFocus ? `${widgetName}: ${t("item.advancedFocus.open")}` : undefined
+          }
+          aria-expanded={supportsAdvancedFocus ? isAdvanced : undefined}
+          aria-controls={isAdvanced ? advancedViewId : undefined}
+          aria-keyshortcuts={supportsAdvancedFocus ? "Shift+Enter" : undefined}
+          onKeyDown={supportsAdvancedFocus ? handleKeyDown : undefined}
+          onPointerEnter={() => {
+            if (supportsAdvancedFocus && sourceRef.current) hover(item.id, sourceRef.current);
           }}
-          p={0}
+          onPointerLeave={() => {
+            if (supportsAdvancedFocus) leave(item.id);
+          }}
+          className={combineClasses(isAdvanced && advancedFocusClasses.sourcePlaceholder)}
         >
-          <InnerContent item={item} width={width} height={height} widgetStateRef={widgetStateRef} />
-        </Card>
+          <div ref={(node) => mountPortalTarget(node, "compact")} className={advancedFocusClasses.surfaceHost}>
+            {!supportsAdvancedFocus && widgetCard}
+          </div>
+          {surfacePortalTarget && createPortal(widgetCard, surfacePortalTarget)}
+          {isPreview && (
+            <Portal reuseTargetNode={false}>
+              <div
+                ref={(node) => mountPortalTarget(node, "preview")}
+                className={advancedFocusClasses.surfaceHostAdvanced}
+              />
+            </Portal>
+          )}
+          {isManual && activeFocus && advancedRect && closePosition && (
+            <AdvancedFocusManualSurface
+              opened={activeFocus.phase === "visible"}
+              phase={activeFocus.phase}
+              id={advancedViewId}
+              label={advancedViewLabel}
+              closeLabel={t("item.advancedFocus.close")}
+              rect={advancedRect}
+              closePosition={closePosition}
+              sourceRect={activeFocus.sourceRect}
+              radius={board.itemRadius}
+              contentRef={setManualSurface}
+              onClose={() => close()}
+            >
+              <div
+                ref={(node) => mountPortalTarget(node, "manual")}
+                className={advancedFocusClasses.manualSurfaceMount}
+              />
+            </AdvancedFocusManualSurface>
+          )}
+        </Box>
       </WidgetContextMenu>
-      {item.advancedOptions.title?.trim() && (
+      {!isAdvanced && item.advancedOptions.title?.trim() && (
         <Badge
           pos="absolute"
-          // It's 4 because of the mantine-react-table that has z-index 3
-          style={{ zIndex: 4 }}
+          style={{ zIndex: "var(--mantine-z-index-app)" }}
           top={2}
           left={16}
           size="xs"
@@ -91,35 +394,46 @@ interface InnerContentProps {
   width: number;
   height: number;
   widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
+  widgetRuntimeRef: WidgetRuntimeRef;
+  displayMode: "compact" | "advanced";
+  definition: WidgetDefinition;
+  Component: ComponentType<WidgetComponentProps<SectionItem["kind"]>>;
 }
 
-const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
+const InnerContent = ({ item, definition, Component, ...dimensions }: InnerContentProps) => {
   const settings = useSettings();
   const board = useRequiredBoard();
   const [isEditMode] = useEditMode();
-  const Comp = loadWidgetDynamic(item.kind);
-  const { definition } = widgetImports[item.kind];
-  const options = reduceWidgetOptionsWithDefaultValues(item.kind, settings, item.options);
+  const options = reduceWidgetOptionsWithDefinition(definition, settings, item.options);
   const newItem = { ...item, options };
-  const { updateItemOptions } = useItemActions();
+  const { removeItem, updateItemOptions } = useItemActions();
   const updateOptions = ({ newOptions }: { newOptions: Record<string, unknown> }) =>
     updateItemOptions({ itemId: item.id, newOptions });
   const widgetSupportsIntegrations =
-    "supportedIntegrations" in definition && definition.supportedIntegrations.length >= 1;
+    "supportedIntegrations" in definition && (definition.supportedIntegrations?.length ?? 0) >= 1;
   const queryClient = useQueryClient();
+  const widgetQueryKeys = getWidgetQueryKeys(definition, item.kind);
 
   return (
     <QueryErrorResetBoundary>
       {({ reset }) => (
         <ErrorBoundary
           onReset={() => {
-            removePersistedWidgetQueries(queryClient);
+            removeWidgetDataQueries(queryClient, widgetQueryKeys);
             reset();
           }}
           fallbackRender={({ resetErrorBoundary, error }) => (
             <>
-              <BoardItemMenu offset={4} item={newItem} resetErrorBoundary={resetErrorBoundary} />
-              <WidgetError kind={item.kind} error={error} resetErrorBoundary={resetErrorBoundary} />
+              {isEditMode && (
+                <BoardItemMenu item={newItem} definition={definition} resetErrorBoundary={resetErrorBoundary} />
+              )}
+              <div
+                className={itemContentClasses.editModeInertContent}
+                data-board-grid-inert-content={isEditMode ? "true" : undefined}
+                inert={isEditMode}
+              >
+                <WidgetError definition={definition} error={error} resetErrorBoundary={resetErrorBoundary} />
+              </div>
             </>
           )}
         >
@@ -131,23 +445,31 @@ const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
               (!("integrationsRequired" in definition) || definition.integrationsRequired !== false)
             }
           />
-          <BoardItemMenu offset={4} item={newItem} />
-          <Comp
-            options={options as never}
-            integrationIds={item.integrationIds}
-            isEditMode={isEditMode}
-            boardId={board.id}
-            itemId={item.id}
-            setOptions={(partialNewOptions) =>
-              updateOptions({
-                newOptions: {
-                  ...options,
-                  ...partialNewOptions.newOptions,
-                },
-              })
-            }
-            {...dimensions}
-          />
+          {isEditMode && <BoardItemMenu item={newItem} definition={definition} />}
+          <div
+            className={itemContentClasses.editModeInertContent}
+            data-board-grid-inert-content={isEditMode ? "true" : undefined}
+            data-homarr-widget-ready={item.kind}
+            inert={isEditMode}
+          >
+            <Component
+              options={options as never}
+              integrationIds={item.integrationIds}
+              isEditMode={isEditMode}
+              boardId={board.id}
+              itemId={item.id}
+              removeItem={() => removeItem({ itemId: item.id })}
+              setOptions={(partialNewOptions) =>
+                updateOptions({
+                  newOptions: {
+                    ...options,
+                    ...partialNewOptions.newOptions,
+                  },
+                })
+              }
+              {...dimensions}
+            />
+          </div>
         </ErrorBoundary>
       )}
     </QueryErrorResetBoundary>
diff --git a/apps/nextjs/src/components/board/items/item-menu.tsx b/apps/nextjs/src/components/board/items/item-menu.tsx
index b8a136bbb..c373e3c66 100644
--- a/apps/nextjs/src/components/board/items/item-menu.tsx
+++ b/apps/nextjs/src/components/board/items/item-menu.tsx
@@ -1,48 +1,48 @@
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ActionIcon, Menu } from "@mantine/core";
 import { IconCopy, IconDotsVertical, IconLayoutKanban, IconPencil, IconTrash } from "@tabler/icons-react";
 
-import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useSettings } from "@homarr/settings";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import { widgetImports } from "@homarr/widgets";
-import { WidgetEditModal } from "@homarr/widgets/modals";
+import type { WidgetDefinition } from "@homarr/widgets/definition";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
 import { useSectionContext } from "../sections/section-context";
 import { useItemActions } from "./item-actions";
-import { ItemMoveModal } from "./item-move-modal";
+import { useOpenItemMoveModal } from "./item-move-modal";
+import { LazyWidgetEditModal, preloadWidgetEditModal } from "./lazy-widget-edit-modal";
 
 interface BoardItemMenuProps {
-  offset: number;
   item: SectionItem;
+  definition: WidgetDefinition;
   resetErrorBoundary?: () => void;
 }
 
 export const BoardItemMenu = (props: BoardItemMenuProps) => {
   const { data: session } = useSession();
-  if (!session) return null;
+  const [isEditMode] = useEditMode();
+  if (!session || !isEditMode) return null;
 
   return <BoardItemMenuInner {...props} />;
 };
-
-const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuProps) => {
+const BoardItemMenuInner = ({ item, definition, resetErrorBoundary }: BoardItemMenuProps) => {
+  const { data: session } = useSession();
+  const canDuplicate = item.kind !== "customApi" || (session?.user.permissions.includes("admin") ?? false);
   const refResetErrorBoundaryOnNextRender = useRef(false);
   const tItem = useScopedI18n("item");
   const t = useI18n();
-  const { openModal } = useModalAction(WidgetEditModal);
-  const { openModal: openMoveModal } = useModalAction(ItemMoveModal);
+  const { openModal } = useModalAction(LazyWidgetEditModal);
+  const openMoveModal = useOpenItemMoveModal();
   const { openConfirmModal } = useConfirmModal();
-  const [isEditMode] = useEditMode();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const { updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations, duplicateItem, removeItem } =
     useItemActions();
-  const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
-  const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);
-  const { gridstack } = useSectionContext().refs;
+  const { integrations: integrationData = [], section } = useSectionContext();
   const settings = useSettings();
+  const label = item.advancedOptions.title?.trim() || t(`widget.${item.kind}.name`);
 
   // Reset error boundary on next render if item has been edited
   useEffect(() => {
@@ -52,12 +52,11 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP
     }
   }, [item, resetErrorBoundary]);
 
-  if (!isEditMode || isPending) return null;
-
   const openEditModal = () => {
     openModal(
       {
         kind: item.kind,
+        definition,
         value: {
           advancedOptions: item.advancedOptions,
           options: item.options,
@@ -78,19 +77,19 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP
           });
           refResetErrorBoundaryOnNextRender.current = true;
         },
-        integrationData: (integrationData ?? []).filter(
+        integrationData: integrationData.filter(
           (integration) =>
-            "supportedIntegrations" in currentDefinition &&
-            (currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
+            "supportedIntegrations" in definition &&
+            (definition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
         ),
-        integrationSupport: "supportedIntegrations" in currentDefinition,
+        integrationSupport: "supportedIntegrations" in definition,
         settings,
         itemId: item.id,
         appId: item.kind === "app" ? (item.options.appId as string | undefined) : undefined,
       },
       {
-        title(t) {
-          return `${t("item.edit.title")} - ${t(`widget.${item.kind}.name`)}`;
+        title(translate) {
+          return `${translate("item.edit.title")} - ${translate(`widget.${item.kind}.name`)}`;
         },
       },
     );
@@ -107,37 +106,48 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP
   };
 
   return (
-    <Menu withinPortal position="right-start" arrowPosition="center">
+    <Menu withinPortal position="right-start" arrowPosition="center" opened={isMenuOpen} onChange={setIsMenuOpen}>
       <Menu.Target>
         <ActionIcon
           variant="default"
-          radius={"xl"}
+          size={24}
+          radius="sm"
           pos="absolute"
-          top={offset}
-          right={offset}
+          top={12}
+          right={8}
           style={{ zIndex: 10 }}
-          aria-label={tItem("menu.label.settings")}
+          data-board-widget-settings
+          aria-label={tItem("menu.label.settingsFor", { name: label })}
         >
-          <IconDotsVertical size={"1rem"} />
+          <IconDotsVertical size="1rem" />
         </ActionIcon>
       </Menu.Target>
       <Menu.Dropdown miw={128}>
         <Menu.Label>{tItem("menu.label.settings")}</Menu.Label>
-        <Menu.Item leftSection={<IconPencil size={16} />} onClick={openEditModal}>
+        <Menu.Item
+          leftSection={<IconPencil size={16} />}
+          onClick={openEditModal}
+          onFocus={preloadWidgetEditModal}
+          onPointerEnter={preloadWidgetEditModal}
+        >
           {tItem("action.edit")}
         </Menu.Item>
         <Menu.Item
           leftSection={<IconLayoutKanban size={16} />}
           onClick={() => {
-            if (!gridstack.current) return;
-            openMoveModal({ item, columnCount: gridstack.current.getColumn(), gridStack: gridstack.current });
+            openMoveModal({
+              entry: item,
+              sourceSectionId: section.id,
+            });
           }}
         >
           {tItem("action.moveResize")}
         </Menu.Item>
-        <Menu.Item leftSection={<IconCopy size={16} />} onClick={() => duplicateItem({ itemId: item.id })}>
-          {tItem("action.duplicate")}
-        </Menu.Item>
+        {canDuplicate && (
+          <Menu.Item leftSection={<IconCopy size={16} />} onClick={() => duplicateItem({ itemId: item.id })}>
+            {tItem("action.duplicate")}
+          </Menu.Item>
+        )}
         <Menu.Divider />
         <Menu.Label c="red.6">{t("common.dangerZone")}</Menu.Label>
         <Menu.Item c="red.6" leftSection={<IconTrash size={16} />} onClick={openRemoveModal}>
diff --git a/apps/nextjs/src/components/board/items/item-move-modal.tsx b/apps/nextjs/src/components/board/items/item-move-modal.tsx
index 38e362ede..6d71bb47d 100644
--- a/apps/nextjs/src/components/board/items/item-move-modal.tsx
+++ b/apps/nextjs/src/components/board/items/item-move-modal.tsx
@@ -1,94 +1,220 @@
-import { useCallback, useRef } from "react";
-import { Grid, NumberInput, Stack } from "@mantine/core";
+import { useCallback, useMemo } from "react";
+import { Grid, NumberInput, Select, Stack } from "@mantine/core";
 import { z } from "zod/v4";
 
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { getRootSectionLane } from "@homarr/definitions";
 import { useZodForm } from "@homarr/form";
-import type { GridStack } from "@homarr/gridstack";
-import { createModal, ModalFormFooter, modalSizeForm } from "@homarr/modals";
-import { useI18n } from "@homarr/translation/client";
+import { createModal, ModalFormFooter, modalSizeForm, useModalAction } from "@homarr/modals";
+import { useScopedI18n } from "@homarr/translation/client";
 
-import type { Item, SectionItem } from "~/app/[locale]/boards/_types";
+import type { Board, ContainerSectionItem, SectionItem } from "~/app/[locale]/boards/_types";
+import { getLayoutRowCount } from "../layout";
+import { resolvePinnedGridCollisions } from "../sections/grid/dnd";
+import { getSectionGridColumnCount, getSectionGridPlacements } from "../sections/grid/section-grid-placements";
+import type { CommitSectionGridInput, SectionGridPlacement } from "../sections/grid/use-grid-layout-actions";
+import { useGridLayoutActions } from "../sections/grid/use-grid-layout-actions";
 
-interface InnerProps {
-  gridStack: GridStack;
-  item: Pick<SectionItem, "id" | "width" | "height" | "xOffset" | "yOffset">;
-  columnCount: number;
+export type MovableEntry = Pick<
+  SectionItem | ContainerSectionItem,
+  "id" | "type" | "width" | "height" | "xOffset" | "yOffset"
+>;
+
+export interface OpenItemMoveModalInput {
+  entry: MovableEntry;
+  sourceSectionId: string;
 }
 
+interface InnerProps extends OpenItemMoveModalInput {
+  board: Board;
+  currentLayoutId: string;
+  commitSectionGrids: (snapshots: readonly CommitSectionGridInput[]) => void;
+}
+
+interface MoveTarget {
+  id: string;
+  label: string;
+  columnCount: number;
+  maxRowCount: number | null;
+}
+
+interface MoveTargetLabels {
+  canvas: string;
+  container: string;
+  leftRail: string;
+  rightRail: string;
+  numbered: (name: string, index: number) => string;
+  located: (name: string, location: string, index: number) => string;
+}
+
+type MoveTargetCandidate = Omit<MoveTarget, "label"> & {
+  name: string;
+  location?: string;
+};
+
 export const ItemMoveModal = createModal<InnerProps>(({ actions, innerProps }) => {
-  const t = useI18n();
-  const maxWidthRef = useRef(innerProps.columnCount - innerProps.item.xOffset);
+  const tLandmark = useScopedI18n("board.landmark");
+  const tContainer = useScopedI18n("section.container");
+  const tMoveResize = useScopedI18n("item.moveResize");
+  const { board, commitSectionGrids, currentLayoutId, entry, sourceSectionId } = innerProps;
+  const minimumSize = useMemo(
+    () => getEntryMinimumSize(board, currentLayoutId, entry),
+    [board, currentLayoutId, entry],
+  );
+  const targets = useMemo(
+    () =>
+      getMoveTargets(board, currentLayoutId, entry, {
+        canvas: tLandmark("canvas"),
+        container: tContainer("action.create"),
+        leftRail: tLandmark("leftRail"),
+        rightRail: tLandmark("rightRail"),
+        numbered: (name, index) => tMoveResize("target.numbered", { name, index: String(index) }),
+        located: (name, location, index) =>
+          tMoveResize("target.located", {
+            name,
+            location,
+            index: String(index),
+          }),
+      }),
+    [board, currentLayoutId, entry, tContainer, tLandmark, tMoveResize],
+  );
+  const targetById = useMemo(() => new Map(targets.map((target) => [target.id, target])), [targets]);
+  const initialTarget = targetById.get(sourceSectionId) ?? targets[0];
+
+  if (!initialTarget) {
+    throw new Error("No valid dashboard section is available for this item");
+  }
+
   const form = useZodForm(
     z.object({
-      xOffset: z
-        .number()
-        .min(0)
-        .max(innerProps.columnCount - 1),
-      yOffset: z.number().min(0),
-      width: z.number().min(1).max(maxWidthRef.current),
-      height: z.number().min(1),
+      sectionId: z.string().min(1),
+      xOffset: z.number().int().min(0).max(32767),
+      yOffset: z.number().int().min(0).max(32767),
+      width: z.number().int().min(1).max(32767),
+      height: z.number().int().min(1).max(32767),
     }),
     {
       initialValues: {
-        xOffset: innerProps.item.xOffset,
-        yOffset: innerProps.item.yOffset,
-        width: innerProps.item.width,
-        height: innerProps.item.height,
-      },
-      onValuesChange(values, previous) {
-        if (values.xOffset !== previous.xOffset) {
-          maxWidthRef.current = innerProps.columnCount - values.xOffset;
-        }
+        sectionId: initialTarget.id,
+        xOffset: entry.xOffset,
+        yOffset: entry.yOffset,
+        width: entry.width,
+        height: entry.height,
       },
     },
   );
+  const selectedTarget = targetById.get(form.values.sectionId) ?? initialTarget;
 
   const handleSubmit = useCallback(
-    (values: Pick<Item["layouts"][number], "height" | "width" | "xOffset" | "yOffset">) => {
-      const gridItem = innerProps.gridStack
-        .getGridItems()
-        .find((item) => item.getAttribute("data-id") === innerProps.item.id);
-      if (!gridItem) return;
-      innerProps.gridStack.update(gridItem, {
-        h: values.height,
-        w: values.width,
-        x: values.xOffset,
+    (values: { sectionId: string; xOffset: number; yOffset: number; width: number; height: number }) => {
+      const target = targetById.get(values.sectionId);
+      if (!target) return;
+
+      const width = Math.max(minimumSize.width, Math.min(values.width, target.columnCount));
+      const height = Math.max(minimumSize.height, values.height);
+      const nextPlacement: SectionGridPlacement = {
+        id: entry.id,
+        type: entry.type,
+        x: Math.min(values.xOffset, target.columnCount - width),
         y: values.yOffset,
-      });
+        w: width,
+        h: height,
+      };
+      const targetPlacements = getSectionGridPlacements(board, currentLayoutId, target.id).filter(
+        (placement) => placement.id !== entry.id,
+      );
+      const resolvedTarget = resolvePinnedGridCollisions(
+        [...targetPlacements, nextPlacement],
+        nextPlacement,
+        target.columnCount,
+      );
+      if (target.maxRowCount !== null && getLayoutRowCount(resolvedTarget) > target.maxRowCount) {
+        form.setFieldError("height", tMoveResize("keyboard.boundary"));
+        return;
+      }
+
+      const snapshots =
+        sourceSectionId === target.id
+          ? [{ layoutId: currentLayoutId, sectionId: target.id, placements: resolvedTarget }]
+          : [
+              {
+                layoutId: currentLayoutId,
+                sectionId: sourceSectionId,
+                placements: getSectionGridPlacements(board, currentLayoutId, sourceSectionId).filter(
+                  (placement) => placement.id !== entry.id,
+                ),
+              },
+              { layoutId: currentLayoutId, sectionId: target.id, placements: resolvedTarget },
+            ];
+
+      commitSectionGrids(snapshots);
       actions.closeModal();
+      focusMovedEntry(entry.id, target.id);
     },
-    [actions, innerProps.gridStack, innerProps.item.id],
+    [
+      actions,
+      board,
+      commitSectionGrids,
+      currentLayoutId,
+      entry,
+      form,
+      minimumSize,
+      sourceSectionId,
+      targetById,
+      tMoveResize,
+    ],
   );
 
   return (
     <form onSubmit={form.onSubmit(handleSubmit, console.error)}>
       <Stack>
+        <Select
+          data={targets.map((target) => ({ value: target.id, label: target.label }))}
+          label={tMoveResize("field.section.label")}
+          data-autofocus
+          allowDeselect={false}
+          searchable
+          {...form.getInputProps("sectionId")}
+        />
         <Grid>
           <Grid.Col span={{ base: 12, md: 6 }}>
             <NumberInput
-              label={t("item.moveResize.field.xOffset.label")}
-              data-autofocus
+              label={tMoveResize("field.xOffset.label")}
               min={0}
-              max={innerProps.columnCount - 1}
+              max={selectedTarget.columnCount - 1}
               {...form.getInputProps("xOffset")}
             />
           </Grid.Col>
 
           <Grid.Col span={{ base: 12, md: 6 }}>
-            <NumberInput label={t("item.moveResize.field.yOffset.label")} min={0} {...form.getInputProps("yOffset")} />
+            <NumberInput
+              label={tMoveResize("field.yOffset.label")}
+              min={0}
+              max={selectedTarget.maxRowCount === null ? undefined : selectedTarget.maxRowCount - 1}
+              {...form.getInputProps("yOffset")}
+            />
           </Grid.Col>
 
           <Grid.Col span={{ base: 12, md: 6 }}>
             <NumberInput
-              label={t("item.moveResize.field.width.label")}
-              min={1}
-              max={innerProps.columnCount - form.values.xOffset}
+              label={tMoveResize("field.width.label")}
+              min={minimumSize.width}
+              max={selectedTarget.columnCount - Math.min(form.values.xOffset, selectedTarget.columnCount - 1)}
               {...form.getInputProps("width")}
             />
           </Grid.Col>
 
           <Grid.Col span={{ base: 12, md: 6 }}>
-            <NumberInput label={t("item.moveResize.field.height.label")} min={1} {...form.getInputProps("height")} />
+            <NumberInput
+              label={tMoveResize("field.height.label")}
+              min={minimumSize.height}
+              max={
+                selectedTarget.maxRowCount === null
+                  ? undefined
+                  : selectedTarget.maxRowCount - Math.min(form.values.yOffset, selectedTarget.maxRowCount - 1)
+              }
+              {...form.getInputProps("height")}
+            />
           </Grid.Col>
         </Grid>
         <ModalFormFooter onCancel={actions.closeModal} />
@@ -101,3 +227,137 @@ export const ItemMoveModal = createModal<InnerProps>(({ actions, innerProps }) =
   },
   size: modalSizeForm,
 });
+
+export const useOpenItemMoveModal = () => {
+  const board = useRequiredBoard();
+  const currentLayoutId = useCurrentLayout();
+  const { commitSectionGrids } = useGridLayoutActions();
+  const { openModal } = useModalAction(ItemMoveModal);
+
+  return useCallback(
+    (input: OpenItemMoveModalInput) => {
+      openModal({
+        ...input,
+        board,
+        currentLayoutId,
+        commitSectionGrids,
+      });
+    },
+    [board, commitSectionGrids, currentLayoutId, openModal],
+  );
+};
+
+export const getMoveTargets = (
+  board: Board,
+  layoutId: string,
+  entry: MovableEntry,
+  labels: MoveTargetLabels,
+): MoveTarget[] => {
+  const minimum = getEntryMinimumSize(board, layoutId, entry);
+
+  const candidates = board.sections.flatMap((section): MoveTargetCandidate[] => {
+    if (section.kind === "empty") {
+      const columnCount = getSectionColumnCount(board, layoutId, section.id);
+      const lane = getRootSectionLane(section.xOffset);
+      if (columnCount === 0) return [];
+      return minimum.width <= columnCount
+        ? [
+            {
+              id: section.id,
+              name: lane === "left" ? labels.leftRail : lane === "right" ? labels.rightRail : labels.canvas,
+              columnCount,
+              maxRowCount: getSectionMaxRowCount(board, layoutId, section.id),
+            },
+          ]
+        : [];
+    }
+
+    const layout = section.layouts.find((candidate) => candidate.layoutId === layoutId);
+    if (!layout) return [];
+    if (
+      (entry.type === "section" && isSameOrDescendant(board, layoutId, section.id, entry.id)) ||
+      minimum.width > layout.width ||
+      minimum.height > layout.height
+    ) {
+      return [];
+    }
+
+    return [
+      {
+        id: section.id,
+        name: section.options.title || labels.container,
+        columnCount: layout.width,
+        maxRowCount: layout.height,
+      },
+    ];
+  });
+
+  return candidates.map(({ name, location, ...target }, index) => ({
+    ...target,
+    label: location ? labels.located(name, location, index + 1) : labels.numbered(name, index + 1),
+  }));
+};
+
+const getSectionColumnCount = (board: Board, layoutId: string, sectionId: string) => {
+  const layout = board.layouts.find((candidate) => candidate.id === layoutId);
+  if (!layout) throw new Error(`Layout "${layoutId}" was not found`);
+  const section = board.sections.find((candidate) => candidate.id === sectionId);
+  if (!section) throw new Error(`Section "${sectionId}" was not found`);
+
+  const columnCount = getSectionGridColumnCount(board, layoutId, sectionId);
+  if (columnCount === null) throw new Error(`Section "${sectionId}" has no current layout`);
+  return columnCount;
+};
+
+const getSectionMaxRowCount = (board: Board, layoutId: string, sectionId: string) => {
+  const section = board.sections.find((candidate) => candidate.id === sectionId);
+  if (!section) return null;
+  if (section.kind === "container") {
+    return section.layouts.find((candidate) => candidate.layoutId === layoutId)?.height ?? null;
+  }
+  return null;
+};
+
+const getEntryMinimumSize = (board: Board, layoutId: string, entry: MovableEntry) => {
+  if (entry.type === "item") return { width: 1, height: 1 };
+  const children = getSectionGridPlacements(board, layoutId, entry.id);
+  return {
+    width: Math.max(1, ...children.map((child) => child.x + child.w)),
+    height: Math.max(1, ...children.map((child) => child.y + child.h)),
+  };
+};
+
+const isSameOrDescendant = (board: Board, layoutId: string, candidateId: string, ancestorId: string) => {
+  let current: string | undefined = candidateId;
+  const visited = new Set<string>();
+  while (current && !visited.has(current)) {
+    if (current === ancestorId) return true;
+    visited.add(current);
+    const section = board.sections.find((candidate) => candidate.id === current && candidate.kind === "container");
+    if (!section || section.kind !== "container") return false;
+    current = section.layouts.find((layout) => layout.layoutId === layoutId)?.parentSectionId;
+  }
+  return false;
+};
+
+const focusMovedEntry = (entryId: string, sectionId: string) => {
+  let attempts = 0;
+  const tryFocus = () => {
+    const section = Array.from(document.querySelectorAll<HTMLElement>("[data-grid-section-id]")).find(
+      (candidate) => candidate.dataset.gridSectionId === sectionId,
+    );
+    const entry = Array.from(section?.querySelectorAll<HTMLElement>(":scope > [data-grid-item-id]") ?? []).find(
+      (candidate) => candidate.dataset.gridItemId === entryId,
+    );
+    const editorEntry = entry?.querySelector<HTMLElement>("[data-editor-grid-entry]");
+    if (editorEntry) {
+      editorEntry.focus();
+      return;
+    }
+
+    attempts += 1;
+    if (attempts < 10) requestAnimationFrame(tryFocus);
+  };
+
+  requestAnimationFrame(tryFocus);
+};
diff --git a/apps/nextjs/src/components/board/items/item-select-data.spec.ts b/apps/nextjs/src/components/board/items/item-select-data.spec.ts
new file mode 100644
index 000000000..4d0e77860
--- /dev/null
+++ b/apps/nextjs/src/components/board/items/item-select-data.spec.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { resolveMatchingIntegrationsAsync, tryLockSelection, unlockSelection } from "./item-select-data";
+
+describe("widget selection lock", () => {
+  it("rejects repeated selection synchronously until the active selection finishes", () => {
+    const lock = { current: false };
+
+    expect(tryLockSelection(lock)).toBe(true);
+    expect(tryLockSelection(lock)).toBe(false);
+
+    unlockSelection(lock);
+    expect(tryLockSelection(lock)).toBe(true);
+  });
+});
+
+describe("resolveMatchingIntegrationsAsync", () => {
+  it("waits for the shared integration query before a cold integration-backed selection", async () => {
+    const ensureDataAsync = vi.fn(async () => [
+      { id: "matching", kind: "sonarr" as const },
+      { id: "other", kind: "radarr" as const },
+    ]);
+
+    await expect(
+      resolveMatchingIntegrationsAsync({
+        hasIntegrationSupport: true,
+        supportedIntegrations: ["sonarr"],
+        currentData: undefined,
+        ensureDataAsync,
+      }),
+    ).resolves.toEqual([{ id: "matching", kind: "sonarr" }]);
+    expect(ensureDataAsync).toHaveBeenCalledOnce();
+  });
+
+  it("does not wait for integrations when the widget has no integration support", async () => {
+    const ensureDataAsync = vi.fn(async () => [{ id: "unused", kind: "sonarr" as const }]);
+
+    await expect(
+      resolveMatchingIntegrationsAsync({
+        hasIntegrationSupport: false,
+        supportedIntegrations: [],
+        currentData: undefined,
+        ensureDataAsync,
+      }),
+    ).resolves.toEqual([]);
+    expect(ensureDataAsync).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/nextjs/src/components/board/items/item-select-data.ts b/apps/nextjs/src/components/board/items/item-select-data.ts
new file mode 100644
index 000000000..f2b37f700
--- /dev/null
+++ b/apps/nextjs/src/components/board/items/item-select-data.ts
@@ -0,0 +1,28 @@
+import type { IntegrationKind } from "@homarr/definitions";
+
+export const tryLockSelection = (lock: { current: boolean }) => {
+  if (lock.current) return false;
+  lock.current = true;
+  return true;
+};
+
+export const unlockSelection = (lock: { current: boolean }) => {
+  lock.current = false;
+};
+
+export const resolveMatchingIntegrationsAsync = async <TIntegration extends { kind: IntegrationKind }>({
+  hasIntegrationSupport,
+  supportedIntegrations,
+  currentData,
+  ensureDataAsync,
+}: {
+  hasIntegrationSupport: boolean;
+  supportedIntegrations: readonly IntegrationKind[];
+  currentData: TIntegration[] | undefined;
+  ensureDataAsync: () => Promise<TIntegration[]>;
+}) => {
+  if (!hasIntegrationSupport) return [];
+
+  const integrations = currentData ?? (await ensureDataAsync());
+  return integrations.filter((integration) => supportedIntegrations.includes(integration.kind));
+};
diff --git a/apps/nextjs/src/components/board/items/item-select-modal.module.css b/apps/nextjs/src/components/board/items/item-select-modal.module.css
new file mode 100644
index 000000000..1a53dd49b
--- /dev/null
+++ b/apps/nextjs/src/components/board/items/item-select-modal.module.css
@@ -0,0 +1,20 @@
+.action {
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+.card:hover .action,
+.card:focus-within .action {
+  opacity: 1;
+}
+
+@media (hover: none), (pointer: coarse) {
+  .action {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .action {
+    transition: none;
+  }
+}
diff --git a/apps/nextjs/src/components/board/items/item-select-modal.tsx b/apps/nextjs/src/components/board/items/item-select-modal.tsx
index 29b9127ee..0bc6c296a 100644
--- a/apps/nextjs/src/components/board/items/item-select-modal.tsx
+++ b/apps/nextjs/src/components/board/items/item-select-modal.tsx
@@ -1,46 +1,68 @@
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { Avatar, Box, Button, Card, Center, Divider, Group, Image, Stack, Text, Tooltip } from "@mantine/core";
 import { IconApi } from "@tabler/icons-react";
 
+import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { createId, objectEntries } from "@homarr/common";
-import { getIconUrl, getIntegrationName } from "@homarr/definitions";
+import { useSession } from "@homarr/auth/client";
+import { createId } from "@homarr/common";
+import { getIconUrl, getIntegrationName, widgetIntegrationSupport, widgetKinds } from "@homarr/definitions";
 import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
 import { createModal, modalSizeSelect, useModalAction } from "@homarr/modals";
+import { showErrorNotification } from "@homarr/notifications";
 import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
 import { SelectGridLayout, selectGridCardHeight } from "@homarr/ui";
 import type { TablerIcon } from "@homarr/ui";
-import { reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
-import { WidgetEditModal } from "@homarr/widgets/modals";
+import { widgetCatalogIcons } from "@homarr/widgets/catalog";
+import { loadWidgetDefinition, reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
 
+import { WorkshopInstallButton } from "~/components/workshop/workshop-install-button";
 import { useItemActions } from "./item-actions";
+import { resolveMatchingIntegrationsAsync, tryLockSelection, unlockSelection } from "./item-select-data";
+import { LazyWidgetEditModal, preloadWidgetEditModal } from "./lazy-widget-edit-modal";
+import classes from "./item-select-modal.module.css";
 
-export const ItemSelectModal = createModal<void>(({ actions }) => {
+interface ItemSelectModalContentProps {
+  actions: { closeModal: () => void };
+  integrationData: RouterOutputs["integration"]["all"] | undefined;
+  customWidgetDefs: RouterOutputs["customWidget"]["available"] | undefined;
+  ensureIntegrationDataAsync: () => Promise<RouterOutputs["integration"]["all"]>;
+  isAdmin: boolean;
+}
+
+const ItemSelectModalContent = ({
+  actions,
+  integrationData,
+  customWidgetDefs,
+  ensureIntegrationDataAsync,
+  isAdmin,
+}: ItemSelectModalContentProps) => {
   const [search, setSearch] = useState("");
+  const [loadingSelection, setLoadingSelection] = useState<string | null>(null);
+  const selectionLock = useRef(false);
   const t = useI18n();
   const { createItem, updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations } = useItemActions();
-  const { openModal: openEditModal } = useModalAction(WidgetEditModal);
-  const { data: integrationData } = clientApi.integration.all.useQuery();
-  const { data: customWidgetDefs } = clientApi.customWidget.all.useQuery();
+  const { openModal: openEditModal } = useModalAction(LazyWidgetEditModal);
   const settings = useSettings();
 
   const availableKinds = useMemo(() => new Set((integrationData ?? []).map((i) => i.kind)), [integrationData]);
 
   const items = useMemo(
     () =>
-      objectEntries(widgetImports)
-        .filter(([kind]) => kind !== "customApi")
-        .map(([kind, value]) => ({
-          kind,
-          supportedIntegrations:
-            "supportedIntegrations" in value.definition
-              ? value.definition.supportedIntegrations.filter((integration) => integration !== "mock")
-              : [],
-          icon: value.definition.icon,
-          name: t(`widget.${kind}.name`),
-          description: t(`widget.${kind}.description`),
-        }))
+      widgetKinds
+        .filter((kind) => kind !== "customApi")
+        .map((kind) => {
+          return {
+            kind,
+            supportedIntegrations: (widgetIntegrationSupport[kind] ?? []).filter(
+              (integration) => integration !== "mock",
+            ),
+            icon: widgetCatalogIcons[kind],
+            name: t(`widget.${kind}.name`),
+            description: t(`widget.${kind}.description`),
+          };
+        })
         .sort((itemA, itemB) => {
           if (itemA.kind === "app") return -1;
           if (itemB.kind === "app") return 1;
@@ -61,58 +83,112 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
   }, [items, search]);
 
   const filteredCustomWidgets = useMemo(
-    () =>
-      (customWidgetDefs ?? []).filter((def) => def.enabled && def.name.toLowerCase().includes(search.toLowerCase())),
+    () => (customWidgetDefs ?? []).filter((def) => def.name.toLowerCase().includes(search.toLowerCase())),
     [customWidgetDefs, search],
   );
 
-  const handleAddCustomWidget = (definitionId: string) => {
-    const itemId = createId();
-    const defaultOptions = reduceWidgetOptionsWithDefaultValues("customApi", settings);
-    createItem({ id: itemId, kind: "customApi", integrationIds: [] });
-    updateItemOptions({ itemId, newOptions: { ...defaultOptions, definitionId } });
-    actions.closeModal();
+  const notifyDefinitionLoadError = (error: unknown) => {
+    showErrorNotification({
+      title: t("common.error"),
+      message: error instanceof Error ? error.message : String(error),
+    });
   };
 
-  const handleAdd = (kind: WidgetKind) => {
-    const definition = widgetImports[kind].definition;
-    const hasIntegrationSupport = "supportedIntegrations" in definition;
-
-    const matchingIntegrations = hasIntegrationSupport
-      ? (integrationData ?? []).filter((integration) =>
-          (definition.supportedIntegrations as string[]).includes(integration.kind),
-        )
-      : [];
-
-    const maxIntegrations = "maxIntegrations" in definition ? (definition.maxIntegrations ?? Infinity) : Infinity;
-    const integrationIds = matchingIntegrations.slice(0, maxIntegrations).map((i) => i.id);
-    const itemId = createId();
-    const defaultOptions = reduceWidgetOptionsWithDefaultValues(kind, settings);
-
-    createItem({ id: itemId, kind, integrationIds });
-    actions.closeModal();
-
-    openEditModal(
-      {
-        kind,
-        value: {
-          advancedOptions: { title: null, customCssClasses: [], borderColor: "" },
-          options: defaultOptions,
-          integrationIds,
+  const handleAddCustomWidget = async (customWidgetDefinition: NonNullable<typeof customWidgetDefs>[number]) => {
+    if (!tryLockSelection(selectionLock)) return;
+    setLoadingSelection(`custom:${customWidgetDefinition.id}`);
+    preloadWidgetEditModal();
+    try {
+      const definition = await loadWidgetDefinition("customApi");
+      const itemId = createId();
+      const defaultOptions = reduceWidgetOptionsWithDefinition(definition, settings);
+      const options = {
+        ...defaultOptions,
+        definitionId: customWidgetDefinition.id,
+        configuration: customWidgetDefinition.defaultOptions,
+        configurationVersion: customWidgetDefinition.updatedAt.getTime(),
+      };
+      actions.closeModal();
+      openEditModal(
+        {
+          kind: "customApi",
+          definition,
+          value: {
+            advancedOptions: { title: null, customCssClasses: [], borderColor: "" },
+            options,
+            integrationIds: [],
+          },
+          onSuccessfulEdit: ({ options: configuredOptions, advancedOptions }) => {
+            createItem({ id: itemId, kind: "customApi", integrationIds: [] });
+            updateItemOptions({ itemId, newOptions: configuredOptions });
+            updateItemAdvancedOptions({ itemId, newAdvancedOptions: advancedOptions });
+          },
+          integrationData: [],
+          integrationSupport: false,
+          settings,
         },
-        onSuccessfulEdit: ({ options, integrationIds: newIntegrationIds, advancedOptions }) => {
-          updateItemOptions({ itemId, newOptions: options });
-          updateItemAdvancedOptions({ itemId, newAdvancedOptions: advancedOptions });
-          updateItemIntegrations({ itemId, newIntegrations: newIntegrationIds });
+        {
+          title: (titleT) => `${titleT("item.edit.title")} - ${customWidgetDefinition.name}`,
         },
-        integrationData: matchingIntegrations,
-        integrationSupport: hasIntegrationSupport,
-        settings,
-      },
-      {
-        title: (titleT) => `${titleT("item.edit.title")} - ${titleT(`widget.${kind}.name`)}`,
-      },
-    );
+      );
+    } catch (error) {
+      notifyDefinitionLoadError(error);
+    } finally {
+      unlockSelection(selectionLock);
+      setLoadingSelection(null);
+    }
+  };
+
+  const handleAdd = async (kind: WidgetKind) => {
+    if (!tryLockSelection(selectionLock)) return;
+    setLoadingSelection(kind);
+    preloadWidgetEditModal();
+    try {
+      const definition = await loadWidgetDefinition(kind);
+      const hasIntegrationSupport = "supportedIntegrations" in definition;
+
+      const matchingIntegrations = await resolveMatchingIntegrationsAsync({
+        hasIntegrationSupport,
+        supportedIntegrations: definition.supportedIntegrations ?? [],
+        currentData: integrationData,
+        ensureDataAsync: ensureIntegrationDataAsync,
+      });
+
+      const integrationIds = matchingIntegrations.map((i) => i.id);
+      const itemId = createId();
+      const defaultOptions = reduceWidgetOptionsWithDefinition(definition, settings);
+
+      createItem({ id: itemId, kind, integrationIds });
+      actions.closeModal();
+
+      openEditModal(
+        {
+          kind,
+          definition,
+          value: {
+            advancedOptions: { title: null, customCssClasses: [], borderColor: "" },
+            options: defaultOptions,
+            integrationIds,
+          },
+          onSuccessfulEdit: ({ options, integrationIds: newIntegrationIds, advancedOptions }) => {
+            updateItemOptions({ itemId, newOptions: options });
+            updateItemAdvancedOptions({ itemId, newAdvancedOptions: advancedOptions });
+            updateItemIntegrations({ itemId, newIntegrations: newIntegrationIds });
+          },
+          integrationData: matchingIntegrations,
+          integrationSupport: hasIntegrationSupport,
+          settings,
+        },
+        {
+          title: (titleT) => `${titleT("item.edit.title")} - ${titleT(`widget.${kind}.name`)}`,
+        },
+      );
+    } catch (error) {
+      notifyDefinitionLoadError(error);
+    } finally {
+      unlockSelection(selectionLock);
+      setLoadingSelection(null);
+    }
   };
 
   return (
@@ -121,9 +197,9 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
       onSearchChange={setSearch}
       placeholder={`${t("item.create.search")}...`}
       onSearchKeyDown={(event) => {
-        if (event.key === "Enter" && filteredItems.length === 1) {
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          handleAdd(filteredItems[0]!.kind);
+        if (event.key === "Enter" && loadingSelection === null && filteredItems.length === 1) {
+          const [item] = filteredItems;
+          if (item) void handleAdd(item.kind);
         }
       }}
     >
@@ -131,12 +207,18 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
         <WidgetItem
           key={item.kind}
           item={item}
-          onSelect={() => handleAdd(item.kind)}
+          onSelect={() => void handleAdd(item.kind)}
+          onIntent={() => {
+            void loadWidgetDefinition(item.kind).catch(() => undefined);
+            preloadWidgetEditModal();
+          }}
+          disabled={loadingSelection !== null}
+          loading={loadingSelection === item.kind}
           hasMatchingIntegration={item.supportedIntegrations.some((kind) => availableKinds.has(kind))}
         />
       ))}
 
-      {filteredCustomWidgets.length > 0 && (
+      {isAdmin && (
         <>
           <Divider
             label={t("customWidget.page.list.title")}
@@ -147,12 +229,12 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
           {filteredCustomWidgets.map((def) => (
             <Card
               key={def.id}
+              className={classes.card}
               h={selectGridCardHeight}
               withBorder
               pos="relative"
-              style={{ overflow: "hidden", "--_hover-opacity": "0" }}
-              onMouseEnter={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "1")}
-              onMouseLeave={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "0")}
+              style={{ overflow: "hidden" }}
+              onPointerEnter={() => void loadWidgetDefinition("customApi").catch(() => undefined)}
             >
               <Stack h="100%" gap="xs">
                 <Group gap="sm" wrap="nowrap" align="flex-start">
@@ -166,38 +248,78 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
                   </Text>
                 </Group>
                 <Text lh={1.2} style={{ whiteSpace: "normal" }} size="xs" c="dimmed" lineClamp={1}>
-                  {def.description ?? def.url}
+                  {def.description ?? ""}
                 </Text>
               </Stack>
               <Box
+                className={classes.action}
                 pos="absolute"
                 bottom={0}
                 left={0}
                 right={0}
                 p="xs"
                 style={{
-                  opacity: "var(--_hover-opacity)",
-                  transition: "opacity 150ms ease",
                   background: "linear-gradient(transparent, var(--mantine-color-body) 30%)",
                 }}
               >
-                <Button onClick={() => handleAddCustomWidget(def.id)} variant="light" size="xs" fullWidth>
+                <Button
+                  onClick={() => void handleAddCustomWidget(def)}
+                  variant="light"
+                  size="xs"
+                  fullWidth
+                  disabled={loadingSelection !== null}
+                  loading={loadingSelection === `custom:${def.id}`}
+                >
                   {t("item.create.addToBoard")}
                 </Button>
               </Box>
             </Card>
           ))}
+
+          <Box style={{ gridColumn: "1 / -1" }}>
+            <WorkshopInstallButton fullWidth>{t("workshop.installDialog")}</WorkshopInstallButton>
+          </Box>
         </>
       )}
 
-      {filteredItems.length === 0 && filteredCustomWidgets.length === 0 && (
+      {filteredItems.length === 0 && (!isAdmin || filteredCustomWidgets.length === 0) && (
         <Center p="xl">
           <Text c="dimmed">{t("common.noResults")}</Text>
         </Center>
       )}
     </SelectGridLayout>
   );
-}).withOptions({
+};
+const ItemSelectModalFrame = ({
+  actions,
+  innerProps,
+}: {
+  actions: { closeModal: () => void };
+  innerProps: { boardId: string };
+}) => {
+  const utils = clientApi.useUtils();
+  const { data: session } = useSession();
+  const isAdmin = session?.user.permissions.includes("admin") ?? false;
+  const { data: integrationData } = clientApi.integration.all.useQuery();
+  const { data: customWidgetDefs } = clientApi.customWidget.available.useQuery(
+    { boardId: innerProps.boardId },
+    { enabled: isAdmin },
+  );
+
+  return (
+    <ItemSelectModalContent
+      actions={actions}
+      integrationData={integrationData}
+      customWidgetDefs={customWidgetDefs}
+      ensureIntegrationDataAsync={() => utils.integration.all.ensureData()}
+      isAdmin={isAdmin}
+    />
+  );
+};
+
+export const ItemSelectModal = createModal<{ boardId: string }>((props) => (
+  <ItemSelectModalFrame {...props} />
+)).withOptions({
   defaultTitle: (t) => t("item.create.title"),
   size: modalSizeSelect,
 });
@@ -205,6 +327,9 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
 const WidgetItem = ({
   item,
   onSelect,
+  onIntent,
+  disabled,
+  loading,
   hasMatchingIntegration,
 }: {
   item: {
@@ -215,23 +340,27 @@ const WidgetItem = ({
     icon: TablerIcon;
   };
   onSelect: () => void;
+  onIntent: () => void;
+  disabled: boolean;
+  loading: boolean;
   hasMatchingIntegration: boolean;
 }) => {
   const t = useI18n();
 
   return (
     <Card
+      className={classes.card}
       h={selectGridCardHeight}
       withBorder
       pos="relative"
       style={{
         overflow: "hidden",
-        "--_hover-opacity": "0",
         borderColor: hasMatchingIntegration ? "var(--mantine-color-blue-6)" : undefined,
         borderWidth: hasMatchingIntegration ? 2 : undefined,
       }}
-      onMouseEnter={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "1")}
-      onMouseLeave={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "0")}
+      onFocus={onIntent}
+      onPointerEnter={onIntent}
+      aria-busy={loading || undefined}
     >
       <Stack h="100%" gap="xs">
         <Group gap="sm" wrap="nowrap" align="flex-start">
@@ -248,18 +377,17 @@ const WidgetItem = ({
         <SupportedIntegrations integrations={item.supportedIntegrations} />
       </Stack>
       <Box
+        className={classes.action}
         pos="absolute"
         bottom={0}
         left={0}
         right={0}
         p="xs"
         style={{
-          opacity: "var(--_hover-opacity)",
-          transition: "opacity 150ms ease",
           background: "linear-gradient(transparent, var(--mantine-color-body) 30%)",
         }}
       >
-        <Button onClick={onSelect} variant="light" size="xs" fullWidth>
+        <Button onClick={onSelect} variant="light" size="xs" fullWidth disabled={disabled} loading={loading}>
           {t(`item.create.addToBoard`)}
         </Button>
       </Box>
diff --git a/apps/nextjs/src/components/board/items/lazy-widget-edit-modal.tsx b/apps/nextjs/src/components/board/items/lazy-widget-edit-modal.tsx
new file mode 100644
index 000000000..fb7a26bcd
--- /dev/null
+++ b/apps/nextjs/src/components/board/items/lazy-widget-edit-modal.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { Suspense, use } from "react";
+import { Center, Loader } from "@mantine/core";
+import { ErrorBoundary } from "react-error-boundary";
+
+import type { WidgetKind } from "@homarr/definitions";
+import { createModal, modalSizeForm } from "@homarr/modals";
+import { WidgetError } from "@homarr/widgets/errors";
+import type { WidgetEditModalProps } from "@homarr/widgets/modals";
+
+let widgetEditModalPromise: Promise<typeof import("@homarr/widgets/modals")> | undefined;
+
+export const loadWidgetEditModal = () => {
+  if (widgetEditModalPromise) return widgetEditModalPromise;
+
+  const currentPromise = import("@homarr/widgets/modals");
+  widgetEditModalPromise = currentPromise;
+  void currentPromise.catch(() => {
+    if (widgetEditModalPromise === currentPromise) widgetEditModalPromise = undefined;
+  });
+  return currentPromise;
+};
+
+export const preloadWidgetEditModal = () => void loadWidgetEditModal().catch(() => undefined);
+
+interface LazyWidgetEditModalContentProps {
+  actions: { closeModal: () => void };
+  innerProps: WidgetEditModalProps<WidgetKind>;
+}
+
+const LazyWidgetEditModalContent = (props: LazyWidgetEditModalContentProps) => {
+  const { WidgetEditModal } = use(loadWidgetEditModal());
+  const Component = WidgetEditModal.component;
+  return <Component {...props} />;
+};
+
+export const LazyWidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>((props) => (
+  <ErrorBoundary
+    fallbackRender={({ error, resetErrorBoundary }) => (
+      <Center py="xl">
+        <WidgetError
+          error={error}
+          resetErrorBoundary={() => {
+            widgetEditModalPromise = undefined;
+            resetErrorBoundary();
+          }}
+        />
+      </Center>
+    )}
+  >
+    <Suspense
+      fallback={
+        <Center py="xl">
+          <Loader size="sm" />
+        </Center>
+      }
+    >
+      <LazyWidgetEditModalContent {...props} />
+    </Suspense>
+  </ErrorBoundary>
+)).withOptions({
+  keepMounted: true,
+  defaultTitle(t) {
+    return t("item.edit.title");
+  },
+  size: modalSizeForm,
+});
diff --git a/apps/nextjs/src/components/board/items/widget-context-menu.tsx b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
index 8520d6b89..e4f1f8cec 100644
--- a/apps/nextjs/src/components/board/items/widget-context-menu.tsx
+++ b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
@@ -1,112 +1,160 @@
 "use client";
 
-import type { MutableRefObject, ReactNode } from "react";
-import { useCallback, useMemo } from "react";
-import { Group, Loader, Menu, Switch, Text, Tooltip } from "@mantine/core";
-import {
-  IconAlertTriangle,
-  IconCircleCheck,
-  IconCopy,
-  IconLayoutKanban,
-  IconRefresh,
-  IconSettings,
-  IconTrash,
-} from "@tabler/icons-react";
+import type { MutableRefObject, ReactNode, RefObject } from "react";
+import { useCallback, useMemo, useState } from "react";
+import { Group, Loader, Menu, Text, Tooltip } from "@mantine/core";
+import { IconAlertTriangle, IconCircleCheck, IconMaximize, IconRefresh, IconSettings } from "@tabler/icons-react";
 import type { QueryClient, QueryKey } from "@tanstack/react-query";
 import { useIsFetching, useQueryClient } from "@tanstack/react-query";
 
 import { clientApi } from "@homarr/api/client";
-import { useSession } from "@homarr/auth/client";
+import { useIntegrationsWithInteractAccess, useSession } from "@homarr/auth/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
+import { usePersistBoard } from "@homarr/boards/updater";
 import { useTimeAgo } from "@homarr/common";
-import { useConfirmModal, useModalAction } from "@homarr/modals";
+import { useModalAction } from "@homarr/modals";
+import { showErrorNotification } from "@homarr/notifications";
 import { useSettings } from "@homarr/settings";
 import { translateIfNecessary } from "@homarr/translation";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import type { TranslationFunction } from "@homarr/translation";
-import type { WidgetContextMenuAction } from "@homarr/widgets";
-import { reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
-import { WidgetEditModal } from "@homarr/widgets/modals";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import type { WidgetDefinition, WidgetRuntimeRef } from "@homarr/widgets/definition";
+import { getWidgetQueryKeys, getWidgetRuntimeQueries, supportsAdvancedFocus } from "@homarr/widgets/definition";
+import { reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
-import { useSectionContext } from "../sections/section-context";
+import { useAdvancedFocus } from "../advanced-focus/context";
+import { useBoardPermissions } from "../permissions/client";
 import { useItemActions } from "./item-actions";
-import { ItemMoveModal } from "./item-move-modal";
+import { LazyWidgetEditModal, preloadWidgetEditModal } from "./lazy-widget-edit-modal";
+import { matchesWidgetItemQuery } from "./widget-query-scope";
 
 interface WidgetContextMenuProps {
   item: SectionItem;
+  definition: WidgetDefinition;
   widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
+  widgetRuntimeRef: WidgetRuntimeRef;
+  sourceRef: RefObject<HTMLElement | null>;
   children: ReactNode;
 }
 
-export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetContextMenuProps) => {
+export const WidgetContextMenu = ({
+  item,
+  definition,
+  widgetRuntimeRef,
+  sourceRef,
+  children,
+}: WidgetContextMenuProps) => {
   const { data: session } = useSession();
   const [isEditMode] = useEditMode();
   const board = useRequiredBoard();
-  const tItem = useScopedI18n("item");
+  const { hasChangeAccess } = useBoardPermissions(board);
+  const { updateAndPersistBoard } = usePersistBoard(board);
   const tMenu = useScopedI18n("item.menu.label");
   const t = useI18n();
   const settings = useSettings();
-  const isRightClickEnabled = settings.enableRightClickOnWidgets;
-  const { openModal } = useModalAction(WidgetEditModal);
-  const { openModal: openMoveModal } = useModalAction(ItemMoveModal);
-  const { openConfirmModal } = useConfirmModal();
-  const { updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations, duplicateItem, removeItem } =
-    useItemActions();
-  const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
-  const { mutate: saveBoard } = clientApi.board.saveBoard.useMutation();
-  const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);
-  const { gridstack } = useSectionContext().refs;
+  const { openModal } = useModalAction(LazyWidgetEditModal);
+  const { updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations } = useItemActions();
+  const hasSupportedIntegrations = (definition.supportedIntegrations?.length ?? 0) > 0;
+  const { data: integrationData = [], isPending } = clientApi.integration.all.useQuery(undefined, {
+    enabled: hasSupportedIntegrations,
+  });
+  const canConfigureWidget =
+    hasChangeAccess && (item.kind !== "customApi" || (session?.user.permissions.includes("admin") ?? false));
+  const canOpenAdvancedFocus = supportsAdvancedFocus(definition);
   const queryClient = useQueryClient();
+  const { open: openAdvancedFocus } = useAdvancedFocus();
+  const integrationsWithInteractAccess = useIntegrationsWithInteractAccess();
+  const [menuOpened, setMenuOpened] = useState(false);
 
-  const widgetQueryKey = useMemo(
-    () => ("queryKey" in currentDefinition ? (currentDefinition.queryKey as QueryKey) : [["widget", item.kind]]),
-    [currentDefinition, item.kind],
+  const persistBoard = useCallback(
+    (updater: (previous: typeof board) => typeof board) => {
+      updateAndPersistBoard(updater, {
+        onError: () => {
+          showErrorNotification({
+            title: t("item.menu.notification.saveError.title"),
+            message: t("item.menu.notification.saveError.message"),
+          });
+        },
+      });
+    },
+    [t, updateAndPersistBoard],
   );
-  const isWidgetFetching = useIsFetching({ queryKey: widgetQueryKey }) > 0;
-  const handleRefetch = useCallback(() => {
-    void queryClient.refetchQueries({ queryKey: widgetQueryKey, type: "all" });
-  }, [queryClient, widgetQueryKey]);
 
   const options = useMemo(
-    () => reduceWidgetOptionsWithDefaultValues(item.kind, settings, item.options) as Record<string, unknown>,
-    [item.kind, settings, item.options],
+    () => reduceWidgetOptionsWithDefinition(definition, settings, item.options),
+    [definition, settings, item.options],
+  );
+  const widgetQueryKeys = useMemo(() => getWidgetQueryKeys(definition, item.kind), [definition, item.kind]);
+  const matchesWidgetQuery = useCallback(
+    (queryKey: QueryKey) =>
+      matchesWidgetItemQuery(
+        queryKey,
+        widgetQueryKeys,
+        {
+          itemId: item.id,
+          boardId: board.id,
+          integrationIds: item.integrationIds,
+          options,
+          runtimeQueries: getWidgetRuntimeQueries(widgetRuntimeRef),
+        },
+        definition.queryMatcher,
+      ),
+    [board.id, definition.queryMatcher, item.id, item.integrationIds, options, widgetQueryKeys, widgetRuntimeRef],
+  );
+  const isWidgetFetching =
+    useIsFetching({
+      type: "active",
+      predicate: (query) => matchesWidgetQuery(query.queryKey),
+    }) > 0;
+  const handleRefetch = useCallback(() => {
+    void queryClient.refetchQueries({ type: "active", predicate: (query) => matchesWidgetQuery(query.queryKey) });
+  }, [matchesWidgetQuery, queryClient]);
+
+  const canInteractWithSelectedIntegrations = useMemo(() => {
+    const allowedIds = new Set(integrationsWithInteractAccess.map(({ id }) => id));
+    return item.integrationIds.length > 0 && item.integrationIds.every((id) => allowedIds.has(id));
+  }, [integrationsWithInteractAccess, item.integrationIds]);
+
+  const setItemOptions = useCallback(
+    (partial: Record<string, unknown>) => {
+      persistBoard((previous) => ({
+        ...previous,
+        items: previous.items.map((boardItem) =>
+          boardItem.id === item.id ? { ...boardItem, options: { ...boardItem.options, ...partial } } : boardItem,
+        ),
+      }));
+    },
+    [item.id, persistBoard],
   );
 
   type OptionDef = { type: string; skipContextMenu?: boolean };
   const toggleOptions = useMemo(() => {
-    const rawOptions = currentDefinition.createOptions(settings) as unknown as Record<string, OptionDef>;
-    return Object.entries(rawOptions).filter(([, def]) => def.type === "switch" && !def.skipContextMenu);
-  }, [currentDefinition, settings]);
+    if (!canConfigureWidget) return [];
+    const rawOptions = definition.createOptions(settings) as unknown as Record<string, OptionDef>;
+    return Object.entries(rawOptions).filter(([, option]) => option.type === "switch" && !option.skipContextMenu);
+  }, [canConfigureWidget, definition, settings]);
 
-  const widgetContextActions = useMemo(() => {
-    const def = currentDefinition as Record<string, unknown>;
-    if (typeof def.contextActions !== "function") return [];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const actions = (def.contextActions as any)({
+  const widgetContextActions =
+    definition.contextActions?.({
       options,
-      setOptions: (partial: Record<string, unknown>) => {
-        updateItemOptions({ itemId: item.id, newOptions: { ...options, ...partial } });
-      },
+      setOptions: setItemOptions,
       integrationIds: item.integrationIds,
-      context: { isEditMode, boardId: board.id, itemId: item.id },
-      widgetStateRef,
-    });
-    return (Array.isArray(actions) ? actions : []) as WidgetContextMenuAction[];
-  }, [currentDefinition, options, item, updateItemOptions, isEditMode, board.id, widgetStateRef]);
-
-  const persistBoard = useCallback(
-    (updatedItems: typeof board.items) => {
-      saveBoard({ ...board, items: updatedItems });
-    },
-    [board, saveBoard],
-  );
+      context: {
+        isEditMode,
+        boardId: board.id,
+        itemId: item.id,
+        canInteractWithSelectedIntegrations,
+      },
+      widgetRuntimeRef,
+    }) ?? [];
 
   const openEditModal = useCallback(() => {
     openModal(
       {
         kind: item.kind,
+        definition,
         value: {
           advancedOptions: item.advancedOptions,
           options: item.options,
@@ -116,27 +164,24 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
           updateItemOptions({ itemId: item.id, newOptions: editResult.options });
           updateItemAdvancedOptions({ itemId: item.id, newAdvancedOptions: editResult.advancedOptions });
           updateItemIntegrations({ itemId: item.id, newIntegrations: editResult.integrationIds });
-          if (!isEditMode) {
-            persistBoard(
-              board.items.map((boardItem) =>
-                boardItem.id !== item.id
-                  ? boardItem
-                  : {
-                      ...boardItem,
-                      options: editResult.options,
-                      advancedOptions: editResult.advancedOptions,
-                      integrationIds: editResult.integrationIds,
-                    },
-              ),
-            );
-          }
+          persistBoard((previous) => ({
+            ...previous,
+            items: previous.items.map((boardItem) =>
+              boardItem.id !== item.id
+                ? boardItem
+                : {
+                    ...boardItem,
+                    options: editResult.options,
+                    advancedOptions: editResult.advancedOptions,
+                    integrationIds: editResult.integrationIds,
+                  },
+            ),
+          }));
         },
-        integrationData: (integrationData ?? []).filter(
-          (integration) =>
-            "supportedIntegrations" in currentDefinition &&
-            (currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
+        integrationData: integrationData.filter((integration) =>
+          definition.supportedIntegrations?.some((kind) => kind === integration.kind),
         ),
-        integrationSupport: "supportedIntegrations" in currentDefinition,
+        integrationSupport: definition.supportedIntegrations !== undefined,
         settings,
         appId: item.kind === "app" ? (item.options.appId as string | undefined) : undefined,
       },
@@ -144,50 +189,61 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
       { title: (fn: any) => `${fn("item.edit.title")} - ${fn(`widget.${item.kind}.name`)}` },
     );
   }, [
-    openModal,
+    definition,
+    integrationData,
     item,
-    updateItemOptions,
+    openModal,
+    persistBoard,
+    settings,
     updateItemAdvancedOptions,
     updateItemIntegrations,
-    integrationData,
-    currentDefinition,
-    settings,
-    isEditMode,
-    persistBoard,
-    board,
+    updateItemOptions,
   ]);
 
   const handleToggle = useCallback(
-    (key: string) => (checked: boolean) => {
-      const newOptions = { ...options, [key]: checked };
-      updateItemOptions({ itemId: item.id, newOptions });
-      persistBoard(
-        board.items.map((boardItem) => (boardItem.id !== item.id ? boardItem : { ...boardItem, options: newOptions })),
-      );
-    },
-    [options, item.id, updateItemOptions, persistBoard, board],
+    (key: string) => (checked: boolean) => setItemOptions({ [key]: checked }),
+    [setItemOptions],
   );
 
-  if (!session) return <>{children}</>;
-  if (!isRightClickEnabled) return <>{children}</>;
+  if (!session || !settings.enableRightClickOnWidgets || isEditMode) return <>{children}</>;
 
-  const visibleWidgetActions = widgetContextActions.filter((a) => !a.hidden);
+  const visibleWidgetActions = widgetContextActions.filter((action) => !action.hidden);
 
   return (
-    <Menu shadow="md" width={300} closeOnItemClick={false} position="right-start" offset={4}>
+    <Menu
+      shadow="md"
+      width={300}
+      closeOnItemClick={false}
+      position="right-start"
+      offset={4}
+      opened={menuOpened}
+      onChange={setMenuOpened}
+    >
       <Menu.ContextMenu>{children}</Menu.ContextMenu>
       <Menu.Dropdown>
+        {canOpenAdvancedFocus && (
+          <>
+            <Menu.Item
+              closeMenuOnClick
+              leftSection={<IconMaximize size={16} />}
+              onClick={() => {
+                if (sourceRef.current) openAdvancedFocus(item.id, sourceRef.current);
+              }}
+            >
+              {t("item.advancedFocus.open")}
+            </Menu.Item>
+            <Menu.Divider />
+          </>
+        )}
+
         {toggleOptions.length > 0 && (
           <>
             <Menu.Label>{tMenu("options")}</Menu.Label>
             {toggleOptions.map(([key]) => (
-              <Menu.Item key={key} onClick={() => handleToggle(key)(!options[key])}>
+              <Menu.CheckboxItem key={key} checked={Boolean(options[key])} onChange={handleToggle(key)}>
                 {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-                <Group wrap="nowrap">
-                  {String(translateIfNecessary(t, ((fn: any) => fn(`widget.${item.kind}.option.${key}.label`)) as any))}
-                  <Switch size="xs" checked={Boolean(options[key])} readOnly tabIndex={-1} ml="auto" />
-                </Group>
-              </Menu.Item>
+                {String(translateIfNecessary(t, ((fn: any) => fn(`widget.${item.kind}.option.${key}.label`)) as any))}
+              </Menu.CheckboxItem>
             ))}
           </>
         )}
@@ -207,82 +263,39 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
                   disabled={action.disabled}
                   color={action.color}
                 >
-                  {String(translateIfNecessary(t, action.label))}
+                  {translateIfNecessary(t, action.label)}
                 </Menu.Item>
               );
             })}
           </>
         )}
 
-        {isEditMode && (
-          <>
-            {(toggleOptions.length > 0 || visibleWidgetActions.length > 0) && <Menu.Divider />}
-            <Menu.Item
-              closeMenuOnClick
-              leftSection={<IconLayoutKanban size={16} />}
-              onClick={() => {
-                if (!gridstack.current) return;
-                openMoveModal({ item, columnCount: gridstack.current.getColumn(), gridStack: gridstack.current });
-              }}
-            >
-              {tItem("action.moveResize")}
-            </Menu.Item>
-            <Menu.Item
-              closeMenuOnClick
-              leftSection={<IconCopy size={16} />}
-              onClick={() => duplicateItem({ itemId: item.id })}
-            >
-              {tItem("action.duplicate")}
-            </Menu.Item>
-          </>
-        )}
-
-        <>
-          {(toggleOptions.length > 0 || visibleWidgetActions.length > 0 || isEditMode) && <Menu.Divider />}
-          <Menu.Item
-            leftSection={isWidgetFetching ? <Loader size={16} /> : <IconRefresh size={16} />}
-            onClick={handleRefetch}
-            disabled={isWidgetFetching}
-          >
-            <Group justify="space-between" wrap="nowrap" gap="sm">
-              {tMenu("refresh")}
-              <WidgetQueryStatus
-                queryClient={queryClient}
-                queryKey={widgetQueryKey}
-                isFetching={isWidgetFetching}
-                t={t}
-              />
-            </Group>
-          </Menu.Item>
-          <Menu.Item
-            closeMenuOnClick
-            leftSection={<IconSettings size={16} />}
-            onClick={openEditModal}
-            disabled={isPending}
-          >
-            {tMenu("settings")}
-          </Menu.Item>
-        </>
-
-        {isEditMode && (
-          <>
-            <Menu.Divider />
-            <Menu.Item
-              closeMenuOnClick
-              color="red"
-              leftSection={<IconTrash size={16} />}
-              onClick={() => {
-                openConfirmModal({
-                  title: tItem("remove.title"),
-                  children: tItem("remove.message"),
-                  onConfirm: () => removeItem({ itemId: item.id }),
-                });
-              }}
-            >
-              {tItem("action.remove")}
-            </Menu.Item>
-          </>
-        )}
+        {(toggleOptions.length > 0 || visibleWidgetActions.length > 0) && <Menu.Divider />}
+        <Menu.Item
+          leftSection={isWidgetFetching ? <Loader size={16} /> : <IconRefresh size={16} />}
+          onClick={handleRefetch}
+          disabled={isWidgetFetching}
+        >
+          <Group justify="space-between" wrap="nowrap" gap="sm">
+            {tMenu("refresh")}
+            <WidgetQueryStatus
+              queryClient={queryClient}
+              matchesQuery={matchesWidgetQuery}
+              isFetching={isWidgetFetching}
+              t={t}
+            />
+          </Group>
+        </Menu.Item>
+        <Menu.Item
+          closeMenuOnClick
+          leftSection={<IconSettings size={16} />}
+          onClick={openEditModal}
+          onFocus={preloadWidgetEditModal}
+          onPointerEnter={preloadWidgetEditModal}
+          disabled={!canConfigureWidget || (hasSupportedIntegrations && isPending)}
+        >
+          {tMenu("settings")}
+        </Menu.Item>
       </Menu.Dropdown>
     </Menu>
   );
@@ -290,16 +303,20 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
 
 interface WidgetQueryStatusProps {
   queryClient: QueryClient;
-  queryKey: QueryKey;
+  matchesQuery: (queryKey: QueryKey) => boolean;
   isFetching: boolean;
   t: TranslationFunction;
 }
 
-const WidgetQueryStatus = ({ queryClient, queryKey, isFetching, t }: WidgetQueryStatusProps) => {
-  const queries = queryClient.getQueryCache().findAll({ queryKey });
+const WidgetQueryStatus = ({ queryClient, matchesQuery, isFetching, t }: WidgetQueryStatusProps) => {
+  const queries = queryClient.getQueryCache().findAll({
+    type: "active",
+    predicate: (query) => matchesQuery(query.queryKey),
+  });
   const timestamps = queries.map((query) => query.state.dataUpdatedAt).filter(Boolean);
   const latest = timestamps.length > 0 ? Math.max(...timestamps) : 0;
-  const ageLabel = useTimeAgo(new Date(latest));
+  const ageLabel = useTimeAgo(new Date(latest || Date.now()));
+  const ageSuffix = latest > 0 ? ` · ${ageLabel}` : "";
 
   if (isFetching) {
     return (
@@ -320,21 +337,15 @@ const WidgetQueryStatus = ({ queryClient, queryKey, isFetching, t }: WidgetQuery
     );
   }
 
-  const hasError = queries.some((q) => q.state.status === "error");
-
+  const hasError = queries.some((query) => query.state.status === "error");
   if (hasError) {
-    const errorQuery = queries.find((q) => q.state.status === "error");
-    const errorMessage =
-      errorQuery?.state.error instanceof Error
-        ? errorQuery.state.error.message
-        : String(errorQuery?.state.error ?? "Unknown error");
-
     return (
-      <Tooltip label={errorMessage} multiline position="left" w={250}>
+      <Tooltip label={t("item.menu.status.error")} position="left">
         <Group gap={4} wrap="nowrap">
           <IconAlertTriangle size={12} color="var(--mantine-color-red-6)" />
           <Text size="xs" c="red.6">
-            {t("item.menu.status.error")} · {ageLabel}
+            {t("item.menu.status.error")}
+            {ageSuffix}
           </Text>
         </Group>
       </Tooltip>
@@ -345,7 +356,8 @@ const WidgetQueryStatus = ({ queryClient, queryKey, isFetching, t }: WidgetQuery
     <Group gap={4} wrap="nowrap">
       <IconCircleCheck size={12} color="var(--mantine-color-green-6)" />
       <Text size="xs" c="dimmed">
-        {t("item.menu.status.success")} · {ageLabel}
+        {t("item.menu.status.success")}
+        {ageSuffix}
       </Text>
     </Group>
   );
diff --git a/apps/nextjs/src/components/board/items/widget-hover-metadata.ts b/apps/nextjs/src/components/board/items/widget-hover-metadata.ts
deleted file mode 100644
index 22a75c9b3..000000000
--- a/apps/nextjs/src/components/board/items/widget-hover-metadata.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import { objectEntries } from "@homarr/common";
-import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
-import type { SettingsContextProps } from "@homarr/settings/creator";
-import type { WidgetOptionDefinition, WidgetOptionType } from "@homarr/widgets";
-import { reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
-
-import type { SectionItem } from "~/app/[locale]/boards/_types";
-
-export type Translator = {
-  (key: string): string;
-};
-
-export interface HoverMetadataItem {
-  label: string;
-  value: string;
-}
-
-const maxMetadataItems = 3;
-
-const skippedOptionTypes: Partial<Record<WidgetOptionType, true>> = {
-  app: true,
-  anchorNote: true,
-  dynamicSelect: true,
-  sortableItemList: true,
-  multiReleasesRepositories: true,
-  umamiEventName: true,
-  umamiEventNames: true,
-  umamiWebsite: true,
-};
-
-const isEqualValue = (left: unknown, right: unknown) => JSON.stringify(left) === JSON.stringify(right);
-
-type OptionDefinitionWithRules = WidgetOptionDefinition & {
-  shouldHide?: (options: never, integrationKinds: IntegrationKind[]) => boolean;
-  options?: readonly { value: unknown; label: unknown }[];
-};
-
-type OptionFormatter = (value: unknown, definition: OptionDefinitionWithRules, t: Translator) => string | null;
-
-const resolveSelectLabel = (value: unknown, definition: OptionDefinitionWithRules, t: Translator) => {
-  const match = definition.options?.find((option) => option.value === value);
-  const label = match?.label;
-  const fallbackLabel = () => String(value);
-  const labelResolvers: Record<string, () => string> = {
-    function: () => (label as (translator: Translator) => string)(t),
-    string: () => label as string,
-    missing: fallbackLabel,
-  };
-  const labelType = typeof label;
-  const resolveLabel: () => string = labelResolvers[labelType] ?? fallbackLabel;
-  return resolveLabel();
-};
-
-const optionTypeFormatters: Partial<Record<WidgetOptionType, OptionFormatter>> = {
-  switch: (value, _, t) => {
-    const switchLabels: Record<string, string> = {
-      true: t("common.action.show"),
-      false: t("common.action.hide"),
-    };
-    return switchLabels[String(Boolean(value))] ?? null;
-  },
-  text: (value) => {
-    const text = String(value).trim();
-    return text.length > 0 ? text : null;
-  },
-  number: (value) => String(value),
-  slider: (value) => String(value),
-  select: (value, definition, t) => resolveSelectLabel(value, definition, t),
-  multiSelect: (value) => {
-    const items = value as unknown[];
-    return items.length > 0 ? String(items.length) : null;
-  },
-  multiText: (value) => {
-    const items = (value as string[]).filter((entry) => entry.trim().length > 0);
-    return items.length > 0 ? items.join(", ") : null;
-  },
-  location: (value) => {
-    const location = value as { name?: string };
-    const name = location.name?.trim() ?? "";
-    return name.length > 0 ? name : null;
-  },
-};
-
-const formatOptionValue = (
-  type: WidgetOptionType,
-  value: unknown,
-  definition: OptionDefinitionWithRules,
-  t: Translator,
-) => {
-  const formatter = optionTypeFormatters[type];
-  return formatter?.(value, definition, t) ?? null;
-};
-
-const getOptionLabel = (kind: WidgetKind, key: string, t: Translator) => {
-  const labelKey = `widget.${kind}.option.${key}.label`;
-  const translated = t(labelKey);
-  return translated === labelKey ? key : translated;
-};
-
-export const collectWidgetHoverMetadata = (
-  item: SectionItem,
-  settings: Pick<SettingsContextProps, "enableStatusByDefault" | "forceDisableStatus">,
-  integrationKinds: IntegrationKind[],
-  t: Translator,
-): HoverMetadataItem[] => {
-  const { definition } = widgetImports[item.kind];
-  const optionDefinitions = definition.createOptions(settings) as Record<string, OptionDefinitionWithRules>;
-  const resolvedOptions = reduceWidgetOptionsWithDefaultValues(item.kind, settings, item.options);
-
-  return objectEntries(optionDefinitions)
-    .filter(([key, optionDefinition]) => {
-      const skip = skippedOptionTypes[optionDefinition.type];
-      const hidden = optionDefinition.shouldHide?.(resolvedOptions as never, integrationKinds);
-      const unchanged = isEqualValue(resolvedOptions[key], optionDefinition.defaultValue);
-      return !skip && !hidden && !unchanged;
-    })
-    .map(([key, optionDefinition]) => {
-      const formattedValue = formatOptionValue(optionDefinition.type, resolvedOptions[key], optionDefinition, t);
-      return {
-        label: getOptionLabel(item.kind, key, t),
-        value: formattedValue ?? "",
-      };
-    })
-    .filter((entry) => entry.value.length > 0)
-    .slice(0, maxMetadataItems);
-};
-
-interface DisplayNameSource {
-  matches: (item: SectionItem, options: Record<string, unknown>) => boolean;
-  resolve: (item: SectionItem, options: Record<string, unknown>) => string;
-}
-
-const displayNameSources: DisplayNameSource[] = [
-  {
-    matches: (item) => Boolean(item.advancedOptions.title?.trim()),
-    resolve: (item) => item.advancedOptions.title?.trim() ?? "",
-  },
-  {
-    matches: (item, options) =>
-      item.kind === "clock" &&
-      Boolean(options.customTitleToggle) &&
-      String(options.customTitle ?? "").trim().length > 0,
-    resolve: (_, options) => String(options.customTitle).trim(),
-  },
-];
-
-export const resolveWidgetDisplayName = (
-  item: SectionItem,
-  settings: Pick<SettingsContextProps, "enableStatusByDefault" | "forceDisableStatus">,
-  t: Translator,
-) => {
-  const resolvedOptions = reduceWidgetOptionsWithDefaultValues(item.kind, settings, item.options);
-  const source = displayNameSources.find((entry) => entry.matches(item, resolvedOptions));
-  return source?.resolve(item, resolvedOptions) ?? t(`widget.${item.kind}.name`);
-};
diff --git a/apps/nextjs/src/components/board/items/widget-hover-overlay.module.css b/apps/nextjs/src/components/board/items/widget-hover-overlay.module.css
index 89b3ba93e..f8de2cf43 100644
--- a/apps/nextjs/src/components/board/items/widget-hover-overlay.module.css
+++ b/apps/nextjs/src/components/board/items/widget-hover-overlay.module.css
@@ -2,21 +2,18 @@
   position: absolute;
   left: 10px;
   right: 10px;
-  bottom: calc(100% - 10px);
-  margin-bottom: 1px;
+  top: 10px;
   z-index: 200;
   pointer-events: none;
   opacity: 0;
-  transform: translateY(6px);
+  transform: translateY(-6px);
   transition:
     opacity 150ms ease,
     transform 150ms ease;
 }
 
-:global(.grid-stack-item[data-type="item"]:not([data-kind="app"]):hover)
-  .wrapper,
-:global(.grid-stack-item[data-type="item"]:not([data-kind="app"]):focus-within)
-  .wrapper {
+:global([data-type="item"]:not([data-kind="app"]):hover) .wrapper,
+:global([data-type="item"]:not([data-kind="app"]):focus-within) .wrapper {
   opacity: 1;
   transform: translateY(0);
 }
@@ -34,7 +31,7 @@
   align-items: center;
   gap: 8px;
   min-height: 28px;
-  padding: 4px 8px;
+  padding: 4px 36px 4px 8px;
   border: 1px solid var(--border-color);
   border-radius: var(--mantine-radius-md);
   background-color: var(--background-color);
@@ -108,6 +105,15 @@
   flex-shrink: 0;
 }
 
+@media (forced-colors: active) {
+  .panel {
+    border-color: CanvasText;
+    background: Canvas;
+    box-shadow: none;
+    backdrop-filter: none;
+  }
+}
+
 .metadataValue {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/apps/nextjs/src/components/board/items/widget-hover-overlay.tsx b/apps/nextjs/src/components/board/items/widget-hover-overlay.tsx
index 6fcdc4a93..0c6f74af5 100644
--- a/apps/nextjs/src/components/board/items/widget-hover-overlay.tsx
+++ b/apps/nextjs/src/components/board/items/widget-hover-overlay.tsx
@@ -1,12 +1,13 @@
 "use client";
 
+import { Suspense, use } from "react";
 import { Avatar, Text, Tooltip } from "@mantine/core";
 
 import type { RouterOutputs } from "@homarr/api";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { getIconUrl } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
-import { widgetImports } from "@homarr/widgets";
+import { loadWidgetDefinition } from "@homarr/widgets/manifest";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
 import classes from "./widget-hover-overlay.module.css";
@@ -18,8 +19,19 @@ interface WidgetHoverOverlayProps {
 
 export const WidgetHoverOverlay = ({ item, integrations }: WidgetHoverOverlayProps) => {
   const [isEditMode] = useEditMode();
+
+  if (!isEditMode) return null;
+
+  return (
+    <Suspense fallback={null}>
+      <LoadedWidgetHoverOverlay item={item} integrations={integrations} />
+    </Suspense>
+  );
+};
+
+const LoadedWidgetHoverOverlay = ({ item, integrations }: WidgetHoverOverlayProps) => {
   const t = useI18n();
-  const { definition } = widgetImports[item.kind];
+  const definition = use(loadWidgetDefinition(item.kind));
   const WidgetIcon = definition.icon;
 
   const displayName = item.advancedOptions.title?.trim() || t(`widget.${item.kind}.name`);
@@ -28,12 +40,8 @@ export const WidgetHoverOverlay = ({ item, integrations }: WidgetHoverOverlayPro
     item.integrationIds.includes(integration.id),
   );
 
-  if (!isEditMode) {
-    return null;
-  }
-
   return (
-    <div className={classes.wrapper}>
+    <div className={classes.wrapper} data-board-widget-header>
       <div className={classes.panel}>
         <div className={classes.nameSection}>
           <WidgetIcon size={14} stroke={1.75} className={classes.widgetIcon} />
diff --git a/apps/nextjs/src/components/board/items/widget-query-recovery.spec.ts b/apps/nextjs/src/components/board/items/widget-query-recovery.spec.ts
index b666df4e9..dabb464f3 100644
--- a/apps/nextjs/src/components/board/items/widget-query-recovery.spec.ts
+++ b/apps/nextjs/src/components/board/items/widget-query-recovery.spec.ts
@@ -1,27 +1,36 @@
 import { QueryClient } from "@tanstack/react-query";
 import { describe, expect, test } from "vitest";
 
-import { removePersistedWidgetQueries } from "./widget-query-recovery";
+import { removeWidgetDataQueries } from "./widget-query-recovery";
 
-describe("removePersistedWidgetQueries", () => {
-  test("removes stale widget queries and allows fresh data to be fetched", async () => {
+describe("removeWidgetDataQueries", () => {
+  test("removes only the failed widget prefix and allows fresh data to be fetched", async () => {
     const queryClient = new QueryClient();
     const crashedWidgetQueryKey = [["widget", "mediaServer", "getCurrentStreams"], { input: {} }];
+    const sameWidgetQueryKey = [["widget", "mediaServer", "getLibraries"], { input: {} }];
+    const unrelatedWidgetQueryKey = [["widget", "calendar", "getEvents"], { input: {} }];
+    const appQueryKey = [["app", "byId"], { input: {} }];
     const unrelatedQueryKey = [["user", "me"], { input: {} }];
 
     queryClient.setQueryData(crashedWidgetQueryKey, "stale");
+    queryClient.setQueryData(sameWidgetQueryKey, "related");
+    queryClient.setQueryData(unrelatedWidgetQueryKey, "other-widget");
+    queryClient.setQueryData(appQueryKey, "app");
     queryClient.setQueryData(unrelatedQueryKey, "unrelated");
 
-    removePersistedWidgetQueries(queryClient);
+    removeWidgetDataQueries(queryClient, [[["widget", "mediaServer"]]]);
 
     expect(queryClient.getQueryData(crashedWidgetQueryKey)).toBeUndefined();
+    expect(queryClient.getQueryData(sameWidgetQueryKey)).toBeUndefined();
+    expect(queryClient.getQueryData(unrelatedWidgetQueryKey)).toBe("other-widget");
+    expect(queryClient.getQueryData(appQueryKey)).toBe("app");
     expect(queryClient.getQueryData(unrelatedQueryKey)).toBe("unrelated");
     await expect(
       queryClient.fetchQuery({ queryKey: crashedWidgetQueryKey, queryFn: () => Promise.resolve("fresh") }),
     ).resolves.toBe("fresh");
   });
 
-  test("removes persisted queries outside the widget router", () => {
+  test("uses an explicit supporting query prefix without purging other supporting data", () => {
     const queryClient = new QueryClient();
     const dockerQueryKey = [["docker", "getContainers"], { input: {} }];
     const appQueryKey = [["app", "byId"], { input: {} }];
@@ -31,14 +40,14 @@ describe("removePersistedWidgetQueries", () => {
     queryClient.setQueryData(appQueryKey, "stale");
     queryClient.setQueryData(unrelatedQueryKey, "unrelated");
 
-    removePersistedWidgetQueries(queryClient);
+    removeWidgetDataQueries(queryClient, [[["docker", "getContainers"]]]);
 
     expect(queryClient.getQueryData(dockerQueryKey)).toBeUndefined();
-    expect(queryClient.getQueryData(appQueryKey)).toBeUndefined();
+    expect(queryClient.getQueryData(appQueryKey)).toBe("stale");
     expect(queryClient.getQueryData(unrelatedQueryKey)).toBe("unrelated");
   });
 
-  test("removes persisted widget queries when the widget kind and query path differ", () => {
+  test("uses the definition query prefix when the widget kind and query path differ", () => {
     const queryClient = new QueryClient();
     const crashedWidgetQueryKey = [["widget", "anchorNotes", "getNote"], { input: {} }];
     const unrelatedQueryKey = [["user", "me"], { input: {} }];
@@ -46,7 +55,7 @@ describe("removePersistedWidgetQueries", () => {
     queryClient.setQueryData(crashedWidgetQueryKey, "stale");
     queryClient.setQueryData(unrelatedQueryKey, "unrelated");
 
-    removePersistedWidgetQueries(queryClient);
+    removeWidgetDataQueries(queryClient, [[["widget", "anchorNotes"]]]);
 
     expect(queryClient.getQueryData(crashedWidgetQueryKey)).toBeUndefined();
     expect(queryClient.getQueryData(unrelatedQueryKey)).toBe("unrelated");
diff --git a/apps/nextjs/src/components/board/items/widget-query-recovery.ts b/apps/nextjs/src/components/board/items/widget-query-recovery.ts
index 800614bf4..ba80f3ee2 100644
--- a/apps/nextjs/src/components/board/items/widget-query-recovery.ts
+++ b/apps/nextjs/src/components/board/items/widget-query-recovery.ts
@@ -1,7 +1,5 @@
-import type { QueryClient } from "@tanstack/react-query";
+import type { QueryClient, QueryKey } from "@tanstack/react-query";
 
-import { isPersistableWidgetQueryKey } from "@homarr/api/query-cache";
-
-export const removePersistedWidgetQueries = (queryClient: QueryClient) => {
-  queryClient.removeQueries({ predicate: (query) => isPersistableWidgetQueryKey(query.queryKey) });
+export const removeWidgetDataQueries = (queryClient: QueryClient, queryKeys: readonly QueryKey[]) => {
+  queryKeys.forEach((queryKey) => queryClient.removeQueries({ queryKey }));
 };
diff --git a/apps/nextjs/src/components/board/items/widget-query-scope.spec.ts b/apps/nextjs/src/components/board/items/widget-query-scope.spec.ts
new file mode 100644
index 000000000..ec667102e
--- /dev/null
+++ b/apps/nextjs/src/components/board/items/widget-query-scope.spec.ts
@@ -0,0 +1,442 @@
+import type { QueryKey } from "@tanstack/react-query";
+import { describe, expect, test } from "vitest";
+
+import type { NormalizedWidgetQuery, WidgetDefinition, WidgetQueryMatcherScope } from "@homarr/widgets";
+import { getWidgetQueryKeys, widgetImports } from "@homarr/widgets";
+
+import { matchesWidgetItemQuery } from "./widget-query-scope";
+
+type WidgetKind = keyof typeof widgetImports;
+const allPhotosAlbumId = "all";
+
+const createScope = (overrides: Partial<WidgetQueryMatcherScope> = {}): WidgetQueryMatcherScope => ({
+  itemId: "item-1",
+  boardId: "board-1",
+  integrationIds: ["integration-1"],
+  options: {},
+  runtimeQueries: [],
+  ...overrides,
+});
+
+const matches = (kind: WidgetKind, path: readonly string[], input: unknown, scope: WidgetQueryMatcherScope) => {
+  const definition = widgetImports[kind].definition as WidgetDefinition & { kind: string };
+  const queryKey: QueryKey = [path, { input, type: "query" }];
+  return matchesWidgetItemQuery(queryKey, getWidgetQueryKeys(definition), scope, definition.queryMatcher);
+};
+
+describe("matchesWidgetItemQuery", () => {
+  test("matches only the current Custom API definition", () => {
+    const scope = createScope({ options: { definitionId: "definition-1" } });
+    const input = { boardId: "board-1", itemId: "item-1", definitionId: "definition-1" };
+
+    expect(matches("customApi", ["widget", "customApi", "getData"], input, scope)).toBe(true);
+    expect(
+      matches("customApi", ["widget", "customApi", "getData"], { ...input, definitionId: "definition-2" }, scope),
+    ).toBe(false);
+    expect(matches("customApi", ["widget", "customApi", "getData"], { ...input, itemId: "item-2" }, scope)).toBe(false);
+    expect(matches("customApi", ["widget", "customApi", "getData"], { ...input, boardId: "board-2" }, scope)).toBe(
+      false,
+    );
+  });
+
+  test("owns only the active compact or advanced Media Missing page size", () => {
+    const path = ["widget", "mediaOrganizer", "getData"];
+    const compactInput = { integrationIds: ["radarr-1"], pageSize: 20 };
+    const advancedInput = { integrationIds: ["radarr-1"], pageSize: 50 };
+    const compactScope = createScope({
+      integrationIds: ["radarr-1"],
+      runtimeQueries: [{ path, input: compactInput }],
+    });
+    const advancedScope = createScope({
+      integrationIds: ["radarr-1"],
+      runtimeQueries: [{ path, input: advancedInput }],
+    });
+
+    expect(matches("mediaMissing", path, compactInput, compactScope)).toBe(true);
+    expect(matches("mediaMissing", path, advancedInput, compactScope)).toBe(false);
+    expect(matches("mediaMissing", path, advancedInput, advancedScope)).toBe(true);
+    expect(matches("mediaMissing", path, compactInput, advancedScope)).toBe(false);
+  });
+
+  test("owns every Releases batch by item id", () => {
+    const scope = createScope({ itemId: "release-item" });
+    const path = ["widget", "releases", "getLatest"];
+
+    expect(matches("releases", path, { itemId: "release-item", repositories: [{ id: "one" }] }, scope)).toBe(true);
+    expect(matches("releases", path, { itemId: "sibling-item", repositories: [{ id: "one" }] }, scope)).toBe(false);
+  });
+
+  test("normalizes Immich's all-photos sentinel and separates Immich widget kinds", () => {
+    const carouselScope = createScope({
+      integrationIds: ["immich-1"],
+      options: { albumId: allPhotosAlbumId },
+    });
+    const serverStatsQuery: NormalizedWidgetQuery = {
+      path: ["widget", "immich", "getServerStats"],
+      input: { integrationId: "immich-1" },
+    };
+    const albumsQuery: NormalizedWidgetQuery = {
+      path: ["widget", "immich", "getAlbums"],
+      input: { integrationId: "immich-1" },
+    };
+    const compactServerScope = createScope({
+      integrationIds: ["immich-1"],
+      runtimeQueries: [serverStatsQuery],
+    });
+    const advancedServerScope = createScope({
+      integrationIds: ["immich-1"],
+      runtimeQueries: [serverStatsQuery, albumsQuery],
+    });
+
+    expect(
+      matches("immich-albumCarousel", ["widget", "immich", "getAlbum"], { integrationId: "immich-1" }, carouselScope),
+    ).toBe(true);
+    expect(
+      matches(
+        "immich-albumCarousel",
+        ["widget", "immich", "getAlbum"],
+        { integrationId: "immich-1", albumId: "album-2" },
+        carouselScope,
+      ),
+    ).toBe(false);
+    expect(
+      matches(
+        "immich-albumCarousel",
+        ["widget", "immich", "getServerStats"],
+        { integrationId: "immich-1" },
+        carouselScope,
+      ),
+    ).toBe(false);
+    expect(matches("immich-serverStats", serverStatsQuery.path, serverStatsQuery.input, compactServerScope)).toBe(true);
+    expect(matches("immich-serverStats", albumsQuery.path, albumsQuery.input, compactServerScope)).toBe(false);
+    expect(matches("immich-serverStats", albumsQuery.path, albumsQuery.input, advancedServerScope)).toBe(true);
+    expect(
+      matches("immich-serverStats", ["widget", "immich", "getAlbum"], albumsQuery.input, advancedServerScope),
+    ).toBe(false);
+  });
+
+  test("uses the resolved Beszel integration, system, and includeDocker input", () => {
+    const runtimeQuery: NormalizedWidgetQuery = {
+      path: ["widget", "beszel", "getSystemStats"],
+      input: {
+        integrationIds: ["beszel-2"],
+        systemId: "system-2",
+        timePeriod: "1h",
+        includeDocker: true,
+      },
+    };
+    const scope = createScope({
+      integrationIds: ["beszel-1", "beszel-2"],
+      options: { systemId: "beszel-2:system-2", timePeriod: "1h", showDockerCpu: true },
+      runtimeQueries: [runtimeQuery],
+    });
+
+    expect(matches("beszelSystemStats", runtimeQuery.path, runtimeQuery.input, scope)).toBe(true);
+    expect(
+      matches(
+        "beszelSystemStats",
+        runtimeQuery.path,
+        { ...(runtimeQuery.input as Record<string, unknown>), includeDocker: false },
+        scope,
+      ),
+    ).toBe(false);
+    expect(
+      matches(
+        "beszelSystemStats",
+        runtimeQuery.path,
+        { ...(runtimeQuery.input as Record<string, unknown>), systemId: "system-1" },
+        scope,
+      ),
+    ).toBe(false);
+  });
+
+  test("separates Beszel procedure families while retaining shared getSystems ownership", () => {
+    const scope = createScope({
+      integrationIds: ["beszel-1"],
+      options: { showHistory: true, maxHistoryItems: 10 },
+    });
+    const systemsInput = { integrationIds: ["beszel-1"] };
+    const alertsInput = { integrationIds: ["beszel-1"], includeHistory: true, maxHistoryItems: 10 };
+
+    expect(matches("beszelSystemGrid", ["widget", "beszel", "getSystems"], systemsInput, scope)).toBe(true);
+    expect(matches("beszelSystemTable", ["widget", "beszel", "getSystems"], systemsInput, scope)).toBe(true);
+    expect(matches("beszelAlerts", ["widget", "beszel", "getSystems"], systemsInput, scope)).toBe(false);
+    expect(matches("beszelAlerts", ["widget", "beszel", "getAlerts"], alertsInput, scope)).toBe(true);
+    expect(matches("beszelSystemGrid", ["widget", "beszel", "getAlerts"], alertsInput, scope)).toBe(false);
+  });
+
+  test("owns only the active Beszel table detail query", () => {
+    const activeQuery: NormalizedWidgetQuery = {
+      path: ["widget", "beszel", "getSystemStats"],
+      input: {
+        integrationIds: ["beszel-1"],
+        systemId: "system-1",
+        timePeriod: "1h",
+        includeDocker: true,
+      },
+    };
+    const scope = createScope({ integrationIds: ["beszel-1"], runtimeQueries: [activeQuery] });
+
+    expect(matches("beszelSystemTable", activeQuery.path, activeQuery.input, scope)).toBe(true);
+    expect(
+      matches(
+        "beszelSystemTable",
+        activeQuery.path,
+        { ...(activeQuery.input as Record<string, unknown>), systemId: "system-2" },
+        scope,
+      ),
+    ).toBe(false);
+    expect(matches("beszelSystemGrid", activeQuery.path, activeQuery.input, scope)).toBe(false);
+  });
+
+  test("owns only Umami queries registered for the active view and layout", () => {
+    const eventQuery: NormalizedWidgetQuery = {
+      path: ["widget", "umami", "getMultiEventTimeSeries"],
+      input: { integrationId: "umami-1", websiteId: "site-1", timeFrame: "24h", eventNames: ["signup", "view"] },
+    };
+    const topPagesQuery: NormalizedWidgetQuery = {
+      path: ["widget", "umami", "getTopPages"],
+      input: { integrationId: "umami-1", websiteId: "site-1", timeFrame: "24h", limit: 5 },
+    };
+    const eventsScope = createScope({ runtimeQueries: [eventQuery] });
+    const advancedScope = createScope({ runtimeQueries: [eventQuery, topPagesQuery] });
+
+    expect(matches("umami", eventQuery.path, eventQuery.input, eventsScope)).toBe(true);
+    expect(
+      matches(
+        "umami",
+        eventQuery.path,
+        { integrationId: "umami-1", websiteId: "site-1", timeFrame: "24h", eventNames: ["view", "signup"] },
+        eventsScope,
+      ),
+    ).toBe(false);
+    expect(matches("umami", topPagesQuery.path, topPagesQuery.input, eventsScope)).toBe(false);
+    expect(matches("umami", topPagesQuery.path, topPagesQuery.input, advancedScope)).toBe(true);
+  });
+
+  test("maps Media Request status filters and separates list from stats", () => {
+    const listScope = createScope({
+      integrationIds: ["request-1"],
+      options: { statusFilter: [], recentDays: 30, linksTargetNewTab: true },
+    });
+    const allStatuses = ["pending", "approved", "declined", "failed", "completed"];
+
+    expect(
+      matches(
+        "mediaRequests-requestList",
+        ["widget", "mediaRequests", "getLatestRequests"],
+        { integrationIds: ["request-1"], statuses: allStatuses, recentDays: 30 },
+        listScope,
+      ),
+    ).toBe(true);
+    expect(
+      matches(
+        "mediaRequests-requestList",
+        ["widget", "mediaRequests", "getLatestRequests"],
+        { integrationIds: ["request-1"], statuses: ["pending"], recentDays: 30 },
+        listScope,
+      ),
+    ).toBe(false);
+    expect(
+      matches(
+        "mediaRequests-requestList",
+        ["widget", "mediaRequests", "getStats"],
+        { integrationIds: ["request-1"] },
+        listScope,
+      ),
+    ).toBe(false);
+    expect(
+      matches(
+        "mediaRequests-requestStats",
+        ["widget", "mediaRequests", "getStats"],
+        { integrationIds: ["request-1"] },
+        listScope,
+      ),
+    ).toBe(true);
+  });
+
+  test("separates Audio Stats stream details from Media Server filters", () => {
+    const statsQuery: NormalizedWidgetQuery = {
+      path: ["widget", "audioStats", "getStats"],
+      input: { integrationId: "audio-1" },
+    };
+    const streamsQuery: NormalizedWidgetQuery = {
+      path: ["widget", "mediaServer", "getCurrentStreams"],
+      input: { integrationIds: ["audio-1"], showOnlyPlaying: false },
+    };
+    const compactAudioScope = createScope({ integrationIds: ["audio-1"], runtimeQueries: [statsQuery] });
+    const advancedAudioScope = createScope({
+      integrationIds: ["audio-1"],
+      runtimeQueries: [statsQuery, streamsQuery],
+    });
+    const mediaScope = createScope({ integrationIds: ["audio-1"], options: { showOnlyPlaying: true } });
+
+    expect(matches("audioStats", statsQuery.path, statsQuery.input, compactAudioScope)).toBe(true);
+    expect(matches("audioStats", streamsQuery.path, streamsQuery.input, compactAudioScope)).toBe(false);
+    expect(matches("audioStats", streamsQuery.path, streamsQuery.input, advancedAudioScope)).toBe(true);
+    expect(
+      matches(
+        "audioStats",
+        streamsQuery.path,
+        { integrationIds: ["audio-1"], showOnlyPlaying: true },
+        advancedAudioScope,
+      ),
+    ).toBe(false);
+    expect(
+      matches("mediaServer", streamsQuery.path, { integrationIds: ["audio-1"], showOnlyPlaying: true }, mediaScope),
+    ).toBe(true);
+    expect(matches("mediaServer", streamsQuery.path, streamsQuery.input, mediaScope)).toBe(false);
+  });
+
+  test("uses each Calendar instance's registered month", () => {
+    const path = ["widget", "calendar", "findAllEvents"];
+    const januaryInput = {
+      integrationIds: ["calendar-1"],
+      month: 0,
+      year: 2026,
+      releaseType: [],
+      showUnmonitored: false,
+    };
+    const februaryInput = { ...januaryInput, month: 1 };
+    const januaryScope = createScope({ runtimeQueries: [{ path, input: januaryInput }] });
+    const februaryScope = createScope({ runtimeQueries: [{ path, input: februaryInput }] });
+
+    expect(matches("calendar", path, januaryInput, januaryScope)).toBe(true);
+    expect(matches("calendar", path, februaryInput, januaryScope)).toBe(false);
+    expect(matches("calendar", path, februaryInput, februaryScope)).toBe(true);
+  });
+
+  test("uses each Media Transcoding instance's registered page and geometry-derived page size", () => {
+    const path = ["widget", "mediaTranscoding", "getDataAsync"];
+    const firstPage = { integrationId: "transcode-1", pageSize: 8, page: 1 };
+    const secondPage = { integrationId: "transcode-1", pageSize: 12, page: 2 };
+    const firstScope = createScope({ runtimeQueries: [{ path, input: firstPage }] });
+    const secondScope = createScope({ runtimeQueries: [{ path, input: secondPage }] });
+
+    expect(matches("mediaTranscoding", path, firstPage, firstScope)).toBe(true);
+    expect(matches("mediaTranscoding", path, secondPage, firstScope)).toBe(false);
+    expect(matches("mediaTranscoding", path, secondPage, secondScope)).toBe(true);
+  });
+
+  test("matches only the Downloads query with the current integrations and limit", () => {
+    const scope = createScope({
+      integrationIds: ["sabnzbd-1", "qbittorrent-1"],
+      options: { limitPerIntegration: 25 },
+    });
+    const path = ["widget", "downloads", "getJobsAndStatuses"];
+
+    expect(
+      matches("downloads", path, { integrationIds: ["sabnzbd-1", "qbittorrent-1"], limitPerIntegration: 25 }, scope),
+    ).toBe(true);
+    expect(matches("downloads", path, { integrationIds: ["sabnzbd-1"], limitPerIntegration: 25 }, scope)).toBe(false);
+    expect(
+      matches("downloads", path, { integrationIds: ["sabnzbd-1", "qbittorrent-1"], limitPerIntegration: 50 }, scope),
+    ).toBe(false);
+    expect(
+      matches("downloads", ["widget", "downloads", "pause"], { integrationIds: ["sabnzbd-1", "qbittorrent-1"] }, scope),
+    ).toBe(false);
+  });
+
+  test("matches only the active Stock Price symbol and time frame", () => {
+    const scope = createScope({ options: { stock: "AAPL", timeRange: "1mo", timeInterval: "1d" } });
+    const path = ["widget", "stockPrice", "getPriceHistory"];
+
+    expect(matches("stockPrice", path, { stock: "AAPL", timeRange: "1mo", timeInterval: "1d" }, scope)).toBe(true);
+    expect(matches("stockPrice", path, { stock: "MSFT", timeRange: "1mo", timeInterval: "1d" }, scope)).toBe(false);
+    expect(matches("stockPrice", path, { stock: "AAPL", timeRange: "5d", timeInterval: "1d" }, scope)).toBe(false);
+  });
+
+  test("matches Weather by the coordinates sent to the location procedure", () => {
+    const scope = createScope({
+      options: { location: { name: "Paris", latitude: 48.85341, longitude: 2.3488 } },
+    });
+    const path = ["widget", "weather", "atLocation"];
+
+    expect(matches("weather", path, { latitude: 48.85341, longitude: 2.3488 }, scope)).toBe(true);
+    expect(matches("weather", path, { latitude: 51.5072, longitude: -0.1276 }, scope)).toBe(false);
+    expect(
+      matches("weather", ["widget", "weather", "forecast"], { latitude: 48.85341, longitude: 2.3488 }, scope),
+    ).toBe(false);
+  });
+
+  test("matches Clock weather only when enabled and at its configured coordinates", () => {
+    const path = ["widget", "weather", "atLocation"];
+    const location = { name: "Brisbane", latitude: -27.4698, longitude: 153.0251 };
+    const enabledScope = createScope({ options: { showWeather: true, weatherLocation: location } });
+    const disabledScope = createScope({ options: { showWeather: false, weatherLocation: location } });
+
+    expect(matches("clock", path, { latitude: -27.4698, longitude: 153.0251 }, enabledScope)).toBe(true);
+    expect(matches("clock", path, { latitude: 48.85341, longitude: 2.3488 }, enabledScope)).toBe(false);
+    expect(matches("clock", path, { latitude: -27.4698, longitude: 153.0251 }, disabledScope)).toBe(false);
+  });
+
+  test("matches Minecraft Server Status by the full input passed to useQuery", () => {
+    const scope = createScope({
+      options: { title: "Survival", domain: "play.example.com", isBedrockServer: false },
+    });
+    const path = ["widget", "minecraft", "getServerStatus"];
+
+    expect(
+      matches(
+        "minecraftServerStatus",
+        path,
+        { title: "Survival", domain: "play.example.com", isBedrockServer: false },
+        scope,
+      ),
+    ).toBe(true);
+    expect(
+      matches(
+        "minecraftServerStatus",
+        path,
+        { title: "Creative", domain: "play.example.com", isBedrockServer: false },
+        scope,
+      ),
+    ).toBe(false);
+    expect(
+      matches(
+        "minecraftServerStatus",
+        path,
+        { title: "Survival", domain: "bedrock.example.com", isBedrockServer: true },
+        scope,
+      ),
+    ).toBe(false);
+  });
+
+  test("matches Notifications by integrations and the full input passed to useQuery", () => {
+    const scope = createScope({ integrationIds: ["ntfy-1"], options: { hideLogos: true } });
+    const path = ["widget", "notifications", "getNotifications"];
+
+    expect(matches("notifications", path, { hideLogos: true, integrationIds: ["ntfy-1"] }, scope)).toBe(true);
+    expect(matches("notifications", path, { hideLogos: false, integrationIds: ["ntfy-1"] }, scope)).toBe(false);
+    expect(matches("notifications", path, { hideLogos: true, integrationIds: ["gotify-1"] }, scope)).toBe(false);
+    expect(
+      matches("notifications", ["widget", "notifications", "dismiss"], { integrationIds: ["ntfy-1"] }, scope),
+    ).toBe(false);
+  });
+
+  test("keeps renamed RSS input fields item-specific", () => {
+    const scope = createScope({
+      integrationIds: [],
+      options: { feedUrls: ["https://feed.example/rss"], maximumAmountPosts: 100 },
+    });
+    const path = ["widget", "rssFeed", "getFeeds"];
+
+    expect(matches("rssFeed", path, { urls: ["https://feed.example/rss"], maximumAmountPosts: 100 }, scope)).toBe(true);
+    expect(matches("rssFeed", path, { urls: ["https://other.example/rss"], maximumAmountPosts: 100 }, scope)).toBe(
+      false,
+    );
+  });
+
+  test("generic fallback ignores transformed non-identity inputs", () => {
+    const scope = createScope({ integrationIds: ["integration-1"], options: { pageSize: 10 } });
+    const definitionKeys = [[["widget", "example"]]] as const;
+
+    expect(
+      matchesWidgetItemQuery(
+        [["widget", "example", "getData"], { input: { integrationIds: ["integration-1"], pageSize: 50 } }],
+        definitionKeys,
+        scope,
+      ),
+    ).toBe(true);
+  });
+});
diff --git a/apps/nextjs/src/components/board/items/widget-query-scope.ts b/apps/nextjs/src/components/board/items/widget-query-scope.ts
new file mode 100644
index 000000000..fd7c9edb3
--- /dev/null
+++ b/apps/nextjs/src/components/board/items/widget-query-scope.ts
@@ -0,0 +1,83 @@
+import type { QueryKey } from "@tanstack/react-query";
+
+import type { WidgetQueryMatcher, WidgetQueryMatcherScope } from "@homarr/widgets";
+import { normalizeWidgetQuery, widgetQueryValueEquals } from "@homarr/widgets";
+
+export const matchesWidgetItemQuery = (
+  queryKey: QueryKey,
+  widgetQueryKeys: readonly QueryKey[],
+  scope: WidgetQueryMatcherScope,
+  queryMatcher?: WidgetQueryMatcher,
+) => {
+  const query = normalizeWidgetQuery(queryKey);
+  if (!query || !widgetQueryKeys.some((candidate) => matchesDefinitionPath(query.path, candidate))) return false;
+  if (queryMatcher) return queryMatcher(query, scope);
+
+  return matchesQueryInput(query.input, scope);
+};
+
+const matchesDefinitionPath = (path: readonly string[], candidate: QueryKey) => {
+  const candidatePath = candidate[0];
+  return (
+    Array.isArray(candidatePath) &&
+    candidatePath.every((part, index) => typeof part === "string" && path[index] === part)
+  );
+};
+
+const matchesQueryInput = (input: unknown, scope: WidgetQueryMatcherScope) => {
+  if (input == null) return true;
+  if (Array.isArray(input)) {
+    return widgetQueryValueEquals(input, scope.integrationIds) || containsValue(scope.options, input);
+  }
+
+  if (!isRecord(input)) {
+    return (
+      input === scope.itemId ||
+      input === scope.boardId ||
+      scope.integrationIds.includes(String(input)) ||
+      containsValue(scope.options, input)
+    );
+  }
+
+  for (const [key, value] of Object.entries(input)) {
+    if (key === "itemId") {
+      if (value !== scope.itemId) return false;
+      continue;
+    }
+    if (key === "boardId") {
+      if (value !== scope.boardId) return false;
+      continue;
+    }
+    if (key === "integrationId") {
+      if (!scope.integrationIds.includes(String(value))) return false;
+      continue;
+    }
+    if (key === "integrationIds") {
+      if (!widgetQueryValueEquals(value, scope.integrationIds)) return false;
+      continue;
+    }
+
+    if (isIdentityKey(key) && !matchesAnyScopedValue(value, scope)) return false;
+  }
+
+  return true;
+};
+
+const matchesAnyScopedValue = (value: unknown, scope: WidgetQueryMatcherScope) =>
+  value === scope.itemId ||
+  value === scope.boardId ||
+  scope.integrationIds.includes(String(value)) ||
+  containsValue(scope.options, value);
+
+const isIdentityKey = (key: string) => key === "id" || key.endsWith("Id") || key.endsWith("Ids");
+
+const containsValue = (container: unknown, expected: unknown, seen = new WeakSet<object>()): boolean => {
+  if (widgetQueryValueEquals(container, expected)) return true;
+  if (container === null || typeof container !== "object" || seen.has(container)) return false;
+  seen.add(container);
+
+  return Object.values(container).some((value) => containsValue(value, expected, seen));
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === "object" && !Array.isArray(value);
diff --git a/apps/nextjs/src/components/board/layout/README.md b/apps/nextjs/src/components/board/layout/README.md
new file mode 100644
index 000000000..8a12bc180
--- /dev/null
+++ b/apps/nextjs/src/components/board/layout/README.md
@@ -0,0 +1,27 @@
+# Fixed dashboard geometry
+
+The board uses fixed logical units:
+
+- one `1 × 1` item is exactly `200 × 200` logical pixels;
+- the gap is always `24` logical pixels, giving a `224` pixel track pitch;
+- multi-cell items include the gaps between their cells (`2 × 1` is `424 × 200`);
+- the canvas is transformed once with one uniform scale derived from its available width.
+
+Items keep the same logical dimensions at every viewport. The viewport reserves
+the painted size while the inner canvas remains at its logical dimensions, so a
+widget's `clientWidth`, `clientHeight`, and `ResizeObserver` measurements stay
+stable.
+
+The read-only renderer should:
+
+1. convert persisted `xOffset/yOffset/width/height` values to `x/y/w/h`;
+2. apply collapsed container heights and call `getCollapsedDisplayLayout`;
+3. render DOM children in `sortGridPlacementsForReadingOrder` order;
+4. position children with `getLogicalItemStyle`;
+5. wrap them with `getScaledCanvasStyles` and the read-only semantic helpers.
+
+Edit mode can use any interaction library, but its final coordinates should be
+normalized through this core. `placeGridItem` is the deterministic
+keyboard/numeric fallback: the active item is pinned while collisions move out
+of the way and all other items compact vertically. Pointer coordinates from a
+scaled editor can be converted with `toLogicalCanvasPoint`.
diff --git a/apps/nextjs/src/components/board/layout/board-lanes.ts b/apps/nextjs/src/components/board/layout/board-lanes.ts
new file mode 100644
index 000000000..b7345fa10
--- /dev/null
+++ b/apps/nextjs/src/components/board/layout/board-lanes.ts
@@ -0,0 +1,94 @@
+import type { BoardLane } from "@homarr/definitions";
+import { getBoardLaneColumnCount, getRootSectionLane } from "@homarr/definitions";
+
+import type { Board, EmptySection } from "~/app/[locale]/boards/_types";
+import { getLogicalTrackSize, getLayoutRowCount, normalizeGridPlacement } from "./geometry";
+import { getCollapsedDisplayLayout } from "./reflow";
+import type { GridPlacement } from "./types";
+
+export { getBoardLaneColumnCount };
+
+export const getRootSectionForLane = (board: Board, lane: BoardLane): EmptySection | undefined => {
+  const roots = board.sections.filter(
+    (section): section is EmptySection => section.kind === "empty" && getRootSectionLane(section.xOffset) === lane,
+  );
+  if (roots.length > 1) {
+    throw new Error(`Board "${board.id}" has multiple ${lane} canvas roots`);
+  }
+
+  return roots[0];
+};
+
+export const getInitialBoardLogicalHeight = (board: Board, layoutId: string) => {
+  const layout = board.layouts.find((candidate) => candidate.id === layoutId);
+  if (!layout) return 0;
+
+  const rowCounts = (["left", "main", "right"] as const).flatMap((lane) => {
+    const columnCount = getBoardLaneColumnCount(layout, lane);
+    const root = getRootSectionForLane(board, lane);
+    if (columnCount === 0 || !root) return [];
+
+    const placements: GridPlacement[] = [
+      ...board.items.flatMap((item) => {
+        const itemLayout = item.layouts.find(
+          (candidate) => candidate.layoutId === layoutId && candidate.sectionId === root.id,
+        );
+        return itemLayout
+          ? [
+              normalizeGridPlacement(
+                {
+                  id: item.id,
+                  type: "item" as const,
+                  x: itemLayout.xOffset,
+                  y: itemLayout.yOffset,
+                  w: itemLayout.width,
+                  h: itemLayout.height,
+                },
+                columnCount,
+              ),
+            ]
+          : [];
+      }),
+      ...board.sections.flatMap((section) => {
+        if (section.kind !== "container") return [];
+        const sectionLayout = section.layouts.find(
+          (candidate) => candidate.layoutId === layoutId && candidate.parentSectionId === root.id,
+        );
+        return sectionLayout
+          ? [
+              normalizeGridPlacement(
+                {
+                  id: section.id,
+                  type: "section" as const,
+                  x: sectionLayout.xOffset,
+                  y: sectionLayout.yOffset,
+                  w: sectionLayout.width,
+                  h: sectionLayout.height,
+                },
+                columnCount,
+              ),
+            ]
+          : [];
+      }),
+    ];
+    const collapsedSectionIds = new Set(
+      board.sections
+        .filter(
+          (section) =>
+            section.kind === "container" &&
+            section.collapsed &&
+            section.options.collapsible &&
+            placements.some((placement) => placement.id === section.id),
+        )
+        .map((section) => section.id),
+    );
+    const displayPlacements =
+      collapsedSectionIds.size > 0
+        ? getCollapsedDisplayLayout(placements, { columnCount, collapsedItemIds: collapsedSectionIds })
+        : placements;
+
+    return [getLayoutRowCount(displayPlacements)];
+  });
+
+  return getLogicalTrackSize(Math.max(0, ...rowCounts));
+};
diff --git a/apps/nextjs/src/components/board/layout/constants.ts b/apps/nextjs/src/components/board/layout/constants.ts
new file mode 100644
index 000000000..9c3103b4b
--- /dev/null
+++ b/apps/nextjs/src/components/board/layout/constants.ts
@@ -0,0 +1,10 @@
+/**
+ * A grid unit is a fixed logical size. The canvas is scaled as one surface;
+ * individual cards never change their internal layout at different viewports.
+ */
+export const LOGICAL_GRID_CELL_SIZE = 200;
+export const LOGICAL_GRID_GAP = 24;
+export const LOGICAL_GRID_PITCH = LOGICAL_GRID_CELL_SIZE + LOGICAL_GRID_GAP;
+export const MIN_ACCESSIBLE_CANVAS_SCALE = 0.75;
+
+export const COLLAPSED_SECTION_ROW_COUNT = 0.5;
diff --git a/apps/nextjs/src/components/board/layout/geometry.ts b/apps/nextjs/src/components/board/layout/geometry.ts
new file mode 100644
index 000000000..32b7fced4
--- /dev/null
+++ b/apps/nextjs/src/components/board/layout/geometry.ts
@@ -0,0 +1,54 @@
+import type { CSSProperties } from "react";
+
+import { LOGICAL_GRID_CELL_SIZE, LOGICAL_GRID_GAP, LOGICAL_GRID_PITCH } from "./constants";
+import type { GridCoordinates, GridPlacement } from "./types";
+
+export const getLogicalTrackSize = (trackCount: number) => {
+  const normalizedTrackCount = Math.max(0, toFiniteNumber(trackCount, "trackCount"));
+  if (normalizedTrackCount === 0) return 0;
+
+  return normalizedTrackCount * LOGICAL_GRID_CELL_SIZE + (normalizedTrackCount - 1) * LOGICAL_GRID_GAP;
+};
+
+export const getLogicalItemStyle = ({ x, y, w, h }: GridCoordinates): CSSProperties => ({
+  position: "absolute",
+  left: x * LOGICAL_GRID_PITCH,
+  top: y * LOGICAL_GRID_PITCH,
+  width: getLogicalTrackSize(w),
+  height: getLogicalTrackSize(h),
+});
+
+export const getLayoutRowCount = (placements: readonly GridCoordinates[]) =>
+  placements.reduce((rowCount, placement) => Math.max(rowCount, placement.y + placement.h), 0);
+
+export const normalizeGridPlacement = <TPlacement extends GridPlacement>(
+  placement: TPlacement,
+  columnCount: number,
+): TPlacement => {
+  const normalizedColumnCount = toPositiveInteger(columnCount, "columnCount");
+  const width = Math.min(toPositiveInteger(placement.w, "placement.w"), normalizedColumnCount);
+  const x = Math.min(Math.max(0, toNonNegativeInteger(placement.x)), normalizedColumnCount - width);
+
+  return {
+    ...placement,
+    x,
+    y: toNonNegativeInteger(placement.y),
+    w: width,
+    h: toPositiveInteger(placement.h, "placement.h"),
+  };
+};
+
+const toNonNegativeInteger = (value: number) => Math.max(0, Math.trunc(toFiniteNumber(value, "value")));
+
+const toPositiveInteger = (value: number, name: string) => {
+  const integer = Math.trunc(toFiniteNumber(value, name));
+  if (integer < 1) throw new RangeError(`${name} must be at least 1`);
+
+  return integer;
+};
+
+const toFiniteNumber = (value: number, name: string) => {
+  if (!Number.isFinite(value)) throw new TypeError(`${name} must be finite`);
+
+  return value;
+};
diff --git a/apps/nextjs/src/components/board/layout/index.ts b/apps/nextjs/src/components/board/layout/index.ts
new file mode 100644
index 000000000..6ed67df39
--- /dev/null
+++ b/apps/nextjs/src/components/board/layout/index.ts
@@ -0,0 +1,6 @@
+export * from "./constants";
+export * from "./board-lanes";
+export * from "./geometry";
+export * from "./reflow";
+export * from "./semantics";
+export * from "./types";
diff --git a/apps/nextjs/src/components/board/layout/reflow.ts b/apps/nextjs/src/components/board/layout/reflow.ts
new file mode 100644
index 000000000..4aafd7611
--- /dev/null
+++ b/apps/nextjs/src/components/board/layout/reflow.ts
@@ -0,0 +1,207 @@
+import { COLLAPSED_SECTION_ROW_COUNT } from "./constants";
+import { normalizeGridPlacement } from "./geometry";
+import type { GridPlacement } from "./types";
+
+interface ReflowOptions {
+  columnCount: number;
+  /**
+   * A pinned item keeps its requested x/y while every other item compacts
+   * around it. Use this for the item currently being moved or resized.
+   */
+  pinnedItemId?: string;
+}
+
+interface CollapsedLayoutOptions {
+  columnCount: number;
+  collapsedItemIds: ReadonlySet<string>;
+  collapsedRowCount?: number;
+}
+
+export const doGridPlacementsOverlap = (first: GridPlacement, second: GridPlacement) =>
+  first.x < second.x + second.w &&
+  first.x + first.w > second.x &&
+  first.y < second.y + second.h &&
+  first.y + first.h > second.y;
+
+/**
+ * Resolves overlaps and vertically compacts items. Ordering is based on the
+ * persisted position and stable id, so the result does not depend on React or
+ * database array order.
+ */
+export const reflowVerticalLayout = <TPlacement extends GridPlacement>(
+  placements: readonly TPlacement[],
+  { columnCount, pinnedItemId }: ReflowOptions,
+): TPlacement[] => {
+  assertUniqueIds(placements);
+
+  const normalized = placements.map((placement) => normalizeGridPlacement(placement, columnCount));
+  const pinned = pinnedItemId ? normalized.find((placement) => placement.id === pinnedItemId) : undefined;
+
+  if (pinnedItemId && !pinned) {
+    throw new Error(`Pinned grid item "${pinnedItemId}" does not exist`);
+  }
+
+  const placed: TPlacement[] = pinned ? [pinned] : [];
+  const candidates = normalized.filter((placement) => placement.id !== pinnedItemId).toSorted(comparePlacements);
+
+  for (const candidate of candidates) {
+    placed.push({
+      ...candidate,
+      y: findFirstAvailableRow(candidate, placed),
+    });
+  }
+
+  const byId = new Map(placed.map((placement) => [placement.id, placement]));
+  return normalized.map((placement) => getRequiredPlacement(byId, placement.id));
+};
+
+/**
+ * Produces the view-only layout after inline containers are collapsed. Only
+ * display geometry changes; callers retain the persisted expanded height.
+ */
+export const getCollapsedDisplayLayout = <TPlacement extends GridPlacement>(
+  placements: readonly TPlacement[],
+  { columnCount, collapsedItemIds, collapsedRowCount = COLLAPSED_SECTION_ROW_COUNT }: CollapsedLayoutOptions,
+): TPlacement[] => {
+  if (!Number.isFinite(collapsedRowCount) || collapsedRowCount <= 0) {
+    throw new RangeError("collapsedRowCount must be positive and finite");
+  }
+
+  const normalized = placements.map((placement) => normalizeGridPlacement(placement, columnCount));
+  const displayPlacements = normalized.map((placement) =>
+    collapsedItemIds.has(placement.id)
+      ? {
+          ...placement,
+          h: collapsedRowCount,
+        }
+      : placement,
+  );
+
+  return reflowCollapsedDisplayLayout(normalized, displayPlacements, collapsedItemIds, collapsedRowCount);
+};
+
+/**
+ * Applies the requested placement and pins it while neighbors compact into
+ * free space or move down. This is the deterministic fallback used by
+ * keyboard/numeric editing and can also validate a drag library result.
+ */
+export const placeGridItem = <TPlacement extends GridPlacement>(
+  placements: readonly TPlacement[],
+  nextPlacement: TPlacement,
+  columnCount: number,
+) => {
+  if (!placements.some((placement) => placement.id === nextPlacement.id)) {
+    throw new Error(`Grid item "${nextPlacement.id}" does not exist`);
+  }
+
+  return reflowVerticalLayout(
+    placements.map((placement) => (placement.id === nextPlacement.id ? nextPlacement : placement)),
+    {
+      columnCount,
+      pinnedItemId: nextPlacement.id,
+    },
+  );
+};
+
+export const sortGridPlacementsForReadingOrder = <TPlacement extends GridPlacement>(
+  placements: readonly TPlacement[],
+) => placements.toSorted(comparePlacements);
+
+const findFirstAvailableRow = (candidate: GridPlacement, placed: readonly GridPlacement[]) => {
+  let y = 0;
+  for (;;) {
+    const atRow = { ...candidate, y };
+    const collisions = placed.filter((placement) => doGridPlacementsOverlap(atRow, placement));
+    if (collisions.length === 0) return y;
+
+    y = Math.max(...collisions.map((placement) => placement.y + placement.h));
+  }
+};
+
+const reflowCollapsedDisplayLayout = <TPlacement extends GridPlacement>(
+  expandedPlacements: readonly TPlacement[],
+  displayPlacements: readonly TPlacement[],
+  collapsedItemIds: ReadonlySet<string>,
+  collapsedRowCount: number,
+): TPlacement[] => {
+  assertUniqueIds(expandedPlacements);
+  const displayById = new Map(displayPlacements.map((placement) => [placement.id, placement]));
+  const collapsedPlacements = expandedPlacements.filter((placement) => collapsedItemIds.has(placement.id));
+  const placed: TPlacement[] = [];
+
+  for (const expandedPlacement of expandedPlacements.toSorted(comparePlacements)) {
+    const candidate = getRequiredPlacement(displayById, expandedPlacement.id);
+    const verticalShift = getCollapsedVerticalShift(expandedPlacement, collapsedPlacements, collapsedRowCount);
+    placed.push({
+      ...candidate,
+      y: findFirstAvailableRowAtOrAfter(candidate, placed, Math.max(0, candidate.y - verticalShift)),
+    });
+  }
+
+  const byId = new Map(placed.map((placement) => [placement.id, placement]));
+  return displayPlacements.map((placement) => getRequiredPlacement(byId, placement.id));
+};
+
+const getCollapsedVerticalShift = (
+  candidate: GridPlacement,
+  collapsedPlacements: readonly GridPlacement[],
+  collapsedRowCount: number,
+) => {
+  const removedIntervals = collapsedPlacements
+    .filter(
+      (collapsed) =>
+        collapsed.id !== candidate.id &&
+        collapsed.y + collapsed.h <= candidate.y &&
+        doGridPlacementsOverlapHorizontally(candidate, collapsed),
+    )
+    .map((collapsed) => ({ start: collapsed.y + collapsedRowCount, end: collapsed.y + collapsed.h }))
+    .toSorted((first, second) => first.start - second.start || first.end - second.end);
+
+  let shift = 0;
+  let intervalEnd = Number.NEGATIVE_INFINITY;
+  for (const interval of removedIntervals) {
+    const start = Math.max(interval.start, intervalEnd);
+    if (interval.end > start) shift += interval.end - start;
+    intervalEnd = Math.max(intervalEnd, interval.end);
+  }
+  return shift;
+};
+
+const doGridPlacementsOverlapHorizontally = (first: GridPlacement, second: GridPlacement) =>
+  first.x < second.x + second.w && first.x + first.w > second.x;
+
+const findFirstAvailableRowAtOrAfter = (
+  candidate: GridPlacement,
+  placed: readonly GridPlacement[],
+  minimumRow: number,
+) => {
+  let y = minimumRow;
+  for (;;) {
+    const atRow = { ...candidate, y };
+    const collisions = placed.filter((placement) => doGridPlacementsOverlap(atRow, placement));
+    if (collisions.length === 0) return y;
+
+    y = Math.max(...collisions.map((placement) => placement.y + placement.h));
+  }
+};
+
+const comparePlacements = (first: GridPlacement, second: GridPlacement) =>
+  first.y - second.y || first.x - second.x || (first.id === second.id ? 0 : first.id < second.id ? -1 : 1);
+
+const assertUniqueIds = (placements: readonly GridPlacement[]) => {
+  const ids = new Set<string>();
+  for (const placement of placements) {
+    if (ids.has(placement.id)) throw new Error(`Duplicate grid item id "${placement.id}"`);
+    ids.add(placement.id);
+  }
+};
+
+const getRequiredPlacement = <TPlacement extends GridPlacement>(
+  placements: ReadonlyMap<string, TPlacement>,
+  id: string,
+) => {
+  const placement = placements.get(id);
+  if (!placement) throw new Error(`Grid item "${id}" was lost during layout`);
+
+  return placement;
+};
diff --git a/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css b/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css
new file mode 100644
index 000000000..6c98e40a2
--- /dev/null
+++ b/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css
@@ -0,0 +1,52 @@
+.viewport {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: visible;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+}
+
+.viewport[data-board-hydrated="false"] {
+  overflow: clip;
+}
+
+.sizer {
+  position: relative;
+}
+
+.canvas {
+  position: absolute;
+  inset: 0 auto auto 0;
+  transform-origin: top left;
+  will-change: transform;
+
+  /*
+   * Keep dashboard UI at its normal readable density while the fixed canvas
+   * is fitted below 100%. Above 100%, the canvas still behaves like browser
+   * zoom and enlarges everything together.
+   */
+  --mantine-scale: var(--board-canvas-ui-scale, 1);
+  --mantine-spacing-xs: calc(0.625rem * var(--board-canvas-ui-scale, 1));
+  --mantine-spacing-sm: calc(0.75rem * var(--board-canvas-ui-scale, 1));
+  --mantine-spacing-md: calc(1rem * var(--board-canvas-ui-scale, 1));
+  --mantine-spacing-lg: calc(1.25rem * var(--board-canvas-ui-scale, 1));
+  --mantine-spacing-xl: calc(2rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-xs: calc(0.75rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-sm: calc(0.875rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-md: calc(1rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-lg: calc(1.125rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-xl: calc(1.25rem * var(--board-canvas-ui-scale, 1));
+  --mantine-h1-font-size: calc(2.125rem * var(--board-canvas-ui-scale, 1));
+  --mantine-h2-font-size: calc(1.625rem * var(--board-canvas-ui-scale, 1));
+  --mantine-h3-font-size: calc(1.375rem * var(--board-canvas-ui-scale, 1));
+  --mantine-h4-font-size: calc(1.125rem * var(--board-canvas-ui-scale, 1));
+  --mantine-h5-font-size: calc(1rem * var(--board-canvas-ui-scale, 1));
+  --mantine-h6-font-size: calc(0.875rem * var(--board-canvas-ui-scale, 1));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .canvas {
+    will-change: auto;
+  }
+}
diff --git a/apps/nextjs/src/components/board/layout/scaled-board-canvas.tsx b/apps/nextjs/src/components/board/layout/scaled-board-canvas.tsx
new file mode 100644
index 000000000..3d5de2b72
--- /dev/null
+++ b/apps/nextjs/src/components/board/layout/scaled-board-canvas.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { Box } from "@mantine/core";
+import { useElementSize } from "@mantine/hooks";
+
+import { MIN_ACCESSIBLE_CANVAS_SCALE } from "./constants";
+import classes from "./scaled-board-canvas.module.css";
+
+export { MIN_ACCESSIBLE_CANVAS_SCALE };
+
+const BoardCanvasScaleContext = createContext(1);
+
+export const useBoardCanvasScale = () => useContext(BoardCanvasScaleContext);
+
+export const calculateBoardCanvasScale = (availableWidth: number, logicalWidth: number) => {
+  if (!Number.isFinite(availableWidth) || !Number.isFinite(logicalWidth)) return 1;
+  if (availableWidth <= 0 || logicalWidth <= 0) return 1;
+
+  return Math.max(MIN_ACCESSIBLE_CANVAS_SCALE, availableWidth / logicalWidth);
+};
+
+export const calculateBoardUiScale = (canvasScale: number) => {
+  if (!Number.isFinite(canvasScale) || canvasScale <= 0) return 1;
+
+  return canvasScale < 1 ? 1 / canvasScale : 1;
+};
+
+interface ScaledBoardCanvasProps {
+  logicalWidth: number;
+  initialLogicalHeight: number;
+  initialAvailableWidth: number;
+  label: string;
+}
+
+/**
+ * Scales the complete board as one surface while keeping widget layout in
+ * fixed logical pixels. The scale floor deliberately allows horizontal
+ * overflow so browser zoom still magnifies content instead of being cancelled
+ * by responsive downscaling.
+ */
+export const ScaledBoardCanvas = ({
+  logicalWidth,
+  initialLogicalHeight,
+  initialAvailableWidth,
+  label,
+  children,
+}: PropsWithChildren<ScaledBoardCanvasProps>) => {
+  const { ref: viewportRef, width: availableWidth } = useElementSize<HTMLDivElement>();
+  const { ref: canvasRef, height: logicalHeight } = useElementSize<HTMLDivElement>();
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  useEffect(() => {
+    setIsHydrated(true);
+  }, []);
+
+  const resolvedAvailableWidth = availableWidth > 0 ? availableWidth : initialAvailableWidth;
+  const resolvedLogicalHeight = logicalHeight > 0 ? logicalHeight : initialLogicalHeight;
+  const scale = useMemo(
+    () => calculateBoardCanvasScale(resolvedAvailableWidth, logicalWidth),
+    [logicalWidth, resolvedAvailableWidth],
+  );
+  const uiScale = calculateBoardUiScale(scale);
+  const visualWidth = logicalWidth * scale;
+  const hasHorizontalOverflow = resolvedAvailableWidth > 0 && visualWidth - resolvedAvailableWidth > 0.5;
+
+  return (
+    <Box
+      component="section"
+      ref={viewportRef}
+      className={classes.viewport}
+      data-testid="board-canvas"
+      data-board-hydrated={isHydrated ? "true" : "false"}
+      data-canvas-scale={scale}
+      data-canvas-overflow={hasHorizontalOverflow ? "true" : "false"}
+      data-canvas-initial-height={initialLogicalHeight}
+      data-canvas-initial-width={initialAvailableWidth}
+      aria-label={label}
+    >
+      <Box className={classes.sizer} w={visualWidth} h={resolvedLogicalHeight * scale}>
+        <Box
+          ref={canvasRef}
+          className={classes.canvas}
+          w={logicalWidth}
+          style={{
+            "--board-canvas-ui-scale": uiScale,
+            transform: `scale(${scale})`,
+          }}
+        >
+          <BoardCanvasScaleContext.Provider value={scale}>{children}</BoardCanvasScaleContext.Provider>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
diff --git a/apps/nextjs/src/components/board/layout/semantics.ts b/apps/nextjs/src/components/board/layout/semantics.ts
new file mode 100644
index 000000000..8fed63d97
--- /dev/null
+++ b/apps/nextjs/src/components/board/layout/semantics.ts
@@ -0,0 +1,56 @@
+import type { GridPlacement } from "./types";
+
+interface ReadonlyCanvasAttributesInput {
+  label: string;
+}
+
+interface EditableCanvasAttributesInput extends ReadonlyCanvasAttributesInput {
+  columnCount: number;
+  rowCount: number;
+}
+
+interface EditableGridCellAttributesInput {
+  label: string;
+  placement: GridPlacement;
+}
+
+/**
+ * View mode is a labelled region, not an ARIA grid. It keeps the native
+ * semantics and focus behavior of links, buttons and widget controls inside.
+ */
+export const getReadonlyCanvasAttributes = ({ label }: ReadonlyCanvasAttributesInput) =>
+  ({
+    role: "region",
+    "aria-label": label,
+    "data-grid-readonly": "true",
+  }) as const;
+
+export const getReadonlyGridItemAttributes = (placement: GridPlacement) =>
+  ({
+    "data-grid-id": placement.id,
+    "data-grid-x": placement.x,
+    "data-grid-y": placement.y,
+    "data-grid-w": placement.w,
+    "data-grid-h": placement.h,
+  }) as const;
+
+/**
+ * Edit mode remains a labelled region. Dashboard placement is not an ARIA
+ * data grid: arrow keys edit geometry rather than navigate rows and columns.
+ * Each tile is one focusable direct-manipulation surface, while controls inside
+ * it keep their native semantics and tab order.
+ */
+export const getEditableCanvasAttributes = ({ label }: EditableCanvasAttributesInput) =>
+  ({
+    role: "region",
+    "aria-label": label,
+    "data-grid-editable": "true",
+  }) as const;
+
+export const getEditableGridCellAttributes = ({ label, placement }: EditableGridCellAttributesInput) =>
+  ({
+    role: "group",
+    "aria-label": label,
+    tabIndex: 0,
+    ...getReadonlyGridItemAttributes(placement),
+  }) as const;
diff --git a/apps/nextjs/src/components/board/layout/test/board-lanes.spec.ts b/apps/nextjs/src/components/board/layout/test/board-lanes.spec.ts
new file mode 100644
index 000000000..80ec9c8c3
--- /dev/null
+++ b/apps/nextjs/src/components/board/layout/test/board-lanes.spec.ts
@@ -0,0 +1,115 @@
+import { describe, expect, test } from "vitest";
+
+import type { Board } from "~/app/[locale]/boards/_types";
+import { BoardMockBuilder } from "~/components/board/items/actions/test/mocks/board-mock";
+import { ContainerSectionMockBuilder } from "~/components/board/items/actions/test/mocks/container-section-mock";
+import { EmptySectionMockBuilder } from "~/components/board/items/actions/test/mocks/empty-section-mock";
+import { ItemMockBuilder } from "~/components/board/items/actions/test/mocks/item-mock";
+import { getBoardLaneColumnCount, getInitialBoardLogicalHeight, getRootSectionForLane } from "../index";
+
+describe("board lanes", () => {
+  test("gutters consume columns from the main canvas", () => {
+    const layout = {
+      id: "layout",
+      name: "Base",
+      columnCount: 12,
+      leftGutterColumnCount: 2,
+      rightGutterColumnCount: 3,
+      breakpoint: 0,
+      role: "base",
+    } satisfies Board["layouts"][number];
+
+    expect(getBoardLaneColumnCount(layout, "left")).toBe(2);
+    expect(getBoardLaneColumnCount(layout, "main")).toBe(7);
+    expect(getBoardLaneColumnCount(layout, "right")).toBe(3);
+  });
+
+  test("clamps invalid gutters while preserving one main column", () => {
+    const layout = {
+      id: "layout",
+      name: "Base",
+      columnCount: 4,
+      leftGutterColumnCount: 3,
+      rightGutterColumnCount: 3,
+      breakpoint: 0,
+      role: "base",
+    } satisfies Board["layouts"][number];
+
+    expect(getBoardLaneColumnCount(layout, "left")).toBe(3);
+    expect(getBoardLaneColumnCount(layout, "main")).toBe(1);
+    expect(getBoardLaneColumnCount(layout, "right")).toBe(0);
+  });
+
+  test("rejects ambiguous duplicate roots", () => {
+    const board = new BoardMockBuilder()
+      .addSection(new EmptySectionMockBuilder({ id: "main-a" }).build())
+      .addSection(new EmptySectionMockBuilder({ id: "main-b" }).build())
+      .build();
+
+    expect(() => getRootSectionForLane(board, "main")).toThrow("multiple main canvas roots");
+  });
+
+  test("calculates a stable server height from the tallest visible lane", () => {
+    const layoutId = "layout";
+    const mainSectionId = "main";
+    const leftSectionId = "left";
+    const containerSectionId = "container";
+    const board = new BoardMockBuilder()
+      .addSection(new EmptySectionMockBuilder({ id: mainSectionId }).build())
+      .addSection(new EmptySectionMockBuilder({ id: leftSectionId, xOffset: -1 }).build())
+      .addSection(
+        new ContainerSectionMockBuilder({
+          id: containerSectionId,
+          collapsed: true,
+          options: { collapsible: true },
+        })
+          .addLayout({
+            layoutId,
+            parentSectionId: mainSectionId,
+            xOffset: 0,
+            yOffset: 0,
+            width: 2,
+            height: 3,
+          })
+          .build(),
+      )
+      .addItem(
+        new ItemMockBuilder()
+          .addLayout({
+            layoutId,
+            sectionId: mainSectionId,
+            xOffset: 0,
+            yOffset: 3,
+            width: 1,
+            height: 1,
+          })
+          .build(),
+      )
+      .addItem(
+        new ItemMockBuilder()
+          .addLayout({
+            layoutId,
+            sectionId: leftSectionId,
+            xOffset: 0,
+            yOffset: 0,
+            width: 1,
+            height: 4,
+          })
+          .build(),
+      )
+      .build();
+    board.layouts = [
+      {
+        id: layoutId,
+        name: "Base",
+        columnCount: 8,
+        leftGutterColumnCount: 1,
+        rightGutterColumnCount: 0,
+        breakpoint: 0,
+        role: "base",
+      },
+    ];
+
+    expect(getInitialBoardLogicalHeight(board, layoutId)).toBe(872);
+  });
+});
diff --git a/apps/nextjs/src/components/board/layout/test/geometry.spec.ts b/apps/nextjs/src/components/board/layout/test/geometry.spec.ts
new file mode 100644
index 000000000..66f084703
--- /dev/null
+++ b/apps/nextjs/src/components/board/layout/test/geometry.spec.ts
@@ -0,0 +1,27 @@
+import { describe, expect, test } from "vitest";
+
+import { getLayoutRowCount, getLogicalItemStyle, getLogicalTrackSize, normalizeGridPlacement } from "../index";
+
+describe("fixed dashboard geometry", () => {
+  test("keeps a 1x1 item exactly 200px with a fixed 24px gap", () => {
+    expect(getLogicalTrackSize(1)).toBe(200);
+    expect(getLogicalTrackSize(0.5)).toBe(88);
+    expect(getLogicalTrackSize(2)).toBe(424);
+    expect(getLogicalTrackSize(3)).toBe(648);
+
+    expect(getLogicalItemStyle({ x: 1, y: 2, w: 2, h: 3 })).toEqual({
+      position: "absolute",
+      left: 224,
+      top: 448,
+      width: 424,
+      height: 648,
+    });
+  });
+
+  test("normalizes invalid bounds and derives the required row count", () => {
+    const placement = normalizeGridPlacement({ id: "wide", x: 7, y: -2, w: 8, h: 2 }, 4);
+
+    expect(placement).toEqual({ id: "wide", x: 0, y: 0, w: 4, h: 2 });
+    expect(getLayoutRowCount([placement, { x: 0, y: 4, w: 1, h: 3 }])).toBe(7);
+  });
+});
diff --git a/apps/nextjs/src/components/board/layout/test/reflow.spec.ts b/apps/nextjs/src/components/board/layout/test/reflow.spec.ts
new file mode 100644
index 000000000..739c747f9
--- /dev/null
+++ b/apps/nextjs/src/components/board/layout/test/reflow.spec.ts
@@ -0,0 +1,134 @@
+import { describe, expect, test } from "vitest";
+
+import {
+  doGridPlacementsOverlap,
+  getCollapsedDisplayLayout,
+  placeGridItem,
+  reflowVerticalLayout,
+  sortGridPlacementsForReadingOrder,
+} from "../index";
+import type { GridPlacement } from "../index";
+
+describe("dashboard layout reflow", () => {
+  test("compacts each horizontal lane and removes collisions", () => {
+    const result = reflowVerticalLayout(
+      [
+        { id: "a", x: 0, y: 0, w: 1, h: 1 },
+        { id: "b", x: 0, y: 3, w: 1, h: 1 },
+        { id: "c", x: 1, y: 3, w: 1, h: 1 },
+      ],
+      { columnCount: 2 },
+    );
+
+    expect(result).toEqual([
+      { id: "a", x: 0, y: 0, w: 1, h: 1 },
+      { id: "b", x: 0, y: 1, w: 1, h: 1 },
+      { id: "c", x: 1, y: 0, w: 1, h: 1 },
+    ]);
+    expect(hasOverlap(result)).toBe(false);
+  });
+
+  test("shrinks a collapsed inline container without compacting unrelated columns", () => {
+    const result = getCollapsedDisplayLayout(
+      [
+        { id: "section", x: 0, y: 0, w: 2, h: 3 },
+        { id: "below", x: 0, y: 3, w: 2, h: 1 },
+        { id: "other-lane", x: 2, y: 4, w: 1, h: 1 },
+      ],
+      {
+        columnCount: 3,
+        collapsedItemIds: new Set(["section"]),
+      },
+    );
+
+    expect(result).toEqual([
+      { id: "section", x: 0, y: 0, w: 2, h: 0.5 },
+      { id: "below", x: 0, y: 0.5, w: 2, h: 1 },
+      { id: "other-lane", x: 2, y: 4, w: 1, h: 1 },
+    ]);
+  });
+
+  test("preserves intentional gaps below a collapsed container", () => {
+    const result = getCollapsedDisplayLayout(
+      [
+        { id: "section", x: 0, y: 1, w: 2, h: 3 },
+        { id: "below", x: 0, y: 6, w: 2, h: 1 },
+        { id: "above", x: 0, y: 0, w: 2, h: 1 },
+      ],
+      { columnCount: 2, collapsedItemIds: new Set(["section"]) },
+    );
+
+    expect(result).toEqual([
+      { id: "section", x: 0, y: 1, w: 2, h: 0.5 },
+      { id: "below", x: 0, y: 3.5, w: 2, h: 1 },
+      { id: "above", x: 0, y: 0, w: 2, h: 1 },
+    ]);
+  });
+
+  test("does not double-count side-by-side collapsed space", () => {
+    const result = getCollapsedDisplayLayout(
+      [
+        { id: "left", x: 0, y: 0, w: 1, h: 3 },
+        { id: "right", x: 1, y: 0, w: 1, h: 3 },
+        { id: "below", x: 0, y: 3, w: 2, h: 1 },
+      ],
+      { columnCount: 2, collapsedItemIds: new Set(["left", "right"]) },
+    );
+
+    expect(result).toEqual([
+      { id: "left", x: 0, y: 0, w: 1, h: 0.5 },
+      { id: "right", x: 1, y: 0, w: 1, h: 0.5 },
+      { id: "below", x: 0, y: 0.5, w: 2, h: 1 },
+    ]);
+  });
+
+  test("pins a moved or expanded item and pushes collisions out of the way", () => {
+    const result = placeGridItem(
+      [
+        { id: "section", x: 0, y: 0, w: 2, h: 1 },
+        { id: "neighbor", x: 0, y: 1, w: 2, h: 1 },
+        { id: "side", x: 2, y: 2, w: 1, h: 1 },
+      ],
+      { id: "section", x: 0, y: 0, w: 2, h: 3 },
+      3,
+    );
+
+    expect(result).toEqual([
+      { id: "section", x: 0, y: 0, w: 2, h: 3 },
+      { id: "neighbor", x: 0, y: 3, w: 2, h: 1 },
+      { id: "side", x: 2, y: 0, w: 1, h: 1 },
+    ]);
+    expect(hasOverlap(result)).toBe(false);
+  });
+
+  test("is deterministic regardless of input array order", () => {
+    const first = [
+      { id: "b", x: 0, y: 2, w: 1, h: 1 },
+      { id: "a", x: 0, y: 2, w: 1, h: 1 },
+      { id: "c", x: 1, y: 8, w: 1, h: 1 },
+    ];
+    const second = first.toReversed();
+
+    expect(byId(reflowVerticalLayout(first, { columnCount: 2 }))).toEqual(
+      byId(reflowVerticalLayout(second, { columnCount: 2 })),
+    );
+  });
+
+  test("provides row-major DOM order for the read-only renderer", () => {
+    const items = [
+      { id: "last", x: 0, y: 2, w: 1, h: 1 },
+      { id: "right", x: 1, y: 0, w: 1, h: 1 },
+      { id: "left", x: 0, y: 0, w: 1, h: 1 },
+    ];
+
+    expect(sortGridPlacementsForReadingOrder(items).map((item) => item.id)).toEqual(["left", "right", "last"]);
+  });
+});
+
+const hasOverlap = (placements: readonly GridPlacement[]) =>
+  placements.some((placement, index) =>
+    placements.slice(index + 1).some((otherPlacement) => doGridPlacementsOverlap(placement, otherPlacement)),
+  );
+
+const byId = (placements: readonly GridPlacement[]) =>
+  Object.fromEntries(placements.map((placement) => [placement.id, placement]));
diff --git a/apps/nextjs/src/components/board/layout/test/scaled-board-canvas.spec.ts b/apps/nextjs/src/components/board/layout/test/scaled-board-canvas.spec.ts
new file mode 100644
index 000000000..83e14ea02
--- /dev/null
+++ b/apps/nextjs/src/components/board/layout/test/scaled-board-canvas.spec.ts
@@ -0,0 +1,60 @@
+import { describe, expect, test } from "vitest";
+
+import { calculateBoardCanvasScale, calculateBoardUiScale, MIN_ACCESSIBLE_CANVAS_SCALE } from "../scaled-board-canvas";
+
+describe("board canvas scale policy", () => {
+  test("fits the logical canvas exactly when the viewport can preserve the minimum scale", () => {
+    const scale = calculateBoardCanvasScale(840, 1000);
+
+    expect(scale).toBe(0.84);
+    expect(1000 * scale).toBe(840);
+  });
+
+  test("scales up uniformly on a larger screen", () => {
+    expect(calculateBoardCanvasScale(1800, 1000)).toBe(1.8);
+  });
+
+  test("stops counter-scaling at 0.75 and lets the canvas overflow", () => {
+    const availableWidth = 600;
+    const logicalWidth = 1000;
+    const scale = calculateBoardCanvasScale(availableWidth, logicalWidth);
+
+    expect(scale).toBe(MIN_ACCESSIBLE_CANVAS_SCALE);
+    expect(logicalWidth * scale).toBeGreaterThan(availableWidth);
+  });
+
+  test("keeps content materially magnified at 200% effective zoom", () => {
+    const logicalWidth = 1696;
+    const normalAvailableWidth = 1872;
+    const normalScale = calculateBoardCanvasScale(normalAvailableWidth, logicalWidth);
+    const zoomedScale = calculateBoardCanvasScale(normalAvailableWidth / 2, logicalWidth);
+    const normalPaintedCellSize = 200 * normalScale;
+    const zoomedPaintedCellSize = 200 * zoomedScale * 2;
+
+    expect(zoomedScale).toBe(MIN_ACCESSIBLE_CANVAS_SCALE);
+    expect(zoomedPaintedCellSize).toBeGreaterThan(normalPaintedCellSize * 1.25);
+  });
+
+  test.each([
+    [0, 1000],
+    [1000, 0],
+    [Number.NaN, 1000],
+    [1000, Number.POSITIVE_INFINITY],
+  ])("uses a stable initial scale for unavailable geometry (%s, %s)", (availableWidth, logicalWidth) => {
+    expect(calculateBoardCanvasScale(availableWidth, logicalWidth)).toBe(1);
+  });
+
+  test("keeps UI typography and density at 100% while fitting the canvas down", () => {
+    expect(calculateBoardUiScale(0.75)).toBeCloseTo(4 / 3);
+    expect(calculateBoardUiScale(0.84)).toBeCloseTo(1 / 0.84);
+    expect(calculateBoardUiScale(1)).toBe(1);
+    expect(calculateBoardUiScale(1.5)).toBe(1);
+  });
+
+  test.each([0, -1, Number.NaN, Number.POSITIVE_INFINITY])(
+    "uses stable UI density for an invalid canvas scale (%s)",
+    (scale) => {
+      expect(calculateBoardUiScale(scale)).toBe(1);
+    },
+  );
+});
diff --git a/apps/nextjs/src/components/board/layout/test/semantics.spec.ts b/apps/nextjs/src/components/board/layout/test/semantics.spec.ts
new file mode 100644
index 000000000..51468ae8c
--- /dev/null
+++ b/apps/nextjs/src/components/board/layout/test/semantics.spec.ts
@@ -0,0 +1,57 @@
+import { describe, expect, test } from "vitest";
+
+import {
+  getEditableCanvasAttributes,
+  getEditableGridCellAttributes,
+  getReadonlyCanvasAttributes,
+  getReadonlyGridItemAttributes,
+} from "../index";
+
+describe("dashboard layout semantics", () => {
+  const placement = { id: "weather", x: 1, y: 2, w: 3, h: 2 };
+
+  test("keeps read-only mode a native labelled region", () => {
+    expect(getReadonlyCanvasAttributes({ label: "Home dashboard" })).toEqual({
+      role: "region",
+      "aria-label": "Home dashboard",
+      "data-grid-readonly": "true",
+    });
+    expect(getReadonlyGridItemAttributes(placement)).toEqual({
+      "data-grid-id": "weather",
+      "data-grid-x": 1,
+      "data-grid-y": 2,
+      "data-grid-w": 3,
+      "data-grid-h": 2,
+    });
+  });
+
+  test("keeps edit mode a labelled region with spatial item metadata", () => {
+    expect(
+      getEditableCanvasAttributes({
+        label: "Edit home dashboard",
+        columnCount: 12,
+        rowCount: 8,
+      }),
+    ).toEqual({
+      role: "region",
+      "aria-label": "Edit home dashboard",
+      "data-grid-editable": "true",
+    });
+
+    expect(
+      getEditableGridCellAttributes({
+        label: "Weather widget",
+        placement,
+      }),
+    ).toEqual({
+      role: "group",
+      "aria-label": "Weather widget",
+      tabIndex: 0,
+      "data-grid-id": "weather",
+      "data-grid-x": 1,
+      "data-grid-y": 2,
+      "data-grid-w": 3,
+      "data-grid-h": 2,
+    });
+  });
+});
diff --git a/apps/nextjs/src/components/board/layout/types.ts b/apps/nextjs/src/components/board/layout/types.ts
new file mode 100644
index 000000000..3ba87d68b
--- /dev/null
+++ b/apps/nextjs/src/components/board/layout/types.ts
@@ -0,0 +1,10 @@
+export interface GridCoordinates {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface GridPlacement extends GridCoordinates {
+  id: string;
+}
diff --git a/apps/nextjs/src/components/board/sections/category-section.tsx b/apps/nextjs/src/components/board/sections/category-section.tsx
deleted file mode 100644
index 4c3958859..000000000
--- a/apps/nextjs/src/components/board/sections/category-section.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Card, Collapse, Group, Stack, Title, UnstyledButton } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
-
-import { clientApi } from "@homarr/api/client";
-import { useSession } from "@homarr/auth/client";
-import { useRequiredBoard } from "@homarr/boards/context";
-
-import type { CategorySection } from "~/app/[locale]/boards/_types";
-import { CategoryMenu } from "./category/category-menu";
-import { GridStack } from "./gridstack/gridstack";
-import classes from "./item.module.css";
-
-const localStorageKey = (sectionId: string) => `homarr-section-collapsed-${sectionId}`;
-
-interface Props {
-  section: CategorySection;
-}
-
-export const BoardCategorySection = ({ section }: Props) => {
-  const { status } = useSession();
-  const { mutate } = clientApi.section.changeCollapsed.useMutation();
-  const board = useRequiredBoard();
-
-  const initialCollapsed =
-    typeof window !== "undefined"
-      ? (localStorage.getItem(localStorageKey(section.id)) ?? String(section.collapsed)) === "true"
-      : section.collapsed;
-
-  const [opened, { toggle }] = useDisclosure(initialCollapsed, {
-    onOpen() {
-      if (status === "authenticated") {
-        mutate({ sectionId: section.id, collapsed: true });
-      } else if (status === "unauthenticated") {
-        localStorage.setItem(localStorageKey(section.id), "true");
-      }
-    },
-    onClose() {
-      if (status === "authenticated") {
-        mutate({ sectionId: section.id, collapsed: false });
-      } else if (status === "unauthenticated") {
-        localStorage.setItem(localStorageKey(section.id), "false");
-      }
-    },
-  });
-
-  return (
-    <Card style={{ "--opacity": board.opacity / 100 }} radius={board.itemRadius} p={0} className={classes.itemCard}>
-      <Stack>
-        <Group wrap="nowrap" gap="sm">
-          <UnstyledButton w="100%" p="sm" onClick={toggle}>
-            <Group wrap="nowrap">
-              {opened ? <IconChevronUp size={20} /> : <IconChevronDown size={20} />}
-              <Title order={3}>{section.name}</Title>
-            </Group>
-          </UnstyledButton>
-          <CategoryMenu category={section} />
-        </Group>
-        <Collapse expanded={opened} p="sm" pt={0}>
-          <GridStack section={section} />
-        </Collapse>
-      </Stack>
-    </Card>
-  );
-};
diff --git a/apps/nextjs/src/components/board/sections/category/actions/move-category.ts b/apps/nextjs/src/components/board/sections/category/actions/move-category.ts
deleted file mode 100644
index f0cdb1d46..000000000
--- a/apps/nextjs/src/components/board/sections/category/actions/move-category.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { RouterOutputs } from "@homarr/api";
-
-import type { CategorySection } from "~/app/[locale]/boards/_types";
-
-export interface MoveCategoryInput {
-  id: string;
-  direction: "up" | "down";
-}
-
-export const moveCategoryCallback =
-  (input: MoveCategoryInput) =>
-  (previous: RouterOutputs["board"]["getHomeBoard"]): RouterOutputs["board"]["getHomeBoard"] => {
-    const currentCategory = previous.sections.find(
-      (section): section is CategorySection => section.kind === "category" && section.id === input.id,
-    );
-    if (!currentCategory) {
-      return previous;
-    }
-    if (currentCategory.yOffset === 1 && input.direction === "up") {
-      return previous;
-    }
-    if (currentCategory.yOffset === previous.sections.length - 2 && input.direction === "down") {
-      return previous;
-    }
-
-    return {
-      ...previous,
-      sections: previous.sections.map((section) => {
-        if (section.kind !== "category" && section.kind !== "empty") {
-          return section;
-        }
-        const offset = input.direction === "up" ? -2 : 2;
-        // Move category and empty section
-        if (section.yOffset === currentCategory.yOffset || section.yOffset === currentCategory.yOffset + 1) {
-          return {
-            ...section,
-            yOffset: section.yOffset + offset,
-          };
-        }
-
-        if (
-          section.yOffset === currentCategory.yOffset + offset ||
-          section.yOffset === currentCategory.yOffset + offset + 1
-        ) {
-          return {
-            ...section,
-            yOffset: section.yOffset - offset,
-          };
-        }
-
-        return section;
-      }),
-    };
-  };
diff --git a/apps/nextjs/src/components/board/sections/category/actions/remove-category.ts b/apps/nextjs/src/components/board/sections/category/actions/remove-category.ts
deleted file mode 100644
index cfb0879c1..000000000
--- a/apps/nextjs/src/components/board/sections/category/actions/remove-category.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import { getBoardLayouts } from "@homarr/boards/context";
-
-import type { Board, CategorySection, EmptySection, Section } from "~/app/[locale]/boards/_types";
-
-export interface RemoveCategoryInput {
-  id: string;
-}
-
-export const removeCategoryCallback =
-  (input: RemoveCategoryInput) =>
-  (previous: Board): Board => {
-    const currentCategory = previous.sections.find(
-      (section): section is CategorySection => section.kind === "category" && section.id === input.id,
-    );
-    if (!currentCategory) {
-      return previous;
-    }
-
-    const emptySectionsAbove = previous.sections.filter(
-      (section): section is EmptySection => section.kind === "empty" && section.yOffset < currentCategory.yOffset,
-    );
-    const aboveSection = emptySectionsAbove.sort((sectionA, sectionB) => sectionB.yOffset - sectionA.yOffset).at(0);
-
-    const emptySectionsBelow = previous.sections.filter(
-      (section): section is EmptySection => section.kind === "empty" && section.yOffset > currentCategory.yOffset,
-    );
-    const removedSection = emptySectionsBelow.sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset).at(0);
-
-    if (!aboveSection || !removedSection) {
-      return previous;
-    }
-
-    const aboveYOffsets = getBoardLayouts(previous).map((layoutId) => {
-      return {
-        layoutId,
-        yOffset: Math.max(
-          calculateYHeightWithOffsetForItemLayouts(previous, { sectionId: aboveSection.id, layoutId }),
-          calculateYHeightWithOffsetForDynamicSectionLayouts(previous.sections, {
-            sectionId: aboveSection.id,
-            layoutId,
-          }),
-        ),
-      };
-    });
-
-    const categoryYOffsets = getBoardLayouts(previous).map((layoutId) => {
-      return {
-        layoutId,
-        yOffset: Math.max(
-          calculateYHeightWithOffsetForItemLayouts(previous, { sectionId: currentCategory.id, layoutId }),
-          calculateYHeightWithOffsetForDynamicSectionLayouts(previous.sections, {
-            sectionId: currentCategory.id,
-            layoutId,
-          }),
-        ),
-      };
-    });
-
-    return {
-      ...previous,
-      sections: previous.sections
-        .filter((section) => section.id !== currentCategory.id && section.id !== removedSection.id)
-        .map((section) =>
-          section.kind === "dynamic"
-            ? {
-                ...section,
-                layouts: section.layouts.map((layout) => {
-                  const aboveYOffset = aboveYOffsets.find(({ layoutId }) => layout.layoutId === layoutId)?.yOffset ?? 0;
-                  const categoryYOffset =
-                    categoryYOffsets.find(({ layoutId }) => layout.layoutId === layoutId)?.yOffset ?? 0;
-
-                  if (layout.parentSectionId === currentCategory.id) {
-                    return {
-                      ...layout,
-                      yOffset: layout.yOffset + aboveYOffset,
-                      parentSectionId: aboveSection.id,
-                    };
-                  }
-
-                  if (layout.parentSectionId === removedSection.id) {
-                    return {
-                      ...layout,
-                      yOffset: layout.yOffset + aboveYOffset + categoryYOffset,
-                      parentSectionId: aboveSection.id,
-                    };
-                  }
-
-                  return layout;
-                }),
-              }
-            : section,
-        ),
-
-      items: previous.items.map((item) => ({
-        ...item,
-        layouts: item.layouts.map((layout) => {
-          const aboveYOffset = aboveYOffsets.find(({ layoutId }) => layout.layoutId === layoutId)?.yOffset ?? 0;
-          const categoryYOffset = categoryYOffsets.find(({ layoutId }) => layout.layoutId === layoutId)?.yOffset ?? 0;
-
-          if (layout.sectionId === currentCategory.id) {
-            return {
-              ...layout,
-              yOffset: layout.yOffset + aboveYOffset,
-              sectionId: aboveSection.id,
-            };
-          }
-
-          if (layout.sectionId === removedSection.id) {
-            return {
-              ...layout,
-              yOffset: layout.yOffset + aboveYOffset + categoryYOffset,
-              sectionId: aboveSection.id,
-            };
-          }
-
-          return layout;
-        }),
-      })),
-    };
-  };
-
-const calculateYHeightWithOffsetForDynamicSectionLayouts = (
-  sections: Section[],
-  { sectionId, layoutId }: { sectionId: string; layoutId: string },
-) => {
-  return sections
-    .filter((section) => section.kind === "dynamic")
-    .map((section) => section.layouts.find((layout) => layout.layoutId === layoutId))
-    .filter((layout) => layout !== undefined)
-    .filter((layout) => layout.parentSectionId === sectionId)
-    .reduce((acc, layout) => {
-      const yHeightWithOffset = layout.yOffset + layout.height;
-      if (yHeightWithOffset > acc) return yHeightWithOffset;
-      return acc;
-    }, 0);
-};
-
-const calculateYHeightWithOffsetForItemLayouts = (
-  board: Board,
-  { sectionId, layoutId }: { sectionId: string; layoutId: string },
-) =>
-  board.items
-    .map((item) => item.layouts.find((layout) => layout.layoutId === layoutId))
-    .filter((layout) => layout !== undefined)
-    .filter((layout) => layout.sectionId === sectionId)
-    .reduce((acc, layout) => {
-      const yHeightWithOffset = layout.yOffset + layout.height;
-      if (yHeightWithOffset > acc) return yHeightWithOffset;
-      return acc;
-    }, 0);
diff --git a/apps/nextjs/src/components/board/sections/category/actions/test/move-category.spec.ts b/apps/nextjs/src/components/board/sections/category/actions/test/move-category.spec.ts
deleted file mode 100644
index 6a0c9da4b..000000000
--- a/apps/nextjs/src/components/board/sections/category/actions/test/move-category.spec.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { describe, expect, test } from "vitest";
-
-import type { Section } from "~/app/[locale]/boards/_types";
-import { moveCategoryCallback } from "../move-category";
-
-describe("Move Category", () => {
-  test.each([
-    [3, [0, 3, 4, 1, 2, 5, 6]],
-    [5, [0, 1, 2, 5, 6, 3, 4]],
-  ])("should move category up", (moveId, expectedOrder) => {
-    const sections = createSections(3);
-
-    const input = {
-      id: moveId.toString(),
-      direction: "up" as const,
-    };
-
-    const result = moveCategoryCallback(input)({ sections } as never);
-
-    expect(sortSections(result.sections).map((section) => parseInt(section.id, 10))).toEqual(expectedOrder);
-  });
-  test.each([
-    [1, [0, 3, 4, 1, 2, 5, 6]],
-    [3, [0, 1, 2, 5, 6, 3, 4]],
-  ])("should move category down", (moveId, expectedOrder) => {
-    const sections = createSections(3);
-
-    const input = {
-      id: moveId.toString(),
-      direction: "down" as const,
-    };
-
-    const result = moveCategoryCallback(input)({ sections } as never);
-
-    expect(sortSections(result.sections).map((section) => parseInt(section.id, 10))).toEqual(expectedOrder);
-  });
-  test("should not move category up if it is at the top", () => {
-    const sections = createSections(3);
-
-    const input = {
-      id: "1",
-      direction: "up" as const,
-    };
-
-    const result = moveCategoryCallback(input)({ sections } as never);
-
-    expect(sortSections(result.sections).map((section) => parseInt(section.id, 10))).toEqual([0, 1, 2, 3, 4, 5, 6]);
-  });
-  test("should not move category down if it is at the bottom", () => {
-    const sections = createSections(3);
-
-    const input = {
-      id: "5",
-      direction: "down" as const,
-    };
-
-    const result = moveCategoryCallback(input)({ sections } as never);
-
-    expect(sortSections(result.sections).map((section) => parseInt(section.id, 10))).toEqual([0, 1, 2, 3, 4, 5, 6]);
-  });
-});
-
-const createSections = (categoryCount: number) => {
-  return Array.from({ length: categoryCount * 2 + 1 }, (_, index) => ({
-    id: index.toString(),
-    kind: index % 2 === 1 ? ("category" as const) : ("empty" as const),
-    name: `Category ${index}`,
-    yOffset: index,
-    xOffset: 0,
-    collapsed: false,
-    items: [],
-  })) satisfies Section[];
-};
-
-const sortSections = (sections: Section[]) => {
-  return sections
-    .filter((section) => section.kind !== "dynamic")
-    .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
-};
diff --git a/apps/nextjs/src/components/board/sections/category/actions/test/remove-category.spec.ts b/apps/nextjs/src/components/board/sections/category/actions/test/remove-category.spec.ts
deleted file mode 100644
index 0aaf2c7a5..000000000
--- a/apps/nextjs/src/components/board/sections/category/actions/test/remove-category.spec.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { describe, expect, test, vi } from "vitest";
-
-import * as boardContext from "@homarr/boards/context";
-
-import type { DynamicSection, Section } from "~/app/[locale]/boards/_types";
-import { BoardMockBuilder } from "~/components/board/items/actions/test/mocks/board-mock";
-import { CategorySectionMockBuilder } from "~/components/board/items/actions/test/mocks/category-section-mock";
-import { DynamicSectionMockBuilder } from "~/components/board/items/actions/test/mocks/dynamic-section-mock";
-import { EmptySectionMockBuilder } from "~/components/board/items/actions/test/mocks/empty-section-mock";
-import { ItemMockBuilder } from "~/components/board/items/actions/test/mocks/item-mock";
-import { removeCategoryCallback } from "../remove-category";
-
-describe("Remove Category", () => {
-  test.each([
-    [3, [0, 1, 2, 3, 4, 5, 6], [0, 1, 2, 5, 6], [3, 4], 2],
-    [5, [0, 1, 2, 3, 4, 5, 6], [0, 1, 2, 3, 4], [5, 6], 4],
-    [1, [0, 1, 2, 3, 4, 5, 6], [0, 3, 4, 5, 6], [1, 2], 0],
-    [3, [0, 3, 6, 7, 8], [0, 7, 8], [3, 6], 0],
-  ])(
-    "should remove category",
-    (removeId, initialYOffsets, expectedYOffsets, expectedRemovals, expectedLocationOfItems) => {
-      // Arrange
-      const layoutId = "1";
-      const input = removeId.toString();
-
-      const board = new BoardMockBuilder()
-        .addLayout({ id: layoutId })
-        .addSections(createSections(initialYOffsets))
-        .addItems(createSectionItems(initialYOffsets, layoutId))
-        .build();
-
-      vi.spyOn(boardContext, "getBoardLayouts").mockReturnValue([layoutId]);
-
-      // Act
-      const result = removeCategoryCallback({ id: input })(board);
-
-      // Assert
-      expect(result.sections.map((section) => parseInt(section.id, 10))).toEqual(expectedYOffsets);
-      expectedRemovals.forEach((expectedRemoval) => {
-        expect(result.sections.find((section) => section.id === expectedRemoval.toString())).toBeUndefined();
-      });
-      const aboveSectionItems = result.items.filter(
-        (item) => item.layouts[0]?.sectionId === expectedLocationOfItems.toString(),
-      );
-      expect(aboveSectionItems.map((item) => parseInt(item.id, 10))).toEqual(expect.arrayContaining(expectedRemovals));
-    },
-  );
-
-  test("should correctly move items to above empty section", () => {
-    // Arrange
-    const layoutId = "1";
-    const sectionIds = {
-      above: "2",
-      category: "3",
-      below: "4",
-      dynamic: "7",
-    };
-    const initialYOffsets = [0, 1, 2, 3, 4, 5, 6];
-
-    const board = new BoardMockBuilder()
-      .addLayout({ id: layoutId })
-      .addSections(createSections(initialYOffsets))
-      .addItems(createSectionItems([0, 1, 5, 6], layoutId)) // Only add items to other sections
-      .addDynamicSection(
-        new DynamicSectionMockBuilder({ id: sectionIds.dynamic })
-          .addLayout({ layoutId, parentSectionId: sectionIds.category, yOffset: 7, height: 3 })
-          .build(),
-      )
-      .addItem(new ItemMockBuilder({ id: "above-1" }).addLayout({ layoutId, sectionId: sectionIds.above }).build())
-      .addItem(
-        new ItemMockBuilder({ id: "above-2" })
-          .addLayout({ layoutId, sectionId: sectionIds.above, yOffset: 3, xOffset: 2, height: 2 })
-          .build(),
-      )
-      .addItem(
-        new ItemMockBuilder({ id: "category-1" }).addLayout({ layoutId, sectionId: sectionIds.category }).build(),
-      )
-      .addItem(
-        new ItemMockBuilder({ id: "category-2" })
-          .addLayout({ layoutId, sectionId: sectionIds.category, yOffset: 2, xOffset: 4, width: 4 })
-          .build(),
-      )
-      .addItem(
-        new ItemMockBuilder({ id: "below-1" }).addLayout({ layoutId, sectionId: sectionIds.below, xOffset: 5 }).build(),
-      )
-      .addItem(
-        new ItemMockBuilder({ id: "below-2" })
-          .addLayout({ layoutId, sectionId: sectionIds.below, yOffset: 1, xOffset: 1, height: 2 })
-          .build(),
-      )
-      .addItem(new ItemMockBuilder({ id: "dynamic-1" }).addLayout({ layoutId, sectionId: sectionIds.dynamic }).build())
-      .build();
-
-    vi.spyOn(boardContext, "getBoardLayouts").mockReturnValue([layoutId]);
-
-    // Act
-    const result = removeCategoryCallback({ id: sectionIds.category })(board);
-
-    // Assert
-    expect(result.sections.map((section) => parseInt(section.id, 10))).toEqual([0, 1, 2, 5, 6, 7]);
-    const aboveSectionItems = result.items.filter((item) => item.layouts[0]?.sectionId === sectionIds.above);
-    expect(aboveSectionItems.length).toBe(6);
-
-    expect(
-      aboveSectionItems
-        .map((item) => ({
-          ...item,
-          ...item.layouts[0]!,
-        }))
-        .sort((itemA, itemB) => itemA.yOffset - itemB.yOffset),
-    ).toEqual([
-      expect.objectContaining({ id: "above-1", yOffset: 0, xOffset: 0 }),
-      expect.objectContaining({ id: "above-2", yOffset: 3, xOffset: 2, height: 2 }),
-      expect.objectContaining({ id: "category-1", yOffset: 5, xOffset: 0 }),
-      expect.objectContaining({ id: "category-2", yOffset: 7, xOffset: 4, width: 4 }),
-      expect.objectContaining({ id: "below-1", yOffset: 15, xOffset: 5 }),
-      expect.objectContaining({ id: "below-2", yOffset: 16, xOffset: 1, height: 2 }),
-    ]);
-
-    const dynamicSection = result.sections.find((section): section is DynamicSection => section.id === "7")!;
-    expect(dynamicSection.layouts.at(0)?.yOffset).toBe(12);
-    expect(dynamicSection.layouts[0]?.parentSectionId).toBe("2");
-  });
-});
-
-const createSections = (initialYOffsets: number[]) => {
-  return initialYOffsets.map((yOffset, index) =>
-    index % 2 === 0
-      ? new EmptySectionMockBuilder({
-          id: yOffset.toString(),
-          yOffset,
-        }).build()
-      : new CategorySectionMockBuilder({
-          id: yOffset.toString(),
-          yOffset,
-        }).build(),
-  ) satisfies Section[];
-};
-
-const createSectionItems = (initialYOffsets: number[], layoutId: string) => {
-  return initialYOffsets.map((yOffset) =>
-    new ItemMockBuilder({ id: yOffset.toString() }).addLayout({ layoutId, sectionId: yOffset.toString() }).build(),
-  );
-};
diff --git a/apps/nextjs/src/components/board/sections/category/category-actions.ts b/apps/nextjs/src/components/board/sections/category/category-actions.ts
deleted file mode 100644
index 1d7d24e24..000000000
--- a/apps/nextjs/src/components/board/sections/category/category-actions.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { useCallback } from "react";
-
-import { useUpdateBoard } from "@homarr/boards/updater";
-import { createId } from "@homarr/common";
-
-import type { CategorySection, EmptySection, Section } from "~/app/[locale]/boards/_types";
-import type { MoveCategoryInput } from "./actions/move-category";
-import { moveCategoryCallback } from "./actions/move-category";
-import type { RemoveCategoryInput } from "./actions/remove-category";
-import { removeCategoryCallback } from "./actions/remove-category";
-
-interface AddCategory {
-  name: string;
-  yOffset: number;
-}
-
-interface RenameCategory {
-  id: string;
-  name: string;
-}
-
-export const useCategoryActions = () => {
-  const { updateBoard } = useUpdateBoard();
-
-  const addCategory = useCallback(
-    ({ name, yOffset }: AddCategory) => {
-      if (yOffset <= -1) {
-        return;
-      }
-      updateBoard((previous) => ({
-        ...previous,
-        sections: [
-          // Place sections before the new category
-          ...previous.sections.filter(
-            (section) => (section.kind === "category" || section.kind === "empty") && section.yOffset < yOffset,
-          ),
-          {
-            id: createId(),
-            name,
-            kind: "category",
-            yOffset,
-            xOffset: 0,
-            collapsed: false,
-          },
-          {
-            id: createId(),
-            kind: "empty",
-            yOffset: yOffset + 1,
-            xOffset: 0,
-          },
-          // Place sections after the new category
-          ...previous.sections
-            .filter(
-              (section): section is CategorySection | EmptySection =>
-                (section.kind === "category" || section.kind === "empty") && section.yOffset >= yOffset,
-            )
-            .map((section) => ({
-              ...section,
-              yOffset: section.yOffset + 2,
-            })),
-          ...previous.sections.filter((section) => section.kind !== "category" && section.kind !== "empty"),
-        ] satisfies Section[],
-      }));
-    },
-    [updateBoard],
-  );
-
-  const addCategoryToEnd = useCallback(
-    ({ name }: { name: string }) => {
-      updateBoard((previous) => {
-        const lastSection = previous.sections
-          .filter(
-            (section): section is CategorySection | EmptySection =>
-              section.kind === "empty" || section.kind === "category",
-          )
-          .sort((sectionA, sectionB) => sectionB.yOffset - sectionA.yOffset)
-          .at(0);
-
-        if (!lastSection) return previous;
-        const lastYOffset = lastSection.yOffset;
-
-        return {
-          ...previous,
-          sections: [
-            ...previous.sections,
-            {
-              id: createId(),
-              name,
-              kind: "category",
-              yOffset: lastYOffset + 1,
-              xOffset: 0,
-              collapsed: false,
-            },
-            {
-              id: createId(),
-              kind: "empty",
-              yOffset: lastYOffset + 2,
-              xOffset: 0,
-            },
-          ] satisfies Section[],
-        };
-      });
-    },
-    [updateBoard],
-  );
-
-  const renameCategory = useCallback(
-    ({ id: categoryId, name }: RenameCategory) => {
-      updateBoard((previous) => ({
-        ...previous,
-        sections: previous.sections.map((section) => {
-          if (section.kind !== "category") return section;
-          if (section.id !== categoryId) return section;
-          return {
-            ...section,
-            name,
-          };
-        }),
-      }));
-    },
-    [updateBoard],
-  );
-
-  const moveCategory = useCallback(
-    (input: MoveCategoryInput) => {
-      updateBoard(moveCategoryCallback(input));
-    },
-    [updateBoard],
-  );
-
-  const removeCategory = useCallback(
-    (input: RemoveCategoryInput) => {
-      updateBoard(removeCategoryCallback(input));
-    },
-    [updateBoard],
-  );
-
-  return {
-    addCategory,
-    addCategoryToEnd,
-    renameCategory,
-    moveCategory,
-    removeCategory,
-  };
-};
diff --git a/apps/nextjs/src/components/board/sections/category/category-edit-modal.tsx b/apps/nextjs/src/components/board/sections/category/category-edit-modal.tsx
deleted file mode 100644
index fa14ea8ab..000000000
--- a/apps/nextjs/src/components/board/sections/category/category-edit-modal.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Stack, TextInput } from "@mantine/core";
-import { z } from "zod/v4";
-
-import { useZodForm } from "@homarr/form";
-import { createModal, ModalFormFooter, modalSizeForm } from "@homarr/modals";
-import { useI18n } from "@homarr/translation/client";
-
-interface Category {
-  id: string;
-  name: string;
-}
-
-interface InnerProps {
-  submitLabel: string;
-  category: Category;
-  onSuccess: (category: Category) => void;
-}
-
-export const CategoryEditModal = createModal<InnerProps>(({ actions, innerProps }) => {
-  const t = useI18n();
-  const form = useZodForm(z.object({ name: z.string().min(1) }), {
-    initialValues: {
-      name: innerProps.category.name,
-    },
-  });
-
-  return (
-    <form
-      onSubmit={form.onSubmit((values) => {
-        void innerProps.onSuccess({
-          ...innerProps.category,
-          name: values.name,
-        });
-        actions.closeModal();
-      })}
-    >
-      <Stack>
-        <TextInput label={t("section.category.field.name.label")} data-autofocus {...form.getInputProps("name")} />
-        <ModalFormFooter onCancel={actions.closeModal} submitLabel={innerProps.submitLabel} />
-      </Stack>
-    </form>
-  );
-}).withOptions({
-  size: modalSizeForm,
-});
diff --git a/apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx b/apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx
deleted file mode 100644
index 906abdea6..000000000
--- a/apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { useCallback } from "react";
-
-import { fetchApi } from "@homarr/api/client";
-import { getCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
-import { createId } from "@homarr/common";
-import { useConfirmModal, useModalAction } from "@homarr/modals";
-import { useSettings } from "@homarr/settings";
-import { useI18n } from "@homarr/translation/client";
-
-import type { CategorySection } from "~/app/[locale]/boards/_types";
-import { useCategoryActions } from "./category-actions";
-import { CategoryEditModal } from "./category-edit-modal";
-import { filterByItemKind } from "./filter";
-
-export const useCategoryMenuActions = (category: CategorySection) => {
-  const { openModal } = useModalAction(CategoryEditModal);
-  const { openConfirmModal } = useConfirmModal();
-  const { addCategory, moveCategory, removeCategory, renameCategory } = useCategoryActions();
-  const t = useI18n();
-  const board = useRequiredBoard();
-
-  const createCategoryAtYOffset = useCallback(
-    (position: number) => {
-      openModal(
-        {
-          category: {
-            id: createId(),
-            name: t("section.category.create.title"),
-          },
-          onSuccess: (category) => {
-            addCategory({
-              name: category.name,
-              yOffset: position,
-            });
-          },
-          submitLabel: t("section.category.create.submit"),
-        },
-        {
-          title: (t) => t("section.category.create.title"),
-        },
-      );
-    },
-    [addCategory, t, openModal],
-  );
-
-  // creates a new category above the current
-  const addCategoryAbove = useCallback(() => {
-    const aboveYOffset = category.yOffset;
-    createCategoryAtYOffset(aboveYOffset);
-  }, [category.yOffset, createCategoryAtYOffset]);
-
-  // creates a new category below the current
-  const addCategoryBelow = useCallback(() => {
-    const belowYOffset = category.yOffset + 2;
-    createCategoryAtYOffset(belowYOffset);
-  }, [category.yOffset, createCategoryAtYOffset]);
-
-  const moveCategoryUp = useCallback(() => {
-    moveCategory({
-      id: category.id,
-      direction: "up",
-    });
-  }, [category.id, moveCategory]);
-
-  const moveCategoryDown = useCallback(() => {
-    moveCategory({
-      id: category.id,
-      direction: "down",
-    });
-  }, [category.id, moveCategory]);
-
-  // Removes the current category
-  const remove = useCallback(() => {
-    openConfirmModal({
-      title: t("section.category.remove.title"),
-      children: t("section.category.remove.message", {
-        name: category.name,
-      }),
-      onConfirm: () => {
-        removeCategory({
-          id: category.id,
-        });
-      },
-    });
-  }, [category.id, category.name, removeCategory, t, openConfirmModal]);
-
-  const edit = useCallback(() => {
-    openModal(
-      {
-        category,
-        submitLabel: t("section.category.edit.submit"),
-        onSuccess: (category) => {
-          renameCategory({
-            id: category.id,
-            name: category.name,
-          });
-        },
-      },
-      {
-        title: (t) => t("section.category.edit.title"),
-      },
-    );
-  }, [category, openModal, renameCategory, t]);
-
-  const settings = useSettings();
-  const openAllInNewTabs = useCallback(async () => {
-    const currentLayoutId = getCurrentLayout(board);
-    const appIds = filterByItemKind(
-      board.items.filter(
-        (item) => item.layouts.find((layout) => layout.layoutId === currentLayoutId)?.sectionId === category.id,
-      ),
-      settings,
-      "app",
-    ).map((item) => {
-      return item.options.appId;
-    });
-
-    const apps = await fetchApi.app.byIds.query(appIds);
-    const appsWithUrls = apps.filter((app) => app.href && app.href.length > 0);
-
-    for (const app of appsWithUrls) {
-      const openedWindow = window.open(app.href ?? undefined);
-      if (openedWindow) {
-        continue;
-      }
-
-      openConfirmModal({
-        title: t("section.category.openAllInNewTabs.title"),
-        children: t("section.category.openAllInNewTabs.text"),
-      });
-      break;
-    }
-  }, [category, board, t, openConfirmModal, settings]);
-
-  return {
-    addCategoryAbove,
-    addCategoryBelow,
-    moveCategoryUp,
-    moveCategoryDown,
-    remove,
-    edit,
-    openAllInNewTabs,
-  };
-};
diff --git a/apps/nextjs/src/components/board/sections/category/category-menu.tsx b/apps/nextjs/src/components/board/sections/category/category-menu.tsx
deleted file mode 100644
index 9e3928198..000000000
--- a/apps/nextjs/src/components/board/sections/category/category-menu.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client";
-
-import React, { useMemo } from "react";
-import { ActionIcon, Menu } from "@mantine/core";
-import {
-  IconDotsVertical,
-  IconEdit,
-  IconExternalLink,
-  IconRowInsertBottom,
-  IconRowInsertTop,
-  IconTransitionBottom,
-  IconTransitionTop,
-  IconTrash,
-} from "@tabler/icons-react";
-
-import { useEditMode } from "@homarr/boards/edit-mode";
-import type { MaybePromise } from "@homarr/common/types";
-import { useScopedI18n } from "@homarr/translation/client";
-import type { TablerIcon } from "@homarr/ui";
-
-import type { CategorySection } from "~/app/[locale]/boards/_types";
-import { useCategoryMenuActions } from "./category-menu-actions";
-
-interface Props {
-  category: CategorySection;
-}
-
-export const CategoryMenu = ({ category }: Props) => {
-  const actions = useActions(category);
-  const t = useScopedI18n("section.category");
-
-  return (
-    <Menu>
-      <Menu.Target>
-        <ActionIcon mr="sm" variant="transparent" aria-label={t("menu.label.settings")}>
-          <IconDotsVertical size={20} />
-        </ActionIcon>
-      </Menu.Target>
-      <Menu.Dropdown>
-        {actions.map((action) => {
-          return (
-            <React.Fragment key={action.label}>
-              {"group" in action && <Menu.Label>{t(action.group)}</Menu.Label>}
-              <Menu.Item
-                leftSection={<action.icon size="1rem" />}
-                onClick={action.onClick}
-                color={"color" in action ? action.color : undefined}
-              >
-                {t(action.label)}
-              </Menu.Item>
-            </React.Fragment>
-          );
-        })}
-      </Menu.Dropdown>
-    </Menu>
-  );
-};
-
-const useActions = (category: CategorySection) => {
-  const [isEditMode] = useEditMode();
-  const editModeActions = useEditModeActions(category);
-  const nonEditModeActions = useNonEditModeActions(category);
-
-  return useMemo(
-    () => (isEditMode ? editModeActions : nonEditModeActions),
-    [isEditMode, editModeActions, nonEditModeActions],
-  );
-};
-
-const useEditModeActions = (category: CategorySection) => {
-  const { addCategoryAbove, addCategoryBelow, moveCategoryUp, moveCategoryDown, edit, remove } =
-    useCategoryMenuActions(category);
-
-  return [
-    {
-      icon: IconEdit,
-      label: "action.edit",
-      onClick: edit,
-    },
-    {
-      icon: IconTrash,
-      color: "red",
-      label: "action.remove",
-      onClick: remove,
-    },
-    {
-      group: "menu.label.changePosition",
-      icon: IconTransitionTop,
-      label: "action.moveUp",
-      onClick: moveCategoryUp,
-    },
-    {
-      icon: IconTransitionBottom,
-      label: "action.moveDown",
-      onClick: moveCategoryDown,
-    },
-    {
-      group: "menu.label.create",
-      icon: IconRowInsertTop,
-      label: "action.createAbove",
-      onClick: addCategoryAbove,
-    },
-    {
-      icon: IconRowInsertBottom,
-      label: "action.createBelow",
-      onClick: addCategoryBelow,
-    },
-  ] as const satisfies ActionDefinition[];
-};
-
-const useNonEditModeActions = (category: CategorySection) => {
-  const { openAllInNewTabs } = useCategoryMenuActions(category);
-  return [
-    {
-      icon: IconExternalLink,
-      label: "action.openAllInNewTabs",
-      onClick: openAllInNewTabs,
-    },
-  ] as const satisfies ActionDefinition[];
-};
-
-interface ActionDefinition {
-  icon: TablerIcon;
-  label: string;
-  onClick: () => MaybePromise<void>;
-  color?: string;
-  group?: string;
-}
diff --git a/apps/nextjs/src/components/board/sections/category/filter.ts b/apps/nextjs/src/components/board/sections/category/filter.ts
deleted file mode 100644
index 72bb4443f..000000000
--- a/apps/nextjs/src/components/board/sections/category/filter.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { WidgetKind } from "@homarr/definitions";
-import type { SettingsContextProps } from "@homarr/settings/creator";
-import type { WidgetComponentProps } from "@homarr/widgets";
-import { reduceWidgetOptionsWithDefaultValues } from "@homarr/widgets";
-
-import type { Item } from "~/app/[locale]/boards/_types";
-
-export const filterByItemKind = <TKind extends WidgetKind>(
-  items: Item[],
-  settings: SettingsContextProps,
-  kind: TKind,
-) => {
-  return items
-    .filter((item) => item.kind === kind)
-    .map((item) => ({
-      ...item,
-      options: reduceWidgetOptionsWithDefaultValues(
-        kind,
-        settings,
-        item.options,
-      ) as WidgetComponentProps<TKind>["options"],
-    }));
-};
diff --git a/apps/nextjs/src/components/board/sections/container-section.tsx b/apps/nextjs/src/components/board/sections/container-section.tsx
new file mode 100644
index 000000000..b82907223
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/container-section.tsx
@@ -0,0 +1,175 @@
+import dynamic from "next/dynamic";
+import { ActionIcon, Badge, Box, Button, Card } from "@mantine/core";
+import { IconChevronDown, IconChevronUp, IconExternalLink, IconGripVertical } from "@tabler/icons-react";
+import combineClasses from "clsx";
+
+import { useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+
+import type { ContainerSectionItem } from "~/app/[locale]/boards/_types";
+import { SectionGrid } from "./grid/section-grid";
+import { useSectionCollapse } from "./section-collapse";
+import { useOpenSectionApps } from "./use-open-section-apps";
+import classes from "./item.module.css";
+
+const BoardContainerMenu = dynamic(
+  () => import("./container/container-menu").then((module) => module.BoardContainerMenu),
+  { ssr: false },
+);
+
+interface Props {
+  section: ContainerSectionItem;
+}
+
+export const BoardContainerSection = ({ section }: Props) => {
+  const board = useRequiredBoard();
+  const [isEditMode] = useEditMode();
+  const t = useScopedI18n("section.container");
+  const tAll = useI18n();
+  const options = section.options;
+  const { open: openAllInNewTabs, isLoading: areAppsLoading } = useOpenSectionApps(
+    section.id,
+    options.showOpenAll && !isEditMode,
+  );
+  const { isVisuallyCollapsed, toggle } = useSectionCollapse({
+    sectionId: section.id,
+    collapsible: options.collapsible,
+  });
+  const label = options.title.trim() || t("untitled");
+  const contentId = `board-container-${section.id}-content`;
+  const labelLeft = isEditMode ? 40 : 8;
+  const labelRight = isEditMode ? 48 : options.showOpenAll ? 40 : 8;
+
+  return (
+    <Box className="board-grid-item-content" data-grid-item-content w="100%" h="100%" style={{ overflow: "visible" }}>
+      <Card
+        className={combineClasses(
+          classes.itemCard,
+          options.customCssClasses.join(" "),
+          isVisuallyCollapsed && classes.collapsedContainerCard,
+        )}
+        w="100%"
+        h="100%"
+        data-board-container-collapsed={isVisuallyCollapsed ? "true" : "false"}
+        styles={{
+          root: {
+            overflow: "visible",
+            "--opacity": board.opacity / 100,
+            "--border-color": options.borderColor || undefined,
+          },
+        }}
+        radius={board.itemRadius}
+        p={0}
+      >
+        {options.collapsible && !isEditMode && (
+          <Button
+            className={classes.containerToggle}
+            pos="absolute"
+            top={isVisuallyCollapsed ? 0 : -24}
+            left={0}
+            w="100%"
+            h={isVisuallyCollapsed ? "100%" : 24}
+            px={12}
+            pe={options.showOpenAll ? 40 : 12}
+            radius="sm"
+            variant="default"
+            justify={options.showLabel ? "flex-start" : "center"}
+            leftSection={
+              options.showLabel ? (
+                isVisuallyCollapsed ? (
+                  <IconChevronDown size={16} />
+                ) : (
+                  <IconChevronUp size={16} />
+                )
+              ) : undefined
+            }
+            onClick={toggle}
+            aria-expanded={!isVisuallyCollapsed}
+            aria-controls={contentId}
+            aria-label={`${t(isVisuallyCollapsed ? "action.expand" : "action.collapse")}: ${label}`}
+            data-board-container-collapsed-control={isVisuallyCollapsed ? "true" : undefined}
+            data-board-container-label
+            title={options.showLabel ? label : undefined}
+          >
+            {options.showLabel ? (
+              label
+            ) : isVisuallyCollapsed ? (
+              <IconChevronDown size={16} />
+            ) : (
+              <IconChevronUp size={16} />
+            )}
+          </Button>
+        )}
+        {isEditMode && (
+          <ActionIcon
+            component="span"
+            pos="absolute"
+            top={4}
+            left={4}
+            style={{ zIndex: 10, cursor: "grab", touchAction: "none" }}
+            variant="default"
+            size={24}
+            radius="sm"
+            data-grid-container-drag-handle
+            aria-hidden="true"
+          >
+            <IconGripVertical size={16} />
+          </ActionIcon>
+        )}
+        {!isVisuallyCollapsed && (!options.collapsible || isEditMode) && options.showLabel && options.title && (
+          <Badge
+            pos="absolute"
+            top={-24}
+            left={labelLeft}
+            maw={`calc(100% - ${labelLeft + labelRight}px)`}
+            size="md"
+            radius="sm"
+            variant="default"
+            c="var(--mantine-color-text)"
+            style={{
+              zIndex: 9,
+              overflow: "hidden",
+              pointerEvents: "none",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              backgroundColor: "var(--background-color)",
+              borderColor: "var(--border-color)",
+            }}
+            title={options.title}
+            data-board-container-label
+          >
+            {options.title}
+          </Badge>
+        )}
+        {options.showOpenAll && !isEditMode && (
+          <ActionIcon
+            pos="absolute"
+            top={isVisuallyCollapsed ? "50%" : -24}
+            right={8}
+            style={{ zIndex: 10, transform: isVisuallyCollapsed ? "translateY(-50%)" : undefined }}
+            variant={options.collapsible ? "subtle" : "default"}
+            size={24}
+            radius="sm"
+            loading={areAppsLoading}
+            onClick={openAllInNewTabs}
+            aria-label={tAll("section.action.openAllInNewTabsFor", { name: label })}
+          >
+            <IconExternalLink size={16} />
+          </ActionIcon>
+        )}
+        <Box
+          id={contentId}
+          className={classes.containerBody}
+          h="100%"
+          data-collapsed={isVisuallyCollapsed ? "true" : "false"}
+          aria-hidden={isVisuallyCollapsed}
+          inert={isVisuallyCollapsed}
+        >
+          <SectionGrid section={section} columnCount={section.width} requestedRowCount={section.height} label={label} />
+        </Box>
+      </Card>
+      {isEditMode && <BoardContainerMenu section={section} />}
+    </Box>
+  );
+};
diff --git a/apps/nextjs/src/components/board/sections/container/actions/add-container.ts b/apps/nextjs/src/components/board/sections/container/actions/add-container.ts
new file mode 100644
index 000000000..39f1f37dc
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/container/actions/add-container.ts
@@ -0,0 +1,61 @@
+import { getBoardLayouts } from "@homarr/boards/context";
+import { createId } from "@homarr/common";
+import { getRootSectionLane } from "@homarr/definitions";
+import { containerSectionOptionsSchema } from "@homarr/validation/shared";
+
+import type { Board, ContainerSection, ContainerSectionLayout, EmptySection } from "~/app/[locale]/boards/_types";
+import { getBoardLaneColumnCount } from "~/components/board/layout";
+import { getFirstEmptyPosition } from "~/components/board/items/actions/empty-position";
+import { getSectionElements } from "~/components/board/items/actions/section-elements";
+
+export const addContainerCallback = () => (board: Board) => {
+  const firstSection = board.sections
+    .filter(
+      (section): section is EmptySection => section.kind === "empty" && getRootSectionLane(section.xOffset) === "main",
+    )
+    .toSorted((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset)
+    .at(0);
+
+  if (!firstSection) return board;
+
+  const sectionLayouts = createContainerLayouts(board, firstSection);
+  const newSection = {
+    id: createId(),
+    kind: "container",
+    collapsed: false,
+    options: containerSectionOptionsSchema.parse(undefined),
+    layouts: sectionLayouts,
+  } satisfies ContainerSection;
+
+  return {
+    ...board,
+    sections: board.sections.concat(newSection),
+  };
+};
+
+const createContainerLayouts = (board: Board, currentSection: EmptySection): ContainerSectionLayout[] => {
+  const layouts = getBoardLayouts(board);
+
+  return layouts.map((layoutId) => {
+    const boardLayout = board.layouts.find((layout) => layout.id === layoutId);
+    const elements = getSectionElements(board, { sectionId: currentSection.id, layoutId });
+    const columnCount = boardLayout ? getBoardLaneColumnCount(boardLayout, "main") : 1;
+    const size = {
+      width: Math.min(4, columnCount),
+      height: 3,
+    };
+
+    const emptyPosition = boardLayout
+      ? getFirstEmptyPosition(elements, columnCount, undefined, size)
+      : { xOffset: 0, yOffset: 0 };
+
+    if (!emptyPosition) throw new Error("Your board is full");
+
+    return {
+      ...size,
+      ...emptyPosition,
+      parentSectionId: currentSection.id,
+      layoutId,
+    };
+  });
+};
diff --git a/apps/nextjs/src/components/board/sections/container/actions/container-actions.spec.ts b/apps/nextjs/src/components/board/sections/container/actions/container-actions.spec.ts
new file mode 100644
index 000000000..6dac9e6cc
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/container/actions/container-actions.spec.ts
@@ -0,0 +1,185 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+import * as boardContext from "@homarr/boards/context";
+
+import type { ContainerSection } from "~/app/[locale]/boards/_types";
+import * as emptyPositionModule from "~/components/board/items/actions/empty-position";
+import { BoardMockBuilder } from "~/components/board/items/actions/test/mocks/board-mock";
+import { ContainerSectionMockBuilder } from "~/components/board/items/actions/test/mocks/container-section-mock";
+import { ItemMockBuilder } from "~/components/board/items/actions/test/mocks/item-mock";
+import { addContainerCallback } from "./add-container";
+import { removeContainerCallback } from "./remove-container";
+
+describe("container actions", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test("creates a container in the first main root for every responsive layout", () => {
+    const board = new BoardMockBuilder().addEmptySection({ id: "root", yOffset: 0 }).build();
+    const layout = board.layouts[0];
+    if (!layout) throw new Error("Expected a board layout");
+    layout.id = "layout";
+    layout.columnCount = 2;
+    vi.spyOn(boardContext, "getBoardLayouts").mockReturnValue([layout.id]);
+    vi.spyOn(emptyPositionModule, "getFirstEmptyPosition").mockReturnValue({ xOffset: 0, yOffset: 4 });
+
+    const result = addContainerCallback()(board);
+    const created = result.sections.find((section) => section.kind === "container");
+
+    expect(created).toMatchObject({
+      kind: "container",
+      collapsed: false,
+      options: {
+        showLabel: true,
+        collapsible: false,
+        showOpenAll: false,
+      },
+      layouts: [
+        {
+          layoutId: "layout",
+          parentSectionId: "root",
+          xOffset: 0,
+          yOffset: 4,
+          width: 2,
+          height: 3,
+        },
+      ],
+    });
+  });
+
+  test("removes a container and flattens its direct children into the parent", () => {
+    const removed = new ContainerSectionMockBuilder({ id: "removed" })
+      .addLayout({ layoutId: "layout", parentSectionId: "root", xOffset: 3, yOffset: 4, width: 6, height: 5 })
+      .build();
+    const child = new ContainerSectionMockBuilder({ id: "child" })
+      .addLayout({ layoutId: "layout", parentSectionId: removed.id, xOffset: 1, yOffset: 2, width: 2, height: 2 })
+      .build();
+    const nestedItem = new ItemMockBuilder({ id: "nested-item" })
+      .addLayout({ layoutId: "layout", sectionId: removed.id, xOffset: 2, yOffset: 1, width: 1, height: 1 })
+      .build();
+    const board = new BoardMockBuilder()
+      .addEmptySection({ id: "root" })
+      .addSection(removed)
+      .addSection(child)
+      .addItem(nestedItem)
+      .build();
+    const layout = board.layouts[0];
+    if (!layout) throw new Error("Expected a board layout");
+    layout.id = "layout";
+
+    const result = removeContainerCallback({ id: removed.id })(board);
+    const flattenedChild = result.sections.find(
+      (section): section is ContainerSection => section.kind === "container" && section.id === child.id,
+    );
+
+    expect(result.sections.some((section) => section.id === removed.id)).toBe(false);
+    expect(flattenedChild?.layouts[0]).toMatchObject({
+      parentSectionId: "root",
+      xOffset: 4,
+      yOffset: 6,
+    });
+    expect(result.items.find((item) => item.id === nestedItem.id)?.layouts[0]).toMatchObject({
+      sectionId: "root",
+      xOffset: 5,
+      yOffset: 5,
+    });
+  });
+
+  test("normalizes, pins the top-left child, and resolves collisions while flattening malformed geometry", () => {
+    const removed = new ContainerSectionMockBuilder({ id: "removed" })
+      .addLayout({ layoutId: "layout", parentSectionId: "root", xOffset: 2, yOffset: 0, width: 2, height: 2 })
+      .build();
+    const existing = new ItemMockBuilder({ id: "existing" })
+      .addLayout({ layoutId: "layout", sectionId: "root", xOffset: 0, yOffset: 0, width: 2, height: 1 })
+      .build();
+    const childA = new ItemMockBuilder({ id: "a" })
+      .addLayout({ layoutId: "layout", sectionId: removed.id, xOffset: 1, yOffset: 0, width: 2, height: 1 })
+      .build();
+    const childB = new ItemMockBuilder({ id: "b" })
+      .addLayout({ layoutId: "layout", sectionId: removed.id, xOffset: 0, yOffset: 0, width: 2, height: 1 })
+      .build();
+    const board = new BoardMockBuilder()
+      .addEmptySection({ id: "root" })
+      .addSection(removed)
+      .addItems([existing, childA, childB])
+      .build();
+    const layout = board.layouts[0];
+    if (!layout) throw new Error("Expected a board layout");
+    layout.id = "layout";
+    layout.columnCount = 4;
+
+    const result = removeContainerCallback({ id: removed.id })(board);
+    const layouts = Object.fromEntries(
+      result.items.map((item) => {
+        const itemLayout = item.layouts[0];
+        if (!itemLayout) throw new Error("Expected an item layout");
+        return [item.id, itemLayout];
+      }),
+    );
+
+    expect(layouts.existing).toMatchObject({ xOffset: 0, yOffset: 0, width: 2, height: 1 });
+    expect(layouts.a).toMatchObject({ sectionId: "root", xOffset: 2, yOffset: 1, width: 2, height: 1 });
+    expect(layouts.b).toMatchObject({ sectionId: "root", xOffset: 2, yOffset: 0, width: 2, height: 1 });
+  });
+
+  test("keeps the container when a child container has layout geometry that cannot be flattened", () => {
+    const removed = new ContainerSectionMockBuilder({ id: "removed" })
+      .addLayout({ layoutId: "other-layout", parentSectionId: "root", xOffset: 3, yOffset: 4 })
+      .build();
+    const child = new ContainerSectionMockBuilder({ id: "child" })
+      .addLayout({ layoutId: "layout", parentSectionId: removed.id, xOffset: 1, yOffset: 2 })
+      .build();
+    const board = new BoardMockBuilder().addSection(removed).addSection(child).build();
+
+    const result = removeContainerCallback({ id: removed.id })(board);
+
+    expect(result).toBe(board);
+    expect(result.sections).toContainEqual(removed);
+  });
+
+  test("keeps the container when a child item has layout geometry that cannot be flattened", () => {
+    const removed = new ContainerSectionMockBuilder({ id: "removed" })
+      .addLayout({ layoutId: "other-layout", parentSectionId: "root", xOffset: 3, yOffset: 4 })
+      .build();
+    const item = new ItemMockBuilder({ id: "item" })
+      .addLayout({ layoutId: "layout", sectionId: removed.id, xOffset: 2, yOffset: 1 })
+      .build();
+    const board = new BoardMockBuilder().addSection(removed).addItem(item).build();
+
+    const result = removeContainerCallback({ id: removed.id })(board);
+
+    expect(result).toBe(board);
+    expect(result.sections).toContainEqual(removed);
+  });
+
+  test("keeps the container when flattening would move a child back into the removed container", () => {
+    const removed = new ContainerSectionMockBuilder({ id: "removed" })
+      .addLayout({ layoutId: "layout", parentSectionId: "removed", xOffset: 3, yOffset: 4 })
+      .build();
+    const item = new ItemMockBuilder({ id: "item" })
+      .addLayout({ layoutId: "layout", sectionId: removed.id, xOffset: 2, yOffset: 1 })
+      .build();
+    const board = new BoardMockBuilder().addSection(removed).addItem(item).build();
+
+    const result = removeContainerCallback({ id: removed.id })(board);
+
+    expect(result).toBe(board);
+    expect(result.sections).toContainEqual(removed);
+  });
+
+  test("keeps the container when its destination is a child container", () => {
+    const removed = new ContainerSectionMockBuilder({ id: "removed" })
+      .addLayout({ layoutId: "layout", parentSectionId: "child", xOffset: 3, yOffset: 4 })
+      .build();
+    const child = new ContainerSectionMockBuilder({ id: "child" })
+      .addLayout({ layoutId: "layout", parentSectionId: removed.id, xOffset: 1, yOffset: 2 })
+      .build();
+    const board = new BoardMockBuilder().addSection(removed).addSection(child).build();
+
+    const result = removeContainerCallback({ id: removed.id })(board);
+
+    expect(result).toBe(board);
+    expect(result.sections).toContainEqual(removed);
+  });
+});
diff --git a/apps/nextjs/src/components/board/sections/container/actions/remove-container.ts b/apps/nextjs/src/components/board/sections/container/actions/remove-container.ts
new file mode 100644
index 000000000..8562d0f9a
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/container/actions/remove-container.ts
@@ -0,0 +1,181 @@
+import type { Board, ContainerSection } from "~/app/[locale]/boards/_types";
+import { resolvePinnedGridCollisions } from "~/components/board/sections/grid/dnd";
+import {
+  getSectionGridColumnCount,
+  getSectionGridPlacements,
+} from "~/components/board/sections/grid/section-grid-placements";
+import type { SectionGridPlacement } from "~/components/board/sections/grid/use-grid-layout-actions";
+
+export interface RemoveContainerInput {
+  id: string;
+}
+
+export const removeContainerCallback =
+  ({ id }: RemoveContainerInput) =>
+  (board: Board): Board => {
+    const sectionToRemove = board.sections.find(
+      (section): section is ContainerSection => section.id === id && section.kind === "container",
+    );
+    if (!sectionToRemove) return board;
+
+    const removedLayoutsById = new Map(sectionToRemove.layouts.map((layout) => [layout.layoutId, layout]));
+    const childLayoutIds = [
+      ...board.sections.flatMap((section) =>
+        section.kind === "container"
+          ? section.layouts.flatMap((layout) =>
+              layout.parentSectionId === sectionToRemove.id ? [layout.layoutId] : [],
+            )
+          : [],
+      ),
+      ...board.items.flatMap((item) =>
+        item.layouts.flatMap((layout) => (layout.sectionId === sectionToRemove.id ? [layout.layoutId] : [])),
+      ),
+    ];
+    const hasUnresolvableChildLayout = childLayoutIds.some((layoutId) => {
+      const removedLayout = removedLayoutsById.get(layoutId);
+      return (
+        !removedLayout || !isValidFlattenDestination(board, sectionToRemove.id, layoutId, removedLayout.parentSectionId)
+      );
+    });
+    if (hasUnresolvableChildLayout) return board;
+
+    const flattened = {
+      ...board,
+      sections: board.sections
+        .filter((section) => section.id !== id)
+        .map((section) => {
+          if (section.kind !== "container") return section;
+
+          return {
+            ...section,
+            layouts: section.layouts.map((layout) => {
+              if (layout.parentSectionId !== sectionToRemove.id) return layout;
+
+              const removedSectionLayout = sectionToRemove.layouts.find(
+                (layoutToRemove) => layoutToRemove.layoutId === layout.layoutId,
+              );
+              if (!removedSectionLayout) return layout;
+
+              return {
+                ...layout,
+                xOffset: layout.xOffset + removedSectionLayout.xOffset,
+                yOffset: layout.yOffset + removedSectionLayout.yOffset,
+                parentSectionId: removedSectionLayout.parentSectionId,
+              };
+            }),
+          };
+        }),
+      items: board.items.map((item) => ({
+        ...item,
+        layouts: item.layouts.map((layout) => {
+          if (layout.sectionId !== sectionToRemove.id) return layout;
+
+          const removedSectionLayout = sectionToRemove.layouts.find(
+            (layoutToRemove) => layoutToRemove.layoutId === layout.layoutId,
+          );
+          if (!removedSectionLayout) return layout;
+
+          return {
+            ...layout,
+            xOffset: layout.xOffset + removedSectionLayout.xOffset,
+            yOffset: layout.yOffset + removedSectionLayout.yOffset,
+            sectionId: removedSectionLayout.parentSectionId,
+          };
+        }),
+      })),
+    };
+
+    return resolveFlattenedLayouts(flattened, sectionToRemove, board);
+  };
+
+const isValidFlattenDestination = (
+  board: Board,
+  removedSectionId: string,
+  layoutId: string,
+  destinationSectionId: string,
+) => {
+  const visited = new Set<string>();
+  let sectionId = destinationSectionId;
+
+  while (true) {
+    if (sectionId === removedSectionId || visited.has(sectionId)) return false;
+    visited.add(sectionId);
+
+    const section = board.sections.find((candidate) => candidate.id === sectionId);
+    if (!section) return false;
+    if (section.kind !== "container") return true;
+
+    const layout = section.layouts.find((candidate) => candidate.layoutId === layoutId);
+    if (!layout) return false;
+    sectionId = layout.parentSectionId;
+  }
+};
+
+const resolveFlattenedLayouts = (board: Board, removed: ContainerSection, original: Board): Board => {
+  const resolvedByLayoutAndId = new Map<string, SectionGridPlacement>();
+
+  for (const removedLayout of removed.layouts) {
+    const movedIds = [
+      ...original.items.flatMap((item) => {
+        const layout = item.layouts.find((candidate) => candidate.layoutId === removedLayout.layoutId);
+        return layout?.sectionId === removed.id ? [item.id] : [];
+      }),
+      ...original.sections.flatMap((section) => {
+        if (section.kind !== "container") return [];
+        const layout = section.layouts.find((candidate) => candidate.layoutId === removedLayout.layoutId);
+        return layout?.parentSectionId === removed.id ? [section.id] : [];
+      }),
+    ];
+    const columnCount = getSectionGridColumnCount(board, removedLayout.layoutId, removedLayout.parentSectionId);
+    if (!columnCount) continue;
+    const placements = getSectionGridPlacements(board, removedLayout.layoutId, removedLayout.parentSectionId);
+    const movedIdSet = new Set(movedIds);
+    const pinned = placements
+      .filter((placement) => movedIdSet.has(placement.id))
+      .toSorted((first, second) => first.y - second.y || first.x - second.x || first.id.localeCompare(second.id))[0];
+    if (!pinned) continue;
+
+    for (const placement of resolvePinnedGridCollisions(placements, pinned, columnCount)) {
+      resolvedByLayoutAndId.set(`${removedLayout.layoutId}:${placement.id}`, placement);
+    }
+  }
+
+  if (resolvedByLayoutAndId.size === 0) return board;
+  return {
+    ...board,
+    items: board.items.map((item) => ({
+      ...item,
+      layouts: item.layouts.map((layout) => {
+        const placement = resolvedByLayoutAndId.get(`${layout.layoutId}:${item.id}`);
+        return placement?.type === "item"
+          ? {
+              ...layout,
+              xOffset: placement.x,
+              yOffset: placement.y,
+              width: placement.w,
+              height: placement.h,
+            }
+          : layout;
+      }),
+    })),
+    sections: board.sections.map((section) =>
+      section.kind !== "container"
+        ? section
+        : {
+            ...section,
+            layouts: section.layouts.map((layout) => {
+              const placement = resolvedByLayoutAndId.get(`${layout.layoutId}:${section.id}`);
+              return placement?.type === "section"
+                ? {
+                    ...layout,
+                    xOffset: placement.x,
+                    yOffset: placement.y,
+                    width: placement.w,
+                    height: placement.h,
+                  }
+                : layout;
+            }),
+          },
+    ),
+  };
+};
diff --git a/apps/nextjs/src/components/board/sections/container/container-actions.ts b/apps/nextjs/src/components/board/sections/container/container-actions.ts
new file mode 100644
index 000000000..c9545ef9d
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/container/container-actions.ts
@@ -0,0 +1,42 @@
+import { useCallback } from "react";
+
+import { useUpdateBoard } from "@homarr/boards/updater";
+import type { ContainerSectionOptions } from "@homarr/validation/shared";
+
+import { addContainerCallback } from "./actions/add-container";
+import type { RemoveContainerInput } from "./actions/remove-container";
+import { removeContainerCallback } from "./actions/remove-container";
+
+interface UpdateContainerOptions {
+  containerId: string;
+  newOptions: ContainerSectionOptions;
+}
+
+export const useContainerActions = () => {
+  const { updateBoard } = useUpdateBoard();
+
+  const addContainer = useCallback(() => {
+    updateBoard(addContainerCallback());
+  }, [updateBoard]);
+
+  const updateContainer = useCallback(
+    ({ containerId, newOptions }: UpdateContainerOptions) => {
+      updateBoard((previous) => ({
+        ...previous,
+        sections: previous.sections.map((item) =>
+          item.id !== containerId || item.kind !== "container" ? item : { ...item, options: newOptions },
+        ),
+      }));
+    },
+    [updateBoard],
+  );
+
+  const removeContainer = useCallback(
+    (input: RemoveContainerInput) => {
+      updateBoard(removeContainerCallback(input));
+    },
+    [updateBoard],
+  );
+
+  return { addContainer, updateContainer, removeContainer };
+};
diff --git a/apps/nextjs/src/components/board/sections/container/container-edit-modal.tsx b/apps/nextjs/src/components/board/sections/container/container-edit-modal.tsx
new file mode 100644
index 000000000..cfa2a8e09
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/container/container-edit-modal.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { CloseButton, ColorInput, Stack, Switch, TextInput, useMantineTheme } from "@mantine/core";
+import type { z } from "zod/v4";
+
+import { useZodForm } from "@homarr/form";
+import { createModal, ModalFormFooter, modalSizeForm } from "@homarr/modals";
+import { useI18n } from "@homarr/translation/client";
+import { TextMultiSelect } from "@homarr/ui";
+import { containerSectionOptionsSchema } from "@homarr/validation/shared";
+
+interface ModalProps {
+  value: z.infer<typeof containerSectionOptionsSchema>;
+  onSuccessfulEdit: (value: z.infer<typeof containerSectionOptionsSchema>) => void;
+}
+
+export const ContainerEditModal = createModal<ModalProps>(({ actions, innerProps }) => {
+  const t = useI18n();
+  const theme = useMantineTheme();
+  const form = useZodForm(containerSectionOptionsSchema.unwrap(), {
+    mode: "controlled",
+    initialValues: { ...innerProps.value },
+  });
+
+  return (
+    <form
+      onSubmit={form.onSubmit((values) => {
+        innerProps.onSuccessfulEdit(values);
+        actions.closeModal();
+      })}
+    >
+      <Stack>
+        <TextInput label={t("section.container.option.title.label")} data-autofocus {...form.getInputProps("title")} />
+        <Switch
+          label={t("section.option.showLabel.label")}
+          description={t("section.option.showLabel.description")}
+          {...form.getInputProps("showLabel", { type: "checkbox" })}
+        />
+        <Switch
+          label={t("section.option.collapsible.label")}
+          description={t("section.option.collapsible.description")}
+          {...form.getInputProps("collapsible", { type: "checkbox" })}
+        />
+        <Switch
+          label={t("section.option.showOpenAll.label")}
+          description={t("section.option.showOpenAll.description")}
+          {...form.getInputProps("showOpenAll", { type: "checkbox" })}
+        />
+        <TextMultiSelect
+          label={t("section.container.option.customCssClasses.label")}
+          {...form.getInputProps("customCssClasses")}
+        />
+        <ColorInput
+          label={t("section.container.option.borderColor.label")}
+          format="hex"
+          swatches={Object.values(theme.colors).map((color) => color[6])}
+          rightSection={
+            <CloseButton
+              onClick={() => form.setFieldValue("borderColor", "")}
+              style={{ display: form.getInputProps("borderColor").value ? undefined : "none" }}
+            />
+          }
+          {...form.getInputProps("borderColor")}
+        />
+        <ModalFormFooter onCancel={actions.closeModal} />
+      </Stack>
+    </form>
+  );
+}).withOptions({
+  defaultTitle(t) {
+    return t("item.edit.title");
+  },
+  size: modalSizeForm,
+});
diff --git a/apps/nextjs/src/components/board/sections/container/container-menu.tsx b/apps/nextjs/src/components/board/sections/container/container-menu.tsx
new file mode 100644
index 000000000..c820e272c
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/container/container-menu.tsx
@@ -0,0 +1,79 @@
+import { ActionIcon, Menu } from "@mantine/core";
+import { IconArrowsMove, IconLayoutKanban, IconPencil, IconTrash } from "@tabler/icons-react";
+
+import { useEditMode } from "@homarr/boards/edit-mode";
+import { useConfirmModal, useModalAction } from "@homarr/modals";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+
+import type { ContainerSectionItem } from "~/app/[locale]/boards/_types";
+import { useOpenItemMoveModal } from "../../items/item-move-modal";
+import { useSectionContext } from "../section-context";
+import { useContainerActions } from "./container-actions";
+import { ContainerEditModal } from "./container-edit-modal";
+
+export const BoardContainerMenu = ({ section }: { section: ContainerSectionItem }) => {
+  const t = useI18n();
+  const tContainer = useScopedI18n("section.container");
+  const tItem = useScopedI18n("item");
+  const { openModal } = useModalAction(ContainerEditModal);
+  const openMoveModal = useOpenItemMoveModal();
+  const { updateContainer, removeContainer } = useContainerActions();
+  const { openConfirmModal } = useConfirmModal();
+  const [isEditMode] = useEditMode();
+  const { section: parentSection } = useSectionContext();
+  const label = section.options.title || tContainer("action.create");
+  const menuRightOffset = parentSection.kind === "container" ? 44 : 4;
+
+  if (!isEditMode) return null;
+
+  const openEditModal = () => {
+    openModal({
+      value: section.options,
+      onSuccessfulEdit: (options) => updateContainer({ containerId: section.id, newOptions: options }),
+    });
+  };
+
+  const openRemoveModal = () => {
+    openConfirmModal({
+      title: tContainer("remove.title"),
+      children: tContainer("remove.message"),
+      onConfirm: () => removeContainer({ id: section.id }),
+    });
+  };
+
+  return (
+    <Menu withinPortal position="right-start" arrowPosition="center">
+      <Menu.Target>
+        <ActionIcon
+          variant="default"
+          size={24}
+          radius="sm"
+          pos="absolute"
+          top={-24}
+          right={menuRightOffset}
+          style={{ zIndex: 10 }}
+          aria-label={tItem("menu.label.settingsFor", { name: label })}
+        >
+          <IconLayoutKanban size="1rem" />
+        </ActionIcon>
+      </Menu.Target>
+      <Menu.Dropdown miw={128}>
+        <Menu.Label>{tItem("menu.label.settings")}</Menu.Label>
+        <Menu.Item leftSection={<IconPencil size={16} />} onClick={openEditModal}>
+          {tItem("action.edit")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconArrowsMove size={16} />}
+          onClick={() => openMoveModal({ entry: section, sourceSectionId: section.parentSectionId })}
+        >
+          {tItem("action.moveResize")}
+        </Menu.Item>
+        <Menu.Divider />
+        <Menu.Label c="red.6">{t("common.dangerZone")}</Menu.Label>
+        <Menu.Item c="red.6" leftSection={<IconTrash size={16} />} onClick={openRemoveModal}>
+          {tContainer("action.remove")}
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+};
diff --git a/apps/nextjs/src/components/board/sections/content.tsx b/apps/nextjs/src/components/board/sections/content.tsx
index ced30c796..541e96967 100644
--- a/apps/nextjs/src/components/board/sections/content.tsx
+++ b/apps/nextjs/src/components/board/sections/content.tsx
@@ -1,27 +1,19 @@
 import { useMemo } from "react";
 
-import type { GridItemHTMLElement } from "@homarr/gridstack";
-
 import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
 
-import type { DynamicSectionItem, SectionItem } from "~/app/[locale]/boards/_types";
+import type { ContainerSectionItem, SectionItem } from "~/app/[locale]/boards/_types";
 import { BoardItemContent } from "../items/item-content";
 import { WidgetHoverOverlay } from "../items/widget-hover-overlay";
-import { BoardDynamicSection } from "./dynamic-section";
-import { GridStackItem } from "./gridstack/gridstack-item";
+import { BoardContainerSection } from "./container-section";
+import { FixedGridItem } from "./grid/fixed-grid-item";
 import { useSectionContext } from "./section-context";
 import { useSectionItems } from "./use-section-items";
 
 export const SectionContent = () => {
-  const { innerSections, items, refs } = useSectionContext();
-  const { data: integrations } = clientApi.integration.all.useQuery();
+  const { innerSections, integrations, items } = useSectionContext();
 
-  /**
-   * IMPORTANT: THE ORDER OF THE BELOW ITEMS HAS TO MATCH THE ORDER OF
-   * THE ITEMS RENDERED WITH GRIDSTACK, OTHERWISE THE ITEMS WILL BE MIXED UP
-   * @see https://github.com/homarr-labs/homarr/pull/1770
-   */
+  /** Keep portal content order deterministic across static and edit renderers. */
   const sortedItems = useMemo(() => {
     return [...items, ...innerSections].toSorted((itemA, itemB) => {
       if (itemA.yOffset === itemB.yOffset) {
@@ -35,57 +27,39 @@ export const SectionContent = () => {
   return (
     <>
       {sortedItems.map((item) => (
-        <Item key={item.id} item={item} innerRef={refs.items.current[item.id]} integrations={integrations} />
+        <SectionContentItem key={item.id} item={item} integrations={integrations} />
       ))}
     </>
   );
 };
 
 interface ItemProps {
-  item: DynamicSectionItem | SectionItem;
-  innerRef: React.RefObject<GridItemHTMLElement | null> | undefined;
+  item: ContainerSectionItem | SectionItem;
   integrations: RouterOutputs["integration"]["all"] | undefined;
 }
 
-const Item = ({ item, innerRef, integrations }: ItemProps) => {
+export const SectionContentItem = ({ item, integrations }: ItemProps) => {
   const minWidth = useMinSize(item, "x");
   const minHeight = useMinSize(item, "y");
   return (
-    <GridStackItem
-      key={item.id}
-      innerRef={innerRef}
-      width={item.width}
-      height={item.height}
-      xOffset={item.xOffset}
-      yOffset={item.yOffset}
-      kind={item.kind}
-      id={item.id}
-      type={item.type}
-      minWidth={minWidth}
-      minHeight={minHeight}
-    >
+    <FixedGridItem key={item.id} item={item} minWidth={minWidth} minHeight={minHeight}>
       {item.type === "item" && item.kind !== "app" && <WidgetHoverOverlay item={item} integrations={integrations} />}
-      {item.type === "item" ? <BoardItemContent item={item} /> : <BoardDynamicSection section={item} />}
-    </GridStackItem>
+      {item.type === "item" ? <BoardItemContent item={item} /> : <BoardContainerSection section={item} />}
+    </FixedGridItem>
   );
 };
 
 /**
- * Calculates the min width / height of a section by taking the maximum of
- * the sum of the offset and size of all items and dynamic sections inside.
- * @param direction either "x" or "y"
- * @param items items of the section
- * @param sections sections of the board to look for dynamic sections
- * @param parentSectionId the id of the section we want to calculate the min size for
- * @returns the min size
+ * Calculates a container's minimum width or height from its direct content.
  */
-const useMinSize = (item: DynamicSectionItem | SectionItem, direction: "x" | "y") => {
+export const useMinSize = (item: ContainerSectionItem | SectionItem, direction: "x" | "y") => {
   const { items, innerSections } = useSectionItems(item.id);
   if (item.type === "item") return undefined;
 
   const size = direction === "x" ? "width" : "height";
   return Math.max(
-    ...items.map((item) => item[`${direction}Offset`] + item[size]),
-    ...innerSections.map((item) => item[`${direction}Offset`] + item[size]),
+    1,
+    ...items.map((childItem) => childItem[`${direction}Offset`] + childItem[size]),
+    ...innerSections.map((childSection) => childSection[`${direction}Offset`] + childSection[size]),
   );
 };
diff --git a/apps/nextjs/src/components/board/sections/dynamic-section.tsx b/apps/nextjs/src/components/board/sections/dynamic-section.tsx
deleted file mode 100644
index 8bb0a52c3..000000000
--- a/apps/nextjs/src/components/board/sections/dynamic-section.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Badge, Box, Card } from "@mantine/core";
-import combineClasses from "clsx";
-
-import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
-
-import type { DynamicSectionItem } from "~/app/[locale]/boards/_types";
-import { BoardDynamicSectionMenu } from "./dynamic/dynamic-menu";
-import { GridStack } from "./gridstack/gridstack";
-import classes from "./item.module.css";
-
-interface Props {
-  section: DynamicSectionItem;
-}
-
-export const BoardDynamicSection = ({ section }: Props) => {
-  const board = useRequiredBoard();
-  const currentLayoutId = useCurrentLayout();
-  const options = section.options;
-
-  return (
-    <Box
-      className="grid-stack-item-content"
-      style={{
-        overflow: "visible",
-      }}
-    >
-      <Card
-        className={combineClasses(classes.itemCard, section.options.customCssClasses.join(" "))}
-        w="100%"
-        h="100%"
-        styles={{
-          root: {
-            overflow: "visible",
-            "--opacity": board.opacity / 100,
-            "--border-color": options.borderColor || undefined,
-          },
-        }}
-        radius={board.itemRadius}
-        p={0}
-      >
-        {options.title && (
-          <Badge
-            pos="absolute"
-            top={-15}
-            left={10}
-            size="md"
-            radius={board.itemRadius}
-            color="var(--background-color)"
-            c="var(--mantine-color-text)"
-            bd="1px solid var(--border-color)"
-          >
-            {options.title}
-          </Badge>
-        )}
-        {/* Use unique key by layout to reinitialize gridstack */}
-        <GridStack key={`${currentLayoutId}-${section.id}`} section={section} className="min-row" />
-      </Card>
-      <BoardDynamicSectionMenu section={section} />
-    </Box>
-  );
-};
diff --git a/apps/nextjs/src/components/board/sections/dynamic/actions/add-dynamic-section.ts b/apps/nextjs/src/components/board/sections/dynamic/actions/add-dynamic-section.ts
deleted file mode 100644
index ba85cecfb..000000000
--- a/apps/nextjs/src/components/board/sections/dynamic/actions/add-dynamic-section.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { getBoardLayouts } from "@homarr/boards/context";
-import { createId } from "@homarr/common";
-
-import type { Board, DynamicSection, DynamicSectionLayout, EmptySection } from "~/app/[locale]/boards/_types";
-import { getFirstEmptyPosition } from "~/components/board/items/actions/empty-position";
-import { getSectionElements } from "~/components/board/items/actions/section-elements";
-
-export const addDynamicSectionCallback = () => (board: Board) => {
-  const firstSection = board.sections
-    .filter((section) => section.kind === "empty")
-    .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset)
-    .at(0);
-
-  if (!firstSection) return board;
-
-  const newSection = {
-    id: createId(),
-    kind: "dynamic",
-    options: {
-      title: "",
-      borderColor: "",
-      customCssClasses: [],
-    },
-    layouts: createDynamicSectionLayouts(board, firstSection),
-  } satisfies DynamicSection;
-
-  return {
-    ...board,
-    sections: board.sections.concat(newSection as unknown as DynamicSection),
-  };
-};
-
-const createDynamicSectionLayouts = (board: Board, currentSection: EmptySection): DynamicSectionLayout[] => {
-  const layouts = getBoardLayouts(board);
-
-  return layouts.map((layoutId) => {
-    const boardLayout = board.layouts.find((layout) => layout.id === layoutId);
-    const elements = getSectionElements(board, { sectionId: currentSection.id, layoutId });
-
-    const emptyPosition = boardLayout
-      ? getFirstEmptyPosition(elements, boardLayout.columnCount)
-      : { xOffset: 0, yOffset: 0 };
-
-    if (!emptyPosition) {
-      throw new Error("Your board is full");
-    }
-
-    return {
-      width: 1,
-      height: 1,
-      ...emptyPosition,
-      parentSectionId: currentSection.id,
-      layoutId,
-    };
-  });
-};
diff --git a/apps/nextjs/src/components/board/sections/dynamic/actions/remove-dynamic-section.ts b/apps/nextjs/src/components/board/sections/dynamic/actions/remove-dynamic-section.ts
deleted file mode 100644
index da329433f..000000000
--- a/apps/nextjs/src/components/board/sections/dynamic/actions/remove-dynamic-section.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { Board, DynamicSection } from "~/app/[locale]/boards/_types";
-
-export interface RemoveDynamicSectionInput {
-  id: string;
-}
-
-export const removeDynamicSectionCallback =
-  ({ id }: RemoveDynamicSectionInput) =>
-  (board: Board): Board => {
-    const sectionToRemove = board.sections.find(
-      (section): section is DynamicSection => section.id === id && section.kind === "dynamic",
-    );
-    if (!sectionToRemove) return board;
-
-    return {
-      ...board,
-      sections: board.sections
-        .filter((section) => section.id !== id)
-        .map((section) => {
-          if (section.kind !== "dynamic") return section;
-
-          // Change xOffset and yOffset of sections that were below the removed section and set parentSectionId to the parent of the removed section
-          return {
-            ...section,
-            layouts: section.layouts.map((layout) => {
-              if (layout.parentSectionId !== sectionToRemove.id) return layout;
-
-              const removedSectionLayout = sectionToRemove.layouts.find(
-                (layoutToRemove) => layoutToRemove.layoutId === layout.layoutId,
-              );
-              if (!removedSectionLayout) throw new Error("Layout not found");
-
-              return {
-                ...layout,
-                xOffset: layout.xOffset + removedSectionLayout.xOffset,
-                yOffset: layout.yOffset + removedSectionLayout.yOffset,
-                parentSectionId: removedSectionLayout.parentSectionId,
-              };
-            }),
-          };
-        }),
-      // Move all items in dynamic section to parent of the removed section
-      items: board.items.map((item) => ({
-        ...item,
-        layouts: item.layouts.map((layout) => {
-          if (layout.sectionId !== sectionToRemove.id) return layout;
-
-          const removedSectionLayout = sectionToRemove.layouts.find(
-            (layoutToRemove) => layoutToRemove.layoutId === layout.layoutId,
-          );
-          if (!removedSectionLayout) throw new Error("Layout not found");
-
-          return {
-            ...layout,
-            xOffset: layout.xOffset + removedSectionLayout.xOffset,
-            yOffset: layout.yOffset + removedSectionLayout.yOffset,
-            sectionId: removedSectionLayout.parentSectionId,
-          };
-        }),
-      })),
-    };
-  };
diff --git a/apps/nextjs/src/components/board/sections/dynamic/dynamic-actions.ts b/apps/nextjs/src/components/board/sections/dynamic/dynamic-actions.ts
deleted file mode 100644
index 230e28334..000000000
--- a/apps/nextjs/src/components/board/sections/dynamic/dynamic-actions.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useCallback } from "react";
-import type { z } from "zod/v4";
-
-import { useUpdateBoard } from "@homarr/boards/updater";
-import type { dynamicSectionOptionsSchema } from "@homarr/validation/shared";
-
-import { addDynamicSectionCallback } from "./actions/add-dynamic-section";
-import type { RemoveDynamicSectionInput } from "./actions/remove-dynamic-section";
-import { removeDynamicSectionCallback } from "./actions/remove-dynamic-section";
-
-interface UpdateDynamicOptions {
-  itemId: string;
-  newOptions: z.infer<typeof dynamicSectionOptionsSchema>;
-}
-
-export const useDynamicSectionActions = () => {
-  const { updateBoard } = useUpdateBoard();
-
-  const addDynamicSection = useCallback(() => {
-    updateBoard(addDynamicSectionCallback());
-  }, [updateBoard]);
-
-  const updateDynamicSection = useCallback(
-    ({ itemId, newOptions }: UpdateDynamicOptions) => {
-      updateBoard((previous) => ({
-        ...previous,
-        sections: previous.sections.map((item) => (item.id !== itemId ? item : { ...item, options: newOptions })),
-      }));
-    },
-    [updateBoard],
-  );
-
-  const removeDynamicSection = useCallback(
-    (input: RemoveDynamicSectionInput) => {
-      updateBoard(removeDynamicSectionCallback(input));
-    },
-    [updateBoard],
-  );
-
-  return {
-    addDynamicSection,
-    updateDynamicSection,
-    removeDynamicSection,
-  };
-};
diff --git a/apps/nextjs/src/components/board/sections/dynamic/dynamic-edit-modal.tsx b/apps/nextjs/src/components/board/sections/dynamic/dynamic-edit-modal.tsx
deleted file mode 100644
index c2f929b41..000000000
--- a/apps/nextjs/src/components/board/sections/dynamic/dynamic-edit-modal.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-"use client";
-
-import { CloseButton, ColorInput, Stack, TextInput, useMantineTheme } from "@mantine/core";
-import type { z } from "zod/v4";
-
-import { useZodForm } from "@homarr/form";
-import { createModal, ModalFormFooter, modalSizeForm } from "@homarr/modals";
-import { useI18n } from "@homarr/translation/client";
-import { TextMultiSelect } from "@homarr/ui";
-import { dynamicSectionOptionsSchema } from "@homarr/validation/shared";
-
-interface ModalProps {
-  value: z.infer<typeof dynamicSectionOptionsSchema>;
-  onSuccessfulEdit: (value: z.infer<typeof dynamicSectionOptionsSchema>) => void;
-}
-
-export const DynamicSectionEditModal = createModal<ModalProps>(({ actions, innerProps }) => {
-  const t = useI18n();
-  const theme = useMantineTheme();
-
-  const form = useZodForm(dynamicSectionOptionsSchema, {
-    mode: "controlled",
-    initialValues: { ...innerProps.value },
-  });
-
-  return (
-    <form
-      onSubmit={form.onSubmit((values) => {
-        innerProps.onSuccessfulEdit(values);
-        actions.closeModal();
-      })}
-    >
-      <Stack>
-        <TextInput label={t("section.dynamic.option.title.label")} data-autofocus {...form.getInputProps("title")} />
-        <TextMultiSelect
-          label={t("section.dynamic.option.customCssClasses.label")}
-          {...form.getInputProps("customCssClasses")}
-        />
-        <ColorInput
-          label={t("section.dynamic.option.borderColor.label")}
-          format="hex"
-          swatches={Object.values(theme.colors).map((color) => color[6])}
-          rightSection={
-            <CloseButton
-              onClick={() => form.setFieldValue("borderColor", "")}
-              style={{ display: form.getInputProps("borderColor").value ? undefined : "none" }}
-            />
-          }
-          {...form.getInputProps("borderColor")}
-        />
-        <ModalFormFooter onCancel={actions.closeModal} />
-      </Stack>
-    </form>
-  );
-}).withOptions({
-  defaultTitle(t) {
-    return t("item.edit.title");
-  },
-  size: modalSizeForm,
-});
diff --git a/apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx b/apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx
deleted file mode 100644
index cffc3446f..000000000
--- a/apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { ActionIcon, Menu } from "@mantine/core";
-import { IconDotsVertical, IconPencil, IconTrash } from "@tabler/icons-react";
-
-import { useEditMode } from "@homarr/boards/edit-mode";
-import { useConfirmModal, useModalAction } from "@homarr/modals";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
-
-import type { DynamicSectionItem } from "~/app/[locale]/boards/_types";
-import { useDynamicSectionActions } from "./dynamic-actions";
-import { DynamicSectionEditModal } from "./dynamic-edit-modal";
-
-export const BoardDynamicSectionMenu = ({ section }: { section: DynamicSectionItem }) => {
-  const t = useI18n();
-  const tDynamic = useScopedI18n("section.dynamic");
-  const tItem = useScopedI18n("item");
-  const { openModal } = useModalAction(DynamicSectionEditModal);
-  const { updateDynamicSection, removeDynamicSection } = useDynamicSectionActions();
-  const { openConfirmModal } = useConfirmModal();
-  const [isEditMode] = useEditMode();
-
-  if (!isEditMode) return null;
-
-  const openEditModal = () => {
-    openModal({
-      value: section.options,
-      onSuccessfulEdit: (options) => {
-        updateDynamicSection({
-          itemId: section.id,
-          newOptions: options,
-        });
-      },
-    });
-  };
-
-  const openRemoveModal = () => {
-    openConfirmModal({
-      title: tDynamic("remove.title"),
-      children: tDynamic("remove.message"),
-      onConfirm: () => {
-        removeDynamicSection({ id: section.id });
-      },
-    });
-  };
-
-  return (
-    <Menu withinPortal position="right-start" arrowPosition="center">
-      <Menu.Target>
-        <ActionIcon
-          variant="default"
-          radius={"xl"}
-          pos="absolute"
-          top={4}
-          right={4}
-          style={{ zIndex: 10 }}
-          aria-label={tItem("menu.label.settings")}
-        >
-          <IconDotsVertical size={"1rem"} />
-        </ActionIcon>
-      </Menu.Target>
-      <Menu.Dropdown miw={128}>
-        <Menu.Label>{tItem("menu.label.settings")}</Menu.Label>
-        <Menu.Item leftSection={<IconPencil size={16} />} onClick={openEditModal}>
-          {tItem("action.edit")}
-        </Menu.Item>
-        <Menu.Divider />
-        <Menu.Label c="red.6">{t("common.dangerZone")}</Menu.Label>
-        <Menu.Item c="red.6" leftSection={<IconTrash size={16} />} onClick={openRemoveModal}>
-          {tDynamic("action.remove")}
-        </Menu.Item>
-      </Menu.Dropdown>
-    </Menu>
-  );
-};
diff --git a/apps/nextjs/src/components/board/sections/empty-section.tsx b/apps/nextjs/src/components/board/sections/empty-section.tsx
index 62e39b94d..5e4ef1d65 100644
--- a/apps/nextjs/src/components/board/sections/empty-section.tsx
+++ b/apps/nextjs/src/components/board/sections/empty-section.tsx
@@ -1,25 +1,32 @@
-import combineClasses from "clsx";
-
 import { useEditMode } from "@homarr/boards/edit-mode";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import type { EmptySection } from "~/app/[locale]/boards/_types";
-import { GridStack } from "./gridstack/gridstack";
+import { SectionGrid } from "./grid/section-grid";
 import { useSectionItems } from "./use-section-items";
 
 interface Props {
   section: EmptySection;
+  columnCount: number;
+  requestedRowCount: number;
+  railPlacement?: "main" | "left" | "right";
 }
 
-export const BoardEmptySection = ({ section }: Props) => {
+export const BoardEmptySection = ({ section, columnCount, requestedRowCount, railPlacement = "main" }: Props) => {
   const { items, innerSections } = useSectionItems(section.id);
   const totalLength = items.length + innerSections.length;
   const [isEditMode] = useEditMode();
+  const t = useScopedI18n("board.landmark");
+
+  if (totalLength === 0 && !isEditMode && requestedRowCount === 0) return null;
 
   return (
-    <GridStack
+    <SectionGrid
       section={section}
-      style={{ transitionDuration: "0s" }}
-      className={combineClasses("min-row", totalLength > 0 || isEditMode ? undefined : "grid-stack-empty-wrapper")}
+      columnCount={columnCount}
+      requestedRowCount={requestedRowCount}
+      label={t("items")}
+      railPlacement={railPlacement}
     />
   );
 };
diff --git a/apps/nextjs/src/components/board/sections/grid/board-grid-editor-boundary.tsx b/apps/nextjs/src/components/board/sections/grid/board-grid-editor-boundary.tsx
new file mode 100644
index 000000000..8a4afd423
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/board-grid-editor-boundary.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import type { ComponentType, PropsWithChildren } from "react";
+import { useEffect, useState } from "react";
+
+import { useEditMode } from "@homarr/boards/edit-mode";
+
+import { loadGridEditorAsync } from "./grid-editor-loader";
+import { GridEditorRuntimeProvider } from "./grid-editor-runtime";
+
+type BoardGridEditorProviderComponent = ComponentType<PropsWithChildren>;
+
+/**
+ * Keeps the dnd-kit runtime outside the read-only bundle while guaranteeing
+ * that every root and nested grid shares one drag-and-drop provider.
+ */
+export const BoardGridEditorBoundary = ({ children }: PropsWithChildren) => {
+  const [isEditMode] = useEditMode();
+  const [Provider, setProvider] = useState<BoardGridEditorProviderComponent | null>(null);
+  const [hasLoadError, setHasLoadError] = useState(false);
+
+  useEffect(() => {
+    if (!isEditMode || Provider) return;
+
+    let cancelled = false;
+    setHasLoadError(false);
+    void loadGridEditorAsync()
+      .then((module) => {
+        if (!cancelled) setProvider(() => module.BoardGridEditorProvider);
+      })
+      .catch(() => {
+        if (!cancelled) setHasLoadError(true);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [Provider, isEditMode]);
+
+  if (!isEditMode) {
+    return <GridEditorRuntimeProvider status="idle">{children}</GridEditorRuntimeProvider>;
+  }
+
+  if (hasLoadError) {
+    return <GridEditorRuntimeProvider status="error">{children}</GridEditorRuntimeProvider>;
+  }
+
+  if (!Provider) {
+    return <GridEditorRuntimeProvider status="loading">{children}</GridEditorRuntimeProvider>;
+  }
+
+  return (
+    <GridEditorRuntimeProvider status="ready">
+      <Provider>{children}</Provider>
+    </GridEditorRuntimeProvider>
+  );
+};
diff --git a/apps/nextjs/src/components/board/sections/grid/dnd/coordinates.spec.ts b/apps/nextjs/src/components/board/sections/grid/dnd/coordinates.spec.ts
new file mode 100644
index 000000000..5468f2d5d
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/dnd/coordinates.spec.ts
@@ -0,0 +1,145 @@
+import { describe, expect, test } from "vitest";
+
+import { getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
+import {
+  getContinuousGridDelta,
+  getContinuousResizePlacement,
+  getPointerProjectedShape,
+  getSnappedGridCoordinates,
+  getSnappedGridDelta,
+} from "./coordinates";
+
+describe("dnd grid coordinates", () => {
+  test.each([0.75, 1, 1.25, 2])("maps transformed drag geometry at %sx scale", (scale) => {
+    const target = { left: 137, top: -42, width: getLogicalTrackSize(8) * scale };
+    const dragShape = {
+      left: target.left + 3 * LOGICAL_GRID_PITCH * scale,
+      top: target.top + 7 * LOGICAL_GRID_PITCH * scale,
+    };
+
+    expect(getSnappedGridCoordinates({ dragShape, target, columnCount: 8 })).toEqual({ x: 3, y: 7 });
+  });
+
+  test("uses the dragged shape origin so a non-center grab retains its pointer offset", () => {
+    const scale = 0.75;
+    const target = { left: -280, top: 390, width: getLogicalTrackSize(5) * scale };
+    const initialShape = { left: target.left, top: target.top, width: 424 * scale, height: 200 * scale };
+    const pointerDelta = { x: LOGICAL_GRID_PITCH * scale * 2, y: LOGICAL_GRID_PITCH * scale * 3 };
+
+    expect(
+      getSnappedGridCoordinates({
+        dragShape: {
+          left: initialShape.left + pointerDelta.x,
+          top: initialShape.top + pointerDelta.y,
+        },
+        target,
+        columnCount: 5,
+      }),
+    ).toEqual({ x: 2, y: 3 });
+  });
+
+  test.each([0.75, 1, 1.25, 2])("projects a pointer drag in visual coordinates at %sx scale", (scale) => {
+    const target = { left: 496, top: -938, width: getLogicalTrackSize(8) * scale };
+    const initialShape = {
+      left: target.left + 4 * LOGICAL_GRID_PITCH * scale,
+      top: target.top + 8 * LOGICAL_GRID_PITCH * scale,
+      width: getLogicalTrackSize(2) * scale,
+      height: getLogicalTrackSize(2) * scale,
+    };
+    const initialPointer = { x: initialShape.left + 134 * scale, y: initialShape.top + 89 * scale };
+    const dragShape = getPointerProjectedShape(
+      { initialPointer, initialShape },
+      { x: initialPointer.x, y: initialPointer.y - LOGICAL_GRID_PITCH * scale },
+    );
+
+    expect(dragShape.left).toBe(initialShape.left);
+    expect(dragShape).toMatchObject({ width: initialShape.width, height: initialShape.height });
+    expect(getSnappedGridCoordinates({ dragShape, target, columnCount: 8 })).toEqual({ x: 4, y: 7 });
+  });
+
+  test.each([0.75, 1, 1.25, 2])("snaps resize pointer deltas at %sx scale", (visualScale) => {
+    expect(
+      getSnappedGridDelta({
+        initial: { x: 19, y: 31 },
+        current: {
+          x: 19 - 2 * LOGICAL_GRID_PITCH * visualScale,
+          y: 31 + 4 * LOGICAL_GRID_PITCH * visualScale,
+        },
+        visualScale,
+      }),
+    ).toEqual({ x: -2, y: 4 });
+  });
+
+  test("keeps the visual resize continuous between snapped grid breakpoints", () => {
+    const visualScale = 0.75;
+    const delta = getContinuousGridDelta({
+      initial: { x: 10, y: 20 },
+      current: {
+        x: 10 + LOGICAL_GRID_PITCH * visualScale * 0.42,
+        y: 20 + LOGICAL_GRID_PITCH * visualScale * 0.68,
+      },
+      visualScale,
+    });
+
+    expect(delta?.x).toBeCloseTo(0.42);
+    expect(delta?.y).toBeCloseTo(0.68);
+    expect(
+      getSnappedGridDelta({
+        initial: { x: 10, y: 20 },
+        current: {
+          x: 10 + LOGICAL_GRID_PITCH * visualScale * 0.42,
+          y: 20 + LOGICAL_GRID_PITCH * visualScale * 0.68,
+        },
+        visualScale,
+      }),
+    ).toEqual({ x: 0, y: 1 });
+  });
+
+  test("projects a continuous resize while anchoring the opposite edges and respecting bounds", () => {
+    const placement = { id: "widget", x: 2, y: 3, w: 3, h: 2 };
+
+    expect(
+      getContinuousResizePlacement({
+        placement,
+        direction: "nw",
+        deltaColumns: 0.35,
+        deltaRows: -0.6,
+        columnCount: 8,
+        maxRowCount: 10,
+      }),
+    ).toEqual({ id: "widget", x: 2.35, y: 2.4, w: 2.65, h: 2.6 });
+    expect(
+      getContinuousResizePlacement({
+        placement,
+        direction: "se",
+        deltaColumns: 99,
+        deltaRows: 99,
+        columnCount: 8,
+        maxRowCount: 7,
+      }),
+    ).toEqual({ id: "widget", x: 2, y: 3, w: 6, h: 4 });
+  });
+
+  test("uses independently measured visual axes for transformed resize geometry", () => {
+    expect(
+      getSnappedGridDelta({
+        initial: { x: 10, y: 20 },
+        current: { x: 10 + LOGICAL_GRID_PITCH * 1.25, y: 20 - LOGICAL_GRID_PITCH * 1.5 },
+        visualScale: { x: 1.25, y: 1.5 },
+      }),
+    ).toEqual({ x: 1, y: -1 });
+  });
+
+  test("rejects non-positive or non-finite scales", () => {
+    expect(
+      getSnappedGridCoordinates({
+        dragShape: { left: 0, top: 0 },
+        target: { left: 0, top: 0, width: 0 },
+        columnCount: 4,
+      }),
+    ).toBeNull();
+    expect(
+      getSnappedGridDelta({ initial: { x: 0, y: 0 }, current: { x: 1, y: 1 }, visualScale: Number.NaN }),
+    ).toBeNull();
+  });
+});
diff --git a/apps/nextjs/src/components/board/sections/grid/dnd/coordinates.ts b/apps/nextjs/src/components/board/sections/grid/dnd/coordinates.ts
new file mode 100644
index 000000000..79349d94c
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/dnd/coordinates.ts
@@ -0,0 +1,133 @@
+import { getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
+import type { GridPlacement } from "~/components/board/layout";
+import type { GridResizeDirection } from "./types";
+
+interface RectangleLike {
+  left: number;
+  top: number;
+  width: number;
+}
+
+interface ProjectedRectangle extends RectangleLike {
+  height: number;
+}
+
+export interface DragProjectionOrigin {
+  initialPointer: { x: number; y: number };
+  initialShape: ProjectedRectangle;
+}
+
+/**
+ * Projects the dragged shape from the grab point instead of dnd-kit's
+ * feedback element. The latter can live in a CSS-zoomed overlay whose
+ * bounding rectangle is in a different coordinate space from pointer events.
+ */
+export const getPointerProjectedShape = (origin: DragProjectionOrigin, currentPointer: { x: number; y: number }) => ({
+  left: origin.initialShape.left + currentPointer.x - origin.initialPointer.x,
+  top: origin.initialShape.top + currentPointer.y - origin.initialPointer.y,
+  width: origin.initialShape.width,
+  height: origin.initialShape.height,
+});
+
+export const getSnappedGridCoordinates = ({
+  dragShape,
+  target,
+  columnCount,
+}: {
+  dragShape: Pick<RectangleLike, "left" | "top">;
+  target: RectangleLike;
+  columnCount: number;
+}) => {
+  const logicalWidth = getLogicalTrackSize(columnCount);
+  const visualScale = logicalWidth > 0 ? target.width / logicalWidth : 0;
+  if (!Number.isFinite(visualScale) || visualScale <= 0) return null;
+
+  return {
+    x: Math.round((dragShape.left - target.left) / (LOGICAL_GRID_PITCH * visualScale)),
+    y: Math.round((dragShape.top - target.top) / (LOGICAL_GRID_PITCH * visualScale)),
+  };
+};
+
+export const getSnappedGridDelta = ({
+  current,
+  initial,
+  visualScale,
+}: {
+  current: { x: number; y: number };
+  initial: { x: number; y: number };
+  visualScale: number | { x: number; y: number };
+}) => {
+  const delta = getContinuousGridDelta({ current, initial, visualScale });
+  if (!delta) return null;
+  return {
+    x: Math.round(delta.x),
+    y: Math.round(delta.y),
+  };
+};
+
+export const getContinuousGridDelta = ({
+  current,
+  initial,
+  visualScale,
+}: {
+  current: { x: number; y: number };
+  initial: { x: number; y: number };
+  visualScale: number | { x: number; y: number };
+}) => {
+  const scale = typeof visualScale === "number" ? { x: visualScale, y: visualScale } : visualScale;
+  if (!Number.isFinite(scale.x) || scale.x <= 0 || !Number.isFinite(scale.y) || scale.y <= 0) return null;
+  return {
+    x: (current.x - initial.x) / (LOGICAL_GRID_PITCH * scale.x),
+    y: (current.y - initial.y) / (LOGICAL_GRID_PITCH * scale.y),
+  };
+};
+
+/** Projects a resize continuously while the committed layout remains snapped. */
+export const getContinuousResizePlacement = <TPlacement extends GridPlacement>({
+  placement,
+  direction,
+  deltaColumns,
+  deltaRows,
+  columnCount,
+  maxRowCount,
+  minWidth = 1,
+  minHeight = 1,
+}: {
+  placement: TPlacement;
+  direction: GridResizeDirection;
+  deltaColumns: number;
+  deltaRows: number;
+  columnCount: number;
+  maxRowCount: number | null;
+  minWidth?: number;
+  minHeight?: number;
+}): TPlacement => {
+  const fixedRight = placement.x + placement.w;
+  const fixedBottom = placement.y + placement.h;
+  let x = placement.x;
+  let y = placement.y;
+  let w = placement.w;
+  let h = placement.h;
+
+  if (direction.includes("w")) {
+    w = clamp(placement.w - deltaColumns, minWidth, fixedRight);
+    x = fixedRight - w;
+  } else if (direction.includes("e")) {
+    w = clamp(placement.w + deltaColumns, minWidth, columnCount - placement.x);
+  }
+
+  if (direction.includes("n")) {
+    h = clamp(placement.h - deltaRows, minHeight, fixedBottom);
+    y = fixedBottom - h;
+  } else if (direction.includes("s")) {
+    h = clamp(
+      placement.h + deltaRows,
+      minHeight,
+      maxRowCount === null ? Number.MAX_SAFE_INTEGER : maxRowCount - placement.y,
+    );
+  }
+
+  return { ...placement, x, y, w, h };
+};
+
+const clamp = (value: number, minimum: number, maximum: number) => Math.min(Math.max(value, minimum), maximum);
diff --git a/apps/nextjs/src/components/board/sections/grid/dnd/engine.spec.ts b/apps/nextjs/src/components/board/sections/grid/dnd/engine.spec.ts
new file mode 100644
index 000000000..7e839c526
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/dnd/engine.spec.ts
@@ -0,0 +1,757 @@
+import { describe, expect, test } from "vitest";
+
+import { doGridPlacementsOverlap } from "~/components/board/layout";
+import {
+  beginGridTransaction,
+  cancelGridTransaction,
+  commitGridTransaction,
+  previewGridMove,
+  previewGridResize,
+} from "./engine";
+import type {
+  GridPreviewResult,
+  GridResizeDirection,
+  GridTransaction,
+  TransactionalGrid,
+  TransactionalGridState,
+} from "./types";
+
+interface TestPlacement {
+  id: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  kind: "container" | "item";
+  marker?: string;
+}
+
+const placement = (
+  id: string,
+  x: number,
+  y: number,
+  w = 1,
+  h = 1,
+  kind: TestPlacement["kind"] = "item",
+): TestPlacement => ({ id, x, y, w, h, kind, marker: `metadata:${id}` });
+
+const grid = (
+  id: string,
+  columnCount: number,
+  placements: readonly TestPlacement[],
+  options: Pick<TransactionalGrid<TestPlacement>, "maxRowCount" | "ownerPlacementId" | "parentGridId"> = {},
+): TransactionalGrid<TestPlacement> => ({ id, columnCount, placements, ...options });
+
+const state = (...grids: readonly TransactionalGrid<TestPlacement>[]): TransactionalGridState<TestPlacement> => ({
+  grids,
+});
+
+const accept = (result: GridPreviewResult<TestPlacement>): GridTransaction<TestPlacement> => {
+  if (!result.accepted) throw new Error(`Expected preview to be accepted, received ${result.rejection.code}`);
+  return result.transaction;
+};
+
+const getGrid = (layout: TransactionalGridState<TestPlacement>, id: string) => {
+  const found = layout.grids.find((candidate) => candidate.id === id);
+  if (!found) throw new Error(`Missing test grid ${id}`);
+  return found;
+};
+
+const getPlacement = (layout: TransactionalGridState<TestPlacement>, id: string) => {
+  for (const candidateGrid of layout.grids) {
+    const found = candidateGrid.placements.find((candidate) => candidate.id === id);
+    if (found) return found;
+  }
+  throw new Error(`Missing test placement ${id}`);
+};
+
+const coordinatesById = (layout: TransactionalGridState<TestPlacement>, gridId: string) =>
+  Object.fromEntries(getGrid(layout, gridId).placements.map(({ id, x, y, w, h }) => [id, { x, y, w, h }]));
+
+const expectValidState = (layout: TransactionalGridState<TestPlacement>) => {
+  const allIds = new Set<string>();
+
+  for (const candidateGrid of layout.grids) {
+    for (const [index, candidate] of candidateGrid.placements.entries()) {
+      expect(allIds.has(candidate.id), `duplicate placement ${candidate.id}`).toBe(false);
+      allIds.add(candidate.id);
+      expect([candidate.x, candidate.y, candidate.w, candidate.h].every(Number.isInteger)).toBe(true);
+      expect(candidate.x).toBeGreaterThanOrEqual(0);
+      expect(candidate.y).toBeGreaterThanOrEqual(0);
+      expect(candidate.w).toBeGreaterThanOrEqual(1);
+      expect(candidate.h).toBeGreaterThanOrEqual(1);
+      expect(candidate.x + candidate.w).toBeLessThanOrEqual(candidateGrid.columnCount);
+      if (candidateGrid.maxRowCount !== undefined && candidateGrid.maxRowCount !== null) {
+        expect(candidate.y + candidate.h).toBeLessThanOrEqual(candidateGrid.maxRowCount);
+      }
+
+      for (const other of candidateGrid.placements.slice(index + 1)) {
+        expect(
+          doGridPlacementsOverlap(candidate, other),
+          `${candidate.id} overlaps ${other.id} in ${candidateGrid.id}`,
+        ).toBe(false);
+      }
+    }
+  }
+
+  for (const candidateGrid of layout.grids) {
+    if (!candidateGrid.ownerPlacementId) continue;
+    const parent = getGrid(layout, candidateGrid.parentGridId ?? "");
+    expect(parent.placements.some(({ id }) => id === candidateGrid.ownerPlacementId)).toBe(true);
+  }
+};
+
+describe("grid transaction setup", () => {
+  test("captures detached snapshot and preview copies without mutating caller state", () => {
+    const original = state(grid("root", 4, [placement("active", 0, 0), placement("other", 2, 3)]));
+    const transaction = beginGridTransaction(original, { activeId: "active", sourceGridId: "root" });
+
+    expect(transaction.snapshot).toEqual(original);
+    expect(transaction.preview).toEqual(original);
+    expect(transaction.snapshot).not.toBe(original);
+    expect(transaction.snapshot.grids[0]).not.toBe(original.grids[0]);
+    expect(transaction.snapshot.grids[0]?.placements[0]).not.toBe(original.grids[0]?.placements[0]);
+    expect(transaction.preview).not.toBe(transaction.snapshot);
+  });
+
+  test("rejects a missing active item or stale source-grid hint", () => {
+    const original = state(grid("root", 2, [placement("active", 0, 0)]));
+
+    expect(() => beginGridTransaction(original, { activeId: "missing" })).toThrow('Grid item "missing" does not exist');
+    expect(() => beginGridTransaction(original, { activeId: "active", sourceGridId: "stale" })).toThrow(
+      'belongs to grid "root", not "stale"',
+    );
+  });
+
+  test.each([
+    {
+      name: "duplicate grid ids",
+      layout: state(grid("root", 2, [placement("a", 0, 0)]), grid("root", 2, [placement("b", 0, 0)])),
+      message: "Duplicate grid id",
+    },
+    {
+      name: "duplicate placement ids across grids",
+      layout: state(grid("first", 2, [placement("a", 0, 0)]), grid("second", 2, [placement("a", 0, 0)])),
+      message: "Duplicate grid item id",
+    },
+    {
+      name: "overlaps",
+      layout: state(grid("root", 3, [placement("a", 0, 0, 2), placement("b", 1, 0, 2)])),
+      message: "overlap",
+    },
+    {
+      name: "column overflow",
+      layout: state(grid("root", 2, [placement("a", 1, 0, 2)])),
+      message: "exceeds grid",
+    },
+    {
+      name: "row overflow",
+      layout: state(grid("root", 2, [placement("a", 0, 1, 1, 2)], { maxRowCount: 2 })),
+      message: "exceeds grid",
+    },
+    {
+      name: "missing hierarchy owner",
+      layout: state(
+        grid("root", 2, [placement("a", 0, 0)]),
+        grid("child", 2, [], { parentGridId: "root", ownerPlacementId: "missing" }),
+      ),
+      message: "Owner item",
+    },
+    {
+      name: "cyclic hierarchy",
+      layout: state(
+        grid("first", 2, [placement("owns-second", 0, 0)], {
+          parentGridId: "second",
+          ownerPlacementId: "owns-first",
+        }),
+        grid("second", 2, [placement("owns-first", 0, 0)], {
+          parentGridId: "first",
+          ownerPlacementId: "owns-second",
+        }),
+      ),
+      message: "cycle",
+    },
+  ])("rejects invalid initial state: $name", ({ layout, message }) => {
+    expect(() => beginGridTransaction(layout, { activeId: layout.grids[0]?.placements[0]?.id ?? "missing" })).toThrow(
+      message,
+    );
+  });
+});
+
+describe("same-grid movement", () => {
+  test("keeps the exact snapshot for a no-op instead of compacting intentional gaps", () => {
+    const original = state(grid("root", 4, [placement("active", 0, 3), placement("other", 2, 5)]));
+    const transaction = beginGridTransaction(original, { activeId: "active" });
+    const moved = accept(previewGridMove(transaction, { targetGridId: "root", x: 0, y: 3 }));
+
+    expect(moved.preview).toEqual(original);
+    expect(moved.preview).not.toBe(original);
+  });
+
+  test("swaps an equal-size item occupying the requested exact slot", () => {
+    const original = state(
+      grid("root", 4, [placement("active", 0, 0), placement("target", 1, 0), placement("untouched", 2, 0)]),
+    );
+    const moved = accept(
+      previewGridMove(beginGridTransaction(original, { activeId: "active" }), {
+        targetGridId: "root",
+        x: 1,
+        y: 0,
+      }),
+    );
+
+    expect(coordinatesById(moved.preview, "root")).toEqual({
+      active: { x: 1, y: 0, w: 1, h: 1 },
+      target: { x: 0, y: 0, w: 1, h: 1 },
+      untouched: { x: 2, y: 0, w: 1, h: 1 },
+    });
+  });
+
+  test("swaps different-size items when both resulting placements remain valid", () => {
+    const original = state(grid("root", 4, [placement("wide", 0, 0, 2), placement("compact", 2, 0)]));
+    const moved = accept(
+      previewGridMove(beginGridTransaction(original, { activeId: "wide" }), {
+        targetGridId: "root",
+        x: 2,
+        y: 0,
+      }),
+    );
+
+    expect(coordinatesById(moved.preview, "root")).toEqual({
+      wide: { x: 2, y: 0, w: 2, h: 1 },
+      compact: { x: 0, y: 0, w: 1, h: 1 },
+    });
+  });
+
+  test("uses pinned reflow when an exact-slot swap would exceed the grid bounds", () => {
+    const original = state(grid("root", 4, [placement("compact", 3, 0), placement("wide", 0, 0, 2)]));
+    const moved = accept(
+      previewGridMove(beginGridTransaction(original, { activeId: "compact" }), {
+        targetGridId: "root",
+        x: 0,
+        y: 0,
+      }),
+    );
+
+    expect(coordinatesById(moved.preview, "root")).toEqual({
+      compact: { x: 0, y: 0, w: 1, h: 1 },
+      wide: { x: 0, y: 1, w: 2, h: 1 },
+    });
+  });
+
+  test("pushes a different-size collision without compacting unrelated gaps", () => {
+    const original = state(
+      grid("root", 4, [placement("active", 0, 0), placement("wide", 1, 0, 2), placement("lower-left", 0, 1)]),
+    );
+    const moved = accept(
+      previewGridMove(beginGridTransaction(original, { activeId: "active" }), {
+        targetGridId: "root",
+        x: 1,
+        y: 0,
+      }),
+    );
+
+    expect(coordinatesById(moved.preview, "root")).toEqual({
+      active: { x: 1, y: 0, w: 1, h: 1 },
+      wide: { x: 1, y: 1, w: 2, h: 1 },
+      "lower-left": { x: 0, y: 1, w: 1, h: 1 },
+    });
+  });
+
+  test("swaps laterally as soon as a move pushes into one compatible item", () => {
+    const original = state(grid("root", 5, [placement("active", 0, 0, 2), placement("target", 2, 0, 2)]));
+    const moved = accept(
+      previewGridMove(beginGridTransaction(original, { activeId: "active" }), {
+        targetGridId: "root",
+        x: 1,
+        y: 0,
+      }),
+    );
+
+    expect(getPlacement(moved.preview, "active")).toMatchObject({ x: 2, y: 0, w: 2, h: 1 });
+    expect(getPlacement(moved.preview, "target")).toMatchObject({ x: 0, y: 0, w: 2, h: 1 });
+  });
+
+  test("swaps the pushed item into the vacated slot when moving from right to left", () => {
+    const original = state(grid("root", 5, [placement("target", 0, 0, 2), placement("active", 2, 0, 2)]));
+    const moved = accept(
+      previewGridMove(beginGridTransaction(original, { activeId: "active" }), {
+        targetGridId: "root",
+        x: 1,
+        y: 0,
+      }),
+    );
+
+    expect(getPlacement(moved.preview, "active")).toMatchObject({ x: 0, y: 0, w: 2, h: 1 });
+    expect(getPlacement(moved.preview, "target")).toMatchObject({ x: 2, y: 0, w: 2, h: 1 });
+  });
+
+  test("preserves intentional empty rows outside the collision chain", () => {
+    const original = state(
+      grid("root", 4, [placement("active", 0, 0), placement("collision", 1, 0, 2), placement("far", 3, 8)]),
+    );
+    const moved = accept(
+      previewGridMove(beginGridTransaction(original, { activeId: "active" }), {
+        targetGridId: "root",
+        x: 1,
+        y: 0,
+      }),
+    );
+
+    expect(getPlacement(moved.preview, "collision")).toMatchObject({ x: 1, y: 1 });
+    expect(getPlacement(moved.preview, "far")).toMatchObject({ x: 3, y: 8 });
+  });
+
+  test.each([
+    { requested: { x: -20, y: -10 }, expected: { x: 0, y: 0 } },
+    { requested: { x: 99, y: 99 }, expected: { x: 2, y: 3 } },
+    { requested: { x: 2.9, y: 1.9 }, expected: { x: 2, y: 1 } },
+  ])("clamps and quantizes requested coordinates: $requested", ({ requested, expected }) => {
+    const original = state(grid("root", 4, [placement("active", 1, 1, 2, 2)], { maxRowCount: 5 }));
+    const moved = accept(
+      previewGridMove(beginGridTransaction(original, { activeId: "active" }), {
+        targetGridId: "root",
+        ...requested,
+      }),
+    );
+
+    expect(getPlacement(moved.preview, "active")).toMatchObject(expected);
+  });
+
+  test("produces the same result regardless of backing-array order", () => {
+    const placements = [
+      placement("active", 3, 0),
+      placement("left", 0, 2),
+      placement("middle", 1, 2),
+      placement("right", 2, 2),
+    ];
+    const forward = state(grid("root", 4, placements));
+    const reversed = state(grid("root", 4, placements.toReversed()));
+    const input = { targetGridId: "root", x: 0, y: 0 };
+
+    const first = accept(previewGridMove(beginGridTransaction(forward, { activeId: "active" }), input));
+    const second = accept(previewGridMove(beginGridTransaction(reversed, { activeId: "active" }), input));
+
+    expect(coordinatesById(first.preview, "root")).toEqual(coordinatesById(second.preview, "root"));
+  });
+
+  test("recomputes every chained preview from the interaction snapshot", () => {
+    const original = state(
+      grid("root", 3, [placement("active", 0, 0), placement("middle", 1, 0), placement("last", 2, 0)]),
+    );
+    const transaction = beginGridTransaction(original, { activeId: "active" });
+    const first = accept(previewGridMove(transaction, { targetGridId: "root", x: 1, y: 0 }));
+    const second = accept(previewGridMove(first, { targetGridId: "root", x: 2, y: 0 }));
+
+    expect(coordinatesById(first.preview, "root")).toEqual({
+      active: { x: 1, y: 0, w: 1, h: 1 },
+      middle: { x: 0, y: 0, w: 1, h: 1 },
+      last: { x: 2, y: 0, w: 1, h: 1 },
+    });
+    expect(coordinatesById(second.preview, "root")).toEqual({
+      active: { x: 2, y: 0, w: 1, h: 1 },
+      middle: { x: 1, y: 0, w: 1, h: 1 },
+      last: { x: 0, y: 0, w: 1, h: 1 },
+    });
+  });
+});
+
+describe("cross-grid movement", () => {
+  test("updates source and target atomically without compacting the source gap", () => {
+    const original = state(
+      grid("source", 2, [placement("active", 0, 0), placement("source-neighbor", 0, 1)]),
+      grid("target", 2, [placement("target-neighbor", 0, 0)]),
+    );
+    const moved = accept(
+      previewGridMove(beginGridTransaction(original, { activeId: "active" }), {
+        targetGridId: "target",
+        x: 0,
+        y: 0,
+      }),
+    );
+
+    expect(coordinatesById(moved.preview, "source")).toEqual({
+      "source-neighbor": { x: 0, y: 1, w: 1, h: 1 },
+    });
+    expect(coordinatesById(moved.preview, "target")).toEqual({
+      "target-neighbor": { x: 0, y: 1, w: 1, h: 1 },
+      active: { x: 0, y: 0, w: 1, h: 1 },
+    });
+    expect(getPlacement(moved.preview, "active").marker).toBe("metadata:active");
+    expect(original).toEqual(
+      state(
+        grid("source", 2, [placement("active", 0, 0), placement("source-neighbor", 0, 1)]),
+        grid("target", 2, [placement("target-neighbor", 0, 0)]),
+      ),
+    );
+    expectValidState(moved.preview);
+  });
+
+  test("chained target changes do not leak an earlier cross-grid preview", () => {
+    const original = state(
+      grid("source", 2, [placement("active", 0, 0)]),
+      grid("first-target", 2, [placement("first-neighbor", 0, 0)]),
+      grid("second-target", 2, [placement("second-neighbor", 0, 0)]),
+    );
+    const first = accept(
+      previewGridMove(beginGridTransaction(original, { activeId: "active" }), {
+        targetGridId: "first-target",
+        x: 0,
+        y: 0,
+      }),
+    );
+    const second = accept(previewGridMove(first, { targetGridId: "second-target", x: 0, y: 0 }));
+
+    expect(getGrid(second.preview, "first-target").placements).toEqual(getGrid(original, "first-target").placements);
+    expect(getGrid(second.preview, "source").placements).toHaveLength(0);
+    expect(getPlacement(second.preview, "active")).toMatchObject({ x: 0, y: 0 });
+    expect(getPlacement(second.preview, "second-neighbor")).toMatchObject({ x: 0, y: 1 });
+  });
+
+  test("moves a container's owned grid with it and supports commit/cancel", () => {
+    const original = state(
+      grid("source", 3, [placement("container", 0, 0, 2, 2, "container")]),
+      grid("target", 3, []),
+      grid("container-content", 2, [placement("child", 0, 0)], {
+        parentGridId: "source",
+        ownerPlacementId: "container",
+      }),
+    );
+    const transaction = beginGridTransaction(original, { activeId: "container" });
+    const moved = accept(previewGridMove(transaction, { targetGridId: "target", x: 1, y: 2 }));
+
+    expect(getGrid(moved.preview, "container-content").parentGridId).toBe("target");
+    expect(getPlacement(moved.preview, "container")).toMatchObject({ x: 1, y: 2, kind: "container" });
+    expect(cancelGridTransaction(moved)).toEqual(original);
+    expect(commitGridTransaction(moved)).toEqual(moved.preview);
+    expect(commitGridTransaction(moved)).not.toBe(moved.preview);
+  });
+
+  test.each(["child", "grandchild"])("rejects a container move into its %s grid", (targetGridId) => {
+    const original = state(
+      grid("root", 4, [placement("container", 0, 0, 2, 2, "container")]),
+      grid("child", 3, [placement("nested-container", 0, 0, 2, 2, "container")], {
+        parentGridId: "root",
+        ownerPlacementId: "container",
+      }),
+      grid("grandchild", 2, [], {
+        parentGridId: "child",
+        ownerPlacementId: "nested-container",
+      }),
+    );
+    const transaction = beginGridTransaction(original, { activeId: "container" });
+    const result = previewGridMove(transaction, { targetGridId, x: 0, y: 0 });
+
+    expect(result.accepted).toBe(false);
+    if (result.accepted) throw new Error("Expected descendant move rejection");
+    expect(result.rejection.code).toBe("descendant-target");
+    expect(result.transaction).toBe(transaction);
+  });
+
+  test("runs caller guards with hierarchy context and preserves custom rejection details", () => {
+    const original = state(grid("source", 2, [placement("active", 0, 0)]), grid("target", 2, []));
+    const transaction = beginGridTransaction(original, { activeId: "active" });
+    let observedTarget = "";
+    const guarded = previewGridMove(
+      transaction,
+      { targetGridId: "target", x: 0, y: 0 },
+      {
+        guards: [
+          (context) => {
+            observedTarget = context.targetGrid.id;
+            expect(context.active.id).toBe("active");
+            expect(context.sourceGrid.id).toBe("source");
+            expect(context.targetIsDescendant).toBe(false);
+            expect(context.snapshot).toBe(transaction.snapshot);
+            return true;
+          },
+          () => ({ code: "locked-container", message: "Unlock the container first" }),
+        ],
+      },
+    );
+
+    expect(observedTarget).toBe("target");
+    expect(guarded.accepted).toBe(false);
+    if (guarded.accepted) throw new Error("Expected custom guard rejection");
+    expect(guarded.rejection).toEqual({ code: "locked-container", message: "Unlock the container first" });
+
+    const booleanRejection = previewGridMove(
+      transaction,
+      { targetGridId: "target", x: 0, y: 0 },
+      {
+        guards: [() => false],
+      },
+    );
+    expect(booleanRejection.accepted).toBe(false);
+    if (booleanRejection.accepted) throw new Error("Expected boolean guard rejection");
+    expect(booleanRejection.rejection.code).toBe("guard-rejected");
+  });
+
+  test.each([
+    {
+      name: "unknown grid",
+      original: state(grid("source", 2, [placement("active", 0, 0)])),
+      input: { targetGridId: "missing", x: 0, y: 0 },
+      code: "unknown-target-grid",
+    },
+    {
+      name: "destination narrower than the item",
+      original: state(grid("source", 3, [placement("active", 0, 0, 2)]), grid("target", 1, [])),
+      input: { targetGridId: "target", x: 0, y: 0 },
+      code: "item-too-large",
+    },
+    {
+      name: "reflow beyond destination row limit",
+      original: state(
+        grid("source", 2, [placement("active", 0, 0, 2)]),
+        grid("target", 2, [placement("target", 0, 0, 2)], { maxRowCount: 1 }),
+      ),
+      input: { targetGridId: "target", x: 0, y: 0 },
+      code: "row-limit",
+    },
+    {
+      name: "non-finite coordinate",
+      original: state(grid("source", 2, [placement("active", 0, 0)])),
+      input: { targetGridId: "source", x: Number.NaN, y: 0 },
+      code: "invalid-coordinate",
+    },
+  ])("rejects $name without changing the transaction", ({ original, input, code }) => {
+    const transaction = beginGridTransaction(original, { activeId: "active" });
+    const result = previewGridMove(transaction, input);
+
+    expect(result.accepted).toBe(false);
+    if (result.accepted) throw new Error("Expected move rejection");
+    expect(result.rejection.code).toBe(code);
+    expect(result.transaction).toBe(transaction);
+    expect(result.transaction.preview).toEqual(original);
+  });
+});
+
+describe("eight-direction resize", () => {
+  test.each<{
+    direction: GridResizeDirection;
+    deltaColumns: number;
+    deltaRows: number;
+    expected: Pick<TestPlacement, "x" | "y" | "w" | "h">;
+  }>([
+    { direction: "n", deltaColumns: 0, deltaRows: -1, expected: { x: 3, y: 2, w: 4, h: 5 } },
+    { direction: "ne", deltaColumns: 1, deltaRows: -1, expected: { x: 3, y: 2, w: 5, h: 5 } },
+    { direction: "e", deltaColumns: 1, deltaRows: 0, expected: { x: 3, y: 3, w: 5, h: 4 } },
+    { direction: "se", deltaColumns: 1, deltaRows: 1, expected: { x: 3, y: 3, w: 5, h: 5 } },
+    { direction: "s", deltaColumns: 0, deltaRows: 1, expected: { x: 3, y: 3, w: 4, h: 5 } },
+    { direction: "sw", deltaColumns: -1, deltaRows: 1, expected: { x: 2, y: 3, w: 5, h: 5 } },
+    { direction: "w", deltaColumns: -1, deltaRows: 0, expected: { x: 2, y: 3, w: 5, h: 4 } },
+    { direction: "nw", deltaColumns: -1, deltaRows: -1, expected: { x: 2, y: 2, w: 5, h: 5 } },
+  ])("resizes from $direction while anchoring the opposite edge", ({ expected, ...input }) => {
+    const original = state(grid("root", 12, [placement("active", 3, 3, 4, 4)], { maxRowCount: 12 }));
+    const resized = accept(previewGridResize(beginGridTransaction(original, { activeId: "active" }), input));
+
+    expect(getPlacement(resized.preview, "active")).toMatchObject(expected);
+  });
+
+  test("clamps a north-west shrink to minimum size while keeping right and bottom anchored", () => {
+    const original = state(grid("root", 12, [placement("active", 3, 3, 4, 4)], { maxRowCount: 12 }));
+    const resized = accept(
+      previewGridResize(beginGridTransaction(original, { activeId: "active" }), {
+        direction: "nw",
+        deltaColumns: 10,
+        deltaRows: 10,
+        minWidth: 2,
+        minHeight: 2,
+      }),
+    );
+
+    expect(getPlacement(resized.preview, "active")).toMatchObject({ x: 5, y: 5, w: 2, h: 2 });
+  });
+
+  test.each([
+    { direction: "nw" as const, deltaColumns: -99, deltaRows: -99, expected: { x: 0, y: 0, w: 7, h: 7 } },
+    { direction: "se" as const, deltaColumns: 99, deltaRows: 99, expected: { x: 3, y: 3, w: 9, h: 9 } },
+  ])("clamps $direction growth to grid bounds", ({ expected, ...input }) => {
+    const original = state(grid("root", 12, [placement("active", 3, 3, 4, 4)], { maxRowCount: 12 }));
+    const resized = accept(previewGridResize(beginGridTransaction(original, { activeId: "active" }), input));
+
+    expect(getPlacement(resized.preview, "active")).toMatchObject(expected);
+  });
+
+  test("honors explicit maximum dimensions", () => {
+    const original = state(grid("root", 12, [placement("active", 3, 3, 4, 4)], { maxRowCount: 12 }));
+    const resized = accept(
+      previewGridResize(beginGridTransaction(original, { activeId: "active" }), {
+        direction: "se",
+        deltaColumns: 99,
+        deltaRows: 99,
+        maxWidth: 6,
+        maxHeight: 5,
+      }),
+    );
+
+    expect(getPlacement(resized.preview, "active")).toMatchObject({ x: 3, y: 3, w: 6, h: 5 });
+  });
+
+  test("pins the resized item and deterministically pushes collisions", () => {
+    const original = state(
+      grid("root", 3, [placement("active", 0, 0, 2), placement("neighbor", 0, 1, 2), placement("side", 2, 2)]),
+    );
+    const resized = accept(
+      previewGridResize(beginGridTransaction(original, { activeId: "active" }), {
+        direction: "s",
+        deltaColumns: 0,
+        deltaRows: 2,
+      }),
+    );
+
+    expect(coordinatesById(resized.preview, "root")).toEqual({
+      active: { x: 0, y: 0, w: 2, h: 3 },
+      neighbor: { x: 0, y: 3, w: 2, h: 1 },
+      side: { x: 2, y: 2, w: 1, h: 1 },
+    });
+  });
+
+  test("rejects resize when collision reflow would exceed the row limit", () => {
+    const original = state(
+      grid("root", 2, [placement("active", 0, 0, 2), placement("neighbor", 0, 1, 2, 2)], {
+        maxRowCount: 3,
+      }),
+    );
+    const transaction = beginGridTransaction(original, { activeId: "active" });
+    const result = previewGridResize(transaction, {
+      direction: "s",
+      deltaColumns: 0,
+      deltaRows: 1,
+    });
+
+    expect(result.accepted).toBe(false);
+    if (result.accepted) throw new Error("Expected row-limit rejection");
+    expect(result.rejection.code).toBe("row-limit");
+    expect(result.transaction).toBe(transaction);
+  });
+
+  test("rejects non-finite deltas and geometrically impossible constraints", () => {
+    const original = state(grid("root", 4, [placement("active", 0, 0, 2, 2)]));
+    const transaction = beginGridTransaction(original, { activeId: "active" });
+    const invalidDelta = previewGridResize(transaction, {
+      direction: "e",
+      deltaColumns: Number.POSITIVE_INFINITY,
+      deltaRows: 0,
+    });
+    const impossible = previewGridResize(transaction, {
+      direction: "w",
+      deltaColumns: 0,
+      deltaRows: 0,
+      minWidth: 5,
+      maxWidth: 5,
+    });
+
+    expect(invalidDelta.accepted).toBe(false);
+    if (invalidDelta.accepted) throw new Error("Expected invalid-coordinate rejection");
+    expect(invalidDelta.rejection.code).toBe("invalid-coordinate");
+    expect(impossible.accepted).toBe(false);
+    if (impossible.accepted) throw new Error("Expected resize-constraints rejection");
+    expect(impossible.rejection.code).toBe("resize-constraints");
+  });
+
+  test.each([{ minWidth: 0 }, { minHeight: 1.5 }, { minWidth: 3, maxWidth: 2 }, { minHeight: 3, maxHeight: 2 }])(
+    "throws on invalid programmer-supplied constraints: $minWidth $minHeight",
+    (constraints) => {
+      const original = state(grid("root", 4, [placement("active", 0, 0, 2, 2)]));
+      const transaction = beginGridTransaction(original, { activeId: "active" });
+
+      expect(() =>
+        previewGridResize(transaction, {
+          direction: "se",
+          deltaColumns: 0,
+          deltaRows: 0,
+          ...constraints,
+        }),
+      ).toThrow(RangeError);
+    },
+  );
+});
+
+describe("transaction completion", () => {
+  test("a rejection keeps the latest accepted preview, cancel restores start, and commit detaches output", () => {
+    const original = state(grid("root", 3, [placement("active", 0, 0), placement("other", 1, 0)]));
+    const started = beginGridTransaction(original, { activeId: "active" });
+    const moved = accept(previewGridMove(started, { targetGridId: "root", x: 1, y: 0 }));
+    const rejected = previewGridMove(moved, { targetGridId: "missing", x: 0, y: 0 });
+
+    expect(rejected.accepted).toBe(false);
+    if (rejected.accepted) throw new Error("Expected rejection");
+    expect(rejected.transaction).toBe(moved);
+    expect(rejected.transaction.preview).toEqual(moved.preview);
+
+    const committed = commitGridTransaction(rejected.transaction);
+    const cancelled = cancelGridTransaction(rejected.transaction);
+    expect(committed).toEqual(moved.preview);
+    expect(committed).not.toBe(moved.preview);
+    expect(cancelled).toEqual(original);
+    expect(cancelled).not.toBe(rejected.transaction.snapshot);
+  });
+});
+
+describe("interaction invariant matrix", () => {
+  test("preserves invariants across every sampled same-grid and cross-grid coordinate", () => {
+    const original = state(
+      grid(
+        "source",
+        6,
+        [
+          placement("active", 0, 0, 2, 2),
+          placement("source-a", 2, 0, 2),
+          placement("source-b", 4, 0, 2, 2),
+          placement("source-c", 2, 1, 2),
+        ],
+        { maxRowCount: 10 },
+      ),
+      grid("target", 5, [placement("target-a", 0, 0), placement("target-b", 1, 0, 2, 2)], {
+        maxRowCount: 10,
+      }),
+    );
+
+    for (const targetGridId of ["source", "target"]) {
+      for (let x = -3; x <= 8; x += 1) {
+        for (let y = -2; y <= 11; y += 1) {
+          const result = previewGridMove(beginGridTransaction(original, { activeId: "active" }), {
+            targetGridId,
+            x,
+            y,
+          });
+          if (!result.accepted) {
+            expect(result.rejection.code).toBe("row-limit");
+            continue;
+          }
+
+          expectValidState(result.transaction.preview);
+          expect(getPlacement(result.transaction.preview, "active").marker).toBe("metadata:active");
+        }
+      }
+    }
+  });
+
+  test("preserves invariants across every direction and representative signed deltas", () => {
+    const original = state(grid("root", 8, [placement("active", 2, 2, 3, 3)], { maxRowCount: 9 }));
+    const directions: readonly GridResizeDirection[] = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
+    const deltas = [-20, -3, -1, 0, 1, 3, 20];
+
+    for (const direction of directions) {
+      for (const deltaColumns of deltas) {
+        for (const deltaRows of deltas) {
+          const result = previewGridResize(beginGridTransaction(original, { activeId: "active" }), {
+            direction,
+            deltaColumns,
+            deltaRows,
+            minWidth: 2,
+            minHeight: 2,
+            maxWidth: 6,
+            maxHeight: 7,
+          });
+          expect(result.accepted).toBe(true);
+          if (!result.accepted) throw new Error(`Unexpected ${result.rejection.code} for ${direction}`);
+          expectValidState(result.transaction.preview);
+          expect(getPlacement(result.transaction.preview, "active").marker).toBe("metadata:active");
+        }
+      }
+    }
+  });
+});
diff --git a/apps/nextjs/src/components/board/sections/grid/dnd/engine.ts b/apps/nextjs/src/components/board/sections/grid/dnd/engine.ts
new file mode 100644
index 000000000..946f43423
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/dnd/engine.ts
@@ -0,0 +1,498 @@
+import { doGridPlacementsOverlap, getLayoutRowCount, normalizeGridPlacement } from "~/components/board/layout";
+import type { GridPlacement } from "~/components/board/layout";
+import type {
+  BeginGridTransactionInput,
+  GridMoveGuard,
+  GridMoveInput,
+  GridMoveOptions,
+  GridOperationRejection,
+  GridPreviewResult,
+  GridResizeDirection,
+  GridResizeInput,
+  GridTransaction,
+  TransactionalGrid,
+  TransactionalGridState,
+} from "./types";
+
+/**
+ * Starts an immutable interaction transaction. The returned snapshot is the
+ * rollback source for dnd-kit's `onDragCancel` and the baseline for every
+ * `onDragMove` / `onDragOver` preview.
+ */
+export const beginGridTransaction = <TPlacement extends GridPlacement>(
+  state: TransactionalGridState<TPlacement>,
+  input: BeginGridTransactionInput,
+): GridTransaction<TPlacement> => {
+  validateGridState(state);
+
+  const located = findPlacement(state, input.activeId);
+  if (!located) throw new Error(`Grid item "${input.activeId}" does not exist`);
+  if (input.sourceGridId !== undefined && located.grid.id !== input.sourceGridId) {
+    throw new Error(`Grid item "${input.activeId}" belongs to grid "${located.grid.id}", not "${input.sourceGridId}"`);
+  }
+
+  const snapshot = cloneGridState(state);
+  return {
+    activeId: input.activeId,
+    sourceGridId: located.grid.id,
+    snapshot,
+    preview: cloneGridState(snapshot),
+  };
+};
+
+/**
+ * Computes a move preview from the transaction snapshot. Same-grid moves that
+ * collide with one item swap into that item's slot when both resulting
+ * placements remain valid; every other move pins the active item and pushes
+ * only actual collisions. Intentional empty rows remain untouched.
+ */
+export const previewGridMove = <TPlacement extends GridPlacement>(
+  transaction: GridTransaction<TPlacement>,
+  input: GridMoveInput,
+  options: GridMoveOptions<TPlacement> = {},
+): GridPreviewResult<TPlacement> => {
+  const sourceGrid = getGrid(transaction.snapshot, transaction.sourceGridId);
+  const targetGrid = findGrid(transaction.snapshot, input.targetGridId);
+  if (!targetGrid) {
+    return rejected(transaction, {
+      code: "unknown-target-grid",
+      message: `Grid "${input.targetGridId}" does not exist`,
+    });
+  }
+
+  const active = getPlacement(sourceGrid, transaction.activeId);
+  const targetIsDescendant = isTargetWithinActiveSubtree(transaction.snapshot, targetGrid.id, transaction.activeId);
+  if (targetIsDescendant) {
+    return rejected(transaction, {
+      code: "descendant-target",
+      message: `Grid "${targetGrid.id}" is inside item "${active.id}"`,
+    });
+  }
+
+  const guardRejection = evaluateMoveGuards(options.guards ?? [], {
+    active,
+    sourceGrid,
+    targetGrid,
+    snapshot: transaction.snapshot,
+    targetIsDescendant,
+  });
+  if (guardRejection) return rejected(transaction, guardRejection);
+
+  if (!Number.isFinite(input.x) || !Number.isFinite(input.y)) {
+    return rejected(transaction, { code: "invalid-coordinate" });
+  }
+  if (active.w > targetGrid.columnCount || active.h > getMaximumRows(targetGrid)) {
+    return rejected(transaction, { code: "item-too-large" });
+  }
+
+  const nextActive = clampMovePlacement(active, input, targetGrid);
+  const preview =
+    sourceGrid.id === targetGrid.id
+      ? previewSameGridMove(transaction.snapshot, sourceGrid, active, nextActive)
+      : previewCrossGridMove(transaction.snapshot, sourceGrid, targetGrid, active, nextActive);
+
+  if (!fitsRowLimits(preview)) return rejected(transaction, { code: "row-limit" });
+  validateGridState(preview);
+  return accepted(transaction, preview);
+};
+
+/**
+ * Computes an eight-direction resize preview. Deltas describe movement of the
+ * selected handle, while the opposite edge stays anchored. Bounds and caller
+ * constraints are applied before pinned collision reflow.
+ */
+export const previewGridResize = <TPlacement extends GridPlacement>(
+  transaction: GridTransaction<TPlacement>,
+  input: GridResizeInput,
+): GridPreviewResult<TPlacement> => {
+  const grid = getGrid(transaction.snapshot, transaction.sourceGridId);
+  const active = getPlacement(grid, transaction.activeId);
+
+  if (!Number.isFinite(input.deltaColumns) || !Number.isFinite(input.deltaRows)) {
+    return rejected(transaction, { code: "invalid-coordinate" });
+  }
+
+  const constraints = getResizeConstraints(input, grid);
+  const resized = resizePlacement(active, input.direction, input, constraints, grid);
+  if (!resized) return rejected(transaction, { code: "resize-constraints" });
+
+  const preview = cloneGridState(transaction.snapshot);
+  const previewGrid = getGrid(preview, grid.id);
+  previewGrid.placements = areCoordinatesEqual(active, resized)
+    ? previewGrid.placements
+    : resolvePinnedGridCollisions(previewGrid.placements, resized, previewGrid.columnCount);
+
+  if (!fitsRowLimits(preview)) return rejected(transaction, { code: "row-limit" });
+  validateGridState(preview);
+  return accepted(transaction, preview);
+};
+
+/** Returns the latest accepted preview as one atomic state update. */
+export const commitGridTransaction = <TPlacement extends GridPlacement>(
+  transaction: GridTransaction<TPlacement>,
+): TransactionalGridState<TPlacement> => cloneGridState(transaction.preview);
+
+/** Restores the exact interaction-start snapshot. */
+export const cancelGridTransaction = <TPlacement extends GridPlacement>(
+  transaction: GridTransaction<TPlacement>,
+): TransactionalGridState<TPlacement> => cloneGridState(transaction.snapshot);
+
+const previewSameGridMove = <TPlacement extends GridPlacement>(
+  state: TransactionalGridState<TPlacement>,
+  grid: TransactionalGrid<TPlacement>,
+  active: TPlacement,
+  nextActive: TPlacement,
+) => {
+  const preview = cloneGridState(state);
+  const previewGrid = getGrid(preview, grid.id);
+  if (areCoordinatesEqual(active, nextActive)) return preview;
+
+  const collisions = grid.placements.filter(
+    (placement) => placement.id !== active.id && doGridPlacementsOverlap(placement, nextActive),
+  );
+  const displaced = collisions.length === 1 ? collisions[0] : undefined;
+
+  const swapped = displaced
+    ? grid.placements.map((placement) => {
+        if (placement.id === active.id) return { ...placement, x: displaced.x, y: displaced.y };
+        if (placement.id === displaced.id) return { ...placement, x: active.x, y: active.y };
+        return { ...placement };
+      })
+    : null;
+
+  previewGrid.placements =
+    swapped && placementsFitGrid(swapped, grid)
+      ? swapped
+      : resolvePinnedGridCollisions(grid.placements, nextActive, grid.columnCount);
+  return preview;
+};
+
+const placementsFitGrid = <TPlacement extends GridPlacement>(
+  placements: readonly TPlacement[],
+  grid: TransactionalGrid<TPlacement>,
+) =>
+  placements.every(
+    (placement) =>
+      placement.x >= 0 &&
+      placement.y >= 0 &&
+      placement.x + placement.w <= grid.columnCount &&
+      (grid.maxRowCount === undefined || grid.maxRowCount === null || placement.y + placement.h <= grid.maxRowCount),
+  ) &&
+  placements.every((placement, index) =>
+    placements.slice(index + 1).every((other) => !doGridPlacementsOverlap(placement, other)),
+  );
+
+const previewCrossGridMove = <TPlacement extends GridPlacement>(
+  state: TransactionalGridState<TPlacement>,
+  sourceGrid: TransactionalGrid<TPlacement>,
+  targetGrid: TransactionalGrid<TPlacement>,
+  active: TPlacement,
+  nextActive: TPlacement,
+) => {
+  const preview = cloneGridState(state);
+  const previewSource = getGrid(preview, sourceGrid.id);
+  const previewTarget = getGrid(preview, targetGrid.id);
+
+  previewSource.placements = sourceGrid.placements
+    .filter((placement) => placement.id !== active.id)
+    .map((placement) => ({ ...placement }));
+  previewTarget.placements = resolvePinnedGridCollisions(
+    [...targetGrid.placements, nextActive],
+    nextActive,
+    targetGrid.columnCount,
+  );
+
+  preview.grids = preview.grids.map((grid) =>
+    grid.ownerPlacementId === active.id ? { ...grid, parentGridId: targetGrid.id } : grid,
+  );
+  return preview;
+};
+
+/**
+ * Pins the active placement, keeps every non-colliding item at its persisted
+ * coordinates, and pushes only the deterministic collision chain downward.
+ */
+export const resolvePinnedGridCollisions = <TPlacement extends GridPlacement>(
+  placements: readonly TPlacement[],
+  pinnedPlacement: TPlacement,
+  columnCount: number,
+): TPlacement[] => {
+  const normalized = placements.map((placement) =>
+    normalizeGridPlacement(placement.id === pinnedPlacement.id ? pinnedPlacement : placement, columnCount),
+  );
+  const pinned = normalized.find((placement) => placement.id === pinnedPlacement.id);
+  if (!pinned) throw new Error(`Pinned grid item "${pinnedPlacement.id}" does not exist`);
+
+  const placed: TPlacement[] = [pinned];
+  const candidates = normalized.filter((placement) => placement.id !== pinned.id).toSorted(comparePlacements);
+  for (const candidate of candidates) {
+    let resolved = candidate;
+    for (;;) {
+      const collisions = placed.filter((placement) => doGridPlacementsOverlap(resolved, placement));
+      if (collisions.length === 0) break;
+      resolved = {
+        ...resolved,
+        y: Math.max(...collisions.map((placement) => placement.y + placement.h)),
+      };
+    }
+    placed.push(resolved);
+  }
+
+  const byId = new Map(placed.map((placement) => [placement.id, placement]));
+  return normalized.map((placement) => byId.get(placement.id) ?? placement);
+};
+
+const comparePlacements = (first: GridPlacement, second: GridPlacement) =>
+  first.y - second.y || first.x - second.x || first.id.localeCompare(second.id);
+
+const clampMovePlacement = <TPlacement extends GridPlacement>(
+  placement: TPlacement,
+  input: GridMoveInput,
+  grid: TransactionalGrid<TPlacement>,
+) => {
+  const maximumX = grid.columnCount - placement.w;
+  const maximumY = getMaximumRows(grid) - placement.h;
+  return {
+    ...placement,
+    x: clamp(Math.trunc(input.x), 0, maximumX),
+    y: clamp(Math.trunc(input.y), 0, maximumY),
+  };
+};
+
+interface ResolvedResizeConstraints {
+  minWidth: number;
+  minHeight: number;
+  maxWidth: number;
+  maxHeight: number;
+}
+
+const getResizeConstraints = <TPlacement extends GridPlacement>(
+  input: GridResizeInput,
+  grid: TransactionalGrid<TPlacement>,
+): ResolvedResizeConstraints => {
+  const minWidth = toPositiveInteger(input.minWidth ?? 1, "minWidth");
+  const minHeight = toPositiveInteger(input.minHeight ?? 1, "minHeight");
+  const maxWidth = toPositiveInteger(input.maxWidth ?? grid.columnCount, "maxWidth");
+  const maxHeight = toPositiveInteger(input.maxHeight ?? getMaximumRows(grid), "maxHeight");
+  if (maxWidth < minWidth) throw new RangeError("maxWidth must be greater than or equal to minWidth");
+  if (maxHeight < minHeight) throw new RangeError("maxHeight must be greater than or equal to minHeight");
+
+  return { minWidth, minHeight, maxWidth, maxHeight };
+};
+
+const resizePlacement = <TPlacement extends GridPlacement>(
+  placement: TPlacement,
+  direction: GridResizeDirection,
+  input: GridResizeInput,
+  constraints: ResolvedResizeConstraints,
+  grid: TransactionalGrid<TPlacement>,
+): TPlacement | null => {
+  const deltaX = Math.trunc(input.deltaColumns);
+  const deltaY = Math.trunc(input.deltaRows);
+  const resizeWest = direction.includes("w");
+  const resizeEast = direction.includes("e");
+  const resizeNorth = direction.includes("n");
+  const resizeSouth = direction.includes("s");
+
+  let x = placement.x;
+  let y = placement.y;
+  let width = placement.w;
+  let height = placement.h;
+
+  if (resizeWest) {
+    const fixedRight = placement.x + placement.w;
+    const maximumWidth = Math.min(constraints.maxWidth, fixedRight);
+    if (constraints.minWidth > maximumWidth) return null;
+    width = clamp(placement.w - deltaX, constraints.minWidth, maximumWidth);
+    x = fixedRight - width;
+  } else if (resizeEast) {
+    const maximumWidth = Math.min(constraints.maxWidth, grid.columnCount - placement.x);
+    if (constraints.minWidth > maximumWidth) return null;
+    width = clamp(placement.w + deltaX, constraints.minWidth, maximumWidth);
+  }
+
+  if (resizeNorth) {
+    const fixedBottom = placement.y + placement.h;
+    const maximumHeight = Math.min(constraints.maxHeight, fixedBottom);
+    if (constraints.minHeight > maximumHeight) return null;
+    height = clamp(placement.h - deltaY, constraints.minHeight, maximumHeight);
+    y = fixedBottom - height;
+  } else if (resizeSouth) {
+    const maximumHeight = Math.min(constraints.maxHeight, getMaximumRows(grid) - placement.y);
+    if (constraints.minHeight > maximumHeight) return null;
+    height = clamp(placement.h + deltaY, constraints.minHeight, maximumHeight);
+  }
+
+  return { ...placement, x, y, w: width, h: height };
+};
+
+const evaluateMoveGuards = <TPlacement extends GridPlacement>(
+  guards: readonly GridMoveGuard<TPlacement>[],
+  context: Parameters<GridMoveGuard<TPlacement>>[0],
+): GridOperationRejection | null => {
+  for (const guard of guards) {
+    const result = guard(context);
+    if (result === true) continue;
+    if (result === false) return { code: "guard-rejected" };
+    return result;
+  }
+  return null;
+};
+
+const isTargetWithinActiveSubtree = <TPlacement extends GridPlacement>(
+  state: TransactionalGridState<TPlacement>,
+  targetGridId: string,
+  activeId: string,
+) => {
+  let current: TransactionalGrid<TPlacement> | undefined = findGrid(state, targetGridId);
+  const visited = new Set<string>();
+  while (current) {
+    if (current.ownerPlacementId === activeId) return true;
+    if (!current.parentGridId || visited.has(current.id)) return false;
+    visited.add(current.id);
+    current = findGrid(state, current.parentGridId);
+  }
+  return false;
+};
+
+const accepted = <TPlacement extends GridPlacement>(
+  transaction: GridTransaction<TPlacement>,
+  preview: TransactionalGridState<TPlacement>,
+): GridPreviewResult<TPlacement> => ({
+  accepted: true,
+  transaction: { ...transaction, preview },
+});
+
+const rejected = <TPlacement extends GridPlacement>(
+  transaction: GridTransaction<TPlacement>,
+  rejection: GridOperationRejection,
+): GridPreviewResult<TPlacement> => ({ accepted: false, transaction, rejection });
+
+const fitsRowLimits = <TPlacement extends GridPlacement>(state: TransactionalGridState<TPlacement>) =>
+  state.grids.every((grid) => {
+    if (grid.maxRowCount === undefined || grid.maxRowCount === null) return true;
+    return getLayoutRowCount(grid.placements) <= grid.maxRowCount;
+  });
+
+const getMaximumRows = <TPlacement extends GridPlacement>(grid: TransactionalGrid<TPlacement>) =>
+  grid.maxRowCount ?? Number.MAX_SAFE_INTEGER;
+
+const cloneGridState = <TPlacement extends GridPlacement>(
+  state: TransactionalGridState<TPlacement>,
+): TransactionalGridState<TPlacement> => ({
+  grids: state.grids.map((grid) => ({
+    ...grid,
+    placements: grid.placements.map((placement) => ({ ...placement })),
+  })),
+});
+
+const findGrid = <TPlacement extends GridPlacement>(state: TransactionalGridState<TPlacement>, gridId: string) =>
+  state.grids.find((grid) => grid.id === gridId);
+
+const getGrid = <TPlacement extends GridPlacement>(state: TransactionalGridState<TPlacement>, gridId: string) => {
+  const grid = findGrid(state, gridId);
+  if (!grid) throw new Error(`Grid "${gridId}" does not exist`);
+  return grid;
+};
+
+const getPlacement = <TPlacement extends GridPlacement>(grid: TransactionalGrid<TPlacement>, itemId: string) => {
+  const placement = grid.placements.find((candidate) => candidate.id === itemId);
+  if (!placement) throw new Error(`Grid item "${itemId}" does not exist in grid "${grid.id}"`);
+  return placement;
+};
+
+const findPlacement = <TPlacement extends GridPlacement>(state: TransactionalGridState<TPlacement>, itemId: string) => {
+  for (const grid of state.grids) {
+    const placement = grid.placements.find((candidate) => candidate.id === itemId);
+    if (placement) return { grid, placement };
+  }
+  return null;
+};
+
+const areCoordinatesEqual = (first: GridPlacement, second: GridPlacement) =>
+  first.x === second.x && first.y === second.y && first.w === second.w && first.h === second.h;
+
+const clamp = (value: number, minimum: number, maximum: number) => Math.min(Math.max(value, minimum), maximum);
+
+const toPositiveInteger = (value: number, name: string) => {
+  if (!Number.isFinite(value) || !Number.isInteger(value) || value < 1) {
+    throw new RangeError(`${name} must be a positive integer`);
+  }
+  return value;
+};
+
+const validateGridState = <TPlacement extends GridPlacement>(state: TransactionalGridState<TPlacement>) => {
+  const gridIds = new Set<string>();
+  const placementIds = new Set<string>();
+  const ownerIds = new Set<string>();
+
+  for (const grid of state.grids) {
+    if (gridIds.has(grid.id)) throw new Error(`Duplicate grid id "${grid.id}"`);
+    gridIds.add(grid.id);
+    toPositiveInteger(grid.columnCount, `columnCount for grid "${grid.id}"`);
+    if (grid.maxRowCount !== undefined && grid.maxRowCount !== null) {
+      toPositiveInteger(grid.maxRowCount, `maxRowCount for grid "${grid.id}"`);
+    }
+
+    for (const placement of grid.placements) {
+      if (placementIds.has(placement.id)) throw new Error(`Duplicate grid item id "${placement.id}"`);
+      placementIds.add(placement.id);
+      validatePlacementBounds(placement, grid);
+    }
+    for (let index = 0; index < grid.placements.length; index += 1) {
+      const placement = grid.placements[index];
+      if (!placement) continue;
+      for (const other of grid.placements.slice(index + 1)) {
+        if (doGridPlacementsOverlap(placement, other)) {
+          throw new Error(`Grid items "${placement.id}" and "${other.id}" overlap in grid "${grid.id}"`);
+        }
+      }
+    }
+  }
+
+  for (const grid of state.grids) {
+    if (grid.parentGridId && !gridIds.has(grid.parentGridId)) {
+      throw new Error(`Parent grid "${grid.parentGridId}" for grid "${grid.id}" does not exist`);
+    }
+    if (grid.ownerPlacementId) {
+      if (!grid.parentGridId) throw new Error(`Owned grid "${grid.id}" must have a parent grid`);
+      if (ownerIds.has(grid.ownerPlacementId)) {
+        throw new Error(`Grid item "${grid.ownerPlacementId}" owns more than one grid`);
+      }
+      ownerIds.add(grid.ownerPlacementId);
+      const parent = getGrid(state, grid.parentGridId);
+      if (!parent.placements.some((placement) => placement.id === grid.ownerPlacementId)) {
+        throw new Error(`Owner item "${grid.ownerPlacementId}" does not exist in parent grid "${grid.parentGridId}"`);
+      }
+    }
+  }
+
+  for (const grid of state.grids) {
+    const visited = new Set<string>();
+    let current: TransactionalGrid<TPlacement> | undefined = grid;
+    while (current?.parentGridId) {
+      if (visited.has(current.id)) throw new Error(`Grid hierarchy contains a cycle at "${current.id}"`);
+      visited.add(current.id);
+      current = getGrid(state, current.parentGridId);
+    }
+  }
+};
+
+const validatePlacementBounds = <TPlacement extends GridPlacement>(
+  placement: TPlacement,
+  grid: TransactionalGrid<TPlacement>,
+) => {
+  const values = [placement.x, placement.y, placement.w, placement.h];
+  if (values.some((value) => !Number.isFinite(value) || !Number.isInteger(value))) {
+    throw new Error(`Grid item "${placement.id}" must use finite integer coordinates`);
+  }
+  if (placement.x < 0 || placement.y < 0 || placement.w < 1 || placement.h < 1) {
+    throw new Error(`Grid item "${placement.id}" has invalid bounds`);
+  }
+  if (placement.x + placement.w > grid.columnCount) {
+    throw new Error(`Grid item "${placement.id}" exceeds grid "${grid.id}" columns`);
+  }
+  if (placement.y + placement.h > getMaximumRows(grid)) {
+    throw new Error(`Grid item "${placement.id}" exceeds grid "${grid.id}" rows`);
+  }
+};
diff --git a/apps/nextjs/src/components/board/sections/grid/dnd/index.ts b/apps/nextjs/src/components/board/sections/grid/dnd/index.ts
new file mode 100644
index 000000000..871820bc5
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/dnd/index.ts
@@ -0,0 +1,33 @@
+export {
+  beginGridTransaction,
+  cancelGridTransaction,
+  commitGridTransaction,
+  previewGridMove,
+  previewGridResize,
+  resolvePinnedGridCollisions,
+} from "./engine";
+export {
+  getContinuousGridDelta,
+  getContinuousResizePlacement,
+  getPointerProjectedShape,
+  getSnappedGridCoordinates,
+  getSnappedGridDelta,
+} from "./coordinates";
+export type { DragProjectionOrigin } from "./coordinates";
+export { getPreferredNestedExitTargetId } from "./targeting";
+export type { GridTargetGeometry } from "./targeting";
+export type {
+  BeginGridTransactionInput,
+  GridMoveGuard,
+  GridMoveGuardContext,
+  GridMoveGuardResult,
+  GridMoveInput,
+  GridMoveOptions,
+  GridOperationRejection,
+  GridPreviewResult,
+  GridResizeDirection,
+  GridResizeInput,
+  GridTransaction,
+  TransactionalGrid,
+  TransactionalGridState,
+} from "./types";
diff --git a/apps/nextjs/src/components/board/sections/grid/dnd/targeting.spec.ts b/apps/nextjs/src/components/board/sections/grid/dnd/targeting.spec.ts
new file mode 100644
index 000000000..704ef9628
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/dnd/targeting.spec.ts
@@ -0,0 +1,68 @@
+import { describe, expect, test } from "vitest";
+
+import type { GridTargetGeometry } from "./targeting";
+import { getPreferredNestedExitTargetId } from "./targeting";
+
+const grid = (
+  id: string,
+  rectangle: GridTargetGeometry["rectangle"],
+  parentGridId: string | null = null,
+): GridTargetGeometry => ({ id, parentGridId, rectangle });
+
+const alwaysEligible = () => true;
+
+describe("nested grid exit targeting", () => {
+  const grids = [
+    grid("canvas", { left: 0, top: 0, width: 1200, height: 800 }),
+    grid("container", { left: 200, top: 100, width: 600, height: 500 }, "canvas"),
+  ];
+
+  test("keeps the nested grid while most of a large item remains inside", () => {
+    expect(
+      getPreferredNestedExitTargetId({
+        grids,
+        pointerTargetId: "container",
+        sourceGridId: "container",
+        dragShape: { left: 100, top: 150, width: 400, height: 200 },
+        isEligible: alwaysEligible,
+      }),
+    ).toBe("container");
+  });
+
+  test("selects the parent before the pointer leaves when most of the item is outside", () => {
+    expect(
+      getPreferredNestedExitTargetId({
+        grids,
+        pointerTargetId: "container",
+        sourceGridId: "container",
+        dragShape: { left: 0, top: 150, width: 400, height: 200 },
+        isEligible: alwaysEligible,
+      }),
+    ).toBe("canvas");
+  });
+
+  test("preserves a sibling container selected by the pointer", () => {
+    const withSibling = [...grids, grid("sibling", { left: 820, top: 100, width: 300, height: 500 }, "canvas")];
+    expect(
+      getPreferredNestedExitTargetId({
+        grids: withSibling,
+        pointerTargetId: "sibling",
+        sourceGridId: "container",
+        dragShape: { left: 820, top: 150, width: 300, height: 200 },
+        isEligible: alwaysEligible,
+      }),
+    ).toBe("sibling");
+  });
+
+  test("does not escape to an ineligible parent", () => {
+    expect(
+      getPreferredNestedExitTargetId({
+        grids,
+        pointerTargetId: "container",
+        sourceGridId: "container",
+        dragShape: { left: 0, top: 150, width: 400, height: 200 },
+        isEligible: (gridId) => gridId !== "canvas",
+      }),
+    ).toBe("container");
+  });
+});
diff --git a/apps/nextjs/src/components/board/sections/grid/dnd/targeting.ts b/apps/nextjs/src/components/board/sections/grid/dnd/targeting.ts
new file mode 100644
index 000000000..dbc5aabc9
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/dnd/targeting.ts
@@ -0,0 +1,90 @@
+interface RectangleLike {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+export interface GridTargetGeometry {
+  id: string;
+  parentGridId?: string | null;
+  rectangle: RectangleLike;
+}
+
+interface PreferredNestedExitTargetInput {
+  grids: readonly GridTargetGeometry[];
+  pointerTargetId: string;
+  sourceGridId: string;
+  dragShape: RectangleLike;
+  isEligible: (gridId: string) => boolean;
+}
+
+const NESTED_EXIT_RETAINED_AREA = 0.7;
+
+/**
+ * Keeps pointer precision for entering containers, but lets a large item leave
+ * once a clear portion of its projected shape is visibly outside.
+ */
+export const getPreferredNestedExitTargetId = ({
+  grids,
+  pointerTargetId,
+  sourceGridId,
+  dragShape,
+  isEligible,
+}: PreferredNestedExitTargetInput) => {
+  const byId = new Map(grids.map((grid) => [grid.id, grid]));
+  const source = byId.get(sourceGridId);
+  let current = byId.get(pointerTargetId);
+  if (!source || !current || !isSameGridOrAncestor(current.id, source, byId)) return pointerTargetId;
+
+  while (current.parentGridId) {
+    if (getCoveredAreaRatio(dragShape, current.rectangle) > NESTED_EXIT_RETAINED_AREA) break;
+
+    const parent = byId.get(current.parentGridId);
+    if (!parent || !isEligible(parent.id) || !containsCenter(parent.rectangle, dragShape)) break;
+    current = parent;
+  }
+
+  return current.id;
+};
+
+const isSameGridOrAncestor = (
+  candidateId: string,
+  source: GridTargetGeometry,
+  byId: ReadonlyMap<string, GridTargetGeometry>,
+) => {
+  let current: GridTargetGeometry | undefined = source;
+  const visited = new Set<string>();
+  while (current) {
+    if (current.id === candidateId) return true;
+    if (!current.parentGridId || visited.has(current.id)) return false;
+    visited.add(current.id);
+    current = byId.get(current.parentGridId);
+  }
+  return false;
+};
+
+const getCoveredAreaRatio = (shape: RectangleLike, target: RectangleLike) => {
+  const shapeArea = shape.width * shape.height;
+  if (!Number.isFinite(shapeArea) || shapeArea <= 0) return 1;
+
+  const width = Math.max(
+    0,
+    Math.min(shape.left + shape.width, target.left + target.width) - Math.max(shape.left, target.left),
+  );
+  const height = Math.max(
+    0,
+    Math.min(shape.top + shape.height, target.top + target.height) - Math.max(shape.top, target.top),
+  );
+  return (width * height) / shapeArea;
+};
+
+const containsCenter = (target: RectangleLike, shape: RectangleLike) => {
+  const center = { x: shape.left + shape.width / 2, y: shape.top + shape.height / 2 };
+  return (
+    center.x >= target.left &&
+    center.x <= target.left + target.width &&
+    center.y >= target.top &&
+    center.y <= target.top + target.height
+  );
+};
diff --git a/apps/nextjs/src/components/board/sections/grid/dnd/types.ts b/apps/nextjs/src/components/board/sections/grid/dnd/types.ts
new file mode 100644
index 000000000..ec77c42df
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/dnd/types.ts
@@ -0,0 +1,98 @@
+import type { GridPlacement } from "~/components/board/layout";
+
+/** A positioned grid with optional ownership metadata for nested containers. */
+export interface TransactionalGrid<TPlacement extends GridPlacement = GridPlacement> {
+  id: string;
+  columnCount: number;
+  maxRowCount?: number | null;
+  /** The grid containing the placement that owns this nested grid. */
+  parentGridId?: string | null;
+  /** The container placement whose content is rendered by this grid. */
+  ownerPlacementId?: string | null;
+  placements: readonly TPlacement[];
+}
+
+/** The complete layout that must change atomically for cross-grid operations. */
+export interface TransactionalGridState<TPlacement extends GridPlacement = GridPlacement> {
+  grids: readonly TransactionalGrid<TPlacement>[];
+}
+
+/**
+ * A drag or resize transaction. Every preview is recomputed from `snapshot`,
+ * never from the previous preview, so noisy drag-over events cannot accumulate
+ * coordinate drift.
+ */
+export interface GridTransaction<TPlacement extends GridPlacement = GridPlacement> {
+  activeId: string;
+  sourceGridId: string;
+  snapshot: TransactionalGridState<TPlacement>;
+  preview: TransactionalGridState<TPlacement>;
+}
+
+export interface BeginGridTransactionInput {
+  activeId: string;
+  /** Optional disambiguation and stale-event protection. */
+  sourceGridId?: string;
+}
+
+export interface GridMoveInput {
+  targetGridId: string;
+  x: number;
+  y: number;
+}
+
+export type GridResizeDirection = "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
+
+export interface GridResizeInput {
+  direction: GridResizeDirection;
+  /** Signed displacement of the resize handle in grid columns. */
+  deltaColumns: number;
+  /** Signed displacement of the resize handle in grid rows. */
+  deltaRows: number;
+  minWidth?: number;
+  minHeight?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+}
+
+export interface GridOperationRejection {
+  code:
+    | "descendant-target"
+    | "guard-rejected"
+    | "invalid-coordinate"
+    | "item-too-large"
+    | "resize-constraints"
+    | "row-limit"
+    | "unknown-target-grid"
+    | (string & {});
+  message?: string;
+}
+
+export interface GridMoveGuardContext<TPlacement extends GridPlacement = GridPlacement> {
+  active: TPlacement;
+  sourceGrid: TransactionalGrid<TPlacement>;
+  targetGrid: TransactionalGrid<TPlacement>;
+  snapshot: TransactionalGridState<TPlacement>;
+  /** True when the target is owned by the active container or one of its descendants. */
+  targetIsDescendant: boolean;
+}
+
+export type GridMoveGuardResult = boolean | GridOperationRejection;
+export type GridMoveGuard<TPlacement extends GridPlacement = GridPlacement> = (
+  context: GridMoveGuardContext<TPlacement>,
+) => GridMoveGuardResult;
+
+export interface GridMoveOptions<TPlacement extends GridPlacement = GridPlacement> {
+  guards?: readonly GridMoveGuard<TPlacement>[];
+}
+
+export type GridPreviewResult<TPlacement extends GridPlacement = GridPlacement> =
+  | {
+      accepted: true;
+      transaction: GridTransaction<TPlacement>;
+    }
+  | {
+      accepted: false;
+      transaction: GridTransaction<TPlacement>;
+      rejection: GridOperationRejection;
+    };
diff --git a/apps/nextjs/src/components/board/sections/grid/fixed-grid-item.tsx b/apps/nextjs/src/components/board/sections/grid/fixed-grid-item.tsx
new file mode 100644
index 000000000..17a8ddafb
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/fixed-grid-item.tsx
@@ -0,0 +1,233 @@
+"use client";
+
+import type { FocusEvent, KeyboardEvent, PropsWithChildren } from "react";
+import { useId, useRef, useState } from "react";
+import { Box } from "@mantine/core";
+import combineClasses from "clsx";
+
+import { useCurrentLayout } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
+import { useI18n } from "@homarr/translation/client";
+
+import type { ContainerSectionItem, SectionItem } from "~/app/[locale]/boards/_types";
+import {
+  getEditableGridCellAttributes,
+  getLogicalItemStyle,
+  getReadonlyGridItemAttributes,
+} from "~/components/board/layout";
+import type { GridPlacement } from "~/components/board/layout";
+import { useSectionContext } from "../section-context";
+import { beginGridTransaction, commitGridTransaction, previewGridMove, previewGridResize } from "./dnd";
+import type { GridTransaction } from "./dnd";
+import { useGridEditorRuntimeStatus } from "./grid-editor-runtime";
+import type { SectionGridPlacement } from "./use-grid-layout-actions";
+import { useGridLayoutActions } from "./use-grid-layout-actions";
+import classes from "./section-grid.module.css";
+
+interface FixedGridItemProps {
+  item: ContainerSectionItem | SectionItem;
+  minWidth?: number;
+  minHeight?: number;
+}
+
+/**
+ * Static SSR geometry in view mode and the stable content/keyboard handle in
+ * edit mode. The focused tile owns grid-based keyboard movement while dnd-kit
+ * handles pointer and touch input on the outer editor shell.
+ */
+export const FixedGridItem = ({
+  item,
+  minWidth = 1,
+  minHeight = 1,
+  children,
+}: PropsWithChildren<FixedGridItemProps>) => {
+  const [isEditMode] = useEditMode();
+  const runtimeStatus = useGridEditorRuntimeStatus();
+  const currentLayoutId = useCurrentLayout();
+  const t = useI18n();
+  const { section, items, innerSections, columnCount, maxRowCount, announce } = useSectionContext();
+  const { commitSectionGrid } = useGridLayoutActions();
+  const [isKeyboardEditing, setIsKeyboardEditing] = useState(false);
+  const instructionsId = useId();
+  const isEditorActive = isEditMode && runtimeStatus === "ready";
+  const placement = toPlacement(item);
+  const renderedPlacements = [...items, ...innerSections].map(toPlacement);
+  const keyboardGridRef = useRef<{
+    source: readonly SectionGridPlacement[];
+    current: readonly SectionGridPlacement[];
+  }>({
+    source: renderedPlacements,
+    current: renderedPlacements,
+  });
+  const displayName =
+    item.type === "item"
+      ? item.advancedOptions.title?.trim() || t(`widget.${item.kind}.name`)
+      : item.options.title.trim() || t("section.container.untitled");
+  const accessibleLabel = t("item.moveResize.entryLabel", {
+    name: displayName,
+    column: String(placement.x + 1),
+    row: String(placement.y + 1),
+  });
+  const semantics = isEditorActive
+    ? getEditableGridCellAttributes({ label: accessibleLabel, placement })
+    : getReadonlyGridItemAttributes(placement);
+
+  const setKeyboardEditing = (next: boolean) => {
+    setIsKeyboardEditing(next);
+    announce(
+      `${accessibleLabel}: ${t(next ? "item.moveResize.keyboard.started" : "item.moveResize.keyboard.stopped")}`,
+    );
+  };
+
+  const handleKeyboard = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.target !== event.currentTarget || !isEditorActive || event.altKey || event.ctrlKey || event.metaKey) {
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setKeyboardEditing(!isKeyboardEditing);
+      return;
+    }
+    if (event.key === "Escape" && isKeyboardEditing) {
+      event.preventDefault();
+      setKeyboardEditing(false);
+      return;
+    }
+    if (!isKeyboardEditing || !isArrowKey(event.key)) return;
+
+    event.preventDefault();
+    if (document.body.hasAttribute("data-board-grid-interacting")) {
+      setKeyboardEditing(false);
+      return;
+    }
+    if (!arePlacementListsEqual(keyboardGridRef.current.source, renderedPlacements)) {
+      keyboardGridRef.current = {
+        source: renderedPlacements,
+        current: renderedPlacements,
+      };
+    }
+    const placements = keyboardGridRef.current.current;
+    const current = placements.find((candidate) => candidate.id === item.id);
+    if (!current) return;
+
+    let transaction: GridTransaction<SectionGridPlacement>;
+    try {
+      transaction = beginGridTransaction(
+        {
+          grids: [
+            {
+              id: section.id,
+              columnCount,
+              maxRowCount,
+              placements,
+            },
+          ],
+        },
+        { activeId: current.id, sourceGridId: section.id },
+      );
+    } catch {
+      keyboardGridRef.current = {
+        source: renderedPlacements,
+        current: renderedPlacements,
+      };
+      setKeyboardEditing(false);
+      return;
+    }
+    const delta = getKeyboardDelta(event.key);
+    const result = event.shiftKey
+      ? previewGridResize(transaction, {
+          direction: "se",
+          deltaColumns: delta.x,
+          deltaRows: delta.y,
+          minWidth,
+          minHeight,
+        })
+      : previewGridMove(transaction, {
+          targetGridId: section.id,
+          x: current.x + delta.x,
+          y: current.y + delta.y,
+        });
+    const next = result.transaction.preview.grids[0]?.placements.find((candidate) => candidate.id === item.id);
+    if (!result.accepted || !next || arePlacementsEqual(current, next)) {
+      announce(`${accessibleLabel}: ${t("item.moveResize.keyboard.boundary")}`);
+      return;
+    }
+
+    const committed = commitGridTransaction(result.transaction).grids[0];
+    if (!committed) return;
+    keyboardGridRef.current = {
+      ...keyboardGridRef.current,
+      current: committed.placements,
+    };
+    commitSectionGrid({ layoutId: currentLayoutId, sectionId: section.id, placements: committed.placements });
+    announce(
+      `${displayName}: ${t("item.moveResize.field.xOffset.label")} ${next.x + 1}, ${t(
+        "item.moveResize.field.yOffset.label",
+      )} ${next.y + 1}, ${t("item.moveResize.field.width.label")} ${next.w}, ${t(
+        "item.moveResize.field.height.label",
+      )} ${next.h}`,
+    );
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
+    if (isKeyboardEditing && event.target === event.currentTarget) {
+      setKeyboardEditing(false);
+    }
+  };
+
+  return (
+    <Box
+      {...semantics}
+      className={combineClasses(isEditorActive ? classes.editorEntry : classes.staticItem)}
+      style={isEditorActive ? { position: "relative", width: "100%", height: "100%" } : getLogicalItemStyle(placement)}
+      data-grid-item-id={isEditorActive ? undefined : item.id}
+      data-grid-item-type={isEditorActive ? undefined : item.type}
+      data-editor-grid-entry={isEditorActive ? "true" : undefined}
+      data-type={item.type}
+      data-kind={item.kind}
+      data-keyboard-editing={isEditorActive ? String(isKeyboardEditing) : undefined}
+      aria-describedby={isEditorActive ? instructionsId : undefined}
+      aria-keyshortcuts={
+        isEditorActive
+          ? "Enter Space Escape ArrowLeft ArrowRight ArrowUp ArrowDown Shift+ArrowLeft Shift+ArrowRight Shift+ArrowUp Shift+ArrowDown"
+          : undefined
+      }
+      onBlur={isEditorActive ? handleBlur : undefined}
+      onKeyDown={isEditorActive ? handleKeyboard : undefined}
+    >
+      {children}
+      {isEditorActive && (
+        <span id={instructionsId} className={classes.liveRegion}>
+          {t("item.moveResize.keyboard.instructions")}
+        </span>
+      )}
+    </Box>
+  );
+};
+
+const toPlacement = (item: ContainerSectionItem | SectionItem): SectionGridPlacement => ({
+  id: item.id,
+  type: item.type,
+  x: item.xOffset,
+  y: item.yOffset,
+  w: item.width,
+  h: item.height,
+});
+
+const isArrowKey = (key: string): key is "ArrowLeft" | "ArrowRight" | "ArrowUp" | "ArrowDown" =>
+  key === "ArrowLeft" || key === "ArrowRight" || key === "ArrowUp" || key === "ArrowDown";
+
+const getKeyboardDelta = (key: "ArrowLeft" | "ArrowRight" | "ArrowUp" | "ArrowDown") => ({
+  x: key === "ArrowLeft" ? -1 : key === "ArrowRight" ? 1 : 0,
+  y: key === "ArrowUp" ? -1 : key === "ArrowDown" ? 1 : 0,
+});
+
+const arePlacementsEqual = (first: GridPlacement, second: GridPlacement) =>
+  first.x === second.x && first.y === second.y && first.w === second.w && first.h === second.h;
+
+const arePlacementListsEqual = (first: readonly GridPlacement[], second: readonly GridPlacement[]) =>
+  first.length === second.length &&
+  first.every((placement, index) => {
+    const candidate = second[index];
+    return candidate?.id === placement.id && arePlacementsEqual(placement, candidate);
+  });
diff --git a/apps/nextjs/src/components/board/sections/grid/grid-depth.ts b/apps/nextjs/src/components/board/sections/grid/grid-depth.ts
new file mode 100644
index 000000000..7228b39aa
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/grid-depth.ts
@@ -0,0 +1,14 @@
+export const getGridDepth = (gridId: string, parentGridById: ReadonlyMap<string, string | null>) => {
+  let depth = 0;
+  let currentGridId = gridId;
+  const visited = new Set([gridId]);
+
+  while (true) {
+    const parentGridId = parentGridById.get(currentGridId);
+    if (!parentGridId || visited.has(parentGridId)) return depth;
+
+    depth += 1;
+    visited.add(parentGridId);
+    currentGridId = parentGridId;
+  }
+};
diff --git a/apps/nextjs/src/components/board/sections/grid/grid-editor-loader.ts b/apps/nextjs/src/components/board/sections/grid/grid-editor-loader.ts
new file mode 100644
index 000000000..af9ef1164
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/grid-editor-loader.ts
@@ -0,0 +1,76 @@
+"use client";
+
+import type * as GridEditorModule from "./grid-editor";
+
+let editorModulePromise: Promise<typeof GridEditorModule> | undefined;
+
+export const loadGridEditorAsync = () => {
+  editorModulePromise ??= import("./grid-editor").catch((error: unknown) => {
+    editorModulePromise = undefined;
+    throw error;
+  });
+
+  return editorModulePromise;
+};
+
+export const scheduleGridEditorWarmup = (loadAsync: () => Promise<unknown>) => {
+  let animationFrameId: number | undefined;
+  let idleCallbackId: number | undefined;
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+  let hydrationObserver: MutationObserver | undefined;
+  let cancelled = false;
+
+  const load = () => {
+    if (!cancelled) void loadAsync().catch(() => undefined);
+  };
+  const scheduleAfterPaint = () => {
+    animationFrameId = window.requestAnimationFrame(() => {
+      if ("requestIdleCallback" in window) {
+        idleCallbackId = window.requestIdleCallback(load, { timeout: 2_000 });
+      } else {
+        timeoutId = setTimeout(load, 1_000);
+      }
+    });
+  };
+  const scheduleWhenInteractive = () => {
+    if (document.querySelector('[data-board-hydrated="true"]')) {
+      scheduleAfterPaint();
+      return;
+    }
+
+    hydrationObserver = new MutationObserver(() => {
+      if (!document.querySelector('[data-board-hydrated="true"]')) return;
+      hydrationObserver?.disconnect();
+      hydrationObserver = undefined;
+      scheduleAfterPaint();
+    });
+    hydrationObserver.observe(document.documentElement, {
+      attributeFilter: ["data-board-hydrated"],
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
+  };
+  const handleVisibilityChange = () => {
+    if (document.visibilityState !== "visible") return;
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
+    scheduleWhenInteractive();
+  };
+
+  if (document.visibilityState === "visible") {
+    scheduleWhenInteractive();
+  } else {
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+  }
+
+  return () => {
+    cancelled = true;
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
+    hydrationObserver?.disconnect();
+    if (animationFrameId !== undefined) window.cancelAnimationFrame(animationFrameId);
+    if (idleCallbackId !== undefined && "cancelIdleCallback" in window) {
+      window.cancelIdleCallback(idleCallbackId);
+    }
+    if (timeoutId !== undefined) clearTimeout(timeoutId);
+  };
+};
diff --git a/apps/nextjs/src/components/board/sections/grid/grid-editor-runtime.tsx b/apps/nextjs/src/components/board/sections/grid/grid-editor-runtime.tsx
new file mode 100644
index 000000000..7b630970e
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/grid-editor-runtime.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useContext } from "react";
+
+export type GridEditorRuntimeStatus = "idle" | "loading" | "ready" | "error";
+
+const GridEditorRuntimeContext = createContext<GridEditorRuntimeStatus>("idle");
+
+export const GridEditorRuntimeProvider = ({
+  children,
+  status,
+}: PropsWithChildren<{ status: GridEditorRuntimeStatus }>) => (
+  <GridEditorRuntimeContext.Provider value={status}>{children}</GridEditorRuntimeContext.Provider>
+);
+
+export const useGridEditorRuntimeStatus = () => useContext(GridEditorRuntimeContext);
diff --git a/apps/nextjs/src/components/board/sections/grid/grid-editor.css b/apps/nextjs/src/components/board/sections/grid/grid-editor.css
new file mode 100644
index 000000000..82a004f73
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/grid-editor.css
@@ -0,0 +1,271 @@
+.board-grid-editor {
+  position: absolute;
+  inset: 0 auto auto 0;
+  overflow: visible;
+  border-radius: var(--mantine-radius-md);
+}
+
+.board-grid-entry {
+  z-index: 1;
+  overflow: visible;
+  transition:
+    left 100ms ease,
+    top 100ms ease,
+    width 100ms ease,
+    height 100ms ease;
+}
+
+.board-grid-entry[data-dnd-active="true"],
+.board-grid-entry[data-dnd-drag-source="true"] {
+  z-index: 1000;
+  transition: none;
+}
+
+.board-grid-entry[data-dnd-drag-source="true"] {
+  opacity: 0.42;
+}
+
+.board-grid-drag-overlay[data-dnd-dragging] {
+  position: fixed !important;
+  z-index: 10000;
+  top: var(--dnd-top, 0) !important;
+  left: var(--dnd-left, 0) !important;
+  width: var(--dnd-width, auto);
+  max-width: var(--dnd-width, auto);
+  height: var(--dnd-height, auto);
+  max-height: var(--dnd-height, auto);
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  color: inherit;
+  pointer-events: none !important;
+  background: transparent;
+  border: 0;
+  transform: var(--dnd-transform, none) !important;
+  transition: var(--dnd-transition) !important;
+  will-change: translate;
+}
+
+.board-grid-drag-overlay[data-dnd-dragging]:not([data-dnd-dropping]) {
+  translate: var(--dnd-translate) !important;
+}
+
+.board-grid-drag-overlay[data-dnd-dragging][style*="--dnd-scale"] {
+  scale: var(--dnd-scale) !important;
+  transform-origin: var(--dnd-transform-origin) !important;
+}
+
+.board-grid-drag-overlay-card {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  padding: var(--mantine-spacing-md);
+  overflow: hidden;
+  font-weight: 600;
+  color: var(--mantine-color-text);
+  text-align: center;
+  overflow-wrap: anywhere;
+  place-items: center;
+  background: color-mix(in srgb, var(--mantine-color-body) 92%, transparent);
+  border: 2px solid var(--mantine-primary-color-filled);
+  border-radius: var(--mantine-radius-md);
+  box-shadow: var(--mantine-shadow-lg);
+  zoom: var(--board-grid-overlay-content-zoom, 1);
+}
+
+body[data-board-grid-interacting="drag"] .board-grid-entry,
+body[data-board-grid-interacting="drag"] .board-grid-placeholder {
+  transition: none;
+}
+
+.board-grid-content-mount,
+.board-grid-portal-content,
+.board-grid-portal-content > [data-editor-grid-entry] {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.board-grid-placeholder {
+  z-index: 0;
+  background: color-mix(in srgb, var(--mantine-primary-color-filled) 16%, transparent);
+  border: 2px dashed var(--mantine-primary-color-filled);
+  border-radius: var(--mantine-radius-md);
+  pointer-events: none;
+  transition:
+    left 100ms ease,
+    top 100ms ease,
+    width 100ms ease,
+    height 100ms ease;
+}
+
+.board-grid-placeholder[data-grid-placeholder-mode="resize"] {
+  z-index: 1001;
+  background: color-mix(in srgb, var(--mantine-primary-color-filled) 10%, transparent);
+}
+
+.board-grid-resize-outline {
+  z-index: 1002;
+  background: color-mix(in srgb, var(--mantine-primary-color-filled) 6%, transparent);
+  border: 2px solid var(--mantine-primary-color-filled);
+  border-radius: var(--mantine-radius-md);
+  pointer-events: none;
+}
+
+.board-grid-resize-outline[data-grid-resize-valid="false"] {
+  background: color-mix(in srgb, var(--mantine-color-red-filled) 8%, transparent);
+  border-color: var(--mantine-color-red-filled);
+}
+
+.board-grid-editor[data-dnd-drop-target="true"] {
+  outline: 2px solid color-mix(in srgb, var(--mantine-primary-color-filled) 60%, transparent);
+  outline-offset: 4px;
+}
+
+.board-grid-editor[data-dnd-drop-target="true"][data-dnd-drop-valid="false"] {
+  outline-color: var(--mantine-color-red-filled);
+}
+
+.board-grid-resize-handle {
+  position: absolute;
+  z-index: 20;
+  display: block;
+  padding: 0;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  touch-action: none;
+}
+
+.board-grid-resize-handle[data-grid-resize-disabled="true"] {
+  pointer-events: none;
+}
+
+.board-grid-entry[data-grid-item-type="section"][data-grid-section-chrome-active="true"] {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 4px;
+}
+
+.board-grid-entry[data-grid-item-type="section"][data-grid-section-chrome-active="true"]
+  > .board-grid-resize-handle:not([data-grid-resize-disabled="true"])::after {
+  opacity: 1;
+}
+
+.board-grid-resize-handle::after {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  width: 12px;
+  height: 3px;
+  content: "";
+  background: color-mix(in srgb, var(--mantine-color-text) 70%, transparent);
+  border-radius: var(--mantine-radius-xl);
+  opacity: 0;
+  transform: translate(-50%, -50%);
+  transition: opacity 100ms ease;
+}
+
+.board-grid-entry:hover > .board-grid-resize-handle:not([data-grid-resize-disabled="true"])::after,
+.board-grid-resize-handle:not([data-grid-resize-disabled="true"]):focus-visible::after {
+  opacity: 1;
+}
+
+.board-grid-resize-handle:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: -8px;
+}
+
+.board-grid-resize-handle[data-grid-resize-handle="n"],
+.board-grid-resize-handle[data-grid-resize-handle="s"] {
+  right: 44px;
+  left: 44px;
+  height: 32px;
+  cursor: ns-resize;
+}
+
+.board-grid-resize-handle[data-grid-resize-handle="n"] {
+  top: 0;
+}
+
+.board-grid-resize-handle[data-grid-resize-handle="s"] {
+  bottom: 0;
+}
+
+.board-grid-resize-handle[data-grid-resize-handle="e"],
+.board-grid-resize-handle[data-grid-resize-handle="w"] {
+  top: 44px;
+  bottom: 44px;
+  width: 32px;
+  cursor: ew-resize;
+}
+
+.board-grid-resize-handle[data-grid-resize-handle="e"] {
+  right: 0;
+}
+
+.board-grid-resize-handle[data-grid-resize-handle="w"] {
+  left: 0;
+}
+
+.board-grid-resize-handle[data-grid-resize-handle="e"]::after,
+.board-grid-resize-handle[data-grid-resize-handle="w"]::after {
+  width: 3px;
+  height: 12px;
+}
+
+.board-grid-resize-handle[data-grid-resize-handle="ne"],
+.board-grid-resize-handle[data-grid-resize-handle="se"],
+.board-grid-resize-handle[data-grid-resize-handle="sw"],
+.board-grid-resize-handle[data-grid-resize-handle="nw"] {
+  z-index: 9;
+  width: 44px;
+  height: 44px;
+}
+
+.board-grid-resize-handle[data-grid-resize-handle="ne"] {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize;
+}
+
+.board-grid-resize-handle[data-grid-resize-handle="se"] {
+  right: 0;
+  bottom: 0;
+  cursor: nwse-resize;
+}
+
+.board-grid-resize-handle[data-grid-resize-handle="sw"] {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize;
+}
+
+.board-grid-resize-handle[data-grid-resize-handle="nw"] {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize;
+}
+
+.board-grid-resize-handle[data-grid-resize-handle="ne"]::after,
+.board-grid-resize-handle[data-grid-resize-handle="sw"]::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.board-grid-resize-handle[data-grid-resize-handle="se"]::after,
+.board-grid-resize-handle[data-grid-resize-handle="nw"]::after {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+@media (hover: none), (pointer: coarse) {
+  .board-grid-resize-handle:not([data-grid-resize-disabled="true"])::after {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .board-grid-entry,
+  .board-grid-placeholder,
+  .board-grid-resize-outline,
+  .board-grid-resize-handle::after {
+    transition: none;
+  }
+}
diff --git a/apps/nextjs/src/components/board/sections/grid/grid-editor.tsx b/apps/nextjs/src/components/board/sections/grid/grid-editor.tsx
new file mode 100644
index 000000000..192cbf7f9
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/grid-editor.tsx
@@ -0,0 +1,1338 @@
+"use client";
+
+import type { CSSProperties, PointerEvent as ReactPointerEvent, PropsWithChildren } from "react";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+
+import "./grid-editor.css"; // oxlint-disable-line import/no-unassigned-import
+
+import type { Draggable as AbstractDraggable, Plugins } from "@dnd-kit/abstract";
+import { CollisionPriority } from "@dnd-kit/abstract";
+import { pointerIntersection } from "@dnd-kit/collision";
+import type { DragDropManager, Draggable as DomDraggable } from "@dnd-kit/dom";
+import { Accessibility, AutoScroller, Feedback, PointerActivationConstraints, PointerSensor } from "@dnd-kit/dom";
+import { getEventCoordinates, getFrameTransform, isPointerEvent } from "@dnd-kit/dom/utilities";
+import type {
+  BeforeDragStartEvent,
+  CollisionEvent,
+  DragEndEvent,
+  DragMoveEvent,
+  DragOverEvent,
+  DragStartEvent,
+} from "@dnd-kit/react";
+import { DragDropProvider, DragOverlay, useDragDropManager, useDraggable, useDroppable } from "@dnd-kit/react";
+
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { useI18n } from "@homarr/translation/client";
+
+import {
+  getLayoutRowCount,
+  getLogicalItemStyle,
+  getLogicalTrackSize,
+  LOGICAL_GRID_PITCH,
+} from "~/components/board/layout";
+import type { GridPlacement } from "~/components/board/layout";
+import { useSectionContext } from "../section-context";
+import {
+  beginGridTransaction,
+  cancelGridTransaction,
+  commitGridTransaction,
+  getContinuousGridDelta,
+  getContinuousResizePlacement,
+  getPreferredNestedExitTargetId,
+  getPointerProjectedShape,
+  getSnappedGridCoordinates,
+  getSnappedGridDelta,
+  previewGridMove,
+  previewGridResize,
+} from "./dnd";
+import type { DragProjectionOrigin, GridResizeDirection, GridTransaction, TransactionalGridState } from "./dnd";
+import { getGridDepth } from "./grid-depth";
+import { useBoardGridPortalHost } from "./grid-portal-host";
+import type { CommitSectionGridInput, SectionGridPlacement } from "./use-grid-layout-actions";
+import { useGridLayoutActions } from "./use-grid-layout-actions";
+
+const GRID_ENTRY_TYPE = "homarr-board-grid-entry";
+const GRID_TARGET_TYPE = "homarr-board-grid-target";
+
+interface GridEditorProps {
+  sectionId: string;
+  columnCount: number;
+  rowCount: number;
+  placements: readonly SectionGridPlacement[];
+  className: string;
+}
+
+interface GridEntryData {
+  kind: typeof GRID_ENTRY_TYPE;
+  sectionId: string;
+  placement: SectionGridPlacement;
+  label: string;
+}
+
+interface GridTargetData {
+  kind: typeof GRID_TARGET_TYPE;
+  sectionId: string;
+}
+
+interface RegisteredGrid {
+  id: string;
+  columnCount: number;
+  maxRowCount: number | null;
+  parentGridId: string | null;
+  ownerPlacementId: string | null;
+  placements: readonly SectionGridPlacement[];
+  depth: number;
+  element: HTMLElement;
+}
+
+interface GridInteraction {
+  activeId: string;
+  sourceGridId: string;
+  targetGridId: string | null;
+  targetPlacement: SectionGridPlacement | null;
+  state: TransactionalGridState<SectionGridPlacement>;
+  mode: "drag" | "resize";
+  valid: boolean;
+  previewRevision: number;
+}
+
+interface ActiveTransaction {
+  transaction: GridTransaction<SectionGridPlacement>;
+  label: string;
+  mode: "drag" | "resize";
+  valid: boolean;
+  targetGridId: string | null;
+  dragProjection: DragProjectionOrigin | null;
+  lastProcessedPointer: { x: number; y: number } | null;
+  lastPreviewKey: string | null;
+  previewRevision: number;
+}
+
+interface ResizeStartInput {
+  activeId: string;
+  sourceGridId: string;
+  label: string;
+}
+
+interface ResizePreviewInput {
+  direction: GridResizeDirection;
+  deltaColumns: number;
+  deltaRows: number;
+  minWidth: number;
+  minHeight: number;
+}
+
+interface BoardGridEditorContextValue {
+  interaction: GridInteraction | null;
+  registerGrid: (grid: RegisteredGrid) => () => void;
+  getDepth: (gridId: string) => number;
+  isDropTargetEligible: (source: AbstractDraggable, targetGridId: string) => boolean;
+  canAcceptDrop: (source: AbstractDraggable, targetGridId: string) => boolean;
+  beginResize: (input: ResizeStartInput) => boolean;
+  previewResize: (input: ResizePreviewInput) => boolean;
+  completeResize: () => void;
+  cancelResize: () => void;
+}
+
+const BoardGridEditorContext = createContext<BoardGridEditorContextValue | null>(null);
+
+const useBoardGridEditor = () => {
+  const value = useContext(BoardGridEditorContext);
+  if (!value) throw new Error("BoardGridEditorProvider is required");
+  return value;
+};
+
+/** One provider coordinates every root and nested grid on the board. */
+export const BoardGridEditorProvider = ({ children }: PropsWithChildren) => {
+  const board = useRequiredBoard();
+  const currentLayoutId = useCurrentLayout();
+  const t = useI18n();
+  const { announce } = useBoardGridPortalHost();
+  const { commitSectionGrids } = useGridLayoutActions();
+  const gridsRef = useRef<Map<string, RegisteredGrid>>(new Map());
+  const activeRef = useRef<ActiveTransaction | null>(null);
+  const renderedInteractionRef = useRef<GridInteraction | null>(null);
+  const collisionFrameRef = useRef(0);
+  const [interaction, setInteraction] = useState<GridInteraction | null>(null);
+  const [overlayZoom, setOverlayZoom] = useState(1);
+  const parentGridById = useMemo(
+    () =>
+      new Map<string, string | null>(
+        board.sections.map((section): [string, string | null] => [
+          section.id,
+          section.kind === "container"
+            ? (section.layouts.find((layout) => layout.layoutId === currentLayoutId)?.parentSectionId ?? null)
+            : null,
+        ]),
+      ),
+    [board.sections, currentLayoutId],
+  );
+  const getDepth = useCallback((gridId: string) => getGridDepth(gridId, parentGridById), [parentGridById]);
+
+  const clearInteraction = useCallback(() => {
+    window.cancelAnimationFrame(collisionFrameRef.current);
+    collisionFrameRef.current = 0;
+    activeRef.current = null;
+    renderedInteractionRef.current = null;
+    setInteraction(null);
+    document.body.removeAttribute("data-board-grid-interacting");
+  }, []);
+
+  useLayoutEffect(() => {
+    const active = activeRef.current;
+    renderedInteractionRef.current =
+      interaction &&
+      active &&
+      interaction.mode === active.mode &&
+      interaction.activeId === active.transaction.activeId &&
+      interaction.sourceGridId === active.transaction.sourceGridId
+        ? interaction
+        : null;
+  }, [interaction]);
+
+  useEffect(() => clearInteraction, [clearInteraction, currentLayoutId]);
+
+  const registerGrid = useCallback((grid: RegisteredGrid) => {
+    gridsRef.current.set(grid.id, grid);
+    return () => {
+      if (gridsRef.current.get(grid.id) === grid) gridsRef.current.delete(grid.id);
+    };
+  }, []);
+
+  const getCurrentState = useCallback(
+    (): TransactionalGridState<SectionGridPlacement> => ({
+      grids: Array.from(gridsRef.current.values(), (grid) => ({
+        id: grid.id,
+        columnCount: grid.columnCount,
+        maxRowCount: grid.maxRowCount,
+        parentGridId: grid.parentGridId,
+        ownerPlacementId: grid.ownerPlacementId,
+        placements: grid.placements,
+      })),
+    }),
+    [],
+  );
+
+  const isDropTargetEligible = useCallback((source: AbstractDraggable, targetGridId: string) => {
+    const data = getGridEntryData(source);
+    const target = gridsRef.current.get(targetGridId);
+    if (!data || !target) return false;
+
+    let current: RegisteredGrid | undefined = target;
+    const visited = new Set<string>();
+    while (current) {
+      if (current.ownerPlacementId === data.placement.id) return false;
+      if (!current.parentGridId || visited.has(current.id)) break;
+      visited.add(current.id);
+      current = gridsRef.current.get(current.parentGridId);
+    }
+    return true;
+  }, []);
+
+  const canAcceptDrop = useCallback(
+    (source: AbstractDraggable, targetGridId: string) => {
+      const data = getGridEntryData(source);
+      const target = gridsRef.current.get(targetGridId);
+      if (!data || !target || !isDropTargetEligible(source, targetGridId)) return false;
+      if (data.placement.w > target.columnCount) return false;
+      return target.maxRowCount === null || data.placement.h <= target.maxRowCount;
+    },
+    [isDropTargetEligible],
+  );
+
+  const beginTransaction = useCallback(
+    (
+      activeId: string,
+      sourceGridId: string,
+      mode: ActiveTransaction["mode"],
+      label: string,
+      dragProjection: DragProjectionOrigin | null = null,
+    ) => {
+      if (activeRef.current) return false;
+      try {
+        const transaction = beginGridTransaction(getCurrentState(), { activeId, sourceGridId });
+        activeRef.current = {
+          transaction,
+          label,
+          mode,
+          valid: mode === "resize",
+          targetGridId: mode === "resize" ? sourceGridId : null,
+          dragProjection,
+          lastProcessedPointer: null,
+          lastPreviewKey: null,
+          previewRevision: 0,
+        };
+        document.body.setAttribute("data-board-grid-interacting", mode);
+        setInteraction({
+          activeId,
+          sourceGridId,
+          targetGridId: mode === "resize" ? sourceGridId : null,
+          targetPlacement: null,
+          state: transaction.snapshot,
+          mode,
+          valid: mode === "resize",
+          previewRevision: 0,
+        });
+        announce(`${label}: ${t("item.action.moveResize")}`);
+        return true;
+      } catch {
+        clearInteraction();
+        return false;
+      }
+    },
+    [announce, clearInteraction, getCurrentState, t],
+  );
+
+  const updateDragPreview = useCallback(
+    (
+      operation: DragMoveEvent["operation"],
+      projectedShape?: { left: number; top: number; width: number; height: number },
+      targetOverride?: RegisteredGrid | null,
+    ) => {
+      const active = activeRef.current;
+      const source = operation.source;
+      if (!active || active.mode !== "drag") return;
+
+      const publishPreview = (preview: Omit<GridInteraction, "previewRevision">) => {
+        active.previewRevision += 1;
+        setInteraction({ ...preview, previewRevision: active.previewRevision });
+      };
+
+      const showInvalidPreview = (targetGridId: string | null, previewKey: string) => {
+        if (!active.valid && active.targetGridId === targetGridId && active.lastPreviewKey === previewKey) return;
+        active.valid = false;
+        active.targetGridId = targetGridId;
+        active.lastPreviewKey = previewKey;
+        publishPreview({
+          activeId: active.transaction.activeId,
+          sourceGridId: active.transaction.sourceGridId,
+          targetGridId,
+          targetPlacement: null,
+          state: cancelGridTransaction(active.transaction),
+          mode: "drag",
+          valid: false,
+        });
+      };
+
+      if (!source) {
+        showInvalidPreview(null, "invalid:no-target");
+        return;
+      }
+
+      const sourceData = getGridEntryData(source);
+      const shape = projectedShape ?? operation.shape?.current.boundingRectangle;
+      if (!sourceData || !shape) {
+        showInvalidPreview(null, "invalid:shape");
+        return;
+      }
+
+      const targetData = operation.target ? getGridTargetData(operation.target) : null;
+      const pointerTargetGrid = targetData ? gridsRef.current.get(targetData.sectionId) : undefined;
+      const targetGrid =
+        targetOverride === undefined
+          ? getPreferredRegisteredGridTarget(
+              gridsRef.current.values(),
+              sourceData.sectionId,
+              pointerTargetGrid,
+              shape,
+              (targetGridId) => isDropTargetEligible(source, targetGridId),
+            )
+          : (targetOverride ?? undefined);
+      if (!targetGrid) {
+        showInvalidPreview(null, "invalid:no-target");
+        return;
+      }
+
+      const coordinates = getSnappedGridCoordinates({
+        dragShape: shape,
+        target: targetGrid.element.getBoundingClientRect(),
+        columnCount: targetGrid.columnCount,
+      });
+      if (!coordinates) {
+        showInvalidPreview(targetGrid.id, `invalid:${targetGrid.id}:coordinates`);
+        return;
+      }
+      const { x, y } = coordinates;
+      const targetAcceptsSource = canAcceptDrop(source, targetGrid.id);
+      const previewKey = `${targetGrid.id}:${x}:${y}:${targetAcceptsSource ? "candidate" : "invalid"}`;
+      if (active.lastPreviewKey === previewKey) return;
+      if (!targetAcceptsSource) {
+        showInvalidPreview(targetGrid.id, previewKey);
+        return;
+      }
+
+      const result = previewGridMove(active.transaction, { targetGridId: targetGrid.id, x, y });
+      if (
+        result.accepted &&
+        doesPreviewDisplaceNestedGridOwner(
+          active.transaction.snapshot,
+          result.transaction.preview,
+          targetGrid.id,
+          active.transaction.activeId,
+        )
+      ) {
+        showInvalidPreview(targetGrid.id, `${previewKey}:nested-owner`);
+        return;
+      }
+      active.lastPreviewKey = previewKey;
+      active.targetGridId = targetGrid.id;
+      active.valid = result.accepted;
+      if (!result.accepted) {
+        publishPreview({
+          activeId: active.transaction.activeId,
+          sourceGridId: active.transaction.sourceGridId,
+          targetGridId: targetGrid.id,
+          targetPlacement: null,
+          state: cancelGridTransaction(active.transaction),
+          mode: "drag",
+          valid: false,
+        });
+        return;
+      }
+
+      active.transaction = result.transaction;
+      const targetPlacement = result.transaction.preview.grids
+        .find((grid) => grid.id === targetGrid.id)
+        ?.placements.find((placement) => placement.id === sourceData.placement.id);
+      publishPreview({
+        activeId: active.transaction.activeId,
+        sourceGridId: active.transaction.sourceGridId,
+        targetGridId: targetGrid.id,
+        targetPlacement: targetPlacement ?? null,
+        state: result.transaction.preview,
+        mode: "drag",
+        valid: true,
+      });
+    },
+    [canAcceptDrop, isDropTargetEligible],
+  );
+
+  const commitActiveTransaction = useCallback(
+    (renderedPreview?: TransactionalGridState<SectionGridPlacement>) => {
+      const active = activeRef.current;
+      if (!active?.valid) {
+        if (active) announce(`${active.label}: ${t("common.action.cancel")}`);
+        clearInteraction();
+        return;
+      }
+
+      const state = commitGridTransaction(
+        renderedPreview ? { ...active.transaction, preview: renderedPreview } : active.transaction,
+      );
+      const snapshots: CommitSectionGridInput[] = state.grids.map((grid) => ({
+        layoutId: currentLayoutId,
+        sectionId: grid.id,
+        placements: grid.placements,
+      }));
+      commitSectionGrids(snapshots);
+
+      const placement = state.grids
+        .flatMap((grid) => grid.placements)
+        .find((entry) => entry.id === active.transaction.activeId);
+      if (placement) {
+        announce(
+          `${active.label}: ${t("item.moveResize.field.xOffset.label")} ${placement.x + 1}, ${t(
+            "item.moveResize.field.yOffset.label",
+          )} ${placement.y + 1}, ${t("item.moveResize.field.width.label")} ${placement.w}, ${t(
+            "item.moveResize.field.height.label",
+          )} ${placement.h}`,
+        );
+      }
+      clearInteraction();
+    },
+    [announce, clearInteraction, commitSectionGrids, currentLayoutId, t],
+  );
+
+  const cancelActiveInteraction = useCallback(() => {
+    const active = activeRef.current;
+    if (active) announce(`${active.label}: ${t("common.action.cancel")}`);
+    clearInteraction();
+  }, [announce, clearInteraction, t]);
+
+  const handleBeforeDragStart = useCallback(() => {
+    const overlay = document.querySelector<HTMLElement>(".board-grid-drag-overlay[data-dnd-overlay]");
+    const ancestorZoom = overlay ? getAncestorCssZoom(overlay) : 1;
+    setOverlayZoom(1 / ancestorZoom);
+  }, []);
+
+  const handleDragStart = useCallback(
+    ({ operation }: DragStartEvent, manager: DragDropManager) => {
+      const data = operation.source ? getGridEntryData(operation.source) : null;
+      if (!data) return;
+      if (!beginTransaction(data.placement.id, data.sectionId, "drag", data.label)) {
+        manager.actions.stop({ canceled: true });
+        return;
+      }
+      const active = activeRef.current;
+      if (active) active.dragProjection = getInitialDragProjection(operation);
+    },
+    [beginTransaction],
+  );
+
+  const handleDragMove = useCallback(
+    ({ by, nativeEvent, operation, to }: DragMoveEvent) => {
+      const active = activeRef.current;
+      const pointer =
+        to ??
+        (by
+          ? { x: operation.position.current.x + by.x, y: operation.position.current.y + by.y }
+          : getPointerCoordinates(operation.source?.element, nativeEvent));
+      updateDragPreview(operation, getProjectedDragShape(operation, active?.dragProjection ?? null, pointer));
+      if (active?.mode === "drag" && pointer) active.lastProcessedPointer = pointer;
+    },
+    [updateDragPreview],
+  );
+
+  const handleDragOver = useCallback(
+    ({ operation }: DragOverEvent) =>
+      updateDragPreview(
+        operation,
+        getProjectedDragShape(operation, activeRef.current?.dragProjection ?? null, operation.position.current),
+      ),
+    [updateDragPreview],
+  );
+
+  const handleCollision = useCallback(
+    (_event: CollisionEvent, manager: DragDropManager) => {
+      window.cancelAnimationFrame(collisionFrameRef.current);
+      collisionFrameRef.current = window.requestAnimationFrame(() => {
+        collisionFrameRef.current = 0;
+        updateDragPreview(
+          manager.dragOperation,
+          getProjectedDragShape(
+            manager.dragOperation,
+            activeRef.current?.dragProjection ?? null,
+            manager.dragOperation.position.current,
+          ),
+        );
+      });
+    },
+    [updateDragPreview],
+  );
+
+  const handleDragEnd = useCallback(
+    ({ canceled, nativeEvent, operation }: DragEndEvent) => {
+      window.cancelAnimationFrame(collisionFrameRef.current);
+      collisionFrameRef.current = 0;
+      if (!canceled) {
+        const source = operation.source;
+        const pointer = getPointerCoordinates(source?.element, nativeEvent);
+        const active = activeRef.current;
+        const finalShape = getProjectedDragShape(operation, active?.dragProjection ?? null, pointer);
+        const finalTarget =
+          source && pointer
+            ? getPointerTargetGrid(gridsRef.current.values(), source, pointer, finalShape, isDropTargetEligible)
+            : undefined;
+
+        // The rendered placeholder is the drop contract. During auto-scroll,
+        // dnd-kit's final geometry can advance between the last collision pass
+        // and pointerup; recomputing inside the same grid would then make the
+        // item jump past the placeholder. A final hit-test is still required
+        // when the pointer changed grids, left every grid, or never produced a
+        // valid preview (for example, an immediate release).
+        const renderedInteraction = renderedInteractionRef.current;
+        const canCommitRenderedPreview =
+          active?.mode === "drag" &&
+          active?.valid === true &&
+          renderedInteraction?.mode === "drag" &&
+          renderedInteraction.valid &&
+          renderedInteraction.targetPlacement !== null &&
+          renderedInteraction.activeId === active.transaction.activeId &&
+          renderedInteraction.sourceGridId === active.transaction.sourceGridId &&
+          renderedInteraction.targetGridId === active.targetGridId &&
+          active.targetGridId === finalTarget?.id &&
+          arePointerCoordinatesEqual(active.lastProcessedPointer, pointer);
+
+        if (canCommitRenderedPreview) {
+          commitActiveTransaction(renderedInteraction.state);
+          return;
+        }
+
+        updateDragPreview(
+          operation,
+          getProjectedDragShape(operation, active?.dragProjection ?? null, pointer),
+          finalTarget,
+        );
+      }
+
+      const active = activeRef.current;
+      if (canceled || !active?.valid || !active.targetGridId) {
+        if (active) cancelActiveInteraction();
+        else clearInteraction();
+        return;
+      }
+      commitActiveTransaction();
+    },
+    [cancelActiveInteraction, clearInteraction, commitActiveTransaction, isDropTargetEligible, updateDragPreview],
+  );
+
+  const beginResize = useCallback(
+    ({ activeId, sourceGridId, label }: ResizeStartInput) => beginTransaction(activeId, sourceGridId, "resize", label),
+    [beginTransaction],
+  );
+
+  const applyResizePreview = useCallback((input: ResizePreviewInput) => {
+    const active = activeRef.current;
+    if (!active) return false;
+    active.mode = "resize";
+    active.targetGridId = active.transaction.sourceGridId;
+
+    const key = `${input.direction}:${input.deltaColumns}:${input.deltaRows}:${input.minWidth}:${input.minHeight}`;
+    if (active.lastPreviewKey === key) return active.valid;
+    active.lastPreviewKey = key;
+    const result = previewGridResize(active.transaction, input);
+    active.valid = result.accepted;
+    if (!result.accepted) {
+      active.previewRevision += 1;
+      setInteraction({
+        activeId: active.transaction.activeId,
+        sourceGridId: active.transaction.sourceGridId,
+        targetGridId: active.transaction.sourceGridId,
+        targetPlacement: null,
+        state: cancelGridTransaction(active.transaction),
+        mode: "resize",
+        valid: false,
+        previewRevision: active.previewRevision,
+      });
+      return false;
+    }
+
+    active.transaction = result.transaction;
+    active.previewRevision += 1;
+    setInteraction({
+      activeId: active.transaction.activeId,
+      sourceGridId: active.transaction.sourceGridId,
+      targetGridId: active.transaction.sourceGridId,
+      targetPlacement:
+        result.transaction.preview.grids
+          .find((grid) => grid.id === active.transaction.sourceGridId)
+          ?.placements.find((placement) => placement.id === active.transaction.activeId) ?? null,
+      state: result.transaction.preview,
+      mode: "resize",
+      valid: true,
+      previewRevision: active.previewRevision,
+    });
+    return true;
+  }, []);
+
+  const previewResize = useCallback(
+    (input: ResizePreviewInput) => {
+      const active = activeRef.current;
+      if (!active || active.mode !== "resize") return false;
+      return applyResizePreview(input);
+    },
+    [applyResizePreview],
+  );
+
+  const value = useMemo<BoardGridEditorContextValue>(
+    () => ({
+      interaction,
+      registerGrid,
+      getDepth,
+      isDropTargetEligible,
+      canAcceptDrop,
+      beginResize,
+      previewResize,
+      completeResize: commitActiveTransaction,
+      cancelResize: cancelActiveInteraction,
+    }),
+    [
+      beginResize,
+      canAcceptDrop,
+      cancelActiveInteraction,
+      commitActiveTransaction,
+      interaction,
+      isDropTargetEligible,
+      previewResize,
+      getDepth,
+      registerGrid,
+    ],
+  );
+  useEffect(() => {
+    if (interaction?.mode !== "resize") return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      cancelActiveInteraction();
+    };
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => window.removeEventListener("keydown", handleKeyDown, { capture: true });
+  }, [cancelActiveInteraction, interaction?.mode]);
+
+  return (
+    <BoardGridEditorContext.Provider value={value}>
+      <DragDropProvider
+        plugins={configureEditorPlugins}
+        onCollision={handleCollision}
+        onBeforeDragStart={handleBeforeDragStart}
+        onDragStart={handleDragStart}
+        onDragMove={handleDragMove}
+        onDragOver={handleDragOver}
+        onDragEnd={handleDragEnd}
+      >
+        {children}
+        <DragOverlay
+          className="board-grid-drag-overlay"
+          dropAnimation={null}
+          style={
+            {
+              zoom: overlayZoom,
+              "--board-grid-overlay-content-zoom": 1 / overlayZoom,
+            } as CSSProperties
+          }
+        >
+          {(source) => {
+            const data = getGridEntryData(source);
+            return data ? <div className="board-grid-drag-overlay-card">{data.label}</div> : null;
+          }}
+        </DragOverlay>
+        <GridCollisionSynchronizer interaction={interaction} />
+      </DragDropProvider>
+    </BoardGridEditorContext.Provider>
+  );
+};
+
+const GridCollisionSynchronizer = ({ interaction }: { interaction: GridInteraction | null }) => {
+  const manager = useDragDropManager();
+  const geometryKey = interaction ? getGridGeometryKey(interaction.state) : null;
+
+  useLayoutEffect(() => {
+    if (!geometryKey || !manager) return;
+    for (const target of manager.registry.droppables.value) target.refreshShape();
+    manager.collisionObserver.forceUpdate(true);
+  }, [geometryKey, manager]);
+
+  return null;
+};
+
+/** A section-local dnd-kit canvas registered with the board transaction. */
+export default function GridEditor({ sectionId, columnCount, rowCount, placements, className }: GridEditorProps) {
+  const t = useI18n();
+  const { section, items, innerSections } = useSectionContext();
+  const { interaction, registerGrid, getDepth, isDropTargetEligible } = useBoardGridEditor();
+  const gridRef = useRef<HTMLDivElement>(null);
+  const parentGridId = "parentSectionId" in section ? section.parentSectionId : null;
+  const ownerPlacementId = "parentSectionId" in section ? section.id : null;
+  const depth = getDepth(sectionId);
+  const previewGrid = interaction?.state.grids.find((grid) => grid.id === sectionId);
+  const controlledById = useMemo(() => new Map(placements.map((placement) => [placement.id, placement])), [placements]);
+  const renderPlacements = useMemo(() => {
+    if (!previewGrid || !interaction) return placements;
+
+    if (interaction.sourceGridId === sectionId) {
+      const original = controlledById.get(interaction.activeId);
+      if (!original) return previewGrid.placements;
+      return previewGrid.placements.some((placement) => placement.id === interaction.activeId)
+        ? previewGrid.placements.map((placement) => (placement.id === interaction.activeId ? original : placement))
+        : [...previewGrid.placements, original];
+    }
+    return previewGrid.placements.filter((placement) => placement.id !== interaction.activeId);
+  }, [controlledById, interaction, placements, previewGrid, sectionId]);
+  const entryById = useMemo(
+    () => new Map([...items, ...innerSections].map((entry) => [entry.id, entry])),
+    [innerSections, items],
+  );
+  const targetPlacement =
+    interaction?.valid && interaction.targetGridId === sectionId ? interaction.targetPlacement : null;
+  const renderedRowCount =
+    section.kind !== "container" && interaction?.mode === "resize"
+      ? Math.max(rowCount, getLayoutRowCount(renderPlacements))
+      : rowCount;
+
+  const { ref: droppableRef, isDropTarget } = useDroppable<GridTargetData>({
+    id: `board-grid:${sectionId}`,
+    type: GRID_TARGET_TYPE,
+    data: { kind: GRID_TARGET_TYPE, sectionId },
+    collisionDetector: pointerIntersection,
+    collisionPriority: CollisionPriority.Highest + depth,
+    // `accept` only removes the active container's own subtree. Size limits
+    // are validated after collision so an invalid nested target cannot fall
+    // through to an accepting parent grid underneath the pointer.
+    accept: (source) => isDropTargetEligible(source, sectionId),
+  });
+  const isIntentTarget = interaction?.mode === "drag" ? interaction.targetGridId === sectionId : isDropTarget;
+
+  const setGridRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      gridRef.current = element;
+      droppableRef(element);
+    },
+    [droppableRef],
+  );
+
+  useLayoutEffect(() => {
+    const element = gridRef.current;
+    if (!element) return;
+    return registerGrid({
+      id: sectionId,
+      columnCount,
+      maxRowCount: section.kind === "container" ? rowCount : null,
+      parentGridId,
+      ownerPlacementId,
+      placements,
+      depth,
+      element,
+    });
+  }, [columnCount, depth, ownerPlacementId, parentGridId, placements, registerGrid, rowCount, section.kind, sectionId]);
+
+  useLayoutEffect(() => {
+    const viewport = gridRef.current?.parentElement;
+    if (!viewport?.hasAttribute("data-section-id")) return;
+    viewport.style.setProperty("--board-grid-drag-height", `${getLogicalTrackSize(renderedRowCount)}px`);
+    return () => {
+      viewport.style.removeProperty("--board-grid-drag-height");
+    };
+  }, [renderedRowCount]);
+
+  return (
+    <div
+      ref={setGridRef}
+      className={className}
+      data-grid-section-id={sectionId}
+      data-grid-depth={depth}
+      data-dnd-drop-target={isIntentTarget ? "true" : "false"}
+      data-dnd-drop-valid={isIntentTarget ? String(targetPlacement !== null) : undefined}
+      data-dnd-preview-revision={interaction?.targetGridId === sectionId ? interaction.previewRevision : undefined}
+      style={
+        {
+          width: getLogicalTrackSize(columnCount),
+          height: getLogicalTrackSize(renderedRowCount),
+          "--board-grid-pitch": `${LOGICAL_GRID_PITCH}px`,
+        } as CSSProperties
+      }
+    >
+      {renderPlacements.map((placement) => {
+        const entry = entryById.get(placement.id);
+        const label = entry
+          ? entry.type === "item"
+            ? entry.advancedOptions.title?.trim() || t(`widget.${entry.kind}.name`)
+            : entry.options.title.trim() || t("section.container.untitled")
+          : placement.id;
+        return (
+          <DndGridEntry
+            key={placement.id}
+            sectionId={sectionId}
+            placement={placement}
+            label={label}
+            columnCount={columnCount}
+            maxRowCount={section.kind === "container" ? rowCount : null}
+          />
+        );
+      })}
+      {targetPlacement && (
+        <div
+          className="board-grid-placeholder"
+          style={getLogicalItemStyle(targetPlacement)}
+          data-grid-placeholder-for={interaction?.activeId}
+          data-grid-placeholder-mode={interaction?.mode}
+          data-grid-x={targetPlacement.x}
+          data-grid-y={targetPlacement.y}
+          data-grid-w={targetPlacement.w}
+          data-grid-h={targetPlacement.h}
+          aria-hidden="true"
+        />
+      )}
+      <span
+        data-grid-runtime="homarr-dnd-kit-v1"
+        data-editor-section-id={sectionId}
+        aria-hidden="true"
+        style={{ position: "absolute", width: 1, height: 1, pointerEvents: "none" }}
+      />
+    </div>
+  );
+}
+
+interface DndGridEntryProps {
+  sectionId: string;
+  placement: SectionGridPlacement;
+  label: string;
+  columnCount: number;
+  maxRowCount: number | null;
+}
+
+const DndGridEntry = ({ sectionId, placement, label, columnCount, maxRowCount }: DndGridEntryProps) => {
+  const { acquireContainer } = useBoardGridPortalHost();
+  const { interaction, beginResize, previewResize, completeResize, cancelResize } = useBoardGridEditor();
+  const [isSectionChromeActive, setIsSectionChromeActive] = useState(false);
+  const [continuousResize, setContinuousResize] = useState<{
+    placement: SectionGridPlacement;
+    valid: boolean;
+  } | null>(null);
+  const mountRef = useRef<HTMLDivElement>(null);
+  const shellRef = useRef<HTMLDivElement>(null);
+  const sourceData = useMemo<GridEntryData>(
+    () => ({ kind: GRID_ENTRY_TYPE, sectionId, placement, label }),
+    [label, placement, sectionId],
+  );
+  const sensors = useMemo(
+    () => [
+      PointerSensor.configure({
+        activationConstraints: (event) =>
+          event.pointerType === "touch"
+            ? [new PointerActivationConstraints.Delay({ value: 200, tolerance: 8 })]
+            : [new PointerActivationConstraints.Distance({ value: 4 })],
+        preventActivation: preventGridDragActivation,
+      }),
+    ],
+    [],
+  );
+  const {
+    ref: draggableRef,
+    handleRef,
+    isDragging,
+    isDropping,
+  } = useDraggable<GridEntryData>({
+    id: placement.id,
+    type: GRID_ENTRY_TYPE,
+    data: sourceData,
+    sensors,
+  });
+  const setShellRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      shellRef.current = element;
+      draggableRef(element);
+    },
+    [draggableRef],
+  );
+
+  useLayoutEffect(() => {
+    const mount = mountRef.current;
+    if (!mount) return;
+    const container = acquireContainer(placement.id);
+    mount.appendChild(container);
+
+    const handleSelector =
+      placement.type === "section" ? "[data-grid-container-drag-handle]" : "[data-editor-grid-entry]";
+    const bindHandle = () => handleRef(container.querySelector<HTMLElement>(handleSelector));
+    bindHandle();
+    const observer = new MutationObserver(bindHandle);
+    observer.observe(container, { childList: true, subtree: true });
+
+    return () => {
+      observer.disconnect();
+      handleRef(null);
+    };
+  }, [acquireContainer, handleRef, placement.id, placement.type]);
+
+  useLayoutEffect(() => {
+    const shell = shellRef.current;
+    if (placement.type !== "section" || !shell) return;
+
+    const handlePointerDownCapture = (event: PointerEvent) => {
+      if (!(event.target instanceof Element)) return;
+      const grip = event.target.closest("[data-grid-container-drag-handle]");
+      if (grip) {
+        const owner = grip.closest('.board-grid-entry[data-grid-item-type="section"]');
+        setIsSectionChromeActive(owner === shell);
+        return;
+      }
+
+      const resizeHandle = event.target.closest(".board-grid-resize-handle");
+      if (!resizeHandle || resizeHandle.parentElement !== shell) {
+        setIsSectionChromeActive(false);
+      }
+    };
+
+    shell.addEventListener("pointerdown", handlePointerDownCapture, { capture: true });
+    return () => shell.removeEventListener("pointerdown", handlePointerDownCapture, { capture: true });
+  }, [placement.type]);
+
+  const isActive = interaction?.activeId === placement.id;
+  const style = getLogicalItemStyle(placement) as CSSProperties;
+  const continuousResizeStyle =
+    continuousResize && isActive
+      ? getLogicalItemStyle({
+          ...continuousResize.placement,
+          x: continuousResize.placement.x - placement.x,
+          y: continuousResize.placement.y - placement.y,
+        })
+      : undefined;
+
+  return (
+    <div
+      ref={setShellRef}
+      className="board-grid-entry"
+      style={style}
+      data-grid-item-id={placement.id}
+      data-grid-item-type={placement.type}
+      data-grid-x={placement.x}
+      data-grid-y={placement.y}
+      data-grid-w={placement.w}
+      data-grid-h={placement.h}
+      data-grid-section-chrome-active={placement.type === "section" ? String(isSectionChromeActive) : undefined}
+      data-dnd-active={isActive ? "true" : undefined}
+      data-dnd-drag-source={isDragging ? "true" : undefined}
+      data-dnd-dropping={isDropping ? "true" : undefined}
+    >
+      <div ref={mountRef} className="board-grid-content-mount" />
+      {continuousResizeStyle && (
+        <div
+          className="board-grid-resize-outline"
+          style={continuousResizeStyle}
+          data-grid-resize-outline
+          data-grid-resize-valid={String(continuousResize?.valid)}
+          aria-hidden="true"
+        />
+      )}
+      <GridResizeHandles
+        sectionId={sectionId}
+        placement={placement}
+        label={label}
+        disabled={interaction !== null || (placement.type === "section" && !isSectionChromeActive)}
+        columnCount={columnCount}
+        maxRowCount={maxRowCount}
+        beginResize={beginResize}
+        previewResize={previewResize}
+        completeResize={completeResize}
+        cancelResize={cancelResize}
+        setContinuousResize={setContinuousResize}
+      />
+    </div>
+  );
+};
+
+interface GridResizeHandlesProps {
+  sectionId: string;
+  placement: SectionGridPlacement;
+  label: string;
+  disabled: boolean;
+  columnCount: number;
+  maxRowCount: number | null;
+  beginResize: BoardGridEditorContextValue["beginResize"];
+  previewResize: BoardGridEditorContextValue["previewResize"];
+  completeResize: BoardGridEditorContextValue["completeResize"];
+  cancelResize: BoardGridEditorContextValue["cancelResize"];
+  setContinuousResize: (preview: { placement: SectionGridPlacement; valid: boolean } | null) => void;
+}
+
+const RESIZE_DIRECTIONS: readonly GridResizeDirection[] = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
+
+const GridResizeHandles = ({
+  sectionId,
+  placement,
+  label,
+  disabled,
+  columnCount,
+  maxRowCount,
+  beginResize,
+  previewResize,
+  completeResize,
+  cancelResize,
+  setContinuousResize,
+}: GridResizeHandlesProps) => {
+  const pointerStartRef = useRef<{
+    id: number;
+    x: number;
+    y: number;
+    direction: GridResizeDirection;
+    visualScale: { x: number; y: number };
+  } | null>(null);
+
+  const start = (direction: GridResizeDirection) =>
+    beginResize({ activeId: placement.id, sourceGridId: sectionId, label }) && direction;
+
+  const update = (direction: GridResizeDirection, deltaColumns: number, deltaRows: number) =>
+    previewResize({
+      direction,
+      deltaColumns,
+      deltaRows,
+      minWidth: placement.minW ?? 1,
+      minHeight: placement.minH ?? 1,
+    });
+
+  const handlePointerDown = (event: ReactPointerEvent<HTMLSpanElement>, direction: GridResizeDirection) => {
+    const visualScale = getEntryVisualScale(event.currentTarget.parentElement, placement);
+    if (
+      disabled ||
+      !event.isPrimary ||
+      event.button !== 0 ||
+      pointerStartRef.current ||
+      !visualScale ||
+      !start(direction)
+    )
+      return;
+    event.preventDefault();
+    event.stopPropagation();
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+      cancelResize();
+      return;
+    }
+    pointerStartRef.current = { id: event.pointerId, x: event.clientX, y: event.clientY, direction, visualScale };
+  };
+
+  const handlePointerMove = (event: ReactPointerEvent<HTMLSpanElement>) => {
+    const started = pointerStartRef.current;
+    if (!started || started.id !== event.pointerId) return;
+    event.preventDefault();
+    const input = {
+      initial: { x: started.x, y: started.y },
+      current: { x: event.clientX, y: event.clientY },
+      visualScale: started.visualScale,
+    };
+    const snappedDelta = getSnappedGridDelta(input);
+    const continuousDelta = getContinuousGridDelta(input);
+    if (!snappedDelta || !continuousDelta) return;
+    const valid = update(started.direction, snappedDelta.x, snappedDelta.y);
+    setContinuousResize({
+      placement: getContinuousResizePlacement({
+        placement,
+        direction: started.direction,
+        deltaColumns: continuousDelta.x,
+        deltaRows: continuousDelta.y,
+        columnCount,
+        maxRowCount,
+        minWidth: placement.minW ?? 1,
+        minHeight: placement.minH ?? 1,
+      }),
+      valid,
+    });
+  };
+
+  const handlePointerEnd = (event: ReactPointerEvent<HTMLSpanElement>, canceled: boolean) => {
+    const started = pointerStartRef.current;
+    if (!started || started.id !== event.pointerId) return;
+    pointerStartRef.current = null;
+    setContinuousResize(null);
+    if (event.currentTarget.hasPointerCapture(event.pointerId))
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    if (canceled) cancelResize();
+    else {
+      const delta = getSnappedGridDelta({
+        initial: { x: started.x, y: started.y },
+        current: { x: event.clientX, y: event.clientY },
+        visualScale: started.visualScale,
+      });
+      if (delta) update(started.direction, delta.x, delta.y);
+      completeResize();
+    }
+  };
+
+  return RESIZE_DIRECTIONS.map((direction) => (
+    <span
+      key={direction}
+      className="board-grid-resize-handle"
+      data-grid-resize-handle={direction}
+      data-grid-resize-disabled={disabled ? "true" : undefined}
+      aria-hidden="true"
+      onPointerDown={(event) => handlePointerDown(event, direction)}
+      onPointerMove={handlePointerMove}
+      onPointerUp={(event) => handlePointerEnd(event, false)}
+      onPointerCancel={(event) => handlePointerEnd(event, true)}
+      onLostPointerCapture={(event) => {
+        if (pointerStartRef.current?.id !== event.pointerId) return;
+        pointerStartRef.current = null;
+        setContinuousResize(null);
+        cancelResize();
+      }}
+    />
+  ));
+};
+
+const getProjectedDragShape = (
+  operation: DragMoveEvent["operation"],
+  origin: DragProjectionOrigin | null,
+  pointer: { x: number; y: number } | null | undefined,
+) => {
+  if (origin && pointer) return getPointerProjectedShape(origin, pointer);
+  const shape = operation.shape?.current.boundingRectangle;
+  return shape ? { left: shape.left, top: shape.top, width: shape.width, height: shape.height } : undefined;
+};
+
+const getInitialDragProjection = (
+  operation: Pick<BeforeDragStartEvent["operation"], "position" | "source">,
+): DragProjectionOrigin | null => {
+  const sourceElement = operation.source?.element;
+  if (!sourceElement) return null;
+  const rectangle = sourceElement.getBoundingClientRect();
+  const frame = getFrameTransform(sourceElement);
+  return {
+    initialPointer: { ...operation.position.initial },
+    initialShape: {
+      left: rectangle.left * frame.scaleX + frame.x,
+      top: rectangle.top * frame.scaleY + frame.y,
+      width: rectangle.width * frame.scaleX,
+      height: rectangle.height * frame.scaleY,
+    },
+  };
+};
+
+const getPointerCoordinates = (sourceElement: Element | undefined, event: Event | undefined) => {
+  if (!sourceElement || !isPointerEvent(event)) return null;
+
+  const pointer = getEventCoordinates(event);
+  const frame = getFrameTransform(sourceElement);
+  return {
+    x: pointer.x * frame.scaleX + frame.x,
+    y: pointer.y * frame.scaleY + frame.y,
+  };
+};
+
+const getAncestorCssZoom = (element: Element): number => {
+  const effectiveParentZoom = element.parentElement?.currentCSSZoom;
+  if (typeof effectiveParentZoom === "number" && Number.isFinite(effectiveParentZoom) && effectiveParentZoom > 0) {
+    return effectiveParentZoom;
+  }
+
+  let zoom = 1;
+  let ancestor = element.parentElement;
+  while (ancestor) {
+    const value = Number.parseFloat(getComputedStyle(ancestor).zoom);
+    if (Number.isFinite(value) && value > 0) zoom *= value;
+    ancestor = ancestor.parentElement;
+  }
+  return zoom;
+};
+
+const arePointerCoordinatesEqual = (first: { x: number; y: number } | null, second: { x: number; y: number } | null) =>
+  first !== null && second !== null && Math.abs(first.x - second.x) <= 0.5 && Math.abs(first.y - second.y) <= 0.5;
+
+const getPointerTargetGrid = (
+  grids: Iterable<RegisteredGrid>,
+  source: AbstractDraggable,
+  pointer: { x: number; y: number },
+  projectedShape: { left: number; top: number; width: number; height: number } | undefined,
+  isTargetEligible: (source: AbstractDraggable, targetGridId: string) => boolean,
+) => {
+  const registeredGrids = Array.from(grids);
+  const pointerTarget = registeredGrids
+    .filter((grid) => {
+      const rectangle = grid.element.getBoundingClientRect();
+      return (
+        rectangle.width > 0 &&
+        rectangle.height > 0 &&
+        pointer.x >= rectangle.left &&
+        pointer.x <= rectangle.right &&
+        pointer.y >= rectangle.top &&
+        pointer.y <= rectangle.bottom &&
+        isTargetEligible(source, grid.id)
+      );
+    })
+    .toSorted((first, second) => {
+      if (first.depth !== second.depth) return second.depth - first.depth;
+      const firstRectangle = first.element.getBoundingClientRect();
+      const secondRectangle = second.element.getBoundingClientRect();
+      return firstRectangle.width * firstRectangle.height - secondRectangle.width * secondRectangle.height;
+    })[0];
+  const sourceData = getGridEntryData(source);
+  if (!pointerTarget || !projectedShape || !sourceData) return pointerTarget ?? null;
+
+  return getPreferredRegisteredGridTarget(
+    registeredGrids,
+    sourceData.sectionId,
+    pointerTarget,
+    projectedShape,
+    (targetGridId) => isTargetEligible(source, targetGridId),
+  );
+};
+
+const getPreferredRegisteredGridTarget = (
+  grids: Iterable<RegisteredGrid>,
+  sourceGridId: string,
+  pointerTarget: RegisteredGrid | undefined,
+  dragShape: { left: number; top: number; width: number; height: number },
+  isEligible: (gridId: string) => boolean,
+) => {
+  if (!pointerTarget) return undefined;
+  const registeredGrids = Array.from(grids);
+  const preferredId = getPreferredNestedExitTargetId({
+    grids: registeredGrids.map((grid) => ({
+      id: grid.id,
+      parentGridId: grid.parentGridId,
+      rectangle: grid.element.getBoundingClientRect(),
+    })),
+    pointerTargetId: pointerTarget.id,
+    sourceGridId,
+    dragShape,
+    isEligible,
+  });
+  return registeredGrids.find((grid) => grid.id === preferredId) ?? pointerTarget;
+};
+
+const doesPreviewDisplaceNestedGridOwner = (
+  snapshot: TransactionalGridState<SectionGridPlacement>,
+  preview: TransactionalGridState<SectionGridPlacement>,
+  targetGridId: string,
+  activeId: string,
+) => {
+  const ownerIds = new Set(
+    snapshot.grids
+      .filter((grid) => grid.parentGridId === targetGridId && grid.ownerPlacementId !== activeId)
+      .flatMap((grid) => (grid.ownerPlacementId ? [grid.ownerPlacementId] : [])),
+  );
+  if (ownerIds.size === 0) return false;
+
+  const original = snapshot.grids.find((grid) => grid.id === targetGridId);
+  const candidate = preview.grids.find((grid) => grid.id === targetGridId);
+  if (!original || !candidate) return false;
+  const originalById = new Map(original.placements.map((placement) => [placement.id, placement]));
+  return candidate.placements.some((placement) => {
+    const previous = originalById.get(placement.id);
+    return Boolean(previous && ownerIds.has(placement.id) && !areGridPlacementCoordinatesEqual(previous, placement));
+  });
+};
+
+const areGridPlacementCoordinatesEqual = (first: GridPlacement, second: GridPlacement) =>
+  first.x === second.x && first.y === second.y && first.w === second.w && first.h === second.h;
+
+const preventGridDragActivation = (event: PointerEvent, source: DomDraggable) => {
+  if (document.body.hasAttribute("data-board-grid-interacting")) return true;
+  const target = event.target;
+  if (!(target instanceof Element) || target === source.handle) return false;
+  const interactive = target.closest(
+    'a,button,input,textarea,select,option,[contenteditable="true"],[role="button"],[data-grid-no-drag],.board-grid-resize-handle',
+  );
+  return Boolean(interactive && source.handle?.contains(interactive));
+};
+
+const getEntryVisualScale = (element: HTMLElement | null, placement: SectionGridPlacement) => {
+  if (!element) return null;
+  const rectangle = element.getBoundingClientRect();
+  const scale = {
+    x: rectangle.width / getLogicalTrackSize(placement.w),
+    y: rectangle.height / getLogicalTrackSize(placement.h),
+  };
+  return Number.isFinite(scale.x) && scale.x > 0 && Number.isFinite(scale.y) && scale.y > 0 ? scale : null;
+};
+
+const configureEditorPlugins = (defaults: Plugins<DragDropManager>) =>
+  defaults
+    .filter((plugin) => plugin !== Accessibility)
+    .map((plugin) => {
+      if (plugin === Feedback)
+        return Feedback.configure({
+          feedback: "move",
+          dropAnimation: null,
+          keyboardTransition: { duration: 100 },
+        });
+      if (plugin === AutoScroller) return AutoScroller.configure({ acceleration: 24, threshold: { x: 0.16, y: 0.16 } });
+      return plugin;
+    });
+
+const getGridEntryData = (source: AbstractDraggable): GridEntryData | null => {
+  const data = source.data as Partial<GridEntryData>;
+  return data.kind === GRID_ENTRY_TYPE && data.placement && data.sectionId && data.label
+    ? (data as GridEntryData)
+    : null;
+};
+
+const getGridTargetData = (target: { data: Record<string, unknown> }): GridTargetData | null => {
+  const data = target.data as Partial<GridTargetData>;
+  return data.kind === GRID_TARGET_TYPE && data.sectionId ? (data as GridTargetData) : null;
+};
+
+const getGridGeometryKey = (state: TransactionalGridState<SectionGridPlacement>) =>
+  JSON.stringify(
+    state.grids
+      .map((grid) => ({
+        id: grid.id,
+        columnCount: grid.columnCount,
+        maxRowCount: grid.maxRowCount,
+        parentGridId: grid.parentGridId,
+        placements: grid.placements
+          .map(({ id, x, y, w, h }) => ({ id, x, y, w, h }))
+          .toSorted((first, second) => first.id.localeCompare(second.id)),
+      }))
+      .toSorted((first, second) => first.id.localeCompare(second.id)),
+  );
diff --git a/apps/nextjs/src/components/board/sections/grid/grid-portal-host.tsx b/apps/nextjs/src/components/board/sections/grid/grid-portal-host.tsx
new file mode 100644
index 000000000..f08afa600
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/grid-portal-host.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { useSession } from "@homarr/auth/client";
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
+import { getRootSectionLane } from "@homarr/definitions";
+
+import type { ContainerSectionItem, Section } from "~/app/[locale]/boards/_types";
+import { getBoardLaneColumnCount } from "~/components/board/layout";
+import { SectionContentItem } from "../content";
+import { SectionProvider } from "../section-context";
+import { useSectionItems } from "../use-section-items";
+import classes from "./section-grid.module.css";
+
+interface GridPortalHostContextValue {
+  announce: (message: string) => void;
+  integrations: RouterOutputs["integration"]["all"] | undefined;
+  containers: ReadonlyMap<string, HTMLElement>;
+  acquireContainer: (id: string) => HTMLElement;
+}
+
+const GridPortalHostContext = createContext<GridPortalHostContextValue | null>(null);
+
+/**
+ * One portal registry owns every edit-mode item on the board. Its content
+ * containers are stable even when drag-and-drop replaces or transfers the
+ * outer positioning shell, so moving between grids does not remount widget
+ * content.
+ */
+export const BoardGridPortalHost = ({ children }: PropsWithChildren) => {
+  const board = useRequiredBoard();
+  const { data: session } = useSession();
+  const [isEditMode] = useEditMode();
+  const { data: integrations } = clientApi.integration.all.useQuery(undefined, {
+    enabled: Boolean(session) && isEditMode,
+  });
+  const containersRef = useRef<Map<string, HTMLElement>>(new Map());
+  const [containers, setContainers] = useState<Map<string, HTMLElement>>(() => new Map());
+  const [announcement, setAnnouncement] = useState({ id: 0, message: "" });
+  const announce = useCallback((message: string) => {
+    setAnnouncement((previous) => ({ id: previous.id + 1, message }));
+  }, []);
+  const liveEntryIds = useMemo(
+    () => new Set([...board.items.map((item) => item.id), ...board.sections.map((section) => section.id)]),
+    [board.items, board.sections],
+  );
+
+  const acquireContainer = useCallback((id: string) => {
+    const existing = containersRef.current.get(id);
+    if (existing) return existing;
+
+    const container = document.createElement("div");
+    container.className = "board-grid-portal-content";
+    container.dataset.boardGridPortal = id;
+    containersRef.current.set(id, container);
+    setContainers(new Map(containersRef.current));
+    return container;
+  }, []);
+
+  useEffect(() => {
+    // A cross-grid move can briefly have no shell, but the entry still exists
+    // on the board. Only remove containers whose board entity was deleted.
+    let didPrune = false;
+    for (const id of containersRef.current.keys()) {
+      if (liveEntryIds.has(id)) continue;
+      containersRef.current.delete(id);
+      didPrune = true;
+    }
+    if (didPrune) setContainers(new Map(containersRef.current));
+  }, [liveEntryIds]);
+
+  const value = useMemo<GridPortalHostContextValue>(
+    () => ({
+      announce,
+      integrations,
+      containers,
+      acquireContainer,
+    }),
+    [acquireContainer, announce, containers, integrations],
+  );
+
+  return (
+    <GridPortalHostContext.Provider value={value}>
+      {children}
+      <div className={classes.liveRegion} aria-live="polite" aria-atomic="true">
+        <span key={announcement.id}>{announcement.message}</span>
+      </div>
+    </GridPortalHostContext.Provider>
+  );
+};
+
+/**
+ * Renders stable portal content at this component's logical React position.
+ * Keep it inside the editor runtime and dnd-kit providers so portaled entries
+ * inherit the same keyboard, transaction, and nested-grid contexts as shells.
+ */
+export const BoardGridPortalRenderer = () => {
+  const board = useRequiredBoard();
+  const currentLayoutId = useCurrentLayout();
+  const { announce, containers, integrations } = useBoardGridPortalHost();
+
+  return (
+    <>
+      {Array.from(containers, ([id, container]) => {
+        const ownerSectionId = getOwnerSectionId(board, currentLayoutId, id);
+        return ownerSectionId
+          ? createPortal(
+              <GridPortalContent
+                itemId={id}
+                ownerSectionId={ownerSectionId}
+                integrations={integrations}
+                announce={announce}
+              />,
+              container,
+              id,
+            )
+          : null;
+      })}
+    </>
+  );
+};
+
+export const useBoardGridPortalHost = () => {
+  const context = useContext(GridPortalHostContext);
+  if (!context) throw new Error("BoardGridPortalHost is required");
+  return context;
+};
+
+interface GridPortalContentProps {
+  itemId: string;
+  ownerSectionId: string;
+  integrations: RouterOutputs["integration"]["all"] | undefined;
+  announce: (message: string) => void;
+}
+
+const GridPortalContent = ({ itemId, ownerSectionId, integrations, announce }: GridPortalContentProps) => {
+  const board = useRequiredBoard();
+  const currentLayoutId = useCurrentLayout();
+  const { items, innerSections } = useSectionItems(ownerSectionId);
+  const persistedEntry = [...items, ...innerSections].find((candidate) => candidate.id === itemId);
+  const entry = persistedEntry;
+  const rawSection = board.sections.find((section) => section.id === ownerSectionId);
+  const currentLayout = board.layouts.find((layout) => layout.id === currentLayoutId);
+  const persistedSection = toGridSection(rawSection, currentLayoutId);
+  const section = persistedSection;
+
+  if (!entry || !section || !currentLayout) return null;
+
+  const columnCount =
+    section.kind === "container"
+      ? section.width
+      : section.kind === "empty"
+        ? getBoardLaneColumnCount(currentLayout, getRootSectionLane(section.xOffset))
+        : currentLayout.columnCount;
+  const configuredMaxRowCount = section.kind === "container" ? section.height : null;
+  const contentRowCount = Math.max(
+    1,
+    ...items.map((item) => item.yOffset + item.height),
+    ...innerSections.map((innerSection) => innerSection.yOffset + innerSection.height),
+  );
+  const maxRowCount = configuredMaxRowCount === null ? null : Math.max(configuredMaxRowCount, contentRowCount);
+
+  return (
+    <SectionProvider
+      value={{
+        section,
+        items,
+        innerSections,
+        integrations,
+        columnCount,
+        maxRowCount,
+        announce,
+      }}
+    >
+      <SectionContentItem item={entry} integrations={integrations} />
+    </SectionProvider>
+  );
+};
+
+const toGridSection = (
+  section: Section | undefined,
+  layoutId: string,
+): Exclude<Section, { kind: "container" }> | ContainerSectionItem | null => {
+  if (!section) return null;
+  if (section.kind !== "container") return section;
+
+  const layout = section.layouts.find((candidate) => candidate.layoutId === layoutId);
+  if (!layout) return null;
+
+  return {
+    ...section,
+    ...layout,
+    type: "section",
+  };
+};
+
+const getOwnerSectionId = (board: ReturnType<typeof useRequiredBoard>, layoutId: string, entryId: string) => {
+  const item = board.items.find((candidate) => candidate.id === entryId);
+  if (item) {
+    return item.layouts.find((layout) => layout.layoutId === layoutId)?.sectionId ?? null;
+  }
+
+  const section = board.sections.find((candidate) => candidate.kind === "container" && candidate.id === entryId);
+  if (!section || section.kind !== "container") return null;
+  return section.layouts.find((layout) => layout.layoutId === layoutId)?.parentSectionId ?? null;
+};
diff --git a/apps/nextjs/src/components/board/sections/grid/section-grid-placements.ts b/apps/nextjs/src/components/board/sections/grid/section-grid-placements.ts
new file mode 100644
index 000000000..bd99a921d
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/section-grid-placements.ts
@@ -0,0 +1,49 @@
+import { getBoardLaneColumnCount, getRootSectionLane } from "@homarr/definitions";
+
+import type { Board } from "~/app/[locale]/boards/_types";
+import type { SectionGridPlacement } from "./use-grid-layout-actions";
+
+export const getSectionGridPlacements = (board: Board, layoutId: string, sectionId: string): SectionGridPlacement[] => [
+  ...board.items.flatMap((item) => {
+    const layout = item.layouts.find((candidate) => candidate.layoutId === layoutId);
+    return layout?.sectionId === sectionId
+      ? [
+          {
+            id: item.id,
+            type: "item" as const,
+            x: layout.xOffset,
+            y: layout.yOffset,
+            w: layout.width,
+            h: layout.height,
+          },
+        ]
+      : [];
+  }),
+  ...board.sections.flatMap((section) => {
+    if (section.kind !== "container") return [];
+    const layout = section.layouts.find((candidate) => candidate.layoutId === layoutId);
+    return layout?.parentSectionId === sectionId
+      ? [
+          {
+            id: section.id,
+            type: "section" as const,
+            x: layout.xOffset,
+            y: layout.yOffset,
+            w: layout.width,
+            h: layout.height,
+          },
+        ]
+      : [];
+  }),
+];
+
+export const getSectionGridColumnCount = (board: Board, layoutId: string, sectionId: string): number | null => {
+  const section = board.sections.find((candidate) => candidate.id === sectionId);
+  if (!section) return null;
+  if (section.kind === "container") {
+    return section.layouts.find((layout) => layout.layoutId === layoutId)?.width ?? null;
+  }
+
+  const layout = board.layouts.find((candidate) => candidate.id === layoutId);
+  return layout ? getBoardLaneColumnCount(layout, getRootSectionLane(section.xOffset)) : null;
+};
diff --git a/apps/nextjs/src/components/board/sections/grid/section-grid.module.css b/apps/nextjs/src/components/board/sections/grid/section-grid.module.css
new file mode 100644
index 000000000..6c619a4c7
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/section-grid.module.css
@@ -0,0 +1,75 @@
+.viewport {
+  position: relative;
+  overflow: visible;
+}
+
+.staticGrid,
+.editorGrid {
+  position: relative;
+  overflow: visible;
+}
+
+.editorGrid {
+  position: absolute;
+  inset: 0 auto auto 0;
+}
+
+.staticItem {
+  overflow: visible;
+  transition:
+    left 220ms ease,
+    top 220ms ease,
+    width 220ms ease,
+    height 220ms ease;
+}
+
+.editorEntry {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  cursor: grab;
+  user-select: none;
+}
+
+.editorEntry:active {
+  cursor: grabbing;
+}
+
+.editorEntry:focus-visible,
+.editorEntry[data-keyboard-editing="true"] {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
+  border-radius: var(--mantine-radius-md);
+}
+
+.editorLoading {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  overflow: hidden;
+}
+
+.editorLoadingItem {
+  background-color: var(--mantine-color-default);
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-md);
+}
+
+.liveRegion {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .staticItem {
+    transition: none;
+  }
+}
diff --git a/apps/nextjs/src/components/board/sections/grid/section-grid.tsx b/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
new file mode 100644
index 000000000..3ab7b292b
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
@@ -0,0 +1,262 @@
+"use client";
+
+import { useMemo } from "react";
+import dynamic from "next/dynamic";
+import { Box, LoadingOverlay } from "@mantine/core";
+import combineClasses from "clsx";
+
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
+import { useI18n } from "@homarr/translation/client";
+
+import type { ContainerSectionItem, Section } from "~/app/[locale]/boards/_types";
+import {
+  getCollapsedDisplayLayout,
+  getEditableCanvasAttributes,
+  getLayoutRowCount,
+  getLogicalItemStyle,
+  getLogicalTrackSize,
+  getReadonlyCanvasAttributes,
+  normalizeGridPlacement,
+} from "~/components/board/layout";
+import { loadGridEditorAsync } from "./grid-editor-loader";
+import { useGridEditorRuntimeStatus } from "./grid-editor-runtime";
+import type { SectionGridPlacement } from "./use-grid-layout-actions";
+import { SectionContent } from "../content";
+import { useCollapsedSectionIds } from "../section-collapse";
+import { SectionProvider, useSectionContext } from "../section-context";
+import { useSectionItems } from "../use-section-items";
+import { useBoardGridPortalHost } from "./grid-portal-host";
+import classes from "./section-grid.module.css";
+
+const GridEditor = dynamic(loadGridEditorAsync, {
+  loading: GridEditorLoading,
+  ssr: false,
+});
+
+function GridEditorLoading() {
+  const t = useI18n();
+  const { items, innerSections } = useSectionContext();
+
+  return (
+    <Box
+      component="output"
+      className={classes.editorLoading}
+      data-testid="board-grid-editor-loading"
+      aria-label={t("common.action.loading")}
+    >
+      {[...items, ...innerSections].map((item) => (
+        <Box
+          key={item.id}
+          className={classes.editorLoadingItem}
+          style={getLogicalItemStyle({
+            x: item.xOffset,
+            y: item.yOffset,
+            w: item.width,
+            h: item.height,
+          })}
+          aria-hidden="true"
+        />
+      ))}
+      <LoadingOverlay visible />
+    </Box>
+  );
+}
+
+interface SectionGridProps {
+  section: Exclude<Section, { kind: "container" }> | ContainerSectionItem;
+  columnCount: number;
+  requestedRowCount?: number;
+  label: string;
+  railPlacement?: "main" | "left" | "right";
+  className?: string;
+}
+
+export const SectionGrid = ({
+  section,
+  columnCount,
+  requestedRowCount = 0,
+  label,
+  railPlacement = "main",
+  className,
+}: SectionGridProps) => {
+  const [isEditMode] = useEditMode();
+  const editorRuntimeStatus = useGridEditorRuntimeStatus();
+  const board = useRequiredBoard();
+  const currentLayoutId = useCurrentLayout();
+  const { items, innerSections } = useSectionItems(section.id);
+  const { announce, integrations } = useBoardGridPortalHost();
+  const collapsedSectionIds = useCollapsedSectionIds();
+  const minimumBySectionId = useMemo(
+    () =>
+      new Map(
+        innerSections.map((innerSection) => [
+          innerSection.id,
+          getContainerMinimumSize(board, currentLayoutId, innerSection.id),
+        ]),
+      ),
+    [board, currentLayoutId, innerSections],
+  );
+
+  const placements = useMemo(
+    () =>
+      [...items, ...innerSections].map((item): SectionGridPlacement => {
+        const minimum = item.type === "section" ? minimumBySectionId.get(item.id) : undefined;
+        return normalizeGridPlacement(
+          {
+            id: item.id,
+            type: item.type,
+            x: item.xOffset,
+            y: item.yOffset,
+            w: item.width,
+            h: item.height,
+            minW: minimum?.width,
+            minH: minimum?.height,
+          },
+          columnCount,
+        );
+      }),
+    [columnCount, innerSections, items, minimumBySectionId],
+  );
+
+  const displayPlacements = useMemo(() => {
+    const directCollapsedIds = new Set(
+      placements
+        .filter(
+          (placement) =>
+            placement.type === "section" &&
+            collapsedSectionIds.has(placement.id) &&
+            innerSections.find((innerSection) => innerSection.id === placement.id)?.options.collapsible,
+        )
+        .map((placement) => placement.id),
+    );
+    if (directCollapsedIds.size === 0) return placements;
+
+    return getCollapsedDisplayLayout(placements, {
+      columnCount,
+      collapsedItemIds: directCollapsedIds,
+    });
+  }, [collapsedSectionIds, columnCount, innerSections, placements]);
+
+  const placementById = useMemo(
+    () => new Map(displayPlacements.map((placement) => [placement.id, placement])),
+    [displayPlacements],
+  );
+  const displayedItems = items.map((item) => withPlacement(item, placementById.get(item.id)));
+  const displayedInnerSections = innerSections.map((item) => withPlacement(item, placementById.get(item.id)));
+  const contentRowCount = Math.max(1, getLayoutRowCount(displayPlacements));
+  const rowCount = Math.max(contentRowCount, requestedRowCount);
+  const logicalWidth = getLogicalTrackSize(columnCount);
+  const logicalHeight = getLogicalTrackSize(rowCount);
+  const canvasAttributes = isEditMode
+    ? getEditableCanvasAttributes({ label, columnCount, rowCount })
+    : getReadonlyCanvasAttributes({ label });
+
+  return (
+    <SectionProvider
+      value={{
+        section,
+        items: displayedItems,
+        innerSections: displayedInnerSections,
+        integrations,
+        columnCount,
+        maxRowCount: section.kind === "container" ? rowCount : null,
+        announce,
+      }}
+    >
+      <Box
+        {...canvasAttributes}
+        className={combineClasses(classes.viewport, className)}
+        w={logicalWidth}
+        h={`var(--board-grid-drag-height, ${logicalHeight}px)`}
+        data-section-id={section.id}
+        data-section-kind={section.kind}
+        data-rail-placement={railPlacement}
+      >
+        {isEditMode && editorRuntimeStatus === "ready" ? (
+          <GridEditor
+            sectionId={section.id}
+            columnCount={columnCount}
+            rowCount={rowCount}
+            placements={displayPlacements}
+            className={combineClasses("board-grid-editor", classes.editorGrid)}
+          />
+        ) : isEditMode && editorRuntimeStatus === "loading" ? (
+          <GridEditorLoading />
+        ) : (
+          <Box
+            className={classes.staticGrid}
+            style={{ width: logicalWidth, height: logicalHeight }}
+            data-grid-section-id={section.id}
+            data-kind={section.kind}
+            data-grid-editor-error={isEditMode && editorRuntimeStatus === "error" ? "true" : undefined}
+          >
+            <SectionContent />
+          </Box>
+        )}
+      </Box>
+    </SectionProvider>
+  );
+};
+
+const getContainerMinimumSize = (
+  board: ReturnType<typeof useRequiredBoard>,
+  layoutId: string,
+  sectionId: string,
+  visited = new Set<string>(),
+): { width: number; height: number } => {
+  if (visited.has(sectionId)) return { width: 1, height: 1 };
+  const nextVisited = new Set(visited).add(sectionId);
+  const directItems: PlacementBounds[] = board.items.flatMap((item) => {
+    const layout = item.layouts.find((candidate) => candidate.layoutId === layoutId);
+    return layout?.sectionId === sectionId ? [layout] : [];
+  });
+  const directSections: PlacementBounds[] = board.sections.flatMap((candidate) => {
+    if (candidate.kind !== "container") return [];
+    const layout = candidate.layouts.find((candidateLayout) => candidateLayout.layoutId === layoutId);
+    if (!layout || layout.parentSectionId !== sectionId) return [];
+    const minimum = getContainerMinimumSize(board, layoutId, candidate.id, nextVisited);
+    return [
+      {
+        ...layout,
+        width: Math.max(layout.width, minimum.width),
+        height: Math.max(layout.height, minimum.height),
+      },
+    ];
+  });
+  const children = [...directItems, ...directSections];
+
+  return {
+    width: Math.max(1, ...children.map((child) => child.xOffset + child.width)),
+    height: Math.max(1, ...children.map((child) => child.yOffset + child.height)),
+  };
+};
+
+interface PlacementBounds {
+  xOffset: number;
+  yOffset: number;
+  width: number;
+  height: number;
+}
+
+const withPlacement = <
+  TItem extends {
+    id: string;
+    xOffset: number;
+    yOffset: number;
+    width: number;
+    height: number;
+  },
+>(
+  item: TItem,
+  placement: SectionGridPlacement | undefined,
+): TItem => {
+  if (!placement) return item;
+  return {
+    ...item,
+    xOffset: placement.x,
+    yOffset: placement.y,
+    width: placement.w,
+    height: placement.h,
+  };
+};
diff --git a/apps/nextjs/src/components/board/sections/grid/test/fixed-grid-item.spec.ts b/apps/nextjs/src/components/board/sections/grid/test/fixed-grid-item.spec.ts
new file mode 100644
index 000000000..12ed7e84d
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/test/fixed-grid-item.spec.ts
@@ -0,0 +1,321 @@
+import { act, createElement } from "react";
+import type { ReactNode } from "react";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { getCollapsedDisplayLayout, LOGICAL_GRID_CELL_SIZE } from "../../../layout";
+import { FixedGridItem } from "../fixed-grid-item";
+
+const mocks = vi.hoisted(() => ({
+  announce: vi.fn(),
+  commitSectionGrid: vi.fn(),
+  editMode: true,
+  maxRowCount: null as number | null,
+  items: [
+    {
+      id: "weather",
+      type: "item" as const,
+      kind: "weather" as const,
+      xOffset: 0,
+      yOffset: 0,
+      width: 1,
+      height: 1,
+      advancedOptions: {
+        title: null as string | null,
+      },
+    },
+    {
+      id: "clock",
+      type: "item" as const,
+      kind: "clock" as const,
+      xOffset: 1,
+      yOffset: 0,
+      width: 1,
+      height: 1,
+      advancedOptions: {
+        title: null as string | null,
+      },
+    },
+  ],
+}));
+
+vi.mock("@homarr/boards/edit-mode", () => ({
+  useEditMode: () => [mocks.editMode],
+}));
+
+vi.mock("@homarr/boards/context", () => ({
+  useCurrentLayout: () => "layout",
+}));
+
+vi.mock("@homarr/translation/client", () => ({
+  useI18n: () => (key: string, values?: Record<string, string>) =>
+    key === "item.moveResize.entryLabel" ? `${values?.name}, column ${values?.column}, row ${values?.row}` : key,
+}));
+
+vi.mock("../use-grid-layout-actions", () => ({
+  useGridLayoutActions: () => ({
+    commitSectionGrid: mocks.commitSectionGrid,
+  }),
+}));
+
+vi.mock("../grid-editor-runtime", () => ({
+  useGridEditorRuntimeStatus: () => "ready",
+}));
+
+vi.mock("../../section-context", () => ({
+  useSectionContext: () => ({
+    section: { id: "root", kind: "empty", options: {} },
+    items: mocks.items,
+    innerSections: [],
+    columnCount: 3,
+    maxRowCount: mocks.maxRowCount,
+    announce: mocks.announce,
+  }),
+}));
+
+vi.mock("@mantine/core", async () => {
+  const React = await import("react");
+
+  return {
+    Box: ({ children, ...props }: { children?: ReactNode }) => React.createElement("div", props, children),
+  };
+});
+
+describe("fixed grid item behavior", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    mocks.announce.mockReset();
+    mocks.commitSectionGrid.mockReset();
+    mocks.editMode = true;
+    mocks.maxRowCount = null;
+    getWeatherMock().advancedOptions.title = null;
+    getClockMock().xOffset = 1;
+    getClockMock().yOffset = 0;
+    container = document.createElement("div");
+    document.body.append(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  test("moves with the keyboard and swaps an equal-sized destination", () => {
+    renderWeather(root);
+
+    const entry = getEditorEntry(container);
+    startKeyboardEditing(entry);
+    act(() => entry.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true })));
+
+    expect(mocks.commitSectionGrid).toHaveBeenCalledWith({
+      layoutId: "layout",
+      sectionId: "root",
+      placements: [
+        { id: "weather", type: "item", x: 1, y: 0, w: 1, h: 1 },
+        { id: "clock", type: "item", x: 0, y: 0, w: 1, h: 1 },
+      ],
+    });
+    expect(mocks.announce).toHaveBeenCalledTimes(2);
+  });
+
+  test("uses shift plus an arrow to resize while honoring grid bounds", () => {
+    renderWeather(root);
+
+    const entry = getEditorEntry(container);
+    startKeyboardEditing(entry);
+    act(() =>
+      entry.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "ArrowRight",
+          shiftKey: true,
+          bubbles: true,
+        }),
+      ),
+    );
+
+    expect(mocks.commitSectionGrid).toHaveBeenCalledWith({
+      layoutId: "layout",
+      sectionId: "root",
+      placements: [
+        { id: "weather", type: "item", x: 0, y: 0, w: 2, h: 1 },
+        { id: "clock", type: "item", x: 1, y: 1, w: 1, h: 1 },
+      ],
+    });
+
+    mocks.commitSectionGrid.mockReset();
+    act(() =>
+      entry.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "ArrowLeft",
+          shiftKey: true,
+          bubbles: true,
+        }),
+      ),
+    );
+    expect(mocks.commitSectionGrid).toHaveBeenCalledWith({
+      layoutId: "layout",
+      sectionId: "root",
+      placements: [
+        { id: "weather", type: "item", x: 0, y: 0, w: 1, h: 1 },
+        { id: "clock", type: "item", x: 1, y: 1, w: 1, h: 1 },
+      ],
+    });
+
+    mocks.commitSectionGrid.mockReset();
+    act(() =>
+      entry.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "ArrowLeft",
+          shiftKey: true,
+          bubbles: true,
+        }),
+      ),
+    );
+    expect(mocks.commitSectionGrid).not.toHaveBeenCalled();
+    expect(mocks.announce).toHaveBeenLastCalledWith(
+      "widget.weather.name, column 1, row 1: item.moveResize.keyboard.boundary",
+    );
+  });
+
+  test("applies repeated keyboard resizes before board props rerender", () => {
+    renderWeather(root);
+
+    const entry = getEditorEntry(container);
+    startKeyboardEditing(entry);
+    act(() => {
+      entry.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", shiftKey: true, bubbles: true }));
+      entry.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", shiftKey: true, bubbles: true }));
+    });
+
+    expect(mocks.commitSectionGrid).toHaveBeenCalledTimes(2);
+    expect(mocks.commitSectionGrid).toHaveBeenLastCalledWith({
+      layoutId: "layout",
+      sectionId: "root",
+      placements: [
+        { id: "weather", type: "item", x: 0, y: 0, w: 1, h: 3 },
+        { id: "clock", type: "item", x: 1, y: 0, w: 1, h: 1 },
+      ],
+    });
+  });
+
+  test("stops keyboard editing when the rendered grid state is invalid", () => {
+    getClockMock().xOffset = 0;
+    renderWeather(root);
+
+    const entry = getEditorEntry(container);
+    startKeyboardEditing(entry);
+    act(() => entry.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true })));
+
+    expect(entry.dataset.keyboardEditing).toBe("false");
+    expect(mocks.commitSectionGrid).not.toHaveBeenCalled();
+    expect(mocks.announce).toHaveBeenLastCalledWith(
+      "widget.weather.name, column 1, row 1: item.moveResize.keyboard.stopped",
+    );
+  });
+
+  test("uses the whole tile as the focusable move surface without extra drag chrome", () => {
+    getWeatherMock().advancedOptions.title = "  Balcony forecast  ";
+    renderWeather(root);
+
+    const entry = getEditorEntry(container);
+
+    expect(entry.getAttribute("aria-label")).toBe("Balcony forecast, column 1, row 1");
+    expect(entry.tabIndex).toBe(0);
+    expect(entry.getAttribute("aria-describedby")).not.toBeNull();
+    expect(container.querySelector('[data-testid="board-grid-drag-affordance"]')).toBeNull();
+  });
+
+  test("renders a view-only 1x1 card at the fixed 200px logical size", () => {
+    mocks.editMode = false;
+    renderWeather(root);
+
+    const item = container.querySelector<HTMLElement>('[data-grid-id="weather"]');
+    expect(item).not.toBeNull();
+    expect(item?.style.width).toBe(`${LOGICAL_GRID_CELL_SIZE}px`);
+    expect(item?.style.height).toBe(`${LOGICAL_GRID_CELL_SIZE}px`);
+    expect(item?.getAttribute("role")).toBeNull();
+
+    act(() => item?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true })));
+    expect(mocks.commitSectionGrid).not.toHaveBeenCalled();
+  });
+
+  test("does not move or resize beyond a fixed section row boundary", () => {
+    mocks.maxRowCount = 1;
+    renderWeather(root);
+
+    const entry = getEditorEntry(container);
+    startKeyboardEditing(entry);
+    act(() => entry.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true })));
+    act(() => entry.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", shiftKey: true, bubbles: true })));
+
+    expect(mocks.commitSectionGrid).not.toHaveBeenCalled();
+    expect(mocks.announce).toHaveBeenNthCalledWith(
+      2,
+      "widget.weather.name, column 1, row 1: item.moveResize.keyboard.boundary",
+    );
+    expect(mocks.announce).toHaveBeenNthCalledWith(
+      3,
+      "widget.weather.name, column 1, row 1: item.moveResize.keyboard.boundary",
+    );
+  });
+
+  test("collapsing an expanded box changes display geometry without mutating persisted placement", () => {
+    const persisted = [
+      { id: "box", type: "section" as const, x: 0, y: 0, w: 2, h: 4 },
+      { id: "app", type: "item" as const, x: 0, y: 4, w: 1, h: 1 },
+    ];
+
+    const displayed = getCollapsedDisplayLayout(persisted, {
+      columnCount: 2,
+      collapsedItemIds: new Set(["box"]),
+    });
+
+    expect(displayed).toEqual([
+      { ...persisted[0], h: 0.5 },
+      { ...persisted[1], y: 0.5 },
+    ]);
+    expect(persisted[0]?.h).toBe(4);
+    expect(persisted[1]?.y).toBe(4);
+  });
+});
+
+const renderWeather = (root: Root) => {
+  act(() => {
+    root.render(
+      createElement(
+        FixedGridItem,
+        {
+          item: getWeatherMock() as never,
+        },
+        createElement("span", null, "Weather"),
+      ),
+    );
+  });
+};
+
+const getWeatherMock = () => {
+  const item = mocks.items[0];
+  if (!item) throw new Error("Expected the weather item mock to exist");
+  return item;
+};
+
+const getClockMock = () => {
+  const item = mocks.items[1];
+  if (!item) throw new Error("Expected the clock item mock to exist");
+  return item;
+};
+
+const getEditorEntry = (container: HTMLElement) => {
+  const entry = container.querySelector<HTMLDivElement>("[data-editor-grid-entry]");
+  if (!entry) throw new Error("Expected the fixed grid item to render an editor entry");
+
+  return entry;
+};
+
+const startKeyboardEditing = (entry: HTMLDivElement) => {
+  act(() => entry.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true })));
+};
diff --git a/apps/nextjs/src/components/board/sections/grid/test/grid-depth.spec.ts b/apps/nextjs/src/components/board/sections/grid/test/grid-depth.spec.ts
new file mode 100644
index 000000000..8f15f29b1
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/test/grid-depth.spec.ts
@@ -0,0 +1,26 @@
+import { describe, expect, test } from "vitest";
+
+import { getGridDepth } from "../grid-depth";
+
+describe("grid depth", () => {
+  test("follows the registered parent chain for deeply nested grids", () => {
+    const parents = new Map<string, string | null>([
+      ["root", null],
+      ["first", "root"],
+      ["second", "first"],
+      ["third", "second"],
+    ]);
+
+    expect(getGridDepth("root", parents)).toBe(0);
+    expect(getGridDepth("third", parents)).toBe(3);
+  });
+
+  test("stops safely when malformed parent data contains a cycle", () => {
+    const parents = new Map<string, string | null>([
+      ["first", "second"],
+      ["second", "first"],
+    ]);
+
+    expect(getGridDepth("first", parents)).toBe(1);
+  });
+});
diff --git a/apps/nextjs/src/components/board/sections/grid/test/grid-editor-loader.spec.ts b/apps/nextjs/src/components/board/sections/grid/test/grid-editor-loader.spec.ts
new file mode 100644
index 000000000..c34746dda
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/test/grid-editor-loader.spec.ts
@@ -0,0 +1,106 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+import { scheduleGridEditorWarmup } from "../grid-editor-loader";
+
+describe("grid editor warm-up", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+    document.body.replaceChildren();
+  });
+
+  test("waits for board hydration, a paint, and browser idle time", async () => {
+    let animationFrameCallback: FrameRequestCallback | undefined;
+    let idleCallback: IdleRequestCallback | undefined;
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation((callback) => {
+      animationFrameCallback = callback;
+      return 1;
+    });
+    vi.stubGlobal("requestIdleCallback", (callback: IdleRequestCallback) => {
+      idleCallback = callback;
+      return 2;
+    });
+    vi.stubGlobal("cancelIdleCallback", vi.fn());
+    const loadAsync = vi.fn().mockResolvedValue(undefined);
+
+    const cancel = scheduleGridEditorWarmup(loadAsync);
+    expect(animationFrameCallback).toBeUndefined();
+
+    const canvas = document.createElement("section");
+    canvas.dataset.boardHydrated = "true";
+    document.body.append(canvas);
+    await vi.waitFor(() => expect(animationFrameCallback).toBeDefined());
+    expect(loadAsync).not.toHaveBeenCalled();
+
+    animationFrameCallback?.(0);
+    expect(idleCallback).toBeDefined();
+    expect(loadAsync).not.toHaveBeenCalled();
+
+    idleCallback?.({
+      didTimeout: false,
+      timeRemaining: () => 10,
+    });
+    expect(loadAsync).toHaveBeenCalledOnce();
+    cancel();
+  });
+
+  test("does not load after cancellation", () => {
+    let idleCallback: IdleRequestCallback | undefined;
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation((callback) => {
+      callback(0);
+      return 1;
+    });
+    vi.stubGlobal("requestIdleCallback", (callback: IdleRequestCallback) => {
+      idleCallback = callback;
+      return 2;
+    });
+    vi.stubGlobal("cancelIdleCallback", vi.fn());
+    document.body.innerHTML = '<section data-board-hydrated="true"></section>';
+    const loadAsync = vi.fn().mockResolvedValue(undefined);
+
+    const cancel = scheduleGridEditorWarmup(loadAsync);
+    cancel();
+    idleCallback?.({ didTimeout: false, timeRemaining: () => 10 });
+
+    expect(loadAsync).not.toHaveBeenCalled();
+  });
+
+  test("falls back to a timeout when requestIdleCallback is unavailable", async () => {
+    vi.useFakeTimers();
+    const requestIdleCallbackDescriptor = Object.getOwnPropertyDescriptor(window, "requestIdleCallback");
+    Reflect.deleteProperty(window, "requestIdleCallback");
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation((callback) => {
+      callback(0);
+      return 1;
+    });
+    document.body.innerHTML = '<section data-board-hydrated="true"></section>';
+    const loadAsync = vi.fn().mockResolvedValue(undefined);
+
+    const cancel = scheduleGridEditorWarmup(loadAsync);
+    await vi.advanceTimersByTimeAsync(1_000);
+
+    expect(loadAsync).toHaveBeenCalledOnce();
+    cancel();
+    vi.useRealTimers();
+    if (requestIdleCallbackDescriptor) {
+      Object.defineProperty(window, "requestIdleCallback", requestIdleCallbackDescriptor);
+    }
+  });
+
+  test("waits until the document becomes visible", () => {
+    let visibilityState: DocumentVisibilityState = "hidden";
+    vi.spyOn(document, "visibilityState", "get").mockImplementation(() => visibilityState);
+    const animationFrame = vi.spyOn(window, "requestAnimationFrame").mockReturnValue(1);
+    const loadAsync = vi.fn().mockResolvedValue(undefined);
+    document.body.innerHTML = '<section data-board-hydrated="true"></section>';
+
+    const cancel = scheduleGridEditorWarmup(loadAsync);
+    expect(animationFrame).not.toHaveBeenCalled();
+
+    visibilityState = "visible";
+    document.dispatchEvent(new Event("visibilitychange"));
+    expect(animationFrame).toHaveBeenCalledOnce();
+    cancel();
+  });
+});
diff --git a/apps/nextjs/src/components/board/sections/grid/test/grid-import-boundary.spec.ts b/apps/nextjs/src/components/board/sections/grid/test/grid-import-boundary.spec.ts
new file mode 100644
index 000000000..8491dfc17
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/test/grid-import-boundary.spec.ts
@@ -0,0 +1,89 @@
+import { readdirSync, readFileSync } from "node:fs";
+import { relative, resolve } from "node:path";
+import { describe, expect, test } from "vitest";
+
+const gridDirectory = resolve(import.meta.dirname, "..");
+const nextjsSourceDirectory = resolve(gridDirectory, "../../../../");
+const sectionGridPath = resolve(gridDirectory, "section-grid.tsx");
+const editorLoaderPath = resolve(gridDirectory, "grid-editor-loader.ts");
+
+describe("board grid import boundary", () => {
+  test("keeps every current dnd-kit runtime import inside the edit-only module", () => {
+    const runtimeImports = getSourceFiles(nextjsSourceDirectory)
+      .flatMap(getRuntimeImports)
+      .filter(({ specifier }) => isCurrentDndKitImport(specifier))
+      .map(({ filePath, kind, specifier }) => ({
+        file: toSourceRelativePath(filePath),
+        kind,
+        specifier,
+      }))
+      .toSorted((first, second) =>
+        `${first.file}:${first.specifier}:${first.kind}`.localeCompare(
+          `${second.file}:${second.specifier}:${second.kind}`,
+        ),
+      );
+
+    expect(runtimeImports).toEqual([
+      { file: "components/board/sections/grid/grid-editor.tsx", kind: "static", specifier: "@dnd-kit/abstract" },
+      { file: "components/board/sections/grid/grid-editor.tsx", kind: "static", specifier: "@dnd-kit/collision" },
+      { file: "components/board/sections/grid/grid-editor.tsx", kind: "static", specifier: "@dnd-kit/dom" },
+      { file: "components/board/sections/grid/grid-editor.tsx", kind: "static", specifier: "@dnd-kit/dom/utilities" },
+      { file: "components/board/sections/grid/grid-editor.tsx", kind: "static", specifier: "@dnd-kit/react" },
+    ]);
+  });
+
+  test("loads the editor through next/dynamic only in the edit branch", () => {
+    const source = readFileSync(sectionGridPath, "utf8");
+
+    expect(source).toMatch(/import dynamic from ["']next\/dynamic["']/);
+    expect(source).toMatch(
+      /const GridEditor = dynamic\(loadGridEditorAsync,\s*{[\s\S]*?loading:\s*GridEditorLoading,[\s\S]*?ssr:\s*false,[\s\S]*?}\);/,
+    );
+    expect(source.match(/<GridEditor\b/g)).toHaveLength(1);
+    expect(source).toMatch(/isEditMode\s*&&\s*editorRuntimeStatus\s*===\s*["']ready["']\s*\?\s*\(\s*<GridEditor\b/);
+    expect(getRuntimeImports(sectionGridPath).filter(({ specifier }) => specifier === "./grid-editor")).toEqual([]);
+    expect(
+      getRuntimeImports(editorLoaderPath)
+        .filter(({ specifier }) => specifier === "./grid-editor")
+        .map(({ kind }) => kind),
+    ).toEqual(["dynamic"]);
+  });
+});
+
+const CURRENT_DND_KIT_PACKAGES = ["@dnd-kit/abstract", "@dnd-kit/collision", "@dnd-kit/dom", "@dnd-kit/react"];
+
+const isCurrentDndKitImport = (specifier: string) =>
+  CURRENT_DND_KIT_PACKAGES.some((packageName) => specifier === packageName || specifier.startsWith(`${packageName}/`));
+
+interface RuntimeImport {
+  filePath: string;
+  kind: "dynamic" | "require" | "static";
+  specifier: string;
+}
+
+const getSourceFiles = (directory: string): string[] =>
+  readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const path = resolve(directory, entry.name);
+    if (entry.isDirectory()) return getSourceFiles(path);
+    return /\.[cm]?[jt]sx?$/.test(entry.name) ? [path] : [];
+  });
+
+const getRuntimeImports = (filePath: string): RuntimeImport[] => {
+  const source = readFileSync(filePath, "utf8");
+  const imports: RuntimeImport[] = [];
+  const addMatches = (pattern: RegExp, kind: RuntimeImport["kind"], specifierGroup: number) => {
+    for (const match of source.matchAll(pattern)) {
+      const specifier = match[specifierGroup];
+      if (specifier) imports.push({ filePath, kind, specifier });
+    }
+  };
+
+  addMatches(/(?:^|\n)\s*(?:import|export)\s+(?!type\b)[^;]*?\sfrom\s*["']([^"']+)["']/g, "static", 1);
+  addMatches(/(?:^|\n)\s*import\s*["']([^"']+)["']/g, "static", 1);
+  addMatches(/\bimport\s*\(\s*["']([^"']+)["']\s*\)/g, "dynamic", 1);
+  addMatches(/\brequire\s*\(\s*["']([^"']+)["']\s*\)/g, "require", 1);
+
+  return imports;
+};
+
+const toSourceRelativePath = (filePath: string) => relative(nextjsSourceDirectory, filePath).replaceAll("\\", "/");
diff --git a/apps/nextjs/src/components/board/sections/grid/test/grid-portal-host.spec.ts b/apps/nextjs/src/components/board/sections/grid/test/grid-portal-host.spec.ts
new file mode 100644
index 000000000..d38ea78de
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/test/grid-portal-host.spec.ts
@@ -0,0 +1,104 @@
+import { act, createElement, useLayoutEffect } from "react";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { BoardGridPortalHost, useBoardGridPortalHost } from "../grid-portal-host";
+
+const mocks = vi.hoisted(() => ({
+  board: {
+    items: [{ id: "weather", layouts: [{ layoutId: "desktop", sectionId: "root" }] }],
+    sections: [],
+  },
+}));
+
+vi.mock("@homarr/api/client", () => ({
+  clientApi: {
+    integration: {
+      all: {
+        useQuery: () => ({ data: undefined }),
+      },
+    },
+  },
+}));
+
+vi.mock("@homarr/auth/client", () => ({
+  useSession: () => ({ data: { user: { id: "user" } } }),
+}));
+
+vi.mock("@homarr/boards/context", () => ({
+  useCurrentLayout: () => "desktop",
+  useRequiredBoard: () => mocks.board,
+}));
+
+vi.mock("@homarr/boards/edit-mode", () => ({
+  useEditMode: () => [true],
+}));
+
+describe("board grid portal host", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    mocks.board = {
+      items: [{ id: "weather", layouts: [{ layoutId: "desktop", sectionId: "root" }] }],
+      sections: [],
+    };
+    container = document.createElement("div");
+    document.body.append(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  test("keeps a portal across relocation and prunes it after permanent deletion", () => {
+    const acquired: HTMLElement[] = [];
+
+    renderHost(root, true, 0, acquired);
+    expect(getContainerCount(container)).toBe("1");
+
+    mocks.board = {
+      items: [{ id: "weather", layouts: [{ layoutId: "desktop", sectionId: "other" }] }],
+      sections: [],
+    };
+    renderHost(root, true, 1, acquired);
+    expect(getContainerCount(container)).toBe("1");
+    expect(new Set(acquired).size).toBe(1);
+
+    mocks.board = { items: [], sections: [] };
+    renderHost(root, false, 2, acquired);
+    expect(getContainerCount(container)).toBe("0");
+  });
+});
+
+const renderHost = (root: Root, acquire: boolean, revision: number, acquired: HTMLElement[]) => {
+  act(() => {
+    root.render(
+      createElement(BoardGridPortalHost, null, createElement(PortalRegistryProbe, { acquire, revision, acquired })),
+    );
+  });
+};
+
+const PortalRegistryProbe = ({
+  acquire,
+  revision,
+  acquired,
+}: {
+  acquire: boolean;
+  revision: number;
+  acquired: HTMLElement[];
+}) => {
+  const portalHost = useBoardGridPortalHost();
+
+  useLayoutEffect(() => {
+    if (acquire) acquired.push(portalHost.acquireContainer("weather"));
+  }, [acquire, acquired, portalHost, revision]);
+
+  return createElement("span", { "data-container-count": String(portalHost.containers.size) });
+};
+
+const getContainerCount = (container: HTMLElement) =>
+  container.querySelector<HTMLElement>("[data-container-count]")?.dataset.containerCount;
diff --git a/apps/nextjs/src/components/board/sections/grid/use-grid-layout-actions.ts b/apps/nextjs/src/components/board/sections/grid/use-grid-layout-actions.ts
new file mode 100644
index 000000000..2dd20fd71
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/grid/use-grid-layout-actions.ts
@@ -0,0 +1,112 @@
+"use client";
+
+import { useCallback } from "react";
+
+import { useUpdateBoard } from "@homarr/boards/updater";
+
+import type { GridPlacement } from "~/components/board/layout";
+
+export interface SectionGridPlacement extends GridPlacement {
+  type: "item" | "section";
+  minW?: number;
+  minH?: number;
+}
+
+export interface CommitSectionGridInput {
+  layoutId: string;
+  sectionId: string;
+  placements: readonly SectionGridPlacement[];
+}
+
+/**
+ * Commits complete section snapshots in one cache update. One drag or resize
+ * can move several neighbours and can cross section boundaries, so the whole
+ * transaction must remain atomic.
+ */
+export const useGridLayoutActions = () => {
+  const { updateBoard } = useUpdateBoard();
+
+  const commitSectionGrids = useCallback(
+    (snapshots: readonly CommitSectionGridInput[]) => {
+      const byId = new Map(
+        snapshots.flatMap(({ layoutId, sectionId, placements }) =>
+          placements.map((placement) => [`${layoutId}:${placement.id}`, { layoutId, sectionId, placement }] as const),
+        ),
+      );
+      updateBoard((previous) => {
+        let hasChanges = false;
+        const items = previous.items.map((item) => {
+          const layouts = item.layouts.map((layout) => {
+            const resolved = byId.get(`${layout.layoutId}:${item.id}`);
+            if (!resolved || resolved.placement.type !== "item") return layout;
+            const { placement, sectionId } = resolved;
+            if (
+              layout.sectionId === sectionId &&
+              layout.xOffset === placement.x &&
+              layout.yOffset === placement.y &&
+              layout.width === placement.w &&
+              layout.height === placement.h
+            ) {
+              return layout;
+            }
+
+            return {
+              ...layout,
+              sectionId,
+              xOffset: placement.x,
+              yOffset: placement.y,
+              width: placement.w,
+              height: placement.h,
+            };
+          });
+
+          if (!layouts.some((layout, index) => layout !== item.layouts[index])) return item;
+          hasChanges = true;
+          return { ...item, layouts };
+        });
+        const sections = previous.sections.map((innerSection) => {
+          if (innerSection.kind !== "container") return innerSection;
+          const layouts = innerSection.layouts.map((layout) => {
+            const resolved = byId.get(`${layout.layoutId}:${innerSection.id}`);
+            if (!resolved || resolved.placement.type !== "section") return layout;
+            const { placement, sectionId } = resolved;
+            if (
+              layout.parentSectionId === sectionId &&
+              layout.xOffset === placement.x &&
+              layout.yOffset === placement.y &&
+              layout.width === placement.w &&
+              layout.height === placement.h
+            ) {
+              return layout;
+            }
+
+            return {
+              ...layout,
+              parentSectionId: sectionId,
+              xOffset: placement.x,
+              yOffset: placement.y,
+              width: placement.w,
+              height: placement.h,
+            };
+          });
+
+          if (!layouts.some((layout, index) => layout !== innerSection.layouts[index])) return innerSection;
+          hasChanges = true;
+          return { ...innerSection, layouts };
+        });
+
+        return hasChanges ? { ...previous, items, sections } : previous;
+      });
+    },
+    [updateBoard],
+  );
+
+  const commitSectionGrid = useCallback(
+    (snapshot: CommitSectionGridInput) => {
+      commitSectionGrids([snapshot]);
+    },
+    [commitSectionGrids],
+  );
+
+  return { commitSectionGrid, commitSectionGrids };
+};
diff --git a/apps/nextjs/src/components/board/sections/gridstack/gridstack-item.tsx b/apps/nextjs/src/components/board/sections/gridstack/gridstack-item.tsx
deleted file mode 100644
index 647ae081b..000000000
--- a/apps/nextjs/src/components/board/sections/gridstack/gridstack-item.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useEffect } from "react";
-import type { PropsWithChildren } from "react";
-import type { BoxProps } from "@mantine/core";
-import { Box } from "@mantine/core";
-import combineClasses from "clsx";
-
-import type { SectionKind, WidgetKind } from "@homarr/definitions";
-import type { GridItemHTMLElement } from "@homarr/gridstack";
-
-interface Props extends BoxProps {
-  id: string;
-  type: "item" | "section";
-  kind: WidgetKind | SectionKind;
-  xOffset: number;
-  yOffset: number;
-  width: number;
-  height: number;
-  minWidth?: number;
-  minHeight?: number;
-  innerRef: React.RefObject<GridItemHTMLElement | null> | undefined;
-}
-
-export const GridStackItem = ({
-  id,
-  type,
-  kind,
-  xOffset,
-  yOffset,
-  width,
-  height,
-  minWidth = 1,
-  minHeight = 1,
-  innerRef,
-  children,
-  ...boxProps
-}: PropsWithChildren<Props>) => {
-  useEffect(() => {
-    if (!innerRef?.current?.gridstackNode) return;
-    if (type !== "section") return;
-    innerRef.current.gridstackNode.minW = minWidth;
-    innerRef.current.gridstackNode.minH = minHeight;
-  }, [minWidth, minHeight, innerRef, type]);
-
-  return (
-    <Box
-      {...boxProps}
-      className={combineClasses("grid-stack-item", boxProps.className)}
-      data-id={id}
-      data-type={type}
-      data-kind={kind}
-      gs-x={xOffset}
-      gs-y={yOffset}
-      gs-w={width}
-      gs-h={height}
-      gs-min-w={minWidth}
-      gs-min-h={minHeight}
-      ref={innerRef as React.RefObject<HTMLDivElement>}
-    >
-      {children}
-    </Box>
-  );
-};
diff --git a/apps/nextjs/src/components/board/sections/gridstack/gridstack.tsx b/apps/nextjs/src/components/board/sections/gridstack/gridstack.tsx
deleted file mode 100644
index e851e5c2a..000000000
--- a/apps/nextjs/src/components/board/sections/gridstack/gridstack.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-
-import type { BoxProps } from "@mantine/core";
-import { Box } from "@mantine/core";
-import combineClasses from "clsx";
-
-import type { DynamicSectionItem, Section } from "~/app/[locale]/boards/_types";
-import { SectionContent } from "../content";
-import { SectionProvider } from "../section-context";
-import { useSectionItems } from "../use-section-items";
-import { useGridstack } from "./use-gridstack";
-
-interface Props extends BoxProps {
-  section: Exclude<Section, { kind: "dynamic" }> | DynamicSectionItem;
-}
-
-export const GridStack = ({ section, ...props }: Props) => {
-  const { items, innerSections } = useSectionItems(section.id);
-  const itemIds = [...items, ...innerSections].map((item) => item.id);
-
-  const { refs } = useGridstack(section, itemIds);
-
-  return (
-    <SectionProvider value={{ section, items, innerSections, refs }}>
-      <Box
-        {...props}
-        data-kind={section.kind}
-        data-section-id={section.id}
-        className={combineClasses(`grid-stack grid-stack-${section.kind}`, props.className)}
-        ref={refs.wrapper}
-      >
-        <SectionContent />
-      </Box>
-    </SectionProvider>
-  );
-};
diff --git a/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts b/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts
deleted file mode 100644
index 362e0bfb5..000000000
--- a/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { RefObject } from "react";
-
-import type { GridItemHTMLElement } from "@homarr/gridstack";
-import { GridStack } from "@homarr/gridstack";
-
-import type { Section } from "~/app/[locale]/boards/_types";
-
-interface InitializeGridstackProps {
-  section: Omit<Section, "items">;
-  itemIds: string[];
-  refs: {
-    wrapper: RefObject<HTMLDivElement | null>;
-    items: RefObject<Record<string, RefObject<GridItemHTMLElement | null>>>;
-    gridstack: RefObject<GridStack | null>;
-  };
-  sectionColumnCount: number;
-}
-
-export const initializeGridstack = ({ section, itemIds, refs, sectionColumnCount }: InitializeGridstackProps) => {
-  if (!refs.wrapper.current) return false;
-  // initialize gridstack
-  const newGrid = refs.gridstack;
-  newGrid.current = GridStack.init(
-    {
-      column: sectionColumnCount,
-      margin: 10,
-      cellHeight: 128,
-      float: true,
-      alwaysShowResizeHandle: true,
-      acceptWidgets: true,
-      staticGrid: true,
-      minRow: section.kind === "dynamic" && "height" in section ? (section.height as number) : 1,
-      maxRow: section.kind === "dynamic" && "height" in section ? (section.height as number) : 0,
-      animate: false,
-      styleInHead: true,
-      disableRemoveNodeOnDrop: true,
-    },
-    // selector of the gridstack item (it's eather category or wrapper)
-    `.grid-stack-${section.kind}[data-section-id='${section.id}']`,
-  );
-  const grid = newGrid.current;
-
-  // Must be used to update the column count after the initialization
-  grid.column(sectionColumnCount, "none");
-
-  grid.batchUpdate();
-  grid.removeAll(false);
-  itemIds.forEach((id) => {
-    const ref = refs.items.current[id]?.current;
-    if (!ref) return;
-
-    grid.makeWidget(ref);
-  });
-  grid.batchUpdate(false);
-  return true;
-};
diff --git a/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts b/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
deleted file mode 100644
index b5e468de6..000000000
--- a/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
+++ /dev/null
@@ -1,372 +0,0 @@
-import type { Ref, RefObject } from "react";
-import { createRef, useCallback, useEffect, useRef } from "react";
-import { useElementSize, useMergedRef } from "@mantine/hooks";
-
-import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
-import { useEditMode } from "@homarr/boards/edit-mode";
-import type { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode } from "@homarr/gridstack";
-
-import type { Section } from "~/app/[locale]/boards/_types";
-import { useMarkSectionAsReady } from "~/app/[locale]/boards/(content)/_ready-context";
-import { useItemActions } from "../../items/item-actions";
-import { useSectionActions } from "../section-actions";
-import { initializeGridstack } from "./init-gridstack";
-
-export interface UseGridstackRefs {
-  wrapper: Ref<HTMLDivElement | null>;
-  items: RefObject<Record<string, RefObject<GridItemHTMLElement | null>>>;
-  gridstack: RefObject<GridStack | null>;
-}
-
-interface UseGristackReturnType {
-  refs: UseGridstackRefs;
-}
-
-/**
- * When the size of a gridstack changes we need to update the css variables
- * so the gridstack items are displayed correctly
- * @param wrapper gridstack wrapper
- * @param gridstack gridstack object
- * @param width width of the section (column count)
- * @param height height of the section (row count)
- * @param isDynamic if the section is dynamic
- */
-const handleResizeChange = (
-  wrapper: HTMLDivElement,
-  gridstack: GridStack,
-  width: number,
-  height: number,
-  isDynamic: boolean,
-) => {
-  wrapper.style.setProperty("--gridstack-column-count", width.toString());
-  wrapper.style.setProperty("--gridstack-row-count", height.toString());
-
-  let cellHeight = wrapper.clientWidth / width;
-  if (isDynamic) {
-    cellHeight = wrapper.clientHeight / height;
-  }
-
-  if (!isDynamic) {
-    document.body.style.setProperty("--gridstack-cell-size", cellHeight.toString());
-  }
-
-  gridstack.cellHeight(cellHeight);
-};
-
-export const useGridstack = (section: Omit<Section, "items">, itemIds: string[]): UseGristackReturnType => {
-  const [isEditMode] = useEditMode();
-  const markAsReady = useMarkSectionAsReady();
-  const { moveAndResizeItem, moveItemToSection } = useItemActions();
-  const { moveAndResizeInnerSection, moveInnerSectionToSection } = useSectionActions();
-
-  const wrapperElementRef = useRef<HTMLDivElement | null>(null);
-  const { ref: measureWrapperRef, width, height } = useElementSize<HTMLDivElement>();
-  const wrapperRef = useMergedRef(measureWrapperRef, wrapperElementRef);
-  // references to the diffrent items contained in the gridstack
-  const itemRefs = useRef<Record<string, RefObject<GridItemHTMLElement | null>>>({});
-  // reference of the gridstack object for modifications after initialization
-  const gridRef = useRef<GridStack>(null);
-
-  const board = useRequiredBoard();
-
-  const currentLayoutId = useCurrentLayout();
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const currentLayout = board.layouts.find((layout) => layout.id === currentLayoutId)!;
-  const columnCount =
-    section.kind === "dynamic" && "width" in section && typeof section.width === "number"
-      ? section.width
-      : currentLayout.columnCount;
-
-  const itemRefKeys = Object.keys(itemRefs.current);
-  // define items in itemRefs for easy access and reference to items
-  if (itemRefKeys.length !== itemIds.length) {
-    // Remove items that are not in the itemIds
-    // Otherwise when an item is removed and then another item is added, this foreach below will not run.
-    itemRefKeys.forEach((id) => {
-      if (!itemIds.includes(id)) {
-        delete itemRefs.current[id];
-      }
-    });
-    itemIds.forEach((id) => {
-      itemRefs.current[id] = itemRefs.current[id] ?? createRef();
-    });
-  }
-
-  const onChange = useCallback(
-    (changedNode: GridStackNode) => {
-      const id = changedNode.el?.getAttribute("data-id");
-      const type = changedNode.el?.getAttribute("data-type");
-
-      if (!id || !type) return;
-
-      if (type === "item") {
-        // Updates the react-query state
-        moveAndResizeItem({
-          itemId: id,
-          // We want the following properties to be null by default
-          // so the next free position is used from the gridstack
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          xOffset: changedNode.x!,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          yOffset: changedNode.y!,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          width: changedNode.w!,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          height: changedNode.h!,
-        });
-        return;
-      }
-
-      if (type === "section") {
-        moveAndResizeInnerSection({
-          innerSectionId: id,
-          // We want the following properties to be null by default
-          // so the next free position is used from the gridstack
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          xOffset: changedNode.x!,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          yOffset: changedNode.y!,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          width: changedNode.w!,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          height: changedNode.h!,
-        });
-        return;
-      }
-
-      console.error(`Unknown grid-stack-item type to move. type='${type}' id='${id}'`);
-    },
-    [moveAndResizeItem, moveAndResizeInnerSection],
-  );
-  const onAdd = useCallback(
-    (addedNode: GridStackNode) => {
-      const id = addedNode.el?.getAttribute("data-id");
-      const type = addedNode.el?.getAttribute("data-type");
-
-      if (!id || !type) return;
-
-      if (type === "item") {
-        // Updates the react-query state
-        moveItemToSection({
-          itemId: id,
-          sectionId: section.id,
-          // We want the following properties to be null by default
-          // so the next free position is used from the gridstack
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          xOffset: addedNode.x!,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          yOffset: addedNode.y!,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          width: addedNode.w!,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          height: addedNode.h!,
-        });
-        return;
-      }
-
-      if (type === "section") {
-        moveInnerSectionToSection({
-          innerSectionId: id,
-          sectionId: section.id,
-          // We want the following properties to be null by default
-          // so the next free position is used from the gridstack
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          xOffset: addedNode.x!,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          yOffset: addedNode.y!,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          width: addedNode.w!,
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          height: addedNode.h!,
-        });
-        return;
-      }
-
-      console.error(`Unknown grid-stack-item type to add. type='${type}' id='${id}'`);
-    },
-    [moveItemToSection, moveInnerSectionToSection, section.id],
-  );
-
-  // initialize the gridstack
-  useEffect(() => {
-    const isReady = initializeGridstack({
-      section,
-      itemIds,
-      refs: {
-        items: itemRefs,
-        wrapper: wrapperElementRef,
-        gridstack: gridRef,
-      },
-      sectionColumnCount: columnCount,
-    });
-
-    // If the section is ready mark it as ready
-    // When all sections are ready the board is ready and will get visible
-    if (isReady) {
-      markAsReady(section.id);
-    }
-
-    // Only run this effect when the section items change
-  }, [itemIds.length, columnCount]);
-
-  /**
-   * IMPORTANT: This effect has to be placed after the effect to initialize the gridstack
-   * because we need the gridstack object to add the listeners
-   */
-  useEffect(() => {
-    if (!isEditMode) return;
-    const currentGrid = gridRef.current;
-    // Add listener for moving items around in a wrapper
-    currentGrid?.on("change", (_, nodes) => {
-      nodes.forEach(onChange);
-
-      // For all dynamic section items that changed we want to update the inner gridstack
-      nodes
-        .filter((node) => node.el?.getAttribute("data-type") === "section")
-        .forEach((node) => {
-          const dynamicInnerGrid = node.el?.querySelector<GridHTMLElement>('.grid-stack[data-kind="dynamic"]');
-
-          if (!dynamicInnerGrid?.gridstack) return;
-
-          handleResizeChange(
-            dynamicInnerGrid as HTMLDivElement,
-            dynamicInnerGrid.gridstack,
-            node.w ?? 1,
-            node.h ?? 1,
-            true,
-          );
-        });
-    });
-
-    // Add listener for moving items in config from one wrapper to another
-    currentGrid?.on("added", (_, nodes) => {
-      nodes.forEach(onAdd);
-    });
-
-    return () => {
-      currentGrid?.off("change");
-      currentGrid?.off("added");
-    };
-  }, [isEditMode, onAdd, onChange]);
-
-  /**
-   * IMPORTANT: This effect has to be placed after the effect to initialize the gridstack
-   * because we need the gridstack object to add the listeners
-   * Toggle the gridstack to be static or not based on the edit mode
-   */
-  useEffect(() => {
-    gridRef.current?.setStatic(!isEditMode);
-  }, [isEditMode]);
-
-  const sectionHeight = section.kind === "dynamic" && "height" in section ? (section.height as number) : null;
-
-  /**
-   * IMPORTANT: This effect has to be placed after the effect to initialize the gridstack
-   * because we need the gridstack object to add the listeners
-   * We want the amount of rows in a dynamic section to be the height of the section in the outer gridstack
-   */
-  useEffect(() => {
-    if (!sectionHeight) return;
-    gridRef.current?.row(sectionHeight);
-  }, [sectionHeight]);
-
-  /**
-   * IMPORTANT: This effect has to be placed after the effect to initialize the gridstack
-   * because we need the gridstack object to add the listeners
-   */
-  useCssVariableConfiguration({
-    columnCount,
-    gridRef,
-    wrapperRef: wrapperElementRef,
-    width,
-    height,
-    isDynamic: section.kind === "dynamic",
-  });
-
-  return {
-    refs: {
-      items: itemRefs,
-      wrapper: wrapperRef,
-      gridstack: gridRef,
-    },
-  };
-};
-
-interface UseCssVariableConfiguration {
-  gridRef: UseGridstackRefs["gridstack"];
-  wrapperRef: RefObject<HTMLDivElement | null>;
-  width: number;
-  height: number;
-  columnCount: number;
-  isDynamic: boolean;
-}
-
-/**
- * This hook is used to configure the css variables for the gridstack
- * Those css variables are used to define the size of the gridstack items
- * @see gridstack.scss
- * @param gridRef reference to the gridstack object
- * @param wrapperRef reference to the wrapper of the gridstack
- * @param width width of the section
- * @param height height of the section
- * @param columnCount column count of the gridstack
- */
-const useCssVariableConfiguration = ({
-  gridRef,
-  wrapperRef,
-  width,
-  height,
-  columnCount,
-  isDynamic,
-}: UseCssVariableConfiguration) => {
-  const onResize = useCallback(() => {
-    if (!wrapperRef.current) return;
-    if (!gridRef.current) return;
-    handleResizeChange(
-      wrapperRef.current,
-      gridRef.current,
-      gridRef.current.getColumn(),
-      gridRef.current.getRow(),
-      isDynamic,
-    );
-  }, [wrapperRef, gridRef, isDynamic]);
-
-  useCallback(() => {
-    if (!wrapperRef.current) return;
-    if (!gridRef.current) return;
-
-    wrapperRef.current.style.setProperty("--gridstack-column-count", gridRef.current.getColumn().toString());
-    wrapperRef.current.style.setProperty("--gridstack-row-count", gridRef.current.getRow().toString());
-
-    let cellHeight = wrapperRef.current.clientWidth / gridRef.current.getColumn();
-    if (isDynamic) {
-      cellHeight = wrapperRef.current.clientHeight / gridRef.current.getRow();
-    }
-
-    gridRef.current.cellHeight(cellHeight);
-  }, [wrapperRef, gridRef, isDynamic]);
-
-  // Define widget-width by calculating the width of one column with mainRef width and column count
-  useEffect(() => {
-    onResize();
-    if (typeof window === "undefined") return;
-    window.addEventListener("resize", onResize);
-    const wrapper = wrapperRef.current;
-    wrapper?.addEventListener("resize", onResize);
-    return () => {
-      if (typeof window === "undefined") return;
-      window.removeEventListener("resize", onResize);
-      wrapper?.removeEventListener("resize", onResize);
-    };
-  }, [wrapperRef, gridRef, onResize]);
-
-  // Handle resize of inner sections when there size changes
-  useEffect(() => {
-    onResize();
-  }, [width, height, onResize]);
-
-  // Define column count by using the sectionColumnCount
-  useEffect(() => {
-    wrapperRef.current?.style.setProperty("--gridstack-column-count", columnCount.toString());
-  }, [columnCount, wrapperRef]);
-};
diff --git a/apps/nextjs/src/components/board/sections/item.module.css b/apps/nextjs/src/components/board/sections/item.module.css
index a7168659e..319eb7b07 100644
--- a/apps/nextjs/src/components/board/sections/item.module.css
+++ b/apps/nextjs/src/components/board/sections/item.module.css
@@ -15,3 +15,53 @@
   background-color: transparent !important;
   border-color: transparent !important;
 }
+
+.collapsedContainerCard {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.containerToggle {
+  z-index: 9;
+  overflow: hidden;
+  color: var(--mantine-color-text);
+  background-color: var(--background-color);
+  border-color: var(--border-color);
+}
+
+.containerToggle :global(.mantine-Button-inner) {
+  width: 100%;
+  min-width: 0;
+}
+
+.containerToggle :global(.mantine-Button-label) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.containerBody {
+  visibility: visible;
+  opacity: 1;
+  transition:
+    opacity 140ms ease 80ms,
+    visibility 0s;
+}
+
+.containerBody[data-collapsed="true"] {
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0;
+  transition:
+    opacity 120ms ease,
+    visibility 0s linear 120ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .containerBody,
+  .containerBody[data-collapsed="true"] {
+    transition: none;
+  }
+}
diff --git a/apps/nextjs/src/components/board/sections/section-actions.spec.ts b/apps/nextjs/src/components/board/sections/section-actions.spec.ts
new file mode 100644
index 000000000..441e71ef7
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/section-actions.spec.ts
@@ -0,0 +1,42 @@
+import { describe, expect, test } from "vitest";
+
+import { BoardMockBuilder } from "~/components/board/items/actions/test/mocks/board-mock";
+import { ContainerSectionMockBuilder } from "~/components/board/items/actions/test/mocks/container-section-mock";
+import { EmptySectionMockBuilder } from "~/components/board/items/actions/test/mocks/empty-section-mock";
+import { wouldCreateSectionCycle } from "./section-actions";
+
+describe("wouldCreateSectionCycle", () => {
+  test("rejects moving a container into itself or one of its descendants", () => {
+    const layoutId = "layout";
+    const rootSection = new EmptySectionMockBuilder({ id: "root" }).build();
+    const parentSection = new ContainerSectionMockBuilder({ id: "parent" })
+      .addLayout({ layoutId, parentSectionId: rootSection.id })
+      .build();
+    const childSection = new ContainerSectionMockBuilder({ id: "child" })
+      .addLayout({ layoutId, parentSectionId: parentSection.id })
+      .build();
+    const board = new BoardMockBuilder().addSections([rootSection, parentSection, childSection]).build();
+
+    expect(
+      wouldCreateSectionCycle(board, {
+        innerSectionId: parentSection.id,
+        sectionId: parentSection.id,
+        layoutId,
+      }),
+    ).toBe(true);
+    expect(
+      wouldCreateSectionCycle(board, {
+        innerSectionId: parentSection.id,
+        sectionId: childSection.id,
+        layoutId,
+      }),
+    ).toBe(true);
+    expect(
+      wouldCreateSectionCycle(board, {
+        innerSectionId: childSection.id,
+        sectionId: rootSection.id,
+        layoutId,
+      }),
+    ).toBe(false);
+  });
+});
diff --git a/apps/nextjs/src/components/board/sections/section-actions.tsx b/apps/nextjs/src/components/board/sections/section-actions.tsx
index f61f51552..47813fc16 100644
--- a/apps/nextjs/src/components/board/sections/section-actions.tsx
+++ b/apps/nextjs/src/components/board/sections/section-actions.tsx
@@ -1,8 +1,10 @@
 import { useCallback } from "react";
 
-import { getCurrentLayout } from "@homarr/boards/context";
+import { useCurrentLayout } from "@homarr/boards/context";
 import { useUpdateBoard } from "@homarr/boards/updater";
 
+import type { Board } from "~/app/[locale]/boards/_types";
+
 interface MoveAndResizeInnerSection {
   innerSectionId: string;
   xOffset: number;
@@ -21,6 +23,7 @@ interface MoveInnerSectionToSection {
 
 export const useSectionActions = () => {
   const { updateBoard } = useUpdateBoard();
+  const currentLayoutId = useCurrentLayout();
 
   const moveAndResizeInnerSection = useCallback(
     ({ innerSectionId, ...positionProps }: MoveAndResizeInnerSection) => {
@@ -29,14 +32,12 @@ export const useSectionActions = () => {
         sections: previous.sections.map((section) => {
           // Return same section if section is not the one we're moving
           if (section.id !== innerSectionId) return section;
-          if (section.kind !== "dynamic") return section;
-
-          const currentLayout = getCurrentLayout(previous);
+          if (section.kind !== "container") return section;
 
           return {
             ...section,
             layouts: section.layouts.map((layout) => {
-              if (layout.layoutId !== currentLayout) return layout;
+              if (layout.layoutId !== currentLayoutId) return layout;
               return {
                 ...layout,
                 ...positionProps,
@@ -46,25 +47,27 @@ export const useSectionActions = () => {
         }),
       }));
     },
-    [updateBoard],
+    [currentLayoutId, updateBoard],
   );
 
   const moveInnerSectionToSection = useCallback(
     ({ innerSectionId, sectionId, ...positionProps }: MoveInnerSectionToSection) => {
       updateBoard((previous) => {
+        if (wouldCreateSectionCycle(previous, { innerSectionId, sectionId, layoutId: currentLayoutId })) {
+          return previous;
+        }
+
         return {
           ...previous,
           sections: previous.sections.map((section) => {
             // Return section without changes when not the section we're moving
             if (section.id !== innerSectionId) return section;
-            if (section.kind !== "dynamic") return section;
-
-            const currentLayout = getCurrentLayout(previous);
+            if (section.kind !== "container") return section;
 
             return {
               ...section,
               layouts: section.layouts.map((layout) => {
-                if (layout.layoutId !== currentLayout) return layout;
+                if (layout.layoutId !== currentLayoutId) return layout;
                 return {
                   ...layout,
                   ...positionProps,
@@ -76,7 +79,7 @@ export const useSectionActions = () => {
         };
       });
     },
-    [updateBoard],
+    [currentLayoutId, updateBoard],
   );
 
   return {
@@ -84,3 +87,24 @@ export const useSectionActions = () => {
     moveInnerSectionToSection,
   };
 };
+
+export const wouldCreateSectionCycle = (
+  board: Board,
+  { innerSectionId, sectionId, layoutId }: { innerSectionId: string; sectionId: string; layoutId: string },
+) => {
+  const visitedSectionIds = new Set<string>();
+  let currentSectionId: string | null = sectionId;
+
+  while (currentSectionId) {
+    if (currentSectionId === innerSectionId) return true;
+    if (visitedSectionIds.has(currentSectionId)) return true;
+    visitedSectionIds.add(currentSectionId);
+
+    const currentSection = board.sections.find((section) => section.id === currentSectionId);
+    if (currentSection?.kind !== "container") return false;
+
+    currentSectionId = currentSection.layouts.find((layout) => layout.layoutId === layoutId)?.parentSectionId ?? null;
+  }
+
+  return false;
+};
diff --git a/apps/nextjs/src/components/board/sections/section-collapse-storage.ts b/apps/nextjs/src/components/board/sections/section-collapse-storage.ts
new file mode 100644
index 000000000..58afc2ea8
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/section-collapse-storage.ts
@@ -0,0 +1,46 @@
+interface SectionCollapseStorage {
+  getItem: (key: string) => string | null;
+  setItem: (key: string, value: string) => void;
+  removeItem: (key: string) => void;
+}
+
+const legacyStorageKey = (sectionId: string) => `homarr-section-collapsed-${sectionId}`;
+
+export const sectionCollapseStorageKey = (sectionId: string) => `homarr-section-collapsed-v2-${sectionId}`;
+
+/**
+ * Legacy values represented whether the section was open even though the key
+ * and database column called the value "collapsed". Migrate once into a
+ * versioned key whose boolean has the corrected meaning.
+ */
+export const readSectionCollapsedFromStorage = (
+  storage: SectionCollapseStorage,
+  sectionId: string,
+  fallback: boolean,
+) => {
+  const currentKey = sectionCollapseStorageKey(sectionId);
+  const legacyKey = legacyStorageKey(sectionId);
+  const current = storage.getItem(currentKey);
+
+  if (current !== null) {
+    storage.removeItem(legacyKey);
+    return current === "true";
+  }
+
+  const legacy = storage.getItem(legacyKey);
+  if (legacy === null) return fallback;
+
+  const collapsed = legacy !== "true";
+  storage.setItem(currentKey, String(collapsed));
+  storage.removeItem(legacyKey);
+  return collapsed;
+};
+
+export const writeSectionCollapsedToStorage = (
+  storage: SectionCollapseStorage,
+  sectionId: string,
+  collapsed: boolean,
+) => {
+  storage.setItem(sectionCollapseStorageKey(sectionId), String(collapsed));
+  storage.removeItem(legacyStorageKey(sectionId));
+};
diff --git a/apps/nextjs/src/components/board/sections/section-collapse.tsx b/apps/nextjs/src/components/board/sections/section-collapse.tsx
new file mode 100644
index 000000000..5911ada44
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/section-collapse.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+
+import { clientApi } from "@homarr/api/client";
+import { useSession } from "@homarr/auth/client";
+import { useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
+
+import { readSectionCollapsedFromStorage, writeSectionCollapsedToStorage } from "./section-collapse-storage";
+
+interface SectionCollapseContextValue {
+  collapsedSectionIds: ReadonlySet<string>;
+  setCollapsed: (sectionId: string, collapsed: boolean) => void;
+}
+
+const SectionCollapseContext = createContext<SectionCollapseContextValue | null>(null);
+
+export const BoardSectionCollapseProvider = ({ children }: PropsWithChildren) => {
+  const board = useRequiredBoard();
+  const { status } = useSession();
+  const { mutate } = clientApi.section.changeCollapsed.useMutation();
+  const [collapsedById, setCollapsedById] = useState<Record<string, boolean>>(() =>
+    Object.fromEntries(
+      board.sections.filter((section) => section.kind !== "empty").map((section) => [section.id, section.collapsed]),
+    ),
+  );
+  const collapsedByIdRef = useRef(collapsedById);
+  collapsedByIdRef.current = collapsedById;
+
+  useEffect(() => {
+    setCollapsedById((previous) => {
+      const next = { ...previous };
+      for (const section of board.sections) {
+        if (section.kind === "empty" || section.id in next) continue;
+        next[section.id] = section.collapsed;
+      }
+      return next;
+    });
+  }, [board.sections]);
+
+  useEffect(() => {
+    if (status !== "unauthenticated") return;
+
+    setCollapsedById((previous) => {
+      const next = { ...previous };
+      for (const sectionId of Object.keys(next)) {
+        next[sectionId] = readSectionCollapsedFromStorage(window.localStorage, sectionId, next[sectionId] ?? false);
+      }
+      return next;
+    });
+  }, [status]);
+
+  const setCollapsed = useCallback(
+    (sectionId: string, collapsed: boolean) => {
+      const previousCollapsed = collapsedByIdRef.current[sectionId] ?? false;
+      collapsedByIdRef.current = { ...collapsedByIdRef.current, [sectionId]: collapsed };
+      setCollapsedById((previous) => ({ ...previous, [sectionId]: collapsed }));
+
+      if (status === "authenticated") {
+        mutate(
+          { sectionId, collapsed },
+          {
+            onError: () => {
+              if (collapsedByIdRef.current[sectionId] !== collapsed) return;
+              collapsedByIdRef.current = { ...collapsedByIdRef.current, [sectionId]: previousCollapsed };
+              setCollapsedById((previous) => ({ ...previous, [sectionId]: previousCollapsed }));
+            },
+          },
+        );
+      } else if (status === "unauthenticated") {
+        writeSectionCollapsedToStorage(window.localStorage, sectionId, collapsed);
+      }
+    },
+    [mutate, status],
+  );
+
+  const value = useMemo<SectionCollapseContextValue>(
+    () => ({
+      collapsedSectionIds: new Set(
+        Object.entries(collapsedById)
+          .filter(([, collapsed]) => collapsed)
+          .map(([sectionId]) => sectionId),
+      ),
+      setCollapsed,
+    }),
+    [collapsedById, setCollapsed],
+  );
+
+  return <SectionCollapseContext.Provider value={value}>{children}</SectionCollapseContext.Provider>;
+};
+
+export const useSectionCollapse = ({ sectionId, collapsible }: { sectionId: string; collapsible: boolean }) => {
+  const context = useContext(SectionCollapseContext);
+  const [isEditMode] = useEditMode();
+
+  if (!context) {
+    throw new Error("BoardSectionCollapseProvider is required");
+  }
+
+  const isCollapsed = collapsible && context.collapsedSectionIds.has(sectionId);
+  return {
+    isCollapsed,
+    isVisuallyCollapsed: isCollapsed && !isEditMode,
+    setCollapsed: (collapsed: boolean) => context.setCollapsed(sectionId, collapsed),
+    toggle: () => context.setCollapsed(sectionId, !isCollapsed),
+  };
+};
+
+export const useCollapsedSectionIds = () => {
+  const context = useContext(SectionCollapseContext);
+  const [isEditMode] = useEditMode();
+
+  if (!context) {
+    throw new Error("BoardSectionCollapseProvider is required");
+  }
+
+  return isEditMode ? EMPTY_SET : context.collapsedSectionIds;
+};
+
+const EMPTY_SET = new Set<string>();
diff --git a/apps/nextjs/src/components/board/sections/section-context.ts b/apps/nextjs/src/components/board/sections/section-context.ts
index c01d05d7c..a06fde51e 100644
--- a/apps/nextjs/src/components/board/sections/section-context.ts
+++ b/apps/nextjs/src/components/board/sections/section-context.ts
@@ -1,13 +1,17 @@
 import { createContext, useContext } from "react";
 
-import type { DynamicSectionItem, Section, SectionItem } from "~/app/[locale]/boards/_types";
-import type { UseGridstackRefs } from "./gridstack/use-gridstack";
+import type { RouterOutputs } from "@homarr/api";
+
+import type { ContainerSectionItem, Section, SectionItem } from "~/app/[locale]/boards/_types";
 
 interface SectionContextProps {
-  section: Exclude<Section, { kind: "dynamic" }> | DynamicSectionItem;
-  innerSections: DynamicSectionItem[];
+  section: Exclude<Section, { kind: "container" }> | ContainerSectionItem;
+  innerSections: ContainerSectionItem[];
   items: SectionItem[];
-  refs: UseGridstackRefs;
+  integrations: RouterOutputs["integration"]["all"] | undefined;
+  columnCount: number;
+  maxRowCount: number | null;
+  announce: (message: string) => void;
 }
 
 const SectionContext = createContext<SectionContextProps | null>(null);
diff --git a/apps/nextjs/src/components/board/sections/test/section-collapse-storage.spec.ts b/apps/nextjs/src/components/board/sections/test/section-collapse-storage.spec.ts
new file mode 100644
index 000000000..924829319
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/test/section-collapse-storage.spec.ts
@@ -0,0 +1,53 @@
+import { describe, expect, test } from "vitest";
+
+import {
+  readSectionCollapsedFromStorage,
+  sectionCollapseStorageKey,
+  writeSectionCollapsedToStorage,
+} from "../section-collapse-storage";
+
+describe("section collapse storage", () => {
+  test.each([
+    ["true", false],
+    ["false", true],
+  ])("inverts a legacy open value of %s exactly once", (legacyValue, expectedCollapsed) => {
+    const sectionId = "media";
+    const legacyKey = `homarr-section-collapsed-${sectionId}`;
+    const storage = createStorage({ [legacyKey]: legacyValue });
+
+    expect(readSectionCollapsedFromStorage(storage, sectionId, false)).toBe(expectedCollapsed);
+    expect(storage.getItem(legacyKey)).toBeNull();
+    expect(storage.getItem(sectionCollapseStorageKey(sectionId))).toBe(String(expectedCollapsed));
+    expect(readSectionCollapsedFromStorage(storage, sectionId, !expectedCollapsed)).toBe(expectedCollapsed);
+  });
+
+  test("uses the corrected fallback when no browser preference exists", () => {
+    const storage = createStorage();
+
+    expect(readSectionCollapsedFromStorage(storage, "first", true)).toBe(true);
+    expect(readSectionCollapsedFromStorage(storage, "second", false)).toBe(false);
+  });
+
+  test("writes only the versioned corrected state", () => {
+    const sectionId = "media";
+    const legacyKey = `homarr-section-collapsed-${sectionId}`;
+    const storage = createStorage({ [legacyKey]: "true" });
+
+    writeSectionCollapsedToStorage(storage, sectionId, true);
+
+    expect(storage.getItem(legacyKey)).toBeNull();
+    expect(storage.getItem(sectionCollapseStorageKey(sectionId))).toBe("true");
+  });
+});
+
+const createStorage = (initial: Record<string, string> = {}) => {
+  const values = new Map(Object.entries(initial));
+
+  return {
+    getItem: (key: string) => values.get(key) ?? null,
+    setItem: (key: string, value: string) => values.set(key, value),
+    removeItem: (key: string) => {
+      values.delete(key);
+    },
+  };
+};
diff --git a/apps/nextjs/src/components/board/sections/test/use-open-section-apps.spec.ts b/apps/nextjs/src/components/board/sections/test/use-open-section-apps.spec.ts
new file mode 100644
index 000000000..f5d20957c
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/test/use-open-section-apps.spec.ts
@@ -0,0 +1,78 @@
+import { describe, expect, test } from "vitest";
+
+import { getSectionItemsForLayout } from "../use-open-section-apps";
+
+describe("getSectionItemsForLayout", () => {
+  test("includes items in recursively nested containers", () => {
+    const board = {
+      sections: [
+        { id: "root", kind: "empty" },
+        {
+          id: "first",
+          kind: "container",
+          layouts: [{ layoutId: "desktop", parentSectionId: "root" }],
+        },
+        {
+          id: "second",
+          kind: "container",
+          layouts: [{ layoutId: "desktop", parentSectionId: "first" }],
+        },
+      ],
+      items: [
+        { id: "direct", layouts: [{ layoutId: "desktop", sectionId: "root" }] },
+        { id: "nested", layouts: [{ layoutId: "desktop", sectionId: "second" }] },
+      ],
+    };
+
+    expect(getSectionItemsForLayout(board, "root", "desktop").map((item) => item.id)).toEqual(["direct", "nested"]);
+  });
+
+  test("uses containment from only the requested responsive layout", () => {
+    const board = {
+      sections: [
+        { id: "root", kind: "empty" },
+        { id: "other", kind: "empty" },
+        {
+          id: "container",
+          kind: "container",
+          layouts: [
+            { layoutId: "mobile", parentSectionId: "root" },
+            { layoutId: "desktop", parentSectionId: "other" },
+          ],
+        },
+      ],
+      items: [
+        {
+          id: "app",
+          layouts: [
+            { layoutId: "mobile", sectionId: "container" },
+            { layoutId: "desktop", sectionId: "container" },
+          ],
+        },
+      ],
+    };
+
+    expect(getSectionItemsForLayout(board, "root", "mobile").map((item) => item.id)).toEqual(["app"]);
+    expect(getSectionItemsForLayout(board, "root", "desktop")).toEqual([]);
+  });
+
+  test("does not loop when malformed section containment is cyclic", () => {
+    const board = {
+      sections: [
+        {
+          id: "root",
+          kind: "container",
+          layouts: [{ layoutId: "desktop", parentSectionId: "child" }],
+        },
+        {
+          id: "child",
+          kind: "container",
+          layouts: [{ layoutId: "desktop", parentSectionId: "root" }],
+        },
+      ],
+      items: [{ id: "app", layouts: [{ layoutId: "desktop", sectionId: "child" }] }],
+    };
+
+    expect(getSectionItemsForLayout(board, "root", "desktop").map((item) => item.id)).toEqual(["app"]);
+  });
+});
diff --git a/apps/nextjs/src/components/board/sections/use-open-section-apps.ts b/apps/nextjs/src/components/board/sections/use-open-section-apps.ts
new file mode 100644
index 000000000..b8f7bb64f
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/use-open-section-apps.ts
@@ -0,0 +1,128 @@
+import { use, useCallback, useMemo } from "react";
+
+import { clientApi } from "@homarr/api/client";
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { useConfirmModal } from "@homarr/modals";
+import { useSettings } from "@homarr/settings";
+import { useI18n } from "@homarr/translation/client";
+import type { WidgetComponentProps } from "@homarr/widgets/definition";
+import { loadWidgetDefinition, reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
+
+import type { Item } from "~/app/[locale]/boards/_types";
+
+interface SectionItemLayout {
+  layoutId: string;
+  sectionId: string;
+}
+
+interface SectionLayout {
+  layoutId: string;
+  parentSectionId: string;
+}
+
+interface SectionTreeItem {
+  layouts: readonly SectionItemLayout[];
+}
+
+interface SectionTreeSection {
+  id: string;
+  kind: string;
+  layouts?: readonly SectionLayout[];
+}
+
+interface SectionTree<TItem extends SectionTreeItem> {
+  items: readonly TItem[];
+  sections: readonly SectionTreeSection[];
+}
+
+/**
+ * Finds every item contained by a section in one responsive layout. Containers
+ * can be nested, so their descendants are traversed recursively.
+ */
+export const getSectionItemsForLayout = <TItem extends SectionTreeItem>(
+  board: SectionTree<TItem>,
+  rootSectionId: string,
+  layoutId: string,
+) => {
+  const childrenByParent = new Map<string, string[]>();
+
+  for (const section of board.sections) {
+    if (section.kind !== "container") continue;
+
+    const layout = section.layouts?.find((candidate) => candidate.layoutId === layoutId);
+    if (!layout) continue;
+
+    const children = childrenByParent.get(layout.parentSectionId) ?? [];
+    children.push(section.id);
+    childrenByParent.set(layout.parentSectionId, children);
+  }
+
+  const includedSectionIds = new Set([rootSectionId]);
+  const queue = [rootSectionId];
+
+  for (const sectionId of queue) {
+    for (const childSectionId of childrenByParent.get(sectionId) ?? []) {
+      if (includedSectionIds.has(childSectionId)) continue;
+
+      includedSectionIds.add(childSectionId);
+      queue.push(childSectionId);
+    }
+  }
+
+  return board.items.filter((item) =>
+    item.layouts.some((layout) => layout.layoutId === layoutId && includedSectionIds.has(layout.sectionId)),
+  );
+};
+
+export const useOpenSectionApps = (sectionId: string, enabled: boolean) => {
+  const board = useRequiredBoard();
+  const currentLayoutId = useCurrentLayout();
+  const settings = useSettings();
+  const { openConfirmModal } = useConfirmModal();
+  const t = useI18n();
+  const appDefinition = use(loadWidgetDefinition("app"));
+  const appIds = useMemo(() => {
+    const items: Item[] = getSectionItemsForLayout(board, sectionId, currentLayoutId);
+    return Array.from(
+      new Set(
+        items
+          .filter((item) => item.kind === "app")
+          .map(
+            (item) =>
+              (
+                reduceWidgetOptionsWithDefinition(
+                  appDefinition,
+                  settings,
+                  item.options,
+                ) as WidgetComponentProps<"app">["options"]
+              ).appId,
+          )
+          .filter((appId): appId is string => typeof appId === "string"),
+      ),
+    );
+  }, [appDefinition, board, currentLayoutId, sectionId, settings]);
+  const { data: apps = [], isLoading } = clientApi.app.byIds.useQuery(appIds, {
+    enabled: enabled && appIds.length > 0,
+    staleTime: 30_000,
+  });
+
+  const open = useCallback(() => {
+    const appsWithUrls = apps.filter((app) => app.href && app.href.length > 0);
+
+    for (const app of appsWithUrls) {
+      const openedWindow = window.open(app.href ?? undefined);
+      if (openedWindow) continue;
+
+      openConfirmModal({
+        title: t("section.openAllInNewTabs.title"),
+        children: t("section.openAllInNewTabs.text"),
+      });
+      break;
+    }
+  }, [apps, openConfirmModal, t]);
+
+  return {
+    open,
+    isLoading: enabled && appIds.length > 0 && isLoading,
+  };
+};
diff --git a/apps/nextjs/src/components/board/sections/use-section-items.ts b/apps/nextjs/src/components/board/sections/use-section-items.ts
index ecdc30f53..f4ab23b0a 100644
--- a/apps/nextjs/src/components/board/sections/use-section-items.ts
+++ b/apps/nextjs/src/components/board/sections/use-section-items.ts
@@ -2,16 +2,16 @@ import { useMemo } from "react";
 
 import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 
-import type { DynamicSectionItem, SectionItem } from "~/app/[locale]/boards/_types";
+import type { ContainerSectionItem, SectionItem } from "~/app/[locale]/boards/_types";
 
-export const useSectionItems = (sectionId: string): { innerSections: DynamicSectionItem[]; items: SectionItem[] } => {
+export const useSectionItems = (sectionId: string): { innerSections: ContainerSectionItem[]; items: SectionItem[] } => {
   const board = useRequiredBoard();
   const currentLayoutId = useCurrentLayout();
 
   const innerSections = useMemo(
     () =>
       board.sections
-        .filter((innerSection) => innerSection.kind === "dynamic")
+        .filter((innerSection) => innerSection.kind === "container")
         .map(({ layouts, ...innerSection }) => {
           const layout = layouts.find((layout) => layout.layoutId === currentLayoutId);
 
diff --git a/apps/nextjs/src/components/custom-widgets/custom-widget-import-dialog.tsx b/apps/nextjs/src/components/custom-widgets/custom-widget-import-dialog.tsx
new file mode 100644
index 000000000..f406a99be
--- /dev/null
+++ b/apps/nextjs/src/components/custom-widgets/custom-widget-import-dialog.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import {
+  applyCustomWidgetSourceSetup,
+  getCustomWidgetSourceSetups,
+  getImportReview,
+} from "@homarr/custom-widgets/core";
+import type { CustomWidgetSecretKind, HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
+import {
+  createCustomWidgetSourceSetupValues,
+  CustomWidgetSourceSetupPanel,
+  ImportReviewDialog,
+  isCustomWidgetSourceSetupReady,
+} from "@homarr/custom-widgets/workbench";
+import type { CustomWidgetSourceSetupValue } from "@homarr/custom-widgets/workbench";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useScopedI18n } from "@homarr/translation/client";
+
+interface CustomWidgetImportDialogProps {
+  opened: boolean;
+  widget: HomarrCustomWidgetV2 | null;
+  legacyId?: string;
+  stackId?: string;
+  zIndex?: number;
+  onClose(): void;
+  onImported?(result: { id: string }): void;
+}
+
+export function CustomWidgetImportDialog({
+  opened,
+  widget,
+  legacyId,
+  stackId,
+  zIndex,
+  onClose,
+  onImported,
+}: CustomWidgetImportDialogProps) {
+  const t = useScopedI18n("customWidget");
+  const router = useRouter();
+  const utils = clientApi.useUtils();
+  const setups = useMemo(() => getCustomWidgetSourceSetups(widget?.sources ?? {}), [widget]);
+  const [values, setValues] = useState<Record<string, CustomWidgetSourceSetupValue>>({});
+  const configuredWidget = useMemo(() => {
+    if (!widget) return null;
+    return {
+      ...widget,
+      sources: applyCustomWidgetSourceSetup(
+        widget.sources,
+        Object.fromEntries(
+          Object.entries(values).map(([sourceId, value]) => [
+            sourceId,
+            { baseUrl: value.baseUrl, networkScope: value.networkScope },
+          ]),
+        ),
+      ),
+    };
+  }, [values, widget]);
+  const review = useMemo(() => getImportReview(configuredWidget), [configuredWidget]);
+  const onSuccess = (result: { id: string }) => {
+    showSuccessNotification({
+      title: legacyId ? t("action.migrate") : t("action.import"),
+      message: legacyId ? t("notification.migrated") : t("notification.imported"),
+    });
+    void utils.customWidget.list.invalidate();
+    void utils.customWidget.available.invalidate();
+    void utils.widget.customApi.getData.invalidate();
+    void revalidatePathActionAsync("/manage/custom-widgets").then(() => router.refresh());
+    onImported?.(result);
+    onClose();
+  };
+  const onError = (error: { message?: string }) => {
+    showErrorNotification({
+      title: legacyId ? t("action.migrate") : t("action.import"),
+      message: error.message || (legacyId ? t("notification.migrationError") : t("notification.importError")),
+    });
+  };
+  const importMutation = clientApi.customWidget.import.useMutation({ onSuccess, onError });
+  const migrateMutation = clientApi.customWidget.migrateLegacy.useMutation({ onSuccess, onError });
+  const pending = importMutation.isPending || migrateMutation.isPending;
+
+  useEffect(() => {
+    if (opened) setValues(createCustomWidgetSourceSetupValues(setups));
+  }, [opened, setups]);
+
+  const importWidget = () => {
+    if (!configuredWidget) return;
+    const secrets = Object.entries(values).flatMap(([sourceId, value]) =>
+      Object.entries(value.secrets).flatMap(([kind, secret]) =>
+        secret?.trim() ? [{ sourceId, kind: kind as CustomWidgetSecretKind, value: secret }] : [],
+      ),
+    );
+    if (legacyId) migrateMutation.mutate({ id: legacyId, widget: configuredWidget, secrets });
+    else importMutation.mutate({ widget: configuredWidget, secrets });
+  };
+
+  return (
+    <ImportReviewDialog
+      opened={opened}
+      stackId={stackId}
+      zIndex={zIndex}
+      review={review}
+      pending={pending}
+      confirmDisabled={!isCustomWidgetSourceSetupReady(setups, values)}
+      onClose={onClose}
+      onConfirm={importWidget}
+      messages={{
+        title: legacyId ? t("importReview.migrationTitle") : t("importReview.title"),
+        description: legacyId ? t("importReview.migrationDescription") : t("importReview.description"),
+        name: t("importReview.name"),
+        origin: t("importReview.origin"),
+        authentication: t("importReview.authentication"),
+        networkScope: t("importReview.networkScope"),
+        methods: t("importReview.methods"),
+        permissions: t("importReview.permissions"),
+        actionWarningTitle: t("importReview.actionWarning.title"),
+        actionWarningDescription: t("importReview.actionWarning.description"),
+        cancel: t("importReview.cancel"),
+        confirm: legacyId ? t("importReview.confirmMigration") : t("importReview.confirm"),
+        permission: (permission) => t(`preview.request.permission.${permission}` as never),
+      }}
+    >
+      <CustomWidgetSourceSetupPanel
+        setups={setups}
+        values={values}
+        onChange={(sourceId, value) => setValues((current) => ({ ...current, [sourceId]: value }))}
+        messages={{
+          title: t("importReview.sourceSetup.title"),
+          description: t("importReview.sourceSetup.description"),
+          suggestedUrl: t("importReview.sourceSetup.suggestedUrl"),
+          baseUrl: t("workbench.sources.baseUrl"),
+          networkScope: t("workbench.sources.networkScope"),
+          authentication: t("workbench.sources.authentication"),
+          confirmUrl: t("importReview.sourceSetup.confirmUrl"),
+          ready: t("importReview.sourceSetup.ready"),
+          needsUrl: t("importReview.sourceSetup.needsUrl"),
+          credentialsMissing: t("importReview.sourceSetup.credentialsMissing"),
+          credentialsOptional: t("importReview.sourceSetup.credentialsOptional"),
+          configured: t("workbench.sources.configured"),
+          secret: (kind) => t(`importReview.credentials.field.${kind}`),
+          urlError: (issue) => t(`workbench.sources.baseUrlError.${issue}`),
+        }}
+      />
+    </ImportReviewDialog>
+  );
+}
diff --git a/apps/nextjs/src/components/integration/integration-grid-shared.ts b/apps/nextjs/src/components/integration/integration-grid-shared.ts
index 7451af1e7..dde74820f 100644
--- a/apps/nextjs/src/components/integration/integration-grid-shared.ts
+++ b/apps/nextjs/src/components/integration/integration-grid-shared.ts
@@ -1,4 +1,3 @@
-import { objectEntries } from "@homarr/common";
 import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
 import {
   featuredIntegrations,
@@ -6,30 +5,8 @@ import {
   hiddenFromOnboarding,
   integrationDefs,
   integrationKinds,
+  getWidgetKindsForIntegration,
 } from "@homarr/definitions";
-import { widgetImports } from "@homarr/widgets";
-
-const buildWidgetsByIntegration = () => {
-  const map = Object.fromEntries(integrationKinds.map((kind) => [kind, [] as WidgetKind[]])) as Record<
-    IntegrationKind,
-    WidgetKind[]
-  >;
-
-  for (const [widgetKind, widget] of objectEntries(widgetImports)) {
-    const supported =
-      "supportedIntegrations" in widget.definition
-        ? (widget.definition.supportedIntegrations as IntegrationKind[])
-        : [];
-    for (const kind of supported) {
-      if (kind in map) {
-        map[kind].push(widgetKind);
-      }
-    }
-  }
-  return map;
-};
-
-export const widgetsByIntegration = buildWidgetsByIntegration();
 
 export const categoryTranslationKeys: Record<string, string> = {
   dnsHole: "integration.category.dnsHole",
@@ -45,6 +22,7 @@ export const categoryTranslationKeys: Record<string, string> = {
   smartHomeServer: "integration.category.smartHomeServer",
   indexerManager: "integration.category.indexerManager",
   healthMonitoring: "integration.category.healthMonitoring",
+  beszel: "integration.category.beszel",
   search: "integration.category.search",
   mediaTranscoding: "integration.category.mediaTranscoding",
   networkController: "integration.category.networkController",
@@ -70,11 +48,11 @@ export interface IntegrationGridItem {
 
 export const buildSortedIntegrations = (
   options: { enableMockIntegration?: boolean; onboarding?: boolean } = {},
-): IntegrationGridItem[] =>
-  integrationKinds
+): IntegrationGridItem[] => {
+  return integrationKinds
     .filter((kind) => {
       if (options.onboarding && hiddenFromOnboarding.has(kind)) return false;
-      if (options.onboarding && widgetsByIntegration[kind].length === 0) return false;
+      if (options.onboarding && getWidgetKindsForIntegration(kind).length === 0) return false;
       if (!options.enableMockIntegration && kind === "mock") return false;
       return true;
     })
@@ -82,9 +60,9 @@ export const buildSortedIntegrations = (
       kind,
       name: getIntegrationName(kind),
       categories: [...new Set(integrationDefs[kind].category.flat())] as string[],
-      widgets: widgetsByIntegration[kind],
+      widgets: getWidgetKindsForIntegration(kind),
     }))
-    .sort((left, right) => {
+    .toSorted((left, right) => {
       const leftIdx = featuredIntegrations.indexOf(left.kind);
       const rightIdx = featuredIntegrations.indexOf(right.kind);
       if (leftIdx !== -1 && rightIdx !== -1) return leftIdx - rightIdx;
@@ -92,6 +70,7 @@ export const buildSortedIntegrations = (
       if (rightIdx !== -1) return 1;
       return right.widgets.length - left.widgets.length || left.name.localeCompare(right.name);
     });
+};
 
 export const filterIntegrations = (items: IntegrationGridItem[], search: string) =>
   items.filter((i) => i.name.toLowerCase().includes(search.toLowerCase().trim()));
diff --git a/apps/nextjs/src/components/layout/constants.ts b/apps/nextjs/src/components/layout/constants.ts
new file mode 100644
index 000000000..2799f8304
--- /dev/null
+++ b/apps/nextjs/src/components/layout/constants.ts
@@ -0,0 +1 @@
+export const appShellHeaderHeight = 60;
diff --git a/apps/nextjs/src/components/layout/header.tsx b/apps/nextjs/src/components/layout/header.tsx
index e9d93f7fc..2ad377576 100644
--- a/apps/nextjs/src/components/layout/header.tsx
+++ b/apps/nextjs/src/components/layout/header.tsx
@@ -1,7 +1,6 @@
 import type { ReactNode } from "react";
 import { AppShellHeader, Group, UnstyledButton } from "@mantine/core";
 
-import { Spotlight } from "@homarr/spotlight";
 import { Link } from "@homarr/ui";
 
 import { ClientBurger } from "./header/burger";
@@ -9,6 +8,7 @@ import { DesktopSearchInput, MobileSearchButton } from "./header/search";
 import { TourTarget } from "./header/tour-target";
 import { UserButton } from "./header/user";
 import { HomarrLogoWithTitle } from "./logo/homarr-logo";
+import { LazySpotlight } from "./header/lazy-spotlight";
 
 interface Props {
   logo?: ReactNode;
@@ -18,7 +18,13 @@ interface Props {
 
 export const MainHeader = ({ logo, actions, hasNavigation = true }: Props) => {
   return (
-    <AppShellHeader maw="100vw" zIndex={201} style={{ overflowX: "hidden" }}>
+    <AppShellHeader
+      maw="100vw"
+      zIndex="var(--homarr-z-index-board-header)"
+      style={{ overflowX: "hidden" }}
+      data-advanced-focus-background
+      data-app-shell-header
+    >
       <Group h="100%" gap="xl" px="md" justify="apart" wrap="nowrap">
         <Group h="100%" align="center" style={{ flex: 1 }} wrap="nowrap">
           {hasNavigation && <ClientBurger />}
@@ -37,7 +43,7 @@ export const MainHeader = ({ logo, actions, hasNavigation = true }: Props) => {
           </TourTarget>
         </Group>
       </Group>
-      <Spotlight />
+      <LazySpotlight />
     </AppShellHeader>
   );
 };
diff --git a/apps/nextjs/src/components/layout/header/button.tsx b/apps/nextjs/src/components/layout/header/button.tsx
index e8d858b6a..49c67d883 100644
--- a/apps/nextjs/src/components/layout/header/button.tsx
+++ b/apps/nextjs/src/components/layout/header/button.tsx
@@ -1,4 +1,4 @@
-import type { ForwardedRef, ReactNode } from "react";
+import type { FocusEventHandler, ForwardedRef, PointerEventHandler, ReactNode } from "react";
 import { forwardRef } from "react";
 import type { ActionIconProps } from "@mantine/core";
 import { ActionIcon } from "@mantine/core";
@@ -8,12 +8,17 @@ import { Link } from "@homarr/ui";
 type HeaderButtonProps = (
   | {
       onClick?: () => void;
+      onFocus?: FocusEventHandler<HTMLButtonElement>;
+      onPointerEnter?: PointerEventHandler<HTMLButtonElement>;
     }
   | {
       href: string;
     }
 ) & {
   children: ReactNode;
+  onFocus?: () => void;
+  onPointerDown?: () => void;
+  onPointerEnter?: () => void;
 } & Partial<ActionIconProps>;
 
 const headerButtonActionIconProps: ActionIconProps = {
diff --git a/apps/nextjs/src/components/layout/header/lazy-spotlight.tsx b/apps/nextjs/src/components/layout/header/lazy-spotlight.tsx
new file mode 100644
index 000000000..958c0d537
--- /dev/null
+++ b/apps/nextjs/src/components/layout/header/lazy-spotlight.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
+import { Center, Loader, Paper } from "@mantine/core";
+import { useHotkeys } from "@mantine/hooks";
+
+import { hotkeys } from "@homarr/definitions";
+import { hasPendingSpotlightOpen, openSpotlight, spotlightOpenEvent } from "@homarr/spotlight/open";
+
+const loadSpotlight = () => import("@homarr/spotlight/component");
+const SpotlightLoading = () => (
+  <Center
+    data-homarr-dev-benchmark-spotlight-feedback
+    pos="fixed"
+    inset={0}
+    role="status"
+    aria-label="Loading search"
+    style={{ zIndex: 1000, background: "rgb(0 0 0 / 20%)", backdropFilter: "blur(2px)" }}
+  >
+    <Paper withBorder radius="md" p="xl" shadow="xl">
+      <Loader />
+    </Paper>
+  </Center>
+);
+const Spotlight = dynamic(() => loadSpotlight().then(({ Spotlight: Component }) => Component), {
+  ssr: false,
+  loading: SpotlightLoading,
+});
+
+export const preloadSpotlight = () => void loadSpotlight().catch(() => undefined);
+
+export const LazySpotlight = () => {
+  const [isMounted, setIsMounted] = useState(false);
+  const [isPreloaded, setIsPreloaded] = useState(false);
+
+  useHotkeys(
+    isMounted
+      ? []
+      : [
+          [
+            hotkeys.openSpotlight,
+            () => {
+              setIsMounted(true);
+              openSpotlight();
+            },
+          ],
+        ],
+  );
+
+  useEffect(() => {
+    let isActive = true;
+    const mount = () => setIsMounted(true);
+    window.addEventListener(spotlightOpenEvent, mount);
+    if (hasPendingSpotlightOpen()) mount();
+
+    const preload = () => {
+      void loadSpotlight().then(
+        () => {
+          if (isActive) setIsPreloaded(true);
+        },
+        () => undefined,
+      );
+    };
+    let idleId: number | undefined;
+    const delayId = window.setTimeout(() => {
+      idleId = window.requestIdleCallback?.(preload, { timeout: 1_000 });
+      if (idleId === undefined) preload();
+    }, 1_000);
+    return () => {
+      isActive = false;
+      window.removeEventListener(spotlightOpenEvent, mount);
+      window.clearTimeout(delayId);
+      if (idleId !== undefined) window.cancelIdleCallback?.(idleId);
+    };
+  }, []);
+
+  return isMounted || isPreloaded ? (
+    <>
+      {isPreloaded && <span hidden data-homarr-dev-benchmark-spotlight-preloaded />}
+      {isMounted && (
+        <>
+          <span hidden data-homarr-dev-benchmark-spotlight-mounted />
+          <Spotlight />
+        </>
+      )}
+    </>
+  ) : null;
+};
diff --git a/apps/nextjs/src/components/layout/header/search.tsx b/apps/nextjs/src/components/layout/header/search.tsx
index 8f6e4f908..8e42efd9a 100644
--- a/apps/nextjs/src/components/layout/header/search.tsx
+++ b/apps/nextjs/src/components/layout/header/search.tsx
@@ -3,23 +3,28 @@
 import { TextInput, UnstyledButton } from "@mantine/core";
 import { IconSearch } from "@tabler/icons-react";
 
-import { openSpotlight } from "@homarr/spotlight";
+import { openSpotlight } from "@homarr/spotlight/open";
 import { useI18n } from "@homarr/translation/client";
 
 import { HeaderButton } from "./button";
 import classes from "./search.module.css";
+import { preloadSpotlight } from "./lazy-spotlight";
 
 export const DesktopSearchInput = () => {
   const t = useI18n();
 
   return (
     <TextInput
+      data-homarr-dev-benchmark-interaction="search"
       component={UnstyledButton}
       className={classes.desktopSearch}
       w={400}
       size="sm"
       leftSection={<IconSearch size={20} stroke={1.5} />}
       onClick={openSpotlight}
+      onFocus={preloadSpotlight}
+      onPointerDown={preloadSpotlight}
+      onPointerEnter={preloadSpotlight}
       radius="xl"
     >
       {`${t("search.placeholder")}...`}
@@ -29,7 +34,14 @@ export const DesktopSearchInput = () => {
 
 export const MobileSearchButton = () => {
   return (
-    <HeaderButton onClick={openSpotlight} className={classes.mobileSearch}>
+    <HeaderButton
+      data-homarr-dev-benchmark-interaction="search"
+      onClick={openSpotlight}
+      onFocus={preloadSpotlight}
+      onPointerDown={preloadSpotlight}
+      onPointerEnter={preloadSpotlight}
+      className={classes.mobileSearch}
+    >
       <IconSearch size={20} stroke={1.5} />
     </HeaderButton>
   );
diff --git a/apps/nextjs/src/components/layout/header/tour-target.spec.ts b/apps/nextjs/src/components/layout/header/tour-target.spec.ts
new file mode 100644
index 000000000..8c0ae7816
--- /dev/null
+++ b/apps/nextjs/src/components/layout/header/tour-target.spec.ts
@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+
+import { TourTarget, TourTargetsProvider } from "./tour-target";
+
+vi.mock("@gfazioli/mantine-onboarding-tour", () => ({
+  OnboardingTour: {
+    Target: ({ children }: { children: ReactNode }) => children,
+  },
+}));
+
+const mountedRoots: Array<ReturnType<typeof createRoot>> = [];
+
+beforeAll(() => {
+  Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", { value: true, writable: true });
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => undefined,
+      removeListener: () => undefined,
+      addEventListener: () => undefined,
+      removeEventListener: () => undefined,
+      dispatchEvent: () => false,
+    }),
+  });
+});
+
+afterEach(async () => {
+  await act(async () => {
+    for (const root of mountedRoots.splice(0)) root.unmount();
+  });
+});
+
+const renderTargetAsync = async (enabled: boolean) => {
+  const host = document.createElement("div");
+  const root = createRoot(host);
+  mountedRoots.push(root);
+
+  await act(async () => {
+    root.render(
+      createElement(
+        MantineProvider,
+        null,
+        createElement(TourTargetsProvider, {
+          enabled,
+          children: createElement(TourTarget, { id: "example", children: createElement("button", null, "Target") }),
+        }),
+      ),
+    );
+  });
+  return host;
+};
+
+describe("TourTarget", () => {
+  it("keeps a stable route-transition marker while a tour is active", async () => {
+    const host = await renderTargetAsync(true);
+    expect(host.querySelector('[data-tour-target="example"] button')?.textContent).toBe("Target");
+  });
+
+  it("adds no wrapper for users without an active tour", async () => {
+    const host = await renderTargetAsync(false);
+    expect(host.querySelector("[data-tour-target]")).toBeNull();
+    expect(host.querySelector("button")?.parentElement).toBe(host);
+  });
+});
diff --git a/apps/nextjs/src/components/layout/header/tour-target.tsx b/apps/nextjs/src/components/layout/header/tour-target.tsx
index b23572d1e..ea8ba726b 100644
--- a/apps/nextjs/src/components/layout/header/tour-target.tsx
+++ b/apps/nextjs/src/components/layout/header/tour-target.tsx
@@ -1,11 +1,41 @@
 "use client";
 
-import type { ReactNode } from "react";
-import { OnboardingTour } from "@gfazioli/mantine-onboarding-tour";
+import type { PropsWithChildren, ReactNode } from "react";
+import { createContext, Suspense, use, useContext } from "react";
 import { Box } from "@mantine/core";
 
-export const TourTarget = ({ id, children }: { id: string; children: ReactNode }) => (
-  <OnboardingTour.Target id={id}>
-    <Box data-tour-target={id}>{children}</Box>
-  </OnboardingTour.Target>
+const TourTargetsEnabledContext = createContext(false);
+let tourLibraryPromise: Promise<typeof import("@gfazioli/mantine-onboarding-tour")> | undefined;
+
+const loadTourLibrary = () => {
+  if (tourLibraryPromise) return tourLibraryPromise;
+
+  const currentPromise = import("@gfazioli/mantine-onboarding-tour");
+  tourLibraryPromise = currentPromise;
+  void currentPromise.catch(() => {
+    if (tourLibraryPromise === currentPromise) tourLibraryPromise = undefined;
+  });
+  return currentPromise;
+};
+
+export const TourTargetsProvider = ({ enabled = true, children }: PropsWithChildren<{ enabled?: boolean }>) => (
+  <TourTargetsEnabledContext value={enabled}>{children}</TourTargetsEnabledContext>
 );
+
+const LoadedTourTarget = ({ id, children }: { id: string; children: ReactNode }) => {
+  const { OnboardingTour } = use(loadTourLibrary());
+  return <OnboardingTour.Target id={id}>{children}</OnboardingTour.Target>;
+};
+
+export const TourTarget = ({ id, children }: { id: string; children: ReactNode }) => {
+  const isEnabled = useContext(TourTargetsEnabledContext);
+  if (!isEnabled) return children;
+
+  const target = <Box data-tour-target={id}>{children}</Box>;
+
+  return (
+    <Suspense fallback={target}>
+      <LoadedTourTarget id={id}>{target}</LoadedTourTarget>
+    </Suspense>
+  );
+};
diff --git a/apps/nextjs/src/components/layout/header/update.tsx b/apps/nextjs/src/components/layout/header/update.tsx
index 1989ecd22..81e68b277 100644
--- a/apps/nextjs/src/components/layout/header/update.tsx
+++ b/apps/nextjs/src/components/layout/header/update.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { Suspense, use } from "react";
 import { Indicator, Menu, Text } from "@mantine/core";
 import { IconBellRinging } from "@tabler/icons-react";
 
@@ -9,67 +8,28 @@ import type { RouterOutputs } from "@homarr/api";
 import { useScopedI18n } from "@homarr/translation/client";
 
 interface UpdateIndicatorProps extends PropsWithChildren {
-  availableUpdatesPromise: Promise<RouterOutputs["updateChecker"]["getAvailableUpdates"]> | undefined;
+  availableUpdates: RouterOutputs["updateChecker"]["getAvailableUpdates"] | undefined;
   disabled: boolean;
 }
 
-export const UpdateIndicator = ({ children, availableUpdatesPromise, disabled }: UpdateIndicatorProps) => {
-  if (disabled || availableUpdatesPromise === undefined) {
+export const UpdateIndicator = ({ children, availableUpdates, disabled }: UpdateIndicatorProps) => {
+  if (disabled || availableUpdates === undefined) {
     return children;
   }
 
   return (
-    <Suspense fallback={children}>
-      <InnerUpdateIndicator availableUpdatesPromise={availableUpdatesPromise} disabled={disabled}>
-        {children}
-      </InnerUpdateIndicator>
-    </Suspense>
-  );
-};
-
-interface InnerUpdateIndicatorProps extends PropsWithChildren {
-  availableUpdatesPromise: Promise<RouterOutputs["updateChecker"]["getAvailableUpdates"]>;
-  disabled: boolean;
-}
-
-const InnerUpdateIndicator = ({ children, disabled, availableUpdatesPromise }: InnerUpdateIndicatorProps) => {
-  const availableUpdates = use(availableUpdatesPromise);
-
-  return (
-    <Indicator
-      disabled={!availableUpdates || availableUpdates.length === 0 || disabled}
-      size={15}
-      processing
-      withBorder
-    >
+    <Indicator disabled={availableUpdates.length === 0} size={15} processing withBorder>
       {children}
     </Indicator>
   );
 };
 
 interface AvailableUpdatesMenuItemProps {
-  availableUpdatesPromise: Promise<RouterOutputs["updateChecker"]["getAvailableUpdates"]> | undefined;
+  availableUpdates: RouterOutputs["updateChecker"]["getAvailableUpdates"] | undefined;
 }
 
-export const AvailableUpdatesMenuItem = ({ availableUpdatesPromise }: AvailableUpdatesMenuItemProps) => {
-  if (availableUpdatesPromise === undefined) {
-    return null;
-  }
-
-  return (
-    <Suspense fallback={null}>
-      <InnerAvailableUpdatesMenuItem availableUpdatesPromise={availableUpdatesPromise} />
-    </Suspense>
-  );
-};
-
-interface InnerAvailableUpdatesMenuItemProps {
-  availableUpdatesPromise: Promise<RouterOutputs["updateChecker"]["getAvailableUpdates"]>;
-}
-
-const InnerAvailableUpdatesMenuItem = ({ availableUpdatesPromise }: InnerAvailableUpdatesMenuItemProps) => {
+export const AvailableUpdatesMenuItem = ({ availableUpdates }: AvailableUpdatesMenuItemProps) => {
   const t = useScopedI18n("common.userAvatar.menu");
-  const availableUpdates = use(availableUpdatesPromise);
   if (availableUpdates === undefined || availableUpdates.length === 0) {
     return null;
   }
diff --git a/apps/nextjs/src/components/layout/header/user-client.tsx b/apps/nextjs/src/components/layout/header/user-client.tsx
new file mode 100644
index 000000000..f6c66cbf7
--- /dev/null
+++ b/apps/nextjs/src/components/layout/header/user-client.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import type { ComponentProps, ReactNode } from "react";
+import { Suspense, use, useEffect, useState } from "react";
+import { Box, Loader, UnstyledButton, useMantineColorScheme } from "@mantine/core";
+import { useHotkeys } from "@mantine/hooks";
+import { ErrorBoundary } from "react-error-boundary";
+
+import { clientApi } from "@homarr/api/client";
+import { useSession } from "@homarr/auth/client";
+import { hotkeys } from "@homarr/definitions";
+
+import { UpdateIndicator } from "./update";
+
+type UserAvatarMenuModule = typeof import("~/components/user-avatar-menu");
+type UserAvatarMenuProps = ComponentProps<UserAvatarMenuModule["UserAvatarMenu"]>;
+
+let userAvatarMenuPromise: Promise<UserAvatarMenuModule> | undefined;
+const loadUserAvatarMenu = () => {
+  if (userAvatarMenuPromise) return userAvatarMenuPromise;
+
+  const promise = import("~/components/user-avatar-menu");
+  userAvatarMenuPromise = promise;
+  void promise.catch(() => {
+    if (userAvatarMenuPromise === promise) userAvatarMenuPromise = undefined;
+  });
+  return promise;
+};
+const preloadUserAvatarMenu = () => void loadUserAvatarMenu().catch(() => undefined);
+
+const LazyUserAvatarMenu = (props: UserAvatarMenuProps) => {
+  const { UserAvatarMenu } = use(loadUserAvatarMenu());
+  return <UserAvatarMenu {...props} />;
+};
+
+interface UserButtonClientProps {
+  avatar: ReactNode;
+  isAdmin: boolean;
+  isDockerEnabled: boolean;
+}
+
+export const UserButtonClient = ({ avatar, isAdmin, isDockerEnabled }: UserButtonClientProps) => {
+  const [canCheckForUpdates, setCanCheckForUpdates] = useState(false);
+  const [isMenuMounted, setIsMenuMounted] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const session = useSession();
+  const { toggleColorScheme } = useMantineColorScheme();
+  useHotkeys([[hotkeys.toggleColorScheme, toggleColorScheme]]);
+  const isCurrentSessionAdmin =
+    isAdmin && session.status === "authenticated" && session.data.user.permissions.includes("admin");
+
+  useEffect(() => {
+    if (!isCurrentSessionAdmin) {
+      setCanCheckForUpdates(false);
+      return;
+    }
+
+    const timeout = window.setTimeout(() => setCanCheckForUpdates(true), 2_000);
+    return () => window.clearTimeout(timeout);
+  }, [isCurrentSessionAdmin]);
+
+  const { data: availableUpdates } = clientApi.updateChecker.getAvailableUpdates.useQuery(undefined, {
+    enabled: canCheckForUpdates,
+    refetchOnWindowFocus: false,
+    retry: false,
+    staleTime: 60 * 60 * 1_000,
+  });
+  const visibleUpdates = isCurrentSessionAdmin ? availableUpdates : undefined;
+  const openMenu = () => {
+    setIsMenuMounted(true);
+    setIsMenuOpen(true);
+  };
+  const renderButton = (onClick: () => void, isLoading = false) => (
+    <UnstyledButton
+      onClick={onClick}
+      onFocus={preloadUserAvatarMenu}
+      onMouseEnter={preloadUserAvatarMenu}
+      onPointerDown={preloadUserAvatarMenu}
+      aria-busy={isLoading || undefined}
+      disabled={isLoading}
+    >
+      <UpdateIndicator availableUpdates={visibleUpdates} disabled={!isCurrentSessionAdmin}>
+        <Box pos="relative" style={{ display: "inline-flex" }}>
+          <Box opacity={isLoading ? 0.35 : 1}>{avatar}</Box>
+          {isLoading && (
+            <Loader
+              aria-label="Loading user menu"
+              size={18}
+              pos="absolute"
+              top="50%"
+              left="50%"
+              style={{ transform: "translate(-50%, -50%)" }}
+            />
+          )}
+        </Box>
+      </UpdateIndicator>
+    </UnstyledButton>
+  );
+  const button = renderButton(openMenu);
+  const loadingButton = renderButton(() => undefined, true);
+
+  if (!isMenuMounted) return button;
+
+  return (
+    <ErrorBoundary
+      fallbackRender={({ resetErrorBoundary }) =>
+        renderButton(() => {
+          resetErrorBoundary();
+          openMenu();
+        })
+      }
+    >
+      <Suspense fallback={loadingButton}>
+        <LazyUserAvatarMenu
+          availableUpdates={visibleUpdates}
+          isDockerEnabled={isDockerEnabled}
+          opened={isMenuOpen}
+          onOpenChange={setIsMenuOpen}
+        >
+          {button}
+        </LazyUserAvatarMenu>
+      </Suspense>
+    </ErrorBoundary>
+  );
+};
diff --git a/apps/nextjs/src/components/layout/header/user.tsx b/apps/nextjs/src/components/layout/header/user.tsx
index af3d72121..e1dc9ad1f 100644
--- a/apps/nextjs/src/components/layout/header/user.tsx
+++ b/apps/nextjs/src/components/layout/header/user.tsx
@@ -1,28 +1,14 @@
-import { Suspense } from "react";
-import { UnstyledButton } from "@mantine/core";
-
-import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { env } from "@homarr/docker/env";
 
 import { CurrentUserAvatar } from "~/components/user-avatar";
-import { UserAvatarMenu } from "~/components/user-avatar-menu";
-import { UpdateIndicator } from "./update";
+import { UserButtonClient } from "./user-client";
 
 export const UserButton = async () => {
   const session = await auth();
-  const isAdmin = session?.user.permissions.includes("admin");
+  const isAdmin = Boolean(session?.user.permissions.includes("admin"));
   const isDockerEnabled = isAdmin && env.ENABLE_DOCKER;
-  const availableUpdatesPromise = isAdmin ? api.updateChecker.getAvailableUpdates() : undefined;
   return (
-    <UserAvatarMenu availableUpdatesPromise={availableUpdatesPromise} isDockerEnabled={isDockerEnabled}>
-      <UnstyledButton>
-        <Suspense fallback={<CurrentUserAvatar size="md" />}>
-          <UpdateIndicator availableUpdatesPromise={availableUpdatesPromise} disabled={!isAdmin}>
-            <CurrentUserAvatar size="md" />
-          </UpdateIndicator>
-        </Suspense>
-      </UnstyledButton>
-    </UserAvatarMenu>
+    <UserButtonClient avatar={<CurrentUserAvatar size="md" />} isAdmin={isAdmin} isDockerEnabled={isDockerEnabled} />
   );
 };
diff --git a/apps/nextjs/src/components/layout/navigation-link.tsx b/apps/nextjs/src/components/layout/navigation-link.tsx
index 032dbc3bc..383692cfe 100644
--- a/apps/nextjs/src/components/layout/navigation-link.tsx
+++ b/apps/nextjs/src/components/layout/navigation-link.tsx
@@ -1,20 +1,19 @@
 "use client";
 
-import type { ReactNode } from "react";
+import type { ReactElement, ReactNode } from "react";
 import { useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
-import { OnboardingTour } from "@gfazioli/mantine-onboarding-tour";
 import { NavLink } from "@mantine/core";
 
 import { Link } from "@homarr/ui";
 
+import { TourTarget } from "./header/tour-target";
+
 export const CommonNavLink = (props: ClientNavigationLink) =>
   "href" in props ? <NavLinkHref {...props} /> : <NavLinkWithItems {...props} />;
 
-const TourTarget = ({ id, children }: { id?: string; children: ReactNode }) => {
-  if (!id) return <>{children}</>;
-  return <OnboardingTour.Target id={id}>{children}</OnboardingTour.Target>;
-};
+const withOptionalTourTarget = (id: string | undefined, children: ReactElement) =>
+  id ? <TourTarget id={id}>{children}</TourTarget> : children;
 
 const pathMatches = (pathname: string, href: string) => pathname === href || pathname.startsWith(`${href}/`);
 
@@ -43,7 +42,7 @@ const NavLinkHref = (props: NavigationLinkHref) => {
       active={isClient && pathMatches(pathname, props.href)}
     />
   );
-  return <TourTarget id={tourId}>{link}</TourTarget>;
+  return withOptionalTourTarget(tourId, link);
 };
 
 const NavLinkWithItems = (props: NavigationLinkWithItems) => {
@@ -56,7 +55,7 @@ const NavLinkWithItems = (props: NavigationLinkWithItems) => {
       ))}
     </NavLink>
   );
-  return <TourTarget id={props["data-onboarding-tour-id"]}>{nav}</TourTarget>;
+  return withOptionalTourTarget(props["data-onboarding-tour-id"], nav);
 };
 
 interface CommonNavigationLinkProps {
diff --git a/apps/nextjs/src/components/layout/shell.tsx b/apps/nextjs/src/components/layout/shell.tsx
index b51cf3220..56001cafb 100644
--- a/apps/nextjs/src/components/layout/shell.tsx
+++ b/apps/nextjs/src/components/layout/shell.tsx
@@ -5,6 +5,7 @@ import { AppShell } from "@mantine/core";
 import { useAtomValue } from "jotai";
 
 import { useOptionalBackgroundProps } from "./background";
+import { appShellHeaderHeight } from "./constants";
 import { navigationCollapsedAtom } from "./header/burger";
 
 interface ClientShellProps {
@@ -23,7 +24,7 @@ export const ClientShell = ({
   return (
     <AppShell
       {...backgroundProps}
-      header={hasHeader ? { height: 60 } : undefined}
+      header={hasHeader ? { height: appShellHeaderHeight } : undefined}
       navbar={
         hasNavigation
           ? {
diff --git a/apps/nextjs/src/components/layout/viewport-hint.tsx b/apps/nextjs/src/components/layout/viewport-hint.tsx
new file mode 100644
index 000000000..9945a01f6
--- /dev/null
+++ b/apps/nextjs/src/components/layout/viewport-hint.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { boardViewportWidthCookieName } from "@homarr/boards/layout-selection";
+
+export const ViewportHint = () => {
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout> | undefined;
+    const persist = () => {
+      const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+      document.cookie = `${boardViewportWidthCookieName}=${Math.round(viewportWidth)}; Path=/; Max-Age=31536000; SameSite=Lax`;
+    };
+    const handleResize = () => {
+      clearTimeout(timeout);
+      timeout = setTimeout(persist, 150);
+    };
+
+    persist();
+    window.addEventListener("resize", handleResize, { passive: true });
+    return () => {
+      clearTimeout(timeout);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return null;
+};
diff --git a/apps/nextjs/src/components/manage/danger-zone.tsx b/apps/nextjs/src/components/manage/danger-zone.tsx
index 38f63185b..480d38a0c 100644
--- a/apps/nextjs/src/components/manage/danger-zone.tsx
+++ b/apps/nextjs/src/components/manage/danger-zone.tsx
@@ -1,19 +1,21 @@
+"use client";
+
 import { Fragment } from "react";
 import { Card, CardSection, Divider, Group, Stack, Text, Title } from "@mantine/core";
 
-import { getI18n } from "@homarr/translation/server";
+import { useScopedI18n } from "@homarr/translation/client";
 
 interface DangerZoneRootProps {
   children: React.ReactNode[] | React.ReactNode;
 }
 
-export const DangerZoneRoot = async ({ children }: DangerZoneRootProps) => {
-  const t = await getI18n();
+export const DangerZoneRoot = ({ children }: DangerZoneRootProps) => {
+  const t = useScopedI18n("common");
 
   return (
     <Stack gap="sm">
       <Title c="red.8" order={2}>
-        {t("common.dangerZone")}
+        {t("dangerZone")}
       </Title>
       <Card style={{ borderColor: "var(--mantine-color-red-8)", borderWidth: 3 }}>
         <Stack gap="sm">
diff --git a/apps/nextjs/src/components/manage/section-card.tsx b/apps/nextjs/src/components/manage/section-card.tsx
new file mode 100644
index 000000000..66eb396d4
--- /dev/null
+++ b/apps/nextjs/src/components/manage/section-card.tsx
@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import { Card, Divider, Stack, Title } from "@mantine/core";
+
+interface SectionCardProps {
+  title: ReactNode;
+  children: ReactNode;
+}
+
+export const SectionCard = ({ title, children }: SectionCardProps) => {
+  return (
+    <Card withBorder bg="transparent">
+      <Stack gap="md">
+        <Title order={3}>{title}</Title>
+        <Divider />
+        {children}
+      </Stack>
+    </Card>
+  );
+};
diff --git a/apps/nextjs/src/components/manage/unsaved-changes-bar.tsx b/apps/nextjs/src/components/manage/unsaved-changes-bar.tsx
new file mode 100644
index 000000000..da0b91ad1
--- /dev/null
+++ b/apps/nextjs/src/components/manage/unsaved-changes-bar.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Card, Group, Text } from "@mantine/core";
+
+import { useI18n } from "@homarr/translation/client";
+
+interface UnsavedChangesBarProps {
+  children: ReactNode;
+}
+
+export const UnsavedChangesBar = ({ children }: UnsavedChangesBarProps) => {
+  const t = useI18n();
+
+  return (
+    <div style={{ position: "sticky", bottom: 20 }}>
+      <Card withBorder>
+        <Group justify="space-between" wrap="wrap">
+          <Text fw={500}>{t("common.unsavedChanges")}</Text>
+          <Group>{children}</Group>
+        </Group>
+      </Card>
+    </div>
+  );
+};
diff --git a/apps/nextjs/src/components/onboarding/board-tour-gate.tsx b/apps/nextjs/src/components/onboarding/board-tour-gate.tsx
new file mode 100644
index 000000000..454d20fa2
--- /dev/null
+++ b/apps/nextjs/src/components/onboarding/board-tour-gate.tsx
@@ -0,0 +1,11 @@
+import type { PropsWithChildren } from "react";
+
+export const BoardTourGate = async ({ enabled, children }: PropsWithChildren<{ enabled: boolean }>) => {
+  if (!enabled) return children;
+
+  // Native server-side import keeps the completed-user client graph lean while
+  // giving first-time users one stable board tree instead of swapping a
+  // Suspense fallback after the board grid has mounted.
+  const { BoardTourProvider } = await import("./board-tour");
+  return <BoardTourProvider>{children}</BoardTourProvider>;
+};
diff --git a/apps/nextjs/src/components/onboarding/board-tour.tsx b/apps/nextjs/src/components/onboarding/board-tour.tsx
index d7f5d2765..f51a8451f 100644
--- a/apps/nextjs/src/components/onboarding/board-tour.tsx
+++ b/apps/nextjs/src/components/onboarding/board-tour.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import type { OnboardingTourStep } from "@gfazioli/mantine-onboarding-tour";
 
 import { clientApi } from "@homarr/api/client";
@@ -10,6 +10,7 @@ import { createDocumentationLink } from "@homarr/definitions";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { useBoardPermissions } from "~/components/board/permissions/client";
+import { TourTargetsProvider } from "~/components/layout/header/tour-target";
 import { TourShell } from "./tour-shell";
 import { TourStepContent } from "./tour-step-content";
 
@@ -17,21 +18,11 @@ export const BoardTourProvider = ({ children }: PropsWithChildren) => {
   const t = useScopedI18n("onboardingTour.board");
   const board = useRequiredBoard();
   const { hasChangeAccess } = useBoardPermissions(board);
-  const utils = clientApi.useUtils();
-  const { data: tourStatus } = clientApi.user.getTourStatus.useQuery();
-  const { mutate: completeTour } = clientApi.user.completeTour.useMutation({
-    onSuccess() {
-      void utils.user.getTourStatus.invalidate();
-    },
-  });
-
-  const started = tourStatus !== undefined && !tourStatus.completedBoardTour;
+  const [started, setStarted] = useState(true);
+  const { mutate: completeTour } = clientApi.user.completeTour.useMutation();
 
   const handleEnd = () => {
-    utils.user.getTourStatus.setData(undefined, {
-      completedManageTour: tourStatus?.completedManageTour ?? false,
-      completedBoardTour: true,
-    });
+    setStarted(false);
     completeTour({ tour: "board" });
   };
 
@@ -101,8 +92,10 @@ export const BoardTourProvider = ({ children }: PropsWithChildren) => {
   }, [hasChangeAccess, t]);
 
   return (
-    <TourShell steps={steps} started={started} onEnd={handleEnd} position={{ base: "bottom", sm: "left" }}>
-      {children}
-    </TourShell>
+    <TourTargetsProvider enabled={started}>
+      <TourShell steps={steps} started={started} onEnd={handleEnd} position={{ base: "bottom", sm: "left" }}>
+        {children}
+      </TourShell>
+    </TourTargetsProvider>
   );
 };
diff --git a/apps/nextjs/src/components/onboarding/manage-tour-gate.tsx b/apps/nextjs/src/components/onboarding/manage-tour-gate.tsx
new file mode 100644
index 000000000..33f408b21
--- /dev/null
+++ b/apps/nextjs/src/components/onboarding/manage-tour-gate.tsx
@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from "react";
+
+export const ManageTourGate = async ({
+  enabled,
+  isAdmin,
+  children,
+}: PropsWithChildren<{ enabled: boolean; isAdmin: boolean }>) => {
+  if (!enabled) return children;
+
+  const { ManageTourProvider } = await import("./manage-tour");
+  return <ManageTourProvider isAdmin={isAdmin}>{children}</ManageTourProvider>;
+};
diff --git a/apps/nextjs/src/components/onboarding/manage-tour.tsx b/apps/nextjs/src/components/onboarding/manage-tour.tsx
index c242a1bb2..b6b00894f 100644
--- a/apps/nextjs/src/components/onboarding/manage-tour.tsx
+++ b/apps/nextjs/src/components/onboarding/manage-tour.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import type { OnboardingTourFocusRevealProps, OnboardingTourStep } from "@gfazioli/mantine-onboarding-tour";
 import { useMediaQuery } from "@mantine/hooks";
@@ -17,6 +17,7 @@ import { clientApi } from "@homarr/api/client";
 import { createDocumentationLink } from "@homarr/definitions";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import { TourTargetsProvider } from "~/components/layout/header/tour-target";
 import { TourShell } from "./tour-shell";
 import { TourStepContent } from "./tour-step-content";
 
@@ -46,13 +47,7 @@ const usersStepFocusRevealProps: OnboardingTourFocusRevealProps = {
 
 export const ManageTourProvider = ({ children, isAdmin }: ManageTourProviderProps) => {
   const t = useScopedI18n("onboardingTour.manage");
-  const utils = clientApi.useUtils();
-  const { data: tourStatus } = clientApi.user.getTourStatus.useQuery();
-  const { mutate: completeTour } = clientApi.user.completeTour.useMutation({
-    onSuccess() {
-      void utils.user.getTourStatus.invalidate();
-    },
-  });
+  const { mutate: completeTour } = clientApi.user.completeTour.useMutation();
   const isMobile = useMediaQuery("(max-width: 48em)");
   const pathname = usePathname();
   const router = useRouter();
@@ -62,14 +57,13 @@ export const ManageTourProvider = ({ children, isAdmin }: ManageTourProviderProp
 
   const [tourActive, setTourActive] = useState(false);
   const [tourDismissed, setTourDismissed] = useState(false);
-  const wasManageTourCompletedRef = useRef(tourStatus?.completedManageTour);
 
   useEffect(() => {
     if (tourDismissed) return;
-    if (isManageHome && tourStatus !== undefined && !tourStatus.completedManageTour && !isMobile) {
+    if (isManageHome && !isMobile) {
       setTourActive(true);
     }
-  }, [isManageHome, tourStatus, isMobile, tourDismissed]);
+  }, [isManageHome, isMobile, tourDismissed]);
 
   useEffect(() => {
     if (!isManageSection) {
@@ -77,25 +71,12 @@ export const ManageTourProvider = ({ children, isAdmin }: ManageTourProviderProp
     }
   }, [isManageSection]);
 
-  useEffect(() => {
-    const wasCompleted = wasManageTourCompletedRef.current;
-    const isCompleted = tourStatus?.completedManageTour;
-    if (wasCompleted === true && isCompleted === false) {
-      setTourDismissed(false);
-    }
-    wasManageTourCompletedRef.current = isCompleted;
-  }, [tourStatus?.completedManageTour]);
-
   const handleEnd = useCallback(() => {
     setTourDismissed(true);
     setTourActive(false);
-    utils.user.getTourStatus.setData(undefined, {
-      completedManageTour: true,
-      completedBoardTour: tourStatus?.completedBoardTour ?? false,
-    });
     completeTour({ tour: "manage" });
     router.push("/manage");
-  }, [completeTour, router, tourStatus?.completedBoardTour, utils.user.getTourStatus]);
+  }, [completeTour, router]);
 
   const steps = useMemo(() => {
     const allSteps: (OnboardingTourStep & { adminOnly?: boolean })[] = [
@@ -207,14 +188,16 @@ export const ManageTourProvider = ({ children, isAdmin }: ManageTourProviderProp
   }, [isAdmin, t]);
 
   return (
-    <TourShell
-      steps={steps}
-      started={tourActive}
-      onEnd={handleEnd}
-      stepRoutes={stepRoutes}
-      position={{ base: "bottom", sm: "right" }}
-    >
-      {children}
-    </TourShell>
+    <TourTargetsProvider enabled={tourActive}>
+      <TourShell
+        steps={steps}
+        started={tourActive}
+        onEnd={handleEnd}
+        stepRoutes={stepRoutes}
+        position={{ base: "bottom", sm: "right" }}
+      >
+        {children}
+      </TourShell>
+    </TourTargetsProvider>
   );
 };
diff --git a/apps/nextjs/src/components/user-avatar-menu.tsx b/apps/nextjs/src/components/user-avatar-menu.tsx
index ad8a4b449..4b01f96ca 100644
--- a/apps/nextjs/src/components/user-avatar-menu.tsx
+++ b/apps/nextjs/src/components/user-avatar-menu.tsx
@@ -1,13 +1,10 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { useCallback, useEffect } from "react";
-import { useRouter } from "next/navigation";
-import { Badge, Center, Indicator, Kbd, Loader, Menu, Stack, Text, useMantineColorScheme } from "@mantine/core";
-import { useHotkeys, useTimeout } from "@mantine/hooks";
+import { useCallback } from "react";
+import { Badge, Indicator, Kbd, Loader, Menu, Text } from "@mantine/core";
 import {
   IconBrandDocker,
-  IconCheck,
   IconHome,
   IconLogin,
   IconLogout,
@@ -19,7 +16,7 @@ import {
 import type { RouterOutputs } from "@homarr/api";
 import { signOut, useSession } from "@homarr/auth/client";
 import { hotkeys } from "@homarr/definitions";
-import { createModal, useModalAction } from "@homarr/modals";
+import { useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
 import { Link } from "@homarr/ui";
 
@@ -32,8 +29,10 @@ import { AvailableUpdatesMenuItem } from "./layout/header/update";
 
 interface UserAvatarMenuProps {
   children: ReactNode;
-  availableUpdatesPromise?: Promise<RouterOutputs["updateChecker"]["getAvailableUpdates"]>;
+  availableUpdates?: RouterOutputs["updateChecker"]["getAvailableUpdates"];
   isDockerEnabled?: boolean;
+  opened: boolean;
+  onOpenChange: (opened: boolean) => void;
 }
 
 const formatHotkeyLabel = (hotkey: string, modifierLabel: string) =>
@@ -42,39 +41,33 @@ const formatHotkeyLabel = (hotkey: string, modifierLabel: string) =>
     .map((key) => (key === "mod" ? modifierLabel : `${key.charAt(0).toUpperCase()}${key.slice(1)}`))
     .join(" + ");
 
-export const UserAvatarMenu = ({ children, availableUpdatesPromise, isDockerEnabled }: UserAvatarMenuProps) => {
+export const UserAvatarMenu = ({
+  children,
+  availableUpdates,
+  isDockerEnabled,
+  opened,
+  onOpenChange,
+}: UserAvatarMenuProps) => {
   const t = useScopedI18n("common.userAvatar.menu");
-  const { toggleColorScheme } = useMantineColorScheme();
-  useHotkeys([[hotkeys.toggleColorScheme, toggleColorScheme]]);
-
   const session = useSession();
-  const router = useRouter();
 
   const { logoutUrl } = useAuthContext();
-  const { openModal } = useModalAction(LogoutModal);
   const { openModal: openDockerModal } = useModalAction(DockerQuickAccessModal);
   const assistant = useOptionalHomarrAssistant();
 
   const handleSignout = useCallback(async () => {
+    const redirectUrl = logoutUrl ?? "/auth/login";
     await signOut({
       redirect: false,
     });
-    openModal({
-      onTimeout: () => {
-        if (logoutUrl) {
-          window.location.assign(logoutUrl);
-          return;
-        }
-        router.push("/auth/login");
-      },
-    });
-  }, [logoutUrl, openModal, router]);
+    window.location.assign(redirectUrl);
+  }, [logoutUrl]);
 
   return (
     // We use keepMounted so we can add event listeners to prevent navigating away without saving the board
-    <Menu width={300} withinPortal keepMounted>
+    <Menu width={300} withinPortal keepMounted opened={opened} onChange={onOpenChange}>
       <Menu.Dropdown>
-        <AvailableUpdatesMenuItem availableUpdatesPromise={availableUpdatesPromise} />
+        <AvailableUpdatesMenuItem availableUpdates={availableUpdates} />
         <Menu.Item component={Link} href="/boards" leftSection={<IconHome size="1rem" />}>
           {t("homeBoard")}
         </Menu.Item>
@@ -166,35 +159,3 @@ export const UserAvatarMenu = ({ children, availableUpdatesPromise, isDockerEnab
     </Menu>
   );
 };
-
-const LogoutModal = createModal<{ onTimeout: () => void }>(({ actions, innerProps }) => {
-  const t = useScopedI18n("common.userAvatar.menu");
-  const { start } = useTimeout(() => {
-    actions.closeModal();
-    innerProps.onTimeout();
-  }, 1500);
-
-  useEffect(() => {
-    start();
-  }, [start]);
-
-  return (
-    <Center h={200 - 2 * 16}>
-      <Stack align="center" c="green">
-        <IconCheck size={50} />
-        <Text ta="center" fw="bold">
-          {t("loggedOut")}
-        </Text>
-      </Stack>
-    </Center>
-  );
-}).withOptions({
-  centered: true,
-  withCloseButton: false,
-  transitionProps: {
-    transition: "pop",
-  },
-  size: 200,
-  closeOnClickOutside: false,
-  closeOnEscape: false,
-});
diff --git a/apps/nextjs/src/components/workshop/workshop-browser.tsx b/apps/nextjs/src/components/workshop/workshop-browser.tsx
new file mode 100644
index 000000000..9c87178fd
--- /dev/null
+++ b/apps/nextjs/src/components/workshop/workshop-browser.tsx
@@ -0,0 +1,537 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import {
+  Alert,
+  Badge,
+  Box,
+  Button,
+  Card,
+  Code,
+  Group,
+  Image,
+  Loader,
+  Modal,
+  Pagination,
+  Select,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  Textarea,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { useDebouncedValue, useDisclosure } from "@mantine/hooks";
+import {
+  IconAlertTriangle,
+  IconBuildingStore,
+  IconDownload,
+  IconFlag,
+  IconRefresh,
+  IconSearch,
+  IconThumbDown,
+  IconThumbUp,
+} from "@tabler/icons-react";
+import { CUSTOM_WIDGET_SCHEMA } from "@homarr/custom-widgets/core";
+import type { HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
+import {
+  useWorkshopCssImportMutation,
+  useWorkshopQuery,
+  useWorkshopReportMutation,
+  useWorkshopSubmissionQuery,
+  useWorkshopVoteMutation,
+  useWorkshopWidgetImportMutation,
+} from "@homarr/workshop/backend";
+import type {
+  WorkshopReport,
+  WorkshopSubmissionDetail,
+  WorkshopSubmissionType,
+  WorkshopUser,
+} from "@homarr/workshop/schema";
+import {
+  validateWorkshopContent,
+  validateWorkshopWidget,
+  WORKSHOP_CSS_SCHEMA,
+  workshopExportFilename,
+} from "@homarr/workshop/schema";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { createWorkshopClient } from "./workshop-client";
+
+function downloadWorkshopSubmission(submission: WorkshopSubmissionDetail) {
+  const url = URL.createObjectURL(
+    new Blob([submission.content], { type: submission.type === "customCss" ? "text/css" : "application/json" }),
+  );
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = workshopExportFilename(submission.title, submission.type);
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+interface WorkshopBrowserProps {
+  type?: WorkshopSubmissionType;
+  onInstall?(widget: HomarrCustomWidgetV2): Promise<void>;
+  onUseCss?(css: string): void;
+}
+
+export function WorkshopBrowser({ type = "customWidget", onInstall, onUseCss }: WorkshopBrowserProps) {
+  const t = useScopedI18n("workshop");
+  const client = useMemo(createWorkshopClient, []);
+  const [user, setUser] = useState<WorkshopUser | null>(null);
+  const [page, setPage] = useState(1);
+  const [sort, setSort] = useState<"top" | "newest">("top");
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebouncedValue(search, 250);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [reportOpened, reportControls] = useDisclosure(false);
+  const [reportCategory, setReportCategory] = useState<WorkshopReport["category"]>("other");
+  const [reportExplanation, setReportExplanation] = useState("");
+  const [loginPending, setLoginPending] = useState(false);
+  const [loginError, setLoginError] = useState<string | null>(null);
+  const [cssAwaitingConfirmation, setCssAwaitingConfirmation] = useState<string | null>(null);
+
+  useEffect(() => {
+    const unsubscribe = client.subscribeToAuth(setUser);
+    void client.refreshAuth().then(setUser);
+    return unsubscribe;
+  }, [client]);
+
+  const list = useWorkshopQuery(client, { page, perPage: 12, type, sort, search: debouncedSearch });
+  const detail = useWorkshopSubmissionQuery(client, selectedId ?? "");
+  const detailValidation = useMemo(() => {
+    if (!detail.data) return null;
+    return type === "customCss"
+      ? validateWorkshopContent("customCss", detail.data.content)
+      : validateWorkshopWidget(detail.data.content);
+  }, [detail.data, type]);
+  const expectedSchema = type === "customCss" ? WORKSHOP_CSS_SCHEMA : CUSTOM_WIDGET_SCHEMA;
+  const detailCompatible =
+    detail.data?.type === type && detailValidation?.success === true && detail.data.widgetSchema === expectedSchema;
+  const signIn = () => {
+    setLoginPending(true);
+    setLoginError(null);
+    void client
+      .signInWithGitHub()
+      .then(setUser)
+      .catch((cause: unknown) => {
+        const message = cause instanceof Error ? cause.message : t("signInError");
+        setLoginError(message);
+        showErrorNotification({ title: t("signIn"), message });
+      })
+      .finally(() => setLoginPending(false));
+  };
+  const install = useWorkshopWidgetImportMutation(onInstall, () => setSelectedId(null));
+  const useCss = useWorkshopCssImportMutation(onUseCss, () => {
+    setCssAwaitingConfirmation(null);
+    setSelectedId(null);
+  });
+  const vote = useWorkshopVoteMutation(client);
+  const report = useWorkshopReportMutation(client);
+  const submitReport = () =>
+    report.mutate(
+      { submission: selectedId ?? "", category: reportCategory, explanation: reportExplanation },
+      {
+        onSuccess: () => {
+          reportControls.close();
+          setReportExplanation("");
+          showSuccessNotification({ title: t("reportSent"), message: t("reportSentDescription") });
+        },
+      },
+    );
+
+  return (
+    <Stack gap="lg">
+      <Card withBorder radius="lg" p="lg">
+        <Group justify="space-between" align="flex-start">
+          <Group align="flex-start">
+            <Box
+              p="sm"
+              bg="var(--mantine-color-default-hover)"
+              style={{ borderRadius: "var(--mantine-radius-md)", lineHeight: 0 }}
+            >
+              <IconBuildingStore size={24} />
+            </Box>
+            <Box>
+              <Title order={2}>{t("title")}</Title>
+              <Text c="dimmed" size="sm" maw={640}>
+                {type === "customCss" ? t("descriptionCss") : t("description")}
+              </Text>
+            </Box>
+          </Group>
+          {user ? (
+            <Group gap="xs">
+              <Badge variant="light">{user.displayName}</Badge>
+              <Button
+                size="xs"
+                variant="subtle"
+                onClick={() => {
+                  client.signOut();
+                  setUser(null);
+                }}
+              >
+                {t("signOut")}
+              </Button>
+            </Group>
+          ) : (
+            <Button size="xs" loading={loginPending} onClick={signIn}>
+              {t("signIn")}
+            </Button>
+          )}
+        </Group>
+      </Card>
+      <Alert color="yellow" icon={<IconAlertTriangle size={18} />}>
+        {type === "customCss" ? t("securityNoticeCss") : t("securityNotice")}
+      </Alert>
+      {loginError && <Alert color="red">{loginError}</Alert>}
+      <SimpleGrid cols={{ base: 1, sm: 2 }}>
+        <TextInput
+          label={type === "customCss" ? t("searchCss") : t("search")}
+          leftSection={<IconSearch size={16} />}
+          rightSection={list.isFetching ? <Loader size={16} /> : undefined}
+          value={search}
+          onChange={(event) => {
+            setSearch(event.currentTarget.value);
+            setPage(1);
+          }}
+        />
+        <Select
+          label={t("sort")}
+          value={sort}
+          onChange={(value) => {
+            setSort(value === "newest" ? "newest" : "top");
+            setPage(1);
+          }}
+          data={[
+            { value: "top", label: t("sortTop") },
+            { value: "newest", label: t("sortNewest") },
+          ]}
+          allowDeselect={false}
+        />
+      </SimpleGrid>
+      {list.isLoading ? (
+        <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }}>
+          <Skeleton h={280} />
+          <Skeleton h={280} />
+          <Skeleton h={280} />
+        </SimpleGrid>
+      ) : list.isError ? (
+        <Alert color="yellow" icon={<IconAlertTriangle size={18} />} title={t("unavailableTitle")}>
+          <Stack gap="sm" align="flex-start">
+            <Text size="sm">{t("unavailable")}</Text>
+            <Button
+              size="xs"
+              variant="light"
+              leftSection={<IconRefresh size={14} />}
+              loading={list.isFetching}
+              onClick={() => void list.refetch()}
+            >
+              {t("retry")}
+            </Button>
+          </Stack>
+        </Alert>
+      ) : list.data?.items.length ? (
+        <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }}>
+          {list.data.items.map((item) => (
+            <Card key={item.id} withBorder radius="md" p="md">
+              {item.screenshots[0] ? (
+                <Card.Section>
+                  <Image src={client.fileUrl(item.id, item.screenshots[0], "480x320")} h={170} alt="" />
+                </Card.Section>
+              ) : (
+                <Card.Section>
+                  <Box
+                    h={170}
+                    bg="var(--mantine-color-default-hover)"
+                    style={{ display: "grid", placeItems: "center" }}
+                  >
+                    <Code>{item.type === "customCss" ? "CSS" : "JSX"}</Code>
+                  </Box>
+                </Card.Section>
+              )}
+              <Stack gap="xs" mt="md">
+                <Group justify="space-between">
+                  <Text size="xs" c="dimmed">
+                    {t("author", { name: item.authorName })}
+                  </Text>
+                  <Text size="sm" c="dimmed">
+                    <IconThumbUp size={13} /> {item.upvotes} · <IconThumbDown size={13} /> {item.downvotes}
+                  </Text>
+                </Group>
+                <Badge color={item.widgetSchema === expectedSchema ? "green" : "red"} variant="light">
+                  {item.widgetSchema}
+                </Badge>
+                <Group gap="xs">
+                  {item.outdated && <Badge color="yellow">Outdated</Badge>}
+                  {item.reportCount > 0 && (
+                    <Badge color="red">
+                      {item.reportCount} report{item.reportCount === 1 ? "" : "s"}
+                    </Badge>
+                  )}
+                </Group>
+                <Text fw={700} lineClamp={1}>
+                  {item.title}
+                </Text>
+                <Text size="sm" c="dimmed" lineClamp={2}>
+                  {item.description || t("noDescription")}
+                </Text>
+                <Button variant="light" onClick={() => setSelectedId(item.id)}>
+                  {type === "customCss" ? t("inspectCss") : t("inspect")}
+                </Button>
+              </Stack>
+            </Card>
+          ))}
+        </SimpleGrid>
+      ) : (
+        <Text c="dimmed" ta="center" py="xl">
+          {type === "customCss" ? t("emptyCss") : t("empty")}
+        </Text>
+      )}
+      {(list.data?.totalPages ?? 0) > 1 && (
+        <Pagination total={list.data?.totalPages ?? 1} value={page} onChange={setPage} mx="auto" />
+      )}
+
+      <Modal
+        opened={selectedId !== null}
+        onClose={() => setSelectedId(null)}
+        title={detail.data?.title ?? t("details")}
+        size="xl"
+      >
+        {detail.isPending ? (
+          <Skeleton h={400} />
+        ) : detail.isError || !detail.data ? (
+          <Alert color="red">{detail.error instanceof Error ? detail.error.message : t("loadError")}</Alert>
+        ) : (
+          <Stack>
+            <Text>{detail.data.description}</Text>
+            <Text size="sm" c="dimmed">
+              {t("author", { name: detail.data.authorName })}
+            </Text>
+            {detail.data.outdated && (
+              <Alert color="yellow" icon={<IconAlertTriangle size={18} />}>
+                The author marked this submission as outdated. Review it carefully before importing.
+              </Alert>
+            )}
+            {detail.data.reportCount > 0 && (
+              <Alert color="red" icon={<IconAlertTriangle size={18} />}>
+                This submission has {detail.data.reportCount} open community report
+                {detail.data.reportCount === 1 ? "" : "s"}. It remains installable, but you should review its content
+                first.
+              </Alert>
+            )}
+            {detail.data.screenshots.length > 0 && (
+              <SimpleGrid cols={{ base: 1, sm: 2 }}>
+                {detail.data.screenshots.map((file, index) => (
+                  <Image
+                    key={file}
+                    src={client.fileUrl(detail.data.id, file, "960x640")}
+                    radius="md"
+                    alt={`${detail.data.title} screenshot ${index + 1}`}
+                  />
+                ))}
+              </SimpleGrid>
+            )}
+            {type === "customWidget" && detailValidation?.success && typeof detailValidation.data !== "string" && (
+              <CapabilitySummary widget={detailValidation.data} />
+            )}
+            {detailValidation && !detailValidation.success && (
+              <Alert color="red" icon={<IconAlertTriangle size={18} />}>
+                {t("installErrorDescription")} {detailValidation.error}
+              </Alert>
+            )}
+            {detailValidation?.success && !detailCompatible && (
+              <Alert color="red" icon={<IconAlertTriangle size={18} />}>
+                {t("installErrorDescription")}
+              </Alert>
+            )}
+            <Code block mah={360} style={{ overflow: "auto", whiteSpace: "pre" }}>
+              {detail.data.content}
+            </Code>
+            <Group justify="space-between">
+              <Group gap="xs">
+                <Button
+                  variant="default"
+                  leftSection={<IconDownload size={16} />}
+                  onClick={() => downloadWorkshopSubmission(detail.data)}
+                >
+                  {t("export")}
+                </Button>
+                <Button
+                  variant="subtle"
+                  leftSection={<IconThumbUp size={16} />}
+                  loading={vote.isPending && vote.variables?.value === 1}
+                  disabled={!user || vote.isPending}
+                  onClick={() => vote.mutate({ submission: detail.data.id, value: 1 })}
+                >
+                  {detail.data.upvotes}
+                </Button>
+                <Button
+                  variant="subtle"
+                  leftSection={<IconThumbDown size={16} />}
+                  loading={vote.isPending && vote.variables?.value === -1}
+                  disabled={!user || vote.isPending}
+                  onClick={() => vote.mutate({ submission: detail.data.id, value: -1 })}
+                >
+                  {detail.data.downvotes}
+                </Button>
+                <Button
+                  variant="subtle"
+                  color="red"
+                  leftSection={<IconFlag size={16} />}
+                  disabled={!user}
+                  onClick={reportControls.open}
+                >
+                  {t("report")}
+                </Button>
+              </Group>
+              {onInstall && (
+                <Button
+                  loading={install.isPending}
+                  disabled={!detailCompatible}
+                  onClick={() =>
+                    detailValidation?.success &&
+                    typeof detailValidation.data !== "string" &&
+                    install.mutate(detailValidation.data)
+                  }
+                >
+                  {t("install")}
+                </Button>
+              )}
+              {onUseCss && (
+                <Button
+                  disabled={!detailCompatible}
+                  onClick={() =>
+                    detailValidation?.success &&
+                    typeof detailValidation.data === "string" &&
+                    setCssAwaitingConfirmation(detailValidation.data)
+                  }
+                >
+                  {t("useCss")}
+                </Button>
+              )}
+            </Group>
+            {!user && (
+              <Text size="xs" c="dimmed">
+                {t("signInHint")}
+              </Text>
+            )}
+            {vote.error && <Alert color="red">{vote.error.message || t("voteError")}</Alert>}
+            {install.error && <Alert color="red">{install.error.message}</Alert>}
+            {useCss.error && <Alert color="red">{useCss.error.message}</Alert>}
+          </Stack>
+        )}
+      </Modal>
+
+      <Modal opened={reportOpened} onClose={reportControls.close} title={t("reportTitle")}>
+        <Stack>
+          <Select
+            label={t("reportReason")}
+            value={reportCategory}
+            onChange={(value) => setReportCategory((value as WorkshopReport["category"]) ?? "other")}
+            data={["malicious", "spam", "copyright", "inappropriate", "other"]}
+            allowDeselect={false}
+          />
+          <Textarea
+            label={t("reportExplanation")}
+            minRows={4}
+            value={reportExplanation}
+            onChange={(event) => setReportExplanation(event.currentTarget.value)}
+          />
+          {report.error && <Alert color="red">{report.error.message}</Alert>}
+          <Button loading={report.isPending} disabled={reportExplanation.trim().length < 3} onClick={submitReport}>
+            {t("reportSend")}
+          </Button>
+        </Stack>
+      </Modal>
+      <Modal
+        opened={cssAwaitingConfirmation !== null}
+        onClose={() => setCssAwaitingConfirmation(null)}
+        title="Import this Custom CSS?"
+      >
+        <Stack>
+          <Alert color="yellow" icon={<IconAlertTriangle size={18} />}>
+            Review community CSS before applying it. Importing replaces the current Custom CSS editor value, but nothing
+            is saved until you save the board settings.
+          </Alert>
+          <Group justify="flex-end">
+            <Button variant="default" onClick={() => setCssAwaitingConfirmation(null)}>
+              Cancel
+            </Button>
+            <Button
+              loading={useCss.isPending}
+              onClick={() => {
+                if (cssAwaitingConfirmation !== null) useCss.mutate(cssAwaitingConfirmation);
+              }}
+            >
+              Import CSS
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </Stack>
+  );
+}
+
+function CapabilitySummary({ widget }: { widget: HomarrCustomWidgetV2 }) {
+  const t = useScopedI18n("workshop");
+  return (
+    <SimpleGrid cols={{ base: 1, sm: 2 }}>
+      <Card withBorder p="sm">
+        <Text fw={600} size="sm" mb="xs">
+          {t("sources")}
+        </Text>
+        <Stack gap={6}>
+          {Object.entries(widget.sources).map(([sourceId, source]) => (
+            <Box key={sourceId}>
+              <Text size="sm" fw={500}>
+                {source.name}
+              </Text>
+              <Group gap={4}>
+                <Badge size="xs" variant="light">
+                  {new URL(source.baseUrl).origin}
+                </Badge>
+                <Badge size="xs" variant="outline">
+                  {source.networkScope}
+                </Badge>
+                <Badge size="xs" variant="outline">
+                  {typeof source.auth === "string" ? source.auth : source.auth.type}
+                </Badge>
+              </Group>
+            </Box>
+          ))}
+        </Stack>
+      </Card>
+      <Card withBorder p="sm">
+        <Text fw={600} size="sm" mb="xs">
+          {t("requests")}
+        </Text>
+        {Object.keys(widget.requests).length === 0 ? (
+          <Text size="xs" c="dimmed">
+            {t("noRequests")}
+          </Text>
+        ) : (
+          <Stack gap={6}>
+            {Object.entries(widget.requests).map(([requestId, request]) => (
+              <Group key={requestId} justify="space-between" wrap="nowrap">
+                <Text size="xs" ff="monospace" truncate>
+                  {requestId}
+                </Text>
+                <Group gap={4} wrap="nowrap">
+                  <Badge size="xs">{request.kind}</Badge>
+                  <Badge size="xs" variant="light">
+                    {request.method}
+                  </Badge>
+                  <Badge size="xs" variant="outline">
+                    {request.permission}
+                  </Badge>
+                </Group>
+              </Group>
+            ))}
+          </Stack>
+        )}
+      </Card>
+    </SimpleGrid>
+  );
+}
diff --git a/apps/nextjs/src/components/workshop/workshop-client.ts b/apps/nextjs/src/components/workshop/workshop-client.ts
new file mode 100644
index 000000000..4d68e542f
--- /dev/null
+++ b/apps/nextjs/src/components/workshop/workshop-client.ts
@@ -0,0 +1,14 @@
+import { WorkshopBackend } from "@homarr/workshop/backend";
+import { WORKSHOP_API_URL } from "@homarr/workshop/schema";
+
+let browserClient: WorkshopBackend | undefined;
+
+export function createWorkshopClient() {
+  if (typeof document === "undefined") return new WorkshopBackend(WORKSHOP_API_URL);
+  if (browserClient) return browserClient;
+
+  const runtimeUrl = document.querySelector<HTMLMetaElement>('meta[name="homarr-workshop-api-url"]')?.content;
+
+  browserClient = new WorkshopBackend(runtimeUrl || WORKSHOP_API_URL);
+  return browserClient;
+}
diff --git a/apps/nextjs/src/components/workshop/workshop-css-import-button.tsx b/apps/nextjs/src/components/workshop/workshop-css-import-button.tsx
new file mode 100644
index 000000000..89ab01c59
--- /dev/null
+++ b/apps/nextjs/src/components/workshop/workshop-css-import-button.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { useState } from "react";
+import { Button, Modal } from "@mantine/core";
+import { IconDownload } from "@tabler/icons-react";
+
+import { WorkshopBrowser } from "./workshop-browser";
+
+export function WorkshopCssImportButton({ onImport }: { onImport(css: string): void }) {
+  const [opened, setOpened] = useState(false);
+
+  return (
+    <>
+      <Button type="button" variant="light" leftSection={<IconDownload size={16} />} onClick={() => setOpened(true)}>
+        Import from Workshop
+      </Button>
+      <Modal opened={opened} onClose={() => setOpened(false)} title="Import Custom CSS" size="xl">
+        <WorkshopBrowser
+          type="customCss"
+          onUseCss={(css) => {
+            onImport(css);
+            setOpened(false);
+          }}
+        />
+      </Modal>
+    </>
+  );
+}
diff --git a/apps/nextjs/src/components/workshop/workshop-install-button.tsx b/apps/nextjs/src/components/workshop/workshop-install-button.tsx
new file mode 100644
index 000000000..d9f1813e6
--- /dev/null
+++ b/apps/nextjs/src/components/workshop/workshop-install-button.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { Button, getDefaultZIndex, Modal, useModalsStack } from "@mantine/core";
+import { IconBuildingStore } from "@tabler/icons-react";
+
+import type { HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { CustomWidgetImportDialog } from "~/components/custom-widgets/custom-widget-import-dialog";
+import { WorkshopBrowser } from "./workshop-browser";
+
+interface WorkshopInstallButtonProps {
+  children?: ReactNode;
+  fullWidth?: boolean;
+}
+
+export function WorkshopInstallButton({ children, fullWidth }: WorkshopInstallButtonProps = {}) {
+  const t = useScopedI18n("workshop");
+  const stack = useModalsStack(["workshop", "review"]);
+  const [pendingWidget, setPendingWidget] = useState<HomarrCustomWidgetV2 | null>(null);
+  const zIndex = getDefaultZIndex("modal") + 10;
+
+  const closeReview = () => {
+    stack.close("review");
+    setPendingWidget(null);
+  };
+
+  return (
+    <>
+      <Button
+        variant="default"
+        leftSection={<IconBuildingStore size={16} />}
+        onClick={() => stack.open("workshop")}
+        fullWidth={fullWidth}
+      >
+        {children ?? t("title")}
+      </Button>
+      <Modal.Stack>
+        <Modal {...stack.register("workshop")} title={t("installDialog")} size="90%" zIndex={zIndex}>
+          <WorkshopBrowser
+            onInstall={async (widget) => {
+              setPendingWidget(widget);
+              stack.open("review");
+            }}
+          />
+        </Modal>
+        <CustomWidgetImportDialog
+          {...stack.register("review")}
+          widget={pendingWidget}
+          zIndex={zIndex + 1}
+          onClose={closeReview}
+          onImported={() => {
+            stack.closeAll();
+            setPendingWidget(null);
+          }}
+        />
+      </Modal.Stack>
+    </>
+  );
+}
diff --git a/apps/nextjs/src/components/workshop/workshop-installer.tsx b/apps/nextjs/src/components/workshop/workshop-installer.tsx
new file mode 100644
index 000000000..2756dbe59
--- /dev/null
+++ b/apps/nextjs/src/components/workshop/workshop-installer.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useDisclosure } from "@mantine/hooks";
+
+import type { HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
+
+import { CustomWidgetImportDialog } from "~/components/custom-widgets/custom-widget-import-dialog";
+import { WorkshopBrowser } from "./workshop-browser";
+
+export function WorkshopInstaller() {
+  const router = useRouter();
+  const [pendingWidget, setPendingWidget] = useState<HomarrCustomWidgetV2 | null>(null);
+  const [reviewOpened, reviewControls] = useDisclosure(false);
+
+  const install = async (widget: HomarrCustomWidgetV2) => {
+    setPendingWidget(widget);
+    reviewControls.open();
+  };
+
+  return (
+    <>
+      <WorkshopBrowser onInstall={install} />
+      <CustomWidgetImportDialog
+        opened={reviewOpened}
+        widget={pendingWidget}
+        onClose={() => {
+          reviewControls.close();
+          setPendingWidget(null);
+        }}
+        onImported={(result) => router.push(`/manage/custom-widgets/edit/${result.id}`)}
+      />
+    </>
+  );
+}
diff --git a/apps/nextjs/src/components/workshop/workshop-publish-definition.spec.ts b/apps/nextjs/src/components/workshop/workshop-publish-definition.spec.ts
new file mode 100644
index 000000000..d6040c9da
--- /dev/null
+++ b/apps/nextjs/src/components/workshop/workshop-publish-definition.spec.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  getPrivateWorkshopSourceNames,
+  publishWorkshopDefinition,
+  serializeWorkshopDefinition,
+  workshopDefinitionChanged,
+} from "./workshop-publish-definition";
+
+const definition = {
+  name: "Status",
+  sources: {
+    public: { name: "Public API", networkScope: "public" },
+    private: { name: "Home server", networkScope: "private" },
+    local: { networkScope: "loopback" },
+  },
+};
+
+describe("Workshop publish definition inspection", () => {
+  it("reports every source URL that requires review", () => {
+    expect(getPrivateWorkshopSourceNames(definition)).toEqual(["Home server", "local"]);
+  });
+
+  it("detects an export that changed after inspection", () => {
+    expect(workshopDefinitionChanged(definition, definition)).toBe(false);
+    expect(workshopDefinitionChanged(definition, { ...definition, name: "Updated" })).toBe(true);
+  });
+
+  it("blocks publishing when the definition changes after inspection", async () => {
+    const publish = vi.fn(async () => undefined);
+    await expect(
+      publishWorkshopDefinition({
+        inspectedDefinition: definition,
+        refetchDefinition: async () => ({ ...definition, name: "Updated" }),
+        publish,
+      }),
+    ).resolves.toBe("changed");
+    expect(publish).not.toHaveBeenCalled();
+  });
+
+  it("publishes the same refreshed export that passed the change check", async () => {
+    const publish = vi.fn(async () => undefined);
+    await expect(
+      publishWorkshopDefinition({
+        inspectedDefinition: definition,
+        refetchDefinition: async () => definition,
+        publish,
+      }),
+    ).resolves.toBe("published");
+    expect(publish).toHaveBeenCalledWith(serializeWorkshopDefinition(definition));
+  });
+});
diff --git a/apps/nextjs/src/components/workshop/workshop-publish-definition.ts b/apps/nextjs/src/components/workshop/workshop-publish-definition.ts
new file mode 100644
index 000000000..b3aa9c9be
--- /dev/null
+++ b/apps/nextjs/src/components/workshop/workshop-publish-definition.ts
@@ -0,0 +1,33 @@
+interface PublishableWorkshopDefinition {
+  sources: Record<string, { name?: string; networkScope: string }>;
+}
+
+export const serializeWorkshopDefinition = (definition: unknown): string => {
+  const serialized = JSON.stringify(definition);
+  if (serialized === undefined) throw new Error("Workshop definition is not serializable");
+  return serialized;
+};
+
+export const workshopDefinitionChanged = (previous: unknown, current: unknown) =>
+  serializeWorkshopDefinition(previous) !== serializeWorkshopDefinition(current);
+
+export async function publishWorkshopDefinition({
+  inspectedDefinition,
+  refetchDefinition,
+  publish,
+}: {
+  inspectedDefinition: unknown;
+  refetchDefinition: () => Promise<unknown | undefined>;
+  publish: (content: string) => Promise<unknown>;
+}) {
+  const refreshedDefinition = await refetchDefinition();
+  if (refreshedDefinition === undefined) return "unavailable" as const;
+  if (workshopDefinitionChanged(inspectedDefinition, refreshedDefinition)) return "changed" as const;
+  await publish(serializeWorkshopDefinition(refreshedDefinition));
+  return "published" as const;
+}
+
+export const getPrivateWorkshopSourceNames = (definition: PublishableWorkshopDefinition | undefined) =>
+  Object.entries(definition?.sources ?? {}).flatMap(([sourceId, source]) =>
+    source.networkScope === "public" ? [] : [source.name ?? sourceId],
+  );
diff --git a/apps/nextjs/src/components/workshop/workshop-publish-modal.tsx b/apps/nextjs/src/components/workshop/workshop-publish-modal.tsx
new file mode 100644
index 000000000..26d094295
--- /dev/null
+++ b/apps/nextjs/src/components/workshop/workshop-publish-modal.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Alert, Button, Checkbox, FileInput, Group, Modal, Stack, Textarea, TextInput } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import { showErrorNotification } from "@homarr/notifications";
+import { useWorkshopCreateMutation } from "@homarr/workshop/backend";
+import type { WorkshopUser } from "@homarr/workshop/schema";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { createWorkshopClient } from "./workshop-client";
+import {
+  getPrivateWorkshopSourceNames,
+  publishWorkshopDefinition,
+  serializeWorkshopDefinition,
+} from "./workshop-publish-definition";
+
+export function WorkshopPublishModal({
+  opened,
+  onClose,
+  widget,
+}: {
+  opened: boolean;
+  onClose(): void;
+  widget: { id: string; name: string };
+}) {
+  const t = useScopedI18n("workshop");
+  const client = useMemo(createWorkshopClient, []);
+  const [user, setUser] = useState<WorkshopUser | null>(null);
+  const [title, setTitle] = useState(widget.name);
+  const [description, setDescription] = useState("");
+  const [screenshots, setScreenshots] = useState<File[]>([]);
+  const createSubmission = useWorkshopCreateMutation(client);
+  const [error, setError] = useState<string | null>(null);
+  const [published, setPublished] = useState(false);
+  const [sourceUrlsReviewed, setSourceUrlsReviewed] = useState(false);
+  const definition = clientApi.customWidget.export.useQuery({ id: widget.id }, { enabled: opened });
+  const privateSourceNames = getPrivateWorkshopSourceNames(definition.data);
+  const definitionFingerprint = definition.data ? serializeWorkshopDefinition(definition.data) : null;
+
+  useEffect(() => {
+    const unsubscribe = client.subscribeToAuth(setUser);
+    void client.refreshAuth().then(setUser);
+    return unsubscribe;
+  }, [client]);
+  useEffect(() => {
+    if (!opened) return;
+    setTitle(widget.name);
+    setDescription("");
+    setScreenshots([]);
+    setError(null);
+    setPublished(false);
+    setSourceUrlsReviewed(false);
+  }, [opened, widget.name]);
+  useEffect(() => setSourceUrlsReviewed(false), [definitionFingerprint]);
+
+  const publish = async () => {
+    setError(null);
+    try {
+      if (!definition.data) throw new Error(t("publish.error"));
+      const inspectedDefinition = definition.data;
+      const result = await publishWorkshopDefinition({
+        inspectedDefinition,
+        refetchDefinition: async () => (await definition.refetch()).data,
+        publish: (content) =>
+          createSubmission.mutateAsync({
+            input: {
+              type: "customWidget",
+              title,
+              description,
+              content,
+            },
+            screenshots,
+          }),
+      });
+      if (result === "unavailable") throw new Error(t("publish.error"));
+      if (result === "changed") {
+        setSourceUrlsReviewed(false);
+        setError(t("publish.definitionChanged"));
+        return;
+      }
+      setPublished(true);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : t("publish.error"));
+    }
+  };
+
+  return (
+    <Modal opened={opened} onClose={onClose} title={t("publish.title")} size="lg">
+      <Stack>
+        {published ? (
+          <Alert color="green">{t("publish.success")}</Alert>
+        ) : (
+          <>
+            {!user && (
+              <Alert color="blue">
+                <Group justify="space-between">
+                  <span>{t("publish.signInHint")}</span>
+                  <Button
+                    size="xs"
+                    onClick={() =>
+                      void client
+                        .signInWithGitHub()
+                        .then(setUser)
+                        .catch((cause: Error) => {
+                          setError(cause.message);
+                          showErrorNotification({ title: t("signIn"), message: cause.message });
+                        })
+                    }
+                  >
+                    {t("signIn")}
+                  </Button>
+                </Group>
+              </Alert>
+            )}
+            <TextInput
+              label={t("publish.titleField")}
+              value={title}
+              onChange={(event) => setTitle(event.currentTarget.value)}
+              required
+            />
+            <Textarea
+              label={t("publish.descriptionField")}
+              value={description}
+              onChange={(event) => setDescription(event.currentTarget.value)}
+              minRows={3}
+            />
+            <FileInput
+              label={t("publish.screenshots")}
+              description={t("publish.screenshotsDescription")}
+              accept="image/png,image/jpeg,image/webp"
+              multiple
+              value={screenshots}
+              onChange={setScreenshots}
+            />
+            {privateSourceNames.length > 0 && (
+              <Alert color="yellow">
+                {t("publish.privateSourceWarning", {
+                  sources: privateSourceNames.join(", "),
+                })}
+                <Checkbox
+                  mt="sm"
+                  checked={sourceUrlsReviewed}
+                  onChange={(event) => setSourceUrlsReviewed(event.currentTarget.checked)}
+                  label={t("publish.privateSourceConfirmation")}
+                />
+              </Alert>
+            )}
+            {definition.isError && <Alert color="red">{t("publish.error")}</Alert>}
+            {error && <Alert color="red">{error}</Alert>}
+            <Button
+              loading={createSubmission.isPending || definition.isFetching}
+              disabled={
+                !user ||
+                !definition.data ||
+                definition.isError ||
+                title.trim().length < 3 ||
+                (privateSourceNames.length > 0 && !sourceUrlsReviewed)
+              }
+              onClick={() => void publish()}
+            >
+              {t("publish.action")}
+            </Button>
+          </>
+        )}
+      </Stack>
+    </Modal>
+  );
+}
diff --git a/apps/nextjs/src/env.ts b/apps/nextjs/src/env.ts
index d285a8393..1ba8efaed 100644
--- a/apps/nextjs/src/env.ts
+++ b/apps/nextjs/src/env.ts
@@ -1,10 +1,29 @@
+import { z } from "zod/v4";
+
 import { createBooleanSchema, createEnv } from "@homarr/core/infrastructure/env";
+import { normalizeHttpUrl } from "@homarr/workshop/schema";
+
+const publicHttpUrl = (variableName: string) =>
+  z.string().transform((value, context) => {
+    try {
+      return normalizeHttpUrl(value, variableName);
+    } catch (error) {
+      context.addIssue({
+        code: "custom",
+        message: error instanceof Error ? error.message : `${variableName} is invalid`,
+      });
+      return z.NEVER;
+    }
+  });
 
 export const env = createEnv({
   server: {
     UNSAFE_ENABLE_MOCK_INTEGRATION: createBooleanSchema(false),
     DEMO_MODE: createBooleanSchema(false),
     DEMO_READ_ONLY: createBooleanSchema(true),
+    HOMARR_WEBSITE_URL: publicHttpUrl("HOMARR_WEBSITE_URL").default("https://homarr.dev"),
+    WORKSHOP_API_URL: publicHttpUrl("WORKSHOP_API_URL").optional(),
+    WORKSHOP_WEB_URL: publicHttpUrl("WORKSHOP_WEB_URL").optional(),
   },
   experimental__runtimeEnv: process.env,
 });
diff --git a/apps/nextjs/src/instrumentation-noop.ts b/apps/nextjs/src/instrumentation-noop.ts
new file mode 100644
index 000000000..fee327293
--- /dev/null
+++ b/apps/nextjs/src/instrumentation-noop.ts
@@ -0,0 +1,4 @@
+// Development runs background services as separate processes. The aliases in
+// next.config.ts keep production-only instrumentation imports out of the graph.
+export const instrumentationNoop = true;
+export const startupPromise = Promise.resolve();
diff --git a/apps/nextjs/src/instrumentation.spec.ts b/apps/nextjs/src/instrumentation.spec.ts
new file mode 100644
index 000000000..e987ccbee
--- /dev/null
+++ b/apps/nextjs/src/instrumentation.spec.ts
@@ -0,0 +1,125 @@
+// @vitest-environment node
+
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+const registerAsync = async (nodeEnv: string, nextRuntime: string) => {
+  const loggerLoaded = vi.fn();
+  const tasksStarted = vi.fn();
+  const websocketStarted = vi.fn();
+  vi.stubEnv("NODE_ENV", nodeEnv);
+  vi.stubEnv("NEXT_RUNTIME", nextRuntime);
+  vi.doMock("@homarr/core/infrastructure/logs", () => {
+    loggerLoaded();
+    return { createLogger: () => ({ error: vi.fn() }) };
+  });
+  vi.doMock("@homarr/tasks", () => {
+    tasksStarted();
+    return { startupPromise: Promise.resolve() };
+  });
+  vi.doMock("@homarr/websocket", () => {
+    websocketStarted();
+    return { startupPromise: Promise.resolve() };
+  });
+
+  const { register } = await import("./instrumentation");
+  await register();
+  if (nodeEnv === "production" && nextRuntime === "nodejs") {
+    await vi.waitFor(() => {
+      expect(tasksStarted).toHaveBeenCalledOnce();
+      expect(websocketStarted).toHaveBeenCalledOnce();
+    });
+  }
+  return { loggerLoaded, tasksStarted, websocketStarted };
+};
+
+describe("Next instrumentation", () => {
+  beforeEach(() => {
+    vi.resetModules();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.doUnmock("@homarr/core/infrastructure/logs");
+    vi.doUnmock("@homarr/tasks");
+    vi.doUnmock("@homarr/websocket");
+    vi.unstubAllEnvs();
+  });
+
+  test("embeds background services in the production Node runtime", async () => {
+    const { loggerLoaded, tasksStarted, websocketStarted } = await registerAsync("production", "nodejs");
+
+    expect(loggerLoaded).toHaveBeenCalledOnce();
+    expect(tasksStarted).toHaveBeenCalledOnce();
+    expect(websocketStarted).toHaveBeenCalledOnce();
+  });
+
+  test("does not embed background services in the development server", async () => {
+    const { loggerLoaded, tasksStarted, websocketStarted } = await registerAsync("development", "nodejs");
+
+    expect(loggerLoaded).not.toHaveBeenCalled();
+    expect(tasksStarted).not.toHaveBeenCalled();
+    expect(websocketStarted).not.toHaveBeenCalled();
+  });
+
+  test("does not embed Node services in the edge runtime", async () => {
+    const { loggerLoaded, tasksStarted, websocketStarted } = await registerAsync("production", "edge");
+
+    expect(loggerLoaded).not.toHaveBeenCalled();
+    expect(tasksStarted).not.toHaveBeenCalled();
+    expect(websocketStarted).not.toHaveBeenCalled();
+  });
+
+  test("does not block Next readiness on slow cron run-on-start hooks", async () => {
+    const neverFinishes = new Promise<void>(() => undefined);
+    vi.stubEnv("NODE_ENV", "production");
+    vi.stubEnv("NEXT_RUNTIME", "nodejs");
+    vi.doMock("@homarr/core/infrastructure/logs", () => ({ createLogger: () => ({ error: vi.fn() }) }));
+    vi.doMock("@homarr/tasks", () => ({ startupPromise: neverFinishes }));
+    vi.doMock("@homarr/websocket", () => ({ startupPromise: Promise.resolve() }));
+
+    const { register } = await import("./instrumentation");
+
+    await expect(register()).resolves.toBeUndefined();
+  });
+
+  test("terminates a ready Node process when cron startup later fails", async () => {
+    const websocketStarted = vi.fn();
+    const errorLogged = vi.fn();
+    let rejectTasks!: (error: Error) => void;
+    const exit = vi.spyOn(process, "exit").mockImplementation(() => undefined as never);
+    vi.stubEnv("NODE_ENV", "production");
+    vi.stubEnv("NEXT_RUNTIME", "nodejs");
+    vi.doMock("@homarr/core/infrastructure/logs", () => ({
+      createLogger: () => ({ error: errorLogged }),
+    }));
+    vi.doMock("@homarr/tasks", () => ({
+      startupPromise: new Promise<void>((_resolve, reject) => {
+        rejectTasks = reject;
+      }),
+    }));
+    vi.doMock("@homarr/websocket", () => {
+      websocketStarted();
+      return { startupPromise: Promise.resolve() };
+    });
+
+    const { register } = await import("./instrumentation");
+
+    await expect(register()).resolves.toBeUndefined();
+    rejectTasks(new Error("task startup failed"));
+    await vi.waitFor(() => expect(exit).toHaveBeenCalledWith(1));
+    expect(websocketStarted).toHaveBeenCalledOnce();
+    expect(errorLogged).toHaveBeenCalledOnce();
+  });
+
+  test("fails readiness when the embedded WebSocket listener cannot start", async () => {
+    vi.stubEnv("NODE_ENV", "production");
+    vi.stubEnv("NEXT_RUNTIME", "nodejs");
+    vi.doMock("@homarr/core/infrastructure/logs", () => ({ createLogger: () => ({ error: vi.fn() }) }));
+    vi.doMock("@homarr/tasks", () => ({ startupPromise: Promise.resolve() }));
+    vi.doMock("@homarr/websocket", () => ({ startupPromise: Promise.reject(new Error("port unavailable")) }));
+
+    const { register } = await import("./instrumentation");
+
+    await expect(register()).rejects.toThrow("Failed to start embedded websocket service");
+  });
+});
diff --git a/apps/nextjs/src/instrumentation.ts b/apps/nextjs/src/instrumentation.ts
index 19a2865b7..e1755a1b4 100644
--- a/apps/nextjs/src/instrumentation.ts
+++ b/apps/nextjs/src/instrumentation.ts
@@ -1,6 +1,38 @@
 export async function register() {
-  if (process.env.NEXT_RUNTIME === "nodejs") {
-    await import("@homarr/tasks");
-    await import("@homarr/websocket");
-  }
+  if (process.env.NEXT_RUNTIME !== "nodejs") return;
+  if (process.env.NODE_ENV !== "production") return;
+
+  const { createLogger } = await import("@homarr/core/infrastructure/logs");
+  const logger = createLogger({ module: "instrumentation" });
+
+  const startTasksAsync = async () => {
+    try {
+      const tasks = await import("@homarr/tasks");
+      // Cron run-on-start hooks can perform slow external work. Keep dashboard
+      // readiness independent, but never leave the process permanently degraded.
+      void tasks.startupPromise.catch((cause: unknown) => {
+        logger.error(new Error("Failed to start embedded tasks service", { cause }));
+        process.exit(1);
+      });
+    } catch (cause) {
+      const error = new Error("Failed to load embedded tasks service", { cause });
+      logger.error(error);
+      throw error;
+    }
+  };
+
+  const startWebsocketAsync = async () => {
+    try {
+      const websocket = await import("@homarr/websocket");
+      // Listening is a bounded local readiness condition and prevents Next from
+      // becoming healthy with subscriptions unavailable.
+      await websocket.startupPromise;
+    } catch (cause) {
+      const error = new Error("Failed to start embedded websocket service", { cause });
+      logger.error(error);
+      throw error;
+    }
+  };
+
+  await Promise.all([startTasksAsync(), startWebsocketAsync()]);
 }
diff --git a/apps/nextjs/src/proxy.spec.ts b/apps/nextjs/src/proxy.spec.ts
new file mode 100644
index 000000000..2b9101bde
--- /dev/null
+++ b/apps/nextjs/src/proxy.spec.ts
@@ -0,0 +1,122 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { NextRequest, NextResponse } from "next/server";
+
+import { localeCookieKey } from "@homarr/definitions";
+
+const mocks = vi.hoisted(() => ({
+  getOnboardingStep: vi.fn(),
+  getDefaultLocale: vi.fn(),
+  createI18nMiddleware: vi.fn(),
+}));
+
+vi.mock("@homarr/db/proxy-reader", () => ({
+  getDefaultLocaleForProxyAsync: mocks.getDefaultLocale,
+  getOnboardingStepForProxyAsync: mocks.getOnboardingStep,
+}));
+
+vi.mock("@homarr/translation/middleware", () => ({
+  createI18nMiddleware: mocks.createI18nMiddleware,
+}));
+
+const loadProxy = async () => {
+  vi.resetModules();
+  return import("./proxy");
+};
+
+const createRequest = (pathname: string, locale?: string) => {
+  const request = new NextRequest(`http://localhost${pathname}`);
+  if (locale) request.cookies.set(localeCookieKey, locale);
+  return request;
+};
+
+describe("locale and onboarding proxy", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.getOnboardingStep.mockResolvedValue("finish");
+    mocks.getDefaultLocale.mockResolvedValue("en");
+    mocks.createI18nMiddleware.mockImplementation((defaultLocale: string) => (request: NextRequest) => {
+      request.headers.set("x-test-default-locale", defaultLocale);
+      return NextResponse.next();
+    });
+  });
+
+  it("redirects unfinished onboarding to /init", async () => {
+    mocks.getOnboardingStep.mockResolvedValue("integrations");
+    const { proxy } = await loadProxy();
+
+    const response = await proxy(createRequest("/en/dashboard"));
+
+    expect(response.status).toBe(307);
+    expect(response.headers.get("location")).toBe("http://localhost/init");
+    expect(mocks.getOnboardingStep).toHaveBeenCalledOnce();
+  });
+
+  it("allows /init while onboarding is unfinished", async () => {
+    mocks.getOnboardingStep.mockResolvedValue("start");
+    const { proxy } = await loadProxy();
+
+    const response = await proxy(createRequest("/en/init"));
+
+    expect(response.status).toBe(200);
+    expect(mocks.getOnboardingStep).not.toHaveBeenCalled();
+    expect(mocks.getDefaultLocale).toHaveBeenCalledOnce();
+  });
+
+  it("uses the configured default locale for a missing or invalid locale cookie", async () => {
+    mocks.getDefaultLocale.mockResolvedValue("de");
+    const { proxy } = await loadProxy();
+
+    await proxy(createRequest("/en/dashboard", "not-a-locale"));
+
+    expect(mocks.getDefaultLocale).toHaveBeenCalledOnce();
+    expect(mocks.createI18nMiddleware).toHaveBeenCalledWith("de");
+  });
+
+  it("keeps a valid locale cookie and does not query the configured default", async () => {
+    const { proxy } = await loadProxy();
+
+    const response = await proxy(createRequest("/fr/dashboard", "fr"));
+
+    expect(response.status).toBe(200);
+    expect(mocks.getDefaultLocale).not.toHaveBeenCalled();
+    expect(mocks.createI18nMiddleware).toHaveBeenCalledWith("en");
+  });
+
+  it("deduplicates concurrent cold-start database reads", async () => {
+    let finishOnboarding!: (step: string) => void;
+    let finishLocale!: (locale: string) => void;
+    mocks.getOnboardingStep.mockImplementation(
+      () =>
+        new Promise<string>((resolve) => {
+          finishOnboarding = resolve;
+        }),
+    );
+    mocks.getDefaultLocale.mockImplementation(
+      () =>
+        new Promise<string>((resolve) => {
+          finishLocale = resolve;
+        }),
+    );
+    const { proxy } = await loadProxy();
+    const responses = Array.from({ length: 50 }, () => proxy(createRequest("/en/dashboard", "not-a-locale")));
+
+    await vi.waitFor(() => expect(mocks.getOnboardingStep).toHaveBeenCalledOnce());
+    finishOnboarding("finish");
+    await vi.waitFor(() => expect(mocks.getDefaultLocale).toHaveBeenCalledOnce());
+    finishLocale("de");
+
+    await expect(Promise.all(responses)).resolves.toHaveLength(50);
+    expect(mocks.getOnboardingStep).toHaveBeenCalledOnce();
+    expect(mocks.getDefaultLocale).toHaveBeenCalledOnce();
+  });
+
+  it("clears failed in-flight reads so the next request can recover", async () => {
+    mocks.getOnboardingStep.mockRejectedValueOnce(new Error("temporary database failure")).mockResolvedValue("finish");
+    const { proxy } = await loadProxy();
+
+    await expect(proxy(createRequest("/en/dashboard", "en"))).rejects.toThrow("temporary database failure");
+    await expect(proxy(createRequest("/en/dashboard", "en"))).resolves.toMatchObject({ status: 200 });
+
+    expect(mocks.getOnboardingStep).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/apps/nextjs/src/proxy.ts b/apps/nextjs/src/proxy.ts
index 42553bc2c..1bf12ba49 100644
--- a/apps/nextjs/src/proxy.ts
+++ b/apps/nextjs/src/proxy.ts
@@ -1,21 +1,51 @@
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 
-import { api } from "@homarr/api/server";
-import { localeCookieKey } from "@homarr/definitions";
-import type { SupportedLanguage } from "@homarr/translation";
-import { supportedLanguages } from "@homarr/translation";
+import { getDefaultLocaleForProxyAsync, getOnboardingStepForProxyAsync } from "@homarr/db/proxy-reader";
+import { localeCookieKey } from "@homarr/definitions/cookie";
+import type { SupportedLanguage } from "@homarr/translation/languages";
+import { supportedLanguages } from "@homarr/translation/languages";
 import { createI18nMiddleware } from "@homarr/translation/middleware";
 
 let isOnboardingFinished = false;
+let onboardingStepPromise: Promise<string> | null = null;
+let defaultLocalePromise: Promise<string> | null = null;
+
+const getOnboardingStepDedupedAsync = () => {
+  onboardingStepPromise ??= getOnboardingStepForProxyAsync().then(
+    (step) => {
+      onboardingStepPromise = null;
+      return step;
+    },
+    (error: unknown) => {
+      onboardingStepPromise = null;
+      throw error;
+    },
+  );
+  return onboardingStepPromise;
+};
+
+const getDefaultLocaleDedupedAsync = () => {
+  defaultLocalePromise ??= getDefaultLocaleForProxyAsync().then(
+    (locale) => {
+      defaultLocalePromise = null;
+      return locale;
+    },
+    (error: unknown) => {
+      defaultLocalePromise = null;
+      throw error;
+    },
+  );
+  return defaultLocalePromise;
+};
 
 export async function proxy(request: NextRequest) {
   // Redirect to onboarding if it's not finished yet
   const pathname = request.nextUrl.pathname;
 
   if (!isOnboardingFinished && !pathname.endsWith("/init")) {
-    const currentOnboardingStep = await api.onboard.currentStep();
-    if (currentOnboardingStep.current !== "finish") {
+    const currentOnboardingStep = await getOnboardingStepDedupedAsync();
+    if (currentOnboardingStep !== "finish") {
       return NextResponse.redirect(new URL("/init", request.url));
     }
 
@@ -26,7 +56,10 @@ export async function proxy(request: NextRequest) {
   const currentLocale = request.cookies.get(localeCookieKey)?.value;
   let defaultLocale: SupportedLanguage = "en";
   if (!currentLocale || !supportedLanguages.includes(currentLocale as SupportedLanguage)) {
-    defaultLocale = await api.serverSettings.getCulture().then((culture) => culture.defaultLocale);
+    const configuredLocale = await getDefaultLocaleDedupedAsync();
+    if (supportedLanguages.includes(configuredLocale as SupportedLanguage)) {
+      defaultLocale = configuredLocale as SupportedLanguage;
+    }
   }
 
   // We don't want to fallback to accept-language header so we clear it
diff --git a/apps/nextjs/src/styles/gridstack.scss b/apps/nextjs/src/styles/gridstack.scss
deleted file mode 100644
index 1542b0282..000000000
--- a/apps/nextjs/src/styles/gridstack.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-@import "@homarr/gridstack/dist/gridstack.min.css";
-
-:root {
-  --gridstack-column-count: 12;
-  --gridstack-row-count: 1;
-  --gridstack-cell-size: 0;
-}
-
-.ui-resizable-handle {
-  // Override default z-index of 100 to prevent it from being on top of the header.
-  // See https://github.com/homarr-labs/homarr/issues/1999
-  z-index: 1 !important;
-}
-
-.grid-stack-placeholder > .placeholder-content {
-  background-color: rgb(248, 249, 250) !important;
-  border-radius: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-@media (prefers-color-scheme: dark) {
-  .grid-stack-placeholder > .placeholder-content {
-    background-color: rgba(255, 255, 255, 0.05) !important;
-  }
-}
-
-// Define min size for gridstack items
-.grid-stack > .grid-stack-item {
-  min-width: calc(100% / var(--gridstack-column-count));
-  min-height: calc(100% / var(--gridstack-row-count));
-}
-
-.grid-stack > .grid-stack-item.ui-draggable-dragging {
-  min-width: calc(var(--gridstack-cell-size) * 1px) !important;
-  min-height: calc(var(--gridstack-cell-size) * 1px) !important;
-}
-
-// Define fix size while dragging
-@for $i from 1 to 96 {
-  .grid-stack > .grid-stack-item.ui-draggable-dragging[gs-w="#{$i}"] {
-    width: calc(var(--gridstack-cell-size) * #{$i} * 1px) !important;
-  }
-
-  .grid-stack > .grid-stack-item.ui-draggable-dragging[gs-h="#{$i}"] {
-    height: calc(var(--gridstack-cell-size) * #{$i} * 1px) !important;
-  }
-}
-
-// Styling for grid-stack main area
-@for $i from 1 to 96 {
-  .grid-stack > .grid-stack-item[gs-w="#{$i}"] {
-    width: calc(100% / #{var(--gridstack-column-count)} * #{$i});
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="#{$i}"] {
-    min-width: calc(100% / #{var(--gridstack-column-count)} * #{$i});
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="#{$i}"] {
-    max-width: calc(100% / #{var(--gridstack-column-count)} * #{$i});
-  }
-}
-
-@for $i from 1 to 96 {
-  .grid-stack > .grid-stack-item[gs-h="#{$i}"] {
-    height: calc(100% / var(--gridstack-row-count) * #{$i});
-  }
-  .grid-stack > .grid-stack-item[gs-min-h="#{$i}"] {
-    min-height: calc(100% / var(--gridstack-row-count) * #{$i});
-  }
-  .grid-stack > .grid-stack-item[gs-max-h="#{$i}"] {
-    max-height: calc(100% / var(--gridstack-row-count) * #{$i});
-  }
-}
-
-@for $i from 1 to 96 {
-  .grid-stack > .grid-stack-item[gs-x="#{$i}"] {
-    left: calc(100% / #{var(--gridstack-column-count)} * #{$i});
-  }
-}
-
-@for $i from 1 to 96 {
-  .grid-stack > .grid-stack-item[gs-y="#{$i}"] {
-    top: calc(100% / var(--gridstack-row-count) * #{$i});
-  }
-}
-
-.grid-stack[data-kind="dynamic"] {
-  height: 100% !important;
-}
-
-// General gridstack styling
-.grid-stack > .grid-stack-item > .grid-stack-item-content,
-.grid-stack > .grid-stack-item > .placeholder-content {
-  inset: 10px;
-}
-
-.grid-stack > .grid-stack-item > .ui-resizable-se {
-  bottom: 10px;
-  right: 10px;
-}
-
-.grid-stack > .grid-stack-item > .grid-stack-item-content {
-  overflow-y: auto;
-}
-
-.grid-stack > .grid-stack-item[data-type="item"] {
-  overflow: visible;
-}
-
-.grid-stack.grid-stack-animate {
-  transition: none;
-}
-
-/**
- * Hide empty wrapper (class is used when no items are inside and not in edit mode)
- */
-.grid-stack-empty-wrapper {
-  display: none !important;
-}
diff --git a/apps/nextjs/src/theme/color-scheme.ts b/apps/nextjs/src/theme/color-scheme.ts
index 284b636b4..230a0367e 100644
--- a/apps/nextjs/src/theme/color-scheme.ts
+++ b/apps/nextjs/src/theme/color-scheme.ts
@@ -1,8 +1,7 @@
 import { cache } from "react";
 import { cookies } from "next/headers";
 
-import { db } from "@homarr/db";
-import { getServerSettingByKeyAsync } from "@homarr/db/queries";
+import { getRscServerSettingsAsync } from "@homarr/api/server-settings-server";
 import type { ColorScheme } from "@homarr/definitions";
 import { colorSchemeCookieKey } from "@homarr/definitions";
 
@@ -13,6 +12,6 @@ export const getCurrentColorSchemeAsync = cache(async () => {
     return cookieValue as ColorScheme;
   }
 
-  const appearanceSettings = await getServerSettingByKeyAsync(db, "appearance");
-  return appearanceSettings.defaultColorScheme;
+  const serverSettings = await getRscServerSettingsAsync();
+  return serverSettings.appearance.defaultColorScheme;
 });
diff --git a/apps/tasks/src/main.ts b/apps/tasks/src/main.ts
index 55416e689..514694b77 100644
--- a/apps/tasks/src/main.ts
+++ b/apps/tasks/src/main.ts
@@ -5,7 +5,7 @@ import { jobGroup } from "@homarr/cron-jobs";
 
 import { onStartAsync } from "./on-start";
 
-void (async () => {
+export const startupPromise = (async () => {
   await onStartAsync();
   await jobGroup.initializeAsync();
   await jobGroup.startAllAsync();
diff --git a/apps/tasks/src/on-start/index.ts b/apps/tasks/src/on-start/index.ts
index cc6967dce..15b873186 100644
--- a/apps/tasks/src/on-start/index.ts
+++ b/apps/tasks/src/on-start/index.ts
@@ -1,7 +1,5 @@
 import { cleanupSessionsAsync } from "./session-cleanup";
-import { warmUpdateCheckerAsync } from "./warm-update-checker";
 
 export async function onStartAsync() {
   await cleanupSessionsAsync();
-  await warmUpdateCheckerAsync();
 }
diff --git a/apps/tasks/src/on-start/warm-update-checker.ts b/apps/tasks/src/on-start/warm-update-checker.ts
deleted file mode 100644
index a3b9f94a9..000000000
--- a/apps/tasks/src/on-start/warm-update-checker.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createLogger } from "@homarr/core/infrastructure/logs";
-import { updateCheckerRequestHandler } from "@homarr/request-handler/update-checker";
-
-const logger = createLogger({ module: "warmUpdateChecker" });
-
-export async function warmUpdateCheckerAsync() {
-  try {
-    const handler = updateCheckerRequestHandler.handler({});
-    await handler.getDataAsync();
-    logger.debug("Update checker warmed");
-  } catch (error) {
-    logger.error(new Error("Failed to warm update checker", { cause: error }));
-  }
-}
diff --git a/apps/websocket/src/main.ts b/apps/websocket/src/main.ts
index 45dfe50a2..9e0032201 100644
--- a/apps/websocket/src/main.ts
+++ b/apps/websocket/src/main.ts
@@ -12,6 +12,25 @@ const logger = createLogger({ module: "websocketMain" });
 const wss = new WebSocketServer({
   port: 3001,
 });
+wss.on("error", (error) => {
+  logger.error(new Error("WebSocket server error", { cause: error }));
+});
+
+export const startupPromise = new Promise<void>((resolve, reject) => {
+  const onListening = () => {
+    wss.off("error", onError);
+    logger.info("✅ WebSocket Server listening on ws://localhost:3001");
+    resolve();
+  };
+  const onError = (error: Error) => {
+    wss.off("listening", onListening);
+    reject(error);
+  };
+
+  wss.once("listening", onListening);
+  wss.once("error", onError);
+});
+
 const handler = applyWSSHandler({
   wss,
   router: appRouter,
@@ -57,7 +76,6 @@ wss.on("connection", (websocket, incomingMessage) => {
     logger.info(`➖ Connection (${wss.clients.size}) ${code} ${reason.toString()}`);
   });
 });
-logger.info("✅ WebSocket Server listening on ws://localhost:3001");
 
 process.on("SIGTERM", () => {
   logger.info("SIGTERM");
diff --git a/apps/workshop/.env.example b/apps/workshop/.env.example
new file mode 100644
index 000000000..a67c02ff7
--- /dev/null
+++ b/apps/workshop/.env.example
@@ -0,0 +1,12 @@
+# Local PocketBase + Docusaurus development
+PB_EXPOSE_PORT=8090
+DOCS_EXPOSE_PORT=3003
+PB_ALLOWED_ORIGINS=*
+WORKSHOP_PUBLIC_ORIGIN=http://127.0.0.1:3003
+HOMARR_WEBSITE_URL=http://127.0.0.1:3003
+WORKSHOP_API_URL=http://127.0.0.1:8090
+WORKSHOP_WEB_URL=http://127.0.0.1:3003/workshop
+
+# Optional local GitHub OAuth application.
+# GITHUB_CLIENT_ID=
+# GITHUB_CLIENT_SECRET=
diff --git a/apps/workshop/.gitignore b/apps/workshop/.gitignore
new file mode 100644
index 000000000..5a1dc89f6
--- /dev/null
+++ b/apps/workshop/.gitignore
@@ -0,0 +1 @@
+pb_data/
diff --git a/apps/workshop/Dockerfile b/apps/workshop/Dockerfile
new file mode 100644
index 000000000..ab38f9df5
--- /dev/null
+++ b/apps/workshop/Dockerfile
@@ -0,0 +1,42 @@
+# syntax=docker/dockerfile:1.10
+
+ARG POCKETBASE_IMAGE=ghcr.io/muchobien/pocketbase:0.39.9@sha256:c0667fe6c5197ff226ff642120ab1ad870c3f2f27300940a61e5a7fa082b6816
+
+FROM node:24.18.0-alpine AS dependencies
+WORKDIR /app
+ENV COREPACK_HOME=/corepack
+RUN mkdir -p /corepack && corepack enable pnpm && corepack install --global pnpm@11.11.0
+COPY pnpm-lock.yaml pnpm-workspace.yaml package.json turbo.json ./
+COPY patches ./patches
+COPY apps/docs ./apps/docs
+COPY packages/custom-widgets ./packages/custom-widgets
+COPY packages/definitions ./packages/definitions
+COPY packages/workshop ./packages/workshop
+COPY tooling/typescript ./tooling/typescript
+RUN --mount=type=cache,id=workshop-pnpm-store,target=/pnpm/store pnpm config set store-dir /pnpm/store && pnpm install --filter @homarr/docs... --frozen-lockfile
+
+FROM dependencies AS website
+ARG HOMARR_WEBSITE_URL=https://homarr.dev
+ARG WORKSHOP_API_URL=https://homarr.dev
+ENV HOMARR_WEBSITE_URL=$HOMARR_WEBSITE_URL
+ENV WORKSHOP_API_URL=$WORKSHOP_API_URL
+RUN CI=true SKIP_ENV_VALIDATION=true pnpm turbo build --filter=@homarr/docs
+
+FROM ${POCKETBASE_IMAGE} AS pocketbase-runtime
+ENV PORT=8090
+RUN addgroup -S pocketbase && adduser -S -G pocketbase pocketbase
+COPY apps/workshop/entrypoint.sh /usr/local/bin/workshop-entrypoint
+RUN chmod 755 /usr/local/bin/workshop-entrypoint && mkdir -p /pb_data /pb_public && chown pocketbase:pocketbase /pb_data
+ENTRYPOINT ["workshop-entrypoint"]
+
+FROM pocketbase-runtime AS development
+EXPOSE 8090
+HEALTHCHECK --interval=10s --timeout=5s --start-period=15s --retries=6 CMD wget -q --spider "http://127.0.0.1:${PORT}/api/health" || exit 1
+
+FROM pocketbase-runtime AS production
+COPY --from=website /app/apps/docs/build /pb_public
+COPY apps/workshop/pb_migrations /pb_migrations
+COPY apps/workshop/pb_hooks /pb_hooks
+RUN chown -R pocketbase:pocketbase /pb_hooks /pb_migrations /pb_public
+EXPOSE 8090
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 CMD wget -q --spider "http://127.0.0.1:${PORT}/api/health" || exit 1
diff --git a/apps/workshop/Dockerfile.dockerignore b/apps/workshop/Dockerfile.dockerignore
new file mode 100644
index 000000000..ff07f074e
--- /dev/null
+++ b/apps/workshop/Dockerfile.dockerignore
@@ -0,0 +1,7 @@
+.git
+.next
+.turbo
+**/node_modules
+**/pb_data
+apps/docs/build
+coverage
diff --git a/apps/workshop/README.md b/apps/workshop/README.md
new file mode 100644
index 000000000..a66208514
--- /dev/null
+++ b/apps/workshop/README.md
@@ -0,0 +1,184 @@
+# Homarr Workshop
+
+Workshop is the public, community-driven PocketBase service behind the Workshop pages in Homarr's Docusaurus site. It
+stores Custom JSX v2 widgets and Custom CSS submissions. Installation-time validation inside Homarr remains
+authoritative: public content must be reviewed before it is installed.
+
+The runtime base is PocketBase 0.39.9 pinned by its multi-platform OCI digest in `apps/workshop/Dockerfile`. Update the
+version and digest together, then run the Workshop integration and production-image smoke suites.
+
+The internal PocketBase field `users.isAdmin` means **Workshop moderator**. It does not grant Homarr administrator
+access. Moderators can review private reports, dismiss reports, and remove submissions or comments.
+
+## Run locally
+
+From the repository root:
+
+```sh
+cp apps/workshop/.env.example apps/workshop/.env
+pnpm install --frozen-lockfile
+docker compose --env-file apps/workshop/.env -f apps/workshop/docker-compose.yml up --build workshop
+```
+
+This starts persistent PocketBase at `http://127.0.0.1:8090`. Start Docusaurus in another terminal:
+
+```sh
+WORKSHOP_API_URL=http://127.0.0.1:8090 pnpm dev:docs
+```
+
+Open:
+
+- PocketBase administration: `http://127.0.0.1:8090/_/`
+- Workshop: `http://127.0.0.1:3003/workshop`
+
+Create the first PocketBase superuser in the administration UI, or use:
+
+```sh
+docker compose -f apps/workshop/docker-compose.yml exec workshop \
+  pocketbase superuser create you@example.com 'replace-with-a-strong-password' --dir=/pb_data
+```
+
+Stopping the Compose process preserves `homarr-workshop_pb_data`. To inspect or stop the service separately:
+
+```sh
+docker compose -f apps/workshop/docker-compose.yml logs -f workshop
+docker compose -f apps/workshop/docker-compose.yml stop workshop
+```
+
+### Pre-release migration reset
+
+The v2 branch consolidates the unreleased Workshop migrations into one initial migration. A PocketBase volume that ran
+an earlier v2 Workshop migration chain is unsupported. Back up anything you need, then use the intentional local reset
+command near the end of this document and start the stack again. Startup never deletes a volume automatically. This
+exception applies only to disposable pre-release volumes and must not be used for production data.
+
+## Connect the Homarr application
+
+Use the same URL contract in the repository-root `.env`, then restart Homarr:
+
+```dotenv
+HOMARR_WEBSITE_URL=http://127.0.0.1:3003
+WORKSHOP_API_URL=http://127.0.0.1:8090
+WORKSHOP_WEB_URL=http://127.0.0.1:3003/workshop
+WORKSHOP_PUBLIC_ORIGIN=http://127.0.0.1:3003
+PB_ALLOWED_ORIGINS=*
+```
+
+```sh
+pnpm dev
+```
+
+`WORKSHOP_API_URL` controls API calls. `WORKSHOP_WEB_URL` controls links from Homarr. `HOMARR_WEBSITE_URL` is the
+documentation/site base. All three must be absolute HTTP(S) URLs. The old Docusaurus-only `WORKSHOP_URL` variable
+remains a deprecated alias for one release.
+
+## Optional GitHub OAuth
+
+Create a GitHub OAuth application with this callback:
+
+```text
+https://<workshop-host>/api/oauth2-redirect
+```
+
+Set both credentials in `.env`:
+
+```dotenv
+GITHUB_CLIENT_ID=...
+GITHUB_CLIENT_SECRET=...
+```
+
+OAuth settings synchronize on every PocketBase startup. Restart after rotation. A production deployment must never
+supply only one credential. `PB_ALLOWED_ORIGINS=*` is appropriate for the central community because arbitrary
+self-hosted Homarr origins must open its OAuth popup; a restricted list must include every allowed browser origin.
+Workshop uses the OAuth provider username as the public display name instead of the profile's full name.
+
+## Promote a Workshop moderator
+
+Sign in once through GitHub so the user record exists. In the PocketBase administration UI, open the `users` collection
+and set `isAdmin` to `true`. The user must sign in again. Set it back to `false` to remove moderator access.
+
+Regular API rules cannot set this field. Never describe a Workshop moderator as a Homarr administrator: they are
+separate roles in separate services.
+
+## Validation and tests
+
+The official browser and shared client validate content with the canonical TypeScript schema and send the matching
+schema identifier. PocketBase stores submission content without parsing, normalizing, or validating it; it only owns
+revision fields and rejects stale compare-and-swap updates. Homarr validates downloaded content again before
+installation, so direct API submissions that bypass the official client can be rejected there.
+
+Run the disposable integration suite:
+
+```sh
+pnpm test:workshop
+pnpm --filter @homarr/workshop typecheck
+pnpm --filter @homarr/docs typecheck
+```
+
+The integration suite uses a separate Compose project and deletes only its disposable volume.
+
+## Backup and restore
+
+PocketBase data lives in `/pb_data`. Stop writes and copy it into a new, empty host directory for each
+filesystem-level backup:
+
+```sh
+docker compose -f apps/workshop/docker-compose.yml stop workshop
+docker compose -f apps/workshop/docker-compose.yml cp workshop:/pb_data/. ./workshop-backup
+docker compose -f apps/workshop/docker-compose.yml start workshop
+```
+
+Never copy a backup over a non-empty PocketBase volume: files created after the backup could survive and make the
+restore inconsistent. For a development restore, first verify that the selected backup contains the database, then
+empty the stopped volume before copying it:
+
+```sh
+test -f ./workshop-backup/data.db
+docker compose -f apps/workshop/docker-compose.yml stop workshop
+docker compose -f apps/workshop/docker-compose.yml run --rm --no-deps --entrypoint sh workshop \
+  -c 'find /pb_data -mindepth 1 -maxdepth 1 -exec rm -rf {} +'
+docker compose -f apps/workshop/docker-compose.yml cp ./workshop-backup/. workshop:/pb_data
+docker compose -f apps/workshop/docker-compose.yml start workshop
+curl --fail http://127.0.0.1:8090/api/health
+curl --fail 'http://127.0.0.1:8090/api/collections/workshop_listings/records?perPage=1'
+```
+
+The cleanup command irreversibly empties the selected Compose volume, so confirm the backup path and preserve the
+current volume separately before running it. After the HTTP checks, verify sign-in, reports, and a test installation.
+Production backups must be versioned, access-controlled, restored into a clean staging volume, and validated before a
+release.
+
+## Production image and operations
+
+The production target serves the built documentation from `/pb_public` and PocketBase from the same image. Required
+production configuration:
+
+```dotenv
+HOMARR_WEBSITE_URL=https://homarr.dev
+WORKSHOP_API_URL=https://homarr.dev
+WORKSHOP_WEB_URL=https://homarr.dev/workshop
+WORKSHOP_PUBLIC_ORIGIN=https://homarr.dev
+PB_ALLOWED_ORIGINS=*
+```
+
+Build and smoke-test the combined image locally:
+
+```sh
+docker compose -f apps/workshop/docker-compose.yml --profile docs up --build --detach docs
+curl --fail http://127.0.0.1:3003/api/health
+curl --fail http://127.0.0.1:3003/
+curl --fail http://127.0.0.1:3003/workshop
+docker compose -f apps/workshop/docker-compose.yml --profile docs stop docs
+```
+
+Normal `up`, `start`, `stop`, and `down` operations retain the named volume. The following command is an intentional,
+irreversible local reset:
+
+```sh
+docker compose -f apps/workshop/docker-compose.yml down --volumes
+```
+
+Never run the reset command against production. Release by immutable image digest, back up application and PocketBase
+data first, rehearse restore and rollback in staging, and promote the exact tested digest. The Algolia recrawl workflow
+remains manual until the external Homarr website host can dispatch it after promotion; publishing the image to GHCR does
+not make that image live.
diff --git a/apps/workshop/docker-compose.yml b/apps/workshop/docker-compose.yml
new file mode 100644
index 000000000..c6eac0034
--- /dev/null
+++ b/apps/workshop/docker-compose.yml
@@ -0,0 +1,51 @@
+name: homarr-workshop
+
+services:
+  workshop:
+    build:
+      context: ../..
+      dockerfile: apps/workshop/Dockerfile
+      target: development
+    restart: unless-stopped
+    environment:
+      PB_ALLOWED_ORIGINS: ${PB_ALLOWED_ORIGINS:-*}
+      PORT: ${PB_EXPOSE_PORT:-8090}
+      WORKSHOP_WEB_URL: ${WORKSHOP_WEB_URL:-http://localhost:3003/workshop}
+      GITHUB_CLIENT_ID: ${GITHUB_CLIENT_ID:-}
+      GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET:-}
+      WORKSHOP_PUBLIC_ORIGIN: ${WORKSHOP_PUBLIC_ORIGIN:-http://localhost:3003}
+    ports:
+      - "127.0.0.1:${PB_EXPOSE_PORT:-8090}:${PB_EXPOSE_PORT:-8090}"
+    volumes:
+      - pb_data:/pb_data
+      - ./pb_hooks:/pb_hooks:ro
+      - ./pb_migrations:/pb_migrations:ro
+    security_opt:
+      - no-new-privileges:true
+
+  docs:
+    profiles:
+      - docs
+    build:
+      context: ../..
+      dockerfile: apps/workshop/Dockerfile
+      target: production
+      args:
+        HOMARR_WEBSITE_URL: ${HOMARR_WEBSITE_URL:-http://localhost:3003}
+        WORKSHOP_API_URL: ${WORKSHOP_API_URL:-http://localhost:3003}
+    environment:
+      PB_ALLOWED_ORIGINS: ${PB_ALLOWED_ORIGINS:-*}
+      PORT: ${DOCS_EXPOSE_PORT:-3003}
+      WORKSHOP_WEB_URL: ${WORKSHOP_WEB_URL:-http://localhost:3003/workshop}
+      GITHUB_CLIENT_ID: ${GITHUB_CLIENT_ID:-}
+      GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET:-}
+      WORKSHOP_PUBLIC_ORIGIN: ${WORKSHOP_PUBLIC_ORIGIN:-http://localhost:3003}
+    ports:
+      - "127.0.0.1:${DOCS_EXPOSE_PORT:-3003}:${DOCS_EXPOSE_PORT:-3003}"
+    volumes:
+      - pb_data:/pb_data
+    security_opt:
+      - no-new-privileges:true
+
+volumes:
+  pb_data:
diff --git a/apps/workshop/entrypoint.sh b/apps/workshop/entrypoint.sh
new file mode 100644
index 000000000..84a04ade4
--- /dev/null
+++ b/apps/workshop/entrypoint.sh
@@ -0,0 +1,16 @@
+#!/bin/sh
+set -eu
+
+if [ "$(id -u)" -eq 0 ]; then
+  chown -R pocketbase:pocketbase /pb_data
+  exec su -p -s /bin/sh pocketbase -c 'exec /usr/local/bin/workshop-entrypoint'
+fi
+
+exec pocketbase serve \
+  --http="0.0.0.0:${PORT:-8090}" \
+  --origins="${PB_ALLOWED_ORIGINS:-*}" \
+  --dir=/pb_data \
+  --hooksDir=/pb_hooks \
+  --migrationsDir=/pb_migrations \
+  --publicDir=/pb_public \
+  --indexFallback=true
diff --git a/apps/workshop/pb_hooks/comment-email.html b/apps/workshop/pb_hooks/comment-email.html
new file mode 100644
index 000000000..421c8e783
--- /dev/null
+++ b/apps/workshop/pb_hooks/comment-email.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>New Comment on Homarr Workshop</title>
+  </head>
+  <body style="margin: 0; padding: 0; background-color: #f4f4f4; font-family: Helvetica, Arial, sans-serif">
+    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: #f4f4f4">
+      <tr>
+        <td align="center" style="padding: 50px 20px">
+          <table
+            role="presentation"
+            width="600"
+            cellpadding="0"
+            cellspacing="0"
+            style="width: 600px; max-width: 100%; background-color: #ffffff; border: 1px solid #000000"
+          >
+            <!-- Header -->
+            <tr>
+              <td align="center" style="background-color: #000000; padding: 36px 20px">
+                <a href="https://homarr.dev" target="_blank" style="text-decoration: none">
+                  <img
+                    src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/homarr-wordmark-light.png"
+                    alt="Homarr"
+                    width="170"
+                    style="display: block; width: 170px; height: auto; border: 0; margin: 0 auto"
+                  />
+                </a>
+              </td>
+            </tr>
+
+            <!-- Body -->
+            <tr>
+              <td style="padding: 45px 40px; color: #000000; font-size: 15px; line-height: 1.7">
+                <p style="margin: 0 0 18px 0">Hi there,</p>
+                <p style="margin: 0 0 18px 0">
+                  <strong>{{commenterName}}</strong> left a comment on your submission
+                  <strong>{{submissionTitle}}</strong>:
+                </p>
+                <blockquote
+                  style="
+                    margin: 0 0 24px 0;
+                    padding: 16px 20px;
+                    border-left: 3px solid #000000;
+                    background-color: #f9f9f9;
+                    color: #555555;
+                  "
+                >
+                  {{commentExcerpt}}
+                </blockquote>
+
+                <!-- CTA button -->
+                <table role="presentation" cellpadding="0" cellspacing="0">
+                  <tr>
+                    <td align="center" style="background-color: #000000">
+                      <a
+                        href="{{submissionUrl}}"
+                        target="_blank"
+                        style="
+                          display: inline-block;
+                          padding: 12px 28px;
+                          color: #ffffff;
+                          font-size: 14px;
+                          font-weight: bold;
+                          text-decoration: none;
+                          letter-spacing: 0.5px;
+                        "
+                      >
+                        VIEW THE COMMENT
+                      </a>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+
+            <!-- Divider -->
+            <tr>
+              <td style="border-top: 1px solid #000000"></td>
+            </tr>
+
+            <!-- Footer -->
+            <tr>
+              <td align="center" style="padding: 24px 20px; color: #000000; font-size: 12px">
+                <a href="https://homarr.dev" target="_blank" style="color: #000000; text-decoration: underline"
+                  >homarr.dev</a
+                >
+                &nbsp;&middot;&nbsp; Homarr &mdash; 2026
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/apps/workshop/pb_hooks/report-email.html b/apps/workshop/pb_hooks/report-email.html
new file mode 100644
index 000000000..20fc7b26a
--- /dev/null
+++ b/apps/workshop/pb_hooks/report-email.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Workshop report</title>
+  </head>
+  <body style="margin: 0; padding: 0; background: #f4f4f4; font-family: Helvetica, Arial, sans-serif">
+    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background: #f4f4f4">
+      <tr>
+        <td align="center" style="padding: 50px 20px">
+          <table
+            role="presentation"
+            width="600"
+            cellpadding="0"
+            cellspacing="0"
+            style="width: 600px; max-width: 100%; background: #ffffff; border: 1px solid #dc2626"
+          >
+            <tr>
+              <td style="background: #991b1b; padding: 28px 36px; color: #ffffff">
+                <div style="font-size: 12px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase">
+                  Moderation alert
+                </div>
+                <div style="margin-top: 8px; font-size: 22px; font-weight: bold">A Workshop submission was reported</div>
+              </td>
+            </tr>
+            <tr>
+              <td style="padding: 36px; color: #18181b; font-size: 15px; line-height: 1.65">
+                <p style="margin: 0 0 18px">
+                  <strong>{{reporterName}}</strong> reported <a href="{{submissionUrl}}">{{submissionTitle}}</a>.
+                </p>
+                <p style="margin: 0 0 8px; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #991b1b">
+                  {{category}}
+                </p>
+                <blockquote
+                  style="margin: 0 0 26px; padding: 16px 18px; border-left: 3px solid #dc2626; background: #fef2f2"
+                >
+                  {{explanation}}
+                </blockquote>
+                <a
+                  href="{{adminUrl}}"
+                  style="display: inline-block; padding: 12px 20px; background: #991b1b; color: #ffffff; font-weight: bold; text-decoration: none"
+                >
+                  REVIEW REPORT
+                </a>
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/apps/workshop/pb_hooks/submission-deleted-email.html b/apps/workshop/pb_hooks/submission-deleted-email.html
new file mode 100644
index 000000000..0041572ae
--- /dev/null
+++ b/apps/workshop/pb_hooks/submission-deleted-email.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Workshop submission removed</title>
+  </head>
+  <body style="margin: 0; padding: 0; background: #f4f4f4; font-family: Helvetica, Arial, sans-serif">
+    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background: #f4f4f4">
+      <tr>
+        <td align="center" style="padding: 50px 20px">
+          <table
+            role="presentation"
+            width="600"
+            cellpadding="0"
+            cellspacing="0"
+            style="width: 600px; max-width: 100%; background: #ffffff; border: 1px solid #27272a"
+          >
+            <tr>
+              <td style="background: #18181b; padding: 28px 36px; color: #ffffff">
+                <div style="font-size: 12px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase">
+                  Homarr Workshop
+                </div>
+                <div style="margin-top: 8px; font-size: 22px; font-weight: bold">Your submission was removed</div>
+              </td>
+            </tr>
+            <tr>
+              <td style="padding: 36px; color: #18181b; font-size: 15px; line-height: 1.65">
+                <p style="margin: 0 0 18px">A Workshop moderator removed your submission:</p>
+                <div style="margin: 0 0 24px; padding: 16px 18px; border-left: 3px solid #dc2626; background: #fef2f2">
+                  <strong>{{submissionTitle}}</strong>
+                </div>
+                <p style="margin: 0">
+                  The submission is no longer available in Workshop. Widgets or CSS already installed by users are not
+                  removed from their Homarr instances.
+                </p>
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/apps/workshop/pb_hooks/workshop-utils.js b/apps/workshop/pb_hooks/workshop-utils.js
new file mode 100644
index 000000000..00315df1a
--- /dev/null
+++ b/apps/workshop/pb_hooks/workshop-utils.js
@@ -0,0 +1,78 @@
+const GITHUB_USERNAME_PATTERN = /^[A-Za-z0-9](?:[A-Za-z0-9-]{0,37}[A-Za-z0-9])?$/;
+
+const rejectRequest = (message) => {
+  throw new BadRequestError(message);
+};
+
+const normalizedIdentityText = (...values) => {
+  for (const value of values) {
+    if (typeof value !== "string") continue;
+    const normalized = [...value]
+      .filter((character) => {
+        const code = character.codePointAt(0) || 0;
+        return code > 31 && code !== 127;
+      })
+      .join("")
+      .trim();
+    if (normalized) return normalized;
+  }
+  return "";
+};
+
+const deriveGithubIdentity = (oauthUser, recordId) => {
+  const rawUser = oauthUser && typeof oauthUser.rawUser === "object" ? oauthUser.rawUser : {};
+  const candidateUsername = normalizedIdentityText(oauthUser && oauthUser.username, rawUser.login);
+  const githubUsername =
+    GITHUB_USERNAME_PATTERN.test(candidateUsername) && !candidateUsername.includes("--") ? candidateUsername : "";
+  const displayName =
+    normalizedIdentityText(githubUsername, rawUser.login, oauthUser && oauthUser.name, rawUser.name).slice(0, 100) ||
+    `GitHub user ${String(recordId || "").slice(0, 8)}`;
+  const candidateAvatarUrl = normalizedIdentityText(
+    oauthUser && oauthUser.avatarURL,
+    oauthUser && oauthUser.avatarUrl,
+    rawUser.avatar_url,
+  );
+  const avatarUrl =
+    candidateAvatarUrl.length <= 2_048 && /^https:\/\/[^"'\\\s]+$/i.test(candidateAvatarUrl) ? candidateAvatarUrl : "";
+
+  return {
+    displayName,
+    avatarUrl,
+    githubUsername,
+    githubProfileUrl: githubUsername ? `https://github.com/${githubUsername}` : "",
+  };
+};
+
+const escapeHtml = (value) =>
+  String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+
+const emailTemplate = (filename) => {
+  const hooksPath = $os.getenv("WORKSHOP_PB_HOOKS_DIR") || __hooks;
+  return $os.readFile($filepath.join(hooksPath, filename));
+};
+
+const sendEmail = (app, recipientEmail, subject, text, html) => {
+  const sender = app.settings().meta;
+  app.newMailClient().send(
+    new MailerMessage({
+      from: { address: sender.senderAddress, name: sender.senderName },
+      to: [{ address: recipientEmail }],
+      subject,
+      text,
+      html,
+    }),
+  );
+};
+
+module.exports = {
+  deriveGithubIdentity,
+  emailTemplate,
+  escapeHtml,
+  rejectRequest,
+  sendEmail,
+};
diff --git a/apps/workshop/pb_hooks/workshop.pb.js b/apps/workshop/pb_hooks/workshop.pb.js
new file mode 100644
index 000000000..3459c794c
--- /dev/null
+++ b/apps/workshop/pb_hooks/workshop.pb.js
@@ -0,0 +1,244 @@
+/// <reference path="../pb_data/types.d.ts" />
+
+onBootstrap((event) => {
+  const clientId = String($os.getenv("GITHUB_CLIENT_ID") || "").trim();
+  const clientSecret = String($os.getenv("GITHUB_CLIENT_SECRET") || "").trim();
+  if (Boolean(clientId) !== Boolean(clientSecret)) {
+    console.log(JSON.stringify({ event: "workshop_oauth_configuration_rejected", reason: "partial_credentials" }));
+    throw new Error("GitHub OAuth requires both GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET");
+  }
+  const configured = Boolean(clientId && clientSecret);
+  event.next();
+  const users = event.app.findCollectionByNameOrId("users");
+  users.oauth2.enabled = configured;
+  users.oauth2.mappedFields = { id: "", name: "", username: "displayName", avatarURL: "avatarUrl" };
+  users.oauth2.providers = configured ? [{ name: "github", clientId, clientSecret }] : [];
+  event.app.save(users);
+  console.log(JSON.stringify({ event: "workshop_oauth_synchronized", enabled: configured }));
+});
+
+onRecordAuthWithOAuth2Request((event) => {
+  if (event.providerName !== "github" || !event.oauth2User) {
+    event.next();
+    return;
+  }
+
+  const { deriveGithubIdentity } = require(`${__hooks}/workshop-utils.js`);
+  const identity = deriveGithubIdentity(event.oauth2User, event.record ? event.record.id : event.oauth2User.id);
+  if (event.record) {
+    event.record.set("displayName", identity.displayName);
+    event.record.set("avatar", "");
+    event.record.set("avatarUrl", identity.avatarUrl);
+    event.record.set("githubUsername", identity.githubUsername);
+    event.record.set("githubProfileUrl", identity.githubProfileUrl);
+    event.app.save(event.record);
+  } else {
+    event.createData.displayName = identity.displayName;
+    event.createData.avatarUrl = identity.avatarUrl;
+    event.createData.githubUsername = identity.githubUsername;
+    event.createData.githubProfileUrl = identity.githubProfileUrl;
+  }
+  console.log(
+    JSON.stringify({
+      event: "workshop_oauth_identity_synchronized",
+      provider: "github",
+      recordId: event.record ? event.record.id : null,
+      newRecord: !event.record,
+    }),
+  );
+  event.next();
+}, "users");
+
+onRecordUpdateRequest((event) => {
+  const { rejectRequest } = require(`${__hooks}/workshop-utils.js`);
+  const originalAvatar = event.record.original().getString("avatar");
+  const pendingAvatarFiles = event.record.getUnsavedFiles("avatar");
+  if (event.record.getString("avatar") !== originalAvatar || pendingAvatarFiles.length > 0) {
+    rejectRequest("Workshop avatars are managed by GitHub OAuth");
+  }
+  event.next();
+}, "users");
+
+onRecordCreateRequest((event) => {
+  event.record.set("revision", 1);
+  event.record.set("expectedRevision", 0);
+  event.record.set("changelog", "");
+  event.record.set("outdated", false);
+  event.next();
+}, "submissions");
+
+onRecordUpdateRequest((event) => {
+  const { rejectRequest } = require(`${__hooks}/workshop-utils.js`);
+  const original = event.record.original();
+  const currentRevision = original.getInt("revision");
+  const expectedRevision = event.record.getInt("expectedRevision");
+  if (!Number.isSafeInteger(expectedRevision) || expectedRevision < 1) {
+    rejectRequest("Submission changed since it was read");
+  }
+  event.record.set("expectedRevision", expectedRevision);
+  event.record.set("revision", currentRevision + 1);
+  event.next();
+}, "submissions");
+
+onRecordCreateRequest((event) => {
+  const auth = event.requestInfo().auth;
+  const reporter = event.record.getString("reporter");
+  const submission = event.record.getString("submission");
+  if (auth && auth.id === reporter) {
+    const dismissed = event.app.findRecordsByFilter(
+      "reports",
+      "reporter = {:reporter} && submission = {:submission} && status = 'dismissed'",
+      "",
+      1,
+      0,
+      { reporter, submission },
+    );
+    if (dismissed.length > 0) {
+      event.app.delete(dismissed[0]);
+      console.log(
+        JSON.stringify({
+          event: "workshop_report_reopened",
+          reporterId: reporter,
+          submissionId: submission,
+        }),
+      );
+    }
+  }
+  event.record.set("status", "open");
+  event.next();
+}, "reports");
+
+onRecordAfterCreateSuccess((event) => {
+  try {
+    const votes = event.app.findCollectionByNameOrId("votes");
+    const vote = new Record(votes);
+    vote.set("submission", event.record.id);
+    vote.set("user", event.record.get("author"));
+    vote.set("value", 1);
+    event.app.save(vote);
+  } catch (error) {
+    console.log(`Workshop initial upvote failed for ${event.record.id}: ${error}`);
+  }
+  event.next();
+}, "submissions");
+
+onRecordAfterCreateSuccess((event) => {
+  try {
+    const { emailTemplate, escapeHtml, sendEmail } = require(`${__hooks}/workshop-utils.js`);
+    const submission = event.app.findRecordById("submissions", event.record.get("submission"));
+    const recipient = event.app.findRecordById("users", submission.get("author"));
+    const commenter = event.app.findRecordById("users", event.record.get("author"));
+    const recipientEmail = recipient.email();
+    const publicOrigin = $os.getenv("WORKSHOP_PUBLIC_ORIGIN").replace(/\/$/, "");
+    const publicWorkshopUrl = ($os.getenv("WORKSHOP_WEB_URL") || `${publicOrigin}/workshop`).replace(/\/$/, "");
+
+    if (!recipientEmail || recipient.id === commenter.id || !publicOrigin) {
+      event.next();
+      return;
+    }
+
+    const commenterName = commenter.getString("displayName") || "A community member";
+    const submissionTitle = submission.getString("title");
+    const rawExcerpt = event.record.getString("content").slice(0, 280);
+    const submissionUrl = `${publicWorkshopUrl}/${submission.id}/`;
+    const template = emailTemplate("comment-email.html")
+      .replaceAll("{{commenterName}}", escapeHtml(commenterName))
+      .replaceAll("{{submissionTitle}}", escapeHtml(submissionTitle))
+      .replaceAll("{{commentExcerpt}}", escapeHtml(rawExcerpt))
+      .replaceAll("{{submissionUrl}}", escapeHtml(submissionUrl));
+
+    sendEmail(
+      event.app,
+      recipientEmail,
+      `${commenterName} commented on ${submissionTitle}`,
+      `${commenterName} commented on “${submissionTitle}”:\n\n${rawExcerpt}\n\n${submissionUrl}`,
+      template,
+    );
+  } catch (error) {
+    console.log(`Workshop comment email failed for ${event.record.id}: ${error}`);
+  }
+  event.next();
+}, "comments");
+
+onRecordAfterCreateSuccess((event) => {
+  try {
+    const { emailTemplate, escapeHtml, sendEmail } = require(`${__hooks}/workshop-utils.js`);
+    const submission = event.app.findRecordById("submissions", event.record.get("submission"));
+    const reporter = event.app.findRecordById("users", event.record.get("reporter"));
+    const publicOrigin = $os.getenv("WORKSHOP_PUBLIC_ORIGIN").replace(/\/$/, "");
+    const publicWorkshopUrl = ($os.getenv("WORKSHOP_WEB_URL") || `${publicOrigin}/workshop`).replace(/\/$/, "");
+    const admins = event.app.findRecordsByFilter("users", "isAdmin = true && email != ''", "", 100, 0);
+
+    if (!publicOrigin || admins.length === 0) {
+      event.next();
+      return;
+    }
+
+    const reporterName = reporter.getString("displayName") || "A community member";
+    const submissionTitle = submission.getString("title");
+    const category = event.record.getString("category");
+    const explanation = event.record.getString("explanation");
+    const adminUrl = `${publicWorkshopUrl}/admin`;
+    const submissionUrl = `${publicWorkshopUrl}/${submission.id}/`;
+    const template = emailTemplate("report-email.html")
+      .replaceAll("{{reporterName}}", escapeHtml(reporterName))
+      .replaceAll("{{submissionTitle}}", escapeHtml(submissionTitle))
+      .replaceAll("{{category}}", escapeHtml(category))
+      .replaceAll("{{explanation}}", escapeHtml(explanation))
+      .replaceAll("{{adminUrl}}", escapeHtml(adminUrl))
+      .replaceAll("{{submissionUrl}}", escapeHtml(submissionUrl));
+
+    for (const admin of admins) {
+      try {
+        sendEmail(
+          event.app,
+          admin.email(),
+          `Workshop report: ${submissionTitle}`,
+          `${reporterName} reported “${submissionTitle}” for ${category}.\n\n${explanation}\n\nReview: ${adminUrl}`,
+          template,
+        );
+      } catch (error) {
+        console.log(`Workshop report email failed for admin ${admin.id}: ${error}`);
+      }
+    }
+  } catch (error) {
+    console.log(`Workshop report email failed for ${event.record.id}: ${error}`);
+  }
+  event.next();
+}, "reports");
+
+onRecordDeleteRequest((event) => {
+  const { emailTemplate, escapeHtml, sendEmail } = require(`${__hooks}/workshop-utils.js`);
+  const submissionId = event.record.id;
+  const submissionTitle = event.record.getString("title");
+  const authorId = event.record.get("author");
+  const actor = event.requestInfo().auth;
+  const notifyAuthor = actor && actor.getBool("isAdmin") && actor.id !== authorId;
+
+  event.next();
+
+  if (!notifyAuthor) return;
+
+  try {
+    const author = event.app.findRecordById("users", authorId);
+    const recipientEmail = author.email();
+    if (!recipientEmail) return;
+
+    const publicOrigin = $os.getenv("WORKSHOP_PUBLIC_ORIGIN").replace(/\/$/, "");
+    const workshopUrl = ($os.getenv("WORKSHOP_WEB_URL") || (publicOrigin ? `${publicOrigin}/workshop` : "")).replace(
+      /\/?$/,
+      "/",
+    );
+    const template = emailTemplate("submission-deleted-email.html").replaceAll(
+      "{{submissionTitle}}",
+      escapeHtml(submissionTitle),
+    );
+    const text = `A Workshop moderator removed your submission “${submissionTitle}”.${
+      workshopUrl ? `\n\nReturn to Workshop: ${workshopUrl}` : ""
+    }`;
+
+    sendEmail(event.app, recipientEmail, `Your Workshop submission was removed`, text, template);
+  } catch (error) {
+    console.log(`Workshop deletion email failed for ${submissionId}: ${error}`);
+  }
+}, "submissions");
diff --git a/apps/workshop/pb_migrations/1784240000_workshop_widgets.js b/apps/workshop/pb_migrations/1784240000_workshop_widgets.js
new file mode 100644
index 000000000..0d8860607
--- /dev/null
+++ b/apps/workshop/pb_migrations/1784240000_workshop_widgets.js
@@ -0,0 +1,302 @@
+/// <reference path="../pb_data/types.d.ts" />
+
+const cloneJson = (value) => JSON.parse(JSON.stringify(value));
+const cloneRule = (value) => (value === null ? null : String(value));
+const adminRule = "@request.auth.isAdmin = true";
+const identityFieldsUnchanged = [
+  "@request.body.email:changed = false",
+  "@request.body.displayName:changed = false",
+  "@request.body.avatarUrl:changed = false",
+  "@request.body.githubUsername:changed = false",
+  "@request.body.githubProfileUrl:changed = false",
+].join(" && ");
+const immutableSubmissionFields = [
+  "@request.body.author:changed = false",
+  "@request.body.type:changed = false",
+  "@request.body.widgetSchema:changed = false",
+].join(" && ");
+const moderatorSubmissionFieldsUnchanged = [
+  "@request.body.title:changed = false",
+  "@request.body.description:changed = false",
+  "@request.body.content:changed = false",
+  "@request.body.changelog:changed = false",
+  "@request.body.screenshots:changed = false",
+].join(" && ");
+
+migrate(
+  (app) => {
+    let usersExisted = true;
+    let users;
+    try {
+      users = app.findCollectionByNameOrId("users");
+    } catch {
+      usersExisted = false;
+      users = new Collection({ type: "auth", name: "users" });
+    }
+
+    const stateCollection = new Collection({
+      type: "base",
+      name: "workshop_migration_state",
+      listRule: null,
+      viewRule: null,
+      createRule: null,
+      updateRule: null,
+      deleteRule: null,
+      fields: [{ type: "text", name: "snapshot", required: true, max: 1_000_000 }],
+    });
+    app.save(stateCollection);
+    const state = {
+      usersExisted,
+      users: usersExisted
+        ? {
+            passwordAuth: cloneJson(users.passwordAuth),
+            oauth2: cloneJson(users.oauth2),
+            listRule: cloneRule(users.listRule),
+            viewRule: cloneRule(users.viewRule),
+            createRule: cloneRule(users.createRule),
+            updateRule: cloneRule(users.updateRule),
+            deleteRule: cloneRule(users.deleteRule),
+          }
+        : null,
+      addedUserFields: [],
+    };
+    const addUserField = (field) => {
+      if (users.fields.getByName(field.name)) return;
+      users.fields.add(field);
+      state.addedUserFields.push(field.name);
+    };
+
+    users.passwordAuth = { enabled: false };
+    addUserField(new TextField({ name: "displayName", required: true, min: 1, max: 100 }));
+    addUserField(new URLField({ name: "avatarUrl" }));
+    addUserField(
+      new FileField({
+        name: "avatar",
+        maxSelect: 1,
+        maxSize: 2_097_152,
+        mimeTypes: ["image/png", "image/jpeg", "image/webp"],
+      }),
+    );
+    addUserField(new TextField({ name: "githubUsername", max: 100 }));
+    addUserField(new URLField({ name: "githubProfileUrl" }));
+    addUserField(new BoolField({ name: "isAdmin" }));
+
+    users.listRule = "";
+    users.viewRule = "";
+    users.createRule = '@request.context = "oauth2" && @request.body.isAdmin:isset = false';
+    users.updateRule = `id = @request.auth.id && @request.body.isAdmin:isset = false && ${identityFieldsUnchanged}`;
+    users.deleteRule = null;
+    app.save(users);
+    const stateRecord = new Record(stateCollection);
+    stateRecord.set("snapshot", JSON.stringify(state));
+    app.save(stateRecord);
+
+    const submissions = new Collection({
+      type: "base",
+      name: "submissions",
+      listRule: "",
+      viewRule: "",
+      createRule: "@request.auth.id != '' && @request.body.author = @request.auth.id",
+      updateRule:
+        `(author = @request.auth.id && ${immutableSubmissionFields}) || ` +
+        `(${adminRule} && author != @request.auth.id && ${immutableSubmissionFields} && ${moderatorSubmissionFieldsUnchanged})`,
+      deleteRule: `author = @request.auth.id || ${adminRule}`,
+      fields: [
+        { type: "select", name: "type", required: true, maxSelect: 1, values: ["customWidget", "customCss"] },
+        { type: "text", name: "title", required: true, min: 3, max: 100 },
+        { type: "text", name: "description", max: 2000 },
+        { type: "text", name: "widgetSchema", required: true, min: 1, max: 100 },
+        { type: "text", name: "content", required: true, max: 1000000 },
+        { type: "number", name: "revision", required: true, onlyInt: true, min: 1 },
+        { type: "number", name: "expectedRevision", onlyInt: true, min: 0 },
+        { type: "text", name: "changelog", max: 2000 },
+        { type: "bool", name: "outdated" },
+        {
+          type: "file",
+          name: "screenshots",
+          maxSelect: 5,
+          maxSize: 5242880,
+          mimeTypes: ["image/png", "image/jpeg", "image/webp"],
+          thumbs: ["480x320", "960x640"],
+        },
+        { type: "relation", name: "author", required: true, maxSelect: 1, collectionId: users.id, cascadeDelete: true },
+        { type: "autodate", name: "created", onCreate: true },
+        { type: "autodate", name: "updated", onCreate: true, onUpdate: true },
+      ],
+    });
+    submissions.addIndex("idx_submissions_author", false, "author", "");
+    submissions.addIndex("idx_submissions_created", false, "created", "");
+    app.save(submissions);
+    app
+      .db()
+      .newQuery(
+        `CREATE TRIGGER submissions_revision_cas
+         BEFORE UPDATE ON submissions
+         FOR EACH ROW
+         WHEN NEW.expectedRevision != OLD.revision OR NEW.revision != OLD.revision + 1
+         BEGIN
+           SELECT RAISE(ABORT, 'submission revision compare-and-swap failed');
+         END`,
+      )
+      .execute();
+
+    const votes = new Collection({
+      type: "base",
+      name: "votes",
+      listRule: "user = @request.auth.id",
+      viewRule: "user = @request.auth.id",
+      createRule:
+        "@request.auth.id != '' && @request.body.user = @request.auth.id && (@request.body.value = 1 || @request.body.value = -1)",
+      updateRule:
+        "user = @request.auth.id && @request.body.user:changed = false && @request.body.submission:changed = false && (@request.body.value = 1 || @request.body.value = -1)",
+      deleteRule: "user = @request.auth.id",
+      fields: [
+        {
+          type: "relation",
+          name: "submission",
+          required: true,
+          maxSelect: 1,
+          collectionId: submissions.id,
+          cascadeDelete: true,
+        },
+        { type: "relation", name: "user", required: true, maxSelect: 1, collectionId: users.id, cascadeDelete: true },
+        { type: "number", name: "value", required: true, onlyInt: true, min: -1, max: 1 },
+        { type: "autodate", name: "created", onCreate: true },
+        { type: "autodate", name: "updated", onCreate: true, onUpdate: true },
+      ],
+    });
+    votes.addIndex("idx_votes_user_submission", true, "user, submission", "");
+    votes.addIndex("idx_votes_submission", false, "submission", "");
+    app.save(votes);
+
+    const comments = new Collection({
+      type: "base",
+      name: "comments",
+      listRule: "",
+      viewRule: "",
+      createRule: "@request.auth.id != '' && @request.body.author = @request.auth.id",
+      updateRule:
+        "author = @request.auth.id && @request.body.author:changed = false && @request.body.submission:changed = false",
+      deleteRule: `author = @request.auth.id || ${adminRule}`,
+      fields: [
+        {
+          type: "relation",
+          name: "submission",
+          required: true,
+          maxSelect: 1,
+          collectionId: submissions.id,
+          cascadeDelete: true,
+        },
+        { type: "relation", name: "author", required: true, maxSelect: 1, collectionId: users.id, cascadeDelete: true },
+        { type: "text", name: "content", required: true, min: 1, max: 2000 },
+        { type: "autodate", name: "created", onCreate: true },
+        { type: "autodate", name: "updated", onCreate: true, onUpdate: true },
+      ],
+    });
+    comments.addIndex("idx_comments_submission", false, "submission", "");
+    app.save(comments);
+
+    const reports = new Collection({
+      type: "base",
+      name: "reports",
+      listRule: adminRule,
+      viewRule: adminRule,
+      createRule: "@request.auth.id != '' && @request.body.reporter = @request.auth.id",
+      updateRule:
+        `${adminRule} && ` +
+        "@request.body.reporter:changed = false && " +
+        "@request.body.submission:changed = false && " +
+        "@request.body.category:changed = false && " +
+        "@request.body.explanation:changed = false",
+      deleteRule: adminRule,
+      fields: [
+        {
+          type: "relation",
+          name: "submission",
+          required: true,
+          maxSelect: 1,
+          collectionId: submissions.id,
+          cascadeDelete: true,
+        },
+        {
+          type: "relation",
+          name: "reporter",
+          required: true,
+          maxSelect: 1,
+          collectionId: users.id,
+          cascadeDelete: true,
+        },
+        {
+          type: "select",
+          name: "category",
+          required: true,
+          maxSelect: 1,
+          values: ["malicious", "spam", "copyright", "inappropriate", "other"],
+        },
+        { type: "text", name: "explanation", required: true, min: 3, max: 1000 },
+        { type: "select", name: "status", required: true, maxSelect: 1, values: ["open", "dismissed"] },
+        { type: "autodate", name: "created", onCreate: true },
+        { type: "autodate", name: "updated", onCreate: true, onUpdate: true },
+      ],
+    });
+    reports.addIndex("idx_reports_reporter_submission", true, "reporter, submission", "");
+    reports.addIndex("idx_reports_created", false, "created", "");
+    app.save(reports);
+
+    const listings = new Collection({
+      type: "view",
+      name: "workshop_listings",
+      listRule: "",
+      viewRule: "",
+      viewQuery: `
+        SELECT s.id, s.type, s.title, s.description, s.widgetSchema, s.screenshots, s.author,
+          u.displayName AS authorName, u.avatar AS authorAvatar, u.avatarUrl AS authorAvatarUrl,
+          u.githubUsername AS authorGithubUsername, u.githubProfileUrl AS authorGithubProfileUrl,
+          s.revision, s.changelog, s.outdated, s.created, s.updated,
+          COALESCE((SELECT COUNT(*) FROM votes v WHERE v.submission = s.id AND v.value = 1), 0) AS upvotes,
+          COALESCE((SELECT COUNT(*) FROM votes v WHERE v.submission = s.id AND v.value = -1), 0) AS downvotes,
+          COALESCE((SELECT SUM(v.value) FROM votes v WHERE v.submission = s.id), 0) AS score,
+          COALESCE((SELECT COUNT(*) FROM comments c WHERE c.submission = s.id), 0) AS commentCount,
+          COALESCE((SELECT COUNT(*) FROM reports r WHERE r.submission = s.id AND r.status = 'open'), 0) AS reportCount
+        FROM submissions s
+        JOIN users u ON u.id = s.author
+      `,
+    });
+    app.save(listings);
+  },
+  (app) => {
+    let stateCollection;
+    let stateRecord;
+    try {
+      stateCollection = app.findCollectionByNameOrId("workshop_migration_state");
+      stateRecord = app.findFirstRecordByFilter(stateCollection.id, "");
+    } catch {
+      throw new Error("Workshop migration cannot be rolled back safely because its state snapshot is missing");
+    }
+    const state = JSON.parse(stateRecord.getString("snapshot"));
+    for (const name of ["workshop_listings", "reports", "comments", "votes", "submissions"]) {
+      try {
+        app.delete(app.findCollectionByNameOrId(name));
+      } catch {}
+    }
+
+    const users = app.findCollectionByNameOrId("users");
+    if (state.usersExisted) {
+      users.passwordAuth = state.users.passwordAuth;
+      users.oauth2 = state.users.oauth2;
+      users.listRule = state.users.listRule;
+      users.viewRule = state.users.viewRule;
+      users.createRule = state.users.createRule;
+      users.updateRule = state.users.updateRule;
+      users.deleteRule = state.users.deleteRule;
+      for (const name of state.addedUserFields) {
+        const field = users.fields.getByName(name);
+        if (field) users.fields.removeById(field.id);
+      }
+      app.save(users);
+    } else {
+      app.delete(users);
+    }
+    app.delete(stateCollection);
+  },
+);
diff --git a/apps/workshop/test.sh b/apps/workshop/test.sh
new file mode 100644
index 000000000..b010a45ca
--- /dev/null
+++ b/apps/workshop/test.sh
@@ -0,0 +1,61 @@
+#!/bin/sh
+set -eu
+
+WORKSHOP_TEST_PORT=${WORKSHOP_TEST_PORT:-18090}
+WORKSHOP_TEST_PROJECT="homarr-workshop-test-$$"
+
+node apps/workshop/tests/workshop-contracts.mjs
+node apps/workshop/tests/workshop-migration.mjs
+node apps/workshop/tests/workshop-identity.mjs
+
+cleanup() {
+  PB_EXPOSE_PORT="$WORKSHOP_TEST_PORT" docker compose -p "$WORKSHOP_TEST_PROJECT" \
+    -f apps/workshop/docker-compose.yml down --volumes --remove-orphans >/dev/null 2>&1 || true
+}
+trap cleanup EXIT
+
+PB_EXPOSE_PORT="$WORKSHOP_TEST_PORT" docker compose -p "$WORKSHOP_TEST_PROJECT" \
+  -f apps/workshop/docker-compose.yml up --build -d
+
+for attempt in $(seq 1 60); do
+  if curl --fail --silent "http://127.0.0.1:$WORKSHOP_TEST_PORT/api/health" >/dev/null; then
+    break
+  fi
+  if [ "$attempt" -eq 60 ]; then
+    PB_EXPOSE_PORT="$WORKSHOP_TEST_PORT" docker compose -p "$WORKSHOP_TEST_PROJECT" \
+      -f apps/workshop/docker-compose.yml logs --no-color workshop
+    exit 1
+  fi
+  sleep 1
+done
+
+docker compose -p "$WORKSHOP_TEST_PROJECT" -f apps/workshop/docker-compose.yml exec -T workshop \
+  pocketbase superuser create \
+  workshop-test@example.invalid 'WorkshopLocalTest123!' --dir=/pb_data
+
+WORKSHOP_TEST_URL="http://127.0.0.1:$WORKSHOP_TEST_PORT" node apps/workshop/tests/workshop.integration.mjs
+
+for client_id in workshop-test-client workshop-rotated-client; do
+  GITHUB_CLIENT_ID="$client_id" GITHUB_CLIENT_SECRET="workshop-test-secret" PB_EXPOSE_PORT="$WORKSHOP_TEST_PORT" \
+    docker compose -p "$WORKSHOP_TEST_PROJECT" -f apps/workshop/docker-compose.yml up -d --force-recreate workshop
+  for attempt in $(seq 1 60); do
+    if curl --fail --silent "http://127.0.0.1:$WORKSHOP_TEST_PORT/api/health" >/dev/null; then
+      break
+    fi
+    if [ "$attempt" -eq 60 ]; then
+      exit 1
+    fi
+    sleep 1
+  done
+  WORKSHOP_TEST_URL="http://127.0.0.1:$WORKSHOP_TEST_PORT" EXPECTED_GITHUB_CLIENT_ID="$client_id" \
+    node apps/workshop/tests/oauth-sync.integration.mjs
+done
+
+PB_EXPOSE_PORT="$WORKSHOP_TEST_PORT" docker compose -p "$WORKSHOP_TEST_PROJECT" \
+  -f apps/workshop/docker-compose.yml stop workshop
+printf 'y\n' | PB_EXPOSE_PORT="$WORKSHOP_TEST_PORT" docker compose -p "$WORKSHOP_TEST_PROJECT" \
+  -f apps/workshop/docker-compose.yml run --rm --no-deps --entrypoint pocketbase workshop \
+  migrate down 1 --dir=/pb_data --migrationsDir=/pb_migrations
+PB_EXPOSE_PORT="$WORKSHOP_TEST_PORT" docker compose -p "$WORKSHOP_TEST_PROJECT" \
+  -f apps/workshop/docker-compose.yml run --rm --no-deps --entrypoint pocketbase workshop \
+  migrate up --dir=/pb_data --migrationsDir=/pb_migrations
diff --git a/apps/workshop/tests/oauth-sync.integration.mjs b/apps/workshop/tests/oauth-sync.integration.mjs
new file mode 100644
index 000000000..6a34320be
--- /dev/null
+++ b/apps/workshop/tests/oauth-sync.integration.mjs
@@ -0,0 +1,34 @@
+const baseUrl = process.env.WORKSHOP_TEST_URL ?? "http://127.0.0.1:18090";
+const expectedClientId = process.env.EXPECTED_GITHUB_CLIENT_ID;
+if (!expectedClientId) throw new Error("EXPECTED_GITHUB_CLIENT_ID is required");
+
+const request = async (path, init = {}) => {
+  const response = await fetch(`${baseUrl}${path}`, {
+    ...init,
+    headers: { "content-type": "application/json", ...init.headers },
+  });
+  const body = await response.json().catch(() => null);
+  if (!response.ok) throw new Error(`${response.status} ${path}: ${JSON.stringify(body)}`);
+  return body;
+};
+
+const root = await request("/api/collections/_superusers/auth-with-password", {
+  method: "POST",
+  body: JSON.stringify({ identity: "workshop-test@example.invalid", password: "WorkshopLocalTest123!" }),
+});
+const users = await request("/api/collections/users", {
+  headers: { authorization: `Bearer ${root.token}` },
+});
+const github = users.oauth2?.providers?.find((provider) => provider.name === "github");
+if (!users.oauth2?.enabled || github?.clientId !== expectedClientId) {
+  throw new Error(`GitHub OAuth was not synchronized for ${expectedClientId}`);
+}
+if (
+  users.oauth2?.mappedFields?.username !== "displayName" ||
+  users.oauth2?.mappedFields?.name ||
+  users.oauth2?.mappedFields?.avatarURL !== "avatarUrl"
+) {
+  throw new Error(`GitHub OAuth field mapping was not synchronized: ${JSON.stringify(users.oauth2?.mappedFields)}`);
+}
+
+console.log(`Workshop OAuth synchronization passed for ${expectedClientId}`);
diff --git a/apps/workshop/tests/workshop-contracts.mjs b/apps/workshop/tests/workshop-contracts.mjs
new file mode 100644
index 000000000..7219fe970
--- /dev/null
+++ b/apps/workshop/tests/workshop-contracts.mjs
@@ -0,0 +1,57 @@
+import { access, readFile } from "node:fs/promises";
+import { resolve } from "node:path";
+
+const read = (path) => readFile(resolve(path), "utf8");
+
+const packageJson = JSON.parse(await read("packages/workshop/package.json"));
+const clientExport = packageJson.exports?.["./client"];
+if (typeof clientExport !== "string") throw new Error("Workshop client export is missing");
+await access(resolve("packages/workshop", clientExport));
+
+const hook = await read("apps/workshop/pb_hooks/workshop.pb.js");
+if (!hook.includes("require(`${__hooks}/workshop-utils.js`)")) {
+  throw new Error("Workshop handlers must load shared helpers inside their isolated PocketBase contexts");
+}
+if (!hook.includes("onBootstrap") || !hook.includes("users.oauth2.providers = configured")) {
+  throw new Error("Workshop OAuth settings must be synchronized at every bootstrap");
+}
+if (hook.includes("validateAndNormalizeSubmission")) {
+  throw new Error("PocketBase must store Workshop submissions without interpreting their content");
+}
+for (const artifact of [
+  "apps/workshop/pb_hooks/widget-validator.js",
+  "apps/workshop/pb_hooks/widget-validator.bundle.cjs",
+  "packages/workshop/src/pocketbase-validator.ts",
+  "scripts/build-workshop-validator.mjs",
+]) {
+  await access(resolve(artifact))
+    .then(() => {
+      throw new Error(`Workshop validator artifact must stay removed: ${artifact}`);
+    })
+    .catch((error) => {
+      if (error instanceof Error && "code" in error && error.code === "ENOENT") return;
+      throw error;
+    });
+}
+if (hook.includes('findAllRecords("users")') || !hook.includes('findRecordsByFilter("users"')) {
+  throw new Error("Workshop report notifications must use a filtered, bounded administrator query");
+}
+
+const migration = await read("apps/workshop/pb_migrations/1784240000_workshop_widgets.js");
+for (const required of [
+  "workshop_migration_state",
+  "addedUserFields",
+  "cloneRule(users.listRule)",
+  "CREATE TRIGGER submissions_revision_cas",
+  "NEW.expectedRevision != OLD.revision",
+  "users.passwordAuth = state.users.passwordAuth",
+  "users.oauth2 = state.users.oauth2",
+  "app.delete(users)",
+]) {
+  if (!migration.includes(required)) throw new Error(`Workshop rollback is missing state restoration: ${required}`);
+}
+
+const workflow = await read(".github/workflows/workshop.yml");
+if (/\n\s+paths:/u.test(workflow)) throw new Error("Workshop workflow must not filter out Docker build inputs");
+
+console.log("Workshop static contracts passed");
diff --git a/apps/workshop/tests/workshop-identity.mjs b/apps/workshop/tests/workshop-identity.mjs
new file mode 100644
index 000000000..cac345b60
--- /dev/null
+++ b/apps/workshop/tests/workshop-identity.mjs
@@ -0,0 +1,63 @@
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+const { deriveGithubIdentity } = require("../pb_hooks/workshop-utils.js");
+
+const identity = deriveGithubIdentity(
+  {
+    name: "  Octo Cat  ",
+    username: "octocat",
+    avatarURL: "https://avatars.githubusercontent.com/u/1?v=4",
+    rawUser: {},
+  },
+  "record123456",
+);
+if (
+  identity.displayName !== "octocat" ||
+  identity.githubUsername !== "octocat" ||
+  identity.githubProfileUrl !== "https://github.com/octocat" ||
+  identity.avatarUrl !== "https://avatars.githubusercontent.com/u/1?v=4"
+) {
+  throw new Error(`Trusted GitHub identity was not normalized: ${JSON.stringify(identity)}`);
+}
+
+const rawFallback = deriveGithubIdentity(
+  {
+    name: "",
+    username: "",
+    avatarURL: "",
+    rawUser: {
+      name: "\nRaw User\u0000",
+      login: "raw-user",
+      avatar_url: "https://avatars.githubusercontent.com/u/2",
+    },
+  },
+  "record123456",
+);
+if (
+  rawFallback.displayName !== "raw-user" ||
+  rawFallback.githubUsername !== "raw-user" ||
+  rawFallback.githubProfileUrl !== "https://github.com/raw-user"
+) {
+  throw new Error(`Raw GitHub identity fallback was not normalized: ${JSON.stringify(rawFallback)}`);
+}
+
+const rejected = deriveGithubIdentity(
+  {
+    name: "\n",
+    username: "not/a/github-user",
+    avatarURL: "javascript:alert(1)",
+    rawUser: {},
+  },
+  "record123456",
+);
+if (
+  rejected.displayName !== "GitHub user record12" ||
+  rejected.githubUsername !== "" ||
+  rejected.githubProfileUrl !== "" ||
+  rejected.avatarUrl !== ""
+) {
+  throw new Error(`Invalid provider identity fields were retained: ${JSON.stringify(rejected)}`);
+}
+
+console.log("Workshop OAuth identity normalization passed");
diff --git a/apps/workshop/tests/workshop-migration.mjs b/apps/workshop/tests/workshop-migration.mjs
new file mode 100644
index 000000000..97cad695d
--- /dev/null
+++ b/apps/workshop/tests/workshop-migration.mjs
@@ -0,0 +1,166 @@
+import { readFile } from "node:fs/promises";
+import vm from "node:vm";
+
+// oxlint-disable-next-line typescript/no-extraneous-class -- Mirrors the PocketBase Field constructor API.
+class Field {
+  constructor(options) {
+    Object.assign(this, options);
+    this.id = `field-${options.name}`;
+  }
+}
+
+class Fields {
+  constructor(fields = []) {
+    this.values = fields.map((field) => (field instanceof Field ? field : new Field(field)));
+  }
+  getByName(name) {
+    return this.values.find((field) => field.name === name);
+  }
+  add(field) {
+    this.values.push(field);
+  }
+  removeById(id) {
+    this.values = this.values.filter((field) => field.id !== id);
+  }
+}
+
+class Collection {
+  constructor(options) {
+    Object.assign(this, options);
+    this.id = options.id ?? options.name;
+    this.fields = new Fields(options.fields);
+  }
+  addIndex() {}
+}
+
+let recordId = 0;
+class Record {
+  constructor(collection) {
+    this.collection = collection;
+    this.id = `record-${++recordId}`;
+    this.data = new Map();
+  }
+  set(name, value) {
+    this.data.set(name, value);
+  }
+  getString(name) {
+    return String(this.data.get(name) ?? "");
+  }
+}
+
+const original = {
+  passwordAuth: { enabled: true, identityFields: ["email"] },
+  oauth2: { enabled: true, providers: [{ name: "original", clientId: "before", clientSecret: "before-secret" }] },
+  rules: {
+    listRule: "original-list",
+    viewRule: "original-view",
+    createRule: "original-create",
+    updateRule: "original-update",
+    deleteRule: "original-delete",
+  },
+};
+const users = new Collection({ type: "auth", name: "users", fields: [{ type: "text", name: "existing" }] });
+users.passwordAuth = structuredClone(original.passwordAuth);
+users.oauth2 = structuredClone(original.oauth2);
+Object.assign(users, original.rules);
+const collections = new Map([[users.id, users]]);
+const records = new Map();
+const rawQueries = [];
+const app = {
+  db() {
+    return {
+      newQuery(sql) {
+        return {
+          execute() {
+            rawQueries.push(sql);
+          },
+        };
+      },
+    };
+  },
+  findCollectionByNameOrId(name) {
+    const collection = collections.get(name);
+    if (!collection) throw new Error(`Missing collection ${name}`);
+    return collection;
+  },
+  findFirstRecordByFilter(collectionId) {
+    const record = records.get(collectionId)?.[0];
+    if (!record) throw new Error(`Missing state record ${collectionId}`);
+    return record;
+  },
+  save(value) {
+    if (value instanceof Collection) collections.set(value.id, value);
+    else if (value instanceof Record)
+      records.set(value.collection.id, [...(records.get(value.collection.id) ?? []), value]);
+  },
+  delete(collection) {
+    collections.delete(collection.id);
+    records.delete(collection.id);
+  },
+};
+
+let migration;
+const sandbox = {
+  Collection,
+  Record,
+  TextField: Field,
+  URLField: Field,
+  FileField: Field,
+  BoolField: Field,
+  console,
+  migrate: (up, down) => {
+    migration = { up, down };
+  },
+};
+const source = await readFile("apps/workshop/pb_migrations/1784240000_workshop_widgets.js", "utf8");
+vm.runInNewContext(source, sandbox);
+if (!migration) throw new Error("Workshop migration did not register");
+
+migration.up(app);
+if (!collections.has("workshop_migration_state")) {
+  throw new Error("Workshop migration did not capture state before applying changes");
+}
+if (
+  !rawQueries.some(
+    (query) =>
+      query.includes("CREATE TRIGGER submissions_revision_cas") &&
+      query.includes("NEW.expectedRevision != OLD.revision"),
+  )
+) {
+  throw new Error("Workshop migration did not install the atomic submission revision guard");
+}
+migration.down(app);
+
+if (JSON.stringify(users.passwordAuth) !== JSON.stringify(original.passwordAuth))
+  throw new Error("Password authentication was not restored");
+if (JSON.stringify(users.oauth2) !== JSON.stringify(original.oauth2))
+  throw new Error("OAuth settings were not restored");
+for (const [name, value] of Object.entries(original.rules)) {
+  if (users[name] !== value) throw new Error(`User rule ${name} was not restored`);
+}
+if (users.fields.values.map((field) => field.name).join(",") !== "existing")
+  throw new Error("Workshop user fields were not removed on rollback");
+for (const name of ["workshop_migration_state", "workshop_listings", "reports", "comments", "votes", "submissions"]) {
+  if (collections.has(name)) throw new Error(`Rollback left collection ${name}`);
+}
+
+collections.clear();
+records.clear();
+rawQueries.length = 0;
+
+migration.up(app);
+if (!collections.has("users")) throw new Error("Fresh migration did not create the users collection");
+migration.down(app);
+for (const name of [
+  "users",
+  "workshop_migration_state",
+  "workshop_listings",
+  "reports",
+  "comments",
+  "votes",
+  "submissions",
+]) {
+  if (collections.has(name)) throw new Error(`Fresh rollback left collection ${name}`);
+}
+
+console.log("Workshop migration up/down restoration passed");
diff --git a/apps/workshop/tests/workshop.integration.mjs b/apps/workshop/tests/workshop.integration.mjs
new file mode 100644
index 000000000..be597e96a
--- /dev/null
+++ b/apps/workshop/tests/workshop.integration.mjs
@@ -0,0 +1,425 @@
+const baseUrl = process.env.WORKSHOP_TEST_URL ?? "http://127.0.0.1:18090";
+
+const request = async (path, init = {}) => {
+  const response = await fetch(`${baseUrl}${path}`, {
+    ...init,
+    headers: { "content-type": "application/json", ...init.headers },
+  });
+  const body = await response.json().catch(() => null);
+  if (!response.ok) throw new Error(`${response.status} ${path}: ${JSON.stringify(body)}`);
+  return body;
+};
+
+const expectStatus = async (path, init, expected) => {
+  const response = await fetch(`${baseUrl}${path}`, {
+    ...init,
+    headers: { "content-type": "application/json", ...init.headers },
+  });
+  if (response.status !== expected) {
+    const body = await response.text();
+    throw new Error(`Expected ${expected} for ${path}, received ${response.status}: ${body}`);
+  }
+};
+
+const root = await request("/api/collections/_superusers/auth-with-password", {
+  method: "POST",
+  body: JSON.stringify({ identity: "workshop-test@example.invalid", password: "WorkshopLocalTest123!" }),
+});
+const rootHeaders = { authorization: `Bearer ${root.token}` };
+const collections = await request("/api/collections?perPage=200", { headers: rootHeaders });
+const collectionNames = new Set(collections.items.map((collection) => collection.name));
+for (const required of ["submissions", "votes", "comments", "reports", "workshop_listings"]) {
+  if (!collectionNames.has(required)) throw new Error(`Missing Workshop collection: ${required}`);
+}
+for (const removed of ["workshop_admin_actions", "workshop_admins"]) {
+  if (collectionNames.has(removed)) throw new Error(`Removed Workshop collection still exists: ${removed}`);
+}
+
+// Production uses GitHub OAuth. Password auth is enabled only in this disposable database.
+const usersCollection = await request("/api/collections/users", { headers: rootHeaders });
+if (usersCollection.createRule !== '@request.context = "oauth2" && @request.body.isAdmin:isset = false') {
+  throw new Error("User creation must be limited to OAuth without administrator fields");
+}
+await request("/api/collections/users", {
+  method: "PATCH",
+  headers: rootHeaders,
+  body: JSON.stringify({ ...usersCollection, passwordAuth: { enabled: true, identityFields: ["email"] } }),
+});
+
+const createUser = async (email, displayName, password, extra = {}) =>
+  request("/api/collections/users/records", {
+    method: "POST",
+    headers: rootHeaders,
+    body: JSON.stringify({
+      email,
+      emailVisibility: false,
+      verified: true,
+      password,
+      passwordConfirm: password,
+      displayName,
+      ...extra,
+    }),
+  });
+
+const signIn = async (email, password) => {
+  const auth = await request("/api/collections/users/auth-with-password", {
+    method: "POST",
+    body: JSON.stringify({ identity: email, password }),
+  });
+  return { auth, headers: { authorization: `Bearer ${auth.token}` } };
+};
+
+const authorPassword = "WorkshopAuthor123!";
+const author = await createUser("widget-author@example.invalid", "Widget Author", authorPassword);
+const authorSession = await signIn(author.email, authorPassword);
+await expectStatus(
+  `/api/collections/users/records/${author.id}`,
+  { method: "PATCH", headers: authorSession.headers, body: JSON.stringify({ isAdmin: true }) },
+  404,
+);
+for (const [field, value] of [
+  ["displayName", "Homarr Team"],
+  ["avatarUrl", "https://example.invalid/forged-avatar.png"],
+  ["githubUsername", "homarr-labs"],
+  ["githubProfileUrl", "https://github.com/homarr-labs"],
+]) {
+  await expectStatus(
+    `/api/collections/users/records/${author.id}`,
+    { method: "PATCH", headers: authorSession.headers, body: JSON.stringify({ [field]: value }) },
+    404,
+  );
+}
+const forgedAvatar = new FormData();
+forgedAvatar.set(
+  "avatar",
+  new Blob(
+    [
+      Buffer.from(
+        "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
+        "base64",
+      ),
+    ],
+    { type: "image/png" },
+  ),
+  "forged-avatar.png",
+);
+const avatarResponse = await fetch(`${baseUrl}/api/collections/users/records/${author.id}`, {
+  method: "PATCH",
+  headers: authorSession.headers,
+  body: forgedAvatar,
+});
+const avatarResponseBody = await avatarResponse.json().catch(() => null);
+if (avatarResponse.status !== 400 || !JSON.stringify(avatarResponseBody).includes("managed by GitHub OAuth")) {
+  throw new Error(
+    `Workshop user avatar upload bypassed the OAuth identity hook: ${avatarResponse.status} ${JSON.stringify(avatarResponseBody)}`,
+  );
+}
+const unchangedAuthor = await request(`/api/collections/users/records/${author.id}`, {
+  headers: authorSession.headers,
+});
+if (
+  unchangedAuthor.displayName !== "Widget Author" ||
+  unchangedAuthor.avatar ||
+  unchangedAuthor.avatarUrl ||
+  unchangedAuthor.githubUsername ||
+  unchangedAuthor.githubProfileUrl
+) {
+  throw new Error("Workshop users can forge OAuth provider identity fields");
+}
+
+const visitorPassword = "WorkshopVisitor123!";
+const visitor = await createUser("widget-visitor@example.invalid", "Widget Visitor", visitorPassword);
+const visitorSession = await signIn(visitor.email, visitorPassword);
+
+const widget = {
+  $schema: "homarr-custom-widget-v2",
+  name: "Workshop runtime probe",
+  sources: {
+    default: {
+      name: "API",
+      baseUrl: "https://example.com",
+      networkScope: "public",
+      auth: "none",
+    },
+  },
+  requests: {},
+  options: {},
+  template: "<Text>Runtime probe</Text>",
+};
+
+const submission = await request("/api/collections/submissions/records", {
+  method: "POST",
+  headers: authorSession.headers,
+  body: JSON.stringify({
+    type: "customWidget",
+    title: "Workshop runtime probe",
+    description: "PocketBase integration test",
+    widgetSchema: widget.$schema,
+    content: JSON.stringify(widget),
+    author: author.id,
+    revision: 999,
+    changelog: "Forged publication metadata",
+    outdated: true,
+  }),
+});
+if (
+  submission.author !== author.id ||
+  submission.title !== "Workshop runtime probe" ||
+  submission.widgetSchema !== widget.$schema ||
+  submission.revision !== 1 ||
+  submission.changelog !== "" ||
+  submission.outdated !== false
+) {
+  throw new Error("Submission publication metadata was not initialized server-side");
+}
+const ownerVotes = await request("/api/collections/votes/records", { headers: authorSession.headers });
+if (
+  ownerVotes.items.length !== 1 ||
+  ownerVotes.items[0].submission !== submission.id ||
+  ownerVotes.items[0].value !== 1
+) {
+  throw new Error("New submissions must receive one real author-owned upvote");
+}
+
+const updatedSubmission = await request(`/api/collections/submissions/records/${submission.id}`, {
+  method: "PATCH",
+  headers: authorSession.headers,
+  body: JSON.stringify({ title: "Updated runtime probe", expectedRevision: 1, revision: 500 }),
+});
+if (updatedSubmission.title !== "Updated runtime probe" || updatedSubmission.revision !== 2)
+  throw new Error("Authors must be able to edit their submission");
+const outdatedSubmission = await request(`/api/collections/submissions/records/${submission.id}`, {
+  method: "PATCH",
+  headers: authorSession.headers,
+  body: JSON.stringify({ outdated: true, expectedRevision: 2, revision: 900, changelog: "Needs a newer API" }),
+});
+if (!outdatedSubmission.outdated || outdatedSubmission.revision !== 3) {
+  throw new Error("PocketBase must own submission revision increments");
+}
+
+for (let attempt = 0; attempt < 5; attempt += 1) {
+  const expectedRevision = 3 + attempt;
+  const concurrentUpdates = await Promise.all(
+    ["Concurrent first", "Concurrent second"].map((title) =>
+      fetch(`${baseUrl}/api/collections/submissions/records/${submission.id}`, {
+        method: "PATCH",
+        headers: { "content-type": "application/json", ...authorSession.headers },
+        body: JSON.stringify({ title: `${title} ${attempt}`, expectedRevision }),
+      }),
+    ),
+  );
+  if (concurrentUpdates.filter((response) => response.ok).length !== 1) {
+    throw new Error("Exactly one update may consume an expected submission revision");
+  }
+}
+
+await expectStatus(
+  `/api/collections/submissions/records/${submission.id}`,
+  { method: "PATCH", headers: authorSession.headers, body: JSON.stringify({ author: visitor.id }) },
+  404,
+);
+await expectStatus(
+  `/api/collections/submissions/records/${submission.id}`,
+  { method: "PATCH", headers: visitorSession.headers, body: JSON.stringify({ title: "Not mine" }) },
+  404,
+);
+await expectStatus(
+  `/api/collections/submissions/records/${submission.id}`,
+  { method: "DELETE", headers: visitorSession.headers },
+  404,
+);
+
+const vote = await request("/api/collections/votes/records", {
+  method: "POST",
+  headers: visitorSession.headers,
+  body: JSON.stringify({ submission: submission.id, user: visitor.id, value: 1 }),
+});
+await expectStatus(
+  "/api/collections/votes/records",
+  {
+    method: "POST",
+    headers: visitorSession.headers,
+    body: JSON.stringify({ submission: submission.id, user: visitor.id, value: 1 }),
+  },
+  400,
+);
+await expectStatus(
+  `/api/collections/votes/records/${vote.id}`,
+  { method: "PATCH", headers: visitorSession.headers, body: JSON.stringify({ user: author.id }) },
+  404,
+);
+await expectStatus(
+  `/api/collections/votes/records/${vote.id}`,
+  { method: "PATCH", headers: visitorSession.headers, body: JSON.stringify({ value: 0 }) },
+  404,
+);
+
+const listing = await request(`/api/collections/workshop_listings/records/${submission.id}`);
+if (
+  listing.score !== 2 ||
+  listing.upvotes !== 2 ||
+  listing.downvotes !== 0 ||
+  listing.authorName !== "Widget Author" ||
+  listing.widgetSchema !== widget.$schema
+) {
+  throw new Error("Workshop listing data is incorrect");
+}
+
+const comment = await request("/api/collections/comments/records?expand=author", {
+  method: "POST",
+  headers: visitorSession.headers,
+  body: JSON.stringify({ submission: submission.id, author: visitor.id, content: "Useful widget" }),
+});
+if (comment.author !== visitor.id || comment.expand.author.displayName !== "Widget Visitor") {
+  throw new Error("Comment author expansion is incorrect");
+}
+await expectStatus(
+  `/api/collections/comments/records/${comment.id}`,
+  { method: "PATCH", headers: authorSession.headers, body: JSON.stringify({ content: "Not mine" }) },
+  404,
+);
+const editedComment = await request(`/api/collections/comments/records/${comment.id}`, {
+  method: "PATCH",
+  headers: visitorSession.headers,
+  body: JSON.stringify({ content: "Useful updated widget" }),
+});
+if (editedComment.content !== "Useful updated widget") throw new Error("Comment editing failed");
+
+await expectStatus(
+  "/api/collections/reports/records",
+  {
+    method: "POST",
+    headers: visitorSession.headers,
+    body: JSON.stringify({
+      submission: submission.id,
+      reporter: author.id,
+      category: "other",
+      explanation: "Spoofed reporter",
+      status: "open",
+    }),
+  },
+  400,
+);
+const report = await request("/api/collections/reports/records", {
+  method: "POST",
+  headers: visitorSession.headers,
+  body: JSON.stringify({
+    submission: submission.id,
+    reporter: visitor.id,
+    category: "other",
+    explanation: "Runtime moderation test",
+    status: "dismissed",
+  }),
+});
+await expectStatus(`/api/collections/reports/records/${report.id}`, { headers: visitorSession.headers }, 404);
+await expectStatus("/api/collections/reports/records", { headers: visitorSession.headers }, 200);
+const publicReports = await request("/api/collections/reports/records", { headers: visitorSession.headers });
+if (publicReports.items.length !== 0) throw new Error("Report details must remain private to Workshop moderators");
+await expectStatus(
+  `/api/collections/reports/records/${report.id}`,
+  { method: "DELETE", headers: visitorSession.headers },
+  404,
+);
+
+const promotedAuthor = await request(`/api/collections/users/records/${author.id}`, {
+  method: "PATCH",
+  headers: rootHeaders,
+  body: JSON.stringify({ isAdmin: true }),
+});
+if (promotedAuthor.isAdmin !== true) throw new Error("PocketBase superusers must be able to appoint admins");
+
+await expectStatus(
+  `/api/collections/comments/records/${comment.id}`,
+  { method: "DELETE", headers: authorSession.headers },
+  204,
+);
+
+const reports = await request("/api/collections/reports/records", { headers: authorSession.headers });
+if (reports.items.length !== 1 || reports.items[0].reporter !== visitor.id || reports.items[0].status !== "open") {
+  throw new Error("Workshop moderators must be able to review reports");
+}
+await expectStatus(
+  `/api/collections/reports/records/${report.id}`,
+  {
+    method: "PATCH",
+    headers: authorSession.headers,
+    body: JSON.stringify({ category: "spam", explanation: "Moderator-authored replacement" }),
+  },
+  404,
+);
+const dismissedReport = await request(`/api/collections/reports/records/${report.id}`, {
+  method: "PATCH",
+  headers: authorSession.headers,
+  body: JSON.stringify({ status: "dismissed" }),
+});
+if (dismissedReport.status !== "dismissed") throw new Error("Workshop moderators must be able to dismiss reports");
+const reopenedReport = await request("/api/collections/reports/records", {
+  method: "POST",
+  headers: visitorSession.headers,
+  body: JSON.stringify({
+    submission: submission.id,
+    reporter: visitor.id,
+    category: "malicious",
+    explanation: "The later submission revision now needs another review",
+    status: "dismissed",
+  }),
+});
+if (reopenedReport.status !== "open" || reopenedReport.id === report.id) {
+  throw new Error("A dismissed Workshop report must be replaceable with a fresh open report");
+}
+const reopenedReports = await request("/api/collections/reports/records", { headers: authorSession.headers });
+if (
+  reopenedReports.items.length !== 1 ||
+  reopenedReports.items[0].id !== reopenedReport.id ||
+  reopenedReports.items[0].status !== "open"
+) {
+  throw new Error("Re-reporting must replace only the reporter's dismissed report");
+}
+
+const visitorSubmission = await request("/api/collections/submissions/records", {
+  method: "POST",
+  headers: visitorSession.headers,
+  body: JSON.stringify({
+    type: "customWidget",
+    title: "Administrator deletion probe",
+    content: JSON.stringify(widget),
+    widgetSchema: widget.$schema,
+    author: visitor.id,
+    revision: 1,
+    changelog: "Initial publication",
+    outdated: false,
+  }),
+});
+await expectStatus(
+  `/api/collections/submissions/records/${visitorSubmission.id}`,
+  {
+    method: "PATCH",
+    headers: authorSession.headers,
+    body: JSON.stringify({
+      title: "Moderator-authored replacement",
+      content: JSON.stringify({ ...widget, name: "Moderator-authored replacement" }),
+      expectedRevision: 1,
+    }),
+  },
+  404,
+);
+const moderatedStatus = await request(`/api/collections/submissions/records/${visitorSubmission.id}`, {
+  method: "PATCH",
+  headers: authorSession.headers,
+  body: JSON.stringify({ outdated: true, expectedRevision: 1 }),
+});
+if (!moderatedStatus.outdated || moderatedStatus.revision !== 2) {
+  throw new Error("Workshop moderators must be limited to CAS-protected submission status changes");
+}
+await expectStatus(
+  `/api/collections/submissions/records/${visitorSubmission.id}`,
+  { method: "DELETE", headers: authorSession.headers },
+  204,
+);
+await expectStatus(
+  `/api/collections/submissions/records/${submission.id}`,
+  { method: "DELETE", headers: authorSession.headers },
+  204,
+);
+
+console.log("Workshop PocketBase integration passed");
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
new file mode 100644
index 000000000..6f08a1a23
--- /dev/null
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -0,0 +1,505 @@
+import type { Browser, BrowserContext, Page } from "@playwright/test";
+import { chromium, expect } from "@playwright/test";
+import { createId } from "@paralleldrive/cuid2";
+import { eq } from "drizzle-orm";
+import { stringify } from "superjson";
+import { afterAll, beforeAll, describe, test } from "vitest";
+
+import { hashPasswordAsync } from "../packages/auth/security";
+import {
+  apps,
+  boardUserPermissions,
+  boards,
+  itemLayouts,
+  items,
+  layouts,
+  sections,
+  users,
+} from "../packages/db/schema/sqlite";
+import type { SqliteDatabase } from "./shared/e2e-db";
+import { createSqliteDbFileAsync } from "./shared/e2e-db";
+import { createHomarrContainer } from "./shared/create-homarr-container";
+import { loginAsync } from "./shared/login";
+import { seedAdminUserAsync } from "./shared/seed-admin-user";
+
+const ownerCredentials = { username: "owner", password: "Comp(exP4sswOrd" };
+const disabledModifierCredentials = { username: "modifier", password: "Comp(exP4sswOrd" };
+const viewerCredentials = { username: "viewer", password: "Comp(exP4sswOrd" };
+const boardName = "advanced-interactions-e2e";
+
+describe("Board advanced interactions", () => {
+  let browser: Browser;
+  let baseUrl: string;
+  let stopContainerAsync: (() => Promise<void>) | undefined;
+
+  beforeAll(async () => {
+    const { db, localMountPath } = await createSqliteDbFileAsync();
+    const { userId: ownerId } = await seedAdminUserAsync(db, ownerCredentials);
+    await seedInteractionBoardAsync(db, ownerId);
+    await seedCredentialsUserAsync(db, {
+      ...disabledModifierCredentials,
+      enableRightClickOnWidgets: false,
+      boardPermission: "modify",
+    });
+    await seedCredentialsUserAsync(db, {
+      ...viewerCredentials,
+      enableRightClickOnWidgets: true,
+      boardPermission: "view",
+    });
+
+    const homarrContainer = await createHomarrContainer({
+      environment: { AUTH_PROVIDERS: "credentials" },
+      mounts: { "/appdata": localMountPath },
+    }).start();
+    stopContainerAsync = async () => {
+      await homarrContainer.stop();
+    };
+    baseUrl = `http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`;
+    browser = await chromium.launch();
+  }, 120_000);
+
+  afterAll(async () => {
+    await browser?.close();
+    await stopContainerAsync?.();
+  });
+
+  test("opens advanced view from Shift-hover, keyboard, and the widget context menu", async () => {
+    const { context, page } = await openBoardAsync(browser, baseUrl, ownerCredentials);
+
+    try {
+      const widget = page.locator("[data-grid-item-id][data-kind='clock'] [data-advanced-focus-source]").first();
+      const compactSurface = page.locator(".clock-wrapper").first();
+      const previewSurface = page.getByRole("region", { name: "Date and time advanced view" });
+      const manualSurface = page.getByRole("dialog", { name: "Date and time advanced view" });
+      const bookmarksPreviewSurface = page.getByRole("region", { name: "Bookmarks advanced view" });
+      const dimmingOverlay = page.locator("[data-advanced-focus-overlay]");
+      const otherWidget = page
+        .locator("[data-grid-item-id][data-kind='bookmarks'] [data-advanced-focus-source]")
+        .first();
+      const header = page.locator("header[data-advanced-focus-background]");
+      const boardMain = page.locator("main[data-advanced-focus-background]");
+
+      await compactSurface.evaluate((element) => {
+        element.setAttribute("data-lifecycle-probe", "same-instance");
+      });
+      await widget.focus();
+      await page.keyboard.down("Shift");
+      await widget.hover();
+      await expect(previewSurface).toBeVisible({ timeout: 2_000 });
+      await expect(previewSurface).toHaveCSS("animation-name", "none");
+      const compactBounds = await widget.boundingBox();
+      const advancedBounds = await previewSurface.boundingBox();
+      if (!compactBounds || !advancedBounds) throw new Error("Advanced widget has no bounds");
+      expect(advancedBounds?.width).toBeGreaterThan(compactBounds?.width ?? 0);
+      await expect(previewSurface).toHaveAttribute("data-lifecycle-probe", "same-instance");
+      await expect(dimmingOverlay).toBeVisible();
+      await expect(dimmingOverlay).toHaveCSS("pointer-events", "none");
+      await expect(otherWidget).toBeVisible();
+      await expect(widget).toBeFocused();
+      await expect(header).not.toHaveAttribute("inert", "");
+      await expect(boardMain).not.toHaveAttribute("inert", "");
+
+      await previewSurface.click({ button: "right", position: { x: 80, y: 80 } });
+      const portalledMenuItem = page.getByRole("menuitem", { name: "Open advanced view" });
+      await expect(portalledMenuItem).toBeVisible();
+      await portalledMenuItem.hover();
+      await expect(previewSurface).toBeVisible();
+      await page.keyboard.press("Escape");
+      await expect(portalledMenuItem).toBeHidden();
+      await expect(previewSurface).toBeVisible();
+
+      const otherBounds = await otherWidget.boundingBox();
+      expect(otherBounds).not.toBeNull();
+      if (!otherBounds) throw new Error("Bookmarks widget has no bounds");
+      await previewSurface.evaluate(
+        (element, position) => {
+          const probe = document.createElement("button");
+          probe.dataset.interactivePreviewProbe = "true";
+          probe.style.cssText = `position:absolute;z-index:20;width:40px;height:40px;left:${position.left}px;top:${position.top}px`;
+          element.append(probe);
+        },
+        {
+          left: otherBounds.x + otherBounds.width / 2 - advancedBounds.x - 20,
+          top: otherBounds.y + otherBounds.height / 2 - advancedBounds.y - 20,
+        },
+      );
+      const interactivePreviewProbe = previewSurface.locator("[data-interactive-preview-probe='true']");
+      await interactivePreviewProbe.hover();
+      await expect(previewSurface).toBeVisible();
+      await expect(bookmarksPreviewSurface).toBeHidden();
+      await interactivePreviewProbe.evaluate((element) => element.remove());
+      await page.mouse.move(compactBounds.x + 4, compactBounds.y + 4);
+      await page.mouse.move(otherBounds.x + otherBounds.width / 2, otherBounds.y + otherBounds.height / 2);
+      await expect(previewSurface).toBeHidden();
+      await expect(bookmarksPreviewSurface).toBeVisible({ timeout: 2_000 });
+      await page.keyboard.up("Shift");
+      await expect(bookmarksPreviewSurface).toBeHidden();
+      await expect(dimmingOverlay).toBeHidden();
+      await expect(compactSurface).toHaveAttribute("data-lifecycle-probe", "same-instance");
+      await expect(widget).toBeFocused();
+
+      await page.keyboard.press("Shift+Enter");
+      await expect(manualSurface).toBeVisible();
+      await expect(manualSurface).toHaveAttribute("aria-modal", "true");
+      await expect(header).toHaveAttribute("inert", "");
+      await expect(boardMain).toHaveAttribute("inert", "");
+      expect(await manualSurface.evaluate((element) => element.closest("[data-grid-item-id]"))).toBeNull();
+      await expect(manualSurface.locator(".clock-wrapper")).toHaveAttribute("data-lifecycle-probe", "same-instance");
+      await expect(dimmingOverlay).toHaveCSS("pointer-events", "auto");
+      expect(await page.evaluate(() => getComputedStyle(document.body).overflow)).toBe("hidden");
+      await expect(page.getByRole("button", { name: "Close advanced view" })).toBeFocused();
+      await page.keyboard.press("Tab");
+      await expect(page.getByRole("button", { name: "Close advanced view" })).toBeFocused();
+      await page.keyboard.press("Shift+Tab");
+      await expect(page.getByRole("button", { name: "Close advanced view" })).toBeFocused();
+      await expect(page.getByRole("button", { name: /advanced view is pinned|keep advanced view open/i })).toHaveCount(
+        0,
+      );
+      await manualSurface.evaluate((element) => {
+        const mainViewport = document.createElement("div");
+        mainViewport.dataset.scrollbars = "y";
+        mainViewport.style.cssText = "height:80px;overflow-y:auto";
+
+        const probe = document.createElement("div");
+        probe.dataset.shiftScrollProbe = "true";
+        probe.style.cssText = "height:80px;overflow-y:auto";
+        probe.innerHTML = '<svg data-shift-scroll-target="true"></svg><div style="height:600px"></div>';
+        probe.addEventListener("wheel", (event) => event.stopPropagation());
+        mainViewport.append(probe);
+        mainViewport.insertAdjacentHTML("beforeend", '<div style="height:600px"></div>');
+        element.append(mainViewport);
+
+        const unrelated = document.createElement("div");
+        unrelated.dataset.shiftScrollProbe = "unrelated";
+        unrelated.style.cssText = "height:80px;overflow-y:hidden";
+        unrelated.innerHTML = '<div style="height:600px"></div>';
+        element.append(unrelated);
+      });
+      const scrollProbe = manualSurface.locator("[data-shift-scroll-probe='true']");
+      await page.keyboard.down("Shift");
+      const pixelEventCancelled = await scrollProbe.evaluate(
+        (element) =>
+          !element.dispatchEvent(
+            new WheelEvent("wheel", { bubbles: true, cancelable: true, shiftKey: true, deltaX: 120 }),
+          ),
+      );
+      expect(pixelEventCancelled).toBe(true);
+      await scrollProbe.evaluate((element) => {
+        element.scrollTop = 0;
+      });
+      const lineEventCancelled = await scrollProbe
+        .locator("[data-shift-scroll-target='true']")
+        .evaluate(
+          (element) =>
+            !element.dispatchEvent(
+              new WheelEvent("wheel", { bubbles: true, cancelable: true, shiftKey: true, deltaX: 3, deltaMode: 1 }),
+            ),
+        );
+      await page.keyboard.up("Shift");
+      expect(lineEventCancelled).toBe(true);
+      expect(await scrollProbe.evaluate((element) => element.scrollTop)).toBeGreaterThanOrEqual(48);
+      await scrollProbe.evaluate((element) => {
+        element.scrollTop = element.scrollHeight;
+        element.dispatchEvent(
+          new WheelEvent("wheel", { bubbles: true, cancelable: true, shiftKey: true, deltaX: 120 }),
+        );
+      });
+      expect(await manualSurface.locator("[data-scrollbars='y']").evaluate((element) => element.scrollTop)).toBe(120);
+      expect(
+        await manualSurface.locator("[data-shift-scroll-probe='unrelated']").evaluate((element) => element.scrollTop),
+      ).toBe(0);
+
+      await manualSurface.click({ button: "right", position: { x: 80, y: 80 } });
+      await expect(portalledMenuItem).toBeVisible();
+      await page.keyboard.press("Escape");
+      await expect(portalledMenuItem).toBeHidden();
+      await expect(manualSurface).toBeVisible();
+      await page.keyboard.press("Escape");
+      await expect(manualSurface).toBeHidden();
+      await expect(widget).toBeFocused();
+      await expect(header).not.toHaveAttribute("inert", "");
+      await expect(boardMain).not.toHaveAttribute("inert", "");
+      expect(await page.evaluate(() => getComputedStyle(document.body).overflow)).not.toBe("hidden");
+
+      await widget.click({ button: "right" });
+      await page.getByRole("menuitem", { name: "Open advanced view" }).click();
+      await expect(manualSurface).toBeVisible();
+      const viewport = page.viewportSize();
+      if (!viewport) throw new Error("Board page has no viewport");
+      await page.mouse.click(4, viewport.height - 4);
+      await expect(manualSurface).toBeHidden();
+      await expect(widget).toBeFocused();
+
+      for (const compactOnlyKind of ["app", "iframe"]) {
+        const compactOnlyWidget = page
+          .locator(`[data-grid-item-id][data-kind='${compactOnlyKind}'] [data-advanced-focus-source]`)
+          .first();
+        await expect(compactOnlyWidget).not.toHaveAttribute("aria-keyshortcuts", "Shift+Enter");
+        await compactOnlyWidget.dispatchEvent("contextmenu", { button: 2 });
+        await expect(page.getByRole("menuitem", { name: "Open advanced view" })).toHaveCount(0);
+        await page.keyboard.press("Escape");
+        await page.keyboard.down("Shift");
+        await compactOnlyWidget.hover({ position: { x: 4, y: 4 } });
+        await expect(previewSurface).toBeHidden();
+        await expect(dimmingOverlay).toBeHidden();
+        await page.keyboard.up("Shift");
+      }
+    } finally {
+      await context.close();
+    }
+  }, 60_000);
+
+  test("keeps compact-only iframe state and dismisses retained focus when a responsive layout remounts", async () => {
+    const { context, page } = await openBoardAsync(browser, baseUrl, ownerCredentials);
+
+    try {
+      const iframeSlot = page.locator("[data-grid-item-id][data-kind='iframe'] [data-advanced-focus-source]").first();
+      const iframe = iframeSlot.locator("iframe");
+      await iframe.evaluate((element) => {
+        (element as HTMLIFrameElement).srcdoc = '<label>State <input id="state" value="initial"></label>';
+        (element as HTMLIFrameElement).dataset.advancedFocusProbe = "true";
+      });
+      const frame = page.frameLocator("iframe[data-advanced-focus-probe='true']");
+      await frame.locator("#state").fill("changed");
+
+      await expect(iframeSlot).not.toHaveAttribute("aria-keyshortcuts", "Shift+Enter");
+      await iframeSlot.dispatchEvent("contextmenu", { button: 2 });
+      await expect(page.getByRole("menuitem", { name: "Open advanced view" })).toHaveCount(0);
+      await page.keyboard.press("Escape");
+      await page.keyboard.down("Shift");
+      await iframeSlot.hover({ position: { x: 4, y: 4 } });
+      await expect(page.getByRole("region", { name: "iFrame advanced view" })).toHaveCount(0);
+      await page.keyboard.up("Shift");
+      await expect(frame.locator("#state")).toHaveValue("changed");
+
+      const bookmarksSlot = page
+        .locator("[data-grid-item-id][data-kind='bookmarks'] [data-advanced-focus-source]")
+        .first();
+      await bookmarksSlot.focus();
+      await page.keyboard.press("Shift+Enter");
+      await expect(page.getByRole("dialog", { name: "Bookmarks advanced view" })).toBeVisible();
+      await page.setViewportSize({ width: 800, height: 900 });
+      await expect(page.getByRole("dialog", { name: "Bookmarks advanced view" })).toBeHidden();
+      await expect(page.locator("[data-grid-item-id][data-kind='iframe'] iframe")).toBeVisible();
+    } finally {
+      await context.close();
+    }
+  }, 60_000);
+
+  test("keeps advanced controls below the fixed header on short screens", async () => {
+    const { context, page } = await openBoardAsync(browser, baseUrl, ownerCredentials, { width: 1366, height: 768 });
+
+    try {
+      const widget = page.locator("[data-grid-item-id][data-kind='clock'] [data-advanced-focus-source]").first();
+      await widget.focus();
+      await page.keyboard.press("Shift+Enter");
+      const closeButton = page.getByRole("button", { name: "Close advanced view" });
+      const bounds = await closeButton.boundingBox();
+      expect(bounds).not.toBeNull();
+      if (!bounds) return;
+      expect(bounds.x).toBeGreaterThanOrEqual(0);
+      expect(bounds.y).toBeGreaterThanOrEqual(60);
+      expect(bounds.width).toBeGreaterThanOrEqual(44);
+      expect(bounds.height).toBeGreaterThanOrEqual(44);
+      expect(bounds.x + bounds.width).toBeLessThanOrEqual(1366);
+      expect(bounds.y + bounds.height).toBeLessThanOrEqual(768);
+      const surfaceBounds = await page.getByRole("dialog", { name: "Date and time advanced view" }).boundingBox();
+      const contentBounds = await page.locator(".clock-widget-container").boundingBox();
+      expect(surfaceBounds).not.toBeNull();
+      expect(contentBounds).not.toBeNull();
+      if (surfaceBounds && contentBounds) {
+        expect(contentBounds.y - surfaceBounds.y).toBeLessThan(32);
+        expect(bounds.x >= surfaceBounds.x + surfaceBounds.width || bounds.x + bounds.width <= surfaceBounds.x).toBe(
+          true,
+        );
+      }
+      await closeButton.click();
+      await expect(page.getByRole("dialog", { name: "Date and time advanced view" })).toBeHidden();
+    } finally {
+      await context.close();
+    }
+  }, 60_000);
+
+  test("honors the user setting gate even when the user can modify the board", async () => {
+    const { context, page } = await openBoardAsync(browser, baseUrl, disabledModifierCredentials);
+
+    try {
+      const widget = page.locator("[data-grid-item-id][data-kind='clock'] [data-advanced-focus-source]").first();
+
+      await widget.click({ button: "right" });
+      await expect(page.getByRole("menuitem", { name: "Open advanced view" })).toHaveCount(0);
+    } finally {
+      await context.close();
+    }
+  }, 60_000);
+
+  test("keeps read-only advanced viewing", async () => {
+    const { context, page } = await openBoardAsync(browser, baseUrl, viewerCredentials);
+
+    try {
+      const widget = page.locator("[data-grid-item-id][data-kind='clock'] [data-advanced-focus-source]").first();
+
+      await widget.click({ button: "right" });
+      await page.getByRole("menuitem", { name: "Open advanced view" }).click();
+      await expect(page.getByRole("dialog", { name: "Date and time advanced view" })).toBeVisible();
+      await page.keyboard.press("Escape");
+    } finally {
+      await context.close();
+    }
+  }, 60_000);
+});
+
+const openBoardAsync = async (
+  browser: Browser,
+  baseUrl: string,
+  credentials: { username: string; password: string },
+  viewport = { width: 1280, height: 900 },
+): Promise<{ context: BrowserContext; page: Page }> => {
+  const context = await browser.newContext({ reducedMotion: "reduce", viewport });
+  const page = await context.newPage();
+
+  await loginAsync({ page, baseUrl, credentials, destination: `/boards/${boardName}` });
+  await expect(page.locator(".clock-wrapper").first()).toBeVisible({
+    timeout: 15_000,
+  });
+
+  return { context, page };
+};
+
+const seedInteractionBoardAsync = async (db: SqliteDatabase, ownerId: string) => {
+  const boardId = createId();
+  const baseLayoutId = createId();
+  const desktopLayoutId = createId();
+  const sectionId = createId();
+  const clockItemId = createId();
+  const bookmarksItemId = createId();
+  const iframeItemId = createId();
+  const appItemId = createId();
+  const appId = createId();
+
+  await db.insert(boards).values({ id: boardId, name: boardName, creatorId: ownerId, isPublic: false });
+  await db.insert(apps).values({
+    id: appId,
+    name: "Example app",
+    iconUrl: "/favicon.ico",
+    href: "https://example.com",
+  });
+  await db.insert(layouts).values([
+    { id: baseLayoutId, name: "Base", columnCount: 12, breakpoint: 0, boardId },
+    { id: desktopLayoutId, name: "Desktop", columnCount: 12, breakpoint: 1000, boardId },
+  ]);
+  await db.insert(sections).values({ id: sectionId, kind: "empty", xOffset: 0, yOffset: 0, boardId });
+  await db.insert(items).values([
+    {
+      id: clockItemId,
+      kind: "clock",
+      boardId,
+      options: stringify({ is24HourFormat: true, showSeconds: false, showDate: true }),
+      advancedOptions: stringify({ title: null, customCssClasses: [], borderColor: "" }),
+    },
+    {
+      id: bookmarksItemId,
+      kind: "bookmarks",
+      boardId,
+      options: stringify({
+        title: "",
+        layout: "column",
+        hideTitle: false,
+        hideIcon: false,
+        hideHostname: false,
+        openNewTab: true,
+        withBorder: false,
+        items: [appId],
+      }),
+      advancedOptions: stringify({ title: null, customCssClasses: [], borderColor: "" }),
+    },
+    {
+      id: iframeItemId,
+      kind: "iframe",
+      boardId,
+      options: stringify({ embedUrl: "http://127.0.0.1:9", allowScrolling: true }),
+      advancedOptions: stringify({ title: null, customCssClasses: [], borderColor: "" }),
+    },
+    {
+      id: appItemId,
+      kind: "app",
+      boardId,
+      options: stringify({ appId, openInNewTab: true, showTitle: true, pingEnabled: false }),
+      advancedOptions: stringify({ title: null, customCssClasses: [], borderColor: "" }),
+    },
+  ]);
+  await db.insert(itemLayouts).values(
+    [baseLayoutId, desktopLayoutId].flatMap((layoutId) => [
+      {
+        itemId: clockItemId,
+        sectionId,
+        layoutId,
+        xOffset: 0,
+        yOffset: 0,
+        width: 4,
+        height: 3,
+      },
+      {
+        itemId: bookmarksItemId,
+        sectionId,
+        layoutId,
+        xOffset: 0,
+        yOffset: 3,
+        width: 4,
+        height: 3,
+      },
+      {
+        itemId: iframeItemId,
+        sectionId,
+        layoutId,
+        xOffset: 8,
+        yOffset: 0,
+        width: 4,
+        height: 3,
+      },
+      {
+        itemId: appItemId,
+        sectionId,
+        layoutId,
+        xOffset: 4,
+        yOffset: 0,
+        width: 3,
+        height: 3,
+      },
+    ]),
+  );
+  await db
+    .update(users)
+    .set({ homeBoardId: boardId, completedBoardTour: true, completedManageTour: true })
+    .where(eq(users.id, ownerId));
+};
+
+const seedCredentialsUserAsync = async (
+  db: SqliteDatabase,
+  input: {
+    username: string;
+    password: string;
+    enableRightClickOnWidgets: boolean;
+    boardPermission: "view" | "modify";
+  },
+) => {
+  const userId = createId();
+  const board = await db.query.boards.findFirst({ where: eq(boards.name, boardName) });
+  if (!board) throw new Error("Interaction board was not seeded");
+
+  await db.insert(users).values({
+    id: userId,
+    name: input.username,
+    provider: "credentials",
+    password: await hashPasswordAsync(input.password),
+    enableRightClickOnWidgets: input.enableRightClickOnWidgets,
+    homeBoardId: board.id,
+    completedBoardTour: true,
+    completedManageTour: true,
+  });
+  await db.insert(boardUserPermissions).values({
+    boardId: board.id,
+    userId,
+    permission: input.boardPermission,
+  });
+};
diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts
new file mode 100644
index 000000000..62509dfa5
--- /dev/null
+++ b/e2e/board-grid.spec.ts
@@ -0,0 +1,2099 @@
+import { mkdir } from "node:fs/promises";
+import { resolve as resolvePath } from "node:path";
+import { chromium, expect } from "@playwright/test";
+import type { Locator, Page, Request, Response } from "@playwright/test";
+import { createId } from "@paralleldrive/cuid2";
+import { stringify as stringifySuperJSON } from "superjson";
+import { describe, test } from "vitest";
+
+import {
+  LOGICAL_GRID_CELL_SIZE,
+  LOGICAL_GRID_GAP,
+  MIN_ACCESSIBLE_CANVAS_SCALE,
+} from "../apps/nextjs/src/components/board/layout/constants";
+import * as sqliteSchema from "../packages/db/schema/sqlite";
+import { createHomarrContainer } from "./shared/create-homarr-container";
+import { createSqliteDbFileAsync } from "./shared/e2e-db";
+import type { SqliteDatabase } from "./shared/e2e-db";
+import { seedAdminUserAsync } from "./shared/seed-admin-user";
+
+const adminCredentials = {
+  username: "admin",
+  password: "Comp(exP4sswOrd",
+};
+
+const gridRuntimeMarker = "homarr-dnd-kit-v1";
+const dndKitPayloadMarker = "dnd-kit-description";
+const logicalCellSize = LOGICAL_GRID_CELL_SIZE;
+const logicalCellPitch = LOGICAL_GRID_CELL_SIZE + LOGICAL_GRID_GAP;
+const minimumCanvasScale = MIN_ACCESSIBLE_CANVAS_SCALE;
+
+describe("Board grid", () => {
+  test("supports fixed, nested, rail, pointer, keyboard and reconciliation workflows", async () => {
+    const { db, localMountPath } = await createSqliteDbFileAsync();
+    const { userId } = await seedAdminUserAsync(db, adminCredentials);
+    const fixture = await seedBoardGridAsync(db, userId);
+    const screenshotDirectory = await prepareScreenshotDirectoryAsync();
+
+    const homarrContainer = await createHomarrContainer({
+      environment: {
+        AUTH_PROVIDERS: "credentials",
+      },
+      mounts: {
+        "/appdata": localMountPath,
+      },
+    }).start();
+
+    let browser: Awaited<ReturnType<typeof chromium.launch>> | undefined;
+    let runtimeResources: ReturnType<typeof trackRuntimeResources> | undefined;
+
+    try {
+      const baseUrl = `http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`;
+      browser = await chromium.launch();
+      const context = await browser.newContext({
+        viewport: {
+          width: 1920,
+          height: 1200,
+        },
+      });
+      const page = await context.newPage();
+      await installLayoutShiftObserverAsync(page);
+      runtimeResources = trackRuntimeResources(page);
+      const pageErrors: Error[] = [];
+      page.on("pageerror", (error) => {
+        pageErrors.push(error);
+        console.error(error.stack);
+      });
+
+      const noScriptContext = await browser.newContext({
+        javaScriptEnabled: false,
+        viewport: {
+          width: 1920,
+          height: 1200,
+        },
+      });
+      const noScriptPage = await noScriptContext.newPage();
+      await noScriptPage.goto(`${baseUrl}/boards/${fixture.boardName}`);
+      const serverRenderedCanvas = noScriptPage.getByTestId("board-canvas");
+      await expect(serverRenderedCanvas).toHaveAttribute("data-board-hydrated", "false");
+      const initialCanvasHeight = Number(await serverRenderedCanvas.getAttribute("data-canvas-initial-height"));
+      expect(initialCanvasHeight).toBeGreaterThan(0);
+      await expect(serverRenderedCanvas.locator(`[data-grid-item-id="${fixture.firstItemId}"]`)).toHaveCount(1);
+      await noScriptContext.close();
+
+      await signInAsync(page, baseUrl, `/boards/${fixture.boardName}`);
+
+      const canvas = page.locator('[data-testid="board-canvas"][data-board-hydrated="true"]');
+      await expect(canvas).toHaveAttribute("data-board-hydrated", "true");
+      const normalCanvasScale = await readCanvasScaleAsync(canvas);
+      await expect(page.locator(`[data-grid-runtime="${gridRuntimeMarker}"]`)).toHaveCount(0);
+
+      const mainSection = page.locator(`[data-section-id="${fixture.sectionId}"]`);
+      const rail = page.getByRole("complementary", { name: "Left dashboard rail" });
+      const railRootSection = rail.locator(`[data-section-id="${fixture.railSectionId}"][data-section-kind="empty"]`);
+      const railItem = page.locator(`[data-grid-item-id="${fixture.railItemId}"]`);
+      const containerSection = page.locator(`[data-grid-item-id="${fixture.containerSectionId}"]`);
+      const nestedItem = page.locator(`[data-grid-item-id="${fixture.nestedItemId}"]`);
+      const belowItem = page.locator(`[data-grid-item-id="${fixture.belowItemId}"]`);
+      await expect(mainSection).toHaveAttribute("data-section-kind", "empty");
+      await expect(mainSection).toHaveAttribute("data-rail-placement", "main");
+      await expect(rail).toBeVisible();
+      await expect(rail).toHaveAttribute("data-board-gutter", "left");
+      await expect(railRootSection).toHaveAttribute("data-rail-placement", "left");
+      await expect(railItem).toHaveAttribute("data-grid-x", "0");
+      await expect(containerSection).toHaveAttribute("data-grid-w", "2");
+      await expect(containerSection).toHaveAttribute("data-grid-h", "2");
+      const containerLabel = containerSection.locator("[data-board-container-label]");
+      await expect(containerLabel).toHaveText("Nested box");
+      await expect(containerLabel).toHaveCSS("border-top-left-radius", "4px");
+      const expandedContainerBox = await expectBoundingBoxAsync(containerSection);
+      const expandedContainerLabelBox = await expectBoundingBoxAsync(containerLabel);
+      expect(Math.abs(expandedContainerLabelBox.x - expandedContainerBox.x)).toBeLessThanOrEqual(3);
+      expect(Math.abs(expandedContainerLabelBox.width - expandedContainerBox.width)).toBeLessThanOrEqual(3);
+      const openContainerApps = containerSection.getByRole("button", {
+        name: "Open all apps in Nested box in tabs",
+        exact: true,
+      });
+      const expandedOpenContainerAppsBox = await expectBoundingBoxAsync(openContainerApps);
+      expect(
+        expandedContainerLabelBox.x +
+          expandedContainerLabelBox.width -
+          expandedOpenContainerAppsBox.x -
+          expandedOpenContainerAppsBox.width,
+      ).toBeCloseTo(8 * normalCanvasScale, 1);
+      await expect(nestedItem).toHaveAttribute("data-grid-x", "0");
+      await expect(belowItem).toHaveAttribute("data-grid-y", "2");
+      const containerLabelBox = await expectBoundingBoxAsync(containerLabel);
+      const nestedItemBox = await expectBoundingBoxAsync(nestedItem.locator("[data-grid-item-content]"));
+      expect(containerLabelBox.y + containerLabelBox.height).toBeLessThanOrEqual(nestedItemBox.y + 0.5);
+
+      const firstItem = page.locator(`[data-grid-item-id="${fixture.firstItemId}"]`);
+      const secondItem = page.locator(`[data-grid-item-id="${fixture.secondItemId}"]`);
+      await expect(firstItem).toHaveAttribute("data-grid-x", "0");
+      await expect(firstItem).toHaveAttribute("data-grid-y", "0");
+      await expect(firstItem).toHaveAttribute("data-grid-w", "1");
+      await expect(firstItem).toHaveAttribute("data-grid-h", "1");
+      await expect(secondItem).toHaveAttribute("data-grid-x", "1");
+      await expect(secondItem).toHaveAttribute("data-grid-y", "0");
+
+      const logicalTile = firstItem.locator("[data-grid-item-content]");
+      await expect(logicalTile).toHaveCount(1);
+      await expectFixedLogicalTileAsync(logicalTile);
+      await expect(logicalTile).toHaveCSS("overflow-x", "hidden");
+      await expect(logicalTile).toHaveCSS("overflow-y", "auto");
+      await page.addStyleTag({ content: ".e2e-widget-overflow { overflow: visible; }" });
+      await expect(secondItem.locator("[data-grid-item-content]")).toHaveCSS("overflow", "visible");
+      await expect(canvas).toHaveAttribute("data-canvas-overflow", "false");
+      await expectDocumentNotHorizontallyScrollableAsync(page);
+      const nestedAppLink = nestedItem.locator('a[href="#board-app-opened"]');
+      await expect(nestedAppLink).toBeVisible();
+      await nestedAppLink.click();
+      await expect(page).toHaveURL(/#board-app-opened$/);
+      await page.evaluate(() => history.replaceState(null, "", `${location.pathname}${location.search}`));
+      const normalZoomTileBox = await expectBoundingBoxAsync(logicalTile);
+      const secondItemBox = await expectBoundingBoxAsync(secondItem);
+      expect(secondItemBox.x - (normalZoomTileBox.x + normalZoomTileBox.width)).toBeCloseTo(
+        (logicalCellPitch - logicalCellSize) * normalCanvasScale,
+        1,
+      );
+
+      const editToggle = page.getByTestId("board-edit-mode-toggle");
+      await runtimeResources.waitForQuietAsync();
+      expect(runtimeResources.urlsFor("read-only", "runtime-marker")).toEqual([]);
+      expect(runtimeResources.urlsFor("read-only", "dnd-kit")).toEqual([]);
+      expect(await readLayoutShiftScoreAsync(page)).toBeLessThan(0.01);
+
+      await resetLayoutShiftScoreAsync(page);
+      await releaseIdleCallbacksAsync(page);
+      await expect(editToggle).toHaveAttribute("data-board-editor-preload-state", "ready", {
+        timeout: 15_000,
+      });
+      await runtimeResources.waitForQuietAsync();
+      expect(runtimeResources.urlsFor("read-only", "runtime-marker").length).toBeGreaterThan(0);
+      expect(runtimeResources.urlsFor("read-only", "dnd-kit").length).toBeGreaterThan(0);
+      expect(await readLayoutShiftScoreAsync(page)).toBeLessThan(0.01);
+
+      // CSS zoom exercises Chromium's browser-zoom layout path without relying
+      // on desktop browser chrome. At 200% the scale floor must preserve
+      // magnification and expose horizontal scrolling instead of shrinking the
+      // board by the inverse zoom factor.
+      await setDocumentZoomAsync(page, 2);
+      await expect(canvas).toHaveAttribute("data-canvas-scale", String(minimumCanvasScale));
+      await expect(canvas).toHaveAttribute("data-canvas-overflow", "true");
+      await expectFixedLogicalTileAsync(logicalTile);
+      await expectUniformVisualScaleAsync(logicalTile);
+      const fittedClockFontSize = await firstItem.locator(".clock-time-text").evaluate((element) => {
+        return Number.parseFloat(getComputedStyle(element).fontSize);
+      });
+      expect(fittedClockFontSize * minimumCanvasScale).toBeGreaterThanOrEqual(25);
+      const zoomedTileBox = await expectBoundingBoxAsync(logicalTile);
+      expect(zoomedTileBox.width).toBeGreaterThan(normalZoomTileBox.width * 1.25);
+      await expectHorizontalOverflowAsync(canvas);
+      await expectDocumentNotHorizontallyScrollableAsync(page);
+      const overflowRailY = (await expectBoundingBoxAsync(rail)).y;
+      await page.evaluate(() => window.scrollTo({ top: 300, behavior: "auto" }));
+      await expect.poll(async () => (await expectBoundingBoxAsync(rail)).y).toBeGreaterThanOrEqual(0);
+      expect((await expectBoundingBoxAsync(rail)).y).toBeLessThanOrEqual(overflowRailY);
+      await page.evaluate(() => window.scrollTo({ top: 0, behavior: "auto" }));
+      await setDocumentZoomAsync(page, 1);
+      await expect(canvas).toHaveAttribute("data-canvas-overflow", "false");
+
+      const collapseContainer = page.getByRole("button", {
+        name: "Collapse: Nested box",
+        exact: true,
+      });
+      await nestedItem.evaluate((element) => {
+        element.setAttribute("data-e2e-preserved-through-collapse", "true");
+      });
+      await collapseContainer.click();
+      await expect(containerSection).toHaveAttribute("data-grid-h", "0.5");
+      await expect(belowItem).toHaveAttribute("data-grid-y", "0.5");
+      await expect(nestedItem).toBeHidden();
+      await expect(nestedItem).toHaveAttribute("data-e2e-preserved-through-collapse", "true");
+      await expect(containerSection.locator("[data-collapsed='true']")).toHaveAttribute("inert", "");
+      const collapsedControl = containerSection.getByRole("button", { name: "Expand: Nested box", exact: true });
+      await expect(collapsedControl).toBeVisible();
+      await expect(collapsedControl).toHaveAttribute("data-board-container-collapsed-control", "true");
+      const expectedCollapsedHeight = (logicalCellPitch * 0.5 - LOGICAL_GRID_GAP) * normalCanvasScale;
+      await expect
+        .poll(async () => (await expectBoundingBoxAsync(containerSection)).height)
+        .toBeCloseTo(expectedCollapsedHeight, 1);
+      const collapsedContainerBox = await expectBoundingBoxAsync(containerSection);
+      const collapsedControlBox = await expectBoundingBoxAsync(collapsedControl);
+      const collapsedOpenContainerAppsBox = await expectBoundingBoxAsync(openContainerApps);
+      expect(Math.abs(collapsedControlBox.x - collapsedContainerBox.x)).toBeLessThanOrEqual(3);
+      expect(Math.abs(collapsedControlBox.y - collapsedContainerBox.y)).toBeLessThanOrEqual(3);
+      expect(Math.abs(collapsedControlBox.width - collapsedContainerBox.width)).toBeLessThanOrEqual(3);
+      expect(Math.abs(collapsedControlBox.height - collapsedContainerBox.height)).toBeLessThanOrEqual(3);
+      expect(
+        collapsedControlBox.x +
+          collapsedControlBox.width -
+          collapsedOpenContainerAppsBox.x -
+          collapsedOpenContainerAppsBox.width,
+      ).toBeCloseTo(8 * normalCanvasScale, 1);
+
+      await page
+        .getByRole("button", {
+          name: "Expand: Nested box",
+          exact: true,
+        })
+        .click();
+      await expect(containerSection).toHaveAttribute("data-grid-h", "2");
+      await expect(belowItem).toHaveAttribute("data-grid-y", "2");
+      await expect(nestedItem).toBeVisible();
+      await expect(nestedItem).toHaveAttribute("data-e2e-preserved-through-collapse", "true");
+      await captureBoardScreenshotAsync(canvas, screenshotDirectory, "board-grid-read-only.png");
+
+      const viewMainSectionBox = await expectBoundingBoxAsync(mainSection);
+      const viewFirstItemBox = await expectBoundingBoxAsync(logicalTile);
+      runtimeResources.enterEditMode();
+      await editToggle.click();
+      await expect(page.locator(`[data-grid-runtime="${gridRuntimeMarker}"]`)).toHaveCount(3);
+      await expect(page.getByTestId("board-grid-editor-loading")).toHaveCount(0);
+      await expect(page.getByTestId("board-canvas-row-count-button")).toHaveCount(0);
+      await expect(logicalTile).toHaveCSS("overflow-x", "hidden");
+      await expect(logicalTile).toHaveCSS("overflow-y", "auto");
+      await logicalTile.evaluate((element) => {
+        const overflowFixture = document.createElement("div");
+        overflowFixture.dataset.e2eWidgetOverflowFixture = "true";
+        overflowFixture.style.width = "800px";
+        overflowFixture.style.minWidth = "800px";
+        overflowFixture.style.height = "800px";
+        overflowFixture.style.minHeight = "800px";
+        overflowFixture.style.flex = "0 0 800px";
+        element.appendChild(overflowFixture);
+      });
+      await expect
+        .poll(async () => await logicalTile.evaluate((element) => element.scrollWidth - element.clientWidth))
+        .toBeGreaterThan(0);
+      await expect
+        .poll(async () => await logicalTile.evaluate((element) => element.scrollHeight - element.clientHeight))
+        .toBeGreaterThan(0);
+      await logicalTile.evaluate((element) => {
+        element.scrollTop = 100;
+      });
+      await expect.poll(async () => await logicalTile.evaluate((element) => element.scrollTop)).toBeGreaterThan(0);
+      await expectDocumentNotHorizontallyScrollableAsync(page);
+      await logicalTile.locator('[data-e2e-widget-overflow-fixture="true"]').evaluate((element) => element.remove());
+      await expectBoundingBoxToMatchAsync(mainSection, viewMainSectionBox);
+      await expectBoundingBoxToMatchAsync(logicalTile, viewFirstItemBox);
+      await runtimeResources.waitForQuietAsync();
+      expect(runtimeResources.urlsFor("edit", "runtime-marker")).toEqual([]);
+      expect(runtimeResources.urlsFor("edit", "dnd-kit")).toEqual([]);
+      runtimeResources.stop();
+
+      await expect(mainSection).toHaveAttribute("role", "region");
+      await expect(mainSection).toHaveAttribute("data-grid-editable", "true");
+      await expect(firstItem).toHaveClass(/\bboard-grid-entry\b/);
+      const firstKeyboardEntry = firstItem.locator(`[data-grid-id="${fixture.firstItemId}"]`);
+      await expect(firstKeyboardEntry).toHaveAttribute("role", "group");
+      await expect(firstKeyboardEntry).not.toHaveAttribute("aria-pressed");
+      await expect(firstKeyboardEntry).not.toHaveAttribute("aria-grabbed");
+      await expectTargetSizeAsync(firstItem);
+      await expect(firstItem.getByTestId("board-grid-drag-affordance")).toHaveCount(0);
+      const firstResizeHandles = firstItem.locator(":scope > [data-grid-resize-handle]");
+      await expect(firstResizeHandles).toHaveCount(8);
+      expect(
+        await firstResizeHandles.evaluateAll((handles) =>
+          handles.map((handle) => handle.getAttribute("data-grid-resize-handle")),
+        ),
+      ).toEqual(["n", "ne", "e", "se", "s", "sw", "w", "nw"]);
+      expect(
+        await firstResizeHandles.evaluateAll((handles) =>
+          handles.every((handle) => handle.getAttribute("aria-hidden") === "true" && handle.tabIndex === -1),
+        ),
+      ).toBe(true);
+      await expectTargetSizeAsync(firstResizeHandles.first());
+      const southEastResizeHandle = firstItem.locator(':scope > [data-grid-resize-handle="se"]');
+      await expectLogicalTargetSizeAsync(southEastResizeHandle, 44);
+      await expect(southEastResizeHandle).toHaveCSS("transform", "none");
+      const firstEastHandleBox = await expectBoundingBoxAsync(
+        firstItem.locator(':scope > [data-grid-resize-handle="e"]'),
+      );
+      const secondWestHandleBox = await expectBoundingBoxAsync(
+        secondItem.locator(':scope > [data-grid-resize-handle="w"]'),
+      );
+      const firstSouthEastHandleBox = await expectBoundingBoxAsync(
+        firstItem.locator(':scope > [data-grid-resize-handle="se"]'),
+      );
+      const secondSouthWestHandleBox = await expectBoundingBoxAsync(
+        secondItem.locator(':scope > [data-grid-resize-handle="sw"]'),
+      );
+      expect(firstEastHandleBox.x + firstEastHandleBox.width).toBeLessThanOrEqual(secondWestHandleBox.x + 0.5);
+      expect(firstSouthEastHandleBox.x + firstSouthEastHandleBox.width).toBeLessThanOrEqual(
+        secondSouthWestHandleBox.x + 0.5,
+      );
+      const inertContent = firstItem.locator("[data-board-grid-inert-content]");
+      await expect(inertContent).toHaveAttribute("inert", "");
+      await expect(inertContent).toHaveCSS("pointer-events", "none");
+
+      await page.getByRole("button", { name: "Add board content" }).click();
+      await expect(page.getByRole("menuitem", { name: "New container", exact: true })).toBeVisible();
+      await expect(page.getByRole("menuitem", { name: "New category", exact: true })).toHaveCount(0);
+      await page.getByRole("menuitem", { name: "New item", exact: true }).click();
+      const itemSelectDialog = page.getByRole("dialog", { name: "Choose item to add" });
+      await expect(itemSelectDialog).toBeVisible();
+      await page.keyboard.press("Escape");
+      await expect(itemSelectDialog).toHaveCount(0);
+
+      const mainGrid = page.locator(`[data-grid-section-id="${fixture.sectionId}"]`);
+      const interactionSnapshot = await readEditorGridSnapshotAsync(mainGrid);
+      await expectGridBoundaryRejectsOverflowAsync(page, mainGrid, firstItem);
+      await firstItem.locator("[data-grid-item-content]").evaluate((element) => {
+        const iframe = document.createElement("iframe");
+        iframe.dataset.e2eDragIframe = "true";
+        iframe.src = "about:blank";
+        iframe.style.width = "1px";
+        iframe.style.height = "1px";
+        iframe.style.pointerEvents = "none";
+        element.appendChild(iframe);
+      });
+      const responsiveScale = await readCanvasScaleAsync(canvas);
+      const responsiveDragBox = await expectBoundingBoxAsync(firstItem);
+      const responsiveStartX = responsiveDragBox.x + responsiveDragBox.width * 0.7;
+      const responsiveStartY = responsiveDragBox.y + responsiveDragBox.height * 0.4;
+      await page.mouse.move(responsiveStartX, responsiveStartY);
+      await page.mouse.down();
+      await page.mouse.move(responsiveStartX + logicalCellPitch * responsiveScale, responsiveStartY, { steps: 8 });
+      await expect(firstItem).toHaveAttribute("data-dnd-drag-source", "true");
+      await expect(page.locator('iframe[data-e2e-drag-iframe="true"]')).toHaveCount(1);
+      await page.setViewportSize({ width: 1000, height: 1200 });
+      await expect(page.locator(`[data-grid-runtime="${gridRuntimeMarker}"]`)).toHaveCount(2);
+      await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
+      await expect(firstItem).not.toHaveAttribute("data-dnd-drag-source");
+      await page.mouse.up();
+      await page
+        .locator('iframe[data-e2e-drag-iframe="true"]')
+        .evaluateAll((elements) => elements.forEach((element) => element.remove()));
+
+      await page.setViewportSize({ width: 600, height: 1200 });
+      await expect(canvas).toHaveAttribute("data-canvas-scale", String(minimumCanvasScale));
+      await expectHorizontalOverflowAsync(canvas);
+      await expectDocumentNotHorizontallyScrollableAsync(page);
+      for (const direction of ["n", "ne", "e", "se", "s", "sw", "w", "nw"] as const) {
+        await expectTargetSizeAsync(firstItem.locator(`:scope > [data-grid-resize-handle="${direction}"]`));
+      }
+
+      await page.setViewportSize({ width: 1920, height: 1200 });
+      await expect(page.locator(`[data-grid-runtime="${gridRuntimeMarker}"]`)).toHaveCount(3);
+      await expect(canvas).toHaveAttribute("data-canvas-overflow", "false");
+      await expectDocumentNotHorizontallyScrollableAsync(page);
+      await expect.poll(async () => await readEditorGridSnapshotAsync(mainGrid)).toEqual(interactionSnapshot);
+
+      const settingsButton = firstItem.getByRole("button", { name: /^Settings for / });
+      await firstItem.hover();
+      const widgetHeader = firstItem.locator("[data-board-widget-header]");
+      await expect(widgetHeader).toBeVisible();
+      const settingsBox = await expectBoundingBoxAsync(settingsButton);
+      const widgetHeaderBox = await expectBoundingBoxAsync(widgetHeader);
+      const firstItemBox = await expectBoundingBoxAsync(firstItem);
+      expect(settingsBox.y).toBeGreaterThanOrEqual(firstItemBox.y);
+      expect(settingsBox.y + settingsBox.height).toBeLessThanOrEqual(firstItemBox.y + firstItemBox.height);
+      expect(settingsBox.y).toBeLessThan(widgetHeaderBox.y + widgetHeaderBox.height);
+      expect(settingsBox.y + settingsBox.height).toBeGreaterThan(widgetHeaderBox.y);
+      await expect(settingsButton).toHaveCSS("border-radius", "4px");
+      await page.mouse.move(settingsBox.x + settingsBox.width / 2, settingsBox.y + settingsBox.height / 2);
+      await page.mouse.down();
+      await page.mouse.move(settingsBox.x + settingsBox.width / 2 + 8, settingsBox.y + settingsBox.height / 2 + 8);
+      await expect(firstItem).not.toHaveAttribute("data-dnd-drag-source");
+      await page.mouse.up();
+      await page.keyboard.press("Escape");
+      await expect.poll(async () => await readEditorGridSnapshotAsync(mainGrid)).toEqual(interactionSnapshot);
+
+      const railBoxBeforeMainDrag = await expectBoundingBoxAsync(rail);
+      const canvasScale = await readCanvasScaleAsync(canvas);
+      await dragLocatorByFromOffsetAsync(page, firstItem, {
+        deltaX: logicalCellPitch * canvasScale,
+        deltaY: 0,
+        startXRatio: 0.78,
+        startYRatio: 0.31,
+      });
+      await expect(firstItem).toHaveAttribute("data-grid-x", "1");
+      await expect(secondItem).toHaveAttribute("data-grid-x", "0");
+
+      await dragLocatorByTouchAsync(page, firstItem, 0, logicalCellPitch * canvasScale);
+      await expect(firstItem).toHaveAttribute("data-grid-y", "1");
+      await dragLocatorByTouchAsync(page, firstItem, 0, -logicalCellPitch * canvasScale);
+      await expect(firstItem).toHaveAttribute("data-grid-y", "0");
+
+      await expectGridEntryGeometrySettledAsync(firstItem);
+      await dragLocatorByImmediateReleaseAsync(page, firstItem, 0, logicalCellPitch * canvasScale);
+      await expect(firstItem).toHaveAttribute("data-grid-y", "1");
+      await expectGridEntryGeometrySettledAsync(firstItem);
+      await dragLocatorByImmediateReleaseAsync(page, firstItem, 0, -logicalCellPitch * canvasScale);
+      await expect(firstItem).toHaveAttribute("data-grid-y", "0");
+      await expectGridEntryGeometrySettledAsync(firstItem);
+
+      await expectCancelledDragRestoresSnapshotAsync(page, mainGrid, firstItem, 0, logicalCellPitch * canvasScale * 2);
+      await expectInvalidDropRestoresSnapshotAsync(page, mainGrid, firstItem);
+      await expectImmediateOutsideReleaseRestoresSnapshotAsync(page, mainGrid, firstItem);
+
+      await dragLocatorByAsync(page, firstItem, logicalCellPitch * canvasScale * 3, 0);
+      await expect(firstItem).toHaveAttribute("data-grid-x", "4");
+      expect(gridLayoutsOverlap(await readGridLayoutAsync(firstItem), await readGridLayoutAsync(secondItem))).toBe(
+        false,
+      );
+
+      const railBoxAfterMainDrag = await expectBoundingBoxAsync(rail);
+      expect(railBoxAfterMainDrag.x).toBeCloseTo(railBoxBeforeMainDrag.x, 1);
+      expect(railBoxAfterMainDrag.width).toBeCloseTo(railBoxBeforeMainDrag.width, 1);
+      await expect(railItem.locator("xpath=ancestor::aside[1]")).toHaveAttribute("aria-label", "Left dashboard rail");
+
+      const oversizedKeyboardEntry = getKeyboardEditorEntry(belowItem);
+      await oversizedKeyboardEntry.focus();
+      await oversizedKeyboardEntry.press("Enter");
+      await oversizedKeyboardEntry.press("Shift+ArrowRight");
+      await oversizedKeyboardEntry.press("Escape");
+      await expect(belowItem).toHaveAttribute("data-grid-w", "3");
+      const nestedEditor = containerSection.locator(`[data-grid-section-id="${fixture.containerSectionId}"]`);
+      const nestedGridBox = await expectBoundingBoxAsync(nestedEditor);
+      await expectInvalidNestedDropRestoresSnapshotAsync(
+        page,
+        mainGrid,
+        nestedEditor,
+        belowItem,
+        nestedGridBox.x + nestedGridBox.width / 2,
+        nestedGridBox.y + logicalCellSize * canvasScale * 0.5,
+      );
+      await expect(belowItem.locator("xpath=ancestor::*[@data-grid-section-id][1]")).toHaveAttribute(
+        "data-grid-section-id",
+        fixture.sectionId,
+      );
+      await oversizedKeyboardEntry.focus();
+      await oversizedKeyboardEntry.press("Enter");
+      await oversizedKeyboardEntry.press("Shift+ArrowLeft");
+      await oversizedKeyboardEntry.press("Escape");
+      await expect(belowItem).toHaveAttribute("data-grid-w", "2");
+      await oversizedKeyboardEntry.focus();
+      await oversizedKeyboardEntry.press("Enter");
+      await oversizedKeyboardEntry.press("Shift+ArrowDown");
+      await oversizedKeyboardEntry.press("Shift+ArrowDown");
+      await oversizedKeyboardEntry.press("Escape");
+      await expect(belowItem).toHaveAttribute("data-grid-h", "3");
+      await expectInvalidNestedDropRestoresSnapshotAsync(
+        page,
+        mainGrid,
+        nestedEditor,
+        belowItem,
+        nestedGridBox.x + nestedGridBox.width / 2,
+        nestedGridBox.y + logicalCellSize * canvasScale * 0.5,
+      );
+      await oversizedKeyboardEntry.focus();
+      await oversizedKeyboardEntry.press("Enter");
+      await oversizedKeyboardEntry.press("Shift+ArrowUp");
+      await oversizedKeyboardEntry.press("Shift+ArrowUp");
+      await oversizedKeyboardEntry.press("Escape");
+      await expect(belowItem).toHaveAttribute("data-grid-h", "1");
+
+      const secondItemContent = secondItem.locator("[data-grid-item-content]");
+      await expect(secondItemContent).toHaveCount(1);
+      await secondItemContent.evaluate((element) => {
+        element.setAttribute("data-e2e-portal-instance", "second-item-content");
+      });
+
+      await dragLocatorToImmediateReleaseAsync(
+        page,
+        secondItem,
+        nestedGridBox.x + logicalCellPitch * canvasScale * 1.5,
+        nestedGridBox.y + logicalCellSize * canvasScale * 0.5,
+      );
+      await expect(secondItem.locator("xpath=ancestor::*[@data-grid-section-id][1]")).toHaveAttribute(
+        "data-grid-section-id",
+        fixture.containerSectionId,
+      );
+      await expect(
+        secondItem.locator('[data-grid-item-content][data-e2e-portal-instance="second-item-content"]'),
+      ).toBeVisible();
+
+      const packedSecondKeyboardEntry = getKeyboardEditorEntry(secondItem);
+      await packedSecondKeyboardEntry.focus();
+      await packedSecondKeyboardEntry.press("Enter");
+      await packedSecondKeyboardEntry.press("Shift+ArrowDown");
+      await packedSecondKeyboardEntry.press("Escape");
+      await expect(secondItem).toHaveAttribute("data-grid-h", "2");
+
+      const packedSecondBox = await expectBoundingBoxAsync(secondItem);
+      const initialMainGridBox = await expectBoundingBoxAsync(mainGrid);
+      await page.mouse.move(
+        packedSecondBox.x + packedSecondBox.width / 2,
+        packedSecondBox.y + packedSecondBox.height / 2,
+      );
+      await page.mouse.down();
+      await page.mouse.move(nestedGridBox.x + 1, packedSecondBox.y + packedSecondBox.height / 2, { steps: 8 });
+      await expect(mainGrid).toHaveAttribute("data-dnd-drop-target", "true");
+      await expect(nestedEditor).toHaveAttribute("data-dnd-drop-target", "false");
+      await page.mouse.move(
+        initialMainGridBox.x + logicalCellSize * canvasScale * 0.5,
+        initialMainGridBox.y + logicalCellSize * canvasScale * 0.5,
+        { steps: 8 },
+      );
+      await page.mouse.up();
+      await expect(secondItem.locator("xpath=ancestor::*[@data-grid-section-id][1]")).toHaveAttribute(
+        "data-grid-section-id",
+        fixture.sectionId,
+      );
+      await dragLocatorToImmediateReleaseAsync(
+        page,
+        secondItem,
+        nestedGridBox.x + logicalCellPitch * canvasScale * 1.5,
+        nestedGridBox.y + logicalCellSize * canvasScale * 0.5,
+      );
+      await expect(secondItem.locator("xpath=ancestor::*[@data-grid-section-id][1]")).toHaveAttribute(
+        "data-grid-section-id",
+        fixture.containerSectionId,
+      );
+
+      const nestedSouthResizeHandle = nestedItem.locator(':scope > [data-grid-resize-handle="s"]');
+      await expect(containerSection).toHaveAttribute("data-grid-section-chrome-active", "false");
+      await expect(nestedSouthResizeHandle).not.toHaveAttribute("data-grid-resize-disabled");
+      await dragLocatorByAsync(page, nestedSouthResizeHandle, 0, -logicalCellPitch * canvasScale);
+      await expect(nestedItem).toHaveAttribute("data-grid-h", "1");
+      await expect(containerSection).toHaveAttribute("data-grid-h", "2");
+      const packedNestedKeyboardEntry = getKeyboardEditorEntry(nestedItem);
+      await packedNestedKeyboardEntry.focus();
+      await packedNestedKeyboardEntry.press("Enter");
+      await packedNestedKeyboardEntry.press("Shift+ArrowDown");
+      await packedNestedKeyboardEntry.press("Escape");
+      await expect(nestedItem).toHaveAttribute("data-grid-h", "2");
+
+      await nestedItem.locator("[data-grid-item-content]").evaluate((element) => {
+        element.setAttribute("data-e2e-container-child", "nested-item-content");
+      });
+      const containerGrip = containerSection.locator("[data-grid-container-drag-handle]");
+      await expectTargetSizeAsync(containerGrip);
+      const railEditor = rail.locator("[data-grid-section-id]").first();
+      const railGridBox = await expectBoundingBoxAsync(railEditor);
+      await dragHandleToGridPositionAsync(page, containerGrip, containerSection, railEditor, 0, 0, canvasScale);
+      await expect(containerSection.locator("xpath=ancestor::aside[1]")).toHaveAttribute("data-board-gutter", "left");
+      await expect(secondItem.locator("xpath=ancestor::*[@data-grid-section-id][1]")).toHaveAttribute(
+        "data-grid-section-id",
+        fixture.containerSectionId,
+      );
+      await expect(
+        nestedItem.locator('[data-grid-item-content][data-e2e-container-child="nested-item-content"]'),
+      ).toBeVisible();
+
+      await Promise.all([
+        page.waitForResponse(
+          (response) => response.url().includes("/api/trpc/board.saveBoard") && response.status() === 200,
+        ),
+        editToggle.click(),
+      ]);
+      await expect(page.locator(`[data-grid-runtime="${gridRuntimeMarker}"]`)).toHaveCount(0);
+      await page.reload();
+      await expect(canvas).toHaveAttribute("data-board-hydrated", "true");
+      await expect(secondItem).toHaveCount(1);
+      const reloadedSecondItemGrid = secondItem.locator("xpath=ancestor::*[@data-grid-section-id][1]");
+      await expect(reloadedSecondItemGrid).toHaveCount(1);
+      await expect(reloadedSecondItemGrid).toHaveAttribute("data-grid-section-id", fixture.containerSectionId);
+      await expect(containerSection.locator("xpath=ancestor::aside[1]")).toHaveAttribute("data-board-gutter", "left");
+      await editToggle.click();
+      await expect(page.locator(`[data-grid-runtime="${gridRuntimeMarker}"]`)).toHaveCount(3);
+      await dragHandleToGridPositionAsync(page, containerGrip, containerSection, mainGrid, 2, 0, canvasScale);
+      await expect(containerSection.locator("xpath=ancestor::*[@data-grid-section-id][1]")).toHaveAttribute(
+        "data-grid-section-id",
+        fixture.sectionId,
+      );
+      await expect(containerSection).toHaveAttribute("data-grid-x", "2");
+      const containerKeyboardEntry = getKeyboardEditorEntry(containerSection);
+      await containerKeyboardEntry.focus();
+      await containerKeyboardEntry.press("Enter");
+      await expect(containerKeyboardEntry).toHaveAttribute("data-keyboard-editing", "true");
+      await getKeyboardEditorEntry(nestedItem).focus();
+      await expect(containerKeyboardEntry).toHaveAttribute("data-keyboard-editing", "false");
+      await secondItem.locator("[data-grid-item-content]").evaluate((element) => {
+        element.setAttribute("data-e2e-portal-instance", "second-item-content");
+      });
+      const mainGridBox = await expectBoundingBoxAsync(mainGrid);
+      await dragLocatorToAsync(
+        page,
+        secondItem,
+        mainGridBox.x + logicalCellSize * canvasScale * 0.5,
+        mainGridBox.y + logicalCellSize * canvasScale * 0.5,
+      );
+      await expect(secondItem.locator("xpath=ancestor::*[@data-grid-section-id][1]")).toHaveAttribute(
+        "data-grid-section-id",
+        fixture.sectionId,
+      );
+      await expect(
+        secondItem.locator('[data-grid-item-content][data-e2e-portal-instance="second-item-content"]'),
+      ).toBeVisible();
+
+      await expect(containerSection).toHaveAttribute("data-grid-section-chrome-active", "false");
+      await expect(nestedSouthResizeHandle).not.toHaveAttribute("data-grid-resize-disabled");
+      await dragLocatorByAsync(page, nestedSouthResizeHandle, 0, -logicalCellPitch * canvasScale);
+      await expect(nestedItem).toHaveAttribute("data-grid-h", "1");
+      await expect(containerSection).toHaveAttribute("data-grid-h", "2");
+      await containerGrip.click();
+      await expect(containerSection).toHaveAttribute("data-grid-section-chrome-active", "true");
+
+      await dragLocatorToAsync(
+        page,
+        secondItem,
+        railGridBox.x + logicalCellPitch * canvasScale * 1.5,
+        railGridBox.y + logicalCellSize * canvasScale * 0.5,
+      );
+      await expect(secondItem.locator("xpath=ancestor::aside[1]")).toHaveAttribute("data-board-gutter", "left");
+      await expect(
+        secondItem.locator('[data-grid-item-content][data-e2e-portal-instance="second-item-content"]'),
+      ).toBeVisible();
+      await expect(secondItem).toHaveClass(/\bboard-grid-entry\b/);
+      expect(pageErrors).toEqual([]);
+
+      await moveEntryWithModalAsync(page, secondItem, /Dashboard canvas, destination \d+/);
+      await expect(secondItem.locator("xpath=ancestor::*[@data-grid-section-id][1]")).toHaveAttribute(
+        "data-grid-section-id",
+        fixture.sectionId,
+      );
+      await expect(getKeyboardEditorEntry(secondItem)).toBeFocused();
+      await moveEntryWithModalAsync(page, secondItem, /Left dashboard rail, destination \d+/);
+      await expect(secondItem.locator("xpath=ancestor::aside[1]")).toHaveAttribute("data-board-gutter", "left");
+      await expect(getKeyboardEditorEntry(secondItem)).toBeFocused();
+      await expect(
+        secondItem.locator('[data-grid-item-content][data-e2e-portal-instance="second-item-content"]'),
+      ).toBeVisible();
+
+      const railKeyboardEntry = getKeyboardEditorEntry(railItem);
+      await railKeyboardEntry.focus();
+      await railKeyboardEntry.press("Enter");
+      await expect(railKeyboardEntry).toHaveAttribute("data-keyboard-editing", "true");
+      await railKeyboardEntry.press("Shift+ArrowRight");
+      await expect(railItem).toHaveAttribute("data-grid-w", "2");
+      await railKeyboardEntry.press("Shift+ArrowLeft");
+      await expect(railItem).toHaveAttribute("data-grid-w", "1");
+      await railKeyboardEntry.press("ArrowRight");
+      await expect(railItem).toHaveAttribute("data-grid-x", "1");
+      await railKeyboardEntry.press("Escape");
+      await expect(railKeyboardEntry).toHaveAttribute("data-keyboard-editing", "false");
+
+      const eastResizeHandle = containerSection.locator(':scope > [data-grid-resize-handle="e"]');
+      await expectTargetSizeAsync(eastResizeHandle);
+      await expect(eastResizeHandle).not.toHaveAttribute("data-grid-resize-disabled");
+      await railKeyboardEntry.focus();
+      await railKeyboardEntry.press("Enter");
+      const mixedInputSnapshot = await readEditorGridSnapshotAsync(mainGrid);
+      const mixedInputRailSnapshot = await readEditorGridSnapshotAsync(railEditor);
+      const mixedInputHandleBox = await expectBoundingBoxAsync(eastResizeHandle);
+      await page.mouse.move(
+        mixedInputHandleBox.x + mixedInputHandleBox.width / 2,
+        mixedInputHandleBox.y + mixedInputHandleBox.height / 2,
+      );
+      await page.mouse.down();
+      await expect(page.locator("body")).toHaveAttribute("data-board-grid-interacting", "resize");
+      await railKeyboardEntry.press("ArrowLeft");
+      await expect(railKeyboardEntry).toHaveAttribute("data-keyboard-editing", "false");
+      await page.keyboard.press("Escape");
+      await page.mouse.up();
+      await expect.poll(async () => await readEditorGridSnapshotAsync(mainGrid)).toEqual(mixedInputSnapshot);
+      await expect.poll(async () => await readEditorGridSnapshotAsync(railEditor)).toEqual(mixedInputRailSnapshot);
+      await expectTouchResizeCancellationRestoresAsync(
+        page,
+        mainGrid,
+        eastResizeHandle,
+        -logicalCellPitch * canvasScale,
+        0,
+      );
+      await expectGridEntryGeometrySettledAsync(containerSection);
+
+      const eastResizeBox = await expectBoundingBoxAsync(eastResizeHandle);
+      const eastResizeStart = {
+        x: eastResizeBox.x + eastResizeBox.width / 2,
+        y: eastResizeBox.y + eastResizeBox.height / 2,
+      };
+      await page.mouse.move(eastResizeStart.x, eastResizeStart.y);
+      await page.mouse.down();
+      await page.mouse.move(eastResizeStart.x - logicalCellPitch * canvasScale * 0.35, eastResizeStart.y, {
+        steps: 6,
+      });
+      const resizeOutline = containerSection.locator(":scope > [data-grid-resize-outline]");
+      const resizePlaceholder = mainGrid.locator(`[data-grid-placeholder-for="${fixture.containerSectionId}"]`);
+      await expect(resizeOutline).toBeVisible();
+      await expect(resizeOutline).toHaveAttribute("data-grid-resize-valid", "true");
+      await expect(resizePlaceholder).toHaveAttribute("data-grid-placeholder-mode", "resize");
+      await expect(resizePlaceholder).toHaveAttribute("data-grid-w", "2");
+      await expect(containerSection).toHaveAttribute("data-grid-w", "2");
+      const originalResizeWidth = (await expectBoundingBoxAsync(containerSection)).width;
+      const continuousResizeWidth = (await expectBoundingBoxAsync(resizeOutline)).width;
+      expect(continuousResizeWidth).toBeLessThan(originalResizeWidth);
+      expect(continuousResizeWidth).toBeGreaterThan(logicalCellSize * canvasScale);
+
+      await page.mouse.move(eastResizeStart.x - logicalCellPitch * canvasScale, eastResizeStart.y, { steps: 6 });
+      await expect(containerSection).toHaveAttribute("data-grid-w", "2");
+      await expect(resizePlaceholder).toHaveAttribute("data-grid-w", "1");
+      expect((await expectBoundingBoxAsync(resizeOutline)).width).toBeCloseTo(logicalCellSize * canvasScale, 1);
+      const liveNestedGridBox = await expectBoundingBoxAsync(nestedEditor);
+      const liveContainerBox = await expectBoundingBoxAsync(containerSection);
+      expect(liveNestedGridBox.width).toBeCloseTo(originalResizeWidth, 1);
+      expect(liveNestedGridBox.width).toBeLessThanOrEqual(liveContainerBox.width + 1);
+      await page.mouse.up();
+      await expect(containerSection).toHaveAttribute("data-grid-w", "1");
+      await expect(resizeOutline).toHaveCount(0);
+      await expect(containerSection).toHaveAttribute("data-grid-section-chrome-active", "true");
+      await expect(eastResizeHandle).not.toHaveAttribute("data-grid-resize-disabled");
+      await resizeLocatorByImmediateReleaseAsync(page, eastResizeHandle, logicalCellPitch * canvasScale, 0);
+      await expect(containerSection).toHaveAttribute("data-grid-w", "2");
+
+      const northResizeHandle = containerSection.locator(':scope > [data-grid-resize-handle="n"]');
+      await expectTargetSizeAsync(northResizeHandle);
+      await dragLocatorByAsync(page, northResizeHandle, 0, logicalCellPitch * canvasScale);
+      await expect(containerSection).toHaveAttribute("data-grid-y", "1");
+      await expect(containerSection).toHaveAttribute("data-grid-h", "1");
+      await expectGridEntryGeometrySettledAsync(containerSection);
+
+      const minimumSectionBox = await expectBoundingBoxAsync(containerSection);
+      const minimumHandleBox = await expectBoundingBoxAsync(northResizeHandle);
+      const resizeStartX = minimumHandleBox.x + minimumHandleBox.width / 2;
+      const resizeStartY = minimumHandleBox.y + minimumHandleBox.height / 2;
+      await page.mouse.move(resizeStartX, resizeStartY);
+      await page.mouse.down();
+      await page.mouse.move(resizeStartX, resizeStartY + logicalCellPitch * canvasScale * 2, { steps: 12 });
+      const constrainedSectionBox = await expectBoundingBoxAsync(containerSection);
+      expect(Math.abs(constrainedSectionBox.height - minimumSectionBox.height)).toBeLessThan(1);
+      expect(Math.abs(constrainedSectionBox.y - minimumSectionBox.y)).toBeLessThan(1);
+      await page.mouse.up();
+      await expect(containerSection).toHaveAttribute("data-grid-y", "1");
+      await expect(containerSection).toHaveAttribute("data-grid-h", "1");
+
+      await dragLocatorByAsync(page, northResizeHandle, 0, -logicalCellPitch * canvasScale);
+      await expect(containerSection).toHaveAttribute("data-grid-y", "0");
+      await expect(containerSection).toHaveAttribute("data-grid-h", "2");
+
+      const southResizeHandle = containerSection.locator(':scope > [data-grid-resize-handle="s"]');
+      await dragLocatorByAsync(page, southResizeHandle, 0, logicalCellPitch * canvasScale);
+      await expect(containerSection).toHaveAttribute("data-grid-h", "3");
+      await expect(belowItem).toHaveAttribute("data-grid-y", "3");
+      expect(
+        gridLayoutsOverlap(await readGridLayoutAsync(containerSection), await readGridLayoutAsync(belowItem)),
+      ).toBe(false);
+
+      // Auto-scroll needs real document overflow. Grow the canvas through an
+      // explicit resize instead of relying on edit mode to add empty rows.
+      await dragLocatorByAsync(page, southResizeHandle, 0, logicalCellPitch * canvasScale * 6);
+      await expect(containerSection).toHaveAttribute("data-grid-h", "9");
+      await expect(belowItem).toHaveAttribute("data-grid-y", "9");
+
+      await firstItem.evaluate((element) => element.scrollIntoView({ block: "center", behavior: "instant" }));
+      const autoScrollStartBox = await expectBoundingBoxAsync(firstItem);
+      const autoScrollStart = {
+        x: autoScrollStartBox.x + autoScrollStartBox.width * 0.63,
+        y: autoScrollStartBox.y + autoScrollStartBox.height * 0.42,
+      };
+      const viewport = page.viewportSize();
+      if (!viewport) throw new Error("Expected a browser viewport");
+      const scrollBeforeDrag = await page.evaluate(() => window.scrollY);
+      await page.mouse.move(autoScrollStart.x, autoScrollStart.y);
+      await page.mouse.down();
+      await page.mouse.move(autoScrollStart.x + 8, autoScrollStart.y);
+      await expect(firstItem).toHaveAttribute("data-dnd-drag-source", "true");
+      const autoScrollTarget = { x: autoScrollStart.x, y: viewport.height - 12 };
+      await page.mouse.move(autoScrollTarget.x, autoScrollTarget.y, { steps: 3 });
+      await expect.poll(async () => await page.evaluate(() => window.scrollY)).toBeGreaterThan(scrollBeforeDrag);
+      const autoScrollPreview = await page.evaluate(
+        ({ itemId, x, y }) => {
+          const placeholder = document.querySelector<HTMLElement>(`[data-grid-placeholder-for="${itemId}"]`);
+          const targetGrid = placeholder?.closest<HTMLElement>("[data-grid-section-id]");
+          const preview = {
+            row: placeholder?.dataset.gridY,
+            revision: targetGrid?.dataset.dndPreviewRevision,
+          };
+          document.dispatchEvent(
+            new PointerEvent("pointerup", {
+              bubbles: true,
+              pointerId: 1,
+              pointerType: "mouse",
+              isPrimary: true,
+              button: 0,
+              buttons: 0,
+              clientX: x,
+              clientY: y,
+            }),
+          );
+          return preview;
+        },
+        { itemId: fixture.firstItemId, ...autoScrollTarget },
+      );
+      expect(autoScrollPreview.row).toBeDefined();
+      expect(autoScrollPreview.revision).toBeDefined();
+      await page.mouse.up();
+      await expect(firstItem).toHaveAttribute("data-grid-y", autoScrollPreview.row ?? "missing");
+      await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
+      await expect(page.locator(`[data-grid-placeholder-for="${fixture.firstItemId}"]`)).toHaveCount(0);
+      expect(Number(autoScrollPreview.row)).toBeGreaterThan(0);
+      await firstItem.evaluate((element) => element.scrollIntoView({ block: "center", behavior: "instant" }));
+      const autoScrollKeyboardEntry = getKeyboardEditorEntry(firstItem);
+      await autoScrollKeyboardEntry.focus();
+      await autoScrollKeyboardEntry.press("Enter");
+      for (let row = Number(autoScrollPreview.row); row > 0; row -= 1) {
+        await autoScrollKeyboardEntry.press("ArrowUp");
+      }
+      await autoScrollKeyboardEntry.press("Escape");
+      await expect(firstItem).toHaveAttribute("data-grid-y", "0");
+
+      // The main canvas grows with its content instead of requiring a manual
+      // row limit, and items can occupy empty rows below their original position.
+      for (let targetRow = 1; targetRow <= 8; targetRow += 1) {
+        await expectGridEntryGeometrySettledAsync(firstItem);
+        await firstItem.evaluate((element) => element.scrollIntoView({ block: "center", behavior: "instant" }));
+        await dragLocatorByImmediateReleaseAsync(page, firstItem, 0, logicalCellPitch * canvasScale + 2);
+        await expect(firstItem).toHaveAttribute("data-grid-y", String(targetRow));
+      }
+      await expect(firstItem).toHaveAttribute("data-grid-y", "8");
+      await expect(firstItem).toHaveAttribute("data-grid-x", "4");
+      expect(gridLayoutsOverlap(await readGridLayoutAsync(firstItem), await readGridLayoutAsync(belowItem))).toBe(
+        false,
+      );
+
+      const stickyRailY = (await expectBoundingBoxAsync(rail)).y;
+      await page.evaluate(() => window.scrollTo({ top: 500, behavior: "auto" }));
+      await expect.poll(async () => (await expectBoundingBoxAsync(rail)).y).toBeGreaterThanOrEqual(0);
+      const scrolledRailY = (await expectBoundingBoxAsync(rail)).y;
+      expect(scrolledRailY).toBeLessThanOrEqual(stickyRailY + 0.5);
+      await page.evaluate(() => window.scrollTo({ top: 0, behavior: "auto" }));
+
+      await setDocumentZoomAsync(page, 1.25);
+      await expectFixedLogicalTileAsync(logicalTile);
+      await expectUniformVisualScaleAsync(logicalTile);
+      await expectTargetSizeAsync(firstItem);
+      await expectTargetSizeAsync(firstItem.locator(':scope > [data-grid-resize-handle="se"]'));
+      await firstItem.evaluate((element) => element.scrollIntoView({ block: "center", behavior: "instant" }));
+      const zoomedEastResizeHandle = firstItem.locator(':scope > [data-grid-resize-handle="e"]');
+      const zoomedOneColumnScale = (await expectBoundingBoxAsync(firstItem)).width / logicalCellSize;
+      await dragLocatorByAsync(page, zoomedEastResizeHandle, logicalCellPitch * zoomedOneColumnScale, 0);
+      await expect(firstItem).toHaveAttribute("data-grid-w", "2");
+      const zoomedTwoColumnScale =
+        (await expectBoundingBoxAsync(firstItem)).width / (logicalCellSize * 2 + LOGICAL_GRID_GAP);
+      await dragLocatorByAsync(page, zoomedEastResizeHandle, -logicalCellPitch * zoomedTwoColumnScale, 0);
+      await expect(firstItem).toHaveAttribute("data-grid-w", "1");
+      await expect(firstItem).toHaveAttribute("data-grid-x", "4");
+      await expectGridEntryGeometrySettledAsync(firstItem);
+      await expectImmediateOutsideReleaseRestoresSnapshotAsync(page, mainGrid, firstItem);
+      await expectGridEntryGeometrySettledAsync(firstItem);
+      const zoomedDragSourceBox = await expectBoundingBoxAsync(firstItem);
+      await dragLocatorByImmediateReleaseAsync(
+        page,
+        firstItem,
+        0,
+        -logicalCellPitch * zoomedOneColumnScale,
+        async () => {
+          const overlayBox = await expectBoundingBoxAsync(page.locator(".board-grid-drag-overlay[data-dnd-dragging]"));
+          const overlayCardBox = await expectBoundingBoxAsync(page.locator(".board-grid-drag-overlay-card"));
+          expect(Math.abs(overlayBox.x - zoomedDragSourceBox.x)).toBeLessThan(1);
+          expect(Math.abs(overlayBox.y - zoomedDragSourceBox.y)).toBeLessThan(1);
+          expect(Math.abs(overlayBox.width - zoomedDragSourceBox.width)).toBeLessThan(1);
+          expect(Math.abs(overlayBox.height - zoomedDragSourceBox.height)).toBeLessThan(1);
+          expect(Math.abs(overlayCardBox.x - overlayBox.x)).toBeLessThan(1);
+          expect(Math.abs(overlayCardBox.y - overlayBox.y)).toBeLessThan(1);
+          expect(Math.abs(overlayCardBox.width - overlayBox.width)).toBeLessThan(1);
+          expect(Math.abs(overlayCardBox.height - overlayBox.height)).toBeLessThan(1);
+        },
+      );
+      await expect(firstItem).toHaveAttribute("data-grid-x", "4");
+      await expect(firstItem).toHaveAttribute("data-grid-y", "7");
+      await expectGridEntryGeometrySettledAsync(firstItem);
+      await dragLocatorByImmediateReleaseAsync(page, firstItem, 0, logicalCellPitch * zoomedOneColumnScale);
+      await expect(firstItem).toHaveAttribute("data-grid-x", "4");
+      await expect(firstItem).toHaveAttribute("data-grid-y", "8");
+      await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
+      await setDocumentZoomAsync(page, 1);
+      await captureBoardScreenshotAsync(canvas, screenshotDirectory, "board-grid-edit-mode.png");
+
+      const containerLayoutBeforeDelete = await readGridLayoutAsync(containerSection);
+      await containerSection.getByRole("button", { name: "Settings for Nested box" }).click();
+      await page
+        .getByRole("menuitem", {
+          name: "Remove container",
+          exact: true,
+        })
+        .click();
+      await page
+        .getByRole("dialog", {
+          name: "Remove container",
+        })
+        .getByRole("button", {
+          name: "Confirm",
+          exact: true,
+        })
+        .click();
+
+      await expect(containerSection).toHaveCount(0);
+      await expect(nestedItem).toHaveCount(1);
+      await expect(nestedItem.locator("xpath=ancestor::*[@data-grid-section-id][1]")).toHaveAttribute(
+        "data-grid-section-id",
+        fixture.sectionId,
+      );
+      await expect(nestedItem).toHaveAttribute("data-grid-x", String(containerLayoutBeforeDelete.x));
+      await expect(nestedItem).toHaveAttribute("data-grid-y", String(containerLayoutBeforeDelete.y));
+
+      await page.getByTestId("board-edit-mode-toggle").click();
+      await expect(page.locator(`[data-grid-runtime="${gridRuntimeMarker}"]`)).toHaveCount(0);
+
+      await page.reload();
+      const reloadedCanvas = page.locator('[data-testid="board-canvas"][data-board-hydrated="true"]');
+      const reloadedFirstItem = reloadedCanvas.locator(`[data-grid-item-id="${fixture.firstItemId}"]`);
+      const reloadedSecondItem = reloadedCanvas.locator(`[data-grid-item-id="${fixture.secondItemId}"]`);
+      const reloadedRailItem = reloadedCanvas.locator(`[data-grid-item-id="${fixture.railItemId}"]`);
+      const reloadedContainerSection = reloadedCanvas.locator(`[data-grid-item-id="${fixture.containerSectionId}"]`);
+      const reloadedNestedItem = reloadedCanvas.locator(`[data-grid-item-id="${fixture.nestedItemId}"]`);
+      await expect(reloadedCanvas).toHaveCount(1);
+      await expect(reloadedFirstItem).toHaveAttribute("data-grid-x", "4");
+      await expect(reloadedFirstItem).toHaveAttribute("data-grid-y", "8");
+      await expect(reloadedRailItem).toHaveAttribute("data-grid-x", "1");
+      await expect(reloadedRailItem).toHaveAttribute("data-grid-w", "1");
+      await expect(reloadedContainerSection).toHaveCount(0);
+      await expect(reloadedNestedItem).toHaveCount(1);
+      await expect(reloadedNestedItem.locator("xpath=ancestor::*[@data-grid-section-id][1]")).toHaveAttribute(
+        "data-grid-section-id",
+        fixture.sectionId,
+      );
+      await expect(reloadedSecondItem.locator("xpath=ancestor::aside[1]")).toHaveAttribute("data-board-gutter", "left");
+      const persistedFirstLayout = await readGridLayoutAsync(reloadedFirstItem);
+      const persistedSecondLayout = await readGridLayoutAsync(reloadedSecondItem);
+      expect(gridLayoutsOverlap(persistedFirstLayout, persistedSecondLayout)).toBe(false);
+
+      await page.goto(`${baseUrl}/boards/${fixture.boardName}/settings?tab=layout`);
+      const desktopLayoutGroup = page.getByRole("group", { name: "Desktop" });
+      const gutterPreview = desktopLayoutGroup.getByLabel("Dashboard layout preview");
+      await expect(gutterPreview).toBeVisible();
+      const rightGutterSwitch = desktopLayoutGroup.getByRole("switch", { name: "Right sidebar" });
+      await rightGutterSwitch.check();
+      const rightGutterSlider = desktopLayoutGroup.getByRole("slider", { name: "Right sidebar width" });
+      await expect(rightGutterSlider).toHaveAttribute("aria-valuenow", "2");
+      await rightGutterSlider.press("ArrowRight");
+      await expect(rightGutterSlider).toHaveAttribute("aria-valuenow", "3");
+      await captureBoardScreenshotAsync(page.locator("main"), screenshotDirectory, "board-layout-gutter-settings.png");
+      await Promise.all([
+        page.waitForResponse(
+          (response) => response.url().includes("/api/trpc/board.saveLayouts") && response.status() === 200,
+        ),
+        rightGutterSwitch.locator("xpath=ancestor::form[1]").getByRole("button", { name: "Save changes" }).click(),
+      ]);
+
+      await page.goto(`${baseUrl}/boards/${fixture.boardName}`);
+      const boardWithBothGutters = page.locator('[data-testid="board-canvas"][data-board-hydrated="true"]');
+      await expect(boardWithBothGutters).toHaveCount(1);
+      await expect(page.getByRole("complementary", { name: "Left dashboard rail" })).toBeVisible();
+      const emptyRightGutter = page.getByRole("complementary", { name: "Right dashboard rail" });
+      await expect(emptyRightGutter).toHaveCount(1);
+      expect((await expectBoundingBoxAsync(emptyRightGutter)).width).toBeGreaterThan(0);
+      expect(pageErrors).toEqual([]);
+    } finally {
+      runtimeResources?.stop();
+      await browser?.close();
+      await homarrContainer.stop();
+    }
+  }, 300_000);
+});
+
+const seedBoardGridAsync = async (db: SqliteDatabase, creatorId: string) => {
+  const boardId = createId();
+  const boardName = "grid-e2e";
+  const layoutId = createId();
+  const compactLayoutId = createId();
+  const sectionId = createId();
+  const railSectionId = createId();
+  const rightSectionId = createId();
+  const containerSectionId = createId();
+  const firstItemId = createId();
+  const secondItemId = createId();
+  const belowItemId = createId();
+  const nestedItemId = createId();
+  const railItemId = createId();
+  const nestedAppId = createId();
+
+  await db.insert(sqliteSchema.boards).values({
+    id: boardId,
+    name: boardName,
+    creatorId,
+    isPublic: true,
+  });
+  await db.insert(sqliteSchema.layouts).values([
+    {
+      id: layoutId,
+      name: "Desktop",
+      boardId,
+      columnCount: 8,
+      leftGutterColumnCount: 2,
+      breakpoint: 1200,
+    },
+    {
+      id: compactLayoutId,
+      name: "Compact",
+      boardId,
+      columnCount: 4,
+      breakpoint: 0,
+    },
+  ]);
+  await db.insert(sqliteSchema.sections).values([
+    {
+      id: sectionId,
+      boardId,
+      kind: "empty",
+      xOffset: 0,
+      yOffset: 0,
+    },
+    {
+      id: railSectionId,
+      boardId,
+      kind: "empty",
+      xOffset: -1,
+      yOffset: 0,
+    },
+    {
+      id: rightSectionId,
+      boardId,
+      kind: "empty",
+      xOffset: 1,
+      yOffset: 0,
+    },
+    {
+      id: containerSectionId,
+      boardId,
+      kind: "container",
+      options: stringifySuperJSON({
+        title: "Nested box",
+        customCssClasses: [],
+        borderColor: "",
+        showLabel: true,
+        collapsible: true,
+        showOpenAll: true,
+      }),
+    },
+  ]);
+  await db.insert(sqliteSchema.sectionLayouts).values([
+    {
+      sectionId: containerSectionId,
+      layoutId,
+      parentSectionId: sectionId,
+      xOffset: 2,
+      yOffset: 0,
+      width: 2,
+      height: 2,
+    },
+    {
+      sectionId: containerSectionId,
+      layoutId: compactLayoutId,
+      parentSectionId: sectionId,
+      xOffset: 2,
+      yOffset: 0,
+      width: 2,
+      height: 2,
+    },
+  ]);
+  await db.insert(sqliteSchema.apps).values({
+    id: nestedAppId,
+    name: "Interactive nested app",
+    iconUrl: "/favicon.ico",
+    href: "#board-app-opened",
+  });
+  await db.insert(sqliteSchema.items).values([
+    {
+      id: firstItemId,
+      boardId,
+      kind: "clock",
+      options: stringifySuperJSON({ is24HourFormat: true }),
+    },
+    {
+      id: secondItemId,
+      boardId,
+      kind: "clock",
+      options: stringifySuperJSON({ is24HourFormat: true }),
+      advancedOptions: stringifySuperJSON({
+        title: null,
+        customCssClasses: ["e2e-widget-overflow"],
+        borderColor: "",
+      }),
+    },
+    {
+      id: belowItemId,
+      boardId,
+      kind: "clock",
+      options: stringifySuperJSON({ is24HourFormat: true }),
+    },
+    {
+      id: nestedItemId,
+      boardId,
+      kind: "app",
+      options: stringifySuperJSON({
+        appId: nestedAppId,
+        descriptionDisplayMode: "hidden",
+        layout: "column",
+        openInNewTab: false,
+        pingEnabled: false,
+        showTitle: true,
+      }),
+    },
+    {
+      id: railItemId,
+      boardId,
+      kind: "clock",
+      options: stringifySuperJSON({ is24HourFormat: true }),
+    },
+  ]);
+  await db.insert(sqliteSchema.itemLayouts).values([
+    {
+      itemId: firstItemId,
+      sectionId,
+      layoutId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 1,
+      height: 1,
+    },
+    {
+      itemId: secondItemId,
+      sectionId,
+      layoutId,
+      xOffset: 1,
+      yOffset: 0,
+      width: 1,
+      height: 1,
+    },
+    {
+      itemId: belowItemId,
+      sectionId,
+      layoutId,
+      xOffset: 2,
+      yOffset: 2,
+      width: 2,
+      height: 1,
+    },
+    {
+      itemId: nestedItemId,
+      sectionId: containerSectionId,
+      layoutId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 1,
+      height: 2,
+    },
+    {
+      itemId: railItemId,
+      sectionId: railSectionId,
+      layoutId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 1,
+      height: 1,
+    },
+    {
+      itemId: firstItemId,
+      sectionId,
+      layoutId: compactLayoutId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 1,
+      height: 1,
+    },
+    {
+      itemId: secondItemId,
+      sectionId,
+      layoutId: compactLayoutId,
+      xOffset: 1,
+      yOffset: 0,
+      width: 1,
+      height: 1,
+    },
+    {
+      itemId: belowItemId,
+      sectionId,
+      layoutId: compactLayoutId,
+      xOffset: 0,
+      yOffset: 2,
+      width: 2,
+      height: 1,
+    },
+    {
+      itemId: nestedItemId,
+      sectionId: containerSectionId,
+      layoutId: compactLayoutId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 1,
+      height: 2,
+    },
+    {
+      itemId: railItemId,
+      sectionId: railSectionId,
+      layoutId: compactLayoutId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 1,
+      height: 1,
+    },
+  ]);
+
+  return {
+    boardName,
+    compactLayoutId,
+    layoutId,
+    sectionId,
+    railSectionId,
+    containerSectionId,
+    firstItemId,
+    secondItemId,
+    belowItemId,
+    nestedItemId,
+    railItemId,
+  };
+};
+
+const signInAsync = async (page: Page, baseUrl: string, callbackPath: string) => {
+  const loginUrl = new URL("/auth/login", baseUrl);
+  loginUrl.searchParams.set("callbackUrl", callbackPath);
+  await page.goto(loginUrl.href);
+  await page.getByLabel("Username").fill(adminCredentials.username);
+  await page.getByRole("textbox", { name: "Password", exact: true }).fill(adminCredentials.password);
+  await Promise.all([
+    page.waitForURL(`${baseUrl}${callbackPath}`, { timeout: 30_000, waitUntil: "commit" }),
+    page.locator("button[type='submit']").click(),
+  ]);
+};
+
+const prepareScreenshotDirectoryAsync = async () => {
+  const configuredDirectory = process.env.HOMARR_E2E_SCREENSHOT_DIR?.trim();
+  if (!configuredDirectory) return undefined;
+
+  const directory = resolvePath(configuredDirectory);
+  await mkdir(directory, { recursive: true });
+  return directory;
+};
+
+const captureBoardScreenshotAsync = async (
+  canvas: Locator,
+  screenshotDirectory: string | undefined,
+  fileName: string,
+) => {
+  if (!screenshotDirectory) return;
+  await canvas.screenshot({
+    animations: "disabled",
+    caret: "hide",
+    path: resolvePath(screenshotDirectory, fileName),
+  });
+};
+
+type RuntimeResourcePhase = "read-only" | "edit";
+type RuntimePayload = "dnd-kit" | "runtime-marker";
+
+interface RuntimeResource {
+  phase: RuntimeResourcePhase;
+  url: string;
+  hasRuntimeMarker: boolean;
+  hasDndKitPayload: boolean;
+}
+
+const trackRuntimeResources = (page: Page) => {
+  const resources: RuntimeResource[] = [];
+  const pendingResponses = new Set<Promise<void>>();
+  const inFlightRequests = new Set<Request>();
+  const requestPhases = new WeakMap<Request, RuntimeResourcePhase>();
+  const bodyErrors: Error[] = [];
+  let phase: RuntimeResourcePhase = "read-only";
+  let lastActivityAt = Date.now();
+  let stopped = false;
+
+  const handleRequest = (request: Request) => {
+    requestPhases.set(request, phase);
+    if (!isRuntimeResourceType(request.resourceType())) return;
+    inFlightRequests.add(request);
+    lastActivityAt = Date.now();
+  };
+
+  const handleRequestFailed = (request: Request) => {
+    if (!inFlightRequests.delete(request)) return;
+    lastActivityAt = Date.now();
+  };
+
+  const handleResponse = (response: Response) => {
+    const resourceKind = getRuntimeResourceKind(response);
+    if (!resourceKind) return;
+
+    const request = response.request();
+    const responsePhase = requestPhases.get(request) ?? phase;
+    inFlightRequests.delete(request);
+    lastActivityAt = Date.now();
+    const task = readRuntimeResponseBodyAsync(page, response)
+      .then((body) => {
+        resources.push({
+          phase: responsePhase,
+          url: response.url(),
+          hasRuntimeMarker: body.includes(Buffer.from(gridRuntimeMarker)),
+          hasDndKitPayload: body.includes(Buffer.from(dndKitPayloadMarker)),
+        });
+      })
+      .catch((error: unknown) => {
+        bodyErrors.push(new Error(`Unable to inspect ${resourceKind} response ${response.url()}`, { cause: error }));
+      });
+
+    pendingResponses.add(task);
+    void task.finally(() => {
+      pendingResponses.delete(task);
+      lastActivityAt = Date.now();
+    });
+  };
+
+  page.on("request", handleRequest);
+  page.on("requestfailed", handleRequestFailed);
+  page.on("response", handleResponse);
+
+  return {
+    enterEditMode() {
+      phase = "edit";
+    },
+    urlsFor(resourcePhase: RuntimeResourcePhase, payload: RuntimePayload) {
+      const key = payload === "runtime-marker" ? "hasRuntimeMarker" : "hasDndKitPayload";
+      return [
+        ...new Set(
+          resources
+            .filter((resource) => resource.phase === resourcePhase && resource[key])
+            .map((resource) => resource.url),
+        ),
+      ];
+    },
+    async waitForQuietAsync({ quietMs = 300, timeoutMs = 15_000 } = {}) {
+      const deadline = Date.now() + timeoutMs;
+
+      while (true) {
+        if (pendingResponses.size > 0) {
+          await Promise.all(pendingResponses);
+        }
+        if (bodyErrors.length > 0) {
+          throw new AggregateError(bodyErrors, "Unable to inspect one or more JavaScript or CSS responses");
+        }
+
+        const quietFor = Date.now() - lastActivityAt;
+        if (pendingResponses.size === 0 && inFlightRequests.size === 0 && quietFor >= quietMs) return;
+        if (Date.now() >= deadline) {
+          throw new Error(
+            `JavaScript and CSS requests did not become quiet within ${timeoutMs}ms ` +
+              `(${inFlightRequests.size} requests and ${pendingResponses.size} response bodies pending)`,
+          );
+        }
+
+        await new Promise((resolve) => setTimeout(resolve, Math.min(50, Math.max(1, quietMs - quietFor))));
+      }
+    },
+    stop() {
+      if (stopped) return;
+      stopped = true;
+      page.off("request", handleRequest);
+      page.off("requestfailed", handleRequestFailed);
+      page.off("response", handleResponse);
+    },
+  };
+};
+
+const readRuntimeResponseBodyAsync = async (page: Page, response: Response) => {
+  try {
+    return await response.body();
+  } catch (originalError) {
+    try {
+      const fallbackResponse = await page.request.get(response.url(), {
+        failOnStatusCode: false,
+      });
+      if (!fallbackResponse.ok()) {
+        throw new Error(`Fallback request returned HTTP ${fallbackResponse.status()}`, {
+          cause: originalError,
+        });
+      }
+      return await fallbackResponse.body();
+    } catch (fallbackError) {
+      throw new Error(
+        `Unable to read or refetch runtime response ${response.url()}. Original read error: ${String(originalError)}`,
+        { cause: fallbackError },
+      );
+    }
+  }
+};
+
+const isRuntimeResourceType = (resourceType: string) => resourceType === "script" || resourceType === "stylesheet";
+
+const getRuntimeResourceKind = (response: Response): "script" | "stylesheet" | null => {
+  const resourceType = response.request().resourceType();
+  if (resourceType === "script" || resourceType === "stylesheet") return resourceType;
+
+  const contentType = response.headers()["content-type"]?.toLowerCase() ?? "";
+  if (contentType.includes("javascript") || contentType.includes("ecmascript")) return "script";
+  if (contentType.includes("text/css")) return "stylesheet";
+  return null;
+};
+
+const expectBoundingBoxAsync = async (locator: Locator) => {
+  const box = await locator.boundingBox();
+  expect(box).not.toBeNull();
+  if (box === null) {
+    throw new Error("Expected locator to have a bounding box");
+  }
+  return box;
+};
+
+const expectBoundingBoxToMatchAsync = async (
+  locator: Locator,
+  expected: { x: number; y: number; width: number; height: number },
+) => {
+  const actual = await expectBoundingBoxAsync(locator);
+  expect(actual.x).toBeCloseTo(expected.x, 0);
+  expect(actual.y).toBeCloseTo(expected.y, 0);
+  expect(actual.width).toBeCloseTo(expected.width, 0);
+  expect(actual.height).toBeCloseTo(expected.height, 0);
+};
+
+const expectGridEntryGeometrySettledAsync = async (entry: Locator) => {
+  let previous: Awaited<ReturnType<Locator["boundingBox"]>> = null;
+  let stableFrames = 0;
+  await expect
+    .poll(
+      async () => {
+        const current = await entry.boundingBox();
+        if (!current) return false;
+        const isStable =
+          previous !== null &&
+          Math.abs(current.x - previous.x) < 0.25 &&
+          Math.abs(current.y - previous.y) < 0.25 &&
+          Math.abs(current.width - previous.width) < 0.25 &&
+          Math.abs(current.height - previous.height) < 0.25;
+        stableFrames = isStable ? stableFrames + 1 : 0;
+        previous = current;
+        return stableFrames >= 3;
+      },
+      { intervals: [16] },
+    )
+    .toBe(true);
+};
+
+const installLayoutShiftObserverAsync = async (page: Page) => {
+  await page.addInitScript(() => {
+    const target = window as typeof window & {
+      homarrLayoutShiftScore?: number;
+      homarrReleaseIdleCallbacks?: () => void;
+    };
+    const idleCallbacks = new Map<number, IdleRequestCallback>();
+    let nextIdleCallbackId = 1;
+
+    target.homarrLayoutShiftScore = 0;
+    target.requestIdleCallback = (callback) => {
+      const callbackId = nextIdleCallbackId++;
+      idleCallbacks.set(callbackId, callback);
+      return callbackId;
+    };
+    target.cancelIdleCallback = (callbackId) => {
+      idleCallbacks.delete(callbackId);
+    };
+    target.homarrReleaseIdleCallbacks = () => {
+      const callbacks = [...idleCallbacks.values()];
+      idleCallbacks.clear();
+      for (const callback of callbacks) {
+        callback({
+          didTimeout: false,
+          timeRemaining: () => 50,
+        });
+      }
+    };
+
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        const shift = entry as PerformanceEntry & { hadRecentInput: boolean; value: number };
+        if (!shift.hadRecentInput) {
+          target.homarrLayoutShiftScore = (target.homarrLayoutShiftScore ?? 0) + shift.value;
+        }
+      }
+    }).observe({ type: "layout-shift", buffered: true });
+  });
+};
+
+const releaseIdleCallbacksAsync = async (page: Page) => {
+  await page.evaluate(() => {
+    const release = (
+      window as typeof window & {
+        homarrReleaseIdleCallbacks?: () => void;
+      }
+    ).homarrReleaseIdleCallbacks;
+    if (!release) {
+      throw new Error("Idle callback release hook was not installed");
+    }
+    release();
+  });
+};
+
+const readLayoutShiftScoreAsync = async (page: Page) =>
+  await page.evaluate(
+    () => (window as typeof window & { homarrLayoutShiftScore?: number }).homarrLayoutShiftScore ?? 0,
+  );
+
+const resetLayoutShiftScoreAsync = async (page: Page) => {
+  await page.evaluate(() => {
+    (window as typeof window & { homarrLayoutShiftScore?: number }).homarrLayoutShiftScore = 0;
+  });
+};
+
+const dragLocatorByAsync = async (page: Page, locator: Locator, deltaX: number, deltaY: number) => {
+  const entry = await getGridEntryLocatorAsync(locator);
+  await expectGridEntryGeometrySettledAsync(entry);
+  const box = await expectBoundingBoxAsync(locator);
+  await dragLocatorToAsync(page, locator, box.x + box.width / 2 + deltaX, box.y + box.height / 2 + deltaY);
+};
+
+const dragHandleToGridPositionAsync = async (
+  page: Page,
+  handle: Locator,
+  entry: Locator,
+  grid: Locator,
+  x: number,
+  y: number,
+  scale: number,
+) => {
+  await expectGridEntryGeometrySettledAsync(entry);
+  const handleBox = await expectBoundingBoxAsync(handle);
+  const entryBox = await expectBoundingBoxAsync(entry);
+  const gridBox = await expectBoundingBoxAsync(grid);
+  const grabOffset = {
+    x: handleBox.x + handleBox.width / 2 - entryBox.x,
+    y: handleBox.y + handleBox.height / 2 - entryBox.y,
+  };
+  await dragLocatorToAsync(
+    page,
+    handle,
+    gridBox.x + x * logicalCellPitch * scale + grabOffset.x,
+    gridBox.y + y * logicalCellPitch * scale + grabOffset.y,
+  );
+};
+
+interface OffsetDragInput {
+  deltaX: number;
+  deltaY: number;
+  startXRatio: number;
+  startYRatio: number;
+}
+
+const dragLocatorByFromOffsetAsync = async (
+  page: Page,
+  locator: Locator,
+  { deltaX, deltaY, startXRatio, startYRatio }: OffsetDragInput,
+) => {
+  const itemId = await locator.getAttribute("data-grid-item-id");
+  expect(itemId).not.toBeNull();
+  if (!itemId) throw new Error("Expected draggable grid entry id");
+
+  const grid = locator.locator("xpath=ancestor::*[@data-grid-section-id][1]");
+  const box = await expectBoundingBoxAsync(locator);
+  const startX = box.x + box.width * startXRatio;
+  const startY = box.y + box.height * startYRatio;
+  const targetX = startX + deltaX;
+  const targetY = startY + deltaY;
+  const expectedOffset = { x: startX - box.x, y: startY - box.y };
+
+  await page.mouse.move(startX, startY);
+  await page.mouse.down();
+  await page.mouse.move(targetX, targetY, { steps: 12 });
+
+  await expect(locator).toHaveAttribute("data-dnd-active", "true");
+  await expect(locator).toHaveAttribute("data-dnd-drag-source", "true");
+  await expect(grid).toHaveAttribute("data-dnd-drop-target", "true");
+  await expect(grid).toHaveAttribute("data-dnd-drop-valid", "true");
+  await expect(page.locator(`[data-grid-placeholder-for="${itemId}"]`)).toHaveCount(1);
+  const dragOverlay = page.locator("[data-dnd-overlay][data-dnd-dragging]");
+  await expect(dragOverlay).toBeVisible();
+  await expect
+    .poll(async () => {
+      const draggedBox = await dragOverlay.evaluate((element) => {
+        const rectangle = element.getBoundingClientRect();
+        return {
+          x: rectangle.x,
+          y: rectangle.y,
+          width: rectangle.width,
+          height: rectangle.height,
+        };
+      });
+      if (draggedBox.width <= 0 || draggedBox.height <= 0) return false;
+      const actualOffset = {
+        x: targetX - draggedBox.x,
+        y: targetY - draggedBox.y,
+      };
+      return Math.abs(actualOffset.x - expectedOffset.x) < 2 && Math.abs(actualOffset.y - expectedOffset.y) < 2;
+    })
+    .toBe(true);
+
+  await page.mouse.up();
+  await expect(locator).not.toHaveAttribute("data-dnd-active");
+  await expect(locator).not.toHaveAttribute("data-dnd-drag-source");
+  await expect(dragOverlay).toHaveCount(0);
+  await expect(grid).toHaveAttribute("data-dnd-drop-target", "false");
+  await expect(grid).not.toHaveAttribute("data-dnd-drop-valid");
+  await expect(page.locator(`[data-grid-placeholder-for="${itemId}"]`)).toHaveCount(0);
+};
+
+const expectCancelledDragRestoresSnapshotAsync = async (
+  page: Page,
+  grid: Locator,
+  locator: Locator,
+  deltaX: number,
+  deltaY: number,
+) => {
+  const snapshot = await readEditorGridSnapshotAsync(grid);
+  const itemId = await locator.getAttribute("data-grid-item-id");
+  expect(itemId).not.toBeNull();
+  if (!itemId) throw new Error("Expected draggable grid entry id");
+
+  const box = await expectBoundingBoxAsync(locator);
+  const startX = box.x + box.width * 0.63;
+  const startY = box.y + box.height * 0.42;
+  await page.mouse.move(startX, startY);
+  await page.mouse.down();
+  await page.mouse.move(startX + deltaX, startY + deltaY, { steps: 12 });
+  await expect(locator).toHaveAttribute("data-dnd-drag-source", "true");
+  await expect(grid).toHaveAttribute("data-dnd-drop-valid", "true");
+  await expect(page.locator(`[data-grid-placeholder-for="${itemId}"]`)).toHaveCount(1);
+
+  await page.keyboard.press("Escape");
+  await page.mouse.up();
+  await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
+  await expect(locator).not.toHaveAttribute("data-dnd-active");
+  await expect(locator).not.toHaveAttribute("data-dnd-drag-source");
+  await expect(grid).toHaveAttribute("data-dnd-drop-target", "false");
+  await expect(grid).not.toHaveAttribute("data-dnd-drop-valid");
+  await expect(page.locator(`[data-grid-placeholder-for="${itemId}"]`)).toHaveCount(0);
+  await expect.poll(async () => await readEditorGridSnapshotAsync(grid)).toEqual(snapshot);
+};
+
+const expectInvalidDropRestoresSnapshotAsync = async (page: Page, grid: Locator, locator: Locator) => {
+  const snapshot = await readEditorGridSnapshotAsync(grid);
+  const box = await expectBoundingBoxAsync(locator);
+  const startX = box.x + box.width / 2;
+  const startY = box.y + box.height / 2;
+
+  await page.mouse.move(startX, startY);
+  await page.mouse.down();
+  await page.mouse.move(startX + 8, startY + 8, { steps: 2 });
+  await expect(locator).toHaveAttribute("data-dnd-drag-source", "true");
+  await page.mouse.move(2, 2, { steps: 12 });
+  await expect(page.locator("[data-grid-placeholder-for]")).toHaveCount(0);
+  await expect(grid).toHaveAttribute("data-dnd-drop-target", "false");
+
+  await page.mouse.up();
+  await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
+  await expect(locator).not.toHaveAttribute("data-dnd-active");
+  await expect(locator).not.toHaveAttribute("data-dnd-drag-source");
+  await expect.poll(async () => await readEditorGridSnapshotAsync(grid)).toEqual(snapshot);
+};
+
+const expectImmediateOutsideReleaseRestoresSnapshotAsync = async (page: Page, grid: Locator, locator: Locator) => {
+  const snapshot = await readEditorGridSnapshotAsync(grid);
+  const itemId = await locator.getAttribute("data-grid-item-id");
+  expect(itemId).not.toBeNull();
+  if (!itemId) throw new Error("Expected draggable grid entry id");
+
+  const box = await expectBoundingBoxAsync(locator);
+  const start = { x: box.x + box.width * 0.63, y: box.y + box.height * 0.42 };
+  await page.mouse.move(start.x, start.y);
+  await page.mouse.down();
+  await page.mouse.move(start.x + 8, start.y);
+  await expect(locator).toHaveAttribute("data-dnd-drag-source", "true");
+  await expect(page.locator(`[data-grid-placeholder-for="${itemId}"]`)).toHaveCount(1);
+
+  await page.evaluate(() => {
+    document.dispatchEvent(
+      new PointerEvent("pointerup", {
+        bubbles: true,
+        pointerId: 1,
+        pointerType: "mouse",
+        isPrimary: true,
+        button: 0,
+        buttons: 0,
+        clientX: 2,
+        clientY: 2,
+      }),
+    );
+  });
+  await page.mouse.up();
+  await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
+  await expect(page.locator(`[data-grid-placeholder-for="${itemId}"]`)).toHaveCount(0);
+  await expect.poll(async () => await readEditorGridSnapshotAsync(grid)).toEqual(snapshot);
+};
+
+const expectGridBoundaryRejectsOverflowAsync = async (page: Page, grid: Locator, locator: Locator) => {
+  const snapshot = await readEditorGridSnapshotAsync(grid);
+  const gridBox = await expectBoundingBoxAsync(grid);
+  const itemBox = await expectBoundingBoxAsync(locator);
+  const start = { x: itemBox.x + itemBox.width * 0.63, y: itemBox.y + itemBox.height * 0.42 };
+
+  await page.mouse.move(start.x, start.y);
+  await page.mouse.down();
+  await page.mouse.move(start.x + 8, start.y);
+  await expect(locator).toHaveAttribute("data-dnd-drag-source", "true");
+  await page.mouse.move(gridBox.x + gridBox.width / 2, gridBox.y + gridBox.height + logicalCellPitch, { steps: 12 });
+  await expect(page.locator("[data-grid-placeholder-for]")).toHaveCount(0);
+  const activeGridBox = await expectBoundingBoxAsync(grid);
+  expect(activeGridBox.height).toBeCloseTo(gridBox.height, 1);
+
+  await page.mouse.up();
+  await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
+  await expect.poll(async () => await readEditorGridSnapshotAsync(grid)).toEqual(snapshot);
+};
+
+const expectInvalidNestedDropRestoresSnapshotAsync = async (
+  page: Page,
+  sourceGrid: Locator,
+  targetGrid: Locator,
+  locator: Locator,
+  targetX: number,
+  targetY: number,
+) => {
+  const snapshot = await readEditorGridSnapshotAsync(sourceGrid);
+  const box = await expectBoundingBoxAsync(locator);
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+  await page.mouse.down();
+  await page.mouse.move(targetX, targetY, { steps: 12 });
+
+  await expect(locator).toHaveAttribute("data-dnd-drag-source", "true");
+  await expect(targetGrid).toHaveAttribute("data-dnd-drop-target", "true");
+  await expect(targetGrid).toHaveAttribute("data-dnd-drop-valid", "false");
+  await expect(sourceGrid).toHaveAttribute("data-dnd-drop-target", "false");
+  await expect(page.locator("[data-grid-placeholder-for]")).toHaveCount(0);
+  const previewRevision = await targetGrid.getAttribute("data-dnd-preview-revision");
+  expect(previewRevision).not.toBeNull();
+  await page.waitForTimeout(250);
+  await expect(targetGrid).toHaveAttribute("data-dnd-drop-valid", "false");
+  await expect(targetGrid).toHaveAttribute("data-dnd-preview-revision", previewRevision ?? "");
+  await expect(page.locator("[data-grid-placeholder-for]")).toHaveCount(0);
+
+  await page.mouse.up();
+  await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
+  await expect(locator).not.toHaveAttribute("data-dnd-drag-source");
+  await expect(targetGrid).toHaveAttribute("data-dnd-drop-target", "false");
+  await expect.poll(async () => await readEditorGridSnapshotAsync(sourceGrid)).toEqual(snapshot);
+};
+
+const getGridEntryLocatorAsync = async (locator: Locator) => {
+  const entry = (await locator.getAttribute("data-grid-item-id"))
+    ? locator
+    : locator.locator("xpath=ancestor::*[@data-grid-item-id][1]");
+  await expect(entry).toHaveCount(1);
+  return entry;
+};
+const dragLocatorToAsync = async (page: Page, locator: Locator, targetX: number, targetY: number) => {
+  const entry = await getGridEntryLocatorAsync(locator);
+  await expectGridEntryGeometrySettledAsync(entry);
+
+  const box = await expectBoundingBoxAsync(locator);
+  const startX = box.x + box.width / 2;
+  const startY = box.y + box.height / 2;
+
+  await page.mouse.move(startX, startY);
+  await page.mouse.down();
+  await page.mouse.move(targetX, targetY, { steps: 12 });
+
+  if (await locator.getAttribute("data-grid-resize-handle")) {
+    await expect(page.locator("body")).toHaveAttribute("data-board-grid-interacting", "resize");
+  } else {
+    const itemId = await entry.getAttribute("data-grid-item-id");
+    expect(itemId).not.toBeNull();
+    if (!itemId) throw new Error("Expected draggable grid entry id");
+    await expect(entry).toHaveAttribute("data-dnd-drag-source", "true");
+    await expect(page.locator(`[data-grid-placeholder-for="${itemId}"]`)).toHaveCount(1);
+  }
+
+  await page.mouse.up();
+  await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
+};
+
+const dragLocatorByTouchAsync = async (page: Page, locator: Locator, deltaX: number, deltaY: number) => {
+  const box = await expectBoundingBoxAsync(locator);
+  const start = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+  const session = await page.context().newCDPSession(page);
+  await session.send("Emulation.setTouchEmulationEnabled", { enabled: true, maxTouchPoints: 1 });
+
+  try {
+    await session.send("Input.dispatchTouchEvent", {
+      type: "touchStart",
+      touchPoints: [{ ...start, id: 1, radiusX: 1, radiusY: 1, force: 1 }],
+    });
+    await page.waitForTimeout(225);
+    for (let step = 1; step <= 12; step += 1) {
+      await session.send("Input.dispatchTouchEvent", {
+        type: "touchMove",
+        touchPoints: [
+          {
+            x: start.x + (deltaX * step) / 12,
+            y: start.y + (deltaY * step) / 12,
+            id: 1,
+            radiusX: 1,
+            radiusY: 1,
+            force: 1,
+          },
+        ],
+      });
+    }
+    await expect(locator).toHaveAttribute("data-dnd-drag-source", "true");
+    await session.send("Input.dispatchTouchEvent", { type: "touchEnd", touchPoints: [] });
+    await expect(locator).not.toHaveAttribute("data-dnd-drag-source");
+  } finally {
+    await session.send("Emulation.setTouchEmulationEnabled", { enabled: false });
+    await session.detach();
+  }
+};
+
+const expectTouchResizeCancellationRestoresAsync = async (
+  page: Page,
+  grid: Locator,
+  handle: Locator,
+  deltaX: number,
+  deltaY: number,
+) => {
+  const snapshot = await readEditorGridSnapshotAsync(grid);
+  const box = await expectBoundingBoxAsync(handle);
+  const start = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+  const session = await page.context().newCDPSession(page);
+  await session.send("Emulation.setTouchEmulationEnabled", { enabled: true, maxTouchPoints: 1 });
+
+  try {
+    await session.send("Input.dispatchTouchEvent", {
+      type: "touchStart",
+      touchPoints: [{ ...start, id: 1, radiusX: 1, radiusY: 1, force: 1 }],
+    });
+    await expect(page.locator("body")).toHaveAttribute("data-board-grid-interacting", "resize");
+    for (let step = 1; step <= 4; step += 1) {
+      await session.send("Input.dispatchTouchEvent", {
+        type: "touchMove",
+        touchPoints: [
+          {
+            x: start.x + (deltaX * step) / 4,
+            y: start.y + (deltaY * step) / 4,
+            id: 1,
+            radiusX: 1,
+            radiusY: 1,
+            force: 1,
+          },
+        ],
+      });
+    }
+    await session.send("Input.dispatchTouchEvent", { type: "touchCancel", touchPoints: [] });
+    await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
+    await expect.poll(async () => await readEditorGridSnapshotAsync(grid)).toEqual(snapshot);
+  } finally {
+    await session.send("Emulation.setTouchEmulationEnabled", { enabled: false });
+    await session.detach();
+  }
+};
+
+const dragLocatorByImmediateReleaseAsync = async (
+  page: Page,
+  locator: Locator,
+  deltaX: number,
+  deltaY: number,
+  afterActivation?: () => Promise<void>,
+) => {
+  const box = await expectBoundingBoxAsync(locator);
+  await dragLocatorToImmediateReleaseAsync(
+    page,
+    locator,
+    box.x + box.width * 0.63 + deltaX,
+    box.y + box.height * 0.42 + deltaY,
+    afterActivation,
+  );
+};
+
+const dragLocatorToImmediateReleaseAsync = async (
+  page: Page,
+  locator: Locator,
+  targetX: number,
+  targetY: number,
+  afterActivation?: () => Promise<void>,
+) => {
+  const box = await expectBoundingBoxAsync(locator);
+  const start = { x: box.x + box.width * 0.63, y: box.y + box.height * 0.42 };
+  await page.mouse.move(start.x, start.y);
+  await page.mouse.down();
+  await page.mouse.move(start.x + 8, start.y);
+  await expect(locator).toHaveAttribute("data-dnd-drag-source", "true");
+  await afterActivation?.();
+
+  await page.evaluate(
+    ({ x, y }) => {
+      document.dispatchEvent(
+        new PointerEvent("pointermove", {
+          bubbles: true,
+          pointerId: 1,
+          pointerType: "mouse",
+          isPrimary: true,
+          button: -1,
+          buttons: 1,
+          clientX: x,
+          clientY: y,
+        }),
+      );
+      document.dispatchEvent(
+        new PointerEvent("pointerup", {
+          bubbles: true,
+          pointerId: 1,
+          pointerType: "mouse",
+          isPrimary: true,
+          button: 0,
+          buttons: 0,
+          clientX: x,
+          clientY: y,
+        }),
+      );
+    },
+    { x: targetX, y: targetY },
+  );
+  await page.mouse.up();
+  await expect(locator).not.toHaveAttribute("data-dnd-drag-source");
+  await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
+};
+
+const resizeLocatorByImmediateReleaseAsync = async (page: Page, handle: Locator, deltaX: number, deltaY: number) => {
+  const entry = await getGridEntryLocatorAsync(handle);
+  await expectGridEntryGeometrySettledAsync(entry);
+  const box = await expectBoundingBoxAsync(handle);
+  const start = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+  await page.mouse.move(start.x, start.y);
+  await page.mouse.down();
+  await expect(page.locator("body")).toHaveAttribute("data-board-grid-interacting", "resize");
+
+  await handle.evaluate(
+    (element, { x, y }) => {
+      element.dispatchEvent(
+        new PointerEvent("pointerup", {
+          bubbles: true,
+          pointerId: 1,
+          pointerType: "mouse",
+          isPrimary: true,
+          button: 0,
+          buttons: 0,
+          clientX: x,
+          clientY: y,
+        }),
+      );
+    },
+    { x: start.x + deltaX, y: start.y + deltaY },
+  );
+  await page.mouse.up();
+  await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
+};
+
+const readCanvasScaleAsync = async (canvas: Locator) => {
+  const scale = Number(await canvas.getAttribute("data-canvas-scale"));
+  expect(Number.isFinite(scale)).toBe(true);
+  expect(scale).toBeGreaterThan(0);
+  return scale;
+};
+
+const setDocumentZoomAsync = async (page: Page, zoom: number) => {
+  await page.evaluate((nextZoom) => {
+    document.documentElement.style.zoom = String(nextZoom);
+  }, zoom);
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve) => {
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+      }),
+  );
+};
+
+const moveEntryWithModalAsync = async (page: Page, entry: Locator, targetName: RegExp) => {
+  await entry.getByRole("button", { name: /^Settings for / }).click();
+  await page.getByRole("menuitem", { name: "Move / resize item", exact: true }).click();
+
+  const dialog = page.getByRole("dialog", { name: "Move / resize item" });
+  await dialog.getByLabel("Section or rail").click();
+  await page.getByRole("option", { name: targetName }).click();
+  await dialog.getByRole("button", { name: "Save changes", exact: true }).click();
+};
+
+const getKeyboardEditorEntry = (entry: Locator) => entry.locator("[data-editor-grid-entry]").first();
+
+const readEditorGridSnapshotAsync = async (grid: Locator) =>
+  await grid.locator(":scope > .board-grid-entry").evaluateAll((entries) =>
+    entries
+      .map((entry) => ({
+        id: entry.getAttribute("data-grid-item-id"),
+        x: entry.getAttribute("data-grid-x"),
+        y: entry.getAttribute("data-grid-y"),
+        w: entry.getAttribute("data-grid-w"),
+        h: entry.getAttribute("data-grid-h"),
+      }))
+      .toSorted((first, second) => (first.id ?? "").localeCompare(second.id ?? "")),
+  );
+
+const expectFixedLogicalTileAsync = async (locator: Locator) => {
+  await expect(locator).toHaveJSProperty("offsetWidth", logicalCellSize);
+  await expect(locator).toHaveJSProperty("offsetHeight", logicalCellSize);
+};
+
+const expectUniformVisualScaleAsync = async (locator: Locator) => {
+  const scale = await locator.evaluate((element) => {
+    const rect = element.getBoundingClientRect();
+    const htmlElement = element as HTMLElement;
+    return {
+      horizontal: rect.width / htmlElement.offsetWidth,
+      vertical: rect.height / htmlElement.offsetHeight,
+    };
+  });
+
+  expect(scale.horizontal).toBeCloseTo(scale.vertical, 3);
+};
+
+const expectHorizontalOverflowAsync = async (locator: Locator) => {
+  const dimensions = await locator.evaluate((element) => {
+    const htmlElement = element as HTMLElement;
+    return {
+      clientWidth: htmlElement.clientWidth,
+      scrollWidth: htmlElement.scrollWidth,
+    };
+  });
+
+  expect(dimensions.scrollWidth).toBeGreaterThan(dimensions.clientWidth);
+};
+
+const expectDocumentNotHorizontallyScrollableAsync = async (page: Page) => {
+  await expect
+    .poll(
+      async () =>
+        await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth),
+    )
+    .toBeLessThanOrEqual(1);
+};
+
+const expectTargetSizeAsync = async (locator: Locator) => {
+  const box = await expectBoundingBoxAsync(locator);
+  expect(box.width).toBeGreaterThanOrEqual(24);
+  expect(box.height).toBeGreaterThanOrEqual(24);
+};
+
+const expectLogicalTargetSizeAsync = async (locator: Locator, minimumSize: number) => {
+  const dimensions = await locator.evaluate((element) => ({
+    width: (element as HTMLElement).offsetWidth,
+    height: (element as HTMLElement).offsetHeight,
+  }));
+  expect(dimensions.width).toBeGreaterThanOrEqual(minimumSize);
+  expect(dimensions.height).toBeGreaterThanOrEqual(minimumSize);
+};
+
+const readGridLayoutAsync = async (locator: Locator) => {
+  const [x, y, width, height] = await Promise.all([
+    locator.getAttribute("data-grid-x"),
+    locator.getAttribute("data-grid-y"),
+    locator.getAttribute("data-grid-w"),
+    locator.getAttribute("data-grid-h"),
+  ]);
+
+  expect(x).not.toBeNull();
+  expect(y).not.toBeNull();
+  expect(width).not.toBeNull();
+  expect(height).not.toBeNull();
+
+  return {
+    x: Number(x),
+    y: Number(y),
+    width: Number(width),
+    height: Number(height),
+  };
+};
+
+const gridLayoutsOverlap = (
+  first: { x: number; y: number; width: number; height: number },
+  second: { x: number; y: number; width: number; height: number },
+) =>
+  first.x < second.x + second.width &&
+  first.x + first.width > second.x &&
+  first.y < second.y + second.height &&
+  first.y + first.height > second.y;
diff --git a/e2e/custom-widgets-custom-jsx-v2.spec.ts b/e2e/custom-widgets-custom-jsx-v2.spec.ts
new file mode 100644
index 000000000..dbd66d005
--- /dev/null
+++ b/e2e/custom-widgets-custom-jsx-v2.spec.ts
@@ -0,0 +1,97 @@
+import { chromium, expect } from "@playwright/test";
+import type { Browser } from "@playwright/test";
+import type { StartedTestContainer } from "testcontainers";
+import { describe, test } from "vitest";
+
+import { createHomarrContainer } from "./shared/create-homarr-container";
+import { createSqliteDbFileAsync } from "./shared/e2e-db";
+import type { MockApiServer } from "./shared/mock-api-server";
+import { startMockApiServerAsync } from "./shared/mock-api-server";
+import { seedAdminUserAsync } from "./shared/seed-admin-user";
+
+const adminCredentials = { username: "admin", password: "Comp(exP4sswOrd" };
+const initialTemplate =
+  "<Stack><Title order={4}>{data.status?.title}</Title><Badge>{data.status?.status}</Badge></Stack>";
+const updatedTemplate = "<Stack><Text fw={700}>{data.status?.title}</Text><Text>{data.status?.value}</Text></Stack>";
+
+describe("Custom JSX v2 workbench", () => {
+  test("creates, previews, edits, and immediately adds a widget to a board", async () => {
+    let mockApi: MockApiServer | undefined;
+    let homarrContainer: StartedTestContainer | undefined;
+    let browser: Browser | undefined;
+
+    try {
+      mockApi = await startMockApiServerAsync({ title: "E2E Widget", status: "online", value: 42 });
+      const { db, localMountPath } = await createSqliteDbFileAsync();
+      await seedAdminUserAsync(db, adminCredentials);
+      homarrContainer = await createHomarrContainer({
+        environment: { AUTH_PROVIDERS: "credentials" },
+        mounts: { "/appdata": localMountPath },
+      }).start();
+      const baseUrl = `http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`;
+      browser = await chromium.launch();
+      const page = await browser.newPage();
+
+      await page.goto(`${baseUrl}/auth/login`);
+      await page.waitForLoadState("networkidle");
+      await page.getByLabel("Username").fill(adminCredentials.username);
+      await page.locator("#password").fill(adminCredentials.password);
+      await page.locator("button[type='submit']").click();
+      await page.waitForURL(baseUrl, { timeout: 15_000 });
+
+      await page.goto(`${baseUrl}/manage/custom-widgets/new`);
+      await page.locator('input[data-path="name"]:visible').fill("E2E Custom JSX v2");
+      await page.getByRole("textbox", { name: "Base URL" }).fill(mockApi.url);
+      await page.getByRole("combobox", { name: "Network access" }).click();
+      await page.getByRole("option", { name: "private" }).click();
+      await page.getByRole("group", { name: "status" }).getByRole("textbox", { name: "Path" }).fill("/status");
+      await page.getByRole("button", { name: "Add option" }).click();
+      const option = page.getByRole("group", { name: "Option 1" });
+      await option.getByRole("textbox", { name: "Option name" }).fill("label");
+      await option.getByRole("textbox", { name: "Default" }).fill("E2E");
+      const request = page.getByRole("group", { name: "status" });
+      await request.getByRole("button", { name: "Query, body and behavior" }).click();
+      await request.getByRole("button", { name: "Add query value" }).click();
+      await request.getByRole("textbox", { name: "Query key" }).fill("label");
+      await request.getByRole("combobox", { name: "Value source" }).click();
+      await page.getByRole("option", { name: "Widget option" }).click();
+      await request.getByRole("combobox", { name: "Option" }).first().click();
+      await page.getByRole("option", { name: "label" }).click();
+      await page.getByRole("button", { name: "Advanced manifest JSON" }).first().click();
+      await expect(page.locator("#requests-editor")).toContainText('"$option": "label"');
+      await page.locator("#jsx-editor").fill(initialTemplate);
+
+      await page.getByRole("button", { name: "Test and preview" }).last().click();
+      await expect(page.getByRole("complementary", { name: "Widget preview" }).getByText("E2E Widget")).toBeVisible({
+        timeout: 15_000,
+      });
+
+      await page.getByRole("button", { name: "Create", exact: true }).last().click();
+      await expect(page.getByText('Widget "E2E Custom JSX v2" created successfully.')).toBeVisible({ timeout: 15_000 });
+      await page.waitForURL("**/manage/custom-widgets/edit/**", { timeout: 15_000 });
+
+      await page.locator("#jsx-editor").fill(updatedTemplate);
+      await page.getByRole("button", { name: "Save", exact: true }).last().click();
+      await expect(page.getByText('Widget "E2E Custom JSX v2" updated successfully.')).toBeVisible({ timeout: 15_000 });
+
+      await page.goto(baseUrl);
+      await page.getByRole("button", { name: "Edit", exact: true }).click();
+      await page.getByRole("button", { name: "New item", exact: true }).click();
+      await page.getByRole("menuitem", { name: "New item", exact: true }).click();
+      const picker = page.getByRole("dialog").last();
+      const customWidgetCard = picker.getByText("E2E Custom JSX v2", { exact: true }).locator("xpath=../../..");
+      await customWidgetCard.hover();
+      await customWidgetCard.getByRole("button", { name: "Add to board" }).click();
+      const addDialog = page.getByRole("dialog").last();
+      await expect(addDialog.getByText("E2E Custom JSX v2")).toBeVisible();
+      await addDialog.getByRole("button", { name: "Save changes", exact: true }).click();
+
+      await expect(page.getByText("Widget definition not found")).not.toBeVisible();
+      await page.getByRole("button", { name: "Save", exact: true }).click();
+      await expect(page.getByText("E2E Widget")).toBeVisible({ timeout: 15_000 });
+      await expect(page.getByText("42")).toBeVisible({ timeout: 15_000 });
+    } finally {
+      await Promise.allSettled([browser?.close(), homarrContainer?.stop(), mockApi?.close()]);
+    }
+  }, 180_000);
+});
diff --git a/e2e/custom-widgets-custom-jsx.spec.ts b/e2e/custom-widgets-custom-jsx.spec.ts
deleted file mode 100644
index 03fef32ec..000000000
--- a/e2e/custom-widgets-custom-jsx.spec.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { chromium, expect } from "@playwright/test";
-import { describe, test } from "vitest";
-
-import { createHomarrContainer } from "./shared/create-homarr-container";
-import { createSqliteDbFileAsync } from "./shared/e2e-db";
-import { startMockApiServerAsync } from "./shared/mock-api-server";
-import { seedAdminUserAsync } from "./shared/seed-admin-user";
-
-const adminCredentials = {
-  username: "admin",
-  password: "Comp(exP4sswOrd",
-};
-
-const initialTemplate =
-  '<Stack gap="xs"><Title order={4}>{data.title}</Title><Badge color="blue">{data.status}</Badge></Stack>';
-
-const updatedTemplate = '<Stack gap="xs"><Text>{data.title}</Text><Badge color="green">{data.value}</Badge></Stack>';
-
-describe("Custom JSX custom widgets", () => {
-  test("creates, previews, and edits a customJsx widget", async () => {
-    const mockApi = await startMockApiServerAsync({
-      title: "E2E Widget",
-      status: "online",
-      value: 42,
-    });
-
-    const { db, localMountPath } = await createSqliteDbFileAsync();
-    await seedAdminUserAsync(db, adminCredentials);
-
-    const homarrContainer = await createHomarrContainer({
-      environment: {
-        AUTH_PROVIDERS: "credentials",
-      },
-      mounts: {
-        "/appdata": localMountPath,
-      },
-    }).start();
-
-    const baseUrl = `http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`;
-    const browser = await chromium.launch();
-    const context = await browser.newContext();
-    const page = await context.newPage();
-
-    try {
-      await page.goto(`${baseUrl}/auth/login`);
-      // The submit button is disabled until the form finishes hydrating, so wait for it
-      // before filling to avoid a hydration re-mount resetting the field values.
-      const submitButton = page.locator("css=button[type='submit']");
-      await expect(submitButton).toBeEnabled({ timeout: 30_000 });
-      await page.getByLabel("Username").fill(adminCredentials.username);
-      await page.locator("#password").fill(adminCredentials.password);
-      await expect(page.getByLabel("Username")).toHaveValue(adminCredentials.username);
-      await submitButton.click();
-      await expect(page).not.toHaveURL(/\/auth\/login/, { timeout: 30_000 });
-
-      await page.goto(`${baseUrl}/manage/custom-widgets/new`);
-      await page.waitForURL("**/manage/custom-widgets/new", { timeout: 15_000 });
-      await page.getByRole("textbox", { name: "Name" }).fill("E2E Custom JSX");
-      await page.getByRole("textbox", { name: "URL", exact: true }).fill(`${mockApi.url}/status`);
-      await page.getByRole("combobox", { name: "Display Type" }).click();
-      await page.getByRole("option", { name: "Custom JSX" }).click();
-      await page.getByLabel("JSX Template").fill(initialTemplate);
-
-      await page.getByRole("button", { name: "Test" }).first().click();
-      const previewPanel = page.locator(".mantine-Card-root").filter({ hasText: "Preview" });
-      await expect(previewPanel.getByRole("heading", { name: "E2E Widget" }).first()).toBeVisible({
-        timeout: 15_000,
-      });
-
-      await page.getByRole("button", { name: "Create" }).first().click();
-      await expect(page.getByText('Widget "E2E Custom JSX" created successfully.')).toBeVisible({ timeout: 15_000 });
-      await page.waitForURL("**/manage/custom-widgets/edit/**", { timeout: 15_000 });
-      await expect(page.getByLabel("JSX Template")).toHaveValue(initialTemplate);
-
-      await page.getByLabel("JSX Template").fill(updatedTemplate);
-      await expect(page.getByLabel("JSX Template")).toHaveValue(updatedTemplate);
-
-      await page.getByRole("button", { name: "Save" }).first().click();
-      await expect(page.getByText('Widget "E2E Custom JSX" updated successfully.')).toBeVisible({ timeout: 15_000 });
-      await expect(page.getByLabel("JSX Template")).toHaveValue(updatedTemplate);
-    } finally {
-      await browser.close();
-      await homarrContainer.stop();
-      await mockApi.close();
-    }
-  }, 120_000);
-});
diff --git a/e2e/health-checks.spec.ts b/e2e/health-checks.spec.ts
index b280fcc56..d2b179f4f 100644
--- a/e2e/health-checks.spec.ts
+++ b/e2e/health-checks.spec.ts
@@ -4,22 +4,30 @@ import { createHomarrContainer } from "./shared/create-homarr-container";
 import { createRedisContainer } from "./shared/redis-container";
 
 describe("Health checks", () => {
-  test("ready and live should return 200 OK with normal image and no extra configuration", async () => {
+  test("ready and live should return 200 OK with normal image and no extra configuration", async ({
+    onTestFinished,
+  }) => {
     // Arrange
     const homarrContainer = await createHomarrContainer().start();
+    onTestFinished(() => homarrContainer.stop());
 
-    // Act
-    const readyResponse = await fetch(`http://localhost:${homarrContainer.getMappedPort(7575)}/api/health/ready`);
-    const liveResponse = await fetch(`http://localhost:${homarrContainer.getMappedPort(7575)}/api/health/live`);
+    try {
+      // Act
+      const readyResponse = await fetch(`http://localhost:${homarrContainer.getMappedPort(7575)}/api/health/ready`);
+      const liveResponse = await fetch(`http://localhost:${homarrContainer.getMappedPort(7575)}/api/health/live`);
 
-    // Assert
-    expect(readyResponse.status).toBe(200);
-    expect(liveResponse.status).toBe(200);
+      // Assert
+      expect(readyResponse.status).toBe(200);
+      expect(liveResponse.status).toBe(200);
+    } finally {
+      await homarrContainer.stop();
+    }
   }, 60_000);
 
-  test("ready and live should return 200 OK with external redis", async () => {
+  test("ready and live should return 200 OK with external redis", async ({ onTestFinished }) => {
     // Arrange
     const redisContainer = await createRedisContainer().start();
+    onTestFinished(() => redisContainer.stop());
     const homarrContainer = await createHomarrContainer({
       environment: {
         REDIS_IS_EXTERNAL: "true",
@@ -28,19 +36,24 @@ describe("Health checks", () => {
         REDIS_PASSWORD: redisContainer.getPassword(),
       },
     }).start();
+    onTestFinished(() => homarrContainer.stop());
 
-    // Act
-    const readyResponse = await fetch(`http://localhost:${homarrContainer.getMappedPort(7575)}/api/health/ready`);
-    const liveResponse = await fetch(`http://localhost:${homarrContainer.getMappedPort(7575)}/api/health/live`);
+    try {
+      // Act
+      const readyResponse = await fetch(`http://localhost:${homarrContainer.getMappedPort(7575)}/api/health/ready`);
+      const liveResponse = await fetch(`http://localhost:${homarrContainer.getMappedPort(7575)}/api/health/live`);
 
-    // Assert
-    expect(
-      readyResponse.status,
-      `Expected ready to return OK statusCode=${readyResponse.status} content=${await readyResponse.text()}`,
-    ).toBe(200);
-    expect(
-      liveResponse.status,
-      `Expected live to return OK statusCode=${liveResponse.status} content=${await liveResponse.text()}`,
-    ).toBe(200);
+      // Assert
+      expect(
+        readyResponse.status,
+        `Expected ready to return OK statusCode=${readyResponse.status} content=${await readyResponse.text()}`,
+      ).toBe(200);
+      expect(
+        liveResponse.status,
+        `Expected live to return OK statusCode=${liveResponse.status} content=${await liveResponse.text()}`,
+      ).toBe(200);
+    } finally {
+      await Promise.all([homarrContainer.stop(), redisContainer.stop()]);
+    }
   }, 60_000);
 });
diff --git a/e2e/home.spec.ts b/e2e/home.spec.ts
index 2d79d7247..dcc8685c9 100644
--- a/e2e/home.spec.ts
+++ b/e2e/home.spec.ts
@@ -7,10 +7,14 @@ describe("Home", () => {
     // Arrange
     const homarrContainer = await createHomarrContainer().start();
 
-    // Act
-    const homeResponse = await fetch(`http://localhost:${homarrContainer.getMappedPort(7575)}/`);
+    try {
+      // Act
+      const homeResponse = await fetch(`http://localhost:${homarrContainer.getMappedPort(7575)}/`);
 
-    // Assert
-    expect(homeResponse.status).toBe(200);
+      // Assert
+      expect(homeResponse.status).toBe(200);
+    } finally {
+      await homarrContainer.stop();
+    }
   }, 60_000);
 });
diff --git a/e2e/lazy-widgets.spec.ts b/e2e/lazy-widgets.spec.ts
new file mode 100644
index 000000000..0c31f0492
--- /dev/null
+++ b/e2e/lazy-widgets.spec.ts
@@ -0,0 +1,110 @@
+import { createId } from "@paralleldrive/cuid2";
+import { chromium, expect } from "@playwright/test";
+import { eq } from "drizzle-orm";
+import { stringify } from "superjson";
+import { describe, test } from "vitest";
+
+import * as sqliteSchema from "../packages/db/schema/sqlite";
+import { createHomarrContainer } from "./shared/create-homarr-container";
+import { createSqliteDbFileAsync } from "./shared/e2e-db";
+import { seedAdminUserAsync } from "./shared/seed-admin-user";
+
+const adminCredentials = {
+  username: "admin",
+  password: "Comp(exP4sswOrd",
+};
+
+describe("lazy widget application graph", () => {
+  test("renders an authenticated board and preserves first-use UI behavior after reload", async () => {
+    const { db, localMountPath } = await createSqliteDbFileAsync();
+    const { userId } = await seedAdminUserAsync(db, adminCredentials);
+    const boardId = createId();
+    const layoutId = createId();
+    const sectionId = createId();
+    const itemId = createId();
+
+    await db.insert(sqliteSchema.boards).values({
+      id: boardId,
+      name: "lazy-widget-board",
+      creatorId: userId,
+    });
+    await db.insert(sqliteSchema.layouts).values({
+      id: layoutId,
+      name: "Base",
+      boardId,
+      columnCount: 12,
+    });
+    await db.insert(sqliteSchema.sections).values({
+      id: sectionId,
+      boardId,
+      kind: "empty",
+      xOffset: 0,
+      yOffset: 0,
+    });
+    await db.insert(sqliteSchema.items).values({
+      id: itemId,
+      boardId,
+      kind: "clock",
+      options: stringify({ showSeconds: true }),
+    });
+    await db.insert(sqliteSchema.itemLayouts).values({
+      itemId,
+      sectionId,
+      layoutId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 4,
+      height: 2,
+    });
+    await db.update(sqliteSchema.users).set({ homeBoardId: boardId }).where(eq(sqliteSchema.users.id, userId));
+
+    const homarrContainer = await createHomarrContainer({
+      environment: {
+        AUTH_PROVIDERS: "credentials",
+      },
+      mounts: {
+        "/appdata": localMountPath,
+      },
+    }).start();
+
+    const baseUrl = `http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`;
+    const browser = await chromium.launch();
+    const context = await browser.newContext();
+    const page = await context.newPage();
+    const pageErrors: Error[] = [];
+    page.on("pageerror", (error) => pageErrors.push(error));
+
+    try {
+      await page.goto(`${baseUrl}/auth/login`);
+      await page.getByLabel("Username").fill(adminCredentials.username);
+      await page.locator("#password").fill(adminCredentials.password);
+      await page.locator("css=button[type='submit']").click();
+
+      await expect(page.locator("[data-homarr-dev-benchmark-board]")).toBeVisible({ timeout: 30_000 });
+      await expect(page.locator(`[data-id="${itemId}"] .clock-widget-container`)).toBeVisible({ timeout: 15_000 });
+
+      await page.keyboard.press("Control+K");
+      await expect(page.locator("[data-homarr-dev-benchmark-spotlight]")).toBeVisible();
+      await page.keyboard.press("Escape");
+      await expect(page.locator("[data-homarr-dev-benchmark-spotlight]")).not.toBeVisible();
+
+      await expect
+        .poll(
+          async () =>
+            await page.evaluate(async () => {
+              const registrations = await navigator.serviceWorker.getRegistrations();
+              return registrations[0]?.scope ?? null;
+            }),
+          { timeout: 15_000 },
+        )
+        .toBe(`${baseUrl}/`);
+
+      await page.reload();
+      await expect(page.locator(`[data-id="${itemId}"] .clock-widget-container`)).toBeVisible({ timeout: 15_000 });
+      expect(pageErrors).toEqual([]);
+    } finally {
+      await browser.close();
+      await homarrContainer.stop();
+    }
+  }, 120_000);
+});
diff --git a/e2e/lldap.spec.ts b/e2e/lldap.spec.ts
index f1f07790d..19ff9905c 100644
--- a/e2e/lldap.spec.ts
+++ b/e2e/lldap.spec.ts
@@ -37,45 +37,48 @@ describe("LLDAP authorization", () => {
     const context = await browser.newContext();
     const page = await context.newPage();
 
-    const onboardingActions = new OnboardingActions(page, db);
-    await onboardingActions.skipOnboardingAsync({
-      group: defaultCredentials.group,
-    });
+    try {
+      const onboardingActions = new OnboardingActions(page, db);
+      await onboardingActions.skipOnboardingAsync({
+        group: defaultCredentials.group,
+      });
 
-    // Act
-    await page.goto(`http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}/auth/login`);
-    await page.getByLabel("Username").fill(defaultCredentials.username);
-    await page.locator("#password").fill(defaultCredentials.password);
-    await page.locator("css=button[type='submit']").click();
+      // Act
+      const baseUrl = `http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`;
+      await page.goto(`${baseUrl}/auth/login`);
+      await page.getByLabel("Username").fill(defaultCredentials.username);
+      await page.locator("#password").fill(defaultCredentials.password);
+      await page.locator("css=button[type='submit']").click();
 
-    // Assert
-    await page.waitForURL(`http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`);
-    const users = await db.query.users.findMany({
-      with: {
-        groups: {
-          with: {
-            group: true,
+      // Assert
+      await page.waitForURL(baseUrl, { timeout: 60_000 });
+      const users = await db.query.users.findMany({
+        with: {
+          groups: {
+            with: {
+              group: true,
+            },
           },
         },
-      },
-    });
-    expect(users).toHaveLength(1);
-    const user = users[0]!;
-    expect(user).toEqual(
-      expect.objectContaining({
-        name: defaultCredentials.username,
-        email: defaultCredentials.email,
-        provider: "ldap",
-      }),
-    );
+      });
+      expect(users).toHaveLength(1);
+      const user = users[0];
+      if (!user) {
+        throw new Error("Expected LDAP login to create one user");
+      }
+      expect(user).toEqual(
+        expect.objectContaining({
+          name: defaultCredentials.username,
+          email: defaultCredentials.email,
+          provider: "ldap",
+        }),
+      );
 
-    const groups = user.groups.map((g) => g.group.name);
-    expect(groups).toContain(defaultCredentials.group);
-
-    // Cleanup
-    await browser.close();
-    await homarrContainer.stop();
-    await lldapContainer.stop();
+      const groups = user.groups.map((g) => g.group.name);
+      expect(groups).toContain(defaultCredentials.group);
+    } finally {
+      await Promise.all([browser.close(), homarrContainer.stop(), lldapContainer.stop()]);
+    }
   }, 120_000);
 });
 
diff --git a/e2e/onboarding.spec.ts b/e2e/onboarding.spec.ts
index a8a09773e..39f473c20 100644
--- a/e2e/onboarding.spec.ts
+++ b/e2e/onboarding.spec.ts
@@ -22,25 +22,25 @@ describe("Onboarding", () => {
     const actions = new OnboardingActions(page, db);
     const assertions = new OnboardingAssertions(page, db);
 
-    // Act
-    await page.goto(`http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`);
-    await actions.startOnboardingAsync("scratch");
-    await actions.processUserStepAsync({
-      username: "admin",
-      password: "Comp(exP4sswOrd",
-      confirmPassword: "Comp(exP4sswOrd",
-    });
-    await actions.processSettingsStepAsync();
-    await actions.processIntegrationsStepAsync();
+    try {
+      // Act
+      await page.goto(`http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`);
+      await actions.startOnboardingAsync("scratch");
+      await actions.processUserStepAsync({
+        username: "admin",
+        password: "Comp(exP4sswOrd",
+        confirmPassword: "Comp(exP4sswOrd",
+      });
+      await actions.processSettingsStepAsync();
+      await actions.processIntegrationsStepAsync();
 
-    // Assert
-    await assertions.assertFinishStepVisibleAsync();
-    await assertions.assertUserAndAdminGroupInsertedAsync("admin");
-    await assertions.assertDbOnboardingStepAsync("finish");
-
-    // Cleanup
-    await browser.close();
-    await homarrContainer.stop();
+      // Assert
+      await assertions.assertFinishStepVisibleAsync();
+      await assertions.assertUserAndAdminGroupInsertedAsync("admin");
+      await assertions.assertDbOnboardingStepAsync("finish");
+    } finally {
+      await Promise.all([browser.close(), homarrContainer.stop()]);
+    }
   }, 60_000);
 
   test("External provider onboarding setup should be successful", async () => {
@@ -66,22 +66,22 @@ describe("Onboarding", () => {
     const actions = new OnboardingActions(page, db);
     const assertions = new OnboardingAssertions(page, db);
 
-    // Act
-    await page.goto(`http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`);
-    await actions.startOnboardingAsync("scratch");
-    await actions.processExternalGroupStepAsync({
-      name: externalGroupName,
-    });
-    await actions.processSettingsStepAsync();
-    await actions.processIntegrationsStepAsync();
+    try {
+      // Act
+      await page.goto(`http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`);
+      await actions.startOnboardingAsync("scratch");
+      await actions.processExternalGroupStepAsync({
+        name: externalGroupName,
+      });
+      await actions.processSettingsStepAsync();
+      await actions.processIntegrationsStepAsync();
 
-    // Assert
-    await assertions.assertFinishStepVisibleAsync();
-    await assertions.assertExternalGroupInsertedAsync(externalGroupName);
-    await assertions.assertDbOnboardingStepAsync("finish");
-
-    // Cleanup
-    await browser.close();
-    await homarrContainer.stop();
+      // Assert
+      await assertions.assertFinishStepVisibleAsync();
+      await assertions.assertExternalGroupInsertedAsync(externalGroupName);
+      await assertions.assertDbOnboardingStepAsync("finish");
+    } finally {
+      await Promise.all([browser.close(), homarrContainer.stop()]);
+    }
   }, 60_000);
 });
diff --git a/e2e/shared/assertions/onboarding-assertions.ts b/e2e/shared/assertions/onboarding-assertions.ts
index 12cda67d0..c6cffc29c 100644
--- a/e2e/shared/assertions/onboarding-assertions.ts
+++ b/e2e/shared/assertions/onboarding-assertions.ts
@@ -57,6 +57,6 @@ export class OnboardingAssertions {
   }
 
   public async assertFinishStepVisibleAsync() {
-    await this.page.waitForSelector("text=completed the setup", { timeout: 15000 });
+    await this.page.waitForSelector("text=completed the setup", { timeout: 30_000 });
   }
 }
diff --git a/e2e/shared/create-homarr-container.ts b/e2e/shared/create-homarr-container.ts
index e69562593..fada1c440 100644
--- a/e2e/shared/create-homarr-container.ts
+++ b/e2e/shared/create-homarr-container.ts
@@ -1,5 +1,5 @@
 import { GenericContainer, Wait } from "testcontainers";
-import { Environment } from "testcontainers/build/types";
+import type { Environment } from "testcontainers/build/types";
 
 export const createHomarrContainer = (
   options: {
@@ -10,11 +10,13 @@ export const createHomarrContainer = (
     };
   } = {},
 ) => {
-  if (!process.env.CI) {
-    throw new Error("This test should only be run in CI or with a homarr image named 'homarr-e2e'");
+  const configuredImage = process.env.HOMARR_E2E_IMAGE?.trim();
+  const image = configuredImage || "homarr-e2e";
+  if (!process.env.CI && !configuredImage) {
+    throw new Error(`This test should only be run in CI or with a local Homarr image (configured: '${image}')`);
   }
 
-  const container = new GenericContainer("homarr-e2e")
+  const container = new GenericContainer(image)
     .withExposedPorts(7575)
     .withEnvironment({
       ...options.environment,
diff --git a/e2e/shared/login.ts b/e2e/shared/login.ts
new file mode 100644
index 000000000..7a3e3be1c
--- /dev/null
+++ b/e2e/shared/login.ts
@@ -0,0 +1,36 @@
+import type { Page } from "@playwright/test";
+
+interface LoginInput {
+  page: Page;
+  baseUrl: string;
+  credentials: {
+    username: string;
+    password: string;
+  };
+  destination?: string;
+}
+
+export const loginAsync = async ({ page, baseUrl, credentials, destination = "/" }: LoginInput) => {
+  const destinationUrl = new URL(destination, baseUrl);
+  const loginUrl = new URL("/auth/login", baseUrl);
+  loginUrl.searchParams.set("callbackUrl", `${destinationUrl.pathname}${destinationUrl.search}${destinationUrl.hash}`);
+
+  await page.goto(loginUrl.href, { waitUntil: "load" });
+  await page.waitForFunction(() => {
+    const form = document.querySelector("form");
+    return form !== null && Object.keys(form).some((key) => key.startsWith("__reactProps$"));
+  });
+  await page.getByLabel("Username").fill(credentials.username);
+  await page.locator("#password").fill(credentials.password);
+
+  const destinationNavigation = page.waitForURL(
+    (url) =>
+      url.origin === destinationUrl.origin &&
+      url.pathname === destinationUrl.pathname &&
+      url.search === destinationUrl.search &&
+      url.hash === destinationUrl.hash,
+    { timeout: 60_000 },
+  );
+  await page.locator("button[type='submit']").click();
+  await destinationNavigation;
+};
diff --git a/e2e/shared/mock-api-server.ts b/e2e/shared/mock-api-server.ts
index cbc838522..10ccbcaab 100644
--- a/e2e/shared/mock-api-server.ts
+++ b/e2e/shared/mock-api-server.ts
@@ -1,35 +1,50 @@
 import { createServer } from "node:http";
+import { getContainerRuntimeClient, TestContainers } from "testcontainers";
 
 import type { Server } from "node:http";
 
+const TESTCONTAINERS_SSHD_LABEL = "org.testcontainers.sshd";
+
 export interface MockApiServer {
   url: string;
-  port: number;
   close: () => Promise<void>;
 }
 
-export const startMockApiServerAsync = async (responseBody: unknown): Promise<MockApiServer> => {
+export async function startMockApiServerAsync(responseBody: unknown): Promise<MockApiServer> {
   const body = JSON.stringify(responseBody);
-
   const server: Server = await new Promise((resolve) => {
-    const s = createServer((_req, res) => {
-      res.writeHead(200, { "Content-Type": "application/json" });
-      res.end(body);
+    const candidate = createServer((_request, response) => {
+      response.writeHead(200, { "content-type": "application/json" });
+      response.end(body);
     });
-    s.listen(0, "0.0.0.0", () => resolve(s));
+    candidate.listen(0, "0.0.0.0", () => resolve(candidate));
   });
-
   const address = server.address();
   if (!address || typeof address === "string") {
+    server.close();
     throw new Error("Failed to start mock API server");
   }
 
-  return {
-    port: address.port,
-    url: `http://host.docker.internal:${address.port}`,
-    close: () =>
-      new Promise((resolve, reject) => {
-        server.close((error) => (error ? reject(error) : resolve()));
-      }),
-  };
-};
+  try {
+    await TestContainers.exposeHostPorts(address.port);
+    const client = await getContainerRuntimeClient();
+    const forwarder = (await client.container.list()).find(
+      (container) => container.State === "running" && container.Labels[TESTCONTAINERS_SSHD_LABEL] === "true",
+    );
+    const forwarderAddress = forwarder
+      ? Object.values(forwarder.NetworkSettings.Networks).find((network) => network.IPAddress)?.IPAddress
+      : undefined;
+    if (!forwarderAddress) throw new Error("Failed to locate the Testcontainers host-port forwarder");
+
+    return {
+      url: `http://${forwarderAddress}:${address.port}`,
+      close: () =>
+        new Promise((resolve, reject) => {
+          server.close((error) => (error ? reject(error) : resolve()));
+        }),
+    };
+  } catch (error) {
+    server.close();
+    throw error;
+  }
+}
diff --git a/e2e/shared/seed-admin-user.ts b/e2e/shared/seed-admin-user.ts
index 9f5b2737d..a34699ec1 100644
--- a/e2e/shared/seed-admin-user.ts
+++ b/e2e/shared/seed-admin-user.ts
@@ -36,6 +36,8 @@ export const seedAdminUserAsync = async (db: SqliteDatabase, input: SeedAdminUse
     name: input.username,
     provider: "credentials",
     password: await hashPasswordAsync(input.password),
+    completedManageTour: true,
+    completedBoardTour: true,
   });
 
   await db.insert(sqliteSchema.groups).values({
diff --git a/nginx.conf b/nginx.conf
index c1c082777..7754b4087 100644
--- a/nginx.conf
+++ b/nginx.conf
@@ -5,7 +5,7 @@ events {
 http {
     server {
         listen 7575;
-        listen [::]:7575;
+        ${NGINX_LISTEN_IPV6}
 
         # Route websockets traffic to port 3001
         location /websockets {
diff --git a/package.json b/package.json
index 5b92e5cb5..c6bab977d 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,19 @@
 {
   "name": "homarr",
-  "version": "1.73.0",
+  "version": "1.74.0",
   "private": true,
   "scripts": {
     "build": "cross-env CI=true turbo build",
+    "benchmark:build:docker": "node --experimental-strip-types scripts/benchmarks/docker-build.mts",
+    "benchmark:compare": "node --experimental-strip-types scripts/benchmarks/benchmark-compare.mts",
+    "benchmark:board-graph": "node --experimental-strip-types scripts/benchmarks/board-static-graph.mts",
+    "benchmark:docker": "node --experimental-strip-types scripts/benchmarks/docker-runtime.mts",
+    "benchmark:request-memory": "node --expose-gc --import tsx scripts/benchmarks/request-handler-memory.mts",
     "clean": "git clean -xdf node_modules",
     "clean:workspaces": "turbo clean",
+    "check:custom-widgets": "pnpm --filter @homarr/custom-widgets check:architecture",
+    "check:custom-widget-bundle": "node ./scripts/check-custom-widget-bundle.mjs",
+    "check:openapi": "tsx ./scripts/check-openapi-schema.mts",
     "ci:act:all": "bash scripts/ci/act.sh all",
     "ci:act:cleanup": "bash scripts/ci/act.sh cleanup",
     "ci:act:docker": "bash scripts/ci/act.sh docker",
@@ -21,9 +29,12 @@
     "db:push": "pnpm -F db push:sqlite",
     "db:studio": "pnpm -F db studio",
     "dev": "pnpm -F nextjs dev",
+    "dev:benchmark": "node --experimental-strip-types scripts/benchmarks/dev-board.mts",
     "dev:cli": "go -C tools/homarr-dev run .",
     "dev:cli:install": "go -C tools/homarr-dev install .",
     "dev:docs": "pnpm -F @homarr/docs dev",
+    "docker:docs": "docker compose -f apps/workshop/docker-compose.yml up --build docs",
+    "docker:workshop": "docker compose -f apps/workshop/docker-compose.yml up --build workshop",
     "docker:dev": "docker compose -f ./development/development.docker-compose.yml up",
     "docker:dev:up": "docker compose -f ./development/development.docker-compose.yml up -d redis",
     "format": "turbo format --continue -- --check",
@@ -34,9 +45,10 @@
     "release": "semantic-release",
     "scripts:update-bug-report-template": "tsx ./scripts/update-bug-report-template.mts",
     "scripts:update-readme-integrations": "tsx ./scripts/update-integration-list.mts",
-    "start": "concurrently \"pnpm with-env node apps/tasks/tasks.cjs\" \"pnpm with-env node apps/websocket/wssServer.cjs\" \"pnpm -F nextjs start\"",
+    "start": "pnpm -F nextjs start",
     "test": "cross-env NODE_ENV=development CI=true vitest run --exclude e2e --retry 2 --coverage.enabled ",
     "test:e2e": "cross-env NODE_ENV=development CI=true vitest e2e --retry 2 --maxWorkers 2",
+    "test:workshop": "sh apps/workshop/test.sh",
     "test:ui": "cross-env NODE_ENV=development CI=true vitest --exclude e2e --ui --coverage.enabled",
     "typecheck": "turbo typecheck",
     "with-env": "dotenv -e .env --"
@@ -45,6 +57,7 @@
     "jsonpath-plus": "catalog:"
   },
   "devDependencies": {
+    "@babel/parser": "catalog:",
     "@playwright/test": "catalog:",
     "@semantic-release/changelog": "catalog:",
     "@semantic-release/commit-analyzer": "catalog:",
@@ -65,6 +78,7 @@
     "oxlint": "catalog:",
     "semantic-release": "catalog:",
     "testcontainers": "catalog:",
+    "tsx": "catalog:",
     "turbo": "catalog:",
     "typescript": "catalog:",
     "vite": "catalog:",
diff --git a/packages/api/package.json b/packages/api/package.json
index 94fb1a00d..4eeedbddf 100644
--- a/packages/api/package.json
+++ b/packages/api/package.json
@@ -9,14 +9,18 @@
   "exports": {
     ".": "./src/index.ts",
     "./client": "./src/client.ts",
+    "./board-server": "./src/board-server.ts",
     "./query-cache": "./src/query-cache.ts",
+    "./server-settings-server": "./src/server-settings-server.ts",
+    "./user-server": "./src/user-server.ts",
     "./server": "./src/server.ts",
     "./websocket": "./src/websocket.ts",
     "./shared": "./src/shared.ts",
     "./open-api": "./src/open-api.ts",
     "./assistant": "./src/assistant.ts",
     "./custom-widget/display-data": "./src/router/custom-widget/display-data.ts",
-    "./mcp": "./src/mcp.ts"
+    "./mcp": "./src/mcp.ts",
+    "./custom-widget-configuration": "./src/custom-widget-configuration.ts"
   },
   "scripts": {
     "clean": "rm -rf .turbo node_modules",
@@ -31,6 +35,7 @@
     "@homarr/core": "workspace:^0.1.0",
     "@homarr/cron-job-status": "workspace:^0.1.0",
     "@homarr/cron-jobs": "workspace:^0.1.0",
+    "@homarr/custom-widgets": "workspace:^0.1.0",
     "@homarr/db": "workspace:^0.1.0",
     "@homarr/definitions": "workspace:^0.1.0",
     "@homarr/docker": "workspace:^0.1.0",
@@ -44,13 +49,13 @@
     "@homarr/server-settings": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
+    "@homarr/workshop": "workspace:^0.1.0",
     "@kubernetes/client-node": "catalog:",
     "@tanstack/react-query": "catalog:",
     "@trpc/client": "catalog:",
     "@trpc/react-query": "catalog:",
     "@trpc/server": "catalog:",
     "@trpc/tanstack-react-query": "catalog:",
-    "jsonpath-plus": "catalog:",
     "lodash.clonedeep": "catalog:",
     "next": "catalog:",
     "react": "catalog:",
@@ -58,6 +63,7 @@
     "superjson": "catalog:",
     "trpc-to-mcp": "catalog:",
     "trpc-to-openapi": "catalog:",
+    "undici": "catalog:",
     "zod": "catalog:"
   },
   "devDependencies": {
diff --git a/packages/api/src/board-server.ts b/packages/api/src/board-server.ts
new file mode 100644
index 000000000..aabd3a364
--- /dev/null
+++ b/packages/api/src/board-server.ts
@@ -0,0 +1,16 @@
+import { cache } from "react";
+
+import { createRscTrpcContext } from "./rsc-context";
+import { boardRouter } from "./router/board";
+
+const createBoardCallerAsync = async () => boardRouter.createCaller(await createRscTrpcContext());
+
+export const getBoardByNameAsync = cache(async (name: string) => {
+  const caller = await createBoardCallerAsync();
+  return await caller.getBoardByName({ name });
+});
+
+export const getHomeBoardAsync = cache(async () => {
+  const caller = await createBoardCallerAsync();
+  return await caller.getHomeBoard();
+});
diff --git a/packages/api/src/custom-widget-configuration.ts b/packages/api/src/custom-widget-configuration.ts
new file mode 100644
index 000000000..7e527dc99
--- /dev/null
+++ b/packages/api/src/custom-widget-configuration.ts
@@ -0,0 +1,7 @@
+export * from "./router/custom-widget/configuration-requests";
+export { configurePreviewSessionSource } from "./router/custom-widget/preview-sessions";
+export {
+  parseStoredCustomWidgetDefinition,
+  serializeCustomWidgetDefinition,
+} from "./router/custom-widget/stored-definition";
+export { configureCustomWidgetSourceFromRequest } from "./router/custom-widget/secret-persistence";
diff --git a/packages/api/src/env.ts b/packages/api/src/env.ts
index a978acf01..07a4d56ea 100644
--- a/packages/api/src/env.ts
+++ b/packages/api/src/env.ts
@@ -1,16 +1,34 @@
 import { z } from "zod/v4";
 
 import { createBooleanSchema, createEnv } from "@homarr/core/infrastructure/env";
+import { normalizeHttpUrl } from "@homarr/workshop/schema";
+
+const publicHttpUrl = (variableName: string) =>
+  z.string().transform((value, context) => {
+    try {
+      return normalizeHttpUrl(value, variableName);
+    } catch (error) {
+      context.addIssue({
+        code: "custom",
+        message: error instanceof Error ? error.message : `${variableName} is invalid`,
+      });
+      return z.NEVER;
+    }
+  });
 
 export const env = createEnv({
   server: {
     KUBERNETES_SERVICE_ACCOUNT_NAME: z.string().optional(),
     DEMO_MODE: createBooleanSchema(false),
     DEMO_READ_ONLY: createBooleanSchema(true),
+    HOMARR_WEBSITE_URL: publicHttpUrl("HOMARR_WEBSITE_URL").default("https://homarr.dev"),
+    WORKSHOP_API_URL: publicHttpUrl("WORKSHOP_API_URL").optional(),
   },
   runtimeEnv: {
     KUBERNETES_SERVICE_ACCOUNT_NAME: process.env.KUBERNETES_SERVICE_ACCOUNT_NAME,
     DEMO_MODE: process.env.DEMO_MODE,
     DEMO_READ_ONLY: process.env.DEMO_READ_ONLY,
+    HOMARR_WEBSITE_URL: process.env.HOMARR_WEBSITE_URL,
+    WORKSHOP_API_URL: process.env.WORKSHOP_API_URL,
   },
 });
diff --git a/packages/api/src/query-cache.ts b/packages/api/src/query-cache.ts
index a8cdb9641..50f96e1c2 100644
--- a/packages/api/src/query-cache.ts
+++ b/packages/api/src/query-cache.ts
@@ -1,22 +1,54 @@
 import type { QueryKey } from "@tanstack/react-query";
 
-export const queryCacheDefaultStaleTimeMs = 0;
+// RSC-prefetched data must survive the hydration pass without an immediate
+// duplicate fetch. Widget-specific intervals still control live refreshes.
+export const queryCacheDefaultStaleTimeMs = 30_000;
 export const queryCacheDefaultRefetchIntervalMs = 30_000;
-export const queryCacheDefaultGcTimeMs = 1000 * 60 * 60 * 24;
-export const queryCacheMaxValueBytes = 1024 * 1024;
-export const queryCacheStoragePrefix = "homarr-widget-query";
-export const queryCacheBuster = "v2-superjson";
+export const queryCacheDefaultGcTimeMs = 1000 * 60 * 5;
+export const queryCacheMetadataStaleTimeMs = 1000 * 60 * 5;
 
-let activeQueryCacheBoardId: string | null = null;
+const widgetDataQueryPaths = new Set(["app.byId", "app.byIds", "docker.getContainers", "integration.byIds"]);
+const excludedWidgetPaths = new Set(["widget.app.ping", "widget.beszel.getSystemStats"]);
 
-export const setActiveQueryCacheBoardId = (boardId: string | null) => {
-  activeQueryCacheBoardId = boardId;
+export const isWidgetDataTrpcPath = (path: string) => {
+  if (path.startsWith("widget.")) return !excludedWidgetPaths.has(path);
+  return widgetDataQueryPaths.has(path);
 };
 
-export const getActiveQueryCacheBoardId = () => activeQueryCacheBoardId;
-
-const persistableQueryPaths = new Set(["app.byId", "app.byIds", "docker.getContainers", "integration.byIds"]);
-const excludedWidgetPaths = new Set(["widget.app.ping", "widget.beszel.getSystemStats"]);
+// These supporting queries can be numerous on a dashboard. Give them a
+// predictable refresh policy instead of refetching all of them after every tab
+// focus/reconnect event. Metadata can refresh after a bounded stale window;
+// Docker state remains live on a single shared timer.
+export const dashboardSupportingQueryPolicies = [
+  {
+    queryKey: [["app", "byId"]],
+    refetchInterval: false,
+    staleTime: queryCacheMetadataStaleTimeMs,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
+  },
+  {
+    queryKey: [["app", "byIds"]],
+    refetchInterval: false,
+    staleTime: queryCacheMetadataStaleTimeMs,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
+  },
+  {
+    queryKey: [["integration", "byIds"]],
+    refetchInterval: false,
+    staleTime: queryCacheMetadataStaleTimeMs,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
+  },
+  {
+    queryKey: [["docker", "getContainers"]],
+    refetchInterval: queryCacheDefaultRefetchIntervalMs,
+    staleTime: queryCacheDefaultStaleTimeMs,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  },
+] as const;
 
 const getTrpcPathFromQueryKey = (queryKey: QueryKey) => {
   const first = queryKey[0];
@@ -26,11 +58,9 @@ const getTrpcPathFromQueryKey = (queryKey: QueryKey) => {
   return parts.length > 0 ? parts : null;
 };
 
-export const isPersistableWidgetQueryKey = (queryKey: QueryKey) => {
+export const isWidgetDataQueryKey = (queryKey: QueryKey) => {
   const path = getTrpcPathFromQueryKey(queryKey);
   if (!path) return false;
 
-  if (path[0] === "widget") return !excludedWidgetPaths.has(path.join("."));
-
-  return persistableQueryPaths.has(path.join("."));
+  return isWidgetDataTrpcPath(path.join("."));
 };
diff --git a/packages/api/src/root.ts b/packages/api/src/root.ts
index c61cb8fe1..5115e2b8e 100644
--- a/packages/api/src/root.ts
+++ b/packages/api/src/root.ts
@@ -25,7 +25,6 @@ export const appRouter = createTRPCRouter({
   cronJobs: lazy(() => import("./router/cron-jobs").then((mod) => mod.cronJobsRouter)),
   apiKeys: lazy(() => import("./router/apiKeys").then((mod) => mod.apiKeysRouter)),
   media: lazy(() => import("./router/medias/media-router").then((mod) => mod.mediaRouter)),
-  queryCache: lazy(() => import("./router/query-cache").then((mod) => mod.queryCacheRouter)),
   updateChecker: lazy(() => import("./router/update-checker").then((mod) => mod.updateCheckerRouter)),
   certificates: lazy(() => import("./router/certificates/certificate-router").then((mod) => mod.certificateRouter)),
   bangs: lazy(() => import("./router/bangs/bangs-router").then((mod) => mod.bangsRouter)),
diff --git a/packages/api/src/router/board.ts b/packages/api/src/router/board.ts
index 9655da09d..8b5ec550f 100644
--- a/packages/api/src/router/board.ts
+++ b/packages/api/src/router/board.ts
@@ -2,13 +2,15 @@ import { TRPCError } from "@trpc/server";
 import superjson from "superjson";
 import { z } from "zod/v4";
 
-import { createLogger } from "@homarr/core/infrastructure/logs";
 import { constructBoardPermissions } from "@homarr/auth/shared";
-import { createId } from "@homarr/common";
+import { createId, generateResponsiveGridFor } from "@homarr/common";
+import type { GridAlgorithmItem } from "@homarr/common";
 import type { DeviceType } from "@homarr/common/server";
+import { createLogger } from "@homarr/core/infrastructure/logs";
 import type { Database, InferInsertModel, InferSelectModel, SQL } from "@homarr/db";
 import { and, asc, eq, handleTransactionsAsync, inArray, isNull, like, not, or, sql } from "@homarr/db";
 import { createDbInsertCollectionWithoutTransaction } from "@homarr/db/collection";
+import { seedProtectedBoardLayoutsAsync } from "@homarr/db/migrations/seed";
 import { getServerSettingByKeyAsync } from "@homarr/db/queries";
 import {
   boardGroupPermissions,
@@ -29,12 +31,17 @@ import {
   sections,
   users,
 } from "@homarr/db/schema";
-import type { WidgetKind } from "@homarr/definitions";
+import type { BoardLane, WidgetKind } from "@homarr/definitions";
 import {
+  boardLanes,
   emptySuperJSON,
   everyoneGroup,
+  getBoardLaneColumnCount,
+  getRootSectionLane,
   getPermissionsWithChildren,
   getPermissionsWithParents,
+  normalizeBoardLayoutRoles,
+  rootSectionOffsets,
   widgetDefaultSizes,
   widgetIntegrationLimits,
   widgetIntegrationSupport,
@@ -51,6 +58,7 @@ import {
   boardCreateSchema,
   boardDuplicateSchema,
   boardRenameSchema,
+  boardResetLayoutSchema,
   boardSaveLayoutsSchema,
   boardSavePartialSettingsSchema,
   boardSavePermissionsSchema,
@@ -65,8 +73,12 @@ import { sectionSchema, sharedItemSchema } from "@homarr/validation/shared";
 
 import { createTRPCRouter, permissionRequiredProcedure, protectedProcedure, publicProcedure } from "../trpc";
 import { throwIfActionForbiddenAsync } from "./board/board-access";
-import { generateResponsiveGridFor } from "./board/grid-algorithm";
 import { throwIfActionForbiddenAsync as throwIfIntegrationActionForbiddenAsync } from "./integration/integration-access";
+import {
+  throwIfCustomWidgetBoardDuplicationForbidden,
+  throwIfCustomWidgetPlacementChangeForbidden,
+} from "./board/custom-widget-placement-access";
+import { validateTimetableOptionsChangeAsync } from "./widgets/timetable";
 
 export const boardRouter = createTRPCRouter({
   exists: permissionRequiredProcedure
@@ -318,13 +330,28 @@ export const boardRouter = createTRPCRouter({
         yOffset: 0,
         boardId,
       });
-      createBoardCollection.layouts.push({
-        id: createId(),
-        name: "Base",
-        columnCount: input.columnCount,
-        breakpoint: 0,
-        boardId,
-      });
+      createBoardCollection.layouts.push(
+        {
+          id: createId(),
+          name: "Mobile",
+          columnCount: 3,
+          leftGutterColumnCount: 0,
+          rightGutterColumnCount: 0,
+          breakpoint: 0,
+          role: "mobile",
+          boardId,
+        },
+        {
+          id: createId(),
+          name: "Base",
+          columnCount: input.columnCount,
+          leftGutterColumnCount: 0,
+          rightGutterColumnCount: 0,
+          breakpoint: 768,
+          role: "base",
+          boardId,
+        },
+      );
 
       await createBoardCollection.insertAllAsync(ctx.db);
 
@@ -377,11 +404,69 @@ export const boardRouter = createTRPCRouter({
       }
 
       const { sections: boardSections, items: boardItems, layouts: boardLayouts, ...boardProps } = board;
+      throwIfCustomWidgetBoardDuplicationForbidden(ctx.session.user.permissions.includes("admin"), boardItems);
 
       const newBoardId = createId();
 
-      const layoutsMap = new Map<string, string>(boardLayouts.map((layout) => [layout.id, createId()]));
-      const layoutsToInsert = boardLayouts.map((layout) => ({
+      const generatedMobileLayoutId = createId();
+      const generatedMobilePositions =
+        boardLayouts.length === 1 && boardLayouts[0]
+          ? getUpdatedBoardLayout(board, {
+              previous: {
+                layoutId: boardLayouts[0].id,
+                columnCount: boardLayouts[0].columnCount,
+                leftGutterColumnCount: boardLayouts[0].leftGutterColumnCount,
+                rightGutterColumnCount: boardLayouts[0].rightGutterColumnCount,
+              },
+              current: {
+                layoutId: generatedMobileLayoutId,
+                columnCount: 3,
+                leftGutterColumnCount: 0,
+                rightGutterColumnCount: 0,
+              },
+            })
+          : null;
+      const normalizedBoardLayouts =
+        boardLayouts.length === 0
+          ? [
+              {
+                id: generatedMobileLayoutId,
+                name: "Mobile",
+                columnCount: 3,
+                leftGutterColumnCount: 0,
+                rightGutterColumnCount: 0,
+                breakpoint: 0,
+                role: "mobile" as const,
+                boardId: board.id,
+              },
+              {
+                id: createId(),
+                name: "Base",
+                columnCount: 10,
+                leftGutterColumnCount: 0,
+                rightGutterColumnCount: 0,
+                breakpoint: 768,
+                role: "base" as const,
+                boardId: board.id,
+              },
+            ]
+          : boardLayouts.length === 1 && boardLayouts[0]
+            ? [
+                {
+                  id: generatedMobileLayoutId,
+                  name: "Mobile",
+                  columnCount: 3,
+                  leftGutterColumnCount: 0,
+                  rightGutterColumnCount: 0,
+                  breakpoint: 0,
+                  role: "mobile" as const,
+                  boardId: board.id,
+                },
+                { ...boardLayouts[0], breakpoint: 768, role: "base" as const },
+              ]
+            : normalizeBoardLayoutRoles(boardLayouts);
+      const layoutsMap = new Map<string, string>(normalizedBoardLayouts.map((layout) => [layout.id, createId()]));
+      const layoutsToInsert = normalizedBoardLayouts.map((layout) => ({
         ...layout,
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         id: layoutsMap.get(layout.id)!,
@@ -398,9 +483,24 @@ export const boardRouter = createTRPCRouter({
         }),
       );
 
-      const sectionLayoutsToInsert: InferInsertModel<typeof sectionLayouts>[] = boardSections.flatMap((section) =>
-        section.layouts.map(
-          (layoutSection): InferInsertModel<typeof sectionLayouts> => ({
+      const sectionLayoutsToInsert: InferInsertModel<typeof sectionLayouts>[] = boardSections
+        .flatMap((section) =>
+          section.layouts.map(
+            (layoutSection): InferInsertModel<typeof sectionLayouts> => ({
+              ...layoutSection,
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+              layoutId: layoutsMap.get(layoutSection.layoutId)!,
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+              sectionId: sectionMap.get(layoutSection.sectionId)!,
+              parentSectionId: layoutSection.parentSectionId
+                ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                  sectionMap.get(layoutSection.parentSectionId)!
+                : layoutSection.parentSectionId,
+            }),
+          ),
+        )
+        .concat(
+          (generatedMobilePositions?.sectionLayouts ?? []).map((layoutSection) => ({
             ...layoutSection,
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             layoutId: layoutsMap.get(layoutSection.layoutId)!,
@@ -409,10 +509,9 @@ export const boardRouter = createTRPCRouter({
             parentSectionId: layoutSection.parentSectionId
               ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 sectionMap.get(layoutSection.parentSectionId)!
-              : layoutSection.parentSectionId,
-          }),
-        ),
-      );
+              : null,
+          })),
+        );
       const sectionCollapseStatesToInsert: InferInsertModel<typeof sectionCollapseStates>[] = boardSections.flatMap(
         (section) =>
           section.collapseStates.map(
@@ -434,9 +533,22 @@ export const boardRouter = createTRPCRouter({
         }),
       );
 
-      const itemLayoutsToInsert: InferInsertModel<typeof itemLayouts>[] = boardItems.flatMap((item) =>
-        item.layouts.map(
-          (layoutSection): InferInsertModel<typeof itemLayouts> => ({
+      const itemLayoutsToInsert: InferInsertModel<typeof itemLayouts>[] = boardItems
+        .flatMap((item) =>
+          item.layouts.map(
+            (layoutSection): InferInsertModel<typeof itemLayouts> => ({
+              ...layoutSection,
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+              sectionId: sectionMap.get(layoutSection.sectionId)!,
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+              itemId: itemMap.get(layoutSection.itemId)!,
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+              layoutId: layoutsMap.get(layoutSection.layoutId)!,
+            }),
+          ),
+        )
+        .concat(
+          (generatedMobilePositions?.itemSectionLayouts ?? []).map((layoutSection) => ({
             ...layoutSection,
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             sectionId: sectionMap.get(layoutSection.sectionId)!,
@@ -444,9 +556,8 @@ export const boardRouter = createTRPCRouter({
             itemId: itemMap.get(layoutSection.itemId)!,
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             layoutId: layoutsMap.get(layoutSection.layoutId)!,
-          }),
-        ),
-      );
+          })),
+        );
 
       // Creates a list with all integration ids the user has access to
       const hasAccessForAll = ctx.session.user.permissions.includes("integration-use-all");
@@ -738,131 +849,338 @@ export const boardRouter = createTRPCRouter({
         iconColor: board.iconColor ?? "",
       };
     }),
-  saveLayouts: protectedProcedure.input(boardSaveLayoutsSchema).mutation(async ({ ctx, input }) => {
-    await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "modify");
+  saveLayouts: protectedProcedure
+    .input(boardSaveLayoutsSchema)
+    .output(boardSaveLayoutsSchema.shape.layouts)
+    .mutation(async ({ ctx, input }) => {
+      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "modify");
 
-    const board = await getFullBoardWithWhereAsync(ctx.db, eq(boards.id, input.id), ctx.session.user.id);
+      const requiredGutterRoots = (["left", "right"] as const).filter((lane) =>
+        input.layouts.some((layout) => getBoardLaneColumnCount(layout, lane) > 0),
+      );
+      await ensureGutterRootSectionsAsync(ctx.db, input.id, requiredGutterRoots);
 
-    const addedLayouts = filterAddedItems(input.layouts, board.layouts);
+      const board = await getFullBoardWithWhereAsync(ctx.db, eq(boards.id, input.id), ctx.session.user.id);
+      const existingLayoutsById = new Map(board.layouts.map((layout) => [layout.id, layout]));
+      const addedLayouts = filterAddedItems(input.layouts, board.layouts);
+      const removedLayouts = filterRemovedItems(input.layouts, board.layouts);
 
-    const layoutsToInsert: InferInsertModel<typeof layouts>[] = [];
-    const itemSectionLayoutsToInsert: InferInsertModel<typeof itemLayouts>[] = [];
-    const sectionLayoutsToInsert: InferInsertModel<typeof sectionLayouts>[] = [];
-
-    for (const addedLayout of addedLayouts) {
-      const layoutId = createId();
-
-      layoutsToInsert.push({
-        id: layoutId,
-        name: addedLayout.name,
-        columnCount: addedLayout.columnCount,
-        breakpoint: addedLayout.breakpoint,
-        boardId: board.id,
-      });
-
-      const sortedLayouts = board.layouts.toSorted((layoutA, layoutB) => layoutA.columnCount - layoutB.columnCount);
-      // Fallback to biggest if none exists with columnCount bigger than addedLayout.columnCount
-      const layoutToClone =
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        sortedLayouts.find((layout) => layout.columnCount >= addedLayout.columnCount) ?? sortedLayouts.at(-1)!;
-
-      const updatedBoardLayout = getUpdatedBoardLayout(board, {
-        previous: {
-          layoutId: layoutToClone.id,
-          columnCount: layoutToClone.columnCount,
-        },
-        current: {
-          layoutId,
-          columnCount: addedLayout.columnCount,
-        },
-      });
-
-      itemSectionLayoutsToInsert.push(...updatedBoardLayout.itemSectionLayouts);
-      sectionLayoutsToInsert.push(...updatedBoardLayout.sectionLayouts);
-    }
-
-    if (layoutsToInsert.length > 0) {
-      await ctx.db.insert(layouts).values(layoutsToInsert);
-    }
-
-    if (itemSectionLayoutsToInsert.length > 0) {
-      await ctx.db.insert(itemLayouts).values(itemSectionLayoutsToInsert);
-    }
-
-    if (sectionLayoutsToInsert.length > 0) {
-      await ctx.db.insert(sectionLayouts).values(sectionLayoutsToInsert);
-    }
-
-    const updatedLayouts = filterUpdatedItems(input.layouts, board.layouts);
-    for (const updatedLayout of updatedLayouts) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const dbLayout = board.layouts.find((layout) => layout.id === updatedLayout.id)!;
-
-      if (dbLayout.columnCount !== updatedLayout.columnCount) {
-        const updatedBoardLayout = getUpdatedBoardLayout(board, {
-          previous: {
-            layoutId: dbLayout.id,
-            columnCount: dbLayout.columnCount,
-          },
-          current: {
-            layoutId: dbLayout.id,
-            columnCount: updatedLayout.columnCount,
-          },
-        });
-
-        for (const itemSectionLayout of updatedBoardLayout.itemSectionLayouts) {
-          await ctx.db
-            .update(itemLayouts)
-            .set({
-              height: itemSectionLayout.height,
-              width: itemSectionLayout.width,
-              xOffset: itemSectionLayout.xOffset,
-              yOffset: itemSectionLayout.yOffset,
-              sectionId: itemSectionLayout.sectionId,
-            })
-            .where(
-              and(
-                eq(itemLayouts.itemId, itemSectionLayout.itemId),
-                eq(itemLayouts.layoutId, itemSectionLayout.layoutId),
-              ),
-            );
-        }
-
-        for (const sectionLayout of updatedBoardLayout.sectionLayouts) {
-          await ctx.db
-            .update(sectionLayouts)
-            .set({
-              height: sectionLayout.height,
-              width: sectionLayout.width,
-              xOffset: sectionLayout.xOffset,
-              yOffset: sectionLayout.yOffset,
-              parentSectionId: sectionLayout.parentSectionId,
-            })
-            .where(
-              and(
-                eq(sectionLayouts.sectionId, sectionLayout.sectionId),
-                eq(sectionLayouts.layoutId, sectionLayout.layoutId),
-              ),
-            );
-        }
+      if (addedLayouts.some((layout) => layout.role !== "custom")) {
+        throw new TRPCError({ code: "BAD_REQUEST", message: "New layouts must use the custom role" });
+      }
+      if (removedLayouts.some((layout) => layout.role !== "custom")) {
+        throw new TRPCError({ code: "BAD_REQUEST", message: "Mobile and Base layouts cannot be removed" });
+      }
+      if (
+        input.layouts.some((layout) => {
+          const existingLayout = existingLayoutsById.get(layout.id);
+          return existingLayout && existingLayout.role !== layout.role;
+        })
+      ) {
+        throw new TRPCError({ code: "BAD_REQUEST", message: "Layout roles cannot be changed" });
       }
 
-      await ctx.db
-        .update(layouts)
-        .set({
-          name: updatedLayout.name,
-          columnCount: updatedLayout.columnCount,
-          breakpoint: updatedLayout.breakpoint,
-        })
-        .where(eq(layouts.id, updatedLayout.id));
-    }
+      const baseLayout = board.layouts.find((layout) => layout.role === "base");
+      if (!baseLayout) {
+        throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: "Board must have a Base layout" });
+      }
 
-    const removedLayouts = filterRemovedItems(input.layouts, board.layouts);
-    const removedLayoutIds = removedLayouts.map((layout) => layout.id);
-    if (removedLayoutIds.length > 0) {
-      await ctx.db.delete(layouts).where(inArray(layouts.id, removedLayoutIds));
-    }
-  }),
+      const layoutsToInsert: InferInsertModel<typeof layouts>[] = [];
+      const itemSectionLayoutsToInsert: InferInsertModel<typeof itemLayouts>[] = [];
+      const sectionLayoutsToInsert: InferInsertModel<typeof sectionLayouts>[] = [];
+      const savedLayoutIds = new Map<string, string>();
+      const requestedBaseLayout = input.layouts.find((layout) => layout.id === baseLayout.id);
+      const resizedBaseLayout =
+        requestedBaseLayout &&
+        (requestedBaseLayout.columnCount !== baseLayout.columnCount ||
+          requestedBaseLayout.leftGutterColumnCount !== baseLayout.leftGutterColumnCount ||
+          requestedBaseLayout.rightGutterColumnCount !== baseLayout.rightGutterColumnCount)
+          ? getUpdatedBoardLayout(board, {
+              previous: {
+                layoutId: baseLayout.id,
+                columnCount: baseLayout.columnCount,
+                leftGutterColumnCount: baseLayout.leftGutterColumnCount,
+                rightGutterColumnCount: baseLayout.rightGutterColumnCount,
+              },
+              current: {
+                layoutId: baseLayout.id,
+                columnCount: requestedBaseLayout.columnCount,
+                leftGutterColumnCount: requestedBaseLayout.leftGutterColumnCount,
+                rightGutterColumnCount: requestedBaseLayout.rightGutterColumnCount,
+              },
+            })
+          : null;
+      const baseSourceElements = resizedBaseLayout ? getElementsForProjectedLayout(resizedBaseLayout) : undefined;
+      const baseSourceGeometry = {
+        layoutId: baseLayout.id,
+        columnCount: requestedBaseLayout?.columnCount ?? baseLayout.columnCount,
+        leftGutterColumnCount: requestedBaseLayout?.leftGutterColumnCount ?? baseLayout.leftGutterColumnCount,
+        rightGutterColumnCount: requestedBaseLayout?.rightGutterColumnCount ?? baseLayout.rightGutterColumnCount,
+      };
+
+      for (const addedLayout of addedLayouts) {
+        const layoutId = createId();
+        savedLayoutIds.set(addedLayout.id, layoutId);
+        layoutsToInsert.push({
+          id: layoutId,
+          name: addedLayout.name,
+          columnCount: addedLayout.columnCount,
+          leftGutterColumnCount: addedLayout.leftGutterColumnCount,
+          rightGutterColumnCount: addedLayout.rightGutterColumnCount,
+          breakpoint: addedLayout.breakpoint,
+          role: "custom",
+          boardId: board.id,
+        });
+
+        const projectedLayout = getUpdatedBoardLayout(board, {
+          previous: {
+            ...baseSourceGeometry,
+            elements: baseSourceElements,
+          },
+          current: {
+            layoutId,
+            columnCount: addedLayout.columnCount,
+            leftGutterColumnCount: addedLayout.leftGutterColumnCount,
+            rightGutterColumnCount: addedLayout.rightGutterColumnCount,
+          },
+        });
+        itemSectionLayoutsToInsert.push(...projectedLayout.itemSectionLayouts);
+        sectionLayoutsToInsert.push(...projectedLayout.sectionLayouts);
+      }
+
+      const itemSectionLayoutsToUpdate: InferInsertModel<typeof itemLayouts>[] = [];
+      const sectionLayoutsToUpdate: InferInsertModel<typeof sectionLayouts>[] = [];
+      const layoutsToUpdate = filterUpdatedItems(input.layouts, board.layouts);
+
+      for (const updatedLayout of layoutsToUpdate) {
+        const dbLayout = existingLayoutsById.get(updatedLayout.id);
+        if (
+          !dbLayout ||
+          (dbLayout.columnCount === updatedLayout.columnCount &&
+            dbLayout.leftGutterColumnCount === updatedLayout.leftGutterColumnCount &&
+            dbLayout.rightGutterColumnCount === updatedLayout.rightGutterColumnCount)
+        )
+          continue;
+
+        const projectedLayout =
+          updatedLayout.role === "base" && resizedBaseLayout
+            ? resizedBaseLayout
+            : getUpdatedBoardLayout(board, {
+                previous: {
+                  layoutId: dbLayout.id,
+                  columnCount: dbLayout.columnCount,
+                  leftGutterColumnCount: dbLayout.leftGutterColumnCount,
+                  rightGutterColumnCount: dbLayout.rightGutterColumnCount,
+                },
+                current: {
+                  layoutId: dbLayout.id,
+                  columnCount: updatedLayout.columnCount,
+                  leftGutterColumnCount: updatedLayout.leftGutterColumnCount,
+                  rightGutterColumnCount: updatedLayout.rightGutterColumnCount,
+                },
+              });
+        itemSectionLayoutsToUpdate.push(...projectedLayout.itemSectionLayouts);
+        sectionLayoutsToUpdate.push(...projectedLayout.sectionLayouts);
+      }
+
+      const removedLayoutIds = removedLayouts.map((layout) => layout.id);
+
+      await handleTransactionsAsync(ctx.db, {
+        async handleAsync(db, schema) {
+          await db.transaction(async (transaction) => {
+            if (layoutsToInsert.length > 0) await transaction.insert(schema.layouts).values(layoutsToInsert);
+            if (itemSectionLayoutsToInsert.length > 0) {
+              await transaction.insert(schema.itemLayouts).values(itemSectionLayoutsToInsert);
+            }
+            if (sectionLayoutsToInsert.length > 0) {
+              await transaction.insert(schema.sectionLayouts).values(sectionLayoutsToInsert);
+            }
+
+            for (const itemLayout of itemSectionLayoutsToUpdate) {
+              await transaction
+                .update(schema.itemLayouts)
+                .set({
+                  height: itemLayout.height,
+                  width: itemLayout.width,
+                  xOffset: itemLayout.xOffset,
+                  yOffset: itemLayout.yOffset,
+                  sectionId: itemLayout.sectionId,
+                })
+                .where(
+                  and(
+                    eq(schema.itemLayouts.itemId, itemLayout.itemId),
+                    eq(schema.itemLayouts.layoutId, itemLayout.layoutId),
+                  ),
+                );
+            }
+            for (const sectionLayout of sectionLayoutsToUpdate) {
+              await transaction
+                .update(schema.sectionLayouts)
+                .set({
+                  height: sectionLayout.height,
+                  width: sectionLayout.width,
+                  xOffset: sectionLayout.xOffset,
+                  yOffset: sectionLayout.yOffset,
+                  parentSectionId: sectionLayout.parentSectionId,
+                })
+                .where(
+                  and(
+                    eq(schema.sectionLayouts.sectionId, sectionLayout.sectionId),
+                    eq(schema.sectionLayouts.layoutId, sectionLayout.layoutId),
+                  ),
+                );
+            }
+            for (const layout of layoutsToUpdate) {
+              await transaction
+                .update(schema.layouts)
+                .set({
+                  name: layout.name,
+                  columnCount: layout.columnCount,
+                  leftGutterColumnCount: layout.leftGutterColumnCount,
+                  rightGutterColumnCount: layout.rightGutterColumnCount,
+                  breakpoint: layout.breakpoint,
+                })
+                .where(eq(schema.layouts.id, layout.id));
+            }
+            if (removedLayoutIds.length > 0) {
+              await transaction.delete(schema.layouts).where(inArray(schema.layouts.id, removedLayoutIds));
+            }
+          });
+        },
+        handleSync(db) {
+          db.transaction((transaction) => {
+            if (layoutsToInsert.length > 0) transaction.insert(layouts).values(layoutsToInsert).run();
+            if (itemSectionLayoutsToInsert.length > 0) {
+              transaction.insert(itemLayouts).values(itemSectionLayoutsToInsert).run();
+            }
+            if (sectionLayoutsToInsert.length > 0) {
+              transaction.insert(sectionLayouts).values(sectionLayoutsToInsert).run();
+            }
+
+            for (const itemLayout of itemSectionLayoutsToUpdate) {
+              transaction
+                .update(itemLayouts)
+                .set({
+                  height: itemLayout.height,
+                  width: itemLayout.width,
+                  xOffset: itemLayout.xOffset,
+                  yOffset: itemLayout.yOffset,
+                  sectionId: itemLayout.sectionId,
+                })
+                .where(and(eq(itemLayouts.itemId, itemLayout.itemId), eq(itemLayouts.layoutId, itemLayout.layoutId)))
+                .run();
+            }
+            for (const sectionLayout of sectionLayoutsToUpdate) {
+              transaction
+                .update(sectionLayouts)
+                .set({
+                  height: sectionLayout.height,
+                  width: sectionLayout.width,
+                  xOffset: sectionLayout.xOffset,
+                  yOffset: sectionLayout.yOffset,
+                  parentSectionId: sectionLayout.parentSectionId,
+                })
+                .where(
+                  and(
+                    eq(sectionLayouts.sectionId, sectionLayout.sectionId),
+                    eq(sectionLayouts.layoutId, sectionLayout.layoutId),
+                  ),
+                )
+                .run();
+            }
+            for (const layout of layoutsToUpdate) {
+              transaction
+                .update(layouts)
+                .set({
+                  name: layout.name,
+                  columnCount: layout.columnCount,
+                  leftGutterColumnCount: layout.leftGutterColumnCount,
+                  rightGutterColumnCount: layout.rightGutterColumnCount,
+                  breakpoint: layout.breakpoint,
+                })
+                .where(eq(layouts.id, layout.id))
+                .run();
+            }
+            if (removedLayoutIds.length > 0)
+              transaction.delete(layouts).where(inArray(layouts.id, removedLayoutIds)).run();
+          });
+        },
+      });
+
+      return input.layouts
+        .map((layout) => ({
+          ...layout,
+          id: savedLayoutIds.get(layout.id) ?? layout.id,
+          role: existingLayoutsById.get(layout.id)?.role ?? "custom",
+        }))
+        .toSorted((layoutA, layoutB) => layoutA.breakpoint - layoutB.breakpoint);
+    }),
+  resetLayout: protectedProcedure
+    .meta({
+      mcp: {
+        enabled: true,
+        description:
+          "Reset a board's Mobile or custom layout from its Base layout while preserving the target layout settings. Requires modify permission. REQUIRED: boardId (board ID), layoutId (non-Base layout ID)",
+      },
+    })
+    .input(boardResetLayoutSchema)
+    .mutation(async ({ ctx, input }) => {
+      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.boardId), "modify");
+
+      const board = await getFullBoardWithWhereAsync(ctx.db, eq(boards.id, input.boardId), ctx.session.user.id);
+      const targetLayout = board.layouts.find((layout) => layout.id === input.layoutId);
+      const baseLayout = board.layouts.find((layout) => layout.role === "base");
+
+      if (!targetLayout) throw new TRPCError({ code: "NOT_FOUND", message: "Layout not found" });
+      if (!baseLayout) {
+        throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: "Board must have a Base layout" });
+      }
+      if (targetLayout.role === "base") {
+        throw new TRPCError({ code: "BAD_REQUEST", message: "The Base layout cannot be reset" });
+      }
+
+      const projectedLayout = getUpdatedBoardLayout(board, {
+        previous: {
+          layoutId: baseLayout.id,
+          columnCount: baseLayout.columnCount,
+          leftGutterColumnCount: baseLayout.leftGutterColumnCount,
+          rightGutterColumnCount: baseLayout.rightGutterColumnCount,
+        },
+        current: {
+          layoutId: targetLayout.id,
+          columnCount: targetLayout.columnCount,
+          leftGutterColumnCount: targetLayout.leftGutterColumnCount,
+          rightGutterColumnCount: targetLayout.rightGutterColumnCount,
+        },
+      });
+
+      await handleTransactionsAsync(ctx.db, {
+        async handleAsync(db, schema) {
+          await db.transaction(async (transaction) => {
+            await transaction.delete(schema.itemLayouts).where(eq(schema.itemLayouts.layoutId, targetLayout.id));
+            await transaction.delete(schema.sectionLayouts).where(eq(schema.sectionLayouts.layoutId, targetLayout.id));
+            if (projectedLayout.itemSectionLayouts.length > 0) {
+              await transaction.insert(schema.itemLayouts).values(projectedLayout.itemSectionLayouts);
+            }
+            if (projectedLayout.sectionLayouts.length > 0) {
+              await transaction.insert(schema.sectionLayouts).values(projectedLayout.sectionLayouts);
+            }
+          });
+        },
+        handleSync(db) {
+          db.transaction((transaction) => {
+            transaction.delete(itemLayouts).where(eq(itemLayouts.layoutId, targetLayout.id)).run();
+            transaction.delete(sectionLayouts).where(eq(sectionLayouts.layoutId, targetLayout.id)).run();
+            if (projectedLayout.itemSectionLayouts.length > 0) {
+              transaction.insert(itemLayouts).values(projectedLayout.itemSectionLayouts).run();
+            }
+            if (projectedLayout.sectionLayouts.length > 0) {
+              transaction.insert(sectionLayouts).values(projectedLayout.sectionLayouts).run();
+            }
+          });
+        },
+      });
+    }),
   savePartialBoardSettings: protectedProcedure
     .meta({
       openapi: { method: "PATCH", path: "/api/boards/{id}/settings", tags: ["boards"], protect: true },
@@ -911,6 +1229,20 @@ export const boardRouter = createTRPCRouter({
     await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "modify");
 
     const dbBoard = await getFullBoardWithWhereAsync(ctx.db, eq(boards.id, input.id), ctx.session.user.id);
+    throwIfCustomWidgetPlacementChangeForbidden({
+      isAdmin: ctx.session.user.permissions.includes("admin"),
+      submittedItems: input.items,
+      storedItems: dbBoard.items,
+    });
+
+    for (const item of input.items) {
+      if (item.kind !== "timetable") continue;
+      const previousItem = dbBoard.items.find((dbItem) => dbItem.id === item.id);
+      await validateTimetableOptionsChangeAsync(
+        item.options,
+        previousItem?.kind === "timetable" ? previousItem.options : undefined,
+      );
+    }
 
     await handleTransactionsAsync(ctx.db, {
       async handleAsync(db, schema) {
@@ -922,32 +1254,32 @@ export const boardRouter = createTRPCRouter({
               addedSections.map((section) => ({
                 id: section.id,
                 kind: section.kind,
-                yOffset: section.kind !== "dynamic" ? section.yOffset : null,
-                xOffset: section.kind === "dynamic" ? null : 0,
-                options: section.kind === "dynamic" ? superjson.stringify(section.options) : emptySuperJSON,
-                name: "name" in section ? section.name : null,
+                yOffset: section.kind === "empty" ? section.yOffset : null,
+                xOffset: section.kind === "empty" ? section.xOffset : null,
+                options: section.kind === "empty" ? emptySuperJSON : superjson.stringify(section.options),
+                name: null,
                 boardId: dbBoard.id,
               })),
             );
 
-            if (addedSections.some((section) => section.kind === "dynamic")) {
-              await transaction.insert(schema.sectionLayouts).values(
-                addedSections
-                  .filter((section) => section.kind === "dynamic")
-                  .flatMap((section) =>
-                    section.layouts.map(
-                      (sectionLayout): InferInsertModel<typeof schema.sectionLayouts> => ({
-                        layoutId: sectionLayout.layoutId,
-                        sectionId: section.id,
-                        parentSectionId: sectionLayout.parentSectionId,
-                        height: sectionLayout.height,
-                        width: sectionLayout.width,
-                        xOffset: sectionLayout.xOffset,
-                        yOffset: sectionLayout.yOffset,
-                      }),
-                    ),
-                  ),
+            const sectionLayoutsToInsert = addedSections
+              .filter((section) => section.kind === "container")
+              .flatMap((section) =>
+                section.layouts.map(
+                  (sectionLayout): InferInsertModel<typeof schema.sectionLayouts> => ({
+                    layoutId: sectionLayout.layoutId,
+                    sectionId: section.id,
+                    parentSectionId: sectionLayout.parentSectionId,
+                    height: sectionLayout.height,
+                    width: sectionLayout.width,
+                    xOffset: sectionLayout.xOffset,
+                    yOffset: sectionLayout.yOffset,
+                  }),
+                ),
               );
+
+            if (sectionLayoutsToInsert.length > 0) {
+              await transaction.insert(schema.sectionLayouts).values(sectionLayoutsToInsert);
             }
           }
 
@@ -1044,18 +1376,17 @@ export const boardRouter = createTRPCRouter({
           const updatedSections = filterUpdatedItems(input.sections, dbBoard.sections);
 
           for (const section of updatedSections) {
-            const prev = dbBoard.sections.find((dbSection) => dbSection.id === section.id);
             await transaction
               .update(schema.sections)
               .set({
-                yOffset: prev?.kind !== "dynamic" && "yOffset" in section ? section.yOffset : null,
-                xOffset: prev?.kind !== "dynamic" && "yOffset" in section ? 0 : null,
-                options: section.kind === "dynamic" ? superjson.stringify(section.options) : emptySuperJSON,
-                name: prev?.kind === "category" && "name" in section ? section.name : null,
+                yOffset: section.kind === "empty" ? section.yOffset : null,
+                xOffset: section.kind === "empty" ? section.xOffset : null,
+                options: section.kind === "empty" ? emptySuperJSON : superjson.stringify(section.options),
+                name: null,
               })
               .where(eq(schema.sections.id, section.id));
 
-            if (section.kind !== "dynamic") continue;
+            if (section.kind !== "container") continue;
 
             for (const sectionLayout of section.layouts) {
               await transaction
@@ -1122,36 +1453,33 @@ export const boardRouter = createTRPCRouter({
                 addedSections.map((section) => ({
                   id: section.id,
                   kind: section.kind,
-                  yOffset: section.kind !== "dynamic" ? section.yOffset : null,
-                  xOffset: section.kind === "dynamic" ? null : 0,
-                  options: section.kind === "dynamic" ? superjson.stringify(section.options) : emptySuperJSON,
-                  name: "name" in section ? section.name : null,
+                  yOffset: section.kind === "empty" ? section.yOffset : null,
+                  xOffset: section.kind === "empty" ? section.xOffset : null,
+                  options: section.kind === "empty" ? emptySuperJSON : superjson.stringify(section.options),
+                  name: null,
                   boardId: dbBoard.id,
                 })),
               )
               .run();
 
-            if (addedSections.some((section) => section.kind === "dynamic")) {
-              transaction
-                .insert(sectionLayouts)
-                .values(
-                  addedSections
-                    .filter((section) => section.kind === "dynamic")
-                    .flatMap((section) =>
-                      section.layouts.map(
-                        (sectionLayout): InferInsertModel<typeof sectionLayouts> => ({
-                          layoutId: sectionLayout.layoutId,
-                          sectionId: section.id,
-                          parentSectionId: sectionLayout.parentSectionId,
-                          height: sectionLayout.height,
-                          width: sectionLayout.width,
-                          xOffset: sectionLayout.xOffset,
-                          yOffset: sectionLayout.yOffset,
-                        }),
-                      ),
-                    ),
-                )
-                .run();
+            const sectionLayoutsToInsert = addedSections
+              .filter((section) => section.kind === "container")
+              .flatMap((section) =>
+                section.layouts.map(
+                  (sectionLayout): InferInsertModel<typeof sectionLayouts> => ({
+                    layoutId: sectionLayout.layoutId,
+                    sectionId: section.id,
+                    parentSectionId: sectionLayout.parentSectionId,
+                    height: sectionLayout.height,
+                    width: sectionLayout.width,
+                    xOffset: sectionLayout.xOffset,
+                    yOffset: sectionLayout.yOffset,
+                  }),
+                ),
+              );
+
+            if (sectionLayoutsToInsert.length > 0) {
+              transaction.insert(sectionLayouts).values(sectionLayoutsToInsert).run();
             }
           }
 
@@ -1254,19 +1582,18 @@ export const boardRouter = createTRPCRouter({
           const updatedSections = filterUpdatedItems(input.sections, dbBoard.sections);
 
           for (const section of updatedSections) {
-            const prev = dbBoard.sections.find((dbSection) => dbSection.id === section.id);
             transaction
               .update(sections)
               .set({
-                yOffset: prev?.kind !== "dynamic" && "yOffset" in section ? section.yOffset : null,
-                xOffset: prev?.kind !== "dynamic" && "yOffset" in section ? 0 : null,
-                options: section.kind === "dynamic" ? superjson.stringify(section.options) : emptySuperJSON,
-                name: prev?.kind === "category" && "name" in section ? section.name : null,
+                yOffset: section.kind === "empty" ? section.yOffset : null,
+                xOffset: section.kind === "empty" ? section.xOffset : null,
+                options: section.kind === "empty" ? emptySuperJSON : superjson.stringify(section.options),
+                name: null,
               })
               .where(eq(sections.id, section.id))
               .run();
 
-            if (section.kind !== "dynamic") continue;
+            if (section.kind !== "container") continue;
 
             for (const sectionLayout of section.layouts) {
               transaction
@@ -1496,6 +1823,15 @@ export const boardRouter = createTRPCRouter({
     .output(z.object({ itemId: z.string() }))
     .mutation(async ({ ctx, input }) => {
       await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.boardId), "modify");
+      throwIfCustomWidgetPlacementChangeForbidden({
+        isAdmin: ctx.session.user.permissions.includes("admin"),
+        submittedItems: [{ id: "", kind: input.kind, options: input.options }],
+        storedItems: [],
+      });
+
+      if (input.kind === "timetable") {
+        await validateTimetableOptionsChangeAsync(input.options);
+      }
 
       const supportedIntegrations = widgetIntegrationSupport[input.kind];
       const integrationLimit = widgetIntegrationLimits[input.kind] ?? Infinity;
@@ -1592,18 +1928,15 @@ export const boardRouter = createTRPCRouter({
           }
         }
 
-        const configuredDefaultSize = widgetDefaultSizes[input.kind as WidgetKind] ?? { width: 1, height: 1 };
-        const defaultSize = {
-          ...configuredDefaultSize,
-          width: Math.min(configuredDefaultSize.width, layout.columnCount),
-        };
+        const defaultSize = widgetDefaultSizes[input.kind as WidgetKind] ?? { width: 1, height: 1 };
+        const sizeForLayout = { ...defaultSize, width: Math.min(layout.columnCount, defaultSize.width) };
 
         const fitsAt = (x: number, y: number) => {
-          if (x + defaultSize.width > layout.columnCount) return false;
-          for (let dy = 0; dy < defaultSize.height; dy++) {
+          if (x + sizeForLayout.width > layout.columnCount) return false;
+          for (let dy = 0; dy < sizeForLayout.height; dy++) {
             const row = occupied[y + dy];
             if (!row) continue;
-            for (let dx = 0; dx < defaultSize.width; dx++) {
+            for (let dx = 0; dx < sizeForLayout.width; dx++) {
               if (row[x + dx]) return false;
             }
           }
@@ -1621,8 +1954,8 @@ export const boardRouter = createTRPCRouter({
                 layoutId: layout.id,
                 xOffset: x,
                 yOffset: y,
-                width: defaultSize.width,
-                height: defaultSize.height,
+                width: sizeForLayout.width,
+                height: sizeForLayout.height,
               });
               placed = true;
             }
@@ -1732,80 +2065,135 @@ const noBoardWithSimilarNameAsync = async (db: Database, name: string, ignoredId
   }
 };
 
+interface BoardForLayoutProjection {
+  id: string;
+  items: Array<{
+    id: string;
+    layouts: Array<{
+      layoutId: string;
+      sectionId: string;
+      width: number;
+      height: number;
+      xOffset: number;
+      yOffset: number;
+    }>;
+  }>;
+  sections: Array<{
+    id: string;
+    kind: string;
+    xOffset?: number | null;
+    yOffset?: number | null;
+    layouts?: Array<{
+      layoutId: string;
+      parentSectionId: string | null;
+      width: number;
+      height: number;
+      xOffset: number;
+      yOffset: number;
+    }>;
+  }>;
+}
+
 const getUpdatedBoardLayout = (
-  board: Awaited<ReturnType<typeof getFullBoardWithWhereAsync>>,
+  board: BoardForLayoutProjection,
   options: {
-    previous: {
-      layoutId: string;
-      columnCount: number;
-    };
-    current: {
-      layoutId: string;
-      columnCount: number;
-    };
+    previous: BoardLayoutGeometry & { elements?: GridAlgorithmItem[] };
+    current: BoardLayoutGeometry;
   },
 ) => {
-  const itemSectionLayoutsCollection: InferInsertModel<typeof itemLayouts>[] = [];
-  const sectionLayoutsCollection: InferInsertModel<typeof sectionLayouts>[] = [];
-
-  const elements = getElementsForLayout(board, options.previous.layoutId);
-  const rootSections = board.sections.filter((section) => section.kind !== "dynamic");
-
-  for (const rootSection of rootSections) {
-    const result = generateResponsiveGridFor({
-      items: elements,
-      previousWidth: options.previous.columnCount,
-      width: options.current.columnCount,
-      sectionId: rootSection.id,
-    });
-
-    itemSectionLayoutsCollection.push(
-      ...board.items
-        .map((item): InferInsertModel<typeof itemLayouts> | null => {
-          const currentElement = result.items.find((element) => element.type === "item" && element.id === item.id);
-
-          if (!currentElement) {
-            return null;
-          }
-
-          return {
-            itemId: item.id,
-            layoutId: options.current.layoutId,
-            sectionId: currentElement.sectionId,
-            height: currentElement.height,
-            width: currentElement.width,
-            xOffset: currentElement.xOffset,
-            yOffset: currentElement.yOffset,
-          };
-        })
-        .filter((item) => item !== null),
-    );
-
-    sectionLayoutsCollection.push(
-      ...board.sections
-        .filter((section) => section.kind === "dynamic")
-        .map((section): InferInsertModel<typeof sectionLayouts> | null => {
-          const currentElement = result.items.find(
-            (element) => element.type === "section" && element.id === section.id,
-          );
-
-          if (!currentElement) {
-            return null;
-          }
-
-          return {
-            layoutId: options.current.layoutId,
-            sectionId: section.id,
-            parentSectionId: currentElement.sectionId,
-            height: currentElement.height,
-            width: currentElement.width,
-            xOffset: currentElement.xOffset,
-            yOffset: currentElement.yOffset,
-          };
-        })
-        .filter((section) => section !== null),
-    );
+  const elements = options.previous.elements ?? getElementsForLayout(board, options.previous.layoutId);
+  const emptyRoots = board.sections
+    .filter((section) => section.kind === "empty")
+    .toSorted((first, second) => (first.yOffset ?? 0) - (second.yOffset ?? 0) || first.id.localeCompare(second.id));
+  const rootByLane = new Map<BoardLane, (typeof emptyRoots)[number]>();
+  for (const root of emptyRoots) {
+    const lane = getRootSectionLane(root.xOffset);
+    if (!rootByLane.has(lane)) rootByLane.set(lane, root);
   }
+  const mainRoot = rootByLane.get("main");
+  if (!mainRoot) throw new Error(`Board "${board.id}" has no main canvas root`);
+
+  const sourceRootById = new Map(
+    emptyRoots.map((section) => [section.id, getRootSectionLane(section.xOffset)] as const),
+  );
+  const targetLaneBySourceLane = new Map<BoardLane, BoardLane>(
+    boardLanes.map((lane) => [
+      lane,
+      lane !== "main" && getBoardLaneColumnCount(options.current, lane) === 0 ? "main" : lane,
+    ]),
+  );
+  const remappedElements = elements.map((element) => {
+    const sourceLane = sourceRootById.get(element.sectionId);
+    if (!sourceLane) return element;
+    const targetLane = targetLaneBySourceLane.get(sourceLane) ?? "main";
+    const targetRoot = rootByLane.get(targetLane) ?? mainRoot;
+    return {
+      ...element,
+      sectionId: targetRoot.id,
+    };
+  });
+
+  const results = boardLanes.flatMap((lane) => {
+    const root = rootByLane.get(lane);
+    const width = getBoardLaneColumnCount(options.current, lane);
+    if (!root || width === 0) return [];
+    const sourceLanes = boardLanes.filter(
+      (sourceLane) =>
+        rootByLane.has(sourceLane) &&
+        getBoardLaneColumnCount(options.previous, sourceLane) > 0 &&
+        targetLaneBySourceLane.get(sourceLane) === lane,
+    );
+    const previousWidth =
+      sourceLanes.length === 1
+        ? getBoardLaneColumnCount(options.previous, sourceLanes[0] ?? "main")
+        : Number.MAX_SAFE_INTEGER;
+
+    return [
+      generateResponsiveGridFor({
+        items: remappedElements,
+        previousWidth,
+        width,
+        sectionId: root.id,
+      }),
+    ];
+  });
+  const updatedElements = results.flatMap((result) => result.items);
+  const updatedElementById = new Map(updatedElements.map((element) => [element.id, element]));
+
+  const itemSectionLayoutsCollection = board.items.flatMap((item): InferInsertModel<typeof itemLayouts>[] => {
+    const currentElement = updatedElementById.get(item.id);
+    if (!currentElement || currentElement.type !== "item") return [];
+
+    return [
+      {
+        itemId: item.id,
+        layoutId: options.current.layoutId,
+        sectionId: currentElement.sectionId,
+        height: currentElement.height,
+        width: currentElement.width,
+        xOffset: currentElement.xOffset,
+        yOffset: currentElement.yOffset,
+      },
+    ];
+  });
+
+  const sectionLayoutsCollection = board.sections.flatMap((section): InferInsertModel<typeof sectionLayouts>[] => {
+    if (section.kind !== "container") return [];
+    const currentElement = updatedElementById.get(section.id);
+    if (!currentElement || currentElement.type !== "section") return [];
+
+    return [
+      {
+        layoutId: options.current.layoutId,
+        sectionId: section.id,
+        parentSectionId: currentElement.sectionId,
+        height: currentElement.height,
+        width: currentElement.width,
+        xOffset: currentElement.xOffset,
+        yOffset: currentElement.yOffset,
+      },
+    ];
+  });
 
   return {
     itemSectionLayouts: itemSectionLayoutsCollection,
@@ -1813,46 +2201,169 @@ const getUpdatedBoardLayout = (
   };
 };
 
-const getElementsForLayout = (board: Awaited<ReturnType<typeof getFullBoardWithWhereAsync>>, layoutId: string) => {
-  const sectionElements = board.sections
-    .filter((section) => section.kind === "dynamic")
-    .map((section) => {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const clonedLayout = section.layouts.find((sectionLayout) => sectionLayout.layoutId === layoutId)!;
+const getElementsForProjectedLayout = (
+  projectedLayout: ReturnType<typeof getUpdatedBoardLayout>,
+): GridAlgorithmItem[] => [
+  ...projectedLayout.itemSectionLayouts.map((layout) => ({
+    id: layout.itemId,
+    type: "item" as const,
+    height: layout.height,
+    width: layout.width,
+    xOffset: layout.xOffset,
+    yOffset: layout.yOffset,
+    sectionId: layout.sectionId,
+  })),
+  ...projectedLayout.sectionLayouts.flatMap((layout) =>
+    layout.parentSectionId
+      ? [
+          {
+            id: layout.sectionId,
+            type: "section" as const,
+            height: layout.height,
+            width: layout.width,
+            xOffset: layout.xOffset,
+            yOffset: layout.yOffset,
+            sectionId: layout.parentSectionId,
+          },
+        ]
+      : [],
+  ),
+];
 
-      return {
-        id: section.id,
-        type: "section" as const,
+interface BoardLayoutGeometry {
+  layoutId: string;
+  columnCount: number;
+  leftGutterColumnCount: number;
+  rightGutterColumnCount: number;
+}
+
+type GutterLane = Exclude<BoardLane, "main">;
+
+const ensureGutterRootSectionsAsync = async (db: Database, boardId: string, lanes: readonly GutterLane[]) => {
+  if (lanes.length === 0) return;
+
+  const getMissingLanes = (existingOffsets: readonly (number | null)[]) =>
+    lanes.filter((lane) => {
+      const rootCount = existingOffsets.filter((offset) => offset === rootSectionOffsets[lane]).length;
+      if (rootCount > 1) throw new Error(`Board "${boardId}" has multiple ${lane} canvas roots`);
+      return rootCount === 0;
+    });
+  const getRows = (missingLanes: readonly GutterLane[]) =>
+    missingLanes.map((lane) => ({
+      id: createId(),
+      boardId,
+      kind: "empty" as const,
+      xOffset: rootSectionOffsets[lane],
+      yOffset: 0,
+      options: emptySuperJSON,
+    }));
+
+  await handleTransactionsAsync(db, {
+    async handleAsync(database, schema) {
+      await database.transaction(async (transaction) => {
+        await transaction
+          .select({ id: schema.boards.id })
+          .from(schema.boards)
+          .where(eq(schema.boards.id, boardId))
+          .for("update");
+
+        const existingRoots = await transaction
+          .select({ xOffset: schema.sections.xOffset })
+          .from(schema.sections)
+          .where(
+            and(
+              eq(schema.sections.boardId, boardId),
+              eq(schema.sections.kind, "empty"),
+              inArray(
+                schema.sections.xOffset,
+                lanes.map((lane) => rootSectionOffsets[lane]),
+              ),
+            ),
+          );
+        const rows = getRows(getMissingLanes(existingRoots.map(({ xOffset }) => xOffset)));
+        if (rows.length > 0) await transaction.insert(schema.sections).values(rows);
+      });
+    },
+    handleSync(database) {
+      database.transaction(
+        (transaction) => {
+          const existingRoots = transaction
+            .select({ xOffset: sections.xOffset })
+            .from(sections)
+            .where(
+              and(
+                eq(sections.boardId, boardId),
+                eq(sections.kind, "empty"),
+                inArray(
+                  sections.xOffset,
+                  lanes.map((lane) => rootSectionOffsets[lane]),
+                ),
+              ),
+            )
+            .all();
+          const rows = getRows(getMissingLanes(existingRoots.map(({ xOffset }) => xOffset)));
+          if (rows.length > 0) transaction.insert(sections).values(rows).run();
+        },
+        { behavior: "immediate" },
+      );
+    },
+  });
+};
+
+const getElementsForLayout = (board: BoardForLayoutProjection, layoutId: string) => {
+  const sectionElements = board.sections
+    .filter((section) => section.kind === "container")
+    .flatMap((section) => {
+      const clonedLayout = section.layouts?.find((sectionLayout) => sectionLayout.layoutId === layoutId);
+      if (!clonedLayout?.parentSectionId) return [];
+
+      return [
+        {
+          id: section.id,
+          type: "section" as const,
+          height: clonedLayout.height,
+          width: clonedLayout.width,
+          xOffset: clonedLayout.xOffset,
+          yOffset: clonedLayout.yOffset,
+          sectionId: clonedLayout.parentSectionId,
+        },
+      ];
+    });
+
+  const itemElements = board.items.flatMap((item) => {
+    const clonedLayout = item.layouts.find((itemLayout) => itemLayout.layoutId === layoutId);
+    if (!clonedLayout) return [];
+
+    return [
+      {
+        id: item.id,
+        type: "item" as const,
         height: clonedLayout.height,
         width: clonedLayout.width,
         xOffset: clonedLayout.xOffset,
         yOffset: clonedLayout.yOffset,
-        sectionId: clonedLayout.parentSectionId,
-      };
-    });
-
-  const itemElements = board.items.map((item) => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const clonedLayout = item.layouts.find((itemLayout) => itemLayout.layoutId === layoutId)!;
-
-    return {
-      id: item.id,
-      type: "item" as const,
-      height: clonedLayout.height,
-      width: clonedLayout.width,
-      xOffset: clonedLayout.xOffset,
-      yOffset: clonedLayout.yOffset,
-      sectionId: clonedLayout.sectionId,
-    };
+        sectionId: clonedLayout.sectionId,
+      },
+    ];
   });
 
   return [...itemElements, ...sectionElements];
 };
 
-const getFullBoardWithWhereAsync = async (db: Database, where: SQL<unknown>, userId: string | null) => {
-  const groupsOfCurrentUser = await db.query.groupMembers.findMany({
-    where: eq(groupMembers.userId, userId ?? ""),
-  });
+const protectedLayoutRepairPromises = new Map<string, Promise<void>>();
+
+const getFullBoardWithWhereAsync = async (
+  db: Database,
+  where: SQL<unknown>,
+  userId: string | null,
+  repairProtectedLayouts = true,
+) => {
+  const groupPermissionWhere = userId
+    ? inArray(
+        boardGroupPermissions.groupId,
+        db.select({ groupId: groupMembers.groupId }).from(groupMembers).where(eq(groupMembers.userId, userId)),
+      )
+    : eq(boardGroupPermissions.groupId, "");
   const board = await db.query.boards.findFirst({
     where,
     with: {
@@ -1875,8 +2386,8 @@ const getFullBoardWithWhereAsync = async (db: Database, where: SQL<unknown>, use
       items: {
         with: {
           integrations: {
-            with: {
-              integration: true,
+            columns: {
+              integrationId: true,
             },
           },
           layouts: true,
@@ -1890,7 +2401,7 @@ const getFullBoardWithWhereAsync = async (db: Database, where: SQL<unknown>, use
         },
       },
       groupPermissions: {
-        where: inArray(boardGroupPermissions.groupId, groupsOfCurrentUser.map((group) => group.groupId).concat("")),
+        where: groupPermissionWhere,
       },
     },
   });
@@ -1902,6 +2413,18 @@ const getFullBoardWithWhereAsync = async (db: Database, where: SQL<unknown>, use
     });
   }
 
+  if (repairProtectedLayouts && boardLayoutsNeedRepair(board.layouts)) {
+    let repairPromise = protectedLayoutRepairPromises.get(board.id);
+    if (!repairPromise) {
+      repairPromise = seedProtectedBoardLayoutsAsync(db, board.id).finally(() => {
+        protectedLayoutRepairPromises.delete(board.id);
+      });
+      protectedLayoutRepairPromises.set(board.id, repairPromise);
+    }
+    await repairPromise;
+    return getFullBoardWithWhereAsync(db, where, userId, false);
+  }
+
   const { sections, items, layouts, ...otherBoardProperties } = board;
 
   return {
@@ -1938,7 +2461,7 @@ const getFullBoardWithWhereAsync = async (db: Database, where: SQL<unknown>, use
             layoutId: layout.layoutId,
             sectionId: layout.sectionId,
           })),
-          integrationIds: itemIntegrations.map((item) => item.integration.id),
+          integrationIds: itemIntegrations.map((item) => item.integrationId),
           advancedOptions: superjson.parse<BoardItemAdvancedOptions>(item.advancedOptions),
           options: superjson.parse<Record<string, unknown>>(item.options),
         }),
@@ -1947,6 +2470,23 @@ const getFullBoardWithWhereAsync = async (db: Database, where: SQL<unknown>, use
   };
 };
 
+export const boardLayoutsNeedRepair = (
+  boardLayouts: Array<{ id: string; breakpoint: number; role: "mobile" | "base" | "custom" }>,
+) => {
+  const mobileLayouts = boardLayouts.filter((layout) => layout.role === "mobile");
+  const baseLayouts = boardLayouts.filter((layout) => layout.role === "base");
+  const baseLayout = baseLayouts.at(0);
+
+  return (
+    mobileLayouts.length !== 1 ||
+    baseLayouts.length !== 1 ||
+    mobileLayouts.at(0)?.breakpoint !== 0 ||
+    !baseLayout ||
+    boardLayouts.some((layout) => layout.id !== baseLayout.id && layout.breakpoint >= baseLayout.breakpoint) ||
+    new Set(boardLayouts.map((layout) => layout.breakpoint)).size !== boardLayouts.length
+  );
+};
+
 const forKind = <T extends WidgetKind>(kind: T) =>
   z.object({
     kind: z.literal(kind),
diff --git a/packages/api/src/router/board/board-access.ts b/packages/api/src/router/board/board-access.ts
index 1e4351cba..1eec666a6 100644
--- a/packages/api/src/router/board/board-access.ts
+++ b/packages/api/src/router/board/board-access.ts
@@ -19,9 +19,12 @@ export const throwIfActionForbiddenAsync = async (
   permission: BoardPermission,
 ) => {
   const { db, session } = ctx;
-  const groupsOfCurrentUser = await db.query.groupMembers.findMany({
-    where: eq(groupMembers.userId, session?.user.id ?? ""),
-  });
+  const groupPermissionWhere = session
+    ? inArray(
+        boardGroupPermissions.groupId,
+        db.select({ groupId: groupMembers.groupId }).from(groupMembers).where(eq(groupMembers.userId, session.user.id)),
+      )
+    : eq(boardGroupPermissions.groupId, "");
   const board = await db.query.boards.findFirst({
     where: boardWhere,
     columns: {
@@ -34,7 +37,7 @@ export const throwIfActionForbiddenAsync = async (
         where: eq(boardUserPermissions.userId, session?.user.id ?? ""),
       },
       groupPermissions: {
-        where: inArray(boardGroupPermissions.groupId, groupsOfCurrentUser.map((group) => group.groupId).concat("")),
+        where: groupPermissionWhere,
       },
     },
   });
diff --git a/packages/api/src/router/board/custom-widget-placement-access.ts b/packages/api/src/router/board/custom-widget-placement-access.ts
new file mode 100644
index 000000000..fdb8d6de5
--- /dev/null
+++ b/packages/api/src/router/board/custom-widget-placement-access.ts
@@ -0,0 +1,85 @@
+import { isDeepStrictEqual } from "node:util";
+
+import { TRPCError } from "@trpc/server";
+
+interface BoardPlacement {
+  id: string;
+  kind: string;
+  options: Record<string, unknown>;
+}
+
+interface CustomWidgetPlacementGuardInput {
+  isAdmin: boolean;
+  submittedItems: readonly BoardPlacement[];
+  storedItems: readonly BoardPlacement[];
+}
+
+const throwAdminRequired = () => {
+  throw new TRPCError({
+    code: "FORBIDDEN",
+    message: "Only administrators can add or configure Custom Widgets",
+  });
+};
+
+const assertAuthoringAllowed = (isAdmin: boolean) => {
+  if (!isAdmin) throwAdminRequired();
+};
+
+/**
+ * Protects the security-sensitive part of Custom Widget placements while
+ * leaving ordinary board operations (layout, presentation and removal) to the
+ * existing board permission checks.
+ */
+export const throwIfCustomWidgetPlacementChangeForbidden = ({
+  isAdmin,
+  submittedItems,
+  storedItems,
+}: CustomWidgetPlacementGuardInput) => {
+  const storedById = new Map(storedItems.map((item) => [item.id, item]));
+  for (const submitted of submittedItems) {
+    const stored = storedById.get(submitted.id);
+
+    if (!stored) {
+      if (submitted.kind === "customApi") assertAuthoringAllowed(isAdmin);
+      continue;
+    }
+
+    const wasCustomWidget = stored.kind === "customApi";
+    const isCustomWidget = submitted.kind === "customApi";
+    if (wasCustomWidget !== isCustomWidget) {
+      if (isCustomWidget) assertAuthoringAllowed(isAdmin);
+      else if (!isAdmin) throwAdminRequired();
+      continue;
+    }
+    if (
+      wasCustomWidget &&
+      !isDeepStrictEqual(normalizeCustomWidgetOptions(submitted.options), normalizeCustomWidgetOptions(stored.options))
+    ) {
+      assertAuthoringAllowed(isAdmin);
+    }
+  }
+};
+
+export const throwIfCustomWidgetBoardDuplicationForbidden = (
+  isAdmin: boolean,
+  items: readonly Pick<BoardPlacement, "kind">[],
+) => {
+  if (items.some((item) => item.kind === "customApi")) assertAuthoringAllowed(isAdmin);
+};
+
+function normalizeCustomWidgetOptions(options: Record<string, unknown>) {
+  return {
+    ...options,
+    configuration:
+      options.configuration !== null &&
+      typeof options.configuration === "object" &&
+      !Array.isArray(options.configuration)
+        ? options.configuration
+        : {},
+    configurationVersion:
+      typeof options.configurationVersion === "number" && Number.isInteger(options.configurationVersion)
+        ? options.configurationVersion
+        : 1,
+    refreshInterval: typeof options.refreshInterval === "number" ? options.refreshInterval : 30,
+  };
+}
diff --git a/packages/api/src/router/board/grid-algorithm.ts b/packages/api/src/router/board/grid-algorithm.ts
deleted file mode 100644
index cccc61056..000000000
--- a/packages/api/src/router/board/grid-algorithm.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-export interface GridAlgorithmItem {
-  id: string;
-  type: "item" | "section";
-  width: number;
-  height: number;
-  xOffset: number;
-  yOffset: number;
-  sectionId: string;
-}
-
-interface GridAlgorithmInput {
-  items: GridAlgorithmItem[];
-  width: number;
-  previousWidth: number;
-  sectionId: string;
-}
-
-interface GridAlgorithmOutput {
-  height: number;
-  items: GridAlgorithmItem[];
-}
-
-export const generateResponsiveGridFor = ({
-  items,
-  previousWidth,
-  width,
-  sectionId,
-}: GridAlgorithmInput): GridAlgorithmOutput => {
-  const itemsOfCurrentSection = items
-    .filter((item) => item.sectionId === sectionId)
-    .sort((itemA, itemB) =>
-      itemA.yOffset === itemB.yOffset ? itemA.xOffset - itemB.xOffset : itemA.yOffset - itemB.yOffset,
-    );
-  const normalizedItems = normalizeItems(itemsOfCurrentSection, width);
-
-  if (itemsOfCurrentSection.length === 0) {
-    return {
-      height: 0,
-      items: [],
-    };
-  }
-
-  const newItems: GridAlgorithmItem[] = [];
-
-  // Fix height of dynamic sections
-  const dynamicSectionHeightMap = new Map<string, number>();
-  const dynamicSectionsOfCurrentSection = normalizedItems.filter((item) => item.type === "section");
-  for (const dynamicSection of dynamicSectionsOfCurrentSection) {
-    const result = generateResponsiveGridFor({
-      items,
-      previousWidth: dynamicSection.previousWidth,
-      width: dynamicSection.width,
-      sectionId: dynamicSection.id,
-    });
-    newItems.push(...result.items);
-    dynamicSectionHeightMap.set(dynamicSection.id, result.height);
-  }
-
-  // Return same positions for items in the current section
-  if (width >= previousWidth) {
-    return {
-      height: Math.max(...itemsOfCurrentSection.map((item) => item.yOffset + item.height)),
-      items: newItems.concat(normalizedItems),
-    };
-  }
-
-  const occupied2d: boolean[][] = [];
-
-  for (const item of normalizedItems) {
-    const itemWithHeight = {
-      ...item,
-      height: item.type === "section" ? Math.max(dynamicSectionHeightMap.get(item.id) ?? 1, item.height) : item.height,
-    };
-    const position = nextFreeSpot(occupied2d, itemWithHeight, width);
-    if (!position) throw new Error("No free spot available");
-
-    addItemToOccupied(occupied2d, itemWithHeight, position, width);
-    newItems.push({
-      ...itemWithHeight,
-      xOffset: position.x,
-      yOffset: position.y,
-    });
-  }
-
-  return {
-    height: occupied2d.length,
-    items: newItems,
-  };
-};
-
-/**
- * Reduces the width of the items to fit the new column count.
- * @param items items to normalize
- * @param columnCount new column count
- */
-const normalizeItems = (items: GridAlgorithmItem[], columnCount: number) => {
-  return items.map((item) => ({ ...item, previousWidth: item.width, width: Math.min(columnCount, item.width) }));
-};
-
-/**
- * Adds the item to the occupied spots.
- * @param occupied2d array of occupied spots
- * @param item item to place
- * @param position position to place the item
- */
-const addItemToOccupied = (
-  occupied2d: boolean[][],
-  item: GridAlgorithmItem,
-  position: { x: number; y: number },
-  columnCount: number,
-) => {
-  for (let yOffset = 0; yOffset < item.height; yOffset++) {
-    let row = occupied2d[position.y + yOffset];
-    if (!row) {
-      addRow(occupied2d, columnCount);
-      // After adding it, it must exist
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      row = occupied2d[position.y + yOffset]!;
-    }
-
-    for (let xOffset = 0; xOffset < item.width; xOffset++) {
-      row[position.x + xOffset] = true;
-    }
-  }
-};
-
-/**
- * Adds a new row to the grid.
- * @param occupied2d array of occupied spots
- * @param columnCount column count of section
- */
-const addRow = (occupied2d: boolean[][], columnCount: number) => {
-  occupied2d.push(new Array<boolean>(columnCount).fill(false));
-};
-
-/**
- * Searches for the next free spot in the grid.
- * @param occupied2d array of occupied spots
- * @param item item to place
- * @param columnCount column count of section
- * @returns the position of the next free spot or null if no spot is available
- */
-const nextFreeSpot = (occupied2d: boolean[][], item: GridAlgorithmItem, columnCount: number) => {
-  for (let offsetY = 0; offsetY < 99999; offsetY++) {
-    for (let offsetX = 0; offsetX < columnCount; offsetX++) {
-      if (hasHorizontalSpace(columnCount, item, offsetX) && isFree(occupied2d, item, { x: offsetX, y: offsetY })) {
-        return { x: offsetX, y: offsetY };
-      }
-    }
-  }
-
-  return null;
-};
-
-/**
- * Check if the item fits into the grid horizontally.
- * @param columnCount available width
- * @param item item to place
- * @param offsetX current x position
- * @returns true if the item fits horizontally
- */
-const hasHorizontalSpace = (columnCount: number, item: GridAlgorithmItem, offsetX: number) => {
-  return offsetX + item.width <= columnCount;
-};
-
-/**
- * Check if the spot is free.
- * @param occupied2d array of occupied spots
- * @param item item to place
- * @param position position to check
- * @returns true if the spot is free
- */
-const isFree = (occupied2d: boolean[][], item: GridAlgorithmItem, position: { x: number; y: number }) => {
-  for (let yOffset = 0; yOffset < item.height; yOffset++) {
-    const row = occupied2d[position.y + yOffset];
-    if (!row) return true; // Empty row is free
-
-    for (let xOffset = 0; xOffset < item.width; xOffset++) {
-      if (row[position.x + xOffset]) {
-        return false;
-      }
-    }
-  }
-
-  return true;
-};
diff --git a/packages/api/src/router/board/test/custom-widget-placement-access.spec.ts b/packages/api/src/router/board/test/custom-widget-placement-access.spec.ts
new file mode 100644
index 000000000..141d95248
--- /dev/null
+++ b/packages/api/src/router/board/test/custom-widget-placement-access.spec.ts
@@ -0,0 +1,109 @@
+import { describe, expect, test } from "vitest";
+
+import {
+  throwIfCustomWidgetBoardDuplicationForbidden,
+  throwIfCustomWidgetPlacementChangeForbidden,
+} from "../custom-widget-placement-access";
+
+const placement = {
+  id: "widget-1",
+  kind: "customApi",
+  options: {
+    definitionId: "definition-1",
+    refreshInterval: 30,
+    configuration: { server: "primary" },
+  },
+};
+
+describe("Custom Widget placement access", () => {
+  test("non-admins cannot add a Custom Widget placement", () => {
+    expect(() =>
+      throwIfCustomWidgetPlacementChangeForbidden({
+        isAdmin: false,
+        submittedItems: [{ ...placement, options: { ...placement.options, configurationVersion: 1 } }],
+        storedItems: [],
+      }),
+    ).toThrowError("Only administrators can add or configure Custom Widgets");
+  });
+
+  test.each([
+    ["definition", { ...placement, options: { ...placement.options, definitionId: "definition-2" } }],
+    ["refresh interval", { ...placement, options: { ...placement.options, refreshInterval: 60 } }],
+    [
+      "option configuration",
+      { ...placement, options: { ...placement.options, configuration: { server: "secondary" } } },
+    ],
+    ["widget kind", { ...placement, kind: "weather" }],
+  ])("non-admins cannot change an existing Custom Widget %s", (_label, submitted) => {
+    expect(() =>
+      throwIfCustomWidgetPlacementChangeForbidden({
+        isAdmin: false,
+        submittedItems: [submitted],
+        storedItems: [placement],
+      }),
+    ).toThrowError("Only administrators can add or configure Custom Widgets");
+  });
+
+  test("non-admins may move, resize and change presentation for an existing placement", () => {
+    const submitted = {
+      ...placement,
+      layouts: [{ xOffset: 2, yOffset: 4, width: 6, height: 3 }],
+      advancedOptions: { title: "Status", customCssClasses: ["wide"], borderColor: "#fff" },
+    };
+    expect(() =>
+      throwIfCustomWidgetPlacementChangeForbidden({
+        isAdmin: false,
+        submittedItems: [submitted],
+        storedItems: [placement],
+      }),
+    ).not.toThrow();
+  });
+
+  test("non-admins may remove an existing placement", () => {
+    expect(() =>
+      throwIfCustomWidgetPlacementChangeForbidden({
+        isAdmin: false,
+        submittedItems: [],
+        storedItems: [placement],
+      }),
+    ).not.toThrow();
+  });
+
+  test("admins may create and reconfigure placements", () => {
+    expect(() =>
+      throwIfCustomWidgetPlacementChangeForbidden({
+        isAdmin: true,
+        submittedItems: [{ ...placement, options: { definitionId: "definition-2" } }],
+        storedItems: [],
+      }),
+    ).not.toThrow();
+  });
+
+  test("duplicating a board with Custom Widgets requires admin", () => {
+    expect(() => throwIfCustomWidgetBoardDuplicationForbidden(false, [placement])).toThrowError(
+      "Only administrators can add or configure Custom Widgets",
+    );
+    expect(() => throwIfCustomWidgetBoardDuplicationForbidden(true, [placement])).not.toThrow();
+    expect(() => throwIfCustomWidgetBoardDuplicationForbidden(false, [{ kind: "weather" }])).not.toThrow();
+  });
+
+  test("treats missing persisted v2 defaults as equivalent during presentation-only edits", () => {
+    expect(() =>
+      throwIfCustomWidgetPlacementChangeForbidden({
+        isAdmin: false,
+        submittedItems: [placement],
+        storedItems: [
+          {
+            id: placement.id,
+            kind: placement.kind,
+            options: {
+              definitionId: placement.options.definitionId,
+              refreshInterval: placement.options.refreshInterval,
+              configuration: placement.options.configuration,
+            },
+          },
+        ],
+      }),
+    ).not.toThrow();
+  });
+});
diff --git a/packages/api/src/router/board/test/grid-algorithm.spec.ts b/packages/api/src/router/board/test/grid-algorithm.spec.ts
index 6d73a4386..ca028634b 100644
--- a/packages/api/src/router/board/test/grid-algorithm.spec.ts
+++ b/packages/api/src/router/board/test/grid-algorithm.spec.ts
@@ -1,8 +1,8 @@
 import { createId } from "@paralleldrive/cuid2";
 import { describe, expect, test } from "vitest";
 
-import type { GridAlgorithmItem } from "../grid-algorithm";
-import { generateResponsiveGridFor } from "../grid-algorithm";
+import { generateResponsiveGridFor } from "@homarr/common";
+import type { GridAlgorithmItem } from "@homarr/common";
 
 const ROOT_SECTION_ID = "section";
 
@@ -25,34 +25,34 @@ describe("Grid Algorithm", () => {
 
     expect(output).toBe(item.output);
   });
-  test.each(dynamicSectionTests)(
-    "should convert a grid with dynamic sections from 16 columns to %i columns",
+  test.each(containerTests)(
+    "should convert a grid with nested containers from 16 columns to %i columns",
     (_, testInput) => {
-      const outerDynamicSectionId = "b";
-      const innerDynamicSectionId = "f";
+      const outerContainerId = "b";
+      const innerContainerId = "f";
       const items = [
         algoItem({ id: "a", width: 2, height: 2 }),
-        algoItem({ id: outerDynamicSectionId, type: "section", width: 12, height: 3, yOffset: 2 }),
-        algoItem({ id: "a", width: 2, sectionId: outerDynamicSectionId }),
-        algoItem({ id: "b", width: 4, sectionId: outerDynamicSectionId, xOffset: 2 }),
-        algoItem({ id: "c", width: 2, sectionId: outerDynamicSectionId, xOffset: 6 }),
-        algoItem({ id: "d", width: 1, sectionId: outerDynamicSectionId, xOffset: 8 }),
-        algoItem({ id: "e", width: 3, sectionId: outerDynamicSectionId, xOffset: 9 }),
+        algoItem({ id: outerContainerId, type: "section", width: 12, height: 3, yOffset: 2 }),
+        algoItem({ id: "a", width: 2, sectionId: outerContainerId }),
+        algoItem({ id: "b", width: 4, sectionId: outerContainerId, xOffset: 2 }),
+        algoItem({ id: "c", width: 2, sectionId: outerContainerId, xOffset: 6 }),
+        algoItem({ id: "d", width: 1, sectionId: outerContainerId, xOffset: 8 }),
+        algoItem({ id: "e", width: 3, sectionId: outerContainerId, xOffset: 9 }),
         algoItem({
-          id: innerDynamicSectionId,
+          id: innerContainerId,
           type: "section",
           width: 8,
           height: 2,
           yOffset: 1,
-          sectionId: outerDynamicSectionId,
+          sectionId: outerContainerId,
         }),
-        algoItem({ id: "a", width: 2, sectionId: innerDynamicSectionId }),
-        algoItem({ id: "b", width: 5, xOffset: 2, sectionId: innerDynamicSectionId }),
-        algoItem({ id: "c", width: 1, height: 2, xOffset: 7, sectionId: innerDynamicSectionId }),
-        algoItem({ id: "d", width: 7, yOffset: 1, sectionId: innerDynamicSectionId }),
-        algoItem({ id: "g", width: 4, yOffset: 1, sectionId: outerDynamicSectionId, xOffset: 8 }),
-        algoItem({ id: "h", width: 3, yOffset: 2, sectionId: outerDynamicSectionId, xOffset: 8 }),
-        algoItem({ id: "i", width: 1, yOffset: 2, sectionId: outerDynamicSectionId, xOffset: 11 }),
+        algoItem({ id: "a", width: 2, sectionId: innerContainerId }),
+        algoItem({ id: "b", width: 5, xOffset: 2, sectionId: innerContainerId }),
+        algoItem({ id: "c", width: 1, height: 2, xOffset: 7, sectionId: innerContainerId }),
+        algoItem({ id: "d", width: 7, yOffset: 1, sectionId: innerContainerId }),
+        algoItem({ id: "g", width: 4, yOffset: 1, sectionId: outerContainerId, xOffset: 8 }),
+        algoItem({ id: "h", width: 3, yOffset: 2, sectionId: outerContainerId, xOffset: 8 }),
+        algoItem({ id: "i", width: 1, yOffset: 2, sectionId: outerContainerId, xOffset: 11 }),
         algoItem({ id: "c", width: 5, yOffset: 5 }),
       ];
 
@@ -64,10 +64,10 @@ describe("Grid Algorithm", () => {
       });
 
       const rootItems = newItems.items.filter((item) => item.sectionId === ROOT_SECTION_ID);
-      const outerSection = items.find((item) => item.id === outerDynamicSectionId);
-      const outerItems = newItems.items.filter((item) => item.sectionId === outerDynamicSectionId);
-      const innerSection = items.find((item) => item.id === innerDynamicSectionId);
-      const innerItems = newItems.items.filter((item) => item.sectionId === innerDynamicSectionId);
+      const outerSection = items.find((item) => item.id === outerContainerId);
+      const outerItems = newItems.items.filter((item) => item.sectionId === outerContainerId);
+      const innerSection = items.find((item) => item.id === innerContainerId);
+      const innerItems = newItems.items.filter((item) => item.sectionId === innerContainerId);
 
       expect(generateOutputText(rootItems, testInput.outputColumns)).toBe(testInput.root);
       expect(generateOutputText(outerItems, Math.min(testInput.outputColumns, outerSection?.width ?? 999))).toBe(
@@ -78,6 +78,26 @@ describe("Grid Algorithm", () => {
       );
     },
   );
+
+  test("stops projecting a corrupted recursive section graph", () => {
+    const recursiveSection = algoItem({ id: "recursive", type: "section", width: 3 });
+    const duplicateRecursiveLayout = algoItem({
+      id: "recursive",
+      type: "section",
+      width: 3,
+      sectionId: "recursive",
+    });
+
+    const result = generateResponsiveGridFor({
+      items: [recursiveSection, duplicateRecursiveLayout],
+      width: 3,
+      previousWidth: 12,
+      sectionId: ROOT_SECTION_ID,
+    });
+
+    expect(result.items).toContainEqual(expect.objectContaining({ id: "recursive", sectionId: ROOT_SECTION_ID }));
+    expect(result.items).toHaveLength(2);
+  });
 });
 
 const algoItem = (item: Partial<GridAlgorithmItem>): GridAlgorithmItem => ({
@@ -192,7 +212,7 @@ const itemTests = [
   },
 ].map((item) => [item.inputColumnCount, item.outputColumnCount, item] as const);
 
-const dynamicSectionTests = [
+const containerTests = [
   {
     outputColumns: 16,
     root: `
diff --git a/packages/api/src/router/custom-widget/auth.ts b/packages/api/src/router/custom-widget/auth.ts
index 3fe00af3c..d9e9ecfc5 100644
--- a/packages/api/src/router/custom-widget/auth.ts
+++ b/packages/api/src/router/custom-widget/auth.ts
@@ -1,15 +1,19 @@
-export const AUTH_HANDLERS: Record<string, (headers: Headers, url: URL, apiKey: string, headerName?: string) => void> =
-  {
-    bearer: (headers, _url, apiKey) => {
-      headers.set("Authorization", `Bearer ${apiKey}`);
-    },
-    apiKeyHeader: (headers, _url, apiKey, headerName) => {
-      headers.set(headerName ?? "X-API-Key", apiKey);
-    },
-    apiKeyQuery: (_headers, url, apiKey, headerName) => {
-      url.searchParams.set(headerName ?? "api_key", apiKey);
-    },
-  };
+type HeaderSetter = Pick<Headers, "set">;
+
+export const AUTH_HANDLERS: Record<
+  string,
+  (headers: HeaderSetter, url: URL, apiKey: string, headerName?: string) => void
+> = {
+  bearer: (headers, _url, apiKey) => {
+    headers.set("Authorization", `Bearer ${apiKey}`);
+  },
+  apiKeyHeader: (headers, _url, apiKey, headerName) => {
+    headers.set(headerName ?? "X-API-Key", apiKey);
+  },
+  apiKeyQuery: (_headers, url, apiKey, headerName) => {
+    url.searchParams.set(headerName ?? "api_key", apiKey);
+  },
+};
 
 export function buildSecretMap(secrets: Array<{ kind: string; value: string }>): Record<string, string> {
   const map: Record<string, string> = {};
@@ -20,7 +24,7 @@ export function buildSecretMap(secrets: Array<{ kind: string; value: string }>):
 }
 
 export function applyAuth(
-  headers: Headers,
+  headers: HeaderSetter,
   url: URL,
   authType: string,
   secrets: Array<{ kind: string; value: string }>,
diff --git a/packages/api/src/router/custom-widget/cache-version.ts b/packages/api/src/router/custom-widget/cache-version.ts
new file mode 100644
index 000000000..dda89c9a1
--- /dev/null
+++ b/packages/api/src/router/custom-widget/cache-version.ts
@@ -0,0 +1,17 @@
+import { createHash } from "node:crypto";
+
+interface CacheVersionDefinition {
+  sources: string;
+  requests: string;
+  secrets: Array<{ sourceId: string; kind: string; encryptedValue: string }>;
+}
+
+export function getCustomWidgetCacheVersion(definition: CacheVersionDefinition) {
+  const secrets = definition.secrets
+    .map(({ sourceId, kind, encryptedValue }) => ({ sourceId, kind, encryptedValue }))
+    .toSorted((left, right) => `${left.sourceId}:${left.kind}`.localeCompare(`${right.sourceId}:${right.kind}`));
+  return createHash("sha256")
+    .update(JSON.stringify([definition.sources, definition.requests, secrets]))
+    .digest("hex")
+    .slice(0, 16);
+}
diff --git a/packages/api/src/router/custom-widget/configuration-requests.ts b/packages/api/src/router/custom-widget/configuration-requests.ts
new file mode 100644
index 000000000..a138374cd
--- /dev/null
+++ b/packages/api/src/router/custom-widget/configuration-requests.ts
@@ -0,0 +1,106 @@
+import { createId } from "@homarr/common";
+import { createRedisClient } from "@homarr/core/infrastructure/redis";
+import type { RedisClient } from "@homarr/core/infrastructure/redis";
+import type { CustomWidgetSecretKind } from "@homarr/custom-widgets/core";
+import type { CustomWidgetSource } from "@homarr/custom-widgets/core";
+
+const CONFIGURATION_REQUEST_TTL_MS = 10 * 60_000;
+const CONFIGURATION_REQUEST_PREFIX = "custom-widget:configuration-request:";
+const CONFIGURATION_REQUEST_LOCK_PREFIX = "custom-widget:configuration-request-lock:";
+
+export interface CustomWidgetConfigurationRequest {
+  id: string;
+  userId: string;
+  target: { type: "definition"; id: string } | { type: "preview"; id: string };
+  widgetName: string;
+  sourceId: string;
+  sourceName: string;
+  source: CustomWidgetSource;
+  kinds: CustomWidgetSecretKind[];
+  expiresAt: number;
+  status: "pending" | "completed";
+}
+
+const localRequests = new Map<string, CustomWidgetConfigurationRequest>();
+const localLocks = new Set<string>();
+let redis: RedisClient | undefined;
+
+function getRedis() {
+  if (process.env.CI !== undefined || process.env.NODE_ENV === "test") return undefined;
+  redis ??= createRedisClient();
+  return redis;
+}
+
+async function save(request: CustomWidgetConfigurationRequest) {
+  const ttl = Math.max(1, request.expiresAt - Date.now());
+  const client = getRedis();
+  if (client) await client.set(`${CONFIGURATION_REQUEST_PREFIX}${request.id}`, JSON.stringify(request), "PX", ttl);
+  else localRequests.set(request.id, request);
+}
+
+export async function createCustomWidgetConfigurationRequest(
+  input: Omit<CustomWidgetConfigurationRequest, "id" | "expiresAt" | "status">,
+) {
+  const request: CustomWidgetConfigurationRequest = {
+    ...input,
+    id: createId(),
+    expiresAt: Date.now() + CONFIGURATION_REQUEST_TTL_MS,
+    status: "pending",
+  };
+  await save(request);
+  return request;
+}
+
+export async function getCustomWidgetConfigurationRequest(id: string) {
+  const client = getRedis();
+  const candidate = client ? await client.get(`${CONFIGURATION_REQUEST_PREFIX}${id}`) : localRequests.get(id);
+  if (!candidate) return null;
+  try {
+    const request = (
+      typeof candidate === "string" ? JSON.parse(candidate) : candidate
+    ) as CustomWidgetConfigurationRequest;
+    if (request.expiresAt <= Date.now()) {
+      if (client) await client.del(`${CONFIGURATION_REQUEST_PREFIX}${id}`);
+      else localRequests.delete(id);
+      return null;
+    }
+    return request;
+  } catch {
+    return null;
+  }
+}
+
+export async function getCustomWidgetConfigurationRequestForUser(id: string, userId: string) {
+  const request = await getCustomWidgetConfigurationRequest(id);
+  return request?.userId === userId ? request : null;
+}
+
+export async function completeCustomWidgetConfigurationRequest(id: string) {
+  const request = await getCustomWidgetConfigurationRequest(id);
+  if (!request || request.status !== "pending") return null;
+  const completed = { ...request, status: "completed" as const };
+  await save(completed);
+  await releaseCustomWidgetConfigurationRequest(id);
+  return completed;
+}
+
+export async function claimCustomWidgetConfigurationRequest(id: string) {
+  const request = await getCustomWidgetConfigurationRequest(id);
+  if (!request || request.status !== "pending") return null;
+  const client = getRedis();
+  if (client) {
+    const claimed = await client.set(`${CONFIGURATION_REQUEST_LOCK_PREFIX}${id}`, "1", "PX", 60_000, "NX");
+    return claimed === "OK" ? request : null;
+  }
+  if (localLocks.has(id)) return null;
+  localLocks.add(id);
+  return request;
+}
+
+export async function releaseCustomWidgetConfigurationRequest(id: string) {
+  const client = getRedis();
+  if (client) await client.del(`${CONFIGURATION_REQUEST_LOCK_PREFIX}${id}`);
+  else localLocks.delete(id);
+}
+
+export { setPreviewSessionSecrets } from "./preview-sessions";
diff --git a/packages/api/src/router/custom-widget/custom-widget-access.ts b/packages/api/src/router/custom-widget/custom-widget-access.ts
new file mode 100644
index 000000000..90abeebc3
--- /dev/null
+++ b/packages/api/src/router/custom-widget/custom-widget-access.ts
@@ -0,0 +1,45 @@
+import { TRPCError } from "@trpc/server";
+import { parse } from "superjson";
+import { z } from "zod/v4";
+
+import type { Session } from "@homarr/auth";
+import type { Database } from "@homarr/db";
+import { and, eq } from "@homarr/db";
+import { boards, items } from "@homarr/db/schema";
+import type { BoardPermission } from "@homarr/definitions";
+
+import { throwIfActionForbiddenAsync } from "../board/board-access";
+
+export const customApiItemInputSchema = z.object({
+  boardId: z.string().min(1).max(100),
+  itemId: z.string().min(1).max(100),
+  definitionId: z.string().min(1).max(100),
+});
+
+const customApiOptionsSchema = z.object({ definitionId: z.string() }).passthrough();
+
+export async function assertCustomApiItemBindingAsync(
+  ctx: { db: Database; session: Session | null },
+  input: z.infer<typeof customApiItemInputSchema>,
+  permission?: BoardPermission,
+) {
+  const item = await ctx.db.query.items.findFirst({
+    columns: { options: true },
+    where: and(eq(items.id, input.itemId), eq(items.boardId, input.boardId), eq(items.kind, "customApi")),
+  });
+
+  if (!item) throwCustomApiWidgetNotFound();
+  if (permission) await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.boardId), permission);
+
+  try {
+    const options = customApiOptionsSchema.parse(parse<unknown>(item.options));
+    if (options.definitionId !== input.definitionId) throwCustomApiWidgetNotFound();
+  } catch (error) {
+    if (error instanceof TRPCError) throw error;
+    throwCustomApiWidgetNotFound();
+  }
+}
+
+function throwCustomApiWidgetNotFound(): never {
+  throw new TRPCError({ code: "NOT_FOUND", message: "Custom API widget not found" });
+}
diff --git a/packages/api/src/router/custom-widget/custom-widget-router.ts b/packages/api/src/router/custom-widget/custom-widget-router.ts
index dfe2c58b8..83c6bb080 100644
--- a/packages/api/src/router/custom-widget/custom-widget-router.ts
+++ b/packages/api/src/router/custom-widget/custom-widget-router.ts
@@ -1,228 +1,203 @@
 import { TRPCError } from "@trpc/server";
-import superjson from "superjson";
 import { z } from "zod/v4";
 
 import { createId } from "@homarr/common";
-import { decryptSecret, encryptSecret } from "@homarr/common/server";
-import { customWidgetDefinitions, customWidgetSecrets } from "@homarr/db/schema";
-import { eq } from "@homarr/db";
+import { encryptSecret } from "@homarr/common/server";
 import { createLogger } from "@homarr/core/infrastructure/logs";
+import { and, eq, handleTransactionsAsync, notInArray } from "@homarr/db";
+import { customWidgetDefinitions, customWidgetSecrets } from "@homarr/db/schema";
 import {
-  customWidgetAuthTypes,
   customWidgetCreateSchema,
-  customWidgetDisplayTypes,
-  customWidgetImportSchema,
-  customWidgetMethods,
-  customWidgetSecretKinds,
+  customWidgetDefinitionSchema,
   customWidgetUpdateSchema,
-  displayConfigSchema,
-} from "@homarr/validation/custom-widget";
+} from "@homarr/custom-widgets/core";
 
-import { createTRPCRouter, permissionRequiredProcedure, protectedProcedure, publicProcedure } from "../../trpc";
-import { applyAuth } from "./auth";
-import { extractDisplayDataWithFallback } from "./display-data";
-import { parseDisplayConfig } from "./parse-display-config";
-
-const adminProcedure = permissionRequiredProcedure.requiresPermission("admin");
+import { createTRPCRouter, permissionRequiredProcedure } from "../../trpc";
+import { insertCustomWidgetDefinition } from "./definition-insert";
+import { managementQueryProcedures } from "./management-queries";
+import { metadataProcedures } from "./metadata-procedures";
+import { previewActionProcedures } from "./preview-action-procedures";
+import { previewBaseProcedures } from "./preview-base-procedures";
+import { previewQueryProcedures } from "./preview-query-procedures";
+import {
+  parseStoredCustomWidgetDefinition,
+  safeParseStoredCustomWidgetDefinition,
+  serializeCustomWidgetDefinition,
+} from "./stored-definition";
+import { templateProcedures } from "./template-procedures";
+import { transferProcedures } from "./transfer-procedures";
+import { assertSecretSources, hasSameSecretBinding, requiredSecretKinds } from "./secret-policy";
+import { secretProcedures } from "./secret-procedures";
+import { workshopProcedures } from "./workshop-procedures";
 
 const logger = createLogger({ module: "custom-widget" });
 
-const FETCH_TIMEOUT_MS = 10_000;
-
-const validateUrl = (urlString: string): URL => new URL(urlString);
-
-const updateFieldSerializers: Record<string, (value: unknown) => unknown> = {
-  displayConfig: (value) => superjson.stringify(value),
-};
-
-let _importJsonSchema: Record<string, unknown> | null = null;
-function getImportJsonSchema() {
-  if (!_importJsonSchema) {
-    _importJsonSchema = {
-      ...z.toJSONSchema(customWidgetImportSchema),
-      title: "Homarr Custom Widget",
-      description:
-        "Schema for importing/exporting custom widget definitions in Homarr. " +
-        "All jsonPath fields use JSONPath syntax (e.g. $.data.count, $.items[0].name). " +
-        "The displayConfig must match the chosen displayType. " +
-        "Secrets (API keys, passwords) are not included in exports and must be configured separately after import.",
-    };
-  }
-  return _importJsonSchema;
-}
-
 export const customWidgetRouter = createTRPCRouter({
-  schema: publicProcedure.query(() => getImportJsonSchema()),
+  ...metadataProcedures,
+  ...managementQueryProcedures,
 
-  all: protectedProcedure
-    .meta({
-      mcp: {
-        enabled: true,
-        description:
-          "List custom widget definitions. Returns IDs, names, endpoints, request methods, display types, authentication types, and enabled states.",
-      },
-    })
-    .query(async ({ ctx }) => {
-      const definitions = await ctx.db.query.customWidgetDefinitions.findMany({
-        orderBy: (table, { asc }) => asc(table.name),
-      });
-
-      return definitions.map((def) => ({
-        id: def.id,
-        name: def.name,
-        description: def.description,
-        iconUrl: def.iconUrl,
-        url: def.url,
-        method: def.method,
-        displayType: def.displayType,
-        authType: def.authType,
-        enabled: def.enabled,
-      }));
-    }),
-
-  byId: protectedProcedure
-    .input(z.object({ id: z.string() }))
-    .meta({
-      mcp: {
-        enabled: true,
-        description:
-          "Get one custom widget definition by ID, including its display configuration and flags indicating which secrets are configured. Secret values are never returned.",
-      },
-    })
-    .query(async ({ ctx, input }) => {
-      const definition = await ctx.db.query.customWidgetDefinitions.findFirst({
-        where: eq(customWidgetDefinitions.id, input.id),
-        with: { secrets: true },
-      });
-
-      if (!definition) {
-        throw new TRPCError({ code: "NOT_FOUND", message: "Custom widget definition not found" });
-      }
-
-      const displayConfig = parseDisplayConfig(
-        definition.displayConfig,
-        input.id,
-        logger,
-        "Corrupt displayConfig in custom widget",
-      );
-
-      return {
-        ...definition,
-        enabled: definition.enabled,
-        displayConfig,
-        secrets: definition.secrets.map((s) => ({
-          kind: s.kind,
-          hasValue: true,
-          updatedAt: s.updatedAt,
-        })),
-      };
-    }),
-
-  create: adminProcedure
+  create: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "Create one validated Custom JSX widget." } })
     .input(customWidgetCreateSchema)
-    .meta({
-      mcp: {
-        enabled: true,
-        description:
-          "Create a custom widget definition. Admin only. Validate that displayConfig.type matches displayType. Pass secrets as an empty array unless the user explicitly provided new secret values.",
-      },
-    })
     .mutation(async ({ ctx, input }) => {
-      const id = createId();
-
-      await ctx.db.insert(customWidgetDefinitions).values({
-        id,
-        name: input.name,
-        description: input.description,
-        iconUrl: input.iconUrl,
-        url: input.url,
-        authType: input.authType,
-        headerName: input.headerName,
-        method: input.method,
-        requestBody: input.requestBody,
-        displayType: input.displayType,
-        displayConfig: superjson.stringify(input.displayConfig),
-        creatorId: ctx.session.user.id,
-      });
-
-      if (input.secrets.length > 0) {
-        await ctx.db.insert(customWidgetSecrets).values(
-          input.secrets.map((secret) => ({
-            kind: secret.kind,
-            value: encryptSecret(secret.value),
-            definitionId: id,
-            updatedAt: new Date(),
-          })),
-        );
-      }
-
-      logger.info("Created custom widget definition", { id, name: input.name });
+      const { secrets, ...candidate } = input;
+      const definition = customWidgetDefinitionSchema.parse(candidate);
+      assertSecretSources(definition.sources, secrets);
+      const id = await insertCustomWidgetDefinition(ctx.db, definition, ctx.session.user.id, secrets);
+      logger.info("Created custom widget definition", { id, name: definition.name });
       return { id };
     }),
 
-  update: adminProcedure
+  update: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "Update one Custom JSX widget." } })
     .input(customWidgetUpdateSchema)
-    .meta({
-      mcp: {
-        enabled: true,
-        description:
-          "Update a custom widget definition by ID. Admin only. Call customWidget_byId first, send only the fields that should change, and omit secrets to preserve stored secret values.",
-      },
-    })
     .mutation(async ({ ctx, input }) => {
       const existing = await ctx.db.query.customWidgetDefinitions.findFirst({
         where: eq(customWidgetDefinitions.id, input.id),
       });
+      if (!existing) throw new TRPCError({ code: "NOT_FOUND" });
 
-      if (!existing) {
-        throw new TRPCError({ code: "NOT_FOUND" });
-      }
+      const current = parseStoredCustomWidgetDefinition(existing);
+      const { id, secrets, ...changes } = input;
+      const definition = customWidgetDefinitionSchema.parse({ ...current, ...changes });
+      if (secrets) assertSecretSources(definition.sources, secrets);
+      const definitionChanges = { ...serializeCustomWidgetDefinition(definition), updatedAt: new Date() };
+      const secretRows = secrets?.map((secret) => ({
+        definitionId: id,
+        sourceId: secret.sourceId,
+        kind: secret.kind,
+        encryptedValue: encryptSecret(secret.value),
+        updatedAt: new Date(),
+      }));
+      const sourceIds = Object.keys(definition.sources);
+      const changedSecretBindings = new Set(
+        Object.entries(definition.sources).flatMap(([sourceId, source]) => {
+          const previous = current.sources[sourceId];
+          return previous && !hasSameSecretBinding(previous, source) ? [sourceId] : [];
+        }),
+      );
 
-      const { id, secrets, ...updateFields } = input;
-      const updateValues: Record<string, unknown> = { updatedAt: new Date() };
+      await handleTransactionsAsync(ctx.db, {
+        async handleAsync(db, schema) {
+          await db.transaction(async (transaction) => {
+            await transaction
+              .update(schema.customWidgetDefinitions)
+              .set(definitionChanges)
+              .where(eq(schema.customWidgetDefinitions.id, id));
 
-      for (const [key, value] of Object.entries(updateFields)) {
-        if (value === undefined) continue;
-        const serialize = updateFieldSerializers[key];
-        if (serialize) {
-          updateValues[key] = serialize(value);
-        } else {
-          updateValues[key] = value;
-        }
-      }
+            await transaction
+              .delete(schema.customWidgetSecrets)
+              .where(
+                and(
+                  eq(schema.customWidgetSecrets.definitionId, id),
+                  notInArray(schema.customWidgetSecrets.sourceId, sourceIds),
+                ),
+              );
 
-      await ctx.db.update(customWidgetDefinitions).set(updateValues).where(eq(customWidgetDefinitions.id, id));
+            for (const sourceId of changedSecretBindings) {
+              await transaction
+                .delete(schema.customWidgetSecrets)
+                .where(
+                  and(
+                    eq(schema.customWidgetSecrets.definitionId, id),
+                    eq(schema.customWidgetSecrets.sourceId, sourceId),
+                  ),
+                );
+            }
 
-      if (secrets !== undefined) {
-        const effectiveAuthType = (updateFields.authType as string | undefined) ?? existing.authType;
+            for (const [sourceId, source] of Object.entries(definition.sources)) {
+              const kinds = [...requiredSecretKinds(typeof source.auth === "string" ? source.auth : source.auth.type)];
+              const where = and(
+                eq(schema.customWidgetSecrets.definitionId, id),
+                eq(schema.customWidgetSecrets.sourceId, sourceId),
+              );
+              await transaction
+                .delete(schema.customWidgetSecrets)
+                .where(kinds.length > 0 ? and(where, notInArray(schema.customWidgetSecrets.kind, kinds)) : where);
+            }
 
-        if (secrets.length > 0) {
-          await ctx.db.delete(customWidgetSecrets).where(eq(customWidgetSecrets.definitionId, id));
-          await ctx.db.insert(customWidgetSecrets).values(
-            secrets.map((secret) => ({
-              kind: secret.kind,
-              value: encryptSecret(secret.value),
-              definitionId: id,
-              updatedAt: new Date(),
-            })),
-          );
-        } else if (effectiveAuthType === "none") {
-          await ctx.db.delete(customWidgetSecrets).where(eq(customWidgetSecrets.definitionId, id));
-        }
-      }
+            for (const secret of secretRows ?? []) {
+              await transaction
+                .delete(schema.customWidgetSecrets)
+                .where(
+                  and(
+                    eq(schema.customWidgetSecrets.definitionId, id),
+                    eq(schema.customWidgetSecrets.sourceId, secret.sourceId),
+                    eq(schema.customWidgetSecrets.kind, secret.kind),
+                  ),
+                );
+              await transaction.insert(schema.customWidgetSecrets).values(secret);
+            }
+          });
+        },
+        handleSync(db) {
+          db.transaction((transaction) => {
+            transaction
+              .update(customWidgetDefinitions)
+              .set(definitionChanges)
+              .where(eq(customWidgetDefinitions.id, id))
+              .run();
 
+            transaction
+              .delete(customWidgetSecrets)
+              .where(and(eq(customWidgetSecrets.definitionId, id), notInArray(customWidgetSecrets.sourceId, sourceIds)))
+              .run();
+
+            for (const sourceId of changedSecretBindings) {
+              transaction
+                .delete(customWidgetSecrets)
+                .where(and(eq(customWidgetSecrets.definitionId, id), eq(customWidgetSecrets.sourceId, sourceId)))
+                .run();
+            }
+
+            for (const [sourceId, source] of Object.entries(definition.sources)) {
+              const kinds = [...requiredSecretKinds(typeof source.auth === "string" ? source.auth : source.auth.type)];
+              const where = and(eq(customWidgetSecrets.definitionId, id), eq(customWidgetSecrets.sourceId, sourceId));
+              transaction
+                .delete(customWidgetSecrets)
+                .where(kinds.length > 0 ? and(where, notInArray(customWidgetSecrets.kind, kinds)) : where)
+                .run();
+            }
+
+            for (const secret of secretRows ?? []) {
+              transaction
+                .delete(customWidgetSecrets)
+                .where(
+                  and(
+                    eq(customWidgetSecrets.definitionId, id),
+                    eq(customWidgetSecrets.sourceId, secret.sourceId),
+                    eq(customWidgetSecrets.kind, secret.kind),
+                  ),
+                )
+                .run();
+              transaction.insert(customWidgetSecrets).values(secret).run();
+            }
+          });
+        },
+      });
       logger.info("Updated custom widget definition", { id });
     }),
 
-  toggleEnabled: adminProcedure
+  ...secretProcedures,
+  ...workshopProcedures,
+
+  toggleEnabled: permissionRequiredProcedure
+    .requiresPermission("admin")
     .input(z.object({ id: z.string(), enabled: z.boolean() }))
     .mutation(async ({ ctx, input }) => {
-      const existing = await ctx.db.query.customWidgetDefinitions.findFirst({
-        where: eq(customWidgetDefinitions.id, input.id),
-      });
-
-      if (!existing) {
-        throw new TRPCError({ code: "NOT_FOUND" });
+      if (input.enabled) {
+        const definition = await ctx.db.query.customWidgetDefinitions.findFirst({
+          where: eq(customWidgetDefinitions.id, input.id),
+        });
+        if (!definition) throw new TRPCError({ code: "NOT_FOUND" });
+        if (!safeParseStoredCustomWidgetDefinition(definition).success) {
+          throw new TRPCError({
+            code: "BAD_REQUEST",
+            message: "Invalid custom widget definition cannot be enabled",
+          });
+        }
       }
 
       await ctx.db
@@ -231,261 +206,36 @@ export const customWidgetRouter = createTRPCRouter({
         .where(eq(customWidgetDefinitions.id, input.id));
     }),
 
-  delete: adminProcedure.input(z.object({ id: z.string() })).mutation(async ({ ctx, input }) => {
-    const existing = await ctx.db.query.customWidgetDefinitions.findFirst({
-      where: eq(customWidgetDefinitions.id, input.id),
-    });
-
-    if (!existing) {
-      throw new TRPCError({ code: "NOT_FOUND" });
-    }
-
-    await ctx.db.delete(customWidgetDefinitions).where(eq(customWidgetDefinitions.id, input.id));
-    logger.info("Deleted custom widget definition", { id: input.id });
-  }),
-
-  export: adminProcedure.input(z.object({ id: z.string() })).query(async ({ ctx, input }) => {
-    const definition = await ctx.db.query.customWidgetDefinitions.findFirst({
-      where: eq(customWidgetDefinitions.id, input.id),
-    });
-
-    if (!definition) {
-      throw new TRPCError({ code: "NOT_FOUND" });
-    }
-
-    return {
-      $schema: "homarr-custom-widget-v2" as const,
-      name: definition.name,
-      description: definition.description,
-      iconUrl: definition.iconUrl,
-      url: definition.url,
-      authType: definition.authType,
-      headerName: definition.headerName,
-      method: definition.method,
-      requestBody: definition.requestBody,
-      displayType: definition.displayType,
-      displayConfig: parseDisplayConfig(
-        definition.displayConfig,
-        input.id,
-        logger,
-        "Corrupt displayConfig during export",
-      ),
-    };
-  }),
-
-  import: adminProcedure.input(customWidgetImportSchema).mutation(async ({ ctx, input }) => {
-    const id = createId();
-
-    await ctx.db.insert(customWidgetDefinitions).values({
-      id,
-      name: input.name,
-      description: input.description,
-      iconUrl: input.iconUrl,
-      url: input.url,
-      authType: input.authType,
-      headerName: input.headerName,
-      method: input.method,
-      requestBody: input.requestBody,
-      displayType: input.displayType,
-      displayConfig: superjson.stringify(input.displayConfig),
-      creatorId: ctx.session.user.id,
-    });
-
-    logger.info("Imported custom widget definition", { id, name: input.name });
-    return { id };
-  }),
-
-  preview: adminProcedure
-    .input(
-      z.object({
-        url: z.string().url(),
-        method: z.enum(customWidgetMethods),
-        authType: z.enum(customWidgetAuthTypes),
-        headerName: z.string().optional(),
-        requestBody: z.string().optional(),
-        displayType: z.enum(customWidgetDisplayTypes),
-        displayConfig: displayConfigSchema,
-        secrets: z.array(z.object({ kind: z.enum(customWidgetSecretKinds), value: z.string() })),
-        definitionId: z.string().optional(),
-      }),
-    )
+  delete: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "Delete one Custom JSX widget." } })
+    .input(z.object({ id: z.string() }))
     .mutation(async ({ ctx, input }) => {
-      const secrets = [...input.secrets];
-
-      if (input.definitionId) {
-        const existing = await ctx.db.query.customWidgetDefinitions.findFirst({
-          where: eq(customWidgetDefinitions.id, input.definitionId),
-          with: { secrets: true },
-        });
-        if (existing) {
-          for (const dbSecret of existing.secrets) {
-            if (!secrets.some((s) => s.kind === dbSecret.kind)) {
-              secrets.push({ kind: dbSecret.kind, value: decryptSecret(dbSecret.value) });
-            }
-          }
-        }
-      }
-
-      const url = validateUrl(input.url);
-      const headers = new Headers({ Accept: "application/json" });
-
-      if (input.method !== "GET" && input.requestBody) {
-        headers.set("Content-Type", "application/json");
-      }
-
-      applyAuth(headers, url, input.authType, secrets, input.headerName);
-
-      const controller = new AbortController();
-      const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
-
-      try {
-        const response = await fetch(url.toString(), {
-          method: input.method,
-          headers,
-          body: input.method !== "GET" ? input.requestBody : undefined,
-          redirect: "follow",
-          signal: controller.signal,
-        });
-
-        const responseInfo = { status: response.status, statusText: response.statusText };
-
-        if (!response.ok) {
-          const body = await response.text().catch(() => "");
-          return {
-            success: false as const,
-            error: `HTTP ${response.status}: ${response.statusText}`,
-            responseInfo,
-            rawResponse: body,
-          };
-        }
-
-        const json: unknown = await response.json();
-        const displayData = extractDisplayDataWithFallback(json, input.displayType, input.displayConfig);
-
-        return {
-          success: true as const,
-          responseInfo,
-          rawResponse: JSON.stringify(json, null, 2),
-          displayData,
-        };
-      } catch (error) {
-        if (error instanceof TRPCError) throw error;
-        logger.error("Custom widget preview failed", { error });
-        return {
-          success: false as const,
-          error: error instanceof Error ? error.message : "Failed to fetch data",
-          responseInfo: null,
-          rawResponse: null,
-        };
-      } finally {
-        clearTimeout(timeout);
-      }
+      await ctx.db.delete(customWidgetDefinitions).where(eq(customWidgetDefinitions.id, input.id));
+      logger.info("Deleted custom widget definition", { id: input.id });
     }),
 
-  duplicate: adminProcedure.input(z.object({ id: z.string() })).mutation(async ({ ctx, input }) => {
-    const definition = await ctx.db.query.customWidgetDefinitions.findFirst({
-      where: eq(customWidgetDefinitions.id, input.id),
-      with: { secrets: true },
-    });
-
-    if (!definition) {
-      throw new TRPCError({ code: "NOT_FOUND" });
-    }
-
-    const newId = createId();
-    await ctx.db.insert(customWidgetDefinitions).values({
-      id: newId,
-      name: `${definition.name} (copy)`,
-      description: definition.description,
-      iconUrl: definition.iconUrl,
-      url: definition.url,
-      authType: definition.authType,
-      headerName: definition.headerName,
-      method: definition.method,
-      requestBody: definition.requestBody,
-      displayType: definition.displayType,
-      displayConfig: definition.displayConfig,
-      enabled: definition.enabled,
-      creatorId: ctx.session.user.id,
-    });
-
-    if (definition.secrets.length > 0) {
-      await ctx.db.insert(customWidgetSecrets).values(
-        definition.secrets.map((s) => ({
-          kind: s.kind,
-          value: s.value,
-          definitionId: newId,
-          updatedAt: new Date(),
-        })),
-      );
-    }
-
-    logger.info("Duplicated custom widget definition", { sourceId: input.id, newId });
-    return { id: newId, name: `${definition.name} (copy)` };
-  }),
-
-  execute: protectedProcedure.input(z.object({ definitionId: z.string() })).mutation(async ({ ctx, input }) => {
-    const definition = await ctx.db.query.customWidgetDefinitions.findFirst({
-      where: eq(customWidgetDefinitions.id, input.definitionId),
-      with: { secrets: true },
-    });
-
-    if (!definition) {
-      throw new TRPCError({ code: "NOT_FOUND", message: "Custom widget definition not found" });
-    }
-
-    if (!definition.enabled) {
-      throw new TRPCError({ code: "FORBIDDEN", message: "Widget is disabled" });
-    }
-
-    if (definition.displayType !== "actionButton") {
-      throw new TRPCError({ code: "BAD_REQUEST", message: "Only actionButton widgets can be executed" });
-    }
-
-    const decryptedSecrets = definition.secrets.map((s) => ({
-      kind: s.kind,
-      value: decryptSecret(s.value),
-    }));
-
-    const url = validateUrl(definition.url);
-    const headers = new Headers({ Accept: "application/json" });
-
-    if (definition.method !== "GET" && definition.requestBody) {
-      headers.set("Content-Type", "application/json");
-    }
-
-    applyAuth(headers, url, definition.authType, decryptedSecrets, definition.headerName);
-
-    const controller = new AbortController();
-    const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
-
-    try {
-      const response = await fetch(url.toString(), {
-        method: definition.method,
-        headers,
-        body: definition.method !== "GET" ? definition.requestBody : undefined,
-        redirect: "follow",
-        signal: controller.signal,
+  duplicate: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(z.object({ id: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      const existing = await ctx.db.query.customWidgetDefinitions.findFirst({
+        where: eq(customWidgetDefinitions.id, input.id),
       });
+      if (!existing) throw new TRPCError({ code: "NOT_FOUND" });
+      const current = parseStoredCustomWidgetDefinition(existing);
+      const id = createId();
+      await ctx.db.insert(customWidgetDefinitions).values({
+        id,
+        ...serializeCustomWidgetDefinition({ ...current, name: `${current.name} (copy)` }),
+        creatorId: ctx.session.user.id,
+      });
+      return { id, name: `${current.name} (copy)` };
+    }),
 
-      const responseInfo = { status: response.status, statusText: response.statusText };
-
-      if (!response.ok) {
-        return { success: false as const, error: `HTTP ${response.status}: ${response.statusText}`, responseInfo };
-      }
-
-      logger.info("Executed custom widget action", { definitionId: input.definitionId, status: response.status });
-      return { success: true as const, responseInfo };
-    } catch (error) {
-      if (error instanceof TRPCError) throw error;
-      logger.error("Custom widget execute failed", { definitionId: input.definitionId, error });
-      return {
-        success: false as const,
-        error: error instanceof Error ? error.message : "Request failed",
-        responseInfo: null,
-      };
-    } finally {
-      clearTimeout(timeout);
-    }
-  }),
+  ...templateProcedures,
+  ...transferProcedures,
+  ...previewBaseProcedures,
+  ...previewQueryProcedures,
+  ...previewActionProcedures,
 });
diff --git a/packages/api/src/router/custom-widget/definition-insert.ts b/packages/api/src/router/custom-widget/definition-insert.ts
new file mode 100644
index 000000000..53eb9e7c2
--- /dev/null
+++ b/packages/api/src/router/custom-widget/definition-insert.ts
@@ -0,0 +1,43 @@
+import { createId } from "@homarr/common";
+import { encryptSecret } from "@homarr/common/server";
+import type { Database } from "@homarr/db";
+import { handleTransactionsAsync } from "@homarr/db";
+import { customWidgetDefinitions, customWidgetSecrets } from "@homarr/db/schema";
+import type { CustomWidgetCreateInput, HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
+
+import { serializeCustomWidgetDefinition } from "./stored-definition";
+
+export async function insertCustomWidgetDefinition(
+  db: Database,
+  definition: HomarrCustomWidgetV2,
+  creatorId: string,
+  secrets: CustomWidgetCreateInput["secrets"],
+) {
+  const id = createId();
+  const definitionRow = { id, ...serializeCustomWidgetDefinition(definition), creatorId };
+  const updatedAt = new Date();
+  const secretRows = secrets.map((secret) => ({
+    definitionId: id,
+    sourceId: secret.sourceId,
+    kind: secret.kind,
+    encryptedValue: encryptSecret(secret.value),
+    updatedAt,
+  }));
+
+  await handleTransactionsAsync(db, {
+    async handleAsync(database, schema) {
+      await database.transaction(async (transaction) => {
+        await transaction.insert(schema.customWidgetDefinitions).values(definitionRow);
+        if (secretRows.length > 0) await transaction.insert(schema.customWidgetSecrets).values(secretRows);
+      });
+    },
+    handleSync(database) {
+      database.transaction((transaction) => {
+        transaction.insert(customWidgetDefinitions).values(definitionRow).run();
+        if (secretRows.length > 0) transaction.insert(customWidgetSecrets).values(secretRows).run();
+      });
+    },
+  });
+
+  return id;
+}
diff --git a/packages/api/src/router/custom-widget/display-data.ts b/packages/api/src/router/custom-widget/display-data.ts
deleted file mode 100644
index 627530d20..000000000
--- a/packages/api/src/router/custom-widget/display-data.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { JSONPath } from "jsonpath-plus";
-
-type Config = Record<string, unknown>;
-type Extractor = (json: unknown, config: Config) => unknown;
-
-const query = (json: unknown, path: string) => JSONPath({ path, json: json as object, wrap: false });
-
-const queryRows = (json: unknown, path: string): unknown[] => {
-  const rows = JSONPath({ path, json: json as object, wrap: true }) as unknown[];
-  const first = rows[0];
-  if (Array.isArray(first)) return first as unknown[];
-  return rows;
-};
-
-const toNumber = (value: unknown, fallback: number): number => {
-  const num = Number(value);
-  if (num) return num;
-  return fallback;
-};
-
-const optionalMax = (max: unknown): number | undefined => {
-  if (max === undefined) return undefined;
-  return toNumber(max, 100);
-};
-
-const isGoodValue = (value: unknown, goodValues: string[]): boolean =>
-  goodValues.some((gv) => String(value).toLowerCase() === gv.toLowerCase());
-
-const extractors: Record<string, Extractor> = {
-  singleValue: (json, c) => ({
-    type: "singleValue",
-    label: (c.label as string) ?? "",
-    unit: (c.unit as string) ?? "",
-    value: query(json, (c.jsonPath as string) ?? "$"),
-    valueSize: c.valueSize ?? "lg",
-    labelPosition: c.labelPosition ?? "below",
-  }),
-  keyValue: (json, c) => ({
-    type: "keyValue",
-    entries: ((c.mappings as Array<{ label: string; jsonPath: string; unit: string }>) ?? []).map((m) => ({
-      label: m.label,
-      unit: m.unit,
-      value: query(json, m.jsonPath),
-    })),
-    layout: c.layout ?? "list",
-    columns: c.columns ?? 2,
-  }),
-  table: (json, c) => {
-    const columns = (c.columns as Array<{ header: string; jsonPath: string }>) ?? [];
-    const flatRows = queryRows(json, (c.tablePath as string) ?? "$");
-    return {
-      type: "table",
-      columns: columns.map((col) => col.header),
-      rows: flatRows.map((row) => columns.map((col) => query(row, col.jsonPath))),
-      striped: c.striped ?? true,
-      compact: c.compact ?? false,
-    };
-  },
-  statGrid: (json, c) => ({
-    type: "statGrid",
-    items: ((c.items as Array<{ label: string; jsonPath: string; unit: string; color?: string }>) ?? []).map(
-      (item) => ({
-        label: item.label,
-        unit: item.unit,
-        color: item.color ?? "blue",
-        value: query(json, item.jsonPath),
-      }),
-    ),
-    columns: c.columns ?? 2,
-    cardStyle: c.cardStyle ?? "filled",
-  }),
-  progressBars: (json, c) => ({
-    type: "progressBars",
-    bars: (
-      (c.bars as Array<{ label: string; valuePath: string; maxPath?: string; unit: string; color?: string }>) ?? []
-    ).map((bar) => {
-      const value = query(json, bar.valuePath);
-      const max = bar.maxPath ? query(json, bar.maxPath) : undefined;
-      return {
-        label: bar.label,
-        unit: bar.unit,
-        color: bar.color ?? "blue",
-        value: toNumber(value, 0),
-        max: optionalMax(max),
-      };
-    }),
-    showPercentage: c.showPercentage ?? true,
-    barSize: c.barSize ?? "md",
-  }),
-  statusIndicator: (json, c) => ({
-    type: "statusIndicator",
-    items: ((c.items as Array<{ label: string; jsonPath: string; goodValues: string[] }>) ?? []).map((item) => {
-      const value = query(json, item.jsonPath);
-      return { label: item.label, value: String(value ?? "unknown"), isGood: isGoodValue(value, item.goodValues) };
-    }),
-    layout: c.layout ?? "list",
-    dotSize: c.dotSize ?? "md",
-  }),
-  countGrid: (json, c) => ({
-    type: "countGrid",
-    items: ((c.items as Array<{ label: string; jsonPath: string; unit: string }>) ?? []).map((item) => ({
-      label: item.label,
-      unit: item.unit,
-      value: query(json, item.jsonPath),
-    })),
-    columns: c.columns ?? 2,
-    valueSize: c.valueSize ?? "md",
-  }),
-  raw: (json, c) => ({
-    type: "raw",
-    data: query(json, (c.jsonPath as string) ?? "$"),
-    maxHeight: c.maxHeight ?? 300,
-  }),
-  actionButton: (_json, c) => ({
-    type: "actionButton",
-    buttonLabel: c.buttonLabel ?? "Execute",
-    buttonColor: c.buttonColor ?? "blue",
-    confirmText: c.confirmText ?? "",
-    successMessage: c.successMessage ?? "",
-  }),
-  customJsx: (json, config) => ({
-    type: "customJsx" as const,
-    template: config.template as string,
-    data: json,
-  }),
-};
-
-export function extractDisplayData(json: unknown, displayType: string, displayConfig: Config): unknown {
-  const type = (displayConfig.type as string) ?? displayType;
-  const extractor = extractors[type];
-  if (!extractor) {
-    throw new Error(`Unknown display type: ${type}`);
-  }
-  return extractor(json, displayConfig);
-}
-
-export function extractDisplayDataWithFallback(json: unknown, displayType: string, displayConfig: Config): unknown {
-  const type = (displayConfig.type as string) ?? displayType;
-  const extractor = extractors[type] ?? extractors.singleValue;
-  return extractor?.(json, displayConfig);
-}
-
-export function extractActionButtonDisplay(displayConfig: Config): unknown {
-  return extractors.actionButton?.(null, displayConfig);
-}
diff --git a/packages/api/src/router/custom-widget/domain-error.ts b/packages/api/src/router/custom-widget/domain-error.ts
new file mode 100644
index 000000000..0c161367a
--- /dev/null
+++ b/packages/api/src/router/custom-widget/domain-error.ts
@@ -0,0 +1,16 @@
+import { TRPCError } from "@trpc/server";
+
+import { FlattenError } from "@homarr/common";
+import { CustomWidgetDomainError } from "@homarr/custom-widgets/server";
+
+class RequestLimitTransportError extends FlattenError {}
+
+export function toTrpcError(error: unknown): never {
+  if (error instanceof CustomWidgetDomainError) {
+    const cause = error.retryAfterMs
+      ? new RequestLimitTransportError(error.message, { retryAfterMs: error.retryAfterMs })
+      : error;
+    throw new TRPCError({ code: error.code, message: error.message, cause });
+  }
+  throw error;
+}
diff --git a/packages/api/src/router/custom-widget/legacy-migration.ts b/packages/api/src/router/custom-widget/legacy-migration.ts
new file mode 100644
index 000000000..a3726d182
--- /dev/null
+++ b/packages/api/src/router/custom-widget/legacy-migration.ts
@@ -0,0 +1,72 @@
+import type { legacyCustomWidgetDefinitions } from "@homarr/db/schema";
+import { buildCustomWidgetAiPrompt } from "@homarr/custom-widgets/authoring-prompt";
+
+type LegacyCustomWidgetDefinition = typeof legacyCustomWidgetDefinitions.$inferSelect;
+
+export function buildLegacyCustomWidgetMigrationPrompt(
+  definition: LegacyCustomWidgetDefinition,
+  configuredSecretKinds: readonly string[],
+) {
+  const legacyDefinition = {
+    $schema: "homarr-custom-widget-v1",
+    name: definition.name,
+    description: definition.description,
+    iconUrl: definition.iconUrl ? redactLegacyUrl(definition.iconUrl) : null,
+    url: redactLegacyUrl(definition.url),
+    authType: definition.authType,
+    headerName: definition.headerName,
+    method: definition.method,
+    requestBody: redactLegacyRequestBody(definition.requestBody),
+    displayType: definition.displayType,
+    displayConfig: {
+      migrationNote:
+        "The preserved v1 display configuration was intentionally omitted because legacy free-text fields may contain credentials. Reconstruct it from the display type and visible behavior.",
+    },
+    configuredSecretKinds,
+  };
+  return buildCustomWidgetAiPrompt(
+    undefined,
+    undefined,
+    legacyDefinition,
+    [
+      "Migrate this preserved Homarr v1 Custom Widget to Custom JSX v2.",
+      "Preserve its visible behavior and API intent, use a source named default, and return importable v2 JSON plus JSX.",
+      "The URL and request-body values may be redacted; keep placeholders and never invent or include credentials.",
+      "Credential kinds are informational only and must be configured separately in Homarr.",
+    ].join(" "),
+  );
+}
+
+function redactLegacyUrl(value: string) {
+  try {
+    const url = new URL(value);
+    url.username = "";
+    url.password = "";
+    url.hash = "";
+    url.pathname = url.pathname
+      .split("/")
+      .map((segment) => (segment ? "[REDACTED]" : segment))
+      .join("/");
+    for (const key of url.searchParams.keys()) url.searchParams.set(key, "[REDACTED]");
+    return url.toString();
+  } catch {
+    return "[INVALID LEGACY URL — enter the API URL in Homarr]";
+  }
+}
+
+function redactLegacyRequestBody(value: string | null) {
+  if (!value) return value;
+  try {
+    return JSON.stringify(redactAllValues(JSON.parse(value) as unknown));
+  } catch {
+    return "[REDACTED LEGACY REQUEST BODY]";
+  }
+}
+
+function redactAllValues(value: unknown): unknown {
+  if (Array.isArray(value)) return value.map(redactAllValues);
+  if (value !== null && typeof value === "object")
+    return Object.fromEntries(Object.entries(value).map(([key, child]) => [key, redactAllValues(child)]));
+  if (value === null) return null;
+  return "[REDACTED VALUE]";
+}
diff --git a/packages/api/src/router/custom-widget/management-queries.ts b/packages/api/src/router/custom-widget/management-queries.ts
new file mode 100644
index 000000000..ef4022e7d
--- /dev/null
+++ b/packages/api/src/router/custom-widget/management-queries.ts
@@ -0,0 +1,209 @@
+import { TRPCError } from "@trpc/server";
+import { z } from "zod/v4";
+
+import { decryptSecret } from "@homarr/common/server";
+import { eq, or } from "@homarr/db";
+import { boards, customWidgetDefinitions, legacyCustomWidgetDefinitions } from "@homarr/db/schema";
+import { collectCustomWidgetRequestReferences } from "@homarr/custom-widgets/core";
+
+import { permissionRequiredProcedure } from "../../trpc";
+import { throwIfActionForbiddenAsync } from "../board/board-access";
+import { parseStoredCustomWidgetDefinition } from "./stored-definition";
+import { executeCustomWidgetRequest } from "./request-executor";
+import {
+  hashRuntimeParams,
+  renderRequestBody,
+  renderRequestTarget,
+  resolveCustomWidgetRequestValues,
+} from "./request-manifest";
+import { acquireCustomWidgetRequestLimit } from "./request-limits";
+import { getCustomWidgetCacheVersion } from "./cache-version";
+import { buildLegacyCustomWidgetMigrationPrompt } from "./legacy-migration";
+import {
+  mapAvailableCustomWidget,
+  mapCustomWidgetListItem,
+  mapLegacyAvailableCustomWidget,
+  mapLegacyCustomWidgetListItem,
+} from "./management-query-mappers";
+
+export const managementQueryProcedures = {
+  list: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "List all Custom JSX widgets." } })
+    .query(async ({ ctx }) => {
+      const [definitions, legacyDefinitions] = await Promise.all([
+        ctx.db.query.customWidgetDefinitions.findMany({
+          orderBy: (table, { asc }) => asc(table.name),
+          with: { secrets: true },
+        }),
+        ctx.db.query.legacyCustomWidgetDefinitions.findMany({
+          orderBy: (table, { asc }) => asc(table.name),
+          with: { secrets: true },
+        }),
+      ]);
+      const current = definitions.map(mapCustomWidgetListItem);
+      const currentIds = new Set(definitions.map(({ id }) => id));
+      const legacy = legacyDefinitions.filter(({ id }) => !currentIds.has(id)).map(mapLegacyCustomWidgetListItem);
+      return [...current, ...legacy].toSorted((left, right) => left.name.localeCompare(right.name));
+    }),
+
+  legacyMigrationPrompt: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({
+      mcp: {
+        enabled: true,
+        description:
+          "Get a redacted AI migration prompt for one preserved legacy Custom Widget. Credentials must be configured separately.",
+      },
+    })
+    .input(z.object({ id: z.string() }))
+    .query(async ({ ctx, input }) => {
+      const definition = await ctx.db.query.legacyCustomWidgetDefinitions.findFirst({
+        where: eq(legacyCustomWidgetDefinitions.id, input.id),
+        with: { secrets: true },
+      });
+      if (!definition) throw new TRPCError({ code: "NOT_FOUND", message: "Legacy custom widget not found" });
+      return {
+        id: definition.id,
+        version: 1 as const,
+        prompt: buildLegacyCustomWidgetMigrationPrompt(
+          definition,
+          definition.secrets.map(({ kind }) => kind),
+        ),
+      };
+    }),
+
+  get: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "Get one Custom JSX widget without secret values." } })
+    .input(z.object({ id: z.string() }))
+    .query(async ({ ctx, input }) => {
+      const definition = await ctx.db.query.customWidgetDefinitions.findFirst({
+        where: eq(customWidgetDefinitions.id, input.id),
+        with: { secrets: true },
+      });
+      if (!definition) throw new TRPCError({ code: "NOT_FOUND", message: "Custom widget definition not found" });
+      return {
+        id: definition.id,
+        ...parseStoredCustomWidgetDefinition(definition),
+        enabled: definition.enabled,
+        createdAt: definition.createdAt,
+        updatedAt: definition.updatedAt,
+        secrets: definition.secrets.map((secret) => ({
+          sourceId: secret.sourceId,
+          kind: secret.kind,
+          hasValue: true,
+          updatedAt: secret.updatedAt,
+        })),
+      };
+    }),
+
+  available: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(z.object({ boardId: z.string(), currentId: z.string().optional() }))
+    .query(async ({ ctx, input }) => {
+      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.boardId), "modify");
+      const definitions = await ctx.db.query.customWidgetDefinitions.findMany({
+        where: input.currentId
+          ? or(eq(customWidgetDefinitions.enabled, true), eq(customWidgetDefinitions.id, input.currentId))
+          : eq(customWidgetDefinitions.enabled, true),
+        orderBy: (table, { asc }) => asc(table.name),
+      });
+      const available = definitions.flatMap(mapAvailableCustomWidget);
+      if (!input.currentId || available.some(({ id }) => id === input.currentId)) return available;
+      const legacy = await ctx.db.query.legacyCustomWidgetDefinitions.findFirst({
+        where: eq(legacyCustomWidgetDefinitions.id, input.currentId),
+      });
+      if (!legacy) return available;
+      return [...available, mapLegacyAvailableCustomWidget(legacy)];
+    }),
+
+  optionRequest: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(
+      z.object({
+        boardId: z.string(),
+        definitionId: z.string(),
+        requestId: z.string(),
+        params: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).default({}),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.boardId), "modify");
+      const stored = await ctx.db.query.customWidgetDefinitions.findFirst({
+        where: eq(customWidgetDefinitions.id, input.definitionId),
+        with: { secrets: true },
+      });
+      if (!stored || !stored.enabled) throw new TRPCError({ code: "NOT_FOUND", message: "Custom widget not found" });
+      const definition = parseStoredCustomWidgetDefinition(stored);
+      const requestDefinition = definition.requests[input.requestId];
+      if (requestDefinition?.kind !== "query")
+        throw new TRPCError({ code: "NOT_FOUND", message: "Option query not found" });
+      const request = { id: input.requestId, ...requestDefinition };
+      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.boardId), request.permission);
+      const source = definition.sources[request.source];
+      if (!source) throw new TRPCError({ code: "NOT_FOUND", message: "Option query source not found" });
+      const release = await acquireCustomWidgetRequestLimit({
+        category: "query",
+        userId: ctx.session.user.id,
+        itemId: `configuration:${input.boardId}`,
+        definitionId: input.definitionId,
+      });
+      try {
+        const values = resolveOptionRequestValues(request, input.params);
+        const authType = typeof source.auth === "string" ? source.auth : source.auth.type;
+        const response = await executeCustomWidgetRequest({
+          baseUrl: source.baseUrl,
+          targetUrl: renderRequestTarget(source.baseUrl, request, values),
+          method: request.method,
+          body: renderRequestBody(request, values),
+          staticHeaders: request.headers,
+          auth:
+            request.auth === "none" || authType === "none"
+              ? undefined
+              : {
+                  type: authType,
+                  secrets: stored.secrets
+                    .filter((secret) => secret.sourceId === request.source)
+                    .map((secret) => ({ kind: secret.kind, value: decryptSecret(secret.encryptedValue) })),
+                  headerName:
+                    typeof source.auth === "object" && source.auth.type === "apiKeyHeader"
+                      ? source.auth.name
+                      : typeof source.auth === "object" && source.auth.type === "apiKeyQuery"
+                        ? source.auth.name
+                        : undefined,
+                },
+          networkScope: source.networkScope,
+          kind: "query",
+          cacheKey: `custom-widget:options:${input.definitionId}:${getCustomWidgetCacheVersion(stored)}:${request.id}:${hashRuntimeParams(values)}`,
+          cacheTtlSeconds: request.cacheSeconds ?? 30,
+        });
+        return {
+          ok: response.ok,
+          status: response.status,
+          data: response.data,
+          error: response.ok ? undefined : `HTTP ${response.status}: ${response.statusText}`,
+        };
+      } finally {
+        await release();
+      }
+    }),
+};
+
+export function resolveOptionRequestValues(
+  request: Parameters<typeof resolveCustomWidgetRequestValues>[0],
+  configuration: NonNullable<Parameters<typeof resolveCustomWidgetRequestValues>[2]>,
+) {
+  const references = collectCustomWidgetRequestReferences(request);
+  const options: Record<string, unknown> = {};
+  const params: typeof configuration = {};
+  for (const name of references.options) {
+    const value = configuration[name];
+    if (value !== undefined) options[name] = value;
+  }
+  for (const name of references.params) {
+    const value = configuration[name];
+    if (value !== undefined) params[name] = value;
+  }
+  return resolveCustomWidgetRequestValues(request, options, params);
+}
diff --git a/packages/api/src/router/custom-widget/management-query-mappers.ts b/packages/api/src/router/custom-widget/management-query-mappers.ts
new file mode 100644
index 000000000..7f1dba647
--- /dev/null
+++ b/packages/api/src/router/custom-widget/management-query-mappers.ts
@@ -0,0 +1,159 @@
+import type { InferSelectModel } from "drizzle-orm";
+
+import { createLogger } from "@homarr/core/infrastructure/logs";
+import type { customWidgetDefinitions, customWidgetSecrets, legacyCustomWidgetDefinitions } from "@homarr/db/schema";
+import {
+  getCustomWidgetConfirmation,
+  getCustomWidgetDefaultOptions,
+  getCustomWidgetSecretRequirements,
+} from "@homarr/custom-widgets/core";
+
+import { safeParseStoredCustomWidgetDefinition } from "./stored-definition";
+
+const logger = createLogger({ module: "custom-widget:management" });
+
+type StoredDefinition = InferSelectModel<typeof customWidgetDefinitions>;
+type StoredSecret = InferSelectModel<typeof customWidgetSecrets>;
+type LegacyDefinition = InferSelectModel<typeof legacyCustomWidgetDefinitions>;
+
+export function mapCustomWidgetListItem(definition: StoredDefinition & { secrets: readonly StoredSecret[] }) {
+  const result = safeParseStoredCustomWidgetDefinition(definition);
+  if (!result.success) {
+    logger.warn("Skipped parsing invalid custom widget definition", {
+      event: "custom_widget_definition_invalid",
+      id: definition.id,
+      issueCount: result.issues.length,
+    });
+    return {
+      id: definition.id,
+      name: definition.name,
+      description: definition.description ?? undefined,
+      iconUrl: definition.iconUrl ?? undefined,
+      sources: [],
+      requestCount: 0,
+      missingSecrets: [],
+      options: {},
+      updatedAt: definition.updatedAt,
+      enabled: definition.enabled,
+      valid: false as const,
+      migrationRequired: false as const,
+      validationIssues: result.issues,
+    };
+  }
+
+  const widget = result.widget;
+  const configuredSecrets = new Set(definition.secrets.map((secret) => `${secret.sourceId}:${secret.kind}`));
+  return {
+    id: definition.id,
+    name: widget.name,
+    description: widget.description,
+    iconUrl: widget.iconUrl,
+    sources: Object.entries(widget.sources).map(([id, { name, baseUrl, networkScope, auth }]) => ({
+      id,
+      name,
+      origin: new URL(baseUrl).origin,
+      networkScope,
+      authType: typeof auth === "string" ? auth : auth.type,
+    })),
+    requestCount: Object.keys(widget.requests).length,
+    missingSecrets: getCustomWidgetSecretRequirements(widget.sources).filter(
+      (requirement) => !configuredSecrets.has(`${requirement.sourceId}:${requirement.kind}`),
+    ),
+    options: widget.options,
+    updatedAt: definition.updatedAt,
+    enabled: definition.enabled,
+    valid: true as const,
+    migrationRequired: false as const,
+    validationIssues: [],
+  };
+}
+
+export function mapLegacyCustomWidgetListItem(definition: LegacyDefinition) {
+  return {
+    id: definition.id,
+    name: definition.name,
+    description: definition.description ?? undefined,
+    iconUrl: definition.iconUrl ?? undefined,
+    sources: [{ id: "default", name: "Legacy API", origin: safeOrigin(definition.url), authType: definition.authType }],
+    requestCount: 1,
+    missingSecrets: [],
+    options: {},
+    updatedAt: definition.updatedAt,
+    enabled: false,
+    valid: false as const,
+    migrationRequired: true as const,
+    validationIssues: [],
+  };
+}
+
+export function mapAvailableCustomWidget(definition: StoredDefinition) {
+  const result = safeParseStoredCustomWidgetDefinition(definition);
+  if (!result.success) {
+    logger.warn("Excluded invalid custom widget definition from board picker", {
+      event: "custom_widget_definition_invalid",
+      id: definition.id,
+      surface: "board-picker",
+    });
+    return [];
+  }
+
+  const widget = result.widget;
+  return [
+    {
+      id: definition.id,
+      name: definition.name,
+      description: definition.description,
+      iconUrl: definition.iconUrl,
+      options: widget.options,
+      defaultOptions: getCustomWidgetDefaultOptions(widget.options),
+      template: widget.template,
+      sources: Object.entries(widget.sources).map(([id, { name, networkScope, auth }]) => ({
+        id,
+        name,
+        networkScope,
+        authType: typeof auth === "string" ? auth : auth.type,
+      })),
+      requestCapabilities: Object.entries(widget.requests).map(
+        ([id, { kind, method, trigger, permission, confirmation, invalidates }]) => ({
+          id,
+          kind,
+          method,
+          trigger,
+          minimumBoardPermission: permission,
+          confirmation: getCustomWidgetConfirmation({ method, confirmation }),
+          invalidates,
+        }),
+      ),
+      optionRequests: Object.entries(widget.requests).flatMap(([id, request]) =>
+        request.kind === "query" ? [{ id }] : [],
+      ),
+      updatedAt: definition.updatedAt,
+      migrationRequired: false as const,
+    },
+  ];
+}
+
+export function mapLegacyAvailableCustomWidget(definition: LegacyDefinition) {
+  return {
+    id: definition.id,
+    name: definition.name,
+    description: definition.description,
+    iconUrl: definition.iconUrl,
+    options: {},
+    defaultOptions: {},
+    template: "",
+    sources: [],
+    requestCapabilities: [],
+    optionRequests: [],
+    updatedAt: definition.updatedAt,
+    migrationRequired: true as const,
+  };
+}
+
+function safeOrigin(value: string) {
+  try {
+    return new URL(value).origin;
+  } catch {
+    return "Invalid legacy URL";
+  }
+}
diff --git a/packages/api/src/router/custom-widget/metadata-procedures.ts b/packages/api/src/router/custom-widget/metadata-procedures.ts
new file mode 100644
index 000000000..3cfd4391b
--- /dev/null
+++ b/packages/api/src/router/custom-widget/metadata-procedures.ts
@@ -0,0 +1,52 @@
+import { z } from "zod/v4";
+
+import { CUSTOM_WIDGET_MCP_AUTHORING_PROMPT } from "@homarr/custom-widgets/authoring-prompt";
+import { getCustomWidgetSkill } from "@homarr/custom-widgets/authoring-resources";
+import { customWidgetImportSchema, getCustomWidgetJsonSchema } from "@homarr/custom-widgets/core";
+
+import { permissionRequiredProcedure } from "../../trpc";
+
+export const metadataProcedures = {
+  schema: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "Get the current Custom JSX widget JSON Schema." } })
+    .query(() => getCustomWidgetJsonSchema()),
+
+  getAuthoringPrompt: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "Get the current Custom Widget authoring instructions." } })
+    .query(() => ({
+      version: 2,
+      prompt: CUSTOM_WIDGET_MCP_AUTHORING_PROMPT,
+      resources: [
+        "homarr://custom-widgets/schema",
+        "homarr://custom-widgets/components",
+        "homarr://custom-widgets/skill",
+      ],
+      httpResources: ["/api/custom-widgets/schema", "/api/custom-widgets/components", "/api/custom-widgets/skill"],
+    })),
+
+  getSkill: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "Get the portable Homarr Custom Widget skill." } })
+    .query(() => getCustomWidgetSkill()),
+
+  validate: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "Validate one Custom JSX widget without saving it." } })
+    .input(z.object({ widget: z.unknown() }))
+    .query(({ input }) => {
+      const result = customWidgetImportSchema.safeParse(input.widget);
+      if (!result.success) {
+        return {
+          valid: false as const,
+          issues: result.error.issues.map((issue) => ({
+            path: issue.path.map(String).join("."),
+            code: issue.code,
+            message: issue.message,
+          })),
+        };
+      }
+      return { valid: true as const, issues: [], widget: result.data };
+    }),
+};
diff --git a/packages/api/src/router/custom-widget/parse-display-config.ts b/packages/api/src/router/custom-widget/parse-display-config.ts
deleted file mode 100644
index a54d73b05..000000000
--- a/packages/api/src/router/custom-widget/parse-display-config.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { TRPCError } from "@trpc/server";
-import superjson from "superjson";
-
-import type { createLogger } from "@homarr/core/infrastructure/logs";
-
-type Logger = ReturnType<typeof createLogger>;
-
-export function parseDisplayConfig(raw: string, id: string, logger: Logger, context: string): Record<string, unknown> {
-  try {
-    return superjson.parse(raw) as Record<string, unknown>;
-  } catch {
-    logger.error(context, { id });
-    throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: "Widget has corrupt display configuration" });
-  }
-}
diff --git a/packages/api/src/router/custom-widget/preview-action-procedures.ts b/packages/api/src/router/custom-widget/preview-action-procedures.ts
new file mode 100644
index 000000000..a4e50dd4a
--- /dev/null
+++ b/packages/api/src/router/custom-widget/preview-action-procedures.ts
@@ -0,0 +1,92 @@
+import { TRPCError } from "@trpc/server";
+import { z } from "zod/v4";
+
+import { permissionRequiredProcedure } from "../../trpc";
+import {
+  getPreviewRequestSource,
+  previewSessionRequestSchema,
+  recordPreviewJournal,
+} from "./preview-procedure-helpers";
+import { executeCustomWidgetRequest, invalidateCustomWidgetResponseCache } from "./request-executor";
+import { renderRequestBody, renderRequestTarget, resolveCustomWidgetRequestValues } from "./request-manifest";
+import { acquireCustomWidgetRequestLimit } from "./request-limits";
+import { getPreviewSession } from "./preview-sessions";
+
+export const previewActionProcedures = {
+  previewAction: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({
+      mcp: { enabled: true, description: "Simulate or run one named action in a custom widget preview session." },
+    })
+    .input(previewSessionRequestSchema.extend({ confirmed: z.boolean().optional() }))
+    .mutation(async ({ ctx, input }) => {
+      const session = await getPreviewSession(input.sessionId, ctx.session.user.id);
+      const definition = session.requests[input.requestId];
+      if (definition?.kind !== "action")
+        throw new TRPCError({ code: "NOT_FOUND", message: "Preview action was not found" });
+      const request = { id: input.requestId, ...definition };
+      const resolved = getPreviewRequestSource(session, request.source);
+      if (!resolved) throw new TRPCError({ code: "NOT_FOUND", message: "Preview source was not found" });
+      const params = resolveCustomWidgetRequestValues(request, session.options, input.params);
+      const targetUrl = renderRequestTarget(resolved.source.baseUrl, request, params);
+      const body = renderRequestBody(request, params);
+      if (!session.liveActions) {
+        await recordPreviewJournal(session, {
+          requestId: request.id,
+          kind: "action",
+          method: request.method,
+          path: request.path,
+          status: null,
+          durationMs: 0,
+          simulated: true,
+        });
+        return { ok: true, status: 0, statusText: "Simulated", data: null, simulated: true as const };
+      }
+      if ((request.confirmation || request.method === "DELETE") && input.confirmed !== true) {
+        throw new TRPCError({ code: "PRECONDITION_FAILED", message: "This action requires confirmation" });
+      }
+      const release = await acquireCustomWidgetRequestLimit({
+        category: request.method === "DELETE" ? "delete" : "action",
+        userId: ctx.session.user.id,
+        itemId: `preview:${session.id}`,
+        definitionId: session.definitionId ?? `preview:${session.id}`,
+      });
+      const startedAt = Date.now();
+      try {
+        const response = await executeCustomWidgetRequest({
+          baseUrl: resolved.source.baseUrl,
+          targetUrl,
+          method: request.method,
+          body,
+          staticHeaders: request.headers,
+          auth: request.auth === "none" ? undefined : resolved.auth,
+          networkScope: resolved.source.networkScope,
+          kind: "action",
+        });
+        if (response.ok && request.invalidates?.length) {
+          invalidateCustomWidgetResponseCache(
+            request.invalidates.map((requestId) => `custom-jsx:preview:${session.id}:${requestId}:`),
+          );
+        }
+        await recordPreviewJournal(session, {
+          requestId: request.id,
+          kind: "action",
+          method: request.method,
+          path: request.path,
+          status: response.status,
+          durationMs: Date.now() - startedAt,
+          simulated: false,
+        });
+        return {
+          ok: response.ok,
+          status: response.status,
+          statusText: response.statusText,
+          data: response.data,
+          error: response.ok ? undefined : `HTTP ${response.status}: ${response.statusText}`,
+          simulated: false as const,
+        };
+      } finally {
+        await release();
+      }
+    }),
+};
diff --git a/packages/api/src/router/custom-widget/preview-base-procedures.ts b/packages/api/src/router/custom-widget/preview-base-procedures.ts
new file mode 100644
index 000000000..3d34fad46
--- /dev/null
+++ b/packages/api/src/router/custom-widget/preview-base-procedures.ts
@@ -0,0 +1,146 @@
+import { TRPCError } from "@trpc/server";
+import { z } from "zod/v4";
+
+import { decryptSecret } from "@homarr/common/server";
+import {
+  customWidgetDefinitionSchema,
+  customWidgetSecretsInputSchema,
+  getCustomWidgetConfirmation,
+  getCustomWidgetDefaultOptions,
+  validateCustomWidgetOptions,
+} from "@homarr/custom-widgets/core";
+import { eq } from "@homarr/db";
+import { customWidgetDefinitions } from "@homarr/db/schema";
+
+import { permissionRequiredProcedure } from "../../trpc";
+import { createPreviewSession, getPreviewSession } from "./preview-sessions";
+import { hasSameSecretBinding, requiredSecretKinds } from "./secret-policy";
+import { parseStoredCustomWidgetDefinition } from "./stored-definition";
+
+const previewCreateInputSchema = z.object({
+  definition: customWidgetDefinitionSchema,
+  secrets: customWidgetSecretsInputSchema.default([]),
+  definitionId: z.string().optional(),
+  options: z.record(z.string(), z.unknown()).optional(),
+});
+
+const previewCreateProcedure = permissionRequiredProcedure
+  .requiresPermission("admin")
+  .meta({ mcp: { enabled: true, description: "Create a short-lived preview session for one unsaved custom widget." } })
+  .input(previewCreateInputSchema)
+  .mutation(async ({ ctx, input }) => {
+    const options = input.options ?? getCustomWidgetDefaultOptions(input.definition.options);
+    const optionIssues = validateCustomWidgetOptions(input.definition.options, options);
+    if (optionIssues.length > 0) {
+      const issue = optionIssues[0];
+      throw new TRPCError({
+        code: "BAD_REQUEST",
+        message: issue ? `${issue.path}: ${issue.message}` : "Preview options are invalid",
+      });
+    }
+
+    const secrets = [...input.secrets];
+    if (input.definitionId) {
+      const existing = await ctx.db.query.customWidgetDefinitions.findFirst({
+        where: eq(customWidgetDefinitions.id, input.definitionId),
+        with: { secrets: true },
+      });
+      if (!existing) throw new TRPCError({ code: "NOT_FOUND", message: "Custom widget definition not found" });
+      const existingDefinition = parseStoredCustomWidgetDefinition(existing);
+      for (const [sourceId, existingSource] of Object.entries(existingDefinition.sources)) {
+        const submittedSource = input.definition.sources[sourceId];
+        const hasStoredSecrets = existing.secrets.some((secret) => secret.sourceId === sourceId);
+        if (!submittedSource || !hasStoredSecrets || hasSameSecretBinding(existingSource, submittedSource)) continue;
+
+        const authType = typeof submittedSource.auth === "string" ? submittedSource.auth : submittedSource.auth.type;
+        const missingReplacement = requiredSecretKinds(authType).some(
+          (kind) => !secrets.some((secret) => secret.sourceId === sourceId && secret.kind === kind),
+        );
+        if (missingReplacement) {
+          throw new TRPCError({
+            code: "BAD_REQUEST",
+            message: "Source security settings changed; re-enter its credentials to preview this definition",
+          });
+        }
+      }
+      for (const secret of existing.secrets) {
+        const existingSource = existingDefinition.sources[secret.sourceId];
+        const submittedSource = input.definition.sources[secret.sourceId];
+        if (
+          existingSource &&
+          submittedSource &&
+          hasSameSecretBinding(existingSource, submittedSource) &&
+          !secrets.some((candidate) => candidate.sourceId === secret.sourceId && candidate.kind === secret.kind)
+        ) {
+          secrets.push({ sourceId: secret.sourceId, kind: secret.kind, value: decryptSecret(secret.encryptedValue) });
+        }
+      }
+    }
+
+    const invalid = secrets.find((secret) => {
+      const source = input.definition.sources[secret.sourceId];
+      const authType = typeof source?.auth === "string" ? source.auth : source?.auth.type;
+      const kinds =
+        authType === "basic"
+          ? ["username", "password"]
+          : source && authType && ["bearer", "apiKeyHeader", "apiKeyQuery"].includes(authType)
+            ? ["apiKey"]
+            : [];
+      return !source || !kinds.includes(secret.kind);
+    });
+    if (invalid) {
+      throw new TRPCError({ code: "BAD_REQUEST", message: `Unknown secret source '${invalid.sourceId}'` });
+    }
+
+    const previewSession = await createPreviewSession({
+      userId: ctx.session.user.id,
+      sources: input.definition.sources,
+      requests: input.definition.requests,
+      name: input.definition.name,
+      template: input.definition.template,
+      optionDefinitions: input.definition.options,
+      options,
+      secrets,
+      definitionId: input.definitionId,
+    });
+    return {
+      success: true as const,
+      previewSession,
+      previewUrl: new URL(
+        `/manage/custom-widgets/preview/${previewSession.id}`,
+        ctx.baseUrl ?? "http://localhost",
+      ).toString(),
+      definition: {
+        template: input.definition.template,
+        defaultOptions: getCustomWidgetDefaultOptions(input.definition.options),
+      },
+    };
+  });
+
+export const previewBaseProcedures = {
+  previewCreate: previewCreateProcedure,
+  previewGet: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(z.object({ sessionId: z.string() }))
+    .query(async ({ ctx, input }) => {
+      const session = await getPreviewSession(input.sessionId, ctx.session.user.id);
+      return {
+        id: session.id,
+        name: session.name,
+        expiresAt: session.expiresAt,
+        template: session.template,
+        optionDefinitions: session.optionDefinitions,
+        options: session.options,
+        requests: Object.entries(session.requests).map(([id, request]) => ({
+          id,
+          kind: request.kind,
+          method: request.method,
+          minimumBoardPermission: request.permission,
+          trigger: request.trigger,
+          confirmation: getCustomWidgetConfirmation(request),
+          invalidates: request.invalidates,
+        })),
+        liveActions: session.liveActions,
+      };
+    }),
+};
diff --git a/packages/api/src/router/custom-widget/preview-procedure-helpers.ts b/packages/api/src/router/custom-widget/preview-procedure-helpers.ts
new file mode 100644
index 000000000..652f60f39
--- /dev/null
+++ b/packages/api/src/router/custom-widget/preview-procedure-helpers.ts
@@ -0,0 +1,55 @@
+import { createLogger } from "@homarr/core/infrastructure/logs";
+import type { CustomJsxRequest } from "@homarr/custom-widgets/core";
+import { z } from "zod/v4";
+
+import { appendPreviewJournal } from "./preview-sessions";
+import { getPreviewSessionSecrets } from "./preview-sessions";
+import type { CustomWidgetPreviewSession } from "./preview-sessions";
+import { resolveCustomWidgetRequestValues } from "./request-manifest";
+
+const logger = createLogger({ module: "custom-widget-preview" });
+
+export const previewSessionRequestSchema = z.object({
+  sessionId: z.string().min(1),
+  requestId: z.string().min(1).max(64),
+  params: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).default({}),
+});
+
+export const recordPreviewJournal = async (...args: Parameters<typeof appendPreviewJournal>) => {
+  try {
+    await appendPreviewJournal(...args);
+  } catch (error) {
+    logger.warn("Failed to append custom widget preview journal", {
+      sessionId: args[0].id,
+      errorName: error instanceof Error ? error.name : "UnknownError",
+    });
+  }
+};
+
+export const getPreviewRequestSource = (session: CustomWidgetPreviewSession, sourceId: string) => {
+  const source = session.sources[sourceId];
+  if (!source) return null;
+  const authType = typeof source.auth === "string" ? source.auth : source.auth.type;
+  const auth =
+    authType === "none"
+      ? undefined
+      : {
+          type: authType,
+          secrets: getPreviewSessionSecrets(session, sourceId),
+          headerName:
+            typeof source.auth === "object" && source.auth.type === "apiKeyHeader"
+              ? source.auth.name
+              : typeof source.auth === "object" && source.auth.type === "apiKeyQuery"
+                ? source.auth.name
+                : undefined,
+        };
+  return { source, auth };
+};
+
+export function resolvePreviewRequestParams(
+  request: CustomJsxRequest,
+  options: Record<string, unknown>,
+  suppliedParams: Record<string, string | number | boolean>,
+) {
+  return resolveCustomWidgetRequestValues(request, options, suppliedParams);
+}
diff --git a/packages/api/src/router/custom-widget/preview-query-procedures.ts b/packages/api/src/router/custom-widget/preview-query-procedures.ts
new file mode 100644
index 000000000..18e527c72
--- /dev/null
+++ b/packages/api/src/router/custom-widget/preview-query-procedures.ts
@@ -0,0 +1,95 @@
+import { TRPCError } from "@trpc/server";
+import { z } from "zod/v4";
+
+import { permissionRequiredProcedure } from "../../trpc";
+import {
+  getPreviewRequestSource,
+  previewSessionRequestSchema,
+  recordPreviewJournal,
+  resolvePreviewRequestParams,
+} from "./preview-procedure-helpers";
+import { executeCustomWidgetRequest } from "./request-executor";
+import { hashRuntimeParams, renderRequestBody, renderRequestTarget } from "./request-manifest";
+import { acquireCustomWidgetRequestLimit } from "./request-limits";
+import { getPreviewJournal, getPreviewSession, setPreviewSessionLiveActions } from "./preview-sessions";
+
+export const previewQueryProcedures = {
+  previewQuery: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({
+      mcp: {
+        enabled: true,
+        description: "Run one named query from a short-lived custom widget preview session.",
+      },
+    })
+    .input(previewSessionRequestSchema)
+    .query(async ({ ctx, input }) => {
+      const session = await getPreviewSession(input.sessionId, ctx.session.user.id);
+      const definition = session.requests[input.requestId];
+      if (definition?.kind !== "query")
+        throw new TRPCError({ code: "NOT_FOUND", message: "Preview query was not found" });
+      const request = { id: input.requestId, ...definition };
+      const resolved = getPreviewRequestSource(session, request.source);
+      if (!resolved) throw new TRPCError({ code: "NOT_FOUND", message: "Preview source was not found" });
+      const params = resolvePreviewRequestParams(request, session.options, input.params);
+      const targetUrl = renderRequestTarget(resolved.source.baseUrl, request, params);
+      const body = renderRequestBody(request, params);
+      const release = await acquireCustomWidgetRequestLimit({
+        category: "query",
+        userId: ctx.session.user.id,
+        itemId: `preview:${session.id}`,
+        definitionId: session.definitionId ?? `preview:${session.id}`,
+      });
+      const startedAt = Date.now();
+      try {
+        const response = await executeCustomWidgetRequest({
+          baseUrl: resolved.source.baseUrl,
+          targetUrl,
+          method: request.method,
+          body,
+          staticHeaders: request.headers,
+          auth: request.auth === "none" ? undefined : resolved.auth,
+          networkScope: resolved.source.networkScope,
+          kind: "query",
+          cacheKey: `custom-jsx:preview:${session.id}:${request.id}:${hashRuntimeParams(params)}`,
+          cacheTtlSeconds: request.cacheSeconds,
+        });
+        await recordPreviewJournal(session, {
+          requestId: request.id,
+          kind: "query",
+          method: request.method,
+          path: request.path,
+          status: response.status,
+          durationMs: Date.now() - startedAt,
+          simulated: false,
+        });
+        return {
+          ok: response.ok,
+          status: response.status,
+          statusText: response.statusText,
+          data: response.data,
+          error: response.ok ? undefined : `HTTP ${response.status}: ${response.statusText}`,
+        };
+      } finally {
+        await release();
+      }
+    }),
+
+  setPreviewLiveActions: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(z.object({ sessionId: z.string().min(1), enabled: z.boolean() }))
+    .mutation(async ({ ctx, input }) =>
+      setPreviewSessionLiveActions(input.sessionId, ctx.session.user.id, input.enabled),
+    ),
+
+  previewJournal: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({
+      mcp: {
+        enabled: true,
+        description: "Read the redacted request journal for a custom widget preview session.",
+      },
+    })
+    .input(z.object({ sessionId: z.string().min(1) }))
+    .query(async ({ ctx, input }) => getPreviewJournal(input.sessionId, ctx.session.user.id)),
+};
diff --git a/packages/api/src/router/custom-widget/preview-sessions.ts b/packages/api/src/router/custom-widget/preview-sessions.ts
new file mode 100644
index 000000000..289247213
--- /dev/null
+++ b/packages/api/src/router/custom-widget/preview-sessions.ts
@@ -0,0 +1,111 @@
+import { createId } from "@homarr/common";
+import { decryptSecret, encryptSecret } from "@homarr/common/server";
+import { createRedisClient } from "@homarr/core/infrastructure/redis";
+import type { RedisClient } from "@homarr/core/infrastructure/redis";
+import { CustomWidgetPreviewSessionService } from "@homarr/custom-widgets/server";
+import type {
+  CreatePreviewSessionInput,
+  CustomWidgetPreviewJournalEntry,
+  CustomWidgetPreviewSession,
+  PreviewSessionStore,
+} from "@homarr/custom-widgets/server";
+
+import { toTrpcError } from "./domain-error";
+
+const SESSION_PREFIX = "custom-widget:preview-session:";
+const JOURNAL_PREFIX = "custom-widget:preview-journal:";
+const COMPARE_AND_SWAP_SESSION_SCRIPT = `
+local current = redis.call('GET', KEYS[1])
+if not current then return 0 end
+local ok, parsed = pcall(cjson.decode, current)
+if not ok or type(parsed) ~= 'table' or tonumber(parsed.revision) ~= tonumber(ARGV[1]) then return 0 end
+redis.call('SET', KEYS[1], ARGV[2], 'PX', ARGV[3])
+return 1
+`;
+
+class RedisPreviewSessionStore implements PreviewSessionStore {
+  public constructor(private readonly redis: RedisClient) {}
+
+  public async saveSession(id: string, value: unknown, ttlMs: number) {
+    await this.redis.set(`${SESSION_PREFIX}${id}`, JSON.stringify(value), "PX", ttlMs);
+  }
+
+  public getSession(id: string) {
+    return this.redis.get(`${SESSION_PREFIX}${id}`);
+  }
+  public async compareAndSwapSession(id: string, expectedRevision: number, value: unknown, ttlMs: number) {
+    return (
+      Number(
+        await this.redis.eval(
+          COMPARE_AND_SWAP_SESSION_SCRIPT,
+          1,
+          `${SESSION_PREFIX}${id}`,
+          expectedRevision,
+          JSON.stringify(value),
+          ttlMs,
+        ),
+      ) === 1
+    );
+  }
+  public async deleteSession(id: string) {
+    await this.redis.del(`${SESSION_PREFIX}${id}`);
+  }
+
+  public async appendJournal(id: string, value: unknown, maxEntries: number, ttlMs: number) {
+    const key = `${JOURNAL_PREFIX}${id}`;
+    await this.redis
+      .multi()
+      .lpush(key, JSON.stringify(value))
+      .ltrim(key, 0, maxEntries - 1)
+      .pexpire(key, ttlMs)
+      .exec();
+  }
+
+  public getJournal(id: string, maxEntries: number) {
+    return this.redis.lrange(`${JOURNAL_PREFIX}${id}`, 0, maxEntries - 1);
+  }
+}
+
+let service: CustomWidgetPreviewSessionService | undefined;
+function getService() {
+  if (service) return service;
+  const useLocal = process.env.CI !== undefined || process.env.NODE_ENV === "test";
+  service = new CustomWidgetPreviewSessionService({
+    createId,
+    encrypt: encryptSecret,
+    decrypt: (value) => decryptSecret(value as `${string}.${string}`),
+    store: useLocal ? undefined : new RedisPreviewSessionStore(createRedisClient()),
+  });
+  return service;
+}
+
+async function call<T>(operation: () => Promise<T>): Promise<T> {
+  try {
+    return await operation();
+  } catch (error) {
+    toTrpcError(error);
+  }
+}
+
+export type { CreatePreviewSessionInput, CustomWidgetPreviewJournalEntry, CustomWidgetPreviewSession };
+
+export const createPreviewSession = (input: CreatePreviewSessionInput) => call(() => getService().create(input));
+export const getPreviewSession = (id: string, userId: string) => call(() => getService().get(id, userId));
+export const setPreviewSessionLiveActions = (id: string, userId: string, enabled: boolean) =>
+  call(() => getService().setLiveActions(id, userId, enabled));
+export const appendPreviewJournal = (
+  session: CustomWidgetPreviewSession,
+  entry: Omit<CustomWidgetPreviewJournalEntry, "id" | "timestamp">,
+) => call(() => getService().appendJournal(session, entry));
+export const getPreviewJournal = (id: string, userId: string) => call(() => getService().getJournal(id, userId));
+export const getPreviewSessionSecrets = (session: CustomWidgetPreviewSession, sourceId: string) =>
+  getService().getSecrets(session, sourceId);
+export const setPreviewSessionSecrets = (id: string, userId: string, secrets: CreatePreviewSessionInput["secrets"]) =>
+  call(() => getService().setSecrets(id, userId, secrets));
+export const configurePreviewSessionSource = (
+  id: string,
+  userId: string,
+  sourceId: string,
+  source: CreatePreviewSessionInput["sources"][string],
+  secrets: CreatePreviewSessionInput["secrets"],
+) => call(() => getService().configureSource(id, userId, sourceId, source, secrets));
diff --git a/packages/api/src/router/custom-widget/request-executor.ts b/packages/api/src/router/custom-widget/request-executor.ts
new file mode 100644
index 000000000..a00946eb8
--- /dev/null
+++ b/packages/api/src/router/custom-widget/request-executor.ts
@@ -0,0 +1,87 @@
+import { createLogger } from "@homarr/core/infrastructure/logs";
+import {
+  assertJsonBudget as assertDomainJsonBudget,
+  assertSafeStaticHeaders as assertDomainSafeStaticHeaders,
+  classifyAddress,
+  executeCustomWidgetRequest as executeDomainRequest,
+  invalidateCustomWidgetResponseCache as invalidateDomainResponseCache,
+  MAX_REQUEST_BODY_BYTES,
+  MAX_RESPONSE_BODY_BYTES,
+  MAX_RESPONSE_JSON_DEPTH,
+  MAX_RESPONSE_JSON_NODES,
+  resolveAndValidateHost as resolveDomainHost,
+  resolveSameOriginTarget as resolveDomainTarget,
+  validateCustomWidgetUrl as validateDomainUrl,
+} from "@homarr/custom-widgets/server";
+import type { CustomWidgetHttpRequest, CustomWidgetHttpResponse } from "@homarr/custom-widgets/server";
+
+import { toTrpcError } from "./domain-error";
+
+export type {
+  CustomWidgetAuthConfig,
+  CustomWidgetHttpRequest,
+  CustomWidgetHttpResponse,
+} from "@homarr/custom-widgets/server";
+export {
+  classifyAddress,
+  MAX_REQUEST_BODY_BYTES,
+  MAX_RESPONSE_BODY_BYTES,
+  MAX_RESPONSE_JSON_DEPTH,
+  MAX_RESPONSE_JSON_NODES,
+};
+
+const logger = createLogger({ module: "custom-widget:http" });
+
+export function assertJsonBudget(value: unknown): void {
+  try {
+    assertDomainJsonBudget(value);
+  } catch (error) {
+    toTrpcError(error);
+  }
+}
+
+export function assertSafeStaticHeaders(headers: Record<string, string> | undefined): void {
+  try {
+    assertDomainSafeStaticHeaders(headers);
+  } catch (error) {
+    toTrpcError(error);
+  }
+}
+
+export function validateCustomWidgetUrl(value: string | URL): URL {
+  try {
+    return validateDomainUrl(value);
+  } catch (error) {
+    toTrpcError(error);
+  }
+}
+
+export function resolveSameOriginTarget(baseUrl: string, target?: string | URL): URL {
+  try {
+    return resolveDomainTarget(baseUrl, target);
+  } catch (error) {
+    toTrpcError(error);
+  }
+}
+
+export async function resolveAndValidateHost(hostname: string, scope: CustomWidgetHttpRequest["networkScope"]) {
+  try {
+    return await resolveDomainHost(hostname, scope);
+  } catch (error) {
+    toTrpcError(error);
+  }
+}
+
+export async function executeCustomWidgetRequest(input: CustomWidgetHttpRequest): Promise<CustomWidgetHttpResponse> {
+  try {
+    return await executeDomainRequest({
+      ...input,
+      logError: (event) => logger.error("Custom widget request failed", event),
+    });
+  } catch (error) {
+    toTrpcError(error);
+  }
+}
+
+export const invalidateCustomWidgetResponseCache = (prefixes: readonly string[]) =>
+  invalidateDomainResponseCache(prefixes);
diff --git a/packages/api/src/router/custom-widget/request-limits.ts b/packages/api/src/router/custom-widget/request-limits.ts
new file mode 100644
index 000000000..b92615f3e
--- /dev/null
+++ b/packages/api/src/router/custom-widget/request-limits.ts
@@ -0,0 +1,75 @@
+import { createLogger } from "@homarr/core/infrastructure/logs";
+import { createRedisClient } from "@homarr/core/infrastructure/redis";
+import type { RedisClient } from "@homarr/core/infrastructure/redis";
+import { CustomWidgetRequestLimiter } from "@homarr/custom-widgets/server";
+import type { RequestLimitInput, RequestLimitStore } from "@homarr/custom-widgets/server";
+
+import { toTrpcError } from "./domain-error";
+
+const logger = createLogger({ module: "custom-widget:limits" });
+const RATE_SCRIPT = `
+local count = redis.call('INCR', KEYS[1])
+if count == 1 then redis.call('PEXPIRE', KEYS[1], ARGV[1]) end
+return { count, redis.call('PTTL', KEYS[1]) }
+`;
+const ACQUIRE_SCRIPT = `
+local time = redis.call('TIME')
+local now = (tonumber(time[1]) * 1000) + math.floor(tonumber(time[2]) / 1000)
+redis.call('ZREMRANGEBYSCORE', KEYS[1], '-inf', now)
+if redis.call('ZCARD', KEYS[1]) >= tonumber(ARGV[2]) then return 0 end
+redis.call('ZADD', KEYS[1], now + tonumber(ARGV[3]), ARGV[1])
+redis.call('PEXPIRE', KEYS[1], ARGV[3])
+return 1
+`;
+const RELEASE_SCRIPT = `
+return redis.call('ZREM', KEYS[1], ARGV[1])
+`;
+
+class RedisRequestLimitStore implements RequestLimitStore {
+  public constructor(private readonly redis: RedisClient) {}
+
+  public async incrementRate(key: string, windowMs: number) {
+    const [count, retryAfterMs] = (await this.redis.eval(RATE_SCRIPT, 1, key, windowMs)) as [number, number];
+    return { count: Number(count), retryAfterMs: Number(retryAfterMs) || windowMs };
+  }
+
+  public async acquireConcurrency(key: string, ownerId: string, limit: number, ttlMs: number) {
+    return Number(await this.redis.eval(ACQUIRE_SCRIPT, 1, key, ownerId, limit, ttlMs)) > 0;
+  }
+
+  public async releaseConcurrency(key: string, ownerId: string) {
+    await this.redis.eval(RELEASE_SCRIPT, 1, key, ownerId);
+  }
+}
+
+let limiter: CustomWidgetRequestLimiter | undefined;
+function getLimiter() {
+  if (limiter) return limiter;
+  const useLocal = process.env.CI !== undefined || process.env.NODE_ENV === "test";
+  const store = useLocal ? undefined : new RedisRequestLimitStore(createRedisClient());
+  limiter = new CustomWidgetRequestLimiter({
+    store,
+    onStoreError: (error) =>
+      logger.error("Custom widget rate limiter is unavailable", {
+        errorName: error instanceof Error ? error.name : "UnknownError",
+      }),
+  });
+  return limiter;
+}
+
+export async function acquireCustomWidgetRequestLimit(input: RequestLimitInput): Promise<() => Promise<void>> {
+  try {
+    const release = await getLimiter().acquire(input);
+    return async () => {
+      try {
+        await release();
+      } catch (error) {
+        logger.error("Failed to release custom widget request capacity", {
+          errorName: error instanceof Error ? error.name : "UnknownError",
+        });
+      }
+    };
+  } catch (error) {
+    toTrpcError(error);
+  }
+}
diff --git a/packages/api/src/router/custom-widget/request-manifest.ts b/packages/api/src/router/custom-widget/request-manifest.ts
new file mode 100644
index 000000000..891cfafac
--- /dev/null
+++ b/packages/api/src/router/custom-widget/request-manifest.ts
@@ -0,0 +1,43 @@
+import type { CustomJsxRequest } from "@homarr/custom-widgets/core";
+import {
+  hashRuntimeParams,
+  renderRequestBody as renderDomainBody,
+  renderRequestTarget as renderDomainTarget,
+  resolveCustomWidgetRequestValues as resolveDomainValues,
+} from "@homarr/custom-widgets/server";
+import type { CustomJsxRuntimeParams } from "@homarr/custom-widgets/server";
+
+import { toTrpcError } from "./domain-error";
+
+export type { CustomJsxRuntimeParams } from "@homarr/custom-widgets/server";
+export { hashRuntimeParams };
+
+type CustomJsxResolvedValues = ReturnType<typeof resolveDomainValues>;
+
+export function resolveCustomWidgetRequestValues(
+  request: CustomJsxRequest,
+  options: Record<string, unknown>,
+  params: CustomJsxRuntimeParams = {},
+) {
+  try {
+    return resolveDomainValues(request, options, params);
+  } catch (error) {
+    return toTrpcError(error);
+  }
+}
+
+export function renderRequestBody(request: CustomJsxRequest, params: CustomJsxResolvedValues) {
+  try {
+    return renderDomainBody(request, params);
+  } catch (error) {
+    return toTrpcError(error);
+  }
+}
+
+export function renderRequestTarget(baseUrl: string, request: CustomJsxRequest, params: CustomJsxResolvedValues) {
+  try {
+    return renderDomainTarget(baseUrl, request, params);
+  } catch (error) {
+    return toTrpcError(error);
+  }
+}
diff --git a/packages/api/src/router/custom-widget/secret-persistence.ts b/packages/api/src/router/custom-widget/secret-persistence.ts
new file mode 100644
index 000000000..73f570510
--- /dev/null
+++ b/packages/api/src/router/custom-widget/secret-persistence.ts
@@ -0,0 +1,289 @@
+import { TRPCError } from "@trpc/server";
+
+import { encryptSecret } from "@homarr/common/server";
+import type { Database } from "@homarr/db";
+import { and, eq, handleTransactionsAsync } from "@homarr/db";
+import { customWidgetDefinitions, customWidgetSecrets } from "@homarr/db/schema";
+import type { CustomWidgetCreateInput, CustomWidgetSecretKind, CustomWidgetSource } from "@homarr/custom-widgets/core";
+import { customWidgetSourceSchema, hasSameCustomWidgetSourceAuthentication } from "@homarr/custom-widgets/core";
+
+import { assertSecretSources, hasSameSecretBinding } from "./secret-policy";
+import { parseStoredCustomWidgetDefinition, serializeCustomWidgetDefinition } from "./stored-definition";
+
+type CustomWidgetSecretInput = CustomWidgetCreateInput["secrets"][number];
+
+type ConfigureCustomWidgetSourceInput = {
+  definitionId: string;
+  sourceId: string;
+  baseUrl: string;
+  networkScope?: CustomWidgetSource["networkScope"];
+  secrets: CustomWidgetCreateInput["secrets"];
+  expectedSource?: CustomWidgetSource;
+};
+
+type SourceConfigurationIssue = "definition-not-found" | "source-not-found" | "binding-changed";
+
+class SourceConfigurationError extends Error {
+  constructor(readonly issue: SourceConfigurationIssue) {
+    super(`Custom widget source configuration failed: ${issue}`);
+    this.name = "SourceConfigurationError";
+  }
+}
+
+export async function setCustomWidgetSecret(db: Database, definitionId: string, secret: CustomWidgetSecretInput) {
+  const updatedAt = new Date();
+  const secretRow = {
+    definitionId,
+    sourceId: secret.sourceId,
+    kind: secret.kind,
+    encryptedValue: encryptSecret(secret.value),
+    updatedAt,
+  };
+  await handleTransactionsAsync(db, {
+    async handleAsync(database, schema) {
+      await database.transaction(async (transaction) => {
+        await transaction
+          .delete(schema.customWidgetSecrets)
+          .where(
+            and(
+              eq(schema.customWidgetSecrets.definitionId, definitionId),
+              eq(schema.customWidgetSecrets.sourceId, secret.sourceId),
+              eq(schema.customWidgetSecrets.kind, secret.kind),
+            ),
+          );
+        await transaction.insert(schema.customWidgetSecrets).values(secretRow);
+        await transaction
+          .update(schema.customWidgetDefinitions)
+          .set({ updatedAt })
+          .where(eq(schema.customWidgetDefinitions.id, definitionId));
+      });
+    },
+    handleSync(database) {
+      database.transaction((transaction) => {
+        transaction
+          .delete(customWidgetSecrets)
+          .where(
+            and(
+              eq(customWidgetSecrets.definitionId, definitionId),
+              eq(customWidgetSecrets.sourceId, secret.sourceId),
+              eq(customWidgetSecrets.kind, secret.kind),
+            ),
+          )
+          .run();
+        transaction.insert(customWidgetSecrets).values(secretRow).run();
+        transaction
+          .update(customWidgetDefinitions)
+          .set({ updatedAt })
+          .where(eq(customWidgetDefinitions.id, definitionId))
+          .run();
+      });
+    },
+  });
+}
+
+export async function configureCustomWidgetSource(db: Database, input: ConfigureCustomWidgetSourceInput) {
+  try {
+    return await persistCustomWidgetSourceConfiguration(db, input);
+  } catch (error) {
+    if (!(error instanceof SourceConfigurationError)) throw error;
+    if (error.issue === "definition-not-found") throw new TRPCError({ code: "NOT_FOUND" });
+    if (error.issue === "source-not-found") {
+      throw new TRPCError({ code: "NOT_FOUND", message: "Widget source not found" });
+    }
+    throw new TRPCError({
+      code: "CONFLICT",
+      message: "Widget source authentication changed while it was being configured",
+    });
+  }
+}
+
+export async function configureCustomWidgetSourceFromRequest(
+  db: Database,
+  input: ConfigureCustomWidgetSourceInput & { expectedSource: CustomWidgetSource },
+) {
+  try {
+    return {
+      status: "configured" as const,
+      source: await persistCustomWidgetSourceConfiguration(db, input),
+    };
+  } catch (error) {
+    if (!(error instanceof SourceConfigurationError)) throw error;
+    return { status: error.issue } as const;
+  }
+}
+
+async function persistCustomWidgetSourceConfiguration(db: Database, input: ConfigureCustomWidgetSourceInput) {
+  let configuredSource: CustomWidgetSource | undefined;
+  const secretRows = input.secrets.map((secret) => ({
+    definitionId: input.definitionId,
+    sourceId: input.sourceId,
+    kind: secret.kind,
+    encryptedValue: encryptSecret(secret.value),
+    updatedAt: new Date(),
+  }));
+  await handleTransactionsAsync(db, {
+    async handleAsync(database, schema) {
+      await database.transaction(async (transaction) => {
+        const [stored] = await transaction
+          .select()
+          .from(schema.customWidgetDefinitions)
+          .where(eq(schema.customWidgetDefinitions.id, input.definitionId))
+          .limit(1)
+          .for("update");
+        const sourceUpdate = prepareSourceUpdate(stored, input);
+        configuredSource = sourceUpdate.source;
+        await transaction
+          .update(schema.customWidgetDefinitions)
+          .set(sourceUpdate.definitionChanges)
+          .where(eq(schema.customWidgetDefinitions.id, input.definitionId));
+        if (sourceUpdate.bindingChanged) {
+          await transaction
+            .delete(schema.customWidgetSecrets)
+            .where(
+              and(
+                eq(schema.customWidgetSecrets.definitionId, input.definitionId),
+                eq(schema.customWidgetSecrets.sourceId, input.sourceId),
+              ),
+            );
+        }
+        for (const secret of secretRows) {
+          await transaction
+            .delete(schema.customWidgetSecrets)
+            .where(
+              and(
+                eq(schema.customWidgetSecrets.definitionId, input.definitionId),
+                eq(schema.customWidgetSecrets.sourceId, input.sourceId),
+                eq(schema.customWidgetSecrets.kind, secret.kind),
+              ),
+            );
+          await transaction.insert(schema.customWidgetSecrets).values(secret);
+        }
+      });
+    },
+    handleSync(database) {
+      database.transaction(
+        (transaction) => {
+          const stored = transaction
+            .select()
+            .from(customWidgetDefinitions)
+            .where(eq(customWidgetDefinitions.id, input.definitionId))
+            .limit(1)
+            .get();
+          const sourceUpdate = prepareSourceUpdate(stored, input);
+          configuredSource = sourceUpdate.source;
+          transaction
+            .update(customWidgetDefinitions)
+            .set(sourceUpdate.definitionChanges)
+            .where(eq(customWidgetDefinitions.id, input.definitionId))
+            .run();
+          if (sourceUpdate.bindingChanged) {
+            transaction
+              .delete(customWidgetSecrets)
+              .where(
+                and(
+                  eq(customWidgetSecrets.definitionId, input.definitionId),
+                  eq(customWidgetSecrets.sourceId, input.sourceId),
+                ),
+              )
+              .run();
+          }
+          for (const secret of secretRows) {
+            transaction
+              .delete(customWidgetSecrets)
+              .where(
+                and(
+                  eq(customWidgetSecrets.definitionId, input.definitionId),
+                  eq(customWidgetSecrets.sourceId, input.sourceId),
+                  eq(customWidgetSecrets.kind, secret.kind),
+                ),
+              )
+              .run();
+            transaction.insert(customWidgetSecrets).values(secret).run();
+          }
+        },
+        { behavior: "immediate" },
+      );
+    },
+  });
+  if (!configuredSource) throw new TRPCError({ code: "INTERNAL_SERVER_ERROR" });
+  return configuredSource;
+}
+
+function prepareSourceUpdate(
+  stored: Parameters<typeof parseStoredCustomWidgetDefinition>[0] | undefined,
+  input: ConfigureCustomWidgetSourceInput,
+) {
+  if (!stored) throw new SourceConfigurationError("definition-not-found");
+  const definition = parseStoredCustomWidgetDefinition(stored);
+  const previousSource = definition.sources[input.sourceId];
+  if (!previousSource) throw new SourceConfigurationError("source-not-found");
+  if (input.expectedSource && !hasSameCustomWidgetSourceAuthentication(previousSource, input.expectedSource)) {
+    throw new SourceConfigurationError("binding-changed");
+  }
+  const source = customWidgetSourceSchema.parse({
+    ...previousSource,
+    baseUrl: input.baseUrl,
+    networkScope: input.networkScope ?? previousSource.networkScope,
+  });
+  assertSecretSources({ [input.sourceId]: source }, input.secrets);
+  return {
+    source,
+    bindingChanged: !hasSameSecretBinding(previousSource, source),
+    definitionChanges: {
+      ...serializeCustomWidgetDefinition({
+        ...definition,
+        sources: { ...definition.sources, [input.sourceId]: source },
+      }),
+      updatedAt: new Date(),
+    },
+  };
+}
+
+export async function clearCustomWidgetSecret(
+  db: Database,
+  input: {
+    definitionId: string;
+    sourceId: string;
+    kind: CustomWidgetSecretKind;
+  },
+) {
+  const updatedAt = new Date();
+  await handleTransactionsAsync(db, {
+    async handleAsync(database, schema) {
+      await database.transaction(async (transaction) => {
+        await transaction
+          .delete(schema.customWidgetSecrets)
+          .where(
+            and(
+              eq(schema.customWidgetSecrets.definitionId, input.definitionId),
+              eq(schema.customWidgetSecrets.sourceId, input.sourceId),
+              eq(schema.customWidgetSecrets.kind, input.kind),
+            ),
+          );
+        await transaction
+          .update(schema.customWidgetDefinitions)
+          .set({ updatedAt })
+          .where(eq(schema.customWidgetDefinitions.id, input.definitionId));
+      });
+    },
+    handleSync(database) {
+      database.transaction((transaction) => {
+        transaction
+          .delete(customWidgetSecrets)
+          .where(
+            and(
+              eq(customWidgetSecrets.definitionId, input.definitionId),
+              eq(customWidgetSecrets.sourceId, input.sourceId),
+              eq(customWidgetSecrets.kind, input.kind),
+            ),
+          )
+          .run();
+        transaction
+          .update(customWidgetDefinitions)
+          .set({ updatedAt })
+          .where(eq(customWidgetDefinitions.id, input.definitionId))
+          .run();
+      });
+    },
+  });
+}
diff --git a/packages/api/src/router/custom-widget/secret-policy.ts b/packages/api/src/router/custom-widget/secret-policy.ts
new file mode 100644
index 000000000..d6ed86e6b
--- /dev/null
+++ b/packages/api/src/router/custom-widget/secret-policy.ts
@@ -0,0 +1,41 @@
+import { TRPCError } from "@trpc/server";
+
+import {
+  getCustomWidgetRequiredSecretKinds,
+  hasSameCustomWidgetSourceAuthentication,
+} from "@homarr/custom-widgets/core";
+import type { CustomWidgetSource } from "@homarr/custom-widgets/core";
+
+export function requiredSecretKinds(authType: string) {
+  return getCustomWidgetRequiredSecretKinds(authType as Parameters<typeof getCustomWidgetRequiredSecretKinds>[0]);
+}
+
+/**
+ * Credentials may only survive edits that preserve their complete security
+ * boundary. The path is intentionally excluded: credentials are scoped to an
+ * origin, while the network scope and auth destination are part of the binding.
+ */
+export function hasSameSecretBinding(left: CustomWidgetSource, right: CustomWidgetSource) {
+  return (
+    new URL(left.baseUrl).origin === new URL(right.baseUrl).origin &&
+    left.networkScope === right.networkScope &&
+    hasSameCustomWidgetSourceAuthentication(left, right)
+  );
+}
+
+export function assertSecretSources(
+  sources: Record<string, { auth: string | { type: string } }>,
+  secrets: readonly { sourceId: string; kind: "apiKey" | "username" | "password" }[],
+) {
+  const invalid = secrets.find((secret) => {
+    const source = sources[secret.sourceId];
+    const authType = typeof source?.auth === "string" ? source.auth : source?.auth.type;
+    return !source || !authType || !new Set<string>(requiredSecretKinds(authType)).has(secret.kind);
+  });
+  if (invalid) {
+    throw new TRPCError({
+      code: "BAD_REQUEST",
+      message: `Secret does not match source '${invalid.sourceId}' authentication`,
+    });
+  }
+}
diff --git a/packages/api/src/router/custom-widget/secret-procedures.ts b/packages/api/src/router/custom-widget/secret-procedures.ts
new file mode 100644
index 000000000..8e0e6db58
--- /dev/null
+++ b/packages/api/src/router/custom-widget/secret-procedures.ts
@@ -0,0 +1,178 @@
+import { TRPCError } from "@trpc/server";
+import { z } from "zod/v4";
+
+import { eq } from "@homarr/db";
+import { customWidgetDefinitions } from "@homarr/db/schema";
+import {
+  customWidgetSecretInputSchema,
+  customWidgetSecretsInputSchema,
+  customWidgetSourceSchema,
+} from "@homarr/custom-widgets/core";
+import type { CustomWidgetSource } from "@homarr/custom-widgets/core";
+
+import { permissionRequiredProcedure } from "../../trpc";
+import {
+  createCustomWidgetConfigurationRequest,
+  getCustomWidgetConfigurationRequestForUser,
+} from "./configuration-requests";
+import { assertSecretSources, requiredSecretKinds } from "./secret-policy";
+import { clearCustomWidgetSecret, configureCustomWidgetSource, setCustomWidgetSecret } from "./secret-persistence";
+import { getPreviewSession } from "./preview-sessions";
+import { parseStoredCustomWidgetDefinition } from "./stored-definition";
+
+const secretRequestInputSchema = z
+  .object({
+    requestId: z.string().optional(),
+    definitionId: z.string().optional(),
+    previewSessionId: z.string().optional(),
+    sourceId: z.string().optional(),
+  })
+  .superRefine((input, ctx) => {
+    if (input.requestId) {
+      if (input.definitionId || input.previewSessionId || input.sourceId) {
+        ctx.addIssue({ code: "custom", message: "Status checks only accept requestId" });
+      }
+      return;
+    }
+    if (Boolean(input.definitionId) === Boolean(input.previewSessionId)) {
+      ctx.addIssue({ code: "custom", message: "Provide exactly one definitionId or previewSessionId" });
+    }
+    if (!input.sourceId) ctx.addIssue({ code: "custom", message: "sourceId is required" });
+  });
+
+export const secretProcedures = {
+  secretSet: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "Set one encrypted secret for a custom widget source." } })
+    .input(z.object({ definitionId: z.string(), secret: customWidgetSecretInputSchema }))
+    .mutation(async ({ ctx, input }) => {
+      const existing = await ctx.db.query.customWidgetDefinitions.findFirst({
+        where: eq(customWidgetDefinitions.id, input.definitionId),
+      });
+      if (!existing) throw new TRPCError({ code: "NOT_FOUND" });
+      const definition = parseStoredCustomWidgetDefinition(existing);
+      assertSecretSources(definition.sources, [input.secret]);
+      await setCustomWidgetSecret(ctx.db, input.definitionId, input.secret);
+      return { sourceId: input.secret.sourceId, kind: input.secret.kind, isSet: true };
+    }),
+
+  sourceConfigure: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "Configure one custom widget API source and its credentials." } })
+    .input(
+      z.object({
+        definitionId: z.string(),
+        sourceId: z.string(),
+        baseUrl: z.string(),
+        networkScope: z.enum(["public", "private", "loopback"]).optional(),
+        secrets: customWidgetSecretsInputSchema.default([]),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const stored = await ctx.db.query.customWidgetDefinitions.findFirst({
+        where: eq(customWidgetDefinitions.id, input.definitionId),
+      });
+      if (!stored) throw new TRPCError({ code: "NOT_FOUND" });
+      const definition = parseStoredCustomWidgetDefinition(stored);
+      const current = definition.sources[input.sourceId];
+      if (!current) throw new TRPCError({ code: "NOT_FOUND", message: "Widget source not found" });
+      const source = customWidgetSourceSchema.parse({
+        ...current,
+        baseUrl: input.baseUrl,
+        networkScope: input.networkScope ?? current.networkScope,
+      });
+      assertSecretSources({ [input.sourceId]: source }, input.secrets);
+      const configuredSource = await configureCustomWidgetSource(ctx.db, {
+        definitionId: input.definitionId,
+        sourceId: input.sourceId,
+        baseUrl: source.baseUrl,
+        networkScope: input.networkScope,
+        secrets: input.secrets,
+      });
+      return {
+        definitionId: input.definitionId,
+        sourceId: input.sourceId,
+        baseUrl: configuredSource.baseUrl,
+        networkScope: configuredSource.networkScope,
+        configuredSecrets: input.secrets.map(({ kind }) => kind),
+      };
+    }),
+
+  configurationRequestUser: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "Create or check a short-lived user source-configuration request." } })
+    .input(secretRequestInputSchema)
+    .mutation(async ({ ctx, input }) => {
+      if (input.requestId) {
+        const request = await getCustomWidgetConfigurationRequestForUser(input.requestId, ctx.session.user.id);
+        if (!request) throw new TRPCError({ code: "NOT_FOUND" });
+        return { requestId: request.id, status: request.status, expiresAt: request.expiresAt };
+      }
+
+      let widgetName: string;
+      let source: { id: string; name: string; auth: string | { type: string }; value: CustomWidgetSource } | undefined;
+      let target: { type: "definition"; id: string } | { type: "preview"; id: string };
+      if (input.definitionId) {
+        const stored = await ctx.db.query.customWidgetDefinitions.findFirst({
+          where: eq(customWidgetDefinitions.id, input.definitionId),
+        });
+        if (!stored) throw new TRPCError({ code: "NOT_FOUND" });
+        const definition = parseStoredCustomWidgetDefinition(stored);
+        widgetName = definition.name;
+        const candidate = definition.sources[input.sourceId ?? ""];
+        source = candidate
+          ? {
+              id: input.sourceId ?? "",
+              name: candidate.name ?? input.sourceId ?? "",
+              auth: candidate.auth,
+              value: candidate,
+            }
+          : undefined;
+        target = { type: "definition", id: input.definitionId };
+      } else {
+        const preview = await getPreviewSession(input.previewSessionId ?? "", ctx.session.user.id);
+        widgetName = preview.name;
+        const candidate = preview.sources[input.sourceId ?? ""];
+        source = candidate
+          ? {
+              id: input.sourceId ?? "",
+              name: candidate.name ?? input.sourceId ?? "",
+              auth: candidate.auth,
+              value: candidate,
+            }
+          : undefined;
+        target = { type: "preview", id: preview.id };
+      }
+      if (!source) throw new TRPCError({ code: "NOT_FOUND", message: "Widget source not found" });
+      const kinds = [...requiredSecretKinds(typeof source.auth === "string" ? source.auth : source.auth.type)];
+      const request = await createCustomWidgetConfigurationRequest({
+        userId: ctx.session.user.id,
+        target,
+        widgetName,
+        sourceId: source.id,
+        sourceName: source.name,
+        source: source.value,
+        kinds,
+      });
+      return {
+        requestId: request.id,
+        status: request.status,
+        expiresAt: request.expiresAt,
+        url: new URL(`/custom-widget-configuration/${request.id}`, ctx.baseUrl ?? "http://localhost").toString(),
+      };
+    }),
+
+  secretClear: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(
+      z.object({ definitionId: z.string(), sourceId: z.string(), kind: z.enum(["apiKey", "username", "password"]) }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const existing = await ctx.db.query.customWidgetDefinitions.findFirst({
+        where: eq(customWidgetDefinitions.id, input.definitionId),
+      });
+      if (!existing) throw new TRPCError({ code: "NOT_FOUND" });
+      await clearCustomWidgetSecret(ctx.db, input);
+      return { sourceId: input.sourceId, kind: input.kind, isSet: false };
+    }),
+};
diff --git a/packages/api/src/router/custom-widget/stored-definition.ts b/packages/api/src/router/custom-widget/stored-definition.ts
new file mode 100644
index 000000000..a810b8dbc
--- /dev/null
+++ b/packages/api/src/router/custom-widget/stored-definition.ts
@@ -0,0 +1,67 @@
+import { parse as parseSuperJson, stringify as stringifySuperJson } from "superjson";
+
+import { customWidgetDefinitionSchema } from "@homarr/custom-widgets/core";
+import type { HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
+import type { CustomWidgetDefinition } from "@homarr/db/schema";
+
+type StoredCustomWidgetDefinition = Pick<
+  CustomWidgetDefinition,
+  "name" | "description" | "iconUrl" | "sources" | "requests" | "options" | "template"
+>;
+
+export interface StoredCustomWidgetIssue {
+  path?: string;
+  message: string;
+}
+
+export type StoredCustomWidgetParseResult =
+  | { success: true; widget: HomarrCustomWidgetV2 }
+  | { success: false; issues: StoredCustomWidgetIssue[] };
+
+export function serializeCustomWidgetDefinition(definition: HomarrCustomWidgetV2) {
+  return {
+    name: definition.name,
+    description: definition.description ?? null,
+    iconUrl: definition.iconUrl ?? null,
+    sources: stringifySuperJson(definition.sources),
+    requests: stringifySuperJson(definition.requests),
+    options: stringifySuperJson(definition.options),
+    template: definition.template,
+  };
+}
+
+export function parseStoredCustomWidgetDefinition(definition: StoredCustomWidgetDefinition): HomarrCustomWidgetV2 {
+  return customWidgetDefinitionSchema.parse({
+    $schema: "homarr-custom-widget-v2",
+    name: definition.name,
+    description: definition.description ?? undefined,
+    iconUrl: definition.iconUrl ?? undefined,
+    sources: parseSuperJson(definition.sources),
+    requests: parseSuperJson(definition.requests),
+    options: parseSuperJson(definition.options),
+    template: definition.template,
+  });
+}
+
+export function safeParseStoredCustomWidgetDefinition(
+  definition: StoredCustomWidgetDefinition,
+): StoredCustomWidgetParseResult {
+  try {
+    return { success: true, widget: parseStoredCustomWidgetDefinition(definition) };
+  } catch (error) {
+    if (error instanceof Error && "issues" in error && Array.isArray(error.issues)) {
+      return {
+        success: false,
+        issues: error.issues.slice(0, 10).map((issue: { path?: PropertyKey[]; message?: unknown }) => ({
+          path: issue.path?.map(String).join("."),
+          message: typeof issue.message === "string" ? issue.message : "Invalid stored widget value",
+        })),
+      };
+    }
+
+    return {
+      success: false,
+      issues: [{ message: "Stored widget data could not be read" }],
+    };
+  }
+}
diff --git a/packages/api/src/router/custom-widget/template-procedures.ts b/packages/api/src/router/custom-widget/template-procedures.ts
new file mode 100644
index 000000000..3893936ae
--- /dev/null
+++ b/packages/api/src/router/custom-widget/template-procedures.ts
@@ -0,0 +1,151 @@
+import { createHash } from "node:crypto";
+
+import { TRPCError } from "@trpc/server";
+import { z } from "zod/v4";
+
+import { createLogger } from "@homarr/core/infrastructure/logs";
+import { customWidgetDefinitionSchema } from "@homarr/custom-widgets/core";
+import { and, eq } from "@homarr/db";
+import { customWidgetDefinitions } from "@homarr/db/schema";
+
+import { permissionRequiredProcedure } from "../../trpc";
+import { parseStoredCustomWidgetDefinition } from "./stored-definition";
+
+const logger = createLogger({ module: "custom-widget" });
+
+const getTemplateRevision = (template: string) => createHash("sha256").update(template).digest("hex").slice(0, 16);
+
+const validateTemplate = (definition: ReturnType<typeof parseStoredCustomWidgetDefinition>, template: string) => {
+  if (template.trim().length === 0) {
+    throw new TRPCError({ code: "BAD_REQUEST", message: "Template must not be empty" });
+  }
+  const result = customWidgetDefinitionSchema.safeParse({ ...definition, template });
+  if (!result.success) {
+    throw new TRPCError({
+      code: "BAD_REQUEST",
+      message: result.error.issues
+        .map((issue) => `${issue.path.map(String).join(".") || "template"}: ${issue.message}`)
+        .join("; "),
+    });
+  }
+  return result.data.template;
+};
+
+export const templateProcedures = {
+  readTemplate: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(z.object({ id: z.string() }))
+    .query(async ({ ctx, input }) => {
+      const definition = await ctx.db.query.customWidgetDefinitions.findFirst({
+        where: eq(customWidgetDefinitions.id, input.id),
+      });
+      if (!definition) throw new TRPCError({ code: "NOT_FOUND", message: "Custom widget definition not found" });
+      const template = parseStoredCustomWidgetDefinition(definition).template;
+      return {
+        id: definition.id,
+        name: definition.name,
+        template,
+        templateLines: template.split("\n"),
+        revision: getTemplateRevision(template),
+      };
+    }),
+
+  writeTemplate: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(
+      z
+        .object({ id: z.string(), template: z.string().optional(), templateLines: z.array(z.string()).optional() })
+        .refine((data) => data.template !== undefined || data.templateLines !== undefined, {
+          message: "Provide either template or templateLines",
+        })
+        .refine((data) => !(data.template !== undefined && data.templateLines !== undefined), {
+          message: "Provide template or templateLines, not both",
+        }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const resolved = input.templateLines?.join("\n") ?? input.template ?? "";
+      const existing = await ctx.db.query.customWidgetDefinitions.findFirst({
+        where: eq(customWidgetDefinitions.id, input.id),
+      });
+      if (!existing) throw new TRPCError({ code: "NOT_FOUND", message: "Custom widget definition not found" });
+      const template = validateTemplate(parseStoredCustomWidgetDefinition(existing), resolved);
+      await ctx.db
+        .update(customWidgetDefinitions)
+        .set({ template, updatedAt: new Date() })
+        .where(eq(customWidgetDefinitions.id, input.id));
+      logger.info("Updated custom widget template", { id: input.id });
+      return { id: input.id, template, templateLines: template.split("\n"), revision: getTemplateRevision(template) };
+    }),
+
+  templatePatch: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "Patch selected JSX template lines using an optimistic revision." } })
+    .input(
+      z.object({
+        id: z.string(),
+        expectedRevision: z.string().length(16),
+        edits: z
+          .array(
+            z.object({
+              startLine: z.number().int().min(1),
+              deleteCount: z.number().int().min(0),
+              replacementLines: z.array(z.string()),
+            }),
+          )
+          .min(1)
+          .max(100),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const existing = await ctx.db.query.customWidgetDefinitions.findFirst({
+        where: eq(customWidgetDefinitions.id, input.id),
+      });
+      if (!existing) throw new TRPCError({ code: "NOT_FOUND", message: "Custom widget definition not found" });
+      const definition = parseStoredCustomWidgetDefinition(existing);
+      if (getTemplateRevision(definition.template) !== input.expectedRevision) {
+        throw new TRPCError({
+          code: "CONFLICT",
+          message: "Template changed since it was read. Read it again and retry.",
+        });
+      }
+
+      const lines = definition.template.split("\n");
+      const edits = input.edits.toSorted((left, right) => right.startLine - left.startLine);
+      let nextHigherStart = lines.length + 2;
+      for (const edit of edits) {
+        if (edit.startLine > lines.length + 1 || edit.startLine + edit.deleteCount - 1 > lines.length) {
+          throw new TRPCError({ code: "BAD_REQUEST", message: `Edit at line ${edit.startLine} is out of range` });
+        }
+        if (edit.startLine + Math.max(edit.deleteCount, 1) > nextHigherStart) {
+          throw new TRPCError({ code: "BAD_REQUEST", message: "Template patch edits must not overlap" });
+        }
+        nextHigherStart = edit.startLine;
+        lines.splice(edit.startLine - 1, edit.deleteCount, ...edit.replacementLines);
+      }
+
+      const template = validateTemplate(definition, lines.join("\n"));
+      const updateResult = (await ctx.db
+        .update(customWidgetDefinitions)
+        .set({ template, updatedAt: new Date() })
+        .where(
+          and(eq(customWidgetDefinitions.id, input.id), eq(customWidgetDefinitions.template, definition.template)),
+        )) as unknown;
+      if (getAffectedRowCount(updateResult) === 0) {
+        throw new TRPCError({
+          code: "CONFLICT",
+          message: "Template changed since it was read. Read it again and retry.",
+        });
+      }
+      logger.info("Patched custom widget template", { id: input.id, editCount: input.edits.length });
+      return { id: input.id, template, templateLines: lines, revision: getTemplateRevision(template) };
+    }),
+};
+
+function getAffectedRowCount(result: unknown): number {
+  if (Array.isArray(result)) return getAffectedRowCount(result[0]);
+  if (!result || typeof result !== "object") return 0;
+  if ("affectedRows" in result && typeof result.affectedRows === "number") return result.affectedRows;
+  if ("rowCount" in result && typeof result.rowCount === "number") return result.rowCount;
+  if ("changes" in result && typeof result.changes === "number") return result.changes;
+  return 0;
+}
diff --git a/packages/api/src/router/custom-widget/transfer-procedures.ts b/packages/api/src/router/custom-widget/transfer-procedures.ts
new file mode 100644
index 000000000..4be5619d9
--- /dev/null
+++ b/packages/api/src/router/custom-widget/transfer-procedures.ts
@@ -0,0 +1,141 @@
+import { TRPCError } from "@trpc/server";
+import { z } from "zod/v4";
+
+import { encryptSecret } from "@homarr/common/server";
+import { createLogger } from "@homarr/core/infrastructure/logs";
+import { eq, handleTransactionsAsync } from "@homarr/db";
+import { customWidgetDefinitions, customWidgetSecrets, legacyCustomWidgetDefinitions } from "@homarr/db/schema";
+import { customWidgetImportSchema, customWidgetSecretsInputSchema } from "@homarr/custom-widgets/core";
+
+import { insertCustomWidgetDefinition } from "./definition-insert";
+import { permissionRequiredProcedure } from "../../trpc";
+import { assertSecretSources, requiredSecretKinds } from "./secret-policy";
+import { parseStoredCustomWidgetDefinition, serializeCustomWidgetDefinition } from "./stored-definition";
+
+const logger = createLogger({ module: "custom-widget" });
+
+export const transferProcedures = {
+  export: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(z.object({ id: z.string() }))
+    .query(async ({ ctx, input }) => {
+      const definition = await ctx.db.query.customWidgetDefinitions.findFirst({
+        where: eq(customWidgetDefinitions.id, input.id),
+      });
+      if (!definition) throw new TRPCError({ code: "NOT_FOUND" });
+      return parseStoredCustomWidgetDefinition(definition);
+    }),
+
+  import: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(z.object({ widget: customWidgetImportSchema, secrets: customWidgetSecretsInputSchema.default([]) }))
+    .mutation(async ({ ctx, input }) => {
+      assertSecretSources(input.widget.sources, input.secrets);
+      const id = await insertCustomWidgetDefinition(ctx.db, input.widget, ctx.session.user.id, input.secrets);
+      logger.info("Imported custom widget definition", { id, name: input.widget.name });
+      return { id };
+    }),
+
+  migrateLegacy: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({
+      mcp: {
+        enabled: true,
+        description:
+          "Replace one preserved legacy Custom Widget with a validated v2 definition while retaining compatible encrypted credentials.",
+      },
+    })
+    .input(
+      z.object({
+        id: z.string(),
+        widget: customWidgetImportSchema,
+        secrets: customWidgetSecretsInputSchema.default([]),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      assertSecretSources(input.widget.sources, input.secrets);
+      const [legacy, current] = await Promise.all([
+        ctx.db.query.legacyCustomWidgetDefinitions.findFirst({
+          where: eq(legacyCustomWidgetDefinitions.id, input.id),
+          with: { secrets: true },
+        }),
+        ctx.db.query.customWidgetDefinitions.findFirst({ where: eq(customWidgetDefinitions.id, input.id) }),
+      ]);
+      if (!legacy) throw new TRPCError({ code: "NOT_FOUND", message: "Legacy custom widget not found" });
+      if (current) throw new TRPCError({ code: "CONFLICT", message: "A v2 widget already uses this identifier" });
+
+      const explicitKeys = new Set(input.secrets.map(({ sourceId, kind }) => `${sourceId}:${kind}`));
+      const preservableKinds = new Set<string>(requiredSecretKinds(getAuthType(input.widget.sources.default?.auth)));
+      const preservedSecrets = canPreserveLegacySecrets(legacy, input.widget)
+        ? legacy.secrets.filter(({ kind }) => preservableKinds.has(kind) && !explicitKeys.has(`default:${kind}`))
+        : [];
+      const now = new Date();
+      const definitionRow = {
+        id: legacy.id,
+        ...serializeCustomWidgetDefinition(input.widget),
+        enabled: legacy.enabled,
+        createdAt: legacy.createdAt,
+        updatedAt: now,
+        creatorId: legacy.creatorId,
+      };
+      const secretRows = [
+        ...preservedSecrets.map(({ kind, encryptedValue }) => ({
+          definitionId: legacy.id,
+          sourceId: "default",
+          kind,
+          encryptedValue,
+          updatedAt: now,
+        })),
+        ...input.secrets.map(({ sourceId, kind, value }) => ({
+          definitionId: legacy.id,
+          sourceId,
+          kind,
+          encryptedValue: encryptSecret(value),
+          updatedAt: now,
+        })),
+      ];
+
+      await handleTransactionsAsync(ctx.db, {
+        async handleAsync(database, schema) {
+          await database.transaction(async (transaction) => {
+            await transaction.insert(schema.customWidgetDefinitions).values(definitionRow);
+            if (secretRows.length > 0) await transaction.insert(schema.customWidgetSecrets).values(secretRows);
+          });
+        },
+        handleSync(database) {
+          database.transaction((transaction) => {
+            transaction.insert(customWidgetDefinitions).values(definitionRow).run();
+            if (secretRows.length > 0) transaction.insert(customWidgetSecrets).values(secretRows).run();
+          });
+        },
+      });
+      logger.info("Created v2 replacement for preserved legacy custom widget definition", {
+        id: legacy.id,
+        preservedSecretCount: preservedSecrets.length,
+      });
+      return { id: legacy.id, preservedSecretCount: preservedSecrets.length };
+    }),
+};
+
+function canPreserveLegacySecrets(
+  legacy: typeof legacyCustomWidgetDefinitions.$inferSelect,
+  widget: z.infer<typeof customWidgetImportSchema>,
+) {
+  const source = widget.sources.default;
+  if (!source || getAuthType(source.auth) !== legacy.authType) return false;
+  if (getOrigin(source.baseUrl) !== getOrigin(legacy.url)) return false;
+  const headerName = typeof source.auth === "object" && "name" in source.auth ? source.auth.name : undefined;
+  return headerName === (legacy.headerName ?? undefined);
+}
+
+function getAuthType(auth: string | { type: string } | undefined) {
+  return typeof auth === "string" ? auth : (auth?.type ?? "none");
+}
+
+function getOrigin(value: string) {
+  try {
+    return new URL(value).origin.toLowerCase();
+  } catch {
+    return null;
+  }
+}
diff --git a/packages/api/src/router/custom-widget/workshop-procedures.ts b/packages/api/src/router/custom-widget/workshop-procedures.ts
new file mode 100644
index 000000000..703b012f7
--- /dev/null
+++ b/packages/api/src/router/custom-widget/workshop-procedures.ts
@@ -0,0 +1,181 @@
+import { TRPCError } from "@trpc/server";
+import { z } from "zod/v4";
+
+import {
+  applyCustomWidgetSourceSetup,
+  CUSTOM_WIDGET_SCHEMA,
+  customWidgetDefinitionSchema,
+  customWidgetIdentifierSchema,
+  customWidgetSecretsInputSchema,
+  getCustomWidgetSecretRequirements,
+  getCustomWidgetSourceSetups,
+} from "@homarr/custom-widgets/core";
+import { createLogger } from "@homarr/core/infrastructure/logs";
+import { WorkshopBackend } from "@homarr/workshop/backend";
+import { resolveHomarrUrlConfig, validateWorkshopWidget } from "@homarr/workshop/schema";
+
+import { env } from "../../env";
+import { permissionRequiredProcedure } from "../../trpc";
+import { insertCustomWidgetDefinition } from "./definition-insert";
+import { assertSecretSources } from "./secret-policy";
+
+const logger = createLogger({ module: "custom-widget:workshop" });
+const workshopUrls = resolveHomarrUrlConfig({
+  homarrWebsiteUrl: env.HOMARR_WEBSITE_URL,
+  workshopApiUrl: env.WORKSHOP_API_URL,
+});
+const workshop = new WorkshopBackend(workshopUrls.workshopApiUrl);
+
+function throwWorkshopUnavailable(
+  message: string,
+  event: "workshop_widget_lookup_failed" | "workshop_widget_search_failed",
+): never {
+  logger.error(message, {
+    event,
+    errorName: "WorkshopBackendError",
+  });
+  throw new TRPCError({
+    code: "BAD_GATEWAY",
+    message: "Workshop is unavailable",
+  });
+}
+
+async function getWorkshopWidget(submissionId: string) {
+  try {
+    const submission = await workshop.get(submissionId);
+    if (submission.type !== "customWidget" || submission.widgetSchema !== CUSTOM_WIDGET_SCHEMA) {
+      throw new TRPCError({
+        code: "BAD_REQUEST",
+        message: "Workshop submission is not a compatible Custom JSX widget",
+      });
+    }
+    const validation = validateWorkshopWidget(submission.content);
+    if (!validation.success) {
+      throw new TRPCError({ code: "BAD_REQUEST", message: validation.error });
+    }
+    return { submission, widget: validation.data };
+  } catch (error) {
+    if (error instanceof TRPCError) throw error;
+    throwWorkshopUnavailable("Workshop widget lookup failed", "workshop_widget_lookup_failed");
+  }
+}
+
+const workshopSearchInputSchema = z.object({
+  query: z.string().trim().min(1).max(200),
+  sort: z.enum(["top", "newest", "recent", "discussed"]).default("top"),
+  limit: z.number().int().min(1).max(20).default(10),
+});
+
+const sourceOverridesSchema = z.record(
+  customWidgetIdentifierSchema,
+  z.strictObject({
+    baseUrl: z.string(),
+    networkScope: z.enum(["public", "private", "loopback"]).optional(),
+  }),
+);
+
+export const workshopProcedures = {
+  workshopSearch: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "Search Workshop for Custom JSX widgets." } })
+    .input(workshopSearchInputSchema)
+    .query(async ({ input }) => {
+      try {
+        const result = await workshop.list({
+          page: 1,
+          perPage: input.limit,
+          search: input.query,
+          sort: input.sort,
+          type: "customWidget",
+          includeOutdated: true,
+        });
+        return {
+          items: result.items
+            .filter((item) => item.widgetSchema === CUSTOM_WIDGET_SCHEMA)
+            .map((item) => ({
+              id: item.id,
+              title: item.title,
+              description: item.description,
+              authorName: item.authorName,
+              score: item.score,
+              revision: item.revision,
+              outdated: item.outdated,
+              reportCount: item.reportCount,
+            })),
+        };
+      } catch {
+        throwWorkshopUnavailable("Workshop widget search failed", "workshop_widget_search_failed");
+      }
+    }),
+
+  workshopGet: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "Get and validate one Workshop Custom JSX widget." } })
+    .input(z.object({ submissionId: z.string().min(1) }))
+    .query(async ({ input }) => {
+      const { submission, widget } = await getWorkshopWidget(input.submissionId);
+      return {
+        submission: {
+          id: submission.id,
+          title: submission.title,
+          description: submission.description,
+          authorName: submission.authorName,
+          revision: submission.revision,
+          score: submission.score,
+          outdated: submission.outdated,
+          reportCount: submission.reportCount,
+        },
+        widget,
+        sourceSetup: getCustomWidgetSourceSetups(widget.sources),
+        hasActions: Object.values(widget.requests).some((request) => request.kind === "action"),
+        methods: [...new Set(Object.values(widget.requests).map((request) => request.method))],
+        permissions: [...new Set(Object.values(widget.requests).map((request) => request.permission))],
+      };
+    }),
+
+  workshopInstall: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .meta({ mcp: { enabled: true, description: "Install one validated Workshop Custom JSX widget." } })
+    .input(
+      z.object({
+        submissionId: z.string().min(1),
+        name: z.string().trim().min(1).max(128).optional(),
+        sources: sourceOverridesSchema.default({}),
+        secrets: customWidgetSecretsInputSchema.default([]),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const { widget } = await getWorkshopWidget(input.submissionId);
+      const unknownSource = Object.keys(input.sources).find((sourceId) => !widget.sources[sourceId]);
+      if (unknownSource) {
+        throw new TRPCError({ code: "BAD_REQUEST", message: `Unknown Workshop widget source '${unknownSource}'` });
+      }
+      const configured = customWidgetDefinitionSchema.parse({
+        ...widget,
+        name: input.name ?? widget.name,
+        sources: applyCustomWidgetSourceSetup(
+          widget.sources,
+          Object.fromEntries(
+            Object.entries(input.sources).map(([sourceId, source]) => [
+              sourceId,
+              {
+                baseUrl: source.baseUrl,
+                networkScope: source.networkScope ?? widget.sources[sourceId]?.networkScope ?? "public",
+              },
+            ]),
+          ),
+        ),
+      });
+      assertSecretSources(configured.sources, input.secrets);
+      const id = await insertCustomWidgetDefinition(ctx.db, configured, ctx.session.user.id, input.secrets);
+      const configuredSecrets = new Set(input.secrets.map((secret) => `${secret.sourceId}:${secret.kind}`));
+      return {
+        status: "installed" as const,
+        definitionId: id,
+        sourceSetup: getCustomWidgetSourceSetups(configured.sources, input.secrets),
+        missingCredentials: getCustomWidgetSecretRequirements(configured.sources)
+          .filter((requirement) => !configuredSecrets.has(`${requirement.sourceId}:${requirement.kind}`))
+          .map(({ sourceId, kind }) => ({ sourceId, kind })),
+      };
+    }),
+};
diff --git a/packages/api/src/router/location.ts b/packages/api/src/router/location.ts
index 99bb9c3af..050d66cb4 100644
--- a/packages/api/src/router/location.ts
+++ b/packages/api/src/router/location.ts
@@ -37,11 +37,10 @@ export const locationRouter = createTRPCRouter({
     .input(locationSearchCityInput)
     .output(locationSearchCityOutput)
     .query(async ({ input }) => {
+      const url = new URL("https://geocoding-api.open-meteo.com/v1/search");
+      url.searchParams.set("name", input.query);
       const res = await withTimeoutAsync(async (signal) => {
-        return await fetchWithTrustedCertificatesAsync(
-          `https://geocoding-api.open-meteo.com/v1/search?name=${input.query}`,
-          { signal },
-        );
+        return await fetchWithTrustedCertificatesAsync(url.toString(), { signal });
       });
       return (await res.json()) as z.infer<typeof locationSearchCityOutput>;
     }),
diff --git a/packages/api/src/router/onboard/onboard-router.ts b/packages/api/src/router/onboard/onboard-router.ts
index 4f43a9533..c195c9815 100644
--- a/packages/api/src/router/onboard/onboard-router.ts
+++ b/packages/api/src/router/onboard/onboard-router.ts
@@ -294,9 +294,7 @@ export const onboardRouter = createTRPCRouter({
     }
 
     const section = board.sections.find((boardSection) => boardSection.kind === "empty");
-    const layout = board.layouts[0];
-
-    if (section && layout) {
+    if (section && board.layouts.length > 0) {
       const existingItems = await db.query.items.findMany({
         where: eq(items.boardId, board.id),
       });
@@ -310,12 +308,12 @@ export const onboardRouter = createTRPCRouter({
 
       await placeAllWidgetsAsync(
         db,
-        {
+        board.layouts.map((layout) => ({
           boardId: board.id,
           sectionId: section.id,
           layoutId: layout.id,
           columnCount: layout.columnCount,
-        },
+        })),
         allIntegrations,
         allApps,
       );
diff --git a/packages/api/src/router/query-cache.ts b/packages/api/src/router/query-cache.ts
deleted file mode 100644
index 25c9f3808..000000000
--- a/packages/api/src/router/query-cache.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { z } from "zod/v4";
-
-import { eq } from "@homarr/db";
-import { boards } from "@homarr/db/schema";
-import { removeQueryCacheAsync, setQueryCacheAsync } from "@homarr/redis";
-
-import { queryCacheDefaultGcTimeMs, queryCacheMaxValueBytes } from "../query-cache";
-import { createTRPCRouter, internalProcedure } from "../trpc";
-import { throwIfActionForbiddenAsync } from "./board/board-access";
-
-const queryCacheBoardInput = z.object({
-  boardId: z.string().min(1),
-});
-
-const queryCacheSetInput = queryCacheBoardInput.extend({
-  value: z.string().max(queryCacheMaxValueBytes * 2),
-});
-
-const validateBoardAccessAsync = async (ctx: Parameters<typeof throwIfActionForbiddenAsync>[0], boardId: string) => {
-  await throwIfActionForbiddenAsync(ctx, eq(boards.id, boardId), "view");
-};
-
-export const queryCacheRouter = createTRPCRouter({
-  setItem: internalProcedure.input(queryCacheSetInput).mutation(async ({ ctx, input }) => {
-    await validateBoardAccessAsync(ctx, input.boardId);
-    const userId = ctx.session?.user.id ?? "anonymous";
-    return {
-      stored: await setQueryCacheAsync(
-        userId,
-        input.boardId,
-        input.value,
-        queryCacheDefaultGcTimeMs,
-        queryCacheMaxValueBytes,
-      ),
-    };
-  }),
-  removeItem: internalProcedure.input(queryCacheBoardInput).mutation(async ({ ctx, input }) => {
-    await validateBoardAccessAsync(ctx, input.boardId);
-    const userId = ctx.session?.user.id ?? "anonymous";
-    await removeQueryCacheAsync(userId, input.boardId);
-  }),
-});
diff --git a/packages/api/src/router/section/section-router.ts b/packages/api/src/router/section/section-router.ts
index 81613f581..05b2c247d 100644
--- a/packages/api/src/router/section/section-router.ts
+++ b/packages/api/src/router/section/section-router.ts
@@ -1,8 +1,11 @@
 import { TRPCError } from "@trpc/server";
+import superjson from "superjson";
 import { z } from "zod/v4";
 
 import { and, eq } from "@homarr/db";
 import { sectionCollapseStates, sections } from "@homarr/db/schema";
+import { emptySuperJSON } from "@homarr/definitions";
+import { containerSectionOptionsSchema } from "@homarr/validation/shared";
 
 import { createTRPCRouter, protectedProcedure } from "../../trpc";
 
@@ -16,7 +19,7 @@ export const sectionRouter = createTRPCRouter({
     )
     .mutation(async ({ ctx, input }) => {
       const section = await ctx.db.query.sections.findFirst({
-        where: and(eq(sections.id, input.sectionId), eq(sections.kind, "category")),
+        where: eq(sections.id, input.sectionId),
         with: {
           collapseStates: {
             where: eq(sectionCollapseStates.userId, ctx.session.user.id),
@@ -31,6 +34,23 @@ export const sectionRouter = createTRPCRouter({
         });
       }
 
+      if (section.kind !== "container") {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: `Section cannot be collapsed id=${input.sectionId}`,
+        });
+      }
+
+      const rawOptions = superjson.parse(section.options ?? emptySuperJSON);
+      const parsedOptions = containerSectionOptionsSchema.safeParse(rawOptions);
+
+      if (!parsedOptions.success || !parsedOptions.data.collapsible) {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: `Section cannot be collapsed id=${input.sectionId}`,
+        });
+      }
+
       if (section.collapseStates.length === 0) {
         await ctx.db.insert(sectionCollapseStates).values({
           sectionId: section.id,
diff --git a/packages/api/src/router/test/board.spec.ts b/packages/api/src/router/test/board.spec.ts
index 6e21ac161..dbbb7f25c 100644
--- a/packages/api/src/router/test/board.spec.ts
+++ b/packages/api/src/router/test/board.spec.ts
@@ -4,7 +4,7 @@ import { describe, expect, it, test, vi } from "vitest";
 import type { Session } from "@homarr/auth";
 import { createId } from "@homarr/common";
 import type { Database, InferInsertModel } from "@homarr/db";
-import { and, eq, not } from "@homarr/db";
+import { and, eq } from "@homarr/db";
 import {
   boardGroupPermissions,
   boards,
@@ -325,10 +325,13 @@ describe("createBoard should create a new board", () => {
     expect(firstSection?.xOffset).toBe(0);
     expect(firstSection?.yOffset).toBe(0);
 
-    expect(dbBoard?.layouts.length).toBe(1);
-    const firstLayout = dbBoard?.layouts.at(0);
-    expect(firstLayout?.columnCount).toBe(24);
-    expect(firstLayout?.breakpoint).toBe(0);
+    expect(dbBoard?.layouts.length).toBe(2);
+    expect(dbBoard?.layouts).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ name: "Mobile", role: "mobile", columnCount: 3, breakpoint: 0 }),
+        expect.objectContaining({ name: "Base", role: "base", columnCount: 24, breakpoint: 768 }),
+      ]),
+    );
   });
 
   test("should throw error when user has no board-create permission", async () => {
@@ -344,6 +347,36 @@ describe("createBoard should create a new board", () => {
   });
 });
 
+describe("duplicateBoard should preserve protected layout invariants", () => {
+  test("normalizes a legacy single-layout board while preserving Base positions", async () => {
+    const db = createDb();
+    const session = {
+      ...defaultSession,
+      user: {
+        ...defaultSession.user,
+        permissions: ["board-create"] satisfies GroupPermissionKey[],
+      },
+    };
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session });
+    const { boardId } = await createFullBoardAsync(db, "source");
+
+    const result = await caller.duplicateBoard({ id: boardId, name: "copy" });
+
+    const copiedBoard = await db.query.boards.findFirst({
+      where: eq(boards.id, result.boardId),
+      with: { layouts: true, items: { with: { layouts: true } } },
+    });
+    expect(copiedBoard?.layouts).toHaveLength(2);
+    expect(copiedBoard?.layouts).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ role: "mobile", columnCount: 3, breakpoint: 0 }),
+        expect.objectContaining({ role: "base", columnCount: 10, breakpoint: 768 }),
+      ]),
+    );
+    expect(copiedBoard?.items.at(0)?.layouts).toHaveLength(2);
+  });
+});
+
 describe("rename board should rename board", () => {
   test("should rename board", async () => {
     // Arrange
@@ -569,9 +602,48 @@ describe("getBoardByName should return board by name", () => {
       name,
       ...fullBoardProps,
     });
+    expect(result.layouts).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ role: "mobile", breakpoint: 0, columnCount: 3 }),
+        expect.objectContaining({ id: fullBoardProps.layoutId, role: "base", breakpoint: 768 }),
+      ]),
+    );
+    expect(result.items.at(0)?.layouts).toHaveLength(2);
     expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "view");
   });
 
+  it("returns configured container behavior", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, sectionId: rootSectionId, layoutId } = await createFullBoardAsync(db, "default");
+    const sectionId = await addContainerAsync(db, {
+      boardId,
+      layoutId,
+      parentSectionId: rootSectionId,
+      options: {
+        title: "Media",
+        showLabel: false,
+        collapsible: true,
+        showOpenAll: true,
+      },
+    });
+
+    const result = await caller.getBoardByName({ name: "default" });
+    const section = expectToBeDefined(result.sections.find((candidate) => candidate.id === sectionId));
+
+    expect(result.id).toBe(boardId);
+    expect(section.kind).toBe("container");
+    if (section.kind === "container") {
+      expect(section.collapsed).toBe(false);
+      expect(section.options).toMatchObject({
+        title: "Media",
+        showLabel: false,
+        collapsible: true,
+        showOpenAll: true,
+      });
+    }
+  });
+
   it("should throw error when not present", async () => {
     // Arrange
     const db = createDb();
@@ -850,60 +922,194 @@ describe("saveBoard should save full board", () => {
     expect(integration).toBeUndefined();
     expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "modify");
   });
-  it.each([[{ kind: "empty" as const }], [{ kind: "category" as const, collapsed: false, name: "My first category" }]])(
-    "should add section when present in input",
-    async (partialSection) => {
-      const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
-      const db = createDb();
-      const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+  it("should add root section when present in input", async () => {
+    const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
 
-      const { boardId, sectionId } = await createFullBoardAsync(db, "default");
+    const { boardId, sectionId } = await createFullBoardAsync(db, "default");
 
-      const newSectionId = createId();
-      await caller.saveBoard({
-        id: boardId,
-        sections: [
-          {
-            id: newSectionId,
-            xOffset: 0,
-            yOffset: 1,
-            ...partialSection,
-          },
-          {
-            id: sectionId,
-            kind: "empty",
-            xOffset: 0,
-            yOffset: 0,
-          },
-        ],
-        items: [],
-      });
-
-      const board = await db.query.boards.findFirst({
-        where: eq(boards.id, boardId),
-        with: {
-          sections: true,
+    const newSectionId = createId();
+    await caller.saveBoard({
+      id: boardId,
+      sections: [
+        {
+          id: newSectionId,
+          kind: "empty",
+          xOffset: 0,
+          yOffset: 1,
         },
-      });
+        {
+          id: sectionId,
+          kind: "empty",
+          xOffset: 0,
+          yOffset: 0,
+        },
+      ],
+      items: [],
+    });
 
-      const section = await db.query.sections.findFirst({
-        where: eq(sections.id, newSectionId),
-      });
+    const board = await db.query.boards.findFirst({
+      where: eq(boards.id, boardId),
+      with: {
+        sections: true,
+      },
+    });
 
-      const definedBoard = expectToBeDefined(board);
-      expect(definedBoard.sections.length).toBe(2);
-      const addedSection = expectToBeDefined(definedBoard.sections.find((section) => section.id === newSectionId));
-      expect(addedSection).toBeDefined();
-      expect(addedSection.id).toBe(newSectionId);
-      expect(addedSection.kind).toBe(partialSection.kind);
-      expect(addedSection.yOffset).toBe(1);
-      if ("name" in partialSection) {
-        expect(addedSection.name).toBe(partialSection.name);
-      }
-      expect(section).toBeDefined();
-      expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "modify");
-    },
-  );
+    const section = await db.query.sections.findFirst({
+      where: eq(sections.id, newSectionId),
+    });
+
+    const definedBoard = expectToBeDefined(board);
+    expect(definedBoard.sections.length).toBe(2);
+    const addedSection = expectToBeDefined(definedBoard.sections.find((section) => section.id === newSectionId));
+    expect(addedSection).toBeDefined();
+    expect(addedSection.id).toBe(newSectionId);
+    expect(addedSection.kind).toBe("empty");
+    expect(addedSection.yOffset).toBe(1);
+    expect(addedSection.name).toBeNull();
+    expect(section).toBeDefined();
+    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "modify");
+  });
+  it("should add and update container behavior options", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, layoutId, sectionId: rootSectionId } = await createFullBoardAsync(db, "default");
+    const containerId = createId();
+
+    await caller.saveBoard({
+      id: boardId,
+      sections: [
+        {
+          id: rootSectionId,
+          kind: "empty",
+          xOffset: 0,
+          yOffset: 0,
+        },
+        {
+          id: containerId,
+          kind: "container",
+          collapsed: false,
+          options: {
+            title: "Navigation",
+            customCssClasses: ["pinned"],
+            borderColor: "#123456",
+            showLabel: true,
+            collapsible: true,
+            showOpenAll: true,
+          },
+          layouts: [
+            {
+              layoutId,
+              parentSectionId: rootSectionId,
+              xOffset: 1,
+              yOffset: 2,
+              width: 3,
+              height: 4,
+            },
+          ],
+        },
+      ],
+      items: [],
+    });
+
+    await caller.saveBoard({
+      id: boardId,
+      sections: [
+        {
+          id: rootSectionId,
+          kind: "empty",
+          xOffset: 0,
+          yOffset: 0,
+        },
+        {
+          id: containerId,
+          kind: "container",
+          collapsed: false,
+          options: {
+            title: "Operations",
+            customCssClasses: ["dense"],
+            borderColor: "#654321",
+            showLabel: false,
+            collapsible: false,
+            showOpenAll: false,
+          },
+          layouts: [
+            {
+              layoutId,
+              parentSectionId: rootSectionId,
+              xOffset: 2,
+              yOffset: 3,
+              width: 4,
+              height: 5,
+            },
+          ],
+        },
+      ],
+      items: [],
+    });
+
+    const section = await db.query.sections.findFirst({
+      where: eq(sections.id, containerId),
+    });
+
+    expect(SuperJSON.parse(section?.options ?? "")).toEqual({
+      title: "Operations",
+      customCssClasses: ["dense"],
+      borderColor: "#654321",
+      showLabel: false,
+      collapsible: false,
+      showOpenAll: false,
+    });
+    expect(
+      await db.query.sectionLayouts.findFirst({
+        where: and(eq(sectionLayouts.sectionId, containerId), eq(sectionLayouts.layoutId, layoutId)),
+      }),
+    ).toMatchObject({
+      parentSectionId: rootSectionId,
+      xOffset: 2,
+      yOffset: 3,
+      width: 4,
+      height: 5,
+    });
+  });
+  it("should add a container without layouts", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, sectionId: rootSectionId } = await createFullBoardAsync(db, "default");
+    const containerId = createId();
+
+    await caller.saveBoard({
+      id: boardId,
+      sections: [
+        {
+          id: rootSectionId,
+          kind: "empty",
+          xOffset: 0,
+          yOffset: 0,
+        },
+        {
+          id: containerId,
+          kind: "container",
+          collapsed: false,
+          options: {},
+          layouts: [],
+        },
+      ],
+      items: [],
+    });
+
+    expect(
+      await db.query.sections.findFirst({
+        where: eq(sections.id, containerId),
+      }),
+    ).toMatchObject({ id: containerId, kind: "container" });
+    expect(
+      await db.query.sectionLayouts.findMany({
+        where: eq(sectionLayouts.sectionId, containerId),
+      }),
+    ).toEqual([]);
+  });
   it("should add item when present in input", async () => {
     const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
     const db = createDb();
@@ -1049,15 +1255,22 @@ describe("saveBoard should save full board", () => {
     const db = createDb();
     const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
 
-    const { boardId, sectionId } = await createFullBoardAsync(db, "default");
-    const newSectionId = createId();
+    const { boardId, sectionId, layoutId } = await createFullBoardAsync(db, "default");
+    const containerId = createId();
     await db.insert(sections).values({
-      id: newSectionId,
-      kind: "category",
-      name: "Before",
-      yOffset: 1,
-      xOffset: 0,
+      id: containerId,
+      kind: "container",
       boardId,
+      options: SuperJSON.stringify({ title: "Before" }),
+    });
+    await db.insert(sectionLayouts).values({
+      sectionId: containerId,
+      layoutId,
+      parentSectionId: sectionId,
+      xOffset: 0,
+      yOffset: 0,
+      width: 2,
+      height: 2,
     });
 
     await caller.saveBoard({
@@ -1065,19 +1278,32 @@ describe("saveBoard should save full board", () => {
       sections: [
         {
           id: sectionId,
-          kind: "category",
+          kind: "empty",
           yOffset: 1,
           xOffset: 0,
-          name: "Test",
-          collapsed: true,
         },
         {
-          id: newSectionId,
-          kind: "category",
-          name: "After",
-          yOffset: 0,
-          xOffset: 0,
+          id: containerId,
+          kind: "container",
           collapsed: false,
+          options: {
+            title: "After",
+            customCssClasses: ["dense"],
+            borderColor: "#123456",
+            showLabel: false,
+            collapsible: true,
+            showOpenAll: true,
+          },
+          layouts: [
+            {
+              layoutId,
+              parentSectionId: sectionId,
+              xOffset: 1,
+              yOffset: 2,
+              width: 3,
+              height: 4,
+            },
+          ],
         },
       ],
       items: [],
@@ -1097,11 +1323,17 @@ describe("saveBoard should save full board", () => {
     expect(firstSection.kind).toBe("empty");
     expect(firstSection.yOffset).toBe(1);
     expect(firstSection.name).toBe(null);
-    const secondSection = expectToBeDefined(definedBoard.sections.find((section) => section.id === newSectionId));
-    expect(secondSection.id).toBe(newSectionId);
-    expect(secondSection.kind).toBe("category");
-    expect(secondSection.yOffset).toBe(0);
-    expect(secondSection.name).toBe("After");
+    const secondSection = expectToBeDefined(definedBoard.sections.find((section) => section.id === containerId));
+    expect(secondSection.id).toBe(containerId);
+    expect(secondSection.kind).toBe("container");
+    expect(secondSection.yOffset).toBeNull();
+    expect(secondSection.name).toBeNull();
+    expect(SuperJSON.parse(secondSection.options ?? "")).toMatchObject({ title: "After", collapsible: true });
+    expect(
+      await db.query.sectionLayouts.findFirst({
+        where: and(eq(sectionLayouts.sectionId, containerId), eq(sectionLayouts.layoutId, layoutId)),
+      }),
+    ).toMatchObject({ xOffset: 1, yOffset: 2, width: 3, height: 4, parentSectionId: sectionId });
   });
   it("should update item when present in input", async () => {
     const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
@@ -1160,12 +1392,12 @@ describe("saveBoard should save full board", () => {
     expect(firstItem.id).toBe(itemId);
     expect(firstItem.kind).toBe("clock");
     expect(SuperJSON.parse<{ is24HourFormat: boolean }>(firstItem.options).is24HourFormat).toBe(false);
-    const firstLayout = expectToBeDefined(firstItem.layouts[0]);
-    expect(firstLayout.sectionId).toBe(sectionId);
-    expect(firstLayout.height).toBe(3);
-    expect(firstLayout.width).toBe(2);
-    expect(firstLayout.xOffset).toBe(7);
-    expect(firstLayout.yOffset).toBe(5);
+    const updatedLayout = expectToBeDefined(firstItem.layouts.find((layout) => layout.layoutId === layoutId));
+    expect(updatedLayout.sectionId).toBe(sectionId);
+    expect(updatedLayout.height).toBe(3);
+    expect(updatedLayout.width).toBe(2);
+    expect(updatedLayout.xOffset).toBe(7);
+    expect(updatedLayout.yOffset).toBe(5);
     expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "modify");
   });
   it("should fail when board not found", async () => {
@@ -1350,14 +1582,43 @@ const createExistingLayout = (id: string) => ({
   id,
   name: "Base",
   columnCount: 10,
+  leftGutterColumnCount: 0,
+  rightGutterColumnCount: 0,
+  breakpoint: 768,
+  role: "base" as const,
+});
+const createMobileLayout = (id: string) => ({
+  id,
+  name: "Mobile",
+  columnCount: 3,
+  leftGutterColumnCount: 0,
+  rightGutterColumnCount: 0,
   breakpoint: 0,
+  role: "mobile" as const,
 });
 const createNewLayout = (columnCount: number) => ({
   id: createId(),
   name: "New layout",
   columnCount,
-  breakpoint: 1400,
+  leftGutterColumnCount: 0,
+  rightGutterColumnCount: 0,
+  breakpoint: 480,
+  role: "custom" as const,
 });
+const addMobileLayoutAsync = async (db: Database, boardId: string) => {
+  const mobileLayoutId = createId();
+  await db.insert(layouts).values({
+    id: mobileLayoutId,
+    name: "Mobile",
+    columnCount: 3,
+    leftGutterColumnCount: 0,
+    rightGutterColumnCount: 0,
+    breakpoint: 0,
+    role: "mobile",
+    boardId,
+  });
+  return mobileLayoutId;
+};
 describe("saveLayouts should save layout changes", () => {
   test("should add layout when not present in database", async () => {
     // Arrange
@@ -1365,30 +1626,34 @@ describe("saveLayouts should save layout changes", () => {
     const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
 
     const { boardId, layoutId } = await createFullBoardAsync(db, "default");
+    const mobileLayoutId = await addMobileLayoutAsync(db, boardId);
     const newLayout = createNewLayout(12);
 
     // Act
-    await caller.saveLayouts({
+    const savedLayouts = await caller.saveLayouts({
       id: boardId,
-      layouts: [createExistingLayout(layoutId), newLayout],
+      layouts: [createMobileLayout(mobileLayoutId), createExistingLayout(layoutId), newLayout],
     });
 
     // Assert
     const layout = await db.query.layouts.findFirst({
-      where: not(eq(layouts.id, layoutId)),
+      where: eq(layouts.role, "custom"),
     });
 
     const definedLayout = expectToBeDefined(layout);
     expect(definedLayout.name).toBe(newLayout.name);
     expect(definedLayout.columnCount).toBe(newLayout.columnCount);
     expect(definedLayout.breakpoint).toBe(newLayout.breakpoint);
+    expect(definedLayout.role).toBe("custom");
+    expect(savedLayouts.find((candidate) => candidate.role === "custom")?.id).toBe(definedLayout.id);
   });
-  test("should add items and dynamic sections generated from grid-algorithm when new layout is added", async () => {
+  test("should add items and containers generated from grid-algorithm when new layout is added", async () => {
     // Arrange
     const db = createDb();
     const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
 
     const { boardId, layoutId, sectionId, itemId } = await createFullBoardAsync(db, "default");
+    const mobileLayoutId = await addMobileLayoutAsync(db, boardId);
     const assignments = await createItemsAndSectionsAsync(db, {
       boardId,
       layoutId,
@@ -1399,12 +1664,12 @@ describe("saveLayouts should save layout changes", () => {
     // Act
     await caller.saveLayouts({
       id: boardId,
-      layouts: [createExistingLayout(layoutId), newLayout],
+      layouts: [createMobileLayout(mobileLayoutId), createExistingLayout(layoutId), newLayout],
     });
 
     // Assert
     const layout = await db.query.layouts.findFirst({
-      where: not(eq(layouts.id, layoutId)),
+      where: eq(layouts.role, "custom"),
     });
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     await expectLayoutForRootLayoutAsync(db, sectionId, layout!.id, {
@@ -1412,7 +1677,7 @@ describe("saveLayouts should save layout changes", () => {
       a: itemId,
     });
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    await expectLayoutForDynamicSectionAsync(db, assignments.inRoot.f, layout!.id, assignments.inDynamicSection);
+    await expectLayoutForContainerAsync(db, assignments.inRoot.f, layout!.id, assignments.inContainer);
   });
   test("should update layout when present in input", async () => {
     // Arrange
@@ -1420,6 +1685,7 @@ describe("saveLayouts should save layout changes", () => {
     const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
 
     const { boardId, layoutId } = await createFullBoardAsync(db, "default");
+    const mobileLayoutId = await addMobileLayoutAsync(db, boardId);
     const updatedLayout = createExistingLayout(layoutId);
     updatedLayout.breakpoint = 1400;
     updatedLayout.name = "Updated layout";
@@ -1427,7 +1693,7 @@ describe("saveLayouts should save layout changes", () => {
     // Act
     await caller.saveLayouts({
       id: boardId,
-      layouts: [updatedLayout],
+      layouts: [createMobileLayout(mobileLayoutId), updatedLayout],
     });
 
     // Assert
@@ -1446,6 +1712,7 @@ describe("saveLayouts should save layout changes", () => {
     const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
 
     const { boardId, layoutId, sectionId, itemId } = await createFullBoardAsync(db, "default");
+    const mobileLayoutId = await addMobileLayoutAsync(db, boardId);
     const assignments = await createItemsAndSectionsAsync(db, {
       boardId,
       layoutId,
@@ -1457,7 +1724,7 @@ describe("saveLayouts should save layout changes", () => {
     // Act
     await caller.saveLayouts({
       id: boardId,
-      layouts: [updatedLayout],
+      layouts: [createMobileLayout(mobileLayoutId), updatedLayout],
     });
 
     // Assert
@@ -1465,7 +1732,126 @@ describe("saveLayouts should save layout changes", () => {
       ...assignments.inRoot,
       a: itemId,
     });
-    await expectLayoutForDynamicSectionAsync(db, assignments.inRoot.f, layoutId, assignments.inDynamicSection);
+    await expectLayoutForContainerAsync(db, assignments.inRoot.f, layoutId, assignments.inContainer);
+  });
+  test("should reserve gutter columns and return gutter contents to the canvas when disabled", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, layoutId, sectionId, itemId } = await createFullBoardAsync(db, "gutters");
+    const mobileLayoutId = await addMobileLayoutAsync(db, boardId);
+
+    await db
+      .update(itemLayouts)
+      .set({
+        xOffset: 9,
+      })
+      .where(and(eq(itemLayouts.itemId, itemId), eq(itemLayouts.layoutId, layoutId)));
+
+    await caller.saveLayouts({
+      id: boardId,
+      layouts: [
+        createMobileLayout(mobileLayoutId),
+        {
+          ...createExistingLayout(layoutId),
+          leftGutterColumnCount: 2,
+        },
+      ],
+    });
+
+    const enabledLayout = expectToBeDefined(await db.query.layouts.findFirst({ where: eq(layouts.id, layoutId) }));
+    expect(enabledLayout.leftGutterColumnCount).toBe(2);
+    const leftRoot = expectToBeDefined(
+      await db.query.sections.findFirst({
+        where: and(eq(sections.boardId, boardId), eq(sections.kind, "empty"), eq(sections.xOffset, -1)),
+      }),
+    );
+    const reflowedMainItem = expectToBeDefined(
+      await db.query.itemLayouts.findFirst({
+        where: and(eq(itemLayouts.itemId, itemId), eq(itemLayouts.layoutId, layoutId)),
+      }),
+    );
+    expect(reflowedMainItem.xOffset + reflowedMainItem.width).toBeLessThanOrEqual(8);
+
+    const gutterItemId = await addItemAsync(db, {
+      boardId,
+      layoutId,
+      sectionId: leftRoot.id,
+    });
+    await caller.saveLayouts({
+      id: boardId,
+      layouts: [createMobileLayout(mobileLayoutId), createExistingLayout(layoutId)],
+    });
+
+    const returnedItem = expectToBeDefined(
+      await db.query.itemLayouts.findFirst({
+        where: and(eq(itemLayouts.itemId, gutterItemId), eq(itemLayouts.layoutId, layoutId)),
+      }),
+    );
+    expect(returnedItem.sectionId).toBe(sectionId);
+  });
+  test("should create one gutter root when layouts are saved concurrently", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, layoutId } = await createFullBoardAsync(db, "concurrent-gutters");
+    const mobileLayoutId = await addMobileLayoutAsync(db, boardId);
+    const input = {
+      id: boardId,
+      layouts: [
+        createMobileLayout(mobileLayoutId),
+        {
+          ...createExistingLayout(layoutId),
+          leftGutterColumnCount: 2,
+        },
+      ],
+    };
+
+    await Promise.all([caller.saveLayouts(input), caller.saveLayouts(input)]);
+
+    const leftRoots = await db.query.sections.findMany({
+      where: and(eq(sections.boardId, boardId), eq(sections.kind, "empty"), eq(sections.xOffset, -1)),
+    });
+    expect(leftRoots).toHaveLength(1);
+  });
+  test("should project a new custom layout from the resized Base layout", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, layoutId, sectionId, itemId } = await createFullBoardAsync(db, "default");
+    const mobileLayoutId = await addMobileLayoutAsync(db, boardId);
+    const secondItemId = createId();
+
+    await db.update(itemLayouts).set({ width: 4, xOffset: 0 }).where(eq(itemLayouts.itemId, itemId));
+    await db.insert(items).values({
+      id: secondItemId,
+      kind: "clock",
+      boardId,
+      options: SuperJSON.stringify({ is24HourFormat: true }),
+    });
+    await db.insert(itemLayouts).values({
+      itemId: secondItemId,
+      layoutId,
+      sectionId,
+      width: 4,
+      height: 1,
+      xOffset: 6,
+      yOffset: 0,
+    });
+
+    const resizedBase = { ...createExistingLayout(layoutId), columnCount: 6 };
+    const savedLayouts = await caller.saveLayouts({
+      id: boardId,
+      layouts: [createMobileLayout(mobileLayoutId), createNewLayout(8), resizedBase],
+    });
+    const customLayoutId = expectToBeDefined(savedLayouts.find((layout) => layout.role === "custom")).id;
+
+    const basePosition = await db.query.itemLayouts.findFirst({
+      where: and(eq(itemLayouts.itemId, secondItemId), eq(itemLayouts.layoutId, layoutId)),
+    });
+    const customPosition = await db.query.itemLayouts.findFirst({
+      where: and(eq(itemLayouts.itemId, secondItemId), eq(itemLayouts.layoutId, customLayoutId)),
+    });
+
+    expect(basePosition).toMatchObject({ xOffset: 0, yOffset: 1, width: 4, height: 1, sectionId });
+    expect(customPosition).toMatchObject({ xOffset: 0, yOffset: 1, width: 4, height: 1, sectionId });
   });
   test("should remove layout when not present in input", async () => {
     // Arrange
@@ -1473,16 +1859,26 @@ describe("saveLayouts should save layout changes", () => {
     const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
 
     const { boardId, layoutId } = await createFullBoardAsync(db, "default");
+    const mobileLayoutId = await addMobileLayoutAsync(db, boardId);
+    const customLayoutId = createId();
+    await db.insert(layouts).values({
+      id: customLayoutId,
+      name: "Custom",
+      columnCount: 6,
+      breakpoint: 480,
+      role: "custom",
+      boardId,
+    });
 
     // Act
     await caller.saveLayouts({
       id: boardId,
-      layouts: [createNewLayout(12)],
+      layouts: [createMobileLayout(mobileLayoutId), createExistingLayout(layoutId)],
     });
 
     // Assert
     const layout = await db.query.layouts.findFirst({
-      where: eq(layouts.id, layoutId),
+      where: eq(layouts.id, customLayoutId),
     });
     expect(layout).toBeUndefined();
   });
@@ -1497,12 +1893,130 @@ describe("saveLayouts should save layout changes", () => {
     const actAsync = async () =>
       await caller.saveLayouts({
         id: createId(),
-        layouts: [createExistingLayout(layoutId)],
+        layouts: [createMobileLayout(createId()), createExistingLayout(layoutId)],
       });
 
     // Assert
     await expect(actAsync()).rejects.toThrowError("Board not found");
   });
+  test("should reject changing protected layout roles", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, layoutId } = await createFullBoardAsync(db, "default");
+    const mobileLayoutId = await addMobileLayoutAsync(db, boardId);
+
+    const actAsync = async () =>
+      await caller.saveLayouts({
+        id: boardId,
+        layouts: [
+          { ...createExistingLayout(layoutId), role: "mobile", breakpoint: 0 },
+          { ...createMobileLayout(mobileLayoutId), role: "base", breakpoint: 768 },
+        ],
+      });
+
+    await expect(actAsync()).rejects.toThrowError("Layout roles cannot be changed");
+  });
+});
+
+describe("resetLayout should rebuild a layout from Base", () => {
+  test("should replace target item positions and preserve layout metadata", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, sectionId, itemId } = await createFullBoardAsync(db, "default");
+    await addMobileLayoutAsync(db, boardId);
+    const customLayoutId = createId();
+    await db.insert(layouts).values({
+      id: customLayoutId,
+      name: "Tablet",
+      columnCount: 6,
+      breakpoint: 480,
+      role: "custom",
+      boardId,
+    });
+    await db.insert(itemLayouts).values({
+      itemId,
+      sectionId,
+      layoutId: customLayoutId,
+      width: 2,
+      height: 2,
+      xOffset: 3,
+      yOffset: 4,
+    });
+
+    await caller.resetLayout({ boardId, layoutId: customLayoutId });
+
+    const resetPosition = await db.query.itemLayouts.findFirst({
+      where: and(eq(itemLayouts.itemId, itemId), eq(itemLayouts.layoutId, customLayoutId)),
+    });
+    expect(resetPosition).toMatchObject({ width: 1, height: 1, xOffset: 0, yOffset: 0, sectionId });
+    const customLayout = await db.query.layouts.findFirst({ where: eq(layouts.id, customLayoutId) });
+    expect(customLayout).toMatchObject({ name: "Tablet", columnCount: 6, breakpoint: 480, role: "custom" });
+  });
+
+  test("should reject resetting Base", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, layoutId } = await createFullBoardAsync(db, "default");
+
+    await expect(caller.resetLayout({ boardId, layoutId })).rejects.toThrowError("Base layout cannot be reset");
+  });
+});
+
+describe("Custom Widget placement permissions", () => {
+  test("rejects a direct addItem request from a non-admin board modifier", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId } = await createFullBoardAsync(db, "custom-widget-add");
+
+    await expect(
+      caller.addItem({
+        boardId,
+        kind: "customApi",
+        options: {
+          definitionId: "definition-1",
+          refreshInterval: 30,
+          configuration: {},
+        },
+        integrationIds: [],
+      }),
+    ).rejects.toMatchObject({ code: "FORBIDDEN" });
+  });
+
+  test("rejects a direct saveBoard request that adds a Custom Widget for a non-admin", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, sectionId, layoutId } = await createFullBoardAsync(db, "custom-widget-save");
+
+    await expect(
+      caller.saveBoard({
+        id: boardId,
+        sections: [{ id: sectionId, kind: "empty", yOffset: 0, xOffset: 0 }],
+        items: [
+          {
+            id: createId(),
+            kind: "customApi",
+            options: {
+              definitionId: "definition-1",
+              refreshInterval: 30,
+              configuration: {},
+            },
+            integrationIds: [],
+            advancedOptions: { title: null, customCssClasses: [], borderColor: "" },
+            layouts: [
+              {
+                layoutId,
+                sectionId,
+                height: 1,
+                width: 1,
+                xOffset: 0,
+                yOffset: 0,
+              },
+            ],
+          },
+        ],
+      }),
+    ).rejects.toMatchObject({ code: "FORBIDDEN" });
+  });
 });
 
 const expectInputToBeFullBoardWithName = (
@@ -1543,7 +2057,8 @@ const createFullBoardAsync = async (db: Database, name: string) => {
     id: layoutId,
     name: "Base",
     columnCount: 10,
-    breakpoint: 0,
+    breakpoint: 768,
+    role: "base",
     boardId,
   });
 
@@ -1623,19 +2138,21 @@ const addItemAsync = async (
   return itemId;
 };
 
-const addDynamicSectionAsync = async (
+const addContainerAsync = async (
   db: Database,
   section: Partial<Pick<InferInsertModel<typeof sectionLayouts>, "xOffset" | "yOffset" | "width" | "height">> & {
     parentSectionId: string;
     boardId: string;
     layoutId: string;
+    options?: Record<string, unknown>;
   },
 ) => {
   const sectionId = createId();
   await db.insert(sections).values({
     id: sectionId,
-    kind: "dynamic",
+    kind: "container",
     boardId: section.boardId,
+    options: SuperJSON.stringify(section.options ?? {}),
   });
   await db.insert(sectionLayouts).values({
     parentSectionId: section.parentSectionId,
@@ -1677,7 +2194,7 @@ const createItemsAndSectionsAsync = async (
   const itemC = await addItemAsync(db, { boardId, layoutId, sectionId, xOffset: 6, width: 2, height: 2 });
   const itemD = await addItemAsync(db, { boardId, layoutId, sectionId, xOffset: 8, width: 2, height: 3 });
   const itemE = await addItemAsync(db, { boardId, layoutId, sectionId, yOffset: 1, height: 3 });
-  const sectionF = await addDynamicSectionAsync(db, {
+  const sectionF = await addContainerAsync(db, {
     yOffset: 1,
     xOffset: 1,
     width: 5,
@@ -1686,7 +2203,7 @@ const createItemsAndSectionsAsync = async (
     boardId,
     layoutId,
   });
-  const sectionG = await addDynamicSectionAsync(db, {
+  const sectionG = await addContainerAsync(db, {
     yOffset: 2,
     xOffset: 6,
     width: 2,
@@ -1717,7 +2234,7 @@ const createItemsAndSectionsAsync = async (
       f: sectionF,
       g: sectionG,
     },
-    inDynamicSection: {
+    inContainer: {
       h: itemH,
       i: itemI,
       j: itemJ,
@@ -1753,7 +2270,7 @@ gg`,
   );
 };
 
-const expectLayoutForDynamicSectionAsync = async (
+const expectLayoutForContainerAsync = async (
   db: Database,
   sectionId: string,
   layoutId: string,
diff --git a/packages/api/src/router/test/custom-widget/configuration-requests.spec.ts b/packages/api/src/router/test/custom-widget/configuration-requests.spec.ts
new file mode 100644
index 000000000..95d0464ac
--- /dev/null
+++ b/packages/api/src/router/test/custom-widget/configuration-requests.spec.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  claimCustomWidgetConfigurationRequest,
+  completeCustomWidgetConfigurationRequest,
+  createCustomWidgetConfigurationRequest,
+  getCustomWidgetConfigurationRequestForUser,
+  releaseCustomWidgetConfigurationRequest,
+} from "../../custom-widget/configuration-requests";
+
+describe("custom widget source configuration requests", () => {
+  it("is user-scoped, one-time, and reports completion without returning configuration", async () => {
+    const request = await createCustomWidgetConfigurationRequest({
+      userId: "user-1",
+      target: { type: "preview", id: "preview-1" },
+      widgetName: "Printer",
+      sourceId: "default",
+      sourceName: "Printer API",
+      source: { baseUrl: "http://printer.local", networkScope: "private", auth: "bearer" },
+      kinds: ["apiKey"],
+    });
+
+    expect(await getCustomWidgetConfigurationRequestForUser(request.id, "user-2")).toBeNull();
+    expect(await claimCustomWidgetConfigurationRequest(request.id)).toMatchObject({ status: "pending" });
+    expect(await claimCustomWidgetConfigurationRequest(request.id)).toBeNull();
+    await releaseCustomWidgetConfigurationRequest(request.id);
+    expect(await claimCustomWidgetConfigurationRequest(request.id)).not.toBeNull();
+    await completeCustomWidgetConfigurationRequest(request.id);
+    expect(await getCustomWidgetConfigurationRequestForUser(request.id, "user-1")).toMatchObject({
+      status: "completed",
+    });
+    expect(await claimCustomWidgetConfigurationRequest(request.id)).toBeNull();
+  });
+});
diff --git a/packages/api/src/router/test/custom-widget/definition-persistence.spec.ts b/packages/api/src/router/test/custom-widget/definition-persistence.spec.ts
new file mode 100644
index 000000000..3913e8901
--- /dev/null
+++ b/packages/api/src/router/test/custom-widget/definition-persistence.spec.ts
@@ -0,0 +1,551 @@
+import type { Session } from "@homarr/auth";
+import { createId } from "@homarr/common";
+import { eq, sql } from "@homarr/db";
+import {
+  customWidgetDefinitions,
+  customWidgetSecrets,
+  legacyCustomWidgetDefinitions,
+  legacyCustomWidgetSecrets,
+  users,
+} from "@homarr/db/schema";
+import { createDb } from "@homarr/db/test";
+import { BUNDLED_CUSTOM_WIDGETS, customWidgetDefinitionSchema } from "@homarr/custom-widgets/core";
+import { describe, expect, test } from "vitest";
+
+import { customWidgetRouter } from "../../custom-widget/custom-widget-router";
+import { getCustomWidgetConfigurationRequestForUser } from "../../custom-widget/configuration-requests";
+import { configureCustomWidgetSourceFromRequest } from "../../custom-widget/secret-persistence";
+import { serializeCustomWidgetDefinition } from "../../custom-widget/stored-definition";
+
+const userId = createId();
+const session = {
+  user: {
+    id: userId,
+    permissions: ["admin"],
+    colorScheme: "light",
+  },
+  expires: new Date().toISOString(),
+} satisfies Session;
+const nonAdminSession = {
+  ...session,
+  user: { ...session.user, permissions: ["board-modify-all"] },
+} satisfies Session;
+
+const jellyfin = BUNDLED_CUSTOM_WIDGETS.find(({ id }) => id === "seed-jellyfin")?.widget;
+if (!jellyfin) throw new Error("Jellyfin bundled widget is missing");
+const jellyfinDefaultSource = jellyfin.sources.default;
+if (!jellyfinDefaultSource) throw new Error("Jellyfin default source is missing");
+
+function createCaller(db: ReturnType<typeof createDb>) {
+  return customWidgetRouter.createCaller({ db, deviceType: undefined, session });
+}
+
+function createNonAdminCaller(db: ReturnType<typeof createDb>) {
+  return customWidgetRouter.createCaller({
+    db,
+    deviceType: undefined,
+    session: nonAdminSession,
+  });
+}
+
+async function prepareDatabase() {
+  const db = createDb();
+  await db.insert(users).values({ id: userId });
+  return db;
+}
+
+function rejectSecretInserts(db: ReturnType<typeof createDb>) {
+  db.run(
+    sql.raw(`CREATE TRIGGER reject_custom_widget_v2_secret_insert
+      BEFORE INSERT ON custom_widget_v2_secret
+      BEGIN
+        SELECT RAISE(ABORT, 'forced secret insert failure');
+      END`),
+  );
+}
+
+function rejectDefinitionUpdates(db: ReturnType<typeof createDb>) {
+  db.run(
+    sql.raw(`CREATE TRIGGER reject_custom_widget_v2_definition_update
+      BEFORE UPDATE ON custom_widget_v2_definition
+      BEGIN
+        SELECT RAISE(ABORT, 'forced definition update failure');
+      END`),
+  );
+}
+
+async function insertLegacyJellyfin(db: ReturnType<typeof createDb>) {
+  const id = "legacy-jellyfin";
+  const encryptedValue = "preserved.secret" as `${string}.${string}`;
+  await db.insert(legacyCustomWidgetDefinitions).values({
+    id,
+    name: "Legacy Jellyfin",
+    url: "http://jellyfin.local/Items/Counts",
+    authType: "apiKeyHeader",
+    headerName: "X-Emby-Token",
+    method: "GET",
+    displayType: "singleValue",
+    enabled: false,
+    creatorId: userId,
+  });
+  await db.insert(legacyCustomWidgetSecrets).values({
+    definitionId: id,
+    kind: "apiKey",
+    encryptedValue,
+    updatedAt: new Date(0),
+  });
+  return { id, encryptedValue };
+}
+
+const secret = { sourceId: "default", kind: "apiKey" as const, value: "test-secret" };
+
+describe("custom widget definition persistence", () => {
+  test("atomically creates a v2 replacement while preserving the legacy widget and its stable ID", async () => {
+    const db = await prepareDatabase();
+    const legacy = await insertLegacyJellyfin(db);
+
+    await createCaller(db).migrateLegacy({ id: legacy.id, widget: jellyfin, secrets: [] });
+
+    expect(await db.query.legacyCustomWidgetDefinitions.findFirst()).toMatchObject({
+      id: legacy.id,
+      name: "Legacy Jellyfin",
+      enabled: false,
+    });
+    expect(await db.query.legacyCustomWidgetSecrets.findFirst()).toMatchObject({
+      definitionId: legacy.id,
+      encryptedValue: legacy.encryptedValue,
+    });
+    expect(await db.query.customWidgetDefinitions.findFirst()).toMatchObject({
+      id: legacy.id,
+      enabled: false,
+      creatorId: userId,
+    });
+    expect(await db.query.customWidgetSecrets.findFirst()).toMatchObject({
+      definitionId: legacy.id,
+      sourceId: "default",
+      kind: "apiKey",
+      encryptedValue: legacy.encryptedValue,
+    });
+
+    const migratedList = await createCaller(db).list();
+    expect(migratedList).toHaveLength(1);
+    expect(migratedList[0]).toMatchObject({ id: legacy.id, migrationRequired: false });
+
+    await createCaller(db).delete({ id: legacy.id });
+
+    const fallbackList = await createCaller(db).list();
+    expect(fallbackList).toHaveLength(1);
+    expect(fallbackList[0]).toMatchObject({ id: legacy.id, migrationRequired: true });
+    expect(await db.query.legacyCustomWidgetSecrets.findFirst()).toMatchObject({
+      definitionId: legacy.id,
+      encryptedValue: legacy.encryptedValue,
+    });
+  });
+
+  test("keeps the legacy widget recoverable when confirmed replacement fails", async () => {
+    const db = await prepareDatabase();
+    const legacy = await insertLegacyJellyfin(db);
+    rejectSecretInserts(db);
+
+    await expect(createCaller(db).migrateLegacy({ id: legacy.id, widget: jellyfin, secrets: [] })).rejects.toThrow(
+      "forced secret insert failure",
+    );
+
+    expect(await db.query.legacyCustomWidgetDefinitions.findFirst()).toMatchObject({ id: legacy.id });
+    expect(await db.query.legacyCustomWidgetSecrets.findFirst()).toMatchObject({
+      definitionId: legacy.id,
+      encryptedValue: legacy.encryptedValue,
+    });
+    expect(await db.query.customWidgetDefinitions.findMany()).toHaveLength(0);
+  });
+
+  test("rolls back create when its secret cannot be stored", async () => {
+    const db = await prepareDatabase();
+    const caller = createCaller(db);
+    rejectSecretInserts(db);
+
+    await expect(caller.create({ ...jellyfin, secrets: [secret] })).rejects.toThrow("forced secret insert failure");
+
+    expect(await db.query.customWidgetDefinitions.findMany()).toHaveLength(0);
+    expect(await db.query.customWidgetSecrets.findMany()).toHaveLength(0);
+  });
+
+  test("rolls back import when its secret cannot be stored", async () => {
+    const db = await prepareDatabase();
+    const caller = createCaller(db);
+    rejectSecretInserts(db);
+
+    await expect(caller.import({ widget: jellyfin, secrets: [secret] })).rejects.toThrow(
+      "forced secret insert failure",
+    );
+
+    expect(await db.query.customWidgetDefinitions.findMany()).toHaveLength(0);
+    expect(await db.query.customWidgetSecrets.findMany()).toHaveLength(0);
+  });
+
+  test("refuses to export a stored definition containing embedded credentials", async () => {
+    const db = await prepareDatabase();
+    const definition = customWidgetDefinitionSchema.parse(jellyfin);
+    const counts = definition.requests.counts;
+    if (!counts) throw new Error("Jellyfin counts request is missing");
+    const id = createId();
+    await db.insert(customWidgetDefinitions).values({
+      id,
+      ...serializeCustomWidgetDefinition({
+        ...definition,
+        requests: {
+          ...definition.requests,
+          counts: {
+            ...counts,
+            headers: { ...counts.headers, "X-Auth": "Bearer sk-secret-123456" },
+          },
+        },
+      }),
+      creatorId: userId,
+    });
+
+    await expect(createCaller(db).export({ id })).rejects.toThrow("Credentials must use source authentication");
+  });
+
+  test("rolls back definition and secret changes when a replacement secret cannot be stored", async () => {
+    const db = await prepareDatabase();
+    const caller = createCaller(db);
+    const created = await caller.create({ ...jellyfin, secrets: [secret] });
+    const originalDefinition = await db.query.customWidgetDefinitions.findFirst({
+      where: eq(customWidgetDefinitions.id, created.id),
+    });
+    const originalSecret = await db.query.customWidgetSecrets.findFirst({
+      where: eq(customWidgetSecrets.definitionId, created.id),
+    });
+    rejectSecretInserts(db);
+
+    await expect(
+      caller.update({
+        id: created.id,
+        name: "Changed Jellyfin Library",
+        secrets: [{ ...secret, value: "replacement-secret" }],
+      }),
+    ).rejects.toThrow("forced secret insert failure");
+
+    const storedDefinition = await db.query.customWidgetDefinitions.findFirst({
+      where: eq(customWidgetDefinitions.id, created.id),
+    });
+    const storedSecret = await db.query.customWidgetSecrets.findFirst({
+      where: eq(customWidgetSecrets.definitionId, created.id),
+    });
+    expect(storedDefinition?.name).toBe(originalDefinition?.name);
+    expect(storedDefinition?.updatedAt).toEqual(originalDefinition?.updatedAt);
+    expect(storedSecret).toEqual(originalSecret);
+  });
+
+  test("keeps the existing secret when setting its replacement fails", async () => {
+    const db = await prepareDatabase();
+    const caller = createCaller(db);
+    const created = await caller.create({ ...jellyfin, secrets: [secret] });
+    const originalDefinition = await db.query.customWidgetDefinitions.findFirst({
+      where: eq(customWidgetDefinitions.id, created.id),
+    });
+    const originalSecret = await db.query.customWidgetSecrets.findFirst({
+      where: eq(customWidgetSecrets.definitionId, created.id),
+    });
+    rejectSecretInserts(db);
+
+    await expect(
+      caller.secretSet({
+        definitionId: created.id,
+        secret: { ...secret, value: "replacement-secret" },
+      }),
+    ).rejects.toThrow("forced secret insert failure");
+
+    expect(
+      await db.query.customWidgetDefinitions.findFirst({
+        where: eq(customWidgetDefinitions.id, created.id),
+      }),
+    ).toEqual(originalDefinition);
+    expect(
+      await db.query.customWidgetSecrets.findFirst({
+        where: eq(customWidgetSecrets.definitionId, created.id),
+      }),
+    ).toEqual(originalSecret);
+  });
+
+  test("keeps the existing secret when clearing it cannot update the definition revision", async () => {
+    const db = await prepareDatabase();
+    const caller = createCaller(db);
+    const created = await caller.create({ ...jellyfin, secrets: [secret] });
+    const originalDefinition = await db.query.customWidgetDefinitions.findFirst({
+      where: eq(customWidgetDefinitions.id, created.id),
+    });
+    const originalSecret = await db.query.customWidgetSecrets.findFirst({
+      where: eq(customWidgetSecrets.definitionId, created.id),
+    });
+    rejectDefinitionUpdates(db);
+
+    await expect(
+      caller.secretClear({
+        definitionId: created.id,
+        sourceId: secret.sourceId,
+        kind: secret.kind,
+      }),
+    ).rejects.toThrow("forced definition update failure");
+
+    expect(
+      await db.query.customWidgetDefinitions.findFirst({
+        where: eq(customWidgetDefinitions.id, created.id),
+      }),
+    ).toEqual(originalDefinition);
+    expect(
+      await db.query.customWidgetSecrets.findFirst({
+        where: eq(customWidgetSecrets.definitionId, created.id),
+      }),
+    ).toEqual(originalSecret);
+  });
+
+  test("configures a source URL and credential together", async () => {
+    const db = await prepareDatabase();
+    const caller = createCaller(db);
+    const created = await caller.create({ ...jellyfin, secrets: [] });
+
+    await caller.sourceConfigure({
+      definitionId: created.id,
+      sourceId: "default",
+      baseUrl: "http://jellyfin.local:8096",
+      networkScope: "private",
+      secrets: [secret],
+    });
+
+    const definition = await caller.get({ id: created.id });
+    expect(definition.sources.default?.baseUrl).toBe("http://jellyfin.local:8096");
+    expect(definition.secrets).toMatchObject([{ sourceId: "default", kind: "apiKey", hasValue: true }]);
+  });
+
+  test("rolls back a source URL when its credential cannot be stored", async () => {
+    const db = await prepareDatabase();
+    const caller = createCaller(db);
+    const created = await caller.create({ ...jellyfin, secrets: [] });
+    const before = await caller.get({ id: created.id });
+    rejectSecretInserts(db);
+
+    await expect(
+      caller.sourceConfigure({
+        definitionId: created.id,
+        sourceId: "default",
+        baseUrl: "http://jellyfin.local:8096",
+        networkScope: "private",
+        secrets: [secret],
+      }),
+    ).rejects.toThrow("forced secret insert failure");
+
+    expect((await caller.get({ id: created.id })).sources.default?.baseUrl).toBe(before.sources.default?.baseUrl);
+  });
+
+  test("uses the preview widget name in a user configuration request", async () => {
+    const db = await prepareDatabase();
+    const caller = createCaller(db);
+    const preview = await caller.previewCreate({
+      definition: { ...jellyfin, name: "Living room Jellyfin" },
+      secrets: [],
+    });
+
+    const request = await caller.configurationRequestUser({
+      previewSessionId: preview.previewSession.id,
+      sourceId: "default",
+    });
+
+    expect(await getCustomWidgetConfigurationRequestForUser(request.requestId, userId)).toMatchObject({
+      widgetName: "Living room Jellyfin",
+    });
+  });
+
+  test("does not inherit a stored credential after a preview source binding changes", async () => {
+    const db = await prepareDatabase();
+    const caller = createCaller(db);
+    const created = await caller.create({ ...jellyfin, secrets: [secret] });
+    const changedDefinition = {
+      ...jellyfin,
+      sources: {
+        ...jellyfin.sources,
+        default: { ...jellyfinDefaultSource, baseUrl: "https://attacker.example" },
+      },
+    };
+
+    await expect(
+      createNonAdminCaller(db).previewCreate({
+        definitionId: created.id,
+        definition: changedDefinition,
+        secrets: [],
+      }),
+    ).rejects.toMatchObject({ code: "FORBIDDEN" });
+    await expect(
+      caller.previewCreate({ definitionId: created.id, definition: changedDefinition, secrets: [secret] }),
+    ).resolves.toMatchObject({ success: true });
+  });
+
+  test("clears persisted credentials when an admin source edit changes its binding", async () => {
+    const db = await prepareDatabase();
+    const created = await createCaller(db).create({ ...jellyfin, secrets: [secret] });
+
+    await createCaller(db).sourceConfigure({
+      definitionId: created.id,
+      sourceId: "default",
+      baseUrl: "https://other.example/api",
+      networkScope: "public",
+      secrets: [],
+    });
+
+    expect(
+      await db.query.customWidgetSecrets.findMany({
+        where: eq(customWidgetSecrets.definitionId, created.id),
+      }),
+    ).toHaveLength(0);
+  });
+
+  test("uses the persisted source binding from inside the configuration transaction", async () => {
+    const db = await prepareDatabase();
+    const created = await createCaller(db).create({ ...jellyfin, secrets: [secret] });
+    const definition = customWidgetDefinitionSchema.parse(jellyfin);
+    const defaultSource = definition.sources.default;
+    if (!defaultSource) throw new Error("Jellyfin default source is missing");
+    await db
+      .update(customWidgetDefinitions)
+      .set(
+        serializeCustomWidgetDefinition({
+          ...definition,
+          name: "Concurrent definition edit",
+          sources: {
+            ...definition.sources,
+            default: { ...defaultSource, baseUrl: "https://changed.example/api" },
+          },
+        }),
+      )
+      .where(eq(customWidgetDefinitions.id, created.id));
+
+    await expect(
+      configureCustomWidgetSourceFromRequest(db, {
+        definitionId: created.id,
+        sourceId: "default",
+        baseUrl: defaultSource.baseUrl,
+        networkScope: defaultSource.networkScope,
+        secrets: [],
+        expectedSource: defaultSource,
+      }),
+    ).resolves.toMatchObject({
+      status: "configured",
+      source: { baseUrl: defaultSource.baseUrl },
+    });
+
+    expect(await createCaller(db).get({ id: created.id })).toMatchObject({
+      name: "Concurrent definition edit",
+      sources: { default: { baseUrl: defaultSource.baseUrl } },
+    });
+    expect(
+      await db.query.customWidgetSecrets.findMany({
+        where: eq(customWidgetSecrets.definitionId, created.id),
+      }),
+    ).toHaveLength(0);
+  });
+
+  test("rejects stale setup-link credentials after a concurrent authentication binding change", async () => {
+    const db = await prepareDatabase();
+    const created = await createCaller(db).create({ ...jellyfin, secrets: [] });
+    const definition = customWidgetDefinitionSchema.parse(jellyfin);
+    const expectedSource = definition.sources.default;
+    if (!expectedSource || typeof expectedSource.auth === "string") {
+      throw new Error("Jellyfin default source must use header authentication");
+    }
+    await db
+      .update(customWidgetDefinitions)
+      .set(
+        serializeCustomWidgetDefinition({
+          ...definition,
+          name: "Concurrent definition edit",
+          sources: {
+            ...definition.sources,
+            default: {
+              ...expectedSource,
+              auth: { ...expectedSource.auth, name: "X-Replaced-Credential" },
+            },
+          },
+        }),
+      )
+      .where(eq(customWidgetDefinitions.id, created.id));
+
+    await expect(
+      configureCustomWidgetSourceFromRequest(db, {
+        definitionId: created.id,
+        sourceId: "default",
+        baseUrl: "https://configured.example/api",
+        networkScope: "public",
+        secrets: [secret],
+        expectedSource,
+      }),
+    ).resolves.toEqual({ status: "binding-changed" });
+
+    expect(await createCaller(db).get({ id: created.id })).toMatchObject({
+      name: "Concurrent definition edit",
+      sources: {
+        default: {
+          baseUrl: expectedSource.baseUrl,
+          auth: { name: "X-Replaced-Credential" },
+        },
+      },
+    });
+    expect(
+      await db.query.customWidgetSecrets.findMany({
+        where: eq(customWidgetSecrets.definitionId, created.id),
+      }),
+    ).toHaveLength(0);
+  });
+
+  test("clears persisted credentials when a general definition update changes its binding", async () => {
+    const db = await prepareDatabase();
+    const caller = createCaller(db);
+    const created = await caller.create({ ...jellyfin, secrets: [secret] });
+
+    await createCaller(db).update({
+      id: created.id,
+      sources: {
+        ...jellyfin.sources,
+        default: { ...jellyfinDefaultSource, baseUrl: "https://other.example/api" },
+      },
+    });
+
+    expect(
+      await db.query.customWidgetSecrets.findMany({
+        where: eq(customWidgetSecrets.definitionId, created.id),
+      }),
+    ).toHaveLength(0);
+  });
+
+  test("requires an administrator to create a stored-definition setup link", async () => {
+    const db = await prepareDatabase();
+    const created = await createCaller(db).create({ ...jellyfin, secrets: [] });
+
+    await expect(
+      createNonAdminCaller(db).configurationRequestUser({ definitionId: created.id, sourceId: "default" }),
+    ).rejects.toMatchObject({ code: "FORBIDDEN" });
+  });
+
+  test("allows only one concurrent template patch for a revision", async () => {
+    const db = await prepareDatabase();
+    const caller = createCaller(db);
+    const created = await caller.create({ ...jellyfin, template: "<Text>Original</Text>", secrets: [] });
+    const read = await caller.readTemplate({ id: created.id });
+
+    const results = await Promise.allSettled([
+      caller.templatePatch({
+        id: created.id,
+        expectedRevision: read.revision,
+        edits: [{ startLine: 1, deleteCount: 1, replacementLines: ["<Text>First</Text>"] }],
+      }),
+      caller.templatePatch({
+        id: created.id,
+        expectedRevision: read.revision,
+        edits: [{ startLine: 1, deleteCount: 1, replacementLines: ["<Text>Second</Text>"] }],
+      }),
+    ]);
+
+    expect(results.filter(({ status }) => status === "fulfilled")).toHaveLength(1);
+    expect(results.filter(({ status }) => status === "rejected")).toHaveLength(1);
+  });
+});
diff --git a/packages/api/src/router/test/custom-widget/legacy-migration.spec.ts b/packages/api/src/router/test/custom-widget/legacy-migration.spec.ts
new file mode 100644
index 000000000..27b3fc4da
--- /dev/null
+++ b/packages/api/src/router/test/custom-widget/legacy-migration.spec.ts
@@ -0,0 +1,72 @@
+import { describe, expect, test } from "vitest";
+import { stringify as stringifySuperJson } from "superjson";
+
+import { buildLegacyCustomWidgetMigrationPrompt } from "../../custom-widget/legacy-migration";
+
+describe("legacy custom widget migration prompt", () => {
+  test("describes the legacy widget without exposing URL or body credentials", () => {
+    const prompt = buildLegacyCustomWidgetMigrationPrompt(
+      {
+        id: "legacy",
+        name: "Private service",
+        description: "Status",
+        iconUrl: "https://icons:password@example.test/private/icon.svg?access_token=icon-secret",
+        url: "https://admin:password@example.test/hooks/path-token?api_key=top-secret&mode=full",
+        authType: "bearer",
+        headerName: null,
+        method: "POST",
+        requestBody: JSON.stringify({ token: "body-secret", limit: 5 }),
+        displayType: "singleValue",
+        displayConfig: "corrupted-config-with-display-secret",
+        enabled: true,
+        createdAt: new Date(0),
+        updatedAt: new Date(0),
+        creatorId: null,
+      },
+      ["apiKey"],
+    );
+
+    expect(prompt).toContain("homarr-custom-widget-v1");
+    expect(prompt).toContain("homarr-custom-widget-v2");
+    expect(prompt).toContain("configuredSecretKinds");
+    expect(prompt).not.toContain("top-secret");
+    expect(prompt).not.toContain("body-secret");
+    expect(prompt).not.toContain("admin:password");
+    expect(prompt).not.toContain("path-token");
+    expect(prompt).not.toContain("icon-secret");
+    expect(prompt).not.toContain("icons:password");
+    expect(prompt).not.toContain("private/icon.svg");
+    expect(prompt).not.toContain("display-secret");
+  });
+
+  test("omits valid free-text display configuration from the migration prompt", () => {
+    const prompt = buildLegacyCustomWidgetMigrationPrompt(
+      {
+        id: "legacy-custom-jsx",
+        name: "Private service",
+        description: "Status",
+        iconUrl: null,
+        url: "https://example.test/api/status",
+        authType: "bearer",
+        headerName: null,
+        method: "GET",
+        requestBody: null,
+        displayType: "customJsx",
+        displayConfig: stringifySuperJson({
+          type: "customJsx",
+          template: "<Text>LEGACY_PRIVATE_MARKER Bearer sk-secret-123456</Text>",
+        }),
+        enabled: true,
+        createdAt: new Date(0),
+        updatedAt: new Date(0),
+        creatorId: null,
+      },
+      ["apiKey"],
+    );
+
+    expect(prompt).toContain("display configuration was intentionally omitted");
+    expect(prompt).not.toContain("LEGACY_PRIVATE_MARKER");
+    expect(prompt).not.toContain("Bearer sk-secret-123456");
+    expect(prompt).not.toContain("sk-secret-123456");
+  });
+});
diff --git a/packages/api/src/router/test/custom-widget/preview-options.spec.ts b/packages/api/src/router/test/custom-widget/preview-options.spec.ts
new file mode 100644
index 000000000..536e49861
--- /dev/null
+++ b/packages/api/src/router/test/custom-widget/preview-options.spec.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vitest";
+
+import type { CustomJsxRequest } from "@homarr/custom-widgets/core";
+
+import { resolvePreviewRequestParams } from "../../custom-widget/preview-procedure-helpers";
+import { resolveOptionRequestValues } from "../../custom-widget/management-queries";
+
+const loadRequest: CustomJsxRequest = {
+  source: "default",
+  kind: "query",
+  method: "GET",
+  path: "/endpoints/{option:environmentId}/containers",
+  auth: "inherit",
+  permission: "view",
+  trigger: "load",
+};
+
+describe("preview request option bindings", () => {
+  it("resolves load request parameters from the selected preview options", () => {
+    expect(resolvePreviewRequestParams(loadRequest, { environmentId: 7 }, {})).toEqual({
+      "option:environmentId": 7,
+    });
+  });
+
+  it("preserves invoking component parameters for manual requests", () => {
+    const manualRequest = {
+      ...loadRequest,
+      trigger: "manual" as const,
+      path: "/endpoints/{param:endpointId}/containers",
+    };
+    expect(resolvePreviewRequestParams(manualRequest, { environmentId: 7 }, { endpointId: 12 })).toEqual({
+      endpointId: 12,
+    });
+  });
+});
+
+describe("configuration option request bindings", () => {
+  it("resolves option configuration and runtime parameters in their own slots", () => {
+    const request: CustomJsxRequest = {
+      ...loadRequest,
+      path: "/environments/{option:environmentId}/containers/{param:containerId}",
+    };
+
+    expect(resolveOptionRequestValues(request, { environmentId: 7, containerId: 12, unrelated: true })).toEqual({
+      "option:environmentId": 7,
+      containerId: 12,
+    });
+  });
+});
diff --git a/packages/api/src/router/test/custom-widget/request-executor.spec.ts b/packages/api/src/router/test/custom-widget/request-executor.spec.ts
new file mode 100644
index 000000000..5d7a11dfd
--- /dev/null
+++ b/packages/api/src/router/test/custom-widget/request-executor.spec.ts
@@ -0,0 +1,65 @@
+import { describe, expect, test } from "vitest";
+
+import {
+  assertJsonBudget,
+  assertSafeStaticHeaders,
+  classifyAddress,
+  resolveAndValidateHost,
+  resolveSameOriginTarget,
+  validateCustomWidgetUrl,
+} from "../../custom-widget/request-executor";
+
+describe("custom widget request executor", () => {
+  test.each([
+    ["8.8.8.8", "public"],
+    ["10.0.0.1", "private"],
+    ["127.0.0.1", "loopback"],
+    ["169.254.169.254", "blocked"],
+    ["224.0.0.1", "blocked"],
+    ["::ffff:127.0.0.1", "blocked"],
+    ["fe80::1", "blocked"],
+  ] as const)("classifies %s as %s", (address, expected) => {
+    expect(classifyAddress(address)).toBe(expected);
+  });
+
+  test("enforces configured address scopes", async () => {
+    await expect(resolveAndValidateHost("10.0.0.1", "public")).rejects.toMatchObject({ code: "FORBIDDEN" });
+    await expect(resolveAndValidateHost("10.0.0.1", "private")).resolves.toHaveLength(1);
+    await expect(resolveAndValidateHost("127.0.0.1", "private")).rejects.toMatchObject({ code: "FORBIDDEN" });
+    await expect(resolveAndValidateHost("127.0.0.1", "loopback")).resolves.toHaveLength(1);
+    await expect(resolveAndValidateHost("169.254.169.254", "loopback")).rejects.toMatchObject({
+      code: "FORBIDDEN",
+    });
+  });
+
+  test("allows only credential-free HTTP(S) URLs without fragments", () => {
+    expect(validateCustomWidgetUrl("https://example.com/api").href).toBe("https://example.com/api");
+    expect(() => validateCustomWidgetUrl("file:///etc/passwd")).toThrow("Only HTTP and HTTPS");
+    expect(() => validateCustomWidgetUrl("https://user:password@example.com/api")).toThrow("credentials");
+    expect(() => validateCustomWidgetUrl("https://example.com/api#secret")).toThrow("fragments");
+  });
+
+  test("rejects cross-origin named request targets", () => {
+    expect(resolveSameOriginTarget("https://example.com/base", "https://example.com/status").pathname).toBe("/status");
+    expect(() => resolveSameOriginTarget("https://example.com/base", "https://attacker.example/status")).toThrow(
+      "origin",
+    );
+  });
+
+  test.each(["Authorization", "Cookie", "Host", "Proxy-Authorization", "Sec-Fetch-Site", "X-Forwarded-For"])(
+    "rejects the reserved %s header",
+    (header) => {
+      expect(() => assertSafeStaticHeaders({ [header]: "value" })).toThrow("reserved");
+    },
+  );
+
+  test("rejects response JSON that exceeds the depth budget", () => {
+    let nested: Record<string, unknown> = {};
+    const root = nested;
+    for (let index = 0; index < 40; index += 1) {
+      nested.child = {};
+      nested = nested.child as Record<string, unknown>;
+    }
+    expect(() => assertJsonBudget(root)).toThrow("deeply nested");
+  });
+});
diff --git a/packages/api/src/router/test/custom-widget/request-limits.spec.ts b/packages/api/src/router/test/custom-widget/request-limits.spec.ts
new file mode 100644
index 000000000..7e8eb6a12
--- /dev/null
+++ b/packages/api/src/router/test/custom-widget/request-limits.spec.ts
@@ -0,0 +1,30 @@
+import { expect, test } from "vitest";
+
+import { createId } from "@homarr/common";
+
+import { acquireCustomWidgetRequestLimit } from "../../custom-widget/request-limits";
+
+test("enforces the server-side DELETE rate limit with retry metadata", async () => {
+  const input = { category: "delete" as const, userId: createId(), itemId: createId(), definitionId: createId() };
+  for (let count = 0; count < 3; count += 1) {
+    const release = await acquireCustomWidgetRequestLimit(input);
+    await release();
+  }
+
+  try {
+    await acquireCustomWidgetRequestLimit(input);
+    expect.unreachable("the fourth DELETE request should be rate limited");
+  } catch (error) {
+    expect(error).toMatchObject({ code: "TOO_MANY_REQUESTS" });
+    const cause = (error as { cause?: { flatten?: () => Record<string, unknown> } }).cause;
+    expect(cause?.flatten?.()).toMatchObject({ retryAfterMs: expect.any(Number) });
+  }
+});
+
+test("enforces four concurrent requests per user and item", async () => {
+  const input = { category: "query" as const, userId: createId(), itemId: createId(), definitionId: createId() };
+  const releases = await Promise.all(Array.from({ length: 4 }, () => acquireCustomWidgetRequestLimit(input)));
+
+  await expect(acquireCustomWidgetRequestLimit(input)).rejects.toMatchObject({ code: "TOO_MANY_REQUESTS" });
+  await Promise.all(releases.map((release) => release()));
+});
diff --git a/packages/api/src/router/test/custom-widget/stored-definition.spec.ts b/packages/api/src/router/test/custom-widget/stored-definition.spec.ts
new file mode 100644
index 000000000..af604d1d3
--- /dev/null
+++ b/packages/api/src/router/test/custom-widget/stored-definition.spec.ts
@@ -0,0 +1,48 @@
+import { stringify as stringifySuperJson } from "superjson";
+import { describe, expect, test } from "vitest";
+
+import {
+  BUNDLED_CUSTOM_WIDGETS,
+  CUSTOM_WIDGET_STARTER,
+  customWidgetDefinitionSchema,
+} from "@homarr/custom-widgets/core";
+
+import {
+  safeParseStoredCustomWidgetDefinition,
+  serializeCustomWidgetDefinition,
+} from "../../custom-widget/stored-definition";
+
+describe("stored custom widget definitions", () => {
+  test("parses a valid stored definition", () => {
+    const result = safeParseStoredCustomWidgetDefinition(
+      serializeCustomWidgetDefinition(customWidgetDefinitionSchema.parse(CUSTOM_WIDGET_STARTER)),
+    );
+
+    expect(result).toMatchObject({ success: true, widget: { $schema: "homarr-custom-widget-v2" } });
+  });
+
+  test("returns useful issues for an invalid stored request instead of throwing", () => {
+    const currency = BUNDLED_CUSTOM_WIDGETS.find(({ id }) => id === "seed-currency-exchange");
+    if (!currency) throw new Error("Currency Exchange bundled widget is missing");
+
+    const stored = serializeCustomWidgetDefinition(customWidgetDefinitionSchema.parse(currency.widget));
+    const result = safeParseStoredCustomWidgetDefinition({
+      ...stored,
+      requests: stringifySuperJson({ rates: { path: "/latest/{option:missing}" } }),
+    });
+
+    expect(result).toEqual({
+      success: false,
+      issues: expect.arrayContaining([expect.objectContaining({ path: "requests.rates" })]),
+    });
+  });
+
+  test("contains malformed serialized data", () => {
+    const stored = serializeCustomWidgetDefinition(customWidgetDefinitionSchema.parse(CUSTOM_WIDGET_STARTER));
+
+    expect(safeParseStoredCustomWidgetDefinition({ ...stored, requests: "not-json" })).toEqual({
+      success: false,
+      issues: [{ message: "Stored widget data could not be read" }],
+    });
+  });
+});
diff --git a/packages/api/src/router/test/custom-widget/workshop-error-privacy.spec.ts b/packages/api/src/router/test/custom-widget/workshop-error-privacy.spec.ts
new file mode 100644
index 000000000..1611e6288
--- /dev/null
+++ b/packages/api/src/router/test/custom-widget/workshop-error-privacy.spec.ts
@@ -0,0 +1,113 @@
+import type { Session } from "@homarr/auth";
+import { createId } from "@homarr/common";
+import { createDb } from "@homarr/db/test";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  get: vi.fn(async (_id: string): Promise<unknown> => undefined),
+  list: vi.fn(async (_options: unknown): Promise<unknown> => undefined),
+  logger: {
+    debug: vi.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+  },
+}));
+
+vi.mock("@homarr/core/infrastructure/logs", () => ({
+  createLogger: () => mocks.logger,
+}));
+
+vi.mock("@homarr/workshop/backend", () => ({
+  WorkshopBackend: class {
+    public get(id: string) {
+      return mocks.get(id);
+    }
+
+    public list(options: unknown) {
+      return mocks.list(options);
+    }
+  },
+}));
+
+import { customWidgetRouter } from "../../custom-widget/custom-widget-router";
+
+const session = {
+  user: {
+    id: createId(),
+    permissions: ["admin"],
+    colorScheme: "light",
+  },
+  expires: new Date(Date.now() + 60_000).toISOString(),
+} satisfies Session;
+
+const createCaller = () =>
+  customWidgetRouter.createCaller({
+    db: createDb(),
+    deviceType: undefined,
+    session,
+  });
+
+const createTokenizedFailure = (apiKey: string) => {
+  const tokenizedUrl = `https://workshop.example/api/submissions?access_token=${apiKey}`;
+  const error = new Error(`Workshop request failed for ${tokenizedUrl}`);
+  error.name = `WorkshopTransportError:${tokenizedUrl}`;
+  return error;
+};
+
+const expectSafeFailure = (
+  error: unknown,
+  apiKey: string,
+  logMessage: string,
+  event: "workshop_widget_lookup_failed" | "workshop_widget_search_failed",
+) => {
+  expect(error).toMatchObject({
+    code: "BAD_GATEWAY",
+    message: "Workshop is unavailable",
+  });
+  expect((error as Error).cause).toBeUndefined();
+  expect(String(error)).not.toContain(apiKey);
+  expect(String(error)).not.toContain("access_token");
+  expect(mocks.logger.error).toHaveBeenCalledWith(logMessage, {
+    event,
+    errorName: "WorkshopBackendError",
+  });
+  expect(JSON.stringify(mocks.logger.error.mock.calls)).not.toContain(apiKey);
+  expect(JSON.stringify(mocks.logger.error.mock.calls)).not.toContain("access_token");
+};
+
+describe("Workshop backend error privacy", () => {
+  beforeEach(() => {
+    mocks.get.mockReset();
+    mocks.list.mockReset();
+    mocks.logger.error.mockClear();
+  });
+
+  test("redacts backend lookup failures from TRPC output and logs", async () => {
+    const apiKey = "workshop-lookup-secret";
+    mocks.get.mockRejectedValueOnce(createTokenizedFailure(apiKey));
+
+    const error = await createCaller()
+      .workshopGet({ submissionId: "submission-id" })
+      .then(
+        () => undefined,
+        (cause: unknown) => cause,
+      );
+
+    expectSafeFailure(error, apiKey, "Workshop widget lookup failed", "workshop_widget_lookup_failed");
+  });
+
+  test("redacts backend search failures from TRPC output and logs", async () => {
+    const apiKey = "workshop-search-secret";
+    mocks.list.mockRejectedValueOnce(createTokenizedFailure(apiKey));
+
+    const error = await createCaller()
+      .workshopSearch({ query: "weather" })
+      .then(
+        () => undefined,
+        (cause: unknown) => cause,
+      );
+
+    expectSafeFailure(error, apiKey, "Workshop widget search failed", "workshop_widget_search_failed");
+  });
+});
diff --git a/packages/api/src/router/test/location.spec.ts b/packages/api/src/router/test/location.spec.ts
new file mode 100644
index 000000000..64c6cdfb4
--- /dev/null
+++ b/packages/api/src/router/test/location.spec.ts
@@ -0,0 +1,36 @@
+// @vitest-environment node
+
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+import { createDb } from "@homarr/db/test";
+
+import { locationRouter } from "../location";
+
+const mocks = vi.hoisted(() => ({ fetch: vi.fn() }));
+
+vi.mock("@homarr/core/infrastructure/http", () => ({
+  fetchWithTrustedCertificatesAsync: mocks.fetch,
+}));
+
+vi.mock("@homarr/core/infrastructure/http/timeout", () => ({
+  withTimeoutAsync: async (callback: (signal: AbortSignal) => Promise<Response>) =>
+    await callback(new AbortController().signal),
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.fetch.mockResolvedValue(new Response(JSON.stringify({ results: [] })));
+});
+
+describe("locationRouter", () => {
+  test("encodes the complete search text as one name parameter", async () => {
+    const caller = locationRouter.createCaller({ db: createDb(), deviceType: undefined, session: null });
+
+    await caller.searchCity({ query: "Paris&language=xx&token=secret" });
+
+    const requestedUrl = new URL(mocks.fetch.mock.calls[0]?.[0] as string);
+    expect(requestedUrl.searchParams.get("name")).toBe("Paris&language=xx&token=secret");
+    expect(requestedUrl.searchParams.has("language")).toBe(false);
+    expect(requestedUrl.searchParams.has("token")).toBe(false);
+  });
+});
diff --git a/packages/api/src/router/test/section.spec.ts b/packages/api/src/router/test/section.spec.ts
new file mode 100644
index 000000000..f94c8afd1
--- /dev/null
+++ b/packages/api/src/router/test/section.spec.ts
@@ -0,0 +1,90 @@
+import { stringify } from "superjson";
+import { describe, expect, it } from "vitest";
+
+import type { Session } from "@homarr/auth";
+import { createId } from "@homarr/common";
+import { eq } from "@homarr/db";
+import { boards, sectionCollapseStates, sections, users } from "@homarr/db/schema";
+import { createDb } from "@homarr/db/test";
+
+import { sectionRouter } from "../section/section-router";
+
+const userId = createId();
+const session = {
+  user: {
+    id: userId,
+    permissions: [],
+    colorScheme: "light",
+  },
+  expires: new Date().toISOString(),
+} satisfies Session;
+
+const createCallerAsync = async () => {
+  const db = createDb();
+  const boardId = createId();
+
+  await db.insert(users).values({ id: userId });
+  await db.insert(boards).values({
+    id: boardId,
+    name: createId(),
+    creatorId: userId,
+  });
+
+  return {
+    boardId,
+    db,
+    caller: sectionRouter.createCaller({
+      db,
+      deviceType: undefined,
+      session,
+    }),
+  };
+};
+
+describe("changeCollapsed", () => {
+  it("rejects a root section", async () => {
+    const { boardId, caller, db } = await createCallerAsync();
+    const sectionId = createId();
+    await db.insert(sections).values({
+      id: sectionId,
+      boardId,
+      kind: "empty",
+      xOffset: 0,
+      yOffset: 0,
+    });
+
+    await expect(caller.changeCollapsed({ sectionId, collapsed: true })).rejects.toThrow("Section cannot be collapsed");
+  });
+
+  it("creates and updates collapse state for an enabled container", async () => {
+    const { boardId, caller, db } = await createCallerAsync();
+    const sectionId = createId();
+    await db.insert(sections).values({
+      id: sectionId,
+      boardId,
+      kind: "container",
+      options: stringify({ collapsible: true }),
+    });
+
+    await caller.changeCollapsed({ sectionId, collapsed: true });
+    await caller.changeCollapsed({ sectionId, collapsed: false });
+
+    const states = await db.query.sectionCollapseStates.findMany({
+      where: eq(sectionCollapseStates.sectionId, sectionId),
+    });
+    expect(states).toHaveLength(1);
+    expect(states[0]?.collapsed).toBe(false);
+  });
+
+  it("rejects a container when collapsing is disabled", async () => {
+    const { boardId, caller, db } = await createCallerAsync();
+    const sectionId = createId();
+    await db.insert(sections).values({
+      id: sectionId,
+      boardId,
+      kind: "container",
+    });
+
+    await expect(caller.changeCollapsed({ sectionId, collapsed: true })).rejects.toThrow("Section cannot be collapsed");
+  });
+});
diff --git a/packages/api/src/router/test/update-checker.spec.ts b/packages/api/src/router/test/update-checker.spec.ts
new file mode 100644
index 000000000..e35209f06
--- /dev/null
+++ b/packages/api/src/router/test/update-checker.spec.ts
@@ -0,0 +1,58 @@
+import { describe, expect, test, vi } from "vitest";
+
+import type { Session } from "@homarr/auth";
+import type { Database } from "@homarr/db";
+import type { GroupPermissionKey } from "@homarr/definitions";
+
+import { updateCheckerRouter } from "../update-checker";
+
+const mocks = vi.hoisted(() => ({
+  getDataAsync: vi.fn(async () => ({
+    data: { availableUpdates: [{ tagName: "v99.0.0" }] },
+    timestamp: new Date(),
+  })),
+}));
+
+vi.mock("@homarr/request-handler/update-checker", () => ({
+  updateCheckerRequestHandler: {
+    handler: () => ({ getDataAsync: mocks.getDataAsync }),
+  },
+}));
+
+const createSession = (permissions: GroupPermissionKey[]): Session => ({
+  user: {
+    id: "user",
+    permissions,
+    colorScheme: "light",
+  },
+  expires: new Date().toISOString(),
+});
+
+const createCaller = (session: Session | null) =>
+  updateCheckerRouter.createCaller({
+    db: null as unknown as Database,
+    deviceType: undefined,
+    session,
+  });
+
+describe("update checker authorization", () => {
+  test("allows administrators to read the cached result", async () => {
+    await expect(createCaller(createSession(["admin"])).getAvailableUpdates()).resolves.toEqual([
+      { tagName: "v99.0.0" },
+    ]);
+  });
+
+  test("rejects authenticated users without admin permission", async () => {
+    await expect(createCaller(createSession([])).getAvailableUpdates()).rejects.toThrow("Permission denied");
+  });
+
+  test("rejects anonymous users", async () => {
+    await expect(createCaller(null).getAvailableUpdates()).rejects.toThrow("UNAUTHORIZED");
+  });
+
+  test("returns an empty result when the cache reader fails", async () => {
+    mocks.getDataAsync.mockRejectedValueOnce(new Error("Redis unavailable"));
+
+    await expect(createCaller(createSession(["admin"])).getAvailableUpdates()).resolves.toEqual([]);
+  });
+});
diff --git a/packages/api/src/router/test/widgets/custom-api-v2.spec.ts b/packages/api/src/router/test/widgets/custom-api-v2.spec.ts
new file mode 100644
index 000000000..a5e6f3c50
--- /dev/null
+++ b/packages/api/src/router/test/widgets/custom-api-v2.spec.ts
@@ -0,0 +1,204 @@
+import { stringify as stringifySuperJson } from "superjson";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+import type { Session } from "@homarr/auth";
+import { createId } from "@homarr/common";
+import { eq } from "@homarr/db";
+import { boardUserPermissions, boards, customWidgetDefinitions, items, users } from "@homarr/db/schema";
+import { createDb } from "@homarr/db/test";
+import type { HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
+
+const mocks = vi.hoisted(() => ({
+  executeRequest: vi.fn(async () => ({ ok: true, status: 200, statusText: "OK", data: { value: 42 } })),
+}));
+
+vi.mock("../../custom-widget/request-executor", () => ({
+  executeCustomWidgetRequest: mocks.executeRequest,
+  invalidateCustomWidgetResponseCache: vi.fn(),
+}));
+
+vi.mock("../../custom-widget/request-limits", () => ({
+  acquireCustomWidgetRequestLimit: vi.fn(async () => async () => undefined),
+}));
+
+import { serializeCustomWidgetDefinition } from "../../custom-widget/stored-definition";
+import { customApiRouter } from "../../widgets/custom-api";
+
+const definition: HomarrCustomWidgetV2 = {
+  $schema: "homarr-custom-widget-v2",
+  name: "Router test widget",
+  sources: {
+    default: {
+      name: "API",
+      baseUrl: "https://example.com",
+      networkScope: "public",
+      auth: "none",
+    },
+  },
+  requests: {
+    "load-status": {
+      source: "default",
+      kind: "query",
+      method: "GET",
+      path: "/status",
+      auth: "inherit",
+      permission: "view",
+      trigger: "load",
+    },
+    status: {
+      source: "default",
+      kind: "query",
+      method: "GET",
+      path: "/status/{param:name}",
+      auth: "inherit",
+      permission: "view",
+      trigger: "manual",
+    },
+    toggle: {
+      source: "default",
+      kind: "action",
+      method: "POST",
+      path: "/toggle",
+      body: { enabled: { $param: "enabled" } },
+      auth: "inherit",
+      permission: "modify",
+      trigger: "manual",
+    },
+    delete: {
+      source: "default",
+      kind: "action",
+      method: "DELETE",
+      path: "/resource",
+      auth: "inherit",
+      permission: "full",
+      trigger: "manual",
+      confirmation: { title: "Delete resource", message: "Delete this resource?", destructive: true },
+    },
+  },
+  options: {},
+  template: "<Text>{data['load-status']?.value}</Text>",
+};
+
+const createSession = (userId: string): Session => ({
+  user: { id: userId, permissions: [], colorScheme: "light" },
+  expires: new Date(Date.now() + 60_000).toISOString(),
+});
+
+async function setup(isPublic = true) {
+  const db = createDb();
+  const ownerId = createId();
+  const boardId = createId();
+  const itemId = createId();
+  const definitionId = createId();
+  await db.insert(users).values({ id: ownerId });
+  await db.insert(boards).values({ id: boardId, name: createId(), creatorId: ownerId, isPublic });
+  await db.insert(customWidgetDefinitions).values({
+    id: definitionId,
+    ...serializeCustomWidgetDefinition(definition),
+    creatorId: ownerId,
+  });
+  await db.insert(items).values({
+    id: itemId,
+    boardId,
+    kind: "customApi",
+    options: stringifySuperJson({ definitionId, configuration: {}, configurationVersion: 1 }),
+  });
+  return { db, ownerId, boardId, itemId, definitionId };
+}
+
+describe("Custom JSX v2 board router", () => {
+  beforeEach(() => mocks.executeRequest.mockClear());
+
+  test("allows public queries only through the definition placed on an accessible board", async () => {
+    const { db, itemId } = await setup();
+    const caller = customApiRouter.createCaller({ db, deviceType: undefined, session: null });
+
+    await expect(caller.queryRequest({ itemId, requestId: "status", params: { name: "homarr" } })).resolves.toEqual(
+      expect.objectContaining({ ok: true, data: { value: 42 } }),
+    );
+    await expect(caller.queryRequest({ itemId, requestId: "missing", params: {} })).rejects.toMatchObject({
+      code: "NOT_FOUND",
+    });
+    expect(mocks.executeRequest).toHaveBeenCalledOnce();
+  });
+
+  test("hides private boards and disabled definitions before executing a request", async () => {
+    const privateSetup = await setup(false);
+    const anonymous = customApiRouter.createCaller({
+      db: privateSetup.db,
+      deviceType: undefined,
+      session: null,
+    });
+    await expect(
+      anonymous.queryRequest({ itemId: privateSetup.itemId, requestId: "status", params: { name: "homarr" } }),
+    ).rejects.toMatchObject({ code: "NOT_FOUND" });
+
+    const enabledSetup = await setup();
+    await enabledSetup.db
+      .update(customWidgetDefinitions)
+      .set({ enabled: false })
+      .where(eq(customWidgetDefinitions.id, enabledSetup.definitionId));
+    const publicCaller = customApiRouter.createCaller({ db: enabledSetup.db, deviceType: undefined, session: null });
+    await expect(publicCaller.getData({ itemId: enabledSetup.itemId })).rejects.toMatchObject({ code: "FORBIDDEN" });
+    await expect(
+      publicCaller.queryRequest({ itemId: enabledSetup.itemId, requestId: "status", params: { name: "homarr" } }),
+    ).rejects.toMatchObject({ code: "FORBIDDEN" });
+    const ownerCaller = customApiRouter.createCaller({
+      db: enabledSetup.db,
+      deviceType: undefined,
+      session: createSession(enabledSetup.ownerId),
+    });
+    await expect(
+      ownerCaller.executeAction({ itemId: enabledSetup.itemId, requestId: "toggle", params: { enabled: true } }),
+    ).rejects.toMatchObject({ code: "FORBIDDEN" });
+    expect(mocks.executeRequest).not.toHaveBeenCalled();
+  });
+
+  test("rejects request-kind and parameter mismatches", async () => {
+    const { db, itemId, ownerId } = await setup();
+    const caller = customApiRouter.createCaller({ db, deviceType: undefined, session: createSession(ownerId) });
+
+    await expect(caller.queryRequest({ itemId, requestId: "toggle", params: { enabled: true } })).rejects.toMatchObject(
+      { code: "NOT_FOUND" },
+    );
+    await expect(caller.queryRequest({ itemId, requestId: "status", params: {} })).rejects.toThrow();
+    expect(mocks.executeRequest).not.toHaveBeenCalled();
+  });
+
+  test("enforces modify permission and renders an authorized action body", async () => {
+    const { db, itemId, boardId } = await setup(false);
+    const editorId = createId();
+    await db.insert(users).values({ id: editorId });
+    const caller = customApiRouter.createCaller({ db, deviceType: undefined, session: createSession(editorId) });
+
+    await expect(
+      caller.executeAction({ itemId, requestId: "toggle", params: { enabled: true } }),
+    ).rejects.toMatchObject({ code: "NOT_FOUND" });
+    await db.insert(boardUserPermissions).values({ boardId, userId: editorId, permission: "modify" });
+    await expect(caller.executeAction({ itemId, requestId: "toggle", params: { enabled: true } })).resolves.toEqual(
+      expect.objectContaining({ ok: true }),
+    );
+    expect(mocks.executeRequest).toHaveBeenCalledWith(
+      expect.objectContaining({ method: "POST", body: '{"enabled":true}' }),
+    );
+  });
+
+  test("requires confirmation and full permission for DELETE actions", async () => {
+    const { db, itemId, boardId, ownerId } = await setup(false);
+    const owner = customApiRouter.createCaller({ db, deviceType: undefined, session: createSession(ownerId) });
+    await expect(owner.executeAction({ itemId, requestId: "delete", params: {} })).rejects.toMatchObject({
+      code: "PRECONDITION_FAILED",
+    });
+
+    const editorId = createId();
+    await db.insert(users).values({ id: editorId });
+    await db.insert(boardUserPermissions).values({ boardId, userId: editorId, permission: "modify" });
+    const editor = customApiRouter.createCaller({ db, deviceType: undefined, session: createSession(editorId) });
+    await expect(
+      editor.executeAction({ itemId, requestId: "delete", params: {}, confirmed: true }),
+    ).rejects.toMatchObject({ code: "NOT_FOUND" });
+    await expect(owner.executeAction({ itemId, requestId: "delete", params: {}, confirmed: true })).resolves.toEqual(
+      expect.objectContaining({ ok: true }),
+    );
+  });
+});
diff --git a/packages/api/src/router/test/widgets/immich.spec.ts b/packages/api/src/router/test/widgets/immich.spec.ts
new file mode 100644
index 000000000..eec383aaa
--- /dev/null
+++ b/packages/api/src/router/test/widgets/immich.spec.ts
@@ -0,0 +1,76 @@
+// @vitest-environment node
+
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+import type { Session } from "@homarr/auth";
+import { createId } from "@homarr/common";
+import type { Database } from "@homarr/db";
+import { integrations, integrationUserPermissions, users } from "@homarr/db/schema";
+import { createDb } from "@homarr/db/test";
+
+import { immichRouter } from "../../widgets/immich";
+
+vi.hoisted(() => {
+  process.env.SKIP_ENV_VALIDATION = "true";
+});
+
+const mocks = vi.hoisted(() => ({
+  albumsHandler: vi.fn(),
+}));
+
+vi.mock("@homarr/request-handler/immich", () => ({
+  immichAlbumRequestHandler: { handler: vi.fn() },
+  immichStatsRequestHandler: { handler: vi.fn() },
+  immichAlbumsRequestHandler: {
+    handler: (_integration: unknown, input: unknown) => {
+      mocks.albumsHandler(input);
+      return { getDataAsync: async () => ({ data: [], timestamp: new Date() }) };
+    },
+  },
+}));
+
+const createSession = (userId: string): Session => ({
+  user: { id: userId, permissions: [], colorScheme: "light" },
+  expires: new Date().toISOString(),
+});
+
+const createCallerAsync = async () => {
+  const db = createDb();
+  const userId = createId();
+  const integrationId = createId();
+  await db.insert(users).values({ id: userId });
+  await db.insert(integrations).values({
+    id: integrationId,
+    kind: "immich",
+    name: "Immich",
+    url: "https://immich.example.com",
+  });
+  await db.insert(integrationUserPermissions).values({ integrationId, userId, permission: "use" });
+
+  return {
+    integrationId,
+    caller: immichRouter.createCaller({ db: db as Database, deviceType: undefined, session: createSession(userId) }),
+  };
+};
+
+describe("immichRouter.getAlbums", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  test("passes a validated limit to the cached request handler", async () => {
+    const { caller, integrationId } = await createCallerAsync();
+
+    await caller.getAlbums({ integrationId, limit: 50 });
+
+    expect(mocks.albumsHandler).toHaveBeenCalledWith({ limit: 50 });
+    await expect(caller.getAlbums({ integrationId, limit: 0 })).rejects.toMatchObject({ code: "BAD_REQUEST" });
+    await expect(caller.getAlbums({ integrationId, limit: 501 })).rejects.toMatchObject({ code: "BAD_REQUEST" });
+  });
+
+  test("keeps the limit optional for unbounded callers", async () => {
+    const { caller, integrationId } = await createCallerAsync();
+
+    await caller.getAlbums({ integrationId });
+
+    expect(mocks.albumsHandler).toHaveBeenCalledWith({ limit: undefined });
+  });
+});
diff --git a/packages/api/src/router/test/widgets/options.spec.ts b/packages/api/src/router/test/widgets/options.spec.ts
new file mode 100644
index 000000000..6253da22f
--- /dev/null
+++ b/packages/api/src/router/test/widgets/options.spec.ts
@@ -0,0 +1,107 @@
+import SuperJSON from "superjson";
+import { describe, expect, test } from "vitest";
+
+import type { Session } from "@homarr/auth";
+import { createId } from "@homarr/common";
+import { eq } from "@homarr/db";
+import { boards, items, users } from "@homarr/db/schema";
+import { createDb } from "@homarr/db/test";
+
+import { optionsRouter } from "../../widgets/options";
+
+const createSession = (userId: string, isAdmin = false): Session => ({
+  user: {
+    id: userId,
+    permissions: isAdmin ? ["admin"] : [],
+    colorScheme: "light",
+  },
+  expires: new Date(Date.now() + 60_000).toISOString(),
+});
+
+async function setup(kind: "customApi" | "weather") {
+  const db = createDb();
+  const userId = createId();
+  const boardId = createId();
+  const itemId = createId();
+  await db.insert(users).values({ id: userId });
+  await db.insert(boards).values({ id: boardId, name: createId(), creatorId: userId });
+  await db.insert(items).values({
+    id: itemId,
+    boardId,
+    kind,
+    options: SuperJSON.stringify(
+      kind === "customApi"
+        ? { definitionId: "definition-1", refreshInterval: 30, configuration: { server: "primary" } }
+        : { location: "Paris" },
+    ),
+  });
+  return { db, userId, boardId, itemId };
+}
+
+describe("saveItemOptions Custom Widget access", () => {
+  test("rejects direct Custom Widget reconfiguration by a non-admin board modifier", async () => {
+    const { db, userId, boardId, itemId } = await setup("customApi");
+    const caller = optionsRouter.createCaller({ db, deviceType: undefined, session: createSession(userId) });
+
+    await expect(
+      caller.saveItemOptions({
+        boardId,
+        itemId,
+        newOptions: {
+          definitionId: "definition-2",
+          refreshInterval: 1,
+          configuration: { server: "attacker" },
+        },
+      }),
+    ).rejects.toMatchObject({ code: "FORBIDDEN" });
+
+    const stored = await db.query.items.findFirst({ where: eq(items.id, itemId) });
+    expect(SuperJSON.parse(stored?.options ?? "")).toMatchObject({
+      definitionId: "definition-1",
+      refreshInterval: 30,
+      configuration: { server: "primary" },
+    });
+  });
+
+  test("allows a Homarr admin to reconfigure a Custom Widget placement", async () => {
+    const { db, userId, boardId, itemId } = await setup("customApi");
+    const caller = optionsRouter.createCaller({ db, deviceType: undefined, session: createSession(userId, true) });
+
+    await expect(
+      caller.saveItemOptions({ boardId, itemId, newOptions: { refreshInterval: 60 } }),
+    ).resolves.toBeUndefined();
+
+    const stored = await db.query.items.findFirst({ where: eq(items.id, itemId) });
+    expect(SuperJSON.parse(stored?.options ?? "")).toMatchObject({ refreshInterval: 60 });
+  });
+
+  test("allows normalized missing defaults without treating them as reconfiguration", async () => {
+    const { db, userId, boardId, itemId } = await setup("customApi");
+    const stored = await db.query.items.findFirst({ where: eq(items.id, itemId) });
+    const options = SuperJSON.parse<Record<string, unknown>>(stored?.options ?? "");
+    delete options.configuration;
+    delete options.configurationVersion;
+    await db
+      .update(items)
+      .set({ options: SuperJSON.stringify(options) })
+      .where(eq(items.id, itemId));
+    const caller = optionsRouter.createCaller({ db, deviceType: undefined, session: createSession(userId) });
+
+    await expect(
+      caller.saveItemOptions({
+        boardId,
+        itemId,
+        newOptions: { configuration: {}, configurationVersion: 1 },
+      }),
+    ).resolves.toBeUndefined();
+  });
+
+  test("preserves ordinary board-modifier option updates for other widgets", async () => {
+    const { db, userId, boardId, itemId } = await setup("weather");
+    const caller = optionsRouter.createCaller({ db, deviceType: undefined, session: createSession(userId) });
+
+    await expect(
+      caller.saveItemOptions({ boardId, itemId, newOptions: { location: "Lyon" } }),
+    ).resolves.toBeUndefined();
+  });
+});
diff --git a/packages/api/src/router/test/widgets/partial-integration-failures.spec.ts b/packages/api/src/router/test/widgets/partial-integration-failures.spec.ts
new file mode 100644
index 000000000..d72d125d2
--- /dev/null
+++ b/packages/api/src/router/test/widgets/partial-integration-failures.spec.ts
@@ -0,0 +1,284 @@
+// @vitest-environment node
+
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+import type { Session } from "@homarr/auth";
+import { createId } from "@homarr/common";
+import type { Database } from "@homarr/db";
+import { integrations, integrationUserPermissions, users } from "@homarr/db/schema";
+import { createDb } from "@homarr/db/test";
+import type { IntegrationKind } from "@homarr/definitions";
+import type { MediaRequest, MediaRequestStats } from "@homarr/integrations/types";
+import type * as MediaRequestListHandlerModule from "@homarr/request-handler/media-request-list";
+
+import { calendarRouter } from "../../widgets/calendar";
+import { beszelRouter } from "../../widgets/beszel";
+import { firewallRouter } from "../../widgets/firewall";
+import { indexerManagerRouter } from "../../widgets/indexer-manager";
+import { mediaOrganizerRouter } from "../../widgets/media-organizer";
+import { mediaRequestsRouter } from "../../widgets/media-requests";
+import { mediaServerRouter } from "../../widgets/media-server";
+import { notificationsRouter } from "../../widgets/notifications";
+import { vpnRouter } from "../../widgets/vpn";
+
+vi.hoisted(() => {
+  process.env.SKIP_ENV_VALIDATION = "true";
+});
+
+const createHandler = <T>(integration: { name: string }, data: T) => ({
+  getDataAsync: async () => {
+    if (integration.name === "Offline") {
+      throw new Error(
+        "GET http://admin:password@internal.example/private/path?token=secret returned\nprivate response body",
+      );
+    }
+    return { data, timestamp: new Date() };
+  },
+});
+
+vi.mock("@homarr/request-handler/calendar", () => ({
+  calendarMonthRequestHandler: { handler: (integration: { name: string }) => createHandler(integration, []) },
+}));
+
+vi.mock("@homarr/request-handler/media-server", () => ({
+  mediaServerRequestHandler: { handler: (integration: { name: string }) => createHandler(integration, []) },
+}));
+
+vi.mock("@homarr/request-handler/media-organizer", () => ({
+  mediaOrganizerRequestHandler: {
+    handler: (integration: { name: string }) =>
+      createHandler(integration, { missing: [], missingCount: 0, queued: [], queuedCount: 0 }),
+  },
+}));
+
+vi.mock("@homarr/request-handler/beszel", () => ({
+  beszelSystemsRequestHandler: { handler: (integration: { name: string }) => createHandler(integration, []) },
+}));
+
+vi.mock("@homarr/request-handler/firewall", () => ({
+  firewallCpuRequestHandler: { handler: (integration: { name: string }) => createHandler(integration, { total: 1 }) },
+  firewallInterfacesRequestHandler: { handler: (integration: { name: string }) => createHandler(integration, []) },
+  firewallMemoryRequestHandler: {
+    handler: (integration: { name: string }) => createHandler(integration, { used: 1, total: 2, percent: 50 }),
+  },
+  firewallVersionRequestHandler: {
+    handler: (integration: { name: string }) => createHandler(integration, { version: "1.0" }),
+  },
+}));
+
+vi.mock("@homarr/request-handler/indexer-manager", () => ({
+  indexerManagerRequestHandler: { handler: (integration: { name: string }) => createHandler(integration, []) },
+}));
+
+vi.mock("@homarr/request-handler/notifications", () => ({
+  notificationsRequestHandler: { handler: (integration: { name: string }) => createHandler(integration, []) },
+}));
+
+vi.mock("@homarr/request-handler/vpn", () => ({
+  vpnSummaryHandler: { handler: (integration: { name: string }) => createHandler(integration, { connected: true }) },
+}));
+
+vi.mock("@homarr/request-handler/media-request-list", async (importOriginal) => {
+  const actual = await importOriginal<typeof MediaRequestListHandlerModule>();
+  return {
+    ...actual,
+    mediaRequestListRequestHandler: {
+      handler: (integration: { name: string }) =>
+        createHandler(integration, [
+          {
+            id: 42,
+            name: "Healthy request",
+            type: "movie",
+            backdropImageUrl: "https://example.com/backdrop.jpg",
+            posterImagePath: "https://example.com/poster.jpg",
+            href: "https://example.com/request/42",
+            createdAt: new Date("2026-08-01T12:00:00Z"),
+            status: "pending",
+            availability: "requested",
+          } satisfies MediaRequest,
+        ]),
+    },
+  };
+});
+
+vi.mock("@homarr/request-handler/media-request-stats", () => ({
+  mediaRequestStatsRequestHandler: {
+    handler: (integration: { name: string }) =>
+      createHandler(integration, {
+        stats: { total: 0, movie: 0, tv: 0, pending: 0, approved: 0, declined: 0, processing: 0, available: 0 },
+        users: [
+          {
+            id: 7,
+            displayName: "Healthy user",
+            avatar: "https://example.com/avatar.jpg",
+            requestCount: 3,
+            link: "https://example.com/user/7",
+          },
+        ],
+      } satisfies MediaRequestStats),
+  },
+}));
+
+const createSession = (userId: string): Session => ({
+  user: { id: userId, permissions: [], colorScheme: "light" },
+  expires: new Date().toISOString(),
+});
+
+const setupAsync = async (kind: IntegrationKind) => {
+  const db = createDb();
+  const userId = createId();
+  const onlineId = createId();
+  const offlineId = createId();
+  await db.insert(users).values({ id: userId });
+  await db.insert(integrations).values([
+    { id: onlineId, kind, name: "Online", url: "https://online.example.com" },
+    { id: offlineId, kind, name: "Offline", url: "https://offline.example.com" },
+  ]);
+  await db.insert(integrationUserPermissions).values([
+    { integrationId: onlineId, userId, permission: "use" },
+    { integrationId: offlineId, userId, permission: "use" },
+  ]);
+  return {
+    db: db as Database,
+    session: createSession(userId),
+    integrationIds: [onlineId, offlineId],
+    onlineId,
+    offlineId,
+  };
+};
+
+beforeEach(() => vi.clearAllMocks());
+
+describe("partial integration failures", () => {
+  test("calendar and media server retain a failed integration record", async () => {
+    const calendar = await setupAsync("sonarr");
+    const calendarResults = await calendarRouter
+      .createCaller({ db: calendar.db, deviceType: undefined, session: calendar.session })
+      .findAllEvents({
+        integrationIds: calendar.integrationIds,
+        year: 2026,
+        month: 7,
+        releaseType: [],
+        showUnmonitored: false,
+      });
+    expect(calendarResults).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          integration: expect.objectContaining({ id: calendar.offlineId }),
+          error: "INTEGRATION_REQUEST_FAILED",
+        }),
+      ]),
+    );
+    expect(JSON.stringify(calendarResults)).not.toContain("secret");
+
+    const mediaServer = await setupAsync("plex");
+    const streamResults = await mediaServerRouter
+      .createCaller({ db: mediaServer.db, deviceType: undefined, session: mediaServer.session })
+      .getCurrentStreams({ integrationIds: mediaServer.integrationIds, showOnlyPlaying: false });
+    expect(streamResults).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          integrationId: mediaServer.offlineId,
+          sessions: [],
+          error: "INTEGRATION_REQUEST_FAILED",
+        }),
+      ]),
+    );
+    expect(JSON.stringify(streamResults)).not.toContain("secret");
+  });
+
+  test("media request responses expose failed integrations without dropping successful data", async () => {
+    const mediaRequests = await setupAsync("overseerr");
+    const caller = mediaRequestsRouter.createCaller({
+      db: mediaRequests.db,
+      deviceType: undefined,
+      session: mediaRequests.session,
+    });
+
+    const latest = await caller.getLatestRequests({
+      integrationIds: mediaRequests.integrationIds,
+      statuses: ["pending"],
+      recentDays: 0,
+    });
+    expect(latest.requests).toEqual([
+      expect.objectContaining({
+        id: 42,
+        name: "Healthy request",
+        integrationId: mediaRequests.onlineId,
+        integration: expect.objectContaining({ id: mediaRequests.onlineId }),
+      }),
+    ]);
+    expect(latest.failedIntegrations).toEqual([
+      expect.objectContaining({ integrationId: mediaRequests.offlineId, error: "INTEGRATION_REQUEST_FAILED" }),
+    ]);
+    expect(JSON.stringify(latest)).not.toContain("secret");
+
+    const stats = await caller.getStats({ integrationIds: mediaRequests.integrationIds });
+    expect(stats.failedIntegrations).toEqual([
+      expect.objectContaining({ integrationId: mediaRequests.offlineId, error: "INTEGRATION_REQUEST_FAILED" }),
+    ]);
+    expect(JSON.stringify(stats)).not.toContain("secret");
+    expect(stats.stats).toHaveLength(1);
+    expect(stats.users).toEqual([
+      expect.objectContaining({
+        id: 7,
+        displayName: "Healthy user",
+        integration: expect.objectContaining({ id: mediaRequests.onlineId }),
+      }),
+    ]);
+  });
+
+  test("aggregate widget payloads never expose sensitive partial-failure details", async () => {
+    const cases = [
+      {
+        kind: "sonarr" as const,
+        run: async (setup: Awaited<ReturnType<typeof setupAsync>>) =>
+          await mediaOrganizerRouter
+            .createCaller({ db: setup.db, deviceType: undefined, session: setup.session })
+            .getData({ integrationIds: setup.integrationIds, pageSize: 10 }),
+      },
+      {
+        kind: "beszel" as const,
+        run: async (setup: Awaited<ReturnType<typeof setupAsync>>) =>
+          await beszelRouter
+            .createCaller({ db: setup.db, deviceType: undefined, session: setup.session })
+            .getSystems({ integrationIds: setup.integrationIds }),
+      },
+      {
+        kind: "opnsense" as const,
+        run: async (setup: Awaited<ReturnType<typeof setupAsync>>) =>
+          await firewallRouter
+            .createCaller({ db: setup.db, deviceType: undefined, session: setup.session })
+            .getFirewallCpuStatus({ integrationIds: setup.integrationIds }),
+      },
+      {
+        kind: "prowlarr" as const,
+        run: async (setup: Awaited<ReturnType<typeof setupAsync>>) =>
+          await indexerManagerRouter
+            .createCaller({ db: setup.db, deviceType: undefined, session: setup.session })
+            .getIndexersStatus({ integrationIds: setup.integrationIds }),
+      },
+      {
+        kind: "ntfy" as const,
+        run: async (setup: Awaited<ReturnType<typeof setupAsync>>) =>
+          await notificationsRouter
+            .createCaller({ db: setup.db, deviceType: undefined, session: setup.session })
+            .getNotifications({ integrationIds: setup.integrationIds }),
+      },
+      {
+        kind: "gluetun" as const,
+        run: async (setup: Awaited<ReturnType<typeof setupAsync>>) =>
+          await vpnRouter
+            .createCaller({ db: setup.db, deviceType: undefined, session: setup.session })
+            .getSummaries({ integrationIds: setup.integrationIds }),
+      },
+    ];
+
+    for (const testCase of cases) {
+      const setup = await setupAsync(testCase.kind);
+      const payload = JSON.stringify(await testCase.run(setup));
+      expect(payload).toContain("INTEGRATION_REQUEST_FAILED");
+      expect(payload).not.toMatch(/internal\.example|token=secret|\/private\/|response body|password/i);
+    }
+  });
+});
diff --git a/packages/api/src/router/test/widgets/patchmon.spec.ts b/packages/api/src/router/test/widgets/patchmon.spec.ts
index df37b5647..27f5cfe40 100644
--- a/packages/api/src/router/test/widgets/patchmon.spec.ts
+++ b/packages/api/src/router/test/widgets/patchmon.spec.ts
@@ -101,9 +101,7 @@ describe("patchmonRouter.getStats access control", () => {
     });
     const caller = createCaller(db, null);
 
-    await expect(caller.getStats({ integrationId })).rejects.toThrow(
-      new TRPCError({ code: "UNAUTHORIZED" }),
-    );
+    await expect(caller.getStats({ integrationId })).rejects.toThrow(new TRPCError({ code: "UNAUTHORIZED" }));
   });
 
   test("should throw FORBIDDEN for authenticated users without board or integration access", async () => {
diff --git a/packages/api/src/router/test/widgets/rssFeed.spec.ts b/packages/api/src/router/test/widgets/rssFeed.spec.ts
index 4773fa149..d5fef09b6 100644
--- a/packages/api/src/router/test/widgets/rssFeed.spec.ts
+++ b/packages/api/src/router/test/widgets/rssFeed.spec.ts
@@ -1,5 +1,5 @@
 import SuperJSON from "superjson";
-import { describe, expect, test } from "vitest";
+import { beforeEach, describe, expect, test, vi } from "vitest";
 
 import type { Session } from "@homarr/auth";
 import { createId } from "@homarr/common";
@@ -17,7 +17,18 @@ import { createDb } from "@homarr/db/test";
 import type { GroupPermissionKey } from "@homarr/definitions";
 
 import type { WidgetComponentProps } from "../../../../../widgets/src/definition";
-import { canAccessAllFeedsAsync, restrictUrlsAsync } from "../../widgets/rssFeed";
+import { canAccessAllFeedsAsync, restrictUrlsAsync, rssFeedRouter } from "../../widgets/rssFeed";
+
+const mocks = vi.hoisted(() => ({ logger: { warn: vi.fn() }, getFeed: vi.fn() }));
+
+vi.mock("@homarr/core/infrastructure/logs", () => ({ createLogger: () => mocks.logger }));
+vi.mock("@homarr/request-handler/rss-feeds", () => ({
+  rssFeedsRequestHandler: {
+    handler: (input: unknown) => ({ getDataAsync: async () => await mocks.getFeed(input) }),
+  },
+}));
+
+beforeEach(() => vi.clearAllMocks());
 
 const createSession = (permissions: GroupPermissionKey[] = []): Session => ({
   user: {
@@ -29,6 +40,53 @@ const createSession = (permissions: GroupPermissionKey[] = []): Session => ({
 });
 
 describe("rssFeedRouter", () => {
+  describe("getFeeds", () => {
+    test("redacts feed secrets from logs and returns a generic error when every feed fails", async () => {
+      const feedUrl = "https://user:password@example.com/feed?token=secret";
+      mocks.getFeed.mockRejectedValue(new Error(`Failed to fetch ${feedUrl}`));
+      const caller = rssFeedRouter.createCaller({
+        db: createDb(),
+        deviceType: undefined,
+        session: createSession(["board-create"]),
+      });
+
+      await expect(caller.getFeeds({ urls: [feedUrl], maximumAmountPosts: 5 })).rejects.toMatchObject({
+        code: "BAD_GATEWAY",
+        message: "All RSS feed requests failed",
+      });
+      expect(mocks.logger.warn).toHaveBeenCalledWith("RSS feed fetch failed", {
+        feedIndex: 0,
+        origin: "https://example.com",
+        errorType: "Error",
+        errorMessage: "Failed to fetch [redacted URL]",
+      });
+      const logged = JSON.stringify(mocks.logger.warn.mock.calls);
+      expect(logged).not.toContain("password");
+      expect(logged).not.toContain("token");
+      expect(logged).not.toContain("secret");
+    });
+
+    test("returns successful entries and only a failure count when some feeds fail", async () => {
+      const failedUrl = "https://user:password@example.com/feed?token=secret";
+      mocks.getFeed.mockImplementation(async (input: { url: string }) => {
+        if (input.url === failedUrl) throw new Error(`Failed to fetch ${failedUrl}`);
+        return { data: { entries: [{ id: "entry" }] } };
+      });
+      const caller = rssFeedRouter.createCaller({
+        db: createDb(),
+        deviceType: undefined,
+        session: createSession(["board-create"]),
+      });
+
+      const result = await caller.getFeeds({ urls: ["https://example.com/feed", failedUrl], maximumAmountPosts: 5 });
+
+      expect(result).toEqual({ entries: [{ id: "entry" }], failedFeedCount: 1 });
+      expect(JSON.stringify(result)).not.toContain("password");
+      expect(JSON.stringify(result)).not.toContain("token");
+      expect(JSON.stringify(result)).not.toContain("secret");
+    });
+  });
+
   describe("canAccessAllFeedsAsync", () => {
     test("should return false for unauthenticated users", async () => {
       // Arrange
diff --git a/packages/api/src/router/test/widgets/timetable.spec.ts b/packages/api/src/router/test/widgets/timetable.spec.ts
new file mode 100644
index 000000000..d3b31a046
--- /dev/null
+++ b/packages/api/src/router/test/widgets/timetable.spec.ts
@@ -0,0 +1,381 @@
+// @vitest-environment node
+
+import { parse, stringify } from "superjson";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { Session } from "@homarr/auth";
+import { createId } from "@homarr/common";
+import type { Database } from "@homarr/db";
+import { eq } from "@homarr/db";
+import { boards, items, users } from "@homarr/db/schema";
+import { createDb } from "@homarr/db/test";
+
+import { boardRouter } from "../../board";
+import { optionsRouter } from "../../widgets/options";
+import { timetableRouter } from "../../widgets/timetable";
+
+const mocks = vi.hoisted(() => ({ getTimetable: vi.fn(), searchStations: vi.fn(), lookup: vi.fn() }));
+
+vi.mock("node:dns/promises", () => ({ default: { lookup: mocks.lookup }, lookup: mocks.lookup }));
+
+vi.mock("@homarr/request-handler/timetable", () => ({
+  timetableGetTimetableRequestHandler: {
+    handler: (input: unknown) => ({
+      getDataAsync: async () => {
+        mocks.getTimetable(input);
+        return { data: { stationId: "station", timestamp: new Date(0), entries: [] } };
+      },
+    }),
+  },
+  timetableSearchStationsRequestHandler: {
+    handler: (input: unknown) => ({
+      getDataAsync: async () => {
+        mocks.searchStations(input);
+        return { data: [] };
+      },
+    }),
+  },
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.lookup.mockResolvedValue([{ address: "8.8.8.8", family: 4 }]);
+});
+
+const createSession = (userId: string): Session => ({
+  user: { id: userId, permissions: [], colorScheme: "light" },
+  expires: new Date().toISOString(),
+});
+
+const createCaller = (db: Database, session: Session | null) =>
+  timetableRouter.createCaller({ db, deviceType: undefined, session });
+
+const createTimetableItemAsync = async (
+  db: Database,
+  { baseUrl, isPublic = true }: { baseUrl: string; isPublic?: boolean },
+) => {
+  const ownerId = createId();
+  const boardId = createId();
+  const itemId = createId();
+  await db.insert(users).values({ id: ownerId });
+  await db.insert(boards).values({ id: boardId, name: `board-${boardId}`, creatorId: ownerId, isPublic });
+  await db.insert(items).values({
+    id: itemId,
+    boardId,
+    kind: "timetable",
+    options: stringify({ baseUrl }),
+  });
+  return { boardId, itemId, ownerId };
+};
+
+describe("timetableRouter source authorization", () => {
+  it("allows itemless setup only for the fixed default provider", async () => {
+    const caller = createCaller(createDb(), null);
+
+    await expect(caller.searchStations({ baseUrl: "https://search.ch", query: "Bern" })).resolves.toEqual([]);
+    await expect(caller.searchStations({ baseUrl: "http://127.0.0.1:8080", query: "Bern" })).rejects.toMatchObject({
+      code: "FORBIDDEN",
+    });
+  });
+
+  it("reports invalid timetable URLs as bad requests", async () => {
+    const caller = createCaller(createDb(), null);
+
+    await expect(
+      caller.searchStations({ baseUrl: "https://search.ch?redirect=/admin", query: "Bern" }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+  });
+
+  it("rejects a persisted private endpoint at runtime even through a viewable timetable item", async () => {
+    const db = createDb();
+    const baseUrl = "http://timetable.internal:8080";
+    const { itemId } = await createTimetableItemAsync(db, { baseUrl });
+    const caller = createCaller(db, null);
+
+    await expect(caller.getTimetable({ baseUrl, itemId, stationId: "station", limit: 10 })).rejects.toMatchObject({
+      code: "BAD_REQUEST",
+    });
+    expect(mocks.getTimetable).not.toHaveBeenCalled();
+    await expect(
+      caller.getTimetable({ baseUrl: "http://127.0.0.1:8080", itemId, stationId: "station", limit: 10 }),
+    ).rejects.toMatchObject({ code: "FORBIDDEN" });
+  });
+
+  it("rejects a persisted endpoint when its board is not viewable", async () => {
+    const db = createDb();
+    const baseUrl = "http://timetable.internal:8080";
+    const { itemId } = await createTimetableItemAsync(db, { baseUrl, isPublic: false });
+
+    await expect(
+      createCaller(db, null).getTimetable({ baseUrl, itemId, stationId: "station", limit: 10 }),
+    ).rejects.toMatchObject({ code: "NOT_FOUND" });
+  });
+
+  it("allows board modifiers to search an unsaved public endpoint", async () => {
+    const db = createDb();
+    const baseUrl = "https://timetable.example.com";
+    const { boardId, ownerId } = await createTimetableItemAsync(db, { baseUrl: "https://search.ch", isPublic: false });
+    const caller = createCaller(db, createSession(ownerId));
+
+    await caller.searchStations({ baseUrl, boardId, query: "Bern" });
+    expect(mocks.lookup).toHaveBeenCalledWith("timetable.example.com", { all: true, verbatim: true });
+    expect(mocks.searchStations).toHaveBeenLastCalledWith(
+      expect.objectContaining({ baseUrl, pinnedAddresses: [{ address: "8.8.8.8", family: 4 }] }),
+    );
+  });
+
+  it.each([
+    "http://127.0.0.1:8080",
+    "http://timetable.internal:8080",
+    "http://[::1]:8080",
+    "http://[::ffff:127.0.0.1]:8080",
+    "https://[fd00::1]:8443",
+    "https://192.88.99.1",
+    "http://[64:ff9b::7f00:1]:8080",
+    "http://[2002:7f00:1::]:8080",
+  ])("blocks an unsaved private endpoint %s even for board modifiers", async (baseUrl) => {
+    const db = createDb();
+    const { boardId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "https://search.ch",
+      isPublic: false,
+    });
+    const caller = createCaller(db, createSession(ownerId));
+
+    await expect(caller.searchStations({ baseUrl, boardId, query: "Bern" })).rejects.toMatchObject({
+      code: "BAD_REQUEST",
+    });
+    expect(mocks.searchStations).not.toHaveBeenCalled();
+  });
+
+  it("blocks an RFC 2765 IPv4-translated loopback address", async () => {
+    const db = createDb();
+    const { boardId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "https://search.ch",
+      isPublic: false,
+    });
+    const caller = createCaller(db, createSession(ownerId));
+
+    await expect(
+      caller.searchStations({ baseUrl: "http://[::ffff:0:7f00:1]:8080", boardId, query: "Bern" }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+    expect(mocks.searchStations).not.toHaveBeenCalled();
+  });
+
+  it("blocks an unsaved public hostname that resolves to a private address", async () => {
+    mocks.lookup.mockResolvedValueOnce([{ address: "10.0.0.8", family: 4 }]);
+    const db = createDb();
+    const { boardId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "https://search.ch",
+      isPublic: false,
+    });
+    const caller = createCaller(db, createSession(ownerId));
+
+    await expect(
+      caller.searchStations({ baseUrl: "https://timetable.example.com", boardId, query: "Bern" }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+    expect(mocks.searchStations).not.toHaveBeenCalled();
+  });
+
+  it("rejects the exact saved private endpoint at runtime", async () => {
+    const db = createDb();
+    const baseUrl = "http://timetable.internal:8080";
+    const { boardId, itemId, ownerId } = await createTimetableItemAsync(db, { baseUrl, isPublic: false });
+
+    await expect(
+      createCaller(db, createSession(ownerId)).searchStations({ baseUrl, boardId, itemId, query: "Bern" }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+
+    expect(mocks.lookup).not.toHaveBeenCalled();
+    expect(mocks.searchStations).not.toHaveBeenCalled();
+  });
+
+  it("re-resolves and pins a saved public endpoint for searches and timetable requests", async () => {
+    const db = createDb();
+    const baseUrl = "https://timetable.example.com";
+    const pinnedAddresses = [
+      { address: "93.184.216.34", family: 4 },
+      { address: "93.184.216.35", family: 4 },
+      { address: "2606:2800:220:1:248:1893:25c8:1946", family: 6 },
+    ];
+    mocks.lookup.mockResolvedValue([pinnedAddresses[2], pinnedAddresses[1], pinnedAddresses[0]]);
+    const { boardId, itemId, ownerId } = await createTimetableItemAsync(db, { baseUrl, isPublic: false });
+    const caller = createCaller(db, createSession(ownerId));
+
+    await caller.searchStations({ baseUrl, boardId, itemId, query: "Bern" });
+    await caller.getTimetable({ baseUrl, itemId, stationId: "station", limit: 10 });
+
+    expect(mocks.lookup).toHaveBeenCalledTimes(2);
+    expect(mocks.searchStations).toHaveBeenLastCalledWith(expect.objectContaining({ baseUrl, pinnedAddresses }));
+    expect(mocks.getTimetable).toHaveBeenLastCalledWith(expect.objectContaining({ baseUrl, pinnedAddresses }));
+  });
+
+  it("rejects a saved public hostname when it resolves to a private address at request time", async () => {
+    const db = createDb();
+    const baseUrl = "https://timetable.example.com";
+    mocks.lookup.mockResolvedValue([{ address: "10.0.0.8", family: 4 }]);
+    const { boardId, itemId, ownerId } = await createTimetableItemAsync(db, { baseUrl, isPublic: false });
+    const caller = createCaller(db, createSession(ownerId));
+
+    await expect(caller.searchStations({ baseUrl, boardId, itemId, query: "Bern" })).rejects.toMatchObject({
+      code: "BAD_REQUEST",
+    });
+    await expect(caller.getTimetable({ baseUrl, itemId, stationId: "station", limit: 10 })).rejects.toMatchObject({
+      code: "BAD_REQUEST",
+    });
+    expect(mocks.searchStations).not.toHaveBeenCalled();
+    expect(mocks.getTimetable).not.toHaveBeenCalled();
+  });
+
+  it("blocks changing a saved timetable to a private endpoint through item options", async () => {
+    const db = createDb();
+    const { boardId, itemId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "https://search.ch",
+      isPublic: false,
+    });
+    const caller = optionsRouter.createCaller({ db, deviceType: undefined, session: createSession(ownerId) });
+
+    await expect(
+      caller.saveItemOptions({ boardId, itemId, newOptions: { baseUrl: "http://127.0.0.1:8080" } }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+
+    const item = await db.query.items.findFirst({ where: eq(items.id, itemId) });
+    expect(parse<Record<string, unknown>>(item?.options ?? "{}")).toMatchObject({ baseUrl: "https://search.ch" });
+  });
+
+  it("blocks changing a saved timetable to a private endpoint through a board save", async () => {
+    const db = createDb();
+    const { boardId, itemId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "https://search.ch",
+      isPublic: false,
+    });
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: createSession(ownerId) });
+
+    await expect(
+      caller.saveBoard({
+        id: boardId,
+        sections: [],
+        items: [
+          {
+            id: itemId,
+            kind: "timetable",
+            options: { baseUrl: "http://127.0.0.1:8080" },
+            integrationIds: [],
+            layouts: [],
+            advancedOptions: { title: null, customCssClasses: [], borderColor: "" },
+          },
+        ],
+      }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+  });
+
+  it("blocks adding a timetable with a private endpoint", async () => {
+    const db = createDb();
+    const { boardId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "https://search.ch",
+      isPublic: false,
+    });
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: createSession(ownerId) });
+
+    await expect(
+      caller.addItem({
+        boardId,
+        kind: "timetable",
+        options: { baseUrl: "http://127.0.0.1:8080" },
+        integrationIds: [],
+      }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+  });
+
+  it("rejects an item ID that does not belong to the requested board", async () => {
+    const db = createDb();
+    const first = await createTimetableItemAsync(db, { baseUrl: "http://timetable.internal:8080", isPublic: false });
+    const second = await createTimetableItemAsync(db, { baseUrl: "https://search.ch", isPublic: false });
+
+    await expect(
+      createCaller(db, createSession(second.ownerId)).searchStations({
+        baseUrl: "http://timetable.internal:8080",
+        boardId: second.boardId,
+        itemId: first.itemId,
+        query: "Bern",
+      }),
+    ).rejects.toMatchObject({ code: "NOT_FOUND" });
+    expect(mocks.searchStations).not.toHaveBeenCalled();
+  });
+
+  it("blocks a changed private endpoint for an existing item", async () => {
+    const db = createDb();
+    const { boardId, itemId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "http://timetable.internal:8080",
+      isPublic: false,
+    });
+
+    await expect(
+      createCaller(db, createSession(ownerId)).searchStations({
+        baseUrl: "http://127.0.0.1:8080",
+        boardId,
+        itemId,
+        query: "Bern",
+      }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+    expect(mocks.searchStations).not.toHaveBeenCalled();
+  });
+
+  it("allows a changed public endpoint for an existing item and pins its address", async () => {
+    const db = createDb();
+    const { boardId, itemId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "http://timetable.internal:8080",
+      isPublic: false,
+    });
+    const baseUrl = "https://timetable.example.com";
+
+    await createCaller(db, createSession(ownerId)).searchStations({ baseUrl, boardId, itemId, query: "Bern" });
+
+    expect(mocks.searchStations).toHaveBeenLastCalledWith(
+      expect.objectContaining({ baseUrl, pinnedAddresses: [{ address: "8.8.8.8", family: 4 }] }),
+    );
+  });
+
+  it("reports malformed saved widget options as server data corruption", async () => {
+    const db = createDb();
+    const { itemId } = await createTimetableItemAsync(db, { baseUrl: "https://search.ch" });
+    await db.update(items).set({ options: "{" }).where(eq(items.id, itemId));
+
+    await expect(
+      createCaller(db, null).getTimetable({
+        baseUrl: "https://search.ch",
+        itemId,
+        stationId: "station",
+        limit: 10,
+      }),
+    ).rejects.toMatchObject({ code: "INTERNAL_SERVER_ERROR", message: "Timetable widget configuration is invalid" });
+  });
+
+  it("reports an invalid saved timetable URL as server data corruption", async () => {
+    const db = createDb();
+    const { itemId } = await createTimetableItemAsync(db, {
+      baseUrl: "https://search.ch?redirect=/admin",
+    });
+
+    await expect(
+      createCaller(db, null).getTimetable({
+        baseUrl: "https://search.ch",
+        itemId,
+        stationId: "station",
+        limit: 10,
+      }),
+    ).rejects.toMatchObject({ code: "INTERNAL_SERVER_ERROR", message: "Timetable widget configuration is invalid" });
+  });
+
+  it("does not treat public board view access as configuration access", async () => {
+    const db = createDb();
+    const baseUrl = "http://timetable.internal:8080";
+    const { boardId, itemId } = await createTimetableItemAsync(db, { baseUrl });
+
+    await expect(createCaller(db, null).searchStations({ baseUrl, boardId, query: "Bern" })).rejects.toMatchObject({
+      code: "NOT_FOUND",
+    });
+    await expect(createCaller(db, null).searchStations({ baseUrl, itemId, query: "Bern" })).rejects.toMatchObject({
+      code: "FORBIDDEN",
+    });
+  });
+});
diff --git a/packages/api/src/router/update-checker.ts b/packages/api/src/router/update-checker.ts
index 8cb6c097e..cd7af0e56 100644
--- a/packages/api/src/router/update-checker.ts
+++ b/packages/api/src/router/update-checker.ts
@@ -12,8 +12,8 @@ export const updateCheckerRouter = createTRPCRouter({
       const data = await handler.getDataAsync();
       return data.data.availableUpdates;
     } catch (error) {
-      logger.error(new Error("Failed to get available updates", { cause: error }));
-      return undefined; // We return undefined to not show the indicator in the UI
+      logger.error(new Error("Failed to read the cached update check", { cause: error }));
+      return []; // An empty list hides the indicator without violating TanStack Query's data contract.
     }
   }),
 });
diff --git a/packages/api/src/router/widgets/__tests__/custom-api-extractors.spec.ts b/packages/api/src/router/widgets/__tests__/custom-api-extractors.spec.ts
deleted file mode 100644
index debbe2479..000000000
--- a/packages/api/src/router/widgets/__tests__/custom-api-extractors.spec.ts
+++ /dev/null
@@ -1,252 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { JSONPath } from "jsonpath-plus";
-
-import {
-  sonarrResponse,
-  sonarrStatGridConfig,
-  proxmoxResponse,
-  proxmoxProgressBarsConfig,
-  diskUsageResponse,
-  diskTableConfig,
-  piholeResponse,
-  piholeStatusIndicatorConfig,
-  piholeCountGridConfig,
-  radarrResponse,
-  radarrStatGridConfig,
-  jellyfinItemCountsResponse,
-  jellyfinCountGridConfig,
-} from "./custom-api-fixtures";
-
-const extractors: Record<string, (json: unknown, config: Record<string, unknown>) => unknown> = {
-  singleValue: (json, c) => ({
-    type: "singleValue",
-    label: (c.label as string) ?? "",
-    unit: (c.unit as string) ?? "",
-    value: JSONPath({ path: (c.jsonPath as string) ?? "$", json: json as object, wrap: false }),
-    valueSize: c.valueSize ?? "lg",
-    labelPosition: c.labelPosition ?? "below",
-  }),
-  keyValue: (json, c) => ({
-    type: "keyValue",
-    entries: ((c.mappings as Array<{ label: string; jsonPath: string; unit: string }>) ?? []).map((m) => ({
-      label: m.label,
-      unit: m.unit,
-      value: JSONPath({ path: m.jsonPath, json: json as object, wrap: false }),
-    })),
-    layout: c.layout ?? "list",
-    columns: c.columns ?? 2,
-  }),
-  table: (json, c) => {
-    const tablePath = (c.tablePath as string) ?? "$";
-    const columns = (c.columns as Array<{ header: string; jsonPath: string }>) ?? [];
-    const rows = JSONPath({ path: tablePath, json: json as object, wrap: true }) as unknown[];
-    const flatRows = Array.isArray(rows[0]) ? (rows[0] as unknown[]) : rows;
-    return {
-      type: "table",
-      columns: columns.map((col) => col.header),
-      rows: flatRows.map((row) =>
-        columns.map((col) => JSONPath({ path: col.jsonPath, json: row as object, wrap: false })),
-      ),
-      striped: c.striped ?? true,
-      compact: c.compact ?? false,
-    };
-  },
-  statGrid: (json, c) => ({
-    type: "statGrid",
-    items: ((c.items as Array<{ label: string; jsonPath: string; unit: string; color?: string }>) ?? []).map(
-      (item) => ({
-        label: item.label,
-        unit: item.unit,
-        color: item.color ?? "blue",
-        value: JSONPath({ path: item.jsonPath, json: json as object, wrap: false }),
-      }),
-    ),
-    columns: c.columns ?? 2,
-    cardStyle: c.cardStyle ?? "filled",
-  }),
-  progressBars: (json, c) => ({
-    type: "progressBars",
-    bars: (
-      (c.bars as Array<{ label: string; valuePath: string; maxPath?: string; unit: string; color?: string }>) ?? []
-    ).map((bar) => {
-      const value = JSONPath({ path: bar.valuePath, json: json as object, wrap: false });
-      const max = bar.maxPath ? JSONPath({ path: bar.maxPath, json: json as object, wrap: false }) : undefined;
-      return {
-        label: bar.label,
-        unit: bar.unit,
-        color: bar.color ?? "blue",
-        value: Number(value) || 0,
-        max: max !== undefined ? Number(max) || 100 : undefined,
-      };
-    }),
-    showPercentage: c.showPercentage ?? true,
-    barSize: c.barSize ?? "md",
-  }),
-  statusIndicator: (json, c) => ({
-    type: "statusIndicator",
-    items: ((c.items as Array<{ label: string; jsonPath: string; goodValues: string[] }>) ?? []).map((item) => {
-      const value = JSONPath({ path: item.jsonPath, json: json as object, wrap: false });
-      const isGood = item.goodValues.some((gv) => String(value).toLowerCase() === gv.toLowerCase());
-      return { label: item.label, value: String(value ?? "unknown"), isGood };
-    }),
-    layout: c.layout ?? "list",
-    dotSize: c.dotSize ?? "md",
-  }),
-  countGrid: (json, c) => ({
-    type: "countGrid",
-    items: ((c.items as Array<{ label: string; jsonPath: string; unit: string }>) ?? []).map((item) => ({
-      label: item.label,
-      unit: item.unit,
-      value: JSONPath({ path: item.jsonPath, json: json as object, wrap: false }),
-    })),
-    columns: c.columns ?? 2,
-    valueSize: c.valueSize ?? "md",
-  }),
-  raw: (json, c) => ({
-    type: "raw",
-    data: JSONPath({ path: (c.jsonPath as string) ?? "$", json: json as object, wrap: false }),
-    maxHeight: c.maxHeight ?? 300,
-  }),
-  customJsx: (json, config) => ({
-    type: "customJsx" as const,
-    template: config.template as string,
-    data: json,
-  }),
-};
-
-function extract(type: string, json: unknown, config: Record<string, unknown>) {
-  const fn = extractors[type];
-  if (!fn) throw new Error(`No extractor for type: ${type}`);
-  return fn(json, config);
-}
-
-describe("custom-api extractors", () => {
-  it("sonarr statGrid extracts missing and queue counts", () => {
-    const result = extract("statGrid", sonarrResponse, sonarrStatGridConfig) as {
-      type: string;
-      items: Array<{ label: string; value: unknown; color: string }>;
-    };
-
-    expect(result.type).toBe("statGrid");
-    expect(result.items).toHaveLength(2);
-    expect(result.items[0]?.value).toBe(42);
-    expect(result.items[0]?.label).toBe("Missing");
-    expect(result.items[0]?.color).toBe("red");
-    expect(result.items[1]?.value).toBe(5);
-  });
-
-  it("proxmox progressBars extracts memory and disk usage", () => {
-    const result = extract("progressBars", proxmoxResponse, proxmoxProgressBarsConfig) as {
-      type: string;
-      bars: Array<{ label: string; value: number; max: number }>;
-    };
-
-    expect(result.type).toBe("progressBars");
-    expect(result.bars).toHaveLength(2);
-    expect(result.bars[0]?.value).toBe(12_884_901_888);
-    expect(result.bars[0]?.max).toBe(34_359_738_368);
-    expect(result.bars[1]?.label).toBe("Disk");
-  });
-
-  it("disk table extracts filesystem rows", () => {
-    const result = extract("table", diskUsageResponse, diskTableConfig) as {
-      type: string;
-      columns: string[];
-      rows: unknown[][];
-    };
-
-    expect(result.type).toBe("table");
-    expect(result.columns).toEqual(["Mount", "Size", "Used"]);
-    expect(result.rows).toHaveLength(3);
-    expect(result.rows[0]?.[0]).toBe("/");
-    expect(result.rows[2]?.[2]).toBe("95%");
-  });
-
-  it("pihole statusIndicator detects enabled state", () => {
-    const result = extract("statusIndicator", piholeResponse, piholeStatusIndicatorConfig) as {
-      type: string;
-      items: Array<{ label: string; value: string; isGood: boolean }>;
-    };
-
-    expect(result.type).toBe("statusIndicator");
-    expect(result.items).toHaveLength(1);
-    expect(result.items[0]?.isGood).toBe(true);
-    expect(result.items[0]?.value).toBe("enabled");
-  });
-
-  it("pihole countGrid extracts all 4 stats", () => {
-    const result = extract("countGrid", piholeResponse, piholeCountGridConfig) as {
-      type: string;
-      items: Array<{ label: string; value: unknown; unit: string }>;
-    };
-
-    expect(result.type).toBe("countGrid");
-    expect(result.items).toHaveLength(4);
-    expect(result.items[0]?.value).toBe(12_847);
-    expect(result.items[1]?.value).toBe(48_291);
-    expect(result.items[2]?.value).toBe(26.6);
-    expect(result.items[2]?.unit).toBe("%");
-    expect(result.items[3]?.value).toBe(14);
-  });
-
-  it("radarr statGrid with outline card style", () => {
-    const result = extract("statGrid", radarrResponse, radarrStatGridConfig) as {
-      type: string;
-      items: Array<{ label: string; value: unknown }>;
-      cardStyle: string;
-    };
-
-    expect(result.type).toBe("statGrid");
-    expect(result.cardStyle).toBe("outline");
-    expect(result.items[0]?.value).toBe(15);
-    expect(result.items[1]?.value).toBe(3);
-  });
-
-  it("raw extractor returns raw data at path", () => {
-    const result = extract("raw", piholeResponse, { type: "raw", jsonPath: "$.status", maxHeight: 200 }) as {
-      type: string;
-      data: unknown;
-      maxHeight: number;
-    };
-
-    expect(result.type).toBe("raw");
-    expect(result.data).toBe("enabled");
-    expect(result.maxHeight).toBe(200);
-  });
-
-  it("customJsx passes full JSON and template through", () => {
-    const json = { title: "Status", items: [{ name: "CPU", value: 42 }] };
-    const config = {
-      type: "customJsx" as const,
-      template: "<Stack><Title>{data.title}</Title></Stack>",
-    };
-
-    const result = extract("customJsx", json, config) as {
-      type: string;
-      template: string;
-      data: typeof json;
-    };
-
-    expect(result.type).toBe("customJsx");
-    expect(result.template).toBe(config.template);
-    expect(result.data).toEqual(json);
-  });
-
-  it("jellyfin countGrid extracts movies/series/episodes/songs in 4-column grid", () => {
-    const result = extract("countGrid", jellyfinItemCountsResponse, jellyfinCountGridConfig) as {
-      type: string;
-      items: Array<{ label: string; value: unknown; unit: string }>;
-      columns: number;
-      valueSize: string;
-    };
-
-    expect(result.type).toBe("countGrid");
-    expect(result.columns).toBe(4);
-    expect(result.valueSize).toBe("lg");
-    expect(result.items).toHaveLength(4);
-    expect(result.items[0]).toEqual({ label: "Movies", value: 185, unit: "" });
-    expect(result.items[1]).toEqual({ label: "Series", value: 38, unit: "" });
-    expect(result.items[2]).toEqual({ label: "Episodes", value: 770, unit: "" });
-    expect(result.items[3]).toEqual({ label: "Songs", value: 0, unit: "" });
-  });
-});
diff --git a/packages/api/src/router/widgets/__tests__/custom-api-fixtures.ts b/packages/api/src/router/widgets/__tests__/custom-api-fixtures.ts
deleted file mode 100644
index a07e57f25..000000000
--- a/packages/api/src/router/widgets/__tests__/custom-api-fixtures.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-export const sonarrResponse = {
-  wanted: { totalRecords: 42 },
-  queue: { totalRecords: 5 },
-  series: [
-    { title: "Breaking Bad", seasons: 5, episodeCount: 62, episodeFileCount: 60 },
-    { title: "The Wire", seasons: 5, episodeCount: 60, episodeFileCount: 55 },
-  ],
-  diskspace: [
-    { path: "/tv", label: "TV Shows", freeSpace: 150_000_000_000, totalSpace: 500_000_000_000 },
-    { path: "/movies", label: "Movies", freeSpace: 80_000_000_000, totalSpace: 250_000_000_000 },
-  ],
-};
-
-export const sonarrStatGridConfig = {
-  type: "statGrid" as const,
-  items: [
-    { label: "Missing", jsonPath: "$.wanted.totalRecords", unit: "", color: "red" },
-    { label: "Queue", jsonPath: "$.queue.totalRecords", unit: "", color: "blue" },
-  ],
-  columns: 2,
-  cardStyle: "filled" as const,
-};
-
-export const proxmoxResponse = {
-  data: {
-    cpu: 0.23,
-    memory: { used: 12_884_901_888, total: 34_359_738_368 },
-    rootfs: { used: 42_949_672_960, total: 107_374_182_400 },
-    uptime: 864_000,
-    status: "running",
-    maxcpu: 8,
-    maxmem: 34_359_738_368,
-    name: "proxmox-node1",
-  },
-};
-
-export const proxmoxProgressBarsConfig = {
-  type: "progressBars" as const,
-  bars: [
-    { label: "Memory", valuePath: "$.data.memory.used", maxPath: "$.data.memory.total", unit: "B", color: "blue" },
-    { label: "Disk", valuePath: "$.data.rootfs.used", maxPath: "$.data.rootfs.total", unit: "B", color: "orange" },
-  ],
-  showPercentage: true,
-  barSize: "md" as const,
-};
-
-export const diskUsageResponse = {
-  filesystems: [
-    { filesystem: "/dev/sda1", size: "500G", used: "350G", avail: "150G", usePct: "70%", mountedOn: "/" },
-    { filesystem: "/dev/sdb1", size: "2T", used: "1.2T", avail: "800G", usePct: "60%", mountedOn: "/data" },
-    { filesystem: "/dev/sdc1", size: "4T", used: "3.8T", avail: "200G", usePct: "95%", mountedOn: "/media" },
-  ],
-};
-
-export const diskTableConfig = {
-  type: "table" as const,
-  tablePath: "$.filesystems",
-  columns: [
-    { header: "Mount", jsonPath: "$.mountedOn" },
-    { header: "Size", jsonPath: "$.size" },
-    { header: "Used", jsonPath: "$.usePct" },
-  ],
-  striped: true,
-  compact: false,
-};
-
-export const piholeResponse = {
-  domains_being_blocked: 125_432,
-  dns_queries_today: 48_291,
-  ads_blocked_today: 12_847,
-  ads_percentage_today: 26.6,
-  unique_clients: 14,
-  status: "enabled",
-  gravity_last_updated: { relative: { days: 2, hours: 3 } },
-};
-
-export const piholeStatusIndicatorConfig = {
-  type: "statusIndicator" as const,
-  items: [{ label: "Pi-Hole", jsonPath: "$.status", goodValues: ["enabled"] }],
-  layout: "list" as const,
-  dotSize: "md" as const,
-};
-
-export const piholeCountGridConfig = {
-  type: "countGrid" as const,
-  items: [
-    { label: "Blocked Today", jsonPath: "$.ads_blocked_today", unit: "" },
-    { label: "DNS Queries", jsonPath: "$.dns_queries_today", unit: "" },
-    { label: "Block Rate", jsonPath: "$.ads_percentage_today", unit: "%" },
-    { label: "Clients", jsonPath: "$.unique_clients", unit: "" },
-  ],
-  columns: 2,
-  valueSize: "md" as const,
-};
-
-export const radarrResponse = {
-  wanted: { totalRecords: 15 },
-  queue: { totalRecords: 3 },
-  movie: [
-    { title: "Inception", hasFile: true, monitored: true, runtime: 148, year: 2010 },
-    { title: "Interstellar", hasFile: false, monitored: true, runtime: 169, year: 2014 },
-    { title: "The Dark Knight", hasFile: true, monitored: false, runtime: 152, year: 2008 },
-  ],
-  rootfolder: [{ path: "/movies", freeSpace: 200_000_000_000, totalSpace: 1_000_000_000_000 }],
-};
-
-export const radarrStatGridConfig = {
-  type: "statGrid" as const,
-  items: [
-    { label: "Missing", jsonPath: "$.wanted.totalRecords", unit: "", color: "red" },
-    { label: "Queue", jsonPath: "$.queue.totalRecords", unit: "", color: "teal" },
-  ],
-  columns: 2,
-  cardStyle: "outline" as const,
-};
-
-export const jellyfinItemCountsResponse = {
-  MovieCount: 185,
-  SeriesCount: 38,
-  EpisodeCount: 770,
-  ArtistCount: 0,
-  ProgramCount: 0,
-  TrailerCount: 0,
-  SongCount: 0,
-  AlbumCount: 0,
-  MusicVideoCount: 0,
-  BoxSetCount: 12,
-  BookCount: 0,
-  ItemCount: 0,
-};
-
-export const jellyfinCountGridConfig = {
-  type: "countGrid" as const,
-  items: [
-    { label: "Movies", jsonPath: "$.MovieCount", unit: "" },
-    { label: "Series", jsonPath: "$.SeriesCount", unit: "" },
-    { label: "Episodes", jsonPath: "$.EpisodeCount", unit: "" },
-    { label: "Songs", jsonPath: "$.SongCount", unit: "" },
-  ],
-  columns: 4,
-  valueSize: "lg" as const,
-};
diff --git a/packages/api/src/router/widgets/__tests__/custom-api-security.spec.ts b/packages/api/src/router/widgets/__tests__/custom-api-security.spec.ts
new file mode 100644
index 000000000..729e5f4c8
--- /dev/null
+++ b/packages/api/src/router/widgets/__tests__/custom-api-security.spec.ts
@@ -0,0 +1,20 @@
+// @vitest-environment node
+
+import { describe, expect, it } from "vitest";
+
+import { readBoundedJsonResponseAsync, validateCustomApiUrl } from "../custom-api-security";
+
+describe("custom API request hardening", () => {
+  it("accepts HTTP endpoints without embedded credentials", () => {
+    expect(validateCustomApiUrl("https://api.example.com/v1/data").hostname).toBe("api.example.com");
+  });
+
+  it.each(["file:///etc/passwd", "https://user:secret@example.com/data"])("rejects unsafe URL %s", (url) => {
+    expect(() => validateCustomApiUrl(url)).toThrow();
+  });
+
+  it("rejects a response once its byte budget is exceeded", async () => {
+    const response = new Response(JSON.stringify({ value: "x".repeat(100) }));
+    await expect(readBoundedJsonResponseAsync(response, 32)).rejects.toThrow("exceeds 32 bytes");
+  });
+});
diff --git a/packages/api/src/router/widgets/beszel.ts b/packages/api/src/router/widgets/beszel.ts
index 738adecf7..c52ca1717 100644
--- a/packages/api/src/router/widgets/beszel.ts
+++ b/packages/api/src/router/widgets/beszel.ts
@@ -10,7 +10,7 @@ import {
   beszelSystemsRequestHandler,
 } from "@homarr/request-handler/beszel";
 
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 import { BoundedAsyncQueue } from "./bounded-async-queue";
@@ -18,8 +18,6 @@ import { BoundedAsyncQueue } from "./bounded-async-queue";
 const logger = createLogger({ module: "beszelRouter" });
 const MAX_PENDING_LIVE_EVENTS = 4;
 
-const errorMessage = (error: unknown) => (error instanceof Error ? error.message : String(error));
-
 export const beszelRouter = createTRPCRouter({
   getSystems: publicProcedure
     .meta({
@@ -41,7 +39,6 @@ export const beszelRouter = createTRPCRouter({
           return {
             integrationId: integration.id,
             integrationName: integration.name,
-            integrationUrl: integration.url,
             systems: data,
             updatedAt: timestamp,
           };
@@ -50,11 +47,11 @@ export const beszelRouter = createTRPCRouter({
           fallback: (integration, error) => ({
             integrationId: integration.id,
             integrationName: integration.name,
-            integrationUrl: integration.url,
             systems: [],
             updatedAt: new Date(0),
-            error: errorMessage(error),
+            error: toPublicIntegrationError(error),
           }),
+          throwOnAllFailures: true,
         },
       );
       logger.debug("getSystems completed", {
@@ -126,8 +123,9 @@ export const beszelRouter = createTRPCRouter({
             history: [],
             systemNameMap: {},
             updatedAt: new Date(0),
-            error: errorMessage(error),
+            error: toPublicIntegrationError(error),
           }),
+          throwOnAllFailures: true,
         },
       );
       logger.debug("getAlerts completed", {
@@ -192,7 +190,7 @@ export const beszelRouter = createTRPCRouter({
           systemStats: [],
           containerStats: [],
           updatedAt: new Date(0),
-          error: errorMessage(error),
+          error: toPublicIntegrationError(error),
         };
       }
     }),
@@ -269,15 +267,14 @@ export const beszelRouter = createTRPCRouter({
               integrationId: integration.id,
               systemId: input.systemId,
               emittedEventCount,
-              error: errorMessage(error),
+              error,
             });
             queue.fail(
-              error instanceof TRPCError
-                ? error
-                : new TRPCError({
-                    code: "INTERNAL_SERVER_ERROR",
-                    message: error instanceof Error ? error.message : String(error),
-                  }),
+              new TRPCError({
+                code: "BAD_GATEWAY",
+                message: "Live integration request failed",
+                cause: error,
+              }),
             );
           }
         })();
diff --git a/packages/api/src/router/widgets/calendar.ts b/packages/api/src/router/widgets/calendar.ts
index 3aabb47ed..bbe5b247d 100644
--- a/packages/api/src/router/widgets/calendar.ts
+++ b/packages/api/src/router/widgets/calendar.ts
@@ -1,16 +1,13 @@
 import { z } from "zod/v4";
 
-import { createLogger } from "@homarr/core/infrastructure/logs";
-import { ErrorWithMetadata } from "@homarr/core/infrastructure/logs/error";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { radarrReleaseTypes } from "@homarr/integrations/types";
 import { calendarMonthRequestHandler } from "@homarr/request-handler/calendar";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
+import { PUBLIC_INTEGRATION_ERROR, settleIntegrationQueries } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
-const logger = createLogger({ module: "calendarRouter" });
-
 export const calendarRouter = createTRPCRouter({
   findAllEvents: publicProcedure
     .meta({
@@ -30,8 +27,9 @@ export const calendarRouter = createTRPCRouter({
     )
     .concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("calendar")))
     .query(async ({ ctx, input }) => {
-      const settled = await Promise.allSettled(
-        ctx.integrations.map(async (integration) => {
+      return await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
           const { integrationIds: _integrationIds, ...handlerInput } = input;
           const innerHandler = calendarMonthRequestHandler.handler(integration, handlerInput);
           const { data } = await innerHandler.getDataAsync();
@@ -46,38 +44,21 @@ export const calendarRouter = createTRPCRouter({
               name: integration.name,
               kind: integration.kind,
             },
+            error: undefined as string | undefined,
           };
-        }),
-      );
-
-      return settled.flatMap((result, index) => {
-        if (result.status === "fulfilled") {
-          return [result.value];
-        }
-        const integration = ctx.integrations[index];
-        logger.warn(
-          new ErrorWithMetadata(
-            "Calendar integration request failed; skipping events for this integration",
-            {
-              integrationId: integration?.id,
-              integrationKind: integration?.kind,
+        },
+        {
+          fallback: (integration) => ({
+            events: [],
+            integration: {
+              id: integration.id,
+              name: integration.name,
+              kind: integration.kind,
             },
-            { cause: result.reason },
-          ),
-        );
-        return integration
-          ? [
-              {
-                events: [],
-                integration: {
-                  id: integration.id,
-                  name: integration.name,
-                  kind: integration.kind,
-                },
-                error: "Calendar events could not be loaded from this integration.",
-              },
-            ]
-          : [];
-      });
+            error: PUBLIC_INTEGRATION_ERROR,
+          }),
+          throwOnAllFailures: true,
+        },
+      );
     }),
 });
diff --git a/packages/api/src/router/widgets/custom-api-security.ts b/packages/api/src/router/widgets/custom-api-security.ts
new file mode 100644
index 000000000..abe005055
--- /dev/null
+++ b/packages/api/src/router/widgets/custom-api-security.ts
@@ -0,0 +1,67 @@
+import { readBoundedJsonResponseAsync as readBoundedJsonResponse } from "@homarr/common/server";
+
+export const MAX_CUSTOM_API_RESPONSE_BYTES = 2 * 1024 * 1024;
+export const CUSTOM_API_FETCH_TIMEOUT_MS = 10_000;
+
+export function validateCustomApiUrl(urlString: string): URL {
+  if (urlString.length > 2_048) throw new Error("Custom API URL is too long");
+
+  const url = new URL(urlString);
+  if (url.protocol !== "http:" && url.protocol !== "https:") {
+    throw new Error("Custom API URL must use HTTP or HTTPS");
+  }
+  if (url.username || url.password) throw new Error("Custom API URL must not contain credentials");
+  return url;
+}
+
+export async function readBoundedJsonResponseAsync(
+  response: Response,
+  maxBytes = MAX_CUSTOM_API_RESPONSE_BYTES,
+): Promise<unknown> {
+  return await readBoundedJsonResponse(response, maxBytes, "Custom API response");
+}
+
+export async function consumeBoundedResponseAsync(
+  response: Response,
+  maxBytes = MAX_CUSTOM_API_RESPONSE_BYTES,
+): Promise<void> {
+  const declaredLength = Number(response.headers.get("content-length"));
+  if (Number.isFinite(declaredLength) && declaredLength > maxBytes) {
+    await response.body?.cancel();
+    throw new Error(`Custom API response exceeds ${maxBytes} bytes`);
+  }
+
+  if (!response.body) return;
+  const reader = response.body.getReader();
+  let byteLength = 0;
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) return;
+    byteLength += value?.byteLength ?? 0;
+    if (byteLength > maxBytes) {
+      await reader.cancel();
+      throw new Error(`Custom API response exceeds ${maxBytes} bytes`);
+    }
+  }
+}
+
+export async function withCustomApiResponseAsync<TResult>(
+  url: URL,
+  init: Omit<RequestInit, "redirect" | "signal">,
+  consumeResponseAsync: (response: Response) => Promise<TResult>,
+  timeoutMs = CUSTOM_API_FETCH_TIMEOUT_MS,
+): Promise<TResult> {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), timeoutMs);
+
+  try {
+    const response = await fetch(url.toString(), {
+      ...init,
+      redirect: "error",
+      signal: controller.signal,
+    });
+    return await consumeResponseAsync(response);
+  } finally {
+    clearTimeout(timeout);
+  }
+}
diff --git a/packages/api/src/router/widgets/custom-api.ts b/packages/api/src/router/widgets/custom-api.ts
index 09fafa880..15954da00 100644
--- a/packages/api/src/router/widgets/custom-api.ts
+++ b/packages/api/src/router/widgets/custom-api.ts
@@ -1,91 +1,293 @@
 import { TRPCError } from "@trpc/server";
-import superjson from "superjson";
+import { parse as parseSuperJson } from "superjson";
 import { z } from "zod/v4";
 
 import { decryptSecret } from "@homarr/common/server";
-import { customWidgetDefinitions } from "@homarr/db/schema";
 import { eq } from "@homarr/db";
-import { createLogger } from "@homarr/core/infrastructure/logs";
-import { createTRPCRouter, protectedProcedure } from "../../trpc";
-import { applyAuth } from "../custom-widget/auth";
-import { extractActionButtonDisplay, extractDisplayDataWithFallback } from "../custom-widget/display-data";
+import { boards, customWidgetDefinitions, items, legacyCustomWidgetDefinitions } from "@homarr/db/schema";
+import type { BoardPermission } from "@homarr/definitions";
+import {
+  getCustomWidgetConfirmation,
+  getCustomWidgetDefaultOptions,
+  validateCustomWidgetOptions,
+} from "@homarr/custom-widgets/core";
+import type { CustomJsxRequest, CustomWidgetSource } from "@homarr/custom-widgets/core";
 
-const logger = createLogger({ module: "widget:customApi" });
+import { createTRPCRouter, protectedProcedure, publicProcedure } from "../../trpc";
+import { throwIfActionForbiddenAsync } from "../board/board-access";
+import { executeCustomWidgetRequest, invalidateCustomWidgetResponseCache } from "../custom-widget/request-executor";
+import {
+  hashRuntimeParams,
+  renderRequestBody,
+  renderRequestTarget,
+  resolveCustomWidgetRequestValues,
+} from "../custom-widget/request-manifest";
+import { acquireCustomWidgetRequestLimit } from "../custom-widget/request-limits";
+import { getCustomWidgetCacheVersion } from "../custom-widget/cache-version";
+import { parseStoredCustomWidgetDefinition } from "../custom-widget/stored-definition";
 
-const FETCH_TIMEOUT_MS = 10_000;
+const runtimeParamsSchema = z.record(z.string(), z.union([z.string(), z.number(), z.boolean()]));
+const itemInputSchema = z.object({ itemId: z.string().min(1) });
+const namedRequestInputSchema = itemInputSchema.extend({
+  requestId: z.string().min(1).max(64),
+  params: runtimeParamsSchema.default({}),
+});
+interface CustomWidgetItemOptions {
+  definitionId: string;
+  configuration: Record<string, unknown>;
+  configurationVersion: number;
+  refreshInterval?: number;
+}
 
-const validateUrl = (urlString: string): URL => new URL(urlString);
+type RouterContext = Parameters<typeof throwIfActionForbiddenAsync>[0];
+type ResolvedDefinition = Awaited<ReturnType<typeof resolvePlacedDefinitionAsync>>;
+
+const parseItemOptions = (raw: string): CustomWidgetItemOptions => {
+  try {
+    const options = parseSuperJson(raw) as Record<string, unknown>;
+    if (typeof options.definitionId !== "string" || options.definitionId.length === 0) throw new Error();
+    return {
+      definitionId: options.definitionId,
+      configuration:
+        options.configuration !== null &&
+        typeof options.configuration === "object" &&
+        !Array.isArray(options.configuration)
+          ? (options.configuration as Record<string, unknown>)
+          : {},
+      configurationVersion:
+        typeof options.configurationVersion === "number" && Number.isInteger(options.configurationVersion)
+          ? options.configurationVersion
+          : 1,
+      refreshInterval: typeof options.refreshInterval === "number" ? options.refreshInterval : undefined,
+    };
+  } catch {
+    throw new TRPCError({ code: "NOT_FOUND", message: "Custom widget item not found" });
+  }
+};
+
+async function resolvePlacedDefinitionAsync(ctx: RouterContext, itemId: string) {
+  const item = await ctx.db.query.items.findFirst({
+    where: eq(items.id, itemId),
+    columns: { id: true, boardId: true, kind: true, options: true },
+  });
+  if (!item || item.kind !== "customApi") {
+    throw new TRPCError({ code: "NOT_FOUND", message: "Custom widget item not found" });
+  }
+
+  await throwIfActionForbiddenAsync(ctx, eq(boards.id, item.boardId), "view");
+  const itemOptions = parseItemOptions(item.options);
+  const stored = await ctx.db.query.customWidgetDefinitions.findFirst({
+    where: eq(customWidgetDefinitions.id, itemOptions.definitionId),
+    with: { secrets: true },
+  });
+  if (!stored) {
+    const legacy = await ctx.db.query.legacyCustomWidgetDefinitions.findFirst({
+      where: eq(legacyCustomWidgetDefinitions.id, itemOptions.definitionId),
+      columns: { id: true },
+    });
+    if (legacy) {
+      throw new TRPCError({
+        code: "PRECONDITION_FAILED",
+        message: "LEGACY_CUSTOM_WIDGET_MIGRATION_REQUIRED",
+      });
+    }
+    throw new TRPCError({ code: "NOT_FOUND", message: "Custom widget unavailable" });
+  }
+  if (!stored.enabled) throw new TRPCError({ code: "FORBIDDEN", message: "Widget is disabled" });
+
+  const definition = parseStoredCustomWidgetDefinition(stored);
+  const configuration = { ...getCustomWidgetDefaultOptions(definition.options), ...itemOptions.configuration };
+  const issues = validateCustomWidgetOptions(definition.options, configuration);
+  if (issues.length > 0) {
+    throw new TRPCError({
+      code: "PRECONDITION_FAILED",
+      message: `Custom widget configuration needs repair: ${issues[0]?.path} ${issues[0]?.message}`,
+    });
+  }
+  return { item, stored, definition, itemOptions, configuration };
+}
+
+const findRequest = (resolved: ResolvedDefinition, requestId: string, kind: "query" | "action") => {
+  const request = resolved.definition.requests[requestId];
+  if (request?.kind !== kind) throw new TRPCError({ code: "NOT_FOUND", message: "Named request not found" });
+  if (!request) throw new TRPCError({ code: "NOT_FOUND", message: "Named request not found" });
+  return { id: requestId, ...request };
+};
+
+const findSource = (resolved: ResolvedDefinition, sourceId: string) => {
+  const source = resolved.definition.sources[sourceId];
+  if (!source) throw new TRPCError({ code: "NOT_FOUND", message: "Widget API source not found" });
+  return { id: sourceId, ...source };
+};
+
+type IdentifiedRequest = CustomJsxRequest & { id: string };
+type IdentifiedSource = CustomWidgetSource & { id: string };
+
+const getAuth = (resolved: ResolvedDefinition, source: IdentifiedSource, mode: "inherit" | "none") => {
+  const authType = typeof source.auth === "string" ? source.auth : source.auth.type;
+  if (mode === "none" || authType === "none") return undefined;
+  const secrets = resolved.stored.secrets
+    .filter((secret) => secret.sourceId === source.id)
+    .map((secret) => ({ kind: secret.kind, value: decryptSecret(secret.encryptedValue) }));
+  return {
+    type: authType,
+    secrets,
+    headerName:
+      typeof source.auth === "object" && source.auth.type === "apiKeyHeader"
+        ? source.auth.name
+        : typeof source.auth === "object" && source.auth.type === "apiKeyQuery"
+          ? source.auth.name
+          : undefined,
+  };
+};
+
+const withRequestLimit = async <T>(
+  ctx: RouterContext,
+  resolved: ResolvedDefinition,
+  request: IdentifiedRequest,
+  callback: () => Promise<T>,
+) => {
+  const release = await acquireCustomWidgetRequestLimit({
+    category: request.kind === "query" ? "query" : request.method === "DELETE" ? "delete" : "action",
+    userId: ctx.session?.user.id,
+    itemId: resolved.item.id,
+    definitionId: resolved.stored.id,
+  });
+  try {
+    return await callback();
+  } finally {
+    await release();
+  }
+};
+
+const getCacheKey = (resolved: ResolvedDefinition, request: IdentifiedRequest, params: Record<string, unknown>) =>
+  `custom-jsx:${resolved.item.id}:${getCustomWidgetCacheVersion(resolved.stored)}:${request.id}:${hashRuntimeParams(params)}`;
+
+const executeRequest = async (
+  ctx: RouterContext,
+  resolved: ResolvedDefinition,
+  request: IdentifiedRequest,
+  params: Record<string, string | number | boolean>,
+) => {
+  await throwIfActionForbiddenAsync(ctx, eq(boards.id, resolved.item.boardId), request.permission as BoardPermission);
+  const source = findSource(resolved, request.source);
+  const values = resolveCustomWidgetRequestValues(request, resolved.configuration, params);
+  const targetUrl = renderRequestTarget(source.baseUrl, request, values);
+  return withRequestLimit(ctx, resolved, request, () =>
+    executeCustomWidgetRequest({
+      baseUrl: source.baseUrl,
+      targetUrl,
+      method: request.method,
+      body: renderRequestBody(request, values),
+      staticHeaders: request.headers,
+      auth: getAuth(resolved, source, request.auth),
+      networkScope: source.networkScope,
+      kind: request.kind,
+      cacheKey: request.kind === "query" ? getCacheKey(resolved, request, values) : undefined,
+      cacheTtlSeconds: request.cacheSeconds,
+    }),
+  );
+};
 
 export const customApiRouter = createTRPCRouter({
-  getData: protectedProcedure.input(z.object({ definitionId: z.string() })).query(async ({ ctx, input }) => {
-    const definition = await ctx.db.query.customWidgetDefinitions.findFirst({
-      where: eq(customWidgetDefinitions.id, input.definitionId),
-      with: { secrets: true },
-    });
+  getData: publicProcedure.input(itemInputSchema).query(async ({ ctx, input }) => {
+    const resolved = await resolvePlacedDefinitionAsync(ctx, input.itemId);
+    const loadRequests = Object.entries(resolved.definition.requests).filter(
+      ([, request]) => request.kind === "query" && request.trigger === "load",
+    );
+    const entries = await Promise.all(
+      loadRequests.map(async ([requestId, request]) => {
+        try {
+          const response = await executeRequest(ctx, resolved, { id: requestId, ...request }, {});
+          return [
+            requestId,
+            {
+              data: response.data,
+              status: {
+                loading: false,
+                ok: response.ok,
+                status: response.status,
+                statusText: response.statusText,
+                error: response.ok ? undefined : `HTTP ${response.status}: ${response.statusText}`,
+              },
+            },
+          ] as const;
+        } catch (error) {
+          return [
+            requestId,
+            {
+              data: null,
+              status: {
+                loading: false,
+                ok: false,
+                status: 0,
+                error: error instanceof Error ? error.message : "Request failed",
+              },
+            },
+          ] as const;
+        }
+      }),
+    );
 
-    if (!definition) {
-      throw new TRPCError({ code: "NOT_FOUND", message: "Custom widget definition not found" });
-    }
-
-    if (!definition.enabled) {
-      return { type: "disabled" };
-    }
-
-    let displayConfig: Record<string, unknown>;
-    try {
-      displayConfig = superjson.parse(definition.displayConfig) as Record<string, unknown>;
-    } catch {
-      throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: "Widget has corrupt display configuration" });
-    }
-
-    if (definition.displayType === "actionButton") {
-      return extractActionButtonDisplay(displayConfig);
-    }
-
-    const decryptedSecrets = definition.secrets.map((s) => ({
-      kind: s.kind,
-      value: decryptSecret(s.value),
-    }));
-
-    const url = validateUrl(definition.url);
-    const headers = new Headers({ Accept: "application/json" });
-
-    if (definition.method !== "GET" && definition.requestBody) {
-      headers.set("Content-Type", "application/json");
-    }
-
-    applyAuth(headers, url, definition.authType, decryptedSecrets, definition.headerName);
-
-    const controller = new AbortController();
-    const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
-
-    try {
-      const response = await fetch(url.toString(), {
-        method: definition.method,
-        headers,
-        body: definition.method !== "GET" ? definition.requestBody : undefined,
-        redirect: "follow",
-        signal: controller.signal,
-      });
-
-      if (!response.ok) {
-        throw new TRPCError({
-          code: "BAD_REQUEST",
-          message: `API returned ${response.status}: ${response.statusText}`,
-        });
-      }
-
-      const json: unknown = await response.json();
-      return extractDisplayDataWithFallback(json, definition.displayType, displayConfig);
-    } catch (error) {
-      if (error instanceof TRPCError) throw error;
-      logger.error("Failed to fetch custom API data", { definitionId: input.definitionId, error });
-      throw new TRPCError({
-        code: "INTERNAL_SERVER_ERROR",
-        message: error instanceof Error ? error.message : "Failed to fetch data from external API",
-      });
-    } finally {
-      clearTimeout(timeout);
-    }
+    return {
+      type: "customJsx" as const,
+      template: resolved.definition.template,
+      data: Object.fromEntries(entries.map(([id, result]) => [id, result.data])),
+      status: Object.fromEntries(entries.map(([id, result]) => [id, result.status])),
+      options: resolved.configuration,
+      requestCapabilities: Object.entries(resolved.definition.requests).map(([id, request]) => ({
+        id,
+        kind: request.kind,
+        method: request.method,
+        trigger: request.trigger,
+        minimumBoardPermission: request.permission,
+        confirmation: getCustomWidgetConfirmation(request),
+        invalidates: request.invalidates ?? [],
+      })),
+    };
   }),
+
+  queryRequest: publicProcedure.input(namedRequestInputSchema).query(async ({ ctx, input }) => {
+    const resolved = await resolvePlacedDefinitionAsync(ctx, input.itemId);
+    const request = findRequest(resolved, input.requestId, "query");
+    if (request.trigger !== "manual") {
+      throw new TRPCError({ code: "BAD_REQUEST", message: "Load queries cannot be invoked manually" });
+    }
+    const response = await executeRequest(ctx, resolved, request, input.params);
+    return {
+      ok: response.ok,
+      status: response.status,
+      statusText: response.statusText,
+      data: response.data,
+      error: response.ok ? undefined : `HTTP ${response.status}: ${response.statusText}`,
+    };
+  }),
+
+  executeAction: protectedProcedure
+    .input(namedRequestInputSchema.extend({ confirmed: z.boolean().optional() }))
+    .mutation(async ({ ctx, input }) => {
+      const resolved = await resolvePlacedDefinitionAsync(ctx, input.itemId);
+      const request = findRequest(resolved, input.requestId, "action");
+      const needsConfirmation = request.confirmation !== undefined || request.method === "DELETE";
+      if (needsConfirmation && input.confirmed !== true) {
+        throw new TRPCError({ code: "PRECONDITION_FAILED", message: "This action requires confirmation" });
+      }
+      const response = await executeRequest(ctx, resolved, request, input.params);
+      if (response.ok && request.invalidates?.length) {
+        invalidateCustomWidgetResponseCache(
+          request.invalidates.flatMap((requestId) => [
+            `custom-jsx:${resolved.item.id}:${getCustomWidgetCacheVersion(resolved.stored)}:${requestId}:`,
+            `custom-widget:options:${resolved.stored.id}:${getCustomWidgetCacheVersion(resolved.stored)}:${requestId}:`,
+          ]),
+        );
+      }
+      return {
+        ok: response.ok,
+        status: response.status,
+        statusText: response.statusText,
+        data: response.data,
+        error: response.ok ? undefined : `HTTP ${response.status}: ${response.statusText}`,
+        invalidates: request.invalidates ?? [],
+      };
+    }),
 });
diff --git a/packages/api/src/router/widgets/firewall.ts b/packages/api/src/router/widgets/firewall.ts
index 08951da7c..335f75d09 100644
--- a/packages/api/src/router/widgets/firewall.ts
+++ b/packages/api/src/router/widgets/firewall.ts
@@ -7,7 +7,7 @@ import {
 } from "@homarr/request-handler/firewall";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 const firewallMiddleware = createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("firewall"));
@@ -18,20 +18,33 @@ const queryFirewall = <
   },
 >(
   handler: THandler,
+  createFallback: () => Awaited<ReturnType<ReturnType<THandler["handler"]>["getDataAsync"]>>["data"],
 ) =>
   publicProcedure.concat(firewallMiddleware).query(async ({ ctx }) =>
-    settleIntegrationQueries(ctx.integrations, async (integration) => {
-      const { data, timestamp } = await handler.handler(integration, {}).getDataAsync();
-      return {
-        integration: { id: integration.id, name: integration.name, kind: integration.kind, updatedAt: timestamp },
-        summary: data as Awaited<ReturnType<ReturnType<THandler["handler"]>["getDataAsync"]>>["data"],
-      };
-    }),
+    settleIntegrationQueries(
+      ctx.integrations,
+      async (integration) => {
+        const { data, timestamp } = await handler.handler(integration, {}).getDataAsync();
+        return {
+          integration: { id: integration.id, name: integration.name, kind: integration.kind, updatedAt: timestamp },
+          summary: data as Awaited<ReturnType<ReturnType<THandler["handler"]>["getDataAsync"]>>["data"],
+          error: undefined as string | undefined,
+        };
+      },
+      {
+        fallback: (integration, error) => ({
+          integration: { id: integration.id, name: integration.name, kind: integration.kind, updatedAt: new Date(0) },
+          summary: createFallback(),
+          error: toPublicIntegrationError(error),
+        }),
+        throwOnAllFailures: true,
+      },
+    ),
   );
 
 export const firewallRouter = createTRPCRouter({
-  getFirewallCpuStatus: queryFirewall(firewallCpuRequestHandler),
-  getFirewallInterfacesStatus: queryFirewall(firewallInterfacesRequestHandler),
-  getFirewallVersionStatus: queryFirewall(firewallVersionRequestHandler),
-  getFirewallMemoryStatus: queryFirewall(firewallMemoryRequestHandler),
+  getFirewallCpuStatus: queryFirewall(firewallCpuRequestHandler, () => ({ total: 0 })),
+  getFirewallInterfacesStatus: queryFirewall(firewallInterfacesRequestHandler, () => []),
+  getFirewallVersionStatus: queryFirewall(firewallVersionRequestHandler, () => ({ version: "Unknown" })),
+  getFirewallMemoryStatus: queryFirewall(firewallMemoryRequestHandler, () => ({ used: 0, total: 0, percent: 0 })),
 });
diff --git a/packages/api/src/router/widgets/immich.ts b/packages/api/src/router/widgets/immich.ts
index aa917271f..136d0e111 100644
--- a/packages/api/src/router/widgets/immich.ts
+++ b/packages/api/src/router/widgets/immich.ts
@@ -34,9 +34,16 @@ export const immichRouter = createTRPCRouter({
       return data.data;
     }),
 
-  getAlbums: publicProcedure.concat(createImmichIntegrationMiddleware("query")).query(async ({ ctx }) => {
-    const innerHandler = immichAlbumsRequestHandler.handler(ctx.integration, {});
-    const data = await innerHandler.getDataAsync();
-    return data.data;
-  }),
+  getAlbums: publicProcedure
+    .input(
+      z.object({
+        limit: z.number().int().min(1).max(500).optional(),
+      }),
+    )
+    .concat(createImmichIntegrationMiddleware("query"))
+    .query(async ({ ctx, input }) => {
+      const innerHandler = immichAlbumsRequestHandler.handler(ctx.integration, { limit: input.limit });
+      const data = await innerHandler.getDataAsync();
+      return data.data;
+    }),
 });
diff --git a/packages/api/src/router/widgets/indexer-manager.ts b/packages/api/src/router/widgets/indexer-manager.ts
index 54a949dab..4d1d893d8 100644
--- a/packages/api/src/router/widgets/indexer-manager.ts
+++ b/packages/api/src/router/widgets/indexer-manager.ts
@@ -6,7 +6,7 @@ import { indexerManagerRequestHandler } from "@homarr/request-handler/indexer-ma
 
 import type { IntegrationAction } from "../../middlewares/integration";
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "../../trpc";
 
 const createIndexerManagerIntegrationMiddleware = (action: IntegrationAction) =>
@@ -16,15 +16,29 @@ export const indexerManagerRouter = createTRPCRouter({
   getIndexersStatus: publicProcedure
     .concat(createIndexerManagerIntegrationMiddleware("query"))
     .query(async ({ ctx }) => {
-      return await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const innerHandler = indexerManagerRequestHandler.handler(integration, {});
-        const { data: indexers } = await innerHandler.getDataAsync();
+      return await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
+          const innerHandler = indexerManagerRequestHandler.handler(integration, {});
+          const { data: indexers } = await innerHandler.getDataAsync();
 
-        return {
-          integrationId: integration.id,
-          indexers,
-        };
-      });
+          return {
+            integrationId: integration.id,
+            integrationName: integration.name,
+            indexers,
+            error: undefined as string | undefined,
+          };
+        },
+        {
+          fallback: (integration, error) => ({
+            integrationId: integration.id,
+            integrationName: integration.name,
+            indexers: [],
+            error: toPublicIntegrationError(error),
+          }),
+          throwOnAllFailures: true,
+        },
+      );
     }),
   testAllIndexers: protectedProcedure
     .concat(createIndexerManagerIntegrationMiddleware("interact"))
diff --git a/packages/api/src/router/widgets/media-organizer.ts b/packages/api/src/router/widgets/media-organizer.ts
index dd0d687cb..91738b4a8 100644
--- a/packages/api/src/router/widgets/media-organizer.ts
+++ b/packages/api/src/router/widgets/media-organizer.ts
@@ -4,6 +4,7 @@ import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { mediaOrganizerRequestHandler } from "@homarr/request-handler/media-organizer";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
+import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const mediaOrganizerRouter = createTRPCRouter({
@@ -18,16 +19,30 @@ export const mediaOrganizerRouter = createTRPCRouter({
     .concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("mediaOrganizer")))
     .input(z.object({ pageSize: z.number().min(1).max(50).default(10) }))
     .query(async ({ ctx, input }) => {
-      const results = await Promise.all(
-        ctx.integrations.map(async (integration) => {
+      return await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
           const innerHandler = mediaOrganizerRequestHandler.handler(integration, { pageSize: input.pageSize });
           const { data } = await innerHandler.getDataAsync();
           return {
             integrationId: integration.id,
+            integrationName: integration.name,
             ...data,
+            error: undefined as string | undefined,
           };
-        }),
+        },
+        {
+          fallback: (integration, error) => ({
+            integrationId: integration.id,
+            integrationName: integration.name,
+            missing: [],
+            missingCount: 0,
+            queued: [],
+            queuedCount: 0,
+            error: toPublicIntegrationError(error),
+          }),
+          throwOnAllFailures: true,
+        },
       );
-      return results;
     }),
 });
diff --git a/packages/api/src/router/widgets/media-requests.ts b/packages/api/src/router/widgets/media-requests.ts
index fbd192499..28d0cb15a 100644
--- a/packages/api/src/router/widgets/media-requests.ts
+++ b/packages/api/src/router/widgets/media-requests.ts
@@ -1,7 +1,9 @@
 import { z } from "zod/v4";
 
+import type { IntegrationKindByCategory } from "@homarr/definitions";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { createIntegrationAsync } from "@homarr/integrations";
+import type { MediaRequest, MediaRequestStats } from "@homarr/integrations/types";
 import { mediaRequestStatusConfiguration } from "@homarr/integrations/types";
 import {
   mediaRequestListInputSchema,
@@ -10,9 +12,15 @@ import {
 import { mediaRequestStatsRequestHandler } from "@homarr/request-handler/media-request-stats";
 
 import { createManyIntegrationMiddleware, createOneIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { PUBLIC_INTEGRATION_ERROR, settleIntegrationQueries } from "../../settle-integrations";
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "../../trpc";
 
+interface IntegrationQueryResult<TData> {
+  integration: { id: string; name: string; kind: IntegrationKindByCategory<"mediaRequest"> };
+  data: TData;
+  error?: string;
+}
+
 export const mediaRequestsRouter = createTRPCRouter({
   getLatestRequests: publicProcedure
     .meta({
@@ -25,15 +33,31 @@ export const mediaRequestsRouter = createTRPCRouter({
     .concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("mediaRequest")))
     .input(mediaRequestListInputSchema)
     .query(async ({ ctx, input }) => {
-      const results = await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const { data } = await mediaRequestListRequestHandler.handler(integration, input).getDataAsync();
-        return { integration: { id: integration.id, name: integration.name, kind: integration.kind }, data };
-      });
-      return results
+      const results: IntegrationQueryResult<MediaRequest[]>[] = await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
+          const { data } = await mediaRequestListRequestHandler.handler(integration, input).getDataAsync();
+          return {
+            integration: { id: integration.id, name: integration.name, kind: integration.kind },
+            data,
+            error: undefined as string | undefined,
+          };
+        },
+        {
+          fallback: (integration) => ({
+            integration: { id: integration.id, name: integration.name, kind: integration.kind },
+            data: [],
+            error: PUBLIC_INTEGRATION_ERROR,
+          }),
+          throwOnAllFailures: true,
+        },
+      );
+      const requests = results
         .flatMap(({ data, integration }) =>
           data.map((request) => ({
             ...request,
             integrationId: integration.id,
+            integration,
           })),
         )
         .toSorted((dataA, dataB) => {
@@ -46,6 +70,12 @@ export const mediaRequestsRouter = createTRPCRouter({
             mediaRequestStatusConfiguration[dataB.status].position
           );
         });
+      return {
+        requests,
+        failedIntegrations: results.flatMap(({ integration, error }) =>
+          error ? [{ integrationId: integration.id, integrationName: integration.name, error }] : [],
+        ),
+      };
     }),
   getStats: publicProcedure
     .meta({
@@ -57,12 +87,30 @@ export const mediaRequestsRouter = createTRPCRouter({
     })
     .concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("mediaRequest")))
     .query(async ({ ctx }) => {
-      const results = await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const { data } = await mediaRequestStatsRequestHandler.handler(integration, {}).getDataAsync();
-        return { integration: { id: integration.id, name: integration.name, kind: integration.kind }, data };
-      });
+      const results: IntegrationQueryResult<{
+        stats: MediaRequestStats["stats"] | null;
+        users: MediaRequestStats["users"];
+      }>[] = await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
+          const { data } = await mediaRequestStatsRequestHandler.handler(integration, {}).getDataAsync();
+          return {
+            integration: { id: integration.id, name: integration.name, kind: integration.kind },
+            data: { ...data, stats: data.stats as typeof data.stats | null },
+            error: undefined as string | undefined,
+          };
+        },
+        {
+          fallback: (integration) => ({
+            integration: { id: integration.id, name: integration.name, kind: integration.kind },
+            data: { stats: null, users: [] },
+            error: PUBLIC_INTEGRATION_ERROR,
+          }),
+          throwOnAllFailures: true,
+        },
+      );
       return {
-        stats: results.flatMap((result) => result.data.stats),
+        stats: results.flatMap((result) => (result.data.stats ? [result.data.stats] : [])),
         users: results
           .map((result) =>
             result.data.users.map((user) => ({
@@ -73,6 +121,9 @@ export const mediaRequestsRouter = createTRPCRouter({
           .flat()
           .toSorted(({ requestCount: countA }, { requestCount: countB }) => countB - countA),
         integrations: results.map((result) => result.integration),
+        failedIntegrations: results.flatMap(({ integration, error }) =>
+          error ? [{ integrationId: integration.id, integrationName: integration.name, error }] : [],
+        ),
       };
     }),
   answerRequest: protectedProcedure
@@ -99,5 +150,6 @@ export const mediaRequestsRouter = createTRPCRouter({
       } as const;
 
       await answerActions[input.answer](input.requestId);
+      return { success: true };
     }),
 });
diff --git a/packages/api/src/router/widgets/media-server.ts b/packages/api/src/router/widgets/media-server.ts
index 591d58d2b..77e00204b 100644
--- a/packages/api/src/router/widgets/media-server.ts
+++ b/packages/api/src/router/widgets/media-server.ts
@@ -5,7 +5,7 @@ import { mediaServerRequestHandler } from "@homarr/request-handler/media-server"
 
 import type { IntegrationAction } from "../../middlewares/integration";
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { PUBLIC_INTEGRATION_ERROR, settleIntegrationQueries } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 const createMediaServerIntegrationMiddleware = (action: IntegrationAction) =>
@@ -23,11 +23,30 @@ export const mediaServerRouter = createTRPCRouter({
     .concat(createMediaServerIntegrationMiddleware("query"))
     .input(z.object({ showOnlyPlaying: z.boolean() }))
     .query(async ({ ctx, input }) => {
-      return await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const { data } = await mediaServerRequestHandler
-          .handler(integration, { showOnlyPlaying: input.showOnlyPlaying })
-          .getDataAsync();
-        return { integrationId: integration.id, integrationKind: integration.kind, sessions: data };
-      });
+      return await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
+          const { data } = await mediaServerRequestHandler
+            .handler(integration, { showOnlyPlaying: input.showOnlyPlaying })
+            .getDataAsync();
+          return {
+            integrationId: integration.id,
+            integrationName: integration.name,
+            integrationKind: integration.kind,
+            sessions: data,
+            error: undefined as string | undefined,
+          };
+        },
+        {
+          fallback: (integration) => ({
+            integrationId: integration.id,
+            integrationName: integration.name,
+            integrationKind: integration.kind,
+            sessions: [],
+            error: PUBLIC_INTEGRATION_ERROR,
+          }),
+          throwOnAllFailures: true,
+        },
+      );
     }),
 });
diff --git a/packages/api/src/router/widgets/notifications.ts b/packages/api/src/router/widgets/notifications.ts
index bae8ba9fd..3453b47a6 100644
--- a/packages/api/src/router/widgets/notifications.ts
+++ b/packages/api/src/router/widgets/notifications.ts
@@ -3,7 +3,7 @@ import { notificationsRequestHandler } from "@homarr/request-handler/notificatio
 
 import type { IntegrationAction } from "../../middlewares/integration";
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 const createNotificationsIntegrationMiddleware = (action: IntegrationAction) =>
@@ -13,19 +13,36 @@ export const notificationsRouter = createTRPCRouter({
   getNotifications: publicProcedure
     .unstable_concat(createNotificationsIntegrationMiddleware("query"))
     .query(async ({ ctx }) => {
-      return await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const innerHandler = notificationsRequestHandler.handler(integration, {});
-        const { data, timestamp } = await innerHandler.getDataAsync();
+      return await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
+          const innerHandler = notificationsRequestHandler.handler(integration, {});
+          const { data, timestamp } = await innerHandler.getDataAsync();
 
-        return {
-          integration: {
-            id: integration.id,
-            name: integration.name,
-            kind: integration.kind,
-            updatedAt: timestamp,
-          },
-          data,
-        };
-      });
+          return {
+            integration: {
+              id: integration.id,
+              name: integration.name,
+              kind: integration.kind,
+              updatedAt: timestamp,
+            },
+            data,
+            error: undefined as string | undefined,
+          };
+        },
+        {
+          fallback: (integration, error) => ({
+            integration: {
+              id: integration.id,
+              name: integration.name,
+              kind: integration.kind,
+              updatedAt: new Date(0),
+            },
+            data: [],
+            error: toPublicIntegrationError(error),
+          }),
+          throwOnAllFailures: true,
+        },
+      );
     }),
 });
diff --git a/packages/api/src/router/widgets/options.ts b/packages/api/src/router/widgets/options.ts
index e94ee31a4..e39e5f1dc 100644
--- a/packages/api/src/router/widgets/options.ts
+++ b/packages/api/src/router/widgets/options.ts
@@ -9,6 +9,8 @@ import { boards, items } from "@homarr/db/schema";
 import type { WidgetOptionsSettings } from "../../../../widgets/src";
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "../../trpc";
 import { throwIfActionForbiddenAsync } from "../board/board-access";
+import { validateTimetableOptionsChangeAsync } from "./timetable";
+import { throwIfCustomWidgetPlacementChangeForbidden } from "../board/custom-widget-placement-access";
 
 export const optionsRouter = createTRPCRouter({
   getWidgetOptionSettings: publicProcedure.query(async ({ ctx }): Promise<WidgetOptionsSettings> => {
@@ -45,11 +47,19 @@ export const optionsRouter = createTRPCRouter({
         });
       }
 
-      const options = SuperJSON.parse<Record<string, unknown>>(item.options);
-      Object.assign(options, input.newOptions);
+      const previousOptions = SuperJSON.parse<Record<string, unknown>>(item.options);
+      const updatedOptions = { ...previousOptions, ...input.newOptions };
+      if (item.kind === "timetable") {
+        await validateTimetableOptionsChangeAsync(updatedOptions, previousOptions);
+      }
+      throwIfCustomWidgetPlacementChangeForbidden({
+        isAdmin: ctx.session.user.permissions.includes("admin"),
+        submittedItems: [{ id: item.id, kind: item.kind, options: updatedOptions }],
+        storedItems: [{ id: item.id, kind: item.kind, options: previousOptions }],
+      });
       await ctx.db
         .update(items)
-        .set({ options: SuperJSON.stringify(options) })
+        .set({ options: SuperJSON.stringify(updatedOptions) })
         .where(eq(items.id, input.itemId));
     }),
 });
diff --git a/packages/api/src/router/widgets/releases.ts b/packages/api/src/router/widgets/releases.ts
index d234a75c1..8101fefbb 100644
--- a/packages/api/src/router/widgets/releases.ts
+++ b/packages/api/src/router/widgets/releases.ts
@@ -13,6 +13,7 @@ import { createTRPCRouter, publicProcedure } from "../../trpc";
 import { throwIfActionForbiddenAsync } from "../board/board-access";
 
 const logger = createLogger({ module: "releasesRouter" });
+const PUBLIC_RELEASE_ERROR_MESSAGE: string = "Release provider request failed";
 
 const formatVersionFilterRegex = (versionFilter: z.infer<typeof releaseVersionFilterSchema> | undefined) => {
   if (!versionFilter) return undefined;
@@ -100,19 +101,38 @@ export const releasesRouter = createTRPCRouter({
               })
               .getDataAsync();
 
+            const data = response.data.success
+              ? response.data
+              : {
+                  success: false as const,
+                  error: { code: response.data.error.code, message: PUBLIC_RELEASE_ERROR_MESSAGE },
+                };
+            if (!response.data.success) {
+              logger.warn("Release provider request failed", {
+                repositoryId,
+                provider: repository.provider,
+                error: response.data.error,
+              });
+            }
+
             return {
               id: repositoryId,
               provider: repository.provider,
               timestamp: response.timestamp,
-              ...response.data,
+              ...data,
             };
           } catch (error) {
+            logger.warn("Release provider request failed", {
+              repositoryId,
+              provider: repository.provider,
+              error,
+            });
             return {
               id: repositoryId,
               provider: repository.provider,
               timestamp: new Date(),
               success: false as const,
-              error: { code: "unexpected" as const, message: String(error) },
+              error: { code: "unexpected" as const, message: PUBLIC_RELEASE_ERROR_MESSAGE },
             };
           }
         }),
diff --git a/packages/api/src/router/widgets/rssFeed.ts b/packages/api/src/router/widgets/rssFeed.ts
index 5e43efe3e..87c49fca0 100644
--- a/packages/api/src/router/widgets/rssFeed.ts
+++ b/packages/api/src/router/widgets/rssFeed.ts
@@ -1,7 +1,9 @@
+import { TRPCError } from "@trpc/server";
 import SuperJSON from "superjson";
 import { z } from "zod/v4";
 
 import type { Session } from "@homarr/auth";
+import { env } from "@homarr/common/env";
 import type { Database } from "@homarr/db";
 import { eq } from "@homarr/db";
 import { items, users } from "@homarr/db/schema";
@@ -13,6 +15,16 @@ import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 const logger = createLogger({ module: "rssFeed" });
 
+const safeFeedLogContext = (url: string, feedIndex: number) => {
+  try {
+    return { feedIndex, origin: new URL(url).origin };
+  } catch {
+    return { feedIndex };
+  }
+};
+
+const redactFeedFailureMessage = (message: string) => message.replace(/https?:\/\/\S+/gi, "[redacted URL]");
+
 const feedsInput = z.object({
   urls: z.array(z.string()).max(100),
   maximumAmountPosts: z.number(),
@@ -20,6 +32,8 @@ const feedsInput = z.object({
 
 export const rssFeedRouter = createTRPCRouter({
   getFeeds: publicProcedure.input(feedsInput).query(async ({ ctx, input }) => {
+    if (env.NO_EXTERNAL_CONNECTION) return { entries: [], failedFeedCount: 0 };
+
     const urls = (await canAccessAllFeedsAsync(ctx.db, ctx.session))
       ? input.urls
       : await restrictUrlsAsync(ctx.db, input.urls);
@@ -34,18 +48,37 @@ export const rssFeedRouter = createTRPCRouter({
       }),
     );
 
-    return settled
-      .flatMap((result, index) => {
-        if (result.status === "fulfilled") return result.value.data.entries;
-        logger.warn("RSS feed fetch failed", { url: urls[index], error: result.reason });
-        return [];
-      })
-      .toSorted((entryA, entryB) => {
-        return entryA.published && entryB.published
-          ? new Date(entryB.published).getTime() - new Date(entryA.published).getTime()
-          : 0;
-      })
-      .slice(0, input.maximumAmountPosts);
+    const failures = settled.filter((result) => result.status === "rejected");
+    settled.forEach((result, index) => {
+      if (result.status === "rejected") {
+        logger.warn("RSS feed fetch failed", {
+          ...safeFeedLogContext(urls[index] ?? "", index),
+          errorType: result.reason instanceof Error ? result.reason.name : typeof result.reason,
+          errorMessage: result.reason instanceof Error ? redactFeedFailureMessage(result.reason.message) : undefined,
+        });
+      }
+    });
+    if (settled.length > 0 && failures.length === settled.length) {
+      throw new TRPCError({
+        code: "BAD_GATEWAY",
+        message: "All RSS feed requests failed",
+      });
+    }
+
+    return {
+      entries: settled
+        .flatMap((result) => {
+          if (result.status === "fulfilled") return result.value.data.entries;
+          return [];
+        })
+        .toSorted((entryA, entryB) => {
+          return entryA.published && entryB.published
+            ? new Date(entryB.published).getTime() - new Date(entryA.published).getTime()
+            : 0;
+        })
+        .slice(0, input.maximumAmountPosts),
+      failedFeedCount: failures.length,
+    };
   }),
 });
 
diff --git a/packages/api/src/router/widgets/smart-home.ts b/packages/api/src/router/widgets/smart-home.ts
index c37468752..a0f38c7fa 100644
--- a/packages/api/src/router/widgets/smart-home.ts
+++ b/packages/api/src/router/widgets/smart-home.ts
@@ -1,8 +1,12 @@
 import { z } from "zod/v4";
+import { TRPCError } from "@trpc/server";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { createIntegrationAsync } from "@homarr/integrations";
-import { smartHomeEntityStateRequestHandler } from "@homarr/request-handler/smart-home-entity-state";
+import {
+  smartHomeEntityStateRequestHandler,
+  toSafeEntityDetails,
+} from "@homarr/request-handler/smart-home-entity-state";
 
 import type { IntegrationAction } from "../../middlewares/integration";
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
@@ -25,7 +29,22 @@ export const smartHomeRouter = createTRPCRouter({
     .query(async ({ ctx: { integration }, input }) => {
       const innerHandler = smartHomeEntityStateRequestHandler.handler(integration, { entityId: input.entityId });
       const { data } = await innerHandler.getDataAsync();
-      return data;
+      return data.state;
+    }),
+  entityDetails: publicProcedure
+    .meta({
+      mcp: {
+        enabled: true,
+        description:
+          "Get the state, attributes, and update timestamps for a Home Assistant entity. REQUIRED: integrationId (Home Assistant integration ID), entityId (for example 'sensor.temperature')",
+      },
+    })
+    .input(z.object({ entityId: z.string() }))
+    .concat(createSmartHomeIntegrationMiddleware("query"))
+    .query(async ({ ctx: { integration }, input }) => {
+      const innerHandler = smartHomeEntityStateRequestHandler.handler(integration, { entityId: input.entityId });
+      const { data } = await innerHandler.getDataAsync();
+      return toSafeEntityDetails(data);
     }),
   switchEntity: protectedProcedure
     .meta({
@@ -40,8 +59,10 @@ export const smartHomeRouter = createTRPCRouter({
     .mutation(async ({ ctx: { integration }, input }) => {
       const client = await createIntegrationAsync(integration);
       const success = await client.triggerToggleAsync(input.entityId);
-
-      return success;
+      if (!success) {
+        throw new TRPCError({ code: "BAD_GATEWAY", message: "Home Assistant did not toggle the entity" });
+      }
+      return true;
     }),
   executeAutomation: protectedProcedure
     .meta({
@@ -55,6 +76,10 @@ export const smartHomeRouter = createTRPCRouter({
     .input(z.object({ automationId: z.string() }))
     .mutation(async ({ ctx: { integration }, input }) => {
       const client = await createIntegrationAsync(integration);
-      await client.triggerAutomationAsync(input.automationId);
+      const success = await client.triggerAutomationAsync(input.automationId);
+      if (!success) {
+        throw new TRPCError({ code: "BAD_GATEWAY", message: "Home Assistant did not execute the automation" });
+      }
+      return true;
     }),
 });
diff --git a/packages/api/src/router/widgets/timetable.ts b/packages/api/src/router/widgets/timetable.ts
index ef60ce320..ced16645e 100644
--- a/packages/api/src/router/widgets/timetable.ts
+++ b/packages/api/src/router/widgets/timetable.ts
@@ -1,36 +1,281 @@
+import { lookup } from "node:dns/promises";
+import { BlockList, isIP } from "node:net";
+import { TRPCError } from "@trpc/server";
+import { parse } from "superjson";
 import z from "zod";
 
+import type { Session } from "@homarr/auth";
+import type { Database } from "@homarr/db";
+import { and, eq } from "@homarr/db";
+import { boards, items } from "@homarr/db/schema";
+import type { TimetableResolvedAddress } from "@homarr/request-handler/timetable";
 import {
   timetableGetTimetableRequestHandler,
   timetableSearchStationsRequestHandler,
 } from "@homarr/request-handler/timetable";
+import { DEFAULT_TIMETABLE_BASE_URL, normalizeTimetableBaseUrl } from "@homarr/request-handler/timetable-url";
 
 import { createTRPCRouter, publicProcedure } from "../../trpc";
+import { throwIfActionForbiddenAsync } from "../board/board-access";
 
-const baseUrlSchema = z.string().url();
+const baseUrlSchema = z.string().url().max(2_048);
+const timetableSourceSchema = z.object({
+  baseUrl: baseUrlSchema,
+  itemId: z.string().max(100).optional(),
+  boardId: z.string().max(100).optional(),
+});
+const timetableOptionsSchema = z.object({ baseUrl: z.string().optional() }).passthrough();
+
+const blockedTimetableIpv4Addresses = new BlockList();
+const blockedTimetableIpv6Addresses = new BlockList();
+const blockedTimetableSubnets = [
+  ["0.0.0.0", 8, "ipv4"],
+  ["10.0.0.0", 8, "ipv4"],
+  ["100.64.0.0", 10, "ipv4"],
+  ["127.0.0.0", 8, "ipv4"],
+  ["169.254.0.0", 16, "ipv4"],
+  ["172.16.0.0", 12, "ipv4"],
+  ["192.0.0.0", 24, "ipv4"],
+  ["192.0.2.0", 24, "ipv4"],
+  ["192.88.99.0", 24, "ipv4"],
+  ["192.168.0.0", 16, "ipv4"],
+  ["198.18.0.0", 15, "ipv4"],
+  ["198.51.100.0", 24, "ipv4"],
+  ["203.0.113.0", 24, "ipv4"],
+  ["224.0.0.0", 4, "ipv4"],
+  ["240.0.0.0", 4, "ipv4"],
+  ["::", 96, "ipv6"],
+  ["::ffff:0:0", 96, "ipv6"],
+  ["::ffff:0:0:0", 96, "ipv6"],
+  ["64:ff9b::", 96, "ipv6"],
+  ["64:ff9b:1::", 48, "ipv6"],
+  ["100::", 64, "ipv6"],
+  ["2001::", 32, "ipv6"],
+  ["2001:2::", 48, "ipv6"],
+  ["2001:10::", 28, "ipv6"],
+  ["2001:db8::", 32, "ipv6"],
+  ["2002::", 16, "ipv6"],
+  ["fc00::", 7, "ipv6"],
+  ["fe80::", 10, "ipv6"],
+  ["fec0::", 10, "ipv6"],
+  ["ff00::", 8, "ipv6"],
+] as const;
+
+for (const [network, prefix, family] of blockedTimetableSubnets) {
+  const blockList = family === "ipv4" ? blockedTimetableIpv4Addresses : blockedTimetableIpv6Addresses;
+  blockList.addSubnet(network, prefix, family);
+}
+
+const normalizeBaseUrlOrThrowBadRequest = (baseUrl: string) => {
+  try {
+    return normalizeTimetableBaseUrl(baseUrl);
+  } catch (cause) {
+    throw new TRPCError({
+      code: "BAD_REQUEST",
+      message: cause instanceof Error ? cause.message : "Invalid timetable base URL",
+      cause,
+    });
+  }
+};
+
+const throwInvalidSavedTimetableConfiguration = (cause: unknown): never => {
+  throw new TRPCError({
+    code: "INTERNAL_SERVER_ERROR",
+    message: "Timetable widget configuration is invalid",
+    cause,
+  });
+};
+
+const parseSavedTimetableOptions = (serializedOptions: string) => {
+  try {
+    return timetableOptionsSchema.parse(parse<unknown>(serializedOptions));
+  } catch (cause) {
+    return throwInvalidSavedTimetableConfiguration(cause);
+  }
+};
+
+const normalizeSavedTimetableBaseUrl = (baseUrl: string) => {
+  try {
+    return normalizeTimetableBaseUrl(baseUrl);
+  } catch (cause) {
+    return throwInvalidSavedTimetableConfiguration(cause);
+  }
+};
+
+const normalizeHostname = (hostname: string) => {
+  const withoutBrackets = hostname.startsWith("[") && hostname.endsWith("]") ? hostname.slice(1, -1) : hostname;
+  return withoutBrackets.toLowerCase().replace(/\.$/, "");
+};
+
+const isBlockedTimetableAddress = (address: string, family: number) => {
+  return family === 6
+    ? blockedTimetableIpv6Addresses.check(address, "ipv6")
+    : blockedTimetableIpv4Addresses.check(address, "ipv4");
+};
+
+const resolvePublicTimetableAddressesAsync = async (baseUrl: string): Promise<TimetableResolvedAddress[]> => {
+  const hostname = normalizeHostname(new URL(baseUrl).hostname);
+  const hostnameFamily = isIP(hostname);
+  const isInternalHostname =
+    hostnameFamily === 0 &&
+    (!hostname.includes(".") ||
+      hostname === "localhost" ||
+      hostname.endsWith(".localhost") ||
+      hostname.endsWith(".local") ||
+      hostname.endsWith(".internal") ||
+      hostname.endsWith(".lan") ||
+      hostname.endsWith(".home.arpa"));
+
+  if (isInternalHostname) {
+    throw new TRPCError({ code: "BAD_REQUEST", message: "Timetable base URL must use a public host" });
+  }
+
+  let addresses: TimetableResolvedAddress[];
+  try {
+    const resolvedAddresses =
+      hostnameFamily === 0
+        ? await lookup(hostname, { all: true, verbatim: true })
+        : [{ address: hostname, family: hostnameFamily }];
+    addresses = resolvedAddresses.filter(
+      (entry): entry is TimetableResolvedAddress => entry.family === 4 || entry.family === 6,
+    );
+  } catch (cause) {
+    throw new TRPCError({
+      code: "BAD_REQUEST",
+      message: "Timetable base URL host could not be resolved",
+      cause,
+    });
+  }
+
+  if (addresses.length === 0 || addresses.some(({ address, family }) => isBlockedTimetableAddress(address, family))) {
+    throw new TRPCError({
+      code: "BAD_REQUEST",
+      message: "Timetable base URL must not target a private or internal address",
+    });
+  }
+
+  return addresses.toSorted((left, right) => left.family - right.family || left.address.localeCompare(right.address));
+};
+
+const normalizeTimetableOptionsBaseUrlOrThrowBadRequest = (options: Record<string, unknown>) => {
+  const parsedOptions = timetableOptionsSchema.safeParse(options);
+  if (!parsedOptions.success) {
+    throw new TRPCError({ code: "BAD_REQUEST", message: "Invalid timetable widget options" });
+  }
+  return normalizeBaseUrlOrThrowBadRequest(parsedOptions.data.baseUrl ?? DEFAULT_TIMETABLE_BASE_URL);
+};
+
+export const validateTimetableOptionsChangeAsync = async (
+  nextOptions: Record<string, unknown>,
+  previousOptions?: Record<string, unknown>,
+) => {
+  const nextBaseUrl = normalizeTimetableOptionsBaseUrlOrThrowBadRequest(nextOptions);
+  if (nextBaseUrl === DEFAULT_TIMETABLE_BASE_URL) return;
+
+  let previousBaseUrl: string | undefined;
+  if (previousOptions) {
+    try {
+      previousBaseUrl = normalizeTimetableOptionsBaseUrlOrThrowBadRequest(previousOptions);
+    } catch {
+      // Invalid legacy options must not prevent replacing them with a valid configuration.
+    }
+  }
+  if (nextBaseUrl === previousBaseUrl) return;
+
+  await resolvePublicTimetableAddressesAsync(nextBaseUrl);
+};
+
+const getSavedTimetableBaseUrl = (serializedOptions: string) => {
+  const options = parseSavedTimetableOptions(serializedOptions);
+  return normalizeSavedTimetableBaseUrl(options.baseUrl ?? DEFAULT_TIMETABLE_BASE_URL);
+};
+
+interface ResolvedTimetableSource {
+  baseUrl: string;
+  pinnedAddresses?: TimetableResolvedAddress[];
+}
+
+const resolveTimetableBaseUrlAsync = async (
+  ctx: { db: Database; session: Session | null },
+  input: z.infer<typeof timetableSourceSchema>,
+  allowBoardConfiguration = false,
+): Promise<ResolvedTimetableSource> => {
+  const requestedBaseUrl = normalizeBaseUrlOrThrowBadRequest(input.baseUrl);
+  if (allowBoardConfiguration) {
+    if (input.boardId) {
+      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.boardId), "modify");
+      if (input.itemId) {
+        const item = await ctx.db.query.items.findFirst({
+          columns: { id: true },
+          where: and(eq(items.id, input.itemId), eq(items.kind, "timetable"), eq(items.boardId, input.boardId)),
+        });
+        if (!item) throw new TRPCError({ code: "NOT_FOUND", message: "Timetable widget not found" });
+      }
+      if (requestedBaseUrl === DEFAULT_TIMETABLE_BASE_URL) {
+        return { baseUrl: requestedBaseUrl };
+      }
+
+      // Resolve immediately before every custom request. A URL that was public when saved can later resolve to a
+      // private address, so matching the persisted value is not sufficient protection against DNS rebinding.
+      const pinnedAddresses = await resolvePublicTimetableAddressesAsync(requestedBaseUrl);
+      return { baseUrl: requestedBaseUrl, pinnedAddresses };
+    }
+    if (requestedBaseUrl !== DEFAULT_TIMETABLE_BASE_URL) {
+      throw new TRPCError({ code: "FORBIDDEN", message: "Board modify access is required for this endpoint" });
+    }
+    return { baseUrl: DEFAULT_TIMETABLE_BASE_URL };
+  }
+  if (!input.itemId) {
+    if (requestedBaseUrl !== DEFAULT_TIMETABLE_BASE_URL) {
+      throw new TRPCError({ code: "FORBIDDEN", message: "A saved timetable widget is required for this endpoint" });
+    }
+    return { baseUrl: DEFAULT_TIMETABLE_BASE_URL };
+  }
+
+  const item = await ctx.db.query.items.findFirst({
+    where: and(eq(items.id, input.itemId), eq(items.kind, "timetable")),
+  });
+  if (!item) throw new TRPCError({ code: "NOT_FOUND", message: "Timetable widget not found" });
+
+  await throwIfActionForbiddenAsync(ctx, eq(boards.id, item.boardId), "view");
+  const savedBaseUrl = getSavedTimetableBaseUrl(item.options);
+  if (requestedBaseUrl !== savedBaseUrl) {
+    throw new TRPCError({ code: "FORBIDDEN", message: "Timetable URL does not match the saved widget" });
+  }
+  if (savedBaseUrl === DEFAULT_TIMETABLE_BASE_URL) return { baseUrl: savedBaseUrl };
+
+  const pinnedAddresses = await resolvePublicTimetableAddressesAsync(savedBaseUrl);
+  return { baseUrl: savedBaseUrl, pinnedAddresses };
+};
 
 export const timetableRouter = createTRPCRouter({
   getTimetable: publicProcedure
     .input(
-      z.object({
-        baseUrl: baseUrlSchema,
-        stationId: z.string(),
+      timetableSourceSchema.extend({
+        stationId: z.string().min(1).max(200),
         limit: z.number().int().min(1).max(100),
       }),
     )
-    .query(async ({ input }) => {
-      const { data } = await timetableGetTimetableRequestHandler.handler(input).getDataAsync();
+    .query(async ({ ctx, input }) => {
+      const { baseUrl, pinnedAddresses } = await resolveTimetableBaseUrlAsync(ctx, input);
+      const { itemId: _itemId, boardId: _boardId, ...handlerInput } = input;
+      const { data } = await timetableGetTimetableRequestHandler
+        .handler({ ...handlerInput, baseUrl, pinnedAddresses })
+        .getDataAsync();
       return data;
     }),
   searchStations: publicProcedure
     .input(
-      z.object({
-        baseUrl: baseUrlSchema,
-        query: z.string(),
+      timetableSourceSchema.extend({
+        query: z.string().max(200),
       }),
     )
-    .query(async ({ input }) => {
-      const { data } = await timetableSearchStationsRequestHandler.handler(input).getDataAsync();
+    .query(async ({ ctx, input }) => {
+      const { baseUrl, pinnedAddresses } = await resolveTimetableBaseUrlAsync(ctx, input, true);
+      const { itemId: _itemId, boardId: _boardId, ...handlerInput } = input;
+      const { data } = await timetableSearchStationsRequestHandler
+        .handler({ ...handlerInput, baseUrl, pinnedAddresses })
+        .getDataAsync();
       return data;
     }),
 });
diff --git a/packages/api/src/router/widgets/vpn.ts b/packages/api/src/router/widgets/vpn.ts
index 407e4986f..276367440 100644
--- a/packages/api/src/router/widgets/vpn.ts
+++ b/packages/api/src/router/widgets/vpn.ts
@@ -2,24 +2,41 @@ import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { vpnSummaryHandler } from "@homarr/request-handler/vpn";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const vpnRouter = createTRPCRouter({
   getSummaries: publicProcedure
     .unstable_concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("vpn")))
     .query(async ({ ctx }) => {
-      return await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const { data, timestamp } = await vpnSummaryHandler.handler(integration, {}).getDataAsync();
-        return {
-          integration: {
-            id: integration.id,
-            name: integration.name,
-            kind: integration.kind,
-            updatedAt: timestamp,
-          },
-          summary: data,
-        };
-      });
+      return await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
+          const { data, timestamp } = await vpnSummaryHandler.handler(integration, {}).getDataAsync();
+          return {
+            integration: {
+              id: integration.id,
+              name: integration.name,
+              kind: integration.kind,
+              updatedAt: timestamp,
+            },
+            summary: data as typeof data | null,
+            error: undefined as string | undefined,
+          };
+        },
+        {
+          fallback: (integration, error) => ({
+            integration: {
+              id: integration.id,
+              name: integration.name,
+              kind: integration.kind,
+              updatedAt: new Date(0),
+            },
+            summary: null,
+            error: toPublicIntegrationError(error),
+          }),
+          throwOnAllFailures: true,
+        },
+      );
     }),
 });
diff --git a/packages/api/src/router/widgets/weather.ts b/packages/api/src/router/widgets/weather.ts
index 87ea6b48a..98416ee3c 100644
--- a/packages/api/src/router/widgets/weather.ts
+++ b/packages/api/src/router/widgets/weather.ts
@@ -1,5 +1,6 @@
 import { z } from "zod/v4";
 
+import { env } from "@homarr/common/env";
 import { weatherRequestHandler } from "@homarr/request-handler/weather";
 
 import { createTRPCRouter, publicProcedure } from "../../trpc";
@@ -11,6 +12,8 @@ const atLocationInput = z.object({
 
 export const weatherRouter = createTRPCRouter({
   atLocation: publicProcedure.input(atLocationInput).query(async ({ input }) => {
+    if (env.NO_EXTERNAL_CONNECTION) return null;
+
     const handler = weatherRequestHandler.handler(input);
     return await handler.getDataAsync().then((result) => result.data);
   }),
diff --git a/packages/api/src/rsc-context.ts b/packages/api/src/rsc-context.ts
new file mode 100644
index 000000000..6ea6eeb2d
--- /dev/null
+++ b/packages/api/src/rsc-context.ts
@@ -0,0 +1,16 @@
+import { cache } from "react";
+import { headers } from "next/headers";
+
+import { auth } from "@homarr/auth/next";
+
+import { createTRPCContext } from "./trpc";
+
+export const createRscTrpcContext = cache(async () => {
+  const requestHeaders = new Headers(await headers());
+  requestHeaders.set("x-trpc-source", "rsc");
+
+  return createTRPCContext({
+    session: await auth(),
+    headers: requestHeaders,
+  });
+});
diff --git a/packages/api/src/server-settings-server.ts b/packages/api/src/server-settings-server.ts
new file mode 100644
index 000000000..29755dfac
--- /dev/null
+++ b/packages/api/src/server-settings-server.ts
@@ -0,0 +1,8 @@
+import { cache } from "react";
+
+import { db } from "@homarr/db";
+import { getServerSettingsAsync } from "@homarr/db/queries";
+
+// One settings snapshot per RSC request, shared by the root layout, theme, and
+// widget prefetching. React invalidates this cache between requests.
+export const getRscServerSettingsAsync = cache(async () => await getServerSettingsAsync(db));
diff --git a/packages/api/src/server.ts b/packages/api/src/server.ts
index b172e2e84..eae175c62 100644
--- a/packages/api/src/server.ts
+++ b/packages/api/src/server.ts
@@ -1,25 +1,16 @@
 import { cache } from "react";
-import { headers } from "next/headers";
 import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
 
-import { appRouter, createCaller, createTRPCContext } from "@homarr/api";
-import { auth } from "@homarr/auth/next";
+import { appRouter, createCaller } from "@homarr/api";
 
+import { createRscTrpcContext } from "./rsc-context";
 import { makeQueryClient } from "./shared";
 
 /**
  * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
  * handling a tRPC call from a React Server Component.
  */
-const createContext = cache(async () => {
-  const heads = new Headers(await headers());
-  heads.set("x-trpc-source", "rsc");
-
-  return createTRPCContext({
-    session: await auth(),
-    headers: heads,
-  });
-});
+const createContext = () => createRscTrpcContext();
 
 export const api = createCaller(createContext);
 
diff --git a/packages/api/src/settle-integrations.ts b/packages/api/src/settle-integrations.ts
index a9dbff5ba..c095c7715 100644
--- a/packages/api/src/settle-integrations.ts
+++ b/packages/api/src/settle-integrations.ts
@@ -1,8 +1,14 @@
+import { TRPCError } from "@trpc/server";
+
 import { createLogger } from "@homarr/core/infrastructure/logs";
 import { ErrorWithMetadata } from "@homarr/core/infrastructure/logs/error";
 
 const logger = createLogger({ module: "settleIntegrations" });
 
+export const PUBLIC_INTEGRATION_ERROR: string = "INTEGRATION_REQUEST_FAILED";
+
+export const toPublicIntegrationError = (_error: unknown): string => PUBLIC_INTEGRATION_ERROR;
+
 interface IntegrationLike {
   id: string;
   name: string;
@@ -11,6 +17,7 @@ interface IntegrationLike {
 
 interface Options<TIntegration extends IntegrationLike, TResult> {
   fallback?: (integration: TIntegration, error: unknown) => TResult;
+  throwOnAllFailures?: boolean;
 }
 
 export async function settleIntegrationQueries<TIntegration extends IntegrationLike, TResult>(
@@ -37,16 +44,23 @@ export async function settleIntegrationQueries<TIntegration extends IntegrationL
       ),
     );
 
+    errors.push(result.reason);
+
     if (options?.fallback && integration) {
       results.push(options.fallback(integration, result.reason));
       return;
     }
-
-    errors.push(result.reason);
   });
 
-  if (results.length === 0 && errors.length > 0) {
-    throw errors[0];
+  if (
+    errors.length > 0 &&
+    (results.length === 0 || (options?.throwOnAllFailures === true && errors.length === integrations.length))
+  ) {
+    throw new TRPCError({
+      code: "INTERNAL_SERVER_ERROR",
+      message: "All integration queries failed",
+      cause: errors[0],
+    });
   }
 
   return results;
diff --git a/packages/api/src/test/mcp.spec.ts b/packages/api/src/test/mcp.spec.ts
index dadd5393d..df29ce7f5 100644
--- a/packages/api/src/test/mcp.spec.ts
+++ b/packages/api/src/test/mcp.spec.ts
@@ -1,73 +1,228 @@
-// @vitest-environment node
-
-import { expect, test, vi } from "vitest";
+import type { TRPCError } from "@trpc/server";
+import { describe, expect, test, vi } from "vitest";
 import { extractToolsFromProcedures } from "trpc-to-mcp";
 
-import { appRouter } from "../router/app";
-import { boardRouter } from "../router/board";
-import { customWidgetRouter } from "../router/custom-widget/custom-widget-router";
-import { iconsRouter } from "../router/icons";
-import { infoRouter } from "../router/info";
-import { inviteRouter } from "../router/invite";
-import { serverSettingsRouter } from "../router/serverSettings";
-import { createTRPCRouter } from "../trpc";
+import { mcpRouter } from "../mcp";
 
 vi.mock("@homarr/auth", () => ({}));
-vi.mock("@homarr/common/server", () => ({
-  decryptSecret: vi.fn(),
-  encryptSecret: vi.fn(),
-}));
-vi.mock("@homarr/core/infrastructure/logs", () => ({
-  createLogger: () => ({
-    error: vi.fn(),
-  }),
-}));
-vi.mock("@homarr/core/infrastructure/db/env", () => ({
-  dbEnv: { DRIVER: "better-sqlite3" },
-}));
 
-const mcpTestRouter = createTRPCRouter({
-  app: appRouter,
-  board: boardRouter,
-  customWidget: customWidgetRouter,
-  icon: iconsRouter,
-  info: infoRouter,
-  invite: inviteRouter,
-  serverSettings: serverSettingsRouter,
+const MCP_TOOL_ALLOWLIST = {
+  query: [
+    "apiKeys_getAll",
+    "app_all",
+    "app_byId",
+    "app_getPaginated",
+    "app_search",
+    "bazarr_getBadges",
+    "beszel_getAlerts",
+    "beszel_getSystems",
+    "beszel_getSystemStats",
+    "board_getAllBoards",
+    "board_getBoardSettings",
+    "calendar_findAllEvents",
+    "customWidget_get",
+    "customWidget_getAuthoringPrompt",
+    "customWidget_getSkill",
+    "customWidget_legacyMigrationPrompt",
+    "customWidget_list",
+    "customWidget_previewJournal",
+    "customWidget_previewQuery",
+    "customWidget_schema",
+    "customWidget_validate",
+    "customWidget_workshopGet",
+    "customWidget_workshopSearch",
+    "dnsHole_summary",
+    "docker_getContainers",
+    "docker_logs",
+    "downloads_getJobsAndStatuses",
+    "healthMonitoring_getClusterHealthStatus",
+    "healthMonitoring_getSystemHealthStatus",
+    "healthMonitoring_listStorageVolumes",
+    "icon_findIcons",
+    "info_getInfo",
+    "integration_all",
+    "integration_byId",
+    "integration_getKinds",
+    "integration_getMediaRequestOptions",
+    "integration_mediaRequestSearchTargets",
+    "integration_search",
+    "integration_searchInIntegration",
+    "integration_searchMediaRequests",
+    "invite_getAll",
+    "mediaRequests_getLatestRequests",
+    "mediaRequests_getStats",
+    "mediaServer_getCurrentStreams",
+    "patchmon_getStats",
+    "serverSettings_getBoardSettings",
+    "smartHome_entityDetails",
+    "smartHome_entityState",
+    "widgetSecrets_getConfiguredKinds",
+  ],
+  mutation: [
+    "app_create",
+    "app_delete",
+    "app_update",
+    "board_addItem",
+    "board_changeBoardVisibility",
+    "board_createBoard",
+    "board_deleteBoard",
+    "board_duplicateBoard",
+    "board_renameBoard",
+    "board_resetLayout",
+    "board_savePartialBoardSettings",
+    "board_setHomeBoard",
+    "board_setMobileHomeBoard",
+    "customWidget_delete",
+    "customWidget_previewAction",
+    "customWidget_templatePatch",
+    "dnsHole_disable",
+    "dnsHole_enable",
+    "docker_removeAll",
+    "docker_restartAll",
+    "docker_startAll",
+    "docker_stopAll",
+    "downloads_pause",
+    "downloads_resume",
+    "integration_create",
+    "integration_delete",
+    "integration_requestMedia",
+    "invite_createInvite",
+    "invite_deleteInvite",
+    "mediaRequests_answerRequest",
+    "serverSettings_updateBoardSettings",
+    "smartHome_executeAutomation",
+    "smartHome_switchEntity",
+  ],
+  secret: [
+    "apiKeys_create",
+    "apiKeys_delete",
+    "customWidget_configurationRequestUser",
+    "customWidget_create",
+    "customWidget_migrateLegacy",
+    "customWidget_previewCreate",
+    "customWidget_secretSet",
+    "customWidget_sourceConfigure",
+    "customWidget_update",
+    "customWidget_workshopInstall",
+    "widgetSecrets_deleteSecret",
+    "widgetSecrets_setSecret",
+  ],
+} as const;
+
+type ToolClassification = keyof typeof MCP_TOOL_ALLOWLIST;
+
+function expectedToolInventory() {
+  return Object.entries(MCP_TOOL_ALLOWLIST)
+    .flatMap(([classification, names]) =>
+      names.map((name) => ({ name, classification: classification as ToolClassification })),
+    )
+    .toSorted((left, right) => left.name.localeCompare(right.name));
+}
+
+function actualToolInventory() {
+  const secretTools = new Set<string>(MCP_TOOL_ALLOWLIST.secret);
+  const procedures = mcpRouter["_def"].procedures as unknown as Record<
+    string,
+    { _def?: { type?: "query" | "mutation" } }
+  >;
+  return extractToolsFromProcedures(mcpRouter)
+    .map((tool) => {
+      const procedure = procedures[tool.pathInRouter.join(".")];
+      const type = procedure?.["_def"]?.type;
+      if (type !== "query" && type !== "mutation") throw new Error(`Unable to classify MCP tool '${tool.name}'`);
+      return {
+        name: tool.name,
+        classification: secretTools.has(tool.name) ? ("secret" as const) : type,
+      };
+    })
+    .toSorted((left, right) => left.name.localeCompare(right.name));
+}
+
+describe("production MCP router", () => {
+  test("matches the reviewed tool and permission inventory exactly", () => {
+    expect(actualToolInventory()).toEqual(expectedToolInventory());
+  });
+
+  test("keeps every secret-bearing tool behind a mutation procedure", () => {
+    const tools = extractToolsFromProcedures(mcpRouter);
+    const procedures = mcpRouter["_def"].procedures as unknown as Record<
+      string,
+      { _def?: { type?: "query" | "mutation" } }
+    >;
+    for (const name of MCP_TOOL_ALLOWLIST.secret) {
+      const tool = tools.find((candidate) => candidate.name === name);
+      expect(tool, `Missing reviewed secret tool '${name}'`).toBeDefined();
+      const procedure = tool ? procedures[tool.pathInRouter.join(".")] : undefined;
+      expect(procedure?.["_def"]?.type, `Secret tool '${name}' must remain a mutation`).toBe("mutation");
+    }
+  });
+
+  test("gives every production tool a description", () => {
+    const tools = extractToolsFromProcedures(mcpRouter);
+    for (const tool of tools) expect(tool.description, `Tool ${tool.name} should have a description`).toBeTruthy();
+    expect(tools.find((tool) => tool.name === "customWidget_getAuthoringPrompt")?.description).toBe(
+      "Get the current Custom Widget authoring instructions.",
+    );
+  });
 });
 
-test("MCP tools should be extractable from the router", () => {
-  const act = () => extractToolsFromProcedures(mcpTestRouter);
+describe("custom widget authoring procedure access", () => {
+  const unauthenticatedCaller = mcpRouter.createCaller({
+    db: null as never,
+    deviceType: undefined,
+    session: null,
+  });
 
-  expect(act).not.toThrow();
-});
-
-test("MCP tools should contain expected procedures", () => {
-  const tools = extractToolsFromProcedures(mcpTestRouter);
-  const toolNames = tools.map((tool) => tool.name);
-
-  expect(tools.length).toBeGreaterThan(0);
-  expect(toolNames).toContain("app_all");
-  expect(toolNames).toContain("app_byId");
-  expect(toolNames).toContain("app_create");
-  expect(toolNames).toContain("board_savePartialBoardSettings");
-  expect(toolNames).toContain("board_getBoardSettings");
-  expect(toolNames).toContain("board_duplicateBoard");
-  expect(toolNames).toContain("customWidget_all");
-  expect(toolNames).toContain("customWidget_byId");
-  expect(toolNames).toContain("customWidget_create");
-  expect(toolNames).toContain("customWidget_update");
-  expect(toolNames).toContain("icon_findIcons");
-  expect(toolNames).toContain("info_getInfo");
-  expect(toolNames).toContain("invite_getAll");
-  expect(toolNames).toContain("serverSettings_getBoardSettings");
-  expect(toolNames).toContain("serverSettings_updateBoardSettings");
-});
-
-test("MCP tools should have descriptions", () => {
-  const tools = extractToolsFromProcedures(mcpTestRouter);
-
-  for (const tool of tools) {
-    expect(tool.description, `Tool ${tool.name} should have a description`).toBeTruthy();
-  }
+  test("rejects every authoring procedure without a session", async () => {
+    const calls = [
+      unauthenticatedCaller.customWidget.schema(),
+      unauthenticatedCaller.customWidget.getAuthoringPrompt(),
+      unauthenticatedCaller.customWidget.getSkill(),
+      unauthenticatedCaller.customWidget.list(),
+      unauthenticatedCaller.customWidget.validate({ widget: {} }),
+      unauthenticatedCaller.customWidget.secretSet({
+        definitionId: "widget",
+        secret: { sourceId: "default", kind: "apiKey", value: "secret" },
+      }),
+    ];
+    for (const call of calls) {
+      await expect(call).rejects.toEqual(expect.objectContaining<Partial<TRPCError>>({ code: "UNAUTHORIZED" }));
+    }
+  });
+
+  test("rejects authoring and secret tools for authenticated non-admins", async () => {
+    const nonAdminCaller = mcpRouter.createCaller({
+      db: null as never,
+      deviceType: undefined,
+      session: { user: { id: "user-1", permissions: ["board-modify-all"] } } as never,
+    });
+    const calls = [
+      nonAdminCaller.customWidget.schema(),
+      nonAdminCaller.customWidget.getAuthoringPrompt(),
+      nonAdminCaller.customWidget.getSkill(),
+      nonAdminCaller.customWidget.secretSet({
+        definitionId: "widget",
+        secret: { sourceId: "default", kind: "apiKey", value: "secret" },
+      }),
+    ];
+    for (const call of calls) {
+      await expect(call).rejects.toEqual(expect.objectContaining<Partial<TRPCError>>({ code: "FORBIDDEN" }));
+    }
+  });
+
+  test("allows admins to read authoring resources", async () => {
+    const adminCaller = mcpRouter.createCaller({
+      db: null as never,
+      deviceType: undefined,
+      session: { user: { id: "admin-1", permissions: ["admin"] } } as never,
+    });
+    await expect(adminCaller.customWidget.schema()).resolves.toMatchObject({ type: "object" });
+    await expect(adminCaller.customWidget.getAuthoringPrompt()).resolves.toMatchObject({
+      version: 2,
+      prompt: expect.any(String),
+    });
+    await expect(adminCaller.customWidget.getSkill()).resolves.toMatchObject({
+      name: expect.any(String),
+    });
+  });
 });
diff --git a/packages/api/src/test/query-cache.spec.ts b/packages/api/src/test/query-cache.spec.ts
index 68d28eb15..e5928bf71 100644
--- a/packages/api/src/test/query-cache.spec.ts
+++ b/packages/api/src/test/query-cache.spec.ts
@@ -1,65 +1,20 @@
 import { afterEach, describe, expect, test, vi } from "vitest";
 import { QueryClient } from "@tanstack/react-query";
 
-import type { Session } from "@homarr/auth";
-import { createId } from "@homarr/common";
-import type { Database } from "@homarr/db";
-import { boards, users } from "@homarr/db/schema";
-import { createDb } from "@homarr/db/test";
 import {
-  isPersistableWidgetQueryKey,
+  dashboardSupportingQueryPolicies,
+  isWidgetDataQueryKey,
+  isWidgetDataTrpcPath,
+  queryCacheDefaultRefetchIntervalMs,
   queryCacheDefaultStaleTimeMs,
-  queryCacheMaxValueBytes,
+  queryCacheMetadataStaleTimeMs,
 } from "@homarr/api/query-cache";
 
-import { queryCacheRouter } from "../router/query-cache";
-
-const redisMock = vi.hoisted(() => {
-  const values = new Map<string, string>();
-
-  return {
-    values,
-    setQueryCacheAsync: vi.fn(
-      async (_userId: string, _boardId: string, value: string, _ttlMs: number, maxValueBytes: number) => {
-        if (Buffer.byteLength(value, "utf8") > maxValueBytes) return false;
-        values.set(`${_userId}:${_boardId}`, value);
-        return true;
-      },
-    ),
-    removeQueryCacheAsync: vi.fn(async (_userId: string, _boardId: string) => {
-      values.delete(`${_userId}:${_boardId}`);
-    }),
-  };
-});
-
-vi.mock("@homarr/redis", () => ({
-  setQueryCacheAsync: redisMock.setQueryCacheAsync,
-  removeQueryCacheAsync: redisMock.removeQueryCacheAsync,
-}));
-
-vi.mock("@homarr/auth", () => ({ auth: () => ({}) as Session }));
-
 afterEach(() => {
   vi.useRealTimers();
-  redisMock.values.clear();
-  redisMock.setQueryCacheAsync.mockClear();
-  redisMock.removeQueryCacheAsync.mockClear();
 });
 
-const createSession = (userId = createId()): Session => ({
-  user: {
-    id: userId,
-    permissions: [],
-    colorScheme: "light",
-  },
-  expires: new Date().toISOString(),
-});
-
-const insertUserAsync = async (db: Database, id: string) => {
-  await db.insert(users).values({ id });
-};
-
-describe("isPersistableWidgetQueryKey", () => {
+describe("isWidgetDataQueryKey", () => {
   test.each([
     [[["widget", "calendar", "findAllEvents"], { type: "query" }], true],
     [[["app", "byId"], { type: "query" }], true],
@@ -72,77 +27,22 @@ describe("isPersistableWidgetQueryKey", () => {
     [[["app", "selectable"], { type: "query" }], false],
     [[["board", "getBoardByName"], { type: "query" }], false],
     [["widget"], false],
-  ])("matches persist filter for %j", (queryKey, expected) => {
-    expect(isPersistableWidgetQueryKey(queryKey)).toBe(expected);
+  ])("matches widget data queries for %j", (queryKey, expected) => {
+    expect(isWidgetDataQueryKey(queryKey)).toBe(expected);
   });
 });
 
-describe("queryCacheRouter", () => {
-  test("stores and removes data for a board viewer", async () => {
-    const db = createDb();
-    const session = createSession();
-    await insertUserAsync(db, session.user.id);
-    await db.insert(boards).values({ id: "board-1", name: "board", creatorId: session.user.id, isPublic: false });
-
-    const caller = queryCacheRouter.createCaller({ db, deviceType: undefined, session });
-
-    await expect(caller.setItem({ boardId: "board-1", value: "cached-value" })).resolves.toEqual({
-      stored: true,
-    });
-    expect(redisMock.setQueryCacheAsync).toHaveBeenCalledWith(
-      session.user.id,
-      "board-1",
-      "cached-value",
-      expect.any(Number),
-      queryCacheMaxValueBytes,
-    );
-
-    await caller.removeItem({ boardId: "board-1" });
-    expect(redisMock.removeQueryCacheAsync).toHaveBeenCalledWith(session.user.id, "board-1");
-  });
-
-  test("does not touch Redis when board access is denied", async () => {
-    const db = createDb();
-    await insertUserAsync(db, "owner");
-    await db.insert(boards).values({ id: "board-1", name: "board", creatorId: "owner", isPublic: false });
-
-    redisMock.setQueryCacheAsync.mockClear();
-    const caller = queryCacheRouter.createCaller({ db, deviceType: undefined, session: createSession("other-user") });
-
-    await expect(caller.setItem({ boardId: "board-1", value: "cached-value" })).rejects.toThrow("Board not found");
-    expect(redisMock.setQueryCacheAsync).not.toHaveBeenCalled();
-  });
-
-  test("scopes anonymous public-board cache entries by anonymous user", async () => {
-    const db = createDb();
-    await insertUserAsync(db, "owner");
-    await db.insert(boards).values({ id: "board-1", name: "board", creatorId: "owner", isPublic: true });
-
-    const caller = queryCacheRouter.createCaller({ db, deviceType: undefined, session: null });
-
-    await caller.setItem({ boardId: "board-1", value: "cached-value" });
-
-    expect(redisMock.setQueryCacheAsync).toHaveBeenCalledWith(
-      "anonymous",
-      "board-1",
-      "cached-value",
-      expect.any(Number),
-      queryCacheMaxValueBytes,
-    );
-  });
-
-  test("rejects oversized values", async () => {
-    const db = createDb();
-    const session = createSession("user-1");
-    await insertUserAsync(db, session.user.id);
-    await db.insert(boards).values({ id: "board-1", name: "board", creatorId: session.user.id, isPublic: false });
-
-    const caller = queryCacheRouter.createCaller({ db, deviceType: undefined, session });
-    const value = "x".repeat(queryCacheMaxValueBytes + 1);
-
-    await expect(caller.setItem({ boardId: "board-1", value })).resolves.toEqual({
-      stored: false,
-    });
+describe("isWidgetDataTrpcPath", () => {
+  test.each([
+    ["widget.calendar.findAllEvents", true],
+    ["app.byIds", true],
+    ["integration.byIds", true],
+    ["docker.getContainers", true],
+    ["widget.app.ping", false],
+    ["widget.beszel.getSystemStats", false],
+    ["board.getBoardByName", false],
+  ])("classifies dashboard data path %s", (path, expected) => {
+    expect(isWidgetDataTrpcPath(path)).toBe(expected);
   });
 });
 
@@ -176,3 +76,38 @@ describe("query cache stale handling", () => {
     expect(queryFn).toHaveBeenCalledOnce();
   });
 });
+
+describe("dashboard supporting query policies", () => {
+  test("bounds metadata staleness without adding per-widget timers", () => {
+    expect(dashboardSupportingQueryPolicies).toEqual([
+      {
+        queryKey: [["app", "byId"]],
+        refetchInterval: false,
+        staleTime: queryCacheMetadataStaleTimeMs,
+        refetchOnWindowFocus: true,
+        refetchOnReconnect: true,
+      },
+      {
+        queryKey: [["app", "byIds"]],
+        refetchInterval: false,
+        staleTime: queryCacheMetadataStaleTimeMs,
+        refetchOnWindowFocus: true,
+        refetchOnReconnect: true,
+      },
+      {
+        queryKey: [["integration", "byIds"]],
+        refetchInterval: false,
+        staleTime: queryCacheMetadataStaleTimeMs,
+        refetchOnWindowFocus: true,
+        refetchOnReconnect: true,
+      },
+      {
+        queryKey: [["docker", "getContainers"]],
+        refetchInterval: queryCacheDefaultRefetchIntervalMs,
+        staleTime: queryCacheDefaultStaleTimeMs,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+      },
+    ]);
+  });
+});
diff --git a/packages/api/src/test/settle-integrations.spec.ts b/packages/api/src/test/settle-integrations.spec.ts
index 09f80bc31..37e7c3640 100644
--- a/packages/api/src/test/settle-integrations.spec.ts
+++ b/packages/api/src/test/settle-integrations.spec.ts
@@ -1,6 +1,6 @@
-import { describe, expect, test, vi } from "vitest";
+import { beforeEach, describe, expect, test, vi } from "vitest";
 
-import { settleIntegrationQueries } from "../settle-integrations";
+import { PUBLIC_INTEGRATION_ERROR, settleIntegrationQueries, toPublicIntegrationError } from "../settle-integrations";
 
 const mocks = vi.hoisted(() => ({
   logger: { warn: vi.fn() },
@@ -19,7 +19,20 @@ const integrations = [
   { id: "second", name: "Second", kind: "jellyfin" },
 ];
 
+beforeEach(() => vi.clearAllMocks());
+
 describe("settleIntegrationQueries", () => {
+  test("maps sensitive integration failures to a stable public code", () => {
+    const error = new Error(
+      "GET http://admin:password@nas.internal.local/private/path?token=secret returned\nprivate response body",
+    );
+
+    const publicError = toPublicIntegrationError(error);
+
+    expect(publicError).toBe(PUBLIC_INTEGRATION_ERROR);
+    expect(publicError).not.toMatch(/admin|password|nas\.internal|private|token|secret|response body/i);
+  });
+
   test("returns an empty result when no integrations are configured", async () => {
     await expect(settleIntegrationQueries([], vi.fn())).resolves.toEqual([]);
   });
@@ -35,9 +48,14 @@ describe("settleIntegrationQueries", () => {
   });
 
   test("rejects when every integration fails", async () => {
-    const error = new Error("Integration unavailable");
+    const error = new Error("Integration unavailable with token=secret");
 
-    await expect(settleIntegrationQueries(integrations, () => Promise.reject(error))).rejects.toBe(error);
+    await expect(settleIntegrationQueries(integrations, () => Promise.reject(error))).rejects.toMatchObject({
+      code: "INTERNAL_SERVER_ERROR",
+      message: "All integration queries failed",
+      cause: error,
+    });
+    expect(mocks.logger.warn).toHaveBeenCalledTimes(integrations.length);
   });
 
   test("uses configured fallbacks when every integration fails", async () => {
@@ -47,4 +65,25 @@ describe("settleIntegrationQueries", () => {
       }),
     ).resolves.toEqual(["First", "Second"]);
   });
+
+  test("can retain partial fallbacks while rejecting total failure", async () => {
+    const error = new Error("Integration unavailable");
+    const options = {
+      fallback: (integration: (typeof integrations)[number]) => integration.name,
+      throwOnAllFailures: true,
+    };
+
+    await expect(
+      settleIntegrationQueries(
+        integrations,
+        (integration) => (integration.id === "first" ? Promise.reject(error) : Promise.resolve(integration.name)),
+        options,
+      ),
+    ).resolves.toEqual(["First", "Second"]);
+    await expect(settleIntegrationQueries(integrations, () => Promise.reject(error), options)).rejects.toMatchObject({
+      code: "INTERNAL_SERVER_ERROR",
+      message: "All integration queries failed",
+      cause: error,
+    });
+  });
 });
diff --git a/packages/api/src/trpc.ts b/packages/api/src/trpc.ts
index 6deb06b22..b3fe7ae4d 100644
--- a/packages/api/src/trpc.ts
+++ b/packages/api/src/trpc.ts
@@ -13,8 +13,9 @@ import type { OpenApiMeta } from "trpc-to-openapi";
 import { ZodError } from "zod/v4";
 
 import type { Session } from "@homarr/auth";
-import { FlattenError } from "@homarr/common";
+import { extractBaseUrlFromHeaders, FlattenError } from "@homarr/common";
 import { userAgent } from "@homarr/common/server";
+import type { DeviceType } from "@homarr/common/server";
 import { createLogger } from "@homarr/core/infrastructure/logs";
 import { db } from "@homarr/db";
 import type { GroupPermissionKey, OnboardingStep } from "@homarr/definitions";
@@ -36,7 +37,14 @@ const logger = createLogger({ module: "trpc" });
  *
  * @see https://trpc.io/docs/server/context
  */
-export const createTRPCContext = (opts: { headers: Headers; session: Session | null }) => {
+interface ApiContext {
+  session: Session | null;
+  deviceType: DeviceType;
+  baseUrl?: `${string}://${string}`;
+  db: typeof db;
+}
+
+export const createTRPCContext = (opts: { headers: Headers; session: Session | null }): ApiContext => {
   const session = opts.session;
   const source = opts.headers.get("x-trpc-source") ?? "unknown";
 
@@ -49,6 +57,7 @@ export const createTRPCContext = (opts: { headers: Headers; session: Session | n
   return {
     session,
     deviceType: userAgent(opts.headers).device.type,
+    baseUrl: extractBaseUrlFromHeaders(opts.headers),
     db,
   };
 };
diff --git a/packages/api/src/user-server.ts b/packages/api/src/user-server.ts
new file mode 100644
index 000000000..e0455af77
--- /dev/null
+++ b/packages/api/src/user-server.ts
@@ -0,0 +1,24 @@
+import { cache } from "react";
+
+import { db, eq } from "@homarr/db";
+import { users } from "@homarr/db/schema";
+
+// Keep the authenticated user lookup shared across nested RSC layouts. React
+// clears this memo between requests, so authorization changes cannot leak.
+export const getRscUserSettingsAsync = cache(async (userId: string) =>
+  db.query.users.findFirst({
+    columns: {
+      homeBoardId: true,
+      mobileHomeBoardId: true,
+      firstDayOfWeek: true,
+      pingIconsEnabled: true,
+      enableRightClickOnWidgets: true,
+      defaultSearchEngineId: true,
+      openSearchInNewTab: true,
+      ddgBangs: true,
+      completedManageTour: true,
+      completedBoardTour: true,
+    },
+    where: eq(users.id, userId),
+  }),
+);
diff --git a/packages/auth/callbacks.ts b/packages/auth/callbacks.ts
index 51c9c83e5..4a12cef2f 100644
--- a/packages/auth/callbacks.ts
+++ b/packages/auth/callbacks.ts
@@ -3,24 +3,18 @@ import type { NextAuthConfig } from "next-auth";
 
 import type { Session } from "@homarr/auth";
 import type { Database } from "@homarr/db";
-import { eq, inArray } from "@homarr/db";
+import { eq } from "@homarr/db";
 import { groupMembers, groupPermissions, users } from "@homarr/db/schema";
 import { getPermissionsWithChildren } from "@homarr/definitions";
 
 export const getCurrentUserPermissionsAsync = async (db: Database, userId: string) => {
-  const dbGroupMembers = await db.query.groupMembers.findMany({
-    where: eq(groupMembers.userId, userId),
-  });
-  const groupIds = dbGroupMembers.map((groupMember) => groupMember.groupId);
-
-  if (groupIds.length === 0) return [];
-
   const dbGroupPermissions = await db
     .selectDistinct({
       permission: groupPermissions.permission,
     })
     .from(groupPermissions)
-    .where(inArray(groupPermissions.groupId, groupIds));
+    .innerJoin(groupMembers, eq(groupPermissions.groupId, groupMembers.groupId))
+    .where(eq(groupMembers.userId, userId));
   const permissionKeys = dbGroupPermissions.map(({ permission }) => permission);
 
   return getPermissionsWithChildren(permissionKeys);
@@ -43,12 +37,15 @@ export const createSessionAsync = async (
 
 export const createSessionCallback = (db: Database): NextAuthCallbackOf<"session"> => {
   return async ({ session, user }) => {
-    const additionalProperties = await db.query.users.findFirst({
-      where: eq(users.id, user.id),
-      columns: {
-        colorScheme: true,
-      },
-    });
+    const [additionalProperties, permissions] = await Promise.all([
+      db.query.users.findFirst({
+        where: eq(users.id, user.id),
+        columns: {
+          colorScheme: true,
+        },
+      }),
+      getCurrentUserPermissionsAsync(db, user.id),
+    ]);
 
     return {
       ...session,
@@ -57,7 +54,7 @@ export const createSessionCallback = (db: Database): NextAuthCallbackOf<"session
         ...additionalProperties,
         id: user.id,
         name: user.name,
-        permissions: await getCurrentUserPermissionsAsync(db, user.id),
+        permissions,
       },
     };
   };
diff --git a/packages/auth/permissions/integration-provider.tsx b/packages/auth/permissions/integration-provider.tsx
index f63fd3c3d..e6f0a2d7c 100644
--- a/packages/auth/permissions/integration-provider.tsx
+++ b/packages/auth/permissions/integration-provider.tsx
@@ -3,14 +3,9 @@
 import type { PropsWithChildren } from "react";
 import { createContext, useContext } from "react";
 
-import type { IntegrationKind } from "@homarr/definitions";
-
 interface IntegrationContextProps {
   integrations: {
     id: string;
-    name: string;
-    url: string;
-    kind: IntegrationKind;
     permissions: {
       hasFullAccess: boolean;
       hasInteractAccess: boolean;
@@ -25,32 +20,27 @@ export const IntegrationProvider = ({ integrations, children }: PropsWithChildre
   return <IntegrationContext.Provider value={{ integrations }}>{children}</IntegrationContext.Provider>;
 };
 
-export const useIntegrationsWithUseAccess = () => {
+const useIntegrationContext = () => {
   const context = useContext(IntegrationContext);
 
   if (!context) {
-    throw new Error("useIntegrationsWithUseAccess must be used within an IntegrationProvider");
+    throw new Error("Integration hooks must be used within an IntegrationProvider");
   }
 
-  return context.integrations.filter((integration) => integration.permissions.hasUseAccess);
+  return context;
 };
 
+export const useIntegrations = () => useIntegrationContext().integrations;
+
+export const useIntegrationsWithUseAccess = () =>
+  useIntegrationContext().integrations.filter((integration) => integration.permissions.hasUseAccess);
+
 export const useIntegrationsWithInteractAccess = () => {
-  const context = useContext(IntegrationContext);
-
-  if (!context) {
-    throw new Error("useIntegrationsWithInteractAccess must be used within an IntegrationProvider");
-  }
-
+  const context = useIntegrationContext();
   return context.integrations.filter((integration) => integration.permissions.hasInteractAccess);
 };
 
 export const useIntegrationsWithFullAccess = () => {
-  const context = useContext(IntegrationContext);
-
-  if (!context) {
-    throw new Error("useIntegrationsWithFullAccess must be used within an IntegrationProvider");
-  }
-
+  const context = useIntegrationContext();
   return context.integrations.filter((integration) => integration.permissions.hasFullAccess);
 };
diff --git a/packages/auth/permissions/integrations-with-permissions.ts b/packages/auth/permissions/integrations-with-permissions.ts
index 76cae6c93..a49ec4d76 100644
--- a/packages/auth/permissions/integrations-with-permissions.ts
+++ b/packages/auth/permissions/integrations-with-permissions.ts
@@ -6,31 +6,28 @@ import { groupMembers, integrationGroupPermissions, integrationUserPermissions }
 import { constructIntegrationPermissions } from "./integration-permissions";
 
 export const getIntegrationsWithPermissionsAsync = async (session: Session | null) => {
-  const groupsOfCurrentUser = await db.query.groupMembers.findMany({
-    where: eq(groupMembers.userId, session?.user.id ?? ""),
-  });
-  const integrations = await db.query.integrations.findMany({
+  const groupPermissionWhere = session
+    ? inArray(
+        integrationGroupPermissions.groupId,
+        db.select({ groupId: groupMembers.groupId }).from(groupMembers).where(eq(groupMembers.userId, session.user.id)),
+      )
+    : eq(integrationGroupPermissions.groupId, "");
+  const integrationRows = await db.query.integrations.findMany({
     columns: {
       id: true,
-      name: true,
-      url: true,
-      kind: true,
     },
     with: {
       userPermissions: {
         where: eq(integrationUserPermissions.userId, session?.user.id ?? ""),
       },
       groupPermissions: {
-        where: inArray(
-          integrationGroupPermissions.groupId,
-          groupsOfCurrentUser.map((group) => group.groupId),
-        ),
+        where: groupPermissionWhere,
       },
     },
   });
 
-  return integrations.map(({ userPermissions, groupPermissions, ...integration }) => ({
-    ...integration,
+  return integrationRows.map(({ id, userPermissions, groupPermissions }) => ({
+    id,
     permissions: constructIntegrationPermissions({ userPermissions, groupPermissions }, session),
   }));
 };
diff --git a/packages/boards/package.json b/packages/boards/package.json
index b9fd9a40d..057ac0550 100644
--- a/packages/boards/package.json
+++ b/packages/boards/package.json
@@ -13,6 +13,7 @@
   },
   "exports": {
     "./context": "./src/context.tsx",
+    "./layout-selection": "./src/layout-selection.ts",
     "./updater": "./src/updater.ts",
     "./edit-mode": "./src/edit-mode.tsx"
   },
diff --git a/packages/boards/src/context.tsx b/packages/boards/src/context.tsx
index b482fbe0c..2e8137b5e 100644
--- a/packages/boards/src/context.tsx
+++ b/packages/boards/src/context.tsx
@@ -1,26 +1,69 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { createContext, useCallback, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useSyncExternalStore } from "react";
 import { usePathname } from "next/navigation";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { getActiveQueryCacheBoardId, setActiveQueryCacheBoardId } from "@homarr/api/query-cache";
 
+import { boardViewportWidthCookieName, getLayoutIdForViewportWidth } from "./layout-selection";
 import { updateBoardName } from "./updater";
 
 const BoardContext = createContext<{
   board: RouterOutputs["board"]["getBoardByName"];
+  layoutOverrideId: string | null;
+  currentLayout: string;
+  initialViewportWidth: number;
 } | null>(null);
 
+const subscribeToViewport = (onStoreChange: () => void) => {
+  if (typeof window === "undefined") return () => undefined;
+
+  let animationFrame = 0;
+  const handleResize = () => {
+    if (animationFrame !== 0) return;
+    animationFrame = window.requestAnimationFrame(() => {
+      animationFrame = 0;
+      persistViewportWidth(getViewportWidth());
+      onStoreChange();
+    });
+  };
+  window.addEventListener("resize", handleResize);
+
+  return () => {
+    window.removeEventListener("resize", handleResize);
+    window.cancelAnimationFrame(animationFrame);
+  };
+};
+
 export const BoardProvider = ({
   children,
   initialBoard,
+  initialLayoutId,
+  initialViewportWidth,
+  layoutOverrideId = null,
 }: PropsWithChildren<{
   initialBoard: RouterOutputs["board"]["getBoardByName"];
+  initialLayoutId: string;
+  initialViewportWidth: number;
+  layoutOverrideId?: string | null;
 }>) => {
-  const { data } = clientApi.board.getBoardByName.useQuery({ name: initialBoard.name }, { initialData: initialBoard });
+  const { data } = clientApi.board.getBoardByName.useQuery(
+    { name: initialBoard.name },
+    {
+      initialData: initialBoard,
+      // The route already fetched this board, so keep it fresh long enough to
+      // avoid an immediate duplicate request while still surfacing remote edits
+      // when a user later returns to the board.
+      staleTime: 30_000,
+    },
+  );
+  const currentLayout = useSyncExternalStore(
+    subscribeToViewport,
+    () => getCurrentLayout(data, layoutOverrideId),
+    () => layoutOverrideId ?? initialLayoutId,
+  );
 
   // Update the board name so it can be used within updateBoard method
   updateBoardName(initialBoard.name);
@@ -37,19 +80,15 @@ export const BoardProvider = ({
   }, [pathname, utils, initialBoard.name]);
 
   useEffect(() => {
-    setActiveQueryCacheBoardId(data.id);
-
-    return () => {
-      if (getActiveQueryCacheBoardId() === data.id) {
-        setActiveQueryCacheBoardId(null);
-      }
-    };
-  }, [data.id]);
-
+    persistViewportWidth(getViewportWidth());
+  }, []);
   return (
     <BoardContext.Provider
       value={{
         board: data,
+        layoutOverrideId,
+        currentLayout,
+        initialViewportWidth,
       }}
     >
       {children}
@@ -73,35 +112,37 @@ export const useOptionalBoard = () => {
   return context?.board ?? null;
 };
 
-export const getCurrentLayout = (board: RouterOutputs["board"]["getBoardByName"]) => {
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  if (typeof window === "undefined") return board.layouts.at(0)!.id;
+export const useLayoutOverride = () => useContext(BoardContext)?.layoutOverrideId ?? null;
 
-  const sortedLayouts = board.layouts.toSorted((layoutA, layoutB) => layoutB.breakpoint - layoutA.breakpoint);
+export const getCurrentLayout = (
+  board: RouterOutputs["board"]["getBoardByName"],
+  layoutOverrideId: string | null = null,
+) => {
+  const layouts = board.layouts;
+  if (layoutOverrideId && layouts.some((layout) => layout.id === layoutOverrideId)) return layoutOverrideId;
 
-  // Fallback to smallest if none exists with breakpoint smaller than window width
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  return sortedLayouts.find((layout) => layout.breakpoint <= window.innerWidth)?.id ?? sortedLayouts.at(0)!.id;
+  const viewportWidth = typeof window === "undefined" ? 0 : getViewportWidth();
+  return getLayoutIdForViewportWidth(layouts, viewportWidth);
 };
 
 export const useCurrentLayout = () => {
-  const board = useRequiredBoard();
-  const [currentLayout, setCurrentLayout] = useState(getCurrentLayout(board));
+  const context = useContext(BoardContext);
 
-  const onResize = useCallback(() => {
-    setCurrentLayout(getCurrentLayout(board));
-  }, [board]);
+  if (!context) {
+    throw new Error("Board is required");
+  }
 
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    window.addEventListener("resize", onResize);
+  return context.currentLayout;
+};
 
-    return () => {
-      window.removeEventListener("resize", onResize);
-    };
-  }, [onResize]);
+export const useInitialViewportWidth = () => {
+  const context = useContext(BoardContext);
 
-  return currentLayout;
+  if (!context) {
+    throw new Error("Board is required");
+  }
+
+  return context.initialViewportWidth;
 };
 
 export const getBoardLayouts = (board: RouterOutputs["board"]["getBoardByName"]) =>
@@ -112,3 +153,9 @@ export const useLayouts = () => {
 
   return getBoardLayouts(board);
 };
+
+const persistViewportWidth = (viewportWidth: number) => {
+  document.cookie = `${boardViewportWidthCookieName}=${Math.round(viewportWidth)}; Path=/; Max-Age=31536000; SameSite=Lax`;
+};
+
+const getViewportWidth = () => document.documentElement.clientWidth || window.innerWidth;
diff --git a/packages/boards/src/edit-mode.tsx b/packages/boards/src/edit-mode.tsx
index 9b813b032..58288ce2a 100644
--- a/packages/boards/src/edit-mode.tsx
+++ b/packages/boards/src/edit-mode.tsx
@@ -1,13 +1,18 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useEffect } from "react";
 import { useDisclosure } from "@mantine/hooks";
 
 const EditModeContext = createContext<ReturnType<typeof useDisclosure> | null>(null);
 
-export const EditModeProvider = ({ children }: PropsWithChildren) => {
-  const editModeDisclosure = useDisclosure(false);
+export const EditModeProvider = ({ children, initialOpen = false }: PropsWithChildren<{ initialOpen?: boolean }>) => {
+  const editModeDisclosure = useDisclosure(initialOpen);
+  const [, { open }] = editModeDisclosure;
+
+  useEffect(() => {
+    if (initialOpen) open();
+  }, [initialOpen, open]);
 
   return <EditModeContext.Provider value={editModeDisclosure}>{children}</EditModeContext.Provider>;
 };
diff --git a/packages/boards/src/layout-selection.spec.ts b/packages/boards/src/layout-selection.spec.ts
new file mode 100644
index 000000000..ef0fb07fc
--- /dev/null
+++ b/packages/boards/src/layout-selection.spec.ts
@@ -0,0 +1,28 @@
+import { describe, expect, test } from "vitest";
+
+import { getLayoutIdForViewportWidth } from "./layout-selection";
+
+const layouts = [
+  { id: "mobile", breakpoint: 0 },
+  { id: "tablet", breakpoint: 768 },
+  { id: "desktop", breakpoint: 1280 },
+];
+
+describe("getLayoutIdForViewportWidth", () => {
+  test.each([
+    [390, "mobile"],
+    [768, "tablet"],
+    [1279, "tablet"],
+    [1920, "desktop"],
+  ])("selects the responsive layout for %ipx", (width, expected) => {
+    expect(getLayoutIdForViewportWidth(layouts, width)).toBe(expected);
+  });
+
+  test("falls back to the smallest layout for invalid widths", () => {
+    expect(getLayoutIdForViewportWidth(layouts, Number.NaN)).toBe("mobile");
+  });
+
+  test("rejects boards without layouts", () => {
+    expect(() => getLayoutIdForViewportWidth([], 1280)).toThrow("Expected the board to contain a layout");
+  });
+});
diff --git a/packages/boards/src/layout-selection.ts b/packages/boards/src/layout-selection.ts
new file mode 100644
index 000000000..ec6a87f04
--- /dev/null
+++ b/packages/boards/src/layout-selection.ts
@@ -0,0 +1,21 @@
+export const boardViewportWidthCookieName = "homarr-viewport-width";
+
+interface ResponsiveLayout {
+  id: string;
+  breakpoint: number;
+}
+
+export const getLayoutIdForViewportWidth = (layouts: readonly ResponsiveLayout[], viewportWidth: number): string => {
+  if (layouts.length === 0) {
+    throw new Error("Expected the board to contain a layout");
+  }
+
+  const normalizedWidth = Number.isFinite(viewportWidth) ? Math.max(0, viewportWidth) : 0;
+  const sortedLayouts = layouts.toSorted((layoutA, layoutB) => layoutB.breakpoint - layoutA.breakpoint);
+  const selected = sortedLayouts.find((layout) => layout.breakpoint <= normalizedWidth) ?? sortedLayouts.at(-1);
+  if (!selected) {
+    throw new Error("Expected the board to contain a layout");
+  }
+
+  return selected.id;
+};
diff --git a/packages/boards/src/updater.ts b/packages/boards/src/updater.ts
index 49a301a8c..f11c70db8 100644
--- a/packages/boards/src/updater.ts
+++ b/packages/boards/src/updater.ts
@@ -5,14 +5,15 @@ import { useCallback } from "react";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 
+type Board = RouterOutputs["board"]["getHomeBoard"];
+type UpdateCallback = (previous: Board) => Board;
+
 let boardName: string | null = null;
 
 export const updateBoardName = (name: string | null) => {
   boardName = name;
 };
 
-type UpdateCallback = (prev: RouterOutputs["board"]["getHomeBoard"]) => RouterOutputs["board"]["getHomeBoard"];
-
 export const useUpdateBoard = () => {
   const utils = clientApi.useUtils();
 
@@ -21,9 +22,13 @@ export const useUpdateBoard = () => {
       if (!boardName) {
         throw new Error("Board name is not set");
       }
-      utils.board.getBoardByName.setData({ name: boardName }, (previous) =>
-        previous ? updaterWithoutUndefined(previous) : previous,
-      );
+      let updatedBoard: Board | undefined;
+      utils.board.getBoardByName.setData({ name: boardName }, (previous) => {
+        if (!previous) return previous;
+        updatedBoard = updaterWithoutUndefined(previous);
+        return updatedBoard;
+      });
+      return updatedBoard;
     },
     [utils],
   );
@@ -32,3 +37,35 @@ export const useUpdateBoard = () => {
     updateBoard,
   };
 };
+
+interface PersistBoardOptions {
+  onError?: (error: unknown) => void;
+}
+
+export const usePersistBoard = ({ id, name }: Pick<Board, "id" | "name">) => {
+  const utils = clientApi.useUtils();
+  const { updateBoard } = useUpdateBoard();
+  const { mutateAsync: saveBoardAsync } = clientApi.board.saveBoard.useMutation({
+    scope: { id: `board-save:${id}` },
+  });
+
+  const updateAndPersistBoard = useCallback(
+    (updater: UpdateCallback, options?: PersistBoardOptions) => {
+      const persistedBoard = updateBoard(updater);
+      if (!persistedBoard) return undefined;
+
+      void saveBoardAsync(persistedBoard).catch((error: unknown) => {
+        const currentBoard = utils.board.getBoardByName.getData({ name });
+        if (currentBoard === persistedBoard) {
+          void utils.board.getBoardByName.invalidate({ name });
+        }
+        options?.onError?.(error);
+      });
+
+      return persistedBoard;
+    },
+    [name, saveBoardAsync, updateBoard, utils],
+  );
+
+  return { updateAndPersistBoard };
+};
diff --git a/packages/common/src/bounded-response.ts b/packages/common/src/bounded-response.ts
new file mode 100644
index 000000000..d1432fb39
--- /dev/null
+++ b/packages/common/src/bounded-response.ts
@@ -0,0 +1,45 @@
+interface ReadableResponse {
+  headers: { get: (name: string) => string | null };
+  body: {
+    getReader: () => {
+      read: () => Promise<{ done: boolean; value?: Uint8Array }>;
+      cancel: () => Promise<void>;
+    };
+  } | null;
+}
+
+export async function readBoundedJsonResponseAsync(
+  response: ReadableResponse,
+  maxBytes: number,
+  label = "Response",
+): Promise<unknown> {
+  const declaredLength = Number(response.headers.get("content-length"));
+  if (Number.isFinite(declaredLength) && declaredLength > maxBytes) {
+    throw new Error(`${label} exceeds ${maxBytes} bytes`);
+  }
+
+  if (!response.body) return null;
+
+  const reader = response.body.getReader();
+  const chunks: Uint8Array[] = [];
+  let byteLength = 0;
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    if (!value) continue;
+    byteLength += value.byteLength;
+    if (byteLength > maxBytes) {
+      await reader.cancel();
+      throw new Error(`${label} exceeds ${maxBytes} bytes`);
+    }
+    chunks.push(value);
+  }
+
+  const body = new Uint8Array(byteLength);
+  let offset = 0;
+  for (const chunk of chunks) {
+    body.set(chunk, offset);
+    offset += chunk.byteLength;
+  }
+  return JSON.parse(new TextDecoder().decode(body)) as unknown;
+}
diff --git a/packages/common/src/grid-algorithm.ts b/packages/common/src/grid-algorithm.ts
new file mode 100644
index 000000000..83d165d70
--- /dev/null
+++ b/packages/common/src/grid-algorithm.ts
@@ -0,0 +1,125 @@
+export interface GridAlgorithmItem {
+  id: string;
+  type: "item" | "section";
+  width: number;
+  height: number;
+  xOffset: number;
+  yOffset: number;
+  sectionId: string;
+}
+
+interface GridAlgorithmInput {
+  items: GridAlgorithmItem[];
+  width: number;
+  previousWidth: number;
+  sectionId: string;
+}
+
+interface GridAlgorithmOutput {
+  height: number;
+  items: GridAlgorithmItem[];
+}
+
+export const generateResponsiveGridFor = ({
+  items,
+  previousWidth,
+  width,
+  sectionId,
+}: GridAlgorithmInput): GridAlgorithmOutput =>
+  generateResponsiveGridForSection({ items, previousWidth, width, sectionId }, new Set());
+
+const generateResponsiveGridForSection = (
+  { items, previousWidth, width, sectionId }: GridAlgorithmInput,
+  ancestorSectionIds: ReadonlySet<string>,
+): GridAlgorithmOutput => {
+  if (ancestorSectionIds.has(sectionId)) return { height: 0, items: [] };
+
+  const nextAncestorSectionIds = new Set(ancestorSectionIds).add(sectionId);
+  const itemsOfCurrentSection = items
+    .filter((item) => item.sectionId === sectionId)
+    .toSorted((itemA, itemB) =>
+      itemA.yOffset === itemB.yOffset ? itemA.xOffset - itemB.xOffset : itemA.yOffset - itemB.yOffset,
+    );
+  const normalizedItems = normalizeItems(itemsOfCurrentSection, width);
+
+  if (itemsOfCurrentSection.length === 0) return { height: 0, items: [] };
+
+  const newItems: GridAlgorithmItem[] = [];
+  const dynamicSectionHeightMap = new Map<string, number>();
+  for (const dynamicSection of normalizedItems.filter((item) => item.type === "section")) {
+    const result = generateResponsiveGridForSection(
+      {
+        items,
+        previousWidth: dynamicSection.previousWidth,
+        width: dynamicSection.width,
+        sectionId: dynamicSection.id,
+      },
+      nextAncestorSectionIds,
+    );
+    newItems.push(...result.items);
+    dynamicSectionHeightMap.set(dynamicSection.id, result.height);
+  }
+
+  if (width >= previousWidth) {
+    return {
+      height: Math.max(...itemsOfCurrentSection.map((item) => item.yOffset + item.height)),
+      items: newItems.concat(normalizedItems),
+    };
+  }
+
+  const occupied2d: boolean[][] = [];
+  for (const item of normalizedItems) {
+    const itemWithHeight = {
+      ...item,
+      height: item.type === "section" ? Math.max(dynamicSectionHeightMap.get(item.id) ?? 1, item.height) : item.height,
+    };
+    const position = nextFreeSpot(occupied2d, itemWithHeight, width);
+    if (!position) throw new Error("No free spot available");
+
+    addItemToOccupied(occupied2d, itemWithHeight, position, width);
+    newItems.push({ ...itemWithHeight, xOffset: position.x, yOffset: position.y });
+  }
+
+  return { height: occupied2d.length, items: newItems };
+};
+
+const normalizeItems = (items: GridAlgorithmItem[], columnCount: number) =>
+  items.map((item) => ({ ...item, previousWidth: item.width, width: Math.min(columnCount, item.width) }));
+
+const addItemToOccupied = (
+  occupied2d: boolean[][],
+  item: GridAlgorithmItem,
+  position: { x: number; y: number },
+  columnCount: number,
+) => {
+  for (let yOffset = 0; yOffset < item.height; yOffset++) {
+    let row = occupied2d[position.y + yOffset];
+    if (!row) {
+      row = Array.from({ length: columnCount }, () => false);
+      occupied2d.push(row);
+    }
+    for (let xOffset = 0; xOffset < item.width; xOffset++) row[position.x + xOffset] = true;
+  }
+};
+
+const nextFreeSpot = (occupied2d: boolean[][], item: GridAlgorithmItem, columnCount: number) => {
+  for (let offsetY = 0; offsetY < 99999; offsetY++) {
+    for (let offsetX = 0; offsetX < columnCount; offsetX++) {
+      if (offsetX + item.width <= columnCount && isFree(occupied2d, item, { x: offsetX, y: offsetY })) {
+        return { x: offsetX, y: offsetY };
+      }
+    }
+  }
+  return null;
+};
+
+const isFree = (occupied2d: boolean[][], item: GridAlgorithmItem, position: { x: number; y: number }) => {
+  for (let yOffset = 0; yOffset < item.height; yOffset++) {
+    const row = occupied2d[position.y + yOffset];
+    if (!row) return true;
+    for (let xOffset = 0; xOffset < item.width; xOffset++) {
+      if (row[position.x + xOffset]) return false;
+    }
+  }
+  return true;
+};
diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts
index 5f82ea6a3..f67a771ad 100644
--- a/packages/common/src/index.ts
+++ b/packages/common/src/index.ts
@@ -11,4 +11,5 @@ export * from "./number";
 export * from "./error";
 export * from "./theme";
 export * from "./function";
+export * from "./grid-algorithm";
 export * from "./id";
diff --git a/packages/common/src/server.ts b/packages/common/src/server.ts
index d6e62d5b9..502ae5f6b 100644
--- a/packages/common/src/server.ts
+++ b/packages/common/src/server.ts
@@ -2,3 +2,4 @@ export * from "./security";
 export * from "./encryption";
 export * from "./request";
 export * from "./errors";
+export * from "./bounded-response";
diff --git a/packages/common/src/url.ts b/packages/common/src/url.ts
index f13cc1efc..079de8418 100644
--- a/packages/common/src/url.ts
+++ b/packages/common/src/url.ts
@@ -48,3 +48,38 @@ const absoluteUrlRegex = /^[a-z]+:(\/\/)?/;
 export const isAbsoluteUrl = (urlOrPath: string): boolean => {
   return absoluteUrlRegex.test(urlOrPath.toLowerCase());
 };
+
+export const SAFE_NEW_TAB_REL = "noopener noreferrer";
+
+interface SafeApplicationUrlOptions {
+  baseUrl?: unknown;
+}
+
+/** Returns an absolute, credential-free HTTP(S) URL suitable for application navigation. */
+export const getSafeApplicationUrl = (value: unknown, options: SafeApplicationUrlOptions = {}): string | undefined => {
+  if (typeof value !== "string" || value.trim() === "") return undefined;
+
+  try {
+    let baseUrl: string | undefined;
+    if (options.baseUrl !== undefined) {
+      const parsedBase = parseHttpUrl(options.baseUrl);
+      if (!parsedBase) return undefined;
+      parsedBase.search = "";
+      parsedBase.hash = "";
+      baseUrl = parsedBase.toString();
+    }
+
+    return parseHttpUrl(value, baseUrl)?.toString();
+  } catch {
+    return undefined;
+  }
+};
+
+const parseHttpUrl = (value: unknown, baseUrl?: string): URL | undefined => {
+  if (typeof value !== "string") return undefined;
+  const url = new URL(value, baseUrl);
+  if ((url.protocol !== "http:" && url.protocol !== "https:") || url.username !== "" || url.password !== "") {
+    return undefined;
+  }
+  return url;
+};
diff --git a/packages/core/src/infrastructure/http/request.ts b/packages/core/src/infrastructure/http/request.ts
index b3c3ea354..ab0fdaf2f 100644
--- a/packages/core/src/infrastructure/http/request.ts
+++ b/packages/core/src/infrastructure/http/request.ts
@@ -1,8 +1,9 @@
 import type { AgentOptions } from "node:https";
 import { Agent as HttpsAgent } from "node:https";
+import type { LookupFunction } from "node:net";
 import { checkServerIdentity } from "node:tls";
 import axios from "axios";
-import type { Agent as UndiciAgent, RequestInfo, RequestInit, Response } from "undici";
+import type { EnvHttpProxyAgent as UndiciEnvHttpProxyAgent, RequestInfo, RequestInit, Response } from "undici";
 import { fetch } from "undici";
 
 import {
@@ -30,17 +31,25 @@ export const createCustomCheckServerIdentity = (
 };
 
 export const createCertificateAgentAsync = async (
-  override?: {
+  override?: Partial<{
     ca: string | string[];
     checkServerIdentity: typeof checkServerIdentity;
-  },
-  agentOptions?: Pick<UndiciAgent.Options, "bodyTimeout">,
+    lookup: LookupFunction;
+  }>,
+  agentOptions?: Pick<
+    UndiciEnvHttpProxyAgent.Options,
+    "autoSelectFamily" | "bodyTimeout" | "httpProxy" | "httpsProxy" | "noProxy"
+  >,
 ) => {
+  const ca = override?.ca ?? (await getAllTrustedCertificatesAsync());
+  const identityCheck =
+    override?.checkServerIdentity ?? createCustomCheckServerIdentity(await getTrustedCertificateHostnamesAsync());
   return new UndiciHttpAgent({
     ...agentOptions,
-    connect: override ?? {
-      ca: await getAllTrustedCertificatesAsync(),
-      checkServerIdentity: createCustomCheckServerIdentity(await getTrustedCertificateHostnamesAsync()),
+    connect: {
+      ca,
+      checkServerIdentity: identityCheck,
+      ...(override?.lookup ? { lookup: override.lookup } : {}),
     },
   });
 };
diff --git a/packages/custom-widgets/package.json b/packages/custom-widgets/package.json
new file mode 100644
index 000000000..5f3eeb3cd
--- /dev/null
+++ b/packages/custom-widgets/package.json
@@ -0,0 +1,73 @@
+{
+  "name": "@homarr/custom-widgets",
+  "version": "0.1.0",
+  "private": true,
+  "license": "Apache-2.0",
+  "type": "module",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*"
+      ]
+    }
+  },
+  "exports": {
+    "./authoring-prompt": "./src/core/ai-prompt.ts",
+    "./authoring-resources": "./src/core/authoring-resources.ts",
+    "./catalog": "./src/core/catalog.ts",
+    "./catalog-example": "./src/core/component-example.ts",
+    "./core": "./src/core/index.ts",
+    "./jsx": "./src/jsx/index.ts",
+    "./runtime": "./src/runtime/index.ts",
+    "./server": "./src/server/index.ts",
+    "./workbench": "./src/workbench/index.ts"
+  },
+  "scripts": {
+    "clean": "rm -rf .turbo node_modules",
+    "check:architecture": "node ./scripts/check-architecture.mjs",
+    "generate:catalog": "tsx ./scripts/generate-component-metadata.ts",
+    "generate:components": "pnpm generate:catalog",
+    "generate": "pnpm generate:catalog",
+    "evaluate:ai": "bun ./scripts/evaluate-ai-authoring.ts",
+    "test:ai": "bun ./scripts/evaluate-ai-authoring.ts --ci",
+    "test:reference-apis": "tsx ./scripts/verify-reference-apis.ts",
+    "format": "oxfmt .",
+    "lint": "oxlint",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "catalog:",
+    "@codemirror/commands": "catalog:",
+    "@codemirror/lang-css": "catalog:",
+    "@codemirror/lang-javascript": "catalog:",
+    "@codemirror/lang-json": "catalog:",
+    "@codemirror/lint": "catalog:",
+    "@codemirror/state": "catalog:",
+    "@codemirror/theme-one-dark": "catalog:",
+    "@codemirror/view": "catalog:",
+    "@mantine/charts": "catalog:",
+    "@mantine/core": "catalog:",
+    "@mantine/dates": "catalog:",
+    "@mantine/hooks": "catalog:",
+    "@tabler/icons-react": "catalog:",
+    "@tanstack/react-query": "catalog:",
+    "acorn": "catalog:",
+    "acorn-jsx": "catalog:",
+    "codemirror": "catalog:",
+    "jsonpath-plus": "catalog:",
+    "react": "catalog:",
+    "undici": "catalog:",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@homarr/tsconfig": "workspace:^0.1.0",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "jsdom": "catalog:",
+    "react-dom": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  }
+}
diff --git a/packages/custom-widgets/scripts/ai-evaluation-cases.ts b/packages/custom-widgets/scripts/ai-evaluation-cases.ts
new file mode 100644
index 000000000..975598ebb
--- /dev/null
+++ b/packages/custom-widgets/scripts/ai-evaluation-cases.ts
@@ -0,0 +1,49 @@
+export interface CustomWidgetAiEvaluationCase {
+  id: string;
+  request: string;
+  documentationUrl: string;
+  apiNotes: string;
+}
+
+export const CUSTOM_WIDGET_AI_EVALUATION_CASES: readonly CustomWidgetAiEvaluationCase[] = [
+  {
+    id: "pokedex",
+    documentationUrl: "https://pokeapi.co/docs/v2",
+    request:
+      "Create a polished Pokédex browser with searchable Pokémon, a responsive result grid, manual detail loading, sprites, types, abilities, base-stat progress bars, and clear loading, empty, and failure states.",
+    apiNotes:
+      "Use GET /api/v2/pokemon?limit=<option>&offset=<option> for the list and GET /api/v2/pokemon/{param:name} as a manual detail query. PokeAPI needs no authentication.",
+  },
+  {
+    id: "portainer-containers",
+    documentationUrl: "https://docs.portainer.io/api/examples",
+    request:
+      "Create an excellent Portainer container dashboard: environment option, running/stopped summary, responsive container list, health/status badges, and explicit start, stop, and restart actions with confirmation and refresh after success.",
+    apiNotes:
+      "Use X-API-Key auth. List containers with GET /api/endpoints/{option:endpointId}/docker/containers/json?all=true. Actions are POST /api/endpoints/{option:endpointId}/docker/containers/{param:id}/start, /stop, and /restart and invalidate the list query.",
+  },
+  {
+    id: "tautulli-activity",
+    documentationUrl: "https://github.com/Tautulli/Tautulli/wiki/Tautulli-API-Reference",
+    request:
+      "Create a beautiful Tautulli activity widget with active stream cards, user/player details, progress, transcode/direct-play badges, bandwidth summary, and a refresh control that works in narrow and wide tiles.",
+    apiNotes:
+      "Use an apiKeyQuery source with parameter name apikey. Query GET /api/v2 with query cmd=get_activity. The response payload is under response.data and sessions is an array.",
+  },
+  {
+    id: "bambubuddy-printer",
+    documentationUrl: "https://wiki.bambuddy.cool/reference/api/",
+    request:
+      "Create a premium BambuBuddy printer status widget with printer selector, current job, progress, remaining time, nozzle and bed temperatures, connection state, and safe pause/resume/stop controls when supported.",
+    apiNotes:
+      "Use X-API-Key auth and base path /api/v1. GET /printers lists printers and GET /printers/{id}/status returns state, progress, remaining_time, temperatures.nozzle, temperatures.bed, and hms_status. The official reference does not document pause, resume, or stop endpoints, so omit those actions. Configure the selected printer with choicesFrom on a widget option and use that option in the status path.",
+  },
+  {
+    id: "home-assistant-control",
+    documentationUrl: "https://developers.home-assistant.io/docs/api/rest/",
+    request:
+      "Create a refined Home Assistant room widget with temperature and humidity readings, light status, a room/entity option, and an actionable light toggle. Use calm hierarchy and responsive controls, not a pile of nested cards.",
+    apiNotes:
+      "Use bearer auth. GET /api/states/{option:sensorEntity} and /api/states/{option:lightEntity} load entity state. POST /api/services/light/turn_on and /turn_off accept a body with entity_id from an option and should invalidate the light query.",
+  },
+] as const;
diff --git a/packages/custom-widgets/scripts/ai-evaluation.ts b/packages/custom-widgets/scripts/ai-evaluation.ts
new file mode 100644
index 000000000..43e8ba56e
--- /dev/null
+++ b/packages/custom-widgets/scripts/ai-evaluation.ts
@@ -0,0 +1,304 @@
+import { mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+import { z } from "zod/v4";
+
+import { buildCustomWidgetAiPrompt } from "../src/core/ai-prompt";
+import { customWidgetDefinitionSchema } from "../src/core/custom-jsx-schema";
+import type { HomarrCustomWidgetV2 } from "../src/core/custom-jsx-schema";
+import { formatCustomWidgetImportIssues, parseCustomWidgetAiResponse } from "../src/core/import";
+import type { CustomWidgetAiEvaluationCase } from "./ai-evaluation-cases";
+
+export const DEFAULT_GENERATOR_MODEL = "deepseek/deepseek-v4-pro";
+export const DEFAULT_JUDGE_MODEL = "deepseek/deepseek-v4-flash";
+export const MAX_AI_EVALUATION_LOOPS = 10;
+
+const scoreSchema = z.number().int().min(0).max(100);
+const judgeCategoriesSchema = z.strictObject({
+  schemaAndBindings: scoreSchema,
+  apiAndRequestDesign: scoreSchema,
+  runtimeCompatibility: scoreSchema,
+  goalFulfillment: scoreSchema,
+  visualQuality: scoreSchema,
+  responsiveAndTheme: scoreSchema,
+  loadingEmptyErrorSuccess: scoreSchema,
+  dailyUsefulness: scoreSchema,
+  complexityDiscipline: scoreSchema,
+  accessibility: scoreSchema,
+  actionSafety: scoreSchema,
+});
+const categoryReasonSchema = z.string().min(1).max(600);
+const judgeResultSchema = z.strictObject({
+  total: scoreSchema,
+  verdict: z.enum(["pass", "fail"]),
+  dailyUseDecision: z.enum(["would-use-daily", "promising-but-not-daily", "not-practical"]),
+  categories: judgeCategoriesSchema,
+  categoryReasons: z.strictObject({
+    schemaAndBindings: categoryReasonSchema,
+    apiAndRequestDesign: categoryReasonSchema,
+    runtimeCompatibility: categoryReasonSchema,
+    goalFulfillment: categoryReasonSchema,
+    visualQuality: categoryReasonSchema,
+    responsiveAndTheme: categoryReasonSchema,
+    loadingEmptyErrorSuccess: categoryReasonSchema,
+    dailyUsefulness: categoryReasonSchema,
+    complexityDiscipline: categoryReasonSchema,
+    accessibility: categoryReasonSchema,
+    actionSafety: categoryReasonSchema,
+  }),
+  strengths: z.array(z.string().min(1).max(400)).max(6),
+  problems: z.array(z.string().min(1).max(500)).max(12),
+  fatalProblems: z.array(z.string().min(1).max(500)).max(8),
+  highestImpactFixes: z.array(z.string().min(1).max(500)).max(6),
+});
+
+const categoryWeights = {
+  schemaAndBindings: 8,
+  apiAndRequestDesign: 10,
+  runtimeCompatibility: 8,
+  goalFulfillment: 15,
+  visualQuality: 15,
+  responsiveAndTheme: 8,
+  loadingEmptyErrorSuccess: 8,
+  dailyUsefulness: 12,
+  complexityDiscipline: 8,
+  accessibility: 4,
+  actionSafety: 4,
+} as const satisfies Record<keyof z.infer<typeof judgeCategoriesSchema>, number>;
+
+export type CustomWidgetJudgeResult = z.infer<typeof judgeResultSchema>;
+
+export interface AiEvaluationResult {
+  caseId: string;
+  attempts: number;
+  widget: HomarrCustomWidgetV2 | null;
+  judge: CustomWidgetJudgeResult | null;
+  outputDirectory: string;
+  errors: string[];
+}
+
+interface OpenRouterResponse {
+  choices?: Array<{ message?: { content?: string | null } }>;
+  error?: { message?: string };
+}
+
+export function buildEvaluationPrompt(testCase: CustomWidgetAiEvaluationCase): string {
+  return buildCustomWidgetAiPrompt(
+    undefined,
+    null,
+    null,
+    `${testCase.request}\n\nVerified API notes:\n${testCase.apiNotes}`,
+    testCase.documentationUrl,
+  );
+}
+
+export function buildRepairPrompt(
+  originalPrompt: string,
+  previousResponse: string,
+  issues: readonly { path?: Array<string | number>; message: string }[],
+): string {
+  const diagnostics = issues
+    .map((issue) => `${issue.path?.length ? `${issue.path.join(".")}: ` : ""}${issue.message}`)
+    .join("\n");
+  return `${originalPrompt}\n\nYour previous response did not validate. Correct only the generic contract/runtime problems below while preserving a polished design.\n\nDiagnostics:\n${diagnostics}\n\nPrevious response:\n${previousResponse}`;
+}
+
+export function buildJudgePrompt(testCase: CustomWidgetAiEvaluationCase, widget: HomarrCustomWidgetV2): string {
+  return `You are a hostile-but-fair product review panel evaluating a safe dashboard widget. Most competent drafts should score 55-75, not 90. Judge only evidence present in the manifest and JSX. Never reward unsupported capabilities, invented API routes, aspirational claims, or code that merely validates.
+
+Request:
+${testCase.request}
+
+Verified API notes:
+${testCase.apiNotes}
+
+Validated widget:
+${JSON.stringify(widget, null, 2)}
+
+Scoring calibration:
+- 95-100: exceptional, purpose-built quality; complete, beautiful, restrained, and something a demanding user would choose every day. Almost never award this.
+- 85-94: excellent with only small, specific defects. It must fully achieve the request and feel deliberately designed.
+- 70-84: good prototype or useful widget with visible compromises, generic design, missing polish, or avoidable complexity.
+- 50-69: functional but incomplete, awkward, visually ordinary, overbuilt, or impractical for repeated use.
+- 0-49: broken, misleading, unsafe, substantially incomplete, or incompatible.
+
+Required review behavior:
+- Compare every requested capability with concrete manifest/JSX evidence. A missing or invented core capability is fatal and caps total at 79.
+- Judge whether the API design can actually reach the stated goal, including response paths, bindings, invalidation, and action safety.
+- Judge visual quality, not component count: hierarchy, density, whitespace, typography, restrained color, scanability, and avoidance of repetitive nested cards.
+- Judge daily usefulness: information priority, interaction cost, refresh behavior, narrow-tile usability, and whether the widget is pleasant rather than demo-like.
+- Judge complexity discipline: penalize duplicate requests/options, unnecessary controls, excessive JSX, cleverness, and UI chrome that does not help the goal. Complexity must earn its place.
+- A visually generic but valid widget should normally score below 75 for visualQuality. A widget that is attractive but inconvenient should score below 75 for dailyUsefulness.
+- Give a concrete evidence sentence for every category. List all score-capping issues under fatalProblems.
+
+Homarr computes the weighted total and final verdict itself. Your total and verdict are advisory, but must be internally honest. A pass requires a weighted total of at least 90, every category at least 75, goalFulfillment/visualQuality/dailyUsefulness at least 85, complexityDiscipline at least 80, no fatal problem, and dailyUseDecision="would-use-daily". Return only the requested structured object.`;
+}
+
+export function judgePasses(result: CustomWidgetJudgeResult): boolean {
+  return (
+    result.total >= 90 &&
+    Object.values(result.categories).every((score) => score >= 75) &&
+    result.categories.goalFulfillment >= 85 &&
+    result.categories.visualQuality >= 85 &&
+    result.categories.dailyUsefulness >= 85 &&
+    result.categories.complexityDiscipline >= 80 &&
+    result.dailyUseDecision === "would-use-daily" &&
+    result.fatalProblems.length === 0
+  );
+}
+
+export function getJudgeResponseFormat() {
+  return {
+    type: "json_schema" as const,
+    json_schema: {
+      name: "homarr_custom_widget_review",
+      strict: true,
+      schema: z.toJSONSchema(judgeResultSchema, { io: "output" }),
+    },
+  };
+}
+
+export async function evaluateCustomWidgetCase(args: {
+  testCase: CustomWidgetAiEvaluationCase;
+  apiKey: string;
+  outputRoot: string;
+  maxLoops: number;
+  generatorModel?: string;
+  judgeModel?: string;
+}): Promise<AiEvaluationResult> {
+  const caseDirectory = path.join(args.outputRoot, args.testCase.id);
+  await mkdir(caseDirectory, { recursive: true });
+  const originalPrompt = buildEvaluationPrompt(args.testCase);
+  await writeFile(path.join(caseDirectory, "prompt.md"), originalPrompt, "utf8");
+
+  let prompt = originalPrompt;
+  const errors: string[] = [];
+  let bestWidget: HomarrCustomWidgetV2 | null = null;
+  let bestJudge: CustomWidgetJudgeResult | null = null;
+  for (let attempt = 1; attempt <= Math.min(args.maxLoops, MAX_AI_EVALUATION_LOOPS); attempt += 1) {
+    let response: string;
+    try {
+      response = await callOpenRouter({
+        apiKey: args.apiKey,
+        model: args.generatorModel ?? DEFAULT_GENERATOR_MODEL,
+        prompt,
+        purpose: "generation",
+      });
+    } catch (error) {
+      errors.push(
+        `Attempt ${attempt}: generator request failed — ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+      continue;
+    }
+    await writeFile(path.join(caseDirectory, `attempt-${attempt}.md`), response, "utf8");
+    const parsed = parseCustomWidgetAiResponse(response);
+    if (!parsed.success) {
+      const message = formatCustomWidgetImportIssues(parsed.issues);
+      errors.push(`Attempt ${attempt}: ${message}`);
+      prompt = buildRepairPrompt(originalPrompt, response, parsed.issues);
+      continue;
+    }
+
+    const canonical = customWidgetDefinitionSchema.parse(parsed.widget);
+    await writeWidgetFiles(caseDirectory, canonical, `attempt-${attempt}`);
+    let judge: CustomWidgetJudgeResult;
+    try {
+      const judgeRaw = await callOpenRouter({
+        apiKey: args.apiKey,
+        model: args.judgeModel ?? DEFAULT_JUDGE_MODEL,
+        prompt: buildJudgePrompt(args.testCase, canonical),
+        purpose: "judge",
+      });
+      await writeFile(path.join(caseDirectory, `judge-${attempt}.json`), judgeRaw, "utf8");
+      judge = parseJudgeResult(judgeRaw);
+    } catch (error) {
+      errors.push(
+        `Attempt ${attempt}: judge response invalid — ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+      continue;
+    }
+    if (!bestJudge || judge.total > bestJudge.total) {
+      bestJudge = judge;
+      bestWidget = canonical;
+      await writeWidgetFiles(caseDirectory, canonical, "best");
+      await writeFile(path.join(caseDirectory, "best-judge.json"), JSON.stringify(judge, null, 2), "utf8");
+    }
+    if (judgePasses(judge)) {
+      await writeFile(path.join(caseDirectory, "result.json"), JSON.stringify(judge, null, 2), "utf8");
+      return {
+        caseId: args.testCase.id,
+        attempts: attempt,
+        widget: canonical,
+        judge,
+        outputDirectory: caseDirectory,
+        errors,
+      };
+    }
+    errors.push(`Attempt ${attempt}: judge ${judge.total}/100 — ${judge.highestImpactFixes.join("; ")}`);
+    prompt = buildRepairPrompt(
+      originalPrompt,
+      response,
+      judge.highestImpactFixes.map((message) => ({ message })),
+    );
+  }
+
+  return {
+    caseId: args.testCase.id,
+    attempts: Math.min(args.maxLoops, MAX_AI_EVALUATION_LOOPS),
+    widget: bestWidget,
+    judge: bestJudge,
+    outputDirectory: caseDirectory,
+    errors,
+  };
+}
+
+export function parseJudgeResult(raw: string): CustomWidgetJudgeResult {
+  const parsed: unknown = JSON.parse(raw);
+  const result = judgeResultSchema.parse(parsed);
+  const weightedTotal = Object.entries(categoryWeights).reduce(
+    (sum, [category, weight]) => sum + result.categories[category as keyof typeof categoryWeights] * weight,
+    0,
+  );
+  const normalized = {
+    ...result,
+    total: Math.round(weightedTotal / 100),
+  };
+  return { ...normalized, verdict: judgePasses(normalized) ? "pass" : "fail" };
+}
+
+async function writeWidgetFiles(directory: string, widget: HomarrCustomWidgetV2, basename: string) {
+  await writeFile(path.join(directory, `${basename}.widget.json`), JSON.stringify(widget, null, 2), "utf8");
+}
+
+async function callOpenRouter(args: {
+  apiKey: string;
+  model: string;
+  prompt: string;
+  purpose: "generation" | "judge";
+}): Promise<string> {
+  const isJudge = args.purpose === "judge";
+  const response = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${args.apiKey}`,
+      "Content-Type": "application/json",
+      "HTTP-Referer": "https://homarr.dev",
+      "X-Title": "Homarr Custom Widget AI Evaluation",
+    },
+    body: JSON.stringify({
+      model: args.model,
+      messages: [{ role: "user", content: args.prompt }],
+      temperature: isJudge ? 0 : 0.2,
+      max_tokens: isJudge ? 8_000 : 20_000,
+      reasoning: { effort: "xhigh", exclude: true },
+      ...(isJudge ? { response_format: getJudgeResponseFormat() } : {}),
+    }),
+    signal: AbortSignal.timeout(180_000),
+  });
+  const payload = (await response.json()) as OpenRouterResponse;
+  if (!response.ok)
+    throw new Error(`OpenRouter request failed (${response.status}): ${payload.error?.message ?? "Unknown error"}`);
+  const content = payload.choices?.[0]?.message?.content;
+  if (!content) throw new Error("OpenRouter returned no message content");
+  return content;
+}
diff --git a/packages/custom-widgets/scripts/check-architecture.mjs b/packages/custom-widgets/scripts/check-architecture.mjs
new file mode 100644
index 000000000..5204ca4b1
--- /dev/null
+++ b/packages/custom-widgets/scripts/check-architecture.mjs
@@ -0,0 +1,108 @@
+import { readdir, readFile } from "node:fs/promises";
+import { extname, join, relative, resolve } from "node:path";
+
+const packageRoot = resolve(import.meta.dirname, "..");
+const repositoryRoot = resolve(packageRoot, "../..");
+const sourceRoots = [
+  join(packageRoot, "src"),
+  join(repositoryRoot, "packages/api/src/router/custom-widget"),
+  join(repositoryRoot, "packages/widgets/src/custom-api"),
+  join(repositoryRoot, "apps/nextjs/src/app/[locale]/manage/custom-widgets"),
+];
+const productionFiles = [];
+
+async function collect(directory) {
+  for (const entry of await readdir(directory, { withFileTypes: true })) {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name !== "test") await collect(path);
+    } else if ([".ts", ".tsx"].includes(extname(entry.name)) && !/\.spec\.tsx?$/u.test(entry.name)) {
+      productionFiles.push(path);
+    }
+  }
+}
+
+for (const sourceRoot of sourceRoots) await collect(sourceRoot);
+const failures = [];
+const graph = new Map();
+const algorithmicExceptions = new Map([
+  ["packages/custom-widgets/src/jsx/analyzer.ts", 400],
+  ["packages/custom-widgets/src/jsx/interpreter.tsx", 400],
+]);
+
+for (const file of productionFiles) {
+  const source = await readFile(file, "utf8");
+  const name = relative(repositoryRoot, file);
+  const lineCount = source.trimEnd().split("\n").length;
+  const limit = algorithmicExceptions.get(name) ?? 300;
+  if (lineCount > limit) failures.push(`${name} has ${lineCount} lines (limit ${limit})`);
+  if (file.startsWith(join(packageRoot, "src")) && /from\s+["']@homarr\/(?:api|widgets)(?:\/|["'])/u.test(source)) {
+    failures.push(`${name} imports a forbidden adapter package`);
+  }
+  if (extname(file) === ".tsx" && /(?:runtime|workbench|custom-widgets|custom-api)/u.test(name)) {
+    for (const line of source.split("\n")) {
+      const match = line.match(/>\s*([A-Za-z][A-Za-z0-9 .,!?'-]*)\s*</u);
+      if (match) failures.push(`${name} contains untranslated JSX text: ${JSON.stringify(match[1]?.trim())}`);
+    }
+    if (/\b(?:aria-label|description|label|placeholder|title)=["'][A-Za-z]/u.test(source)) {
+      failures.push(`${name} contains an untranslated user-facing attribute`);
+    }
+  }
+  const dependencies = [];
+  for (const match of source.matchAll(/from\s+["'](\.[^"']+)["']/gu)) {
+    const candidate = resolve(file, "..", match[1]);
+    const resolved = productionFiles.find(
+      (item) =>
+        item === candidate ||
+        item === `${candidate}.ts` ||
+        item === `${candidate}.tsx` ||
+        item === join(candidate, "index.ts"),
+    );
+    if (resolved) dependencies.push(resolved);
+  }
+  graph.set(file, dependencies);
+}
+
+const visiting = new Set();
+const visited = new Set();
+function visit(file, path = []) {
+  if (visiting.has(file)) {
+    failures.push(`circular dependency: ${[...path, file].map((item) => relative(repositoryRoot, item)).join(" -> ")}`);
+    return;
+  }
+  if (visited.has(file)) return;
+  visiting.add(file);
+  for (const dependency of graph.get(file) ?? []) visit(dependency, [...path, file]);
+  visiting.delete(file);
+  visited.add(file);
+}
+for (const file of productionFiles) visit(file);
+
+const widgetAdapter = await readFile(join(repositoryRoot, "packages/widgets/src/custom-api/component.tsx"), "utf8");
+if (!/dynamic\(\(\)\s*=>\s*import\(["']\.\/custom-jsx-display["']\)/u.test(widgetAdapter)) {
+  failures.push("Custom JSX board rendering must remain dynamically loaded");
+}
+const editorAdapter = await readFile(
+  join(repositoryRoot, "packages/custom-widgets/src/workbench/code-editor.tsx"),
+  "utf8",
+);
+if (!/lazy\(\(\)\s*=>\s*import\(["'].\/direct-code-mirror["']\)\)/u.test(editorAdapter)) {
+  failures.push("CodeMirror must remain dynamically loaded after the client mounts");
+}
+const componentRegistry = await readFile(
+  join(repositoryRoot, "packages/custom-widgets/src/core/component-registry.ts"),
+  "utf8",
+);
+if (!/from\s+["'].\/component-catalog["']/u.test(componentRegistry)) {
+  failures.push("The Custom JSX runtime registry must use the canonical authoring catalog");
+}
+if (/component-runtime\.generated\.json/u.test(componentRegistry)) {
+  failures.push("The Custom JSX runtime registry must not use a second generated component catalog");
+}
+
+if (failures.length > 0) {
+  console.error(failures.join("\n"));
+  process.exitCode = 1;
+} else {
+  console.log(`Custom Widgets architecture checks passed for ${productionFiles.length} production modules.`);
+}
diff --git a/packages/custom-widgets/scripts/evaluate-ai-authoring.ts b/packages/custom-widgets/scripts/evaluate-ai-authoring.ts
new file mode 100644
index 000000000..9aacec9f0
--- /dev/null
+++ b/packages/custom-widgets/scripts/evaluate-ai-authoring.ts
@@ -0,0 +1,66 @@
+import { mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+import { CUSTOM_WIDGET_AI_EVALUATION_CASES } from "./ai-evaluation-cases";
+import { DEFAULT_GENERATOR_MODEL, DEFAULT_JUDGE_MODEL, evaluateCustomWidgetCase } from "./ai-evaluation";
+import type { AiEvaluationResult } from "./ai-evaluation";
+
+const apiKey = process.env.OPENROUTER_API_KEY;
+if (!apiKey) throw new Error("OPENROUTER_API_KEY is required for the live Custom Widget AI evaluation");
+
+const requestedCase = process.argv.find((value) => value.startsWith("--case="))?.slice("--case=".length);
+const configuredLoops = Number(process.env.CUSTOM_WIDGET_AI_MAX_LOOPS ?? 10);
+const totalLoopBudget = Number.isInteger(configuredLoops) && configuredLoops > 0 ? Math.min(configuredLoops, 10) : 10;
+const selectedCases = requestedCase
+  ? CUSTOM_WIDGET_AI_EVALUATION_CASES.filter((testCase) => testCase.id === requestedCase)
+  : CUSTOM_WIDGET_AI_EVALUATION_CASES;
+if (selectedCases.length === 0) throw new Error(`Unknown AI evaluation case '${requestedCase}'`);
+if (totalLoopBudget < selectedCases.length) {
+  throw new Error(`CUSTOM_WIDGET_AI_MAX_LOOPS must be at least ${selectedCases.length} for this run`);
+}
+
+const runId = new Date().toISOString().replaceAll(/[:.]/gu, "-");
+const outputRoot = path.resolve(process.cwd(), ".ai-evaluations", runId);
+await mkdir(outputRoot, { recursive: true });
+
+const results: AiEvaluationResult[] = [];
+let remainingLoopBudget = totalLoopBudget;
+for (const testCase of selectedCases) {
+  const remainingCases = selectedCases.length - results.length;
+  const maxLoops = Math.max(1, Math.floor(remainingLoopBudget / remainingCases));
+  process.stdout.write(`Evaluating ${testCase.id}...\n`);
+  const result = await evaluateCustomWidgetCase({
+    testCase,
+    apiKey,
+    outputRoot,
+    maxLoops,
+    generatorModel: process.env.OPENROUTER_GENERATOR_MODEL ?? DEFAULT_GENERATOR_MODEL,
+    judgeModel: process.env.OPENROUTER_JUDGE_MODEL ?? DEFAULT_JUDGE_MODEL,
+  });
+  results.push(result);
+  remainingLoopBudget -= result.attempts;
+  process.stdout.write(
+    result.judge
+      ? `  ${result.judge.total}/100 after ${result.attempts} attempt(s)\n`
+      : `  failed after ${result.attempts} attempt(s)\n`,
+  );
+}
+
+const summary = {
+  generatedAt: new Date().toISOString(),
+  generatorModel: process.env.OPENROUTER_GENERATOR_MODEL ?? DEFAULT_GENERATOR_MODEL,
+  judgeModel: process.env.OPENROUTER_JUDGE_MODEL ?? DEFAULT_JUDGE_MODEL,
+  results: results.map((result) => ({
+    caseId: result.caseId,
+    attempts: result.attempts,
+    score: result.judge?.total ?? null,
+    verdict: result.judge?.verdict ?? "fail",
+    categories: result.judge?.categories ?? null,
+    errors: result.errors,
+    outputDirectory: path.relative(process.cwd(), result.outputDirectory),
+  })),
+};
+await writeFile(path.join(outputRoot, "summary.json"), JSON.stringify(summary, null, 2), "utf8");
+process.stdout.write(`Results saved to ${path.relative(process.cwd(), outputRoot)}\n`);
+
+if (results.some((result) => result.judge?.verdict !== "pass")) process.exitCode = 1;
diff --git a/packages/custom-widgets/scripts/generate-component-metadata.ts b/packages/custom-widgets/scripts/generate-component-metadata.ts
new file mode 100644
index 000000000..f5f089d76
--- /dev/null
+++ b/packages/custom-widgets/scripts/generate-component-metadata.ts
@@ -0,0 +1,732 @@
+import { readFile, writeFile } from "node:fs/promises";
+import { resolve } from "node:path";
+
+import * as Charts from "@mantine/charts";
+import * as Core from "@mantine/core";
+import * as Dates from "@mantine/dates";
+import ts from "typescript";
+
+import {
+  CUSTOM_JSX_AUTHORING_CATALOG_SCHEMA_VERSION,
+  CUSTOM_WIDGET_AUTHORING_VERSION,
+} from "../src/core/component-catalog-types";
+import type {
+  CustomJsxAuthoringCatalog,
+  CustomJsxBlockedCapability,
+  CustomJsxCatalogBindingType,
+  CustomJsxComponentApi,
+  CustomJsxLiteralValue,
+  CustomJsxPropDescriptor,
+  CustomJsxPropSource,
+} from "../src/core/component-catalog-types";
+import { getCatalogBlockedComponentProps, getCatalogDeniedComponentReason } from "../src/core/component-catalog-policy";
+import { commonSafeProps } from "../src/core/component-props";
+import { accessibilityByCategory, documentationUrl, subcomponentsByName } from "../src/core/component-descriptor";
+import { discoveredMantineComponents, discoveredSubcomponentsByName } from "../src/core/component-discovery";
+import type {
+  CustomJsxComponentCategory,
+  CustomJsxComponentPackage,
+  CustomJsxComponentSafety,
+} from "../src/core/component-types";
+import {
+  CUSTOM_JSX_BLOCKED_PROPERTIES,
+  CUSTOM_JSX_BLOCKED_PROPS,
+  CUSTOM_JSX_BLOCKED_STYLE_KEYS,
+  isBlockedCustomJsxProp,
+} from "../src/jsx/policy";
+
+void [Core, Dates, Charts];
+
+const packageRoot = resolve(import.meta.dirname, "..");
+const repositoryRoot = resolve(packageRoot, "../..");
+const configPath = resolve(packageRoot, "tsconfig.json");
+const configFile = ts.readConfigFile(configPath, ts.sys.readFile);
+if (configFile.error) throw new Error(ts.flattenDiagnosticMessageText(configFile.error.messageText, "\n"));
+const config = ts.parseJsonConfigFileContent(configFile.config, ts.sys, packageRoot);
+const program = ts.createProgram({ rootNames: [...config.fileNames, import.meta.filename], options: config.options });
+const checker = program.getTypeChecker();
+const source = program.getSourceFile(import.meta.filename);
+if (!source) throw new Error("Unable to inspect the component catalog generator");
+
+const moduleSymbols = new Map<string, ts.Symbol>();
+for (const declaration of source.statements) {
+  if (!ts.isImportDeclaration(declaration) || !ts.isStringLiteral(declaration.moduleSpecifier)) continue;
+  const moduleName = declaration.moduleSpecifier.text;
+  if (!moduleName.startsWith("@mantine/")) continue;
+  const symbol = checker.getSymbolAtLocation(declaration.moduleSpecifier);
+  if (symbol) moduleSymbols.set(moduleName, symbol);
+}
+
+type UninternedPropDescriptor = Omit<CustomJsxPropDescriptor, "typeRef"> & { type: string };
+type UninternedComponentApi = Omit<CustomJsxComponentApi, "props"> & { props: UninternedPropDescriptor[] };
+
+interface InspectedProp extends UninternedPropDescriptor {
+  global: boolean;
+}
+
+interface InspectedComponent {
+  description?: string;
+  props: InspectedProp[];
+}
+
+interface CatalogSourceComponent {
+  name: string;
+  package: CustomJsxComponentPackage;
+  category: CustomJsxComponentCategory;
+  safety: CustomJsxComponentSafety;
+  subcomponents: readonly string[];
+  accessibilityRequirements: readonly string[];
+  documentationUrl: string;
+  reason?: string;
+}
+
+const commonPropNames = new Set<string>(commonSafeProps);
+const inspectedComponents = new Map<string, InspectedComponent>();
+const globalCandidates = new Map<string, UninternedPropDescriptor[]>();
+
+async function generateCatalog() {
+  const sourceComponents = createSourceComponents();
+  for (const component of sourceComponents) {
+    if (component.package === "@homarr/widgets" || component.safety === "denied") continue;
+    const inspected = inspectMantineComponent(component);
+    inspectedComponents.set(component.name, inspected);
+    for (const prop of inspected.props) {
+      if (!prop.global) continue;
+      const candidates = globalCandidates.get(prop.name) ?? [];
+      const { global: _global, ...descriptor } = prop;
+      candidates.push({ ...descriptor, source: "global" });
+      globalCandidates.set(prop.name, candidates);
+    }
+  }
+
+  for (const name of commonSafeProps) {
+    const candidates = globalCandidates.get(name) ?? [];
+    if (candidates.length === 0) candidates.push(createFallbackProp(name, "global"));
+    globalCandidates.set(name, candidates);
+  }
+
+  const uninternedGlobalProps = [...globalCandidates.entries()]
+    .map(([name, candidates]) => mergeGlobalProp(name, candidates))
+    .toSorted((left, right) => compareStrings(left.name, right.name));
+  const globalPropsByName = new Map(uninternedGlobalProps.map((prop) => [prop.name, prop]));
+
+  const uninternedComponents = sourceComponents
+    .map((component) => buildComponentApi(component, globalPropsByName))
+    .toSorted((left, right) => compareStrings(left.name, right.name));
+  const types = [
+    ...new Set([
+      ...uninternedGlobalProps.map(({ type }) => type),
+      ...uninternedComponents.flatMap(({ props }) => props.map(({ type }) => type)),
+    ]),
+  ].toSorted(compareStrings);
+  const typeReferences = new Map(types.map((type, index) => [type, index]));
+  const internProp = ({ type, ...prop }: UninternedPropDescriptor): CustomJsxPropDescriptor => {
+    const typeRef = typeReferences.get(type);
+    if (typeRef === undefined) throw new Error(`Unable to intern prop type '${type}'`);
+    return { ...prop, typeRef };
+  };
+  const globalProps = uninternedGlobalProps.map(internProp);
+  const components = uninternedComponents.map(
+    (component): CustomJsxComponentApi => ({ ...component, props: component.props.map(internProp) }),
+  );
+
+  const mantineVersions = await Promise.all(
+    ["core", "dates", "charts"].map((packageName) =>
+      readPackageVersion(resolve(repositoryRoot, `node_modules/@mantine/${packageName}/package.json`)),
+    ),
+  );
+  if (new Set(mantineVersions).size !== 1) {
+    throw new Error(`Mantine package versions must match: ${mantineVersions.join(", ")}`);
+  }
+  const mantineVersion = mantineVersions[0];
+  if (!mantineVersion) throw new Error("Unable to determine the installed Mantine version");
+
+  const catalog: CustomJsxAuthoringCatalog = {
+    schemaVersion: CUSTOM_JSX_AUTHORING_CATALOG_SCHEMA_VERSION,
+    mantineVersion,
+    customWidgetVersion: CUSTOM_WIDGET_AUTHORING_VERSION,
+    types,
+    globalProps,
+    blockedCapabilities: createBlockedCapabilities(),
+    components,
+  };
+
+  const serialized = `${JSON.stringify(catalog)}\n`;
+  await Promise.all([
+    writeFile(resolve(packageRoot, "src/core/component-catalog.generated.json"), serialized),
+    writeFile(resolve(repositoryRoot, "apps/docs/static/custom-widgets/component-catalog-v1.json"), serialized),
+  ]);
+}
+
+function inspectMantineComponent(component: CatalogSourceComponent): InspectedComponent {
+  const moduleSymbol = moduleSymbols.get(component.package);
+  const rootName = component.name.split(".")[0];
+  let symbol =
+    moduleSymbol && checker.getExportsOfModule(moduleSymbol).find((candidate) => candidate.name === rootName);
+  let location = symbol?.valueDeclaration ?? symbol?.declarations?.[0] ?? source;
+  let type = symbol && checker.getTypeOfSymbolAtLocation(symbol, location);
+  for (const segment of component.name.split(".").slice(1)) {
+    symbol = type?.getProperty(segment);
+    if (!symbol) break;
+    location = symbol.valueDeclaration ?? symbol.declarations?.[0] ?? location;
+    type = checker.getTypeOfSymbolAtLocation(symbol, location);
+  }
+
+  const signature = type?.getCallSignatures()[0] ?? type?.getConstructSignatures()[0];
+  const parameter = signature?.parameters[0];
+  const propType = parameter && checker.getTypeOfSymbolAtLocation(parameter, parameter.valueDeclaration ?? location);
+  const props = propType
+    ? checker
+        .getPropertiesOfType(propType)
+        .flatMap((prop): InspectedProp[] => {
+          const declaration = prop.valueDeclaration ?? prop.declarations?.[0] ?? location;
+          const resolvedType = checker.getTypeOfSymbolAtLocation(prop, declaration);
+          if (prop.name === "bind" || isBlockedCustomJsxProp(prop.name) || isCallableType(resolvedType)) return [];
+          const global = isGlobalProp(prop);
+          return [createPropDescriptor(prop, resolvedType, declaration, global ? "global" : "component", global)];
+        })
+        .toSorted((left, right) => compareStrings(left.name, right.name))
+    : [];
+  return {
+    description: normalizeDescription(symbol && ts.displayPartsToString(symbol.getDocumentationComment(checker))),
+    props,
+  };
+}
+
+function createSourceComponents(): CatalogSourceComponent[] {
+  const mantineComponents = discoveredMantineComponents.map((component): CatalogSourceComponent => {
+    const reason = getCatalogDeniedComponentReason(component.name);
+    const category = reason ? ("blocked" as const) : component.category;
+    return {
+      name: component.name,
+      package: component.package,
+      category,
+      safety: reason ? "denied" : "wrapped",
+      subcomponents: discoveredSubcomponentsByName[component.name] ?? subcomponentsByName[component.name] ?? [],
+      accessibilityRequirements: accessibilityByCategory[category],
+      documentationUrl: documentationUrl(component.package, component.name),
+      ...(reason ? { reason } : {}),
+    };
+  });
+  const homarrComponents = HOMARR_COMPONENT_DEFINITIONS.map(
+    ({ name, category, safety }): CatalogSourceComponent => ({
+      name,
+      package: "@homarr/widgets",
+      category,
+      safety,
+      subcomponents: [],
+      accessibilityRequirements: accessibilityByCategory[category],
+      documentationUrl: documentationUrl("@homarr/widgets", name),
+    }),
+  );
+  return [...mantineComponents, ...homarrComponents];
+}
+
+function buildComponentApi(
+  component: CatalogSourceComponent,
+  globalPropsByName: ReadonlyMap<string, UninternedPropDescriptor>,
+): UninternedComponentApi {
+  const blockedProps = getCatalogBlockedComponentProps(component.name);
+  const blockedPropNames = new Set(blockedProps.map(({ name }) => name));
+  const globalNames = new Set(globalPropsByName.keys());
+  const inspected = inspectedComponents.get(component.name);
+  const componentProps = new Map<string, UninternedPropDescriptor>();
+  for (const prop of inspected?.props ?? []) {
+    if (blockedPropNames.has(prop.name)) continue;
+    const { global: _global, ...descriptor } = prop;
+    const componentDescriptor = { ...descriptor, source: "component" as const };
+    const globalProp = globalNames.has(prop.name) ? globalPropsByName.get(prop.name) : undefined;
+    if (globalProp && samePropMetadata(globalProp, componentDescriptor)) continue;
+    componentProps.set(prop.name, componentDescriptor);
+  }
+  if (component.safety !== "denied" && component.package === "@homarr/widgets") {
+    const homarrProps = HOMARR_COMPONENT_PROPS[component.name];
+    if (!homarrProps) throw new Error(`Homarr component '${component.name}' requires explicit catalog prop metadata`);
+    for (const [propName, metadata] of Object.entries(homarrProps)) {
+      const globalProp = globalPropsByName.get(propName);
+      if (globalProp && samePropMetadata(globalProp, metadata)) continue;
+      if (isBlockedCustomJsxProp(propName)) continue;
+      componentProps.set(propName, { name: propName, source: "component", ...metadata });
+    }
+  }
+
+  const bindType = component.safety !== "denied" ? CUSTOM_JSX_BINDING_TYPES[component.name] : undefined;
+  const description = inspected?.description ?? HOMARR_COMPONENT_DESCRIPTIONS[component.name];
+  return {
+    name: component.name,
+    package: component.package,
+    category: component.category,
+    safety: component.safety,
+    ...(description ? { description } : {}),
+    documentationUrl: component.documentationUrl,
+    props: [...componentProps.values()].toSorted((left, right) => compareStrings(left.name, right.name)),
+    blockedProps: [...blockedProps].toSorted((left, right) => compareStrings(left.name, right.name)),
+    subcomponents: [...component.subcomponents].toSorted(),
+    ...(bindType
+      ? {
+          bind: {
+            type: bindType,
+            initialProp: bindType === "boolean" ? ("defaultChecked" as const) : ("defaultValue" as const),
+          },
+        }
+      : {}),
+    accessibilityRequirements: [...component.accessibilityRequirements],
+    ...(component.safety === "denied" && component.reason ? { deniedReason: component.reason } : {}),
+  };
+}
+
+function createPropDescriptor(
+  prop: ts.Symbol,
+  type: ts.Type,
+  declaration: ts.Node,
+  sourceKind: CustomJsxPropSource,
+  global: boolean,
+): InspectedProp {
+  const literalValues = getLiteralValues(type);
+  const description = normalizeDescription(ts.displayPartsToString(prop.getDocumentationComment(checker)));
+  return {
+    name: prop.name,
+    type: simplifyType(type, declaration),
+    required: (prop.flags & ts.SymbolFlags.Optional) === 0 && !containsUndefined(type),
+    source: sourceKind,
+    ...(literalValues ? { literalValues } : {}),
+    ...(description ? { description } : {}),
+    global,
+  };
+}
+
+function createFallbackProp(name: string, sourceKind: CustomJsxPropSource): UninternedPropDescriptor {
+  const literalValues = FALLBACK_LITERAL_VALUES[name];
+  return {
+    name,
+    type: FALLBACK_PROP_TYPES[name] ?? inferFallbackType(name),
+    required: false,
+    source: sourceKind,
+    ...(literalValues ? { literalValues: [...literalValues] } : {}),
+    ...(FALLBACK_PROP_DESCRIPTIONS[name] ? { description: FALLBACK_PROP_DESCRIPTIONS[name] } : {}),
+  };
+}
+
+function mergeGlobalProp(name: string, candidates: UninternedPropDescriptor[]): UninternedPropDescriptor {
+  const fallback = createFallbackProp(name, "global");
+  const type = mostFrequent(candidates.map((candidate) => candidate.type)) ?? fallback.type;
+  const descriptions = candidates.flatMap(({ description }) => (description ? [description] : []));
+  const literalValues = uniqueLiterals(candidates.flatMap(({ literalValues }) => literalValues ?? []));
+  return {
+    name,
+    type,
+    required: false,
+    source: "global",
+    ...(literalValues.length > 0 ? { literalValues } : {}),
+    ...((mostFrequent(descriptions) ?? fallback.description)
+      ? { description: mostFrequent(descriptions) ?? fallback.description }
+      : {}),
+  };
+}
+
+function samePropMetadata(globalProp: UninternedPropDescriptor, componentProp: HomarrPropMetadata): boolean {
+  return (
+    globalProp.type === componentProp.type &&
+    globalProp.required === componentProp.required &&
+    JSON.stringify(globalProp.literalValues ?? []) === JSON.stringify(componentProp.literalValues ?? [])
+  );
+}
+
+function isCallableType(type: ts.Type): boolean {
+  if (type.getCallSignatures().length > 0) return true;
+  return type.isUnionOrIntersection() && type.types.some(isCallableType);
+}
+
+function isGlobalProp(prop: ts.Symbol): boolean {
+  if (commonPropNames.has(prop.name)) return true;
+  return (prop.declarations ?? []).some((declaration) => {
+    const path = declaration.getSourceFile().fileName.replaceAll("\\", "/");
+    return path.includes("/node_modules/@types/react/") || path.includes("/@mantine/core/lib/core/Box/");
+  });
+}
+
+function containsUndefined(type: ts.Type): boolean {
+  if ((type.flags & ts.TypeFlags.Undefined) !== 0) return true;
+  return type.isUnion() && type.types.some(containsUndefined);
+}
+
+function simplifyType(type: ts.Type, declaration: ts.Node): string {
+  const withoutUndefined = type.isUnion()
+    ? type.types.filter((part) => (part.flags & ts.TypeFlags.Undefined) === 0)
+    : [type];
+  const simplified = withoutUndefined.map(simpleTypeName);
+  if (simplified.every((value): value is string => value !== null)) return [...new Set(simplified)].join(" | ");
+
+  const rendered = checker
+    .typeToString(type, declaration, ts.TypeFormatFlags.UseAliasDefinedOutsideCurrentScope)
+    .replace(/\s+/gu, " ")
+    .replace(/\s*\|\s*undefined\b/gu, "")
+    .trim();
+  if (rendered.length <= 240) return rendered === "any" ? "unknown" : rendered;
+  const alias = type.aliasSymbol?.name;
+  if (alias && !alias.startsWith("__")) return alias;
+  return inferWideType(type);
+}
+
+function simpleTypeName(type: ts.Type): string | null {
+  if ((type.flags & ts.TypeFlags.String) !== 0) return "string";
+  if ((type.flags & ts.TypeFlags.Number) !== 0) return "number";
+  if ((type.flags & ts.TypeFlags.Boolean) !== 0) return "boolean";
+  if ((type.flags & ts.TypeFlags.Null) !== 0) return "null";
+  if ((type.flags & ts.TypeFlags.StringLiteral) !== 0) return JSON.stringify((type as ts.StringLiteralType).value);
+  if ((type.flags & ts.TypeFlags.NumberLiteral) !== 0) return String((type as ts.NumberLiteralType).value);
+  if ((type.flags & ts.TypeFlags.BooleanLiteral) !== 0)
+    return (type as ts.Type & { intrinsicName?: string }).intrinsicName ?? "boolean";
+  return null;
+}
+
+function inferWideType(type: ts.Type): string {
+  const parts = type.isUnionOrIntersection() ? type.types : [type];
+  const kinds = new Set(
+    parts.map((part) => {
+      if ((part.flags & (ts.TypeFlags.String | ts.TypeFlags.StringLiteral)) !== 0) return "string";
+      if ((part.flags & (ts.TypeFlags.Number | ts.TypeFlags.NumberLiteral)) !== 0) return "number";
+      if ((part.flags & (ts.TypeFlags.Boolean | ts.TypeFlags.BooleanLiteral)) !== 0) return "boolean";
+      if ((part.flags & ts.TypeFlags.Null) !== 0) return "null";
+      return "object";
+    }),
+  );
+  return [...kinds].toSorted().join(" | ") || "unknown";
+}
+
+function getLiteralValues(type: ts.Type): CustomJsxLiteralValue[] | undefined {
+  const values: CustomJsxLiteralValue[] = [];
+  let hasNonLiteralValue = false;
+  const visit = (candidate: ts.Type) => {
+    if (candidate.isUnion()) {
+      candidate.types.forEach(visit);
+      return;
+    }
+    if ((candidate.flags & ts.TypeFlags.StringLiteral) !== 0) values.push((candidate as ts.StringLiteralType).value);
+    else if ((candidate.flags & ts.TypeFlags.NumberLiteral) !== 0)
+      values.push((candidate as ts.NumberLiteralType).value);
+    else if ((candidate.flags & ts.TypeFlags.BooleanLiteral) !== 0)
+      values.push((candidate as ts.Type & { intrinsicName?: string }).intrinsicName === "true");
+    else if ((candidate.flags & ts.TypeFlags.Null) !== 0) values.push(null);
+    else if ((candidate.flags & ts.TypeFlags.Undefined) === 0) hasNonLiteralValue = true;
+  };
+  visit(type);
+  const unique = uniqueLiterals(values);
+  if (hasNonLiteralValue && unique.every((value) => value === null || typeof value === "boolean")) return undefined;
+  return unique.length > 0 && unique.length <= 64 ? unique : undefined;
+}
+
+function uniqueLiterals(values: CustomJsxLiteralValue[]): CustomJsxLiteralValue[] {
+  return [...new Map(values.map((value) => [`${typeof value}:${String(value)}`, value])).values()].toSorted(
+    (left, right) => compareStrings(String(left), String(right)),
+  );
+}
+
+function normalizeDescription(value: string | undefined): string | undefined {
+  const normalized = value?.replace(/\s+/gu, " ").trim();
+  return normalized || undefined;
+}
+
+function mostFrequent(values: string[]): string | undefined {
+  const counts = new Map<string, number>();
+  for (const value of values) counts.set(value, (counts.get(value) ?? 0) + 1);
+  return [...counts.entries()].toSorted(
+    ([leftValue, leftCount], [rightValue, rightCount]) =>
+      rightCount - leftCount || leftValue.length - rightValue.length || compareStrings(leftValue, rightValue),
+  )[0]?.[0];
+}
+
+function compareStrings(left: string, right: string): number {
+  return left < right ? -1 : left > right ? 1 : 0;
+}
+
+function inferFallbackType(name: string): string {
+  if (/^(?:is|has|with|allow|disabled|readOnly|loading|opened|checked|multiple|grow|wrap|striped|animated)/u.test(name))
+    return "boolean";
+  if (/^(?:count|index|max|min|offset|order|page|pageSize|size|span|step|total|value)$/u.test(name)) return "number";
+  if (/^(?:colors|values|sections|data)$/u.test(name)) return "unknown[]";
+  if (/^(?:children|description|fallback|icon|label|leftSection|rightSection|title)$/u.test(name)) return "ReactNode";
+  if (/^(?:params|enabledParams|disabledParams|style|styles)$/u.test(name)) return "Record<string, unknown>";
+  return "string | number | boolean";
+}
+
+function createBlockedCapabilities(): CustomJsxBlockedCapability[] {
+  const exactNames = new Set([
+    ...CUSTOM_JSX_BLOCKED_PROPS,
+    ...CUSTOM_JSX_BLOCKED_STYLE_KEYS,
+    ...[...CUSTOM_JSX_BLOCKED_PROPERTIES].filter((name) => name !== "bind"),
+  ]);
+  return [
+    ...[...exactNames].toSorted().map(
+      (name): CustomJsxBlockedCapability => ({
+        kind: "prop",
+        name,
+        reason: blockedPropReason(name),
+      }),
+    ),
+    {
+      kind: "prop-pattern",
+      name: "on*",
+      reason: "Authored event callbacks can execute code outside the declarative runtime.",
+    },
+    {
+      kind: "prop-pattern",
+      name: "*Ref",
+      reason: "Refs expose underlying React components and DOM nodes.",
+    },
+    {
+      kind: "prop-pattern",
+      name: "__*",
+      reason: "Private and prototype-related properties are outside the supported authoring surface.",
+    },
+  ];
+}
+
+function blockedPropReason(name: string): string {
+  if (["component", "renderRoot"].includes(name))
+    return "Polymorphic roots can replace the Homarr-owned element boundary.";
+  if (["portalProps", "popoverTarget", "popoverTargetAction", "withinPortal"].includes(name))
+    return "Portal targeting can render or interact outside the widget root.";
+  if (["dangerouslySetInnerHTML", "srcDoc"].includes(name))
+    return "Raw HTML injection is not available to authored widgets.";
+  if (["className", "classNames", "classes"].includes(name))
+    return "Unscoped class injection can escape widget CSS isolation.";
+  if (name === "children") return "Children must be expressed as interpreted JSX, not passed as a raw prop.";
+  if (name.toLowerCase().includes("ref")) return "Refs expose underlying React components and DOM nodes.";
+  if (name.startsWith("form")) return "External form submission is outside the named-request security boundary.";
+  return "This capability is blocked by the Custom JSX safety boundary.";
+}
+
+async function readPackageVersion(path: string): Promise<string> {
+  const parsed = JSON.parse(await readFile(path, "utf8")) as { version?: unknown };
+  if (typeof parsed.version !== "string") throw new Error(`Package at ${path} does not declare a version`);
+  return parsed.version;
+}
+
+const HOMARR_COMPONENT_DEFINITIONS = [
+  { name: "PaginatedList", category: "interaction", safety: "allowed" },
+  { name: "TabsContainer", category: "interaction", safety: "allowed" },
+  { name: "TabPanel", category: "interaction", safety: "allowed" },
+  { name: "Collapsible", category: "interaction", safety: "allowed" },
+  { name: "StatBar", category: "interaction", safety: "allowed" },
+  { name: "TypeBadge", category: "interaction", safety: "allowed" },
+  { name: "SubFetch", category: "network", safety: "wrapped" },
+  { name: "SubData", category: "network", safety: "wrapped" },
+  { name: "ActionButton", category: "network", safety: "wrapped" },
+  { name: "ToggleSwitch", category: "network", safety: "wrapped" },
+  { name: "RefreshButton", category: "network", safety: "wrapped" },
+  { name: "TablerIcon", category: "content", safety: "wrapped" },
+] as const satisfies readonly {
+  name: string;
+  category: CustomJsxComponentCategory;
+  safety: CustomJsxComponentSafety;
+}[];
+
+const stringBindingComponents = [
+  "Accordion",
+  "Autocomplete",
+  "Chip.Group",
+  "ChipGroup",
+  "ColorInput",
+  "ColorPicker",
+  "DateInput",
+  "DatePicker",
+  "DatePickerInput",
+  "DateTimePicker",
+  "InlineDateTimePicker",
+  "JsonInput",
+  "MaskInput",
+  "MiniCalendar",
+  "MonthPicker",
+  "MonthPickerInput",
+  "NativeSelect",
+  "PasswordInput",
+  "PinInput",
+  "Radio.Group",
+  "RadioGroup",
+  "SegmentedControl",
+  "Select",
+  "Tabs",
+  "TextInput",
+  "Textarea",
+  "TimeInput",
+  "TimePicker",
+  "TreeSelect",
+  "YearPicker",
+  "YearPickerInput",
+] as const;
+
+const CUSTOM_JSX_BINDING_TYPES: Readonly<Record<string, CustomJsxCatalogBindingType>> = {
+  ...Object.fromEntries(stringBindingComponents.map((name) => [name, "string"] as const)),
+  Checkbox: "boolean",
+  Menu: "boolean",
+  Popover: "boolean",
+  Switch: "boolean",
+  NumberInput: "number",
+  Pagination: "number",
+  Rating: "number",
+  Slider: "number",
+  Stepper: "number",
+  "Checkbox.Group": "string[]",
+  CheckboxGroup: "string[]",
+  MultiSelect: "string[]",
+  "Switch.Group": "string[]",
+  SwitchGroup: "string[]",
+  TagsInput: "string[]",
+  RangeSlider: "number[]",
+};
+
+const HOMARR_COMPONENT_DESCRIPTIONS: Readonly<Record<string, string>> = {
+  PaginatedList: "Renders a bounded page of collection items.",
+  TabsContainer: "Renders a declarative tab container.",
+  TabPanel: "Renders content for one declarative tab.",
+  Collapsible: "Shows and hides a bounded content section.",
+  StatBar: "Displays a compact labeled statistic and progress value.",
+  TypeBadge: "Displays a compact semantic type badge.",
+  SubFetch: "Runs a named manual query with invocation-time parameters.",
+  SubData: "Reads a nested value from a named manual-query result.",
+  ActionButton: "Runs a named user-triggered action.",
+  ToggleSwitch: "Runs named actions for the enabled and disabled states.",
+  RefreshButton: "Refreshes load-triggered widget queries.",
+  TablerIcon: "Resolves an installed Tabler icon by its safe name.",
+};
+
+type HomarrPropMetadata = Omit<UninternedPropDescriptor, "name" | "source">;
+
+const optionalProp = (
+  type: string,
+  literalValues?: CustomJsxLiteralValue[],
+  description?: string,
+): HomarrPropMetadata => ({
+  type,
+  required: false,
+  ...(literalValues ? { literalValues } : {}),
+  ...(description ? { description } : {}),
+});
+const requiredProp = (
+  type: string,
+  literalValues?: CustomJsxLiteralValue[],
+  description?: string,
+): HomarrPropMetadata => ({
+  type,
+  required: true,
+  ...(literalValues ? { literalValues } : {}),
+  ...(description ? { description } : {}),
+});
+
+const HOMARR_COMPONENT_PROPS: Readonly<Record<string, Readonly<Record<string, HomarrPropMetadata>>>> = {
+  PaginatedList: { pageSize: optionalProp("number") },
+  TabsContainer: { defaultTab: optionalProp("string") },
+  TabPanel: { value: requiredProp("string"), label: optionalProp("string") },
+  Collapsible: { title: requiredProp("string"), defaultOpen: optionalProp("boolean") },
+  StatBar: {
+    value: requiredProp("number"),
+    max: optionalProp("number"),
+    label: optionalProp("string"),
+    color: optionalProp("string"),
+  },
+  TypeBadge: {
+    type: requiredProp("string"),
+    size: optionalProp("'xs' | 'sm' | 'md' | 'lg' | 'xl'", ["xs", "sm", "md", "lg", "xl"]),
+  },
+  SubFetch: {
+    requestId: optionalProp("string", undefined, "Identifier of the named Custom Widget query."),
+    params: optionalProp("Record<string, string | number | boolean>"),
+    refreshInterval: optionalProp("number"),
+    loadingLabel: optionalProp("string"),
+    errorMessage: optionalProp("string"),
+    fallback: optionalProp("ReactNode"),
+    triggerContent: optionalProp("ReactNode", undefined, "Custom accessible trigger shown before a manual query runs."),
+    triggerAriaLabel: optionalProp("string", undefined, "Accessible label for a custom manual-query trigger."),
+    path: optionalProp("string"),
+    as: optionalProp("'json' | 'text'", ["json", "text"]),
+    trigger: optionalProp("'auto' | 'manual'", ["auto", "manual"]),
+  },
+  SubData: {
+    path: optionalProp("string"),
+    as: optionalProp("'Text' | 'Title' | 'Badge' | 'Code' | 'Image'", ["Text", "Title", "Badge", "Code", "Image"]),
+    order: optionalProp("1 | 2 | 3 | 4 | 5 | 6", [1, 2, 3, 4, 5, 6]),
+    size: optionalProp("string"),
+    color: optionalProp("string"),
+    variant: optionalProp("string"),
+    fw: optionalProp("number"),
+    c: optionalProp("string"),
+    alt: optionalProp("string"),
+    fit: optionalProp("string"),
+    w: optionalProp("string | number"),
+    h: optionalProp("string | number"),
+    radius: optionalProp("string | number"),
+  },
+  ActionButton: {
+    requestId: optionalProp("string", undefined, "Identifier of the named Custom Widget action."),
+    params: optionalProp("Record<string, string | number | boolean>"),
+    label: optionalProp("string"),
+    color: optionalProp("string"),
+    variant: optionalProp("string"),
+    size: optionalProp("string"),
+    confirmMessage: optionalProp("string"),
+    successMessage: optionalProp("string"),
+    errorMessage: optionalProp("string"),
+    icon: optionalProp("string"),
+    disabled: optionalProp("boolean | string"),
+    fullWidth: optionalProp("boolean | string"),
+  },
+  ToggleSwitch: {
+    requestId: optionalProp("string", undefined, "Identifier of the named Custom Widget action."),
+    enabledParams: optionalProp("Record<string, string | number | boolean>"),
+    disabledParams: optionalProp("Record<string, string | number | boolean>"),
+    initialValue: optionalProp("boolean | string"),
+    label: optionalProp("string"),
+    color: optionalProp("string"),
+    size: optionalProp("string"),
+    errorMessage: optionalProp("string"),
+    disabled: optionalProp("boolean | string"),
+  },
+  RefreshButton: {
+    label: optionalProp("string"),
+    color: optionalProp("string"),
+    variant: optionalProp("string"),
+    size: optionalProp("string"),
+  },
+  TablerIcon: {
+    name: requiredProp("string"),
+    size: optionalProp("string | number"),
+    color: optionalProp("string"),
+    stroke: optionalProp("string | number"),
+  },
+};
+
+const FALLBACK_PROP_TYPES: Readonly<Record<string, string>> = {
+  key: "string | number",
+  id: "string",
+  style: "CSSProperties",
+  title: "string",
+  role: "AriaRole",
+  "aria-label": "string",
+  "aria-describedby": "string",
+  "aria-hidden": "boolean | 'true' | 'false'",
+  tabIndex: "number",
+  requestId: "string",
+  refreshInterval: "number",
+  path: "string",
+  name: "string",
+  color: "MantineColor",
+  radius: "MantineRadius",
+  variant: "string",
+  size: "MantineSize | string | number",
+  defaultValue: "unknown",
+  defaultChecked: "boolean",
+};
+
+const FALLBACK_LITERAL_VALUES: Readonly<Record<string, readonly CustomJsxLiteralValue[]>> = {
+  target: ["_blank", "_parent", "_self", "_top"],
+  orientation: ["horizontal", "vertical"],
+};
+
+const FALLBACK_PROP_DESCRIPTIONS: Readonly<Record<string, string>> = {
+  key: "Stable identity used by React when rendering collections.",
+  requestId: "Identifier of the named Custom Widget request.",
+  bind: "Name of the temporary in-memory input value.",
+};
+
+await generateCatalog();
diff --git a/packages/custom-widgets/scripts/verify-reference-apis.ts b/packages/custom-widgets/scripts/verify-reference-apis.ts
new file mode 100644
index 000000000..87345c37d
--- /dev/null
+++ b/packages/custom-widgets/scripts/verify-reference-apis.ts
@@ -0,0 +1,138 @@
+import { customJsxRequestSchema } from "../src/core/request-schema";
+import { executeCustomWidgetRequest } from "../src/server/request-executor";
+import { renderRequestTarget, resolveCustomWidgetRequestValues } from "../src/server/request-manifest";
+
+const pokemonListRequest = customJsxRequestSchema.parse({
+  path: "/api/v2/pokemon",
+  query: { limit: { $option: "limit" }, offset: 0 },
+});
+const pokemonDetailRequest = customJsxRequestSchema.parse({
+  path: "/api/v2/pokemon/{param:name}",
+  trigger: "manual",
+});
+
+const listTarget = renderRequestTarget(
+  "https://pokeapi.co",
+  pokemonListRequest,
+  resolveCustomWidgetRequestValues(pokemonListRequest, { limit: 3 }),
+);
+const list = await fetchJson(listTarget, {});
+if (!isRecord(list) || !Array.isArray(list.results) || list.results.length !== 3) {
+  throw new Error("PokeAPI list response did not match the expected shape");
+}
+const firstName = isRecord(list.results[0]) && typeof list.results[0].name === "string" ? list.results[0].name : null;
+if (!firstName) throw new Error("PokeAPI list did not contain a Pokémon name");
+const detailTarget = renderRequestTarget(
+  "https://pokeapi.co",
+  pokemonDetailRequest,
+  resolveCustomWidgetRequestValues(pokemonDetailRequest, {}, { name: firstName }),
+);
+const detail = await fetchJson(detailTarget, {});
+if (!isRecord(detail) || detail.name !== firstName || !Array.isArray(detail.stats)) {
+  throw new Error("PokeAPI detail response did not match the expected shape");
+}
+process.stdout.write("PokeAPI list and detail requests passed\n");
+
+const portainerBaseUrl = process.env.PORTAINER_BASE_URL;
+const portainerApiKey = process.env.PORTAINER_API_KEY;
+if (!portainerBaseUrl || !portainerApiKey) {
+  if (process.argv.includes("--pokeapi-only")) {
+    process.stdout.write("Portainer check skipped (--pokeapi-only)\n");
+    process.exit(0);
+  }
+  throw new Error("PORTAINER_BASE_URL and PORTAINER_API_KEY are required for the Portainer reference check");
+}
+const endpointId = process.env.PORTAINER_ENDPOINT_ID ?? "2";
+const containersRequest = customJsxRequestSchema.parse({
+  path: "/api/endpoints/{option:endpointId}/docker/containers/json",
+  query: { all: true },
+});
+const containersTarget = renderRequestTarget(
+  portainerBaseUrl,
+  containersRequest,
+  resolveCustomWidgetRequestValues(containersRequest, { endpointId }),
+);
+const containers = await fetchJson(containersTarget, { "X-API-Key": portainerApiKey });
+if (!Array.isArray(containers)) throw new Error("Portainer containers response was not an array");
+
+const actionRequests = ["start", "stop", "restart"].map((action) =>
+  customJsxRequestSchema.parse({
+    kind: "action",
+    method: "POST",
+    path: `/api/endpoints/{option:endpointId}/docker/containers/{param:id}/${action}`,
+    confirmation: `${action} this container?`,
+    invalidates: ["containers"],
+  }),
+);
+for (const request of actionRequests) {
+  const target = renderRequestTarget(
+    portainerBaseUrl,
+    request,
+    resolveCustomWidgetRequestValues(request, { endpointId }, { id: "container/id" }),
+  );
+  if (!target.pathname.includes("container%2Fid")) throw new Error("Portainer action target did not encode its ID");
+}
+process.stdout.write(
+  `Portainer container query passed (${containers.length} containers); start/stop/restart targets passed\n`,
+);
+
+const mutationContainerId = process.env.PORTAINER_TEST_CONTAINER_ID;
+if (mutationContainerId) {
+  if (process.env.PORTAINER_ALLOW_MUTATIONS !== "1") {
+    throw new Error("Set PORTAINER_ALLOW_MUTATIONS=1 to test actions against PORTAINER_TEST_CONTAINER_ID");
+  }
+  const container = containers.find(
+    (candidate) =>
+      isRecord(candidate) && (candidate.Id === mutationContainerId || candidate.ID === mutationContainerId),
+  );
+  if (!isRecord(container)) throw new Error("PORTAINER_TEST_CONTAINER_ID was not returned by the container query");
+  const initiallyRunning =
+    container.State === "running" || (isRecord(container.State) && container.State.Running === true);
+  const actionOrder = initiallyRunning ? ["restart", "stop", "start"] : ["start", "restart", "stop"];
+  try {
+    for (const action of actionOrder) await runPortainerAction(action, mutationContainerId);
+  } finally {
+    await runPortainerAction(initiallyRunning ? "start" : "stop", mutationContainerId, true);
+  }
+  process.stdout.write(
+    `Portainer ${actionOrder.join("/")} actions passed and the original running state was restored\n`,
+  );
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+async function fetchJson(target: URL, headers: Record<string, string>): Promise<unknown> {
+  const response = await fetch(target, { headers, signal: AbortSignal.timeout(15_000) });
+  if (!response.ok) throw new Error(`Reference API returned HTTP ${response.status}`);
+  return response.json() as Promise<unknown>;
+}
+
+async function runPortainerAction(action: string, containerId: string, ignoreConflict = false) {
+  const request = customJsxRequestSchema.parse({
+    kind: "action",
+    method: "POST",
+    path: `/api/endpoints/{option:endpointId}/docker/containers/{param:id}/${action}`,
+  });
+  const target = renderRequestTarget(
+    portainerBaseUrl,
+    request,
+    resolveCustomWidgetRequestValues(request, { endpointId }, { id: containerId }),
+  );
+  const response = await executeCustomWidgetRequest({
+    baseUrl: portainerBaseUrl,
+    targetUrl: target,
+    method: "POST",
+    networkScope: "private",
+    kind: "action",
+    auth: {
+      type: "apiKeyHeader",
+      headerName: "X-API-Key",
+      secrets: [{ kind: "apiKey", value: portainerApiKey }],
+    },
+  });
+  if (!response.ok && !(ignoreConflict && response.status === 304)) {
+    throw new Error(`Portainer ${action} returned HTTP ${response.status}`);
+  }
+}
diff --git a/packages/custom-widgets/src/core/ai-prompt.ts b/packages/custom-widgets/src/core/ai-prompt.ts
new file mode 100644
index 000000000..0a31a7f1c
--- /dev/null
+++ b/packages/custom-widgets/src/core/ai-prompt.ts
@@ -0,0 +1,259 @@
+import type { HomarrCustomWidgetV2 } from "./custom-jsx-schema";
+import { customJsxAuthoringCatalog } from "./component-catalog";
+import {
+  getCustomWidgetCredentialKeyRisk,
+  isHarmlessCustomWidgetCredentialSetting,
+  redactCustomWidgetCredentialLiterals,
+} from "./definition-security";
+import { customJsxExamples } from "./examples";
+
+export const CUSTOM_WIDGET_MANTINE_VERSION = customJsxAuthoringCatalog.mantineVersion;
+const CUSTOM_WIDGET_AI_PROMPT_LIMIT = 12_000;
+
+export const CUSTOM_WIDGET_FINAL_OUTPUT_INSTRUCTION =
+  "Return exactly one complete `json` fenced block containing the entire widget. Put the complete JSX source directly in the `template` string and JSON-escape it correctly. Do not include prose or additional code blocks.";
+
+const RECOMMENDED_COMPONENTS = [
+  "Stack",
+  "Group",
+  "SimpleGrid",
+  "Grid",
+  "Box",
+  "Center",
+  "Paper",
+  "Card",
+  "Card.Section",
+  "ScrollArea",
+  "Text",
+  "Title",
+  "Badge",
+  "Alert",
+  "Progress",
+  "RingProgress",
+  "ThemeIcon",
+  "Indicator",
+  "Avatar",
+  "Image",
+  "Divider",
+  "Skeleton",
+  "Loader",
+  "Table",
+  "Tabs",
+  "Tabs.List",
+  "Tabs.Tab",
+  "Tabs.Panel",
+  "Accordion",
+  "TextInput",
+  "NumberInput",
+  "Select",
+  "MultiSelect",
+  "Switch",
+  "Checkbox",
+  "Radio",
+  "Radio.Group",
+  "Radio.Card",
+  "Radio.Indicator",
+  "Slider",
+  "SegmentedControl",
+  "Button",
+  "ActionIcon",
+  "Tooltip",
+  "Popover",
+  "Calendar",
+  "AreaChart",
+  "BarChart",
+  "LineChart",
+  "DonutChart",
+] as const;
+
+const leanShape = `{
+  "$schema": "homarr-custom-widget-v2",
+  "name": "Widget name",
+  "description": "Optional summary",
+  "sources": {
+    "default": { "name": "API", "baseUrl": "https://api.example.com", "networkScope": "public", "auth": "none" }
+  },
+  "requests": {
+    "items": { "path": "/items/{option:category}", "query": { "limit": { "$option": "limit" } } },
+    "update": { "kind": "action", "method": "POST", "path": "/items/{param:id}", "invalidates": ["items"] }
+  },
+  "options": {
+    "category": { "label": "Category", "control": "text", "default": "all" },
+    "limit": { "label": "Result limit", "control": "number", "default": 20, "min": 1, "max": 100 }
+  },
+  "template": "<Stack><Text>{data.items?.name}</Text></Stack>"
+}`;
+
+function compactExample(index: number) {
+  const example = customJsxExamples[index];
+  if (!example) return "";
+  return `Example — ${example.title}:\n\n\`\`\`json\n${JSON.stringify(example.widget, null, 2)}\n\`\`\``;
+}
+
+const AUTHORING_PROMPT = `You are writing one safe Homarr Custom JSX v2 dashboard widget for Mantine ${CUSTOM_WIDGET_MANTINE_VERSION}.
+
+Manifest contract:
+${leanShape}
+
+Sources are keyed by name and must include "default". Auth is "none", "bearer", "basic", {"type":"apiKeyHeader","name":"X-Api-Key"}, or {"type":"apiKeyQuery","name":"api_key"}. Use the stable public API URL for public services and a clear suggested URL for self-hosted services; Homarr asks the installer for their own server URL. Never put credentials in the manifest.
+
+Requests are keyed by ID. Defaults are source "default", kind "query", method "GET", query trigger "load", inherited auth, and permission "view" for queries or "modify" for actions. Actions are always manual. DELETE is valid only for actions, requires full permission, and receives confirmation automatically. Use {option:name} or {"$option":"name"} for saved options. Use {param:name} or {"$param":"name"} only for invocation-time params supplied by SubFetch, ActionButton, or ToggleSwitch. Load queries cannot use params. Values and primitive types are inferred from references; do not declare parameters or option bindings. Paths and query values must be primitive; JSON bodies may bind structured options.
+
+Options are keyed by name. Every option has label, control, and default. Controls: text, textarea, number, switch, select, multiSelect, slider, date, time, color, icon, url, duration, timeZone, json. Select choices use \`"choices": [{"label":"...","value":"..."}]\`. Dynamic choices must use \`"choicesFrom": {"request":"requestId","itemsPath":"optional.path","valuePath":"id","labelPath":"name"}\`, never an object under \`choices\`. Options are configured outside the widget and read through \`options.name\`; a bound control writes only to \`inputs.name\` and never changes an option.
+
+JSX reads data.requestId, status.requestId, options.name, and temporary inputs.name. A status has loading, ok, status, statusText, and error. Use bind="search" on supported controls and inputs.search in params. SubFetch invokes a manual query. With trigger="manual", it renders its own load button; pass a card or image as triggerContent with triggerAriaLabel to make that content launch the request. Never author onClick or a fetch callback. Its child callback is (result, meta), where meta has ok, status, statusText, loading=false, and no error because SubFetch renders loading/error states itself. Use expression callbacks for map, filter, sort, and SubFetch. Do not use imports, hooks, refs, raw HTML, event callbacks, fetch, eval, bigint, npm packages, authored const blocks, IIFEs, or recursion. Regex is only for bounded string matching/replacement. Do not embed secrets.
+
+Hard syntax rule: never write \`=> {\` anywhere. Every callback must be one concise expression, for example \`items.map(item => <Card key={item.id}>...</Card>)\`. Inline derived values directly, even when that repeats a short expression. Never use an IIFE to create local variables or branch; use JSX ternaries instead. Callback parameter names must not shadow the reserved roots \`data\`, \`status\`, \`options\`, or \`inputs\`.
+
+Use only API routes grounded in the user request, documentation, or verified API notes. When a requested mutation is undocumented, omit it and explain the limitation through the widget design rather than inventing an endpoint.
+
+Recommended components: ${RECOMMENDED_COMPONENTS.join(", ")}. This list is not exhaustive. Standard Mantine compound names are encouraged. Runtime helpers: RefreshButton, SubFetch, ActionButton, ToggleSwitch, and <Icon name="tabler-icon-name" />.
+
+Make the result genuinely attractive: establish clear visual hierarchy, use deliberate spacing, restrained semantic color, responsive layouts, and theme-safe colors. Prefer one strong primary surface over excessive nested cards. Include useful loading, empty, error, and success states. Make narrow and wide tiles both work.
+
+Visual quality bar:
+- Give the widget a purposeful header with title, useful context, and its primary status or action.
+- When the data supports it, lead with 2–4 scannable summary metrics before detailed rows.
+- Use responsive SimpleGrid/Grid column objects and let long content wrap on narrow tiles.
+- Use theme tokens and semantic Mantine colors; avoid hard-coded light backgrounds and decorative gradients.
+
+${compactExample(0)}
+
+${compactExample(1)}
+
+Output one complete JSON manifest. Put the complete JSX directly in its template string so the user can copy one code block and paste it into Homarr once.`;
+
+export const CUSTOM_WIDGET_AUTHORING_PROMPT = AUTHORING_PROMPT;
+
+export const CUSTOM_WIDGET_MCP_AUTHORING_PROMPT = `Author one Homarr Custom JSX v2 widget at a time.
+
+Read the live schema and only the component resources needed for the design. Construct a credential-free widget, validate it, create a preview, test queries and simulated actions, visually inspect it, then create it. Configure deployment-specific source URLs and request credentials through Homarr when needed; never repeat plaintext. The live resources are authoritative for this Homarr release.
+
+Use the lean keyed sources, requests, and options contract. Bind saved values directly with $option and invocation values with $param. Load queries cannot use $param. Keep the design responsive, accessible, theme-safe, loading-aware, empty-aware, and error-aware.
+
+Use Workshop search/get/install when the user asks for an existing community widget. After installation, configure self-hosted source URLs and credentials with the dedicated source configuration tool or a secure user configuration request.`;
+
+export function buildCustomWidgetMcpPrompt(request?: string | null, documentationUrl?: string | null) {
+  const sections = [CUSTOM_WIDGET_MCP_AUTHORING_PROMPT];
+  if (documentationUrl) sections.push(`API documentation: ${redactUrl(documentationUrl)}`);
+  if (request?.trim()) sections.push(`User request: ${redactText(request.trim())}`);
+  return sections.join("\n\n");
+}
+
+export function buildCustomWidgetAiPrompt(
+  _jsonSchema?: unknown,
+  rawResponse?: string | null,
+  currentConfig?: Partial<HomarrCustomWidgetV2> | Record<string, unknown> | null,
+  request?: string | null,
+  documentationUrl?: string | null,
+) {
+  const sections = [
+    `Create this Homarr Custom JSX v2 widget:\n\n${truncatePromptText(redactText(request?.trim() || "Describe the widget you want to create."), 1_500)}`,
+  ];
+  if (documentationUrl) sections.push(`API documentation: ${truncatePromptText(redactUrl(documentationUrl), 500)}`);
+  sections.push(AUTHORING_PROMPT);
+
+  const optionalSections = [
+    ...(rawResponse ? [{ label: "Sample API response", content: redactResponse(rawResponse) }] : []),
+    ...(currentConfig
+      ? [{ label: "Current widget", content: JSON.stringify(redactValue(currentConfig), null, 2) }]
+      : []),
+  ];
+  for (const section of optionalSections) {
+    const remaining =
+      CUSTOM_WIDGET_AI_PROMPT_LIMIT - sections.join("\n\n").length - CUSTOM_WIDGET_FINAL_OUTPUT_INSTRUCTION.length - 8;
+    const formatted = formatBudgetedCodeSection(section.label, section.content, remaining);
+    if (formatted) sections.push(formatted);
+  }
+  const footer = `\n\n${CUSTOM_WIDGET_FINAL_OUTPUT_INSTRUCTION}`;
+  return `${truncatePromptText(sections.join("\n\n"), CUSTOM_WIDGET_AI_PROMPT_LIMIT - footer.length)}${footer}`;
+}
+
+function redactValue(value: unknown, path: Array<string | number> = []): unknown {
+  if (Array.isArray(value)) return value.map((entry, index) => redactValue(entry, [...path, index]));
+  if (value !== null && typeof value === "object")
+    return Object.fromEntries(
+      Object.entries(value).map(([entryKey, entry]) => {
+        const entryPath = [...path, entryKey];
+        const risk = getCustomWidgetCredentialKeyRisk(entryKey);
+        if (
+          risk === "strong" &&
+          !isSchemaAuthenticationControl(entryPath) &&
+          !isHarmlessCustomWidgetCredentialSetting(entry)
+        ) {
+          return [entryKey, "[REDACTED]"];
+        }
+        if (
+          risk === "ambiguous" &&
+          typeof entry === "string" &&
+          redactCustomWidgetCredentialLiterals(entry) !== entry
+        ) {
+          return [entryKey, "[REDACTED]"];
+        }
+        return [entryKey, redactValue(entry, entryPath)];
+      }),
+    );
+  if (typeof value === "string") {
+    const key = typeof path.at(-1) === "string" ? (path.at(-1) as string) : "";
+    if (["sources", "requests", "options"].includes(key)) {
+      try {
+        return redactValue(JSON.parse(value) as unknown, path);
+      } catch {
+        /* Keep invalid editor JSON useful. */
+      }
+    }
+    return key === "baseUrl" || key === "iconUrl"
+      ? redactCustomWidgetCredentialLiterals(redactUrl(value))
+      : redactText(value);
+  }
+  return value;
+}
+
+function redactResponse(value: string) {
+  try {
+    return JSON.stringify(redactValue(JSON.parse(value) as unknown), null, 2);
+  } catch {
+    return truncatePromptText(redactText(value), 1_500);
+  }
+}
+
+function redactUrl(value: string): string {
+  try {
+    const url = new URL(value);
+    url.username = "";
+    url.password = "";
+    url.search = "";
+    url.hash = "";
+    return url.toString();
+  } catch {
+    return "[REDACTED_URL]";
+  }
+}
+
+function redactText(value: string): string {
+  return redactCustomWidgetCredentialLiterals(
+    value.replace(/\bhttps?:\/\/[^\s"'<>]+/giu, (candidate) => redactUrl(candidate)),
+  );
+}
+
+function isSchemaAuthenticationControl(path: Array<string | number>): boolean {
+  return (
+    path.length === 3 &&
+    path[2] === "auth" &&
+    (path[0] === "sources" || path[0] === "requests") &&
+    typeof path[1] === "string"
+  );
+}
+
+function formatBudgetedCodeSection(label: string, content: string, budget: number): string | null {
+  const prefix = `${label}:\n\n\`\`\`json\n`;
+  const suffix = "\n```";
+  if (budget <= prefix.length + suffix.length + 80) return null;
+  return `${prefix}${truncatePromptText(content, budget - prefix.length - suffix.length)}${suffix}`;
+}
+
+function truncatePromptText(value: string, limit: number): string {
+  if (value.length <= limit) return value;
+  const marker = "\n... [content omitted to fit the prompt budget]";
+  return `${value.slice(0, Math.max(0, limit - marker.length))}${marker}`;
+}
diff --git a/packages/custom-widgets/src/core/authoring-resources.ts b/packages/custom-widgets/src/core/authoring-resources.ts
new file mode 100644
index 000000000..36667cfea
--- /dev/null
+++ b/packages/custom-widgets/src/core/authoring-resources.ts
@@ -0,0 +1,87 @@
+import { customJsxAuthoringCatalog, getCustomJsxComponentProps } from "./component-catalog";
+import { customJsxExamples } from "./examples";
+import { customJsxTablerIconNames } from "./tabler-icons";
+
+export const CUSTOM_WIDGET_SKILLS_SH_URL = "https://www.skills.sh/homarr-labs/homarr/homarr-custom-widget";
+export const CUSTOM_WIDGET_SKILL_SOURCE_URL =
+  "https://github.com/homarr-labs/homarr/tree/HEAD/.agents/skills/homarr-custom-widget";
+export const CUSTOM_WIDGET_SKILL_INSTALL_COMMAND =
+  "npx skills add https://github.com/homarr-labs/homarr --skill homarr-custom-widget";
+export const CUSTOM_WIDGET_SKILL_VERSION = "2.1.0";
+
+export const CUSTOM_WIDGET_SKILL_MD = `---
+name: homarr-custom-widget
+description: Author safe Homarr Custom JSX v2 widgets from API documentation.
+---
+
+# Homarr Custom Widget
+
+Author one widget at a time. When connected to Homarr, retrieve \`homarr://custom-widgets/schema\` and only the component resources needed for the design. The live resources are authoritative for the installed release.
+
+1. Read the API documentation.
+2. Create one credential-free widget with keyed \`sources\`, keyed \`requests\`, optional keyed \`options\`, and safe JSX \`template\`.
+3. Validate, preview, test queries and simulated actions, visually inspect, and iterate.
+4. Configure deployment-specific source URLs and request credentials through Homarr; never repeat plaintext.
+5. Save only after narrow/wide, light/dark, loading, empty, error, and success states work.
+
+Use \`{option:name}\` or \`$option\` for saved options. Use \`{param:name}\` or \`$param\` for values supplied by \`SubFetch\`, \`ActionButton\`, or \`ToggleSwitch\`. Load queries cannot use invocation parameters. Templates read \`data\`, \`status\`, \`options\`, and temporary \`inputs\`.
+
+\`SubFetch\` with \`trigger="manual"\` renders its own load button. Pass a card or image through \`triggerContent\` with \`triggerAriaLabel\` when that content should launch the request. Its callback is \`(result, meta)\`; never author \`onClick\` or a fetch callback.
+
+Use standard Mantine compound names and deliberate visual hierarchy, spacing, restrained semantic color, and responsive layouts. Avoid excessive nested cards.
+
+Do not use imports, hooks, refs, raw HTML, raw event callbacks, browser requests, arbitrary functions, eval, bigint, npm packages, authored statement blocks, IIFEs, or recursion. Do not pretend MCP tools exist in an offline chat session.
+
+To install an existing widget, use \`customWidget_workshopSearch\`, inspect it with \`customWidget_workshopGet\`, then use \`customWidget_workshopInstall\`. Configure each self-hosted source afterward with \`customWidget_sourceConfigure\`, or call \`customWidget_configurationRequestUser\` so the user can enter the server URL and credentials directly in Homarr.
+
+Preview-scoped configuration expires with the preview. To persist user-entered values for a new widget, create the widget first, request configuration for its definition ID, then create a final preview with that definition ID so Homarr loads the stored credentials.
+
+When this skill is installed from the repository, optional offline details are in \`references/schema.md\`, \`references/runtime.md\`, and \`references/security.md\`. MCP-only clients should use the live Homarr resources instead.
+`;
+
+export function getCustomWidgetSkill() {
+  return {
+    name: "homarr-custom-widget",
+    version: CUSTOM_WIDGET_SKILL_VERSION,
+    skillMd: CUSTOM_WIDGET_SKILL_MD,
+    skillsShUrl: CUSTOM_WIDGET_SKILLS_SH_URL,
+    sourceUrl: CUSTOM_WIDGET_SKILL_SOURCE_URL,
+    installCommand: CUSTOM_WIDGET_SKILL_INSTALL_COMMAND,
+  };
+}
+
+export function getCustomWidgetSkillContent() {
+  return CUSTOM_WIDGET_SKILL_MD;
+}
+
+export function getCustomWidgetComponentCatalog() {
+  return customJsxAuthoringCatalog;
+}
+
+export function getCustomWidgetComponent(name: string) {
+  const canonicalName = name === "Icon" ? "TablerIcon" : name;
+  const component = customJsxAuthoringCatalog.components.find((candidate) => candidate.name === canonicalName);
+  if (!component) return null;
+  return {
+    schemaVersion: customJsxAuthoringCatalog.schemaVersion,
+    mantineVersion: customJsxAuthoringCatalog.mantineVersion,
+    customWidgetVersion: customJsxAuthoringCatalog.customWidgetVersion,
+    name: component.name,
+    package: component.package,
+    category: component.category,
+    safety: component.safety,
+    description: component.description,
+    props: getCustomJsxComponentProps(canonicalName),
+    blockedProps: component.blockedProps,
+    bind: component.bind,
+    subcomponents: component.subcomponents,
+    accessibilityRequirements: component.accessibilityRequirements,
+    documentationUrl: component.documentationUrl,
+    knownValues: component.name === "TablerIcon" ? { name: customJsxTablerIconNames } : undefined,
+    deniedReason: component.deniedReason,
+  };
+}
+
+export function getCustomWidgetExample(name: string) {
+  return customJsxExamples.find((example) => example.id === name) ?? null;
+}
diff --git a/packages/custom-widgets/src/core/bundled-widgets.ts b/packages/custom-widgets/src/core/bundled-widgets.ts
new file mode 100644
index 000000000..042e5678b
--- /dev/null
+++ b/packages/custom-widgets/src/core/bundled-widgets.ts
@@ -0,0 +1,140 @@
+import type { HomarrCustomWidgetV2Input } from "./custom-jsx-schema";
+
+export interface BundledCustomWidget {
+  id: "seed-dog-facts" | "seed-currency-exchange" | "seed-jellyfin" | "seed-pokedex" | "seed-tautulli-activity";
+  widget: HomarrCustomWidgetV2Input;
+}
+
+export const BUNDLED_CUSTOM_WIDGETS: readonly BundledCustomWidget[] = [
+  {
+    id: "seed-dog-facts",
+    widget: {
+      $schema: "homarr-custom-widget-v2",
+      name: "Random Dog Fact",
+      description: "Displays a random fun fact about dogs.",
+      sources: { default: { name: "Dog API", baseUrl: "https://dogapi.dog", networkScope: "public", auth: "none" } },
+      requests: { fact: { path: "/api/v2/facts", cacheSeconds: 30 } },
+      options: {},
+      template: `<Stack gap="sm" p="sm" h="100%" justify="center">
+  <Group justify="space-between"><Text fw={700}>Dog fact</Text><RefreshButton /></Group>
+  {status.fact?.loading ? <Skeleton height={72} radius="md" /> : status.fact?.error ? <Alert color="red">{status.fact.error}</Alert> : <Text size="sm">{data.fact?.data?.[0]?.attributes?.body ?? "No dog fact was returned."}</Text>}
+</Stack>`,
+    },
+  },
+  {
+    id: "seed-currency-exchange",
+    widget: {
+      $schema: "homarr-custom-widget-v2",
+      name: "Currency Exchange",
+      description: "Converts an amount using European Central Bank exchange rates.",
+      sources: {
+        default: { name: "Frankfurter", baseUrl: "https://api.frankfurter.dev", networkScope: "public", auth: "none" },
+      },
+      requests: {
+        rates: {
+          path: "/v1/latest",
+          query: { from: { $option: "from" }, to: { $option: "to" }, amount: { $option: "amount" } },
+          cacheSeconds: 300,
+        },
+      },
+      options: {
+        from: { label: "From currency", control: "text", default: "JPY" },
+        to: {
+          label: "Target currencies",
+          description: "Comma-separated currency codes",
+          control: "text",
+          default: "EUR,USD",
+        },
+        amount: { label: "Amount", control: "number", default: 50, min: 0 },
+      },
+      template: `<Stack gap="sm" p="sm">
+  <Group justify="space-between"><Text fw={700}>{options.amount} {options.from}</Text><Badge>{data.rates?.date ?? "Latest"}</Badge></Group>
+  {status.rates?.loading ? <Skeleton height={80} radius="md" /> : status.rates?.error ? <Alert color="red">{status.rates.error}</Alert> : <SimpleGrid cols={{ base: 1, xs: 2 }}>{Object.entries(data.rates?.rates ?? {}).map(entry => <Paper key={entry[0]} withBorder p="sm"><Text size="xs" c="dimmed">{entry[0]}</Text><Text fw={700} size="xl">{entry[1]}</Text></Paper>)}</SimpleGrid>}
+</Stack>`,
+    },
+  },
+  {
+    id: "seed-jellyfin",
+    widget: {
+      $schema: "homarr-custom-widget-v2",
+      name: "Jellyfin Library",
+      description: "Counts movies, series, episodes, and songs in a Jellyfin library.",
+      iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons@master/svg/jellyfin.svg",
+      sources: {
+        default: {
+          name: "Jellyfin",
+          baseUrl: "http://jellyfin.local",
+          networkScope: "private",
+          auth: { type: "apiKeyHeader", name: "X-Emby-Token" },
+        },
+      },
+      requests: { counts: { path: "/Items/Counts", cacheSeconds: 60 } },
+      options: {},
+      template: `<Stack gap="sm" p="sm">
+  <Group justify="space-between"><Text fw={700}>Jellyfin library</Text><RefreshButton /></Group>
+  {status.counts?.loading ? <Skeleton height={96} radius="md" /> : status.counts?.error ? <Alert color="red">{status.counts.error}</Alert> : <SimpleGrid cols={{ base: 2, sm: 4 }}>{[{ label: "Movies", value: data.counts?.MovieCount }, { label: "Series", value: data.counts?.SeriesCount }, { label: "Episodes", value: data.counts?.EpisodeCount }, { label: "Songs", value: data.counts?.SongCount }].map(item => <Paper key={item.label} withBorder p="sm"><Text size="xs" c="dimmed">{item.label}</Text><Text fw={700} size="xl">{item.value ?? 0}</Text></Paper>)}</SimpleGrid>}
+</Stack>`,
+    },
+  },
+  {
+    id: "seed-pokedex",
+    widget: {
+      $schema: "homarr-custom-widget-v2",
+      name: "Pokédex",
+      description: "Browse Pokémon and open a responsive detail view.",
+      iconUrl: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/items/poke-ball.png",
+      sources: { default: { name: "PokeAPI", baseUrl: "https://pokeapi.co", networkScope: "public", auth: "none" } },
+      requests: {
+        pokemon: {
+          path: "/api/v2/pokemon",
+          query: { limit: { $option: "limit" }, offset: { $option: "offset" } },
+          cacheSeconds: 300,
+        },
+        detail: { path: "/api/v2/pokemon/{param:name}", trigger: "manual", cacheSeconds: 300 },
+      },
+      options: {
+        limit: { label: "Pokémon to load", control: "number", default: 24, min: 1, max: 100 },
+        offset: { label: "Start at Pokédex number", control: "number", default: 0, min: 0, advanced: true },
+        accent: { label: "Accent color", control: "color", default: "red" },
+      },
+      template: `<Stack gap="md" p="md" h="100%">
+  <Group justify="space-between" align="flex-start">
+    <Stack gap={2}><Group gap="xs"><ThemeIcon color={options.accent} variant="light" radius="xl"><Icon name="pokeball" /></ThemeIcon><Title order={3}>Pokédex</Title></Group><Text size="xs" c="dimmed">Explore species, types, abilities, and base stats</Text></Stack>
+    <Group gap="xs"><Badge color={options.accent} variant="light">{data.pokemon?.count?.toLocaleString() ?? "—"} species</Badge><RefreshButton /></Group>
+  </Group>
+  <TextInput bind="search" label="Filter loaded Pokémon" placeholder="Search by name…" />
+  {status.pokemon?.loading ? <Stack gap="xs">{[1, 2, 3, 4].map(item => <Skeleton key={item} height={82} radius="md" />)}</Stack> : status.pokemon?.error ? <Alert color="red" title="The Pokédex could not be loaded">{status.pokemon.error}</Alert> : (data.pokemon?.results ?? []).filter(pokemon => pokemon.name.toLowerCase().includes(String(inputs.search ?? "").toLowerCase())).length === 0 ? <Alert color="gray" title="No Pokémon found">Try another name or increase the result limit in widget options.</Alert> : <ScrollArea h={390} type="auto"><PaginatedList pageSize={8}>{(data.pokemon?.results ?? []).filter(pokemon => pokemon.name.toLowerCase().includes(String(inputs.search ?? "").toLowerCase())).map(pokemon => <SubFetch key={pokemon.name} requestId="detail" params={{ name: pokemon.name }} trigger="manual" triggerAriaLabel={"Open details for " + pokemon.name} loadingLabel="Loading Pokémon…" fallback={<Card withBorder radius="md" p="xs" mb="xs"><Skeleton height={64} radius="sm" /></Card>} triggerContent={<Card withBorder radius="md" p="xs" mb="xs"><Group wrap="nowrap" justify="space-between"><Group wrap="nowrap" gap="sm"><Image src={"https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/" + pokemon.url.split("/").slice(-2, -1)[0] + ".png"} alt={pokemon.name} w={64} h={64} fit="contain" radius="sm" fallbackSrc="https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/items/poke-ball.png" /><Stack gap={0}><Text fw={700} tt="capitalize">{pokemon.name}</Text><Text size="xs" c="dimmed">#{String(pokemon.url.split("/").slice(-2, -1)[0]).padStart(3, "0")}</Text></Stack></Group><Badge color={options.accent} variant="light">Details</Badge></Group></Card>}>{(detail) => <Card withBorder radius="md" p="sm" mb="xs"><Stack gap="sm"><Group align="flex-start" wrap="nowrap"><Image src={"https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/other/official-artwork/" + detail.id + ".png"} alt={detail.name} w={80} h={80} fit="contain" radius="md" fallbackSrc="https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/items/poke-ball.png" /><Stack gap="xs" style={{ flex: 1 }}><Group justify="space-between"><Text fw={750} size="lg" tt="capitalize">{detail.name}</Text><Group gap={6}>{(detail.types ?? []).map(type => <Badge key={type.type?.name} variant="light" tt="capitalize">{type.type?.name}</Badge>)}</Group></Group><Text size="xs" c="dimmed">Height {detail.height / 10} m · Weight {detail.weight / 10} kg</Text><Text size="xs"><Text span fw={600}>Abilities: </Text>{(detail.abilities ?? []).map(ability => ability.ability?.name?.replace("-", " ")).join(", ")}</Text></Stack></Group><Divider /><SimpleGrid cols={{ base: 1, xs: 2 }} spacing="xs">{(detail.stats ?? []).map(stat => <Stack key={stat.stat?.name} gap={3}><Group justify="space-between"><Text size="xs" tt="capitalize">{stat.stat?.name?.replace("-", " ")}</Text><Text size="xs" fw={700}>{stat.base_stat}</Text></Group><Progress value={Math.min(100, stat.base_stat / 2)} color={options.accent} size="sm" /></Stack>)}</SimpleGrid></Stack></Card>}</SubFetch>)}</PaginatedList></ScrollArea>}
+</Stack>`,
+    },
+  },
+  {
+    id: "seed-tautulli-activity",
+    widget: {
+      $schema: "homarr-custom-widget-v2",
+      name: "Tautulli Activity",
+      description: "Shows active Plex streams from Tautulli.",
+      sources: {
+        default: {
+          name: "Tautulli API",
+          baseUrl: "http://tautulli.local",
+          networkScope: "private",
+          auth: { type: "apiKeyQuery", name: "apikey" },
+        },
+      },
+      requests: { activity: { path: "/api/v2", query: { cmd: "get_activity" }, cacheSeconds: 15 } },
+      options: {},
+      template: `<Stack gap="md" p="md">
+  <Group justify="space-between"><Stack gap={2}><Text fw={700}>Tautulli Activity</Text><Text size="xs" c="dimmed">Live streaming sessions</Text></Stack><RefreshButton /></Group>
+  {status.activity?.loading ? <Stack gap="sm"><Skeleton height={80} radius="md" /><Skeleton height={80} radius="md" /></Stack> : status.activity?.error ? <Alert color="red" title="Could not load activity">{status.activity.error}</Alert> : (data.activity?.response?.data?.sessions ?? []).length === 0 ? <Alert color="gray" title="No active streams">All quiet.</Alert> : <>
+    <SimpleGrid cols={{ base: 2, xs: 4 }}>
+      <Paper withBorder p="sm" radius="md"><Text size="xs" c="dimmed">Active streams</Text><Text size="xl" fw={700}>{(data.activity?.response?.data?.sessions ?? []).length}</Text></Paper>
+      <Paper withBorder p="sm" radius="md"><Text size="xs" c="dimmed">Total bandwidth</Text><Text size="xl" fw={700}>{((data.activity?.response?.data?.sessions ?? []).reduce((sum, session) => sum + (session.bandwidth || 0), 0) / 1000000).toFixed(1)}<Text span size="xs" c="dimmed"> Mbps</Text></Text></Paper>
+      <Paper withBorder p="sm" radius="md"><Text size="xs" c="dimmed">Direct play</Text><Text size="xl" fw={700}>{(data.activity?.response?.data?.sessions ?? []).filter(session => session.transcode_decision === "direct play" || session.transcode_decision === "copy").length}</Text></Paper>
+      <Paper withBorder p="sm" radius="md"><Text size="xs" c="dimmed">Transcodes</Text><Text size="xl" fw={700}>{(data.activity?.response?.data?.sessions ?? []).filter(session => session.transcode_decision === "transcode").length}</Text></Paper>
+    </SimpleGrid>
+    <SimpleGrid cols={{ base: 1, sm: 2 }}>{(data.activity?.response?.data?.sessions ?? []).map(session => <Paper key={session.session_key} withBorder p="sm" radius="md"><Stack gap="xs"><Group justify="space-between"><Group gap="xs"><Text size="sm" fw={600}>{session.user}</Text><Badge variant="light" color={session.state === "playing" ? "green" : session.state === "paused" ? "yellow" : "orange"}>{session.state}</Badge></Group><Badge variant="light" color="gray">{session.player}</Badge></Group><Text size="sm" lineClamp={1}>{session.full_title}</Text><Progress value={session.progress_percent} size="sm" color="blue" /><Group justify="space-between"><Group gap="xs"><Badge variant="light" color={session.transcode_decision === "transcode" ? "red" : session.transcode_decision === "copy" ? "orange" : "teal"}>{session.transcode_decision}</Badge><Badge variant="light" color="gray">{session.bandwidth ? (session.bandwidth / 1000000).toFixed(1) + " Mbps" : "—"}</Badge></Group><Badge variant="outline" color={session.location === "lan" ? "blue" : "yellow"}>{session.location}</Badge></Group></Stack></Paper>)}</SimpleGrid>
+  </>}
+</Stack>`,
+    },
+  },
+] as const;
diff --git a/packages/custom-widgets/src/core/catalog.ts b/packages/custom-widgets/src/core/catalog.ts
new file mode 100644
index 000000000..af9649e56
--- /dev/null
+++ b/packages/custom-widgets/src/core/catalog.ts
@@ -0,0 +1,2 @@
+export * from "./component-catalog";
+export * from "./component-registry";
diff --git a/packages/custom-widgets/src/core/component-catalog-policy.ts b/packages/custom-widgets/src/core/component-catalog-policy.ts
new file mode 100644
index 000000000..58e2aab5e
--- /dev/null
+++ b/packages/custom-widgets/src/core/component-catalog-policy.ts
@@ -0,0 +1,55 @@
+const exactDeniedComponentReasons = new Map<string, string>([
+  ["Affix", "Escapes the widget layout boundary"],
+  ["ColorSchemeScript", "Writes global document state"],
+  ["Dialog", "Escapes the widget layout and focus boundary"],
+  ["FloatingWindow", "Creates a separate browser window"],
+  ["InlineStyles", "Writes unscoped style rules"],
+  ["RemoveScroll", "Changes global page scrolling"],
+  ["TableOfContents", "Observes headings and scrolling outside the widget root"],
+  ["Transition", "Requires an authored render callback"],
+  ["AreaGradient", "Low-level chart implementation helper"],
+  ["HiddenDatesInput", "Internal date-input primitive"],
+  ["PickerInputBase", "Internal date-input primitive"],
+]);
+
+const deniedComponentFamilies: ReadonlyArray<[RegExp, string]> = [
+  [
+    /^(?:AppShell|Drawer|FloatingWindow|Modal|RemoveScroll)/u,
+    "Escapes or replaces the widget layout, focus, scrolling, or overlay boundary",
+  ],
+  [
+    /^(?:Combobox|Input|Menubar|OptionsDropdown|PillsInput)/u,
+    "Low-level composition primitive that requires authored callbacks",
+  ],
+  [
+    /^(?:DatesProvider|DirectionProvider|HeadlessMantineProvider|MantineProvider|MantineThemeProvider)/u,
+    "Replaces a Homarr-owned provider boundary",
+  ],
+  [/(?:Context|Provider)$/u, "Exposes or replaces an internal React context boundary"],
+  [/(?:Portal)$/u, "Can render outside the widget root"],
+  [/^(?:FileButton|FileInput)/u, "Requests local file-system access"],
+  [/^(?:FocusTrap)/u, "Can capture focus outside the widget interaction flow"],
+];
+
+const blockedComponentProps: Readonly<Record<string, readonly { name: string; reason: string }[]>> = {
+  Tooltip: [{ name: "target", reason: "String targets can select elements outside the widget root" }],
+  DatePickerInput: pickerModalProps(),
+  DateTimePicker: pickerModalProps(),
+  MonthPickerInput: pickerModalProps(),
+  YearPickerInput: pickerModalProps(),
+};
+
+function pickerModalProps() {
+  return [
+    { name: "dropdownType", reason: "Modal picker mode escapes the widget overlay boundary" },
+    { name: "modalProps", reason: "Modal picker configuration escapes the widget overlay boundary" },
+  ] as const;
+}
+
+export function getCatalogDeniedComponentReason(name: string): string | undefined {
+  return exactDeniedComponentReasons.get(name) ?? deniedComponentFamilies.find(([pattern]) => pattern.test(name))?.[1];
+}
+
+export function getCatalogBlockedComponentProps(name: string) {
+  return blockedComponentProps[name] ?? [];
+}
diff --git a/packages/custom-widgets/src/core/component-catalog-types.ts b/packages/custom-widgets/src/core/component-catalog-types.ts
new file mode 100644
index 000000000..d7b1a77a7
--- /dev/null
+++ b/packages/custom-widgets/src/core/component-catalog-types.ts
@@ -0,0 +1,62 @@
+import type {
+  CustomJsxComponentCategory,
+  CustomJsxComponentPackage,
+  CustomJsxComponentSafety,
+} from "./component-types";
+
+export const CUSTOM_JSX_AUTHORING_CATALOG_SCHEMA_VERSION = 1 as const;
+export const CUSTOM_WIDGET_AUTHORING_VERSION = "2.0.0";
+
+export type CustomJsxPropSource = "global" | "component";
+export type CustomJsxLiteralValue = string | number | boolean | null;
+export type CustomJsxCatalogBindingType = "string" | "number" | "boolean" | "string[]" | "number[]";
+
+export interface CustomJsxPropDescriptor {
+  name: string;
+  typeRef: number;
+  required: boolean;
+  source: CustomJsxPropSource;
+  literalValues?: CustomJsxLiteralValue[];
+  description?: string;
+}
+
+export interface CustomJsxBindingDescriptor {
+  type: CustomJsxCatalogBindingType;
+  initialProp: "defaultValue" | "defaultChecked";
+}
+
+export interface CustomJsxBlockedCapability {
+  kind: "prop" | "prop-pattern";
+  name: string;
+  reason: string;
+}
+
+export interface CustomJsxComponentBlockedProp {
+  name: string;
+  reason: string;
+}
+
+export interface CustomJsxComponentApi {
+  name: string;
+  package: CustomJsxComponentPackage;
+  category: CustomJsxComponentCategory;
+  safety: CustomJsxComponentSafety;
+  description?: string;
+  documentationUrl: string;
+  props: CustomJsxPropDescriptor[];
+  blockedProps: CustomJsxComponentBlockedProp[];
+  subcomponents: string[];
+  bind?: CustomJsxBindingDescriptor;
+  accessibilityRequirements: string[];
+  deniedReason?: string;
+}
+
+export interface CustomJsxAuthoringCatalog {
+  schemaVersion: typeof CUSTOM_JSX_AUTHORING_CATALOG_SCHEMA_VERSION;
+  mantineVersion: string;
+  customWidgetVersion: string;
+  types: string[];
+  globalProps: CustomJsxPropDescriptor[];
+  blockedCapabilities: CustomJsxBlockedCapability[];
+  components: CustomJsxComponentApi[];
+}
diff --git a/packages/custom-widgets/src/core/component-catalog.generated.json b/packages/custom-widgets/src/core/component-catalog.generated.json
new file mode 100644
index 000000000..b302fa69a
--- /dev/null
+++ b/packages/custom-widgets/src/core/component-catalog.generated.json
@@ -0,0 +1 @@
+{"schemaVersion":1,"mantineVersion":"9.4.1","customWidgetVersion":"2.0.0","types":["\"\" | \"anonymous\" | \"use-credentials\"","\"-moz-initial\" | \"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | \"auto\" | \"fixed\"","\"-moz-initial\" | \"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | \"none\" | \"auto\" | \"all\" | \"fill\" | \"stroke\" | \"painted\" | \"visible\" | \"visibleFill\" | \"visiblePainted\" | \"visibleStroke\"","\"-moz-initial\" | \"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | \"none\" | \"block\" | \"inline\" | \"both\" | \"horizontal\" | \"vertical\"","\"-moz-initial\" | \"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | \"none\" | \"contain\" | \"cover\" | \"fill\" | \"scale-down\"","\"-moz-initial\" | \"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | \"wrap\" | \"nowrap\" | \"wrap-reverse\"","\"12h\" | \"24h\"","\"activity\" | \"display-none\"","\"all\" | \"parent\" | \"child\"","\"all\" | \"segment\"","\"always\" | \"hover\" | \"not-hover\" | \"never\"","\"area\" | \"radial\" | \"scatter\"","\"auto\" | \"scroll\" | \"always\" | \"hover\" | \"never\"","\"auto-fit\" | \"auto-fill\"","\"block\" | \"grid\"","\"both\" | \"rightSection\" | \"clear\"","\"bottom\" | \"top\"","\"bottom\" | \"top\" | \"baseline\" | \"middle\"","\"bottom\" | \"top\" | \"middle\"","\"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\" | \"bottom-center\" | \"top-center\" | \"middle-center\" | \"middle-end\" | \"middle-start\"","\"button\" | \"submit\" | \"reset\"","\"center\" | \"bottom\"","\"center\" | \"left\" | \"right\"","\"center\" | \"left\" | \"right\" | \"justify\" | \"char\"","\"center\" | \"side\" | \"merge\"","\"checkbox\" | \"radio\"","\"dashed\" | \"dotted\" | \"solid\"","\"default\" | \"gradient\"","\"default\" | \"responsive\"","\"default\" | \"stacked\" | \"percent\" | \"split\"","\"default\" | \"stacked\" | \"percent\" | \"waterfall\"","\"div\" | \"label\"","\"end\" | \"start\"","\"filled\" | \"light\"","\"fixed\" | \"absolute\"","\"hex\" | \"hexa\" | \"rgba\" | \"rgb\" | \"hsl\" | \"hsla\"","\"horizontal\" | \"vertical\"","\"hover\" | \"click\" | \"click-hover\"","\"inherit\" | \"auto\" | \"baseline\" | \"before-edge\" | \"text-before-edge\" | \"middle\" | \"central\" | \"after-edge\" | \"text-after-edge\" | \"ideographic\" | \"alphabetic\" | \"hanging\" | \"mathematical\"","\"inherit\" | \"auto\" | \"sRGB\" | \"linearRGB\"","\"inherit\" | \"auto\" | \"text-before-edge\" | \"middle\" | \"central\" | \"text-after-edge\" | \"ideographic\" | \"alphabetic\" | \"hanging\" | \"mathematical\" | \"use-script\" | \"no-change\" | \"reset-size\"","\"inherit\" | \"end\" | \"start\" | \"middle\"","\"inherit\" | \"nonzero\" | \"evenodd\"","\"inherit\" | \"round\" | \"butt\" | \"square\"","\"inherit\" | \"round\" | \"miter\" | \"bevel\"","\"initial\" | \"medial\" | \"terminal\" | \"isolated\"","\"inside\" | \"outside\"","\"left\" | \"right\"","\"left\" | \"right\" | \"bottom\" | \"top\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\"","\"left\" | \"right\" | \"inside\"","\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"","\"media\" | \"container\"","\"month\" | \"year\" | \"decade\"","\"native\" | \"scrollarea\"","\"none\" | \"all\" | \"rows\" | \"groups\" | \"columns\"","\"none\" | \"all\" | \"with-indicators\"","\"none\" | \"ascending\" | \"descending\" | \"other\"","\"none\" | \"inline\" | \"list\" | \"both\"","\"none\" | \"strict\" | \"blur\"","\"none\" | \"sum\"","\"none\" | \"thousand\" | \"lakh\" | \"wan\"","\"none\" | \"x\" | \"y\" | \"xy\"","\"number\" | RegExp | \"alphanumeric\"","\"off\" | \"assertive\" | \"polite\"","\"off\" | \"on\"","\"ordered\" | \"unordered\"","\"right-to-left\" | \"left-to-right\"","\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"","\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\"","\"step\" | \"bump\" | \"linear\" | \"natural\" | \"monotone\" | \"stepBefore\" | \"stepAfter\"","\"stepInactive\" | \"stepProgress\" | \"stepCompleted\"","\"sum\" | \"replace\"","\"td\" | \"th\"","\"text\" | \"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text additions\" | \"text removals\"","\"text\" | \"tel\" | \"password\"","\"time\" | \"duration\"","\"up\" | \"down\"","\"value\" | \"name\" | \"percent\"","\"viewport\"","\"wrap\" | \"nowrap\" | \"balance\" | \"pretty\" | \"stable\"","\"x\" | \"y\"","\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"","\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | (string & {})","\"yes\" | \"no\"","'Text' | 'Title' | 'Badge' | 'Code' | 'Image'","'auto' | 'manual'","'json' | 'text'","'xs' | 'sm' | 'md' | 'lg' | 'xl'","(\"input\" | \"label\" | \"description\" | \"error\")[]","(\"next\" | \"previous\" | \"level\")[]","(ActionIconProps & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>)","(CartesianChartProps<unknown> & { ref?: React.Ref<SVGSVGElement>; })","(CloseButtonProps & ElementProps<\"button\"> & DataAttributes)","(CloseButtonProps & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>)","(ElementProps<\"button\"> & DataAttributes)","(InputDescriptionProps & DataAttributes)","(InputErrorProps & DataAttributes)","(InputLabelProps & DataAttributes)","(InputSuccessProps & DataAttributes)","(Multiple extends true ? Value[] : Value | null)","(OverlayProps & ElementProps<\"div\">)","(PolarChartProps<unknown> & { ref?: React.Ref<SVGSVGElement>; })","(React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & DataAttributes)","(React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & DataAttributes)","(React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & DataAttributes)","(React.ClassAttributes<HTMLSelectElement> & React.SelectHTMLAttributes<HTMLSelectElement> & DataAttributes)","(Type extends \"default\" ? boolean : never)","(Type extends \"range\" ? boolean : never)","(Value | SegmentedControlItem<Value>)[]","(number | null)[]","(string & {}) | \"bars\" | \"dots\" | \"oval\"","(string & {}) | \"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\"","(string & {}) | AccordionVariant","(string & {}) | ActionIconVariant","(string & {}) | AlertVariant","(string & {}) | AvatarVariant","(string & {}) | BadgeVariant","(string & {}) | ButtonVariant","(string & {}) | CheckboxIndicatorVariant","(string & {}) | CheckboxVariant","(string & {}) | ChipVariant","(string & {}) | CloseButtonVariant","(string & {}) | DividerVariant","(string & {}) | FieldsetVariant","(string & {}) | InputVariant","(string & {}) | NavLinkVariant","(string & {}) | PillVariant","(string & {}) | RadioIndicatorVariant","(string & {}) | RadioVariant","(string & {}) | TableVariant","(string & {}) | TabsVariant","(string & {}) | TextVariant","(string & {}) | ThemeIconVariant","0 | -1","0 | 2 | 3 | 4 | 5 | 6 | 1","1 | 2 | 3 | 4 | 5 | 6","2 | 3 | 4 | 5 | 6","2 | 3 | 4 | 5 | 6 | 1","AccordionValue<Multiple>","AreaChartSeries[]","AriaRole","BarChartSeries[]","BarsListBarData[]","BoxMod","BubbleChartDataKey","ButtonSize","CSSProperties","CalendarAriaLabels","ChartData","ChartReferenceLineProps[]","ChartSeries[]","ComboboxData<Value>","ComboboxGenericData","ComboboxProps","ComboboxStringGroupData","CompositeChartSeries[]","DatePickerPreset<\"default\">[]","DatePickerPreset<Type>[]","DatePickerType | Type","DatePickerValue<Type, DateValue>","DateValue","DayOfWeek[]","DefaultMantineColor","DefaultMantineColor | \"initials\"","DefaultMantineColor[]","DonutChartCell[]","FlatTreeLineState[]","FunnelChartCell[]","GridBreakpoints","HTMLElement | null","HTMLInputAutoCompleteAttribute","HTMLInputTypeAttribute","InputClearButtonProps","Key | null","LineChartGradientStop[]","LineChartSeries[]","LoaderProps","MantineBreakpoint","MantineChartDotProps","MantineGradient","MantineRadius","MantineShadow","MantineSize | (string & {})","MantineSpacing","Mode","MonthPickerPreset<Type>[]","Multiple","NumberInputValue<T>","Omit<AreaProps<any, any>, \"data\" | \"ref\" | \"dataKey\">","Omit<CartesianGridProps, \"ref\">","Omit<LegendProps, \"ref\">","Omit<PolarAngleAxisProps, \"ref\">","Omit<PolarGridProps, \"ref\">","Omit<PolarRadiusAxisProps, \"ref\">","Omit<RadialBarProps, \"ref\">","Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"value\">","Omit<TimePickerProps, \"value\" | \"defaultValue\">","Omit<TooltipProps<any, any>, \"ref\">","Omit<XAxisProps, \"ref\">","Omit<YAxisProps, \"ref\">","Omit<ZAxisProps<any, any>, \"ref\">","OverlayProps","Partial<Omit<FunnelProps, \"ref\">>","Partial<Omit<PieProps, \"ref\">>","Partial<Omit<PopoverProps, \"children\">>","Partial<Omit<RechartsSankeyProps, \"data\" | \"ref\">>","Partial<Omit<RechartsTreemapProps<TreemapDataType, any>, \"data\" | \"ref\" | \"dataKey\">>","Partial<Omit<ScatterProps, \"ref\">>","Partial<Omit<TransitionProps, \"mounted\">>","Partial<Record<\"actions\", CSSProperties>>","Partial<Record<\"col\", CSSProperties>>","Partial<Record<\"control\", CSSProperties>>","Partial<Record<\"description\", CSSProperties>>","Partial<Record<\"divider\", CSSProperties>>","Partial<Record<\"dots\", CSSProperties>>","Partial<Record<\"dropdown\", CSSProperties>>","Partial<Record<\"indicator\", CSSProperties>>","Partial<Record<\"item\", CSSProperties>>","Partial<Record<\"itemLabel\", CSSProperties>>","Partial<Record<\"itemValue\", CSSProperties>>","Partial<Record<\"label\", CSSProperties>>","Partial<Record<\"list\", CSSProperties>>","Partial<Record<\"pane\", CSSProperties>>","Partial<Record<\"panel\", CSSProperties>>","Partial<Record<\"section\", CSSProperties>>","Partial<Record<\"title\", CSSProperties>>","Partial<Record<(string & {}) | \"bars\" | \"dots\" | \"oval\", MantineLoaderComponent>>","Partial<Record<AccordionControlStylesNames, CSSProperties>>","Partial<Record<AccordionPanelStylesNames, CSSProperties>>","Partial<Record<ListItemStylesNames, CSSProperties>>","Partial<Record<MenuCheckboxItemStylesNames, CSSProperties>>","Partial<Record<MenuItemStylesNames, CSSProperties>>","Partial<Record<MenuRadioItemStylesNames, CSSProperties>>","Partial<Record<MenuSubItemStylesNames, CSSProperties>>","Partial<Record<PopoverStylesNames, CSSProperties>>","Partial<Record<StepperStepStylesNames, CSSProperties>>","Partial<Record<TabsTabStylesNames, CSSProperties>>","Partial<Record<TimelineItemStylesNames, CSSProperties>>","Partial<Record<string, React.CSSProperties>>","Partial<TooltipFloatingProps>","PieChartCell[]","PopoverMiddlewares","PopoverProps","PopoverWidth","Property.AlignItems","Property.BackgroundColor","Property.BorderRadius<string | number>","Property.Height<string | number>","Property.JustifyContent","Property.ListStyleType","Property.MaxHeight<string | number>","Property.MinWidth<string | number>","Property.Overflow","Property.OverscrollBehavior","Property.Width<string | number>","RadarChartSeries[]","RangeSliderValue","React.CSSProperties","React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>","React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>","React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>","React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>","React.HTMLInputTypeAttribute","React.ReactNode","ReactNode","Record<string, RegExp>","Record<string, any>","Record<string, any>[]","Record<string, any>[] | readonly Record<string, any>[]","Record<string, number>","Record<string, string | number | boolean>","RingProgressSection[]","SankeyChartData","ScatterChartSeries[]","ScrollAreaProps","SimpleGridProps","SliderMark[]","SparklineTrendColors","SplitterPaneSize","SplitterPaneSize[]","SplitterStep","StyleProp<\"text\" | (string & {}) | \"monospace\" | \"heading\">","StyleProp<ColSpan>","StyleProp<DefaultMantineColor>","StyleProp<MantineSpacing>","StyleProp<Property.AlignItems>","StyleProp<Property.AlignSelf>","StyleProp<Property.BackgroundAttachment>","StyleProp<Property.BackgroundPosition<string | number>>","StyleProp<Property.BackgroundRepeat>","StyleProp<Property.BackgroundSize<string | number>>","StyleProp<Property.Border<string | number>>","StyleProp<Property.Display>","StyleProp<Property.Flex<string | number>>","StyleProp<Property.FlexDirection>","StyleProp<Property.FlexWrap>","StyleProp<Property.FontStyle>","StyleProp<Property.FontWeight>","StyleProp<Property.Height<string | number>>","StyleProp<Property.JustifyContent>","StyleProp<Property.LetterSpacing<string | number>>","StyleProp<Property.MaxHeight<string | number>>","StyleProp<Property.MaxWidth<string | number>>","StyleProp<Property.MinHeight<string | number>>","StyleProp<Property.MinWidth<string | number>>","StyleProp<Property.Opacity>","StyleProp<Property.TextAlign>","StyleProp<Property.TextDecoration<string | number>>","StyleProp<Property.TextTransform>","StyleProp<Property.Width<string | number>>","StyleProp<number | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | MantineFontSize>","StyleProp<number | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | MantineLineHeight>","StyleProp<number>","T","T[]","TableData","TimePickerAmPmLabels","TimePickerPresets","TitleSize","TooltipMiddlewares","TreeNodeData","TreeNodeData[]","TreeSelectChevronAriaLabels","TreeSelectValue<Mode>","TreemapData[]","Type","Type | DatePickerType","UseTreeReturnType","Value","Value | null","Value[]","WrapperProps","YearPickerPreset<Type>[]","[DefaultMantineColor, DefaultMantineColor]","[number, number]","[string, string]","boolean","boolean | SafePolygonOptions","boolean | string","boolean[]","false | \"x\" | \"y\" | \"xy\"","false | true","false | true | \"auto\" | \"true\" | \"false\"","false | true | \"dialog\" | \"menu\" | \"grid\" | \"true\" | \"false\" | \"listbox\" | \"tree\"","false | true | \"end\" | \"start\"","false | true | \"odd\" | \"even\"","false | true | \"time\" | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\"","false | true | \"true\" | \"false\"","false | true | \"true\" | \"false\" | \"grammar\" | \"spelling\"","false | true | \"true\" | \"false\" | \"mixed\"","false | true | \"user\" | \"environment\"","false | true | \"x\" | \"y\" | \"present\"","null | string","number","number | FloatingAxesOffsets","number | MantineSize | (string & {})","number | MantineSize | (string & {}) | \"input-xs\" | \"input-sm\" | \"input-md\" | \"input-lg\" | \"input-xl\"","number | { x: number; y: number; }","readonly Record<string, any>[]","string","string | (string & {})","string | (string | RegExp)[]","string | Date","string | Date | null","string | false | true","string | number","string | number | readonly string[]","string | string[] | HighlightTerm[]","string[]","undefined","unknown","{ area?: Record<string, any>; legend?: Record<string, any>; grid?: Record<string, any>; root?: Record<string, any>; ... 14 more ...; tooltipBody?: Record<...>; }","{ area?: Record<string, any>; legend?: Record<string, any>; line?: Record<string, any>; grid?: Record<string, any>; ... 16 more ...; tooltipBody?: Record<...>; }","{ body?: Record<string, any>; input?: Record<string, any>; label?: Record<string, any>; root?: Record<string, any>; ... 4 more ...; labelWrapper?: Record<...>; }","{ body?: Record<string, any>; input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; ... 19 more ...; swatch?: Record<...>; }","{ body?: Record<string, any>; input?: Record<string, any>; label?: Record<string, any>; track?: Record<string, any>; ... 5 more ...; trackLabel?: Record<...>; }","{ body?: Record<string, any>; label?: Record<string, any>; root?: Record<string, any>; icon?: Record<string, any>; ... 4 more ...; labelWrapper?: Record<...>; }","{ body?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; children?: Record<string, any>; root?: Record<...>; chevron?: Record<...>; description?: Record<...>; collapse?: Record<...>; } | u...","{ body?: Record<string, any>; label?: Record<string, any>; title?: Record<string, any>; root?: Record<string, any>; icon?: Record<...>; wrapper?: Record<...>; message?: Record<...>; closeButton?: Record<...>; }","{ body?: Record<string, any>; slider?: Record<string, any>; wrapper?: Record<string, any>; sliderOverlay?: Record<string, any>; ... 6 more ...; swatch?: Record<...>; }","{ body?: Record<string, any>; title?: Record<string, any>; root?: Record<string, any>; description?: Record<string, any>; indicator?: Record<...>; actions?: Record<...>; }","{ body?: Record<string, any>; title?: Record<string, any>; root?: Record<string, any>; icon?: Record<string, any>; loader?: Record<...>; closeButton?: Record<...>; description?: Record<...>; }","{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 12 more ...; monthPickerRoot?: Record<...>; }","{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 4 more ...; monthsListControl?: Record<...>; }","{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 4 more ...; yearsListRow?: Record<...>; }","{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 5 more ...; monthsListControl?: Record<...>; }","{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 5 more ...; yearsListRow?: Record<...>; }","{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; ... 8 more ...; yearPickerRoot?: Record<...>; }","{ calendarHeader?: Record<string, any>; calendarHeaderControl?: Record<string, any>; calendarHeaderLevel?: Record<string, any>; calendarHeaderControlIcon?: Record<...>; }","{ caption?: Record<string, any>; table?: Record<string, any>; tbody?: Record<string, any>; td?: Record<string, any>; tfoot?: Record<...>; th?: Record<...>; thead?: Record<...>; tr?: Record<...>; }","{ card?: Record<string, any>; }","{ cite?: Record<string, any>; root?: Record<string, any>; icon?: Record<string, any>; }","{ col?: Record<string, any>; root?: Record<string, any>; inner?: Record<string, any>; container?: Record<string, any>; }","{ content?: Record<string, any>; root?: Record<string, any>; chevron?: Record<string, any>; control?: Record<string, any>; container?: Record<...>; }","{ content?: Record<string, any>; root?: Record<string, any>; control?: Record<string, any>; }","{ content?: Record<string, any>; root?: Record<string, any>; group?: Record<string, any>; }","{ content?: Record<string, any>; root?: Record<string, any>; scrollbar?: Record<string, any>; thumb?: Record<string, any>; viewport?: Record<...>; corner?: Record<...>; }","{ content?: Record<string, any>; root?: Record<string, any>; separator?: Record<string, any>; step?: Record<string, any>; ... 9 more ...; stepDescription?: Record<...>; }","{ day?: Record<string, any>; }","{ dropdown?: Record<string, any>; overlay?: Record<string, any>; arrow?: Record<string, any>; }","{ group?: Record<string, any>; }","{ groupSection?: Record<string, any>; }","{ hover: boolean; focus: boolean; touch: boolean; }","{ icon?: Record<string, any>; indicator?: Record<string, any>; }","{ image?: Record<string, any>; root?: Record<string, any>; placeholder?: Record<string, any>; }","{ input?: Record<string, any>; label?: Record<string, any>; option?: Record<string, any>; section?: Record<string, any>; ... 11 more ...; groupLabel?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; option?: Record<string, any>; section?: Record<string, any>; ... 14 more ...; inputField?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; root?: Record<string, any>; control?: Record<string, any>; indicator?: Record<...>; innerLabel?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; root?: Record<string, any>; iconWrapper?: Record<string, any>; checkIcon?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; root?: Record<string, any>; starSymbol?: Record<string, any>; symbolBody?: Record<...>; symbolGroup?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 17 more ...; presetControl?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 18 more ...; yearPickerRoot?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 22 more ...; monthPickerRoot?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 30 more ...; presetButton?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 31 more ...; datePickerRoot?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 37 more ...; rangeInfo?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 5 more ...; bottomSection?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 7 more ...; controls?: Record<...>; }","{ input?: Record<string, any>; label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; ... 7 more ...; innerInput?: Record<...>; }","{ input?: Record<string, any>; root?: Record<string, any>; pinInput?: Record<string, any>; }","{ input?: Record<string, any>; section?: Record<string, any>; wrapper?: Record<string, any>; bottomSection?: Record<string, any>; }","{ label?: Record<string, any>; content?: Record<string, any>; root?: Record<string, any>; item?: Record<string, any>; ... 4 more ...; control?: Record<...>; }","{ label?: Record<string, any>; legend?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; ... 9 more ...; tooltipBody?: Record<...>; }","{ label?: Record<string, any>; mark?: Record<string, any>; root?: Record<string, any>; thumb?: Record<string, any>; marks?: Record<...>; }","{ label?: Record<string, any>; mark?: Record<string, any>; track?: Record<string, any>; root?: Record<string, any>; ... 4 more ...; markLabel?: Record<...>; }","{ label?: Record<string, any>; root?: Record<string, any>; control?: Record<string, any>; dots?: Record<string, any>; items?: Record<...>; }","{ label?: Record<string, any>; root?: Record<string, any>; description?: Record<string, any>; error?: Record<string, any>; success?: Record<...>; required?: Record<...>; }","{ label?: Record<string, any>; root?: Record<string, any>; node?: Record<string, any>; subtree?: Record<string, any>; }","{ label?: Record<string, any>; root?: Record<string, any>; remove?: Record<string, any>; }","{ label?: Record<string, any>; root?: Record<string, any>; }","{ label?: Record<string, any>; search?: Record<string, any>; item?: Record<string, any>; chevron?: Record<string, any>; ... 6 more ...; divider?: Record<...>; }","{ label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; loader?: Record<string, any>; inner?: Record<...>; }","{ label?: Record<string, any>; section?: Record<string, any>; root?: Record<string, any>; }","{ label?: Record<string, any>; svg?: Record<string, any>; root?: Record<string, any>; curve?: Record<string, any>; }","{ label?: Record<string, any>; svg?: Record<string, any>; root?: Record<string, any>; emptySegment?: Record<string, any>; filledSegment?: Record<...>; }","{ legend?: Record<string, any>; grid?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; ... 14 more ...; scatter?: Record<...>; }","{ legend?: Record<string, any>; grid?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; ... 14 more ...; tooltipBody?: Record<...>; }","{ legend?: Record<string, any>; legendItem?: Record<string, any>; legendItemColor?: Record<string, any>; legendItemName?: Record<...>; }","{ legend?: Record<string, any>; line?: Record<string, any>; grid?: Record<string, any>; root?: Record<string, any>; ... 14 more ...; tooltipBody?: Record<...>; }","{ legend?: Record<string, any>; rect?: Record<string, any>; root?: Record<string, any>; weekdayLabel?: Record<string, any>; monthLabel?: Record<...>; legendLabel?: Record<...>; legendRect?: Record<...>; }","{ legend?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; container?: Record<string, any>; ... 9 more ...; tooltipBody?: Record<...>; }","{ legend?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; legendItem?: Record<string, any>; ... 8 more ...; tooltipBody?: Record<...>; }","{ legend?: Record<string, any>; root?: Record<string, any>; tooltip?: Record<string, any>; legendItem?: Record<string, any>; legendItemColor?: Record<...>; legendItemName?: Record<...>; }","{ legend?: Record<string, any>; root?: Record<string, any>; }","{ levelsGroup?: Record<string, any>; }","{ month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; monthRow?: Record<string, any>; ... 17 more ...; yearsListRow?: Record<...>; }","{ month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; monthRow?: Record<string, any>; ... 20 more ...; datePickerRoot?: Record<...>; }","{ month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; monthRow?: Record<string, any>; ... 4 more ...; day?: Record<...>; }","{ month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; monthRow?: Record<string, any>; ... 8 more ...; calendarHeaderControlIcon?: Record<...>; }","{ month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; monthRow?: Record<string, any>; ... 9 more ...; levelsGroup?: Record<...>; }","{ monthsList?: Record<string, any>; monthsListCell?: Record<string, any>; monthsListRow?: Record<string, any>; monthsListControl?: Record<...>; }","{ pickerControl?: Record<string, any>; }","{ root?: Record<string, any>; alphaOverlay?: Record<string, any>; shadowOverlay?: Record<string, any>; colorOverlay?: Record<...>; childrenOverlay?: Record<...>; }","{ root?: Record<string, any>; bar?: Record<string, any>; barLabel?: Record<string, any>; barValue?: Record<string, any>; labelsRow?: Record<...>; }","{ root?: Record<string, any>; burger?: Record<string, any>; }","{ root?: Record<string, any>; container?: Record<string, any>; }","{ root?: Record<string, any>; control?: Record<string, any>; day?: Record<string, any>; days?: Record<string, any>; dayMonth?: Record<...>; dayNumber?: Record<...>; }","{ root?: Record<string, any>; control?: Record<string, any>; simpleGrid?: Record<string, any>; }","{ root?: Record<string, any>; digit?: Record<string, any>; digitColumn?: Record<string, any>; char?: Record<string, any>; }","{ root?: Record<string, any>; icon?: Record<string, any>; loader?: Record<string, any>; }","{ root?: Record<string, any>; indicator?: Record<string, any>; }","{ root?: Record<string, any>; item?: Record<string, any>; itemLabel?: Record<string, any>; itemValue?: Record<string, any>; }","{ root?: Record<string, any>; item?: Record<string, any>; itemLabel?: Record<string, any>; itemWrapper?: Record<string, any>; itemIcon?: Record<...>; }","{ root?: Record<string, any>; item?: Record<string, any>; itemTitle?: Record<string, any>; itemBody?: Record<string, any>; itemContent?: Record<...>; itemBullet?: Record<...>; }","{ root?: Record<string, any>; loader?: Record<string, any>; overlay?: Record<string, any>; }","{ root?: Record<string, any>; month?: Record<string, any>; weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; ... 27 more ...; rangeInfo?: Record<...>; }","{ root?: Record<string, any>; panel?: Record<string, any>; list?: Record<string, any>; tab?: Record<string, any>; tabSection?: Record<...>; tabLabel?: Record<...>; }","{ root?: Record<string, any>; separator?: Record<string, any>; breadcrumb?: Record<string, any>; }","{ root?: Record<string, any>; thumb?: Record<string, any>; handle?: Record<string, any>; pane?: Record<string, any>; }","{ root?: Record<string, any>; tooltip?: Record<string, any>; axis?: Record<string, any>; }","{ root?: Record<string, any>; tooltip?: Record<string, any>; tooltipItem?: Record<string, any>; tooltipItemBody?: Record<...>; ... 4 more ...; tooltipBody?: Record<...>; }","{ root?: Record<string, any>; }","{ scrollContainer?: Record<string, any>; scrollContainerInner?: Record<string, any>; }","{ section?: Record<string, any>; root?: Record<string, any>; }","{ slider?: Record<string, any>; sliderOverlay?: Record<string, any>; thumb?: Record<string, any>; }","{ tooltip?: Record<string, any>; arrow?: Record<string, any>; }","{ tooltip?: Record<string, any>; tooltipItem?: Record<string, any>; tooltipItemBody?: Record<string, any>; tooltipItemColor?: Record<...>; tooltipItemName?: Record<...>; tooltipItemData?: Record<...>; tooltipLabel?: Record<...>; tool...","{ value: number; label?: string; }[]","{ weekday?: Record<string, any>; weekdaysRow?: Record<string, any>; }","{ x: string; y: string; }","{ x?: number; y?: number; }","{ x?: string; y?: string; }","{ yearsListControl?: Record<string, any>; yearsList?: Record<string, any>; yearsListCell?: Record<string, any>; yearsListRow?: Record<...>; }"],"globalProps":[{"name":"abbr","required":false,"source":"global","typeRef":359},{"name":"about","required":false,"source":"global","typeRef":359},{"name":"accentHeight","required":false,"source":"global","typeRef":365},{"name":"accept","required":false,"source":"global","typeRef":359},{"name":"accessKey","required":false,"source":"global","typeRef":359},{"name":"accumulate","required":false,"source":"global","literalValues":["none","sum"],"typeRef":59},{"name":"additive","required":false,"source":"global","literalValues":["replace","sum"],"typeRef":71},{"name":"align","required":false,"source":"global","literalValues":["center","char","justify","left","right"],"typeRef":22},{"name":"alignmentBaseline","required":false,"source":"global","literalValues":["after-edge","alphabetic","auto","baseline","before-edge","central","hanging","ideographic","inherit","mathematical","middle","text-after-edge","text-before-edge"],"typeRef":38},{"name":"allowReorder","required":false,"source":"global","literalValues":["no","yes"],"typeRef":83},{"name":"alphabetic","required":false,"source":"global","typeRef":365},{"name":"alt","required":false,"source":"global","typeRef":359},{"name":"amplitude","required":false,"source":"global","typeRef":365},{"name":"arabicForm","required":false,"source":"global","literalValues":["initial","isolated","medial","terminal"],"typeRef":45},{"name":"aria-activedescendant","required":false,"source":"global","description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","typeRef":359},{"name":"aria-atomic","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","typeRef":347},{"name":"aria-autocomplete","required":false,"source":"global","literalValues":["both","inline","list","none"],"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.","typeRef":57},{"name":"aria-braillelabel","required":false,"source":"global","description":"Defines a string value that labels the current element, which is intended to be converted into Braille.","typeRef":359},{"name":"aria-brailleroledescription","required":false,"source":"global","description":"Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.","typeRef":359},{"name":"aria-busy","required":false,"source":"global","literalValues":[false,"false",true,"true"],"typeRef":347},{"name":"aria-checked","required":false,"source":"global","literalValues":[false,"false","mixed",true,"true"],"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.","typeRef":349},{"name":"aria-colcount","required":false,"source":"global","description":"Defines the total number of columns in a table, grid, or treegrid.","typeRef":353},{"name":"aria-colindex","required":false,"source":"global","description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.","typeRef":353},{"name":"aria-colindextext","required":false,"source":"global","description":"Defines a human readable text alternative of aria-colindex.","typeRef":359},{"name":"aria-colspan","required":false,"source":"global","description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.","typeRef":353},{"name":"aria-controls","required":false,"source":"global","description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.","typeRef":359},{"name":"aria-current","required":false,"source":"global","literalValues":["date",false,"false","location","page","step","time",true,"true"],"description":"Indicates the element that represents the current item within a container or set of related elements.","typeRef":346},{"name":"aria-describedby","required":false,"source":"global","description":"Identifies the element (or elements) that describes the object.","typeRef":359},{"name":"aria-description","required":false,"source":"global","description":"Defines a string value that describes or annotates the current element.","typeRef":359},{"name":"aria-details","required":false,"source":"global","description":"Identifies the element that provides a detailed, extended description for the object.","typeRef":359},{"name":"aria-disabled","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.","typeRef":347},{"name":"aria-dropeffect","required":false,"source":"global","literalValues":["copy","execute","link","move","none","popup"],"description":"Indicates what functions can be performed when a dragged object is released on the drop target.","typeRef":50},{"name":"aria-errormessage","required":false,"source":"global","description":"Identifies the element that provides an error message for the object.","typeRef":359},{"name":"aria-expanded","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","typeRef":347},{"name":"aria-flowto","required":false,"source":"global","description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.","typeRef":359},{"name":"aria-grabbed","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.","typeRef":347},{"name":"aria-haspopup","required":false,"source":"global","literalValues":["dialog",false,"false","grid","listbox","menu","tree",true,"true"],"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","typeRef":343},{"name":"aria-hidden","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates whether the element is exposed to an accessibility API.","typeRef":347},{"name":"aria-invalid","required":false,"source":"global","literalValues":[false,"false","grammar","spelling",true,"true"],"description":"Indicates the entered value does not conform to the format expected by the application.","typeRef":348},{"name":"aria-keyshortcuts","required":false,"source":"global","description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","typeRef":359},{"name":"aria-label","required":false,"source":"global","description":"Defines a string value that labels the current element.","typeRef":359},{"name":"aria-labelledby","required":false,"source":"global","description":"Identifies the element (or elements) that labels the current element.","typeRef":359},{"name":"aria-level","required":false,"source":"global","description":"Defines the hierarchical level of an element within a structure.","typeRef":353},{"name":"aria-live","required":false,"source":"global","literalValues":["assertive","off","polite"],"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","typeRef":63},{"name":"aria-modal","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates whether an element is modal when displayed.","typeRef":347},{"name":"aria-multiline","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","typeRef":347},{"name":"aria-multiselectable","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates that the user may select more than one item from the current selectable descendants.","typeRef":347},{"name":"aria-orientation","required":false,"source":"global","literalValues":["horizontal","vertical"],"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","typeRef":36},{"name":"aria-owns","required":false,"source":"global","description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.","typeRef":359},{"name":"aria-placeholder","required":false,"source":"global","description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.","typeRef":359},{"name":"aria-posinset","required":false,"source":"global","description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.","typeRef":353},{"name":"aria-pressed","required":false,"source":"global","literalValues":[false,"false","mixed",true,"true"],"description":"Indicates the current \"pressed\" state of toggle buttons.","typeRef":349},{"name":"aria-readonly","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates that the element is not editable, but is otherwise operable.","typeRef":347},{"name":"aria-relevant","required":false,"source":"global","literalValues":["additions","additions removals","additions text","all","removals","removals additions","removals text","text","text additions","text removals"],"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.","typeRef":73},{"name":"aria-required","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates that user input is required on the element before a form may be submitted.","typeRef":347},{"name":"aria-roledescription","required":false,"source":"global","description":"Defines a human-readable, author-localized description for the role of an element.","typeRef":359},{"name":"aria-rowcount","required":false,"source":"global","description":"Defines the total number of rows in a table, grid, or treegrid.","typeRef":353},{"name":"aria-rowindex","required":false,"source":"global","description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.","typeRef":353},{"name":"aria-rowindextext","required":false,"source":"global","description":"Defines a human readable text alternative of aria-rowindex.","typeRef":359},{"name":"aria-rowspan","required":false,"source":"global","description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.","typeRef":353},{"name":"aria-selected","required":false,"source":"global","literalValues":[false,"false",true,"true"],"description":"Indicates the current \"selected\" state of various widgets.","typeRef":347},{"name":"aria-setsize","required":false,"source":"global","description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.","typeRef":353},{"name":"aria-sort","required":false,"source":"global","literalValues":["ascending","descending","none","other"],"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","typeRef":56},{"name":"aria-valuemax","required":false,"source":"global","description":"Defines the maximum allowed value for a range widget.","typeRef":353},{"name":"aria-valuemin","required":false,"source":"global","description":"Defines the minimum allowed value for a range widget.","typeRef":353},{"name":"aria-valuenow","required":false,"source":"global","description":"Defines the current value for a range widget.","typeRef":353},{"name":"aria-valuetext","required":false,"source":"global","description":"Defines the human readable text alternative of aria-valuenow for a range widget.","typeRef":359},{"name":"ascent","required":false,"source":"global","typeRef":365},{"name":"attributeName","required":false,"source":"global","typeRef":359},{"name":"attributeType","required":false,"source":"global","typeRef":359},{"name":"autoCapitalize","required":false,"source":"global","literalValues":["characters","none","off","on","sentences","words"],"typeRef":111},{"name":"autoComplete","required":false,"source":"global","typeRef":170},{"name":"autoCorrect","required":false,"source":"global","typeRef":359},{"name":"autoReverse","required":false,"source":"global","literalValues":[false,"false",true,"true"],"typeRef":347},{"name":"autoSave","required":false,"source":"global","typeRef":359},{"name":"azimuth","required":false,"source":"global","typeRef":365},{"name":"baseFrequency","required":false,"source":"global","typeRef":365},{"name":"baseProfile","required":false,"source":"global","typeRef":365},{"name":"baselineShift","required":false,"source":"global","typeRef":365},{"name":"bbox","required":false,"source":"global","typeRef":365},{"name":"bd","required":false,"source":"global","description":"Border","typeRef":291},{"name":"bdrs","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"BorderRadius, theme key: theme.radius","typeRef":284},{"name":"begin","required":false,"source":"global","typeRef":365},{"name":"bg","required":false,"source":"global","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Background, theme key: theme.colors","typeRef":283},{"name":"bga","required":false,"source":"global","literalValues":["-moz-initial","fixed","inherit","initial","local","revert","revert-layer","scroll","unset"],"description":"BackgroundAttachment","typeRef":287},{"name":"bgcolor","required":false,"source":"global","typeRef":359},{"name":"bgp","required":false,"source":"global","description":"BackgroundPosition","typeRef":288},{"name":"bgr","required":false,"source":"global","literalValues":["-moz-initial","inherit","initial","no-repeat","repeat","repeat-x","repeat-y","revert","revert-layer","round","space","unset"],"description":"BackgroundRepeat","typeRef":289},{"name":"bgsz","required":false,"source":"global","description":"BackgroundSize","typeRef":290},{"name":"bias","required":false,"source":"global","typeRef":365},{"name":"border","required":false,"source":"global","typeRef":353},{"name":"by","required":false,"source":"global","typeRef":365},{"name":"c","required":false,"source":"global","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color","typeRef":283},{"name":"calcMode","required":false,"source":"global","typeRef":365},{"name":"capHeight","required":false,"source":"global","typeRef":365},{"name":"capture","required":false,"source":"global","literalValues":["environment",false,true,"user"],"typeRef":350},{"name":"cellPadding","required":false,"source":"global","typeRef":365},{"name":"cellSpacing","required":false,"source":"global","typeRef":365},{"name":"checked","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"clip","required":false,"source":"global","typeRef":365},{"name":"clipPath","required":false,"source":"global","typeRef":359},{"name":"clipPathUnits","required":false,"source":"global","typeRef":365},{"name":"clipRule","required":false,"source":"global","typeRef":365},{"name":"colSpan","required":false,"source":"global","typeRef":353},{"name":"color","required":false,"source":"global","literalValues":["blue","cyan","dark","grape","gray","green","indigo","initials","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":359},{"name":"colorInterpolation","required":false,"source":"global","typeRef":365},{"name":"colorInterpolationFilters","required":false,"source":"global","literalValues":["auto","inherit","linearRGB","sRGB"],"typeRef":39},{"name":"colorProfile","required":false,"source":"global","typeRef":365},{"name":"colorRendering","required":false,"source":"global","typeRef":365},{"name":"cols","required":false,"source":"global","typeRef":353},{"name":"content","required":false,"source":"global","typeRef":359},{"name":"contentScriptType","required":false,"source":"global","typeRef":365},{"name":"contentStyleType","required":false,"source":"global","typeRef":365},{"name":"contextMenu","required":false,"source":"global","typeRef":359},{"name":"crossOrigin","required":false,"source":"global","literalValues":["","anonymous","use-credentials"],"typeRef":0},{"name":"cursor","required":false,"source":"global","typeRef":365},{"name":"cx","required":false,"source":"global","typeRef":365},{"name":"cy","required":false,"source":"global","typeRef":365},{"name":"d","required":false,"source":"global","typeRef":359},{"name":"darkHidden","required":false,"source":"global","literalValues":[false,true],"description":"Determines whether component should be hidden in dark color scheme with `display: none`","typeRef":341},{"name":"datatype","required":false,"source":"global","typeRef":359},{"name":"decelerate","required":false,"source":"global","typeRef":365},{"name":"defaultChecked","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"defaultValue","required":false,"source":"global","typeRef":366},{"name":"descent","required":false,"source":"global","typeRef":365},{"name":"diffuseConstant","required":false,"source":"global","typeRef":365},{"name":"dir","required":false,"source":"global","typeRef":359},{"name":"dirName","required":false,"source":"global","typeRef":359},{"name":"direction","required":false,"source":"global","typeRef":365},{"name":"disabled","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"display","required":false,"source":"global","literalValues":["-moz-initial","-ms-flexbox","-ms-grid","-ms-inline-flexbox","-ms-inline-grid","-webkit-flex","-webkit-inline-flex","block","contents","flex","flow","flow-root","grid","inherit","initial","inline","inline-block","inline-flex","inline-grid","inline-list-item","inline-table","list-item","none","revert","revert-layer","ruby","ruby-base","ruby-base-container","ruby-text","ruby-text-container","run-in","table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row","table-row-group","unset"],"typeRef":292},{"name":"divisor","required":false,"source":"global","typeRef":365},{"name":"dominantBaseline","required":false,"source":"global","literalValues":["alphabetic","auto","central","hanging","ideographic","inherit","mathematical","middle","no-change","reset-size","text-after-edge","text-before-edge","use-script"],"typeRef":40},{"name":"draggable","required":false,"source":"global","literalValues":[false,"false",true,"true"],"typeRef":347},{"name":"dur","required":false,"source":"global","typeRef":365},{"name":"dx","required":false,"source":"global","typeRef":365},{"name":"dy","required":false,"source":"global","typeRef":365},{"name":"edgeMode","required":false,"source":"global","typeRef":365},{"name":"elevation","required":false,"source":"global","typeRef":365},{"name":"enableBackground","required":false,"source":"global","typeRef":365},{"name":"end","required":false,"source":"global","typeRef":365},{"name":"enterKeyHint","required":false,"source":"global","literalValues":["done","enter","go","next","previous","search","send"],"typeRef":67},{"name":"exponent","required":false,"source":"global","typeRef":365},{"name":"exportparts","required":false,"source":"global","typeRef":359},{"name":"externalResourcesRequired","required":false,"source":"global","literalValues":[false,"false",true,"true"],"typeRef":347},{"name":"ff","required":false,"source":"global","literalValues":["heading","monospace","text"],"description":"FontFamily","typeRef":281},{"name":"fill","required":false,"source":"global","typeRef":359},{"name":"fillOpacity","required":false,"source":"global","typeRef":365},{"name":"fillRule","required":false,"source":"global","literalValues":["evenodd","inherit","nonzero"],"typeRef":42},{"name":"filter","required":false,"source":"global","typeRef":359},{"name":"filterRes","required":false,"source":"global","typeRef":365},{"name":"filterUnits","required":false,"source":"global","typeRef":365},{"name":"flex","required":false,"source":"global","typeRef":293},{"name":"floodColor","required":false,"source":"global","typeRef":365},{"name":"floodOpacity","required":false,"source":"global","typeRef":365},{"name":"focusable","required":false,"source":"global","literalValues":["auto",false,"false",true,"true"],"typeRef":342},{"name":"fontFamily","required":false,"source":"global","typeRef":359},{"name":"fontSize","required":false,"source":"global","typeRef":365},{"name":"fontSizeAdjust","required":false,"source":"global","typeRef":365},{"name":"fontStretch","required":false,"source":"global","typeRef":365},{"name":"fontStyle","required":false,"source":"global","typeRef":365},{"name":"fontVariant","required":false,"source":"global","typeRef":365},{"name":"fontWeight","required":false,"source":"global","typeRef":365},{"name":"format","required":false,"source":"global","typeRef":365},{"name":"fr","required":false,"source":"global","typeRef":365},{"name":"frame","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"from","required":false,"source":"global","typeRef":365},{"name":"fs","required":false,"source":"global","literalValues":["-moz-initial","inherit","initial","italic","normal","oblique","revert","revert-layer","unset"],"description":"FontStyle","typeRef":296},{"name":"fw","required":false,"source":"global","literalValues":["-moz-initial","bold","bolder","inherit","initial","lighter","normal","revert","revert-layer","unset"],"description":"FontWeight","typeRef":297},{"name":"fx","required":false,"source":"global","typeRef":365},{"name":"fy","required":false,"source":"global","typeRef":365},{"name":"fz","required":false,"source":"global","literalValues":["h1","h2","h3","h4","h5","h6","lg","md","sm","xl","xs"],"description":"FontSize, theme key: theme.fontSizes","typeRef":310},{"name":"g1","required":false,"source":"global","typeRef":365},{"name":"g2","required":false,"source":"global","typeRef":365},{"name":"glyphName","required":false,"source":"global","typeRef":365},{"name":"glyphOrientationHorizontal","required":false,"source":"global","typeRef":365},{"name":"glyphOrientationVertical","required":false,"source":"global","typeRef":365},{"name":"gradientTransform","required":false,"source":"global","typeRef":359},{"name":"gradientUnits","required":false,"source":"global","typeRef":359},{"name":"h","required":false,"source":"global","description":"Height, theme key: theme.spacing","typeRef":298},{"name":"hanging","required":false,"source":"global","typeRef":365},{"name":"headers","required":false,"source":"global","typeRef":359},{"name":"height","required":false,"source":"global","typeRef":365},{"name":"hidden","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"hiddenFrom","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"Breakpoint above which the component is hidden with `display: none`","typeRef":177},{"name":"horizAdvX","required":false,"source":"global","typeRef":365},{"name":"horizOriginX","required":false,"source":"global","typeRef":365},{"name":"href","required":false,"source":"global","typeRef":359},{"name":"id","required":false,"source":"global","description":"Static id used as base to generate `aria-` attributes, by default generates random id","typeRef":359},{"name":"ideographic","required":false,"source":"global","typeRef":365},{"name":"imageRendering","required":false,"source":"global","typeRef":365},{"name":"in","required":false,"source":"global","typeRef":359},{"name":"in2","required":false,"source":"global","typeRef":365},{"name":"inert","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"inlist","required":false,"source":"global","typeRef":370},{"name":"inputMode","required":false,"source":"global","literalValues":["decimal","email","none","numeric","search","tel","text","url"],"description":"Hints at the type of data that might be entered by the user while editing the element or its contents","typeRef":68},{"name":"intercept","required":false,"source":"global","typeRef":365},{"name":"is","required":false,"source":"global","description":"Specify that a standard HTML element should behave like a defined custom built-in element","typeRef":359},{"name":"itemID","required":false,"source":"global","typeRef":359},{"name":"itemProp","required":false,"source":"global","typeRef":359},{"name":"itemScope","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"itemType","required":false,"source":"global","typeRef":359},{"name":"k","required":false,"source":"global","typeRef":365},{"name":"k1","required":false,"source":"global","typeRef":365},{"name":"k2","required":false,"source":"global","typeRef":365},{"name":"k3","required":false,"source":"global","typeRef":365},{"name":"k4","required":false,"source":"global","typeRef":365},{"name":"kernelMatrix","required":false,"source":"global","typeRef":365},{"name":"kernelUnitLength","required":false,"source":"global","typeRef":365},{"name":"kerning","required":false,"source":"global","typeRef":365},{"name":"key","required":false,"source":"global","description":"Stable identity used by React when rendering collections.","typeRef":173},{"name":"keyPoints","required":false,"source":"global","typeRef":365},{"name":"keySplines","required":false,"source":"global","typeRef":365},{"name":"keyTimes","required":false,"source":"global","typeRef":365},{"name":"lang","required":false,"source":"global","typeRef":359},{"name":"lengthAdjust","required":false,"source":"global","typeRef":365},{"name":"letterSpacing","required":false,"source":"global","typeRef":365},{"name":"lh","required":false,"source":"global","literalValues":["h1","h2","h3","h4","h5","h6","lg","md","sm","xl","xs"],"description":"LineHeight, theme key: lineHeights","typeRef":311},{"name":"lightHidden","required":false,"source":"global","literalValues":[false,true],"description":"Determines whether component should be hidden in light color scheme with `display: none`","typeRef":341},{"name":"lightingColor","required":false,"source":"global","typeRef":365},{"name":"limitingConeAngle","required":false,"source":"global","typeRef":365},{"name":"list","required":false,"source":"global","typeRef":359},{"name":"local","required":false,"source":"global","typeRef":365},{"name":"lts","required":false,"source":"global","description":"LetterSpacing","typeRef":300},{"name":"m","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"Margin, theme key: theme.spacing","typeRef":284},{"name":"mah","required":false,"source":"global","description":"MaxHeight, theme key: theme.spacing","typeRef":301},{"name":"markerEnd","required":false,"source":"global","typeRef":359},{"name":"markerHeight","required":false,"source":"global","typeRef":365},{"name":"markerMid","required":false,"source":"global","typeRef":359},{"name":"markerStart","required":false,"source":"global","typeRef":359},{"name":"markerUnits","required":false,"source":"global","typeRef":365},{"name":"markerWidth","required":false,"source":"global","typeRef":365},{"name":"mask","required":false,"source":"global","typeRef":359},{"name":"maskContentUnits","required":false,"source":"global","typeRef":365},{"name":"maskUnits","required":false,"source":"global","typeRef":365},{"name":"mathematical","required":false,"source":"global","typeRef":365},{"name":"maw","required":false,"source":"global","description":"MaxWidth, theme key: theme.spacing","typeRef":302},{"name":"max","required":false,"source":"global","typeRef":365},{"name":"maxLength","required":false,"source":"global","typeRef":353},{"name":"mb","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginBottom, theme key: theme.spacing","typeRef":284},{"name":"me","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginInlineEnd, theme key: theme.spacing","typeRef":284},{"name":"media","required":false,"source":"global","typeRef":359},{"name":"method","required":false,"source":"global","typeRef":359},{"name":"mie","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginInlineEnd, theme key: theme.spacing","typeRef":284},{"name":"mih","required":false,"source":"global","description":"MinHeight, theme key: theme.spacing","typeRef":303},{"name":"min","required":false,"source":"global","typeRef":365},{"name":"minLength","required":false,"source":"global","typeRef":353},{"name":"mis","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginInlineStart, theme key: theme.spacing","typeRef":284},{"name":"miw","required":false,"source":"global","description":"MinWidth, theme key: theme.spacing","typeRef":304},{"name":"ml","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginLeft, theme key: theme.spacing","typeRef":284},{"name":"mod","required":false,"source":"global","description":"Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed","typeRef":143},{"name":"mode","required":false,"source":"global","typeRef":365},{"name":"mr","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginRight, theme key: theme.spacing","typeRef":284},{"name":"ms","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginInlineStart, theme key: theme.spacing","typeRef":284},{"name":"mt","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginTop, theme key: theme.spacing","typeRef":284},{"name":"multiple","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"mx","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginInline, theme key: theme.spacing","typeRef":284},{"name":"my","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"MarginBlock, theme key: theme.spacing","typeRef":284},{"name":"name","required":false,"source":"global","typeRef":359},{"name":"nonce","required":false,"source":"global","typeRef":359},{"name":"numOctaves","required":false,"source":"global","typeRef":365},{"name":"offset","required":false,"source":"global","typeRef":365},{"name":"opacity","required":false,"source":"global","literalValues":["-moz-initial","inherit","initial","revert","revert-layer","unset"],"typeRef":305},{"name":"operator","required":false,"source":"global","typeRef":365},{"name":"order","required":false,"source":"global","typeRef":365},{"name":"orient","required":false,"source":"global","typeRef":365},{"name":"orientation","required":false,"source":"global","typeRef":365},{"name":"origin","required":false,"source":"global","typeRef":365},{"name":"overflow","required":false,"source":"global","typeRef":365},{"name":"overlinePosition","required":false,"source":"global","typeRef":365},{"name":"overlineThickness","required":false,"source":"global","typeRef":365},{"name":"p","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"Padding, theme key: theme.spacing","typeRef":284},{"name":"paintOrder","required":false,"source":"global","typeRef":365},{"name":"panose1","required":false,"source":"global","typeRef":365},{"name":"part","required":false,"source":"global","typeRef":359},{"name":"path","required":false,"source":"global","typeRef":359},{"name":"pathLength","required":false,"source":"global","typeRef":365},{"name":"pattern","required":false,"source":"global","typeRef":359},{"name":"patternContentUnits","required":false,"source":"global","typeRef":359},{"name":"patternTransform","required":false,"source":"global","typeRef":365},{"name":"patternUnits","required":false,"source":"global","typeRef":359},{"name":"pb","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingBottom, theme key: theme.spacing","typeRef":284},{"name":"pe","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingInlineEnd, theme key: theme.spacing","typeRef":284},{"name":"pie","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingInlineEnd, theme key: theme.spacing","typeRef":284},{"name":"pis","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingInlineStart, theme key: theme.spacing","typeRef":284},{"name":"pl","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingLeft, theme key: theme.spacing","typeRef":284},{"name":"placeholder","required":false,"source":"global","typeRef":359},{"name":"pointerEvents","required":false,"source":"global","typeRef":365},{"name":"points","required":false,"source":"global","typeRef":359},{"name":"pointsAtX","required":false,"source":"global","typeRef":365},{"name":"pointsAtY","required":false,"source":"global","typeRef":365},{"name":"pointsAtZ","required":false,"source":"global","typeRef":365},{"name":"pr","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingRight, theme key: theme.spacing","typeRef":284},{"name":"prefix","required":false,"source":"global","typeRef":359},{"name":"preserveAlpha","required":false,"source":"global","literalValues":[false,"false",true,"true"],"typeRef":347},{"name":"preserveAspectRatio","required":false,"source":"global","typeRef":359},{"name":"primitiveUnits","required":false,"source":"global","typeRef":365},{"name":"property","required":false,"source":"global","typeRef":359},{"name":"ps","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingInlineStart, theme key: theme.spacing","typeRef":284},{"name":"pt","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingTop, theme key: theme.spacing","typeRef":284},{"name":"px","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingInline, theme key: theme.spacing","typeRef":284},{"name":"py","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"PaddingBlock, theme key: theme.spacing","typeRef":284},{"name":"r","required":false,"source":"global","typeRef":365},{"name":"radioGroup","required":false,"source":"global","typeRef":359},{"name":"radius","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem","typeRef":180},{"name":"readOnly","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"rel","required":false,"source":"global","typeRef":359},{"name":"renderingIntent","required":false,"source":"global","typeRef":365},{"name":"repeatCount","required":false,"source":"global","typeRef":365},{"name":"repeatDur","required":false,"source":"global","typeRef":365},{"name":"required","required":false,"source":"global","literalValues":[false,true],"typeRef":341},{"name":"requiredExtensions","required":false,"source":"global","typeRef":365},{"name":"requiredFeatures","required":false,"source":"global","typeRef":365},{"name":"resource","required":false,"source":"global","typeRef":359},{"name":"restart","required":false,"source":"global","typeRef":365},{"name":"result","required":false,"source":"global","typeRef":359},{"name":"results","required":false,"source":"global","typeRef":353},{"name":"rev","required":false,"source":"global","typeRef":359},{"name":"role","required":false,"source":"global","typeRef":140},{"name":"rotate","required":false,"source":"global","typeRef":365},{"name":"rowSpan","required":false,"source":"global","typeRef":353},{"name":"rows","required":false,"source":"global","typeRef":353},{"name":"rules","required":false,"source":"global","literalValues":["all","columns","groups","none","rows"],"typeRef":54},{"name":"rx","required":false,"source":"global","typeRef":365},{"name":"ry","required":false,"source":"global","typeRef":365},{"name":"scale","required":false,"source":"global","typeRef":365},{"name":"scope","required":false,"source":"global","typeRef":359},{"name":"security","required":false,"source":"global","typeRef":359},{"name":"seed","required":false,"source":"global","typeRef":365},{"name":"shadow","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.shadows` or any other valid CSS `box-shadow` value","typeRef":181},{"name":"shapeRendering","required":false,"source":"global","typeRef":365},{"name":"size","required":false,"source":"global","literalValues":["compact-lg","compact-md","compact-sm","compact-xl","compact-xs","input-lg","input-md","input-sm","input-xl","input-xs","lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"slope","required":false,"source":"global","typeRef":365},{"name":"slot","required":false,"source":"global","typeRef":359},{"name":"spacing","required":false,"source":"global","typeRef":365},{"name":"specularConstant","required":false,"source":"global","typeRef":365},{"name":"specularExponent","required":false,"source":"global","typeRef":365},{"name":"speed","required":false,"source":"global","typeRef":365},{"name":"spellCheck","required":false,"source":"global","literalValues":[false,"false",true,"true"],"typeRef":347},{"name":"spreadMethod","required":false,"source":"global","typeRef":359},{"name":"src","required":false,"source":"global","typeRef":359},{"name":"startOffset","required":false,"source":"global","typeRef":365},{"name":"stdDeviation","required":false,"source":"global","typeRef":365},{"name":"stemh","required":false,"source":"global","typeRef":365},{"name":"stemv","required":false,"source":"global","typeRef":365},{"name":"step","required":false,"source":"global","typeRef":365},{"name":"stitchTiles","required":false,"source":"global","typeRef":365},{"name":"stopColor","required":false,"source":"global","typeRef":359},{"name":"stopOpacity","required":false,"source":"global","typeRef":365},{"name":"strikethroughPosition","required":false,"source":"global","typeRef":365},{"name":"strikethroughThickness","required":false,"source":"global","typeRef":365},{"name":"string","required":false,"source":"global","typeRef":365},{"name":"stroke","required":false,"source":"global","typeRef":359},{"name":"strokeDasharray","required":false,"source":"global","typeRef":365},{"name":"strokeDashoffset","required":false,"source":"global","typeRef":365},{"name":"strokeLinecap","required":false,"source":"global","literalValues":["butt","inherit","round","square"],"typeRef":43},{"name":"strokeLinejoin","required":false,"source":"global","literalValues":["bevel","inherit","miter","round"],"typeRef":44},{"name":"strokeMiterlimit","required":false,"source":"global","typeRef":365},{"name":"strokeOpacity","required":false,"source":"global","typeRef":365},{"name":"strokeWidth","required":false,"source":"global","typeRef":365},{"name":"style","required":false,"source":"global","description":"Style to apply to the root element, used for virtualizer positioning","typeRef":146},{"name":"styles","required":false,"source":"global","typeRef":220},{"name":"summary","required":false,"source":"global","typeRef":359},{"name":"surfaceScale","required":false,"source":"global","typeRef":365},{"name":"systemLanguage","required":false,"source":"global","typeRef":365},{"name":"ta","required":false,"source":"global","literalValues":["-khtml-center","-khtml-left","-khtml-right","-moz-center","-moz-initial","-moz-left","-moz-right","-webkit-center","-webkit-left","-webkit-match-parent","-webkit-right","center","end","inherit","initial","justify","left","match-parent","revert","revert-layer","right","start","unset"],"description":"TextAlign","typeRef":306},{"name":"tabIndex","required":false,"source":"global","description":"Tab index for the node","typeRef":353},{"name":"tableValues","required":false,"source":"global","typeRef":365},{"name":"target","required":false,"source":"global","typeRef":359},{"name":"targetX","required":false,"source":"global","typeRef":365},{"name":"targetY","required":false,"source":"global","typeRef":365},{"name":"td","required":false,"source":"global","description":"TextDecoration","typeRef":307},{"name":"textAnchor","required":false,"source":"global","literalValues":["end","inherit","middle","start"],"typeRef":41},{"name":"textDecoration","required":false,"source":"global","typeRef":365},{"name":"textLength","required":false,"source":"global","typeRef":365},{"name":"textRendering","required":false,"source":"global","typeRef":365},{"name":"title","required":false,"source":"global","description":"Item title, displayed next to the bullet","typeRef":359},{"name":"to","required":false,"source":"global","typeRef":365},{"name":"transform","required":false,"source":"global","typeRef":359},{"name":"translate","required":false,"source":"global","literalValues":["no","yes"],"typeRef":83},{"name":"tt","required":false,"source":"global","literalValues":["-moz-initial","capitalize","full-size-kana","full-width","inherit","initial","lowercase","math-auto","none","revert","revert-layer","unset","uppercase"],"description":"TextTransform","typeRef":308},{"name":"type","required":false,"source":"global","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":20},{"name":"typeof","required":false,"source":"global","typeRef":359},{"name":"u1","required":false,"source":"global","typeRef":365},{"name":"u2","required":false,"source":"global","typeRef":365},{"name":"underlinePosition","required":false,"source":"global","typeRef":365},{"name":"underlineThickness","required":false,"source":"global","typeRef":365},{"name":"unicode","required":false,"source":"global","typeRef":365},{"name":"unicodeBidi","required":false,"source":"global","typeRef":365},{"name":"unicodeRange","required":false,"source":"global","typeRef":365},{"name":"unitsPerEm","required":false,"source":"global","typeRef":365},{"name":"unselectable","required":false,"source":"global","literalValues":["off","on"],"typeRef":64},{"name":"vAlphabetic","required":false,"source":"global","typeRef":365},{"name":"vHanging","required":false,"source":"global","typeRef":365},{"name":"vIdeographic","required":false,"source":"global","typeRef":365},{"name":"vMathematical","required":false,"source":"global","typeRef":365},{"name":"valign","required":false,"source":"global","literalValues":["baseline","bottom","middle","top"],"typeRef":17},{"name":"value","required":false,"source":"global","typeRef":366},{"name":"values","required":false,"source":"global","typeRef":359},{"name":"variant","required":false,"source":"global","literalValues":["contained","contrast","dashed","default","dot","dotted","filled","gradient","light","outline","pills","separated","solid","subtle","text","transparent","unstyled","vertical","white"],"description":"Variant passed from parent component, sets `data-variant`","typeRef":359},{"name":"vectorEffect","required":false,"source":"global","typeRef":365},{"name":"version","required":false,"source":"global","typeRef":359},{"name":"vertAdvY","required":false,"source":"global","typeRef":365},{"name":"vertOriginX","required":false,"source":"global","typeRef":365},{"name":"vertOriginY","required":false,"source":"global","typeRef":365},{"name":"viewBox","required":false,"source":"global","typeRef":359},{"name":"viewTarget","required":false,"source":"global","typeRef":365},{"name":"visibility","required":false,"source":"global","typeRef":365},{"name":"visibleFrom","required":false,"source":"global","literalValues":["lg","md","sm","xl","xs"],"description":"Breakpoint below which the component is hidden with `display: none`","typeRef":177},{"name":"vocab","required":false,"source":"global","typeRef":359},{"name":"w","required":false,"source":"global","description":"Width, theme key: theme.spacing","typeRef":309},{"name":"width","required":false,"source":"global","typeRef":365},{"name":"widths","required":false,"source":"global","typeRef":365},{"name":"withBorder","required":false,"source":"global","literalValues":[false,true],"description":"Adds border to the root element","typeRef":341},{"name":"wordSpacing","required":false,"source":"global","typeRef":365},{"name":"wrap","required":false,"source":"global","typeRef":359},{"name":"writingMode","required":false,"source":"global","typeRef":365},{"name":"x","required":false,"source":"global","typeRef":365},{"name":"x1","required":false,"source":"global","typeRef":365},{"name":"x2","required":false,"source":"global","typeRef":365},{"name":"xChannelSelector","required":false,"source":"global","typeRef":359},{"name":"xHeight","required":false,"source":"global","typeRef":365},{"name":"xlinkActuate","required":false,"source":"global","typeRef":359},{"name":"xlinkArcrole","required":false,"source":"global","typeRef":359},{"name":"xlinkHref","required":false,"source":"global","typeRef":359},{"name":"xlinkRole","required":false,"source":"global","typeRef":359},{"name":"xlinkShow","required":false,"source":"global","typeRef":359},{"name":"xlinkTitle","required":false,"source":"global","typeRef":359},{"name":"xlinkType","required":false,"source":"global","typeRef":359},{"name":"xmlBase","required":false,"source":"global","typeRef":359},{"name":"xmlLang","required":false,"source":"global","typeRef":359},{"name":"xmlSpace","required":false,"source":"global","typeRef":359},{"name":"xmlns","required":false,"source":"global","typeRef":359},{"name":"xmlnsXlink","required":false,"source":"global","typeRef":359},{"name":"y","required":false,"source":"global","typeRef":365},{"name":"y1","required":false,"source":"global","typeRef":365},{"name":"y2","required":false,"source":"global","typeRef":365},{"name":"yChannelSelector","required":false,"source":"global","typeRef":359},{"name":"z","required":false,"source":"global","typeRef":365},{"name":"zoomAndPan","required":false,"source":"global","typeRef":359}],"blockedCapabilities":[{"kind":"prop","name":"__proto__","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"apply","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"arguments","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"autoFocus","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"backdropFilter","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"behavior","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"bottom","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"call","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"callee","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"caller","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"children","reason":"Children must be expressed as interpreted JSX, not passed as a raw prop."},{"kind":"prop","name":"className","reason":"Unscoped class injection can escape widget CSS isolation."},{"kind":"prop","name":"classNames","reason":"Unscoped class injection can escape widget CSS isolation."},{"kind":"prop","name":"classes","reason":"Unscoped class injection can escape widget CSS isolation."},{"kind":"prop","name":"clipPath","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"component","reason":"Polymorphic roots can replace the Homarr-owned element boundary."},{"kind":"prop","name":"constructor","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"content","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"contentEditable","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"dangerouslySetInnerHTML","reason":"Raw HTML injection is not available to authored widgets."},{"kind":"prop","name":"filter","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"form","reason":"External form submission is outside the named-request security boundary."},{"kind":"prop","name":"formAction","reason":"External form submission is outside the named-request security boundary."},{"kind":"prop","name":"formEncType","reason":"External form submission is outside the named-request security boundary."},{"kind":"prop","name":"formMethod","reason":"External form submission is outside the named-request security boundary."},{"kind":"prop","name":"formNoValidate","reason":"External form submission is outside the named-request security boundary."},{"kind":"prop","name":"formTarget","reason":"External form submission is outside the named-request security boundary."},{"kind":"prop","name":"innerRef","reason":"Refs expose underlying React components and DOM nodes."},{"kind":"prop","name":"inset","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"left","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"mask","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"ping","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"pointerEvents","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"popover","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"popoverTarget","reason":"Portal targeting can render or interact outside the widget root."},{"kind":"prop","name":"popoverTargetAction","reason":"Portal targeting can render or interact outside the widget root."},{"kind":"prop","name":"portalProps","reason":"Portal targeting can render or interact outside the widget root."},{"kind":"prop","name":"pos","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"position","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"prototype","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"ref","reason":"Refs expose underlying React components and DOM nodes."},{"kind":"prop","name":"renderRoot","reason":"Polymorphic roots can replace the Homarr-owned element boundary."},{"kind":"prop","name":"right","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"srcDoc","reason":"Raw HTML injection is not available to authored widgets."},{"kind":"prop","name":"suppressContentEditableWarning","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"suppressHydrationWarning","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"top","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop","name":"withinPortal","reason":"Portal targeting can render or interact outside the widget root."},{"kind":"prop","name":"zIndex","reason":"This capability is blocked by the Custom JSX safety boundary."},{"kind":"prop-pattern","name":"on*","reason":"Authored event callbacks can execute code outside the declarative runtime."},{"kind":"prop-pattern","name":"*Ref","reason":"Refs expose underlying React components and DOM nodes."},{"kind":"prop-pattern","name":"__*","reason":"Private and prototype-related properties are outside the supported authoring surface."}],"components":[{"name":"Accordion","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion/","props":[{"name":"attributes","required":false,"source":"component","typeRef":421},{"name":"chevron","required":false,"source":"component","description":"Custom chevron icon","typeRef":263},{"name":"chevronIconSize","required":false,"source":"component","description":"Size of the default chevron icon. Ignored when `chevron` prop is set. Use `chevronSize` instead when using custom chevron.","typeRef":365},{"name":"chevronPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the chevron relative to the item label","typeRef":47},{"name":"chevronSize","required":false,"source":"component","description":"Size of the chevron icon container","typeRef":365},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":138},{"name":"disableChevronRotation","required":false,"source":"component","literalValues":[false,true],"description":"If set, chevron rotation is disabled","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set to `false`, panels are unmounted when collapsed. By default, panels stay mounted when collapsed.","typeRef":341},{"name":"loop","required":false,"source":"component","literalValues":[false,true],"description":"If set, arrow keys loop through items (first to last and last to first)","typeRef":341},{"name":"multiple","required":false,"source":"component","description":"If set, multiple items can be opened at the same time","typeRef":186},{"name":"order","required":false,"source":"component","literalValues":[2,3,4,5,6],"description":"Sets heading level (h2-h6) for `Accordion.Control` elements. Wraps each control in the corresponding heading tag, recommended to meet WAI-ARIA accessibility requirements. Has no visual effect.","typeRef":136},{"name":"transitionDuration","required":false,"source":"component","description":"Transition duration in ms","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":138},{"name":"variant","required":false,"source":"component","literalValues":["contained","default","filled","separated"],"typeRef":112}],"blockedProps":[],"subcomponents":["Accordion.Chevron","Accordion.Control","Accordion.Item","Accordion.Panel"],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Accordion.Chevron","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"display","required":false,"source":"component","typeRef":365},{"name":"opacity","required":false,"source":"component","typeRef":365},{"name":"radius","required":false,"source":"component","typeRef":365},{"name":"size","required":false,"source":"component","description":"Controls `width` and `height` of the icon, `16` by default","typeRef":365},{"name":"type","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Accordion.Control","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion/","props":[{"name":"chevron","required":false,"source":"component","description":"Custom chevron icon","typeRef":263},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"icon","required":false,"source":"component","description":"Icon displayed next to the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":227},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Accordion.Item","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":217},{"name":"value","required":true,"source":"component","description":"Value that is used to manage the accordion state","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Accordion.Panel","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, overrides the Accordion-level `keepMounted` value. When undefined (default), uses Accordion's `keepMounted` setting.","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":228},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"AccordionChevron","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion-chevron/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"display","required":false,"source":"component","typeRef":365},{"name":"opacity","required":false,"source":"component","typeRef":365},{"name":"radius","required":false,"source":"component","typeRef":365},{"name":"size","required":false,"source":"component","description":"Controls `width` and `height` of the icon, `16` by default","typeRef":365},{"name":"type","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"AccordionControl","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion-control/","props":[{"name":"chevron","required":false,"source":"component","description":"Custom chevron icon","typeRef":263},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"icon","required":false,"source":"component","description":"Icon displayed next to the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":227},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"AccordionItem","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion-item/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":217},{"name":"value","required":true,"source":"component","description":"Value that is used to manage the accordion state","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"AccordionPanel","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/accordion-panel/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, overrides the Accordion-level `keepMounted` value. When undefined (default), uses Accordion's `keepMounted` setting.","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":228},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"ActionButton","package":"@homarr/widgets","category":"network","safety":"wrapped","description":"Runs a named user-triggered action.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"color","source":"component","required":false,"typeRef":359},{"name":"confirmMessage","source":"component","required":false,"typeRef":359},{"name":"disabled","source":"component","required":false,"typeRef":338},{"name":"errorMessage","source":"component","required":false,"typeRef":359},{"name":"fullWidth","source":"component","required":false,"typeRef":338},{"name":"icon","source":"component","required":false,"typeRef":359},{"name":"label","source":"component","required":false,"typeRef":359},{"name":"params","source":"component","required":false,"typeRef":270},{"name":"requestId","source":"component","required":false,"description":"Identifier of the named Custom Widget action.","typeRef":359},{"name":"size","source":"component","required":false,"typeRef":359},{"name":"successMessage","source":"component","required":false,"typeRef":359},{"name":"variant","source":"component","required":false,"typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Action labels must describe their effect; destructive actions require confirmation."]},{"name":"ActionIcon","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/action-icon/","props":[{"name":"attributes","required":false,"source":"component","typeRef":459},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color.","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"gradient","required":false,"source":"component","description":"Gradient values used with `variant=\"gradient\"`.","typeRef":179},{"name":"loaderProps","required":false,"source":"component","description":"Props passed down to the `Loader` component. Ignored when `loading` prop is not set.","typeRef":176},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"If set, `Loader` component is displayed instead of the `children`","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["input-lg","input-md","input-sm","input-xl","input-xs","lg","md","sm","xl","xs"],"description":"Controls width and height of the button. Numbers are converted to rem.","typeRef":356},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","subtle","transparent","white"],"typeRef":113}],"blockedProps":[],"subcomponents":["ActionIcon.Group","ActionIcon.GroupSection"],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ActionIcon.Group","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/action-icon/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"borderWidth","required":false,"source":"component","description":"`border-width` of the child components.","typeRef":365},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Group orientation","typeRef":36},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ActionIcon.GroupSection","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/action-icon/","props":[{"name":"attributes","required":false,"source":"component","typeRef":401},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gradient","required":false,"source":"component","description":"Gradient values used with `variant=\"gradient\"`.","typeRef":179},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls section `height`, `font-size` and horizontal `padding`","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","subtle","transparent","white"],"typeRef":113}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ActionIconGroup","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/action-icon-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"borderWidth","required":false,"source":"component","description":"`border-width` of the child components.","typeRef":365},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Group orientation","typeRef":36},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ActionIconGroupSection","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/action-icon-group-section/","props":[{"name":"attributes","required":false,"source":"component","typeRef":401},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gradient","required":false,"source":"component","description":"Gradient values used with `variant=\"gradient\"`.","typeRef":179},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls section `height`, `font-size` and horizontal `padding`","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","subtle","transparent","white"],"typeRef":113}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Affix","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/affix/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes the widget layout boundary"},{"name":"Alert","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/alert/","props":[{"name":"attributes","required":false,"source":"component","typeRef":378},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"closeButtonLabel","required":false,"source":"component","description":"Close button `aria-label`","typeRef":359},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"icon","required":false,"source":"component","description":"Icon displayed next to the title","typeRef":263},{"name":"title","required":false,"source":"component","description":"Alert title","typeRef":263},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","light","outline","transparent","white"],"typeRef":114},{"name":"withCloseButton","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether close button should be displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"AlphaSlider","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/alpha-slider/","props":[{"name":"attributes","required":false,"source":"component","typeRef":474},{"name":"color","required":true,"source":"component","typeRef":359},{"name":"focusable","required":false,"source":"component","literalValues":[false,true],"description":"If set, slider thumb can be focused","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Slider size","typeRef":182},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":true,"source":"component","description":"Controlled component value","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Anchor","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/anchor/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration, ignored when `variant` is not `gradient`","typeRef":179},{"name":"inherit","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether font properties should be inherited from the parent","typeRef":341},{"name":"inline","required":false,"source":"component","literalValues":[false,true],"description":"Sets `line-height` to 1 for centering","typeRef":341},{"name":"lineClamp","required":false,"source":"component","description":"Number of lines after which Text will be truncated","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size` and `line-height`","typeRef":82},{"name":"textWrap","required":false,"source":"component","literalValues":["balance","nowrap","pretty","stable","wrap"],"description":"Controls `text-wrap` CSS property","typeRef":79},{"name":"truncate","required":false,"source":"component","literalValues":["end",false,"start",true],"description":"Side on which Text must be truncated, if `true`, text is truncated from the start","typeRef":344},{"name":"underline","required":false,"source":"component","literalValues":["always","hover","never","not-hover"],"description":"Defines when `text-decoration: underline` styles are applied.","typeRef":10},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["gradient","text"],"typeRef":131}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"AngleSlider","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/angle-slider/","props":[{"name":"attributes","required":false,"source":"component","typeRef":423},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":353},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":261},{"name":"marks","required":false,"source":"component","description":"Array of marks displayed on the slider","typeRef":477},{"name":"restrictToMarks","required":false,"source":"component","literalValues":[false,true],"description":"If set, the selection is allowed only from the given marks array","typeRef":341},{"name":"size","required":false,"source":"component","description":"Slider size in px","typeRef":353},{"name":"step","required":false,"source":"component","description":"Step between values","typeRef":353},{"name":"thumbSize","required":false,"source":"component","description":"Size of the thumb in px. Calculated based on the `size` value by default.","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withLabel","required":false,"source":"component","literalValues":[false,true],"description":"If set, the label is displayed inside the slider","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"AppShell","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell/","props":[],"blockedProps":[],"subcomponents":["AppShell.Aside","AppShell.Footer","AppShell.Header","AppShell.Main","AppShell.Navbar","AppShell.Section"],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShell.Aside","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShell.Footer","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShell.Header","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShell.Main","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShell.Navbar","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShell.Section","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShellAside","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell-aside/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShellFooter","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell-footer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShellHeader","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell-header/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShellMain","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell-main/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShellNavbar","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell-navbar/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AppShellSection","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/app-shell-section/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"AreaChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/area-chart/","props":[{"name":"activeDotProps","required":false,"source":"component","description":"Props passed down to all active dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"areaChartProps","required":false,"source":"component","description":"Props passed down to recharts `AreaChart` component","typeRef":91},{"name":"attributes","required":false,"source":"component","typeRef":371},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"connectNulls","required":false,"source":"component","literalValues":[false,true],"description":"If set, points with `null` values are connected","typeRef":341},{"name":"curveType","required":false,"source":"component","literalValues":["bump","linear","monotone","natural","step","stepAfter","stepBefore"],"description":"Type of the curve","typeRef":69},{"name":"data","required":true,"source":"component","description":"Data used to display chart","typeRef":148},{"name":"dataKey","required":true,"source":"component","description":"Key of the `data` object for x-axis values","typeRef":359},{"name":"dotProps","required":false,"source":"component","description":"Props passed down to all dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"fillOpacity","required":false,"source":"component","description":"Controls fill opacity of all areas","typeRef":353},{"name":"gridAxis","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which lines should be displayed in the grid, `'x'` by default","typeRef":61},{"name":"gridColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the grid and cursor lines, by default depends on color scheme","typeRef":162},{"name":"gridProps","required":false,"source":"component","description":"Props passed down to the `CartesianGrid` component","typeRef":189},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to the `Legend` component","typeRef":190},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Chart orientation, `'horizontal'` by default","typeRef":36},{"name":"referenceLines","required":false,"source":"component","description":"Reference lines that should be displayed on the chart","typeRef":149},{"name":"rightYAxisLabel","required":false,"source":"component","description":"A label to display next to the right y-axis","typeRef":359},{"name":"rightYAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component rendered on the right side","typeRef":199},{"name":"series","required":true,"source":"component","description":"An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array.","typeRef":139},{"name":"splitColors","required":false,"source":"component","description":"A tuple of colors used when `type=\"split\"` is set, ignored in all other cases. A tuple may include theme colors reference or any valid CSS colors","typeRef":333},{"name":"splitOffset","required":false,"source":"component","description":"Offset for the split gradient. By default, value is inferred from `data` and `series` if possible. Must be generated from the data array with `getSplitOffset` function.","typeRef":353},{"name":"strokeWidth","required":false,"source":"component","description":"Stroke width for the chart areas","typeRef":353},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the text displayed inside the chart, `'dimmed'` by default","typeRef":162},{"name":"tickLine","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which axis should have tick line, `'y'` by default","typeRef":61},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip position animation duration in ms, `0` by default","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to the `Tooltip` component","typeRef":197},{"name":"type","required":false,"source":"component","literalValues":["default","percent","split","stacked"],"description":"Controls how chart areas are positioned relative to each other","typeRef":29},{"name":"unit","required":false,"source":"component","description":"Unit displayed next to each tick in y-axis","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withDots","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dots should be displayed","typeRef":341},{"name":"withGradient","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the chart area should be represented with a gradient instead of the solid color","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart legend should be displayed, `false` by default","typeRef":341},{"name":"withPointLabels","required":false,"source":"component","literalValues":[false,true],"description":"If set, each point has an associated label","typeRef":341},{"name":"withRightYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart tooltip should be displayed, `true` by default","typeRef":341},{"name":"withXAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether x-axis should be displayed, `true` by default","typeRef":341},{"name":"withYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether y-axis should be displayed, `true` by default","typeRef":341},{"name":"xAxisLabel","required":false,"source":"component","description":"A label to display below the x-axis","typeRef":359},{"name":"xAxisProps","required":false,"source":"component","description":"Props passed down to the `XAxis` recharts component","typeRef":198},{"name":"yAxisLabel","required":false,"source":"component","description":"A label to display next to the y-axis","typeRef":359},{"name":"yAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component","typeRef":199}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"AreaGradient","package":"@mantine/charts","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/charts/area-gradient/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level chart implementation helper"},{"name":"AspectRatio","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/aspect-ratio/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"ratio","required":false,"source":"component","description":"Aspect ratio, for example, `16 / 9`, `4 / 3`, `1920 / 1080`","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Autocomplete","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/autocomplete/","props":[{"name":"attributes","required":false,"source":"component","typeRef":405},{"name":"autoSelectOnBlur","required":false,"source":"component","literalValues":[false,true],"description":"If set, the highlighted option is selected when the input loses focus","typeRef":341},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":172},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"If set, the clear button is displayed when the component has a value","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"comboboxProps","required":false,"source":"component","description":"Props passed down to `Combobox` component","typeRef":153},{"name":"data","required":false,"source":"component","description":"Data used to display options. Values must be unique.","typeRef":152},{"name":"defaultDropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled dropdown initial opened state","typeRef":341},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"dropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled dropdown opened state","typeRef":341},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"floatingHeight","required":false,"source":"component","literalValues":["viewport"],"description":"If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware.","typeRef":78},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"limit","required":false,"source":"component","description":"Maximum number of options displayed at a time, `Infinity` by default","typeRef":353},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxDropdownHeight","required":false,"source":"component","description":"`max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default","typeRef":365},{"name":"openOnFocus","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown opens when the input receives focus","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props passed to the underlying `ScrollArea` component in the dropdown","typeRef":274},{"name":"selectFirstOptionOnChange","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when value changes, `false` by default","typeRef":341},{"name":"selectFirstOptionOnDropdownOpen","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when dropdown opens, `false` by default","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withScrollArea","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Avatar","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/avatar/","props":[{"name":"allowedInitialsColors","required":false,"source":"component","description":"A list of colors that is used for autogenerated initials. By default, all default Mantine colors can be used except gray and dark.","typeRef":164},{"name":"attributes","required":false,"source":"component","typeRef":404},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","initials","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":163},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration for `variant=\"gradient\"`","typeRef":179},{"name":"imageProps","required":false,"source":"component","description":"Attributes passed down to `img` element","typeRef":260},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Width and height of the avatar, numbers are converted to rem","typeRef":355},{"name":"src","required":false,"source":"component","description":"Image url, if the image cannot be loaded or `src={null}`, then placeholder is displayed instead","typeRef":352},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","transparent","white"],"typeRef":115}],"blockedProps":[],"subcomponents":["Avatar.Group"],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Avatar.Group","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/avatar/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"spacing","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Negative space between Avatar components","typeRef":183},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"AvatarGroup","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/avatar-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"spacing","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Negative space between Avatar components","typeRef":183},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"BackgroundImage","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/background-image/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"src","required":true,"source":"component","description":"Image url","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Badge","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/badge/","props":[{"name":"attributes","required":false,"source":"component","typeRef":432},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"circle","required":false,"source":"component","literalValues":[false,true],"description":"If set, badge `min-width` becomes equal to its `height` and horizontal padding is removed","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether Badge should take 100% of its parent width","typeRef":341},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration used when `variant=\\\"gradient\\\"`","typeRef":179},{"name":"leftSection","required":false,"source":"component","description":"Content displayed on the left side of the badge label","typeRef":263},{"name":"rightSection","required":false,"source":"component","description":"Content displayed on the right side of the badge label","typeRef":263},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size`, `height` and horizontal `padding`","typeRef":182},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","dot","filled","gradient","light","outline","transparent","white"],"typeRef":116}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"BarChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/bar-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":436},{"name":"barChartProps","required":false,"source":"component","description":"Props passed down to recharts `BarChart` component","typeRef":91},{"name":"barLabelColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the bar label, by default the value is determined by the chart orientation","typeRef":162},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"cursorFill","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Fill of hovered bar section, by default value is based on color scheme","typeRef":162},{"name":"data","required":true,"source":"component","description":"Data used to display chart.","typeRef":267},{"name":"dataKey","required":true,"source":"component","description":"Key of the `data` object for x-axis values","typeRef":359},{"name":"fillOpacity","required":false,"source":"component","description":"Controls fill opacity of all bars","typeRef":353},{"name":"gridAxis","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which lines should be displayed in the grid, `'x'` by default","typeRef":61},{"name":"gridColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the grid and cursor lines, by default depends on color scheme","typeRef":162},{"name":"gridProps","required":false,"source":"component","description":"Props passed down to the `CartesianGrid` component","typeRef":189},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to the `Legend` component","typeRef":190},{"name":"maxBarWidth","required":false,"source":"component","description":"Maximum bar width in px","typeRef":353},{"name":"minBarSize","required":false,"source":"component","description":"Sets minimum height of the bar in px","typeRef":353},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Chart orientation, `'horizontal'` by default","typeRef":36},{"name":"referenceLines","required":false,"source":"component","description":"Reference lines that should be displayed on the chart","typeRef":149},{"name":"rightYAxisLabel","required":false,"source":"component","description":"A label to display next to the right y-axis","typeRef":359},{"name":"rightYAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component rendered on the right side","typeRef":199},{"name":"series","required":true,"source":"component","description":"An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array.","typeRef":141},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the text displayed inside the chart, `'dimmed'` by default","typeRef":162},{"name":"tickLine","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which axis should have tick line, `'y'` by default","typeRef":61},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip position animation duration in ms, `0` by default","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to the `Tooltip` component","typeRef":197},{"name":"type","required":false,"source":"component","literalValues":["default","percent","stacked","waterfall"],"description":"Controls how bars are positioned relative to each other","typeRef":30},{"name":"unit","required":false,"source":"component","description":"Unit displayed next to each tick in y-axis","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withBarValueLabel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether a label with bar value should be displayed on top of each bar, incompatible with `type=\"stacked\"` and `type=\"percent\"`","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart legend should be displayed, `false` by default","typeRef":341},{"name":"withRightYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart tooltip should be displayed, `true` by default","typeRef":341},{"name":"withXAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether x-axis should be displayed, `true` by default","typeRef":341},{"name":"withYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether y-axis should be displayed, `true` by default","typeRef":341},{"name":"xAxisLabel","required":false,"source":"component","description":"A label to display below the x-axis","typeRef":359},{"name":"xAxisProps","required":false,"source":"component","description":"Props passed down to the `XAxis` recharts component","typeRef":198},{"name":"yAxisLabel","required":false,"source":"component","description":"A label to display next to the y-axis","typeRef":359},{"name":"yAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component","typeRef":199}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"BarsList","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/bars-list/","props":[{"name":"attributes","required":false,"source":"component","typeRef":453},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color","typeRef":341},{"name":"barColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Default bar background color, used when item does not have color specified","typeRef":162},{"name":"barGap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls gap between bars","typeRef":183},{"name":"barHeight","required":false,"source":"component","description":"Bar height","typeRef":365},{"name":"barTextColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Bar text color, overrides autoContrast","typeRef":162},{"name":"barsLabel","required":false,"source":"component","description":"Label displayed above the bars column","typeRef":359},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data for bars","typeRef":142},{"name":"minBarSize","required":false,"source":"component","description":"Minimum bar width","typeRef":365},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"valueLabel","required":false,"source":"component","description":"Label displayed above the values column","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Blockquote","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/blockquote/","props":[{"name":"attributes","required":false,"source":"component","typeRef":391},{"name":"cite","required":false,"source":"component","description":"Reference to a cited quote","typeRef":263},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"icon","required":false,"source":"component","description":"Blockquote icon, displayed at the top left side","typeRef":263},{"name":"iconSize","required":false,"source":"component","description":"Controls icon `width` and `height`, numbers are converted to rem","typeRef":365},{"name":"textWrap","required":false,"source":"component","literalValues":["balance","nowrap","pretty","stable","wrap"],"description":"Controls `text-wrap` CSS property","typeRef":79},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Box","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/box/","props":[{"name":"size","required":false,"source":"component","description":"Size passed from parent component, sets `data-size` if value is not number like","typeRef":365},{"name":"variant","required":false,"source":"component","description":"Variant passed from parent component, sets `data-variant`","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Breadcrumbs","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/breadcrumbs/","props":[{"name":"attributes","required":false,"source":"component","typeRef":467},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"separator","required":false,"source":"component","description":"Separator between children","typeRef":263},{"name":"separatorMargin","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls spacing between separator and breadcrumb","typeRef":183},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"BubbleChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/bubble-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":469},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the chart items. Key of `theme.colors` or any valid CSS color.","typeRef":162},{"name":"data","required":true,"source":"component","description":"Chart data","typeRef":267},{"name":"dataKey","required":true,"source":"component","description":"Data keys for x, y and z axis","typeRef":144},{"name":"gridColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the grid and cursor lines, by default depends on color scheme","typeRef":162},{"name":"label","required":false,"source":"component","description":"Chart label displayed next to the x axis","typeRef":359},{"name":"range","required":true,"source":"component","description":"Z axis range","typeRef":334},{"name":"scatterProps","required":false,"source":"component","description":"Props passed down to the `Scatter` component","typeRef":207},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the text displayed inside the chart","typeRef":162},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to the `Tooltip` component","typeRef":197},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the tooltip should be displayed","typeRef":341},{"name":"xAxisProps","required":false,"source":"component","description":"Props passed down to the `XAxis` recharts component","typeRef":198},{"name":"yAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component","typeRef":199},{"name":"zAxisProps","required":false,"source":"component","description":"Props passed down to the `ZAxis` recharts component","typeRef":200}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Burger","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/burger/","props":[{"name":"attributes","required":false,"source":"component","typeRef":454},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` of any valid CSS value, by default `theme.white` in dark color scheme and `theme.black` in light","typeRef":162},{"name":"lineSize","required":false,"source":"component","description":"Controls height of lines, by default calculated based on `size` prop","typeRef":365},{"name":"opened","required":false,"source":"component","literalValues":[false,true],"description":"State of the burger, when `true` burger is transformed into X","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls burger `width` and `height`, numbers are converted to rem","typeRef":355},{"name":"transitionDuration","required":false,"source":"component","description":"`transition-duration` property value in ms","typeRef":353},{"name":"transitionTimingFunction","required":false,"source":"component","description":"`transition-timing-function` property value","typeRef":359},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Button","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/button/","props":[{"name":"attributes","required":false,"source":"component","typeRef":431},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Sets `width: 100%`","typeRef":341},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration used for `variant=\"gradient\"`","typeRef":179},{"name":"justify","required":false,"source":"component","literalValues":["-moz-initial","center","end","flex-end","flex-start","inherit","initial","left","normal","revert","revert-layer","right","space-around","space-between","space-evenly","start","stretch","unset"],"description":"Sets `justify-content` of `inner` element, can be used to change distribution of sections and label","typeRef":248},{"name":"leftSection","required":false,"source":"component","description":"Content on the left side of the button label","typeRef":263},{"name":"loaderProps","required":false,"source":"component","description":"Props added to the `Loader` component (only visible when `loading` prop is set)","typeRef":176},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"If set, the `Loader` component is displayed over the button","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content on the right side of the button label","typeRef":263},{"name":"size","required":false,"source":"component","literalValues":["compact-lg","compact-md","compact-sm","compact-xl","compact-xs","lg","md","sm","xl","xs"],"description":"Controls button `height`, `font-size` and horizontal `padding`","typeRef":145},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","subtle","transparent","white"],"typeRef":117}],"blockedProps":[],"subcomponents":["Button.Group","Button.GroupSection"],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Button.Group","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/button/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"borderWidth","required":false,"source":"component","description":"`border-width` of the child `Button` components. Numbers are converted to rem.","typeRef":365},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Orientation of the group","typeRef":36},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Button.GroupSection","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/button/","props":[{"name":"attributes","required":false,"source":"component","typeRef":401},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration used when `variant=\"gradient\"`","typeRef":179},{"name":"size","required":false,"source":"component","literalValues":["compact-lg","compact-md","compact-sm","compact-xl","compact-xs","lg","md","sm","xl","xs"],"description":"Controls section `height`, `font-size` and horizontal `padding`","typeRef":145},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","subtle","transparent","white"],"typeRef":117}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ButtonGroup","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/button-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"borderWidth","required":false,"source":"component","description":"`border-width` of the child `Button` components. Numbers are converted to rem.","typeRef":365},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Orientation of the group","typeRef":36},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"ButtonGroupSection","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/button-group-section/","props":[{"name":"attributes","required":false,"source":"component","typeRef":401},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration used when `variant=\"gradient\"`","typeRef":179},{"name":"size","required":false,"source":"component","literalValues":["compact-lg","compact-md","compact-sm","compact-xl","compact-xs","lg","md","sm","xl","xs"],"description":"Controls section `height`, `font-size` and horizontal `padding`","typeRef":145},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","subtle","transparent","white"],"typeRef":117}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Calendar","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/calendar/","props":[{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":445},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level in uncontrolled mode","typeRef":52},{"name":"enableKeyboardNavigation","required":false,"source":"component","literalValues":[false,true],"description":"Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view)","typeRef":341},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level displayed in controlled mode","typeRef":52},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Max level that user can go up to (decade, year, month)","typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Min level that user can go down to (decade, year, month)","typeRef":52},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"static","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"CalendarHeader","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/calendar-header/","props":[{"name":"attributes","required":false,"source":"component","typeRef":388},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the header should take the full width of its container","typeRef":341},{"name":"hasNextLevel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next level button should be enabled","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"label","required":false,"source":"component","description":"Label displayed between next and previous buttons","typeRef":263},{"name":"levelControlAriaLabel","required":false,"source":"component","description":"Level control `aria-label`","typeRef":359},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withNext","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next control should be rendered","typeRef":341},{"name":"withPrevious","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether previous control should be rendered","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"Card","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/card/","props":[{"name":"attributes","required":false,"source":"component","typeRef":473},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Card orientation","typeRef":36},{"name":"padding","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value to set padding","typeRef":183},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":["Card.Section"],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Card.Section","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/card/","props":[{"name":"inheritPadding","required":false,"source":"component","literalValues":[false,true],"description":"If set, the section inherits padding from the parent `Card`","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":224},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"CardSection","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/card-section/","props":[{"name":"inheritPadding","required":false,"source":"component","literalValues":[false,true],"description":"If set, the section inherits padding from the parent `Card`","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":224},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Center","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/center/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"inline","required":false,"source":"component","literalValues":[false,true],"description":"If set, `inline-flex` is used instead of `flex`","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"ChartLegend","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/chart-legend/","props":[{"name":"attributes","required":false,"source":"component","typeRef":437},{"name":"centered","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the legend should be centered","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"legendPosition","required":true,"source":"component","literalValues":["bottom","middle","top"],"description":"Position of the legend relative to the chart, used to apply margin on the corresponding side","typeRef":18},{"name":"payload","required":false,"source":"component","description":"Chart data provided by recharts","typeRef":358},{"name":"series","required":false,"source":"component","description":"Data used for labels, only applicable for area charts: AreaChart, LineChart, BarChart","typeRef":150},{"name":"showColor","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether color swatch should be shown next to the label","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"ChartTooltip","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/chart-tooltip/","props":[{"name":"attributes","required":false,"source":"component","typeRef":476},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"label","required":false,"source":"component","description":"Main tooltip label","typeRef":263},{"name":"payload","required":false,"source":"component","description":"Chart data provided by recharts","typeRef":268},{"name":"segmentId","required":false,"source":"component","description":"Segment to display data for, identified by its index in the data array (preferred, isolates duplicate names) or by its name. Only applicable when `type=\"radial\"`. If not set, all data is rendered.","typeRef":365},{"name":"series","required":false,"source":"component","description":"Chart series data, applicable only for `area` type","typeRef":150},{"name":"showColor","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the color swatch should be visible","typeRef":341},{"name":"type","required":false,"source":"component","literalValues":["area","radial","scatter"],"description":"Tooltip type that determines the content and styles, `area` for LineChart, AreaChart and BarChart, `radial` for DonutChart and PieChart","typeRef":11},{"name":"unit","required":false,"source":"component","description":"Data units, provided by parent component","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"CheckIcon","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/check-icon/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"display","required":false,"source":"component","typeRef":365},{"name":"opacity","required":false,"source":"component","typeRef":365},{"name":"radius","required":false,"source":"component","typeRef":365},{"name":"size","required":false,"source":"component","typeRef":365},{"name":"type","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Checkbox","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/checkbox/","props":[{"name":"attributes","required":false,"source":"component","typeRef":373},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts icon color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to set input background color in checked state","typeRef":162},{"name":"description","required":false,"source":"component","description":"Description below the label","typeRef":263},{"name":"error","required":false,"source":"component","description":"Error message below the label","typeRef":263},{"name":"iconColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`.","typeRef":162},{"name":"indeterminate","required":false,"source":"component","literalValues":[false,true],"description":"Indeterminate state of the checkbox. If set, `checked` prop is dismissed.","typeRef":341},{"name":"label","required":false,"source":"component","description":"`label` associated with the checkbox","typeRef":263},{"name":"labelPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the label relative to the input","typeRef":47},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the component","typeRef":182},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","outline"],"typeRef":119},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"If set, applies error styles to the checkbox when `error` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":103}],"blockedProps":[],"subcomponents":["Checkbox.Card","Checkbox.Group","Checkbox.Indicator"],"bind":{"type":"boolean","initialProp":"defaultChecked"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Checkbox.Card","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/checkbox/","props":[{"name":"attributes","required":false,"source":"component","typeRef":390},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value of the checkbox, used with `Checkbox.Group`","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Checkbox.Group","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/checkbox/","props":[{"name":"attributes","required":false,"source":"component","typeRef":426},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":330},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input for uncontrolled forms","typeRef":104},{"name":"hiddenInputValuesSeparator","required":false,"source":"component","description":"Separator for values in the hidden input for uncontrolled forms","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelElement","required":false,"source":"component","literalValues":["div","label"],"description":"Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually.","typeRef":31},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"maxSelectedValues","required":false,"source":"component","description":"Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the `Input.Wrapper`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":330},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element (`Input.Wrapper` component)","typeRef":103}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string[]","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Checkbox.Indicator","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/checkbox/","props":[{"name":"attributes","required":false,"source":"component","typeRef":403},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts icon color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to set input background color in checked state","typeRef":162},{"name":"iconColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast`","typeRef":162},{"name":"indeterminate","required":false,"source":"component","literalValues":[false,true],"description":"Indeterminate state of the checkbox. If set, `checked` prop is ignored.","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the component","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","outline"],"typeRef":118}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"CheckboxCard","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/checkbox-card/","props":[{"name":"attributes","required":false,"source":"component","typeRef":390},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value of the checkbox, used with `Checkbox.Group`","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"CheckboxGroup","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/checkbox-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":426},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":330},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input for uncontrolled forms","typeRef":104},{"name":"hiddenInputValuesSeparator","required":false,"source":"component","description":"Separator for values in the hidden input for uncontrolled forms","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelElement","required":false,"source":"component","literalValues":["div","label"],"description":"Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually.","typeRef":31},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"maxSelectedValues","required":false,"source":"component","description":"Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the `Input.Wrapper`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":330},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element (`Input.Wrapper` component)","typeRef":103}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string[]","initialProp":"defaultValue"},"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"CheckboxIndicator","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/checkbox-indicator/","props":[{"name":"attributes","required":false,"source":"component","typeRef":403},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts icon color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to set input background color in checked state","typeRef":162},{"name":"iconColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast`","typeRef":162},{"name":"indeterminate","required":false,"source":"component","literalValues":[false,true],"description":"Indeterminate state of the checkbox. If set, `checked` prop is ignored.","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the component","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","outline"],"typeRef":118}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Chip","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/chip/","props":[{"name":"attributes","required":false,"source":"component","typeRef":408},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on the chip background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color.","typeRef":162},{"name":"icon","required":false,"source":"component","description":"Any element or component to replace the default icon","typeRef":263},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls various properties related to the component size","typeRef":81},{"name":"type","required":false,"source":"component","literalValues":["checkbox","radio"],"description":"Chip input type","typeRef":25},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","light","outline"],"typeRef":120},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":103}],"blockedProps":[],"subcomponents":["Chip.Group"],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Chip.Group","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/chip/","props":[{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component initial value","typeRef":99},{"name":"multiple","required":false,"source":"component","description":"If set, multiple values can be selected","typeRef":186},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":99}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ChipGroup","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/chip-group/","props":[{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component initial value","typeRef":99},{"name":"multiple","required":false,"source":"component","description":"If set, multiple values can be selected","typeRef":186},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":99}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"CloseButton","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/close-button/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"icon","required":false,"source":"component","description":"React node to replace the default close icon. If set, `iconSize` prop is ignored.","typeRef":263},{"name":"iconSize","required":false,"source":"component","description":"`X` icon `width` and `height`","typeRef":365},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls width and height of the button. Numbers are converted to rem.","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["subtle","transparent"],"typeRef":121}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"CloseIcon","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/close-icon/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"display","required":false,"source":"component","typeRef":365},{"name":"opacity","required":false,"source":"component","typeRef":365},{"name":"radius","required":false,"source":"component","typeRef":365},{"name":"size","required":false,"source":"component","description":"Icon width and height, `var(--icon-size)` by default","typeRef":359},{"name":"type","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Code","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/code/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"block","required":false,"source":"component","literalValues":[false,true],"description":"If set, code is rendered in `pre`","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls `background-color` of the code. By default, calculated based on the color scheme.","typeRef":162},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Collapse","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/collapse/","props":[{"name":"animateOpacity","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the opacity is animated","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"expanded","required":true,"source":"component","literalValues":[false,true],"description":"Expanded state","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation.","typeRef":341},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Collapse orientation","typeRef":36},{"name":"transitionDuration","required":false,"source":"component","description":"Transition duration in ms","typeRef":353},{"name":"transitionTimingFunction","required":false,"source":"component","description":"Transition timing function","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Collapsible","package":"@homarr/widgets","category":"interaction","safety":"allowed","description":"Shows and hides a bounded content section.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"defaultOpen","source":"component","required":false,"typeRef":336},{"name":"title","source":"component","required":true,"typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ColorInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/color-input/","props":[{"name":"attributes","required":false,"source":"component","typeRef":374},{"name":"closeOnColorSwatchClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is closed when one of the color swatches is clicked","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"disallowInput","required":false,"source":"component","literalValues":[false,true],"description":"If input is not allowed, the user can only pick value with color picker and swatches","typeRef":341},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"eyeDropperButtonProps","required":false,"source":"component","description":"Props passed down to the eye dropper button","typeRef":266},{"name":"eyeDropperIcon","required":false,"source":"component","description":"An icon to replace the default eye dropper icon","typeRef":263},{"name":"fixOnBlur","required":false,"source":"component","literalValues":[false,true],"description":"If set, the input value resets to the last known valid value when the input loses focus","typeRef":341},{"name":"format","required":false,"source":"component","literalValues":["hex","hexa","hsl","hsla","rgb","rgba"],"description":"Color format. `hexa`, `rgba`, `hsla` values render alpha channel slider","typeRef":35},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"popoverProps","required":false,"source":"component","description":"Props passed down to the `Popover` component","typeRef":242},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"swatches","required":false,"source":"component","description":"A list of colors used to display swatches list below the color picker","typeRef":368},{"name":"swatchesPerRow","required":false,"source":"component","description":"Number of swatches per row","typeRef":353},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withEyeDropper","required":false,"source":"component","literalValues":[false,true],"description":"If set, the eye dropper button is displayed in the right section","typeRef":341},{"name":"withPicker","required":false,"source":"component","literalValues":[false,true],"description":"If `false`, the component displays only swatches","typeRef":341},{"name":"withPreview","required":false,"source":"component","literalValues":[false,true],"description":"If set, the preview color swatch is displayed in the left section of the input","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ColorPicker","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/color-picker/","props":[{"name":"alphaLabel","required":false,"source":"component","description":"Alpha slider `aria-label`","typeRef":359},{"name":"attributes","required":false,"source":"component","typeRef":379},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":359},{"name":"focusable","required":false,"source":"component","literalValues":[false,true],"description":"If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard","typeRef":341},{"name":"format","required":false,"source":"component","literalValues":["hex","hexa","hsl","hsla","rgb","rgba"],"description":"Color format. `hexa`, `rgba`, `hsla` values render alpha channel slider","typeRef":35},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"If set, the component takes 100% width of its container","typeRef":341},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props spread to the hidden input","typeRef":104},{"name":"hueLabel","required":false,"source":"component","description":"Hue slider `aria-label`","typeRef":359},{"name":"saturationLabel","required":false,"source":"component","description":"Saturation slider `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":182},{"name":"swatches","required":false,"source":"component","description":"A list of colors used to display swatches list below the color picker","typeRef":368},{"name":"swatchesPerRow","required":false,"source":"component","description":"Number of swatches per row","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withPicker","required":false,"source":"component","literalValues":[false,true],"description":"If `false`, the component displays only swatches","typeRef":341}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ColorSchemeScript","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/color-scheme-script/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Writes global document state"},{"name":"ColorSwatch","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/color-swatch/","props":[{"name":"attributes","required":false,"source":"component","typeRef":452},{"name":"color","required":true,"source":"component","description":"Valid CSS color to display","typeRef":359},{"name":"size","required":false,"source":"component","description":"Swatch `width` and `height`, any valid CSS value, numbers are converted to rem.","typeRef":254},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withShadow","required":false,"source":"component","literalValues":[false,true],"description":"If set, the swatch has inner `box-shadow`","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Combobox","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":["Combobox.Chevron","Combobox.ClearButton","Combobox.Dropdown","Combobox.DropdownTarget","Combobox.Empty","Combobox.EventsTarget","Combobox.Footer","Combobox.Group","Combobox.Header","Combobox.HiddenInput","Combobox.Option","Combobox.Options","Combobox.Search","Combobox.Target"],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Chevron","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.ClearButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Dropdown","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.DropdownTarget","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Empty","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.EventsTarget","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Footer","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Group","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Header","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.HiddenInput","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Option","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Options","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Search","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Combobox.Target","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxChevron","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-chevron/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxClearButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-clear-button/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxDropdown","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-dropdown/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxDropdownTarget","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-dropdown-target/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxEmpty","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-empty/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxEventsTarget","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-events-target/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxFooter","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-footer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxGroup","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-group/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxHeader","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-header/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxHiddenInput","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-hidden-input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxOption","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-option/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxOptions","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-options/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxPopover","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-popover/","props":[],"blockedProps":[],"subcomponents":["ComboboxPopover.Target"],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxPopover.Target","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-popover/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxPopoverTarget","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-popover-target/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxSearch","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-search/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"ComboboxTarget","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/combobox-target/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"CompositeChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/composite-chart/","props":[{"name":"activeDotProps","required":false,"source":"component","description":"Props passed down to all active dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"attributes","required":false,"source":"component","typeRef":372},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"composedChartProps","required":false,"source":"component","description":"Props passed down to recharts `AreaChart` component","typeRef":91},{"name":"connectNulls","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether points with `null` values should be connected","typeRef":341},{"name":"curveType","required":false,"source":"component","literalValues":["bump","linear","monotone","natural","step","stepAfter","stepBefore"],"description":"Type of the curve","typeRef":69},{"name":"data","required":true,"source":"component","description":"Data used to display chart","typeRef":267},{"name":"dataKey","required":true,"source":"component","description":"Key of the `data` object for x-axis values","typeRef":359},{"name":"dotProps","required":false,"source":"component","description":"Props passed down to all dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"gridAxis","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which lines should be displayed in the grid, `'x'` by default","typeRef":61},{"name":"gridColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the grid and cursor lines, by default depends on color scheme","typeRef":162},{"name":"gridProps","required":false,"source":"component","description":"Props passed down to the `CartesianGrid` component","typeRef":189},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to the `Legend` component","typeRef":190},{"name":"maxBarWidth","required":false,"source":"component","description":"Maximum bar width in px","typeRef":353},{"name":"minBarSize","required":false,"source":"component","description":"Sets minimum height of the bar in px","typeRef":353},{"name":"referenceLines","required":false,"source":"component","description":"Reference lines that should be displayed on the chart","typeRef":149},{"name":"rightYAxisLabel","required":false,"source":"component","description":"A label to display next to the right y-axis","typeRef":359},{"name":"rightYAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component rendered on the right side","typeRef":199},{"name":"series","required":true,"source":"component","description":"An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array.","typeRef":155},{"name":"strokeWidth","required":false,"source":"component","description":"Stroke width for the chart lines","typeRef":353},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the text displayed inside the chart, `'dimmed'` by default","typeRef":162},{"name":"tickLine","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which axis should have tick line, `'y'` by default","typeRef":61},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip position animation duration in ms, `0` by default","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to the `Tooltip` component","typeRef":197},{"name":"unit","required":false,"source":"component","description":"Unit displayed next to each tick in y-axis","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withBarValueLabel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether a label with bar value should be displayed on top of each bar","typeRef":341},{"name":"withDots","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dots should be displayed","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart legend should be displayed, `false` by default","typeRef":341},{"name":"withPointLabels","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether each point should have associated label","typeRef":341},{"name":"withRightYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart tooltip should be displayed, `true` by default","typeRef":341},{"name":"withXAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether x-axis should be displayed, `true` by default","typeRef":341},{"name":"withYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether y-axis should be displayed, `true` by default","typeRef":341},{"name":"xAxisLabel","required":false,"source":"component","description":"A label to display below the x-axis","typeRef":359},{"name":"xAxisProps","required":false,"source":"component","description":"Props passed down to the `XAxis` recharts component","typeRef":198},{"name":"yAxisLabel","required":false,"source":"component","description":"A label to display next to the y-axis","typeRef":359},{"name":"yAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component","typeRef":199}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Container","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/container/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"fluid","required":false,"source":"component","literalValues":[false,true],"description":"If set, the container takes 100% width of its parent and `size` prop is ignored.","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"`max-width` of the container, value is not responsive – it is the same for all screen sizes. Numbers are converted to rem. Ignored when `fluid` prop is set.","typeRef":355},{"name":"strategy","required":false,"source":"component","literalValues":["block","grid"],"description":"Centering strategy","typeRef":14},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"CopyButton","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/copy-button/","props":[{"name":"timeout","required":false,"source":"component","description":"Copied status timeout in ms","typeRef":353},{"name":"value","required":true,"source":"component","description":"Value that is copied to the clipboard when the button is clicked","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"DataList","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/data-list/","props":[{"name":"attributes","required":false,"source":"component","typeRef":461},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value to set gap between items","typeRef":183},{"name":"labelWidth","required":false,"source":"component","description":"Controls min-width of the label (dt) element, any valid CSS value","typeRef":251},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Controls arrangement of label and value within each item. `horizontal` renders label and value side by side, `vertical` stacks label on top of value","typeRef":36},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size` and `line-height`","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withDivider","required":false,"source":"component","literalValues":[false,true],"description":"Adds border between items","typeRef":341}],"blockedProps":[],"subcomponents":["DataList.Item","DataList.ItemLabel","DataList.ItemValue"],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"DataList.Item","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/data-list/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":217},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"DataList.ItemLabel","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/data-list/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":218},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"DataList.ItemValue","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/data-list/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":219},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"DataListItem","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/data-list-item/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":217},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"DataListItemLabel","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/data-list-item-label/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":218},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"DataListItemValue","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/data-list-item-value/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":219},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"DateInput","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/date-input/","props":[{"name":"allowDeselect","required":false,"source":"component","literalValues":[false,true],"description":"If set, the value can be deselected by deleting everything from the input or by clicking the selected date in the dropdown. By default, `true` if `clearable` prop is set, `false` otherwise.","typeRef":341},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":413},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":258},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set.","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level (uncontrolled)","typeRef":52},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":160},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fixOnBlur","required":false,"source":"component","literalValues":[false,true],"description":"If set to `false`, invalid user input is preserved and is not corrected on blur","typeRef":341},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"hasNextLevel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next level button should be enabled","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level (controlled)","typeRef":52},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Max level that user can go up to","typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"popoverProps","required":false,"source":"component","description":"Props passed down to the `Popover` component","typeRef":204},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":156},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":160},{"name":"valueFormat","required":false,"source":"component","description":"`dayjs` format to display input value, `\"MMMM D, YYYY\"` by default","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withNext","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next control should be rendered","typeRef":341},{"name":"withPrevious","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether previous control should be rendered","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"withTime","required":false,"source":"component","literalValues":[false,true],"description":"If set to `true`, the time part of the value is preserved. Set this to `true` when `valueFormat` includes time (e.g. `\"YYYY-MM-DD HH:mm\"`).","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"DatePicker","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/date-picker/","props":[{"name":"allowDeselect","required":false,"source":"component","description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\"","typeRef":106},{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":446},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level (uncontrolled)","typeRef":52},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":159},{"name":"enableKeyboardNavigation","required":false,"source":"component","literalValues":[false,true],"description":"Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view)","typeRef":341},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level (controlled)","typeRef":52},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":157},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"type","required":false,"source":"component","literalValues":["default","multiple","range"],"description":"Picker type: range, multiple or default","typeRef":326},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value for controlled component","typeRef":159},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"DatePickerInput","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/date-picker-input/","props":[{"name":"allowDeselect","required":false,"source":"component","description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\"","typeRef":106},{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":414},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":258},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set.","typeRef":341},{"name":"closeOnChange","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the dropdown is closed when date is selected, not applicable with `type=\"multiple\"`","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level (uncontrolled)","typeRef":52},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":159},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"enableKeyboardNavigation","required":false,"source":"component","literalValues":[false,true],"description":"Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view)","typeRef":341},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"labelSeparator","required":false,"source":"component","description":"Separator between range value","typeRef":359},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level (controlled)","typeRef":52},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"popoverProps","required":false,"source":"component","description":"Props passed down to `Popover` component","typeRef":204},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":157},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"sortDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dates values should be sorted before `onChange` call, only applicable with type=\"multiple\"","typeRef":341},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["default","multiple","range"],"description":"Picker type: range, multiple or default","typeRef":158},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value for controlled component","typeRef":159},{"name":"valueFormat","required":false,"source":"component","description":"`dayjs` format for input value","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[{"name":"dropdownType","reason":"Modal picker mode escapes the widget overlay boundary"},{"name":"modalProps","reason":"Modal picker configuration escapes the widget overlay boundary"}],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"DateTimePicker","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/date-time-picker/","props":[{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":415},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":258},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set.","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level in uncontrolled mode","typeRef":52},{"name":"defaultTimeValue","required":false,"source":"component","description":"Default time value in HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected.","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":159},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"endTimePickerProps","required":false,"source":"component","description":"Props passed down to the end time `TimePicker` component in range mode","typeRef":196},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"labelSeparator","required":false,"source":"component","description":"Separator between range values","typeRef":359},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level displayed in controlled mode","typeRef":52},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Max level that user can go up to","typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"popoverProps","required":false,"source":"component","description":"Props passed down to `Popover` component","typeRef":204},{"name":"presets","required":false,"source":"component","description":"Presets values","typeRef":157},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"sortDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dates values should be sorted before `onChange` call, only applicable with type=\"multiple\"","typeRef":341},{"name":"submitButtonProps","required":false,"source":"component","description":"Props passed down to the submit button","typeRef":90},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"timePickerProps","required":false,"source":"component","description":"Props passed down to `TimePicker` component","typeRef":196},{"name":"type","required":false,"source":"component","description":"Picker type: range or default","typeRef":325},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":159},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSeconds","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the seconds input should be displayed","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[{"name":"dropdownType","reason":"Modal picker mode escapes the widget overlay boundary"},{"name":"modalProps","reason":"Modal picker configuration escapes the widget overlay boundary"}],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"DatesProvider","package":"@mantine/dates","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/dates/dates-provider/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Replaces a Homarr-owned provider boundary"},{"name":"Day","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/day/","props":[{"name":"attributes","required":false,"source":"component","typeRef":398},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"date","required":true,"source":"component","description":"Date that is displayed in `YYYY-MM-DD` format","typeRef":359},{"name":"firstInRange","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the day is first in range selection","typeRef":341},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the day should take the full width of its cell","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"inRange","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the day is selected in range","typeRef":341},{"name":"lastInRange","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the day is last in range selection","typeRef":341},{"name":"outside","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the day is outside of the current month","typeRef":341},{"name":"selected","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the day is selected","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Control width and height of the day","typeRef":81},{"name":"static","required":false,"source":"component","literalValues":[false,true],"description":"Determines which element is used as root, `'button'` by default, `'div'` if static prop is set","typeRef":341},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the day is considered to be a weekend","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"DecadeLevel","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/decade-level/","props":[{"name":"attributes","required":false,"source":"component","typeRef":384},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"decade","required":true,"source":"component","description":"Displayed decade","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"levelControlAriaLabel","required":false,"source":"component","description":"Level control `aria-label`","typeRef":359},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"styles","required":false,"source":"component","typeRef":238},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withNext","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next control should be rendered","typeRef":341},{"name":"withPrevious","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether previous control should be rendered","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"DecadeLevelGroup","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/decade-level-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":386},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"decade","required":true,"source":"component","description":"Displayed decade","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns to display next to each other","typeRef":353},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"styles","required":false,"source":"component","typeRef":238},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"Dialog","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/dialog/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes the widget layout and focus boundary"},{"name":"DirectionProvider","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/direction-provider/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Replaces a Homarr-owned provider boundary"},{"name":"Divider","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/divider/","props":[{"name":"attributes","required":false,"source":"component","typeRef":429},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color value","typeRef":162},{"name":"label","required":false,"source":"component","description":"Divider label, visible only with `orientation=\"horizontal\"`","typeRef":263},{"name":"labelPosition","required":false,"source":"component","literalValues":["center","left","right"],"description":"Label position","typeRef":22},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Divider orientation","typeRef":36},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls width/height (depends on orientation)","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["dashed","dotted","solid"],"typeRef":122}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"DonutChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/donut-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":422},{"name":"chartLabel","required":false,"source":"component","description":"Chart label, displayed in the center of the chart","typeRef":365},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data used to render chart","typeRef":165},{"name":"endAngle","required":false,"source":"component","description":"Controls angle at which charts ends. Set to `0` to render the chart as semicircle.","typeRef":353},{"name":"labelColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls text color of all labels, by default depends on color scheme","typeRef":162},{"name":"labelsType","required":false,"source":"component","literalValues":["name","percent","value"],"description":"Type of labels to display, `'value'` by default","typeRef":77},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to recharts `Legend` component","typeRef":190},{"name":"paddingAngle","required":false,"source":"component","description":"Controls padding between segments","typeRef":353},{"name":"pieChartProps","required":false,"source":"component","description":"Props passed down to recharts `PieChart` component","typeRef":101},{"name":"pieProps","required":false,"source":"component","description":"Props passed down to recharts `Pie` component","typeRef":203},{"name":"size","required":false,"source":"component","description":"Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`.","typeRef":353},{"name":"startAngle","required":false,"source":"component","description":"Controls angle at which chart starts. Set to `180` to render the chart as semicircle.","typeRef":353},{"name":"strokeColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the segments stroke, by default depends on color scheme","typeRef":162},{"name":"strokeWidth","required":false,"source":"component","description":"Controls width of segments stroke","typeRef":353},{"name":"thickness","required":false,"source":"component","description":"Controls thickness of the chart segments","typeRef":353},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip animation duration in ms","typeRef":353},{"name":"tooltipDataSource","required":false,"source":"component","literalValues":["all","segment"],"description":"Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment.","typeRef":9},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to `Tooltip` recharts component","typeRef":197},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withLabels","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether each segment should have associated label","typeRef":341},{"name":"withLabelsLine","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether segments labels should have lines that connect the segment with the label","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the legend should be displayed","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the tooltip should be displayed when one of the section is hovered","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Drawer","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":["Drawer.Body","Drawer.CloseButton","Drawer.Content","Drawer.Header","Drawer.Overlay","Drawer.Root","Drawer.Stack","Drawer.Title"],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.Body","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.CloseButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.Content","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.Header","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.Overlay","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.Root","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.Stack","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Drawer.Title","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerBody","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-body/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerCloseButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-close-button/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerContent","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-content/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerHeader","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-header/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerOverlay","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-overlay/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerRoot","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-root/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerStack","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-stack/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"DrawerTitle","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/drawer-title/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"EmptyState","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","left","right"],"description":"Content alignment. `center` stacks the content in a centered column, `left`/`right` place the indicator on the side with the content next to it","typeRef":22},{"name":"attributes","required":false,"source":"component","typeRef":380},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, used by `filled` and `light` variants","typeRef":162},{"name":"description","required":false,"source":"component","description":"Description content, rendered inside `EmptyState.Description`","typeRef":263},{"name":"icon","required":false,"source":"component","description":"Icon or illustration, rendered inside `EmptyState.Indicator`","typeRef":263},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls indicator size, gap between elements and font sizes of title and description","typeRef":81},{"name":"title","required":false,"source":"component","description":"Title content, rendered inside `EmptyState.Title`","typeRef":263},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","light"],"description":"Controls the indicator appearance. `filled` and `light` display a colored circular background behind the icon. If not set, the icon is displayed with dimmed color","typeRef":33},{"name":"withIndicatorBackground","required":false,"source":"component","literalValues":[false,true],"description":"If set, a neutral circular background is displayed behind the indicator. Setting `variant` always displays a colored background regardless of this prop","typeRef":341}],"blockedProps":[],"subcomponents":["EmptyState.Actions","EmptyState.Description","EmptyState.Indicator","EmptyState.Title"],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyState.Actions","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":209},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyState.Description","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":212},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyState.Indicator","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":216},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyState.Title","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"order","required":false,"source":"component","literalValues":[1,2,3,4,5,6],"description":"Heading order, renders the title as `h1`–`h6` element. By default, the title is rendered as a `div` without semantic heading level","typeRef":137},{"name":"styles","required":false,"source":"component","typeRef":225},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyStateActions","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state-actions/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":209},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyStateDescription","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state-description/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":212},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyStateIndicator","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state-indicator/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":216},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"EmptyStateTitle","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/empty-state-title/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"order","required":false,"source":"component","literalValues":[1,2,3,4,5,6],"description":"Heading order, renders the title as `h1`–`h6` element. By default, the title is rendered as a `div` without semantic heading level","typeRef":137},{"name":"styles","required":false,"source":"component","typeRef":225},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Fieldset","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/fieldset/","props":[{"name":"attributes","required":false,"source":"component","typeRef":443},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"legend","required":false,"source":"component","description":"Fieldset legend","typeRef":263},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":123}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"FileButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/file-button/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Requests local file-system access"},{"name":"FileInput","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/file-input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Requests local file-system access"},{"name":"FlatTreeNode","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/flat-tree-node/","props":[{"name":"checkOnSpace","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node is checked on space key press","typeRef":341},{"name":"expandOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node with children is expanded on click","typeRef":341},{"name":"expandOnSpace","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node with children is expanded on space key press","typeRef":341},{"name":"expanded","required":true,"source":"component","literalValues":[false,true],"description":"Whether the node is expanded","typeRef":341},{"name":"hasChildren","required":true,"source":"component","literalValues":[false,true],"description":"Whether the node has children","typeRef":341},{"name":"level","required":true,"source":"component","description":"Nesting level of the node, starts at 1","typeRef":353},{"name":"linesPath","required":false,"source":"component","description":"Line state per ancestor + own level, computed by `flattenTreeData`. When provided and the tree root has `data-with-lines`, connector lines are rendered.","typeRef":166},{"name":"node","required":true,"source":"component","description":"Node data from tree data","typeRef":320},{"name":"parent","required":true,"source":"component","description":"Value of the parent node, `null` for root nodes","typeRef":352},{"name":"selectOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node is selected on click","typeRef":341},{"name":"style","required":false,"source":"component","description":"Style to apply to the root element, used for virtualizer positioning","typeRef":257},{"name":"tree","required":true,"source":"component","description":"Tree controller instance, return value of `useTree` hook","typeRef":327}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Flex","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/flex/","props":[{"name":"align","required":false,"source":"component","literalValues":["-moz-initial","anchor-center","baseline","center","end","flex-end","flex-start","inherit","initial","normal","revert","revert-layer","self-end","self-start","start","stretch","unset"],"description":"`align-items` CSS property","typeRef":285},{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnGap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"`column-gap` CSS property","typeRef":284},{"name":"direction","required":false,"source":"component","literalValues":["-moz-initial","column","column-reverse","inherit","initial","revert","revert-layer","row","row-reverse","unset"],"description":"`flex-direction` CSS property","typeRef":294},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"`gap` CSS property","typeRef":284},{"name":"justify","required":false,"source":"component","literalValues":["-moz-initial","center","end","flex-end","flex-start","inherit","initial","left","normal","revert","revert-layer","right","space-around","space-between","space-evenly","start","stretch","unset"],"description":"`justify-content` CSS property","typeRef":299},{"name":"rowGap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"`row-gap` CSS property","typeRef":284},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"wrap","required":false,"source":"component","literalValues":["-moz-initial","inherit","initial","nowrap","revert","revert-layer","unset","wrap","wrap-reverse"],"description":"`flex-wrap` CSS property","typeRef":295}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"FloatingArrow","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/floating-arrow/","props":[{"name":"arrowOffset","required":true,"source":"component","typeRef":353},{"name":"arrowPosition","required":true,"source":"component","literalValues":["center","merge","side"],"typeRef":24},{"name":"arrowRadius","required":true,"source":"component","typeRef":353},{"name":"arrowSize","required":true,"source":"component","typeRef":353},{"name":"arrowX","required":false,"source":"component","typeRef":353},{"name":"arrowY","required":false,"source":"component","typeRef":353},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"position","required":true,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"typeRef":48},{"name":"visible","required":false,"source":"component","literalValues":[false,true],"typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"FloatingIndicator","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/floating-indicator/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"displayAfterTransitionEnd","required":false,"source":"component","literalValues":[false,true],"description":"Controls whether the indicator should be hidden initially and displayed after the parent's transition ends. Set to `true` when the parent container has CSS transitions (e.g., `transform: scale()`) to prevent the indicator from appearing at the wrong position during the parent's animation.","typeRef":341},{"name":"parent","required":false,"source":"component","description":"Parent container element that must have `position: relative`. The indicator's position is calculated relative to this element.","typeRef":169},{"name":"target","required":false,"source":"component","description":"Target element over which the indicator is displayed. The indicator will be positioned to match the target's size and position.","typeRef":169},{"name":"transitionDuration","required":false,"source":"component","description":"Transition duration in ms","typeRef":365},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"FloatingWindow","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/floating-window/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Creates a separate browser window"},{"name":"FocusTrap","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/focus-trap/","props":[],"blockedProps":[],"subcomponents":["FocusTrap.InitialFocus"],"accessibilityRequirements":[],"deniedReason":"Can capture focus outside the widget interaction flow"},{"name":"FocusTrap.InitialFocus","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/focus-trap/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Can capture focus outside the widget interaction flow"},{"name":"FocusTrapInitialFocus","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/focus-trap-initial-focus/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Can capture focus outside the widget interaction flow"},{"name":"FunnelChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/funnel-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":441},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data used to render chart","typeRef":167},{"name":"funnelChartProps","required":false,"source":"component","description":"Props passed down to recharts `FunnelChart` component","typeRef":91},{"name":"funnelProps","required":false,"source":"component","description":"Props passed down to recharts `Pie` component","typeRef":202},{"name":"labelColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls text color of all labels","typeRef":162},{"name":"labelsPosition","required":false,"source":"component","literalValues":["inside","left","right"],"description":"Controls labels position relative to the segment","typeRef":49},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to recharts `Legend` component","typeRef":190},{"name":"size","required":false,"source":"component","description":"Controls chart width and height","typeRef":353},{"name":"strokeColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the segments stroke, by default depends on color scheme","typeRef":162},{"name":"strokeWidth","required":false,"source":"component","description":"Controls width of segments stroke","typeRef":353},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip animation duration in ms","typeRef":353},{"name":"tooltipDataSource","required":false,"source":"component","literalValues":["all","segment"],"description":"Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment.","typeRef":9},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to `Tooltip` recharts component","typeRef":197},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withLabels","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether each segment should have associated label","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the legend should be displayed","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the tooltip should be displayed when a section is hovered","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Grid","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/grid/","props":[{"name":"align","required":false,"source":"component","literalValues":["-moz-initial","anchor-center","baseline","center","end","flex-end","flex-start","inherit","initial","normal","revert","revert-layer","self-end","self-start","start","stretch","unset"],"description":"Sets `align-items`","typeRef":244},{"name":"attributes","required":false,"source":"component","typeRef":392},{"name":"breakpoints","required":false,"source":"component","description":"Breakpoints values, only used with `type=\"container\"`","typeRef":168},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnGap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Column gap, overrides `gap` for horizontal spacing","typeRef":284},{"name":"columns","required":false,"source":"component","description":"Number of columns in each row","typeRef":353},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Gap between columns and rows, key of `theme.spacing` or any valid CSS value","typeRef":284},{"name":"grow","required":false,"source":"component","literalValues":[false,true],"description":"If set, columns in the last row expand to fill all available space","typeRef":341},{"name":"justify","required":false,"source":"component","literalValues":["-moz-initial","center","end","flex-end","flex-start","inherit","initial","left","normal","revert","revert-layer","right","space-around","space-between","space-evenly","start","stretch","unset"],"description":"Sets `justify-content`","typeRef":248},{"name":"overflow","required":false,"source":"component","literalValues":["-moz-hidden-unscrollable","-moz-initial","auto","clip","hidden","inherit","initial","overlay","revert","revert-layer","scroll","unset","visible"],"description":"Sets `overflow` CSS property on the root element","typeRef":252},{"name":"rowGap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Row gap, overrides `gap` for vertical spacing","typeRef":284},{"name":"type","required":false,"source":"component","literalValues":["container","media"],"description":"Type of queries used for responsive styles","typeRef":51},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":["Grid.Col"],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Grid.Col","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/grid/","props":[{"name":"align","required":false,"source":"component","literalValues":["-moz-initial","anchor-center","auto","baseline","center","end","flex-end","flex-start","inherit","initial","normal","revert","revert-layer","self-end","self-start","start","stretch","unset"],"description":"Vertical alignment of the column, controls `align-self` CSS property","typeRef":286},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"offset","required":false,"source":"component","description":"Column start offset – number of empty columns before this column","typeRef":312},{"name":"order","required":false,"source":"component","description":"Column order, use to reorder columns at different viewport sizes","typeRef":312},{"name":"span","required":false,"source":"component","literalValues":["auto","content"],"description":"Column span","typeRef":282},{"name":"styles","required":false,"source":"component","typeRef":210},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"GridCol","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/grid-col/","props":[{"name":"align","required":false,"source":"component","literalValues":["-moz-initial","anchor-center","auto","baseline","center","end","flex-end","flex-start","inherit","initial","normal","revert","revert-layer","self-end","self-start","start","stretch","unset"],"description":"Vertical alignment of the column, controls `align-self` CSS property","typeRef":286},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"offset","required":false,"source":"component","description":"Column start offset – number of empty columns before this column","typeRef":312},{"name":"order","required":false,"source":"component","description":"Column order, use to reorder columns at different viewport sizes","typeRef":312},{"name":"span","required":false,"source":"component","literalValues":["auto","content"],"description":"Column span","typeRef":282},{"name":"styles","required":false,"source":"component","typeRef":210},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Group","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/group/","props":[{"name":"align","required":false,"source":"component","literalValues":["-moz-initial","anchor-center","baseline","center","end","flex-end","flex-start","inherit","initial","normal","revert","revert-layer","self-end","self-start","start","stretch","unset"],"description":"Controls `align-items` CSS property","typeRef":244},{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem","typeRef":183},{"name":"grow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether each child element should have `flex-grow: 1` style","typeRef":341},{"name":"justify","required":false,"source":"component","literalValues":["-moz-initial","center","end","flex-end","flex-start","inherit","initial","left","normal","revert","revert-layer","right","space-around","space-between","space-evenly","start","stretch","unset"],"description":"Controls `justify-content` CSS property","typeRef":248},{"name":"preventGrowOverflow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether children should take only dedicated amount of space (`max-width` style is set based on the number of children)","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"wrap","required":false,"source":"component","literalValues":["-moz-initial","inherit","initial","nowrap","revert","revert-layer","unset","wrap","wrap-reverse"],"description":"Controls `flex-wrap` CSS property","typeRef":5}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"HeadlessMantineProvider","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/headless-mantine-provider/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Replaces a Homarr-owned provider boundary"},{"name":"Heatmap","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/heatmap/","props":[{"name":"attributes","required":false,"source":"component","typeRef":439},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"colors","required":false,"source":"component","description":"Colors array, used to calculate color for each value, by default 4 shades of green colors are used","typeRef":368},{"name":"data","required":true,"source":"component","description":"Heatmap data, key is date in `YYYY-MM-DD` format (interpreted as a UTC calendar day)","typeRef":269},{"name":"domain","required":false,"source":"component","description":"Heatmap domain, array of 2 numbers, min and max values, calculated from data by default","typeRef":334},{"name":"endDate","required":false,"source":"component","description":"Heatmap end date. Current date by default. Date is normalized to UTC midnight of the intended calendar day.","typeRef":362},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"First day of week, 0 – Sunday, 1 – Monday.","typeRef":134},{"name":"fontSize","required":false,"source":"component","description":"Font size of month and weekday labels","typeRef":353},{"name":"gap","required":false,"source":"component","description":"Gap between rects in px","typeRef":353},{"name":"legendLabels","required":false,"source":"component","description":"Legend labels, array of 2 elements: [min label, max label]","typeRef":335},{"name":"monthLabels","required":false,"source":"component","description":"Month labels, array of 12 elements, can be used for localization","typeRef":368},{"name":"monthsLabelsHeight","required":false,"source":"component","description":"Height of month labels row","typeRef":353},{"name":"radius","required":false,"source":"component","typeRef":365},{"name":"rectRadius","required":false,"source":"component","description":"Rect radius in px","typeRef":353},{"name":"rectSize","required":false,"source":"component","description":"Size of day rect in px","typeRef":353},{"name":"splitMonths","required":false,"source":"component","literalValues":[false,true],"description":"If set, inserts a spacer column between months","typeRef":341},{"name":"startDate","required":false,"source":"component","description":"Heatmap start date. Current date - 1 year by default. Date is normalized to UTC midnight of the intended calendar day.","typeRef":362},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to the `Tooltip.Floating` component","typeRef":239},{"name":"type","required":false,"source":"component","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekdayLabels","required":false,"source":"component","description":"Weekday labels, array of 7 elements, can be used for localization","typeRef":368},{"name":"weekdaysLabelsWidth","required":false,"source":"component","description":"Width of weekday labels column","typeRef":353},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"If set, legend with color levels is displayed below the heatmap","typeRef":341},{"name":"withMonthLabels","required":false,"source":"component","literalValues":[false,true],"description":"If set, month labels are displayed","typeRef":341},{"name":"withOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"If set, trailing dates that do not fall into the given `startDate` – `endDate` range are displayed to fill empty space.","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"If set, tooltip is displayed on rect hover","typeRef":341},{"name":"withWeekdayLabels","required":false,"source":"component","literalValues":[false,true],"description":"If set, weekday labels are displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"HiddenDatesInput","package":"@mantine/dates","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/dates/hidden-dates-input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Internal date-input primitive"},{"name":"Highlight","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/highlight/","props":[{"name":"accentInsensitive","required":false,"source":"component","literalValues":[false,true],"description":"Perform accent-insensitive matching. When enabled cafe will match cafe, café, cafè, etc.","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"caseInsensitive","required":false,"source":"component","literalValues":[false,true],"description":"Perform case-insensitive matching.","typeRef":341},{"name":"color","required":false,"source":"component","description":"Default background color for all highlighted text. Key of `theme.colors` or any valid CSS color, passed to `Mark` component. Can be overridden per term when using HighlightTerm objects.","typeRef":360},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration, ignored when `variant` is not `gradient`","typeRef":179},{"name":"highlight","required":true,"source":"component","description":"Substring(s) to highlight in `children`. Can be: - string: single term - string[]: multiple terms with same color - HighlightTerm[]: multiple terms with custom colors per term - Matching is case-insensitive and accent-insensitive by default, use `caseInsensitive` and `accentInsensitive` props to control this behavior - Regex special characters are automatically escaped - When multiple substrings are provided, longer matches take precedence - Empty strings and whitespace-only strings are ignored","typeRef":367},{"name":"inherit","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether font properties should be inherited from the parent","typeRef":341},{"name":"inline","required":false,"source":"component","literalValues":[false,true],"description":"Sets `line-height` to 1 for centering","typeRef":341},{"name":"lineClamp","required":false,"source":"component","description":"Number of lines after which Text will be truncated","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size` and `line-height`","typeRef":82},{"name":"span","required":false,"source":"component","literalValues":[false,true],"description":"Shorthand for `component=\"span\"`","typeRef":341},{"name":"textWrap","required":false,"source":"component","literalValues":["balance","nowrap","pretty","stable","wrap"],"description":"Controls `text-wrap` CSS property","typeRef":79},{"name":"truncate","required":false,"source":"component","literalValues":["end",false,"start",true],"description":"Side on which Text must be truncated, if `true`, text is truncated from the start","typeRef":344},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["gradient","text"],"typeRef":131},{"name":"wholeWord","required":false,"source":"component","literalValues":[false,true],"description":"Only match whole words (adds word boundaries to regex). When enabled, 'the' will not match 'there'.","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"HoverCard","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hover-card/","props":[{"name":"arrowOffset","required":false,"source":"component","description":"Arrow offset in px","typeRef":353},{"name":"arrowPosition","required":false,"source":"component","literalValues":["center","merge","side"],"description":"Arrow position","typeRef":24},{"name":"arrowRadius","required":false,"source":"component","description":"Arrow `border-radius` in px","typeRef":353},{"name":"arrowSize","required":false,"source":"component","description":"Arrow size in px","typeRef":353},{"name":"attributes","required":false,"source":"component","typeRef":399},{"name":"clickOutsideEvents","required":false,"source":"component","description":"Events that trigger outside clicks","typeRef":368},{"name":"closeDelay","required":false,"source":"component","description":"Delay in ms before the dropdown closes after mouse leaves the target or dropdown. Overridden by HoverCard.Group delay if used within a group.","typeRef":353},{"name":"closeOnClickOutside","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dropdown should be closed on outside clicks","typeRef":341},{"name":"closeOnEscape","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dropdown should be closed when `Escape` key is pressed","typeRef":341},{"name":"defaultOpened","required":false,"source":"component","literalValues":[false,true],"description":"Initial opened state for uncontrolled component","typeRef":341},{"name":"floatingStrategy","required":false,"source":"component","literalValues":["absolute","fixed"],"description":"Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy)","typeRef":34},{"name":"hideDetached","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen","typeRef":341},{"name":"initiallyOpened","required":false,"source":"component","literalValues":[false,true],"description":"Initial opened state","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead.","typeRef":341},{"name":"keepMountedMode","required":false,"source":"component","literalValues":["activity","display-none"],"description":"Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles","typeRef":7},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling","typeRef":241},{"name":"offset","required":false,"source":"component","description":"Offset of the dropdown element","typeRef":354},{"name":"openDelay","required":false,"source":"component","description":"Delay in ms before the dropdown opens after mouse enters the target. Overridden by HoverCard.Group delay if used within a group.","typeRef":353},{"name":"overlayProps","required":false,"source":"component","description":"Props passed down to `Overlay` component","typeRef":100},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Dropdown position relative to the target element","typeRef":48},{"name":"preventPositionChangeWhenVisible","required":false,"source":"component","literalValues":[false,true],"description":"If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change.","typeRef":341},{"name":"returnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be automatically returned to control when dropdown closes","typeRef":341},{"name":"transitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component. Use to configure duration and animation type.","typeRef":208},{"name":"trapFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be trapped within dropdown","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"width","required":false,"source":"component","description":"Dropdown width, or `'target'` to make dropdown width the same as target element","typeRef":243},{"name":"withArrow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether component should have an arrow","typeRef":341},{"name":"withOverlay","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the overlay should be displayed when the dropdown is opened","typeRef":341},{"name":"withRoles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dropdown and target elements should have accessible roles","typeRef":341}],"blockedProps":[],"subcomponents":["HoverCard.Dropdown","HoverCard.Group","HoverCard.Target"],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"HoverCard.Dropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hover-card/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":234},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"HoverCard.Group","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hover-card/","props":[{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms","typeRef":353},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"HoverCard.Target","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hover-card/","props":[{"name":"eventPropsWrapperName","required":false,"source":"component","description":"Name of the prop to wrap event listeners in. Use when the target component expects event listeners in a nested object. For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`.","typeRef":359},{"name":"popupType","required":false,"source":"component","description":"Popup accessible type","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"HoverCardDropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hover-card-dropdown/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":234},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"HoverCardGroup","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hover-card-group/","props":[{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms","typeRef":353},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"HoverCardTarget","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hover-card-target/","props":[{"name":"eventPropsWrapperName","required":false,"source":"component","description":"Name of the prop to wrap event listeners in. Use when the target component expects event listeners in a nested object. For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`.","typeRef":359},{"name":"popupType","required":false,"source":"component","description":"Popup accessible type","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"HueSlider","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/hue-slider/","props":[{"name":"attributes","required":false,"source":"component","typeRef":474},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"focusable","required":false,"source":"component","literalValues":[false,true],"description":"If set, slider thumb can be focused","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Slider size","typeRef":182},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":true,"source":"component","description":"Controlled component value","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Image","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/image/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"fallbackSrc","required":false,"source":"component","description":"Image url used as a fallback if the image cannot be loaded","typeRef":359},{"name":"fit","required":false,"source":"component","literalValues":["-moz-initial","contain","cover","fill","inherit","initial","none","revert","revert-layer","scale-down","unset"],"description":"Controls `object-fit` style","typeRef":4},{"name":"src","required":false,"source":"component","description":"Image url","typeRef":370},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Indicator","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/indicator/","props":[{"name":"attributes","required":false,"source":"component","typeRef":460},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color value","typeRef":162},{"name":"inline","required":false,"source":"component","literalValues":[false,true],"description":"Changes container display from block to inline-block, use when wrapping elements with fixed width","typeRef":341},{"name":"label","required":false,"source":"component","description":"Label displayed inside the indicator, for example, notification count","typeRef":263},{"name":"maxValue","required":false,"source":"component","description":"Maximum value to display. If label is a number greater than this value, it will be displayed as `{maxValue}+`","typeRef":353},{"name":"offset","required":false,"source":"component","description":"Distance in pixels to offset the indicator from its default position, useful for elements with border-radius. Can be a number for uniform offset or an object with `x` and `y` properties for separate horizontal and vertical offsets","typeRef":357},{"name":"position","required":false,"source":"component","literalValues":["bottom-center","bottom-end","bottom-start","middle-center","middle-end","middle-start","top-center","top-end","top-start"],"description":"Indicator position relative to the target element","typeRef":19},{"name":"processing","required":false,"source":"component","literalValues":[false,true],"description":"If set, the indicator has processing animation","typeRef":341},{"name":"showZero","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether indicator with label `0` should be displayed","typeRef":341},{"name":"size","required":false,"source":"component","description":"Indicator width and height","typeRef":365},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"InlineDateTimePicker","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/inline-date-time-picker/","props":[{"name":"allowDeselect","required":false,"source":"component","description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\"","typeRef":106},{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":465},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level (uncontrolled)","typeRef":52},{"name":"defaultTimeValue","required":false,"source":"component","description":"Default time value in `HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected.","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":159},{"name":"enableKeyboardNavigation","required":false,"source":"component","literalValues":[false,true],"description":"Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view)","typeRef":341},{"name":"endTimePickerProps","required":false,"source":"component","description":"Props passed down to the end time `TimePicker` component in range mode","typeRef":196},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"labelSeparator","required":false,"source":"component","description":"Separator between range values","typeRef":359},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level (controlled)","typeRef":52},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Max date","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Min date","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":157},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"submitButtonProps","required":false,"source":"component","description":"Props passed down to the submit button","typeRef":90},{"name":"timePickerProps","required":false,"source":"component","description":"Props passed down to `TimePicker` component","typeRef":196},{"name":"type","required":false,"source":"component","literalValues":["default","multiple","range"],"description":"Picker type: range, multiple or default","typeRef":158},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value for controlled component","typeRef":159},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withSeconds","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the seconds input should be displayed","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"InlineStyles","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/inline-styles/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Writes unscoped style rules"},{"name":"Input","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":["Input.ClearButton","Input.Description","Input.Error","Input.Label","Input.Placeholder","Input.Success","Input.Wrapper"],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Input.ClearButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Input.Description","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Input.Error","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Input.Label","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Input.Placeholder","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Input.Success","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Input.Wrapper","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputBase","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-base/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputClearButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-clear-button/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputClearSection","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-clear-section/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputDescription","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-description/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputError","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-error/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputLabel","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-label/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputPlaceholder","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-placeholder/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputSuccess","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-success/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"InputWrapper","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/input-wrapper/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"JsonInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/json-input/","props":[{"name":"attributes","required":false,"source":"component","typeRef":416},{"name":"autoComplete","required":false,"source":"component","typeRef":359},{"name":"autosize","required":false,"source":"component","literalValues":[false,true],"description":"If set, enables textarea height growing with its content","typeRef":341},{"name":"bottomSection","required":false,"source":"component","description":"Content rendered at the bottom of the input, inside the border","typeRef":263},{"name":"bottomSectionProps","required":false,"source":"component","description":"Props passed down to the `bottomSection` element","typeRef":259},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"formatOnBlur","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the value should be formatted on blur","typeRef":341},{"name":"indentSpaces","required":false,"source":"component","description":"Number of spaces to use as white space for formatting. Passed as the third argument to `serialize` function.","typeRef":353},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxRows","required":false,"source":"component","description":"Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set","typeRef":353},{"name":"minRows","required":false,"source":"component","description":"Minimum rows of autosize textarea, ignored if `autosize` prop is not set","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"resize","required":false,"source":"component","literalValues":["-moz-initial","block","both","horizontal","inherit","initial","inline","none","revert","revert-layer","unset","vertical"],"description":"Controls `resize` CSS property","typeRef":3},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"validationError","required":false,"source":"component","description":"Error message shown when the input value is invalid JSON (checked on blur). If not provided, a generic error state is shown. Takes precedence over the `error` prop when validation fails.","typeRef":263},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Kbd","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/kbd/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size` and `padding`","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"LevelsGroup","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/levels-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":444},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the group should take the full width of its container","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"LineChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/line-chart/","props":[{"name":"activeDotProps","required":false,"source":"component","description":"Props passed down to all active dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"attributes","required":false,"source":"component","typeRef":438},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"connectNulls","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether points with `null` values should be connected","typeRef":341},{"name":"curveType","required":false,"source":"component","literalValues":["bump","linear","monotone","natural","step","stepAfter","stepBefore"],"description":"Type of the curve","typeRef":69},{"name":"data","required":true,"source":"component","description":"Data used to display chart","typeRef":267},{"name":"dataKey","required":true,"source":"component","description":"Key of the `data` object for x-axis values","typeRef":359},{"name":"dotProps","required":false,"source":"component","description":"Props passed down to all dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"fillOpacity","required":false,"source":"component","description":"Controls fill opacity of all lines","typeRef":353},{"name":"gradientStops","required":false,"source":"component","description":"Data used to generate gradient stops","typeRef":174},{"name":"gridAxis","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which lines should be displayed in the grid, `'x'` by default","typeRef":61},{"name":"gridColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the grid and cursor lines, by default depends on color scheme","typeRef":162},{"name":"gridProps","required":false,"source":"component","description":"Props passed down to the `CartesianGrid` component","typeRef":189},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to the `Legend` component","typeRef":190},{"name":"lineChartProps","required":false,"source":"component","description":"Props passed down to recharts `LineChart` component","typeRef":91},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Chart orientation, `'horizontal'` by default","typeRef":36},{"name":"referenceLines","required":false,"source":"component","description":"Reference lines that should be displayed on the chart","typeRef":149},{"name":"rightYAxisLabel","required":false,"source":"component","description":"A label to display next to the right y-axis","typeRef":359},{"name":"rightYAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component rendered on the right side","typeRef":199},{"name":"series","required":true,"source":"component","description":"An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array.","typeRef":175},{"name":"strokeWidth","required":false,"source":"component","description":"Stroke width for the chart lines","typeRef":353},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the text displayed inside the chart, `'dimmed'` by default","typeRef":162},{"name":"tickLine","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which axis should have tick line, `'y'` by default","typeRef":61},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip position animation duration in ms, `0` by default","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to the `Tooltip` component","typeRef":197},{"name":"type","required":false,"source":"component","literalValues":["default","gradient"],"description":"Controls styles of the line","typeRef":27},{"name":"unit","required":false,"source":"component","description":"Unit displayed next to each tick in y-axis","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withDots","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dots should be displayed","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart legend should be displayed, `false` by default","typeRef":341},{"name":"withPointLabels","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether each point should have associated label","typeRef":341},{"name":"withRightYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart tooltip should be displayed, `true` by default","typeRef":341},{"name":"withXAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether x-axis should be displayed, `true` by default","typeRef":341},{"name":"withYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether y-axis should be displayed, `true` by default","typeRef":341},{"name":"xAxisLabel","required":false,"source":"component","description":"A label to display below the x-axis","typeRef":359},{"name":"xAxisProps","required":false,"source":"component","description":"Props passed down to the `XAxis` recharts component","typeRef":198},{"name":"yAxisLabel","required":false,"source":"component","description":"A label to display next to the y-axis","typeRef":359},{"name":"yAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component","typeRef":199}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"List","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/list/","props":[{"name":"attributes","required":false,"source":"component","typeRef":462},{"name":"center","required":false,"source":"component","literalValues":[false,true],"description":"Vertically centers list items with their icons","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"icon","required":false,"source":"component","description":"Icon to replace default list markers. Applied to all items unless overridden on individual List.Item components","typeRef":263},{"name":"listStyleType","required":false,"source":"component","literalValues":["-moz-initial","inherit","initial","none","revert","revert-layer","unset"],"description":"Controls CSS `list-style-type` property. Overrides the default list marker style based on list type","typeRef":249},{"name":"reversed","required":false,"source":"component","literalValues":[false,true],"description":"Reverses the order of list items (only works with type=\"ordered\")","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size` and `line-height`","typeRef":81},{"name":"spacing","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value to set spacing between items","typeRef":183},{"name":"start","required":false,"source":"component","description":"Starting value for ordered list numbering (only works with type=\"ordered\")","typeRef":353},{"name":"type","required":false,"source":"component","literalValues":["ordered","unordered"],"description":"List type","typeRef":65},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withPadding","required":false,"source":"component","literalValues":[false,true],"description":"Adds extra horizontal padding to the list, useful for nested lists","typeRef":341}],"blockedProps":[],"subcomponents":["List.Item"],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"List.Item","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/list/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"icon","required":false,"source":"component","description":"Icon to replace item bullet","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":229},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"ListItem","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/list-item/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"icon","required":false,"source":"component","description":"Icon to replace item bullet","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":229},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Loader","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/loader/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"loaders","required":false,"source":"component","description":"Object of loaders components, can be customized via default props or inline.","typeRef":226},{"name":"radius","required":false,"source":"component","typeRef":365},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `width` and `height` of the loader. `Loader` has predefined `xs`-`xl` values. Numbers are converted to rem.","typeRef":355},{"name":"type","required":false,"source":"component","literalValues":["bars","dots","oval"],"description":"Loader type, key of `loaders` prop","typeRef":110},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"LoadingOverlay","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/loading-overlay/","props":[{"name":"attributes","required":false,"source":"component","typeRef":464},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"loaderProps","required":false,"source":"component","description":"Props passed down to `Loader` component","typeRef":176},{"name":"overlayProps","required":false,"source":"component","description":"Props passed down to `Overlay` component. Use to customizing blur, opacity, color and other properties.","typeRef":201},{"name":"transitionProps","required":false,"source":"component","description":"Props passed down to `Transition` component. Set `duration` to create custom transition or override default transition.","typeRef":208},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"visible","required":false,"source":"component","literalValues":[false,true],"description":"Controls overlay visibility. Typically used with state (useState, useDisclosure).","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"MantineProvider","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/mantine-provider/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Replaces a Homarr-owned provider boundary"},{"name":"MantineThemeProvider","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/mantine-theme-provider/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Replaces a Homarr-owned provider boundary"},{"name":"Mark","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/mark/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Marquee","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/marquee/","props":[{"name":"attributes","required":false,"source":"component","typeRef":395},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"duration","required":false,"source":"component","description":"Animation duration in ms","typeRef":353},{"name":"fadeEdgeColor","required":false,"source":"component","description":"Color of the fade gradient,","typeRef":359},{"name":"fadeEdgeSize","required":false,"source":"component","description":"Size of the fade gradient,","typeRef":359},{"name":"fadeEdges","required":false,"source":"component","literalValues":[false,true],"description":"Whether to show gradient fade on edges,","typeRef":341},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Gap between repeated children, key of `theme.spacing` or any valid CSS value","typeRef":183},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Scroll orientation","typeRef":36},{"name":"pauseOnHover","required":false,"source":"component","literalValues":[false,true],"description":"Pauses animation on hover","typeRef":341},{"name":"repeat","required":false,"source":"component","description":"Number of times children are repeated inline for seamless scrolling","typeRef":353},{"name":"reverse","required":false,"source":"component","literalValues":[false,true],"description":"Reverses animation direction","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"MaskInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/mask-input/","props":[{"name":"alwaysShowMask","required":false,"source":"component","literalValues":[false,true],"description":"Show mask pattern even when field is empty and unfocused","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":416},{"name":"autoClear","required":false,"source":"component","literalValues":[false,true],"description":"Clear value on blur when mask is incomplete, `false` by default","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"mask","required":true,"source":"component","description":"Mask pattern string or array of string literals and RegExp objects","typeRef":361},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"separate","required":false,"source":"component","literalValues":[false,true],"description":"When true, raw and display values are decoupled","typeRef":341},{"name":"showMaskOnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Show mask placeholder on focus, `true` by default","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"slotChar","required":false,"source":"component","description":"Character displayed in unfilled slots, `\"_\"` by default","typeRef":352},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"tokens","required":false,"source":"component","description":"Override or extend the default token map","typeRef":265},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Menu","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"alignItemsLabels","required":false,"source":"component","literalValues":["all","none","with-indicators"],"description":"Controls how indicator slot space is reserved on menu items for label alignment. `'all'` reserves space on every `Menu.Item`, `'with-indicators'` reserves space only on `Menu.CheckboxItem` and `Menu.RadioItem`, `'none'` reserves space only on items that currently display an indicator.","typeRef":55},{"name":"arrowOffset","required":false,"source":"component","description":"Arrow offset in px","typeRef":353},{"name":"arrowPosition","required":false,"source":"component","literalValues":["center","merge","side"],"description":"Arrow position","typeRef":24},{"name":"arrowRadius","required":false,"source":"component","description":"Arrow `border-radius` in px","typeRef":353},{"name":"arrowSize","required":false,"source":"component","description":"Arrow size in px","typeRef":353},{"name":"attributes","required":false,"source":"component","typeRef":430},{"name":"checkIcon","required":false,"source":"component","description":"Custom icon rendered as the indicator of checked `Menu.CheckboxItem` and selected `Menu.RadioItem`. Can be overridden per item with the `checkIcon` prop.","typeRef":263},{"name":"clickOutsideEvents","required":false,"source":"component","description":"Events that trigger outside click detection. Includes mousedown for desktop clicks, touchstart for mobile, and keydown for Escape key handling","typeRef":368},{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms, applicable only to `trigger=\"hover\"` variant","typeRef":353},{"name":"closeOnClickOutside","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is closed on outside clicks","typeRef":341},{"name":"closeOnEscape","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is closed when the `Escape` key is pressed","typeRef":341},{"name":"closeOnItemClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, the Menu is closed when one of the items is clicked. Can be overridden per item with `closeMenuOnClick` prop","typeRef":341},{"name":"defaultOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled menu initial opened state","typeRef":341},{"name":"floatingStrategy","required":false,"source":"component","literalValues":["absolute","fixed"],"description":"Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy)","typeRef":34},{"name":"hideDetached","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead.","typeRef":341},{"name":"keepMountedMode","required":false,"source":"component","literalValues":["activity","display-none"],"description":"Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles","typeRef":7},{"name":"loop","required":false,"source":"component","literalValues":[false,true],"description":"If set, arrow key presses wrap around from last item to first and vice versa","typeRef":341},{"name":"menuItemTabIndex","required":false,"source":"component","literalValues":[-1,0],"description":"Set the `tabindex` on all menu items. Use `0` to allow Tab key navigation through menu items (required for navigation menus following WAI-ARIA disclosure pattern).","typeRef":133},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling","typeRef":241},{"name":"offset","required":false,"source":"component","description":"Offset of the dropdown element","typeRef":354},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms, applicable only to `trigger=\"hover\"` variant","typeRef":353},{"name":"opened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled menu opened state","typeRef":341},{"name":"overlayProps","required":false,"source":"component","description":"Props passed down to `Overlay` component","typeRef":100},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Dropdown position relative to the target element","typeRef":48},{"name":"preventPositionChangeWhenVisible","required":false,"source":"component","literalValues":[false,true],"description":"If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change.","typeRef":341},{"name":"returnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be automatically returned to control when dropdown closes","typeRef":341},{"name":"transitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component. Use to configure duration and animation type.","typeRef":208},{"name":"trapFocus","required":false,"source":"component","literalValues":[false,true],"description":"If set, focus is trapped within the menu dropdown when it is opened","typeRef":341},{"name":"trigger","required":false,"source":"component","literalValues":["click","click-hover","hover"],"description":"Event trigger to open menu. Note: 'hover' is not keyboard accessible; prefer 'click-hover' for accessible hover menus","typeRef":37},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"width","required":false,"source":"component","description":"Dropdown width, or `'target'` to make dropdown width the same as target element","typeRef":243},{"name":"withArrow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether component should have an arrow","typeRef":341},{"name":"withInitialFocusPlaceholder","required":false,"source":"component","literalValues":[false,true],"description":"Adds a hidden focusable element at the start of the dropdown to prevent unexpected focus jumps when opening with keyboard. Set to false if you need custom focus management.","typeRef":341},{"name":"withOverlay","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the overlay should be displayed when the dropdown is opened","typeRef":341}],"blockedProps":[],"subcomponents":["Menu.CheckboxGroup","Menu.CheckboxItem","Menu.ContextMenu","Menu.Divider","Menu.Dropdown","Menu.Item","Menu.Label","Menu.RadioGroup","Menu.RadioItem","Menu.Search","Menu.Sub","Menu.Target"],"bind":{"type":"boolean","initialProp":"defaultChecked"},"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.CheckboxGroup","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled default selected values","typeRef":368},{"name":"value","required":false,"source":"component","description":"Controlled selected values","typeRef":368}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.CheckboxItem","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"checkIcon","required":false,"source":"component","description":"Replaces the default check icon rendered in the indicator slot when the item is checked. Overrides `checkIcon` set on `Menu`.","typeRef":263},{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, closes the menu when this item is clicked. By default, checkbox items do not close the menu.","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":230},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"value","required":false,"source":"component","description":"Value of the checkbox item. When used inside `Menu.CheckboxGroup`, determines whether the item is checked and what value is added/removed on toggle.","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.ContextMenu","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"longPressDelay","required":false,"source":"component","description":"Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.Divider","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":213},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.Dropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":215},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.Item","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"Controls whether the menu closes when this item is clicked. When undefined, inherits from Menu's `closeOnItemClick` prop. When true or false, overrides the Menu-level setting","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"leftSection","required":false,"source":"component","description":"Section displayed at the start of the label","typeRef":263},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":231},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.Label","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.RadioGroup","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled default selected value","typeRef":352},{"name":"value","required":false,"source":"component","description":"Controlled selected value","typeRef":352}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.RadioItem","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"checkIcon","required":false,"source":"component","description":"Replaces the default radio indicator rendered when the item is selected. Overrides `checkIcon` set on `Menu`.","typeRef":263},{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, closes the menu when this item is clicked. By default, radio items do not close the menu.","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":232},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"value","required":true,"source":"component","description":"Value of the radio item. Used by the parent `Menu.RadioGroup` to determine which item is selected.","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.Search","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"attributes","required":false,"source":"component","typeRef":420},{"name":"clearSearchOnClose","required":false,"source":"component","literalValues":[false,true],"description":"If set, clears the search value after the menu close transition completes. Requires a controlled `value`/`onChange` pair.","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"error","required":false,"source":"component","description":"Determines whether the input should have error styles and `aria-invalid` attribute","typeRef":263},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"multiline","required":false,"source":"component","literalValues":[false,true],"description":"Adjusts padding and sizing calculations for multiline inputs (use with `component=\"textarea\"`). Does not make the input multiline by itself.","typeRef":341},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Determines whether the input should have success styles","typeRef":263},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAria","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element of the `Input` component","typeRef":331}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.Sub","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[{"name":"arrowOffset","required":false,"source":"component","description":"Arrow offset in px","typeRef":353},{"name":"arrowPosition","required":false,"source":"component","literalValues":["center","merge","side"],"description":"Arrow position","typeRef":24},{"name":"arrowRadius","required":false,"source":"component","description":"Arrow `border-radius` in px","typeRef":353},{"name":"arrowSize","required":false,"source":"component","description":"Arrow size in px","typeRef":353},{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms, applicable when hover trigger is used","typeRef":353},{"name":"floatingStrategy","required":false,"source":"component","literalValues":["absolute","fixed"],"description":"Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy)","typeRef":34},{"name":"hideDetached","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead.","typeRef":341},{"name":"keepMountedMode","required":false,"source":"component","literalValues":["activity","display-none"],"description":"Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles","typeRef":7},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling","typeRef":241},{"name":"offset","required":false,"source":"component","description":"Offset of the dropdown element","typeRef":354},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms, applicable when hover trigger is used","typeRef":353},{"name":"opened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled opened state","typeRef":341},{"name":"overlayProps","required":false,"source":"component","description":"Props passed down to `Overlay` component","typeRef":100},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Dropdown position relative to the target element","typeRef":48},{"name":"preventPositionChangeWhenVisible","required":false,"source":"component","literalValues":[false,true],"description":"If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change.","typeRef":341},{"name":"returnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be automatically returned to control when dropdown closes","typeRef":341},{"name":"safeAreaPolygon","required":false,"source":"component","description":"Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior.","typeRef":337},{"name":"transitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type","typeRef":208},{"name":"width","required":false,"source":"component","description":"Dropdown width, or `'target'` to make dropdown width the same as target element","typeRef":243},{"name":"withArrow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether component should have an arrow","typeRef":341},{"name":"withOverlay","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the overlay should be displayed when the dropdown is opened","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menu.Target","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuCheckboxGroup","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-checkbox-group/","props":[{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled default selected values","typeRef":368},{"name":"value","required":false,"source":"component","description":"Controlled selected values","typeRef":368}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuCheckboxItem","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-checkbox-item/","props":[{"name":"checkIcon","required":false,"source":"component","description":"Replaces the default check icon rendered in the indicator slot when the item is checked. Overrides `checkIcon` set on `Menu`.","typeRef":263},{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, closes the menu when this item is clicked. By default, checkbox items do not close the menu.","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":230},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"value","required":false,"source":"component","description":"Value of the checkbox item. When used inside `Menu.CheckboxGroup`, determines whether the item is checked and what value is added/removed on toggle.","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuContextMenu","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-context-menu/","props":[{"name":"longPressDelay","required":false,"source":"component","description":"Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuDivider","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-divider/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":213},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuDropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-dropdown/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":215},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuItem","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-item/","props":[{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"Controls whether the menu closes when this item is clicked. When undefined, inherits from Menu's `closeOnItemClick` prop. When true or false, overrides the Menu-level setting","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"leftSection","required":false,"source":"component","description":"Section displayed at the start of the label","typeRef":263},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":231},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuLabel","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-label/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuRadioGroup","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-radio-group/","props":[{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled default selected value","typeRef":352},{"name":"value","required":false,"source":"component","description":"Controlled selected value","typeRef":352}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuRadioItem","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-radio-item/","props":[{"name":"checkIcon","required":false,"source":"component","description":"Replaces the default radio indicator rendered when the item is selected. Overrides `checkIcon` set on `Menu`.","typeRef":263},{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, closes the menu when this item is clicked. By default, radio items do not close the menu.","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":232},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"value","required":true,"source":"component","description":"Value of the radio item. Used by the parent `Menu.RadioGroup` to determine which item is selected.","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSearch","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-search/","props":[{"name":"attributes","required":false,"source":"component","typeRef":420},{"name":"clearSearchOnClose","required":false,"source":"component","literalValues":[false,true],"description":"If set, clears the search value after the menu close transition completes. Requires a controlled `value`/`onChange` pair.","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"error","required":false,"source":"component","description":"Determines whether the input should have error styles and `aria-invalid` attribute","typeRef":263},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"multiline","required":false,"source":"component","literalValues":[false,true],"description":"Adjusts padding and sizing calculations for multiline inputs (use with `component=\"textarea\"`). Does not make the input multiline by itself.","typeRef":341},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Determines whether the input should have success styles","typeRef":263},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAria","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element of the `Input` component","typeRef":331}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSub","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-sub/","props":[{"name":"arrowOffset","required":false,"source":"component","description":"Arrow offset in px","typeRef":353},{"name":"arrowPosition","required":false,"source":"component","literalValues":["center","merge","side"],"description":"Arrow position","typeRef":24},{"name":"arrowRadius","required":false,"source":"component","description":"Arrow `border-radius` in px","typeRef":353},{"name":"arrowSize","required":false,"source":"component","description":"Arrow size in px","typeRef":353},{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms, applicable when hover trigger is used","typeRef":353},{"name":"floatingStrategy","required":false,"source":"component","literalValues":["absolute","fixed"],"description":"Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy)","typeRef":34},{"name":"hideDetached","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead.","typeRef":341},{"name":"keepMountedMode","required":false,"source":"component","literalValues":["activity","display-none"],"description":"Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles","typeRef":7},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling","typeRef":241},{"name":"offset","required":false,"source":"component","description":"Offset of the dropdown element","typeRef":354},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms, applicable when hover trigger is used","typeRef":353},{"name":"opened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled opened state","typeRef":341},{"name":"overlayProps","required":false,"source":"component","description":"Props passed down to `Overlay` component","typeRef":100},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Dropdown position relative to the target element","typeRef":48},{"name":"preventPositionChangeWhenVisible","required":false,"source":"component","literalValues":[false,true],"description":"If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change.","typeRef":341},{"name":"returnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be automatically returned to control when dropdown closes","typeRef":341},{"name":"safeAreaPolygon","required":false,"source":"component","description":"Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior.","typeRef":337},{"name":"transitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type","typeRef":208},{"name":"width","required":false,"source":"component","description":"Dropdown width, or `'target'` to make dropdown width the same as target element","typeRef":243},{"name":"withArrow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether component should have an arrow","typeRef":341},{"name":"withOverlay","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the overlay should be displayed when the dropdown is opened","typeRef":341}],"blockedProps":[],"subcomponents":["MenuSub.Dropdown","MenuSub.Item","MenuSub.Target"],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSub.Dropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-sub/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":215},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSub.Item","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-sub/","props":[{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, the menu is closed when the item is clicked. Overrides `closeOnItemClick` prop on the `Menu` component.","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"leftSection","required":false,"source":"component","description":"Section displayed at the start of the label","typeRef":263},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":233},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSub.Target","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-sub/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSubDropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-sub-dropdown/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":215},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSubItem","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-sub-item/","props":[{"name":"closeMenuOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, the menu is closed when the item is clicked. Overrides `closeOnItemClick` prop on the `Menu` component.","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"data-disabled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"leftSection","required":false,"source":"component","description":"Section displayed at the start of the label","typeRef":263},{"name":"rightSection","required":false,"source":"component","description":"Section displayed at the end of the label","typeRef":263},{"name":"styles","required":false,"source":"component","typeRef":233},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuSubTarget","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-sub-target/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"MenuTarget","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/menu-target/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Menubar","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/menubar/","props":[],"blockedProps":[],"subcomponents":["Menubar.Dropdown","Menubar.Menu","Menubar.Target"],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Menubar.Dropdown","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/menubar/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Menubar.Menu","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/menubar/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"Menubar.Target","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/menubar/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"MenubarDropdown","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/menubar-dropdown/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"MenubarMenu","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/menubar-menu/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"MenubarTarget","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/menubar-target/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"MiniCalendar","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/mini-calendar/","props":[{"name":"attributes","required":false,"source":"component","typeRef":456},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"date","required":false,"source":"component","description":"Controlled component date value, start date of the interval","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Uncontrolled component default value, start date of the interval","typeRef":362},{"name":"locale","required":false,"source":"component","description":"dayjs locale used for formatting","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum date that can be selected, date object or date string in `YYYY-MM-DD` format","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum date that can be selected, date object or date string in `YYYY-MM-DD` format","typeRef":362},{"name":"monthLabelFormat","required":false,"source":"component","description":"Dayjs format string for month label","typeRef":359},{"name":"nextControlProps","required":false,"source":"component","description":"Props passed to next control button","typeRef":102},{"name":"numberOfDays","required":false,"source":"component","description":"Number of days to display in the calendar","typeRef":353},{"name":"previousControlProps","required":false,"source":"component","description":"Props passed to previous control button","typeRef":102},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Selected date, controlled value","typeRef":363},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"Modal","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":["Modal.Body","Modal.CloseButton","Modal.Content","Modal.Header","Modal.Overlay","Modal.Root","Modal.Stack","Modal.Title"],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.Body","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.CloseButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.Content","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.Header","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.Overlay","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.Root","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.Stack","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Modal.Title","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBase","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-base/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBaseBody","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-base-body/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBaseCloseButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-base-close-button/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBaseContent","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-base-content/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBaseHeader","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-base-header/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBaseOverlay","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-base-overlay/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBaseTitle","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-base-title/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalBody","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-body/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalCloseButton","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-close-button/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalContent","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-content/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalHeader","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-header/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalOverlay","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-overlay/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalRoot","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-root/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalStack","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-stack/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"ModalTitle","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/modal-title/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Escapes or replaces the widget layout, focus, scrolling, or overlay boundary"},{"name":"Month","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/month/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","left","right"],"typeRef":22},{"name":"attributes","required":false,"source":"component","typeRef":447},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the month should take the full width of its container","typeRef":341},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"locale","required":false,"source":"component","description":"`dayjs` locale, the default value is defined by `DatesProvider`","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date, in `YYYY-MM-DD` format","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date, in `YYYY-MM-DD` format","typeRef":362},{"name":"month","required":true,"source":"component","description":"Month to display, value `YYYY-MM-DD`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size","typeRef":81},{"name":"static","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated by space","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"MonthLevel","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/month-level/","props":[{"name":"attributes","required":false,"source":"component","typeRef":448},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"hasNextLevel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next level button should be enabled","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"levelControlAriaLabel","required":false,"source":"component","description":"Aria-label for change level control","typeRef":359},{"name":"locale","required":false,"source":"component","description":"`dayjs` locale, the default value is defined by `DatesProvider`","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date, in `YYYY-MM-DD` format","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date, in `YYYY-MM-DD` format","typeRef":362},{"name":"month","required":true,"source":"component","description":"Month that is currently displayed","typeRef":359},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size","typeRef":81},{"name":"static","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":238},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated by space","typeRef":341},{"name":"withNext","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next control should be rendered","typeRef":341},{"name":"withPrevious","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether previous control should be rendered","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"MonthLevelGroup","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/month-level-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":449},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, where 0 – Sunday and 6 – Saturday.","typeRef":134},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"hasNextLevel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next level button should be enabled","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"hideOutsideDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether outside dates should be hidden","typeRef":341},{"name":"hideWeekdays","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether weekdays row should be hidden","typeRef":341},{"name":"highlightToday","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether today should be highlighted with a border","typeRef":341},{"name":"locale","required":false,"source":"component","description":"`dayjs` locale, the default value is defined by `DatesProvider`","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date, in `YYYY-MM-DD` format","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date, in `YYYY-MM-DD` format","typeRef":362},{"name":"month","required":true,"source":"component","description":"Month to display","typeRef":359},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns to display next to each other","typeRef":353},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size","typeRef":81},{"name":"static","required":false,"source":"component","literalValues":[false,true],"description":"Passed as `isStatic` prop to `Month` component","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":238},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"weekendDays","required":false,"source":"component","description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`.","typeRef":161},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated by space","typeRef":341},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether week numbers should be displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"MonthPicker","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/month-picker/","props":[{"name":"allowDeselect","required":false,"source":"component","description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\"","typeRef":106},{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":382},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level (uncontrolled)","typeRef":52},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":159},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level (controlled)","typeRef":52},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Max level that user can go up to","typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":185},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"type","required":false,"source":"component","literalValues":["default","multiple","range"],"description":"Picker type: range, multiple or default","typeRef":158},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value for controlled component","typeRef":159},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"MonthPickerInput","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/month-picker-input/","props":[{"name":"allowDeselect","required":false,"source":"component","description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\"","typeRef":106},{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":412},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":258},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set.","typeRef":341},{"name":"closeOnChange","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the dropdown is closed when date is selected, not applicable with `type=\"multiple\"`","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Initial displayed level (uncontrolled)","typeRef":52},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":159},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"labelSeparator","required":false,"source":"component","description":"Separator between range value","typeRef":359},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"level","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Current displayed level (controlled)","typeRef":52},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"maxLevel","required":false,"source":"component","literalValues":["decade","month","year"],"description":"Max level that user can go up to","typeRef":52},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"popoverProps","required":false,"source":"component","description":"Props passed down to `Popover` component","typeRef":204},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":185},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"sortDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dates values should be sorted before `onChange` call, only applicable with type=\"multiple\"","typeRef":341},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["default","multiple","range"],"description":"Picker type: range, multiple or default","typeRef":158},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value for controlled component","typeRef":159},{"name":"valueFormat","required":false,"source":"component","description":"`dayjs` format for input value","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[{"name":"dropdownType","reason":"Modal picker mode escapes the widget overlay boundary"},{"name":"modalProps","reason":"Modal picker configuration escapes the widget overlay boundary"}],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"MonthsList","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/months-list/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","left","right"],"typeRef":22},{"name":"attributes","required":false,"source":"component","typeRef":450},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"year","required":true,"source":"component","description":"Year for which months list should be displayed","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"MultiSelect","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/multi-select/","props":[{"name":"attributes","required":false,"source":"component","typeRef":406},{"name":"checkIconPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the checkmark icon shown next to selected options in the dropdown","typeRef":47},{"name":"chevronColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the default chevron","typeRef":162},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":172},{"name":"clearSearchOnChange","required":false,"source":"component","literalValues":[false,true],"description":"Clear search value when item is selected","typeRef":341},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"When enabled, displays a clear button to remove all selected values (hidden when component is empty, disabled, or read-only)","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"comboboxProps","required":false,"source":"component","description":"Props passed down to `Combobox` component","typeRef":153},{"name":"data","required":false,"source":"component","description":"Data used to generate options. Values must be unique, otherwise an error will be thrown and component will not render.","typeRef":151},{"name":"defaultDropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled dropdown initial opened state","typeRef":341},{"name":"defaultSearchValue","required":false,"source":"component","description":"Default search value","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":330},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"dropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled dropdown opened state","typeRef":341},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"floatingHeight","required":false,"source":"component","literalValues":["viewport"],"description":"If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware.","typeRef":78},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":195},{"name":"hiddenInputValuesDivider","required":false,"source":"component","description":"Divider used to separate values in the hidden input `value` attribute","typeRef":359},{"name":"hidePickedOptions","required":false,"source":"component","literalValues":[false,true],"description":"When enabled, selected options are hidden from the dropdown list","typeRef":341},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"limit","required":false,"source":"component","description":"Maximum number of options displayed at a time, `Infinity` by default","typeRef":353},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxDropdownHeight","required":false,"source":"component","description":"`max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default","typeRef":365},{"name":"maxValues","required":false,"source":"component","description":"Maximum number of values, no limit if not set","typeRef":353},{"name":"nothingFoundMessage","required":false,"source":"component","description":"Message displayed when no options match the search query (when searchable is enabled) or when the data array is empty. If not set, the dropdown will be hidden instead.","typeRef":263},{"name":"openOnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Controls whether dropdown opens when the input receives focus","typeRef":341},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props passed down to the underlying `ScrollArea` component in the dropdown","typeRef":274},{"name":"searchValue","required":false,"source":"component","description":"Controlled search value","typeRef":359},{"name":"searchable","required":false,"source":"component","literalValues":[false,true],"description":"Allows searching through options by user input","typeRef":341},{"name":"selectFirstOptionOnChange","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when value changes, `false` by default","typeRef":341},{"name":"selectFirstOptionOnDropdownOpen","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when dropdown opens, `false` by default","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":330},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAlignedLabels","required":false,"source":"component","literalValues":[false,true],"description":"If set, unchecked labels are aligned with checked ones","typeRef":341},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withCheckIcon","required":false,"source":"component","literalValues":[false,true],"description":"If set, the check icon is displayed near the selected option label","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withPillsReorder","required":false,"source":"component","literalValues":[false,true],"description":"If set, selected values can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set.","typeRef":341},{"name":"withScrollArea","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string[]","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"NativeScrollArea","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/native-scroll-area/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"NativeSelect","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/native-select/","props":[{"name":"attributes","required":false,"source":"component","typeRef":416},{"name":"autoComplete","required":false,"source":"component","typeRef":359},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":false,"source":"component","description":"Data used to render options. Accepts strings, objects with label/value, or grouped options. If `children` prop is provided, `data` will be ignored.","typeRef":154},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"NavLink","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/nav-link/","props":[{"name":"active","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the link should have active styles","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":377},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"childrenOffset","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls indentation of nested NavLink components, key of `theme.spacing` or any valid CSS value","typeRef":183},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to control active styles","typeRef":162},{"name":"defaultOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled nested items collapse initial state","typeRef":341},{"name":"description","required":false,"source":"component","description":"Link description, displayed below the label","typeRef":263},{"name":"disableRightSectionRotation","required":false,"source":"component","literalValues":[false,true],"description":"If set, right section will not be rotated when collapse is opened","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set to `false`, child `NavLinks` are unmounted when collapsed","typeRef":341},{"name":"label","required":false,"source":"component","description":"Main link label","typeRef":263},{"name":"leftSection","required":false,"source":"component","description":"Section displayed on the left side of the label","typeRef":263},{"name":"noWrap","required":false,"source":"component","literalValues":[false,true],"description":"If set, label and description are truncated with ellipsis instead of wrapping","typeRef":341},{"name":"opened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled nested items collapse state","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Section displayed on the right side of the label","typeRef":263},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","light","subtle"],"typeRef":125}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Notification","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/notification/","props":[{"name":"attributes","required":false,"source":"component","typeRef":381},{"name":"closeButtonProps","required":false,"source":"component","description":"Props passed down to the close button","typeRef":94},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls icon background color or notification accent line color, key of `theme.colors` or any valid CSS color. When `icon` is provided, sets the icon background color. When no icon is provided, sets the colored accent line on the left.","typeRef":162},{"name":"icon","required":false,"source":"component","description":"Notification icon, replaces color line","typeRef":263},{"name":"loaderProps","required":false,"source":"component","description":"Props passed down to the `Loader` component","typeRef":176},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"If set, displays a `Loader` component instead of the icon. Takes precedence over the `icon` prop if both are provided.","typeRef":341},{"name":"title","required":false,"source":"component","description":"Notification title, displayed above the message body","typeRef":263},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCloseButton","required":false,"source":"component","literalValues":[false,true],"description":"If set, the close button is visible","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"NumberFormatter","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/number-formatter/","props":[{"name":"allowNegative","required":false,"source":"component","literalValues":[false,true],"description":"If set, negative values are allowed","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"decimalScale","required":false,"source":"component","description":"Limits the number of digits that are displayed after the decimal point","typeRef":353},{"name":"decimalSeparator","required":false,"source":"component","description":"Character used as a decimal separator, `'.'` by default","typeRef":359},{"name":"fixedDecimalScale","required":false,"source":"component","literalValues":[false,true],"description":"If set, zeros are added after `decimalSeparator` to match given `decimalScale`.","typeRef":341},{"name":"suffix","required":false,"source":"component","description":"Suffix added after the value","typeRef":359},{"name":"thousandSeparator","required":false,"source":"component","description":"A character used to separate thousands","typeRef":364},{"name":"thousandsGroupStyle","required":false,"source":"component","literalValues":["lakh","none","thousand","wan"],"description":"Defines the thousand grouping style","typeRef":60},{"name":"value","required":false,"source":"component","description":"Value to format","typeRef":365}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"NumberInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/number-input/","props":[{"name":"allowDecimal","required":false,"source":"component","literalValues":[false,true],"description":"If set, decimal values are allowed","typeRef":341},{"name":"allowLeadingZeros","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether leading zeros are allowed during input. If `false`, leading zeros are removed as you type (e.g., typing `007` results in `7`). Works in conjunction with `trimLeadingZeroesOnBlur`.","typeRef":341},{"name":"allowNegative","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether negative numbers are allowed. If `false`, the input will not accept negative values, and the decrement button will stop at `0` (when `min` is not set).","typeRef":341},{"name":"allowedDecimalSeparators","required":false,"source":"component","description":"Characters which when pressed result in a decimal separator. These characters will be replaced by the `decimalSeparator` in the input value.","typeRef":368},{"name":"attributes","required":false,"source":"component","typeRef":417},{"name":"clampBehavior","required":false,"source":"component","literalValues":["blur","none","strict"],"description":"Controls how values are clamped to the `min`/`max` range: - `'blur'` (default): User can type any value, but it's clamped when the input loses focus - `'strict'`: User cannot type values outside the range - `'none'`: No clamping; `min`/`max` only apply to increment/decrement controls and arrow keys","typeRef":58},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"decimalScale","required":false,"source":"component","description":"Limits the number of digits that can be entered after the decimal point","typeRef":353},{"name":"decimalSeparator","required":false,"source":"component","description":"Character used as a decimal separator. Generally used with `allowedDecimalSeparators` prop.","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":187},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"fixedDecimalScale","required":false,"source":"component","literalValues":[false,true],"description":"If `true`, automatically pads the decimal part with zeros to match `decimalScale` (e.g., with `decimalScale={2}`, typing `5.1` displays as `5.10`). Requires `decimalScale` to be set.","typeRef":341},{"name":"hideControls","required":false,"source":"component","literalValues":[false,true],"description":"If set, the up/down controls are hidden","typeRef":341},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"max","required":false,"source":"component","description":"Maximum possible value","typeRef":313},{"name":"min","required":false,"source":"component","description":"Minimum possible value","typeRef":313},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"selectAllOnFocus","required":false,"source":"component","literalValues":[false,true],"description":"If set, all text is selected when the input receives focus","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"startValue","required":false,"source":"component","description":"Value used when incrementing/decrementing an empty input. If `min` is set and `startValue < min`, `min` is used instead.","typeRef":313},{"name":"step","required":false,"source":"component","description":"Number by which value will be incremented/decremented with up/down controls and keyboard arrows","typeRef":313},{"name":"stepHoldDelay","required":false,"source":"component","description":"Initial delay in milliseconds before stepping the value.","typeRef":353},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"suffix","required":false,"source":"component","description":"Suffix added after the input value","typeRef":359},{"name":"thousandSeparator","required":false,"source":"component","description":"A character used to separate thousands","typeRef":364},{"name":"thousandsGroupStyle","required":false,"source":"component","literalValues":["lakh","none","thousand","wan"],"description":"Defines the thousand grouping style. 'thousand' (1,000), 'lakh' (1,00,000), 'wan' (1,0000), 'none'.","typeRef":60},{"name":"trimLeadingZeroesOnBlur","required":false,"source":"component","literalValues":[false,true],"description":"If set, leading zeros are removed on blur. For example, `00100` -> `100`","typeRef":341},{"name":"type","required":false,"source":"component","literalValues":["password","tel","text"],"description":"Controls input `type` attribute","typeRef":74},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":187},{"name":"valueIsNumericString","required":false,"source":"component","literalValues":[false,true],"description":"Advanced: Set to `true` if you're passing numeric strings (e.g., `\"12345\"`) and using formatting props like `prefix` or `suffix`. In most cases, you don't need this prop. See [react-number-format docs](https://www.npmjs.com/package/react-number-format) for details.","typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withKeyboardEvents","required":false,"source":"component","literalValues":[false,true],"description":"If set, up/down keyboard events increment/decrement value","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"number","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"OptionalPortal","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/optional-portal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Can render outside the widget root"},{"name":"OptionsDropdown","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/options-dropdown/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"OverflowList","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/overflow-list/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"collapseFrom","required":false,"source":"component","literalValues":["end","start"],"description":"Direction from which items are collapsed when they overflow, `'end'` collapses last items, `'start'` collapses first items","typeRef":32},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Array of items to display","typeRef":314},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem","typeRef":183},{"name":"maxRows","required":false,"source":"component","description":"Number of rows to display","typeRef":353},{"name":"maxVisibleItems","required":false,"source":"component","description":"Maximum number of visible items","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Overlay","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/overlay/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"backgroundOpacity","required":false,"source":"component","description":"Overlay `background-color` opacity 0–1, ignored when `gradient` prop is set","typeRef":353},{"name":"blur","required":false,"source":"component","description":"Overlay background blur in px (converted to rem). Applies `backdrop-filter: blur()`. Note: backdrop-filter is not supported in all browsers.","typeRef":365},{"name":"center","required":false,"source":"component","literalValues":[false,true],"description":"Centers content inside the overlay using flexbox (sets display: flex, align-items: center, justify-content: center)","typeRef":341},{"name":"color","required":false,"source":"component","description":"Overlay `background-color`","typeRef":245},{"name":"fixed","required":false,"source":"component","literalValues":[false,true],"description":"Changes position from `absolute` to `fixed` (viewport-relative instead of parent-relative)","typeRef":341},{"name":"gradient","required":false,"source":"component","description":"Changes overlay to gradient. If set, both `color` and `backgroundOpacity` props are ignored.","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"PaginatedList","package":"@homarr/widgets","category":"interaction","safety":"allowed","description":"Renders a bounded page of collection items.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"pageSize","source":"component","required":false,"typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[{"name":"attributes","required":false,"source":"component","typeRef":425},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on the active page background color to ensure sufficient contrast","typeRef":341},{"name":"boundaries","required":false,"source":"component","description":"Number of elements visible on the left/right edges","typeRef":353},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors`, active item color","typeRef":162},{"name":"defaultValue","required":false,"source":"component","description":"Active page for uncontrolled component, must be an integer in [1, total] interval","typeRef":353},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing`, gap between controls","typeRef":183},{"name":"hideWithOnePage","required":false,"source":"component","literalValues":[false,true],"description":"If set, the pagination is hidden when only one page is available (`total={1}`)","typeRef":341},{"name":"layout","required":false,"source":"component","literalValues":["default","responsive"],"description":"Determines how the pagination is displayed, `'responsive'` uses CSS container queries to switch between pages and a compact label","typeRef":28},{"name":"siblings","required":false,"source":"component","description":"Number of siblings displayed on the left/right side of the selected page","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["input-lg","input-md","input-sm","input-xl","input-xs","lg","md","sm","xl","xs"],"description":"`height` and `min-width` of controls","typeRef":356},{"name":"startValue","required":false,"source":"component","description":"Starting page number, defaults to 1","typeRef":353},{"name":"total","required":true,"source":"component","description":"Total number of pages, must be an integer","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Active page for controlled component, must be an integer in [1, total] interval","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withControls","required":false,"source":"component","literalValues":[false,true],"description":"If set, next/previous controls are displayed","typeRef":341},{"name":"withEdges","required":false,"source":"component","literalValues":[false,true],"description":"If set, first/last controls are displayed","typeRef":341},{"name":"withPages","required":false,"source":"component","literalValues":[false,true],"description":"If set to `false`, page number buttons are hidden, only next/previous controls remain","typeRef":341}],"blockedProps":[],"subcomponents":["Pagination.Control","Pagination.Dots","Pagination.First","Pagination.Items","Pagination.Label","Pagination.Last","Pagination.Next","Pagination.Previous","Pagination.Root"],"bind":{"type":"number","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Control","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[{"name":"active","required":false,"source":"component","literalValues":[false,true],"description":"Applies active styles, adds `data-active` attribute","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":211},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withPadding","required":false,"source":"component","literalValues":[false,true],"description":"Applies padding","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Dots","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":214},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.First","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Items","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Label","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Last","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Next","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Previous","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Pagination.Root","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination/","props":[{"name":"attributes","required":false,"source":"component","typeRef":425},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on the active page background color to ensure sufficient contrast","typeRef":341},{"name":"boundaries","required":false,"source":"component","description":"Number of elements visible on the left/right edges","typeRef":353},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors`, active item color","typeRef":162},{"name":"defaultValue","required":false,"source":"component","description":"Active page for uncontrolled component, must be an integer in [1, total] interval","typeRef":353},{"name":"layout","required":false,"source":"component","literalValues":["default","responsive"],"description":"Determines how the pagination is displayed, `'responsive'` uses CSS container queries to switch between pages and a compact label","typeRef":28},{"name":"siblings","required":false,"source":"component","description":"Number of siblings displayed on the left/right side of the selected page","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["input-lg","input-md","input-sm","input-xl","input-xs","lg","md","sm","xl","xs"],"description":"`height` and `min-width` of controls","typeRef":356},{"name":"startValue","required":false,"source":"component","description":"Starting page number, defaults to 1","typeRef":353},{"name":"total","required":true,"source":"component","description":"Total number of pages, must be an integer","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Active page for controlled component, must be an integer in [1, total] interval","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"PaginationControl","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-control/","props":[{"name":"active","required":false,"source":"component","literalValues":[false,true],"description":"Applies active styles, adds `data-active` attribute","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":211},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withPadding","required":false,"source":"component","literalValues":[false,true],"description":"Applies padding","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationDots","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-dots/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":214},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationFirst","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-first/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationItems","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-items/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationLabel","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-label/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationLast","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-last/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationNext","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-next/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationPrevious","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-previous/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PaginationRoot","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pagination-root/","props":[{"name":"attributes","required":false,"source":"component","typeRef":425},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on the active page background color to ensure sufficient contrast","typeRef":341},{"name":"boundaries","required":false,"source":"component","description":"Number of elements visible on the left/right edges","typeRef":353},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors`, active item color","typeRef":162},{"name":"defaultValue","required":false,"source":"component","description":"Active page for uncontrolled component, must be an integer in [1, total] interval","typeRef":353},{"name":"layout","required":false,"source":"component","literalValues":["default","responsive"],"description":"Determines how the pagination is displayed, `'responsive'` uses CSS container queries to switch between pages and a compact label","typeRef":28},{"name":"siblings","required":false,"source":"component","description":"Number of siblings displayed on the left/right side of the selected page","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["input-lg","input-md","input-sm","input-xl","input-xs","lg","md","sm","xl","xs"],"description":"`height` and `min-width` of controls","typeRef":356},{"name":"startValue","required":false,"source":"component","description":"Starting page number, defaults to 1","typeRef":353},{"name":"total","required":true,"source":"component","description":"Total number of pages, must be an integer","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Active page for controlled component, must be an integer in [1, total] interval","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Paper","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/paper/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"PasswordInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/password-input/","props":[{"name":"attributes","required":false,"source":"component","typeRef":418},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultVisible","required":false,"source":"component","literalValues":[false,true],"description":"If set, the input value is visible by default","typeRef":341},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"visibilityToggleButtonProps","required":false,"source":"component","description":"Props passed down to the visibility toggle button","typeRef":266},{"name":"visible","required":false,"source":"component","literalValues":[false,true],"description":"If set, the input value is visible","typeRef":341},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"PickerControl","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/picker-control/","props":[{"name":"attributes","required":false,"source":"component","typeRef":451},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"firstInRange","required":false,"source":"component","literalValues":[false,true],"description":"Assigns first in range styles","typeRef":341},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the control should take the full width of its cell","typeRef":341},{"name":"inRange","required":false,"source":"component","literalValues":[false,true],"description":"Assigns in range styles","typeRef":341},{"name":"lastInRange","required":false,"source":"component","literalValues":[false,true],"description":"Assigns last in range styles","typeRef":341},{"name":"selected","required":false,"source":"component","literalValues":[false,true],"description":"Assigns selected styles","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"PickerInputBase","package":"@mantine/dates","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/dates/picker-input-base/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Internal date-input primitive"},{"name":"PieChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/pie-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":441},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data used to render chart","typeRef":240},{"name":"endAngle","required":false,"source":"component","description":"Controls angle at which charts ends. Set to `0` to render the chart as semicircle.","typeRef":353},{"name":"labelColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls text color of all labels, white by default","typeRef":162},{"name":"labelsPosition","required":false,"source":"component","literalValues":["inside","outside"],"description":"Controls labels position relative to the segment","typeRef":46},{"name":"labelsType","required":false,"source":"component","literalValues":["name","percent","value"],"description":"Type of labels to display","typeRef":77},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to recharts `Legend` component","typeRef":190},{"name":"paddingAngle","required":false,"source":"component","description":"Controls padding between segments","typeRef":353},{"name":"pieChartProps","required":false,"source":"component","description":"Props passed down to recharts `PieChart` component","typeRef":101},{"name":"pieProps","required":false,"source":"component","description":"Props passed down to recharts `Pie` component","typeRef":203},{"name":"size","required":false,"source":"component","description":"Controls chart width and height, height is increased by 40 if `withLabels` prop is set. Cannot be less than `thickness`.","typeRef":353},{"name":"startAngle","required":false,"source":"component","description":"Controls angle at which chart starts. Set to `180` to render the chart as semicircle.","typeRef":353},{"name":"strokeColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the segments stroke, by default depends on color scheme","typeRef":162},{"name":"strokeWidth","required":false,"source":"component","description":"Controls width of segments stroke","typeRef":353},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip animation duration in ms","typeRef":353},{"name":"tooltipDataSource","required":false,"source":"component","literalValues":["all","segment"],"description":"Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment.","typeRef":9},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to `Tooltip` recharts component","typeRef":197},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withLabels","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether each segment should have associated label","typeRef":341},{"name":"withLabelsLine","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether segments labels should have lines that connect the segment with the label","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the legend should be displayed","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the tooltip should be displayed when one of the section is hovered","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Pill","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pill/","props":[{"name":"attributes","required":false,"source":"component","typeRef":428},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"removeButtonProps","required":false,"source":"component","description":"Props passed down to the remove button","typeRef":93},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls pill `font-size` and `padding`","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["contrast","default"],"typeRef":126},{"name":"withRemoveButton","required":false,"source":"component","literalValues":[false,true],"description":"Controls visibility of the remove button","typeRef":341}],"blockedProps":[],"subcomponents":["Pill.Group"],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Pill.Group","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pill/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls spacing between pills, by default controlled by `size`","typeRef":355},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the child `Pill` components and gap between them","typeRef":182},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PillGroup","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pill-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":400},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls spacing between pills, by default controlled by `size`","typeRef":355},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the child `Pill` components and gap between them","typeRef":182},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"PillsInput","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/pills-input/","props":[],"blockedProps":[],"subcomponents":["PillsInput.Field"],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"PillsInput.Field","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/pills-input/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"PillsInputField","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/pills-input-field/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Low-level composition primitive that requires authored callbacks"},{"name":"PinInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/pin-input/","props":[{"name":"ariaLabel","required":false,"source":"component","description":"`aria-label` attribute","typeRef":359},{"name":"attributes","required":false,"source":"component","typeRef":419},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":359},{"name":"error","required":false,"source":"component","literalValues":[false,true],"description":"Sets `aria-invalid` attribute and applies error styles to all inputs","typeRef":341},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem","typeRef":183},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":261},{"name":"inputType","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"description":"Inputs `type` attribute, inferred from the `type` prop if not specified","typeRef":262},{"name":"length","required":false,"source":"component","description":"Number of inputs","typeRef":353},{"name":"manageFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be moved automatically to the next input once filled","typeRef":341},{"name":"mask","required":false,"source":"component","literalValues":[false,true],"description":"Changes input type to `\"password\"`","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls inputs `width` and `height`","typeRef":81},{"name":"success","required":false,"source":"component","literalValues":[false,true],"description":"Applies success styles to all inputs","typeRef":341},{"name":"type","required":false,"source":"component","literalValues":["alphanumeric","number"],"description":"Determines which values can be entered","typeRef":62},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Popover","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/popover/","props":[{"name":"arrowOffset","required":false,"source":"component","description":"Arrow offset in px","typeRef":353},{"name":"arrowPosition","required":false,"source":"component","literalValues":["center","merge","side"],"description":"Arrow position","typeRef":24},{"name":"arrowRadius","required":false,"source":"component","description":"Arrow `border-radius` in px","typeRef":353},{"name":"arrowSize","required":false,"source":"component","description":"Arrow size in px","typeRef":353},{"name":"attributes","required":false,"source":"component","typeRef":399},{"name":"clickOutsideEvents","required":false,"source":"component","description":"Events that trigger outside clicks","typeRef":368},{"name":"closeOnClickOutside","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dropdown should be closed on outside clicks","typeRef":341},{"name":"closeOnEscape","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dropdown should be closed when `Escape` key is pressed","typeRef":341},{"name":"defaultOpened","required":false,"source":"component","literalValues":[false,true],"description":"Initial opened state for uncontrolled component","typeRef":341},{"name":"floatingStrategy","required":false,"source":"component","literalValues":["absolute","fixed"],"description":"Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy)","typeRef":34},{"name":"hideDetached","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead.","typeRef":341},{"name":"keepMountedMode","required":false,"source":"component","literalValues":["activity","display-none"],"description":"Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles","typeRef":7},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling","typeRef":241},{"name":"offset","required":false,"source":"component","description":"Offset of the dropdown element","typeRef":354},{"name":"opened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled dropdown opened state","typeRef":341},{"name":"overlayProps","required":false,"source":"component","description":"Props passed down to `Overlay` component","typeRef":100},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Dropdown position relative to the target element","typeRef":48},{"name":"preventPositionChangeWhenVisible","required":false,"source":"component","literalValues":[false,true],"description":"If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change.","typeRef":341},{"name":"returnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be automatically returned to control when dropdown closes","typeRef":341},{"name":"transitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component. Use to configure duration and animation type.","typeRef":208},{"name":"trapFocus","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether focus should be trapped within dropdown","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"width","required":false,"source":"component","description":"Dropdown width, or `'target'` to make dropdown width the same as target element","typeRef":243},{"name":"withArrow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether component should have an arrow","typeRef":341},{"name":"withOverlay","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the overlay should be displayed when the dropdown is opened","typeRef":341},{"name":"withRoles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dropdown and target elements should have accessible roles","typeRef":341}],"blockedProps":[],"subcomponents":["Popover.ContextMenu","Popover.Dropdown","Popover.Target"],"bind":{"type":"boolean","initialProp":"defaultChecked"},"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Popover.ContextMenu","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/popover/","props":[{"name":"longPressDelay","required":false,"source":"component","description":"Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Popover.Dropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/popover/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":234},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Popover.Target","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/popover/","props":[{"name":"popupType","required":false,"source":"component","description":"Popup accessible type","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"PopoverContextMenu","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/popover-context-menu/","props":[{"name":"longPressDelay","required":false,"source":"component","description":"Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"PopoverDropdown","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/popover-dropdown/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":234},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"PopoverTarget","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/popover-target/","props":[{"name":"popupType","required":false,"source":"component","description":"Popup accessible type","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Portal","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/portal/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Can render outside the widget root"},{"name":"Progress","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/progress/","props":[{"name":"animated","required":false,"source":"component","literalValues":[false,true],"description":"If set, the sections stripes are animated (automatically enables striped)","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":432},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts label text color based on section background color for readability","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS value","typeRef":162},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Controls orientation","typeRef":36},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls track height","typeRef":355},{"name":"striped","required":false,"source":"component","literalValues":[false,true],"description":"If set, the section has stripes","typeRef":341},{"name":"transitionDuration","required":false,"source":"component","description":"Controls sections width transition duration, value is specified in ms","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":true,"source":"component","description":"Value of the progress","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":["Progress.Label","Progress.Root","Progress.Section"],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"Progress.Label","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/progress/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"Progress.Root","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/progress/","props":[{"name":"attributes","required":false,"source":"component","typeRef":432},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts label text color based on section background color for readability","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Controls orientation","typeRef":36},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls track height","typeRef":355},{"name":"transitionDuration","required":false,"source":"component","description":"Controls sections width transition duration, value is specified in ms","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"Progress.Section","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/progress/","props":[{"name":"animated","required":false,"source":"component","literalValues":[false,true],"description":"If set, the sections stripes are animated, `striped` prop is ignored","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS value","typeRef":162},{"name":"striped","required":false,"source":"component","literalValues":[false,true],"description":"If set, the section has stripes","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":224},{"name":"value","required":true,"source":"component","description":"Value of the section in 0–100 range","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAria","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether `aria-*` props should be added to the root element","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"ProgressLabel","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/progress-label/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"ProgressRoot","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/progress-root/","props":[{"name":"attributes","required":false,"source":"component","typeRef":432},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts label text color based on section background color for readability","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Controls orientation","typeRef":36},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls track height","typeRef":355},{"name":"transitionDuration","required":false,"source":"component","description":"Controls sections width transition duration, value is specified in ms","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"ProgressSection","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/progress-section/","props":[{"name":"animated","required":false,"source":"component","literalValues":[false,true],"description":"If set, the sections stripes are animated, `striped` prop is ignored","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS value","typeRef":162},{"name":"striped","required":false,"source":"component","literalValues":[false,true],"description":"If set, the section has stripes","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":224},{"name":"value","required":true,"source":"component","description":"Value of the section in 0–100 range","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAria","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether `aria-*` props should be added to the root element","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"RadarChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/radar-chart/","props":[{"name":"activeDotProps","required":false,"source":"component","description":"Props passed down to all active dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"attributes","required":false,"source":"component","typeRef":440},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data used in the chart","typeRef":267},{"name":"dataKey","required":true,"source":"component","description":"Key of the `data` object for axis values","typeRef":359},{"name":"dotProps","required":false,"source":"component","description":"Props passed down to all dots. Ignored if `withDots={false}` is set.","typeRef":178},{"name":"gridColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the grid lines. By default, color depends on the color scheme.","typeRef":162},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to recharts Legend component","typeRef":190},{"name":"polarAngleAxisProps","required":false,"source":"component","description":"Props passed down to recharts PolarAngleAxis component","typeRef":191},{"name":"polarGridProps","required":false,"source":"component","description":"Props passed down to recharts PolarGrid component","typeRef":192},{"name":"polarRadiusAxisProps","required":false,"source":"component","description":"Props passed down to recharts PolarRadiusAxis component","typeRef":193},{"name":"radarChartProps","required":false,"source":"component","description":"Props passed down to recharts RadarChart component","typeRef":101},{"name":"series","required":true,"source":"component","description":"Determines which data should be consumed from the `data` array.","typeRef":255},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of all text elements. By default, color depends on the color scheme.","typeRef":162},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip position animation duration in ms","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to recharts Tooltip component","typeRef":197},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withDots","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dots should be displayed","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the legend should be displayed","typeRef":341},{"name":"withPolarAngleAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether PolarAngleAxis component should be displayed","typeRef":341},{"name":"withPolarGrid","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether PolarGrid component should be displayed","typeRef":341},{"name":"withPolarRadiusAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether PolarRadiusAxisProps component should be displayed","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether Tooltip component should be displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"RadialBarChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/radial-bar-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":442},{"name":"barSize","required":false,"source":"component","description":"Size of bars in px, `20` by default","typeRef":353},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Chart data","typeRef":267},{"name":"dataKey","required":true,"source":"component","description":"Key from data object to use as data key","typeRef":359},{"name":"emptyBackgroundColor","required":false,"source":"component","description":"Color of the empty background, by default depends on the color scheme","typeRef":359},{"name":"endAngle","required":false,"source":"component","description":"Angle at which chart ends","typeRef":353},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to recharts Legend component","typeRef":190},{"name":"radialBarChartProps","required":false,"source":"component","description":"Props passed down to recharts RadarChartChart component","typeRef":101},{"name":"radialBarProps","required":false,"source":"component","description":"Props passed down to recharts RadialBar component","typeRef":194},{"name":"startAngle","required":false,"source":"component","description":"Angle at which chart starts","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to `Tooltip` recharts component","typeRef":197},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withBackground","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether empty bars area should be visible","typeRef":341},{"name":"withLabels","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether labels should be displayed","typeRef":341},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the legend should be displayed","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the tooltip should be displayed when one of the bars is hovered","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Radio","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio/","props":[{"name":"attributes","required":false,"source":"component","typeRef":376},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of theme.colors or any valid CSS color to set radio background color in checked state","typeRef":162},{"name":"description","required":false,"source":"component","description":"Description displayed below the label","typeRef":263},{"name":"error","required":false,"source":"component","description":"Error displayed below the label","typeRef":263},{"name":"iconColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting","typeRef":162},{"name":"label","required":false,"source":"component","description":"Content of the `label` associated with the radio","typeRef":263},{"name":"labelPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the label relative to the input","typeRef":47},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the component","typeRef":182},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","outline"],"typeRef":128},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"If set, applies error styles to the radio when `error` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":103}],"blockedProps":[],"subcomponents":["Radio.Card","Radio.Group","Radio.Indicator"],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Radio.Card","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio/","props":[{"name":"attributes","required":false,"source":"component","typeRef":390},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value of the radio, used with Radio.Group","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Radio.Group","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio/","props":[{"name":"attributes","required":false,"source":"component","typeRef":426},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":329},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelElement","required":false,"source":"component","literalValues":["div","label"],"description":"Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually.","typeRef":31},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the `Input.Wrapper`","typeRef":81},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":329},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the `Input.Wrapper`","typeRef":103}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Radio.Indicator","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio/","props":[{"name":"attributes","required":false,"source":"component","typeRef":403},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of theme.colors or any valid CSS color to set indicator background color in checked state","typeRef":162},{"name":"iconColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting","typeRef":162},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the component","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","outline"],"typeRef":127}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"RadioCard","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio-card/","props":[{"name":"attributes","required":false,"source":"component","typeRef":390},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value of the radio, used with Radio.Group","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"RadioGroup","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":426},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":329},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelElement","required":false,"source":"component","literalValues":["div","label"],"description":"Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually.","typeRef":31},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the `Input.Wrapper`","typeRef":81},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":329},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the `Input.Wrapper`","typeRef":103}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"RadioIcon","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio-icon/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"display","required":false,"source":"component","typeRef":365},{"name":"opacity","required":false,"source":"component","typeRef":365},{"name":"radius","required":false,"source":"component","typeRef":365},{"name":"size","required":false,"source":"component","typeRef":365},{"name":"type","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"RadioIndicator","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/radio-indicator/","props":[{"name":"attributes","required":false,"source":"component","typeRef":403},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of theme.colors or any valid CSS color to set indicator background color in checked state","typeRef":162},{"name":"iconColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting","typeRef":162},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the component","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["filled","outline"],"typeRef":127}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"RangeSlider","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/range-slider/","props":[{"name":"attributes","required":false,"source":"component","typeRef":424},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls color of track and thumb","typeRef":162},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":256},{"name":"domain","required":false,"source":"component","description":"Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain).","typeRef":334},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":261},{"name":"inverted","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether track values representation should be inverted","typeRef":341},{"name":"labelAlwaysOn","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the label should be visible when the slider is not being dragged or hovered","typeRef":341},{"name":"labelTransitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component","typeRef":208},{"name":"marks","required":false,"source":"component","description":"Marks displayed on the track","typeRef":276},{"name":"max","required":false,"source":"component","description":"Maximum possible value","typeRef":353},{"name":"maxRange","required":false,"source":"component","description":"Maximum range interval","typeRef":353},{"name":"min","required":false,"source":"component","description":"Minimal possible value","typeRef":353},{"name":"minRange","required":false,"source":"component","description":"Minimal range interval between the two thumbs. Consider this value relative to the total range (max - min).","typeRef":353},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Slider orientation","typeRef":36},{"name":"precision","required":false,"source":"component","description":"Number of significant digits after the decimal point","typeRef":353},{"name":"pushOnOverlap","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the other thumb should be pushed by the current thumb dragging when `minRange`/`maxRange` is reached","typeRef":341},{"name":"restrictToMarks","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the selection should be only allowed from the given marks array","typeRef":341},{"name":"showLabelOnHover","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the label should be displayed when the slider is hovered","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the track","typeRef":355},{"name":"step","required":false,"source":"component","description":"Number by which value will be incremented/decremented with thumb drag and arrows","typeRef":353},{"name":"thumbChildren","required":false,"source":"component","description":"Content rendered inside thumb","typeRef":263},{"name":"thumbFromLabel","required":false,"source":"component","description":"First thumb `aria-label`","typeRef":359},{"name":"thumbLabel","required":false,"source":"component","description":"`aria-label` for both thumbs (overridden by thumbFromLabel/thumbToLabel if provided)","typeRef":359},{"name":"thumbSize","required":false,"source":"component","description":"Thumb `width` and `height`, by default value is computed based on `size` prop","typeRef":365},{"name":"thumbToLabel","required":false,"source":"component","description":"Second thumb `aria-label`","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":256},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"number[]","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Rating","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/rating/","props":[{"name":"allowClear","required":false,"source":"component","literalValues":[false,true],"description":"When true, clicking the same rating value clears the rating to 0, default is false","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":409},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of theme.colors or any CSS color value, default is 'yellow'","typeRef":162},{"name":"count","required":false,"source":"component","description":"Number of rating items (stars), default is 5","typeRef":353},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":353},{"name":"fractions","required":false,"source":"component","description":"Number of fractions each item can be divided into, default is 1","typeRef":353},{"name":"highlightSelectedOnly","required":false,"source":"component","literalValues":[false,true],"description":"When true, only the clicked rating item is highlighted, not all items up to the selected value, default is false","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls component size","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"number","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"RefreshButton","package":"@homarr/widgets","category":"network","safety":"wrapped","description":"Refreshes load-triggered widget queries.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"color","source":"component","required":false,"typeRef":359},{"name":"label","source":"component","required":false,"typeRef":359},{"name":"size","source":"component","required":false,"typeRef":359},{"name":"variant","source":"component","required":false,"typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Action labels must describe their effect; destructive actions require confirmation."]},{"name":"RemoveScroll","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/remove-scroll/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Changes global page scrolling"},{"name":"RingProgress","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/ring-progress/","props":[{"name":"attributes","required":false,"source":"component","typeRef":433},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"label","required":false,"source":"component","description":"Label displayed in the center of the ring","typeRef":263},{"name":"rootColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the unfilled portion of the ring (background). Defaults to gray-2 in light mode, dark-4 in dark mode","typeRef":162},{"name":"roundCaps","required":false,"source":"component","literalValues":[false,true],"description":"Applies rounded line caps to the start and end of visible sections","typeRef":341},{"name":"sectionGap","required":false,"source":"component","description":"Gap between sections in degrees. Reduces the visual size of each section","typeRef":353},{"name":"sections","required":true,"source":"component","description":"Array of sections to display in the ring. Each section should have a `value` (0-100), `color`, and optional `tooltip`. Sections can also receive any valid SVG circle element props.","typeRef":271},{"name":"size","required":false,"source":"component","description":"Width and height of the progress ring","typeRef":353},{"name":"startAngle","required":false,"source":"component","description":"Starting angle in degrees. 0 = right, 90 = bottom, 180 = left, 270 = top","typeRef":353},{"name":"thickness","required":false,"source":"component","description":"Ring thickness in pixels. Cannot exceed size / 4 and will be automatically clamped if necessary","typeRef":353},{"name":"transitionDuration","required":false,"source":"component","description":"Transition duration in milliseconds for section value and color changes","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"RollingNumber","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/rolling-number/","props":[{"name":"animationDuration","required":false,"source":"component","description":"Animation duration in milliseconds","typeRef":353},{"name":"attributes","required":false,"source":"component","typeRef":458},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"decimalScale","required":false,"source":"component","description":"Number of decimal places to display","typeRef":353},{"name":"decimalSeparator","required":false,"source":"component","description":"Character used as a decimal separator","typeRef":359},{"name":"fixedDecimalScale","required":false,"source":"component","literalValues":[false,true],"description":"If set, trailing zeros are added to match `decimalScale`","typeRef":341},{"name":"suffix","required":false,"source":"component","description":"Suffix added after the value","typeRef":359},{"name":"tabularNumbers","required":false,"source":"component","literalValues":[false,true],"description":"If set, use tabular (monospace) numbers","typeRef":341},{"name":"thousandSeparator","required":false,"source":"component","description":"Character used to separate thousands, set to `true` for `,`","typeRef":364},{"name":"timingFunction","required":false,"source":"component","description":"CSS timing function for animation","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":true,"source":"component","description":"Number value to display","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withLiveRegion","required":false,"source":"component","literalValues":[false,true],"description":"If set, the root element acts as an `aria-live=\"polite\"` region (`role=\"status\"`) and screen readers announce every value change. When `false`, the root uses `role=\"img\"` so the current value is still accessible but updates are not announced.","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"SankeyChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/sankey-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":470},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"colors","required":false,"source":"component","description":"An array of colors used for nodes when no `color` is set on individual nodes","typeRef":164},{"name":"data","required":true,"source":"component","description":"Data used to render chart, must include `nodes` and `links` arrays","typeRef":272},{"name":"height","required":false,"source":"component","description":"Controls chart height","typeRef":353},{"name":"iterations","required":false,"source":"component","description":"The number of relaxation iterations","typeRef":353},{"name":"linkColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Default color for links, by default depends on color scheme","typeRef":162},{"name":"linkCurvature","required":false,"source":"component","description":"The curvature of links between nodes","typeRef":353},{"name":"linkOpacity","required":false,"source":"component","description":"Opacity of the link fill","typeRef":353},{"name":"nodeColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Default color for nodes, by default depends on color scheme","typeRef":162},{"name":"nodePadding","required":false,"source":"component","description":"The padding between nodes","typeRef":353},{"name":"nodeWidth","required":false,"source":"component","description":"The width of each node","typeRef":353},{"name":"sankeyProps","required":false,"source":"component","description":"Props passed down to recharts `Sankey` component","typeRef":205},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls text color of labels","typeRef":162},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip animation duration in ms","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to `Tooltip` recharts component","typeRef":197},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the tooltip should be displayed when hovered","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"ScatterChart","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/scatter-chart/","props":[{"name":"attributes","required":false,"source":"component","typeRef":435},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data that is used to build the chart","typeRef":273},{"name":"dataKey","required":true,"source":"component","description":"Keys that should be used to retrieve data from the data array on x and y axis","typeRef":479},{"name":"gridAxis","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which lines should be displayed in the grid, `'x'` by default","typeRef":61},{"name":"gridColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the grid and cursor lines, by default depends on color scheme","typeRef":162},{"name":"gridProps","required":false,"source":"component","description":"Props passed down to the `CartesianGrid` component","typeRef":189},{"name":"labels","required":false,"source":"component","description":"Labels that should be used instead of keys names in the tooltip","typeRef":481},{"name":"legendProps","required":false,"source":"component","description":"Props passed down to the `Legend` component","typeRef":190},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Chart orientation, `'horizontal'` by default","typeRef":36},{"name":"pointLabels","required":false,"source":"component","literalValues":["x","y"],"description":"If set, displays labels next to points for the given axis","typeRef":80},{"name":"referenceLines","required":false,"source":"component","description":"Reference lines that should be displayed on the chart","typeRef":149},{"name":"rightYAxisLabel","required":false,"source":"component","description":"A label to display next to the right y-axis","typeRef":359},{"name":"rightYAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component rendered on the right side","typeRef":199},{"name":"scatterChartProps","required":false,"source":"component","description":"Props passed down to recharts `ScatterChart` component","typeRef":91},{"name":"scatterProps","required":false,"source":"component","description":"Props passed down to recharts `Scatter` component","typeRef":207},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of the text displayed inside the chart, `'dimmed'` by default","typeRef":162},{"name":"tickLine","required":false,"source":"component","literalValues":["none","x","xy","y"],"description":"Specifies which axis should have tick line, `'y'` by default","typeRef":61},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip position animation duration in ms, `0` by default","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to the `Tooltip` component","typeRef":197},{"name":"unit","required":false,"source":"component","description":"Units displayed after value on axis and inside the tooltip","typeRef":481},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withLegend","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart legend should be displayed, `false` by default","typeRef":341},{"name":"withRightYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default","typeRef":341},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether chart tooltip should be displayed, `true` by default","typeRef":341},{"name":"withXAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether x-axis should be displayed, `true` by default","typeRef":341},{"name":"withYAxis","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether y-axis should be displayed, `true` by default","typeRef":341},{"name":"xAxisLabel","required":false,"source":"component","description":"A label to display below the x-axis","typeRef":359},{"name":"xAxisProps","required":false,"source":"component","description":"Props passed down to the `XAxis` recharts component","typeRef":198},{"name":"yAxisLabel","required":false,"source":"component","description":"A label to display next to the y-axis","typeRef":359},{"name":"yAxisProps","required":false,"source":"component","description":"Props passed down to the `YAxis` recharts component","typeRef":199}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"ScrollArea","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/scroll-area/","props":[{"name":"attributes","required":false,"source":"component","typeRef":396},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"offsetScrollbars","required":false,"source":"component","literalValues":[false,"present",true,"x","y"],"description":"Determines whether scrollbars should be offset with padding on given axis - `true` - adds padding to offset both scrollbars (always) - `'x'` - adds padding to offset horizontal scrollbar (always) - `'y'` - adds padding to offset vertical scrollbar (always) - `'present'` - adds padding only when scrollbars are visible (dynamic)","typeRef":351},{"name":"overscrollBehavior","required":false,"source":"component","literalValues":["-moz-initial","auto","contain","inherit","initial","none","revert","revert-layer","unset"],"description":"Defines `overscroll-behavior` of the viewport","typeRef":253},{"name":"scrollHideDelay","required":false,"source":"component","description":"Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll`","typeRef":353},{"name":"scrollbarSize","required":false,"source":"component","description":"Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem)","typeRef":365},{"name":"scrollbars","required":false,"source":"component","literalValues":[false,"x","xy","y"],"description":"Axis at which scrollbars must be rendered - `'x'` - horizontal scrollbar only - `'y'` - vertical scrollbar only - `'xy'` - both scrollbars - `false` - no scrollbars rendered (content remains scrollable via mouse/touch)","typeRef":340},{"name":"startScrollPosition","required":false,"source":"component","description":"Initial scroll position set on mount","typeRef":480},{"name":"type","required":false,"source":"component","literalValues":["always","auto","hover","never","scroll"],"description":"Defines scrollbars behavior - `'hover'` – scrollbars visible on hover (default) - `'scroll'` – scrollbars visible during scrolling - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto) - `'always'` – scrollbars always visible, even when content doesn't overflow - `'never'` – scrollbars always hidden","typeRef":12},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"viewportProps","required":false,"source":"component","description":"Props passed down to the viewport element","typeRef":259}],"blockedProps":[],"subcomponents":["ScrollArea.Autosize"],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"ScrollArea.Autosize","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/scroll-area/","props":[{"name":"attributes","required":false,"source":"component","typeRef":396},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"offsetScrollbars","required":false,"source":"component","literalValues":[false,"present",true,"x","y"],"description":"Determines whether scrollbars should be offset with padding on given axis - `true` - adds padding to offset both scrollbars (always) - `'x'` - adds padding to offset horizontal scrollbar (always) - `'y'` - adds padding to offset vertical scrollbar (always) - `'present'` - adds padding only when scrollbars are visible (dynamic)","typeRef":351},{"name":"overscrollBehavior","required":false,"source":"component","literalValues":["-moz-initial","auto","contain","inherit","initial","none","revert","revert-layer","unset"],"description":"Defines `overscroll-behavior` of the viewport","typeRef":253},{"name":"scrollHideDelay","required":false,"source":"component","description":"Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll`","typeRef":353},{"name":"scrollbarSize","required":false,"source":"component","description":"Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem)","typeRef":365},{"name":"scrollbars","required":false,"source":"component","literalValues":[false,"x","xy","y"],"description":"Axis at which scrollbars must be rendered - `'x'` - horizontal scrollbar only - `'y'` - vertical scrollbar only - `'xy'` - both scrollbars - `false` - no scrollbars rendered (content remains scrollable via mouse/touch)","typeRef":340},{"name":"startScrollPosition","required":false,"source":"component","description":"Initial scroll position set on mount","typeRef":480},{"name":"type","required":false,"source":"component","literalValues":["always","auto","hover","never","scroll"],"description":"Defines scrollbars behavior - `'hover'` – scrollbars visible on hover (default) - `'scroll'` – scrollbars visible during scrolling - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto) - `'always'` – scrollbars always visible, even when content doesn't overflow - `'never'` – scrollbars always hidden","typeRef":12},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"viewportProps","required":false,"source":"component","description":"Props passed down to the viewport element","typeRef":259}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"ScrollAreaAutosize","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/scroll-area-autosize/","props":[{"name":"attributes","required":false,"source":"component","typeRef":396},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"offsetScrollbars","required":false,"source":"component","literalValues":[false,"present",true,"x","y"],"description":"Determines whether scrollbars should be offset with padding on given axis - `true` - adds padding to offset both scrollbars (always) - `'x'` - adds padding to offset horizontal scrollbar (always) - `'y'` - adds padding to offset vertical scrollbar (always) - `'present'` - adds padding only when scrollbars are visible (dynamic)","typeRef":351},{"name":"overscrollBehavior","required":false,"source":"component","literalValues":["-moz-initial","auto","contain","inherit","initial","none","revert","revert-layer","unset"],"description":"Defines `overscroll-behavior` of the viewport","typeRef":253},{"name":"scrollHideDelay","required":false,"source":"component","description":"Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll`","typeRef":353},{"name":"scrollbarSize","required":false,"source":"component","description":"Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem)","typeRef":365},{"name":"scrollbars","required":false,"source":"component","literalValues":[false,"x","xy","y"],"description":"Axis at which scrollbars must be rendered - `'x'` - horizontal scrollbar only - `'y'` - vertical scrollbar only - `'xy'` - both scrollbars - `false` - no scrollbars rendered (content remains scrollable via mouse/touch)","typeRef":340},{"name":"startScrollPosition","required":false,"source":"component","description":"Initial scroll position set on mount","typeRef":480},{"name":"type","required":false,"source":"component","literalValues":["always","auto","hover","never","scroll"],"description":"Defines scrollbars behavior - `'hover'` – scrollbars visible on hover (default) - `'scroll'` – scrollbars visible during scrolling - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto) - `'always'` – scrollbars always visible, even when content doesn't overflow - `'never'` – scrollbars always hidden","typeRef":12},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"viewportProps","required":false,"source":"component","description":"Props passed down to the viewport element","typeRef":259}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Scroller","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/scroller/","props":[{"name":"attributes","required":false,"source":"component","typeRef":393},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"controlSize","required":false,"source":"component","description":"Size of the control buttons,","typeRef":365},{"name":"draggable","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether content can be scrolled by dragging with mouse, `true` by default","typeRef":341},{"name":"edgeGradientColor","required":false,"source":"component","description":"Background color for the gradient fade on controls, `'var(--mantine-color-body)'` by default","typeRef":359},{"name":"endControlIcon","required":false,"source":"component","description":"Icon component for the end control, AccordionChevron by default","typeRef":263},{"name":"endControlProps","required":false,"source":"component","description":"Props passed to the end control button","typeRef":258},{"name":"scrollAmount","required":false,"source":"component","description":"Amount of pixels to scroll when clicking the control buttons, `200` by default","typeRef":353},{"name":"showEndControl","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether end control should always be visible regardless of scroll position, `false` by default","typeRef":341},{"name":"showStartControl","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether start control should always be visible regardless of scroll position, `false` by default","typeRef":341},{"name":"startControlIcon","required":false,"source":"component","description":"Icon component for the start control, AccordionChevron by default","typeRef":263},{"name":"startControlProps","required":false,"source":"component","description":"Props passed to the start control button","typeRef":258},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"SegmentedControl","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/segmented-control/","props":[{"name":"attributes","required":false,"source":"component","typeRef":407},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, automatically adjusts label text color for optimal contrast against the indicator background color","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, changes indicator background color. By default, uses white in light mode and dark.5 in dark mode","typeRef":162},{"name":"data","required":true,"source":"component","description":"Data based on which controls are rendered","typeRef":108},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":328},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the component should take 100% width of its parent","typeRef":341},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Component orientation","typeRef":36},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size`, `padding` and `height` properties","typeRef":182},{"name":"transitionDuration","required":false,"source":"component","description":"Indicator `transition-duration` in ms, set `0` to turn off transitions","typeRef":353},{"name":"transitionTimingFunction","required":false,"source":"component","description":"Indicator `transition-timing-function` property","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":328},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withItemsBorders","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether there should be borders between items","typeRef":341}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Select","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/select/","props":[{"name":"allowDeselect","required":false,"source":"component","literalValues":[false,true],"description":"Allows deselecting the selected option by clicking it","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":405},{"name":"autoSelectOnBlur","required":false,"source":"component","literalValues":[false,true],"description":"Automatically selects the highlighted option when input loses focus","typeRef":341},{"name":"checkIconPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the check icon relative to the option label","typeRef":47},{"name":"chevronColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the default chevron, by default depends on the color scheme","typeRef":162},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":172},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"Displays clear button in the right section when component has value","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"comboboxProps","required":false,"source":"component","description":"Props passed down to `Combobox` component","typeRef":153},{"name":"data","required":false,"source":"component","description":"Data used to generate options. Values must be unique, otherwise an error will be thrown and component will not render.","typeRef":151},{"name":"defaultDropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled dropdown initial opened state","typeRef":341},{"name":"defaultSearchValue","required":false,"source":"component","description":"Default search value","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":329},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"dropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled dropdown opened state","typeRef":341},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"floatingHeight","required":false,"source":"component","literalValues":["viewport"],"description":"If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware.","typeRef":78},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":195},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"limit","required":false,"source":"component","description":"Maximum number of options displayed at a time, `Infinity` by default","typeRef":353},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxDropdownHeight","required":false,"source":"component","description":"`max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default","typeRef":365},{"name":"nothingFoundMessage","required":false,"source":"component","description":"Message displayed when no options match the search query or when there is no data","typeRef":263},{"name":"openOnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Opens dropdown when input receives focus (requires searchable={true})","typeRef":341},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props passed down to the underlying `ScrollArea` component in the dropdown","typeRef":274},{"name":"searchValue","required":false,"source":"component","description":"Controlled search value","typeRef":359},{"name":"searchable","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the select should be searchable","typeRef":341},{"name":"selectFirstOptionOnChange","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when value changes, `false` by default","typeRef":341},{"name":"selectFirstOptionOnDropdownOpen","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when dropdown opens, `false` by default","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":329},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAlignedLabels","required":false,"source":"component","literalValues":[false,true],"description":"Aligns unchecked labels with the checked one","typeRef":341},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withCheckIcon","required":false,"source":"component","literalValues":[false,true],"description":"Displays check icon near the selected option label","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withScrollArea","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"SemiCircleProgress","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/semi-circle-progress/","props":[{"name":"attributes","required":false,"source":"component","typeRef":434},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"emptySegmentColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color value","typeRef":162},{"name":"fillDirection","required":false,"source":"component","literalValues":["left-to-right","right-to-left"],"description":"Direction from which the circle is filled","typeRef":66},{"name":"filledSegmentColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color value","typeRef":162},{"name":"label","required":false,"source":"component","description":"Label rendered inside the circle","typeRef":263},{"name":"labelPosition","required":false,"source":"component","literalValues":["bottom","center"],"description":"Label position relative to the circle center","typeRef":21},{"name":"orientation","required":false,"source":"component","literalValues":["down","up"],"description":"Orientation of the circle","typeRef":76},{"name":"size","required":false,"source":"component","description":"Width of the component and diameter of the full circle in px. The visible SVG height will be size/2","typeRef":353},{"name":"thickness","required":false,"source":"component","description":"Stroke width of the circle segments in px","typeRef":353},{"name":"transitionDuration","required":false,"source":"component","description":"Transition duration for the filled segment progress changes in ms. Does not affect color transitions","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":true,"source":"component","description":"Progress value from `0` to `100`","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"SimpleGrid","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/simple-grid/","props":[{"name":"attributes","required":false,"source":"component","typeRef":455},{"name":"autoFlow","required":false,"source":"component","literalValues":["auto-fill","auto-fit"],"description":"Grid repeat type when minColWidth is set","typeRef":13},{"name":"autoRows","required":false,"source":"component","description":"Sets the size of implicitly created grid rows","typeRef":359},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"cols","required":false,"source":"component","description":"Number of columns","typeRef":312},{"name":"minColWidth","required":false,"source":"component","description":"Minimum column width when using auto-fit/auto-fill. When set, cols prop is ignored","typeRef":365},{"name":"spacing","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Spacing between columns","typeRef":284},{"name":"type","required":false,"source":"component","literalValues":["container","media"],"description":"Determines type of queries that are used for responsive styles","typeRef":51},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"verticalSpacing","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Spacing between rows. When not set, falls back to spacing value","typeRef":284}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Skeleton","package":"@mantine/core","category":"feedback","safety":"wrapped","documentationUrl":"https://mantine.dev/core/skeleton/","props":[{"name":"animate","required":false,"source":"component","literalValues":[false,true],"description":"Enables animation","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"circle","required":false,"source":"component","literalValues":[false,true],"description":"If set, Skeleton `width` and `border-radius` are equal to its `height`","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"height","required":false,"source":"component","description":"Skeleton `height`, numbers are converted to rem","typeRef":247},{"name":"radius","required":false,"source":"component","description":"Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem.","typeRef":246},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"visible","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether Skeleton overlay should be displayed","typeRef":341},{"name":"width","required":false,"source":"component","description":"Skeleton `width`, numbers are converted to rem, ignored when `circle` prop is set.","typeRef":254}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Do not rely on color alone to communicate status."]},{"name":"Slider","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/slider/","props":[{"name":"attributes","required":false,"source":"component","typeRef":424},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls color of track and thumb","typeRef":162},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":353},{"name":"domain","required":false,"source":"component","description":"Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain).","typeRef":334},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":261},{"name":"inverted","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether track value representation should be inverted","typeRef":341},{"name":"labelAlwaysOn","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the label should be visible when the slider is not being dragged or hovered","typeRef":341},{"name":"labelTransitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component","typeRef":208},{"name":"marks","required":false,"source":"component","description":"Marks displayed on the track","typeRef":276},{"name":"max","required":false,"source":"component","description":"Maximum possible value","typeRef":353},{"name":"min","required":false,"source":"component","description":"Minimal possible value","typeRef":353},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Slider orientation","typeRef":36},{"name":"precision","required":false,"source":"component","description":"Number of significant digits after the decimal point","typeRef":353},{"name":"restrictToMarks","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the selection should be only allowed from the given marks array","typeRef":341},{"name":"showLabelOnHover","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the label should be displayed when the slider is hovered","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the track","typeRef":355},{"name":"startPointValue","required":false,"source":"component","description":"Value at which the filled bar starts. When set, the bar extends from this point toward the current value. Ignored when `inverted` is set.","typeRef":353},{"name":"step","required":false,"source":"component","description":"Number by which value will be incremented/decremented with thumb drag and arrows","typeRef":353},{"name":"thumbChildren","required":false,"source":"component","description":"Content rendered inside thumb","typeRef":263},{"name":"thumbLabel","required":false,"source":"component","description":"Thumb `aria-label`","typeRef":359},{"name":"thumbProps","required":false,"source":"component","description":"Props passed down to thumb element","typeRef":259},{"name":"thumbSize","required":false,"source":"component","description":"Thumb `width` and `height`, by default value is computed based on `size` prop","typeRef":365},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":353},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"number","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Space","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/space/","props":[{"name":"attributes","required":false,"source":"component","typeRef":369},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"styles","required":false,"source":"component","typeRef":369},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Sparkline","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/sparkline/","props":[{"name":"areaProps","required":false,"source":"component","description":"Props passed down to the underlying recharts `Area` component","typeRef":188},{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"connectNulls","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether null values should be connected with other values","typeRef":341},{"name":"curveType","required":false,"source":"component","literalValues":["bump","linear","monotone","natural","step","stepAfter","stepBefore"],"description":"Type of the curve","typeRef":69},{"name":"data","required":true,"source":"component","description":"Data used to render the chart","typeRef":109},{"name":"fillOpacity","required":false,"source":"component","description":"Controls fill opacity of the area","typeRef":353},{"name":"strokeWidth","required":false,"source":"component","description":"Area stroke width","typeRef":353},{"name":"trendColors","required":false,"source":"component","description":"If set, `color` prop is ignored and chart color is determined by the difference between first and last value.","typeRef":277},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withGradient","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the chart fill should be a gradient","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"Splitter","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/splitter/","props":[{"name":"attributes","required":false,"source":"component","typeRef":468},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"handleColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color for the separator line","typeRef":162},{"name":"handleIcon","required":false,"source":"component","description":"Custom icon displayed in the handle thumb, by default uses grip icon based on orientation","typeRef":263},{"name":"lineSize","required":false,"source":"component","description":"CSS value for separator line thickness between panes","typeRef":365},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Layout direction","typeRef":36},{"name":"resetOnDoubleClick","required":false,"source":"component","literalValues":[false,true],"description":"Restore the two panes adjacent to a handle to their default ratio (preserving their combined size) when the handle is double-clicked","typeRef":341},{"name":"shiftStep","required":false,"source":"component","description":"Shift+arrow step size, a `number`/`%` is a percentage, `px`/`rem` is resolved to pixels","typeRef":280},{"name":"sizes","required":false,"source":"component","description":"Controlled sizes, each value keeps the unit it was declared in (number/`%` flexible, `px`/`rem` fixed)","typeRef":279},{"name":"step","required":false,"source":"component","description":"Keyboard step size, a `number`/`%` is a percentage, `px`/`rem` is resolved to pixels","typeRef":280},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withHandle","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the thumb with grip icon is displayed on the handle","typeRef":341}],"blockedProps":[],"subcomponents":["Splitter.Pane"],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Splitter.Pane","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/splitter/","props":[{"name":"collapseThreshold","required":false,"source":"component","description":"Size below which the pane snaps to collapsed, defaults to `min`","typeRef":278},{"name":"collapsible","required":false,"source":"component","literalValues":[false,true],"description":"Whether this pane can be collapsed","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultSize","required":true,"source":"component","description":"Initial size, a `number`/`%` is a flexible size (shares leftover space), `px`/`rem` is a fixed size. A bare number is treated as a percentage.","typeRef":278},{"name":"max","required":false,"source":"component","description":"Maximum size in the same units as `defaultSize`, no limit by default","typeRef":278},{"name":"min","required":false,"source":"component","description":"Minimum size in the same units as `defaultSize`","typeRef":278},{"name":"styles","required":false,"source":"component","typeRef":222},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"SplitterPane","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/splitter-pane/","props":[{"name":"collapseThreshold","required":false,"source":"component","description":"Size below which the pane snaps to collapsed, defaults to `min`","typeRef":278},{"name":"collapsible","required":false,"source":"component","literalValues":[false,true],"description":"Whether this pane can be collapsed","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultSize","required":true,"source":"component","description":"Initial size, a `number`/`%` is a flexible size (shares leftover space), `px`/`rem` is a fixed size. A bare number is treated as a percentage.","typeRef":278},{"name":"max","required":false,"source":"component","description":"Maximum size in the same units as `defaultSize`, no limit by default","typeRef":278},{"name":"min","required":false,"source":"component","description":"Minimum size in the same units as `defaultSize`","typeRef":278},{"name":"styles","required":false,"source":"component","typeRef":222},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"Spoiler","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/spoiler/","props":[{"name":"attributes","required":false,"source":"component","typeRef":394},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultExpanded","required":false,"source":"component","literalValues":[false,true],"description":"Initial expanded state in uncontrolled mode. If `true`, content starts expanded. If `false`, content starts collapsed","typeRef":341},{"name":"expanded","required":false,"source":"component","literalValues":[false,true],"description":"Controlled expanded state value","typeRef":341},{"name":"hideAriaLabel","required":false,"source":"component","description":"Accessible label for the toggle button when expanded. If not set, `hideLabel` is used","typeRef":359},{"name":"hideLabel","required":false,"source":"component","description":"Content displayed in the toggle button when content is expanded (to collapse)","typeRef":263},{"name":"maxHeight","required":false,"source":"component","description":"Maximum height of visible content in px. When content exceeds this height, the toggle control appears","typeRef":353},{"name":"showAriaLabel","required":false,"source":"component","description":"Accessible label for the toggle button when collapsed. If not set, `showLabel` is used","typeRef":359},{"name":"showLabel","required":false,"source":"component","description":"Content displayed in the toggle button when content is collapsed (to expand)","typeRef":263},{"name":"transitionDuration","required":false,"source":"component","description":"Spoiler reveal transition duration in ms. Set to 0 to disable animation","typeRef":353},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Stack","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/stack/","props":[{"name":"align","required":false,"source":"component","literalValues":["-moz-initial","anchor-center","baseline","center","end","flex-end","flex-start","inherit","initial","normal","revert","revert-layer","self-end","self-start","start","stretch","unset"],"description":"Controls `align-items` CSS property","typeRef":244},{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"gap","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value to set `gap` property, numbers are converted to rem","typeRef":183},{"name":"justify","required":false,"source":"component","literalValues":["-moz-initial","center","end","flex-end","flex-start","inherit","initial","left","normal","revert","revert-layer","right","space-around","space-between","space-evenly","start","stretch","unset"],"description":"Controls `justify-content` CSS property","typeRef":248},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"StatBar","package":"@homarr/widgets","category":"interaction","safety":"allowed","description":"Displays a compact labeled statistic and progress value.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"color","source":"component","required":false,"typeRef":359},{"name":"label","source":"component","required":false,"typeRef":359},{"name":"max","source":"component","required":false,"typeRef":353},{"name":"value","source":"component","required":true,"typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Stepper","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/stepper/","props":[{"name":"active","required":true,"source":"component","description":"Index of the active step","typeRef":353},{"name":"allowNextStepsSelect","required":false,"source":"component","literalValues":[false,true],"description":"When true, users can click and jump to any step. When false, users can only navigate to completed steps","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":397},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls colors of active and progress steps","typeRef":162},{"name":"contentPadding","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content","typeRef":183},{"name":"iconPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Icon position relative to the step body","typeRef":47},{"name":"iconSize","required":false,"source":"component","description":"Controls size of the step icon, by default icon size is inferred from `size` prop","typeRef":365},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, all step content is kept mounted. React 19 `Activity` is used to preserve state while content is hidden.","typeRef":341},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Stepper orientation","typeRef":36},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of various Stepper elements","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"wrap","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether steps should wrap to the next line if no space is available","typeRef":341}],"blockedProps":[],"subcomponents":["Stepper.Completed","Stepper.Step"],"bind":{"type":"number","initialProp":"defaultValue"},"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Stepper.Completed","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/stepper/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Stepper.Step","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/stepper/","props":[{"name":"allowStepClick","required":false,"source":"component","literalValues":[false,true],"description":"Set to false to disable clicks on step","typeRef":341},{"name":"allowStepSelect","required":false,"source":"component","literalValues":[false,true],"description":"Should step selection be allowed","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors`, by default controlled by Stepper component","typeRef":162},{"name":"iconPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Icon position relative to step body, controlled by Stepper component","typeRef":47},{"name":"iconSize","required":false,"source":"component","description":"Icon wrapper size","typeRef":365},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Indicates loading state of the step","typeRef":341},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Component orientation","typeRef":36},{"name":"state","required":false,"source":"component","literalValues":["stepCompleted","stepInactive","stepProgress"],"description":"Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed","typeRef":70},{"name":"step","required":false,"source":"component","description":"0-based step index, automatically set by Stepper component","typeRef":353},{"name":"styles","required":false,"source":"component","typeRef":235},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withIcon","required":false,"source":"component","literalValues":[false,true],"description":"When false, hides the step icon. Useful for creating compact steppers with only labels","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"StepperCompleted","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/stepper-completed/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"StepperStep","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/stepper-step/","props":[{"name":"allowStepClick","required":false,"source":"component","literalValues":[false,true],"description":"Set to false to disable clicks on step","typeRef":341},{"name":"allowStepSelect","required":false,"source":"component","literalValues":[false,true],"description":"Should step selection be allowed","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors`, by default controlled by Stepper component","typeRef":162},{"name":"iconPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Icon position relative to step body, controlled by Stepper component","typeRef":47},{"name":"iconSize","required":false,"source":"component","description":"Icon wrapper size","typeRef":365},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Indicates loading state of the step","typeRef":341},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Component orientation","typeRef":36},{"name":"state","required":false,"source":"component","literalValues":["stepCompleted","stepInactive","stepProgress"],"description":"Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed","typeRef":70},{"name":"step","required":false,"source":"component","description":"0-based step index, automatically set by Stepper component","typeRef":353},{"name":"styles","required":false,"source":"component","typeRef":235},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withIcon","required":false,"source":"component","literalValues":[false,true],"description":"When false, hides the step icon. Useful for creating compact steppers with only labels","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"SubData","package":"@homarr/widgets","category":"network","safety":"wrapped","description":"Reads a nested value from a named manual-query result.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"as","source":"component","required":false,"literalValues":["Text","Title","Badge","Code","Image"],"typeRef":84},{"name":"c","source":"component","required":false,"typeRef":359},{"name":"color","source":"component","required":false,"typeRef":359},{"name":"fit","source":"component","required":false,"typeRef":359},{"name":"fw","source":"component","required":false,"typeRef":353},{"name":"h","source":"component","required":false,"typeRef":365},{"name":"order","source":"component","required":false,"literalValues":[1,2,3,4,5,6],"typeRef":135},{"name":"radius","source":"component","required":false,"typeRef":365},{"name":"size","source":"component","required":false,"typeRef":359},{"name":"variant","source":"component","required":false,"typeRef":359},{"name":"w","source":"component","required":false,"typeRef":365}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Action labels must describe their effect; destructive actions require confirmation."]},{"name":"SubFetch","package":"@homarr/widgets","category":"network","safety":"wrapped","description":"Runs a named manual query with invocation-time parameters.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"as","source":"component","required":false,"literalValues":["json","text"],"typeRef":86},{"name":"errorMessage","source":"component","required":false,"typeRef":359},{"name":"fallback","source":"component","required":false,"typeRef":264},{"name":"loadingLabel","source":"component","required":false,"typeRef":359},{"name":"params","source":"component","required":false,"typeRef":270},{"name":"refreshInterval","source":"component","required":false,"typeRef":353},{"name":"requestId","source":"component","required":false,"description":"Identifier of the named Custom Widget query.","typeRef":359},{"name":"trigger","source":"component","required":false,"literalValues":["auto","manual"],"typeRef":85},{"name":"triggerAriaLabel","source":"component","required":false,"description":"Accessible label for a custom manual-query trigger.","typeRef":359},{"name":"triggerContent","source":"component","required":false,"description":"Custom accessible trigger shown before a manual query runs.","typeRef":264}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Action labels must describe their effect; destructive actions require confirmation."]},{"name":"Switch","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/switch/","props":[{"name":"attributes","required":false,"source":"component","typeRef":375},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to set input color in checked state","typeRef":162},{"name":"description","required":false,"source":"component","description":"Description displayed below the label","typeRef":263},{"name":"error","required":false,"source":"component","description":"Error displayed below the label","typeRef":263},{"name":"label","required":false,"source":"component","description":"Content of the label associated with the switch","typeRef":263},{"name":"labelPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the label relative to the input","typeRef":47},{"name":"offLabel","required":false,"source":"component","description":"Inner label when the `Switch` is in unchecked state","typeRef":263},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of all elements","typeRef":182},{"name":"thumbIcon","required":false,"source":"component","description":"Icon inside the thumb of the switch","typeRef":263},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withThumbIndicator","required":false,"source":"component","literalValues":[false,true],"description":"If set, displays a colored dot inside the thumb that matches the track background color","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":103}],"blockedProps":[],"subcomponents":["Switch.Group"],"bind":{"type":"boolean","initialProp":"defaultChecked"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Switch.Group","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/switch/","props":[{"name":"attributes","required":false,"source":"component","typeRef":426},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":330},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input for uncontrolled forms","typeRef":104},{"name":"hiddenInputValuesSeparator","required":false,"source":"component","description":"Separator for values in the hidden input for uncontrolled forms","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelElement","required":false,"source":"component","literalValues":["div","label"],"description":"Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually.","typeRef":31},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"maxSelectedValues","required":false,"source":"component","description":"Maximum number of switches that can be selected. When the limit is reached, unselected switches will be disabled","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the `Input.Wrapper`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":330},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the `Input.Wrapper`","typeRef":103}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string[]","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"SwitchGroup","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/switch-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":426},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":330},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input for uncontrolled forms","typeRef":104},{"name":"hiddenInputValuesSeparator","required":false,"source":"component","description":"Separator for values in the hidden input for uncontrolled forms","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelElement","required":false,"source":"component","literalValues":["div","label"],"description":"Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually.","typeRef":31},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"maxSelectedValues","required":false,"source":"component","description":"Maximum number of switches that can be selected. When the limit is reached, unselected switches will be disabled","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size of the `Input.Wrapper`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":330},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the `Input.Wrapper`","typeRef":103}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string[]","initialProp":"defaultValue"},"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TabPanel","package":"@homarr/widgets","category":"interaction","safety":"allowed","description":"Renders content for one declarative tab.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"label","source":"component","required":false,"typeRef":359},{"name":"value","source":"component","required":true,"typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Table","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","left","right"],"typeRef":22},{"name":"attributes","required":false,"source":"component","typeRef":389},{"name":"borderColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Color of table borders, key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"captionSide","required":false,"source":"component","literalValues":["bottom","top"],"description":"Side of the `Table.Caption`","typeRef":16},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":false,"source":"component","description":"Data used to generate table, ignored if `children` prop is set","typeRef":315},{"name":"highlightOnHover","required":false,"source":"component","literalValues":[false,true],"description":"If set, table rows background changes to `highlightOnHoverColor` when hovered","typeRef":341},{"name":"highlightOnHoverColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Background color of table rows when hovered, key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"horizontalSpacing","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Horizontal cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem","typeRef":183},{"name":"layout","required":false,"source":"component","literalValues":["-moz-initial","auto","fixed","inherit","initial","revert","revert-layer","unset"],"description":"Value of `table-layout` style","typeRef":1},{"name":"stickyHeader","required":false,"source":"component","literalValues":[false,true],"description":"If set, `Table.Thead` is sticky","typeRef":341},{"name":"stickyHeaderOffset","required":false,"source":"component","description":"Offset from top at which `Table.Thead` should become sticky","typeRef":365},{"name":"striped","required":false,"source":"component","literalValues":["even",false,"odd",true],"description":"If set, every odd/even row background changes to `stripedColor`, if set to `true`, then `odd` value will be used","typeRef":345},{"name":"stripedColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Background color of striped rows, key of `theme.colors` or any valid CSS color","typeRef":162},{"name":"tabularNums","required":false,"source":"component","literalValues":[false,true],"description":"If set, `font-variant-numeric: tabular-nums` style is applied","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129},{"name":"verticalSpacing","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Vertical cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem","typeRef":183},{"name":"withColumnBorders","required":false,"source":"component","literalValues":[false,true],"description":"If set, the table has borders between columns","typeRef":341},{"name":"withRowBorders","required":false,"source":"component","literalValues":[false,true],"description":"If set, the table has borders between rows","typeRef":341},{"name":"withTableBorder","required":false,"source":"component","literalValues":[false,true],"description":"If set, the table has the outer border","typeRef":341}],"blockedProps":[],"subcomponents":["Table.Caption","Table.DataRenderer","Table.ScrollContainer","Table.Tbody","Table.Td","Table.Tfoot","Table.Th","Table.Thead","Table.Tr"],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.Caption","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.DataRenderer","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"data","required":true,"source":"component","typeRef":315}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.ScrollContainer","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"attributes","required":false,"source":"component","typeRef":472},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"maxHeight","required":false,"source":"component","description":"`max-height` of the `Table` at which it should become scrollable","typeRef":250},{"name":"minWidth","required":false,"source":"component","description":"`min-width` of the `Table` at which it should become scrollable","typeRef":251},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props passed down to `ScrollArea` component, not applicable with `type=\"native\"`","typeRef":274},{"name":"type","required":false,"source":"component","literalValues":["native","scrollarea"],"description":"Type of the scroll container, `native` to use native scrollbars, `scrollarea` to use `ScrollArea` component","typeRef":53},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.Tbody","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.Td","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","char","justify","left","right"],"typeRef":23},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.Tfoot","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.Th","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","char","justify","left","right"],"typeRef":23},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.Thead","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Table.Tr","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableCaption","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-caption/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableOfContents","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/table-of-contents/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Observes headings and scrolling outside the widget root"},{"name":"TableScrollContainer","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-scroll-container/","props":[{"name":"attributes","required":false,"source":"component","typeRef":472},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"maxHeight","required":false,"source":"component","description":"`max-height` of the `Table` at which it should become scrollable","typeRef":250},{"name":"minWidth","required":false,"source":"component","description":"`min-width` of the `Table` at which it should become scrollable","typeRef":251},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props passed down to `ScrollArea` component, not applicable with `type=\"native\"`","typeRef":274},{"name":"type","required":false,"source":"component","literalValues":["native","scrollarea"],"description":"Type of the scroll container, `native` to use native scrollbars, `scrollarea` to use `ScrollArea` component","typeRef":53},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableTbody","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-tbody/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableTd","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-td/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","char","justify","left","right"],"typeRef":23},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableTfoot","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-tfoot/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableTh","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-th/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","char","justify","left","right"],"typeRef":23},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableThead","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-thead/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TableTr","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/table-tr/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","vertical"],"typeRef":129}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TablerIcon","package":"@homarr/widgets","category":"content","safety":"wrapped","description":"Resolves an installed Tabler icon by its safe name.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"color","source":"component","required":false,"typeRef":359},{"name":"name","source":"component","required":true,"typeRef":359},{"name":"size","source":"component","required":false,"typeRef":365},{"name":"stroke","source":"component","required":false,"typeRef":365}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Tabs","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tabs/","props":[{"name":"activateTabWithKeyboard","required":false,"source":"component","literalValues":[false,true],"description":"If set, tab is activated with arrow key press","typeRef":341},{"name":"allowTabDeactivation","required":false,"source":"component","literalValues":[false,true],"description":"If set, tab can be deactivated","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":466},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `pills` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants","typeRef":162},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":352},{"name":"inverted","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether tabs should have inverted styles","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active","typeRef":341},{"name":"keepMountedMode","required":false,"source":"component","literalValues":["activity","display-none"],"description":"Controls how inactive tabs content is hidden when `keepMounted` is `true`, `'activity'` – hidden with `Activity` component, `'display-none'` – hidden with `display: none` styles","typeRef":7},{"name":"loop","required":false,"source":"component","literalValues":[false,true],"description":"If set, arrow key presses loop though items (first to last and last to first)","typeRef":341},{"name":"orientation","required":false,"source":"component","literalValues":["horizontal","vertical"],"description":"Tabs orientation","typeRef":36},{"name":"placement","required":false,"source":"component","literalValues":["left","right"],"description":"`Tabs.List` placement relative to `Tabs.Panel`, applicable only when `orientation=\"vertical\"`","typeRef":47},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":352},{"name":"variant","required":false,"source":"component","literalValues":["default","outline","pills"],"typeRef":130}],"blockedProps":[],"subcomponents":["Tabs.List","Tabs.Panel","Tabs.Tab"],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Tabs.List","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tabs/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"grow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether tabs should take all available space","typeRef":341},{"name":"justify","required":false,"source":"component","literalValues":["-moz-initial","center","end","flex-end","flex-start","inherit","initial","left","normal","revert","revert-layer","right","space-around","space-between","space-evenly","start","stretch","unset"],"description":"Tabs alignment","typeRef":248},{"name":"styles","required":false,"source":"component","typeRef":221},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Tabs.Panel","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tabs/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":223},{"name":"value","required":true,"source":"component","description":"Value of associated control","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Tabs.Tab","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tabs/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls tab color based on `variant`","typeRef":162},{"name":"leftSection","required":false,"source":"component","description":"Content displayed on the left side of the label","typeRef":263},{"name":"rightSection","required":false,"source":"component","description":"Content displayed on the right side of the label","typeRef":263},{"name":"size","required":false,"source":"component","description":"Size passed from parent component, sets `data-size` if value is not number like","typeRef":365},{"name":"styles","required":false,"source":"component","typeRef":236},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":true,"source":"component","description":"Value of associated panel","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TabsContainer","package":"@homarr/widgets","category":"interaction","safety":"allowed","description":"Renders a declarative tab container.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"defaultTab","source":"component","required":false,"typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"TabsList","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tabs-list/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"grow","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether tabs should take all available space","typeRef":341},{"name":"justify","required":false,"source":"component","literalValues":["-moz-initial","center","end","flex-end","flex-start","inherit","initial","left","normal","revert","revert-layer","right","space-around","space-between","space-evenly","start","stretch","unset"],"description":"Tabs alignment","typeRef":248},{"name":"styles","required":false,"source":"component","typeRef":221},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TabsPanel","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tabs-panel/","props":[{"name":"color","required":false,"source":"component","typeRef":359},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component","typeRef":341},{"name":"styles","required":false,"source":"component","typeRef":223},{"name":"value","required":true,"source":"component","description":"Value of associated control","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TabsTab","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tabs-tab/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls tab color based on `variant`","typeRef":162},{"name":"leftSection","required":false,"source":"component","description":"Content displayed on the left side of the label","typeRef":263},{"name":"rightSection","required":false,"source":"component","description":"Content displayed on the right side of the label","typeRef":263},{"name":"size","required":false,"source":"component","description":"Size passed from parent component, sets `data-size` if value is not number like","typeRef":365},{"name":"styles","required":false,"source":"component","typeRef":236},{"name":"type","required":false,"source":"component","literalValues":["button","reset","submit"],"typeRef":20},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":true,"source":"component","description":"Value of associated panel","typeRef":359},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TagsInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tags-input/","props":[{"name":"acceptValueOnBlur","required":false,"source":"component","literalValues":[false,true],"description":"If set, the value typed in by the user but not submitted is accepted when the input is blurred","typeRef":341},{"name":"allowDuplicates","required":false,"source":"component","literalValues":[false,true],"description":"If set, duplicate tags are allowed","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":406},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":172},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"If set, the clear button is displayed in the right section when the component has value","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"comboboxProps","required":false,"source":"component","description":"Props passed down to `Combobox` component","typeRef":153},{"name":"data","required":false,"source":"component","description":"Data displayed in the dropdown. Values must be unique.","typeRef":152},{"name":"defaultDropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled dropdown initial opened state","typeRef":341},{"name":"defaultSearchValue","required":false,"source":"component","description":"Default search value","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":368},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"dropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled dropdown opened state","typeRef":341},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"floatingHeight","required":false,"source":"component","literalValues":["viewport"],"description":"If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware.","typeRef":78},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":195},{"name":"hiddenInputValuesDivider","required":false,"source":"component","description":"Divider used to separate values in the hidden input `value` attribute","typeRef":359},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"limit","required":false,"source":"component","description":"Maximum number of options displayed at a time, `Infinity` by default","typeRef":353},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxDropdownHeight","required":false,"source":"component","description":"`max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default","typeRef":365},{"name":"maxTags","required":false,"source":"component","description":"Maximum number of tags","typeRef":353},{"name":"openOnFocus","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown opens when the input receives focus","typeRef":341},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props passed down to the underlying `ScrollArea` component in the dropdown","typeRef":274},{"name":"searchValue","required":false,"source":"component","description":"Controlled search value","typeRef":359},{"name":"selectFirstOptionOnChange","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when value changes, `false` by default","typeRef":341},{"name":"selectFirstOptionOnDropdownOpen","required":false,"source":"component","literalValues":[false,true],"description":"If set, the first option is selected when dropdown opens, `false` by default","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"splitChars","required":false,"source":"component","description":"Characters that should trigger tags split, `[',']` by default","typeRef":368},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":368},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withPillsReorder","required":false,"source":"component","literalValues":[false,true],"description":"If set, tags can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set.","typeRef":341},{"name":"withScrollArea","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string[]","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Text","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/text/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"gradient","required":false,"source":"component","description":"Gradient configuration, ignored when `variant` is not `gradient`","typeRef":179},{"name":"inherit","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether font properties should be inherited from the parent","typeRef":341},{"name":"inline","required":false,"source":"component","literalValues":[false,true],"description":"Sets `line-height` to 1 for centering","typeRef":341},{"name":"lineClamp","required":false,"source":"component","description":"Number of lines after which Text will be truncated","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls `font-size` and `line-height`","typeRef":82},{"name":"span","required":false,"source":"component","literalValues":[false,true],"description":"Shorthand for `component=\"span\"`","typeRef":341},{"name":"textWrap","required":false,"source":"component","literalValues":["balance","nowrap","pretty","stable","wrap"],"description":"Controls `text-wrap` CSS property","typeRef":79},{"name":"truncate","required":false,"source":"component","literalValues":["end",false,"start",true],"description":"Side on which Text must be truncated, if `true`, text is truncated from the start","typeRef":344},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["gradient","text"],"typeRef":131}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TextInput","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/text-input/","props":[{"name":"attributes","required":false,"source":"component","typeRef":416},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Textarea","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/textarea/","props":[{"name":"attributes","required":false,"source":"component","typeRef":416},{"name":"autoComplete","required":false,"source":"component","typeRef":359},{"name":"autosize","required":false,"source":"component","literalValues":[false,true],"description":"If set, enables textarea height growing with its content","typeRef":341},{"name":"bottomSection","required":false,"source":"component","description":"Content rendered at the bottom of the input, inside the border","typeRef":263},{"name":"bottomSectionProps","required":false,"source":"component","description":"Props passed down to the `bottomSection` element","typeRef":259},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxRows","required":false,"source":"component","description":"Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set","typeRef":353},{"name":"minRows","required":false,"source":"component","description":"Minimum rows of autosize textarea, ignored if `autosize` prop is not set","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"resize","required":false,"source":"component","literalValues":["-moz-initial","block","both","horizontal","inherit","initial","inline","none","revert","revert-layer","unset","vertical"],"description":"Controls `resize` CSS property","typeRef":3},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"ThemeIcon","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/theme-icon/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color.","typeRef":162},{"name":"gradient","required":false,"source":"component","description":"Gradient data used when `variant=\"gradient\"`","typeRef":179},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls width and height of the button. Numbers are converted to rem.","typeRef":355},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","gradient","light","outline","transparent","white"],"typeRef":132}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TimeGrid","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/time-grid/","props":[{"name":"allowDeselect","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the value can be deselected when the current active option is clicked or activated with keyboard","typeRef":341},{"name":"amPmLabels","required":false,"source":"component","description":"Labels used for am/pm values","typeRef":316},{"name":"attributes","required":false,"source":"component","typeRef":457},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Time data in 24h format to be displayed in the grid, for example `['10:00', '18:30', '22:00']`. Time values must be unique.","typeRef":368},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":352},{"name":"format","required":false,"source":"component","literalValues":["12h","24h"],"description":"Time format displayed in the grid","typeRef":6},{"name":"maxTime","required":false,"source":"component","description":"All controls after this time are disabled","typeRef":359},{"name":"minTime","required":false,"source":"component","description":"All controls before this time are disabled","typeRef":359},{"name":"simpleGridProps","required":false,"source":"component","description":"Props passed down to the underlying `SimpleGrid` component","typeRef":275},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Control `font-size` of controls, key of `theme.fontSizes` or any valid CSS value","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":352},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withSeconds","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the seconds part should be displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"TimeInput","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/time-input/","props":[{"name":"attributes","required":false,"source":"component","typeRef":416},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxTime","required":false,"source":"component","description":"Maximum possible string time, if `withSeconds` is true, time should be in format HH:mm:ss, otherwise HH:mm","typeRef":359},{"name":"minTime","required":false,"source":"component","description":"Minimum possible string time, if `withSeconds` is true, time should be in format HH:mm:ss, otherwise HH:mm","typeRef":359},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSeconds","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether seconds input should be displayed","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"TimePicker","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/time-picker/","props":[{"name":"amPmInputLabel","required":false,"source":"component","description":"`aria-label` of am/pm input","typeRef":359},{"name":"amPmLabels","required":false,"source":"component","description":"Labels used for am/pm values","typeRef":316},{"name":"amPmSelectProps","required":false,"source":"component","description":"Props passed down to am/pm select","typeRef":105},{"name":"attributes","required":false,"source":"component","typeRef":410},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to clear button","typeRef":92},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the clear button should be displayed","typeRef":341},{"name":"closeDropdownOnPresetSelect","required":false,"source":"component","literalValues":[false,true],"description":"If set, the dropdown is closed when a value is selected from the presets list","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Uncontrolled component default value","typeRef":359},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"format","required":false,"source":"component","literalValues":["12h","24h"],"description":"Time format, `'24h'` by default","typeRef":6},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props passed down to the hidden input","typeRef":104},{"name":"hoursInputLabel","required":false,"source":"component","description":"`aria-label` of hours input","typeRef":359},{"name":"hoursInputProps","required":false,"source":"component","description":"Props passed down to hours input","typeRef":104},{"name":"hoursPlaceholder","required":false,"source":"component","description":"Hours input placeholder,","typeRef":359},{"name":"hoursStep","required":false,"source":"component","description":"Number by which hours are incremented/decremented","typeRef":353},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"max","required":false,"source":"component","description":"Max possible time value in `hh:mm:ss` format","typeRef":359},{"name":"maxDropdownContentHeight","required":false,"source":"component","description":"Maximum height of the content displayed in the dropdown in px","typeRef":353},{"name":"min","required":false,"source":"component","description":"Min possible time value in `hh:mm:ss` format","typeRef":359},{"name":"minHoursDigits","required":false,"source":"component","description":"Minimum number of digits displayed in the hours input, applicable only when `type=\"duration\"` is set","typeRef":353},{"name":"minutesInputLabel","required":false,"source":"component","description":"`aria-label` of minutes input","typeRef":359},{"name":"minutesInputProps","required":false,"source":"component","description":"Props passed down to minutes input","typeRef":104},{"name":"minutesPlaceholder","required":false,"source":"component","description":"Minutes input placeholder,","typeRef":359},{"name":"minutesStep","required":false,"source":"component","description":"Number by which minutes are incremented/decremented","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"popoverProps","required":false,"source":"component","description":"Props passed down to `Popover` component","typeRef":242},{"name":"presets","required":false,"source":"component","description":"Time presets to display in the dropdown","typeRef":317},{"name":"reverseTimeControlsList","required":false,"source":"component","literalValues":[false,true],"description":"If set, the time controls list are reversed,","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props passed down to all underlying `ScrollArea` components","typeRef":274},{"name":"secondsInputLabel","required":false,"source":"component","description":"`aria-label` of seconds input","typeRef":359},{"name":"secondsInputProps","required":false,"source":"component","description":"Props passed down to seconds input","typeRef":104},{"name":"secondsPlaceholder","required":false,"source":"component","description":"Seconds input placeholder,","typeRef":359},{"name":"secondsStep","required":false,"source":"component","description":"Number by which seconds are incremented/decremented","typeRef":353},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["duration","time"],"description":"TimePicker type, `'time'` for regular time input, `'duration'` for duration input that allows values greater than 24 hours","typeRef":75},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled component value","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withDropdown","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the dropdown with time controls list should be visible when the input has focus","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSeconds","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the seconds input should be displayed","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"TimeValue","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/time-value/","props":[{"name":"amPmLabels","required":false,"source":"component","description":"AM/PM labels","typeRef":316},{"name":"format","required":false,"source":"component","literalValues":["12h","24h"],"description":"Time format","typeRef":6},{"name":"value","required":true,"source":"component","description":"Time to format","typeRef":362},{"name":"withSeconds","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether seconds should be displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"Timeline","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/timeline/","props":[{"name":"active","required":false,"source":"component","description":"Index of the active element","typeRef":353},{"name":"align","required":false,"source":"component","literalValues":["left","right"],"description":"Position of content relative to the bullet","typeRef":47},{"name":"attributes","required":false,"source":"component","typeRef":463},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"bulletSize","required":false,"source":"component","description":"Size of the bullet","typeRef":365},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to control active item colors","typeRef":162},{"name":"lineWidth","required":false,"source":"component","description":"Control width of the line","typeRef":365},{"name":"reverseActive","required":false,"source":"component","literalValues":[false,true],"description":"If set, the active items direction is reversed without reversing items order","typeRef":341},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":["Timeline.Item"],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Timeline.Item","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/timeline/","props":[{"name":"bullet","required":false,"source":"component","description":"React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed.","typeRef":263},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to control active item colors","typeRef":162},{"name":"lineVariant","required":false,"source":"component","literalValues":["dashed","dotted","solid"],"description":"Controls line border style","typeRef":26},{"name":"styles","required":false,"source":"component","typeRef":237},{"name":"title","required":false,"source":"component","description":"Item title, displayed next to the bullet","typeRef":263},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"TimelineItem","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/timeline-item/","props":[{"name":"bullet","required":false,"source":"component","description":"React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed.","typeRef":263},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color to control active item colors","typeRef":162},{"name":"lineVariant","required":false,"source":"component","literalValues":["dashed","dotted","solid"],"description":"Controls line border style","typeRef":26},{"name":"styles","required":false,"source":"component","typeRef":237},{"name":"title","required":false,"source":"component","description":"Item title, displayed next to the bullet","typeRef":263},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"Title","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/title/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"lineClamp","required":false,"source":"component","description":"Number of lines after which heading will be truncated","typeRef":353},{"name":"order","required":false,"source":"component","literalValues":[1,2,3,4,5,6],"description":"Heading order (1-6), controls `font-size` style if `size` prop is not set","typeRef":137},{"name":"size","required":false,"source":"component","description":"Changes title size, if not set, then size is controlled by `order` prop","typeRef":318},{"name":"textWrap","required":false,"source":"component","literalValues":["balance","nowrap","pretty","stable","wrap"],"description":"Heading `text-wrap` CSS property","typeRef":79},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"ToggleSwitch","package":"@homarr/widgets","category":"network","safety":"wrapped","description":"Runs named actions for the enabled and disabled states.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"color","source":"component","required":false,"typeRef":359},{"name":"disabled","source":"component","required":false,"typeRef":338},{"name":"disabledParams","source":"component","required":false,"typeRef":270},{"name":"enabledParams","source":"component","required":false,"typeRef":270},{"name":"errorMessage","source":"component","required":false,"typeRef":359},{"name":"initialValue","source":"component","required":false,"typeRef":338},{"name":"label","source":"component","required":false,"typeRef":359},{"name":"requestId","source":"component","required":false,"description":"Identifier of the named Custom Widget action.","typeRef":359},{"name":"size","source":"component","required":false,"typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Action labels must describe their effect; destructive actions require confirmation."]},{"name":"Tooltip","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tooltip/","props":[{"name":"arrowOffset","required":false,"source":"component","description":"Arrow offset in px","typeRef":353},{"name":"arrowPosition","required":false,"source":"component","literalValues":["center","merge","side"],"description":"Arrow position relative to the tooltip","typeRef":24},{"name":"arrowRadius","required":false,"source":"component","description":"Arrow `border-radius` in px","typeRef":353},{"name":"arrowSize","required":false,"source":"component","description":"Arrow size in px","typeRef":353},{"name":"attributes","required":false,"source":"component","typeRef":475},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"If set, adjusts text color based on background color for `filled` variant","typeRef":341},{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms","typeRef":353},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls tooltip background, by default set based on current color scheme","typeRef":162},{"name":"defaultOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled tooltip initial opened state","typeRef":341},{"name":"events","required":false,"source":"component","description":"Determines which events will be used to show tooltip","typeRef":402},{"name":"floatingStrategy","required":false,"source":"component","literalValues":["absolute","fixed"],"description":"Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy)","typeRef":34},{"name":"inline","required":false,"source":"component","literalValues":[false,true],"description":"Must be set if the tooltip target is an inline element","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead","typeRef":341},{"name":"label","required":false,"source":"component","description":"Tooltip content","typeRef":263},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling, `{ flip: true, shift: true, inline: false }` by default","typeRef":319},{"name":"multiline","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether content should be wrapped on to the next line, `false` by default","typeRef":341},{"name":"offset","required":false,"source":"component","description":"Space between target element and tooltip in px","typeRef":354},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms","typeRef":353},{"name":"opened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled opened state","typeRef":341},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Tooltip position relative to target element (`Tooltip` component) or mouse (`Tooltip.Floating` component)","typeRef":48},{"name":"transitionProps","required":false,"source":"component","description":"Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type","typeRef":208},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withArrow","required":false,"source":"component","literalValues":[false,true],"description":"If set, the tooltip has an arrow","typeRef":341}],"blockedProps":[{"name":"target","reason":"String targets can select elements outside the widget root"}],"subcomponents":["Tooltip.Floating","Tooltip.Group"],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Tooltip.Floating","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tooltip/","props":[{"name":"attributes","required":false,"source":"component","typeRef":475},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls tooltip background, by default set based on current color scheme","typeRef":162},{"name":"defaultOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled tooltip initial opened state","typeRef":341},{"name":"label","required":false,"source":"component","description":"Tooltip content","typeRef":263},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling, `{ flip: true, shift: true, inline: false }` by default","typeRef":319},{"name":"multiline","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether content should be wrapped on to the next line, `false` by default","typeRef":341},{"name":"offset","required":false,"source":"component","description":"Offset from mouse in px","typeRef":353},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Tooltip position relative to target element (`Tooltip` component) or mouse (`Tooltip.Floating` component)","typeRef":48},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Tooltip.Group","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tooltip/","props":[{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms","typeRef":353},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TooltipFloating","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tooltip-floating/","props":[{"name":"attributes","required":false,"source":"component","typeRef":475},{"name":"color","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Key of `theme.colors` or any valid CSS color, controls tooltip background, by default set based on current color scheme","typeRef":162},{"name":"defaultOpened","required":false,"source":"component","literalValues":[false,true],"description":"Uncontrolled tooltip initial opened state","typeRef":341},{"name":"label","required":false,"source":"component","description":"Tooltip content","typeRef":263},{"name":"middlewares","required":false,"source":"component","description":"Floating ui middlewares to configure position handling, `{ flip: true, shift: true, inline: false }` by default","typeRef":319},{"name":"multiline","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether content should be wrapped on to the next line, `false` by default","typeRef":341},{"name":"offset","required":false,"source":"component","description":"Offset from mouse in px","typeRef":353},{"name":"position","required":false,"source":"component","literalValues":["bottom","bottom-end","bottom-start","left","left-end","left-start","right","right-end","right-start","top","top-end","top-start"],"description":"Tooltip position relative to target element (`Tooltip` component) or mouse (`Tooltip.Floating` component)","typeRef":48},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TooltipGroup","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tooltip-group/","props":[{"name":"closeDelay","required":false,"source":"component","description":"Close delay in ms","typeRef":353},{"name":"openDelay","required":false,"source":"component","description":"Open delay in ms","typeRef":353}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Transition","package":"@mantine/core","category":"blocked","safety":"denied","documentationUrl":"https://mantine.dev/core/transition/","props":[],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":[],"deniedReason":"Requires an authored render callback"},{"name":"Tree","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tree/","props":[{"name":"allowRangeSelection","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree nodes range can be selected with click when `Shift` key is pressed","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":427},{"name":"checkOnSpace","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node is checked on space key press","typeRef":341},{"name":"clearSelectionOnOutsideClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, selection is cleared when user clicks outside of the tree","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data used to render nodes","typeRef":321},{"name":"expandOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node with children is expanded on click","typeRef":341},{"name":"expandOnSpace","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node with children is expanded on space key press","typeRef":341},{"name":"keepMounted","required":false,"source":"component","literalValues":[false,true],"description":"If set, subtree content is kept mounted when collapsed. React 19 `Activity` is used to preserve state.","typeRef":341},{"name":"levelOffset","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Horizontal padding of each subtree level, key of `theme.spacing` or any valid CSS value","typeRef":183},{"name":"selectOnClick","required":false,"source":"component","literalValues":[false,true],"description":"If set, tree node is selected on click","typeRef":341},{"name":"tree","required":false,"source":"component","description":"Use-tree hook instance that can be used to manipulate component state","typeRef":327},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withDragHandle","required":false,"source":"component","literalValues":[false,true],"description":"If set, drag-and-drop must be initiated from an element that spreads `dragHandleProps` from the `renderNode` payload, rather than anywhere on the node.","typeRef":341},{"name":"withLines","required":false,"source":"component","literalValues":[false,true],"description":"If set, connecting lines are rendered showing parent-child relationships","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TreeSelect","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tree-select/","props":[{"name":"allowDeselect","required":false,"source":"component","literalValues":[false,true],"description":"Allows deselecting in single mode","typeRef":341},{"name":"attributes","required":false,"source":"component","typeRef":406},{"name":"checkStrictly","required":false,"source":"component","literalValues":[false,true],"description":"Disables parent-child cascade in checkbox mode","typeRef":341},{"name":"checkedStrategy","required":false,"source":"component","literalValues":["all","child","parent"],"description":"Controls which checked nodes appear in value/pills in checkbox mode","typeRef":8},{"name":"chevronAriaLabels","required":false,"source":"component","description":"aria-label values for the expand/collapse chevron button","typeRef":322},{"name":"chevronColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls the default chevron color","typeRef":162},{"name":"clearButtonProps","required":false,"source":"component","description":"Props for the clear button","typeRef":172},{"name":"clearSearchOnChange","required":false,"source":"component","literalValues":[false,true],"description":"Clear search on selection change","typeRef":341},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"Shows clear button","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"comboboxProps","required":false,"source":"component","description":"Props passed to the underlying Combobox","typeRef":266},{"name":"data","required":true,"source":"component","description":"Tree data","typeRef":321},{"name":"defaultDropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Default dropdown state","typeRef":341},{"name":"defaultExpandAll","required":false,"source":"component","literalValues":[false,true],"description":"Expand all nodes by default","typeRef":341},{"name":"defaultExpandedValues","required":false,"source":"component","description":"Default expanded node values","typeRef":368},{"name":"defaultSearchValue","required":false,"source":"component","description":"Default search value","typeRef":359},{"name":"defaultValue","required":false,"source":"component","description":"Default value","typeRef":323},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"dropdownOpened","required":false,"source":"component","literalValues":[false,true],"description":"Controlled dropdown state","typeRef":341},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"expandOnClick","required":false,"source":"component","literalValues":[false,true],"description":"Also toggle expand when clicking a parent node (not just the chevron). In `single` and `multiple` modes, parent clicks only expand; only leaves can be selected. In `checkbox` mode, parent clicks both check and expand.","typeRef":341},{"name":"expandedValues","required":false,"source":"component","description":"Controlled expanded state","typeRef":368},{"name":"hiddenInputProps","required":false,"source":"component","description":"Props for the hidden input","typeRef":195},{"name":"hiddenInputValuesDivider","required":false,"source":"component","description":"Divider for hidden input values","typeRef":359},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"maxDisplayedValues","required":false,"source":"component","description":"Maximum displayed pills before \"+N more\"","typeRef":353},{"name":"maxDropdownHeight","required":false,"source":"component","description":"Max dropdown height","typeRef":365},{"name":"maxValues","required":false,"source":"component","description":"Maximum selectable values (multiple/checkbox mode)","typeRef":353},{"name":"mode","required":false,"source":"component","description":"Selection mode: 'single', 'multiple', or 'checkbox' (with cascade)","typeRef":184},{"name":"nothingFoundMessage","required":false,"source":"component","description":"Message when no nodes match search","typeRef":263},{"name":"openOnFocus","required":false,"source":"component","literalValues":[false,true],"description":"Opens dropdown on focus (searchable mode)","typeRef":341},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"scrollAreaProps","required":false,"source":"component","description":"Props for the ScrollArea in the dropdown","typeRef":274},{"name":"searchValue","required":false,"source":"component","description":"Controlled search value","typeRef":359},{"name":"searchable","required":false,"source":"component","literalValues":[false,true],"description":"Enables search filtering","typeRef":341},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls input `height`, horizontal `padding`, and `font-size`","typeRef":182},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["button","checkbox","color","date","datetime-local","email","file","hidden","image","month","number","password","radio","range","reset","search","submit","tel","text","time","url","week"],"typeRef":171},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Controlled value","typeRef":323},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withLines","required":false,"source":"component","literalValues":[false,true],"description":"Show tree connection lines between parent and child nodes","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"TreeSelectOption","package":"@mantine/core","category":"navigation","safety":"wrapped","documentationUrl":"https://mantine.dev/core/tree-select-option/","props":[{"name":"checked","required":true,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"chevronAriaLabels","required":false,"source":"component","typeRef":322},{"name":"expanded","required":true,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"hasChildren","required":true,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"indeterminate","required":true,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"isLastChild","required":true,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"level","required":true,"source":"component","typeRef":353},{"name":"lineGuides","required":true,"source":"component","typeRef":339},{"name":"node","required":true,"source":"component","typeRef":320},{"name":"selected","required":true,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"showCheckbox","required":true,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"withLines","required":true,"source":"component","literalValues":[false,true],"typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide an accessible label for controls without visible text."]},{"name":"Treemap","package":"@mantine/charts","category":"charts","safety":"wrapped","documentationUrl":"https://mantine.dev/charts/treemap/","props":[{"name":"aspectRatio","required":false,"source":"component","description":"The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given","typeRef":353},{"name":"attributes","required":false,"source":"component","typeRef":470},{"name":"autoContrast","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether text color should be adjusted based on background color to improve contrast","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"data","required":true,"source":"component","description":"Data used to render chart","typeRef":324},{"name":"dataKey","required":false,"source":"component","description":"Key in data object for the value","typeRef":359},{"name":"height","required":false,"source":"component","description":"Controls chart height","typeRef":353},{"name":"strokeColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls color of the node stroke, by default depends on color scheme","typeRef":162},{"name":"strokeWidth","required":false,"source":"component","description":"Controls width of node stroke","typeRef":353},{"name":"textColor","required":false,"source":"component","literalValues":["blue","cyan","dark","grape","gray","green","indigo","lime","orange","pink","red","teal","violet","yellow"],"description":"Controls text color of labels","typeRef":162},{"name":"tooltipAnimationDuration","required":false,"source":"component","description":"Tooltip animation duration in ms","typeRef":353},{"name":"tooltipProps","required":false,"source":"component","description":"Props passed down to `Tooltip` recharts component","typeRef":197},{"name":"treemapProps","required":false,"source":"component","description":"Props passed down to recharts `Treemap` component","typeRef":206},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withTooltip","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the tooltip should be displayed when a node is hovered","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a nearby text summary of the chart data."]},{"name":"TypeBadge","package":"@homarr/widgets","category":"interaction","safety":"allowed","description":"Displays a compact semantic type badge.","documentationUrl":"https://homarr.dev/docs/management/custom-widgets/","props":[{"name":"size","source":"component","required":false,"literalValues":["xs","sm","md","lg","xl"],"typeRef":87},{"name":"type","source":"component","required":true,"typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"Typography","package":"@mantine/core","category":"layout","safety":"wrapped","documentationUrl":"https://mantine.dev/core/typography/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Keep visual order consistent with reading order."]},{"name":"UnstyledButton","package":"@mantine/core","category":"interaction","safety":"wrapped","documentationUrl":"https://mantine.dev/core/unstyled-button/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"size","required":false,"source":"component","description":"Size passed from parent component, sets `data-size` if value is not number like","typeRef":365},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide a visible label or aria-label."]},{"name":"VisuallyHidden","package":"@mantine/core","category":"content","safety":"wrapped","documentationUrl":"https://mantine.dev/core/visually-hidden/","props":[{"name":"attributes","required":false,"source":"component","typeRef":471},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Provide meaningful text alternatives for non-text content."]},{"name":"WeekdaysRow","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/weekdays-row/","props":[{"name":"attributes","required":false,"source":"component","typeRef":478},{"name":"cellComponent","required":false,"source":"component","literalValues":["td","th"],"description":"Sets cell type that is used for weekdays","typeRef":72},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"firstDayOfWeek","required":false,"source":"component","literalValues":[0,1,2,3,4,5,6],"description":"Number 0-6, 0 – Sunday, 6 – Saturday","typeRef":134},{"name":"locale","required":false,"source":"component","description":"dayjs locale","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Controls size","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withWeekNumbers","required":false,"source":"component","literalValues":[false,true],"description":"If set, heading for week numbers is displayed","typeRef":341}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"YearLevel","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/year-level/","props":[{"name":"attributes","required":false,"source":"component","typeRef":383},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"hasNextLevel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next level button should be enabled","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"levelControlAriaLabel","required":false,"source":"component","description":"`aria-label` for change level control","typeRef":359},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"styles","required":false,"source":"component","typeRef":238},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withNext","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next control should be rendered","typeRef":341},{"name":"withPrevious","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether previous control should be rendered","typeRef":341},{"name":"year","required":true,"source":"component","description":"Displayed year value in `YYYY-MM-DD` format","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"YearLevelGroup","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/year-level-group/","props":[{"name":"attributes","required":false,"source":"component","typeRef":385},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the calendar should take the full width of its container","typeRef":341},{"name":"hasNextLevel","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether next level button should be enabled","typeRef":341},{"name":"headerControlsOrder","required":false,"source":"component","description":"Controls order","typeRef":89},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"monthsListFormat","required":false,"source":"component","description":"`dayjs` format for months list","typeRef":359},{"name":"nextDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables next control","typeRef":341},{"name":"nextIcon","required":false,"source":"component","description":"Change next icon","typeRef":263},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"previousDisabled","required":false,"source":"component","literalValues":[false,true],"description":"Disables previous control","typeRef":341},{"name":"previousIcon","required":false,"source":"component","description":"Change previous icon","typeRef":263},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"styles","required":false,"source":"component","typeRef":238},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"year","required":true,"source":"component","description":"Displayed year","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"YearPicker","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/year-picker/","props":[{"name":"allowDeselect","required":false,"source":"component","description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\"","typeRef":106},{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":387},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":159},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":332},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"type","required":false,"source":"component","literalValues":["default","multiple","range"],"description":"Picker type: range, multiple or default","typeRef":158},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value for controlled component","typeRef":159},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"YearPickerInput","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/year-picker-input/","props":[{"name":"allowDeselect","required":false,"source":"component","description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\"","typeRef":106},{"name":"allowSingleDateInRange","required":false,"source":"component","description":"Determines whether a single day can be selected as range, applicable only when type=\"range\"","typeRef":107},{"name":"ariaLabels","required":false,"source":"component","description":"`aria-label` attributes for controls on different levels","typeRef":147},{"name":"attributes","required":false,"source":"component","typeRef":411},{"name":"clearButtonProps","required":false,"source":"component","description":"Props passed down to the clear button","typeRef":258},{"name":"clearSectionMode","required":false,"source":"component","literalValues":["both","clear","rightSection"],"description":"Determines how the clear button and rightSection are rendered","typeRef":15},{"name":"clearable","required":false,"source":"component","literalValues":[false,true],"description":"If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set.","typeRef":341},{"name":"closeOnChange","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the dropdown is closed when date is selected, not applicable with `type=\"multiple\"`","typeRef":341},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"columnsToScroll","required":false,"source":"component","description":"Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly","typeRef":353},{"name":"date","required":false,"source":"component","description":"Displayed date in controlled mode","typeRef":362},{"name":"defaultDate","required":false,"source":"component","description":"Initial displayed date in uncontrolled mode","typeRef":362},{"name":"defaultValue","required":false,"source":"component","description":"Default value for uncontrolled component","typeRef":159},{"name":"description","required":false,"source":"component","description":"Contents of `Input.Description` component. If not set, description is not displayed.","typeRef":263},{"name":"descriptionProps","required":false,"source":"component","description":"Props passed down to the `Input.Description` component","typeRef":95},{"name":"error","required":false,"source":"component","description":"Contents of `Input.Error` component. If not set, error is not displayed.","typeRef":263},{"name":"errorProps","required":false,"source":"component","description":"Props passed down to the `Input.Error` component","typeRef":96},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"inputSize","required":false,"source":"component","description":"HTML `size` attribute for the input element (number of visible characters)","typeRef":359},{"name":"inputWrapperOrder","required":false,"source":"component","description":"Controls order and visibility of wrapper elements. Only elements included in this array will be rendered.","typeRef":88},{"name":"label","required":false,"source":"component","description":"Contents of `Input.Label` component. If not set, label is not displayed.","typeRef":263},{"name":"labelProps","required":false,"source":"component","description":"Props passed down to the `Input.Label` component","typeRef":97},{"name":"labelSeparator","required":false,"source":"component","description":"Separator between range value","typeRef":359},{"name":"leftSection","required":false,"source":"component","description":"Content section displayed on the left side of the input","typeRef":263},{"name":"leftSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"leftSectionProps","required":false,"source":"component","description":"Props passed down to the `leftSection` element","typeRef":259},{"name":"leftSectionWidth","required":false,"source":"component","description":"Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height","typeRef":254},{"name":"loading","required":false,"source":"component","literalValues":[false,true],"description":"Displays loading indicator in the left or right section","typeRef":341},{"name":"loadingPosition","required":false,"source":"component","literalValues":["left","right"],"description":"Position of the loading indicator","typeRef":47},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"nextLabel","required":false,"source":"component","description":"Next button `aria-label`","typeRef":359},{"name":"numberOfColumns","required":false,"source":"component","description":"Number of columns displayed next to each other","typeRef":353},{"name":"pointer","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker).","typeRef":341},{"name":"popoverProps","required":false,"source":"component","description":"Props passed down to `Popover` component","typeRef":204},{"name":"presets","required":false,"source":"component","description":"Predefined values to pick from","typeRef":332},{"name":"previousLabel","required":false,"source":"component","description":"Previous button `aria-label`","typeRef":359},{"name":"rightSection","required":false,"source":"component","description":"Content section displayed on the right side of the input","typeRef":263},{"name":"rightSectionPointerEvents","required":false,"source":"component","literalValues":["-moz-initial","all","auto","fill","inherit","initial","none","painted","revert","revert-layer","stroke","unset","visible","visibleFill","visiblePainted","visibleStroke"],"description":"Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links).","typeRef":2},{"name":"rightSectionProps","required":false,"source":"component","description":"Props passed down to the `rightSection` element","typeRef":259},{"name":"rightSectionWidth","required":false,"source":"component","description":"Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height","typeRef":254},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"sortDates","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether dates values should be sorted before `onChange` call, only applicable with type=\"multiple\"","typeRef":341},{"name":"success","required":false,"source":"component","description":"Contents of `Input.Success` component. If not set, success is not displayed.","typeRef":263},{"name":"successProps","required":false,"source":"component","description":"Props passed down to the `Input.Success` component","typeRef":98},{"name":"type","required":false,"source":"component","literalValues":["default","multiple","range"],"description":"Picker type: range, multiple or default","typeRef":158},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"value","required":false,"source":"component","description":"Value for controlled component","typeRef":159},{"name":"valueFormat","required":false,"source":"component","description":"`dayjs` format to display input value","typeRef":359},{"name":"variant","required":false,"source":"component","literalValues":["default","filled","unstyled"],"typeRef":124},{"name":"withAsterisk","required":false,"source":"component","literalValues":[false,true],"description":"If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input.","typeRef":341},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"withErrorStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have red border and red text color when the `error` prop is set","typeRef":341},{"name":"withSuccessStyles","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the input should have green border when the `success` prop is set","typeRef":341},{"name":"wrapperProps","required":false,"source":"component","description":"Props passed down to the root element","typeRef":331},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[{"name":"dropdownType","reason":"Modal picker mode escapes the widget overlay boundary"},{"name":"modalProps","reason":"Modal picker configuration escapes the widget overlay boundary"}],"subcomponents":[],"bind":{"type":"string","initialProp":"defaultValue"},"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]},{"name":"YearsList","package":"@mantine/dates","category":"dates","safety":"wrapped","documentationUrl":"https://mantine.dev/dates/years-list/","props":[{"name":"align","required":false,"source":"component","literalValues":["center","left","right"],"typeRef":22},{"name":"attributes","required":false,"source":"component","typeRef":482},{"name":"color","required":false,"source":"component","typeRef":359},{"name":"decade","required":true,"source":"component","description":"Decade value to display","typeRef":359},{"name":"fullWidth","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether the list should take the full width of its container","typeRef":341},{"name":"locale","required":false,"source":"component","description":"Dayjs locale, defaults to value defined in DatesProvider","typeRef":359},{"name":"maxDate","required":false,"source":"component","description":"Maximum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"minDate","required":false,"source":"component","description":"Minimum possible date in `YYYY-MM-DD` format or Date object","typeRef":362},{"name":"size","required":false,"source":"component","literalValues":["lg","md","sm","xl","xs"],"description":"Component size","typeRef":81},{"name":"unstyled","required":false,"source":"component","literalValues":[false,true],"typeRef":341},{"name":"variant","required":false,"source":"component","typeRef":359},{"name":"withCellSpacing","required":false,"source":"component","literalValues":[false,true],"description":"Determines whether controls should be separated","typeRef":341},{"name":"yearsListFormat","required":false,"source":"component","description":"dayjs format for years list","typeRef":359}],"blockedProps":[],"subcomponents":[],"accessibilityRequirements":["Include a textual date when the visual calendar carries meaning."]}]}
diff --git a/packages/custom-widgets/src/core/component-catalog.ts b/packages/custom-widgets/src/core/component-catalog.ts
new file mode 100644
index 000000000..9d8b6eda2
--- /dev/null
+++ b/packages/custom-widgets/src/core/component-catalog.ts
@@ -0,0 +1,53 @@
+import catalog from "./component-catalog.generated.json";
+import type { CustomJsxAuthoringCatalog, CustomJsxPropDescriptor } from "./component-catalog-types";
+
+export type * from "./component-catalog-types";
+
+export const customJsxAuthoringCatalog = catalog as unknown as Readonly<CustomJsxAuthoringCatalog>;
+export const customJsxCatalogComponentByName = new Map(
+  customJsxAuthoringCatalog.components.map((component) => [component.name, component]),
+);
+export const customJsxCatalogGlobalPropByName = new Map(
+  customJsxAuthoringCatalog.globalProps.map((prop) => [prop.name, prop]),
+);
+
+export interface ResolvedCustomJsxPropDescriptor extends Omit<CustomJsxPropDescriptor, "typeRef"> {
+  type: string;
+}
+
+export function getCustomJsxPropType(
+  prop: Pick<CustomJsxPropDescriptor, "typeRef">,
+  catalogValue: Readonly<CustomJsxAuthoringCatalog> = customJsxAuthoringCatalog,
+): string {
+  return catalogValue.types[prop.typeRef] ?? "unknown";
+}
+
+export function resolveCustomJsxPropDescriptor(
+  prop: CustomJsxPropDescriptor,
+  catalogValue: Readonly<CustomJsxAuthoringCatalog> = customJsxAuthoringCatalog,
+): ResolvedCustomJsxPropDescriptor {
+  const { typeRef, ...metadata } = prop;
+  return { ...metadata, type: catalogValue.types[typeRef] ?? "unknown" };
+}
+
+export function getCustomJsxComponentProps(name: string): ResolvedCustomJsxPropDescriptor[] {
+  const component = customJsxCatalogComponentByName.get(name);
+  if (!component || component.safety === "denied") return [];
+  const blockedProps = new Set(component.blockedProps.map(({ name: propName }) => propName));
+  const props = new Map(
+    customJsxAuthoringCatalog.globalProps
+      .filter((prop) => !blockedProps.has(prop.name))
+      .map((prop) => [prop.name, resolveCustomJsxPropDescriptor(prop)]),
+  );
+  for (const prop of component.props) props.set(prop.name, resolveCustomJsxPropDescriptor(prop));
+  if (component.bind) {
+    props.set("bind", {
+      name: "bind",
+      type: "string",
+      required: false,
+      source: "component",
+      description: `Temporary in-memory ${component.bind.type} input binding initialized by ${component.bind.initialProp}.`,
+    });
+  }
+  return [...props.values()];
+}
diff --git a/packages/custom-widgets/src/core/component-descriptor.ts b/packages/custom-widgets/src/core/component-descriptor.ts
new file mode 100644
index 000000000..461e0f41f
--- /dev/null
+++ b/packages/custom-widgets/src/core/component-descriptor.ts
@@ -0,0 +1,53 @@
+import type {
+  CustomJsxComponentCategory,
+  CustomJsxComponentPackage,
+  CustomJsxComponentSafety,
+} from "./component-types";
+export type * from "./component-types";
+
+export interface CustomJsxComponentDescriptor {
+  name: string;
+  package: CustomJsxComponentPackage;
+  safety: CustomJsxComponentSafety;
+  supportedProps: readonly string[];
+  blockedProps: readonly { name: string; reason: string }[];
+  reason?: string;
+}
+
+export const subcomponentsByName: Readonly<Record<string, readonly string[]>> = {
+  Accordion: ["Accordion.Item", "Accordion.Control", "Accordion.Panel"],
+  Avatar: ["Avatar.Group"],
+  Card: ["Card.Section"],
+  Chip: ["Chip.Group"],
+  DataList: ["DataList.Item", "DataList.ItemLabel", "DataList.ItemValue"],
+  EmptyState: ["EmptyState.Indicator", "EmptyState.Title", "EmptyState.Description", "EmptyState.Actions"],
+  Grid: ["Grid.Col"],
+  List: ["List.Item"],
+  Menu: ["Menu.Target", "Menu.Dropdown", "Menu.Item", "Menu.Label", "Menu.Divider"],
+  Progress: ["Progress.Section"],
+  Table: ["Table.Thead", "Table.Tbody", "Table.Tfoot", "Table.Caption", "Table.Tr", "Table.Th", "Table.Td"],
+  Tabs: ["Tabs.List", "Tabs.Tab", "Tabs.Panel"],
+  Timeline: ["Timeline.Item"],
+};
+
+export const accessibilityByCategory: Record<CustomJsxComponentCategory, readonly string[]> = {
+  layout: ["Keep visual order consistent with reading order."],
+  content: ["Provide meaningful text alternatives for non-text content."],
+  feedback: ["Do not rely on color alone to communicate status."],
+  navigation: ["Provide an accessible label for controls without visible text."],
+  charts: ["Include a nearby text summary of the chart data."],
+  dates: ["Include a textual date when the visual calendar carries meaning."],
+  interaction: ["Provide a visible label or aria-label."],
+  network: ["Action labels must describe their effect; destructive actions require confirmation."],
+  blocked: [],
+};
+
+export function documentationUrl(packageName: CustomJsxComponentPackage, name: string): string {
+  if (packageName === "@homarr/widgets") return "https://homarr.dev/docs/management/custom-widgets/";
+  const section = packageName === "@mantine/core" ? "core" : packageName === "@mantine/charts" ? "charts" : "dates";
+  const slug = (name.split(".")[0] ?? "")
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2")
+    .toLowerCase();
+  return `https://mantine.dev/${section}/${slug}/`;
+}
diff --git a/packages/custom-widgets/src/core/component-discovery.ts b/packages/custom-widgets/src/core/component-discovery.ts
new file mode 100644
index 000000000..5180f834f
--- /dev/null
+++ b/packages/custom-widgets/src/core/component-discovery.ts
@@ -0,0 +1,92 @@
+import * as Charts from "@mantine/charts";
+import * as Core from "@mantine/core";
+import * as Dates from "@mantine/dates";
+
+import { subcomponentsByName } from "./component-descriptor";
+import type { CustomJsxComponentCategory, CustomJsxComponentPackage } from "./component-types";
+
+type Namespace = Readonly<Record<string, unknown>>;
+
+const packageDefinitions: ReadonlyArray<{
+  package: CustomJsxComponentPackage;
+  namespace: Namespace;
+}> = [
+  { package: "@mantine/core", namespace: Core as Namespace },
+  { package: "@mantine/dates", namespace: Dates as Namespace },
+  { package: "@mantine/charts", namespace: Charts as Namespace },
+];
+
+function looksLikePublicComponent(name: string, value: unknown) {
+  if (!/^[A-Z][A-Za-z0-9]*$/u.test(name) || !/[a-z]/u.test(name)) return false;
+  if (typeof value === "function") return true;
+  if (value === null || typeof value !== "object") return false;
+  const reactType = (value as { $$typeof?: unknown }).$$typeof;
+  return reactType === Symbol.for("react.forward_ref") || reactType === Symbol.for("react.memo");
+}
+
+function inferCoreCategory(name: string): CustomJsxComponentCategory {
+  if (
+    /^(?:Alert|Loader|LoadingOverlay|Notification|Overlay|Progress|RingProgress|SemiCircleProgress|Skeleton)/u.test(
+      name,
+    )
+  ) {
+    return "feedback";
+  }
+  if (
+    /^(?:Accordion|Anchor|Breadcrumbs|Collapse|HoverCard|Menu|NavLink|Popover|Spoiler|Stepper|Tabs|Tooltip|Transition|Tree)/u.test(
+      name,
+    )
+  ) {
+    return "navigation";
+  }
+  if (
+    /(?:Button|Checkbox|Chip|Input|Pagination|Picker|Radio|Rating|Select|Slider|Switch)$/u.test(name) ||
+    /^(?:ActionIcon|Autocomplete|Burger|CloseButton|CopyButton|MultiSelect|NumberInput|PasswordInput|PinInput|SegmentedControl|TagsInput|TextInput|Textarea)/u.test(
+      name,
+    )
+  ) {
+    return "interaction";
+  }
+  if (
+    /^(?:AspectRatio|Box|Card|Center|Container|Divider|Fieldset|Flex|FloatingIndicator|Grid|Group|Paper|ScrollArea|SimpleGrid|Space|Splitter|Stack|Typography)/u.test(
+      name,
+    )
+  ) {
+    return "layout";
+  }
+  return "content";
+}
+
+export interface DiscoveredMantineComponent {
+  name: string;
+  package: CustomJsxComponentPackage;
+  category: CustomJsxComponentCategory;
+}
+
+export const discoveredSubcomponentsByName: Readonly<Record<string, readonly string[]>> = {};
+
+export const discoveredMantineComponents: readonly DiscoveredMantineComponent[] = packageDefinitions.flatMap(
+  ({ package: packageName, namespace }) =>
+    Object.entries(namespace).flatMap(([name, value]) => {
+      if (!looksLikePublicComponent(name, value)) return [];
+      const category =
+        packageName === "@mantine/charts"
+          ? "charts"
+          : packageName === "@mantine/dates"
+            ? "dates"
+            : inferCoreCategory(name);
+      const reflectedSubcomponents =
+        value && (typeof value === "object" || typeof value === "function")
+          ? Object.entries(value).flatMap(([property, child]) =>
+              looksLikePublicComponent(property, child) ? [`${name}.${property}`] : [],
+            )
+          : [];
+      const subcomponents = [...new Set([...(subcomponentsByName[name] ?? []), ...reflectedSubcomponents])];
+      (discoveredSubcomponentsByName as Record<string, readonly string[]>)[name] = subcomponents;
+      return [name, ...subcomponents].map((componentName) => ({
+        name: componentName,
+        package: packageName,
+        category,
+      }));
+    }),
+);
diff --git a/packages/custom-widgets/src/core/component-example.ts b/packages/custom-widgets/src/core/component-example.ts
new file mode 100644
index 000000000..baad87045
--- /dev/null
+++ b/packages/custom-widgets/src/core/component-example.ts
@@ -0,0 +1,46 @@
+import type {
+  CustomJsxAuthoringCatalog,
+  CustomJsxCatalogBindingType,
+  CustomJsxComponentApi,
+  CustomJsxPropDescriptor,
+} from "./component-catalog-types";
+
+export function buildCustomJsxComponentUsageExample(
+  component: CustomJsxComponentApi,
+  catalog: Pick<CustomJsxAuthoringCatalog, "types">,
+) {
+  const props = component.props
+    .filter((prop) => prop.required)
+    .slice(0, 4)
+    .map((prop) => `${prop.name}=${examplePropValue(prop, catalog.types[prop.typeRef] ?? "unknown")}`);
+  if (component.bind) {
+    props.unshift(
+      `bind="value"`,
+      `${component.bind.initialProp}=${bindingInitialValue(component.bind.type, component.bind.initialProp)}`,
+    );
+  }
+  const propText = props.length > 0 ? ` ${props.join(" ")}` : "";
+  return `<${component.name}${propText} />`;
+}
+
+function bindingInitialValue(type: CustomJsxCatalogBindingType, initialProp: "defaultValue" | "defaultChecked") {
+  if (initialProp === "defaultChecked") return "{false}";
+  if (type === "string") return '""';
+  if (type === "number") return "{0}";
+  if (type === "boolean") return "{false}";
+  return "{[]}";
+}
+
+function examplePropValue(prop: CustomJsxPropDescriptor, type: string) {
+  const literal = prop.literalValues?.[0];
+  if (literal !== undefined) return `{${formatLiteral(literal)}}`;
+  if (type.includes("string")) return `"${prop.name}"`;
+  if (type.includes("boolean")) return "{true}";
+  if (type.includes("number")) return "{0}";
+  if (type.includes("[]") || type.includes("Array<")) return "{[]}";
+  return `{options.${prop.name}}`;
+}
+
+function formatLiteral(value: string | number | boolean | null) {
+  return typeof value === "string" ? JSON.stringify(value) : String(value);
+}
diff --git a/packages/custom-widgets/src/core/component-props.ts b/packages/custom-widgets/src/core/component-props.ts
new file mode 100644
index 000000000..e29a50ffd
--- /dev/null
+++ b/packages/custom-widgets/src/core/component-props.ts
@@ -0,0 +1,54 @@
+export const commonSafeProps = [
+  "key",
+  "id",
+  "style",
+  "styles",
+  "title",
+  "role",
+  "aria-label",
+  "aria-describedby",
+  "aria-hidden",
+  "tabIndex",
+  "w",
+  "h",
+  "miw",
+  "maw",
+  "mih",
+  "mah",
+  "m",
+  "mx",
+  "my",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "bg",
+  "c",
+  "opacity",
+  "display",
+  "hiddenFrom",
+  "visibleFrom",
+  "bd",
+  "bdrs",
+  "flex",
+  "fz",
+  "fw",
+  "lh",
+  "lts",
+  "ta",
+  "td",
+  "tt",
+  "radius",
+  "shadow",
+  "variant",
+  "color",
+  "size",
+  "withBorder",
+] as const;
diff --git a/packages/custom-widgets/src/core/component-registry.ts b/packages/custom-widgets/src/core/component-registry.ts
new file mode 100644
index 000000000..3147569b6
--- /dev/null
+++ b/packages/custom-widgets/src/core/component-registry.ts
@@ -0,0 +1,78 @@
+import { customJsxAuthoringCatalog } from "./component-catalog";
+import type { CustomJsxCatalogBindingType } from "./component-catalog-types";
+import type { CustomJsxComponentDescriptor } from "./component-descriptor";
+
+const globalPropNames = customJsxAuthoringCatalog.globalProps.map(({ name }) => name);
+
+export const customJsxComponentRegistry: readonly CustomJsxComponentDescriptor[] =
+  customJsxAuthoringCatalog.components.map((component) => ({
+    name: component.name,
+    package: component.package,
+    safety: component.safety,
+    supportedProps:
+      component.safety === "denied"
+        ? []
+        : [
+            ...new Set([
+              ...globalPropNames.filter(
+                (propName) => !component.blockedProps.some((blockedProp) => blockedProp.name === propName),
+              ),
+              ...component.props.map(({ name }) => name),
+              ...(component.bind ? ["bind"] : []),
+            ]),
+          ],
+    blockedProps: component.blockedProps,
+    ...(component.deniedReason ? { reason: component.deniedReason } : {}),
+  }));
+
+export const enabledCustomJsxComponents = customJsxComponentRegistry.filter(
+  (component) => component.safety !== "denied",
+);
+export const customJsxComponentByName = new Map(customJsxComponentRegistry.map((entry) => [entry.name, entry]));
+export const customJsxSupportedPropsByName = new Map(
+  customJsxComponentRegistry.map((entry) => [entry.name, new Set(entry.supportedProps)]),
+);
+
+export function resolveCustomJsxComponentName(name: string): string {
+  if (name === "Icon") return "TablerIcon";
+  if (customJsxComponentByName.has(name)) return name;
+  const flat = name.replaceAll(".", "");
+  return customJsxComponentByName.has(flat) ? flat : name;
+}
+
+const catalogComponentsByName = new Map(
+  customJsxAuthoringCatalog.components.map((component) => [component.name, component]),
+);
+
+const multipleDateBindingComponents = new Set([
+  "DatePicker",
+  "DatePickerInput",
+  "MonthPicker",
+  "MonthPickerInput",
+  "YearPicker",
+  "YearPickerInput",
+]);
+const rangeDateBindingComponents = new Set(["DateTimePicker", "InlineDateTimePicker"]);
+
+export const customJsxBindableComponentNames: ReadonlySet<string> = new Set(
+  customJsxAuthoringCatalog.components.flatMap((component) => (component.bind ? [component.name] : [])),
+);
+
+export type CustomJsxBindingType = CustomJsxCatalogBindingType;
+
+export function getCustomJsxBindingType(
+  componentName: string,
+  props: Readonly<Record<string, unknown>> = {},
+): CustomJsxBindingType | null {
+  componentName = resolveCustomJsxComponentName(componentName);
+  const type = catalogComponentsByName.get(componentName)?.bind?.type;
+  if (!type) return null;
+  if (multipleDateBindingComponents.has(componentName) && ["multiple", "range"].includes(String(props.type))) {
+    return "string[]";
+  }
+  if (rangeDateBindingComponents.has(componentName) && props.type === "range") return "string[]";
+  if (componentName === "Accordion" && props.multiple === true) return "string[]";
+  if (componentName === "TreeSelect" && ["multiple", "checkbox"].includes(String(props.mode))) return "string[]";
+  if (["Chip.Group", "ChipGroup"].includes(componentName) && props.multiple === true) return "string[]";
+  return type;
+}
diff --git a/packages/custom-widgets/src/core/component-types.ts b/packages/custom-widgets/src/core/component-types.ts
new file mode 100644
index 000000000..e504f2984
--- /dev/null
+++ b/packages/custom-widgets/src/core/component-types.ts
@@ -0,0 +1,12 @@
+export type CustomJsxComponentPackage = "@mantine/core" | "@mantine/charts" | "@mantine/dates" | "@homarr/widgets";
+export type CustomJsxComponentSafety = "allowed" | "wrapped" | "denied";
+export type CustomJsxComponentCategory =
+  | "layout"
+  | "content"
+  | "feedback"
+  | "navigation"
+  | "charts"
+  | "dates"
+  | "interaction"
+  | "network"
+  | "blocked";
diff --git a/packages/custom-widgets/src/core/custom-jsx-schema.ts b/packages/custom-widgets/src/core/custom-jsx-schema.ts
new file mode 100644
index 000000000..cf6f833e8
--- /dev/null
+++ b/packages/custom-widgets/src/core/custom-jsx-schema.ts
@@ -0,0 +1,206 @@
+import { z } from "zod/v4";
+
+import { validateCustomJsxTemplate } from "../jsx/analyzer";
+import { CUSTOM_JSX_BINDING_IDENTIFIER_PATTERN } from "../jsx/policy";
+import { validateCredentialFreeExport, validatePrototypeKeys } from "./definition-security";
+import { customWidgetOptionsSchema } from "./options-schema";
+import {
+  collectCustomWidgetRequestReferences,
+  customWidgetIdentifierSchema,
+  customWidgetRequestsSchema,
+  customWidgetSourcesSchema,
+} from "./request-schema";
+import type { CustomJsxRequest } from "./request-schema";
+import { customWidgetSecretKinds } from "./schema-types";
+import { getCustomWidgetHttpUrlIssue } from "./url-policy";
+
+export * from "./options-schema";
+export * from "./request-schema";
+export const CUSTOM_WIDGET_SCHEMA = "homarr-custom-widget-v2";
+
+export const customWidgetBindingIdentifierSchema = z
+  .string()
+  .min(1)
+  .max(64)
+  .regex(
+    CUSTOM_JSX_BINDING_IDENTIFIER_PATTERN,
+    "Binding names must start with a letter and contain letters, numbers, - or _",
+  );
+
+export const customJsxTemplateSchema = z
+  .string()
+  .min(1)
+  .max(50_000)
+  .superRefine((template, ctx) => {
+    for (const diagnostic of validateCustomJsxTemplate(template)) {
+      if (diagnostic.severity === "error") {
+        ctx.addIssue({
+          code: "custom",
+          message: `${diagnostic.message} (line ${diagnostic.line}, column ${diagnostic.column})`,
+        });
+      }
+    }
+  });
+
+export const customWidgetSecretInputSchema = z.strictObject({
+  sourceId: customWidgetIdentifierSchema,
+  kind: z.enum(customWidgetSecretKinds),
+  value: z.string().min(1).max(8_192),
+});
+
+export const customWidgetSecretsInputSchema = z
+  .array(customWidgetSecretInputSchema)
+  .max(24)
+  .superRefine((secrets, ctx) => {
+    const identities = new Set<string>();
+    secrets.forEach((secret, index) => {
+      const identity = `${secret.sourceId}:${secret.kind}`;
+      if (identities.has(identity))
+        ctx.addIssue({ code: "custom", path: [index], message: "A widget secret can only be supplied once" });
+      identities.add(identity);
+    });
+  });
+
+export const customWidgetDefinitionSchema = z
+  .strictObject({
+    $schema: z.literal(CUSTOM_WIDGET_SCHEMA),
+    name: z.string().trim().min(1).max(128),
+    description: z.string().max(512).optional(),
+    iconUrl: z
+      .string()
+      .refine(
+        (value) => getCustomWidgetHttpUrlIssue(value) === null,
+        "Widget icons must use an unambiguous HTTP or HTTPS URL without embedded credentials",
+      )
+      .url()
+      .max(2048)
+      .optional(),
+    sources: customWidgetSourcesSchema,
+    requests: customWidgetRequestsSchema,
+    options: customWidgetOptionsSchema,
+    template: customJsxTemplateSchema,
+  })
+  .superRefine((definition, ctx) => {
+    validateRequests(definition, ctx);
+    validateCaseInsensitiveSourceIds(definition.sources, ctx);
+    validateTemplateRequests(definition.template, definition.requests, ctx);
+    validateCredentialFreeExport(definition, ctx);
+    validatePrototypeKeys(definition, ctx);
+  });
+
+type Definition = z.infer<typeof customWidgetDefinitionSchema>;
+
+function validateRequests(definition: Definition, ctx: z.RefinementCtx) {
+  for (const [requestId, request] of Object.entries(definition.requests)) {
+    if (!definition.sources[request.source]) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["requests", requestId, "source"],
+        message: `Unknown source '${request.source}'`,
+      });
+    }
+    const references = collectCustomWidgetRequestReferences(request);
+    for (const optionName of references.options) {
+      if (!definition.options[optionName]) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["requests", requestId],
+          message: `Unknown widget option '${optionName}'`,
+        });
+      }
+    }
+    if (request.trigger === "load" && references.params.size > 0) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["requests", requestId],
+        message: `Load requests cannot use invocation parameters: ${[...references.params].join(", ")}`,
+      });
+    }
+    request.invalidates?.forEach((target, index) => {
+      if (definition.requests[target]?.kind !== "query") {
+        ctx.addIssue({
+          code: "custom",
+          path: ["requests", requestId, "invalidates", index],
+          message: `Invalidation target '${target}' must be a query`,
+        });
+      }
+    });
+  }
+  for (const [optionName, option] of Object.entries(definition.options)) {
+    const requestId = option.choicesFrom?.request;
+    if (requestId && definition.requests[requestId]?.kind !== "query") {
+      ctx.addIssue({
+        code: "custom",
+        path: ["options", optionName, "choicesFrom", "request"],
+        message: `Dynamic choices require a query named '${requestId}'`,
+      });
+    }
+    if (requestId) {
+      const request = definition.requests[requestId];
+      const references = request ? collectCustomWidgetRequestReferences(request) : null;
+      if (request && (request.trigger !== "load" || (references?.params.size ?? 0) > 0)) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["options", optionName, "choicesFrom", "request"],
+          message: "Dynamic choices require a load query without invocation parameters",
+        });
+      }
+    }
+  }
+}
+
+function validateCaseInsensitiveSourceIds(sources: Definition["sources"], ctx: z.RefinementCtx) {
+  const seen = new Map<string, string>();
+  for (const sourceId of Object.keys(sources)) {
+    const normalized = sourceId.toLowerCase();
+    const existing = seen.get(normalized);
+    if (existing) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["sources", sourceId],
+        message: `Source ID '${sourceId}' conflicts case-insensitively with '${existing}'`,
+      });
+    } else {
+      seen.set(normalized, sourceId);
+    }
+  }
+}
+
+function validateTemplateRequests(template: string, requests: Record<string, CustomJsxRequest>, ctx: z.RefinementCtx) {
+  for (const match of template.matchAll(/<(SubFetch|ActionButton|ToggleSwitch)\b([^>]*)>/gu)) {
+    const component = match[1] as "SubFetch" | "ActionButton" | "ToggleSwitch";
+    const attributes = match[2] ?? "";
+    const idMatch = attributes.match(/\brequestId\s*=\s*(?:"([^"]+)"|'([^']+)')/u);
+    const requestId = idMatch?.[1] ?? idMatch?.[2];
+    if (!requestId) {
+      ctx.addIssue({ code: "custom", path: ["template"], message: `${component} must use a literal requestId` });
+      continue;
+    }
+    const request = requests[requestId];
+    const expectedKind = component === "SubFetch" ? "query" : "action";
+    if (!request)
+      ctx.addIssue({
+        code: "custom",
+        path: ["template"],
+        message: `${component} references unknown request '${requestId}'`,
+      });
+    else if (request.kind !== expectedKind)
+      ctx.addIssue({ code: "custom", path: ["template"], message: `${component} requires a ${expectedKind} request` });
+    else if (component === "SubFetch" && request.trigger !== "manual")
+      ctx.addIssue({ code: "custom", path: ["template"], message: `SubFetch requires '${requestId}' to be manual` });
+  }
+}
+
+export type HomarrCustomWidgetV2 = z.infer<typeof customWidgetDefinitionSchema>;
+export type HomarrCustomWidgetV2Input = z.input<typeof customWidgetDefinitionSchema>;
+export const customWidgetCreateSchema = customWidgetDefinitionSchema.safeExtend({
+  secrets: customWidgetSecretsInputSchema.default([]),
+});
+export const customWidgetUpdateSchema = z
+  .strictObject(customWidgetDefinitionSchema.shape)
+  .partial()
+  .extend({ id: z.string().min(1), secrets: customWidgetSecretsInputSchema.optional() });
+export const customWidgetImportSchema = customWidgetDefinitionSchema;
+export type CustomWidgetCreateInput = z.infer<typeof customWidgetCreateSchema>;
+export type CustomWidgetUpdateInput = z.infer<typeof customWidgetUpdateSchema>;
+export type CustomWidgetImport = z.infer<typeof customWidgetImportSchema>;
diff --git a/packages/custom-widgets/src/core/definition-schemas.ts b/packages/custom-widgets/src/core/definition-schemas.ts
new file mode 100644
index 000000000..2cd6f17a3
--- /dev/null
+++ b/packages/custom-widgets/src/core/definition-schemas.ts
@@ -0,0 +1,13 @@
+export {
+  customWidgetCreateSchema,
+  customWidgetDefinitionSchema,
+  customWidgetImportSchema,
+  customWidgetUpdateSchema,
+} from "./custom-jsx-schema";
+export type {
+  CustomWidgetCreateInput,
+  CustomWidgetImport,
+  CustomWidgetUpdateInput,
+  HomarrCustomWidgetV2,
+  HomarrCustomWidgetV2Input,
+} from "./custom-jsx-schema";
diff --git a/packages/custom-widgets/src/core/definition-security.ts b/packages/custom-widgets/src/core/definition-security.ts
new file mode 100644
index 000000000..c5c215fcd
--- /dev/null
+++ b/packages/custom-widgets/src/core/definition-security.ts
@@ -0,0 +1,220 @@
+import type { z } from "zod/v4";
+
+type DefinitionPath = Array<string | number>;
+
+const harmlessCredentialSettings = new Set([
+  "anonymous",
+  "authentication",
+  "basic",
+  "bearer",
+  "configured",
+  "default",
+  "disabled",
+  "enabled",
+  "example",
+  "false",
+  "inherit",
+  "missing",
+  "none",
+  "optional",
+  "placeholder",
+  "public",
+  "redacted",
+  "required",
+  "separate",
+  "separately",
+  "source",
+  "true",
+  "unset",
+]);
+
+const commonCredentialLiteralPattern =
+  /\b(?:sk|pk|rk)-(?:[A-Za-z0-9][A-Za-z0-9._-]{7,})\b|\b(?:sk_(?:live|test)|github_pat|glpat|gh[pousr]|hf_|xox[baprs])-?[A-Za-z0-9._-]{8,}\b|\b(?:AKIA|ASIA)[A-Z0-9]{16}\b|\bAIza[0-9A-Za-z_-]{20,}\b|\beyJ[A-Za-z0-9_-]{8,}\.eyJ[A-Za-z0-9_-]{8,}\.[A-Za-z0-9_-]{8,}\b/giu;
+const authorizationSchemePattern = /\b(bearer|basic)([\s:_-]+)(["']?)([A-Za-z0-9._~+/%=-]{8,})/giu;
+const credentialAssignmentPattern =
+  /\b(authorization|auth(?:entication)?(?:[ _-]?(?:tokens?|keys?|credentials?))?|credentials?|api[ _-]?keys?|passwords?|passwds?|secrets?|tokens?|access[ _-]?(?:tokens?|keys?)|refresh[ _-]?tokens?|client[ _-]?secrets?|private[ _-]?keys?|signing[ _-]?keys?)((?:["']?\s*[:=]\s*["']?))([^\s,;"'}<>]+)/giu;
+
+export function validateCredentialFreeExport(definition: Record<string, unknown>, ctx: z.RefinementCtx) {
+  const { secrets: _secrets, ...exportedDefinition } = definition;
+  inspect(exportedDefinition, [], ctx);
+  inspectRequestPathQueries(definition.requests, ctx);
+  inspectUrlQuery(definition.iconUrl, ["iconUrl"], "Widget icon URLs", ctx);
+}
+
+function inspect(value: unknown, path: DefinitionPath, ctx: z.RefinementCtx): void {
+  if (Array.isArray(value)) return value.forEach((entry, index) => inspect(entry, [...path, index], ctx));
+  if (typeof value === "string") {
+    if (containsCustomWidgetCredentialLiteral(value)) {
+      ctx.addIssue({ code: "custom", path, message: "Credentials must use source authentication" });
+    }
+    return;
+  }
+  if (!value || typeof value !== "object") return;
+  for (const [key, child] of Object.entries(value)) {
+    const childPath = [...path, key];
+    const keyRisk = getCustomWidgetCredentialKeyRisk(key);
+    if (
+      keyRisk === "strong" &&
+      !isSchemaAuthenticationControl(childPath) &&
+      hasCredentialFieldValue(child) &&
+      !isHarmlessCustomWidgetCredentialSetting(child)
+    ) {
+      ctx.addIssue({ code: "custom", path: childPath, message: "Credentials must use source authentication" });
+      continue;
+    }
+    if (keyRisk === "ambiguous" && typeof child === "string" && containsCustomWidgetCredentialLiteral(child)) {
+      ctx.addIssue({ code: "custom", path: childPath, message: "Credentials must use source authentication" });
+      continue;
+    }
+    inspect(child, childPath, ctx);
+  }
+}
+
+function inspectRequestPathQueries(value: unknown, ctx: z.RefinementCtx): void {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return;
+  for (const [requestId, candidate] of Object.entries(value)) {
+    if (!candidate || typeof candidate !== "object" || Array.isArray(candidate)) continue;
+    const path = (candidate as Record<string, unknown>).path;
+    if (typeof path !== "string") continue;
+    const queryStart = path.indexOf("?");
+    if (queryStart < 0) continue;
+    const query = path.slice(queryStart + 1);
+    for (const [key, queryValue] of parseQueryEntries(query)) {
+      const keyRisk = getCustomWidgetCredentialKeyRisk(key);
+      if (
+        (keyRisk === "strong" && queryValue.length > 0 && !isHarmlessCustomWidgetCredentialSetting(queryValue)) ||
+        containsCustomWidgetCredentialLiteral(queryValue)
+      ) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["requests", requestId, "path"],
+          message: "Request query credentials must use source authentication",
+        });
+        break;
+      }
+    }
+  }
+}
+
+function inspectUrlQuery(value: unknown, path: DefinitionPath, label: string, ctx: z.RefinementCtx): void {
+  if (typeof value !== "string" || !URL.canParse(value)) return;
+  const url = new URL(value);
+  if (
+    parseQueryEntries(url.search).some(
+      ([key, queryValue]) =>
+        (getCustomWidgetCredentialKeyRisk(key) === "strong" && queryValue.length > 0) ||
+        containsCustomWidgetCredentialLiteral(queryValue),
+    )
+  ) {
+    ctx.addIssue({ code: "custom", path, message: `${label} cannot contain credentials` });
+  }
+}
+
+function parseQueryEntries(search: string): Array<[string, string]> {
+  const query = search.startsWith("?") ? search.slice(1) : search;
+  if (!query) return [];
+  return query.split("&").map((entry) => {
+    const separatorIndex = entry.indexOf("=");
+    const key = separatorIndex < 0 ? entry : entry.slice(0, separatorIndex);
+    const value = separatorIndex < 0 ? "" : entry.slice(separatorIndex + 1);
+    return [decodeQueryPart(key), decodeQueryPart(value)];
+  });
+}
+
+function decodeQueryPart(value: string): string {
+  try {
+    return decodeURIComponent(value.replaceAll("+", " "));
+  } catch {
+    return value;
+  }
+}
+
+export function getCustomWidgetCredentialKeyRisk(key: string): "strong" | "ambiguous" | null {
+  const normalized = key
+    .replace(/([a-z0-9])([A-Z])/gu, "$1 $2")
+    .replace(/[^A-Za-z0-9]+/gu, " ")
+    .trim()
+    .toLowerCase();
+  if (!normalized) return null;
+  const phrases = [
+    "authorization",
+    "authentication",
+    "auth",
+    "credential",
+    "credentials",
+    "api key",
+    "api keys",
+    "password",
+    "passwords",
+    "passwd",
+    "passwds",
+    "secret",
+    "secrets",
+    "token",
+    "tokens",
+    "access token",
+    "access tokens",
+    "access key",
+    "access keys",
+    "refresh token",
+    "refresh tokens",
+    "client secret",
+    "client secrets",
+    "private key",
+    "private keys",
+    "signing key",
+    "signing keys",
+  ];
+  if (phrases.some((phrase) => normalized === phrase || normalized.endsWith(` ${phrase}`))) return "strong";
+  return normalized === "key" || normalized.endsWith(" key") || normalized === "keys" || normalized.endsWith(" keys")
+    ? "ambiguous"
+    : null;
+}
+
+export function isHarmlessCustomWidgetCredentialSetting(value: unknown): boolean {
+  if (value === null || value === undefined || value === "" || typeof value === "boolean") return true;
+  return typeof value === "string" && harmlessCredentialSettings.has(value.trim().toLowerCase());
+}
+
+export function containsCustomWidgetCredentialLiteral(value: string): boolean {
+  return redactCustomWidgetCredentialLiterals(value) !== value;
+}
+
+export function redactCustomWidgetCredentialLiterals(value: string): string {
+  return value
+    .replace(commonCredentialLiteralPattern, "[REDACTED]")
+    .replace(authorizationSchemePattern, (match, scheme: string, separator: string, quote: string, candidate: string) =>
+      isHarmlessCustomWidgetCredentialSetting(candidate) ? match : `${scheme}${separator}${quote}[REDACTED]`,
+    )
+    .replace(credentialAssignmentPattern, (match, key: string, separator: string, candidate: string) =>
+      isHarmlessCustomWidgetCredentialSetting(candidate) ? match : `${key}${separator}[REDACTED]`,
+    );
+}
+
+function isSchemaAuthenticationControl(path: DefinitionPath): boolean {
+  return (
+    path.length === 3 &&
+    path[2] === "auth" &&
+    (path[0] === "sources" || path[0] === "requests") &&
+    typeof path[1] === "string"
+  );
+}
+
+function hasCredentialFieldValue(value: unknown): boolean {
+  if (value === null || value === undefined || value === "") return false;
+  return true;
+}
+
+export function validatePrototypeKeys(value: unknown, ctx: z.RefinementCtx) {
+  walk(value, [], ctx);
+}
+
+function walk(value: unknown, path: Array<string | number>, ctx: z.RefinementCtx): void {
+  if (Array.isArray(value)) return value.forEach((entry, index) => walk(entry, [...path, index], ctx));
+  if (!value || typeof value !== "object") return;
+  for (const [key, child] of Object.entries(value)) {
+    if (["__proto__", "prototype", "constructor"].includes(key))
+      ctx.addIssue({ code: "custom", path: [...path, key], message: "Unsafe object key" });
+    walk(child, [...path, key], ctx);
+  }
+}
diff --git a/packages/custom-widgets/src/core/examples.ts b/packages/custom-widgets/src/core/examples.ts
new file mode 100644
index 000000000..30d90a473
--- /dev/null
+++ b/packages/custom-widgets/src/core/examples.ts
@@ -0,0 +1,77 @@
+import type { HomarrCustomWidgetV2Input } from "./custom-jsx-schema";
+
+export interface CustomJsxExample {
+  id: string;
+  title: string;
+  description: string;
+  widget: HomarrCustomWidgetV2Input;
+}
+
+export const CUSTOM_JSX_STARTER = `<Stack gap="sm" p="sm">
+  <Group justify="space-between"><Text fw={700}>Service status</Text><RefreshButton /></Group>
+  {status.status?.loading ? <Skeleton height={72} radius="md" /> : status.status?.error ? <Alert color="red">{status.status.error}</Alert> : <Badge color={data.status?.online ? "green" : "red"}>{data.status?.online ? "Online" : "Offline"}</Badge>}
+</Stack>`;
+
+export const CUSTOM_WIDGET_STARTER: HomarrCustomWidgetV2Input = {
+  $schema: "homarr-custom-widget-v2",
+  name: "New custom widget",
+  description: "",
+  sources: { default: { name: "API", baseUrl: "https://example.com", networkScope: "public", auth: "none" } },
+  requests: { status: { path: "/api/status" } },
+  options: {},
+  template: CUSTOM_JSX_STARTER,
+};
+
+export const customJsxExamples: readonly CustomJsxExample[] = [
+  {
+    id: "service-dashboard",
+    title: "Service dashboard",
+    description: "A polished responsive dashboard with clear loading and error states.",
+    widget: {
+      $schema: "homarr-custom-widget-v2",
+      name: "Service dashboard",
+      sources: {
+        default: { name: "Service API", baseUrl: "https://example.com", networkScope: "public", auth: "none" },
+      },
+      requests: { overview: { path: "/api/overview", cacheSeconds: 30 } },
+      options: {},
+      template: `<Stack gap="md" p="md">
+  <Group justify="space-between"><Stack gap={2}><Text fw={700}>System overview</Text><Text size="xs" c="dimmed">Live service health</Text></Stack><RefreshButton /></Group>
+  {status.overview?.loading ? <Skeleton height={120} radius="lg" /> : status.overview?.error ? <Alert color="red" title="Could not load status">{status.overview.error}</Alert> : <SimpleGrid cols={{ base: 1, xs: 3 }}>{(data.overview?.services ?? []).map(service => <Paper key={service.name} withBorder p="sm" radius="md"><Group justify="space-between"><Text size="sm" fw={600}>{service.name}</Text><Badge color={service.online ? "green" : "red"} variant="light">{service.online ? "Online" : "Offline"}</Badge></Group><Text mt="xs" size="xl" fw={700}>{service.latency ?? "—"}<Text span size="xs" c="dimmed"> ms</Text></Text></Paper>)}</SimpleGrid>}
+</Stack>`,
+    },
+  },
+  {
+    id: "search-and-action",
+    title: "Search and action",
+    description: "A temporary search input, manual query, and explicit mutation.",
+    widget: {
+      $schema: "homarr-custom-widget-v2",
+      name: "Series search",
+      sources: {
+        default: {
+          name: "Media API",
+          baseUrl: "https://example.com",
+          networkScope: "private",
+          auth: { type: "apiKeyHeader", name: "X-Api-Key" },
+        },
+      },
+      requests: {
+        search: { path: "/api/series/search", trigger: "manual", query: { term: { $param: "query" } } },
+        monitor: {
+          kind: "action",
+          method: "POST",
+          path: "/api/series/{param:id}/monitor",
+          confirmation: "Monitor this series?",
+        },
+      },
+      options: {},
+      template: `<Stack gap="sm" p="md">
+  <TextInput bind="search" label="Search TV shows" placeholder="Start typing…" />
+  <SubFetch requestId="search" params={{ query: inputs.search }}>
+    {(results) => <Stack gap="xs">{(results ?? []).map(series => <Paper key={series.id} withBorder p="sm" radius="md"><Group justify="space-between" wrap="nowrap"><Stack gap={2}><Text fw={600}>{series.title}</Text><Text size="xs" c="dimmed">{series.year ?? "Unknown year"}</Text></Stack><ActionButton requestId="monitor" params={{ id: series.id }}>Monitor</ActionButton></Group></Paper>)}</Stack>}
+  </SubFetch>
+</Stack>`,
+    },
+  },
+];
diff --git a/packages/custom-widgets/src/core/import.ts b/packages/custom-widgets/src/core/import.ts
new file mode 100644
index 000000000..0de898264
--- /dev/null
+++ b/packages/custom-widgets/src/core/import.ts
@@ -0,0 +1,173 @@
+import type { HomarrCustomWidgetV2 } from "./custom-jsx-schema";
+import { customWidgetImportSchema } from "./custom-jsx-schema";
+
+export interface ImportReview {
+  name: string;
+  origins: string[];
+  authTypes: string[];
+  networkScopes: string[];
+  methods: string[];
+  permissions: string[];
+  hasActions: boolean;
+}
+
+export interface CustomWidgetImportIssue {
+  code: string;
+  path?: Array<string | number>;
+  message: string;
+}
+
+export type CustomWidgetParseResult =
+  | { success: true; widget: HomarrCustomWidgetV2; warnings: CustomWidgetImportIssue[] }
+  | { success: false; issues: CustomWidgetImportIssue[] };
+
+interface FencedBlock {
+  language: string;
+  content: string;
+}
+
+const MAX_IMPORT_ISSUES = 8;
+
+function extractFencedBlocks(text: string): FencedBlock[] {
+  const blocks: FencedBlock[] = [];
+  for (const match of text.matchAll(/```([^\n`]*)\n([\s\S]*?)```/gu)) {
+    blocks.push({ language: (match[1] ?? "").trim().toLowerCase(), content: match[2] ?? "" });
+  }
+  return blocks;
+}
+
+function jsonSyntaxIssue(error: unknown, source: string): CustomWidgetImportIssue {
+  const message = error instanceof Error ? error.message : "The response is not valid JSON";
+  const position = /position\s+(\d+)/iu.exec(message)?.[1];
+  if (!position) return { code: "INVALID_JSON", message };
+  const offset = Number(position);
+  const prefix = source.slice(0, offset);
+  const line = prefix.split("\n").length;
+  const column = offset - prefix.lastIndexOf("\n");
+  return { code: "INVALID_JSON", message: `${message} (line ${line}, column ${column})` };
+}
+
+function zodIssues(error: { issues: Array<{ path: PropertyKey[]; message: string; code: string }> }) {
+  return error.issues.slice(0, MAX_IMPORT_ISSUES).map((issue) => ({
+    code: issue.code === "unrecognized_keys" ? "UNSUPPORTED_FIELD" : "INVALID_WIDGET",
+    path: issue.path.map((part) => (typeof part === "symbol" ? String(part) : part)),
+    message: issue.message,
+  }));
+}
+
+function removedStateIssues(value: Record<string, unknown>): CustomWidgetImportIssue[] {
+  return ["stateSchema", "defaultState"].flatMap((field) =>
+    Object.hasOwn(value, field)
+      ? [
+          {
+            code: "REMOVED_LOCAL_STATE",
+            path: [field],
+            message: `${field} is not supported. Use bind with inputs for temporary values or widget options for saved configuration.`,
+          },
+        ]
+      : [],
+  );
+}
+
+type ParsedWidgetValue =
+  | { success: true; value: Record<string, unknown> }
+  | { success: false; issue: CustomWidgetImportIssue };
+
+function parseWidgetValue(source: string): ParsedWidgetValue {
+  try {
+    const parsed: unknown = JSON.parse(source);
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      return {
+        success: false,
+        issue: { code: "INVALID_WIDGET", message: "The response must contain one widget JSON object." },
+      };
+    }
+    return { success: true, value: parsed as Record<string, unknown> };
+  } catch (error) {
+    return { success: false, issue: jsonSyntaxIssue(error, source) };
+  }
+}
+
+export function parseCustomWidgetClipboard(text: string): HomarrCustomWidgetV2 | null {
+  const result = parseCustomWidgetClipboardDetailed(text);
+  return result.success ? result.widget : null;
+}
+
+export function parseCustomWidgetClipboardDetailed(text: string): CustomWidgetParseResult {
+  const blocks = extractFencedBlocks(text);
+  const jsonBlock = blocks.find((block) => block.language === "json" || block.language === "");
+  const source = jsonBlock?.content ?? text;
+  const parsedValue = parseWidgetValue(source);
+  if (!parsedValue.success) return { success: false, issues: [parsedValue.issue] };
+  const widget = { ...parsedValue.value };
+  const removedIssues = removedStateIssues(widget);
+  if (removedIssues.length > 0) return { success: false, issues: removedIssues };
+  const parsed = customWidgetImportSchema.safeParse(widget);
+  if (!parsed.success) return { success: false, issues: zodIssues(parsed.error) };
+  return { success: true, widget: parsed.data, warnings: [] };
+}
+
+export function parseCustomWidgetAiResponse(text: string): CustomWidgetParseResult {
+  const blocks = extractFencedBlocks(text);
+  const jsonBlocks = blocks.filter((block) => block.language === "json" || block.language === "");
+  const formatIssues: CustomWidgetImportIssue[] = [];
+  if (jsonBlocks.length !== 1)
+    formatIssues.push({ code: "AI_JSON_BLOCK_REQUIRED", message: "Expected exactly one fenced json block." });
+  if (blocks.length !== jsonBlocks.length)
+    formatIssues.push({
+      code: "AI_SINGLE_JSON_BLOCK_REQUIRED",
+      message: "Expected one JSON block only. Put the complete JSX directly in its template field.",
+    });
+  const source = jsonBlocks[0]?.content ?? text;
+  const parsedValue = parseWidgetValue(source);
+  if (!parsedValue.success) {
+    if (/"(?:stateSchema|defaultState)"\s*:/u.test(source))
+      formatIssues.push({
+        code: "REMOVED_LOCAL_STATE",
+        message: "stateSchema and defaultState are not supported; use bind with inputs or widget options.",
+      });
+    return { success: false, issues: [parsedValue.issue, ...formatIssues].slice(0, MAX_IMPORT_ISSUES) };
+  }
+  const widget = { ...parsedValue.value };
+  const removedIssues = removedStateIssues(widget);
+  if (removedIssues.length > 0) formatIssues.push(...removedIssues);
+  const warnings: CustomWidgetImportIssue[] = [];
+  if (formatIssues.length > 0) return { success: false, issues: formatIssues.slice(0, MAX_IMPORT_ISSUES) };
+  const parsed = customWidgetImportSchema.safeParse(widget);
+  if (!parsed.success) return { success: false, issues: zodIssues(parsed.error) };
+  return { success: true, widget: parsed.data, warnings };
+}
+
+export function looksLikeCustomWidgetClipboard(text: string) {
+  return /homarr-custom-widget|```(?:json|jsx|tsx)?\s*\n|"\$schema"\s*:/iu.test(text);
+}
+
+export function formatCustomWidgetImportIssues(issues: readonly CustomWidgetImportIssue[]) {
+  const visible = issues.slice(0, 3).map((issue) => {
+    const path = issue.path?.length ? `${issue.path.join(".")}: ` : "";
+    return `${path}${issue.message}`;
+  });
+  const remaining = issues.length - visible.length;
+  return `${visible.join(" ")}${remaining > 0 ? ` (+${remaining} more)` : ""}`;
+}
+
+export function getImportReview(value: unknown): ImportReview | null {
+  const parsed = customWidgetImportSchema.safeParse(value);
+  if (!parsed.success) return null;
+  const widget = parsed.data;
+  return {
+    name: widget.name,
+    origins: Object.values(widget.sources).map((source) => new URL(source.baseUrl).origin),
+    authTypes: [
+      ...new Set(
+        Object.values(widget.sources).map((source) =>
+          typeof source.auth === "string" ? source.auth : source.auth.type,
+        ),
+      ),
+    ],
+    networkScopes: [...new Set(Object.values(widget.sources).map((source) => source.networkScope))],
+    methods: [...new Set(Object.values(widget.requests).map((request) => request.method))],
+    permissions: [...new Set(Object.values(widget.requests).map((request) => request.permission))],
+    hasActions: Object.values(widget.requests).some((request) => request.kind === "action"),
+  };
+}
diff --git a/packages/custom-widgets/src/core/index.ts b/packages/custom-widgets/src/core/index.ts
new file mode 100644
index 000000000..05f371794
--- /dev/null
+++ b/packages/custom-widgets/src/core/index.ts
@@ -0,0 +1,9 @@
+export * from "./bundled-widgets";
+export * from "./examples";
+export * from "./import";
+export * from "./options";
+export * from "./schema";
+export * from "./schema-references";
+export * from "./secret-requirements";
+export * from "./source-setup";
+export * from "./tabler-icons";
diff --git a/packages/custom-widgets/src/core/option-value-types.ts b/packages/custom-widgets/src/core/option-value-types.ts
new file mode 100644
index 000000000..817c6261c
--- /dev/null
+++ b/packages/custom-widgets/src/core/option-value-types.ts
@@ -0,0 +1,8 @@
+export function matchesDeclaredOptionType(type: unknown, value: unknown) {
+  if (type === undefined) return true;
+  if (type === "object") return value !== null && typeof value === "object" && !Array.isArray(value);
+  if (type === "array") return Array.isArray(value);
+  if (type === "integer") return typeof value === "number" && Number.isInteger(value);
+  if (type === "null") return value === null;
+  return typeof value === type;
+}
diff --git a/packages/custom-widgets/src/core/options-schema.ts b/packages/custom-widgets/src/core/options-schema.ts
new file mode 100644
index 000000000..899b3f8a3
--- /dev/null
+++ b/packages/custom-widgets/src/core/options-schema.ts
@@ -0,0 +1,108 @@
+import { z } from "zod/v4";
+
+import { customWidgetIdentifierSchema } from "./request-schema";
+
+export const customWidgetOptionControls = [
+  "text",
+  "textarea",
+  "number",
+  "switch",
+  "select",
+  "multiSelect",
+  "slider",
+  "date",
+  "time",
+  "color",
+  "icon",
+  "url",
+  "duration",
+  "timeZone",
+  "json",
+] as const;
+
+const choiceSchema = z.strictObject({
+  label: z.string().trim().min(1).max(128),
+  value: z.union([z.string(), z.number().finite()]),
+});
+
+const choicesFromSchema = z.strictObject({
+  request: customWidgetIdentifierSchema,
+  itemsPath: z.preprocess(
+    (value) => (typeof value === "string" && value.trim() === "" ? undefined : value),
+    z.string().trim().min(1).optional(),
+  ),
+  valuePath: z.string().trim().min(1),
+  labelPath: z.string().trim().min(1),
+});
+
+export const customWidgetOptionSchema = z
+  .strictObject({
+    label: z.string().trim().min(1).max(128),
+    description: z.string().max(512).optional(),
+    control: z.enum(customWidgetOptionControls),
+    default: z.json(),
+    choices: z.array(choiceSchema).min(1).max(100).optional(),
+    choicesFrom: choicesFromSchema.optional(),
+    min: z.number().finite().optional(),
+    max: z.number().finite().optional(),
+    step: z.number().finite().positive().optional(),
+    advanced: z.boolean().optional(),
+    group: z.string().trim().min(1).max(128).optional(),
+  })
+  .superRefine((option, ctx) => {
+    const issue = getCustomWidgetOptionValueIssue(option, option.default);
+    if (issue) ctx.addIssue({ code: "custom", path: ["default"], message: issue });
+    if (option.min !== undefined && option.max !== undefined && option.min > option.max) {
+      ctx.addIssue({ code: "custom", path: ["min"], message: "Minimum cannot be greater than maximum" });
+    }
+    if ((option.choices || option.choicesFrom) && !["select", "multiSelect"].includes(option.control)) {
+      ctx.addIssue({ code: "custom", path: ["choices"], message: "Choices require a select or multiSelect control" });
+    }
+    if (option.choices && option.choicesFrom) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["choicesFrom"],
+        message: "Use static choices or dynamic choices, not both",
+      });
+    }
+    if (
+      option.choices &&
+      new Set(option.choices.map((choice) => String(choice.value))).size !== option.choices.length
+    ) {
+      ctx.addIssue({ code: "custom", path: ["choices"], message: "Choice values must be unique" });
+    }
+  });
+
+export const customWidgetOptionsSchema = z
+  .record(customWidgetIdentifierSchema, customWidgetOptionSchema)
+  .refine((options) => Object.keys(options).length <= 64, "A widget can define at most 64 options")
+  .default({});
+
+export type CustomWidgetOption = z.infer<typeof customWidgetOptionSchema>;
+export type CustomWidgetOptions = z.infer<typeof customWidgetOptionsSchema>;
+
+export function getCustomWidgetOptionValueIssue(
+  option: Pick<CustomWidgetOption, "control" | "min" | "max" | "choices">,
+  value: unknown,
+): string | null {
+  if (["number", "slider", "duration"].includes(option.control)) {
+    if (typeof value !== "number" || !Number.isFinite(value)) return "Expected a number";
+    if (option.min !== undefined && value < option.min) return `Must be at least ${option.min}`;
+    if (option.max !== undefined && value > option.max) return `Must be at most ${option.max}`;
+  } else if (option.control === "switch") {
+    if (typeof value !== "boolean") return "Expected a boolean";
+  } else if (option.control === "multiSelect") {
+    if (!Array.isArray(value) || value.some((entry) => !["string", "number"].includes(typeof entry)))
+      return "Expected a list of choices";
+  } else if (option.control !== "json" && typeof value !== "string") return "Expected text";
+
+  if (option.control === "url" && typeof value === "string" && value && !URL.canParse(value))
+    return "Must be a valid URL";
+  if (option.choices && (option.control === "select" || option.control === "multiSelect")) {
+    const allowed = option.choices.map((choice) => choice.value);
+    const values = Array.isArray(value) ? value : [value];
+    if (values.some((entry) => !allowed.some((choice) => Object.is(choice, entry))))
+      return "Value is not one of the allowed choices";
+  }
+  return null;
+}
diff --git a/packages/custom-widgets/src/core/options.ts b/packages/custom-widgets/src/core/options.ts
new file mode 100644
index 000000000..b6ca003b0
--- /dev/null
+++ b/packages/custom-widgets/src/core/options.ts
@@ -0,0 +1,28 @@
+import { getCustomWidgetOptionValueIssue } from "./options-schema";
+import type { CustomWidgetOption, CustomWidgetOptions } from "./options-schema";
+
+export interface CustomWidgetOptionIssue {
+  path: string;
+  message: string;
+}
+
+export function getCustomWidgetDefaultOptions(
+  options: Record<string, Pick<CustomWidgetOption, "default">>,
+): Record<string, unknown> {
+  return Object.fromEntries(Object.entries(options).map(([name, option]) => [name, option.default]));
+}
+
+export function validateCustomWidgetOptions(
+  options: CustomWidgetOptions,
+  value: Record<string, unknown>,
+): CustomWidgetOptionIssue[] {
+  const issues: CustomWidgetOptionIssue[] = [];
+  for (const [name, option] of Object.entries(options)) {
+    const issue = getCustomWidgetOptionValueIssue(option, value[name]);
+    if (issue) issues.push({ path: `configuration.${name}`, message: issue });
+  }
+  for (const name of Object.keys(value)) {
+    if (!Object.hasOwn(options, name)) issues.push({ path: `configuration.${name}`, message: "Unknown option" });
+  }
+  return issues;
+}
diff --git a/packages/custom-widgets/src/core/request-schema.ts b/packages/custom-widgets/src/core/request-schema.ts
new file mode 100644
index 000000000..7149dcc47
--- /dev/null
+++ b/packages/custom-widgets/src/core/request-schema.ts
@@ -0,0 +1,242 @@
+import { z } from "zod/v4";
+
+import { customWidgetMethods } from "./schema-types";
+import { getCustomWidgetHttpUrlIssue } from "./url-policy";
+
+export const customJsxNetworkScopes = ["public", "private", "loopback"] as const;
+export type CustomJsxNetworkScope = (typeof customJsxNetworkScopes)[number];
+
+export const customWidgetIdentifierSchema = z
+  .string()
+  .min(1)
+  .max(64)
+  .regex(/^[A-Za-z][A-Za-z0-9_-]*$/u, "IDs must start with a letter and contain letters, numbers, - or _");
+
+const headerNameSchema = z
+  .string()
+  .min(1)
+  .max(256)
+  .regex(/^[!#$%&'*+\-.^_`|~0-9A-Za-z]+$/u, "Header names must be valid HTTP tokens");
+
+const authSchema = z.union([
+  z.enum(["none", "bearer", "basic"]),
+  z.strictObject({ type: z.literal("apiKeyHeader"), name: headerNameSchema }),
+  z.strictObject({ type: z.literal("apiKeyQuery"), name: z.string().trim().min(1).max(256) }),
+]);
+
+export type CustomWidgetSourceUrlIssue = "invalid" | "protocol" | "credentials" | "queryOrFragment";
+
+export function getCustomWidgetSourceUrlIssue(value: string): CustomWidgetSourceUrlIssue | null {
+  const issue = getCustomWidgetHttpUrlIssue(value);
+  if (issue) return issue;
+  const url = new URL(value);
+  if (url.search || url.hash) return "queryOrFragment";
+  return null;
+}
+
+const sourceUrlIssueMessages: Record<CustomWidgetSourceUrlIssue, string> = {
+  invalid: "Must be a valid URL",
+  protocol: "API sources must use HTTP or HTTPS",
+  credentials: "Credentials must not be embedded in an API source URL",
+  queryOrFragment: "API source URLs cannot contain a query string or fragment",
+};
+
+export const customWidgetSourceSchema = z.strictObject({
+  name: z.string().trim().min(1).max(128).optional(),
+  baseUrl: z
+    .string()
+    .superRefine((value, ctx) => {
+      const issue = getCustomWidgetSourceUrlIssue(value);
+      if (issue) ctx.addIssue({ code: "custom", message: sourceUrlIssueMessages[issue] });
+    })
+    .url()
+    .max(2048),
+  networkScope: z.enum(customJsxNetworkScopes),
+  auth: authSchema.default("none"),
+});
+export type CustomWidgetSource = z.infer<typeof customWidgetSourceSchema>;
+
+export const customWidgetSourcesSchema = z
+  .record(customWidgetIdentifierSchema, customWidgetSourceSchema)
+  .refine((sources) => Object.keys(sources).length <= 8, "A widget can use at most 8 API sources")
+  .refine((sources) => Object.hasOwn(sources, "default"), "A widget must define a default API source");
+
+export const optionReferenceSchema = z.strictObject({ $option: customWidgetIdentifierSchema });
+export const parameterReferenceSchema = z.strictObject({ $param: customWidgetIdentifierSchema });
+export type CustomWidgetValueReference =
+  | z.infer<typeof optionReferenceSchema>
+  | z.infer<typeof parameterReferenceSchema>;
+
+export const boundValueSchema: z.ZodType<unknown> = z.lazy(() =>
+  z.union([
+    z.null(),
+    z.string(),
+    z.number().finite(),
+    z.boolean(),
+    optionReferenceSchema,
+    parameterReferenceSchema,
+    z.array(boundValueSchema),
+    z.record(z.string(), boundValueSchema),
+  ]),
+);
+
+const reservedRequestHeaders = new Set([
+  "authorization",
+  "connection",
+  "content-length",
+  "cookie",
+  "expect",
+  "forwarded",
+  "host",
+  "keep-alive",
+  "proxy-authenticate",
+  "proxy-authorization",
+  "te",
+  "trailer",
+  "transfer-encoding",
+  "upgrade",
+  "via",
+]);
+
+const headersSchema = z
+  .record(headerNameSchema, z.string().max(8192))
+  .refine((headers) => Object.keys(headers).length <= 32, "A request can declare at most 32 headers")
+  .refine(
+    (headers) =>
+      Object.keys(headers).every((name) => {
+        const normalized = name.toLowerCase();
+        return (
+          !reservedRequestHeaders.has(normalized) &&
+          !normalized.startsWith("proxy-") &&
+          !normalized.startsWith("sec-") &&
+          !normalized.startsWith("x-forwarded-")
+        );
+      }),
+    "Headers cannot override authentication, cookies, routing, forwarding, proxy, or hop-by-hop headers",
+  )
+  .refine(
+    (headers) =>
+      Object.keys(headers).every((name) => !/(?:api[-_]?key|authorization|password|secret|token)/iu.test(name)),
+    "Credential headers must be configured through source authentication",
+  );
+
+const confirmationSchema = z.union([
+  z.string().trim().min(1).max(512),
+  z.strictObject({
+    title: z.string().trim().min(1).max(128),
+    message: z.string().trim().min(1).max(512),
+    confirmLabel: z.string().trim().min(1).max(64).optional(),
+    destructive: z.boolean().optional(),
+  }),
+]);
+
+export const customJsxRequestSchema = z
+  .strictObject({
+    source: customWidgetIdentifierSchema.default("default"),
+    kind: z.enum(["query", "action"]).default("query"),
+    method: z.enum(customWidgetMethods).default("GET"),
+    path: z
+      .string()
+      .min(1)
+      .max(2048)
+      .startsWith("/")
+      .refine((path) => !path.startsWith("//"), "Request paths must be same-origin")
+      .refine((path) => !path.includes("\\"), "Request paths cannot contain backslashes")
+      .refine((path) => !path.includes("#"), "Request paths cannot contain URL fragments")
+      .refine(
+        (path) => !/[{}]/u.test(path.replaceAll(/\{(?:option|param):[A-Za-z][A-Za-z0-9_-]*\}/gu, "")),
+        "Request paths contain an invalid placeholder; use {option:name} or {param:name}",
+      ),
+    trigger: z.enum(["load", "manual"]).optional(),
+    query: z.record(z.string().min(1).max(256), boundValueSchema).optional(),
+    body: boundValueSchema.optional(),
+    headers: headersSchema.optional(),
+    auth: z.enum(["inherit", "none"]).default("inherit"),
+    permission: z.enum(["view", "modify", "full"]).optional(),
+    cacheSeconds: z.number().int().min(0).max(3600).optional(),
+    confirmation: confirmationSchema.optional(),
+    invalidates: z.array(customWidgetIdentifierSchema).max(32).optional(),
+  })
+  .superRefine((request, context) => {
+    if (request.method === "DELETE" && request.kind !== "action") {
+      context.addIssue({
+        code: "custom",
+        path: ["kind"],
+        message: "DELETE requests must be manual actions",
+      });
+    }
+  })
+  .transform((request) => {
+    const confirmation =
+      request.method === "DELETE" && request.confirmation === undefined
+        ? ({ title: "Confirm action", message: "Are you sure?", destructive: true } as const)
+        : request.confirmation;
+    return {
+      ...request,
+      trigger: request.kind === "action" ? ("manual" as const) : (request.trigger ?? ("load" as const)),
+      permission:
+        request.method === "DELETE"
+          ? ("full" as const)
+          : (request.permission ?? (request.kind === "action" ? ("modify" as const) : ("view" as const))),
+      ...(confirmation === undefined ? {} : { confirmation }),
+    };
+  });
+
+export type CustomJsxRequest = z.infer<typeof customJsxRequestSchema>;
+export type CustomJsxRequestInput = z.input<typeof customJsxRequestSchema>;
+
+export interface CustomWidgetConfirmation {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  destructive?: boolean;
+}
+
+export function getCustomWidgetConfirmation(
+  request: Pick<CustomJsxRequest, "confirmation" | "method">,
+): CustomWidgetConfirmation | undefined {
+  if (typeof request.confirmation === "string") {
+    return { title: "Confirm action", message: request.confirmation };
+  }
+  return request.confirmation;
+}
+
+export const customWidgetRequestsSchema = z
+  .record(customWidgetIdentifierSchema, customJsxRequestSchema)
+  .refine((requests) => Object.keys(requests).length <= 64, "A widget can define at most 64 requests");
+
+const pathReferencePattern = /\{(option|param):([A-Za-z][A-Za-z0-9_-]*)\}/gu;
+
+export interface CustomWidgetRequestReferences {
+  options: Set<string>;
+  params: Set<string>;
+}
+
+export function collectCustomWidgetRequestReferences(request: Pick<CustomJsxRequest, "path" | "query" | "body">) {
+  const references: CustomWidgetRequestReferences = { options: new Set(), params: new Set() };
+  for (const match of request.path.matchAll(pathReferencePattern)) {
+    const name = match[2];
+    if (name) references[match[1] === "option" ? "options" : "params"].add(name);
+  }
+  collectBoundValueReferences(request.query, references);
+  collectBoundValueReferences(request.body, references);
+  return references;
+}
+
+function collectBoundValueReferences(value: unknown, references: CustomWidgetRequestReferences): void {
+  if (Array.isArray(value)) {
+    value.forEach((entry) => collectBoundValueReferences(entry, references));
+    return;
+  }
+  if (value === null || typeof value !== "object") return;
+  const entries = Object.entries(value);
+  if (entries.length === 1 && entries[0]?.[0] === "$option" && typeof entries[0][1] === "string") {
+    references.options.add(entries[0][1]);
+    return;
+  }
+  if (entries.length === 1 && entries[0]?.[0] === "$param" && typeof entries[0][1] === "string") {
+    references.params.add(entries[0][1]);
+    return;
+  }
+  entries.forEach(([, entry]) => collectBoundValueReferences(entry, references));
+}
diff --git a/packages/custom-widgets/src/core/schema-references.ts b/packages/custom-widgets/src/core/schema-references.ts
new file mode 100644
index 000000000..2ef49dcdd
--- /dev/null
+++ b/packages/custom-widgets/src/core/schema-references.ts
@@ -0,0 +1,60 @@
+import { z } from "zod/v4";
+
+import { customWidgetOptionsSchema } from "./options-schema";
+import { customWidgetRequestsSchema } from "./request-schema";
+
+let requestsSchema: Record<string, unknown> | undefined;
+let optionsSchema: Record<string, unknown> | undefined;
+
+export function getCustomWidgetRequestsJsonSchema() {
+  requestsSchema ??= {
+    ...z.toJSONSchema(customWidgetRequestsSchema, { io: "input" }),
+    title: "Named Custom Widget queries and actions",
+  };
+  return requestsSchema;
+}
+
+export function getCustomWidgetOptionsJsonSchema() {
+  optionsSchema ??= { ...z.toJSONSchema(customWidgetOptionsSchema, { io: "input" }), title: "Custom Widget options" };
+  return optionsSchema;
+}
+
+export const CUSTOM_WIDGET_REQUEST_EXAMPLES = {
+  minimal: { data: { path: "/api/status" } },
+  full: {
+    environments: { path: "/api/environments", cacheSeconds: 60 },
+    summary: {
+      path: "/api/environments/{option:environmentId}/summary",
+      query: { includeStopped: { $option: "includeStopped" } },
+      cacheSeconds: 60,
+    },
+    search: {
+      trigger: "manual",
+      method: "POST",
+      path: "/api/search",
+      query: { limit: { $param: "limit" } },
+      body: { term: { $param: "query" } },
+    },
+    restart: {
+      kind: "action",
+      method: "POST",
+      path: "/api/containers/{param:id}/restart",
+      confirmation: "Restart this container?",
+      invalidates: ["summary"],
+    },
+  },
+} as const;
+
+export const CUSTOM_WIDGET_OPTIONS_EXAMPLES = {
+  minimal: {},
+  full: {
+    title: { label: "Title", control: "text", default: "Overview" },
+    limit: { label: "Result limit", control: "number", default: 20, min: 1, max: 100 },
+    environmentId: {
+      label: "Environment",
+      control: "select",
+      default: 1,
+      choicesFrom: { request: "environments", itemsPath: "items", valuePath: "Id", labelPath: "Name" },
+    },
+  },
+} as const;
diff --git a/packages/custom-widgets/src/core/schema-types.ts b/packages/custom-widgets/src/core/schema-types.ts
new file mode 100644
index 000000000..2a0967843
--- /dev/null
+++ b/packages/custom-widgets/src/core/schema-types.ts
@@ -0,0 +1,8 @@
+export const customWidgetAuthTypes = ["none", "bearer", "basic", "apiKeyHeader", "apiKeyQuery"] as const;
+export type CustomWidgetAuthType = (typeof customWidgetAuthTypes)[number];
+
+export const customWidgetMethods = ["GET", "POST", "PUT", "DELETE", "PATCH"] as const;
+export type CustomWidgetMethod = (typeof customWidgetMethods)[number];
+
+export const customWidgetSecretKinds = ["apiKey", "username", "password"] as const;
+export type CustomWidgetSecretKind = (typeof customWidgetSecretKinds)[number];
diff --git a/packages/custom-widgets/src/core/schema.ts b/packages/custom-widgets/src/core/schema.ts
new file mode 100644
index 000000000..ce085da8c
--- /dev/null
+++ b/packages/custom-widgets/src/core/schema.ts
@@ -0,0 +1,18 @@
+import { z } from "zod/v4";
+
+import { customWidgetImportSchema } from "./custom-jsx-schema";
+
+export * from "./custom-jsx-schema";
+export * from "./definition-schemas";
+export * from "./schema-types";
+
+let customWidgetJsonSchema: Record<string, unknown> | undefined;
+
+export function getCustomWidgetJsonSchema() {
+  customWidgetJsonSchema ??= {
+    ...z.toJSONSchema(customWidgetImportSchema, { io: "input" }),
+    title: "Homarr Custom JSX v2 widget",
+    description: "The only supported Homarr custom-widget format. Secrets are configured separately.",
+  };
+  return customWidgetJsonSchema;
+}
diff --git a/packages/custom-widgets/src/core/secret-requirements.ts b/packages/custom-widgets/src/core/secret-requirements.ts
new file mode 100644
index 000000000..bf40808fc
--- /dev/null
+++ b/packages/custom-widgets/src/core/secret-requirements.ts
@@ -0,0 +1,33 @@
+import type { CustomWidgetSource } from "./request-schema";
+import type { CustomWidgetSecretKind } from "./schema-types";
+
+type AuthType = "none" | "bearer" | "basic" | "apiKeyHeader" | "apiKeyQuery";
+
+export interface CustomWidgetSecretRequirement {
+  sourceId: string;
+  sourceName: string;
+  authType: AuthType;
+  kind: CustomWidgetSecretKind;
+  destination?: string;
+}
+
+export function getCustomWidgetRequiredSecretKinds(authType: AuthType) {
+  if (authType === "basic") return ["username", "password"] as const;
+  if (["bearer", "apiKeyHeader", "apiKeyQuery"].includes(authType)) return ["apiKey"] as const;
+  return [] as const;
+}
+
+export function getCustomWidgetSecretRequirements(
+  sources: Record<string, CustomWidgetSource>,
+): CustomWidgetSecretRequirement[] {
+  return Object.entries(sources).flatMap(([sourceId, source]) => {
+    const authType = typeof source.auth === "string" ? source.auth : source.auth.type;
+    return getCustomWidgetRequiredSecretKinds(authType).map((kind) => ({
+      sourceId,
+      sourceName: source.name ?? sourceId,
+      authType,
+      kind,
+      destination: typeof source.auth === "object" ? source.auth.name : undefined,
+    }));
+  });
+}
diff --git a/packages/custom-widgets/src/core/source-setup.ts b/packages/custom-widgets/src/core/source-setup.ts
new file mode 100644
index 000000000..a468ca7ba
--- /dev/null
+++ b/packages/custom-widgets/src/core/source-setup.ts
@@ -0,0 +1,96 @@
+import type { CustomWidgetSource } from "./request-schema";
+import { getCustomWidgetSourceUrlIssue } from "./request-schema";
+import type { CustomWidgetSecretKind } from "./schema-types";
+import { getCustomWidgetSecretRequirements } from "./secret-requirements";
+
+export interface CustomWidgetConfiguredSecret {
+  sourceId: string;
+  kind: CustomWidgetSecretKind;
+  hasValue?: boolean;
+  value?: string;
+}
+
+export interface CustomWidgetSourceSetup {
+  sourceId: string;
+  sourceName: string;
+  suggestedBaseUrl: string;
+  baseUrl: string;
+  networkScope: CustomWidgetSource["networkScope"];
+  authType: "none" | "bearer" | "basic" | "apiKeyHeader" | "apiKeyQuery";
+  credentialFields: Array<{
+    kind: CustomWidgetSecretKind;
+    destination?: string;
+    configured: boolean;
+  }>;
+  requiresUrlConfirmation: boolean;
+}
+
+const placeholderHosts = new Set(["example.com", "example.org", "example.net"]);
+
+export function isCustomWidgetSourceUrlPlaceholder(baseUrl: string) {
+  if (!URL.canParse(baseUrl)) return false;
+  const hostname = new URL(baseUrl).hostname.toLowerCase();
+  return (
+    placeholderHosts.has(hostname) ||
+    hostname.endsWith(".example.com") ||
+    hostname.endsWith(".example.org") ||
+    hostname.endsWith(".example.net") ||
+    /^(?:your-|replace-|change-me)/u.test(hostname)
+  );
+}
+
+export function customWidgetSourceRequiresUrlConfirmation(source: CustomWidgetSource) {
+  return source.networkScope !== "public" || isCustomWidgetSourceUrlPlaceholder(source.baseUrl);
+}
+
+export function hasSameCustomWidgetSourceAuthentication(left: CustomWidgetSource, right: CustomWidgetSource) {
+  if (typeof left.auth === "string" || typeof right.auth === "string") return left.auth === right.auth;
+  return left.auth.type === right.auth.type && left.auth.name === right.auth.name;
+}
+
+export function getCustomWidgetSourceSetups(
+  sources: Record<string, CustomWidgetSource>,
+  configuredSecrets: readonly CustomWidgetConfiguredSecret[] = [],
+): CustomWidgetSourceSetup[] {
+  const requirements = getCustomWidgetSecretRequirements(sources);
+  return Object.entries(sources).map(([sourceId, source]) => {
+    const authType = typeof source.auth === "string" ? source.auth : source.auth.type;
+    return {
+      sourceId,
+      sourceName: source.name ?? sourceId,
+      suggestedBaseUrl: source.baseUrl,
+      baseUrl: source.baseUrl,
+      networkScope: source.networkScope,
+      authType,
+      credentialFields: requirements
+        .filter((requirement) => requirement.sourceId === sourceId)
+        .map((requirement) => ({
+          kind: requirement.kind,
+          destination: requirement.destination,
+          configured: configuredSecrets.some(
+            (secret) =>
+              secret.sourceId === sourceId &&
+              secret.kind === requirement.kind &&
+              (secret.hasValue === true || Boolean(secret.value?.trim())),
+          ),
+        })),
+      requiresUrlConfirmation: customWidgetSourceRequiresUrlConfirmation(source),
+    };
+  });
+}
+
+export function applyCustomWidgetSourceSetup(
+  sources: Record<string, CustomWidgetSource>,
+  setup: Record<string, Pick<CustomWidgetSource, "baseUrl" | "networkScope">>,
+) {
+  return Object.fromEntries(
+    Object.entries(sources).map(([sourceId, source]) => {
+      const configured = setup[sourceId];
+      return [sourceId, configured ? { ...source, ...configured } : source];
+    }),
+  );
+}
+
+export function getCustomWidgetSourceSetupIssue(source: Pick<CustomWidgetSourceSetup, "baseUrl">) {
+  return getCustomWidgetSourceUrlIssue(source.baseUrl);
+}
diff --git a/packages/custom-widgets/src/core/tabler-icons.ts b/packages/custom-widgets/src/core/tabler-icons.ts
new file mode 100644
index 000000000..4e691a57b
--- /dev/null
+++ b/packages/custom-widgets/src/core/tabler-icons.ts
@@ -0,0 +1,105 @@
+export const customJsxTablerIconNames = [
+  "activity",
+  "alert-circle",
+  "alert-triangle",
+  "api",
+  "arrow-down",
+  "arrow-left",
+  "arrow-right",
+  "arrow-up",
+  "bell",
+  "bluetooth",
+  "bolt",
+  "bookmark",
+  "brand-docker",
+  "bug",
+  "calendar",
+  "camera",
+  "chart-bar",
+  "chart-line",
+  "chart-pie",
+  "check",
+  "chevron-down",
+  "chevron-left",
+  "chevron-right",
+  "chevron-up",
+  "circle-check",
+  "circle-x",
+  "clipboard",
+  "clock",
+  "cloud",
+  "cloud-off",
+  "code",
+  "compass",
+  "copy",
+  "cpu",
+  "database",
+  "device-desktop",
+  "device-mobile",
+  "download",
+  "droplet",
+  "edit",
+  "external-link",
+  "eye",
+  "eye-off",
+  "file",
+  "flag",
+  "flame",
+  "folder",
+  "gauge",
+  "git-branch",
+  "heart",
+  "heartbeat",
+  "history",
+  "home",
+  "info-circle",
+  "key",
+  "link",
+  "loader",
+  "lock",
+  "lock-open",
+  "mail",
+  "map",
+  "map-pin",
+  "minus",
+  "moon",
+  "music",
+  "network",
+  "photo",
+  "pin",
+  "player-pause",
+  "player-play",
+  "player-skip-back",
+  "player-skip-forward",
+  "player-stop",
+  "plus",
+  "pokeball",
+  "power",
+  "progress",
+  "pulse",
+  "refresh",
+  "reload",
+  "search",
+  "server",
+  "settings",
+  "shield",
+  "speedboat",
+  "star",
+  "sun",
+  "terminal",
+  "thermometer",
+  "trash",
+  "trending-down",
+  "trending-up",
+  "upload",
+  "user",
+  "users",
+  "video",
+  "volume",
+  "volume-2",
+  "volume-off",
+  "wifi",
+  "wifi-off",
+  "world",
+  "x",
+] as const;
diff --git a/packages/custom-widgets/src/core/url-policy.ts b/packages/custom-widgets/src/core/url-policy.ts
new file mode 100644
index 000000000..1cd98a519
--- /dev/null
+++ b/packages/custom-widgets/src/core/url-policy.ts
@@ -0,0 +1,116 @@
+export type CustomWidgetHttpUrlIssue = "invalid" | "protocol" | "credentials";
+
+const forbiddenUnicodeCodePointRanges = [
+  [0x0000, 0x0020],
+  [0x007f, 0x00a0],
+  [0x1680, 0x1680],
+  [0x2000, 0x200f],
+  [0x2028, 0x202f],
+  [0x205f, 0x206f],
+  [0x3000, 0x3000],
+  [0xfeff, 0xfeff],
+] as const;
+
+/**
+ * Applies the conservative URL syntax shared by Homarr and the Workshop
+ * validator. WHATWG URL parsing intentionally accepts and normalizes several
+ * ambiguous spellings (for example IPv4 integers, backslashes and escaped
+ * hostnames). Definitions are persisted and later used for network requests,
+ * so authoring accepts only an unambiguous authority spelling.
+ */
+export function getCustomWidgetHttpUrlIssue(value: string): CustomWidgetHttpUrlIssue | null {
+  if (hasForbiddenUrlCharacter(value) || value.includes("\\")) return "invalid";
+  if (!URL.canParse(value)) return "invalid";
+
+  let url: URL;
+  try {
+    url = new URL(value);
+  } catch {
+    return "invalid";
+  }
+
+  if (url.protocol !== "http:" && url.protocol !== "https:") return "protocol";
+
+  const authority = getRawAuthority(value);
+  if (authority === null) return "invalid";
+  if (authority.includes("@") || url.username || url.password) return "credentials";
+  if (authority.includes("%") || /[。．｡]/u.test(authority)) return "invalid";
+
+  const hostAndPort = splitHostAndPort(authority);
+  if (!hostAndPort || !hasCanonicalPort(hostAndPort.port)) return "invalid";
+
+  const rawHostname = withoutTrailingRootDot(hostAndPort.hostname);
+  const parsedHostname = withoutTrailingRootDot(url.hostname);
+  if (!rawHostname || !hasCanonicalParsedHostname(parsedHostname)) return "invalid";
+  if (
+    rawHostname.startsWith("[") &&
+    parsedHostname.startsWith("[") &&
+    !rawHostname.includes(".") &&
+    rawHostname.toLowerCase() !== parsedHostname
+  ) {
+    return "invalid";
+  }
+
+  if (looksNumeric(rawHostname) && !isStrictIpv4(rawHostname)) return "invalid";
+  if (isStrictIpv4(parsedHostname) && rawHostname !== parsedHostname) return "invalid";
+
+  return null;
+}
+
+function getRawAuthority(value: string): string | null {
+  const match = value.match(/^[A-Za-z][A-Za-z0-9+.-]*:\/\/([^/?#]*)/u);
+  return match?.[1] ?? null;
+}
+
+function splitHostAndPort(authority: string): { hostname: string; port: string } | null {
+  if (authority.startsWith("[")) {
+    const closingBracket = authority.indexOf("]");
+    if (closingBracket < 0) return null;
+    const hostname = authority.slice(0, closingBracket + 1);
+    const suffix = authority.slice(closingBracket + 1);
+    if (suffix && !suffix.startsWith(":")) return null;
+    return { hostname, port: suffix ? suffix.slice(1) : "" };
+  }
+
+  const firstColon = authority.indexOf(":");
+  if (firstColon !== authority.lastIndexOf(":")) return null;
+  return {
+    hostname: firstColon < 0 ? authority : authority.slice(0, firstColon),
+    port: firstColon < 0 ? "" : authority.slice(firstColon + 1),
+  };
+}
+
+function hasCanonicalPort(value: string): boolean {
+  if (!value) return true;
+  if (!/^(?:0|[1-9]\d{0,4})$/u.test(value)) return false;
+  return Number(value) <= 65_535;
+}
+
+function hasCanonicalParsedHostname(value: string): boolean {
+  if (value.startsWith("[") && value.endsWith("]")) return true;
+  if (!value || value.length > 253 || !/^[A-Za-z0-9._-]+$/u.test(value)) return false;
+  return value
+    .split(".")
+    .every((label) => Boolean(label) && label.length <= 63 && !label.startsWith("-") && !label.endsWith("-"));
+}
+
+function looksNumeric(value: string): boolean {
+  const parts = value.split(".");
+  return parts.every((part) => /^(?:\d+|0[xX][0-9A-Fa-f]+)$/u.test(part));
+}
+
+function isStrictIpv4(value: string): boolean {
+  const parts = value.split(".");
+  return parts.length === 4 && parts.every((part) => /^(?:0|[1-9]\d{0,2})$/u.test(part) && Number(part) <= 255);
+}
+
+function withoutTrailingRootDot(value: string): string {
+  return value.endsWith(".") ? value.slice(0, -1) : value;
+}
+
+function hasForbiddenUrlCharacter(value: string): boolean {
+  return [...value].some((character) => {
+    const codePoint = character.codePointAt(0) ?? 0;
+    return forbiddenUnicodeCodePointRanges.some(([minimum, maximum]) => codePoint >= minimum && codePoint <= maximum);
+  });
+}
diff --git a/packages/custom-widgets/src/jsx/analyzer-ast.ts b/packages/custom-widgets/src/jsx/analyzer-ast.ts
new file mode 100644
index 000000000..25b3dc216
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/analyzer-ast.ts
@@ -0,0 +1,72 @@
+export interface AstNode {
+  type: string;
+  start?: number;
+  loc?: { start?: { line?: number; column?: number } };
+  [key: string]: unknown;
+}
+
+export const nodeOf = (value: unknown): AstNode | null =>
+  value !== null && typeof value === "object" && typeof (value as { type?: unknown }).type === "string"
+    ? (value as AstNode)
+    : null;
+
+export const nodesOf = (value: unknown): AstNode[] =>
+  Array.isArray(value) ? value.map(nodeOf).filter((node): node is AstNode => node !== null) : [];
+
+export const staticPropertyName = (node: AstNode | null): string | undefined => {
+  if (!node) return undefined;
+  if (node.type === "Literal" && (typeof node.value === "string" || typeof node.value === "number")) {
+    return String(node.value);
+  }
+  if (node.type === "BinaryExpression" && node.operator === "+") {
+    const left = staticPropertyName(nodeOf(node.left));
+    const right = staticPropertyName(nodeOf(node.right));
+    return left === undefined || right === undefined ? undefined : left + right;
+  }
+  if (node.type === "TemplateLiteral" && Array.isArray(node.expressions) && node.expressions.length === 0) {
+    return (node.quasis as Array<{ value?: { cooked?: unknown } }> | undefined)
+      ?.map((quasi) => String(quasi.value?.cooked ?? ""))
+      .join("");
+  }
+  return undefined;
+};
+
+const callbackCollectionMethods = new Set(["every", "filter", "find", "findIndex", "map", "reduce", "some", "sort"]);
+
+export function containsEscapingCallback(node: AstNode): boolean {
+  if (node.type === "ArrowFunctionExpression") return true;
+  if (node.type === "CallExpression") {
+    const callee = nodeOf(node.callee);
+    const arguments_ = nodesOf(node.arguments);
+    if (callee?.type === "ArrowFunctionExpression") {
+      if (arguments_.length > 0) return true;
+      const body = nodeOf(callee.body);
+      return body ? containsEscapingCallbackChildren(body) : false;
+    }
+    if (callee && containsEscapingCallback(callee)) return true;
+    const property = callee?.type === "MemberExpression" ? nodeOf(callee.property) : null;
+    const method = property?.type === "Identifier" ? String(property.name) : staticPropertyName(property);
+    return arguments_.some((argument) => {
+      if (argument.type !== "ArrowFunctionExpression" || !method || !callbackCollectionMethods.has(method)) {
+        return containsEscapingCallback(argument);
+      }
+      const body = nodeOf(argument.body);
+      return body ? containsEscapingCallback(body) : false;
+    });
+  }
+  return containsEscapingCallbackChildren(node);
+}
+
+function containsEscapingCallbackChildren(node: AstNode): boolean {
+  return Object.entries(node).some(([key, value]) => {
+    if (["loc", "start", "end", "type"].includes(key)) return false;
+    if (Array.isArray(value)) {
+      return value.some((entry) => {
+        const child = nodeOf(entry);
+        return child ? containsEscapingCallback(child) : false;
+      });
+    }
+    const child = nodeOf(value);
+    return child ? containsEscapingCallback(child) : false;
+  });
+}
diff --git a/packages/custom-widgets/src/jsx/analyzer-diagnostics.ts b/packages/custom-widgets/src/jsx/analyzer-diagnostics.ts
new file mode 100644
index 000000000..5c9199bb4
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/analyzer-diagnostics.ts
@@ -0,0 +1,27 @@
+export interface CustomJsxTemplateDiagnostic {
+  severity: "error" | "warning";
+  message: string;
+  index: number;
+  line: number;
+  column: number;
+}
+
+export function createCustomJsxParseDiagnostic(_template: string, error: unknown): CustomJsxTemplateDiagnostic {
+  const parseError = error as Error & { pos?: number; loc?: { line?: number; column?: number } };
+  const parseIndex = Math.max(0, (parseError.pos ?? 2) - 2);
+  const duplicateArgument = /Argument name clash/iu.test(parseError.message);
+  const message = duplicateArgument
+    ? "DUPLICATE_LOCAL_BINDING: Callback parameter names must be unique"
+    : parseError.message;
+
+  return {
+    severity: "error",
+    message,
+    index: parseIndex,
+    line: parseError.loc?.line ?? 1,
+    column: Math.max(
+      1,
+      (parseError.loc?.column ?? 0) + (parseError.loc?.line === 1 || parseError.loc?.line === undefined ? -1 : 1),
+    ),
+  };
+}
diff --git a/packages/custom-widgets/src/jsx/analyzer-jsx.ts b/packages/custom-widgets/src/jsx/analyzer-jsx.ts
new file mode 100644
index 000000000..a68f045f7
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/analyzer-jsx.ts
@@ -0,0 +1,135 @@
+import {
+  customJsxBindableComponentNames,
+  customJsxComponentByName,
+  customJsxSupportedPropsByName,
+  resolveCustomJsxComponentName,
+} from "../core/component-registry";
+import type { AstNode } from "./analyzer-ast";
+import { containsEscapingCallback, nodeOf, nodesOf } from "./analyzer-ast";
+import { closestCustomJsxComponentName, customJsxTagName, isSafeLiteralCustomJsxUrl } from "./analyzer-language";
+import { CUSTOM_JSX_BINDING_IDENTIFIER_PATTERN, CUSTOM_JSX_URL_PROPS, isBlockedCustomJsxProp } from "./policy";
+import { getInvalidCustomJsxPropValueReason } from "./runtime-component-policy";
+
+interface AnalyzerJsxContext {
+  add(node: AstNode, message: string, severity?: "error" | "warning"): void;
+  visit(node: AstNode, depth: number, bindings: ReadonlySet<string>): void;
+  visitArrow(node: AstNode, depth: number, bindings: ReadonlySet<string>): void;
+}
+
+export function analyzeCustomJsxElement(
+  node: AstNode,
+  depth: number,
+  bindings: ReadonlySet<string>,
+  context: AnalyzerJsxContext,
+): void {
+  const opening = nodeOf(node.openingElement);
+  if (!opening) {
+    context.add(node, "Invalid JSX element");
+    return;
+  }
+  const nameNode = nodeOf(opening.name);
+  const name = nameNode ? customJsxTagName(nameNode) : null;
+  const resolvedName = name ? resolveCustomJsxComponentName(name) : null;
+  const descriptor = resolvedName ? customJsxComponentByName.get(resolvedName) : undefined;
+  if (descriptor?.safety === "denied") {
+    context.add(
+      opening,
+      `BLOCKED_CAPABILITY: '${name}' is not available${descriptor.reason ? ` because it ${descriptor.reason.toLowerCase()}` : ""}`,
+    );
+  } else if (!descriptor) {
+    const suggestion = name ? closestCustomJsxComponentName(name) : undefined;
+    context.add(
+      opening,
+      name
+        ? `UNKNOWN_COMPONENT: '${name}' is not available${suggestion ? `. Did you mean '${suggestion}'?` : ""}`
+        : "UNKNOWN_COMPONENT: Invalid JSX component name",
+    );
+  }
+
+  for (const attribute of nodesOf(opening.attributes)) {
+    if (attribute.type === "JSXSpreadAttribute") {
+      const argument = nodeOf(attribute.argument);
+      if (argument) context.visit(argument, depth + 1, bindings);
+      continue;
+    }
+    if (attribute.type !== "JSXAttribute") {
+      context.add(attribute, `Unsupported JSX attribute '${attribute.type}'`);
+      continue;
+    }
+    const attributeNameNode = nodeOf(attribute.name);
+    const attributeName = attributeNameNode?.type === "JSXIdentifier" ? String(attributeNameNode.name) : "";
+    const componentBlockedProp = descriptor?.blockedProps.find(({ name: propName }) => propName === attributeName);
+    if (componentBlockedProp) {
+      context.add(
+        attribute,
+        `BLOCKED_CAPABILITY: Prop '${attributeName}' on '${name}' is not allowed because ${componentBlockedProp.reason.toLowerCase()}`,
+      );
+    } else if (isBlockedCustomJsxProp(attributeName)) {
+      context.add(attribute, `BLOCKED_CAPABILITY: Prop '${attributeName}' is not allowed`);
+    } else if (
+      resolvedName &&
+      attributeName !== "bind" &&
+      !customJsxSupportedPropsByName.get(resolvedName)?.has(attributeName)
+    ) {
+      context.add(attribute, `UNKNOWN_MANTINE_PROP: '${attributeName}' on ${name} will be passed through`, "warning");
+    } else if (resolvedName && attributeName === "bind" && !customJsxBindableComponentNames.has(resolvedName)) {
+      context.add(attribute, `BINDING_UNAVAILABLE: '${name}' does not have a declarative binding adapter`, "warning");
+    }
+    if (attributeName === "bind") analyzeBindAttribute(attribute, context);
+    analyzeAttributeValue(resolvedName, attributeName, attribute, depth, bindings, context);
+  }
+
+  nodesOf(node.children).forEach((child) => {
+    const expression = child.type === "JSXExpressionContainer" ? nodeOf(child.expression) : null;
+    if (resolvedName === "SubFetch" && expression?.type === "ArrowFunctionExpression") {
+      context.visitArrow(expression, depth + 1, bindings);
+      return;
+    }
+    context.visit(child, depth + 1, bindings);
+  });
+}
+
+function analyzeBindAttribute(attribute: AstNode, context: AnalyzerJsxContext): void {
+  const value = nodeOf(attribute.value);
+  if (value?.type !== "Literal" || typeof value.value !== "string") {
+    context.add(attribute, "bind must use a literal input name");
+  } else if (!CUSTOM_JSX_BINDING_IDENTIFIER_PATTERN.test(value.value)) {
+    context.add(attribute, `Invalid bind input name '${value.value}'`);
+  }
+}
+
+function analyzeAttributeValue(
+  componentName: string | null,
+  attributeName: string,
+  attribute: AstNode,
+  depth: number,
+  bindings: ReadonlySet<string>,
+  context: AnalyzerJsxContext,
+): void {
+  const value = nodeOf(attribute.value);
+  const literalValue =
+    value?.type === "Literal"
+      ? value
+      : value?.type === "JSXExpressionContainer" && nodeOf(value.expression)?.type === "Literal"
+        ? nodeOf(value.expression)
+        : null;
+  if (componentName && literalValue?.type === "Literal") {
+    const reason = getInvalidCustomJsxPropValueReason(componentName, attributeName, literalValue.value);
+    if (reason) context.add(attribute, `INVALID_PROP_VALUE: ${reason}`);
+  }
+  if (
+    CUSTOM_JSX_URL_PROPS.has(attributeName) &&
+    value?.type === "Literal" &&
+    typeof value.value === "string" &&
+    !isSafeLiteralCustomJsxUrl(value.value)
+  ) {
+    context.add(attribute, `INVALID_PROP_VALUE: '${attributeName}' contains an unsafe URL`);
+  }
+  if (value?.type !== "JSXExpressionContainer") return;
+  const expression = nodeOf(value.expression);
+  if (expression && containsEscapingCallback(expression)) {
+    context.add(attribute, `BLOCKED_CAPABILITY: Callback prop '${attributeName}' is not allowed`);
+  } else if (expression && expression.type !== "JSXEmptyExpression") {
+    context.visit(expression, depth + 1, bindings);
+  }
+}
diff --git a/packages/custom-widgets/src/jsx/analyzer-language.ts b/packages/custom-widgets/src/jsx/analyzer-language.ts
new file mode 100644
index 000000000..4bac3e82c
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/analyzer-language.ts
@@ -0,0 +1,137 @@
+import { enabledCustomJsxComponents } from "../core/component-registry";
+import type { AstNode } from "./analyzer-ast";
+import { nodeOf, staticPropertyName } from "./analyzer-ast";
+
+export const ROOT_BINDINGS = new Set([
+  "Array",
+  "Boolean",
+  "Date",
+  "Infinity",
+  "JSON",
+  "Math",
+  "NaN",
+  "Number",
+  "Object",
+  "String",
+  "data",
+  "options",
+  "inputs",
+  "status",
+  "decodeURIComponent",
+  "encodeURIComponent",
+  "isFinite",
+  "isNaN",
+  "parseFloat",
+  "parseInt",
+  "undefined",
+]);
+
+export const RESERVED_LOCAL_BINDINGS = new Set(["data", "status", "options", "inputs"]);
+const callableRootBindings = new Set([
+  "Boolean",
+  "Number",
+  "String",
+  "decodeURIComponent",
+  "encodeURIComponent",
+  "isFinite",
+  "isNaN",
+  "parseFloat",
+  "parseInt",
+]);
+const callableRootMembers: Readonly<Record<string, ReadonlySet<string>>> = {
+  Array: new Set(["from", "isArray"]),
+  Date: new Set([
+    "create",
+    "getDay",
+    "getMonth",
+    "getTime",
+    "getYear",
+    "now",
+    "toISOString",
+    "toLocaleDateString",
+    "toLocaleTimeString",
+  ]),
+  JSON: new Set(["stringify"]),
+  Math: new Set(["abs", "ceil", "floor", "max", "min", "pow", "round", "sqrt"]),
+  Object: new Set(["entries", "keys", "values"]),
+};
+const enabledComponentNames = enabledCustomJsxComponents.map((component) => component.name);
+
+export function closestCustomJsxComponentName(value: string): string | undefined {
+  let closest: { name: string; distance: number } | undefined;
+  for (const name of enabledComponentNames) {
+    const distance = editDistance(value.toLowerCase(), name.toLowerCase());
+    if (!closest || distance < closest.distance) closest = { name, distance };
+  }
+  return closest && closest.distance <= Math.max(2, Math.floor(value.length / 3)) ? closest.name : undefined;
+}
+
+export function customJsxTagName(node: AstNode): string | null {
+  if (node.type === "JSXIdentifier") return String(node.name ?? "");
+  if (node.type !== "JSXMemberExpression") return null;
+  const object = nodeOf(node.object);
+  const property = nodeOf(node.property);
+  const left = object ? customJsxTagName(object) : null;
+  const right = property ? customJsxTagName(property) : null;
+  return left && right ? `${left}.${right}` : null;
+}
+
+export function isSafeLiteralCustomJsxUrl(value: string): boolean {
+  if (value.startsWith("#") || (value.startsWith("/") && !value.startsWith("//"))) return true;
+  try {
+    const url = new URL(value);
+    return (url.protocol === "http:" || url.protocol === "https:") && !url.username && !url.password;
+  } catch {
+    return false;
+  }
+}
+
+export function isStaticallyCallableBinding(node: AstNode): boolean {
+  if (node.type === "Identifier") return callableRootBindings.has(String(node.name));
+  if (node.type !== "MemberExpression") return false;
+  const object = nodeOf(node.object);
+  const property = nodeOf(node.property);
+  if (object?.type !== "Identifier") return false;
+  const propertyName = node.computed ? staticPropertyName(property) : String(property?.name ?? "");
+  return Boolean(propertyName && callableRootMembers[String(object.name)]?.has(propertyName));
+}
+
+export function canStaticallyProduceCallable(node: AstNode): boolean {
+  if (isStaticallyCallableBinding(node) || ["ArrowFunctionExpression", "FunctionExpression"].includes(node.type)) {
+    return true;
+  }
+  if (node.type === "ConditionalExpression") {
+    const consequent = nodeOf(node.consequent);
+    const alternate = nodeOf(node.alternate);
+    return Boolean(
+      (consequent && canStaticallyProduceCallable(consequent)) ||
+      (alternate && canStaticallyProduceCallable(alternate)),
+    );
+  }
+  if (node.type === "LogicalExpression") {
+    const left = nodeOf(node.left);
+    const right = nodeOf(node.right);
+    return Boolean((left && canStaticallyProduceCallable(left)) || (right && canStaticallyProduceCallable(right)));
+  }
+  if (node.type === "ChainExpression") {
+    const expression = nodeOf(node.expression);
+    return Boolean(expression && canStaticallyProduceCallable(expression));
+  }
+  return false;
+}
+
+function editDistance(left: string, right: string): number {
+  const previous = Array.from({ length: right.length + 1 }, (_, index) => index);
+  for (let leftIndex = 1; leftIndex <= left.length; leftIndex += 1) {
+    const current = [leftIndex];
+    for (let rightIndex = 1; rightIndex <= right.length; rightIndex += 1) {
+      current[rightIndex] = Math.min(
+        (current[rightIndex - 1] ?? 0) + 1,
+        (previous[rightIndex] ?? 0) + 1,
+        (previous[rightIndex - 1] ?? 0) + (left[leftIndex - 1] === right[rightIndex - 1] ? 0 : 1),
+      );
+    }
+    previous.splice(0, previous.length, ...current);
+  }
+  return previous[right.length] ?? Math.max(left.length, right.length);
+}
diff --git a/packages/custom-widgets/src/jsx/analyzer.ts b/packages/custom-widgets/src/jsx/analyzer.ts
new file mode 100644
index 000000000..bcbc09b66
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/analyzer.ts
@@ -0,0 +1,321 @@
+import { Parser } from "acorn";
+import jsx from "acorn-jsx";
+
+import {
+  CUSTOM_JSX_BLOCKED_PROPERTIES,
+  CUSTOM_JSX_LIMITS,
+  isBlockedCustomJsxLexicalBinding,
+  normalizeCustomJsxProperty,
+} from "./policy";
+import type { AstNode } from "./analyzer-ast";
+import { nodeOf, nodesOf, staticPropertyName } from "./analyzer-ast";
+import { createCustomJsxParseDiagnostic } from "./analyzer-diagnostics";
+import type { CustomJsxTemplateDiagnostic } from "./analyzer-diagnostics";
+import { analyzeCustomJsxElement } from "./analyzer-jsx";
+import {
+  canStaticallyProduceCallable,
+  isStaticallyCallableBinding,
+  RESERVED_LOCAL_BINDINGS,
+  ROOT_BINDINGS,
+} from "./analyzer-language";
+import {
+  CUSTOM_JSX_BINARY_OPERATORS,
+  CUSTOM_JSX_CALLBACK_METHODS,
+  CUSTOM_JSX_SAFE_VALUE_METHODS,
+} from "./safe-language-policy";
+import { isSafeRegexLiteral } from "./regex-policy";
+
+export type { CustomJsxTemplateDiagnostic } from "./analyzer-diagnostics";
+
+const JsxParser = Parser.extend(jsx());
+const requestStatusLabels = new Set(["loading", "success", "error"]);
+
+function directRequestStatusId(node: AstNode | null): string | null {
+  if (node?.type !== "MemberExpression") return null;
+  const object = nodeOf(node.object);
+  if (object?.type !== "Identifier" || object.name !== "status") return null;
+  const property = nodeOf(node.property);
+  return node.computed
+    ? (staticPropertyName(property) ?? null)
+    : String(property?.name ?? property?.value ?? "") || null;
+}
+
+function invalidRequestStatusComparison(node: AstNode) {
+  if (!["===", "==", "!==", "!="].includes(String(node.operator))) return null;
+  const left = nodeOf(node.left);
+  const right = nodeOf(node.right);
+  const leftStatus = directRequestStatusId(left);
+  const rightStatus = directRequestStatusId(right);
+  const leftLabel = left?.type === "Literal" && typeof left.value === "string" ? left.value : null;
+  const rightLabel = right?.type === "Literal" && typeof right.value === "string" ? right.value : null;
+  const requestId =
+    leftStatus && rightLabel && requestStatusLabels.has(rightLabel)
+      ? leftStatus
+      : rightStatus && leftLabel && requestStatusLabels.has(leftLabel)
+        ? rightStatus
+        : null;
+  return requestId
+    ? `INVALID_STATUS_COMPARISON: status.${requestId} is an object. Use status.${requestId}?.loading, status.${requestId}?.ok === true, or status.${requestId}?.ok === false`
+    : null;
+}
+
+export function validateCustomJsxTemplate(template: string): CustomJsxTemplateDiagnostic[] {
+  const diagnostics: CustomJsxTemplateDiagnostic[] = [];
+  let operations = 0;
+
+  const add = (node: AstNode, message: string, severity: "error" | "warning" = "error") => {
+    const line = node.loc?.start?.line ?? 1;
+    diagnostics.push({
+      severity,
+      message,
+      index: Math.max(0, (node.start ?? 2) - 2),
+      line,
+      column: Math.max(1, (node.loc?.start?.column ?? 0) + 1 - (line === 1 ? 2 : 0)),
+    });
+  };
+
+  const checkBudget = (node: AstNode, depth: number) => {
+    operations += 1;
+    if (depth > CUSTOM_JSX_LIMITS.astDepth)
+      add(node, `Template exceeds the AST depth limit (${CUSTOM_JSX_LIMITS.astDepth})`);
+    if (operations === CUSTOM_JSX_LIMITS.operations + 1) {
+      add(node, `Template exceeds the operation limit (${CUSTOM_JSX_LIMITS.operations})`);
+    }
+    return depth <= CUSTOM_JSX_LIMITS.astDepth && operations <= CUSTOM_JSX_LIMITS.operations;
+  };
+
+  let visit: (node: AstNode, depth: number, bindings: ReadonlySet<string>) => void;
+
+  const visitArrow = (node: AstNode, depth: number, bindings: ReadonlySet<string>) => {
+    if (node.async || node.generator) {
+      add(node, "CALLBACK_VALUE_NOT_ALLOWED: Async and generator callbacks are not supported");
+      return;
+    }
+    const callbackBindings = new Set(bindings);
+    const parameterNames = new Set<string>();
+    for (const parameter of nodesOf(node.params)) {
+      if (parameter.type !== "Identifier") {
+        add(parameter, "INVALID_LOCAL_DECLARATION: Callback parameters must be identifiers");
+        continue;
+      }
+      const name = String(parameter.name);
+      if (isBlockedCustomJsxLexicalBinding(name)) {
+        add(parameter, `INVALID_LOCAL_DECLARATION: '${name}' is not a safe callback parameter name`);
+        continue;
+      }
+      if (RESERVED_LOCAL_BINDINGS.has(name)) {
+        add(parameter, `RESERVED_LOCAL_BINDING: '${name}' cannot be shadowed`);
+        continue;
+      }
+      if (parameterNames.has(name)) {
+        add(parameter, `DUPLICATE_LOCAL_BINDING: '${name}' is already declared`);
+        continue;
+      }
+      parameterNames.add(name);
+      callbackBindings.add(name);
+    }
+    const body = nodeOf(node.body);
+    if (!body) return;
+    if (body.type === "BlockStatement")
+      add(body, "UNSUPPORTED_BLOCK_STATEMENT: Use one expression in authored callbacks");
+    else if (canStaticallyProduceCallable(body)) {
+      add(body, "CALLBACK_VALUE_NOT_ALLOWED: Authored callbacks cannot return callable values");
+    } else visit(body, depth + 1, callbackBindings);
+  };
+
+  visit = (node: AstNode, depth: number, bindings: ReadonlySet<string>): void => {
+    if (!checkBudget(node, depth)) return;
+
+    switch (node.type) {
+      case "Program":
+        nodesOf(node.body).forEach((child) => visit(child, depth + 1, bindings));
+        return;
+      case "ExpressionStatement": {
+        const expression = nodeOf(node.expression);
+        if (expression) visit(expression, depth + 1, bindings);
+        return;
+      }
+      case "JSXFragment":
+        nodesOf(node.children).forEach((child) => visit(child, depth + 1, bindings));
+        return;
+      case "JSXElement": {
+        analyzeCustomJsxElement(node, depth, bindings, { add, visit, visitArrow });
+        return;
+      }
+      case "JSXText":
+      case "JSXEmptyExpression":
+      case "TemplateElement":
+        return;
+      case "JSXExpressionContainer": {
+        const expression = nodeOf(node.expression);
+        if (expression && expression.type !== "JSXEmptyExpression") visit(expression, depth + 1, bindings);
+        return;
+      }
+      case "Literal":
+        if (typeof node.value === "bigint") add(node, "BIGINT_NOT_SUPPORTED: Use Number for widget values");
+        if (node.regex !== undefined && !isSafeRegexLiteral(node.regex))
+          add(node, "UNSAFE_REGEX: Use a conservative regex without repeated alternatives or variable quantifiers");
+        return;
+      case "Identifier": {
+        const name = String(node.name ?? "");
+        if (!bindings.has(name)) add(node, `Unknown binding '${name}'`);
+        return;
+      }
+      case "ArrayExpression":
+        nodesOf(node.elements).forEach((child) => {
+          const argument = child.type === "SpreadElement" ? nodeOf(child.argument) : child;
+          if (argument) visit(argument, depth + 1, bindings);
+        });
+        return;
+      case "ObjectExpression":
+        nodesOf(node.properties).forEach((property) => {
+          if (property.type === "SpreadElement") {
+            const argument = nodeOf(property.argument);
+            if (argument) visit(argument, depth + 1, bindings);
+            return;
+          }
+          if (property.type !== "Property" || property.kind !== "init" || property.method || property.shorthand) {
+            add(property, "Only explicit object properties are supported");
+            return;
+          }
+          const key = nodeOf(property.key);
+          if (property.computed && key) visit(key, depth + 1, bindings);
+          if (
+            !property.computed &&
+            key &&
+            CUSTOM_JSX_BLOCKED_PROPERTIES.has(normalizeCustomJsxProperty(key.name ?? key.value))
+          ) {
+            add(key, "Reflective object properties are not allowed");
+          }
+          const value = nodeOf(property.value);
+          if (value) visit(value, depth + 1, bindings);
+        });
+        return;
+      case "UnaryExpression":
+        if (!["!", "+", "-", "typeof"].includes(String(node.operator))) {
+          add(node, `Unary operator '${String(node.operator)}' is not supported`);
+        }
+        if (nodeOf(node.argument)) visit(node.argument as AstNode, depth + 1, bindings);
+        return;
+      case "BinaryExpression":
+      case "LogicalExpression": {
+        if (node.type === "BinaryExpression" && !CUSTOM_JSX_BINARY_OPERATORS.has(String(node.operator))) {
+          add(node, `Binary operator '${String(node.operator)}' is not supported`);
+        }
+        if (node.type === "BinaryExpression") {
+          const statusDiagnostic = invalidRequestStatusComparison(node);
+          if (statusDiagnostic) add(node, statusDiagnostic);
+        }
+        const left = nodeOf(node.left);
+        const right = nodeOf(node.right);
+        if (left) visit(left, depth + 1, bindings);
+        if (right) visit(right, depth + 1, bindings);
+        return;
+      }
+      case "ConditionalExpression": {
+        [node.test, node.consequent, node.alternate].map(nodeOf).forEach((child) => {
+          if (child) visit(child, depth + 1, bindings);
+        });
+        return;
+      }
+      case "MemberExpression": {
+        const object = nodeOf(node.object);
+        const property = nodeOf(node.property);
+        if (object) visit(object, depth + 1, bindings);
+        if (node.computed && property) visit(property, depth + 1, bindings);
+        const propertyName = node.computed
+          ? staticPropertyName(property)
+          : String(property?.name ?? property?.value ?? "");
+        if (propertyName && CUSTOM_JSX_BLOCKED_PROPERTIES.has(normalizeCustomJsxProperty(propertyName))) {
+          add(property ?? node, "Reflective property access is not allowed");
+        }
+        return;
+      }
+      case "CallExpression": {
+        const callee = nodeOf(node.callee);
+        const callArguments = nodesOf(node.arguments);
+        if (node.optional) {
+          add(node, "CALL_TARGET_NOT_ALLOWED: Optional calls are not supported");
+        }
+        if (callee?.type === "ArrowFunctionExpression") {
+          add(callee, "CALL_TARGET_NOT_ALLOWED: Inline IIFEs are not supported");
+          return;
+        }
+        if (callee) visit(callee, depth + 1, bindings);
+        const property = callee?.type === "MemberExpression" ? nodeOf(callee.property) : null;
+        const method = property?.type === "Identifier" ? String(property.name) : staticPropertyName(property);
+        if (
+          callee &&
+          !isStaticallyCallableBinding(callee) &&
+          (callee.type !== "MemberExpression" || !method || !CUSTOM_JSX_SAFE_VALUE_METHODS.has(method))
+        ) {
+          add(callee, "CALL_TARGET_NOT_ALLOWED: Only documented safe helpers and value methods can be called");
+        }
+        if (method && CUSTOM_JSX_CALLBACK_METHODS.has(method)) {
+          const callback = callArguments[0];
+          if (!callback) {
+            add(node, `CALLBACK_VALUE_NOT_ALLOWED: '${method}' requires a callback`);
+          } else if (["reduce", "sort"].includes(method) && callback.type !== "ArrowFunctionExpression") {
+            add(callback, `CALLBACK_VALUE_NOT_ALLOWED: '${method}' requires an inline arrow callback`);
+          } else if (callback.type !== "ArrowFunctionExpression" && !isStaticallyCallableBinding(callback)) {
+            add(callback, `CALLBACK_VALUE_NOT_ALLOWED: '${method}' requires an inline arrow or safe helper callback`);
+          }
+        }
+        callArguments.forEach((argument, argumentIndex) => {
+          if (argument.type === "SpreadElement") add(argument, "Spread call arguments are not supported");
+          else if (
+            argument.type === "ArrowFunctionExpression" &&
+            argumentIndex === 0 &&
+            method &&
+            CUSTOM_JSX_CALLBACK_METHODS.has(method)
+          ) {
+            visitArrow(argument, depth + 1, bindings);
+          } else if (argument.type === "ArrowFunctionExpression") {
+            add(argument, "CALLBACK_VALUE_NOT_ALLOWED: Callback arguments are only allowed in the first callback slot");
+          } else visit(argument, depth + 1, bindings);
+        });
+        return;
+      }
+      case "ArrowFunctionExpression": {
+        add(
+          node,
+          "CALLBACK_VALUE_NOT_ALLOWED: Callbacks are only allowed in safe collection methods and trusted slots",
+        );
+        return;
+      }
+      case "BlockStatement":
+        add(node, "UNSUPPORTED_BLOCK_STATEMENT: Authored callbacks must use one expression");
+        return;
+      case "AssignmentExpression":
+      case "UpdateExpression":
+      case "NewExpression":
+      case "AwaitExpression":
+      case "YieldExpression":
+        add(node, `UNSUPPORTED_BLOCK_STATEMENT: '${node.type}' is not allowed in safe expressions`);
+        return;
+      case "TemplateLiteral":
+        nodesOf(node.expressions).forEach((expression) => visit(expression, depth + 1, bindings));
+        return;
+      case "ChainExpression": {
+        const expression = nodeOf(node.expression);
+        if (expression) visit(expression, depth + 1, bindings);
+        return;
+      }
+      default:
+        add(node, `Unsupported expression '${node.type}'`);
+    }
+  };
+
+  try {
+    const program = JsxParser.parse(`<>${template}</>`, {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      locations: true,
+    }) as unknown as AstNode;
+    visit(program, 0, ROOT_BINDINGS);
+  } catch (error) {
+    diagnostics.push(createCustomJsxParseDiagnostic(template, error));
+  }
+
+  return diagnostics;
+}
diff --git a/packages/custom-widgets/src/jsx/bindings.ts b/packages/custom-widgets/src/jsx/bindings.ts
new file mode 100644
index 000000000..6f54c31de
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/bindings.ts
@@ -0,0 +1,155 @@
+import { createSafeCallable } from "./safe-bindings";
+import { SafeJsxBudgetError, SafeJsxError } from "./interpreter-foundation";
+
+export const CUSTOM_JSX_DATA_LIMITS = Object.freeze({
+  depth: 32,
+  nodes: 50_000,
+  stringLength: 200_000,
+});
+
+interface SanitizeTask {
+  value: unknown;
+  depth: number;
+  assign(value: unknown): void;
+}
+
+function sanitizeData(value: unknown): unknown {
+  let result: unknown;
+  let nodes = 0;
+  const seen = new WeakSet<object>();
+  const tasks: SanitizeTask[] = [{ value, depth: 0, assign: (sanitized) => (result = sanitized) }];
+
+  while (tasks.length > 0) {
+    const task = tasks.pop();
+    if (!task) break;
+    if (++nodes > CUSTOM_JSX_DATA_LIMITS.nodes) {
+      throw new SafeJsxBudgetError(`Response data exceeded the node limit (${CUSTOM_JSX_DATA_LIMITS.nodes})`);
+    }
+    if (task.depth > CUSTOM_JSX_DATA_LIMITS.depth) {
+      throw new SafeJsxBudgetError(`Response data exceeded the depth limit (${CUSTOM_JSX_DATA_LIMITS.depth})`);
+    }
+    if (typeof task.value === "string" && task.value.length > CUSTOM_JSX_DATA_LIMITS.stringLength) {
+      throw new SafeJsxBudgetError(
+        `Response data exceeded the string length limit (${CUSTOM_JSX_DATA_LIMITS.stringLength})`,
+      );
+    }
+    if (task.value === null || typeof task.value !== "object") {
+      task.assign(task.value);
+      continue;
+    }
+    if (seen.has(task.value)) throw new SafeJsxError("Response data must not contain circular or repeated objects");
+    seen.add(task.value);
+
+    if (Array.isArray(task.value)) {
+      if (task.value.length > CUSTOM_JSX_DATA_LIMITS.nodes - nodes) {
+        throw new SafeJsxBudgetError(`Response data exceeded the node limit (${CUSTOM_JSX_DATA_LIMITS.nodes})`);
+      }
+      const safe = Array.from<unknown>({ length: task.value.length });
+      task.assign(safe);
+      for (let index = task.value.length - 1; index >= 0; index -= 1) {
+        if (!Object.hasOwn(task.value, index)) continue;
+        tasks.push({
+          value: task.value[index],
+          depth: task.depth + 1,
+          assign: (sanitized) => (safe[index] = sanitized),
+        });
+      }
+      continue;
+    }
+
+    const entries = Object.entries(task.value);
+    if (entries.length > CUSTOM_JSX_DATA_LIMITS.nodes - nodes) {
+      throw new SafeJsxBudgetError(`Response data exceeded the node limit (${CUSTOM_JSX_DATA_LIMITS.nodes})`);
+    }
+    const safe: Record<string, unknown> = Object.create(null);
+    task.assign(safe);
+    for (let index = entries.length - 1; index >= 0; index -= 1) {
+      const [key, child] = entries[index] as [string, unknown];
+      if (["constructor", "__proto__", "prototype"].includes(key)) continue;
+      if (key.length > CUSTOM_JSX_DATA_LIMITS.stringLength) {
+        throw new SafeJsxBudgetError(
+          `Response data exceeded the string length limit (${CUSTOM_JSX_DATA_LIMITS.stringLength})`,
+        );
+      }
+      tasks.push({
+        value: child,
+        depth: task.depth + 1,
+        assign: (sanitized) => (safe[key] = sanitized),
+      });
+    }
+  }
+
+  return result;
+}
+
+const safeMath = Object.freeze(
+  Object.assign(Object.create(null) as Record<string, unknown>, {
+    round: createSafeCallable((value: number) => Math.round(value)),
+    floor: createSafeCallable((value: number) => Math.floor(value)),
+    ceil: createSafeCallable((value: number) => Math.ceil(value)),
+    abs: createSafeCallable((value: number) => Math.abs(value)),
+    min: createSafeCallable((...values: number[]) => Math.min(...values)),
+    max: createSafeCallable((...values: number[]) => Math.max(...values)),
+    pow: createSafeCallable((base: number, exponent: number) => Math.pow(base, exponent)),
+    sqrt: createSafeCallable((value: number) => Math.sqrt(value)),
+    PI: Math.PI,
+  }),
+);
+
+const safeDate = Object.freeze(
+  Object.assign(Object.create(null) as Record<string, unknown>, {
+    now: createSafeCallable(() => Date.now()),
+    create: createSafeCallable((value?: string | number) =>
+      value === undefined ? Date.now() : new Date(value).getTime(),
+    ),
+    toISOString: createSafeCallable((value: string | number) => new Date(value).toISOString()),
+    toLocaleDateString: createSafeCallable((value: string | number, locale?: string) =>
+      new Date(value).toLocaleDateString(locale ?? "en-US"),
+    ),
+    toLocaleTimeString: createSafeCallable((value: string | number, locale?: string) =>
+      new Date(value).toLocaleTimeString(locale ?? "en-US"),
+    ),
+    getTime: createSafeCallable((value: string | number) => new Date(value).getTime()),
+    getYear: createSafeCallable((value: string | number) => new Date(value).getFullYear()),
+    getMonth: createSafeCallable((value: string | number) => new Date(value).getMonth()),
+    getDay: createSafeCallable((value: string | number) => new Date(value).getUTCDay()),
+  }),
+);
+
+export function createCustomJsxBindings(apiData: unknown) {
+  const safeJson = Object.freeze(
+    Object.assign(Object.create(null) as Record<string, unknown>, {
+      stringify: createSafeCallable((value: unknown) => JSON.stringify(value)),
+    }),
+  );
+  const safeArray = Object.freeze(
+    Object.assign(Object.create(null) as Record<string, unknown>, {
+      isArray: createSafeCallable(Array.isArray),
+      from: createSafeCallable((value: ArrayLike<unknown> | Iterable<unknown>) => Array.from(value).slice(0, 2_000)),
+    }),
+  );
+  const safeObject = Object.freeze(
+    Object.assign(Object.create(null) as Record<string, unknown>, {
+      keys: createSafeCallable(Object.keys),
+      values: createSafeCallable(Object.values),
+      entries: createSafeCallable(Object.entries),
+    }),
+  );
+  return {
+    data: sanitizeData(apiData),
+    String: createSafeCallable((value: unknown) => String(value)),
+    Number: createSafeCallable((value: unknown) => Number(value)),
+    Boolean: createSafeCallable((value: unknown) => Boolean(value)),
+    Math: safeMath,
+    JSON: safeJson,
+    Array: safeArray,
+    Object: safeObject,
+    Date: safeDate,
+    parseInt: createSafeCallable((value: string, radix?: number) => parseInt(value, radix)),
+    parseFloat: createSafeCallable((value: string) => parseFloat(value)),
+    encodeURIComponent: createSafeCallable((value: string) => encodeURIComponent(value)),
+    decodeURIComponent: createSafeCallable((value: string) => decodeURIComponent(value)),
+    isNaN: createSafeCallable((value: unknown) => Number.isNaN(Number(value))),
+    isFinite: createSafeCallable((value: unknown) => Number.isFinite(Number(value))),
+  };
+}
diff --git a/packages/custom-widgets/src/jsx/collection-methods.ts b/packages/custom-widgets/src/jsx/collection-methods.ts
new file mode 100644
index 000000000..89fafee20
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/collection-methods.ts
@@ -0,0 +1,205 @@
+import { isSafeCallable } from "./safe-bindings";
+import { isInterpreterCallback, normalizedSliceIndex, numericArgument, SafeJsxError } from "./interpreter-foundation";
+import type { InterpreterCallback } from "./interpreter-foundation";
+import type { InterpreterMethodContext } from "./interpreter-method-context";
+import { callStringMethod } from "./string-methods";
+
+export function callCollectionMethod(
+  receiver: unknown,
+  method: string,
+  args: unknown[],
+  depth: number,
+  context: InterpreterMethodContext,
+): { handled: boolean; value?: unknown } {
+  if (Array.isArray(receiver)) {
+    if (method === "map" || method === "filter" || method === "flatMap") {
+      const callback = args[0];
+      if (isSafeCallable(callback)) {
+        const result: unknown[] = [];
+        for (let index = 0; index < receiver.length; index += 1) {
+          context.budget.collection();
+          const callbackResult = callback(receiver[index] as never);
+          if (method === "flatMap" && Array.isArray(callbackResult)) {
+            context.budget.collection(callbackResult.length);
+            result.push(...callbackResult);
+          } else if (method === "map" || method === "flatMap") result.push(callbackResult);
+          else if (callbackResult) result.push(receiver[index]);
+        }
+        return { handled: true, value: result };
+      }
+      if (!isInterpreterCallback(callback)) throw new SafeJsxError(`${method} requires an inline arrow callback`);
+      const result: unknown[] = [];
+      for (let index = 0; index < receiver.length; index += 1) {
+        context.budget.collection();
+        const callbackResult = context.runCallback(callback, [receiver[index], index, receiver], depth + 1);
+        if (method === "flatMap" && Array.isArray(callbackResult)) {
+          context.budget.collection(callbackResult.length);
+          result.push(...callbackResult);
+        } else if (method === "map" || method === "flatMap" || callbackResult) {
+          result.push(method === "map" || method === "flatMap" ? callbackResult : receiver[index]);
+        }
+      }
+      return { handled: true, value: result };
+    }
+    if (method === "concat") {
+      const result = [...receiver];
+      for (const value of args) {
+        if (Array.isArray(value)) {
+          context.budget.collection(value.length);
+          result.push(...value);
+        } else {
+          context.budget.collection();
+          result.push(value);
+        }
+      }
+      return { handled: true, value: result };
+    }
+    if (method === "pop") {
+      context.budget.collection();
+      return { handled: true, value: receiver.length > 0 ? receiver[receiver.length - 1] : undefined };
+    }
+    if (method === "slice") {
+      const start = normalizedSliceIndex(args[0], receiver.length, 0);
+      const end = normalizedSliceIndex(args[1], receiver.length, receiver.length);
+      const result: unknown[] = [];
+      for (let index = start; index < Math.max(start, end); index += 1) {
+        context.budget.collection();
+        result.push(receiver[index]);
+      }
+      return { handled: true, value: result };
+    }
+    if (method === "join") {
+      context.budget.collection(receiver.length);
+      const separator = String(args[0] ?? ",");
+      let result = "";
+      receiver.forEach((item, index) => {
+        result += `${index === 0 ? "" : separator}${String(item ?? "")}`;
+        context.budget.string(result);
+      });
+      return { handled: true, value: result };
+    }
+    if (method === "includes") {
+      context.budget.collection(receiver.length);
+      return { handled: true, value: receiver.some((item) => Object.is(item, args[0])) };
+    }
+    if (method === "indexOf") {
+      context.budget.collection(receiver.length);
+      return { handled: true, value: receiver.findIndex((item) => Object.is(item, args[0])) };
+    }
+    if (method === "find" || method === "findIndex" || method === "some" || method === "every") {
+      const callback = args[0];
+      const useSafe = isSafeCallable(callback);
+      if (!useSafe && !isInterpreterCallback(callback))
+        throw new SafeJsxError(`${method} requires an inline arrow callback`);
+      for (let index = 0; index < receiver.length; index += 1) {
+        context.budget.collection();
+        const result = useSafe
+          ? (callback as (...a: never[]) => unknown)(receiver[index] as never)
+          : context.runCallback(callback as InterpreterCallback, [receiver[index], index, receiver], depth + 1);
+        if (method === "find" && result) return { handled: true, value: receiver[index] };
+        if (method === "findIndex" && result) return { handled: true, value: index };
+        if (method === "some" && result) return { handled: true, value: true };
+        if (method === "every" && !result) return { handled: true, value: false };
+      }
+      const defaults: Record<string, unknown> = { find: undefined, findIndex: -1, some: false, every: true };
+      return { handled: true, value: defaults[method] };
+    }
+    if (method === "sort") {
+      const callback = args[0];
+      if (!isInterpreterCallback(callback)) throw new SafeJsxError("sort requires an inline arrow callback");
+      const copy = [...receiver];
+      copy.sort((left, right) => {
+        context.budget.collection();
+        const delta = Number(context.runCallback(callback, [left, right], depth + 1));
+        if (!Number.isFinite(delta)) return 0;
+        return delta;
+      });
+      return { handled: true, value: copy };
+    }
+    if (method === "reduce") {
+      const callback = args[0];
+      if (!isInterpreterCallback(callback)) throw new SafeJsxError("reduce requires an inline arrow callback");
+      if (receiver.length === 0 && args.length < 2) {
+        throw new SafeJsxError("Reduce of empty array with no initial value");
+      }
+      let startIndex = 0;
+      let accumulator: unknown;
+      if (args.length < 2) {
+        accumulator = receiver[0];
+        startIndex = 1;
+      } else {
+        accumulator = args[1];
+      }
+      for (let index = startIndex; index < receiver.length; index += 1) {
+        context.budget.collection();
+        accumulator = context.runCallback(callback, [accumulator, receiver[index], index, receiver], depth + 1);
+      }
+      return { handled: true, value: accumulator };
+    }
+    if (method === "at") {
+      const index = numericArgument(args[0], 0);
+      let normalizedIndex = index;
+      if (index < 0) normalizedIndex = receiver.length + index;
+      context.budget.collection();
+      const outOfBounds = normalizedIndex < 0 || normalizedIndex >= receiver.length;
+      return { handled: true, value: outOfBounds ? undefined : receiver[normalizedIndex] };
+    }
+    if (method === "flat") {
+      // ponytail: only depth=1 supported; deeper nesting requires recursive budget tracking
+      const flatDepth = numericArgument(args[0], 1);
+      if (flatDepth !== 1) throw new SafeJsxError("flat() only supports depth 1");
+      const result: unknown[] = [];
+      for (const item of receiver) {
+        context.budget.collection();
+        if (Array.isArray(item)) {
+          for (const nested of item) {
+            context.budget.collection();
+            result.push(nested);
+          }
+        } else {
+          result.push(item);
+        }
+      }
+      return { handled: true, value: result };
+    }
+    if (method === "reverse") {
+      const copy = [...receiver];
+      const result: unknown[] = [];
+      for (let index = copy.length - 1; index >= 0; index -= 1) {
+        context.budget.collection();
+        result.push(copy[index]);
+      }
+      return { handled: true, value: result };
+    }
+  }
+
+  if (typeof receiver === "string") return callStringMethod(receiver, method, args, context);
+
+  if (receiver instanceof RegExp && method === "test") {
+    const value = String(args[0] ?? "");
+    return { handled: true, value: receiver.test(value) };
+  }
+
+  if (typeof receiver === "number") {
+    if (method === "toFixed") {
+      const digits = Math.max(0, Math.min(20, numericArgument(args[0], 0)));
+      return { handled: true, value: receiver.toFixed(digits) };
+    }
+    if (method === "toPrecision") {
+      const precision = Math.max(1, Math.min(21, numericArgument(args[0], 1)));
+      return { handled: true, value: receiver.toPrecision(precision) };
+    }
+    if (method === "toLocaleString") {
+      return { handled: true, value: context.budget.string(receiver.toLocaleString()) };
+    }
+  }
+
+  if (
+    (typeof receiver === "number" || typeof receiver === "boolean" || typeof receiver === "string") &&
+    method === "toString"
+  ) {
+    return { handled: true, value: context.budget.string(String(receiver)) };
+  }
+
+  return { handled: false };
+}
diff --git a/packages/custom-widgets/src/jsx/emitter-context.ts b/packages/custom-widgets/src/jsx/emitter-context.ts
new file mode 100644
index 000000000..a0f4fa522
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/emitter-context.ts
@@ -0,0 +1,12 @@
+import type { ComponentType, ReactNode } from "react";
+
+import type { AstNode, Budget, Environment, InterpreterCallback } from "./interpreter-foundation";
+
+export interface JsxEmitterContext {
+  components: Readonly<Record<string, ComponentType<never>>>;
+  budget: Budget;
+  warnings: Set<string>;
+  evaluate(node: AstNode, environment: Environment, depth: number): unknown;
+  createCallback(node: AstNode, environment: Environment): InterpreterCallback;
+  renderCallback(callback: InterpreterCallback, args: unknown[], depth: number): ReactNode;
+}
diff --git a/packages/custom-widgets/src/jsx/index.ts b/packages/custom-widgets/src/jsx/index.ts
new file mode 100644
index 000000000..7a486b6cc
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/index.ts
@@ -0,0 +1,8 @@
+export * from "./analyzer";
+export * from "./interpreter";
+export * from "./policy";
+export * from "./safe-bindings";
+export * from "./bindings";
+export * from "./runtime-components";
+export * from "./interactive-components";
+export { sanitizeCustomJsxProps } from "./safe-properties";
diff --git a/packages/widgets/src/custom-api/jsx-interactive-components.tsx b/packages/custom-widgets/src/jsx/interactive-components.tsx
similarity index 100%
rename from packages/widgets/src/custom-api/jsx-interactive-components.tsx
rename to packages/custom-widgets/src/jsx/interactive-components.tsx
diff --git a/packages/custom-widgets/src/jsx/interpreter-callbacks.ts b/packages/custom-widgets/src/jsx/interpreter-callbacks.ts
new file mode 100644
index 000000000..6c081ca4e
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/interpreter-callbacks.ts
@@ -0,0 +1,50 @@
+import { asNode, asNodeArray, Environment, INTERPRETER_CALLBACK, SafeJsxError } from "./interpreter-foundation";
+import type { AstNode, Budget, InterpreterCallback } from "./interpreter-foundation";
+import { RESERVED_LOCAL_BINDINGS } from "./analyzer-language";
+import { isBlockedCustomJsxLexicalBinding } from "./policy";
+
+interface InterpreterCallbackContext {
+  budget: Budget;
+  evaluate(node: AstNode, environment: Environment, depth: number): unknown;
+}
+
+export function createInterpreterCallback(node: AstNode, environment: Environment): InterpreterCallback {
+  if (node.async || node.generator)
+    throw new SafeJsxError("CALLBACK_VALUE_NOT_ALLOWED: Async and generator callbacks are not supported");
+  const parameterNames = new Set<string>();
+  const params = asNodeArray(node.params, "callback parameters").map((param) => {
+    if (param.type !== "Identifier")
+      throw new SafeJsxError("INVALID_LOCAL_DECLARATION: Callback parameters must be identifiers");
+    const name = String(param.name);
+    if (isBlockedCustomJsxLexicalBinding(name) || RESERVED_LOCAL_BINDINGS.has(name))
+      throw new SafeJsxError(`INVALID_LOCAL_DECLARATION: '${name}' is not a safe callback parameter name`);
+    if (parameterNames.has(name)) throw new SafeJsxError(`DUPLICATE_LOCAL_BINDING: '${name}' is already declared`);
+    parameterNames.add(name);
+    return name;
+  });
+  const body = asNode(node.body, "callback body");
+  if (body.type === "BlockStatement")
+    throw new SafeJsxError("UNSUPPORTED_BLOCK_STATEMENT: Use one expression in authored callbacks");
+  return { kind: INTERPRETER_CALLBACK, params, body, environment };
+}
+
+export function runInterpreterCallback(
+  callback: InterpreterCallback,
+  args: unknown[],
+  depth: number,
+  context: InterpreterCallbackContext,
+): unknown {
+  context.budget.operation(depth);
+  const values: Record<string, unknown> = Object.create(null);
+  callback.params.forEach((name, index) => {
+    values[name] = args[index];
+  });
+  const result = context.evaluate(callback.body, new Environment(values, callback.environment), depth + 1);
+  if (
+    typeof result === "function" ||
+    (result !== null && typeof result === "object" && "kind" in result && result.kind === INTERPRETER_CALLBACK)
+  ) {
+    throw new SafeJsxError("CALLBACK_VALUE_NOT_ALLOWED: Authored callbacks cannot return callable values");
+  }
+  return result;
+}
diff --git a/packages/custom-widgets/src/jsx/interpreter-foundation.ts b/packages/custom-widgets/src/jsx/interpreter-foundation.ts
new file mode 100644
index 000000000..af9ca4ddc
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/interpreter-foundation.ts
@@ -0,0 +1,115 @@
+import { CUSTOM_JSX_LIMITS } from "./policy";
+
+export interface AstNode {
+  type: string;
+  start?: number;
+  end?: number;
+  [key: string]: unknown;
+}
+
+export interface EvaluationBudgets {
+  maxAstDepth: number;
+  maxOperations: number;
+  maxCollectionItems: number;
+  maxRenderedNodes: number;
+  maxStringLength: number;
+}
+
+export interface SafeJsxBudgets extends Partial<EvaluationBudgets> {}
+export const INTERPRETER_CALLBACK = Symbol("custom-jsx-interpreter-callback");
+export const DEFAULT_BUDGETS: EvaluationBudgets = {
+  maxAstDepth: CUSTOM_JSX_LIMITS.astDepth,
+  maxOperations: CUSTOM_JSX_LIMITS.operations,
+  maxCollectionItems: CUSTOM_JSX_LIMITS.collectionItems,
+  maxRenderedNodes: CUSTOM_JSX_LIMITS.renderedNodes,
+  maxStringLength: CUSTOM_JSX_LIMITS.stringLength,
+};
+
+export interface InterpreterCallback {
+  readonly kind: typeof INTERPRETER_CALLBACK;
+  readonly params: readonly string[];
+  readonly body: AstNode;
+  readonly environment: Environment;
+}
+
+export class SafeJsxError extends Error {
+  public constructor(message: string) {
+    super(message);
+    this.name = "SafeJsxError";
+  }
+}
+
+export class SafeJsxBudgetError extends SafeJsxError {
+  public constructor(message: string) {
+    super(message);
+    this.name = "SafeJsxBudgetError";
+  }
+}
+
+export class Environment {
+  public constructor(
+    private readonly values: Readonly<Record<string, unknown>>,
+    private readonly parent?: Environment,
+  ) {}
+  public get(name: string): unknown {
+    if (Object.hasOwn(this.values, name)) return this.values[name];
+    if (this.parent) return this.parent.get(name);
+    if (name === "undefined") return undefined;
+    if (name === "NaN") return Number.NaN;
+    if (name === "Infinity") return Number.POSITIVE_INFINITY;
+    throw new SafeJsxError(`Unknown binding: ${name}`);
+  }
+}
+
+export class Budget {
+  private operations = 0;
+  private collectionItems = 0;
+  private renderedNodes = 0;
+  public constructor(private readonly limits: EvaluationBudgets) {}
+  public operation(depth: number): void {
+    if (depth > this.limits.maxAstDepth)
+      throw new SafeJsxBudgetError(`Template exceeded the AST depth limit (${this.limits.maxAstDepth})`);
+    if (++this.operations > this.limits.maxOperations)
+      throw new SafeJsxBudgetError(`Template exceeded the operation limit (${this.limits.maxOperations})`);
+  }
+  public collection(count = 1): void {
+    this.collectionItems += count;
+    if (this.collectionItems > this.limits.maxCollectionItems)
+      throw new SafeJsxBudgetError(`Template exceeded the collection limit (${this.limits.maxCollectionItems})`);
+  }
+  public rendered(): void {
+    if (++this.renderedNodes > this.limits.maxRenderedNodes)
+      throw new SafeJsxBudgetError(`Template exceeded the rendered node limit (${this.limits.maxRenderedNodes})`);
+  }
+  public string(value: string): string {
+    if (value.length > this.limits.maxStringLength)
+      throw new SafeJsxBudgetError(`Template exceeded the string length limit (${this.limits.maxStringLength})`);
+    return value;
+  }
+}
+
+export function asNode(value: unknown, context: string): AstNode {
+  if (!value || typeof value !== "object" || typeof (value as { type?: unknown }).type !== "string")
+    throw new SafeJsxError(`Invalid ${context} node`);
+  return value as AstNode;
+}
+
+export function asNodeArray(value: unknown, context: string): AstNode[] {
+  if (!Array.isArray(value)) throw new SafeJsxError(`Invalid ${context}`);
+  return value.map((item) => asNode(item, context));
+}
+
+export const isInterpreterCallback = (value: unknown): value is InterpreterCallback =>
+  typeof value === "object" && value !== null && (value as { kind?: unknown }).kind === INTERPRETER_CALLBACK;
+
+export function numericArgument(value: unknown, fallback: number): number {
+  const number = value === undefined ? fallback : Number(value);
+  if (!Number.isFinite(number)) return fallback;
+  return Math.trunc(number);
+}
+
+export function normalizedSliceIndex(value: unknown, length: number, fallback: number): number {
+  const index = numericArgument(value, fallback);
+  if (index < 0) return Math.max(length + index, 0);
+  return Math.min(index, length);
+}
diff --git a/packages/custom-widgets/src/jsx/interpreter-method-context.ts b/packages/custom-widgets/src/jsx/interpreter-method-context.ts
new file mode 100644
index 000000000..75c4d177d
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/interpreter-method-context.ts
@@ -0,0 +1,6 @@
+import type { Budget, InterpreterCallback } from "./interpreter-foundation";
+
+export interface InterpreterMethodContext {
+  budget: Budget;
+  runCallback(callback: InterpreterCallback, args: unknown[], depth: number): unknown;
+}
diff --git a/packages/custom-widgets/src/jsx/interpreter-parser.ts b/packages/custom-widgets/src/jsx/interpreter-parser.ts
new file mode 100644
index 000000000..e02514f14
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/interpreter-parser.ts
@@ -0,0 +1,50 @@
+import { Parser } from "acorn";
+import jsx from "acorn-jsx";
+
+import type { AstNode } from "./interpreter-foundation";
+import { asNode, asNodeArray, SafeJsxError } from "./interpreter-foundation";
+import { CUSTOM_JSX_LIMITS } from "./policy";
+
+const JsxParser = Parser.extend(jsx());
+
+export function parseCustomJsxTemplate(template: string): AstNode {
+  if (template.length > CUSTOM_JSX_LIMITS.templateLength) {
+    throw new SafeJsxError(`Template exceeds the ${CUSTOM_JSX_LIMITS.templateLength} character limit`);
+  }
+  let program: AstNode;
+  try {
+    program = JsxParser.parse(`<>${template}</>`, {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      allowAwaitOutsideFunction: false,
+      allowReturnOutsideFunction: false,
+    }) as unknown as AstNode;
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unable to parse JSX template";
+    throw new SafeJsxError(
+      /Argument name clash/iu.test(message)
+        ? "DUPLICATE_LOCAL_BINDING: Callback parameter names must be unique"
+        : message,
+    );
+  }
+  const body = asNodeArray(program.body, "program body");
+  if (body.length !== 1 || body[0]?.type !== "ExpressionStatement") {
+    throw new SafeJsxError("Template must contain JSX only");
+  }
+  return asNode(body[0].expression, "template expression");
+}
+
+export function normalizeCustomJsxText(value: string): string {
+  const lines = value.replace(/\r/g, "").split("\n");
+  let result = "";
+  for (let index = 0; index < lines.length; index += 1) {
+    let line = lines[index] ?? "";
+    line = line.replace(/\t/g, " ");
+    if (index !== 0) line = line.replace(/^\s+/, "");
+    if (index !== lines.length - 1) line = line.replace(/\s+$/, "");
+    if (!line) continue;
+    if (result) result += " ";
+    result += line;
+  }
+  return result;
+}
diff --git a/packages/custom-widgets/src/jsx/interpreter.tsx b/packages/custom-widgets/src/jsx/interpreter.tsx
new file mode 100644
index 000000000..29e01e931
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/interpreter.tsx
@@ -0,0 +1,361 @@
+import type { ComponentType, ReactNode } from "react";
+
+import { callCollectionMethod } from "./collection-methods";
+import { staticPropertyName } from "./analyzer-ast";
+import type { JsxEmitterContext } from "./emitter-context";
+import { createInterpreterCallback, runInterpreterCallback } from "./interpreter-callbacks";
+import { emitJsxElement, emitJsxFragment } from "./jsx-emitter";
+import { isSafeCallable } from "./safe-bindings";
+import { asNode, asNodeArray, Budget, DEFAULT_BUDGETS, Environment, SafeJsxError } from "./interpreter-foundation";
+import type { AstNode, EvaluationBudgets, InterpreterCallback, SafeJsxBudgets } from "./interpreter-foundation";
+import { normalizeCustomJsxText, parseCustomJsxTemplate } from "./interpreter-parser";
+import { normalizedProperty, ownProperty } from "./safe-properties";
+import { CUSTOM_JSX_CALLBACK_METHODS } from "./safe-language-policy";
+import { isSafeRegexLiteral } from "./regex-policy";
+
+export { SafeJsxBudgetError, SafeJsxError } from "./interpreter-foundation";
+export type { SafeJsxBudgets } from "./interpreter-foundation";
+export { sanitizeCustomJsxProps } from "./safe-properties";
+
+export interface RenderSafeJsxOptions {
+  template: string;
+  components: Readonly<Record<string, ComponentType<never>>>;
+  bindings: Readonly<Record<string, unknown>>;
+  budgets?: SafeJsxBudgets;
+}
+
+export interface SafeJsxRenderResult {
+  node: ReactNode;
+  warnings: string[];
+}
+
+class Interpreter {
+  private readonly budget: Budget;
+  private readonly warnings = new Set<string>();
+
+  public constructor(
+    private readonly components: Readonly<Record<string, ComponentType<never>>>,
+    private readonly environment: Environment,
+    private readonly limits: EvaluationBudgets,
+  ) {
+    this.budget = new Budget(limits);
+  }
+
+  public render(root: AstNode): SafeJsxRenderResult {
+    return { node: this.evaluate(root, this.environment, 0) as ReactNode, warnings: [...this.warnings] };
+  }
+
+  private evaluate(node: AstNode, environment: Environment, depth: number): unknown {
+    this.budget.operation(depth);
+
+    switch (node.type) {
+      case "Literal":
+        if (node.regex !== undefined) {
+          const regex = node.regex as { pattern?: unknown; flags?: unknown };
+          if (!isSafeRegexLiteral(regex)) {
+            throw new SafeJsxError("UNSAFE_REGEX: Invalid regular expression literal");
+          }
+          return new RegExp(regex.pattern as string, regex.flags as string);
+        }
+        if (typeof node.value === "bigint")
+          throw new SafeJsxError("BIGINT_NOT_SUPPORTED: Use Number for widget values");
+        return node.value;
+      case "Identifier":
+        return environment.get(String(node.name));
+      case "JSXElement":
+        return this.evaluateJsxElement(node, environment, depth + 1);
+      case "JSXFragment":
+        return this.evaluateJsxFragment(node, environment, depth + 1);
+      case "JSXText": {
+        const text = this.budget.string(normalizeCustomJsxText(String(node.value ?? "")));
+        if (text) this.budget.rendered();
+        return text || null;
+      }
+      case "JSXExpressionContainer": {
+        const expression = asNode(node.expression, "JSX expression");
+        if (expression.type === "JSXEmptyExpression") return null;
+        const value = this.evaluate(expression, environment, depth + 1);
+        return typeof value === "string" ? this.budget.string(value) : value;
+      }
+      case "ArrayExpression":
+        return this.evaluateArray(node, environment, depth + 1);
+      case "ObjectExpression":
+        return this.evaluateObject(node, environment, depth + 1);
+      case "UnaryExpression":
+        return this.evaluateUnary(node, environment, depth + 1);
+      case "BinaryExpression":
+        return this.evaluateBinary(node, environment, depth + 1);
+      case "LogicalExpression":
+        return this.evaluateLogical(node, environment, depth + 1);
+      case "ConditionalExpression":
+        return this.evaluate(node.test as AstNode, environment, depth + 1)
+          ? this.evaluate(asNode(node.consequent, "conditional consequent"), environment, depth + 1)
+          : this.evaluate(asNode(node.alternate, "conditional alternate"), environment, depth + 1);
+      case "MemberExpression":
+        return this.evaluateMember(node, environment, depth + 1);
+      case "CallExpression":
+        return this.evaluateCall(node, environment, depth + 1);
+      case "ArrowFunctionExpression":
+        throw new SafeJsxError(
+          "CALLBACK_VALUE_NOT_ALLOWED: Callbacks are only allowed in safe collection methods and trusted slots",
+        );
+      case "TemplateLiteral":
+        return this.evaluateTemplateLiteral(node, environment, depth + 1);
+      case "ChainExpression":
+        return this.evaluate(asNode(node.expression, "chain expression"), environment, depth + 1);
+      case "AssignmentExpression":
+      case "UpdateExpression":
+      case "NewExpression":
+      case "AwaitExpression":
+      case "YieldExpression":
+        throw new SafeJsxError(`UNSUPPORTED_BLOCK_STATEMENT: '${node.type}' is not allowed in safe expressions`);
+      default:
+        throw new SafeJsxError(`Unsupported expression: ${node.type}`);
+    }
+  }
+
+  private evaluateJsxFragment(node: AstNode, environment: Environment, depth: number): ReactNode {
+    return emitJsxFragment(node, environment, depth, this.emitterContext());
+  }
+
+  private evaluateJsxElement(node: AstNode, environment: Environment, depth: number): ReactNode {
+    return emitJsxElement(node, environment, depth, this.emitterContext());
+  }
+
+  private emitterContext(): JsxEmitterContext {
+    return {
+      components: this.components,
+      budget: this.budget,
+      warnings: this.warnings,
+      evaluate: (node, environment, depth) => this.evaluate(node, environment, depth),
+      createCallback: (node, environment) => this.createCallback(node, environment),
+      renderCallback: (callback, args, depth) => this.runCallback(callback, args, depth) as ReactNode,
+    };
+  }
+
+  private evaluateArray(node: AstNode, environment: Environment, depth: number): unknown[] {
+    const result: unknown[] = [];
+    const elements = node.elements;
+    if (!Array.isArray(elements)) throw new SafeJsxError("Invalid array expression");
+    for (const elementValue of elements) {
+      if (elementValue == null) {
+        result.push(undefined);
+        continue;
+      }
+      const element = asNode(elementValue, "array element");
+      if (element.type === "SpreadElement") {
+        const spread = this.evaluate(asNode(element.argument, "array spread"), environment, depth + 1);
+        if (!Array.isArray(spread)) throw new SafeJsxError("Only arrays can be spread into arrays");
+        this.budget.collection(spread.length);
+        result.push(...spread);
+      } else {
+        this.budget.collection();
+        result.push(this.evaluate(element, environment, depth + 1));
+      }
+    }
+    return result;
+  }
+
+  private evaluateObject(node: AstNode, environment: Environment, depth: number): Record<string, unknown> {
+    const result: Record<string, unknown> = Object.create(null);
+    for (const property of asNodeArray(node.properties, "object properties")) {
+      if (property.type === "SpreadElement") {
+        const spread = this.evaluate(asNode(property.argument, "object spread"), environment, depth + 1);
+        if (!spread || typeof spread !== "object" || Array.isArray(spread)) {
+          throw new SafeJsxError("Only objects can be spread into objects");
+        }
+        for (const [key, value] of Object.entries(spread)) result[normalizedProperty(key)] = value;
+        continue;
+      }
+      if (property.type !== "Property" || property.kind !== "init" || property.method || property.shorthand) {
+        throw new SafeJsxError("Only explicit object properties are supported");
+      }
+      const keyNode = asNode(property.key, "object key");
+      const key = normalizedProperty(
+        property.computed
+          ? this.evaluate(keyNode, environment, depth + 1)
+          : keyNode.type === "Identifier"
+            ? keyNode.name
+            : keyNode.value,
+      );
+      result[key] = this.evaluate(asNode(property.value, "object value"), environment, depth + 1);
+    }
+    return result;
+  }
+
+  private evaluateUnary(node: AstNode, environment: Environment, depth: number): unknown {
+    const value = this.evaluate(asNode(node.argument, "unary argument"), environment, depth + 1);
+    switch (node.operator) {
+      case "!":
+        return !value;
+      case "+":
+        return Number(value);
+      case "-":
+        return -Number(value);
+      case "typeof":
+        return typeof value;
+      default:
+        throw new SafeJsxError(`Unsupported unary operator: ${String(node.operator)}`);
+    }
+  }
+
+  private evaluateBinary(node: AstNode, environment: Environment, depth: number): unknown {
+    const left = this.evaluate(asNode(node.left, "binary left operand"), environment, depth + 1);
+    const right = this.evaluate(asNode(node.right, "binary right operand"), environment, depth + 1);
+    switch (node.operator) {
+      case "+":
+        return typeof left === "string" || typeof right === "string"
+          ? this.budget.string(String(left) + String(right))
+          : Number(left) + Number(right);
+      case "-":
+        return Number(left) - Number(right);
+      case "*":
+        return Number(left) * Number(right);
+      case "/":
+        return Number(left) / Number(right);
+      case "%":
+        return Number(left) % Number(right);
+      case "**":
+        return Number(left) ** Number(right);
+      case "<":
+        return (left as number) < (right as number);
+      case "<=":
+        return (left as number) <= (right as number);
+      case ">":
+        return (left as number) > (right as number);
+      case ">=":
+        return (left as number) >= (right as number);
+      case "==":
+        return String(left) === String(right);
+      case "!=":
+        return String(left) !== String(right);
+      case "===":
+        return left === right;
+      case "!==":
+        return left !== right;
+      default:
+        throw new SafeJsxError(`Unsupported binary operator: ${String(node.operator)}`);
+    }
+  }
+
+  private evaluateLogical(node: AstNode, environment: Environment, depth: number): unknown {
+    const left = this.evaluate(asNode(node.left, "logical left operand"), environment, depth + 1);
+    if (node.operator === "&&") {
+      return left ? this.evaluate(asNode(node.right, "logical right operand"), environment, depth + 1) : left;
+    }
+    if (node.operator === "||") {
+      return left ? left : this.evaluate(asNode(node.right, "logical right operand"), environment, depth + 1);
+    }
+    if (node.operator === "??") {
+      return left == null ? this.evaluate(asNode(node.right, "logical right operand"), environment, depth + 1) : left;
+    }
+    throw new SafeJsxError(`Unsupported logical operator: ${String(node.operator)}`);
+  }
+
+  private memberProperty(node: AstNode, environment: Environment, depth: number): string {
+    const propertyNode = asNode(node.property, "member property");
+    return normalizedProperty(
+      node.computed
+        ? this.evaluate(propertyNode, environment, depth + 1)
+        : propertyNode.type === "Identifier"
+          ? propertyNode.name
+          : propertyNode.value,
+    );
+  }
+
+  private evaluateMember(node: AstNode, environment: Environment, depth: number): unknown {
+    const object = this.evaluate(asNode(node.object, "member object"), environment, depth + 1);
+    const property = this.memberProperty(node, environment, depth + 1);
+    return ownProperty(object, property);
+  }
+
+  private evaluateCall(node: AstNode, environment: Environment, depth: number): unknown {
+    if (node.optional) throw new SafeJsxError("Optional calls are not supported");
+    const callee = asNode(node.callee, "call target");
+    const argumentNodes = asNodeArray(node.arguments, "call arguments");
+    if (callee.type === "ArrowFunctionExpression")
+      throw new SafeJsxError("CALL_TARGET_NOT_ALLOWED: Inline IIFEs are not supported");
+    const callbackMethod =
+      callee.type === "MemberExpression"
+        ? callee.computed
+          ? staticPropertyName(asNode(callee.property, "method property"))
+          : normalizedProperty(asNode(callee.property, "method property").name)
+        : null;
+    const args = argumentNodes.map((argument) => {
+      if (argument.type === "SpreadElement") throw new SafeJsxError("Spread call arguments are not supported");
+      if (argument.type === "ArrowFunctionExpression") {
+        if (!callbackMethod || !CUSTOM_JSX_CALLBACK_METHODS.has(callbackMethod)) {
+          throw new SafeJsxError("CALLBACK_VALUE_NOT_ALLOWED: Callback argument is not allowed for this call");
+        }
+        return this.createCallback(argument, environment);
+      }
+      return this.evaluate(argument, environment, depth + 1);
+    });
+
+    if (callee.type === "MemberExpression") {
+      const receiver = this.evaluate(asNode(callee.object, "method receiver"), environment, depth + 1);
+      const method = this.memberProperty(callee, environment, depth + 1);
+      const collectionResult = this.callCollectionMethod(receiver, method, args, depth + 1);
+      if (collectionResult.handled) return collectionResult.value;
+      const callable = ownProperty(receiver, method);
+      if (!isSafeCallable(callable)) throw new SafeJsxError(`Calling method '${method}' is not allowed`);
+      return this.accountHostResult(callable(...(args as never[])));
+    }
+
+    const callable = this.evaluate(callee, environment, depth + 1);
+    if (!isSafeCallable(callable)) throw new SafeJsxError("Calling this value is not allowed");
+    return this.accountHostResult(callable(...(args as never[])));
+  }
+
+  private callCollectionMethod(
+    receiver: unknown,
+    method: string,
+    args: unknown[],
+    depth: number,
+  ): { handled: boolean; value?: unknown } {
+    return callCollectionMethod(receiver, method, args, depth, {
+      budget: this.budget,
+      runCallback: (callback, callbackArgs, callbackDepth) => this.runCallback(callback, callbackArgs, callbackDepth),
+    });
+  }
+
+  private accountHostResult(value: unknown): unknown {
+    if (typeof value === "string") return this.budget.string(value);
+    if (Array.isArray(value)) this.budget.collection(value.length);
+    return value;
+  }
+
+  private createCallback(node: AstNode, environment: Environment): InterpreterCallback {
+    return createInterpreterCallback(node, environment);
+  }
+
+  private runCallback(callback: InterpreterCallback, args: unknown[], depth: number): unknown {
+    return runInterpreterCallback(callback, args, depth, {
+      budget: this.budget,
+      evaluate: (node, environment, callbackDepth) => this.evaluate(node, environment, callbackDepth),
+    });
+  }
+
+  private evaluateTemplateLiteral(node: AstNode, environment: Environment, depth: number): string {
+    const quasis = asNodeArray(node.quasis, "template literal parts");
+    const expressions = asNodeArray(node.expressions, "template literal expressions");
+    let result = "";
+    quasis.forEach((quasi, index) => {
+      const value = quasi.value;
+      if (!value || typeof value !== "object") throw new SafeJsxError("Invalid template literal part");
+      result += String((value as { cooked?: unknown }).cooked ?? "");
+      const expression = expressions[index];
+      if (expression) result += String(this.evaluate(expression, environment, depth + 1));
+    });
+    return this.budget.string(result);
+  }
+}
+
+export function renderSafeJsx({ template, components, bindings, budgets }: RenderSafeJsxOptions): SafeJsxRenderResult {
+  const limits: EvaluationBudgets = { ...DEFAULT_BUDGETS, ...budgets };
+  for (const [name, value] of Object.entries(limits)) {
+    if (!Number.isSafeInteger(value) || value <= 0) throw new SafeJsxError(`Invalid interpreter budget: ${name}`);
+  }
+  const root = parseCustomJsxTemplate(template);
+  return new Interpreter(components, new Environment(bindings), limits).render(root);
+}
diff --git a/packages/custom-widgets/src/jsx/jsx-emitter.tsx b/packages/custom-widgets/src/jsx/jsx-emitter.tsx
new file mode 100644
index 000000000..8191b72f9
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/jsx-emitter.tsx
@@ -0,0 +1,87 @@
+import type { ReactNode } from "react";
+import { createElement, Fragment } from "react";
+
+import { asNode, asNodeArray, SafeJsxError } from "./interpreter-foundation";
+import type { AstNode, Environment } from "./interpreter-foundation";
+import type { JsxEmitterContext } from "./emitter-context";
+import { resolveCustomJsxComponentName } from "../core/component-registry";
+import { diagnoseCustomJsxProps, normalizedProperty, sanitizeCustomJsxProps } from "./safe-properties";
+import { CUSTOM_JSX_BLOCKED_TAGS } from "./policy";
+
+export function emitJsxFragment(
+  node: AstNode,
+  environment: Environment,
+  depth: number,
+  context: JsxEmitterContext,
+): ReactNode {
+  const children = asNodeArray(node.children, "fragment children").map((child) =>
+    context.evaluate(child, environment, depth + 1),
+  );
+  context.budget.rendered();
+  return createElement(Fragment, null, ...(children as ReactNode[]));
+}
+
+export function emitJsxElement(
+  node: AstNode,
+  environment: Environment,
+  depth: number,
+  context: JsxEmitterContext,
+): ReactNode {
+  const opening = asNode(node.openingElement, "JSX opening element");
+  const tag = jsxTagName(asNode(opening.name, "JSX tag"));
+  const resolvedTag = resolveCustomJsxComponentName(tag);
+  if (CUSTOM_JSX_BLOCKED_TAGS.has(tag.toLowerCase())) {
+    context.warnings.add(`Blocked element: ${tag}`);
+    return null;
+  }
+  const component = context.components[resolvedTag];
+  if (!component) {
+    context.warnings.add(`Unknown or unavailable component: ${tag}`);
+    return null;
+  }
+  const rawProps: Record<string, unknown> = {};
+  for (const attribute of asNodeArray(opening.attributes, "JSX attributes")) {
+    if (attribute.type === "JSXSpreadAttribute") {
+      const spread = context.evaluate(asNode(attribute.argument, "spread attribute"), environment, depth + 1);
+      if (spread && typeof spread === "object" && !Array.isArray(spread)) {
+        if (Object.hasOwn(spread, "bind")) {
+          throw new SafeJsxError("BIND_SPREAD_NOT_ALLOWED: The bind prop must be an explicit literal JSX attribute");
+        }
+        Object.assign(rawProps, spread);
+      }
+      continue;
+    }
+    if (attribute.type !== "JSXAttribute") throw new SafeJsxError(`Unsupported JSX attribute: ${attribute.type}`);
+    const nameNode = asNode(attribute.name, "attribute name");
+    if (nameNode.type !== "JSXIdentifier") throw new SafeJsxError("Namespaced JSX attributes are not supported");
+    const rawName = String(nameNode.name);
+    // `bind` is a safe declarative JSX prop even though reflective `.bind` access is blocked by the interpreter.
+    const name = rawName === "bind" ? rawName : normalizedProperty(rawName);
+    if (attribute.value == null) rawProps[name] = true;
+    else {
+      const value = asNode(attribute.value, "attribute value");
+      rawProps[name] = value.type === "Literal" ? value.value : context.evaluate(value, environment, depth + 1);
+    }
+  }
+  const children = asNodeArray(node.children, "JSX children").map((child) => {
+    const expression =
+      child.type === "JSXExpressionContainer" ? asNode(child.expression, "JSX child expression") : null;
+    if (resolvedTag === "SubFetch" && expression?.type === "ArrowFunctionExpression") {
+      const callback = context.createCallback(expression, environment);
+      return (value: unknown) => context.renderCallback(callback, [value], depth + 1);
+    }
+    return context.evaluate(child, environment, depth + 1);
+  });
+  diagnoseCustomJsxProps(rawProps, resolvedTag).forEach((diagnostic) => context.warnings.add(diagnostic));
+  const props = sanitizeCustomJsxProps(rawProps, resolvedTag);
+  context.budget.rendered();
+  return createElement(component, props as never, ...(children as ReactNode[]));
+}
+
+function jsxTagName(node: AstNode): string {
+  if (node.type === "JSXIdentifier") return String(node.name);
+  if (node.type === "JSXMemberExpression") {
+    return `${jsxTagName(asNode(node.object, "JSX member object"))}.${jsxTagName(asNode(node.property, "JSX member property"))}`;
+  }
+  throw new SafeJsxError(`Unsupported JSX tag: ${node.type}`);
+}
diff --git a/packages/custom-widgets/src/jsx/policy.ts b/packages/custom-widgets/src/jsx/policy.ts
new file mode 100644
index 000000000..859b33584
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/policy.ts
@@ -0,0 +1,121 @@
+export const CUSTOM_JSX_LIMITS = Object.freeze({
+  templateLength: 50_000,
+  astDepth: 64,
+  operations: 25_000,
+  collectionItems: 4_000,
+  renderedNodes: 10_000,
+  stringLength: 200_000,
+});
+
+export const CUSTOM_JSX_BINDING_IDENTIFIER_PATTERN = /^[A-Za-z][A-Za-z0-9_-]*$/u;
+
+export const CUSTOM_JSX_BLOCKED_PROPERTIES: ReadonlySet<string> = new Set([
+  "__proto__",
+  "apply",
+  "arguments",
+  "bind",
+  "call",
+  "callee",
+  "caller",
+  "constructor",
+  "prototype",
+]);
+
+export const CUSTOM_JSX_BLOCKED_PROPS: ReadonlySet<string> = new Set([
+  "autoFocus",
+  "children",
+  "className",
+  "classNames",
+  "classes",
+  "component",
+  "contentEditable",
+  "dangerouslySetInnerHTML",
+  "form",
+  "formAction",
+  "formEncType",
+  "formMethod",
+  "formNoValidate",
+  "formTarget",
+  "innerRef",
+  "ping",
+  "popover",
+  "popoverTarget",
+  "popoverTargetAction",
+  "portalProps",
+  "ref",
+  "renderRoot",
+  "srcDoc",
+  "suppressContentEditableWarning",
+  "suppressHydrationWarning",
+  "withinPortal",
+]);
+
+export const CUSTOM_JSX_BLOCKED_TAGS: ReadonlySet<string> = new Set([
+  "base",
+  "embed",
+  "form",
+  "iframe",
+  "link",
+  "meta",
+  "object",
+  "script",
+  "style",
+]);
+
+export const CUSTOM_JSX_URL_PROPS: ReadonlySet<string> = new Set([
+  "backgroundImage",
+  "fallbackSrc",
+  "href",
+  "image",
+  "poster",
+  "src",
+]);
+
+export const CUSTOM_JSX_BLOCKED_STYLE_KEYS: ReadonlySet<string> = new Set([
+  "backdropFilter",
+  "behavior",
+  "bottom",
+  "clipPath",
+  "content",
+  "filter",
+  "inset",
+  "left",
+  "mask",
+  "pointerEvents",
+  "pos",
+  "position",
+  "right",
+  "top",
+  "zIndex",
+]);
+
+const CUSTOM_JSX_BLOCKED_POSITION_PROPS: ReadonlySet<string> = new Set([
+  "bottom",
+  "inset",
+  "left",
+  "pos",
+  "right",
+  "top",
+  "zIndex",
+]);
+
+export function normalizeCustomJsxProperty(value: unknown): string {
+  return String(value ?? "")
+    .normalize("NFKC")
+    .toLowerCase();
+}
+
+export function isBlockedCustomJsxLexicalBinding(name: string): boolean {
+  return CUSTOM_JSX_BLOCKED_PROPERTIES.has(normalizeCustomJsxProperty(name));
+}
+
+export function isBlockedCustomJsxProp(name: string): boolean {
+  return (
+    /^on/iu.test(name) ||
+    name.startsWith("__") ||
+    /(?:Ref|^ref[A-Z])/u.test(name) ||
+    CUSTOM_JSX_BLOCKED_PROPS.has(name) ||
+    CUSTOM_JSX_BLOCKED_POSITION_PROPS.has(name) ||
+    (name !== "bind" && CUSTOM_JSX_BLOCKED_PROPERTIES.has(normalizeCustomJsxProperty(name)))
+  );
+}
diff --git a/packages/custom-widgets/src/jsx/regex-policy.ts b/packages/custom-widgets/src/jsx/regex-policy.ts
new file mode 100644
index 000000000..0505c8046
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/regex-policy.ts
@@ -0,0 +1,144 @@
+interface RegexGroupState {
+  atomCount: number;
+  containsAlternation: boolean;
+  containsQuantifier: boolean;
+}
+
+interface RegexQuantifier {
+  nextIndex: number;
+  variable: boolean;
+}
+
+const MAX_REGEX_PATTERN_LENGTH = 128;
+const MAX_EXACT_REPETITION = 1_000;
+
+/**
+ * JavaScript's regular-expression engine can backtrack exponentially. Keep authored
+ * expressions in a deliberately small, linear-time subset: no lookarounds or
+ * backreferences, no repeated alternatives/groups, and at most one quantifier that
+ * can consume a variable number of characters in the whole expression.
+ */
+export function isSafeRegexLiteral(regex: unknown): boolean {
+  if (!regex || typeof regex !== "object") return false;
+  const { pattern, flags } = regex as { pattern?: unknown; flags?: unknown };
+  if (
+    typeof pattern !== "string" ||
+    pattern.length > MAX_REGEX_PATTERN_LENGTH ||
+    typeof flags !== "string" ||
+    /[^gimsu]/u.test(flags)
+  ) {
+    return false;
+  }
+  return isSafeRegexPattern(pattern);
+}
+
+function isSafeRegexPattern(pattern: string): boolean {
+  const groups: RegexGroupState[] = [createGroupState()];
+  let variableQuantifiers = 0;
+  let index = 0;
+
+  const consumeAtom = (nested?: RegexGroupState): boolean => {
+    const parent = groups.at(-1);
+    if (!parent) return false;
+    parent.atomCount += 1;
+    if (nested) {
+      parent.containsAlternation ||= nested.containsAlternation;
+      parent.containsQuantifier ||= nested.containsQuantifier;
+    }
+    const quantifier = readQuantifier(pattern, index);
+    if (!quantifier) return true;
+    if (quantifier.nextIndex > pattern.length) return false;
+    if (nested && (nested.atomCount === 0 || nested.containsAlternation || nested.containsQuantifier)) return false;
+    parent.containsQuantifier = true;
+    if (quantifier.variable && ++variableQuantifiers > 1) return false;
+    index = quantifier.nextIndex;
+    return true;
+  };
+
+  while (index < pattern.length) {
+    const character = pattern[index];
+    if (character === "\\") {
+      const escaped = pattern[index + 1];
+      if (escaped === undefined || /[1-9k]/u.test(escaped)) return false;
+      index += 2;
+      if (!consumeAtom()) return false;
+      continue;
+    }
+    if (character === "[") {
+      index += 1;
+      let closed = false;
+      while (index < pattern.length) {
+        if (pattern[index] === "\\") index += 2;
+        else {
+          const classCharacter = pattern[index++];
+          if (classCharacter === "]") {
+            closed = true;
+            break;
+          }
+        }
+      }
+      if (!closed || !consumeAtom()) return false;
+      continue;
+    }
+    if (character === "(") {
+      if (pattern[index + 1] === "?") return false;
+      groups.push(createGroupState());
+      index += 1;
+      continue;
+    }
+    if (character === ")") {
+      if (groups.length === 1) return false;
+      const nested = groups.pop();
+      index += 1;
+      if (!nested || !consumeAtom(nested)) return false;
+      continue;
+    }
+    if (character === "|") {
+      const current = groups.at(-1);
+      if (!current) return false;
+      current.containsAlternation = true;
+      index += 1;
+      continue;
+    }
+    if (character === "^" || character === "$") {
+      index += 1;
+      continue;
+    }
+    if (character === "*" || character === "+" || character === "?" || character === "{") {
+      // A valid quantifier is consumed with its atom. Reaching one here means it is
+      // malformed or is an unsupported literal brace construct.
+      return false;
+    }
+    index += 1;
+    if (!consumeAtom()) return false;
+  }
+
+  return groups.length === 1;
+}
+
+function createGroupState(): RegexGroupState {
+  return { atomCount: 0, containsAlternation: false, containsQuantifier: false };
+}
+
+function readQuantifier(pattern: string, index: number): RegexQuantifier | null {
+  const character = pattern[index];
+  if (character === "*" || character === "+" || character === "?") {
+    const nextIndex = pattern[index + 1] === "?" ? index + 2 : index + 1;
+    return { nextIndex, variable: true };
+  }
+  if (character !== "{") return null;
+  const match = /^\{(\d+)(?:,(\d*))?\}/u.exec(pattern.slice(index));
+  if (!match) return null;
+  const minimum = Number(match[1]);
+  const maximum = match[2] === undefined || match[2] === "" ? undefined : Number(match[2]);
+  if (
+    !Number.isSafeInteger(minimum) ||
+    minimum > MAX_EXACT_REPETITION ||
+    (maximum !== undefined && (!Number.isSafeInteger(maximum) || maximum > MAX_EXACT_REPETITION))
+  ) {
+    return { nextIndex: pattern.length + 1, variable: true };
+  }
+  let nextIndex = index + match[0].length;
+  if (pattern[nextIndex] === "?") nextIndex += 1;
+  return { nextIndex, variable: match[2] !== undefined && maximum !== minimum };
+}
diff --git a/packages/custom-widgets/src/jsx/runtime-component-policy.ts b/packages/custom-widgets/src/jsx/runtime-component-policy.ts
new file mode 100644
index 000000000..1fbfbb9a5
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/runtime-component-policy.ts
@@ -0,0 +1,28 @@
+export function isSafeCustomJsxUrl(value: unknown) {
+  if (typeof value !== "string") return false;
+  if (value.startsWith("#")) return true;
+  if (value.startsWith("/") && !value.startsWith("//")) return true;
+  try {
+    const url = new URL(value);
+    return (url.protocol === "http:" || url.protocol === "https:") && !url.username && !url.password;
+  } catch {
+    return false;
+  }
+}
+
+export function getScopedCustomJsxControlName(scopeId: string, name: string) {
+  const safeScope = scopeId.replaceAll(/[^A-Za-z0-9_-]/gu, "_");
+  const safeName = encodeURIComponent(name).replaceAll("%", "_");
+  return `custom-widget-${safeScope}-${safeName}`;
+}
+
+export function getInvalidCustomJsxPropValueReason(componentName: string, propName: string, value: unknown) {
+  if (
+    ["DateTimePicker", "InlineDateTimePicker"].includes(componentName) &&
+    propName === "type" &&
+    ![undefined, "default", "range"].includes(value as undefined | string)
+  ) {
+    return `${componentName}.type supports only 'default' or 'range'`;
+  }
+  return null;
+}
diff --git a/packages/custom-widgets/src/jsx/runtime-components.tsx b/packages/custom-widgets/src/jsx/runtime-components.tsx
new file mode 100644
index 000000000..414afb0c5
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/runtime-components.tsx
@@ -0,0 +1,282 @@
+import type { ComponentType, ReactNode } from "react";
+import { createContext, createElement, useContext, useEffect, useId, useRef, useState } from "react";
+import * as Core from "@mantine/core";
+import * as Charts from "@mantine/charts";
+import * as Dates from "@mantine/dates";
+
+import {
+  customJsxBindableComponentNames,
+  enabledCustomJsxComponents,
+  getCustomJsxBindingType,
+} from "../core/component-registry";
+import type { CustomJsxBindingType } from "../core/component-registry";
+import { ActionButton, ToggleSwitch } from "../runtime/actions";
+import { SubData } from "../runtime/data";
+import { RefreshButton } from "../runtime/refresh-button";
+import { SubFetch } from "../runtime/sub-fetch";
+import { Collapsible, PaginatedList, StatBar, TabPanel, TabsContainer, TypeBadge } from "./interactive-components";
+import { getScopedCustomJsxControlName, isSafeCustomJsxUrl } from "./runtime-component-policy";
+import { sanitizeCustomJsxProps } from "./safe-properties";
+
+type Namespace = Readonly<Record<string, unknown>>;
+
+function resolveExport(namespace: Namespace, name: string): ComponentType<never> | undefined {
+  let value: unknown = namespace;
+  for (const segment of name.split(".")) {
+    if (!value || (typeof value !== "object" && typeof value !== "function") || !Object.hasOwn(value, segment)) {
+      return undefined;
+    }
+    value = (value as Record<string, unknown>)[segment];
+  }
+  return typeof value === "function" || (typeof value === "object" && value !== null)
+    ? (value as ComponentType<never>)
+    : undefined;
+}
+
+export type WidgetInputValue = string | number | boolean | string[] | number[];
+export type WidgetInputType = CustomJsxBindingType;
+interface CustomJsxInputsContextValue {
+  scopeId: string;
+  inputs: Record<string, WidgetInputValue>;
+  inputTypes: Record<string, WidgetInputType>;
+  registerInput(name: string, type: WidgetInputType, initialValue: WidgetInputValue): void;
+  setInputValue(name: string, type: WidgetInputType, value: WidgetInputValue): void;
+}
+
+const CustomJsxInputsContext = createContext<CustomJsxInputsContextValue | null>(null);
+
+export function CustomJsxInputsProvider({
+  children,
+  scopeId,
+  inputs,
+  inputTypes,
+  registerInput,
+  setInputValue,
+}: CustomJsxInputsContextValue & { children: ReactNode }) {
+  return (
+    <CustomJsxInputsContext.Provider value={{ scopeId, inputs, inputTypes, registerInput, setInputValue }}>
+      {children}
+    </CustomJsxInputsContext.Provider>
+  );
+}
+
+const checkedComponents = new Set(["Checkbox", "Switch"]);
+const openedComponents = new Set(["Menu", "Popover"]);
+const activeComponents = new Set(["Stepper"]);
+const comboboxComponents = new Set(["Autocomplete", "MultiSelect", "Select", "TagsInput", "TreeSelect"]);
+const popoverInputComponents = new Set([
+  "ColorInput",
+  "DateInput",
+  "DatePickerInput",
+  "DateTimePicker",
+  "MonthPickerInput",
+  "TimePicker",
+  "YearPickerInput",
+]);
+const modalPickerComponents = new Set(["DatePickerInput", "DateTimePicker", "MonthPickerInput", "YearPickerInput"]);
+const namedRadioComponents = new Set(["Radio", "Radio.Card", "Radio.Group", "RadioCard", "RadioGroup"]);
+const buttonRootComponents = new Set(["ActionIcon", "Burger", "Button", "CloseButton", "UnstyledButton"]);
+
+function extractEventValue(value: unknown, checked: boolean): WidgetInputValue | null {
+  if (value && typeof value === "object" && "currentTarget" in value) {
+    const target = (value as { currentTarget?: { checked?: unknown; value?: unknown } }).currentTarget;
+    const result = checked ? target?.checked : target?.value;
+    return typeof result === "string" || typeof result === "number" || typeof result === "boolean" ? result : null;
+  }
+  if (Array.isArray(value) && value.every((entry) => typeof entry === "string")) return value;
+  if (Array.isArray(value) && value.every((entry) => typeof entry === "string" || entry === null)) {
+    return value.filter((entry): entry is string => typeof entry === "string");
+  }
+  if (Array.isArray(value) && value.every((entry) => typeof entry === "number")) return value;
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null
+    ? value
+    : null;
+}
+
+function useBoundProps(componentName: string, props: Record<string, unknown>): Record<string, unknown> {
+  const detachedScopeId = useId();
+  const binding = typeof props.bind === "string" ? props.bind : undefined;
+  const context = useContext(CustomJsxInputsContext);
+  const sanitized = sanitizeCustomJsxProps(props, componentName);
+  if (namedRadioComponents.has(componentName) && typeof sanitized.name === "string") {
+    sanitized.name = getScopedCustomJsxControlName(context?.scopeId ?? detachedScopeId, sanitized.name);
+  }
+  delete sanitized.bind;
+  const inputType = getCustomJsxBindingType(componentName, sanitized);
+  const initialValue = getInitialInputValue(inputType, sanitized);
+  const isBound = Boolean(binding && context && inputType && customJsxBindableComponentNames.has(componentName));
+  useEffect(() => {
+    if (isBound && binding && context && inputType) context.registerInput(binding, inputType, initialValue);
+  }, [binding, context, initialValue, inputType, isBound]);
+  if (!isBound || !binding || !context || !inputType) return sanitized;
+  delete sanitized.defaultValue;
+  delete sanitized.defaultChecked;
+  const currentValue = context.inputs[binding] ?? initialValue;
+
+  const update = (value: unknown, checked = false) => {
+    const extracted = extractEventValue(value, checked);
+    context.setInputValue(binding, inputType, extracted ?? emptyInputValue(inputType));
+  };
+  if (checkedComponents.has(componentName)) {
+    return {
+      ...sanitized,
+      checked: Boolean(currentValue),
+      onChange: (event: unknown) => update(event, true),
+    };
+  }
+  if (openedComponents.has(componentName)) {
+    return { ...sanitized, opened: Boolean(currentValue), onChange: update, withinPortal: false };
+  }
+  if (activeComponents.has(componentName)) {
+    return { ...sanitized, active: Number(currentValue), onStepClick: update };
+  }
+  return { ...sanitized, value: currentValue, onChange: update };
+}
+
+function getInitialInputValue(type: WidgetInputType | null, props: Record<string, unknown>): WidgetInputValue {
+  if (!type) return "";
+  const candidate = type === "boolean" ? props.defaultChecked : props.defaultValue;
+  if (type === "boolean" && typeof candidate === "boolean") return candidate;
+  if (type === "number" && typeof candidate === "number") return candidate;
+  if (type === "string" && typeof candidate === "string") return candidate;
+  if (type === "string[]" && Array.isArray(candidate) && candidate.every((item) => typeof item === "string"))
+    return candidate;
+  if (type === "number[]" && Array.isArray(candidate) && candidate.every((item) => typeof item === "number"))
+    return candidate;
+  return emptyInputValue(type);
+}
+
+function emptyInputValue(type: WidgetInputType): WidgetInputValue {
+  if (type.endsWith("[]")) return [];
+  if (type === "number") return 0;
+  if (type === "boolean") return false;
+  return "";
+}
+
+function wrap(componentName: string, component: ComponentType<never>, additions: Record<string, unknown> = {}) {
+  return function SafeComponent(props: Record<string, unknown>) {
+    const bound = useBoundProps(componentName, props);
+    const scoped = { ...bound, ...additions };
+    if (comboboxComponents.has(componentName)) scoped.comboboxProps = scopeOverlayProps(bound.comboboxProps);
+    if (popoverInputComponents.has(componentName)) scoped.popoverProps = scopeOverlayProps(bound.popoverProps);
+    return createElement(component, scoped as never, props.children as ReactNode);
+  };
+}
+
+function scopeOverlayProps(value: unknown) {
+  const candidate =
+    value !== null && typeof value === "object" && !Array.isArray(value)
+      ? sanitizeCustomJsxProps(value as Record<string, unknown>)
+      : {};
+  return { ...candidate, withinPortal: false };
+}
+
+function SafeLink({ component, props }: { component: ComponentType<never>; props: Record<string, unknown> }) {
+  const sanitized = sanitizeCustomJsxProps(props);
+  const target = sanitized.target === "_blank" || sanitized.target === "_self" ? sanitized.target : undefined;
+  return createElement(
+    component,
+    {
+      ...sanitized,
+      href: isSafeCustomJsxUrl(props.href) ? props.href : undefined,
+      target,
+      rel: target === "_blank" ? "noopener noreferrer" : sanitized.rel,
+    } as never,
+    props.children as ReactNode,
+  );
+}
+
+function createCopyButton(labels: { copy: string; copied: string }) {
+  return function SafeCopyButton({ value }: { value?: string; children?: ReactNode }) {
+    const [copied, setCopied] = useState(false);
+    const timer = useRef<ReturnType<typeof setTimeout>>(undefined);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const copy = async () => {
+      if (!value) return;
+      try {
+        await navigator.clipboard.writeText(value);
+        setCopied(true);
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setCopied(false), 2_000);
+      } catch {
+        setCopied(false);
+      }
+    };
+    return (
+      <Core.Button
+        size="xs"
+        variant={copied ? "filled" : "light"}
+        color={copied ? "teal" : "blue"}
+        onClick={() => void copy()}
+      >
+        {copied ? labels.copied : labels.copy}
+      </Core.Button>
+    );
+  };
+}
+
+export interface CustomJsxComponentAdapters {
+  TablerIcon: ComponentType<never>;
+  copyLabels: { copy: string; copied: string };
+}
+
+export function createCustomJsxComponents(adapters: CustomJsxComponentAdapters): Record<string, ComponentType<never>> {
+  const namespaces: Record<string, Namespace> = {
+    "@mantine/core": Core as unknown as Namespace,
+    "@mantine/charts": Charts as unknown as Namespace,
+    "@mantine/dates": Dates as unknown as Namespace,
+  };
+  const components: Record<string, ComponentType<never>> = {};
+  for (const descriptor of enabledCustomJsxComponents) {
+    const namespace = namespaces[descriptor.package];
+    const component = namespace ? resolveExport(namespace, descriptor.name) : undefined;
+    if (component) {
+      const additions: Record<string, unknown> = {};
+      if (
+        ["HoverCard", "Menu", "Popover", "Tooltip", "Tooltip.Floating", "TooltipFloating"].includes(descriptor.name)
+      ) {
+        additions.withinPortal = false;
+      }
+      if (modalPickerComponents.has(descriptor.name)) additions.dropdownType = "popover";
+      if (buttonRootComponents.has(descriptor.name)) additions.type = "button";
+      components[descriptor.name] = wrap(descriptor.name, component, additions);
+    }
+  }
+  const core = Core as unknown as Namespace;
+  for (const name of [
+    "Notification",
+    "LoadingOverlay",
+    "Overlay",
+    "Breadcrumbs",
+    "Stepper",
+    "Tree",
+    "Button",
+    "ActionIcon",
+    "Burger",
+    "CloseButton",
+    "Chip",
+  ] as const) {
+    const component = resolveExport(core, name);
+    if (component) components[name] = wrap(name, component, buttonRootComponents.has(name) ? { type: "button" } : {});
+  }
+  const anchor = resolveExport(core, "Anchor");
+  const navLink = resolveExport(core, "NavLink");
+  if (anchor) components.Anchor = (props) => <SafeLink component={anchor} props={props} />;
+  if (navLink) components.NavLink = (props) => <SafeLink component={navLink} props={props} />;
+  Object.assign(components, {
+    CopyButton: createCopyButton(adapters.copyLabels),
+    PaginatedList,
+    TabsContainer,
+    TabPanel,
+    Collapsible,
+    StatBar,
+    TypeBadge,
+    TablerIcon: adapters.TablerIcon,
+    SubFetch,
+    SubData,
+    ActionButton,
+    ToggleSwitch,
+    RefreshButton,
+  });
+  return components;
+}
diff --git a/packages/custom-widgets/src/jsx/safe-bindings.ts b/packages/custom-widgets/src/jsx/safe-bindings.ts
new file mode 100644
index 000000000..18bf58151
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/safe-bindings.ts
@@ -0,0 +1,16 @@
+const safeCallables = new WeakSet<(...args: never[]) => unknown>();
+
+/**
+ * Marks a host function as callable by the Custom JSX interpreter.
+ *
+ * The interpreter never calls an arbitrary function obtained from data or a
+ * prototype. Host helpers must opt in through this module instead.
+ */
+export function createSafeCallable<T extends (...args: never[]) => unknown>(callable: T): T {
+  safeCallables.add(callable);
+  return callable;
+}
+
+export function isSafeCallable(value: unknown): value is (...args: never[]) => unknown {
+  return typeof value === "function" && safeCallables.has(value as (...args: never[]) => unknown);
+}
diff --git a/packages/custom-widgets/src/jsx/safe-language-policy.ts b/packages/custom-widgets/src/jsx/safe-language-policy.ts
new file mode 100644
index 000000000..41c65c82f
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/safe-language-policy.ts
@@ -0,0 +1,66 @@
+export const CUSTOM_JSX_BINARY_OPERATORS: ReadonlySet<string> = new Set([
+  "+",
+  "-",
+  "*",
+  "/",
+  "%",
+  "**",
+  "<",
+  "<=",
+  ">",
+  ">=",
+  "==",
+  "!=",
+  "===",
+  "!==",
+]);
+
+export const CUSTOM_JSX_CALLBACK_METHODS: ReadonlySet<string> = new Set([
+  "every",
+  "filter",
+  "find",
+  "findIndex",
+  "flatMap",
+  "map",
+  "reduce",
+  "some",
+  "sort",
+]);
+
+export const CUSTOM_JSX_SAFE_VALUE_METHODS: ReadonlySet<string> = new Set([
+  ...CUSTOM_JSX_CALLBACK_METHODS,
+  "at",
+  "charAt",
+  "concat",
+  "endsWith",
+  "flat",
+  "flatMap",
+  "includes",
+  "indexOf",
+  "join",
+  "lastIndexOf",
+  "localeCompare",
+  "match",
+  "padEnd",
+  "padStart",
+  "pop",
+  "repeat",
+  "replace",
+  "replaceAll",
+  "reverse",
+  "slice",
+  "search",
+  "split",
+  "startsWith",
+  "substring",
+  "toFixed",
+  "toLocaleString",
+  "toLowerCase",
+  "toPrecision",
+  "toString",
+  "toUpperCase",
+  "trim",
+  "trimEnd",
+  "trimStart",
+  "test",
+]);
diff --git a/packages/custom-widgets/src/jsx/safe-properties.ts b/packages/custom-widgets/src/jsx/safe-properties.ts
new file mode 100644
index 000000000..525e6c916
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/safe-properties.ts
@@ -0,0 +1,202 @@
+import { isValidElement } from "react";
+
+import { isInterpreterCallback, SafeJsxError } from "./interpreter-foundation";
+import { customJsxComponentByName } from "../core/component-registry";
+import { getInvalidCustomJsxPropValueReason } from "./runtime-component-policy";
+import {
+  CUSTOM_JSX_BLOCKED_PROPERTIES,
+  CUSTOM_JSX_BLOCKED_STYLE_KEYS,
+  CUSTOM_JSX_URL_PROPS,
+  isBlockedCustomJsxProp,
+  normalizeCustomJsxProperty,
+} from "./policy";
+
+export function normalizedProperty(value: unknown): string {
+  if (typeof value !== "string" && typeof value !== "number") {
+    throw new SafeJsxError("Property names must be strings or numbers");
+  }
+  const property = String(value);
+  if (CUSTOM_JSX_BLOCKED_PROPERTIES.has(normalizeCustomJsxProperty(property))) {
+    throw new SafeJsxError(`Access to reflective property '${property}' is not allowed`);
+  }
+  return property;
+}
+
+function isArrayIndex(property: string): boolean {
+  if (!/^(?:0|[1-9]\d*)$/.test(property)) return false;
+  const index = Number(property);
+  return Number.isSafeInteger(index) && index >= 0;
+}
+
+export function ownProperty(object: unknown, propertyValue: unknown): unknown {
+  const property = normalizedProperty(propertyValue);
+  if (object == null) return undefined;
+
+  if (Array.isArray(object)) {
+    if (property === "length") return object.length;
+    if (!isArrayIndex(property)) return undefined;
+    return Object.hasOwn(object, property) ? object[Number(property)] : undefined;
+  }
+
+  if (typeof object === "string") {
+    if (property === "length") return object.length;
+    if (!isArrayIndex(property)) return undefined;
+    return object[Number(property)];
+  }
+
+  if (typeof object !== "object") return undefined;
+  return Object.hasOwn(object, property) ? (object as Record<string, unknown>)[property] : undefined;
+}
+
+function isSafeUrl(value: unknown): boolean {
+  if (typeof value !== "string") return false;
+  if (value.startsWith("#")) return true;
+  if (value.startsWith("/") && !value.startsWith("//")) return true;
+  try {
+    const parsed = new URL(value);
+    return (parsed.protocol === "http:" || parsed.protocol === "https:") && !parsed.username && !parsed.password;
+  } catch {
+    return false;
+  }
+}
+
+function sanitizeStyle(value: unknown): Record<string, string | number> | undefined {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return undefined;
+  const result: Record<string, string | number> = {};
+  for (const [key, styleValue] of Object.entries(value)) {
+    if (CUSTOM_JSX_BLOCKED_STYLE_KEYS.has(key)) continue;
+    if (typeof styleValue !== "string" && typeof styleValue !== "number") continue;
+    if (typeof styleValue === "string" && /(?:url\s*\(|expression\s*\(|javascript:|position\s*:)/i.test(styleValue)) {
+      continue;
+    }
+    result[key] = styleValue;
+  }
+  return result;
+}
+
+function sanitizeStyles(value: unknown): Record<string, Record<string, string | number>> | undefined {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return undefined;
+  const result: Record<string, Record<string, string | number>> = {};
+  for (const [selector, styles] of Object.entries(value)) {
+    if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(selector)) continue;
+    const sanitized = sanitizeStyle(styles);
+    if (sanitized) result[selector] = sanitized;
+  }
+  return result;
+}
+
+export function sanitizeCustomJsxProps(
+  props: Readonly<Record<string, unknown>>,
+  componentName?: string,
+): Record<string, unknown> {
+  const blockedProps = componentName
+    ? new Set(customJsxComponentByName.get(componentName)?.blockedProps.map(({ name }) => name) ?? [])
+    : undefined;
+  return sanitizeObject(props, blockedProps, componentName);
+}
+
+function sanitizeObject(
+  value: Readonly<Record<string, unknown>>,
+  componentBlockedProps?: ReadonlySet<string>,
+  componentName?: string,
+): Record<string, unknown> {
+  const safe: Record<string, unknown> = Object.create(null);
+  for (const [key, child] of Object.entries(value)) {
+    if (isBlockedCustomJsxProp(key) || componentBlockedProps?.has(key)) continue;
+    if (componentName && getInvalidCustomJsxPropValueReason(componentName, key, child)) continue;
+    if (typeof child === "function" || isInterpreterCallback(child)) continue;
+    if (CUSTOM_JSX_URL_PROPS.has(key)) {
+      if (isSafeUrl(child)) safe[key] = child;
+      continue;
+    }
+    if (key === "style") {
+      const style = sanitizeStyle(child);
+      if (style) safe.style = style;
+      continue;
+    }
+    if (key === "styles") {
+      const styles = sanitizeStyles(child);
+      if (styles) safe.styles = styles;
+      continue;
+    }
+    safe[key] = key === "data" || key === "series" ? sanitizeSerializableData(child) : sanitizeNestedValue(child);
+  }
+  return safe;
+}
+
+function sanitizeSerializableData(value: unknown): unknown {
+  if (typeof value === "function" || isInterpreterCallback(value)) return undefined;
+  if (Array.isArray(value)) return value.map(sanitizeSerializableData);
+  if (value !== null && typeof value === "object") {
+    const safe: Record<string, unknown> = Object.create(null);
+    for (const [key, child] of Object.entries(value)) {
+      if (CUSTOM_JSX_BLOCKED_PROPERTIES.has(normalizeCustomJsxProperty(key))) continue;
+      safe[key] = sanitizeSerializableData(child);
+    }
+    return safe;
+  }
+  return value;
+}
+
+function sanitizeNestedValue(value: unknown): unknown {
+  if (typeof value === "function" || isInterpreterCallback(value)) return undefined;
+  if (isValidElement(value)) return value;
+  if (Array.isArray(value)) return value.map(sanitizeNestedValue);
+  if (value !== null && typeof value === "object") return sanitizeObject(value as Record<string, unknown>);
+  return value;
+}
+
+export function diagnoseCustomJsxProps(props: Readonly<Record<string, unknown>>, componentName: string): string[] {
+  const diagnostics: string[] = [];
+  const blockedProps = new Map(
+    customJsxComponentByName.get(componentName)?.blockedProps.map(({ name, reason }) => [name, reason]) ?? [],
+  );
+  diagnoseObject(props, componentName, diagnostics, blockedProps, componentName);
+  return diagnostics;
+}
+
+function diagnoseObject(
+  value: Readonly<Record<string, unknown>>,
+  path: string,
+  diagnostics: string[],
+  componentBlockedProps?: ReadonlyMap<string, string>,
+  componentName?: string,
+) {
+  for (const [key, child] of Object.entries(value)) {
+    const propertyPath = `${path}.${key}`;
+    const componentBlockedReason = componentBlockedProps?.get(key);
+    if (componentBlockedReason) {
+      diagnostics.push(
+        `BLOCKED_CAPABILITY: Prop '${propertyPath}' is not allowed because ${componentBlockedReason.toLowerCase()}`,
+      );
+      continue;
+    }
+    const invalidValueReason = componentName ? getInvalidCustomJsxPropValueReason(componentName, key, child) : null;
+    if (invalidValueReason) {
+      diagnostics.push(`INVALID_PROP_VALUE: '${propertyPath}' is not allowed because ${invalidValueReason}`);
+      continue;
+    }
+    if (isBlockedCustomJsxProp(key) || typeof child === "function" || isInterpreterCallback(child)) {
+      diagnostics.push(`BLOCKED_CAPABILITY: Prop '${propertyPath}' is not allowed`);
+      continue;
+    }
+    if (CUSTOM_JSX_URL_PROPS.has(key) && !isSafeUrl(child)) {
+      diagnostics.push(`INVALID_PROP_VALUE: '${propertyPath}' contains an unsafe URL`);
+      continue;
+    }
+    if (isValidElement(child)) continue;
+    if (key === "data" || key === "series") continue;
+    if (Array.isArray(child)) {
+      child.forEach((entry, index) => {
+        if (isValidElement(entry)) return;
+        if (isInterpreterCallback(entry) || typeof entry === "function") {
+          diagnostics.push(`BLOCKED_CAPABILITY: Prop '${propertyPath}[${index}]' is not allowed`);
+        } else if (entry !== null && typeof entry === "object") {
+          diagnoseObject(entry as Record<string, unknown>, `${propertyPath}[${index}]`, diagnostics);
+        }
+      });
+    } else if (child !== null && typeof child === "object" && key !== "style" && key !== "styles") {
+      diagnoseObject(child as Record<string, unknown>, propertyPath, diagnostics);
+    }
+  }
+}
diff --git a/packages/custom-widgets/src/jsx/string-methods.ts b/packages/custom-widgets/src/jsx/string-methods.ts
new file mode 100644
index 000000000..c779b6e1c
--- /dev/null
+++ b/packages/custom-widgets/src/jsx/string-methods.ts
@@ -0,0 +1,119 @@
+import { numericArgument, SafeJsxError } from "./interpreter-foundation";
+import type { InterpreterMethodContext } from "./interpreter-method-context";
+
+export function callStringMethod(
+  receiver: string,
+  method: string,
+  args: unknown[],
+  context: InterpreterMethodContext,
+): { handled: boolean; value?: unknown } {
+  switch (method) {
+    case "toUpperCase":
+      return { handled: true, value: context.budget.string(receiver.toUpperCase()) };
+    case "toLowerCase":
+      return { handled: true, value: context.budget.string(receiver.toLowerCase()) };
+    case "trim":
+      return { handled: true, value: context.budget.string(receiver.trim()) };
+    case "trimStart":
+      return { handled: true, value: context.budget.string(receiver.trimStart()) };
+    case "trimEnd":
+      return { handled: true, value: context.budget.string(receiver.trimEnd()) };
+    case "replace": {
+      const search = args[0] instanceof RegExp ? args[0] : String(args[0] ?? "");
+      const replacement = String(args[1] ?? "");
+      if (search instanceof RegExp)
+        return { handled: true, value: context.budget.string(receiver.replace(search, replacement)) };
+      const matchIndex = receiver.indexOf(search);
+      if (matchIndex === -1) return { handled: true, value: context.budget.string(receiver) };
+      return {
+        handled: true,
+        value: context.budget.string(
+          receiver.slice(0, matchIndex) + replacement + receiver.slice(matchIndex + search.length),
+        ),
+      };
+    }
+    case "replaceAll": {
+      const search = args[0] instanceof RegExp ? args[0] : String(args[0] ?? "");
+      const replacement = String(args[1] ?? "");
+      if (search instanceof RegExp) {
+        if (!search.global) throw new SafeJsxError("replaceAll() requires a global regular expression");
+        return { handled: true, value: context.budget.string(receiver.replaceAll(search, replacement)) };
+      }
+      if (search.length === 0) return { handled: true, value: context.budget.string(receiver) };
+      let result = "";
+      let cursor = 0;
+      while (cursor < receiver.length) {
+        const matchIndex = receiver.indexOf(search, cursor);
+        if (matchIndex === -1) {
+          result += receiver.slice(cursor);
+          break;
+        }
+        result += receiver.slice(cursor, matchIndex) + replacement;
+        cursor = matchIndex + search.length;
+      }
+      return { handled: true, value: context.budget.string(result) };
+    }
+    case "indexOf":
+      return { handled: true, value: receiver.indexOf(String(args[0] ?? ""), numericArgument(args[1], 0)) };
+    case "lastIndexOf": {
+      const fromIndex = args[1] !== undefined ? numericArgument(args[1], receiver.length) : undefined;
+      return { handled: true, value: receiver.lastIndexOf(String(args[0] ?? ""), fromIndex) };
+    }
+    case "repeat": {
+      const maxCount = receiver.length > 0 ? Math.floor(200_001 / receiver.length) : 0;
+      const count = Math.max(0, Math.min(numericArgument(args[0], 0), maxCount));
+      return { handled: true, value: context.budget.string(receiver.repeat(count).slice(0, 200_001)) };
+    }
+    case "slice":
+      return {
+        handled: true,
+        value: context.budget.string(receiver.slice(numericArgument(args[0], 0), args[1] as number | undefined)),
+      };
+    case "substring":
+      return {
+        handled: true,
+        value: context.budget.string(receiver.substring(numericArgument(args[0], 0), args[1] as number | undefined)),
+      };
+    case "includes":
+      return { handled: true, value: receiver.includes(String(args[0] ?? ""), numericArgument(args[1], 0)) };
+    case "startsWith":
+      return { handled: true, value: receiver.startsWith(String(args[0] ?? ""), numericArgument(args[1], 0)) };
+    case "endsWith":
+      return { handled: true, value: receiver.endsWith(String(args[0] ?? ""), args[1] as number | undefined) };
+    case "padStart":
+      return {
+        handled: true,
+        value: context.budget.string(
+          receiver.padStart(Math.min(numericArgument(args[0], 0), 200_001), String(args[1] ?? " ")),
+        ),
+      };
+    case "padEnd":
+      return {
+        handled: true,
+        value: context.budget.string(
+          receiver.padEnd(Math.min(numericArgument(args[0], 0), 200_001), String(args[1] ?? " ")),
+        ),
+      };
+    case "charAt":
+      return { handled: true, value: receiver.charAt(numericArgument(args[0], 0)) };
+    case "localeCompare":
+      return { handled: true, value: receiver.localeCompare(String(args[0] ?? "")) };
+    case "split": {
+      const limit = Math.max(0, Math.min(2_000, numericArgument(args[1], 2_000)));
+      const separator = args[0] instanceof RegExp ? args[0] : args[0] === undefined ? undefined : String(args[0]);
+      const split = separator === undefined ? [receiver] : receiver.split(separator, limit);
+      context.budget.collection(split.length);
+      return { handled: true, value: split };
+    }
+    case "match": {
+      const pattern = args[0] instanceof RegExp ? args[0] : String(args[0] ?? "");
+      const matches = receiver.match(pattern);
+      if (matches) context.budget.collection(matches.length);
+      return { handled: true, value: matches ? [...matches] : null };
+    }
+    case "search":
+      return { handled: true, value: receiver.search(args[0] instanceof RegExp ? args[0] : String(args[0] ?? "")) };
+    default:
+      return { handled: false };
+  }
+}
diff --git a/packages/custom-widgets/src/runtime/actions.tsx b/packages/custom-widgets/src/runtime/actions.tsx
new file mode 100644
index 000000000..a3d05b0cb
--- /dev/null
+++ b/packages/custom-widgets/src/runtime/actions.tsx
@@ -0,0 +1,239 @@
+"use client";
+
+import type { ComponentType, ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import { Button, Switch } from "@mantine/core";
+import { IconCheck, IconPlayerPlay, IconPower, IconRefresh, IconTrash } from "@tabler/icons-react";
+import { useMutation } from "@tanstack/react-query";
+
+import { useCustomWidgetRuntime } from "./context";
+import { normalizeParams } from "./data";
+import { RequestIdRequiredAlert } from "./status";
+import type { CustomJsxRuntimeParams, CustomWidgetRequestResult } from "./types";
+
+const ICON_MAP: Record<string, ComponentType<{ size?: number | string }>> = {
+  play: IconPlayerPlay,
+  check: IconCheck,
+  refresh: IconRefresh,
+  power: IconPower,
+  trash: IconTrash,
+};
+
+function parseBool(value: unknown, fallback = false) {
+  if (typeof value === "boolean") return value;
+  if (value === "true") return true;
+  if (value === "false") return false;
+  return fallback;
+}
+
+function useActionExecutor() {
+  const runtime = useCustomWidgetRuntime();
+  const mutation = useMutation({
+    mutationFn: ({
+      requestId,
+      params,
+      confirmed,
+    }: {
+      requestId: string;
+      params: CustomJsxRuntimeParams;
+      confirmed: boolean;
+    }): Promise<CustomWidgetRequestResult> => {
+      if (!runtime.itemId && !runtime.previewSessionId) {
+        return Promise.resolve({ ok: false, status: 0, data: null, error: runtime.messages.widgetItemUnavailable });
+      }
+      if (runtime.isEditMode) {
+        return Promise.resolve({ ok: false, status: 0, data: null, error: runtime.messages.actionsDisabledEditMode });
+      }
+      return runtime.port.executeAction({
+        itemId: runtime.itemId,
+        previewSessionId: runtime.previewSessionId,
+        requestId,
+        params,
+        confirmed,
+      });
+    },
+  });
+  return { runtime, mutation };
+}
+
+export interface ActionButtonProps {
+  requestId?: string;
+  params?: CustomJsxRuntimeParams;
+  label?: string;
+  children?: ReactNode;
+  color?: string;
+  variant?: string;
+  size?: string;
+  confirmMessage?: string;
+  successMessage?: string;
+  errorMessage?: string;
+  icon?: string;
+  disabled?: boolean | string;
+  fullWidth?: boolean | string;
+}
+
+export function ActionButton(props: ActionButtonProps) {
+  const { runtime, mutation } = useActionExecutor();
+  const params = normalizeParams(props.params);
+  const title = props.label ?? (typeof props.children === "string" ? props.children : props.requestId) ?? "Action";
+  const Icon = props.icon ? ICON_MAP[props.icon.toLowerCase()] : undefined;
+  const capability = runtime.requestCapabilities.find(
+    (candidate) => candidate.id === props.requestId && candidate.kind === "action",
+  );
+  const run = async (confirmed: boolean) => {
+    if (!props.requestId || !params) return;
+    try {
+      const result = await mutation.mutateAsync({ requestId: props.requestId, params, confirmed });
+      const success = result.ok;
+      runtime.port.notify({
+        kind: success ? "success" : "error",
+        title,
+        message: success
+          ? (props.successMessage ??
+            (result.simulated ? runtime.messages.actionSimulated : runtime.messages.actionCompleted))
+          : (props.errorMessage ?? result.error ?? `${runtime.messages.requestFailed} (${result.status})`),
+      });
+      if (success)
+        await runtime.port.invalidate({
+          itemId: runtime.itemId,
+          previewSessionId: runtime.previewSessionId,
+          targets: result.invalidates ?? capability?.invalidates ?? [],
+        });
+    } catch {
+      runtime.port.notify({
+        kind: "error",
+        title,
+        message: props.errorMessage ?? runtime.messages.requestFailed,
+      });
+    }
+  };
+  const click = async () => {
+    const confirmMessage =
+      props.confirmMessage ??
+      capability?.confirmation?.message ??
+      (capability?.method === "DELETE" ? runtime.messages.confirmDelete : undefined);
+    if (
+      confirmMessage &&
+      !(await runtime.port.confirm({
+        title: capability?.confirmation?.title ?? title,
+        message: confirmMessage,
+        confirmLabel: capability?.confirmation?.confirmLabel,
+        destructive: capability?.confirmation?.destructive ?? capability?.method === "DELETE",
+      }))
+    )
+      return;
+    await run(Boolean(confirmMessage));
+  };
+  if (!props.requestId) return <RequestIdRequiredAlert />;
+  return (
+    <Button
+      color={props.color ?? "blue"}
+      variant={(props.variant ?? "filled") as never}
+      size={(props.size ?? "sm") as never}
+      onClick={() => void click()}
+      loading={mutation.isPending}
+      leftSection={Icon ? <Icon size={16} /> : undefined}
+      disabled={
+        parseBool(props.disabled) || runtime.isEditMode || (!runtime.itemId && !runtime.previewSessionId) || !params
+      }
+      fullWidth={parseBool(props.fullWidth)}
+    >
+      {props.children ?? props.label ?? props.requestId}
+    </Button>
+  );
+}
+
+export interface ToggleSwitchProps {
+  requestId?: string;
+  enabledParams?: CustomJsxRuntimeParams;
+  disabledParams?: CustomJsxRuntimeParams;
+  initialValue?: boolean | string;
+  label?: string;
+  color?: string;
+  size?: string;
+  errorMessage?: string;
+  disabled?: boolean | string;
+}
+
+export function ToggleSwitch(props: ToggleSwitchProps) {
+  const { runtime, mutation } = useActionExecutor();
+  const initial = parseBool(props.initialValue);
+  const [checked, setChecked] = useState(initial);
+  const locked = useRef(false);
+  const enabledParams = normalizeParams(props.enabledParams);
+  const disabledParams = normalizeParams(props.disabledParams);
+  const capability = runtime.requestCapabilities.find(
+    (candidate) => candidate.id === props.requestId && candidate.kind === "action",
+  );
+  useEffect(() => {
+    if (!locked.current) setChecked(initial);
+  }, [initial]);
+  const change = async (next: boolean) => {
+    const params = next ? enabledParams : disabledParams;
+    if (!props.requestId || !params || locked.current) return;
+    const confirmation = capability?.confirmation;
+    const confirmMessage =
+      confirmation?.message ?? (capability?.method === "DELETE" ? runtime.messages.confirmDelete : undefined);
+    if (
+      confirmMessage &&
+      !(await runtime.port.confirm({
+        title: confirmation?.title ?? props.label ?? runtime.messages.toggle,
+        message: confirmMessage,
+        confirmLabel: confirmation?.confirmLabel,
+        destructive: confirmation?.destructive ?? capability?.method === "DELETE",
+      }))
+    )
+      return;
+    locked.current = true;
+    const previous = checked;
+    setChecked(next);
+    try {
+      const result = await mutation.mutateAsync({
+        requestId: props.requestId,
+        params,
+        confirmed: confirmMessage !== undefined,
+      });
+      if (!result.ok) {
+        setChecked(previous);
+        runtime.port.notify({
+          kind: "error",
+          title: props.label ?? runtime.messages.toggle,
+          message: props.errorMessage ?? result.error ?? runtime.messages.requestFailed,
+        });
+      } else {
+        await runtime.port.invalidate({
+          itemId: runtime.itemId,
+          previewSessionId: runtime.previewSessionId,
+          targets: result.invalidates ?? capability?.invalidates ?? [],
+        });
+      }
+    } catch {
+      setChecked(previous);
+      runtime.port.notify({
+        kind: "error",
+        title: props.label ?? runtime.messages.toggle,
+        message: props.errorMessage ?? runtime.messages.requestFailed,
+      });
+    } finally {
+      locked.current = false;
+    }
+  };
+  if (!props.requestId) return <RequestIdRequiredAlert />;
+  return (
+    <Switch
+      label={props.label}
+      color={props.color ?? "blue"}
+      size={(props.size ?? "sm") as never}
+      checked={checked}
+      onChange={(event) => void change(event.currentTarget.checked)}
+      disabled={
+        parseBool(props.disabled) ||
+        mutation.isPending ||
+        runtime.isEditMode ||
+        (!runtime.itemId && !runtime.previewSessionId) ||
+        !enabledParams ||
+        !disabledParams
+      }
+    />
+  );
+}
diff --git a/packages/custom-widgets/src/runtime/context.tsx b/packages/custom-widgets/src/runtime/context.tsx
new file mode 100644
index 000000000..aee41e863
--- /dev/null
+++ b/packages/custom-widgets/src/runtime/context.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { createContext, useContext } from "react";
+
+import type { CustomWidgetRuntimeValue } from "./types";
+
+const RuntimeContext = createContext<CustomWidgetRuntimeValue | null>(null);
+
+export function CustomWidgetRuntimeProvider({
+  children,
+  ...value
+}: CustomWidgetRuntimeValue & { children: ReactNode }) {
+  return <RuntimeContext.Provider value={value}>{children}</RuntimeContext.Provider>;
+}
+
+export function useCustomWidgetRuntime(): CustomWidgetRuntimeValue {
+  const value = useContext(RuntimeContext);
+  if (!value) throw new Error("Custom Widget runtime components require CustomWidgetRuntimeProvider");
+  return value;
+}
+
+export function useWidgetDefinitionId(): string {
+  return useCustomWidgetRuntime().definitionId ?? "";
+}
diff --git a/packages/custom-widgets/src/runtime/custom-jsx-renderer.tsx b/packages/custom-widgets/src/runtime/custom-jsx-renderer.tsx
new file mode 100644
index 000000000..4ff277810
--- /dev/null
+++ b/packages/custom-widgets/src/runtime/custom-jsx-renderer.tsx
@@ -0,0 +1,236 @@
+import type { ComponentType, ErrorInfo, ReactNode } from "react";
+import { Component, useCallback, useEffect, useId, useMemo, useState } from "react";
+import { Alert, Box, Stack, Text } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import { renderSafeJsx } from "../jsx/interpreter";
+import { CustomJsxInputsProvider } from "../jsx/runtime-components";
+import type { WidgetInputType, WidgetInputValue } from "../jsx/runtime-components";
+import type { CustomJsxRequestCapability } from "./types";
+
+const EMPTY_RECORD: Record<string, never> = {};
+
+const methodColors: Readonly<Record<string, string>> = {
+  GET: "blue",
+  POST: "orange",
+  PUT: "yellow",
+  DELETE: "red",
+  PATCH: "grape",
+};
+const methods = new Set(["GET", "POST", "PUT", "PATCH", "DELETE"]);
+const kinds = new Set(["query", "action"]);
+const permissions = new Set(["view", "modify", "full"]);
+
+export interface CustomJsxRendererMessages {
+  noTemplate: string;
+  templateWarnings(count: number): string;
+}
+
+export interface CustomJsxRendererProps {
+  template: string;
+  data: unknown;
+  status?: Record<string, unknown>;
+  options?: Record<string, unknown>;
+  components: Readonly<Record<string, ComponentType<never>>>;
+  createBindings(data: unknown): Readonly<Record<string, unknown>>;
+  messages: CustomJsxRendererMessages;
+}
+
+export const CUSTOM_JSX_METHOD_COLORS = methodColors;
+
+export function parseRequestCapabilities(value: unknown): CustomJsxRequestCapability[] {
+  if (!Array.isArray(value)) return [];
+  return value.flatMap((candidate) => {
+    if (!candidate || typeof candidate !== "object") return [];
+    const record = candidate as Record<string, unknown>;
+    if (
+      typeof record.id !== "string" ||
+      typeof record.kind !== "string" ||
+      !kinds.has(record.kind) ||
+      typeof record.method !== "string" ||
+      !methods.has(record.method) ||
+      typeof record.minimumBoardPermission !== "string" ||
+      !permissions.has(record.minimumBoardPermission)
+    )
+      return [];
+    return [
+      {
+        id: record.id,
+        kind: record.kind,
+        method: record.method,
+        trigger: record.trigger === "load" ? "load" : "manual",
+        minimumBoardPermission: record.minimumBoardPermission,
+        confirmation:
+          record.confirmation && typeof record.confirmation === "object"
+            ? (record.confirmation as CustomJsxRequestCapability["confirmation"])
+            : undefined,
+        invalidates: Array.isArray(record.invalidates)
+          ? record.invalidates.filter((entry): entry is string => typeof entry === "string")
+          : [],
+      } as CustomJsxRequestCapability,
+    ];
+  });
+}
+
+class RendererErrorBoundary extends Component<
+  { children: ReactNode; resetKey: string; onError(error: Error): void },
+  { error: Error | null; resetKey: string }
+> {
+  public state = { error: null, resetKey: "" } as { error: Error | null; resetKey: string };
+  public static getDerivedStateFromProps(
+    props: Readonly<{ resetKey: string }>,
+    state: Readonly<{ error: Error | null; resetKey: string }>,
+  ) {
+    return props.resetKey === state.resetKey ? null : { error: null, resetKey: props.resetKey };
+  }
+  public static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+  public componentDidCatch(error: Error, _info: ErrorInfo) {
+    this.props.onError(error);
+  }
+  public render() {
+    return this.state.error ? <ErrorAlert error={this.state.error} /> : this.props.children;
+  }
+}
+
+function ErrorAlert({ error }: { error: Error }) {
+  return (
+    <Alert color="red" variant="light" icon={<IconAlertTriangle size={16} />} p="xs">
+      <Text size="xs" fw={700}>
+        RUNTIME_RENDER_ERROR
+      </Text>
+      <Text size="xs">{error.message}</Text>
+    </Alert>
+  );
+}
+
+export function CustomJsxRenderer(props: CustomJsxRendererProps) {
+  if (!props.template.trim())
+    return (
+      <Alert color="gray" variant="light" p="xs">
+        <Text size="xs" c="dimmed">
+          {props.messages.noTemplate}
+        </Text>
+      </Alert>
+    );
+
+  return <CustomJsxRendererSession key={props.template} {...props} />;
+}
+
+function CustomJsxRendererSession({
+  template,
+  data,
+  status = EMPTY_RECORD,
+  options = EMPTY_RECORD,
+  components,
+  createBindings,
+  messages,
+}: CustomJsxRendererProps) {
+  const inputScopeId = useId();
+  const [parseErrors, setParseErrors] = useState<string[]>([]);
+  const [bindingErrors, setBindingErrors] = useState<string[]>([]);
+  const [inputs, setInputs] = useState<Record<string, WidgetInputValue>>({});
+  const [inputTypes, setInputTypes] = useState<Record<string, WidgetInputType>>({});
+  const registerInput = useCallback((name: string, type: WidgetInputType, initialValue: WidgetInputValue) => {
+    setInputTypes((current) => {
+      const existing = current[name];
+      if (existing === type) return current;
+      if (existing && existing !== type) {
+        setBindingErrors((errors) => {
+          const message = `BINDING_TYPE_CONFLICT: '${name}' is bound as both ${existing} and ${type}`;
+          return errors.includes(message) ? errors : [...errors.slice(0, 4), message];
+        });
+        return current;
+      }
+      return { ...current, [name]: type };
+    });
+    setInputs((current) => (Object.hasOwn(current, name) ? current : { ...current, [name]: initialValue }));
+  }, []);
+  const setInputValue = useCallback(
+    (name: string, type: WidgetInputType, value: WidgetInputValue) => {
+      const existing = inputTypes[name];
+      if (existing && existing !== type) {
+        setBindingErrors((errors) => {
+          const message = `BINDING_TYPE_CONFLICT: '${name}' is bound as both ${existing} and ${type}`;
+          return errors.includes(message) ? errors : [...errors.slice(0, 4), message];
+        });
+        return;
+      }
+      setInputTypes((current) => (current[name] === type ? current : { ...current, [name]: type }));
+      setInputs((current) => (Object.is(current[name], value) ? current : { ...current, [name]: value }));
+    },
+    [inputTypes],
+  );
+  const rendered = useMemo(() => {
+    try {
+      const bindings = { ...createBindings(data), status, options, inputs };
+      return {
+        ...renderSafeJsx({ template, components, bindings }),
+        boundaryKey: createBoundaryKey(template, bindings),
+        error: null,
+      };
+    } catch (error) {
+      return {
+        node: null,
+        warnings: [],
+        boundaryKey: `${template.length}:error`,
+        error: error instanceof Error ? error : new Error(String(error)),
+      };
+    }
+  }, [components, createBindings, data, inputs, options, status, template]);
+  useEffect(() => setParseErrors([]), [rendered.boundaryKey, template]);
+  const handleError = useCallback(
+    (error: Error) =>
+      setParseErrors((current) => {
+        if (current.length >= 5 || current.includes(error.message)) return current;
+        return [...current, error.message];
+      }),
+    [],
+  );
+  useEffect(() => {
+    rendered.warnings.forEach((warning) => handleError(new Error(warning)));
+    if (rendered.error) handleError(rendered.error);
+  }, [handleError, rendered]);
+
+  return (
+    <Stack gap={0} h="100%">
+      <Box h="100%" style={{ contain: "layout paint style", isolation: "isolate", overflow: "auto", minHeight: 0 }}>
+        {rendered.error ? (
+          <ErrorAlert error={rendered.error} />
+        ) : (
+          <CustomJsxInputsProvider
+            scopeId={inputScopeId}
+            inputs={inputs}
+            inputTypes={inputTypes}
+            registerInput={registerInput}
+            setInputValue={setInputValue}
+          >
+            <RendererErrorBoundary resetKey={rendered.boundaryKey} onError={handleError}>
+              {rendered.node}
+            </RendererErrorBoundary>
+          </CustomJsxInputsProvider>
+        )}
+      </Box>
+      {[...parseErrors, ...bindingErrors].length > 0 && (
+        <Alert color="yellow" variant="light" p="xs" mt="xs">
+          <Text size="xs" c="dimmed">
+            {messages.templateWarnings(parseErrors.length + bindingErrors.length)}
+          </Text>
+          {[...parseErrors, ...bindingErrors].map((message) => (
+            <Text key={message} size="xs" c="dimmed" style={{ fontFamily: "monospace" }}>
+              {message}
+            </Text>
+          ))}
+        </Alert>
+      )}
+    </Stack>
+  );
+}
+
+function createBoundaryKey(template: string, bindings: Readonly<Record<string, unknown>>) {
+  let hash = 0;
+  const value = `${template}\0${JSON.stringify(bindings)}`;
+  for (let index = 0; index < value.length; index += 1) hash = (hash * 31 + value.charCodeAt(index)) | 0;
+  return `${template.length}:${hash}`;
+}
diff --git a/packages/custom-widgets/src/runtime/data.tsx b/packages/custom-widgets/src/runtime/data.tsx
new file mode 100644
index 000000000..b0b29894e
--- /dev/null
+++ b/packages/custom-widgets/src/runtime/data.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import { Badge, Code, Image, Text, Title } from "@mantine/core";
+
+export const SubFetchDataContext = createContext<unknown>(undefined);
+
+const BLOCKED_KEYS = new Set(["constructor", "prototype", "__proto__"]);
+
+export function normalizeParams(value: unknown) {
+  if (value === undefined) return {};
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const result: Record<string, string | number | boolean> = {};
+  for (const [key, param] of Object.entries(value)) {
+    if (BLOCKED_KEYS.has(key)) return null;
+    if (typeof param !== "string" && typeof param !== "number" && typeof param !== "boolean") return null;
+    result[key] = param;
+  }
+  return result;
+}
+
+export function getByPath(value: unknown, path?: string): unknown {
+  if (!path?.trim()) return value;
+  return path.split(".").reduce<unknown>((current, key) => {
+    if (current == null || typeof current !== "object" || BLOCKED_KEYS.has(key)) return undefined;
+    return Object.hasOwn(current, key) ? (current as Record<string, unknown>)[key] : undefined;
+  }, value);
+}
+
+export function formatDisplayValue(value: unknown): string {
+  if (value == null) return "—";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+export interface SubDataProps {
+  path?: string;
+  as?: string;
+  order?: number;
+  size?: string;
+  color?: string;
+  variant?: string;
+  fw?: number;
+  c?: string;
+  alt?: string;
+  fit?: string;
+  w?: string | number;
+  h?: string | number;
+  radius?: string | number;
+}
+
+export function SubData({ path, as = "Text", ...props }: SubDataProps) {
+  const value = getByPath(useContext(SubFetchDataContext), path);
+  if (value === undefined && path) return <Text c="dimmed">—</Text>;
+  const displayValue = as === "Code" ? JSON.stringify(value, null, 2) : formatDisplayValue(value);
+  if (as === "Title") {
+    return <Title order={(props.order as 1 | 2 | 3 | 4 | 5 | 6) ?? 3}>{displayValue}</Title>;
+  }
+  if (as === "Badge") {
+    return (
+      <Badge color={props.color} variant={props.variant as never} size={props.size as never}>
+        {displayValue}
+      </Badge>
+    );
+  }
+  if (as === "Code") return <Code block>{displayValue}</Code>;
+  if (as === "Image") {
+    const src = safeDisplayImageUrl(value);
+    if (!src) return null;
+    return (
+      <Image src={src} alt={props.alt ?? ""} fit={props.fit as never} w={props.w} h={props.h} radius={props.radius} />
+    );
+  }
+  return (
+    <Text size={props.size as never} fw={props.fw} c={props.c}>
+      {displayValue}
+    </Text>
+  );
+}
+
+function safeDisplayImageUrl(value: unknown): string | undefined {
+  if (typeof value !== "string") return undefined;
+  if (value.startsWith("/") && !value.startsWith("//")) return value;
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:" ? url.toString() : undefined;
+  } catch {
+    return undefined;
+  }
+}
diff --git a/packages/custom-widgets/src/runtime/index.ts b/packages/custom-widgets/src/runtime/index.ts
new file mode 100644
index 000000000..cbc8ab419
--- /dev/null
+++ b/packages/custom-widgets/src/runtime/index.ts
@@ -0,0 +1,12 @@
+export { ActionButton, ToggleSwitch } from "./actions";
+export { CustomWidgetRuntimeProvider, useCustomWidgetRuntime, useWidgetDefinitionId } from "./context";
+export { SubData } from "./data";
+export { RefreshButton } from "./refresh-button";
+export { SubFetch } from "./sub-fetch";
+export { CustomJsxRenderer, CUSTOM_JSX_METHOD_COLORS, parseRequestCapabilities } from "./custom-jsx-renderer";
+export type { CustomJsxRendererMessages, CustomJsxRendererProps } from "./custom-jsx-renderer";
+export type { ActionButtonProps, ToggleSwitchProps } from "./actions";
+export type { SubDataProps } from "./data";
+export type { RefreshButtonProps } from "./refresh-button";
+export type { SubFetchMetadata, SubFetchProps } from "./sub-fetch";
+export type * from "./types";
diff --git a/packages/custom-widgets/src/runtime/refresh-button.tsx b/packages/custom-widgets/src/runtime/refresh-button.tsx
new file mode 100644
index 000000000..69a973177
--- /dev/null
+++ b/packages/custom-widgets/src/runtime/refresh-button.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import { ActionIcon } from "@mantine/core";
+import { IconRefresh } from "@tabler/icons-react";
+
+import { useCustomWidgetRuntime } from "./context";
+
+export interface RefreshButtonProps {
+  label?: string;
+  color?: string;
+  variant?: string;
+  size?: string;
+}
+
+export function RefreshButton({ label, color = "gray", variant = "subtle", size = "sm" }: RefreshButtonProps) {
+  const runtime = useCustomWidgetRuntime();
+  const [loading, setLoading] = useState(false);
+  const refresh = async () => {
+    if (!runtime.itemId && !runtime.previewSessionId) return;
+    setLoading(true);
+    try {
+      await runtime.port.invalidate({
+        itemId: runtime.itemId,
+        previewSessionId: runtime.previewSessionId,
+        targets: ["parent", "*"],
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+  return (
+    <ActionIcon
+      aria-label={label ?? runtime.messages.refresh}
+      color={color}
+      variant={variant as never}
+      size={size as never}
+      onClick={() => void refresh()}
+      loading={loading}
+      disabled={(!runtime.itemId && !runtime.previewSessionId) || runtime.isEditMode}
+    >
+      <IconRefresh size={16} />
+    </ActionIcon>
+  );
+}
diff --git a/packages/custom-widgets/src/runtime/status.tsx b/packages/custom-widgets/src/runtime/status.tsx
new file mode 100644
index 000000000..5225f01d0
--- /dev/null
+++ b/packages/custom-widgets/src/runtime/status.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import { Alert, Text } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import { useCustomWidgetRuntime } from "./context";
+
+export function RequestIdRequiredAlert() {
+  const { messages } = useCustomWidgetRuntime();
+  return (
+    <Alert color="yellow" variant="light" icon={<IconAlertTriangle size={16} />} p="xs">
+      <Text size="xs">{messages.requestIdRequired}</Text>
+    </Alert>
+  );
+}
diff --git a/packages/custom-widgets/src/runtime/sub-fetch.tsx b/packages/custom-widgets/src/runtime/sub-fetch.tsx
new file mode 100644
index 000000000..61182f7d1
--- /dev/null
+++ b/packages/custom-widgets/src/runtime/sub-fetch.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { Alert, Box, Button, Code, Skeleton, Text } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { useQuery } from "@tanstack/react-query";
+
+import { useCustomWidgetRuntime } from "./context";
+import { formatDisplayValue, getByPath, normalizeParams, SubFetchDataContext } from "./data";
+import { RequestIdRequiredAlert } from "./status";
+import type { CustomJsxRuntimeParams } from "./types";
+
+export interface SubFetchMetadata {
+  ok: boolean;
+  status: number;
+  statusText?: string;
+  loading: false;
+  error?: undefined;
+}
+
+export interface SubFetchProps {
+  requestId?: string;
+  params?: CustomJsxRuntimeParams;
+  refreshInterval?: number;
+  children?: ReactNode | ((data: unknown, metadata: SubFetchMetadata) => ReactNode);
+  loadingLabel?: string;
+  errorMessage?: string;
+  fallback?: ReactNode;
+  triggerContent?: ReactNode;
+  triggerAriaLabel?: string;
+  path?: string;
+  as?: "json" | "text";
+  trigger?: "auto" | "manual";
+}
+
+// Browser timers use signed 32-bit millisecond delays. Whole-second refresh
+// intervals are capped at the largest value that remains below that boundary.
+export const MAX_REFRESH_INTERVAL_SECONDS = 2_147_483;
+export const MAX_REFRESH_INTERVAL_MS = MAX_REFRESH_INTERVAL_SECONDS * 1_000;
+
+export function SubFetch(props: SubFetchProps) {
+  const { itemId, previewSessionId, queriesDisabled, port, messages, setQueryState } = useCustomWidgetRuntime();
+  const [manualRun, setManualRun] = useState(false);
+  const params = useMemo(() => normalizeParams(props.params), [props.params]);
+  const paramsKey = useMemo(() => JSON.stringify(params), [params]);
+  useEffect(() => setManualRun(false), [paramsKey, props.requestId, props.trigger]);
+  const enabled = Boolean(
+    !queriesDisabled &&
+    (itemId || previewSessionId) &&
+    props.requestId &&
+    params &&
+    (props.trigger !== "manual" || manualRun),
+  );
+  const refreshMs = normalizeRefreshInterval(props.refreshInterval);
+  const query = useQuery({
+    queryKey: ["custom-widget", itemId ?? previewSessionId, props.requestId, paramsKey],
+    queryFn: ({ signal }) =>
+      port.query({ itemId, previewSessionId, requestId: props.requestId ?? "", params: params ?? {} }, signal),
+    enabled,
+    retry: 2,
+    refetchInterval: refreshMs,
+  });
+  useEffect(() => {
+    // Manual queries are local to their SubFetch instance. Publishing them by request ID makes
+    // repeated cards compete for the same data slot and can remount the active query mid-request.
+    if (!props.requestId || !setQueryState || props.trigger === "manual") return;
+    if (!enabled) {
+      setQueryState(props.requestId, null);
+      return;
+    }
+    const result = query.data;
+    setQueryState(props.requestId, {
+      data: result?.data ?? null,
+      status: {
+        loading: query.isFetching && !result,
+        ok: result?.ok,
+        status: result?.status,
+        statusText: result?.statusText,
+        error: result?.error ?? (query.error ? messages.requestFailed : undefined),
+      },
+    });
+  }, [
+    enabled,
+    messages.requestFailed,
+    props.requestId,
+    props.trigger,
+    query.data,
+    query.error,
+    query.isFetching,
+    setQueryState,
+  ]);
+
+  if (!props.requestId) return <RequestIdRequiredAlert />;
+  if (queriesDisabled) return props.trigger === "manual" ? (props.triggerContent ?? null) : null;
+  if (!itemId && !previewSessionId)
+    return props.trigger === "manual" && props.triggerContent
+      ? props.triggerContent
+      : (props.fallback ?? <Text c="dimmed">{messages.unsavedPreview}</Text>);
+  if (!params) return <RequestAlert message={messages.invalidParams} />;
+  if (props.trigger === "manual" && !manualRun) {
+    if (props.triggerContent) {
+      return (
+        <Box
+          component="button"
+          type="button"
+          aria-label={props.triggerAriaLabel ?? messages.loadRequest}
+          onClick={() => setManualRun(true)}
+          style={{
+            appearance: "none",
+            background: "transparent",
+            border: 0,
+            color: "inherit",
+            cursor: "pointer",
+            font: "inherit",
+            padding: 0,
+            textAlign: "inherit",
+            width: "100%",
+          }}
+        >
+          {props.triggerContent}
+        </Box>
+      );
+    }
+    return (
+      <Button size="compact-sm" variant="light" onClick={() => setManualRun(true)}>
+        {messages.loadRequest}
+      </Button>
+    );
+  }
+  if (!props.children && props.path === undefined && props.as === undefined) return null;
+
+  const result = query.data;
+  const requestError =
+    (query.error && !result ? messages.requestFailed : null) ??
+    (!result?.ok ? (result?.error ?? `${messages.requestFailed} (${result?.status ?? 0})`) : null);
+  if (!result && query.isPending) return props.fallback ?? <Loading label={props.loadingLabel ?? messages.loading} />;
+  if (requestError) {
+    return (
+      <RequestAlert message={props.errorMessage ?? requestError}>
+        <Button
+          size="compact-xs"
+          variant="subtle"
+          mt={4}
+          onClick={() => void query.refetch()}
+          loading={query.isFetching}
+        >
+          {messages.retry}
+        </Button>
+      </RequestAlert>
+    );
+  }
+
+  const content = renderContent(props, result?.data, {
+    ok: result?.ok ?? false,
+    status: result?.status ?? 0,
+    statusText: result?.statusText,
+    loading: false,
+  });
+  return <SubFetchDataContext.Provider value={result?.data}>{content}</SubFetchDataContext.Provider>;
+}
+
+export function normalizeRefreshInterval(value: number | undefined): number | false {
+  if (!value || !Number.isFinite(value) || value <= 0) return false;
+  return Math.max(1_000, Math.min(value, MAX_REFRESH_INTERVAL_SECONDS) * 1_000);
+}
+
+function renderContent(props: SubFetchProps, data: unknown, metadata: SubFetchMetadata) {
+  if (typeof props.children === "function") return props.children(data, metadata);
+  if (props.children) return props.children;
+  if (props.path === undefined && props.as === undefined) return null;
+  const value = getByPath(data, props.path);
+  if (props.as === "text") return <Text size="sm">{formatDisplayValue(value)}</Text>;
+  return (
+    <Code block style={{ fontSize: 11 }}>
+      {JSON.stringify(value, null, 2)}
+    </Code>
+  );
+}
+
+function Loading({ label }: { label: string }) {
+  return (
+    <div>
+      <Skeleton height={8} radius="xl" mb="xs" />
+      <Text c="dimmed">{label}</Text>
+    </div>
+  );
+}
+
+function RequestAlert({ message, children }: { message: string; children?: ReactNode }) {
+  return (
+    <Alert color="red" variant="light" icon={<IconAlertTriangle size={16} />} p="xs">
+      <Text size="xs">{message}</Text>
+      {children}
+    </Alert>
+  );
+}
diff --git a/packages/custom-widgets/src/runtime/types.ts b/packages/custom-widgets/src/runtime/types.ts
new file mode 100644
index 000000000..a72ba836b
--- /dev/null
+++ b/packages/custom-widgets/src/runtime/types.ts
@@ -0,0 +1,101 @@
+import type { ReactNode } from "react";
+
+export type RuntimeParam = string | number | boolean;
+export type CustomJsxRuntimeParams = Record<string, RuntimeParam>;
+
+export interface CustomWidgetRequestResult {
+  ok: boolean;
+  status: number;
+  statusText?: string;
+  data: unknown;
+  error?: string;
+  simulated?: boolean;
+  invalidates?: string[];
+}
+
+export interface CustomJsxRequestCapability {
+  id: string;
+  kind: "query" | "action";
+  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+  trigger: "load" | "manual";
+  minimumBoardPermission: "view" | "modify" | "full";
+  confirmation?: {
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    destructive?: boolean;
+  };
+  invalidates?: string[];
+}
+
+export interface RuntimeRequestInput {
+  itemId?: string;
+  previewSessionId?: string;
+  requestId: string;
+  params: CustomJsxRuntimeParams;
+}
+
+export interface RuntimeActionInput extends RuntimeRequestInput {
+  confirmed: boolean;
+}
+
+export interface RuntimeInvalidationInput {
+  itemId?: string;
+  previewSessionId?: string;
+  targets: readonly string[];
+}
+
+export interface RuntimeNotification {
+  kind: "success" | "error";
+  title: string;
+  message: string;
+}
+
+export interface CustomWidgetRuntimePort {
+  query(input: RuntimeRequestInput, signal?: AbortSignal): Promise<CustomWidgetRequestResult>;
+  executeAction(input: RuntimeActionInput): Promise<CustomWidgetRequestResult>;
+  invalidate(input: RuntimeInvalidationInput): Promise<void>;
+  confirm(input: { title: string; message: ReactNode; confirmLabel?: string; destructive?: boolean }): Promise<boolean>;
+  notify(notification: RuntimeNotification): void;
+}
+
+export interface CustomWidgetRuntimeMessages {
+  requestIdRequired: string;
+  unsavedPreview: string;
+  invalidParams: string;
+  loadRequest: string;
+  requestFailed: string;
+  loading: string;
+  retry: string;
+  widgetItemUnavailable: string;
+  actionsDisabledEditMode: string;
+  actionSimulated: string;
+  actionCompleted: string;
+  confirmDelete: string;
+  toggle: string;
+  refresh: string;
+}
+
+export interface CustomWidgetRuntimeValue {
+  itemId?: string;
+  definitionId?: string;
+  previewSessionId?: string;
+  previewLiveActions?: boolean;
+  queriesDisabled?: boolean;
+  isEditMode: boolean;
+  requestCapabilities: readonly CustomJsxRequestCapability[];
+  port: CustomWidgetRuntimePort;
+  messages: CustomWidgetRuntimeMessages;
+  setQueryState?(requestId: string, value: CustomWidgetPublishedQueryState | null): void;
+}
+
+export interface CustomWidgetPublishedQueryState {
+  data: unknown;
+  status: {
+    loading: boolean;
+    ok?: boolean;
+    status?: number;
+    statusText?: string;
+    error?: string;
+  };
+}
diff --git a/packages/custom-widgets/src/server/auth.ts b/packages/custom-widgets/src/server/auth.ts
new file mode 100644
index 000000000..d9e9ecfc5
--- /dev/null
+++ b/packages/custom-widgets/src/server/auth.ts
@@ -0,0 +1,45 @@
+type HeaderSetter = Pick<Headers, "set">;
+
+export const AUTH_HANDLERS: Record<
+  string,
+  (headers: HeaderSetter, url: URL, apiKey: string, headerName?: string) => void
+> = {
+  bearer: (headers, _url, apiKey) => {
+    headers.set("Authorization", `Bearer ${apiKey}`);
+  },
+  apiKeyHeader: (headers, _url, apiKey, headerName) => {
+    headers.set(headerName ?? "X-API-Key", apiKey);
+  },
+  apiKeyQuery: (_headers, url, apiKey, headerName) => {
+    url.searchParams.set(headerName ?? "api_key", apiKey);
+  },
+};
+
+export function buildSecretMap(secrets: Array<{ kind: string; value: string }>): Record<string, string> {
+  const map: Record<string, string> = {};
+  for (const secret of secrets) {
+    map[secret.kind] = secret.value;
+  }
+  return map;
+}
+
+export function applyAuth(
+  headers: HeaderSetter,
+  url: URL,
+  authType: string,
+  secrets: Array<{ kind: string; value: string }>,
+  headerName?: string | null,
+): void {
+  const secretMap = buildSecretMap(secrets);
+
+  if (authType === "basic" && secretMap.username && secretMap.password) {
+    const credentials = Buffer.from(`${secretMap.username}:${secretMap.password}`).toString("base64");
+    headers.set("Authorization", `Basic ${credentials}`);
+    return;
+  }
+
+  const handler = AUTH_HANDLERS[authType];
+  if (handler && secretMap.apiKey) {
+    handler(headers, url, secretMap.apiKey, headerName ?? undefined);
+  }
+}
diff --git a/packages/custom-widgets/src/server/errors.ts b/packages/custom-widgets/src/server/errors.ts
new file mode 100644
index 000000000..44e86dc6e
--- /dev/null
+++ b/packages/custom-widgets/src/server/errors.ts
@@ -0,0 +1,28 @@
+export type CustomWidgetDomainErrorCode =
+  | "BAD_GATEWAY"
+  | "BAD_REQUEST"
+  | "CONFLICT"
+  | "FORBIDDEN"
+  | "INTERNAL_SERVER_ERROR"
+  | "NOT_FOUND"
+  | "PAYLOAD_TOO_LARGE"
+  | "TOO_MANY_REQUESTS";
+
+export class CustomWidgetDomainError extends Error {
+  public readonly code: CustomWidgetDomainErrorCode;
+  public readonly reason?: "timeout";
+  public readonly retryAfterMs?: number;
+
+  public constructor(input: {
+    code: CustomWidgetDomainErrorCode;
+    message: string;
+    reason?: "timeout";
+    retryAfterMs?: number;
+  }) {
+    super(input.message);
+    this.name = "CustomWidgetDomainError";
+    this.code = input.code;
+    this.reason = input.reason;
+    this.retryAfterMs = input.retryAfterMs;
+  }
+}
diff --git a/packages/custom-widgets/src/server/index.ts b/packages/custom-widgets/src/server/index.ts
new file mode 100644
index 000000000..227aa28fa
--- /dev/null
+++ b/packages/custom-widgets/src/server/index.ts
@@ -0,0 +1,41 @@
+export { CustomWidgetDomainError } from "./errors";
+export type { CustomWidgetDomainErrorCode } from "./errors";
+export {
+  assertJsonBudget,
+  assertSafeStaticHeaders,
+  classifyAddress,
+  executeCustomWidgetRequest,
+  invalidateCustomWidgetResponseCache,
+  MAX_REQUEST_DURATION_MS,
+  MAX_REQUEST_BODY_BYTES,
+  MAX_RESPONSE_BODY_BYTES,
+  MAX_RESPONSE_JSON_DEPTH,
+  MAX_RESPONSE_JSON_NODES,
+  resolveAndValidateHost,
+  resolveSameOriginTarget,
+  validateCustomWidgetUrl,
+} from "./request-executor";
+export type { CustomWidgetAuthConfig, CustomWidgetHttpRequest, CustomWidgetHttpResponse } from "./request-executor";
+export {
+  CUSTOM_WIDGET_DEFINITION_CONCURRENCY_LIMIT,
+  CUSTOM_WIDGET_REQUEST_CONCURRENCY_TTL_MS,
+  CUSTOM_WIDGET_USER_ITEM_CONCURRENCY_LIMIT,
+  CustomWidgetRequestLimiter,
+} from "./request-limits";
+export type { RequestLimitInput, RequestLimiterOptions, RequestLimitStore } from "./request-limits";
+export { CustomWidgetPreviewSessionService } from "./preview-sessions";
+export type {
+  CreatePreviewSessionInput,
+  CustomWidgetPreviewJournalEntry,
+  CustomWidgetPreviewSession,
+  PreviewSessionServiceOptions,
+  PreviewSessionStore,
+} from "./preview-sessions";
+export {
+  hashRuntimeParams,
+  renderBoundValue,
+  renderRequestBody,
+  renderRequestTarget,
+  resolveCustomWidgetRequestValues,
+} from "./request-manifest";
+export type { CustomJsxRuntimeParams } from "./request-manifest";
diff --git a/packages/custom-widgets/src/server/network-policy.ts b/packages/custom-widgets/src/server/network-policy.ts
new file mode 100644
index 000000000..39064a7f5
--- /dev/null
+++ b/packages/custom-widgets/src/server/network-policy.ts
@@ -0,0 +1,213 @@
+import { lookup } from "node:dns/promises";
+import { BlockList, isIP } from "node:net";
+import type { LookupFunction } from "node:net";
+import { Agent } from "undici";
+
+import type { CustomJsxNetworkScope } from "../core";
+import { CustomWidgetDomainError } from "./errors";
+import { MAX_RESPONSE_BODY_BYTES } from "./response";
+
+const RESERVED_HEADERS = new Set([
+  "authorization",
+  "connection",
+  "content-length",
+  "cookie",
+  "expect",
+  "forwarded",
+  "host",
+  "keep-alive",
+  "proxy-authenticate",
+  "proxy-authorization",
+  "te",
+  "trailer",
+  "transfer-encoding",
+  "upgrade",
+  "via",
+  "x-forwarded-for",
+  "x-forwarded-host",
+  "x-forwarded-port",
+  "x-forwarded-proto",
+]);
+
+const blocked = new BlockList();
+for (const [address, prefix] of [
+  ["0.0.0.0", 8],
+  ["100.64.0.0", 10],
+  ["169.254.0.0", 16],
+  ["192.0.0.0", 24],
+  ["192.0.2.0", 24],
+  ["198.18.0.0", 15],
+  ["198.51.100.0", 24],
+  ["203.0.113.0", 24],
+  ["224.0.0.0", 4],
+  ["240.0.0.0", 4],
+] as const)
+  blocked.addSubnet(address, prefix, "ipv4");
+blocked.addAddress("::", "ipv6");
+for (const [address, prefix] of [
+  ["64:ff9b::", 96],
+  ["100::", 64],
+  ["2001:db8::", 32],
+  ["fe80::", 10],
+  ["ff00::", 8],
+] as const) {
+  blocked.addSubnet(address, prefix, "ipv6");
+}
+blocked.addAddress("fd00:ec2::254", "ipv6");
+
+const privateAddresses = new BlockList();
+privateAddresses.addSubnet("10.0.0.0", 8, "ipv4");
+privateAddresses.addSubnet("172.16.0.0", 12, "ipv4");
+privateAddresses.addSubnet("192.168.0.0", 16, "ipv4");
+privateAddresses.addSubnet("fc00::", 7, "ipv6");
+const loopbackAddresses = new BlockList();
+loopbackAddresses.addSubnet("127.0.0.0", 8, "ipv4");
+loopbackAddresses.addAddress("::1", "ipv6");
+
+type AddressFamily = 4 | 6;
+export type ResolvedAddress = { address: string; family: AddressFamily };
+export type HostResolver = (hostname: string) => Promise<ResolvedAddress[]>;
+export interface ResolveHostOptions {
+  signal?: AbortSignal;
+  resolver?: HostResolver;
+}
+type AddressClass = "public" | "private" | "loopback" | "blocked";
+const normalizeHostname = (value: string) =>
+  value.startsWith("[") && value.endsWith("]") ? value.slice(1, -1) : value;
+const familyName = (family: AddressFamily) => (family === 4 ? "ipv4" : "ipv6");
+
+export function classifyAddress(address: string): AddressClass {
+  const normalized = normalizeHostname(address).toLowerCase();
+  const family = isIP(normalized) as AddressFamily | 0;
+  if (!family || normalized.includes("::ffff:") || blocked.check(normalized, familyName(family))) return "blocked";
+  if (loopbackAddresses.check(normalized, familyName(family))) return "loopback";
+  if (privateAddresses.check(normalized, familyName(family))) return "private";
+  return "public";
+}
+
+export async function resolveAndValidateHost(
+  hostname: string,
+  scope: CustomJsxNetworkScope,
+  options: ResolveHostOptions = {},
+): Promise<ResolvedAddress[]> {
+  const normalized = normalizeHostname(hostname);
+  const family = isIP(normalized) as AddressFamily | 0;
+  throwIfAborted(options.signal);
+  const addresses = family
+    ? [{ address: normalized, family }]
+    : await abortable(
+        options.resolver?.(normalized) ??
+          (lookup(normalized, { all: true, verbatim: true }) as Promise<ResolvedAddress[]>),
+        options.signal,
+      );
+  throwIfAborted(options.signal);
+  if (!addresses.length)
+    throw new CustomWidgetDomainError({ code: "BAD_REQUEST", message: "Target host did not resolve" });
+  for (const address of addresses) {
+    const classification = classifyAddress(address.address);
+    const allowed =
+      classification === "public" ||
+      (classification === "private" && scope !== "public") ||
+      (classification === "loopback" && scope === "loopback");
+    if (!allowed)
+      throw new CustomWidgetDomainError({
+        code: "FORBIDDEN",
+        message: `Target address is not allowed by the ${scope} network scope`,
+      });
+  }
+  return addresses;
+}
+
+function throwIfAborted(signal?: AbortSignal): void {
+  if (signal?.aborted) throw signal.reason ?? createAbortError();
+}
+
+function abortable<T>(operation: Promise<T>, signal?: AbortSignal): Promise<T> {
+  if (!signal) return operation;
+  if (signal.aborted) return Promise.reject(signal.reason ?? createAbortError());
+
+  return new Promise<T>((resolve, reject) => {
+    const onAbort = () => {
+      signal.removeEventListener("abort", onAbort);
+      reject(signal.reason ?? createAbortError());
+    };
+    signal.addEventListener("abort", onAbort, { once: true });
+    operation.then(
+      (value) => {
+        signal.removeEventListener("abort", onAbort);
+        resolve(value);
+      },
+      (error: unknown) => {
+        signal.removeEventListener("abort", onAbort);
+        reject(error);
+      },
+    );
+  });
+}
+
+function createAbortError(): Error {
+  const error = new Error("Operation aborted");
+  error.name = "AbortError";
+  return error;
+}
+
+export function validateCustomWidgetUrl(value: string | URL): URL {
+  let url: URL;
+  try {
+    url = new URL(value);
+  } catch {
+    throw new CustomWidgetDomainError({ code: "BAD_REQUEST", message: "Invalid custom widget URL" });
+  }
+  if (url.protocol !== "http:" && url.protocol !== "https:")
+    throw new CustomWidgetDomainError({ code: "BAD_REQUEST", message: "Only HTTP and HTTPS URLs are allowed" });
+  if (url.username || url.password)
+    throw new CustomWidgetDomainError({ code: "BAD_REQUEST", message: "URL credentials are not allowed" });
+  if (url.hash) throw new CustomWidgetDomainError({ code: "BAD_REQUEST", message: "URL fragments are not allowed" });
+  return url;
+}
+
+export function resolveSameOriginTarget(baseValue: string, targetValue?: string | URL): URL {
+  const base = validateCustomWidgetUrl(baseValue);
+  const target = validateCustomWidgetUrl(targetValue ?? base);
+  if (target.origin !== base.origin)
+    throw new CustomWidgetDomainError({
+      code: "FORBIDDEN",
+      message: "Named requests must stay on the widget's origin",
+    });
+  return target;
+}
+
+export function assertSafeStaticHeaders(headers: Record<string, string> | undefined): void {
+  for (const name of Object.keys(headers ?? {})) {
+    const value = name.trim().toLowerCase();
+    if (
+      RESERVED_HEADERS.has(value) ||
+      value.startsWith("proxy-") ||
+      value.startsWith("sec-") ||
+      value.startsWith("x-forwarded-")
+    ) {
+      throw new CustomWidgetDomainError({ code: "BAD_REQUEST", message: `Header '${name}' is reserved` });
+    }
+  }
+}
+
+export function createPinnedAgent(addresses: ResolvedAddress[], timeoutMs: number) {
+  const customLookup: LookupFunction = (_hostname, options, callback) => {
+    const family = options.family === 4 || options.family === 6 ? options.family : undefined;
+    const candidates = family ? addresses.filter((entry) => entry.family === family) : addresses;
+    const selected = candidates[0];
+    if (!selected) {
+      const error = new Error("No validated address for the requested family") as NodeJS.ErrnoException;
+      error.code = "ENOTFOUND";
+      callback(error, "", 0);
+    } else if (options.all) callback(null, candidates);
+    else callback(null, selected.address, selected.family);
+  };
+  return new Agent({
+    connect: { lookup: customLookup },
+    connectTimeout: timeoutMs,
+    headersTimeout: timeoutMs,
+    bodyTimeout: timeoutMs,
+    maxResponseSize: MAX_RESPONSE_BODY_BYTES,
+  });
+}
diff --git a/packages/custom-widgets/src/server/preview-sessions.ts b/packages/custom-widgets/src/server/preview-sessions.ts
new file mode 100644
index 000000000..10c617a90
--- /dev/null
+++ b/packages/custom-widgets/src/server/preview-sessions.ts
@@ -0,0 +1,258 @@
+import { z } from "zod/v4";
+
+import {
+  customWidgetOptionsSchema,
+  customWidgetRequestsSchema,
+  customWidgetSecretKinds,
+  customWidgetSourcesSchema,
+  hasSameCustomWidgetSourceAuthentication,
+} from "../core";
+import type { CustomJsxRequest, CustomWidgetOptions, CustomWidgetSource } from "../core";
+import { CustomWidgetDomainError } from "./errors";
+
+const SESSION_TTL_MS = 10 * 60_000;
+const MAX_JOURNAL_ENTRIES = 50;
+const MAX_UPDATE_ATTEMPTS = 8;
+
+const encryptedSecretSchema = z.object({
+  sourceId: z.string(),
+  kind: z.enum(customWidgetSecretKinds),
+  value: z.string(),
+});
+
+const sessionSchema = z.object({
+  id: z.string(),
+  userId: z.string(),
+  revision: z.number().int().nonnegative(),
+  expiresAt: z.number(),
+  sources: customWidgetSourcesSchema,
+  secrets: z.array(encryptedSecretSchema),
+  requests: customWidgetRequestsSchema,
+  name: z.string(),
+  template: z.string(),
+  optionDefinitions: customWidgetOptionsSchema,
+  options: z.record(z.string(), z.unknown()),
+  definitionId: z.string().optional(),
+  liveActions: z.boolean(),
+});
+export type CustomWidgetPreviewSession = z.infer<typeof sessionSchema>;
+
+const journalEntrySchema = z.object({
+  id: z.string(),
+  requestId: z.string(),
+  kind: z.enum(["query", "action"]),
+  method: z.enum(["GET", "POST", "PUT", "PATCH", "DELETE"]),
+  path: z.string(),
+  status: z.number().nullable(),
+  durationMs: z.number().nonnegative(),
+  simulated: z.boolean(),
+  timestamp: z.number(),
+});
+export type CustomWidgetPreviewJournalEntry = z.infer<typeof journalEntrySchema>;
+
+export interface CreatePreviewSessionInput {
+  userId: string;
+  sources: Record<string, CustomWidgetSource>;
+  secrets: Array<{ sourceId: string; kind: (typeof customWidgetSecretKinds)[number]; value: string }>;
+  requests: Record<string, CustomJsxRequest>;
+  name: string;
+  template: string;
+  optionDefinitions: CustomWidgetOptions;
+  options: Record<string, unknown>;
+  definitionId?: string;
+}
+
+export interface PreviewSessionStore {
+  saveSession(id: string, value: unknown, ttlMs: number): Promise<void>;
+  compareAndSwapSession(id: string, expectedRevision: number, value: unknown, ttlMs: number): Promise<boolean>;
+  getSession(id: string): Promise<unknown>;
+  deleteSession(id: string): Promise<void>;
+  appendJournal(id: string, value: unknown, maxEntries: number, ttlMs: number): Promise<void>;
+  getJournal(id: string, maxEntries: number): Promise<unknown[]>;
+}
+
+export interface PreviewSessionServiceOptions {
+  createId(): string;
+  encrypt(value: string): string;
+  decrypt(value: string): string;
+  now?: () => number;
+  store?: PreviewSessionStore;
+}
+
+export class CustomWidgetPreviewSessionService {
+  private readonly sessions = new Map<string, CustomWidgetPreviewSession>();
+  private readonly journals = new Map<string, CustomWidgetPreviewJournalEntry[]>();
+  private readonly now: () => number;
+
+  public constructor(private readonly options: PreviewSessionServiceOptions) {
+    this.now = options.now ?? Date.now;
+  }
+
+  public async create(input: CreatePreviewSessionInput) {
+    const sourceIds = new Set(Object.keys(input.sources));
+    if (input.secrets.some((secret) => !sourceIds.has(secret.sourceId))) {
+      throw new CustomWidgetDomainError({
+        code: "BAD_REQUEST",
+        message: "A preview secret references an unknown source",
+      });
+    }
+    const session: CustomWidgetPreviewSession = {
+      id: this.options.createId(),
+      userId: input.userId,
+      revision: 0,
+      expiresAt: this.now() + SESSION_TTL_MS,
+      sources: input.sources,
+      secrets: input.secrets.map((secret) => ({ ...secret, value: this.options.encrypt(secret.value) })),
+      requests: input.requests,
+      name: input.name,
+      template: input.template,
+      optionDefinitions: input.optionDefinitions,
+      options: input.options,
+      definitionId: input.definitionId,
+      liveActions: false,
+    };
+    await this.save(session);
+    return { id: session.id, expiresAt: session.expiresAt, liveActions: false as const };
+  }
+
+  public async get(id: string, userId: string): Promise<CustomWidgetPreviewSession> {
+    const candidate = this.options.store ? await this.options.store.getSession(id) : this.sessions.get(id);
+    const parsed = sessionSchema.safeParse(parseStoredValue(candidate));
+    if (!parsed.success || parsed.data.expiresAt <= this.now()) {
+      if (this.options.store) await this.options.store.deleteSession(id);
+      else this.sessions.delete(id);
+      throw new CustomWidgetDomainError({ code: "NOT_FOUND", message: "Preview session expired or was not found" });
+    }
+    if (parsed.data.userId !== userId) {
+      throw new CustomWidgetDomainError({ code: "NOT_FOUND", message: "Preview session expired or was not found" });
+    }
+    return parsed.data;
+  }
+
+  public async setLiveActions(id: string, userId: string, enabled: boolean) {
+    const session = await this.update(id, userId, (current) => ({ ...current, liveActions: enabled }));
+    return { id, expiresAt: session.expiresAt, liveActions: enabled };
+  }
+
+  public async appendJournal(
+    session: CustomWidgetPreviewSession,
+    input: Omit<CustomWidgetPreviewJournalEntry, "id" | "timestamp">,
+  ): Promise<void> {
+    const value = journalEntrySchema.parse({ ...input, id: this.options.createId(), timestamp: this.now() });
+    const ttlMs = Math.max(1, session.expiresAt - this.now());
+    if (this.options.store) await this.options.store.appendJournal(session.id, value, MAX_JOURNAL_ENTRIES, ttlMs);
+    else this.journals.set(session.id, [value, ...(this.journals.get(session.id) ?? [])].slice(0, MAX_JOURNAL_ENTRIES));
+  }
+
+  public async getJournal(id: string, userId: string): Promise<CustomWidgetPreviewJournalEntry[]> {
+    await this.get(id, userId);
+    const entries = this.options.store
+      ? await this.options.store.getJournal(id, MAX_JOURNAL_ENTRIES)
+      : (this.journals.get(id) ?? []);
+    return entries.flatMap((entry) => {
+      const parsed = journalEntrySchema.safeParse(parseStoredValue(entry));
+      return parsed.success ? [parsed.data] : [];
+    });
+  }
+
+  public getSecrets(session: CustomWidgetPreviewSession, sourceId: string) {
+    return session.secrets
+      .filter((secret) => secret.sourceId === sourceId)
+      .map((secret) => ({ kind: secret.kind, value: this.options.decrypt(secret.value) }));
+  }
+
+  public async setSecrets(
+    id: string,
+    userId: string,
+    secrets: Array<{ sourceId: string; kind: (typeof customWidgetSecretKinds)[number]; value: string }>,
+  ) {
+    const next = await this.update(id, userId, (session) => {
+      const sourceIds = new Set(Object.keys(session.sources));
+      if (secrets.some((secret) => !sourceIds.has(secret.sourceId))) {
+        throw new CustomWidgetDomainError({
+          code: "BAD_REQUEST",
+          message: "A preview secret references an unknown source",
+        });
+      }
+      const replacements = new Set(secrets.map((secret) => `${secret.sourceId}:${secret.kind}`));
+      return {
+        ...session,
+        secrets: [
+          ...session.secrets.filter((secret) => !replacements.has(`${secret.sourceId}:${secret.kind}`)),
+          ...secrets.map((secret) => ({ ...secret, value: this.options.encrypt(secret.value) })),
+        ],
+      };
+    });
+    return { id, expiresAt: next.expiresAt };
+  }
+
+  public async configureSource(
+    id: string,
+    userId: string,
+    sourceId: string,
+    source: CustomWidgetSource,
+    secrets: Array<{ sourceId: string; kind: (typeof customWidgetSecretKinds)[number]; value: string }>,
+  ) {
+    const next = await this.update(id, userId, (session) => {
+      const currentSource = session.sources[sourceId];
+      if (!currentSource) {
+        throw new CustomWidgetDomainError({ code: "NOT_FOUND", message: "Preview source was not found" });
+      }
+      if (!hasSameCustomWidgetSourceAuthentication(currentSource, source)) {
+        throw new CustomWidgetDomainError({
+          code: "BAD_REQUEST",
+          message: "Preview source authentication changed; create a new configuration request",
+        });
+      }
+      const replacements = new Set(secrets.map((secret) => `${secret.sourceId}:${secret.kind}`));
+      return {
+        ...session,
+        sources: {
+          ...session.sources,
+          [sourceId]: { ...currentSource, baseUrl: source.baseUrl, networkScope: source.networkScope },
+        },
+        secrets: [
+          ...session.secrets.filter((secret) => !replacements.has(`${secret.sourceId}:${secret.kind}`)),
+          ...secrets.map((secret) => ({ ...secret, value: this.options.encrypt(secret.value) })),
+        ],
+      };
+    });
+    return { id, expiresAt: next.expiresAt };
+  }
+
+  private async update(
+    id: string,
+    userId: string,
+    mutate: (session: CustomWidgetPreviewSession) => CustomWidgetPreviewSession,
+  ) {
+    for (let attempt = 0; attempt < MAX_UPDATE_ATTEMPTS; attempt += 1) {
+      const current = await this.get(id, userId);
+      const next = { ...mutate(current), revision: current.revision + 1 };
+      const ttlMs = Math.max(0, next.expiresAt - this.now());
+      if (!ttlMs) throw new CustomWidgetDomainError({ code: "NOT_FOUND", message: "Preview session expired" });
+      if (this.options.store) {
+        if (await this.options.store.compareAndSwapSession(id, current.revision, next, ttlMs)) return next;
+      } else if (this.sessions.get(id)?.revision === current.revision) {
+        this.sessions.set(id, next);
+        return next;
+      }
+    }
+    throw new CustomWidgetDomainError({ code: "CONFLICT", message: "Preview session changed too many times; retry" });
+  }
+
+  private async save(session: CustomWidgetPreviewSession): Promise<void> {
+    const ttlMs = Math.max(0, session.expiresAt - this.now());
+    if (!ttlMs) throw new CustomWidgetDomainError({ code: "NOT_FOUND", message: "Preview session expired" });
+    if (this.options.store) await this.options.store.saveSession(session.id, session, ttlMs);
+    else this.sessions.set(session.id, session);
+  }
+}
+
+function parseStoredValue(value: unknown): unknown {
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value) as unknown;
+  } catch {
+    return null;
+  }
+}
diff --git a/packages/custom-widgets/src/server/request-dispatcher-lifecycle.ts b/packages/custom-widgets/src/server/request-dispatcher-lifecycle.ts
new file mode 100644
index 000000000..b551c324a
--- /dev/null
+++ b/packages/custom-widgets/src/server/request-dispatcher-lifecycle.ts
@@ -0,0 +1,62 @@
+import type { createPinnedAgent } from "./network-policy";
+
+export const DISPATCHER_CLOSE_GRACE_MS = 1_000;
+
+type CustomWidgetDispatcher = ReturnType<typeof createPinnedAgent>;
+
+export async function closeDispatcher(
+  dispatcher: CustomWidgetDispatcher,
+  deadlineSignal: AbortSignal,
+): Promise<boolean> {
+  const cleanupController = new AbortController();
+  const timeout = setTimeout(() => cleanupController.abort(), DISPATCHER_CLOSE_GRACE_MS);
+  try {
+    await abortable(dispatcher.close(), AbortSignal.any([deadlineSignal, cleanupController.signal]));
+    return true;
+  } catch (error) {
+    detachDispatcherDestroy(dispatcher);
+    if (cleanupController.signal.aborted && !deadlineSignal.aborted) return false;
+    throw error;
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+function detachDispatcherDestroy(dispatcher: CustomWidgetDispatcher): void {
+  try {
+    void dispatcher.destroy().catch(() => undefined);
+  } catch {
+    // Cleanup is best effort after its bounded grace period.
+  }
+}
+
+function abortable<T>(operation: Promise<T>, signal: AbortSignal): Promise<T> {
+  if (signal.aborted) {
+    void operation.catch(() => undefined);
+    return Promise.reject(signal.reason ?? createAbortError());
+  }
+
+  return new Promise<T>((resolve, reject) => {
+    const onAbort = () => {
+      signal.removeEventListener("abort", onAbort);
+      reject(signal.reason ?? createAbortError());
+    };
+    signal.addEventListener("abort", onAbort, { once: true });
+    operation.then(
+      (value) => {
+        signal.removeEventListener("abort", onAbort);
+        resolve(value);
+      },
+      (error: unknown) => {
+        signal.removeEventListener("abort", onAbort);
+        reject(error);
+      },
+    );
+  });
+}
+
+function createAbortError(): Error {
+  const error = new Error("Operation aborted");
+  error.name = "AbortError";
+  return error;
+}
diff --git a/packages/custom-widgets/src/server/request-executor.ts b/packages/custom-widgets/src/server/request-executor.ts
new file mode 100644
index 000000000..db7976761
--- /dev/null
+++ b/packages/custom-widgets/src/server/request-executor.ts
@@ -0,0 +1,294 @@
+import { Buffer } from "node:buffer";
+import { STATUS_CODES } from "node:http";
+import { Headers, Response } from "undici";
+
+import type { CustomJsxNetworkScope, CustomWidgetMethod } from "../core";
+import { applyAuth } from "./auth";
+import { CustomWidgetDomainError } from "./errors";
+import {
+  assertSafeStaticHeaders,
+  createPinnedAgent,
+  resolveAndValidateHost,
+  resolveSameOriginTarget,
+  validateCustomWidgetUrl,
+} from "./network-policy";
+import { closeDispatcher } from "./request-dispatcher-lifecycle";
+import { parseResponseBody } from "./response";
+
+export {
+  assertSafeStaticHeaders,
+  classifyAddress,
+  resolveAndValidateHost,
+  resolveSameOriginTarget,
+  validateCustomWidgetUrl,
+} from "./network-policy";
+export {
+  assertJsonBudget,
+  MAX_RESPONSE_BODY_BYTES,
+  MAX_RESPONSE_JSON_DEPTH,
+  MAX_RESPONSE_JSON_NODES,
+} from "./response";
+
+export const MAX_REQUEST_BODY_BYTES = 10 * 1024;
+const REQUEST_TIMEOUT_MS = 10_000;
+const MAX_QUERY_REDIRECTS = 3;
+const MAX_RESPONSE_CACHE_ENTRIES = 1_000;
+export const MAX_REQUEST_DURATION_MS = 45_000;
+const TIMEOUT_ERROR_CODES = new Set(["UND_ERR_CONNECT_TIMEOUT", "UND_ERR_HEADERS_TIMEOUT", "UND_ERR_BODY_TIMEOUT"]);
+const RESPONSE_TOO_LARGE_ERROR_CODE = "UND_ERR_RES_EXCEEDED_MAX_SIZE";
+
+export interface CustomWidgetAuthConfig {
+  type: string;
+  secrets: Array<{ kind: string; value: string }>;
+  headerName?: string | null;
+}
+
+export interface CustomWidgetHttpRequest {
+  baseUrl: string;
+  targetUrl?: string | URL;
+  method: CustomWidgetMethod;
+  body?: string;
+  staticHeaders?: Record<string, string>;
+  auth?: CustomWidgetAuthConfig;
+  networkScope: CustomJsxNetworkScope;
+  kind: "query" | "action";
+  cacheKey?: string;
+  cacheTtlSeconds?: number;
+  logError?: (event: { origin: string; method: CustomWidgetMethod; errorName: string; reason?: "timeout" }) => void;
+}
+
+export interface CustomWidgetHttpResponse {
+  ok: boolean;
+  status: number;
+  statusText: string;
+  data: unknown;
+}
+const cache = new Map<string, { expiresAt: number; response: CustomWidgetHttpResponse }>();
+const inFlight = new Map<string, Promise<CustomWidgetHttpResponse>>();
+let cacheEpoch = 0;
+
+type RequestHopResult =
+  | { kind: "response"; response: CustomWidgetHttpResponse }
+  | { kind: "redirect"; location: string | null; statusCode: number };
+
+async function performRequest(input: CustomWidgetHttpRequest): Promise<CustomWidgetHttpResponse> {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), MAX_REQUEST_DURATION_MS);
+  try {
+    return await performRequestWithinDeadline(input, controller.signal);
+  } catch (error) {
+    if (controller.signal.aborted) {
+      throw new CustomWidgetDomainError({
+        code: "BAD_GATEWAY",
+        message: "External request exceeded the total time limit",
+        reason: "timeout",
+      });
+    }
+    if (error instanceof CustomWidgetDomainError) throw error;
+    input.logError?.({
+      origin: URL.canParse(input.baseUrl) ? new URL(input.baseUrl).origin : "invalid",
+      method: input.method,
+      errorName: "TransportError",
+    });
+    throw new CustomWidgetDomainError({
+      code: "BAD_GATEWAY",
+      message: "External request failed",
+    });
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+async function performRequestWithinDeadline(
+  input: CustomWidgetHttpRequest,
+  deadlineSignal: AbortSignal,
+): Promise<CustomWidgetHttpResponse> {
+  assertRequest(input);
+  const baseUrl = validateCustomWidgetUrl(input.baseUrl);
+  let currentUrl = resolveSameOriginTarget(input.baseUrl, input.targetUrl);
+  let currentMethod = input.method;
+  let currentBody = input.body;
+  const maxRedirects = input.kind === "query" ? MAX_QUERY_REDIRECTS : 0;
+  for (let redirects = 0; ; redirects += 1) {
+    const dispatcher = createPinnedAgent(
+      await resolveAndValidateHost(currentUrl.hostname, input.networkScope, { signal: deadlineSignal }),
+      REQUEST_TIMEOUT_MS,
+    );
+    const headers = buildHeaders(input, currentUrl, currentBody);
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
+    let result: RequestHopResult | undefined;
+    let lifecycleFailure: { error: unknown } | undefined;
+    try {
+      const responseData = await dispatcher.request({
+        origin: currentUrl.origin,
+        path: `${currentUrl.pathname}${currentUrl.search}`,
+        method: currentMethod,
+        headers,
+        body: currentBody,
+        signal: AbortSignal.any([deadlineSignal, controller.signal]),
+      });
+      if (![301, 302, 303, 307, 308].includes(responseData.statusCode)) {
+        const body = await responseData.body.arrayBuffer();
+        const response = new Response(body.byteLength > 0 ? body : null, {
+          status: responseData.statusCode,
+          statusText: STATUS_CODES[responseData.statusCode] ?? "",
+          headers: normalizeResponseHeaders(responseData.headers),
+        });
+        result = {
+          kind: "response",
+          response: {
+            ok: response.ok,
+            status: response.status,
+            statusText: response.statusText,
+            data: await parseResponseBody(response),
+          },
+        };
+      } else {
+        await responseData.body.dump();
+        result = {
+          kind: "redirect",
+          location: normalizeResponseHeaders(responseData.headers).get("location"),
+          statusCode: responseData.statusCode,
+        };
+      }
+    } catch (error) {
+      lifecycleFailure = { error };
+    } finally {
+      clearTimeout(timeout);
+      try {
+        const closed = await closeDispatcher(dispatcher, deadlineSignal);
+        if (!closed)
+          input.logError?.({
+            origin: currentUrl.origin,
+            method: currentMethod,
+            errorName: "DispatcherCloseTimeout",
+          });
+      } catch {
+        input.logError?.({
+          origin: currentUrl.origin,
+          method: currentMethod,
+          errorName: "DispatcherCloseError",
+        });
+      }
+    }
+
+    if (lifecycleFailure) {
+      const { error } = lifecycleFailure;
+      if (error instanceof CustomWidgetDomainError) throw error;
+      if (error instanceof Error && "code" in error && error.code === RESPONSE_TOO_LARGE_ERROR_CODE) {
+        throw new CustomWidgetDomainError({
+          code: "PAYLOAD_TOO_LARGE",
+          message: "Response exceeds the 1 MiB limit",
+        });
+      }
+      const timedOut = isCustomWidgetRequestTimeoutError(error, deadlineSignal, controller.signal);
+      input.logError?.({
+        origin: currentUrl.origin,
+        method: currentMethod,
+        errorName: timedOut ? "RequestTimeout" : "TransportError",
+        ...(timedOut ? { reason: "timeout" as const } : {}),
+      });
+      throw new CustomWidgetDomainError({
+        code: "BAD_GATEWAY",
+        message: timedOut ? "External request timed out" : "External request failed",
+        ...(timedOut ? { reason: "timeout" as const } : {}),
+      });
+    }
+
+    if (!result)
+      throw new CustomWidgetDomainError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: "External request did not complete",
+      });
+    if (result.kind === "response") return result.response;
+    if (redirects >= maxRedirects)
+      throw new CustomWidgetDomainError({ code: "BAD_GATEWAY", message: "Upstream redirect limit exceeded" });
+    if (!result.location)
+      throw new CustomWidgetDomainError({ code: "BAD_GATEWAY", message: "Upstream redirect is missing a location" });
+    const redirected = validateCustomWidgetUrl(new URL(result.location, currentUrl));
+    if (redirected.origin !== baseUrl.origin)
+      throw new CustomWidgetDomainError({ code: "FORBIDDEN", message: "Cross-origin redirects are not allowed" });
+    if (result.statusCode === 303 || ([301, 302].includes(result.statusCode) && currentMethod === "POST")) {
+      currentMethod = "GET";
+      currentBody = undefined;
+    }
+    currentUrl = redirected;
+  }
+}
+
+export function isCustomWidgetRequestTimeoutError(error: unknown, ...signals: readonly AbortSignal[]): boolean {
+  if (signals.some((signal) => signal.aborted)) return true;
+  if (!(error instanceof Error)) return false;
+  if (error.name.includes("Timeout")) return true;
+  const code = "code" in error && typeof error.code === "string" ? error.code : undefined;
+  return code !== undefined && TIMEOUT_ERROR_CODES.has(code);
+}
+
+function normalizeResponseHeaders(values: Record<string, string | string[] | undefined>) {
+  const headers = new Headers();
+  for (const [name, value] of Object.entries(values)) {
+    if (Array.isArray(value)) value.forEach((entry) => headers.append(name, entry));
+    else if (value !== undefined) headers.set(name, value);
+  }
+  return headers;
+}
+
+function assertRequest(input: CustomWidgetHttpRequest): void {
+  if (input.body !== undefined && Buffer.byteLength(input.body, "utf8") > MAX_REQUEST_BODY_BYTES)
+    throw new CustomWidgetDomainError({ code: "PAYLOAD_TOO_LARGE", message: "Request body exceeds the 10 KiB limit" });
+  assertSafeStaticHeaders(input.staticHeaders);
+}
+
+function buildHeaders(input: CustomWidgetHttpRequest, url: URL, body: string | undefined): Headers {
+  const headers = new Headers({ Accept: "application/json" });
+  for (const [name, value] of Object.entries(input.staticHeaders ?? {})) headers.set(name, value);
+  if (body !== undefined) headers.set("Content-Type", "application/json");
+  else headers.delete("Content-Type");
+  if (input.auth) {
+    if (input.auth.type === "apiKeyHeader") assertSafeStaticHeaders({ [input.auth.headerName ?? "X-API-Key"]: "" });
+    applyAuth(headers, url, input.auth.type, input.auth.secrets, input.auth.headerName);
+  }
+  return headers;
+}
+
+export async function executeCustomWidgetRequest(input: CustomWidgetHttpRequest): Promise<CustomWidgetHttpResponse> {
+  const key = input.kind === "query" ? input.cacheKey : undefined;
+  if (!key) return performRequest(input);
+  const cached = cache.get(key);
+  if (cached && cached.expiresAt > Date.now()) return cached.response;
+  if (cached) cache.delete(key);
+  const pending = inFlight.get(key);
+  if (pending) return pending;
+  const requestEpoch = cacheEpoch;
+  let request: Promise<CustomWidgetHttpResponse>;
+  request = performRequest(input)
+    .then((response) => {
+      if (response.ok && (input.cacheTtlSeconds ?? 0) > 0 && requestEpoch === cacheEpoch) {
+        pruneCache();
+        cache.set(key, { expiresAt: Date.now() + (input.cacheTtlSeconds ?? 0) * 1000, response });
+      }
+      return response;
+    })
+    .finally(() => {
+      if (inFlight.get(key) === request) inFlight.delete(key);
+    });
+  inFlight.set(key, request);
+  return request;
+}
+
+export function invalidateCustomWidgetResponseCache(prefixes: readonly string[]): void {
+  if (prefixes.length === 0) return;
+  cacheEpoch += 1;
+  for (const key of cache.keys()) if (prefixes.some((prefix) => key.startsWith(prefix))) cache.delete(key);
+  for (const key of inFlight.keys()) if (prefixes.some((prefix) => key.startsWith(prefix))) inFlight.delete(key);
+}
+
+function pruneCache(): void {
+  for (const [key, entry] of cache) if (entry.expiresAt <= Date.now()) cache.delete(key);
+  while (cache.size >= MAX_RESPONSE_CACHE_ENTRIES) {
+    const key = cache.keys().next().value as string | undefined;
+    if (!key) return;
+    cache.delete(key);
+  }
+}
diff --git a/packages/custom-widgets/src/server/request-limits.ts b/packages/custom-widgets/src/server/request-limits.ts
new file mode 100644
index 000000000..565d8ee84
--- /dev/null
+++ b/packages/custom-widgets/src/server/request-limits.ts
@@ -0,0 +1,161 @@
+import { createHash, randomUUID } from "node:crypto";
+
+import { CustomWidgetDomainError } from "./errors";
+
+const WINDOW_MS = 60_000;
+// A query may legally follow three redirects with a ten-second timeout per hop.
+// Keep the lease above that total and identify every acquisition so a late
+// release can never remove capacity owned by a newer request.
+export const CUSTOM_WIDGET_REQUEST_CONCURRENCY_TTL_MS = 60_000;
+export const CUSTOM_WIDGET_USER_ITEM_CONCURRENCY_LIMIT = 4;
+export const CUSTOM_WIDGET_DEFINITION_CONCURRENCY_LIMIT = 8;
+const CATEGORY_LIMITS = { query: 60, action: 10, delete: 3 } as const;
+const DEFINITION_CATEGORY_LIMITS = { query: 240, action: 40, delete: 12 } as const;
+type RequestCategory = keyof typeof CATEGORY_LIMITS;
+
+export interface RequestLimitInput {
+  category: RequestCategory;
+  userId?: string;
+  anonymousId?: string;
+  itemId: string;
+  definitionId: string;
+}
+
+export interface RequestLimitStore {
+  incrementRate(key: string, windowMs: number): Promise<{ count: number; retryAfterMs: number }>;
+  acquireConcurrency(key: string, ownerId: string, limit: number, ttlMs: number): Promise<boolean>;
+  releaseConcurrency(key: string, ownerId: string): Promise<void>;
+}
+
+export interface RequestLimiterOptions {
+  store?: RequestLimitStore;
+  onStoreError?: (error: unknown) => void;
+}
+
+export class CustomWidgetRequestLimiter {
+  private readonly rateBuckets = new Map<string, number[]>();
+  private readonly concurrency = new Map<string, number>();
+
+  public constructor(private readonly options: RequestLimiterOptions = {}) {}
+
+  public async acquire(input: RequestLimitInput): Promise<() => Promise<void>> {
+    const identity = input.userId ? `user:${input.userId}` : `anonymous:${input.anonymousId ?? "unknown"}`;
+    const rateKey = `custom-widget:rate:${input.category}:${hashKey(identity, input.itemId)}`;
+    const definitionRateKey = `custom-widget:rate:v2:definition:${input.category}:${hashKey(input.definitionId)}`;
+    const userKey = `custom-widget:concurrency:v2:user-item:${hashKey(identity, input.itemId)}`;
+    const definitionKey = `custom-widget:concurrency:v2:definition:${hashKey(input.definitionId)}`;
+    if (!this.options.store)
+      return this.acquireLocal(rateKey, definitionRateKey, userKey, definitionKey, input.category);
+    try {
+      return await this.acquireStored(
+        rateKey,
+        definitionRateKey,
+        userKey,
+        definitionKey,
+        input.category,
+        this.options.store,
+      );
+    } catch (error) {
+      if (error instanceof CustomWidgetDomainError) throw error;
+      this.options.onStoreError?.(error);
+      throw new CustomWidgetDomainError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: "Request limiter is unavailable",
+      });
+    }
+  }
+
+  private acquireLocal(
+    rateKey: string,
+    definitionRateKey: string,
+    userKey: string,
+    definitionKey: string,
+    category: RequestCategory,
+  ) {
+    const now = Date.now();
+    this.acquireLocalRate(rateKey, CATEGORY_LIMITS[category], now);
+    this.acquireLocalRate(definitionRateKey, DEFINITION_CATEGORY_LIMITS[category], now);
+    this.acquireLocalConcurrency(userKey, CUSTOM_WIDGET_USER_ITEM_CONCURRENCY_LIMIT);
+    try {
+      this.acquireLocalConcurrency(definitionKey, CUSTOM_WIDGET_DEFINITION_CONCURRENCY_LIMIT);
+    } catch (error) {
+      this.releaseLocalConcurrency(userKey);
+      throw error;
+    }
+    return async () => {
+      this.releaseLocalConcurrency(userKey);
+      this.releaseLocalConcurrency(definitionKey);
+    };
+  }
+
+  private async acquireStored(
+    rateKey: string,
+    definitionRateKey: string,
+    userKey: string,
+    definitionKey: string,
+    category: RequestCategory,
+    store: RequestLimitStore,
+  ) {
+    const ownerId = randomUUID();
+    const rate = await store.incrementRate(rateKey, WINDOW_MS);
+    if (rate.count > CATEGORY_LIMITS[category]) throwLimit(rate.retryAfterMs);
+    const definitionRate = await store.incrementRate(definitionRateKey, WINDOW_MS);
+    if (definitionRate.count > DEFINITION_CATEGORY_LIMITS[category]) throwLimit(definitionRate.retryAfterMs);
+    if (
+      !(await store.acquireConcurrency(
+        userKey,
+        ownerId,
+        CUSTOM_WIDGET_USER_ITEM_CONCURRENCY_LIMIT,
+        CUSTOM_WIDGET_REQUEST_CONCURRENCY_TTL_MS,
+      ))
+    ) {
+      throwLimit(1_000);
+    }
+    try {
+      if (
+        !(await store.acquireConcurrency(
+          definitionKey,
+          ownerId,
+          CUSTOM_WIDGET_DEFINITION_CONCURRENCY_LIMIT,
+          CUSTOM_WIDGET_REQUEST_CONCURRENCY_TTL_MS,
+        ))
+      ) {
+        throwLimit(1_000);
+      }
+    } catch (error) {
+      await store.releaseConcurrency(userKey, ownerId);
+      throw error;
+    }
+    return async () => {
+      await Promise.all([store.releaseConcurrency(userKey, ownerId), store.releaseConcurrency(definitionKey, ownerId)]);
+    };
+  }
+
+  private acquireLocalRate(key: string, limit: number, now: number): void {
+    const recent = (this.rateBuckets.get(key) ?? []).filter((timestamp) => now - timestamp < WINDOW_MS);
+    if (recent.length >= limit) throwLimit(WINDOW_MS - (now - (recent[0] ?? now)));
+    recent.push(now);
+    this.rateBuckets.set(key, recent);
+  }
+
+  private acquireLocalConcurrency(key: string, limit: number): void {
+    const count = this.concurrency.get(key) ?? 0;
+    if (count >= limit) throwLimit(1_000);
+    this.concurrency.set(key, count + 1);
+  }
+
+  private releaseLocalConcurrency(key: string): void {
+    const count = this.concurrency.get(key) ?? 0;
+    if (count <= 1) this.concurrency.delete(key);
+    else this.concurrency.set(key, count - 1);
+  }
+}
+
+const hashKey = (...parts: string[]) => createHash("sha256").update(parts.join("\0")).digest("hex");
+const throwLimit = (retryAfterMs: number): never => {
+  throw new CustomWidgetDomainError({
+    code: "TOO_MANY_REQUESTS",
+    message: "Custom widget request limit exceeded",
+    retryAfterMs: Math.max(1, retryAfterMs),
+  });
+};
diff --git a/packages/custom-widgets/src/server/request-manifest.ts b/packages/custom-widgets/src/server/request-manifest.ts
new file mode 100644
index 000000000..afd4aa0a6
--- /dev/null
+++ b/packages/custom-widgets/src/server/request-manifest.ts
@@ -0,0 +1,107 @@
+import { createHash } from "node:crypto";
+
+import type { CustomJsxRequest } from "../core";
+import { collectCustomWidgetRequestReferences } from "../core";
+import { CustomWidgetDomainError } from "./errors";
+import { resolveSameOriginTarget } from "./request-executor";
+
+export type CustomJsxRuntimeParams = Record<string, string | number | boolean>;
+type CustomJsxResolvedValues = Record<string, unknown>;
+
+export function resolveCustomWidgetRequestValues(
+  request: CustomJsxRequest,
+  options: Record<string, unknown>,
+  suppliedParams: CustomJsxRuntimeParams = {},
+): CustomJsxResolvedValues {
+  const references = collectCustomWidgetRequestReferences(request);
+  const suppliedNames = Object.keys(suppliedParams).toSorted();
+  const expectedNames = [...references.params].toSorted();
+  if (
+    suppliedNames.length !== expectedNames.length ||
+    suppliedNames.some((name, index) => name !== expectedNames[index])
+  ) {
+    throw new CustomWidgetDomainError({
+      code: "BAD_REQUEST",
+      message: "Request parameters do not match the request references",
+    });
+  }
+  const values: CustomJsxResolvedValues = { ...suppliedParams };
+  for (const name of references.options) {
+    const value = options[name];
+    if (value === undefined) {
+      throw new CustomWidgetDomainError({
+        code: "BAD_REQUEST",
+        message: `Widget option '${name}' is missing`,
+      });
+    }
+    values[`option:${name}`] = value;
+  }
+  return values;
+}
+
+export const renderBoundValue = (template: unknown, values: CustomJsxResolvedValues): unknown => {
+  const substitute = (value: unknown): unknown => {
+    if (Array.isArray(value)) return value.map(substitute);
+    if (value !== null && typeof value === "object") {
+      const entries = Object.entries(value);
+      if (
+        entries.length === 1 &&
+        ["$param", "$option"].includes(entries[0]?.[0] ?? "") &&
+        typeof entries[0]?.[1] === "string"
+      ) {
+        const prefix = entries[0][0] === "$option" ? "option:" : "";
+        const resolved = values[`${prefix}${entries[0][1]}`];
+        if (resolved === undefined)
+          throw new CustomWidgetDomainError({
+            code: "BAD_REQUEST",
+            message: `Unknown request value '${entries[0][1]}'`,
+          });
+        return resolved;
+      }
+      return Object.fromEntries(entries.map(([key, child]) => [key, substitute(child)]));
+    }
+    return value;
+  };
+  return substitute(template);
+};
+
+export const renderRequestBody = (request: CustomJsxRequest, values: CustomJsxResolvedValues): string | undefined =>
+  request.body === undefined ? undefined : JSON.stringify(renderBoundValue(request.body, values));
+
+export const renderRequestTarget = (baseUrl: string, request: CustomJsxRequest, values: CustomJsxResolvedValues) => {
+  const path = request.path.replaceAll(
+    /\{(option|param):([A-Za-z][A-Za-z0-9_-]*)\}/gu,
+    (_match, kind: string, name: string) => {
+      const value = values[kind === "option" ? `option:${name}` : name];
+      if (value === undefined)
+        throw new CustomWidgetDomainError({ code: "BAD_REQUEST", message: `Unknown path value '${name}'` });
+      if (!["string", "number", "boolean"].includes(typeof value))
+        throw new CustomWidgetDomainError({
+          code: "BAD_REQUEST",
+          message: `Path value '${name}' must resolve to text, number, or boolean`,
+        });
+      return encodeURIComponent(String(value));
+    },
+  );
+  if (/[{}]/u.test(path))
+    throw new CustomWidgetDomainError({ code: "BAD_REQUEST", message: "Request path contains an invalid placeholder" });
+  const base = new URL(baseUrl);
+  base.pathname = `${base.pathname.replace(/\/$/u, "")}${path}` || "/";
+  const target = resolveSameOriginTarget(baseUrl, base);
+  for (const [name, template] of Object.entries(request.query ?? {})) {
+    const value = renderBoundValue(template, values);
+    if (!["string", "number", "boolean"].includes(typeof value)) {
+      throw new CustomWidgetDomainError({
+        code: "BAD_REQUEST",
+        message: `Query value '${name}' must resolve to text, number, or boolean`,
+      });
+    }
+    target.searchParams.set(name, String(value));
+  }
+  return target;
+};
+
+export function hashRuntimeParams(params: CustomJsxResolvedValues) {
+  const stable = Object.fromEntries(Object.entries(params).toSorted(([left], [right]) => left.localeCompare(right)));
+  return createHash("sha256").update(JSON.stringify(stable)).digest("hex");
+}
diff --git a/packages/custom-widgets/src/server/response.ts b/packages/custom-widgets/src/server/response.ts
new file mode 100644
index 000000000..dec549d17
--- /dev/null
+++ b/packages/custom-widgets/src/server/response.ts
@@ -0,0 +1,65 @@
+import type { Response } from "undici";
+import { CustomWidgetDomainError } from "./errors";
+
+export const MAX_RESPONSE_BODY_BYTES = 1024 * 1024;
+export const MAX_RESPONSE_JSON_DEPTH = 32;
+export const MAX_RESPONSE_JSON_NODES = 50_000;
+
+export function assertJsonBudget(value: unknown): void {
+  let nodes = 0;
+  const visit = (current: unknown, depth: number): void => {
+    if (++nodes > MAX_RESPONSE_JSON_NODES)
+      throw new CustomWidgetDomainError({ code: "PAYLOAD_TOO_LARGE", message: "Response JSON is too large" });
+    if (depth > MAX_RESPONSE_JSON_DEPTH)
+      throw new CustomWidgetDomainError({ code: "PAYLOAD_TOO_LARGE", message: "Response JSON is too deeply nested" });
+    if (Array.isArray(current)) current.forEach((entry) => visit(entry, depth + 1));
+    else if (current !== null && typeof current === "object")
+      Object.values(current).forEach((entry) => visit(entry, depth + 1));
+  };
+  visit(value, 0);
+}
+
+async function readLimitedBody(response: Response): Promise<string> {
+  const length = Number(response.headers.get("content-length"));
+  if (Number.isFinite(length) && length > MAX_RESPONSE_BODY_BYTES) throw tooLarge();
+  if (!response.body) return "";
+  const reader = response.body.getReader();
+  const chunks: Uint8Array[] = [];
+  let size = 0;
+  while (true) {
+    const chunk = await reader.read();
+    if (chunk.done) break;
+    size += chunk.value.byteLength;
+    if (size > MAX_RESPONSE_BODY_BYTES) {
+      await reader.cancel();
+      throw tooLarge();
+    }
+    chunks.push(chunk.value);
+  }
+  const bytes = new Uint8Array(size);
+  let offset = 0;
+  for (const chunk of chunks) {
+    bytes.set(chunk, offset);
+    offset += chunk.byteLength;
+  }
+  return new TextDecoder("utf-8", { fatal: true }).decode(bytes);
+}
+
+export async function parseResponseBody(response: Response): Promise<unknown> {
+  const text = await readLimitedBody(response);
+  if (!text) return null;
+  try {
+    const json = JSON.parse(text) as unknown;
+    assertJsonBudget(json);
+    return json;
+  } catch (error) {
+    if (error instanceof CustomWidgetDomainError) throw error;
+    if (response.headers.get("content-type")?.toLowerCase().includes("json")) {
+      throw new CustomWidgetDomainError({ code: "BAD_REQUEST", message: "Upstream returned invalid JSON" });
+    }
+    return text;
+  }
+}
+
+const tooLarge = () =>
+  new CustomWidgetDomainError({ code: "PAYLOAD_TOO_LARGE", message: "Response exceeds the 1 MiB limit" });
diff --git a/packages/custom-widgets/src/styles.d.ts b/packages/custom-widgets/src/styles.d.ts
new file mode 100644
index 000000000..e2b48bc71
--- /dev/null
+++ b/packages/custom-widgets/src/styles.d.ts
@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: Readonly<Record<string, string>>;
+  export default classes;
+}
diff --git a/packages/custom-widgets/src/test/ai-evaluation.spec.ts b/packages/custom-widgets/src/test/ai-evaluation.spec.ts
new file mode 100644
index 000000000..4fc48fda9
--- /dev/null
+++ b/packages/custom-widgets/src/test/ai-evaluation.spec.ts
@@ -0,0 +1,108 @@
+import { describe, expect, it } from "vitest";
+
+import { CUSTOM_WIDGET_AI_EVALUATION_CASES } from "../../scripts/ai-evaluation-cases";
+import {
+  buildEvaluationPrompt,
+  buildRepairPrompt,
+  DEFAULT_GENERATOR_MODEL,
+  DEFAULT_JUDGE_MODEL,
+  getJudgeResponseFormat,
+  judgePasses,
+  parseJudgeResult,
+} from "../../scripts/ai-evaluation";
+import type { CustomWidgetJudgeResult } from "../../scripts/ai-evaluation";
+
+const categoryNames = [
+  "schemaAndBindings",
+  "apiAndRequestDesign",
+  "runtimeCompatibility",
+  "goalFulfillment",
+  "visualQuality",
+  "responsiveAndTheme",
+  "loadingEmptyErrorSuccess",
+  "dailyUsefulness",
+  "complexityDiscipline",
+  "accessibility",
+  "actionSafety",
+] as const;
+
+const makeCategories = (score: number) =>
+  Object.fromEntries(categoryNames.map((name) => [name, score])) as CustomWidgetJudgeResult["categories"];
+const makeReasons = () =>
+  Object.fromEntries(
+    categoryNames.map((name) => [name, `Concrete evidence for ${name}.`]),
+  ) as CustomWidgetJudgeResult["categoryReasons"];
+
+const makeJudgeResult = (score: number) => ({
+  total: score,
+  verdict: "pass" as const,
+  dailyUseDecision: "would-use-daily" as const,
+  categories: makeCategories(score),
+  categoryReasons: makeReasons(),
+  strengths: [],
+  problems: [],
+  fatalProblems: [],
+  highestImpactFixes: [],
+});
+
+describe("AI authoring evaluation", () => {
+  it("defines five distinct complex scenarios", () => {
+    expect(CUSTOM_WIDGET_AI_EVALUATION_CASES).toHaveLength(5);
+    expect(new Set(CUSTOM_WIDGET_AI_EVALUATION_CASES.map((entry) => entry.id)).size).toBe(5);
+  });
+
+  it("uses the exact clipboard prompt and grounded API notes", () => {
+    const testCase = CUSTOM_WIDGET_AI_EVALUATION_CASES.at(0);
+    if (!testCase) throw new Error("Expected at least one AI evaluation case");
+    const prompt = buildEvaluationPrompt(testCase);
+    expect(prompt.length).toBeLessThanOrEqual(12_000);
+    expect(prompt).toContain("Verified API notes");
+    expect(prompt).not.toContain("customWidget_validate");
+    expect(prompt).not.toContain("homarr://");
+  });
+
+  it("keeps validation failures concrete during repair", () => {
+    const prompt = buildRepairPrompt("original", "bad response", [
+      { path: ["requests", "list", "path"], message: "Required" },
+    ]);
+    expect(prompt).toContain("requests.list.path: Required");
+    expect(prompt).toContain("bad response");
+  });
+
+  it("uses the requested DeepSeek models and strict structured judge output", () => {
+    expect(DEFAULT_GENERATOR_MODEL).toBe("deepseek/deepseek-v4-pro");
+    expect(DEFAULT_JUDGE_MODEL).toBe("deepseek/deepseek-v4-flash");
+    const format = getJudgeResponseFormat();
+    expect(format.type).toBe("json_schema");
+    expect(format.json_schema.strict).toBe(true);
+    expect(format.json_schema.schema).toMatchObject({ type: "object", additionalProperties: false });
+  });
+
+  it("requires exceptional goal, design, practicality, and complexity scores", () => {
+    expect(judgePasses(makeJudgeResult(90))).toBe(true);
+    expect(
+      judgePasses({
+        ...makeJudgeResult(92),
+        categories: { ...makeCategories(92), dailyUsefulness: 84 },
+      }),
+    ).toBe(false);
+    expect(judgePasses({ ...makeJudgeResult(95), fatalProblems: ["A requested core action is missing."] })).toBe(false);
+  });
+
+  it("computes the weighted score and refuses inflated advisory verdicts", () => {
+    const parsed = parseJudgeResult(
+      JSON.stringify({
+        ...makeJudgeResult(95),
+        total: 99,
+        categories: { ...makeCategories(95), visualQuality: 70 },
+        categoryReasons: makeReasons(),
+        strengths: [],
+        problems: [],
+        fatalProblems: [],
+        highestImpactFixes: [],
+      }),
+    );
+    expect(parsed.total).toBe(91);
+    expect(parsed.verdict).toBe("fail");
+  });
+});
diff --git a/packages/custom-widgets/src/test/ai-prompt.spec.ts b/packages/custom-widgets/src/test/ai-prompt.spec.ts
new file mode 100644
index 000000000..a949ea592
--- /dev/null
+++ b/packages/custom-widgets/src/test/ai-prompt.spec.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+
+import { buildCustomWidgetAiPrompt, CUSTOM_WIDGET_FINAL_OUTPUT_INSTRUCTION } from "../core/ai-prompt";
+
+describe("AI prompt", () => {
+  it("is self-contained, request-first, and compact", () => {
+    const prompt = buildCustomWidgetAiPrompt(
+      undefined,
+      null,
+      null,
+      "Create a beautiful Pokédex",
+      "https://pokeapi.co/docs/v2",
+    );
+    expect(prompt.length).toBeLessThanOrEqual(12_000);
+    expect(prompt.indexOf("Create a beautiful Pokédex")).toBeLessThan(prompt.indexOf("Manifest contract"));
+    expect(prompt).toContain('"requests": {');
+    expect(prompt).toContain("{option:name}");
+    expect(prompt).toContain("Example — Service dashboard");
+    expect(prompt).toContain("Example — Search and action");
+    expect(prompt).toContain("visual hierarchy");
+    expect(prompt).toContain("Put the complete JSX directly in its template string");
+    expect(prompt).toContain("copy one code block and paste it into Homarr once");
+    expect(prompt).not.toContain("fenced block followed by");
+    expect(prompt).toContain('trigger="manual"');
+    expect(prompt).toContain("never write `=> {` anywhere");
+    expect(prompt).toContain('"choicesFrom"');
+    expect(prompt).toContain("must not shadow the reserved roots");
+    expect(prompt.endsWith(CUSTOM_WIDGET_FINAL_OUTPUT_INSTRUCTION)).toBe(true);
+  });
+
+  it("does not claim offline MCP tools or embed the component catalog", () => {
+    const prompt = buildCustomWidgetAiPrompt(undefined, null, null, "Build a widget");
+    expect(prompt).not.toContain("customWidget_validate");
+    expect(prompt).not.toContain("homarr://");
+    expect(prompt).not.toContain("OFFLINE BUNDLE");
+    expect(prompt.match(/Recommended components:/gu)).toHaveLength(1);
+  });
+
+  it("redacts secrets and preserves the final instruction when optional context is large", () => {
+    const prompt = buildCustomWidgetAiPrompt(
+      undefined,
+      JSON.stringify({ token: "sensitive", data: "x".repeat(20_000) }),
+      null,
+      "Build it",
+    );
+    expect(prompt).not.toContain("sensitive");
+    expect(prompt.endsWith(CUSTOM_WIDGET_FINAL_OUTPUT_INSTRUCTION)).toBe(true);
+    expect(prompt.length).toBeLessThanOrEqual(12_000);
+  });
+
+  it("redacts embedded request credentials while retaining harmless request metadata", () => {
+    const prompt = buildCustomWidgetAiPrompt(undefined, null, {
+      requests: {
+        status: {
+          path: "/status?credential=Bearer-sk-secret-123456",
+          headers: {
+            "X-Auth": "Bearer sk-secret-123456",
+            "X-Service": "Basic dXNlcjpwYXNz",
+            "X-Feature-Key": "dashboard-layout",
+          },
+        },
+      },
+      template: "<Text>Bearer ghp_abcdefghijklmnopqrstuvwxyz123456</Text>",
+    });
+
+    expect(prompt).not.toContain("sk-secret-123456");
+    expect(prompt).not.toContain("dXNlcjpwYXNz");
+    expect(prompt).not.toContain("ghp_abcdefghijklmnopqrstuvwxyz123456");
+    expect(prompt).toContain('"X-Auth": "[REDACTED]"');
+    expect(prompt).toContain('"X-Feature-Key": "dashboard-layout"');
+  });
+
+  it("redacts credentials embedded directly in the free-form request", () => {
+    const prompt = buildCustomWidgetAiPrompt(
+      undefined,
+      null,
+      null,
+      "Use Authorization: Bearer sk-secret-123456 and token=ghp_abcdefghijklmnopqrstuvwxyz123456",
+    );
+
+    expect(prompt).not.toContain("sk-secret-123456");
+    expect(prompt).not.toContain("ghp_abcdefghijklmnopqrstuvwxyz123456");
+    expect(prompt).toContain("Authorization: Bearer [REDACTED]");
+    expect(prompt).toContain("token=[REDACTED]");
+  });
+});
diff --git a/packages/custom-widgets/src/test/authoring-resources.spec.ts b/packages/custom-widgets/src/test/authoring-resources.spec.ts
new file mode 100644
index 000000000..b353f4b6d
--- /dev/null
+++ b/packages/custom-widgets/src/test/authoring-resources.spec.ts
@@ -0,0 +1,32 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+import {
+  getCustomWidgetComponent,
+  getCustomWidgetComponentCatalog,
+  getCustomWidgetSkill,
+  getCustomWidgetSkillContent,
+} from "../core/authoring-resources";
+
+describe("authoring resources", () => {
+  it("returns the concise skills.sh discovery shape", () => {
+    const skill = getCustomWidgetSkill();
+    expect(skill).toMatchObject({ name: "homarr-custom-widget", version: "2.1.0" });
+    expect(skill.skillsShUrl).toContain("skills.sh/homarr-labs/homarr");
+    expect(skill.sourceUrl).toContain("/tree/HEAD/.agents/skills/homarr-custom-widget");
+    expect(skill.installCommand).toContain("--skill homarr-custom-widget");
+    expect(skill).not.toHaveProperty("files");
+    expect(skill).not.toHaveProperty("componentCatalog");
+    expect(getCustomWidgetSkillContent()).toBe(skill.skillMd);
+    expect(skill.skillMd.trim()).toBe(
+      readFileSync(path.join(process.cwd(), ".agents/skills/homarr-custom-widget/SKILL.md"), "utf8").trim(),
+    );
+  });
+
+  it("keeps the full catalog retrieval-based", () => {
+    expect(getCustomWidgetComponentCatalog().components.length).toBeGreaterThan(100);
+    expect(getCustomWidgetComponent("Stack")?.name).toBe("Stack");
+    expect(getCustomWidgetComponent("Icon")?.knownValues?.name.length).toBeGreaterThan(100);
+  });
+});
diff --git a/packages/custom-widgets/src/test/component-catalog.spec.ts b/packages/custom-widgets/src/test/component-catalog.spec.ts
new file mode 100644
index 000000000..2fdf9ef2d
--- /dev/null
+++ b/packages/custom-widgets/src/test/component-catalog.spec.ts
@@ -0,0 +1,141 @@
+import { readFile } from "node:fs/promises";
+import { resolve } from "node:path";
+
+import { describe, expect, test } from "vitest";
+
+import {
+  customJsxAuthoringCatalog,
+  getCustomJsxPropType,
+  resolveCustomJsxPropDescriptor,
+} from "../core/component-catalog";
+import {
+  CUSTOM_JSX_AUTHORING_CATALOG_SCHEMA_VERSION,
+  CUSTOM_WIDGET_AUTHORING_VERSION,
+} from "../core/component-catalog-types";
+import { customJsxComponentRegistry } from "../core/component-registry";
+
+const repositoryRoot = resolve(import.meta.dirname, "../../../..");
+const catalogPath = resolve(repositoryRoot, "packages/custom-widgets/src/core/component-catalog.generated.json");
+const publicCatalogPath = resolve(repositoryRoot, "apps/docs/static/custom-widgets/component-catalog-v1.json");
+
+// Keep a reviewed ceiling close to the generated artifact so accidental metadata
+// duplication must receive explicit review.
+const MAX_CATALOG_BYTES = 800 * 1024;
+
+describe("Custom JSX authoring catalog", () => {
+  test("is versioned against the installed authoring surface", async () => {
+    const mantinePackage = JSON.parse(
+      await readFile(resolve(repositoryRoot, "node_modules/@mantine/core/package.json"), "utf8"),
+    ) as { version: string };
+
+    expect(customJsxAuthoringCatalog.schemaVersion).toBe(CUSTOM_JSX_AUTHORING_CATALOG_SCHEMA_VERSION);
+    expect(customJsxAuthoringCatalog.mantineVersion).toBe(mantinePackage.version);
+    expect(customJsxAuthoringCatalog.customWidgetVersion).toBe(CUSTOM_WIDGET_AUTHORING_VERSION);
+  });
+
+  test("publishes deterministic unique component and prop records", () => {
+    const componentNames = customJsxAuthoringCatalog.components.map(({ name }) => name);
+    const globalPropNames = customJsxAuthoringCatalog.globalProps.map(({ name }) => name);
+    const types = customJsxAuthoringCatalog.types;
+    expect(new Set(componentNames).size).toBe(componentNames.length);
+    expect(new Set(globalPropNames).size).toBe(globalPropNames.length);
+    expect(new Set(types).size).toBe(types.length);
+    expect(componentNames).toEqual([...componentNames].toSorted());
+    expect(globalPropNames).toEqual([...globalPropNames].toSorted());
+    expect(types).toEqual([...types].toSorted());
+
+    const globals = new Map(customJsxAuthoringCatalog.globalProps.map((prop) => [prop.name, prop]));
+    for (const component of customJsxAuthoringCatalog.components) {
+      const propNames = component.props.map(({ name }) => name);
+      expect(new Set(propNames).size, component.name).toBe(propNames.length);
+      expect(propNames, component.name).toEqual([...propNames].toSorted());
+      for (const prop of component.props) {
+        expect(prop.source, `${component.name}.${prop.name}`).toBe("component");
+        expect(prop.typeRef, `${component.name}.${prop.name}`).toBeGreaterThanOrEqual(0);
+        expect(prop.typeRef, `${component.name}.${prop.name}`).toBeLessThan(types.length);
+        expect(getCustomJsxPropType(prop), `${component.name}.${prop.name}`).not.toBe("");
+        const global = globals.get(prop.name);
+        if (global) {
+          expect(
+            prop.required !== global.required ||
+              getCustomJsxPropType(prop) !== getCustomJsxPropType(global) ||
+              JSON.stringify(prop.literalValues ?? []) !== JSON.stringify(global.literalValues ?? []),
+            `${component.name}.${prop.name} must be a meaningful global-prop override`,
+          ).toBe(true);
+        }
+      }
+    }
+    for (const prop of customJsxAuthoringCatalog.globalProps) {
+      expect(prop.source, prop.name).toBe("global");
+      expect(prop.required, prop.name).toBe(false);
+      expect(prop.typeRef, prop.name).toBeGreaterThanOrEqual(0);
+      expect(prop.typeRef, prop.name).toBeLessThan(types.length);
+      expect(resolveCustomJsxPropDescriptor(prop).type, prop.name).not.toBe("");
+    }
+  });
+
+  test("covers the complete runtime component registry", () => {
+    const catalogNames = customJsxAuthoringCatalog.components.map(({ name }) => name);
+    const runtimeNames = customJsxComponentRegistry.map(({ name }) => name).toSorted();
+    expect(catalogNames).toEqual(runtimeNames);
+  });
+
+  test("includes prop APIs, bindings, accessibility, and denied reasons", () => {
+    const textInput = customJsxAuthoringCatalog.components.find(({ name }) => name === "TextInput");
+    const label = textInput?.props.find(({ name }) => name === "label");
+    expect(label && getCustomJsxPropType(label)).toContain("ReactNode");
+    expect(label?.required).toBe(false);
+    expect(label?.description).toBeTruthy();
+    expect(textInput?.bind).toEqual({ type: "string", initialProp: "defaultValue" });
+
+    const switchComponent = customJsxAuthoringCatalog.components.find(({ name }) => name === "Switch");
+    expect(switchComponent?.bind).toEqual({ type: "boolean", initialProp: "defaultChecked" });
+
+    expect(customJsxAuthoringCatalog.components.some(({ name }) => name === "RecursiveList")).toBe(false);
+
+    const portal = customJsxAuthoringCatalog.components.find(({ name }) => name === "Portal");
+    expect(portal?.safety).toBe("denied");
+    expect(portal?.deniedReason).toBeTruthy();
+    expect(portal?.props).toEqual([]);
+
+    const tableOfContents = customJsxAuthoringCatalog.components.find(({ name }) => name === "TableOfContents");
+    expect(tableOfContents?.safety).toBe("denied");
+    expect(tableOfContents?.deniedReason).toContain("outside the widget root");
+
+    const tooltip = customJsxAuthoringCatalog.components.find(({ name }) => name === "Tooltip");
+    expect(tooltip?.blockedProps).toContainEqual(
+      expect.objectContaining({ name: "target", reason: expect.stringContaining("outside the widget root") }),
+    );
+    expect(tooltip?.props.map(({ name }) => name)).not.toContain("target");
+
+    const datePickerInput = customJsxAuthoringCatalog.components.find(({ name }) => name === "DatePickerInput");
+    expect(datePickerInput?.blockedProps.map(({ name }) => name)).toEqual(["dropdownType", "modalProps"]);
+  });
+
+  test("documents blocked prop capabilities once and excludes them from APIs", () => {
+    const blockedNames = customJsxAuthoringCatalog.blockedCapabilities.map(({ name }) => name);
+    expect(new Set(blockedNames).size).toBe(blockedNames.length);
+    expect(customJsxAuthoringCatalog.blockedCapabilities).toContainEqual(
+      expect.objectContaining({ kind: "prop", name: "dangerouslySetInnerHTML" }),
+    );
+    expect(customJsxAuthoringCatalog.blockedCapabilities).toContainEqual(
+      expect.objectContaining({ kind: "prop-pattern", name: "on*" }),
+    );
+    const authoredProps = [
+      ...customJsxAuthoringCatalog.globalProps,
+      ...customJsxAuthoringCatalog.components.flatMap(({ props }) => props),
+    ];
+    expect(authoredProps.some(({ name }) => /^on/iu.test(name))).toBe(false);
+    expect(authoredProps.some(({ name }) => name === "dangerouslySetInnerHTML")).toBe(false);
+  });
+
+  test("stays within the reviewed compact byte budget", async () => {
+    const catalog = await readFile(catalogPath);
+    expect(catalog.byteLength).toBeLessThanOrEqual(MAX_CATALOG_BYTES);
+  });
+
+  test("publishes a byte-identical static documentation copy", async () => {
+    const [catalog, publicCatalog] = await Promise.all([readFile(catalogPath), readFile(publicCatalogPath)]);
+    expect(publicCatalog.equals(catalog)).toBe(true);
+  });
+});
diff --git a/packages/custom-widgets/src/test/component-registry.spec.ts b/packages/custom-widgets/src/test/component-registry.spec.ts
new file mode 100644
index 000000000..7707613c7
--- /dev/null
+++ b/packages/custom-widgets/src/test/component-registry.spec.ts
@@ -0,0 +1,280 @@
+import { describe, expect, test } from "vitest";
+
+import {
+  customJsxComponentByName,
+  customJsxComponentRegistry,
+  getCustomJsxBindingType,
+} from "../core/component-registry";
+
+const mantineCore941ComponentExports = [
+  "RemoveScroll",
+  "Collapse",
+  "ScrollArea",
+  "UnstyledButton",
+  "VisuallyHidden",
+  "Paper",
+  "Popover",
+  "ActionIcon",
+  "CloseButton",
+  "Group",
+  "Loader",
+  "Overlay",
+  "ModalBase",
+  "Input",
+  "InputBase",
+  "Flex",
+  "FloatingIndicator",
+  "Accordion",
+  "Affix",
+  "Alert",
+  "Anchor",
+  "AngleSlider",
+  "AppShell",
+  "AspectRatio",
+  "Autocomplete",
+  "Avatar",
+  "BackgroundImage",
+  "Badge",
+  "Blockquote",
+  "Breadcrumbs",
+  "Burger",
+  "Button",
+  "Card",
+  "Center",
+  "Checkbox",
+  "Chip",
+  "Code",
+  "ColorPicker",
+  "ColorInput",
+  "ColorSwatch",
+  "Combobox",
+  "ComboboxPopover",
+  "Container",
+  "CopyButton",
+  "DataList",
+  "Dialog",
+  "Divider",
+  "Drawer",
+  "EmptyState",
+  "Fieldset",
+  "FileButton",
+  "FileInput",
+  "FloatingWindow",
+  "FocusTrap",
+  "Grid",
+  "Highlight",
+  "HoverCard",
+  "Image",
+  "Indicator",
+  "JsonInput",
+  "Kbd",
+  "List",
+  "LoadingOverlay",
+  "Mark",
+  "Marquee",
+  "MaskInput",
+  "Menu",
+  "Menubar",
+  "Modal",
+  "MultiSelect",
+  "NativeSelect",
+  "NavLink",
+  "Notification",
+  "NumberFormatter",
+  "NumberInput",
+  "OverflowList",
+  "Pagination",
+  "PasswordInput",
+  "Pill",
+  "PillsInput",
+  "PinInput",
+  "Portal",
+  "Progress",
+  "Radio",
+  "Rating",
+  "RollingNumber",
+  "RingProgress",
+  "Scroller",
+  "SegmentedControl",
+  "Select",
+  "SemiCircleProgress",
+  "SimpleGrid",
+  "Skeleton",
+  "Slider",
+  "Space",
+  "Splitter",
+  "Spoiler",
+  "Stack",
+  "Stepper",
+  "Switch",
+  "Table",
+  "TableOfContents",
+  "Tabs",
+  "TagsInput",
+  "Text",
+  "Textarea",
+  "TextInput",
+  "ThemeIcon",
+  "Timeline",
+  "Title",
+  "Tooltip",
+  "Transition",
+  "Tree",
+  "TreeSelect",
+  "Typography",
+] as const;
+
+const mantineCharts941ComponentExports = [
+  "ChartTooltip",
+  "ChartLegend",
+  "AreaChart",
+  "BarChart",
+  "LineChart",
+  "Sparkline",
+  "DonutChart",
+  "PieChart",
+  "RadarChart",
+  "ScatterChart",
+  "BubbleChart",
+  "CompositeChart",
+  "RadialBarChart",
+  "FunnelChart",
+  "Heatmap",
+  "BarsList",
+  "Treemap",
+  "SankeyChart",
+] as const;
+
+const mantineDates941ComponentExports = [
+  "DatesProvider",
+  "HiddenDatesInput",
+  "TimeInput",
+  "TimePicker",
+  "TimeValue",
+  "Day",
+  "WeekdaysRow",
+  "Month",
+  "PickerControl",
+  "YearsList",
+  "MonthsList",
+  "CalendarHeader",
+  "DecadeLevel",
+  "YearLevel",
+  "MonthLevel",
+  "LevelsGroup",
+  "DecadeLevelGroup",
+  "YearLevelGroup",
+  "MonthLevelGroup",
+  "PickerInputBase",
+  "Calendar",
+  "YearPicker",
+  "MonthPicker",
+  "DatePicker",
+  "DateInput",
+  "DateTimePicker",
+  "InlineDateTimePicker",
+  "YearPickerInput",
+  "MonthPickerInput",
+  "DatePickerInput",
+  "TimeGrid",
+  "MiniCalendar",
+] as const;
+
+describe("customJsxComponentRegistry", () => {
+  test("classifies every component name exactly once", () => {
+    const names = customJsxComponentRegistry.map(({ name }) => name);
+    expect(new Set(names).size).toBe(names.length);
+  });
+
+  test.each([
+    ["ChartTooltip", "wrapped"],
+    ["ChartLegend", "wrapped"],
+    ["VisuallyHidden", "wrapped"],
+    ["SubFetch", "wrapped"],
+    ["Portal", "denied"],
+    ["TextInput", "wrapped"],
+    ["ModalRoot", "denied"],
+    ["AppShellMain", "denied"],
+  ] as const)("classifies %s as %s", (name, safety) => {
+    expect(customJsxComponentByName.get(name)?.safety).toBe(safety);
+  });
+
+  test("documents why every denied component is unavailable", () => {
+    for (const component of customJsxComponentRegistry) {
+      if (component.safety === "denied") {
+        expect(component.reason, component.name).toBeTruthy();
+      }
+    }
+  });
+
+  test("publishes the minimal safe runtime metadata for every component", () => {
+    for (const component of customJsxComponentRegistry) {
+      expect(component.supportedProps, component.name).toBeInstanceOf(Array);
+      expect(component.blockedProps, component.name).toBeInstanceOf(Array);
+      expect(component.supportedProps, component.name).not.toContain("renderOption");
+      expect(component.supportedProps, component.name).not.toContain("rootRef");
+      expect(component.supportedProps, component.name).not.toContain("popoverTarget");
+    }
+  });
+
+  test.each([
+    ["Tabs.List", "grow"],
+    ["ScrollArea", "offsetScrollbars"],
+    ["SubData", "fit"],
+    ["SubData", "alt"],
+  ] as const)("supports the %s.%s authoring prop", (component, prop) => {
+    expect(customJsxComponentByName.get(component)?.supportedProps).toContain(prop);
+  });
+
+  test.each([
+    ...mantineCore941ComponentExports,
+    ...mantineCharts941ComponentExports,
+    ...mantineDates941ComponentExports,
+  ])("classifies the Mantine 9.4.1 export %s", (name) => {
+    expect(customJsxComponentByName.has(name), `${name} is not classified`).toBe(true);
+  });
+
+  test.each([
+    ["TextInput", "string"],
+    ["NumberInput", "number"],
+    ["Switch", "boolean"],
+    ["Select", "string"],
+    ["MultiSelect", "string[]"],
+    ["DateInput", "string"],
+    ["DatePicker", "string"],
+    ["Tabs", "string"],
+    ["Popover", "boolean"],
+    ["RangeSlider", "number[]"],
+  ] as const)("infers %s bindings as %s", (component, type) => {
+    expect(getCustomJsxBindingType(component)).toBe(type);
+  });
+
+  test("infers range and multiple date controls from their authored props", () => {
+    for (const component of [
+      "DatePicker",
+      "DatePickerInput",
+      "MonthPicker",
+      "MonthPickerInput",
+      "YearPicker",
+      "YearPickerInput",
+    ]) {
+      expect(getCustomJsxBindingType(component, { type: "multiple" })).toBe("string[]");
+      expect(getCustomJsxBindingType(component, { type: "range" })).toBe("string[]");
+    }
+    expect(getCustomJsxBindingType("DateTimePicker", { type: "range" })).toBe("string[]");
+    expect(getCustomJsxBindingType("DateTimePicker", { type: "multiple" })).toBe("string");
+    expect(getCustomJsxBindingType("InlineDateTimePicker", { type: "range" })).toBe("string[]");
+    expect(getCustomJsxBindingType("InlineDateTimePicker", { type: "multiple" })).toBe("string");
+    expect(getCustomJsxBindingType("Accordion", { multiple: true })).toBe("string[]");
+    expect(getCustomJsxBindingType("TreeSelect", { mode: "multiple" })).toBe("string[]");
+    expect(getCustomJsxBindingType("TreeSelect", { mode: "checkbox" })).toBe("string[]");
+    expect(getCustomJsxBindingType("Chip.Group", { multiple: true })).toBe("string[]");
+    expect(getCustomJsxBindingType("ChipGroup", { multiple: true })).toBe("string[]");
+    expect(getCustomJsxBindingType("RadioGroup")).toBe("string");
+    expect(getCustomJsxBindingType("CheckboxGroup")).toBe("string[]");
+    expect(getCustomJsxBindingType("SwitchGroup")).toBe("string[]");
+    expect(getCustomJsxBindingType("Calendar")).toBeNull();
+    expect(getCustomJsxBindingType("HoverCard")).toBeNull();
+    expect(getCustomJsxBindingType("Text", {})).toBeNull();
+  });
+});
diff --git a/packages/custom-widgets/src/test/fixtures/reference-widgets.ts b/packages/custom-widgets/src/test/fixtures/reference-widgets.ts
new file mode 100644
index 000000000..692873fb4
--- /dev/null
+++ b/packages/custom-widgets/src/test/fixtures/reference-widgets.ts
@@ -0,0 +1,62 @@
+import type { HomarrCustomWidgetV2Input } from "../../core/custom-jsx-schema";
+
+export const PORTAINER_REFERENCE_WIDGET: HomarrCustomWidgetV2Input = {
+  $schema: "homarr-custom-widget-v2",
+  name: "Portainer containers",
+  description: "Monitor and control Docker containers through Portainer.",
+  iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons@master/svg/portainer.svg",
+  sources: {
+    default: {
+      name: "Portainer",
+      baseUrl: "https://portainer.example.com",
+      networkScope: "private",
+      auth: { type: "apiKeyHeader", name: "X-API-Key" },
+    },
+  },
+  requests: {
+    containers: {
+      path: "/api/endpoints/{option:endpointId}/docker/containers/json",
+      query: { all: { $option: "showAll" } },
+      cacheSeconds: 20,
+    },
+    start: {
+      kind: "action",
+      method: "POST",
+      path: "/api/endpoints/{option:endpointId}/docker/containers/{param:id}/start",
+      confirmation: "Start this container?",
+      invalidates: ["containers"],
+    },
+    stop: {
+      kind: "action",
+      method: "POST",
+      path: "/api/endpoints/{option:endpointId}/docker/containers/{param:id}/stop",
+      confirmation: { title: "Stop container", message: "The service will become unavailable.", destructive: true },
+      invalidates: ["containers"],
+    },
+    restart: {
+      kind: "action",
+      method: "POST",
+      path: "/api/endpoints/{option:endpointId}/docker/containers/{param:id}/restart",
+      confirmation: "Restart this container?",
+      invalidates: ["containers"],
+    },
+  },
+  options: {
+    endpointId: { label: "Environment ID", control: "number", default: 2, min: 1 },
+    showAll: { label: "Include stopped containers", control: "switch", default: true },
+  },
+  template: `<Stack gap="md" p="md" h="100%">
+  <Group justify="space-between" align="flex-start">
+    <Stack gap={2}><Group gap="xs"><ThemeIcon color="blue" variant="light"><Icon name="brand-docker" /></ThemeIcon><Title order={3}>Containers</Title></Group><Text size="xs" c="dimmed">Portainer environment {options.endpointId}</Text></Stack>
+    <RefreshButton />
+  </Group>
+  {status.containers?.loading ? <Stack gap="xs"><Skeleton height={68} radius="md" /><Skeleton height={68} radius="md" /><Skeleton height={68} radius="md" /></Stack> : status.containers?.error ? <Alert color="red" title="Portainer is unavailable">{status.containers.error}</Alert> : (data.containers ?? []).length === 0 ? <Alert color="gray" title="No containers">No containers matched this environment.</Alert> : <Stack gap="md">
+    <SimpleGrid cols={{ base: 1, xs: 3 }}>
+      <Paper withBorder p="sm" radius="md"><Text size="xs" c="dimmed">Total</Text><Text size="xl" fw={700}>{data.containers.length}</Text></Paper>
+      <Paper withBorder p="sm" radius="md"><Text size="xs" c="dimmed">Running</Text><Text size="xl" fw={700} c="green">{data.containers.filter(container => container.State === "running").length}</Text></Paper>
+      <Paper withBorder p="sm" radius="md"><Text size="xs" c="dimmed">Stopped</Text><Text size="xl" fw={700} c="dimmed">{data.containers.filter(container => container.State !== "running").length}</Text></Paper>
+    </SimpleGrid>
+    <ScrollArea h={230} type="auto"><Stack gap="xs">{data.containers.map(container => <Paper key={container.Id} withBorder p="sm" radius="md"><Group justify="space-between" align="flex-start" wrap="wrap"><Stack gap={3}><Group gap="xs"><Text fw={650}>{container.Names?.[0]?.replace("/", "") ?? container.Id.slice(0, 12)}</Text><Badge color={container.State === "running" ? "green" : "gray"} variant="light">{container.State}</Badge></Group><Text size="xs" c="dimmed" lineClamp={1}>{container.Image}</Text><Text size="xs" c="dimmed">{container.Status}</Text></Stack><Group gap="xs">{container.State === "running" ? <ActionButton requestId="stop" params={{ id: container.Id }} color="red" variant="light">Stop</ActionButton> : <ActionButton requestId="start" params={{ id: container.Id }} color="green" variant="light">Start</ActionButton>}<ActionButton requestId="restart" params={{ id: container.Id }} variant="light">Restart</ActionButton></Group></Group></Paper>)}</Stack></ScrollArea>
+  </Stack>}
+</Stack>`,
+};
diff --git a/packages/custom-widgets/src/test/import.spec.ts b/packages/custom-widgets/src/test/import.spec.ts
new file mode 100644
index 000000000..11e99b7c0
--- /dev/null
+++ b/packages/custom-widgets/src/test/import.spec.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  CUSTOM_WIDGET_STARTER,
+  getImportReview,
+  parseCustomWidgetAiResponse,
+  parseCustomWidgetClipboardDetailed,
+} from "../core";
+
+const response = (manifest: unknown) => `\`\`\`json\n${JSON.stringify(manifest, null, 2)}\n\`\`\``;
+
+describe("Custom Widget imports", () => {
+  it("accepts one complete JSON block and loads its template", () => {
+    const result = parseCustomWidgetAiResponse(response({ ...CUSTOM_WIDGET_STARTER, template: "<Text>Ready</Text>" }));
+    expect(result.success).toBe(true);
+    if (result.success) expect(result.widget.template).toBe("<Text>Ready</Text>");
+  });
+
+  it("rejects the unreleased superseded schema without normalization", () => {
+    const result = parseCustomWidgetAiResponse(
+      response({
+        ...CUSTOM_WIDGET_STARTER,
+        sources: Object.values(CUSTOM_WIDGET_STARTER.sources),
+        requests: [],
+        optionsSchema: {},
+        defaultOptions: {},
+        template: "<Text>Ready</Text>",
+      }),
+    );
+    expect(result.success).toBe(false);
+  });
+
+  it("reports missing fences and removed local state", () => {
+    expect(parseCustomWidgetAiResponse(JSON.stringify(CUSTOM_WIDGET_STARTER)).success).toBe(false);
+    const result = parseCustomWidgetAiResponse(
+      response({ ...CUSTOM_WIDGET_STARTER, stateSchema: {}, template: "<Text>Ready</Text>" }),
+    );
+    expect(result.success).toBe(false);
+    if (!result.success) expect(result.issues.some(({ code }) => code === "REMOVED_LOCAL_STATE")).toBe(true);
+  });
+
+  it("rejects additional code blocks", () => {
+    const result = parseCustomWidgetAiResponse(
+      `${response({ ...CUSTOM_WIDGET_STARTER, template: "<Text>Ready</Text>" })}\n\`\`\`jsx\n<Text>Old format</Text>\n\`\`\``,
+    );
+    expect(result.success).toBe(false);
+    if (!result.success) expect(result.issues.some(({ code }) => code === "AI_SINGLE_JSON_BLOCK_REQUIRED")).toBe(true);
+  });
+
+  it("returns a capability review from keyed records", () => {
+    const review = getImportReview(CUSTOM_WIDGET_STARTER);
+    expect(review).toMatchObject({ origins: ["https://example.com"], authTypes: ["none"], hasActions: false });
+  });
+
+  it("keeps strict clipboard import compatible with canonical exports", () => {
+    const result = parseCustomWidgetClipboardDetailed(JSON.stringify(CUSTOM_WIDGET_STARTER));
+    expect(result.success).toBe(true);
+  });
+});
diff --git a/packages/custom-widgets/src/test/jsx-policy.spec.ts b/packages/custom-widgets/src/test/jsx-policy.spec.ts
new file mode 100644
index 000000000..becd9171f
--- /dev/null
+++ b/packages/custom-widgets/src/test/jsx-policy.spec.ts
@@ -0,0 +1,441 @@
+import { describe, expect, test } from "vitest";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { validateCustomJsxTemplate } from "../jsx/analyzer";
+import { createCustomJsxBindings, CUSTOM_JSX_DATA_LIMITS } from "../jsx/bindings";
+import { renderSafeJsx, sanitizeCustomJsxProps } from "../jsx/interpreter";
+import { CUSTOM_JSX_BLOCKED_PROPERTIES, CUSTOM_JSX_BLOCKED_PROPS, CUSTOM_JSX_LIMITS } from "../jsx/policy";
+
+const components = { Text: () => null };
+const bindings = { data: Object.create(null) as Record<string, unknown> };
+
+describe("shared Custom JSX policy", () => {
+  test.each(['status.list === "loading"', '"success" === status.list', 'status.list !== "error"'])(
+    "rejects string request-status comparisons in %s",
+    (expression) => {
+      expect(validateCustomJsxTemplate(`<Text>{${expression}}</Text>`)).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            severity: "error",
+            message: expect.stringContaining("INVALID_STATUS_COMPARISON: status.list is an object"),
+          }),
+        ]),
+      );
+    },
+  );
+
+  test("accepts request-status object fields", () => {
+    const diagnostics = validateCustomJsxTemplate(
+      "<Text>{status.list?.loading ? 'Loading' : status.list?.ok === false ? status.list.error : 'Ready'}</Text>",
+    );
+    expect(diagnostics.filter(({ severity }) => severity === "error")).toEqual([]);
+  });
+
+  test("accepts canonical Mantine compound component names", () => {
+    const diagnostics = validateCustomJsxTemplate(
+      '<Radio.Group value="one"><Radio.Card value="one"><Radio.Indicator /></Radio.Card></Radio.Group>',
+    );
+    expect(diagnostics.filter(({ severity }) => severity === "error")).toEqual([]);
+  });
+
+  test("accepts the concise Icon alias used by the AI prompt", () => {
+    expect(validateCustomJsxTemplate('<ThemeIcon><Icon name="brand-docker" /></ThemeIcon>')).toEqual([]);
+  });
+
+  test("accepts common bounded formatting and collection operations", () => {
+    expect(
+      validateCustomJsxTemplate(
+        '<Text>{[1, 2].concat([3]).flatMap(value => [value]).map(value => value.toLocaleString()).join(", ")}</Text>',
+      ),
+    ).toEqual([]);
+    expect(validateCustomJsxTemplate('<Text>{"b".localeCompare("a")}</Text>')).toEqual([]);
+  });
+
+  test.each([...CUSTOM_JSX_BLOCKED_PROPERTIES])(
+    "blocks reflective property %s in diagnostics and runtime",
+    (property) => {
+      const template = `<Text>{data[${JSON.stringify(property)}]}</Text>`;
+
+      expect(validateCustomJsxTemplate(template).some(({ severity }) => severity === "error")).toBe(true);
+      expect(() => renderSafeJsx({ template, components, bindings })).toThrow(/reflective property/u);
+    },
+  );
+
+  test.each([...CUSTOM_JSX_BLOCKED_PROPS])("removes blocked prop %s at the renderer boundary", (property) => {
+    const safe = sanitizeCustomJsxProps({ [property]: "unsafe", title: "safe" }, "Text");
+    expect(safe).not.toHaveProperty(property);
+    expect(safe).toHaveProperty("title", "safe");
+  });
+
+  test("uses the same depth and operation budgets for analysis and runtime", () => {
+    const template = `<Text>{${"!".repeat(CUSTOM_JSX_LIMITS.astDepth + 1)}data}</Text>`;
+    expect(validateCustomJsxTemplate(template).some(({ message }) => message.includes("depth limit"))).toBe(true);
+  });
+
+  test("passes unknown ordinary props through as advisories and blocks capabilities explicitly", () => {
+    const diagnostics = validateCustomJsxTemplate('<Text futureMantineProp="yes">Safe</Text>');
+    expect(diagnostics).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: "warning", message: expect.stringContaining("UNKNOWN_MANTINE_PROP") }),
+      ]),
+    );
+    expect(sanitizeCustomJsxProps({ futureMantineProp: "yes" }, "Text")).toHaveProperty("futureMantineProp", "yes");
+    expect(validateCustomJsxTemplate("<Text onClick={() => null}>Unsafe</Text>")).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: "error", message: expect.stringContaining("BLOCKED_CAPABILITY") }),
+      ]),
+    );
+    expect(validateCustomJsxTemplate("<Text valueFormatter={(value) => value}>Unsafe</Text>")).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: "error", message: expect.stringContaining("Callback prop") }),
+      ]),
+    );
+    expect(validateCustomJsxTemplate('<Anchor href="javascript:alert(1)">Unsafe</Anchor>')).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: "error", message: expect.stringContaining("INVALID_PROP_VALUE") }),
+      ]),
+    );
+    expect(validateCustomJsxTemplate('<Box pos="fixed" top={0}>Unsafe</Box>')).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: "error", message: expect.stringContaining("BLOCKED_CAPABILITY") }),
+      ]),
+    );
+    expect(sanitizeCustomJsxProps({ pos: "fixed", top: 0, unstyled: true })).toEqual({ unstyled: true });
+    expect(sanitizeCustomJsxProps({ position: "top", unstyled: true }, "Tooltip")).toEqual({
+      position: "top",
+      unstyled: true,
+    });
+  });
+
+  test("rejects unsupported date-time multiple mode in analysis and at the renderer boundary", () => {
+    expect(validateCustomJsxTemplate('<DateTimePicker type="multiple" />')).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: "error", message: expect.stringContaining("INVALID_PROP_VALUE") }),
+      ]),
+    );
+    expect(sanitizeCustomJsxProps({ type: "multiple", label: "Date" }, "DateTimePicker")).toEqual({
+      label: "Date",
+    });
+    const rendered = renderSafeJsx({
+      template: "<DateTimePicker {...data.props} />",
+      components: { ...components, DateTimePicker: (() => null) as never },
+      bindings: { data: { props: { type: "multiple", label: "Date" } } },
+    });
+    expect(rendered.warnings).toEqual([expect.stringContaining("INVALID_PROP_VALUE")]);
+  });
+
+  test("reports and removes component-specific blocked props from explicit and spread JSX", () => {
+    expect(validateCustomJsxTemplate('<Tooltip target="#outside">Unsafe</Tooltip>')).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: "error", message: expect.stringContaining("BLOCKED_CAPABILITY") }),
+      ]),
+    );
+    expect(sanitizeCustomJsxProps({ target: "#outside", label: "Safe" }, "Tooltip")).toEqual({ label: "Safe" });
+
+    const rendered = renderSafeJsx({
+      template: "<Tooltip {...data.props}>Safe</Tooltip>",
+      components: { ...components, Tooltip: (() => null) as never },
+      bindings: { data: { props: { target: "#outside", label: "Safe" } } },
+    });
+    expect(rendered.warnings).toEqual([
+      expect.stringContaining("BLOCKED_CAPABILITY: Prop 'Tooltip.target' is not allowed"),
+    ]);
+  });
+
+  test("preserves interpreted React elements in safe ReactNode props", () => {
+    const rendered = renderSafeJsx({
+      template: '<Button leftSection={<TablerIcon name="plus" />}>Add</Button>',
+      components: {
+        Button: ((props: { children?: unknown; leftSection?: unknown }) =>
+          createElement("button", null, props.leftSection as never, props.children as never)) as never,
+        TablerIcon: ((props: { name?: string }) => createElement("span", null, props.name)) as never,
+      },
+      bindings,
+    });
+    expect(rendered.warnings).toEqual([]);
+    expect(renderToStaticMarkup(rendered.node)).toContain("<span>plus</span>Add");
+  });
+
+  test.each(["|", "&", "^", "in", "instanceof"])(
+    "rejects unsupported binary operator %s in analysis and runtime",
+    (operator) => {
+      const right = operator === "in" ? "data" : operator === "instanceof" ? "data.Type" : "1";
+      const template = `<Text>{1 ${operator} ${right}}</Text>`;
+      expect(validateCustomJsxTemplate(template)).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ severity: "error", message: expect.stringContaining("Binary operator") }),
+        ]),
+      );
+      expect(() => renderSafeJsx({ template, components, bindings: { data: { Type: Object } } })).toThrow(
+        "Unsupported binary operator",
+      );
+    },
+  );
+
+  test.each([
+    ["data.fn()", "CALL_TARGET_NOT_ALLOWED"],
+    ["data.value.unknownMethod()", "CALL_TARGET_NOT_ALLOWED"],
+    ["data.items.map()", "CALLBACK_VALUE_NOT_ALLOWED"],
+    ["data.items.map(data.fn)", "CALLBACK_VALUE_NOT_ALLOWED"],
+    ["data.items.sort(Number)", "CALLBACK_VALUE_NOT_ALLOWED"],
+    ["data.items.reduce(Number, 0)", "CALLBACK_VALUE_NOT_ALLOWED"],
+  ])("rejects analyzer/runtime call mismatch %s", (expression, diagnostic) => {
+    const template = `<Text>{${expression}}</Text>`;
+    expect(validateCustomJsxTemplate(template)).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: "error", message: expect.stringContaining(diagnostic) }),
+      ]),
+    );
+    expect(() =>
+      renderSafeJsx({
+        template,
+        components,
+        bindings: { data: { fn: () => 1, items: [1, 2], value: {}, Type: Object } },
+      }),
+    ).toThrow();
+  });
+
+  test.each([
+    "data.items.map(Number).join(',')",
+    "data.items.filter(Boolean).join(',')",
+    "String(data.value)",
+    "data.label.toUpperCase()",
+  ])("accepts documented safe call %s", (expression) => {
+    const template = `<Text>{${expression}}</Text>`;
+    expect(validateCustomJsxTemplate(template).filter(({ severity }) => severity === "error")).toEqual([]);
+    expect(() =>
+      renderSafeJsx({
+        template,
+        components,
+        bindings: createCustomJsxBindings({ items: [0, 2], label: "safe", value: 2 }),
+      }),
+    ).not.toThrow();
+  });
+
+  test("blocks refs, native popovers, and editable DOM capabilities without blocking declarative bind", () => {
+    const diagnostics = validateCustomJsxTemplate(
+      '<TextInput bind="search" rootRef={data.ref} popoverTarget="outside" contentEditable />',
+    );
+    expect(diagnostics.filter(({ severity }) => severity === "error")).toHaveLength(3);
+    expect(diagnostics.some(({ message }) => message.includes("Prop 'bind'"))).toBe(false);
+  });
+
+  test("validates explicit bind attributes through the JSX AST", () => {
+    expect(
+      validateCustomJsxTemplate('<TextInput bind="search" />').filter(({ severity }) => severity === "error"),
+    ).toEqual([]);
+    expect(validateCustomJsxTemplate("<TextInput bind={data.name} />")).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: "error", message: expect.stringContaining("literal input name") }),
+      ]),
+    );
+    expect(validateCustomJsxTemplate('<TextInput bind="not valid" />')).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: "error", message: expect.stringContaining("Invalid bind input name") }),
+      ]),
+    );
+    expect(
+      validateCustomJsxTemplate('<Text>{"<TextInput bind={data.name} />"}</Text>').some(({ message }) =>
+        message.includes("literal input name"),
+      ),
+    ).toBe(false);
+  });
+
+  test("rejects bind values introduced by JSX spreads at the emitter boundary", () => {
+    expect(() =>
+      renderSafeJsx({
+        template: "<TextInput {...data.props} />",
+        components: { TextInput: (() => null) as never },
+        bindings: { data: { props: { bind: "remote-name", label: "Unsafe" } } },
+      }),
+    ).toThrow("BIND_SPREAD_NOT_ALLOWED");
+  });
+
+  test("provides closest component and binding diagnostics", () => {
+    expect(validateCustomJsxTemplate("<Stak />")[0]?.message).toMatch(/UNKNOWN_COMPONENT.*Stack/u);
+    expect(validateCustomJsxTemplate('<Text bind="search" />')).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: "warning", message: expect.stringContaining("BINDING_UNAVAILABLE") }),
+      ]),
+    );
+    expect(() => renderSafeJsx({ template: '<Text bind="search" />', components, bindings })).not.toThrow();
+  });
+
+  test("reports denied component families as blocked capabilities", () => {
+    expect(validateCustomJsxTemplate("<ModalRoot opened />")[0]?.message).toMatch(/BLOCKED_CAPABILITY/u);
+  });
+
+  test("reports blocked capabilities introduced through spreads at runtime", () => {
+    const rendered = renderSafeJsx({
+      template: "<Text {...data.props}>Safe</Text>",
+      components,
+      bindings: { data: { props: { onClick: "unsafe", href: "javascript:alert(1)" } } },
+    });
+    expect(rendered.warnings).toEqual(
+      expect.arrayContaining([
+        expect.stringContaining("BLOCKED_CAPABILITY"),
+        expect.stringContaining("INVALID_PROP_VALUE"),
+      ]),
+    );
+  });
+
+  test("sanitizes and diagnoses blocked capabilities inside nested Mantine props", () => {
+    const props = sanitizeCustomJsxProps({
+      tooltipProps: { label: "Safe", onClick: "unsafe", href: "javascript:alert(1)" },
+      data: [{ image: "metric-name", onClick: "api-field" }],
+    });
+    expect(props).toEqual({
+      tooltipProps: { label: "Safe" },
+      data: [{ image: "metric-name", onClick: "api-field" }],
+    });
+    expect(sanitizeCustomJsxProps({ values: ["safe", () => "unsafe", { nested: () => "unsafe" }] })).toEqual({
+      values: ["safe", undefined, { nested: undefined }],
+    });
+    expect(validateCustomJsxTemplate("<Text tooltipProps={{ onClick: () => null }}>Unsafe</Text>")).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: "error", message: expect.stringContaining("Callback prop") }),
+      ]),
+    );
+    expect(
+      validateCustomJsxTemplate("<BarChart data={data.items.map((item) => item)} />").some(({ message }) =>
+        message.includes("Callback prop"),
+      ),
+    ).toBe(false);
+    expect(validateCustomJsxTemplate("<Select data={data.items.map((item) => () => item.label)} />")).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: "error", message: expect.stringContaining("BLOCKED_CAPABILITY") }),
+      ]),
+    );
+  });
+
+  test("supports expression callbacks", () => {
+    const template =
+      '<Text>{data.items.filter((item) => item.visible).map((item) => item.name.toUpperCase()).join(", ")}</Text>';
+    expect(validateCustomJsxTemplate(template).filter(({ severity }) => severity === "error")).toEqual([]);
+    const rendered = renderSafeJsx({
+      template,
+      components: {
+        Text: ((props: { children?: unknown }) => createElement("span", null, props.children as never)) as never,
+      },
+      bindings: { data: { items: [{ name: "Bulbasaur", visible: true }] } },
+    });
+    expect(renderToStaticMarkup(rendered.node)).toContain("BULBASAUR");
+  });
+
+  test("supports bounded regex string operations", () => {
+    const template = '<Text>{data.name.replace(/[^a-z]/gi, "-")}</Text>';
+    expect(validateCustomJsxTemplate(template).filter(({ severity }) => severity === "error")).toEqual([]);
+    const rendered = renderSafeJsx({
+      template,
+      components: {
+        Text: ((props: { children?: unknown }) => createElement("span", null, props.children as never)) as never,
+      },
+      bindings: { data: { name: "Bulba saur!" } },
+    });
+    expect(renderToStaticMarkup(rendered.node)).toContain("Bulba-saur-");
+  });
+
+  test.each(["/(a+)+$/", "/(?<=a)b/", "/(a)\\1/", "/^(a|aa)+$/", "/^(a|a?)+$/", "/^a+a+$/", "/^(\\w+\\s?)*$/"])(
+    "rejects unsafe regex %s in analysis and at runtime",
+    (pattern) => {
+      const template = `<Text>{${pattern}.test(data.name)}</Text>`;
+      expect(validateCustomJsxTemplate(template)).toEqual(
+        expect.arrayContaining([expect.objectContaining({ message: expect.stringContaining("UNSAFE_REGEX") })]),
+      );
+      expect(() =>
+        renderSafeJsx({ template, components, bindings: { data: { name: "a".repeat(10_000) + "!" } } }),
+      ).toThrow("UNSAFE_REGEX");
+    },
+  );
+
+  test("allows a single unambiguous variable regex quantifier", () => {
+    const template = '<Text>{/^(ab)+$/.test(data.name) ? "yes" : "no"}</Text>';
+    expect(validateCustomJsxTemplate(template).filter(({ severity }) => severity === "error")).toEqual([]);
+    expect(() => renderSafeJsx({ template, components, bindings: { data: { name: "abab" } } })).not.toThrow();
+  });
+
+  test("bounds response data depth, node count, and string length without recursive traversal", () => {
+    let deeplyNested: unknown = null;
+    for (let depth = 0; depth <= CUSTOM_JSX_DATA_LIMITS.depth; depth += 1) deeplyNested = { child: deeplyNested };
+    expect(() => createCustomJsxBindings(deeplyNested)).toThrow(/depth limit/u);
+    expect(() => createCustomJsxBindings(Array.from({ length: CUSTOM_JSX_DATA_LIMITS.nodes }).fill(null))).toThrow(
+      /node limit/u,
+    );
+    expect(() => createCustomJsxBindings("x".repeat(CUSTOM_JSX_DATA_LIMITS.stringLength + 1))).toThrow(
+      /string length limit/u,
+    );
+  });
+
+  test("keeps direct documented safe helper callbacks available", () => {
+    const template = '<Text>{data.items.map(Number).join(",")}</Text>';
+    expect(validateCustomJsxTemplate(template).filter(({ severity }) => severity === "error")).toEqual([]);
+    expect(() =>
+      renderSafeJsx({ template, components, bindings: createCustomJsxBindings({ items: ["1", "2"] }) }),
+    ).not.toThrow();
+  });
+
+  test("rejects IIFEs and callback statement blocks", () => {
+    for (const template of [
+      "{(() => <Text>value</Text>)()}",
+      "{data.items.map((item) => { const value = item; return value; })}",
+    ]) {
+      expect(
+        validateCustomJsxTemplate(template).some(
+          ({ message }) => message.includes("IIFE") || message.includes("UNSUPPORTED_BLOCK_STATEMENT"),
+        ),
+      ).toBe(true);
+      expect(() =>
+        renderSafeJsx({ template, components, bindings: createCustomJsxBindings({ items: [1] }) }),
+      ).toThrow();
+    }
+  });
+
+  test("normalizes duplicate callback parameter parse diagnostics", () => {
+    const template = "{data.items.map((item, item) => item)}";
+    expect(validateCustomJsxTemplate(template)).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ message: expect.stringContaining("DUPLICATE_LOCAL_BINDING") }),
+      ]),
+    );
+    expect(() => renderSafeJsx({ template, components, bindings: { data: { items: [1] } } })).toThrow(
+      "DUPLICATE_LOCAL_BINDING",
+    );
+  });
+
+  test("rejects callback values outside controlled call sites", () => {
+    const template = "<Text>{(item) => item}</Text>";
+    expect(validateCustomJsxTemplate(template)).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ message: expect.stringContaining("CALLBACK_VALUE_NOT_ALLOWED") }),
+      ]),
+    );
+    expect(() => renderSafeJsx({ template, components, bindings })).toThrow("CALLBACK_VALUE_NOT_ALLOWED");
+  });
+
+  test.each(["constructor", "call", "bind"])(
+    "keeps blocked lexical binding %s aligned between diagnostics and runtime",
+    (name) => {
+      const parameterTemplate = `{data.items.map((${name}) => <Text>{${name}}</Text>)}`;
+
+      expect(validateCustomJsxTemplate(parameterTemplate)).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ message: expect.stringContaining("INVALID_LOCAL_DECLARATION") }),
+        ]),
+      );
+      expect(() =>
+        renderSafeJsx({ template: parameterTemplate, components, bindings: { data: { items: [1] } } }),
+      ).toThrow("INVALID_LOCAL_DECLARATION");
+    },
+  );
+
+  test.each(['{data.items["ma" + "p"]((item) => item).join(",")}', '{data.items[`map`]((item) => item).join(",")}'])(
+    "keeps analyzer and runtime aligned for static computed collection callbacks",
+    (template) => {
+      expect(validateCustomJsxTemplate(template).filter(({ severity }) => severity === "error")).toEqual([]);
+      expect(() =>
+        renderSafeJsx({ template, components, bindings: { data: { items: ["one", "two"] } } }),
+      ).not.toThrow();
+    },
+  );
+});
diff --git a/packages/custom-widgets/src/test/options.spec.ts b/packages/custom-widgets/src/test/options.spec.ts
new file mode 100644
index 000000000..bd3eac0ef
--- /dev/null
+++ b/packages/custom-widgets/src/test/options.spec.ts
@@ -0,0 +1,104 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  customWidgetDefinitionSchema,
+  customWidgetOptionControls,
+  customWidgetOptionSchema,
+  getCustomWidgetDefaultOptions,
+  validateCustomWidgetOptions,
+} from "../core";
+
+const defaultsByControl: Record<(typeof customWidgetOptionControls)[number], unknown> = {
+  text: "value",
+  textarea: "long value",
+  number: 2,
+  switch: true,
+  select: "one",
+  multiSelect: ["one"],
+  slider: 50,
+  date: "2026-07-21",
+  time: "12:30",
+  color: "#228be6",
+  icon: "server",
+  url: "https://example.com",
+  duration: 30,
+  timeZone: "Europe/Paris",
+  json: { nested: true },
+};
+
+describe("lean Custom Widget options", () => {
+  it("treats an empty dynamic choices item path as the response root", () => {
+    expect(
+      customWidgetOptionSchema.parse({
+        label: "Printer",
+        control: "select",
+        default: "",
+        choicesFrom: {
+          request: "printers",
+          itemsPath: "",
+          valuePath: "id",
+          labelPath: "name",
+        },
+      }).choicesFrom?.itemsPath,
+    ).toBeUndefined();
+  });
+
+  it.each(customWidgetOptionControls)("accepts the %s control and infers its default type", (control) => {
+    const option = {
+      label: control,
+      control,
+      default: defaultsByControl[control],
+      ...(["select", "multiSelect"].includes(control) ? { choices: [{ label: "One", value: "one" }] } : {}),
+    };
+    expect(customWidgetOptionSchema.safeParse(option).success).toBe(true);
+  });
+
+  it("builds and validates a complete instance configuration", () => {
+    const options = Object.fromEntries(
+      customWidgetOptionControls.map((control) => [
+        control,
+        customWidgetOptionSchema.parse({
+          label: control,
+          control,
+          default: defaultsByControl[control],
+          ...(["select", "multiSelect"].includes(control) ? { choices: [{ label: "One", value: "one" }] } : {}),
+        }),
+      ]),
+    );
+    const configuration = getCustomWidgetDefaultOptions(options);
+    expect(validateCustomWidgetOptions(options, configuration)).toEqual([]);
+  });
+
+  it("rejects duplicate static choice values", () => {
+    expect(
+      customWidgetOptionSchema.safeParse({
+        label: "Environment",
+        control: "select",
+        default: "prod",
+        choices: [
+          { label: "Production", value: "prod" },
+          { label: "Duplicate", value: "prod" },
+        ],
+      }).success,
+    ).toBe(false);
+  });
+
+  it("keeps dynamic choices on a load query without invocation parameters", () => {
+    const result = customWidgetDefinitionSchema.safeParse({
+      $schema: "homarr-custom-widget-v2",
+      name: "Dynamic options",
+      sources: { default: { baseUrl: "https://example.com", networkScope: "public", auth: "none" } },
+      requests: { environments: { path: "/environments" } },
+      options: {
+        environment: {
+          label: "Environment",
+          control: "select",
+          default: "",
+          choicesFrom: { request: "environments", valuePath: "id", labelPath: "name" },
+        },
+      },
+      template: "<Text>{options.environment}</Text>",
+    });
+    expect(result.success).toBe(true);
+  });
+});
diff --git a/packages/custom-widgets/src/test/preview-sessions.spec.ts b/packages/custom-widgets/src/test/preview-sessions.spec.ts
new file mode 100644
index 000000000..e9b038876
--- /dev/null
+++ b/packages/custom-widgets/src/test/preview-sessions.spec.ts
@@ -0,0 +1,192 @@
+import { describe, expect, it } from "vitest";
+
+import { customWidgetDefinitionSchema } from "../core";
+import { CustomWidgetPreviewSessionService } from "../server";
+import type { PreviewSessionStore } from "../server";
+
+const definition = customWidgetDefinitionSchema.parse({
+  $schema: "homarr-custom-widget-v2",
+  name: "Preview",
+  sources: { default: { baseUrl: "https://example.com", networkScope: "public", auth: "bearer" } },
+  requests: { data: { path: "/data" } },
+  options: { limit: { label: "Limit", control: "number", default: 10 } },
+  template: "<Text>{data.data?.name}</Text>",
+});
+
+describe("preview sessions", () => {
+  it("stores keyed definitions and encrypted secrets", async () => {
+    let id = 0;
+    const service = new CustomWidgetPreviewSessionService({
+      createId: () => `id-${++id}`,
+      encrypt: (value) => `encrypted:${value}`,
+      decrypt: (value) => value.replace("encrypted:", ""),
+      now: () => 1_000,
+    });
+    const created = await service.create({
+      userId: "user",
+      sources: definition.sources,
+      requests: definition.requests,
+      name: definition.name,
+      template: definition.template,
+      optionDefinitions: definition.options,
+      options: { limit: 10 },
+      secrets: [{ sourceId: "default", kind: "apiKey", value: "secret" }],
+    });
+    const session = await service.get(created.id, "user");
+    expect(session.requests.data?.path).toBe("/data");
+    expect(session.secrets[0]?.value).not.toBe("secret");
+    expect(service.getSecrets(session, "default")).toEqual([{ kind: "apiKey", value: "secret" }]);
+  });
+
+  it("keeps journal paths redacted and bounded to the session", async () => {
+    let id = 0;
+    const service = new CustomWidgetPreviewSessionService({
+      createId: () => `id-${++id}`,
+      encrypt: String,
+      decrypt: String,
+    });
+    const created = await service.create({
+      userId: "user",
+      sources: definition.sources,
+      requests: definition.requests,
+      name: definition.name,
+      template: definition.template,
+      optionDefinitions: definition.options,
+      options: { limit: 10 },
+      secrets: [],
+    });
+    const session = await service.get(created.id, "user");
+    await service.appendJournal(session, {
+      requestId: "data",
+      kind: "query",
+      method: "GET",
+      path: "/data",
+      status: 200,
+      durationMs: 5,
+      simulated: false,
+    });
+    expect((await service.getJournal(created.id, "user"))[0]).toMatchObject({ path: "/data", status: 200 });
+  });
+
+  it("applies source deployment values without restoring stale source metadata", async () => {
+    let id = 0;
+    const service = new CustomWidgetPreviewSessionService({
+      createId: () => `id-${++id}`,
+      encrypt: String,
+      decrypt: String,
+    });
+    const created = await service.create({
+      userId: "user",
+      sources: definition.sources,
+      requests: definition.requests,
+      name: definition.name,
+      template: definition.template,
+      optionDefinitions: definition.options,
+      options: { limit: 10 },
+      secrets: [],
+    });
+
+    await service.configureSource(
+      created.id,
+      "user",
+      "default",
+      { baseUrl: "http://service.local", networkScope: "private", auth: "bearer" },
+      [{ sourceId: "default", kind: "apiKey", value: "secret" }],
+    );
+
+    const configured = await service.get(created.id, "user");
+    expect(configured.sources.default).toEqual({
+      baseUrl: "http://service.local",
+      networkScope: "private",
+      auth: "bearer",
+    });
+    await expect(
+      service.configureSource(
+        created.id,
+        "user",
+        "default",
+        { baseUrl: "http://service.local", networkScope: "private", auth: "none" },
+        [],
+      ),
+    ).rejects.toThrow("authentication changed");
+  });
+
+  it("does not delete a preview when a different user looks it up", async () => {
+    const values = new Map<string, unknown>();
+    const store: PreviewSessionStore = {
+      saveSession: async (id, value) => {
+        values.set(id, value);
+      },
+      compareAndSwapSession: async (id, revision, value) => {
+        const current = values.get(id) as { revision?: number } | undefined;
+        if (current?.revision !== revision) return false;
+        values.set(id, value);
+        return true;
+      },
+      getSession: async (id) => values.get(id),
+      deleteSession: async (id) => {
+        values.delete(id);
+      },
+      appendJournal: async () => undefined,
+      getJournal: async () => [],
+    };
+    const service = new CustomWidgetPreviewSessionService({
+      createId: () => "session",
+      encrypt: String,
+      decrypt: String,
+      store,
+    });
+    await service.create({
+      userId: "owner",
+      sources: definition.sources,
+      requests: definition.requests,
+      name: definition.name,
+      template: definition.template,
+      optionDefinitions: definition.options,
+      options: { limit: 10 },
+      secrets: [],
+    });
+
+    await expect(service.get("session", "other-user")).rejects.toMatchObject({ code: "NOT_FOUND" });
+    await expect(service.get("session", "owner")).resolves.toMatchObject({ id: "session" });
+  });
+
+  it("retries concurrent mutations without losing source, secret, or action state", async () => {
+    const service = new CustomWidgetPreviewSessionService({
+      createId: () => "session",
+      encrypt: (value) => `encrypted:${value}`,
+      decrypt: (value) => value.replace("encrypted:", ""),
+    });
+    await service.create({
+      userId: "owner",
+      sources: {
+        ...definition.sources,
+        secondary: { baseUrl: "https://secondary.example.com", networkScope: "public", auth: "basic" },
+      },
+      requests: definition.requests,
+      name: definition.name,
+      template: definition.template,
+      optionDefinitions: definition.options,
+      options: { limit: 10 },
+      secrets: [],
+    });
+
+    await Promise.all([
+      service.setLiveActions("session", "owner", true),
+      service.setSecrets("session", "owner", [{ sourceId: "secondary", kind: "username", value: "operator" }]),
+      service.configureSource(
+        "session",
+        "owner",
+        "default",
+        { baseUrl: "https://api.example.com", networkScope: "public", auth: "bearer" },
+        [{ sourceId: "default", kind: "apiKey", value: "token" }],
+      ),
+    ]);
+
+    const session = await service.get("session", "owner");
+    expect(session.liveActions).toBe(true);
+    expect(session.sources.default?.baseUrl).toBe("https://api.example.com");
+    expect(service.getSecrets(session, "default")).toEqual([{ kind: "apiKey", value: "token" }]);
+    expect(service.getSecrets(session, "secondary")).toEqual([{ kind: "username", value: "operator" }]);
+  });
+});
diff --git a/packages/custom-widgets/src/test/reference-widgets.spec.ts b/packages/custom-widgets/src/test/reference-widgets.spec.ts
new file mode 100644
index 000000000..d8ffbfb30
--- /dev/null
+++ b/packages/custom-widgets/src/test/reference-widgets.spec.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+
+import { BUNDLED_CUSTOM_WIDGETS, customWidgetDefinitionSchema, parseCustomWidgetAiResponse } from "../core";
+import { collectCustomWidgetRequestReferences } from "../core/request-schema";
+import { PORTAINER_REFERENCE_WIDGET } from "./fixtures/reference-widgets";
+
+describe("reference widget capabilities", () => {
+  it("validates a full Pokédex with list and manual detail requests", () => {
+    const pokedex = BUNDLED_CUSTOM_WIDGETS.find(({ id }) => id === "seed-pokedex");
+    expect(pokedex).toBeDefined();
+    const parsed = customWidgetDefinitionSchema.parse(pokedex?.widget);
+    expect(parsed.requests.pokemon?.trigger).toBe("load");
+    expect(parsed.requests.detail?.trigger).toBe("manual");
+  });
+
+  it("round-trips the full Pokédex through the single-block AI paste format", () => {
+    const pokedex = BUNDLED_CUSTOM_WIDGETS.find(({ id }) => id === "seed-pokedex")?.widget;
+    if (!pokedex) throw new Error("Pokédex seed was not found");
+    const parsed = parseCustomWidgetAiResponse(`\`\`\`json\n${JSON.stringify(pokedex, null, 2)}\n\`\`\``);
+    expect(parsed.success).toBe(true);
+    if (parsed.success) expect(parsed.widget.template).toBe(pokedex.template);
+  });
+
+  it("validates a polished Portainer dashboard with start, stop, and restart actions", () => {
+    const parsed = customWidgetDefinitionSchema.parse(PORTAINER_REFERENCE_WIDGET);
+    expect(parsed.sources.default?.auth).toEqual({ type: "apiKeyHeader", name: "X-API-Key" });
+    expect(Object.keys(parsed.requests)).toEqual(["containers", "start", "stop", "restart"]);
+    for (const action of ["start", "stop", "restart"] as const) {
+      const request = parsed.requests[action];
+      if (!request) throw new Error(`Portainer ${action} request was not found`);
+      expect(request.kind).toBe("action");
+      expect(request.invalidates).toEqual(["containers"]);
+      expect([...collectCustomWidgetRequestReferences(request).params]).toEqual(["id"]);
+    }
+  });
+
+  it("round-trips the Portainer dashboard through AI paste", () => {
+    const parsed = parseCustomWidgetAiResponse(
+      `\`\`\`json\n${JSON.stringify(PORTAINER_REFERENCE_WIDGET, null, 2)}\n\`\`\``,
+    );
+    expect(parsed.success).toBe(true);
+    if (parsed.success) expect(parsed.widget.template).toBe(PORTAINER_REFERENCE_WIDGET.template);
+  });
+});
diff --git a/packages/custom-widgets/src/test/request-deadline.spec.ts b/packages/custom-widgets/src/test/request-deadline.spec.ts
new file mode 100644
index 000000000..d350705c0
--- /dev/null
+++ b/packages/custom-widgets/src/test/request-deadline.spec.ts
@@ -0,0 +1,209 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import type * as NetworkPolicy from "../server/network-policy";
+import type { CustomWidgetHttpRequest } from "../server/request-executor";
+
+const mocks = vi.hoisted(() => ({
+  lookup: vi.fn(),
+  createPinnedAgent: vi.fn(),
+}));
+
+vi.mock("node:dns/promises", () => ({ lookup: mocks.lookup }));
+vi.mock("../server/network-policy", async (importOriginal) => {
+  const actual = await importOriginal<typeof NetworkPolicy>();
+  return { ...actual, createPinnedAgent: mocks.createPinnedAgent };
+});
+
+import { executeCustomWidgetRequest, MAX_REQUEST_DURATION_MS } from "../server/request-executor";
+import { closeDispatcher, DISPATCHER_CLOSE_GRACE_MS } from "../server/request-dispatcher-lifecycle";
+import { resolveAndValidateHost } from "../server/network-policy";
+
+const query = {
+  baseUrl: "https://example.com",
+  method: "GET",
+  networkScope: "public",
+  kind: "query",
+} satisfies CustomWidgetHttpRequest;
+
+describe("custom widget request deadline", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mocks.lookup.mockReset();
+    mocks.createPinnedAgent.mockReset();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("returns at the total deadline when DNS resolution stalls", async () => {
+    mocks.lookup.mockReturnValue(new Promise(() => undefined));
+    const assertion = expect(executeCustomWidgetRequest(query)).rejects.toMatchObject({
+      code: "BAD_GATEWAY",
+      reason: "timeout",
+    });
+
+    await vi.advanceTimersByTimeAsync(MAX_REQUEST_DURATION_MS);
+
+    await assertion;
+    expect(mocks.createPinnedAgent).not.toHaveBeenCalled();
+  });
+
+  it("cancels an injected stalled resolver when its deadline aborts", async () => {
+    const controller = new AbortController();
+    const resolver = vi.fn(() => new Promise<never>(() => undefined));
+    const assertion = expect(
+      resolveAndValidateHost("example.com", "public", { signal: controller.signal, resolver }),
+    ).rejects.toMatchObject({ name: "AbortError" });
+
+    controller.abort();
+
+    await assertion;
+    expect(resolver).toHaveBeenCalledWith("example.com");
+  });
+
+  it("detaches stalled dispatcher cleanup after a bounded grace period", async () => {
+    const close = vi.fn(() => new Promise<void>(() => undefined));
+    const destroy = vi.fn(async () => undefined);
+    mocks.createPinnedAgent.mockReturnValue({
+      request: vi.fn(async () => ({
+        statusCode: 200,
+        headers: { "content-type": "application/json" },
+        body: {
+          arrayBuffer: vi.fn(async () => new TextEncoder().encode("{}").buffer),
+        },
+      })),
+      close,
+      destroy,
+    });
+    const logError = vi.fn();
+    const request = executeCustomWidgetRequest({
+      ...query,
+      baseUrl: "http://127.0.0.1",
+      networkScope: "loopback",
+      logError,
+    });
+
+    await vi.advanceTimersByTimeAsync(DISPATCHER_CLOSE_GRACE_MS);
+
+    await expect(request).resolves.toMatchObject({ ok: true, status: 200, data: {} });
+    expect(close).toHaveBeenCalledOnce();
+    expect(destroy).toHaveBeenCalledOnce();
+    expect(logError).toHaveBeenCalledWith(
+      expect.objectContaining({
+        errorName: "DispatcherCloseTimeout",
+      }),
+    );
+  });
+
+  it("does not turn a completed action into a failure when dispatcher cleanup rejects", async () => {
+    const closeFailure = Object.assign(new Error("cleanup failed"), { name: "DispatcherCloseError" });
+    const close = vi.fn(async () => {
+      throw closeFailure;
+    });
+    const destroy = vi.fn(async () => undefined);
+    mocks.createPinnedAgent.mockReturnValue({
+      request: vi.fn(async () => ({
+        statusCode: 200,
+        headers: { "content-type": "application/json" },
+        body: {
+          arrayBuffer: vi.fn(async () => new TextEncoder().encode('{"updated":true}').buffer),
+        },
+      })),
+      close,
+      destroy,
+    });
+    const logError = vi.fn();
+
+    await expect(
+      executeCustomWidgetRequest({
+        ...query,
+        baseUrl: "http://127.0.0.1",
+        method: "POST",
+        networkScope: "loopback",
+        kind: "action",
+        logError,
+      }),
+    ).resolves.toMatchObject({ ok: true, status: 200, data: { updated: true } });
+    expect(close).toHaveBeenCalledOnce();
+    expect(destroy).toHaveBeenCalledOnce();
+    expect(logError).toHaveBeenCalledWith(
+      expect.objectContaining({
+        errorName: "DispatcherCloseError",
+      }),
+    );
+  });
+
+  it("consumes a late close rejection when cleanup starts after the deadline", async () => {
+    const abortReason = new Error("request deadline elapsed");
+    const closeFailure = new Error("late close failure");
+    const controller = new AbortController();
+    controller.abort(abortReason);
+    let rejectClose: ((reason: Error) => void) | undefined;
+    const close = vi.fn(
+      () =>
+        new Promise<void>((_resolve, reject) => {
+          rejectClose = reject;
+        }),
+    );
+    const destroy = vi.fn(async () => undefined);
+
+    await expect(closeDispatcher({ close, destroy } as never, controller.signal)).rejects.toBe(abortReason);
+    rejectClose?.(closeFailure);
+    await Promise.resolve();
+
+    expect(close).toHaveBeenCalledOnce();
+    expect(destroy).toHaveBeenCalledOnce();
+  });
+
+  it("redacts apiKeyQuery credentials from transport errors and structured log events", async () => {
+    const apiKey = "api-key-query-secret";
+    const request = vi.fn(async ({ path }: { path: string }) => {
+      const failure = new Error(`Transport failed for https://example.com${path}`);
+      failure.name = `SocketError:${path}`;
+      throw failure;
+    });
+    mocks.createPinnedAgent.mockReturnValue({
+      request,
+      close: vi.fn(async () => undefined),
+      destroy: vi.fn(async () => undefined),
+    });
+    const logError = vi.fn();
+
+    const error = await executeCustomWidgetRequest({
+      ...query,
+      baseUrl: "http://127.0.0.1",
+      targetUrl: "http://127.0.0.1/status?view=summary",
+      networkScope: "loopback",
+      auth: {
+        type: "apiKeyQuery",
+        headerName: "access_token",
+        secrets: [{ kind: "apiKey", value: apiKey }],
+      },
+      logError,
+    }).then(
+      () => undefined,
+      (cause: unknown) => cause,
+    );
+
+    expect(request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        path: expect.stringContaining(`access_token=${apiKey}`),
+      }),
+    );
+    expect(error).toMatchObject({
+      code: "BAD_GATEWAY",
+      message: "External request failed",
+    });
+    expect((error as Error).cause).toBeUndefined();
+    expect(String(error)).not.toContain(apiKey);
+    expect(String(error)).not.toContain("access_token");
+    expect(logError).toHaveBeenCalledWith({
+      origin: "http://127.0.0.1",
+      method: "GET",
+      errorName: "TransportError",
+    });
+    expect(JSON.stringify({ error, logCalls: logError.mock.calls })).not.toContain(apiKey);
+    expect(JSON.stringify({ error, logCalls: logError.mock.calls })).not.toContain("access_token");
+  });
+});
diff --git a/packages/custom-widgets/src/test/request-limits.spec.ts b/packages/custom-widgets/src/test/request-limits.spec.ts
new file mode 100644
index 000000000..37ded3137
--- /dev/null
+++ b/packages/custom-widgets/src/test/request-limits.spec.ts
@@ -0,0 +1,122 @@
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  CUSTOM_WIDGET_REQUEST_CONCURRENCY_TTL_MS,
+  CustomWidgetRequestLimiter,
+  MAX_REQUEST_DURATION_MS,
+} from "../server";
+import type { RequestLimitStore } from "../server";
+
+const input = { category: "action", userId: "user", itemId: "item", definitionId: "definition" } as const;
+
+describe("custom widget request limits", () => {
+  it("keeps owned concurrency leases beyond the total request deadline", () => {
+    expect(CUSTOM_WIDGET_REQUEST_CONCURRENCY_TTL_MS).toBeGreaterThan(MAX_REQUEST_DURATION_MS);
+  });
+
+  it("enforces local per-user/item concurrency and releases capacity", async () => {
+    const limiter = new CustomWidgetRequestLimiter();
+    const releases = await Promise.all(Array.from({ length: 4 }, () => limiter.acquire(input)));
+    await expect(limiter.acquire(input)).rejects.toMatchObject({ code: "TOO_MANY_REQUESTS", retryAfterMs: 1_000 });
+    await releases[0]?.();
+    await expect(limiter.acquire(input)).resolves.toBeTypeOf("function");
+    await Promise.all(releases.slice(1).map((release) => release()));
+  });
+
+  it("keeps anonymous client concurrency buckets independent", async () => {
+    const limiter = new CustomWidgetRequestLimiter();
+    const firstClient = { ...input, userId: undefined, anonymousId: "198.51.100.10" };
+    const secondClient = { ...input, userId: undefined, anonymousId: "198.51.100.11" };
+    const firstClientReleases = await Promise.all(Array.from({ length: 4 }, () => limiter.acquire(firstClient)));
+
+    await expect(limiter.acquire(firstClient)).rejects.toMatchObject({ code: "TOO_MANY_REQUESTS" });
+    const releaseSecondClient = await limiter.acquire(secondClient);
+
+    await releaseSecondClient();
+    await Promise.all(firstClientReleases.map((release) => release()));
+  });
+
+  it("enforces an identity-independent per-definition rate bucket", async () => {
+    const anonymousQuery = { ...input, category: "query" as const, userId: undefined };
+    let increment = 0;
+    const store: RequestLimitStore = {
+      incrementRate: vi.fn(async () => {
+        increment += 1;
+        return {
+          // Each acquisition increments its identity bucket first and its
+          // definition bucket second. Simulate a fresh forged identity while
+          // the shared definition bucket is already exhausted.
+          count: increment === 4 ? 241 : 1,
+          retryAfterMs: 456,
+        };
+      }),
+      acquireConcurrency: vi.fn(async () => true),
+      releaseConcurrency: vi.fn(async () => undefined),
+    };
+    const limiter = new CustomWidgetRequestLimiter({ store });
+    const release = await limiter.acquire({ ...anonymousQuery, anonymousId: "198.51.100.10" });
+    await release();
+
+    await expect(limiter.acquire({ ...anonymousQuery, anonymousId: "203.0.113.20" })).rejects.toMatchObject({
+      code: "TOO_MANY_REQUESTS",
+      retryAfterMs: 456,
+    });
+
+    const incrementRate = vi.mocked(store.incrementRate);
+    expect(incrementRate.mock.calls[0]?.[0]).not.toBe(incrementRate.mock.calls[2]?.[0]);
+    expect(incrementRate.mock.calls[1]?.[0]).toBe(incrementRate.mock.calls[3]?.[0]);
+    expect(store.acquireConcurrency).toHaveBeenCalledTimes(2);
+  });
+
+  it("enforces category limits and exposes retry metadata", async () => {
+    const store: RequestLimitStore = {
+      incrementRate: vi.fn(async () => ({ count: 11, retryAfterMs: 321 })),
+      acquireConcurrency: vi.fn(async () => true),
+      releaseConcurrency: vi.fn(async () => undefined),
+    };
+    await expect(new CustomWidgetRequestLimiter({ store }).acquire(input)).rejects.toMatchObject({
+      code: "TOO_MANY_REQUESTS",
+      retryAfterMs: 321,
+    });
+    expect(store.acquireConcurrency).not.toHaveBeenCalled();
+  });
+
+  it("releases user capacity when definition capacity cannot be acquired", async () => {
+    const store: RequestLimitStore = {
+      incrementRate: vi.fn(async () => ({ count: 1, retryAfterMs: 60_000 })),
+      acquireConcurrency: vi.fn().mockResolvedValueOnce(true).mockResolvedValueOnce(false),
+      releaseConcurrency: vi.fn(async () => undefined),
+    };
+    await expect(new CustomWidgetRequestLimiter({ store }).acquire(input)).rejects.toMatchObject({
+      code: "TOO_MANY_REQUESTS",
+    });
+    expect(store.releaseConcurrency).toHaveBeenCalledOnce();
+  });
+
+  it("releases only the concurrency lease owned by the request", async () => {
+    const owners = new Set<string>();
+    const store: RequestLimitStore = {
+      incrementRate: vi.fn(async () => ({ count: 1, retryAfterMs: 60_000 })),
+      acquireConcurrency: vi.fn(async (_key, ownerId) => {
+        owners.add(ownerId);
+        return true;
+      }),
+      releaseConcurrency: vi.fn(async (_key, ownerId) => {
+        owners.delete(ownerId);
+      }),
+    };
+    const releaseFirst = await new CustomWidgetRequestLimiter({ store }).acquire(input);
+    const firstOwner = [...owners][0];
+    expect(store.acquireConcurrency).toHaveBeenCalledWith(
+      expect.any(String),
+      firstOwner,
+      expect.any(Number),
+      CUSTOM_WIDGET_REQUEST_CONCURRENCY_TTL_MS,
+    );
+    await releaseFirst();
+
+    expect(firstOwner).toBeTypeOf("string");
+    expect(store.releaseConcurrency).toHaveBeenCalledWith(expect.any(String), firstOwner);
+    expect(owners).not.toContain(firstOwner);
+  });
+});
diff --git a/packages/custom-widgets/src/test/request-manifest.spec.ts b/packages/custom-widgets/src/test/request-manifest.spec.ts
new file mode 100644
index 000000000..23bce2e01
--- /dev/null
+++ b/packages/custom-widgets/src/test/request-manifest.spec.ts
@@ -0,0 +1,84 @@
+import { describe, expect, it } from "vitest";
+
+import { customJsxRequestSchema } from "../core";
+import { renderRequestBody, renderRequestTarget, resolveCustomWidgetRequestValues } from "../server";
+
+const request = customJsxRequestSchema.parse({
+  kind: "action",
+  method: "POST",
+  path: "/devices/{option:room}/{param:id}",
+  query: { verbose: true, level: { $param: "level" } },
+  body: { enabled: { $param: "enabled" }, room: { $option: "room" } },
+});
+
+describe("lean request bindings", () => {
+  it("infers and resolves option and invocation references", () => {
+    const values = resolveCustomWidgetRequestValues(
+      request,
+      { room: "office" },
+      { id: "lamp/1", level: 5, enabled: true },
+    );
+    expect(renderRequestTarget("https://example.com/api/", request, values).toString()).toBe(
+      "https://example.com/api/devices/office/lamp%2F1?verbose=true&level=5",
+    );
+    expect(JSON.parse(renderRequestBody(request, values) ?? "null")).toEqual({ enabled: true, room: "office" });
+  });
+
+  it("rejects missing and extra invocation params", () => {
+    expect(() => resolveCustomWidgetRequestValues(request, { room: "office" }, { id: "lamp", level: 5 })).toThrow(
+      "do not match",
+    );
+    expect(() =>
+      resolveCustomWidgetRequestValues(
+        request,
+        { room: "office" },
+        { id: "lamp", level: 5, enabled: true, extra: true },
+      ),
+    ).toThrow("do not match");
+  });
+
+  it("rejects missing options and non-primitive URL values", () => {
+    expect(() => resolveCustomWidgetRequestValues(request, {}, { id: "lamp", level: 5, enabled: true })).toThrow(
+      "room",
+    );
+    const values = resolveCustomWidgetRequestValues(request, { room: [] }, { id: "lamp", level: 5, enabled: true });
+    expect(() => renderRequestTarget("https://example.com", request, values)).toThrow("Path value");
+  });
+
+  it("supports structured options in JSON bodies", () => {
+    const bodyRequest = customJsxRequestSchema.parse({
+      kind: "action",
+      method: "POST",
+      path: "/rules",
+      body: { entities: { $option: "entities" }, rule: { $option: "rule" } },
+    });
+    const values = resolveCustomWidgetRequestValues(bodyRequest, {
+      entities: ["light.office", "light.desk"],
+      rule: { transition: 2 },
+    });
+    expect(JSON.parse(renderRequestBody(bodyRequest, values) ?? "null")).toEqual({
+      entities: ["light.office", "light.desk"],
+      rule: { transition: 2 },
+    });
+  });
+
+  it("keeps a source base path", () => {
+    const pokemon = customJsxRequestSchema.parse({ path: "/pokemon" });
+    expect(renderRequestTarget("https://pokeapi.co/api/v2", pokemon, {}).toString()).toBe(
+      "https://pokeapi.co/api/v2/pokemon",
+    );
+  });
+
+  it.each(["start", "stop", "restart"])("renders a Portainer %s action without duplicating declarations", (action) => {
+    const portainer = customJsxRequestSchema.parse({
+      kind: "action",
+      method: "POST",
+      path: `/api/endpoints/{option:endpointId}/docker/containers/{param:id}/${action}`,
+      invalidates: ["containers"],
+    });
+    const values = resolveCustomWidgetRequestValues(portainer, { endpointId: 2 }, { id: "abc/123" });
+    expect(renderRequestTarget("https://portainer.example", portainer, values).pathname).toBe(
+      `/api/endpoints/2/docker/containers/abc%2F123/${action}`,
+    );
+  });
+});
diff --git a/packages/custom-widgets/src/test/runtime.spec.tsx b/packages/custom-widgets/src/test/runtime.spec.tsx
new file mode 100644
index 000000000..ad05481c1
--- /dev/null
+++ b/packages/custom-widgets/src/test/runtime.spec.tsx
@@ -0,0 +1,503 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import type { ReactNode } from "react";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ActionButton, CustomJsxRenderer, CustomWidgetRuntimeProvider, SubFetch, ToggleSwitch } from "../runtime";
+import { createCustomJsxComponents } from "../jsx";
+import { MAX_REFRESH_INTERVAL_MS, MAX_REFRESH_INTERVAL_SECONDS, normalizeRefreshInterval } from "../runtime/sub-fetch";
+import type {
+  CustomJsxRequestCapability,
+  CustomWidgetPublishedQueryState,
+  CustomWidgetRequestResult,
+  CustomWidgetRuntimeMessages,
+  CustomWidgetRuntimePort,
+} from "../runtime";
+
+const messages: CustomWidgetRuntimeMessages = {
+  requestIdRequired: "Request ID required",
+  unsavedPreview: "Unsaved",
+  invalidParams: "Invalid params",
+  loadRequest: "Load",
+  requestFailed: "Failed",
+  loading: "Loading",
+  retry: "Retry",
+  widgetItemUnavailable: "Unavailable",
+  actionsDisabledEditMode: "Disabled",
+  actionSimulated: "Simulated",
+  actionCompleted: "Completed",
+  confirmDelete: "Confirm delete",
+  toggle: "Toggle",
+  refresh: "Refresh",
+};
+
+let root: Root;
+let host: HTMLDivElement;
+
+beforeEach(() => {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  window.matchMedia = vi.fn().mockImplementation(() => ({
+    matches: false,
+    media: "",
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+
+afterEach(async () => {
+  await act(() => root.unmount());
+  host.remove();
+  vi.restoreAllMocks();
+});
+
+function createPort(overrides: Partial<CustomWidgetRuntimePort> = {}): CustomWidgetRuntimePort {
+  return {
+    query: vi.fn(async () => ({ ok: true, status: 200, data: { name: "Bulbasaur" } })),
+    executeAction: vi.fn(async () => ({ ok: true, status: 200, data: null })),
+    invalidate: vi.fn(async () => undefined),
+    confirm: vi.fn(async () => true),
+    notify: vi.fn(),
+    ...overrides,
+  };
+}
+
+async function render(
+  node: ReactNode,
+  port: CustomWidgetRuntimePort,
+  capabilities: readonly CustomJsxRequestCapability[] = [],
+  setQueryState?: (requestId: string, value: CustomWidgetPublishedQueryState | null) => void,
+) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  await act(async () => {
+    root.render(
+      <MantineProvider>
+        <QueryClientProvider client={queryClient}>
+          <CustomWidgetRuntimeProvider
+            itemId="item-1"
+            isEditMode={false}
+            requestCapabilities={capabilities}
+            port={port}
+            messages={messages}
+            setQueryState={setQueryState}
+          >
+            {node}
+          </CustomWidgetRuntimeProvider>
+        </QueryClientProvider>
+      </MantineProvider>,
+    );
+  });
+}
+
+async function settle() {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+}
+
+describe("Custom Widget runtime ports", () => {
+  it("clamps refresh intervals below the browser timer overflow boundary", () => {
+    expect(normalizeRefreshInterval(MAX_REFRESH_INTERVAL_SECONDS)).toBe(MAX_REFRESH_INTERVAL_MS);
+    expect(normalizeRefreshInterval(MAX_REFRESH_INTERVAL_SECONDS + 1)).toBe(MAX_REFRESH_INTERVAL_MS);
+    expect(normalizeRefreshInterval(Number.MAX_VALUE)).toBe(MAX_REFRESH_INTERVAL_MS);
+    expect(MAX_REFRESH_INTERVAL_MS).toBeLessThan(2 ** 31 - 1);
+  });
+
+  it("routes binding-construction failures through the runtime error display", async () => {
+    await render(
+      <CustomJsxRenderer
+        template="<Text>Safe</Text>"
+        data={{}}
+        components={{ Text: (() => null) as never }}
+        createBindings={() => {
+          throw new RangeError("Response data exceeded the depth limit");
+        }}
+        messages={{ noTemplate: "No template", templateWarnings: (count) => `${count} warnings` }}
+      />,
+      createPort(),
+    );
+
+    expect(host.textContent).toContain("RUNTIME_RENDER_ERROR");
+    expect(host.textContent).toContain("Response data exceeded the depth limit");
+  });
+
+  it("renders common safe collection and number formatting operations", async () => {
+    const components = createCustomJsxComponents({
+      TablerIcon: (() => null) as never,
+      copyLabels: { copy: "Copy", copied: "Copied" },
+    });
+    await render(
+      <CustomJsxRenderer
+        template={
+          '<Text>{[1, 2].concat([3]).flatMap(value => [value]).map(value => value.toLocaleString()).join(" · ")}</Text>'
+        }
+        data={{}}
+        components={components}
+        createBindings={() => ({})}
+        messages={{ noTemplate: "No template", templateWarnings: (count) => `${count} warnings` }}
+      />,
+      createPort(),
+    );
+    expect(host.textContent).toContain("1 · 2 · 3");
+  });
+
+  it("removes unsafe dynamic link targets at runtime", async () => {
+    const components = createCustomJsxComponents({
+      TablerIcon: (() => null) as never,
+      copyLabels: { copy: "Copy", copied: "Copied" },
+    });
+    const rendererMessages = {
+      noTemplate: "No template",
+      templateWarnings: (count: number) => `${count} warnings`,
+    };
+
+    await render(
+      <CustomJsxRenderer
+        template={"<Anchor href={data.url}>Unsafe</Anchor>"}
+        data={{ url: "//example.com/escape" }}
+        components={components}
+        createBindings={(data) => ({ data })}
+        messages={rendererMessages}
+      />,
+      createPort(),
+    );
+
+    expect(host.querySelector("a")?.hasAttribute("href")).toBe(false);
+  });
+
+  it("scopes authored radio names to the widget and preserves uncontrolled defaults", async () => {
+    const components = createCustomJsxComponents({
+      TablerIcon: (() => null) as never,
+      copyLabels: { copy: "Copy", copied: "Copied" },
+    });
+    const rendererMessages = {
+      noTemplate: "No template",
+      templateWarnings: (count: number) => `${count} warnings`,
+    };
+
+    await render(
+      <>
+        <input aria-label="Outside" name="shared" type="radio" />
+        <CustomJsxRenderer
+          template={
+            '<Radio.Group name="shared" defaultValue="inside"><Radio.Card value="inside"><Radio.Indicator /></Radio.Card><Radio.Card value="other"><Radio.Indicator /></Radio.Card></Radio.Group>'
+          }
+          data={{}}
+          components={components}
+          createBindings={() => ({})}
+          messages={rendererMessages}
+        />
+      </>,
+      createPort(),
+    );
+    await settle();
+
+    const outside = host.querySelector<HTMLInputElement>('input[type="radio"]');
+    const [inside, other] = [...host.querySelectorAll<HTMLButtonElement>('button[role="radio"]')];
+    expect(outside?.name).toBe("shared");
+    expect(inside?.name).toMatch(/^custom-widget-/u);
+    expect(inside?.name).not.toBe(outside?.name);
+    expect(other?.name).toBe(inside?.name);
+    expect(inside?.getAttribute("aria-checked")).toBe("true");
+    expect(other?.getAttribute("aria-checked")).toBe("false");
+  });
+
+  it("exposes temporary bindings through inputs without browser storage", async () => {
+    const setItem = vi.spyOn(Storage.prototype, "setItem");
+    const rendererMessages = {
+      noTemplate: "No template",
+      templateWarnings: (count: number) => `${count} warnings`,
+    };
+    const components = createCustomJsxComponents({
+      TablerIcon: (() => null) as never,
+      copyLabels: { copy: "Copy", copied: "Copied" },
+    });
+    const widget = (
+      <CustomJsxRenderer
+        template={'<Stack><TextInput bind="search" defaultValue="containers"/><Text>{inputs.search}</Text></Stack>'}
+        data={{}}
+        components={components}
+        createBindings={() => ({})}
+        messages={rendererMessages}
+      />
+    );
+
+    await render(widget, createPort());
+    await settle();
+    expect(host.textContent).toContain("containers");
+    expect(setItem).not.toHaveBeenCalled();
+  });
+
+  it("preserves input focus across temporary binding updates", async () => {
+    const components = createCustomJsxComponents({
+      TablerIcon: (() => null) as never,
+      copyLabels: { copy: "Copy", copied: "Copied" },
+    });
+    await render(
+      <CustomJsxRenderer
+        template={'<Stack><TextInput bind="search"/><Text>{inputs.search}</Text></Stack>'}
+        data={{}}
+        components={components}
+        createBindings={() => ({})}
+        messages={{ noTemplate: "No template", templateWarnings: (count) => `${count} warnings` }}
+      />,
+      createPort(),
+    );
+    await settle();
+
+    const input = host.querySelector("input") as HTMLInputElement;
+    input.focus();
+    await act(async () => {
+      input.value = "p";
+      input.dispatchEvent(new InputEvent("input", { bubbles: true, data: "p", inputType: "insertText" }));
+    });
+    await settle();
+
+    expect(input.isConnected).toBe(true);
+    expect(document.activeElement).toBe(input);
+    expect(input.value).toBe("p");
+    expect(host.textContent).toContain("p");
+  });
+
+  it("resets temporary bindings when the template changes", async () => {
+    const rendererMessages = {
+      noTemplate: "No template",
+      templateWarnings: (count: number) => `${count} warnings`,
+    };
+    const components = createCustomJsxComponents({
+      TablerIcon: (() => null) as never,
+      copyLabels: { copy: "Copy", copied: "Copied" },
+    });
+
+    await render(
+      <CustomJsxRenderer
+        template={'<Stack><TextInput bind="shared" defaultValue="text"/><Text>{inputs.shared}</Text></Stack>'}
+        data={{}}
+        components={components}
+        createBindings={() => ({})}
+        messages={rendererMessages}
+      />,
+      createPort(),
+    );
+    await settle();
+    expect(host.textContent).toContain("text");
+
+    await render(
+      <CustomJsxRenderer
+        template={
+          '<Stack><Switch bind="shared" defaultChecked/><Text>{inputs.shared ? "enabled" : "disabled"}</Text></Stack>'
+        }
+        data={{}}
+        components={components}
+        createBindings={() => ({})}
+        messages={rendererMessages}
+      />,
+      createPort(),
+    );
+    await settle();
+    expect(host.textContent).toContain("enabled");
+    expect(host.textContent).not.toContain("BINDING_TYPE_CONFLICT");
+  });
+
+  it("preserves temporary bindings when data changes without changing the template", async () => {
+    const rendererMessages = {
+      noTemplate: "No template",
+      templateWarnings: (count: number) => `${count} warnings`,
+    };
+    const components = createCustomJsxComponents({
+      TablerIcon: (() => null) as never,
+      copyLabels: { copy: "Copy", copied: "Copied" },
+    });
+    const template = '<Stack><Switch bind="shared"/><Text>{inputs.shared ? "enabled" : "disabled"}</Text></Stack>';
+
+    await render(
+      <CustomJsxRenderer
+        template={template}
+        data={{ version: 1 }}
+        components={components}
+        createBindings={(data) => ({ data })}
+        messages={rendererMessages}
+      />,
+      createPort(),
+    );
+    await settle();
+    await act(async () => (host.querySelector("input") as HTMLInputElement).click());
+    await settle();
+    expect(host.textContent).toContain("enabled");
+
+    await render(
+      <CustomJsxRenderer
+        template={template}
+        data={{ version: 2 }}
+        components={components}
+        createBindings={(data) => ({ data })}
+        messages={rendererMessages}
+      />,
+      createPort(),
+    );
+    await settle();
+    expect((host.querySelector("input") as HTMLInputElement).checked).toBe(true);
+    expect(host.textContent).toContain("enabled");
+  });
+
+  it("runs an automatic query once and publishes data to the declarative data root", async () => {
+    const port = createPort();
+    const publish = vi.fn();
+    await render(<SubFetch requestId="details" />, port, [], publish);
+    await settle();
+    expect(port.query).toHaveBeenCalledTimes(1);
+    expect(publish).toHaveBeenLastCalledWith("details", {
+      data: { name: "Bulbasaur" },
+      status: expect.objectContaining({ loading: false, ok: true, status: 200 }),
+    });
+    expect(host.querySelector("button, p, code, [role='alert']")).toBeNull();
+  });
+
+  it("uses a built-in manual trigger and passes successful request metadata to children", async () => {
+    const port = createPort();
+    await render(
+      <SubFetch requestId="details" trigger="manual">
+        {(data, metadata) => (
+          <span>{`${(data as { name: string }).name}:${metadata.status}:${String(metadata.loading)}`}</span>
+        )}
+      </SubFetch>,
+      port,
+    );
+    expect(port.query).not.toHaveBeenCalled();
+    expect(host.textContent).toContain("Load");
+
+    await act(async () => (host.querySelector("button") as HTMLButtonElement).click());
+    await settle();
+
+    expect(port.query).toHaveBeenCalledOnce();
+    expect(host.textContent).toContain("Bulbasaur:200:false");
+  });
+
+  it("keeps manual query results local instead of publishing a shared request slot", async () => {
+    const port = createPort();
+    const publish = vi.fn();
+    await render(
+      <SubFetch requestId="details" trigger="manual" triggerContent={<span>Bulbasaur card</span>}>
+        {(data) => <span>{(data as { name: string }).name}</span>}
+      </SubFetch>,
+      port,
+      [],
+      publish,
+    );
+
+    await act(async () => (host.querySelector("button") as HTMLButtonElement).click());
+    await settle();
+
+    expect(port.query).toHaveBeenCalledOnce();
+    expect(publish).not.toHaveBeenCalled();
+    expect(host.textContent).toContain("Bulbasaur");
+  });
+
+  it("runs a manual query from a custom accessible trigger", async () => {
+    const port = createPort();
+    await render(
+      <SubFetch
+        requestId="details"
+        trigger="manual"
+        triggerAriaLabel="Open Bulbasaur"
+        triggerContent={<span>Bulbasaur card</span>}
+      >
+        {(data) => <span>{(data as { name: string }).name}</span>}
+      </SubFetch>,
+      port,
+    );
+
+    const trigger = host.querySelector("button") as HTMLButtonElement;
+    expect(trigger.getAttribute("aria-label")).toBe("Open Bulbasaur");
+    expect(host.textContent).toContain("Bulbasaur card");
+    await act(async () => trigger.click());
+    await settle();
+
+    expect(port.query).toHaveBeenCalledOnce();
+    expect(host.textContent).toContain("Bulbasaur");
+  });
+
+  it("passes cancellation to the port when the component unmounts", async () => {
+    let signal: AbortSignal | undefined;
+    const port = createPort({
+      query: vi.fn((_input, nextSignal) => {
+        signal = nextSignal;
+        return new Promise<CustomWidgetRequestResult>(() => undefined);
+      }),
+    });
+    await render(<SubFetch requestId="slow" />, port);
+    await act(() => root.unmount());
+    expect(signal?.aborted).toBe(true);
+    root = createRoot(host);
+  });
+
+  it("confirms DELETE actions, reports success, and invalidates declared targets", async () => {
+    const port = createPort();
+    await render(<ActionButton requestId="remove">Remove</ActionButton>, port, [
+      {
+        id: "remove",
+        kind: "action",
+        method: "DELETE",
+        trigger: "manual",
+        minimumBoardPermission: "full",
+        invalidates: ["parent"],
+      },
+    ]);
+    await act(async () => (host.querySelector("button") as HTMLButtonElement).click());
+    await settle();
+    expect(port.confirm).toHaveBeenCalledOnce();
+    expect(port.executeAction).toHaveBeenCalledWith(expect.objectContaining({ confirmed: true }));
+    expect(port.notify).toHaveBeenCalledWith(expect.objectContaining({ kind: "success" }));
+    expect(port.invalidate).toHaveBeenCalledWith(expect.objectContaining({ targets: ["parent"] }));
+  });
+
+  it("rolls a toggle back when its action fails", async () => {
+    const port = createPort({
+      executeAction: vi.fn(async () => ({ ok: false, status: 500, data: null, error: "Nope" })),
+    });
+    await render(
+      <ToggleSwitch requestId="toggle" enabledParams={{ enabled: true }} disabledParams={{ enabled: false }} />,
+      port,
+    );
+    const input = host.querySelector("input") as HTMLInputElement;
+    await act(async () => {
+      input.click();
+    });
+    await settle();
+    expect(input.checked).toBe(false);
+    expect(port.notify).toHaveBeenCalledWith(expect.objectContaining({ kind: "error", message: "Nope" }));
+    expect(port.invalidate).not.toHaveBeenCalled();
+  });
+
+  it("confirms a DELETE toggle before executing it", async () => {
+    const port = createPort();
+    await render(
+      <ToggleSwitch requestId="delete-toggle" enabledParams={{ enabled: true }} disabledParams={{ enabled: false }} />,
+      port,
+      [
+        {
+          id: "delete-toggle",
+          kind: "action",
+          method: "DELETE",
+          trigger: "manual",
+          minimumBoardPermission: "full",
+        },
+      ],
+    );
+    await act(async () => (host.querySelector("input") as HTMLInputElement).click());
+    await settle();
+    expect(port.confirm).toHaveBeenCalledWith(expect.objectContaining({ destructive: true }));
+    expect(port.executeAction).toHaveBeenCalledWith(expect.objectContaining({ confirmed: true }));
+  });
+});
diff --git a/packages/custom-widgets/src/test/schema.spec.ts b/packages/custom-widgets/src/test/schema.spec.ts
new file mode 100644
index 000000000..eeb02a262
--- /dev/null
+++ b/packages/custom-widgets/src/test/schema.spec.ts
@@ -0,0 +1,327 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  CUSTOM_WIDGET_STARTER,
+  customWidgetDefinitionSchema,
+  customJsxRequestSchema,
+  getCustomWidgetDefaultOptions,
+  getCustomWidgetSecretRequirements,
+  getCustomWidgetSourceSetups,
+  hasSameCustomWidgetSourceAuthentication,
+  applyCustomWidgetSourceSetup,
+} from "../core";
+
+describe("lean Custom Widget schema", () => {
+  it("applies request defaults", () => {
+    expect(customJsxRequestSchema.parse({ path: "/status" })).toMatchObject({
+      source: "default",
+      kind: "query",
+      method: "GET",
+      trigger: "load",
+      auth: "inherit",
+      permission: "view",
+    });
+    expect(customJsxRequestSchema.parse({ kind: "action", path: "/restart" })).toMatchObject({
+      trigger: "manual",
+      permission: "modify",
+    });
+    expect(customJsxRequestSchema.parse({ kind: "action", method: "DELETE", path: "/item" })).toMatchObject({
+      trigger: "manual",
+      permission: "full",
+      confirmation: { destructive: true },
+    });
+  });
+
+  it("rejects DELETE requests that could execute as automatic queries", () => {
+    expect(customJsxRequestSchema.safeParse({ method: "DELETE", path: "/item" }).success).toBe(false);
+    expect(
+      customJsxRequestSchema.safeParse({ kind: "query", trigger: "manual", method: "DELETE", path: "/item" }).success,
+    ).toBe(false);
+  });
+
+  it("validates keyed sources, requests and options", () => {
+    const result = customWidgetDefinitionSchema.parse({
+      ...CUSTOM_WIDGET_STARTER,
+      requests: {
+        list: { path: "/items/{option:category}", query: { limit: { $option: "limit" } } },
+        search: { trigger: "manual", path: "/search", query: { q: { $param: "query" } } },
+        restart: { kind: "action", method: "POST", path: "/items/{param:id}/restart", invalidates: ["list"] },
+      },
+      options: {
+        category: { label: "Category", control: "text", default: "all" },
+        limit: { label: "Limit", control: "number", default: 20, min: 1, max: 100 },
+      },
+    });
+    expect(Object.keys(result.requests)).toEqual(["list", "search", "restart"]);
+    expect(getCustomWidgetDefaultOptions(result.options)).toEqual({ category: "all", limit: 20 });
+  });
+
+  it("defaults omitted options to an empty map", () => {
+    const { options: _options, ...withoutOptions } = CUSTOM_WIDGET_STARTER;
+    expect(customWidgetDefinitionSchema.parse(withoutOptions).options).toEqual({});
+  });
+
+  it("rejects source IDs that collide case-insensitively", () => {
+    const result = customWidgetDefinitionSchema.safeParse({
+      ...CUSTOM_WIDGET_STARTER,
+      sources: {
+        Api: { baseUrl: "https://one.example.com", networkScope: "public", auth: "none" },
+        api: { baseUrl: "https://two.example.com", networkScope: "public", auth: "none" },
+      },
+    });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.issues).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            path: ["sources", "api"],
+            message: expect.stringContaining("conflicts case-insensitively"),
+          }),
+        ]),
+      );
+    }
+  });
+
+  it("rejects invocation params on load and unknown options", () => {
+    const loadParam = customWidgetDefinitionSchema.safeParse({
+      ...CUSTOM_WIDGET_STARTER,
+      requests: { bad: { path: "/{param:id}" } },
+    });
+    expect(loadParam.success).toBe(false);
+    const unknownOption = customWidgetDefinitionSchema.safeParse({
+      ...CUSTOM_WIDGET_STARTER,
+      requests: { bad: { path: "/{option:missing}" } },
+    });
+    expect(unknownOption.success).toBe(false);
+  });
+
+  it("rejects malformed placeholders and removed public fields", () => {
+    expect(customJsxRequestSchema.safeParse({ path: "/items/{id}" }).success).toBe(false);
+    expect(customWidgetDefinitionSchema.safeParse({ ...CUSTOM_WIDGET_STARTER, optionsSchema: {} }).success).toBe(false);
+    expect(customWidgetDefinitionSchema.safeParse({ ...CUSTOM_WIDGET_STARTER, stateSchema: {} }).success).toBe(false);
+  });
+
+  it.each([
+    "http://127.1",
+    "http://2130706433",
+    "http://0x7f000001",
+    "http://0177.0.0.1",
+    "http://1.2.3",
+    "http://%31%32%37.0.0.1",
+    "https://%65xample.com",
+    "https://example%2ecom",
+    "https://example.com\\@attacker.invalid",
+    "https:\\\\example.com\\api",
+    " https://example.com",
+    "https://exa\tmple.com",
+    "https://example.com\n",
+    "https://example.com\u00a0",
+    "https://@example.com",
+    "https://:@example.com",
+    "https://example。com",
+    "https://１２７.０.０.１",
+    "https://-example.com",
+    "https://example-.com",
+    "https://example..com",
+    "https://example.com:00080",
+    "https://example.com:0000000065535",
+    "https://example.com:65536",
+    "https://[fe80::1%25eth0]",
+    "https://[::ffff:192.168.001.001]",
+    "https://[0:0:0:0:0:0:0:1]",
+    "https://[2001:0db8::1]",
+  ])("rejects ambiguous persisted URL spelling %s for sources and icons", (url) => {
+    expect(
+      customWidgetDefinitionSchema.safeParse({
+        ...CUSTOM_WIDGET_STARTER,
+        sources: {
+          default: { ...CUSTOM_WIDGET_STARTER.sources.default, baseUrl: url },
+        },
+      }).success,
+    ).toBe(false);
+    expect(customWidgetDefinitionSchema.safeParse({ ...CUSTOM_WIDGET_STARTER, iconUrl: url }).success).toBe(false);
+  });
+
+  it.each([
+    "https://example.com",
+    "https://example.com.",
+    "https://münich.example",
+    "https://xn--mnich-kva.example",
+    "http://192.168.1.1:0",
+    "https://[2001:db8::1]:65535",
+    "https://[::ffff:192.168.1.1]",
+  ])("accepts unambiguous HTTP URLs %s for sources and icons", (url) => {
+    expect(
+      customWidgetDefinitionSchema.safeParse({
+        ...CUSTOM_WIDGET_STARTER,
+        sources: {
+          default: { ...CUSTOM_WIDGET_STARTER.sources.default, baseUrl: url },
+        },
+      }).success,
+    ).toBe(true);
+    expect(customWidgetDefinitionSchema.safeParse({ ...CUSTOM_WIDGET_STARTER, iconUrl: url }).success).toBe(true);
+  });
+
+  it("allows ordinary encoded icon paths and query values while rejecting oversized URLs", () => {
+    expect(
+      customWidgetDefinitionSchema.safeParse({
+        ...CUSTOM_WIDGET_STARTER,
+        iconUrl: "https://example.com/icons/custom%20widget.svg?theme=dark#preview",
+      }).success,
+    ).toBe(true);
+    expect(
+      customWidgetDefinitionSchema.safeParse({
+        ...CUSTOM_WIDGET_STARTER,
+        iconUrl: `https://example.com/${"a".repeat(2048)}`,
+      }).success,
+    ).toBe(false);
+  });
+
+  it("keeps auth secrets outside the document", () => {
+    const definition = customWidgetDefinitionSchema.parse({
+      ...CUSTOM_WIDGET_STARTER,
+      sources: {
+        default: { baseUrl: "https://example.com", networkScope: "public", auth: "bearer" },
+        admin: { baseUrl: "https://example.net", networkScope: "private", auth: "basic" },
+      },
+    });
+    expect(
+      getCustomWidgetSecretRequirements(definition.sources).map(({ sourceId, kind }) => `${sourceId}:${kind}`),
+    ).toEqual(["default:apiKey", "admin:username", "admin:password"]);
+  });
+
+  it("rejects credentials embedded in request paths, headers, and JSX", () => {
+    const requests = [
+      {
+        status: {
+          path: "/api/status?credential=Bearer-sk-secret-123456",
+        },
+      },
+      {
+        status: {
+          path: "/api/status",
+          headers: { "X-Auth": "Bearer sk-secret-123456" },
+        },
+      },
+      {
+        status: {
+          path: "/api/status",
+          headers: { "X-Service": "Basic dXNlcjpwYXNz" },
+        },
+      },
+      {
+        status: {
+          path: "/api/status",
+          headers: { "X-Service": "ghp_abcdefghijklmnopqrstuvwxyz123456" },
+        },
+      },
+    ];
+    for (const candidate of requests) {
+      expect(customWidgetDefinitionSchema.safeParse({ ...CUSTOM_WIDGET_STARTER, requests: candidate }).success).toBe(
+        false,
+      );
+    }
+    expect(
+      customWidgetDefinitionSchema.safeParse({
+        ...CUSTOM_WIDGET_STARTER,
+        template: "<Text>Bearer sk-secret-123456</Text>",
+      }).success,
+    ).toBe(false);
+  });
+
+  it("allows harmless key fields, auth modes, headers, and authentication guidance", () => {
+    expect(
+      customWidgetDefinitionSchema.safeParse({
+        ...CUSTOM_WIDGET_STARTER,
+        sources: {
+          default: {
+            ...CUSTOM_WIDGET_STARTER.sources.default,
+            auth: { type: "apiKeyHeader", name: "X-Api-Key" },
+          },
+        },
+        requests: {
+          status: {
+            path: "/api/status?key=status&auth=none",
+            headers: {
+              Accept: "application/json",
+              "X-Api-Version": "2026-07",
+              "X-Feature-Key": "dashboard-layout",
+            },
+            body: { authenticationMode: "none", key: "status", tokenCount: 3 },
+          },
+        },
+        template: "<Stack><Text>Bearer authentication uses source credentials</Text></Stack>",
+      }).success,
+    ).toBe(true);
+  });
+
+  it("requires installation confirmation for private and placeholder source URLs", () => {
+    const sources = {
+      default: { baseUrl: "https://pokeapi.co/api/v2", networkScope: "public" as const, auth: "none" as const },
+      tautulli: {
+        name: "Tautulli",
+        baseUrl: "http://tautulli.local:8181",
+        networkScope: "private" as const,
+        auth: { type: "apiKeyQuery" as const, name: "apikey" },
+      },
+      placeholder: {
+        baseUrl: "https://api.example.com",
+        networkScope: "public" as const,
+        auth: "none" as const,
+      },
+    };
+    const setups = getCustomWidgetSourceSetups(sources);
+    expect(setups.map(({ sourceId, requiresUrlConfirmation }) => [sourceId, requiresUrlConfirmation])).toEqual([
+      ["default", false],
+      ["tautulli", true],
+      ["placeholder", true],
+    ]);
+    expect(setups.find(({ sourceId }) => sourceId === "tautulli")?.credentialFields).toEqual([
+      { kind: "apiKey", destination: "apikey", configured: false },
+    ]);
+  });
+
+  it("applies source setup without changing source authentication", () => {
+    const sources = {
+      default: {
+        baseUrl: "http://tautulli.local:8181",
+        networkScope: "private" as const,
+        auth: { type: "apiKeyQuery" as const, name: "apikey" },
+      },
+    };
+    expect(
+      applyCustomWidgetSourceSetup(sources, {
+        default: { baseUrl: "http://192.168.1.20:8181", networkScope: "private" },
+      }).default,
+    ).toEqual({
+      baseUrl: "http://192.168.1.20:8181",
+      networkScope: "private",
+      auth: { type: "apiKeyQuery", name: "apikey" },
+    });
+  });
+
+  it("detects stale source authentication snapshots", () => {
+    const bearer = { baseUrl: "https://example.com", networkScope: "public" as const, auth: "bearer" as const };
+    expect(hasSameCustomWidgetSourceAuthentication(bearer, { ...bearer, baseUrl: "https://api.example.com" })).toBe(
+      true,
+    );
+    expect(hasSameCustomWidgetSourceAuthentication(bearer, { ...bearer, auth: "none" })).toBe(false);
+    expect(
+      hasSameCustomWidgetSourceAuthentication(
+        { ...bearer, auth: { type: "apiKeyHeader", name: "X-API-Key" } },
+        { ...bearer, auth: { type: "apiKeyHeader", name: "Authorization" } },
+      ),
+    ).toBe(false);
+  });
+
+  it("supports official Mantine compound names and separates bigint diagnostics", () => {
+    expect(
+      customWidgetDefinitionSchema.safeParse({
+        ...CUSTOM_WIDGET_STARTER,
+        template: "<Radio.Group><Radio.Card><Radio.Indicator /></Radio.Card></Radio.Group>",
+      }).success,
+    ).toBe(true);
+    const result = customWidgetDefinitionSchema.safeParse({ ...CUSTOM_WIDGET_STARTER, template: "<Text>{1n}</Text>" });
+    expect(result.success ? "" : result.error.issues[0]?.message).toContain("BIGINT_NOT_SUPPORTED");
+  });
+});
diff --git a/packages/custom-widgets/src/test/server-policy.spec.ts b/packages/custom-widgets/src/test/server-policy.spec.ts
new file mode 100644
index 000000000..c7e25d13b
--- /dev/null
+++ b/packages/custom-widgets/src/test/server-policy.spec.ts
@@ -0,0 +1,314 @@
+import { createServer } from "node:http";
+import { errors } from "undici";
+import { describe, expect, test } from "vitest";
+
+import {
+  assertJsonBudget,
+  assertSafeStaticHeaders,
+  classifyAddress,
+  executeCustomWidgetRequest,
+  resolveAndValidateHost,
+  resolveSameOriginTarget,
+  validateCustomWidgetUrl,
+} from "../server";
+import { isCustomWidgetRequestTimeoutError } from "../server/request-executor";
+
+describe("custom widget network policy", () => {
+  test.each([
+    ["8.8.8.8", "public"],
+    ["10.0.0.1", "private"],
+    ["127.0.0.1", "loopback"],
+    ["169.254.169.254", "blocked"],
+    ["224.0.0.1", "blocked"],
+    ["::ffff:127.0.0.1", "blocked"],
+    ["fe80::1", "blocked"],
+  ] as const)("classifies %s as %s", (address, expected) => expect(classifyAddress(address)).toBe(expected));
+
+  test("enforces configured address scopes", async () => {
+    await expect(resolveAndValidateHost("10.0.0.1", "public")).rejects.toMatchObject({ code: "FORBIDDEN" });
+    await expect(resolveAndValidateHost("10.0.0.1", "private")).resolves.toHaveLength(1);
+    await expect(resolveAndValidateHost("127.0.0.1", "private")).rejects.toMatchObject({ code: "FORBIDDEN" });
+    await expect(resolveAndValidateHost("127.0.0.1", "loopback")).resolves.toHaveLength(1);
+    await expect(resolveAndValidateHost("169.254.169.254", "loopback")).rejects.toMatchObject({ code: "FORBIDDEN" });
+  });
+
+  test("executes a DNS-pinned request within the approved scope", async () => {
+    const server = createServer((_request, response) => {
+      response.writeHead(200, { "content-type": "application/json" });
+      response.end('{"status":"ok"}');
+    });
+    await new Promise<void>((resolve) => server.listen(0, "127.0.0.1", resolve));
+    const address = server.address();
+    if (!address || typeof address === "string") throw new Error("Test server did not expose a TCP port");
+    try {
+      await expect(
+        executeCustomWidgetRequest({
+          baseUrl: `http://127.0.0.1:${address.port}`,
+          method: "GET",
+          networkScope: "loopback",
+          kind: "query",
+        }),
+      ).resolves.toMatchObject({ ok: true, status: 200, data: { status: "ok" } });
+    } finally {
+      await new Promise<void>((resolve, reject) => server.close((error) => (error ? reject(error) : resolve())));
+    }
+  });
+
+  test.each([
+    ["connect", new errors.ConnectTimeoutError()],
+    ["headers", new errors.HeadersTimeoutError()],
+    ["body", new errors.BodyTimeoutError()],
+    ["generic timeout name", Object.assign(new Error("timed out"), { name: "ProxyTimeoutError" })],
+  ])("recognizes %s timeout errors from the complete request lifecycle", (_label, error) => {
+    expect(isCustomWidgetRequestTimeoutError(error)).toBe(true);
+  });
+
+  test("recognizes an aborted request deadline as a timeout", () => {
+    const controller = new AbortController();
+    controller.abort();
+    expect(isCustomWidgetRequestTimeoutError(new errors.RequestAbortedError(), controller.signal)).toBe(true);
+    expect(isCustomWidgetRequestTimeoutError(new Error("socket failed"))).toBe(false);
+  });
+
+  test("normalizes response-body failures after headers arrive", async () => {
+    const events: Array<{ errorName: string; reason?: "timeout" }> = [];
+    const server = createServer((_request, response) => {
+      response.writeHead(200, { "content-type": "application/json" });
+      response.flushHeaders();
+      response.write('{"status":');
+      setImmediate(() => response.destroy());
+    });
+    await new Promise<void>((resolve) => server.listen(0, "127.0.0.1", resolve));
+    const address = server.address();
+    if (!address || typeof address === "string") throw new Error("Test server did not expose a TCP port");
+    try {
+      await expect(
+        executeCustomWidgetRequest({
+          baseUrl: `http://127.0.0.1:${address.port}`,
+          method: "GET",
+          networkScope: "loopback",
+          kind: "query",
+          logError: (event) => events.push(event),
+        }),
+      ).rejects.toMatchObject({ code: "BAD_GATEWAY" });
+      expect(events).toHaveLength(1);
+      expect(events[0]?.errorName).toBe("TransportError");
+    } finally {
+      await new Promise<void>((resolve, reject) => server.close((error) => (error ? reject(error) : resolve())));
+    }
+  });
+
+  test("normalizes failures while draining a redirect body", async () => {
+    const server = createServer((_request, response) => {
+      response.writeHead(302, { location: "/target" });
+      response.flushHeaders();
+      response.write("partial redirect body");
+      setImmediate(() => response.destroy());
+    });
+    await new Promise<void>((resolve) => server.listen(0, "127.0.0.1", resolve));
+    const address = server.address();
+    if (!address || typeof address === "string") throw new Error("Test server did not expose a TCP port");
+    try {
+      await expect(
+        executeCustomWidgetRequest({
+          baseUrl: `http://127.0.0.1:${address.port}`,
+          method: "GET",
+          networkScope: "loopback",
+          kind: "query",
+        }),
+      ).rejects.toMatchObject({ code: "BAD_GATEWAY" });
+    } finally {
+      await new Promise<void>((resolve, reject) => server.close((error) => (error ? reject(error) : resolve())));
+    }
+  });
+
+  test("maps Undici's response-size failure to the domain size limit", async () => {
+    const server = createServer((_request, response) => {
+      response.writeHead(200, { "content-type": "application/json" });
+      response.end(`"${"x".repeat(1024 * 1024)}"`);
+    });
+    await new Promise<void>((resolve) => server.listen(0, "127.0.0.1", resolve));
+    const address = server.address();
+    if (!address || typeof address === "string") throw new Error("Test server did not expose a TCP port");
+    try {
+      await expect(
+        executeCustomWidgetRequest({
+          baseUrl: `http://127.0.0.1:${address.port}`,
+          method: "GET",
+          networkScope: "loopback",
+          kind: "query",
+        }),
+      ).rejects.toMatchObject({ code: "PAYLOAD_TOO_LARGE" });
+    } finally {
+      await new Promise<void>((resolve, reject) => server.close((error) => (error ? reject(error) : resolve())));
+    }
+  });
+
+  test("preserves domain errors raised while parsing the response body", async () => {
+    const server = createServer((_request, response) => {
+      response.writeHead(200, { "content-type": "application/json" });
+      response.end("{invalid");
+    });
+    await new Promise<void>((resolve) => server.listen(0, "127.0.0.1", resolve));
+    const address = server.address();
+    if (!address || typeof address === "string") throw new Error("Test server did not expose a TCP port");
+    try {
+      await expect(
+        executeCustomWidgetRequest({
+          baseUrl: `http://127.0.0.1:${address.port}`,
+          method: "GET",
+          networkScope: "loopback",
+          kind: "query",
+        }),
+      ).rejects.toMatchObject({
+        code: "BAD_REQUEST",
+        message: "Upstream returned invalid JSON",
+      });
+    } finally {
+      await new Promise<void>((resolve, reject) => server.close((error) => (error ? reject(error) : resolve())));
+    }
+  });
+
+  test("preserves structured bodies for GET queries", async () => {
+    const server = createServer((request, response) => {
+      let body = "";
+      request.setEncoding("utf8");
+      request.on("data", (chunk: string) => {
+        body += chunk;
+      });
+      request.on("end", () => {
+        response.writeHead(200, { "content-type": "application/json" });
+        response.end(JSON.stringify({ body }));
+      });
+    });
+    await new Promise<void>((resolve) => server.listen(0, "127.0.0.1", resolve));
+    const address = server.address();
+    if (!address || typeof address === "string") throw new Error("Test server did not expose a TCP port");
+    try {
+      await expect(
+        executeCustomWidgetRequest({
+          baseUrl: `http://127.0.0.1:${address.port}`,
+          method: "GET",
+          body: '{"query":"status"}',
+          networkScope: "loopback",
+          kind: "query",
+        }),
+      ).resolves.toMatchObject({ ok: true, data: { body: '{"query":"status"}' } });
+    } finally {
+      await new Promise<void>((resolve, reject) => server.close((error) => (error ? reject(error) : resolve())));
+    }
+  });
+
+  test.each([
+    [301, "GET", ""],
+    [302, "GET", ""],
+    [303, "GET", ""],
+    [307, "POST", '{"query":"status"}'],
+    [308, "POST", '{"query":"status"}'],
+  ] as const)("follows %i redirects with fetch-compatible method semantics", async (status, method, body) => {
+    const server = createServer((request, response) => {
+      if (request.url === "/start") {
+        request.resume();
+        response.writeHead(status, { location: "/target" });
+        response.end();
+        return;
+      }
+      let receivedBody = "";
+      request.setEncoding("utf8");
+      request.on("data", (chunk: string) => {
+        receivedBody += chunk;
+      });
+      request.on("end", () => {
+        response.writeHead(200, { "content-type": "application/json" });
+        response.end(
+          JSON.stringify({
+            method: request.method,
+            body: receivedBody,
+            contentType: request.headers["content-type"] ?? null,
+          }),
+        );
+      });
+    });
+    await new Promise<void>((resolve) => server.listen(0, "127.0.0.1", resolve));
+    const address = server.address();
+    if (!address || typeof address === "string") throw new Error("Test server did not expose a TCP port");
+    const baseUrl = `http://127.0.0.1:${address.port}`;
+    try {
+      await expect(
+        executeCustomWidgetRequest({
+          baseUrl,
+          targetUrl: `${baseUrl}/start`,
+          method: "POST",
+          body: '{"query":"status"}',
+          networkScope: "loopback",
+          kind: "query",
+        }),
+      ).resolves.toMatchObject({
+        ok: true,
+        data: {
+          method,
+          body,
+          contentType: body ? "application/json" : null,
+        },
+      });
+    } finally {
+      await new Promise<void>((resolve, reject) => server.close((error) => (error ? reject(error) : resolve())));
+    }
+  });
+
+  test("does not follow redirects for actions", async () => {
+    const server = createServer((_request, response) => {
+      response.writeHead(303, { location: "/target" });
+      response.end();
+    });
+    await new Promise<void>((resolve) => server.listen(0, "127.0.0.1", resolve));
+    const address = server.address();
+    if (!address || typeof address === "string") throw new Error("Test server did not expose a TCP port");
+    const baseUrl = `http://127.0.0.1:${address.port}`;
+    try {
+      await expect(
+        executeCustomWidgetRequest({
+          baseUrl,
+          targetUrl: `${baseUrl}/start`,
+          method: "POST",
+          networkScope: "loopback",
+          kind: "action",
+        }),
+      ).rejects.toThrow("redirect limit");
+    } finally {
+      await new Promise<void>((resolve, reject) => server.close((error) => (error ? reject(error) : resolve())));
+    }
+  });
+
+  test("allows only credential-free HTTP(S) URLs without fragments", () => {
+    expect(validateCustomWidgetUrl("https://example.com/api").href).toBe("https://example.com/api");
+    expect(() => validateCustomWidgetUrl("file:///etc/passwd")).toThrow("HTTP and HTTPS");
+    expect(() => validateCustomWidgetUrl("https://user:password@example.com/api")).toThrow("credentials");
+    expect(() => validateCustomWidgetUrl("https://example.com/api#secret")).toThrow("fragments");
+  });
+
+  test("rejects cross-origin targets and reserved headers", () => {
+    expect(resolveSameOriginTarget("https://example.com/base", "https://example.com/status").pathname).toBe("/status");
+    expect(() => resolveSameOriginTarget("https://example.com", "https://attacker.example")).toThrow("origin");
+    for (const header of [
+      "Authorization",
+      "Cookie",
+      "Host",
+      "Proxy-Authorization",
+      "Sec-Fetch-Site",
+      "X-Forwarded-For",
+    ]) {
+      expect(() => assertSafeStaticHeaders({ [header]: "value" })).toThrow("reserved");
+    }
+  });
+
+  test("rejects response JSON beyond the depth budget", () => {
+    let nested: Record<string, unknown> = {};
+    const root = nested;
+    for (let index = 0; index < 40; index += 1) {
+      nested.child = {};
+      nested = nested.child as Record<string, unknown>;
+    }
+    expect(() => assertJsonBudget(root)).toThrow("deeply nested");
+  });
+});
diff --git a/packages/custom-widgets/src/test/workbench-ui.spec.tsx b/packages/custom-widgets/src/test/workbench-ui.spec.tsx
new file mode 100644
index 000000000..df43a6ccf
--- /dev/null
+++ b/packages/custom-widgets/src/test/workbench-ui.spec.tsx
@@ -0,0 +1,157 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import type { ReactNode } from "react";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { CustomWidgetCodeEditor, PreviewHeader, PreviewResponsePanel, ResponseTree } from "../workbench";
+import type { CustomWidgetEditorMessages } from "../workbench";
+
+vi.mock("../workbench/direct-code-mirror", () => ({
+  default: ({ id, label, labelledBy }: { id: string; label: string; labelledBy: string }) => (
+    <textarea id={id} aria-label={label} aria-labelledby={labelledBy} />
+  ),
+}));
+
+const editorMessages: CustomWidgetEditorMessages = {
+  languageJsx: "JSX",
+  languageJson: "JSON",
+  undo: "Undo",
+  redo: "Redo",
+  components: "Components",
+  componentSearch: "Search components",
+  componentEmpty: "No components",
+  componentCount: (count) => `${count} components`,
+  insertStarter: "Insert starter",
+  format: "Format",
+  copy: "Copy",
+  copied: "Copied",
+  schema: "Schema",
+  schemaTab: "JSON Schema",
+  minimalTab: "Minimal",
+  fullTab: "Full",
+  errors: (count) => `${count} errors`,
+  warnings: (count) => `${count} warnings`,
+  ready: "Ready",
+  position: ({ line, column }) => `${line}:${column}`,
+  characters: (count) => `${count}`,
+  diagnosticsTitle: "Diagnostics",
+  diagnostic: (diagnostic) => diagnostic.code,
+};
+
+let root: Root;
+let host: HTMLDivElement;
+
+beforeEach(() => {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  window.matchMedia = vi.fn().mockImplementation(() => ({
+    matches: false,
+    media: "",
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+
+afterEach(async () => {
+  await act(() => root.unmount());
+  host.remove();
+});
+
+async function render(node: ReactNode) {
+  await act(async () => root.render(<MantineProvider>{node}</MantineProvider>));
+}
+
+describe("Custom Widget workbench UI", () => {
+  test("associates the visible label with the editable CodeMirror control", async () => {
+    await render(
+      <CustomWidgetCodeEditor
+        id="template-editor"
+        label="Template"
+        language="jsx"
+        value="<Text>Hello</Text>"
+        messages={editorMessages}
+        onChange={vi.fn()}
+      />,
+    );
+    await act(async () => Promise.resolve());
+
+    const label = host.querySelector('#template-editor-label[for="template-editor"]');
+    expect(label).not.toBeNull();
+    expect(host.querySelector("#template-editor")?.getAttribute("aria-label")).toBe("Template");
+    expect(host.querySelector("#template-editor")?.getAttribute("aria-labelledby")).toBe("template-editor-label");
+  }, 15_000);
+
+  test("renders response data through the Mantine Tree with accessible path actions", async () => {
+    await render(
+      <ResponseTree
+        value={{ service: { name: "Homarr", online: true } }}
+        labels={{ copyPath: "Copy path", pathCopied: "Path copied", insertPath: "Insert path" }}
+        onInsertDataPath={vi.fn()}
+      />,
+    );
+    expect(host.querySelector('[role="tree"]')).not.toBeNull();
+    expect(host.textContent).toContain("service");
+    expect(host.querySelector('button[aria-label="Copy path"]')).not.toBeNull();
+    expect(host.querySelector('button[aria-label="Insert path"]')).not.toBeNull();
+  });
+
+  test("keeps mutation preview execution disabled without a network-capability badge", async () => {
+    await render(
+      <PreviewHeader
+        method="POST"
+        url="https://example.com"
+        isTesting={false}
+        isSampleStale={false}
+        onTest={vi.fn()}
+        messages={{
+          title: "Preview",
+          test: "Test",
+          mutationDisabled: "Mutations are disabled",
+          staleTitle: "Stale",
+          staleDescription: "Run again",
+        }}
+      />,
+    );
+    const testButton = [...host.querySelectorAll("button")].find((button) => button.textContent?.trim() === "Test");
+    expect(testButton?.disabled).toBe(true);
+    expect(host.textContent).toContain("Mutations are disabled");
+    expect(host.textContent).not.toContain("Interactive");
+  });
+
+  test("shows an empty response state without exposing a raw JSON toggle", async () => {
+    await render(
+      <PreviewResponsePanel
+        value={null}
+        messages={{
+          empty: "No response",
+          sampleHint: "Add sample data",
+          editSample: "Edit sample",
+          addSample: "Add sample",
+          copied: "Copied",
+          copy: "Copy",
+          sampleLabel: "Sample",
+          sampleDescription: "JSON",
+          invalidSample: "Invalid JSON",
+          cancelSample: "Cancel",
+          applySample: "Apply",
+          copyPath: "Copy path",
+          pathCopied: "Path copied",
+          insertPath: "Insert path",
+          openRaw: "Open raw response",
+        }}
+      />,
+    );
+    expect(host.textContent).toContain("No response");
+    expect(host.textContent).not.toContain("View raw JSON");
+  });
+});
diff --git a/packages/custom-widgets/src/test/workbench.spec.ts b/packages/custom-widgets/src/test/workbench.spec.ts
new file mode 100644
index 000000000..9ffafda91
--- /dev/null
+++ b/packages/custom-widgets/src/test/workbench.spec.ts
@@ -0,0 +1,164 @@
+import { describe, expect, it } from "vitest";
+
+import { CUSTOM_WIDGET_STARTER, customWidgetDefinitionSchema } from "../core";
+import {
+  CUSTOM_WIDGET_OPTIONS_EXAMPLES,
+  CUSTOM_WIDGET_REQUEST_EXAMPLES,
+  getCustomWidgetOptionsJsonSchema,
+  getCustomWidgetRequestsJsonSchema,
+} from "../core/schema-references";
+import {
+  analyzeCustomWidgetAccessibility,
+  analyzeJsxTemplate,
+  analyzeRequestManifest,
+  appendDataPath,
+  createResponseTreeNode,
+  CUSTOM_JSX_TEMPLATE_LIMIT,
+  customWidgetFormSchema,
+  DEFAULT_CUSTOM_WIDGET_FORM_VALUES,
+  renameCustomWidgetOption,
+  renameCustomWidgetRequest,
+} from "../workbench";
+import { getCustomJsxComponentPropCompletions } from "../workbench/code-language";
+
+describe("Custom Widget workbench contracts", () => {
+  it("provides valid lean starter form values", () => {
+    expect(customWidgetFormSchema.safeParse(DEFAULT_CUSTOM_WIDGET_FORM_VALUES).success).toBe(true);
+    expect(JSON.parse(DEFAULT_CUSTOM_WIDGET_FORM_VALUES.sources)).toHaveProperty("default");
+  });
+
+  it("validates keyed request manifests", () => {
+    expect(analyzeRequestManifest(JSON.stringify(CUSTOM_WIDGET_REQUEST_EXAMPLES.full))).toEqual([]);
+    expect(analyzeRequestManifest("[]")).toEqual(
+      expect.arrayContaining([expect.objectContaining({ code: "invalidRequestManifest" })]),
+    );
+    expect(getCustomWidgetRequestsJsonSchema()).toMatchObject({ type: "object" });
+    expect(getCustomWidgetOptionsJsonSchema()).toMatchObject({ type: "object" });
+    expect(CUSTOM_WIDGET_OPTIONS_EXAMPLES.full.limit.default).toBe(20);
+  });
+
+  it("enforces the template size and named request references", () => {
+    expect(analyzeJsxTemplate("x".repeat(CUSTOM_JSX_TEMPLATE_LIMIT + 1))).toEqual(
+      expect.arrayContaining([expect.objectContaining({ code: "templateTooLong" })]),
+    );
+    expect(analyzeJsxTemplate('<SubFetch requestId="known" />', { requestIds: ["known"] })).toEqual([]);
+    expect(analyzeJsxTemplate('<SubFetch requestId="missing" url="/api" />', { requestIds: ["known"] })).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ code: "inlineRequestProps" }),
+        expect.objectContaining({ code: "unknownRequest" }),
+      ]),
+    );
+  });
+
+  it("supports temporary inputs and diagnoses incompatible bindings", () => {
+    expect(analyzeJsxTemplate('<TextInput bind="filter"/><Switch bind="filter"/>')).toEqual(
+      expect.arrayContaining([expect.objectContaining({ code: "bindingTypeConflict" })]),
+    );
+    expect(analyzeJsxTemplate("<TextInput bind={inputs.filter} />")).toEqual(
+      expect.arrayContaining([expect.objectContaining({ code: "dynamicInputBinding" })]),
+    );
+  });
+
+  it("does not advertise statement blocks or IIFEs", () => {
+    expect(
+      analyzeJsxTemplate("<Text>{data.items.map(item => { const name = item.name; return name; })}</Text>"),
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ code: "ast", value: expect.stringContaining("UNSUPPORTED_BLOCK_STATEMENT") }),
+      ]),
+    );
+    expect(analyzeJsxTemplate("<Text>{(() => data.name)()}</Text>")).toEqual(
+      expect.arrayContaining([expect.objectContaining({ code: "ast", value: expect.stringContaining("IIFEs") })]),
+    );
+  });
+
+  it("supports compound names and contextual prop completions", () => {
+    expect(analyzeJsxTemplate("<Card.Section><Tabs.List /></Card.Section>")).toEqual([]);
+    expect(getCustomJsxComponentPropCompletions("TextInput")).toEqual(
+      expect.arrayContaining([expect.objectContaining({ label: "bind=" })]),
+    );
+  });
+
+  it("renames keyed request references atomically", () => {
+    const renamed = renameCustomWidgetRequest(
+      {
+        ...customWidgetDefinitionSchema.parse(CUSTOM_WIDGET_STARTER),
+        requests: {
+          items: {
+            source: "default",
+            kind: "query",
+            method: "GET",
+            path: "/items",
+            auth: "inherit",
+            permission: "view",
+            trigger: "load",
+            confirmation: undefined,
+          },
+          refresh: {
+            source: "default",
+            kind: "action",
+            method: "POST",
+            path: "/refresh",
+            auth: "inherit",
+            permission: "modify",
+            trigger: "manual",
+            confirmation: undefined,
+            invalidates: ["items"],
+          },
+        },
+        options: {
+          item: {
+            label: "Item",
+            control: "select",
+            default: "",
+            choicesFrom: { request: "items", valuePath: "id", labelPath: "name" },
+          },
+        },
+        template: '<Stack>{data["items"]}{status.items.ok}</Stack>',
+      },
+      "items",
+      "inventory",
+    );
+    expect(renamed.requests.inventory).toBeDefined();
+    expect(renamed.requests.refresh?.invalidates).toEqual(["inventory"]);
+    expect(renamed.options.item?.choicesFrom?.request).toBe("inventory");
+    expect(renamed.template).toContain("inventory");
+  });
+
+  it("renames option references atomically", () => {
+    const renamed = renameCustomWidgetOption(
+      customWidgetDefinitionSchema.parse({
+        ...CUSTOM_WIDGET_STARTER,
+        options: { room: { label: "Room", control: "text", default: "office" } },
+        requests: {
+          status: {
+            path: "/rooms/{option:room}",
+            query: { selected: { $option: "room" } },
+            body: { room: { $option: "room" } },
+          },
+        },
+        template: '<Text>{options.room}{options["room"]}</Text>',
+      }),
+      "room",
+      "roomId",
+    );
+    expect(renamed.options.roomId?.default).toBe("office");
+    expect(renamed.requests.status?.path).toBe("/rooms/{option:roomId}");
+    expect(renamed.requests.status?.query).toEqual({ selected: { $option: "roomId" } });
+    expect(renamed.requests.status?.body).toEqual({ room: { $option: "roomId" } });
+    expect(renamed.template).toBe('<Text>{options.roomId}{options["roomId"]}</Text>');
+  });
+
+  it("builds response paths and accessibility diagnostics", () => {
+    expect(appendDataPath("data", "first-name", false)).toBe('data["first-name"]');
+    expect(
+      createResponseTreeNode({ items: [{ name: "one" }] }, "data", "data").children?.[0]?.children?.[0]?.children?.[0]
+        ?.value,
+    ).toBe("data.items[0].name");
+    expect(analyzeCustomWidgetAccessibility('<Image src="/image.png"/><ActionIcon/><TextInput />')).toEqual([
+      "imageAlt",
+      "actionIconLabel",
+      "inputLabel",
+    ]);
+  });
+});
diff --git a/packages/custom-widgets/src/test/workshop-translations.spec.ts b/packages/custom-widgets/src/test/workshop-translations.spec.ts
new file mode 100644
index 000000000..de44d3161
--- /dev/null
+++ b/packages/custom-widgets/src/test/workshop-translations.spec.ts
@@ -0,0 +1,20 @@
+import { readdir, readFile } from "node:fs/promises";
+import { resolve } from "node:path";
+
+import { describe, expect, test } from "vitest";
+
+const languageDirectory = resolve(import.meta.dirname, "../../../translation/src/lang");
+
+describe("Workshop navigation translations", () => {
+  test("defines the navbar and breadcrumb label in every locale", async () => {
+    const files = (await readdir(languageDirectory)).filter((file) => file.endsWith(".json"));
+    for (const file of files) {
+      const messages = JSON.parse(await readFile(resolve(languageDirectory, file), "utf8")) as {
+        management?: { navbar?: { items?: { workshop?: unknown } } };
+        navigationStructure?: { manage?: { workshop?: { label?: unknown } } };
+      };
+      expect(messages.management?.navbar?.items?.workshop, file).toBe("Workshop");
+      expect(messages.navigationStructure?.manage?.workshop?.label, file).toBe("Workshop");
+    }
+  });
+});
diff --git a/packages/custom-widgets/src/workbench/analyzer.ts b/packages/custom-widgets/src/workbench/analyzer.ts
new file mode 100644
index 000000000..71669f15e
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/analyzer.ts
@@ -0,0 +1,129 @@
+import { getCustomJsxBindingType } from "../core/component-registry";
+import { customJsxRequestSchema } from "../core/request-schema";
+import { z } from "zod/v4";
+import { CUSTOM_JSX_LIMITS, validateCustomJsxTemplate } from "../jsx";
+
+export type EditorDiagnosticCode =
+  | "ast"
+  | "bindingTypeConflict"
+  | "dynamicRequestId"
+  | "dynamicInputBinding"
+  | "inlineRequestProps"
+  | "invalidRequestManifest"
+  | "missingRequestId"
+  | "templateEmpty"
+  | "templateTooLong"
+  | "unknownRequest";
+
+export interface EditorDiagnostic {
+  code: EditorDiagnosticCode;
+  severity: "error" | "warning";
+  line?: number;
+  column?: number;
+  index?: number;
+  value?: string;
+}
+
+export interface AnalyzeJsxTemplateOptions {
+  requestIds?: string[];
+}
+const networkComponentPattern = /<(SubFetch|ActionButton|ToggleSwitch)\b([^>]*)>/giu;
+const inputBindingPattern = /<([A-Z][A-Za-z0-9.]*)(?:\s[^<>]*?)?\bbind\s*=\s*(?:"([^"]+)"|'([^']+)'|\{)/gu;
+const lineAt = (source: string, index: number) => source.slice(0, index).split("\n").length;
+export const CUSTOM_JSX_TEMPLATE_LIMIT = CUSTOM_JSX_LIMITS.templateLength;
+
+export function analyzeJsxTemplate(
+  template: string,
+  { requestIds = [] }: AnalyzeJsxTemplateOptions = {},
+): EditorDiagnostic[] {
+  const diagnostics: EditorDiagnostic[] = [];
+  if (!template.trim()) diagnostics.push({ code: "templateEmpty", severity: "error", line: 1, column: 1, index: 0 });
+  if (template.length > CUSTOM_JSX_TEMPLATE_LIMIT)
+    diagnostics.push({ code: "templateTooLong", severity: "error", line: 1, column: 1, index: 0 });
+  diagnostics.push(
+    ...validateCustomJsxTemplate(template).map((entry) => ({
+      code: "ast" as const,
+      severity: entry.severity,
+      line: entry.line,
+      column: entry.column,
+      index: entry.index,
+      value: entry.message,
+    })),
+  );
+  const knownIds = new Set(requestIds);
+  for (const match of template.matchAll(networkComponentPattern)) {
+    const props = match[2] ?? "";
+    const line = lineAt(template, match.index);
+    if (/\b(?:url|method|headers|body|onBody|offBody)\s*=/iu.test(props)) {
+      diagnostics.push({ code: "inlineRequestProps", severity: "error", line, index: match.index });
+    }
+    const staticRequest = props.match(/\brequestId\s*=\s*["']([^"']+)["']/iu);
+    if (staticRequest?.[1] && !knownIds.has(staticRequest[1])) {
+      diagnostics.push({
+        code: "unknownRequest",
+        severity: "error",
+        line,
+        index: match.index,
+        value: staticRequest[1],
+      });
+    } else if (!staticRequest && /\brequestId\s*=/iu.test(props)) {
+      diagnostics.push({ code: "dynamicRequestId", severity: "error", line, index: match.index });
+    } else if (!staticRequest) {
+      diagnostics.push({ code: "missingRequestId", severity: "error", line, index: match.index });
+    }
+  }
+  const inputTypes = new Map<string, string>();
+  for (const match of template.matchAll(inputBindingPattern)) {
+    const componentName = match[1] ?? "";
+    const inputName = match[2] ?? match[3];
+    if (!inputName) {
+      diagnostics.push({
+        code: "dynamicInputBinding",
+        severity: "error",
+        line: lineAt(template, match.index),
+        index: match.index,
+      });
+      continue;
+    }
+    const type = getCustomJsxBindingType(componentName);
+    const existing = inputTypes.get(inputName);
+    if (type && existing && existing !== type) {
+      diagnostics.push({
+        code: "bindingTypeConflict",
+        severity: "error",
+        line: lineAt(template, match.index),
+        index: match.index,
+        value: inputName,
+      });
+    } else if (type) {
+      inputTypes.set(inputName, type);
+    }
+  }
+  return diagnostics;
+}
+
+export function analyzeRequestManifest(value: string): EditorDiagnostic[] {
+  try {
+    const result = z.record(z.string(), customJsxRequestSchema).safeParse(JSON.parse(value) as unknown);
+    if (result.success) return [];
+    return result.error.issues.map((issue) => ({
+      code: "invalidRequestManifest",
+      severity: "error",
+      line: 1,
+      value: `${issue.path.map(String).join(".") || "requests"}: ${issue.message}`,
+    }));
+  } catch {
+    return [{ code: "invalidRequestManifest", severity: "error", line: 1 }];
+  }
+}
+
+export function parseRequestManifest(value: string): Record<string, unknown> {
+  try {
+    const parsed: unknown = JSON.parse(value);
+    return parsed !== null && typeof parsed === "object" && !Array.isArray(parsed)
+      ? (parsed as Record<string, unknown>)
+      : {};
+  } catch {
+    return {};
+  }
+}
diff --git a/packages/custom-widgets/src/workbench/code-editor-diagnostics.tsx b/packages/custom-widgets/src/workbench/code-editor-diagnostics.tsx
new file mode 100644
index 000000000..735804854
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/code-editor-diagnostics.tsx
@@ -0,0 +1,41 @@
+import { Alert, Stack, Text, UnstyledButton } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import type { EditorDiagnostic } from "./analyzer";
+import type { CustomWidgetEditorMessages } from "./code-editor-types";
+import classes from "./code-editor.module.css";
+
+export function EditorDiagnostics({
+  diagnostics,
+  messages,
+  onSelect,
+}: {
+  diagnostics: EditorDiagnostic[];
+  messages: CustomWidgetEditorMessages;
+  onSelect(diagnostic: EditorDiagnostic): void;
+}) {
+  if (diagnostics.length === 0) return null;
+  return (
+    <Stack component="ul" gap={6} mt="xs" pl={0} style={{ listStyle: "none" }} aria-label={messages.diagnosticsTitle}>
+      {diagnostics.map((diagnostic, index) => (
+        <li key={`${diagnostic.code}-${diagnostic.line ?? 0}-${index}`}>
+          <UnstyledButton
+            type="button"
+            w="100%"
+            className={classes.diagnosticButton}
+            onClick={() => onSelect(diagnostic)}
+          >
+            <Alert
+              color={diagnostic.severity === "error" ? "red" : "yellow"}
+              variant="light"
+              p="xs"
+              icon={<IconAlertTriangle size={15} />}
+            >
+              <Text size="xs">{messages.diagnostic(diagnostic)}</Text>
+            </Alert>
+          </UnstyledButton>
+        </li>
+      ))}
+    </Stack>
+  );
+}
diff --git a/packages/custom-widgets/src/workbench/code-editor-toolbar.tsx b/packages/custom-widgets/src/workbench/code-editor-toolbar.tsx
new file mode 100644
index 000000000..833b4b047
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/code-editor-toolbar.tsx
@@ -0,0 +1,139 @@
+import { Button, Group, Text } from "@mantine/core";
+import {
+  IconArrowBackUp,
+  IconArrowForwardUp,
+  IconCode,
+  IconCopy,
+  IconFileCode,
+  IconSchema,
+  IconWand,
+} from "@tabler/icons-react";
+
+import { ComponentReference } from "./component-reference";
+import type { CustomWidgetCodeEditorProps } from "./code-editor-types";
+import classes from "./code-editor.module.css";
+
+interface CodeEditorToolbarProps {
+  props: CustomWidgetCodeEditorProps;
+  editorCreated: boolean;
+  historyDepth: { undo: number; redo: number };
+  formattedValue: string;
+  copied: boolean;
+  referenceOpened: boolean;
+  onReferenceToggle(): void;
+  onCopy(): void;
+  onUndo(): void;
+  onRedo(): void;
+  onFormat(): void;
+}
+
+export function CodeEditorToolbar({
+  props,
+  editorCreated,
+  historyDepth,
+  formattedValue,
+  copied,
+  referenceOpened,
+  onReferenceToggle,
+  onCopy,
+  onUndo,
+  onRedo,
+  onFormat,
+}: CodeEditorToolbarProps) {
+  const starter = props.starter;
+  return (
+    <Group className={classes.toolbar} justify="space-between" gap="xs" wrap="wrap">
+      <Group gap={6}>
+        <IconCode size={16} aria-hidden />
+        <Text size="xs" fw={600}>
+          {props.language === "jsx"
+            ? props.messages.languageJsx
+            : props.language === "css"
+              ? "CSS"
+              : props.messages.languageJson}
+        </Text>
+      </Group>
+      <Group gap={6}>
+        {!props.readOnly && (
+          <>
+            <Button
+              type="button"
+              size="compact-xs"
+              variant="subtle"
+              leftSection={<IconArrowBackUp size={14} />}
+              onClick={onUndo}
+              disabled={!editorCreated || historyDepth.undo === 0}
+            >
+              {props.messages.undo}
+            </Button>
+            <Button
+              type="button"
+              size="compact-xs"
+              variant="subtle"
+              leftSection={<IconArrowForwardUp size={14} />}
+              onClick={onRedo}
+              disabled={!editorCreated || historyDepth.redo === 0}
+            >
+              {props.messages.redo}
+            </Button>
+          </>
+        )}
+        {!props.readOnly && props.language === "jsx" && (
+          <ComponentReference
+            messages={{
+              action: props.messages.components,
+              search: props.messages.componentSearch,
+              empty: props.messages.componentEmpty,
+              count: props.messages.componentCount,
+            }}
+          />
+        )}
+        {!props.readOnly && starter && props.value.trim().length === 0 && (
+          <Button
+            type="button"
+            size="compact-xs"
+            variant="subtle"
+            leftSection={<IconFileCode size={14} />}
+            onClick={() => props.onChange(starter)}
+          >
+            {props.messages.insertStarter}
+          </Button>
+        )}
+        {!props.readOnly && (
+          <Button
+            type="button"
+            size="compact-xs"
+            variant="subtle"
+            leftSection={<IconWand size={14} />}
+            onClick={onFormat}
+            disabled={props.language !== "jsx" && formattedValue === props.value}
+          >
+            {props.messages.format}
+          </Button>
+        )}
+        {props.reference && (
+          <Button
+            type="button"
+            size="compact-xs"
+            variant={referenceOpened ? "light" : "subtle"}
+            leftSection={<IconSchema size={14} />}
+            onClick={onReferenceToggle}
+          >
+            {props.messages.schema}
+          </Button>
+        )}
+        {props.readOnly && (
+          <Button
+            type="button"
+            size="compact-xs"
+            variant="subtle"
+            leftSection={<IconCopy size={14} />}
+            onClick={onCopy}
+          >
+            {copied ? props.messages.copied : props.messages.copy}
+          </Button>
+        )}
+      </Group>
+    </Group>
+  );
+}
diff --git a/packages/custom-widgets/src/workbench/code-editor-types.ts b/packages/custom-widgets/src/workbench/code-editor-types.ts
new file mode 100644
index 000000000..6bde1815b
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/code-editor-types.ts
@@ -0,0 +1,60 @@
+import type { Completion } from "@codemirror/autocomplete";
+import type { ReactNode } from "react";
+
+import type { EditorDiagnostic } from "./analyzer";
+
+export interface CustomWidgetEditorMessages {
+  languageJsx: string;
+  languageJson: string;
+  undo: string;
+  redo: string;
+  components: string;
+  componentSearch: string;
+  componentEmpty: string;
+  componentCount(count: number): string;
+  insertStarter: string;
+  format: string;
+  copy: string;
+  copied: string;
+  schema: string;
+  schemaTab: string;
+  minimalTab: string;
+  fullTab: string;
+  errors(count: number): string;
+  warnings(count: number): string;
+  ready: string;
+  position(cursor: { line: number; column: number }): string;
+  characters(count: number, limit?: number): string;
+  diagnosticsTitle: string;
+  diagnostic(diagnostic: EditorDiagnostic): string;
+}
+
+export interface CustomWidgetSchemaReferenceData {
+  schema: unknown;
+  minimal: unknown;
+  full: unknown;
+}
+
+export interface CustomWidgetCodeEditorProps {
+  id: string;
+  value: string;
+  onChange(value: string): void;
+  label: string;
+  messages: CustomWidgetEditorMessages;
+  description?: string;
+  placeholder?: string;
+  language: "jsx" | "json" | "css";
+  diagnostics?: EditorDiagnostic[];
+  error?: ReactNode;
+  required?: boolean;
+  maxLength?: number;
+  starter?: string;
+  completions?: Completion[];
+  revealText?: string;
+  revealKey?: number;
+  insertText?: string;
+  insertKey?: number;
+  readOnly?: boolean;
+  reference?: CustomWidgetSchemaReferenceData;
+  height?: string;
+}
diff --git a/packages/custom-widgets/src/workbench/code-editor.module.css b/packages/custom-widgets/src/workbench/code-editor.module.css
new file mode 100644
index 000000000..f1569bf88
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/code-editor.module.css
@@ -0,0 +1,65 @@
+.root {
+  margin-top: 4px;
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-sm);
+  background: var(--mantine-color-body);
+  overflow: hidden;
+}
+
+.root:focus-within {
+  border-color: var(--mantine-primary-color-filled);
+  outline: 2px solid color-mix(in srgb, var(--mantine-primary-color-filled) 20%, transparent);
+  outline-offset: 1px;
+}
+
+.toolbar,
+.footer {
+  padding: 7px 10px;
+  background: var(--mantine-color-default-hover);
+}
+
+.toolbar {
+  border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+}
+.footer {
+  border-top: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+}
+.viewport {
+  max-height: min(62vh, 680px);
+  overflow: auto;
+}
+.viewport :global(.cm-editor) {
+  background: var(--mantine-color-body);
+  color: var(--mantine-color-text);
+  font-family: "Fira Code", "SFMono-Regular", Consolas, monospace;
+  font-size: 12px;
+}
+.viewport :global(.cm-editor.cm-focused) {
+  outline: none;
+}
+.viewport :global(.cm-scroller) {
+  line-height: 1.65;
+  overflow: auto;
+}
+.viewport :global(.cm-gutters) {
+  background: var(--mantine-color-default-hover);
+  border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+}
+.diagnosticButton {
+  min-height: 44px;
+  border-radius: var(--mantine-radius-sm);
+}
+.reference {
+  border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+  padding: 10px;
+}
+
+@media (max-width: 48em) {
+  .viewport {
+    max-height: 52vh;
+  }
+  .toolbar,
+  .footer {
+    align-items: flex-start;
+  }
+}
diff --git a/packages/custom-widgets/src/workbench/code-editor.tsx b/packages/custom-widgets/src/workbench/code-editor.tsx
new file mode 100644
index 000000000..ee0f64c09
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/code-editor.tsx
@@ -0,0 +1,274 @@
+"use client";
+
+import { indentSelection, redo, redoDepth, undo, undoDepth } from "@codemirror/commands";
+import type { EditorView as EditorViewType } from "@codemirror/view";
+import { EditorView } from "@codemirror/view";
+import { lazy, Suspense, useCallback, useEffect, useId, useMemo, useState } from "react";
+import { Badge, Collapse, Group, Input, Loader, Tabs, Text, useComputedColorScheme } from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
+
+import { EditorDiagnostics } from "./code-editor-diagnostics";
+import { CodeEditorToolbar } from "./code-editor-toolbar";
+import type { EditorDiagnostic } from "./analyzer";
+import type {
+  CustomWidgetCodeEditorProps,
+  CustomWidgetEditorMessages,
+  CustomWidgetSchemaReferenceData,
+} from "./code-editor-types";
+import classes from "./code-editor.module.css";
+
+export type {
+  CustomWidgetCodeEditorProps,
+  CustomWidgetEditorMessages,
+  CustomWidgetSchemaReferenceData,
+} from "./code-editor-types";
+
+const EMPTY_DIAGNOSTICS: NonNullable<CustomWidgetCodeEditorProps["diagnostics"]> = [];
+const LazyCodeMirror = lazy(() => import("./direct-code-mirror"));
+const editorViews = new Map<string, EditorViewType>();
+
+export function CustomWidgetCodeEditor(props: CustomWidgetCodeEditorProps) {
+  const editorInstanceId = useId();
+  const diagnostics = props.diagnostics ?? EMPTY_DIAGNOSTICS;
+  const [editorReady, setEditorReady] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [referenceOpened, setReferenceOpened] = useState(false);
+  const [cursor, setCursor] = useState({ line: 1, column: 1 });
+  const [editorCreated, setEditorCreated] = useState(false);
+  const [historyDepth, setHistoryDepth] = useState({ undo: 0, redo: 0 });
+  const colorScheme = useComputedColorScheme("light");
+  useEffect(() => {
+    setEditorReady(true);
+  }, []);
+  useEffect(() => {
+    const editorView = editorViews.get(editorInstanceId);
+    if (!editorView || !props.revealText) return;
+    const from = editorView.state.doc.toString().indexOf(props.revealText);
+    if (from < 0) return;
+    editorView.dispatch({
+      selection: { anchor: from, head: from + props.revealText.length },
+      effects: EditorView.scrollIntoView(from, { y: "center" }),
+    });
+    editorView.focus();
+  }, [editorCreated, editorInstanceId, props.revealKey, props.revealText]);
+  useEffect(() => {
+    const editorView = editorViews.get(editorInstanceId);
+    if (!editorView || !props.insertText) return;
+    const selection = editorView.state.selection.main;
+    editorView.dispatch({
+      changes: { from: selection.from, to: selection.to, insert: props.insertText },
+      selection: { anchor: selection.from + props.insertText.length },
+      scrollIntoView: true,
+    });
+    editorView.focus();
+  }, [editorCreated, editorInstanceId, props.insertKey, props.insertText]);
+  const handleCreateEditor = useCallback(
+    (view: EditorViewType) => {
+      editorViews.set(editorInstanceId, view);
+      window.setTimeout(() => setEditorCreated(true), 0);
+    },
+    [editorInstanceId],
+  );
+  const handleDestroyEditor = useCallback(() => {
+    editorViews.delete(editorInstanceId);
+  }, [editorInstanceId]);
+  const selectDiagnostic = useCallback(
+    (diagnostic: EditorDiagnostic) => {
+      const editorView = editorViews.get(editorInstanceId);
+      if (!editorView || diagnostic.index === undefined) return;
+      const anchor = Math.min(diagnostic.index, editorView.state.doc.length);
+      editorView.dispatch({ selection: { anchor }, scrollIntoView: true });
+      editorView.focus();
+    },
+    [editorInstanceId],
+  );
+  const formattedValue = useMemo(() => formatCode(props.value, props.language), [props.language, props.value]);
+  const errorCount = diagnostics.filter(({ severity }) => severity === "error").length;
+  const warningCount = diagnostics.length - errorCount;
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(props.value);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2_000);
+    } catch {
+      setCopied(false);
+    }
+  };
+  return (
+    <Input.Wrapper
+      label={props.label}
+      description={props.description}
+      error={props.error}
+      required={props.required}
+      labelProps={{ id: `${props.id}-label`, htmlFor: props.id }}
+      inputWrapperOrder={["label", "description", "input", "error"]}
+    >
+      <div className={classes.root}>
+        <CodeEditorToolbar
+          props={props}
+          editorCreated={editorCreated}
+          historyDepth={historyDepth}
+          formattedValue={formattedValue}
+          copied={copied}
+          referenceOpened={referenceOpened}
+          onReferenceToggle={() => setReferenceOpened((value) => !value)}
+          onCopy={() => void copy()}
+          onUndo={() => {
+            const editorView = editorViews.get(editorInstanceId);
+            if (editorView) undo(editorView);
+          }}
+          onRedo={() => {
+            const editorView = editorViews.get(editorInstanceId);
+            if (editorView) redo(editorView);
+          }}
+          onFormat={() => {
+            const editorView = editorViews.get(editorInstanceId);
+            if (props.language === "jsx" && editorView) {
+              const selection = editorView.state.selection.main;
+              editorView.dispatch({ selection: { anchor: 0, head: editorView.state.doc.length } });
+              indentSelection(editorView);
+              const documentLength = editorView.state.doc.length;
+              editorView.dispatch({
+                selection: {
+                  anchor: Math.min(selection.anchor, documentLength),
+                  head: Math.min(selection.head, documentLength),
+                },
+              });
+            } else {
+              props.onChange(formattedValue);
+            }
+          }}
+        />
+        {props.reference && (
+          <Collapse expanded={referenceOpened}>
+            <CustomWidgetSchemaReference
+              id={`${props.id}-schema-reference`}
+              reference={props.reference}
+              messages={props.messages}
+            />
+          </Collapse>
+        )}
+        <div className={classes.viewport}>
+          {editorReady ? (
+            <Suspense fallback={<EditorLoader />}>
+              <LazyCodeMirror
+                id={props.id}
+                labelledBy={`${props.id}-label`}
+                value={props.value}
+                language={props.language}
+                diagnostics={diagnostics}
+                completions={props.completions ?? []}
+                label={props.label}
+                placeholder={props.placeholder}
+                theme={colorScheme}
+                height={props.height ?? (props.language === "jsx" ? "320px" : "220px")}
+                readOnly={props.readOnly ?? false}
+                diagnosticMessage={props.messages.diagnostic}
+                onChange={props.readOnly ? () => undefined : props.onChange}
+                onCreateEditor={handleCreateEditor}
+                onDestroyEditor={handleDestroyEditor}
+                onUpdate={(update) => {
+                  if (!update.selectionSet && !update.docChanged) return;
+                  const head = update.state.selection.main.head;
+                  const line = update.state.doc.lineAt(head);
+                  setCursor({ line: line.number, column: head - line.from + 1 });
+                  setHistoryDepth({ undo: undoDepth(update.state), redo: redoDepth(update.state) });
+                }}
+              />
+            </Suspense>
+          ) : (
+            <EditorLoader />
+          )}
+        </div>
+        <Group className={classes.footer} justify="space-between" gap="xs">
+          <Group gap={6}>
+            {errorCount > 0 ? (
+              <Badge size="xs" color="red" variant="light">
+                {props.messages.errors(errorCount)}
+              </Badge>
+            ) : warningCount > 0 ? (
+              <Badge size="xs" color="yellow" variant="light">
+                {props.messages.warnings(warningCount)}
+              </Badge>
+            ) : (
+              <Group gap={4}>
+                <IconCheck size={13} color="var(--mantine-color-green-6)" aria-hidden />
+                <Text size="xs" c="dimmed">
+                  {props.messages.ready}
+                </Text>
+              </Group>
+            )}
+            <Text size="xs" c="dimmed">
+              {props.messages.position(cursor)}
+            </Text>
+          </Group>
+          <Text size="xs" c={props.maxLength && props.value.length > props.maxLength ? "red" : "dimmed"}>
+            {props.messages.characters(props.value.length, props.maxLength)}
+          </Text>
+        </Group>
+      </div>
+      <EditorDiagnostics diagnostics={diagnostics} messages={props.messages} onSelect={selectDiagnostic} />
+    </Input.Wrapper>
+  );
+}
+
+export function ReadOnlyCustomWidgetCode(props: Omit<CustomWidgetCodeEditorProps, "onChange" | "readOnly">) {
+  return <CustomWidgetCodeEditor {...props} readOnly onChange={() => undefined} />;
+}
+
+export function CustomWidgetSchemaReference({
+  id,
+  reference,
+  messages,
+}: {
+  id: string;
+  reference: CustomWidgetSchemaReferenceData;
+  messages: CustomWidgetEditorMessages;
+}) {
+  const values = { schema: reference.schema, minimal: reference.minimal, full: reference.full };
+  const labels = { schema: messages.schemaTab, minimal: messages.minimalTab, full: messages.fullTab };
+  return (
+    <Tabs defaultValue="schema" className={classes.reference}>
+      <Tabs.List>
+        <Tabs.Tab value="schema">{messages.schemaTab}</Tabs.Tab>
+        <Tabs.Tab value="minimal">{messages.minimalTab}</Tabs.Tab>
+        <Tabs.Tab value="full">{messages.fullTab}</Tabs.Tab>
+      </Tabs.List>
+      {Object.entries(values).map(([key, value]) => (
+        <Tabs.Panel key={key} value={key} pt="xs">
+          <ReadOnlyCustomWidgetCode
+            id={`${id}-${key}`}
+            label={labels[key as keyof typeof labels]}
+            language="json"
+            value={JSON.stringify(value, null, 2)}
+            messages={messages}
+            height="280px"
+          />
+        </Tabs.Panel>
+      ))}
+    </Tabs>
+  );
+}
+
+function EditorLoader() {
+  return (
+    <Group justify="center" p="xl">
+      <Loader size="sm" />
+    </Group>
+  );
+}
+function formatCode(value: string, language: "jsx" | "json" | "css") {
+  if (language === "json") {
+    try {
+      return `${JSON.stringify(JSON.parse(value) as unknown, null, 2)}\n`;
+    } catch {
+      return value;
+    }
+  }
+  return value
+    .replace(/\r\n?/gu, "\n")
+    .split("\n")
+    .map((line) => line.trimEnd())
+    .join("\n")
+    .trim();
+}
diff --git a/packages/custom-widgets/src/workbench/code-language.ts b/packages/custom-widgets/src/workbench/code-language.ts
new file mode 100644
index 000000000..4f480d242
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/code-language.ts
@@ -0,0 +1,104 @@
+import type { Completion, CompletionSource } from "@codemirror/autocomplete";
+import { hoverTooltip } from "@codemirror/view";
+
+import {
+  customJsxAuthoringCatalog,
+  customJsxCatalogComponentByName,
+  getCustomJsxComponentProps,
+} from "../core/component-catalog";
+import { customJsxTablerIconNames } from "../core/tabler-icons";
+import { ROOT_BINDINGS } from "../jsx/analyzer-language";
+
+const enabledCatalogComponents = customJsxAuthoringCatalog.components.filter(
+  (component) => component.safety !== "denied",
+);
+
+const componentCompletions: Completion[] = enabledCatalogComponents.map((component) => ({
+  label: component.name,
+  type: "class",
+  detail: `${component.package} · ${component.category} · ${component.safety}`,
+  info: component.description ?? component.documentationUrl,
+}));
+
+export function getCustomJsxComponentPropCompletions(componentName: string): Completion[] {
+  return getCustomJsxComponentProps(componentName)
+    .filter((prop) => prop.name !== "key")
+    .map((prop) => ({
+      label: `${prop.name}=`,
+      type: "property",
+      detail: `${prop.type}${prop.required ? " · required" : ""}`,
+      info: [prop.description, prop.literalValues?.length ? `Values: ${prop.literalValues.join(", ")}` : undefined]
+        .filter(Boolean)
+        .join("\n"),
+    }));
+}
+
+const iconCompletions: Completion[] = customJsxTablerIconNames.map((name) => ({
+  label: `name="${name}"`,
+  type: "enum",
+  detail: "Safe Tabler icon",
+}));
+
+const rootBindingCompletions: Completion[] = [...ROOT_BINDINGS].toSorted().map((label) => ({
+  label,
+  type: ["data", "status", "options", "inputs"].includes(label) ? "variable" : "function",
+  detail: "Safe Custom JSX binding",
+}));
+
+export const createCustomJsxCompletionSource =
+  (additional: Completion[]): CompletionSource =>
+  (context) => {
+    const word = context.matchBefore(/[A-Za-z](?:[\w."'_-]|\[|\])*/u);
+    if (!word && !context.explicit) return null;
+    const source = context.state.doc.toString();
+    const componentName = activeOpeningComponent(source, context.pos);
+    const contextualCompletions = componentName
+      ? [
+          ...getCustomJsxComponentPropCompletions(componentName),
+          ...(componentName === "TablerIcon" ? iconCompletions : []),
+        ]
+      : componentCompletions;
+    return {
+      from: word?.from ?? context.pos,
+      options: [...rootBindingCompletions, ...contextualCompletions, ...additional],
+    };
+  };
+
+export const customJsxComponentHover = hoverTooltip((view, position) => {
+  const source = view.state.doc.toString();
+  const token = dottedTokenAt(source, position);
+  if (!token) return null;
+  const component = customJsxCatalogComponentByName.get(token.value);
+  const activeComponentName = activeOpeningComponent(source, position);
+  const prop = activeComponentName
+    ? getCustomJsxComponentProps(activeComponentName).find((candidate) => candidate.name === token.value)
+    : undefined;
+  if ((!component || component.safety === "denied") && !prop) return null;
+  return {
+    pos: token.from,
+    end: token.to,
+    above: true,
+    create: () => {
+      const dom = document.createElement("div");
+      dom.style.padding = "6px 8px";
+      dom.textContent = prop
+        ? `${activeComponentName}.${prop.name}: ${prop.type}${prop.required ? " · required" : ""}${prop.description ? ` — ${prop.description}` : ""}`
+        : `${component?.name} · ${component?.package} · ${component?.category}${component?.description ? ` — ${component.description}` : ""}`;
+      return { dom };
+    },
+  };
+});
+
+function activeOpeningComponent(source: string, position: number): string | undefined {
+  const match = source.slice(0, position).match(/<([A-Z][A-Za-z0-9.]*)\b[^<>]*$/u);
+  const name = match?.[1];
+  return name && customJsxCatalogComponentByName.get(name)?.safety !== "denied" ? name : undefined;
+}
+
+function dottedTokenAt(source: string, position: number) {
+  let from = position;
+  let to = position;
+  while (from > 0 && /[A-Za-z0-9._-]/u.test(source[from - 1] ?? "")) from -= 1;
+  while (to < source.length && /[A-Za-z0-9._-]/u.test(source[to] ?? "")) to += 1;
+  return from === to ? null : { from, to, value: source.slice(from, to) };
+}
diff --git a/packages/custom-widgets/src/workbench/component-reference.tsx b/packages/custom-widgets/src/workbench/component-reference.tsx
new file mode 100644
index 000000000..2228da68c
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/component-reference.tsx
@@ -0,0 +1,114 @@
+import { useMemo, useState } from "react";
+import { Accordion, Badge, Button, Code, Group, Popover, ScrollArea, Stack, Text, TextInput } from "@mantine/core";
+import { IconComponents, IconSearch } from "@tabler/icons-react";
+
+import { customJsxAuthoringCatalog, getCustomJsxComponentProps } from "../core/component-catalog";
+
+export interface ComponentReferenceMessages {
+  action: string;
+  search: string;
+  empty: string;
+  count(count: number): string;
+}
+
+const enabledComponents = customJsxAuthoringCatalog.components.filter((component) => component.safety !== "denied");
+
+export function ComponentReference({ messages }: { messages: ComponentReferenceMessages }) {
+  const [query, setQuery] = useState("");
+  const components = useMemo(() => {
+    const normalized = query.trim().toLocaleLowerCase();
+    if (!normalized) return enabledComponents;
+    return enabledComponents.filter((component) =>
+      [
+        component.name,
+        component.package,
+        component.category,
+        component.description ?? "",
+        ...getCustomJsxComponentProps(component.name).map(({ name, type }) => `${name} ${type}`),
+      ].some((value) => value.toLocaleLowerCase().includes(normalized)),
+    );
+  }, [query]);
+
+  return (
+    <Popover width={560} position="bottom-end" withinPortal shadow="md">
+      <Popover.Target>
+        <Button type="button" size="compact-xs" variant="subtle" leftSection={<IconComponents size={14} />}>
+          {messages.action}
+        </Button>
+      </Popover.Target>
+      <Popover.Dropdown p="xs">
+        <Stack gap="xs">
+          <TextInput
+            size="xs"
+            value={query}
+            onChange={(event) => setQuery(event.currentTarget.value)}
+            placeholder={messages.search}
+            aria-label={messages.search}
+            leftSection={<IconSearch size={14} />}
+          />
+          <ScrollArea.Autosize mah={440} type="auto">
+            <Accordion variant="separated" radius="sm">
+              {components.map((component) => {
+                const props = getCustomJsxComponentProps(component.name);
+                return (
+                  <Accordion.Item key={component.name} value={component.name}>
+                    <Accordion.Control>
+                      <Group justify="space-between" wrap="nowrap" pr="xs">
+                        <Code>{component.name}</Code>
+                        <Group gap={4} wrap="nowrap">
+                          {component.bind && <Badge size="xs">bind: {component.bind.type}</Badge>}
+                          <Badge size="xs" variant="light" color={component.safety === "wrapped" ? "yellow" : "gray"}>
+                            {component.category}
+                          </Badge>
+                        </Group>
+                      </Group>
+                    </Accordion.Control>
+                    <Accordion.Panel>
+                      <Stack gap={6}>
+                        {component.description && <Text size="xs">{component.description}</Text>}
+                        <Text size="xs" c="dimmed">
+                          {component.package} · {props.length} props
+                        </Text>
+                        {component.blockedProps.map((prop) => (
+                          <Text key={prop.name} size="xs" c="red">
+                            {prop.name}: {prop.reason}
+                          </Text>
+                        ))}
+                        <ScrollArea.Autosize mah={200} type="auto">
+                          <Stack gap={3}>
+                            {props.map((prop) => (
+                              <Group key={prop.name} gap="xs" justify="space-between" wrap="nowrap">
+                                <Code>{prop.name}</Code>
+                                <Text size="xs" ff="monospace" c="dimmed" ta="right">
+                                  {prop.type}
+                                  {prop.required ? " · required" : ""}
+                                </Text>
+                              </Group>
+                            ))}
+                          </Stack>
+                        </ScrollArea.Autosize>
+                        {component.accessibilityRequirements.map((requirement) => (
+                          <Text key={requirement} size="xs" c="dimmed">
+                            {requirement}
+                          </Text>
+                        ))}
+                      </Stack>
+                    </Accordion.Panel>
+                  </Accordion.Item>
+                );
+              })}
+            </Accordion>
+            {components.length === 0 && (
+              <Text size="xs" c="dimmed" ta="center" py="md">
+                {messages.empty}
+              </Text>
+            )}
+          </ScrollArea.Autosize>
+          <Text size="xs" c="dimmed">
+            {messages.count(enabledComponents.length)} · Mantine {customJsxAuthoringCatalog.mantineVersion}
+          </Text>
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
diff --git a/packages/custom-widgets/src/workbench/direct-code-mirror.tsx b/packages/custom-widgets/src/workbench/direct-code-mirror.tsx
new file mode 100644
index 000000000..5157d6216
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/direct-code-mirror.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { autocompletion } from "@codemirror/autocomplete";
+import { indentWithTab } from "@codemirror/commands";
+import { css } from "@codemirror/lang-css";
+import { javascript } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import { linter } from "@codemirror/lint";
+import { EditorState, StateEffect } from "@codemirror/state";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { EditorView, keymap, placeholder as codeMirrorPlaceholder } from "@codemirror/view";
+import type { ViewUpdate } from "@codemirror/view";
+import { basicSetup } from "codemirror";
+import { useCallback, useEffect, useId, useState } from "react";
+import type { Completion } from "@codemirror/autocomplete";
+
+import { createCustomJsxCompletionSource, customJsxComponentHover } from "./code-language";
+import type { EditorDiagnostic } from "./analyzer";
+
+interface DirectCodeMirrorProps {
+  value: string;
+  language: "jsx" | "json" | "css";
+  diagnostics: EditorDiagnostic[];
+  completions: Completion[];
+  id: string;
+  label: string;
+  labelledBy: string;
+  placeholder?: string;
+  height: string;
+  theme: "light" | "dark";
+  readOnly: boolean;
+  diagnosticMessage(diagnostic: EditorDiagnostic): string;
+  onChange(value: string): void;
+  onCreateEditor(view: EditorView): void;
+  onDestroyEditor(): void;
+  onUpdate(update: ViewUpdate): void;
+}
+
+interface EditorCallbacks {
+  onChange(value: string): void;
+  onUpdate(update: ViewUpdate): void;
+}
+
+const editorViews = new Map<string, EditorView>();
+const editorCallbacks = new Map<string, EditorCallbacks>();
+const editorContainers = new Map<string, HTMLDivElement>();
+
+export default function DirectCodeMirror(props: DirectCodeMirrorProps) {
+  const instanceId = useId();
+  const [initialProps] = useState(props);
+  const [containerReady, setContainerReady] = useState(false);
+  const setContainer = useCallback(
+    (container: HTMLDivElement | null) => {
+      if (!container) {
+        editorContainers.delete(instanceId);
+        return;
+      }
+      editorContainers.set(instanceId, container);
+      setContainerReady(true);
+    },
+    [instanceId],
+  );
+
+  useEffect(() => {
+    editorCallbacks.set(instanceId, { onChange: props.onChange, onUpdate: props.onUpdate });
+  }, [instanceId, props.onChange, props.onUpdate]);
+
+  useEffect(() => {
+    const parent = editorContainers.get(instanceId);
+    if (!parent) return;
+    const view = new EditorView({
+      parent,
+      state: EditorState.create({ doc: initialProps.value, extensions: createExtensions(instanceId, initialProps) }),
+    });
+    editorViews.set(instanceId, view);
+    initialProps.onCreateEditor(view);
+    return () => {
+      editorViews.delete(instanceId);
+      editorCallbacks.delete(instanceId);
+      initialProps.onDestroyEditor();
+      view.destroy();
+    };
+  }, [containerReady, initialProps, instanceId]);
+
+  useEffect(() => {
+    const view = editorViews.get(instanceId);
+    if (!view || view.state.doc.toString() === props.value) return;
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: props.value } });
+  }, [instanceId, props.value]);
+
+  useEffect(() => {
+    const view = editorViews.get(instanceId);
+    if (!view) return;
+    view.dispatch({ effects: StateEffect.reconfigure.of(createExtensions(instanceId, props)) });
+  }, [instanceId, props]);
+
+  return <div ref={setContainer} />;
+}
+
+function createExtensions(instanceId: string, props: DirectCodeMirrorProps) {
+  const language =
+    props.language === "jsx"
+      ? [
+          javascript({ jsx: true }),
+          autocompletion({ override: [createCustomJsxCompletionSource(props.completions)] }),
+          customJsxComponentHover,
+        ]
+      : props.language === "css"
+        ? [css()]
+        : [json()];
+  return [
+    basicSetup,
+    ...language,
+    linter((view) =>
+      props.diagnostics.map((diagnostic) => {
+        const from = Math.min(diagnostic.index ?? 0, view.state.doc.length);
+        return {
+          from,
+          to: Math.min(from + 1, view.state.doc.length),
+          severity: diagnostic.severity,
+          message: props.diagnosticMessage(diagnostic),
+        };
+      }),
+    ),
+    EditorView.contentAttributes.of({ id: props.id, "aria-label": props.label, "aria-labelledby": props.labelledBy }),
+    EditorView.editable.of(!props.readOnly),
+    EditorState.readOnly.of(props.readOnly),
+    keymap.of(props.readOnly ? [] : [indentWithTab]),
+    props.placeholder ? codeMirrorPlaceholder(props.placeholder) : [],
+    EditorView.theme({ "&": { height: props.height }, ".cm-scroller": { overflow: "auto" } }),
+    props.theme === "dark" ? oneDark : [],
+    EditorView.updateListener.of((update) => {
+      const callbacks = editorCallbacks.get(instanceId);
+      if (!callbacks) return;
+      if (update.docChanged) callbacks.onChange(update.state.doc.toString());
+      callbacks.onUpdate(update);
+    }),
+  ];
+}
diff --git a/packages/custom-widgets/src/workbench/form-schema.ts b/packages/custom-widgets/src/workbench/form-schema.ts
new file mode 100644
index 000000000..e8d009b39
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/form-schema.ts
@@ -0,0 +1,51 @@
+import { z } from "zod/v4";
+
+import { CUSTOM_WIDGET_STARTER } from "../core";
+
+const jsonObjectString = z.string().superRefine((value, ctx) => {
+  try {
+    const parsed = JSON.parse(value) as unknown;
+    if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) throw new Error();
+  } catch {
+    ctx.addIssue({ code: "custom", message: "Must be a JSON object" });
+  }
+});
+
+export const customWidgetFormSchema = z.object({
+  name: z.string().trim().min(1).max(128),
+  description: z.string().max(512),
+  iconUrl: z.union([z.literal(""), z.string().url()]),
+  sources: jsonObjectString,
+  requests: jsonObjectString,
+  options: jsonObjectString,
+  template: z.string().min(1).max(50_000),
+  secrets: z.array(
+    z.object({ sourceId: z.string(), kind: z.string(), value: z.string(), hasValue: z.boolean().optional() }),
+  ),
+});
+
+export type CustomWidgetFormValues = z.infer<typeof customWidgetFormSchema>;
+
+export const CUSTOM_WIDGET_AUTH_SECRET_FIELDS: Record<
+  string,
+  Array<{ kind: string; labelKey: string; isPassword: boolean }>
+> = {
+  bearer: [{ kind: "apiKey", labelKey: "apiKey", isPassword: true }],
+  basic: [
+    { kind: "username", labelKey: "username", isPassword: false },
+    { kind: "password", labelKey: "password", isPassword: true },
+  ],
+  apiKeyHeader: [{ kind: "apiKey", labelKey: "apiKey", isPassword: true }],
+  apiKeyQuery: [{ kind: "apiKey", labelKey: "apiKey", isPassword: true }],
+};
+
+export const DEFAULT_CUSTOM_WIDGET_FORM_VALUES: CustomWidgetFormValues = {
+  name: CUSTOM_WIDGET_STARTER.name,
+  description: CUSTOM_WIDGET_STARTER.description ?? "",
+  iconUrl: CUSTOM_WIDGET_STARTER.iconUrl ?? "",
+  sources: JSON.stringify(CUSTOM_WIDGET_STARTER.sources, null, 2),
+  requests: JSON.stringify(CUSTOM_WIDGET_STARTER.requests, null, 2),
+  options: JSON.stringify(CUSTOM_WIDGET_STARTER.options, null, 2),
+  template: CUSTOM_WIDGET_STARTER.template,
+  secrets: [],
+};
diff --git a/packages/custom-widgets/src/workbench/import-review.tsx b/packages/custom-widgets/src/workbench/import-review.tsx
new file mode 100644
index 000000000..365c4b0fb
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/import-review.tsx
@@ -0,0 +1,130 @@
+import type { ReactNode } from "react";
+import { Alert, Badge, Button, Code, Group, Modal, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
+import type { ModalProps } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import type { ImportReview } from "../core/import";
+
+export interface ImportReviewMessages {
+  title: string;
+  description: string;
+  name: string;
+  origin: string;
+  authentication: string;
+  networkScope: string;
+  methods: string;
+  permissions: string;
+  actionWarningTitle: string;
+  actionWarningDescription: string;
+  cancel: string;
+  confirm: string;
+  permission(permission: string): string;
+}
+
+export interface ImportReviewDialogProps {
+  opened: boolean;
+  review: ImportReview | null;
+  pending: boolean;
+  confirmDisabled?: boolean;
+  messages: ImportReviewMessages;
+  children?: ReactNode;
+  stackId?: string;
+  zIndex?: ModalProps["zIndex"];
+  onClose(): void;
+  onConfirm(): void;
+}
+
+function ImportFact({ label, value }: { label: string; value: string }) {
+  return (
+    <Paper withBorder p="xs">
+      <Text size="xs" c="dimmed">
+        {label}
+      </Text>
+      <Code>{value || "—"}</Code>
+    </Paper>
+  );
+}
+
+export function ImportReviewDialog({
+  opened,
+  review,
+  pending,
+  confirmDisabled,
+  messages,
+  children,
+  stackId,
+  zIndex,
+  onClose,
+  onConfirm,
+}: ImportReviewDialogProps) {
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={messages.title}
+      centered
+      size="lg"
+      stackId={stackId}
+      zIndex={zIndex}
+    >
+      {review && (
+        <Stack gap="md">
+          <Text size="sm" c="dimmed">
+            {messages.description}
+          </Text>
+          <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="xs">
+            <ImportFact label={messages.name} value={review.name} />
+            <ImportFact label={messages.origin} value={review.origins.join(", ")} />
+            <ImportFact label={messages.authentication} value={review.authTypes.join(", ")} />
+            <ImportFact label={messages.networkScope} value={review.networkScopes.join(", ")} />
+          </SimpleGrid>
+          <div>
+            <Text size="sm" fw={600} mb={6}>
+              {messages.methods}
+            </Text>
+            <Group gap={6}>
+              {review.methods.map((method) => (
+                <Badge
+                  key={method}
+                  color={method === "DELETE" ? "red" : method === "GET" ? "blue" : "orange"}
+                  variant="light"
+                >
+                  {method}
+                </Badge>
+              ))}
+            </Group>
+          </div>
+          <div>
+            <Text size="sm" fw={600} mb={6}>
+              {messages.permissions}
+            </Text>
+            <Group gap={6}>
+              {review.permissions.map((permission) => (
+                <Badge key={permission} color="gray" variant="light">
+                  {messages.permission(permission)}
+                </Badge>
+              ))}
+            </Group>
+          </div>
+          {review.hasActions && (
+            <Alert color="yellow" icon={<IconAlertTriangle size={16} />}>
+              <Text size="sm" fw={600}>
+                {messages.actionWarningTitle}
+              </Text>
+              <Text size="sm">{messages.actionWarningDescription}</Text>
+            </Alert>
+          )}
+          {children}
+          <Group justify="flex-end">
+            <Button type="button" variant="default" onClick={onClose} disabled={pending}>
+              {messages.cancel}
+            </Button>
+            <Button type="button" onClick={onConfirm} loading={pending} disabled={confirmDisabled}>
+              {messages.confirm}
+            </Button>
+          </Group>
+        </Stack>
+      )}
+    </Modal>
+  );
+}
diff --git a/packages/custom-widgets/src/workbench/index.ts b/packages/custom-widgets/src/workbench/index.ts
new file mode 100644
index 000000000..3454bdf3e
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/index.ts
@@ -0,0 +1,21 @@
+export * from "./analyzer";
+export * from "./response-tree";
+export * from "./import-review";
+export * from "./ports";
+export * from "./component-reference";
+export * from "./code-editor";
+export * from "./code-language";
+export * from "./preview-error-boundary";
+export * from "./preview-response-panel";
+export * from "./preview-request-panel";
+export * from "./preview-diagnostics-panel";
+export * from "./preview-header";
+export * from "./preview-utils";
+export * from "./request-references";
+export * from "./source-setup";
+export {
+  CUSTOM_WIDGET_AUTH_SECRET_FIELDS,
+  DEFAULT_CUSTOM_WIDGET_FORM_VALUES,
+  customWidgetFormSchema,
+} from "./form-schema";
+export type { CustomWidgetFormValues } from "./form-schema";
diff --git a/packages/custom-widgets/src/workbench/ports.ts b/packages/custom-widgets/src/workbench/ports.ts
new file mode 100644
index 000000000..800cc1732
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/ports.ts
@@ -0,0 +1,32 @@
+import type { CustomWidgetFormValues } from "./form-schema";
+
+export interface WorkbenchPreviewResult {
+  success: boolean;
+  data?: unknown;
+  rawResponse?: string | null;
+  error?: string;
+  sessionId?: string;
+}
+
+export interface WorkbenchJournalEntry {
+  requestId: string;
+  method: string;
+  status: number | null;
+  durationMs: number;
+  simulated: boolean;
+}
+
+export interface CustomWidgetWorkbenchPort {
+  preview(values: CustomWidgetFormValues, signal?: AbortSignal): Promise<WorkbenchPreviewResult>;
+  queryPreview(
+    input: { sessionId: string; requestId: string; params: Record<string, string | number | boolean> },
+    signal?: AbortSignal,
+  ): Promise<unknown>;
+  simulateAction(input: {
+    sessionId: string;
+    requestId: string;
+    params: Record<string, string | number | boolean>;
+  }): Promise<unknown>;
+  setLiveActions(input: { sessionId: string; enabled: boolean }): Promise<void>;
+  readJournal(sessionId: string, signal?: AbortSignal): Promise<readonly WorkbenchJournalEntry[]>;
+}
diff --git a/packages/custom-widgets/src/workbench/preview-diagnostics-panel.tsx b/packages/custom-widgets/src/workbench/preview-diagnostics-panel.tsx
new file mode 100644
index 000000000..6522c2d36
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/preview-diagnostics-panel.tsx
@@ -0,0 +1,73 @@
+import { Alert, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
+import { IconAlertTriangle, IconCheck } from "@tabler/icons-react";
+
+import type { EditorDiagnostic } from "./analyzer";
+
+interface PreviewDiagnosticsMessages {
+  templateSize: string;
+  characters: (count: number) => string;
+  namedRequests: string;
+  methods: string;
+  networkScope: string;
+  ready: string;
+  diagnostic: (diagnostic: EditorDiagnostic) => string;
+}
+
+interface PreviewDiagnosticsPanelProps {
+  templateLength: number;
+  namedRequestCount: number;
+  methods: string;
+  networkScope: string;
+  diagnostics: EditorDiagnostic[];
+  messages: PreviewDiagnosticsMessages;
+}
+
+export function PreviewDiagnosticsPanel({
+  templateLength,
+  namedRequestCount,
+  methods,
+  networkScope,
+  diagnostics,
+  messages,
+}: PreviewDiagnosticsPanelProps) {
+  return (
+    <Stack gap="xs">
+      <SimpleGrid cols={2} spacing="xs">
+        <DiagnosticFact label={messages.templateSize} value={messages.characters(templateLength)} />
+        <DiagnosticFact label={messages.namedRequests} value={String(namedRequestCount)} />
+        <DiagnosticFact label={messages.methods} value={methods} />
+        <DiagnosticFact label={messages.networkScope} value={networkScope} />
+      </SimpleGrid>
+      {diagnostics.length === 0 ? (
+        <Alert color="green" variant="light" p="xs" icon={<IconCheck size={15} />}>
+          <Text size="xs">{messages.ready}</Text>
+        </Alert>
+      ) : (
+        diagnostics.map((diagnostic, index) => (
+          <Alert
+            key={`${diagnostic.code}-${index}`}
+            color={diagnostic.severity === "error" ? "red" : "yellow"}
+            variant="light"
+            p="xs"
+            icon={<IconAlertTriangle size={15} />}
+          >
+            <Text size="xs">{messages.diagnostic(diagnostic)}</Text>
+          </Alert>
+        ))
+      )}
+    </Stack>
+  );
+}
+
+function DiagnosticFact({ label, value }: { label: string; value: string }) {
+  return (
+    <Paper withBorder p="xs">
+      <Text size="xs" c="dimmed">
+        {label}
+      </Text>
+      <Text size="xs" fw={600} lineClamp={2}>
+        {value || "—"}
+      </Text>
+    </Paper>
+  );
+}
diff --git a/packages/custom-widgets/src/workbench/preview-error-boundary.tsx b/packages/custom-widgets/src/workbench/preview-error-boundary.tsx
new file mode 100644
index 000000000..a8d1bca0d
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/preview-error-boundary.tsx
@@ -0,0 +1,61 @@
+import type { ErrorInfo, ReactNode } from "react";
+import { Component } from "react";
+import { Button, Card, Stack, Text } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+export interface PreviewErrorBoundaryProps {
+  children: ReactNode;
+  title: string;
+  description: string;
+  retryLabel: string;
+  resetKeys?: readonly unknown[];
+}
+
+interface PreviewErrorBoundaryState {
+  hasError: boolean;
+  resetKeys?: readonly unknown[];
+}
+
+export class PreviewErrorBoundary extends Component<PreviewErrorBoundaryProps, PreviewErrorBoundaryState> {
+  public state: PreviewErrorBoundaryState = { hasError: false, resetKeys: this.props.resetKeys };
+  public static getDerivedStateFromProps(
+    props: PreviewErrorBoundaryProps,
+    state: PreviewErrorBoundaryState,
+  ): Partial<PreviewErrorBoundaryState> | null {
+    if (!resetKeysChanged(state.resetKeys, props.resetKeys)) return null;
+    return { hasError: false, resetKeys: props.resetKeys };
+  }
+  public static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  public componentDidCatch(_error: Error, _info: ErrorInfo) {
+    // Imported templates and response data are intentionally not logged.
+  }
+  public render() {
+    if (!this.state.hasError) return this.props.children;
+    return (
+      <Card p="xl" role="alert">
+        <Stack align="center" gap="sm" py="xl">
+          <IconAlertTriangle size={28} color="var(--mantine-color-red-6)" />
+          <div>
+            <Text fw={600} ta="center">
+              {this.props.title}
+            </Text>
+            <Text size="sm" c="dimmed" ta="center" maw={480}>
+              {this.props.description}
+            </Text>
+          </div>
+          <Button type="button" variant="light" onClick={() => this.setState({ hasError: false })}>
+            {this.props.retryLabel}
+          </Button>
+        </Stack>
+      </Card>
+    );
+  }
+}
+
+function resetKeysChanged(previous: readonly unknown[] | undefined, current: readonly unknown[] | undefined) {
+  if (previous === current) return false;
+  if (!previous || !current || previous.length !== current.length) return true;
+  return current.some((value, index) => !Object.is(value, previous[index]));
+}
diff --git a/packages/custom-widgets/src/workbench/preview-header.tsx b/packages/custom-widgets/src/workbench/preview-header.tsx
new file mode 100644
index 000000000..516d17cf2
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/preview-header.tsx
@@ -0,0 +1,83 @@
+import { Alert, Badge, Button, Group, Loader, Text, Title } from "@mantine/core";
+import { IconAlertTriangle, IconInfoCircle, IconPlayerPlay } from "@tabler/icons-react";
+
+interface PreviewHeaderMessages {
+  title: string;
+  test: string;
+  mutationDisabled: string;
+  staleTitle: string;
+  staleDescription: string;
+}
+
+interface PreviewHeaderProps {
+  method: string;
+  url: string;
+  isTesting: boolean;
+  isSampleStale: boolean;
+  testError?: string | null;
+  responseError?: string;
+  responseStatus?: { status: number; statusText: string } | null;
+  onTest: () => void;
+  messages: PreviewHeaderMessages;
+}
+
+export function PreviewHeader({
+  method,
+  url,
+  isTesting,
+  isSampleStale,
+  testError,
+  responseError,
+  responseStatus,
+  onTest,
+  messages,
+}: PreviewHeaderProps) {
+  return (
+    <>
+      <Group justify="space-between" align="center" wrap="nowrap">
+        <Title order={5}>{messages.title}</Title>
+        <Button
+          type="button"
+          size="xs"
+          variant="light"
+          leftSection={isTesting ? <Loader size={14} /> : <IconPlayerPlay size={14} />}
+          onClick={onTest}
+          loading={isTesting}
+          disabled={method !== "GET" || !url}
+        >
+          {messages.test}
+        </Button>
+      </Group>
+      {method !== "GET" && (
+        <Alert color="yellow" variant="light" p="xs" icon={<IconInfoCircle size={15} />}>
+          <Text size="xs">{messages.mutationDisabled}</Text>
+        </Alert>
+      )}
+      {isSampleStale && (
+        <Alert color="yellow" variant="light" p="xs" icon={<IconAlertTriangle size={15} />}>
+          <Text size="xs" fw={600}>
+            {messages.staleTitle}
+          </Text>
+          <Text size="xs">{messages.staleDescription}</Text>
+        </Alert>
+      )}
+      {testError && (
+        <Alert color="red" icon={<IconAlertTriangle size={16} />} p="xs">
+          <Text size="xs">{testError}</Text>
+        </Alert>
+      )}
+      {responseError && (
+        <Alert color="red" icon={<IconAlertTriangle size={16} />} p="xs">
+          <Text size="xs" fw={500}>
+            {responseError}
+          </Text>
+          {responseStatus && (
+            <Badge size="xs" color="red" variant="light" mt={4}>
+              {responseStatus.status} {responseStatus.statusText}
+            </Badge>
+          )}
+        </Alert>
+      )}
+    </>
+  );
+}
diff --git a/packages/custom-widgets/src/workbench/preview-request-panel.tsx b/packages/custom-widgets/src/workbench/preview-request-panel.tsx
new file mode 100644
index 000000000..f74287228
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/preview-request-panel.tsx
@@ -0,0 +1,155 @@
+import { Alert, Badge, Group, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
+import { IconClipboard } from "@tabler/icons-react";
+
+export interface PreviewNamedRequest {
+  id: string;
+  kind: "query" | "action";
+  method: string;
+  path: string;
+  minimumBoardPermission?: string;
+}
+
+export interface PreviewJournalEntry {
+  id: string;
+  requestId: string;
+  method: string;
+  path: string;
+  simulated: boolean;
+  status: number | null;
+  durationMs: number;
+}
+
+interface PreviewRequestPanelMessages {
+  method: string;
+  authentication: string;
+  endpoint: string;
+  status: string;
+  notRun: string;
+  named: string;
+  journal: string;
+  journalEmpty: string;
+  simulated: string;
+  redacted: string;
+  permission: (permission: string) => string;
+  duration: (duration: number) => string;
+}
+
+interface PreviewRequestPanelProps {
+  method: string;
+  authentication: string;
+  endpoint: string;
+  status?: number;
+  namedRequests: PreviewNamedRequest[];
+  journal?: PreviewJournalEntry[];
+  methodColor: (method: string) => string;
+  messages: PreviewRequestPanelMessages;
+}
+
+const journalColor = ({ simulated, status }: PreviewJournalEntry): string => {
+  if (simulated) return "yellow";
+  if (status !== null && status >= 200 && status < 400) return "green";
+  return "red";
+};
+
+export function PreviewRequestPanel({
+  method,
+  authentication,
+  endpoint,
+  status,
+  namedRequests,
+  journal,
+  methodColor,
+  messages,
+}: PreviewRequestPanelProps) {
+  return (
+    <Stack gap="sm">
+      <SimpleGrid cols={2} spacing="xs">
+        <RequestFact label={messages.method} value={method} />
+        <RequestFact label={messages.authentication} value={authentication} />
+        <RequestFact label={messages.endpoint} value={endpoint} />
+        <RequestFact label={messages.status} value={status === undefined ? messages.notRun : String(status)} />
+      </SimpleGrid>
+      {namedRequests.length > 0 && (
+        <Stack gap={6}>
+          <Text size="xs" fw={600}>
+            {messages.named}
+          </Text>
+          {namedRequests.map((request) => (
+            <Paper key={request.id} withBorder p="xs">
+              <Group justify="space-between" wrap="nowrap">
+                <div>
+                  <Text size="xs" fw={600} ff="monospace">
+                    {request.id}
+                  </Text>
+                  <Text size="xs" c="dimmed" ff="monospace" lineClamp={1}>
+                    {request.path}
+                  </Text>
+                </div>
+                <Group gap={4} wrap="nowrap">
+                  <Badge size="xs" variant="light" color={methodColor(request.method)}>
+                    {request.method}
+                  </Badge>
+                  <Badge size="xs" variant="light" color="gray">
+                    {messages.permission(request.minimumBoardPermission ?? "view")}
+                  </Badge>
+                </Group>
+              </Group>
+            </Paper>
+          ))}
+        </Stack>
+      )}
+      {journal && journal.length > 0 ? (
+        <Stack gap={6}>
+          <Text size="xs" fw={600}>
+            {messages.journal}
+          </Text>
+          {journal.map((entry) => (
+            <Paper key={entry.id} withBorder p="xs">
+              <Group justify="space-between" wrap="nowrap">
+                <div style={{ minWidth: 0 }}>
+                  <Text size="xs" fw={600} ff="monospace">
+                    {entry.requestId}
+                  </Text>
+                  <Text size="xs" c="dimmed" ff="monospace" truncate>
+                    {entry.path}
+                  </Text>
+                </div>
+                <Group gap={4} wrap="nowrap">
+                  <Badge size="xs" color={methodColor(entry.method)} variant="light">
+                    {entry.method}
+                  </Badge>
+                  <Badge size="xs" color={journalColor(entry)}>
+                    {entry.simulated ? messages.simulated : (entry.status ?? "—")}
+                  </Badge>
+                  <Text size="xs" c="dimmed" w={56} ta="right">
+                    {messages.duration(entry.durationMs)}
+                  </Text>
+                </Group>
+              </Group>
+            </Paper>
+          ))}
+        </Stack>
+      ) : (
+        <Text size="xs" c="dimmed">
+          {messages.journalEmpty}
+        </Text>
+      )}
+      <Alert color="blue" variant="light" p="xs" icon={<IconClipboard size={15} />}>
+        <Text size="xs">{messages.redacted}</Text>
+      </Alert>
+    </Stack>
+  );
+}
+
+function RequestFact({ label, value }: { label: string; value: string }) {
+  return (
+    <Paper withBorder p="xs">
+      <Text size="xs" c="dimmed">
+        {label}
+      </Text>
+      <Text size="xs" fw={600} lineClamp={2}>
+        {value || "—"}
+      </Text>
+    </Paper>
+  );
+}
diff --git a/packages/custom-widgets/src/workbench/preview-response-panel.tsx b/packages/custom-widgets/src/workbench/preview-response-panel.tsx
new file mode 100644
index 000000000..85f82c716
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/preview-response-panel.tsx
@@ -0,0 +1,149 @@
+import { useMemo, useState } from "react";
+import { Button, Collapse, CopyButton, Group, Paper, ScrollArea, Stack, Text, Textarea } from "@mantine/core";
+import { IconCheck, IconCopy, IconExternalLink } from "@tabler/icons-react";
+
+import { ResponseTree } from "./response-tree";
+
+export interface PreviewResponseMessages {
+  empty: string;
+  sampleHint: string;
+  editSample: string;
+  addSample: string;
+  copied: string;
+  copy: string;
+  sampleLabel: string;
+  sampleDescription: string;
+  invalidSample: string;
+  cancelSample: string;
+  applySample: string;
+  copyPath: string;
+  pathCopied: string;
+  insertPath: string;
+  openRaw: string;
+}
+
+export interface PreviewResponsePanelProps {
+  value: unknown;
+  rawResponse?: string | null;
+  onInsertDataPath?(path: string): void;
+  onSampleDataChange?(value: unknown): void;
+  messages: PreviewResponseMessages;
+}
+
+function openRawResponse(rawResponse: string) {
+  const url = URL.createObjectURL(new Blob([rawResponse], { type: "application/json" }));
+  window.open(url);
+  window.setTimeout(() => URL.revokeObjectURL(url), 60_000);
+}
+
+export function PreviewResponsePanel({
+  value,
+  rawResponse,
+  onInsertDataPath,
+  onSampleDataChange,
+  messages,
+}: PreviewResponsePanelProps) {
+  const responseJson = value == null ? "" : JSON.stringify(value, null, 2);
+  const [draft, setDraft] = useState(responseJson);
+  const [editing, setEditing] = useState(false);
+  const error = useMemo(() => {
+    if (!draft.trim()) return null;
+    try {
+      JSON.parse(draft);
+      return null;
+    } catch {
+      return messages.invalidSample;
+    }
+  }, [draft, messages.invalidSample]);
+  const edit = () => {
+    setDraft(responseJson || JSON.stringify({ name: "Sample service", status: "online", value: 42 }, null, 2));
+    setEditing(true);
+  };
+  const apply = () => {
+    if (!draft.trim() || error) return;
+    onSampleDataChange?.(JSON.parse(draft) as unknown);
+    setEditing(false);
+  };
+  return (
+    <Stack gap="xs">
+      <Group justify="space-between" wrap="wrap">
+        <Text size="xs" c="dimmed">
+          {responseJson ? messages.sampleHint : messages.empty}
+        </Text>
+        <Group gap={4}>
+          {onSampleDataChange && (
+            <Button type="button" size="compact-xs" variant="light" onClick={edit}>
+              {responseJson ? messages.editSample : messages.addSample}
+            </Button>
+          )}
+          {responseJson && (
+            <CopyButton value={responseJson}>
+              {({ copied, copy }) => (
+                <Button
+                  type="button"
+                  size="compact-xs"
+                  variant="subtle"
+                  leftSection={copied ? <IconCheck size={14} /> : <IconCopy size={14} />}
+                  onClick={copy}
+                >
+                  {copied ? messages.copied : messages.copy}
+                </Button>
+              )}
+            </CopyButton>
+          )}
+        </Group>
+      </Group>
+      <Collapse expanded={editing}>
+        <Paper p="sm" bg="var(--mantine-color-default-hover)">
+          <Stack gap="sm">
+            <Textarea
+              label={messages.sampleLabel}
+              description={messages.sampleDescription}
+              value={draft}
+              onChange={(event) => setDraft(event.currentTarget.value)}
+              error={error}
+              autosize
+              minRows={8}
+              maxRows={18}
+              styles={{ input: { fontFamily: "var(--mantine-font-family-monospace)" } }}
+            />
+            <Group justify="flex-end">
+              <Button type="button" variant="default" size="xs" onClick={() => setEditing(false)}>
+                {messages.cancelSample}
+              </Button>
+              <Button type="button" size="xs" onClick={apply} disabled={!draft.trim() || Boolean(error)}>
+                {messages.applySample}
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Collapse>
+      {responseJson ? (
+        <>
+          <ScrollArea h={360} type="auto">
+            <ResponseTree
+              value={value}
+              onInsertDataPath={onInsertDataPath}
+              labels={{ copyPath: messages.copyPath, pathCopied: messages.pathCopied, insertPath: messages.insertPath }}
+            />
+          </ScrollArea>
+          {rawResponse && (
+            <Button
+              type="button"
+              size="xs"
+              variant="subtle"
+              leftSection={<IconExternalLink size={14} />}
+              onClick={() => openRawResponse(rawResponse)}
+            >
+              {messages.openRaw}
+            </Button>
+          )}
+        </>
+      ) : (
+        <Text size="xs" c="dimmed" ta="center" py="xl">
+          {messages.empty}
+        </Text>
+      )}
+    </Stack>
+  );
+}
diff --git a/packages/custom-widgets/src/workbench/preview-utils.ts b/packages/custom-widgets/src/workbench/preview-utils.ts
new file mode 100644
index 000000000..3e4afeca5
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/preview-utils.ts
@@ -0,0 +1,79 @@
+import type { PreviewNamedRequest } from "./preview-request-panel";
+
+export const redactPreviewUrl = (value: string): string => {
+  try {
+    const url = new URL(value);
+    for (const key of url.searchParams.keys()) url.searchParams.set(key, "redacted");
+    return url.toString();
+  } catch {
+    return value;
+  }
+};
+
+export const getPreviewNamedRequests = (definition: Record<string, unknown>): PreviewNamedRequest[] => {
+  if (!definition.requests || typeof definition.requests !== "object" || Array.isArray(definition.requests)) return [];
+  return Object.entries(definition.requests as Record<string, unknown>).flatMap(([id, candidate]) => {
+    if (!candidate || typeof candidate !== "object" || Array.isArray(candidate)) return [];
+    const request = candidate as Record<string, unknown>;
+    if (
+      (request.kind !== "query" && request.kind !== "action") ||
+      typeof request.method !== "string" ||
+      typeof request.path !== "string"
+    )
+      return [];
+    return [
+      {
+        id,
+        kind: request.kind,
+        method: request.method,
+        path: request.path,
+        minimumBoardPermission: typeof request.permission === "string" ? request.permission : undefined,
+      },
+    ];
+  });
+};
+
+export type CustomWidgetAccessibilityIssue = "imageAlt" | "actionIconLabel" | "inputLabel";
+
+export function analyzeCustomWidgetAccessibility(template: string): CustomWidgetAccessibilityIssue[] {
+  const issues = new Set<CustomWidgetAccessibilityIssue>();
+  const elements = template.matchAll(/<([A-Z][A-Za-z0-9.]*)\b([^>]*)>/gu);
+  const inputComponents = new Set([
+    "Autocomplete",
+    "Checkbox",
+    "ColorInput",
+    "DateInput",
+    "FileInput",
+    "JsonInput",
+    "MultiSelect",
+    "NumberInput",
+    "PasswordInput",
+    "Radio",
+    "Select",
+    "Slider",
+    "Switch",
+    "TagsInput",
+    "TextInput",
+    "Textarea",
+    "TimeInput",
+  ]);
+  for (const match of elements) {
+    const component = match[1] ?? "";
+    const props = match[2] ?? "";
+    if (component === "Image" && !hasProp(props, "alt")) issues.add("imageAlt");
+    if (component === "ActionIcon" && !hasAnyProp(props, ["aria-label", "title"])) issues.add("actionIconLabel");
+    if (inputComponents.has(component) && !hasAnyProp(props, ["label", "aria-label", "aria-labelledby"])) {
+      issues.add("inputLabel");
+    }
+  }
+  return [...issues];
+}
+
+function hasAnyProp(props: string, names: string[]) {
+  return names.some((name) => hasProp(props, name));
+}
+
+function hasProp(props: string, name: string) {
+  const escapedName = name.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&");
+  return new RegExp(`(?:^|\\s)${escapedName}\\s*=`, "u").test(props);
+}
diff --git a/packages/custom-widgets/src/workbench/request-references.ts b/packages/custom-widgets/src/workbench/request-references.ts
new file mode 100644
index 000000000..d3b57b188
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/request-references.ts
@@ -0,0 +1,101 @@
+import { customWidgetDefinitionSchema } from "../core/custom-jsx-schema";
+import { customWidgetIdentifierSchema } from "../core/request-schema";
+import type { HomarrCustomWidgetV2 } from "../core/custom-jsx-schema";
+
+export function renameCustomWidgetRequest(
+  definition: HomarrCustomWidgetV2,
+  currentId: string,
+  nextId: string,
+): HomarrCustomWidgetV2 {
+  const parsedId = customWidgetIdentifierSchema.safeParse(nextId);
+  if (!parsedId.success) throw new Error(parsedId.error.issues[0]?.message ?? "Invalid request ID");
+  if (!definition.requests[currentId]) throw new Error(`Unknown request '${currentId}'`);
+  if (currentId !== nextId && definition.requests[nextId]) {
+    throw new Error(`Request '${nextId}' already exists`);
+  }
+
+  const candidate = {
+    ...definition,
+    requests: Object.fromEntries(
+      Object.entries(definition.requests).map(([id, request]) => [
+        id === currentId ? nextId : id,
+        { ...request, invalidates: request.invalidates?.map((entry) => (entry === currentId ? nextId : entry)) },
+      ]),
+    ),
+    options: replaceDynamicOptionRequest(definition.options, currentId, nextId),
+    template: replaceTemplateRequestReferences(definition.template, currentId, nextId),
+  };
+  return customWidgetDefinitionSchema.parse(candidate);
+}
+
+export function renameCustomWidgetOption(
+  definition: HomarrCustomWidgetV2,
+  currentName: string,
+  nextName: string,
+): HomarrCustomWidgetV2 {
+  const parsedName = customWidgetIdentifierSchema.safeParse(nextName);
+  if (!parsedName.success) throw new Error(parsedName.error.issues[0]?.message ?? "Invalid option name");
+  if (!definition.options[currentName]) throw new Error(`Unknown option '${currentName}'`);
+  if (currentName !== nextName && definition.options[nextName]) throw new Error(`Option '${nextName}' already exists`);
+
+  return customWidgetDefinitionSchema.parse({
+    ...definition,
+    options: Object.fromEntries(
+      Object.entries(definition.options).map(([name, option]) => [name === currentName ? nextName : name, option]),
+    ),
+    requests: Object.fromEntries(
+      Object.entries(definition.requests).map(([id, request]) => [
+        id,
+        {
+          ...request,
+          path: request.path.replaceAll(`{option:${currentName}}`, `{option:${nextName}}`),
+          query: replaceOptionReferences(request.query, currentName, nextName),
+          body: replaceOptionReferences(request.body, currentName, nextName),
+        },
+      ]),
+    ),
+    template: replaceTemplateOptionReferences(definition.template, currentName, nextName),
+  });
+}
+
+function replaceDynamicOptionRequest<T>(value: T, currentId: string, nextId: string): T {
+  if (Array.isArray(value)) return value.map((entry) => replaceDynamicOptionRequest(entry, currentId, nextId)) as T;
+  if (value === null || typeof value !== "object") return value;
+  const record = value as Record<string, unknown>;
+  const replaced = Object.fromEntries(
+    Object.entries(record).map(([key, child]) => [key, replaceDynamicOptionRequest(child, currentId, nextId)]),
+  );
+  if (record.request === currentId && "valuePath" in record && "labelPath" in record) replaced.request = nextId;
+  return replaced as T;
+}
+
+function replaceTemplateRequestReferences(template: string, currentId: string, nextId: string) {
+  const escaped = escapeRegExp(currentId);
+  return template
+    .replace(new RegExp(`(requestId\\s*=\\s*["'])${escaped}(["'])`, "gu"), `$1${nextId}$2`)
+    .replace(new RegExp(`((?:data|status)\\s*\\[\\s*["'])${escaped}(["']\\s*\\])`, "gu"), `$1${nextId}$2`)
+    .replace(new RegExp(`((?:data|status)\\.)${escaped}\\b`, "gu"), `$1${nextId}`);
+}
+
+function replaceOptionReferences<T>(value: T, currentName: string, nextName: string): T {
+  if (Array.isArray(value)) return value.map((entry) => replaceOptionReferences(entry, currentName, nextName)) as T;
+  if (value === null || typeof value !== "object") return value;
+  const entries = Object.entries(value as Record<string, unknown>);
+  if (entries.length === 1 && entries[0]?.[0] === "$option" && entries[0][1] === currentName) {
+    return { $option: nextName } as T;
+  }
+  return Object.fromEntries(
+    entries.map(([key, child]) => [key, replaceOptionReferences(child, currentName, nextName)]),
+  ) as T;
+}
+
+function replaceTemplateOptionReferences(template: string, currentName: string, nextName: string) {
+  const escaped = escapeRegExp(currentName);
+  return template
+    .replace(new RegExp(`(options\\s*\\[\\s*["'])${escaped}(["']\\s*\\])`, "gu"), `$1${nextName}$2`)
+    .replace(new RegExp(`(options\\.)${escaped}\\b`, "gu"), `$1${nextName}`);
+}
+
+function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&");
+}
diff --git a/packages/custom-widgets/src/workbench/response-tree.tsx b/packages/custom-widgets/src/workbench/response-tree.tsx
new file mode 100644
index 000000000..6eeabaca7
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/response-tree.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { useMemo } from "react";
+import { ActionIcon, Code, CopyButton, Group, Text, Tree, getTreeExpandedState, useTree } from "@mantine/core";
+import type { RenderTreeNodePayload, TreeNodeData } from "@mantine/core";
+import { IconCheck, IconChevronDown, IconChevronRight, IconCopy, IconPlus } from "@tabler/icons-react";
+
+export interface ResponseTreeLabels {
+  copyPath: string;
+  pathCopied: string;
+  insertPath: string;
+}
+export interface ResponseTreeProps {
+  value: unknown;
+  labels: ResponseTreeLabels;
+  onInsertDataPath?: (path: string) => void;
+}
+
+interface ResponseTreeData extends TreeNodeData {
+  path: string;
+  displayValue: string;
+}
+
+export function ResponseTree({ value, labels, onInsertDataPath }: ResponseTreeProps) {
+  const data = useMemo(() => [createResponseTreeNode(value, "data", "data")], [value]);
+  const tree = useTree({ initialExpandedState: getTreeExpandedState(data, ["data"]) });
+  return (
+    <Tree
+      data={data}
+      tree={tree}
+      levelOffset={14}
+      expandOnClick
+      selectOnClick={false}
+      renderNode={(payload) => <ResponseTreeNode {...payload} labels={labels} onInsertDataPath={onInsertDataPath} />}
+    />
+  );
+}
+
+function ResponseTreeNode({
+  node,
+  expanded,
+  hasChildren,
+  elementProps,
+  labels,
+  onInsertDataPath,
+}: RenderTreeNodePayload & { labels: ResponseTreeLabels; onInsertDataPath?: (path: string) => void }) {
+  const responseNode = node as ResponseTreeData;
+  return (
+    <Group {...elementProps} gap={4} wrap="nowrap" mih={28} className="response-tree-row">
+      <div style={{ width: 16, flexShrink: 0 }}>
+        {hasChildren && (expanded ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />)}
+      </div>
+      <Code style={{ flex: "0 1 auto", overflow: "hidden", textOverflow: "ellipsis", fontSize: 11 }}>
+        {responseNode.label}
+      </Code>
+      <Text size="xs" c="dimmed" truncate style={{ flex: 1 }}>
+        {responseNode.displayValue}
+      </Text>
+      <Group gap={2} wrap="nowrap" className="response-tree-actions">
+        <CopyButton value={responseNode.path}>
+          {({ copied, copy }) => (
+            <ActionIcon
+              type="button"
+              variant="subtle"
+              color={copied ? "green" : "gray"}
+              size={24}
+              aria-label={copied ? labels.pathCopied : labels.copyPath}
+              onClick={(event) => {
+                event.stopPropagation();
+                copy();
+              }}
+            >
+              {copied ? <IconCheck size={14} /> : <IconCopy size={14} />}
+            </ActionIcon>
+          )}
+        </CopyButton>
+        {onInsertDataPath && (
+          <ActionIcon
+            type="button"
+            variant="subtle"
+            size={24}
+            aria-label={labels.insertPath}
+            onClick={(event) => {
+              event.stopPropagation();
+              onInsertDataPath(responseNode.path);
+            }}
+          >
+            <IconPlus size={14} />
+          </ActionIcon>
+        )}
+      </Group>
+    </Group>
+  );
+}
+
+export function createResponseTreeNode(value: unknown, path: string, label: string): ResponseTreeData {
+  const collection = value !== null && typeof value === "object";
+  const entries = collection ? Object.entries(value as Record<string, unknown>) : [];
+  return {
+    value: path,
+    label,
+    path,
+    displayValue: collection
+      ? Array.isArray(value)
+        ? `[${entries.length}]`
+        : `{${entries.length}}`
+      : formatValue(value),
+    children: entries.map(([key, child]) =>
+      createResponseTreeNode(child, appendDataPath(path, key, Array.isArray(value)), key),
+    ),
+  };
+}
+
+export function appendDataPath(parent: string, key: string, isArray: boolean): string {
+  if (isArray) return `${parent}[${key}]`;
+  return /^[A-Za-z_$][\w$]*$/u.test(key) ? `${parent}.${key}` : `${parent}[${JSON.stringify(key)}]`;
+}
+
+function formatValue(value: unknown): string {
+  if (typeof value === "string") return JSON.stringify(value);
+  if (value === undefined) return "undefined";
+  return String(value);
+}
diff --git a/packages/custom-widgets/src/workbench/source-setup.tsx b/packages/custom-widgets/src/workbench/source-setup.tsx
new file mode 100644
index 000000000..6c2533a30
--- /dev/null
+++ b/packages/custom-widgets/src/workbench/source-setup.tsx
@@ -0,0 +1,189 @@
+import { Alert, Badge, Checkbox, Group, PasswordInput, Select, Stack, Text, TextInput } from "@mantine/core";
+import { IconCheck, IconKey, IconServer, IconX } from "@tabler/icons-react";
+
+import type {
+  CustomWidgetSecretKind,
+  CustomWidgetSource,
+  CustomWidgetSourceSetup,
+  CustomWidgetSourceUrlIssue,
+} from "../core";
+import { getCustomWidgetSourceSetupIssue } from "../core";
+
+export interface CustomWidgetSourceSetupValue {
+  baseUrl: string;
+  networkScope: CustomWidgetSource["networkScope"];
+  urlConfirmed: boolean;
+  secrets: Partial<Record<CustomWidgetSecretKind, string>>;
+}
+
+export interface CustomWidgetSourceSetupMessages {
+  title: string;
+  description: string;
+  suggestedUrl: string;
+  baseUrl: string;
+  networkScope: string;
+  authentication: string;
+  confirmUrl: string;
+  ready: string;
+  needsUrl: string;
+  credentialsMissing: string;
+  credentialsOptional: string;
+  configured: string;
+  secret(kind: CustomWidgetSecretKind): string;
+  urlError(issue: CustomWidgetSourceUrlIssue): string;
+}
+
+export interface CustomWidgetSourceSetupPanelProps {
+  setups: CustomWidgetSourceSetup[];
+  values: Record<string, CustomWidgetSourceSetupValue>;
+  messages: CustomWidgetSourceSetupMessages;
+  onChange(sourceId: string, value: CustomWidgetSourceSetupValue): void;
+}
+
+export function createCustomWidgetSourceSetupValues(
+  setups: readonly CustomWidgetSourceSetup[],
+): Record<string, CustomWidgetSourceSetupValue> {
+  return Object.fromEntries(
+    setups.map((setup) => [
+      setup.sourceId,
+      {
+        baseUrl: setup.baseUrl,
+        networkScope: setup.networkScope,
+        urlConfirmed: !setup.requiresUrlConfirmation,
+        secrets: {} as Partial<Record<CustomWidgetSecretKind, string>>,
+      } satisfies CustomWidgetSourceSetupValue,
+    ]),
+  );
+}
+
+export function isCustomWidgetSourceSetupReady(
+  setups: readonly CustomWidgetSourceSetup[],
+  values: Record<string, CustomWidgetSourceSetupValue>,
+) {
+  return setups.every((setup) => {
+    const value = values[setup.sourceId];
+    return Boolean(value && !getCustomWidgetSourceSetupIssue(value) && value.urlConfirmed);
+  });
+}
+
+export function CustomWidgetSourceSetupPanel({
+  setups,
+  values,
+  messages,
+  onChange,
+}: CustomWidgetSourceSetupPanelProps) {
+  if (setups.length === 0) return null;
+  return (
+    <Stack gap="sm">
+      <Alert icon={<IconServer size={16} />}>
+        <Text fw={600} size="sm">
+          {messages.title}
+        </Text>
+        <Text size="sm">{messages.description}</Text>
+      </Alert>
+      {setups.map((setup) => {
+        const value = values[setup.sourceId] ?? createCustomWidgetSourceSetupValues([setup])[setup.sourceId];
+        if (!value) return null;
+        const issue = getCustomWidgetSourceSetupIssue(value);
+        const missingCredentials = setup.credentialFields.filter(
+          (field) => !field.configured && !value.secrets[field.kind]?.trim(),
+        );
+        const urlReady = !issue && value.urlConfirmed;
+        return (
+          <Stack
+            key={setup.sourceId}
+            gap="sm"
+            p="md"
+            style={{
+              border: "1px solid var(--mantine-color-default-border)",
+              borderRadius: "var(--mantine-radius-md)",
+            }}
+          >
+            <Group justify="space-between" align="flex-start">
+              <div>
+                <Text fw={600}>{setup.sourceName}</Text>
+                <Text size="xs" c="dimmed">
+                  {setup.sourceId}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Badge
+                  variant="light"
+                  color={urlReady ? "green" : "red"}
+                  leftSection={urlReady ? <IconCheck size={11} /> : <IconX size={11} />}
+                >
+                  {urlReady ? messages.ready : messages.needsUrl}
+                </Badge>
+                {missingCredentials.length > 0 && (
+                  <Badge variant="light" color="yellow" leftSection={<IconKey size={11} />}>
+                    {messages.credentialsMissing}
+                  </Badge>
+                )}
+              </Group>
+            </Group>
+            <Text size="xs" c="dimmed">
+              {messages.suggestedUrl}: {setup.suggestedBaseUrl}
+            </Text>
+            <TextInput
+              label={messages.baseUrl}
+              type="url"
+              value={value.baseUrl}
+              error={issue ? messages.urlError(issue) : undefined}
+              onChange={(event) =>
+                onChange(setup.sourceId, { ...value, baseUrl: event.currentTarget.value, urlConfirmed: true })
+              }
+            />
+            <Group grow align="start">
+              <Select
+                label={messages.networkScope}
+                data={["public", "private", "loopback"]}
+                value={value.networkScope}
+                allowDeselect={false}
+                onChange={(networkScope) =>
+                  networkScope &&
+                  onChange(setup.sourceId, {
+                    ...value,
+                    networkScope: networkScope as CustomWidgetSource["networkScope"],
+                  })
+                }
+              />
+              <TextInput label={messages.authentication} value={setup.authType} readOnly />
+            </Group>
+            {setup.requiresUrlConfirmation && value.baseUrl === setup.suggestedBaseUrl && (
+              <Checkbox
+                checked={value.urlConfirmed}
+                label={messages.confirmUrl}
+                onChange={(event) => onChange(setup.sourceId, { ...value, urlConfirmed: event.currentTarget.checked })}
+              />
+            )}
+            {setup.credentialFields.map((field) => {
+              const Input = field.kind === "username" ? TextInput : PasswordInput;
+              return (
+                <Input
+                  key={field.kind}
+                  label={messages.secret(field.kind)}
+                  description={field.destination}
+                  value={value.secrets[field.kind] ?? ""}
+                  placeholder={field.configured ? messages.configured : undefined}
+                  leftSection={<IconKey size={15} />}
+                  autoComplete="off"
+                  onChange={(event) =>
+                    onChange(setup.sourceId, {
+                      ...value,
+                      secrets: { ...value.secrets, [field.kind]: event.currentTarget.value },
+                    })
+                  }
+                />
+              );
+            })}
+            {missingCredentials.length > 0 && (
+              <Text size="xs" c="yellow">
+                {messages.credentialsOptional}
+              </Text>
+            )}
+          </Stack>
+        );
+      })}
+    </Stack>
+  );
+}
diff --git a/packages/custom-widgets/tsconfig.json b/packages/custom-widgets/tsconfig.json
new file mode 100644
index 000000000..b47061484
--- /dev/null
+++ b/packages/custom-widgets/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@homarr/tsconfig/base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/custom-widgets/vitest.config.ts b/packages/custom-widgets/vitest.config.ts
new file mode 100644
index 000000000..4d3bd0969
--- /dev/null
+++ b/packages/custom-widgets/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    clearMocks: true,
+    environment: "node",
+    include: ["src/**/*.spec.{ts,tsx}"],
+  },
+});
diff --git a/packages/db/collection.ts b/packages/db/collection.ts
index 290578898..b70418759 100644
--- a/packages/db/collection.ts
+++ b/packages/db/collection.ts
@@ -1,3 +1,4 @@
+/* eslint-disable import/namespace -- Schema tables are intentionally selected by typed runtime keys. */
 import type { InferInsertModel } from "drizzle-orm";
 
 import { objectEntries } from "@homarr/common";
@@ -6,8 +7,6 @@ import { dbEnv } from "@homarr/core/infrastructure/db/env";
 import type { HomarrDatabase, HomarrDatabaseMysql, HomarrDatabasePostgresql } from "./driver";
 import * as schema from "./schema";
 
-const schemaTables = { ...schema };
-
 type TableKey = {
   [K in keyof typeof schema]: (typeof schema)[K] extends { _: { brand: "Table" } } ? K : never;
 }[keyof typeof schema];
@@ -37,8 +36,10 @@ export const createDbInsertCollectionForTransaction = <TTableKey extends TableKe
       db.transaction((transaction) => {
         for (const [key, values] of objectEntries(context)) {
           if (values.length >= 1) {
+            // oxlint-disable-next-line import/namespace -- TableKey limits key to exported schema tables.
+            const table = schema[key];
             transaction
-              .insert(schemaTables[key])
+              .insert(table)
               .values(values as never)
               .run();
           }
@@ -52,14 +53,15 @@ export const createDbInsertCollectionForTransaction = <TTableKey extends TableKe
         for (const [key, values] of objectEntries(context)) {
           if (values.length >= 1) {
             // Below is actually the mysqlSchema when the driver is mysql
-            await transaction.insert(schemaTables[key] as never).values(values as never);
+            // oxlint-disable-next-line import/namespace -- TableKey limits key to exported schema tables.
+            const table = schema[key] as never;
+            await transaction.insert(table).values(values as never);
           }
         }
       });
     },
   };
 };
-
 export const createDbInsertCollectionWithoutTransaction = <TTableKey extends TableKey>(
   tablesInInsertOrder: TTableKey[],
 ) => {
diff --git a/packages/db/migrations/custom/0004_unify_sections_and_gutters.spec.ts b/packages/db/migrations/custom/0004_unify_sections_and_gutters.spec.ts
new file mode 100644
index 000000000..0bcff5df9
--- /dev/null
+++ b/packages/db/migrations/custom/0004_unify_sections_and_gutters.spec.ts
@@ -0,0 +1,168 @@
+/** @vitest-environment node */
+
+import { parse, stringify } from "superjson";
+import { describe, expect, test } from "vitest";
+
+import { createId } from "@homarr/common";
+import type { Database } from "@homarr/db";
+import { and, eq } from "@homarr/db";
+import { createDb } from "@homarr/db/test";
+import { containerSectionOptionsSchema } from "@homarr/validation/shared";
+
+import {
+  boards,
+  itemLayouts,
+  items,
+  layouts,
+  sectionCollapseStates,
+  sectionLayouts,
+  sections,
+  users,
+} from "../../schema";
+import { migrateLegacySectionsToContainersAsync } from "./0004_unify_sections_and_gutters";
+
+describe("legacy section migration", () => {
+  test("converts a rail category into a resizable container inside a board gutter", async () => {
+    const db = createDb();
+    const userId = createId();
+    const boardId = createId();
+    const layoutId = createId();
+    const mainRootId = createId();
+    const categoryId = createId();
+    const itemId = createId();
+
+    await db.insert(users).values({ id: userId });
+    await db.insert(boards).values({ id: boardId, name: "migration", creatorId: userId });
+    await db.insert(layouts).values({ id: layoutId, name: "Base", boardId, columnCount: 8, breakpoint: 0 });
+    await db.insert(sections).values([
+      { id: mainRootId, boardId, kind: "empty", xOffset: 0, yOffset: 0 },
+      {
+        id: categoryId,
+        boardId,
+        kind: "category" as never,
+        name: "Pinned apps",
+        xOffset: 0,
+        yOffset: 1,
+        options: stringify({
+          showLabel: false,
+          collapsible: true,
+          showOpenAll: true,
+          railPlacement: "left",
+          columnCount: 2,
+        }),
+      },
+    ]);
+    await db.insert(items).values({ id: itemId, boardId, kind: "clock" });
+    await db.insert(sectionCollapseStates).values({
+      sectionId: categoryId,
+      userId,
+      // Legacy categories stored true when the section was open.
+      collapsed: true,
+    });
+    await db.insert(itemLayouts).values({
+      itemId,
+      layoutId,
+      sectionId: categoryId,
+      xOffset: 1,
+      yOffset: 0,
+      width: 1,
+      height: 1,
+    });
+
+    await migrateLegacySectionsToContainersAsync(db as unknown as Database);
+
+    const migratedLayout = await db.query.layouts.findFirst({ where: eq(layouts.id, layoutId) });
+    expect(migratedLayout?.leftGutterColumnCount).toBe(2);
+
+    const gutterRoot = await db.query.sections.findFirst({
+      where: and(eq(sections.boardId, boardId), eq(sections.kind, "empty"), eq(sections.xOffset, -1)),
+    });
+    expect(gutterRoot).toBeDefined();
+
+    const migratedCategory = await db.query.sections.findFirst({ where: eq(sections.id, categoryId) });
+    expect(migratedCategory?.kind).toBe("container");
+    expect(containerSectionOptionsSchema.parse(parse(migratedCategory?.options ?? "{}"))).toEqual({
+      title: "Pinned apps",
+      customCssClasses: [],
+      borderColor: "",
+      showLabel: false,
+      collapsible: true,
+      showOpenAll: true,
+    });
+    const migratedCollapseState = await db.query.sectionCollapseStates.findFirst({
+      where: and(eq(sectionCollapseStates.sectionId, categoryId), eq(sectionCollapseStates.userId, userId)),
+    });
+    expect(migratedCollapseState?.collapsed).toBe(false);
+
+    const categoryLayout = await db.query.sectionLayouts.findFirst({
+      where: and(eq(sectionLayouts.sectionId, categoryId), eq(sectionLayouts.layoutId, layoutId)),
+    });
+    expect(categoryLayout).toMatchObject({
+      parentSectionId: gutterRoot?.id,
+      width: 2,
+      height: 1,
+    });
+
+    const nestedItem = await db.query.itemLayouts.findFirst({
+      where: and(eq(itemLayouts.itemId, itemId), eq(itemLayouts.layoutId, layoutId)),
+    });
+    expect(nestedItem?.sectionId).toBe(categoryId);
+  });
+
+  test("renames a dynamic section and preserves all container options and geometry", async () => {
+    const db = createDb();
+    const userId = createId();
+    const boardId = createId();
+    const layoutId = createId();
+    const rootId = createId();
+    const sectionId = createId();
+    const options = {
+      title: "Operations",
+      customCssClasses: ["dense", "accent"],
+      borderColor: "#123456",
+      showLabel: false,
+      collapsible: true,
+      showOpenAll: true,
+    };
+
+    await db.insert(users).values({ id: userId });
+    await db.insert(boards).values({ id: boardId, name: "dynamic-migration", creatorId: userId });
+    await db.insert(layouts).values({ id: layoutId, name: "Base", boardId, columnCount: 8, breakpoint: 0 });
+    await db.insert(sections).values([
+      { id: rootId, boardId, kind: "empty", xOffset: 0, yOffset: 0 },
+      {
+        id: sectionId,
+        boardId,
+        kind: "dynamic" as never,
+        options: stringify(options),
+      },
+    ]);
+    await db.insert(sectionLayouts).values({
+      sectionId,
+      layoutId,
+      parentSectionId: rootId,
+      xOffset: 2,
+      yOffset: 3,
+      width: 4,
+      height: 5,
+    });
+
+    await migrateLegacySectionsToContainersAsync(db as unknown as Database);
+    await migrateLegacySectionsToContainersAsync(db as unknown as Database);
+
+    const migrated = await db.query.sections.findFirst({ where: eq(sections.id, sectionId) });
+    expect(migrated?.kind).toBe("container");
+    expect(containerSectionOptionsSchema.parse(parse(migrated?.options ?? "{}"))).toEqual(options);
+    expect(
+      await db.query.sectionLayouts.findFirst({
+        where: and(eq(sectionLayouts.sectionId, sectionId), eq(sectionLayouts.layoutId, layoutId)),
+      }),
+    ).toMatchObject({
+      parentSectionId: rootId,
+      xOffset: 2,
+      yOffset: 3,
+      width: 4,
+      height: 5,
+    });
+  });
+});
diff --git a/packages/db/migrations/custom/0004_unify_sections_and_gutters.ts b/packages/db/migrations/custom/0004_unify_sections_and_gutters.ts
new file mode 100644
index 000000000..4b2915275
--- /dev/null
+++ b/packages/db/migrations/custom/0004_unify_sections_and_gutters.ts
@@ -0,0 +1,541 @@
+import { parse, stringify } from "superjson";
+import { z } from "zod/v4";
+
+import { createId } from "@homarr/common";
+import type { BoardLane } from "@homarr/definitions";
+import { emptySuperJSON, getRootSectionLane, rootSectionOffsets } from "@homarr/definitions";
+import { containerSectionOptionsSchema } from "@homarr/validation/shared";
+
+import { and, eq, handleTransactionsAsync, inArray } from "../..";
+import type { Database } from "../..";
+import type { HomarrDatabase } from "../../driver";
+import { itemLayouts, layouts, sectionCollapseStates, sectionLayouts, sections } from "../../schema";
+
+interface MigrationPlacement {
+  id: string;
+  type: "item" | "section";
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+interface MigrationBoard {
+  items: {
+    id: string;
+    layouts: {
+      layoutId: string;
+      sectionId: string;
+      xOffset: number;
+      yOffset: number;
+      width: number;
+      height: number;
+    }[];
+  }[];
+  sections: {
+    id: string;
+    kind: string;
+    layouts: {
+      layoutId: string;
+      parentSectionId: string | null;
+      xOffset: number;
+      yOffset: number;
+      width: number;
+      height: number;
+    }[];
+  }[];
+}
+
+interface MigrationOperation {
+  applyAsync(db: Database): Promise<void>;
+  applySync(db: HomarrDatabase): void;
+}
+
+const legacyCategoryOptionsDefaults = {
+  showLabel: true,
+  collapsible: true,
+  showOpenAll: true,
+  railPlacement: "main",
+  columnCount: 2,
+} as const;
+
+const legacyCategoryOptionsSchema = z
+  .object({
+    showLabel: z.boolean().default(legacyCategoryOptionsDefaults.showLabel),
+    collapsible: z.boolean().default(legacyCategoryOptionsDefaults.collapsible),
+    showOpenAll: z.boolean().default(legacyCategoryOptionsDefaults.showOpenAll),
+    railPlacement: z.enum(["main", "left", "right"]).default(legacyCategoryOptionsDefaults.railPlacement),
+    columnCount: z.number().int().min(1).max(24).default(legacyCategoryOptionsDefaults.columnCount),
+  })
+  .default(legacyCategoryOptionsDefaults);
+
+/**
+ * Convert legacy categories and dynamic sections into durable containers.
+ * Categories were full-width roots and also doubled as side rails, so they
+ * additionally need placement and gutter migration.
+ */
+export async function migrateLegacySectionsToContainersAsync(db: Database) {
+  const existingBoards = await db.query.boards.findMany({
+    with: {
+      layouts: true,
+      sections: {
+        with: {
+          collapseStates: true,
+          layouts: true,
+        },
+      },
+      items: {
+        with: {
+          layouts: true,
+        },
+      },
+    },
+  });
+
+  let migratedSectionCount = 0;
+
+  for (const board of existingBoards) {
+    const categories = board.sections.filter((section) => (section.kind as string) === "category");
+    const legacyContainers = board.sections.filter((section) => (section.kind as string) === "dynamic");
+    if (categories.length === 0 && legacyContainers.length === 0) continue;
+    const operations: MigrationOperation[] = [];
+
+    const appendLegacyContainerOperations = () => {
+      for (const section of legacyContainers) {
+        operations.push(
+          updateSectionOperation(section.id, {
+            kind: "container",
+            xOffset: null,
+            yOffset: null,
+            name: null,
+            options: stringify(containerSectionOptionsSchema.parse(parse(section.options ?? emptySuperJSON))),
+          }),
+        );
+        migratedSectionCount += 1;
+      }
+    };
+
+    if (categories.length === 0) {
+      appendLegacyContainerOperations();
+      await executeBoardMigrationOperationsAsync(db, operations);
+      continue;
+    }
+
+    const categoryDetails = categories.map((category) => {
+      const options = legacyCategoryOptionsSchema.parse(parse(category.options ?? emptySuperJSON));
+      return {
+        category,
+        lane: options.railPlacement as BoardLane,
+        options,
+      };
+    });
+    const emptyRoots = board.sections.filter((section) => section.kind === "empty");
+    let mainRoot = emptyRoots.find((section) => getRootSectionLane(section.xOffset) === "main");
+    if (!mainRoot) {
+      const id = createId();
+      operations.push(
+        insertSectionsOperation([
+          {
+            id,
+            boardId: board.id,
+            kind: "empty",
+            xOffset: rootSectionOffsets.main,
+            yOffset: 0,
+            options: emptySuperJSON,
+          },
+        ]),
+      );
+      mainRoot = {
+        id,
+        boardId: board.id,
+        kind: "empty",
+        xOffset: rootSectionOffsets.main,
+        yOffset: 0,
+        name: null,
+        options: emptySuperJSON,
+        collapseStates: [],
+        layouts: [],
+      };
+      emptyRoots.push(mainRoot);
+    }
+
+    const rootByLane = new Map<BoardLane, (typeof emptyRoots)[number]>([["main", mainRoot]]);
+    for (const lane of ["left", "right"] as const) {
+      const existing = emptyRoots.find((section) => getRootSectionLane(section.xOffset) === lane);
+      if (existing) {
+        rootByLane.set(lane, existing);
+        continue;
+      }
+      if (!categoryDetails.some((detail) => detail.lane === lane)) continue;
+
+      const id = createId();
+      operations.push(
+        insertSectionsOperation([
+          {
+            id,
+            boardId: board.id,
+            kind: "empty",
+            xOffset: rootSectionOffsets[lane],
+            yOffset: 0,
+            options: emptySuperJSON,
+          },
+        ]),
+      );
+      rootByLane.set(lane, {
+        id,
+        boardId: board.id,
+        kind: "empty",
+        xOffset: rootSectionOffsets[lane],
+        yOffset: 0,
+        name: null,
+        options: emptySuperJSON,
+        collapseStates: [],
+        layouts: [],
+      });
+    }
+
+    for (const layout of board.layouts) {
+      const requestedLeft = Math.max(
+        0,
+        ...categoryDetails.filter((detail) => detail.lane === "left").map((detail) => detail.options.columnCount),
+      );
+      const requestedRight = Math.max(
+        0,
+        ...categoryDetails.filter((detail) => detail.lane === "right").map((detail) => detail.options.columnCount),
+      );
+      const left = Math.min(3, requestedLeft, Math.max(0, layout.columnCount - 1));
+      const right = Math.min(3, requestedRight, Math.max(0, layout.columnCount - left - 1));
+      const widths = {
+        left,
+        main: Math.max(1, layout.columnCount - left - right),
+        right,
+      } satisfies Record<BoardLane, number>;
+
+      operations.push(updateLayoutGuttersOperation(layout.id, left, right));
+
+      for (const lane of ["left", "main", "right"] as const) {
+        const targetRoot = rootByLane.get(lane);
+        const laneWidth = widths[lane];
+        if (!targetRoot || laneWidth === 0) continue;
+
+        const sourceRoots = emptyRoots
+          .filter((section) => getRootSectionLane(section.xOffset) === lane)
+          .toSorted((first, second) => (first.yOffset ?? 0) - (second.yOffset ?? 0));
+        const sourceBlocks = [
+          ...sourceRoots.map((root) => ({
+            id: root.id,
+            yOffset: root.yOffset ?? 0,
+            type: "root" as const,
+          })),
+          ...categoryDetails
+            .filter((detail) => detail.lane === lane)
+            .map((detail) => ({
+              id: detail.category.id,
+              yOffset: detail.category.yOffset ?? 0,
+              type: "category" as const,
+              detail,
+            })),
+        ].toSorted(
+          (first, second) =>
+            first.yOffset - second.yOffset ||
+            (first.type === second.type ? first.id.localeCompare(second.id) : first.type === "category" ? -1 : 1),
+        );
+
+        let nextRow = 0;
+        for (const block of sourceBlocks) {
+          if (block.type === "category") {
+            const content = getDirectPlacements(board, layout.id, block.id);
+            const packedContent = packPlacements(content, laneWidth);
+            operations.push(...persistPlacementOperations(layout.id, block.id, packedContent));
+            const height = Math.max(1, getPlacementRowCount(packedContent));
+            const existingLayout = block.detail.category.layouts.find((candidate) => candidate.layoutId === layout.id);
+            const values = {
+              sectionId: block.id,
+              layoutId: layout.id,
+              parentSectionId: targetRoot.id,
+              xOffset: 0,
+              yOffset: nextRow,
+              width: laneWidth,
+              height,
+            };
+            if (existingLayout) {
+              operations.push(updateSectionLayoutOperation(block.id, layout.id, values));
+            } else {
+              operations.push(insertSectionLayoutOperation(values));
+            }
+            nextRow += height;
+            continue;
+          }
+
+          const content = getDirectPlacements(board, layout.id, block.id);
+          const relativePackedContent = packPlacements(content, laneWidth);
+          const packedContent = relativePackedContent.map((placement) => ({
+            ...placement,
+            y: placement.y + nextRow,
+          }));
+          operations.push(...persistPlacementOperations(layout.id, targetRoot.id, packedContent));
+          nextRow += getPlacementRowCount(relativePackedContent);
+        }
+      }
+    }
+
+    for (const { category, options } of categoryDetails) {
+      const legacyCollapseStates = category.collapseStates;
+      for (const state of legacyCollapseStates) {
+        operations.push(updateCollapseStateOperation(category.id, state.userId, !state.collapsed));
+      }
+
+      operations.push(
+        updateSectionOperation(category.id, {
+          kind: "container",
+          xOffset: null,
+          yOffset: null,
+          name: null,
+          options: stringify(
+            containerSectionOptionsSchema.parse({
+              title: (category.name ?? "").slice(0, 64),
+              customCssClasses: [],
+              borderColor: "",
+              showLabel: options.showLabel,
+              collapsible: options.collapsible,
+              showOpenAll: options.showOpenAll,
+            }),
+          ),
+        }),
+      );
+      migratedSectionCount += 1;
+    }
+
+    appendLegacyContainerOperations();
+
+    const retainedRootIds = new Set(Array.from(rootByLane.values(), (root) => root.id));
+    const obsoleteRootIds = emptyRoots.filter((root) => !retainedRootIds.has(root.id)).map((root) => root.id);
+    if (obsoleteRootIds.length > 0) {
+      operations.push(deleteSectionsOperation(obsoleteRootIds));
+    }
+
+    await executeBoardMigrationOperationsAsync(db, operations);
+  }
+
+  if (migratedSectionCount > 0) {
+    console.log(`Migrated legacy sections to containers count="${migratedSectionCount}"`);
+  }
+}
+
+const getDirectPlacements = (board: MigrationBoard, layoutId: string, sectionId: string): MigrationPlacement[] => [
+  ...board.items.flatMap((item) => {
+    const layout = item.layouts.find(
+      (candidate) => candidate.layoutId === layoutId && candidate.sectionId === sectionId,
+    );
+    return layout
+      ? [
+          {
+            id: item.id,
+            type: "item" as const,
+            x: layout.xOffset,
+            y: layout.yOffset,
+            w: layout.width,
+            h: layout.height,
+          },
+        ]
+      : [];
+  }),
+  ...board.sections.flatMap((section) => {
+    if (section.kind !== "dynamic" && section.kind !== "container") return [];
+    const layout = section.layouts.find(
+      (candidate) => candidate.layoutId === layoutId && candidate.parentSectionId === sectionId,
+    );
+    return layout
+      ? [
+          {
+            id: section.id,
+            type: "section" as const,
+            x: layout.xOffset,
+            y: layout.yOffset,
+            w: layout.width,
+            h: layout.height,
+          },
+        ]
+      : [];
+  }),
+];
+
+const executeBoardMigrationOperationsAsync = async (db: Database, operations: readonly MigrationOperation[]) => {
+  await handleTransactionsAsync(db, {
+    async handleAsync(transactionDb) {
+      await transactionDb.transaction(async (transaction) => {
+        for (const operation of operations) {
+          await operation.applyAsync(transaction as unknown as Database);
+        }
+      });
+    },
+    handleSync(sqliteDb) {
+      sqliteDb.transaction((transaction) => {
+        for (const operation of operations) {
+          operation.applySync(transaction);
+        }
+      });
+    },
+  });
+};
+
+const insertSectionsOperation = (values: (typeof sections.$inferInsert)[]): MigrationOperation => ({
+  async applyAsync(db) {
+    await db.insert(sections).values(values);
+  },
+  applySync(db) {
+    db.insert(sections).values(values).run();
+  },
+});
+
+const updateLayoutGuttersOperation = (
+  layoutId: string,
+  leftGutterColumnCount: number,
+  rightGutterColumnCount: number,
+): MigrationOperation => ({
+  async applyAsync(db) {
+    await db.update(layouts).set({ leftGutterColumnCount, rightGutterColumnCount }).where(eq(layouts.id, layoutId));
+  },
+  applySync(db) {
+    db.update(layouts).set({ leftGutterColumnCount, rightGutterColumnCount }).where(eq(layouts.id, layoutId)).run();
+  },
+});
+
+const persistPlacementOperations = (
+  layoutId: string,
+  sectionId: string,
+  placements: readonly MigrationPlacement[],
+): MigrationOperation[] =>
+  placements.map((placement) => {
+    const values = {
+      xOffset: placement.x,
+      yOffset: placement.y,
+      width: placement.w,
+      height: placement.h,
+    };
+    if (placement.type === "item") {
+      return {
+        async applyAsync(db) {
+          await db
+            .update(itemLayouts)
+            .set({ ...values, sectionId })
+            .where(and(eq(itemLayouts.itemId, placement.id), eq(itemLayouts.layoutId, layoutId)));
+        },
+        applySync(db) {
+          db.update(itemLayouts)
+            .set({ ...values, sectionId })
+            .where(and(eq(itemLayouts.itemId, placement.id), eq(itemLayouts.layoutId, layoutId)))
+            .run();
+        },
+      };
+    }
+
+    return {
+      async applyAsync(db) {
+        await db
+          .update(sectionLayouts)
+          .set({ ...values, parentSectionId: sectionId })
+          .where(and(eq(sectionLayouts.sectionId, placement.id), eq(sectionLayouts.layoutId, layoutId)));
+      },
+      applySync(db) {
+        db.update(sectionLayouts)
+          .set({ ...values, parentSectionId: sectionId })
+          .where(and(eq(sectionLayouts.sectionId, placement.id), eq(sectionLayouts.layoutId, layoutId)))
+          .run();
+      },
+    };
+  });
+
+const updateSectionLayoutOperation = (
+  sectionId: string,
+  layoutId: string,
+  values: typeof sectionLayouts.$inferInsert,
+): MigrationOperation => ({
+  async applyAsync(db) {
+    await db
+      .update(sectionLayouts)
+      .set(values)
+      .where(and(eq(sectionLayouts.sectionId, sectionId), eq(sectionLayouts.layoutId, layoutId)));
+  },
+  applySync(db) {
+    db.update(sectionLayouts)
+      .set(values)
+      .where(and(eq(sectionLayouts.sectionId, sectionId), eq(sectionLayouts.layoutId, layoutId)))
+      .run();
+  },
+});
+
+const insertSectionLayoutOperation = (values: typeof sectionLayouts.$inferInsert): MigrationOperation => ({
+  async applyAsync(db) {
+    await db.insert(sectionLayouts).values(values);
+  },
+  applySync(db) {
+    db.insert(sectionLayouts).values(values).run();
+  },
+});
+
+const updateCollapseStateOperation = (sectionId: string, userId: string, collapsed: boolean): MigrationOperation => ({
+  async applyAsync(db) {
+    await db
+      .update(sectionCollapseStates)
+      .set({ collapsed })
+      .where(and(eq(sectionCollapseStates.sectionId, sectionId), eq(sectionCollapseStates.userId, userId)));
+  },
+  applySync(db) {
+    db.update(sectionCollapseStates)
+      .set({ collapsed })
+      .where(and(eq(sectionCollapseStates.sectionId, sectionId), eq(sectionCollapseStates.userId, userId)))
+      .run();
+  },
+});
+
+const updateSectionOperation = (
+  sectionId: string,
+  values: Partial<typeof sections.$inferInsert>,
+): MigrationOperation => ({
+  async applyAsync(db) {
+    await db.update(sections).set(values).where(eq(sections.id, sectionId));
+  },
+  applySync(db) {
+    db.update(sections).set(values).where(eq(sections.id, sectionId)).run();
+  },
+});
+
+const deleteSectionsOperation = (sectionIds: string[]): MigrationOperation => ({
+  async applyAsync(db) {
+    await db.delete(sections).where(inArray(sections.id, sectionIds));
+  },
+  applySync(db) {
+    db.delete(sections).where(inArray(sections.id, sectionIds)).run();
+  },
+});
+
+const packPlacements = (placements: readonly MigrationPlacement[], columnCount: number): MigrationPlacement[] => {
+  const placed: MigrationPlacement[] = [];
+  const candidates = placements
+    .map((placement) => ({
+      ...placement,
+      x: Math.min(Math.max(0, placement.x), Math.max(0, columnCount - Math.min(columnCount, placement.w))),
+      y: Math.max(0, placement.y),
+      w: Math.min(columnCount, Math.max(1, placement.w)),
+      h: Math.max(1, placement.h),
+    }))
+    .toSorted((first, second) => first.y - second.y || first.x - second.x || first.id.localeCompare(second.id));
+
+  for (const candidate of candidates) {
+    let row = 0;
+    while (placed.some((placement) => overlaps({ ...candidate, y: row }, placement))) row += 1;
+    placed.push({ ...candidate, y: row });
+  }
+
+  return placed;
+};
+
+const overlaps = (first: MigrationPlacement, second: MigrationPlacement) =>
+  first.x < second.x + second.w &&
+  first.x + first.w > second.x &&
+  first.y < second.y + second.h &&
+  first.y + first.h > second.y;
+
+const getPlacementRowCount = (placements: readonly MigrationPlacement[]) =>
+  Math.max(0, ...placements.map((placement) => placement.y + placement.h));
diff --git a/packages/db/migrations/custom/index.ts b/packages/db/migrations/custom/index.ts
index 8bcc93c32..63056a262 100644
--- a/packages/db/migrations/custom/index.ts
+++ b/packages/db/migrations/custom/index.ts
@@ -3,10 +3,12 @@ import { migrateReleaseWidgetProviderToOptionsAsync } from "./0000_release_widge
 import { migrateOpnsenseCredentialsAsync } from "./0001_opnsense_credentials";
 import { migrateAppWidgetShowDescriptionTooltipToDisplayModeAsync } from "./0002_app_widget_show_description_tooltip_to_display_mode";
 import { migrateWidgetOnlyIntegrationsToOptionsAsync } from "./0003_remove_widget_only_integrations";
+import { migrateLegacySectionsToContainersAsync } from "./0004_unify_sections_and_gutters";
 
 export const applyCustomMigrationsAsync = async (db: Database) => {
   await migrateReleaseWidgetProviderToOptionsAsync(db);
   await migrateOpnsenseCredentialsAsync(db);
   await migrateAppWidgetShowDescriptionTooltipToDisplayModeAsync(db);
   await migrateWidgetOnlyIntegrationsToOptionsAsync(db);
+  await migrateLegacySectionsToContainersAsync(db);
 };
diff --git a/packages/db/migrations/mysql/0044_custom_widget_v2_tables.sql b/packages/db/migrations/mysql/0044_custom_widget_v2_tables.sql
new file mode 100644
index 000000000..629cbbc27
--- /dev/null
+++ b/packages/db/migrations/mysql/0044_custom_widget_v2_tables.sql
@@ -0,0 +1,26 @@
+CREATE TABLE `custom_widget_v2_definition` (
+	`id` varchar(64) NOT NULL,
+	`name` varchar(256) NOT NULL,
+	`description` text,
+	`icon_url` text,
+	`sources` text NOT NULL,
+	`requests` text NOT NULL,
+	`options` text NOT NULL,
+	`template` text NOT NULL,
+	`enabled` boolean DEFAULT true NOT NULL,
+	`created_at` timestamp DEFAULT (now()) NOT NULL,
+	`updated_at` timestamp DEFAULT (now()) NOT NULL,
+	`creator_id` varchar(64),
+	CONSTRAINT `custom_widget_v2_definition_id` PRIMARY KEY(`id`)
+);--> statement-breakpoint
+CREATE TABLE `custom_widget_v2_secret` (
+	`source_id` varchar(64) NOT NULL,
+	`kind` varchar(64) NOT NULL,
+	`encrypted_value` text NOT NULL,
+	`updated_at` timestamp NOT NULL,
+	`definition_id` varchar(64) NOT NULL,
+	CONSTRAINT `custom_widget_v2_secret_definition_id_source_id_kind_pk` PRIMARY KEY(`definition_id`,`source_id`,`kind`)
+);--> statement-breakpoint
+ALTER TABLE `custom_widget_v2_definition` ADD CONSTRAINT `custom_widget_v2_definition_creator_id_user_id_fk` FOREIGN KEY (`creator_id`) REFERENCES `user`(`id`) ON DELETE set null ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE `custom_widget_v2_secret` ADD CONSTRAINT `custom_widget_v2_secret_definition_id_fk` FOREIGN KEY (`definition_id`) REFERENCES `custom_widget_v2_definition`(`id`) ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+DELETE FROM `groupPermission` WHERE `permission` IN ('custom-widget-manage', 'custom-widget-secret-write');
diff --git a/packages/db/migrations/mysql/0045_add_assistant_web_search.sql b/packages/db/migrations/mysql/0045_add_assistant_web_search.sql
deleted file mode 100644
index 2d586421f..000000000
--- a/packages/db/migrations/mysql/0045_add_assistant_web_search.sql
+++ /dev/null
@@ -1 +0,0 @@
-ALTER TABLE `assistant_configuration` ADD `web_search_enabled` boolean DEFAULT false NOT NULL;
diff --git a/packages/db/migrations/mysql/0045_shiny_sir_ram.sql b/packages/db/migrations/mysql/0045_shiny_sir_ram.sql
new file mode 100644
index 000000000..7ae4169af
--- /dev/null
+++ b/packages/db/migrations/mysql/0045_shiny_sir_ram.sql
@@ -0,0 +1,2 @@
+ALTER TABLE `layout` ADD `left_gutter_column_count` tinyint DEFAULT 0 NOT NULL;--> statement-breakpoint
+ALTER TABLE `layout` ADD `right_gutter_column_count` tinyint DEFAULT 0 NOT NULL;
\ No newline at end of file
diff --git a/packages/db/migrations/mysql/0046_long_proteus.sql b/packages/db/migrations/mysql/0046_long_proteus.sql
new file mode 100644
index 000000000..46e3c2b6b
--- /dev/null
+++ b/packages/db/migrations/mysql/0046_long_proteus.sql
@@ -0,0 +1 @@
+ALTER TABLE `layout` ADD `role` varchar(16) DEFAULT 'custom' NOT NULL;
\ No newline at end of file
diff --git a/packages/db/migrations/mysql/0044_add_assistant.sql b/packages/db/migrations/mysql/0047_lame_wallow.sql
similarity index 59%
rename from packages/db/migrations/mysql/0044_add_assistant.sql
rename to packages/db/migrations/mysql/0047_lame_wallow.sql
index 46315c4aa..2f04caba9 100644
--- a/packages/db/migrations/mysql/0044_add_assistant.sql
+++ b/packages/db/migrations/mysql/0047_lame_wallow.sql
@@ -1,40 +1,38 @@
 CREATE TABLE `assistant_configuration` (
-	`id` varchar(64) DEFAULT 'default' NOT NULL,
-	`enabled` boolean DEFAULT false NOT NULL,
-	`provider` varchar(32) DEFAULT 'openrouter' NOT NULL,
-	`base_url` varchar(2048) DEFAULT 'https://openrouter.ai/api/v1' NOT NULL,
+	`id` varchar(64) NOT NULL DEFAULT 'default',
+	`enabled` boolean NOT NULL DEFAULT false,
+	`web_search_enabled` boolean NOT NULL DEFAULT false,
+	`provider` varchar(32) NOT NULL DEFAULT 'openrouter',
+	`base_url` varchar(2048) NOT NULL DEFAULT 'https://openrouter.ai/api/v1',
 	`model_discovery_path` varchar(512) DEFAULT '/models',
 	`encrypted_api_key` text,
 	`encrypted_headers` text,
 	`model_id` varchar(256),
-	`updated_at` timestamp DEFAULT (now()) NOT NULL,
+	`updated_at` timestamp NOT NULL DEFAULT (now()),
 	CONSTRAINT `assistant_configuration_id` PRIMARY KEY(`id`)
 );
 --> statement-breakpoint
+CREATE TABLE `assistant_message` (
+	`id` varchar(128) NOT NULL,
+	`thread_id` varchar(64) NOT NULL,
+	`parent_id` varchar(128),
+	`format` varchar(64) NOT NULL DEFAULT 'ai-sdk/v6',
+	`content` mediumtext NOT NULL,
+	`created_at` timestamp NOT NULL DEFAULT (now()),
+	CONSTRAINT `assistant_message_id` PRIMARY KEY(`id`)
+);
+--> statement-breakpoint
 CREATE TABLE `assistant_thread` (
 	`id` varchar(64) NOT NULL,
 	`user_id` varchar(64) NOT NULL,
 	`title` varchar(256),
 	`model_id` varchar(256),
-	`created_at` timestamp DEFAULT (now()) NOT NULL,
-	`updated_at` timestamp DEFAULT (now()) NOT NULL,
+	`created_at` timestamp NOT NULL DEFAULT (now()),
+	`updated_at` timestamp NOT NULL DEFAULT (now()),
 	CONSTRAINT `assistant_thread_id` PRIMARY KEY(`id`)
 );
 --> statement-breakpoint
-CREATE TABLE `assistant_message` (
-	`id` varchar(128) NOT NULL,
-	`thread_id` varchar(64) NOT NULL,
-	`parent_id` varchar(128),
-	`format` varchar(64) DEFAULT 'ai-sdk/v6' NOT NULL,
-	`content` mediumtext DEFAULT ('{"json": {}}') NOT NULL,
-	`created_at` timestamp DEFAULT (now()) NOT NULL,
-	CONSTRAINT `assistant_message_id` PRIMARY KEY(`id`)
-);
---> statement-breakpoint
-ALTER TABLE `assistant_thread` ADD CONSTRAINT `assistant_thread_user_id_user_id_fk` FOREIGN KEY (`user_id`) REFERENCES `user`(`id`) ON DELETE cascade ON UPDATE no action;
---> statement-breakpoint
-ALTER TABLE `assistant_message` ADD CONSTRAINT `assistant_message_thread_id_assistant_thread_id_fk` FOREIGN KEY (`thread_id`) REFERENCES `assistant_thread`(`id`) ON DELETE cascade ON UPDATE no action;
---> statement-breakpoint
-CREATE INDEX `assistant_message__thread_id_created_at_idx` ON `assistant_message` (`thread_id`,`created_at`);
---> statement-breakpoint
-CREATE INDEX `assistant_thread__user_id_updated_at_idx` ON `assistant_thread` (`user_id`,`updated_at`);
+ALTER TABLE `assistant_message` ADD CONSTRAINT `assistant_message_thread_id_assistant_thread_id_fk` FOREIGN KEY (`thread_id`) REFERENCES `assistant_thread`(`id`) ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE `assistant_thread` ADD CONSTRAINT `assistant_thread_user_id_user_id_fk` FOREIGN KEY (`user_id`) REFERENCES `user`(`id`) ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX `assistant_message__thread_id_created_at_idx` ON `assistant_message` (`thread_id`,`created_at`);--> statement-breakpoint
+CREATE INDEX `assistant_thread__user_id_updated_at_idx` ON `assistant_thread` (`user_id`,`updated_at`);
\ No newline at end of file
diff --git a/packages/db/migrations/mysql/meta/0038_snapshot.json b/packages/db/migrations/mysql/meta/0038_snapshot.json
index 7f82bd39b..0840b2436 100644
--- a/packages/db/migrations/mysql/meta/0038_snapshot.json
+++ b/packages/db/migrations/mysql/meta/0038_snapshot.json
@@ -88,9 +88,7 @@
       "indexes": {
         "userId_idx": {
           "name": "userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -99,12 +97,8 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -112,10 +106,7 @@
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
           "name": "account_provider_provider_account_id_pk",
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ]
+          "columns": ["provider", "provider_account_id"]
         }
       },
       "uniqueConstraints": {},
@@ -152,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -165,9 +152,7 @@
       "compositePrimaryKeys": {
         "apiKey_id": {
           "name": "apiKey_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -224,9 +209,7 @@
       "compositePrimaryKeys": {
         "app_id": {
           "name": "app_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -263,12 +246,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -276,12 +255,8 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -289,11 +264,7 @@
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
           "name": "boardGroupPermission_board_id_group_id_permission_pk",
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["board_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -330,12 +301,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -343,12 +310,8 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -356,11 +319,7 @@
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
           "name": "boardUserPermission_board_id_user_id_permission_pk",
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["board_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -518,12 +477,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -531,17 +486,13 @@
       "compositePrimaryKeys": {
         "board_id": {
           "name": "board_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "board_name_unique": {
           "name": "board_name_unique",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "checkConstraint": {}
@@ -577,9 +528,7 @@
       "compositePrimaryKeys": {
         "cron_job_configuration_name": {
           "name": "cron_job_configuration_name",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "uniqueConstraints": {},
@@ -609,12 +558,8 @@
           "name": "groupMember_group_id_group_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -622,12 +567,8 @@
           "name": "groupMember_user_id_user_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -635,10 +576,7 @@
       "compositePrimaryKeys": {
         "groupMember_group_id_user_id_pk": {
           "name": "groupMember_group_id_user_id_pk",
-          "columns": [
-            "group_id",
-            "user_id"
-          ]
+          "columns": ["group_id", "user_id"]
         }
       },
       "uniqueConstraints": {},
@@ -668,12 +606,8 @@
           "name": "groupPermission_group_id_group_id_fk",
           "tableFrom": "groupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -734,12 +668,8 @@
           "name": "group_owner_id_user_id_fk",
           "tableFrom": "group",
           "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -747,12 +677,8 @@
           "name": "group_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -760,12 +686,8 @@
           "name": "group_mobile_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -773,17 +695,13 @@
       "compositePrimaryKeys": {
         "group_id": {
           "name": "group_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "group_name_unique": {
           "name": "group_name_unique",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "checkConstraint": {}
@@ -811,9 +729,7 @@
       "compositePrimaryKeys": {
         "iconRepository_id": {
           "name": "iconRepository_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -864,12 +780,8 @@
           "name": "icon_icon_repository_id_iconRepository_id_fk",
           "tableFrom": "icon",
           "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -877,9 +789,7 @@
       "compositePrimaryKeys": {
         "icon_id": {
           "name": "icon_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -916,12 +826,8 @@
           "name": "integrationGroupPermissions_integration_id_integration_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -929,12 +835,8 @@
           "name": "integrationGroupPermissions_group_id_group_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -942,11 +844,7 @@
       "compositePrimaryKeys": {
         "integration_group_permission__pk": {
           "name": "integration_group_permission__pk",
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["integration_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -976,12 +874,8 @@
           "name": "integration_item_item_id_item_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -989,12 +883,8 @@
           "name": "integration_item_integration_id_integration_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1002,10 +892,7 @@
       "compositePrimaryKeys": {
         "integration_item_item_id_integration_id_pk": {
           "name": "integration_item_item_id_integration_id_pk",
-          "columns": [
-            "item_id",
-            "integration_id"
-          ]
+          "columns": ["item_id", "integration_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1046,16 +933,12 @@
       "indexes": {
         "integration_secret__kind_idx": {
           "name": "integration_secret__kind_idx",
-          "columns": [
-            "kind"
-          ],
+          "columns": ["kind"],
           "isUnique": false
         },
         "integration_secret__updated_at_idx": {
           "name": "integration_secret__updated_at_idx",
-          "columns": [
-            "updated_at"
-          ],
+          "columns": ["updated_at"],
           "isUnique": false
         }
       },
@@ -1064,12 +947,8 @@
           "name": "integrationSecret_integration_id_integration_id_fk",
           "tableFrom": "integrationSecret",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1077,10 +956,7 @@
       "compositePrimaryKeys": {
         "integrationSecret_integration_id_kind_pk": {
           "name": "integrationSecret_integration_id_kind_pk",
-          "columns": [
-            "integration_id",
-            "kind"
-          ]
+          "columns": ["integration_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -1117,12 +993,8 @@
           "name": "integrationUserPermission_integration_id_integration_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1130,12 +1002,8 @@
           "name": "integrationUserPermission_user_id_user_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1143,11 +1011,7 @@
       "compositePrimaryKeys": {
         "integrationUserPermission_integration_id_user_id_permission_pk": {
           "name": "integrationUserPermission_integration_id_user_id_permission_pk",
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["integration_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -1195,9 +1059,7 @@
       "indexes": {
         "integration__kind_idx": {
           "name": "integration__kind_idx",
-          "columns": [
-            "kind"
-          ],
+          "columns": ["kind"],
           "isUnique": false
         }
       },
@@ -1206,12 +1068,8 @@
           "name": "integration_app_id_app_id_fk",
           "tableFrom": "integration",
           "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1219,9 +1077,7 @@
       "compositePrimaryKeys": {
         "integration_id": {
           "name": "integration_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1265,12 +1121,8 @@
           "name": "invite_creator_id_user_id_fk",
           "tableFrom": "invite",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1278,17 +1130,13 @@
       "compositePrimaryKeys": {
         "invite_id": {
           "name": "invite_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "invite_token_unique": {
           "name": "invite_token_unique",
-          "columns": [
-            "token"
-          ]
+          "columns": ["token"]
         }
       },
       "checkConstraint": {}
@@ -1352,12 +1200,8 @@
           "name": "item_layout_item_id_item_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1365,12 +1209,8 @@
           "name": "item_layout_section_id_section_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1378,12 +1218,8 @@
           "name": "item_layout_layout_id_layout_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1391,11 +1227,7 @@
       "compositePrimaryKeys": {
         "item_layout_item_id_section_id_layout_id_pk": {
           "name": "item_layout_item_id_section_id_layout_id_pk",
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["item_id", "section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1448,12 +1280,8 @@
           "name": "item_board_id_board_id_fk",
           "tableFrom": "item",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1461,9 +1289,7 @@
       "compositePrimaryKeys": {
         "item_id": {
           "name": "item_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1515,12 +1341,8 @@
           "name": "layout_board_id_board_id_fk",
           "tableFrom": "layout",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1528,9 +1350,7 @@
       "compositePrimaryKeys": {
         "layout_id": {
           "name": "layout_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1596,12 +1416,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1609,9 +1425,7 @@
       "compositePrimaryKeys": {
         "media_id": {
           "name": "media_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1647,9 +1461,7 @@
       "compositePrimaryKeys": {
         "onboarding_id": {
           "name": "onboarding_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1722,12 +1534,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1735,17 +1543,13 @@
       "compositePrimaryKeys": {
         "search_engine_id": {
           "name": "search_engine_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
-          "columns": [
-            "short"
-          ]
+          "columns": ["short"]
         }
       },
       "checkConstraint": {}
@@ -1782,12 +1586,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1795,12 +1595,8 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1808,10 +1604,7 @@
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
           "name": "section_collapse_state_user_id_section_id_pk",
-          "columns": [
-            "user_id",
-            "section_id"
-          ]
+          "columns": ["user_id", "section_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1876,12 +1669,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1889,12 +1678,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1902,12 +1687,8 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1915,10 +1696,7 @@
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
           "name": "section_layout_section_id_layout_id_pk",
-          "columns": [
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1984,12 +1762,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1997,9 +1771,7 @@
       "compositePrimaryKeys": {
         "section_id": {
           "name": "section_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2029,17 +1801,13 @@
       "compositePrimaryKeys": {
         "serverSetting_setting_key": {
           "name": "serverSetting_setting_key",
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "uniqueConstraints": {
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "checkConstraint": {}
@@ -2072,9 +1840,7 @@
       "indexes": {
         "user_id_idx": {
           "name": "user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -2083,12 +1849,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2096,9 +1858,7 @@
       "compositePrimaryKeys": {
         "session_session_token": {
           "name": "session_session_token",
-          "columns": [
-            "session_token"
-          ]
+          "columns": ["session_token"]
         }
       },
       "uniqueConstraints": {},
@@ -2225,12 +1985,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2238,12 +1994,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2251,12 +2003,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2264,9 +2012,7 @@
       "compositePrimaryKeys": {
         "user_id": {
           "name": "user_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2302,10 +2048,7 @@
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
           "name": "verificationToken_identifier_token_pk",
-          "columns": [
-            "identifier",
-            "token"
-          ]
+          "columns": ["identifier", "token"]
         }
       },
       "uniqueConstraints": {},
@@ -2341,10 +2084,7 @@
       "compositePrimaryKeys": {
         "trusted_certificate_hostname_hostname_thumbprint_pk": {
           "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ]
+          "columns": ["hostname", "thumbprint"]
         }
       },
       "uniqueConstraints": {},
@@ -2361,4 +2101,4 @@
     "tables": {},
     "indexes": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/db/migrations/mysql/meta/0040_snapshot.json b/packages/db/migrations/mysql/meta/0040_snapshot.json
index 63c597c46..a6b956765 100644
--- a/packages/db/migrations/mysql/meta/0040_snapshot.json
+++ b/packages/db/migrations/mysql/meta/0040_snapshot.json
@@ -88,9 +88,7 @@
       "indexes": {
         "userId_idx": {
           "name": "userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -99,12 +97,8 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -112,10 +106,7 @@
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
           "name": "account_provider_provider_account_id_pk",
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ]
+          "columns": ["provider", "provider_account_id"]
         }
       },
       "uniqueConstraints": {},
@@ -152,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -165,9 +152,7 @@
       "compositePrimaryKeys": {
         "apiKey_id": {
           "name": "apiKey_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -224,9 +209,7 @@
       "compositePrimaryKeys": {
         "app_id": {
           "name": "app_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -263,12 +246,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -276,12 +255,8 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -289,11 +264,7 @@
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
           "name": "boardGroupPermission_board_id_group_id_permission_pk",
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["board_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -330,12 +301,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -343,12 +310,8 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -356,11 +319,7 @@
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
           "name": "boardUserPermission_board_id_user_id_permission_pk",
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["board_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -518,12 +477,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -531,17 +486,13 @@
       "compositePrimaryKeys": {
         "board_id": {
           "name": "board_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "board_name_unique": {
           "name": "board_name_unique",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "checkConstraint": {}
@@ -577,9 +528,7 @@
       "compositePrimaryKeys": {
         "cron_job_configuration_name": {
           "name": "cron_job_configuration_name",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "uniqueConstraints": {},
@@ -706,12 +655,8 @@
           "name": "custom_widget_definition_creator_id_user_id_fk",
           "tableFrom": "custom_widget_definition",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -719,9 +664,7 @@
       "compositePrimaryKeys": {
         "custom_widget_definition_id": {
           "name": "custom_widget_definition_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -765,12 +708,8 @@
           "name": "cw_secret_definition_id_cw_definition_id_fk",
           "tableFrom": "custom_widget_secret",
           "tableTo": "custom_widget_definition",
-          "columnsFrom": [
-            "definition_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -778,10 +717,7 @@
       "compositePrimaryKeys": {
         "custom_widget_secret_definition_id_kind_pk": {
           "name": "custom_widget_secret_definition_id_kind_pk",
-          "columns": [
-            "definition_id",
-            "kind"
-          ]
+          "columns": ["definition_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -811,12 +747,8 @@
           "name": "groupMember_group_id_group_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -824,12 +756,8 @@
           "name": "groupMember_user_id_user_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -837,10 +765,7 @@
       "compositePrimaryKeys": {
         "groupMember_group_id_user_id_pk": {
           "name": "groupMember_group_id_user_id_pk",
-          "columns": [
-            "group_id",
-            "user_id"
-          ]
+          "columns": ["group_id", "user_id"]
         }
       },
       "uniqueConstraints": {},
@@ -870,12 +795,8 @@
           "name": "groupPermission_group_id_group_id_fk",
           "tableFrom": "groupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -936,12 +857,8 @@
           "name": "group_owner_id_user_id_fk",
           "tableFrom": "group",
           "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -949,12 +866,8 @@
           "name": "group_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -962,12 +875,8 @@
           "name": "group_mobile_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -975,17 +884,13 @@
       "compositePrimaryKeys": {
         "group_id": {
           "name": "group_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "group_name_unique": {
           "name": "group_name_unique",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "checkConstraint": {}
@@ -1013,9 +918,7 @@
       "compositePrimaryKeys": {
         "iconRepository_id": {
           "name": "iconRepository_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1066,12 +969,8 @@
           "name": "icon_icon_repository_id_iconRepository_id_fk",
           "tableFrom": "icon",
           "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1079,9 +978,7 @@
       "compositePrimaryKeys": {
         "icon_id": {
           "name": "icon_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1118,12 +1015,8 @@
           "name": "integrationGroupPermissions_integration_id_integration_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1131,12 +1024,8 @@
           "name": "integrationGroupPermissions_group_id_group_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1144,11 +1033,7 @@
       "compositePrimaryKeys": {
         "integration_group_permission__pk": {
           "name": "integration_group_permission__pk",
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["integration_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -1178,12 +1063,8 @@
           "name": "integration_item_item_id_item_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1191,12 +1072,8 @@
           "name": "integration_item_integration_id_integration_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1204,10 +1081,7 @@
       "compositePrimaryKeys": {
         "integration_item_item_id_integration_id_pk": {
           "name": "integration_item_item_id_integration_id_pk",
-          "columns": [
-            "item_id",
-            "integration_id"
-          ]
+          "columns": ["item_id", "integration_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1248,16 +1122,12 @@
       "indexes": {
         "integration_secret__kind_idx": {
           "name": "integration_secret__kind_idx",
-          "columns": [
-            "kind"
-          ],
+          "columns": ["kind"],
           "isUnique": false
         },
         "integration_secret__updated_at_idx": {
           "name": "integration_secret__updated_at_idx",
-          "columns": [
-            "updated_at"
-          ],
+          "columns": ["updated_at"],
           "isUnique": false
         }
       },
@@ -1266,12 +1136,8 @@
           "name": "integrationSecret_integration_id_integration_id_fk",
           "tableFrom": "integrationSecret",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1279,10 +1145,7 @@
       "compositePrimaryKeys": {
         "integrationSecret_integration_id_kind_pk": {
           "name": "integrationSecret_integration_id_kind_pk",
-          "columns": [
-            "integration_id",
-            "kind"
-          ]
+          "columns": ["integration_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -1319,12 +1182,8 @@
           "name": "integrationUserPermission_integration_id_integration_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1332,12 +1191,8 @@
           "name": "integrationUserPermission_user_id_user_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1345,11 +1200,7 @@
       "compositePrimaryKeys": {
         "integrationUserPermission_integration_id_user_id_permission_pk": {
           "name": "integrationUserPermission_integration_id_user_id_permission_pk",
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["integration_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -1397,9 +1248,7 @@
       "indexes": {
         "integration__kind_idx": {
           "name": "integration__kind_idx",
-          "columns": [
-            "kind"
-          ],
+          "columns": ["kind"],
           "isUnique": false
         }
       },
@@ -1408,12 +1257,8 @@
           "name": "integration_app_id_app_id_fk",
           "tableFrom": "integration",
           "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1421,9 +1266,7 @@
       "compositePrimaryKeys": {
         "integration_id": {
           "name": "integration_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1467,12 +1310,8 @@
           "name": "invite_creator_id_user_id_fk",
           "tableFrom": "invite",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1480,17 +1319,13 @@
       "compositePrimaryKeys": {
         "invite_id": {
           "name": "invite_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "invite_token_unique": {
           "name": "invite_token_unique",
-          "columns": [
-            "token"
-          ]
+          "columns": ["token"]
         }
       },
       "checkConstraint": {}
@@ -1554,12 +1389,8 @@
           "name": "item_layout_item_id_item_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1567,12 +1398,8 @@
           "name": "item_layout_section_id_section_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1580,12 +1407,8 @@
           "name": "item_layout_layout_id_layout_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1593,11 +1416,7 @@
       "compositePrimaryKeys": {
         "item_layout_item_id_section_id_layout_id_pk": {
           "name": "item_layout_item_id_section_id_layout_id_pk",
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["item_id", "section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1650,12 +1469,8 @@
           "name": "item_board_id_board_id_fk",
           "tableFrom": "item",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1663,9 +1478,7 @@
       "compositePrimaryKeys": {
         "item_id": {
           "name": "item_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1717,12 +1530,8 @@
           "name": "layout_board_id_board_id_fk",
           "tableFrom": "layout",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1730,9 +1539,7 @@
       "compositePrimaryKeys": {
         "layout_id": {
           "name": "layout_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1798,12 +1605,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1811,9 +1614,7 @@
       "compositePrimaryKeys": {
         "media_id": {
           "name": "media_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1849,9 +1650,7 @@
       "compositePrimaryKeys": {
         "onboarding_id": {
           "name": "onboarding_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1924,12 +1723,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1937,17 +1732,13 @@
       "compositePrimaryKeys": {
         "search_engine_id": {
           "name": "search_engine_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
-          "columns": [
-            "short"
-          ]
+          "columns": ["short"]
         }
       },
       "checkConstraint": {}
@@ -1984,12 +1775,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1997,12 +1784,8 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2010,10 +1793,7 @@
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
           "name": "section_collapse_state_user_id_section_id_pk",
-          "columns": [
-            "user_id",
-            "section_id"
-          ]
+          "columns": ["user_id", "section_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2078,12 +1858,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2091,12 +1867,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2104,12 +1876,8 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2117,10 +1885,7 @@
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
           "name": "section_layout_section_id_layout_id_pk",
-          "columns": [
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2186,12 +1951,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2199,9 +1960,7 @@
       "compositePrimaryKeys": {
         "section_id": {
           "name": "section_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2231,17 +1990,13 @@
       "compositePrimaryKeys": {
         "serverSetting_setting_key": {
           "name": "serverSetting_setting_key",
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "uniqueConstraints": {
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "checkConstraint": {}
@@ -2274,9 +2029,7 @@
       "indexes": {
         "user_id_idx": {
           "name": "user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -2285,12 +2038,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2298,9 +2047,7 @@
       "compositePrimaryKeys": {
         "session_session_token": {
           "name": "session_session_token",
-          "columns": [
-            "session_token"
-          ]
+          "columns": ["session_token"]
         }
       },
       "uniqueConstraints": {},
@@ -2443,12 +2190,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2456,12 +2199,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2469,12 +2208,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2482,9 +2217,7 @@
       "compositePrimaryKeys": {
         "user_id": {
           "name": "user_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2520,10 +2253,7 @@
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
           "name": "verificationToken_identifier_token_pk",
-          "columns": [
-            "identifier",
-            "token"
-          ]
+          "columns": ["identifier", "token"]
         }
       },
       "uniqueConstraints": {},
@@ -2559,10 +2289,7 @@
       "compositePrimaryKeys": {
         "trusted_certificate_hostname_hostname_thumbprint_pk": {
           "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ]
+          "columns": ["hostname", "thumbprint"]
         }
       },
       "uniqueConstraints": {},
@@ -2579,4 +2306,4 @@
     "tables": {},
     "indexes": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/db/migrations/mysql/meta/0041_snapshot.json b/packages/db/migrations/mysql/meta/0041_snapshot.json
index 1cbe65bde..75b97db84 100644
--- a/packages/db/migrations/mysql/meta/0041_snapshot.json
+++ b/packages/db/migrations/mysql/meta/0041_snapshot.json
@@ -88,9 +88,7 @@
       "indexes": {
         "userId_idx": {
           "name": "userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -99,12 +97,8 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -112,10 +106,7 @@
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
           "name": "account_provider_provider_account_id_pk",
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ]
+          "columns": ["provider", "provider_account_id"]
         }
       },
       "uniqueConstraints": {},
@@ -152,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -165,9 +152,7 @@
       "compositePrimaryKeys": {
         "apiKey_id": {
           "name": "apiKey_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -224,9 +209,7 @@
       "compositePrimaryKeys": {
         "app_id": {
           "name": "app_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -263,12 +246,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -276,12 +255,8 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -289,11 +264,7 @@
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
           "name": "boardGroupPermission_board_id_group_id_permission_pk",
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["board_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -330,12 +301,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -343,12 +310,8 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -356,11 +319,7 @@
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
           "name": "boardUserPermission_board_id_user_id_permission_pk",
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["board_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -518,12 +477,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -531,17 +486,13 @@
       "compositePrimaryKeys": {
         "board_id": {
           "name": "board_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "board_name_unique": {
           "name": "board_name_unique",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "checkConstraint": {}
@@ -577,9 +528,7 @@
       "compositePrimaryKeys": {
         "cron_job_configuration_name": {
           "name": "cron_job_configuration_name",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "uniqueConstraints": {},
@@ -707,12 +656,8 @@
           "name": "custom_widget_definition_creator_id_user_id_fk",
           "tableFrom": "custom_widget_definition",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -720,9 +665,7 @@
       "compositePrimaryKeys": {
         "custom_widget_definition_id": {
           "name": "custom_widget_definition_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -766,12 +709,8 @@
           "name": "cw_secret_definition_id_cw_definition_id_fk",
           "tableFrom": "custom_widget_secret",
           "tableTo": "custom_widget_definition",
-          "columnsFrom": [
-            "definition_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -779,10 +718,7 @@
       "compositePrimaryKeys": {
         "custom_widget_secret_definition_id_kind_pk": {
           "name": "custom_widget_secret_definition_id_kind_pk",
-          "columns": [
-            "definition_id",
-            "kind"
-          ]
+          "columns": ["definition_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -812,12 +748,8 @@
           "name": "groupMember_group_id_group_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -825,12 +757,8 @@
           "name": "groupMember_user_id_user_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -838,10 +766,7 @@
       "compositePrimaryKeys": {
         "groupMember_group_id_user_id_pk": {
           "name": "groupMember_group_id_user_id_pk",
-          "columns": [
-            "group_id",
-            "user_id"
-          ]
+          "columns": ["group_id", "user_id"]
         }
       },
       "uniqueConstraints": {},
@@ -871,12 +796,8 @@
           "name": "groupPermission_group_id_group_id_fk",
           "tableFrom": "groupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -937,12 +858,8 @@
           "name": "group_owner_id_user_id_fk",
           "tableFrom": "group",
           "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -950,12 +867,8 @@
           "name": "group_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -963,12 +876,8 @@
           "name": "group_mobile_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -976,17 +885,13 @@
       "compositePrimaryKeys": {
         "group_id": {
           "name": "group_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "group_name_unique": {
           "name": "group_name_unique",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "checkConstraint": {}
@@ -1014,9 +919,7 @@
       "compositePrimaryKeys": {
         "iconRepository_id": {
           "name": "iconRepository_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1067,12 +970,8 @@
           "name": "icon_icon_repository_id_iconRepository_id_fk",
           "tableFrom": "icon",
           "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1080,9 +979,7 @@
       "compositePrimaryKeys": {
         "icon_id": {
           "name": "icon_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1119,12 +1016,8 @@
           "name": "integrationGroupPermissions_integration_id_integration_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1132,12 +1025,8 @@
           "name": "integrationGroupPermissions_group_id_group_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1145,11 +1034,7 @@
       "compositePrimaryKeys": {
         "integration_group_permission__pk": {
           "name": "integration_group_permission__pk",
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["integration_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -1179,12 +1064,8 @@
           "name": "integration_item_item_id_item_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1192,12 +1073,8 @@
           "name": "integration_item_integration_id_integration_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1205,10 +1082,7 @@
       "compositePrimaryKeys": {
         "integration_item_item_id_integration_id_pk": {
           "name": "integration_item_item_id_integration_id_pk",
-          "columns": [
-            "item_id",
-            "integration_id"
-          ]
+          "columns": ["item_id", "integration_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1249,16 +1123,12 @@
       "indexes": {
         "integration_secret__kind_idx": {
           "name": "integration_secret__kind_idx",
-          "columns": [
-            "kind"
-          ],
+          "columns": ["kind"],
           "isUnique": false
         },
         "integration_secret__updated_at_idx": {
           "name": "integration_secret__updated_at_idx",
-          "columns": [
-            "updated_at"
-          ],
+          "columns": ["updated_at"],
           "isUnique": false
         }
       },
@@ -1267,12 +1137,8 @@
           "name": "integrationSecret_integration_id_integration_id_fk",
           "tableFrom": "integrationSecret",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1280,10 +1146,7 @@
       "compositePrimaryKeys": {
         "integrationSecret_integration_id_kind_pk": {
           "name": "integrationSecret_integration_id_kind_pk",
-          "columns": [
-            "integration_id",
-            "kind"
-          ]
+          "columns": ["integration_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -1320,12 +1183,8 @@
           "name": "integrationUserPermission_integration_id_integration_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1333,12 +1192,8 @@
           "name": "integrationUserPermission_user_id_user_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1346,11 +1201,7 @@
       "compositePrimaryKeys": {
         "integrationUserPermission_integration_id_user_id_permission_pk": {
           "name": "integrationUserPermission_integration_id_user_id_permission_pk",
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["integration_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -1398,9 +1249,7 @@
       "indexes": {
         "integration__kind_idx": {
           "name": "integration__kind_idx",
-          "columns": [
-            "kind"
-          ],
+          "columns": ["kind"],
           "isUnique": false
         }
       },
@@ -1409,12 +1258,8 @@
           "name": "integration_app_id_app_id_fk",
           "tableFrom": "integration",
           "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1422,9 +1267,7 @@
       "compositePrimaryKeys": {
         "integration_id": {
           "name": "integration_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1468,12 +1311,8 @@
           "name": "invite_creator_id_user_id_fk",
           "tableFrom": "invite",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1481,17 +1320,13 @@
       "compositePrimaryKeys": {
         "invite_id": {
           "name": "invite_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "invite_token_unique": {
           "name": "invite_token_unique",
-          "columns": [
-            "token"
-          ]
+          "columns": ["token"]
         }
       },
       "checkConstraint": {}
@@ -1555,12 +1390,8 @@
           "name": "item_layout_item_id_item_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1568,12 +1399,8 @@
           "name": "item_layout_section_id_section_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1581,12 +1408,8 @@
           "name": "item_layout_layout_id_layout_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1594,11 +1417,7 @@
       "compositePrimaryKeys": {
         "item_layout_item_id_section_id_layout_id_pk": {
           "name": "item_layout_item_id_section_id_layout_id_pk",
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["item_id", "section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1651,12 +1470,8 @@
           "name": "item_board_id_board_id_fk",
           "tableFrom": "item",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1664,9 +1479,7 @@
       "compositePrimaryKeys": {
         "item_id": {
           "name": "item_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1718,12 +1531,8 @@
           "name": "layout_board_id_board_id_fk",
           "tableFrom": "layout",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1731,9 +1540,7 @@
       "compositePrimaryKeys": {
         "layout_id": {
           "name": "layout_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1799,12 +1606,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1812,9 +1615,7 @@
       "compositePrimaryKeys": {
         "media_id": {
           "name": "media_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1850,9 +1651,7 @@
       "compositePrimaryKeys": {
         "onboarding_id": {
           "name": "onboarding_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1925,12 +1724,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1938,17 +1733,13 @@
       "compositePrimaryKeys": {
         "search_engine_id": {
           "name": "search_engine_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
-          "columns": [
-            "short"
-          ]
+          "columns": ["short"]
         }
       },
       "checkConstraint": {}
@@ -1985,12 +1776,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1998,12 +1785,8 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2011,10 +1794,7 @@
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
           "name": "section_collapse_state_user_id_section_id_pk",
-          "columns": [
-            "user_id",
-            "section_id"
-          ]
+          "columns": ["user_id", "section_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2079,12 +1859,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2092,12 +1868,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2105,12 +1877,8 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2118,10 +1886,7 @@
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
           "name": "section_layout_section_id_layout_id_pk",
-          "columns": [
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2187,12 +1952,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2200,9 +1961,7 @@
       "compositePrimaryKeys": {
         "section_id": {
           "name": "section_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2232,17 +1991,13 @@
       "compositePrimaryKeys": {
         "serverSetting_setting_key": {
           "name": "serverSetting_setting_key",
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "uniqueConstraints": {
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "checkConstraint": {}
@@ -2275,9 +2030,7 @@
       "indexes": {
         "user_id_idx": {
           "name": "user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -2286,12 +2039,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2299,9 +2048,7 @@
       "compositePrimaryKeys": {
         "session_session_token": {
           "name": "session_session_token",
-          "columns": [
-            "session_token"
-          ]
+          "columns": ["session_token"]
         }
       },
       "uniqueConstraints": {},
@@ -2444,12 +2191,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2457,12 +2200,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2470,12 +2209,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2483,9 +2218,7 @@
       "compositePrimaryKeys": {
         "user_id": {
           "name": "user_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2521,10 +2254,7 @@
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
           "name": "verificationToken_identifier_token_pk",
-          "columns": [
-            "identifier",
-            "token"
-          ]
+          "columns": ["identifier", "token"]
         }
       },
       "uniqueConstraints": {},
@@ -2560,10 +2290,7 @@
       "compositePrimaryKeys": {
         "trusted_certificate_hostname_hostname_thumbprint_pk": {
           "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ]
+          "columns": ["hostname", "thumbprint"]
         }
       },
       "uniqueConstraints": {},
diff --git a/packages/db/migrations/mysql/meta/0042_snapshot.json b/packages/db/migrations/mysql/meta/0042_snapshot.json
index d5a1910a9..ba6c70fa5 100644
--- a/packages/db/migrations/mysql/meta/0042_snapshot.json
+++ b/packages/db/migrations/mysql/meta/0042_snapshot.json
@@ -88,9 +88,7 @@
       "indexes": {
         "userId_idx": {
           "name": "userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -99,12 +97,8 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -112,10 +106,7 @@
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
           "name": "account_provider_provider_account_id_pk",
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ]
+          "columns": ["provider", "provider_account_id"]
         }
       },
       "uniqueConstraints": {},
@@ -152,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -165,9 +152,7 @@
       "compositePrimaryKeys": {
         "apiKey_id": {
           "name": "apiKey_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -224,9 +209,7 @@
       "compositePrimaryKeys": {
         "app_id": {
           "name": "app_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -263,12 +246,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -276,12 +255,8 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -289,11 +264,7 @@
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
           "name": "boardGroupPermission_board_id_group_id_permission_pk",
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["board_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -330,12 +301,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -343,12 +310,8 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -356,11 +319,7 @@
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
           "name": "boardUserPermission_board_id_user_id_permission_pk",
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["board_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -518,12 +477,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -531,17 +486,13 @@
       "compositePrimaryKeys": {
         "board_id": {
           "name": "board_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "board_name_unique": {
           "name": "board_name_unique",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "checkConstraint": {}
@@ -577,9 +528,7 @@
       "compositePrimaryKeys": {
         "cron_job_configuration_name": {
           "name": "cron_job_configuration_name",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "uniqueConstraints": {},
@@ -707,12 +656,8 @@
           "name": "custom_widget_definition_creator_id_user_id_fk",
           "tableFrom": "custom_widget_definition",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -720,9 +665,7 @@
       "compositePrimaryKeys": {
         "custom_widget_definition_id": {
           "name": "custom_widget_definition_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -766,12 +709,8 @@
           "name": "cw_secret_definition_id_cw_definition_id_fk",
           "tableFrom": "custom_widget_secret",
           "tableTo": "custom_widget_definition",
-          "columnsFrom": [
-            "definition_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -779,10 +718,7 @@
       "compositePrimaryKeys": {
         "custom_widget_secret_definition_id_kind_pk": {
           "name": "custom_widget_secret_definition_id_kind_pk",
-          "columns": [
-            "definition_id",
-            "kind"
-          ]
+          "columns": ["definition_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -812,12 +748,8 @@
           "name": "groupMember_group_id_group_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -825,12 +757,8 @@
           "name": "groupMember_user_id_user_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -838,10 +766,7 @@
       "compositePrimaryKeys": {
         "groupMember_group_id_user_id_pk": {
           "name": "groupMember_group_id_user_id_pk",
-          "columns": [
-            "group_id",
-            "user_id"
-          ]
+          "columns": ["group_id", "user_id"]
         }
       },
       "uniqueConstraints": {},
@@ -871,12 +796,8 @@
           "name": "groupPermission_group_id_group_id_fk",
           "tableFrom": "groupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -937,12 +858,8 @@
           "name": "group_owner_id_user_id_fk",
           "tableFrom": "group",
           "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -950,12 +867,8 @@
           "name": "group_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -963,12 +876,8 @@
           "name": "group_mobile_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -976,17 +885,13 @@
       "compositePrimaryKeys": {
         "group_id": {
           "name": "group_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "group_name_unique": {
           "name": "group_name_unique",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "checkConstraint": {}
@@ -1014,9 +919,7 @@
       "compositePrimaryKeys": {
         "iconRepository_id": {
           "name": "iconRepository_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1067,12 +970,8 @@
           "name": "icon_icon_repository_id_iconRepository_id_fk",
           "tableFrom": "icon",
           "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1080,9 +979,7 @@
       "compositePrimaryKeys": {
         "icon_id": {
           "name": "icon_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1119,12 +1016,8 @@
           "name": "integrationGroupPermissions_integration_id_integration_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1132,12 +1025,8 @@
           "name": "integrationGroupPermissions_group_id_group_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1145,11 +1034,7 @@
       "compositePrimaryKeys": {
         "integration_group_permission__pk": {
           "name": "integration_group_permission__pk",
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["integration_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -1179,12 +1064,8 @@
           "name": "integration_item_item_id_item_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1192,12 +1073,8 @@
           "name": "integration_item_integration_id_integration_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1205,10 +1082,7 @@
       "compositePrimaryKeys": {
         "integration_item_item_id_integration_id_pk": {
           "name": "integration_item_item_id_integration_id_pk",
-          "columns": [
-            "item_id",
-            "integration_id"
-          ]
+          "columns": ["item_id", "integration_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1249,16 +1123,12 @@
       "indexes": {
         "integration_secret__kind_idx": {
           "name": "integration_secret__kind_idx",
-          "columns": [
-            "kind"
-          ],
+          "columns": ["kind"],
           "isUnique": false
         },
         "integration_secret__updated_at_idx": {
           "name": "integration_secret__updated_at_idx",
-          "columns": [
-            "updated_at"
-          ],
+          "columns": ["updated_at"],
           "isUnique": false
         }
       },
@@ -1267,12 +1137,8 @@
           "name": "integrationSecret_integration_id_integration_id_fk",
           "tableFrom": "integrationSecret",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1280,10 +1146,7 @@
       "compositePrimaryKeys": {
         "integrationSecret_integration_id_kind_pk": {
           "name": "integrationSecret_integration_id_kind_pk",
-          "columns": [
-            "integration_id",
-            "kind"
-          ]
+          "columns": ["integration_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -1320,12 +1183,8 @@
           "name": "integrationUserPermission_integration_id_integration_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1333,12 +1192,8 @@
           "name": "integrationUserPermission_user_id_user_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1346,11 +1201,7 @@
       "compositePrimaryKeys": {
         "integrationUserPermission_integration_id_user_id_permission_pk": {
           "name": "integrationUserPermission_integration_id_user_id_permission_pk",
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["integration_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -1398,9 +1249,7 @@
       "indexes": {
         "integration__kind_idx": {
           "name": "integration__kind_idx",
-          "columns": [
-            "kind"
-          ],
+          "columns": ["kind"],
           "isUnique": false
         }
       },
@@ -1409,12 +1258,8 @@
           "name": "integration_app_id_app_id_fk",
           "tableFrom": "integration",
           "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1422,9 +1267,7 @@
       "compositePrimaryKeys": {
         "integration_id": {
           "name": "integration_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1468,12 +1311,8 @@
           "name": "invite_creator_id_user_id_fk",
           "tableFrom": "invite",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1481,17 +1320,13 @@
       "compositePrimaryKeys": {
         "invite_id": {
           "name": "invite_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "invite_token_unique": {
           "name": "invite_token_unique",
-          "columns": [
-            "token"
-          ]
+          "columns": ["token"]
         }
       },
       "checkConstraint": {}
@@ -1555,12 +1390,8 @@
           "name": "item_layout_item_id_item_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1568,12 +1399,8 @@
           "name": "item_layout_section_id_section_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1581,12 +1408,8 @@
           "name": "item_layout_layout_id_layout_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1594,11 +1417,7 @@
       "compositePrimaryKeys": {
         "item_layout_item_id_section_id_layout_id_pk": {
           "name": "item_layout_item_id_section_id_layout_id_pk",
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["item_id", "section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1651,12 +1470,8 @@
           "name": "item_board_id_board_id_fk",
           "tableFrom": "item",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1664,9 +1479,7 @@
       "compositePrimaryKeys": {
         "item_id": {
           "name": "item_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1718,12 +1531,8 @@
           "name": "layout_board_id_board_id_fk",
           "tableFrom": "layout",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1731,9 +1540,7 @@
       "compositePrimaryKeys": {
         "layout_id": {
           "name": "layout_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1799,12 +1606,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1812,9 +1615,7 @@
       "compositePrimaryKeys": {
         "media_id": {
           "name": "media_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1850,9 +1651,7 @@
       "compositePrimaryKeys": {
         "onboarding_id": {
           "name": "onboarding_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1925,12 +1724,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1938,17 +1733,13 @@
       "compositePrimaryKeys": {
         "search_engine_id": {
           "name": "search_engine_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
-          "columns": [
-            "short"
-          ]
+          "columns": ["short"]
         }
       },
       "checkConstraint": {}
@@ -1985,12 +1776,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1998,12 +1785,8 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2011,10 +1794,7 @@
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
           "name": "section_collapse_state_user_id_section_id_pk",
-          "columns": [
-            "user_id",
-            "section_id"
-          ]
+          "columns": ["user_id", "section_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2079,12 +1859,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2092,12 +1868,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2105,12 +1877,8 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2118,10 +1886,7 @@
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
           "name": "section_layout_section_id_layout_id_pk",
-          "columns": [
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2187,12 +1952,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2200,9 +1961,7 @@
       "compositePrimaryKeys": {
         "section_id": {
           "name": "section_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2232,17 +1991,13 @@
       "compositePrimaryKeys": {
         "serverSetting_setting_key": {
           "name": "serverSetting_setting_key",
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "uniqueConstraints": {
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "checkConstraint": {}
@@ -2275,9 +2030,7 @@
       "indexes": {
         "user_id_idx": {
           "name": "user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -2286,12 +2039,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2299,9 +2048,7 @@
       "compositePrimaryKeys": {
         "session_session_token": {
           "name": "session_session_token",
-          "columns": [
-            "session_token"
-          ]
+          "columns": ["session_token"]
         }
       },
       "uniqueConstraints": {},
@@ -2444,12 +2191,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2457,12 +2200,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2470,12 +2209,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2483,9 +2218,7 @@
       "compositePrimaryKeys": {
         "user_id": {
           "name": "user_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2521,10 +2254,7 @@
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
           "name": "verificationToken_identifier_token_pk",
-          "columns": [
-            "identifier",
-            "token"
-          ]
+          "columns": ["identifier", "token"]
         }
       },
       "uniqueConstraints": {},
@@ -2560,10 +2290,7 @@
       "compositePrimaryKeys": {
         "trusted_certificate_hostname_hostname_thumbprint_pk": {
           "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ]
+          "columns": ["hostname", "thumbprint"]
         }
       },
       "uniqueConstraints": {},
@@ -2607,22 +2334,15 @@
           "name": "widget_secret_item_id_item_id_fk",
           "tableFrom": "widget_secret",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "widget_secret_item_id_kind_pk": {
-          "columns": [
-            "item_id",
-            "kind"
-          ],
+          "columns": ["item_id", "kind"],
           "name": "widget_secret_item_id_kind_pk"
         }
       },
diff --git a/packages/db/migrations/mysql/meta/0044_snapshot.json b/packages/db/migrations/mysql/meta/0044_snapshot.json
index e185ae858..e9fd750e8 100644
--- a/packages/db/migrations/mysql/meta/0044_snapshot.json
+++ b/packages/db/migrations/mysql/meta/0044_snapshot.json
@@ -1,7 +1,7 @@
 {
   "version": "5",
   "dialect": "mysql",
-  "id": "9d0deec6-904d-49c4-b78b-03c5aa94ac6d",
+  "id": "e2f11bb0-59e9-4fab-8ae1-5bf764795c74",
   "prevId": "073d408e-ff80-4a57-8007-f1f32da1c71c",
   "tables": {
     "account": {
@@ -88,9 +88,7 @@
       "indexes": {
         "userId_idx": {
           "name": "userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -99,12 +97,8 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -112,10 +106,7 @@
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
           "name": "account_provider_provider_account_id_pk",
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ]
+          "columns": ["provider", "provider_account_id"]
         }
       },
       "uniqueConstraints": {},
@@ -152,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -165,9 +152,7 @@
       "compositePrimaryKeys": {
         "apiKey_id": {
           "name": "apiKey_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -224,264 +209,7 @@
       "compositePrimaryKeys": {
         "app_id": {
           "name": "app_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "assistant_configuration": {
-      "name": "assistant_configuration",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'default'"
-        },
-        "enabled": {
-          "name": "enabled",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": false
-        },
-        "provider": {
-          "name": "provider",
-          "type": "varchar(32)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'openrouter'"
-        },
-        "base_url": {
-          "name": "base_url",
-          "type": "varchar(2048)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'https://openrouter.ai/api/v1'"
-        },
-        "model_discovery_path": {
-          "name": "model_discovery_path",
-          "type": "varchar(512)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false,
-          "default": "'/models'"
-        },
-        "encrypted_api_key": {
-          "name": "encrypted_api_key",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "encrypted_headers": {
-          "name": "encrypted_headers",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "model_id": {
-          "name": "model_id",
-          "type": "varchar(256)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(now())"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {
-        "assistant_configuration_id": {
-          "name": "assistant_configuration_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "assistant_message": {
-      "name": "assistant_message",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "thread_id": {
-          "name": "thread_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "parent_id": {
-          "name": "parent_id",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "format": {
-          "name": "format",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'ai-sdk/v6'"
-        },
-        "content": {
-          "name": "content",
-          "type": "mediumtext",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'{\"json\": {}}'"
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(now())"
-        }
-      },
-      "indexes": {
-        "assistant_message__thread_id_created_at_idx": {
-          "name": "assistant_message__thread_id_created_at_idx",
-          "columns": [
-            "thread_id",
-            "created_at"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "assistant_message_thread_id_assistant_thread_id_fk": {
-          "name": "assistant_message_thread_id_assistant_thread_id_fk",
-          "tableFrom": "assistant_message",
-          "tableTo": "assistant_thread",
-          "columnsFrom": [
-            "thread_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "assistant_message_id": {
-          "name": "assistant_message_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "assistant_thread": {
-      "name": "assistant_thread",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "title": {
-          "name": "title",
-          "type": "varchar(256)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "model_id": {
-          "name": "model_id",
-          "type": "varchar(256)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(now())"
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(now())"
-        }
-      },
-      "indexes": {
-        "assistant_thread__user_id_updated_at_idx": {
-          "name": "assistant_thread__user_id_updated_at_idx",
-          "columns": [
-            "user_id",
-            "updated_at"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "assistant_thread_user_id_user_id_fk": {
-          "name": "assistant_thread_user_id_user_id_fk",
-          "tableFrom": "assistant_thread",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "assistant_thread_id": {
-          "name": "assistant_thread_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -518,12 +246,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -531,12 +255,8 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -544,11 +264,7 @@
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
           "name": "boardGroupPermission_board_id_group_id_permission_pk",
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["board_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -585,12 +301,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -598,12 +310,8 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -611,11 +319,7 @@
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
           "name": "boardUserPermission_board_id_user_id_permission_pk",
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["board_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -773,12 +477,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -786,17 +486,13 @@
       "compositePrimaryKeys": {
         "board_id": {
           "name": "board_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "board_name_unique": {
           "name": "board_name_unique",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "checkConstraint": {}
@@ -832,9 +528,1001 @@
       "compositePrimaryKeys": {
         "cron_job_configuration_name": {
           "name": "cron_job_configuration_name",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "custom_widget_v2_definition": {
+      "name": "custom_widget_v2_definition",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "sources": {
+          "name": "sources",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "requests": {
+          "name": "requests",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "template": {
+          "name": "template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_v2_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_v2_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_definition_id": {
+          "name": "custom_widget_v2_definition_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "custom_widget_v2_secret": {
+      "name": "custom_widget_v2_secret",
+      "columns": {
+        "source_id": {
+          "name": "source_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "encrypted_value": {
+          "name": "encrypted_value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_secret_definition_id_fk": {
+          "name": "custom_widget_v2_secret_definition_id_fk",
+          "tableFrom": "custom_widget_v2_secret",
+          "tableTo": "custom_widget_v2_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_secret_definition_id_source_id_kind_pk": {
+          "name": "custom_widget_v2_secret_definition_id_source_id_kind_pk",
+          "columns": ["definition_id", "source_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "groupMember": {
+      "name": "groupMember",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_group_id_group_id_fk": {
+          "name": "groupMember_group_id_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_user_id_user_id_fk": {
+          "name": "groupMember_user_id_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_group_id_user_id_pk": {
+          "name": "groupMember_group_id_user_id_pk",
+          "columns": ["group_id", "user_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "groupPermission": {
+      "name": "groupPermission",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_group_id_group_id_fk": {
+          "name": "groupPermission_group_id_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "group": {
+      "name": "group",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "position": {
+          "name": "position",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_home_board_id_board_id_fk": {
+          "name": "group_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_mobile_home_board_id_board_id_fk": {
+          "name": "group_mobile_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "group_id": {
+          "name": "group_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "group_name_unique": {
+          "name": "group_name_unique",
+          "columns": ["name"]
+        }
+      },
+      "checkConstraint": {}
+    },
+    "iconRepository": {
+      "name": "iconRepository",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(150)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "icon": {
+      "name": "icon",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(250)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "checksum": {
+          "name": "checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_repository_id": {
+          "name": "icon_repository_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_icon_repository_id_iconRepository_id_fk": {
+          "name": "icon_icon_repository_id_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "icon_id": {
+          "name": "icon_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integrationGroupPermissions": {
+      "name": "integrationGroupPermissions",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationGroupPermissions_integration_id_integration_id_fk": {
+          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationGroupPermissions_group_id_group_id_fk": {
+          "name": "integrationGroupPermissions_group_id_group_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_group_permission__pk": {
+          "name": "integration_group_permission__pk",
+          "columns": ["integration_id", "group_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integration_item": {
+      "name": "integration_item",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "name": "integration_item_item_id_integration_id_pk",
+          "columns": ["item_id", "integration_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integrationSecret": {
+      "name": "integrationSecret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": ["updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "name": "integrationSecret_integration_id_kind_pk",
+          "columns": ["integration_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integrationUserPermission": {
+      "name": "integrationUserPermission",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationUserPermission_integration_id_integration_id_fk": {
+          "name": "integrationUserPermission_integration_id_integration_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationUserPermission_user_id_user_id_fk": {
+          "name": "integrationUserPermission_user_id_user_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationUserPermission_integration_id_user_id_permission_pk": {
+          "name": "integrationUserPermission_integration_id_user_id_permission_pk",
+          "columns": ["integration_id", "user_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integration": {
+      "name": "integration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "app_id": {
+          "name": "app_id",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integration_app_id_app_id_fk": {
+          "name": "integration_app_id_app_id_fk",
+          "tableFrom": "integration",
+          "tableTo": "app",
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_id": {
+          "name": "integration_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "invite": {
+      "name": "invite",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "invite_id": {
+          "name": "invite_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "columns": ["token"]
+        }
+      },
+      "checkConstraint": {}
+    },
+    "item_layout": {
+      "name": "item_layout",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_layout_item_id_item_id_fk": {
+          "name": "item_layout_item_id_item_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_section_id_section_id_fk": {
+          "name": "item_layout_section_id_section_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_layout_id_layout_id_fk": {
+          "name": "item_layout_layout_id_layout_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_layout_item_id_section_id_layout_id_pk": {
+          "name": "item_layout_item_id_section_id_layout_id_pk",
+          "columns": ["item_id", "section_id", "layout_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_board_id_board_id_fk": {
+          "name": "item_board_id_board_id_fk",
+          "tableFrom": "item",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_id": {
+          "name": "item_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "layout": {
+      "name": "layout",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "tinyint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "breakpoint": {
+          "name": "breakpoint",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "layout_board_id_board_id_fk": {
+          "name": "layout_board_id_board_id_fk",
+          "tableFrom": "layout",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "layout_id": {
+          "name": "layout_id",
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -962,12 +1650,8 @@
           "name": "custom_widget_definition_creator_id_user_id_fk",
           "tableFrom": "custom_widget_definition",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -975,9 +1659,7 @@
       "compositePrimaryKeys": {
         "custom_widget_definition_id": {
           "name": "custom_widget_definition_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1021,12 +1703,8 @@
           "name": "cw_secret_definition_id_cw_definition_id_fk",
           "tableFrom": "custom_widget_secret",
           "tableTo": "custom_widget_definition",
-          "columnsFrom": [
-            "definition_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1034,961 +1712,7 @@
       "compositePrimaryKeys": {
         "custom_widget_secret_definition_id_kind_pk": {
           "name": "custom_widget_secret_definition_id_kind_pk",
-          "columns": [
-            "definition_id",
-            "kind"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "groupMember": {
-      "name": "groupMember",
-      "columns": {
-        "group_id": {
-          "name": "group_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "groupMember_group_id_group_id_fk": {
-          "name": "groupMember_group_id_group_id_fk",
-          "tableFrom": "groupMember",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "groupMember_user_id_user_id_fk": {
-          "name": "groupMember_user_id_user_id_fk",
-          "tableFrom": "groupMember",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "groupMember_group_id_user_id_pk": {
-          "name": "groupMember_group_id_user_id_pk",
-          "columns": [
-            "group_id",
-            "user_id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "groupPermission": {
-      "name": "groupPermission",
-      "columns": {
-        "group_id": {
-          "name": "group_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "permission": {
-          "name": "permission",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "groupPermission_group_id_group_id_fk": {
-          "name": "groupPermission_group_id_group_id_fk",
-          "tableFrom": "groupPermission",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "group": {
-      "name": "group",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "owner_id": {
-          "name": "owner_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "home_board_id": {
-          "name": "home_board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "mobile_home_board_id": {
-          "name": "mobile_home_board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "position": {
-          "name": "position",
-          "type": "smallint",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "group_owner_id_user_id_fk": {
-          "name": "group_owner_id_user_id_fk",
-          "tableFrom": "group",
-          "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        },
-        "group_home_board_id_board_id_fk": {
-          "name": "group_home_board_id_board_id_fk",
-          "tableFrom": "group",
-          "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        },
-        "group_mobile_home_board_id_board_id_fk": {
-          "name": "group_mobile_home_board_id_board_id_fk",
-          "tableFrom": "group",
-          "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "group_id": {
-          "name": "group_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {
-        "group_name_unique": {
-          "name": "group_name_unique",
-          "columns": [
-            "name"
-          ]
-        }
-      },
-      "checkConstraint": {}
-    },
-    "iconRepository": {
-      "name": "iconRepository",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "slug": {
-          "name": "slug",
-          "type": "varchar(150)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {
-        "iconRepository_id": {
-          "name": "iconRepository_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "icon": {
-      "name": "icon",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "varchar(250)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "url": {
-          "name": "url",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "checksum": {
-          "name": "checksum",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "icon_repository_id": {
-          "name": "icon_repository_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "icon_icon_repository_id_iconRepository_id_fk": {
-          "name": "icon_icon_repository_id_iconRepository_id_fk",
-          "tableFrom": "icon",
-          "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "icon_id": {
-          "name": "icon_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "integrationGroupPermissions": {
-      "name": "integrationGroupPermissions",
-      "columns": {
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "group_id": {
-          "name": "group_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "permission": {
-          "name": "permission",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integrationGroupPermissions_integration_id_integration_id_fk": {
-          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
-          "tableFrom": "integrationGroupPermissions",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integrationGroupPermissions_group_id_group_id_fk": {
-          "name": "integrationGroupPermissions_group_id_group_id_fk",
-          "tableFrom": "integrationGroupPermissions",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integration_group_permission__pk": {
-          "name": "integration_group_permission__pk",
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "integration_item": {
-      "name": "integration_item",
-      "columns": {
-        "item_id": {
-          "name": "item_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integration_item_item_id_item_id_fk": {
-          "name": "integration_item_item_id_item_id_fk",
-          "tableFrom": "integration_item",
-          "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integration_item_integration_id_integration_id_fk": {
-          "name": "integration_item_integration_id_integration_id_fk",
-          "tableFrom": "integration_item",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integration_item_item_id_integration_id_pk": {
-          "name": "integration_item_item_id_integration_id_pk",
-          "columns": [
-            "item_id",
-            "integration_id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "integrationSecret": {
-      "name": "integrationSecret",
-      "columns": {
-        "kind": {
-          "name": "kind",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "value": {
-          "name": "value",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "integration_secret__kind_idx": {
-          "name": "integration_secret__kind_idx",
-          "columns": [
-            "kind"
-          ],
-          "isUnique": false
-        },
-        "integration_secret__updated_at_idx": {
-          "name": "integration_secret__updated_at_idx",
-          "columns": [
-            "updated_at"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "integrationSecret_integration_id_integration_id_fk": {
-          "name": "integrationSecret_integration_id_integration_id_fk",
-          "tableFrom": "integrationSecret",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integrationSecret_integration_id_kind_pk": {
-          "name": "integrationSecret_integration_id_kind_pk",
-          "columns": [
-            "integration_id",
-            "kind"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "integrationUserPermission": {
-      "name": "integrationUserPermission",
-      "columns": {
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "permission": {
-          "name": "permission",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integrationUserPermission_integration_id_integration_id_fk": {
-          "name": "integrationUserPermission_integration_id_integration_id_fk",
-          "tableFrom": "integrationUserPermission",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integrationUserPermission_user_id_user_id_fk": {
-          "name": "integrationUserPermission_user_id_user_id_fk",
-          "tableFrom": "integrationUserPermission",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integrationUserPermission_integration_id_user_id_permission_pk": {
-          "name": "integrationUserPermission_integration_id_user_id_permission_pk",
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "integration": {
-      "name": "integration",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "url": {
-          "name": "url",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "kind": {
-          "name": "kind",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "app_id": {
-          "name": "app_id",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "integration__kind_idx": {
-          "name": "integration__kind_idx",
-          "columns": [
-            "kind"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "integration_app_id_app_id_fk": {
-          "name": "integration_app_id_app_id_fk",
-          "tableFrom": "integration",
-          "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integration_id": {
-          "name": "integration_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "invite": {
-      "name": "invite",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "token": {
-          "name": "token",
-          "type": "varchar(512)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "expiration_date": {
-          "name": "expiration_date",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "creator_id": {
-          "name": "creator_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "invite_creator_id_user_id_fk": {
-          "name": "invite_creator_id_user_id_fk",
-          "tableFrom": "invite",
-          "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "invite_id": {
-          "name": "invite_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {
-        "invite_token_unique": {
-          "name": "invite_token_unique",
-          "columns": [
-            "token"
-          ]
-        }
-      },
-      "checkConstraint": {}
-    },
-    "item_layout": {
-      "name": "item_layout",
-      "columns": {
-        "item_id": {
-          "name": "item_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "section_id": {
-          "name": "section_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "layout_id": {
-          "name": "layout_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "x_offset": {
-          "name": "x_offset",
-          "type": "int",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "y_offset": {
-          "name": "y_offset",
-          "type": "int",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "width": {
-          "name": "width",
-          "type": "int",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "height": {
-          "name": "height",
-          "type": "int",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "item_layout_item_id_item_id_fk": {
-          "name": "item_layout_item_id_item_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "item_layout_section_id_section_id_fk": {
-          "name": "item_layout_section_id_section_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "item_layout_layout_id_layout_id_fk": {
-          "name": "item_layout_layout_id_layout_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "item_layout_item_id_section_id_layout_id_pk": {
-          "name": "item_layout_item_id_section_id_layout_id_pk",
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "item": {
-      "name": "item",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "board_id": {
-          "name": "board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "kind": {
-          "name": "kind",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "options": {
-          "name": "options",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "('{\"json\": {}}')"
-        },
-        "advanced_options": {
-          "name": "advanced_options",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "('{\"json\": {}}')"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "item_board_id_board_id_fk": {
-          "name": "item_board_id_board_id_fk",
-          "tableFrom": "item",
-          "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "item_id": {
-          "name": "item_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "layout": {
-      "name": "layout",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "varchar(32)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "board_id": {
-          "name": "board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "column_count": {
-          "name": "column_count",
-          "type": "tinyint",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "breakpoint": {
-          "name": "breakpoint",
-          "type": "smallint",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": 0
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "layout_board_id_board_id_fk": {
-          "name": "layout_board_id_board_id_fk",
-          "tableFrom": "layout",
-          "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "layout_id": {
-          "name": "layout_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["definition_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -2054,12 +1778,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2067,9 +1787,7 @@
       "compositePrimaryKeys": {
         "media_id": {
           "name": "media_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2105,9 +1823,7 @@
       "compositePrimaryKeys": {
         "onboarding_id": {
           "name": "onboarding_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2180,12 +1896,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2193,17 +1905,13 @@
       "compositePrimaryKeys": {
         "search_engine_id": {
           "name": "search_engine_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
-          "columns": [
-            "short"
-          ]
+          "columns": ["short"]
         }
       },
       "checkConstraint": {}
@@ -2240,12 +1948,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2253,12 +1957,8 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2266,10 +1966,7 @@
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
           "name": "section_collapse_state_user_id_section_id_pk",
-          "columns": [
-            "user_id",
-            "section_id"
-          ]
+          "columns": ["user_id", "section_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2334,12 +2031,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2347,12 +2040,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2360,12 +2049,8 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2373,10 +2058,7 @@
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
           "name": "section_layout_section_id_layout_id_pk",
-          "columns": [
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2442,12 +2124,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2455,9 +2133,7 @@
       "compositePrimaryKeys": {
         "section_id": {
           "name": "section_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2487,17 +2163,13 @@
       "compositePrimaryKeys": {
         "serverSetting_setting_key": {
           "name": "serverSetting_setting_key",
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "uniqueConstraints": {
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "checkConstraint": {}
@@ -2530,9 +2202,7 @@
       "indexes": {
         "user_id_idx": {
           "name": "user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -2541,12 +2211,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2554,9 +2220,7 @@
       "compositePrimaryKeys": {
         "session_session_token": {
           "name": "session_session_token",
-          "columns": [
-            "session_token"
-          ]
+          "columns": ["session_token"]
         }
       },
       "uniqueConstraints": {},
@@ -2592,10 +2256,7 @@
       "compositePrimaryKeys": {
         "trusted_certificate_hostname_hostname_thumbprint_pk": {
           "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ]
+          "columns": ["hostname", "thumbprint"]
         }
       },
       "uniqueConstraints": {},
@@ -2746,12 +2407,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2759,12 +2416,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2772,12 +2425,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2785,9 +2434,7 @@
       "compositePrimaryKeys": {
         "user_id": {
           "name": "user_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2823,10 +2470,7 @@
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
           "name": "verificationToken_identifier_token_pk",
-          "columns": [
-            "identifier",
-            "token"
-          ]
+          "columns": ["identifier", "token"]
         }
       },
       "uniqueConstraints": {},
@@ -2870,12 +2514,8 @@
           "name": "widget_secret_item_id_item_id_fk",
           "tableFrom": "widget_secret",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2883,10 +2523,7 @@
       "compositePrimaryKeys": {
         "widget_secret_item_id_kind_pk": {
           "name": "widget_secret_item_id_kind_pk",
-          "columns": [
-            "item_id",
-            "kind"
-          ]
+          "columns": ["item_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -2903,4 +2540,4 @@
     "tables": {},
     "indexes": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/db/migrations/mysql/meta/0045_snapshot.json b/packages/db/migrations/mysql/meta/0045_snapshot.json
index 7d6c9ba24..220f3b0e2 100644
--- a/packages/db/migrations/mysql/meta/0045_snapshot.json
+++ b/packages/db/migrations/mysql/meta/0045_snapshot.json
@@ -1,8 +1,8 @@
 {
   "version": "5",
   "dialect": "mysql",
-  "id": "198c7cbc-fd76-4b1f-8acb-e3e6859204fb",
-  "prevId": "9d0deec6-904d-49c4-b78b-03c5aa94ac6d",
+  "id": "81b11351-4235-4a61-9a2f-68d01e089c42",
+  "prevId": "e2f11bb0-59e9-4fab-8ae1-5bf764795c74",
   "tables": {
     "account": {
       "name": "account",
@@ -88,9 +88,7 @@
       "indexes": {
         "userId_idx": {
           "name": "userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -99,12 +97,8 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -112,10 +106,7 @@
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
           "name": "account_provider_provider_account_id_pk",
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ]
+          "columns": ["provider", "provider_account_id"]
         }
       },
       "uniqueConstraints": {},
@@ -152,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -165,9 +152,7 @@
       "compositePrimaryKeys": {
         "apiKey_id": {
           "name": "apiKey_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -224,272 +209,7 @@
       "compositePrimaryKeys": {
         "app_id": {
           "name": "app_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "assistant_configuration": {
-      "name": "assistant_configuration",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'default'"
-        },
-        "enabled": {
-          "name": "enabled",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": false
-        },
-        "web_search_enabled": {
-          "name": "web_search_enabled",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": false
-        },
-        "provider": {
-          "name": "provider",
-          "type": "varchar(32)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'openrouter'"
-        },
-        "base_url": {
-          "name": "base_url",
-          "type": "varchar(2048)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'https://openrouter.ai/api/v1'"
-        },
-        "model_discovery_path": {
-          "name": "model_discovery_path",
-          "type": "varchar(512)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false,
-          "default": "'/models'"
-        },
-        "encrypted_api_key": {
-          "name": "encrypted_api_key",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "encrypted_headers": {
-          "name": "encrypted_headers",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "model_id": {
-          "name": "model_id",
-          "type": "varchar(256)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(now())"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {
-        "assistant_configuration_id": {
-          "name": "assistant_configuration_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "assistant_message": {
-      "name": "assistant_message",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "thread_id": {
-          "name": "thread_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "parent_id": {
-          "name": "parent_id",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "format": {
-          "name": "format",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'ai-sdk/v6'"
-        },
-        "content": {
-          "name": "content",
-          "type": "mediumtext",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'{\"json\": {}}'"
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(now())"
-        }
-      },
-      "indexes": {
-        "assistant_message__thread_id_created_at_idx": {
-          "name": "assistant_message__thread_id_created_at_idx",
-          "columns": [
-            "thread_id",
-            "created_at"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "assistant_message_thread_id_assistant_thread_id_fk": {
-          "name": "assistant_message_thread_id_assistant_thread_id_fk",
-          "tableFrom": "assistant_message",
-          "tableTo": "assistant_thread",
-          "columnsFrom": [
-            "thread_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "assistant_message_id": {
-          "name": "assistant_message_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "assistant_thread": {
-      "name": "assistant_thread",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "title": {
-          "name": "title",
-          "type": "varchar(256)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "model_id": {
-          "name": "model_id",
-          "type": "varchar(256)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(now())"
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(now())"
-        }
-      },
-      "indexes": {
-        "assistant_thread__user_id_updated_at_idx": {
-          "name": "assistant_thread__user_id_updated_at_idx",
-          "columns": [
-            "user_id",
-            "updated_at"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "assistant_thread_user_id_user_id_fk": {
-          "name": "assistant_thread_user_id_user_id_fk",
-          "tableFrom": "assistant_thread",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "assistant_thread_id": {
-          "name": "assistant_thread_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -526,12 +246,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -539,12 +255,8 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -552,11 +264,7 @@
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
           "name": "boardGroupPermission_board_id_group_id_permission_pk",
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["board_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -593,12 +301,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -606,12 +310,8 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -619,11 +319,7 @@
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
           "name": "boardUserPermission_board_id_user_id_permission_pk",
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["board_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -781,12 +477,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -794,17 +486,13 @@
       "compositePrimaryKeys": {
         "board_id": {
           "name": "board_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "board_name_unique": {
           "name": "board_name_unique",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "checkConstraint": {}
@@ -840,9 +528,1017 @@
       "compositePrimaryKeys": {
         "cron_job_configuration_name": {
           "name": "cron_job_configuration_name",
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "custom_widget_v2_definition": {
+      "name": "custom_widget_v2_definition",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "sources": {
+          "name": "sources",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "requests": {
+          "name": "requests",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "template": {
+          "name": "template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_v2_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_v2_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_definition_id": {
+          "name": "custom_widget_v2_definition_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "custom_widget_v2_secret": {
+      "name": "custom_widget_v2_secret",
+      "columns": {
+        "source_id": {
+          "name": "source_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "encrypted_value": {
+          "name": "encrypted_value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_secret_definition_id_fk": {
+          "name": "custom_widget_v2_secret_definition_id_fk",
+          "tableFrom": "custom_widget_v2_secret",
+          "tableTo": "custom_widget_v2_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_secret_definition_id_source_id_kind_pk": {
+          "name": "custom_widget_v2_secret_definition_id_source_id_kind_pk",
+          "columns": ["definition_id", "source_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "groupMember": {
+      "name": "groupMember",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_group_id_group_id_fk": {
+          "name": "groupMember_group_id_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_user_id_user_id_fk": {
+          "name": "groupMember_user_id_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_group_id_user_id_pk": {
+          "name": "groupMember_group_id_user_id_pk",
+          "columns": ["group_id", "user_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "groupPermission": {
+      "name": "groupPermission",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_group_id_group_id_fk": {
+          "name": "groupPermission_group_id_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "group": {
+      "name": "group",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "position": {
+          "name": "position",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_home_board_id_board_id_fk": {
+          "name": "group_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_mobile_home_board_id_board_id_fk": {
+          "name": "group_mobile_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "group_id": {
+          "name": "group_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "group_name_unique": {
+          "name": "group_name_unique",
+          "columns": ["name"]
+        }
+      },
+      "checkConstraint": {}
+    },
+    "iconRepository": {
+      "name": "iconRepository",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(150)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "icon": {
+      "name": "icon",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(250)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "checksum": {
+          "name": "checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_repository_id": {
+          "name": "icon_repository_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_icon_repository_id_iconRepository_id_fk": {
+          "name": "icon_icon_repository_id_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "icon_id": {
+          "name": "icon_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integrationGroupPermissions": {
+      "name": "integrationGroupPermissions",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationGroupPermissions_integration_id_integration_id_fk": {
+          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationGroupPermissions_group_id_group_id_fk": {
+          "name": "integrationGroupPermissions_group_id_group_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_group_permission__pk": {
+          "name": "integration_group_permission__pk",
+          "columns": ["integration_id", "group_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integration_item": {
+      "name": "integration_item",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "name": "integration_item_item_id_integration_id_pk",
+          "columns": ["item_id", "integration_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integrationSecret": {
+      "name": "integrationSecret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": ["updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "name": "integrationSecret_integration_id_kind_pk",
+          "columns": ["integration_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integrationUserPermission": {
+      "name": "integrationUserPermission",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationUserPermission_integration_id_integration_id_fk": {
+          "name": "integrationUserPermission_integration_id_integration_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationUserPermission_user_id_user_id_fk": {
+          "name": "integrationUserPermission_user_id_user_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationUserPermission_integration_id_user_id_permission_pk": {
+          "name": "integrationUserPermission_integration_id_user_id_permission_pk",
+          "columns": ["integration_id", "user_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integration": {
+      "name": "integration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "app_id": {
+          "name": "app_id",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integration_app_id_app_id_fk": {
+          "name": "integration_app_id_app_id_fk",
+          "tableFrom": "integration",
+          "tableTo": "app",
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_id": {
+          "name": "integration_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "invite": {
+      "name": "invite",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "invite_id": {
+          "name": "invite_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "columns": ["token"]
+        }
+      },
+      "checkConstraint": {}
+    },
+    "item_layout": {
+      "name": "item_layout",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_layout_item_id_item_id_fk": {
+          "name": "item_layout_item_id_item_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_section_id_section_id_fk": {
+          "name": "item_layout_section_id_section_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_layout_id_layout_id_fk": {
+          "name": "item_layout_layout_id_layout_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_layout_item_id_section_id_layout_id_pk": {
+          "name": "item_layout_item_id_section_id_layout_id_pk",
+          "columns": ["item_id", "section_id", "layout_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_board_id_board_id_fk": {
+          "name": "item_board_id_board_id_fk",
+          "tableFrom": "item",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_id": {
+          "name": "item_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "layout": {
+      "name": "layout",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "tinyint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "left_gutter_column_count": {
+          "name": "left_gutter_column_count",
+          "type": "tinyint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "right_gutter_column_count": {
+          "name": "right_gutter_column_count",
+          "type": "tinyint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "breakpoint": {
+          "name": "breakpoint",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "layout_board_id_board_id_fk": {
+          "name": "layout_board_id_board_id_fk",
+          "tableFrom": "layout",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "layout_id": {
+          "name": "layout_id",
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -970,12 +1666,8 @@
           "name": "custom_widget_definition_creator_id_user_id_fk",
           "tableFrom": "custom_widget_definition",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -983,9 +1675,7 @@
       "compositePrimaryKeys": {
         "custom_widget_definition_id": {
           "name": "custom_widget_definition_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1029,12 +1719,8 @@
           "name": "cw_secret_definition_id_cw_definition_id_fk",
           "tableFrom": "custom_widget_secret",
           "tableTo": "custom_widget_definition",
-          "columnsFrom": [
-            "definition_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1042,961 +1728,7 @@
       "compositePrimaryKeys": {
         "custom_widget_secret_definition_id_kind_pk": {
           "name": "custom_widget_secret_definition_id_kind_pk",
-          "columns": [
-            "definition_id",
-            "kind"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "groupMember": {
-      "name": "groupMember",
-      "columns": {
-        "group_id": {
-          "name": "group_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "groupMember_group_id_group_id_fk": {
-          "name": "groupMember_group_id_group_id_fk",
-          "tableFrom": "groupMember",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "groupMember_user_id_user_id_fk": {
-          "name": "groupMember_user_id_user_id_fk",
-          "tableFrom": "groupMember",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "groupMember_group_id_user_id_pk": {
-          "name": "groupMember_group_id_user_id_pk",
-          "columns": [
-            "group_id",
-            "user_id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "groupPermission": {
-      "name": "groupPermission",
-      "columns": {
-        "group_id": {
-          "name": "group_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "permission": {
-          "name": "permission",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "groupPermission_group_id_group_id_fk": {
-          "name": "groupPermission_group_id_group_id_fk",
-          "tableFrom": "groupPermission",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "group": {
-      "name": "group",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "owner_id": {
-          "name": "owner_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "home_board_id": {
-          "name": "home_board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "mobile_home_board_id": {
-          "name": "mobile_home_board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "position": {
-          "name": "position",
-          "type": "smallint",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "group_owner_id_user_id_fk": {
-          "name": "group_owner_id_user_id_fk",
-          "tableFrom": "group",
-          "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        },
-        "group_home_board_id_board_id_fk": {
-          "name": "group_home_board_id_board_id_fk",
-          "tableFrom": "group",
-          "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        },
-        "group_mobile_home_board_id_board_id_fk": {
-          "name": "group_mobile_home_board_id_board_id_fk",
-          "tableFrom": "group",
-          "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "group_id": {
-          "name": "group_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {
-        "group_name_unique": {
-          "name": "group_name_unique",
-          "columns": [
-            "name"
-          ]
-        }
-      },
-      "checkConstraint": {}
-    },
-    "iconRepository": {
-      "name": "iconRepository",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "slug": {
-          "name": "slug",
-          "type": "varchar(150)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {
-        "iconRepository_id": {
-          "name": "iconRepository_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "icon": {
-      "name": "icon",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "varchar(250)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "url": {
-          "name": "url",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "checksum": {
-          "name": "checksum",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "icon_repository_id": {
-          "name": "icon_repository_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "icon_icon_repository_id_iconRepository_id_fk": {
-          "name": "icon_icon_repository_id_iconRepository_id_fk",
-          "tableFrom": "icon",
-          "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "icon_id": {
-          "name": "icon_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "integrationGroupPermissions": {
-      "name": "integrationGroupPermissions",
-      "columns": {
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "group_id": {
-          "name": "group_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "permission": {
-          "name": "permission",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integrationGroupPermissions_integration_id_integration_id_fk": {
-          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
-          "tableFrom": "integrationGroupPermissions",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integrationGroupPermissions_group_id_group_id_fk": {
-          "name": "integrationGroupPermissions_group_id_group_id_fk",
-          "tableFrom": "integrationGroupPermissions",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integration_group_permission__pk": {
-          "name": "integration_group_permission__pk",
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "integration_item": {
-      "name": "integration_item",
-      "columns": {
-        "item_id": {
-          "name": "item_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integration_item_item_id_item_id_fk": {
-          "name": "integration_item_item_id_item_id_fk",
-          "tableFrom": "integration_item",
-          "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integration_item_integration_id_integration_id_fk": {
-          "name": "integration_item_integration_id_integration_id_fk",
-          "tableFrom": "integration_item",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integration_item_item_id_integration_id_pk": {
-          "name": "integration_item_item_id_integration_id_pk",
-          "columns": [
-            "item_id",
-            "integration_id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "integrationSecret": {
-      "name": "integrationSecret",
-      "columns": {
-        "kind": {
-          "name": "kind",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "value": {
-          "name": "value",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "integration_secret__kind_idx": {
-          "name": "integration_secret__kind_idx",
-          "columns": [
-            "kind"
-          ],
-          "isUnique": false
-        },
-        "integration_secret__updated_at_idx": {
-          "name": "integration_secret__updated_at_idx",
-          "columns": [
-            "updated_at"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "integrationSecret_integration_id_integration_id_fk": {
-          "name": "integrationSecret_integration_id_integration_id_fk",
-          "tableFrom": "integrationSecret",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integrationSecret_integration_id_kind_pk": {
-          "name": "integrationSecret_integration_id_kind_pk",
-          "columns": [
-            "integration_id",
-            "kind"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "integrationUserPermission": {
-      "name": "integrationUserPermission",
-      "columns": {
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "permission": {
-          "name": "permission",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integrationUserPermission_integration_id_integration_id_fk": {
-          "name": "integrationUserPermission_integration_id_integration_id_fk",
-          "tableFrom": "integrationUserPermission",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integrationUserPermission_user_id_user_id_fk": {
-          "name": "integrationUserPermission_user_id_user_id_fk",
-          "tableFrom": "integrationUserPermission",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integrationUserPermission_integration_id_user_id_permission_pk": {
-          "name": "integrationUserPermission_integration_id_user_id_permission_pk",
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "integration": {
-      "name": "integration",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "url": {
-          "name": "url",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "kind": {
-          "name": "kind",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "app_id": {
-          "name": "app_id",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "integration__kind_idx": {
-          "name": "integration__kind_idx",
-          "columns": [
-            "kind"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "integration_app_id_app_id_fk": {
-          "name": "integration_app_id_app_id_fk",
-          "tableFrom": "integration",
-          "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integration_id": {
-          "name": "integration_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "invite": {
-      "name": "invite",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "token": {
-          "name": "token",
-          "type": "varchar(512)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "expiration_date": {
-          "name": "expiration_date",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "creator_id": {
-          "name": "creator_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "invite_creator_id_user_id_fk": {
-          "name": "invite_creator_id_user_id_fk",
-          "tableFrom": "invite",
-          "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "invite_id": {
-          "name": "invite_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {
-        "invite_token_unique": {
-          "name": "invite_token_unique",
-          "columns": [
-            "token"
-          ]
-        }
-      },
-      "checkConstraint": {}
-    },
-    "item_layout": {
-      "name": "item_layout",
-      "columns": {
-        "item_id": {
-          "name": "item_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "section_id": {
-          "name": "section_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "layout_id": {
-          "name": "layout_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "x_offset": {
-          "name": "x_offset",
-          "type": "int",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "y_offset": {
-          "name": "y_offset",
-          "type": "int",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "width": {
-          "name": "width",
-          "type": "int",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "height": {
-          "name": "height",
-          "type": "int",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "item_layout_item_id_item_id_fk": {
-          "name": "item_layout_item_id_item_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "item_layout_section_id_section_id_fk": {
-          "name": "item_layout_section_id_section_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "item_layout_layout_id_layout_id_fk": {
-          "name": "item_layout_layout_id_layout_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "item_layout_item_id_section_id_layout_id_pk": {
-          "name": "item_layout_item_id_section_id_layout_id_pk",
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "item": {
-      "name": "item",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "board_id": {
-          "name": "board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "kind": {
-          "name": "kind",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "options": {
-          "name": "options",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "('{\"json\": {}}')"
-        },
-        "advanced_options": {
-          "name": "advanced_options",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "('{\"json\": {}}')"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "item_board_id_board_id_fk": {
-          "name": "item_board_id_board_id_fk",
-          "tableFrom": "item",
-          "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "item_id": {
-          "name": "item_id",
-          "columns": [
-            "id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "layout": {
-      "name": "layout",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "varchar(32)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "board_id": {
-          "name": "board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "column_count": {
-          "name": "column_count",
-          "type": "tinyint",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "breakpoint": {
-          "name": "breakpoint",
-          "type": "smallint",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": 0
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "layout_board_id_board_id_fk": {
-          "name": "layout_board_id_board_id_fk",
-          "tableFrom": "layout",
-          "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "layout_id": {
-          "name": "layout_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["definition_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -2062,12 +1794,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2075,9 +1803,7 @@
       "compositePrimaryKeys": {
         "media_id": {
           "name": "media_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2113,9 +1839,7 @@
       "compositePrimaryKeys": {
         "onboarding_id": {
           "name": "onboarding_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2188,12 +1912,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2201,17 +1921,13 @@
       "compositePrimaryKeys": {
         "search_engine_id": {
           "name": "search_engine_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
-          "columns": [
-            "short"
-          ]
+          "columns": ["short"]
         }
       },
       "checkConstraint": {}
@@ -2248,12 +1964,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2261,12 +1973,8 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2274,10 +1982,7 @@
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
           "name": "section_collapse_state_user_id_section_id_pk",
-          "columns": [
-            "user_id",
-            "section_id"
-          ]
+          "columns": ["user_id", "section_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2342,12 +2047,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2355,12 +2056,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2368,12 +2065,8 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2381,10 +2074,7 @@
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
           "name": "section_layout_section_id_layout_id_pk",
-          "columns": [
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2450,12 +2140,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2463,9 +2149,7 @@
       "compositePrimaryKeys": {
         "section_id": {
           "name": "section_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2495,17 +2179,13 @@
       "compositePrimaryKeys": {
         "serverSetting_setting_key": {
           "name": "serverSetting_setting_key",
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "uniqueConstraints": {
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "checkConstraint": {}
@@ -2538,9 +2218,7 @@
       "indexes": {
         "user_id_idx": {
           "name": "user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -2549,12 +2227,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2562,48 +2236,7 @@
       "compositePrimaryKeys": {
         "session_session_token": {
           "name": "session_session_token",
-          "columns": [
-            "session_token"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraint": {}
-    },
-    "trusted_certificate_hostname": {
-      "name": "trusted_certificate_hostname",
-      "columns": {
-        "hostname": {
-          "name": "hostname",
-          "type": "varchar(256)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "thumbprint": {
-          "name": "thumbprint",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "certificate": {
-          "name": "certificate",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {
-        "trusted_certificate_hostname_hostname_thumbprint_pk": {
-          "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ]
+          "columns": ["session_token"]
         }
       },
       "uniqueConstraints": {},
@@ -2754,12 +2387,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2767,12 +2396,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2780,12 +2405,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2793,9 +2414,7 @@
       "compositePrimaryKeys": {
         "user_id": {
           "name": "user_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -2831,10 +2450,7 @@
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
           "name": "verificationToken_identifier_token_pk",
-          "columns": [
-            "identifier",
-            "token"
-          ]
+          "columns": ["identifier", "token"]
         }
       },
       "uniqueConstraints": {},
@@ -2878,12 +2494,8 @@
           "name": "widget_secret_item_id_item_id_fk",
           "tableFrom": "widget_secret",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2891,10 +2503,43 @@
       "compositePrimaryKeys": {
         "widget_secret_item_id_kind_pk": {
           "name": "widget_secret_item_id_kind_pk",
-          "columns": [
-            "item_id",
-            "kind"
-          ]
+          "columns": ["item_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "trusted_certificate_hostname": {
+      "name": "trusted_certificate_hostname",
+      "columns": {
+        "hostname": {
+          "name": "hostname",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thumbprint": {
+          "name": "thumbprint",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "certificate": {
+          "name": "certificate",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "trusted_certificate_hostname_hostname_thumbprint_pk": {
+          "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
+          "columns": ["hostname", "thumbprint"]
         }
       },
       "uniqueConstraints": {},
@@ -2911,4 +2556,4 @@
     "tables": {},
     "indexes": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/db/migrations/mysql/meta/0046_snapshot.json b/packages/db/migrations/mysql/meta/0046_snapshot.json
new file mode 100644
index 000000000..726c1b491
--- /dev/null
+++ b/packages/db/migrations/mysql/meta/0046_snapshot.json
@@ -0,0 +1,2567 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "d1b4dec4-07ef-498d-9fe0-0c61e93c0664",
+  "prevId": "81b11351-4235-4a61-9a2f-68d01e089c42",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider_account_id": {
+          "name": "provider_account_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "token_type": {
+          "name": "token_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "session_state": {
+          "name": "session_state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "userId_idx": {
+          "name": "userId_idx",
+          "columns": ["user_id"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "account_user_id_user_id_fk": {
+          "name": "account_user_id_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "account_provider_provider_account_id_pk": {
+          "name": "account_provider_provider_account_id_pk",
+          "columns": ["provider", "provider_account_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "apiKey": {
+      "name": "apiKey",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "api_key": {
+          "name": "api_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "apiKey_user_id_user_id_fk": {
+          "name": "apiKey_user_id_user_id_fk",
+          "tableFrom": "apiKey",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "apiKey_id": {
+          "name": "apiKey_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "app": {
+      "name": "app",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "href": {
+          "name": "href",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "ping_url": {
+          "name": "ping_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "app_id": {
+          "name": "app_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "boardGroupPermission": {
+      "name": "boardGroupPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardGroupPermission_board_id_board_id_fk": {
+          "name": "boardGroupPermission_board_id_board_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardGroupPermission_group_id_group_id_fk": {
+          "name": "boardGroupPermission_group_id_group_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardGroupPermission_board_id_group_id_permission_pk": {
+          "name": "boardGroupPermission_board_id_group_id_permission_pk",
+          "columns": ["board_id", "group_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "boardUserPermission": {
+      "name": "boardUserPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardUserPermission_board_id_board_id_fk": {
+          "name": "boardUserPermission_board_id_board_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardUserPermission_user_id_user_id_fk": {
+          "name": "boardUserPermission_user_id_user_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardUserPermission_board_id_user_id_permission_pk": {
+          "name": "boardUserPermission_board_id_user_id_permission_pk",
+          "columns": ["board_id", "user_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "board": {
+      "name": "board",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "page_title": {
+          "name": "page_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "meta_title": {
+          "name": "meta_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "logo_image_url": {
+          "name": "logo_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "favicon_image_url": {
+          "name": "favicon_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_url": {
+          "name": "background_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_attachment": {
+          "name": "background_image_attachment",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('fixed')"
+        },
+        "background_image_repeat": {
+          "name": "background_image_repeat",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('no-repeat')"
+        },
+        "background_image_size": {
+          "name": "background_image_size",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('cover')"
+        },
+        "primary_color": {
+          "name": "primary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('#fa5252')"
+        },
+        "secondary_color": {
+          "name": "secondary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('#fd7e14')"
+        },
+        "opacity": {
+          "name": "opacity",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 100
+        },
+        "custom_css": {
+          "name": "custom_css",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_color": {
+          "name": "icon_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "item_radius": {
+          "name": "item_radius",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('lg')"
+        },
+        "disable_status": {
+          "name": "disable_status",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "board_creator_id_user_id_fk": {
+          "name": "board_creator_id_user_id_fk",
+          "tableFrom": "board",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "board_id": {
+          "name": "board_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "board_name_unique": {
+          "name": "board_name_unique",
+          "columns": ["name"]
+        }
+      },
+      "checkConstraint": {}
+    },
+    "cron_job_configuration": {
+      "name": "cron_job_configuration",
+      "columns": {
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "cron_expression": {
+          "name": "cron_expression",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_enabled": {
+          "name": "is_enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "cron_job_configuration_name": {
+          "name": "cron_job_configuration_name",
+          "columns": ["name"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "custom_widget_v2_definition": {
+      "name": "custom_widget_v2_definition",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "sources": {
+          "name": "sources",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "requests": {
+          "name": "requests",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "template": {
+          "name": "template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_v2_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_v2_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_definition_id": {
+          "name": "custom_widget_v2_definition_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "custom_widget_v2_secret": {
+      "name": "custom_widget_v2_secret",
+      "columns": {
+        "source_id": {
+          "name": "source_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "encrypted_value": {
+          "name": "encrypted_value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_secret_definition_id_fk": {
+          "name": "custom_widget_v2_secret_definition_id_fk",
+          "tableFrom": "custom_widget_v2_secret",
+          "tableTo": "custom_widget_v2_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_secret_definition_id_source_id_kind_pk": {
+          "name": "custom_widget_v2_secret_definition_id_source_id_kind_pk",
+          "columns": ["definition_id", "source_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "groupMember": {
+      "name": "groupMember",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_group_id_group_id_fk": {
+          "name": "groupMember_group_id_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_user_id_user_id_fk": {
+          "name": "groupMember_user_id_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_group_id_user_id_pk": {
+          "name": "groupMember_group_id_user_id_pk",
+          "columns": ["group_id", "user_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "groupPermission": {
+      "name": "groupPermission",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_group_id_group_id_fk": {
+          "name": "groupPermission_group_id_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "group": {
+      "name": "group",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "position": {
+          "name": "position",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_home_board_id_board_id_fk": {
+          "name": "group_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_mobile_home_board_id_board_id_fk": {
+          "name": "group_mobile_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "group_id": {
+          "name": "group_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "group_name_unique": {
+          "name": "group_name_unique",
+          "columns": ["name"]
+        }
+      },
+      "checkConstraint": {}
+    },
+    "iconRepository": {
+      "name": "iconRepository",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(150)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "icon": {
+      "name": "icon",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(250)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "checksum": {
+          "name": "checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_repository_id": {
+          "name": "icon_repository_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_icon_repository_id_iconRepository_id_fk": {
+          "name": "icon_icon_repository_id_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "icon_id": {
+          "name": "icon_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integrationGroupPermissions": {
+      "name": "integrationGroupPermissions",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationGroupPermissions_integration_id_integration_id_fk": {
+          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationGroupPermissions_group_id_group_id_fk": {
+          "name": "integrationGroupPermissions_group_id_group_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_group_permission__pk": {
+          "name": "integration_group_permission__pk",
+          "columns": ["integration_id", "group_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integration_item": {
+      "name": "integration_item",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "name": "integration_item_item_id_integration_id_pk",
+          "columns": ["item_id", "integration_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integrationSecret": {
+      "name": "integrationSecret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": ["updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "name": "integrationSecret_integration_id_kind_pk",
+          "columns": ["integration_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integrationUserPermission": {
+      "name": "integrationUserPermission",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationUserPermission_integration_id_integration_id_fk": {
+          "name": "integrationUserPermission_integration_id_integration_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationUserPermission_user_id_user_id_fk": {
+          "name": "integrationUserPermission_user_id_user_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationUserPermission_integration_id_user_id_permission_pk": {
+          "name": "integrationUserPermission_integration_id_user_id_permission_pk",
+          "columns": ["integration_id", "user_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integration": {
+      "name": "integration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "app_id": {
+          "name": "app_id",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integration_app_id_app_id_fk": {
+          "name": "integration_app_id_app_id_fk",
+          "tableFrom": "integration",
+          "tableTo": "app",
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_id": {
+          "name": "integration_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "invite": {
+      "name": "invite",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "invite_id": {
+          "name": "invite_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "columns": ["token"]
+        }
+      },
+      "checkConstraint": {}
+    },
+    "item_layout": {
+      "name": "item_layout",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_layout_item_id_item_id_fk": {
+          "name": "item_layout_item_id_item_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_section_id_section_id_fk": {
+          "name": "item_layout_section_id_section_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_layout_id_layout_id_fk": {
+          "name": "item_layout_layout_id_layout_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_layout_item_id_section_id_layout_id_pk": {
+          "name": "item_layout_item_id_section_id_layout_id_pk",
+          "columns": ["item_id", "section_id", "layout_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_board_id_board_id_fk": {
+          "name": "item_board_id_board_id_fk",
+          "tableFrom": "item",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_id": {
+          "name": "item_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "layout": {
+      "name": "layout",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "tinyint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "left_gutter_column_count": {
+          "name": "left_gutter_column_count",
+          "type": "tinyint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "right_gutter_column_count": {
+          "name": "right_gutter_column_count",
+          "type": "tinyint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "breakpoint": {
+          "name": "breakpoint",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "role": {
+          "name": "role",
+          "type": "varchar(16)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'custom'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "layout_board_id_board_id_fk": {
+          "name": "layout_board_id_board_id_fk",
+          "tableFrom": "layout",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "layout_id": {
+          "name": "layout_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "custom_widget_definition": {
+      "name": "custom_widget_definition",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "auth_type": {
+          "name": "auth_type",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'none'"
+        },
+        "header_name": {
+          "name": "header_name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "method": {
+          "name": "method",
+          "type": "varchar(16)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'GET'"
+        },
+        "request_body": {
+          "name": "request_body",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "display_type": {
+          "name": "display_type",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'singleValue'"
+        },
+        "display_config": {
+          "name": "display_config",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_definition_id": {
+          "name": "custom_widget_definition_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "custom_widget_secret": {
+      "name": "custom_widget_secret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "cw_secret_definition_id_cw_definition_id_fk": {
+          "name": "cw_secret_definition_id_cw_definition_id_fk",
+          "tableFrom": "custom_widget_secret",
+          "tableTo": "custom_widget_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_secret_definition_id_kind_pk": {
+          "name": "custom_widget_secret_definition_id_kind_pk",
+          "columns": ["definition_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "media": {
+      "name": "media",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "LONGBLOB",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content_type": {
+          "name": "content_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "size": {
+          "name": "size",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "media_creator_id_user_id_fk": {
+          "name": "media_creator_id_user_id_fk",
+          "tableFrom": "media",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "media_id": {
+          "name": "media_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "onboarding": {
+      "name": "onboarding",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "step": {
+          "name": "step",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "previous_step": {
+          "name": "previous_step",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "onboarding_id": {
+          "name": "onboarding_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "search_engine": {
+      "name": "search_engine",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "short": {
+          "name": "short",
+          "type": "varchar(8)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "url_template": {
+          "name": "url_template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'generic'"
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "search_engine_integration_id_integration_id_fk": {
+          "name": "search_engine_integration_id_integration_id_fk",
+          "tableFrom": "search_engine",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "search_engine_id": {
+          "name": "search_engine_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "search_engine_short_unique": {
+          "name": "search_engine_short_unique",
+          "columns": ["short"]
+        }
+      },
+      "checkConstraint": {}
+    },
+    "section_collapse_state": {
+      "name": "section_collapse_state",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "collapsed": {
+          "name": "collapsed",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_collapse_state_user_id_user_id_fk": {
+          "name": "section_collapse_state_user_id_user_id_fk",
+          "tableFrom": "section_collapse_state",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_collapse_state_section_id_section_id_fk": {
+          "name": "section_collapse_state_section_id_section_id_fk",
+          "tableFrom": "section_collapse_state",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_collapse_state_user_id_section_id_pk": {
+          "name": "section_collapse_state_user_id_section_id_pk",
+          "columns": ["user_id", "section_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "section_layout": {
+      "name": "section_layout",
+      "columns": {
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "parent_section_id": {
+          "name": "parent_section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_layout_section_id_section_id_fk": {
+          "name": "section_layout_section_id_section_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_layout_layout_id_layout_id_fk": {
+          "name": "section_layout_layout_id_layout_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_layout_parent_section_id_section_id_fk": {
+          "name": "section_layout_parent_section_id_section_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "section",
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_layout_section_id_layout_id_pk": {
+          "name": "section_layout_section_id_layout_id_pk",
+          "columns": ["section_id", "layout_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "section": {
+      "name": "section",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_board_id_board_id_fk": {
+          "name": "section_board_id_board_id_fk",
+          "tableFrom": "section",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_id": {
+          "name": "section_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "serverSetting": {
+      "name": "serverSetting",
+      "columns": {
+        "setting_key": {
+          "name": "setting_key",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "serverSetting_setting_key": {
+          "name": "serverSetting_setting_key",
+          "columns": ["setting_key"]
+        }
+      },
+      "uniqueConstraints": {
+        "serverSetting_settingKey_unique": {
+          "name": "serverSetting_settingKey_unique",
+          "columns": ["setting_key"]
+        }
+      },
+      "checkConstraint": {}
+    },
+    "session": {
+      "name": "session",
+      "columns": {
+        "session_token": {
+          "name": "session_token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_id_idx": {
+          "name": "user_id_idx",
+          "columns": ["user_id"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "session_user_id_user_id_fk": {
+          "name": "session_user_id_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "session_session_token": {
+          "name": "session_session_token",
+          "columns": ["session_token"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "trusted_certificate_hostname": {
+      "name": "trusted_certificate_hostname",
+      "columns": {
+        "hostname": {
+          "name": "hostname",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thumbprint": {
+          "name": "thumbprint",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "certificate": {
+          "name": "certificate",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "trusted_certificate_hostname_hostname_thumbprint_pk": {
+          "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
+          "columns": ["hostname", "thumbprint"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'credentials'"
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "default_search_engine_id": {
+          "name": "default_search_engine_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "open_search_in_new_tab": {
+          "name": "open_search_in_new_tab",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "ddg_bangs": {
+          "name": "ddg_bangs",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "color_scheme": {
+          "name": "color_scheme",
+          "type": "varchar(5)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'dark'"
+        },
+        "first_day_of_week": {
+          "name": "first_day_of_week",
+          "type": "tinyint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 1
+        },
+        "ping_icons_enabled": {
+          "name": "ping_icons_enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "enable_right_click_on_widgets": {
+          "name": "enable_right_click_on_widgets",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "completed_manage_tour": {
+          "name": "completed_manage_tour",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "completed_board_tour": {
+          "name": "completed_board_tour",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_home_board_id_board_id_fk": {
+          "name": "user_home_board_id_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "user_mobile_home_board_id_board_id_fk": {
+          "name": "user_mobile_home_board_id_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "user_default_search_engine_id_search_engine_id_fk": {
+          "name": "user_default_search_engine_id_search_engine_id_fk",
+          "tableFrom": "user",
+          "tableTo": "search_engine",
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_id": {
+          "name": "user_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "verificationToken": {
+      "name": "verificationToken",
+      "columns": {
+        "identifier": {
+          "name": "identifier",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "verificationToken_identifier_token_pk": {
+          "name": "verificationToken_identifier_token_pk",
+          "columns": ["identifier", "token"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "widget_secret": {
+      "name": "widget_secret",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "widget_secret_item_id_item_id_fk": {
+          "name": "widget_secret_item_id_item_id_fk",
+          "tableFrom": "widget_secret",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "widget_secret_item_id_kind_pk": {
+          "name": "widget_secret_item_id_kind_pk",
+          "columns": ["item_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    }
+  },
+  "views": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "tables": {},
+    "indexes": {}
+  }
+}
diff --git a/packages/db/migrations/mysql/meta/0047_snapshot.json b/packages/db/migrations/mysql/meta/0047_snapshot.json
new file mode 100644
index 000000000..2b9d5d3f5
--- /dev/null
+++ b/packages/db/migrations/mysql/meta/0047_snapshot.json
@@ -0,0 +1,2809 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "5d4a439e-2e7b-4845-a6b4-f24ca5b95408",
+  "prevId": "d1b4dec4-07ef-498d-9fe0-0c61e93c0664",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider_account_id": {
+          "name": "provider_account_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "token_type": {
+          "name": "token_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "session_state": {
+          "name": "session_state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "userId_idx": {
+          "name": "userId_idx",
+          "columns": ["user_id"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "account_user_id_user_id_fk": {
+          "name": "account_user_id_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "account_provider_provider_account_id_pk": {
+          "name": "account_provider_provider_account_id_pk",
+          "columns": ["provider", "provider_account_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "apiKey": {
+      "name": "apiKey",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "api_key": {
+          "name": "api_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "apiKey_user_id_user_id_fk": {
+          "name": "apiKey_user_id_user_id_fk",
+          "tableFrom": "apiKey",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "apiKey_id": {
+          "name": "apiKey_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "app": {
+      "name": "app",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "href": {
+          "name": "href",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "ping_url": {
+          "name": "ping_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "app_id": {
+          "name": "app_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "assistant_configuration": {
+      "name": "assistant_configuration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'default'"
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "web_search_enabled": {
+          "name": "web_search_enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'openrouter'"
+        },
+        "base_url": {
+          "name": "base_url",
+          "type": "varchar(2048)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'https://openrouter.ai/api/v1'"
+        },
+        "model_discovery_path": {
+          "name": "model_discovery_path",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'/models'"
+        },
+        "encrypted_api_key": {
+          "name": "encrypted_api_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "encrypted_headers": {
+          "name": "encrypted_headers",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model_id": {
+          "name": "model_id",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "assistant_configuration_id": {
+          "name": "assistant_configuration_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "assistant_message": {
+      "name": "assistant_message",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thread_id": {
+          "name": "thread_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "parent_id": {
+          "name": "parent_id",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "format": {
+          "name": "format",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'ai-sdk/v6'"
+        },
+        "content": {
+          "name": "content",
+          "type": "mediumtext",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        }
+      },
+      "indexes": {
+        "assistant_message__thread_id_created_at_idx": {
+          "name": "assistant_message__thread_id_created_at_idx",
+          "columns": ["thread_id", "created_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "assistant_message_thread_id_assistant_thread_id_fk": {
+          "name": "assistant_message_thread_id_assistant_thread_id_fk",
+          "tableFrom": "assistant_message",
+          "tableTo": "assistant_thread",
+          "columnsFrom": ["thread_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "assistant_message_id": {
+          "name": "assistant_message_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "assistant_thread": {
+      "name": "assistant_thread",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model_id": {
+          "name": "model_id",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        }
+      },
+      "indexes": {
+        "assistant_thread__user_id_updated_at_idx": {
+          "name": "assistant_thread__user_id_updated_at_idx",
+          "columns": ["user_id", "updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "assistant_thread_user_id_user_id_fk": {
+          "name": "assistant_thread_user_id_user_id_fk",
+          "tableFrom": "assistant_thread",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "assistant_thread_id": {
+          "name": "assistant_thread_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "boardGroupPermission": {
+      "name": "boardGroupPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardGroupPermission_board_id_board_id_fk": {
+          "name": "boardGroupPermission_board_id_board_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardGroupPermission_group_id_group_id_fk": {
+          "name": "boardGroupPermission_group_id_group_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardGroupPermission_board_id_group_id_permission_pk": {
+          "name": "boardGroupPermission_board_id_group_id_permission_pk",
+          "columns": ["board_id", "group_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "boardUserPermission": {
+      "name": "boardUserPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardUserPermission_board_id_board_id_fk": {
+          "name": "boardUserPermission_board_id_board_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardUserPermission_user_id_user_id_fk": {
+          "name": "boardUserPermission_user_id_user_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardUserPermission_board_id_user_id_permission_pk": {
+          "name": "boardUserPermission_board_id_user_id_permission_pk",
+          "columns": ["board_id", "user_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "board": {
+      "name": "board",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "page_title": {
+          "name": "page_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "meta_title": {
+          "name": "meta_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "logo_image_url": {
+          "name": "logo_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "favicon_image_url": {
+          "name": "favicon_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_url": {
+          "name": "background_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_attachment": {
+          "name": "background_image_attachment",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('fixed')"
+        },
+        "background_image_repeat": {
+          "name": "background_image_repeat",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('no-repeat')"
+        },
+        "background_image_size": {
+          "name": "background_image_size",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('cover')"
+        },
+        "primary_color": {
+          "name": "primary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('#fa5252')"
+        },
+        "secondary_color": {
+          "name": "secondary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('#fd7e14')"
+        },
+        "opacity": {
+          "name": "opacity",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 100
+        },
+        "custom_css": {
+          "name": "custom_css",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_color": {
+          "name": "icon_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "item_radius": {
+          "name": "item_radius",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('lg')"
+        },
+        "disable_status": {
+          "name": "disable_status",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "board_creator_id_user_id_fk": {
+          "name": "board_creator_id_user_id_fk",
+          "tableFrom": "board",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "board_id": {
+          "name": "board_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "board_name_unique": {
+          "name": "board_name_unique",
+          "columns": ["name"]
+        }
+      },
+      "checkConstraint": {}
+    },
+    "cron_job_configuration": {
+      "name": "cron_job_configuration",
+      "columns": {
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "cron_expression": {
+          "name": "cron_expression",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_enabled": {
+          "name": "is_enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "cron_job_configuration_name": {
+          "name": "cron_job_configuration_name",
+          "columns": ["name"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "custom_widget_v2_definition": {
+      "name": "custom_widget_v2_definition",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "sources": {
+          "name": "sources",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "requests": {
+          "name": "requests",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "template": {
+          "name": "template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_v2_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_v2_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_definition_id": {
+          "name": "custom_widget_v2_definition_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "custom_widget_v2_secret": {
+      "name": "custom_widget_v2_secret",
+      "columns": {
+        "source_id": {
+          "name": "source_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "encrypted_value": {
+          "name": "encrypted_value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_secret_definition_id_fk": {
+          "name": "custom_widget_v2_secret_definition_id_fk",
+          "tableFrom": "custom_widget_v2_secret",
+          "tableTo": "custom_widget_v2_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_secret_definition_id_source_id_kind_pk": {
+          "name": "custom_widget_v2_secret_definition_id_source_id_kind_pk",
+          "columns": ["definition_id", "source_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "groupMember": {
+      "name": "groupMember",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_group_id_group_id_fk": {
+          "name": "groupMember_group_id_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_user_id_user_id_fk": {
+          "name": "groupMember_user_id_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_group_id_user_id_pk": {
+          "name": "groupMember_group_id_user_id_pk",
+          "columns": ["group_id", "user_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "groupPermission": {
+      "name": "groupPermission",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_group_id_group_id_fk": {
+          "name": "groupPermission_group_id_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "group": {
+      "name": "group",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "position": {
+          "name": "position",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_home_board_id_board_id_fk": {
+          "name": "group_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_mobile_home_board_id_board_id_fk": {
+          "name": "group_mobile_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "group_id": {
+          "name": "group_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "group_name_unique": {
+          "name": "group_name_unique",
+          "columns": ["name"]
+        }
+      },
+      "checkConstraint": {}
+    },
+    "iconRepository": {
+      "name": "iconRepository",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(150)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "icon": {
+      "name": "icon",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(250)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "checksum": {
+          "name": "checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_repository_id": {
+          "name": "icon_repository_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_icon_repository_id_iconRepository_id_fk": {
+          "name": "icon_icon_repository_id_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "icon_id": {
+          "name": "icon_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integrationGroupPermissions": {
+      "name": "integrationGroupPermissions",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationGroupPermissions_integration_id_integration_id_fk": {
+          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationGroupPermissions_group_id_group_id_fk": {
+          "name": "integrationGroupPermissions_group_id_group_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_group_permission__pk": {
+          "name": "integration_group_permission__pk",
+          "columns": ["integration_id", "group_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integration_item": {
+      "name": "integration_item",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "name": "integration_item_item_id_integration_id_pk",
+          "columns": ["item_id", "integration_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integrationSecret": {
+      "name": "integrationSecret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": ["updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "name": "integrationSecret_integration_id_kind_pk",
+          "columns": ["integration_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integrationUserPermission": {
+      "name": "integrationUserPermission",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationUserPermission_integration_id_integration_id_fk": {
+          "name": "integrationUserPermission_integration_id_integration_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationUserPermission_user_id_user_id_fk": {
+          "name": "integrationUserPermission_user_id_user_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationUserPermission_integration_id_user_id_permission_pk": {
+          "name": "integrationUserPermission_integration_id_user_id_permission_pk",
+          "columns": ["integration_id", "user_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "integration": {
+      "name": "integration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "app_id": {
+          "name": "app_id",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integration_app_id_app_id_fk": {
+          "name": "integration_app_id_app_id_fk",
+          "tableFrom": "integration",
+          "tableTo": "app",
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_id": {
+          "name": "integration_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "invite": {
+      "name": "invite",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "invite_id": {
+          "name": "invite_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "columns": ["token"]
+        }
+      },
+      "checkConstraint": {}
+    },
+    "item_layout": {
+      "name": "item_layout",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_layout_item_id_item_id_fk": {
+          "name": "item_layout_item_id_item_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_section_id_section_id_fk": {
+          "name": "item_layout_section_id_section_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_layout_id_layout_id_fk": {
+          "name": "item_layout_layout_id_layout_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_layout_item_id_section_id_layout_id_pk": {
+          "name": "item_layout_item_id_section_id_layout_id_pk",
+          "columns": ["item_id", "section_id", "layout_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_board_id_board_id_fk": {
+          "name": "item_board_id_board_id_fk",
+          "tableFrom": "item",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_id": {
+          "name": "item_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "layout": {
+      "name": "layout",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "tinyint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "left_gutter_column_count": {
+          "name": "left_gutter_column_count",
+          "type": "tinyint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "right_gutter_column_count": {
+          "name": "right_gutter_column_count",
+          "type": "tinyint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "breakpoint": {
+          "name": "breakpoint",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "role": {
+          "name": "role",
+          "type": "varchar(16)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'custom'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "layout_board_id_board_id_fk": {
+          "name": "layout_board_id_board_id_fk",
+          "tableFrom": "layout",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "layout_id": {
+          "name": "layout_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "custom_widget_definition": {
+      "name": "custom_widget_definition",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "auth_type": {
+          "name": "auth_type",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'none'"
+        },
+        "header_name": {
+          "name": "header_name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "method": {
+          "name": "method",
+          "type": "varchar(16)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'GET'"
+        },
+        "request_body": {
+          "name": "request_body",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "display_type": {
+          "name": "display_type",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'singleValue'"
+        },
+        "display_config": {
+          "name": "display_config",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_definition_id": {
+          "name": "custom_widget_definition_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "custom_widget_secret": {
+      "name": "custom_widget_secret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "cw_secret_definition_id_cw_definition_id_fk": {
+          "name": "cw_secret_definition_id_cw_definition_id_fk",
+          "tableFrom": "custom_widget_secret",
+          "tableTo": "custom_widget_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_secret_definition_id_kind_pk": {
+          "name": "custom_widget_secret_definition_id_kind_pk",
+          "columns": ["definition_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "media": {
+      "name": "media",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "LONGBLOB",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content_type": {
+          "name": "content_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "size": {
+          "name": "size",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "media_creator_id_user_id_fk": {
+          "name": "media_creator_id_user_id_fk",
+          "tableFrom": "media",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "media_id": {
+          "name": "media_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "onboarding": {
+      "name": "onboarding",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "step": {
+          "name": "step",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "previous_step": {
+          "name": "previous_step",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "onboarding_id": {
+          "name": "onboarding_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "search_engine": {
+      "name": "search_engine",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "short": {
+          "name": "short",
+          "type": "varchar(8)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "url_template": {
+          "name": "url_template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'generic'"
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "search_engine_integration_id_integration_id_fk": {
+          "name": "search_engine_integration_id_integration_id_fk",
+          "tableFrom": "search_engine",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "search_engine_id": {
+          "name": "search_engine_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "search_engine_short_unique": {
+          "name": "search_engine_short_unique",
+          "columns": ["short"]
+        }
+      },
+      "checkConstraint": {}
+    },
+    "section_collapse_state": {
+      "name": "section_collapse_state",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "collapsed": {
+          "name": "collapsed",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_collapse_state_user_id_user_id_fk": {
+          "name": "section_collapse_state_user_id_user_id_fk",
+          "tableFrom": "section_collapse_state",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_collapse_state_section_id_section_id_fk": {
+          "name": "section_collapse_state_section_id_section_id_fk",
+          "tableFrom": "section_collapse_state",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_collapse_state_user_id_section_id_pk": {
+          "name": "section_collapse_state_user_id_section_id_pk",
+          "columns": ["user_id", "section_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "section_layout": {
+      "name": "section_layout",
+      "columns": {
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "parent_section_id": {
+          "name": "parent_section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_layout_section_id_section_id_fk": {
+          "name": "section_layout_section_id_section_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_layout_layout_id_layout_id_fk": {
+          "name": "section_layout_layout_id_layout_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_layout_parent_section_id_section_id_fk": {
+          "name": "section_layout_parent_section_id_section_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "section",
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_layout_section_id_layout_id_pk": {
+          "name": "section_layout_section_id_layout_id_pk",
+          "columns": ["section_id", "layout_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "section": {
+      "name": "section",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_board_id_board_id_fk": {
+          "name": "section_board_id_board_id_fk",
+          "tableFrom": "section",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_id": {
+          "name": "section_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "serverSetting": {
+      "name": "serverSetting",
+      "columns": {
+        "setting_key": {
+          "name": "setting_key",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "serverSetting_setting_key": {
+          "name": "serverSetting_setting_key",
+          "columns": ["setting_key"]
+        }
+      },
+      "uniqueConstraints": {
+        "serverSetting_settingKey_unique": {
+          "name": "serverSetting_settingKey_unique",
+          "columns": ["setting_key"]
+        }
+      },
+      "checkConstraint": {}
+    },
+    "session": {
+      "name": "session",
+      "columns": {
+        "session_token": {
+          "name": "session_token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_id_idx": {
+          "name": "user_id_idx",
+          "columns": ["user_id"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "session_user_id_user_id_fk": {
+          "name": "session_user_id_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "session_session_token": {
+          "name": "session_session_token",
+          "columns": ["session_token"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "trusted_certificate_hostname": {
+      "name": "trusted_certificate_hostname",
+      "columns": {
+        "hostname": {
+          "name": "hostname",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thumbprint": {
+          "name": "thumbprint",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "certificate": {
+          "name": "certificate",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "trusted_certificate_hostname_hostname_thumbprint_pk": {
+          "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
+          "columns": ["hostname", "thumbprint"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'credentials'"
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "default_search_engine_id": {
+          "name": "default_search_engine_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "open_search_in_new_tab": {
+          "name": "open_search_in_new_tab",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "ddg_bangs": {
+          "name": "ddg_bangs",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "color_scheme": {
+          "name": "color_scheme",
+          "type": "varchar(5)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'dark'"
+        },
+        "first_day_of_week": {
+          "name": "first_day_of_week",
+          "type": "tinyint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 1
+        },
+        "ping_icons_enabled": {
+          "name": "ping_icons_enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "enable_right_click_on_widgets": {
+          "name": "enable_right_click_on_widgets",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "completed_manage_tour": {
+          "name": "completed_manage_tour",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "completed_board_tour": {
+          "name": "completed_board_tour",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_home_board_id_board_id_fk": {
+          "name": "user_home_board_id_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "user_mobile_home_board_id_board_id_fk": {
+          "name": "user_mobile_home_board_id_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "user_default_search_engine_id_search_engine_id_fk": {
+          "name": "user_default_search_engine_id_search_engine_id_fk",
+          "tableFrom": "user",
+          "tableTo": "search_engine",
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_id": {
+          "name": "user_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "verificationToken": {
+      "name": "verificationToken",
+      "columns": {
+        "identifier": {
+          "name": "identifier",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "verificationToken_identifier_token_pk": {
+          "name": "verificationToken_identifier_token_pk",
+          "columns": ["identifier", "token"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "widget_secret": {
+      "name": "widget_secret",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "widget_secret_item_id_item_id_fk": {
+          "name": "widget_secret_item_id_item_id_fk",
+          "tableFrom": "widget_secret",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "widget_secret_item_id_kind_pk": {
+          "name": "widget_secret_item_id_kind_pk",
+          "columns": ["item_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    }
+  },
+  "views": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "tables": {},
+    "indexes": {}
+  }
+}
diff --git a/packages/db/migrations/mysql/meta/_journal.json b/packages/db/migrations/mysql/meta/_journal.json
index 7047a636a..c1935c5ee 100644
--- a/packages/db/migrations/mysql/meta/_journal.json
+++ b/packages/db/migrations/mysql/meta/_journal.json
@@ -313,15 +313,29 @@
     {
       "idx": 44,
       "version": "5",
-      "when": 1785232800000,
-      "tag": "0044_add_assistant",
+      "when": 1784305537309,
+      "tag": "0044_custom_widget_v2_tables",
       "breakpoints": true
     },
     {
       "idx": 45,
       "version": "5",
-      "when": 1785768750000,
-      "tag": "0045_add_assistant_web_search",
+      "when": 1786212549933,
+      "tag": "0045_shiny_sir_ram",
+      "breakpoints": true
+    },
+    {
+      "idx": 46,
+      "version": "5",
+      "when": 1786215199760,
+      "tag": "0046_long_proteus",
+      "breakpoints": true
+    },
+    {
+      "idx": 47,
+      "version": "5",
+      "when": 1786217088950,
+      "tag": "0047_lame_wallow",
       "breakpoints": true
     }
   ]
diff --git a/packages/db/migrations/postgresql/0010_custom_widget_v2_tables.sql b/packages/db/migrations/postgresql/0010_custom_widget_v2_tables.sql
new file mode 100644
index 000000000..e209f1b97
--- /dev/null
+++ b/packages/db/migrations/postgresql/0010_custom_widget_v2_tables.sql
@@ -0,0 +1,25 @@
+CREATE TABLE "custom_widget_v2_definition" (
+	"id" varchar(64) PRIMARY KEY NOT NULL,
+	"name" varchar(256) NOT NULL,
+	"description" text,
+	"icon_url" text,
+	"sources" text NOT NULL,
+	"requests" text NOT NULL,
+	"options" text NOT NULL,
+	"template" text NOT NULL,
+	"enabled" boolean DEFAULT true NOT NULL,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	"updated_at" timestamp DEFAULT now() NOT NULL,
+	"creator_id" varchar(64)
+);--> statement-breakpoint
+CREATE TABLE "custom_widget_v2_secret" (
+	"source_id" varchar(64) NOT NULL,
+	"kind" varchar(64) NOT NULL,
+	"encrypted_value" text NOT NULL,
+	"updated_at" timestamp NOT NULL,
+	"definition_id" varchar(64) NOT NULL,
+	CONSTRAINT "custom_widget_v2_secret_definition_id_source_id_kind_pk" PRIMARY KEY("definition_id","source_id","kind")
+);--> statement-breakpoint
+ALTER TABLE "custom_widget_v2_definition" ADD CONSTRAINT "custom_widget_v2_definition_creator_id_user_id_fk" FOREIGN KEY ("creator_id") REFERENCES "public"."user"("id") ON DELETE set null ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "custom_widget_v2_secret" ADD CONSTRAINT "custom_widget_v2_secret_definition_id_fk" FOREIGN KEY ("definition_id") REFERENCES "public"."custom_widget_v2_definition"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+DELETE FROM "groupPermission" WHERE "permission" IN ('custom-widget-manage', 'custom-widget-secret-write');
diff --git a/packages/db/migrations/postgresql/0011_futuristic_valkyrie.sql b/packages/db/migrations/postgresql/0011_futuristic_valkyrie.sql
new file mode 100644
index 000000000..78c3afaf4
--- /dev/null
+++ b/packages/db/migrations/postgresql/0011_futuristic_valkyrie.sql
@@ -0,0 +1,2 @@
+ALTER TABLE "layout" ADD COLUMN "left_gutter_column_count" smallint DEFAULT 0 NOT NULL;--> statement-breakpoint
+ALTER TABLE "layout" ADD COLUMN "right_gutter_column_count" smallint DEFAULT 0 NOT NULL;
\ No newline at end of file
diff --git a/packages/db/migrations/postgresql/0011_same_sir_ram.sql b/packages/db/migrations/postgresql/0011_same_sir_ram.sql
deleted file mode 100644
index aa5f5a56e..000000000
--- a/packages/db/migrations/postgresql/0011_same_sir_ram.sql
+++ /dev/null
@@ -1 +0,0 @@
-ALTER TABLE "assistant_configuration" ADD COLUMN "web_search_enabled" boolean DEFAULT false NOT NULL;
\ No newline at end of file
diff --git a/packages/db/migrations/postgresql/0012_huge_warpath.sql b/packages/db/migrations/postgresql/0012_huge_warpath.sql
new file mode 100644
index 000000000..20c7625be
--- /dev/null
+++ b/packages/db/migrations/postgresql/0012_huge_warpath.sql
@@ -0,0 +1 @@
+ALTER TABLE "layout" ADD COLUMN "role" varchar(16) DEFAULT 'custom' NOT NULL;
\ No newline at end of file
diff --git a/packages/db/migrations/postgresql/0010_workable_shard.sql b/packages/db/migrations/postgresql/0013_condemned_speedball.sql
similarity index 92%
rename from packages/db/migrations/postgresql/0010_workable_shard.sql
rename to packages/db/migrations/postgresql/0013_condemned_speedball.sql
index 4779e359f..d094d653c 100644
--- a/packages/db/migrations/postgresql/0010_workable_shard.sql
+++ b/packages/db/migrations/postgresql/0013_condemned_speedball.sql
@@ -1,6 +1,7 @@
 CREATE TABLE "assistant_configuration" (
 	"id" varchar(64) PRIMARY KEY DEFAULT 'default' NOT NULL,
 	"enabled" boolean DEFAULT false NOT NULL,
+	"web_search_enabled" boolean DEFAULT false NOT NULL,
 	"provider" varchar(32) DEFAULT 'openrouter' NOT NULL,
 	"base_url" varchar(2048) DEFAULT 'https://openrouter.ai/api/v1' NOT NULL,
 	"model_discovery_path" varchar(512) DEFAULT '/models',
@@ -15,7 +16,7 @@ CREATE TABLE "assistant_message" (
 	"thread_id" varchar(64) NOT NULL,
 	"parent_id" varchar(128),
 	"format" varchar(64) DEFAULT 'ai-sdk/v6' NOT NULL,
-	"content" text DEFAULT '{"json": {}}' NOT NULL,
+	"content" text NOT NULL,
 	"created_at" timestamp DEFAULT now() NOT NULL
 );
 --> statement-breakpoint
@@ -31,4 +32,4 @@ CREATE TABLE "assistant_thread" (
 ALTER TABLE "assistant_message" ADD CONSTRAINT "assistant_message_thread_id_assistant_thread_id_fk" FOREIGN KEY ("thread_id") REFERENCES "public"."assistant_thread"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
 ALTER TABLE "assistant_thread" ADD CONSTRAINT "assistant_thread_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
 CREATE INDEX "assistant_message__thread_id_created_at_idx" ON "assistant_message" USING btree ("thread_id","created_at");--> statement-breakpoint
-CREATE INDEX "assistant_thread__user_id_updated_at_idx" ON "assistant_thread" USING btree ("user_id","updated_at");
+CREATE INDEX "assistant_thread__user_id_updated_at_idx" ON "assistant_thread" USING btree ("user_id","updated_at");
\ No newline at end of file
diff --git a/packages/db/migrations/postgresql/meta/0006_snapshot.json b/packages/db/migrations/postgresql/meta/0006_snapshot.json
index ee39b4f11..d5576746b 100644
--- a/packages/db/migrations/postgresql/meta/0006_snapshot.json
+++ b/packages/db/migrations/postgresql/meta/0006_snapshot.json
@@ -97,12 +97,8 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -110,10 +106,7 @@
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
           "name": "account_provider_provider_account_id_pk",
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ]
+          "columns": ["provider", "provider_account_id"]
         }
       },
       "uniqueConstraints": {},
@@ -150,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -244,12 +233,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -257,12 +242,8 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -270,11 +251,7 @@
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
           "name": "boardGroupPermission_board_id_group_id_permission_pk",
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["board_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -311,12 +288,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -324,12 +297,8 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -337,11 +306,7 @@
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
           "name": "boardUserPermission_board_id_user_id_permission_pk",
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["board_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -483,12 +448,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -498,9 +459,7 @@
         "board_name_unique": {
           "name": "board_name_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "policies": {},
@@ -646,12 +605,8 @@
           "name": "custom_widget_definition_creator_id_user_id_fk",
           "tableFrom": "custom_widget_definition",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -697,12 +652,8 @@
           "name": "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
           "tableFrom": "custom_widget_secret",
           "tableTo": "custom_widget_definition",
-          "columnsFrom": [
-            "definition_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -710,10 +661,7 @@
       "compositePrimaryKeys": {
         "custom_widget_secret_definition_id_kind_pk": {
           "name": "custom_widget_secret_definition_id_kind_pk",
-          "columns": [
-            "definition_id",
-            "kind"
-          ]
+          "columns": ["definition_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -744,12 +692,8 @@
           "name": "groupMember_group_id_group_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -757,12 +701,8 @@
           "name": "groupMember_user_id_user_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -770,10 +710,7 @@
       "compositePrimaryKeys": {
         "groupMember_group_id_user_id_pk": {
           "name": "groupMember_group_id_user_id_pk",
-          "columns": [
-            "group_id",
-            "user_id"
-          ]
+          "columns": ["group_id", "user_id"]
         }
       },
       "uniqueConstraints": {},
@@ -804,12 +741,8 @@
           "name": "groupPermission_group_id_group_id_fk",
           "tableFrom": "groupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -867,12 +800,8 @@
           "name": "group_owner_id_user_id_fk",
           "tableFrom": "group",
           "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -880,12 +809,8 @@
           "name": "group_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -893,12 +818,8 @@
           "name": "group_mobile_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -908,9 +829,7 @@
         "group_name_unique": {
           "name": "group_name_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "policies": {},
@@ -983,12 +902,8 @@
           "name": "icon_icon_repository_id_iconRepository_id_fk",
           "tableFrom": "icon",
           "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1028,12 +943,8 @@
           "name": "integrationGroupPermissions_integration_id_integration_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1041,12 +952,8 @@
           "name": "integrationGroupPermissions_group_id_group_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1054,11 +961,7 @@
       "compositePrimaryKeys": {
         "integration_group_permission__pk": {
           "name": "integration_group_permission__pk",
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["integration_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -1089,12 +992,8 @@
           "name": "integration_item_item_id_item_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1102,12 +1001,8 @@
           "name": "integration_item_integration_id_integration_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1115,10 +1010,7 @@
       "compositePrimaryKeys": {
         "integration_item_item_id_integration_id_pk": {
           "name": "integration_item_item_id_integration_id_pk",
-          "columns": [
-            "item_id",
-            "integration_id"
-          ]
+          "columns": ["item_id", "integration_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1192,12 +1084,8 @@
           "name": "integrationSecret_integration_id_integration_id_fk",
           "tableFrom": "integrationSecret",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1205,10 +1093,7 @@
       "compositePrimaryKeys": {
         "integrationSecret_integration_id_kind_pk": {
           "name": "integrationSecret_integration_id_kind_pk",
-          "columns": [
-            "integration_id",
-            "kind"
-          ]
+          "columns": ["integration_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -1245,12 +1130,8 @@
           "name": "integrationUserPermission_integration_id_integration_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1258,12 +1139,8 @@
           "name": "integrationUserPermission_user_id_user_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1271,11 +1148,7 @@
       "compositePrimaryKeys": {
         "integrationUserPermission_integration_id_user_id_permission_pk": {
           "name": "integrationUserPermission_integration_id_user_id_permission_pk",
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["integration_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -1340,12 +1213,8 @@
           "name": "integration_app_id_app_id_fk",
           "tableFrom": "integration",
           "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1391,12 +1260,8 @@
           "name": "invite_creator_id_user_id_fk",
           "tableFrom": "invite",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1406,9 +1271,7 @@
         "invite_token_unique": {
           "name": "invite_token_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "token"
-          ]
+          "columns": ["token"]
         }
       },
       "policies": {},
@@ -1468,12 +1331,8 @@
           "name": "item_layout_item_id_item_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1481,12 +1340,8 @@
           "name": "item_layout_section_id_section_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1494,12 +1349,8 @@
           "name": "item_layout_layout_id_layout_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1507,11 +1358,7 @@
       "compositePrimaryKeys": {
         "item_layout_item_id_section_id_layout_id_pk": {
           "name": "item_layout_item_id_section_id_layout_id_pk",
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["item_id", "section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1562,12 +1409,8 @@
           "name": "item_board_id_board_id_fk",
           "tableFrom": "item",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1620,12 +1463,8 @@
           "name": "layout_board_id_board_id_fk",
           "tableFrom": "layout",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1690,12 +1529,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1797,12 +1632,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1812,9 +1643,7 @@
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "short"
-          ]
+          "columns": ["short"]
         }
       },
       "policies": {},
@@ -1851,12 +1680,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1864,12 +1689,8 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1877,10 +1698,7 @@
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
           "name": "section_collapse_state_user_id_section_id_pk",
-          "columns": [
-            "user_id",
-            "section_id"
-          ]
+          "columns": ["user_id", "section_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1941,12 +1759,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1954,12 +1768,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1967,12 +1777,8 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1980,10 +1786,7 @@
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
           "name": "section_layout_section_id_layout_id_pk",
-          "columns": [
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2045,12 +1848,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2086,9 +1885,7 @@
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "policies": {},
@@ -2140,12 +1937,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2277,12 +2070,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2290,12 +2079,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2303,12 +2088,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2347,10 +2128,7 @@
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
           "name": "verificationToken_identifier_token_pk",
-          "columns": [
-            "identifier",
-            "token"
-          ]
+          "columns": ["identifier", "token"]
         }
       },
       "uniqueConstraints": {},
@@ -2386,10 +2164,7 @@
       "compositePrimaryKeys": {
         "trusted_certificate_hostname_hostname_thumbprint_pk": {
           "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ]
+          "columns": ["hostname", "thumbprint"]
         }
       },
       "uniqueConstraints": {},
@@ -2409,4 +2184,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/db/migrations/postgresql/meta/0007_snapshot.json b/packages/db/migrations/postgresql/meta/0007_snapshot.json
index 4c4f167d7..de8042930 100644
--- a/packages/db/migrations/postgresql/meta/0007_snapshot.json
+++ b/packages/db/migrations/postgresql/meta/0007_snapshot.json
@@ -97,12 +97,8 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -110,10 +106,7 @@
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
           "name": "account_provider_provider_account_id_pk",
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ]
+          "columns": ["provider", "provider_account_id"]
         }
       },
       "uniqueConstraints": {},
@@ -150,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -244,12 +233,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -257,12 +242,8 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -270,11 +251,7 @@
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
           "name": "boardGroupPermission_board_id_group_id_permission_pk",
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["board_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -311,12 +288,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -324,12 +297,8 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -337,11 +306,7 @@
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
           "name": "boardUserPermission_board_id_user_id_permission_pk",
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["board_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -483,12 +448,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -498,9 +459,7 @@
         "board_name_unique": {
           "name": "board_name_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "policies": {},
@@ -647,12 +606,8 @@
           "name": "custom_widget_definition_creator_id_user_id_fk",
           "tableFrom": "custom_widget_definition",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -698,12 +653,8 @@
           "name": "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
           "tableFrom": "custom_widget_secret",
           "tableTo": "custom_widget_definition",
-          "columnsFrom": [
-            "definition_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -711,10 +662,7 @@
       "compositePrimaryKeys": {
         "custom_widget_secret_definition_id_kind_pk": {
           "name": "custom_widget_secret_definition_id_kind_pk",
-          "columns": [
-            "definition_id",
-            "kind"
-          ]
+          "columns": ["definition_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -745,12 +693,8 @@
           "name": "groupMember_group_id_group_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -758,12 +702,8 @@
           "name": "groupMember_user_id_user_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -771,10 +711,7 @@
       "compositePrimaryKeys": {
         "groupMember_group_id_user_id_pk": {
           "name": "groupMember_group_id_user_id_pk",
-          "columns": [
-            "group_id",
-            "user_id"
-          ]
+          "columns": ["group_id", "user_id"]
         }
       },
       "uniqueConstraints": {},
@@ -805,12 +742,8 @@
           "name": "groupPermission_group_id_group_id_fk",
           "tableFrom": "groupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -868,12 +801,8 @@
           "name": "group_owner_id_user_id_fk",
           "tableFrom": "group",
           "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -881,12 +810,8 @@
           "name": "group_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -894,12 +819,8 @@
           "name": "group_mobile_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -909,9 +830,7 @@
         "group_name_unique": {
           "name": "group_name_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "policies": {},
@@ -984,12 +903,8 @@
           "name": "icon_icon_repository_id_iconRepository_id_fk",
           "tableFrom": "icon",
           "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1029,12 +944,8 @@
           "name": "integrationGroupPermissions_integration_id_integration_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1042,12 +953,8 @@
           "name": "integrationGroupPermissions_group_id_group_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1055,11 +962,7 @@
       "compositePrimaryKeys": {
         "integration_group_permission__pk": {
           "name": "integration_group_permission__pk",
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["integration_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -1090,12 +993,8 @@
           "name": "integration_item_item_id_item_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1103,12 +1002,8 @@
           "name": "integration_item_integration_id_integration_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1116,10 +1011,7 @@
       "compositePrimaryKeys": {
         "integration_item_item_id_integration_id_pk": {
           "name": "integration_item_item_id_integration_id_pk",
-          "columns": [
-            "item_id",
-            "integration_id"
-          ]
+          "columns": ["item_id", "integration_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1193,12 +1085,8 @@
           "name": "integrationSecret_integration_id_integration_id_fk",
           "tableFrom": "integrationSecret",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1206,10 +1094,7 @@
       "compositePrimaryKeys": {
         "integrationSecret_integration_id_kind_pk": {
           "name": "integrationSecret_integration_id_kind_pk",
-          "columns": [
-            "integration_id",
-            "kind"
-          ]
+          "columns": ["integration_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -1246,12 +1131,8 @@
           "name": "integrationUserPermission_integration_id_integration_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1259,12 +1140,8 @@
           "name": "integrationUserPermission_user_id_user_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1272,11 +1149,7 @@
       "compositePrimaryKeys": {
         "integrationUserPermission_integration_id_user_id_permission_pk": {
           "name": "integrationUserPermission_integration_id_user_id_permission_pk",
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["integration_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -1341,12 +1214,8 @@
           "name": "integration_app_id_app_id_fk",
           "tableFrom": "integration",
           "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1392,12 +1261,8 @@
           "name": "invite_creator_id_user_id_fk",
           "tableFrom": "invite",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1407,9 +1272,7 @@
         "invite_token_unique": {
           "name": "invite_token_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "token"
-          ]
+          "columns": ["token"]
         }
       },
       "policies": {},
@@ -1469,12 +1332,8 @@
           "name": "item_layout_item_id_item_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1482,12 +1341,8 @@
           "name": "item_layout_section_id_section_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1495,12 +1350,8 @@
           "name": "item_layout_layout_id_layout_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1508,11 +1359,7 @@
       "compositePrimaryKeys": {
         "item_layout_item_id_section_id_layout_id_pk": {
           "name": "item_layout_item_id_section_id_layout_id_pk",
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["item_id", "section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1563,12 +1410,8 @@
           "name": "item_board_id_board_id_fk",
           "tableFrom": "item",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1621,12 +1464,8 @@
           "name": "layout_board_id_board_id_fk",
           "tableFrom": "layout",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1691,12 +1530,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1798,12 +1633,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1813,9 +1644,7 @@
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "short"
-          ]
+          "columns": ["short"]
         }
       },
       "policies": {},
@@ -1852,12 +1681,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1865,12 +1690,8 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1878,10 +1699,7 @@
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
           "name": "section_collapse_state_user_id_section_id_pk",
-          "columns": [
-            "user_id",
-            "section_id"
-          ]
+          "columns": ["user_id", "section_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1942,12 +1760,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1955,12 +1769,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1968,12 +1778,8 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1981,10 +1787,7 @@
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
           "name": "section_layout_section_id_layout_id_pk",
-          "columns": [
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2046,12 +1849,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2087,9 +1886,7 @@
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "policies": {},
@@ -2141,12 +1938,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2278,12 +2071,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2291,12 +2080,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2304,12 +2089,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2348,10 +2129,7 @@
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
           "name": "verificationToken_identifier_token_pk",
-          "columns": [
-            "identifier",
-            "token"
-          ]
+          "columns": ["identifier", "token"]
         }
       },
       "uniqueConstraints": {},
@@ -2387,10 +2165,7 @@
       "compositePrimaryKeys": {
         "trusted_certificate_hostname_hostname_thumbprint_pk": {
           "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ]
+          "columns": ["hostname", "thumbprint"]
         }
       },
       "uniqueConstraints": {},
diff --git a/packages/db/migrations/postgresql/meta/0008_snapshot.json b/packages/db/migrations/postgresql/meta/0008_snapshot.json
index ab3303ac9..4ab88d535 100644
--- a/packages/db/migrations/postgresql/meta/0008_snapshot.json
+++ b/packages/db/migrations/postgresql/meta/0008_snapshot.json
@@ -97,12 +97,8 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -110,10 +106,7 @@
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
           "name": "account_provider_provider_account_id_pk",
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ]
+          "columns": ["provider", "provider_account_id"]
         }
       },
       "uniqueConstraints": {},
@@ -150,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -244,12 +233,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -257,12 +242,8 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -270,11 +251,7 @@
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
           "name": "boardGroupPermission_board_id_group_id_permission_pk",
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["board_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -311,12 +288,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -324,12 +297,8 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -337,11 +306,7 @@
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
           "name": "boardUserPermission_board_id_user_id_permission_pk",
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["board_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -483,12 +448,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -498,9 +459,7 @@
         "board_name_unique": {
           "name": "board_name_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "policies": {},
@@ -647,12 +606,8 @@
           "name": "custom_widget_definition_creator_id_user_id_fk",
           "tableFrom": "custom_widget_definition",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -698,12 +653,8 @@
           "name": "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
           "tableFrom": "custom_widget_secret",
           "tableTo": "custom_widget_definition",
-          "columnsFrom": [
-            "definition_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -711,10 +662,7 @@
       "compositePrimaryKeys": {
         "custom_widget_secret_definition_id_kind_pk": {
           "name": "custom_widget_secret_definition_id_kind_pk",
-          "columns": [
-            "definition_id",
-            "kind"
-          ]
+          "columns": ["definition_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -745,12 +693,8 @@
           "name": "groupMember_group_id_group_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -758,12 +702,8 @@
           "name": "groupMember_user_id_user_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -771,10 +711,7 @@
       "compositePrimaryKeys": {
         "groupMember_group_id_user_id_pk": {
           "name": "groupMember_group_id_user_id_pk",
-          "columns": [
-            "group_id",
-            "user_id"
-          ]
+          "columns": ["group_id", "user_id"]
         }
       },
       "uniqueConstraints": {},
@@ -805,12 +742,8 @@
           "name": "groupPermission_group_id_group_id_fk",
           "tableFrom": "groupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -868,12 +801,8 @@
           "name": "group_owner_id_user_id_fk",
           "tableFrom": "group",
           "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -881,12 +810,8 @@
           "name": "group_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -894,12 +819,8 @@
           "name": "group_mobile_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -909,9 +830,7 @@
         "group_name_unique": {
           "name": "group_name_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "policies": {},
@@ -984,12 +903,8 @@
           "name": "icon_icon_repository_id_iconRepository_id_fk",
           "tableFrom": "icon",
           "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1029,12 +944,8 @@
           "name": "integrationGroupPermissions_integration_id_integration_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1042,12 +953,8 @@
           "name": "integrationGroupPermissions_group_id_group_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1055,11 +962,7 @@
       "compositePrimaryKeys": {
         "integration_group_permission__pk": {
           "name": "integration_group_permission__pk",
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["integration_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -1090,12 +993,8 @@
           "name": "integration_item_item_id_item_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1103,12 +1002,8 @@
           "name": "integration_item_integration_id_integration_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1116,10 +1011,7 @@
       "compositePrimaryKeys": {
         "integration_item_item_id_integration_id_pk": {
           "name": "integration_item_item_id_integration_id_pk",
-          "columns": [
-            "item_id",
-            "integration_id"
-          ]
+          "columns": ["item_id", "integration_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1193,12 +1085,8 @@
           "name": "integrationSecret_integration_id_integration_id_fk",
           "tableFrom": "integrationSecret",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1206,10 +1094,7 @@
       "compositePrimaryKeys": {
         "integrationSecret_integration_id_kind_pk": {
           "name": "integrationSecret_integration_id_kind_pk",
-          "columns": [
-            "integration_id",
-            "kind"
-          ]
+          "columns": ["integration_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -1246,12 +1131,8 @@
           "name": "integrationUserPermission_integration_id_integration_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1259,12 +1140,8 @@
           "name": "integrationUserPermission_user_id_user_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1272,11 +1149,7 @@
       "compositePrimaryKeys": {
         "integrationUserPermission_integration_id_user_id_permission_pk": {
           "name": "integrationUserPermission_integration_id_user_id_permission_pk",
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["integration_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -1341,12 +1214,8 @@
           "name": "integration_app_id_app_id_fk",
           "tableFrom": "integration",
           "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1392,12 +1261,8 @@
           "name": "invite_creator_id_user_id_fk",
           "tableFrom": "invite",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1407,9 +1272,7 @@
         "invite_token_unique": {
           "name": "invite_token_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "token"
-          ]
+          "columns": ["token"]
         }
       },
       "policies": {},
@@ -1469,12 +1332,8 @@
           "name": "item_layout_item_id_item_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1482,12 +1341,8 @@
           "name": "item_layout_section_id_section_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1495,12 +1350,8 @@
           "name": "item_layout_layout_id_layout_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1508,11 +1359,7 @@
       "compositePrimaryKeys": {
         "item_layout_item_id_section_id_layout_id_pk": {
           "name": "item_layout_item_id_section_id_layout_id_pk",
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["item_id", "section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1563,12 +1410,8 @@
           "name": "item_board_id_board_id_fk",
           "tableFrom": "item",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1621,12 +1464,8 @@
           "name": "layout_board_id_board_id_fk",
           "tableFrom": "layout",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1691,12 +1530,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1798,12 +1633,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1813,9 +1644,7 @@
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "short"
-          ]
+          "columns": ["short"]
         }
       },
       "policies": {},
@@ -1852,12 +1681,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1865,12 +1690,8 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1878,10 +1699,7 @@
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
           "name": "section_collapse_state_user_id_section_id_pk",
-          "columns": [
-            "user_id",
-            "section_id"
-          ]
+          "columns": ["user_id", "section_id"]
         }
       },
       "uniqueConstraints": {},
@@ -1942,12 +1760,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1955,12 +1769,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1968,12 +1778,8 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1981,10 +1787,7 @@
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
           "name": "section_layout_section_id_layout_id_pk",
-          "columns": [
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2046,12 +1849,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2087,9 +1886,7 @@
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "policies": {},
@@ -2141,12 +1938,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2278,12 +2071,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2291,12 +2080,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2304,12 +2089,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2348,10 +2129,7 @@
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
           "name": "verificationToken_identifier_token_pk",
-          "columns": [
-            "identifier",
-            "token"
-          ]
+          "columns": ["identifier", "token"]
         }
       },
       "uniqueConstraints": {},
@@ -2387,10 +2165,7 @@
       "compositePrimaryKeys": {
         "trusted_certificate_hostname_hostname_thumbprint_pk": {
           "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ]
+          "columns": ["hostname", "thumbprint"]
         }
       },
       "uniqueConstraints": {},
@@ -2434,22 +2209,15 @@
           "tableFrom": "widget_secret",
           "tableTo": "item",
           "schemaTo": "public",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "widget_secret_item_id_kind_pk": {
-          "columns": [
-            "item_id",
-            "kind"
-          ],
+          "columns": ["item_id", "kind"],
           "name": "widget_secret_item_id_kind_pk"
         }
       },
diff --git a/packages/db/migrations/postgresql/meta/0010_snapshot.json b/packages/db/migrations/postgresql/meta/0010_snapshot.json
index 8c1e26904..0a1d58b0d 100644
--- a/packages/db/migrations/postgresql/meta/0010_snapshot.json
+++ b/packages/db/migrations/postgresql/meta/0010_snapshot.json
@@ -1,5 +1,5 @@
 {
-  "id": "c449da8d-68ab-46bc-8449-1dff8b6ea844",
+  "id": "99938d86-5059-41b3-a21c-ac767440ed00",
   "prevId": "97bda61f-0a71-4e41-8e60-874aafe17115",
   "version": "7",
   "dialect": "postgresql",
@@ -97,12 +97,8 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -110,10 +106,7 @@
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
           "name": "account_provider_provider_account_id_pk",
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ]
+          "columns": ["provider", "provider_account_id"]
         }
       },
       "uniqueConstraints": {},
@@ -150,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -215,254 +204,6 @@
       "checkConstraints": {},
       "isRLSEnabled": false
     },
-    "public.assistant_configuration": {
-      "name": "assistant_configuration",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "'default'"
-        },
-        "enabled": {
-          "name": "enabled",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true,
-          "default": false
-        },
-        "provider": {
-          "name": "provider",
-          "type": "varchar(32)",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'openrouter'"
-        },
-        "base_url": {
-          "name": "base_url",
-          "type": "varchar(2048)",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'https://openrouter.ai/api/v1'"
-        },
-        "model_discovery_path": {
-          "name": "model_discovery_path",
-          "type": "varchar(512)",
-          "primaryKey": false,
-          "notNull": false,
-          "default": "'/models'"
-        },
-        "encrypted_api_key": {
-          "name": "encrypted_api_key",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "encrypted_headers": {
-          "name": "encrypted_headers",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "model_id": {
-          "name": "model_id",
-          "type": "varchar(256)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.assistant_message": {
-      "name": "assistant_message",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(128)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "thread_id": {
-          "name": "thread_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "parent_id": {
-          "name": "parent_id",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "format": {
-          "name": "format",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'ai-sdk/v6'"
-        },
-        "content": {
-          "name": "content",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'{\"json\": {}}'"
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        }
-      },
-      "indexes": {
-        "assistant_message__thread_id_created_at_idx": {
-          "name": "assistant_message__thread_id_created_at_idx",
-          "columns": [
-            {
-              "expression": "thread_id",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            },
-            {
-              "expression": "created_at",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        }
-      },
-      "foreignKeys": {
-        "assistant_message_thread_id_assistant_thread_id_fk": {
-          "name": "assistant_message_thread_id_assistant_thread_id_fk",
-          "tableFrom": "assistant_message",
-          "tableTo": "assistant_thread",
-          "columnsFrom": [
-            "thread_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.assistant_thread": {
-      "name": "assistant_thread",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "title": {
-          "name": "title",
-          "type": "varchar(256)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "model_id": {
-          "name": "model_id",
-          "type": "varchar(256)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        }
-      },
-      "indexes": {
-        "assistant_thread__user_id_updated_at_idx": {
-          "name": "assistant_thread__user_id_updated_at_idx",
-          "columns": [
-            {
-              "expression": "user_id",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            },
-            {
-              "expression": "updated_at",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        }
-      },
-      "foreignKeys": {
-        "assistant_thread_user_id_user_id_fk": {
-          "name": "assistant_thread_user_id_user_id_fk",
-          "tableFrom": "assistant_thread",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
     "public.boardGroupPermission": {
       "name": "boardGroupPermission",
       "schema": "",
@@ -492,12 +233,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -505,12 +242,8 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -518,11 +251,7 @@
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
           "name": "boardGroupPermission_board_id_group_id_permission_pk",
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["board_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -559,12 +288,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -572,12 +297,8 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -585,11 +306,7 @@
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
           "name": "boardUserPermission_board_id_user_id_permission_pk",
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["board_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -731,12 +448,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -746,9 +459,7 @@
         "board_name_unique": {
           "name": "board_name_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "policies": {},
@@ -787,6 +498,968 @@
       "checkConstraints": {},
       "isRLSEnabled": false
     },
+    "public.custom_widget_v2_definition": {
+      "name": "custom_widget_v2_definition",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "sources": {
+          "name": "sources",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "requests": {
+          "name": "requests",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "template": {
+          "name": "template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_v2_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_v2_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.custom_widget_v2_secret": {
+      "name": "custom_widget_v2_secret",
+      "schema": "",
+      "columns": {
+        "source_id": {
+          "name": "source_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "encrypted_value": {
+          "name": "encrypted_value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_secret_definition_id_fk": {
+          "name": "custom_widget_v2_secret_definition_id_fk",
+          "tableFrom": "custom_widget_v2_secret",
+          "tableTo": "custom_widget_v2_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_secret_definition_id_source_id_kind_pk": {
+          "name": "custom_widget_v2_secret_definition_id_source_id_kind_pk",
+          "columns": ["definition_id", "source_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.groupMember": {
+      "name": "groupMember",
+      "schema": "",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_group_id_group_id_fk": {
+          "name": "groupMember_group_id_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_user_id_user_id_fk": {
+          "name": "groupMember_user_id_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_group_id_user_id_pk": {
+          "name": "groupMember_group_id_user_id_pk",
+          "columns": ["group_id", "user_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.groupPermission": {
+      "name": "groupPermission",
+      "schema": "",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_group_id_group_id_fk": {
+          "name": "groupPermission_group_id_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.group": {
+      "name": "group",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "position": {
+          "name": "position",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_home_board_id_board_id_fk": {
+          "name": "group_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_mobile_home_board_id_board_id_fk": {
+          "name": "group_mobile_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "group_name_unique": {
+          "name": "group_name_unique",
+          "nullsNotDistinct": false,
+          "columns": ["name"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.iconRepository": {
+      "name": "iconRepository",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(150)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.icon": {
+      "name": "icon",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(250)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "checksum": {
+          "name": "checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "icon_repository_id": {
+          "name": "icon_repository_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_icon_repository_id_iconRepository_id_fk": {
+          "name": "icon_icon_repository_id_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integrationGroupPermissions": {
+      "name": "integrationGroupPermissions",
+      "schema": "",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationGroupPermissions_integration_id_integration_id_fk": {
+          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationGroupPermissions_group_id_group_id_fk": {
+          "name": "integrationGroupPermissions_group_id_group_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_group_permission__pk": {
+          "name": "integration_group_permission__pk",
+          "columns": ["integration_id", "group_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integration_item": {
+      "name": "integration_item",
+      "schema": "",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "name": "integration_item_item_id_integration_id_pk",
+          "columns": ["item_id", "integration_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integrationSecret": {
+      "name": "integrationSecret",
+      "schema": "",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": [
+            {
+              "expression": "kind",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": [
+            {
+              "expression": "updated_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "name": "integrationSecret_integration_id_kind_pk",
+          "columns": ["integration_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integrationUserPermission": {
+      "name": "integrationUserPermission",
+      "schema": "",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationUserPermission_integration_id_integration_id_fk": {
+          "name": "integrationUserPermission_integration_id_integration_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationUserPermission_user_id_user_id_fk": {
+          "name": "integrationUserPermission_user_id_user_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationUserPermission_integration_id_user_id_permission_pk": {
+          "name": "integrationUserPermission_integration_id_user_id_permission_pk",
+          "columns": ["integration_id", "user_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integration": {
+      "name": "integration",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "app_id": {
+          "name": "app_id",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": [
+            {
+              "expression": "kind",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "integration_app_id_app_id_fk": {
+          "name": "integration_app_id_app_id_fk",
+          "tableFrom": "integration",
+          "tableTo": "app",
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.invite": {
+      "name": "invite",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "nullsNotDistinct": false,
+          "columns": ["token"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.item_layout": {
+      "name": "item_layout",
+      "schema": "",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_layout_item_id_item_id_fk": {
+          "name": "item_layout_item_id_item_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_section_id_section_id_fk": {
+          "name": "item_layout_section_id_section_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_layout_id_layout_id_fk": {
+          "name": "item_layout_layout_id_layout_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_layout_item_id_section_id_layout_id_pk": {
+          "name": "item_layout_item_id_section_id_layout_id_pk",
+          "columns": ["item_id", "section_id", "layout_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.item": {
+      "name": "item",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'{\"json\": {}}'"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_board_id_board_id_fk": {
+          "name": "item_board_id_board_id_fk",
+          "tableFrom": "item",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.layout": {
+      "name": "layout",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "breakpoint": {
+          "name": "breakpoint",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "layout_board_id_board_id_fk": {
+          "name": "layout_board_id_board_id_fk",
+          "tableFrom": "layout",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
     "public.custom_widget_definition": {
       "name": "custom_widget_definition",
       "schema": "",
@@ -895,12 +1568,8 @@
           "name": "custom_widget_definition_creator_id_user_id_fk",
           "tableFrom": "custom_widget_definition",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -946,12 +1615,8 @@
           "name": "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
           "tableFrom": "custom_widget_secret",
           "tableTo": "custom_widget_definition",
-          "columnsFrom": [
-            "definition_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -959,10 +1624,7 @@
       "compositePrimaryKeys": {
         "custom_widget_secret_definition_id_kind_pk": {
           "name": "custom_widget_secret_definition_id_kind_pk",
-          "columns": [
-            "definition_id",
-            "kind"
-          ]
+          "columns": ["definition_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -970,921 +1632,6 @@
       "checkConstraints": {},
       "isRLSEnabled": false
     },
-    "public.groupMember": {
-      "name": "groupMember",
-      "schema": "",
-      "columns": {
-        "group_id": {
-          "name": "group_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "groupMember_group_id_group_id_fk": {
-          "name": "groupMember_group_id_group_id_fk",
-          "tableFrom": "groupMember",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "groupMember_user_id_user_id_fk": {
-          "name": "groupMember_user_id_user_id_fk",
-          "tableFrom": "groupMember",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "groupMember_group_id_user_id_pk": {
-          "name": "groupMember_group_id_user_id_pk",
-          "columns": [
-            "group_id",
-            "user_id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.groupPermission": {
-      "name": "groupPermission",
-      "schema": "",
-      "columns": {
-        "group_id": {
-          "name": "group_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "permission": {
-          "name": "permission",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "groupPermission_group_id_group_id_fk": {
-          "name": "groupPermission_group_id_group_id_fk",
-          "tableFrom": "groupPermission",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.group": {
-      "name": "group",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "name": {
-          "name": "name",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "owner_id": {
-          "name": "owner_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "home_board_id": {
-          "name": "home_board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "mobile_home_board_id": {
-          "name": "mobile_home_board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "position": {
-          "name": "position",
-          "type": "smallint",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "group_owner_id_user_id_fk": {
-          "name": "group_owner_id_user_id_fk",
-          "tableFrom": "group",
-          "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        },
-        "group_home_board_id_board_id_fk": {
-          "name": "group_home_board_id_board_id_fk",
-          "tableFrom": "group",
-          "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        },
-        "group_mobile_home_board_id_board_id_fk": {
-          "name": "group_mobile_home_board_id_board_id_fk",
-          "tableFrom": "group",
-          "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "group_name_unique": {
-          "name": "group_name_unique",
-          "nullsNotDistinct": false,
-          "columns": [
-            "name"
-          ]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.iconRepository": {
-      "name": "iconRepository",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "slug": {
-          "name": "slug",
-          "type": "varchar(150)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.icon": {
-      "name": "icon",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "name": {
-          "name": "name",
-          "type": "varchar(250)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "url": {
-          "name": "url",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "checksum": {
-          "name": "checksum",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "icon_repository_id": {
-          "name": "icon_repository_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "icon_icon_repository_id_iconRepository_id_fk": {
-          "name": "icon_icon_repository_id_iconRepository_id_fk",
-          "tableFrom": "icon",
-          "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.integrationGroupPermissions": {
-      "name": "integrationGroupPermissions",
-      "schema": "",
-      "columns": {
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "group_id": {
-          "name": "group_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "permission": {
-          "name": "permission",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integrationGroupPermissions_integration_id_integration_id_fk": {
-          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
-          "tableFrom": "integrationGroupPermissions",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integrationGroupPermissions_group_id_group_id_fk": {
-          "name": "integrationGroupPermissions_group_id_group_id_fk",
-          "tableFrom": "integrationGroupPermissions",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integration_group_permission__pk": {
-          "name": "integration_group_permission__pk",
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.integration_item": {
-      "name": "integration_item",
-      "schema": "",
-      "columns": {
-        "item_id": {
-          "name": "item_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integration_item_item_id_item_id_fk": {
-          "name": "integration_item_item_id_item_id_fk",
-          "tableFrom": "integration_item",
-          "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integration_item_integration_id_integration_id_fk": {
-          "name": "integration_item_integration_id_integration_id_fk",
-          "tableFrom": "integration_item",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integration_item_item_id_integration_id_pk": {
-          "name": "integration_item_item_id_integration_id_pk",
-          "columns": [
-            "item_id",
-            "integration_id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.integrationSecret": {
-      "name": "integrationSecret",
-      "schema": "",
-      "columns": {
-        "kind": {
-          "name": "kind",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "value": {
-          "name": "value",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {
-        "integration_secret__kind_idx": {
-          "name": "integration_secret__kind_idx",
-          "columns": [
-            {
-              "expression": "kind",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        },
-        "integration_secret__updated_at_idx": {
-          "name": "integration_secret__updated_at_idx",
-          "columns": [
-            {
-              "expression": "updated_at",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        }
-      },
-      "foreignKeys": {
-        "integrationSecret_integration_id_integration_id_fk": {
-          "name": "integrationSecret_integration_id_integration_id_fk",
-          "tableFrom": "integrationSecret",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integrationSecret_integration_id_kind_pk": {
-          "name": "integrationSecret_integration_id_kind_pk",
-          "columns": [
-            "integration_id",
-            "kind"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.integrationUserPermission": {
-      "name": "integrationUserPermission",
-      "schema": "",
-      "columns": {
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "permission": {
-          "name": "permission",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integrationUserPermission_integration_id_integration_id_fk": {
-          "name": "integrationUserPermission_integration_id_integration_id_fk",
-          "tableFrom": "integrationUserPermission",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integrationUserPermission_user_id_user_id_fk": {
-          "name": "integrationUserPermission_user_id_user_id_fk",
-          "tableFrom": "integrationUserPermission",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integrationUserPermission_integration_id_user_id_permission_pk": {
-          "name": "integrationUserPermission_integration_id_user_id_permission_pk",
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.integration": {
-      "name": "integration",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "url": {
-          "name": "url",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "kind": {
-          "name": "kind",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "app_id": {
-          "name": "app_id",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {
-        "integration__kind_idx": {
-          "name": "integration__kind_idx",
-          "columns": [
-            {
-              "expression": "kind",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        }
-      },
-      "foreignKeys": {
-        "integration_app_id_app_id_fk": {
-          "name": "integration_app_id_app_id_fk",
-          "tableFrom": "integration",
-          "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.invite": {
-      "name": "invite",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "token": {
-          "name": "token",
-          "type": "varchar(512)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "expiration_date": {
-          "name": "expiration_date",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "creator_id": {
-          "name": "creator_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "invite_creator_id_user_id_fk": {
-          "name": "invite_creator_id_user_id_fk",
-          "tableFrom": "invite",
-          "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "invite_token_unique": {
-          "name": "invite_token_unique",
-          "nullsNotDistinct": false,
-          "columns": [
-            "token"
-          ]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.item_layout": {
-      "name": "item_layout",
-      "schema": "",
-      "columns": {
-        "item_id": {
-          "name": "item_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "section_id": {
-          "name": "section_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "layout_id": {
-          "name": "layout_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "x_offset": {
-          "name": "x_offset",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "y_offset": {
-          "name": "y_offset",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "width": {
-          "name": "width",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "height": {
-          "name": "height",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "item_layout_item_id_item_id_fk": {
-          "name": "item_layout_item_id_item_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "item_layout_section_id_section_id_fk": {
-          "name": "item_layout_section_id_section_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "item_layout_layout_id_layout_id_fk": {
-          "name": "item_layout_layout_id_layout_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "item_layout_item_id_section_id_layout_id_pk": {
-          "name": "item_layout_item_id_section_id_layout_id_pk",
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.item": {
-      "name": "item",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "board_id": {
-          "name": "board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "kind": {
-          "name": "kind",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "options": {
-          "name": "options",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'{\"json\": {}}'"
-        },
-        "advanced_options": {
-          "name": "advanced_options",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'{\"json\": {}}'"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "item_board_id_board_id_fk": {
-          "name": "item_board_id_board_id_fk",
-          "tableFrom": "item",
-          "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.layout": {
-      "name": "layout",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "name": {
-          "name": "name",
-          "type": "varchar(32)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "board_id": {
-          "name": "board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "column_count": {
-          "name": "column_count",
-          "type": "smallint",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "breakpoint": {
-          "name": "breakpoint",
-          "type": "smallint",
-          "primaryKey": false,
-          "notNull": true,
-          "default": 0
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "layout_board_id_board_id_fk": {
-          "name": "layout_board_id_board_id_fk",
-          "tableFrom": "layout",
-          "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
     "public.media": {
       "name": "media",
       "schema": "",
@@ -1939,12 +1686,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2046,12 +1789,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2061,9 +1800,7 @@
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "short"
-          ]
+          "columns": ["short"]
         }
       },
       "policies": {},
@@ -2100,12 +1837,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2113,12 +1846,8 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2126,10 +1855,7 @@
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
           "name": "section_collapse_state_user_id_section_id_pk",
-          "columns": [
-            "user_id",
-            "section_id"
-          ]
+          "columns": ["user_id", "section_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2190,12 +1916,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2203,12 +1925,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2216,12 +1934,8 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2229,10 +1943,7 @@
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
           "name": "section_layout_section_id_layout_id_pk",
-          "columns": [
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2294,12 +2005,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2335,9 +2042,7 @@
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "policies": {},
@@ -2389,12 +2094,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2433,10 +2134,7 @@
       "compositePrimaryKeys": {
         "trusted_certificate_hostname_hostname_thumbprint_pk": {
           "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ]
+          "columns": ["hostname", "thumbprint"]
         }
       },
       "uniqueConstraints": {},
@@ -2572,12 +2270,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2585,12 +2279,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2598,12 +2288,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2642,10 +2328,7 @@
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
           "name": "verificationToken_identifier_token_pk",
-          "columns": [
-            "identifier",
-            "token"
-          ]
+          "columns": ["identifier", "token"]
         }
       },
       "uniqueConstraints": {},
@@ -2688,12 +2371,8 @@
           "name": "widget_secret_item_id_item_id_fk",
           "tableFrom": "widget_secret",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2701,10 +2380,7 @@
       "compositePrimaryKeys": {
         "widget_secret_item_id_kind_pk": {
           "name": "widget_secret_item_id_kind_pk",
-          "columns": [
-            "item_id",
-            "kind"
-          ]
+          "columns": ["item_id", "kind"]
         }
       },
       "uniqueConstraints": {},
diff --git a/packages/db/migrations/postgresql/meta/0011_snapshot.json b/packages/db/migrations/postgresql/meta/0011_snapshot.json
index f27da6133..b7d8f6843 100644
--- a/packages/db/migrations/postgresql/meta/0011_snapshot.json
+++ b/packages/db/migrations/postgresql/meta/0011_snapshot.json
@@ -1,6 +1,6 @@
 {
-  "id": "20700812-32d6-49cc-8bfd-85dd2692bd78",
-  "prevId": "c449da8d-68ab-46bc-8449-1dff8b6ea844",
+  "id": "c0fb2530-8de7-47b6-8229-8e715dc57f09",
+  "prevId": "99938d86-5059-41b3-a21c-ac767440ed00",
   "version": "7",
   "dialect": "postgresql",
   "tables": {
@@ -97,12 +97,8 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -110,10 +106,7 @@
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
           "name": "account_provider_provider_account_id_pk",
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ]
+          "columns": ["provider", "provider_account_id"]
         }
       },
       "uniqueConstraints": {},
@@ -150,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -215,261 +204,6 @@
       "checkConstraints": {},
       "isRLSEnabled": false
     },
-    "public.assistant_configuration": {
-      "name": "assistant_configuration",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "'default'"
-        },
-        "enabled": {
-          "name": "enabled",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true,
-          "default": false
-        },
-        "web_search_enabled": {
-          "name": "web_search_enabled",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true,
-          "default": false
-        },
-        "provider": {
-          "name": "provider",
-          "type": "varchar(32)",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'openrouter'"
-        },
-        "base_url": {
-          "name": "base_url",
-          "type": "varchar(2048)",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'https://openrouter.ai/api/v1'"
-        },
-        "model_discovery_path": {
-          "name": "model_discovery_path",
-          "type": "varchar(512)",
-          "primaryKey": false,
-          "notNull": false,
-          "default": "'/models'"
-        },
-        "encrypted_api_key": {
-          "name": "encrypted_api_key",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "encrypted_headers": {
-          "name": "encrypted_headers",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "model_id": {
-          "name": "model_id",
-          "type": "varchar(256)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.assistant_message": {
-      "name": "assistant_message",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(128)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "thread_id": {
-          "name": "thread_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "parent_id": {
-          "name": "parent_id",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "format": {
-          "name": "format",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'ai-sdk/v6'"
-        },
-        "content": {
-          "name": "content",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'{\"json\": {}}'"
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        }
-      },
-      "indexes": {
-        "assistant_message__thread_id_created_at_idx": {
-          "name": "assistant_message__thread_id_created_at_idx",
-          "columns": [
-            {
-              "expression": "thread_id",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            },
-            {
-              "expression": "created_at",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        }
-      },
-      "foreignKeys": {
-        "assistant_message_thread_id_assistant_thread_id_fk": {
-          "name": "assistant_message_thread_id_assistant_thread_id_fk",
-          "tableFrom": "assistant_message",
-          "tableTo": "assistant_thread",
-          "columnsFrom": [
-            "thread_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.assistant_thread": {
-      "name": "assistant_thread",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "title": {
-          "name": "title",
-          "type": "varchar(256)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "model_id": {
-          "name": "model_id",
-          "type": "varchar(256)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        }
-      },
-      "indexes": {
-        "assistant_thread__user_id_updated_at_idx": {
-          "name": "assistant_thread__user_id_updated_at_idx",
-          "columns": [
-            {
-              "expression": "user_id",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            },
-            {
-              "expression": "updated_at",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        }
-      },
-      "foreignKeys": {
-        "assistant_thread_user_id_user_id_fk": {
-          "name": "assistant_thread_user_id_user_id_fk",
-          "tableFrom": "assistant_thread",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
     "public.boardGroupPermission": {
       "name": "boardGroupPermission",
       "schema": "",
@@ -499,12 +233,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -512,12 +242,8 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -525,11 +251,7 @@
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
           "name": "boardGroupPermission_board_id_group_id_permission_pk",
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ]
+          "columns": ["board_id", "group_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -566,12 +288,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -579,12 +297,8 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -592,11 +306,7 @@
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
           "name": "boardUserPermission_board_id_user_id_permission_pk",
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ]
+          "columns": ["board_id", "user_id", "permission"]
         }
       },
       "uniqueConstraints": {},
@@ -738,12 +448,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -753,9 +459,7 @@
         "board_name_unique": {
           "name": "board_name_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "name"
-          ]
+          "columns": ["name"]
         }
       },
       "policies": {},
@@ -794,6 +498,982 @@
       "checkConstraints": {},
       "isRLSEnabled": false
     },
+    "public.custom_widget_v2_definition": {
+      "name": "custom_widget_v2_definition",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "sources": {
+          "name": "sources",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "requests": {
+          "name": "requests",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "template": {
+          "name": "template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_v2_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_v2_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.custom_widget_v2_secret": {
+      "name": "custom_widget_v2_secret",
+      "schema": "",
+      "columns": {
+        "source_id": {
+          "name": "source_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "encrypted_value": {
+          "name": "encrypted_value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_secret_definition_id_fk": {
+          "name": "custom_widget_v2_secret_definition_id_fk",
+          "tableFrom": "custom_widget_v2_secret",
+          "tableTo": "custom_widget_v2_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_secret_definition_id_source_id_kind_pk": {
+          "name": "custom_widget_v2_secret_definition_id_source_id_kind_pk",
+          "columns": ["definition_id", "source_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.groupMember": {
+      "name": "groupMember",
+      "schema": "",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_group_id_group_id_fk": {
+          "name": "groupMember_group_id_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_user_id_user_id_fk": {
+          "name": "groupMember_user_id_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_group_id_user_id_pk": {
+          "name": "groupMember_group_id_user_id_pk",
+          "columns": ["group_id", "user_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.groupPermission": {
+      "name": "groupPermission",
+      "schema": "",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_group_id_group_id_fk": {
+          "name": "groupPermission_group_id_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.group": {
+      "name": "group",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "position": {
+          "name": "position",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_home_board_id_board_id_fk": {
+          "name": "group_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_mobile_home_board_id_board_id_fk": {
+          "name": "group_mobile_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "group_name_unique": {
+          "name": "group_name_unique",
+          "nullsNotDistinct": false,
+          "columns": ["name"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.iconRepository": {
+      "name": "iconRepository",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(150)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.icon": {
+      "name": "icon",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(250)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "checksum": {
+          "name": "checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "icon_repository_id": {
+          "name": "icon_repository_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_icon_repository_id_iconRepository_id_fk": {
+          "name": "icon_icon_repository_id_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integrationGroupPermissions": {
+      "name": "integrationGroupPermissions",
+      "schema": "",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationGroupPermissions_integration_id_integration_id_fk": {
+          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationGroupPermissions_group_id_group_id_fk": {
+          "name": "integrationGroupPermissions_group_id_group_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_group_permission__pk": {
+          "name": "integration_group_permission__pk",
+          "columns": ["integration_id", "group_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integration_item": {
+      "name": "integration_item",
+      "schema": "",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "name": "integration_item_item_id_integration_id_pk",
+          "columns": ["item_id", "integration_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integrationSecret": {
+      "name": "integrationSecret",
+      "schema": "",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": [
+            {
+              "expression": "kind",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": [
+            {
+              "expression": "updated_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "name": "integrationSecret_integration_id_kind_pk",
+          "columns": ["integration_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integrationUserPermission": {
+      "name": "integrationUserPermission",
+      "schema": "",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationUserPermission_integration_id_integration_id_fk": {
+          "name": "integrationUserPermission_integration_id_integration_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationUserPermission_user_id_user_id_fk": {
+          "name": "integrationUserPermission_user_id_user_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationUserPermission_integration_id_user_id_permission_pk": {
+          "name": "integrationUserPermission_integration_id_user_id_permission_pk",
+          "columns": ["integration_id", "user_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integration": {
+      "name": "integration",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "app_id": {
+          "name": "app_id",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": [
+            {
+              "expression": "kind",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "integration_app_id_app_id_fk": {
+          "name": "integration_app_id_app_id_fk",
+          "tableFrom": "integration",
+          "tableTo": "app",
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.invite": {
+      "name": "invite",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "nullsNotDistinct": false,
+          "columns": ["token"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.item_layout": {
+      "name": "item_layout",
+      "schema": "",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_layout_item_id_item_id_fk": {
+          "name": "item_layout_item_id_item_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_section_id_section_id_fk": {
+          "name": "item_layout_section_id_section_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_layout_id_layout_id_fk": {
+          "name": "item_layout_layout_id_layout_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_layout_item_id_section_id_layout_id_pk": {
+          "name": "item_layout_item_id_section_id_layout_id_pk",
+          "columns": ["item_id", "section_id", "layout_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.item": {
+      "name": "item",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'{\"json\": {}}'"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_board_id_board_id_fk": {
+          "name": "item_board_id_board_id_fk",
+          "tableFrom": "item",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.layout": {
+      "name": "layout",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "left_gutter_column_count": {
+          "name": "left_gutter_column_count",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "right_gutter_column_count": {
+          "name": "right_gutter_column_count",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "breakpoint": {
+          "name": "breakpoint",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "layout_board_id_board_id_fk": {
+          "name": "layout_board_id_board_id_fk",
+          "tableFrom": "layout",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
     "public.custom_widget_definition": {
       "name": "custom_widget_definition",
       "schema": "",
@@ -902,12 +1582,8 @@
           "name": "custom_widget_definition_creator_id_user_id_fk",
           "tableFrom": "custom_widget_definition",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -953,12 +1629,8 @@
           "name": "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
           "tableFrom": "custom_widget_secret",
           "tableTo": "custom_widget_definition",
-          "columnsFrom": [
-            "definition_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -966,10 +1638,7 @@
       "compositePrimaryKeys": {
         "custom_widget_secret_definition_id_kind_pk": {
           "name": "custom_widget_secret_definition_id_kind_pk",
-          "columns": [
-            "definition_id",
-            "kind"
-          ]
+          "columns": ["definition_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -977,921 +1646,6 @@
       "checkConstraints": {},
       "isRLSEnabled": false
     },
-    "public.groupMember": {
-      "name": "groupMember",
-      "schema": "",
-      "columns": {
-        "group_id": {
-          "name": "group_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "groupMember_group_id_group_id_fk": {
-          "name": "groupMember_group_id_group_id_fk",
-          "tableFrom": "groupMember",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "groupMember_user_id_user_id_fk": {
-          "name": "groupMember_user_id_user_id_fk",
-          "tableFrom": "groupMember",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "groupMember_group_id_user_id_pk": {
-          "name": "groupMember_group_id_user_id_pk",
-          "columns": [
-            "group_id",
-            "user_id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.groupPermission": {
-      "name": "groupPermission",
-      "schema": "",
-      "columns": {
-        "group_id": {
-          "name": "group_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "permission": {
-          "name": "permission",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "groupPermission_group_id_group_id_fk": {
-          "name": "groupPermission_group_id_group_id_fk",
-          "tableFrom": "groupPermission",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.group": {
-      "name": "group",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "name": {
-          "name": "name",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "owner_id": {
-          "name": "owner_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "home_board_id": {
-          "name": "home_board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "mobile_home_board_id": {
-          "name": "mobile_home_board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "position": {
-          "name": "position",
-          "type": "smallint",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "group_owner_id_user_id_fk": {
-          "name": "group_owner_id_user_id_fk",
-          "tableFrom": "group",
-          "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        },
-        "group_home_board_id_board_id_fk": {
-          "name": "group_home_board_id_board_id_fk",
-          "tableFrom": "group",
-          "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        },
-        "group_mobile_home_board_id_board_id_fk": {
-          "name": "group_mobile_home_board_id_board_id_fk",
-          "tableFrom": "group",
-          "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "group_name_unique": {
-          "name": "group_name_unique",
-          "nullsNotDistinct": false,
-          "columns": [
-            "name"
-          ]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.iconRepository": {
-      "name": "iconRepository",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "slug": {
-          "name": "slug",
-          "type": "varchar(150)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.icon": {
-      "name": "icon",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "name": {
-          "name": "name",
-          "type": "varchar(250)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "url": {
-          "name": "url",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "checksum": {
-          "name": "checksum",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "icon_repository_id": {
-          "name": "icon_repository_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "icon_icon_repository_id_iconRepository_id_fk": {
-          "name": "icon_icon_repository_id_iconRepository_id_fk",
-          "tableFrom": "icon",
-          "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.integrationGroupPermissions": {
-      "name": "integrationGroupPermissions",
-      "schema": "",
-      "columns": {
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "group_id": {
-          "name": "group_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "permission": {
-          "name": "permission",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integrationGroupPermissions_integration_id_integration_id_fk": {
-          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
-          "tableFrom": "integrationGroupPermissions",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integrationGroupPermissions_group_id_group_id_fk": {
-          "name": "integrationGroupPermissions_group_id_group_id_fk",
-          "tableFrom": "integrationGroupPermissions",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integration_group_permission__pk": {
-          "name": "integration_group_permission__pk",
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.integration_item": {
-      "name": "integration_item",
-      "schema": "",
-      "columns": {
-        "item_id": {
-          "name": "item_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integration_item_item_id_item_id_fk": {
-          "name": "integration_item_item_id_item_id_fk",
-          "tableFrom": "integration_item",
-          "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integration_item_integration_id_integration_id_fk": {
-          "name": "integration_item_integration_id_integration_id_fk",
-          "tableFrom": "integration_item",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integration_item_item_id_integration_id_pk": {
-          "name": "integration_item_item_id_integration_id_pk",
-          "columns": [
-            "item_id",
-            "integration_id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.integrationSecret": {
-      "name": "integrationSecret",
-      "schema": "",
-      "columns": {
-        "kind": {
-          "name": "kind",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "value": {
-          "name": "value",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {
-        "integration_secret__kind_idx": {
-          "name": "integration_secret__kind_idx",
-          "columns": [
-            {
-              "expression": "kind",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        },
-        "integration_secret__updated_at_idx": {
-          "name": "integration_secret__updated_at_idx",
-          "columns": [
-            {
-              "expression": "updated_at",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        }
-      },
-      "foreignKeys": {
-        "integrationSecret_integration_id_integration_id_fk": {
-          "name": "integrationSecret_integration_id_integration_id_fk",
-          "tableFrom": "integrationSecret",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integrationSecret_integration_id_kind_pk": {
-          "name": "integrationSecret_integration_id_kind_pk",
-          "columns": [
-            "integration_id",
-            "kind"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.integrationUserPermission": {
-      "name": "integrationUserPermission",
-      "schema": "",
-      "columns": {
-        "integration_id": {
-          "name": "integration_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "permission": {
-          "name": "permission",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integrationUserPermission_integration_id_integration_id_fk": {
-          "name": "integrationUserPermission_integration_id_integration_id_fk",
-          "tableFrom": "integrationUserPermission",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integrationUserPermission_user_id_user_id_fk": {
-          "name": "integrationUserPermission_user_id_user_id_fk",
-          "tableFrom": "integrationUserPermission",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integrationUserPermission_integration_id_user_id_permission_pk": {
-          "name": "integrationUserPermission_integration_id_user_id_permission_pk",
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.integration": {
-      "name": "integration",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "url": {
-          "name": "url",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "kind": {
-          "name": "kind",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "app_id": {
-          "name": "app_id",
-          "type": "varchar(128)",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {
-        "integration__kind_idx": {
-          "name": "integration__kind_idx",
-          "columns": [
-            {
-              "expression": "kind",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        }
-      },
-      "foreignKeys": {
-        "integration_app_id_app_id_fk": {
-          "name": "integration_app_id_app_id_fk",
-          "tableFrom": "integration",
-          "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.invite": {
-      "name": "invite",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "token": {
-          "name": "token",
-          "type": "varchar(512)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "expiration_date": {
-          "name": "expiration_date",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "creator_id": {
-          "name": "creator_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "invite_creator_id_user_id_fk": {
-          "name": "invite_creator_id_user_id_fk",
-          "tableFrom": "invite",
-          "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "invite_token_unique": {
-          "name": "invite_token_unique",
-          "nullsNotDistinct": false,
-          "columns": [
-            "token"
-          ]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.item_layout": {
-      "name": "item_layout",
-      "schema": "",
-      "columns": {
-        "item_id": {
-          "name": "item_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "section_id": {
-          "name": "section_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "layout_id": {
-          "name": "layout_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "x_offset": {
-          "name": "x_offset",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "y_offset": {
-          "name": "y_offset",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "width": {
-          "name": "width",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "height": {
-          "name": "height",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "item_layout_item_id_item_id_fk": {
-          "name": "item_layout_item_id_item_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "item_layout_section_id_section_id_fk": {
-          "name": "item_layout_section_id_section_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "item_layout_layout_id_layout_id_fk": {
-          "name": "item_layout_layout_id_layout_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "item_layout_item_id_section_id_layout_id_pk": {
-          "name": "item_layout_item_id_section_id_layout_id_pk",
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ]
-        }
-      },
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.item": {
-      "name": "item",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "board_id": {
-          "name": "board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "kind": {
-          "name": "kind",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "options": {
-          "name": "options",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'{\"json\": {}}'"
-        },
-        "advanced_options": {
-          "name": "advanced_options",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'{\"json\": {}}'"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "item_board_id_board_id_fk": {
-          "name": "item_board_id_board_id_fk",
-          "tableFrom": "item",
-          "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "public.layout": {
-      "name": "layout",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "varchar(64)",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "name": {
-          "name": "name",
-          "type": "varchar(32)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "board_id": {
-          "name": "board_id",
-          "type": "varchar(64)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "column_count": {
-          "name": "column_count",
-          "type": "smallint",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "breakpoint": {
-          "name": "breakpoint",
-          "type": "smallint",
-          "primaryKey": false,
-          "notNull": true,
-          "default": 0
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "layout_board_id_board_id_fk": {
-          "name": "layout_board_id_board_id_fk",
-          "tableFrom": "layout",
-          "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
     "public.media": {
       "name": "media",
       "schema": "",
@@ -1946,12 +1700,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2053,12 +1803,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2068,9 +1814,7 @@
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "short"
-          ]
+          "columns": ["short"]
         }
       },
       "policies": {},
@@ -2107,12 +1851,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2120,12 +1860,8 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2133,10 +1869,7 @@
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
           "name": "section_collapse_state_user_id_section_id_pk",
-          "columns": [
-            "user_id",
-            "section_id"
-          ]
+          "columns": ["user_id", "section_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2197,12 +1930,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2210,12 +1939,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2223,12 +1948,8 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2236,10 +1957,7 @@
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
           "name": "section_layout_section_id_layout_id_pk",
-          "columns": [
-            "section_id",
-            "layout_id"
-          ]
+          "columns": ["section_id", "layout_id"]
         }
       },
       "uniqueConstraints": {},
@@ -2301,12 +2019,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2342,9 +2056,7 @@
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
           "nullsNotDistinct": false,
-          "columns": [
-            "setting_key"
-          ]
+          "columns": ["setting_key"]
         }
       },
       "policies": {},
@@ -2396,12 +2108,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2540,12 +2248,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2553,12 +2257,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2566,12 +2266,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2610,10 +2306,7 @@
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
           "name": "verificationToken_identifier_token_pk",
-          "columns": [
-            "identifier",
-            "token"
-          ]
+          "columns": ["identifier", "token"]
         }
       },
       "uniqueConstraints": {},
@@ -2656,12 +2349,8 @@
           "name": "widget_secret_item_id_item_id_fk",
           "tableFrom": "widget_secret",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2669,10 +2358,7 @@
       "compositePrimaryKeys": {
         "widget_secret_item_id_kind_pk": {
           "name": "widget_secret_item_id_kind_pk",
-          "columns": [
-            "item_id",
-            "kind"
-          ]
+          "columns": ["item_id", "kind"]
         }
       },
       "uniqueConstraints": {},
@@ -2708,10 +2394,7 @@
       "compositePrimaryKeys": {
         "trusted_certificate_hostname_hostname_thumbprint_pk": {
           "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ]
+          "columns": ["hostname", "thumbprint"]
         }
       },
       "uniqueConstraints": {},
@@ -2731,4 +2414,4 @@
     "schemas": {},
     "tables": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/db/migrations/postgresql/meta/0012_snapshot.json b/packages/db/migrations/postgresql/meta/0012_snapshot.json
new file mode 100644
index 000000000..6611b879c
--- /dev/null
+++ b/packages/db/migrations/postgresql/meta/0012_snapshot.json
@@ -0,0 +1,2424 @@
+{
+  "id": "f1d7a91a-bf16-4f26-a0ae-ce77eab2a40e",
+  "prevId": "c0fb2530-8de7-47b6-8229-8e715dc57f09",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.account": {
+      "name": "account",
+      "schema": "",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "provider_account_id": {
+          "name": "provider_account_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "token_type": {
+          "name": "token_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "session_state": {
+          "name": "session_state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "userId_idx": {
+          "name": "userId_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "account_user_id_user_id_fk": {
+          "name": "account_user_id_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "account_provider_provider_account_id_pk": {
+          "name": "account_provider_provider_account_id_pk",
+          "columns": ["provider", "provider_account_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.apiKey": {
+      "name": "apiKey",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "api_key": {
+          "name": "api_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "apiKey_user_id_user_id_fk": {
+          "name": "apiKey_user_id_user_id_fk",
+          "tableFrom": "apiKey",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.app": {
+      "name": "app",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "href": {
+          "name": "href",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "ping_url": {
+          "name": "ping_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.boardGroupPermission": {
+      "name": "boardGroupPermission",
+      "schema": "",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardGroupPermission_board_id_board_id_fk": {
+          "name": "boardGroupPermission_board_id_board_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardGroupPermission_group_id_group_id_fk": {
+          "name": "boardGroupPermission_group_id_group_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardGroupPermission_board_id_group_id_permission_pk": {
+          "name": "boardGroupPermission_board_id_group_id_permission_pk",
+          "columns": ["board_id", "group_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.boardUserPermission": {
+      "name": "boardUserPermission",
+      "schema": "",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardUserPermission_board_id_board_id_fk": {
+          "name": "boardUserPermission_board_id_board_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardUserPermission_user_id_user_id_fk": {
+          "name": "boardUserPermission_user_id_user_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardUserPermission_board_id_user_id_permission_pk": {
+          "name": "boardUserPermission_board_id_user_id_permission_pk",
+          "columns": ["board_id", "user_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.board": {
+      "name": "board",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "page_title": {
+          "name": "page_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "meta_title": {
+          "name": "meta_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "logo_image_url": {
+          "name": "logo_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "favicon_image_url": {
+          "name": "favicon_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "background_image_url": {
+          "name": "background_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "background_image_attachment": {
+          "name": "background_image_attachment",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'fixed'"
+        },
+        "background_image_repeat": {
+          "name": "background_image_repeat",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'no-repeat'"
+        },
+        "background_image_size": {
+          "name": "background_image_size",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'cover'"
+        },
+        "primary_color": {
+          "name": "primary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'#fa5252'"
+        },
+        "secondary_color": {
+          "name": "secondary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'#fd7e14'"
+        },
+        "opacity": {
+          "name": "opacity",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 100
+        },
+        "custom_css": {
+          "name": "custom_css",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "icon_color": {
+          "name": "icon_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "item_radius": {
+          "name": "item_radius",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'lg'"
+        },
+        "disable_status": {
+          "name": "disable_status",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "board_creator_id_user_id_fk": {
+          "name": "board_creator_id_user_id_fk",
+          "tableFrom": "board",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "board_name_unique": {
+          "name": "board_name_unique",
+          "nullsNotDistinct": false,
+          "columns": ["name"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.cron_job_configuration": {
+      "name": "cron_job_configuration",
+      "schema": "",
+      "columns": {
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "cron_expression": {
+          "name": "cron_expression",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "is_enabled": {
+          "name": "is_enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.custom_widget_v2_definition": {
+      "name": "custom_widget_v2_definition",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "sources": {
+          "name": "sources",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "requests": {
+          "name": "requests",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "template": {
+          "name": "template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_v2_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_v2_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.custom_widget_v2_secret": {
+      "name": "custom_widget_v2_secret",
+      "schema": "",
+      "columns": {
+        "source_id": {
+          "name": "source_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "encrypted_value": {
+          "name": "encrypted_value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_secret_definition_id_fk": {
+          "name": "custom_widget_v2_secret_definition_id_fk",
+          "tableFrom": "custom_widget_v2_secret",
+          "tableTo": "custom_widget_v2_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_secret_definition_id_source_id_kind_pk": {
+          "name": "custom_widget_v2_secret_definition_id_source_id_kind_pk",
+          "columns": ["definition_id", "source_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.groupMember": {
+      "name": "groupMember",
+      "schema": "",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_group_id_group_id_fk": {
+          "name": "groupMember_group_id_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_user_id_user_id_fk": {
+          "name": "groupMember_user_id_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_group_id_user_id_pk": {
+          "name": "groupMember_group_id_user_id_pk",
+          "columns": ["group_id", "user_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.groupPermission": {
+      "name": "groupPermission",
+      "schema": "",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_group_id_group_id_fk": {
+          "name": "groupPermission_group_id_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.group": {
+      "name": "group",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "position": {
+          "name": "position",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_home_board_id_board_id_fk": {
+          "name": "group_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_mobile_home_board_id_board_id_fk": {
+          "name": "group_mobile_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "group_name_unique": {
+          "name": "group_name_unique",
+          "nullsNotDistinct": false,
+          "columns": ["name"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.iconRepository": {
+      "name": "iconRepository",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(150)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.icon": {
+      "name": "icon",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(250)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "checksum": {
+          "name": "checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "icon_repository_id": {
+          "name": "icon_repository_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_icon_repository_id_iconRepository_id_fk": {
+          "name": "icon_icon_repository_id_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integrationGroupPermissions": {
+      "name": "integrationGroupPermissions",
+      "schema": "",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationGroupPermissions_integration_id_integration_id_fk": {
+          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationGroupPermissions_group_id_group_id_fk": {
+          "name": "integrationGroupPermissions_group_id_group_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_group_permission__pk": {
+          "name": "integration_group_permission__pk",
+          "columns": ["integration_id", "group_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integration_item": {
+      "name": "integration_item",
+      "schema": "",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "name": "integration_item_item_id_integration_id_pk",
+          "columns": ["item_id", "integration_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integrationSecret": {
+      "name": "integrationSecret",
+      "schema": "",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": [
+            {
+              "expression": "kind",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": [
+            {
+              "expression": "updated_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "name": "integrationSecret_integration_id_kind_pk",
+          "columns": ["integration_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integrationUserPermission": {
+      "name": "integrationUserPermission",
+      "schema": "",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationUserPermission_integration_id_integration_id_fk": {
+          "name": "integrationUserPermission_integration_id_integration_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationUserPermission_user_id_user_id_fk": {
+          "name": "integrationUserPermission_user_id_user_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationUserPermission_integration_id_user_id_permission_pk": {
+          "name": "integrationUserPermission_integration_id_user_id_permission_pk",
+          "columns": ["integration_id", "user_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integration": {
+      "name": "integration",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "app_id": {
+          "name": "app_id",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": [
+            {
+              "expression": "kind",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "integration_app_id_app_id_fk": {
+          "name": "integration_app_id_app_id_fk",
+          "tableFrom": "integration",
+          "tableTo": "app",
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.invite": {
+      "name": "invite",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "nullsNotDistinct": false,
+          "columns": ["token"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.item_layout": {
+      "name": "item_layout",
+      "schema": "",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_layout_item_id_item_id_fk": {
+          "name": "item_layout_item_id_item_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_section_id_section_id_fk": {
+          "name": "item_layout_section_id_section_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_layout_id_layout_id_fk": {
+          "name": "item_layout_layout_id_layout_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_layout_item_id_section_id_layout_id_pk": {
+          "name": "item_layout_item_id_section_id_layout_id_pk",
+          "columns": ["item_id", "section_id", "layout_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.item": {
+      "name": "item",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'{\"json\": {}}'"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_board_id_board_id_fk": {
+          "name": "item_board_id_board_id_fk",
+          "tableFrom": "item",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.layout": {
+      "name": "layout",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "left_gutter_column_count": {
+          "name": "left_gutter_column_count",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "right_gutter_column_count": {
+          "name": "right_gutter_column_count",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "breakpoint": {
+          "name": "breakpoint",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "role": {
+          "name": "role",
+          "type": "varchar(16)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'custom'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "layout_board_id_board_id_fk": {
+          "name": "layout_board_id_board_id_fk",
+          "tableFrom": "layout",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.custom_widget_definition": {
+      "name": "custom_widget_definition",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "auth_type": {
+          "name": "auth_type",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'none'"
+        },
+        "header_name": {
+          "name": "header_name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "method": {
+          "name": "method",
+          "type": "varchar(16)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'GET'"
+        },
+        "request_body": {
+          "name": "request_body",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "display_type": {
+          "name": "display_type",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'singleValue'"
+        },
+        "display_config": {
+          "name": "display_config",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'{\"json\": {}}'"
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.custom_widget_secret": {
+      "name": "custom_widget_secret",
+      "schema": "",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_secret_definition_id_custom_widget_definition_id_fk": {
+          "name": "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
+          "tableFrom": "custom_widget_secret",
+          "tableTo": "custom_widget_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_secret_definition_id_kind_pk": {
+          "name": "custom_widget_secret_definition_id_kind_pk",
+          "columns": ["definition_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media": {
+      "name": "media",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "content": {
+          "name": "content",
+          "type": "bytea",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "content_type": {
+          "name": "content_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "size": {
+          "name": "size",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "media_creator_id_user_id_fk": {
+          "name": "media_creator_id_user_id_fk",
+          "tableFrom": "media",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.onboarding": {
+      "name": "onboarding",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "step": {
+          "name": "step",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "previous_step": {
+          "name": "previous_step",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.search_engine": {
+      "name": "search_engine",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "short": {
+          "name": "short",
+          "type": "varchar(8)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "url_template": {
+          "name": "url_template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "type": {
+          "name": "type",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'generic'"
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "search_engine_integration_id_integration_id_fk": {
+          "name": "search_engine_integration_id_integration_id_fk",
+          "tableFrom": "search_engine",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "search_engine_short_unique": {
+          "name": "search_engine_short_unique",
+          "nullsNotDistinct": false,
+          "columns": ["short"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.section_collapse_state": {
+      "name": "section_collapse_state",
+      "schema": "",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "collapsed": {
+          "name": "collapsed",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_collapse_state_user_id_user_id_fk": {
+          "name": "section_collapse_state_user_id_user_id_fk",
+          "tableFrom": "section_collapse_state",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_collapse_state_section_id_section_id_fk": {
+          "name": "section_collapse_state_section_id_section_id_fk",
+          "tableFrom": "section_collapse_state",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_collapse_state_user_id_section_id_pk": {
+          "name": "section_collapse_state_user_id_section_id_pk",
+          "columns": ["user_id", "section_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.section_layout": {
+      "name": "section_layout",
+      "schema": "",
+      "columns": {
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "parent_section_id": {
+          "name": "parent_section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_layout_section_id_section_id_fk": {
+          "name": "section_layout_section_id_section_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_layout_layout_id_layout_id_fk": {
+          "name": "section_layout_layout_id_layout_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_layout_parent_section_id_section_id_fk": {
+          "name": "section_layout_parent_section_id_section_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "section",
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_layout_section_id_layout_id_pk": {
+          "name": "section_layout_section_id_layout_id_pk",
+          "columns": ["section_id", "layout_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.section": {
+      "name": "section",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_board_id_board_id_fk": {
+          "name": "section_board_id_board_id_fk",
+          "tableFrom": "section",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.serverSetting": {
+      "name": "serverSetting",
+      "schema": "",
+      "columns": {
+        "setting_key": {
+          "name": "setting_key",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "serverSetting_settingKey_unique": {
+          "name": "serverSetting_settingKey_unique",
+          "nullsNotDistinct": false,
+          "columns": ["setting_key"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.session": {
+      "name": "session",
+      "schema": "",
+      "columns": {
+        "session_token": {
+          "name": "session_token",
+          "type": "varchar(512)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "user_id_idx": {
+          "name": "user_id_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "session_user_id_user_id_fk": {
+          "name": "session_user_id_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.trusted_certificate_hostname": {
+      "name": "trusted_certificate_hostname",
+      "schema": "",
+      "columns": {
+        "hostname": {
+          "name": "hostname",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "thumbprint": {
+          "name": "thumbprint",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "certificate": {
+          "name": "certificate",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "trusted_certificate_hostname_hostname_thumbprint_pk": {
+          "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
+          "columns": ["hostname", "thumbprint"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.user": {
+      "name": "user",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'credentials'"
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "default_search_engine_id": {
+          "name": "default_search_engine_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "open_search_in_new_tab": {
+          "name": "open_search_in_new_tab",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "ddg_bangs": {
+          "name": "ddg_bangs",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "color_scheme": {
+          "name": "color_scheme",
+          "type": "varchar(5)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'dark'"
+        },
+        "first_day_of_week": {
+          "name": "first_day_of_week",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 1
+        },
+        "ping_icons_enabled": {
+          "name": "ping_icons_enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "enable_right_click_on_widgets": {
+          "name": "enable_right_click_on_widgets",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "completed_manage_tour": {
+          "name": "completed_manage_tour",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "completed_board_tour": {
+          "name": "completed_board_tour",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_home_board_id_board_id_fk": {
+          "name": "user_home_board_id_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "user_mobile_home_board_id_board_id_fk": {
+          "name": "user_mobile_home_board_id_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "user_default_search_engine_id_search_engine_id_fk": {
+          "name": "user_default_search_engine_id_search_engine_id_fk",
+          "tableFrom": "user",
+          "tableTo": "search_engine",
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.verificationToken": {
+      "name": "verificationToken",
+      "schema": "",
+      "columns": {
+        "identifier": {
+          "name": "identifier",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "verificationToken_identifier_token_pk": {
+          "name": "verificationToken_identifier_token_pk",
+          "columns": ["identifier", "token"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.widget_secret": {
+      "name": "widget_secret",
+      "schema": "",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "widget_secret_item_id_item_id_fk": {
+          "name": "widget_secret_item_id_item_id_fk",
+          "tableFrom": "widget_secret",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "widget_secret_item_id_kind_pk": {
+          "name": "widget_secret_item_id_kind_pk",
+          "columns": ["item_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
diff --git a/packages/db/migrations/postgresql/meta/0013_snapshot.json b/packages/db/migrations/postgresql/meta/0013_snapshot.json
new file mode 100644
index 000000000..215ff423a
--- /dev/null
+++ b/packages/db/migrations/postgresql/meta/0013_snapshot.json
@@ -0,0 +1,2670 @@
+{
+  "id": "ab2696e9-42d1-4aa0-bc60-b6d9fc50a7dc",
+  "prevId": "f1d7a91a-bf16-4f26-a0ae-ce77eab2a40e",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.account": {
+      "name": "account",
+      "schema": "",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "provider_account_id": {
+          "name": "provider_account_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "token_type": {
+          "name": "token_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "session_state": {
+          "name": "session_state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "userId_idx": {
+          "name": "userId_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "account_user_id_user_id_fk": {
+          "name": "account_user_id_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "account_provider_provider_account_id_pk": {
+          "name": "account_provider_provider_account_id_pk",
+          "columns": ["provider", "provider_account_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.apiKey": {
+      "name": "apiKey",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "api_key": {
+          "name": "api_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "apiKey_user_id_user_id_fk": {
+          "name": "apiKey_user_id_user_id_fk",
+          "tableFrom": "apiKey",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.app": {
+      "name": "app",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "href": {
+          "name": "href",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "ping_url": {
+          "name": "ping_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.assistant_configuration": {
+      "name": "assistant_configuration",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "'default'"
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "web_search_enabled": {
+          "name": "web_search_enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'openrouter'"
+        },
+        "base_url": {
+          "name": "base_url",
+          "type": "varchar(2048)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'https://openrouter.ai/api/v1'"
+        },
+        "model_discovery_path": {
+          "name": "model_discovery_path",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'/models'"
+        },
+        "encrypted_api_key": {
+          "name": "encrypted_api_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "encrypted_headers": {
+          "name": "encrypted_headers",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "model_id": {
+          "name": "model_id",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.assistant_message": {
+      "name": "assistant_message",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(128)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "thread_id": {
+          "name": "thread_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "parent_id": {
+          "name": "parent_id",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "format": {
+          "name": "format",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'ai-sdk/v6'"
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "assistant_message__thread_id_created_at_idx": {
+          "name": "assistant_message__thread_id_created_at_idx",
+          "columns": [
+            {
+              "expression": "thread_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "created_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "assistant_message_thread_id_assistant_thread_id_fk": {
+          "name": "assistant_message_thread_id_assistant_thread_id_fk",
+          "tableFrom": "assistant_message",
+          "tableTo": "assistant_thread",
+          "columnsFrom": ["thread_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.assistant_thread": {
+      "name": "assistant_thread",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "title": {
+          "name": "title",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "model_id": {
+          "name": "model_id",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "assistant_thread__user_id_updated_at_idx": {
+          "name": "assistant_thread__user_id_updated_at_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "updated_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "assistant_thread_user_id_user_id_fk": {
+          "name": "assistant_thread_user_id_user_id_fk",
+          "tableFrom": "assistant_thread",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.boardGroupPermission": {
+      "name": "boardGroupPermission",
+      "schema": "",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardGroupPermission_board_id_board_id_fk": {
+          "name": "boardGroupPermission_board_id_board_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardGroupPermission_group_id_group_id_fk": {
+          "name": "boardGroupPermission_group_id_group_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardGroupPermission_board_id_group_id_permission_pk": {
+          "name": "boardGroupPermission_board_id_group_id_permission_pk",
+          "columns": ["board_id", "group_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.boardUserPermission": {
+      "name": "boardUserPermission",
+      "schema": "",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardUserPermission_board_id_board_id_fk": {
+          "name": "boardUserPermission_board_id_board_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardUserPermission_user_id_user_id_fk": {
+          "name": "boardUserPermission_user_id_user_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardUserPermission_board_id_user_id_permission_pk": {
+          "name": "boardUserPermission_board_id_user_id_permission_pk",
+          "columns": ["board_id", "user_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.board": {
+      "name": "board",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "page_title": {
+          "name": "page_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "meta_title": {
+          "name": "meta_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "logo_image_url": {
+          "name": "logo_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "favicon_image_url": {
+          "name": "favicon_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "background_image_url": {
+          "name": "background_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "background_image_attachment": {
+          "name": "background_image_attachment",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'fixed'"
+        },
+        "background_image_repeat": {
+          "name": "background_image_repeat",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'no-repeat'"
+        },
+        "background_image_size": {
+          "name": "background_image_size",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'cover'"
+        },
+        "primary_color": {
+          "name": "primary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'#fa5252'"
+        },
+        "secondary_color": {
+          "name": "secondary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'#fd7e14'"
+        },
+        "opacity": {
+          "name": "opacity",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 100
+        },
+        "custom_css": {
+          "name": "custom_css",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "icon_color": {
+          "name": "icon_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "item_radius": {
+          "name": "item_radius",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'lg'"
+        },
+        "disable_status": {
+          "name": "disable_status",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "board_creator_id_user_id_fk": {
+          "name": "board_creator_id_user_id_fk",
+          "tableFrom": "board",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "board_name_unique": {
+          "name": "board_name_unique",
+          "nullsNotDistinct": false,
+          "columns": ["name"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.cron_job_configuration": {
+      "name": "cron_job_configuration",
+      "schema": "",
+      "columns": {
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "cron_expression": {
+          "name": "cron_expression",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "is_enabled": {
+          "name": "is_enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.custom_widget_v2_definition": {
+      "name": "custom_widget_v2_definition",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "sources": {
+          "name": "sources",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "requests": {
+          "name": "requests",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "template": {
+          "name": "template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_v2_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_v2_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.custom_widget_v2_secret": {
+      "name": "custom_widget_v2_secret",
+      "schema": "",
+      "columns": {
+        "source_id": {
+          "name": "source_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "encrypted_value": {
+          "name": "encrypted_value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_secret_definition_id_fk": {
+          "name": "custom_widget_v2_secret_definition_id_fk",
+          "tableFrom": "custom_widget_v2_secret",
+          "tableTo": "custom_widget_v2_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_secret_definition_id_source_id_kind_pk": {
+          "name": "custom_widget_v2_secret_definition_id_source_id_kind_pk",
+          "columns": ["definition_id", "source_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.groupMember": {
+      "name": "groupMember",
+      "schema": "",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_group_id_group_id_fk": {
+          "name": "groupMember_group_id_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_user_id_user_id_fk": {
+          "name": "groupMember_user_id_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_group_id_user_id_pk": {
+          "name": "groupMember_group_id_user_id_pk",
+          "columns": ["group_id", "user_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.groupPermission": {
+      "name": "groupPermission",
+      "schema": "",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_group_id_group_id_fk": {
+          "name": "groupPermission_group_id_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.group": {
+      "name": "group",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "position": {
+          "name": "position",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_home_board_id_board_id_fk": {
+          "name": "group_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_mobile_home_board_id_board_id_fk": {
+          "name": "group_mobile_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "group_name_unique": {
+          "name": "group_name_unique",
+          "nullsNotDistinct": false,
+          "columns": ["name"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.iconRepository": {
+      "name": "iconRepository",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(150)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.icon": {
+      "name": "icon",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(250)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "checksum": {
+          "name": "checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "icon_repository_id": {
+          "name": "icon_repository_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_icon_repository_id_iconRepository_id_fk": {
+          "name": "icon_icon_repository_id_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integrationGroupPermissions": {
+      "name": "integrationGroupPermissions",
+      "schema": "",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationGroupPermissions_integration_id_integration_id_fk": {
+          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationGroupPermissions_group_id_group_id_fk": {
+          "name": "integrationGroupPermissions_group_id_group_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_group_permission__pk": {
+          "name": "integration_group_permission__pk",
+          "columns": ["integration_id", "group_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integration_item": {
+      "name": "integration_item",
+      "schema": "",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "name": "integration_item_item_id_integration_id_pk",
+          "columns": ["item_id", "integration_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integrationSecret": {
+      "name": "integrationSecret",
+      "schema": "",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": [
+            {
+              "expression": "kind",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": [
+            {
+              "expression": "updated_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "name": "integrationSecret_integration_id_kind_pk",
+          "columns": ["integration_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integrationUserPermission": {
+      "name": "integrationUserPermission",
+      "schema": "",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationUserPermission_integration_id_integration_id_fk": {
+          "name": "integrationUserPermission_integration_id_integration_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationUserPermission_user_id_user_id_fk": {
+          "name": "integrationUserPermission_user_id_user_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationUserPermission_integration_id_user_id_permission_pk": {
+          "name": "integrationUserPermission_integration_id_user_id_permission_pk",
+          "columns": ["integration_id", "user_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integration": {
+      "name": "integration",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "app_id": {
+          "name": "app_id",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": [
+            {
+              "expression": "kind",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "integration_app_id_app_id_fk": {
+          "name": "integration_app_id_app_id_fk",
+          "tableFrom": "integration",
+          "tableTo": "app",
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.invite": {
+      "name": "invite",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "nullsNotDistinct": false,
+          "columns": ["token"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.item_layout": {
+      "name": "item_layout",
+      "schema": "",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_layout_item_id_item_id_fk": {
+          "name": "item_layout_item_id_item_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_section_id_section_id_fk": {
+          "name": "item_layout_section_id_section_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_layout_id_layout_id_fk": {
+          "name": "item_layout_layout_id_layout_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_layout_item_id_section_id_layout_id_pk": {
+          "name": "item_layout_item_id_section_id_layout_id_pk",
+          "columns": ["item_id", "section_id", "layout_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.item": {
+      "name": "item",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'{\"json\": {}}'"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_board_id_board_id_fk": {
+          "name": "item_board_id_board_id_fk",
+          "tableFrom": "item",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.layout": {
+      "name": "layout",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "left_gutter_column_count": {
+          "name": "left_gutter_column_count",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "right_gutter_column_count": {
+          "name": "right_gutter_column_count",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "breakpoint": {
+          "name": "breakpoint",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "role": {
+          "name": "role",
+          "type": "varchar(16)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'custom'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "layout_board_id_board_id_fk": {
+          "name": "layout_board_id_board_id_fk",
+          "tableFrom": "layout",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.custom_widget_definition": {
+      "name": "custom_widget_definition",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "auth_type": {
+          "name": "auth_type",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'none'"
+        },
+        "header_name": {
+          "name": "header_name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "method": {
+          "name": "method",
+          "type": "varchar(16)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'GET'"
+        },
+        "request_body": {
+          "name": "request_body",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "display_type": {
+          "name": "display_type",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'singleValue'"
+        },
+        "display_config": {
+          "name": "display_config",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'{\"json\": {}}'"
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.custom_widget_secret": {
+      "name": "custom_widget_secret",
+      "schema": "",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_secret_definition_id_custom_widget_definition_id_fk": {
+          "name": "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
+          "tableFrom": "custom_widget_secret",
+          "tableTo": "custom_widget_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_secret_definition_id_kind_pk": {
+          "name": "custom_widget_secret_definition_id_kind_pk",
+          "columns": ["definition_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media": {
+      "name": "media",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "content": {
+          "name": "content",
+          "type": "bytea",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "content_type": {
+          "name": "content_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "size": {
+          "name": "size",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "media_creator_id_user_id_fk": {
+          "name": "media_creator_id_user_id_fk",
+          "tableFrom": "media",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.onboarding": {
+      "name": "onboarding",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "step": {
+          "name": "step",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "previous_step": {
+          "name": "previous_step",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.search_engine": {
+      "name": "search_engine",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "short": {
+          "name": "short",
+          "type": "varchar(8)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "url_template": {
+          "name": "url_template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "type": {
+          "name": "type",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'generic'"
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "search_engine_integration_id_integration_id_fk": {
+          "name": "search_engine_integration_id_integration_id_fk",
+          "tableFrom": "search_engine",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "search_engine_short_unique": {
+          "name": "search_engine_short_unique",
+          "nullsNotDistinct": false,
+          "columns": ["short"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.section_collapse_state": {
+      "name": "section_collapse_state",
+      "schema": "",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "collapsed": {
+          "name": "collapsed",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_collapse_state_user_id_user_id_fk": {
+          "name": "section_collapse_state_user_id_user_id_fk",
+          "tableFrom": "section_collapse_state",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_collapse_state_section_id_section_id_fk": {
+          "name": "section_collapse_state_section_id_section_id_fk",
+          "tableFrom": "section_collapse_state",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_collapse_state_user_id_section_id_pk": {
+          "name": "section_collapse_state_user_id_section_id_pk",
+          "columns": ["user_id", "section_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.section_layout": {
+      "name": "section_layout",
+      "schema": "",
+      "columns": {
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "parent_section_id": {
+          "name": "parent_section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_layout_section_id_section_id_fk": {
+          "name": "section_layout_section_id_section_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_layout_layout_id_layout_id_fk": {
+          "name": "section_layout_layout_id_layout_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_layout_parent_section_id_section_id_fk": {
+          "name": "section_layout_parent_section_id_section_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "section",
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_layout_section_id_layout_id_pk": {
+          "name": "section_layout_section_id_layout_id_pk",
+          "columns": ["section_id", "layout_id"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.section": {
+      "name": "section",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_board_id_board_id_fk": {
+          "name": "section_board_id_board_id_fk",
+          "tableFrom": "section",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.serverSetting": {
+      "name": "serverSetting",
+      "schema": "",
+      "columns": {
+        "setting_key": {
+          "name": "setting_key",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "serverSetting_settingKey_unique": {
+          "name": "serverSetting_settingKey_unique",
+          "nullsNotDistinct": false,
+          "columns": ["setting_key"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.session": {
+      "name": "session",
+      "schema": "",
+      "columns": {
+        "session_token": {
+          "name": "session_token",
+          "type": "varchar(512)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "user_id_idx": {
+          "name": "user_id_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "session_user_id_user_id_fk": {
+          "name": "session_user_id_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.trusted_certificate_hostname": {
+      "name": "trusted_certificate_hostname",
+      "schema": "",
+      "columns": {
+        "hostname": {
+          "name": "hostname",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "thumbprint": {
+          "name": "thumbprint",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "certificate": {
+          "name": "certificate",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "trusted_certificate_hostname_hostname_thumbprint_pk": {
+          "name": "trusted_certificate_hostname_hostname_thumbprint_pk",
+          "columns": ["hostname", "thumbprint"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.user": {
+      "name": "user",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'credentials'"
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "default_search_engine_id": {
+          "name": "default_search_engine_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "open_search_in_new_tab": {
+          "name": "open_search_in_new_tab",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "ddg_bangs": {
+          "name": "ddg_bangs",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "color_scheme": {
+          "name": "color_scheme",
+          "type": "varchar(5)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'dark'"
+        },
+        "first_day_of_week": {
+          "name": "first_day_of_week",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 1
+        },
+        "ping_icons_enabled": {
+          "name": "ping_icons_enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "enable_right_click_on_widgets": {
+          "name": "enable_right_click_on_widgets",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "completed_manage_tour": {
+          "name": "completed_manage_tour",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "completed_board_tour": {
+          "name": "completed_board_tour",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_home_board_id_board_id_fk": {
+          "name": "user_home_board_id_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "user_mobile_home_board_id_board_id_fk": {
+          "name": "user_mobile_home_board_id_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "user_default_search_engine_id_search_engine_id_fk": {
+          "name": "user_default_search_engine_id_search_engine_id_fk",
+          "tableFrom": "user",
+          "tableTo": "search_engine",
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.verificationToken": {
+      "name": "verificationToken",
+      "schema": "",
+      "columns": {
+        "identifier": {
+          "name": "identifier",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "verificationToken_identifier_token_pk": {
+          "name": "verificationToken_identifier_token_pk",
+          "columns": ["identifier", "token"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.widget_secret": {
+      "name": "widget_secret",
+      "schema": "",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "widget_secret_item_id_item_id_fk": {
+          "name": "widget_secret_item_id_item_id_fk",
+          "tableFrom": "widget_secret",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "widget_secret_item_id_kind_pk": {
+          "name": "widget_secret_item_id_kind_pk",
+          "columns": ["item_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
diff --git a/packages/db/migrations/postgresql/meta/_journal.json b/packages/db/migrations/postgresql/meta/_journal.json
index fe45190d8..835dfeb84 100644
--- a/packages/db/migrations/postgresql/meta/_journal.json
+++ b/packages/db/migrations/postgresql/meta/_journal.json
@@ -75,16 +75,30 @@
     {
       "idx": 10,
       "version": "7",
-      "when": 1785252781398,
-      "tag": "0010_workable_shard",
+      "when": 1784305412862,
+      "tag": "0010_custom_widget_v2_tables",
       "breakpoints": true
     },
     {
       "idx": 11,
       "version": "7",
-      "when": 1785768744667,
-      "tag": "0011_same_sir_ram",
+      "when": 1786212457549,
+      "tag": "0011_futuristic_valkyrie",
+      "breakpoints": true
+    },
+    {
+      "idx": 12,
+      "version": "7",
+      "when": 1786215201393,
+      "tag": "0012_huge_warpath",
+      "breakpoints": true
+    },
+    {
+      "idx": 13,
+      "version": "7",
+      "when": 1786217088954,
+      "tag": "0013_condemned_speedball",
       "breakpoints": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/db/migrations/seed.spec.ts b/packages/db/migrations/seed.spec.ts
new file mode 100644
index 000000000..375849e29
--- /dev/null
+++ b/packages/db/migrations/seed.spec.ts
@@ -0,0 +1,97 @@
+import { describe, expect, test } from "vitest";
+
+import { createId } from "@homarr/common";
+import { eq } from "@homarr/db";
+import { boards, itemLayouts, items, layouts, sections } from "@homarr/db/schema";
+import { createDb } from "@homarr/db/test";
+import { emptySuperJSON } from "@homarr/definitions";
+
+import { seedProtectedBoardLayoutsAsync } from "./seed";
+
+describe("protected board layout migration", () => {
+  test("turns a single saved layout into Base and generates Mobile", async () => {
+    const db = createDb();
+    const boardId = createId();
+    const baseLayoutId = createId();
+    const sectionId = createId();
+    const itemId = createId();
+    await db.insert(boards).values({ id: boardId, name: "single" });
+    await db.insert(layouts).values({
+      id: baseLayoutId,
+      boardId,
+      name: "Wide",
+      columnCount: 12,
+      breakpoint: 0,
+    });
+    await db.insert(sections).values({ id: sectionId, boardId, kind: "empty", xOffset: 0, yOffset: 0 });
+    await db.insert(items).values({ id: itemId, boardId, kind: "clock", options: emptySuperJSON });
+    await db.insert(itemLayouts).values({
+      itemId,
+      sectionId,
+      layoutId: baseLayoutId,
+      width: 5,
+      height: 2,
+      xOffset: 6,
+      yOffset: 1,
+    });
+
+    await seedProtectedBoardLayoutsAsync(db);
+    await seedProtectedBoardLayoutsAsync(db);
+
+    const savedLayouts = await db.query.layouts.findMany({ where: eq(layouts.boardId, boardId) });
+    expect(savedLayouts).toHaveLength(2);
+    expect(savedLayouts.find((layout) => layout.role === "base")).toMatchObject({
+      id: baseLayoutId,
+      name: "Wide",
+      columnCount: 12,
+      breakpoint: 768,
+    });
+    const mobileLayout = savedLayouts.find((layout) => layout.role === "mobile");
+    expect(mobileLayout).toMatchObject({ name: "Mobile", columnCount: 3, breakpoint: 0 });
+    const mobileItemPosition = await db.query.itemLayouts.findFirst({
+      where: eq(itemLayouts.layoutId, mobileLayout?.id ?? ""),
+    });
+    expect(mobileItemPosition).toMatchObject({ width: 3, height: 2, xOffset: 0, yOffset: 0 });
+  });
+
+  test("assigns roles and resolves duplicate breakpoints without rebuilding existing layouts", async () => {
+    const db = createDb();
+    const boardId = createId();
+    await db.insert(boards).values({ id: boardId, name: "responsive" });
+    await db.insert(layouts).values([
+      { id: "layout-mobile", boardId, name: "Phone", columnCount: 3, breakpoint: 0 },
+      { id: "layout-tablet-a", boardId, name: "Tablet A", columnCount: 6, breakpoint: 480 },
+      { id: "layout-tablet-b", boardId, name: "Tablet B", columnCount: 8, breakpoint: 480 },
+      { id: "layout-wide", boardId, name: "Wide", columnCount: 12, breakpoint: 1200 },
+    ]);
+
+    await seedProtectedBoardLayoutsAsync(db);
+    await seedProtectedBoardLayoutsAsync(db);
+
+    const savedLayouts = await db.query.layouts.findMany({ where: eq(layouts.boardId, boardId) });
+    expect(savedLayouts.toSorted((layoutA, layoutB) => layoutA.breakpoint - layoutB.breakpoint)).toMatchObject([
+      { id: "layout-mobile", name: "Phone", columnCount: 3, breakpoint: 0, role: "mobile" },
+      { id: "layout-tablet-a", name: "Tablet A", columnCount: 6, breakpoint: 480, role: "custom" },
+      { id: "layout-tablet-b", name: "Tablet B", columnCount: 8, breakpoint: 481, role: "custom" },
+      { id: "layout-wide", name: "Wide", columnCount: 12, breakpoint: 1200, role: "base" },
+    ]);
+  });
+
+  test("creates both protected layouts for a board with no layouts", async () => {
+    const db = createDb();
+    const boardId = createId();
+    await db.insert(boards).values({ id: boardId, name: "empty" });
+
+    await seedProtectedBoardLayoutsAsync(db);
+    await seedProtectedBoardLayoutsAsync(db);
+
+    const savedLayouts = await db.query.layouts.findMany({ where: eq(layouts.boardId, boardId) });
+    expect(savedLayouts).toHaveLength(2);
+    expect(savedLayouts).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ role: "mobile", columnCount: 3, breakpoint: 0 }),
+        expect.objectContaining({ role: "base", columnCount: 10, breakpoint: 768 }),
+      ]),
+    );
+  });
+});
diff --git a/packages/db/migrations/seed.ts b/packages/db/migrations/seed.ts
index 1cfb6326f..5248b8892 100644
--- a/packages/db/migrations/seed.ts
+++ b/packages/db/migrations/seed.ts
@@ -1,7 +1,7 @@
 import SuperJSON from "superjson";
 
-import { createId, objectKeys } from "@homarr/common";
-import { customWidgetImportSchema } from "@homarr/validation/custom-widget";
+import { createId, generateResponsiveGridFor, objectKeys } from "@homarr/common";
+import { BUNDLED_CUSTOM_WIDGETS, customWidgetDefinitionSchema } from "@homarr/custom-widgets/core";
 import {
   createDocumentationLink,
   credentialsAdminGroup,
@@ -11,11 +11,12 @@ import {
   getIntegrationName,
   integrationDefs,
   integrationKinds,
+  normalizeBoardLayoutRoles,
 } from "@homarr/definitions";
 import type { WidgetKind } from "@homarr/definitions";
 import { defaultServerSettings, defaultServerSettingsKeys } from "@homarr/server-settings";
 
-import type { Database } from "..";
+import type { Database, InferInsertModel } from "..";
 import { eq, inArray } from "..";
 import { getMaxGroupPositionAsync, placeAllWidgetsAsync } from "../queries";
 import {
@@ -27,6 +28,7 @@ import {
 import {
   apps,
   boards,
+  customWidgetDefinitions,
   groupMembers,
   groupPermissions,
   groups,
@@ -38,103 +40,13 @@ import {
   onboarding,
   searchEngines,
   sections,
+  sectionLayouts,
   users,
-  customWidgetDefinitions,
 } from "../schema";
 import type { Integration } from "../schema";
 
 const isTruthyEnv = (value: string | undefined) => ["1", "yes", "t", "true"].includes((value ?? "").toLowerCase());
 
-const CUSTOM_WIDGET_SEEDS: Array<{ id: string; data: Record<string, unknown> }> = [
-  {
-    id: "seed-dog-facts",
-    data: {
-      $schema: "homarr-custom-widget-v2",
-      name: "Random Dog Fact",
-      description: "Displays a random fun fact about dogs",
-      url: "https://dogapi.dog/api/v2/facts",
-      authType: "none",
-      method: "GET",
-      displayType: "singleValue",
-      displayConfig: {
-        type: "singleValue",
-        jsonPath: "$.data[0].attributes.body",
-        label: "Dog Fact",
-        unit: "",
-        valueSize: "sm",
-        labelPosition: "above",
-      },
-    },
-  },
-  {
-    id: "seed-currency-exchange",
-    data: {
-      $schema: "homarr-custom-widget-v2",
-      name: "Currency Exchange (JPY)",
-      description: "Converts 50 Japanese Yen to EUR and USD using European Central Bank rates",
-      url: "https://api.frankfurter.dev/v1/latest?from=JPY&to=EUR,USD&amount=50",
-      authType: "none",
-      method: "GET",
-      displayType: "keyValue",
-      displayConfig: {
-        type: "keyValue",
-        mappings: [
-          { label: "50 JPY → EUR", jsonPath: "$.rates.EUR", unit: "€" },
-          { label: "50 JPY → USD", jsonPath: "$.rates.USD", unit: "$" },
-        ],
-        layout: "list",
-        columns: 2,
-      },
-    },
-  },
-  {
-    id: "seed-jellyfin",
-    data: {
-      $schema: "homarr-custom-widget-v2",
-      name: "Jellyfin library",
-      description: "Counts the number of movies, series, episodes and songs in the library",
-      iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons@master/svg/jellyfin.svg",
-      url: "https://jellyfin.homelab.com/Items/Counts",
-      authType: "apiKeyHeader",
-      headerName: "X-Emby-Token",
-      method: "GET",
-      requestBody: null,
-      displayType: "countGrid",
-      displayConfig: {
-        type: "countGrid",
-        items: [
-          { label: "Movies", jsonPath: "$.MovieCount", unit: "" },
-          { label: "Series", jsonPath: "$.SeriesCount", unit: "" },
-          { label: "Episodes", jsonPath: "$.EpisodeCount", unit: "" },
-          { label: "Songs", jsonPath: "$.SongCount", unit: "" },
-        ],
-        columns: 4,
-        valueSize: "lg",
-      },
-    },
-  },
-  {
-    id: "seed-pokedex",
-    data: {
-      $schema: "homarr-custom-widget-v2",
-      name: "Pokédex",
-      description: "Browseable Pokémon list",
-      iconUrl: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/items/poke-ball.png",
-      url: "https://pokeapi.co/api/v2/pokemon?limit=75",
-      authType: "none",
-      headerName: null,
-      method: "GET",
-      requestBody: null,
-      displayType: "customJsx",
-      displayConfig: {
-        type: "customJsx",
-        template:
-          '<Stack gap="md" p="xs">\n  <Card\n    withBorder\n    radius="xl"\n    p="md"\n    shadow="md"\n    style={{\n      background: "linear-gradient(135deg, rgba(250,82,82,0.22), rgba(253,126,20,0.10), rgba(255,255,255,0.03))",\n      border: "1px solid rgba(250,82,82,0.35)",\n      overflow: "hidden"\n    }}\n  >\n    <Group justify="space-between" wrap="nowrap">\n      <Stack gap={2}>\n        <Title order={3}>Pokédex</Title>\n      </Stack>\n    </Group>\n  </Card>\n\n  <PaginatedList pageSize={12}>\n    <Grid gutter="sm">\n      {data.results.map((pokemon, i) =>\n        <Grid.Col span={1.5}>\n          <Anchor href={pokemon.url} target="_blank" underline="never">\n            <Card\n              withBorder\n              radius="xl"\n              p="xs"\n              shadow="md"\n              style={{\n                cursor: "pointer",\n                position: "relative",\n                overflow: "hidden",\n                minHeight: 190,\n                background: "linear-gradient(160deg, rgba(255,255,255,0.12), rgba(250,82,82,0.10), rgba(0,0,0,0.04))",\n                border: "1px solid rgba(250,82,82,0.28)",\n                transition: "transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease"\n              }}\n            >\n              <Stack gap="sm" align="center">\n                <Group justify="space-between" wrap="nowrap" style={{ width: "100%" }}>\n                  <Badge size="sm" color="red" variant="filled">\n                    #{String(i + 1).padStart(3, "0")}\n                  </Badge>\n                  <Text fw={800} tt="capitalize" ta="right" truncate style={{ maxWidth: 120 }}>\n                    {pokemon.name}\n                  </Text>\n                </Group>\n\n                <Paper\n                  radius="xl"\n                  p="xs"\n                  withBorder\n                  style={{\n                    background: "radial-gradient(circle, rgba(255,255,255,0.95), rgba(250,82,82,0.16))",\n                    border: "1px solid rgba(255,255,255,0.45)",\n                    boxShadow: "inset 0 0 20px rgba(255,255,255,0.25)"\n                  }}\n                >\n                  <Avatar\n                    src={"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + String(i + 1) + ".png"}\n                    alt={pokemon.name}\n                    size={92}\n                    radius="xl"\n                    style={{\n                      transition: "transform 180ms ease",\n                      filter: "drop-shadow(0 8px 10px rgba(0,0,0,0.25))"\n                    }}\n                  />\n                </Paper>\n              </Stack>\n            </Card>\n          </Anchor>\n        </Grid.Col>\n      )}\n    </Grid>\n  </PaginatedList>\n</Stack>',
-      },
-    },
-  },
-];
-
 export const seedDataAsync = async (db: Database) => {
   if (isTruthyEnv(process.env.UNSAFE_ENABLE_MOCK_INTEGRATION)) {
     console.warn(
@@ -155,6 +67,215 @@ export const seedDataAsync = async (db: Database) => {
   if (isTruthyEnv(process.env.DEMO_MODE)) {
     await seedDemoUserAsync(db);
   }
+
+  await seedProtectedBoardLayoutsAsync(db);
+};
+
+export const seedProtectedBoardLayoutsAsync = async (db: Database, boardId?: string) => {
+  const dbBoards = await db.query.boards.findMany({
+    where: boardId ? eq(boards.id, boardId) : undefined,
+    with: {
+      layouts: true,
+      items: { with: { layouts: true } },
+      sections: { with: { layouts: true } },
+    },
+  });
+
+  for (const board of dbBoards) {
+    if (board.layouts.length === 0) {
+      await db.insert(layouts).values([
+        {
+          id: createId(),
+          name: "Mobile",
+          columnCount: 3,
+          breakpoint: 0,
+          role: "mobile",
+          boardId: board.id,
+        },
+        {
+          id: createId(),
+          name: "Base",
+          columnCount: 10,
+          breakpoint: 768,
+          role: "base",
+          boardId: board.id,
+        },
+      ]);
+      continue;
+    }
+
+    if (board.layouts.length === 1) {
+      const [baseLayout] = board.layouts;
+      if (!baseLayout) continue;
+
+      const mobileLayout = {
+        id: createId(),
+        name: "Mobile",
+        columnCount: 3,
+        breakpoint: 0,
+        role: "mobile" as const,
+        boardId: board.id,
+      };
+
+      await db.update(layouts).set({ role: "base", breakpoint: 768 }).where(eq(layouts.id, baseLayout.id));
+      await db.insert(layouts).values(mobileLayout);
+      await insertMissingProjectedPositionsAsync(
+        db,
+        board,
+        { ...baseLayout, role: "base", breakpoint: 768 },
+        mobileLayout,
+      );
+      continue;
+    }
+
+    const normalizedLayouts = normalizeBoardLayoutRoles(board.layouts);
+    const alreadyNormalized = normalizedLayouts.every((layout) => {
+      const previousLayout = board.layouts.find((candidate) => candidate.id === layout.id);
+      return layout.breakpoint === previousLayout?.breakpoint && previousLayout.role === layout.role;
+    });
+
+    if (!alreadyNormalized) {
+      for (const layout of normalizedLayouts) {
+        await db
+          .update(layouts)
+          .set({ breakpoint: layout.breakpoint, role: layout.role })
+          .where(eq(layouts.id, layout.id));
+      }
+    }
+
+    const mobileLayout = normalizedLayouts[0];
+    const baseLayout = normalizedLayouts.at(-1);
+    if (mobileLayout && baseLayout) {
+      await insertMissingProjectedPositionsAsync(
+        db,
+        board,
+        { ...baseLayout, role: "base" },
+        { ...mobileLayout, role: "mobile" },
+      );
+    }
+  }
+};
+
+interface BoardWithLayoutPositions {
+  items: Array<{
+    id: string;
+    layouts: Array<{
+      layoutId: string;
+      sectionId: string;
+      width: number;
+      height: number;
+      xOffset: number;
+      yOffset: number;
+    }>;
+  }>;
+  sections: Array<{
+    id: string;
+    kind: string;
+    layouts: Array<{
+      layoutId: string;
+      parentSectionId: string | null;
+      width: number;
+      height: number;
+      xOffset: number;
+      yOffset: number;
+    }>;
+  }>;
+}
+
+const insertMissingProjectedPositionsAsync = async (
+  db: Database,
+  board: BoardWithLayoutPositions,
+  sourceLayout: InferInsertModel<typeof layouts>,
+  targetLayout: InferInsertModel<typeof layouts>,
+) => {
+  const elements = [
+    ...board.items.flatMap((item) => {
+      const layout = item.layouts.find((itemLayout) => itemLayout.layoutId === sourceLayout.id);
+      return layout
+        ? [
+            {
+              id: item.id,
+              type: "item" as const,
+              width: layout.width,
+              height: layout.height,
+              xOffset: layout.xOffset,
+              yOffset: layout.yOffset,
+              sectionId: layout.sectionId,
+            },
+          ]
+        : [];
+    }),
+    ...board.sections.flatMap((section) => {
+      if (section.kind !== "dynamic") return [];
+      const layout = section.layouts.find((sectionLayout) => sectionLayout.layoutId === sourceLayout.id);
+      return layout?.parentSectionId
+        ? [
+            {
+              id: section.id,
+              type: "section" as const,
+              width: layout.width,
+              height: layout.height,
+              xOffset: layout.xOffset,
+              yOffset: layout.yOffset,
+              sectionId: layout.parentSectionId,
+            },
+          ]
+        : [];
+    }),
+  ];
+
+  const projectedElements = board.sections
+    .filter((section) => section.kind !== "dynamic")
+    .flatMap(
+      (section) =>
+        generateResponsiveGridFor({
+          items: elements,
+          previousWidth: sourceLayout.columnCount,
+          width: targetLayout.columnCount,
+          sectionId: section.id,
+        }).items,
+    );
+
+  const existingItemIds = new Set(
+    board.items
+      .filter((item) => item.layouts.some((layout) => layout.layoutId === targetLayout.id))
+      .map((item) => item.id),
+  );
+  const itemPositions = projectedElements
+    .filter((element) => element.type === "item" && !existingItemIds.has(element.id))
+    .map(
+      (element): InferInsertModel<typeof itemLayouts> => ({
+        itemId: element.id,
+        layoutId: targetLayout.id,
+        sectionId: element.sectionId,
+        width: element.width,
+        height: element.height,
+        xOffset: element.xOffset,
+        yOffset: element.yOffset,
+      }),
+    );
+
+  const existingSectionIds = new Set(
+    board.sections
+      .filter((section) => section.layouts.some((layout) => layout.layoutId === targetLayout.id))
+      .map((section) => section.id),
+  );
+  const sectionPositions = projectedElements
+    .filter((element) => element.type === "section" && !existingSectionIds.has(element.id))
+    .map(
+      (element): InferInsertModel<typeof sectionLayouts> => ({
+        sectionId: element.id,
+        layoutId: targetLayout.id,
+        parentSectionId: element.sectionId,
+        width: element.width,
+        height: element.height,
+        xOffset: element.xOffset,
+        yOffset: element.yOffset,
+      }),
+    );
+
+  if (itemPositions.length > 0) await db.insert(itemLayouts).values(itemPositions);
+  if (sectionPositions.length > 0) await db.insert(sectionLayouts).values(sectionPositions);
 };
 
 const seedEveryoneGroupAsync = async (db: Database) => {
@@ -361,13 +482,24 @@ const seedDefaultBoardAsync = async (db: Database) => {
     yOffset: 0,
     boardId,
   });
-  await db.insert(layouts).values({
-    id: createId(),
-    name: "Base",
-    columnCount: 10,
-    breakpoint: 0,
-    boardId,
-  });
+  await db.insert(layouts).values([
+    {
+      id: createId(),
+      name: "Mobile",
+      columnCount: 3,
+      breakpoint: 0,
+      role: "mobile",
+      boardId,
+    },
+    {
+      id: createId(),
+      name: "Base",
+      columnCount: 10,
+      breakpoint: 768,
+      role: "base",
+      boardId,
+    },
+  ]);
 
   const everyoneGroupRow = await db.query.groups.findFirst({
     where: eq(groups.name, everyoneGroup),
@@ -600,7 +732,8 @@ const seedDemoUserAsync = async (db: Database) => {
     id: layoutId,
     name: "Base",
     columnCount: 12,
-    breakpoint: 0,
+    breakpoint: 768,
+    role: "base",
     boardId,
   });
 
@@ -648,40 +781,33 @@ const seedDemoUserAsync = async (db: Database) => {
 };
 
 const seedDefaultCustomWidgetsAsync = async (db: Database) => {
-  const seedIds = CUSTOM_WIDGET_SEEDS.map((s) => s.id);
+  const seedIds = BUNDLED_CUSTOM_WIDGETS.map(({ id }) => id);
   const existing = await db.query.customWidgetDefinitions.findMany({
     columns: { id: true },
     where: inArray(customWidgetDefinitions.id, seedIds),
   });
-  const existingIds = new Set(existing.map((row) => row.id));
-
-  const seedValues = CUSTOM_WIDGET_SEEDS.filter((seed) => !existingIds.has(seed.id)).map((seed) => {
-    const parsed = customWidgetImportSchema.parse(seed.data);
+  const existingIds = new Set(existing.map(({ id }) => id));
+  const values = BUNDLED_CUSTOM_WIDGETS.filter(({ id }) => !existingIds.has(id)).map(({ id, widget }) => {
+    const definition = customWidgetDefinitionSchema.parse(widget);
     return {
-      id: seed.id,
-      name: parsed.name,
-      description: parsed.description ?? null,
-      iconUrl: parsed.iconUrl ?? null,
-      url: parsed.url,
-      authType: parsed.authType,
-      headerName: parsed.headerName ?? null,
-      method: parsed.method,
-      requestBody: parsed.requestBody ?? null,
-      displayType: parsed.displayType,
-      displayConfig: SuperJSON.stringify(parsed.displayConfig),
+      id,
+      name: definition.name,
+      description: definition.description ?? null,
+      iconUrl: definition.iconUrl ?? null,
+      sources: SuperJSON.stringify(definition.sources),
+      requests: SuperJSON.stringify(definition.requests),
+      options: SuperJSON.stringify(definition.options),
+      template: definition.template,
       enabled: false,
       creatorId: null,
     };
   });
-
-  if (seedValues.length === 0) {
-    console.log("Skipping seeding of default custom widgets as they already exist");
+  if (values.length === 0) {
+    console.log("Skipping seeding of bundled custom widgets because they already exist");
     return;
   }
-
-  await db.insert(customWidgetDefinitions).values(seedValues);
-
-  console.log(`Created ${seedValues.length} default custom widgets through seeding process`);
+  await db.insert(customWidgetDefinitions).values(values);
+  console.log(`Created ${values.length} bundled custom widgets through seeding process`);
 };
 
 const seedBoardWidgetsAsync = async (db: Database) => {
@@ -697,7 +823,7 @@ const seedBoardWidgetsAsync = async (db: Database) => {
   if (!board) return;
 
   const section = board.sections.find((sec) => sec.kind === "empty");
-  const layout = board.layouts[0];
+  const layout = board.layouts.find((candidate) => candidate.role === "base") ?? board.layouts[0];
   if (!section || !layout) return;
 
   const allIntegrations = await db.query.integrations.findMany();
diff --git a/packages/db/migrations/sqlite/0042_custom_widget_v2_tables.sql b/packages/db/migrations/sqlite/0042_custom_widget_v2_tables.sql
new file mode 100644
index 000000000..da2e3b558
--- /dev/null
+++ b/packages/db/migrations/sqlite/0042_custom_widget_v2_tables.sql
@@ -0,0 +1,25 @@
+CREATE TABLE `custom_widget_v2_definition` (
+	`id` text PRIMARY KEY NOT NULL,
+	`name` text NOT NULL,
+	`description` text,
+	`icon_url` text,
+	`sources` text NOT NULL,
+	`requests` text NOT NULL,
+	`options` text NOT NULL,
+	`template` text NOT NULL,
+	`enabled` integer DEFAULT true NOT NULL,
+	`created_at` integer DEFAULT (unixepoch()) NOT NULL,
+	`updated_at` integer DEFAULT (unixepoch()) NOT NULL,
+	`creator_id` text,
+	FOREIGN KEY (`creator_id`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE set null
+);--> statement-breakpoint
+CREATE TABLE `custom_widget_v2_secret` (
+	`source_id` text NOT NULL,
+	`kind` text NOT NULL,
+	`encrypted_value` text NOT NULL,
+	`updated_at` integer NOT NULL,
+	`definition_id` text NOT NULL,
+	PRIMARY KEY(`definition_id`, `source_id`, `kind`),
+	FOREIGN KEY (`definition_id`) REFERENCES `custom_widget_v2_definition`(`id`) ON UPDATE no action ON DELETE cascade
+);--> statement-breakpoint
+DELETE FROM `groupPermission` WHERE `permission` IN ('custom-widget-manage', 'custom-widget-secret-write');
diff --git a/packages/db/migrations/sqlite/0043_numerous_forgotten_one.sql b/packages/db/migrations/sqlite/0043_numerous_forgotten_one.sql
new file mode 100644
index 000000000..c6dc6aace
--- /dev/null
+++ b/packages/db/migrations/sqlite/0043_numerous_forgotten_one.sql
@@ -0,0 +1,2 @@
+ALTER TABLE `layout` ADD `left_gutter_column_count` integer DEFAULT 0 NOT NULL;--> statement-breakpoint
+ALTER TABLE `layout` ADD `right_gutter_column_count` integer DEFAULT 0 NOT NULL;
\ No newline at end of file
diff --git a/packages/db/migrations/sqlite/0043_swift_silver_samurai.sql b/packages/db/migrations/sqlite/0043_swift_silver_samurai.sql
deleted file mode 100644
index 6104ecd11..000000000
--- a/packages/db/migrations/sqlite/0043_swift_silver_samurai.sql
+++ /dev/null
@@ -1 +0,0 @@
-ALTER TABLE `assistant_configuration` ADD `web_search_enabled` integer DEFAULT false NOT NULL;
\ No newline at end of file
diff --git a/packages/db/migrations/sqlite/0044_serious_wallop.sql b/packages/db/migrations/sqlite/0044_serious_wallop.sql
new file mode 100644
index 000000000..3c9fd79c9
--- /dev/null
+++ b/packages/db/migrations/sqlite/0044_serious_wallop.sql
@@ -0,0 +1 @@
+ALTER TABLE `layout` ADD `role` text DEFAULT 'custom' NOT NULL;
\ No newline at end of file
diff --git a/packages/db/migrations/sqlite/0042_bumpy_tattoo.sql b/packages/db/migrations/sqlite/0045_violet_mikhail_rasputin.sql
similarity index 87%
rename from packages/db/migrations/sqlite/0042_bumpy_tattoo.sql
rename to packages/db/migrations/sqlite/0045_violet_mikhail_rasputin.sql
index d074a979f..c9e04c96d 100644
--- a/packages/db/migrations/sqlite/0042_bumpy_tattoo.sql
+++ b/packages/db/migrations/sqlite/0045_violet_mikhail_rasputin.sql
@@ -1,6 +1,7 @@
 CREATE TABLE `assistant_configuration` (
 	`id` text PRIMARY KEY DEFAULT 'default' NOT NULL,
 	`enabled` integer DEFAULT false NOT NULL,
+	`web_search_enabled` integer DEFAULT false NOT NULL,
 	`provider` text DEFAULT 'openrouter' NOT NULL,
 	`base_url` text DEFAULT 'https://openrouter.ai/api/v1' NOT NULL,
 	`model_discovery_path` text DEFAULT '/models',
@@ -15,11 +16,12 @@ CREATE TABLE `assistant_message` (
 	`thread_id` text NOT NULL,
 	`parent_id` text,
 	`format` text DEFAULT 'ai-sdk/v6' NOT NULL,
-	`content` text DEFAULT '{"json": {}}' NOT NULL,
+	`content` text NOT NULL,
 	`created_at` integer DEFAULT (unixepoch()) NOT NULL,
 	FOREIGN KEY (`thread_id`) REFERENCES `assistant_thread`(`id`) ON UPDATE no action ON DELETE cascade
 );
 --> statement-breakpoint
+CREATE INDEX `assistant_message__thread_id_created_at_idx` ON `assistant_message` (`thread_id`,`created_at`);--> statement-breakpoint
 CREATE TABLE `assistant_thread` (
 	`id` text PRIMARY KEY NOT NULL,
 	`user_id` text NOT NULL,
@@ -30,6 +32,4 @@ CREATE TABLE `assistant_thread` (
 	FOREIGN KEY (`user_id`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
 );
 --> statement-breakpoint
-CREATE INDEX `assistant_message__thread_id_created_at_idx` ON `assistant_message` (`thread_id`,`created_at`);
---> statement-breakpoint
-CREATE INDEX `assistant_thread__user_id_updated_at_idx` ON `assistant_thread` (`user_id`,`updated_at`);
+CREATE INDEX `assistant_thread__user_id_updated_at_idx` ON `assistant_thread` (`user_id`,`updated_at`);
\ No newline at end of file
diff --git a/packages/db/migrations/sqlite/meta/0038_snapshot.json b/packages/db/migrations/sqlite/meta/0038_snapshot.json
index a000c93d9..0535c6bc5 100644
--- a/packages/db/migrations/sqlite/meta/0038_snapshot.json
+++ b/packages/db/migrations/sqlite/meta/0038_snapshot.json
@@ -88,9 +88,7 @@
       "indexes": {
         "userId_idx": {
           "name": "userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -99,22 +97,15 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ],
+          "columns": ["provider", "provider_account_id"],
           "name": "account_provider_provider_account_id_pk"
         }
       },
@@ -152,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -249,12 +236,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -262,23 +245,15 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ],
+          "columns": ["board_id", "group_id", "permission"],
           "name": "boardGroupPermission_board_id_group_id_permission_pk"
         }
       },
@@ -316,12 +291,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -329,23 +300,15 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ],
+          "columns": ["board_id", "user_id", "permission"],
           "name": "boardUserPermission_board_id_user_id_permission_pk"
         }
       },
@@ -501,9 +464,7 @@
       "indexes": {
         "board_name_unique": {
           "name": "board_name_unique",
-          "columns": [
-            "name"
-          ],
+          "columns": ["name"],
           "isUnique": true
         }
       },
@@ -512,12 +473,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -679,12 +636,8 @@
           "name": "custom_widget_definition_creator_id_user_id_fk",
           "tableFrom": "custom_widget_definition",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -731,22 +684,15 @@
           "name": "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
           "tableFrom": "custom_widget_secret",
           "tableTo": "custom_widget_definition",
-          "columnsFrom": [
-            "definition_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "custom_widget_secret_definition_id_kind_pk": {
-          "columns": [
-            "definition_id",
-            "kind"
-          ],
+          "columns": ["definition_id", "kind"],
           "name": "custom_widget_secret_definition_id_kind_pk"
         }
       },
@@ -777,12 +723,8 @@
           "name": "groupMember_group_id_group_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -790,22 +732,15 @@
           "name": "groupMember_user_id_user_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "groupMember_group_id_user_id_pk": {
-          "columns": [
-            "group_id",
-            "user_id"
-          ],
+          "columns": ["group_id", "user_id"],
           "name": "groupMember_group_id_user_id_pk"
         }
       },
@@ -836,12 +771,8 @@
           "name": "groupPermission_group_id_group_id_fk",
           "tableFrom": "groupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -899,9 +830,7 @@
       "indexes": {
         "group_name_unique": {
           "name": "group_name_unique",
-          "columns": [
-            "name"
-          ],
+          "columns": ["name"],
           "isUnique": true
         }
       },
@@ -910,12 +839,8 @@
           "name": "group_owner_id_user_id_fk",
           "tableFrom": "group",
           "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -923,12 +848,8 @@
           "name": "group_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -936,12 +857,8 @@
           "name": "group_mobile_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1019,12 +936,8 @@
           "name": "icon_icon_repository_id_iconRepository_id_fk",
           "tableFrom": "icon",
           "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1064,12 +977,8 @@
           "name": "integrationGroupPermissions_integration_id_integration_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1077,23 +986,15 @@
           "name": "integrationGroupPermissions_group_id_group_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "integrationGroupPermissions_integration_id_group_id_permission_pk": {
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ],
+          "columns": ["integration_id", "group_id", "permission"],
           "name": "integrationGroupPermissions_integration_id_group_id_permission_pk"
         }
       },
@@ -1124,12 +1025,8 @@
           "name": "integration_item_item_id_item_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1137,22 +1034,15 @@
           "name": "integration_item_integration_id_integration_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "integration_item_item_id_integration_id_pk": {
-          "columns": [
-            "item_id",
-            "integration_id"
-          ],
+          "columns": ["item_id", "integration_id"],
           "name": "integration_item_item_id_integration_id_pk"
         }
       },
@@ -1194,16 +1084,12 @@
       "indexes": {
         "integration_secret__kind_idx": {
           "name": "integration_secret__kind_idx",
-          "columns": [
-            "kind"
-          ],
+          "columns": ["kind"],
           "isUnique": false
         },
         "integration_secret__updated_at_idx": {
           "name": "integration_secret__updated_at_idx",
-          "columns": [
-            "updated_at"
-          ],
+          "columns": ["updated_at"],
           "isUnique": false
         }
       },
@@ -1212,22 +1098,15 @@
           "name": "integrationSecret_integration_id_integration_id_fk",
           "tableFrom": "integrationSecret",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "integrationSecret_integration_id_kind_pk": {
-          "columns": [
-            "integration_id",
-            "kind"
-          ],
+          "columns": ["integration_id", "kind"],
           "name": "integrationSecret_integration_id_kind_pk"
         }
       },
@@ -1265,12 +1144,8 @@
           "name": "integrationUserPermission_integration_id_integration_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1278,23 +1153,15 @@
           "name": "integrationUserPermission_user_id_user_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "integrationUserPermission_integration_id_user_id_permission_pk": {
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ],
+          "columns": ["integration_id", "user_id", "permission"],
           "name": "integrationUserPermission_integration_id_user_id_permission_pk"
         }
       },
@@ -1343,9 +1210,7 @@
       "indexes": {
         "integration__kind_idx": {
           "name": "integration__kind_idx",
-          "columns": [
-            "kind"
-          ],
+          "columns": ["kind"],
           "isUnique": false
         }
       },
@@ -1354,12 +1219,8 @@
           "name": "integration_app_id_app_id_fk",
           "tableFrom": "integration",
           "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1403,9 +1264,7 @@
       "indexes": {
         "invite_token_unique": {
           "name": "invite_token_unique",
-          "columns": [
-            "token"
-          ],
+          "columns": ["token"],
           "isUnique": true
         }
       },
@@ -1414,12 +1273,8 @@
           "name": "invite_creator_id_user_id_fk",
           "tableFrom": "invite",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1487,12 +1342,8 @@
           "name": "item_layout_item_id_item_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1500,12 +1351,8 @@
           "name": "item_layout_section_id_section_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1513,23 +1360,15 @@
           "name": "item_layout_layout_id_layout_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "item_layout_item_id_section_id_layout_id_pk": {
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ],
+          "columns": ["item_id", "section_id", "layout_id"],
           "name": "item_layout_item_id_section_id_layout_id_pk"
         }
       },
@@ -1583,12 +1422,8 @@
           "name": "item_board_id_board_id_fk",
           "tableFrom": "item",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1643,12 +1478,8 @@
           "name": "layout_board_id_board_id_fk",
           "tableFrom": "layout",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1717,12 +1548,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1826,9 +1653,7 @@
       "indexes": {
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
-          "columns": [
-            "short"
-          ],
+          "columns": ["short"],
           "isUnique": true
         }
       },
@@ -1837,12 +1662,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1883,12 +1704,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1896,22 +1713,15 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
-          "columns": [
-            "user_id",
-            "section_id"
-          ],
+          "columns": ["user_id", "section_id"],
           "name": "section_collapse_state_user_id_section_id_pk"
         }
       },
@@ -1977,12 +1787,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1990,12 +1796,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2003,22 +1805,15 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
-          "columns": [
-            "section_id",
-            "layout_id"
-          ],
+          "columns": ["section_id", "layout_id"],
           "name": "section_layout_section_id_layout_id_pk"
         }
       },
@@ -2085,12 +1880,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2121,9 +1912,7 @@
       "indexes": {
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
-          "columns": [
-            "setting_key"
-          ],
+          "columns": ["setting_key"],
           "isUnique": true
         }
       },
@@ -2160,9 +1949,7 @@
       "indexes": {
         "user_id_idx": {
           "name": "user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -2171,12 +1958,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2214,10 +1997,7 @@
       "foreignKeys": {},
       "compositePrimaryKeys": {
         "trusted_certificate_hostname_hostname_thumbprint_pk": {
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ],
+          "columns": ["hostname", "thumbprint"],
           "name": "trusted_certificate_hostname_hostname_thumbprint_pk"
         }
       },
@@ -2361,12 +2141,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2374,12 +2150,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2387,12 +2159,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2430,10 +2198,7 @@
       "foreignKeys": {},
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
-          "columns": [
-            "identifier",
-            "token"
-          ],
+          "columns": ["identifier", "token"],
           "name": "verificationToken_identifier_token_pk"
         }
       },
@@ -2451,4 +2216,4 @@
   "internal": {
     "indexes": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/db/migrations/sqlite/meta/0039_snapshot.json b/packages/db/migrations/sqlite/meta/0039_snapshot.json
index 2b5d2cf26..cc4de72de 100644
--- a/packages/db/migrations/sqlite/meta/0039_snapshot.json
+++ b/packages/db/migrations/sqlite/meta/0039_snapshot.json
@@ -88,9 +88,7 @@
       "indexes": {
         "userId_idx": {
           "name": "userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -99,22 +97,15 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ],
+          "columns": ["provider", "provider_account_id"],
           "name": "account_provider_provider_account_id_pk"
         }
       },
@@ -152,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -249,12 +236,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -262,23 +245,15 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ],
+          "columns": ["board_id", "group_id", "permission"],
           "name": "boardGroupPermission_board_id_group_id_permission_pk"
         }
       },
@@ -316,12 +291,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -329,23 +300,15 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ],
+          "columns": ["board_id", "user_id", "permission"],
           "name": "boardUserPermission_board_id_user_id_permission_pk"
         }
       },
@@ -501,9 +464,7 @@
       "indexes": {
         "board_name_unique": {
           "name": "board_name_unique",
-          "columns": [
-            "name"
-          ],
+          "columns": ["name"],
           "isUnique": true
         }
       },
@@ -512,12 +473,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -680,12 +637,8 @@
           "name": "custom_widget_definition_creator_id_user_id_fk",
           "tableFrom": "custom_widget_definition",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -732,22 +685,15 @@
           "name": "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
           "tableFrom": "custom_widget_secret",
           "tableTo": "custom_widget_definition",
-          "columnsFrom": [
-            "definition_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "custom_widget_secret_definition_id_kind_pk": {
-          "columns": [
-            "definition_id",
-            "kind"
-          ],
+          "columns": ["definition_id", "kind"],
           "name": "custom_widget_secret_definition_id_kind_pk"
         }
       },
@@ -778,12 +724,8 @@
           "name": "groupMember_group_id_group_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -791,22 +733,15 @@
           "name": "groupMember_user_id_user_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "groupMember_group_id_user_id_pk": {
-          "columns": [
-            "group_id",
-            "user_id"
-          ],
+          "columns": ["group_id", "user_id"],
           "name": "groupMember_group_id_user_id_pk"
         }
       },
@@ -837,12 +772,8 @@
           "name": "groupPermission_group_id_group_id_fk",
           "tableFrom": "groupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -900,9 +831,7 @@
       "indexes": {
         "group_name_unique": {
           "name": "group_name_unique",
-          "columns": [
-            "name"
-          ],
+          "columns": ["name"],
           "isUnique": true
         }
       },
@@ -911,12 +840,8 @@
           "name": "group_owner_id_user_id_fk",
           "tableFrom": "group",
           "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -924,12 +849,8 @@
           "name": "group_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -937,12 +858,8 @@
           "name": "group_mobile_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1020,12 +937,8 @@
           "name": "icon_icon_repository_id_iconRepository_id_fk",
           "tableFrom": "icon",
           "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1065,12 +978,8 @@
           "name": "integrationGroupPermissions_integration_id_integration_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1078,23 +987,15 @@
           "name": "integrationGroupPermissions_group_id_group_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "integrationGroupPermissions_integration_id_group_id_permission_pk": {
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ],
+          "columns": ["integration_id", "group_id", "permission"],
           "name": "integrationGroupPermissions_integration_id_group_id_permission_pk"
         }
       },
@@ -1125,12 +1026,8 @@
           "name": "integration_item_item_id_item_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1138,22 +1035,15 @@
           "name": "integration_item_integration_id_integration_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "integration_item_item_id_integration_id_pk": {
-          "columns": [
-            "item_id",
-            "integration_id"
-          ],
+          "columns": ["item_id", "integration_id"],
           "name": "integration_item_item_id_integration_id_pk"
         }
       },
@@ -1195,16 +1085,12 @@
       "indexes": {
         "integration_secret__kind_idx": {
           "name": "integration_secret__kind_idx",
-          "columns": [
-            "kind"
-          ],
+          "columns": ["kind"],
           "isUnique": false
         },
         "integration_secret__updated_at_idx": {
           "name": "integration_secret__updated_at_idx",
-          "columns": [
-            "updated_at"
-          ],
+          "columns": ["updated_at"],
           "isUnique": false
         }
       },
@@ -1213,22 +1099,15 @@
           "name": "integrationSecret_integration_id_integration_id_fk",
           "tableFrom": "integrationSecret",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "integrationSecret_integration_id_kind_pk": {
-          "columns": [
-            "integration_id",
-            "kind"
-          ],
+          "columns": ["integration_id", "kind"],
           "name": "integrationSecret_integration_id_kind_pk"
         }
       },
@@ -1266,12 +1145,8 @@
           "name": "integrationUserPermission_integration_id_integration_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1279,23 +1154,15 @@
           "name": "integrationUserPermission_user_id_user_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "integrationUserPermission_integration_id_user_id_permission_pk": {
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ],
+          "columns": ["integration_id", "user_id", "permission"],
           "name": "integrationUserPermission_integration_id_user_id_permission_pk"
         }
       },
@@ -1344,9 +1211,7 @@
       "indexes": {
         "integration__kind_idx": {
           "name": "integration__kind_idx",
-          "columns": [
-            "kind"
-          ],
+          "columns": ["kind"],
           "isUnique": false
         }
       },
@@ -1355,12 +1220,8 @@
           "name": "integration_app_id_app_id_fk",
           "tableFrom": "integration",
           "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1404,9 +1265,7 @@
       "indexes": {
         "invite_token_unique": {
           "name": "invite_token_unique",
-          "columns": [
-            "token"
-          ],
+          "columns": ["token"],
           "isUnique": true
         }
       },
@@ -1415,12 +1274,8 @@
           "name": "invite_creator_id_user_id_fk",
           "tableFrom": "invite",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1488,12 +1343,8 @@
           "name": "item_layout_item_id_item_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1501,12 +1352,8 @@
           "name": "item_layout_section_id_section_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1514,23 +1361,15 @@
           "name": "item_layout_layout_id_layout_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "item_layout_item_id_section_id_layout_id_pk": {
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ],
+          "columns": ["item_id", "section_id", "layout_id"],
           "name": "item_layout_item_id_section_id_layout_id_pk"
         }
       },
@@ -1584,12 +1423,8 @@
           "name": "item_board_id_board_id_fk",
           "tableFrom": "item",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1644,12 +1479,8 @@
           "name": "layout_board_id_board_id_fk",
           "tableFrom": "layout",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1718,12 +1549,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1827,9 +1654,7 @@
       "indexes": {
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
-          "columns": [
-            "short"
-          ],
+          "columns": ["short"],
           "isUnique": true
         }
       },
@@ -1838,12 +1663,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1884,12 +1705,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1897,22 +1714,15 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
-          "columns": [
-            "user_id",
-            "section_id"
-          ],
+          "columns": ["user_id", "section_id"],
           "name": "section_collapse_state_user_id_section_id_pk"
         }
       },
@@ -1978,12 +1788,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1991,12 +1797,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2004,22 +1806,15 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
-          "columns": [
-            "section_id",
-            "layout_id"
-          ],
+          "columns": ["section_id", "layout_id"],
           "name": "section_layout_section_id_layout_id_pk"
         }
       },
@@ -2086,12 +1881,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2122,9 +1913,7 @@
       "indexes": {
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
-          "columns": [
-            "setting_key"
-          ],
+          "columns": ["setting_key"],
           "isUnique": true
         }
       },
@@ -2161,9 +1950,7 @@
       "indexes": {
         "user_id_idx": {
           "name": "user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -2172,12 +1959,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2215,10 +1998,7 @@
       "foreignKeys": {},
       "compositePrimaryKeys": {
         "trusted_certificate_hostname_hostname_thumbprint_pk": {
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ],
+          "columns": ["hostname", "thumbprint"],
           "name": "trusted_certificate_hostname_hostname_thumbprint_pk"
         }
       },
@@ -2362,12 +2142,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2375,12 +2151,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2388,12 +2160,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2431,10 +2199,7 @@
       "foreignKeys": {},
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
-          "columns": [
-            "identifier",
-            "token"
-          ],
+          "columns": ["identifier", "token"],
           "name": "verificationToken_identifier_token_pk"
         }
       },
diff --git a/packages/db/migrations/sqlite/meta/0040_snapshot.json b/packages/db/migrations/sqlite/meta/0040_snapshot.json
index 9f0bc677e..b7da34135 100644
--- a/packages/db/migrations/sqlite/meta/0040_snapshot.json
+++ b/packages/db/migrations/sqlite/meta/0040_snapshot.json
@@ -88,9 +88,7 @@
       "indexes": {
         "userId_idx": {
           "name": "userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -99,22 +97,15 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ],
+          "columns": ["provider", "provider_account_id"],
           "name": "account_provider_provider_account_id_pk"
         }
       },
@@ -152,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -249,12 +236,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -262,23 +245,15 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ],
+          "columns": ["board_id", "group_id", "permission"],
           "name": "boardGroupPermission_board_id_group_id_permission_pk"
         }
       },
@@ -316,12 +291,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -329,23 +300,15 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ],
+          "columns": ["board_id", "user_id", "permission"],
           "name": "boardUserPermission_board_id_user_id_permission_pk"
         }
       },
@@ -501,9 +464,7 @@
       "indexes": {
         "board_name_unique": {
           "name": "board_name_unique",
-          "columns": [
-            "name"
-          ],
+          "columns": ["name"],
           "isUnique": true
         }
       },
@@ -512,12 +473,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -680,12 +637,8 @@
           "name": "custom_widget_definition_creator_id_user_id_fk",
           "tableFrom": "custom_widget_definition",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -732,22 +685,15 @@
           "name": "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
           "tableFrom": "custom_widget_secret",
           "tableTo": "custom_widget_definition",
-          "columnsFrom": [
-            "definition_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "custom_widget_secret_definition_id_kind_pk": {
-          "columns": [
-            "definition_id",
-            "kind"
-          ],
+          "columns": ["definition_id", "kind"],
           "name": "custom_widget_secret_definition_id_kind_pk"
         }
       },
@@ -778,12 +724,8 @@
           "name": "groupMember_group_id_group_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -791,22 +733,15 @@
           "name": "groupMember_user_id_user_id_fk",
           "tableFrom": "groupMember",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "groupMember_group_id_user_id_pk": {
-          "columns": [
-            "group_id",
-            "user_id"
-          ],
+          "columns": ["group_id", "user_id"],
           "name": "groupMember_group_id_user_id_pk"
         }
       },
@@ -837,12 +772,8 @@
           "name": "groupPermission_group_id_group_id_fk",
           "tableFrom": "groupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -900,9 +831,7 @@
       "indexes": {
         "group_name_unique": {
           "name": "group_name_unique",
-          "columns": [
-            "name"
-          ],
+          "columns": ["name"],
           "isUnique": true
         }
       },
@@ -911,12 +840,8 @@
           "name": "group_owner_id_user_id_fk",
           "tableFrom": "group",
           "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -924,12 +849,8 @@
           "name": "group_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -937,12 +858,8 @@
           "name": "group_mobile_home_board_id_board_id_fk",
           "tableFrom": "group",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1020,12 +937,8 @@
           "name": "icon_icon_repository_id_iconRepository_id_fk",
           "tableFrom": "icon",
           "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1065,12 +978,8 @@
           "name": "integrationGroupPermissions_integration_id_integration_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1078,23 +987,15 @@
           "name": "integrationGroupPermissions_group_id_group_id_fk",
           "tableFrom": "integrationGroupPermissions",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "integrationGroupPermissions_integration_id_group_id_permission_pk": {
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ],
+          "columns": ["integration_id", "group_id", "permission"],
           "name": "integrationGroupPermissions_integration_id_group_id_permission_pk"
         }
       },
@@ -1125,12 +1026,8 @@
           "name": "integration_item_item_id_item_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1138,22 +1035,15 @@
           "name": "integration_item_integration_id_integration_id_fk",
           "tableFrom": "integration_item",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "integration_item_item_id_integration_id_pk": {
-          "columns": [
-            "item_id",
-            "integration_id"
-          ],
+          "columns": ["item_id", "integration_id"],
           "name": "integration_item_item_id_integration_id_pk"
         }
       },
@@ -1195,16 +1085,12 @@
       "indexes": {
         "integration_secret__kind_idx": {
           "name": "integration_secret__kind_idx",
-          "columns": [
-            "kind"
-          ],
+          "columns": ["kind"],
           "isUnique": false
         },
         "integration_secret__updated_at_idx": {
           "name": "integration_secret__updated_at_idx",
-          "columns": [
-            "updated_at"
-          ],
+          "columns": ["updated_at"],
           "isUnique": false
         }
       },
@@ -1213,22 +1099,15 @@
           "name": "integrationSecret_integration_id_integration_id_fk",
           "tableFrom": "integrationSecret",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "integrationSecret_integration_id_kind_pk": {
-          "columns": [
-            "integration_id",
-            "kind"
-          ],
+          "columns": ["integration_id", "kind"],
           "name": "integrationSecret_integration_id_kind_pk"
         }
       },
@@ -1266,12 +1145,8 @@
           "name": "integrationUserPermission_integration_id_integration_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1279,23 +1154,15 @@
           "name": "integrationUserPermission_user_id_user_id_fk",
           "tableFrom": "integrationUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "integrationUserPermission_integration_id_user_id_permission_pk": {
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ],
+          "columns": ["integration_id", "user_id", "permission"],
           "name": "integrationUserPermission_integration_id_user_id_permission_pk"
         }
       },
@@ -1344,9 +1211,7 @@
       "indexes": {
         "integration__kind_idx": {
           "name": "integration__kind_idx",
-          "columns": [
-            "kind"
-          ],
+          "columns": ["kind"],
           "isUnique": false
         }
       },
@@ -1355,12 +1220,8 @@
           "name": "integration_app_id_app_id_fk",
           "tableFrom": "integration",
           "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1404,9 +1265,7 @@
       "indexes": {
         "invite_token_unique": {
           "name": "invite_token_unique",
-          "columns": [
-            "token"
-          ],
+          "columns": ["token"],
           "isUnique": true
         }
       },
@@ -1415,12 +1274,8 @@
           "name": "invite_creator_id_user_id_fk",
           "tableFrom": "invite",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1488,12 +1343,8 @@
           "name": "item_layout_item_id_item_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1501,12 +1352,8 @@
           "name": "item_layout_section_id_section_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1514,23 +1361,15 @@
           "name": "item_layout_layout_id_layout_id_fk",
           "tableFrom": "item_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "item_layout_item_id_section_id_layout_id_pk": {
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ],
+          "columns": ["item_id", "section_id", "layout_id"],
           "name": "item_layout_item_id_section_id_layout_id_pk"
         }
       },
@@ -1584,12 +1423,8 @@
           "name": "item_board_id_board_id_fk",
           "tableFrom": "item",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1644,12 +1479,8 @@
           "name": "layout_board_id_board_id_fk",
           "tableFrom": "layout",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1718,12 +1549,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -1827,9 +1654,7 @@
       "indexes": {
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
-          "columns": [
-            "short"
-          ],
+          "columns": ["short"],
           "isUnique": true
         }
       },
@@ -1838,12 +1663,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -1884,12 +1705,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1897,22 +1714,15 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
-          "columns": [
-            "user_id",
-            "section_id"
-          ],
+          "columns": ["user_id", "section_id"],
           "name": "section_collapse_state_user_id_section_id_pk"
         }
       },
@@ -1978,12 +1788,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -1991,12 +1797,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2004,22 +1806,15 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
-          "columns": [
-            "section_id",
-            "layout_id"
-          ],
+          "columns": ["section_id", "layout_id"],
           "name": "section_layout_section_id_layout_id_pk"
         }
       },
@@ -2086,12 +1881,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2122,9 +1913,7 @@
       "indexes": {
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
-          "columns": [
-            "setting_key"
-          ],
+          "columns": ["setting_key"],
           "isUnique": true
         }
       },
@@ -2161,9 +1950,7 @@
       "indexes": {
         "user_id_idx": {
           "name": "user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -2172,12 +1959,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2215,10 +1998,7 @@
       "foreignKeys": {},
       "compositePrimaryKeys": {
         "trusted_certificate_hostname_hostname_thumbprint_pk": {
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ],
+          "columns": ["hostname", "thumbprint"],
           "name": "trusted_certificate_hostname_hostname_thumbprint_pk"
         }
       },
@@ -2362,12 +2142,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2375,12 +2151,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2388,12 +2160,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2431,10 +2199,7 @@
       "foreignKeys": {},
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
-          "columns": [
-            "identifier",
-            "token"
-          ],
+          "columns": ["identifier", "token"],
           "name": "verificationToken_identifier_token_pk"
         }
       },
@@ -2479,22 +2244,15 @@
           "name": "widget_secret_item_id_item_id_fk",
           "tableFrom": "widget_secret",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "widget_secret_item_id_kind_pk": {
-          "columns": [
-            "item_id",
-            "kind"
-          ],
+          "columns": ["item_id", "kind"],
           "name": "widget_secret_item_id_kind_pk"
         }
       },
diff --git a/packages/db/migrations/sqlite/meta/0042_snapshot.json b/packages/db/migrations/sqlite/meta/0042_snapshot.json
index 73fb43f1b..035c92837 100644
--- a/packages/db/migrations/sqlite/meta/0042_snapshot.json
+++ b/packages/db/migrations/sqlite/meta/0042_snapshot.json
@@ -1,7 +1,7 @@
 {
   "version": "6",
   "dialect": "sqlite",
-  "id": "4e6167f4-8517-454b-9ffc-298f9095691a",
+  "id": "51923913-fdc0-4ae7-9127-e86587e0b51f",
   "prevId": "852e049b-72cc-4d7f-8be9-931c042fe019",
   "tables": {
     "account": {
@@ -88,9 +88,7 @@
       "indexes": {
         "userId_idx": {
           "name": "userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -99,22 +97,15 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ],
+          "columns": ["provider", "provider_account_id"],
           "name": "account_provider_provider_account_id_pk"
         }
       },
@@ -152,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -218,240 +205,6 @@
       "uniqueConstraints": {},
       "checkConstraints": {}
     },
-    "assistant_configuration": {
-      "name": "assistant_configuration",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'default'"
-        },
-        "enabled": {
-          "name": "enabled",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": false
-        },
-        "provider": {
-          "name": "provider",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'openrouter'"
-        },
-        "base_url": {
-          "name": "base_url",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'https://openrouter.ai/api/v1'"
-        },
-        "model_discovery_path": {
-          "name": "model_discovery_path",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false,
-          "default": "'/models'"
-        },
-        "encrypted_api_key": {
-          "name": "encrypted_api_key",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "encrypted_headers": {
-          "name": "encrypted_headers",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "model_id": {
-          "name": "model_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(unixepoch())"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "assistant_message": {
-      "name": "assistant_message",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "thread_id": {
-          "name": "thread_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "parent_id": {
-          "name": "parent_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "format": {
-          "name": "format",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'ai-sdk/v6'"
-        },
-        "content": {
-          "name": "content",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'{\"json\": {}}'"
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(unixepoch())"
-        }
-      },
-      "indexes": {
-        "assistant_message__thread_id_created_at_idx": {
-          "name": "assistant_message__thread_id_created_at_idx",
-          "columns": [
-            "thread_id",
-            "created_at"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "assistant_message_thread_id_assistant_thread_id_fk": {
-          "name": "assistant_message_thread_id_assistant_thread_id_fk",
-          "tableFrom": "assistant_message",
-          "tableTo": "assistant_thread",
-          "columnsFrom": [
-            "thread_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "assistant_thread": {
-      "name": "assistant_thread",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "title": {
-          "name": "title",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "model_id": {
-          "name": "model_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(unixepoch())"
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(unixepoch())"
-        }
-      },
-      "indexes": {
-        "assistant_thread__user_id_updated_at_idx": {
-          "name": "assistant_thread__user_id_updated_at_idx",
-          "columns": [
-            "user_id",
-            "updated_at"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "assistant_thread_user_id_user_id_fk": {
-          "name": "assistant_thread_user_id_user_id_fk",
-          "tableFrom": "assistant_thread",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
     "boardGroupPermission": {
       "name": "boardGroupPermission",
       "columns": {
@@ -483,12 +236,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -496,23 +245,15 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ],
+          "columns": ["board_id", "group_id", "permission"],
           "name": "boardGroupPermission_board_id_group_id_permission_pk"
         }
       },
@@ -550,12 +291,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -563,23 +300,15 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ],
+          "columns": ["board_id", "user_id", "permission"],
           "name": "boardUserPermission_board_id_user_id_permission_pk"
         }
       },
@@ -735,9 +464,7 @@
       "indexes": {
         "board_name_unique": {
           "name": "board_name_unique",
-          "columns": [
-            "name"
-          ],
+          "columns": ["name"],
           "isUnique": true
         }
       },
@@ -746,12 +473,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -792,6 +515,962 @@
       "uniqueConstraints": {},
       "checkConstraints": {}
     },
+    "custom_widget_v2_definition": {
+      "name": "custom_widget_v2_definition",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "sources": {
+          "name": "sources",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "requests": {
+          "name": "requests",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "template": {
+          "name": "template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_v2_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_v2_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "custom_widget_v2_secret": {
+      "name": "custom_widget_v2_secret",
+      "columns": {
+        "source_id": {
+          "name": "source_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "encrypted_value": {
+          "name": "encrypted_value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_secret_definition_id_fk": {
+          "name": "custom_widget_v2_secret_definition_id_fk",
+          "tableFrom": "custom_widget_v2_secret",
+          "tableTo": "custom_widget_v2_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_secret_definition_id_source_id_kind_pk": {
+          "columns": ["definition_id", "source_id", "kind"],
+          "name": "custom_widget_v2_secret_definition_id_source_id_kind_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "groupMember": {
+      "name": "groupMember",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_group_id_group_id_fk": {
+          "name": "groupMember_group_id_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_user_id_user_id_fk": {
+          "name": "groupMember_user_id_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_group_id_user_id_pk": {
+          "columns": ["group_id", "user_id"],
+          "name": "groupMember_group_id_user_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "groupPermission": {
+      "name": "groupPermission",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_group_id_group_id_fk": {
+          "name": "groupPermission_group_id_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "group": {
+      "name": "group",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "position": {
+          "name": "position",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "group_name_unique": {
+          "name": "group_name_unique",
+          "columns": ["name"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_home_board_id_board_id_fk": {
+          "name": "group_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_mobile_home_board_id_board_id_fk": {
+          "name": "group_mobile_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "iconRepository": {
+      "name": "iconRepository",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "icon": {
+      "name": "icon",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "checksum": {
+          "name": "checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_repository_id": {
+          "name": "icon_repository_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_icon_repository_id_iconRepository_id_fk": {
+          "name": "icon_icon_repository_id_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integrationGroupPermissions": {
+      "name": "integrationGroupPermissions",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationGroupPermissions_integration_id_integration_id_fk": {
+          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationGroupPermissions_group_id_group_id_fk": {
+          "name": "integrationGroupPermissions_group_id_group_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationGroupPermissions_integration_id_group_id_permission_pk": {
+          "columns": ["integration_id", "group_id", "permission"],
+          "name": "integrationGroupPermissions_integration_id_group_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integration_item": {
+      "name": "integration_item",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "columns": ["item_id", "integration_id"],
+          "name": "integration_item_item_id_integration_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integrationSecret": {
+      "name": "integrationSecret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": ["updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "columns": ["integration_id", "kind"],
+          "name": "integrationSecret_integration_id_kind_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integrationUserPermission": {
+      "name": "integrationUserPermission",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationUserPermission_integration_id_integration_id_fk": {
+          "name": "integrationUserPermission_integration_id_integration_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationUserPermission_user_id_user_id_fk": {
+          "name": "integrationUserPermission_user_id_user_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationUserPermission_integration_id_user_id_permission_pk": {
+          "columns": ["integration_id", "user_id", "permission"],
+          "name": "integrationUserPermission_integration_id_user_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integration": {
+      "name": "integration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "app_id": {
+          "name": "app_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integration_app_id_app_id_fk": {
+          "name": "integration_app_id_app_id_fk",
+          "tableFrom": "integration",
+          "tableTo": "app",
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "invite": {
+      "name": "invite",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "columns": ["token"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "item_layout": {
+      "name": "item_layout",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_layout_item_id_item_id_fk": {
+          "name": "item_layout_item_id_item_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_section_id_section_id_fk": {
+          "name": "item_layout_section_id_section_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_layout_id_layout_id_fk": {
+          "name": "item_layout_layout_id_layout_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_layout_item_id_section_id_layout_id_pk": {
+          "columns": ["item_id", "section_id", "layout_id"],
+          "name": "item_layout_item_id_section_id_layout_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_board_id_board_id_fk": {
+          "name": "item_board_id_board_id_fk",
+          "tableFrom": "item",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "layout": {
+      "name": "layout",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "breakpoint": {
+          "name": "breakpoint",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "layout_board_id_board_id_fk": {
+          "name": "layout_board_id_board_id_fk",
+          "tableFrom": "layout",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
     "custom_widget_definition": {
       "name": "custom_widget_definition",
       "columns": {
@@ -914,12 +1593,8 @@
           "name": "custom_widget_definition_creator_id_user_id_fk",
           "tableFrom": "custom_widget_definition",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -966,932 +1641,21 @@
           "name": "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
           "tableFrom": "custom_widget_secret",
           "tableTo": "custom_widget_definition",
-          "columnsFrom": [
-            "definition_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "custom_widget_secret_definition_id_kind_pk": {
-          "columns": [
-            "definition_id",
-            "kind"
-          ],
+          "columns": ["definition_id", "kind"],
           "name": "custom_widget_secret_definition_id_kind_pk"
         }
       },
       "uniqueConstraints": {},
       "checkConstraints": {}
     },
-    "groupMember": {
-      "name": "groupMember",
-      "columns": {
-        "group_id": {
-          "name": "group_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "groupMember_group_id_group_id_fk": {
-          "name": "groupMember_group_id_group_id_fk",
-          "tableFrom": "groupMember",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "groupMember_user_id_user_id_fk": {
-          "name": "groupMember_user_id_user_id_fk",
-          "tableFrom": "groupMember",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "groupMember_group_id_user_id_pk": {
-          "columns": [
-            "group_id",
-            "user_id"
-          ],
-          "name": "groupMember_group_id_user_id_pk"
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "groupPermission": {
-      "name": "groupPermission",
-      "columns": {
-        "group_id": {
-          "name": "group_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "permission": {
-          "name": "permission",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "groupPermission_group_id_group_id_fk": {
-          "name": "groupPermission_group_id_group_id_fk",
-          "tableFrom": "groupPermission",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "group": {
-      "name": "group",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "owner_id": {
-          "name": "owner_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "home_board_id": {
-          "name": "home_board_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "mobile_home_board_id": {
-          "name": "mobile_home_board_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "position": {
-          "name": "position",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "group_name_unique": {
-          "name": "group_name_unique",
-          "columns": [
-            "name"
-          ],
-          "isUnique": true
-        }
-      },
-      "foreignKeys": {
-        "group_owner_id_user_id_fk": {
-          "name": "group_owner_id_user_id_fk",
-          "tableFrom": "group",
-          "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        },
-        "group_home_board_id_board_id_fk": {
-          "name": "group_home_board_id_board_id_fk",
-          "tableFrom": "group",
-          "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        },
-        "group_mobile_home_board_id_board_id_fk": {
-          "name": "group_mobile_home_board_id_board_id_fk",
-          "tableFrom": "group",
-          "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "iconRepository": {
-      "name": "iconRepository",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "slug": {
-          "name": "slug",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "icon": {
-      "name": "icon",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "url": {
-          "name": "url",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "checksum": {
-          "name": "checksum",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "icon_repository_id": {
-          "name": "icon_repository_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "icon_icon_repository_id_iconRepository_id_fk": {
-          "name": "icon_icon_repository_id_iconRepository_id_fk",
-          "tableFrom": "icon",
-          "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "integrationGroupPermissions": {
-      "name": "integrationGroupPermissions",
-      "columns": {
-        "integration_id": {
-          "name": "integration_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "group_id": {
-          "name": "group_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "permission": {
-          "name": "permission",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integrationGroupPermissions_integration_id_integration_id_fk": {
-          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
-          "tableFrom": "integrationGroupPermissions",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integrationGroupPermissions_group_id_group_id_fk": {
-          "name": "integrationGroupPermissions_group_id_group_id_fk",
-          "tableFrom": "integrationGroupPermissions",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integrationGroupPermissions_integration_id_group_id_permission_pk": {
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ],
-          "name": "integrationGroupPermissions_integration_id_group_id_permission_pk"
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "integration_item": {
-      "name": "integration_item",
-      "columns": {
-        "item_id": {
-          "name": "item_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "integration_id": {
-          "name": "integration_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integration_item_item_id_item_id_fk": {
-          "name": "integration_item_item_id_item_id_fk",
-          "tableFrom": "integration_item",
-          "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integration_item_integration_id_integration_id_fk": {
-          "name": "integration_item_integration_id_integration_id_fk",
-          "tableFrom": "integration_item",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integration_item_item_id_integration_id_pk": {
-          "columns": [
-            "item_id",
-            "integration_id"
-          ],
-          "name": "integration_item_item_id_integration_id_pk"
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "integrationSecret": {
-      "name": "integrationSecret",
-      "columns": {
-        "kind": {
-          "name": "kind",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "value": {
-          "name": "value",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "integration_id": {
-          "name": "integration_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "integration_secret__kind_idx": {
-          "name": "integration_secret__kind_idx",
-          "columns": [
-            "kind"
-          ],
-          "isUnique": false
-        },
-        "integration_secret__updated_at_idx": {
-          "name": "integration_secret__updated_at_idx",
-          "columns": [
-            "updated_at"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "integrationSecret_integration_id_integration_id_fk": {
-          "name": "integrationSecret_integration_id_integration_id_fk",
-          "tableFrom": "integrationSecret",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integrationSecret_integration_id_kind_pk": {
-          "columns": [
-            "integration_id",
-            "kind"
-          ],
-          "name": "integrationSecret_integration_id_kind_pk"
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "integrationUserPermission": {
-      "name": "integrationUserPermission",
-      "columns": {
-        "integration_id": {
-          "name": "integration_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "permission": {
-          "name": "permission",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integrationUserPermission_integration_id_integration_id_fk": {
-          "name": "integrationUserPermission_integration_id_integration_id_fk",
-          "tableFrom": "integrationUserPermission",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integrationUserPermission_user_id_user_id_fk": {
-          "name": "integrationUserPermission_user_id_user_id_fk",
-          "tableFrom": "integrationUserPermission",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integrationUserPermission_integration_id_user_id_permission_pk": {
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ],
-          "name": "integrationUserPermission_integration_id_user_id_permission_pk"
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "integration": {
-      "name": "integration",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "url": {
-          "name": "url",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "kind": {
-          "name": "kind",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "app_id": {
-          "name": "app_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "integration__kind_idx": {
-          "name": "integration__kind_idx",
-          "columns": [
-            "kind"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "integration_app_id_app_id_fk": {
-          "name": "integration_app_id_app_id_fk",
-          "tableFrom": "integration",
-          "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "invite": {
-      "name": "invite",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "token": {
-          "name": "token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "expiration_date": {
-          "name": "expiration_date",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "creator_id": {
-          "name": "creator_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "invite_token_unique": {
-          "name": "invite_token_unique",
-          "columns": [
-            "token"
-          ],
-          "isUnique": true
-        }
-      },
-      "foreignKeys": {
-        "invite_creator_id_user_id_fk": {
-          "name": "invite_creator_id_user_id_fk",
-          "tableFrom": "invite",
-          "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "item_layout": {
-      "name": "item_layout",
-      "columns": {
-        "item_id": {
-          "name": "item_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "section_id": {
-          "name": "section_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "layout_id": {
-          "name": "layout_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "x_offset": {
-          "name": "x_offset",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "y_offset": {
-          "name": "y_offset",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "width": {
-          "name": "width",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "height": {
-          "name": "height",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "item_layout_item_id_item_id_fk": {
-          "name": "item_layout_item_id_item_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "item_layout_section_id_section_id_fk": {
-          "name": "item_layout_section_id_section_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "item_layout_layout_id_layout_id_fk": {
-          "name": "item_layout_layout_id_layout_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "item_layout_item_id_section_id_layout_id_pk": {
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ],
-          "name": "item_layout_item_id_section_id_layout_id_pk"
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "item": {
-      "name": "item",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "board_id": {
-          "name": "board_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "kind": {
-          "name": "kind",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "options": {
-          "name": "options",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'{\"json\": {}}'"
-        },
-        "advanced_options": {
-          "name": "advanced_options",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'{\"json\": {}}'"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "item_board_id_board_id_fk": {
-          "name": "item_board_id_board_id_fk",
-          "tableFrom": "item",
-          "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "layout": {
-      "name": "layout",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "board_id": {
-          "name": "board_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "column_count": {
-          "name": "column_count",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "breakpoint": {
-          "name": "breakpoint",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": 0
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "layout_board_id_board_id_fk": {
-          "name": "layout_board_id_board_id_fk",
-          "tableFrom": "layout",
-          "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
     "media": {
       "name": "media",
       "columns": {
@@ -1952,12 +1716,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2061,9 +1821,7 @@
       "indexes": {
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
-          "columns": [
-            "short"
-          ],
+          "columns": ["short"],
           "isUnique": true
         }
       },
@@ -2072,12 +1830,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2118,12 +1872,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2131,22 +1881,15 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
-          "columns": [
-            "user_id",
-            "section_id"
-          ],
+          "columns": ["user_id", "section_id"],
           "name": "section_collapse_state_user_id_section_id_pk"
         }
       },
@@ -2212,12 +1955,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2225,12 +1964,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2238,22 +1973,15 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
-          "columns": [
-            "section_id",
-            "layout_id"
-          ],
+          "columns": ["section_id", "layout_id"],
           "name": "section_layout_section_id_layout_id_pk"
         }
       },
@@ -2320,12 +2048,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2356,9 +2080,7 @@
       "indexes": {
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
-          "columns": [
-            "setting_key"
-          ],
+          "columns": ["setting_key"],
           "isUnique": true
         }
       },
@@ -2395,9 +2117,7 @@
       "indexes": {
         "user_id_idx": {
           "name": "user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -2406,12 +2126,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2449,10 +2165,7 @@
       "foreignKeys": {},
       "compositePrimaryKeys": {
         "trusted_certificate_hostname_hostname_thumbprint_pk": {
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ],
+          "columns": ["hostname", "thumbprint"],
           "name": "trusted_certificate_hostname_hostname_thumbprint_pk"
         }
       },
@@ -2604,12 +2317,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2617,12 +2326,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2630,12 +2335,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2673,10 +2374,7 @@
       "foreignKeys": {},
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
-          "columns": [
-            "identifier",
-            "token"
-          ],
+          "columns": ["identifier", "token"],
           "name": "verificationToken_identifier_token_pk"
         }
       },
@@ -2721,22 +2419,15 @@
           "name": "widget_secret_item_id_item_id_fk",
           "tableFrom": "widget_secret",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "widget_secret_item_id_kind_pk": {
-          "columns": [
-            "item_id",
-            "kind"
-          ],
+          "columns": ["item_id", "kind"],
           "name": "widget_secret_item_id_kind_pk"
         }
       },
diff --git a/packages/db/migrations/sqlite/meta/0043_snapshot.json b/packages/db/migrations/sqlite/meta/0043_snapshot.json
index 9aadb4851..c0b92c14b 100644
--- a/packages/db/migrations/sqlite/meta/0043_snapshot.json
+++ b/packages/db/migrations/sqlite/meta/0043_snapshot.json
@@ -1,8 +1,8 @@
 {
   "version": "6",
   "dialect": "sqlite",
-  "id": "01b26db2-8fa6-4578-a60c-2e63b67d77ff",
-  "prevId": "4e6167f4-8517-454b-9ffc-298f9095691a",
+  "id": "e868162b-3757-4d9e-940c-facc749256d6",
+  "prevId": "51923913-fdc0-4ae7-9127-e86587e0b51f",
   "tables": {
     "account": {
       "name": "account",
@@ -88,9 +88,7 @@
       "indexes": {
         "userId_idx": {
           "name": "userId_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -99,22 +97,15 @@
           "name": "account_user_id_user_id_fk",
           "tableFrom": "account",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "account_provider_provider_account_id_pk": {
-          "columns": [
-            "provider",
-            "provider_account_id"
-          ],
+          "columns": ["provider", "provider_account_id"],
           "name": "account_provider_provider_account_id_pk"
         }
       },
@@ -152,12 +143,8 @@
           "name": "apiKey_user_id_user_id_fk",
           "tableFrom": "apiKey",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -218,248 +205,6 @@
       "uniqueConstraints": {},
       "checkConstraints": {}
     },
-    "assistant_configuration": {
-      "name": "assistant_configuration",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'default'"
-        },
-        "enabled": {
-          "name": "enabled",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": false
-        },
-        "web_search_enabled": {
-          "name": "web_search_enabled",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": false
-        },
-        "provider": {
-          "name": "provider",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'openrouter'"
-        },
-        "base_url": {
-          "name": "base_url",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'https://openrouter.ai/api/v1'"
-        },
-        "model_discovery_path": {
-          "name": "model_discovery_path",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false,
-          "default": "'/models'"
-        },
-        "encrypted_api_key": {
-          "name": "encrypted_api_key",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "encrypted_headers": {
-          "name": "encrypted_headers",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "model_id": {
-          "name": "model_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(unixepoch())"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "assistant_message": {
-      "name": "assistant_message",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "thread_id": {
-          "name": "thread_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "parent_id": {
-          "name": "parent_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "format": {
-          "name": "format",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'ai-sdk/v6'"
-        },
-        "content": {
-          "name": "content",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'{\"json\": {}}'"
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(unixepoch())"
-        }
-      },
-      "indexes": {
-        "assistant_message__thread_id_created_at_idx": {
-          "name": "assistant_message__thread_id_created_at_idx",
-          "columns": [
-            "thread_id",
-            "created_at"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "assistant_message_thread_id_assistant_thread_id_fk": {
-          "name": "assistant_message_thread_id_assistant_thread_id_fk",
-          "tableFrom": "assistant_message",
-          "tableTo": "assistant_thread",
-          "columnsFrom": [
-            "thread_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "assistant_thread": {
-      "name": "assistant_thread",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "title": {
-          "name": "title",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "model_id": {
-          "name": "model_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(unixepoch())"
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "(unixepoch())"
-        }
-      },
-      "indexes": {
-        "assistant_thread__user_id_updated_at_idx": {
-          "name": "assistant_thread__user_id_updated_at_idx",
-          "columns": [
-            "user_id",
-            "updated_at"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "assistant_thread_user_id_user_id_fk": {
-          "name": "assistant_thread_user_id_user_id_fk",
-          "tableFrom": "assistant_thread",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
     "boardGroupPermission": {
       "name": "boardGroupPermission",
       "columns": {
@@ -491,12 +236,8 @@
           "name": "boardGroupPermission_board_id_board_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -504,23 +245,15 @@
           "name": "boardGroupPermission_group_id_group_id_fk",
           "tableFrom": "boardGroupPermission",
           "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "boardGroupPermission_board_id_group_id_permission_pk": {
-          "columns": [
-            "board_id",
-            "group_id",
-            "permission"
-          ],
+          "columns": ["board_id", "group_id", "permission"],
           "name": "boardGroupPermission_board_id_group_id_permission_pk"
         }
       },
@@ -558,12 +291,8 @@
           "name": "boardUserPermission_board_id_board_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -571,23 +300,15 @@
           "name": "boardUserPermission_user_id_user_id_fk",
           "tableFrom": "boardUserPermission",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "boardUserPermission_board_id_user_id_permission_pk": {
-          "columns": [
-            "board_id",
-            "user_id",
-            "permission"
-          ],
+          "columns": ["board_id", "user_id", "permission"],
           "name": "boardUserPermission_board_id_user_id_permission_pk"
         }
       },
@@ -743,9 +464,7 @@
       "indexes": {
         "board_name_unique": {
           "name": "board_name_unique",
-          "columns": [
-            "name"
-          ],
+          "columns": ["name"],
           "isUnique": true
         }
       },
@@ -754,12 +473,8 @@
           "name": "board_creator_id_user_id_fk",
           "tableFrom": "board",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -800,6 +515,978 @@
       "uniqueConstraints": {},
       "checkConstraints": {}
     },
+    "custom_widget_v2_definition": {
+      "name": "custom_widget_v2_definition",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "sources": {
+          "name": "sources",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "requests": {
+          "name": "requests",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "template": {
+          "name": "template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_v2_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_v2_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "custom_widget_v2_secret": {
+      "name": "custom_widget_v2_secret",
+      "columns": {
+        "source_id": {
+          "name": "source_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "encrypted_value": {
+          "name": "encrypted_value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_secret_definition_id_fk": {
+          "name": "custom_widget_v2_secret_definition_id_fk",
+          "tableFrom": "custom_widget_v2_secret",
+          "tableTo": "custom_widget_v2_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_secret_definition_id_source_id_kind_pk": {
+          "columns": ["definition_id", "source_id", "kind"],
+          "name": "custom_widget_v2_secret_definition_id_source_id_kind_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "groupMember": {
+      "name": "groupMember",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_group_id_group_id_fk": {
+          "name": "groupMember_group_id_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_user_id_user_id_fk": {
+          "name": "groupMember_user_id_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_group_id_user_id_pk": {
+          "columns": ["group_id", "user_id"],
+          "name": "groupMember_group_id_user_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "groupPermission": {
+      "name": "groupPermission",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_group_id_group_id_fk": {
+          "name": "groupPermission_group_id_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "group": {
+      "name": "group",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "position": {
+          "name": "position",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "group_name_unique": {
+          "name": "group_name_unique",
+          "columns": ["name"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_home_board_id_board_id_fk": {
+          "name": "group_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_mobile_home_board_id_board_id_fk": {
+          "name": "group_mobile_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "iconRepository": {
+      "name": "iconRepository",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "icon": {
+      "name": "icon",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "checksum": {
+          "name": "checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_repository_id": {
+          "name": "icon_repository_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_icon_repository_id_iconRepository_id_fk": {
+          "name": "icon_icon_repository_id_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integrationGroupPermissions": {
+      "name": "integrationGroupPermissions",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationGroupPermissions_integration_id_integration_id_fk": {
+          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationGroupPermissions_group_id_group_id_fk": {
+          "name": "integrationGroupPermissions_group_id_group_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationGroupPermissions_integration_id_group_id_permission_pk": {
+          "columns": ["integration_id", "group_id", "permission"],
+          "name": "integrationGroupPermissions_integration_id_group_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integration_item": {
+      "name": "integration_item",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "columns": ["item_id", "integration_id"],
+          "name": "integration_item_item_id_integration_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integrationSecret": {
+      "name": "integrationSecret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": ["updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "columns": ["integration_id", "kind"],
+          "name": "integrationSecret_integration_id_kind_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integrationUserPermission": {
+      "name": "integrationUserPermission",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationUserPermission_integration_id_integration_id_fk": {
+          "name": "integrationUserPermission_integration_id_integration_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationUserPermission_user_id_user_id_fk": {
+          "name": "integrationUserPermission_user_id_user_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationUserPermission_integration_id_user_id_permission_pk": {
+          "columns": ["integration_id", "user_id", "permission"],
+          "name": "integrationUserPermission_integration_id_user_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integration": {
+      "name": "integration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "app_id": {
+          "name": "app_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integration_app_id_app_id_fk": {
+          "name": "integration_app_id_app_id_fk",
+          "tableFrom": "integration",
+          "tableTo": "app",
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "invite": {
+      "name": "invite",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "columns": ["token"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "item_layout": {
+      "name": "item_layout",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_layout_item_id_item_id_fk": {
+          "name": "item_layout_item_id_item_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_section_id_section_id_fk": {
+          "name": "item_layout_section_id_section_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_layout_id_layout_id_fk": {
+          "name": "item_layout_layout_id_layout_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_layout_item_id_section_id_layout_id_pk": {
+          "columns": ["item_id", "section_id", "layout_id"],
+          "name": "item_layout_item_id_section_id_layout_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_board_id_board_id_fk": {
+          "name": "item_board_id_board_id_fk",
+          "tableFrom": "item",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "layout": {
+      "name": "layout",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "left_gutter_column_count": {
+          "name": "left_gutter_column_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "right_gutter_column_count": {
+          "name": "right_gutter_column_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "breakpoint": {
+          "name": "breakpoint",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "layout_board_id_board_id_fk": {
+          "name": "layout_board_id_board_id_fk",
+          "tableFrom": "layout",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
     "custom_widget_definition": {
       "name": "custom_widget_definition",
       "columns": {
@@ -922,12 +1609,8 @@
           "name": "custom_widget_definition_creator_id_user_id_fk",
           "tableFrom": "custom_widget_definition",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -974,932 +1657,21 @@
           "name": "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
           "tableFrom": "custom_widget_secret",
           "tableTo": "custom_widget_definition",
-          "columnsFrom": [
-            "definition_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "custom_widget_secret_definition_id_kind_pk": {
-          "columns": [
-            "definition_id",
-            "kind"
-          ],
+          "columns": ["definition_id", "kind"],
           "name": "custom_widget_secret_definition_id_kind_pk"
         }
       },
       "uniqueConstraints": {},
       "checkConstraints": {}
     },
-    "groupMember": {
-      "name": "groupMember",
-      "columns": {
-        "group_id": {
-          "name": "group_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "groupMember_group_id_group_id_fk": {
-          "name": "groupMember_group_id_group_id_fk",
-          "tableFrom": "groupMember",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "groupMember_user_id_user_id_fk": {
-          "name": "groupMember_user_id_user_id_fk",
-          "tableFrom": "groupMember",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "groupMember_group_id_user_id_pk": {
-          "columns": [
-            "group_id",
-            "user_id"
-          ],
-          "name": "groupMember_group_id_user_id_pk"
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "groupPermission": {
-      "name": "groupPermission",
-      "columns": {
-        "group_id": {
-          "name": "group_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "permission": {
-          "name": "permission",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "groupPermission_group_id_group_id_fk": {
-          "name": "groupPermission_group_id_group_id_fk",
-          "tableFrom": "groupPermission",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "group": {
-      "name": "group",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "owner_id": {
-          "name": "owner_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "home_board_id": {
-          "name": "home_board_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "mobile_home_board_id": {
-          "name": "mobile_home_board_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "position": {
-          "name": "position",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "group_name_unique": {
-          "name": "group_name_unique",
-          "columns": [
-            "name"
-          ],
-          "isUnique": true
-        }
-      },
-      "foreignKeys": {
-        "group_owner_id_user_id_fk": {
-          "name": "group_owner_id_user_id_fk",
-          "tableFrom": "group",
-          "tableTo": "user",
-          "columnsFrom": [
-            "owner_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        },
-        "group_home_board_id_board_id_fk": {
-          "name": "group_home_board_id_board_id_fk",
-          "tableFrom": "group",
-          "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        },
-        "group_mobile_home_board_id_board_id_fk": {
-          "name": "group_mobile_home_board_id_board_id_fk",
-          "tableFrom": "group",
-          "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "iconRepository": {
-      "name": "iconRepository",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "slug": {
-          "name": "slug",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "icon": {
-      "name": "icon",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "url": {
-          "name": "url",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "checksum": {
-          "name": "checksum",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "icon_repository_id": {
-          "name": "icon_repository_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "icon_icon_repository_id_iconRepository_id_fk": {
-          "name": "icon_icon_repository_id_iconRepository_id_fk",
-          "tableFrom": "icon",
-          "tableTo": "iconRepository",
-          "columnsFrom": [
-            "icon_repository_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "integrationGroupPermissions": {
-      "name": "integrationGroupPermissions",
-      "columns": {
-        "integration_id": {
-          "name": "integration_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "group_id": {
-          "name": "group_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "permission": {
-          "name": "permission",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integrationGroupPermissions_integration_id_integration_id_fk": {
-          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
-          "tableFrom": "integrationGroupPermissions",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integrationGroupPermissions_group_id_group_id_fk": {
-          "name": "integrationGroupPermissions_group_id_group_id_fk",
-          "tableFrom": "integrationGroupPermissions",
-          "tableTo": "group",
-          "columnsFrom": [
-            "group_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integrationGroupPermissions_integration_id_group_id_permission_pk": {
-          "columns": [
-            "integration_id",
-            "group_id",
-            "permission"
-          ],
-          "name": "integrationGroupPermissions_integration_id_group_id_permission_pk"
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "integration_item": {
-      "name": "integration_item",
-      "columns": {
-        "item_id": {
-          "name": "item_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "integration_id": {
-          "name": "integration_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integration_item_item_id_item_id_fk": {
-          "name": "integration_item_item_id_item_id_fk",
-          "tableFrom": "integration_item",
-          "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integration_item_integration_id_integration_id_fk": {
-          "name": "integration_item_integration_id_integration_id_fk",
-          "tableFrom": "integration_item",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integration_item_item_id_integration_id_pk": {
-          "columns": [
-            "item_id",
-            "integration_id"
-          ],
-          "name": "integration_item_item_id_integration_id_pk"
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "integrationSecret": {
-      "name": "integrationSecret",
-      "columns": {
-        "kind": {
-          "name": "kind",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "value": {
-          "name": "value",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "integration_id": {
-          "name": "integration_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "integration_secret__kind_idx": {
-          "name": "integration_secret__kind_idx",
-          "columns": [
-            "kind"
-          ],
-          "isUnique": false
-        },
-        "integration_secret__updated_at_idx": {
-          "name": "integration_secret__updated_at_idx",
-          "columns": [
-            "updated_at"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "integrationSecret_integration_id_integration_id_fk": {
-          "name": "integrationSecret_integration_id_integration_id_fk",
-          "tableFrom": "integrationSecret",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integrationSecret_integration_id_kind_pk": {
-          "columns": [
-            "integration_id",
-            "kind"
-          ],
-          "name": "integrationSecret_integration_id_kind_pk"
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "integrationUserPermission": {
-      "name": "integrationUserPermission",
-      "columns": {
-        "integration_id": {
-          "name": "integration_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "permission": {
-          "name": "permission",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "integrationUserPermission_integration_id_integration_id_fk": {
-          "name": "integrationUserPermission_integration_id_integration_id_fk",
-          "tableFrom": "integrationUserPermission",
-          "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "integrationUserPermission_user_id_user_id_fk": {
-          "name": "integrationUserPermission_user_id_user_id_fk",
-          "tableFrom": "integrationUserPermission",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "integrationUserPermission_integration_id_user_id_permission_pk": {
-          "columns": [
-            "integration_id",
-            "user_id",
-            "permission"
-          ],
-          "name": "integrationUserPermission_integration_id_user_id_permission_pk"
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "integration": {
-      "name": "integration",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "url": {
-          "name": "url",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "kind": {
-          "name": "kind",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "app_id": {
-          "name": "app_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "integration__kind_idx": {
-          "name": "integration__kind_idx",
-          "columns": [
-            "kind"
-          ],
-          "isUnique": false
-        }
-      },
-      "foreignKeys": {
-        "integration_app_id_app_id_fk": {
-          "name": "integration_app_id_app_id_fk",
-          "tableFrom": "integration",
-          "tableTo": "app",
-          "columnsFrom": [
-            "app_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "set null",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "invite": {
-      "name": "invite",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "token": {
-          "name": "token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "expiration_date": {
-          "name": "expiration_date",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "creator_id": {
-          "name": "creator_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "invite_token_unique": {
-          "name": "invite_token_unique",
-          "columns": [
-            "token"
-          ],
-          "isUnique": true
-        }
-      },
-      "foreignKeys": {
-        "invite_creator_id_user_id_fk": {
-          "name": "invite_creator_id_user_id_fk",
-          "tableFrom": "invite",
-          "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "item_layout": {
-      "name": "item_layout",
-      "columns": {
-        "item_id": {
-          "name": "item_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "section_id": {
-          "name": "section_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "layout_id": {
-          "name": "layout_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "x_offset": {
-          "name": "x_offset",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "y_offset": {
-          "name": "y_offset",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "width": {
-          "name": "width",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "height": {
-          "name": "height",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "item_layout_item_id_item_id_fk": {
-          "name": "item_layout_item_id_item_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "item_layout_section_id_section_id_fk": {
-          "name": "item_layout_section_id_section_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "item_layout_layout_id_layout_id_fk": {
-          "name": "item_layout_layout_id_layout_id_fk",
-          "tableFrom": "item_layout",
-          "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {
-        "item_layout_item_id_section_id_layout_id_pk": {
-          "columns": [
-            "item_id",
-            "section_id",
-            "layout_id"
-          ],
-          "name": "item_layout_item_id_section_id_layout_id_pk"
-        }
-      },
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "item": {
-      "name": "item",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "board_id": {
-          "name": "board_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "kind": {
-          "name": "kind",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "options": {
-          "name": "options",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'{\"json\": {}}'"
-        },
-        "advanced_options": {
-          "name": "advanced_options",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": "'{\"json\": {}}'"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "item_board_id_board_id_fk": {
-          "name": "item_board_id_board_id_fk",
-          "tableFrom": "item",
-          "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
-    "layout": {
-      "name": "layout",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "board_id": {
-          "name": "board_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "column_count": {
-          "name": "column_count",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "breakpoint": {
-          "name": "breakpoint",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false,
-          "default": 0
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "layout_board_id_board_id_fk": {
-          "name": "layout_board_id_board_id_fk",
-          "tableFrom": "layout",
-          "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "checkConstraints": {}
-    },
     "media": {
       "name": "media",
       "columns": {
@@ -1960,12 +1732,8 @@
           "name": "media_creator_id_user_id_fk",
           "tableFrom": "media",
           "tableTo": "user",
-          "columnsFrom": [
-            "creator_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2069,9 +1837,7 @@
       "indexes": {
         "search_engine_short_unique": {
           "name": "search_engine_short_unique",
-          "columns": [
-            "short"
-          ],
+          "columns": ["short"],
           "isUnique": true
         }
       },
@@ -2080,12 +1846,8 @@
           "name": "search_engine_integration_id_integration_id_fk",
           "tableFrom": "search_engine",
           "tableTo": "integration",
-          "columnsFrom": [
-            "integration_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2126,12 +1888,8 @@
           "name": "section_collapse_state_user_id_user_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2139,22 +1897,15 @@
           "name": "section_collapse_state_section_id_section_id_fk",
           "tableFrom": "section_collapse_state",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "section_collapse_state_user_id_section_id_pk": {
-          "columns": [
-            "user_id",
-            "section_id"
-          ],
+          "columns": ["user_id", "section_id"],
           "name": "section_collapse_state_user_id_section_id_pk"
         }
       },
@@ -2220,12 +1971,8 @@
           "name": "section_layout_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2233,12 +1980,8 @@
           "name": "section_layout_layout_id_layout_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "layout",
-          "columnsFrom": [
-            "layout_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         },
@@ -2246,22 +1989,15 @@
           "name": "section_layout_parent_section_id_section_id_fk",
           "tableFrom": "section_layout",
           "tableTo": "section",
-          "columnsFrom": [
-            "parent_section_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "section_layout_section_id_layout_id_pk": {
-          "columns": [
-            "section_id",
-            "layout_id"
-          ],
+          "columns": ["section_id", "layout_id"],
           "name": "section_layout_section_id_layout_id_pk"
         }
       },
@@ -2328,12 +2064,8 @@
           "name": "section_board_id_board_id_fk",
           "tableFrom": "section",
           "tableTo": "board",
-          "columnsFrom": [
-            "board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2364,9 +2096,7 @@
       "indexes": {
         "serverSetting_settingKey_unique": {
           "name": "serverSetting_settingKey_unique",
-          "columns": [
-            "setting_key"
-          ],
+          "columns": ["setting_key"],
           "isUnique": true
         }
       },
@@ -2403,9 +2133,7 @@
       "indexes": {
         "user_id_idx": {
           "name": "user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -2414,12 +2142,8 @@
           "name": "session_user_id_user_id_fk",
           "tableFrom": "session",
           "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -2457,10 +2181,7 @@
       "foreignKeys": {},
       "compositePrimaryKeys": {
         "trusted_certificate_hostname_hostname_thumbprint_pk": {
-          "columns": [
-            "hostname",
-            "thumbprint"
-          ],
+          "columns": ["hostname", "thumbprint"],
           "name": "trusted_certificate_hostname_hostname_thumbprint_pk"
         }
       },
@@ -2612,12 +2333,8 @@
           "name": "user_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2625,12 +2342,8 @@
           "name": "user_mobile_home_board_id_board_id_fk",
           "tableFrom": "user",
           "tableTo": "board",
-          "columnsFrom": [
-            "mobile_home_board_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         },
@@ -2638,12 +2351,8 @@
           "name": "user_default_search_engine_id_search_engine_id_fk",
           "tableFrom": "user",
           "tableTo": "search_engine",
-          "columnsFrom": [
-            "default_search_engine_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
           "onDelete": "set null",
           "onUpdate": "no action"
         }
@@ -2681,10 +2390,7 @@
       "foreignKeys": {},
       "compositePrimaryKeys": {
         "verificationToken_identifier_token_pk": {
-          "columns": [
-            "identifier",
-            "token"
-          ],
+          "columns": ["identifier", "token"],
           "name": "verificationToken_identifier_token_pk"
         }
       },
@@ -2729,22 +2435,15 @@
           "name": "widget_secret_item_id_item_id_fk",
           "tableFrom": "widget_secret",
           "tableTo": "item",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
       },
       "compositePrimaryKeys": {
         "widget_secret_item_id_kind_pk": {
-          "columns": [
-            "item_id",
-            "kind"
-          ],
+          "columns": ["item_id", "kind"],
           "name": "widget_secret_item_id_kind_pk"
         }
       },
@@ -2762,4 +2461,4 @@
   "internal": {
     "indexes": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/db/migrations/sqlite/meta/0044_snapshot.json b/packages/db/migrations/sqlite/meta/0044_snapshot.json
new file mode 100644
index 000000000..c916baf01
--- /dev/null
+++ b/packages/db/migrations/sqlite/meta/0044_snapshot.json
@@ -0,0 +1,2472 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "ba1d8f76-d167-405c-97a6-ade428e51df1",
+  "prevId": "e868162b-3757-4d9e-940c-facc749256d6",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider_account_id": {
+          "name": "provider_account_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "token_type": {
+          "name": "token_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "session_state": {
+          "name": "session_state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "userId_idx": {
+          "name": "userId_idx",
+          "columns": ["user_id"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "account_user_id_user_id_fk": {
+          "name": "account_user_id_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "account_provider_provider_account_id_pk": {
+          "columns": ["provider", "provider_account_id"],
+          "name": "account_provider_provider_account_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "apiKey": {
+      "name": "apiKey",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "api_key": {
+          "name": "api_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "apiKey_user_id_user_id_fk": {
+          "name": "apiKey_user_id_user_id_fk",
+          "tableFrom": "apiKey",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "app": {
+      "name": "app",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "href": {
+          "name": "href",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "ping_url": {
+          "name": "ping_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "boardGroupPermission": {
+      "name": "boardGroupPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardGroupPermission_board_id_board_id_fk": {
+          "name": "boardGroupPermission_board_id_board_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardGroupPermission_group_id_group_id_fk": {
+          "name": "boardGroupPermission_group_id_group_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardGroupPermission_board_id_group_id_permission_pk": {
+          "columns": ["board_id", "group_id", "permission"],
+          "name": "boardGroupPermission_board_id_group_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "boardUserPermission": {
+      "name": "boardUserPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardUserPermission_board_id_board_id_fk": {
+          "name": "boardUserPermission_board_id_board_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardUserPermission_user_id_user_id_fk": {
+          "name": "boardUserPermission_user_id_user_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardUserPermission_board_id_user_id_permission_pk": {
+          "columns": ["board_id", "user_id", "permission"],
+          "name": "boardUserPermission_board_id_user_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "board": {
+      "name": "board",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "page_title": {
+          "name": "page_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "meta_title": {
+          "name": "meta_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "logo_image_url": {
+          "name": "logo_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "favicon_image_url": {
+          "name": "favicon_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_url": {
+          "name": "background_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_attachment": {
+          "name": "background_image_attachment",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'fixed'"
+        },
+        "background_image_repeat": {
+          "name": "background_image_repeat",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'no-repeat'"
+        },
+        "background_image_size": {
+          "name": "background_image_size",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'cover'"
+        },
+        "primary_color": {
+          "name": "primary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'#fa5252'"
+        },
+        "secondary_color": {
+          "name": "secondary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'#fd7e14'"
+        },
+        "opacity": {
+          "name": "opacity",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 100
+        },
+        "custom_css": {
+          "name": "custom_css",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_color": {
+          "name": "icon_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "item_radius": {
+          "name": "item_radius",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'lg'"
+        },
+        "disable_status": {
+          "name": "disable_status",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        }
+      },
+      "indexes": {
+        "board_name_unique": {
+          "name": "board_name_unique",
+          "columns": ["name"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "board_creator_id_user_id_fk": {
+          "name": "board_creator_id_user_id_fk",
+          "tableFrom": "board",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "cron_job_configuration": {
+      "name": "cron_job_configuration",
+      "columns": {
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "cron_expression": {
+          "name": "cron_expression",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_enabled": {
+          "name": "is_enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "custom_widget_v2_definition": {
+      "name": "custom_widget_v2_definition",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "sources": {
+          "name": "sources",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "requests": {
+          "name": "requests",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "template": {
+          "name": "template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_v2_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_v2_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "custom_widget_v2_secret": {
+      "name": "custom_widget_v2_secret",
+      "columns": {
+        "source_id": {
+          "name": "source_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "encrypted_value": {
+          "name": "encrypted_value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_secret_definition_id_fk": {
+          "name": "custom_widget_v2_secret_definition_id_fk",
+          "tableFrom": "custom_widget_v2_secret",
+          "tableTo": "custom_widget_v2_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_secret_definition_id_source_id_kind_pk": {
+          "columns": ["definition_id", "source_id", "kind"],
+          "name": "custom_widget_v2_secret_definition_id_source_id_kind_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "groupMember": {
+      "name": "groupMember",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_group_id_group_id_fk": {
+          "name": "groupMember_group_id_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_user_id_user_id_fk": {
+          "name": "groupMember_user_id_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_group_id_user_id_pk": {
+          "columns": ["group_id", "user_id"],
+          "name": "groupMember_group_id_user_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "groupPermission": {
+      "name": "groupPermission",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_group_id_group_id_fk": {
+          "name": "groupPermission_group_id_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "group": {
+      "name": "group",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "position": {
+          "name": "position",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "group_name_unique": {
+          "name": "group_name_unique",
+          "columns": ["name"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_home_board_id_board_id_fk": {
+          "name": "group_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_mobile_home_board_id_board_id_fk": {
+          "name": "group_mobile_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "iconRepository": {
+      "name": "iconRepository",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "icon": {
+      "name": "icon",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "checksum": {
+          "name": "checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_repository_id": {
+          "name": "icon_repository_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_icon_repository_id_iconRepository_id_fk": {
+          "name": "icon_icon_repository_id_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integrationGroupPermissions": {
+      "name": "integrationGroupPermissions",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationGroupPermissions_integration_id_integration_id_fk": {
+          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationGroupPermissions_group_id_group_id_fk": {
+          "name": "integrationGroupPermissions_group_id_group_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationGroupPermissions_integration_id_group_id_permission_pk": {
+          "columns": ["integration_id", "group_id", "permission"],
+          "name": "integrationGroupPermissions_integration_id_group_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integration_item": {
+      "name": "integration_item",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "columns": ["item_id", "integration_id"],
+          "name": "integration_item_item_id_integration_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integrationSecret": {
+      "name": "integrationSecret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": ["updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "columns": ["integration_id", "kind"],
+          "name": "integrationSecret_integration_id_kind_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integrationUserPermission": {
+      "name": "integrationUserPermission",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationUserPermission_integration_id_integration_id_fk": {
+          "name": "integrationUserPermission_integration_id_integration_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationUserPermission_user_id_user_id_fk": {
+          "name": "integrationUserPermission_user_id_user_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationUserPermission_integration_id_user_id_permission_pk": {
+          "columns": ["integration_id", "user_id", "permission"],
+          "name": "integrationUserPermission_integration_id_user_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integration": {
+      "name": "integration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "app_id": {
+          "name": "app_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integration_app_id_app_id_fk": {
+          "name": "integration_app_id_app_id_fk",
+          "tableFrom": "integration",
+          "tableTo": "app",
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "invite": {
+      "name": "invite",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "columns": ["token"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "item_layout": {
+      "name": "item_layout",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_layout_item_id_item_id_fk": {
+          "name": "item_layout_item_id_item_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_section_id_section_id_fk": {
+          "name": "item_layout_section_id_section_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_layout_id_layout_id_fk": {
+          "name": "item_layout_layout_id_layout_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_layout_item_id_section_id_layout_id_pk": {
+          "columns": ["item_id", "section_id", "layout_id"],
+          "name": "item_layout_item_id_section_id_layout_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_board_id_board_id_fk": {
+          "name": "item_board_id_board_id_fk",
+          "tableFrom": "item",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "layout": {
+      "name": "layout",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "left_gutter_column_count": {
+          "name": "left_gutter_column_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "right_gutter_column_count": {
+          "name": "right_gutter_column_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "breakpoint": {
+          "name": "breakpoint",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "role": {
+          "name": "role",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'custom'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "layout_board_id_board_id_fk": {
+          "name": "layout_board_id_board_id_fk",
+          "tableFrom": "layout",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "custom_widget_definition": {
+      "name": "custom_widget_definition",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "auth_type": {
+          "name": "auth_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'none'"
+        },
+        "header_name": {
+          "name": "header_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "method": {
+          "name": "method",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'GET'"
+        },
+        "request_body": {
+          "name": "request_body",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "display_type": {
+          "name": "display_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'singleValue'"
+        },
+        "display_config": {
+          "name": "display_config",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "custom_widget_secret": {
+      "name": "custom_widget_secret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_secret_definition_id_custom_widget_definition_id_fk": {
+          "name": "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
+          "tableFrom": "custom_widget_secret",
+          "tableTo": "custom_widget_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_secret_definition_id_kind_pk": {
+          "columns": ["definition_id", "kind"],
+          "name": "custom_widget_secret_definition_id_kind_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "media": {
+      "name": "media",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content_type": {
+          "name": "content_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "size": {
+          "name": "size",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "media_creator_id_user_id_fk": {
+          "name": "media_creator_id_user_id_fk",
+          "tableFrom": "media",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "onboarding": {
+      "name": "onboarding",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "step": {
+          "name": "step",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "previous_step": {
+          "name": "previous_step",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "search_engine": {
+      "name": "search_engine",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "short": {
+          "name": "short",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "url_template": {
+          "name": "url_template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'generic'"
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "search_engine_short_unique": {
+          "name": "search_engine_short_unique",
+          "columns": ["short"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "search_engine_integration_id_integration_id_fk": {
+          "name": "search_engine_integration_id_integration_id_fk",
+          "tableFrom": "search_engine",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "section_collapse_state": {
+      "name": "section_collapse_state",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "collapsed": {
+          "name": "collapsed",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_collapse_state_user_id_user_id_fk": {
+          "name": "section_collapse_state_user_id_user_id_fk",
+          "tableFrom": "section_collapse_state",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_collapse_state_section_id_section_id_fk": {
+          "name": "section_collapse_state_section_id_section_id_fk",
+          "tableFrom": "section_collapse_state",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_collapse_state_user_id_section_id_pk": {
+          "columns": ["user_id", "section_id"],
+          "name": "section_collapse_state_user_id_section_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "section_layout": {
+      "name": "section_layout",
+      "columns": {
+        "section_id": {
+          "name": "section_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "parent_section_id": {
+          "name": "parent_section_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_layout_section_id_section_id_fk": {
+          "name": "section_layout_section_id_section_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_layout_layout_id_layout_id_fk": {
+          "name": "section_layout_layout_id_layout_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_layout_parent_section_id_section_id_fk": {
+          "name": "section_layout_parent_section_id_section_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "section",
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_layout_section_id_layout_id_pk": {
+          "columns": ["section_id", "layout_id"],
+          "name": "section_layout_section_id_layout_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "section": {
+      "name": "section",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_board_id_board_id_fk": {
+          "name": "section_board_id_board_id_fk",
+          "tableFrom": "section",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "serverSetting": {
+      "name": "serverSetting",
+      "columns": {
+        "setting_key": {
+          "name": "setting_key",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {
+        "serverSetting_settingKey_unique": {
+          "name": "serverSetting_settingKey_unique",
+          "columns": ["setting_key"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "session": {
+      "name": "session",
+      "columns": {
+        "session_token": {
+          "name": "session_token",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_id_idx": {
+          "name": "user_id_idx",
+          "columns": ["user_id"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "session_user_id_user_id_fk": {
+          "name": "session_user_id_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "trusted_certificate_hostname": {
+      "name": "trusted_certificate_hostname",
+      "columns": {
+        "hostname": {
+          "name": "hostname",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thumbprint": {
+          "name": "thumbprint",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "certificate": {
+          "name": "certificate",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "trusted_certificate_hostname_hostname_thumbprint_pk": {
+          "columns": ["hostname", "thumbprint"],
+          "name": "trusted_certificate_hostname_hostname_thumbprint_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'credentials'"
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "default_search_engine_id": {
+          "name": "default_search_engine_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "open_search_in_new_tab": {
+          "name": "open_search_in_new_tab",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "ddg_bangs": {
+          "name": "ddg_bangs",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "color_scheme": {
+          "name": "color_scheme",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'dark'"
+        },
+        "first_day_of_week": {
+          "name": "first_day_of_week",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 1
+        },
+        "ping_icons_enabled": {
+          "name": "ping_icons_enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "enable_right_click_on_widgets": {
+          "name": "enable_right_click_on_widgets",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "completed_manage_tour": {
+          "name": "completed_manage_tour",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "completed_board_tour": {
+          "name": "completed_board_tour",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_home_board_id_board_id_fk": {
+          "name": "user_home_board_id_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "user_mobile_home_board_id_board_id_fk": {
+          "name": "user_mobile_home_board_id_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "user_default_search_engine_id_search_engine_id_fk": {
+          "name": "user_default_search_engine_id_search_engine_id_fk",
+          "tableFrom": "user",
+          "tableTo": "search_engine",
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "verificationToken": {
+      "name": "verificationToken",
+      "columns": {
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "verificationToken_identifier_token_pk": {
+          "columns": ["identifier", "token"],
+          "name": "verificationToken_identifier_token_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "widget_secret": {
+      "name": "widget_secret",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "widget_secret_item_id_item_id_fk": {
+          "name": "widget_secret_item_id_item_id_fk",
+          "tableFrom": "widget_secret",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "widget_secret_item_id_kind_pk": {
+          "columns": ["item_id", "kind"],
+          "name": "widget_secret_item_id_kind_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}
diff --git a/packages/db/migrations/sqlite/meta/0045_snapshot.json b/packages/db/migrations/sqlite/meta/0045_snapshot.json
new file mode 100644
index 000000000..fb6696542
--- /dev/null
+++ b/packages/db/migrations/sqlite/meta/0045_snapshot.json
@@ -0,0 +1,2699 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "5114a19e-3b78-482a-a68b-69874a05ee76",
+  "prevId": "ba1d8f76-d167-405c-97a6-ade428e51df1",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider_account_id": {
+          "name": "provider_account_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "token_type": {
+          "name": "token_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "session_state": {
+          "name": "session_state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "userId_idx": {
+          "name": "userId_idx",
+          "columns": ["user_id"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "account_user_id_user_id_fk": {
+          "name": "account_user_id_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "account_provider_provider_account_id_pk": {
+          "columns": ["provider", "provider_account_id"],
+          "name": "account_provider_provider_account_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "apiKey": {
+      "name": "apiKey",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "api_key": {
+          "name": "api_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "apiKey_user_id_user_id_fk": {
+          "name": "apiKey_user_id_user_id_fk",
+          "tableFrom": "apiKey",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "app": {
+      "name": "app",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "href": {
+          "name": "href",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "ping_url": {
+          "name": "ping_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "assistant_configuration": {
+      "name": "assistant_configuration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'default'"
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "web_search_enabled": {
+          "name": "web_search_enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'openrouter'"
+        },
+        "base_url": {
+          "name": "base_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'https://openrouter.ai/api/v1'"
+        },
+        "model_discovery_path": {
+          "name": "model_discovery_path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'/models'"
+        },
+        "encrypted_api_key": {
+          "name": "encrypted_api_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "encrypted_headers": {
+          "name": "encrypted_headers",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model_id": {
+          "name": "model_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "assistant_message": {
+      "name": "assistant_message",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thread_id": {
+          "name": "thread_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "parent_id": {
+          "name": "parent_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "format": {
+          "name": "format",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'ai-sdk/v6'"
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        }
+      },
+      "indexes": {
+        "assistant_message__thread_id_created_at_idx": {
+          "name": "assistant_message__thread_id_created_at_idx",
+          "columns": ["thread_id", "created_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "assistant_message_thread_id_assistant_thread_id_fk": {
+          "name": "assistant_message_thread_id_assistant_thread_id_fk",
+          "tableFrom": "assistant_message",
+          "tableTo": "assistant_thread",
+          "columnsFrom": ["thread_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "assistant_thread": {
+      "name": "assistant_thread",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model_id": {
+          "name": "model_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        }
+      },
+      "indexes": {
+        "assistant_thread__user_id_updated_at_idx": {
+          "name": "assistant_thread__user_id_updated_at_idx",
+          "columns": ["user_id", "updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "assistant_thread_user_id_user_id_fk": {
+          "name": "assistant_thread_user_id_user_id_fk",
+          "tableFrom": "assistant_thread",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "boardGroupPermission": {
+      "name": "boardGroupPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardGroupPermission_board_id_board_id_fk": {
+          "name": "boardGroupPermission_board_id_board_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardGroupPermission_group_id_group_id_fk": {
+          "name": "boardGroupPermission_group_id_group_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardGroupPermission_board_id_group_id_permission_pk": {
+          "columns": ["board_id", "group_id", "permission"],
+          "name": "boardGroupPermission_board_id_group_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "boardUserPermission": {
+      "name": "boardUserPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardUserPermission_board_id_board_id_fk": {
+          "name": "boardUserPermission_board_id_board_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardUserPermission_user_id_user_id_fk": {
+          "name": "boardUserPermission_user_id_user_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardUserPermission_board_id_user_id_permission_pk": {
+          "columns": ["board_id", "user_id", "permission"],
+          "name": "boardUserPermission_board_id_user_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "board": {
+      "name": "board",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "page_title": {
+          "name": "page_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "meta_title": {
+          "name": "meta_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "logo_image_url": {
+          "name": "logo_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "favicon_image_url": {
+          "name": "favicon_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_url": {
+          "name": "background_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_attachment": {
+          "name": "background_image_attachment",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'fixed'"
+        },
+        "background_image_repeat": {
+          "name": "background_image_repeat",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'no-repeat'"
+        },
+        "background_image_size": {
+          "name": "background_image_size",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'cover'"
+        },
+        "primary_color": {
+          "name": "primary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'#fa5252'"
+        },
+        "secondary_color": {
+          "name": "secondary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'#fd7e14'"
+        },
+        "opacity": {
+          "name": "opacity",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 100
+        },
+        "custom_css": {
+          "name": "custom_css",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_color": {
+          "name": "icon_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "item_radius": {
+          "name": "item_radius",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'lg'"
+        },
+        "disable_status": {
+          "name": "disable_status",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        }
+      },
+      "indexes": {
+        "board_name_unique": {
+          "name": "board_name_unique",
+          "columns": ["name"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "board_creator_id_user_id_fk": {
+          "name": "board_creator_id_user_id_fk",
+          "tableFrom": "board",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "cron_job_configuration": {
+      "name": "cron_job_configuration",
+      "columns": {
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "cron_expression": {
+          "name": "cron_expression",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_enabled": {
+          "name": "is_enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "custom_widget_v2_definition": {
+      "name": "custom_widget_v2_definition",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "sources": {
+          "name": "sources",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "requests": {
+          "name": "requests",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "template": {
+          "name": "template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_v2_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_v2_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "custom_widget_v2_secret": {
+      "name": "custom_widget_v2_secret",
+      "columns": {
+        "source_id": {
+          "name": "source_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "encrypted_value": {
+          "name": "encrypted_value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_v2_secret_definition_id_fk": {
+          "name": "custom_widget_v2_secret_definition_id_fk",
+          "tableFrom": "custom_widget_v2_secret",
+          "tableTo": "custom_widget_v2_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_v2_secret_definition_id_source_id_kind_pk": {
+          "columns": ["definition_id", "source_id", "kind"],
+          "name": "custom_widget_v2_secret_definition_id_source_id_kind_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "groupMember": {
+      "name": "groupMember",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_group_id_group_id_fk": {
+          "name": "groupMember_group_id_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_user_id_user_id_fk": {
+          "name": "groupMember_user_id_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_group_id_user_id_pk": {
+          "columns": ["group_id", "user_id"],
+          "name": "groupMember_group_id_user_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "groupPermission": {
+      "name": "groupPermission",
+      "columns": {
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_group_id_group_id_fk": {
+          "name": "groupPermission_group_id_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "group": {
+      "name": "group",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "position": {
+          "name": "position",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "group_name_unique": {
+          "name": "group_name_unique",
+          "columns": ["name"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_home_board_id_board_id_fk": {
+          "name": "group_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "group_mobile_home_board_id_board_id_fk": {
+          "name": "group_mobile_home_board_id_board_id_fk",
+          "tableFrom": "group",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "iconRepository": {
+      "name": "iconRepository",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "icon": {
+      "name": "icon",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "checksum": {
+          "name": "checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_repository_id": {
+          "name": "icon_repository_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_icon_repository_id_iconRepository_id_fk": {
+          "name": "icon_icon_repository_id_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["icon_repository_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integrationGroupPermissions": {
+      "name": "integrationGroupPermissions",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationGroupPermissions_integration_id_integration_id_fk": {
+          "name": "integrationGroupPermissions_integration_id_integration_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationGroupPermissions_group_id_group_id_fk": {
+          "name": "integrationGroupPermissions_group_id_group_id_fk",
+          "tableFrom": "integrationGroupPermissions",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationGroupPermissions_integration_id_group_id_permission_pk": {
+          "columns": ["integration_id", "group_id", "permission"],
+          "name": "integrationGroupPermissions_integration_id_group_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integration_item": {
+      "name": "integration_item",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "columns": ["item_id", "integration_id"],
+          "name": "integration_item_item_id_integration_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integrationSecret": {
+      "name": "integrationSecret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": ["updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "columns": ["integration_id", "kind"],
+          "name": "integrationSecret_integration_id_kind_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integrationUserPermission": {
+      "name": "integrationUserPermission",
+      "columns": {
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrationUserPermission_integration_id_integration_id_fk": {
+          "name": "integrationUserPermission_integration_id_integration_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integrationUserPermission_user_id_user_id_fk": {
+          "name": "integrationUserPermission_user_id_user_id_fk",
+          "tableFrom": "integrationUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationUserPermission_integration_id_user_id_permission_pk": {
+          "columns": ["integration_id", "user_id", "permission"],
+          "name": "integrationUserPermission_integration_id_user_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "integration": {
+      "name": "integration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "app_id": {
+          "name": "app_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integration_app_id_app_id_fk": {
+          "name": "integration_app_id_app_id_fk",
+          "tableFrom": "integration",
+          "tableTo": "app",
+          "columnsFrom": ["app_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "invite": {
+      "name": "invite",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "columns": ["token"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "item_layout": {
+      "name": "item_layout",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_layout_item_id_item_id_fk": {
+          "name": "item_layout_item_id_item_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_section_id_section_id_fk": {
+          "name": "item_layout_section_id_section_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "item_layout_layout_id_layout_id_fk": {
+          "name": "item_layout_layout_id_layout_id_fk",
+          "tableFrom": "item_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_layout_item_id_section_id_layout_id_pk": {
+          "columns": ["item_id", "section_id", "layout_id"],
+          "name": "item_layout_item_id_section_id_layout_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_board_id_board_id_fk": {
+          "name": "item_board_id_board_id_fk",
+          "tableFrom": "item",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "layout": {
+      "name": "layout",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "left_gutter_column_count": {
+          "name": "left_gutter_column_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "right_gutter_column_count": {
+          "name": "right_gutter_column_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "breakpoint": {
+          "name": "breakpoint",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "role": {
+          "name": "role",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'custom'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "layout_board_id_board_id_fk": {
+          "name": "layout_board_id_board_id_fk",
+          "tableFrom": "layout",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "custom_widget_definition": {
+      "name": "custom_widget_definition",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "auth_type": {
+          "name": "auth_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'none'"
+        },
+        "header_name": {
+          "name": "header_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "method": {
+          "name": "method",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'GET'"
+        },
+        "request_body": {
+          "name": "request_body",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "display_type": {
+          "name": "display_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'singleValue'"
+        },
+        "display_config": {
+          "name": "display_config",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_definition_creator_id_user_id_fk": {
+          "name": "custom_widget_definition_creator_id_user_id_fk",
+          "tableFrom": "custom_widget_definition",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "custom_widget_secret": {
+      "name": "custom_widget_secret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "definition_id": {
+          "name": "definition_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "custom_widget_secret_definition_id_custom_widget_definition_id_fk": {
+          "name": "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
+          "tableFrom": "custom_widget_secret",
+          "tableTo": "custom_widget_definition",
+          "columnsFrom": ["definition_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "custom_widget_secret_definition_id_kind_pk": {
+          "columns": ["definition_id", "kind"],
+          "name": "custom_widget_secret_definition_id_kind_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "media": {
+      "name": "media",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content_type": {
+          "name": "content_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "size": {
+          "name": "size",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "media_creator_id_user_id_fk": {
+          "name": "media_creator_id_user_id_fk",
+          "tableFrom": "media",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "onboarding": {
+      "name": "onboarding",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "step": {
+          "name": "step",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "previous_step": {
+          "name": "previous_step",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "search_engine": {
+      "name": "search_engine",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "short": {
+          "name": "short",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "url_template": {
+          "name": "url_template",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'generic'"
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "search_engine_short_unique": {
+          "name": "search_engine_short_unique",
+          "columns": ["short"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "search_engine_integration_id_integration_id_fk": {
+          "name": "search_engine_integration_id_integration_id_fk",
+          "tableFrom": "search_engine",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "section_collapse_state": {
+      "name": "section_collapse_state",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "collapsed": {
+          "name": "collapsed",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_collapse_state_user_id_user_id_fk": {
+          "name": "section_collapse_state_user_id_user_id_fk",
+          "tableFrom": "section_collapse_state",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_collapse_state_section_id_section_id_fk": {
+          "name": "section_collapse_state_section_id_section_id_fk",
+          "tableFrom": "section_collapse_state",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_collapse_state_user_id_section_id_pk": {
+          "columns": ["user_id", "section_id"],
+          "name": "section_collapse_state_user_id_section_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "section_layout": {
+      "name": "section_layout",
+      "columns": {
+        "section_id": {
+          "name": "section_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "layout_id": {
+          "name": "layout_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "parent_section_id": {
+          "name": "parent_section_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_layout_section_id_section_id_fk": {
+          "name": "section_layout_section_id_section_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_layout_layout_id_layout_id_fk": {
+          "name": "section_layout_layout_id_layout_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "layout",
+          "columnsFrom": ["layout_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_layout_parent_section_id_section_id_fk": {
+          "name": "section_layout_parent_section_id_section_id_fk",
+          "tableFrom": "section_layout",
+          "tableTo": "section",
+          "columnsFrom": ["parent_section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_layout_section_id_layout_id_pk": {
+          "columns": ["section_id", "layout_id"],
+          "name": "section_layout_section_id_layout_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "section": {
+      "name": "section",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_board_id_board_id_fk": {
+          "name": "section_board_id_board_id_fk",
+          "tableFrom": "section",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "serverSetting": {
+      "name": "serverSetting",
+      "columns": {
+        "setting_key": {
+          "name": "setting_key",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {
+        "serverSetting_settingKey_unique": {
+          "name": "serverSetting_settingKey_unique",
+          "columns": ["setting_key"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "session": {
+      "name": "session",
+      "columns": {
+        "session_token": {
+          "name": "session_token",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_id_idx": {
+          "name": "user_id_idx",
+          "columns": ["user_id"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "session_user_id_user_id_fk": {
+          "name": "session_user_id_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "trusted_certificate_hostname": {
+      "name": "trusted_certificate_hostname",
+      "columns": {
+        "hostname": {
+          "name": "hostname",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thumbprint": {
+          "name": "thumbprint",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "certificate": {
+          "name": "certificate",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "trusted_certificate_hostname_hostname_thumbprint_pk": {
+          "columns": ["hostname", "thumbprint"],
+          "name": "trusted_certificate_hostname_hostname_thumbprint_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'credentials'"
+        },
+        "home_board_id": {
+          "name": "home_board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "mobile_home_board_id": {
+          "name": "mobile_home_board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "default_search_engine_id": {
+          "name": "default_search_engine_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "open_search_in_new_tab": {
+          "name": "open_search_in_new_tab",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "ddg_bangs": {
+          "name": "ddg_bangs",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "color_scheme": {
+          "name": "color_scheme",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'dark'"
+        },
+        "first_day_of_week": {
+          "name": "first_day_of_week",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 1
+        },
+        "ping_icons_enabled": {
+          "name": "ping_icons_enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "enable_right_click_on_widgets": {
+          "name": "enable_right_click_on_widgets",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "completed_manage_tour": {
+          "name": "completed_manage_tour",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "completed_board_tour": {
+          "name": "completed_board_tour",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_home_board_id_board_id_fk": {
+          "name": "user_home_board_id_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "user_mobile_home_board_id_board_id_fk": {
+          "name": "user_mobile_home_board_id_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["mobile_home_board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "user_default_search_engine_id_search_engine_id_fk": {
+          "name": "user_default_search_engine_id_search_engine_id_fk",
+          "tableFrom": "user",
+          "tableTo": "search_engine",
+          "columnsFrom": ["default_search_engine_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "verificationToken": {
+      "name": "verificationToken",
+      "columns": {
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "verificationToken_identifier_token_pk": {
+          "columns": ["identifier", "token"],
+          "name": "verificationToken_identifier_token_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "widget_secret": {
+      "name": "widget_secret",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "widget_secret_item_id_item_id_fk": {
+          "name": "widget_secret_item_id_item_id_fk",
+          "tableFrom": "widget_secret",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "widget_secret_item_id_kind_pk": {
+          "columns": ["item_id", "kind"],
+          "name": "widget_secret_item_id_kind_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}
diff --git a/packages/db/migrations/sqlite/meta/_journal.json b/packages/db/migrations/sqlite/meta/_journal.json
index 6732b6edd..882263a8d 100644
--- a/packages/db/migrations/sqlite/meta/_journal.json
+++ b/packages/db/migrations/sqlite/meta/_journal.json
@@ -299,16 +299,30 @@
     {
       "idx": 42,
       "version": "6",
-      "when": 1785252768815,
-      "tag": "0042_bumpy_tattoo",
+      "when": 1784305283910,
+      "tag": "0042_custom_widget_v2_tables",
       "breakpoints": true
     },
     {
       "idx": 43,
       "version": "6",
-      "when": 1785768736378,
-      "tag": "0043_swift_silver_samurai",
+      "when": 1786212459480,
+      "tag": "0043_numerous_forgotten_one",
+      "breakpoints": true
+    },
+    {
+      "idx": 44,
+      "version": "6",
+      "when": 1786215203092,
+      "tag": "0044_serious_wallop",
+      "breakpoints": true
+    },
+    {
+      "idx": 45,
+      "version": "6",
+      "when": 1786217088950,
+      "tag": "0045_violet_mikhail_rasputin",
       "breakpoints": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/db/package.json b/packages/db/package.json
index 970fbab94..01d0d8810 100644
--- a/packages/db/package.json
+++ b/packages/db/package.json
@@ -9,6 +9,8 @@
   "exports": {
     ".": "./index.ts",
     "./collection": "./collection.ts",
+    "./migrations/seed": "./migrations/seed.ts",
+    "./proxy-reader": "./proxy-reader.ts",
     "./schema": "./schema/index.ts",
     "./test": "./test/index.ts",
     "./queries": "./queries/index.ts",
@@ -46,6 +48,7 @@
     "@auth/core": "catalog:",
     "@homarr/common": "workspace:^0.1.0",
     "@homarr/core": "workspace:^0.1.0",
+    "@homarr/custom-widgets": "workspace:^0.1.0",
     "@homarr/definitions": "workspace:^0.1.0",
     "@homarr/server-settings": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
diff --git a/packages/db/proxy-reader.integration.spec.ts b/packages/db/proxy-reader.integration.spec.ts
new file mode 100644
index 000000000..2d85495b5
--- /dev/null
+++ b/packages/db/proxy-reader.integration.spec.ts
@@ -0,0 +1,128 @@
+// @vitest-environment node
+
+import fs from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+import Database from "better-sqlite3";
+import { MySqlContainer } from "@testcontainers/mysql";
+import { PostgreSqlContainer } from "@testcontainers/postgresql";
+import mysql from "mysql2/promise";
+import { Client } from "pg";
+import { stringify } from "superjson";
+import { describe, expect, test, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  dbEnv: {} as Record<string, unknown>,
+}));
+
+vi.mock("@homarr/core/infrastructure/db/env", () => ({ dbEnv: mocks.dbEnv }));
+
+const configureDriver = (values: Record<string, unknown>) => {
+  vi.resetModules();
+  for (const key of Object.keys(mocks.dbEnv)) delete mocks.dbEnv[key];
+  Object.assign(mocks.dbEnv, values);
+};
+
+const readSettingsAsync = async () => {
+  const reader = await import("./proxy-reader");
+  const result = {
+    locale: await reader.getDefaultLocaleForProxyAsync(),
+    onboardingStep: await reader.getOnboardingStepForProxyAsync(),
+  };
+  await reader.closeProxySettingsReaderAsync();
+  return result;
+};
+
+describe("proxy settings reader database compatibility", () => {
+  test("reads SQLite settings and falls back for malformed culture data", async () => {
+    const databasePath = path.join(os.tmpdir(), `homarr-proxy-reader-${process.pid}-${Date.now()}.sqlite`);
+    const database = new Database(databasePath);
+    database.exec("CREATE TABLE onboarding (step TEXT NOT NULL)");
+    database.exec('CREATE TABLE "serverSetting" (setting_key TEXT NOT NULL, value TEXT NOT NULL)');
+    database.prepare("INSERT INTO onboarding (step) VALUES (?)").run("finish");
+    database
+      .prepare('INSERT INTO "serverSetting" (setting_key, value) VALUES (?, ?)')
+      .run("culture", stringify({ defaultLocale: "de" }));
+    database.close();
+
+    try {
+      configureDriver({ DRIVER: "better-sqlite3", URL: databasePath });
+      await expect(readSettingsAsync()).resolves.toEqual({ locale: "de", onboardingStep: "finish" });
+
+      const malformedDatabase = new Database(databasePath);
+      malformedDatabase.prepare('UPDATE "serverSetting" SET value = ? WHERE setting_key = ?').run("{", "culture");
+      malformedDatabase.close();
+      vi.resetModules();
+      await expect(readSettingsAsync()).resolves.toEqual({ locale: "en", onboardingStep: "finish" });
+    } finally {
+      await fs.rm(databasePath, { force: true });
+    }
+  });
+
+  test("reads MySQL settings through the bounded host configuration", async () => {
+    const container = await new MySqlContainer("mysql:latest").start();
+    try {
+      const connection = await mysql.createConnection({
+        host: container.getHost(),
+        port: container.getPort(),
+        database: container.getDatabase(),
+        user: container.getUsername(),
+        password: container.getUserPassword(),
+      });
+      await connection.execute("CREATE TABLE onboarding (step VARCHAR(32) NOT NULL)");
+      await connection.execute("CREATE TABLE serverSetting (setting_key VARCHAR(64) NOT NULL, value TEXT NOT NULL)");
+      await connection.execute("INSERT INTO onboarding (step) VALUES (?)", ["finish"]);
+      await connection.execute("INSERT INTO serverSetting (setting_key, value) VALUES (?, ?)", [
+        "culture",
+        stringify({ defaultLocale: "fr" }),
+      ]);
+      await connection.end();
+
+      configureDriver({
+        DRIVER: "mysql2",
+        HOST: container.getHost(),
+        PORT: container.getPort(),
+        NAME: container.getDatabase(),
+        USER: container.getUsername(),
+        PASSWORD: container.getUserPassword(),
+      });
+      await expect(readSettingsAsync()).resolves.toEqual({ locale: "fr", onboardingStep: "finish" });
+    } finally {
+      await container.stop();
+    }
+  }, 120_000);
+
+  test("reads PostgreSQL settings through the bounded host configuration", async () => {
+    const container = await new PostgreSqlContainer("postgres:latest").start();
+    try {
+      const connection = new Client({
+        host: container.getHost(),
+        port: container.getPort(),
+        database: container.getDatabase(),
+        user: container.getUsername(),
+        password: container.getPassword(),
+      });
+      await connection.connect();
+      await connection.query("CREATE TABLE onboarding (step TEXT NOT NULL)");
+      await connection.query('CREATE TABLE "serverSetting" (setting_key TEXT NOT NULL, value TEXT NOT NULL)');
+      await connection.query("INSERT INTO onboarding (step) VALUES ($1)", ["finish"]);
+      await connection.query('INSERT INTO "serverSetting" (setting_key, value) VALUES ($1, $2)', [
+        "culture",
+        stringify({ defaultLocale: "es" }),
+      ]);
+      await connection.end();
+
+      configureDriver({
+        DRIVER: "node-postgres",
+        HOST: container.getHost(),
+        PORT: container.getPort(),
+        NAME: container.getDatabase(),
+        USER: container.getUsername(),
+        PASSWORD: container.getPassword(),
+      });
+      await expect(readSettingsAsync()).resolves.toEqual({ locale: "es", onboardingStep: "finish" });
+    } finally {
+      await container.stop();
+    }
+  }, 120_000);
+});
diff --git a/packages/db/proxy-reader.spec.ts b/packages/db/proxy-reader.spec.ts
new file mode 100644
index 000000000..f46c79cef
--- /dev/null
+++ b/packages/db/proxy-reader.spec.ts
@@ -0,0 +1,128 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => {
+  const query = {
+    where: vi.fn(),
+    limit: vi.fn().mockResolvedValue([{ step: "finish" }]),
+  };
+  query.where.mockReturnValue(query);
+
+  return {
+    dbEnv: {
+      DRIVER: "mysql2",
+      URL: "mysql://homarr:test@localhost:3306/homarr",
+    } as Record<string, unknown>,
+    mysqlCreatePool: vi.fn(() => ({})),
+    postgresPool: vi.fn(function PostgresPool() {
+      return {};
+    }),
+    database: {
+      select: vi.fn(() => ({ from: vi.fn(() => query) })),
+    },
+  };
+});
+
+vi.mock("@homarr/core/infrastructure/db/env", () => ({ dbEnv: mocks.dbEnv }));
+vi.mock("mysql2", () => ({ default: { createPool: mocks.mysqlCreatePool } }));
+vi.mock("pg", () => ({ Pool: mocks.postgresPool }));
+vi.mock("drizzle-orm/mysql2", () => ({ drizzle: vi.fn(() => mocks.database) }));
+vi.mock("drizzle-orm/node-postgres", () => ({ drizzle: vi.fn(() => mocks.database) }));
+vi.mock("./proxy/mysql", () => ({
+  proxySchema: { onboarding: { step: {} }, serverSettings: { settingKey: {}, value: {} } },
+}));
+vi.mock("./proxy/postgresql", () => ({
+  proxySchema: { onboarding: { step: {} }, serverSettings: { settingKey: {}, value: {} } },
+}));
+
+const initializeProxyReader = async () => {
+  const { getOnboardingStepForProxyAsync } = await import("./proxy-reader");
+  await getOnboardingStepForProxyAsync();
+};
+
+describe("proxy database pools", () => {
+  beforeEach(() => {
+    vi.resetModules();
+    vi.clearAllMocks();
+    for (const key of Object.keys(mocks.dbEnv)) delete mocks.dbEnv[key];
+    mocks.mysqlCreatePool.mockReturnValue({});
+  });
+
+  it("bounds MySQL URL pools instead of falling back to the driver defaults", async () => {
+    Object.assign(mocks.dbEnv, {
+      DRIVER: "mysql2",
+      URL: "mysql://homarr:test@localhost:3306/homarr",
+    });
+
+    await initializeProxyReader();
+
+    expect(mocks.mysqlCreatePool).toHaveBeenCalledWith({
+      uri: "mysql://homarr:test@localhost:3306/homarr",
+      connectionLimit: 1,
+      maxIdle: 1,
+      idleTimeout: 60_000,
+      enableKeepAlive: true,
+    });
+  });
+
+  it("bounds MySQL host pools instead of falling back to the driver defaults", async () => {
+    Object.assign(mocks.dbEnv, {
+      DRIVER: "mysql2",
+      HOST: "localhost",
+      PORT: 3306,
+      NAME: "homarr",
+      USER: "homarr",
+      PASSWORD: "test",
+    });
+
+    await initializeProxyReader();
+
+    expect(mocks.mysqlCreatePool).toHaveBeenCalledWith(expect.objectContaining({ connectionLimit: 1, maxIdle: 1 }));
+  });
+
+  it("bounds PostgreSQL URL pools instead of falling back to the driver defaults", async () => {
+    Object.assign(mocks.dbEnv, {
+      DRIVER: "node-postgres",
+      URL: "postgresql://homarr:test@localhost:5432/homarr",
+    });
+
+    await initializeProxyReader();
+
+    expect(mocks.postgresPool).toHaveBeenCalledWith({
+      connectionString: "postgresql://homarr:test@localhost:5432/homarr",
+      max: 1,
+      idleTimeoutMillis: 60_000,
+      allowExitOnIdle: false,
+    });
+  });
+
+  it("bounds PostgreSQL host pools instead of falling back to the driver defaults", async () => {
+    Object.assign(mocks.dbEnv, {
+      DRIVER: "node-postgres",
+      HOST: "localhost",
+      PORT: 5432,
+      NAME: "homarr",
+      USER: "homarr",
+      PASSWORD: "test",
+    });
+
+    await initializeProxyReader();
+
+    expect(mocks.postgresPool).toHaveBeenCalledWith(expect.objectContaining({ max: 1 }));
+  });
+
+  it("retries initialization after a transient driver failure", async () => {
+    Object.assign(mocks.dbEnv, {
+      DRIVER: "mysql2",
+      URL: "mysql://homarr:test@localhost:3306/homarr",
+    });
+    mocks.mysqlCreatePool.mockImplementationOnce(() => {
+      throw new Error("database unavailable");
+    });
+
+    const { getOnboardingStepForProxyAsync } = await import("./proxy-reader");
+
+    await expect(getOnboardingStepForProxyAsync()).rejects.toThrow("database unavailable");
+    await expect(getOnboardingStepForProxyAsync()).resolves.toBe("finish");
+    expect(mocks.mysqlCreatePool).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/packages/db/proxy-reader.ts b/packages/db/proxy-reader.ts
new file mode 100644
index 000000000..1fd85f223
--- /dev/null
+++ b/packages/db/proxy-reader.ts
@@ -0,0 +1,173 @@
+import { parse as parseSuperJson } from "superjson";
+
+import { eq } from "drizzle-orm";
+import type { SQLWrapper } from "drizzle-orm";
+import { defaultServerSettings } from "@homarr/server-settings";
+import { dbEnv } from "@homarr/core/infrastructure/db/env";
+
+type ProxyRow = Record<string, unknown>;
+type ProxySchema = {
+  onboarding: { step: SQLWrapper };
+  serverSettings: { settingKey: SQLWrapper; value: SQLWrapper };
+};
+type ProxyQuery = {
+  where(condition: unknown): ProxyQuery;
+  limit(count: number): Promise<ProxyRow[]>;
+};
+type ProxyDatabase = {
+  select(selection: Record<string, unknown>): { from(table: unknown): ProxyQuery };
+};
+
+type ProxyReader = {
+  closeAsync: () => Promise<void>;
+  getOnboardingStepAsync: () => Promise<string>;
+  getDefaultLocaleAsync: () => Promise<string>;
+};
+
+// The proxy is long-lived and only performs two single-row reads. Keep its
+// independent pool deliberately smaller than the application pool.
+const proxyPoolConnectionLimit = 1;
+
+const createProxyReader = (database: unknown, schema: ProxySchema, closeAsync: () => Promise<void>): ProxyReader => {
+  const queryDatabase = database as ProxyDatabase;
+
+  return {
+    closeAsync,
+    async getOnboardingStepAsync() {
+      const rows = await queryDatabase.select({ step: schema.onboarding.step }).from(schema.onboarding).limit(1);
+      const step = rows[0]?.step;
+      return typeof step === "string" ? step : "start";
+    },
+    async getDefaultLocaleAsync() {
+      const rows = await queryDatabase
+        .select({ value: schema.serverSettings.value })
+        .from(schema.serverSettings)
+        .where(eq(schema.serverSettings.settingKey, "culture"))
+        .limit(1);
+      const value = rows[0]?.value;
+      if (typeof value !== "string") return defaultServerSettings.culture.defaultLocale;
+
+      try {
+        const culture: unknown = parseSuperJson(value);
+        if (
+          typeof culture === "object" &&
+          culture !== null &&
+          "defaultLocale" in culture &&
+          typeof culture.defaultLocale === "string"
+        ) {
+          return culture.defaultLocale;
+        }
+      } catch {
+        // Fall through to the default when a legacy or malformed value cannot be decoded.
+      }
+
+      return defaultServerSettings.culture.defaultLocale;
+    },
+  };
+};
+
+const createProxyReaderAsync = async (): Promise<ProxyReader> => {
+  switch (dbEnv.DRIVER) {
+    case "better-sqlite3": {
+      const [{ default: Database }, { drizzle }, { proxySchema }] = await Promise.all([
+        import("better-sqlite3"),
+        import("drizzle-orm/better-sqlite3"),
+        import("./proxy/sqlite"),
+      ]);
+      const connection = new Database(dbEnv.URL);
+      const database = drizzle(connection, { schema: proxySchema });
+      return createProxyReader(database, proxySchema, async () => {
+        connection.close();
+      });
+    }
+    case "mysql2": {
+      const [{ default: mysql }, { drizzle }, { proxySchema }] = await Promise.all([
+        import("mysql2"),
+        import("drizzle-orm/mysql2"),
+        import("./proxy/mysql"),
+      ]);
+      const connection = dbEnv.HOST
+        ? mysql.createPool({
+            host: dbEnv.HOST,
+            port: dbEnv.PORT,
+            database: dbEnv.NAME,
+            user: dbEnv.USER,
+            password: dbEnv.PASSWORD,
+            connectionLimit: proxyPoolConnectionLimit,
+            maxIdle: 1,
+            idleTimeout: 60_000,
+            enableKeepAlive: true,
+          })
+        : mysql.createPool({
+            uri: dbEnv.URL,
+            connectionLimit: proxyPoolConnectionLimit,
+            maxIdle: 1,
+            idleTimeout: 60_000,
+            enableKeepAlive: true,
+          });
+      const database = drizzle(connection, { schema: proxySchema, mode: "default" });
+      return createProxyReader(
+        database,
+        proxySchema,
+        async () =>
+          await new Promise<void>((resolve, reject) => {
+            connection.end((error) => {
+              if (error) reject(error);
+              else resolve();
+            });
+          }),
+      );
+    }
+    case "node-postgres": {
+      const [{ Pool }, { drizzle }, { proxySchema }] = await Promise.all([
+        import("pg"),
+        import("drizzle-orm/node-postgres"),
+        import("./proxy/postgresql"),
+      ]);
+      const connection = dbEnv.HOST
+        ? new Pool({
+            host: dbEnv.HOST,
+            port: dbEnv.PORT,
+            database: dbEnv.NAME,
+            user: dbEnv.USER,
+            password: dbEnv.PASSWORD,
+            max: proxyPoolConnectionLimit,
+            idleTimeoutMillis: 60_000,
+            allowExitOnIdle: false,
+          })
+        : new Pool({
+            connectionString: dbEnv.URL,
+            max: proxyPoolConnectionLimit,
+            idleTimeoutMillis: 60_000,
+            allowExitOnIdle: false,
+          });
+      const database = drizzle({ client: connection, schema: proxySchema });
+      return createProxyReader(database, proxySchema, async () => {
+        await connection.end();
+      });
+    }
+  }
+};
+
+let proxyReaderPromise: Promise<ProxyReader> | null = null;
+
+const getProxyReaderAsync = () => {
+  if (!proxyReaderPromise) {
+    proxyReaderPromise = createProxyReaderAsync().catch((error: unknown) => {
+      proxyReaderPromise = null;
+      throw error;
+    });
+  }
+  return proxyReaderPromise;
+};
+
+export const getOnboardingStepForProxyAsync = async () => (await getProxyReaderAsync()).getOnboardingStepAsync();
+
+export const getDefaultLocaleForProxyAsync = async () => (await getProxyReaderAsync()).getDefaultLocaleAsync();
+
+export const closeProxySettingsReaderAsync = async () => {
+  if (!proxyReaderPromise) return;
+  const reader = await proxyReaderPromise;
+  proxyReaderPromise = null;
+  await reader.closeAsync();
+};
diff --git a/packages/db/proxy/mysql.ts b/packages/db/proxy/mysql.ts
new file mode 100644
index 000000000..266cc4610
--- /dev/null
+++ b/packages/db/proxy/mysql.ts
@@ -0,0 +1,11 @@
+import { mysqlTable, text, varchar } from "drizzle-orm/mysql-core";
+
+export const proxySchema = {
+  onboarding: mysqlTable("onboarding", {
+    step: varchar("step", { length: 32 }).notNull(),
+  }),
+  serverSettings: mysqlTable("serverSetting", {
+    settingKey: varchar("setting_key", { length: 64 }).notNull(),
+    value: text("value").notNull(),
+  }),
+};
diff --git a/packages/db/proxy/postgresql.ts b/packages/db/proxy/postgresql.ts
new file mode 100644
index 000000000..832f0f559
--- /dev/null
+++ b/packages/db/proxy/postgresql.ts
@@ -0,0 +1,11 @@
+import { pgTable, text } from "drizzle-orm/pg-core";
+
+export const proxySchema = {
+  onboarding: pgTable("onboarding", {
+    step: text("step").notNull(),
+  }),
+  serverSettings: pgTable("serverSetting", {
+    settingKey: text("setting_key").notNull(),
+    value: text("value").notNull(),
+  }),
+};
diff --git a/packages/db/proxy/sqlite.ts b/packages/db/proxy/sqlite.ts
new file mode 100644
index 000000000..c95491d7f
--- /dev/null
+++ b/packages/db/proxy/sqlite.ts
@@ -0,0 +1,11 @@
+import { sqliteTable, text } from "drizzle-orm/sqlite-core";
+
+export const proxySchema = {
+  onboarding: sqliteTable("onboarding", {
+    step: text("step").notNull(),
+  }),
+  serverSettings: sqliteTable("serverSetting", {
+    settingKey: text("setting_key").notNull(),
+    value: text("value").notNull(),
+  }),
+};
diff --git a/packages/db/queries/widget-placement.spec.ts b/packages/db/queries/widget-placement.spec.ts
new file mode 100644
index 000000000..b8acdc3b3
--- /dev/null
+++ b/packages/db/queries/widget-placement.spec.ts
@@ -0,0 +1,57 @@
+import { describe, expect, test } from "vitest";
+
+import { createId } from "@homarr/common";
+import { boards, layouts, sections } from "@homarr/db/schema";
+import { createDb } from "@homarr/db/test";
+
+import { placeAllWidgetsAsync } from "./widget-placement";
+
+describe("placeAllWidgetsAsync", () => {
+  test("creates independent positions for every target layout", async () => {
+    const db = createDb();
+    const boardId = createId();
+    const sectionId = createId();
+    const mobileLayoutId = createId();
+    const baseLayoutId = createId();
+    await db.insert(boards).values({ id: boardId, name: "dashboard" });
+    await db.insert(sections).values({ id: sectionId, kind: "empty", xOffset: 0, yOffset: 0, boardId });
+    await db.insert(layouts).values([
+      {
+        id: mobileLayoutId,
+        name: "Mobile",
+        role: "mobile",
+        columnCount: 3,
+        breakpoint: 0,
+        boardId,
+      },
+      {
+        id: baseLayoutId,
+        name: "Base",
+        role: "base",
+        columnCount: 10,
+        breakpoint: 768,
+        boardId,
+      },
+    ]);
+
+    await placeAllWidgetsAsync(
+      db,
+      [
+        { boardId, sectionId, layoutId: mobileLayoutId, columnCount: 3 },
+        { boardId, sectionId, layoutId: baseLayoutId, columnCount: 10 },
+      ],
+      [],
+      [{ id: createId(), name: "Homarr" }],
+    );
+
+    const placedItems = await db.query.items.findMany({ with: { layouts: true } });
+    expect(placedItems.length).toBeGreaterThan(0);
+    expect(placedItems.every((item) => item.layouts.length === 2)).toBe(true);
+    expect(
+      placedItems.every((item) =>
+        item.layouts.some((layout) => layout.layoutId === mobileLayoutId && layout.width <= 3),
+      ),
+    ).toBe(true);
+    expect(placedItems.every((item) => item.layouts.some((layout) => layout.layoutId === baseLayoutId))).toBe(true);
+  });
+});
diff --git a/packages/db/queries/widget-placement.ts b/packages/db/queries/widget-placement.ts
index 1d0b529f9..c3a246b2f 100644
--- a/packages/db/queries/widget-placement.ts
+++ b/packages/db/queries/widget-placement.ts
@@ -30,46 +30,54 @@ interface PlacementContext extends BoardTarget {
 
 const placeWidgetAsync = async (
   db: Database,
-  ctx: PlacementContext,
+  contexts: PlacementContext[],
   kind: WidgetKind,
   linkedIntegrationIds: string[],
   options?: string,
   size?: { width: number; height: number },
 ) => {
-  const itemWidth = size?.width ?? 2;
-  const itemHeight = size?.height ?? 2;
+  const boardId = contexts.at(0)?.boardId;
+  if (!boardId) return;
 
-  if (ctx.xOffset + itemWidth > ctx.columnCount) {
-    ctx.xOffset = 0;
-    ctx.yOffset += ctx.rowMaxHeight;
-    ctx.rowMaxHeight = 0;
-  }
+  const desiredItemWidth = size?.width ?? 2;
+  const itemHeight = size?.height ?? 2;
 
   const itemId = createId();
   await db.insert(items).values({
     id: itemId,
-    boardId: ctx.boardId,
+    boardId,
     kind,
     options: options ?? emptySuperJSON,
     advancedOptions: emptySuperJSON,
   });
 
-  await db.insert(itemLayouts).values({
-    itemId,
-    sectionId: ctx.sectionId,
-    layoutId: ctx.layoutId,
-    xOffset: ctx.xOffset,
-    yOffset: ctx.yOffset,
-    width: itemWidth,
-    height: itemHeight,
-  });
+  await db.insert(itemLayouts).values(
+    contexts.map((ctx) => {
+      const itemWidth = Math.min(ctx.columnCount, desiredItemWidth);
+      if (ctx.xOffset + itemWidth > ctx.columnCount) {
+        ctx.xOffset = 0;
+        ctx.yOffset += ctx.rowMaxHeight;
+        ctx.rowMaxHeight = 0;
+      }
+
+      const placement = {
+        itemId,
+        sectionId: ctx.sectionId,
+        layoutId: ctx.layoutId,
+        xOffset: ctx.xOffset,
+        yOffset: ctx.yOffset,
+        width: itemWidth,
+        height: itemHeight,
+      };
+      ctx.rowMaxHeight = Math.max(ctx.rowMaxHeight, itemHeight);
+      ctx.xOffset += itemWidth;
+      return placement;
+    }),
+  );
 
   for (const integrationId of linkedIntegrationIds) {
     await db.insert(integrationItems).values({ itemId, integrationId });
   }
-
-  ctx.rowMaxHeight = Math.max(ctx.rowMaxHeight, itemHeight);
-  ctx.xOffset += itemWidth;
 };
 
 interface App {
@@ -79,16 +87,17 @@ interface App {
 
 export const placeAllWidgetsAsync = async (
   db: Database,
-  target: BoardTarget,
+  target: BoardTarget | BoardTarget[],
   allIntegrations: Integration[],
   allApps: App[],
 ) => {
-  const ctx: PlacementContext = {
-    ...target,
+  const targets = Array.isArray(target) ? target : [target];
+  const contexts: PlacementContext[] = targets.map((currentTarget) => ({
+    ...currentTarget,
     xOffset: 0,
     yOffset: 0,
     rowMaxHeight: 0,
-  };
+  }));
 
   const placedWidgets = new Set<WidgetKind>();
 
@@ -106,7 +115,7 @@ export const placeAllWidgetsAsync = async (
       const options = config?.options ? superjson.stringify(config.options) : undefined;
       await placeWidgetAsync(
         db,
-        ctx,
+        contexts,
         widgetKind,
         matchingIds,
         options,
@@ -118,7 +127,7 @@ export const placeAllWidgetsAsync = async (
   for (const app of allApps) {
     await placeWidgetAsync(
       db,
-      ctx,
+      contexts,
       "app",
       [],
       superjson.stringify({ appId: app.id, openInNewTab: true, showTitle: true }),
@@ -138,7 +147,7 @@ export const placeAllWidgetsAsync = async (
       options = { ...options, items: bookmarkAppIds };
     }
 
-    await placeWidgetAsync(db, ctx, config.kind, [], options ? superjson.stringify(options) : undefined, {
+    await placeWidgetAsync(db, contexts, config.kind, [], options ? superjson.stringify(options) : undefined, {
       width: config.width,
       height: config.height,
     });
diff --git a/packages/db/schema/index.ts b/packages/db/schema/index.ts
index 7a750869f..310f35d03 100644
--- a/packages/db/schema/index.ts
+++ b/packages/db/schema/index.ts
@@ -54,6 +54,8 @@ export const {
   cronJobConfigurations,
   customWidgetDefinitions,
   customWidgetSecrets,
+  legacyCustomWidgetDefinitions,
+  legacyCustomWidgetSecrets,
   widgetSecrets,
 } = schema;
 
@@ -68,3 +70,5 @@ export type Integration = InferSelectModel<typeof schema.integrations>;
 export type IntegrationSecret = InferSelectModel<typeof schema.integrationSecrets>;
 export type CustomWidgetDefinition = InferSelectModel<typeof schema.customWidgetDefinitions>;
 export type CustomWidgetSecret = InferSelectModel<typeof schema.customWidgetSecrets>;
+export type LegacyCustomWidgetDefinition = InferSelectModel<typeof schema.legacyCustomWidgetDefinitions>;
+export type LegacyCustomWidgetSecret = InferSelectModel<typeof schema.legacyCustomWidgetSecrets>;
diff --git a/packages/db/schema/mysql.ts b/packages/db/schema/mysql.ts
index f33c8656f..df478c3fa 100644
--- a/packages/db/schema/mysql.ts
+++ b/packages/db/schema/mysql.ts
@@ -35,18 +35,14 @@ import type {
   IntegrationKind,
   IntegrationPermission,
   IntegrationSecretKind,
+  LayoutRole,
   OnboardingStep,
   SearchEngineType,
   SectionKind,
   SupportedAuthProvider,
   WidgetKind,
 } from "@homarr/definitions";
-import type {
-  CustomWidgetAuthType,
-  CustomWidgetDisplayType,
-  CustomWidgetMethod,
-  CustomWidgetSecretKind,
-} from "@homarr/validation/custom-widget";
+import type { CustomWidgetSecretKind } from "@homarr/custom-widgets/core";
 
 const customBlob = customType<{ data: Buffer }>({
   dataType() {
@@ -213,8 +209,8 @@ export const integrations = mysqlTable(
     kind: varchar({ length: 128 }).$type<IntegrationKind>().notNull(),
     appId: varchar({ length: 128 }).references(() => apps.id, { onDelete: "set null" }),
   },
-  (integrations) => ({
-    kindIdx: index("integration__kind_idx").on(integrations.kind),
+  (table) => ({
+    kindIdx: index("integration__kind_idx").on(table.kind),
   }),
 );
 
@@ -346,7 +342,10 @@ export const layouts = mysqlTable("layout", {
     .notNull()
     .references(() => boards.id, { onDelete: "cascade" }),
   columnCount: tinyint().notNull(),
+  leftGutterColumnCount: tinyint().notNull().default(0),
+  rightGutterColumnCount: tinyint().notNull().default(0),
   breakpoint: smallint().notNull().default(0),
+  role: varchar({ length: 16 }).$type<LayoutRole>().notNull().default("custom"),
 });
 
 export const itemLayouts = mysqlTable(
@@ -540,7 +539,7 @@ export const assistantMessages = mysqlTable(
     format: varchar({ length: 64 }).notNull().default("ai-sdk/v6"),
     // `text` only holds 64KB on MySQL, which a single base64 image attachment already exceeds.
     // `mediumtext` holds 16MB, comfortably above the 2MB request cap enforced by the chat route.
-    content: mediumtext().default(emptySuperJSON).notNull(),
+    content: mediumtext().notNull(),
     createdAt: timestamp().notNull().defaultNow(),
   },
   (message) => ({
@@ -572,18 +571,65 @@ export const onboarding = mysqlTable("onboarding", {
   previousStep: varchar({ length: 64 }).$type<OnboardingStep>(),
 });
 
-export const customWidgetDefinitions = mysqlTable("custom_widget_definition", {
+/**
+ * Read-only v1 definitions retained during the Custom JSX v2 upgrade.
+ * Their original physical table names keep the database readable by a v1 binary.
+ */
+export const legacyCustomWidgetDefinitions = mysqlTable(
+  "custom_widget_definition",
+  {
+    id: varchar({ length: 64 }).notNull().primaryKey(),
+    name: varchar({ length: 256 }).notNull(),
+    description: text(),
+    iconUrl: text(),
+    url: text().notNull(),
+    authType: varchar({ length: 32 }).notNull().default("none"),
+    headerName: varchar({ length: 256 }),
+    method: varchar({ length: 16 }).notNull().default("GET"),
+    requestBody: text(),
+    displayType: varchar({ length: 32 }).notNull().default("singleValue"),
+    displayConfig: text().default(emptySuperJSON).notNull(),
+    enabled: boolean().notNull().default(true),
+    createdAt: timestamp({ mode: "date" }).notNull().defaultNow(),
+    updatedAt: timestamp({ mode: "date" }).notNull().defaultNow(),
+    creatorId: varchar({ length: 64 }),
+  },
+  (table) => ({
+    creatorFk: foreignKey({
+      columns: [table.creatorId],
+      foreignColumns: [users.id],
+      name: "custom_widget_definition_creator_id_user_id_fk",
+    }).onDelete("set null"),
+  }),
+);
+
+export const legacyCustomWidgetSecrets = mysqlTable(
+  "custom_widget_secret",
+  {
+    kind: varchar({ length: 64 }).$type<CustomWidgetSecretKind>().notNull(),
+    encryptedValue: text("value").$type<`${string}.${string}`>().notNull(),
+    updatedAt: timestamp().notNull(),
+    definitionId: varchar({ length: 64 }).notNull(),
+  },
+  (table) => ({
+    compoundKey: primaryKey({ columns: [table.definitionId, table.kind] }),
+    definitionFk: foreignKey({
+      columns: [table.definitionId],
+      foreignColumns: [legacyCustomWidgetDefinitions.id],
+      name: "cw_secret_definition_id_cw_definition_id_fk",
+    }).onDelete("cascade"),
+  }),
+);
+
+export const customWidgetDefinitions = mysqlTable("custom_widget_v2_definition", {
   id: varchar({ length: 64 }).notNull().primaryKey(),
   name: varchar({ length: 256 }).notNull(),
   description: text(),
   iconUrl: text(),
-  url: text().notNull(),
-  authType: varchar({ length: 32 }).$type<CustomWidgetAuthType>().notNull().default("none"),
-  headerName: varchar({ length: 256 }),
-  method: varchar({ length: 16 }).$type<CustomWidgetMethod>().notNull().default("GET"),
-  requestBody: text(),
-  displayType: varchar({ length: 32 }).$type<CustomWidgetDisplayType>().notNull().default("singleValue"),
-  displayConfig: text().default(emptySuperJSON).notNull(),
+  sources: text().notNull(),
+  requests: text().notNull(),
+  options: text().notNull(),
+  template: text().notNull(),
   enabled: boolean().notNull().default(true),
   createdAt: timestamp({ mode: "date" }).notNull().defaultNow(),
   updatedAt: timestamp({ mode: "date" }).notNull().defaultNow(),
@@ -591,10 +637,11 @@ export const customWidgetDefinitions = mysqlTable("custom_widget_definition", {
 });
 
 export const customWidgetSecrets = mysqlTable(
-  "custom_widget_secret",
+  "custom_widget_v2_secret",
   {
+    sourceId: varchar({ length: 64 }).notNull(),
     kind: varchar({ length: 64 }).$type<CustomWidgetSecretKind>().notNull(),
-    value: text().$type<`${string}.${string}`>().notNull(),
+    encryptedValue: text("encrypted_value").$type<`${string}.${string}`>().notNull(),
     updatedAt: timestamp()
       .$onUpdateFn(() => new Date())
       .notNull(),
@@ -602,15 +649,12 @@ export const customWidgetSecrets = mysqlTable(
   },
   (table) => ({
     compoundKey: primaryKey({
-      columns: [table.definitionId, table.kind],
+      columns: [table.definitionId, table.sourceId, table.kind],
     }),
-    // The name drizzle derives here is 65 characters, one over MySQL's 64-character identifier
-    // limit, so migration 0040 created the key under this shortened name. Declaring it explicitly
-    // keeps `drizzle-kit generate` from re-proposing an ALTER that MySQL rejects with error 1059.
-    definitionReference: foreignKey({
-      name: "cw_secret_definition_id_cw_definition_id_fk",
+    definitionFk: foreignKey({
       columns: [table.definitionId],
       foreignColumns: [customWidgetDefinitions.id],
+      name: "custom_widget_v2_secret_definition_id_fk",
     }).onDelete("cascade"),
   }),
 );
@@ -927,3 +971,18 @@ export const customWidgetSecretRelations = relations(customWidgetSecrets, ({ one
     references: [customWidgetDefinitions.id],
   }),
 }));
+
+export const legacyCustomWidgetDefinitionRelations = relations(legacyCustomWidgetDefinitions, ({ many, one }) => ({
+  secrets: many(legacyCustomWidgetSecrets),
+  creator: one(users, {
+    fields: [legacyCustomWidgetDefinitions.creatorId],
+    references: [users.id],
+  }),
+}));
+
+export const legacyCustomWidgetSecretRelations = relations(legacyCustomWidgetSecrets, ({ one }) => ({
+  definition: one(legacyCustomWidgetDefinitions, {
+    fields: [legacyCustomWidgetSecrets.definitionId],
+    references: [legacyCustomWidgetDefinitions.id],
+  }),
+}));
diff --git a/packages/db/schema/postgresql.ts b/packages/db/schema/postgresql.ts
index 574de5542..c0c22ab88 100644
--- a/packages/db/schema/postgresql.ts
+++ b/packages/db/schema/postgresql.ts
@@ -6,6 +6,7 @@ import type { AnyPgColumn } from "drizzle-orm/pg-core";
 import {
   boolean,
   customType,
+  foreignKey,
   index,
   integer,
   pgTable,
@@ -32,18 +33,14 @@ import type {
   IntegrationKind,
   IntegrationPermission,
   IntegrationSecretKind,
+  LayoutRole,
   OnboardingStep,
   SearchEngineType,
   SectionKind,
   SupportedAuthProvider,
   WidgetKind,
 } from "@homarr/definitions";
-import type {
-  CustomWidgetAuthType,
-  CustomWidgetDisplayType,
-  CustomWidgetMethod,
-  CustomWidgetSecretKind,
-} from "@homarr/validation/custom-widget";
+import type { CustomWidgetSecretKind } from "@homarr/custom-widgets/core";
 
 const customBlob = customType<{ data: Buffer }>({
   dataType() {
@@ -210,8 +207,8 @@ export const integrations = pgTable(
     kind: varchar({ length: 128 }).$type<IntegrationKind>().notNull(),
     appId: varchar({ length: 128 }).references(() => apps.id, { onDelete: "set null" }),
   },
-  (integrations) => ({
-    kindIdx: index("integration__kind_idx").on(integrations.kind),
+  (table) => ({
+    kindIdx: index("integration__kind_idx").on(table.kind),
   }),
 );
 
@@ -343,7 +340,10 @@ export const layouts = pgTable("layout", {
     .notNull()
     .references(() => boards.id, { onDelete: "cascade" }),
   columnCount: smallint().notNull(),
+  leftGutterColumnCount: smallint().notNull().default(0),
+  rightGutterColumnCount: smallint().notNull().default(0),
   breakpoint: smallint().notNull().default(0),
+  role: varchar({ length: 16 }).$type<LayoutRole>().notNull().default("custom"),
 });
 
 export const itemLayouts = pgTable(
@@ -535,7 +535,7 @@ export const assistantMessages = pgTable(
       .references(() => assistantThreads.id, { onDelete: "cascade" }),
     parentId: varchar({ length: 128 }),
     format: varchar({ length: 64 }).notNull().default("ai-sdk/v6"),
-    content: text().default(emptySuperJSON).notNull(),
+    content: text().notNull(),
     createdAt: timestamp().notNull().defaultNow(),
   },
   (message) => ({
@@ -567,18 +567,65 @@ export const onboarding = pgTable("onboarding", {
   previousStep: varchar({ length: 64 }).$type<OnboardingStep>(),
 });
 
-export const customWidgetDefinitions = pgTable("custom_widget_definition", {
+/**
+ * Read-only v1 definitions retained during the Custom JSX v2 upgrade.
+ * Their original physical table names keep the database readable by a v1 binary.
+ */
+export const legacyCustomWidgetDefinitions = pgTable(
+  "custom_widget_definition",
+  {
+    id: varchar({ length: 64 }).notNull().primaryKey(),
+    name: varchar({ length: 256 }).notNull(),
+    description: text(),
+    iconUrl: text(),
+    url: text().notNull(),
+    authType: varchar({ length: 32 }).notNull().default("none"),
+    headerName: varchar({ length: 256 }),
+    method: varchar({ length: 16 }).notNull().default("GET"),
+    requestBody: text(),
+    displayType: varchar({ length: 32 }).notNull().default("singleValue"),
+    displayConfig: text().default(emptySuperJSON).notNull(),
+    enabled: boolean().notNull().default(true),
+    createdAt: timestamp({ mode: "date" }).notNull().defaultNow(),
+    updatedAt: timestamp({ mode: "date" }).notNull().defaultNow(),
+    creatorId: varchar({ length: 64 }),
+  },
+  (table) => ({
+    creatorFk: foreignKey({
+      columns: [table.creatorId],
+      foreignColumns: [users.id],
+      name: "custom_widget_definition_creator_id_user_id_fk",
+    }).onDelete("set null"),
+  }),
+);
+
+export const legacyCustomWidgetSecrets = pgTable(
+  "custom_widget_secret",
+  {
+    kind: varchar({ length: 64 }).$type<CustomWidgetSecretKind>().notNull(),
+    encryptedValue: text("value").$type<`${string}.${string}`>().notNull(),
+    updatedAt: timestamp().notNull(),
+    definitionId: varchar({ length: 64 }).notNull(),
+  },
+  (table) => ({
+    compoundKey: primaryKey({ columns: [table.definitionId, table.kind] }),
+    definitionFk: foreignKey({
+      columns: [table.definitionId],
+      foreignColumns: [legacyCustomWidgetDefinitions.id],
+      name: "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
+    }).onDelete("cascade"),
+  }),
+);
+
+export const customWidgetDefinitions = pgTable("custom_widget_v2_definition", {
   id: varchar({ length: 64 }).notNull().primaryKey(),
   name: varchar({ length: 256 }).notNull(),
   description: text(),
   iconUrl: text(),
-  url: text().notNull(),
-  authType: varchar({ length: 32 }).$type<CustomWidgetAuthType>().notNull().default("none"),
-  headerName: varchar({ length: 256 }),
-  method: varchar({ length: 16 }).$type<CustomWidgetMethod>().notNull().default("GET"),
-  requestBody: text(),
-  displayType: varchar({ length: 32 }).$type<CustomWidgetDisplayType>().notNull().default("singleValue"),
-  displayConfig: text().default(emptySuperJSON).notNull(),
+  sources: text().notNull(),
+  requests: text().notNull(),
+  options: text().notNull(),
+  template: text().notNull(),
   enabled: boolean().notNull().default(true),
   createdAt: timestamp({ mode: "date" }).notNull().defaultNow(),
   updatedAt: timestamp({ mode: "date" }).notNull().defaultNow(),
@@ -586,21 +633,25 @@ export const customWidgetDefinitions = pgTable("custom_widget_definition", {
 });
 
 export const customWidgetSecrets = pgTable(
-  "custom_widget_secret",
+  "custom_widget_v2_secret",
   {
+    sourceId: varchar({ length: 64 }).notNull(),
     kind: varchar({ length: 64 }).$type<CustomWidgetSecretKind>().notNull(),
-    value: text().$type<`${string}.${string}`>().notNull(),
+    encryptedValue: text("encrypted_value").$type<`${string}.${string}`>().notNull(),
     updatedAt: timestamp()
       .$onUpdateFn(() => new Date())
       .notNull(),
-    definitionId: varchar({ length: 64 })
-      .notNull()
-      .references(() => customWidgetDefinitions.id, { onDelete: "cascade" }),
+    definitionId: varchar({ length: 64 }).notNull(),
   },
   (table) => ({
     compoundKey: primaryKey({
-      columns: [table.definitionId, table.kind],
+      columns: [table.definitionId, table.sourceId, table.kind],
     }),
+    definitionFk: foreignKey({
+      columns: [table.definitionId],
+      foreignColumns: [customWidgetDefinitions.id],
+      name: "custom_widget_v2_secret_definition_id_fk",
+    }).onDelete("cascade"),
   }),
 );
 
@@ -916,3 +967,18 @@ export const customWidgetSecretRelations = relations(customWidgetSecrets, ({ one
     references: [customWidgetDefinitions.id],
   }),
 }));
+
+export const legacyCustomWidgetDefinitionRelations = relations(legacyCustomWidgetDefinitions, ({ many, one }) => ({
+  secrets: many(legacyCustomWidgetSecrets),
+  creator: one(users, {
+    fields: [legacyCustomWidgetDefinitions.creatorId],
+    references: [users.id],
+  }),
+}));
+
+export const legacyCustomWidgetSecretRelations = relations(legacyCustomWidgetSecrets, ({ one }) => ({
+  definition: one(legacyCustomWidgetDefinitions, {
+    fields: [legacyCustomWidgetSecrets.definitionId],
+    references: [legacyCustomWidgetDefinitions.id],
+  }),
+}));
diff --git a/packages/db/schema/sqlite.ts b/packages/db/schema/sqlite.ts
index d4aaa0026..b04d4919c 100644
--- a/packages/db/schema/sqlite.ts
+++ b/packages/db/schema/sqlite.ts
@@ -3,7 +3,7 @@ import type { MantineSize } from "@mantine/core";
 import type { DayOfWeek } from "@mantine/dates";
 import { relations, sql } from "drizzle-orm";
 import type { AnySQLiteColumn } from "drizzle-orm/sqlite-core";
-import { blob, index, int, primaryKey, sqliteTable, text } from "drizzle-orm/sqlite-core";
+import { blob, foreignKey, index, int, primaryKey, sqliteTable, text } from "drizzle-orm/sqlite-core";
 
 import {
   backgroundImageAttachments,
@@ -21,18 +21,14 @@ import type {
   IntegrationKind,
   IntegrationPermission,
   IntegrationSecretKind,
+  LayoutRole,
   OnboardingStep,
   SearchEngineType,
   SectionKind,
   SupportedAuthProvider,
   WidgetKind,
 } from "@homarr/definitions";
-import type {
-  CustomWidgetAuthType,
-  CustomWidgetDisplayType,
-  CustomWidgetMethod,
-  CustomWidgetSecretKind,
-} from "@homarr/validation/custom-widget";
+import type { CustomWidgetSecretKind } from "@homarr/custom-widgets/core";
 
 export * from "@homarr/core/infrastructure/certificates/hostnames/db/sqlite";
 
@@ -197,8 +193,8 @@ export const integrations = sqliteTable(
     kind: text().$type<IntegrationKind>().notNull(),
     appId: text().references(() => apps.id, { onDelete: "set null" }),
   },
-  (integrations) => ({
-    kindIdx: index("integration__kind_idx").on(integrations.kind),
+  (table) => ({
+    kindIdx: index("integration__kind_idx").on(table.kind),
   }),
 );
 
@@ -329,7 +325,10 @@ export const layouts = sqliteTable("layout", {
     .notNull()
     .references(() => boards.id, { onDelete: "cascade" }),
   columnCount: int().notNull(),
+  leftGutterColumnCount: int().notNull().default(0),
+  rightGutterColumnCount: int().notNull().default(0),
   breakpoint: int().notNull().default(0),
+  role: text().$type<LayoutRole>().notNull().default("custom"),
 });
 
 export const itemLayouts = sqliteTable(
@@ -527,7 +526,7 @@ export const assistantMessages = sqliteTable(
       .references(() => assistantThreads.id, { onDelete: "cascade" }),
     parentId: text(),
     format: text().notNull().default("ai-sdk/v6"),
-    content: text().default(emptySuperJSON).notNull(),
+    content: text().notNull(),
     createdAt: int({ mode: "timestamp" })
       .notNull()
       .default(sql`(unixepoch())`),
@@ -561,18 +560,69 @@ export const onboarding = sqliteTable("onboarding", {
   previousStep: text().$type<OnboardingStep>(),
 });
 
-export const customWidgetDefinitions = sqliteTable("custom_widget_definition", {
+/**
+ * Read-only v1 definitions retained during the Custom JSX v2 upgrade.
+ * Their original physical table names keep the database readable by a v1 binary.
+ */
+export const legacyCustomWidgetDefinitions = sqliteTable(
+  "custom_widget_definition",
+  {
+    id: text().notNull().primaryKey(),
+    name: text().notNull(),
+    description: text(),
+    iconUrl: text(),
+    url: text().notNull(),
+    authType: text().notNull().default("none"),
+    headerName: text(),
+    method: text().notNull().default("GET"),
+    requestBody: text(),
+    displayType: text().notNull().default("singleValue"),
+    displayConfig: text().default(emptySuperJSON).notNull(),
+    enabled: int({ mode: "boolean" }).notNull().default(true),
+    createdAt: int({ mode: "timestamp" })
+      .notNull()
+      .default(sql`(unixepoch())`),
+    updatedAt: int({ mode: "timestamp" })
+      .notNull()
+      .default(sql`(unixepoch())`),
+    creatorId: text(),
+  },
+  (table) => ({
+    creatorFk: foreignKey({
+      columns: [table.creatorId],
+      foreignColumns: [users.id],
+      name: "custom_widget_definition_creator_id_user_id_fk",
+    }).onDelete("set null"),
+  }),
+);
+
+export const legacyCustomWidgetSecrets = sqliteTable(
+  "custom_widget_secret",
+  {
+    kind: text().$type<CustomWidgetSecretKind>().notNull(),
+    encryptedValue: text("value").$type<`${string}.${string}`>().notNull(),
+    updatedAt: int({ mode: "timestamp" }).notNull(),
+    definitionId: text().notNull(),
+  },
+  (table) => ({
+    compoundKey: primaryKey({ columns: [table.definitionId, table.kind] }),
+    definitionFk: foreignKey({
+      columns: [table.definitionId],
+      foreignColumns: [legacyCustomWidgetDefinitions.id],
+      name: "custom_widget_secret_definition_id_custom_widget_definition_id_fk",
+    }).onDelete("cascade"),
+  }),
+);
+
+export const customWidgetDefinitions = sqliteTable("custom_widget_v2_definition", {
   id: text().notNull().primaryKey(),
   name: text().notNull(),
   description: text(),
   iconUrl: text(),
-  url: text().notNull(),
-  authType: text().$type<CustomWidgetAuthType>().notNull().default("none"),
-  headerName: text(),
-  method: text().$type<CustomWidgetMethod>().notNull().default("GET"),
-  requestBody: text(),
-  displayType: text().$type<CustomWidgetDisplayType>().notNull().default("singleValue"),
-  displayConfig: text().default(emptySuperJSON).notNull(),
+  sources: text().notNull(),
+  requests: text().notNull(),
+  options: text().notNull(),
+  template: text().notNull(),
   enabled: int({ mode: "boolean" }).notNull().default(true),
   createdAt: int({ mode: "timestamp" })
     .notNull()
@@ -584,21 +634,25 @@ export const customWidgetDefinitions = sqliteTable("custom_widget_definition", {
 });
 
 export const customWidgetSecrets = sqliteTable(
-  "custom_widget_secret",
+  "custom_widget_v2_secret",
   {
+    sourceId: text().notNull(),
     kind: text().$type<CustomWidgetSecretKind>().notNull(),
-    value: text().$type<`${string}.${string}`>().notNull(),
+    encryptedValue: text("encrypted_value").$type<`${string}.${string}`>().notNull(),
     updatedAt: int({ mode: "timestamp" })
       .$onUpdateFn(() => new Date())
       .notNull(),
-    definitionId: text()
-      .notNull()
-      .references(() => customWidgetDefinitions.id, { onDelete: "cascade" }),
+    definitionId: text().notNull(),
   },
   (table) => ({
     compoundKey: primaryKey({
-      columns: [table.definitionId, table.kind],
+      columns: [table.definitionId, table.sourceId, table.kind],
     }),
+    definitionFk: foreignKey({
+      columns: [table.definitionId],
+      foreignColumns: [customWidgetDefinitions.id],
+      name: "custom_widget_v2_secret_definition_id_fk",
+    }).onDelete("cascade"),
   }),
 );
 
@@ -914,3 +968,18 @@ export const customWidgetSecretRelations = relations(customWidgetSecrets, ({ one
     references: [customWidgetDefinitions.id],
   }),
 }));
+
+export const legacyCustomWidgetDefinitionRelations = relations(legacyCustomWidgetDefinitions, ({ many, one }) => ({
+  secrets: many(legacyCustomWidgetSecrets),
+  creator: one(users, {
+    fields: [legacyCustomWidgetDefinitions.creatorId],
+    references: [users.id],
+  }),
+}));
+
+export const legacyCustomWidgetSecretRelations = relations(legacyCustomWidgetSecrets, ({ one }) => ({
+  definition: one(legacyCustomWidgetDefinitions, {
+    fields: [legacyCustomWidgetSecrets.definitionId],
+    references: [legacyCustomWidgetDefinitions.id],
+  }),
+}));
diff --git a/packages/db/seed/custom-widgets/currency-exchange.json b/packages/db/seed/custom-widgets/currency-exchange.json
deleted file mode 100644
index 892d1987c..000000000
--- a/packages/db/seed/custom-widgets/currency-exchange.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "homarr-custom-widget-v2",
-  "name": "Currency Exchange (JPY)",
-  "description": "Converts 50 Japanese Yen to EUR and USD using European Central Bank rates",
-  "url": "https://api.frankfurter.dev/v1/latest?from=JPY&to=EUR,USD&amount=50",
-  "authType": "none",
-  "method": "GET",
-  "displayType": "keyValue",
-  "displayConfig": {
-    "type": "keyValue",
-    "mappings": [
-      { "label": "50 JPY → EUR", "jsonPath": "$.rates.EUR", "unit": "€" },
-      { "label": "50 JPY → USD", "jsonPath": "$.rates.USD", "unit": "$" }
-    ],
-    "layout": "list",
-    "columns": 2
-  }
-}
diff --git a/packages/db/seed/custom-widgets/dog-facts.json b/packages/db/seed/custom-widgets/dog-facts.json
deleted file mode 100644
index 83ecb847d..000000000
--- a/packages/db/seed/custom-widgets/dog-facts.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "$schema": "homarr-custom-widget-v2",
-  "name": "Random Dog Fact",
-  "description": "Displays a random fun fact about dogs",
-  "url": "https://dogapi.dog/api/v2/facts",
-  "authType": "none",
-  "method": "GET",
-  "displayType": "singleValue",
-  "displayConfig": {
-    "type": "singleValue",
-    "jsonPath": "$.data[0].attributes.body",
-    "label": "Dog Fact",
-    "unit": "",
-    "valueSize": "sm",
-    "labelPosition": "above"
-  }
-}
diff --git a/packages/db/seed/custom-widgets/jellyfin.json b/packages/db/seed/custom-widgets/jellyfin.json
deleted file mode 100644
index 733da8847..000000000
--- a/packages/db/seed/custom-widgets/jellyfin.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "$schema": "homarr-custom-widget-v2",
-  "name": "Jellyfin library",
-  "description": "Counts the number of movies, series, episodes and songs in the library",
-  "iconUrl": "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons@master/svg/jellyfin.svg",
-  "url": "https://jellyfin.homelab.com/Items/Counts",
-  "authType": "apiKeyHeader",
-  "headerName": "X-Emby-Token",
-  "method": "GET",
-  "requestBody": null,
-  "displayType": "countGrid",
-  "displayConfig": {
-    "type": "countGrid",
-    "items": [
-      { "label": "Movies", "jsonPath": "$.MovieCount", "unit": "" },
-      { "label": "Series", "jsonPath": "$.SeriesCount", "unit": "" },
-      { "label": "Episodes", "jsonPath": "$.EpisodeCount", "unit": "" },
-      { "label": "Songs", "jsonPath": "$.SongCount", "unit": "" }
-    ],
-    "columns": 4,
-    "valueSize": "lg"
-  }
-}
diff --git a/packages/db/seed/custom-widgets/pokedex.json b/packages/db/seed/custom-widgets/pokedex.json
deleted file mode 100644
index d5610162b..000000000
--- a/packages/db/seed/custom-widgets/pokedex.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "$schema": "homarr-custom-widget-v2",
-  "name": "Pokédex — Charizard",
-  "description": "Detailed Pokémon card with types, stats, tabs, pagination, and collapsible info",
-  "iconUrl": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/items/poke-ball.png",
-  "url": "https://pokeapi.co/api/v2/pokemon/charizard",
-  "authType": "none",
-  "method": "GET",
-  "displayType": "customJsx",
-  "displayConfig": {
-    "type": "customJsx",
-    "template": "<Stack gap=\"sm\" p=\"xs\">\n  <Group wrap=\"nowrap\">\n    <Avatar\n      src={data.sprites.front_default}\n      size={80}\n      radius=\"sm\"\n    />\n    <Stack gap={4} style={{flex: 1}}>\n      <Title order={3} tt=\"capitalize\">{data.name}</Title>\n      <Text size=\"xs\" c=\"dimmed\">#{String(data.id).padStart(3, \"0\")} · {data.height / 10} m · {data.weight / 10} kg</Text>\n      <Group gap=\"xs\">\n        {data.types.map(t =>\n          <TypeBadge type={t.type.name} />\n        )}\n      </Group>\n    </Stack>\n  </Group>\n  <TabsContainer defaultTab=\"stats\">\n    <TabPanel value=\"stats\" label=\"Stats\">\n      <Stack gap=\"xs\" pt=\"xs\">\n        {data.stats.map(s =>\n          <StatBar label={s.stat.name} value={s.base_stat} max={255} color={s.base_stat > 100 ? \"green\" : s.base_stat > 60 ? \"yellow\" : \"red\"} />\n        )}\n      </Stack>\n    </TabPanel>\n    <TabPanel value=\"abilities\" label=\"Abilities\">\n      <Collapsible title=\"Abilities\" defaultOpen={true}>\n        <Group gap=\"xs\" pt=\"xs\">\n          {data.abilities.map(a =>\n            <Badge variant={a.is_hidden ? \"outline\" : \"filled\"} color={a.is_hidden ? \"gray\" : \"blue\"} tt=\"capitalize\">\n              {a.ability.name}{a.is_hidden ? \" (hidden)\" : \"\"}\n            </Badge>\n          )}\n        </Group>\n      </Collapsible>\n    </TabPanel>\n    <TabPanel value=\"moves\" label=\"Moves\">\n      <PaginatedList pageSize={12}>\n        {data.moves.map(m =>\n          <Badge size=\"xs\" variant=\"light\" tt=\"capitalize\" mb={4}>{m.move.name}</Badge>\n        )}\n      </PaginatedList>\n    </TabPanel>\n  </TabsContainer>\n</Stack>"
-  }
-}
diff --git a/packages/db/test/custom-widget-seed-assertions.ts b/packages/db/test/custom-widget-seed-assertions.ts
new file mode 100644
index 000000000..b18e6dee8
--- /dev/null
+++ b/packages/db/test/custom-widget-seed-assertions.ts
@@ -0,0 +1,65 @@
+import { parse } from "superjson";
+import { expect } from "vitest";
+
+import { BUNDLED_CUSTOM_WIDGETS, customWidgetDefinitionSchema } from "@homarr/custom-widgets/core";
+
+import type { Database } from "..";
+import { eq } from "..";
+import { seedDataAsync } from "../migrations/seed";
+import { customWidgetDefinitions, customWidgetSecrets } from "../schema";
+
+const expectedSeedIds = BUNDLED_CUSTOM_WIDGETS.map(({ id }) => id).toSorted();
+
+const reconstructWidget = (definition: typeof customWidgetDefinitions.$inferSelect) =>
+  customWidgetDefinitionSchema.parse({
+    $schema: "homarr-custom-widget-v2",
+    name: definition.name,
+    ...(definition.description === null ? {} : { description: definition.description }),
+    ...(definition.iconUrl === null ? {} : { iconUrl: definition.iconUrl }),
+    sources: parse(definition.sources),
+    requests: parse(definition.requests),
+    options: parse(definition.options),
+    template: definition.template,
+  });
+
+export const expectBundledCustomWidgetsSeeded = async (db: Database) => {
+  const definitions = await db.query.customWidgetDefinitions.findMany({
+    where: (table, { like }) => like(table.id, "seed-%"),
+  });
+
+  expect(definitions.map(({ id }) => id).toSorted()).toEqual(expectedSeedIds);
+  expect(definitions.every(({ enabled }) => !enabled)).toBe(true);
+  expect(definitions.every(({ creatorId }) => creatorId === null)).toBe(true);
+  expect(await db.$count(customWidgetSecrets)).toBe(0);
+
+  for (const definition of definitions) {
+    const expected = BUNDLED_CUSTOM_WIDGETS.find(({ id }) => id === definition.id);
+    expect(expected).toBeDefined();
+    expect(reconstructWidget(definition)).toEqual(customWidgetDefinitionSchema.parse(expected?.widget));
+  }
+
+  await db
+    .update(customWidgetDefinitions)
+    .set({ name: "User-edited dog facts", enabled: true })
+    .where(eq(customWidgetDefinitions.id, "seed-dog-facts"));
+  await db.delete(customWidgetDefinitions).where(eq(customWidgetDefinitions.id, "seed-currency-exchange"));
+
+  await seedDataAsync(db);
+
+  const reseededDefinitions = await db.query.customWidgetDefinitions.findMany({
+    where: (table, { like }) => like(table.id, "seed-%"),
+  });
+  const editedDefinition = reseededDefinitions.find(({ id }) => id === "seed-dog-facts");
+  const reseededCurrency = reseededDefinitions.find(({ id }) => id === "seed-currency-exchange");
+
+  expect(reseededDefinitions.map(({ id }) => id).toSorted()).toEqual(expectedSeedIds);
+  expect(editedDefinition).toMatchObject({ name: "User-edited dog facts", enabled: true, creatorId: null });
+  expect(reseededDefinitions.filter(({ id }) => id !== "seed-dog-facts").every(({ enabled }) => !enabled)).toBe(true);
+  if (!reseededCurrency) throw new Error("Currency Exchange seed was not restored");
+  expect(reconstructWidget(reseededCurrency)).toEqual(
+    customWidgetDefinitionSchema.parse(
+      BUNDLED_CUSTOM_WIDGETS.find(({ id }) => id === "seed-currency-exchange")?.widget,
+    ),
+  );
+  expect(await db.$count(customWidgetSecrets)).toBe(0);
+};
diff --git a/packages/db/test/mysql-migration.spec.ts b/packages/db/test/mysql-migration.spec.ts
index 9e86e2003..634c82524 100644
--- a/packages/db/test/mysql-migration.spec.ts
+++ b/packages/db/test/mysql-migration.spec.ts
@@ -1,14 +1,29 @@
 import path from "path";
+import { readFileSync } from "node:fs";
 import { MySqlContainer } from "@testcontainers/mysql";
 import { eq } from "drizzle-orm";
 import { drizzle } from "drizzle-orm/mysql2";
 import { migrate } from "drizzle-orm/mysql2/migrator";
 import mysql from "mysql2";
+import SuperJSON from "superjson";
 import { describe, expect, test } from "vitest";
 
 import { DB_CASING } from "@homarr/core/infrastructure/db/constants";
 
 import * as mysqlSchema from "../schema/mysql";
+import type { Database } from "..";
+import { seedDataAsync } from "../migrations/seed";
+import { expectBundledCustomWidgetsSeeded } from "./custom-widget-seed-assertions";
+
+const applyMigration = async (connection: mysql.Connection, fileName: string) => {
+  const migration = readFileSync(path.join(__dirname, "..", "migrations", "mysql", fileName), "utf8");
+  for (const statement of migration
+    .split("--> statement-breakpoint")
+    .map((value) => value.trim())
+    .filter(Boolean)) {
+    await connection.promise().query(statement);
+  }
+};
 
 describe("Mysql Migration", () => {
   test("should add all tables and keys specified in migration files", async () => {
@@ -32,9 +47,15 @@ describe("Mysql Migration", () => {
     await migrate(database, {
       migrationsFolder: path.join(__dirname, "..", "migrations", "mysql"),
     });
+    await seedDataAsync(database as unknown as Database);
 
     // Check if users table exists
     await database.query.users.findMany();
+    await expectBundledCustomWidgetsSeeded(database as unknown as Database);
+    const [customWidgetTables] = await connection
+      .promise()
+      .query<mysql.RowDataPacket[]>("SHOW TABLES LIKE 'custom_widget%'");
+    expect(customWidgetTables).toHaveLength(4);
 
     // A single base64 image attachment already exceeds the 64KB that `text` holds on MySQL, so
     // `assistant_message.content` has to be `mediumtext`. Everything below 64KB passes either way.
@@ -55,4 +76,144 @@ describe("Mysql Migration", () => {
     connection.end();
     await mysqlContainer.stop();
   }, 120_000);
+
+  test("Custom Widget v2 migration preserves v1 data and board references", async () => {
+    const mysqlContainer = await new MySqlContainer("mysql:latest").start();
+    const connection = mysql.createConnection({
+      host: mysqlContainer.getHost(),
+      database: mysqlContainer.getDatabase(),
+      port: mysqlContainer.getPort(),
+      user: mysqlContainer.getUsername(),
+      password: mysqlContainer.getUserPassword(),
+      multipleStatements: true,
+    });
+    const sql = connection.promise();
+    try {
+      const legacyPlacementOptions = SuperJSON.stringify({ definitionId: "legacy-weather", refreshInterval: 30 });
+      await sql.query(`
+        CREATE TABLE \`user\` (\`id\` varchar(64) NOT NULL PRIMARY KEY);
+        CREATE TABLE \`groupPermission\` (
+          \`group_id\` varchar(64) NOT NULL,
+          \`permission\` text NOT NULL
+        );
+        CREATE TABLE \`item\` (
+          \`id\` varchar(64) NOT NULL PRIMARY KEY,
+          \`kind\` varchar(64) NOT NULL,
+          \`options\` text NOT NULL
+        );
+        CREATE TABLE \`custom_widget_definition\` (
+          \`id\` varchar(64) NOT NULL PRIMARY KEY,
+          \`name\` varchar(256) NOT NULL,
+          \`description\` text,
+          \`icon_url\` text,
+          \`url\` text NOT NULL,
+          \`auth_type\` varchar(32) NOT NULL DEFAULT 'none',
+          \`header_name\` varchar(256),
+          \`method\` varchar(16) NOT NULL DEFAULT 'GET',
+          \`request_body\` text,
+          \`display_type\` varchar(32) NOT NULL DEFAULT 'singleValue',
+          \`display_config\` text NOT NULL,
+          \`enabled\` boolean NOT NULL DEFAULT true,
+          \`created_at\` timestamp NOT NULL,
+          \`updated_at\` timestamp NOT NULL,
+          \`creator_id\` varchar(64),
+          CONSTRAINT \`custom_widget_definition_creator_id_user_id_fk\`
+            FOREIGN KEY (\`creator_id\`) REFERENCES \`user\`(\`id\`) ON DELETE SET NULL
+        );
+        CREATE TABLE \`custom_widget_secret\` (
+          \`kind\` varchar(64) NOT NULL,
+          \`value\` text NOT NULL,
+          \`updated_at\` timestamp NOT NULL,
+          \`definition_id\` varchar(64) NOT NULL,
+          PRIMARY KEY (\`definition_id\`, \`kind\`),
+          CONSTRAINT \`cw_secret_definition_id_cw_definition_id_fk\`
+            FOREIGN KEY (\`definition_id\`) REFERENCES \`custom_widget_definition\`(\`id\`) ON DELETE CASCADE
+        );
+        INSERT INTO \`user\` (\`id\`) VALUES ('owner');
+        INSERT INTO \`custom_widget_definition\` (
+          \`id\`, \`name\`, \`url\`, \`auth_type\`, \`method\`, \`display_type\`, \`display_config\`,
+          \`enabled\`, \`created_at\`, \`updated_at\`, \`creator_id\`
+        ) VALUES (
+          'legacy-weather', 'Weather', 'https://example.test/weather', 'bearer', 'GET', 'singleValue',
+          '{"type":"singleValue","jsonPath":"$.temperature"}', true,
+          '2023-11-14 00:00:00', '2023-11-14 00:00:01', 'owner'
+        );
+        INSERT INTO \`custom_widget_secret\` (\`kind\`, \`value\`, \`updated_at\`, \`definition_id\`)
+        VALUES ('apiKey', 'encrypted.value', '2023-11-14 00:00:01', 'legacy-weather');
+        INSERT INTO \`groupPermission\` (\`group_id\`, \`permission\`) VALUES
+          ('editors', 'custom-widget-manage'),
+          ('editors', 'custom-widget-secret-write'),
+          ('editors', 'board-create');
+      `);
+      await sql.execute("INSERT INTO `item` (`id`, `kind`, `options`) VALUES ('weather-item', 'customApi', ?)", [
+        legacyPlacementOptions,
+      ]);
+
+      await applyMigration(connection, "0044_custom_widget_v2_tables.sql");
+      await sql.query(`
+        INSERT INTO \`custom_widget_v2_definition\` (
+          \`id\`, \`name\`, \`sources\`, \`requests\`, \`options\`, \`template\`, \`enabled\`,
+          \`created_at\`, \`updated_at\`, \`creator_id\`
+        ) VALUES (
+          'legacy-weather', 'Weather v2', '[]', '[]', '[]', '<Text>Weather</Text>', true,
+          '2023-11-14 00:00:02', '2023-11-14 00:00:03', 'owner'
+        );
+        INSERT INTO \`custom_widget_v2_secret\` (
+          \`source_id\`, \`kind\`, \`encrypted_value\`, \`updated_at\`, \`definition_id\`
+        ) VALUES ('weather', 'apiKey', 'encrypted.v2-value', '2023-11-14 00:00:03', 'legacy-weather');
+      `);
+
+      const [definitions] = await sql.query<mysql.RowDataPacket[]>(
+        "SELECT id, name, url, enabled, creator_id FROM custom_widget_definition",
+      );
+      const [secrets] = await sql.query<mysql.RowDataPacket[]>(
+        "SELECT definition_id, kind, value FROM custom_widget_secret",
+      );
+      expect(definitions).toEqual([
+        expect.objectContaining({
+          id: "legacy-weather",
+          name: "Weather",
+          url: "https://example.test/weather",
+          enabled: 1,
+          creator_id: "owner",
+        }),
+      ]);
+      expect(secrets).toEqual([
+        expect.objectContaining({ definition_id: "legacy-weather", kind: "apiKey", value: "encrypted.value" }),
+      ]);
+      const [v2Definitions] = await sql.query<mysql.RowDataPacket[]>(
+        "SELECT id, name, template FROM custom_widget_v2_definition",
+      );
+      const [v2Secrets] = await sql.query<mysql.RowDataPacket[]>(
+        "SELECT definition_id, source_id, kind, encrypted_value FROM custom_widget_v2_secret",
+      );
+      expect(v2Definitions).toEqual([
+        expect.objectContaining({ id: "legacy-weather", name: "Weather v2", template: "<Text>Weather</Text>" }),
+      ]);
+      expect(v2Secrets).toEqual([
+        expect.objectContaining({
+          definition_id: "legacy-weather",
+          source_id: "weather",
+          kind: "apiKey",
+          encrypted_value: "encrypted.v2-value",
+        }),
+      ]);
+      const [items] = await sql.query<mysql.RowDataPacket[]>("SELECT options FROM item WHERE id = 'weather-item'");
+      expect(items).toEqual([{ options: legacyPlacementOptions }]);
+      const [permissions] = await sql.query<mysql.RowDataPacket[]>(
+        "SELECT permission FROM groupPermission ORDER BY permission",
+      );
+      expect(permissions).toEqual([{ permission: "board-create" }]);
+      const [v1Columns] = await sql.query<mysql.RowDataPacket[]>("SHOW COLUMNS FROM custom_widget_definition");
+      expect(v1Columns.map((column) => column.Field)).toEqual(
+        expect.arrayContaining(["id", "url", "auth_type", "display_type", "display_config"]),
+      );
+      expect(v1Columns.map((column) => column.Field)).not.toContain("sources");
+      const [legacyTables] = await sql.query<mysql.RowDataPacket[]>("SHOW TABLES LIKE 'legacy_custom_widget%'");
+      expect(legacyTables).toEqual([]);
+    } finally {
+      await sql.end();
+      await mysqlContainer.stop();
+    }
+  }, 120_000);
 });
diff --git a/packages/db/test/postgresql-migration.spec.ts b/packages/db/test/postgresql-migration.spec.ts
index c7d4ce4ee..de29775c0 100644
--- a/packages/db/test/postgresql-migration.spec.ts
+++ b/packages/db/test/postgresql-migration.spec.ts
@@ -1,13 +1,28 @@
 import path from "path";
+import { readFileSync } from "node:fs";
 import { PostgreSqlContainer } from "@testcontainers/postgresql";
 import { drizzle } from "drizzle-orm/node-postgres";
 import { migrate } from "drizzle-orm/node-postgres/migrator";
 import { Pool } from "pg";
-import { describe, test } from "vitest";
+import SuperJSON from "superjson";
+import { describe, expect, test } from "vitest";
 
 import { DB_CASING } from "@homarr/core/infrastructure/db/constants";
 
 import * as pgSchema from "../schema/postgresql";
+import type { Database } from "..";
+import { seedDataAsync } from "../migrations/seed";
+import { expectBundledCustomWidgetsSeeded } from "./custom-widget-seed-assertions";
+
+const applyMigration = async (pool: Pool, fileName: string) => {
+  const migration = readFileSync(path.join(__dirname, "..", "migrations", "postgresql", fileName), "utf8");
+  for (const statement of migration
+    .split("--> statement-breakpoint")
+    .map((value) => value.trim())
+    .filter(Boolean)) {
+    await pool.query(statement);
+  }
+};
 
 describe("PostgreSql Migration", () => {
   test("should add all tables and keys specified in migration files", async () => {
@@ -36,13 +51,159 @@ describe("PostgreSql Migration", () => {
     await migrate(database, {
       migrationsFolder: path.join(__dirname, "..", "migrations", "postgresql"),
     });
+    await seedDataAsync(database as unknown as Database);
 
     // Check if users table exists
     await database.query.users.findMany();
+    await expectBundledCustomWidgetsSeeded(database as unknown as Database);
+    expect(
+      (
+        await pool.query(
+          "SELECT table_name FROM information_schema.tables WHERE table_schema = 'public' AND table_name LIKE 'custom_widget%'",
+        )
+      ).rows,
+    ).toHaveLength(4);
 
     // Close the pool to release resources
     await pool.end();
     // Stop the container
     await postgreSqlContainer.stop();
   }, 40_000);
+
+  test("Custom Widget v2 migration preserves v1 data and board references", async () => {
+    const postgreSqlContainer = await new PostgreSqlContainer("postgres:latest").start();
+    const pool = new Pool({
+      user: postgreSqlContainer.getUsername(),
+      database: postgreSqlContainer.getDatabase(),
+      password: postgreSqlContainer.getPassword(),
+      port: postgreSqlContainer.getPort(),
+      host: postgreSqlContainer.getHost(),
+    });
+    try {
+      const legacyPlacementOptions = SuperJSON.stringify({ definitionId: "legacy-weather", refreshInterval: 30 });
+      await pool.query(`
+        CREATE TABLE "user" ("id" varchar(64) PRIMARY KEY NOT NULL);
+        CREATE TABLE "groupPermission" (
+          "group_id" varchar(64) NOT NULL,
+          "permission" text NOT NULL
+        );
+        CREATE TABLE "item" (
+          "id" varchar(64) PRIMARY KEY NOT NULL,
+          "kind" varchar(64) NOT NULL,
+          "options" text NOT NULL
+        );
+        CREATE TABLE "custom_widget_definition" (
+          "id" varchar(64) PRIMARY KEY NOT NULL,
+          "name" varchar(256) NOT NULL,
+          "description" text,
+          "icon_url" text,
+          "url" text NOT NULL,
+          "auth_type" varchar(32) DEFAULT 'none' NOT NULL,
+          "header_name" varchar(256),
+          "method" varchar(16) DEFAULT 'GET' NOT NULL,
+          "request_body" text,
+          "display_type" varchar(32) DEFAULT 'singleValue' NOT NULL,
+          "display_config" text NOT NULL,
+          "enabled" boolean DEFAULT true NOT NULL,
+          "created_at" timestamp NOT NULL,
+          "updated_at" timestamp NOT NULL,
+          "creator_id" varchar(64),
+          CONSTRAINT "custom_widget_definition_creator_id_user_id_fk"
+            FOREIGN KEY ("creator_id") REFERENCES "user"("id") ON DELETE SET NULL
+        );
+        CREATE TABLE "custom_widget_secret" (
+          "kind" varchar(64) NOT NULL,
+          "value" text NOT NULL,
+          "updated_at" timestamp NOT NULL,
+          "definition_id" varchar(64) NOT NULL,
+          CONSTRAINT "custom_widget_secret_definition_id_kind_pk" PRIMARY KEY("definition_id", "kind"),
+          CONSTRAINT "custom_widget_secret_definition_id_custom_widget_definition_id_fk"
+            FOREIGN KEY ("definition_id") REFERENCES "custom_widget_definition"("id") ON DELETE CASCADE
+        );
+        INSERT INTO "user" ("id") VALUES ('owner');
+        INSERT INTO "custom_widget_definition" (
+          "id", "name", "url", "auth_type", "method", "display_type", "display_config", "enabled",
+          "created_at", "updated_at", "creator_id"
+        ) VALUES (
+          'legacy-weather', 'Weather', 'https://example.test/weather', 'bearer', 'GET', 'singleValue',
+          '{"type":"singleValue","jsonPath":"$.temperature"}', true,
+          '2023-11-14 00:00:00', '2023-11-14 00:00:01', 'owner'
+        );
+        INSERT INTO "custom_widget_secret" ("kind", "value", "updated_at", "definition_id")
+        VALUES ('apiKey', 'encrypted.value', '2023-11-14 00:00:01', 'legacy-weather');
+        INSERT INTO "groupPermission" ("group_id", "permission") VALUES
+          ('editors', 'custom-widget-manage'),
+          ('editors', 'custom-widget-secret-write'),
+          ('editors', 'board-create');
+      `);
+      await pool.query(`INSERT INTO "item" ("id", "kind", "options") VALUES ('weather-item', 'customApi', $1)`, [
+        legacyPlacementOptions,
+      ]);
+
+      await applyMigration(pool, "0010_custom_widget_v2_tables.sql");
+      await pool.query(`
+        INSERT INTO "custom_widget_v2_definition" (
+          "id", "name", "sources", "requests", "options", "template", "enabled",
+          "created_at", "updated_at", "creator_id"
+        ) VALUES (
+          'legacy-weather', 'Weather v2', '[]', '[]', '[]', '<Text>Weather</Text>', true,
+          '2023-11-14 00:00:02', '2023-11-14 00:00:03', 'owner'
+        );
+        INSERT INTO "custom_widget_v2_secret" (
+          "source_id", "kind", "encrypted_value", "updated_at", "definition_id"
+        ) VALUES ('weather', 'apiKey', 'encrypted.v2-value', '2023-11-14 00:00:03', 'legacy-weather');
+      `);
+
+      expect(
+        (await pool.query("SELECT id, name, url, enabled, creator_id FROM custom_widget_definition")).rows,
+      ).toEqual([
+        expect.objectContaining({
+          id: "legacy-weather",
+          name: "Weather",
+          url: "https://example.test/weather",
+          enabled: true,
+          creator_id: "owner",
+        }),
+      ]);
+      expect((await pool.query("SELECT definition_id, kind, value FROM custom_widget_secret")).rows).toEqual([
+        expect.objectContaining({ definition_id: "legacy-weather", kind: "apiKey", value: "encrypted.value" }),
+      ]);
+      expect((await pool.query("SELECT id, name, template FROM custom_widget_v2_definition")).rows).toEqual([
+        expect.objectContaining({ id: "legacy-weather", name: "Weather v2", template: "<Text>Weather</Text>" }),
+      ]);
+      expect(
+        (await pool.query("SELECT definition_id, source_id, kind, encrypted_value FROM custom_widget_v2_secret")).rows,
+      ).toEqual([
+        expect.objectContaining({
+          definition_id: "legacy-weather",
+          source_id: "weather",
+          kind: "apiKey",
+          encrypted_value: "encrypted.v2-value",
+        }),
+      ]);
+      expect((await pool.query("SELECT options FROM item WHERE id = 'weather-item'")).rows).toEqual([
+        { options: legacyPlacementOptions },
+      ]);
+      expect((await pool.query('SELECT "permission" FROM "groupPermission" ORDER BY "permission"')).rows).toEqual([
+        { permission: "board-create" },
+      ]);
+      const v1Columns = (
+        await pool.query(
+          "SELECT column_name FROM information_schema.columns WHERE table_schema = 'public' AND table_name = 'custom_widget_definition'",
+        )
+      ).rows.map((column: { column_name: string }) => column.column_name);
+      expect(v1Columns).toEqual(expect.arrayContaining(["id", "url", "auth_type", "display_type", "display_config"]));
+      expect(v1Columns).not.toContain("sources");
+      expect(
+        (
+          await pool.query(
+            "SELECT table_name FROM information_schema.tables WHERE table_schema = 'public' AND table_name LIKE 'legacy_custom_widget%'",
+          )
+        ).rows,
+      ).toEqual([]);
+    } finally {
+      await pool.end();
+      await postgreSqlContainer.stop();
+    }
+  }, 40_000);
 });
diff --git a/packages/db/test/schema.spec.ts b/packages/db/test/schema.spec.ts
index dd1e14df0..f5503e516 100644
--- a/packages/db/test/schema.spec.ts
+++ b/packages/db/test/schema.spec.ts
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable import/namespace -- This test compares equivalent schema exports by shared dynamic keys. */
 import { is } from "drizzle-orm";
 import type { Column, InferSelectModel } from "drizzle-orm";
 import { MySqlTable, getTableConfig as getMysqlTableConfig } from "drizzle-orm/mysql-core";
@@ -29,7 +30,6 @@ type FixedMysqlConfig = {
     };
   };
 };
-
 type FixedPostgresqlConfig = {
   [key in keyof PostgreisqlConfig]: {
     [column in keyof PostgreisqlConfig[key]]: {
diff --git a/packages/db/test/sqlite-migration.spec.ts b/packages/db/test/sqlite-migration.spec.ts
new file mode 100644
index 000000000..ff21bbd9b
--- /dev/null
+++ b/packages/db/test/sqlite-migration.spec.ts
@@ -0,0 +1,164 @@
+import path from "path";
+import { readFileSync } from "node:fs";
+import BetterSqlite3 from "better-sqlite3";
+import { drizzle } from "drizzle-orm/better-sqlite3";
+import { migrate } from "drizzle-orm/better-sqlite3/migrator";
+import SuperJSON from "superjson";
+import { expect, test } from "vitest";
+
+import { DB_CASING } from "@homarr/core/infrastructure/db/constants";
+
+import type { Database } from "..";
+import { seedDataAsync } from "../migrations/seed";
+import * as sqliteSchema from "../schema/sqlite";
+import { expectBundledCustomWidgetsSeeded } from "./custom-widget-seed-assertions";
+
+const applyMigration = (connection: BetterSqlite3.Database, fileName: string) => {
+  const migration = readFileSync(path.join(__dirname, "..", "migrations", "sqlite", fileName), "utf8");
+  for (const statement of migration
+    .split("--> statement-breakpoint")
+    .map((value) => value.trim())
+    .filter(Boolean)) {
+    connection.exec(statement);
+  }
+};
+
+test("SQLite migrations seed the five disabled bundled custom widgets", async () => {
+  const connection = new BetterSqlite3(":memory:");
+  const database = drizzle(connection, { schema: sqliteSchema, casing: DB_CASING });
+
+  migrate(database, { migrationsFolder: path.join(__dirname, "..", "migrations", "sqlite") });
+  await seedDataAsync(database as unknown as Database);
+
+  await expectBundledCustomWidgetsSeeded(database as unknown as Database);
+  expect(
+    connection
+      .prepare("SELECT name FROM sqlite_master WHERE type = 'table' AND name LIKE 'custom_widget%' ORDER BY name")
+      .all(),
+  ).toEqual([
+    { name: "custom_widget_definition" },
+    { name: "custom_widget_secret" },
+    { name: "custom_widget_v2_definition" },
+    { name: "custom_widget_v2_secret" },
+  ]);
+
+  connection.close();
+});
+
+test("Custom Widget v2 migration preserves v1 data and board references", () => {
+  const connection = new BetterSqlite3(":memory:");
+  const legacyPlacementOptions = SuperJSON.stringify({ definitionId: "legacy-weather", refreshInterval: 30 });
+  connection.exec(`
+    CREATE TABLE user (id text PRIMARY KEY NOT NULL);
+    CREATE TABLE groupPermission (
+      group_id text NOT NULL,
+      permission text NOT NULL
+    );
+    CREATE TABLE item (
+      id text PRIMARY KEY NOT NULL,
+      kind text NOT NULL,
+      options text NOT NULL
+    );
+    CREATE TABLE custom_widget_definition (
+      id text PRIMARY KEY NOT NULL,
+      name text NOT NULL,
+      description text,
+      icon_url text,
+      url text NOT NULL,
+      auth_type text DEFAULT 'none' NOT NULL,
+      header_name text,
+      method text DEFAULT 'GET' NOT NULL,
+      request_body text,
+      display_type text DEFAULT 'singleValue' NOT NULL,
+      display_config text DEFAULT '{}' NOT NULL,
+      enabled integer DEFAULT true NOT NULL,
+      created_at integer NOT NULL,
+      updated_at integer NOT NULL,
+      creator_id text REFERENCES user(id) ON DELETE SET NULL
+    );
+    CREATE TABLE custom_widget_secret (
+      kind text NOT NULL,
+      value text NOT NULL,
+      updated_at integer NOT NULL,
+      definition_id text NOT NULL REFERENCES custom_widget_definition(id) ON DELETE CASCADE,
+      PRIMARY KEY(definition_id, kind)
+    );
+    INSERT INTO user (id) VALUES ('owner');
+    INSERT INTO custom_widget_definition (
+      id, name, url, auth_type, method, display_type, display_config, enabled, created_at, updated_at, creator_id
+    ) VALUES ('legacy-weather', 'Weather', 'https://example.test/weather', 'bearer', 'GET', 'singleValue',
+      '{"type":"singleValue","jsonPath":"$.temperature"}', true, 1700000000, 1700000001, 'owner');
+    INSERT INTO custom_widget_secret (kind, value, updated_at, definition_id)
+    VALUES ('apiKey', 'encrypted.value', 1700000001, 'legacy-weather');
+    INSERT INTO groupPermission (group_id, permission) VALUES
+      ('editors', 'custom-widget-manage'),
+      ('editors', 'custom-widget-secret-write'),
+      ('editors', 'board-create');
+  `);
+  connection
+    .prepare("INSERT INTO item (id, kind, options) VALUES ('weather-item', 'customApi', ?)")
+    .run(legacyPlacementOptions);
+
+  applyMigration(connection, "0042_custom_widget_v2_tables.sql");
+  connection.exec(`
+    INSERT INTO custom_widget_v2_definition (
+      id, name, sources, requests, options, template, enabled, created_at, updated_at, creator_id
+    ) VALUES (
+      'legacy-weather', 'Weather v2', '[]', '[]', '[]', '<Text>Weather</Text>', true,
+      1700000002, 1700000003, 'owner'
+    );
+    INSERT INTO custom_widget_v2_secret (source_id, kind, encrypted_value, updated_at, definition_id)
+    VALUES ('weather', 'apiKey', 'encrypted.v2-value', 1700000003, 'legacy-weather');
+  `);
+
+  expect(connection.prepare("SELECT * FROM custom_widget_definition").get()).toMatchObject({
+    id: "legacy-weather",
+    name: "Weather",
+    url: "https://example.test/weather",
+    enabled: 1,
+    creator_id: "owner",
+  });
+  expect(connection.prepare("SELECT * FROM custom_widget_secret").get()).toMatchObject({
+    definition_id: "legacy-weather",
+    kind: "apiKey",
+    value: "encrypted.value",
+  });
+  expect(connection.prepare("SELECT * FROM custom_widget_v2_definition").get()).toMatchObject({
+    id: "legacy-weather",
+    name: "Weather v2",
+    template: "<Text>Weather</Text>",
+  });
+  expect(connection.prepare("SELECT * FROM custom_widget_v2_secret").get()).toMatchObject({
+    definition_id: "legacy-weather",
+    source_id: "weather",
+    encrypted_value: "encrypted.v2-value",
+  });
+  expect(connection.prepare("SELECT options FROM item WHERE id = 'weather-item'").get()).toEqual({
+    options: legacyPlacementOptions,
+  });
+  expect(connection.prepare("SELECT permission FROM groupPermission ORDER BY permission").all()).toEqual([
+    { permission: "board-create" },
+  ]);
+  expect(
+    connection
+      .prepare(
+        `SELECT id, name, url, auth_type, header_name, method, request_body, display_type, display_config,
+          enabled, created_at, updated_at, creator_id
+        FROM custom_widget_definition`,
+      )
+      .get(),
+  ).toMatchObject({
+    id: "legacy-weather",
+    auth_type: "bearer",
+    display_type: "singleValue",
+  });
+  expect(
+    connection
+      .prepare(
+        "SELECT name FROM sqlite_master WHERE type = 'table' AND name LIKE 'legacy_custom_widget%' ORDER BY name",
+      )
+      .all(),
+  ).toEqual([]);
+
+  connection.close();
+});
diff --git a/packages/db/tsconfig.json b/packages/db/tsconfig.json
index 35b272c7e..8fba65692 100644
--- a/packages/db/tsconfig.json
+++ b/packages/db/tsconfig.json
@@ -4,5 +4,5 @@
     "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
   },
   "include": ["."],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "migrations/*/migrate.cjs"]
 }
diff --git a/packages/definitions/package.json b/packages/definitions/package.json
index 9059e3c92..dff0deb5e 100644
--- a/packages/definitions/package.json
+++ b/packages/definitions/package.json
@@ -13,6 +13,7 @@
   },
   "exports": {
     ".": "./index.ts",
+    "./cookie": "./src/cookie.ts",
     "./docs/*": "./src/docs/*.ts"
   },
   "scripts": {
diff --git a/packages/definitions/src/board.ts b/packages/definitions/src/board.ts
index 302008550..3bd5ffdd9 100644
--- a/packages/definitions/src/board.ts
+++ b/packages/definitions/src/board.ts
@@ -8,7 +8,49 @@ export const backgroundImageRepeats = createDefinition(["repeat", "repeat-x", "r
 export const backgroundImageSizes = createDefinition(["cover", "contain"], {
   defaultValue: "cover",
 });
+export const layoutRoles = createDefinition(["mobile", "base", "custom"], { defaultValue: "custom" });
 
 export type BackgroundImageAttachment = inferDefinitionType<typeof backgroundImageAttachments>;
 export type BackgroundImageRepeat = inferDefinitionType<typeof backgroundImageRepeats>;
 export type BackgroundImageSize = inferDefinitionType<typeof backgroundImageSizes>;
+export type LayoutRole = inferDefinitionType<typeof layoutRoles>;
+
+const MAX_LAYOUT_BREAKPOINT = 32767;
+const compareBoardLayouts = (
+  layoutA: { id: string; breakpoint: number; columnCount: number },
+  layoutB: { id: string; breakpoint: number; columnCount: number },
+) =>
+  layoutA.breakpoint - layoutB.breakpoint ||
+  layoutA.columnCount - layoutB.columnCount ||
+  layoutA.id.localeCompare(layoutB.id);
+
+export const normalizeBoardLayoutRoles = <
+  TLayout extends { id: string; breakpoint: number; columnCount: number; role?: LayoutRole },
+>(
+  sourceLayouts: TLayout[],
+): Array<TLayout & { role: LayoutRole }> => {
+  const mobileLayouts = sourceLayouts.filter((layout) => layout.role === "mobile");
+  const baseLayouts = sourceLayouts.filter((layout) => layout.role === "base");
+  const mobileLayout = mobileLayouts.length === 1 ? mobileLayouts[0] : undefined;
+  const baseLayout = baseLayouts.length === 1 ? baseLayouts[0] : undefined;
+  const orderedLayouts =
+    mobileLayout && baseLayout
+      ? [
+          mobileLayout,
+          ...sourceLayouts.filter((layout) => layout.role === "custom").toSorted(compareBoardLayouts),
+          baseLayout,
+        ]
+      : sourceLayouts.toSorted(compareBoardLayouts);
+
+  let previousBreakpoint = -1;
+  return orderedLayouts.map((layout, index) => {
+    const remainingLayouts = orderedLayouts.length - index - 1;
+    const breakpoint =
+      index === 0
+        ? 0
+        : Math.min(MAX_LAYOUT_BREAKPOINT - remainingLayouts, Math.max(previousBreakpoint + 1, layout.breakpoint));
+    const role: LayoutRole = index === 0 ? "mobile" : index === orderedLayouts.length - 1 ? "base" : "custom";
+    previousBreakpoint = breakpoint;
+    return { ...layout, breakpoint, role };
+  });
+};
diff --git a/packages/definitions/src/docs/index.ts b/packages/definitions/src/docs/index.ts
index af6731239..50684f3ad 100644
--- a/packages/definitions/src/docs/index.ts
+++ b/packages/definitions/src/docs/index.ts
@@ -1,6 +1,15 @@
 import type { HomarrDocumentationPath } from "./homarr-docs-sitemap";
 
-const documentationBaseUrl = "https://homarr.dev";
+const defaultDocumentationBaseUrl = "https://homarr.dev";
+
+const getDocumentationBaseUrl = () => {
+  const browserValue =
+    typeof document === "undefined"
+      ? undefined
+      : document.querySelector<HTMLMetaElement>('meta[name="homarr-website-url"]')?.content;
+  const serverValue = typeof process === "undefined" ? undefined : process.env.HOMARR_WEBSITE_URL;
+  return (browserValue || serverValue || defaultDocumentationBaseUrl).replace(/\/+$/u, "");
+};
 
 // Please use the method so the path can be checked!
 export const createDocumentationLink = (
@@ -8,7 +17,7 @@ export const createDocumentationLink = (
   hashTag?: `#${string}`,
   queryParams?: Record<string, string>,
 ) => {
-  const url = `${documentationBaseUrl}${path}`;
+  const url = `${getDocumentationBaseUrl()}${path}`;
   const params = queryParams ? `?${new URLSearchParams(queryParams)}` : "";
   return `${url}${params}${hashTag ?? ""}`;
 };
diff --git a/packages/definitions/src/section.ts b/packages/definitions/src/section.ts
index f61bd984f..ac820c840 100644
--- a/packages/definitions/src/section.ts
+++ b/packages/definitions/src/section.ts
@@ -1,2 +1,33 @@
-export const sectionKinds = ["category", "empty", "dynamic"] as const;
+export const sectionKinds = ["empty", "container"] as const;
 export type SectionKind = (typeof sectionKinds)[number];
+
+export const boardLanes = ["left", "main", "right"] as const;
+export type BoardLane = (typeof boardLanes)[number];
+
+export const rootSectionOffsets = {
+  left: -1,
+  main: 0,
+  right: 1,
+} as const satisfies Record<BoardLane, number>;
+
+export const getRootSectionLane = (xOffset: number | null | undefined): BoardLane => {
+  if (xOffset === rootSectionOffsets.left) return "left";
+  if (xOffset === rootSectionOffsets.right) return "right";
+  return "main";
+};
+
+export const getBoardLaneColumnCount = (
+  layout: {
+    columnCount: number;
+    leftGutterColumnCount?: number | null;
+    rightGutterColumnCount?: number | null;
+  },
+  lane: BoardLane,
+) => {
+  const total = Math.max(1, Math.floor(layout.columnCount));
+  const left = Math.min(Math.max(0, Math.floor(layout.leftGutterColumnCount ?? 0)), total - 1);
+  const right = Math.min(Math.max(0, Math.floor(layout.rightGutterColumnCount ?? 0)), total - left - 1);
+  if (lane === "left") return left;
+  if (lane === "right") return right;
+  return total - left - right;
+};
diff --git a/packages/definitions/src/test/docs.spec.ts b/packages/definitions/src/test/docs.spec.ts
index d7690f22e..86d19cc74 100644
--- a/packages/definitions/src/test/docs.spec.ts
+++ b/packages/definitions/src/test/docs.spec.ts
@@ -30,6 +30,21 @@ describe("createDocumentationLink should generate correct URLs", () => {
 });
 
 describe("createDocumentationLink parameter validation", () => {
+  test("uses the server-rendered website URL at runtime", () => {
+    const meta = document.createElement("meta");
+    meta.name = "homarr-website-url";
+    meta.content = "https://docs.example.com/base/";
+    document.head.append(meta);
+
+    try {
+      expect(createDocumentationLink("/docs/getting-started")).toBe(
+        "https://docs.example.com/base/docs/getting-started",
+      );
+    } finally {
+      meta.remove();
+    }
+  });
+
   test("should work with only path parameter", () => {
     const result = createDocumentationLink("/docs/getting-started");
     expect(result).toBe("https://homarr.dev/docs/getting-started");
diff --git a/packages/definitions/src/widget-integration-map.ts b/packages/definitions/src/widget-integration-map.ts
index 0f0e9eaf0..f0e659fd0 100644
--- a/packages/definitions/src/widget-integration-map.ts
+++ b/packages/definitions/src/widget-integration-map.ts
@@ -44,12 +44,12 @@ export const widgetIntegrationSupport: Partial<Record<WidgetKind, readonly Integ
   speedtestTracker: ["speedtestTracker"],
   uptimeKuma: ["uptimeKuma"],
   audioStats: ["navidrome", "audiobookshelf"],
+  umami: ["umami"],
   vpn: getIntegrationKindsByCategory("vpn"),
+  ups: getIntegrationKindsByCategory("ups"),
   archiveTeamWarrior: ["archiveTeamWarrior"],
   anchorNote: ["anchor"],
   traefik: ["traefik"],
-  umami: ["umami"],
-  ups: getIntegrationKindsByCategory("ups"),
 };
 
 /** Widgets that remain useful without a configured integration. */
diff --git a/packages/integrations/src/audiobookshelf/audiobookshelf-integration.ts b/packages/integrations/src/audiobookshelf/audiobookshelf-integration.ts
index 441d7fe3a..2dee921d0 100644
--- a/packages/integrations/src/audiobookshelf/audiobookshelf-integration.ts
+++ b/packages/integrations/src/audiobookshelf/audiobookshelf-integration.ts
@@ -54,6 +54,7 @@ export class AudiobookshelfIntegration extends Integration {
 
     const statsByLibrary = await Promise.all(
       libraries.map(async (library) => ({
+        library,
         mediaType: library.mediaType,
         stats: await this.getLibraryStatsAsync(library.id),
       })),
@@ -75,6 +76,14 @@ export class AudiobookshelfIntegration extends Integration {
       totalPodcasts: counts.totalPodcasts,
       totalListeningTimeSeconds: listeningStats.totalTime,
       activeSessions,
+      libraries: statsByLibrary.map(({ library, stats }) => ({
+        id: library.id,
+        name: library.name,
+        mediaType: library.mediaType,
+        totalItems: stats.totalItems,
+        totalDurationSeconds: stats.totalDuration ?? null,
+        totalSizeBytes: stats.totalSize ?? null,
+      })),
     };
   }
 
diff --git a/packages/integrations/src/audiobookshelf/audiobookshelf-types.ts b/packages/integrations/src/audiobookshelf/audiobookshelf-types.ts
index 495a24c08..4c853c139 100644
--- a/packages/integrations/src/audiobookshelf/audiobookshelf-types.ts
+++ b/packages/integrations/src/audiobookshelf/audiobookshelf-types.ts
@@ -30,6 +30,14 @@ export interface AudiobookshelfDashboardData {
   totalPodcasts: number;
   totalListeningTimeSeconds: number;
   activeSessions: number;
+  libraries?: {
+    id: string;
+    name: string;
+    mediaType: "book" | "podcast";
+    totalItems: number;
+    totalDurationSeconds: number | null;
+    totalSizeBytes: number | null;
+  }[];
 }
 
 export type AudiobookshelfLibrary = z.infer<typeof audiobookshelfLibrarySchema>;
diff --git a/packages/integrations/src/immich/immich-integration.ts b/packages/integrations/src/immich/immich-integration.ts
index 9496482d6..ce4892d10 100644
--- a/packages/integrations/src/immich/immich-integration.ts
+++ b/packages/integrations/src/immich/immich-integration.ts
@@ -36,7 +36,6 @@ export interface ImmichAlbum {
 
 export interface ImmichAsset {
   id: string;
-  originalPath: string;
   thumbhash: string | null;
   fileModifiedAt: string;
   fileCreatedAt: string;
@@ -156,7 +155,6 @@ export class ImmichIntegration extends Integration {
           thumbhash: asset.thumbhash,
           fileCreatedAt: asset.fileCreatedAt,
           fileModifiedAt: asset.fileModifiedAt,
-          originalPath: asset.originalPath,
           updatedAt: asset.updatedAt,
           publicLink,
         };
diff --git a/packages/integrations/src/index.ts b/packages/integrations/src/index.ts
index f172cec36..71b0652fc 100644
--- a/packages/integrations/src/index.ts
+++ b/packages/integrations/src/index.ts
@@ -61,6 +61,7 @@ export type { SystemHealthMonitoring } from "./interfaces/health-monitoring/heal
 export { UpstreamMediaRequestStatus } from "./interfaces/media-requests/media-request-types";
 export type { MediaRequestList, MediaRequestStats } from "./interfaces/media-requests/media-request-types";
 export type { StreamSession } from "./interfaces/media-server/media-server-types";
+export type { EntityState } from "./interfaces/smart-home/smart-home-types";
 export type {
   TdarrQueue,
   TdarrPieSegment,
diff --git a/packages/integrations/src/interfaces/smart-home/smart-home-types.ts b/packages/integrations/src/interfaces/smart-home/smart-home-types.ts
index efc113dc7..2208c4953 100644
--- a/packages/integrations/src/interfaces/smart-home/smart-home-types.ts
+++ b/packages/integrations/src/interfaces/smart-home/smart-home-types.ts
@@ -1,4 +1,4 @@
-interface EntityState {
+export interface EntityState {
   attributes: Record<string, string | number | boolean | null | (string | number)[]>;
   entity_id: string;
   last_changed: Date;
diff --git a/packages/integrations/src/overseerr/overseerr-integration.spec.ts b/packages/integrations/src/overseerr/overseerr-integration.spec.ts
new file mode 100644
index 000000000..2f021f608
--- /dev/null
+++ b/packages/integrations/src/overseerr/overseerr-integration.spec.ts
@@ -0,0 +1,39 @@
+import { Response } from "undici";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
+
+import { OverseerrIntegration } from "./overseerr-integration";
+
+vi.mock("@homarr/core/infrastructure/http", () => ({ fetchWithTrustedCertificatesAsync: vi.fn() }));
+
+const mockFetch = vi.mocked(fetchWithTrustedCertificatesAsync);
+const integration = new OverseerrIntegration({
+  id: "overseerr-1",
+  name: "Overseerr",
+  url: "https://overseerr.example.com",
+  externalUrl: null,
+  decryptedSecrets: [{ kind: "apiKey", value: "test-key" }],
+});
+
+describe("Overseerr media request actions", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it.each([
+    ["approve", () => integration.approveRequestAsync(42)],
+    ["decline", () => integration.declineRequestAsync(42)],
+  ])("rejects %s when Overseerr returns a non-success response", async (_action, run) => {
+    mockFetch.mockResolvedValue(new Response(null, { status: 500 }));
+
+    await expect(run()).rejects.toMatchObject({
+      name: "IntegrationResponseError",
+      message: "Response from integration did not indicate success",
+      cause: {
+        name: "ResponseError",
+        message: "Response did not indicate success",
+        statusCode: 500,
+      },
+    });
+    expect(mockFetch).toHaveBeenCalledOnce();
+  });
+});
diff --git a/packages/integrations/src/overseerr/overseerr-integration.ts b/packages/integrations/src/overseerr/overseerr-integration.ts
index 10aa73114..f36e46745 100644
--- a/packages/integrations/src/overseerr/overseerr-integration.ts
+++ b/packages/integrations/src/overseerr/overseerr-integration.ts
@@ -1,8 +1,8 @@
 import { z } from "zod/v4";
 
+import { ResponseError } from "@homarr/common/server";
 import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
 import { createLogger } from "@homarr/core/infrastructure/logs";
-import { ErrorWithMetadata } from "@homarr/core/infrastructure/logs/error";
 
 import type { IntegrationTestingInput } from "../base/integration";
 import { Integration } from "../base/integration";
@@ -259,49 +259,27 @@ export class OverseerrIntegration
 
   public async approveRequestAsync(requestId: number): Promise<void> {
     logger.info("Approving media request", { requestId, integration: this.integration.name });
-    await fetchWithTrustedCertificatesAsync(this.url(`/api/v1/request/${requestId}/approve`), {
+    const response = await fetchWithTrustedCertificatesAsync(this.url(`/api/v1/request/${requestId}/approve`), {
       method: "POST",
       headers: {
         "X-Api-Key": this.getSecretValue("apiKey"),
       },
-    }).then((response) => {
-      if (!response.ok) {
-        logger.error(
-          new ErrorWithMetadata("Failed to approve media request", {
-            requestId,
-            integration: this.integration.name,
-            reason: `${response.status} ${response.statusText}`,
-            url: response.url,
-          }),
-        );
-      }
-
-      logger.info("Successfully approved media request", { requestId, integration: this.integration.name });
     });
+    if (!response.ok) throw new ResponseError(response);
+    logger.info("Successfully approved media request", { requestId, integration: this.integration.name });
   }
 
   public async declineRequestAsync(requestId: number): Promise<void> {
     logger.info("Declining media request", { requestId, integration: this.integration.name });
 
-    await fetchWithTrustedCertificatesAsync(this.url(`/api/v1/request/${requestId}/decline`), {
+    const response = await fetchWithTrustedCertificatesAsync(this.url(`/api/v1/request/${requestId}/decline`), {
       method: "POST",
       headers: {
         "X-Api-Key": this.getSecretValue("apiKey"),
       },
-    }).then((response) => {
-      if (!response.ok) {
-        logger.error(
-          new ErrorWithMetadata("Failed to decline media request", {
-            requestId,
-            integration: this.integration.name,
-            reason: `${response.status} ${response.statusText}`,
-            url: response.url,
-          }),
-        );
-      }
-
-      logger.info("Successfully declined media request", { requestId, integration: this.integration.name });
     });
+    if (!response.ok) throw new ResponseError(response);
+    logger.info("Successfully declined media request", { requestId, integration: this.integration.name });
   }
 
   private async getItemInformationAsync(id: number, type: MediaRequest["type"]): Promise<MediaInformation> {
diff --git a/packages/integrations/src/patchmon/patchmon-types.ts b/packages/integrations/src/patchmon/patchmon-types.ts
index 1f912d6c9..87017acdf 100644
--- a/packages/integrations/src/patchmon/patchmon-types.ts
+++ b/packages/integrations/src/patchmon/patchmon-types.ts
@@ -52,9 +52,9 @@ const mapOsDistributionEntry = (
   osVersion: entry.os_version,
 });
 
-export const parsePatchMonStatsResponseAsync = async (
-  response: { json: () => Promise<unknown> },
-): Promise<z.infer<typeof patchmonStatsResponseSchema>> => {
+export const parsePatchMonStatsResponseAsync = async (response: {
+  json: () => Promise<unknown>;
+}): Promise<z.infer<typeof patchmonStatsResponseSchema>> => {
   let json: unknown;
   try {
     json = await response.json();
@@ -82,7 +82,5 @@ export const mapPatchMonStats = (data: z.infer<typeof patchmonStatsResponseSchem
   totalOutdatedPackages: data.total_outdated_packages,
   totalRepos: data.total_repos,
   lastUpdated: data.last_updated,
-  osDistribution: [...data.os_distribution]
-    .map(mapOsDistributionEntry)
-    .sort((a, b) => b.count - a.count),
+  osDistribution: [...data.os_distribution].map(mapOsDistributionEntry).toSorted((a, b) => b.count - a.count),
 });
diff --git a/packages/integrations/src/plex/plex-integration.ts b/packages/integrations/src/plex/plex-integration.ts
index 6b772a589..cd4e9d6e9 100644
--- a/packages/integrations/src/plex/plex-integration.ts
+++ b/packages/integrations/src/plex/plex-integration.ts
@@ -97,8 +97,8 @@ export class PlexIntegration extends Integration implements IMediaServerIntegrat
         const isAudioDirect = isStreamDirect(transcodeElement?.$.audioDecision);
         const containerChanged = Boolean(
           transcodeElement?.$.container &&
-            mediaInfoElement?.$.container &&
-            transcodeElement.$.container !== mediaInfoElement.$.container,
+          mediaInfoElement?.$.container &&
+          transcodeElement.$.container !== mediaInfoElement.$.container,
         );
         const bitrateKbps =
           parseOptionalNumber(sessionElement?.$.bandwidth) ?? parseOptionalNumber(mediaInfoElement?.$.bitrate);
diff --git a/packages/integrations/src/plex/test/plex-integration.spec.ts b/packages/integrations/src/plex/test/plex-integration.spec.ts
index 64e046256..2a7284b64 100644
--- a/packages/integrations/src/plex/test/plex-integration.spec.ts
+++ b/packages/integrations/src/plex/test/plex-integration.spec.ts
@@ -137,4 +137,4 @@ describe("PlexIntegration.getMediaReleasesAsync", () => {
       },
     ]);
   });
-});
\ No newline at end of file
+});
diff --git a/packages/integrations/src/traefik/traefik-bounds.spec.ts b/packages/integrations/src/traefik/traefik-bounds.spec.ts
new file mode 100644
index 000000000..1f14aff89
--- /dev/null
+++ b/packages/integrations/src/traefik/traefik-bounds.spec.ts
@@ -0,0 +1,12 @@
+import { Response } from "undici";
+import { describe, expect, it } from "vitest";
+
+import { readBoundedTraefikJsonAsync } from "./traefik-bounds";
+
+describe("readBoundedTraefikJsonAsync", () => {
+  it("rejects a response that exceeds its byte budget", async () => {
+    const response = new Response(JSON.stringify({ value: "x".repeat(100) }));
+
+    await expect(readBoundedTraefikJsonAsync(response, 32)).rejects.toThrow("exceeds 32 bytes");
+  });
+});
diff --git a/packages/integrations/src/traefik/traefik-bounds.ts b/packages/integrations/src/traefik/traefik-bounds.ts
new file mode 100644
index 000000000..99a6c8b1b
--- /dev/null
+++ b/packages/integrations/src/traefik/traefik-bounds.ts
@@ -0,0 +1,12 @@
+import type { Response } from "undici";
+
+import { readBoundedJsonResponseAsync as readBoundedJsonResponse } from "@homarr/common/server";
+
+export const MAX_TRAEFIK_RESPONSE_BYTES = 2 * 1024 * 1024;
+
+export async function readBoundedTraefikJsonAsync(
+  response: Response,
+  maxBytes = MAX_TRAEFIK_RESPONSE_BYTES,
+): Promise<unknown> {
+  return await readBoundedJsonResponse(response, maxBytes, "Traefik response");
+}
diff --git a/packages/integrations/src/traefik/traefik-integration.spec.ts b/packages/integrations/src/traefik/traefik-integration.spec.ts
new file mode 100644
index 000000000..ced92e33a
--- /dev/null
+++ b/packages/integrations/src/traefik/traefik-integration.spec.ts
@@ -0,0 +1,43 @@
+import { Response } from "undici";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
+
+import { TraefikIntegration } from "./traefik-integration";
+
+vi.mock("@homarr/core/infrastructure/http", () => ({ fetchWithTrustedCertificatesAsync: vi.fn() }));
+
+const mockFetch = vi.mocked(fetchWithTrustedCertificatesAsync);
+const integration = new TraefikIntegration({
+  id: "traefik-1",
+  name: "Traefik",
+  url: "https://traefik.example.com",
+  externalUrl: null,
+  decryptedSecrets: [],
+});
+
+describe("TraefikIntegration response bounds", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockFetch.mockImplementation((url) => {
+      const path = new URL(url.toString()).pathname;
+      if (path === "/api/version") return Promise.resolve(jsonResponse({ Version: "3.0.0" }));
+      if (path === "/api/http/routers") {
+        return Promise.resolve(
+          jsonResponse(Array.from({ length: 250 }, (_, index) => ({ name: `router-${index}`, status: "enabled" }))),
+        );
+      }
+      return Promise.resolve(jsonResponse([]));
+    });
+  });
+
+  it("caps detailed resource allocation while retaining bounded summary counts", async () => {
+    const result = await integration.getDashboardDataAsync();
+
+    expect(result.resources).toHaveLength(200);
+    expect(result.resources.at(-1)?.name).toBe("router-199");
+    expect(result.http.routers.total).toBe(250);
+  });
+});
+
+const jsonResponse = (body: unknown) => new Response(JSON.stringify(body), { status: 200 });
diff --git a/packages/integrations/src/traefik/traefik-integration.ts b/packages/integrations/src/traefik/traefik-integration.ts
index 0dc8cf57f..2e0e72b4c 100644
--- a/packages/integrations/src/traefik/traefik-integration.ts
+++ b/packages/integrations/src/traefik/traefik-integration.ts
@@ -4,10 +4,12 @@ import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/h
 import type { IntegrationTestingInput } from "../base/integration";
 import { Integration } from "../base/integration";
 import type { TestingResult } from "../base/test-connection/test-connection-service";
+import { readBoundedTraefikJsonAsync } from "./traefik-bounds";
 import type {
   TraefikDashboardData,
   TraefikProtocolSummary,
   TraefikResource,
+  TraefikResourceDetail,
   TraefikResourceStatus,
   TraefikResourceSummary,
 } from "./traefik-types";
@@ -24,6 +26,8 @@ type ResourcePath =
   | "/api/udp/services"
   | "/api/entrypoints";
 
+const MAX_RESOURCE_DETAILS = 200;
+
 export class TraefikIntegration extends Integration {
   protected async testingAsync(input: IntegrationTestingInput): Promise<TestingResult> {
     const response = await input.fetchAsync(this.url("/api/version"), { headers: this.getAuthHeaders() });
@@ -32,7 +36,7 @@ export class TraefikIntegration extends Integration {
       throw new ResponseError(response);
     }
 
-    traefikVersionSchema.parse(await response.json());
+    traefikVersionSchema.parse(await readBoundedTraefikJsonAsync(response));
     return { success: true };
   }
 
@@ -60,6 +64,38 @@ export class TraefikIntegration extends Integration {
       this.getResourcesAsync("/api/udp/routers"),
       this.getResourcesAsync("/api/udp/services"),
     ]);
+
+    const allResults = [
+      versionResult,
+      entryPointsResult,
+      httpRoutersResult,
+      httpServicesResult,
+      httpMiddlewaresResult,
+      tcpRoutersResult,
+      tcpServicesResult,
+      tcpMiddlewaresResult,
+      udpRoutersResult,
+      udpServicesResult,
+    ];
+    if (allResults.every((result) => result.status === "rejected")) {
+      throw versionResult.status === "rejected" ? versionResult.reason : new Error("Every Traefik endpoint failed");
+    }
+
+    const endpointResults = [
+      ["version", versionResult],
+      ["entrypoints", entryPointsResult],
+      ["http/routers", httpRoutersResult],
+      ["http/services", httpServicesResult],
+      ["http/middlewares", httpMiddlewaresResult],
+      ["tcp/routers", tcpRoutersResult],
+      ["tcp/services", tcpServicesResult],
+      ["tcp/middlewares", tcpMiddlewaresResult],
+      ["udp/routers", udpRoutersResult],
+      ["udp/services", udpServicesResult],
+    ] as const;
+    const failedEndpoints = endpointResults
+      .filter(([, result]) => result.status === "rejected")
+      .map(([endpoint]) => endpoint);
     const version = versionResult.status === "fulfilled" ? versionResult.value : null;
     const entryPoints = entryPointsResult.status === "fulfilled" ? entryPointsResult.value : [];
     const httpRouters = httpRoutersResult.status === "fulfilled" ? httpRoutersResult.value : [];
@@ -71,9 +107,30 @@ export class TraefikIntegration extends Integration {
     const udpRouters = udpRoutersResult.status === "fulfilled" ? udpRoutersResult.value : [];
     const udpServices = udpServicesResult.status === "fulfilled" ? udpServicesResult.value : [];
 
+    const resources: TraefikResourceDetail[] = [];
+    const resourceGroups = [
+      ["http", "router", httpRouters],
+      ["http", "service", httpServices],
+      ["http", "middleware", httpMiddlewares],
+      ["tcp", "router", tcpRouters],
+      ["tcp", "service", tcpServices],
+      ["tcp", "middleware", tcpMiddlewares],
+      ["udp", "router", udpRouters],
+      ["udp", "service", udpServices],
+    ] as const;
+    for (const [protocol, type, entries] of resourceGroups) {
+      const remaining = MAX_RESOURCE_DETAILS - resources.length;
+      if (remaining === 0) break;
+      resources.push(...this.createResourceDetails(protocol, type, entries.slice(0, remaining)));
+    }
+
     return {
       version,
-      entryPoints: entryPoints.map((entryPoint, index) => entryPoint.name ?? `entrypoint-${index + 1}`),
+      entryPoints: entryPoints
+        .slice(0, MAX_RESOURCE_DETAILS)
+        .map((entryPoint, index) => entryPoint.name ?? `entrypoint-${index + 1}`),
+      resources,
+      failedEndpoints,
       http: this.createProtocolSummary(httpRouters, httpServices, httpMiddlewares),
       tcp: this.createProtocolSummary(tcpRouters, tcpServices, tcpMiddlewares),
       udp: {
@@ -83,15 +140,29 @@ export class TraefikIntegration extends Integration {
     };
   }
 
+  private createResourceDetails(
+    protocol: TraefikResourceDetail["protocol"],
+    type: TraefikResourceDetail["type"],
+    resources: TraefikResource[],
+  ): TraefikResourceDetail[] {
+    return resources.map((resource, index) => ({
+      protocol,
+      type,
+      name: resource.name ?? `${type}-${index + 1}`,
+      provider: resource.provider ?? null,
+      status: this.normalizeStatus(resource.status),
+    }));
+  }
+
   private async getVersionAsync() {
     const response = await this.fetchOkAsync("/api/version");
-    const version = traefikVersionSchema.parse(await response.json());
+    const version = traefikVersionSchema.parse(await readBoundedTraefikJsonAsync(response));
     return version.Version ?? null;
   }
 
   private async getResourcesAsync(path: ResourcePath) {
     const response = await this.fetchOkAsync(path);
-    return traefikResourcesSchema.parse(await response.json());
+    return traefikResourcesSchema.parse(await readBoundedTraefikJsonAsync(response));
   }
 
   private createProtocolSummary(
@@ -137,6 +208,7 @@ export class TraefikIntegration extends Integration {
     const response = await fetchWithTrustedCertificatesAsync(this.url(path), {
       headers: this.getAuthHeaders(),
       timeout: 10_000,
+      bodyTimeout: 10_000,
     });
 
     if (!response.ok) {
diff --git a/packages/integrations/src/traefik/traefik-types.ts b/packages/integrations/src/traefik/traefik-types.ts
index 5874ef41b..188941465 100644
--- a/packages/integrations/src/traefik/traefik-types.ts
+++ b/packages/integrations/src/traefik/traefik-types.ts
@@ -31,9 +31,19 @@ export interface TraefikProtocolSummary {
   middlewares: TraefikResourceSummary;
 }
 
+export interface TraefikResourceDetail {
+  protocol: "http" | "tcp" | "udp";
+  type: "router" | "service" | "middleware";
+  name: string;
+  provider: string | null;
+  status: TraefikResourceStatus;
+}
+
 export interface TraefikDashboardData {
   version: string | null;
   entryPoints: string[];
+  resources: TraefikResourceDetail[];
+  failedEndpoints: string[];
   http: TraefikProtocolSummary;
   tcp: TraefikProtocolSummary;
   udp: Omit<TraefikProtocolSummary, "middlewares">;
diff --git a/packages/modals/src/confirm-modal.tsx b/packages/modals/src/confirm-modal.tsx
index 9f3f2b4ac..efea408e7 100644
--- a/packages/modals/src/confirm-modal.tsx
+++ b/packages/modals/src/confirm-modal.tsx
@@ -85,7 +85,13 @@ export const ConfirmModal = createModal<Omit<ConfirmModalProps, "title">>(({ act
           {cancelProps?.children ?? translateIfNecessary(t, cancelLabel)}
         </Button>
 
-        <Button data-autofocus {...confirmProps} onClick={handleConfirm} color="red.9" loading={loading}>
+        <Button
+          data-autofocus
+          {...confirmProps}
+          onClick={handleConfirm}
+          color={confirmProps?.color ?? "red.9"}
+          loading={loading}
+        >
           {confirmProps?.children ?? translateIfNecessary(t, confirmLabel)}
         </Button>
       </Group>
diff --git a/packages/modals/src/index.tsx b/packages/modals/src/index.tsx
index 02bc4cff4..0071185a8 100644
--- a/packages/modals/src/index.tsx
+++ b/packages/modals/src/index.tsx
@@ -125,6 +125,7 @@ const ActiveModal = ({ modal, state, handleCloseModal }: ActiveModalProps) => {
 
 interface OpenModalOptions {
   keepMounted?: boolean;
+  onClose?: () => void;
   title?: stringOrTranslation;
 }
 
diff --git a/packages/old-import/src/import-sections.ts b/packages/old-import/src/import-sections.ts
deleted file mode 100644
index 78a1b1619..000000000
--- a/packages/old-import/src/import-sections.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { createId } from "@homarr/common";
-import { createLogger } from "@homarr/core/infrastructure/logs";
-import type { Database } from "@homarr/db";
-import { sections } from "@homarr/db/schema";
-import type { OldmarrConfig } from "@homarr/old-schema";
-
-const logger = createLogger({ module: "importSections" });
-
-export const insertSectionsAsync = async (
-  db: Database,
-  categories: OldmarrConfig["categories"],
-  wrappers: OldmarrConfig["wrappers"],
-  boardId: string,
-) => {
-  logger.info("Importing old homarr sections", { boardId, categories: categories.length, wrappers: wrappers.length });
-
-  const wrapperIds = wrappers.map((section) => section.id);
-  const categoryIds = categories.map((section) => section.id);
-  const idMaps = new Map<string, string>([...wrapperIds, ...categoryIds].map((id) => [id, createId()]));
-
-  const wrappersToInsert = wrappers.map((section) => ({
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    id: idMaps.get(section.id)!,
-    boardId,
-    xOffset: 0,
-    yOffset: section.position,
-    kind: "empty" as const,
-  }));
-
-  const categoriesToInsert = categories.map((section) => ({
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    id: idMaps.get(section.id)!,
-    boardId,
-    xOffset: 0,
-    yOffset: section.position,
-    kind: "category" as const,
-    name: section.name,
-  }));
-
-  if (wrappersToInsert.length > 0) {
-    await db.insert(sections).values(wrappersToInsert);
-  }
-
-  if (categoriesToInsert.length > 0) {
-    await db.insert(sections).values(categoriesToInsert);
-  }
-
-  logger.info("Imported sections", { count: wrappersToInsert.length + categoriesToInsert.length });
-
-  return idMaps;
-};
diff --git a/packages/old-import/src/import/collections/board-collection.ts b/packages/old-import/src/import/collections/board-collection.ts
index 65bfb37f0..b7b116ac6 100644
--- a/packages/old-import/src/import/collections/board-collection.ts
+++ b/packages/old-import/src/import/collections/board-collection.ts
@@ -1,6 +1,7 @@
 import { createId } from "@homarr/common";
 import { createLogger } from "@homarr/core/infrastructure/logs";
 import { createDbInsertCollectionForTransaction } from "@homarr/db/collection";
+import { normalizeBoardLayoutRoles } from "@homarr/definitions";
 import type { BoardSize, OldmarrConfig } from "@homarr/old-schema";
 import { boardSizes, getBoardSizeName } from "@homarr/old-schema";
 
@@ -12,7 +13,7 @@ import { mapColumnCount } from "../../mappers/map-column-count";
 import { moveWidgetsAndAppsIfMerge } from "../../move-widgets-and-apps-merge";
 import { prepareItems } from "../../prepare/prepare-items";
 import type { prepareMultipleImports } from "../../prepare/prepare-multiple";
-import { prepareSections } from "../../prepare/prepare-sections";
+import { placePreparedSections, prepareSections } from "../../prepare/prepare-sections";
 import type { InitialOldmarrImportSettings } from "../../settings";
 
 const logger = createLogger({ module: "boardCollection" });
@@ -26,6 +27,7 @@ export const createBoardInsertCollection = (
     "boards",
     "layouts",
     "sections",
+    "sectionLayouts",
     "items",
     "itemLayouts",
   ]);
@@ -87,21 +89,23 @@ export const createBoardInsertCollection = (
       {} as Record<BoardSize, string>,
     );
 
-    insertCollection.layouts.push(
-      ...boardSizes.map((size) => ({
+    const importedLayouts = normalizeBoardLayoutRoles(
+      boardSizes.map((size) => ({
         id: layoutMapping[size],
         boardId: mappedBoard.id,
         columnCount: mapColumnCount(board.config.settings.customization.gridstack, size),
+        leftGutterColumnCount: 0,
+        rightGutterColumnCount: 0,
         breakpoint: mapBreakpoint(size),
         name: getBoardSizeName(size),
       })),
     );
 
+    insertCollection.layouts.push(...importedLayouts);
+
     const preparedSections = prepareSections(mappedBoard.id, { wrappers, categories });
 
-    for (const section of preparedSections.values()) {
-      insertCollection.sections.push(section);
-    }
+    insertCollection.sections.push(...preparedSections.sections);
     logger.debug("Added sections to board insert collection", { count: insertCollection.sections.length });
 
     const preparedItems = prepareItems(
@@ -111,10 +115,11 @@ export const createBoardInsertCollection = (
         settings: board.config.settings,
       },
       appsMap,
-      preparedSections,
+      preparedSections.byLegacyId,
       layoutMapping,
       mappedBoard.id,
     );
+    insertCollection.sectionLayouts.push(...placePreparedSections(preparedSections, preparedItems, importedLayouts));
     preparedItems.forEach(({ layouts, ...item }) => {
       insertCollection.items.push(item);
       insertCollection.itemLayouts.push(...layouts);
diff --git a/packages/old-import/src/mappers/map-section.ts b/packages/old-import/src/mappers/map-section.ts
index d27a8100d..f69b6b4e8 100644
--- a/packages/old-import/src/mappers/map-section.ts
+++ b/packages/old-import/src/mappers/map-section.ts
@@ -1,24 +1,38 @@
+import { stringify } from "superjson";
+
 import { createId } from "@homarr/common";
 import type { InferInsertModel } from "@homarr/db";
 import type { sections } from "@homarr/db/schema";
-import type { OldmarrCategorySection, OldmarrEmptySection } from "@homarr/old-schema";
+import { emptySuperJSON, rootSectionOffsets } from "@homarr/definitions";
+import type { OldmarrCategorySection } from "@homarr/old-schema";
+import { containerSectionOptionsSchema } from "@homarr/validation/shared";
 
-export const mapCategorySection = (
+export const mapLegacyCategoryContainer = (
   boardId: string,
   category: OldmarrCategorySection,
 ): InferInsertModel<typeof sections> => ({
   id: createId(),
   boardId,
-  kind: "category",
-  xOffset: 0,
-  yOffset: category.position,
-  name: category.name,
+  kind: "container",
+  xOffset: null,
+  yOffset: null,
+  name: null,
+  options: stringify(
+    containerSectionOptionsSchema.parse({
+      title: category.name.slice(0, 64),
+      showLabel: true,
+      collapsible: true,
+      showOpenAll: true,
+    }),
+  ),
 });
 
-export const mapEmptySection = (boardId: string, wrapper: OldmarrEmptySection): InferInsertModel<typeof sections> => ({
+export const mapMainRootSection = (boardId: string): InferInsertModel<typeof sections> => ({
   id: createId(),
   boardId,
   kind: "empty",
-  xOffset: 0,
-  yOffset: wrapper.position,
+  xOffset: rootSectionOffsets.main,
+  yOffset: 0,
+  name: null,
+  options: emptySuperJSON,
 });
diff --git a/packages/old-import/src/prepare/prepare-items.ts b/packages/old-import/src/prepare/prepare-items.ts
index 0f32d6b00..61e2b5793 100644
--- a/packages/old-import/src/prepare/prepare-items.ts
+++ b/packages/old-import/src/prepare/prepare-items.ts
@@ -1,9 +1,9 @@
+import { generateResponsiveGridFor } from "@homarr/common";
+import type { GridAlgorithmItem } from "@homarr/common";
 import { createLogger } from "@homarr/core/infrastructure/logs";
 import type { BoardSize, OldmarrApp, OldmarrConfig, OldmarrWidget, SizedShape } from "@homarr/old-schema";
 import { boardSizes } from "@homarr/old-schema";
 
-import type { GridAlgorithmItem } from "../../../api/src/router/board/grid-algorithm";
-import { generateResponsiveGridFor } from "../../../api/src/router/board/grid-algorithm";
 import { mapColumnCount } from "../mappers/map-column-count";
 import { mapApp, mapWidget } from "../mappers/map-item";
 
diff --git a/packages/old-import/src/prepare/prepare-sections.spec.ts b/packages/old-import/src/prepare/prepare-sections.spec.ts
new file mode 100644
index 000000000..df5bfceb2
--- /dev/null
+++ b/packages/old-import/src/prepare/prepare-sections.spec.ts
@@ -0,0 +1,87 @@
+import { parse } from "superjson";
+import { describe, expect, test } from "vitest";
+
+import { placePreparedSections, prepareSections } from "./prepare-sections";
+
+describe("prepareSections", () => {
+  test("maps legacy blocks into one root and durable containers", () => {
+    const prepared = prepareSections("board", {
+      categories: [{ id: "category", name: "Media", position: 1 }],
+      wrappers: [{ id: "wrapper", position: 0 }],
+    });
+    const root = prepared.sections.find((section) => section.kind === "empty");
+    const container = prepared.sections.find((section) => section.kind === "container");
+    if (!root || !container) throw new Error("Expected a root and a container");
+
+    expect(prepared.sections).toHaveLength(2);
+    expect(root).toMatchObject({ boardId: "board", xOffset: 0, yOffset: 0 });
+    expect(container).toMatchObject({ boardId: "board", xOffset: null, yOffset: null, name: null });
+    expect(parse(container.options ?? "{}")).toMatchObject({
+      title: "Media",
+      showLabel: true,
+      collapsible: true,
+      showOpenAll: true,
+    });
+    expect(prepared.byLegacyId.get("category")?.id).toBe(container.id);
+    expect(prepared.byLegacyId.get("wrapper")?.id).not.toBe(root.id);
+  });
+
+  test("places root content and containers in legacy order for every layout", () => {
+    const prepared = prepareSections("board", {
+      categories: [{ id: "category", name: "Media", position: 1 }],
+      wrappers: [{ id: "wrapper", position: 0 }],
+    });
+    const wrapperPlacementId = prepared.byLegacyId.get("wrapper")?.id;
+    const containerId = prepared.byLegacyId.get("category")?.id;
+    if (!wrapperPlacementId || !containerId) throw new Error("Expected mapped section ids");
+
+    const preparedItems = [
+      {
+        layouts: [
+          {
+            itemId: "root-item",
+            layoutId: "layout",
+            sectionId: wrapperPlacementId,
+            xOffset: 1,
+            yOffset: 0,
+            width: 2,
+            height: 2,
+          },
+        ],
+      },
+      {
+        layouts: [
+          {
+            itemId: "container-item",
+            layoutId: "layout",
+            sectionId: containerId,
+            xOffset: 0,
+            yOffset: 1,
+            width: 3,
+            height: 2,
+          },
+        ],
+      },
+    ];
+
+    const layouts = placePreparedSections(prepared, preparedItems, [{ id: "layout", columnCount: 12 }]);
+
+    expect(preparedItems[0]?.layouts[0]).toMatchObject({
+      sectionId: prepared.mainRootId,
+      xOffset: 1,
+      yOffset: 0,
+    });
+    expect(preparedItems[1]?.layouts[0]).toMatchObject({ sectionId: containerId, yOffset: 1 });
+    expect(layouts).toEqual([
+      {
+        sectionId: containerId,
+        layoutId: "layout",
+        parentSectionId: prepared.mainRootId,
+        xOffset: 0,
+        yOffset: 2,
+        width: 12,
+        height: 3,
+      },
+    ]);
+  });
+});
diff --git a/packages/old-import/src/prepare/prepare-sections.ts b/packages/old-import/src/prepare/prepare-sections.ts
index 28c8c7136..176ce4511 100644
--- a/packages/old-import/src/prepare/prepare-sections.ts
+++ b/packages/old-import/src/prepare/prepare-sections.ts
@@ -1,13 +1,115 @@
+import { createId } from "@homarr/common";
+import type { InferInsertModel } from "@homarr/db";
+import type { itemLayouts, sectionLayouts, sections } from "@homarr/db/schema";
 import type { OldmarrConfig } from "@homarr/old-schema";
 
-import { mapCategorySection, mapEmptySection } from "../mappers/map-section";
+import { mapLegacyCategoryContainer, mapMainRootSection } from "../mappers/map-section";
+
+interface PreparedSectionBlock {
+  id: string;
+  legacyId: string;
+  position: number;
+  type: "container" | "root-content";
+}
+
+interface PreparedSections {
+  blocks: PreparedSectionBlock[];
+  byLegacyId: Map<string, { id: string }>;
+  mainRootId: string;
+  sections: InferInsertModel<typeof sections>[];
+}
+
+interface PreparedItemWithLayouts {
+  layouts: InferInsertModel<typeof itemLayouts>[];
+}
 
 export const prepareSections = (
   boardId: string,
   { categories, wrappers }: Pick<OldmarrConfig, "categories" | "wrappers">,
-) =>
-  new Map(
-    categories
-      .map((category) => [category.id, mapCategorySection(boardId, category)] as const)
-      .concat(wrappers.map((wrapper) => [wrapper.id, mapEmptySection(boardId, wrapper)] as const)),
-  );
+): PreparedSections => {
+  const mainRoot = mapMainRootSection(boardId);
+  const containers = categories.map((category) => ({
+    category,
+    section: mapLegacyCategoryContainer(boardId, category),
+  }));
+  const rootContent = wrappers.map((wrapper) => ({ wrapper, id: createId() }));
+
+  return {
+    mainRootId: mainRoot.id,
+    sections: [mainRoot, ...containers.map(({ section }) => section)],
+    byLegacyId: new Map([
+      ...containers.map(({ category, section }) => [category.id, { id: section.id }] as const),
+      ...rootContent.map(({ wrapper, id }) => [wrapper.id, { id }] as const),
+    ]),
+    blocks: [
+      ...containers.map(({ category, section }) => ({
+        id: section.id,
+        legacyId: category.id,
+        position: category.position,
+        type: "container" as const,
+      })),
+      ...rootContent.map(({ wrapper, id }) => ({
+        id,
+        legacyId: wrapper.id,
+        position: wrapper.position,
+        type: "root-content" as const,
+      })),
+    ].toSorted(
+      (first, second) =>
+        first.position - second.position ||
+        (first.type === second.type
+          ? first.legacyId.localeCompare(second.legacyId)
+          : first.type === "container"
+            ? -1
+            : 1),
+    ),
+  };
+};
+
+/**
+ * Old Homarr stored each top-level block in its own coordinate space. The
+ * current model has one main root and places labelled containers inside it.
+ * This compacts those blocks in their legacy order without changing the
+ * coordinates of content inside a container.
+ */
+export const placePreparedSections = (
+  preparedSections: PreparedSections,
+  preparedItems: PreparedItemWithLayouts[],
+  preparedLayouts: { id: string; columnCount: number }[],
+): InferInsertModel<typeof sectionLayouts>[] => {
+  const result: InferInsertModel<typeof sectionLayouts>[] = [];
+
+  for (const layout of preparedLayouts) {
+    let nextRow = 0;
+
+    for (const block of preparedSections.blocks) {
+      const content = preparedItems.flatMap((item) =>
+        item.layouts.filter((itemLayout) => itemLayout.layoutId === layout.id && itemLayout.sectionId === block.id),
+      );
+      const contentHeight = Math.max(0, ...content.map((itemLayout) => itemLayout.yOffset + itemLayout.height));
+
+      if (block.type === "container") {
+        const height = Math.max(1, contentHeight);
+        result.push({
+          sectionId: block.id,
+          layoutId: layout.id,
+          parentSectionId: preparedSections.mainRootId,
+          xOffset: 0,
+          yOffset: nextRow,
+          width: layout.columnCount,
+          height,
+        });
+        nextRow += height;
+        continue;
+      }
+
+      for (const itemLayout of content) {
+        itemLayout.sectionId = preparedSections.mainRootId;
+        itemLayout.yOffset += nextRow;
+      }
+      nextRow += contentHeight;
+    }
+  }
+
+  return result;
+};
diff --git a/packages/redis/src/index.ts b/packages/redis/src/index.ts
index 02258a2e0..24f6046d5 100644
--- a/packages/redis/src/index.ts
+++ b/packages/redis/src/index.ts
@@ -6,9 +6,7 @@ export {
   handshakeAsync,
   createSubPubChannel,
   createGetSetChannel,
-  setQueryCacheAsync,
-  getQueryCacheAsync,
-  removeQueryCacheAsync,
+  createLockChannel,
   invalidateIntegrationCacheAsync,
 } from "./lib/channel";
 
diff --git a/packages/redis/src/lib/channel.spec.ts b/packages/redis/src/lib/channel.spec.ts
new file mode 100644
index 000000000..0ec39a2a5
--- /dev/null
+++ b/packages/redis/src/lib/channel.spec.ts
@@ -0,0 +1,21 @@
+// @vitest-environment node
+
+import { describe, expect, test, vi } from "vitest";
+
+vi.mock("./connection", () => ({
+  createRedisConnection: () => null,
+}));
+
+import { createLockChannel } from "./channel";
+
+describe("createLockChannel", () => {
+  test("degrades gracefully when Redis connections are disabled", async () => {
+    const lock = createLockChannel("test-lock");
+
+    const token = await lock.acquireAsync(60);
+
+    expect(token).toEqual(expect.any(String));
+    if (!token) throw new Error("Expected the fallback lock to return a token");
+    await expect(lock.releaseAsync(token)).resolves.toBeUndefined();
+  });
+});
diff --git a/packages/redis/src/lib/channel.ts b/packages/redis/src/lib/channel.ts
index 1b1e582c1..4731ccfa1 100644
--- a/packages/redis/src/lib/channel.ts
+++ b/packages/redis/src/lib/channel.ts
@@ -1,13 +1,10 @@
 import superjson from "superjson";
 
 import { createId } from "@homarr/common";
-import { createLogger } from "@homarr/core/infrastructure/logs";
 
 import { ChannelSubscriptionTracker } from "./channel-subscription-tracker";
 import { createRedisConnection } from "./connection";
 
-const logger = createLogger({ module: "redisChannel" });
-
 const publisher = createRedisConnection();
 const lastDataClient = createRedisConnection();
 
@@ -114,10 +111,11 @@ export const createGetSetChannel = <TData>(name: string) => {
      * @param options optional TTL in seconds
      */
     setAsync: async (data: TData, options?: { ttlSeconds?: number }) => {
-      await getSetClient.set(name, superjson.stringify(data));
       if (options?.ttlSeconds) {
-        await getSetClient.expire(name, options.ttlSeconds);
+        await getSetClient.set(name, superjson.stringify(data), "EX", options.ttlSeconds);
+        return;
       }
+      await getSetClient.set(name, superjson.stringify(data));
     },
     /**
      * Remove data from the channel
@@ -128,32 +126,34 @@ export const createGetSetChannel = <TData>(name: string) => {
   };
 };
 
-const queryCacheKey = (userId: string, boardId: string) => `qc:${userId}:${boardId}`;
+/**
+ * Creates a short-lived distributed lock.
+ *
+ * The token prevents a process from releasing a lock that expired and was
+ * acquired by another process in the meantime.
+ */
+export const createLockChannel = (name: string) => {
+  return {
+    acquireAsync: async (ttlSeconds: number) => {
+      const token = createId();
+      const client = getSetClient as typeof getSetClient | null;
+      if (!client) return token;
 
-export const setQueryCacheAsync = async (
-  userId: string,
-  boardId: string,
-  value: string,
-  ttlMs: number,
-  maxValueBytes: number,
-) => {
-  if (Buffer.byteLength(value, "utf8") > maxValueBytes) {
-    logger.warn("Query cache value exceeded maximum size", {
-      key: queryCacheKey(userId, boardId),
-      valueBytes: Buffer.byteLength(value, "utf8"),
-      maxValueBytes,
-    });
-    return false;
-  }
-  await getSetClient.set(queryCacheKey(userId, boardId), value, "PX", ttlMs);
-  return true;
-};
+      const result = await client.set(name, token, "EX", ttlSeconds, "NX");
+      return result === "OK" ? token : null;
+    },
+    releaseAsync: async (token: string) => {
+      const client = getSetClient as typeof getSetClient | null;
+      if (!client) return;
 
-export const getQueryCacheAsync = async (userId: string, boardId: string) =>
-  await getSetClient.get(queryCacheKey(userId, boardId));
-
-export const removeQueryCacheAsync = async (userId: string, boardId: string) => {
-  await getSetClient.del(queryCacheKey(userId, boardId));
+      await client.eval(
+        "if redis.call('get', KEYS[1]) == ARGV[1] then return redis.call('del', KEYS[1]) else return 0 end",
+        1,
+        name,
+        token,
+      );
+    },
+  };
 };
 
 export const invalidateIntegrationCacheAsync = async (integrationId: string): Promise<void> => {
diff --git a/packages/request-handler/src/immich.spec.ts b/packages/request-handler/src/immich.spec.ts
new file mode 100644
index 000000000..199341933
--- /dev/null
+++ b/packages/request-handler/src/immich.spec.ts
@@ -0,0 +1,50 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+import { immichAlbumsRequestHandler } from "./immich";
+
+const mocks = vi.hoisted(() => ({
+  createIntegrationAsync: vi.fn(),
+}));
+
+vi.mock("@homarr/integrations", () => ({
+  createIntegrationAsync: mocks.createIntegrationAsync,
+}));
+
+const integration = {
+  id: "immich-integration",
+  kind: "immich",
+} as Parameters<typeof immichAlbumsRequestHandler.handler>[0];
+
+const albums = [
+  { id: "upstream-first", albumName: "Zebra", assetCount: 1 },
+  { id: "second-b", albumName: "Beta", assetCount: 10 },
+  { id: "second-a", albumName: "Alpha", assetCount: 10 },
+];
+
+describe("immichAlbumsRequestHandler", () => {
+  beforeEach(() => {
+    immichAlbumsRequestHandler.invalidateCache();
+    mocks.createIntegrationAsync.mockReset();
+  });
+
+  test("sorts deterministically before caching a limited response", async () => {
+    const getAlbumsAsync = vi.fn().mockResolvedValue([...albums]);
+    mocks.createIntegrationAsync.mockResolvedValue({ getAlbumsAsync });
+
+    const first = await immichAlbumsRequestHandler.handler(integration, { limit: 2 }).getDataAsync();
+    const cached = await immichAlbumsRequestHandler.handler(integration, { limit: 2 }).getDataAsync();
+
+    expect(first.data.map(({ id }) => id)).toStrictEqual(["second-a", "second-b"]);
+    expect(cached.data).toStrictEqual(first.data);
+    expect(getAlbumsAsync).toHaveBeenCalledOnce();
+  });
+
+  test("preserves upstream order when no limit is requested", async () => {
+    const getAlbumsAsync = vi.fn().mockResolvedValue([...albums]);
+    mocks.createIntegrationAsync.mockResolvedValue({ getAlbumsAsync });
+
+    const result = await immichAlbumsRequestHandler.handler(integration, {}).getDataAsync();
+
+    expect(result.data).toStrictEqual(albums);
+  });
+});
diff --git a/packages/request-handler/src/immich.ts b/packages/request-handler/src/immich.ts
index a6e2a996c..bc93eb83c 100644
--- a/packages/request-handler/src/immich.ts
+++ b/packages/request-handler/src/immich.ts
@@ -22,14 +22,27 @@ export const immichAlbumsRequestHandler = createIntegrationRequestHandler<
     assetCount: number;
   }[],
   IntegrationKindByCategory<"photoService">,
-  Record<string, never>
+  { limit?: number }
 >({
-  async requestAsync(integration) {
+  async requestAsync(integration, input) {
     const integrationInstance = await createIntegrationAsync(integration);
-    return await integrationInstance.getAlbumsAsync();
+    const albums = await integrationInstance.getAlbumsAsync();
+
+    if (input.limit === undefined) return albums;
+
+    return albums
+      .toSorted(
+        (left, right) =>
+          right.assetCount - left.assetCount ||
+          compareText(left.albumName, right.albumName) ||
+          compareText(left.id, right.id),
+      )
+      .slice(0, input.limit);
   },
 });
 
+const compareText = (left: string, right: string) => (left < right ? -1 : left > right ? 1 : 0);
+
 export const immichAlbumRequestHandler = createIntegrationRequestHandler<
   ImmichAlbum,
   IntegrationKindByCategory<"photoService">,
diff --git a/packages/request-handler/src/lib/integration-request-handler.ts b/packages/request-handler/src/lib/integration-request-handler.ts
index cf6f49cea..e07ba3881 100644
--- a/packages/request-handler/src/lib/integration-request-handler.ts
+++ b/packages/request-handler/src/lib/integration-request-handler.ts
@@ -14,6 +14,7 @@ interface Options<TData, TKind extends IntegrationKind, TInput extends Record<st
   requestAsync: (integration: IntegrationOfKind<TKind>, input: TInput) => Promise<TData>;
   cacheTtlMs?: number;
   fallbackToStaleOnError?: boolean;
+  staleIfErrorTtlMs?: number;
 }
 
 export const createIntegrationRequestHandler = <
@@ -23,24 +24,18 @@ export const createIntegrationRequestHandler = <
 >(
   options: Options<TData, TKind, TInput>,
 ) => {
-  const integrationMap = new Map<string, IntegrationOfKind<TKind>>();
-  const inner = createRequestHandler<TData, { integrationId: string; options: TInput }>({
-    requestAsync: async (input) => {
-      const integration = integrationMap.get(input.integrationId);
-      if (!integration) {
-        throw new Error(`Integration ${input.integrationId} not found in cache`);
-      }
-      return options.requestAsync(integration, input.options);
-    },
+  const inner = createRequestHandler<TData, { integration: IntegrationOfKind<TKind>; options: TInput }>({
+    requestAsync: async ({ integration, options: itemOptions }) => options.requestAsync(integration, itemOptions),
+    getCacheKey: ({ integration, options: itemOptions }) =>
+      JSON.stringify({ integrationId: integration.id, itemOptions }),
     cacheTtlMs: options.cacheTtlMs,
     fallbackToStaleOnError: options.fallbackToStaleOnError,
+    staleIfErrorTtlMs: options.staleIfErrorTtlMs,
   });
 
   return {
     invalidateCache: inner.invalidateCache,
-    handler: (integration: IntegrationOfKind<TKind>, itemOptions: TInput) => {
-      integrationMap.set(integration.id, integration);
-      return inner.handler({ integrationId: integration.id, options: itemOptions });
-    },
+    handler: (integration: IntegrationOfKind<TKind>, itemOptions: TInput) =>
+      inner.handler({ integration, options: itemOptions }),
   };
 };
diff --git a/packages/request-handler/src/lib/request-handler.spec.ts b/packages/request-handler/src/lib/request-handler.spec.ts
new file mode 100644
index 000000000..85ee34339
--- /dev/null
+++ b/packages/request-handler/src/lib/request-handler.spec.ts
@@ -0,0 +1,224 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { Integration, IntegrationSecret } from "@homarr/db/schema";
+
+import { createIntegrationRequestHandler } from "./integration-request-handler";
+import { createRequestHandler } from "./request-handler";
+import { createWidgetRequestHandler } from "./widget-request-handler";
+
+const deferred = <T>() => {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((resolvePromise, rejectPromise) => {
+    resolve = resolvePromise;
+    reject = rejectPromise;
+  });
+  return { promise, resolve, reject };
+};
+
+const createIntegration = (secret: string) =>
+  ({
+    id: "integration-id",
+    kind: "sonarr",
+    decryptedSecrets: [{ kind: "apiKey", value: secret }],
+  }) as Omit<Integration, "kind"> & {
+    kind: "sonarr";
+    decryptedSecrets: Pick<IntegrationSecret, "kind" | "value">[];
+    externalUrl: string | null;
+  };
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("createRequestHandler", () => {
+  it("deduplicates in-flight work and caches completed data", async () => {
+    let calls = 0;
+    const request = deferred<string>();
+    const handler = createRequestHandler({
+      requestAsync: async () => {
+        calls += 1;
+        return await request.promise;
+      },
+    });
+
+    const first = handler.handler({ id: "same" }).getDataAsync();
+    const second = handler.handler({ id: "same" }).getDataAsync();
+    expect(calls).toBe(1);
+
+    request.resolve("value");
+    await expect(Promise.all([first, second])).resolves.toMatchObject([{ data: "value" }, { data: "value" }]);
+    await expect(handler.handler({ id: "same" }).getDataAsync()).resolves.toMatchObject({ data: "value" });
+    expect(calls).toBe(1);
+  });
+
+  it("keeps in-flight deduplication but retains no payload when ttl is zero", async () => {
+    let calls = 0;
+    const request = deferred<{ call: number }>();
+    const handler = createRequestHandler({
+      cacheTtlMs: 0,
+      requestAsync: async () => {
+        calls += 1;
+        if (calls === 1) return await request.promise;
+        return { call: calls };
+      },
+    });
+
+    const first = handler.handler({ id: "same" }).getDataAsync();
+    const second = handler.handler({ id: "same" }).getDataAsync();
+    expect(calls).toBe(1);
+
+    request.resolve({ call: 1 });
+    await expect(Promise.all([first, second])).resolves.toMatchObject([{ data: { call: 1 } }, { data: { call: 1 } }]);
+    await expect(handler.handler({ id: "same" }).getDataAsync()).resolves.toMatchObject({ data: { call: 2 } });
+    expect(calls).toBe(2);
+  });
+
+  it("releases positive-ttl entries after expiry without another request", async () => {
+    vi.useFakeTimers();
+    let calls = 0;
+    const handler = createRequestHandler({
+      cacheTtlMs: 25,
+      requestAsync: async () => ({ call: ++calls }),
+    });
+
+    await expect(handler.handler({ id: "same" }).getDataAsync()).resolves.toMatchObject({ data: { call: 1 } });
+    await vi.advanceTimersByTimeAsync(25);
+    await expect(handler.handler({ id: "same" }).getDataAsync()).resolves.toMatchObject({ data: { call: 2 } });
+
+    expect(calls).toBe(2);
+  });
+
+  it("cancels scheduled expiry work when the cache is invalidated", async () => {
+    vi.useFakeTimers();
+    const handler = createRequestHandler({ cacheTtlMs: 25, requestAsync: async () => "value" });
+    await handler.handler({ id: "same" }).getDataAsync();
+
+    expect(vi.getTimerCount()).toBe(1);
+    handler.invalidateCache();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("bounds stale-on-error fallback and releases it while idle", async () => {
+    vi.useFakeTimers();
+    let calls = 0;
+    const handler = createRequestHandler({
+      cacheTtlMs: 25,
+      fallbackToStaleOnError: true,
+      staleIfErrorTtlMs: 50,
+      requestAsync: async () => {
+        calls += 1;
+        if (calls === 1) return "last-known-good";
+        throw new Error("upstream unavailable");
+      },
+    });
+
+    await expect(handler.handler({ id: "same" }).getDataAsync()).resolves.toMatchObject({
+      data: "last-known-good",
+    });
+    await vi.advanceTimersByTimeAsync(25);
+    await expect(handler.handler({ id: "same" }).getDataAsync()).resolves.toMatchObject({
+      data: "last-known-good",
+    });
+
+    await vi.advanceTimersByTimeAsync(51);
+    await expect(handler.handler({ id: "same" }).getDataAsync()).rejects.toThrow("upstream unavailable");
+    expect(calls).toBe(3);
+  });
+
+  it("reschedules staggered stale entries by their retirement deadline without spinning", async () => {
+    vi.useFakeTimers();
+    const handler = createRequestHandler({
+      cacheTtlMs: 10,
+      fallbackToStaleOnError: true,
+      staleIfErrorTtlMs: 100,
+      requestAsync: async ({ id }: { id: string }) => id,
+    });
+
+    await handler.handler({ id: "first" }).getDataAsync();
+    await vi.advanceTimersByTimeAsync(20);
+    await handler.handler({ id: "second" }).getDataAsync();
+    expect(vi.getTimerCount()).toBe(1);
+
+    await vi.advanceTimersByTimeAsync(90);
+    expect(vi.getTimerCount()).toBe(1);
+    await vi.advanceTimersByTimeAsync(20);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("evicts an empty-string cache key at the size limit", async () => {
+    let calls = 0;
+    const handler = createRequestHandler({
+      cacheTtlMs: 60_000,
+      getCacheKey: ({ id }: { id: string }) => id,
+      requestAsync: async () => ++calls,
+    });
+
+    await handler.handler({ id: "" }).getDataAsync();
+    for (let index = 0; index < 1000; index += 1) {
+      await handler.handler({ id: String(index) }).getDataAsync();
+    }
+    await handler.handler({ id: "" }).getDataAsync();
+
+    expect(calls).toBe(1002);
+  });
+
+  it("does not let a pre-invalidation request repopulate or clear newer work", async () => {
+    const staleRequest = deferred<string>();
+    const freshRequest = deferred<string>();
+    const requests = [staleRequest, freshRequest];
+    let calls = 0;
+    const handler = createRequestHandler({
+      requestAsync: async () => {
+        const request = requests[calls++];
+        if (!request) throw new Error("Unexpected request");
+        return await request.promise;
+      },
+    });
+
+    const stale = handler.handler({ id: "same" }).getDataAsync();
+    handler.invalidateCache();
+    const fresh = handler.handler({ id: "same" }).getDataAsync();
+
+    staleRequest.resolve("stale");
+    await expect(stale).resolves.toMatchObject({ data: "stale" });
+    const joinsFresh = handler.handler({ id: "same" }).getDataAsync();
+    expect(calls).toBe(2);
+
+    freshRequest.resolve("fresh");
+    await expect(Promise.all([fresh, joinsFresh])).resolves.toMatchObject([{ data: "fresh" }, { data: "fresh" }]);
+    await expect(handler.handler({ id: "same" }).getDataAsync()).resolves.toMatchObject({ data: "fresh" });
+    expect(calls).toBe(2);
+  });
+});
+
+describe("createIntegrationRequestHandler", () => {
+  it("keys requests by integration id and options without retaining secret values", async () => {
+    let calls = 0;
+    const request = deferred<string>();
+    const handler = createIntegrationRequestHandler<string, "sonarr", { page: number }>({
+      requestAsync: async () => {
+        calls += 1;
+        return await request.promise;
+      },
+    });
+    const first = handler.handler(createIntegration("first-secret"), { page: 1 }).getDataAsync();
+    const second = handler.handler(createIntegration("rotated-secret"), { page: 1 }).getDataAsync();
+    expect(calls).toBe(1);
+
+    request.resolve("value");
+    await expect(Promise.all([first, second])).resolves.toMatchObject([{ data: "value" }, { data: "value" }]);
+  });
+});
+
+describe("createWidgetRequestHandler", () => {
+  it("shares its cache across calls while keeping distinct inputs separate", async () => {
+    let calls = 0;
+    const handler = createWidgetRequestHandler({ requestAsync: async ({ id }: { id: string }) => `${id}-${++calls}` });
+
+    await expect(handler.handler({ id: "one" }).getDataAsync()).resolves.toMatchObject({ data: "one-1" });
+    await expect(handler.handler({ id: "one" }).getDataAsync()).resolves.toMatchObject({ data: "one-1" });
+    await expect(handler.handler({ id: "two" }).getDataAsync()).resolves.toMatchObject({ data: "two-2" });
+    expect(calls).toBe(2);
+  });
+});
diff --git a/packages/request-handler/src/lib/request-handler.ts b/packages/request-handler/src/lib/request-handler.ts
index 4dbdb5b11..a447c377b 100644
--- a/packages/request-handler/src/lib/request-handler.ts
+++ b/packages/request-handler/src/lib/request-handler.ts
@@ -1,18 +1,21 @@
 interface Options<TData, TInput extends Record<string, unknown>> {
   requestAsync: (input: TInput) => Promise<TData>;
+  getCacheKey?: (input: TInput) => string;
   cacheTtlMs?: number;
   fallbackToStaleOnError?: boolean;
+  staleIfErrorTtlMs?: number;
 }
 
-type CacheEntry<TData> = { data: TData; timestamp: Date; expiresAt: number };
+type CacheEntry<TData> = { data: TData; timestamp: Date; expiresAt: number; staleUntil: number };
 
 const MAX_CACHE_SIZE = 1000;
 const DEFAULT_TTL_MS = 10_000;
+const DEFAULT_STALE_IF_ERROR_TTL_MS = 5 * 60_000;
 
 const evictExpired = <TData>(cache: Map<string, CacheEntry<TData>>) => {
   const now = Date.now();
   for (const [key, entry] of cache) {
-    if (now >= entry.expiresAt) cache.delete(key);
+    if (now >= entry.staleUntil) cache.delete(key);
   }
 };
 
@@ -21,44 +24,98 @@ export const createRequestHandler = <TData, TInput extends Record<string, unknow
 ) => {
   const cache = new Map<string, CacheEntry<TData>>();
   const inflight = new Map<string, Promise<CacheEntry<TData>>>();
+  let expiryTimer: ReturnType<typeof setTimeout> | undefined;
+  let expiryTimerAt: number | undefined;
+  let generation = 0;
+
+  const scheduleExpiry = (candidateExpiryAt?: number) => {
+    if (candidateExpiryAt !== undefined && expiryTimerAt !== undefined && expiryTimerAt <= candidateExpiryAt) return;
+    if (expiryTimer) clearTimeout(expiryTimer);
+    expiryTimer = undefined;
+    expiryTimerAt = undefined;
+    if (cache.size === 0) return;
+
+    const nextExpiryAt = candidateExpiryAt ?? Math.min(...[...cache.values()].map(({ staleUntil }) => staleUntil));
+    expiryTimerAt = nextExpiryAt;
+    expiryTimer = setTimeout(
+      () => {
+        expiryTimer = undefined;
+        expiryTimerAt = undefined;
+        evictExpired(cache);
+        scheduleExpiry();
+      },
+      Math.max(0, nextExpiryAt - Date.now()),
+    );
+    expiryTimer.unref?.();
+  };
 
   return {
     invalidateCache: () => {
+      generation += 1;
       cache.clear();
       inflight.clear();
+      if (expiryTimer) clearTimeout(expiryTimer);
+      expiryTimer = undefined;
+      expiryTimerAt = undefined;
     },
     handler: (input: TInput) => ({
       async getDataAsync(): Promise<{ data: TData; timestamp: Date }> {
         const ttl = options.cacheTtlMs ?? DEFAULT_TTL_MS;
-        const key = JSON.stringify(input);
+        const key = options.getCacheKey?.(input) ?? JSON.stringify(input);
 
-        const cached = cache.get(key);
-        if (cached && Date.now() < cached.expiresAt) {
+        let cached = cache.get(key);
+        const now = Date.now();
+        if (cached && now < cached.expiresAt) {
           return { data: cached.data, timestamp: cached.timestamp };
         }
+        if (cached && now >= cached.staleUntil) {
+          cache.delete(key);
+          scheduleExpiry();
+          cached = undefined;
+        }
 
         const existing = inflight.get(key);
         if (existing) return existing;
 
-        const promise = options
+        const requestGeneration = generation;
+        let promise: Promise<CacheEntry<TData>>;
+        promise = options
           .requestAsync(input)
           .then((data) => {
-            if (cache.size >= MAX_CACHE_SIZE) evictExpired(cache);
-            if (cache.size >= MAX_CACHE_SIZE) {
-              const oldest = cache.keys().next().value;
-              if (oldest) cache.delete(oldest);
+            const expiresAt = Date.now() + ttl;
+            const staleIfErrorTtlMs = options.fallbackToStaleOnError
+              ? Math.max(0, options.staleIfErrorTtlMs ?? DEFAULT_STALE_IF_ERROR_TTL_MS)
+              : 0;
+            const entry: CacheEntry<TData> = {
+              data,
+              timestamp: new Date(),
+              expiresAt,
+              staleUntil: expiresAt + staleIfErrorTtlMs,
+            };
+            if (ttl > 0 && generation === requestGeneration) {
+              evictExpired(cache);
+              if (cache.size >= MAX_CACHE_SIZE) {
+                const oldest = cache.keys().next().value;
+                if (oldest !== undefined) cache.delete(oldest);
+              }
+              cache.set(key, entry);
+              scheduleExpiry(entry.staleUntil);
             }
-            const entry: CacheEntry<TData> = { data, timestamp: new Date(), expiresAt: Date.now() + ttl };
-            cache.set(key, entry);
-            inflight.delete(key);
             return entry;
           })
           .catch((err) => {
-            inflight.delete(key);
-            if (options.fallbackToStaleOnError && cached) {
+            if (
+              options.fallbackToStaleOnError &&
+              cached &&
+              Date.now() < cached.staleUntil &&
+              generation === requestGeneration
+            ) {
               return cached;
             }
             throw err;
+          })
+          .finally(() => {
+            if (inflight.get(key) === promise) inflight.delete(key);
           });
 
         inflight.set(key, promise);
diff --git a/packages/request-handler/src/lib/widget-request-handler.ts b/packages/request-handler/src/lib/widget-request-handler.ts
index 8649791af..b5273c87f 100644
--- a/packages/request-handler/src/lib/widget-request-handler.ts
+++ b/packages/request-handler/src/lib/widget-request-handler.ts
@@ -6,9 +6,7 @@ interface Options<TData, TInput extends Record<string, unknown>> {
 
 export const createWidgetRequestHandler = <TData, TInput extends Record<string, unknown>>(
   options: Options<TData, TInput>,
-) => ({
-  handler: (widgetOptions: TInput) =>
-    createRequestHandler<TData, TInput>({
-      requestAsync: options.requestAsync,
-    }).handler(widgetOptions),
-});
+) => {
+  const inner = createRequestHandler<TData, TInput>({ requestAsync: options.requestAsync });
+  return inner;
+};
diff --git a/packages/request-handler/src/smart-home-entity-state.spec.ts b/packages/request-handler/src/smart-home-entity-state.spec.ts
new file mode 100644
index 000000000..bee81d2de
--- /dev/null
+++ b/packages/request-handler/src/smart-home-entity-state.spec.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+
+import { toSafeEntityDetails } from "./smart-home-entity-state";
+
+describe("toSafeEntityDetails", () => {
+  it("keeps display attributes and removes sensitive Home Assistant metadata", () => {
+    const details = toSafeEntityDetails({
+      entity_id: "camera.front_door",
+      state: "streaming",
+      last_changed: new Date("2026-01-01T00:00:00Z"),
+      last_updated: new Date("2026-01-01T00:00:01Z"),
+      attributes: {
+        friendly_name: "Front door",
+        icon: "mdi:camera",
+        access_token: "secret-camera-token",
+        latitude: 48.85,
+      },
+    });
+
+    expect(details.attributes).toEqual({ friendly_name: "Front door", icon: "mdi:camera" });
+    expect(details.attributes).not.toHaveProperty("access_token");
+    expect(details.attributes).not.toHaveProperty("latitude");
+  });
+});
diff --git a/packages/request-handler/src/smart-home-entity-state.ts b/packages/request-handler/src/smart-home-entity-state.ts
index 3c8851522..1d0d2471c 100644
--- a/packages/request-handler/src/smart-home-entity-state.ts
+++ b/packages/request-handler/src/smart-home-entity-state.ts
@@ -1,10 +1,29 @@
 import type { IntegrationKindByCategory } from "@homarr/definitions";
 import { createIntegrationAsync } from "@homarr/integrations";
+import type { EntityState } from "@homarr/integrations";
 
 import { createIntegrationRequestHandler } from "./lib/integration-request-handler";
 
+const safeAttributeKeys = ["friendly_name", "unit_of_measurement", "device_class", "icon"] as const;
+
+export const toSafeEntityDetails = (entity: EntityState) => {
+  const attributes: Partial<Record<(typeof safeAttributeKeys)[number], string>> = {};
+  for (const key of safeAttributeKeys) {
+    const value = entity.attributes[key];
+    if (typeof value === "string") attributes[key] = value;
+  }
+
+  return {
+    attributes,
+    entity_id: entity.entity_id,
+    last_changed: entity.last_changed,
+    last_updated: entity.last_updated,
+    state: entity.state,
+  };
+};
+
 export const smartHomeEntityStateRequestHandler = createIntegrationRequestHandler<
-  string,
+  EntityState,
   IntegrationKindByCategory<"smartHomeServer">,
   { entityId: string }
 >({
@@ -16,6 +35,6 @@ export const smartHomeEntityStateRequestHandler = createIntegrationRequestHandle
       throw new Error(`Unable to fetch data from Home Assistant error='${result.error as string}'`);
     }
 
-    return result.data.state;
+    return result.data;
   },
 });
diff --git a/packages/request-handler/src/test/update-checker-cache.spec.ts b/packages/request-handler/src/test/update-checker-cache.spec.ts
new file mode 100644
index 000000000..b5c17e654
--- /dev/null
+++ b/packages/request-handler/src/test/update-checker-cache.spec.ts
@@ -0,0 +1,244 @@
+// @vitest-environment node
+
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+const mocks = vi.hoisted(() => {
+  type StoredValue = {
+    expiresAt: number | null;
+    value: unknown;
+  };
+
+  const values = new Map<string, StoredValue>();
+  const locks = new Set<string>();
+  const listReleases = vi.fn();
+  const redisOperation = vi.fn();
+
+  return {
+    env: { NO_EXTERNAL_CONNECTION: false },
+    listReleases,
+    redisOperation,
+    values,
+    locks,
+    removeFreshResult() {
+      for (const key of values.keys()) {
+        if (key.startsWith("update-checker:fresh:")) values.delete(key);
+      }
+    },
+  };
+});
+
+vi.mock("@homarr/common/env", () => ({ env: mocks.env }));
+
+vi.mock("@homarr/core/infrastructure/http", () => ({
+  fetchWithTrustedCertificatesAsync: vi.fn(),
+}));
+
+vi.mock("@homarr/core/infrastructure/logs", () => ({
+  createLogger: () => ({
+    debug: vi.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+  }),
+}));
+
+vi.mock("@homarr/redis", () => ({
+  createGetSetChannel: (name: string) => ({
+    getAsync: async () => {
+      mocks.redisOperation();
+      const stored = mocks.values.get(name);
+      if (!stored) return null;
+      if (stored.expiresAt !== null && Date.now() >= stored.expiresAt) {
+        mocks.values.delete(name);
+        return null;
+      }
+      return stored.value;
+    },
+    setAsync: async (value: unknown, options?: { ttlSeconds?: number }) => {
+      mocks.redisOperation();
+      mocks.values.set(name, {
+        value,
+        expiresAt: options?.ttlSeconds ? Date.now() + options.ttlSeconds * 1_000 : null,
+      });
+    },
+    removeAsync: async () => {
+      mocks.redisOperation();
+      mocks.values.delete(name);
+    },
+  }),
+  createLockChannel: (name: string) => ({
+    acquireAsync: async () => {
+      mocks.redisOperation();
+      if (mocks.locks.has(name)) return null;
+      mocks.locks.add(name);
+      return "test-lock-token";
+    },
+    releaseAsync: async () => {
+      mocks.redisOperation();
+      mocks.locks.delete(name);
+    },
+  }),
+}));
+
+vi.mock("octokit", () => ({
+  Octokit: class {
+    rest = {
+      repos: {
+        listReleases: mocks.listReleases,
+      },
+    };
+  },
+}));
+
+const successfulResponse = {
+  data: [
+    {
+      body_html: undefined,
+      html_url: "https://github.com/homarr-labs/homarr/releases/tag/v99.0.0",
+      name: "v99.0.0",
+      prerelease: false,
+      tag_name: "v99.0.0",
+    },
+  ],
+  headers: {},
+  status: 200,
+  url: "",
+};
+
+const loadHandlerAsync = async () => {
+  const { updateCheckerRequestHandler } = await import("../update-checker");
+  return updateCheckerRequestHandler.handler({});
+};
+
+describe("persisted update checker cache", () => {
+  beforeEach(() => {
+    vi.resetModules();
+    vi.restoreAllMocks();
+    mocks.env.NO_EXTERNAL_CONNECTION = false;
+    mocks.listReleases.mockReset();
+    mocks.redisOperation.mockReset();
+    mocks.values.clear();
+    mocks.locks.clear();
+  });
+
+  test("checks GitHub once for repeated page loads inside 24 hours", async () => {
+    mocks.listReleases.mockResolvedValue(successfulResponse);
+    const handler = await loadHandlerAsync();
+
+    const first = await handler.getDataAsync();
+    const second = await handler.getDataAsync();
+
+    expect(first.data).toEqual(second.data);
+    expect(mocks.listReleases).toHaveBeenCalledTimes(1);
+  });
+
+  test("deduplicates concurrent checks", async () => {
+    mocks.listReleases.mockImplementation(async () => {
+      await Promise.resolve();
+      return successfulResponse;
+    });
+    const handler = await loadHandlerAsync();
+
+    const results = await Promise.all(Array.from({ length: 10 }, async () => await handler.getDataAsync()));
+
+    expect(results.every(({ data }) => data.availableUpdates.length === 1)).toBe(true);
+    expect(mocks.listReleases).toHaveBeenCalledTimes(1);
+  });
+
+  test("deduplicates concurrent checks across simulated processes", async () => {
+    let completeGitHubRequest: (() => void) | undefined;
+    mocks.listReleases.mockImplementation(
+      async () =>
+        await new Promise<typeof successfulResponse>((resolve) => {
+          completeGitHubRequest = () => resolve(successfulResponse);
+        }),
+    );
+    const firstHandler = await loadHandlerAsync();
+    vi.resetModules();
+    const secondHandler = await loadHandlerAsync();
+
+    const firstRequest = firstHandler.getDataAsync();
+    await vi.waitFor(() => expect(mocks.listReleases).toHaveBeenCalledOnce());
+    const secondRequest = secondHandler.getDataAsync();
+    completeGitHubRequest?.();
+
+    const results = await Promise.all([firstRequest, secondRequest]);
+
+    expect(results[0].data).toEqual(results[1].data);
+    expect(mocks.listReleases).toHaveBeenCalledTimes(1);
+  });
+
+  test("refreshes at the 24-hour boundary, not before it", async () => {
+    let now = 1_000;
+    vi.spyOn(Date, "now").mockImplementation(() => now);
+    mocks.listReleases.mockResolvedValue(successfulResponse);
+    const handler = await loadHandlerAsync();
+    await handler.getDataAsync();
+
+    now += 24 * 60 * 60 * 1_000 - 1;
+    await handler.getDataAsync();
+    expect(mocks.listReleases).toHaveBeenCalledTimes(1);
+
+    now += 1;
+    await handler.getDataAsync();
+    expect(mocks.listReleases).toHaveBeenCalledTimes(2);
+  });
+
+  test("reuses the Redis result after a simulated process restart", async () => {
+    mocks.listReleases.mockResolvedValue(successfulResponse);
+    const firstHandler = await loadHandlerAsync();
+    await firstHandler.getDataAsync();
+
+    vi.resetModules();
+    const restartedHandler = await loadHandlerAsync();
+    await restartedHandler.getDataAsync();
+
+    expect(mocks.listReleases).toHaveBeenCalledTimes(1);
+  });
+
+  test("ignores update results created for an older application version", async () => {
+    mocks.values.set("update-checker:fresh:v1", {
+      value: { availableUpdates: [], attemptedAt: 1, checkedAt: 1 },
+      expiresAt: null,
+    });
+    mocks.listReleases.mockResolvedValue(successfulResponse);
+
+    const handler = await loadHandlerAsync();
+    const result = await handler.getDataAsync();
+
+    expect(result.data.availableUpdates).toHaveLength(1);
+    expect(mocks.listReleases).toHaveBeenCalledOnce();
+  });
+
+  test("serves stale data and retries only after 24 hours following a provider failure", async () => {
+    let now = 1_000;
+    vi.spyOn(Date, "now").mockImplementation(() => now);
+    mocks.listReleases.mockResolvedValueOnce(successfulResponse).mockRejectedValue(new Error("GitHub unavailable"));
+    const handler = await loadHandlerAsync();
+    const fresh = await handler.getDataAsync();
+    mocks.removeFreshResult();
+
+    const stale = await handler.getDataAsync();
+    now += 24 * 60 * 60 * 1_000 - 1;
+    const repeated = await handler.getDataAsync();
+
+    expect(stale.data).toEqual(fresh.data);
+    expect(repeated.data).toEqual(fresh.data);
+    expect(mocks.listReleases).toHaveBeenCalledTimes(2);
+
+    now += 1;
+    const retried = await handler.getDataAsync();
+
+    expect(retried.data).toEqual(fresh.data);
+    expect(mocks.listReleases).toHaveBeenCalledTimes(3);
+  });
+
+  test("does not contact GitHub when external connections are disabled", async () => {
+    mocks.env.NO_EXTERNAL_CONNECTION = true;
+    const handler = await loadHandlerAsync();
+
+    await expect(handler.getDataAsync()).resolves.toMatchObject({ data: { availableUpdates: [] } });
+    expect(mocks.listReleases).not.toHaveBeenCalled();
+    expect(mocks.redisOperation).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/request-handler/src/timetable-url.ts b/packages/request-handler/src/timetable-url.ts
new file mode 100644
index 000000000..f7241a542
--- /dev/null
+++ b/packages/request-handler/src/timetable-url.ts
@@ -0,0 +1,26 @@
+import type { Response } from "undici";
+
+import { readBoundedJsonResponseAsync as readBoundedJsonResponse } from "@homarr/common/server";
+
+export const DEFAULT_TIMETABLE_BASE_URL = "https://search.ch";
+export const MAX_TIMETABLE_RESPONSE_BYTES = 512 * 1024;
+
+export const normalizeTimetableBaseUrl = (baseUrl: string) => {
+  if (baseUrl.length > 2_048) throw new Error("Timetable base URL is too long");
+
+  const url = new URL(baseUrl);
+  if (url.protocol !== "http:" && url.protocol !== "https:") {
+    throw new Error("Timetable base URL must use HTTP or HTTPS");
+  }
+  if (url.username || url.password) throw new Error("Timetable base URL must not contain credentials");
+  if (url.search || url.hash) throw new Error("Timetable base URL must not contain a query or fragment");
+
+  return url.toString().replace(/\/$/, "");
+};
+
+export async function readBoundedTimetableJsonAsync(
+  response: Response,
+  maxBytes = MAX_TIMETABLE_RESPONSE_BYTES,
+): Promise<unknown> {
+  return await readBoundedJsonResponse(response, maxBytes, "Timetable response");
+}
diff --git a/packages/request-handler/src/timetable.spec.ts b/packages/request-handler/src/timetable.spec.ts
new file mode 100644
index 000000000..ea39392ab
--- /dev/null
+++ b/packages/request-handler/src/timetable.spec.ts
@@ -0,0 +1,216 @@
+import { Response } from "undici";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { createCertificateAgentAsync, fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
+
+import { timetableGetTimetableRequestHandler, timetableSearchStationsRequestHandler } from "./timetable";
+import { normalizeTimetableBaseUrl, readBoundedTimetableJsonAsync } from "./timetable-url";
+
+vi.mock("@homarr/core/infrastructure/http", () => ({
+  createCertificateAgentAsync: vi.fn(),
+  fetchWithTrustedCertificatesAsync: vi.fn(),
+}));
+
+const mockFetch = vi.mocked(fetchWithTrustedCertificatesAsync);
+const mockCreateCertificateAgent = vi.mocked(createCertificateAgentAsync);
+const mockCloseDispatcher = vi.fn();
+const mockDestroyDispatcher = vi.fn().mockResolvedValue(undefined);
+const mockDispatcher = { close: mockCloseDispatcher, destroy: mockDestroyDispatcher };
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockCreateCertificateAgent.mockResolvedValue(mockDispatcher as never);
+});
+
+describe("normalizeTimetableBaseUrl", () => {
+  it("normalizes an HTTP endpoint", () => {
+    expect(normalizeTimetableBaseUrl("https://search.ch/")).toBe("https://search.ch");
+  });
+
+  it.each(["file:///etc/passwd", "https://user:secret@example.com", "https://example.com?redirect=/admin"])(
+    "rejects unsafe base URL %s",
+    (url) => expect(() => normalizeTimetableBaseUrl(url)).toThrow(),
+  );
+});
+
+describe("timetable response bounds", () => {
+  it("rejects a response once its byte budget is exceeded", async () => {
+    const response = new Response(JSON.stringify({ value: "x".repeat(100) }));
+    await expect(readBoundedTimetableJsonAsync(response, 32)).rejects.toThrow("exceeds 32 bytes");
+  });
+
+  it("caps and caches station results and rejects redirects", async () => {
+    mockFetch.mockResolvedValue(
+      new Response(
+        JSON.stringify(
+          Array.from({ length: 125 }, (_, index) => ({
+            id: String(index),
+            label: `Station ${index}`,
+            iconclass: "train",
+          })),
+        ),
+      ),
+    );
+    const input = { baseUrl: "http://timetable.internal", query: "bounded-stations" };
+
+    const first = await timetableSearchStationsRequestHandler.handler(input).getDataAsync();
+    const second = await timetableSearchStationsRequestHandler.handler(input).getDataAsync();
+
+    expect(first.data).toHaveLength(100);
+    expect(second.data).toHaveLength(100);
+    expect(mockFetch).toHaveBeenCalledOnce();
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({ redirect: "error", bodyTimeout: 10_000 }),
+    );
+  });
+
+  it("pins the vetted address into a direct connection without changing the request hostname", async () => {
+    const pinnedAddresses = [
+      { address: "93.184.216.34", family: 4 as const },
+      { address: "2606:2800:220:1:248:1893:25c8:1946", family: 6 as const },
+    ];
+    mockFetch.mockImplementation(async () => {
+      const pinnedLookup = mockCreateCertificateAgent.mock.calls[0]?.[0]?.lookup;
+      expect(pinnedLookup).toBeTypeOf("function");
+      if (!pinnedLookup) throw new Error("Expected a pinned lookup function");
+
+      const lookupCallback = vi.fn();
+      pinnedLookup("timetable.example.com", { all: true }, lookupCallback);
+      expect(lookupCallback).toHaveBeenCalledWith(null, pinnedAddresses);
+
+      const repeatedLookupCallback = vi.fn();
+      pinnedLookup("timetable.example.com", { all: true }, repeatedLookupCallback);
+      expect(repeatedLookupCallback).toHaveBeenCalledWith(null, pinnedAddresses);
+      expect(mockCloseDispatcher).not.toHaveBeenCalled();
+
+      const unexpectedHostCallback = vi.fn();
+      pinnedLookup("different.example.com", { all: true }, unexpectedHostCallback);
+      expect(unexpectedHostCallback.mock.calls[0]?.[0]).toMatchObject({ code: "ENOTFOUND" });
+
+      return new Response(JSON.stringify([{ id: "station", label: "Station", iconclass: "train" }]));
+    });
+
+    await timetableSearchStationsRequestHandler
+      .handler({
+        baseUrl: "https://timetable.example.com",
+        query: "pinned-stations",
+        pinnedAddresses,
+      })
+      .getDataAsync();
+
+    expect(mockCreateCertificateAgent).toHaveBeenCalledWith(
+      { lookup: expect.any(Function) },
+      {
+        autoSelectFamily: true,
+        bodyTimeout: 10_000,
+        httpProxy: "",
+        httpsProxy: "",
+        noProxy: "*",
+      },
+    );
+    const requestUrl = mockFetch.mock.calls[0]?.[0];
+    expect(new URL(String(requestUrl)).hostname).toBe("timetable.example.com");
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({ dispatcher: mockDispatcher, redirect: "error" }),
+    );
+
+    expect(mockCloseDispatcher).toHaveBeenCalledOnce();
+  });
+
+  it("pins timetable requests and closes their direct dispatcher", async () => {
+    mockFetch.mockResolvedValue(
+      new Response(
+        JSON.stringify({
+          connections: [
+            {
+              time: "2026-01-01T00:00:00Z",
+              line: "1",
+              color: "ffffff",
+              terminal: { name: "Stop" },
+              dep_delay: "0",
+            },
+          ],
+        }),
+      ),
+    );
+    const pinnedAddresses = [{ address: "93.184.216.34", family: 4 as const }];
+
+    await timetableGetTimetableRequestHandler
+      .handler({
+        baseUrl: "https://timetable.example.com",
+        stationId: "pinned-departures",
+        limit: 1,
+        pinnedAddresses,
+      })
+      .getDataAsync();
+
+    expect(mockCreateCertificateAgent).toHaveBeenCalledWith(
+      { lookup: expect.any(Function) },
+      expect.objectContaining({ noProxy: "*" }),
+    );
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({ dispatcher: mockDispatcher, redirect: "error" }),
+    );
+    expect(mockCloseDispatcher).toHaveBeenCalledOnce();
+  });
+
+  it("destroys the pinned station dispatcher when response handling fails", async () => {
+    mockFetch.mockResolvedValue(new Response("not json"));
+
+    await expect(
+      timetableSearchStationsRequestHandler
+        .handler({
+          baseUrl: "https://timetable.example.com",
+          query: "invalid-stations",
+          pinnedAddresses: [{ address: "93.184.216.34", family: 4 }],
+        })
+        .getDataAsync(),
+    ).rejects.toThrow();
+
+    expect(mockDestroyDispatcher).toHaveBeenCalledOnce();
+    expect(mockCloseDispatcher).not.toHaveBeenCalled();
+  });
+
+  it("destroys the pinned timetable dispatcher when response handling fails", async () => {
+    mockFetch.mockResolvedValue(new Response("not json"));
+
+    await expect(
+      timetableGetTimetableRequestHandler
+        .handler({
+          baseUrl: "https://timetable.example.com",
+          stationId: "invalid-departures",
+          limit: 1,
+          pinnedAddresses: [{ address: "93.184.216.34", family: 4 }],
+        })
+        .getDataAsync(),
+    ).rejects.toThrow();
+
+    expect(mockDestroyDispatcher).toHaveBeenCalledOnce();
+    expect(mockCloseDispatcher).not.toHaveBeenCalled();
+  });
+
+  it("never caches more departures than requested", async () => {
+    mockFetch.mockResolvedValue(
+      new Response(
+        JSON.stringify({
+          connections: Array.from({ length: 5 }, (_, index) => ({
+            time: `2026-01-01T00:0${index}:00Z`,
+            line: "1",
+            color: "ffffff",
+            terminal: { name: `Stop ${index}` },
+            dep_delay: "0",
+          })),
+        }),
+      ),
+    );
+
+    const result = await timetableGetTimetableRequestHandler
+      .handler({ baseUrl: "http://timetable.internal", stationId: "bounded-departures", limit: 2 })
+      .getDataAsync();
+
+    expect(result.data.entries).toHaveLength(2);
+  });
+});
diff --git a/packages/request-handler/src/timetable.ts b/packages/request-handler/src/timetable.ts
index 2be7355d8..27f549ac5 100644
--- a/packages/request-handler/src/timetable.ts
+++ b/packages/request-handler/src/timetable.ts
@@ -1,9 +1,11 @@
+import type { LookupFunction } from "node:net";
 import { z } from "zod/v4";
 
 import { ResponseError } from "@homarr/common/server";
-import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
+import { createCertificateAgentAsync, fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
 
 import { createRequestHandler } from "./lib/request-handler";
+import { normalizeTimetableBaseUrl, readBoundedTimetableJsonAsync } from "./timetable-url";
 
 export interface Station {
   id: string;
@@ -31,51 +33,126 @@ export interface Timetable {
 }
 
 const supportedStationTypes = ["bus", "tram", "train", "ship", "cablecar", "funicular", "chairlift"];
+const MAX_STATION_RESULTS = 100;
+const MAX_TIMETABLE_ENTRIES = 100;
+const timetableFetchOptions = { redirect: "error", timeout: 10_000, bodyTimeout: 10_000 } as const;
+
+export interface TimetableResolvedAddress {
+  address: string;
+  family: 4 | 6;
+}
 
 export const timetableSearchStationsRequestHandler = createRequestHandler<
   Station[],
-  { baseUrl: string; query: string }
+  { baseUrl: string; query: string; pinnedAddresses?: TimetableResolvedAddress[] }
 >({
   async requestAsync(input) {
-    return await searchStationsAsync(input.baseUrl, input.query);
+    return await searchStationsAsync(input.baseUrl, input.query, input.pinnedAddresses);
   },
   cacheTtlMs: 24 * 60 * 60 * 1000,
 });
 
 export const timetableGetTimetableRequestHandler = createRequestHandler<
   Timetable,
-  { baseUrl: string; stationId: string; limit: number }
+  { baseUrl: string; stationId: string; limit: number; pinnedAddresses?: TimetableResolvedAddress[] }
 >({
   async requestAsync(input) {
-    return await getTimetableAsync(input.baseUrl, { stationId: input.stationId, limit: input.limit });
+    return await getTimetableAsync(
+      input.baseUrl,
+      { stationId: input.stationId, limit: input.limit },
+      input.pinnedAddresses,
+    );
   },
   cacheTtlMs: 60_000,
 });
 
 const buildUrl = (baseUrl: string, path: `/${string}`, queryParams: Record<string, string | number>) => {
-  const url = new URL(`${baseUrl.replace(/\/$/, "")}${path}`);
+  const url = new URL(`${normalizeTimetableBaseUrl(baseUrl)}${path}`);
   for (const [key, value] of Object.entries(queryParams)) {
     url.searchParams.set(key, value.toString());
   }
   return url.toString();
 };
 
-const searchStationsAsync = async (baseUrl: string, query: string): Promise<Station[]> => {
-  const response = await fetchWithTrustedCertificatesAsync(
-    buildUrl(baseUrl, "/timetable/api/completion.json", { term: query, show_ids: 1, nofavorites: 1 }),
-  );
-  if (!response.ok) throw new ResponseError(response);
+const normalizeLookupHostname = (hostname: string) =>
+  hostname
+    .replace(/^\[(.*)\]$/, "$1")
+    .toLowerCase()
+    .replace(/\.$/, "");
 
-  const data = await searchSchema.parseAsync(await response.json());
-  return data
-    .filter((item) => supportedStationTypes.some((type) => item.iconclass.endsWith(type)))
-    .map((item) => (item.id !== undefined ? { id: item.id, name: item.label } : null))
-    .filter((item) => item !== null);
+const createPinnedLookup = (baseUrl: string, addresses: TimetableResolvedAddress[]): LookupFunction => {
+  const expectedHostname = normalizeLookupHostname(new URL(baseUrl).hostname);
+
+  return (hostname, options, callback) => {
+    const requestedFamily = options.family === 4 || options.family === 6 ? options.family : undefined;
+    const candidates = requestedFamily ? addresses.filter(({ family }) => family === requestedFamily) : addresses;
+    if (normalizeLookupHostname(hostname) !== expectedHostname || candidates.length === 0) {
+      const error = new Error("Pinned timetable address is unavailable") as NodeJS.ErrnoException;
+      error.code = "ENOTFOUND";
+      callback(error, []);
+      return;
+    }
+
+    if (options.all) {
+      callback(null, candidates);
+      return;
+    }
+
+    const selected = candidates[0];
+    if (!selected) return callback(new Error("Pinned timetable address is unavailable"), []);
+    callback(null, selected.address, selected.family);
+  };
+};
+
+const createPinnedTimetableDispatcherAsync = async (baseUrl: string, addresses: TimetableResolvedAddress[]) => {
+  // Proxies resolve CONNECT targets independently, which would defeat DNS pinning. Force this security-sensitive
+  // configuration request to connect directly. The original URL remains unchanged for the Host header and TLS SNI.
+  return await createCertificateAgentAsync(
+    { lookup: createPinnedLookup(baseUrl, addresses) },
+    {
+      autoSelectFamily: addresses.length > 1,
+      bodyTimeout: timetableFetchOptions.bodyTimeout,
+      httpProxy: "",
+      httpsProxy: "",
+      noProxy: "*",
+    },
+  );
+};
+
+const searchStationsAsync = async (
+  baseUrl: string,
+  query: string,
+  pinnedAddresses?: TimetableResolvedAddress[],
+): Promise<Station[]> => {
+  let dispatcher = pinnedAddresses ? await createPinnedTimetableDispatcherAsync(baseUrl, pinnedAddresses) : undefined;
+  let response: Awaited<ReturnType<typeof fetchWithTrustedCertificatesAsync>> | undefined;
+  try {
+    response = await fetchWithTrustedCertificatesAsync(
+      buildUrl(baseUrl, "/timetable/api/completion.json", { term: query, show_ids: 1, nofavorites: 1 }),
+      { ...timetableFetchOptions, dispatcher },
+    );
+    if (!response.ok) throw new ResponseError(response);
+
+    const body = await readBoundedTimetableJsonAsync(response);
+    const data = await searchSchema.parseAsync(Array.isArray(body) ? body.slice(0, MAX_STATION_RESULTS) : body);
+    return data
+      .filter((item) => supportedStationTypes.some((type) => item.iconclass.endsWith(type)))
+      .map((item) => (item.id !== undefined ? { id: item.id, name: item.label } : null))
+      .filter((item) => item !== null);
+  } catch (error) {
+    if (response?.body) await response.body.cancel().catch(() => {});
+    await dispatcher?.destroy().catch(() => {});
+    dispatcher = undefined;
+    throw error;
+  } finally {
+    await dispatcher?.close();
+  }
 };
 
 const getTimetableAsync = async (
   baseUrl: string,
   options: { stationId: string; limit: number },
+  pinnedAddresses?: TimetableResolvedAddress[],
 ): Promise<Timetable> => {
   const now = new Date();
   const date = new Intl.DateTimeFormat("en-US", {
@@ -90,43 +167,59 @@ const getTimetableAsync = async (
     minute: "2-digit",
     hour12: false,
   }).format(now);
-  const response = await fetchWithTrustedCertificatesAsync(
-    buildUrl(baseUrl, "/timetable/api/stationboard.json", {
-      stop: options.stationId,
-      limit: options.limit,
-      show_delays: 1,
-      show_tracks: 1,
-      date,
-      time,
-    }),
-  );
-  if (!response.ok) throw new ResponseError(response);
+  let dispatcher = pinnedAddresses ? await createPinnedTimetableDispatcherAsync(baseUrl, pinnedAddresses) : undefined;
+  let response: Awaited<ReturnType<typeof fetchWithTrustedCertificatesAsync>> | undefined;
+  try {
+    response = await fetchWithTrustedCertificatesAsync(
+      buildUrl(baseUrl, "/timetable/api/stationboard.json", {
+        stop: options.stationId,
+        limit: options.limit,
+        show_delays: 1,
+        show_tracks: 1,
+        date,
+        time,
+      }),
+      { ...timetableFetchOptions, dispatcher },
+    );
+    if (!response.ok) throw new ResponseError(response);
 
-  const data = await timetableSchema.parseAsync(await response.json());
-  return {
-    stationId: options.stationId,
-    timestamp: now,
-    entries: data.connections.map((connection) => {
-      const color = connection.color.split("~")[0];
-      return {
-        timestamp: connection.time,
-        line: connection.line
-          ? {
-              name: connection.line,
-              color: color && color.length >= 1 ? `#${color}` : null,
-            }
-          : null,
-        location: connection.terminal.name,
-        delay: connection.dep_delay,
-        platform: connection.track
-          ? {
-              name: connection.track.replace("!", ""),
-              hasChanged: connection.track.includes("!"),
-            }
-          : null,
-      };
-    }),
-  };
+    const body = await readBoundedTimetableJsonAsync(response);
+    const envelope = timetableEnvelopeSchema.parse(body);
+    const data = await timetableSchema.parseAsync({
+      connections: envelope.connections.slice(0, Math.min(options.limit, MAX_TIMETABLE_ENTRIES)),
+    });
+    return {
+      stationId: options.stationId,
+      timestamp: now,
+      entries: data.connections.map((connection) => {
+        const color = connection.color.split("~")[0];
+        return {
+          timestamp: connection.time,
+          line: connection.line
+            ? {
+                name: connection.line,
+                color: color && color.length >= 1 ? `#${color}` : null,
+              }
+            : null,
+          location: connection.terminal.name,
+          delay: connection.dep_delay,
+          platform: connection.track
+            ? {
+                name: connection.track.replace("!", ""),
+                hasChanged: connection.track.includes("!"),
+              }
+            : null,
+        };
+      }),
+    };
+  } catch (error) {
+    if (response?.body) await response.body.cancel().catch(() => {});
+    await dispatcher?.destroy().catch(() => {});
+    dispatcher = undefined;
+    throw error;
+  } finally {
+    await dispatcher?.close();
+  }
 };
 
 const timetableSchema = z.object({
@@ -145,6 +238,8 @@ const timetableSchema = z.object({
   ),
 });
 
+const timetableEnvelopeSchema = z.object({ connections: z.array(z.unknown()) });
+
 const searchSchema = z.array(
   z.object({
     id: z.string().optional(),
diff --git a/packages/request-handler/src/update-checker.ts b/packages/request-handler/src/update-checker.ts
index 1cf4dbd6f..9bc2085cd 100644
--- a/packages/request-handler/src/update-checker.ts
+++ b/packages/request-handler/src/update-checker.ts
@@ -5,19 +5,114 @@ import { env } from "@homarr/common/env";
 import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
 import { createLogger } from "@homarr/core/infrastructure/logs";
 import { ErrorWithMetadata } from "@homarr/core/infrastructure/logs/error";
-import { createRequestHandler } from "./lib/request-handler";
+import { createGetSetChannel, createLockChannel } from "@homarr/redis";
 
 import packageJson from "../../../package.json";
 
 const logger = createLogger({ module: "updateCheckerRequestHandler" });
 
-export const updateCheckerRequestHandler = createRequestHandler({
-  async requestAsync(_) {
+const updateCheckTtlSeconds = 24 * 60 * 60;
+const updateCheckLockTtlSeconds = 2 * 60;
+const updateCheckWaitIntervalMs = 100;
+const updateCheckWaitAttempts = 50;
+
+type UpdateCheckCacheEntry = {
+  availableUpdates: Update[];
+  attemptedAt: number;
+  checkedAt: number | null;
+};
+
+const updateCheckCacheVersion = `v2:${packageJson.version}`;
+const freshUpdateCheckChannel = createGetSetChannel<UpdateCheckCacheEntry>(
+  `update-checker:fresh:${updateCheckCacheVersion}`,
+);
+const staleUpdateCheckChannel = createGetSetChannel<UpdateCheckCacheEntry>(
+  `update-checker:stale:${updateCheckCacheVersion}`,
+);
+const updateCheckLock = createLockChannel(`update-checker:lock:${updateCheckCacheVersion}`);
+
+const waitAsync = async (durationMs: number) =>
+  await new Promise<void>((resolve) => {
+    setTimeout(resolve, durationMs);
+  });
+
+const waitForConcurrentUpdateCheckAsync = async () => {
+  for (let attempt = 0; attempt < updateCheckWaitAttempts; attempt++) {
+    await waitAsync(updateCheckWaitIntervalMs);
+    const cached = await freshUpdateCheckChannel.getAsync();
+    if (cached) return cached;
+  }
+
+  return await staleUpdateCheckChannel.getAsync();
+};
+
+const getCachedAvailableUpdatesAsync = async (): Promise<UpdateCheckCacheEntry> => {
+  if (env.NO_EXTERNAL_CONNECTION) {
+    return {
+      availableUpdates: [],
+      attemptedAt: Date.now(),
+      checkedAt: null,
+    };
+  }
+
+  const cached = await freshUpdateCheckChannel.getAsync();
+  if (cached) return cached;
+
+  const staleBeforeRefresh = await staleUpdateCheckChannel.getAsync();
+  const lockToken = await updateCheckLock.acquireAsync(updateCheckLockTtlSeconds);
+  if (!lockToken) {
+    if (staleBeforeRefresh) return staleBeforeRefresh;
+    const concurrentResult = await waitForConcurrentUpdateCheckAsync();
+    if (concurrentResult) return concurrentResult;
+    throw new Error("Timed out waiting for the update check");
+  }
+
+  try {
+    const attemptedAt = Date.now();
     const availableUpdates = await getAvailableUpdatesAsync(packageJson.version);
-    return { availableUpdates };
-  },
-  cacheTtlMs: 30 * 60 * 1000,
-});
+    const result: UpdateCheckCacheEntry = {
+      availableUpdates,
+      attemptedAt,
+      checkedAt: attemptedAt,
+    };
+    await staleUpdateCheckChannel.setAsync(result);
+    await freshUpdateCheckChannel.setAsync(result, { ttlSeconds: updateCheckTtlSeconds });
+    return result;
+  } catch (error) {
+    const stale = await staleUpdateCheckChannel.getAsync();
+    const result: UpdateCheckCacheEntry = {
+      availableUpdates: stale?.availableUpdates ?? [],
+      attemptedAt: Date.now(),
+      checkedAt: stale?.checkedAt ?? null,
+    };
+    await freshUpdateCheckChannel.setAsync(result, { ttlSeconds: updateCheckTtlSeconds });
+    logger.warn("Failed to fetch available updates; suppressing retries for 24 hours", {
+      error: error instanceof Error ? error.message : String(error),
+      servingStale: stale !== null,
+    });
+    return result;
+  } finally {
+    try {
+      await updateCheckLock.releaseAsync(lockToken);
+    } catch (error) {
+      logger.warn("Failed to release the update-check lock", {
+        error: error instanceof Error ? error.message : String(error),
+      });
+    }
+  }
+};
+
+export const updateCheckerRequestHandler = {
+  handler: (_input: Record<string, never>) => ({
+    getDataAsync: async () => {
+      const result = await getCachedAvailableUpdatesAsync();
+      return {
+        data: { availableUpdates: result.availableUpdates },
+        timestamp: new Date(result.checkedAt ?? result.attemptedAt),
+      };
+    },
+  }),
+};
 
 interface Update {
   name: string | null;
diff --git a/packages/request-handler/src/vpn.ts b/packages/request-handler/src/vpn.ts
index ebca0fbeb..97182ab11 100644
--- a/packages/request-handler/src/vpn.ts
+++ b/packages/request-handler/src/vpn.ts
@@ -1,28 +1,16 @@
-import { createLogger } from "@homarr/core/infrastructure/logs";
 import type { IntegrationKindByCategory } from "@homarr/definitions";
 import { createIntegrationAsync } from "@homarr/integrations";
 import type { VpnSummary } from "@homarr/integrations/types";
 
 import { createIntegrationRequestHandler } from "./lib/integration-request-handler";
 
-const logger = createLogger({ module: "vpnRequestHandler" });
-
 export const vpnSummaryHandler = createIntegrationRequestHandler<
-  VpnSummary | null,
+  VpnSummary,
   IntegrationKindByCategory<"vpn">,
   Record<string, never>
 >({
   async requestAsync(integration, _input) {
-    try {
-      const integrationInstance = await createIntegrationAsync(integration);
-      return await integrationInstance.getSummaryAsync();
-    } catch (error) {
-      logger.warn("Failed to fetch VPN summary, marking as unavailable", {
-        integrationId: integration.id,
-        integrationKind: integration.kind,
-        error: error instanceof Error ? error.message : String(error),
-      });
-      return null;
-    }
+    const integrationInstance = await createIntegrationAsync(integration);
+    return await integrationInstance.getSummaryAsync();
   },
 });
diff --git a/packages/spotlight/package.json b/packages/spotlight/package.json
index b9c16aef8..7781ba78a 100644
--- a/packages/spotlight/package.json
+++ b/packages/spotlight/package.json
@@ -13,6 +13,8 @@
   },
   "exports": {
     ".": "./index.ts",
+    "./component": "./src/component.ts",
+    "./open": "./src/open.ts",
     "./styles.css": "./src/styles.css"
   },
   "scripts": {
diff --git a/packages/spotlight/src/component.ts b/packages/spotlight/src/component.ts
new file mode 100644
index 000000000..2f9b5eeef
--- /dev/null
+++ b/packages/spotlight/src/component.ts
@@ -0,0 +1,3 @@
+"use client";
+
+export { Spotlight } from "./components/spotlight";
diff --git a/packages/spotlight/src/components/actions/items/children-action-item.tsx b/packages/spotlight/src/components/actions/items/children-action-item.tsx
index 3d5427506..f56e46a23 100644
--- a/packages/spotlight/src/components/actions/items/children-action-item.tsx
+++ b/packages/spotlight/src/components/actions/items/children-action-item.tsx
@@ -1,5 +1,6 @@
 import { Spotlight } from "@mantine/spotlight";
 
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "@homarr/common";
 import { Link } from "@homarr/ui";
 
 import type { inferSearchInteractionOptions } from "../../../lib/interaction";
@@ -15,10 +16,18 @@ interface ChildrenActionItemProps {
 export const ChildrenActionItem = ({ childrenOptions, action, query, setChildrenOptions }: ChildrenActionItemProps) => {
   const interaction = action.useInteraction(childrenOptions.option, query);
 
+  const safeHref = interaction.type === "link" ? getSafeApplicationUrl(interaction.href) : undefined;
   const renderRoot =
-    interaction.type === "link"
+    interaction.type === "link" && safeHref
       ? (props: Record<string, unknown>) => {
-          return <Link href={interaction.href} target={interaction.newTab ? "_blank" : undefined} {...props} />;
+          return (
+            <Link
+              href={safeHref}
+              target={interaction.newTab ? "_blank" : undefined}
+              rel={interaction.newTab ? SAFE_NEW_TAB_REL : undefined}
+              {...props}
+            />
+          );
         }
       : undefined;
 
diff --git a/packages/spotlight/src/components/actions/items/group-action-item.tsx b/packages/spotlight/src/components/actions/items/group-action-item.tsx
index c97cc3b1f..faa465012 100644
--- a/packages/spotlight/src/components/actions/items/group-action-item.tsx
+++ b/packages/spotlight/src/components/actions/items/group-action-item.tsx
@@ -2,6 +2,7 @@ import { Spotlight } from "@mantine/spotlight";
 
 import type { TranslationObject } from "@homarr/translation";
 import { Link } from "@homarr/ui";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "@homarr/common";
 
 import type { SearchGroup } from "../../../lib/group";
 import type { inferSearchInteractionOptions } from "../../../lib/interaction";
@@ -31,10 +32,18 @@ export const SpotlightGroupActionItem = <TOption extends Record<string, unknown>
 
   const { key: _reactKey, ...optionProps } = option as unknown as { key?: unknown } & Record<string, unknown>;
 
+  const safeHref = interaction.type === "link" ? getSafeApplicationUrl(interaction.href) : undefined;
   const renderRoot =
-    interaction.type === "link"
+    interaction.type === "link" && safeHref
       ? (props: Record<string, unknown>) => {
-          return <Link href={interaction.href} target={interaction.newTab ? "_blank" : undefined} {...props} />;
+          return (
+            <Link
+              href={safeHref}
+              target={interaction.newTab ? "_blank" : undefined}
+              rel={interaction.newTab ? SAFE_NEW_TAB_REL : undefined}
+              {...props}
+            />
+          );
         }
       : undefined;
 
diff --git a/packages/spotlight/src/components/spotlight.tsx b/packages/spotlight/src/components/spotlight.tsx
index f1e589237..6ed32c5be 100644
--- a/packages/spotlight/src/components/spotlight.tsx
+++ b/packages/spotlight/src/components/spotlight.tsx
@@ -11,19 +11,19 @@ import { hotkeys } from "@homarr/definitions";
 import type { TranslationObject } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
 
-import type { OpenMediaRequestSearchOptions } from "../index";
+import {
+  consumePendingMediaRequestSearch,
+  consumePendingSpotlightOpen,
+  mediaRequestSearchEvent,
+  spotlightOpenEvent,
+} from "../open";
+import type { OpenMediaRequestSearchOptions } from "../open";
 import type { inferSearchInteractionOptions } from "../lib/interaction";
 import type { SearchMode } from "../lib/mode";
 import { searchModes } from "../modes";
 import { useHomeEmptyGroupsWithPreferences } from "../modes/help/home-empty-groups";
 import { contextSpecificSearchGroups } from "../modes/home/context-specific-group";
-import {
-  mediaRequestSearchEvent,
-  mediaRequestSearchScopeAtom,
-  selectAction,
-  spotlightActions,
-  spotlightStore,
-} from "../spotlight-store";
+import { mediaRequestSearchScopeAtom, selectAction, spotlightActions, spotlightStore } from "../spotlight-store";
 import { SpotlightChildrenActions } from "./actions/children-actions";
 import { SpotlightActionGroups } from "./actions/groups/action-group";
 
@@ -65,6 +65,17 @@ const SpotlightWithActiveMode = ({ modeState, queryState, activeMode }: Spotligh
   const homeEmptyGroups = useHomeEmptyGroupsWithPreferences();
   const hasModeCharacter = activeMode.modeKey !== defaultMode && activeMode.character !== undefined;
 
+  useEffect(() => {
+    const handleOpen = () => {
+      consumePendingSpotlightOpen();
+      spotlightActions.open();
+    };
+
+    window.addEventListener(spotlightOpenEvent, handleOpen);
+    if (consumePendingSpotlightOpen()) spotlightActions.open();
+    return () => window.removeEventListener(spotlightOpenEvent, handleOpen);
+  }, []);
+
   const clearChildrenStack = useCallback(() => {
     setChildrenStack([]);
   }, []);
@@ -85,17 +96,24 @@ const SpotlightWithActiveMode = ({ modeState, queryState, activeMode }: Spotligh
   }, [setQuery]);
 
   useEffect(() => {
-    const handleMediaRequestSearch = (event: Event) => {
-      const { integrationIds, query } = (event as CustomEvent<OpenMediaRequestSearchOptions>).detail ?? {};
+    const applyMediaRequestSearch = ({ integrationIds, query: searchQuery }: OpenMediaRequestSearchOptions) => {
       setMediaRequestSearchScope({ integrationIds });
       setMode("media");
       clearChildrenStack();
-      setQuery(query ?? "");
+      setQuery(searchQuery ?? "");
       spotlightActions.open();
       setTimeout(() => selectAction(0, spotlightStore));
     };
 
+    const handleMediaRequestSearch = (event: Event) => {
+      consumePendingMediaRequestSearch();
+      const { integrationIds, query: searchQuery } = (event as CustomEvent<OpenMediaRequestSearchOptions>).detail ?? {};
+      applyMediaRequestSearch({ integrationIds, query: searchQuery });
+    };
+
     window.addEventListener(mediaRequestSearchEvent, handleMediaRequestSearch);
+    const pendingSearch = consumePendingMediaRequestSearch();
+    if (pendingSearch) applyMediaRequestSearch(pendingSearch);
     return () => {
       window.removeEventListener(mediaRequestSearchEvent, handleMediaRequestSearch);
     };
@@ -138,6 +156,7 @@ const SpotlightWithActiveMode = ({ modeState, queryState, activeMode }: Spotligh
       store={spotlightStore}
     >
       <MantineSpotlight.Search
+        data-homarr-dev-benchmark-spotlight
         placeholder={`${t("search.placeholder")}...`}
         ref={inputRef}
         leftSectionWidth={hasModeCharacter ? 80 : 48}
diff --git a/packages/spotlight/src/index.ts b/packages/spotlight/src/index.ts
index 4c428f3a0..88ad028ea 100644
--- a/packages/spotlight/src/index.ts
+++ b/packages/spotlight/src/index.ts
@@ -1,29 +1,13 @@
 "use client";
 
-import { mediaRequestSearchEvent, spotlightActions } from "./spotlight-store";
+import { spotlightActions } from "./spotlight-store";
 
 export { Spotlight } from "./components/spotlight";
-export { closeSpotlight, openSpotlight, openMediaRequestSearch };
+export { openSpotlight, openMediaRequestSearch, mediaRequestSearchEvent } from "./open";
 export {
   SpotlightProvider,
   useRegisterSpotlightContextResults,
   useRegisterSpotlightContextActions,
 } from "./modes/home/context";
 
-const openSpotlight = spotlightActions.open;
-const closeSpotlight = spotlightActions.close;
-
-export interface OpenMediaRequestSearchOptions {
-  integrationIds?: string[];
-  query?: string;
-}
-
-const openMediaRequestSearch = (options: OpenMediaRequestSearchOptions = {}) => {
-  if (typeof window !== "undefined") {
-    window.dispatchEvent(new CustomEvent<OpenMediaRequestSearchOptions>(mediaRequestSearchEvent, { detail: options }));
-  }
-
-  spotlightActions.open();
-};
-
-export { mediaRequestSearchEvent };
+export const closeSpotlight = spotlightActions.close;
diff --git a/packages/spotlight/src/open.spec.ts b/packages/spotlight/src/open.spec.ts
new file mode 100644
index 000000000..9b9c07f83
--- /dev/null
+++ b/packages/spotlight/src/open.spec.ts
@@ -0,0 +1,54 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  consumePendingMediaRequestSearch,
+  consumePendingSpotlightOpen,
+  hasPendingSpotlightOpen,
+  mediaRequestSearchEvent,
+  openMediaRequestSearch,
+  openSpotlight,
+  spotlightOpenEvent,
+} from "./open";
+
+describe("lazy Spotlight open bridge", () => {
+  beforeEach(() => {
+    consumePendingSpotlightOpen();
+    consumePendingMediaRequestSearch();
+  });
+
+  it("keeps a pre-mount open request until the lazy component consumes it", () => {
+    const listener = vi.fn();
+    window.addEventListener(spotlightOpenEvent, listener);
+
+    openSpotlight();
+
+    expect(listener).toHaveBeenCalledOnce();
+    expect(consumePendingSpotlightOpen()).toBe(true);
+    expect(consumePendingSpotlightOpen()).toBe(false);
+    window.removeEventListener(spotlightOpenEvent, listener);
+  });
+
+  it("lets a listener installed after the request discover the pending open", () => {
+    openSpotlight();
+
+    expect(hasPendingSpotlightOpen()).toBe(true);
+    expect(consumePendingSpotlightOpen()).toBe(true);
+    expect(hasPendingSpotlightOpen()).toBe(false);
+  });
+
+  it("retains media options while dispatching both mount and media events", () => {
+    const openListener = vi.fn();
+    const mediaListener = vi.fn();
+    window.addEventListener(spotlightOpenEvent, openListener);
+    window.addEventListener(mediaRequestSearchEvent, mediaListener);
+
+    openMediaRequestSearch({ integrationIds: ["integration-a"], query: "movie" });
+
+    expect(openListener).toHaveBeenCalledOnce();
+    expect(mediaListener).toHaveBeenCalledOnce();
+    expect(consumePendingSpotlightOpen()).toBe(true);
+    expect(consumePendingMediaRequestSearch()).toEqual({ integrationIds: ["integration-a"], query: "movie" });
+    window.removeEventListener(spotlightOpenEvent, openListener);
+    window.removeEventListener(mediaRequestSearchEvent, mediaListener);
+  });
+});
diff --git a/packages/spotlight/src/open.ts b/packages/spotlight/src/open.ts
new file mode 100644
index 000000000..53aa5173f
--- /dev/null
+++ b/packages/spotlight/src/open.ts
@@ -0,0 +1,44 @@
+"use client";
+
+export const spotlightOpenEvent = "homarr:spotlight:open";
+export const mediaRequestSearchEvent = "homarr:spotlight:media-request-search";
+
+export interface OpenMediaRequestSearchOptions {
+  integrationIds?: string[];
+  query?: string;
+}
+
+let pendingMediaRequestSearch: OpenMediaRequestSearchOptions | null = null;
+let pendingSpotlightOpen = false;
+
+const requestSpotlightMount = () => {
+  if (typeof window !== "undefined") window.dispatchEvent(new Event(spotlightOpenEvent));
+};
+
+export const openSpotlight = () => {
+  pendingSpotlightOpen = true;
+  requestSpotlightMount();
+};
+
+export const consumePendingSpotlightOpen = () => {
+  const pending = pendingSpotlightOpen;
+  pendingSpotlightOpen = false;
+  return pending;
+};
+
+export const hasPendingSpotlightOpen = () => pendingSpotlightOpen;
+
+export const consumePendingMediaRequestSearch = () => {
+  const pending = pendingMediaRequestSearch;
+  pendingMediaRequestSearch = null;
+  return pending;
+};
+
+export const openMediaRequestSearch = (options: OpenMediaRequestSearchOptions = {}) => {
+  pendingMediaRequestSearch = options;
+  openSpotlight();
+
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(new CustomEvent<OpenMediaRequestSearchOptions>(mediaRequestSearchEvent, { detail: options }));
+  }
+};
diff --git a/packages/spotlight/src/spotlight-store.ts b/packages/spotlight/src/spotlight-store.ts
index a144cdc94..f1fc2cedc 100644
--- a/packages/spotlight/src/spotlight-store.ts
+++ b/packages/spotlight/src/spotlight-store.ts
@@ -12,7 +12,6 @@ export interface MediaRequestSearchScope {
 }
 
 export const mediaRequestSearchScopeAtom = atom<MediaRequestSearchScope>({});
-export const mediaRequestSearchEvent = "homarr:spotlight:media-request-search";
 
 export const setSelectedAction = (index: number, store: SpotlightStore) => {
   store.updateState((state) => ({ ...state, selected: index }));
diff --git a/packages/translation/package.json b/packages/translation/package.json
index 4dc9d8cd6..411d2dd07 100644
--- a/packages/translation/package.json
+++ b/packages/translation/package.json
@@ -16,6 +16,7 @@
     "./client": "./src/client/index.ts",
     "./server": "./src/server.ts",
     "./middleware": "./src/middleware.ts",
+    "./languages": "./src/languages.ts",
     "./request": "./src/request.ts",
     "./dayjs": "./src/dayjs.ts"
   },
diff --git a/packages/translation/src/client/index.ts b/packages/translation/src/client/index.ts
index 5c6755883..62b684d6b 100644
--- a/packages/translation/src/client/index.ts
+++ b/packages/translation/src/client/index.ts
@@ -6,7 +6,7 @@ import type { SupportedLanguage } from "../config";
 import type englishTranslation from "../lang/en.json";
 
 export { useChangeLocale } from "./use-change-locale";
-export { useCurrentLocale } from "./use-current-locale";
+export { useCurrentIntlLocale, useCurrentLocale } from "./use-current-locale";
 
 declare module "next-intl" {
   interface AppConfig {
@@ -15,13 +15,10 @@ declare module "next-intl" {
   }
 }
 
-export const { useI18n, useScopedI18n } = {
-  useI18n: useTranslations,
-  useScopedI18n: useTranslations,
-};
-
-export const { useI18nMessages } = {
-  useI18nMessages: () => useMessages(),
-};
+// Keep these as direct exports so Turbopack and webpack can statically inspect
+// the client package's public surface.
+export const useI18n = useTranslations;
+export const useScopedI18n = useTranslations;
+export const useI18nMessages = () => useMessages();
 
 export { useTranslations };
diff --git a/packages/translation/src/client/use-current-locale.ts b/packages/translation/src/client/use-current-locale.ts
index a0e796010..6a8ec03a5 100644
--- a/packages/translation/src/client/use-current-locale.ts
+++ b/packages/translation/src/client/use-current-locale.ts
@@ -1,3 +1,7 @@
 import { useLocale } from "next-intl";
 
+import { getIntlLocale } from "../config";
+
 export const useCurrentLocale = useLocale;
+
+export const useCurrentIntlLocale = () => getIntlLocale(useLocale());
diff --git a/packages/translation/src/config.spec.ts b/packages/translation/src/config.spec.ts
new file mode 100644
index 000000000..55c3adcbb
--- /dev/null
+++ b/packages/translation/src/config.spec.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+
+import { getIntlLocale } from "./config";
+
+describe("getIntlLocale", () => {
+  it("maps Homarr-specific locale keys to canonical Intl locales", () => {
+    expect(getIntlLocale("cn")).toBe("zh-CN");
+    expect(getIntlLocale("zh")).toBe("zh-TW");
+    expect(getIntlLocale("cr")).toBe("en");
+  });
+
+  it("preserves locale keys that Intl already understands", () => {
+    expect(getIntlLocale("fr")).toBe("fr");
+    expect(getIntlLocale("de-CH")).toBe("de-CH");
+  });
+});
diff --git a/packages/translation/src/config.ts b/packages/translation/src/config.ts
index 6acf807d4..883bc80c1 100644
--- a/packages/translation/src/config.ts
+++ b/packages/translation/src/config.ts
@@ -1,6 +1,9 @@
 import type { MRT_Localization } from "mantine-react-table";
 
-import { objectKeys } from "@homarr/common";
+import type { SupportedLanguage } from "./languages";
+
+export { supportedLanguages } from "./languages";
+export type { SupportedLanguage } from "./languages";
 
 export const localeConfigurations = {
   ca: {
@@ -433,10 +436,15 @@ export type LanguageIconDefinition =
       url: string;
     };
 
-export const supportedLanguages = objectKeys(localeConfigurations);
-export type SupportedLanguage = (typeof supportedLanguages)[number];
+export { fallbackLocale } from "./languages";
 
-export const fallbackLocale = "en" satisfies SupportedLanguage;
+const intlLocaleOverrides: Partial<Record<SupportedLanguage, string>> = {
+  cn: "zh-CN",
+  cr: "en",
+  zh: "zh-TW",
+};
+
+export const getIntlLocale = (locale: SupportedLanguage): string => intlLocaleOverrides[locale] ?? locale;
 
 export const isLocaleRTL = (locale: SupportedLanguage) =>
   "isRTL" in localeConfigurations[locale] && localeConfigurations[locale].isRTL;
diff --git a/packages/translation/src/index.ts b/packages/translation/src/index.ts
index fff1e95aa..4a234d3d5 100644
--- a/packages/translation/src/index.ts
+++ b/packages/translation/src/index.ts
@@ -1,5 +1,5 @@
-import type { SupportedLanguage } from "./config";
-import { supportedLanguages } from "./config";
+import type { SupportedLanguage } from "./languages";
+import { supportedLanguages } from "./languages";
 import type { stringOrTranslation, TranslationFunction } from "./type";
 
 export * from "./type";
diff --git a/packages/translation/src/lang/ca.json b/packages/translation/src/lang/ca.json
index 446cae858..d1b3d026f 100644
--- a/packages/translation/src/lang/ca.json
+++ b/packages/translation/src/lang/ca.json
@@ -688,211 +688,6 @@
       "add": ""
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Nova secció dinàmica",
-        "remove": "Elimina la secció dinàmica"
+        "create": "Nou contenidor",
+        "remove": "Elimina el contenidor"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Elimina la secció dinàmica",
-        "message": "Esteu segur que voleu eliminar aquesta secció dinàmica? Els elements es mouran a la mateixa ubicació dins la secció pare."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Nom"
-        }
-      },
-      "action": {
-        "create": "Nova categoria",
-        "edit": "Canvia el nom de la categoria",
-        "remove": "Elimina la categoria",
-        "moveUp": "Mou cap amunt",
-        "moveDown": "Mou cap avall",
-        "createAbove": "Nova categoria a sobre",
-        "createBelow": "Nova categoria a sota",
-        "openAllInNewTabs": "Obrir-ho tot en pestanyes"
-      },
-      "create": {
-        "title": "Nova categoria",
-        "submit": "Afegeix categoria"
-      },
-      "remove": {
-        "title": "Elimina la categoria",
-        "message": "Esteu segur que voleu eliminar la categoria {name}?"
-      },
-      "edit": {
-        "title": "Canvia el nom de la categoria",
-        "submit": "Canvia el nom de la categoria"
-      },
-      "menu": {
-        "label": {
-          "create": "Nova categoria",
-          "changePosition": "Canvia la posició",
-          "settings": ""
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Obrir-ho tot en pestanyes",
-        "text": "Alguns navegadors poden bloquejar l'obertura massiva de pestanyes per motius de seguretat. Homarr no ha pogut obrir totes les finestres perquè el teu navegador ha bloquejat aquesta acció. Si us plau, permet \"Obrir finestres emergents\" i torna-ho a intentar."
+        "title": "Elimina el contenidor",
+        "message": "Esteu segur que voleu eliminar aquest contenidor? Els elements es mouran a la mateixa ubicació dins la secció pare."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "",
           "description": ""
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "S'està reproduint",
         "user": "Usuari",
@@ -2734,6 +2512,9 @@
         "id": "ID",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -2802,193 +2583,6 @@
         "internalServerError": ""
       }
     },
-    "patchmon": {
-      "name": "",
-      "description": "",
-      "title": "",
-      "totalHosts": "",
-      "hostsNeedingUpdates": "",
-      "securityUpdates": "",
-      "upToDateHosts": "",
-      "hostsWithSecurityUpdates": "",
-      "recentUpdates24h": "",
-      "totalOutdatedPackages": "",
-      "totalRepos": "",
-      "osDistribution": "",
-      "compliance": "",
-      "complianceRatio": "",
-      "lastUpdated": "",
-      "option": {
-        "showTotalHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsNeedingUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showUpToDateHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showRecentUpdates24h": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalOutdatedPackages": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalRepos": {
-          "label": "",
-          "description": ""
-        },
-        "enableThresholdColors": {
-          "label": "",
-          "description": ""
-        },
-        "useCustomThresholds": {
-          "label": "",
-          "description": ""
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "",
-            "percent": ""
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "showOsDistribution": {
-          "label": "",
-          "description": ""
-        },
-        "osDistributionLimit": {
-          "label": "",
-          "description": "",
-          "option": {
-            "3": "",
-            "5": "",
-            "10": "",
-            "all": ""
-          }
-        },
-        "showOsVersion": {
-          "label": "",
-          "description": ""
-        },
-        "showComplianceHero": {
-          "label": "",
-          "description": ""
-        },
-        "osDisplayMode": {
-          "label": "",
-          "description": "",
-          "option": {
-            "bars": "",
-            "donut": ""
-          }
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
-    "bazarr": {
-      "name": "",
-      "description": "",
-      "episodes": "",
-      "movies": "",
-      "providers": "",
-      "status": "",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "",
-          "description": ""
-        },
-        "showMissingMovies": {
-          "label": "",
-          "description": ""
-        },
-        "showProviderIssues": {
-          "label": "",
-          "description": ""
-        },
-        "showHealthIssues": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "immich-serverStats": {
       "name": "",
       "description": "",
@@ -3361,35 +2955,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showMissing": {
-          "label": ""
-        },
-        "showQueued": {
-          "label": ""
-        },
-        "pageSize": {
-          "label": ""
-        }
-      },
-      "tab": {
-        "missing": "",
-        "queued": ""
-      },
-      "type": {
-        "movie": "",
-        "episode": ""
-      },
-      "empty": {
-        "missing": "",
-        "queued": "",
-        "noTabsEnabled": ""
-      },
-      "timeLeft": ""
-    },
     "rssFeed": {
       "name": "Fonts RSS",
       "description": "Monitoritzeu i mostreu una o més fonts RSS, ATOM o JSON genèriques",
@@ -3718,40 +3283,6 @@
         "internalServerError": ""
       }
     },
-    "traefik": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showTcp": {
-          "label": ""
-        },
-        "showUdp": {
-          "label": ""
-        },
-        "showEntryPoints": {
-          "label": ""
-        }
-      },
-      "instances": "",
-      "versionUnknown": "",
-      "summary": {
-        "routers": "",
-        "entryPoints": ""
-      },
-      "resource": {
-        "routers": "",
-        "services": "",
-        "middlewares": ""
-      },
-      "status": {
-        "healthy": "",
-        "errors": "",
-        "warnings": ""
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "audioStats": {
       "name": "",
       "description": "",
@@ -3768,18 +3299,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3332,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3406,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "",
       "description": "",
@@ -3954,11 +3451,19 @@
         },
         "showAgent": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "",
@@ -4151,6 +3656,256 @@
           "subtitle": ""
         }
       }
+    },
+    "patchmon": {
+      "name": "",
+      "description": "",
+      "title": "",
+      "totalHosts": "",
+      "hostsNeedingUpdates": "",
+      "securityUpdates": "",
+      "upToDateHosts": "",
+      "hostsWithSecurityUpdates": "",
+      "recentUpdates24h": "",
+      "totalOutdatedPackages": "",
+      "totalRepos": "",
+      "osDistribution": "",
+      "compliance": "",
+      "complianceRatio": "",
+      "lastUpdated": "",
+      "option": {
+        "showTotalHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsNeedingUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showUpToDateHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showRecentUpdates24h": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalOutdatedPackages": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalRepos": {
+          "label": "",
+          "description": ""
+        },
+        "enableThresholdColors": {
+          "label": "",
+          "description": ""
+        },
+        "useCustomThresholds": {
+          "label": "",
+          "description": ""
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "",
+            "percent": ""
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "showOsDistribution": {
+          "label": "",
+          "description": ""
+        },
+        "osDistributionLimit": {
+          "label": "",
+          "description": "",
+          "option": {
+            "3": "",
+            "5": "",
+            "10": "",
+            "all": ""
+          }
+        },
+        "showOsVersion": {
+          "label": "",
+          "description": ""
+        },
+        "showComplianceHero": {
+          "label": "",
+          "description": ""
+        },
+        "osDisplayMode": {
+          "label": "",
+          "description": "",
+          "option": {
+            "bars": "",
+            "donut": ""
+          }
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "bazarr": {
+      "name": "",
+      "description": "",
+      "episodes": "",
+      "movies": "",
+      "providers": "",
+      "status": "",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "",
+          "description": ""
+        },
+        "showMissingMovies": {
+          "label": "",
+          "description": ""
+        },
+        "showProviderIssues": {
+          "label": "",
+          "description": ""
+        },
+        "showHealthIssues": {
+          "label": "",
+          "description": ""
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "mediaMissing": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showMissing": {
+          "label": ""
+        },
+        "showQueued": {
+          "label": ""
+        },
+        "pageSize": {
+          "label": ""
+        }
+      },
+      "tab": {
+        "missing": "",
+        "queued": ""
+      },
+      "type": {
+        "movie": "",
+        "episode": ""
+      },
+      "empty": {
+        "missing": "",
+        "queued": "",
+        "noTabsEnabled": ""
+      },
+      "timeLeft": ""
+    },
+    "traefik": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showTcp": {
+          "label": ""
+        },
+        "showUdp": {
+          "label": ""
+        },
+        "showEntryPoints": {
+          "label": ""
+        }
+      },
+      "instances": "",
+      "versionUnknown": "",
+      "summary": {
+        "routers": "",
+        "entryPoints": ""
+      },
+      "resource": {
+        "routers": "",
+        "services": "",
+        "middlewares": ""
+      },
+      "status": {
+        "healthy": "",
+        "errors": "",
+        "warnings": ""
+      },
+      "error": {
+        "internalServerError": ""
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Inici",
         "boards": "Taulers",
         "apps": "Aplicacions",
         "integrations": "Integracions",
-        "customWidgets": "",
         "searchEngies": "Motors de cerca",
         "medias": "Multimèdia",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Elimina",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Contenidors eliminats",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Gestiona",
       "boards": {
         "label": "Taulers"
@@ -5707,18 +5466,6 @@
           "label": "Edita"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Usuaris",
         "create": {
diff --git a/packages/translation/src/lang/cn.json b/packages/translation/src/lang/cn.json
index 11bf03043..ba18597e1 100644
--- a/packages/translation/src/lang/cn.json
+++ b/packages/translation/src/lang/cn.json
@@ -688,211 +688,6 @@
       "add": "添加应用"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "自定义小部件",
-        "noResults": "暂无自定义小部件。创建您的第一个！",
-        "loading": "加载中……"
-      },
-      "create": {
-        "title": "创建自定义小部件",
-        "subtitle": "定义 API URL、身份验证以及如何显示响应数据。"
-      },
-      "edit": {
-        "title": "编辑自定义小部件"
-      }
-    },
-    "action": {
-      "create": "创建",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "新建动态部分",
-        "remove": "删除动态部分"
+        "create": "新建容器",
+        "remove": "删除容器"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "删除动态部分",
-        "message": "你确定你要删除这个动态部分？项目将被移动到父节的相同位置。"
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "名称"
-        }
-      },
-      "action": {
-        "create": "新建分类",
-        "edit": "重命名分类",
-        "remove": "删除分类",
-        "moveUp": "上移",
-        "moveDown": "下移",
-        "createAbove": "上方新建分类",
-        "createBelow": "下方新建分类",
-        "openAllInNewTabs": "在标签中打开全部"
-      },
-      "create": {
-        "title": "新建分类",
-        "submit": "添加分类"
-      },
-      "remove": {
-        "title": "删除分类",
-        "message": "您确定要删除分类 {name} 吗？"
-      },
-      "edit": {
-        "title": "重命名分类",
-        "submit": "重命名分类"
-      },
-      "menu": {
-        "label": {
-          "create": "新建分类",
-          "changePosition": "换位",
-          "settings": "设置"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "在标签中打开全部",
-        "text": "某些浏览器可能出于安全原因阻止大批打开标签页。 Homarr 无法打开所有窗口，因为您的浏览器屏蔽了此操作。请允许“打开弹出窗口”并重试。"
+        "title": "删除容器",
+        "message": "你确定要删除这个容器吗？项目将被移动到父级区域的相同位置。"
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": "倒序"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "获取容器统计信息失败"
+        "internalServerError": "获取容器统计信息失败",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "只显示当前正在播放",
           "description": "禁用此功能对plex不起作用"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "正在播放",
         "user": "用户",
@@ -2734,6 +2512,9 @@
         "id": "ID",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -2802,193 +2583,6 @@
         "internalServerError": "获取 Paperless-ngx 数据失败"
       }
     },
-    "patchmon": {
-      "name": "",
-      "description": "",
-      "title": "",
-      "totalHosts": "",
-      "hostsNeedingUpdates": "",
-      "securityUpdates": "",
-      "upToDateHosts": "",
-      "hostsWithSecurityUpdates": "",
-      "recentUpdates24h": "",
-      "totalOutdatedPackages": "",
-      "totalRepos": "",
-      "osDistribution": "",
-      "compliance": "",
-      "complianceRatio": "",
-      "lastUpdated": "",
-      "option": {
-        "showTotalHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsNeedingUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showUpToDateHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showRecentUpdates24h": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalOutdatedPackages": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalRepos": {
-          "label": "",
-          "description": ""
-        },
-        "enableThresholdColors": {
-          "label": "",
-          "description": ""
-        },
-        "useCustomThresholds": {
-          "label": "",
-          "description": ""
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "",
-            "percent": ""
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "showOsDistribution": {
-          "label": "",
-          "description": ""
-        },
-        "osDistributionLimit": {
-          "label": "",
-          "description": "",
-          "option": {
-            "3": "",
-            "5": "",
-            "10": "",
-            "all": ""
-          }
-        },
-        "showOsVersion": {
-          "label": "",
-          "description": ""
-        },
-        "showComplianceHero": {
-          "label": "",
-          "description": ""
-        },
-        "osDisplayMode": {
-          "label": "",
-          "description": "",
-          "option": {
-            "bars": "",
-            "donut": ""
-          }
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
-    "bazarr": {
-      "name": "",
-      "description": "",
-      "episodes": "",
-      "movies": "",
-      "providers": "",
-      "status": "",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "",
-          "description": ""
-        },
-        "showMissingMovies": {
-          "label": "",
-          "description": ""
-        },
-        "showProviderIssues": {
-          "label": "",
-          "description": ""
-        },
-        "showHealthIssues": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "immich-serverStats": {
       "name": "Immich 服务器统计",
       "description": "有关您的 Immich 实例的信息",
@@ -3361,35 +2955,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showMissing": {
-          "label": ""
-        },
-        "showQueued": {
-          "label": ""
-        },
-        "pageSize": {
-          "label": ""
-        }
-      },
-      "tab": {
-        "missing": "",
-        "queued": ""
-      },
-      "type": {
-        "movie": "",
-        "episode": ""
-      },
-      "empty": {
-        "missing": "",
-        "queued": "",
-        "noTabsEnabled": ""
-      },
-      "timeLeft": ""
-    },
     "rssFeed": {
       "name": "RSS 订阅",
       "description": "监视和显示一个或多个通用 RSS、ATOM 或 JSON 源",
@@ -3718,40 +3283,6 @@
         "internalServerError": "获取运行时间数据失败"
       }
     },
-    "traefik": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showTcp": {
-          "label": ""
-        },
-        "showUdp": {
-          "label": ""
-        },
-        "showEntryPoints": {
-          "label": ""
-        }
-      },
-      "instances": "",
-      "versionUnknown": "",
-      "summary": {
-        "routers": "",
-        "entryPoints": ""
-      },
-      "resource": {
-        "routers": "",
-        "services": "",
-        "middlewares": ""
-      },
-      "status": {
-        "healthy": "",
-        "errors": "",
-        "warnings": ""
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "audioStats": {
       "name": "音频统计",
       "description": "来自 Navidrome 或 Audiobookshelf 的库和播放统计信息",
@@ -3768,18 +3299,6 @@
           "label": "显示歌曲",
           "description": "显示音乐库中歌曲的总数 (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "显示正在播放",
-          "description": "显示当前播放的曲目 (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "显示正在播放列表",
-          "description": "显示单个曲目而不仅仅是活跃流计数 (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "最大正在播放项目数",
-          "description": "正在播放列表中显示的最大曲目数 (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "显示库数量",
           "description": "显示实例中的库数量 (Audiobookshelf)"
@@ -3813,8 +3332,6 @@
       "podcasts": "播客",
       "listeningTime": "收听时长",
       "activeSessions": "活跃会话",
-      "nowPlaying": "正在播放",
-      "nowPlayingCount": "{count, plural, other {# 个流}}",
       "error": {
         "internalServerError": "获取音频统计数据失败"
       }
@@ -3889,26 +3406,6 @@
         "unhealthy": "异常"
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Beszel 系统（表格）",
       "description": "所有 Beszel 监控系统的表格视图，具有可排序列和状态指示器",
@@ -3954,11 +3451,19 @@
         },
         "showAgent": {
           "label": "显示代理版本"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "未找到系统",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "系统",
@@ -4151,6 +3656,256 @@
           "subtitle": "Docker 容器的网络流量"
         }
       }
+    },
+    "patchmon": {
+      "name": "",
+      "description": "",
+      "title": "",
+      "totalHosts": "",
+      "hostsNeedingUpdates": "",
+      "securityUpdates": "",
+      "upToDateHosts": "",
+      "hostsWithSecurityUpdates": "",
+      "recentUpdates24h": "",
+      "totalOutdatedPackages": "",
+      "totalRepos": "",
+      "osDistribution": "",
+      "compliance": "",
+      "complianceRatio": "",
+      "lastUpdated": "",
+      "option": {
+        "showTotalHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsNeedingUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showUpToDateHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showRecentUpdates24h": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalOutdatedPackages": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalRepos": {
+          "label": "",
+          "description": ""
+        },
+        "enableThresholdColors": {
+          "label": "",
+          "description": ""
+        },
+        "useCustomThresholds": {
+          "label": "",
+          "description": ""
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "",
+            "percent": ""
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "showOsDistribution": {
+          "label": "",
+          "description": ""
+        },
+        "osDistributionLimit": {
+          "label": "",
+          "description": "",
+          "option": {
+            "3": "",
+            "5": "",
+            "10": "",
+            "all": ""
+          }
+        },
+        "showOsVersion": {
+          "label": "",
+          "description": ""
+        },
+        "showComplianceHero": {
+          "label": "",
+          "description": ""
+        },
+        "osDisplayMode": {
+          "label": "",
+          "description": "",
+          "option": {
+            "bars": "",
+            "donut": ""
+          }
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "bazarr": {
+      "name": "",
+      "description": "",
+      "episodes": "",
+      "movies": "",
+      "providers": "",
+      "status": "",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "",
+          "description": ""
+        },
+        "showMissingMovies": {
+          "label": "",
+          "description": ""
+        },
+        "showProviderIssues": {
+          "label": "",
+          "description": ""
+        },
+        "showHealthIssues": {
+          "label": "",
+          "description": ""
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "mediaMissing": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showMissing": {
+          "label": ""
+        },
+        "showQueued": {
+          "label": ""
+        },
+        "pageSize": {
+          "label": ""
+        }
+      },
+      "tab": {
+        "missing": "",
+        "queued": ""
+      },
+      "type": {
+        "movie": "",
+        "episode": ""
+      },
+      "empty": {
+        "missing": "",
+        "queued": "",
+        "noTabsEnabled": ""
+      },
+      "timeLeft": ""
+    },
+    "traefik": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showTcp": {
+          "label": ""
+        },
+        "showUdp": {
+          "label": ""
+        },
+        "showEntryPoints": {
+          "label": ""
+        }
+      },
+      "instances": "",
+      "versionUnknown": "",
+      "summary": {
+        "routers": "",
+        "entryPoints": ""
+      },
+      "resource": {
+        "routers": "",
+        "services": "",
+        "middlewares": ""
+      },
+      "status": {
+        "healthy": "",
+        "errors": "",
+        "warnings": ""
+      },
+      "error": {
+        "internalServerError": ""
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "首页",
         "boards": "面板",
         "apps": "应用",
         "integrations": "集成",
-        "customWidgets": "",
         "searchEngies": "搜索",
         "medias": "媒体",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "删除",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "容器已删除",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "管理中心",
       "boards": {
         "label": "面板"
@@ -5707,18 +5466,6 @@
           "label": "编辑"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "用户",
         "create": {
diff --git a/packages/translation/src/lang/cr.json b/packages/translation/src/lang/cr.json
index ecfba6a40..c3258d770 100644
--- a/packages/translation/src/lang/cr.json
+++ b/packages/translation/src/lang/cr.json
@@ -710,14 +710,7 @@
       "delete": "crwdns5301:0crwdne5301:0",
       "deleteConfirm": "crwdns5303:0{name}crwdne5303:0",
       "export": "crwdns5305:0crwdne5305:0",
-      "addMapping": "crwdns5307:0crwdne5307:0",
-      "addColumn": "crwdns5309:0crwdne5309:0",
       "edit": "crwdns5311:0crwdne5311:0",
-      "removeMapping": "crwdns5313:0crwdne5313:0",
-      "removeColumn": "crwdns5315:0crwdne5315:0",
-      "addItem": "crwdns5317:0crwdne5317:0",
-      "removeItem": "crwdns5319:0crwdne5319:0",
-      "addBar": "crwdns5321:0crwdne5321:0",
       "duplicate": "crwdns5323:0crwdne5323:0",
       "copyAiPrompt": "crwdns5325:0crwdne5325:0",
       "enable": "crwdns5327:0crwdne5327:0",
@@ -727,140 +720,7 @@
     "field": {
       "name": "crwdns5333:0crwdne5333:0",
       "description": "crwdns5335:0crwdne5335:0",
-      "iconUrl": "crwdns5337:0crwdne5337:0",
-      "url": "crwdns5339:0crwdne5339:0",
-      "authType": "crwdns5341:0crwdne5341:0",
-      "headerName": "crwdns5343:0crwdne5343:0",
-      "method": "crwdns5345:0crwdne5345:0",
-      "requestBody": "crwdns5347:0crwdne5347:0",
-      "displayType": "crwdns5349:0crwdne5349:0",
-      "jsonPath": "crwdns5351:0crwdne5351:0",
-      "jsonPathHint": "crwdns5353:0crwdne5353:0",
-      "label": "crwdns5355:0crwdne5355:0",
-      "unit": "crwdns5357:0crwdne5357:0",
-      "mappings": "crwdns5359:0crwdne5359:0",
-      "tablePath": "crwdns5361:0crwdne5361:0",
-      "tablePathHint": "crwdns5363:0crwdne5363:0",
-      "columns": "crwdns5365:0crwdne5365:0",
-      "header": "crwdns5367:0crwdne5367:0",
-      "items": "crwdns5369:0crwdne5369:0",
-      "gridColumns": "crwdns5371:0crwdne5371:0",
-      "cardStyle": "crwdns5373:0crwdne5373:0",
-      "bars": "crwdns5375:0crwdne5375:0",
-      "valuePath": "crwdns5377:0crwdne5377:0",
-      "maxPath": "crwdns5379:0crwdne5379:0",
-      "showPercentage": "crwdns5381:0crwdne5381:0",
-      "barSize": "crwdns5383:0crwdne5383:0",
-      "goodValues": "crwdns5385:0crwdne5385:0",
-      "dotSize": "crwdns5387:0crwdne5387:0",
-      "valueSize": "crwdns5389:0crwdne5389:0",
-      "labelPosition": "crwdns5391:0crwdne5391:0",
-      "kvLayout": "crwdns5393:0crwdne5393:0",
-      "striped": "crwdns5395:0crwdne5395:0",
-      "compact": "crwdns5397:0crwdne5397:0",
-      "maxHeight": "crwdns5399:0crwdne5399:0",
-      "color": "crwdns5401:0crwdne5401:0",
-      "buttonLabel": "crwdns5403:0crwdne5403:0",
-      "buttonColor": "crwdns5405:0crwdne5405:0",
-      "confirmText": "crwdns5407:0crwdne5407:0",
-      "confirmTextHint": "crwdns5409:0crwdne5409:0",
-      "successMessage": "crwdns5411:0crwdne5411:0",
-      "successMessageHint": "crwdns5413:0crwdne5413:0",
-      "enabled": "crwdns5415:0crwdne5415:0",
-      "template": {
-        "label": "crwdns5417:0crwdne5417:0",
-        "description": "crwdns5419:0__proto__crwdne5419:0"
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "crwdns5421:0crwdne5421:0",
-      "exampleLabelShort": "crwdns5423:0crwdne5423:0",
-      "exampleHeader": "crwdns5425:0crwdne5425:0",
-      "exampleUnit": "crwdns5427:0crwdne5427:0",
-      "iconUrl": "crwdns5429:0crwdne5429:0",
-      "url": "crwdns5431:0crwdne5431:0",
-      "headerName": "crwdns5433:0crwdne5433:0",
-      "jsonPath": "crwdns5435:0crwdne5435:0",
-      "tablePath": "crwdns5437:0crwdne5437:0",
-      "columnJsonPath": "crwdns5439:0crwdne5439:0",
-      "valuePath": "crwdns5441:0crwdne5441:0",
-      "maxPath": "crwdns5443:0crwdne5443:0",
-      "goodValues": "crwdns5445:0crwdne5445:0",
-      "color": "crwdns5447:0crwdne5447:0"
-    },
-    "cardStyleOption": {
-      "filled": "crwdns5449:0crwdne5449:0",
-      "outline": "crwdns5451:0crwdne5451:0",
-      "subtle": "crwdns5453:0crwdne5453:0"
-    },
-    "layoutOption": {
-      "list": "crwdns5455:0crwdne5455:0",
-      "grid": "crwdns5457:0crwdne5457:0"
-    },
-    "sizeOption": {
-      "sm": "crwdns5459:0crwdne5459:0",
-      "md": "crwdns5461:0crwdne5461:0",
-      "lg": "crwdns5463:0crwdne5463:0",
-      "xl": "crwdns5465:0crwdne5465:0"
-    },
-    "labelPositionOption": {
-      "above": "crwdns5467:0crwdne5467:0",
-      "below": "crwdns5469:0crwdne5469:0"
-    },
-    "fieldset": {
-      "general": "crwdns5471:0crwdne5471:0",
-      "connection": "crwdns5473:0crwdne5473:0",
-      "display": "crwdns5475:0crwdne5475:0"
-    },
-    "displayTypeDescription": {
-      "singleValue": "crwdns5477:0crwdne5477:0",
-      "keyValue": "crwdns5479:0crwdne5479:0",
-      "table": "crwdns5481:0crwdne5481:0",
-      "statGrid": "crwdns5483:0crwdne5483:0",
-      "progressBars": "crwdns5485:0crwdne5485:0",
-      "statusIndicator": "crwdns5487:0crwdne5487:0",
-      "countGrid": "crwdns5489:0crwdne5489:0",
-      "raw": "crwdns5491:0crwdne5491:0",
-      "actionButton": "crwdns5493:0crwdne5493:0",
-      "customJsx": "crwdns5495:0crwdne5495:0"
-    },
-    "method": {
-      "GET": "crwdns5497:0crwdne5497:0",
-      "POST": "crwdns5499:0crwdne5499:0",
-      "PUT": "crwdns5501:0crwdne5501:0",
-      "DELETE": "crwdns5503:0crwdne5503:0",
-      "PATCH": "crwdns5505:0crwdne5505:0"
-    },
-    "authType": {
-      "none": "crwdns5507:0crwdne5507:0",
-      "bearer": "crwdns5509:0crwdne5509:0",
-      "basic": "crwdns5511:0crwdne5511:0",
-      "apiKeyHeader": "crwdns5513:0crwdne5513:0",
-      "apiKeyQuery": "crwdns5515:0crwdne5515:0"
-    },
-    "displayType": {
-      "singleValue": "crwdns5517:0crwdne5517:0",
-      "keyValue": "crwdns5519:0crwdne5519:0",
-      "table": "crwdns5521:0crwdne5521:0",
-      "statGrid": "crwdns5523:0crwdne5523:0",
-      "progressBars": "crwdns5525:0crwdne5525:0",
-      "statusIndicator": "crwdns5527:0crwdne5527:0",
-      "countGrid": "crwdns5529:0crwdne5529:0",
-      "raw": "crwdns5531:0crwdne5531:0",
-      "actionButton": "crwdns5533:0crwdne5533:0",
-      "customJsx": "crwdns5535:0crwdne5535:0"
-    },
-    "secret": {
-      "apiKey": "crwdns5537:0crwdne5537:0",
-      "username": "crwdns5539:0crwdne5539:0",
-      "password": "crwdns5541:0crwdne5541:0",
-      "savedPlaceholder": "crwdns5543:0crwdne5543:0"
-    },
-    "preview": {
-      "title": "crwdns5545:0crwdne5545:0",
-      "test": "crwdns5547:0crwdne5547:0",
-      "hint": "crwdns5549:0crwdne5549:0",
-      "rawResponse": "crwdns5551:0crwdne5551:0"
+      "iconUrl": "crwdns5337:0crwdne5337:0"
     },
     "notification": {
       "created": "crwdns5553:0{name}crwdne5553:0",
@@ -868,9 +728,6 @@
       "deleted": "crwdns5557:0{name}crwdne5557:0",
       "imported": "crwdns6079:0crwdne6079:0",
       "aiPromptCopied": "crwdns5561:0crwdne5561:0",
-      "aiPromptDescription": "crwdns5563:0crwdne5563:0",
-      "aiPromptCopy": "crwdns5565:0crwdne5565:0",
-      "aiPromptNoResponse": "crwdns5567:0crwdne5567:0",
       "aiPromptCopyError": "crwdns5569:0crwdne5569:0",
       "createError": "crwdns5571:0crwdne5571:0",
       "updateError": "crwdns5573:0crwdne5573:0",
@@ -883,14 +740,6 @@
       "previewError": "crwdns5587:0crwdne5587:0",
       "executed": "crwdns5589:0crwdne5589:0",
       "executeError": "crwdns5591:0{error}crwdne5591:0"
-    },
-    "table": {
-      "name": "crwdns5593:0crwdne5593:0",
-      "url": "crwdns5595:0crwdne5595:0",
-      "display": "crwdns5597:0crwdne5597:0"
-    },
-    "widget": {
-      "disabled": "crwdns5599:0crwdne5599:0"
     }
   },
   "integration": {
@@ -1549,7 +1398,7 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
         "create": "crwdns650:0crwdne650:0",
         "remove": "crwdns652:0crwdne652:0"
@@ -1569,46 +1418,6 @@
         "title": "crwdns654:0crwdne654:0",
         "message": "crwdns656:0crwdne656:0"
       }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "crwdns658:0crwdne658:0"
-        }
-      },
-      "action": {
-        "create": "crwdns660:0crwdne660:0",
-        "edit": "crwdns662:0crwdne662:0",
-        "remove": "crwdns664:0crwdne664:0",
-        "moveUp": "crwdns666:0crwdne666:0",
-        "moveDown": "crwdns668:0crwdne668:0",
-        "createAbove": "crwdns670:0crwdne670:0",
-        "createBelow": "crwdns672:0crwdne672:0",
-        "openAllInNewTabs": "crwdns2730:0crwdne2730:0"
-      },
-      "create": {
-        "title": "crwdns674:0crwdne674:0",
-        "submit": "crwdns676:0crwdne676:0"
-      },
-      "remove": {
-        "title": "crwdns678:0crwdne678:0",
-        "message": "crwdns680:0{name}crwdne680:0"
-      },
-      "edit": {
-        "title": "crwdns682:0crwdne682:0",
-        "submit": "crwdns684:0crwdne684:0"
-      },
-      "menu": {
-        "label": {
-          "create": "crwdns686:0crwdne686:0",
-          "changePosition": "crwdns688:0crwdne688:0",
-          "settings": "crwdns4259:0crwdne4259:0"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "crwdns2732:0crwdne2732:0",
-        "text": "crwdns2734:0crwdne2734:0"
-      }
     }
   },
   "item": {
@@ -2428,10 +2237,21 @@
         },
         "descendingDefaultSort": {
           "label": "crwdns3820:0crwdne3820:0"
+        },
+        "columnOrder": {
+          "label": "crwdns6155:0crwdne6155:0"
+        },
+        "columnWidths": {
+          "label": "crwdns6157:0crwdne6157:0"
         }
       },
       "error": {
-        "internalServerError": "crwdns3428:0crwdne3428:0"
+        "internalServerError": "crwdns3428:0crwdne3428:0",
+        "layoutSaveTitle": "crwdns6159:0crwdne6159:0",
+        "layoutSaveMessage": "crwdns6161:0crwdne6161:0"
+      },
+      "empty": {
+        "noContainers": "crwdns6163:0crwdne6163:0"
       }
     },
     "coolify": {
@@ -2725,8 +2545,20 @@
         "showOnlyPlaying": {
           "label": "crwdns3176:0crwdne3176:0",
           "description": "crwdns3178:0crwdne3178:0"
+        },
+        "showBitrate": {
+          "label": "crwdns6175:0crwdne6175:0",
+          "description": "crwdns6177:0crwdne6177:0"
+        },
+        "showLocation": {
+          "label": "crwdns6179:0crwdne6179:0",
+          "description": "crwdns6181:0crwdne6181:0"
         }
       },
+      "footer": {
+        "streams": "crwdns6183:0count={count}crwdne6183:0",
+        "totalBitrate": "crwdns6185:0{bitrate}crwdne6185:0"
+      },
       "items": {
         "currentlyPlaying": "crwdns2847:0crwdne2847:0",
         "user": "crwdns2476:0crwdne2476:0",
@@ -2734,6 +2566,9 @@
         "id": "crwdns2480:0crwdne2480:0",
         "status": "crwdns6085:0crwdne6085:0",
         "directPlay": "crwdns6087:0crwdne6087:0",
+        "directStream": "crwdns6187:0crwdne6187:0",
+        "transcodeVideo": "crwdns6189:0crwdne6189:0",
+        "transcodeAudio": "crwdns6191:0crwdne6191:0",
         "transcoding": "crwdns6089:0crwdne6089:0",
         "paused": "crwdns6091:0crwdne6091:0",
         "remaining": "crwdns6093:0{minutes}crwdne6093:0",
@@ -3768,18 +3603,6 @@
           "label": "crwdns5109:0crwdne5109:0",
           "description": "crwdns5111:0crwdne5111:0"
         },
-        "showNowPlaying": {
-          "label": "crwdns5113:0crwdne5113:0",
-          "description": "crwdns5115:0crwdne5115:0"
-        },
-        "showNowPlayingList": {
-          "label": "crwdns5117:0crwdne5117:0",
-          "description": "crwdns5119:0crwdne5119:0"
-        },
-        "maxNowPlayingItems": {
-          "label": "crwdns5121:0crwdne5121:0",
-          "description": "crwdns5123:0crwdne5123:0"
-        },
         "showLibraryCount": {
           "label": "crwdns5125:0crwdne5125:0",
           "description": "crwdns5127:0crwdne5127:0"
@@ -3813,8 +3636,6 @@
       "podcasts": "crwdns5159:0crwdne5159:0",
       "listeningTime": "crwdns5161:0crwdne5161:0",
       "activeSessions": "crwdns5163:0crwdne5163:0",
-      "nowPlaying": "crwdns5165:0crwdne5165:0",
-      "nowPlayingCount": "crwdns5167:0count={count}crwdne5167:0",
       "error": {
         "internalServerError": "crwdns5169:0crwdne5169:0"
       }
@@ -3902,12 +3723,7 @@
         }
       },
       "noDefinition": "crwdns5611:0crwdne5611:0",
-      "definitionNotFound": "crwdns5613:0crwdne5613:0",
-      "noDisplayOutput": "crwdns5615:0crwdne5615:0",
-      "executeConfirm": "crwdns5617:0crwdne5617:0",
-      "executing": "crwdns5619:0crwdne5619:0",
-      "executeSuccess": "crwdns5621:0crwdne5621:0",
-      "executeFailed": "crwdns5623:0crwdne5623:0"
+      "definitionNotFound": "crwdns5613:0crwdne5613:0"
     },
     "beszelSystemTable": {
       "name": "crwdns4779:0crwdne4779:0",
@@ -3954,11 +3770,19 @@
         },
         "showAgent": {
           "label": "crwdns4809:0crwdne4809:0"
+        },
+        "columnOrder": {
+          "label": "crwdns6165:0crwdne6165:0"
+        },
+        "columnWidths": {
+          "label": "crwdns6167:0crwdne6167:0"
         }
       },
       "noRecords": "crwdns4811:0crwdne4811:0",
       "error": {
-        "internalServerError": "crwdns5651:0crwdne5651:0"
+        "internalServerError": "crwdns5651:0crwdne5651:0",
+        "layoutSaveTitle": "crwdns6169:0crwdne6169:0",
+        "layoutSaveMessage": "crwdns6171:0crwdne6171:0"
       },
       "column": {
         "system": "crwdns4813:0crwdne4813:0",
@@ -4531,6 +4355,7 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "crwdns1572:0crwdne1572:0",
         "boards": "crwdns1574:0crwdne1574:0",
         "apps": "crwdns1576:0crwdne1576:0",
@@ -5356,6 +5181,7 @@
       },
       "remove": {
         "label": "crwdns1952:0crwdne1952:0",
+        "confirm": "crwdns6173:0crwdne6173:0",
         "notification": {
           "success": {
             "title": "crwdns1954:0crwdne1954:0",
@@ -5673,6 +5499,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "crwdns1994:0crwdne1994:0",
       "boards": {
         "label": "crwdns1996:0crwdne1996:0"
diff --git a/packages/translation/src/lang/cs.json b/packages/translation/src/lang/cs.json
index 3ab9bd708..fd4c6159d 100644
--- a/packages/translation/src/lang/cs.json
+++ b/packages/translation/src/lang/cs.json
@@ -688,211 +688,6 @@
       "add": "Přidat aplikaci"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": "Načítání..."
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "Vytvořit",
-      "import": "Import",
-      "save": "Uložit",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "Export",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "Upravit",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "Přidat položku",
-      "removeItem": "Odebrat položku",
-      "addBar": "Přidat lištu",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "Povolit",
-      "disable": "Zakázat",
-      "menu": "Akce"
-    },
-    "field": {
-      "name": "Název",
-      "description": "Popis",
-      "iconUrl": "URL ikony",
-      "url": "URL",
-      "authType": "Typ ověření",
-      "headerName": "",
-      "method": "Metoda",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "Teplota CPU",
-      "exampleLabelShort": "Teplota CPU",
-      "exampleHeader": "Název",
-      "exampleUnit": "°C",
-      "iconUrl": "https://...",
-      "url": "https://api.example.com/api/v1/status",
-      "headerName": "X-API klíč",
-      "jsonPath": "$.data.value",
-      "tablePath": "$.data.items",
-      "columnJsonPath": "$.jméno",
-      "valuePath": "$.data.used",
-      "maxPath": "$.data.total",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "Malé",
-      "md": "Střední",
-      "lg": "Velké",
-      "xl": "Extra velké"
-    },
-    "labelPositionOption": {
-      "above": "Nad",
-      "below": "Pod"
-    },
-    "fieldset": {
-      "general": "Obecné",
-      "connection": "API propojení",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "GET",
-      "POST": "POST",
-      "PUT": "PUT",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "Klíč API (záhlaví)",
-      "apiKeyQuery": "Klíč API (dotazy)"
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "Uživatelské jméno",
-      "password": "Heslo",
-      "savedPlaceholder": "••••••• (uloženo, ponechte prázdné pro zachování)"
-    },
-    "preview": {
-      "title": "Náhled",
-      "test": "Test",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "URL",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Nová dynamická sekce",
-        "remove": "Odstranit dynamickou sekci"
+        "create": "Nový kontejner",
+        "remove": "Odstranit kontejner"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Odstranit dynamickou sekci",
-        "message": "Jste si jisti, že chcete odstranit tuto dynamickou sekci? Položky budou přesunuty na stejné místo v nadřazené sekci."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Název"
-        }
-      },
-      "action": {
-        "create": "Nová kategorie",
-        "edit": "Přejmenovat kategorii",
-        "remove": "Odstranit kategorii",
-        "moveUp": "Posunout nahoru",
-        "moveDown": "Posunout dolů",
-        "createAbove": "Nová kategorie nad",
-        "createBelow": "Nová kategorie pod",
-        "openAllInNewTabs": ""
-      },
-      "create": {
-        "title": "Nová kategorie",
-        "submit": "Přidat kategorii"
-      },
-      "remove": {
-        "title": "Odstranit kategorii",
-        "message": "Jste si jisti, že chcete odstranit kategorii {name}?"
-      },
-      "edit": {
-        "title": "Přejmenovat kategorii",
-        "submit": "Přejmenovat kategorii"
-      },
-      "menu": {
-        "label": {
-          "create": "Nová kategorie",
-          "changePosition": "Změnit pozici",
-          "settings": "Nastavení"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "",
-        "text": ""
+        "title": "Odstranit kontejner",
+        "message": "Jste si jisti, že chcete odstranit tento kontejner? Položky budou přesunuty na stejné místo v nadřazené sekci."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "",
           "description": ""
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "",
         "user": "Uživatel",
@@ -2734,6 +2512,9 @@
         "id": "Id",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -2802,193 +2583,6 @@
         "internalServerError": ""
       }
     },
-    "patchmon": {
-      "name": "",
-      "description": "",
-      "title": "",
-      "totalHosts": "",
-      "hostsNeedingUpdates": "",
-      "securityUpdates": "",
-      "upToDateHosts": "",
-      "hostsWithSecurityUpdates": "",
-      "recentUpdates24h": "",
-      "totalOutdatedPackages": "",
-      "totalRepos": "",
-      "osDistribution": "",
-      "compliance": "",
-      "complianceRatio": "",
-      "lastUpdated": "",
-      "option": {
-        "showTotalHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsNeedingUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showUpToDateHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showRecentUpdates24h": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalOutdatedPackages": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalRepos": {
-          "label": "",
-          "description": ""
-        },
-        "enableThresholdColors": {
-          "label": "",
-          "description": ""
-        },
-        "useCustomThresholds": {
-          "label": "",
-          "description": ""
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "",
-            "percent": ""
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "showOsDistribution": {
-          "label": "",
-          "description": ""
-        },
-        "osDistributionLimit": {
-          "label": "",
-          "description": "",
-          "option": {
-            "3": "",
-            "5": "",
-            "10": "",
-            "all": ""
-          }
-        },
-        "showOsVersion": {
-          "label": "",
-          "description": ""
-        },
-        "showComplianceHero": {
-          "label": "",
-          "description": ""
-        },
-        "osDisplayMode": {
-          "label": "",
-          "description": "",
-          "option": {
-            "bars": "",
-            "donut": ""
-          }
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
-    "bazarr": {
-      "name": "",
-      "description": "",
-      "episodes": "",
-      "movies": "",
-      "providers": "",
-      "status": "",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "",
-          "description": ""
-        },
-        "showMissingMovies": {
-          "label": "",
-          "description": ""
-        },
-        "showProviderIssues": {
-          "label": "",
-          "description": ""
-        },
-        "showHealthIssues": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "immich-serverStats": {
       "name": "",
       "description": "",
@@ -3361,35 +2955,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showMissing": {
-          "label": ""
-        },
-        "showQueued": {
-          "label": ""
-        },
-        "pageSize": {
-          "label": ""
-        }
-      },
-      "tab": {
-        "missing": "",
-        "queued": ""
-      },
-      "type": {
-        "movie": "",
-        "episode": ""
-      },
-      "empty": {
-        "missing": "",
-        "queued": "",
-        "noTabsEnabled": ""
-      },
-      "timeLeft": ""
-    },
     "rssFeed": {
       "name": "",
       "description": "",
@@ -3718,40 +3283,6 @@
         "internalServerError": ""
       }
     },
-    "traefik": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showTcp": {
-          "label": ""
-        },
-        "showUdp": {
-          "label": ""
-        },
-        "showEntryPoints": {
-          "label": ""
-        }
-      },
-      "instances": "",
-      "versionUnknown": "",
-      "summary": {
-        "routers": "",
-        "entryPoints": ""
-      },
-      "resource": {
-        "routers": "",
-        "services": "",
-        "middlewares": ""
-      },
-      "status": {
-        "healthy": "",
-        "errors": "",
-        "warnings": ""
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "audioStats": {
       "name": "",
       "description": "",
@@ -3768,18 +3299,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3332,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3406,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Systémy Beszel (tabulka)",
       "description": "Tabulkový přehled všech monitorovaných systémů Beszel s řaditelnými sloupci a indikátory stavu",
@@ -3954,11 +3451,19 @@
         },
         "showAgent": {
           "label": "Zobrazit verzi agenta"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Nenalezeny žádné systémy",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Systém",
@@ -4151,6 +3656,256 @@
           "subtitle": ""
         }
       }
+    },
+    "patchmon": {
+      "name": "",
+      "description": "",
+      "title": "",
+      "totalHosts": "",
+      "hostsNeedingUpdates": "",
+      "securityUpdates": "",
+      "upToDateHosts": "",
+      "hostsWithSecurityUpdates": "",
+      "recentUpdates24h": "",
+      "totalOutdatedPackages": "",
+      "totalRepos": "",
+      "osDistribution": "",
+      "compliance": "",
+      "complianceRatio": "",
+      "lastUpdated": "",
+      "option": {
+        "showTotalHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsNeedingUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showUpToDateHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showRecentUpdates24h": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalOutdatedPackages": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalRepos": {
+          "label": "",
+          "description": ""
+        },
+        "enableThresholdColors": {
+          "label": "",
+          "description": ""
+        },
+        "useCustomThresholds": {
+          "label": "",
+          "description": ""
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "",
+            "percent": ""
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "showOsDistribution": {
+          "label": "",
+          "description": ""
+        },
+        "osDistributionLimit": {
+          "label": "",
+          "description": "",
+          "option": {
+            "3": "",
+            "5": "",
+            "10": "",
+            "all": ""
+          }
+        },
+        "showOsVersion": {
+          "label": "",
+          "description": ""
+        },
+        "showComplianceHero": {
+          "label": "",
+          "description": ""
+        },
+        "osDisplayMode": {
+          "label": "",
+          "description": "",
+          "option": {
+            "bars": "",
+            "donut": ""
+          }
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "bazarr": {
+      "name": "",
+      "description": "",
+      "episodes": "",
+      "movies": "",
+      "providers": "",
+      "status": "",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "",
+          "description": ""
+        },
+        "showMissingMovies": {
+          "label": "",
+          "description": ""
+        },
+        "showProviderIssues": {
+          "label": "",
+          "description": ""
+        },
+        "showHealthIssues": {
+          "label": "",
+          "description": ""
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "mediaMissing": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showMissing": {
+          "label": ""
+        },
+        "showQueued": {
+          "label": ""
+        },
+        "pageSize": {
+          "label": ""
+        }
+      },
+      "tab": {
+        "missing": "",
+        "queued": ""
+      },
+      "type": {
+        "movie": "",
+        "episode": ""
+      },
+      "empty": {
+        "missing": "",
+        "queued": "",
+        "noTabsEnabled": ""
+      },
+      "timeLeft": ""
+    },
+    "traefik": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showTcp": {
+          "label": ""
+        },
+        "showUdp": {
+          "label": ""
+        },
+        "showEntryPoints": {
+          "label": ""
+        }
+      },
+      "instances": "",
+      "versionUnknown": "",
+      "summary": {
+        "routers": "",
+        "entryPoints": ""
+      },
+      "resource": {
+        "routers": "",
+        "services": "",
+        "middlewares": ""
+      },
+      "status": {
+        "healthy": "",
+        "errors": "",
+        "warnings": ""
+      },
+      "error": {
+        "internalServerError": ""
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Domovská stránka",
         "boards": "Plochy",
         "apps": "Aplikace",
         "integrations": "",
-        "customWidgets": "",
         "searchEngies": "",
         "medias": "",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Odstranit",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Spravovat",
       "boards": {
         "label": "Plochy"
@@ -5707,18 +5466,6 @@
           "label": "Upravit"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Uživatelé",
         "create": {
diff --git a/packages/translation/src/lang/da.json b/packages/translation/src/lang/da.json
index 9bc29daf7..783ff7cb9 100644
--- a/packages/translation/src/lang/da.json
+++ b/packages/translation/src/lang/da.json
@@ -688,211 +688,6 @@
       "add": "Tilføj en app"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Ny dynamisk sektion",
-        "remove": "Fjern dynamisk sektion"
+        "create": "Ny container",
+        "remove": "Fjern container"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Fjern dynamisk sektion",
-        "message": "Er du sikker på at du vil fjerne dette dynamiske afsnit? Elementer vil blive flyttet på samme sted i det overordnede afsnit."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Navn"
-        }
-      },
-      "action": {
-        "create": "Ny kategori",
-        "edit": "Omdøb kategori",
-        "remove": "Fjern kategori",
-        "moveUp": "Flyt op",
-        "moveDown": "Flyt ned",
-        "createAbove": "Ny kategori ovenover",
-        "createBelow": "Ny kategori nedenunder",
-        "openAllInNewTabs": "Åbn alt i faneblade"
-      },
-      "create": {
-        "title": "Ny kategori",
-        "submit": "Tilføj kategori"
-      },
-      "remove": {
-        "title": "Fjern kategori",
-        "message": "Er du sikker på, at du vil fjerne kategorien {name}?"
-      },
-      "edit": {
-        "title": "Omdøb kategori",
-        "submit": "Omdøb kategori"
-      },
-      "menu": {
-        "label": {
-          "create": "Ny kategori",
-          "changePosition": "Ændre placering",
-          "settings": "Indstillinger"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Åbn alt i faneblade",
-        "text": "Nogle browsere kan blokere bulk-åbning af faner af sikkerhedsmæssige årsager. Homarr kunne ikke åbne alle vinduer, fordi din browser blokerede denne handling. Tillad venligst \"Åbn pop op-vinduer\" og prøv igen."
+        "title": "Fjern container",
+        "message": "Er du sikker på, at du vil fjerne denne container? Elementer vil blive flyttet til samme sted i det overordnede afsnit."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": "Inverter sortering"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "Kunne ikke hente containerstatistik"
+        "internalServerError": "Kunne ikke hente containerstatistik",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "Vis kun hvad der aktuelt afspilles",
           "description": "Deaktivering af dette vil ikke virke for plex"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "Afspiller lige nu",
         "user": "Bruger",
@@ -2734,6 +2512,9 @@
         "id": "Id",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -3768,18 +3549,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3582,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3656,6 @@
         "unhealthy": "Usund"
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Beszel-systemer (tabel)",
       "description": "Tabelvisning af alle Beszel-overvågede systemer med sorterbare kolonner og statusindikatorer",
@@ -3954,11 +3701,19 @@
         },
         "showAgent": {
           "label": "Vis agentversion"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Ingen systemer fundet",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "System",
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Hjem",
         "boards": "Tavler",
         "apps": "Apps",
         "integrations": "Integrationer",
-        "customWidgets": "",
         "searchEngies": "Søgemaskiner",
         "medias": "Medier",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Fjern",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Containere fjernet",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Administrer",
       "boards": {
         "label": "Tavler"
@@ -5707,18 +5466,6 @@
           "label": "Rediger"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Brugere",
         "create": {
diff --git a/packages/translation/src/lang/de-CH.json b/packages/translation/src/lang/de-CH.json
index c7806787e..84064075e 100644
--- a/packages/translation/src/lang/de-CH.json
+++ b/packages/translation/src/lang/de-CH.json
@@ -688,211 +688,6 @@
       "add": ""
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Neuer dynamischer Abschnitt",
-        "remove": "Dynamischen Abschnitt entfernen"
+        "create": "Neuer Container",
+        "remove": "Container entfernen"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Dynamischen Abschnitt entfernen",
-        "message": "Möchten Sie diesen dynamischen Abschnitt wirklich entfernen? Die Elemente werden an die gleiche Position im übergeordneten Abschnitt verschoben."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": ""
-        }
-      },
-      "action": {
-        "create": "Neue Kategorie",
-        "edit": "Kategorie umbenennen",
-        "remove": "Kategorie entfernen",
-        "moveUp": "Nach oben bewegen",
-        "moveDown": "Nach unten bewegen",
-        "createAbove": "Neue Kategorie oben",
-        "createBelow": "Neue Kategorie unten",
-        "openAllInNewTabs": "Alle in Tabs öffnen"
-      },
-      "create": {
-        "title": "Neue Kategorie",
-        "submit": "Kategorie hinzufügen"
-      },
-      "remove": {
-        "title": "Kategorie entfernen",
-        "message": "Möchten Sie die Kategorie {name} wirklich entfernen?"
-      },
-      "edit": {
-        "title": "Kategorie umbenennen",
-        "submit": "Kategorie umbenennen"
-      },
-      "menu": {
-        "label": {
-          "create": "Neue Kategorie",
-          "changePosition": "Position wechseln",
-          "settings": ""
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Alle in tabs öffnen",
-        "text": "Einige Browser können aus Sicherheitsgründen das Öffnen von mehreren Tabs aufeinmal blockieren. Homarr konnte nicht alle Fenster öffnen, weil Ihr Browser diese Aktion blockiert hat. Bitte erlauben Sie \"Pop-up Fenster öffnen\" und versuchen Sie es erneut."
+        "title": "Container entfernen",
+        "message": "Möchten Sie diesen Container wirklich entfernen? Die Elemente werden an die gleiche Position im übergeordneten Bereich verschoben."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "",
           "description": ""
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "Aktuelle Wiedergabe",
         "user": "Benutzer",
@@ -2734,6 +2512,9 @@
         "id": "",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -3768,18 +3549,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3582,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3656,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "",
       "description": "",
@@ -3954,11 +3701,19 @@
         },
         "showAgent": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "",
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Startseite",
         "boards": "",
         "apps": "",
         "integrations": "Integrationen",
-        "customWidgets": "",
         "searchEngies": "Suchmaschinen",
         "medias": "Medien",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Entfernen",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Container entfernt",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Verwalten",
       "boards": {
         "label": ""
@@ -5707,18 +5466,6 @@
           "label": "Bearbeiten"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Benutzer",
         "create": {
diff --git a/packages/translation/src/lang/de.json b/packages/translation/src/lang/de.json
index 924f7f877..121488db7 100644
--- a/packages/translation/src/lang/de.json
+++ b/packages/translation/src/lang/de.json
@@ -710,14 +710,7 @@
       "delete": "Benutzerdefiniertes Widget löschen",
       "deleteConfirm": "Möchtest du „{name}“ wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.",
       "export": "Exportieren",
-      "addMapping": "Zuordnung hinzufügen",
-      "addColumn": "Spalte hinzufügen",
       "edit": "Bearbeiten",
-      "removeMapping": "Zuordnung entfernen",
-      "removeColumn": "Spalte entfernen",
-      "addItem": "Element hinzufügen",
-      "removeItem": "Element entfernen",
-      "addBar": "Leiste hinzufügen",
       "duplicate": "Duplizieren",
       "copyAiPrompt": "KI Prompt kopieren",
       "enable": "Aktivieren",
@@ -727,140 +720,7 @@
     "field": {
       "name": "Name",
       "description": "Beschreibung",
-      "iconUrl": "Icon URL",
-      "url": "URL",
-      "authType": "Authentifizierungstyp",
-      "headerName": "Name des Kopf-/Abfrage-Parameters",
-      "method": "Methode",
-      "requestBody": "Body anfordern",
-      "displayType": "Anzeigetyp",
-      "jsonPath": "JSON Pfad",
-      "jsonPathHint": "Verwenden Sie JSONPath Syntax um Werte zu extrahieren, z.B. $.data.temperature oder $.items[0].name",
-      "label": "Kategorie",
-      "unit": "Einheit",
-      "mappings": "Zuordnungen",
-      "tablePath": "JSON Pfad anordnen",
-      "tablePathHint": "Pfad zum Array in der Antwort, z.B. $.data.items",
-      "columns": "Spalten",
-      "header": "Kopfzeile",
-      "items": "Elemente",
-      "gridColumns": "Rasterspalten",
-      "cardStyle": "Kartenstil",
-      "bars": "Balken",
-      "valuePath": "JSON Wert Pfad",
-      "maxPath": "Maximaler Wert des JSON Pfades",
-      "showPercentage": "Prozentwert anzeigen",
-      "barSize": "Balkengröße",
-      "goodValues": "Gute Werte (durch Komma getrennt)",
-      "dotSize": "Punkt Größe",
-      "valueSize": "Größe des Wertes",
-      "labelPosition": "Labelposition",
-      "kvLayout": "Darstellung",
-      "striped": "Gestreifte Reihen",
-      "compact": "Kompakte Darstellung",
-      "maxHeight": "Maximale Höhe (px)",
-      "color": "Farbe",
-      "buttonLabel": "Bezeichnung des Knopfes",
-      "buttonColor": "Farbe des Knopfes",
-      "confirmText": "Text zur Bestätigung",
-      "confirmTextHint": "Wenn gesetzt, erscheint vor der Ausführung der Anfrage ein Bestätigungsdialog",
-      "successMessage": "Erfolgsmeldung",
-      "successMessageHint": "Nachricht, die nach erfolgreicher Ausführung angezeigt wird",
-      "enabled": "Aktiviert",
-      "template": {
-        "label": "JSX Vorlage",
-        "description": "Mantine JSX-Vorlage. Zugriff auf API-Antwortfelder über Datenbindungen (z.B. data.name). Verwenden Sie nur Inhalte der Whitelist. Verboten: Konstruktor, __proto__, eval, Funktion, Fenster, Dokument."
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "CPU Temperatur",
-      "exampleLabelShort": "CPU Temp",
-      "exampleHeader": "Name",
-      "exampleUnit": "°C",
-      "iconUrl": "https://...",
-      "url": "https://api.example.com/api/v1/status",
-      "headerName": "X-API Schlüssel",
-      "jsonPath": "$.data.value",
-      "tablePath": "$.data.items",
-      "columnJsonPath": "$.name",
-      "valuePath": "$.data.used",
-      "maxPath": "$.data.total",
-      "goodValues": "online, wahr, oben",
-      "color": "blau"
-    },
-    "cardStyleOption": {
-      "filled": "Gefüllt",
-      "outline": "Umrandung",
-      "subtle": "Dezent"
-    },
-    "layoutOption": {
-      "list": "Liste",
-      "grid": "Raster"
-    },
-    "sizeOption": {
-      "sm": "Klein",
-      "md": "Mittel",
-      "lg": "Groß",
-      "xl": "Extragroß"
-    },
-    "labelPositionOption": {
-      "above": "Oberhalb",
-      "below": "Unterhalb"
-    },
-    "fieldset": {
-      "general": "Allgemein",
-      "connection": "API Anbindung",
-      "display": "Anzeigeeinstellungen"
-    },
-    "displayTypeDescription": {
-      "singleValue": "Einen extrahierten Wert mit Label und Einheit anzeigen",
-      "keyValue": "Mehrere markierte Werte nebeneinander anzeigen",
-      "table": "Datenzeilen im Tabellenformat anzeigen",
-      "statGrid": "Farbige Statistikkarten im Raster — wie Pi-Hole oder Speedtest Widgets",
-      "progressBars": "Fortschrittsbalken mit Nutzung oder Fertigstellung — für Festplatte, Speicher, Quoten",
-      "statusIndicator": "Farbige Statuspunkte, die den Online/Offline Status oder Gesundheitszustand anzeigen",
-      "countGrid": "Kompakter Nummern + Label Zähler in einem engen Raster",
-      "raw": "Ansehrlich gedruckte JSON-Ausgabe zum Debuggen",
-      "actionButton": "Eine Schaltfläche welche eine Anfrage auslöst wenn sie angeklickt wird",
-      "customJsx": "Benutzerdefiniertes JSX-Layout mit Whitelist Mantine Komponenten und vollständiger API-Datenbindung"
-    },
-    "method": {
-      "GET": "GET",
-      "POST": "POST",
-      "PUT": "PUT",
-      "DELETE": "DELETE",
-      "PATCH": "PATCH"
-    },
-    "authType": {
-      "none": "Keine",
-      "bearer": "Bearer Token",
-      "basic": "Basic Auth",
-      "apiKeyHeader": "API Schlüssel (Kopfzeile)",
-      "apiKeyQuery": "API-Schlüssel (Abfrage)"
-    },
-    "displayType": {
-      "singleValue": "Einzelwert",
-      "keyValue": "Schlüsselwert",
-      "table": "Tabelle",
-      "statGrid": "Statistikraster",
-      "progressBars": "Fortschrittsbalken",
-      "statusIndicator": "Statusanzeige",
-      "countGrid": "Raster zählen",
-      "raw": "Rohes JSON",
-      "actionButton": "Aktionstaste",
-      "customJsx": "Benutzerdefiniertes JSX"
-    },
-    "secret": {
-      "apiKey": "API Schlüssel / Token",
-      "username": "Benutzername",
-      "password": "Passwort",
-      "savedPlaceholder": "••••••• (gespeichert, leer lassen zum Behalten)"
-    },
-    "preview": {
-      "title": "Vorschau",
-      "test": "Test",
-      "hint": "Klicken Sie auf Test, um eine Vorschau der API Antwort mit Ihrer aktuellen Konfiguration zu erhalten.",
-      "rawResponse": "Rohe JSON-Antwort"
+      "iconUrl": "Icon URL"
     },
     "notification": {
       "created": "Widget \"{name}\" erfolgreich erstellt.",
@@ -868,9 +728,6 @@
       "deleted": "Widget \"{name}\" gelöscht.",
       "imported": "Widget erfolgreich importiert.",
       "aiPromptCopied": "KI-Prompt in Zwischenablage kopiert",
-      "aiPromptDescription": "Kopieren Sie eine vorgefertigte Eingabeaufforderung, um sie in jeden AI-Chatbot einzufügen (ChatGPT, Claude, Gemini...). Es enthält das komplette Widget-Schema und Ihre API-Antwort, so dass die KI eine fertige JSON-Konfiguration für Sie generieren kann.",
-      "aiPromptCopy": "In die Zwischenablage kopieren",
-      "aiPromptNoResponse": "Tipp: Führen Sie zuerst einen Test aus, um Ihre API Antwort in die Eingabeaufforderung einzubinden, um bessere Ergebnisse zu erzielen.",
       "aiPromptCopyError": "Fehler beim Kopieren der Eingabeaufforderung. Möglicherweise unterstützt Ihr Browser diese Funktion nicht.",
       "createError": "Fehler beim Erstellen des Widgets. Überprüfen Sie, ob Ihr API Endpunkt erreichbar ist.",
       "updateError": "Fehler beim Aktualisieren des Widgets. Ihre Änderungen wurden nicht gespeichert.",
@@ -883,14 +740,6 @@
       "previewError": "Fehler beim Abrufen der Vorschau. Überprüfen Sie die URL und versuchen Sie es erneut.",
       "executed": "Aktion erfolgreich ausgeführt.",
       "executeError": "Aktion fehlgeschlagen: {error}"
-    },
-    "table": {
-      "name": "Name",
-      "url": "URL",
-      "display": "Anzeige"
-    },
-    "widget": {
-      "disabled": "Dieses Widget ist deaktiviert"
     }
   },
   "integration": {
@@ -1342,19 +1191,19 @@
     },
     "traefik": {
       "name": "Traefik",
-      "description": ""
+      "description": "Cloud-nativer Reverse-Proxy und Lastverteiler"
     },
     "paperlessNgx": {
       "name": "Paperless-ngx",
       "description": "Dokumentenverwaltungssystem zum Archivieren und Organisieren gescannter Dokumente"
     },
     "patchmon": {
-      "name": "",
-      "description": ""
+      "name": "PatchMon",
+      "description": "Patch-Verwaltung und Systemüberwachung für Linux-Hosts"
     },
     "bazarr": {
       "name": "Bazarr",
-      "description": ""
+      "description": "Schwesteranwendung zu Sonarr und Radarr, welche Untertitel und Downloads verwaltet"
     }
   },
   "media": {
@@ -1405,6 +1254,8 @@
     "success": "Erfolgreich",
     "beta": "Beta",
     "error": "Fehler",
+    "total": "Gesamt",
+    "filesystemUsage": "{count, plural, one {Auslastung für # Dateisystem anzeigen} other {Auslastung für # Dateisysteme anzeigen}}",
     "action": {
       "add": "Hinzufügen",
       "apply": "Übernehmen",
@@ -1549,10 +1400,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Neuer dynamischer Abschnitt",
-        "remove": "Dynamischen Abschnitt entfernen"
+        "create": "Neuer Container",
+        "remove": "Container entfernen"
       },
       "option": {
         "title": {
@@ -1566,48 +1417,8 @@
         }
       },
       "remove": {
-        "title": "Dynamischen Abschnitt entfernen",
-        "message": "Möchten Sie diesen dynamischen Abschnitt wirklich entfernen? Die Elemente werden an die gleiche Position im übergeordneten Abschnitt verschoben."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Name"
-        }
-      },
-      "action": {
-        "create": "Neue Kategorie",
-        "edit": "Kategorie umbenennen",
-        "remove": "Kategorie entfernen",
-        "moveUp": "Nach oben bewegen",
-        "moveDown": "Nach unten bewegen",
-        "createAbove": "Neue Kategorie oben",
-        "createBelow": "Neue Kategorie unten",
-        "openAllInNewTabs": "Alle in Tabs öffnen"
-      },
-      "create": {
-        "title": "Neue Kategorie",
-        "submit": "Kategorie hinzufügen"
-      },
-      "remove": {
-        "title": "Kategorie entfernen",
-        "message": "Möchten Sie die Kategorie {name} wirklich entfernen?"
-      },
-      "edit": {
-        "title": "Kategorie umbenennen",
-        "submit": "Kategorie umbenennen"
-      },
-      "menu": {
-        "label": {
-          "create": "Neue Kategorie",
-          "changePosition": "Position wechseln",
-          "settings": "Einstellungen"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Alle in tabs öffnen",
-        "text": "Einige Browser können aus Sicherheitsgründen das gleichzeitige Öffnen von mehreren Tabs blockieren. Homarr konnte nicht alle Fenster öffnen, weil Ihr Browser diese Aktion blockiert hat. Bitte erlauben Sie \"Pop-up Fenster öffnen\" und versuchen Sie es erneut."
+        "title": "Container entfernen",
+        "message": "Möchten Sie diesen Container wirklich entfernen? Die Elemente werden an die gleiche Position im übergeordneten Bereich verschoben."
       }
     }
   },
@@ -2108,6 +1919,12 @@
         "clickable": {
           "label": "Anklickbar"
         }
+      },
+      "state": {
+        "on": "Ein",
+        "off": "Aus",
+        "unavailable": "Nicht verfügbar",
+        "unknown": "Unbekannt"
       }
     },
     "smartHome-executeAutomation": {
@@ -2328,8 +2145,8 @@
           "label": "Dateisystem Info anzeigen"
         },
         "visibleStorageVolumes": {
-          "label": "",
-          "description": "",
+          "label": "Sichtbare Speichervolumes",
+          "description": "Nur verfügbar, wenn alle Integrationen Synology betreffen. Nicht ausfüllen, um alle erkannten Speichervolumes zu zeigen. ",
           "placeholder": "Speichervolumen auswählen"
         },
         "defaultTab": {
@@ -2428,10 +2245,21 @@
         },
         "descendingDefaultSort": {
           "label": "Sortierung umkehren"
+        },
+        "columnOrder": {
+          "label": "Spaltenordnung"
+        },
+        "columnWidths": {
+          "label": "Spaltenbreite"
         }
       },
       "error": {
-        "internalServerError": "Fehler beim Abrufen der Container Statistiken"
+        "internalServerError": "Fehler beim Abrufen der Container Statistiken",
+        "layoutSaveTitle": "Tabellenlayout nicht gespeichert",
+        "layoutSaveMessage": "Die Docker-Tabelle konnte nicht gespeichert werden. Versuche die Spalte zu verschieben oder eine andere Spaltengröße zu verwenden. "
+      },
+      "empty": {
+        "noContainers": "Keine Docker-Container gefunden"
       }
     },
     "coolify": {
@@ -2725,8 +2553,20 @@
         "showOnlyPlaying": {
           "label": "Nur aktuelle Wiedergabe anzeigen",
           "description": "Diese Einstellung zu deaktivieren wird für Plex nicht funktionieren"
+        },
+        "showBitrate": {
+          "label": "Zeigt die Bitrate an",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": "Zeigt an, ob der Stream über das LAN oder WAN läuft"
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": "Gesamtbitrate: {bitrate}"
+      },
       "items": {
         "currentlyPlaying": "Aktuelle Wiedergabe",
         "user": "Benutzer",
@@ -2734,6 +2574,9 @@
         "id": "Id",
         "status": "Status",
         "directPlay": "Direkte Wiedergabe",
+        "directStream": "Direkter Stream",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "Transkodierung",
         "paused": "Pausiert",
         "remaining": "{minutes} Min. verbleibend",
@@ -2803,21 +2646,21 @@
       }
     },
     "patchmon": {
-      "name": "",
+      "name": "PatchMon",
       "description": "",
-      "title": "",
+      "title": "PatchMon-Statistiken",
       "totalHosts": "Hosts gesamt",
       "hostsNeedingUpdates": "Update erforderlich",
       "securityUpdates": "Sicherheits-Updates",
-      "upToDateHosts": "",
+      "upToDateHosts": "Aktualisierte Hosts",
       "hostsWithSecurityUpdates": "Hosts mit Sicherheits-Updates",
       "recentUpdates24h": "Updates (24h)",
       "totalOutdatedPackages": "Veraltete Pakete",
       "totalRepos": "Repositories",
-      "osDistribution": "",
-      "compliance": "",
-      "complianceRatio": "",
-      "lastUpdated": "",
+      "osDistribution": "Betriebssystem-Distribution",
+      "compliance": "Patch-Kompatibilität",
+      "complianceRatio": "{upToDate} / {total}",
+      "lastUpdated": "Zuletzt aktualisiert: {time}",
       "option": {
         "showTotalHosts": {
           "label": "Alle Hosts anzeigen",
@@ -2833,30 +2676,30 @@
         },
         "showUpToDateHosts": {
           "label": "Zeige aktuelle Hosts",
-          "description": ""
+          "description": "Zeigt Hosts mit keinen veralteten Paketen an"
         },
         "showHostsWithSecurityUpdates": {
-          "label": "",
-          "description": ""
+          "label": "Zeigt Hosts mit Sicherheitsupdates an",
+          "description": "Zeigt Hosts an, welche Sicherheitsupdates benötigen"
         },
         "showRecentUpdates24h": {
-          "label": "",
-          "description": ""
+          "label": "Zeigt vergangene Updates in den letzten 24 Stunden an",
+          "description": "Zeigt die Anzahl der angewendeten Updates in den letzten 24 Stunden an"
         },
         "showTotalOutdatedPackages": {
-          "label": "",
-          "description": ""
+          "label": "Zeigt veraltete Pakete an",
+          "description": "Zeigt die Gesamtanzahl der veralteten Pakete über mehrere Hosts verteilt an"
         },
         "showTotalRepos": {
-          "label": "",
-          "description": ""
+          "label": "Zeigt Repositorys an",
+          "description": "Zeigt die Anzahl der zu überwachenden aktiven Repositorys an"
         },
         "enableThresholdColors": {
-          "label": "",
+          "label": "Aktiviert die Schwellwert-Farben",
           "description": ""
         },
         "useCustomThresholds": {
-          "label": "",
+          "label": "Erweiterte Schwellwerte",
           "description": ""
         },
         "thresholdMode": {
@@ -3547,8 +3390,13 @@
     "networkControllerSummary": {
       "option": {},
       "card": {
+        "wan": "WAN",
+        "web": "Web",
+        "wifi": "WLAN",
+        "lan": "LAN",
         "vpn": {
-          "countConnected": "{count} verbunden"
+          "label": "VPN",
+          "countConnected": "{count, plural, one {# verbunden} other {# verbunden}}"
         }
       },
       "error": {
@@ -3768,18 +3616,6 @@
           "label": "Songs anzeigen",
           "description": "Zeigt die Gesamtzahl der Titel in deiner Musikbibliothek an (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "\"Sie hören\" anzeigen",
-          "description": "Zeige aktuell gespielte Titel an (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "\"Sie hören jetzt\" Wiedergabeliste anzeigen",
-          "description": "Einzelne Tracks anstelle der aktiven Streamanzahl anzeigen (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "Maximale jetzt abgespielte Elemente",
-          "description": "Maximale Anzahl an Titeln, die in der \"Sie hören jetzt\" Wiedergabeliste angezeigt werden (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "Anzahl der Bibliotheken anzeigen",
           "description": "Zeige die Anzahl der Bibliotheken in deiner Instanz (Hörbücherregal)"
@@ -3813,8 +3649,6 @@
       "podcasts": "Podcasts",
       "listeningTime": "Hördauer",
       "activeSessions": "Aktive Sitzungen",
-      "nowPlaying": "Aktuelle Wiedergabe",
-      "nowPlayingCount": "{count, plural, one {# stream} other {# streams}}",
       "error": {
         "internalServerError": "Fehler beim Abrufen der Audio-Statistikdaten"
       }
@@ -3902,12 +3736,7 @@
         }
       },
       "noDefinition": "Keine Definition ausgewählt",
-      "definitionNotFound": "Widget-Definition nicht gefunden. Möglicherweise wurde sie gelöscht.",
-      "noDisplayOutput": "Keine Anzeige-Ausgabe",
-      "executeConfirm": "Bist du dir sicher, dass du diese Aktion ausführen möchtest?",
-      "executing": "Wird ausgeführt...",
-      "executeSuccess": "Aktion erfolgreich ausgeführt",
-      "executeFailed": "Aktion fehlgeschlagen. Überprüfen Sie die Widget-Konfiguration."
+      "definitionNotFound": "Widget-Definition nicht gefunden. Möglicherweise wurde sie gelöscht."
     },
     "beszelSystemTable": {
       "name": "Beszel Systeme (Tabelle)",
@@ -3954,11 +3783,19 @@
         },
         "showAgent": {
           "label": "Agent-Version anzeigen"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Keine Systeme gefunden",
       "error": {
-        "internalServerError": "Keine Verbindung zu Beszel. Überprüfen Sie Ihre Integrationseinstellungen."
+        "internalServerError": "Keine Verbindung zu Beszel. Überprüfen Sie Ihre Integrationseinstellungen.",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "System",
@@ -4531,11 +4368,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Startseite",
         "boards": "Boards",
         "apps": "Apps",
         "integrations": "Integrationen",
-        "customWidgets": "",
         "searchEngies": "Suchmaschinen",
         "medias": "Medien",
         "users": {
@@ -5356,6 +5193,7 @@
       },
       "remove": {
         "label": "Entfernen",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Container entfernt",
@@ -5673,6 +5511,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Verwalten",
       "boards": {
         "label": "Boards"
@@ -5713,10 +5554,7 @@
           "label": "Neu"
         },
         "edit": {
-          "label": "Bearbeiten",
-          "flow": {
-            "label": ""
-          }
+          "label": "Bearbeiten"
         }
       },
       "users": {
diff --git a/packages/translation/src/lang/el.json b/packages/translation/src/lang/el.json
index 43f723feb..6945b093e 100644
--- a/packages/translation/src/lang/el.json
+++ b/packages/translation/src/lang/el.json
@@ -688,211 +688,6 @@
       "add": ""
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "Προσαρμοσμένα Widgets",
-        "noResults": "Δεν υπάρχουν ακόμα προσαρμοσμένα widgets. Δημιουργήστε το πρώτο σας!",
-        "loading": "Φόρτωση..."
-      },
-      "create": {
-        "title": "Δημιουργία Προσαρμοσμένου Widget",
-        "subtitle": "Ορίστε μια διεύθυνση URL API, πιστοποίηση και τον τρόπο εμφάνισης των δεδομένων απόκρισης."
-      },
-      "edit": {
-        "title": "Επεξεργασία Προσαρμοσμένου Widget"
-      }
-    },
-    "action": {
-      "create": "Δημιουργία",
-      "import": "Εισαγωγή",
-      "save": "Αποθήκευση",
-      "delete": "Διαγραφή Προσαρμοσμένου Widget",
-      "deleteConfirm": "Είστε βέβαιοι ότι θέλετε να διαγράψετε το \"{name}\"; Αυτή η ενέργεια δεν μπορεί να αναιρεθεί.",
-      "export": "Εξαγωγή",
-      "addMapping": "Προσθήκη Αντιστοίχισης",
-      "addColumn": "Προσθήκη Στήλης",
-      "edit": "Επεξεργασία",
-      "removeMapping": "Αφαίρεση αντιστοίχισης",
-      "removeColumn": "Αφαίρεση στήλης",
-      "addItem": "Προσθήκη Στοιχείου",
-      "removeItem": "Αφαίρεση στοιχείου",
-      "addBar": "Προσθήκη Μπάρας",
-      "duplicate": "Αντιγραφή",
-      "copyAiPrompt": "Αντιγραφή προτροπής AI",
-      "enable": "Ενεργοποίηση",
-      "disable": "Απενεργοποίηση",
-      "menu": "Ενέργειες"
-    },
-    "field": {
-      "name": "Όνομα",
-      "description": "Περιγραφή",
-      "iconUrl": "URL Εικονιδίου",
-      "url": "URL",
-      "authType": "Τύπος Πιστοποίησης",
-      "headerName": "Όνομα Παραμέτρου Κεφαλίδας/Ερωτήματος",
-      "method": "Μέθοδος",
-      "requestBody": "Σώμα Αιτήματος",
-      "displayType": "Τύπος Εμφάνισης",
-      "jsonPath": "Διαδρομή JSON",
-      "jsonPathHint": "Χρησιμοποιήστε σύνταξη JSONPath για εξαγωγή τιμών, π.χ. $.data.temperature ή $.items[0].name",
-      "label": "Ετικέτα",
-      "unit": "Μονάδα",
-      "mappings": "Αντιστοιχίσεις",
-      "tablePath": "Διαδρομή JSON Πίνακα",
-      "tablePathHint": "Διαδρομή προς τον πίνακα στην απόκριση, π.χ. $.data.items",
-      "columns": "Στήλες",
-      "header": "Κεφαλίδα",
-      "items": "Στοιχεία",
-      "gridColumns": "Στήλες Πλέγματος",
-      "cardStyle": "Στυλ Κάρτας",
-      "bars": "Μπάρες",
-      "valuePath": "Διαδρομή JSON Τιμής",
-      "maxPath": "Διαδρομή JSON Μέγιστης Τιμής",
-      "showPercentage": "Εμφάνιση Ποσοστού",
-      "barSize": "Μέγεθος Μπάρας",
-      "goodValues": "Καλές Τιμές (διαχωρισμένες με κόμμα)",
-      "dotSize": "Μέγεθος Κουκκίδας",
-      "valueSize": "Μέγεθος Τιμής",
-      "labelPosition": "Θέση Ετικέτας",
-      "kvLayout": "Διάταξη",
-      "striped": "Ριγωτές Γραμμές",
-      "compact": "Συμπαγής Λειτουργία",
-      "maxHeight": "Μέγιστο Ύψος (px)",
-      "color": "Χρώμα",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "",
-        "remove": ""
+        "create": "Νέο κοντέινερ",
+        "remove": "Κατάργηση κοντέινερ"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "",
-        "message": ""
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Όνομα"
-        }
-      },
-      "action": {
-        "create": "Νέα κατηγορία",
-        "edit": "Μετονομασία κατηγορίας",
-        "remove": "Αφαίρεση κατηγορίας",
-        "moveUp": "Μετακίνηση επάνω",
-        "moveDown": "Μετακίνηση κάτω",
-        "createAbove": "Νέα κατηγορία επάνω",
-        "createBelow": "Νέα κατηγορία κάτω",
-        "openAllInNewTabs": ""
-      },
-      "create": {
-        "title": "Νέα κατηγορία",
-        "submit": "Προσθήκη κατηγορίας"
-      },
-      "remove": {
-        "title": "Αφαίρεση κατηγορίας",
-        "message": ""
-      },
-      "edit": {
-        "title": "Μετονομασία κατηγορίας",
-        "submit": "Μετονομασία κατηγορίας"
-      },
-      "menu": {
-        "label": {
-          "create": "Νέα κατηγορία",
-          "changePosition": "Αλλαγή θέσης",
-          "settings": "Ρυθμίσεις"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "",
-        "text": ""
+        "title": "Κατάργηση κοντέινερ",
+        "message": "Είστε βέβαιοι ότι θέλετε να καταργήσετε αυτό το κοντέινερ; Τα στοιχεία θα μετακινηθούν στην ίδια θέση στη γονική ενότητα."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "",
           "description": ""
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "",
         "user": "",
@@ -2734,6 +2512,9 @@
         "id": "",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -2802,193 +2583,6 @@
         "internalServerError": "Αποτυχία λήψης δεδομένων Paperless-ngx"
       }
     },
-    "patchmon": {
-      "name": "",
-      "description": "",
-      "title": "",
-      "totalHosts": "",
-      "hostsNeedingUpdates": "",
-      "securityUpdates": "",
-      "upToDateHosts": "",
-      "hostsWithSecurityUpdates": "",
-      "recentUpdates24h": "",
-      "totalOutdatedPackages": "",
-      "totalRepos": "",
-      "osDistribution": "",
-      "compliance": "",
-      "complianceRatio": "",
-      "lastUpdated": "",
-      "option": {
-        "showTotalHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsNeedingUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showUpToDateHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showRecentUpdates24h": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalOutdatedPackages": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalRepos": {
-          "label": "",
-          "description": ""
-        },
-        "enableThresholdColors": {
-          "label": "",
-          "description": ""
-        },
-        "useCustomThresholds": {
-          "label": "",
-          "description": ""
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "",
-            "percent": ""
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "showOsDistribution": {
-          "label": "",
-          "description": ""
-        },
-        "osDistributionLimit": {
-          "label": "",
-          "description": "",
-          "option": {
-            "3": "",
-            "5": "",
-            "10": "",
-            "all": ""
-          }
-        },
-        "showOsVersion": {
-          "label": "",
-          "description": ""
-        },
-        "showComplianceHero": {
-          "label": "",
-          "description": ""
-        },
-        "osDisplayMode": {
-          "label": "",
-          "description": "",
-          "option": {
-            "bars": "",
-            "donut": ""
-          }
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
-    "bazarr": {
-      "name": "",
-      "description": "",
-      "episodes": "",
-      "movies": "",
-      "providers": "",
-      "status": "",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "",
-          "description": ""
-        },
-        "showMissingMovies": {
-          "label": "",
-          "description": ""
-        },
-        "showProviderIssues": {
-          "label": "",
-          "description": ""
-        },
-        "showHealthIssues": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "immich-serverStats": {
       "name": "",
       "description": "",
@@ -3361,35 +2955,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showMissing": {
-          "label": ""
-        },
-        "showQueued": {
-          "label": ""
-        },
-        "pageSize": {
-          "label": ""
-        }
-      },
-      "tab": {
-        "missing": "",
-        "queued": ""
-      },
-      "type": {
-        "movie": "",
-        "episode": ""
-      },
-      "empty": {
-        "missing": "",
-        "queued": "",
-        "noTabsEnabled": ""
-      },
-      "timeLeft": ""
-    },
     "rssFeed": {
       "name": "",
       "description": "",
@@ -3718,40 +3283,6 @@
         "internalServerError": "Αποτυχία λήψης δεδομένων διαθεσιμότητας"
       }
     },
-    "traefik": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showTcp": {
-          "label": ""
-        },
-        "showUdp": {
-          "label": ""
-        },
-        "showEntryPoints": {
-          "label": ""
-        }
-      },
-      "instances": "",
-      "versionUnknown": "",
-      "summary": {
-        "routers": "",
-        "entryPoints": ""
-      },
-      "resource": {
-        "routers": "",
-        "services": "",
-        "middlewares": ""
-      },
-      "status": {
-        "healthy": "",
-        "errors": "",
-        "warnings": ""
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "audioStats": {
       "name": "Στατιστικά Ήχου",
       "description": "Στατιστικά βιβλιοθήκης και αναπαραγωγής από Navidrome ή Audiobookshelf",
@@ -3768,18 +3299,6 @@
           "label": "Εμφάνιση τραγουδιών",
           "description": "Εμφάνιση του συνολικού αριθμού τραγουδιών στη βιβλιοθήκη μουσικής σας (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "Εμφάνιση τρέχουσας αναπαραγωγής",
-          "description": "Εμφάνιση κομματιών που αναπαράγονται αυτήν τη στιγμή (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "Εμφάνιση λίστας τρέχουσας αναπαραγωγής",
-          "description": "Εμφάνιση μεμονωμένων κομματιών αντί μόνο του αριθμού ενεργών ροών (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "Μέγιστα στοιχεία τρέχουσας αναπαραγωγής",
-          "description": "Μέγιστος αριθμός κομματιών προς εμφάνιση στη λίστα τρέχουσας αναπαραγωγής (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "Εμφάνιση αριθμού βιβλιοθηκών",
           "description": "Εμφάνιση του αριθμού βιβλιοθηκών στην εγκατάστασή σας (Audiobookshelf)"
@@ -3813,8 +3332,6 @@
       "podcasts": "Ποντκαστ",
       "listeningTime": "Χρόνος Ακρόασης",
       "activeSessions": "Ενεργές Συνεδρίες",
-      "nowPlaying": "Τρέχουσα Αναπαραγωγή",
-      "nowPlayingCount": "{count, plural, one {# ροή} other {# ροές}}",
       "error": {
         "internalServerError": "Αποτυχία λήψης δεδομένων στατιστικών ήχου"
       }
@@ -3889,26 +3406,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Beszel Συστήματα (Πίνακας)",
       "description": "Προβολή πίνακα όλων των συστημάτων που παρακολουθούνται από το Beszel με ταξινομήσιμες στήλες και δείκτες κατάστασης",
@@ -3954,11 +3451,19 @@
         },
         "showAgent": {
           "label": "Εμφάνιση έκδοσης agent"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Δεν βρέθηκαν συστήματα",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Σύστημα",
@@ -4151,6 +3656,256 @@
           "subtitle": "Κίνηση δικτύου των docker containers"
         }
       }
+    },
+    "patchmon": {
+      "name": "",
+      "description": "",
+      "title": "",
+      "totalHosts": "",
+      "hostsNeedingUpdates": "",
+      "securityUpdates": "",
+      "upToDateHosts": "",
+      "hostsWithSecurityUpdates": "",
+      "recentUpdates24h": "",
+      "totalOutdatedPackages": "",
+      "totalRepos": "",
+      "osDistribution": "",
+      "compliance": "",
+      "complianceRatio": "",
+      "lastUpdated": "",
+      "option": {
+        "showTotalHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsNeedingUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showUpToDateHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showRecentUpdates24h": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalOutdatedPackages": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalRepos": {
+          "label": "",
+          "description": ""
+        },
+        "enableThresholdColors": {
+          "label": "",
+          "description": ""
+        },
+        "useCustomThresholds": {
+          "label": "",
+          "description": ""
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "",
+            "percent": ""
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "showOsDistribution": {
+          "label": "",
+          "description": ""
+        },
+        "osDistributionLimit": {
+          "label": "",
+          "description": "",
+          "option": {
+            "3": "",
+            "5": "",
+            "10": "",
+            "all": ""
+          }
+        },
+        "showOsVersion": {
+          "label": "",
+          "description": ""
+        },
+        "showComplianceHero": {
+          "label": "",
+          "description": ""
+        },
+        "osDisplayMode": {
+          "label": "",
+          "description": "",
+          "option": {
+            "bars": "",
+            "donut": ""
+          }
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "bazarr": {
+      "name": "",
+      "description": "",
+      "episodes": "",
+      "movies": "",
+      "providers": "",
+      "status": "",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "",
+          "description": ""
+        },
+        "showMissingMovies": {
+          "label": "",
+          "description": ""
+        },
+        "showProviderIssues": {
+          "label": "",
+          "description": ""
+        },
+        "showHealthIssues": {
+          "label": "",
+          "description": ""
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "mediaMissing": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showMissing": {
+          "label": ""
+        },
+        "showQueued": {
+          "label": ""
+        },
+        "pageSize": {
+          "label": ""
+        }
+      },
+      "tab": {
+        "missing": "",
+        "queued": ""
+      },
+      "type": {
+        "movie": "",
+        "episode": ""
+      },
+      "empty": {
+        "missing": "",
+        "queued": "",
+        "noTabsEnabled": ""
+      },
+      "timeLeft": ""
+    },
+    "traefik": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showTcp": {
+          "label": ""
+        },
+        "showUdp": {
+          "label": ""
+        },
+        "showEntryPoints": {
+          "label": ""
+        }
+      },
+      "instances": "",
+      "versionUnknown": "",
+      "summary": {
+        "routers": "",
+        "entryPoints": ""
+      },
+      "resource": {
+        "routers": "",
+        "services": "",
+        "middlewares": ""
+      },
+      "status": {
+        "healthy": "",
+        "errors": "",
+        "warnings": ""
+      },
+      "error": {
+        "internalServerError": ""
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Αρχική",
         "boards": "Πίνακες",
         "apps": "Εφαρμογές",
         "integrations": "",
-        "customWidgets": "",
         "searchEngies": "",
         "medias": "",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Αφαίρεση",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Διαχείριση",
       "boards": {
         "label": "Πίνακες"
@@ -5707,18 +5466,6 @@
           "label": "Επεξεργασία"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Χρήστες",
         "create": {
diff --git a/packages/translation/src/lang/en-gb.json b/packages/translation/src/lang/en-gb.json
index 9cdcf782d..54d800cf6 100644
--- a/packages/translation/src/lang/en-gb.json
+++ b/packages/translation/src/lang/en-gb.json
@@ -710,194 +710,8 @@
       "delete": "Delete Custom Widget",
       "deleteConfirm": "Are you sure you want to delete \"{name}\"? This action cannot be undone.",
       "export": "Export",
-      "addMapping": "Add Mapping",
-      "addColumn": "Add Column",
       "edit": "Edit",
-      "removeMapping": "Remove mapping",
-      "removeColumn": "Remove column",
-      "addItem": "Add Item",
-      "removeItem": "Remove item",
-      "addBar": "Add Bar",
-      "duplicate": "Duplicate",
-      "aiPrompt": "Design with AI",
-      "copyAiPrompt": "Copy AI prompt",
-      "enable": "Enable",
-      "disable": "Disable",
-      "menu": "Actions"
-    },
-    "field": {
-      "name": "Name",
-      "description": "Description",
-      "iconUrl": "Icon URL",
-      "url": "URL",
-      "authType": "Auth Type",
-      "headerName": "Header/Query Parameter Name",
-      "method": "Method",
-      "requestBody": "Request Body",
-      "displayType": "Display Type",
-      "jsonPath": "JSON Path",
-      "jsonPathHint": "Use JSONPath syntax to extract values, e.g. $.data.temperature or $.items[0].name",
-      "label": "Label",
-      "unit": "Unit",
-      "mappings": "Mappings",
-      "tablePath": "Array JSON Path",
-      "tablePathHint": "Path to the array in the response, e.g. $.data.items",
-      "columns": "Columns",
-      "header": "Header",
-      "items": "Items",
-      "gridColumns": "Grid Columns",
-      "cardStyle": "Card Style",
-      "bars": "Bars",
-      "valuePath": "Value JSON Path",
-      "maxPath": "Max Value JSON Path",
-      "showPercentage": "Show Percentage",
-      "barSize": "Bar Size",
-      "goodValues": "Good Values (comma-separated)",
-      "dotSize": "Dot Size",
-      "valueSize": "Value Size",
-      "labelPosition": "Label Position",
-      "kvLayout": "Layout",
-      "striped": "Striped Rows",
-      "compact": "Compact Mode",
-      "maxHeight": "Max Height (px)",
-      "color": "Colour",
-      "buttonLabel": "Button Label",
-      "buttonColor": "Button Colour",
-      "confirmText": "Confirmation Text",
-      "confirmTextHint": "If set, a confirmation dialogue will appear before executing the request",
-      "successMessage": "Success Message",
-      "successMessageHint": "Message shown after successful execution",
-      "enabled": "Enabled",
-      "template": {
-        "label": "JSX Template",
-        "description": "Mantine JSX template. Access API response fields via data bindings (e.g. data.name). Use whitelisted components only. Forbidden: constructor, __proto__, eval, Function, window, document."
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "CPU Temperature",
-      "exampleLabelShort": "CPU Temp",
-      "exampleHeader": "Name",
-      "exampleUnit": "°C",
-      "iconUrl": "https://...",
-      "url": "https://api.example.com/api/v1/status",
-      "headerName": "X-API-Key",
-      "jsonPath": "$.data.value",
-      "tablePath": "$.data.items",
-      "columnJsonPath": "$.name",
-      "valuePath": "$.data.used",
-      "maxPath": "$.data.total",
-      "goodValues": "online, true, up",
-      "color": "blue"
-    },
-    "cardStyleOption": {
-      "filled": "Filled",
-      "outline": "Outline",
-      "subtle": "Subtle"
-    },
-    "layoutOption": {
-      "list": "List",
-      "grid": "Grid"
-    },
-    "sizeOption": {
-      "sm": "Small",
-      "md": "Medium",
-      "lg": "Large",
-      "xl": "Extra Large"
-    },
-    "labelPositionOption": {
-      "above": "Above",
-      "below": "Below"
-    },
-    "fieldset": {
-      "general": "General",
-      "connection": "API Connection",
-      "display": "Display Configuration"
-    },
-    "displayTypeDescription": {
-      "singleValue": "Show one extracted value with a label and unit",
-      "keyValue": "Show multiple labeled values side by side",
-      "table": "Show rows of data in a table format",
-      "statGrid": "Colored stat cards in a grid — like Pi-Hole or Speedtest widgets",
-      "progressBars": "Progress bars showing usage or completion — for disk, memory, quotas",
-      "statusIndicator": "Colored status dots showing online/offline or health states",
-      "countGrid": "Compact number + label counters in a tight grid",
-      "raw": "Pretty-printed JSON output for debugging",
-      "actionButton": "A button that triggers a request when clicked",
-      "customJsx": "Custom JSX layout using whitelisted Mantine components with full API data binding"
-    },
-    "method": {
-      "GET": "GET",
-      "POST": "POST",
-      "PUT": "PUT",
-      "DELETE": "DELETE",
-      "PATCH": "PATCH"
-    },
-    "authType": {
-      "none": "None",
-      "bearer": "Bearer Token",
-      "basic": "Basic Auth",
-      "apiKeyHeader": "API Key (Header)",
-      "apiKeyQuery": "API Key (Query)"
-    },
-    "displayType": {
-      "singleValue": "Single Value",
-      "keyValue": "Key-Value",
-      "table": "Table",
-      "statGrid": "Stat Grid",
-      "progressBars": "Progress Bars",
-      "statusIndicator": "Status Indicator",
-      "countGrid": "Count Grid",
-      "raw": "Raw JSON",
-      "actionButton": "Action Button",
-      "customJsx": "Custom JSX"
-    },
-    "secret": {
-      "apiKey": "API Key / Token",
-      "username": "Username",
-      "password": "Password",
-      "savedPlaceholder": "••••••• (saved, leave empty to keep)"
-    },
-    "preview": {
-      "title": "Preview",
-      "test": "Test",
-      "hint": "Click Test to preview the API response with your current configuration.",
-      "rawResponse": "Raw JSON response"
-    },
-    "notification": {
-      "created": "Widget \"{name}\" created successfully.",
-      "updated": "Widget \"{name}\" updated successfully.",
-      "deleted": "Widget \"{name}\" deleted.",
-      "imported": "Widget imported successfully.",
-      "aiPromptCopied": "AI prompt copied to clipboard",
-      "aiPromptDescription": "Describe the widget you want. Homarr Assistant can create or update it after your approval, or you can copy the same prompt into another AI service.",
-      "aiPromptRequestLabel": "What should the widget do?",
-      "aiPromptRequestPlaceholder": "For example: Show service health as a compact status grid and highlight failures.",
-      "aiPromptAssistant": "Ask Homarr Assistant",
-      "aiPromptAssistantBusy": "Assistant is working",
-      "aiPromptAssistantUnavailable": "Homarr Assistant is not available. You can still copy this prompt and use it with another AI service.",
-      "aiPromptSent": "Your request was sent to Homarr Assistant. You can follow its progress from the activity bar.",
-      "aiPromptCopy": "Copy to clipboard",
-      "aiPromptNoResponse": "Tip: Run a test first to include your API response in the prompt for better results.",
-      "aiPromptCopyError": "Failed to copy prompt to clipboard. Your browser may not support this feature.",
-      "createError": "Failed to create widget. Check your API endpoint is reachable.",
-      "updateError": "Failed to update widget. Your changes were not saved.",
-      "importError": "Failed to import widget. Ensure the file is a valid custom widget JSON export.",
-      "exportError": "Failed to export widget.",
-      "duplicated": "Widget \"{name}\" duplicated.",
-      "duplicateError": "Failed to duplicate widget.",
-      "toggleError": "Failed to toggle widget status.",
-      "deleteError": "Failed to delete widget.",
-      "previewError": "Failed to fetch preview. Check the URL and try again.",
-      "executed": "Action executed successfully.",
-      "executeError": "Action failed: {error}"
-    },
-    "table": {
-      "name": "Name",
-      "url": "URL",
-      "display": "Display"
-    },
-    "widget": {
-      "disabled": "This widget is disabled"
+      "aiPrompt": "Design with AI"
     }
   },
   "integration": {
@@ -1556,10 +1370,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Create a new dynamic section",
-        "remove": "Delete dynamic section"
+        "create": "Create a new container",
+        "remove": "Delete container"
       },
       "option": {
         "title": {
@@ -1573,48 +1387,8 @@
         }
       },
       "remove": {
-        "title": "Remove dynamic section",
-        "message": "Are you certain that you want to remove this dynamic section? All items inside will be moved to the same location within the parent section."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Name"
-        }
-      },
-      "action": {
-        "create": "New category",
-        "edit": "Rename category",
-        "remove": "Remove category",
-        "moveUp": "Move upwards",
-        "moveDown": "Move downwards",
-        "createAbove": "Create new category above",
-        "createBelow": "Create new category below",
-        "openAllInNewTabs": "Open all in new tabs"
-      },
-      "create": {
-        "title": "New category",
-        "submit": "Add category"
-      },
-      "remove": {
-        "title": "Remove category",
-        "message": "Are you sure you want to remove the category {name}?"
-      },
-      "edit": {
-        "title": "Rename category",
-        "submit": "Rename category"
-      },
-      "menu": {
-        "label": {
-          "create": "New category",
-          "changePosition": "Change position",
-          "settings": "Settings"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Open all in tabs",
-        "text": "Some browsers may block the bulk-opening of tabs for security reasons. Homarr was unable to open all windows, because your browser blocked this action. Please allow \"Open pop-up windows\" and re-try."
+        "title": "Remove container",
+        "message": "Are you certain that you want to remove this container? All items inside will be moved to the same location within the parent section."
       }
     }
   },
@@ -2435,10 +2209,21 @@
         },
         "descendingDefaultSort": {
           "label": "Invert sorting"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "Failed to fetch containers stats"
+        "internalServerError": "Failed to fetch containers stats",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2571,26 +2356,26 @@
       "description": "Display visitor stats from your Umami analytics instance",
       "visitors": "visitors",
       "active": "active",
-      "pageviews": "",
-      "visits": "",
-      "bounceRate": "",
-      "avgDuration": "",
+      "pageviews": "pageviews",
+      "visits": "visits",
+      "bounceRate": "bounce",
+      "avgDuration": "avg",
       "option": {
         "websiteId": {
-          "label": "",
-          "description": "",
-          "placeholder": "",
-          "loading": "",
-          "noWebsites": "",
-          "configureIntegrationFirst": ""
+          "label": "Website",
+          "description": "Select a website tracked by your Umami instance",
+          "placeholder": "Select a website",
+          "loading": "Loading websites...",
+          "noWebsites": "No websites found",
+          "configureIntegrationFirst": "Connect a Umami integration first"
         },
         "timeFrame": {
-          "label": "",
-          "description": "",
+          "label": "Time frame",
+          "description": "The time period to display visitor data for",
           "option": {
-            "today": "",
-            "24h": "",
-            "7d": "",
+            "today": "Today",
+            "24h": "Last 24 hours",
+            "7d": "Last 7 days",
             "30d": "Last 30 days",
             "month": "This month",
             "lastMonth": "Last month"
@@ -2732,8 +2517,20 @@
         "showOnlyPlaying": {
           "label": "Show only currently playing",
           "description": "Disabling this will not work for Plex"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "Currently playing",
         "user": "User",
@@ -2741,6 +2538,9 @@
         "id": "Id",
         "status": "Status",
         "directPlay": "Direct play",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "Transcoding",
         "paused": "Paused",
         "remaining": "{minutes} min left",
@@ -2809,193 +2609,6 @@
         "internalServerError": "Failed to fetch Paperless-ngx data"
       }
     },
-    "patchmon": {
-      "name": "PatchMon",
-      "description": "Overview of host patch status from PatchMon",
-      "title": "PatchMon Statistics",
-      "totalHosts": "Total Hosts",
-      "hostsNeedingUpdates": "Needs Updates",
-      "securityUpdates": "Security Updates",
-      "upToDateHosts": "Up-to-Date Hosts",
-      "hostsWithSecurityUpdates": "Hosts with Security Updates",
-      "recentUpdates24h": "Updates (24h)",
-      "totalOutdatedPackages": "Outdated Packages",
-      "totalRepos": "Repositories",
-      "osDistribution": "OS Distribution",
-      "compliance": "Patch Compliance",
-      "complianceRatio": "{upToDate} / {total}",
-      "lastUpdated": "Updated {time}",
-      "option": {
-        "showTotalHosts": {
-          "label": "Show total hosts",
-          "description": "Display the total number of monitored hosts"
-        },
-        "showHostsNeedingUpdates": {
-          "label": "Show hosts needing updates",
-          "description": "Display hosts with at least one outdated package"
-        },
-        "showSecurityUpdates": {
-          "label": "Show security updates",
-          "description": "Display the total number of security updates available"
-        },
-        "showUpToDateHosts": {
-          "label": "Show up-to-date hosts",
-          "description": "Display hosts with zero outdated packages"
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "Show hosts with security updates",
-          "description": "Display hosts requiring security patches"
-        },
-        "showRecentUpdates24h": {
-          "label": "Show recent updates (24h)",
-          "description": "Display the number of updates applied in the last 24 hours"
-        },
-        "showTotalOutdatedPackages": {
-          "label": "Show outdated packages",
-          "description": "Display the total number of outdated packages across all hosts"
-        },
-        "showTotalRepos": {
-          "label": "Show repositories",
-          "description": "Display the number of active repositories being monitored"
-        },
-        "enableThresholdColors": {
-          "label": "Enable threshold colours",
-          "description": "Colour stat values green, yellow, or red based on severity presets"
-        },
-        "useCustomThresholds": {
-          "label": "Advanced thresholds",
-          "description": "Customise warning and critical thresholds per stat using absolute counts or percentages of total hosts"
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "Absolute count",
-            "percent": "Percent of total hosts"
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "Needs updates threshold mode",
-          "description": "Compare the needs-updates count as an absolute value or percentage of total hosts"
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "Needs updates warning threshold",
-          "description": "Enter yellow when the value reaches this threshold"
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "Needs updates critical threshold",
-          "description": "Enter red when the value reaches this threshold"
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "Security updates threshold mode",
-          "description": "Compare the security-updates count as an absolute value or percentage of total hosts"
-        },
-        "securityUpdatesWarningAt": {
-          "label": "Security updates warning threshold",
-          "description": "Enter yellow when the value reaches this threshold"
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "Security updates critical threshold",
-          "description": "Enter red when the value reaches this threshold"
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "Hosts with security updates threshold mode",
-          "description": "Compare the host count as an absolute value or percentage of total hosts"
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "Hosts with security updates warning threshold",
-          "description": "Enter yellow when the value reaches this threshold"
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "Hosts with security updates critical threshold",
-          "description": "Enter red when the value reaches this threshold"
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "Up-to-date hosts threshold mode",
-          "description": "Compare the up-to-date host count as an absolute value or percentage of total hosts"
-        },
-        "upToDateHostsWarningAt": {
-          "label": "Up-to-date hosts warning threshold",
-          "description": "Enter yellow when the value is at or above this threshold but below full coverage"
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "Up-to-date hosts critical threshold",
-          "description": "Enter red when the value falls below this threshold"
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "Outdated packages threshold mode",
-          "description": "Compare the outdated-packages count as an absolute value or percentage of total hosts"
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "Outdated packages warning threshold",
-          "description": "Enter yellow when the value reaches this threshold"
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "Outdated packages critical threshold",
-          "description": "Enter red when the value reaches this threshold"
-        },
-        "showOsDistribution": {
-          "label": "Show OS distribution",
-          "description": "Display a breakdown of monitored hosts by operating system"
-        },
-        "osDistributionLimit": {
-          "label": "OS distribution limit",
-          "description": "Maximum number of operating systems to display",
-          "option": {
-            "3": "Top 3",
-            "5": "Top 5",
-            "10": "Top 10",
-            "all": "All"
-          }
-        },
-        "showOsVersion": {
-          "label": "Show OS version",
-          "description": "Append the OS version to each distribution label when available"
-        },
-        "showComplianceHero": {
-          "label": "Show compliance hero",
-          "description": "Display a compliance ring showing the percentage of up-to-date hosts"
-        },
-        "osDisplayMode": {
-          "label": "OS display mode",
-          "description": "Choose how to display the operating system distribution",
-          "option": {
-            "bars": "Horizontal bars",
-            "donut": "Doughnut chart"
-          }
-        }
-      },
-      "error": {
-        "internalServerError": "Failed to fetch PatchMon data"
-      }
-    },
-    "bazarr": {
-      "name": "Bazarr",
-      "description": "Overview of missing subtitles and health status from your Bazarr instance",
-      "episodes": "Missing Episodes",
-      "movies": "Missing Movies",
-      "providers": "Provider Issues",
-      "status": "Health Issues",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "Show missing episodes",
-          "description": "Display the number of episodes with missing subtitles"
-        },
-        "showMissingMovies": {
-          "label": "Show missing movies",
-          "description": "Display the number of movies with missing subtitles"
-        },
-        "showProviderIssues": {
-          "label": "Show provider issues",
-          "description": "Display the number of subtitle providers with issues"
-        },
-        "showHealthIssues": {
-          "label": "Show health issues",
-          "description": "Display the number of Bazarr health issues"
-        }
-      },
-      "error": {
-        "internalServerError": "Failed to fetch Bazarr data"
-      }
-    },
     "immich-serverStats": {
       "name": "Immich Server Stats",
       "description": "Information about your Immich instance",
@@ -3368,35 +2981,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "Missing & Queued Media",
-      "description": "Shows missing and queued movies and episodes from Radarr and Sonarr",
-      "option": {
-        "showMissing": {
-          "label": "Show missing items"
-        },
-        "showQueued": {
-          "label": "Show queued items"
-        },
-        "pageSize": {
-          "label": "Items per page"
-        }
-      },
-      "tab": {
-        "missing": "Missing",
-        "queued": "Queued"
-      },
-      "type": {
-        "movie": "Movie",
-        "episode": "Episode"
-      },
-      "empty": {
-        "missing": "No missing items",
-        "queued": "No queued items",
-        "noTabsEnabled": "Enable at least one tab in the widget settings"
-      },
-      "timeLeft": "Time left"
-    },
     "rssFeed": {
       "name": "",
       "description": "",
@@ -3725,40 +3309,6 @@
         "internalServerError": "Failed to fetch uptime data"
       }
     },
-    "traefik": {
-      "name": "Traefik",
-      "description": "Overview of Traefik routers, services, middlewares, and entry points",
-      "option": {
-        "showTcp": {
-          "label": "Show TCP"
-        },
-        "showUdp": {
-          "label": "Show UDP"
-        },
-        "showEntryPoints": {
-          "label": "Show entry points"
-        }
-      },
-      "instances": "Traefik instances",
-      "versionUnknown": "Version unknown",
-      "summary": {
-        "routers": "Routers",
-        "entryPoints": "Entry points"
-      },
-      "resource": {
-        "routers": "Routers",
-        "services": "Services",
-        "middlewares": "Middlewares"
-      },
-      "status": {
-        "healthy": "Healthy",
-        "errors": "{count} errors",
-        "warnings": "{count} warnings"
-      },
-      "error": {
-        "internalServerError": "Failed to fetch Traefik data"
-      }
-    },
     "audioStats": {
       "name": "Audio stats",
       "description": "Library and playback statistics from Navidrome or Audiobookshelf",
@@ -3775,18 +3325,6 @@
           "label": "Show songs",
           "description": "Show the total number of songs in your music library (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "Show now playing",
-          "description": "Show tracks currently being played (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "Show now playing list",
-          "description": "Show individual tracks instead of only the active stream count (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "Max now playing items",
-          "description": "Maximum number of tracks to show in the now playing list (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "Show library count",
           "description": "Show the number of libraries on your instance (Audiobookshelf)"
@@ -3820,8 +3358,6 @@
       "podcasts": "Podcasts",
       "listeningTime": "Listening Time",
       "activeSessions": "Active Sessions",
-      "nowPlaying": "Now Playing",
-      "nowPlayingCount": "{count, plural, one {# stream} other {# streams}}",
       "error": {
         "internalServerError": "Failed to fetch audio stats data"
       }
@@ -3896,26 +3432,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "Custom API",
-      "description": "Display data from any external API with custom configuration.",
-      "option": {
-        "definitionId": {
-          "label": "Definition ID"
-        },
-        "refreshInterval": {
-          "label": "Refresh interval",
-          "description": "How often to refetch data from the API (in seconds)"
-        }
-      },
-      "noDefinition": "No definition selected",
-      "definitionNotFound": "Widget definition not found. It may have been deleted.",
-      "noDisplayOutput": "No display output",
-      "executeConfirm": "Are you sure you want to execute this action?",
-      "executing": "Executing...",
-      "executeSuccess": "Action executed successfully",
-      "executeFailed": "Action failed. Check the widget configuration."
-    },
     "beszelSystemTable": {
       "name": "Beszel Systems (Table)",
       "description": "Table view of all Beszel-monitored systems with sortable columns and status indicators",
@@ -3961,11 +3477,19 @@
         },
         "showAgent": {
           "label": "Show agent version"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "No systems found",
       "error": {
-        "internalServerError": "Unable to connect to Beszel. Check your integration settings."
+        "internalServerError": "Unable to connect to Beszel. Check your integration settings.",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "System",
@@ -4158,6 +3682,256 @@
           "subtitle": "Network traffic of docker containers"
         }
       }
+    },
+    "patchmon": {
+      "name": "PatchMon",
+      "description": "Overview of host patch status from PatchMon",
+      "title": "PatchMon Statistics",
+      "totalHosts": "Total Hosts",
+      "hostsNeedingUpdates": "Needs Updates",
+      "securityUpdates": "Security Updates",
+      "upToDateHosts": "Up-to-Date Hosts",
+      "hostsWithSecurityUpdates": "Hosts with Security Updates",
+      "recentUpdates24h": "Updates (24h)",
+      "totalOutdatedPackages": "Outdated Packages",
+      "totalRepos": "Repositories",
+      "osDistribution": "OS Distribution",
+      "compliance": "Patch Compliance",
+      "complianceRatio": "{upToDate} / {total}",
+      "lastUpdated": "Updated {time}",
+      "option": {
+        "showTotalHosts": {
+          "label": "Show total hosts",
+          "description": "Display the total number of monitored hosts"
+        },
+        "showHostsNeedingUpdates": {
+          "label": "Show hosts needing updates",
+          "description": "Display hosts with at least one outdated package"
+        },
+        "showSecurityUpdates": {
+          "label": "Show security updates",
+          "description": "Display the total number of security updates available"
+        },
+        "showUpToDateHosts": {
+          "label": "Show up-to-date hosts",
+          "description": "Display hosts with zero outdated packages"
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "Show hosts with security updates",
+          "description": "Display hosts requiring security patches"
+        },
+        "showRecentUpdates24h": {
+          "label": "Show recent updates (24h)",
+          "description": "Display the number of updates applied in the last 24 hours"
+        },
+        "showTotalOutdatedPackages": {
+          "label": "Show outdated packages",
+          "description": "Display the total number of outdated packages across all hosts"
+        },
+        "showTotalRepos": {
+          "label": "Show repositories",
+          "description": "Display the number of active repositories being monitored"
+        },
+        "enableThresholdColors": {
+          "label": "Enable threshold colours",
+          "description": "Colour stat values green, yellow, or red based on severity presets"
+        },
+        "useCustomThresholds": {
+          "label": "Advanced thresholds",
+          "description": "Customise warning and critical thresholds per stat using absolute counts or percentages of total hosts"
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "Absolute count",
+            "percent": "Percent of total hosts"
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "Needs updates threshold mode",
+          "description": "Compare the needs-updates count as an absolute value or percentage of total hosts"
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "Needs updates warning threshold",
+          "description": "Enter yellow when the value reaches this threshold"
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "Needs updates critical threshold",
+          "description": "Enter red when the value reaches this threshold"
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "Security updates threshold mode",
+          "description": "Compare the security-updates count as an absolute value or percentage of total hosts"
+        },
+        "securityUpdatesWarningAt": {
+          "label": "Security updates warning threshold",
+          "description": "Enter yellow when the value reaches this threshold"
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "Security updates critical threshold",
+          "description": "Enter red when the value reaches this threshold"
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "Hosts with security updates threshold mode",
+          "description": "Compare the host count as an absolute value or percentage of total hosts"
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "Hosts with security updates warning threshold",
+          "description": "Enter yellow when the value reaches this threshold"
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "Hosts with security updates critical threshold",
+          "description": "Enter red when the value reaches this threshold"
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "Up-to-date hosts threshold mode",
+          "description": "Compare the up-to-date host count as an absolute value or percentage of total hosts"
+        },
+        "upToDateHostsWarningAt": {
+          "label": "Up-to-date hosts warning threshold",
+          "description": "Enter yellow when the value is at or above this threshold but below full coverage"
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "Up-to-date hosts critical threshold",
+          "description": "Enter red when the value falls below this threshold"
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "Outdated packages threshold mode",
+          "description": "Compare the outdated-packages count as an absolute value or percentage of total hosts"
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "Outdated packages warning threshold",
+          "description": "Enter yellow when the value reaches this threshold"
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "Outdated packages critical threshold",
+          "description": "Enter red when the value reaches this threshold"
+        },
+        "showOsDistribution": {
+          "label": "Show OS distribution",
+          "description": "Display a breakdown of monitored hosts by operating system"
+        },
+        "osDistributionLimit": {
+          "label": "OS distribution limit",
+          "description": "Maximum number of operating systems to display",
+          "option": {
+            "3": "Top 3",
+            "5": "Top 5",
+            "10": "Top 10",
+            "all": "All"
+          }
+        },
+        "showOsVersion": {
+          "label": "Show OS version",
+          "description": "Append the OS version to each distribution label when available"
+        },
+        "showComplianceHero": {
+          "label": "Show compliance hero",
+          "description": "Display a compliance ring showing the percentage of up-to-date hosts"
+        },
+        "osDisplayMode": {
+          "label": "OS display mode",
+          "description": "Choose how to display the operating system distribution",
+          "option": {
+            "bars": "Horizontal bars",
+            "donut": "Doughnut chart"
+          }
+        }
+      },
+      "error": {
+        "internalServerError": "Failed to fetch PatchMon data"
+      }
+    },
+    "bazarr": {
+      "name": "Bazarr",
+      "description": "Overview of missing subtitles and health status from your Bazarr instance",
+      "episodes": "Missing Episodes",
+      "movies": "Missing Movies",
+      "providers": "Provider Issues",
+      "status": "Health Issues",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "Show missing episodes",
+          "description": "Display the number of episodes with missing subtitles"
+        },
+        "showMissingMovies": {
+          "label": "Show missing movies",
+          "description": "Display the number of movies with missing subtitles"
+        },
+        "showProviderIssues": {
+          "label": "Show provider issues",
+          "description": "Display the number of subtitle providers with issues"
+        },
+        "showHealthIssues": {
+          "label": "Show health issues",
+          "description": "Display the number of Bazarr health issues"
+        }
+      },
+      "error": {
+        "internalServerError": "Failed to fetch Bazarr data"
+      }
+    },
+    "mediaMissing": {
+      "name": "Missing & Queued Media",
+      "description": "Shows missing and queued movies and episodes from Radarr and Sonarr",
+      "option": {
+        "showMissing": {
+          "label": "Show missing items"
+        },
+        "showQueued": {
+          "label": "Show queued items"
+        },
+        "pageSize": {
+          "label": "Items per page"
+        }
+      },
+      "tab": {
+        "missing": "Missing",
+        "queued": "Queued"
+      },
+      "type": {
+        "movie": "Movie",
+        "episode": "Episode"
+      },
+      "empty": {
+        "missing": "No missing items",
+        "queued": "No queued items",
+        "noTabsEnabled": "Enable at least one tab in the widget settings"
+      },
+      "timeLeft": "Time left"
+    },
+    "traefik": {
+      "name": "Traefik",
+      "description": "Overview of Traefik routers, services, middlewares, and entry points",
+      "option": {
+        "showTcp": {
+          "label": "Show TCP"
+        },
+        "showUdp": {
+          "label": "Show UDP"
+        },
+        "showEntryPoints": {
+          "label": "Show entry points"
+        }
+      },
+      "instances": "Traefik instances",
+      "versionUnknown": "Version unknown",
+      "summary": {
+        "routers": "Routers",
+        "entryPoints": "Entry points"
+      },
+      "resource": {
+        "routers": "Routers",
+        "services": "Services",
+        "middlewares": "Middlewares"
+      },
+      "status": {
+        "healthy": "Healthy",
+        "errors": "{count} errors",
+        "warnings": "{count} warnings"
+      },
+      "error": {
+        "internalServerError": "Failed to fetch Traefik data"
+      }
     }
   },
   "widgetPreview": {
@@ -4538,11 +4312,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "",
         "boards": "",
         "apps": "",
         "integrations": "",
-        "customWidgets": "Custom Widgets",
         "searchEngies": "",
         "medias": "",
         "users": {
@@ -5363,6 +5137,7 @@
       },
       "remove": {
         "label": "",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "",
@@ -5680,6 +5455,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "",
       "boards": {
         "label": ""
@@ -5714,18 +5492,6 @@
           "label": ""
         }
       },
-      "custom-widgets": {
-        "label": "Custom widgets",
-        "new": {
-          "label": "New"
-        },
-        "edit": {
-          "label": "Edit",
-          "flow": {
-            "label": "Flow"
-          }
-        }
-      },
       "users": {
         "label": "",
         "create": {
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index 51017af28..c49b1f259 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -388,6 +388,19 @@
           }
         }
       },
+      "custom-widget": {
+        "title": "Custom widgets",
+        "item": {
+          "manage": {
+            "label": "Manage custom widgets",
+            "description": "Allow members to create, edit, and delete custom widget definitions"
+          },
+          "secret-write": {
+            "label": "Configure custom widget secrets",
+            "description": "Allow members and their API keys to set encrypted custom widget credentials"
+          }
+        }
+      },
       "app": {
         "title": "Apps",
         "item": {
@@ -689,11 +702,42 @@
     }
   },
   "customWidget": {
+    "betaBanner": {
+      "title": "Custom Widgets are in Beta",
+      "description": "This feature is experimental and will probably change significantly. If you encounter bugs, want additional capabilities, or find something confusing, please share your feedback in the",
+      "discussionLink": "official discussion forum",
+      "closing": "so it can be considered. Happy hacking!"
+    },
+    "secretEntry": {
+      "title": "Configure API source",
+      "description": "Confirm the server URL and enter credentials. Secret values are encrypted by Homarr and never returned to the requesting agent.",
+      "loading": "Loading secure request…",
+      "saved": "API source configured. You can close this page.",
+      "unavailable": "Request unavailable",
+      "saveError": "Unable to configure API source",
+      "source": "API source: {name}",
+      "baseUrl": "Server URL",
+      "networkScope": "Network access",
+      "save": "Save API configuration",
+      "expires": "This one-time request expires at {time}.",
+      "field": {
+        "apiKey": "API key or token",
+        "username": "Username",
+        "password": "Password"
+      }
+    },
     "page": {
       "list": {
         "title": "Custom Widgets",
         "noResults": "No custom widgets yet. Create your first one!",
-        "loading": "Loading..."
+        "loading": "Loading...",
+        "invalidDefinition": "Invalid definition",
+        "invalidDefinitionDescription": "This stored widget no longer matches the current Custom Widget schema. Delete it and recreate or import a valid definition.",
+        "migrationRequired": "Migration required",
+        "migrationDescription": "This v1 custom widget is preserved but cannot run until it is migrated to Custom JSX v2.",
+        "migrationInstructions": "Open Actions, copy the redacted migration prompt into an LLM, then copy its single JSON response and choose Paste migrated widget. Existing board placements keep working after migration.",
+        "missingCredentials": "{count, plural, one {Credential missing} other {# credentials missing}}",
+        "missingCredentialsDescription": "{count, plural, one {This widget still needs one credential.} other {This widget still needs # credentials.}} Edit it to configure the encrypted values."
       },
       "create": {
         "title": "Create Custom Widget",
@@ -706,24 +750,31 @@
     "action": {
       "create": "Create",
       "import": "Import",
+      "pasteImportHint": "Paste a full custom widget JSON with Ctrl+V or Command+V",
       "save": "Save",
       "delete": "Delete Custom Widget",
       "deleteConfirm": "Are you sure you want to delete \"{name}\"? This action cannot be undone.",
       "export": "Export",
-      "addMapping": "Add Mapping",
-      "addColumn": "Add Column",
       "edit": "Edit",
-      "removeMapping": "Remove mapping",
-      "removeColumn": "Remove column",
-      "addItem": "Add Item",
-      "removeItem": "Remove item",
-      "addBar": "Add Bar",
       "duplicate": "Duplicate",
       "aiPrompt": "Design with AI",
       "copyAiPrompt": "Copy AI prompt",
       "enable": "Enable",
       "disable": "Disable",
-      "menu": "Actions"
+      "menu": "Actions",
+      "downloadSkill": "View Custom Widget Skill",
+      "publishWorkshop": "Publish to Workshop",
+      "migrate": "Migrate Custom Widget",
+      "copyMigrationPrompt": "Copy LLM migration prompt",
+      "pasteMigration": "Paste migrated widget",
+      "importMigration": "Import migrated JSON file",
+      "addMapping": "Add Mapping",
+      "addColumn": "Add Column",
+      "removeMapping": "Remove mapping",
+      "removeColumn": "Remove column",
+      "addItem": "Add Item",
+      "removeItem": "Remove item",
+      "addBar": "Add Bar"
     },
     "field": {
       "name": "Name",
@@ -773,6 +824,378 @@
         "description": "Mantine JSX template. Access API response fields via data bindings (e.g. data.name). Use whitelisted components only. Forbidden: constructor, __proto__, eval, Function, window, document."
       }
     },
+    "editor": {
+      "errorBoundary": {
+        "title": "Something went wrong",
+        "retry": "Try again"
+      },
+      "language": {
+        "jsx": "JSX",
+        "json": "JSON"
+      },
+      "action": {
+        "components": "Components",
+        "format": "Format",
+        "insertStarter": "Insert starter",
+        "undo": "Undo",
+        "redo": "Redo",
+        "copy": "Copy",
+        "copied": "Copied",
+        "schema": "Schema"
+      },
+      "reference": {
+        "schema": "JSON Schema",
+        "minimal": "Minimal example",
+        "full": "Full example"
+      },
+      "componentReference": {
+        "search": "Search components",
+        "empty": "No matching components",
+        "count": "{count, number} components available"
+      },
+      "status": {
+        "errors": "{count, number} errors",
+        "warnings": "{count, number} warnings",
+        "ready": "No issues found",
+        "position": "Ln {line, number}, Col {column, number}",
+        "characters": "{count, number} characters",
+        "charactersWithLimit": "{count, number} / {limit, number}"
+      },
+      "diagnostics": {
+        "title": "Template diagnostics",
+        "line": "Line {line, number}",
+        "ast": "{value}",
+        "bindingTypeConflict": "The input \"{value}\" is shared by controls with incompatible value types.",
+        "dynamicRequestId": "A literal requestId is required. Dynamic request IDs are not accepted.",
+        "dynamicInputBinding": "A literal input name is required for bind.",
+        "inlineRequestProps": "Network components accept requestId and params; inline URL, method, header, and body props are blocked.",
+        "invalidRequestManifest": "Named requests must be a valid request map. {value}",
+        "missingRequestId": "This network component requires a literal requestId.",
+        "templateEmpty": "Enter a JSX template.",
+        "templateTooLong": "The template exceeds the 50,000 character limit.",
+        "unknownRequest": "No named request with ID \"{value}\" exists."
+      }
+    },
+    "workbench": {
+      "configure": "Configure",
+      "sectionNavigation": "Custom widget sections",
+      "widgetPreview": "Widget preview",
+      "generalInformation": "General information",
+      "invalidWidget": "Invalid widget",
+      "section": {
+        "general": "General",
+        "sources": "API sources",
+        "requests": "Requests",
+        "options": "Options",
+        "jsx": "JSX",
+        "preview": "Preview"
+      },
+      "status": {
+        "unsaved": "Unsaved changes",
+        "invalid": "Needs attention",
+        "ready": "Ready"
+      },
+      "saveError": {
+        "title": "Widget was not saved",
+        "description": "Fix these validation errors and save again.",
+        "more": "+{count} more errors are shown in the workbench.",
+        "errors": "Validation errors",
+        "copy": "Copy errors",
+        "copied": "Errors copied"
+      },
+      "action": {
+        "preview": "Test and preview",
+        "previewLoading": "Testing requests",
+        "create": "Create",
+        "save": "Save"
+      },
+      "requests": {
+        "title": "Named queries and actions",
+        "label": "Requests",
+        "description": "Queries load data; actions only run after user interaction. Any HTTP method is valid for either kind."
+      },
+      "options": {
+        "title": "Widget options",
+        "schema": "Options schema",
+        "defaults": "Default option values"
+      },
+      "builder": {
+        "advancedManifest": "Advanced raw manifest",
+        "manifestFilename": "widget.json",
+        "advancedJson": "Advanced manifest JSON",
+        "request": "Request {count, number}",
+        "requestId": "Request ID",
+        "type": "Type",
+        "method": "Method",
+        "source": "API source",
+        "run": "Run",
+        "runLoad": "When the widget loads",
+        "runManual": "From SubFetch",
+        "permission": "Permission",
+        "path": "Path",
+        "pathDescription": "Use '{option:name}' for widget options and '{param:name}' for invocation values.",
+        "requestDetails": "Query, body and behavior",
+        "queryValues": "Query values",
+        "queryKey": "Query key",
+        "queryKeyInvalid": "Use a unique ID that starts with a letter and contains only letters, numbers, - or _.",
+        "valueSource": "Value source",
+        "literal": "Literal",
+        "widgetOption": "Widget option",
+        "invocationParameter": "Invocation parameter",
+        "option": "Option",
+        "parameterName": "Parameter name",
+        "value": "Value",
+        "removeQueryValue": "Remove query value",
+        "addQueryValue": "Add query value",
+        "jsonBody": "JSON body",
+        "jsonBodyDescription": "Optional. Insert $option and $param references at any depth.",
+        "insertOptionReference": "Insert option reference",
+        "insertParameterReference": "Insert parameter reference",
+        "confirmation": "Confirmation message",
+        "invalidation": "Refresh after success",
+        "invalidationDescription": "Comma-separated query IDs",
+        "noAuth": "Send without source authentication",
+        "moveRequestUp": "Move request up",
+        "moveRequestDown": "Move request down",
+        "removeRequest": "Remove request",
+        "addRequest": "Add request",
+        "optionName": "Option name",
+        "label": "Label",
+        "control": "Control",
+        "description": "Description",
+        "default": "Default",
+        "optionDetails": "Constraints and dynamic choices",
+        "minimum": "Minimum",
+        "maximum": "Maximum",
+        "step": "Step",
+        "choiceLabel": "Choice label",
+        "choiceValue": "Choice value",
+        "newChoice": "New choice",
+        "addChoice": "Add choice",
+        "removeChoice": "Remove choice",
+        "choicesRequest": "Load choices from request",
+        "itemsPath": "Items path",
+        "itemsPathPlaceholder": "items (optional)",
+        "valuePath": "Value path",
+        "labelPath": "Label path",
+        "group": "Group",
+        "advancedOption": "Advanced option",
+        "moveOptionUp": "Move option up",
+        "moveOptionDown": "Move option down",
+        "removeOption": "Remove option",
+        "addOption": "Add option",
+        "invalidJson": "Invalid JSON",
+        "invalidWidget": "Invalid widget"
+      },
+      "jsx": {
+        "title": "JSX template",
+        "label": "Template"
+      },
+      "sources": {
+        "title": "API sources and credentials",
+        "newName": "API {count, number}",
+        "duplicateSourceId": "API source IDs must be unique.",
+        "credentialRemoved": "Credential removed",
+        "credentialRemovedDescription": "The stored value was deleted.",
+        "primary": "Primary API",
+        "id": "Source ID",
+        "name": "Name",
+        "baseUrl": "Base URL",
+        "baseUrlError": {
+          "invalid": "Enter a complete URL.",
+          "protocol": "Use an HTTP or HTTPS URL.",
+          "credentials": "Remove the username and password from this URL. Configure credentials below instead.",
+          "queryOrFragment": "Remove the query string or fragment from this base URL. Add query values to a named request."
+        },
+        "networkScope": "Network access",
+        "authentication": "Authentication",
+        "headerName": "Header name",
+        "queryParameter": "Query parameter",
+        "configured": "Configured — enter a replacement",
+        "clear": "Clear",
+        "remove": "Remove source and its requests",
+        "advanced": "Advanced",
+        "add": "Add another API source",
+        "secret": {
+          "apiKey": "API key or token",
+          "username": "Username",
+          "password": "Password"
+        }
+      },
+      "ai": {
+        "title": "Create or fix with any AI",
+        "description": "Copy one prompt, then paste the AI's single JSON block. Homarr loads its JSX into the editor automatically.",
+        "request": "What should this widget do?",
+        "documentationUrl": "API documentation URL (optional)",
+        "paste": "Paste AI response",
+        "response": "AI response",
+        "loaded": "Widget loaded into the editor",
+        "invalidResponse": "Clipboard does not contain a valid v2 widget",
+        "invalidResponseDetail": "The AI response is invalid: {message}"
+      },
+      "preview": {
+        "invalid": "Fix validation errors to preview this widget.",
+        "fixtureError": "Preview fixture error",
+        "requestData": "Request data",
+        "status": {
+          "idle": "Requests have not been tested",
+          "loading": "Testing requests",
+          "success": "All load requests succeeded",
+          "error": "One or more load requests failed"
+        },
+        "result": {
+          "loading": {
+            "title": "Testing API requests",
+            "description": "Homarr is creating a preview session and loading the widget data."
+          },
+          "success": {
+            "title": "Preview ready",
+            "description": "{succeeded, plural, =0 {This widget has no load requests.} one {# load request succeeded.} other {# load requests succeeded.}} Open Data to inspect the response."
+          },
+          "error": {
+            "title": "Preview completed with request errors",
+            "description": "{succeeded, number} succeeded and {failed, number} failed. Open Data for the response and error details."
+          }
+        },
+        "instanceOptions": "Instance options",
+        "liveActions": "Run actions against the configured API",
+        "liveActionsDescription": "Off is safe simulation. Turning this on affects the real service.",
+        "noActions": "No actions are defined.",
+        "sessionActive": "Preview session active",
+        "simulationPending": "Actions are simulated until you run preview",
+        "containedFailures": "Runtime failures are contained inside this widget. Request journals never include secret values.",
+        "validation": {
+          "title": "Validation",
+          "ready": "The widget definition is valid."
+        },
+        "accessibility": {
+          "title": "Accessibility checks",
+          "ready": "No common accessibility omissions detected.",
+          "pending": "Accessibility checks will run when the widget definition is valid.",
+          "imageAlt": "Add alt text to every Image, using an empty alt only for decorative images.",
+          "actionIconLabel": "Add an aria-label or title to every ActionIcon.",
+          "inputLabel": "Add a visible label or accessible name to every input."
+        },
+        "journal": "Redacted request journal",
+        "actionParameters": "Action parameters (JSON)",
+        "invalidParameters": "Use the declared string, number, and boolean parameter types.",
+        "runDestructive": "Run destructive action",
+        "runAction": "Run action",
+        "deleteConfirmation": "This preview action sends a DELETE request to the configured API.",
+        "simulated": "Action simulated",
+        "httpStatus": "HTTP {status, number}",
+        "tab": {
+          "widget": "Widget",
+          "data": "Data",
+          "options": "Options",
+          "state": "State",
+          "actions": "Actions",
+          "diagnostics": "Diagnostics"
+        },
+        "size": {
+          "compact": "Compact",
+          "standard": "Standard",
+          "wide": "Wide"
+        },
+        "theme": {
+          "light": "Light",
+          "dark": "Dark"
+        },
+        "fixture": {
+          "live": "Live",
+          "loading": "Loading",
+          "empty": "Empty",
+          "error": "Error"
+        }
+      }
+    },
+    "preview": {
+      "request": {
+        "permission": {
+          "view": "View",
+          "modify": "Modify",
+          "full": "Full"
+        }
+      },
+      "title": "Preview",
+      "test": "Test",
+      "hint": "Click Test to preview the API response with your current configuration.",
+      "rawResponse": "Raw JSON response"
+    },
+    "notification": {
+      "created": "Widget \"{name}\" created successfully.",
+      "updated": "Widget \"{name}\" updated successfully.",
+      "deleted": "Widget \"{name}\" deleted.",
+      "imported": "Widget imported successfully.",
+      "migrated": "Legacy widget migrated successfully. Existing board placements now use the v2 definition.",
+      "migrationError": "Failed to migrate the legacy widget. Ensure the file uses the homarr-custom-widget-v2 schema.",
+      "migrationPromptCopied": "A redacted migration prompt was copied. Paste it into an LLM, copy its single JSON response, then choose Paste migrated widget here.",
+      "migrationPromptCopyError": "Failed to copy the migration prompt.",
+      "aiPromptCopied": "AI prompt copied to clipboard",
+      "aiPromptCopiedWithCount": "AI prompt copied to clipboard ({count, number} characters).",
+      "aiPromptCopyError": "Failed to copy prompt to clipboard. Your browser may not support this feature.",
+      "aiPromptSent": "Prompt sent. You can keep editing while the assistant works in the background.",
+      "updateError": "Failed to update widget. Your changes were not saved.",
+      "importError": "Failed to import widget. Ensure the file is a valid custom widget JSON export.",
+      "exportError": "Failed to export widget.",
+      "duplicated": "Widget \"{name}\" duplicated.",
+      "duplicateError": "Failed to duplicate widget.",
+      "toggleError": "Failed to toggle widget status.",
+      "deleteError": "Failed to delete widget.",
+      "previewError": "Failed to fetch preview. Check the URL and try again.",
+      "aiPromptDescription": "Copy a pre-built prompt to paste into any AI chatbot (ChatGPT, Claude, Gemini...). It includes the full widget schema and your API response so the AI can generate a ready-to-import JSON config for you.",
+      "aiPromptCopy": "Copy to clipboard",
+      "aiPromptNoResponse": "Tip: Run a test first to include your API response in the prompt for better results.",
+      "createError": "Failed to create widget. Check your API endpoint is reachable.",
+      "executed": "Action executed successfully.",
+      "executeError": "Action failed: {error}",
+      "aiPromptRequestLabel": "What should the widget do?",
+      "aiPromptRequestPlaceholder": "For example, show service health as a compact status grid and highlight offline services.",
+      "aiPromptAssistant": "Ask Homarr Assistant",
+      "aiPromptAssistantBusy": "Assistant is working",
+      "aiPromptAssistantUnavailable": "Homarr Assistant is unavailable. You can still copy the prepared prompt."
+    },
+    "importReview": {
+      "title": "Review custom widget import",
+      "description": "Check where this widget connects and what board access its controls require before importing it.",
+      "migrationTitle": "Review migrated v2 replacement",
+      "migrationDescription": "Review and confirm this generated v2 definition. Confirming atomically replaces the preserved v1 record while keeping existing board placements linked to the same widget ID.",
+      "fileLabel": "Choose a custom widget JSON file",
+      "name": "Name",
+      "origin": "Base origin",
+      "authentication": "Authentication",
+      "networkScope": "Network scope",
+      "methods": "HTTP methods",
+      "permissions": "Required board permissions",
+      "credentials": {
+        "title": "Configure credentials now",
+        "description": "Secrets are encrypted locally and never added to the imported widget. You can leave a field blank and configure it later.",
+        "header": "Sent through the {name} header",
+        "query": "Sent through the {name} query parameter",
+        "field": {
+          "apiKey": "API key or token",
+          "username": "Username",
+          "password": "Password"
+        }
+      },
+      "sourceSetup": {
+        "title": "Configure API sources",
+        "description": "Confirm where this widget connects and add credentials. Private and loopback URLs are specific to your Homarr installation.",
+        "suggestedUrl": "Suggested URL",
+        "confirmUrl": "I confirm that this server URL is correct for my Homarr installation",
+        "ready": "URL ready",
+        "needsUrl": "Confirm URL",
+        "credentialsMissing": "Credentials missing",
+        "credentialsOptional": "You can install without credentials and configure them later, but requests will fail until they are added."
+      },
+      "actionWarning": {
+        "title": "This widget can change remote data",
+        "description": "Review every named action, inherited credential, and destructive confirmation after import. Secrets are not included in the file."
+      },
+      "cancel": "Cancel import",
+      "confirm": "Import widget",
+      "confirmMigration": "Confirm v2 replacement"
+    },
     "placeholder": {
       "exampleLabel": "CPU Temperature",
       "exampleLabelShort": "CPU Temp",
@@ -857,40 +1280,6 @@
       "password": "Password",
       "savedPlaceholder": "••••••• (saved, leave empty to keep)"
     },
-    "preview": {
-      "title": "Preview",
-      "test": "Test",
-      "hint": "Click Test to preview the API response with your current configuration.",
-      "rawResponse": "Raw JSON response"
-    },
-    "notification": {
-      "created": "Widget \"{name}\" created successfully.",
-      "updated": "Widget \"{name}\" updated successfully.",
-      "deleted": "Widget \"{name}\" deleted.",
-      "imported": "Widget imported successfully.",
-      "aiPromptCopied": "AI prompt copied to clipboard",
-      "aiPromptDescription": "Describe the widget you want. Homarr Assistant can create or update it after your approval, or you can copy the same prompt into another AI service.",
-      "aiPromptRequestLabel": "What should the widget do?",
-      "aiPromptRequestPlaceholder": "For example, show service health as a compact status grid and highlight offline services.",
-      "aiPromptAssistant": "Ask Homarr Assistant",
-      "aiPromptAssistantBusy": "Assistant is working",
-      "aiPromptAssistantUnavailable": "Homarr Assistant is unavailable. You can still copy the prepared prompt.",
-      "aiPromptSent": "Prompt sent. You can keep editing while the assistant works in the background.",
-      "aiPromptCopy": "Copy to clipboard",
-      "aiPromptNoResponse": "Tip: Run a test first to include your API response in the prompt for better results.",
-      "aiPromptCopyError": "Failed to copy prompt to clipboard. Your browser may not support this feature.",
-      "createError": "Failed to create widget. Check your API endpoint is reachable.",
-      "updateError": "Failed to update widget. Your changes were not saved.",
-      "importError": "Failed to import widget. Ensure the file is a valid custom widget JSON export.",
-      "exportError": "Failed to export widget.",
-      "duplicated": "Widget \"{name}\" duplicated.",
-      "duplicateError": "Failed to duplicate widget.",
-      "toggleError": "Failed to toggle widget status.",
-      "deleteError": "Failed to delete widget.",
-      "previewError": "Failed to fetch preview. Check the URL and try again.",
-      "executed": "Action executed successfully.",
-      "executeError": "Action failed: {error}"
-    },
     "table": {
       "name": "Name",
       "url": "URL",
@@ -900,6 +1289,69 @@
       "disabled": "This widget is disabled"
     }
   },
+  "workshop": {
+    "installSuccess": "Custom widget installed",
+    "installSuccessDescription": "Add its credentials, test the requests, and save when it is ready.",
+    "installError": "Could not install widget",
+    "installErrorDescription": "The Workshop submission is not a valid Custom JSX v2 widget.",
+    "title": "Workshop",
+    "openCommunity": "Open public Workshop",
+    "description": "Community Custom JSX v2 widgets. Inspect the source and network capabilities before installing.",
+    "descriptionCss": "Community Custom CSS themes. Preview every rule before importing it into a board.",
+    "securityNotice": "Workshop widgets can call their declared API sources and perform declared actions with credentials you configure locally. Secrets are never included.",
+    "securityNoticeCss": "Community CSS can change the appearance and usability of a board. Review it before importing; nothing is saved until you save board settings.",
+    "signIn": "Sign in with GitHub",
+    "signInError": "GitHub sign-in failed. Check that the Workshop OAuth provider is configured and that popups are allowed.",
+    "signOut": "Sign out",
+    "search": "Search widgets",
+    "searchCss": "Search CSS themes",
+    "sort": "Sort",
+    "sortTop": "Top rated",
+    "sortNewest": "Newest",
+    "unavailableTitle": "Homarr Workshop seems to be unavailable",
+    "unavailable": "The community service may be temporarily down. Try again in a moment. Your installed widgets are unaffected.",
+    "retry": "Try again",
+    "empty": "No widgets match this search.",
+    "emptyCss": "No CSS themes match this search.",
+    "noDescription": "No description",
+    "author": "by {name}",
+    "inspect": "Inspect widget",
+    "inspectCss": "Inspect CSS",
+    "details": "Widget details",
+    "loadError": "This submission could not be loaded.",
+    "sources": "Declared API sources",
+    "requests": "Declared queries and actions",
+    "noRequests": "This widget does not declare network requests.",
+    "export": "Export",
+    "report": "Report",
+    "install": "Install widget",
+    "useCss": "Import CSS",
+    "signInHint": "Sign in to vote or report. Installing does not require a Workshop account.",
+    "reportTitle": "Report submission",
+    "reportReason": "Reason",
+    "reportExplanation": "What should the Workshop moderators know?",
+    "reportSend": "Send report",
+    "reportSent": "Report sent",
+    "reportSentDescription": "Workshop moderators can now review this submission.",
+    "voteError": "The vote could not be saved.",
+    "publish": {
+      "title": "Publish to Workshop",
+      "success": "Published immediately. Community members can now install and report this widget.",
+      "signInHint": "Sign in to publish under your Workshop identity.",
+      "titleField": "Title",
+      "descriptionField": "Description",
+      "screenshots": "Screenshots",
+      "screenshotsDescription": "Up to five PNG, JPEG, or WebP images",
+      "privateSourceWarning": "This widget contains private source URLs for: {sources}. Replace personal hosts or IP addresses with safe service placeholders before publishing.",
+      "privateSourceConfirmation": "I reviewed these source URLs and they do not expose private infrastructure details",
+      "action": "Publish now",
+      "definitionChanged": "The widget changed while publication was being prepared. Review its private source URLs again, then retry.",
+      "error": "Publication failed"
+    },
+    "installDialog": "Install from Workshop",
+    "installed": "Widget installed",
+    "installedDescription": "{name} is ready to configure."
+  },
   "integration": {
     "page": {
       "list": {
@@ -1034,7 +1486,8 @@
       "analytics": "Analytics",
       "vpn": "VPN",
       "mediaLibrary": "Media Library",
-      "uptimeMonitoring": "Uptime Monitoring"
+      "uptimeMonitoring": "Uptime Monitoring",
+      "beszel": "Beszel"
     },
     "testConnection": {
       "action": {
@@ -1499,18 +1952,70 @@
         "switchToDarkMode": "Switch to dark mode",
         "switchToLightMode": "Switch to light mode",
         "management": "Management",
-        "assistant": "Homarr Assistant",
-        "assistantThinking": "Thinking",
-        "modifier": "Mod",
         "docker": "Docker",
         "preferences": "Your preferences",
         "logout": "Logout",
         "login": "Login",
         "homeBoard": "Your home board",
         "loggedOut": "Logged out",
-        "updateAvailable": "{countUpdates} updates available: {tag}"
+        "updateAvailable": "{countUpdates} updates available: {tag}",
+        "assistant": "Homarr Assistant",
+        "assistantThinking": "Thinking",
+        "modifier": "Mod"
       }
     },
+    "dangerZone": "Danger zone",
+    "noResults": "No results found",
+    "unsavedChanges": "You have unsaved changes!",
+    "servers": "Servers",
+    "applications": "Apps",
+    "services": "Services",
+    "preview": {
+      "show": "Show preview",
+      "hide": "Hide preview"
+    },
+    "zod": {
+      "errors": {
+        "default": "This field is invalid",
+        "required": "This field is required",
+        "string": {
+          "startsWith": "This field must start with {startsWith}",
+          "endsWith": "This field must end with {endsWith}",
+          "includes": "This field must include {includes}",
+          "invalidEmail": "This field must be a valid email"
+        },
+        "tooSmall": {
+          "string": "This field must be at least {minimum} characters long",
+          "number": "This field must be greater than or equal to {minimum}"
+        },
+        "tooBig": {
+          "string": "This field must be at most {maximum} characters long",
+          "number": "This field must be less than or equal to {maximum}"
+        },
+        "custom": {
+          "passwordsDoNotMatch": "Passwords do not match",
+          "passwordRequirements": "Password does not meet the requirements",
+          "boardAlreadyExists": "A board with this name already exists",
+          "invalidFileType": "Invalid file type, expected {expected}",
+          "invalidFileName": "Invalid file name",
+          "fileTooLarge": "File is too large, maximum size is {maxSize}",
+          "invalidConfiguration": "Invalid configuration",
+          "groupNameTaken": "Group name already taken"
+        }
+      }
+    },
+    "unit": {
+      "speed": {
+        "kilometersPerHour": "km/h",
+        "milesPerHour": "mph"
+      }
+    },
+    "widgetQuery": {
+      "loading": "Loading widget data",
+      "stale": "Could not refresh {widget}; showing saved data"
+    },
+    "total": "Total",
+    "filesystemUsage": "{count, plural, one {Show usage for # filesystem} other {Show usage for # filesystems}}",
     "assistant": {
       "title": "Homarr Assistant",
       "open": "Open Homarr Assistant",
@@ -1799,55 +2304,55 @@
         "enabled": "Automatic approvals are on",
         "approving": "Approving automatically"
       }
-    },
-    "dangerZone": "Danger zone",
-    "noResults": "No results found",
-    "unsavedChanges": "You have unsaved changes!",
-    "servers": "Servers",
-    "applications": "Apps",
-    "services": "Services",
-    "preview": {
-      "show": "Show preview",
-      "hide": "Hide preview"
-    },
-    "zod": {
-      "errors": {
-        "default": "This field is invalid",
-        "required": "This field is required",
-        "string": {
-          "startsWith": "This field must start with {startsWith}",
-          "endsWith": "This field must end with {endsWith}",
-          "includes": "This field must include {includes}",
-          "invalidEmail": "This field must be a valid email"
-        },
-        "tooSmall": {
-          "string": "This field must be at least {minimum} characters long",
-          "number": "This field must be greater than or equal to {minimum}"
-        },
-        "tooBig": {
-          "string": "This field must be at most {maximum} characters long",
-          "number": "This field must be less than or equal to {maximum}"
-        },
-        "custom": {
-          "passwordsDoNotMatch": "Passwords do not match",
-          "passwordRequirements": "Password does not meet the requirements",
-          "boardAlreadyExists": "A board with this name already exists",
-          "invalidFileType": "Invalid file type, expected {expected}",
-          "invalidFileName": "Invalid file name",
-          "fileTooLarge": "File is too large, maximum size is {maxSize}",
-          "invalidConfiguration": "Invalid configuration",
-          "groupNameTaken": "Group name already taken"
-        }
-      }
-    },
-    "unit": {
-      "speed": {
-        "kilometersPerHour": "km/h",
-        "milesPerHour": "mph"
-      }
     }
   },
   "section": {
+    "option": {
+      "showLabel": {
+        "label": "Show label",
+        "description": "Display the container label above its contents."
+      },
+      "collapsible": {
+        "label": "Allow collapse",
+        "description": "Let viewers expand and collapse this container."
+      },
+      "showOpenAll": {
+        "label": "Show open-all action",
+        "description": "Show an action that opens every app in this container in new tabs."
+      }
+    },
+    "action": {
+      "openAllInNewTabs": "Open all in tabs",
+      "openAllInNewTabsFor": "Open all apps in {name} in tabs"
+    },
+    "openAllInNewTabs": {
+      "title": "Open all in tabs",
+      "text": "Some browsers may block the bulk-opening of tabs for security reasons. Homarr was unable to open all windows, because your browser blocked this action. Please allow \"Open pop-up windows\" and re-try."
+    },
+    "container": {
+      "untitled": "Untitled container",
+      "action": {
+        "create": "New container",
+        "remove": "Remove container",
+        "expand": "Expand",
+        "collapse": "Collapse"
+      },
+      "option": {
+        "title": {
+          "label": "Title"
+        },
+        "customCssClasses": {
+          "label": "Custom css classes"
+        },
+        "borderColor": {
+          "label": "Border color"
+        }
+      },
+      "remove": {
+        "title": "Remove container",
+        "message": "Remove this container? Its contents will move into the surrounding area."
+      }
+    },
     "dynamic": {
       "action": {
         "create": "New dynamic section",
@@ -1922,6 +2427,7 @@
     "menu": {
       "label": {
         "settings": "Settings",
+        "settingsFor": "Settings for {name}",
         "refresh": "Refresh",
         "options": "Options",
         "actions": "Actions"
@@ -1931,16 +2437,43 @@
         "error": "Error",
         "loading": "Loading",
         "idle": "Idle"
+      },
+      "notification": {
+        "saveError": {
+          "title": "Unable to save widget",
+          "message": "The widget changes were rolled back"
+        }
       }
     },
     "create": {
       "title": "Choose item to add",
       "search": "Filter items",
-      "addToBoard": "Add to board"
+      "addToBoard": "Add to board",
+      "addAtPosition": "Add item here",
+      "notification": {
+        "error": {
+          "title": "Unable to add item",
+          "message": "The item could not be added to this board"
+        }
+      }
     },
     "moveResize": {
       "title": "Move / resize item",
+      "entryLabel": "{name}, column {column}, row {row}",
+      "target": {
+        "numbered": "{name}, destination {index}",
+        "located": "{name}, {location}, destination {index}"
+      },
+      "keyboard": {
+        "instructions": "Press Enter or Space to start keyboard editing. Use arrow keys to move, Shift plus arrow keys to resize, and Escape to stop.",
+        "started": "Keyboard editing started. Use arrow keys to move, Shift plus arrow keys to resize, and Escape to stop.",
+        "stopped": "Keyboard editing stopped.",
+        "boundary": "That change does not fit inside this section."
+      },
       "field": {
+        "section": {
+          "label": "Section or rail"
+        },
         "width": {
           "label": "Width"
         },
@@ -1986,13 +2519,14 @@
     "remove": {
       "title": "Remove item",
       "message": "Are you sure you want to remove this item?"
+    },
+    "advancedFocus": {
+      "open": "Open advanced view",
+      "close": "Close advanced view",
+      "label": "{widget} advanced view"
     }
   },
   "widget": {
-    "dynamicSelect": {
-      "noResults": "No results found",
-      "loadError": "Failed to load options"
-    },
     "integrationSelect": {
       "configureIntegrationFirst": "Connect an integration first",
       "loading": "Loading...",
@@ -2094,6 +2628,26 @@
         "showBroadcastMessage": {
           "label": "Show broadcast messages"
         }
+      },
+      "noProjectSelected": "No project selected",
+      "runnerStatus": "Runner: {status}",
+      "updatedAt": "Updated {date}",
+      "metric": {
+        "running": "Running",
+        "completed": "Done",
+        "failed": "Failed",
+        "canceled": "Canceled",
+        "download": "Download",
+        "upload": "Upload"
+      },
+      "status": {
+        "running": "Running",
+        "completed": "Completed",
+        "failed": "Failed",
+        "canceled": "Canceled",
+        "stopped": "Stopped",
+        "idle": "Idle",
+        "unknown": "Unknown"
       }
     },
     "dnsHoleSummary": {
@@ -2128,7 +2682,12 @@
         "dnsQueriesToday": "Queries today",
         "domainsBeingBlocked": "Domains on blocklist"
       },
-      "domainsTooltip": "Due to multiple integrations Homarr can't calculate the exact number of domains being blocked"
+      "domainsTooltip": "Due to multiple integrations Homarr can't calculate the exact number of domains being blocked",
+      "status": {
+        "enabled": "Enabled",
+        "disabled": "Disabled",
+        "unknown": "Unknown"
+      }
     },
     "dnsHoleControls": {
       "name": "DNS Hole Controls",
@@ -2153,7 +2712,8 @@
         }
       },
       "error": {
-        "internalServerError": "Failed to control DNS Hole"
+        "internalServerError": "Failed to control DNS Hole",
+        "bulkActionsFailed": "{count, plural, one {# action failed} other {# actions failed}}"
       },
       "controls": {
         "enableAll": "Enable All",
@@ -2247,12 +2807,21 @@
       "noStation": "No station selected",
       "option": {
         "baseUrl": {
-          "label": "Search.ch URL"
+          "label": "Search.ch URL",
+          "description": "Custom URLs must resolve to a public IP address. Private and local hosts are rejected."
         },
         "station": {
           "label": "Station",
           "placeholder": "Search for a station"
         }
+      },
+      "error": {
+        "customSourceUnavailable": "The timetable source is unavailable. Check that its URL resolves to a public IP address.",
+        "stationSearch": "Unable to search stations. Check the custom URL and your board access."
+      },
+      "warning": {
+        "stale": "The timetable could not be refreshed. Showing departures last updated at {time}.",
+        "staleCompact": "Stale data"
       }
     },
     "notebook": {
@@ -2325,7 +2894,9 @@
           "discard": "Discard changes",
           "keepEditing": "Keep editing"
         }
-      }
+      },
+      "saveFailed": "Unable to save note",
+      "documentStats": "{words, plural, one {# word} other {# words}} · {characters, plural, one {# character} other {# characters}}"
     },
     "anchorNote": {
       "name": "Anchor Note",
@@ -2353,7 +2924,17 @@
       "cancel": "Cancel",
       "readOnlyViewer": "You have viewer access to this note. Editing is disabled.",
       "saveForbidden": "You do not have permission to edit this note.",
-      "saveFailed": "Failed to save this note. Please try again."
+      "saveFailed": "Failed to save this note. Please try again.",
+      "createdAt": "Created {date}",
+      "permission": {
+        "owner": "Owner",
+        "editor": "Editor",
+        "viewer": "Viewer"
+      },
+      "status": {
+        "pinned": "Pinned",
+        "archived": "Archived"
+      }
     },
     "iframe": {
       "name": "iFrame",
@@ -2412,6 +2993,25 @@
         "clickable": {
           "label": "Clickable"
         }
+      },
+      "state": {
+        "on": "On",
+        "off": "Off",
+        "unavailable": "Unavailable",
+        "unknown": "Unknown"
+      },
+      "advanced": {
+        "entityId": "Entity ID: {id}",
+        "lastUpdated": "Updated {date}",
+        "attribute": {
+          "unit": "Unit",
+          "deviceClass": "Device class",
+          "icon": "Icon"
+        }
+      },
+      "error": {
+        "loadFailed": "Unable to load entity",
+        "toggleFailed": "Unable to update entity"
       }
     },
     "smartHome-executeAutomation": {
@@ -2427,6 +3027,17 @@
       },
       "spotlightAction": {
         "run": "Run {name}"
+      },
+      "advanced": {
+        "lastExecuted": "Last run at {time}",
+        "automationId": "Automation ID: {id}"
+      },
+      "status": {
+        "running": "Running automation",
+        "success": "Automation completed"
+      },
+      "error": {
+        "executeFailed": "Unable to run automation"
       }
     },
     "stockPrice": {
@@ -2529,6 +3140,13 @@
         "showUnmonitored": {
           "label": "Show unmonitored"
         }
+      },
+      "advanced": {
+        "previousMonth": "Show previous month",
+        "nextMonth": "Show next month",
+        "eventCount": "{count, plural, one {# event} other {# events}}",
+        "loading": "Loading calendar events...",
+        "noEvents": "No events in this month"
       }
     },
     "weather": {
@@ -2589,6 +3207,18 @@
         "thunderstorm": "Thunderstorm",
         "thunderstormWithHail": "Thunderstorm with hail",
         "unknown": "Unknown"
+      },
+      "details": "Show weather details",
+      "detailsFor": "Show weather details for {date}",
+      "advanced": {
+        "forecast": "7-day forecast",
+        "day": "Day",
+        "conditions": "Conditions",
+        "temperature": "High / low",
+        "humidity": "Humidity",
+        "wind": "Wind / gusts ({unit})",
+        "sun": "Sunrise / sunset",
+        "noForecast": "No forecast data available"
       }
     },
     "indexerManager": {
@@ -2776,17 +3406,40 @@
         "internalServerError": "Failed to fetch Coolify data"
       },
       "server": {
-        "buildServer": "Build"
+        "buildServer": "Build",
+        "resourceCounts": "{applications, plural, one {# app} other {# apps}} / {services, plural, one {# service} other {# services}}"
       },
       "instances": {
         "title": "Instances"
+      },
+      "action": {
+        "openResource": "Open {name}",
+        "openLogs": "Open {name} logs",
+        "showIp": "Show IP address",
+        "hideIp": "Hide IP address"
+      },
+      "status": {
+        "running": "Running",
+        "stopped": "Stopped",
+        "exited": "Exited",
+        "starting": "Starting",
+        "restarting": "Restarting",
+        "unknown": "Unknown",
+        "online": "Online",
+        "offline": "Offline"
       }
     },
     "vpn": {
       "name": "VPN",
       "description": "Overview of your VPN connections",
       "serviceUnavailable": "VPN unavailable",
-      "option": {}
+      "option": {},
+      "status": {
+        "running": "Running",
+        "notRunning": "Not running",
+        "unavailable": "Unavailable",
+        "vpn": "VPN: {status}"
+      }
     },
     "ups": {
       "name": "UPS",
@@ -2813,7 +3466,13 @@
         "runtime": "Runtime",
         "load": "Load",
         "input": "Input",
-        "output": "Output"
+        "output": "Output",
+        "batteryVoltage": "Battery voltage",
+        "power": "Power",
+        "temperature": "Temperature",
+        "manufacturer": "Manufacturer",
+        "model": "Model",
+        "serial": "Serial"
       },
       "error": {
         "internalServerError": "Failed to fetch UPS data"
@@ -3084,7 +3743,13 @@
             "resolution": "Resolution",
             "target": "Target codec"
           }
-        }
+        },
+        "unknownUser": "Unknown user"
+      },
+      "summary": {
+        "sessions": "{count, plural, one {# session} other {# sessions}}",
+        "playing": "{count} playing",
+        "transcoding": "{count} transcoding"
       }
     },
     "paperlessNgx": {
@@ -3343,7 +4008,8 @@
       "users": "Users",
       "photos": "Photos",
       "videos": "Videos",
-      "storage": "Used Storage"
+      "storage": "Used Storage",
+      "albumLimit": "Largest albums (up to {count} shown)"
     },
     "immich-albumCarousel": {
       "name": "Immich Album",
@@ -3367,7 +4033,16 @@
         }
       },
       "description": "Slideshow of pictures from an Immich album or your full library",
-      "noPhotos": "No photos found"
+      "noPhotos": "No photos found",
+      "albumPhoto": "Album photo",
+      "actions": {
+        "previousPhoto": "Previous photo",
+        "nextPhoto": "Next photo",
+        "pauseSlideshow": "Pause slideshow",
+        "resumeSlideshow": "Resume slideshow",
+        "toggleSlideshow": "Pause or resume slideshow",
+        "photo": "Photo {number}"
+      }
     },
     "downloads": {
       "name": "Download Client",
@@ -3742,6 +4417,13 @@
         "showPosterImage": {
           "label": "Show poster image"
         }
+      },
+      "error": {
+        "allFeedsFailed": "Unable to load RSS feeds. Check the feed URLs and try again."
+      },
+      "warning": {
+        "partial": "{count, plural, one {# RSS feed could not be loaded} other {# RSS feeds could not be loaded}}",
+        "stale": "RSS feeds could not be refreshed. Showing previously loaded entries."
       }
     },
     "releases": {
@@ -3872,14 +4554,21 @@
           "noProviderResponse": "No response from provider",
           "unexpected": "Unexpected provider error"
         }
-      }
+      },
+      "expandDetails": "Show details for {name}",
+      "collapseDetails": "Hide details for {name}"
     },
     "networkControllerSummary": {
       "option": {},
       "card": {
         "vpn": {
-          "countConnected": "{count} connected"
-        }
+          "countConnected": "{count, plural, one {# connected} other {# connected}}",
+          "label": "VPN"
+        },
+        "wan": "WAN",
+        "web": "Web",
+        "wifi": "Wi-Fi",
+        "lan": "LAN"
       },
       "error": {
         "integrationsDisconnected": "No data available, all integrations disconnected",
@@ -3957,6 +4646,16 @@
           "recv": "Received",
           "title": "Network Interfaces"
         }
+      },
+      "empty": {
+        "noInterfaces": "No network interface data yet"
+      },
+      "versionUnknown": "Unknown version",
+      "metricAccessible": "{metric}: {value}%, {status}",
+      "status": {
+        "normal": "Normal",
+        "warning": "Warning",
+        "critical": "Critical"
       }
     },
     "notifications": {
@@ -4006,6 +4705,11 @@
       "noSectionsEnabled": "Enable at least one section in widget options.",
       "error": {
         "internalServerError": "Failed to fetch speedtest data"
+      },
+      "range": {
+        "twelveHours": "12h",
+        "oneDay": "24h",
+        "all": "All"
       }
     },
     "uptimeKuma": {
@@ -4046,6 +4750,11 @@
       },
       "error": {
         "internalServerError": "Failed to fetch uptime data"
+      },
+      "status": {
+        "up": "Up",
+        "down": "Down",
+        "paused": "Paused"
       }
     },
     "traefik": {
@@ -4080,7 +4789,20 @@
       },
       "error": {
         "internalServerError": "Failed to fetch Traefik data"
-      }
+      },
+      "resourceType": {
+        "router": "Router",
+        "service": "Service",
+        "middleware": "Middleware"
+      },
+      "resourceStatus": {
+        "enabled": "Enabled",
+        "disabled": "Disabled",
+        "warning": "Warning",
+        "error": "Error",
+        "unknown": "Unknown"
+      },
+      "failedEndpoint": "Failed: {endpoint}"
     },
     "audioStats": {
       "name": "Audio stats",
@@ -4205,49 +4927,32 @@
         "unhealthy": "Unhealthy"
       }
     },
-    "assistant": {
-      "name": "Assistant",
-      "description": "Have a complete assistant conversation directly on your board.",
-      "option": {
-        "conversationMode": {
-          "label": "Conversation",
-          "description": "Follow the conversation used elsewhere in Homarr, or keep this widget attached to a specific conversation.",
-          "option": {
-            "current": "Current conversation",
-            "pinned": "Pinned conversation"
-          }
-        },
-        "conversation": {
-          "label": "Pinned conversation",
-          "description": "Choose the saved conversation this widget should keep available.",
-          "placeholder": "Select a saved conversation"
-        }
-      },
-      "pinned": {
-        "title": "Pinned conversation",
-        "description": "This widget is attached to {conversation}. Open it to continue here without silently changing your active conversation.",
-        "selectTitle": "Choose a conversation",
-        "selectDescription": "Open the widget settings and select the conversation this widget should keep available.",
-        "open": "Open conversation",
-        "opening": "Opening conversation...",
-        "error": "This conversation could not be opened. It may have been deleted."
-      },
-      "unavailable": {
-        "title": "Assistant unavailable",
-        "description": "Sign in and ask an administrator to configure the Assistant from the management panel."
-      },
-      "compact": {
-        "title": "Assistant",
-        "description": "Resize this widget to chat here, or open the full conversation.",
-        "open": "Open assistant"
-      }
-    },
     "customApi": {
-      "name": "Custom API",
-      "description": "Display data from any external API with custom configuration.",
+      "name": "Custom widget",
+      "description": "Render a configured Custom JSX definition.",
+      "customJsx": {
+        "noTemplate": "No JSX template is configured.",
+        "templateWarnings": "{count} template warnings:",
+        "requestIdRequired": "This network control requires a named requestId.",
+        "unsavedPreview": "Run a GET test in the editor before testing named requests.",
+        "invalidParams": "The request parameters are invalid.",
+        "loading": "Loading request...",
+        "loadRequest": "Load request",
+        "requestFailed": "The request failed.",
+        "retry": "Retry request",
+        "actionCompleted": "Action completed successfully.",
+        "actionSimulated": "Action simulated; no request was sent.",
+        "actionsDisabledEditMode": "Actions are disabled while the board is in edit mode.",
+        "widgetItemUnavailable": "This widget item is not available.",
+        "toggle": "Toggle",
+        "refresh": "Refresh",
+        "copy": "Copy",
+        "copied": "Copied",
+        "confirmDelete": "Confirm this destructive action."
+      },
       "option": {
         "definitionId": {
-          "label": "Definition ID"
+          "label": "Custom widget"
         },
         "refreshInterval": {
           "label": "Refresh interval",
@@ -4255,12 +4960,29 @@
         }
       },
       "noDefinition": "No definition selected",
-      "definitionNotFound": "Widget definition not found. It may have been deleted.",
-      "noDisplayOutput": "No display output",
-      "executeConfirm": "Are you sure you want to execute this action?",
-      "executing": "Executing...",
-      "executeSuccess": "Action executed successfully",
-      "executeFailed": "Action failed. Check the widget configuration."
+      "definitionNotFound": "Custom widget unavailable",
+      "migrationRequired": "This legacy custom widget is preserved, but it must be migrated to Custom JSX v2 from Manage custom widgets before it can run.",
+      "manageMigration": "Open Manage custom widgets",
+      "contactAdmin": "Contact an administrator.",
+      "configurationNeedsRepair": "This widget's options changed. Edit the widget to repair its configuration.",
+      "removeFromBoard": "Remove from board",
+      "editModePending": "Save the board to load this widget.",
+      "picker": {
+        "group": "Custom JSX widgets",
+        "empty": "No custom widgets found",
+        "preview": "Preview",
+        "sources": "{count, plural, one {# source} other {# sources}}",
+        "requests": "{count, plural, one {# request} other {# requests}}",
+        "migrationRequired": "Migration required",
+        "migrationDescription": "This placed v1 widget cannot run yet. Copy its redacted prompt to an LLM, then paste the single JSON response into Homarr.",
+        "manageMigration": "Open Manage custom widgets",
+        "contactAdmin": "Contact an administrator."
+      },
+      "configuration": {
+        "needsAttention": "Configuration needs attention: {message}",
+        "advancedOptions": "Advanced options",
+        "invalidJson": "Invalid JSON"
+      }
     },
     "beszelSystemTable": {
       "name": "Beszel Systems (Table)",
@@ -4463,7 +5185,9 @@
         "internalServerError": "Unable to connect to Beszel. Check your integration settings.",
         "liveConnectionFailed": "Live connection failed. Your Beszel instance may not support real-time streaming.",
         "switchToHistorical": "Switch to historical view",
-        "systemNotFound": "Selected system was not found. Choose a different system."
+        "systemNotFound": "Selected system was not found. Choose a different system.",
+        "selectionSaveTitle": "Unable to save selection",
+        "selectionSaveMessage": "Your system or time period selection could not be saved. Please try again."
       },
       "chart": {
         "cpu": {
@@ -4511,6 +5235,55 @@
           "title": "Docker Network I/O",
           "subtitle": "Network traffic of docker containers"
         }
+      },
+      "period": {
+        "live": "Live",
+        "oneHour": "1h",
+        "twelveHours": "12h",
+        "oneDay": "24h",
+        "oneWeek": "1w",
+        "thirtyDays": "30d"
+      }
+    },
+    "dynamicSelect": {
+      "noResults": "No results found",
+      "loadError": "Failed to load options"
+    },
+    "assistant": {
+      "name": "Assistant",
+      "description": "Have a complete assistant conversation directly on your board.",
+      "option": {
+        "conversationMode": {
+          "label": "Conversation",
+          "description": "Follow the conversation used elsewhere in Homarr, or keep this widget attached to a specific conversation.",
+          "option": {
+            "current": "Current conversation",
+            "pinned": "Pinned conversation"
+          }
+        },
+        "conversation": {
+          "label": "Pinned conversation",
+          "description": "Choose the saved conversation this widget should keep available.",
+          "placeholder": "Select a saved conversation"
+        }
+      },
+      "pinned": {
+        "title": "Pinned conversation",
+        "description": "This widget is attached to {conversation}. Open it to continue here without silently changing your active conversation.",
+        "selectTitle": "Choose a conversation",
+        "selectDescription": "Open the widget settings and select the conversation this widget should keep available.",
+        "open": "Open conversation",
+        "opening": "Opening conversation...",
+        "error": "This conversation could not be opened. It may have been deleted."
+      },
+      "unavailable": {
+        "title": "Assistant unavailable",
+        "description": "Sign in and ask an administrator to configure the Assistant from the management panel."
+      },
+      "compact": {
+        "title": "Assistant",
+        "description": "Resize this widget to chat here, or open the full conversation.",
+        "open": "Open assistant"
       }
     }
   },
@@ -4525,6 +5298,9 @@
   },
   "board": {
     "action": {
+      "addContent": "Add board content",
+      "settings": "Board settings",
+      "switch": "Switch board",
       "duplicate": {
         "title": "Duplicate board",
         "message": "This will duplicate the board {name} with all its content. If widgets reference integrations, that you are not allowed to use, they will be removed.",
@@ -4540,6 +5316,9 @@
         }
       },
       "edit": {
+        "enter": "Edit board",
+        "save": "Save board",
+        "exit": "Exit edit mode",
         "notification": {
           "success": {
             "title": "Changes applied successfully",
@@ -4548,6 +5327,10 @@
           "error": {
             "title": "Unable to apply changes",
             "message": "The board could not be saved"
+          },
+          "loadError": {
+            "title": "Unable to start editing",
+            "message": "The board editor could not be loaded. Your dashboard is still available in view mode."
           }
         },
         "confirmLeave": {
@@ -4618,6 +5401,12 @@
         }
       }
     },
+    "landmark": {
+      "canvas": "Dashboard canvas",
+      "leftRail": "Left dashboard rail",
+      "rightRail": "Right dashboard rail",
+      "items": "Dashboard items"
+    },
     "field": {
       "pageTitle": {
         "label": "Page title"
@@ -4749,9 +5538,44 @@
           "title": "Layout",
           "responsive": {
             "title": "Responsive layouts",
+            "description": "Each layout keeps its own widget positions and sizes. Mobile and Base are always available; add custom layouts for widths in between.",
             "action": {
               "add": "Add layout"
             }
+          },
+          "role": {
+            "mobile": "Mobile",
+            "base": "Base",
+            "custom": "Custom"
+          },
+          "custom": {
+            "defaultName": "Custom layout"
+          },
+          "mobile": {
+            "breakpointDescription": "Mobile is always used from 0px until the next layout breakpoint."
+          },
+          "preview": {
+            "columns": "columns",
+            "empty": "This layout is empty",
+            "dynamicSection": "Dynamic section",
+            "editorWidthLabel": "{layoutName} · {width}px"
+          },
+          "reset": {
+            "action": "Reset from Base",
+            "confirm": {
+              "title": "Reset {layoutName}?",
+              "message": "This replaces every saved position and size in this layout with a new layout generated from Base. This cannot be undone."
+            }
+          },
+          "edit": {
+            "action": "Edit layout",
+            "saveAndEdit": "Save and edit",
+            "save": "Save layout",
+            "cancel": {
+              "action": "Cancel layout editing",
+              "title": "Discard layout changes?",
+              "message": "Your unsaved changes to this layout will be discarded."
+            }
           }
         },
         "background": {
@@ -4871,6 +5695,26 @@
       "breakpoint": {
         "label": "Breakpoint",
         "description": "Layout will be used on all screens larger than this breakpoint until the next bigger breakpoint."
+      },
+      "gutters": {
+        "label": "Fixed sidebars",
+        "description": "Reserve up to three dashboard columns on either side. The remaining canvas reflows automatically.",
+        "left": {
+          "label": "Left sidebar",
+          "description": "Keep this area visible while the dashboard scrolls.",
+          "thumbLabel": "Left sidebar width"
+        },
+        "right": {
+          "label": "Right sidebar",
+          "description": "Keep this area visible while the dashboard scrolls.",
+          "thumbLabel": "Right sidebar width"
+        },
+        "width": {
+          "label": "Width in columns"
+        },
+        "preview": {
+          "label": "Dashboard layout preview"
+        }
       }
     }
   },
@@ -4897,9 +5741,9 @@
         "apps": "Apps",
         "integrations": "Integrations",
         "customWidgets": "Custom Widgets",
+        "workshop": "Workshop",
         "searchEngies": "Search engines",
         "medias": "Medias",
-        "assistant": "Assistant",
         "users": {
           "label": "Users",
           "items": {
@@ -4930,7 +5774,8 @@
             "sourceCode": "Source Code"
           }
         },
-        "about": "About"
+        "about": "About",
+        "assistant": "Assistant"
       }
     },
     "page": {
@@ -5175,6 +6020,76 @@
               "text": "This helps us figure out what people actually use so we know where to spend our time. We see stuff like how many widgets or integrations you have, your Homarr version, and what database you're on. That's it — no personal info, no URLs, no names, nothing that could identify you or your setup."
             }
           },
+          "crawlingAndIndexing": {
+            "title": "Crawling and Indexing",
+            "warning": "Enabling or disabling any settings here will severely impact how search engines will index & crawl your page. Any setting is a request and it is up to the crawler to apply these settings. Any modification may take up to multiple days or weeks to apply. Some settings may be search engine specific.",
+            "noIndex": {
+              "title": "No index",
+              "text": "Do not index the website on search engines and don't show it in any search results"
+            },
+            "noFollow": {
+              "title": "No follow",
+              "text": "Do not follow any links while indexing. Disabling this will lead to crawlers attempting to follow all links on Homarr."
+            },
+            "noTranslate": {
+              "title": "No translate",
+              "text": "When the site language is likely not that the user is likely to want to read, Google will show a translation link in the search results"
+            },
+            "noSiteLinksSearchBox": {
+              "title": "No site links search box",
+              "text": "Google will build a search box with the crawled links along with other direct links. Enabling this will ask Google to disable that box."
+            }
+          },
+          "board": {
+            "title": "Boards",
+            "homeBoard": {
+              "label": "Global home board",
+              "mobileLabel": "Global mobile board",
+              "description": "Only public boards are available for selection"
+            },
+            "status": {
+              "title": "App status",
+              "enableStatusByDefault": {
+                "label": "Enable status by default",
+                "description": "When adding an app item, the status will be enabled by default"
+              },
+              "forceDisableStatus": {
+                "label": "Force disable status",
+                "description": "Status for apps will be disabled for all users and can't be enabled"
+              }
+            }
+          },
+          "user": {
+            "title": "Users",
+            "enableGravatar": {
+              "label": "Enable Gravatar",
+              "description": "Falls back to user avatars from Libravatar/Gravatar when no custom avatar is set and an email is configured"
+            }
+          },
+          "search": {
+            "title": "Search",
+            "defaultSearchEngine": {
+              "label": "Global default search engine",
+              "description": "Integration search engines can not be selected here"
+            }
+          },
+          "appearance": {
+            "title": "Appearance",
+            "defaultColorScheme": {
+              "label": "Default color scheme",
+              "options": {
+                "auto": "Auto",
+                "light": "Light",
+                "dark": "Dark"
+              }
+            }
+          },
+          "culture": {
+            "title": "Culture",
+            "defaultLocale": {
+              "label": "Default language"
+            }
+          },
           "assistant": {
             "loading": "Loading assistant configuration",
             "title": "Assistant",
@@ -5389,76 +6304,6 @@
                 "title": "Assistant settings could not be saved"
               }
             }
-          },
-          "crawlingAndIndexing": {
-            "title": "Crawling and Indexing",
-            "warning": "Enabling or disabling any settings here will severely impact how search engines will index & crawl your page. Any setting is a request and it is up to the crawler to apply these settings. Any modification may take up to multiple days or weeks to apply. Some settings may be search engine specific.",
-            "noIndex": {
-              "title": "No index",
-              "text": "Do not index the website on search engines and don't show it in any search results"
-            },
-            "noFollow": {
-              "title": "No follow",
-              "text": "Do not follow any links while indexing. Disabling this will lead to crawlers attempting to follow all links on Homarr."
-            },
-            "noTranslate": {
-              "title": "No translate",
-              "text": "When the site language is likely not that the user is likely to want to read, Google will show a translation link in the search results"
-            },
-            "noSiteLinksSearchBox": {
-              "title": "No site links search box",
-              "text": "Google will build a search box with the crawled links along with other direct links. Enabling this will ask Google to disable that box."
-            }
-          },
-          "board": {
-            "title": "Boards",
-            "homeBoard": {
-              "label": "Global home board",
-              "mobileLabel": "Global mobile board",
-              "description": "Only public boards are available for selection"
-            },
-            "status": {
-              "title": "App status",
-              "enableStatusByDefault": {
-                "label": "Enable status by default",
-                "description": "When adding an app item, the status will be enabled by default"
-              },
-              "forceDisableStatus": {
-                "label": "Force disable status",
-                "description": "Status for apps will be disabled for all users and can't be enabled"
-              }
-            }
-          },
-          "user": {
-            "title": "Users",
-            "enableGravatar": {
-              "label": "Enable Gravatar",
-              "description": "Falls back to user avatars from Libravatar/Gravatar when no custom avatar is set and an email is configured"
-            }
-          },
-          "search": {
-            "title": "Search",
-            "defaultSearchEngine": {
-              "label": "Global default search engine",
-              "description": "Integration search engines can not be selected here"
-            }
-          },
-          "appearance": {
-            "title": "Appearance",
-            "defaultColorScheme": {
-              "label": "Default color scheme",
-              "options": {
-                "auto": "Auto",
-                "light": "Light",
-                "dark": "Dark"
-              }
-            }
-          },
-          "culture": {
-            "title": "Culture",
-            "defaultLocale": {
-              "label": "Default language"
-            }
           }
         }
       },
@@ -6277,9 +7122,6 @@
       "medias": {
         "label": "Medias"
       },
-      "assistant": {
-        "label": "Assistant"
-      },
       "apps": {
         "label": "Apps",
         "new": {
@@ -6301,6 +7143,9 @@
           }
         }
       },
+      "workshop": {
+        "label": "Workshop"
+      },
       "users": {
         "label": "Users",
         "create": {
@@ -6369,6 +7214,9 @@
       },
       "about": {
         "label": "About"
+      },
+      "assistant": {
+        "label": "Assistant"
       }
     }
   },
diff --git a/packages/translation/src/lang/es.json b/packages/translation/src/lang/es.json
index 92b01205c..095117aad 100644
--- a/packages/translation/src/lang/es.json
+++ b/packages/translation/src/lang/es.json
@@ -688,211 +688,6 @@
       "add": "Añadir una aplicación"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Nueva sección dinámica",
-        "remove": "Eliminar sección dinámica"
+        "create": "Nuevo contenedor",
+        "remove": "Eliminar contenedor"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Eliminar sección dinámica",
-        "message": "¿Estás seguro de que deseas eliminar esta sección dinámica? Los artículos se mantendrán en la misma ubicación."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Nombre"
-        }
-      },
-      "action": {
-        "create": "Nueva Categoría",
-        "edit": "Renombrar categoría",
-        "remove": "Eliminar categoría",
-        "moveUp": "Mover hacia arriba",
-        "moveDown": "Mover hacia abajo",
-        "createAbove": "Nueva categoría arriba",
-        "createBelow": "Nueva categoría abajo",
-        "openAllInNewTabs": "Abrir todo en nuevas pestañas"
-      },
-      "create": {
-        "title": "Nueva Categoría",
-        "submit": "Añadir categoría"
-      },
-      "remove": {
-        "title": "Eliminar categoría",
-        "message": "¿Estás seguro de que deseas eliminar la categoría {name}?"
-      },
-      "edit": {
-        "title": "Renombrar categoría",
-        "submit": "Renombrar categoría"
-      },
-      "menu": {
-        "label": {
-          "create": "Nueva Categoría",
-          "changePosition": "Cambiar posición",
-          "settings": ""
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Abrir todo en nuevas pestañas",
-        "text": "Algunos navegadores pueden bloquear la apertura masiva de nuevas pestañas por razones de seguridad. Homarr no pudo abrir todas las ventanas, porque tu navegador bloqueó esta acción. Por favor, permite \"Abrir ventanas emergentes\" y vuelve a intentarlo."
+        "title": "Eliminar contenedor",
+        "message": "¿Estás seguro de que deseas eliminar este contenedor? Los elementos se mantendrán en la misma ubicación."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": "Invertir orden"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "No se pudo obtener las estadísticas de los contenedores"
+        "internalServerError": "No se pudo obtener las estadísticas de los contenedores",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "Mostrar sólo reproducción actual",
           "description": "Desactivar esta opción no funcionará para plex"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "Reproducción en curso",
         "user": "Usuario",
@@ -2734,6 +2512,9 @@
         "id": "ID",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -3768,18 +3549,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3582,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3656,6 @@
         "unhealthy": "Poco sano"
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "",
       "description": "",
@@ -3954,11 +3701,19 @@
         },
         "showAgent": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "",
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Inicio",
         "boards": "Tableros",
         "apps": "Aplicaciones",
         "integrations": "Integraciones",
-        "customWidgets": "",
         "searchEngies": "Motores de búsqueda",
         "medias": "Imágenes",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Eliminar",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Contenedores eliminados",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Administrar",
       "boards": {
         "label": "Tableros"
@@ -5707,18 +5466,6 @@
           "label": "Editar"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Usuarios",
         "create": {
diff --git a/packages/translation/src/lang/et.json b/packages/translation/src/lang/et.json
index b6eef388c..8043f42db 100644
--- a/packages/translation/src/lang/et.json
+++ b/packages/translation/src/lang/et.json
@@ -688,211 +688,6 @@
       "add": ""
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Uus dünaamiline sektsioon",
-        "remove": "Eemalda dünaamiline sektsioon"
+        "create": "Uus konteiner",
+        "remove": "Eemalda konteiner"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Eemalda dünaamiline sektsioon",
-        "message": "Kas oled kindel, et soovid selle dünaamilise sektsiooni eemaldada? Üksused teisaldatakse ülemsektsiooni samasse asukohta."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Nimi"
-        }
-      },
-      "action": {
-        "create": "Uus kategooria",
-        "edit": "Nimeta kategooria ümber",
-        "remove": "Eemalda kategooria",
-        "moveUp": "Liiguta üles",
-        "moveDown": "Liiguta alla",
-        "createAbove": "Uus kategooria ülal",
-        "createBelow": "Uus kategooria all",
-        "openAllInNewTabs": ""
-      },
-      "create": {
-        "title": "Uus kategooria",
-        "submit": "Lisa kategooria"
-      },
-      "remove": {
-        "title": "Eemalda kategooria",
-        "message": "Kas oled kindel, et soovid eemaldada kategooria {name}?"
-      },
-      "edit": {
-        "title": "Nimeta kategooria ümber",
-        "submit": "Nimeta kategooria ümber"
-      },
-      "menu": {
-        "label": {
-          "create": "Uus kategooria",
-          "changePosition": "Muuda asukohta",
-          "settings": ""
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "",
-        "text": ""
+        "title": "Eemalda konteiner",
+        "message": "Kas oled kindel, et soovid selle konteineri eemaldada? Üksused teisaldatakse ülemsektsiooni samasse asukohta."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "",
           "description": ""
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "",
         "user": "",
@@ -2734,6 +2512,9 @@
         "id": "",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -2802,193 +2583,6 @@
         "internalServerError": ""
       }
     },
-    "patchmon": {
-      "name": "",
-      "description": "",
-      "title": "",
-      "totalHosts": "",
-      "hostsNeedingUpdates": "",
-      "securityUpdates": "",
-      "upToDateHosts": "",
-      "hostsWithSecurityUpdates": "",
-      "recentUpdates24h": "",
-      "totalOutdatedPackages": "",
-      "totalRepos": "",
-      "osDistribution": "",
-      "compliance": "",
-      "complianceRatio": "",
-      "lastUpdated": "",
-      "option": {
-        "showTotalHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsNeedingUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showUpToDateHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showRecentUpdates24h": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalOutdatedPackages": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalRepos": {
-          "label": "",
-          "description": ""
-        },
-        "enableThresholdColors": {
-          "label": "",
-          "description": ""
-        },
-        "useCustomThresholds": {
-          "label": "",
-          "description": ""
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "",
-            "percent": ""
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "showOsDistribution": {
-          "label": "",
-          "description": ""
-        },
-        "osDistributionLimit": {
-          "label": "",
-          "description": "",
-          "option": {
-            "3": "",
-            "5": "",
-            "10": "",
-            "all": ""
-          }
-        },
-        "showOsVersion": {
-          "label": "",
-          "description": ""
-        },
-        "showComplianceHero": {
-          "label": "",
-          "description": ""
-        },
-        "osDisplayMode": {
-          "label": "",
-          "description": "",
-          "option": {
-            "bars": "",
-            "donut": ""
-          }
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
-    "bazarr": {
-      "name": "",
-      "description": "",
-      "episodes": "",
-      "movies": "",
-      "providers": "",
-      "status": "",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "",
-          "description": ""
-        },
-        "showMissingMovies": {
-          "label": "",
-          "description": ""
-        },
-        "showProviderIssues": {
-          "label": "",
-          "description": ""
-        },
-        "showHealthIssues": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "immich-serverStats": {
       "name": "",
       "description": "",
@@ -3361,35 +2955,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showMissing": {
-          "label": ""
-        },
-        "showQueued": {
-          "label": ""
-        },
-        "pageSize": {
-          "label": ""
-        }
-      },
-      "tab": {
-        "missing": "",
-        "queued": ""
-      },
-      "type": {
-        "movie": "",
-        "episode": ""
-      },
-      "empty": {
-        "missing": "",
-        "queued": "",
-        "noTabsEnabled": ""
-      },
-      "timeLeft": ""
-    },
     "rssFeed": {
       "name": "RSS-voogud",
       "description": "Jälgi ja kuva üht või enamat üldist RSS-, ATOM- või JSON-voogu",
@@ -3718,40 +3283,6 @@
         "internalServerError": ""
       }
     },
-    "traefik": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showTcp": {
-          "label": ""
-        },
-        "showUdp": {
-          "label": ""
-        },
-        "showEntryPoints": {
-          "label": ""
-        }
-      },
-      "instances": "",
-      "versionUnknown": "",
-      "summary": {
-        "routers": "",
-        "entryPoints": ""
-      },
-      "resource": {
-        "routers": "",
-        "services": "",
-        "middlewares": ""
-      },
-      "status": {
-        "healthy": "",
-        "errors": "",
-        "warnings": ""
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "audioStats": {
       "name": "",
       "description": "",
@@ -3768,18 +3299,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3332,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3406,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "",
       "description": "",
@@ -3954,11 +3451,19 @@
         },
         "showAgent": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "",
@@ -4151,6 +3656,256 @@
           "subtitle": ""
         }
       }
+    },
+    "patchmon": {
+      "name": "",
+      "description": "",
+      "title": "",
+      "totalHosts": "",
+      "hostsNeedingUpdates": "",
+      "securityUpdates": "",
+      "upToDateHosts": "",
+      "hostsWithSecurityUpdates": "",
+      "recentUpdates24h": "",
+      "totalOutdatedPackages": "",
+      "totalRepos": "",
+      "osDistribution": "",
+      "compliance": "",
+      "complianceRatio": "",
+      "lastUpdated": "",
+      "option": {
+        "showTotalHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsNeedingUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showUpToDateHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showRecentUpdates24h": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalOutdatedPackages": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalRepos": {
+          "label": "",
+          "description": ""
+        },
+        "enableThresholdColors": {
+          "label": "",
+          "description": ""
+        },
+        "useCustomThresholds": {
+          "label": "",
+          "description": ""
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "",
+            "percent": ""
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "showOsDistribution": {
+          "label": "",
+          "description": ""
+        },
+        "osDistributionLimit": {
+          "label": "",
+          "description": "",
+          "option": {
+            "3": "",
+            "5": "",
+            "10": "",
+            "all": ""
+          }
+        },
+        "showOsVersion": {
+          "label": "",
+          "description": ""
+        },
+        "showComplianceHero": {
+          "label": "",
+          "description": ""
+        },
+        "osDisplayMode": {
+          "label": "",
+          "description": "",
+          "option": {
+            "bars": "",
+            "donut": ""
+          }
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "bazarr": {
+      "name": "",
+      "description": "",
+      "episodes": "",
+      "movies": "",
+      "providers": "",
+      "status": "",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "",
+          "description": ""
+        },
+        "showMissingMovies": {
+          "label": "",
+          "description": ""
+        },
+        "showProviderIssues": {
+          "label": "",
+          "description": ""
+        },
+        "showHealthIssues": {
+          "label": "",
+          "description": ""
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "mediaMissing": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showMissing": {
+          "label": ""
+        },
+        "showQueued": {
+          "label": ""
+        },
+        "pageSize": {
+          "label": ""
+        }
+      },
+      "tab": {
+        "missing": "",
+        "queued": ""
+      },
+      "type": {
+        "movie": "",
+        "episode": ""
+      },
+      "empty": {
+        "missing": "",
+        "queued": "",
+        "noTabsEnabled": ""
+      },
+      "timeLeft": ""
+    },
+    "traefik": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showTcp": {
+          "label": ""
+        },
+        "showUdp": {
+          "label": ""
+        },
+        "showEntryPoints": {
+          "label": ""
+        }
+      },
+      "instances": "",
+      "versionUnknown": "",
+      "summary": {
+        "routers": "",
+        "entryPoints": ""
+      },
+      "resource": {
+        "routers": "",
+        "services": "",
+        "middlewares": ""
+      },
+      "status": {
+        "healthy": "",
+        "errors": "",
+        "warnings": ""
+      },
+      "error": {
+        "internalServerError": ""
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Kodu",
         "boards": "Töölauad",
         "apps": "Rakendused",
         "integrations": "Integratsioonid",
-        "customWidgets": "",
         "searchEngies": "Otsingumootorid",
         "medias": "Meedia",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "",
       "boards": {
         "label": ""
@@ -5707,18 +5466,6 @@
           "label": ""
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "",
         "create": {
diff --git a/packages/translation/src/lang/fi.json b/packages/translation/src/lang/fi.json
index 93dad52af..68bc73c1f 100644
--- a/packages/translation/src/lang/fi.json
+++ b/packages/translation/src/lang/fi.json
@@ -688,211 +688,6 @@
       "add": "Lisää sovellus"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "Mukautetut widgetit",
-        "noResults": "Ei vielä mukautettuja widgettejä. Luo ensimmäinen!",
-        "loading": "Ladataan..."
-      },
-      "create": {
-        "title": "Luo mukautettu widget",
-        "subtitle": "Määritä API-URL, todennus ja miten vastaustiedot näytetään."
-      },
-      "edit": {
-        "title": "Muokkaa mukautettua widgettiä"
-      }
-    },
-    "action": {
-      "create": "Luo",
-      "import": "Tuo",
-      "save": "Tallenna",
-      "delete": "Poista mukautettu widget",
-      "deleteConfirm": "Haluatko varmasti poistaa \"{name}\"? Tätä toimintoa ei voi peruuttaa.",
-      "export": "Vie",
-      "addMapping": "Lisää kartoitus",
-      "addColumn": "Lisää sarake",
-      "edit": "Muokkaa",
-      "removeMapping": "Poista kartoitus",
-      "removeColumn": "Poista sarake",
-      "addItem": "Lisää kohde",
-      "removeItem": "Poista kohde",
-      "addBar": "Lisää palkki",
-      "duplicate": "Monista",
-      "copyAiPrompt": "Kopioi AI-kehoteprompt",
-      "enable": "Ota käyttöön",
-      "disable": "Poista käytöstä",
-      "menu": "Toiminnot"
-    },
-    "field": {
-      "name": "Nimi",
-      "description": "Kuvaus",
-      "iconUrl": "Kuvakkeen URL-osoite",
-      "url": "URL",
-      "authType": "Tunnistautumistyyppi",
-      "headerName": "Otsikko/kyselyparametrin nimi",
-      "method": "Menetelmä",
-      "requestBody": "Pyynnön runko",
-      "displayType": "Näyttötyyppi",
-      "jsonPath": "JSON-polku",
-      "jsonPathHint": "Käytä JSONPath-syntaksia arvojen poimimiseen, esim. $.data.temperature tai $.items[0].name",
-      "label": "Tunniste",
-      "unit": "Yksikkö",
-      "mappings": "Kartoitukset",
-      "tablePath": "Taulukon JSON-polku",
-      "tablePathHint": "Polku vastauksen taulukkoon, esim. $.data.items",
-      "columns": "Sarakkeet",
-      "header": "Otsikko",
-      "items": "Kohteet",
-      "gridColumns": "Ruudukon sarakkeet",
-      "cardStyle": "Kortin tyyli",
-      "bars": "Palkit",
-      "valuePath": "Arvon JSON-polku",
-      "maxPath": "Maksimiarvon JSON-polku",
-      "showPercentage": "Näytä prosenttiosuus",
-      "barSize": "Palkin koko",
-      "goodValues": "Hyvät arvot (pilkuin eroteltuina)",
-      "dotSize": "Pisteen koko",
-      "valueSize": "Arvon koko",
-      "labelPosition": "Tunnisteen sijainti",
-      "kvLayout": "Asettelu",
-      "striped": "Raidalliset rivit",
-      "compact": "Tiivis tila",
-      "maxHeight": "Maksimikorkeus (px)",
-      "color": "Väri",
-      "buttonLabel": "Painikkeen teksti",
-      "buttonColor": "Painikkeen väri",
-      "confirmText": "Vahvistusteksti",
-      "confirmTextHint": "Jos asetettu, vahvistusvalintaikkuna tulee esiin ennen pyynnön suorittamista",
-      "successMessage": "Onnistumisviesti",
-      "successMessageHint": "Viesti, joka näytetään onnistuneen suorituksen jälkeen",
-      "enabled": "Käytössä",
-      "template": {
-        "label": "JSX-mallipohja",
-        "description": "Mantine JSX -mallipohja. Käytä vastauskenttiä datan sidonnoilla (esim. data.name). Käytä vain sallittuja komponentteja. Kielletyt: constructor, __proto__, eval, Function, window, document."
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "CPU-lämpötila",
-      "exampleLabelShort": "CPU-lämpö",
-      "exampleHeader": "Nimi",
-      "exampleUnit": "°C",
-      "iconUrl": "https://...",
-      "url": "https://api.example.com/api/v1/status",
-      "headerName": "X-API-Key",
-      "jsonPath": "$.data.value",
-      "tablePath": "$.data.items",
-      "columnJsonPath": "$.nimi",
-      "valuePath": "$.data.used",
-      "maxPath": "$.data.total",
-      "goodValues": "online, true, up",
-      "color": "sininen"
-    },
-    "cardStyleOption": {
-      "filled": "Täytetty",
-      "outline": "Ääriviiva",
-      "subtle": "Hienovarainen"
-    },
-    "layoutOption": {
-      "list": "Luettelo",
-      "grid": "Ruudukko"
-    },
-    "sizeOption": {
-      "sm": "Pieni",
-      "md": "Keskikokoinen",
-      "lg": "Suuri",
-      "xl": "Erittäin suuri"
-    },
-    "labelPositionOption": {
-      "above": "Yläpuolella",
-      "below": "Alapuolella"
-    },
-    "fieldset": {
-      "general": "Yleiset",
-      "connection": "API-yhteys",
-      "display": "Näyttöasetukset"
-    },
-    "displayTypeDescription": {
-      "singleValue": "Näytä yksi poimittu arvo tunnisteella ja yksiköllä",
-      "keyValue": "Näytä useita tunnisteellisia arvoja vierekkäin",
-      "table": "Näytä tietorivit taulukkomuodossa",
-      "statGrid": "Värilliset tilastokortit ruudukossa – kuten Pi-Hole- tai Speedtest-widgetit",
-      "progressBars": "Edistymispalkit, jotka näyttävät käyttöasteen tai valmistumisen – levylle, muistille, kiintiöille",
-      "statusIndicator": "Värilliset tilapisteet, jotka näyttävät online/offline- tai terveydentilan",
-      "countGrid": "Tiiviit numero + tunniste -laskurit tiukassa ruudukossa",
-      "raw": "Muotoiltu JSON-tuloste vianetsintään",
-      "actionButton": "Painike, joka laukaisee pyynnön napsautettaessa",
-      "customJsx": "Mukautettu JSX-asettelu käyttäen sallittuja Mantine-komponentteja täydellä API-tietojen sidonnalla"
-    },
-    "method": {
-      "GET": "GET",
-      "POST": "POST",
-      "PUT": "PUT",
-      "DELETE": "DELETE",
-      "PATCH": "PATCH"
-    },
-    "authType": {
-      "none": "Ei mitään",
-      "bearer": "Bearer-tunniste",
-      "basic": "Basic-todennus",
-      "apiKeyHeader": "API-avain (otsikko)",
-      "apiKeyQuery": "API-avain (kysely)"
-    },
-    "displayType": {
-      "singleValue": "Yksittäinen arvo",
-      "keyValue": "Avain-arvo",
-      "table": "Taulukko",
-      "statGrid": "Tilastoruudukko",
-      "progressBars": "Edistymispalkit",
-      "statusIndicator": "Tilan ilmaisin",
-      "countGrid": "Laskuriruudukko",
-      "raw": "Raaka JSON",
-      "actionButton": "Toimintopainike",
-      "customJsx": "Mukautettu JSX"
-    },
-    "secret": {
-      "apiKey": "API-avain / token",
-      "username": "Käyttäjätunnus",
-      "password": "Salasana",
-      "savedPlaceholder": "••••••• (tallennettu, jätä tyhjäksi säilyttääksesi)"
-    },
-    "preview": {
-      "title": "Esikatselu",
-      "test": "Testaa",
-      "hint": "Napsauta Testaa nähdäksesi API-vastauksen nykyisillä asetuksillasi.",
-      "rawResponse": "Raaka JSON-vastaus"
-    },
-    "notification": {
-      "created": "Widget \"{name}\" luotiin onnistuneesti.",
-      "updated": "Widget \"{name}\" päivitettiin onnistuneesti.",
-      "deleted": "Widget \"{name}\" poistettiin.",
-      "imported": "Widget tuotiin onnistuneesti.",
-      "aiPromptCopied": "AI-kehoteprompt kopioitu leikepöydälle",
-      "aiPromptDescription": "Kopioi valmis kehoteprompt liitettäväksi mihin tahansa AI-chatbottiin (ChatGPT, Claude, Gemini...). Se sisältää täyden widget-skeeman ja API-vastauksesi, jotta AI voi luoda sinulle tuotavissa olevan JSON-asetuksen.",
-      "aiPromptCopy": "Kopioi leikepöydälle",
-      "aiPromptNoResponse": "Vinkki: Suorita testi ensin sisällyttääksesi API-vastauksesi kehotepromptiin parempien tulosten saamiseksi.",
-      "aiPromptCopyError": "Kehotepromptin kopiointi leikepöydälle epäonnistui. Selaimesi ei ehkä tue tätä ominaisuutta.",
-      "createError": "Widgetin luonti epäonnistui. Tarkista, että API-päätepisteesi on tavoitettavissa.",
-      "updateError": "Widgetin päivitys epäonnistui. Muutoksiasi ei tallennettu.",
-      "importError": "Widgetin tuonti epäonnistui. Varmista, että tiedosto on kelvollinen mukautetun widgetin JSON-vienti.",
-      "exportError": "Widgetin vienti epäonnistui.",
-      "duplicated": "Widget \"{name}\" kopioitiin.",
-      "duplicateError": "Widgetin kopiointi epäonnistui.",
-      "toggleError": "Widgetin tilan vaihto epäonnistui.",
-      "deleteError": "Widgetin poisto epäonnistui.",
-      "previewError": "Esikatselun nouto epäonnistui. Tarkista URL ja yritä uudelleen.",
-      "executed": "Toiminto suoritettu onnistuneesti.",
-      "executeError": "Toiminto epäonnistui: {error}"
-    },
-    "table": {
-      "name": "Nimi",
-      "url": "URL",
-      "display": "Näyttö"
-    },
-    "widget": {
-      "disabled": "Tämä widget on poistettu käytöstä"
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Uusi dynaaminen osio",
-        "remove": ""
+        "create": "Uusi kontti",
+        "remove": "Poista kontti"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "",
-        "message": "Haluatko varmasti poistaa tämän dynaamisen osion? Kohteet siirretään samaan paikkaan yläosiossa."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": ""
-        }
-      },
-      "action": {
-        "create": "Uusi kategoria",
-        "edit": "",
-        "remove": "",
-        "moveUp": "",
-        "moveDown": "",
-        "createAbove": "",
-        "createBelow": "",
-        "openAllInNewTabs": ""
-      },
-      "create": {
-        "title": "",
-        "submit": ""
-      },
-      "remove": {
-        "title": "",
-        "message": "Haluatko varmasti poistaa kategorian {name}?"
-      },
-      "edit": {
-        "title": "",
-        "submit": ""
-      },
-      "menu": {
-        "label": {
-          "create": "",
-          "changePosition": "",
-          "settings": "Asetukset"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "",
-        "text": "Jotkin selaimet voivat turvallisuussyistä estää välilehtien massa-avaamisen. Homarr ei voinut avata kaikkia ikkunoita, koska selaimesi esti toimenpiteen. Salli ponnahdusikkunoiden avaaminen ja yritä uudelleen."
+        "title": "Poista kontti",
+        "message": "Haluatko varmasti poistaa tämän kontin? Kohteet siirretään samaan paikkaan yläosiossa."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": "Käänteinen järjestys"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "",
           "description": ""
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "",
         "user": "",
@@ -2734,6 +2512,9 @@
         "id": "",
         "status": "Tila",
         "directPlay": "Muuntamaton toisto",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "Transkoodaus",
         "paused": "Keskeytetty",
         "remaining": "{minutes} min jäljellä",
@@ -2802,193 +2583,6 @@
         "internalServerError": "Paperless-ngx-tietojen haku epäonnistui"
       }
     },
-    "patchmon": {
-      "name": "PatchMon",
-      "description": "Yleiskatsaus isäntien päivitystilanteesta PatchMonista",
-      "title": "PatchMon-tilastot",
-      "totalHosts": "Isännät yhteensä",
-      "hostsNeedingUpdates": "Päivitystä tarvitsevat",
-      "securityUpdates": "Tietoturvapäivitykset",
-      "upToDateHosts": "Ajan tasalla olevat isännät",
-      "hostsWithSecurityUpdates": "Isännät, joilla on tietoturvapäivityksiä",
-      "recentUpdates24h": "Päivitykset (24 h)",
-      "totalOutdatedPackages": "Vanhentuneet paketit",
-      "totalRepos": "Pakettivarastot",
-      "osDistribution": "Käyttöjärjestelmien jakauma",
-      "compliance": "Päivityskattavuus",
-      "complianceRatio": "{upToDate} / {total}",
-      "lastUpdated": "Päivitetty {time}",
-      "option": {
-        "showTotalHosts": {
-          "label": "Näytä isännät yhteensä",
-          "description": "Näytä valvottujen isäntien kokonaismäärä"
-        },
-        "showHostsNeedingUpdates": {
-          "label": "Näytä päivitystä tarvitsevat isännät",
-          "description": "Näytä isännät, joilla on vähintään yksi vanhentunut paketti"
-        },
-        "showSecurityUpdates": {
-          "label": "Näytä tietoturvapäivitykset",
-          "description": "Näytä saatavilla olevien tietoturvapäivitysten kokonaismäärä"
-        },
-        "showUpToDateHosts": {
-          "label": "Näytä ajan tasalla olevat isännät",
-          "description": "Näytä isännät, joissa ei ole vanhentuneita paketteja"
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "Näytä isännät, joilla on tietoturvapäivityksiä",
-          "description": "Näytä isännät, jotka tarvitsevat tietoturvakorjauksia"
-        },
-        "showRecentUpdates24h": {
-          "label": "Näytä viimeaikaiset päivitykset (24 h)",
-          "description": "Näytä viimeisen 24 tunnin aikana asennettujen päivitysten määrä"
-        },
-        "showTotalOutdatedPackages": {
-          "label": "Näytä vanhentuneet paketit",
-          "description": "Näytä vanhentuneiden pakettien kokonaismäärä kaikissa isännissä"
-        },
-        "showTotalRepos": {
-          "label": "Näytä repositoriot",
-          "description": "Näytä valvottavien aktiivisten repositorioiden määrä"
-        },
-        "enableThresholdColors": {
-          "label": "Ota käyttöön kynnysarvovärit",
-          "description": "Väritä tilastoarvot vihreäksi, keltaiseksi tai punaiseksi vakavuusesiasetusten perusteella"
-        },
-        "useCustomThresholds": {
-          "label": "Edistyneet kynnysarvot",
-          "description": "Mukauta varoitus- ja kriittiset kynnysarvot tilastoittain käyttäen absoluuttisia määriä tai prosenttiosuutta isäntien kokonaismäärästä"
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "Absoluuttinen määrä",
-            "percent": "Prosenttia isäntien kokonaismäärästä"
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "Päivityksiä tarvitsevien kynnysarvotila",
-          "description": "Vertaa päivitystarpeiden määrää absoluuttisena arvona tai prosenttiosuutena isäntien kokonaismäärästä"
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "Päivitystarpeiden varoituskynnysarvo",
-          "description": "Muuta keltaiseksi, kun arvo saavuttaa tämän kynnysarvon"
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "Päivitystarpeiden kriittinen kynnysarvo",
-          "description": "Muuta punaiseksi, kun arvo saavuttaa tämän kynnysarvon"
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "Tietoturvapäivitysten kynnysarvotila",
-          "description": "Vertaa tietoturvapäivitysten määrää absoluuttisena arvona tai prosenttiosuutena isäntien kokonaismäärästä"
-        },
-        "securityUpdatesWarningAt": {
-          "label": "Tietoturvapäivitysten varoituskynnysarvo",
-          "description": "Muuta keltaiseksi, kun arvo saavuttaa tämän kynnysarvon"
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "Tietoturvapäivitysten kriittinen kynnysarvo",
-          "description": "Muuta punaiseksi, kun arvo saavuttaa tämän kynnysarvon"
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "Tietoturvapäivityksiä sisältävien isäntien kynnysarvotila",
-          "description": "Vertaa isäntien määrää absoluuttisena arvona tai prosenttiosuutena isäntien kokonaismäärästä"
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "Tietoturvapäivityksiä sisältävien isäntien varoituskynnysarvo",
-          "description": "Muuta keltaiseksi, kun arvo saavuttaa tämän kynnysarvon"
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "Tietoturvapäivityksiä sisältävien isäntien kriittinen kynnysarvo",
-          "description": "Muuta punaiseksi, kun arvo saavuttaa tämän kynnysarvon"
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "Ajan tasalla olevien isäntien kynnysarvotila",
-          "description": "Vertaa ajan tasalla olevien isäntien määrää absoluuttisena arvona tai prosenttiosuutena isäntien kokonaismäärästä"
-        },
-        "upToDateHostsWarningAt": {
-          "label": "Ajan tasalla olevien isäntien varoituskynnysarvo",
-          "description": "Muuta keltaiseksi, kun arvo on vähintään tämä kynnysarvo, mutta alle täyden kattavuuden"
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "Ajan tasalla olevien isäntien kriittinen kynnysarvo",
-          "description": "Muuta punaiseksi, kun arvo laskee tämän kynnysarvon alle"
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "Vanhentuneiden pakettien kynnysarvotila",
-          "description": "Vertaa vanhentuneiden pakettien määrää absoluuttisena arvona tai prosenttiosuutena isäntien kokonaismäärästä"
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "Vanhentuneiden pakettien varoituskynnysarvo",
-          "description": "Muuta keltaiseksi, kun arvo saavuttaa tämän kynnysarvon"
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "Vanhentuneiden pakettien kriittinen kynnysarvo",
-          "description": "Muuta punaiseksi, kun arvo saavuttaa tämän kynnysarvon"
-        },
-        "showOsDistribution": {
-          "label": "Näytä käyttöjärjestelmäjakauma",
-          "description": "Näytä erittely valvotuista isännistä käyttöjärjestelmittäin"
-        },
-        "osDistributionLimit": {
-          "label": "Käyttöjärjestelmäjakauman rajoitus",
-          "description": "Näytettävien käyttöjärjestelmien enimmäismäärä",
-          "option": {
-            "3": "3 parasta",
-            "5": "5 parasta",
-            "10": "10 parasta",
-            "all": "Kaikki"
-          }
-        },
-        "showOsVersion": {
-          "label": "Näytä käyttöjärjestelmän versio",
-          "description": "Liitä käyttöjärjestelmän versio jokaiseen jakauman nimikkeeseen, kun se on saatavilla"
-        },
-        "showComplianceHero": {
-          "label": "Näytä compliance-hero",
-          "description": "Näytä vaatimustenmukaisuusrengas, joka näyttää ajan tasalla olevien isäntien prosenttiosuuden"
-        },
-        "osDisplayMode": {
-          "label": "Käyttöjärjestelmän näyttötila",
-          "description": "Valitse, miten käyttöjärjestelmän jakelu näytetään",
-          "option": {
-            "bars": "Vaakapalkit",
-            "donut": "Donitsikaavio"
-          }
-        }
-      },
-      "error": {
-        "internalServerError": "PatchMon-tietojen nouto epäonnistui"
-      }
-    },
-    "bazarr": {
-      "name": "Bazarr",
-      "description": "Yleiskatsaus puuttuvista tekstityksistä ja terveystilasta Bazarr-instanssistasi",
-      "episodes": "Puuttuvat jaksot",
-      "movies": "Puuttuvat elokuvat",
-      "providers": "Palveluntarjoajan ongelmat",
-      "status": "Terveysongelmat",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "Näytä puuttuvat jaksot",
-          "description": "Näytä niiden jaksojen määrä, joista puuttuu tekstitys"
-        },
-        "showMissingMovies": {
-          "label": "Näytä puuttuvat elokuvat",
-          "description": "Näytä niiden elokuvien määrä, joista puuttuu tekstitykset"
-        },
-        "showProviderIssues": {
-          "label": "Näytä tarjoajien ongelmat",
-          "description": "Näytä ongelmallisten tekstitystarjoajien määrä"
-        },
-        "showHealthIssues": {
-          "label": "Näytä kunto-ongelmat",
-          "description": "Näytä Bazarrin kunto-ongelmien määrä"
-        }
-      },
-      "error": {
-        "internalServerError": "Bazarrin tietojen nouto epäonnistui"
-      }
-    },
     "immich-serverStats": {
       "name": "",
       "description": "",
@@ -3361,35 +2955,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "Puuttuva & jonossa oleva media",
-      "description": "Näyttää puuttuvat ja jonossa olevat elokuvat ja jaksot Radarr:sta ja Sonarr:sta",
-      "option": {
-        "showMissing": {
-          "label": "Näytä puuttuvat kohteet"
-        },
-        "showQueued": {
-          "label": "Näytä jonossa olevat kohteet"
-        },
-        "pageSize": {
-          "label": "Kohteita per sivu"
-        }
-      },
-      "tab": {
-        "missing": "Puuttuvat",
-        "queued": "Jonossa"
-      },
-      "type": {
-        "movie": "Elokuva",
-        "episode": "Jakso"
-      },
-      "empty": {
-        "missing": "Ei puuttuvia kohteita",
-        "queued": "Ei jonossa olevia kohteita",
-        "noTabsEnabled": "Ota käyttöön vähintään yksi välilehti widgetin asetuksissa"
-      },
-      "timeLeft": "Jäljellä oleva aika"
-    },
     "rssFeed": {
       "name": "",
       "description": "",
@@ -3718,40 +3283,6 @@
         "internalServerError": "Käytettävyystietojen haku epäonnistui"
       }
     },
-    "traefik": {
-      "name": "Traefik",
-      "description": "Yleiskatsaus Traefikin reitittimistä, palveluista, middlewareista ja sisääntulopisteistä",
-      "option": {
-        "showTcp": {
-          "label": "Näytä TCP"
-        },
-        "showUdp": {
-          "label": "Näytä UDP"
-        },
-        "showEntryPoints": {
-          "label": "Näytä sisääntulopisteet"
-        }
-      },
-      "instances": "Traefik-instanssit",
-      "versionUnknown": "Versio tuntematon",
-      "summary": {
-        "routers": "Reitittimet",
-        "entryPoints": "Sisääntulopisteet"
-      },
-      "resource": {
-        "routers": "Reitittimet",
-        "services": "Palvelut",
-        "middlewares": "Middlewaret"
-      },
-      "status": {
-        "healthy": "Terve",
-        "errors": "{count} virhettä",
-        "warnings": "{count} varoitusta"
-      },
-      "error": {
-        "internalServerError": "Traefikin tietojen nouto epäonnistui"
-      }
-    },
     "audioStats": {
       "name": "Äänitilastot",
       "description": "Kirjasto- ja toistotilastot Navidromesta tai Audiobookshelfistä",
@@ -3768,18 +3299,6 @@
           "label": "Näytä kappaleet",
           "description": "Näytä musiikkikirjastosi kappaleiden kokonaismäärä (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "Näytä nyt soi",
-          "description": "Näytä tällä hetkellä toistettavat kappaleet (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "Näytä nyt soiva lista",
-          "description": "Näytä yksittäiset kappaleet pelkän aktiivisten striimien määrän sijaan (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "Nyt soivien kohteiden enimmäismäärä",
-          "description": "Nyt soivassa listassa näytettävien kappaleiden enimmäismäärä (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "Näytä kirjastojen määrä",
           "description": "Näytä instanssisi kirjastojen lukumäärä (Audiobookshelf)"
@@ -3813,8 +3332,6 @@
       "podcasts": "Podcastit",
       "listeningTime": "Kuunteluaika",
       "activeSessions": "Aktiiviset istunnot",
-      "nowPlaying": "Nyt soitetaan",
-      "nowPlayingCount": "{count, plural, one {# striimi} other {# striimiä}}",
       "error": {
         "internalServerError": "Audiotilastojen nouto epäonnistui"
       }
@@ -3889,26 +3406,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "Mukautettu API",
-      "description": "Näytä dataa mistä tahansa ulkoisesta API:sta mukautetuilla asetuksilla.",
-      "option": {
-        "definitionId": {
-          "label": "Määritelmän tunnus"
-        },
-        "refreshInterval": {
-          "label": "Päivitysväli",
-          "description": "Kuinka usein data haetaan uudelleen API:sta (sekunteina)"
-        }
-      },
-      "noDefinition": "Määritelmää ei valittu",
-      "definitionNotFound": "Widget-määritelmää ei löydy. Se on saatettu poistaa.",
-      "noDisplayOutput": "Ei näyttötulostetta",
-      "executeConfirm": "Haluatko varmasti suorittaa tämän toiminnon?",
-      "executing": "Suoritetaan...",
-      "executeSuccess": "Toiminto suoritettu onnistuneesti",
-      "executeFailed": "Toiminto epäonnistui. Tarkista widgetin asetukset."
-    },
     "beszelSystemTable": {
       "name": "Beszel-järjestelmät (taulukko)",
       "description": "Taulukkonäkymä kaikista Beszel-valvotuista järjestelmistä, lajiteltavilla sarakkeilla ja tilaindikaattoreilla",
@@ -3954,11 +3451,19 @@
         },
         "showAgent": {
           "label": "Näytä agentin versio"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Järjestelmiä ei löytynyt",
       "error": {
-        "internalServerError": "Beszel-yhteyden muodostaminen epäonnistui. Tarkista integraatioasetuksesi."
+        "internalServerError": "Beszel-yhteyden muodostaminen epäonnistui. Tarkista integraatioasetuksesi.",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Järjestelmä",
@@ -4151,6 +3656,256 @@
           "subtitle": "Docker-konttien verkkoliikenne"
         }
       }
+    },
+    "patchmon": {
+      "name": "PatchMon",
+      "description": "Yleiskatsaus isäntien päivitystilanteesta PatchMonista",
+      "title": "PatchMon-tilastot",
+      "totalHosts": "Isännät yhteensä",
+      "hostsNeedingUpdates": "Päivitystä tarvitsevat",
+      "securityUpdates": "Tietoturvapäivitykset",
+      "upToDateHosts": "Ajan tasalla olevat isännät",
+      "hostsWithSecurityUpdates": "Isännät, joilla on tietoturvapäivityksiä",
+      "recentUpdates24h": "Päivitykset (24 h)",
+      "totalOutdatedPackages": "Vanhentuneet paketit",
+      "totalRepos": "Pakettivarastot",
+      "osDistribution": "Käyttöjärjestelmien jakauma",
+      "compliance": "Päivityskattavuus",
+      "complianceRatio": "{upToDate} / {total}",
+      "lastUpdated": "Päivitetty {time}",
+      "option": {
+        "showTotalHosts": {
+          "label": "Näytä isännät yhteensä",
+          "description": "Näytä valvottujen isäntien kokonaismäärä"
+        },
+        "showHostsNeedingUpdates": {
+          "label": "Näytä päivitystä tarvitsevat isännät",
+          "description": "Näytä isännät, joilla on vähintään yksi vanhentunut paketti"
+        },
+        "showSecurityUpdates": {
+          "label": "Näytä tietoturvapäivitykset",
+          "description": "Näytä saatavilla olevien tietoturvapäivitysten kokonaismäärä"
+        },
+        "showUpToDateHosts": {
+          "label": "Näytä ajan tasalla olevat isännät",
+          "description": "Näytä isännät, joissa ei ole vanhentuneita paketteja"
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "Näytä isännät, joilla on tietoturvapäivityksiä",
+          "description": "Näytä isännät, jotka tarvitsevat tietoturvakorjauksia"
+        },
+        "showRecentUpdates24h": {
+          "label": "Näytä viimeaikaiset päivitykset (24 h)",
+          "description": "Näytä viimeisen 24 tunnin aikana asennettujen päivitysten määrä"
+        },
+        "showTotalOutdatedPackages": {
+          "label": "Näytä vanhentuneet paketit",
+          "description": "Näytä vanhentuneiden pakettien kokonaismäärä kaikissa isännissä"
+        },
+        "showTotalRepos": {
+          "label": "Näytä repositoriot",
+          "description": "Näytä valvottavien aktiivisten repositorioiden määrä"
+        },
+        "enableThresholdColors": {
+          "label": "Ota käyttöön kynnysarvovärit",
+          "description": "Väritä tilastoarvot vihreäksi, keltaiseksi tai punaiseksi vakavuusesiasetusten perusteella"
+        },
+        "useCustomThresholds": {
+          "label": "Edistyneet kynnysarvot",
+          "description": "Mukauta varoitus- ja kriittiset kynnysarvot tilastoittain käyttäen absoluuttisia määriä tai prosenttiosuutta isäntien kokonaismäärästä"
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "Absoluuttinen määrä",
+            "percent": "Prosenttia isäntien kokonaismäärästä"
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "Päivityksiä tarvitsevien kynnysarvotila",
+          "description": "Vertaa päivitystarpeiden määrää absoluuttisena arvona tai prosenttiosuutena isäntien kokonaismäärästä"
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "Päivitystarpeiden varoituskynnysarvo",
+          "description": "Muuta keltaiseksi, kun arvo saavuttaa tämän kynnysarvon"
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "Päivitystarpeiden kriittinen kynnysarvo",
+          "description": "Muuta punaiseksi, kun arvo saavuttaa tämän kynnysarvon"
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "Tietoturvapäivitysten kynnysarvotila",
+          "description": "Vertaa tietoturvapäivitysten määrää absoluuttisena arvona tai prosenttiosuutena isäntien kokonaismäärästä"
+        },
+        "securityUpdatesWarningAt": {
+          "label": "Tietoturvapäivitysten varoituskynnysarvo",
+          "description": "Muuta keltaiseksi, kun arvo saavuttaa tämän kynnysarvon"
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "Tietoturvapäivitysten kriittinen kynnysarvo",
+          "description": "Muuta punaiseksi, kun arvo saavuttaa tämän kynnysarvon"
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "Tietoturvapäivityksiä sisältävien isäntien kynnysarvotila",
+          "description": "Vertaa isäntien määrää absoluuttisena arvona tai prosenttiosuutena isäntien kokonaismäärästä"
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "Tietoturvapäivityksiä sisältävien isäntien varoituskynnysarvo",
+          "description": "Muuta keltaiseksi, kun arvo saavuttaa tämän kynnysarvon"
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "Tietoturvapäivityksiä sisältävien isäntien kriittinen kynnysarvo",
+          "description": "Muuta punaiseksi, kun arvo saavuttaa tämän kynnysarvon"
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "Ajan tasalla olevien isäntien kynnysarvotila",
+          "description": "Vertaa ajan tasalla olevien isäntien määrää absoluuttisena arvona tai prosenttiosuutena isäntien kokonaismäärästä"
+        },
+        "upToDateHostsWarningAt": {
+          "label": "Ajan tasalla olevien isäntien varoituskynnysarvo",
+          "description": "Muuta keltaiseksi, kun arvo on vähintään tämä kynnysarvo, mutta alle täyden kattavuuden"
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "Ajan tasalla olevien isäntien kriittinen kynnysarvo",
+          "description": "Muuta punaiseksi, kun arvo laskee tämän kynnysarvon alle"
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "Vanhentuneiden pakettien kynnysarvotila",
+          "description": "Vertaa vanhentuneiden pakettien määrää absoluuttisena arvona tai prosenttiosuutena isäntien kokonaismäärästä"
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "Vanhentuneiden pakettien varoituskynnysarvo",
+          "description": "Muuta keltaiseksi, kun arvo saavuttaa tämän kynnysarvon"
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "Vanhentuneiden pakettien kriittinen kynnysarvo",
+          "description": "Muuta punaiseksi, kun arvo saavuttaa tämän kynnysarvon"
+        },
+        "showOsDistribution": {
+          "label": "Näytä käyttöjärjestelmäjakauma",
+          "description": "Näytä erittely valvotuista isännistä käyttöjärjestelmittäin"
+        },
+        "osDistributionLimit": {
+          "label": "Käyttöjärjestelmäjakauman rajoitus",
+          "description": "Näytettävien käyttöjärjestelmien enimmäismäärä",
+          "option": {
+            "3": "3 parasta",
+            "5": "5 parasta",
+            "10": "10 parasta",
+            "all": "Kaikki"
+          }
+        },
+        "showOsVersion": {
+          "label": "Näytä käyttöjärjestelmän versio",
+          "description": "Liitä käyttöjärjestelmän versio jokaiseen jakauman nimikkeeseen, kun se on saatavilla"
+        },
+        "showComplianceHero": {
+          "label": "Näytä compliance-hero",
+          "description": "Näytä vaatimustenmukaisuusrengas, joka näyttää ajan tasalla olevien isäntien prosenttiosuuden"
+        },
+        "osDisplayMode": {
+          "label": "Käyttöjärjestelmän näyttötila",
+          "description": "Valitse, miten käyttöjärjestelmän jakelu näytetään",
+          "option": {
+            "bars": "Vaakapalkit",
+            "donut": "Donitsikaavio"
+          }
+        }
+      },
+      "error": {
+        "internalServerError": "PatchMon-tietojen nouto epäonnistui"
+      }
+    },
+    "bazarr": {
+      "name": "Bazarr",
+      "description": "Yleiskatsaus puuttuvista tekstityksistä ja terveystilasta Bazarr-instanssistasi",
+      "episodes": "Puuttuvat jaksot",
+      "movies": "Puuttuvat elokuvat",
+      "providers": "Palveluntarjoajan ongelmat",
+      "status": "Terveysongelmat",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "Näytä puuttuvat jaksot",
+          "description": "Näytä niiden jaksojen määrä, joista puuttuu tekstitys"
+        },
+        "showMissingMovies": {
+          "label": "Näytä puuttuvat elokuvat",
+          "description": "Näytä niiden elokuvien määrä, joista puuttuu tekstitykset"
+        },
+        "showProviderIssues": {
+          "label": "Näytä tarjoajien ongelmat",
+          "description": "Näytä ongelmallisten tekstitystarjoajien määrä"
+        },
+        "showHealthIssues": {
+          "label": "Näytä kunto-ongelmat",
+          "description": "Näytä Bazarrin kunto-ongelmien määrä"
+        }
+      },
+      "error": {
+        "internalServerError": "Bazarrin tietojen nouto epäonnistui"
+      }
+    },
+    "mediaMissing": {
+      "name": "Puuttuva & jonossa oleva media",
+      "description": "Näyttää puuttuvat ja jonossa olevat elokuvat ja jaksot Radarr:sta ja Sonarr:sta",
+      "option": {
+        "showMissing": {
+          "label": "Näytä puuttuvat kohteet"
+        },
+        "showQueued": {
+          "label": "Näytä jonossa olevat kohteet"
+        },
+        "pageSize": {
+          "label": "Kohteita per sivu"
+        }
+      },
+      "tab": {
+        "missing": "Puuttuvat",
+        "queued": "Jonossa"
+      },
+      "type": {
+        "movie": "Elokuva",
+        "episode": "Jakso"
+      },
+      "empty": {
+        "missing": "Ei puuttuvia kohteita",
+        "queued": "Ei jonossa olevia kohteita",
+        "noTabsEnabled": "Ota käyttöön vähintään yksi välilehti widgetin asetuksissa"
+      },
+      "timeLeft": "Jäljellä oleva aika"
+    },
+    "traefik": {
+      "name": "Traefik",
+      "description": "Yleiskatsaus Traefikin reitittimistä, palveluista, middlewareista ja sisääntulopisteistä",
+      "option": {
+        "showTcp": {
+          "label": "Näytä TCP"
+        },
+        "showUdp": {
+          "label": "Näytä UDP"
+        },
+        "showEntryPoints": {
+          "label": "Näytä sisääntulopisteet"
+        }
+      },
+      "instances": "Traefik-instanssit",
+      "versionUnknown": "Versio tuntematon",
+      "summary": {
+        "routers": "Reitittimet",
+        "entryPoints": "Sisääntulopisteet"
+      },
+      "resource": {
+        "routers": "Reitittimet",
+        "services": "Palvelut",
+        "middlewares": "Middlewaret"
+      },
+      "status": {
+        "healthy": "Terve",
+        "errors": "{count} virhettä",
+        "warnings": "{count} varoitusta"
+      },
+      "error": {
+        "internalServerError": "Traefikin tietojen nouto epäonnistui"
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Aloitus",
         "boards": "Paneelit",
         "apps": "Sovellukset",
         "integrations": "Integraatiot",
-        "customWidgets": "Mukautetut widgetit",
         "searchEngies": "Hakukoneet",
         "medias": "Mediatiedostot",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Poista",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "",
       "boards": {
         "label": "Paneelit"
@@ -5707,18 +5466,6 @@
           "label": "Muokkaa"
         }
       },
-      "custom-widgets": {
-        "label": "Mukautetut widgetit",
-        "new": {
-          "label": "Uusi"
-        },
-        "edit": {
-          "label": "Muokkaa",
-          "flow": {
-            "label": "Kulku"
-          }
-        }
-      },
       "users": {
         "label": "Käyttäjät",
         "create": {
diff --git a/packages/translation/src/lang/fr.json b/packages/translation/src/lang/fr.json
index 024c774d2..83e54a33e 100644
--- a/packages/translation/src/lang/fr.json
+++ b/packages/translation/src/lang/fr.json
@@ -710,14 +710,7 @@
       "delete": "Supprimer le widget personnalisé",
       "deleteConfirm": "Êtes-vous sûr de vouloir supprimer \"{name}\" ? Cette action est irréversible.",
       "export": "Exporter",
-      "addMapping": "Ajouter une correspondance",
-      "addColumn": "Ajouter une colonne",
       "edit": "Modifier",
-      "removeMapping": "Supprimer la correspondance",
-      "removeColumn": "Supprimer la colonne",
-      "addItem": "Ajouter un élément",
-      "removeItem": "Supprimer l'élément",
-      "addBar": "Ajouter une barre",
       "duplicate": "Dupliquer",
       "copyAiPrompt": "Copier le prompt IA",
       "enable": "Activer",
@@ -727,150 +720,13 @@
     "field": {
       "name": "Nom",
       "description": "Description",
-      "iconUrl": "URL de l'icône",
-      "url": "URL",
-      "authType": "Type d’authentification",
-      "headerName": "Nom du paramètre de l'entête/requête",
-      "method": "Méthode",
-      "requestBody": "Corps de la requête",
-      "displayType": "Type d'affichage",
-      "jsonPath": "Chemin JSON",
-      "jsonPathHint": "Utiliser la syntaxe JSONPath pour extraire des valeurs, par exemple $.data.temperature ou $.items[0].name",
-      "label": "Étiquette",
-      "unit": "Unité",
-      "mappings": "Correspondances",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "Colonnes",
-      "header": "En-tête",
-      "items": "Objets",
-      "gridColumns": "Nombre de colonnes",
-      "cardStyle": "Style des cartes",
-      "bars": "Barres",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "Afficher le pourcentage",
-      "barSize": "Taille de la barre",
-      "goodValues": "Bonnes valeurs (séparées par des virgules)",
-      "dotSize": "Taille des points",
-      "valueSize": "Taille",
-      "labelPosition": "Position du libellé",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "Mode Compact",
-      "maxHeight": "",
-      "color": "Couleur",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "Texte de confirmation",
-      "confirmTextHint": "",
-      "successMessage": "Message de réussite",
-      "successMessageHint": "",
-      "enabled": "Activé",
-      "template": {
-        "label": "Template JSX",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "Température du CPU",
-      "exampleLabelShort": "Température du CPU",
-      "exampleHeader": "Nom",
-      "exampleUnit": "°C",
-      "iconUrl": "https://...",
-      "url": "https://api.example.com/api/v1/status",
-      "headerName": "",
-      "jsonPath": "$.data.value",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "Petit",
-      "md": "Moyen",
-      "lg": "Grand",
-      "xl": "Très grand"
-    },
-    "labelPositionOption": {
-      "above": "Au-dessus",
-      "below": "En dessous"
-    },
-    "fieldset": {
-      "general": "Général",
-      "connection": "Connexion API",
-      "display": "Configuration de l'affichage"
-    },
-    "displayTypeDescription": {
-      "singleValue": "Afficher une valeur extraite avec une étiquette et une unité",
-      "keyValue": "Afficher plusieurs valeurs étiquetées côte à côte",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "Points d'état colorés montrant en ligne/hors ligne ou l'état de santé",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "Un bouton qui déclenche une requête lorsqu'elle est cliquée",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "GET",
-      "POST": "POST",
-      "PUT": "PUT",
-      "DELETE": "DELETE",
-      "PATCH": "PATCH"
-    },
-    "authType": {
-      "none": "Aucun",
-      "bearer": "Jeton Bearer",
-      "basic": "Authentification basique",
-      "apiKeyHeader": "Clé API (En-tête)",
-      "apiKeyQuery": "Clé API (requête)"
-    },
-    "displayType": {
-      "singleValue": "Valeur unique",
-      "keyValue": "Clé-Valeur",
-      "table": "Tableau",
-      "statGrid": "Grille de statistiques",
-      "progressBars": "Barre de progression",
-      "statusIndicator": "Indicateur de statut",
-      "countGrid": "Grille de valeurs",
-      "raw": "Raw JSON",
-      "actionButton": "Bouton d'action",
-      "customJsx": "JSX personnalisé"
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "Nom d'utilisateur",
-      "password": "Mot de passe",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "Aperçu",
-      "test": "Tester",
-      "hint": "Cliquez sur Test pour prévisualiser la réponse API avec votre configuration actuelle.",
-      "rawResponse": ""
+      "iconUrl": "URL de l'icône"
     },
     "notification": {
       "created": "Widget \"{name}\" créé avec succès.",
       "updated": "Widget \"{name}\" mis à jour avec succès.",
       "deleted": "Widget \"{name}\" supprimé.",
       "imported": "Widget importé avec succès.",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "Copier dans le presse-papiers",
-      "aiPromptNoResponse": "",
       "aiPromptCopyError": "Échec de la copie du prompt dans le presse-papiers. Votre navigateur peut ne pas prendre en charge cette fonctionnalité.",
       "createError": "Impossible de créer le widget. Vérifiez que votre point de terminaison API est joignable.",
       "updateError": "Impossible de mettre à jour le widget. Vos modifications n'ont pas été enregistrées.",
@@ -883,14 +739,6 @@
       "previewError": "Impossible de récupérer l'aperçu. Vérifiez l'URL et réessayez.",
       "executed": "Action exécutée avec succès.",
       "executeError": "Échec de l'action: {error}"
-    },
-    "table": {
-      "name": "Nom",
-      "url": "URL",
-      "display": "Affichage"
-    },
-    "widget": {
-      "disabled": "Ce widget est désactivé"
     }
   },
   "integration": {
@@ -1405,6 +1253,8 @@
     "success": "Succès",
     "beta": "Bêta",
     "error": "Erreur",
+    "total": "Total",
+    "filesystemUsage": "{count, plural, one {Afficher l’utilisation de # système de fichiers} other {Afficher l’utilisation de # systèmes de fichiers}}",
     "action": {
       "add": "Ajouter",
       "apply": "Appliquer",
@@ -1549,10 +1399,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Nouvelle section dynamique",
-        "remove": "Supprimer la section dynamique"
+        "create": "Nouveau conteneur",
+        "remove": "Supprimer le conteneur"
       },
       "option": {
         "title": {
@@ -1566,48 +1416,8 @@
         }
       },
       "remove": {
-        "title": "Supprimer la section dynamique",
-        "message": "Êtes-vous sûr de vouloir supprimer cette section dynamique ? Les éléments seront déplacés au même emplacement dans la section parente."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Nom"
-        }
-      },
-      "action": {
-        "create": "Nouvelle catégorie",
-        "edit": "Renommer la catégorie",
-        "remove": "Supprimer la catégorie",
-        "moveUp": "Monter",
-        "moveDown": "Descendre",
-        "createAbove": "Nouvelle catégorie au-dessus",
-        "createBelow": "Nouvelle catégorie en dessous",
-        "openAllInNewTabs": "Tout ouvrir dans des onglets"
-      },
-      "create": {
-        "title": "Nouvelle catégorie",
-        "submit": "Ajouter une catégorie"
-      },
-      "remove": {
-        "title": "Supprimer la catégorie",
-        "message": "Êtes-vous sûr de vouloir supprimer la catégorie {name}?"
-      },
-      "edit": {
-        "title": "Renommer la catégorie",
-        "submit": "Renommer la catégorie"
-      },
-      "menu": {
-        "label": {
-          "create": "Nouvelle catégorie",
-          "changePosition": "Modifier la position",
-          "settings": "Réglages"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Tout ouvrir dans des onglets",
-        "text": "Certains navigateurs peuvent bloquer l'ouverture en masse d'onglets pour des raisons de sécurité. Homarr n'a pas pu ouvrir toutes les fenêtres, car votre navigateur a bloqué cette action. Veuillez autoriser \"Ouvrir les fenêtres pop-ups\" et réessayer."
+        "title": "Supprimer le conteneur",
+        "message": "Êtes-vous sûr de vouloir supprimer ce conteneur ? Les éléments seront déplacés au même emplacement dans la section parente."
       }
     }
   },
@@ -2108,6 +1918,12 @@
         "clickable": {
           "label": "Cliquable"
         }
+      },
+      "state": {
+        "on": "Activé",
+        "off": "Désactivé",
+        "unavailable": "Indisponible",
+        "unknown": "Inconnu"
       }
     },
     "smartHome-executeAutomation": {
@@ -2428,10 +2244,21 @@
         },
         "descendingDefaultSort": {
           "label": "Inverser le tri"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "Impossible de récupérer les statistiques des conteneurs"
+        "internalServerError": "Impossible de récupérer les statistiques des conteneurs",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2552,20 @@
         "showOnlyPlaying": {
           "label": "Afficher seulement les médias en cours de lecture",
           "description": "Désactiver cette option ne fonctionnera pas pour Plex"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "En cours de lecture",
         "user": "Utilisateur",
@@ -2734,6 +2573,9 @@
         "id": "Id",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -2802,193 +2644,6 @@
         "internalServerError": ""
       }
     },
-    "patchmon": {
-      "name": "",
-      "description": "",
-      "title": "",
-      "totalHosts": "",
-      "hostsNeedingUpdates": "",
-      "securityUpdates": "",
-      "upToDateHosts": "",
-      "hostsWithSecurityUpdates": "",
-      "recentUpdates24h": "",
-      "totalOutdatedPackages": "",
-      "totalRepos": "",
-      "osDistribution": "",
-      "compliance": "",
-      "complianceRatio": "",
-      "lastUpdated": "",
-      "option": {
-        "showTotalHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsNeedingUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showUpToDateHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showRecentUpdates24h": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalOutdatedPackages": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalRepos": {
-          "label": "",
-          "description": ""
-        },
-        "enableThresholdColors": {
-          "label": "",
-          "description": ""
-        },
-        "useCustomThresholds": {
-          "label": "",
-          "description": ""
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "",
-            "percent": ""
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "showOsDistribution": {
-          "label": "",
-          "description": ""
-        },
-        "osDistributionLimit": {
-          "label": "",
-          "description": "",
-          "option": {
-            "3": "",
-            "5": "",
-            "10": "",
-            "all": ""
-          }
-        },
-        "showOsVersion": {
-          "label": "",
-          "description": ""
-        },
-        "showComplianceHero": {
-          "label": "",
-          "description": ""
-        },
-        "osDisplayMode": {
-          "label": "",
-          "description": "",
-          "option": {
-            "bars": "",
-            "donut": ""
-          }
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
-    "bazarr": {
-      "name": "",
-      "description": "",
-      "episodes": "",
-      "movies": "",
-      "providers": "",
-      "status": "",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "",
-          "description": ""
-        },
-        "showMissingMovies": {
-          "label": "",
-          "description": ""
-        },
-        "showProviderIssues": {
-          "label": "",
-          "description": ""
-        },
-        "showHealthIssues": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "immich-serverStats": {
       "name": "Statistiques du serveur Immich",
       "description": "Informations sur votre instance Immich",
@@ -3361,35 +3016,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showMissing": {
-          "label": ""
-        },
-        "showQueued": {
-          "label": ""
-        },
-        "pageSize": {
-          "label": ""
-        }
-      },
-      "tab": {
-        "missing": "",
-        "queued": ""
-      },
-      "type": {
-        "movie": "",
-        "episode": ""
-      },
-      "empty": {
-        "missing": "",
-        "queued": "",
-        "noTabsEnabled": ""
-      },
-      "timeLeft": ""
-    },
     "rssFeed": {
       "name": "Flux RSS",
       "description": "Surveiller et afficher un ou plusieurs flux RSS, ATOM ou JSON génériques",
@@ -3547,8 +3173,13 @@
     "networkControllerSummary": {
       "option": {},
       "card": {
+        "wan": "WAN",
+        "web": "Web",
+        "wifi": "Wi-Fi",
+        "lan": "LAN",
         "vpn": {
-          "countConnected": "{count} connecté"
+          "label": "VPN",
+          "countConnected": "{count, plural, one {# connecté} other {# connectés}}"
         }
       },
       "error": {
@@ -3718,40 +3349,6 @@
         "internalServerError": "Impossible de récupérer les données de disponibilité"
       }
     },
-    "traefik": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showTcp": {
-          "label": ""
-        },
-        "showUdp": {
-          "label": ""
-        },
-        "showEntryPoints": {
-          "label": ""
-        }
-      },
-      "instances": "",
-      "versionUnknown": "",
-      "summary": {
-        "routers": "",
-        "entryPoints": ""
-      },
-      "resource": {
-        "routers": "",
-        "services": "",
-        "middlewares": ""
-      },
-      "status": {
-        "healthy": "",
-        "errors": "",
-        "warnings": ""
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "audioStats": {
       "name": "Statistiques audio",
       "description": "",
@@ -3768,18 +3365,6 @@
           "label": "Afficher les titres",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "Afficher la lecture en cours",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3398,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3472,6 @@
         "unhealthy": "Dysfonctionnement"
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Systèmes Beszel (Tableau)",
       "description": "Vue en tableau de tous les systèmes surveillés par Beszel avec colonnes triables et indicateurs d'état",
@@ -3954,11 +3517,19 @@
         },
         "showAgent": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "",
@@ -4151,6 +3722,256 @@
           "subtitle": ""
         }
       }
+    },
+    "patchmon": {
+      "name": "",
+      "description": "",
+      "title": "",
+      "totalHosts": "",
+      "hostsNeedingUpdates": "",
+      "securityUpdates": "",
+      "upToDateHosts": "",
+      "hostsWithSecurityUpdates": "",
+      "recentUpdates24h": "",
+      "totalOutdatedPackages": "",
+      "totalRepos": "",
+      "osDistribution": "",
+      "compliance": "",
+      "complianceRatio": "",
+      "lastUpdated": "",
+      "option": {
+        "showTotalHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsNeedingUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showUpToDateHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showRecentUpdates24h": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalOutdatedPackages": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalRepos": {
+          "label": "",
+          "description": ""
+        },
+        "enableThresholdColors": {
+          "label": "",
+          "description": ""
+        },
+        "useCustomThresholds": {
+          "label": "",
+          "description": ""
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "",
+            "percent": ""
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "showOsDistribution": {
+          "label": "",
+          "description": ""
+        },
+        "osDistributionLimit": {
+          "label": "",
+          "description": "",
+          "option": {
+            "3": "",
+            "5": "",
+            "10": "",
+            "all": ""
+          }
+        },
+        "showOsVersion": {
+          "label": "",
+          "description": ""
+        },
+        "showComplianceHero": {
+          "label": "",
+          "description": ""
+        },
+        "osDisplayMode": {
+          "label": "",
+          "description": "",
+          "option": {
+            "bars": "",
+            "donut": ""
+          }
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "bazarr": {
+      "name": "",
+      "description": "",
+      "episodes": "",
+      "movies": "",
+      "providers": "",
+      "status": "",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "",
+          "description": ""
+        },
+        "showMissingMovies": {
+          "label": "",
+          "description": ""
+        },
+        "showProviderIssues": {
+          "label": "",
+          "description": ""
+        },
+        "showHealthIssues": {
+          "label": "",
+          "description": ""
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "mediaMissing": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showMissing": {
+          "label": ""
+        },
+        "showQueued": {
+          "label": ""
+        },
+        "pageSize": {
+          "label": ""
+        }
+      },
+      "tab": {
+        "missing": "",
+        "queued": ""
+      },
+      "type": {
+        "movie": "",
+        "episode": ""
+      },
+      "empty": {
+        "missing": "",
+        "queued": "",
+        "noTabsEnabled": ""
+      },
+      "timeLeft": ""
+    },
+    "traefik": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showTcp": {
+          "label": ""
+        },
+        "showUdp": {
+          "label": ""
+        },
+        "showEntryPoints": {
+          "label": ""
+        }
+      },
+      "instances": "",
+      "versionUnknown": "",
+      "summary": {
+        "routers": "",
+        "entryPoints": ""
+      },
+      "resource": {
+        "routers": "",
+        "services": "",
+        "middlewares": ""
+      },
+      "status": {
+        "healthy": "",
+        "errors": "",
+        "warnings": ""
+      },
+      "error": {
+        "internalServerError": ""
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4352,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Accueil",
         "boards": "Tableaux de bord",
         "apps": "Applications",
         "integrations": "Intégrations",
-        "customWidgets": "Widgets personnalisés",
         "searchEngies": "Moteurs de recherche",
         "medias": "Médias",
         "users": {
@@ -5356,6 +5177,7 @@
       },
       "remove": {
         "label": "Supprimer",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Conteneurs supprimés",
@@ -5673,6 +5495,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Gérer",
       "boards": {
         "label": "Tableaux de bord"
@@ -5707,18 +5532,6 @@
           "label": "Modifier"
         }
       },
-      "custom-widgets": {
-        "label": "Widgets personnalisés",
-        "new": {
-          "label": "Nouveau"
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Utilisateurs",
         "create": {
diff --git a/packages/translation/src/lang/he.json b/packages/translation/src/lang/he.json
index 47fc7f26b..c945b9b16 100644
--- a/packages/translation/src/lang/he.json
+++ b/packages/translation/src/lang/he.json
@@ -688,211 +688,6 @@
       "add": "הוסף אפליקציה"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1405,6 +1200,8 @@
     "success": "הצלחה",
     "beta": "בטא",
     "error": "שגיאה",
+    "total": "סה״כ",
+    "filesystemUsage": "{count, plural, one {הצגת השימוש במערכת קבצים אחת} other {הצגת השימוש ב-# מערכות קבצים}}",
     "action": {
       "add": "הוסף",
       "apply": "החל",
@@ -1549,10 +1346,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "מדור דינמי חדש",
-        "remove": "הסר קטע דינמי"
+        "create": "מיכל חדש",
+        "remove": "הסר מיכל"
       },
       "option": {
         "title": {
@@ -1566,48 +1363,8 @@
         }
       },
       "remove": {
-        "title": "הסר קטע דינמי",
-        "message": "האם אתה בטוח שברצונך להסיר את הקטע הדינמי הזה? פריטים יועברו לאותו מיקום במדור האב."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "שם"
-        }
-      },
-      "action": {
-        "create": "קטגוריה חדשה",
-        "edit": "שנה את שם הקטגוריה",
-        "remove": "הסר קטגוריה",
-        "moveUp": "הזזה למעלה",
-        "moveDown": "הזזה למטה",
-        "createAbove": "קטגוריה חדשה למעלה",
-        "createBelow": "קטגוריה חדשה למטה",
-        "openAllInNewTabs": "פתח הכל בכרטיסיות"
-      },
-      "create": {
-        "title": "קטגוריה חדשה",
-        "submit": "הוסף קטגוריה"
-      },
-      "remove": {
-        "title": "הסר קטגוריה",
-        "message": "האם אתה בטוח שברצונך להסיר את הקטגוריה {name}?"
-      },
-      "edit": {
-        "title": "שנה את שם הקטגוריה",
-        "submit": "שנה את שם הקטגוריה"
-      },
-      "menu": {
-        "label": {
-          "create": "קטגוריה חדשה",
-          "changePosition": "שנה מיקום",
-          "settings": ""
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "פתח הכל בכרטיסיות",
-        "text": "דפדפנים מסוימים עשויים לחסום פתיחה בכמות גדולה של כרטיסיות מסיבות אבטחה. Homarr לא הצליח לפתוח את כל החלונות, מכיוון שהדפדפן שלך חסם את הפעולה הזו. אפשר \"פתח חלונות קופצים\" ונסה שוב."
+        "title": "הסר מיכל",
+        "message": "האם אתה בטוח שברצונך להסיר את המיכל הזה? פריטים יועברו לאותו מיקום במדור האב."
       }
     }
   },
@@ -2108,6 +1865,12 @@
         "clickable": {
           "label": "ניתן ללחיצה"
         }
+      },
+      "state": {
+        "on": "פעיל",
+        "off": "כבוי",
+        "unavailable": "לא זמין",
+        "unknown": "לא ידוע"
       }
     },
     "smartHome-executeAutomation": {
@@ -2428,10 +2191,21 @@
         },
         "descendingDefaultSort": {
           "label": "מיון הפוך"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "נכשל באחזור סטטיסטיקות המכולות"
+        "internalServerError": "נכשל באחזור סטטיסטיקות המכולות",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2499,20 @@
         "showOnlyPlaying": {
           "label": "הצג רק את ההפעלה הנוכחית",
           "description": "השבתת אפשרות זו לא תעבוד עבור פלקס"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "מתנגן כרגע",
         "user": "משתמש",
@@ -2734,6 +2520,9 @@
         "id": "מזהה",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -3547,8 +3336,13 @@
     "networkControllerSummary": {
       "option": {},
       "card": {
+        "wan": "WAN",
+        "web": "אינטרנט",
+        "wifi": "אלחוטי",
+        "lan": "LAN",
         "vpn": {
-          "countConnected": "{count} מחובר"
+          "label": "VPN",
+          "countConnected": "{count, plural, one {אחד מחובר} other {# מחוברים}}"
         }
       },
       "error": {
@@ -3768,18 +3562,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3595,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3669,6 @@
         "unhealthy": "לא בריא"
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "",
       "description": "",
@@ -3954,11 +3714,19 @@
         },
         "showAgent": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "",
@@ -4531,11 +4299,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "מסך הבית",
         "boards": "לוחות",
         "apps": "אפליקציות",
         "integrations": "אינטגרציות",
-        "customWidgets": "",
         "searchEngies": "מנועי חיפוש",
         "medias": "מדיה",
         "users": {
@@ -5356,6 +5124,7 @@
       },
       "remove": {
         "label": "הסר",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "הקונטיינרים הוסרו",
@@ -5673,6 +5442,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "ניהול",
       "boards": {
         "label": "לוחות"
@@ -5707,18 +5479,6 @@
           "label": "עריכה"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "משתמשים",
         "create": {
diff --git a/packages/translation/src/lang/hr.json b/packages/translation/src/lang/hr.json
index 5a5450f54..a7adc5a91 100644
--- a/packages/translation/src/lang/hr.json
+++ b/packages/translation/src/lang/hr.json
@@ -688,211 +688,6 @@
       "add": ""
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Nova dinamička sekcija",
-        "remove": "Ukloni dinamičku sekciju"
+        "create": "Novi kontejner",
+        "remove": "Ukloni kontejner"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Ukloni dinamičku sekciju",
-        "message": "Jeste li sigurni da želite ukloniti ovu dinamičku sekciju? Stavke će biti premještene na isto mjesto u nadređenoj sekciji."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Naziv"
-        }
-      },
-      "action": {
-        "create": "Nova kategorija",
-        "edit": "Preimenuj kategoriju",
-        "remove": "Ukloni kategoriju",
-        "moveUp": "Pomakni se gore",
-        "moveDown": "Pomicati prema dolje",
-        "createAbove": "Nova kategorija iznad",
-        "createBelow": "Nova kategorija ispod",
-        "openAllInNewTabs": ""
-      },
-      "create": {
-        "title": "Nova kategorija",
-        "submit": "Dodaj kategoriju"
-      },
-      "remove": {
-        "title": "Ukloni kategoriju",
-        "message": "Jeste li sigurni da želite ukloniti kategoriju {name}?"
-      },
-      "edit": {
-        "title": "Preimenuj kategoriju",
-        "submit": "Preimenuj kategoriju"
-      },
-      "menu": {
-        "label": {
-          "create": "Nova kategorija",
-          "changePosition": "Promijenjen položaj",
-          "settings": "Postavke"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "",
-        "text": ""
+        "title": "Ukloni kontejner",
+        "message": "Jeste li sigurni da želite ukloniti ovaj kontejner? Stavke će biti premještene na isto mjesto u nadređenoj sekciji."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "",
           "description": ""
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "",
         "user": "",
@@ -2734,6 +2512,9 @@
         "id": "",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -2802,193 +2583,6 @@
         "internalServerError": ""
       }
     },
-    "patchmon": {
-      "name": "",
-      "description": "",
-      "title": "",
-      "totalHosts": "",
-      "hostsNeedingUpdates": "",
-      "securityUpdates": "",
-      "upToDateHosts": "",
-      "hostsWithSecurityUpdates": "",
-      "recentUpdates24h": "",
-      "totalOutdatedPackages": "",
-      "totalRepos": "",
-      "osDistribution": "",
-      "compliance": "",
-      "complianceRatio": "",
-      "lastUpdated": "",
-      "option": {
-        "showTotalHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsNeedingUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showUpToDateHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showRecentUpdates24h": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalOutdatedPackages": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalRepos": {
-          "label": "",
-          "description": ""
-        },
-        "enableThresholdColors": {
-          "label": "",
-          "description": ""
-        },
-        "useCustomThresholds": {
-          "label": "",
-          "description": ""
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "",
-            "percent": ""
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "showOsDistribution": {
-          "label": "",
-          "description": ""
-        },
-        "osDistributionLimit": {
-          "label": "",
-          "description": "",
-          "option": {
-            "3": "",
-            "5": "",
-            "10": "",
-            "all": ""
-          }
-        },
-        "showOsVersion": {
-          "label": "",
-          "description": ""
-        },
-        "showComplianceHero": {
-          "label": "",
-          "description": ""
-        },
-        "osDisplayMode": {
-          "label": "",
-          "description": "",
-          "option": {
-            "bars": "",
-            "donut": ""
-          }
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
-    "bazarr": {
-      "name": "",
-      "description": "",
-      "episodes": "",
-      "movies": "",
-      "providers": "",
-      "status": "",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "",
-          "description": ""
-        },
-        "showMissingMovies": {
-          "label": "",
-          "description": ""
-        },
-        "showProviderIssues": {
-          "label": "",
-          "description": ""
-        },
-        "showHealthIssues": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "immich-serverStats": {
       "name": "",
       "description": "",
@@ -3361,35 +2955,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showMissing": {
-          "label": ""
-        },
-        "showQueued": {
-          "label": ""
-        },
-        "pageSize": {
-          "label": ""
-        }
-      },
-      "tab": {
-        "missing": "",
-        "queued": ""
-      },
-      "type": {
-        "movie": "",
-        "episode": ""
-      },
-      "empty": {
-        "missing": "",
-        "queued": "",
-        "noTabsEnabled": ""
-      },
-      "timeLeft": ""
-    },
     "rssFeed": {
       "name": "RSS kanali",
       "description": "Pratite i prikazujte jedan ili više općih RSS, ATOM ili JSON kanala",
@@ -3718,40 +3283,6 @@
         "internalServerError": ""
       }
     },
-    "traefik": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showTcp": {
-          "label": ""
-        },
-        "showUdp": {
-          "label": ""
-        },
-        "showEntryPoints": {
-          "label": ""
-        }
-      },
-      "instances": "",
-      "versionUnknown": "",
-      "summary": {
-        "routers": "",
-        "entryPoints": ""
-      },
-      "resource": {
-        "routers": "",
-        "services": "",
-        "middlewares": ""
-      },
-      "status": {
-        "healthy": "",
-        "errors": "",
-        "warnings": ""
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "audioStats": {
       "name": "",
       "description": "",
@@ -3768,18 +3299,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3332,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3406,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Beszel sustavi (tablica)",
       "description": "Tablični prikaz svih Beszel nadziranih sustava s sortabilnim stupcima i indikatorima statusa",
@@ -3954,11 +3451,19 @@
         },
         "showAgent": {
           "label": "Prikaži verziju agenta"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Nisu pronađeni sustavi",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Sustav",
@@ -4151,6 +3656,256 @@
           "subtitle": ""
         }
       }
+    },
+    "patchmon": {
+      "name": "",
+      "description": "",
+      "title": "",
+      "totalHosts": "",
+      "hostsNeedingUpdates": "",
+      "securityUpdates": "",
+      "upToDateHosts": "",
+      "hostsWithSecurityUpdates": "",
+      "recentUpdates24h": "",
+      "totalOutdatedPackages": "",
+      "totalRepos": "",
+      "osDistribution": "",
+      "compliance": "",
+      "complianceRatio": "",
+      "lastUpdated": "",
+      "option": {
+        "showTotalHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsNeedingUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showUpToDateHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showRecentUpdates24h": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalOutdatedPackages": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalRepos": {
+          "label": "",
+          "description": ""
+        },
+        "enableThresholdColors": {
+          "label": "",
+          "description": ""
+        },
+        "useCustomThresholds": {
+          "label": "",
+          "description": ""
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "",
+            "percent": ""
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "showOsDistribution": {
+          "label": "",
+          "description": ""
+        },
+        "osDistributionLimit": {
+          "label": "",
+          "description": "",
+          "option": {
+            "3": "",
+            "5": "",
+            "10": "",
+            "all": ""
+          }
+        },
+        "showOsVersion": {
+          "label": "",
+          "description": ""
+        },
+        "showComplianceHero": {
+          "label": "",
+          "description": ""
+        },
+        "osDisplayMode": {
+          "label": "",
+          "description": "",
+          "option": {
+            "bars": "",
+            "donut": ""
+          }
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "bazarr": {
+      "name": "",
+      "description": "",
+      "episodes": "",
+      "movies": "",
+      "providers": "",
+      "status": "",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "",
+          "description": ""
+        },
+        "showMissingMovies": {
+          "label": "",
+          "description": ""
+        },
+        "showProviderIssues": {
+          "label": "",
+          "description": ""
+        },
+        "showHealthIssues": {
+          "label": "",
+          "description": ""
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "mediaMissing": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showMissing": {
+          "label": ""
+        },
+        "showQueued": {
+          "label": ""
+        },
+        "pageSize": {
+          "label": ""
+        }
+      },
+      "tab": {
+        "missing": "",
+        "queued": ""
+      },
+      "type": {
+        "movie": "",
+        "episode": ""
+      },
+      "empty": {
+        "missing": "",
+        "queued": "",
+        "noTabsEnabled": ""
+      },
+      "timeLeft": ""
+    },
+    "traefik": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showTcp": {
+          "label": ""
+        },
+        "showUdp": {
+          "label": ""
+        },
+        "showEntryPoints": {
+          "label": ""
+        }
+      },
+      "instances": "",
+      "versionUnknown": "",
+      "summary": {
+        "routers": "",
+        "entryPoints": ""
+      },
+      "resource": {
+        "routers": "",
+        "services": "",
+        "middlewares": ""
+      },
+      "status": {
+        "healthy": "",
+        "errors": "",
+        "warnings": ""
+      },
+      "error": {
+        "internalServerError": ""
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Dom",
         "boards": "Daske",
         "apps": "aplikacije",
         "integrations": "Integracije",
-        "customWidgets": "",
         "searchEngies": "Tražilice",
         "medias": "Mediji",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Ukloni",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Kontejneri su uklonjeni",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Upravljati",
       "boards": {
         "label": "Daske"
@@ -5707,18 +5466,6 @@
           "label": "Uredi"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Korisnici",
         "create": {
diff --git a/packages/translation/src/lang/hu.json b/packages/translation/src/lang/hu.json
index bd939e030..ed939de0d 100644
--- a/packages/translation/src/lang/hu.json
+++ b/packages/translation/src/lang/hu.json
@@ -688,211 +688,6 @@
       "add": "Alkalmazás hozzáadása"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "Egyéni widgetek",
-        "noResults": "Még nincsenek egyéni widgetek. Hozd létre az elsőt!",
-        "loading": "Töltés..."
-      },
-      "create": {
-        "title": "Egyéni widget létrehozása",
-        "subtitle": "Adj meg egy API URL-t, hitelesítést, és hogy hogyan jelenjenek meg a válaszadatok."
-      },
-      "edit": {
-        "title": "Egyéni widget szerkesztése"
-      }
-    },
-    "action": {
-      "create": "Létrehozás",
-      "import": "Importálás",
-      "save": "Mentés",
-      "delete": "Egyéni widget törlése",
-      "deleteConfirm": "Biztosan törölni szeretnéd \"{name}\" widgetet? Ez a művelet nem vonható vissza.",
-      "export": "Exportálás",
-      "addMapping": "Leképezés hozzáadása",
-      "addColumn": "Oszlop hozzáadása",
-      "edit": "Szerkesztés",
-      "removeMapping": "Leképezés eltávolítása",
-      "removeColumn": "Oszlop eltávolítása",
-      "addItem": "Elem hozzáadása",
-      "removeItem": "Elem eltávolítása",
-      "addBar": "Sáv hozzáadása",
-      "duplicate": "Duplikálás",
-      "copyAiPrompt": "AI prompt másolása",
-      "enable": "Engedélyezés",
-      "disable": "Letiltás",
-      "menu": "Műveletek"
-    },
-    "field": {
-      "name": "Név",
-      "description": "Leírás",
-      "iconUrl": "Ikon URL",
-      "url": "URL",
-      "authType": "Hitelesítés típusa",
-      "headerName": "Fejléc/lekérdezési paraméter neve",
-      "method": "Metódus",
-      "requestBody": "Kérelem törzse",
-      "displayType": "Megjelenítés típusa",
-      "jsonPath": "JSON elérési út",
-      "jsonPathHint": "Használd a JSONPath szintaxist az értékek kinyeréséhez, pl. $.data.temperature vagy $.items[0].name",
-      "label": "Címke",
-      "unit": "Mértékegység",
-      "mappings": "Leképezések",
-      "tablePath": "Tömb JSON elérési útja",
-      "tablePathHint": "A válaszban lévő tömb elérési útja, pl. $.data.items",
-      "columns": "Oszlopok",
-      "header": "Fejléc",
-      "items": "Elemek",
-      "gridColumns": "Rács oszlopok",
-      "cardStyle": "Kártya stílus",
-      "bars": "Sávok",
-      "valuePath": "Érték JSON elérési út",
-      "maxPath": "Maximális érték JSON elérési út",
-      "showPercentage": "Százalék megjelenítése",
-      "barSize": "Sáv mérete",
-      "goodValues": "Jó értékek (vesszővel elválasztva)",
-      "dotSize": "Pont mérete",
-      "valueSize": "Érték mérete",
-      "labelPosition": "Címke pozíciója",
-      "kvLayout": "Elrendezés",
-      "striped": "Csíkos sorok",
-      "compact": "Kompakt mód",
-      "maxHeight": "Maximális magasság (px)",
-      "color": "Szín",
-      "buttonLabel": "Gomb felirata",
-      "buttonColor": "Gomb színe",
-      "confirmText": "Megerősítő szöveg",
-      "confirmTextHint": "Ha be van állítva, egy megerősítő ablak jelenik meg a kérés végrehajtása előtt",
-      "successMessage": "Sikerüzenet",
-      "successMessageHint": "A sikeres végrehajtás után megjelenő üzenet",
-      "enabled": "Engedélyezve",
-      "template": {
-        "label": "JSX sablon",
-        "description": "Mantine JSX sablon. Az API válasz mezőit adatkötéseken keresztül éred el (pl. data.name). Csak engedélyezett komponenseket használj. Tilos: constructor, __proto__, eval, Function, window, document."
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "CPU hőmérséklet",
-      "exampleLabelShort": "CPU hőm",
-      "exampleHeader": "Név",
-      "exampleUnit": "°C",
-      "iconUrl": "https://...",
-      "url": "https://api.example.com/api/v1/status",
-      "headerName": "X-API-Key",
-      "jsonPath": "$.data.value",
-      "tablePath": "$.data.items",
-      "columnJsonPath": "$.name",
-      "valuePath": "$.data.used",
-      "maxPath": "$.data.total",
-      "goodValues": "online, true, up",
-      "color": "kék"
-    },
-    "cardStyleOption": {
-      "filled": "Kitöltött",
-      "outline": "Körvonal",
-      "subtle": "Halvány"
-    },
-    "layoutOption": {
-      "list": "Lista",
-      "grid": "Rács"
-    },
-    "sizeOption": {
-      "sm": "Kicsi",
-      "md": "Közepes",
-      "lg": "Nagy",
-      "xl": "Extra nagy"
-    },
-    "labelPositionOption": {
-      "above": "Felette",
-      "below": "Alatta"
-    },
-    "fieldset": {
-      "general": "Általános",
-      "connection": "API kapcsolat",
-      "display": "Megjelenítési konfiguráció"
-    },
-    "displayTypeDescription": {
-      "singleValue": "Egy kinyert érték megjelenítése címkével és mértékegységgel",
-      "keyValue": "Több címkézett érték megjelenítése egymás mellett",
-      "table": "Adatsorok megjelenítése táblázatos formában",
-      "statGrid": "Színezett statisztikai kártyák rácsban – mint a Pi-Hole vagy Speedtest widgetek",
-      "progressBars": "Folyamatjelző sávok használat vagy készültség mutatására – lemez, memória, kvóta",
-      "statusIndicator": "Színezett állapotpontok, amelyek online/offline vagy egészségügyi állapotot mutatnak",
-      "countGrid": "Kompakt szám + címke számlálók sűrű rácsban",
-      "raw": "Szépen formázott JSON kimenet hibakereséshez",
-      "actionButton": "Egy gomb, ami kérés végrehajtását váltja ki kattintásra",
-      "customJsx": "Egyéni JSX elrendezés engedélyezett Mantine komponensekkel és teljes API adatkötéssel"
-    },
-    "method": {
-      "GET": "GET",
-      "POST": "POST",
-      "PUT": "PUT",
-      "DELETE": "DELETE",
-      "PATCH": "PATCH"
-    },
-    "authType": {
-      "none": "Nincs",
-      "bearer": "Bearer token",
-      "basic": "Basic Auth",
-      "apiKeyHeader": "API-kulcs (fejléc)",
-      "apiKeyQuery": "API-kulcs (lekérdezés)"
-    },
-    "displayType": {
-      "singleValue": "Egyedi érték",
-      "keyValue": "Kulcs-érték",
-      "table": "Táblázat",
-      "statGrid": "Statisztikai rács",
-      "progressBars": "Folyamatjelző sávok",
-      "statusIndicator": "Állapotjelző",
-      "countGrid": "Számláló rács",
-      "raw": "Nyers JSON",
-      "actionButton": "Műveleti gomb",
-      "customJsx": "Egyéni JSX"
-    },
-    "secret": {
-      "apiKey": "API kulcs / token",
-      "username": "Felhasználónév",
-      "password": "Jelszó",
-      "savedPlaceholder": "••••••• (mentve, üresen hagyva megtartja)"
-    },
-    "preview": {
-      "title": "Előnézet",
-      "test": "Teszt",
-      "hint": "Kattints a Teszt gombra az API válasz előnézetéhez a jelenlegi konfigurációval.",
-      "rawResponse": "Nyers JSON válasz"
-    },
-    "notification": {
-      "created": "\"{name}\" widget sikeresen létrehozva.",
-      "updated": "\"{name}\" widget sikeresen frissítve.",
-      "deleted": "\"{name}\" widget törölve.",
-      "imported": "",
-      "aiPromptCopied": "AI prompt a vágólapra másolva",
-      "aiPromptDescription": "Másolj egy előre elkészített promptot bármelyik AI chatbotba (ChatGPT, Claude, Gemini...). Tartalmazza a teljes widget sémát és az API választ, így az AI generálhat egy importálásra kész JSON konfigurációt.",
-      "aiPromptCopy": "Másolás a vágólapra",
-      "aiPromptNoResponse": "Tipp: Futtass egy tesztet először, hogy az API válasz is bekerüljön a promptba a jobb eredmények érdekében.",
-      "aiPromptCopyError": "A prompt vágólapra másolása sikertelen. Előfordulhat, hogy a böngésződ nem támogatja ezt a funkciót.",
-      "createError": "A widget létrehozása sikertelen. Ellenőrizd, hogy az API végpont elérhető-e.",
-      "updateError": "A widget frissítése sikertelen. A módosításaid nem lettek mentve.",
-      "importError": "A widget importálása sikertelen. Ellenőrizd, hogy a fájl érvényes egyéni widget JSON export-e.",
-      "exportError": "A widget exportálása sikertelen.",
-      "duplicated": "\"{name}\" widget duplikálva.",
-      "duplicateError": "A widget duplikálása sikertelen.",
-      "toggleError": "A widget állapotának átkapcsolása sikertelen.",
-      "deleteError": "A widget törlése sikertelen.",
-      "previewError": "Az előnézet lekérése sikertelen. Ellenőrizd az URL-t és próbáld újra.",
-      "executed": "A művelet sikeresen végrehajtva.",
-      "executeError": "A művelet sikertelen: {error}"
-    },
-    "table": {
-      "name": "Név",
-      "url": "URL",
-      "display": "Megjelenítés"
-    },
-    "widget": {
-      "disabled": "Ez a widget le van tiltva"
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Új dinamikus szakasz",
-        "remove": "A dinamikus szakasz eltávolítása"
+        "create": "Új konténer",
+        "remove": "A konténer eltávolítása"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Dinamikus szakasz eltávolítása",
-        "message": "Biztosan el akarja távolítani ezt a dinamikus részt? Az elemek a szülő rész ugyanazon helyére kerülnek át."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Név"
-        }
-      },
-      "action": {
-        "create": "Új kategória",
-        "edit": "Kategória átnevezése",
-        "remove": "Kategória eltávolítása",
-        "moveUp": "Felfelé mozgatás",
-        "moveDown": "Mozgatás le",
-        "createAbove": "Új kategória fent",
-        "createBelow": "Új kategória alább",
-        "openAllInNewTabs": "Mindet lapokban megnyitni"
-      },
-      "create": {
-        "title": "Új kategória",
-        "submit": "Kategória hozzáadása"
-      },
-      "remove": {
-        "title": "Kategória eltávolítása",
-        "message": "Biztosan el akarja távolítani a {name} kategóriát?"
-      },
-      "edit": {
-        "title": "Kategória átnevezése",
-        "submit": "Kategória átnevezése"
-      },
-      "menu": {
-        "label": {
-          "create": "Új kategória",
-          "changePosition": "Pozíció módosítása",
-          "settings": "Beállítások"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Mindet lapokban megnyitni",
-        "text": "Bizonyos böngészők biztonsági okokból megakadályozhatják a lapok tömeges megnyitását. A Homarr nem tudta megnyitni az összes ablakot, mert a böngészője letiltotta ezt a műveletet. Kérjük, engedélyezze a „Felugró ablakok megnyitása” opciót, majd próbálja meg újra."
+        "title": "Konténer eltávolítása",
+        "message": "Biztosan el akarja távolítani ezt a konténert? Az elemek a szülő rész ugyanazon helyére kerülnek át."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": "Fordított rendezés"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "A konténerek statisztikáinak lekérése sikertelen"
+        "internalServerError": "A konténerek statisztikáinak lekérése sikertelen",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "Csak a jelenleg lejátszottakat mutasd",
           "description": "Ennek letiltása a Plex esetében nem fog működni"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "Jelenleg lejátszás alatt",
         "user": "Felhasználó",
@@ -2734,6 +2512,9 @@
         "id": "Azonosító",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -2802,193 +2583,6 @@
         "internalServerError": "A Paperless-ngx adatok letöltése nem sikerült"
       }
     },
-    "patchmon": {
-      "name": "",
-      "description": "",
-      "title": "",
-      "totalHosts": "",
-      "hostsNeedingUpdates": "",
-      "securityUpdates": "",
-      "upToDateHosts": "",
-      "hostsWithSecurityUpdates": "",
-      "recentUpdates24h": "",
-      "totalOutdatedPackages": "",
-      "totalRepos": "",
-      "osDistribution": "",
-      "compliance": "",
-      "complianceRatio": "",
-      "lastUpdated": "",
-      "option": {
-        "showTotalHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsNeedingUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showUpToDateHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showRecentUpdates24h": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalOutdatedPackages": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalRepos": {
-          "label": "",
-          "description": ""
-        },
-        "enableThresholdColors": {
-          "label": "",
-          "description": ""
-        },
-        "useCustomThresholds": {
-          "label": "",
-          "description": ""
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "",
-            "percent": ""
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "showOsDistribution": {
-          "label": "",
-          "description": ""
-        },
-        "osDistributionLimit": {
-          "label": "",
-          "description": "",
-          "option": {
-            "3": "",
-            "5": "",
-            "10": "",
-            "all": ""
-          }
-        },
-        "showOsVersion": {
-          "label": "",
-          "description": ""
-        },
-        "showComplianceHero": {
-          "label": "",
-          "description": ""
-        },
-        "osDisplayMode": {
-          "label": "",
-          "description": "",
-          "option": {
-            "bars": "",
-            "donut": ""
-          }
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
-    "bazarr": {
-      "name": "",
-      "description": "",
-      "episodes": "",
-      "movies": "",
-      "providers": "",
-      "status": "",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "",
-          "description": ""
-        },
-        "showMissingMovies": {
-          "label": "",
-          "description": ""
-        },
-        "showProviderIssues": {
-          "label": "",
-          "description": ""
-        },
-        "showHealthIssues": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "immich-serverStats": {
       "name": "Immich szerver statisztikák",
       "description": "Információk az Immich-példányodról",
@@ -3361,35 +2955,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showMissing": {
-          "label": ""
-        },
-        "showQueued": {
-          "label": ""
-        },
-        "pageSize": {
-          "label": ""
-        }
-      },
-      "tab": {
-        "missing": "",
-        "queued": ""
-      },
-      "type": {
-        "movie": "",
-        "episode": ""
-      },
-      "empty": {
-        "missing": "",
-        "queued": "",
-        "noTabsEnabled": ""
-      },
-      "timeLeft": ""
-    },
     "rssFeed": {
       "name": "RSS feedek",
       "description": "Egy vagy több általános RSS-, ATOM- vagy JSON-hírcsatorna figyelése és megjelenítése",
@@ -3718,40 +3283,6 @@
         "internalServerError": "Az üzemidőadatok letöltése nem sikerült"
       }
     },
-    "traefik": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showTcp": {
-          "label": ""
-        },
-        "showUdp": {
-          "label": ""
-        },
-        "showEntryPoints": {
-          "label": ""
-        }
-      },
-      "instances": "",
-      "versionUnknown": "",
-      "summary": {
-        "routers": "",
-        "entryPoints": ""
-      },
-      "resource": {
-        "routers": "",
-        "services": "",
-        "middlewares": ""
-      },
-      "status": {
-        "healthy": "",
-        "errors": "",
-        "warnings": ""
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "audioStats": {
       "name": "Audió statisztikák",
       "description": "Könyvtári és lejátszási statisztikák Navidrome-ból vagy Audiobookshelf-ből",
@@ -3768,18 +3299,6 @@
           "label": "Zeneszámok megjelenítése",
           "description": "A zeneszámok teljes számának megjelenítése a zenekönyvtárban (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "Most játszott megjelenítése",
-          "description": "A jelenleg játszott sávok megjelenítése (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "Most játszott lista megjelenítése",
-          "description": "Egyes sávok megjelenítése a csak aktív streamszám helyett (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "Maximális most játszott elemek",
-          "description": "A most játszott listában megjelenítendő sávok maximális száma (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "Könyvtárak számának megjelenítése",
           "description": "A példányodon lévő könyvtárak számának megjelenítése (Audiobookshelf)"
@@ -3813,8 +3332,6 @@
       "podcasts": "Podcastek",
       "listeningTime": "Hallgatási idő",
       "activeSessions": "Aktív munkamenetek",
-      "nowPlaying": "Most játszott",
-      "nowPlayingCount": "{count, plural, one {# stream} other {# stream}}",
       "error": {
         "internalServerError": "Az audió statisztikai adatok letöltése nem sikerült"
       }
@@ -3889,26 +3406,6 @@
         "unhealthy": "Hibás"
       }
     },
-    "customApi": {
-      "name": "Egyéni API",
-      "description": "Adatok megjelenítése bármely külső API-ból egyedi konfigurációval.",
-      "option": {
-        "definitionId": {
-          "label": "Definíció azonosító"
-        },
-        "refreshInterval": {
-          "label": "Frissítési időköz",
-          "description": "Milyen gyakran kérje le újra az adatokat az API-tól (másodpercben)"
-        }
-      },
-      "noDefinition": "Nincs definíció kiválasztva",
-      "definitionNotFound": "A widget definíció nem található. Lehet, hogy törölték.",
-      "noDisplayOutput": "Nincs megjelenítési kimenet",
-      "executeConfirm": "Biztosan végre szeretnéd hajtani ezt a műveletet?",
-      "executing": "Végrehajtás...",
-      "executeSuccess": "A művelet sikeresen végrehajtva",
-      "executeFailed": "A művelet sikertelen. Ellenőrizd a widget konfigurációját."
-    },
     "beszelSystemTable": {
       "name": "Beszel Rendszerek (Táblázat)",
       "description": "Az összes Beszel által figyelt rendszer táblázatos nézete rendezhető oszlopokkal és állapotjelzőkkel",
@@ -3954,11 +3451,19 @@
         },
         "showAgent": {
           "label": "Agent verzió mutatása"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Nincsenek rendszerek",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Rendszer",
@@ -4151,6 +3656,256 @@
           "subtitle": "A Docker konténerek hálózati forgalma"
         }
       }
+    },
+    "patchmon": {
+      "name": "",
+      "description": "",
+      "title": "",
+      "totalHosts": "",
+      "hostsNeedingUpdates": "",
+      "securityUpdates": "",
+      "upToDateHosts": "",
+      "hostsWithSecurityUpdates": "",
+      "recentUpdates24h": "",
+      "totalOutdatedPackages": "",
+      "totalRepos": "",
+      "osDistribution": "",
+      "compliance": "",
+      "complianceRatio": "",
+      "lastUpdated": "",
+      "option": {
+        "showTotalHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsNeedingUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showUpToDateHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showRecentUpdates24h": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalOutdatedPackages": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalRepos": {
+          "label": "",
+          "description": ""
+        },
+        "enableThresholdColors": {
+          "label": "",
+          "description": ""
+        },
+        "useCustomThresholds": {
+          "label": "",
+          "description": ""
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "",
+            "percent": ""
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "showOsDistribution": {
+          "label": "",
+          "description": ""
+        },
+        "osDistributionLimit": {
+          "label": "",
+          "description": "",
+          "option": {
+            "3": "",
+            "5": "",
+            "10": "",
+            "all": ""
+          }
+        },
+        "showOsVersion": {
+          "label": "",
+          "description": ""
+        },
+        "showComplianceHero": {
+          "label": "",
+          "description": ""
+        },
+        "osDisplayMode": {
+          "label": "",
+          "description": "",
+          "option": {
+            "bars": "",
+            "donut": ""
+          }
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "bazarr": {
+      "name": "",
+      "description": "",
+      "episodes": "",
+      "movies": "",
+      "providers": "",
+      "status": "",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "",
+          "description": ""
+        },
+        "showMissingMovies": {
+          "label": "",
+          "description": ""
+        },
+        "showProviderIssues": {
+          "label": "",
+          "description": ""
+        },
+        "showHealthIssues": {
+          "label": "",
+          "description": ""
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "mediaMissing": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showMissing": {
+          "label": ""
+        },
+        "showQueued": {
+          "label": ""
+        },
+        "pageSize": {
+          "label": ""
+        }
+      },
+      "tab": {
+        "missing": "",
+        "queued": ""
+      },
+      "type": {
+        "movie": "",
+        "episode": ""
+      },
+      "empty": {
+        "missing": "",
+        "queued": "",
+        "noTabsEnabled": ""
+      },
+      "timeLeft": ""
+    },
+    "traefik": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showTcp": {
+          "label": ""
+        },
+        "showUdp": {
+          "label": ""
+        },
+        "showEntryPoints": {
+          "label": ""
+        }
+      },
+      "instances": "",
+      "versionUnknown": "",
+      "summary": {
+        "routers": "",
+        "entryPoints": ""
+      },
+      "resource": {
+        "routers": "",
+        "services": "",
+        "middlewares": ""
+      },
+      "status": {
+        "healthy": "",
+        "errors": "",
+        "warnings": ""
+      },
+      "error": {
+        "internalServerError": ""
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Nyitólap",
         "boards": "Táblák",
         "apps": "Alkalmazások",
         "integrations": "Integrációk",
-        "customWidgets": "",
         "searchEngies": "Keresőmotorok",
         "medias": "Média",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Eltávolítás",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Konténerek eltávolítva",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Kezelés",
       "boards": {
         "label": "Táblák"
@@ -5707,18 +5466,6 @@
           "label": "Szerkesztés"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Felhasználók",
         "create": {
diff --git a/packages/translation/src/lang/it.json b/packages/translation/src/lang/it.json
index d313e3fed..312404a45 100644
--- a/packages/translation/src/lang/it.json
+++ b/packages/translation/src/lang/it.json
@@ -710,14 +710,7 @@
       "delete": "Elimina Widget Personalizzato",
       "deleteConfirm": "Sei sicuro di voler eliminare \"{name}\"? Questa azione non può essere annullata.",
       "export": "Esporta",
-      "addMapping": "Aggiungi Mappatura",
-      "addColumn": "Aggiungi Colonna",
       "edit": "Modifica",
-      "removeMapping": "Rimuovi mappatura",
-      "removeColumn": "Rimuovi colonna",
-      "addItem": "Aggiungi Elemento",
-      "removeItem": "Rimuovi elemento",
-      "addBar": "Aggiungi Barra",
       "duplicate": "Duplica",
       "copyAiPrompt": "Copia prompt IA",
       "enable": "Abilita",
@@ -727,140 +720,7 @@
     "field": {
       "name": "Nome",
       "description": "Descrizione",
-      "iconUrl": "URL Icona",
-      "url": "URL",
-      "authType": "Tipo Autenticazione",
-      "headerName": "Nome Header/Parametro Query",
-      "method": "Metodo",
-      "requestBody": "Corpo della Richiesta",
-      "displayType": "Tipo di Visualizzazione",
-      "jsonPath": "Percorso JSON",
-      "jsonPathHint": "Usa la sintassi JSONPath per estrarre i valori, ad es. $.data.temperature o $.items[0].name",
-      "label": "Etichetta",
-      "unit": "Unità",
-      "mappings": "Mappature",
-      "tablePath": "Percorso JSON Array",
-      "tablePathHint": "Percorso dell'array nella risposta, ad es. $.data.items",
-      "columns": "Colonne",
-      "header": "Intestazione",
-      "items": "Elementi",
-      "gridColumns": "Colonne Griglia",
-      "cardStyle": "Stile Card",
-      "bars": "Barre",
-      "valuePath": "Percorso JSON Valore",
-      "maxPath": "Percorso JSON Valore Massimo",
-      "showPercentage": "Mostra Percentuale",
-      "barSize": "Dimensione Barra",
-      "goodValues": "Valori Positivi (separati da virgola)",
-      "dotSize": "Dimensione Punto",
-      "valueSize": "Dimensione Valore",
-      "labelPosition": "Posizione Etichetta",
-      "kvLayout": "Layout",
-      "striped": "Righe Alternate",
-      "compact": "Modalità Compatta",
-      "maxHeight": "Altezza Massima (px)",
-      "color": "Colore",
-      "buttonLabel": "Etichetta Pulsante",
-      "buttonColor": "Colore Pulsante",
-      "confirmText": "Testo di Conferma",
-      "confirmTextHint": "Se impostato, verrà mostrata una finestra di conferma prima di eseguire la richiesta",
-      "successMessage": "Messaggio di Successo",
-      "successMessageHint": "Messaggio mostrato dopo l'esecuzione riuscita",
-      "enabled": "Abilitato",
-      "template": {
-        "label": "Template JSX",
-        "description": "Template JSX Mantine. Accedi ai campi della risposta API tramite binding dei dati (ad es. data.name). Usa solo componenti consentiti. Vietati: constructor, __proto__, eval, Function, window, document."
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "Temperatura CPU",
-      "exampleLabelShort": "Temp CPU",
-      "exampleHeader": "Nome",
-      "exampleUnit": "°C",
-      "iconUrl": "https://...",
-      "url": "https://api.example.com/api/v1/status",
-      "headerName": "X-API-Key",
-      "jsonPath": "$.data.value",
-      "tablePath": "$.data.items",
-      "columnJsonPath": "$.nome",
-      "valuePath": "$.data.used",
-      "maxPath": "$.data.total",
-      "goodValues": "online, true, up",
-      "color": "blu"
-    },
-    "cardStyleOption": {
-      "filled": "Riempito",
-      "outline": "Contorno",
-      "subtle": "Tenue"
-    },
-    "layoutOption": {
-      "list": "Elenco",
-      "grid": "Griglia"
-    },
-    "sizeOption": {
-      "sm": "Piccolo",
-      "md": "Medio",
-      "lg": "Grande",
-      "xl": "Molto Grande"
-    },
-    "labelPositionOption": {
-      "above": "Sopra",
-      "below": "Sotto"
-    },
-    "fieldset": {
-      "general": "Generale",
-      "connection": "Connessione API",
-      "display": "Configurazione Visualizzazione"
-    },
-    "displayTypeDescription": {
-      "singleValue": "Mostra un singolo valore estratto con etichetta e unità",
-      "keyValue": "Mostra più valori etichettati affiancati",
-      "table": "Mostra righe di dati in formato tabella",
-      "statGrid": "Card statistiche colorate in una griglia, come i widget Pi-Hole o Speedtest",
-      "progressBars": "Barre di progresso che mostrano utilizzo o completamento, per disco, memoria, quote",
-      "statusIndicator": "Indicatori di stato colorati che mostrano online/offline o stati di salute",
-      "countGrid": "Contatori compatti numero + etichetta in una griglia ristretta",
-      "raw": "Output JSON formattato per il debug",
-      "actionButton": "Un pulsante che attiva una richiesta al clic",
-      "customJsx": "Layout JSX personalizzato che usa componenti Mantine consentiti con binding completo dei dati API"
-    },
-    "method": {
-      "GET": "GET",
-      "POST": "POST",
-      "PUT": "PUT",
-      "DELETE": "DELETE",
-      "PATCH": "PATCH"
-    },
-    "authType": {
-      "none": "Nessuno",
-      "bearer": "Token Bearer",
-      "basic": "Autenticazione Base",
-      "apiKeyHeader": "Chiave API (Header)",
-      "apiKeyQuery": "Chiave API (Query)"
-    },
-    "displayType": {
-      "singleValue": "Valore Singolo",
-      "keyValue": "Chiave-Valore",
-      "table": "Tabella",
-      "statGrid": "Griglia Statistiche",
-      "progressBars": "Barre di Progresso",
-      "statusIndicator": "Indicatore di Stato",
-      "countGrid": "Griglia Conteggi",
-      "raw": "JSON Grezzo",
-      "actionButton": "Pulsante Azione",
-      "customJsx": "JSX Personalizzato"
-    },
-    "secret": {
-      "apiKey": "Chiave API / Token",
-      "username": "Nome utente",
-      "password": "Password",
-      "savedPlaceholder": "••••••• (salvato, lascia vuoto per mantenere)"
-    },
-    "preview": {
-      "title": "Anteprima",
-      "test": "Test",
-      "hint": "Fai clic su Test per visualizzare in anteprima la risposta dell'API con la configurazione attuale.",
-      "rawResponse": "Risposta JSON grezza"
+      "iconUrl": "URL Icona"
     },
     "notification": {
       "created": "Widget \"{name}\" creato con successo.",
@@ -868,9 +728,6 @@
       "deleted": "Widget \"{name}\" eliminato.",
       "imported": "Widget importato con successo.",
       "aiPromptCopied": "Prompt IA copiato negli appunti",
-      "aiPromptDescription": "Copia un prompt predefinito da incollare in qualsiasi chatbot IA (ChatGPT, Claude, Gemini...). Include lo schema completo del widget e la risposta della tua API, in modo che l'IA possa generare una configurazione JSON pronta per l'importazione.",
-      "aiPromptCopy": "Copia negli appunti",
-      "aiPromptNoResponse": "Suggerimento: esegui prima un test per includere la risposta della tua API nel prompt e ottenere risultati migliori.",
       "aiPromptCopyError": "Impossibile copiare il prompt negli appunti. Il tuo browser potrebbe non supportare questa funzione.",
       "createError": "Impossibile creare il widget. Verifica che l'endpoint dell'API sia raggiungibile.",
       "updateError": "Impossibile aggiornare il widget. Le modifiche non sono state salvate.",
@@ -883,14 +740,6 @@
       "previewError": "Impossibile recuperare l'anteprima. Controlla l'URL e riprova.",
       "executed": "Azione eseguita con successo.",
       "executeError": "Azione non riuscita: {error}"
-    },
-    "table": {
-      "name": "Nome",
-      "url": "URL",
-      "display": "Visualizzazione"
-    },
-    "widget": {
-      "disabled": "Questo widget è disabilitato"
     }
   },
   "integration": {
@@ -1549,10 +1398,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Nuova sezione dinamica",
-        "remove": "Rimuovi sezione dinamica"
+        "create": "Nuovo container",
+        "remove": "Rimuovi container"
       },
       "option": {
         "title": {
@@ -1566,48 +1415,8 @@
         }
       },
       "remove": {
-        "title": "Rimuovi sezione dinamica",
-        "message": "Vuoi davvero rimuovere questa sezione dinamica? Gli elementi verranno spostati nella stessa posizione nella sezione padre."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Nome"
-        }
-      },
-      "action": {
-        "create": "Nuova categoria",
-        "edit": "Rinomina categoria",
-        "remove": "Rimuovi categoria",
-        "moveUp": "Sposta in alto",
-        "moveDown": "Sposta in basso",
-        "createAbove": "Nuova categoria sopra",
-        "createBelow": "Nuova categoria sotto",
-        "openAllInNewTabs": "Apri tutto in schede"
-      },
-      "create": {
-        "title": "Nuova categoria",
-        "submit": "Aggiungi categoria"
-      },
-      "remove": {
-        "title": "Rimuovi categoria",
-        "message": "Sei sicuro di voler rimuovere la categoria {name}?"
-      },
-      "edit": {
-        "title": "Rinomina categoria",
-        "submit": "Rinomina categoria"
-      },
-      "menu": {
-        "label": {
-          "create": "Nuova categoria",
-          "changePosition": "Cambia posizione",
-          "settings": "Impostazioni"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Apri tutto in schede",
-        "text": "Alcuni browser potrebbero bloccare l'apertura multipla delle schede per motivi di sicurezza. Homarr non è riuscito ad aprire tutte le finestre perché il browser ha bloccato questa azione. Consenti l'apertura di finestre pop-up e riprova."
+        "title": "Rimuovi container",
+        "message": "Vuoi davvero rimuovere questo container? Gli elementi verranno spostati nella stessa posizione nella sezione padre."
       }
     }
   },
@@ -2428,10 +2237,21 @@
         },
         "descendingDefaultSort": {
           "label": "Inverti ordinamento"
+        },
+        "columnOrder": {
+          "label": "Ordine delle colonne"
+        },
+        "columnWidths": {
+          "label": "Larghezza delle colonne"
         }
       },
       "error": {
-        "internalServerError": "Recupero statistiche container non riuscito"
+        "internalServerError": "Recupero statistiche container non riuscito",
+        "layoutSaveTitle": "Layout della tabella non salvato",
+        "layoutSaveMessage": "Impossibile salvare il layout della tabella Docker. Prova a spostare o ridimensionare nuovamente la colonna."
+      },
+      "empty": {
+        "noContainers": "Nessun container trovato"
       }
     },
     "coolify": {
@@ -2725,8 +2545,20 @@
         "showOnlyPlaying": {
           "label": "Mostra solo attualmente in riproduzione",
           "description": "La disabilitazione non funzionerà per Plex"
+        },
+        "showBitrate": {
+          "label": "Mostra bitrate",
+          "description": "Mostra il bitrate di riproduzione corrente accanto alla posizione"
+        },
+        "showLocation": {
+          "label": "Mostra posizione",
+          "description": "Mostra se lo stream si trova sulla tua LAN o WAN"
         }
       },
+      "footer": {
+        "streams": "{count, plural, one {# stream attivo} other {# stream attivi}}",
+        "totalBitrate": "Totale: {bitrate}"
+      },
       "items": {
         "currentlyPlaying": "Attualmente in riproduzione",
         "user": "Utente",
@@ -2734,6 +2566,9 @@
         "id": "Id",
         "status": "Stato",
         "directPlay": "Riproduzione diretta",
+        "directStream": "Streaming diretto",
+        "transcodeVideo": "Transcodifica video",
+        "transcodeAudio": "Transcodifica audio",
         "transcoding": "Transcodifica",
         "paused": "In pausa",
         "remaining": "{minutes} min rimanenti",
@@ -3768,18 +3603,6 @@
           "label": "Mostra brani",
           "description": "Mostra il numero totale di brani nella tua libreria musicale (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "Mostra in riproduzione",
-          "description": "Mostra le tracce attualmente in riproduzione (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "Mostra elenco in riproduzione",
-          "description": "Mostra le singole tracce invece del solo conteggio degli stream attivi (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "Numero massimo elementi in riproduzione",
-          "description": "Numero massimo di tracce da mostrare nell'elenco in riproduzione (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "Mostra conteggio librerie",
           "description": "Mostra il numero di librerie sulla tua istanza (Audiobookshelf)"
@@ -3813,8 +3636,6 @@
       "podcasts": "Podcast",
       "listeningTime": "Tempo di Ascolto",
       "activeSessions": "Sessioni Attive",
-      "nowPlaying": "In Riproduzione",
-      "nowPlayingCount": "{count, plural, one {# stream} other {# streams}}",
       "error": {
         "internalServerError": "Impossibile recuperare i dati delle statistiche audio"
       }
@@ -3902,12 +3723,7 @@
         }
       },
       "noDefinition": "Nessuna definizione selezionata",
-      "definitionNotFound": "Definizione del widget non trovata. Potrebbe essere stata eliminata.",
-      "noDisplayOutput": "Nessun output di visualizzazione",
-      "executeConfirm": "Sei sicuro di voler eseguire questa azione?",
-      "executing": "Esecuzione in corso...",
-      "executeSuccess": "Azione eseguita con successo",
-      "executeFailed": "Azione non riuscita. Controlla la configurazione del widget."
+      "definitionNotFound": "Definizione del widget non trovata. Potrebbe essere stata eliminata."
     },
     "beszelSystemTable": {
       "name": "Sistemi Beszel (Tabella)",
@@ -3954,11 +3770,19 @@
         },
         "showAgent": {
           "label": "Mostra versione agente"
+        },
+        "columnOrder": {
+          "label": "Ordine delle colonne"
+        },
+        "columnWidths": {
+          "label": "Larghezza delle colonne"
         }
       },
       "noRecords": "Nessun sistema trovato",
       "error": {
-        "internalServerError": "Impossibile connettersi a Beszel. Controlla le tue impostazioni di integrazione."
+        "internalServerError": "Impossibile connettersi a Beszel. Controlla le tue impostazioni di integrazione.",
+        "layoutSaveTitle": "Impossibile salvare il layout della tabella",
+        "layoutSaveMessage": "Impossibile salvare l'ordine o la larghezza delle colonne. Riprova."
       },
       "column": {
         "system": "Sistema",
@@ -4531,6 +4355,7 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Home",
         "boards": "Board",
         "apps": "Applicazioni",
@@ -5356,6 +5181,7 @@
       },
       "remove": {
         "label": "Rimuovi",
+        "confirm": "Fare clic di nuovo per rimuovere definitivamente",
         "notification": {
           "success": {
             "title": "Containers rimossi",
@@ -5673,6 +5499,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Gestisci",
       "boards": {
         "label": "Board"
diff --git a/packages/translation/src/lang/ja.json b/packages/translation/src/lang/ja.json
index a03ac115f..42c3cc4a4 100644
--- a/packages/translation/src/lang/ja.json
+++ b/packages/translation/src/lang/ja.json
@@ -688,211 +688,6 @@
       "add": "アプリを追加する"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "新しいダイナミックセクション",
-        "remove": "ダイナミックセクションを削除する"
+        "create": "新しいコンテナー",
+        "remove": "コンテナーを削除する"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "ダイナミックセクションの削除",
-        "message": "この動的セクションを削除してもよろしいですか？アイテムは親セクションの同じ場所に移動されます。"
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "名称"
-        }
-      },
-      "action": {
-        "create": "新しいカテゴリー",
-        "edit": "カテゴリー名の変更",
-        "remove": "カテゴリーを削除",
-        "moveUp": "上に移動",
-        "moveDown": "下へ移動",
-        "createAbove": "上に新しいカテゴリー",
-        "createBelow": "下に新しいカテゴリ",
-        "openAllInNewTabs": "すべてのタブを開く"
-      },
-      "create": {
-        "title": "新しいカテゴリー",
-        "submit": "カテゴリーを追加"
-      },
-      "remove": {
-        "title": "カテゴリーの削除",
-        "message": "カテゴリー {name} を削除してもよろしいですか？"
-      },
-      "edit": {
-        "title": "カテゴリー名変更",
-        "submit": "カテゴリー名を変更"
-      },
-      "menu": {
-        "label": {
-          "create": "新しいカテゴリー",
-          "changePosition": "ポジションを変更する",
-          "settings": ""
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "すべてのタブを開く",
-        "text": "一部のブラウザーはセキュリティ上の理由からタブの一括開封をブロックすることがあります。 あなたのブラウザがこの操作をブロックしたため、Homarr はすべてのウィンドウを開くことができませんでした。「ポップアップウィンドウを開く」を許可して再試行してください。"
+        "title": "コンテナーの削除",
+        "message": "このコンテナーを削除してもよろしいですか？アイテムは親セクションの同じ場所に移動されます。"
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": "並び替えを反転"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "コンテナステータスの取得に失敗しました"
+        "internalServerError": "コンテナステータスの取得に失敗しました",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "現在再生中のみ表示",
           "description": "これを無効にすると plex では動作しません"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "再生中の曲",
         "user": "ユーザー",
@@ -2734,6 +2512,9 @@
         "id": "Id",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -3768,18 +3549,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3582,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3656,6 @@
         "unhealthy": "異常"
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "",
       "description": "",
@@ -3954,11 +3701,19 @@
         },
         "showAgent": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "",
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "ホーム",
         "boards": "ボード",
         "apps": "アプリ",
         "integrations": "連携機能",
-        "customWidgets": "",
         "searchEngies": "検索エンジン",
         "medias": "メディア",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "削除",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "コンテナー削除",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "管理",
       "boards": {
         "label": "ボード"
@@ -5707,18 +5466,6 @@
           "label": "編集"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "ユーザー",
         "create": {
diff --git a/packages/translation/src/lang/ko.json b/packages/translation/src/lang/ko.json
index 4ea9e31c1..61ee9eea0 100644
--- a/packages/translation/src/lang/ko.json
+++ b/packages/translation/src/lang/ko.json
@@ -710,14 +710,7 @@
       "delete": "사용자 지정 위젯 삭제",
       "deleteConfirm": "\"{name}\"을(를) 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.",
       "export": "내보내기",
-      "addMapping": "매핑 추가",
-      "addColumn": "열 추가",
       "edit": "편집",
-      "removeMapping": "매핑 제거",
-      "removeColumn": "열 제거",
-      "addItem": "항목 추가",
-      "removeItem": "항목 제거",
-      "addBar": "바 추가",
       "duplicate": "복사",
       "copyAiPrompt": "AI 프롬프트 복사",
       "enable": "활성화",
@@ -727,140 +720,7 @@
     "field": {
       "name": "이름",
       "description": "설명",
-      "iconUrl": "아이콘 URL",
-      "url": "URL",
-      "authType": "인증 유형",
-      "headerName": "헤더/쿼리 파라미터 이름",
-      "method": "메서드",
-      "requestBody": "요청 본문",
-      "displayType": "표시 유형",
-      "jsonPath": "JSON 경로",
-      "jsonPathHint": "JSONPath 문법으로 값을 추출하십시오. 예: $.data.temperature 또는 $.items[0].name",
-      "label": "레이블",
-      "unit": "단위",
-      "mappings": "매핑",
-      "tablePath": "JSON 경로 배열",
-      "tablePathHint": "응답에서 배열이 위치한 경로입니다. 예: $.data.items",
-      "columns": "열",
-      "header": "헤더",
-      "items": "항목",
-      "gridColumns": "그리드 열 개수",
-      "cardStyle": "카드 스타일",
-      "bars": "바",
-      "valuePath": "JSON 경로 값",
-      "maxPath": "JSON 경로 최댓값",
-      "showPercentage": "백분율 표시",
-      "barSize": "바 크기",
-      "goodValues": "정상 값(쉼표로 구분)",
-      "dotSize": "점 크기",
-      "valueSize": "값 크기",
-      "labelPosition": "레이블 위치",
-      "kvLayout": "레이아웃",
-      "striped": "줄무늬 행",
-      "compact": "컴팩트 모드",
-      "maxHeight": "최대 높이 (px)",
-      "color": "색상",
-      "buttonLabel": "버튼 명칭",
-      "buttonColor": "버튼 색상",
-      "confirmText": "확인 텍스트",
-      "confirmTextHint": "설정하면 요청을 실행하기 전에 확인 대화상자가 표시됩니다",
-      "successMessage": "성공 메세지",
-      "successMessageHint": "실행 성공 후 표시되는 메세지",
-      "enabled": "활성화됨",
-      "template": {
-        "label": "JSX 템플릿",
-        "description": "Mantine JSX 템플릿. 데이터 바인딩(예: data.name)을 통해 API 응답 필드에 액세스합니다. 허용된 구성 요소만 사용하십시오. 금지: constructor, __proto__, eval, Function, window, document."
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "CPU 온도",
-      "exampleLabelShort": "CPU 온도",
-      "exampleHeader": "이름",
-      "exampleUnit": "°C",
-      "iconUrl": "https://...",
-      "url": "https://api.example.com/api/v1/status",
-      "headerName": "X-API-Key",
-      "jsonPath": "$.data.value",
-      "tablePath": "$.data.items",
-      "columnJsonPath": "$.name",
-      "valuePath": "$.data.used",
-      "maxPath": "$.data.total",
-      "goodValues": "online, true, up",
-      "color": "파랑"
-    },
-    "cardStyleOption": {
-      "filled": "채워짐",
-      "outline": "외곽선",
-      "subtle": "미묘한"
-    },
-    "layoutOption": {
-      "list": "리스트",
-      "grid": "그리드"
-    },
-    "sizeOption": {
-      "sm": "작음",
-      "md": "중간",
-      "lg": "큼",
-      "xl": "매우 큼"
-    },
-    "labelPositionOption": {
-      "above": "위",
-      "below": "아래"
-    },
-    "fieldset": {
-      "general": "일반",
-      "connection": "API 연결",
-      "display": "표시 설정"
-    },
-    "displayTypeDescription": {
-      "singleValue": "레이블과 단위가 있는 하나의 추출된 값을 표시합니다",
-      "keyValue": "여러 레이블이 지정된 값을 나란히 표시합니다",
-      "table": "테이블 형식으로 데이터 행을 표시합니다",
-      "statGrid": "그리드의 색상이 지정된 통계 카드 — Pi-Hole 또는 Speedtest 위젯과 유사",
-      "progressBars": "사용량 또는 완료율을 표시하는 진행률 표시줄 — 디스크, 메모리, 할당량용",
-      "statusIndicator": "온라인/오프라인 또는 상태를 표시하는 색상 상태 점",
-      "countGrid": "좁은 그리드에 작은 숫자 + 레이블 카운터",
-      "raw": "디버깅을 위한 예쁘게 출력된 JSON",
-      "actionButton": "클릭 시 요청을 트리거하는 버튼",
-      "customJsx": "전체 API 데이터 바인딩과 함께 허용된 Mantine 구성 요소를 사용하는 사용자 정의 JSX 레이아웃"
-    },
-    "method": {
-      "GET": "GET",
-      "POST": "POST",
-      "PUT": "PUT",
-      "DELETE": "DELETE",
-      "PATCH": "PATCH"
-    },
-    "authType": {
-      "none": "없음",
-      "bearer": "Bearer 토큰",
-      "basic": "기본 인증",
-      "apiKeyHeader": "API 키(헤더)",
-      "apiKeyQuery": "API 키(쿼리)"
-    },
-    "displayType": {
-      "singleValue": "단일 값",
-      "keyValue": "키-값",
-      "table": "테이블",
-      "statGrid": "스택 그리드",
-      "progressBars": "진행 바",
-      "statusIndicator": "상태 인디케이터",
-      "countGrid": "카운트 그리드",
-      "raw": "원시 JSON",
-      "actionButton": "동작 버튼",
-      "customJsx": "사용자 지정 JSX"
-    },
-    "secret": {
-      "apiKey": "API 키/토큰",
-      "username": "사용자명",
-      "password": "비밀번호",
-      "savedPlaceholder": "••••••• (저장됨, 유지하려면 공백)"
-    },
-    "preview": {
-      "title": "미리보기",
-      "test": "테스트",
-      "hint": "현재 설정으로 API 응답을 미리 보려면 테스트를 클릭하십시오.",
-      "rawResponse": "원본 JSON 응답"
+      "iconUrl": "아이콘 URL"
     },
     "notification": {
       "created": "\"{name}\" 위젯 생성 완료.",
@@ -868,9 +728,6 @@
       "deleted": "\"{name}\" 위젯 삭제 완료.",
       "imported": "위젯 가져오기 완료.",
       "aiPromptCopied": "AI 프롬프트 클립보드에 복사됨",
-      "aiPromptDescription": "사전 제작된 프롬프트를 복사하여 AI 챗봇(ChatGPT, Claude, Gemini 등)에 붙여넣습니다. 전체 위젯 스키마 및 API 응답이 포함되어 있으므로 즉시 가져올 수 있는 JSON 설정을 AI가 생성할 수 있습니다.",
-      "aiPromptCopy": "클립보드에 복사",
-      "aiPromptNoResponse": "팁: 더 나은 결과를 얻기 위해 먼저 테스트로 프롬프트에 API 응답을 포함하십시오.",
       "aiPromptCopyError": "프롬프트 클립보드 복사 실패. 브라우저에서 이 기능을 지원하지 않을 수도 있습니다.",
       "createError": "위젯 생성 실패. API 엔드포인트에 도달할 수 있는지 확인해 보십시오.",
       "updateError": "위젯 업데이트 실패. 변경 사항이 저장되지 않습니다.",
@@ -883,14 +740,6 @@
       "previewError": "미리보기 가져오기 실패. URL을 확인한 후 다시 시도해 주십시오.",
       "executed": "작업 실행 완료.",
       "executeError": "작업 실패: {error}"
-    },
-    "table": {
-      "name": "이름",
-      "url": "URL",
-      "display": "표시"
-    },
-    "widget": {
-      "disabled": "위젯 비활성화됨"
     }
   },
   "integration": {
@@ -1549,10 +1398,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "새 동적 섹션",
-        "remove": "동적 섹션 제거"
+        "create": "새 컨테이너",
+        "remove": "컨테이너 제거"
       },
       "option": {
         "title": {
@@ -1566,48 +1415,8 @@
         }
       },
       "remove": {
-        "title": "동적 섹션 제거",
-        "message": "이 동적 섹션을 제거하시겠습니까? 항목은 상위 섹션의 동일한 위치로 이동합니다."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "이름"
-        }
-      },
-      "action": {
-        "create": "새 카테고리",
-        "edit": "카테고리 이름 변경",
-        "remove": "카테고리 제거",
-        "moveUp": "위로 이동",
-        "moveDown": "아래로 이동",
-        "createAbove": "위에 새 카테고리 생성",
-        "createBelow": "아래 새 카테고리 생성",
-        "openAllInNewTabs": "탭에서 모두 열기"
-      },
-      "create": {
-        "title": "새 카테고리",
-        "submit": "카테고리 추가"
-      },
-      "remove": {
-        "title": "카테고리 제거",
-        "message": "{name} 카테고리를 제거하시겠습니까?"
-      },
-      "edit": {
-        "title": "카테고리 이름 변경",
-        "submit": "카테고리 이름 변경"
-      },
-      "menu": {
-        "label": {
-          "create": "새 카테고리",
-          "changePosition": "위치 변경",
-          "settings": "설정"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "탭에서 모두 열기",
-        "text": "일부 브라우저는 보안상의 이유로 탭의 대량 열기를 차단할 수 있습니다. 브라우저가 이 작업을 차단했기 때문에 Homarr가 모든 창을 열지 못했습니다. \"팝업 창 열기\"를 허용한 후 다시 시도해 주십시오."
+        "title": "컨테이너 제거",
+        "message": "이 컨테이너를 제거하시겠습니까? 항목은 상위 섹션의 동일한 위치로 이동합니다."
       }
     }
   },
@@ -2428,10 +2237,21 @@
         },
         "descendingDefaultSort": {
           "label": "역순 정렬"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "컨테이너 상태 불러오기 실패"
+        "internalServerError": "컨테이너 상태 불러오기 실패",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2545,20 @@
         "showOnlyPlaying": {
           "label": "현재 재생 중 항목만 표시",
           "description": "비활성화 옵션은 plex에서는 지원되지 않음"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "현재 재생 중",
         "user": "사용자",
@@ -2734,6 +2566,9 @@
         "id": "아이디",
         "status": "상태",
         "directPlay": "직접 재생",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "트랜스코딩",
         "paused": "일시 중지됨",
         "remaining": "남은 시간 {minutes}분",
@@ -2802,193 +2637,6 @@
         "internalServerError": "Paperless-ngx 데이터를 가져오지 못함"
       }
     },
-    "patchmon": {
-      "name": "PatchMon",
-      "description": "PatchMon의 호스트 패치 상태 개요",
-      "title": "PatchMon 통계",
-      "totalHosts": "총 호스트",
-      "hostsNeedingUpdates": "업데이트 필요",
-      "securityUpdates": "보안 업데이트",
-      "upToDateHosts": "최신 상태의 호스트",
-      "hostsWithSecurityUpdates": "보안 업데이트가 필요한 호스트",
-      "recentUpdates24h": "업데이트 (24시간)",
-      "totalOutdatedPackages": "오래된 패키지",
-      "totalRepos": "저장소",
-      "osDistribution": "OS 배포판",
-      "compliance": "패치 준수",
-      "complianceRatio": "{upToDate} / {total}",
-      "lastUpdated": "{time} 업데이트됨",
-      "option": {
-        "showTotalHosts": {
-          "label": "총 호스트 표시",
-          "description": "모니터링되는 총 호스트 수 표시"
-        },
-        "showHostsNeedingUpdates": {
-          "label": "업데이트가 필요한 호스트 표시",
-          "description": "하나 이상의 오래된 패키지가 있는 호스트 표시"
-        },
-        "showSecurityUpdates": {
-          "label": "보안 업데이트 표시",
-          "description": "사용 가능한 총 보안 업데이트 수 표시"
-        },
-        "showUpToDateHosts": {
-          "label": "최신 호스트 표시",
-          "description": "오래된 패키지가 없는 호스트 표시"
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "보안 업데이트가 필요한 호스트 표시",
-          "description": "보안 패치가 필요한 호스트 표시"
-        },
-        "showRecentUpdates24h": {
-          "label": "최근 업데이트 (24시간) 표시",
-          "description": "지난 24시간 동안 적용된 업데이트 수 표시"
-        },
-        "showTotalOutdatedPackages": {
-          "label": "오래된 패키지 표시",
-          "description": "모든 호스트에서의 총 오래된 패키지 수 표시"
-        },
-        "showTotalRepos": {
-          "label": "저장소 표시",
-          "description": "모니터링되는 활성 저장소 수 표시"
-        },
-        "enableThresholdColors": {
-          "label": "임계값 색상 활성화",
-          "description": "심각도 사전 설정에 따라 통계 값을 녹색, 노란색 또는 빨간색으로 표시"
-        },
-        "useCustomThresholds": {
-          "label": "고급 임계값",
-          "description": "절대 개수 또는 전체 호스트 대비 백분율을 사용하여 통계별 경고 및 위험 임계값 사용자 정의"
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "절대 개수",
-            "percent": "전체 호스트 대비 백분율"
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "업데이트 필요 임계값 모드",
-          "description": "업데이트 필요 개수를 절대값 또는 전체 호스트 대비 백분율로 비교"
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "업데이트 필요 경고 임계값",
-          "description": "이 임계값에 도달하면 노란색으로 표시"
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "업데이트 필요 위험 임계값",
-          "description": "이 임계값에 도달하면 빨간색으로 표시"
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "보안 업데이트 임계값 모드",
-          "description": "보안 업데이트 개수를 절대값 또는 전체 호스트 대비 백분율로 비교"
-        },
-        "securityUpdatesWarningAt": {
-          "label": "보안 업데이트 경고 임계값",
-          "description": "이 임계값에 도달하면 노란색으로 표시"
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "보안 업데이트 위험 임계값",
-          "description": "이 임계값에 도달하면 빨간색으로 표시"
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "보안 업데이트가 있는 호스트 임계값 모드",
-          "description": "호스트 개수를 절대값 또는 전체 호스트 대비 백분율로 비교"
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "보안 업데이트가 있는 호스트 경고 임계값",
-          "description": "이 임계값에 도달하면 노란색으로 표시"
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "보안 업데이트가 있는 호스트 위험 임계값",
-          "description": "이 임계값에 도달하면 빨간색으로 표시"
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "최신 호스트 임계값 모드",
-          "description": "최신 호스트 개수를 절대값 또는 전체 호스트 대비 백분율로 비교"
-        },
-        "upToDateHostsWarningAt": {
-          "label": "최신 호스트 경고 임계값",
-          "description": "값이 이 임계값 이상이지만 전체 적용 범위 미만일 때 노란색으로 표시"
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "최신 호스트 위험 임계값",
-          "description": "값이 이 임계값 미만으로 떨어지면 빨간색으로 표시"
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "오래된 패키지 임계값 모드",
-          "description": "오래된 패키지 개수를 절대값 또는 전체 호스트 대비 백분율로 비교"
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "오래된 패키지 경고 임계값",
-          "description": "이 임계값에 도달하면 노란색으로 표시"
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "오래된 패키지 위험 임계값",
-          "description": "이 임계값에 도달하면 빨간색으로 표시"
-        },
-        "showOsDistribution": {
-          "label": "OS 배포판 표시",
-          "description": "운영 체제별로 모니터링되는 호스트 분석 표시"
-        },
-        "osDistributionLimit": {
-          "label": "OS 배포판 제한",
-          "description": "표시할 최대 운영 체제 수",
-          "option": {
-            "3": "상위 3개",
-            "5": "상위 5개",
-            "10": "상위 10개",
-            "all": "모두"
-          }
-        },
-        "showOsVersion": {
-          "label": "OS 버전 표시",
-          "description": "사용 가능한 경우 각 배포판 레이블에 OS 버전 추가"
-        },
-        "showComplianceHero": {
-          "label": "준수 상태 표시",
-          "description": "최신 호스트의 백분율을 표시하는 준수 링 표시"
-        },
-        "osDisplayMode": {
-          "label": "OS 표시 모드",
-          "description": "운영 체제 배포판 표시 방법 선택",
-          "option": {
-            "bars": "가로 막대",
-            "donut": "도넛 차트"
-          }
-        }
-      },
-      "error": {
-        "internalServerError": "PatchMon 데이터를 가져오지 못했습니다"
-      }
-    },
-    "bazarr": {
-      "name": "Bazarr",
-      "description": "Bazarr 인스턴스의 누락된 자막 및 상태 개요",
-      "episodes": "누락된 에피소드",
-      "movies": "누락된 영화",
-      "providers": "제공자 문제",
-      "status": "상태 문제",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "누락된 에피소드 표시",
-          "description": "누락된 자막이 있는 에피소드 수 표시"
-        },
-        "showMissingMovies": {
-          "label": "누락된 영화 표시",
-          "description": "누락된 자막이 있는 영화 수 표시"
-        },
-        "showProviderIssues": {
-          "label": "제공자 문제 표시",
-          "description": "문제가 있는 자막 제공자 수 표시"
-        },
-        "showHealthIssues": {
-          "label": "상태 문제 표시",
-          "description": "Bazarr 상태 문제 수 표시"
-        }
-      },
-      "error": {
-        "internalServerError": "Bazarr 데이터를 가져오지 못했습니다"
-      }
-    },
     "immich-serverStats": {
       "name": "Immich 서버 정보",
       "description": "Immich 인스턴스에 대한 정보",
@@ -3361,35 +3009,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "누락 및 대기 중인 미디어",
-      "description": "Radarr 및 Sonarr의 누락 및 대기 중인 영화와 에피소드 표시",
-      "option": {
-        "showMissing": {
-          "label": "누락된 항목 표시"
-        },
-        "showQueued": {
-          "label": "대기 중인 항목 표시"
-        },
-        "pageSize": {
-          "label": "페이지당 항목 수"
-        }
-      },
-      "tab": {
-        "missing": "누락",
-        "queued": "대기 중"
-      },
-      "type": {
-        "movie": "영화",
-        "episode": "에피소드"
-      },
-      "empty": {
-        "missing": "누락된 항목 없음",
-        "queued": "대기 중인 항목 없음",
-        "noTabsEnabled": "위젯 설정에서 최소한 하나의 탭을 활성화하세요"
-      },
-      "timeLeft": "남은 시간"
-    },
     "rssFeed": {
       "name": "RSS 피드",
       "description": "하나 이상의 일반 RSS, ATOM 또는 JSON 피드를 모니터링하고 표시합니다",
@@ -3718,40 +3337,6 @@
         "internalServerError": "가동 시간 데이터를 가져오지 못함"
       }
     },
-    "traefik": {
-      "name": "Traefik",
-      "description": "Traefik 라우터, 서비스, 미들웨어 및 진입점 개요",
-      "option": {
-        "showTcp": {
-          "label": "TCP 표시"
-        },
-        "showUdp": {
-          "label": "UDP 표시"
-        },
-        "showEntryPoints": {
-          "label": "진입점 표시"
-        }
-      },
-      "instances": "Traefik 인스턴스",
-      "versionUnknown": "버전 알 수 없음",
-      "summary": {
-        "routers": "라우터",
-        "entryPoints": "진입점"
-      },
-      "resource": {
-        "routers": "라우터",
-        "services": "서비스",
-        "middlewares": "미들웨어"
-      },
-      "status": {
-        "healthy": "정상",
-        "errors": "{count}개 오류",
-        "warnings": "{count}개 경고"
-      },
-      "error": {
-        "internalServerError": "Traefik 데이터를 가져오지 못함"
-      }
-    },
     "audioStats": {
       "name": "오디오 정보",
       "description": "Navidrome 또는 Audiobookshelf의 라이브러리 및 재생 정보",
@@ -3768,18 +3353,6 @@
           "label": "음원 표시",
           "description": "음악 라이브러리에 있는 음원 총 수를 표시 (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "현재 재생 중 표시",
-          "description": "현재 재생 중인 트랙을 표시 (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "현재 재생 목록 표시",
-          "description": "활성 스트림 수 대신 개별 트랙 표시 (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "최대 현재 재생 항목 수",
-          "description": "현재 재생 목록에 표시할 최대 트랙 수 (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "라이브러리 수 표시",
           "description": "인스턴스에 있는 라이브러리 수 표시 (Audiobookshelf)"
@@ -3813,8 +3386,6 @@
       "podcasts": "팟캐스트",
       "listeningTime": "청취 시간",
       "activeSessions": "활성 세션",
-      "nowPlaying": "현재 재생 중",
-      "nowPlayingCount": "{count, plural, one {# 스트림} other {# 스트림}}",
       "error": {
         "internalServerError": "오디오 정보 가져오기 실패"
       }
@@ -3889,26 +3460,6 @@
         "unhealthy": "비정상"
       }
     },
-    "customApi": {
-      "name": "사용자 지정 API",
-      "description": "사용자 지정 설정으로 외부 API 데이터를 표시합니다.",
-      "option": {
-        "definitionId": {
-          "label": "정의 ID"
-        },
-        "refreshInterval": {
-          "label": "새로고침 간격",
-          "description": "API에서 데이터를 다시 가져오는 빈도 (초 단위)"
-        }
-      },
-      "noDefinition": "선택한 정의 없음",
-      "definitionNotFound": "위젯 정의를 찾을 수 없습니다. 삭제되었을 수 있습니다.",
-      "noDisplayOutput": "디스플레이 출력 없음",
-      "executeConfirm": "이 작업을 삭제하시겠습니까?",
-      "executing": "실행 중...",
-      "executeSuccess": "작업 실행 완료",
-      "executeFailed": "작업 실패. 위젯 설정을 확인하십시오."
-    },
     "beszelSystemTable": {
       "name": "Beszel 시스템 (표)",
       "description": "정렬 가능한 열과 상태 표시기가 있는 모든 Beszel 모니터링 시스템의 표 보기",
@@ -3954,11 +3505,19 @@
         },
         "showAgent": {
           "label": "에이전트 버전 표시"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "시스템을 찾을 수 없음",
       "error": {
-        "internalServerError": "Beszel에 연결할 수 없습니다. 통합 설정을 확인하십시오."
+        "internalServerError": "Beszel에 연결할 수 없습니다. 통합 설정을 확인하십시오.",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "시스템",
@@ -4151,6 +3710,256 @@
           "subtitle": "Docker 컨테이너의 네트워크 트래픽"
         }
       }
+    },
+    "patchmon": {
+      "name": "PatchMon",
+      "description": "PatchMon의 호스트 패치 상태 개요",
+      "title": "PatchMon 통계",
+      "totalHosts": "총 호스트",
+      "hostsNeedingUpdates": "업데이트 필요",
+      "securityUpdates": "보안 업데이트",
+      "upToDateHosts": "최신 상태의 호스트",
+      "hostsWithSecurityUpdates": "보안 업데이트가 필요한 호스트",
+      "recentUpdates24h": "업데이트 (24시간)",
+      "totalOutdatedPackages": "오래된 패키지",
+      "totalRepos": "저장소",
+      "osDistribution": "OS 배포판",
+      "compliance": "패치 준수",
+      "complianceRatio": "{upToDate} / {total}",
+      "lastUpdated": "{time} 업데이트됨",
+      "option": {
+        "showTotalHosts": {
+          "label": "총 호스트 표시",
+          "description": "모니터링되는 총 호스트 수 표시"
+        },
+        "showHostsNeedingUpdates": {
+          "label": "업데이트가 필요한 호스트 표시",
+          "description": "하나 이상의 오래된 패키지가 있는 호스트 표시"
+        },
+        "showSecurityUpdates": {
+          "label": "보안 업데이트 표시",
+          "description": "사용 가능한 총 보안 업데이트 수 표시"
+        },
+        "showUpToDateHosts": {
+          "label": "최신 호스트 표시",
+          "description": "오래된 패키지가 없는 호스트 표시"
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "보안 업데이트가 필요한 호스트 표시",
+          "description": "보안 패치가 필요한 호스트 표시"
+        },
+        "showRecentUpdates24h": {
+          "label": "최근 업데이트 (24시간) 표시",
+          "description": "지난 24시간 동안 적용된 업데이트 수 표시"
+        },
+        "showTotalOutdatedPackages": {
+          "label": "오래된 패키지 표시",
+          "description": "모든 호스트에서의 총 오래된 패키지 수 표시"
+        },
+        "showTotalRepos": {
+          "label": "저장소 표시",
+          "description": "모니터링되는 활성 저장소 수 표시"
+        },
+        "enableThresholdColors": {
+          "label": "임계값 색상 활성화",
+          "description": "심각도 사전 설정에 따라 통계 값을 녹색, 노란색 또는 빨간색으로 표시"
+        },
+        "useCustomThresholds": {
+          "label": "고급 임계값",
+          "description": "절대 개수 또는 전체 호스트 대비 백분율을 사용하여 통계별 경고 및 위험 임계값 사용자 정의"
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "절대 개수",
+            "percent": "전체 호스트 대비 백분율"
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "업데이트 필요 임계값 모드",
+          "description": "업데이트 필요 개수를 절대값 또는 전체 호스트 대비 백분율로 비교"
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "업데이트 필요 경고 임계값",
+          "description": "이 임계값에 도달하면 노란색으로 표시"
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "업데이트 필요 위험 임계값",
+          "description": "이 임계값에 도달하면 빨간색으로 표시"
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "보안 업데이트 임계값 모드",
+          "description": "보안 업데이트 개수를 절대값 또는 전체 호스트 대비 백분율로 비교"
+        },
+        "securityUpdatesWarningAt": {
+          "label": "보안 업데이트 경고 임계값",
+          "description": "이 임계값에 도달하면 노란색으로 표시"
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "보안 업데이트 위험 임계값",
+          "description": "이 임계값에 도달하면 빨간색으로 표시"
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "보안 업데이트가 있는 호스트 임계값 모드",
+          "description": "호스트 개수를 절대값 또는 전체 호스트 대비 백분율로 비교"
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "보안 업데이트가 있는 호스트 경고 임계값",
+          "description": "이 임계값에 도달하면 노란색으로 표시"
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "보안 업데이트가 있는 호스트 위험 임계값",
+          "description": "이 임계값에 도달하면 빨간색으로 표시"
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "최신 호스트 임계값 모드",
+          "description": "최신 호스트 개수를 절대값 또는 전체 호스트 대비 백분율로 비교"
+        },
+        "upToDateHostsWarningAt": {
+          "label": "최신 호스트 경고 임계값",
+          "description": "값이 이 임계값 이상이지만 전체 적용 범위 미만일 때 노란색으로 표시"
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "최신 호스트 위험 임계값",
+          "description": "값이 이 임계값 미만으로 떨어지면 빨간색으로 표시"
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "오래된 패키지 임계값 모드",
+          "description": "오래된 패키지 개수를 절대값 또는 전체 호스트 대비 백분율로 비교"
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "오래된 패키지 경고 임계값",
+          "description": "이 임계값에 도달하면 노란색으로 표시"
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "오래된 패키지 위험 임계값",
+          "description": "이 임계값에 도달하면 빨간색으로 표시"
+        },
+        "showOsDistribution": {
+          "label": "OS 배포판 표시",
+          "description": "운영 체제별로 모니터링되는 호스트 분석 표시"
+        },
+        "osDistributionLimit": {
+          "label": "OS 배포판 제한",
+          "description": "표시할 최대 운영 체제 수",
+          "option": {
+            "3": "상위 3개",
+            "5": "상위 5개",
+            "10": "상위 10개",
+            "all": "모두"
+          }
+        },
+        "showOsVersion": {
+          "label": "OS 버전 표시",
+          "description": "사용 가능한 경우 각 배포판 레이블에 OS 버전 추가"
+        },
+        "showComplianceHero": {
+          "label": "준수 상태 표시",
+          "description": "최신 호스트의 백분율을 표시하는 준수 링 표시"
+        },
+        "osDisplayMode": {
+          "label": "OS 표시 모드",
+          "description": "운영 체제 배포판 표시 방법 선택",
+          "option": {
+            "bars": "가로 막대",
+            "donut": "도넛 차트"
+          }
+        }
+      },
+      "error": {
+        "internalServerError": "PatchMon 데이터를 가져오지 못했습니다"
+      }
+    },
+    "bazarr": {
+      "name": "Bazarr",
+      "description": "Bazarr 인스턴스의 누락된 자막 및 상태 개요",
+      "episodes": "누락된 에피소드",
+      "movies": "누락된 영화",
+      "providers": "제공자 문제",
+      "status": "상태 문제",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "누락된 에피소드 표시",
+          "description": "누락된 자막이 있는 에피소드 수 표시"
+        },
+        "showMissingMovies": {
+          "label": "누락된 영화 표시",
+          "description": "누락된 자막이 있는 영화 수 표시"
+        },
+        "showProviderIssues": {
+          "label": "제공자 문제 표시",
+          "description": "문제가 있는 자막 제공자 수 표시"
+        },
+        "showHealthIssues": {
+          "label": "상태 문제 표시",
+          "description": "Bazarr 상태 문제 수 표시"
+        }
+      },
+      "error": {
+        "internalServerError": "Bazarr 데이터를 가져오지 못했습니다"
+      }
+    },
+    "mediaMissing": {
+      "name": "누락 및 대기 중인 미디어",
+      "description": "Radarr 및 Sonarr의 누락 및 대기 중인 영화와 에피소드 표시",
+      "option": {
+        "showMissing": {
+          "label": "누락된 항목 표시"
+        },
+        "showQueued": {
+          "label": "대기 중인 항목 표시"
+        },
+        "pageSize": {
+          "label": "페이지당 항목 수"
+        }
+      },
+      "tab": {
+        "missing": "누락",
+        "queued": "대기 중"
+      },
+      "type": {
+        "movie": "영화",
+        "episode": "에피소드"
+      },
+      "empty": {
+        "missing": "누락된 항목 없음",
+        "queued": "대기 중인 항목 없음",
+        "noTabsEnabled": "위젯 설정에서 최소한 하나의 탭을 활성화하세요"
+      },
+      "timeLeft": "남은 시간"
+    },
+    "traefik": {
+      "name": "Traefik",
+      "description": "Traefik 라우터, 서비스, 미들웨어 및 진입점 개요",
+      "option": {
+        "showTcp": {
+          "label": "TCP 표시"
+        },
+        "showUdp": {
+          "label": "UDP 표시"
+        },
+        "showEntryPoints": {
+          "label": "진입점 표시"
+        }
+      },
+      "instances": "Traefik 인스턴스",
+      "versionUnknown": "버전 알 수 없음",
+      "summary": {
+        "routers": "라우터",
+        "entryPoints": "진입점"
+      },
+      "resource": {
+        "routers": "라우터",
+        "services": "서비스",
+        "middlewares": "미들웨어"
+      },
+      "status": {
+        "healthy": "정상",
+        "errors": "{count}개 오류",
+        "warnings": "{count}개 경고"
+      },
+      "error": {
+        "internalServerError": "Traefik 데이터를 가져오지 못함"
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4340,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "홈",
         "boards": "보드",
         "apps": "앱",
         "integrations": "통합",
-        "customWidgets": "사용자 지정 위젯",
         "searchEngies": "검색 엔진",
         "medias": "미디어",
         "users": {
@@ -5356,6 +5165,7 @@
       },
       "remove": {
         "label": "제거",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "컨테이너 제거됨",
@@ -5673,6 +5483,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "관리",
       "boards": {
         "label": "보드"
diff --git a/packages/translation/src/lang/lt.json b/packages/translation/src/lang/lt.json
index 1e3346892..f6a2ab085 100644
--- a/packages/translation/src/lang/lt.json
+++ b/packages/translation/src/lang/lt.json
@@ -688,211 +688,6 @@
       "add": ""
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Nauja dinaminė sekcija",
-        "remove": "Pašalinti dinaminę sekciją"
+        "create": "Naujas konteineris",
+        "remove": "Pašalinti konteinerį"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Pašalinti dinaminę sekciją",
-        "message": "Ar tikrai norite pašalinti šią dinaminę sekciją? Elementai bus perkelti į tą pačią vietą pirminėje sekcijoje."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Pavadinimas"
-        }
-      },
-      "action": {
-        "create": "Nauja kategorija",
-        "edit": "Pervardyti kategoriją",
-        "remove": "Pašalinti kategoriją",
-        "moveUp": "Pakelti aukštyn",
-        "moveDown": "Perkelti žemyn",
-        "createAbove": "Nauja kategorija aukščiau",
-        "createBelow": "Nauja kategorija žemiau",
-        "openAllInNewTabs": ""
-      },
-      "create": {
-        "title": "Nauja kategorija",
-        "submit": "Pridėti kategoriją"
-      },
-      "remove": {
-        "title": "Pašalinti kategoriją",
-        "message": "Ar tikrai norite pašalinti kategoriją {name}?"
-      },
-      "edit": {
-        "title": "Pervardyti kategoriją",
-        "submit": "Pervardyti kategoriją"
-      },
-      "menu": {
-        "label": {
-          "create": "Nauja kategorija",
-          "changePosition": "Keisti poziciją",
-          "settings": "Nustatymai"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "",
-        "text": ""
+        "title": "Pašalinti konteinerį",
+        "message": "Ar tikrai norite pašalinti šį konteinerį? Elementai bus perkelti į tą pačią vietą pirminėje sekcijoje."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "",
           "description": ""
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "",
         "user": "",
@@ -2734,6 +2512,9 @@
         "id": "",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -2802,193 +2583,6 @@
         "internalServerError": "Nepavyko gauti Paperless-ngx duomenų"
       }
     },
-    "patchmon": {
-      "name": "",
-      "description": "",
-      "title": "",
-      "totalHosts": "",
-      "hostsNeedingUpdates": "",
-      "securityUpdates": "",
-      "upToDateHosts": "",
-      "hostsWithSecurityUpdates": "",
-      "recentUpdates24h": "",
-      "totalOutdatedPackages": "",
-      "totalRepos": "",
-      "osDistribution": "",
-      "compliance": "",
-      "complianceRatio": "",
-      "lastUpdated": "",
-      "option": {
-        "showTotalHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsNeedingUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showUpToDateHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showRecentUpdates24h": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalOutdatedPackages": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalRepos": {
-          "label": "",
-          "description": ""
-        },
-        "enableThresholdColors": {
-          "label": "",
-          "description": ""
-        },
-        "useCustomThresholds": {
-          "label": "",
-          "description": ""
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "",
-            "percent": ""
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "showOsDistribution": {
-          "label": "",
-          "description": ""
-        },
-        "osDistributionLimit": {
-          "label": "",
-          "description": "",
-          "option": {
-            "3": "",
-            "5": "",
-            "10": "",
-            "all": ""
-          }
-        },
-        "showOsVersion": {
-          "label": "",
-          "description": ""
-        },
-        "showComplianceHero": {
-          "label": "",
-          "description": ""
-        },
-        "osDisplayMode": {
-          "label": "",
-          "description": "",
-          "option": {
-            "bars": "",
-            "donut": ""
-          }
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
-    "bazarr": {
-      "name": "",
-      "description": "",
-      "episodes": "",
-      "movies": "",
-      "providers": "",
-      "status": "",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "",
-          "description": ""
-        },
-        "showMissingMovies": {
-          "label": "",
-          "description": ""
-        },
-        "showProviderIssues": {
-          "label": "",
-          "description": ""
-        },
-        "showHealthIssues": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "immich-serverStats": {
       "name": "",
       "description": "",
@@ -3361,35 +2955,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showMissing": {
-          "label": ""
-        },
-        "showQueued": {
-          "label": ""
-        },
-        "pageSize": {
-          "label": ""
-        }
-      },
-      "tab": {
-        "missing": "",
-        "queued": ""
-      },
-      "type": {
-        "movie": "",
-        "episode": ""
-      },
-      "empty": {
-        "missing": "",
-        "queued": "",
-        "noTabsEnabled": ""
-      },
-      "timeLeft": ""
-    },
     "rssFeed": {
       "name": "RSS srautai",
       "description": "Stebėti ir rodyti vieną ar daugiau bendrų RSS, ATOM arba JSON srautų",
@@ -3718,40 +3283,6 @@
         "internalServerError": "Nepavyko gauti veikimo duomenų"
       }
     },
-    "traefik": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showTcp": {
-          "label": ""
-        },
-        "showUdp": {
-          "label": ""
-        },
-        "showEntryPoints": {
-          "label": ""
-        }
-      },
-      "instances": "",
-      "versionUnknown": "",
-      "summary": {
-        "routers": "",
-        "entryPoints": ""
-      },
-      "resource": {
-        "routers": "",
-        "services": "",
-        "middlewares": ""
-      },
-      "status": {
-        "healthy": "",
-        "errors": "",
-        "warnings": ""
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "audioStats": {
       "name": "Garso statistika",
       "description": "Bibliotekos ir atkūrimo statistika iš Navidrome arba Audiobookshelf",
@@ -3768,18 +3299,6 @@
           "label": "Rodyti dainas",
           "description": "Rodyti bendrą dainų skaičių savo muzikos bibliotekoje (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "Rodyti dabar grojamą",
-          "description": "Rodyti šiuo metu grojamas dainas (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "Rodyti dabar grojamų sąrašą",
-          "description": "Rodyti atskiras dainas vietoj tik aktyvių srautų skaičiaus (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "Maks. dabar grojamų elementų",
-          "description": "Didžiausias rodomų dainų skaičius dabar grojamų sąraše (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "Rodyti bibliotekų skaičių",
           "description": "Rodyti bibliotekų skaičių savo egzemplioriuje (Audiobookshelf)"
@@ -3813,8 +3332,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3406,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Beszel sistemos (lentelė)",
       "description": "Visų Beszel stebimų sistemų lentelės vaizdas su rūšiuojamais stulpeliais ir būsenos indikatoriais",
@@ -3954,11 +3451,19 @@
         },
         "showAgent": {
           "label": "Rodyti agento versiją"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Sistemų nerasta",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Sistema",
@@ -4151,6 +3656,256 @@
           "subtitle": "Docker konteinerių tinklo srautas"
         }
       }
+    },
+    "patchmon": {
+      "name": "",
+      "description": "",
+      "title": "",
+      "totalHosts": "",
+      "hostsNeedingUpdates": "",
+      "securityUpdates": "",
+      "upToDateHosts": "",
+      "hostsWithSecurityUpdates": "",
+      "recentUpdates24h": "",
+      "totalOutdatedPackages": "",
+      "totalRepos": "",
+      "osDistribution": "",
+      "compliance": "",
+      "complianceRatio": "",
+      "lastUpdated": "",
+      "option": {
+        "showTotalHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsNeedingUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showUpToDateHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showRecentUpdates24h": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalOutdatedPackages": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalRepos": {
+          "label": "",
+          "description": ""
+        },
+        "enableThresholdColors": {
+          "label": "",
+          "description": ""
+        },
+        "useCustomThresholds": {
+          "label": "",
+          "description": ""
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "",
+            "percent": ""
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "showOsDistribution": {
+          "label": "",
+          "description": ""
+        },
+        "osDistributionLimit": {
+          "label": "",
+          "description": "",
+          "option": {
+            "3": "",
+            "5": "",
+            "10": "",
+            "all": ""
+          }
+        },
+        "showOsVersion": {
+          "label": "",
+          "description": ""
+        },
+        "showComplianceHero": {
+          "label": "",
+          "description": ""
+        },
+        "osDisplayMode": {
+          "label": "",
+          "description": "",
+          "option": {
+            "bars": "",
+            "donut": ""
+          }
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "bazarr": {
+      "name": "",
+      "description": "",
+      "episodes": "",
+      "movies": "",
+      "providers": "",
+      "status": "",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "",
+          "description": ""
+        },
+        "showMissingMovies": {
+          "label": "",
+          "description": ""
+        },
+        "showProviderIssues": {
+          "label": "",
+          "description": ""
+        },
+        "showHealthIssues": {
+          "label": "",
+          "description": ""
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "mediaMissing": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showMissing": {
+          "label": ""
+        },
+        "showQueued": {
+          "label": ""
+        },
+        "pageSize": {
+          "label": ""
+        }
+      },
+      "tab": {
+        "missing": "",
+        "queued": ""
+      },
+      "type": {
+        "movie": "",
+        "episode": ""
+      },
+      "empty": {
+        "missing": "",
+        "queued": "",
+        "noTabsEnabled": ""
+      },
+      "timeLeft": ""
+    },
+    "traefik": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showTcp": {
+          "label": ""
+        },
+        "showUdp": {
+          "label": ""
+        },
+        "showEntryPoints": {
+          "label": ""
+        }
+      },
+      "instances": "",
+      "versionUnknown": "",
+      "summary": {
+        "routers": "",
+        "entryPoints": ""
+      },
+      "resource": {
+        "routers": "",
+        "services": "",
+        "middlewares": ""
+      },
+      "status": {
+        "healthy": "",
+        "errors": "",
+        "warnings": ""
+      },
+      "error": {
+        "internalServerError": ""
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Pagrindinis",
         "boards": "Lentos",
         "apps": "Programėlės",
         "integrations": "Integracijos",
-        "customWidgets": "",
         "searchEngies": "Paieškos sistemos",
         "medias": "Medijos",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Pašalinti",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Valdyti",
       "boards": {
         "label": "Lentos"
@@ -5707,18 +5466,6 @@
           "label": ""
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Vartotojai",
         "create": {
diff --git a/packages/translation/src/lang/lv.json b/packages/translation/src/lang/lv.json
index 366b9be38..04e7592b4 100644
--- a/packages/translation/src/lang/lv.json
+++ b/packages/translation/src/lang/lv.json
@@ -691,206 +691,11 @@
   "customWidget": {
     "page": {
       "list": {
-        "title": "Pielāgotie logrīki",
-        "noResults": "Vēl nav pielāgotu logrīku. Izveidojiet pirmo!",
         "loading": "Notiek ielāde..."
-      },
-      "create": {
-        "title": "Izveidot pielāgotu logrīku",
-        "subtitle": "Definējiet API URL, autentifikāciju un to, kā attēlot atbildes datus."
-      },
-      "edit": {
-        "title": "Rediģēt pielāgoto logrīku"
       }
     },
     "action": {
-      "create": "Izveidot",
-      "import": "Importēt",
-      "save": "Saglabāt",
-      "delete": "Dzēst pielāgoto logrīku",
-      "deleteConfirm": "Vai tiešām vēlaties dzēst \"{name}\"? Šo darbību nevar atsaukt.",
-      "export": "Eksportēt",
-      "addMapping": "Pievienot kartējumu",
-      "addColumn": "Pievienot kolonnu",
-      "edit": "Rediģēt",
-      "removeMapping": "Noņemt kartējumu",
-      "removeColumn": "Noņemt kolonnu",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
+      "create": "Izveidot"
     }
   },
   "integration": {
@@ -1549,10 +1354,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Jauna dinamiskā sadaļa",
-        "remove": "Noņemt dinamisko sadaļu"
+        "create": "Jauns konteiners",
+        "remove": "Noņemt konteineru"
       },
       "option": {
         "title": {
@@ -1566,48 +1371,8 @@
         }
       },
       "remove": {
-        "title": "Noņemt dinamisko sadaļu",
-        "message": "Vai esat pārliecināts, ka vēlaties noņemt šo dinamisko sadaļu? Vienumi tiks pārvietoti uz to pašu atrašanās vietu vecāku sadaļā."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Nosaukums"
-        }
-      },
-      "action": {
-        "create": "Jauna kategorija",
-        "edit": "Pārdēvēt kategoriju",
-        "remove": "Noņemt kategoriju",
-        "moveUp": "Virzīt augšup",
-        "moveDown": "Virzīt lejup",
-        "createAbove": "Jauna kategorija augšā",
-        "createBelow": "Jauna kategorija apakšā",
-        "openAllInNewTabs": ""
-      },
-      "create": {
-        "title": "Jauna kategorija",
-        "submit": "Pievienot kategoriju"
-      },
-      "remove": {
-        "title": "Noņemt kategoriju",
-        "message": "Vai esat pārliecināts, ka vēlaties noņemt kategoriju {name}?"
-      },
-      "edit": {
-        "title": "Pārdēvēt kategoriju",
-        "submit": "Pārdēvēt kategoriju"
-      },
-      "menu": {
-        "label": {
-          "create": "Jauna kategorija",
-          "changePosition": "Mainīt pozīciju",
-          "settings": "Iestatījumi"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "",
-        "text": ""
+        "title": "Noņemt konteineru",
+        "message": "Vai esat pārliecināts, ka vēlaties noņemt šo konteineru? Vienumi tiks pārvietoti uz to pašu atrašanās vietu vecāku sadaļā."
       }
     }
   },
@@ -2428,10 +2193,21 @@
         },
         "descendingDefaultSort": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2501,20 @@
         "showOnlyPlaying": {
           "label": "",
           "description": ""
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "",
         "user": "",
@@ -2734,6 +2522,9 @@
         "id": "",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -2802,193 +2593,6 @@
         "internalServerError": "Neizdevās iegūt Paperless-ngx datus"
       }
     },
-    "patchmon": {
-      "name": "",
-      "description": "",
-      "title": "",
-      "totalHosts": "",
-      "hostsNeedingUpdates": "",
-      "securityUpdates": "",
-      "upToDateHosts": "",
-      "hostsWithSecurityUpdates": "",
-      "recentUpdates24h": "",
-      "totalOutdatedPackages": "",
-      "totalRepos": "",
-      "osDistribution": "",
-      "compliance": "",
-      "complianceRatio": "",
-      "lastUpdated": "",
-      "option": {
-        "showTotalHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsNeedingUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showUpToDateHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showRecentUpdates24h": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalOutdatedPackages": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalRepos": {
-          "label": "",
-          "description": ""
-        },
-        "enableThresholdColors": {
-          "label": "",
-          "description": ""
-        },
-        "useCustomThresholds": {
-          "label": "",
-          "description": ""
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "",
-            "percent": ""
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "showOsDistribution": {
-          "label": "",
-          "description": ""
-        },
-        "osDistributionLimit": {
-          "label": "",
-          "description": "",
-          "option": {
-            "3": "",
-            "5": "",
-            "10": "",
-            "all": ""
-          }
-        },
-        "showOsVersion": {
-          "label": "",
-          "description": ""
-        },
-        "showComplianceHero": {
-          "label": "",
-          "description": ""
-        },
-        "osDisplayMode": {
-          "label": "",
-          "description": "",
-          "option": {
-            "bars": "",
-            "donut": ""
-          }
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
-    "bazarr": {
-      "name": "",
-      "description": "",
-      "episodes": "",
-      "movies": "",
-      "providers": "",
-      "status": "",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "",
-          "description": ""
-        },
-        "showMissingMovies": {
-          "label": "",
-          "description": ""
-        },
-        "showProviderIssues": {
-          "label": "",
-          "description": ""
-        },
-        "showHealthIssues": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "immich-serverStats": {
       "name": "",
       "description": "",
@@ -3361,35 +2965,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showMissing": {
-          "label": ""
-        },
-        "showQueued": {
-          "label": ""
-        },
-        "pageSize": {
-          "label": ""
-        }
-      },
-      "tab": {
-        "missing": "",
-        "queued": ""
-      },
-      "type": {
-        "movie": "",
-        "episode": ""
-      },
-      "empty": {
-        "missing": "",
-        "queued": "",
-        "noTabsEnabled": ""
-      },
-      "timeLeft": ""
-    },
     "rssFeed": {
       "name": "",
       "description": "",
@@ -3718,40 +3293,6 @@
         "internalServerError": "Neizdevās iegūt pieejamības datus"
       }
     },
-    "traefik": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showTcp": {
-          "label": ""
-        },
-        "showUdp": {
-          "label": ""
-        },
-        "showEntryPoints": {
-          "label": ""
-        }
-      },
-      "instances": "",
-      "versionUnknown": "",
-      "summary": {
-        "routers": "",
-        "entryPoints": ""
-      },
-      "resource": {
-        "routers": "",
-        "services": "",
-        "middlewares": ""
-      },
-      "status": {
-        "healthy": "",
-        "errors": "",
-        "warnings": ""
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "audioStats": {
       "name": "Audio statistika",
       "description": "Bibliotēkas un atskaņošanas statistika no Navidrome vai Audiobookshelf",
@@ -3768,18 +3309,6 @@
           "label": "Rādīt dziesmas",
           "description": "Parādīt kopējo dziesmu skaitu mūzikas bibliotēkā (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "Rādīt pašlaik atskaņoto",
-          "description": "Parādīt šobrīd atskaņotās dziesmas (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "Rādīt pašlaik atskaņoto sarakstu",
-          "description": "Rādīt atsevišķas dziesmas, nevis tikai aktīvo straumju skaitu (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "Maks. pašlaik atskaņoto vienumu skaits",
-          "description": "Maksimālais dziesmu skaits, ko rādīt pašlaik atskaņotajā sarakstā (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "Rādīt bibliotēku skaitu",
           "description": "Parādīt bibliotēku skaitu jūsu instancē (Audiobookshelf)"
@@ -3813,8 +3342,6 @@
       "podcasts": "Podkāsti",
       "listeningTime": "Klausīšanās laiks",
       "activeSessions": "Aktīvās sesijas",
-      "nowPlaying": "Atskaņo pašlaik",
-      "nowPlayingCount": "{count, plural, zero {# straumju} one {# straume} other {# straumes}}",
       "error": {
         "internalServerError": "Neizdevās iegūt audio statistikas datus"
       }
@@ -3889,26 +3416,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Beszel sistēmas (Tabula)",
       "description": "Tabulas skats visām Beszel uzraudzītajām sistēmām ar kārtojamām kolonnām un statusa indikatoriem",
@@ -3954,11 +3461,19 @@
         },
         "showAgent": {
           "label": "Rādīt aģenta versiju"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Nav atrasta neviena sistēma",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Sistēma",
@@ -4151,6 +3666,256 @@
           "subtitle": "Docker konteineru tīkla trafika"
         }
       }
+    },
+    "patchmon": {
+      "name": "",
+      "description": "",
+      "title": "",
+      "totalHosts": "",
+      "hostsNeedingUpdates": "",
+      "securityUpdates": "",
+      "upToDateHosts": "",
+      "hostsWithSecurityUpdates": "",
+      "recentUpdates24h": "",
+      "totalOutdatedPackages": "",
+      "totalRepos": "",
+      "osDistribution": "",
+      "compliance": "",
+      "complianceRatio": "",
+      "lastUpdated": "",
+      "option": {
+        "showTotalHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsNeedingUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showUpToDateHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showRecentUpdates24h": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalOutdatedPackages": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalRepos": {
+          "label": "",
+          "description": ""
+        },
+        "enableThresholdColors": {
+          "label": "",
+          "description": ""
+        },
+        "useCustomThresholds": {
+          "label": "",
+          "description": ""
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "",
+            "percent": ""
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "showOsDistribution": {
+          "label": "",
+          "description": ""
+        },
+        "osDistributionLimit": {
+          "label": "",
+          "description": "",
+          "option": {
+            "3": "",
+            "5": "",
+            "10": "",
+            "all": ""
+          }
+        },
+        "showOsVersion": {
+          "label": "",
+          "description": ""
+        },
+        "showComplianceHero": {
+          "label": "",
+          "description": ""
+        },
+        "osDisplayMode": {
+          "label": "",
+          "description": "",
+          "option": {
+            "bars": "",
+            "donut": ""
+          }
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "bazarr": {
+      "name": "",
+      "description": "",
+      "episodes": "",
+      "movies": "",
+      "providers": "",
+      "status": "",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "",
+          "description": ""
+        },
+        "showMissingMovies": {
+          "label": "",
+          "description": ""
+        },
+        "showProviderIssues": {
+          "label": "",
+          "description": ""
+        },
+        "showHealthIssues": {
+          "label": "",
+          "description": ""
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "mediaMissing": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showMissing": {
+          "label": ""
+        },
+        "showQueued": {
+          "label": ""
+        },
+        "pageSize": {
+          "label": ""
+        }
+      },
+      "tab": {
+        "missing": "",
+        "queued": ""
+      },
+      "type": {
+        "movie": "",
+        "episode": ""
+      },
+      "empty": {
+        "missing": "",
+        "queued": "",
+        "noTabsEnabled": ""
+      },
+      "timeLeft": ""
+    },
+    "traefik": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showTcp": {
+          "label": ""
+        },
+        "showUdp": {
+          "label": ""
+        },
+        "showEntryPoints": {
+          "label": ""
+        }
+      },
+      "instances": "",
+      "versionUnknown": "",
+      "summary": {
+        "routers": "",
+        "entryPoints": ""
+      },
+      "resource": {
+        "routers": "",
+        "services": "",
+        "middlewares": ""
+      },
+      "status": {
+        "healthy": "",
+        "errors": "",
+        "warnings": ""
+      },
+      "error": {
+        "internalServerError": ""
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4296,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Sākums",
         "boards": "Dēļi",
         "apps": "Lietotnes",
         "integrations": "",
-        "customWidgets": "",
         "searchEngies": "",
         "medias": "",
         "users": {
@@ -5356,6 +5121,7 @@
       },
       "remove": {
         "label": "Noņemt",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "",
@@ -5673,6 +5439,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Pārvaldīt",
       "boards": {
         "label": "Dēļi"
@@ -5707,18 +5476,6 @@
           "label": "Rediģēt"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Lietotāji",
         "create": {
diff --git a/packages/translation/src/lang/nl.json b/packages/translation/src/lang/nl.json
index b02528b56..5a54df0d4 100644
--- a/packages/translation/src/lang/nl.json
+++ b/packages/translation/src/lang/nl.json
@@ -688,211 +688,6 @@
       "add": "Een app toevoegen"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Nieuwe dynamische sectie",
-        "remove": "Dynamische sectie verwijderen"
+        "create": "Nieuwe container",
+        "remove": "Container verwijderen"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Dynamische sectie verwijderen",
-        "message": "Weet je zeker dat je deze dynamische sectie wilt verwijderen? Items worden verplaatst naar dezelfde locatie in de bovenliggende sectie."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Naam"
-        }
-      },
-      "action": {
-        "create": "Nieuwe categorie",
-        "edit": "Categorie hernoemen",
-        "remove": "Categorie verwijderen",
-        "moveUp": "Omhoog",
-        "moveDown": "Omlaag",
-        "createAbove": "Nieuwe categorie hierboven",
-        "createBelow": "Nieuwe categorie hieronder",
-        "openAllInNewTabs": "Alles openen in tabbladen"
-      },
-      "create": {
-        "title": "Nieuwe categorie",
-        "submit": "Categorie toevoegen"
-      },
-      "remove": {
-        "title": "Categorie verwijderen",
-        "message": "Weet je zeker dat je de categorie {name} wilt verwijderen?"
-      },
-      "edit": {
-        "title": "Categorie hernoemen",
-        "submit": "Categorie hernoemen"
-      },
-      "menu": {
-        "label": {
-          "create": "Nieuwe categorie",
-          "changePosition": "Positie wijzigen",
-          "settings": "Instellingen"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Alles openen in tabbladen",
-        "text": "Sommige browsers blokkeren om veiligheidsredenen het bulk openen van tabbladen. Homarr kon niet alle vensters openen, omdat je browser deze actie blokkeerde. Sta \"Pop-upvensters openen\" toe en probeer het opnieuw."
+        "title": "Container verwijderen",
+        "message": "Weet je zeker dat je deze container wilt verwijderen? Items worden verplaatst naar dezelfde locatie in de bovenliggende sectie."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": "Sorteren omkeren"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "Ophalen van containerstatistieken mislukt"
+        "internalServerError": "Ophalen van containerstatistieken mislukt",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "Alleen huidig spelende weergeven",
           "description": "Dit uitschakelen werkt niet voor Plex"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "Momenteel aan het afspelen",
         "user": "Gebruiker",
@@ -2734,6 +2512,9 @@
         "id": "Id",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -3768,18 +3549,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3582,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3656,6 @@
         "unhealthy": "Niet-gezond"
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Beszel-systemen (tabel)",
       "description": "Tabelweergave van alle door Beszel bewaakte systemen met sorteerbare kolommen en statusindicatoren",
@@ -3954,11 +3701,19 @@
         },
         "showAgent": {
           "label": "Toon agentversie"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Geen systemen gevonden",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Systeem",
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Home",
         "boards": "Borden",
         "apps": "Apps",
         "integrations": "Integraties",
-        "customWidgets": "",
         "searchEngies": "Zoekmachines",
         "medias": "Media",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Verwijderen",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Containers verwijderd",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Beheren",
       "boards": {
         "label": "Borden"
@@ -5707,18 +5466,6 @@
           "label": "Bewerken"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Gebruikers",
         "create": {
diff --git a/packages/translation/src/lang/no.json b/packages/translation/src/lang/no.json
index a92c5af46..a95e469f6 100644
--- a/packages/translation/src/lang/no.json
+++ b/packages/translation/src/lang/no.json
@@ -688,211 +688,6 @@
       "add": "Legg til en app"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Ny dynamisk seksjon",
-        "remove": "Fjern dynamisk seksjon"
+        "create": "Ny beholder",
+        "remove": "Fjern beholder"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Fjern dynamisk seksjon",
-        "message": "Er du sikker på at du vil fjerne denne dynamiske delen? Elementer vil bli flyttet til samme sted i overordnet seksjon."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Navn"
-        }
-      },
-      "action": {
-        "create": "Ny kategori",
-        "edit": "Endre kategorinavn",
-        "remove": "Fjern kategori",
-        "moveUp": "Flytte opp",
-        "moveDown": "Flytt ned",
-        "createAbove": "Ny kategori over",
-        "createBelow": "Ny kategori under",
-        "openAllInNewTabs": "Åpne alle i faner"
-      },
-      "create": {
-        "title": "Ny kategori",
-        "submit": "Legg til kategori"
-      },
-      "remove": {
-        "title": "Fjern kategori",
-        "message": "Er du sikker på at du vil slette kategorien {name}?"
-      },
-      "edit": {
-        "title": "Endre kategorinavn",
-        "submit": "Endre kategorinavn"
-      },
-      "menu": {
-        "label": {
-          "create": "Ny kategori",
-          "changePosition": "Endre posisjon",
-          "settings": ""
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Åpne alle i faner",
-        "text": "Noen nettlesere kan blokkere åpning av faner av sikkerhetsgrunner. Homarr kunne ikke åpne alle vinduer, fordi nettleseren din blokkerte denne handlingen. Vennligst tillat \"Åpne pop-up vinduer\" og prøv på nytt."
+        "title": "Fjern beholder",
+        "message": "Er du sikker på at du vil fjerne denne beholderen? Elementer vil bli flyttet til samme sted i overordnet seksjon."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": "Reverser sortering"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "Kunne ikke hente containerstatistikk"
+        "internalServerError": "Kunne ikke hente containerstatistikk",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "Vis kun det som spiller nå",
           "description": "Å deaktivere dette fungerer ikke for Plex"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "Spilles nå",
         "user": "Bruker",
@@ -2734,6 +2512,9 @@
         "id": "Id",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -3768,18 +3549,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3582,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3656,6 @@
         "unhealthy": "Usunn"
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "",
       "description": "",
@@ -3954,11 +3701,19 @@
         },
         "showAgent": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "",
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Hjem",
         "boards": "Tavler",
         "apps": "Apper",
         "integrations": "Integrasjoner",
-        "customWidgets": "",
         "searchEngies": "Søkemotorer",
         "medias": "Medier",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Fjern",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Containere fjernet",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Administrer",
       "boards": {
         "label": "Tavler"
@@ -5707,18 +5466,6 @@
           "label": "Rediger"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Brukere",
         "create": {
diff --git a/packages/translation/src/lang/pl.json b/packages/translation/src/lang/pl.json
index 5e3e3dd89..97253d91f 100644
--- a/packages/translation/src/lang/pl.json
+++ b/packages/translation/src/lang/pl.json
@@ -710,14 +710,7 @@
       "delete": "Usuń niestandardowy widget",
       "deleteConfirm": "Czy na pewno chcesz usunąć \"{name}\"? Tej akcji nie można cofnąć.",
       "export": "Eksportuj",
-      "addMapping": "Dodaj mapowanie",
-      "addColumn": "Dodaj kolumnę",
       "edit": "Edytuj",
-      "removeMapping": "Usuń mapowanie",
-      "removeColumn": "Usuń kolumnę",
-      "addItem": "Dodaj element",
-      "removeItem": "Usuń element",
-      "addBar": "Dodaj pasek",
       "duplicate": "Duplikuj",
       "copyAiPrompt": "Skopiuj prompt AI",
       "enable": "Włącz",
@@ -727,140 +720,7 @@
     "field": {
       "name": "Nazwa",
       "description": "Opis",
-      "iconUrl": "Adres URL ikony",
-      "url": "Adres URL",
-      "authType": "Typ uwierzytelniania",
-      "headerName": "Nazwa parametru Header/Query",
-      "method": "Metoda",
-      "requestBody": "Body Zapytania",
-      "displayType": "Typ Wyświetlania",
-      "jsonPath": "Ścieżka JSON",
-      "jsonPathHint": "Użyj składni JSONPath do wyodrębnienia wartości, np. $.data.temperature lub $.items[0].name",
-      "label": "Etykieta",
-      "unit": "Jednostka",
-      "mappings": "Mapowania",
-      "tablePath": "Ścieżka JSON tablicy",
-      "tablePathHint": "Ścieżka do tablicy w odpowiedzi, np. $.data.items",
-      "columns": "Kolumny",
-      "header": "Nagłówek",
-      "items": "Elementy",
-      "gridColumns": "Kolumny Siatki",
-      "cardStyle": "Styl Karty",
-      "bars": "Paski",
-      "valuePath": "Ścieżka JSON wartości",
-      "maxPath": "Ścieżka JSON wartości maksymalnej",
-      "showPercentage": "Pokaż Procent",
-      "barSize": "Rozmiar Paska",
-      "goodValues": "Dobre wartości (oddzielone przecinkami)",
-      "dotSize": "Rozmiar Kropki",
-      "valueSize": "Rozmair Wartości",
-      "labelPosition": "Pozycja Etykiety",
-      "kvLayout": "Układ",
-      "striped": "Paskowane rzędy",
-      "compact": "Tryb Kompaktowy",
-      "maxHeight": "Maksymalna Wysokość (px)",
-      "color": "Kolor",
-      "buttonLabel": "Etykieta Przycisku",
-      "buttonColor": "Kolor Przycisku",
-      "confirmText": "Tekst Potwierdzający",
-      "confirmTextHint": "Jeśli ustawione, okno dialogowe potwierdzenia pojawi się przed wykonaniem żądania",
-      "successMessage": "Wiadomość o powodzeniu",
-      "successMessageHint": "Wiadomość wyświetlana po pomyślnym wykonaniu",
-      "enabled": "Włączony",
-      "template": {
-        "label": "Szablon JSX",
-        "description": "Szablon Mantine JSX. Uzyskaj dostęp do pól odpowiedzi API poprzez powiązanie danych (np. data.name). Używaj tylko kopmonentów na białej liście. Zabronione: constructor, __proto__, eval, Function, window, document."
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "Temperatura CPU",
-      "exampleLabelShort": "Temp CPU",
-      "exampleHeader": "Nazwa",
-      "exampleUnit": "°C",
-      "iconUrl": "https://...",
-      "url": "https://api.example.com/api/v1/status",
-      "headerName": "X-API-Key",
-      "jsonPath": "$.data.value",
-      "tablePath": "$.data.items",
-      "columnJsonPath": "$.name",
-      "valuePath": "$.data.used",
-      "maxPath": "$.data.total",
-      "goodValues": "online, true, up",
-      "color": "niebieski"
-    },
-    "cardStyleOption": {
-      "filled": "Wypełnione",
-      "outline": "Obrys",
-      "subtle": "Subtelny"
-    },
-    "layoutOption": {
-      "list": "Lista",
-      "grid": "Siatka"
-    },
-    "sizeOption": {
-      "sm": "Mały",
-      "md": "Średni",
-      "lg": "Duży",
-      "xl": "Bardzo duży"
-    },
-    "labelPositionOption": {
-      "above": "Powyżej",
-      "below": "Poniżej"
-    },
-    "fieldset": {
-      "general": "Ogólne",
-      "connection": "Połączenie API",
-      "display": "Konfiguracja Wyświetlania"
-    },
-    "displayTypeDescription": {
-      "singleValue": "Pokaż jedną wyodrębnioną wartość z etykietą i jednostką",
-      "keyValue": "Pokaż wiele oznaczonych wartości obok siebie",
-      "table": "Pokaż wiersze danych w formacie tabeli",
-      "statGrid": "Kolorowe kart statystyk w siatce - takie jak widgety Pi-Hole lub Speedtest",
-      "progressBars": "Paski postępu pokazujące użycie lub ukończenie — dla dysku, pamięci, kwot",
-      "statusIndicator": "Kolorowe kropki stanu pokazujące stan online/offline lub stan zdrowia",
-      "countGrid": "Kompaktowe numer + licznik etykiety w ścisłej siatce",
-      "raw": "Sformatowany JSON do debugowania",
-      "actionButton": "Przycisk, który wywołuje zapytanie po kliknięciu",
-      "customJsx": "Własny układ JSX za pomocą komponentów Mantine z białej listy z pełnym powiązaniem danych API"
-    },
-    "method": {
-      "GET": "GET",
-      "POST": "POST",
-      "PUT": "PUT",
-      "DELETE": "DELETE",
-      "PATCH": "PATCH"
-    },
-    "authType": {
-      "none": "None",
-      "bearer": "Bearer Token",
-      "basic": "Basic Auth",
-      "apiKeyHeader": "Klucz API (Nagłówek)",
-      "apiKeyQuery": "Klucz API (Query)"
-    },
-    "displayType": {
-      "singleValue": "Pojedyncza Wartość",
-      "keyValue": "Klucz-Wartość",
-      "table": "Tabela",
-      "statGrid": "Siatka statystyk",
-      "progressBars": "Paski Postępu",
-      "statusIndicator": "Wskaźnik statusu",
-      "countGrid": "Count Grid",
-      "raw": "Nieprzetworzony JSON",
-      "actionButton": "Przycisk Akcji",
-      "customJsx": "Niestandardowy JSX"
-    },
-    "secret": {
-      "apiKey": "Klucz API / Token",
-      "username": "Nazwa użytkownika",
-      "password": "Hasło",
-      "savedPlaceholder": "•••••• (zapisane, pozostaw puste aby zachować)"
-    },
-    "preview": {
-      "title": "Podgląd",
-      "test": "Test",
-      "hint": "Kliknij test, aby wyświetlić podgląd odpowiedzi API w aktualnej konfiguracji.",
-      "rawResponse": "Nieprzetworzona odpowiedź JSON"
+      "iconUrl": "Adres URL ikony"
     },
     "notification": {
       "created": "Widget \"{name}\" został utworzony pomyślnie.",
@@ -868,9 +728,6 @@
       "deleted": "Widget \"{name}\" usunięty.",
       "imported": "Widget został zaimportowany pomyślnie.",
       "aiPromptCopied": "Prompt AI skopiowany do schowka",
-      "aiPromptDescription": "Skopiuj wstępnie zbudowany prompt, aby wkleić do dowolnego czatu AI (ChatGPT, Claude, Gemini...). Zawiera pełny schemat widgetu i odpowiedź API, aby AI mógł wygenerować gotową konfigurację JSON dla Ciebie.",
-      "aiPromptCopy": "Skopiuj do schowka",
-      "aiPromptNoResponse": "Wskazówka: Uruchom najpierw test, aby dołączyć odpowiedź API w prompcie w celu uzyskania lepszych wyników.",
       "aiPromptCopyError": "Nie udało się skopiować prompta do schowka. Twoja przeglądarka może nie obsługiwać tej funkcji.",
       "createError": "Nie udało się utworzyć widżetu. Sprawdź, czy endpoint API jest osiągalny.",
       "updateError": "Nie udało się zaktualizować widgetu. Zmiany nie zostały zapisane.",
@@ -883,14 +740,6 @@
       "previewError": "Nie udało się pobrać podglądu. Sprawdź URL i spróbuj ponownie.",
       "executed": "Akcja wykonana pomyślnie.",
       "executeError": "Akcja nie powiodła się: {error}"
-    },
-    "table": {
-      "name": "Nazwa",
-      "url": "Adres URL",
-      "display": "Widok"
-    },
-    "widget": {
-      "disabled": "Ten widget jest wyłączony"
     }
   },
   "integration": {
@@ -1549,10 +1398,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Nowa sekcja dynamiczna",
-        "remove": "Usuń sekcję dynamiczną"
+        "create": "Nowy kontener",
+        "remove": "Usuń kontener"
       },
       "option": {
         "title": {
@@ -1566,48 +1415,8 @@
         }
       },
       "remove": {
-        "title": "Usuń sekcję dynamiczną",
-        "message": "Czy na pewno chcesz usunąć tę sekcję dynamiczną? Elementy zostaną przeniesione w tej samej lokalizacji w sekcji nadrzędnej."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Nazwa"
-        }
-      },
-      "action": {
-        "create": "Nowa kategoria",
-        "edit": "Zmień nazwę kategorii",
-        "remove": "Usuń kategorię",
-        "moveUp": "Przenieś w górę",
-        "moveDown": "Przenieś w dół",
-        "createAbove": "Nowa kategoria powyżej",
-        "createBelow": "Nowa kategoria poniżej",
-        "openAllInNewTabs": "Otwórz wszystkie w kartach"
-      },
-      "create": {
-        "title": "Nowa kategoria",
-        "submit": "Dodaj kategorię"
-      },
-      "remove": {
-        "title": "Usuń kategorię",
-        "message": "Czy na pewno chcesz usunąć kategorię {name}?"
-      },
-      "edit": {
-        "title": "Zmień nazwę kategorii",
-        "submit": "Zmień nazwę kategorii"
-      },
-      "menu": {
-        "label": {
-          "create": "Nowa kategoria",
-          "changePosition": "Zmiana pozycji",
-          "settings": "Ustawienia"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Otwórz wszystkie w kartach",
-        "text": "Niektóre przeglądarki mogą blokować masowe otwieranie kart ze względów bezpieczeństwa. Homarr nie był w stanie otworzyć wszystkich okien, ponieważ Twoja przeglądarka zablokowała tę akcję. Proszę zezwolić na \"Otwórz wyskakujące okna\" i spróbować ponownie."
+        "title": "Usuń kontener",
+        "message": "Czy na pewno chcesz usunąć ten kontener? Elementy zostaną przeniesione w tej samej lokalizacji w sekcji nadrzędnej."
       }
     }
   },
@@ -2428,10 +2237,21 @@
         },
         "descendingDefaultSort": {
           "label": "Odwróć sortowanie"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "Nie udało się pobrać statystyk kontenerów"
+        "internalServerError": "Nie udało się pobrać statystyk kontenerów",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2545,20 @@
         "showOnlyPlaying": {
           "label": "Pokaż tylko aktualnie odtwarzane",
           "description": "Wyłączenie tej opcji nie zadziała w przypadku Plex"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "Obecnie odtwarzane",
         "user": "Użytkownik",
@@ -2734,6 +2566,9 @@
         "id": "ID",
         "status": "Status",
         "directPlay": "Odtwarzanie bezpośrednie",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "Transkodowanie",
         "paused": "Zatrzymane",
         "remaining": "{minutes} min pozostało",
@@ -3768,18 +3603,6 @@
           "label": "Pokaż utwory",
           "description": "Pokaż całkowitą liczbę utworów w twojej bibliotece muzycznej (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "Pokaż teraz odtwarzane",
-          "description": "Pokaż aktualnie odtwarzane utwory (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "Pokaż listę teraz odtwarzanych",
-          "description": "Pokaż poszczególne utwory zamiast tylko aktywnej liczby strumieni (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "Maksymalna ilość teraz odtwarzanych elementów",
-          "description": "Maksymalna liczba elementów wyświetlanych na liście teraz odtwarzanych (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "Pokaż ilość bibliotek",
           "description": "Pokaż liczbę bibliotek na twojej instancji (Audiobookshelf)"
@@ -3813,8 +3636,6 @@
       "podcasts": "Podcasty",
       "listeningTime": "Czas Słuchania",
       "activeSessions": "Aktywne Sesje",
-      "nowPlaying": "Teraz Odtwarzane",
-      "nowPlayingCount": "{count, plural, one {# stream} other {# streams}}",
       "error": {
         "internalServerError": "Nie udało się pobrać danych audio stats"
       }
@@ -3902,12 +3723,7 @@
         }
       },
       "noDefinition": "Nie wybrano definicji",
-      "definitionNotFound": "Nie znaleziono definicji widgetu. Być może została usunięta.",
-      "noDisplayOutput": "No display output",
-      "executeConfirm": "Czy jesteś pewien, że chcesz wykonać to zadanie?",
-      "executing": "Wykonywanie...",
-      "executeSuccess": "Akcja wykonana pomyślnie",
-      "executeFailed": "Akcja nie powiodła się. Sprawdź konfigurację widgetu."
+      "definitionNotFound": "Nie znaleziono definicji widgetu. Być może została usunięta."
     },
     "beszelSystemTable": {
       "name": "Systemy Beszel (Tabela)",
@@ -3954,11 +3770,19 @@
         },
         "showAgent": {
           "label": "Pokaż wersję agenta"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Nie znaleziono systemów",
       "error": {
-        "internalServerError": "Nie można połączyć się z Beszel. Sprawdź ustawienia integracji."
+        "internalServerError": "Nie można połączyć się z Beszel. Sprawdź ustawienia integracji.",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "System",
@@ -4531,6 +4355,7 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Strona główna",
         "boards": "Tablice",
         "apps": "Aplikacje",
@@ -5356,6 +5181,7 @@
       },
       "remove": {
         "label": "Usuń",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Usunięto kontenery",
@@ -5673,6 +5499,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Zarządzaj",
       "boards": {
         "label": "Tablice"
diff --git a/packages/translation/src/lang/pt-br.json b/packages/translation/src/lang/pt-br.json
index 6d9d4f6aa..0f882f2fb 100644
--- a/packages/translation/src/lang/pt-br.json
+++ b/packages/translation/src/lang/pt-br.json
@@ -710,16 +710,8 @@
       "delete": "Excluir widget personalizado",
       "deleteConfirm": "Tem certeza de que deseja excluir \"{name}\"? Esta ação não pode ser desfeita.",
       "export": "Exportar",
-      "addMapping": "Adicionar Mapeamento",
-      "addColumn": "Adicionar Coluna",
       "edit": "Editar",
-      "removeMapping": "Remover Mapeamento",
-      "removeColumn": "Remover coluna",
-      "addItem": "Adicionar Item",
-      "removeItem": "Remover item",
-      "addBar": "Adicionar barra",
       "duplicate": "Duplicar",
-      "copyAiPrompt": "Copiar prompt de IA",
       "enable": "Habilitado",
       "disable": "Desabilitado",
       "menu": "Ações"
@@ -727,150 +719,13 @@
     "field": {
       "name": "Nome",
       "description": "Descrição",
-      "iconUrl": "URL do ícone",
-      "url": "URL",
-      "authType": "Tipo de Autenticação",
-      "headerName": "Nome do parâmetro de cabeçalho/consulta",
-      "method": "Método",
-      "requestBody": "Corpo da requisição",
-      "displayType": "Tipo de exibição",
-      "jsonPath": "Caminho JSON",
-      "jsonPathHint": "Usar sintaxe JSONPath para extrair valores, por exemplo, $.data.temperature ou $.items[0].name",
-      "label": "Rótulo",
-      "unit": "Unidade",
-      "mappings": "Mapeamentos",
-      "tablePath": "Caminho Array JSON",
-      "tablePathHint": "Caminho para o array na resposta, por exemplo, $.data.items",
-      "columns": "Colunas",
-      "header": "Header (cabeçalho)",
-      "items": "Itens",
-      "gridColumns": "Colunas da grade",
-      "cardStyle": "Estilo de cartão",
-      "bars": "Barras",
-      "valuePath": "Caminho do valor JSON",
-      "maxPath": "Caminho do Max Valor JSON",
-      "showPercentage": "Mostrar porcentagem",
-      "barSize": "Tamanho da barra",
-      "goodValues": "Valores bons (separados por vírgula)",
-      "dotSize": "Tamanho do ponto",
-      "valueSize": "Tamanho do valor",
-      "labelPosition": "Posição do rótulo",
-      "kvLayout": "Layout",
-      "striped": "Linhas Listradas",
-      "compact": "Modo Compacto",
-      "maxHeight": "Altura máxima (px)",
-      "color": "Cor",
-      "buttonLabel": "Rótulo do botão",
-      "buttonColor": "Cor do botão",
-      "confirmText": "Texto de confirmação",
-      "confirmTextHint": "Se definido, um diálogo de confirmação irá aparecer antes de executar a solicitação",
-      "successMessage": "Mensagem de Sucesso",
-      "successMessageHint": "Mensagem mostrada após execução com sucesso",
-      "enabled": "Habilitado",
-      "template": {
-        "label": "Template JSX",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "Temperatura da CPU",
-      "exampleLabelShort": "Temp CPU",
-      "exampleHeader": "Nome",
-      "exampleUnit": "°C",
-      "iconUrl": "https://...",
-      "url": "https://api.exemplo.com/br/api/v1/status",
-      "headerName": "X-API-Key",
-      "jsonPath": "$.data.value",
-      "tablePath": "$.data.items",
-      "columnJsonPath": "$.nome",
-      "valuePath": "$.data.used",
-      "maxPath": "$.data.total",
-      "goodValues": "online, true, up",
-      "color": "azul"
-    },
-    "cardStyleOption": {
-      "filled": "Preenchido",
-      "outline": "Contorno",
-      "subtle": "Sutil"
-    },
-    "layoutOption": {
-      "list": "Lista",
-      "grid": "Grade"
-    },
-    "sizeOption": {
-      "sm": "Pequeno",
-      "md": "Médio",
-      "lg": "Grande",
-      "xl": "Extra grande"
-    },
-    "labelPositionOption": {
-      "above": "Acima",
-      "below": "Abaixo"
-    },
-    "fieldset": {
-      "general": "Geral",
-      "connection": "Conexão com API",
-      "display": "Configurações de tela"
-    },
-    "displayTypeDescription": {
-      "singleValue": "Exibir um valor extraído com rótulo e unidade",
-      "keyValue": "Exibir vários valores rotulados lado a lado",
-      "table": "Exibir linhas de dados em formato de tabela",
-      "statGrid": "Estatísticas coloridas em uma grade — como Pi-Hole ou Widgets Rápidos",
-      "progressBars": "Barras de progresso mostrando uso ou conclusão — para disco, memória, quotas",
-      "statusIndicator": "Pontos de status coloridos mostrando estados online/offline ou de saúde",
-      "countGrid": "Contadores compactos de número + rótulo em uma grade apertada",
-      "raw": "Saída JSON impressa para depuração",
-      "actionButton": "Um botão que aciona uma solicitação quando clicado",
-      "customJsx": "Layout JSX personalizado usando componentes Mantine na lista branca com ligação completa de dados de API"
-    },
-    "method": {
-      "GET": "GET",
-      "POST": "POST",
-      "PUT": "PUT",
-      "DELETE": "DELETE",
-      "PATCH": "PATCH"
-    },
-    "authType": {
-      "none": "Nenhum",
-      "bearer": "Token Bearer",
-      "basic": "Autenticação Básica",
-      "apiKeyHeader": "Chave API (Cabeçalho)",
-      "apiKeyQuery": "Chave API (Consulta)"
-    },
-    "displayType": {
-      "singleValue": "Valor Único",
-      "keyValue": "Chave-Valor",
-      "table": "Tabela",
-      "statGrid": "Grade de Estatísticas",
-      "progressBars": "Barras de Progresso",
-      "statusIndicator": "Indicador de Status",
-      "countGrid": "Grade de Contagem",
-      "raw": "JSON Bruto",
-      "actionButton": "Botão de Ação",
-      "customJsx": "JSX personalizado"
-    },
-    "secret": {
-      "apiKey": "Chave de API / Token",
-      "username": "Usuário",
-      "password": "Senha",
-      "savedPlaceholder": "••••••• (salvo, deixe em branco para manter)"
-    },
-    "preview": {
-      "title": "Pré-visualizar",
-      "test": "Testar",
-      "hint": "Clique em Testar para visualizar a resposta da API com sua configuração atual.",
-      "rawResponse": "Resposta JSON Bruta"
+      "iconUrl": "URL do ícone"
     },
     "notification": {
       "created": "Widget \"{name}\" criado com sucesso.",
       "updated": "Widget \"{name}atualizado com sucesso.",
       "deleted": "Widget \"{name}excluído.",
       "imported": "Widget importado com sucesso.",
-      "aiPromptCopied": "Prompt de IA copiado para a área de transferência",
-      "aiPromptDescription": "Copie um prompt pré-construído para colar qualquer chatbot de AI (ChatGPT, Claude, Gemini...). Ele inclui o esquema completo de widget e a sua resposta de API para que a AI possa gerar uma configuração JSON pronta para importar para você.",
-      "aiPromptCopy": "Copiar para área de transferência",
-      "aiPromptNoResponse": "Dica: Execute um teste primeiro para incluir a sua API de resposta no prompt para melhores resultados.",
       "aiPromptCopyError": "Falha ao copiar prompt para área de transferência. O seu navegador pode não suportar este recurso.",
       "createError": "Falha ao criar widget. Verifique se o endpoint API está acessível.",
       "updateError": "Falha ao atualizar o widget. Suas alterações não foram salvas.",
@@ -883,14 +738,6 @@
       "previewError": "Falha ao buscar a pré-visualização. Verifique a URL e tente novamente.",
       "executed": "Ação executada com sucesso.",
       "executeError": "A ação falhou: {error}"
-    },
-    "table": {
-      "name": "Nome",
-      "url": "URL",
-      "display": "Exibição"
-    },
-    "widget": {
-      "disabled": "Este widget está desabilitado"
     }
   },
   "integration": {
@@ -1549,10 +1396,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Nova seção dinâmica",
-        "remove": "Remover seção dinâmica"
+        "create": "Novo contêiner",
+        "remove": "Remover contêiner"
       },
       "option": {
         "title": {
@@ -1566,48 +1413,8 @@
         }
       },
       "remove": {
-        "title": "Remover seção dinâmica",
-        "message": "Tem certeza de que deseja remover esta seção dinâmica? Os itens serão movidos para o mesmo local na seção pai."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Nome"
-        }
-      },
-      "action": {
-        "create": "Nova categoria",
-        "edit": "Renomear categoria",
-        "remove": "Remover categoria",
-        "moveUp": "Subir",
-        "moveDown": "Mover para baixo",
-        "createAbove": "Nova categoria acima",
-        "createBelow": "Nova categoria abaixo",
-        "openAllInNewTabs": "Abrir tudo em abas"
-      },
-      "create": {
-        "title": "Nova categoria",
-        "submit": "Adicionar categoria"
-      },
-      "remove": {
-        "title": "Remover categoria",
-        "message": "Tem certeza que deseja deletar a categoria {name}?"
-      },
-      "edit": {
-        "title": "Renomear categoria",
-        "submit": "Renomear categoria"
-      },
-      "menu": {
-        "label": {
-          "create": "Nova categoria",
-          "changePosition": "Mudar de posição",
-          "settings": "Configurações"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Abrir tudo em abas",
-        "text": "Alguns navegadores podem bloquear a abertura em massa de abas por motivos de segurança. O Homarr não conseguiu abrir todas as janelas porque seu navegador bloqueou esta ação. Por favor, permita \"Abrir janelas pop-up\" e tente novamente."
+        "title": "Remover contêiner",
+        "message": "Tem certeza de que deseja remover este contêiner? Os itens serão movidos para o mesmo local na seção pai."
       }
     }
   },
@@ -2428,10 +2235,21 @@
         },
         "descendingDefaultSort": {
           "label": "Inverter ordenação"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "Erro ao obter as estatísticas dos contêineres"
+        "internalServerError": "Erro ao obter as estatísticas dos contêineres",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2543,20 @@
         "showOnlyPlaying": {
           "label": "Exibir apenas o que está sendo reproduzido",
           "description": "Desabilitar isso não funcionará para o Plex"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "Reproduzindo agora",
         "user": "Usuário",
@@ -2734,6 +2564,9 @@
         "id": "Id",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -2802,193 +2635,6 @@
         "internalServerError": "Falha ao buscar dados do Paperless-ngx"
       }
     },
-    "patchmon": {
-      "name": "",
-      "description": "",
-      "title": "",
-      "totalHosts": "",
-      "hostsNeedingUpdates": "",
-      "securityUpdates": "",
-      "upToDateHosts": "",
-      "hostsWithSecurityUpdates": "",
-      "recentUpdates24h": "",
-      "totalOutdatedPackages": "",
-      "totalRepos": "",
-      "osDistribution": "",
-      "compliance": "",
-      "complianceRatio": "",
-      "lastUpdated": "",
-      "option": {
-        "showTotalHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsNeedingUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showUpToDateHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showRecentUpdates24h": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalOutdatedPackages": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalRepos": {
-          "label": "",
-          "description": ""
-        },
-        "enableThresholdColors": {
-          "label": "",
-          "description": ""
-        },
-        "useCustomThresholds": {
-          "label": "",
-          "description": ""
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "",
-            "percent": ""
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "showOsDistribution": {
-          "label": "",
-          "description": ""
-        },
-        "osDistributionLimit": {
-          "label": "",
-          "description": "",
-          "option": {
-            "3": "",
-            "5": "",
-            "10": "",
-            "all": ""
-          }
-        },
-        "showOsVersion": {
-          "label": "",
-          "description": ""
-        },
-        "showComplianceHero": {
-          "label": "",
-          "description": ""
-        },
-        "osDisplayMode": {
-          "label": "",
-          "description": "",
-          "option": {
-            "bars": "",
-            "donut": ""
-          }
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
-    "bazarr": {
-      "name": "",
-      "description": "",
-      "episodes": "",
-      "movies": "",
-      "providers": "",
-      "status": "",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "",
-          "description": ""
-        },
-        "showMissingMovies": {
-          "label": "",
-          "description": ""
-        },
-        "showProviderIssues": {
-          "label": "",
-          "description": ""
-        },
-        "showHealthIssues": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "immich-serverStats": {
       "name": "Estatísticas do Servidor Immich",
       "description": "Informações sobre sua instância do Immich",
@@ -3361,35 +3007,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showMissing": {
-          "label": ""
-        },
-        "showQueued": {
-          "label": ""
-        },
-        "pageSize": {
-          "label": ""
-        }
-      },
-      "tab": {
-        "missing": "",
-        "queued": ""
-      },
-      "type": {
-        "movie": "",
-        "episode": ""
-      },
-      "empty": {
-        "missing": "",
-        "queued": "",
-        "noTabsEnabled": ""
-      },
-      "timeLeft": ""
-    },
     "rssFeed": {
       "name": "Feeds RSS",
       "description": "Monitora e exibe um ou mais feeds RSS, ATOM ou JSON genéricos",
@@ -3718,40 +3335,6 @@
         "internalServerError": "Falha ao buscar dados de tempo de atividade"
       }
     },
-    "traefik": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showTcp": {
-          "label": ""
-        },
-        "showUdp": {
-          "label": ""
-        },
-        "showEntryPoints": {
-          "label": ""
-        }
-      },
-      "instances": "",
-      "versionUnknown": "",
-      "summary": {
-        "routers": "",
-        "entryPoints": ""
-      },
-      "resource": {
-        "routers": "",
-        "services": "",
-        "middlewares": ""
-      },
-      "status": {
-        "healthy": "",
-        "errors": "",
-        "warnings": ""
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "audioStats": {
       "name": "Estatísticas de áudio",
       "description": "Estatísticas de biblioteca e reprodução do Navidrome ou Audiobookshelf",
@@ -3768,18 +3351,6 @@
           "label": "Mostrar músicas",
           "description": "Mostrar o número total de músicas na sua biblioteca de música (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "Mostrar tocando agora",
-          "description": "Mostrar as faixas que estão sendo reproduzidas no momento (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "Mostrar lista de reprodução atual",
-          "description": "Mostrar faixas individuais em vez de apenas a contagem de streams ativos (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "Máximo de itens em reprodução",
-          "description": "Número máximo de faixas para mostrar na lista de reprodução atual (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "Mostrar contagem de bibliotecas",
           "description": "Mostrar o número de bibliotecas na sua instância (Audiobookshelf)"
@@ -3813,8 +3384,6 @@
       "podcasts": "Podcasts",
       "listeningTime": "Tempo de audição",
       "activeSessions": "Sessões ativas",
-      "nowPlaying": "Tocando agora",
-      "nowPlayingCount": "{count, plural, one {# transmissão} other {# transmissões}}",
       "error": {
         "internalServerError": "Falha ao buscar dados de estatísticas de áudio"
       }
@@ -3889,26 +3458,6 @@
         "unhealthy": "Não saudável"
       }
     },
-    "customApi": {
-      "name": "API personalizada",
-      "description": "Exibir dados de qualquer API externa com configuração personalizada.",
-      "option": {
-        "definitionId": {
-          "label": "ID de definição"
-        },
-        "refreshInterval": {
-          "label": "Intervalo de atualização",
-          "description": "Com que frequência reobter dados da API (em segundos)"
-        }
-      },
-      "noDefinition": "Nenhuma definição selecionada",
-      "definitionNotFound": "Definição do widget não encontrada. Ela pode ter sido excluída.",
-      "noDisplayOutput": "Nenhuma saída de exibição",
-      "executeConfirm": "Tem certeza de que deseja executar esta ação?",
-      "executing": "Executando...",
-      "executeSuccess": "Ação executada com sucesso",
-      "executeFailed": "Ação falhou. Verifique a configuração do widget."
-    },
     "beszelSystemTable": {
       "name": "Sistemas Beszel (Tabela)",
       "description": "Visualização em tabela de todos os sistemas monitorados pelo Beszel com colunas classificáveis e indicadores de status",
@@ -3954,11 +3503,19 @@
         },
         "showAgent": {
           "label": "Mostrar versão do agente"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Nenhum sistema encontrado",
       "error": {
-        "internalServerError": "Não foi possível conectar ao Beszel. Verifique as configurações de integração."
+        "internalServerError": "Não foi possível conectar ao Beszel. Verifique as configurações de integração.",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Sistema",
@@ -4151,6 +3708,256 @@
           "subtitle": "Tráfego de rede dos contêineres Docker"
         }
       }
+    },
+    "patchmon": {
+      "name": "",
+      "description": "",
+      "title": "",
+      "totalHosts": "",
+      "hostsNeedingUpdates": "",
+      "securityUpdates": "",
+      "upToDateHosts": "",
+      "hostsWithSecurityUpdates": "",
+      "recentUpdates24h": "",
+      "totalOutdatedPackages": "",
+      "totalRepos": "",
+      "osDistribution": "",
+      "compliance": "",
+      "complianceRatio": "",
+      "lastUpdated": "",
+      "option": {
+        "showTotalHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsNeedingUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showUpToDateHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showRecentUpdates24h": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalOutdatedPackages": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalRepos": {
+          "label": "",
+          "description": ""
+        },
+        "enableThresholdColors": {
+          "label": "",
+          "description": ""
+        },
+        "useCustomThresholds": {
+          "label": "",
+          "description": ""
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "",
+            "percent": ""
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "showOsDistribution": {
+          "label": "",
+          "description": ""
+        },
+        "osDistributionLimit": {
+          "label": "",
+          "description": "",
+          "option": {
+            "3": "",
+            "5": "",
+            "10": "",
+            "all": ""
+          }
+        },
+        "showOsVersion": {
+          "label": "",
+          "description": ""
+        },
+        "showComplianceHero": {
+          "label": "",
+          "description": ""
+        },
+        "osDisplayMode": {
+          "label": "",
+          "description": "",
+          "option": {
+            "bars": "",
+            "donut": ""
+          }
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "bazarr": {
+      "name": "",
+      "description": "",
+      "episodes": "",
+      "movies": "",
+      "providers": "",
+      "status": "",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "",
+          "description": ""
+        },
+        "showMissingMovies": {
+          "label": "",
+          "description": ""
+        },
+        "showProviderIssues": {
+          "label": "",
+          "description": ""
+        },
+        "showHealthIssues": {
+          "label": "",
+          "description": ""
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "mediaMissing": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showMissing": {
+          "label": ""
+        },
+        "showQueued": {
+          "label": ""
+        },
+        "pageSize": {
+          "label": ""
+        }
+      },
+      "tab": {
+        "missing": "",
+        "queued": ""
+      },
+      "type": {
+        "movie": "",
+        "episode": ""
+      },
+      "empty": {
+        "missing": "",
+        "queued": "",
+        "noTabsEnabled": ""
+      },
+      "timeLeft": ""
+    },
+    "traefik": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showTcp": {
+          "label": ""
+        },
+        "showUdp": {
+          "label": ""
+        },
+        "showEntryPoints": {
+          "label": ""
+        }
+      },
+      "instances": "",
+      "versionUnknown": "",
+      "summary": {
+        "routers": "",
+        "entryPoints": ""
+      },
+      "resource": {
+        "routers": "",
+        "services": "",
+        "middlewares": ""
+      },
+      "status": {
+        "healthy": "",
+        "errors": "",
+        "warnings": ""
+      },
+      "error": {
+        "internalServerError": ""
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4338,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Início",
         "boards": "Placas",
         "apps": "Aplicativos",
         "integrations": "Integrações",
-        "customWidgets": "Widgets Personalizados",
         "searchEngies": "Mecanismos de busca",
         "medias": "Mídias",
         "users": {
@@ -5356,6 +5163,7 @@
       },
       "remove": {
         "label": "Excluir",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Contêineres removidos",
@@ -5673,6 +5481,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Gerenciar",
       "boards": {
         "label": "Placas"
@@ -5707,18 +5518,6 @@
           "label": "Editar"
         }
       },
-      "custom-widgets": {
-        "label": "Widgets personalizados",
-        "new": {
-          "label": "Novo"
-        },
-        "edit": {
-          "label": "Editar",
-          "flow": {
-            "label": "Fluxo"
-          }
-        }
-      },
       "users": {
         "label": "Usuários",
         "create": {
diff --git a/packages/translation/src/lang/pt.json b/packages/translation/src/lang/pt.json
index e18d7f234..ee0da0ab2 100644
--- a/packages/translation/src/lang/pt.json
+++ b/packages/translation/src/lang/pt.json
@@ -688,211 +688,6 @@
       "add": ""
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Nova seção dinâmica",
-        "remove": "Remover seção dinâmica"
+        "create": "Novo contêiner",
+        "remove": "Remover contêiner"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Remover seção dinâmica",
-        "message": "Tem certeza de que deseja remover esta seção dinâmica? Os itens serão movidos para o mesmo local na seção pai."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Nome"
-        }
-      },
-      "action": {
-        "create": "Nova categoria",
-        "edit": "Renomear categoria",
-        "remove": "Remover categoria",
-        "moveUp": "Subir",
-        "moveDown": "Mover para baixo",
-        "createAbove": "Nova categoria acima",
-        "createBelow": "Nova categoria abaixo",
-        "openAllInNewTabs": ""
-      },
-      "create": {
-        "title": "Nova categoria",
-        "submit": "Adicionar categoria"
-      },
-      "remove": {
-        "title": "Remover categoria",
-        "message": "Tem certeza que deseja deletar a categoria {name}?"
-      },
-      "edit": {
-        "title": "Renomear categoria",
-        "submit": "Renomear categoria"
-      },
-      "menu": {
-        "label": {
-          "create": "Nova categoria",
-          "changePosition": "Mudar de posição",
-          "settings": "Configurações"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "",
-        "text": ""
+        "title": "Remover contêiner",
+        "message": "Tem certeza de que deseja remover este contêiner? Os itens serão movidos para o mesmo local na seção pai."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "",
           "description": ""
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "",
         "user": "",
@@ -2734,6 +2512,9 @@
         "id": "",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -2802,193 +2583,6 @@
         "internalServerError": ""
       }
     },
-    "patchmon": {
-      "name": "",
-      "description": "",
-      "title": "",
-      "totalHosts": "",
-      "hostsNeedingUpdates": "",
-      "securityUpdates": "",
-      "upToDateHosts": "",
-      "hostsWithSecurityUpdates": "",
-      "recentUpdates24h": "",
-      "totalOutdatedPackages": "",
-      "totalRepos": "",
-      "osDistribution": "",
-      "compliance": "",
-      "complianceRatio": "",
-      "lastUpdated": "",
-      "option": {
-        "showTotalHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsNeedingUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showUpToDateHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showRecentUpdates24h": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalOutdatedPackages": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalRepos": {
-          "label": "",
-          "description": ""
-        },
-        "enableThresholdColors": {
-          "label": "",
-          "description": ""
-        },
-        "useCustomThresholds": {
-          "label": "",
-          "description": ""
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "",
-            "percent": ""
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "showOsDistribution": {
-          "label": "",
-          "description": ""
-        },
-        "osDistributionLimit": {
-          "label": "",
-          "description": "",
-          "option": {
-            "3": "",
-            "5": "",
-            "10": "",
-            "all": ""
-          }
-        },
-        "showOsVersion": {
-          "label": "",
-          "description": ""
-        },
-        "showComplianceHero": {
-          "label": "",
-          "description": ""
-        },
-        "osDisplayMode": {
-          "label": "",
-          "description": "",
-          "option": {
-            "bars": "",
-            "donut": ""
-          }
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
-    "bazarr": {
-      "name": "",
-      "description": "",
-      "episodes": "",
-      "movies": "",
-      "providers": "",
-      "status": "",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "",
-          "description": ""
-        },
-        "showMissingMovies": {
-          "label": "",
-          "description": ""
-        },
-        "showProviderIssues": {
-          "label": "",
-          "description": ""
-        },
-        "showHealthIssues": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "immich-serverStats": {
       "name": "",
       "description": "",
@@ -3361,35 +2955,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showMissing": {
-          "label": ""
-        },
-        "showQueued": {
-          "label": ""
-        },
-        "pageSize": {
-          "label": ""
-        }
-      },
-      "tab": {
-        "missing": "",
-        "queued": ""
-      },
-      "type": {
-        "movie": "",
-        "episode": ""
-      },
-      "empty": {
-        "missing": "",
-        "queued": "",
-        "noTabsEnabled": ""
-      },
-      "timeLeft": ""
-    },
     "rssFeed": {
       "name": "Feeds RSS",
       "description": "Monitora e exibe um ou mais feeds RSS, ATOM ou JSON genéricos",
@@ -3718,40 +3283,6 @@
         "internalServerError": ""
       }
     },
-    "traefik": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showTcp": {
-          "label": ""
-        },
-        "showUdp": {
-          "label": ""
-        },
-        "showEntryPoints": {
-          "label": ""
-        }
-      },
-      "instances": "",
-      "versionUnknown": "",
-      "summary": {
-        "routers": "",
-        "entryPoints": ""
-      },
-      "resource": {
-        "routers": "",
-        "services": "",
-        "middlewares": ""
-      },
-      "status": {
-        "healthy": "",
-        "errors": "",
-        "warnings": ""
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "audioStats": {
       "name": "",
       "description": "",
@@ -3768,18 +3299,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3332,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3406,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Sistemas Beszel (Tabela)",
       "description": "Visualização em tabela de todos os sistemas monitorados pelo Beszel com colunas classificáveis e indicadores de status",
@@ -3954,11 +3451,19 @@
         },
         "showAgent": {
           "label": "Exibir versão do agente"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Nenhum sistema encontrado",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Sistema",
@@ -4151,6 +3656,256 @@
           "subtitle": "Tráfego de rede dos contêineres Docker"
         }
       }
+    },
+    "patchmon": {
+      "name": "",
+      "description": "",
+      "title": "",
+      "totalHosts": "",
+      "hostsNeedingUpdates": "",
+      "securityUpdates": "",
+      "upToDateHosts": "",
+      "hostsWithSecurityUpdates": "",
+      "recentUpdates24h": "",
+      "totalOutdatedPackages": "",
+      "totalRepos": "",
+      "osDistribution": "",
+      "compliance": "",
+      "complianceRatio": "",
+      "lastUpdated": "",
+      "option": {
+        "showTotalHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsNeedingUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showUpToDateHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showRecentUpdates24h": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalOutdatedPackages": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalRepos": {
+          "label": "",
+          "description": ""
+        },
+        "enableThresholdColors": {
+          "label": "",
+          "description": ""
+        },
+        "useCustomThresholds": {
+          "label": "",
+          "description": ""
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "",
+            "percent": ""
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "showOsDistribution": {
+          "label": "",
+          "description": ""
+        },
+        "osDistributionLimit": {
+          "label": "",
+          "description": "",
+          "option": {
+            "3": "",
+            "5": "",
+            "10": "",
+            "all": ""
+          }
+        },
+        "showOsVersion": {
+          "label": "",
+          "description": ""
+        },
+        "showComplianceHero": {
+          "label": "",
+          "description": ""
+        },
+        "osDisplayMode": {
+          "label": "",
+          "description": "",
+          "option": {
+            "bars": "",
+            "donut": ""
+          }
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "bazarr": {
+      "name": "",
+      "description": "",
+      "episodes": "",
+      "movies": "",
+      "providers": "",
+      "status": "",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "",
+          "description": ""
+        },
+        "showMissingMovies": {
+          "label": "",
+          "description": ""
+        },
+        "showProviderIssues": {
+          "label": "",
+          "description": ""
+        },
+        "showHealthIssues": {
+          "label": "",
+          "description": ""
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "mediaMissing": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showMissing": {
+          "label": ""
+        },
+        "showQueued": {
+          "label": ""
+        },
+        "pageSize": {
+          "label": ""
+        }
+      },
+      "tab": {
+        "missing": "",
+        "queued": ""
+      },
+      "type": {
+        "movie": "",
+        "episode": ""
+      },
+      "empty": {
+        "missing": "",
+        "queued": "",
+        "noTabsEnabled": ""
+      },
+      "timeLeft": ""
+    },
+    "traefik": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showTcp": {
+          "label": ""
+        },
+        "showUdp": {
+          "label": ""
+        },
+        "showEntryPoints": {
+          "label": ""
+        }
+      },
+      "instances": "",
+      "versionUnknown": "",
+      "summary": {
+        "routers": "",
+        "entryPoints": ""
+      },
+      "resource": {
+        "routers": "",
+        "services": "",
+        "middlewares": ""
+      },
+      "status": {
+        "healthy": "",
+        "errors": "",
+        "warnings": ""
+      },
+      "error": {
+        "internalServerError": ""
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Início",
         "boards": "Painéis",
         "apps": "Aplicativos",
         "integrations": "Integrações",
-        "customWidgets": "",
         "searchEngies": "Mecanismos de busca",
         "medias": "Mídias",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Remover",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Contêineres removidos",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Gerenciar",
       "boards": {
         "label": "Painéis"
@@ -5707,18 +5466,6 @@
           "label": "Editar"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Usuários",
         "create": {
diff --git a/packages/translation/src/lang/ro.json b/packages/translation/src/lang/ro.json
index da232acd7..545734a74 100644
--- a/packages/translation/src/lang/ro.json
+++ b/packages/translation/src/lang/ro.json
@@ -688,211 +688,6 @@
       "add": ""
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "",
-        "remove": ""
+        "create": "Container nou",
+        "remove": "Elimină containerul"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "",
-        "message": ""
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Nume"
-        }
-      },
-      "action": {
-        "create": "",
-        "edit": "",
-        "remove": "",
-        "moveUp": "Mută în sus",
-        "moveDown": "Mută în jos",
-        "createAbove": "",
-        "createBelow": "",
-        "openAllInNewTabs": ""
-      },
-      "create": {
-        "title": "",
-        "submit": ""
-      },
-      "remove": {
-        "title": "",
-        "message": ""
-      },
-      "edit": {
-        "title": "",
-        "submit": ""
-      },
-      "menu": {
-        "label": {
-          "create": "",
-          "changePosition": "Schimbă locația",
-          "settings": "Setări"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "",
-        "text": ""
+        "title": "Elimină containerul",
+        "message": "Sigur doriți să eliminați acest container? Elementele vor fi mutate în aceeași poziție din secțiunea părinte."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "",
           "description": ""
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "",
         "user": "",
@@ -2734,6 +2512,9 @@
         "id": "",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -3768,18 +3549,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3582,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3656,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Sisteme Beszel (Tabel)",
       "description": "Vizualizare tabel a tuturor sistemelor monitorizate Beszel cu coloane sortabile și indicatori de stare",
@@ -3954,11 +3701,19 @@
         },
         "showAgent": {
           "label": "Arată versiunea agentului"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Niciun sistem găsit",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Sistem",
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Acasă",
         "boards": "Planșe",
         "apps": "Aplicații",
         "integrations": "",
-        "customWidgets": "",
         "searchEngies": "",
         "medias": "",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Elimină",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Gestionați",
       "boards": {
         "label": "Planșe"
@@ -5707,18 +5466,6 @@
           "label": "Editare"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Utilizatori",
         "create": {
diff --git a/packages/translation/src/lang/ru.json b/packages/translation/src/lang/ru.json
index 90082f7ab..99b1f3cc1 100644
--- a/packages/translation/src/lang/ru.json
+++ b/packages/translation/src/lang/ru.json
@@ -688,211 +688,6 @@
       "add": "Добавить приложение"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Новый динамический элемент",
-        "remove": "Удалить динамический элемент"
+        "create": "Новый контейнер",
+        "remove": "Удалить контейнер"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Удалить динамический элемент",
-        "message": "Вы уверены, что хотите удалить этот динамический элемент? Содержимое будет перемещено в то же место в родительском элементе."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Название"
-        }
-      },
-      "action": {
-        "create": "Новая категория",
-        "edit": "Переименовать категорию",
-        "remove": "Удалить категорию",
-        "moveUp": "Переместить вверх",
-        "moveDown": "Переместить вниз",
-        "createAbove": "Создать категорию выше",
-        "createBelow": "Создать категорию ниже",
-        "openAllInNewTabs": "Открыть всё в новых вкладках"
-      },
-      "create": {
-        "title": "Новая категория",
-        "submit": "Добавить категорию"
-      },
-      "remove": {
-        "title": "Удалить категорию",
-        "message": "Вы уверены, что хотите удалить категорию {name}?"
-      },
-      "edit": {
-        "title": "Переименовать категорию",
-        "submit": "Переименовать категорию"
-      },
-      "menu": {
-        "label": {
-          "create": "Новая категория",
-          "changePosition": "Изменить позицию",
-          "settings": "Настройки"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Открыть всё в новых вкладках",
-        "text": "Некоторые браузеры могут блокировать массовое открытие вкладок из соображений безопасности. Homarr не смог открыть все окна, поскольку ваш браузер заблокировал это действие. Пожалуйста, разрешите \"Открывать всплывающие окна\" и повторите попытку."
+        "title": "Удалить контейнер",
+        "message": "Вы уверены, что хотите удалить этот контейнер? Содержимое будет перемещено в то же место в родительском элементе."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": "Обратная сортировка"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "Не удалось получить статистику контейнеров"
+        "internalServerError": "Не удалось получить статистику контейнеров",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "Показывать только воспроизводимое",
           "description": "Отключение этой опции не работает для Plex"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "Сейчас воспроизводится",
         "user": "Пользователь",
@@ -2734,6 +2512,9 @@
         "id": "Id",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -3768,18 +3549,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3582,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3656,6 @@
         "unhealthy": "Неисправен"
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Системы Beszel (Таблица)",
       "description": "Табличное представление всех систем, отслеживаемых Beszel, с сортируемыми столбцами и индикаторами статуса",
@@ -3954,11 +3701,19 @@
         },
         "showAgent": {
           "label": "Показать версию агента"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Системы не найдены",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Система",
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Главная",
         "boards": "Панели",
         "apps": "Приложения",
         "integrations": "Интеграции",
-        "customWidgets": "",
         "searchEngies": "Поисковые системы",
         "medias": "Медиафайлы",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Удалить",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Контейнеры удалены",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Управление",
       "boards": {
         "label": "Панели"
@@ -5707,18 +5466,6 @@
           "label": "Редактировать"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Пользователи",
         "create": {
diff --git a/packages/translation/src/lang/sk.json b/packages/translation/src/lang/sk.json
index 381c20d0a..91afc3ea7 100644
--- a/packages/translation/src/lang/sk.json
+++ b/packages/translation/src/lang/sk.json
@@ -688,211 +688,6 @@
       "add": "Pridajte aplikáciu"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "Vlastné widgety",
-        "noResults": "Zatiaľ žiadne vlastné widgety. Vytvorte svoj prvý!",
-        "loading": "Nahrávam..."
-      },
-      "create": {
-        "title": "Vytvoriť vlastný widget",
-        "subtitle": "Definujte URL API, autentifikáciu a spôsob zobrazenia údajov odpovede."
-      },
-      "edit": {
-        "title": "Upraviť vlastný widget"
-      }
-    },
-    "action": {
-      "create": "Vytvoriť",
-      "import": "Importovať",
-      "save": "Uložiť",
-      "delete": "Odstrániť vlastný widget",
-      "deleteConfirm": "Naozaj chcete odstrániť \"{name}\"? Táto akcia sa nedá vrátiť späť.",
-      "export": "Exportovať",
-      "addMapping": "Pridať mapovanie",
-      "addColumn": "Pridať stĺpec",
-      "edit": "Upraviť",
-      "removeMapping": "Odstrániť mapovanie",
-      "removeColumn": "Odstrániť stĺpec",
-      "addItem": "Pridať položku",
-      "removeItem": "Odstrániť položku",
-      "addBar": "Pridať pruh",
-      "duplicate": "Duplikovať",
-      "copyAiPrompt": "Kopírovať AI prompt",
-      "enable": "Povoliť",
-      "disable": "Zakázať",
-      "menu": "Akcie"
-    },
-    "field": {
-      "name": "Názov",
-      "description": "Popis",
-      "iconUrl": "URL ikony",
-      "url": "URL",
-      "authType": "Typ autentifikácie",
-      "headerName": "Názov hlavičky/parametra dotazu",
-      "method": "Metóda",
-      "requestBody": "Telo požiadavky",
-      "displayType": "Typ zobrazenia",
-      "jsonPath": "JSON cesta",
-      "jsonPathHint": "Použite syntax JSONPath na extrakciu hodnôt, napr. $.data.teplota alebo $.polozky[0].nazov",
-      "label": "Označenie",
-      "unit": "Jednotka",
-      "mappings": "Mapovania",
-      "tablePath": "JSON cesta poľa",
-      "tablePathHint": "Cesta k poľu v odpovedi, napr. $.data.polozky",
-      "columns": "Stĺpce",
-      "header": "Hlavička",
-      "items": "Položky",
-      "gridColumns": "Stĺpce mriežky",
-      "cardStyle": "Štýl karty",
-      "bars": "Pruhy",
-      "valuePath": "JSON cesta hodnoty",
-      "maxPath": "JSON cesta maximálnej hodnoty",
-      "showPercentage": "Zobraziť percentá",
-      "barSize": "Veľkosť pruhu",
-      "goodValues": "Dobré hodnoty (oddelené čiarkou)",
-      "dotSize": "Veľkosť bodky",
-      "valueSize": "Veľkosť hodnoty",
-      "labelPosition": "Pozícia označenia",
-      "kvLayout": "Rozloženie",
-      "striped": "Pruhované riadky",
-      "compact": "Kompaktný režim",
-      "maxHeight": "Max. výška (px)",
-      "color": "Farba",
-      "buttonLabel": "Označenie tlačidla",
-      "buttonColor": "Farba tlačidla",
-      "confirmText": "Text potvrdenia",
-      "confirmTextHint": "Ak je nastavený, pred vykonaním požiadavky sa zobrazí dialóg potvrdenia",
-      "successMessage": "Správa o úspechu",
-      "successMessageHint": "Správa zobrazená po úspešnom vykonaní",
-      "enabled": "Povolené",
-      "template": {
-        "label": "JSX šablóna",
-        "description": "Mantine JSX šablóna. Prístup k poliam odpovede API cez dátové väzby (napr. data.nazov). Používajte iba whitelistované komponenty. Zakázané: constructor, __proto__, eval, Function, window, document."
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "Teplota CPU",
-      "exampleLabelShort": "Teplota CPU",
-      "exampleHeader": "Názov",
-      "exampleUnit": "°C",
-      "iconUrl": "https://...",
-      "url": "https://api.priklad.com/api/v1/status",
-      "headerName": "X-API-Key",
-      "jsonPath": "$.data.hodnota",
-      "tablePath": "$.data.polozky",
-      "columnJsonPath": "$.nazov",
-      "valuePath": "$.data.pouzite",
-      "maxPath": "$.data.celkom",
-      "goodValues": "online, true, up",
-      "color": "modrá"
-    },
-    "cardStyleOption": {
-      "filled": "Vyplnené",
-      "outline": "Obrys",
-      "subtle": "Jemný"
-    },
-    "layoutOption": {
-      "list": "Zoznam",
-      "grid": "Mriežka"
-    },
-    "sizeOption": {
-      "sm": "Malé",
-      "md": "Stredné",
-      "lg": "Veľké",
-      "xl": "Extra veľké"
-    },
-    "labelPositionOption": {
-      "above": "Nad",
-      "below": "Pod"
-    },
-    "fieldset": {
-      "general": "Všeobecné",
-      "connection": "Pripojenie API",
-      "display": "Konfigurácia zobrazenia"
-    },
-    "displayTypeDescription": {
-      "singleValue": "Zobraziť jednu extrahovanú hodnotu s označením a jednotkou",
-      "keyValue": "Zobraziť viacero označených hodnôt vedľa seba",
-      "table": "Zobraziť riadky údajov vo formáte tabuľky",
-      "statGrid": "Farebné karty štatistík v mriežke – ako widgety Pi-Hole alebo Speedtest",
-      "progressBars": "Pruhy postupu zobrazujúce využitie alebo dokončenie – pre disk, pamäť, kvóty",
-      "statusIndicator": "Farebné bodky stavu zobrazujúce online/offline alebo stavy zdravia",
-      "countGrid": "Kompaktné počítadlá číslo + označenie v tesnej mriežke",
-      "raw": "Prehľadne formátovaný JSON výstup pre ladenie",
-      "actionButton": "Tlačidlo, ktoré po kliknutí spustí požiadavku",
-      "customJsx": "Vlastné rozloženie JSX pomocou whitelistovaných komponentov Mantine s plnou väzbou API dát"
-    },
-    "method": {
-      "GET": "GET",
-      "POST": "POST",
-      "PUT": "PUT",
-      "DELETE": "DELETE",
-      "PATCH": "PATCH"
-    },
-    "authType": {
-      "none": "Žiadna",
-      "bearer": "Bearer token",
-      "basic": "Basic Auth",
-      "apiKeyHeader": "API kľúč (hlavička)",
-      "apiKeyQuery": "API kľúč (dotaz)"
-    },
-    "displayType": {
-      "singleValue": "Jedna hodnota",
-      "keyValue": "Kľúč-hodnota",
-      "table": "Tabuľka",
-      "statGrid": "Mriežka štatistík",
-      "progressBars": "Pruhy postupu",
-      "statusIndicator": "Indikátor stavu",
-      "countGrid": "Mriežka počtu",
-      "raw": "Surové JSON",
-      "actionButton": "Akčné tlačidlo",
-      "customJsx": "Vlastné JSX"
-    },
-    "secret": {
-      "apiKey": "API kľúč / token",
-      "username": "Používateľské meno",
-      "password": "Heslo",
-      "savedPlaceholder": "••••••• (uložené, ponechajte prázdne pre zachovanie)"
-    },
-    "preview": {
-      "title": "Náhľad",
-      "test": "Test",
-      "hint": "Kliknite na Test pre náhľad odpovede API s vašou aktuálnou konfiguráciou.",
-      "rawResponse": "Surová JSON odpoveď"
-    },
-    "notification": {
-      "created": "Widget \"{name}\" bol úspešne vytvorený.",
-      "updated": "Widget \"{name}\" bol úspešne aktualizovaný.",
-      "deleted": "Widget \"{name}\" bol odstránený.",
-      "imported": "",
-      "aiPromptCopied": "AI prompt skopírovaný do schránky",
-      "aiPromptDescription": "Skopírujte pripravený prompt a vložte ho do akéhokoľvek AI chatbota (ChatGPT, Claude, Gemini...). Obsahuje úplnú schému widgetu a vašu odpoveď API, aby AI mohla vygenerovať pripravenú JSON konfiguráciu na import.",
-      "aiPromptCopy": "Skopírovať do schránky",
-      "aiPromptNoResponse": "Tip: Najprv spustite test, aby ste zahrnuli odpoveď API do výzvy pre lepšie výsledky.",
-      "aiPromptCopyError": "Nepodarilo sa skopírovať výzvu do schránky. Váš prehliadač možno nepodporuje túto funkciu.",
-      "createError": "Nepodarilo sa vytvoriť widget. Skontrolujte, či je váš API endpoint dostupný.",
-      "updateError": "Nepodarilo sa aktualizovať widget. Vaše zmeny neboli uložené.",
-      "importError": "Nepodarilo sa importovať widget. Uistite sa, že súbor je platný JSON export vlastného widgetu.",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Nová dynamická sekcia",
-        "remove": "Nová dynamická sekcia"
+        "create": "Nový kontajner",
+        "remove": "Odstrániť kontajner"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Nová dynamická sekcia",
-        "message": "Naozaj chcete odstrániť túto dynamickú sekciu? Položky sa presunú na rovnaké miesto v nadradenej sekcii."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Názov"
-        }
-      },
-      "action": {
-        "create": "Nová kategória",
-        "edit": "Premenovať kategóriu",
-        "remove": "Odstrániť kategóriu",
-        "moveUp": "Posunúť nahor",
-        "moveDown": "Posunúť nadol",
-        "createAbove": "Nová kategória vyššie",
-        "createBelow": "Nová kategória nižšie",
-        "openAllInNewTabs": "Otvoriť všetko na kartách"
-      },
-      "create": {
-        "title": "Nová kategória",
-        "submit": "Pridať kategóriu"
-      },
-      "remove": {
-        "title": "Odstrániť kategóriu",
-        "message": "Naozaj chcete odstrániť kategóriu {name}?"
-      },
-      "edit": {
-        "title": "Premenovať kategóriu",
-        "submit": "Premenovať kategóriu"
-      },
-      "menu": {
-        "label": {
-          "create": "Nová kategória",
-          "changePosition": "Zmeniť pozíciu",
-          "settings": "Nastavenia"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Otvoriť všetko na kartách",
-        "text": "Niektoré prehliadače môžu z bezpečnostných dôvodov blokovať hromadné otváranie kariet. Homarr nemohol otvoriť všetky okná, pretože váš prehliadač túto akciu zablokoval. Povoľte možnosť „Otvoriť kontextové okná“ a skúste to znova."
+        "title": "Odstrániť kontajner",
+        "message": "Naozaj chcete odstrániť tento kontajner? Položky sa presunú na rovnaké miesto v nadradenej sekcii."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "Nepodarilo sa načítať štatistiky kontajnerov"
+        "internalServerError": "Nepodarilo sa načítať štatistiky kontajnerov",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "Zobraziť len aktuálne prehrávanú",
           "description": "Zakázanie tohto nebude fungovať pre plex"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "Momentálne sa prehráva",
         "user": "Používateľ",
@@ -2734,6 +2512,9 @@
         "id": "Id",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -2802,193 +2583,6 @@
         "internalServerError": "Nepodarilo sa načítať údaje Paperless-ngx"
       }
     },
-    "patchmon": {
-      "name": "",
-      "description": "",
-      "title": "",
-      "totalHosts": "",
-      "hostsNeedingUpdates": "",
-      "securityUpdates": "",
-      "upToDateHosts": "",
-      "hostsWithSecurityUpdates": "",
-      "recentUpdates24h": "",
-      "totalOutdatedPackages": "",
-      "totalRepos": "",
-      "osDistribution": "",
-      "compliance": "",
-      "complianceRatio": "",
-      "lastUpdated": "",
-      "option": {
-        "showTotalHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsNeedingUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showUpToDateHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showRecentUpdates24h": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalOutdatedPackages": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalRepos": {
-          "label": "",
-          "description": ""
-        },
-        "enableThresholdColors": {
-          "label": "",
-          "description": ""
-        },
-        "useCustomThresholds": {
-          "label": "",
-          "description": ""
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "",
-            "percent": ""
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "showOsDistribution": {
-          "label": "",
-          "description": ""
-        },
-        "osDistributionLimit": {
-          "label": "",
-          "description": "",
-          "option": {
-            "3": "",
-            "5": "",
-            "10": "",
-            "all": ""
-          }
-        },
-        "showOsVersion": {
-          "label": "",
-          "description": ""
-        },
-        "showComplianceHero": {
-          "label": "",
-          "description": ""
-        },
-        "osDisplayMode": {
-          "label": "",
-          "description": "",
-          "option": {
-            "bars": "",
-            "donut": ""
-          }
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
-    "bazarr": {
-      "name": "",
-      "description": "",
-      "episodes": "",
-      "movies": "",
-      "providers": "",
-      "status": "",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "",
-          "description": ""
-        },
-        "showMissingMovies": {
-          "label": "",
-          "description": ""
-        },
-        "showProviderIssues": {
-          "label": "",
-          "description": ""
-        },
-        "showHealthIssues": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "immich-serverStats": {
       "name": "",
       "description": "",
@@ -3361,35 +2955,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showMissing": {
-          "label": ""
-        },
-        "showQueued": {
-          "label": ""
-        },
-        "pageSize": {
-          "label": ""
-        }
-      },
-      "tab": {
-        "missing": "",
-        "queued": ""
-      },
-      "type": {
-        "movie": "",
-        "episode": ""
-      },
-      "empty": {
-        "missing": "",
-        "queued": "",
-        "noTabsEnabled": ""
-      },
-      "timeLeft": ""
-    },
     "rssFeed": {
       "name": "RSS kanály",
       "description": "Monitorujte a zobrazujte jeden alebo viac všeobecných informačných kanálov RSS, ATOM alebo JSON",
@@ -3718,40 +3283,6 @@
         "internalServerError": "Nepodarilo sa načítať údaje o dostupnosti"
       }
     },
-    "traefik": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showTcp": {
-          "label": ""
-        },
-        "showUdp": {
-          "label": ""
-        },
-        "showEntryPoints": {
-          "label": ""
-        }
-      },
-      "instances": "",
-      "versionUnknown": "",
-      "summary": {
-        "routers": "",
-        "entryPoints": ""
-      },
-      "resource": {
-        "routers": "",
-        "services": "",
-        "middlewares": ""
-      },
-      "status": {
-        "healthy": "",
-        "errors": "",
-        "warnings": ""
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
     "audioStats": {
       "name": "Audio štatistiky",
       "description": "Štatistiky knižnice a prehrávania z Navidrome alebo Audiobookshelf",
@@ -3768,18 +3299,6 @@
           "label": "Zobraziť skladby",
           "description": "Zobraziť celkový počet skladieb vo vašej hudobnej knižnici (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "Zobraziť práve hrané",
-          "description": "Zobraziť skladby, ktoré sa práve prehrávajú (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "Zobraziť zoznam práve hraných",
-          "description": "Zobraziť jednotlivé skladby namiesto len počtu aktívnych streamov (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "Max. počet položiek práve hraných",
-          "description": "Maximálny počet skladieb zobrazených v zozname práve hraných (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "Zobraziť počet knižníc",
           "description": "Zobraziť počet knižníc na vašej inštancii (Audiobookshelf)"
@@ -3813,8 +3332,6 @@
       "podcasts": "Podcasty",
       "listeningTime": "Čas počúvania",
       "activeSessions": "Aktívne relácie",
-      "nowPlaying": "Práve hrané",
-      "nowPlayingCount": "{count, plural, one {# stream} few {# streamy} many {# streamov} other {# streamov}}",
       "error": {
         "internalServerError": "Nepodarilo sa načítať údaje audio štatistík"
       }
@@ -3889,26 +3406,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Beszel systémy (tabuľka)",
       "description": "Tabuľkový pohľad všetkých systémov monitorovaných Beszel s triediteľnými stĺpcami a indikátormi stavu",
@@ -3954,11 +3451,19 @@
         },
         "showAgent": {
           "label": "Zobraziť verziu agenta"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Nenašli sa žiadne systémy",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Systém",
@@ -4151,6 +3656,256 @@
           "subtitle": "Sieťová prevádzka Docker kontajnerov"
         }
       }
+    },
+    "patchmon": {
+      "name": "",
+      "description": "",
+      "title": "",
+      "totalHosts": "",
+      "hostsNeedingUpdates": "",
+      "securityUpdates": "",
+      "upToDateHosts": "",
+      "hostsWithSecurityUpdates": "",
+      "recentUpdates24h": "",
+      "totalOutdatedPackages": "",
+      "totalRepos": "",
+      "osDistribution": "",
+      "compliance": "",
+      "complianceRatio": "",
+      "lastUpdated": "",
+      "option": {
+        "showTotalHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsNeedingUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showUpToDateHosts": {
+          "label": "",
+          "description": ""
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "",
+          "description": ""
+        },
+        "showRecentUpdates24h": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalOutdatedPackages": {
+          "label": "",
+          "description": ""
+        },
+        "showTotalRepos": {
+          "label": "",
+          "description": ""
+        },
+        "enableThresholdColors": {
+          "label": "",
+          "description": ""
+        },
+        "useCustomThresholds": {
+          "label": "",
+          "description": ""
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "",
+            "percent": ""
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "",
+          "description": ""
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "",
+          "description": ""
+        },
+        "showOsDistribution": {
+          "label": "",
+          "description": ""
+        },
+        "osDistributionLimit": {
+          "label": "",
+          "description": "",
+          "option": {
+            "3": "",
+            "5": "",
+            "10": "",
+            "all": ""
+          }
+        },
+        "showOsVersion": {
+          "label": "",
+          "description": ""
+        },
+        "showComplianceHero": {
+          "label": "",
+          "description": ""
+        },
+        "osDisplayMode": {
+          "label": "",
+          "description": "",
+          "option": {
+            "bars": "",
+            "donut": ""
+          }
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "bazarr": {
+      "name": "",
+      "description": "",
+      "episodes": "",
+      "movies": "",
+      "providers": "",
+      "status": "",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "",
+          "description": ""
+        },
+        "showMissingMovies": {
+          "label": "",
+          "description": ""
+        },
+        "showProviderIssues": {
+          "label": "",
+          "description": ""
+        },
+        "showHealthIssues": {
+          "label": "",
+          "description": ""
+        }
+      },
+      "error": {
+        "internalServerError": ""
+      }
+    },
+    "mediaMissing": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showMissing": {
+          "label": ""
+        },
+        "showQueued": {
+          "label": ""
+        },
+        "pageSize": {
+          "label": ""
+        }
+      },
+      "tab": {
+        "missing": "",
+        "queued": ""
+      },
+      "type": {
+        "movie": "",
+        "episode": ""
+      },
+      "empty": {
+        "missing": "",
+        "queued": "",
+        "noTabsEnabled": ""
+      },
+      "timeLeft": ""
+    },
+    "traefik": {
+      "name": "",
+      "description": "",
+      "option": {
+        "showTcp": {
+          "label": ""
+        },
+        "showUdp": {
+          "label": ""
+        },
+        "showEntryPoints": {
+          "label": ""
+        }
+      },
+      "instances": "",
+      "versionUnknown": "",
+      "summary": {
+        "routers": "",
+        "entryPoints": ""
+      },
+      "resource": {
+        "routers": "",
+        "services": "",
+        "middlewares": ""
+      },
+      "status": {
+        "healthy": "",
+        "errors": "",
+        "warnings": ""
+      },
+      "error": {
+        "internalServerError": ""
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Domovská stránka",
         "boards": "Dosky",
         "apps": "Aplikácie",
         "integrations": "Integrácie",
-        "customWidgets": "",
         "searchEngies": "Vyhľadávače",
         "medias": "Médiá",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Odstrániť",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Kontajnery boli odstránené",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Spravovať",
       "boards": {
         "label": "Dosky"
@@ -5707,18 +5466,6 @@
           "label": "Upraviť"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Používatelia",
         "create": {
diff --git a/packages/translation/src/lang/sl.json b/packages/translation/src/lang/sl.json
index 75f7cf7ee..a13a267cc 100644
--- a/packages/translation/src/lang/sl.json
+++ b/packages/translation/src/lang/sl.json
@@ -688,211 +688,6 @@
       "add": "Dodaj aplikacijo"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Nova dinamična vsebina",
-        "remove": "Odstrani dinamični odsek"
+        "create": "Nov vsebnik",
+        "remove": "Odstrani vsebnik"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Odstrani dinamični odsek",
-        "message": "Ali ste prepričani, da želite odstraniti ta dinamični odsek? Elementi bodo premaknjeni na isto mesto v nadrejenem odseku."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Ime"
-        }
-      },
-      "action": {
-        "create": "Nova kategorija",
-        "edit": "Preimenuj kategorijo",
-        "remove": "Odstrani kategorijo",
-        "moveUp": "Premaknite se navzgor",
-        "moveDown": "Premaknite se navzdol",
-        "createAbove": "Nova kategorija zgoraj",
-        "createBelow": "Nova kategorija spodaj",
-        "openAllInNewTabs": ""
-      },
-      "create": {
-        "title": "Nova kategorija",
-        "submit": "Dodaj kategorijo"
-      },
-      "remove": {
-        "title": "Odstrani kategorijo",
-        "message": "Ali ste prepričani, da želite odstraniti kategorijo {name}?"
-      },
-      "edit": {
-        "title": "Preimenuj kategorijo",
-        "submit": "Preimenuj kategorijo"
-      },
-      "menu": {
-        "label": {
-          "create": "Nova kategorija",
-          "changePosition": "Spremeni položaj",
-          "settings": "Nastavitve"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "",
-        "text": ""
+        "title": "Odstrani vsebnik",
+        "message": "Ali ste prepričani, da želite odstraniti ta vsebnik? Elementi bodo premaknjeni na isto mesto v nadrejenem odseku."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "",
           "description": ""
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "",
         "user": "",
@@ -2734,6 +2512,9 @@
         "id": "",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -3768,18 +3549,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3582,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3656,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Beszel sistemi (tabela)",
       "description": "Tabelarni pogled vseh sistemov, ki jih spremlja Beszel, z razvrščljivimi stolpci in indikatorji stanja",
@@ -3954,11 +3701,19 @@
         },
         "showAgent": {
           "label": "Pokaži različico agenta"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Ni najdenih sistemov",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Sistem",
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Domov",
         "boards": "Deske",
         "apps": "Aplikacije",
         "integrations": "",
-        "customWidgets": "",
         "searchEngies": "",
         "medias": "",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Odstrani",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Upravljanje",
       "boards": {
         "label": "Deske"
@@ -5707,18 +5466,6 @@
           "label": "Uredi"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Uporabniki",
         "create": {
diff --git a/packages/translation/src/lang/sv.json b/packages/translation/src/lang/sv.json
index 31eee6880..7cd7aaf8c 100644
--- a/packages/translation/src/lang/sv.json
+++ b/packages/translation/src/lang/sv.json
@@ -688,211 +688,6 @@
       "add": "Lägg till en applikation"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Ny dynamisk sektion",
-        "remove": ""
+        "create": "Ny behållare",
+        "remove": "Ta bort behållare"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "",
-        "message": ""
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Namn"
-        }
-      },
-      "action": {
-        "create": "Ny kategori",
-        "edit": "",
-        "remove": "",
-        "moveUp": "Flytta uppåt",
-        "moveDown": "Flytta nedåt",
-        "createAbove": "",
-        "createBelow": "",
-        "openAllInNewTabs": ""
-      },
-      "create": {
-        "title": "",
-        "submit": "Lägg till kategori"
-      },
-      "remove": {
-        "title": "",
-        "message": "Är du säker du vill ta bort kategorin {name}?"
-      },
-      "edit": {
-        "title": "",
-        "submit": ""
-      },
-      "menu": {
-        "label": {
-          "create": "",
-          "changePosition": "Ändra position",
-          "settings": "Inställningar"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "",
-        "text": ""
+        "title": "Ta bort behållare",
+        "message": "Är du säker på att du vill ta bort den här behållaren? Objekten flyttas till samma plats i den överordnade sektionen."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "",
           "description": ""
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "",
         "user": "",
@@ -2734,6 +2512,9 @@
         "id": "",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -3768,18 +3549,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3582,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3656,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Beszel-system (tabell)",
       "description": "Tabellvy över alla Beszel-övervakade system med sorterbara kolumner och statusindikatorer",
@@ -3954,11 +3701,19 @@
         },
         "showAgent": {
           "label": "Visa agentversion"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Inga system hittades",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "System",
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Hem",
         "boards": "Tavlor",
         "apps": "Applikationer",
         "integrations": "Integrationer",
-        "customWidgets": "",
         "searchEngies": "Sökmotorer",
         "medias": "Media",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Ta bort",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Hantera",
       "boards": {
         "label": "Tavlor"
@@ -5707,18 +5466,6 @@
           "label": "Redigera"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Användare",
         "create": {
diff --git a/packages/translation/src/lang/tr.json b/packages/translation/src/lang/tr.json
index 90d55908d..f63720d8f 100644
--- a/packages/translation/src/lang/tr.json
+++ b/packages/translation/src/lang/tr.json
@@ -143,7 +143,7 @@
           "goToBoard": "{name} Paneline Git",
           "createBoard": "İlk Panelinizi Oluşturun",
           "inviteUser": "Yeni Kullanıcı Davet Et",
-          "docs": "Dökümanları Oku"
+          "docs": "Dokümanları Oku"
         }
       }
     },
@@ -169,15 +169,15 @@
     },
     "field": {
       "email": {
-        "label": "E-Posta",
+        "label": "E-posta",
         "verified": "Doğrulandı"
       },
       "username": {
         "label": "Kullanıcı adı"
       },
       "password": {
-        "label": "Şifre",
-        "suggestionsTitle": "Şifre önerileri",
+        "label": "Parola",
+        "suggestionsTitle": "Parola önerileri",
         "suggestion": {
           "length": "En az 8 karakter içermeli",
           "lowercase": "Küçük harf içermeli",
@@ -187,10 +187,10 @@
         }
       },
       "passwordConfirm": {
-        "label": "Şifreyi Onayla"
+        "label": "Parolayı Onayla"
       },
       "previousPassword": {
-        "label": "Eski Şifre"
+        "label": "Eski Parola"
       },
       "homeBoard": {
         "label": "Ana panel"
@@ -199,8 +199,8 @@
         "label": "Pingler İçin Simge Kullanın"
       },
       "enableRightClickOnWidgets": {
-        "label": "",
-        "description": ""
+        "label": "Widget'lara sağ tıklamayı etkinleştir",
+        "description": "Bir widget'a sağ tıklandığında Homarr bağlam menüsünü gösterir. Tarayıcının varsayılan menüsünü (ör. “Bağlantıyı yeni sekmede aç”) kullanmak için devre dışı bırakın."
       },
       "defaultSearchEngine": {
         "label": "Öntanımlı arama motoru"
@@ -662,7 +662,7 @@
         "label": "Tanım"
       },
       "url": {
-        "label": "Url"
+        "label": "URL"
       },
       "useDifferentUrlForPing": {
         "checkbox": {
@@ -688,211 +688,6 @@
       "add": "Bir uygulama ekle"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -970,7 +765,7 @@
         "label": "İsim"
       },
       "url": {
-        "label": "Url"
+        "label": "URL"
       },
       "attemptSearchEngineCreation": {
         "label": "Arama Motoru Oluştur",
@@ -1002,7 +797,7 @@
       "dnsHole": "DNS",
       "mediaService": "Medya",
       "calendar": "Takvim",
-      "mediaSearch": "Ara",
+      "mediaSearch": "Arama",
       "mediaRelease": "Sürümler",
       "mediaRequest": "Talepler",
       "downloadClient": "İndirmeler",
@@ -1012,7 +807,7 @@
       "smartHomeServer": "Akıllı Ev",
       "indexerManager": "İndeksleyici",
       "healthMonitoring": "Sağlık",
-      "search": "Ara",
+      "search": "Arama",
       "mediaTranscoding": "Kod Dönüştürme",
       "networkController": "Ağ",
       "releasesProvider": "Sürümler",
@@ -1020,14 +815,14 @@
       "firewall": "Güvenlik Duvarı",
       "timetable": "Zaman Çizelgesi",
       "photoService": "Fotoğraflar",
-      "documents": "",
+      "documents": "Belgeler",
       "notes": "Notlar",
       "mediaMonitoring": "İzleme",
       "speedtest": "Hız Testi",
       "analytics": "Analiz",
-      "vpn": "",
-      "mediaLibrary": "",
-      "uptimeMonitoring": ""
+      "vpn": "VPN",
+      "mediaLibrary": "Medya Kütüphanesi",
+      "uptimeMonitoring": "Çalışma Süresi İzleme"
     },
     "testConnection": {
       "action": {
@@ -1196,7 +991,7 @@
         },
         "notFound": {
           "title": "Bulunamadı",
-          "message": "Muhtemelen yanlış Url veya yol"
+          "message": "Muhtemelen yanlış URL veya yol"
         },
         "internalServerError": {
           "title": "İç Sunucu Hatası",
@@ -1278,7 +1073,7 @@
           "newLabel": "Yeni konu"
         },
         "url": {
-          "label": "Url",
+          "label": "URL",
           "newLabel": "Yeni url"
         },
         "opnsenseApiKey": {
@@ -1290,12 +1085,12 @@
           "newLabel": "Yeni API Anahtarı (Gizli Anahtar)"
         },
         "patchmonApiKey": {
-          "label": "",
-          "newLabel": ""
+          "label": "API Anahtarı",
+          "newLabel": "Yeni API Anahtarı"
         },
         "patchmonApiSecret": {
-          "label": "",
-          "newLabel": ""
+          "label": "API Gizli Anahtarı",
+          "newLabel": "Yeni API Gizli Anahtarı"
         },
         "githubAppId": {
           "label": "Uygulama Kimliği",
@@ -1310,8 +1105,8 @@
           "newLabel": "Yeni özel anahtar"
         },
         "slug": {
-          "label": "",
-          "newLabel": ""
+          "label": "Durum sayfası kısa adı",
+          "newLabel": "Yeni durum sayfası kısa adı"
         }
       }
     },
@@ -1321,40 +1116,40 @@
       "full": "Tam entegrasyon erişimi"
     },
     "audiobookshelf": {
-      "name": "",
-      "description": ""
+      "name": "Audiobookshelf",
+      "description": "Kendi sunucunuzda barındırılan sesli kitap ve podcast sunucusu"
     },
     "navidrome": {
-      "name": "",
-      "description": ""
+      "name": "Navidrome",
+      "description": "Subsonic API uyumlu, kendi sunucunuzda barındırılan müzik akış sunucusu"
     },
     "uptimeKuma": {
-      "name": "",
-      "description": "",
+      "name": "Uptime Kuma",
+      "description": "Herkese açık durum sayfaları sunan, kendi sunucunuzda barındırılan çalışma süresi izleme sistemi",
       "secret": {
         "slug": {
-          "description": ""
+          "description": "Herkese açık durum sayfanızın kısa adı. Ayarlanmazsa varsayılan olarak “default” kullanılır."
         },
         "apiKey": {
-          "description": ""
+          "description": "Kimlik doğrulamalı /metrics erişimi için isteğe bağlı API anahtarı"
         }
       }
     },
     "traefik": {
-      "name": "",
-      "description": ""
+      "name": "Traefik",
+      "description": "Bulut tabanlı ters proxy ve yük dengeleyici"
     },
     "paperlessNgx": {
-      "name": "",
-      "description": ""
+      "name": "Paperless-ngx",
+      "description": "Taranmış belgeleri arşivlemek ve düzenlemek için belge yönetim sistemi"
     },
     "patchmon": {
-      "name": "",
-      "description": ""
+      "name": "PatchMon",
+      "description": "Linux ana makineleri için yama yönetimi ve izleme"
     },
     "bazarr": {
-      "name": "",
-      "description": ""
+      "name": "Bazarr",
+      "description": "Altyazıları yöneten ve indiren Sonarr ve Radarr yardımcı uygulaması"
     }
   },
   "media": {
@@ -1398,7 +1193,7 @@
       }
     },
     "noResults": {
-      "title": "Medya yüklenmedi"
+      "title": "Yüklenmiş medya yok"
     }
   },
   "common": {
@@ -1427,7 +1222,7 @@
       "continue": "Devam Et",
       "previous": "Önceki",
       "next": "İleri",
-      "checkoutDocs": "Dökümanlara göz at",
+      "checkoutDocs": "Dokümanlara göz at",
       "checkLogs": "Daha fazla ayrıntı için günlükleri kontrol edin",
       "tryAgain": "Tekrar Deneyin",
       "loading": "Yükleniyor",
@@ -1438,9 +1233,9 @@
     "iconPicker": {
       "label": "Simge URL'si",
       "header": "Simgeleri filtrelemek için isim veya nesne yazın... Homarr sizin için {countIcons} simge arasında arama yapacaktır.",
-      "headerLoading": "",
-      "noResults": "",
-      "error": ""
+      "headerLoading": "Simge aramak için yazın…",
+      "noResults": "“{search}” aramasıyla eşleşen simge yok.",
+      "error": "Simgeler yüklenemedi."
     },
     "colorScheme": {
       "options": {
@@ -1492,7 +1287,7 @@
         "switchToDarkMode": "Koyu Temaya Geç",
         "switchToLightMode": "Aydınlık Temaya Geç",
         "management": "Yönetim",
-        "docker": "",
+        "docker": "Docker",
         "preferences": "Tercihleriniz",
         "logout": "Oturumu kapat",
         "login": "Giriş",
@@ -1543,16 +1338,16 @@
     },
     "unit": {
       "speed": {
-        "kilometersPerHour": "km/h",
-        "milesPerHour": "mph"
+        "kilometersPerHour": "km/sa",
+        "milesPerHour": "mil/sa"
       }
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Yeni Dinamik Bölüm",
-        "remove": "Dinamik bölümü kaldır"
+        "create": "Yeni konteyner",
+        "remove": "Konteyneri kaldır"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Dinamik bölümü kaldır",
-        "message": "Bu dinamik bölümü kaldırmak istediğinizden emin misiniz? Öğeler üst bölümdeki aynı konuma taşınacaktır."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "İsim"
-        }
-      },
-      "action": {
-        "create": "Yeni Kategori",
-        "edit": "Kategoriyi Yeniden Adlandır",
-        "remove": "Kategoriyi kaldır",
-        "moveUp": "Yukarı taşı",
-        "moveDown": "Aşağı taşı",
-        "createAbove": "Yukarı Yeni Kategori",
-        "createBelow": "Aşağı Yeni Kategori",
-        "openAllInNewTabs": "Tümünü sekmelerde aç"
-      },
-      "create": {
-        "title": "Yeni Kategori",
-        "submit": "Kategori ekle"
-      },
-      "remove": {
-        "title": "Kategoriyi kaldır",
-        "message": "{name} kategorisini kaldırmak istediğinizden emin misiniz?"
-      },
-      "edit": {
-        "title": "Kategoriyi Yeniden Adlandır",
-        "submit": "Kategoriyi Yeniden Adlandır"
-      },
-      "menu": {
-        "label": {
-          "create": "Yeni Kategori",
-          "changePosition": "Pozisyonu değiştir",
-          "settings": "Ayarlar"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Tümünü sekmelerde aç",
-        "text": "Bazı tarayıcılar güvenlik nedeniyle sekmelerin toplu olarak açılmasını engelleyebilir. Homarr tüm pencereleri açamadı, çünkü tarayıcınız bu eylemi engelledi. Lütfen \"Açılır pencereleri aç\"a izin verin ve tekrar deneyin."
+        "title": "Konteyneri kaldır",
+        "message": "Bu konteyneri kaldırmak istediğinizden emin misiniz? Öğeler üst bölümdeki aynı konuma taşınacaktır."
       }
     }
   },
@@ -1623,15 +1378,15 @@
     "menu": {
       "label": {
         "settings": "Ayarlar",
-        "refresh": "",
-        "options": "",
-        "actions": ""
+        "refresh": "Yenile",
+        "options": "Seçenekler",
+        "actions": "Eylemler"
       },
       "status": {
-        "success": "",
-        "error": "",
-        "loading": "",
-        "idle": ""
+        "success": "Tamam",
+        "error": "Hata",
+        "loading": "Yükleniyor",
+        "idle": "Boşta"
       }
     },
     "create": {
@@ -1691,11 +1446,11 @@
   },
   "widget": {
     "integrationSelect": {
-      "configureIntegrationFirst": "",
-      "loading": "",
-      "placeholder": "",
-      "noResults": "",
-      "loadError": ""
+      "configureIntegrationFirst": "Önce bir entegrasyon bağlayın",
+      "loading": "Yükleniyor...",
+      "placeholder": "Bir seçenek belirleyin",
+      "noResults": "Sonuç bulunamadı",
+      "loadError": "Seçenekler yüklenemedi"
     },
     "app": {
       "name": "Uygulama",
@@ -1785,11 +1540,11 @@
       }
     },
     "archiveTeamWarrior": {
-      "name": "",
-      "description": "",
+      "name": "ArchiveTeam Warrior",
+      "description": "ArchiveTeam Warrior durumunu, projelerini ve etkin arşivleme işlerini izleyin.",
       "option": {
         "showBroadcastMessage": {
-          "label": ""
+          "label": "Yayın mesajlarını göster"
         }
       }
     },
@@ -1907,14 +1662,14 @@
           "description": "Tarih biçimini değiştirmek için ISO 8601 standardını kullanın (bu diğer seçenekleri geçersiz kılacaktır)"
         },
         "showWeather": {
-          "label": "",
-          "description": ""
+          "label": "Hava durumunu göster",
+          "description": "Kartın köşesinde küçük, hareketli bir hava durumu simgesi ve sıcaklık gösterir"
         },
         "weatherLocation": {
-          "label": ""
+          "label": "Hava durumu konumu"
         },
         "isWeatherFormatFahrenheit": {
-          "label": ""
+          "label": "Fahrenhayt kullan"
         }
       }
     },
@@ -1944,7 +1699,7 @@
       "noStation": "İstasyon seçilmedi",
       "option": {
         "baseUrl": {
-          "label": ""
+          "label": "Search.ch URL'si"
         },
         "station": {
           "label": "İstasyon"
@@ -1976,8 +1731,8 @@
         "clear": "Biçimlendirmeyi temizle",
         "heading": "Başlık {level}",
         "align": "Metin hizalama: {position}",
-        "directionLtr": "",
-        "directionRtl": "",
+        "directionLtr": "Metin yönünü soldan sağa ayarla",
+        "directionRtl": "Metin yönünü sağdan sola ayarla",
         "blockquote": "Blok alıntı",
         "horizontalLine": "Yatay çizgi",
         "bulletList": "Maddeli liste",
@@ -2083,7 +1838,7 @@
           "label": "Coğrafi konuma izin ver (geolocation)"
         },
         "allowModals": {
-          "label": "Allow modals"
+          "label": "İletişim kutularına izin ver"
         }
       },
       "error": {
@@ -2242,7 +1997,7 @@
           "description": "Yalnızca mevcut hava durumunda"
         },
         "useImperialSpeed": {
-          "label": "Use mph for windspeed"
+          "label": "Rüzgâr hızı için mil/sa kullan"
         },
         "location": {
           "label": "Hava durumu konumu"
@@ -2262,13 +2017,13 @@
           "description": "Görüntülenecek tarihin biçimi"
         }
       },
-      "currentWindSpeed": "{currentWindSpeed} km/s",
+      "currentWindSpeed": "{currentWindSpeed} {unit}",
       "dailyForecast": {
         "sunrise": "Gün Doğumu",
         "sunset": "Gün Batımı",
-        "maxWindSpeed": "Maks. Rüzgar Hızı: {maxWindSpeed} km/s",
-        "maxWindGusts": "Maks. Rüzgar Hamlesi: {maxWindGusts} km/s",
-        "humidity": ""
+        "maxWindSpeed": "En yüksek rüzgâr hızı: {maxWindSpeed} {unit}",
+        "maxWindGusts": "En yüksek rüzgâr hamlesi: {maxWindGusts} {unit}",
+        "humidity": "Nem: %{humidity}"
       },
       "kind": {
         "clear": "Açık",
@@ -2319,7 +2074,7 @@
           "label": "Bellek Bilgilerini Göster"
         },
         "gpu": {
-          "label": "Show GPU Info"
+          "label": "GPU bilgilerini göster"
         },
         "showUptime": {
           "label": "Çalışma Süresini Göster"
@@ -2328,9 +2083,9 @@
           "label": "Dosya Sistemi Bilgilerini Göster"
         },
         "visibleStorageVolumes": {
-          "label": "",
-          "description": "",
-          "placeholder": ""
+          "label": "Görünür depolama birimleri",
+          "description": "Yalnızca seçilen entegrasyonların tümü Synology olduğunda kullanılabilir. Algılanan tüm depolama birimlerini göstermek için boş bırakın.",
+          "placeholder": "Depolama birimlerini seçin"
         },
         "defaultTab": {
           "label": "Varsayılan sekme"
@@ -2348,7 +2103,7 @@
         "memory": "Bellek: {memory}GiB",
         "memoryAvailable": "Kullanılabilir: {memoryAvailable} GiB ({percent}%)",
         "version": "Sürüm: {version}",
-        "uptime": "Çalışma Süresi: {days} Gün, {hours} Saat, {minutes} Dakika",
+        "uptime": "Çalışma süresi: {months} Ay, {days} Gün, {hours} Saat, {minutes} Dakika",
         "loadAverage": "Ortalama yük:",
         "minute": "1 dakika",
         "minutes": "{count} dakika",
@@ -2367,7 +2122,7 @@
         },
         "resource": {
           "node": {
-            "name": "Nodes"
+            "name": "Düğümler"
           },
           "qemu": {
             "name": "VM's"
@@ -2381,7 +2136,7 @@
         },
         "popover": {
           "rightSection": {
-            "node": "Node",
+            "node": "Düğüm",
             "vmId": "VM Kimliği",
             "plugin": "Eklenti"
           },
@@ -2402,7 +2157,7 @@
             "name": "İsim",
             "cpu": "İşlemci",
             "memory": "BELLEK",
-            "node": "Node"
+            "node": "Düğüm"
           }
         }
       }
@@ -2412,65 +2167,76 @@
       "description": "Konteynerlerinizin istatistikleri (Bu widget yalnızca yönetici ayrıcalıklarıyla eklenebilir)",
       "option": {
         "columns": {
-          "label": ""
+          "label": "Gösterilecek sütunlar"
         },
         "enableRowSorting": {
-          "label": "Enable items sorting"
+          "label": "Öğeleri sıralamayı etkinleştir"
         },
         "defaultSort": {
-          "label": "Column used for sorting by default",
+          "label": "Varsayılan sıralama sütunu",
           "option": {
-            "name": "Name",
-            "state": "State",
-            "cpuUsage": "CPU usage",
-            "memoryUsage": "Memory usage"
+            "name": "Ad",
+            "state": "Durum",
+            "cpuUsage": "CPU kullanımı",
+            "memoryUsage": "Bellek kullanımı"
           }
         },
         "descendingDefaultSort": {
-          "label": "Invert sorting"
+          "label": "Sıralamayı ters çevir"
+        },
+        "columnOrder": {
+          "label": "Sütun sırası"
+        },
+        "columnWidths": {
+          "label": "Sütun genişlikleri"
         }
       },
       "error": {
-        "internalServerError": "Konteyner istatistikleri alınamadı"
+        "internalServerError": "Konteyner istatistikleri alınamadı",
+        "layoutSaveTitle": "Tablo düzeni kaydedilemedi",
+        "layoutSaveMessage": "Docker tablo düzeni kaydedilemedi. Sütunu yeniden taşımayı veya boyutlandırmayı deneyin."
+      },
+      "empty": {
+        "noContainers": "Konteyner bulunamadı"
       }
     },
     "coolify": {
       "name": "Coolify",
-      "description": "Overview of your Coolify instance with servers and applications",
+      "description": "Sunucular ve uygulamalarla birlikte Coolify örneğinizin genel görünümü",
       "option": {
         "showServers": {
-          "label": "Show servers"
+          "label": "Sunucuları göster"
         },
         "showApplications": {
-          "label": "Show applications"
+          "label": "Uygulamaları göster"
         },
         "showServices": {
-          "label": "Show services"
+          "label": "Hizmetleri göster"
         }
       },
       "empty": {
-        "servers": "No servers found",
-        "applications": "No applications found",
-        "services": "No services found"
+        "servers": "Sunucu bulunamadı",
+        "applications": "Uygulama bulunamadı",
+        "services": "Hizmet bulunamadı"
       },
       "footer": {
-        "updated": "Updated {when}"
+        "updated": "Güncellendi: {when}"
       },
       "error": {
-        "noIntegration": "No Coolify integration configured",
-        "internalServerError": "Failed to fetch Coolify data"
+        "noIntegration": "Yapılandırılmış Coolify entegrasyonu yok",
+        "internalServerError": "Coolify verileri alınamadı"
       },
       "server": {
-        "buildServer": "Build"
+        "buildServer": "Derleme"
       },
       "instances": {
-        "title": "Instances"
+        "title": "Örnekler"
       }
     },
     "vpn": {
-      "name": "",
-      "description": "",
-      "serviceUnavailable": "",
+      "name": "VPN",
+      "description": "VPN bağlantılarınızın genel görünümü",
+      "serviceUnavailable": "VPN kullanılamıyor",
       "option": {}
     },
     "ups": {
@@ -2506,68 +2272,68 @@
     },
     "tracearr": {
       "name": "Tracearr",
-      "description": "Enhanced media server monitoring with detailed stream and transcoding data",
+      "description": "Ayrıntılı yayın ve kod dönüştürme verileriyle gelişmiş medya sunucusu izleme",
       "option": {
         "showStreams": {
-          "label": "Show active streams"
+          "label": "Etkin yayınları göster"
         },
         "showStats": {
-          "label": "Show stats summary"
+          "label": "İstatistik özetini göster"
         },
         "showRecentActivity": {
-          "label": "Show recent activity"
+          "label": "Son etkinlikleri göster"
         },
         "showViolations": {
-          "label": "Show violations"
+          "label": "İhlalleri göster"
         }
       },
       "stats": {
-        "activeStreams": "Active Streams",
-        "totalUsers": "Total Users",
-        "transcodes": "Transcodes",
-        "bandwidth": "Bandwidth"
+        "activeStreams": "Etkin Yayınlar",
+        "totalUsers": "Toplam Kullanıcı",
+        "transcodes": "Kod Dönüştürmeler",
+        "bandwidth": "Bant Genişliği"
       },
       "streams": {
-        "empty": "No active streams",
-        "user": "User",
-        "media": "Media",
-        "state": "State",
-        "quality": "Quality",
-        "device": "Device",
-        "progress": "Progress",
+        "empty": "Etkin yayın yok",
+        "user": "Kullanıcı",
+        "media": "Medya",
+        "state": "Durum",
+        "quality": "Kalite",
+        "device": "Cihaz",
+        "progress": "İlerleme",
         "videoDecision": {
-          "directPlay": "Direct Play",
-          "transcode": "Transcode",
-          "directStream": "Direct Stream"
+          "directPlay": "Doğrudan Oynatma",
+          "transcode": "Kod Dönüştürme",
+          "directStream": "Doğrudan Yayın"
         }
       },
       "recentActivity": {
-        "title": "Recent Activity",
-        "empty": "No recent activity",
-        "watched": "Watched",
-        "partial": "Partial"
+        "title": "Son Etkinlikler",
+        "empty": "Yakın zamanda etkinlik yok",
+        "watched": "İzlendi",
+        "partial": "Kısmi"
       },
       "violations": {
-        "title": "Violations",
-        "empty": "No recent violations",
-        "rule": "Rule",
-        "user": "User"
+        "title": "İhlaller",
+        "empty": "Yakın zamanda ihlal yok",
+        "rule": "Kural",
+        "user": "Kullanıcı"
       },
-      "noSectionsEnabled": "No sections enabled",
+      "noSectionsEnabled": "Etkinleştirilmiş bölüm yok",
       "error": {
-        "noIntegration": "No Tracearr integration configured",
-        "internalServerError": "Failed to fetch Tracearr data"
+        "noIntegration": "Yapılandırılmış Tracearr entegrasyonu yok",
+        "internalServerError": "Tracearr verileri alınamadı"
       }
     },
     "umami": {
-      "name": "Umami Analiz",
+      "name": "Umami Analytics",
       "description": "Umami analiz kurulumunuzdaki ziyaretçi istatistiklerini gösterir",
       "visitors": "ziyaretçiler",
-      "active": "aktif",
+      "active": "etkin",
       "pageviews": "sayfa görüntüleme",
       "visits": "ziyaretler",
       "bounceRate": "hemen çıkma",
-      "avgDuration": "ortalama",
+      "avgDuration": "ort.",
       "option": {
         "websiteId": {
           "label": "Web sitesi",
@@ -2620,8 +2386,8 @@
           "option": {
             "chart": "Grafik",
             "events": "Etkinlik grafiği",
-            "topPages": "En çok sayfa",
-            "topReferrers": "En çok yönlendiren"
+            "topPages": "En çok ziyaret edilen sayfalar",
+            "topReferrers": "En çok yönlendirenler"
           }
         },
         "eventNames": {
@@ -2634,7 +2400,7 @@
         },
         "topCount": {
           "label": "Gösterilecek öğeler",
-          "description": "Gösterilecek en yüksek öğe sayısı (maks 500)"
+          "description": "Gösterilecek en fazla öğe sayısı (en çok 500)"
         }
       },
       "event": {
@@ -2725,18 +2491,33 @@
         "showOnlyPlaying": {
           "label": "Yalnızca şu an oynatılanı göster",
           "description": "Bunu devre dışı bırakmak plex için işe yaramayacaktır"
+        },
+        "showBitrate": {
+          "label": "Bit hızını göster",
+          "description": "Geçerli oynatma bit hızını konumun yanında gösterir"
+        },
+        "showLocation": {
+          "label": "Konumu göster",
+          "description": "Yayının LAN'da mı yoksa WAN'da mı olduğunu gösterir"
         }
       },
+      "footer": {
+        "streams": "{count, plural, one {# etkin yayın} other {# etkin yayın}}",
+        "totalBitrate": "Toplam: {bitrate}"
+      },
       "items": {
         "currentlyPlaying": "Şuan Oynatılan",
         "user": "Kullanıcı",
         "name": "İsim",
         "id": "Kimlik",
-        "status": "",
-        "directPlay": "",
-        "transcoding": "",
-        "paused": "",
-        "remaining": "",
+        "status": "Durum",
+        "directPlay": "Doğrudan oynatma",
+        "directStream": "Doğrudan yayın",
+        "transcodeVideo": "Video kodu dönüştürülüyor",
+        "transcodeAudio": "Ses kodu dönüştürülüyor",
+        "transcoding": "Kod dönüştürülüyor",
+        "paused": "Duraklatıldı",
+        "remaining": "{minutes} dk kaldı",
         "metadata": {
           "title": "Meraklısı için istatistikler",
           "video": {
@@ -2758,286 +2539,99 @@
       }
     },
     "paperlessNgx": {
-      "name": "",
-      "description": "",
-      "documentsTotal": "",
-      "documentsInbox": "",
-      "correspondents": "",
-      "tags": "",
-      "documentTypes": "",
-      "inboxRatio": "",
-      "inbox": "",
-      "total": "",
+      "name": "Paperless-ngx",
+      "description": "Paperless-ngx belge arşivinizin genel görünümü",
+      "documentsTotal": "Toplam Belge",
+      "documentsInbox": "Gelen Kutusu",
+      "correspondents": "Muhataplar",
+      "tags": "Etiketler",
+      "documentTypes": "Belge Türleri",
+      "inboxRatio": "Gelen Kutusu Oranı",
+      "inbox": "gelen kutusu",
+      "total": "toplam",
       "option": {
         "showInboxRatio": {
-          "label": "",
-          "description": ""
+          "label": "Gelen kutusu oranını göster",
+          "description": "Gelen kutusundaki belgelerin toplam belgelere oranını öne çıkan bölümde gösterir"
         },
         "showInboxRing": {
-          "label": "",
-          "description": ""
+          "label": "Gelen kutusu halkasını göster",
+          "description": "Gelen kutusu oranının yanında bir ilerleme halkası gösterir"
         },
         "showDocumentsTotal": {
-          "label": "",
-          "description": ""
+          "label": "Toplam belge sayısını göster",
+          "description": "Arşivinizdeki toplam belge sayısını gösterir"
         },
         "showDocumentsInbox": {
-          "label": "",
-          "description": ""
+          "label": "Gelen kutusu sayısını göster",
+          "description": "Gelen kutusundaki işlenmemiş belge sayısını gösterir"
         },
         "showCorrespondents": {
-          "label": "",
-          "description": ""
+          "label": "Muhatapları göster",
+          "description": "Toplam muhatap sayısını gösterir"
         },
         "showTags": {
-          "label": "",
-          "description": ""
+          "label": "Etiketleri göster",
+          "description": "Toplam etiket sayısını gösterir"
         },
         "showDocumentTypes": {
-          "label": "",
-          "description": ""
+          "label": "Belge türlerini göster",
+          "description": "Toplam belge türü sayısını gösterir"
         }
       },
       "error": {
-        "internalServerError": ""
-      }
-    },
-    "patchmon": {
-      "name": "",
-      "description": "",
-      "title": "",
-      "totalHosts": "",
-      "hostsNeedingUpdates": "",
-      "securityUpdates": "",
-      "upToDateHosts": "",
-      "hostsWithSecurityUpdates": "",
-      "recentUpdates24h": "",
-      "totalOutdatedPackages": "",
-      "totalRepos": "",
-      "osDistribution": "",
-      "compliance": "",
-      "complianceRatio": "",
-      "lastUpdated": "",
-      "option": {
-        "showTotalHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsNeedingUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showUpToDateHosts": {
-          "label": "",
-          "description": ""
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "",
-          "description": ""
-        },
-        "showRecentUpdates24h": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalOutdatedPackages": {
-          "label": "",
-          "description": ""
-        },
-        "showTotalRepos": {
-          "label": "",
-          "description": ""
-        },
-        "enableThresholdColors": {
-          "label": "",
-          "description": ""
-        },
-        "useCustomThresholds": {
-          "label": "",
-          "description": ""
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "",
-            "percent": ""
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "",
-          "description": ""
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "",
-          "description": ""
-        },
-        "showOsDistribution": {
-          "label": "",
-          "description": ""
-        },
-        "osDistributionLimit": {
-          "label": "",
-          "description": "",
-          "option": {
-            "3": "",
-            "5": "",
-            "10": "",
-            "all": ""
-          }
-        },
-        "showOsVersion": {
-          "label": "",
-          "description": ""
-        },
-        "showComplianceHero": {
-          "label": "",
-          "description": ""
-        },
-        "osDisplayMode": {
-          "label": "",
-          "description": "",
-          "option": {
-            "bars": "",
-            "donut": ""
-          }
-        }
-      },
-      "error": {
-        "internalServerError": ""
-      }
-    },
-    "bazarr": {
-      "name": "",
-      "description": "",
-      "episodes": "",
-      "movies": "",
-      "providers": "",
-      "status": "",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "",
-          "description": ""
-        },
-        "showMissingMovies": {
-          "label": "",
-          "description": ""
-        },
-        "showProviderIssues": {
-          "label": "",
-          "description": ""
-        },
-        "showHealthIssues": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "error": {
-        "internalServerError": ""
+        "internalServerError": "Paperless-ngx verileri alınamadı"
       }
     },
     "immich-serverStats": {
-      "name": "Immich Server Stats",
-      "description": "Information about your Immich instance",
+      "name": "Immich Sunucu İstatistikleri",
+      "description": "Immich örneğiniz hakkında bilgiler",
       "option": {
         "showUsers": {
-          "label": "Show users",
-          "description": "Show count of users on your instance"
+          "label": "Kullanıcıları göster",
+          "description": "Örneğinizdeki kullanıcı sayısını gösterir"
         },
         "showPhotos": {
-          "label": "Show photos",
-          "description": "Show count of photos on your instance"
+          "label": "Fotoğrafları göster",
+          "description": "Örneğinizdeki fotoğraf sayısını gösterir"
         },
         "showVideos": {
-          "label": "Show videos",
-          "description": "Show count of videos on your instance"
+          "label": "Videoları göster",
+          "description": "Örneğinizdeki video sayısını gösterir"
         },
         "showStorage": {
-          "label": "Show storage",
-          "description": "Show the total amount of storage used"
+          "label": "Depolamayı göster",
+          "description": "Kullanılan toplam depolama alanını gösterir"
         }
       },
-      "users": "Users",
-      "photos": "Photos",
-      "videos": "Videos",
-      "storage": "Used Storage"
+      "users": "Kullanıcılar",
+      "photos": "Fotoğraflar",
+      "videos": "Videolar",
+      "storage": "Kullanılan Depolama"
     },
     "immich-albumCarousel": {
-      "name": "Immich Album",
-      "allPhotos": "",
+      "name": "Immich Albümü",
+      "allPhotos": "Tüm fotoğraflar",
       "option": {
         "albumId": {
-          "label": "Album ID",
-          "description": "This is a unique ID which refers to your Immich album. You can find this id by opening an album and copying the unique string from the URL, for example 'a21aca09-9f05-47dc-b1a1-7b53c547226e'"
+          "label": "Albüm",
+          "description": "Bir Immich albümü veya Tüm fotoğraflar seçeneğini belirleyin. Seçimi boş bırakmak da tüm kütüphanenizden rastgele fotoğraflar gösterir."
         },
         "rotationIntervalSeconds": {
-          "label": "Interval in seconds",
-          "description": "Rotate between pictures in the album every X seconds. Must be at least 1. Must be below 3600."
+          "label": "Saniye cinsinden aralık",
+          "description": "Albümdeki resimler arasında her X saniyede bir geçiş yapar. Değer en az 1 ve 3600'den küçük olmalıdır."
         },
         "showPhotoInfo": {
-          "label": "Show photo info",
-          "description": "Display date of the picture and the current index at the bottom of the slideshow"
+          "label": "Fotoğraf bilgilerini göster",
+          "description": "Slayt gösterisinin altında resmin tarihini ve geçerli sıra numarasını gösterir"
         },
         "randomizePhotos": {
-          "label": "",
-          "description": ""
+          "label": "Fotoğrafları rastgele sırala",
+          "description": "Her zaman aynı albüm sırasından başlamak yerine fotoğrafları rastgele sırada gösterir."
         }
       },
-      "description": "Slideshow of pictures in your Immich album",
-      "noPhotos": "No photos in this album"
+      "description": "Bir Immich albümündeki veya tüm kütüphanenizdeki fotoğrafların slayt gösterisi",
+      "noPhotos": "Fotoğraf bulunamadı"
     },
     "downloads": {
       "name": "İndirme İstemcisi",
@@ -3081,18 +2675,18 @@
           "description": "Bu, gösterilecek öğe sayısını tüm entegrasyonlar için değil, her entegrasyon özelinde sınırlar"
         },
         "columnOrder": {
-          "label": ""
+          "label": "Sütun sırası"
         },
         "columnWidths": {
-          "label": ""
+          "label": "Sütun genişlikleri"
         }
       },
       "errors": {
         "noColumns": "Öğelerdeki Sütunları Seç",
         "noCommunications": "Entegrasyondan veri yüklenemiyor",
-        "noItems": "",
-        "actionFailed": "",
-        "actionFailedMessage": ""
+        "noItems": "İndirme bulunamadı",
+        "actionFailed": "Eylem başarısız oldu",
+        "actionFailedMessage": "Eylem tamamlanamadı. Lütfen yeniden deneyin."
       },
       "items": {
         "actions": {
@@ -3116,7 +2710,7 @@
         },
         "id": {
           "columnTitle": "İd",
-          "detailsTitle": ""
+          "detailsTitle": "Öğe Kimliği"
         },
         "integration": {
           "columnTitle": "Entegrasyon"
@@ -3151,7 +2745,7 @@
         "time": {
           "columnTitle": "Bitiş zamanı",
           "detailsTitle": "Tamamlanmasından bu yana geçen süre",
-          "eta": ""
+          "eta": "Tahmini Kalan Süre"
         },
         "type": {
           "columnTitle": "Tür",
@@ -3197,21 +2791,21 @@
       },
       "globalRatio": "Genel Oran",
       "contextMenu": {
-        "copyName": "",
-        "copyId": "",
-        "clearFilters": ""
+        "copyName": "Adı kopyala",
+        "copyId": "Kimliği kopyala",
+        "clearFilters": "Filtreleri temizle"
       },
       "footer": {
-        "filter": ""
+        "filter": "İndirmeleri filtrele"
       },
       "stats": {
-        "show": "",
-        "hide": "",
-        "overallProgress": "",
-        "totalSize": "",
-        "clients": ""
+        "show": "Genel istatistikleri göster",
+        "hide": "Genel istatistikleri gizle",
+        "overallProgress": "Genel kuyruk ilerlemesi",
+        "totalSize": "Toplam kuyruk boyutu",
+        "clients": "{count, plural, one {# istemci} other {# istemci}}"
       },
-      "disconnected": ""
+      "disconnected": "(bağlantı kesildi)"
     },
     "mediaReleases": {
       "name": "Medya yayınları",
@@ -3250,10 +2844,10 @@
           "label": "Bağlantıları yeni sekmede aç"
         },
         "statusFilter": {
-          "label": ""
+          "label": "Gösterilecek durumlar"
         },
         "recentDays": {
-          "label": ""
+          "label": "Yalnızca son talepleri göster"
         }
       },
       "pending": {
@@ -3265,7 +2859,7 @@
         "unknown": "Bilinmeyen",
         "pending": "Bekleyen",
         "processing": "İşlemde",
-        "requested": "Requested",
+        "requested": "Talep Edildi",
         "partiallyAvailable": "Kısmi",
         "available": "Mevcut",
         "blacklisted": "Engellenenler",
@@ -3361,35 +2955,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showMissing": {
-          "label": ""
-        },
-        "showQueued": {
-          "label": ""
-        },
-        "pageSize": {
-          "label": ""
-        }
-      },
-      "tab": {
-        "missing": "",
-        "queued": ""
-      },
-      "type": {
-        "movie": "",
-        "episode": ""
-      },
-      "empty": {
-        "missing": "",
-        "queued": "",
-        "noTabsEnabled": ""
-      },
-      "timeLeft": ""
-    },
     "rssFeed": {
       "name": "RSS Beslemeleri",
       "description": "Bir veya daha fazla RSS, ATOM veya JSON beslemesini takip edin ve görüntüleyin",
@@ -3410,7 +2975,7 @@
           "label": "Açıklamayı gizle"
         },
         "showPosterImage": {
-          "label": "Show poster image"
+          "label": "Afiş görselini göster"
         }
       }
     },
@@ -3460,7 +3025,7 @@
             "label": "Sağlayıcı"
           },
           "providerUrl": {
-            "label": ""
+            "label": "Sağlayıcı URL'si"
           },
           "identifier": {
             "label": "Tanımlayıcı",
@@ -3511,11 +3076,11 @@
             "tooltip": "Sağlayıcı çözümlenemedi, lütfen görselleri içe aktardıktan sonra elle ayarlayın"
           },
           "tokens": {
-            "label": "",
-            "token": "",
-            "configured": "",
-            "notConfigured": "",
-            "save": ""
+            "label": "Sağlayıcı Tokenları",
+            "token": "Token",
+            "configured": "Token yapılandırıldı",
+            "notConfigured": "Token ayarlanmadı",
+            "save": "Kaydet"
           }
         }
       },
@@ -3538,9 +3103,9 @@
           "invalidIdentifier": "Geçersiz tanımlayıcı",
           "noMatchingVersion": "Eşleşen sürüm bulunamadı",
           "noReleasesFound": "Hiçbir sürüm bulunamadı",
-          "noProviderSelected": "",
+          "noProviderSelected": "Sağlayıcı seçilmedi",
           "noProviderResponse": "Sağlayıcıdan yanıt alınamadı",
-          "unexpected": ""
+          "unexpected": "Beklenmeyen sağlayıcı hatası"
         }
       }
     },
@@ -3635,188 +3200,140 @@
       "noItems": "Görüntülenecek bildirim yok.",
       "option": {
         "hideLogos": {
-          "label": ""
+          "label": "Logoları gizle"
         }
       }
     },
     "speedtestTracker": {
       "name": "Speedtest Tracker",
-      "description": "Displays speed test results from your Speedtest Tracker instance.",
+      "description": "Speedtest Tracker örneğinizdeki hız testi sonuçlarını gösterir.",
       "option": {
         "showLatestResult": {
-          "label": "Show latest result"
+          "label": "Son sonucu göster"
         },
         "showStats": {
-          "label": "Show averages"
+          "label": "Ortalamaları göster"
         },
         "showRecentResults": {
-          "label": "Show recent results"
+          "label": "Son sonuçları göster"
         },
         "showPingGraph": {
-          "label": "Show ping graph"
+          "label": "Ping grafiğini göster"
         }
       },
-      "latestResult": "Latest Result",
-      "averages": "Averages",
-      "tests": "{count} tests",
-      "recentResults": "Recent Results",
-      "recentResultsSpeed": "Speed",
+      "latestResult": "Son Sonuç",
+      "averages": "Ortalamalar",
+      "tests": "{count} test",
+      "recentResults": "Son Sonuçlar",
+      "recentResultsSpeed": "Hız",
       "recentResultsPing": "Ping",
-      "download": "Download",
-      "upload": "Upload",
+      "download": "İndirme",
+      "upload": "Yükleme",
       "ping": "Ping",
-      "status": "Status",
-      "avgDownload": "Avg Download",
-      "avgUpload": "Avg Upload",
-      "avgPing": "Avg Ping",
-      "healthy": "Healthy",
-      "unhealthy": "Unhealthy",
-      "ok": "OK",
-      "fail": "Fail",
-      "noSectionsEnabled": "Enable at least one section in widget options.",
+      "status": "Durum",
+      "avgDownload": "Ort. İndirme",
+      "avgUpload": "Ort. Yükleme",
+      "avgPing": "Ort. Ping",
+      "healthy": "Sağlıklı",
+      "unhealthy": "Sağlıksız",
+      "ok": "Tamam",
+      "fail": "Başarısız",
+      "noSectionsEnabled": "Widget seçeneklerinde en az bir bölümü etkinleştirin.",
       "error": {
-        "internalServerError": "Failed to fetch speedtest data"
+        "internalServerError": "Hız testi verileri alınamadı"
       }
     },
     "uptimeKuma": {
-      "name": "",
-      "description": "",
+      "name": "Uptime Kuma",
+      "description": "Uptime Kuma durum sayfanızdaki çalışma süresi istatistiklerini izleyin",
       "option": {
         "showAverageUptime": {
-          "label": "",
-          "description": ""
+          "label": "Ortalama çalışma süresini göster",
+          "description": "Birleşik 24 saatlik ortalama çalışma süresi yüzdesini gösterir"
         },
         "showUptimeRing": {
-          "label": "",
-          "description": ""
+          "label": "Çalışma süresi halkasını göster",
+          "description": "Ortalama çalışma süresi değerinin yanında bir ilerleme halkası gösterir"
         },
         "showTotalMonitors": {
-          "label": "",
-          "description": ""
+          "label": "Toplam izleyici sayısını göster",
+          "description": "Yapılandırılmış toplam izleyici sayısını gösterir"
         },
         "showUpCount": {
-          "label": "",
-          "description": ""
+          "label": "Çalışanların sayısını göster",
+          "description": "Şu anda kaç izleyicinin çalıştığını gösterir"
         },
         "showDownCount": {
-          "label": "",
-          "description": ""
+          "label": "Çalışmayanların sayısını göster",
+          "description": "Şu anda kaç izleyicinin çalışmadığını gösterir"
         },
         "showPausedCount": {
-          "label": "",
-          "description": ""
+          "label": "Duraklatılanların sayısını göster",
+          "description": "Şu anda kaç izleyicinin duraklatıldığını gösterir"
         }
       },
-      "averageUptime": "",
+      "averageUptime": "Ortalama çalışma süresi (24 sa.)",
       "stats": {
-        "totalMonitors": "",
-        "upCount": "",
-        "downCount": "",
-        "pausedCount": ""
+        "totalMonitors": "Toplam izleyici",
+        "upCount": "Çalışıyor",
+        "downCount": "Çalışmıyor",
+        "pausedCount": "Duraklatıldı"
       },
       "error": {
-        "internalServerError": ""
-      }
-    },
-    "traefik": {
-      "name": "",
-      "description": "",
-      "option": {
-        "showTcp": {
-          "label": ""
-        },
-        "showUdp": {
-          "label": ""
-        },
-        "showEntryPoints": {
-          "label": ""
-        }
-      },
-      "instances": "",
-      "versionUnknown": "",
-      "summary": {
-        "routers": "",
-        "entryPoints": ""
-      },
-      "resource": {
-        "routers": "",
-        "services": "",
-        "middlewares": ""
-      },
-      "status": {
-        "healthy": "",
-        "errors": "",
-        "warnings": ""
-      },
-      "error": {
-        "internalServerError": ""
+        "internalServerError": "Çalışma süresi verileri alınamadı"
       }
     },
     "audioStats": {
-      "name": "",
-      "description": "",
+      "name": "Ses İstatistikleri",
+      "description": "Navidrome veya Audiobookshelf'ten kütüphane ve oynatma istatistikleri",
       "option": {
         "showArtists": {
-          "label": "",
-          "description": ""
+          "label": "Sanatçıları göster",
+          "description": "Müzik kütüphanenizdeki toplam sanatçı sayısını gösterir (Navidrome)"
         },
         "showAlbums": {
-          "label": "",
-          "description": ""
+          "label": "Albümleri göster",
+          "description": "Müzik kütüphanenizdeki toplam albüm sayısını gösterir (Navidrome)"
         },
         "showSongs": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
+          "label": "Şarkıları göster",
+          "description": "Müzik kütüphanenizdeki toplam şarkı sayısını gösterir (Navidrome)"
         },
         "showLibraryCount": {
-          "label": "",
-          "description": ""
+          "label": "Kütüphane sayısını göster",
+          "description": "Örneğinizdeki kütüphane sayısını gösterir (Audiobookshelf)"
         },
         "showAudiobooks": {
-          "label": "",
-          "description": ""
+          "label": "Sesli kitapları göster",
+          "description": "Tüm kütüphanelerdeki toplam sesli kitap sayısını gösterir (Audiobookshelf)"
         },
         "showPodcasts": {
-          "label": "",
-          "description": ""
+          "label": "Podcast'leri göster",
+          "description": "Tüm kütüphanelerdeki toplam podcast sayısını gösterir (Audiobookshelf)"
         },
         "showListeningTime": {
-          "label": "",
-          "description": ""
+          "label": "Dinleme süresini göster",
+          "description": "Toplam dinleme sürenizi gösterir (Audiobookshelf)"
         },
         "showActiveSessions": {
-          "label": "",
-          "description": ""
+          "label": "Etkin oturumları göster",
+          "description": "Şu anda etkin olan oynatma oturumlarının sayısını gösterir (Audiobookshelf)"
         },
         "compactMode": {
-          "label": "",
-          "description": ""
+          "label": "Kompakt mod",
+          "description": "Küçük widget boyutları için ideal olan, daha küçük kutucuklara sahip daha sıkı bir düzen kullanır"
         }
       },
-      "artists": "",
-      "albums": "",
-      "songs": "",
-      "libraryCount": "",
-      "audiobooks": "",
-      "podcasts": "",
-      "listeningTime": "",
-      "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
+      "artists": "Sanatçılar",
+      "albums": "Albümler",
+      "songs": "Şarkılar",
+      "libraryCount": "Kütüphaneler",
+      "audiobooks": "Sesli Kitaplar",
+      "podcasts": "Podcast'ler",
+      "listeningTime": "Dinleme Süresi",
+      "activeSessions": "Etkin Oturumlar",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "Ses istatistikleri verileri alınamadı"
       }
     },
     "systemResources": {
@@ -3856,59 +3373,39 @@
       }
     },
     "systemDisks": {
-      "name": "System disks",
-      "description": "Disk usage of your system",
+      "name": "Sistem Diskleri",
+      "description": "Sisteminizin disk kullanımı",
       "option": {
         "showTemperatureIfAvailable": {
-          "label": "Show temperature if available"
+          "label": "Mevcutsa sıcaklığı göster"
         },
         "displayMode": {
-          "label": "Display mode",
+          "label": "Görüntüleme modu",
           "option": {
             "percentage": {
-              "label": "Percentage (e.g., 76%)"
+              "label": "Yüzde (ör. %76)"
             },
             "absolute": {
-              "label": "Absolute values (e.g., 800GB / 1TB)"
+              "label": "Mutlak değerler (ör. 800 GB / 1 TB)"
             },
             "free": {
-              "label": "Free space percentage (e.g., 24% free)"
+              "label": "Boş alan yüzdesi (ör. %24 boş)"
             }
           }
         },
         "showBackgroundBar": {
-          "label": "Show background usage bar"
+          "label": "Arka plan kullanım çubuğunu göster"
         },
         "visibleStorageVolumes": {
-          "label": "",
-          "description": "",
-          "placeholder": ""
+          "label": "Görünür depolama birimleri",
+          "description": "Yalnızca seçilen entegrasyonların tümü Synology olduğunda kullanılabilir. Algılanan tüm depolama birimlerini göstermek için boş bırakın.",
+          "placeholder": "Depolama birimlerini seçin"
         }
       },
       "status": {
-        "unhealthy": "Unhealthy"
+        "unhealthy": "Sağlıksız"
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Beszel Sistemleri (Tablo)",
       "description": "Sıralanabilir sütunlar ve durum göstergeleri ile tüm Beszel tarafından izlenen sistemlerin tablo görünümü",
@@ -3954,11 +3451,19 @@
         },
         "showAgent": {
           "label": "Ajan sürümünü göster"
+        },
+        "columnOrder": {
+          "label": "Sütun sırası"
+        },
+        "columnWidths": {
+          "label": "Sütun genişlikleri"
         }
       },
       "noRecords": "Sistem bulunamadı",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "Beszel'e bağlanılamadı. Entegrasyon ayarlarınızı kontrol edin.",
+        "layoutSaveTitle": "Tablo düzeni kaydedilemedi",
+        "layoutSaveMessage": "Sütun sırası veya genişlikleri kaydedilemedi. Lütfen yeniden deneyin."
       },
       "column": {
         "system": "Sistem",
@@ -4017,140 +3522,390 @@
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "Beszel'e bağlanılamadı. Entegrasyon ayarlarınızı kontrol edin."
       },
       "empty": {
-        "noSystems": ""
+        "noSystems": "Sistem bulunamadı"
       },
       "metric": {
-        "cpu": "",
-        "memory": "",
-        "disk": "",
-        "gpu": "",
-        "loadAvg": "",
-        "net": "",
-        "temp": "",
-        "battery": "",
-        "services": "",
-        "uptime": "",
-        "agent": ""
+        "cpu": "CPU",
+        "memory": "Bellek",
+        "disk": "Disk",
+        "gpu": "GPU",
+        "loadAvg": "Ort. Yük",
+        "net": "Ağ",
+        "temp": "Sıcaklık",
+        "battery": "Pil",
+        "services": "Hizmetler",
+        "uptime": "Çalışma Süresi",
+        "agent": "Ajan"
       }
     },
     "beszelAlerts": {
-      "name": "",
-      "description": "",
+      "name": "Beszel Uyarıları",
+      "description": "Beszel uyarı yapılandırmalarını ve geçmişini görüntüleyin",
       "option": {
         "showHistory": {
-          "label": ""
+          "label": "Uyarı geçmişini göster"
         },
         "maxHistoryItems": {
-          "label": ""
+          "label": "En fazla geçmiş öğesi"
         }
       },
-      "empty": "",
+      "empty": "Yapılandırılmış uyarı yok",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "Beszel'e bağlanılamadı. Entegrasyon ayarlarınızı kontrol edin."
       },
-      "history": "",
-      "resolved": "",
+      "history": "Geçmiş",
+      "resolved": "Çözüldü",
       "status": {
-        "triggered": "",
-        "ok": ""
+        "triggered": "Tetiklendi",
+        "ok": "Tamam"
       }
     },
     "beszelSystemStats": {
-      "name": "",
-      "description": "",
+      "name": "Beszel Sistem İstatistikleri",
+      "description": "CPU, bellek, disk, ağ ve Docker konteyner ölçümleri için zaman serisi grafikleri",
       "option": {
         "systemId": {
-          "label": "",
-          "description": ""
+          "label": "Sistem",
+          "description": "İstatistikleri gösterilecek Beszel sistemini seçin"
         },
         "timePeriod": {
-          "label": ""
+          "label": "Zaman aralığı"
         },
         "showCpu": {
-          "label": ""
+          "label": "CPU grafiğini göster"
         },
         "showMemory": {
-          "label": ""
+          "label": "Bellek grafiğini göster"
         },
         "showDisk": {
-          "label": ""
+          "label": "Disk grafiğini göster"
         },
         "showDiskIO": {
-          "label": ""
+          "label": "Disk G/Ç grafiğini göster"
         },
         "showNetwork": {
-          "label": ""
+          "label": "Ağ grafiğini göster"
         },
         "showDockerCpu": {
-          "label": ""
+          "label": "Docker CPU grafiğini göster"
         },
         "showDockerMemory": {
-          "label": ""
+          "label": "Docker bellek grafiğini göster"
         },
         "showDockerNetwork": {
-          "label": ""
+          "label": "Docker ağ grafiğini göster"
         }
       },
-      "selectSystem": "",
+      "selectSystem": "Sistem seçin",
       "empty": {
-        "noSystems": ""
+        "noSystems": "Sistem bulunamadı"
       },
       "error": {
-        "internalServerError": "",
-        "liveConnectionFailed": "",
-        "switchToHistorical": "",
-        "systemNotFound": ""
+        "internalServerError": "Beszel'e bağlanılamadı. Entegrasyon ayarlarınızı kontrol edin.",
+        "liveConnectionFailed": "Canlı bağlantı başarısız oldu. Beszel örneğiniz gerçek zamanlı akışı desteklemiyor olabilir.",
+        "switchToHistorical": "Geçmiş görünümüne geç",
+        "systemNotFound": "Seçilen sistem bulunamadı. Farklı bir sistem seçin."
       },
       "chart": {
         "cpu": {
-          "title": "",
-          "subtitle": "",
-          "series": ""
+          "title": "CPU Kullanımı",
+          "subtitle": "Sistem genelindeki ortalama CPU kullanımı",
+          "series": "CPU"
         },
         "memory": {
-          "title": "",
-          "subtitle": "",
-          "series": "",
-          "cache": ""
+          "title": "Bellek Kullanımı",
+          "subtitle": "Kaydedilen andaki kesin kullanım oranı",
+          "series": "Kullanılan",
+          "cache": "Önbellek/Tamponlar"
         },
         "disk": {
-          "title": "",
-          "subtitle": "",
-          "series": ""
+          "title": "Disk Kullanımı",
+          "subtitle": "Dosya sistemine göre kullanım",
+          "series": "Kök"
         },
         "diskIO": {
-          "title": "",
-          "subtitle": "",
-          "read": "",
-          "write": ""
+          "title": "Disk G/Ç",
+          "subtitle": "Kök dosya sisteminin aktarım hızı",
+          "read": "Okuma",
+          "write": "Yazma"
         },
         "storage": {
-          "title": "",
-          "subtitle": "",
-          "series": ""
+          "title": "Depolama",
+          "subtitle": "Dosya sistemi başına disk kullanımı",
+          "series": "Kullanılan"
         },
         "network": {
-          "title": "",
-          "subtitle": "",
-          "sent": "",
-          "recv": ""
+          "title": "Bant Genişliği",
+          "subtitle": "Genel ağ arayüzlerinin trafiği",
+          "sent": "Gönderilen",
+          "recv": "Alınan"
         },
         "dockerCpu": {
-          "title": "",
-          "subtitle": ""
+          "title": "Docker CPU Kullanımı",
+          "subtitle": "Konteynerlerin ortalama CPU kullanımı"
         },
         "dockerMemory": {
-          "title": "",
-          "subtitle": ""
+          "title": "Docker Bellek Kullanımı",
+          "subtitle": "Docker konteynerlerinin bellek kullanımı"
         },
         "dockerNetwork": {
-          "title": "",
-          "subtitle": ""
+          "title": "Docker Ağ G/Ç",
+          "subtitle": "Docker konteynerlerinin ağ trafiği"
         }
       }
+    },
+    "patchmon": {
+      "name": "PatchMon",
+      "description": "PatchMon'daki ana makine yama durumunun genel görünümü",
+      "title": "PatchMon İstatistikleri",
+      "totalHosts": "Toplam Ana Makine",
+      "hostsNeedingUpdates": "Güncelleme Gerekiyor",
+      "securityUpdates": "Güvenlik Güncellemeleri",
+      "upToDateHosts": "Güncel Ana Makineler",
+      "hostsWithSecurityUpdates": "Güvenlik Güncellemesi Olan Ana Makineler",
+      "recentUpdates24h": "Güncellemeler (24 sa.)",
+      "totalOutdatedPackages": "Güncel Olmayan Paketler",
+      "totalRepos": "Depolar",
+      "osDistribution": "İşletim Sistemi Dağılımı",
+      "compliance": "Yama Uyumluluğu",
+      "complianceRatio": "{upToDate} / {total}",
+      "lastUpdated": "Güncellendi: {time}",
+      "option": {
+        "showTotalHosts": {
+          "label": "Toplam ana makine sayısını göster",
+          "description": "İzlenen toplam ana makine sayısını gösterir"
+        },
+        "showHostsNeedingUpdates": {
+          "label": "Güncelleme gereken ana makineleri göster",
+          "description": "En az bir güncel olmayan paketi bulunan ana makineleri gösterir"
+        },
+        "showSecurityUpdates": {
+          "label": "Güvenlik güncellemelerini göster",
+          "description": "Kullanılabilir toplam güvenlik güncellemesi sayısını gösterir"
+        },
+        "showUpToDateHosts": {
+          "label": "Güncel ana makineleri göster",
+          "description": "Güncel olmayan paketi bulunmayan ana makineleri gösterir"
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "Güvenlik güncellemesi olan ana makineleri göster",
+          "description": "Güvenlik yaması gereken ana makineleri gösterir"
+        },
+        "showRecentUpdates24h": {
+          "label": "Son güncellemeleri göster (24 sa.)",
+          "description": "Son 24 saatte uygulanan güncelleme sayısını gösterir"
+        },
+        "showTotalOutdatedPackages": {
+          "label": "Güncel olmayan paketleri göster",
+          "description": "Tüm ana makinelerdeki güncel olmayan paketlerin toplam sayısını gösterir"
+        },
+        "showTotalRepos": {
+          "label": "Depoları göster",
+          "description": "İzlenen etkin depo sayısını gösterir"
+        },
+        "enableThresholdColors": {
+          "label": "Eşik renklerini etkinleştir",
+          "description": "İstatistik değerlerini önem düzeyi ön ayarlarına göre yeşil, sarı veya kırmızı renklendirir"
+        },
+        "useCustomThresholds": {
+          "label": "Gelişmiş eşikler",
+          "description": "Her istatistik için uyarı ve kritik eşikleri mutlak sayılarla veya toplam ana makine yüzdesiyle özelleştirin"
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "Mutlak sayı",
+            "percent": "Toplam ana makinelerin yüzdesi"
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "Güncelleme gereksinimi eşik modu",
+          "description": "Güncelleme gerekenlerin sayısını mutlak değer veya toplam ana makinelerin yüzdesi olarak karşılaştırır"
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "Güncelleme gereksinimi uyarı eşiği",
+          "description": "Değer bu eşiğe ulaştığında sarı renge geçer"
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "Güncelleme gereksinimi kritik eşiği",
+          "description": "Değer bu eşiğe ulaştığında kırmızı renge geçer"
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "Güvenlik güncellemeleri eşik modu",
+          "description": "Güvenlik güncellemesi sayısını mutlak değer veya toplam ana makinelerin yüzdesi olarak karşılaştırır"
+        },
+        "securityUpdatesWarningAt": {
+          "label": "Güvenlik güncellemeleri uyarı eşiği",
+          "description": "Değer bu eşiğe ulaştığında sarı renge geçer"
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "Güvenlik güncellemeleri kritik eşiği",
+          "description": "Değer bu eşiğe ulaştığında kırmızı renge geçer"
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "Güvenlik güncellemesi olan ana makineler için eşik modu",
+          "description": "Ana makine sayısını mutlak değer veya toplam ana makinelerin yüzdesi olarak karşılaştırır"
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "Güvenlik güncellemesi olan ana makineler için uyarı eşiği",
+          "description": "Değer bu eşiğe ulaştığında sarı renge geçer"
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "Güvenlik güncellemesi olan ana makineler için kritik eşik",
+          "description": "Değer bu eşiğe ulaştığında kırmızı renge geçer"
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "Güncel ana makineler için eşik modu",
+          "description": "Güncel ana makine sayısını mutlak değer veya toplam ana makinelerin yüzdesi olarak karşılaştırır"
+        },
+        "upToDateHostsWarningAt": {
+          "label": "Güncel ana makineler için uyarı eşiği",
+          "description": "Değer bu eşikte veya üzerinde, ancak tam kapsamanın altındaysa sarı renge geçer"
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "Güncel ana makineler için kritik eşik",
+          "description": "Değer bu eşiğin altına düştüğünde kırmızı renge geçer"
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "Güncel olmayan paketler için eşik modu",
+          "description": "Güncel olmayan paketlerin sayısını mutlak değer veya toplam ana makinelerin yüzdesi olarak karşılaştırır"
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "Güncel olmayan paketler için uyarı eşiği",
+          "description": "Değer bu eşiğe ulaştığında sarı renge geçer"
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "Güncel olmayan paketler için kritik eşik",
+          "description": "Değer bu eşiğe ulaştığında kırmızı renge geçer"
+        },
+        "showOsDistribution": {
+          "label": "İşletim sistemi dağılımını göster",
+          "description": "İzlenen ana makinelerin işletim sistemine göre dağılımını gösterir"
+        },
+        "osDistributionLimit": {
+          "label": "İşletim sistemi dağılımı sınırı",
+          "description": "Gösterilecek en fazla işletim sistemi sayısı",
+          "option": {
+            "3": "İlk 3",
+            "5": "İlk 5",
+            "10": "İlk 10",
+            "all": "Tümü"
+          }
+        },
+        "showOsVersion": {
+          "label": "İşletim sistemi sürümünü göster",
+          "description": "Mevcut olduğunda işletim sistemi sürümünü her dağılım etiketine ekler"
+        },
+        "showComplianceHero": {
+          "label": "Uyumluluk özetini göster",
+          "description": "Güncel ana makinelerin yüzdesini gösteren bir uyumluluk halkası görüntüler"
+        },
+        "osDisplayMode": {
+          "label": "İşletim sistemi görüntüleme modu",
+          "description": "İşletim sistemi dağılımının nasıl gösterileceğini seçin",
+          "option": {
+            "bars": "Yatay çubuklar",
+            "donut": "Halka grafik"
+          }
+        }
+      },
+      "error": {
+        "internalServerError": "PatchMon verileri alınamadı"
+      }
+    },
+    "bazarr": {
+      "name": "Bazarr",
+      "description": "Bazarr örneğinizdeki eksik altyazıların ve sağlık durumunun genel görünümü",
+      "episodes": "Eksik Bölümler",
+      "movies": "Eksik Filmler",
+      "providers": "Sağlayıcı Sorunları",
+      "status": "Sağlık Sorunları",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "Eksik bölümleri göster",
+          "description": "Altyazısı eksik bölüm sayısını gösterir"
+        },
+        "showMissingMovies": {
+          "label": "Eksik filmleri göster",
+          "description": "Altyazısı eksik film sayısını gösterir"
+        },
+        "showProviderIssues": {
+          "label": "Sağlayıcı sorunlarını göster",
+          "description": "Sorun yaşayan altyazı sağlayıcılarının sayısını gösterir"
+        },
+        "showHealthIssues": {
+          "label": "Sağlık sorunlarını göster",
+          "description": "Bazarr sağlık sorunlarının sayısını gösterir"
+        }
+      },
+      "error": {
+        "internalServerError": "Bazarr verileri alınamadı"
+      }
+    },
+    "mediaMissing": {
+      "name": "Eksik ve Kuyruktaki Medya",
+      "description": "Radarr ve Sonarr'daki eksik ve kuyruğa alınmış film ve bölümleri gösterir",
+      "option": {
+        "showMissing": {
+          "label": "Eksik öğeleri göster"
+        },
+        "showQueued": {
+          "label": "Kuyruktaki öğeleri göster"
+        },
+        "pageSize": {
+          "label": "Sayfa başına öğe"
+        }
+      },
+      "tab": {
+        "missing": "Eksik",
+        "queued": "Kuyrukta"
+      },
+      "type": {
+        "movie": "Film",
+        "episode": "Bölüm"
+      },
+      "empty": {
+        "missing": "Eksik öğe yok",
+        "queued": "Kuyrukta öğe yok",
+        "noTabsEnabled": "Widget ayarlarında en az bir sekmeyi etkinleştirin"
+      },
+      "timeLeft": "Kalan süre"
+    },
+    "traefik": {
+      "name": "Traefik",
+      "description": "Traefik yönlendiricilerinin, hizmetlerinin, ara yazılımlarının ve giriş noktalarının genel görünümü",
+      "option": {
+        "showTcp": {
+          "label": "TCP'yi göster"
+        },
+        "showUdp": {
+          "label": "UDP'yi göster"
+        },
+        "showEntryPoints": {
+          "label": "Giriş noktalarını göster"
+        }
+      },
+      "instances": "Traefik örnekleri",
+      "versionUnknown": "Sürüm bilinmiyor",
+      "summary": {
+        "routers": "Yönlendiriciler",
+        "entryPoints": "Giriş noktaları"
+      },
+      "resource": {
+        "routers": "Yönlendiriciler",
+        "services": "Hizmetler",
+        "middlewares": "Ara Yazılımlar"
+      },
+      "status": {
+        "healthy": "Sağlıklı",
+        "errors": "{count} hata",
+        "warnings": "{count} uyarı"
+      },
+      "error": {
+        "internalServerError": "Traefik verileri alınamadı"
+      }
     }
   },
   "widgetPreview": {
@@ -4525,17 +4280,17 @@
       "text": "İstenen kaynak bulunamadı"
     },
     "error": {
-      "title": "",
-      "text": "",
-      "digest": ""
+      "title": "Bu sayfa yüklenemedi",
+      "text": "Bu sayfa yüklenirken beklenmeyen bir hata oluştu. Gezinme menüsü hâlâ kullanılabilir; sayfayı yeniden yüklemeyi deneyin veya kenar çubuğundan başka bir bölüme geçin.",
+      "digest": "Hata başvurusu: {digest}"
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Ana Sayfa",
         "boards": "Paneller",
         "apps": "Uygulamalar",
         "integrations": "Entegrasyonlar",
-        "customWidgets": "",
         "searchEngies": "Arama Motorları",
         "medias": "Medyalar",
         "users": {
@@ -4552,7 +4307,7 @@
             "docker": "Docker",
             "kubernetes": "Kubernetes",
             "logs": "Günlükler",
-            "api": "API",
+            "api": "API ve MCP",
             "certificates": "Sertifikalar",
             "tasks": "Görevler",
             "backup": "Yedekleme"
@@ -4580,8 +4335,8 @@
           "integration": "Entegrasyonlar",
           "app": "Uygulamalar",
           "group": "Gruplar",
-          "searchEngine": "Search engines",
-          "media": "Medias"
+          "searchEngine": "Arama motorları",
+          "media": "Medya"
         },
         "statisticLabel": {
           "boards": "Paneller",
@@ -4590,8 +4345,8 @@
           "authorization": "Yetkilendirme"
         },
         "heroBanner": {
-          "title": "Welcome back to your",
-          "subtitle": "{app} Board"
+          "title": "Tekrar hoş geldiniz",
+          "subtitle": "{app} Panosu"
         }
       },
       "board": {
@@ -4809,8 +4564,8 @@
           "analytics": {
             "title": "Analiz",
             "general": {
-              "title": "Anonim analizler gönder",
-              "text": "Homarr, açık kaynaklı yazılım Umami'yi kullanarak anonimleştirilmiş analizler gönderecektir. Hiçbir zaman kişisel bilgi toplamaz ve bu nedenle tamamen GDPR ve CCPA uyumludur. Analizleri etkinleştirmenizi öneririz çünkü, açık kaynak yazılım ekibimizin sorunları daha hızlı belirlemesine ve birikmiş işlerimizi önceliklendirmesine yardımcı olmaktadır."
+              "title": "Homarr'ı geliştirmemize yardımcı olun",
+              "text": "Bu, kullanıcıların gerçekte neleri kullandığını anlamamıza ve zamanımızı nereye ayıracağımıza karar vermemize yardımcı olur. Kaç widget veya entegrasyona sahip olduğunuz, Homarr sürümünüz ve kullandığınız veritabanı gibi bilgileri görürüz. Hepsi bu; kişisel bilgi, URL, ad ya da sizi veya kurulumunuzu tanımlayabilecek hiçbir şey toplanmaz."
             }
           },
           "crawlingAndIndexing": {
@@ -5011,92 +4766,92 @@
               }
             },
             "mcp": {
-              "label": "",
-              "title": "",
-              "subtitle": "",
-              "description": "",
-              "noApiKey": "",
-              "createApiKeyButton": "",
+              "label": "Yapay Zekâ / MCP",
+              "title": "Yapay Zekâ Entegrasyonu",
+              "subtitle": "Model Context Protocol (MCP) Sunucusu",
+              "description": "Yapay zekâ asistanlarını Homarr örneğinize bağlayın ve tüm homelab ortamınızı doğal dille yönetin. Overseerr'da medya arayıp talep edin, Docker konteynerlerini yönetin, Pi-hole'u açıp kapatın, sunucu sağlığını denetleyin, Home Assistant cihazlarını kontrol edin ve daha fazlasını doğrudan yapay zekâ asistanınızdan gerçekleştirin.",
+              "noApiKey": "MCP sunucusunda kimlik doğrulamak için bir API anahtarı gerekir.",
+              "createApiKeyButton": "API Anahtarı Oluştur",
               "endpoint": {
-                "title": ""
+                "title": "MCP Uç Noktası"
               },
               "authentication": {
-                "title": "",
-                "intro": "",
+                "title": "Kimlik Doğrulama",
+                "intro": "MCP sunucunuzda API anahtarı veya OAuth kullanarak kimlik doğrulayabilirsiniz. Her iki yöntem de aynı erişim düzeyini sağlar.",
                 "apiKey": {
-                  "title": "",
-                  "description": ""
+                  "title": "API Anahtarı (manuel)",
+                  "description": "MCP istemci yapılandırmasında ApiKey üst bilgisini tam API anahtarınızla gönderin."
                 },
                 "oauth": {
-                  "title": "",
-                  "description": "",
-                  "hint": ""
+                  "title": "OAuth (tarayıcıyla giriş)",
+                  "description": "OAuth destekleyen istemciler (Claude Code, opencode veya Cursor gibi) bir tarayıcı penceresi açarak kimlik doğrulayabilir. İstemcinizde auth komutunu çalıştırın, tarayıcıda Homarr'a giriş yapın; bağlantı kurulur ve otomatik olarak bir API anahtarı oluşturulur.",
+                  "hint": "OAuth tokenları Kimlik Doğrulama sekmesinde normal API anahtarları olarak görünür. Bunları istediğiniz zaman iptal edebilirsiniz."
                 },
-                "permissions": ""
+                "permissions": "API anahtarı, yapay zekânın kullanabileceği izinleri belirler; yapay zekâ anahtar sahibiyle aynı erişim düzeyinde çalışır."
               },
               "clientConfig": {
-                "title": "",
+                "title": "İstemci Yapılandırması",
                 "streamableHttp": {
-                  "recommended": "",
-                  "title": "",
-                  "worksWith": "",
-                  "addToConfig": "",
-                  "cursor": "",
-                  "claudeDesktop": "",
-                  "claudeCode": "",
-                  "vsCodeCopilot": "",
-                  "replaceHint": ""
+                  "recommended": "Önerilen",
+                  "title": "Akış Destekli HTTP",
+                  "worksWith": "Şunlarla çalışır: Cursor, Claude Desktop, VS Code Copilot, Windsurf, Claude Code",
+                  "addToConfig": "MCP istemci yapılandırma dosyanıza ekleyin:",
+                  "cursor": "{name}: projenizdeki veya genel ayarlardaki {file}",
+                  "claudeDesktop": "{name}: {file}",
+                  "claudeCode": "{name}: {file} veya {command} komutunu kullanın",
+                  "vsCodeCopilot": "{name}: çalışma alanı ayarlarındaki {file}",
+                  "replaceHint": "Yer tutucuyu, oluştururken aldığınız API anahtarıyla değiştirin."
                 },
                 "stdio": {
-                  "title": "",
-                  "description": ""
+                  "title": "stdio (mcp-remote köprüsü üzerinden eski istemciler)",
+                  "description": "Yalnızca stdio aktarımını destekleyen istemciler içindir. Yerel olarak {dependency} (Node.js) kurulu olmalıdır:"
                 }
               },
               "testConnection": {
-                "title": "",
-                "description": "",
-                "hint": ""
+                "title": "Bağlantınızı Test Edin",
+                "description": "Uç noktanın erişilebilir ve API anahtarınızın çalışır olduğunu doğrulamak için bunu terminalinizde çalıştırın:",
+                "hint": "Başarılı bir yanıt MCP sunucusunun yeteneklerini döndürür. Hata görürseniz ipuçları için JSON yanıtını inceleyin."
               },
               "availableTools": {
-                "title": "",
-                "description": "",
-                "columnType": "",
-                "columnName": "",
-                "columnDescription": ""
+                "title": "Kullanılabilir Araçlar",
+                "description": "{count} araç kullanılabilir. Araçları ve açıklamalarını görmek için bir kategoriyi genişletin.",
+                "columnType": "Tür",
+                "columnName": "Araç",
+                "columnDescription": "Açıklama"
               },
               "troubleshooting": {
-                "title": "",
+                "title": "Sorun Giderme",
                 "missingHeader": {
-                  "title": "",
-                  "description": ""
+                  "title": "“ApiKey üst bilgisi eksik”",
+                  "description": "İstemciniz {header} üst bilgisini göndermiyor. MCP yapılandırmanızdaki {section} bölümünün doğru olduğunu doğrulayın. Bazı istemcilerin yapılandırma değişikliklerinden sonra yeniden başlatılması gerekir."
                 },
                 "invalidFormat": {
-                  "title": "",
-                  "description": ""
+                  "title": "“Geçersiz ApiKey biçimi”",
+                  "description": "API anahtarının yalnızca bir bölümünü değil tamamını kopyaladığınızdan emin olun."
                 },
                 "invalidKey": {
-                  "title": "",
-                  "description": ""
+                  "title": "“Geçersiz API anahtarı”",
+                  "description": "Anahtar kimliği bulunamadı veya token yanlış. API anahtarları oluşturulduklarında yalnızca bir kez görüntülenebilir. Anahtarı kaybettiyseniz eskisini silip yenisini oluşturun."
                 },
                 "connectionRefused": {
-                  "title": "",
-                  "description": ""
+                  "title": "Bağlantı reddedildi / zaman aşımı",
+                  "description": "URL'nin yapay zekâ istemcinizden erişilebilir olduğundan emin olun. Homarr ters proxy arkasında veya Docker'da çalışıyorsa {localhost} yerine harici URL'yi kullanın. Portun doğru olduğunu doğrulayın (Docker için varsayılan: 7575)."
                 },
                 "toolsNotAppearing": {
-                  "title": "",
-                  "description": ""
+                  "title": "Araçlar görünmüyor",
+                  "description": "Bazı araçlar belirli entegrasyonların yapılandırılmasını gerektirir (ör. Docker, Overseerr). Araç listesi Homarr örneğinizde kullanılabilir olanlara bağlıdır."
                 }
               },
-              "copy": "",
+              "copy": "Kopyala",
               "oneClick": {
-                "title": "",
-                "subtitle": "",
-                "vsCode": "",
-                "cursor": "",
-                "copyUrl": "",
-                "copied": "",
-                "copyHint": "",
-                "manualConfig": ""
+                "title": "Tek Tıkla Kur",
+                "subtitle": "OAuth kullanır; ilk kullanımda tarayıcınızda kimlik doğrulayın",
+                "vsCode": "VS Code'a Kur",
+                "cursor": "Cursor'a Kur",
+                "copyUrl": "MCP URL'sini Kopyala",
+                "copied": "Kopyalandı!",
+                "copyHint": "ChatGPT, Claude Code veya herhangi bir MCP istemcisi için",
+                "manualConfig": "Manuel Yapılandırma"
               }
             }
           }
@@ -5265,13 +5020,13 @@
     "table": {
       "updated": "{when} Güncellendi",
       "refresh": {
-        "lastUpdated": ""
+        "lastUpdated": "Son yenileme: {when}"
       },
       "search": "{count} konteyner içinde ara",
       "selected": "{selectCount} / {totalCount} konteyner seçildi",
       "footer": "Toplam {count} konteyner",
-      "totalCpu": "",
-      "totalMemory": ""
+      "totalCpu": "Toplam CPU: %{cpu}",
+      "totalMemory": "Toplam Bellek: {memory}"
     },
     "field": {
       "name": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Kaldır",
+        "confirm": "Kalıcı olarak kaldırmak için yeniden tıklayın",
         "notification": {
           "success": {
             "title": "Konteynerler kaldırıldı",
@@ -5399,7 +5155,7 @@
     },
     "error": {
       "internalServerError": "Docker konteynerlerları getirilemedi",
-      "noColumns": ""
+      "noColumns": "Widget ayarlarında en az bir sütun seçin"
     }
   },
   "kubernetes": {
@@ -5418,7 +5174,7 @@
       },
       "resources": {
         "title": "Kaynaklar",
-        "nodes": "Nodes",
+        "nodes": "Düğümler",
         "namespaces": "İsim Alanları",
         "ingresses": "Ingress'ler",
         "services": "Hizmetler",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Yönet",
       "boards": {
         "label": "Paneller"
@@ -5707,18 +5466,6 @@
           "label": "Düzenle"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Kullanıcılar",
         "create": {
@@ -5805,7 +5552,7 @@
             "children": {
               "action": {
                 "open": {
-                  "label": "Uygulama Url'sini aç"
+                  "label": "Uygulama URL'sini aç"
                 },
                 "edit": {
                   "label": "Uygulamayı düzenle"
@@ -5996,10 +5743,10 @@
                 }
               },
               "enableRightClickOnWidgets": {
-                "label": "",
+                "label": "Widget'lara sağ tıklamayı etkinleştir",
                 "children": {
                   "detail": {
-                    "title": ""
+                    "title": "Widget'lara sağ tıklamayı etkinleştir"
                   }
                 }
               },
@@ -6455,7 +6202,7 @@
       },
       "integrationsList": {
         "title": "Entegrasyonlarınız",
-        "description": "Bunlar Homarr'a bağlı hizmetlerdir — Sonarr, Radarr, Plex, Jellyfin ve 50'den fazlası. Tüm kimlik bilgileri beklemede şifrelenir."
+        "description": "Bunlar Homarr'a bağlı hizmetlerdir — Sonarr, Radarr, Plex, Jellyfin ve 50'den fazlası. Tüm kimlik bilgileri depolanırken şifrelenir."
       },
       "integrationsCreate": {
         "title": "Entegrasyon Ekle",
@@ -6467,7 +6214,7 @@
       },
       "usersCreate": {
         "title": "Kullanıcı Oluştur",
-        "description": "Buraya yeni bir kullanıcı hesabı ekleyin. Kolay katılım için davet bağlantılarını da kullanabilirsiniz. Tur bu kadar — hepiniz hazırsınız!"
+        "description": "Buraya yeni bir kullanıcı hesabı ekleyin. Kolay katılım için davet bağlantılarını da kullanabilirsiniz. Tur bu kadar — artık hazırsınız!"
       }
     },
     "board": {
diff --git a/packages/translation/src/lang/uk.json b/packages/translation/src/lang/uk.json
index fac2b07ee..4a05a17f2 100644
--- a/packages/translation/src/lang/uk.json
+++ b/packages/translation/src/lang/uk.json
@@ -691,206 +691,11 @@
   "customWidget": {
     "page": {
       "list": {
-        "title": "Власні віджети",
-        "noResults": "Поки що немає власних віджетів. Створіть свій перший!",
-        "loading": "Завантаження..."
-      },
-      "create": {
-        "title": "Створити власний віджет",
-        "subtitle": "Визначте URL-адресу API, автентифікацію та спосіб показу даних відповіді."
-      },
-      "edit": {
-        "title": "Редагувати власний віджет"
+        "title": "Власні віджети"
       }
     },
-    "action": {
-      "create": "Створити",
-      "import": "Імпорт",
-      "save": "Зберегти",
-      "delete": "Видалити власний віджет",
-      "deleteConfirm": "Ви впевнені, що хочете видалити \"{name}\"? Цю дію неможливо скасувати.",
-      "export": "Експорт",
-      "addMapping": "Додати зіставлення",
-      "addColumn": "Додати стовпець",
-      "edit": "Редагувати",
-      "removeMapping": "Видалити зіставлення",
-      "removeColumn": "Видалити стовпець",
-      "addItem": "Додати елемент",
-      "removeItem": "Видалити елемент",
-      "addBar": "Додати бар",
-      "duplicate": "Дублікат",
-      "copyAiPrompt": "Копіювати запит AI",
-      "enable": "Увімкнути",
-      "disable": "Вимкнути",
-      "menu": "Дії"
-    },
-    "field": {
-      "name": "Назва",
-      "description": "Опис",
-      "iconUrl": "URL іконки",
-      "url": "URL-адреса",
-      "authType": "Тип авторизації",
-      "headerName": "Назва параметра заголовок/запиту",
-      "method": "Метод",
-      "requestBody": "Текст запиту",
-      "displayType": "Тип для показу",
-      "jsonPath": "Шлях до JSON",
-      "jsonPathHint": "Використовуйте синтаксис JSONPath для вилучення значень, наприклад, $.data.temperature або $.items[0].name",
-      "label": "Мітка",
-      "unit": "Одиниця",
-      "mappings": "Зіставлення",
-      "tablePath": "Шлях масиву JSON",
-      "tablePathHint": "Шлях до масиву у відповідь, наприклад, $.data.items",
-      "columns": "Стовпці",
-      "header": "Заголовок",
-      "items": "Елементи",
-      "gridColumns": "Стовпці сітки",
-      "cardStyle": "Стиль картки",
-      "bars": "Бари",
-      "valuePath": "Значення JSON шлях",
-      "maxPath": "Макс. значення JSON шляху",
-      "showPercentage": "Показувати відсоток",
-      "barSize": "Розмір панелі",
-      "goodValues": "Хороші значення (розділені комами)",
-      "dotSize": "Розмір точки",
-      "valueSize": "Розмір значення",
-      "labelPosition": "Позиція мітки",
-      "kvLayout": "Макет",
-      "striped": "Смугасті рядки",
-      "compact": "Компактний режим",
-      "maxHeight": "Макс висота (пікс.)",
-      "color": "Колір",
-      "buttonLabel": "Підпис кнопки",
-      "buttonColor": "Колір кнопки",
-      "confirmText": "Текст підтвердження",
-      "confirmTextHint": "Якщо встановлено, перед виконанням запиту з’явиться діалогове вікно підтвердження",
-      "successMessage": "Повідомлення про успіх",
-      "successMessageHint": "Повідомлення яке відображається після успішного виконання",
-      "enabled": "Увімкнено",
-      "template": {
-        "label": "Шаблон JSX",
-        "description": "Шаблон Mantine JSX. Доступ до полів відповіді API через прив'язки даних (наприклад, data.name). Використовуйте лише компоненти з білого списку. Заборонено: constructor, __proto__, eval, Function, window, document."
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "Температура ЦП",
-      "exampleLabelShort": "Темп процесора",
-      "exampleHeader": "Назва",
-      "exampleUnit": "°C",
-      "iconUrl": "https://...",
-      "url": "https://api.example.com/api/v1/status",
-      "headerName": "X-API-Key",
-      "jsonPath": "$.data.value",
-      "tablePath": "$.data.items",
-      "columnJsonPath": "$.name",
-      "valuePath": "$.data.used",
-      "maxPath": "$.data.total",
-      "goodValues": "онлайн, правда, вгору",
-      "color": "синій"
-    },
-    "cardStyleOption": {
-      "filled": "Заповнений",
-      "outline": "Контур",
-      "subtle": "Тонкий"
-    },
-    "layoutOption": {
-      "list": "Список",
-      "grid": "Сітка"
-    },
-    "sizeOption": {
-      "sm": "Малий",
-      "md": "Середній",
-      "lg": "Великий",
-      "xl": "Дуже великий"
-    },
-    "labelPositionOption": {
-      "above": "Вище",
-      "below": "Нижче"
-    },
-    "fieldset": {
-      "general": "Загальне",
-      "connection": "API підключення",
-      "display": "Конфігурації дисплея"
-    },
-    "displayTypeDescription": {
-      "singleValue": "Показати одне витягнуте значення з міткою та одиницею вимірювання",
-      "keyValue": "Показати кілька позначених значень поруч",
-      "table": "Показати рядки даних у форматі таблиці",
-      "statGrid": "Кольорові картки статистики в сітці — як-от віджети Pi-Hole або Speedtest",
-      "progressBars": "Індикатори виконання, що показують використання або завершення — для диска, пам'яті, квот",
-      "statusIndicator": "Кольорові крапки стану показують онлайн/оффлайн або охорони здоров'я",
-      "countGrid": "Компактне число + лічильники міток у вигляді сітки",
-      "raw": "Гарно надрукований JSON-вивід для налагодження",
-      "actionButton": "Кнопка яка виконує запит при натисканні",
-      "customJsx": "Користувацький макет JSX з пов'язування повним API даних з білого списку"
-    },
-    "method": {
-      "GET": "ОТРИМАТИ",
-      "POST": "СТВОРИТИ",
-      "PUT": "Розміщення",
-      "DELETE": "ВИДАЛИТИ",
-      "PATCH": "ПАТЧ"
-    },
-    "authType": {
-      "none": "Немає",
-      "bearer": "Пред'явити токен",
-      "basic": "Базова авторизація",
-      "apiKeyHeader": "Ключ API (Заголовок)",
-      "apiKeyQuery": "Ключ API (запит)"
-    },
-    "displayType": {
-      "singleValue": "Одиночні Значення",
-      "keyValue": "Значення ключа",
-      "table": "Таблиця",
-      "statGrid": "Статистична сітка",
-      "progressBars": "Індикатори прогресу",
-      "statusIndicator": "Індикатор стану",
-      "countGrid": "Кількість сіток",
-      "raw": "Необроблений JSON",
-      "actionButton": "Кнопка дії",
-      "customJsx": "Користувацький JSX"
-    },
-    "secret": {
-      "apiKey": "Ключ API / Токен",
-      "username": "Ім'я користувача",
-      "password": "Пароль",
-      "savedPlaceholder": "• • • • • • (збережено, залиште порожнім, щоб зберегти)"
-    },
-    "preview": {
-      "title": "Попередній перегляд",
-      "test": "Перевірка",
-      "hint": "Натисніть Тест, щоб переглянути відповідь API з поточною конфігурацією.",
-      "rawResponse": "Необроблена відповідь JSON"
-    },
     "notification": {
-      "created": "Віджет \"{name}\" успішно створено.",
-      "updated": "Віджет \"{name}\" успішно оновлено.",
-      "deleted": "Віджет \"{name}\" видалено.",
-      "imported": "Віджет успішно імпортовано.",
-      "aiPromptCopied": "Запит ШІ скопійовано до буферу обміну",
-      "aiPromptDescription": "Скопіюйте запит на вставку в будь-який AI чатбот (ChatGPT, Claude, Gemini ...). Вона включає в себе повну схему віджетів і вашу API відповідь, щоб ШІ могла генерувати конфігурацію AI для вашого коректного імпортування.",
-      "aiPromptCopy": "Скопіювати в буфер обміну",
-      "aiPromptNoResponse": "Порада: Спочатку запустіть тест, щоб включити відповідь API в командний рядок для отримання кращих результатів.",
-      "aiPromptCopyError": "Не вдалося скопіювати запит до буфера обміну. Можливо, ваш браузер не підтримує цю функцію.",
-      "createError": "Не вдалося створити віджет. Перевірте кінцеву точку API.",
-      "updateError": "Неможливо оновити віджет. Зміни не збережено.",
-      "importError": "Неможливо імпортувати віджет. Переконайтеся, що файл є допустимим експортом користувацьких віджетів JSON.",
-      "exportError": "Не вдалося експортувати віджет.",
-      "duplicated": "Віджет \"{name}\" продубльовано.",
-      "duplicateError": "Не вдалося продублювати віджет.",
-      "toggleError": "Не вдалося змінити стан віджету.",
-      "deleteError": "Не вдалося видалити віджет.",
-      "previewError": "Не вдалося отримати попередній перегляд. Перевірте URL-адресу та повторіть спробу.",
-      "executed": "Дію успішно виконано.",
-      "executeError": "Дію не виконано: {error}"
-    },
-    "table": {
-      "name": "Назва",
-      "url": "URL",
-      "display": "Показати"
-    },
-    "widget": {
-      "disabled": "Цей віджет вимкнено"
+      "toggleError": "Не вдалося змінити стан віджету."
     }
   },
   "integration": {
@@ -1549,10 +1354,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Нова динамічна секція",
-        "remove": "Видалити динамічну секцію"
+        "create": "Новий контейнер",
+        "remove": "Видалити контейнер"
       },
       "option": {
         "title": {
@@ -1566,48 +1371,8 @@
         }
       },
       "remove": {
-        "title": "Видалити динамічний розділ",
-        "message": "Ви впевнені, що хочете видалити цей динамічний розділ? Елементи будуть переміщені в те саме місце в батьківському розділі."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Ім’я"
-        }
-      },
-      "action": {
-        "create": "Нова категорія",
-        "edit": "Перейменувати категорію",
-        "remove": "Видалити категорію",
-        "moveUp": "Перемістити вгору",
-        "moveDown": "Перемістити вниз",
-        "createAbove": "Нові категорії зверху",
-        "createBelow": "Нова категорія знизу",
-        "openAllInNewTabs": "Відкрити все у вкладках"
-      },
-      "create": {
-        "title": "Нова категорія",
-        "submit": "Додати категорію"
-      },
-      "remove": {
-        "title": "Видалити категорію",
-        "message": "Ви впевнені, що хочете видалити категорію {name}?"
-      },
-      "edit": {
-        "title": "Перейменувати категорію",
-        "submit": "Перейменувати категорію"
-      },
-      "menu": {
-        "label": {
-          "create": "Нова категорія",
-          "changePosition": "Змінити положення",
-          "settings": "Налаштування"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "Відкрити все у вкладках",
-        "text": "Деякі браузери можуть блокувати маркове відкриття вкладок з міркувань безпеки. Homarr не може відкрити всі вікна, тому що ваш браузер заблокував цю дію. Будь ласка, дозвольте \"Відкрити виринаючі вік\" і спробуйте ще раз."
+        "title": "Видалити контейнер",
+        "message": "Ви впевнені, що хочете видалити цей контейнер? Елементи будуть переміщені в те саме місце в батьківському розділі."
       }
     }
   },
@@ -2428,10 +2193,21 @@
         },
         "descendingDefaultSort": {
           "label": "Інверсія сортування"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": "Не вдалося отримати статистику контейнерів"
+        "internalServerError": "Не вдалося отримати статистику контейнерів",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2501,20 @@
         "showOnlyPlaying": {
           "label": "Показувати тільки поточне відтворення",
           "description": "Вимкнення цієї опції не працюватиме для Plex."
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "Зараз відтворюється",
         "user": "Користувач",
@@ -2734,6 +2522,9 @@
         "id": "Id",
         "status": "Статус",
         "directPlay": "Пряме відтворення",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "Транскодування",
         "paused": "Призупинено",
         "remaining": "Залишилося {minutes} хв",
@@ -2802,193 +2593,6 @@
         "internalServerError": "Не вдалося отримати дані Paperless-ngx"
       }
     },
-    "patchmon": {
-      "name": "ПатчМон",
-      "description": "Огляд стану патчів хоста від PatchMon",
-      "title": "Статистика PatchMon",
-      "totalHosts": "Всього хостів",
-      "hostsNeedingUpdates": "Потребує оновлення",
-      "securityUpdates": "Оновлення безпеки",
-      "upToDateHosts": "Оновлені хости",
-      "hostsWithSecurityUpdates": "Хости з оновленнями безпеки",
-      "recentUpdates24h": "Оновлення (24г)",
-      "totalOutdatedPackages": "Застарілі пакети",
-      "totalRepos": "Репозитарії",
-      "osDistribution": "Розподіл ОС",
-      "compliance": "Відповідність патчам",
-      "complianceRatio": "{upToDate} / {total}",
-      "lastUpdated": "Оновлено {time}",
-      "option": {
-        "showTotalHosts": {
-          "label": "Показати хости загалом",
-          "description": "Відображати загальну кількість контрольованих хостів"
-        },
-        "showHostsNeedingUpdates": {
-          "label": "Показувати потрібні оновлення хостів",
-          "description": "Відображати хости з принаймні одним застарілим пакетом"
-        },
-        "showSecurityUpdates": {
-          "label": "Показати оновлення безпеки",
-          "description": "Відображати загальну кількість доступних оновлень безпеки"
-        },
-        "showUpToDateHosts": {
-          "label": "Показувати актуальні хости",
-          "description": "Відображати хостингові системи без застарілих пакетів"
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "Показувати хости з оновленнями безпеки",
-          "description": "Показувати хости, які потребують патчів безпеки"
-        },
-        "showRecentUpdates24h": {
-          "label": "Показати останні оновлення (24h)",
-          "description": "Відображати кількість оновлень, застосованих за останні 24 години"
-        },
-        "showTotalOutdatedPackages": {
-          "label": "Показати застарілі пакети",
-          "description": "Відображати загальну кількість застарілих пакетів у всіх хостах"
-        },
-        "showTotalRepos": {
-          "label": "Показати репозиторії",
-          "description": "Відображати кількість активних репозиторіїв, що відслідковуються"
-        },
-        "enableThresholdColors": {
-          "label": "Увімкнути кольори порогових значень",
-          "description": "Значення колірних характеристик: зелений, жовтий або червоний, залежно від пресетів серйозності"
-        },
-        "useCustomThresholds": {
-          "label": "Розширені пороги",
-          "description": "Налаштуйте пороги попереджень та критичних значень для кожної статистики, використовуючи абсолютні показники або відсотки від загальної кількості хостів"
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "Абсолютна кількість",
-            "percent": "Відсоток від загальної кількості хостів"
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "Потрібен поріг оновлення",
-          "description": "Порівняйте оновлення як абсолютне значення або відсоток від загальної кількості хостів"
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "Поріг попередження про нові оновлення",
-          "description": "Вмикається жовтий колір, коли значення досягає цього порогового значення"
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "Потребує оновлення критичного порогу",
-          "description": "Вмикається червоний коли значення досягає цього порогу"
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "Режим оновлення системи безпеки",
-          "description": "Порівняйте оновлення безпеки як абсолютне значення або відсоток від загальної кількості хостів"
-        },
-        "securityUpdatesWarningAt": {
-          "label": "Поріг попередження про оновлення безпеки",
-          "description": "Вмикається жовтий колір, коли значення досягає цього порогового значення"
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "Критичний поріг оновлення системи безпеки",
-          "description": "Вмикається червоний коли значення досягає цього порогу"
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "Хости з режимом порогу оновлень безпеки",
-          "description": "Порівняйте кількість хостів як абсолютне значення або відсоток від загальної кількості хостів"
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "Хости з попередженням про оновлення безпеки",
-          "description": "Вмикається жовтий колір коли значення досягає цього порогу"
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "Хости з критичним порогом оновлення безпеки",
-          "description": "Вмикається червоний коли значення досягає цього порогу"
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "Оновлений режим порогового хостів",
-          "description": "Порівняйте актуальний хост як абсолютне значення або відсоток від загальної кількості хостів"
-        },
-        "upToDateHostsWarningAt": {
-          "label": "Поріг попередження для актуальних хостів",
-          "description": "Вмикається жовтий колір, коли значення дорівнює або перевищує цей поріг, але нижче повного покриття."
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "Критичний поріг для оновлених хостів",
-          "description": "Вмикається червоний, коли значення падає нижче цього порогу"
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "Режим порогу застарілих пакетів",
-          "description": "Порівняйте застарілі пакети як абсолютне значення або відсоток від загальної кількості хостів"
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "Поріг попередження про застарілі пакети",
-          "description": "Вмикається жовтий, коли значення досягає цього порогу"
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "Критичний поріг застарілих пакетів",
-          "description": "Вмикається  червоний коли значення досягає цього порогу"
-        },
-        "showOsDistribution": {
-          "label": "Показати розподіл ОС",
-          "description": "Показати розподіл контрольованих хостів операційною системою"
-        },
-        "osDistributionLimit": {
-          "label": "Обмеження розподілу ОС",
-          "description": "Максимальна кількість операційних систем для відображення",
-          "option": {
-            "3": "Топ 3",
-            "5": "Тор 5",
-            "10": "Топ 10",
-            "all": "Усі"
-          }
-        },
-        "showOsVersion": {
-          "label": "Показати версію ОС",
-          "description": "Додавати версію ОС до кожної мітки дистрибуції, коли вона стане доступною"
-        },
-        "showComplianceHero": {
-          "label": "Показати героя відповідності",
-          "description": "Відображати кільце відповідності, яке показує відсоток оновлених хостів"
-        },
-        "osDisplayMode": {
-          "label": "Режим відображення ОС",
-          "description": "Виберіть спосіб відображення дистрибутива операційної системи",
-          "option": {
-            "bars": "Горизонтальні смуги",
-            "donut": "Кільцева діаграма"
-          }
-        }
-      },
-      "error": {
-        "internalServerError": "Не вдалося отримати дані PatchMon"
-      }
-    },
-    "bazarr": {
-      "name": "Bazarr",
-      "description": "Огляд відсутніх субтитрів та стану справності вашого екземпляра Bazarr",
-      "episodes": "Відсутні епізоди",
-      "movies": "Відсутні фільми",
-      "providers": "Проблеми p постачальником",
-      "status": "Проблеми зі здоров'ям",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "Показати відсутні епізоди",
-          "description": "Відображати кількість епізодів без субтититрів"
-        },
-        "showMissingMovies": {
-          "label": "Показати відсутні фільми",
-          "description": "Відобразити кількість фільмів без субтитрів"
-        },
-        "showProviderIssues": {
-          "label": "Показати проблеми постачальника",
-          "description": "Відображати кількість постачальника субтитрів з проблемами"
-        },
-        "showHealthIssues": {
-          "label": "Показувати проблеми зі здоров’ям",
-          "description": "Відображати кількість проблем зі здоров’ям Bazarr"
-        }
-      },
-      "error": {
-        "internalServerError": "Не вдалося отримати дані Bazarr"
-      }
-    },
     "immich-serverStats": {
       "name": "Статистика Immich на сервері",
       "description": "Інформація про Ваш екземпляр Immich",
@@ -3361,35 +2965,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "Відсутня медіа в черзі",
-      "description": "Показує відсутні і в черзі фільми і епізоди з Radarr і Sonarr",
-      "option": {
-        "showMissing": {
-          "label": "Показати відсутні елементи"
-        },
-        "showQueued": {
-          "label": "Показати елементи в черзі"
-        },
-        "pageSize": {
-          "label": "Елементів на сторінці"
-        }
-      },
-      "tab": {
-        "missing": "Відсутні",
-        "queued": "У черзі"
-      },
-      "type": {
-        "movie": "Фільм",
-        "episode": "Епізод"
-      },
-      "empty": {
-        "missing": "Немає відсутніх елементів",
-        "queued": "Немає елементів у черзі",
-        "noTabsEnabled": "Увімкнути принаймні одну вкладку в налаштуваннях віджету"
-      },
-      "timeLeft": "Залишилося часу"
-    },
     "rssFeed": {
       "name": "RSS-канали",
       "description": "Моніторинг та відображення однієї або кількох загальних RSS-, ATOM- або JSON-стрічок",
@@ -3718,40 +3293,6 @@
         "internalServerError": "Не вдалося отримати дані про час роботи"
       }
     },
-    "traefik": {
-      "name": "Трафік",
-      "description": "Огляд маршрутизаторів, сервісів, проміжного програмного забезпечення та точок входу Traefik",
-      "option": {
-        "showTcp": {
-          "label": "Показати TCP"
-        },
-        "showUdp": {
-          "label": "Show UDP"
-        },
-        "showEntryPoints": {
-          "label": "Показувати точки входу"
-        }
-      },
-      "instances": "Traefik екземпляри",
-      "versionUnknown": "Версія невідома",
-      "summary": {
-        "routers": "Маршрутизатори",
-        "entryPoints": "Точки входу"
-      },
-      "resource": {
-        "routers": "Маршрутизатори",
-        "services": "Служби",
-        "middlewares": "Проміжне програмне забезпечення"
-      },
-      "status": {
-        "healthy": "Здоровий",
-        "errors": "{count} помилок",
-        "warnings": "{count} застережень"
-      },
-      "error": {
-        "internalServerError": "Неможливо отримати дані Traefik"
-      }
-    },
     "audioStats": {
       "name": "Статистика аудіо",
       "description": "Бібліотека і відтворення статистики з Navidrome або Audiobookf",
@@ -3768,18 +3309,6 @@
           "label": "Показувати пісні",
           "description": "Показати загальну кількість пісень у вашій музичній бібліотеці (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "Показати, що зараз відтворюються",
-          "description": "Показувати пісні, що зараз відтворюються (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "Показати список відтворення зараз",
-          "description": "Відображати окремі треки замість лише кількості активних потоків (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "Максимум елементів для відтворення",
-          "description": "Максимальна кількість треків для відображення у списку відтворення (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "Показувати кількість бібліотек",
           "description": "Показати кількість бібліотек на вашому екземплярі (Audiobookshelf)"
@@ -3813,8 +3342,6 @@
       "podcasts": "Подкасти",
       "listeningTime": "Час прослуховування",
       "activeSessions": "Активні Сесії",
-      "nowPlaying": "Зараз програється",
-      "nowPlayingCount": "{count, plural, one {# трансляція} few {# трансляції} many {# трансляцій} other {# трансляцій}}",
       "error": {
         "internalServerError": "Не вдалося отримати статистику аудіо"
       }
@@ -3889,26 +3416,6 @@
         "unhealthy": "Нездоровий"
       }
     },
-    "customApi": {
-      "name": "Користувацький API",
-      "description": "Відображення даних з будь-якої зовнішньої API з користувальницької конфігурації.",
-      "option": {
-        "definitionId": {
-          "label": "Ідентифікатор визначення"
-        },
-        "refreshInterval": {
-          "label": "Інтервал оновлення",
-          "description": "Як часто слід оновлювати дані з API (в секундах)"
-        }
-      },
-      "noDefinition": "Не обрано визначення",
-      "definitionNotFound": "Визначення віджета не знайдено. Можливо, його видалено.",
-      "noDisplayOutput": "Без виводу на екран",
-      "executeConfirm": "Ви впевнені, що хочете виконати цю дію?",
-      "executing": "Виконання...",
-      "executeSuccess": "Дія успішно виконана",
-      "executeFailed": "Не вдалося виконати дію. Перевірте налаштування віджету."
-    },
     "beszelSystemTable": {
       "name": "Beszel системи (Таблиця)",
       "description": "Вид таблиць всіх систем, що контролюються в Beszel, з сортованими стовпцями і індикатори стану",
@@ -3954,11 +3461,19 @@
         },
         "showAgent": {
           "label": "Показати версію агента"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Системи не знайдені",
       "error": {
-        "internalServerError": "Не вдається підключитися до Beszel. Перевірте параметри інтеграції."
+        "internalServerError": "Не вдається підключитися до Beszel. Перевірте параметри інтеграції.",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Система",
@@ -4151,6 +3666,256 @@
           "subtitle": "Мережевий трафік Docker контейнерів"
         }
       }
+    },
+    "patchmon": {
+      "name": "ПатчМон",
+      "description": "Огляд стану патчів хоста від PatchMon",
+      "title": "Статистика PatchMon",
+      "totalHosts": "Всього хостів",
+      "hostsNeedingUpdates": "Потребує оновлення",
+      "securityUpdates": "Оновлення безпеки",
+      "upToDateHosts": "Оновлені хости",
+      "hostsWithSecurityUpdates": "Хости з оновленнями безпеки",
+      "recentUpdates24h": "Оновлення (24г)",
+      "totalOutdatedPackages": "Застарілі пакети",
+      "totalRepos": "Репозитарії",
+      "osDistribution": "Розподіл ОС",
+      "compliance": "Відповідність патчам",
+      "complianceRatio": "{upToDate} / {total}",
+      "lastUpdated": "Оновлено {time}",
+      "option": {
+        "showTotalHosts": {
+          "label": "Показати хости загалом",
+          "description": "Відображати загальну кількість контрольованих хостів"
+        },
+        "showHostsNeedingUpdates": {
+          "label": "Показувати потрібні оновлення хостів",
+          "description": "Відображати хости з принаймні одним застарілим пакетом"
+        },
+        "showSecurityUpdates": {
+          "label": "Показати оновлення безпеки",
+          "description": "Відображати загальну кількість доступних оновлень безпеки"
+        },
+        "showUpToDateHosts": {
+          "label": "Показувати актуальні хости",
+          "description": "Відображати хостингові системи без застарілих пакетів"
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "Показувати хости з оновленнями безпеки",
+          "description": "Показувати хости, які потребують патчів безпеки"
+        },
+        "showRecentUpdates24h": {
+          "label": "Показати останні оновлення (24h)",
+          "description": "Відображати кількість оновлень, застосованих за останні 24 години"
+        },
+        "showTotalOutdatedPackages": {
+          "label": "Показати застарілі пакети",
+          "description": "Відображати загальну кількість застарілих пакетів у всіх хостах"
+        },
+        "showTotalRepos": {
+          "label": "Показати репозиторії",
+          "description": "Відображати кількість активних репозиторіїв, що відслідковуються"
+        },
+        "enableThresholdColors": {
+          "label": "Увімкнути кольори порогових значень",
+          "description": "Значення колірних характеристик: зелений, жовтий або червоний, залежно від пресетів серйозності"
+        },
+        "useCustomThresholds": {
+          "label": "Розширені пороги",
+          "description": "Налаштуйте пороги попереджень та критичних значень для кожної статистики, використовуючи абсолютні показники або відсотки від загальної кількості хостів"
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "Абсолютна кількість",
+            "percent": "Відсоток від загальної кількості хостів"
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "Потрібен поріг оновлення",
+          "description": "Порівняйте оновлення як абсолютне значення або відсоток від загальної кількості хостів"
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "Поріг попередження про нові оновлення",
+          "description": "Вмикається жовтий колір, коли значення досягає цього порогового значення"
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "Потребує оновлення критичного порогу",
+          "description": "Вмикається червоний коли значення досягає цього порогу"
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "Режим оновлення системи безпеки",
+          "description": "Порівняйте оновлення безпеки як абсолютне значення або відсоток від загальної кількості хостів"
+        },
+        "securityUpdatesWarningAt": {
+          "label": "Поріг попередження про оновлення безпеки",
+          "description": "Вмикається жовтий колір, коли значення досягає цього порогового значення"
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "Критичний поріг оновлення системи безпеки",
+          "description": "Вмикається червоний коли значення досягає цього порогу"
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "Хости з режимом порогу оновлень безпеки",
+          "description": "Порівняйте кількість хостів як абсолютне значення або відсоток від загальної кількості хостів"
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "Хости з попередженням про оновлення безпеки",
+          "description": "Вмикається жовтий колір коли значення досягає цього порогу"
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "Хости з критичним порогом оновлення безпеки",
+          "description": "Вмикається червоний коли значення досягає цього порогу"
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "Оновлений режим порогового хостів",
+          "description": "Порівняйте актуальний хост як абсолютне значення або відсоток від загальної кількості хостів"
+        },
+        "upToDateHostsWarningAt": {
+          "label": "Поріг попередження для актуальних хостів",
+          "description": "Вмикається жовтий колір, коли значення дорівнює або перевищує цей поріг, але нижче повного покриття."
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "Критичний поріг для оновлених хостів",
+          "description": "Вмикається червоний, коли значення падає нижче цього порогу"
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "Режим порогу застарілих пакетів",
+          "description": "Порівняйте застарілі пакети як абсолютне значення або відсоток від загальної кількості хостів"
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "Поріг попередження про застарілі пакети",
+          "description": "Вмикається жовтий, коли значення досягає цього порогу"
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "Критичний поріг застарілих пакетів",
+          "description": "Вмикається  червоний коли значення досягає цього порогу"
+        },
+        "showOsDistribution": {
+          "label": "Показати розподіл ОС",
+          "description": "Показати розподіл контрольованих хостів операційною системою"
+        },
+        "osDistributionLimit": {
+          "label": "Обмеження розподілу ОС",
+          "description": "Максимальна кількість операційних систем для відображення",
+          "option": {
+            "3": "Топ 3",
+            "5": "Тор 5",
+            "10": "Топ 10",
+            "all": "Усі"
+          }
+        },
+        "showOsVersion": {
+          "label": "Показати версію ОС",
+          "description": "Додавати версію ОС до кожної мітки дистрибуції, коли вона стане доступною"
+        },
+        "showComplianceHero": {
+          "label": "Показати героя відповідності",
+          "description": "Відображати кільце відповідності, яке показує відсоток оновлених хостів"
+        },
+        "osDisplayMode": {
+          "label": "Режим відображення ОС",
+          "description": "Виберіть спосіб відображення дистрибутива операційної системи",
+          "option": {
+            "bars": "Горизонтальні смуги",
+            "donut": "Кільцева діаграма"
+          }
+        }
+      },
+      "error": {
+        "internalServerError": "Не вдалося отримати дані PatchMon"
+      }
+    },
+    "bazarr": {
+      "name": "Bazarr",
+      "description": "Огляд відсутніх субтитрів та стану справності вашого екземпляра Bazarr",
+      "episodes": "Відсутні епізоди",
+      "movies": "Відсутні фільми",
+      "providers": "Проблеми p постачальником",
+      "status": "Проблеми зі здоров'ям",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "Показати відсутні епізоди",
+          "description": "Відображати кількість епізодів без субтититрів"
+        },
+        "showMissingMovies": {
+          "label": "Показати відсутні фільми",
+          "description": "Відобразити кількість фільмів без субтитрів"
+        },
+        "showProviderIssues": {
+          "label": "Показати проблеми постачальника",
+          "description": "Відображати кількість постачальника субтитрів з проблемами"
+        },
+        "showHealthIssues": {
+          "label": "Показувати проблеми зі здоров’ям",
+          "description": "Відображати кількість проблем зі здоров’ям Bazarr"
+        }
+      },
+      "error": {
+        "internalServerError": "Не вдалося отримати дані Bazarr"
+      }
+    },
+    "mediaMissing": {
+      "name": "Відсутня медіа в черзі",
+      "description": "Показує відсутні і в черзі фільми і епізоди з Radarr і Sonarr",
+      "option": {
+        "showMissing": {
+          "label": "Показати відсутні елементи"
+        },
+        "showQueued": {
+          "label": "Показати елементи в черзі"
+        },
+        "pageSize": {
+          "label": "Елементів на сторінці"
+        }
+      },
+      "tab": {
+        "missing": "Відсутні",
+        "queued": "У черзі"
+      },
+      "type": {
+        "movie": "Фільм",
+        "episode": "Епізод"
+      },
+      "empty": {
+        "missing": "Немає відсутніх елементів",
+        "queued": "Немає елементів у черзі",
+        "noTabsEnabled": "Увімкнути принаймні одну вкладку в налаштуваннях віджету"
+      },
+      "timeLeft": "Залишилося часу"
+    },
+    "traefik": {
+      "name": "Трафік",
+      "description": "Огляд маршрутизаторів, сервісів, проміжного програмного забезпечення та точок входу Traefik",
+      "option": {
+        "showTcp": {
+          "label": "Показати TCP"
+        },
+        "showUdp": {
+          "label": "Show UDP"
+        },
+        "showEntryPoints": {
+          "label": "Показувати точки входу"
+        }
+      },
+      "instances": "Traefik екземпляри",
+      "versionUnknown": "Версія невідома",
+      "summary": {
+        "routers": "Маршрутизатори",
+        "entryPoints": "Точки входу"
+      },
+      "resource": {
+        "routers": "Маршрутизатори",
+        "services": "Служби",
+        "middlewares": "Проміжне програмне забезпечення"
+      },
+      "status": {
+        "healthy": "Здоровий",
+        "errors": "{count} помилок",
+        "warnings": "{count} застережень"
+      },
+      "error": {
+        "internalServerError": "Неможливо отримати дані Traefik"
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4296,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Головна",
         "boards": "Дошки",
         "apps": "Додатки",
         "integrations": "Інтеграції",
-        "customWidgets": "Власні віджети",
         "searchEngies": "Пошукові системи",
         "medias": "Медіа",
         "users": {
@@ -5356,6 +5121,7 @@
       },
       "remove": {
         "label": "Видалити",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "Контейнери видалено",
@@ -5673,6 +5439,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Керувати",
       "boards": {
         "label": "Дошки"
@@ -5707,18 +5476,6 @@
           "label": "Редагувати"
         }
       },
-      "custom-widgets": {
-        "label": "Користувальницькі віджети",
-        "new": {
-          "label": "Новий"
-        },
-        "edit": {
-          "label": "Редагувати",
-          "flow": {
-            "label": "Потік"
-          }
-        }
-      },
       "users": {
         "label": "Користувачі",
         "create": {
diff --git a/packages/translation/src/lang/vi.json b/packages/translation/src/lang/vi.json
index 0ade183c5..6aaec1f3b 100644
--- a/packages/translation/src/lang/vi.json
+++ b/packages/translation/src/lang/vi.json
@@ -688,211 +688,6 @@
       "add": ""
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "",
-        "noResults": "",
-        "loading": ""
-      },
-      "create": {
-        "title": "",
-        "subtitle": ""
-      },
-      "edit": {
-        "title": ""
-      }
-    },
-    "action": {
-      "create": "",
-      "import": "",
-      "save": "",
-      "delete": "",
-      "deleteConfirm": "",
-      "export": "",
-      "addMapping": "",
-      "addColumn": "",
-      "edit": "",
-      "removeMapping": "",
-      "removeColumn": "",
-      "addItem": "",
-      "removeItem": "",
-      "addBar": "",
-      "duplicate": "",
-      "copyAiPrompt": "",
-      "enable": "",
-      "disable": "",
-      "menu": ""
-    },
-    "field": {
-      "name": "",
-      "description": "",
-      "iconUrl": "",
-      "url": "",
-      "authType": "",
-      "headerName": "",
-      "method": "",
-      "requestBody": "",
-      "displayType": "",
-      "jsonPath": "",
-      "jsonPathHint": "",
-      "label": "",
-      "unit": "",
-      "mappings": "",
-      "tablePath": "",
-      "tablePathHint": "",
-      "columns": "",
-      "header": "",
-      "items": "",
-      "gridColumns": "",
-      "cardStyle": "",
-      "bars": "",
-      "valuePath": "",
-      "maxPath": "",
-      "showPercentage": "",
-      "barSize": "",
-      "goodValues": "",
-      "dotSize": "",
-      "valueSize": "",
-      "labelPosition": "",
-      "kvLayout": "",
-      "striped": "",
-      "compact": "",
-      "maxHeight": "",
-      "color": "",
-      "buttonLabel": "",
-      "buttonColor": "",
-      "confirmText": "",
-      "confirmTextHint": "",
-      "successMessage": "",
-      "successMessageHint": "",
-      "enabled": "",
-      "template": {
-        "label": "",
-        "description": ""
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "",
-      "exampleLabelShort": "",
-      "exampleHeader": "",
-      "exampleUnit": "",
-      "iconUrl": "",
-      "url": "",
-      "headerName": "",
-      "jsonPath": "",
-      "tablePath": "",
-      "columnJsonPath": "",
-      "valuePath": "",
-      "maxPath": "",
-      "goodValues": "",
-      "color": ""
-    },
-    "cardStyleOption": {
-      "filled": "",
-      "outline": "",
-      "subtle": ""
-    },
-    "layoutOption": {
-      "list": "",
-      "grid": ""
-    },
-    "sizeOption": {
-      "sm": "",
-      "md": "",
-      "lg": "",
-      "xl": ""
-    },
-    "labelPositionOption": {
-      "above": "",
-      "below": ""
-    },
-    "fieldset": {
-      "general": "",
-      "connection": "",
-      "display": ""
-    },
-    "displayTypeDescription": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "method": {
-      "GET": "",
-      "POST": "",
-      "PUT": "",
-      "DELETE": "",
-      "PATCH": ""
-    },
-    "authType": {
-      "none": "",
-      "bearer": "",
-      "basic": "",
-      "apiKeyHeader": "",
-      "apiKeyQuery": ""
-    },
-    "displayType": {
-      "singleValue": "",
-      "keyValue": "",
-      "table": "",
-      "statGrid": "",
-      "progressBars": "",
-      "statusIndicator": "",
-      "countGrid": "",
-      "raw": "",
-      "actionButton": "",
-      "customJsx": ""
-    },
-    "secret": {
-      "apiKey": "",
-      "username": "",
-      "password": "",
-      "savedPlaceholder": ""
-    },
-    "preview": {
-      "title": "",
-      "test": "",
-      "hint": "",
-      "rawResponse": ""
-    },
-    "notification": {
-      "created": "",
-      "updated": "",
-      "deleted": "",
-      "imported": "",
-      "aiPromptCopied": "",
-      "aiPromptDescription": "",
-      "aiPromptCopy": "",
-      "aiPromptNoResponse": "",
-      "aiPromptCopyError": "",
-      "createError": "",
-      "updateError": "",
-      "importError": "",
-      "exportError": "",
-      "duplicated": "",
-      "duplicateError": "",
-      "toggleError": "",
-      "deleteError": "",
-      "previewError": "",
-      "executed": "",
-      "executeError": ""
-    },
-    "table": {
-      "name": "",
-      "url": "",
-      "display": ""
-    },
-    "widget": {
-      "disabled": ""
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "Phần động mới",
-        "remove": "Xóa phần động"
+        "create": "Vùng chứa mới",
+        "remove": "Xóa vùng chứa"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "Xóa phần động",
-        "message": "Bạn có chắc chắn muốn xóa phần động này không? Các mục sẽ được chuyển đến cùng vị trí trong phần cha."
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "Tên"
-        }
-      },
-      "action": {
-        "create": "Danh mục mới",
-        "edit": "Đổi tên danh mục",
-        "remove": "Xóa danh mục",
-        "moveUp": "Đi lên",
-        "moveDown": "Đi xuống",
-        "createAbove": "Danh mục mới phía trên",
-        "createBelow": "Danh mục mới phía dưới",
-        "openAllInNewTabs": ""
-      },
-      "create": {
-        "title": "Danh mục mới",
-        "submit": "Thêm danh mục"
-      },
-      "remove": {
-        "title": "Xóa danh mục",
-        "message": "Bạn có chắc chắn muốn xóa danh mục {name} không?"
-      },
-      "edit": {
-        "title": "Đổi tên danh mục",
-        "submit": "Đổi tên danh mục"
-      },
-      "menu": {
-        "label": {
-          "create": "Danh mục mới",
-          "changePosition": "Đổi vị trí",
-          "settings": "Cài đặt"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "",
-        "text": ""
+        "title": "Xóa vùng chứa",
+        "message": "Bạn có chắc chắn muốn xóa vùng chứa này không? Các mục sẽ được chuyển đến cùng vị trí trong phần cha."
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "",
           "description": ""
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "",
         "user": "",
@@ -2734,6 +2512,9 @@
         "id": "",
         "status": "",
         "directPlay": "",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "",
         "paused": "",
         "remaining": "",
@@ -3768,18 +3549,6 @@
           "label": "",
           "description": ""
         },
-        "showNowPlaying": {
-          "label": "",
-          "description": ""
-        },
-        "showNowPlayingList": {
-          "label": "",
-          "description": ""
-        },
-        "maxNowPlayingItems": {
-          "label": "",
-          "description": ""
-        },
         "showLibraryCount": {
           "label": "",
           "description": ""
@@ -3813,8 +3582,6 @@
       "podcasts": "",
       "listeningTime": "",
       "activeSessions": "",
-      "nowPlaying": "",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": ""
       }
@@ -3889,26 +3656,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "",
-      "description": "",
-      "option": {
-        "definitionId": {
-          "label": ""
-        },
-        "refreshInterval": {
-          "label": "",
-          "description": ""
-        }
-      },
-      "noDefinition": "",
-      "definitionNotFound": "",
-      "noDisplayOutput": "",
-      "executeConfirm": "",
-      "executing": "",
-      "executeSuccess": "",
-      "executeFailed": ""
-    },
     "beszelSystemTable": {
       "name": "Beszel Systems (Bảng)",
       "description": "Dạng bảng của tất cả hệ thống được Beszel giám sát với các cột có thể sắp xếp và chỉ báo trạng thái",
@@ -3954,11 +3701,19 @@
         },
         "showAgent": {
           "label": "Hiển thị phiên bản tác tử"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "Không tìm thấy hệ thống",
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "Hệ thống",
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "Trang chủ",
         "boards": "Bảng",
         "apps": "Ứng dụng",
         "integrations": "",
-        "customWidgets": "",
         "searchEngies": "Công cụ tìm kiếm",
         "medias": "",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "Xóa",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "Quản lý",
       "boards": {
         "label": "Bảng"
@@ -5707,18 +5466,6 @@
           "label": "Sửa"
         }
       },
-      "custom-widgets": {
-        "label": "",
-        "new": {
-          "label": ""
-        },
-        "edit": {
-          "label": "",
-          "flow": {
-            "label": ""
-          }
-        }
-      },
       "users": {
         "label": "Người dùng",
         "create": {
diff --git a/packages/translation/src/lang/zh.json b/packages/translation/src/lang/zh.json
index 6b6dcca96..0b62df8c0 100644
--- a/packages/translation/src/lang/zh.json
+++ b/packages/translation/src/lang/zh.json
@@ -688,211 +688,6 @@
       "add": "新增應用程式"
     }
   },
-  "customWidget": {
-    "page": {
-      "list": {
-        "title": "自訂小工具",
-        "noResults": "尚無自訂小工具。建立您的第一個！",
-        "loading": "正在讀取……"
-      },
-      "create": {
-        "title": "建立自訂小工具",
-        "subtitle": "定義 API URL、驗證方式以及如何顯示回應資料。"
-      },
-      "edit": {
-        "title": "編輯自訂小工具"
-      }
-    },
-    "action": {
-      "create": "建立",
-      "import": "匯入",
-      "save": "儲存",
-      "delete": "刪除自訂小工具",
-      "deleteConfirm": "確定要刪除 \"{name}\" 嗎？此動作無法復原。",
-      "export": "匯出",
-      "addMapping": "新增對應",
-      "addColumn": "新增欄",
-      "edit": "編輯",
-      "removeMapping": "移除對應",
-      "removeColumn": "移除欄",
-      "addItem": "新增項目",
-      "removeItem": "移除項目",
-      "addBar": "新增長條",
-      "duplicate": "複製",
-      "copyAiPrompt": "複製 AI 提示",
-      "enable": "啟用",
-      "disable": "停用",
-      "menu": "動作"
-    },
-    "field": {
-      "name": "名稱",
-      "description": "描述",
-      "iconUrl": "圖示網址",
-      "url": "網址",
-      "authType": "驗證類型",
-      "headerName": "標頭/查詢參數名稱",
-      "method": "方法",
-      "requestBody": "請求主體",
-      "displayType": "顯示類型",
-      "jsonPath": "JSON 路徑",
-      "jsonPathHint": "使用 JSONPath 語法來擷取值，例如 $.data.temperature 或 $.items[0].name",
-      "label": "標籤",
-      "unit": "單位",
-      "mappings": "對應",
-      "tablePath": "陣列 JSON 路徑",
-      "tablePathHint": "回應中陣列的路徑，例如 $.data.items",
-      "columns": "欄",
-      "header": "標頭",
-      "items": "項目",
-      "gridColumns": "網格欄",
-      "cardStyle": "卡片樣式",
-      "bars": "長條",
-      "valuePath": "值 JSON 路徑",
-      "maxPath": "最大值 JSON 路徑",
-      "showPercentage": "顯示百分比",
-      "barSize": "長條大小",
-      "goodValues": "良好值 (逗號分隔)",
-      "dotSize": "點大小",
-      "valueSize": "值大小",
-      "labelPosition": "標籤位置",
-      "kvLayout": "佈局",
-      "striped": "條紋列",
-      "compact": "精簡模式",
-      "maxHeight": "最大高度 (像素)",
-      "color": "顏色",
-      "buttonLabel": "按鈕標籤",
-      "buttonColor": "按鈕顏色",
-      "confirmText": "確認文字",
-      "confirmTextHint": "若設定，執行請求前會顯示確認對話框",
-      "successMessage": "成功訊息",
-      "successMessageHint": "執行成功後顯示的訊息",
-      "enabled": "已啟用",
-      "template": {
-        "label": "JSX 樣板",
-        "description": "Mantine JSX 樣板。透過資料綁定存取 API 回應欄位 (例如 data.name)。僅使用白名單中的組件。禁止: constructor, __proto__, eval, Function, window, document。"
-      }
-    },
-    "placeholder": {
-      "exampleLabel": "CPU 溫度",
-      "exampleLabelShort": "CPU 溫度",
-      "exampleHeader": "名稱",
-      "exampleUnit": "°C",
-      "iconUrl": "https://……",
-      "url": "https://api.example.com/api/v1/status",
-      "headerName": "X-API-Key",
-      "jsonPath": "$.data.value",
-      "tablePath": "$.data.items",
-      "columnJsonPath": "$.name",
-      "valuePath": "$.data.used",
-      "maxPath": "$.data.total",
-      "goodValues": "online, true, up",
-      "color": "blue"
-    },
-    "cardStyleOption": {
-      "filled": "填滿",
-      "outline": "外框",
-      "subtle": "細微"
-    },
-    "layoutOption": {
-      "list": "清單",
-      "grid": "網格"
-    },
-    "sizeOption": {
-      "sm": "小",
-      "md": "中",
-      "lg": "大",
-      "xl": "特大"
-    },
-    "labelPositionOption": {
-      "above": "上方",
-      "below": "下方"
-    },
-    "fieldset": {
-      "general": "一般",
-      "connection": "API 連線",
-      "display": "顯示設定"
-    },
-    "displayTypeDescription": {
-      "singleValue": "顯示一個帶有標籤和單位的擷取值",
-      "keyValue": "並排顯示多個帶有標籤的值",
-      "table": "以表格格式顯示資料列",
-      "statGrid": "以網格形式顯示彩色統計卡 — 類似 Pi-Hole 或 Speedtest 小工具",
-      "progressBars": "顯示使用量或完成度的進度條 — 適用於磁碟、記憶體、配額",
-      "statusIndicator": "彩色狀態點顯示線上/離線或健康狀態",
-      "countGrid": "在緊湊的網格中顯示精簡的數字 + 標籤計數器",
-      "raw": "用於偵錯的美化 JSON 輸出",
-      "actionButton": "點擊時觸發請求的按鈕",
-      "customJsx": "使用白名單 Mantine 組件的自訂 JSX 佈局，具有完整的 API 資料綁定"
-    },
-    "method": {
-      "GET": "GET",
-      "POST": "POST",
-      "PUT": "PUT",
-      "DELETE": "DELETE",
-      "PATCH": "PATCH"
-    },
-    "authType": {
-      "none": "無",
-      "bearer": "Bearer 令牌",
-      "basic": "基本驗證",
-      "apiKeyHeader": "API 金鑰 (標頭)",
-      "apiKeyQuery": "API 金鑰 (查詢)"
-    },
-    "displayType": {
-      "singleValue": "單一值",
-      "keyValue": "鍵值",
-      "table": "表格",
-      "statGrid": "統計網格",
-      "progressBars": "進度條",
-      "statusIndicator": "狀態指示器",
-      "countGrid": "計數網格",
-      "raw": "原始 JSON",
-      "actionButton": "動作按鈕",
-      "customJsx": "自訂 JSX"
-    },
-    "secret": {
-      "apiKey": "API 金鑰 / 令牌",
-      "username": "使用者名稱",
-      "password": "密碼",
-      "savedPlaceholder": "••••••• (已儲存，留空則保持不變)"
-    },
-    "preview": {
-      "title": "預覽",
-      "test": "測試",
-      "hint": "點擊「測試」以用目前設定預覽 API 回應。",
-      "rawResponse": "原始 JSON 回應"
-    },
-    "notification": {
-      "created": "小工具 \"{name}\" 建立成功。",
-      "updated": "小工具 \"{name}\" 更新成功。",
-      "deleted": "小工具 \"{name}\" 已刪除。",
-      "imported": "小工具匯入成功。",
-      "aiPromptCopied": "AI 提示已複製到剪貼簿",
-      "aiPromptDescription": "複製預先構建的提示，貼到任何 AI 聊天機器人 (ChatGPT、Claude、Gemini...)。其中包含完整的小工具綱要和您的 API 回應，讓 AI 能為您產生可直接匯入的 JSON 設定。",
-      "aiPromptCopy": "複製到剪貼簿",
-      "aiPromptNoResponse": "提示: 先執行測試將您的 API 回應包含在提示中，以獲得更好的結果。",
-      "aiPromptCopyError": "無法將提示複製到剪貼簿。您的瀏覽器可能不支援此功能。",
-      "createError": "建立小工具失敗。請檢查 API 端點是否可達。",
-      "updateError": "更新小工具失敗。您的變更未被儲存。",
-      "importError": "匯入小工具失敗。請確保檔案是有效的自訂小工具 JSON 匯出。",
-      "exportError": "匯出小工具失敗。",
-      "duplicated": "小工具 \"{name}\" 已複製。",
-      "duplicateError": "複製小工具失敗。",
-      "toggleError": "切換小工具狀態失敗。",
-      "deleteError": "刪除小工具失敗。",
-      "previewError": "無法取得預覽。請檢查網址並重試。",
-      "executed": "動作執行成功。",
-      "executeError": "動作失敗: {error}"
-    },
-    "table": {
-      "name": "名稱",
-      "url": "網址",
-      "display": "顯示"
-    },
-    "widget": {
-      "disabled": "此小工具已停用"
-    }
-  },
   "integration": {
     "page": {
       "list": {
@@ -1549,10 +1344,10 @@
     }
   },
   "section": {
-    "dynamic": {
+    "container": {
       "action": {
-        "create": "創建動態區段",
-        "remove": "移除動態區段"
+        "create": "新增容器",
+        "remove": "移除容器"
       },
       "option": {
         "title": {
@@ -1566,48 +1361,8 @@
         }
       },
       "remove": {
-        "title": "移除動態區段",
-        "message": "確認要移除此動態區段嗎？項目將移動到父區段的相同位置"
-      }
-    },
-    "category": {
-      "field": {
-        "name": {
-          "label": "名稱"
-        }
-      },
-      "action": {
-        "create": "創建分類",
-        "edit": "移除分類",
-        "remove": "移除分類",
-        "moveUp": "上移",
-        "moveDown": "下移",
-        "createAbove": "新分類之上",
-        "createBelow": "新分類之下",
-        "openAllInNewTabs": "於分頁中開啟全部"
-      },
-      "create": {
-        "title": "創建分類",
-        "submit": "創建分類"
-      },
-      "remove": {
-        "title": "移除分類",
-        "message": "確認移除分類 {name} 嗎？"
-      },
-      "edit": {
-        "title": "重新命名分類",
-        "submit": "重新命名分類"
-      },
-      "menu": {
-        "label": {
-          "create": "創建分類",
-          "changePosition": "變更位置",
-          "settings": "設定"
-        }
-      },
-      "openAllInNewTabs": {
-        "title": "於分頁中開啟全部",
-        "text": "某些瀏覽器可能會因安全性考量而阻止批量開啟分頁，Homarr 無法開啟所有視窗，因為您的瀏覽器已封鎖此操作，請允許「開啟彈出式視窗」，然後重試"
+        "title": "移除容器",
+        "message": "確認要移除此容器嗎？項目將移動到父區段的相同位置"
       }
     }
   },
@@ -2428,10 +2183,21 @@
         },
         "descendingDefaultSort": {
           "label": ""
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "error": {
-        "internalServerError": ""
+        "internalServerError": "",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
+      },
+      "empty": {
+        "noContainers": ""
       }
     },
     "coolify": {
@@ -2725,8 +2491,20 @@
         "showOnlyPlaying": {
           "label": "只顯示目前播放中的項目",
           "description": "停用此功能將無法在 Plex 上運作"
+        },
+        "showBitrate": {
+          "label": "",
+          "description": ""
+        },
+        "showLocation": {
+          "label": "",
+          "description": ""
         }
       },
+      "footer": {
+        "streams": "",
+        "totalBitrate": ""
+      },
       "items": {
         "currentlyPlaying": "目前播放中",
         "user": "使用者",
@@ -2734,6 +2512,9 @@
         "id": "ID",
         "status": "狀態",
         "directPlay": "直接播放",
+        "directStream": "",
+        "transcodeVideo": "",
+        "transcodeAudio": "",
         "transcoding": "轉碼中",
         "paused": "已暫停",
         "remaining": "剩餘 {minutes} 分鐘",
@@ -2802,193 +2583,6 @@
         "internalServerError": "無法取得 Paperless-ngx 資料"
       }
     },
-    "patchmon": {
-      "name": "PatchMon",
-      "description": "來自 PatchMon 的主機修補狀態概覽",
-      "title": "PatchMon 統計",
-      "totalHosts": "主機總數",
-      "hostsNeedingUpdates": "需要更新",
-      "securityUpdates": "安全性更新",
-      "upToDateHosts": "已更新至最新",
-      "hostsWithSecurityUpdates": "有安全性更新的主機",
-      "recentUpdates24h": "更新 (24h)",
-      "totalOutdatedPackages": "過時套件",
-      "totalRepos": "儲存庫",
-      "osDistribution": "作業系統分佈",
-      "compliance": "修補合規性",
-      "complianceRatio": "{upToDate} / {total}",
-      "lastUpdated": "更新於 {time}",
-      "option": {
-        "showTotalHosts": {
-          "label": "顯示主機總數",
-          "description": "顯示受監控的主機總數"
-        },
-        "showHostsNeedingUpdates": {
-          "label": "顯示需要更新的主機",
-          "description": "顯示至少有一個過時套件的主機"
-        },
-        "showSecurityUpdates": {
-          "label": "顯示安全性更新總數",
-          "description": "顯示可用的安全性更新總數"
-        },
-        "showUpToDateHosts": {
-          "label": "顯示已更新至最新主機",
-          "description": "顯示沒有任何過時套件的主機"
-        },
-        "showHostsWithSecurityUpdates": {
-          "label": "顯示有安全性更新的主機",
-          "description": "顯示需要安全性修補的主機"
-        },
-        "showRecentUpdates24h": {
-          "label": "顯示近期更新 (24h)",
-          "description": "顯示過去 24 小時內已套用的更新數量"
-        },
-        "showTotalOutdatedPackages": {
-          "label": "顯示過時套件總數",
-          "description": "顯示所有主機上過時套件的總數"
-        },
-        "showTotalRepos": {
-          "label": "顯示儲存庫數量",
-          "description": "顯示正在監控的活躍儲存庫數量"
-        },
-        "enableThresholdColors": {
-          "label": "啟用閾值顏色",
-          "description": "根據嚴重性預設將統計值著色為綠色、黃色或紅色"
-        },
-        "useCustomThresholds": {
-          "label": "進階閾值",
-          "description": "使用絕對計數或主機總數百分比，對每個統計值自訂警告和嚴重閾值"
-        },
-        "thresholdMode": {
-          "option": {
-            "absolute": "絕對計數",
-            "percent": "主機總數百分比"
-          }
-        },
-        "hostsNeedingUpdatesThresholdMode": {
-          "label": "需要更新閾值模式",
-          "description": "以絕對值或主機總數百分比比較需要更新的計數"
-        },
-        "hostsNeedingUpdatesWarningAt": {
-          "label": "需要更新警告閾值",
-          "description": "數值達到此閾值時轉為黃色"
-        },
-        "hostsNeedingUpdatesCriticalAt": {
-          "label": "需要更新嚴重閾值",
-          "description": "數值達到此閾值時轉為紅色"
-        },
-        "securityUpdatesThresholdMode": {
-          "label": "安全性更新閾值模式",
-          "description": "以絕對值或主機總數百分比比較安全性更新的計數"
-        },
-        "securityUpdatesWarningAt": {
-          "label": "安全性更新警告閾值",
-          "description": "數值達到此閾值時轉為黃色"
-        },
-        "securityUpdatesCriticalAt": {
-          "label": "安全性更新嚴重閾值",
-          "description": "數值達到此閾值時轉為紅色"
-        },
-        "hostsWithSecurityUpdatesThresholdMode": {
-          "label": "有安全性更新主機閾值模式",
-          "description": "以絕對值或主機總數百分比比較主機計數"
-        },
-        "hostsWithSecurityUpdatesWarningAt": {
-          "label": "有安全性更新主機警告閾值",
-          "description": "數值達到此閾值時轉為黃色"
-        },
-        "hostsWithSecurityUpdatesCriticalAt": {
-          "label": "有安全性更新主機嚴重閾值",
-          "description": "數值達到此閾值時轉為紅色"
-        },
-        "upToDateHostsThresholdMode": {
-          "label": "已更新至最新主機閾值模式",
-          "description": "以絕對值或主機總數百分比比較已更新至最新主機計數"
-        },
-        "upToDateHostsWarningAt": {
-          "label": "已更新至最新主機警告閾值",
-          "description": "數值達到或高於此閾值但低於全覆蓋時轉為黃色"
-        },
-        "upToDateHostsCriticalAt": {
-          "label": "已更新至最新主機嚴重閾值",
-          "description": "數值低於此閾值時轉為紅色"
-        },
-        "totalOutdatedPackagesThresholdMode": {
-          "label": "過時套件閾值模式",
-          "description": "以絕對值或主機總數百分比比較過時套件計數"
-        },
-        "totalOutdatedPackagesWarningAt": {
-          "label": "過時套件警告閾值",
-          "description": "數值達到此閾值時轉為黃色"
-        },
-        "totalOutdatedPackagesCriticalAt": {
-          "label": "過時套件嚴重閾值",
-          "description": "數值達到此閾值時轉為紅色"
-        },
-        "showOsDistribution": {
-          "label": "顯示作業系統分佈",
-          "description": "顯示按作業系統細分的受監控主機"
-        },
-        "osDistributionLimit": {
-          "label": "作業系統分佈限制",
-          "description": "最多顯示的作業系統數量",
-          "option": {
-            "3": "前 3 名",
-            "5": "前 5 名",
-            "10": "前 10 名",
-            "all": "全部"
-          }
-        },
-        "showOsVersion": {
-          "label": "顯示作業系統版本",
-          "description": "當可用時，在每個分佈標籤後附加作業系統版本"
-        },
-        "showComplianceHero": {
-          "label": "顯示合規性英雄",
-          "description": "顯示一個合規性環，展示已更新至最新主機的百分比"
-        },
-        "osDisplayMode": {
-          "label": "作業系統顯示模式",
-          "description": "選擇如何顯示作業系統分佈",
-          "option": {
-            "bars": "水平長條",
-            "donut": "甜甜圈圖"
-          }
-        }
-      },
-      "error": {
-        "internalServerError": "無法擷取 PatchMon 資料"
-      }
-    },
-    "bazarr": {
-      "name": "Bazarr",
-      "description": "來自 Bazarr 實例的缺少字幕和健康狀態概覽",
-      "episodes": "缺少的集數",
-      "movies": "缺少的電影",
-      "providers": "提供者問題",
-      "status": "健康問題",
-      "option": {
-        "showMissingEpisodes": {
-          "label": "顯示缺少的集數",
-          "description": "顯示缺少字幕的集數數量"
-        },
-        "showMissingMovies": {
-          "label": "顯示缺少的電影",
-          "description": "顯示缺少字幕的電影數量"
-        },
-        "showProviderIssues": {
-          "label": "顯示提供者問題",
-          "description": "顯示有問題的字幕提供者數量"
-        },
-        "showHealthIssues": {
-          "label": "顯示健康問題",
-          "description": "顯示 Bazarr 健康問題的數量"
-        }
-      },
-      "error": {
-        "internalServerError": "無法擷取 Bazarr 資料"
-      }
-    },
     "immich-serverStats": {
       "name": "",
       "description": "",
@@ -3361,35 +2955,6 @@
         }
       }
     },
-    "mediaMissing": {
-      "name": "缺少和佇列中的媒體",
-      "description": "顯示來自 Radarr 和 Sonarr 的缺少和佇列中的電影及影集",
-      "option": {
-        "showMissing": {
-          "label": "顯示缺少的項目"
-        },
-        "showQueued": {
-          "label": "顯示佇列中的項目"
-        },
-        "pageSize": {
-          "label": "每頁項目數"
-        }
-      },
-      "tab": {
-        "missing": "缺少",
-        "queued": "佇列中"
-      },
-      "type": {
-        "movie": "電影",
-        "episode": "集數"
-      },
-      "empty": {
-        "missing": "沒有缺少的項目",
-        "queued": "沒有佇列中的項目",
-        "noTabsEnabled": "在小工具設定中至少啟用一個分頁"
-      },
-      "timeLeft": "剩餘時間"
-    },
     "rssFeed": {
       "name": "RSS 訂閱",
       "description": "顯示一個或多個 RSS、ATOM、JSON 源",
@@ -3718,40 +3283,6 @@
         "internalServerError": "無法取得運作時間資料"
       }
     },
-    "traefik": {
-      "name": "Traefik",
-      "description": "Traefik 路由器、服務、中間件和入口點概覽",
-      "option": {
-        "showTcp": {
-          "label": "顯示 TCP"
-        },
-        "showUdp": {
-          "label": "顯示 UDP"
-        },
-        "showEntryPoints": {
-          "label": "顯示入口點"
-        }
-      },
-      "instances": "Traefik 實例",
-      "versionUnknown": "版本未知",
-      "summary": {
-        "routers": "路由器",
-        "entryPoints": "入口點"
-      },
-      "resource": {
-        "routers": "路由器",
-        "services": "服務",
-        "middlewares": "中間件"
-      },
-      "status": {
-        "healthy": "健康",
-        "errors": "{count} 個錯誤",
-        "warnings": "{count} 個警告"
-      },
-      "error": {
-        "internalServerError": "無法擷取 Traefik 資料"
-      }
-    },
     "audioStats": {
       "name": "音訊統計",
       "description": "來自 Navidrome 或 Audiobookshelf 的資料庫和播放統計資料",
@@ -3768,18 +3299,6 @@
           "label": "顯示歌曲",
           "description": "顯示音樂庫中的歌曲總數 (Navidrome)"
         },
-        "showNowPlaying": {
-          "label": "顯示正在播放",
-          "description": "顯示目前播放中的曲目 (Navidrome)"
-        },
-        "showNowPlayingList": {
-          "label": "顯示正在播放清單",
-          "description": "顯示個別曲目，而非僅顯示活動串流計數 (Navidrome)"
-        },
-        "maxNowPlayingItems": {
-          "label": "最大正在播放項目數",
-          "description": "在正在播放清單中顯示的最大曲目數量 (Navidrome)"
-        },
         "showLibraryCount": {
           "label": "顯示庫數量",
           "description": "顯示你的執行個體上的庫數量 (Audiobookshelf)"
@@ -3813,8 +3332,6 @@
       "podcasts": "播客",
       "listeningTime": "聆聽時間",
       "activeSessions": "活躍會話",
-      "nowPlaying": "正在播放",
-      "nowPlayingCount": "",
       "error": {
         "internalServerError": "無法擷取音訊統計資料"
       }
@@ -3889,26 +3406,6 @@
         "unhealthy": ""
       }
     },
-    "customApi": {
-      "name": "自訂 API",
-      "description": "使用自訂設定顯示來自任何外部 API 的資料。",
-      "option": {
-        "definitionId": {
-          "label": "定義 ID"
-        },
-        "refreshInterval": {
-          "label": "重新整理間隔",
-          "description": "從 API 重新擷取資料的頻率 (秒)"
-        }
-      },
-      "noDefinition": "未選擇定義",
-      "definitionNotFound": "找不到小工具定義。可能已被刪除。",
-      "noDisplayOutput": "無顯示輸出",
-      "executeConfirm": "確定要執行此動作嗎？",
-      "executing": "正在執行……",
-      "executeSuccess": "動作執行成功",
-      "executeFailed": "動作失敗。請檢查小工具設定。"
-    },
     "beszelSystemTable": {
       "name": "Beszel 系統（表格）",
       "description": "所有 Beszel 監控系統的表格檢視，帶有可排序的欄位和狀態指示器",
@@ -3954,11 +3451,19 @@
         },
         "showAgent": {
           "label": "顯示代理版本"
+        },
+        "columnOrder": {
+          "label": ""
+        },
+        "columnWidths": {
+          "label": ""
         }
       },
       "noRecords": "找不到系統",
       "error": {
-        "internalServerError": "無法連線到 Beszel。請檢查整合設定。"
+        "internalServerError": "無法連線到 Beszel。請檢查整合設定。",
+        "layoutSaveTitle": "",
+        "layoutSaveMessage": ""
       },
       "column": {
         "system": "系統",
@@ -4151,6 +3656,256 @@
           "subtitle": "Docker 容器的網路流量"
         }
       }
+    },
+    "patchmon": {
+      "name": "PatchMon",
+      "description": "來自 PatchMon 的主機修補狀態概覽",
+      "title": "PatchMon 統計",
+      "totalHosts": "主機總數",
+      "hostsNeedingUpdates": "需要更新",
+      "securityUpdates": "安全性更新",
+      "upToDateHosts": "已更新至最新",
+      "hostsWithSecurityUpdates": "有安全性更新的主機",
+      "recentUpdates24h": "更新 (24h)",
+      "totalOutdatedPackages": "過時套件",
+      "totalRepos": "儲存庫",
+      "osDistribution": "作業系統分佈",
+      "compliance": "修補合規性",
+      "complianceRatio": "{upToDate} / {total}",
+      "lastUpdated": "更新於 {time}",
+      "option": {
+        "showTotalHosts": {
+          "label": "顯示主機總數",
+          "description": "顯示受監控的主機總數"
+        },
+        "showHostsNeedingUpdates": {
+          "label": "顯示需要更新的主機",
+          "description": "顯示至少有一個過時套件的主機"
+        },
+        "showSecurityUpdates": {
+          "label": "顯示安全性更新總數",
+          "description": "顯示可用的安全性更新總數"
+        },
+        "showUpToDateHosts": {
+          "label": "顯示已更新至最新主機",
+          "description": "顯示沒有任何過時套件的主機"
+        },
+        "showHostsWithSecurityUpdates": {
+          "label": "顯示有安全性更新的主機",
+          "description": "顯示需要安全性修補的主機"
+        },
+        "showRecentUpdates24h": {
+          "label": "顯示近期更新 (24h)",
+          "description": "顯示過去 24 小時內已套用的更新數量"
+        },
+        "showTotalOutdatedPackages": {
+          "label": "顯示過時套件總數",
+          "description": "顯示所有主機上過時套件的總數"
+        },
+        "showTotalRepos": {
+          "label": "顯示儲存庫數量",
+          "description": "顯示正在監控的活躍儲存庫數量"
+        },
+        "enableThresholdColors": {
+          "label": "啟用閾值顏色",
+          "description": "根據嚴重性預設將統計值著色為綠色、黃色或紅色"
+        },
+        "useCustomThresholds": {
+          "label": "進階閾值",
+          "description": "使用絕對計數或主機總數百分比，對每個統計值自訂警告和嚴重閾值"
+        },
+        "thresholdMode": {
+          "option": {
+            "absolute": "絕對計數",
+            "percent": "主機總數百分比"
+          }
+        },
+        "hostsNeedingUpdatesThresholdMode": {
+          "label": "需要更新閾值模式",
+          "description": "以絕對值或主機總數百分比比較需要更新的計數"
+        },
+        "hostsNeedingUpdatesWarningAt": {
+          "label": "需要更新警告閾值",
+          "description": "數值達到此閾值時轉為黃色"
+        },
+        "hostsNeedingUpdatesCriticalAt": {
+          "label": "需要更新嚴重閾值",
+          "description": "數值達到此閾值時轉為紅色"
+        },
+        "securityUpdatesThresholdMode": {
+          "label": "安全性更新閾值模式",
+          "description": "以絕對值或主機總數百分比比較安全性更新的計數"
+        },
+        "securityUpdatesWarningAt": {
+          "label": "安全性更新警告閾值",
+          "description": "數值達到此閾值時轉為黃色"
+        },
+        "securityUpdatesCriticalAt": {
+          "label": "安全性更新嚴重閾值",
+          "description": "數值達到此閾值時轉為紅色"
+        },
+        "hostsWithSecurityUpdatesThresholdMode": {
+          "label": "有安全性更新主機閾值模式",
+          "description": "以絕對值或主機總數百分比比較主機計數"
+        },
+        "hostsWithSecurityUpdatesWarningAt": {
+          "label": "有安全性更新主機警告閾值",
+          "description": "數值達到此閾值時轉為黃色"
+        },
+        "hostsWithSecurityUpdatesCriticalAt": {
+          "label": "有安全性更新主機嚴重閾值",
+          "description": "數值達到此閾值時轉為紅色"
+        },
+        "upToDateHostsThresholdMode": {
+          "label": "已更新至最新主機閾值模式",
+          "description": "以絕對值或主機總數百分比比較已更新至最新主機計數"
+        },
+        "upToDateHostsWarningAt": {
+          "label": "已更新至最新主機警告閾值",
+          "description": "數值達到或高於此閾值但低於全覆蓋時轉為黃色"
+        },
+        "upToDateHostsCriticalAt": {
+          "label": "已更新至最新主機嚴重閾值",
+          "description": "數值低於此閾值時轉為紅色"
+        },
+        "totalOutdatedPackagesThresholdMode": {
+          "label": "過時套件閾值模式",
+          "description": "以絕對值或主機總數百分比比較過時套件計數"
+        },
+        "totalOutdatedPackagesWarningAt": {
+          "label": "過時套件警告閾值",
+          "description": "數值達到此閾值時轉為黃色"
+        },
+        "totalOutdatedPackagesCriticalAt": {
+          "label": "過時套件嚴重閾值",
+          "description": "數值達到此閾值時轉為紅色"
+        },
+        "showOsDistribution": {
+          "label": "顯示作業系統分佈",
+          "description": "顯示按作業系統細分的受監控主機"
+        },
+        "osDistributionLimit": {
+          "label": "作業系統分佈限制",
+          "description": "最多顯示的作業系統數量",
+          "option": {
+            "3": "前 3 名",
+            "5": "前 5 名",
+            "10": "前 10 名",
+            "all": "全部"
+          }
+        },
+        "showOsVersion": {
+          "label": "顯示作業系統版本",
+          "description": "當可用時，在每個分佈標籤後附加作業系統版本"
+        },
+        "showComplianceHero": {
+          "label": "顯示合規性英雄",
+          "description": "顯示一個合規性環，展示已更新至最新主機的百分比"
+        },
+        "osDisplayMode": {
+          "label": "作業系統顯示模式",
+          "description": "選擇如何顯示作業系統分佈",
+          "option": {
+            "bars": "水平長條",
+            "donut": "甜甜圈圖"
+          }
+        }
+      },
+      "error": {
+        "internalServerError": "無法擷取 PatchMon 資料"
+      }
+    },
+    "bazarr": {
+      "name": "Bazarr",
+      "description": "來自 Bazarr 實例的缺少字幕和健康狀態概覽",
+      "episodes": "缺少的集數",
+      "movies": "缺少的電影",
+      "providers": "提供者問題",
+      "status": "健康問題",
+      "option": {
+        "showMissingEpisodes": {
+          "label": "顯示缺少的集數",
+          "description": "顯示缺少字幕的集數數量"
+        },
+        "showMissingMovies": {
+          "label": "顯示缺少的電影",
+          "description": "顯示缺少字幕的電影數量"
+        },
+        "showProviderIssues": {
+          "label": "顯示提供者問題",
+          "description": "顯示有問題的字幕提供者數量"
+        },
+        "showHealthIssues": {
+          "label": "顯示健康問題",
+          "description": "顯示 Bazarr 健康問題的數量"
+        }
+      },
+      "error": {
+        "internalServerError": "無法擷取 Bazarr 資料"
+      }
+    },
+    "mediaMissing": {
+      "name": "缺少和佇列中的媒體",
+      "description": "顯示來自 Radarr 和 Sonarr 的缺少和佇列中的電影及影集",
+      "option": {
+        "showMissing": {
+          "label": "顯示缺少的項目"
+        },
+        "showQueued": {
+          "label": "顯示佇列中的項目"
+        },
+        "pageSize": {
+          "label": "每頁項目數"
+        }
+      },
+      "tab": {
+        "missing": "缺少",
+        "queued": "佇列中"
+      },
+      "type": {
+        "movie": "電影",
+        "episode": "集數"
+      },
+      "empty": {
+        "missing": "沒有缺少的項目",
+        "queued": "沒有佇列中的項目",
+        "noTabsEnabled": "在小工具設定中至少啟用一個分頁"
+      },
+      "timeLeft": "剩餘時間"
+    },
+    "traefik": {
+      "name": "Traefik",
+      "description": "Traefik 路由器、服務、中間件和入口點概覽",
+      "option": {
+        "showTcp": {
+          "label": "顯示 TCP"
+        },
+        "showUdp": {
+          "label": "顯示 UDP"
+        },
+        "showEntryPoints": {
+          "label": "顯示入口點"
+        }
+      },
+      "instances": "Traefik 實例",
+      "versionUnknown": "版本未知",
+      "summary": {
+        "routers": "路由器",
+        "entryPoints": "入口點"
+      },
+      "resource": {
+        "routers": "路由器",
+        "services": "服務",
+        "middlewares": "中間件"
+      },
+      "status": {
+        "healthy": "健康",
+        "errors": "{count} 個錯誤",
+        "warnings": "{count} 個警告"
+      },
+      "error": {
+        "internalServerError": "無法擷取 Traefik 資料"
+      }
     }
   },
   "widgetPreview": {
@@ -4531,11 +4286,11 @@
     },
     "navbar": {
       "items": {
+        "workshop": "Workshop",
         "home": "首頁",
         "boards": "面板",
         "apps": "應用程式",
         "integrations": "集成",
-        "customWidgets": "自訂小工具",
         "searchEngies": "搜尋引擎",
         "medias": "多媒體",
         "users": {
@@ -5356,6 +5111,7 @@
       },
       "remove": {
         "label": "移除",
+        "confirm": "",
         "notification": {
           "success": {
             "title": "容器已移除",
@@ -5673,6 +5429,9 @@
   },
   "navigationStructure": {
     "manage": {
+      "workshop": {
+        "label": "Workshop"
+      },
       "label": "管理",
       "boards": {
         "label": "面板"
@@ -5707,18 +5466,6 @@
           "label": "編輯"
         }
       },
-      "custom-widgets": {
-        "label": "自訂小工具",
-        "new": {
-          "label": "新增"
-        },
-        "edit": {
-          "label": "編輯",
-          "flow": {
-            "label": "流程"
-          }
-        }
-      },
       "users": {
         "label": "使用者",
         "create": {
diff --git a/packages/translation/src/languages.spec.ts b/packages/translation/src/languages.spec.ts
new file mode 100644
index 000000000..7775119d0
--- /dev/null
+++ b/packages/translation/src/languages.spec.ts
@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+
+import { localeConfigurations } from "./config";
+import { supportedLanguages } from "./languages";
+
+describe("supported translation languages", () => {
+  it("matches the locale configuration registry", () => {
+    expect(Object.keys(localeConfigurations)).toEqual([...supportedLanguages]);
+  });
+});
diff --git a/packages/translation/src/languages.ts b/packages/translation/src/languages.ts
new file mode 100644
index 000000000..bffc197c9
--- /dev/null
+++ b/packages/translation/src/languages.ts
@@ -0,0 +1,46 @@
+/**
+ * Keep the locale list dependency-free. This module is used by Next's proxy,
+ * where importing the full translation barrel would widen every route graph.
+ */
+export const supportedLanguages = [
+  "ca",
+  "cn",
+  "cr",
+  "cs",
+  "da",
+  "de",
+  "de-CH",
+  "en-gb",
+  "en",
+  "el",
+  "es",
+  "et",
+  "fi",
+  "fr",
+  "he",
+  "hr",
+  "hu",
+  "it",
+  "ja",
+  "ko",
+  "lt",
+  "lv",
+  "nl",
+  "no",
+  "pl",
+  "pt",
+  "pt-br",
+  "ro",
+  "ru",
+  "sk",
+  "sl",
+  "sv",
+  "tr",
+  "zh",
+  "uk",
+  "vi",
+] as const;
+
+export type SupportedLanguage = (typeof supportedLanguages)[number];
+
+export const fallbackLocale = "en" satisfies SupportedLanguage;
diff --git a/packages/translation/src/middleware.ts b/packages/translation/src/middleware.ts
index 4c41325ee..14f587959 100644
--- a/packages/translation/src/middleware.ts
+++ b/packages/translation/src/middleware.ts
@@ -1,7 +1,7 @@
 import createMiddleware from "next-intl/middleware";
 
 import type { SupportedLanguage } from ".";
-import { supportedLanguages } from "./config";
+import { supportedLanguages } from "./languages";
 import { createRouting } from "./routing";
 
 export const createI18nMiddleware = (defaultLocale: SupportedLanguage) =>
diff --git a/packages/translation/src/routing.ts b/packages/translation/src/routing.ts
index e6f268690..b579ae131 100644
--- a/packages/translation/src/routing.ts
+++ b/packages/translation/src/routing.ts
@@ -1,9 +1,9 @@
 import { defineRouting } from "next-intl/routing";
 
-import { localeCookieKey } from "@homarr/definitions";
+import { localeCookieKey } from "@homarr/definitions/cookie";
 
-import type { SupportedLanguage } from "./config";
-import { supportedLanguages } from "./config";
+import type { SupportedLanguage } from "./languages";
+import { supportedLanguages } from "./languages";
 
 export const createRouting = (defaultLocale: SupportedLanguage) =>
   defineRouting({
diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
index 07a86f6a3..2a3d7b0eb 100644
--- a/packages/ui/src/styles.css
+++ b/packages/ui/src/styles.css
@@ -3,3 +3,11 @@
 @import "@mantine/dates/styles.css";
 @import "@gfazioli/mantine-onboarding-tour/styles.css";
 @import "mantine-react-table/styles.css";
+
+:root {
+  --homarr-z-index-widget-background-tooltip: calc(var(--mantine-z-index-modal) - 4);
+  --homarr-z-index-widget-preview-backdrop: calc(var(--mantine-z-index-modal) - 3);
+  --homarr-z-index-board-header: calc(var(--mantine-z-index-modal) - 2);
+  --homarr-z-index-widget-focus: calc(var(--mantine-z-index-modal) - 1);
+  --homarr-z-index-modal-tooltip: calc(var(--mantine-z-index-modal) + 2);
+}
diff --git a/packages/validation/package.json b/packages/validation/package.json
index e96c6c3c0..b22ef3284 100644
--- a/packages/validation/package.json
+++ b/packages/validation/package.json
@@ -23,6 +23,8 @@
   "dependencies": {
     "@homarr/definitions": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
+    "acorn": "catalog:",
+    "acorn-jsx": "catalog:",
     "zod": "catalog:",
     "zod-form-data": "catalog:"
   },
diff --git a/packages/validation/src/board-layout.spec.ts b/packages/validation/src/board-layout.spec.ts
new file mode 100644
index 000000000..3ac54b16b
--- /dev/null
+++ b/packages/validation/src/board-layout.spec.ts
@@ -0,0 +1,42 @@
+import { describe, expect, test } from "vitest";
+
+import { boardLayoutSchema } from "./board";
+
+describe("board layout gutters", () => {
+  test("defaults both gutters to disabled", () => {
+    expect(
+      boardLayoutSchema.parse({
+        id: "layout",
+        name: "Base",
+        columnCount: 12,
+        breakpoint: 0,
+      }),
+    ).toMatchObject({
+      leftGutterColumnCount: 0,
+      rightGutterColumnCount: 0,
+    });
+  });
+
+  test("allows up to three columns per gutter while preserving a main column", () => {
+    expect(
+      boardLayoutSchema.safeParse({
+        id: "layout",
+        name: "Base",
+        columnCount: 6,
+        leftGutterColumnCount: 3,
+        rightGutterColumnCount: 2,
+        breakpoint: 0,
+      }).success,
+    ).toBe(true);
+    expect(
+      boardLayoutSchema.safeParse({
+        id: "layout",
+        name: "Base",
+        columnCount: 6,
+        leftGutterColumnCount: 3,
+        rightGutterColumnCount: 3,
+        breakpoint: 0,
+      }).success,
+    ).toBe(false);
+  });
+});
diff --git a/packages/validation/src/board.spec.ts b/packages/validation/src/board.spec.ts
new file mode 100644
index 000000000..33febbccf
--- /dev/null
+++ b/packages/validation/src/board.spec.ts
@@ -0,0 +1,109 @@
+import { describe, expect, test } from "vitest";
+
+import { responsiveBoardLayoutsSchema } from "./board";
+import { containerSectionOptionsDefaults, sectionSchema } from "./shared";
+
+const mobile = {
+  id: "mobile",
+  name: "Mobile",
+  columnCount: 3,
+  breakpoint: 0,
+  role: "mobile" as const,
+};
+const base = {
+  id: "base",
+  name: "Base",
+  columnCount: 12,
+  breakpoint: 768,
+  role: "base" as const,
+};
+
+describe("responsiveBoardLayoutsSchema", () => {
+  test("accepts protected layouts and custom layouts strictly between them", () => {
+    expect(
+      responsiveBoardLayoutsSchema.safeParse([
+        mobile,
+        { id: "tablet", name: "Tablet", columnCount: 6, breakpoint: 480, role: "custom" },
+        base,
+      ]).success,
+    ).toBe(true);
+  });
+
+  test.each([
+    { name: "missing Mobile", layouts: [{ ...mobile, role: "custom" }, base] },
+    { name: "removable Base replacement", layouts: [mobile, { ...base, role: "custom" }] },
+    { name: "non-zero Mobile breakpoint", layouts: [{ ...mobile, breakpoint: 320 }, base] },
+    {
+      name: "custom layout at Base breakpoint",
+      layouts: [mobile, { id: "tablet", name: "Tablet", columnCount: 6, breakpoint: 768, role: "custom" }, base],
+    },
+    {
+      name: "duplicate layout ID",
+      layouts: [mobile, { ...base, id: mobile.id }],
+    },
+  ])("rejects $name", ({ layouts }) => {
+    expect(responsiveBoardLayoutsSchema.safeParse(layouts).success).toBe(false);
+  });
+});
+
+describe("section behavior validation", () => {
+  test("normalizes a container to the current behavior defaults", () => {
+    const result = sectionSchema.parse({
+      id: "container",
+      kind: "container",
+      layouts: [],
+    });
+
+    expect(result).toMatchObject({
+      collapsed: false,
+      options: containerSectionOptionsDefaults,
+    });
+  });
+
+  test("preserves configured container behavior", () => {
+    const result = sectionSchema.parse({
+      id: "container",
+      kind: "container",
+      options: {
+        title: "Operations",
+        customCssClasses: ["dense"],
+        borderColor: "#123456",
+        showLabel: false,
+        collapsible: true,
+        showOpenAll: true,
+      },
+      layouts: [],
+    });
+
+    expect(result).toMatchObject({
+      collapsed: false,
+      options: {
+        title: "Operations",
+        customCssClasses: ["dense"],
+        borderColor: "#123456",
+        showLabel: false,
+        collapsible: true,
+        showOpenAll: true,
+      },
+    });
+  });
+
+  test.each(["category", "dynamic"])("rejects the legacy %s kind", (kind) => {
+    expect(() => sectionSchema.parse({ id: "legacy", kind, layouts: [] })).toThrow();
+  });
+
+  test.each([
+    { xOffset: 0.5, yOffset: 0, width: 1, height: 1 },
+    { xOffset: -1, yOffset: 0, width: 1, height: 1 },
+    { xOffset: 0, yOffset: 0, width: 0, height: 1 },
+    { xOffset: 0, yOffset: 0, width: 1, height: 0 },
+  ])("rejects invalid container grid geometry: %o", (layout) => {
+    expect(() =>
+      sectionSchema.parse({
+        id: "container",
+        kind: "container",
+        layouts: [{ layoutId: "layout", parentSectionId: "root", ...layout }],
+      }),
+    ).toThrow();
+  });
+});
diff --git a/packages/validation/src/board.ts b/packages/validation/src/board.ts
index 2ed7a3c85..c9668a420 100644
--- a/packages/validation/src/board.ts
+++ b/packages/validation/src/board.ts
@@ -5,6 +5,7 @@ import {
   backgroundImageRepeats,
   backgroundImageSizes,
   boardPermissions,
+  layoutRoles,
   widgetKinds,
 } from "@homarr/definitions";
 
@@ -25,6 +26,7 @@ export const boardNameSchema = z
   .max(255)
   .regex(/^[A-Za-z0-9-_]*$/);
 export const boardColumnCountSchema = z.number().min(1).max(24);
+export const boardGutterColumnCountSchema = z.number().int().min(0).max(3);
 
 export const boardByNameSchema = z.object({
   name: boardNameSchema,
@@ -75,16 +77,59 @@ export const boardSettingsSchema = boardSavePartialSettingsSchema.required().ext
   name: z.string(),
 });
 
+export const boardLayoutSchema = z
+  .object({
+    id: z.string(),
+    name: z.string().trim().nonempty().max(32),
+    columnCount: boardColumnCountSchema,
+    leftGutterColumnCount: boardGutterColumnCountSchema.default(0),
+    rightGutterColumnCount: boardGutterColumnCountSchema.default(0),
+    breakpoint: z.number().int().min(0).max(32767),
+    role: z.enum(layoutRoles.values),
+  })
+  .refine((layout) => layout.leftGutterColumnCount + layout.rightGutterColumnCount < layout.columnCount, {
+    message: "Gutters must leave at least one dashboard column",
+    path: ["columnCount"],
+  });
+
+export const responsiveBoardLayoutsSchema = z
+  .array(boardLayoutSchema)
+  .min(2)
+  .superRefine((layouts, ctx) => {
+    const mobileLayouts = layouts.filter((layout) => layout.role === "mobile");
+    const baseLayouts = layouts.filter((layout) => layout.role === "base");
+    const mobileLayout = mobileLayouts.at(0);
+    const baseLayout = baseLayouts.at(0);
+    if (mobileLayouts.length !== 1 || baseLayouts.length !== 1 || !mobileLayout || !baseLayout) {
+      ctx.addIssue({ code: "custom", message: "Boards require exactly one Mobile and one Base layout" });
+      return;
+    }
+
+    if (mobileLayout.breakpoint !== 0) {
+      ctx.addIssue({ code: "custom", message: "The Mobile layout breakpoint must be 0" });
+    }
+
+    if (layouts.some((layout) => layout.id !== baseLayout.id && layout.breakpoint >= baseLayout.breakpoint)) {
+      ctx.addIssue({ code: "custom", message: "The Base layout must have the highest breakpoint" });
+    }
+
+    if (new Set(layouts.map((layout) => layout.breakpoint)).size !== layouts.length) {
+      ctx.addIssue({ code: "custom", message: "Layout breakpoints must be unique" });
+    }
+
+    if (new Set(layouts.map((layout) => layout.id)).size !== layouts.length) {
+      ctx.addIssue({ code: "custom", message: "Layout IDs must be unique" });
+    }
+  });
+
 export const boardSaveLayoutsSchema = z.object({
   id: z.string(),
-  layouts: z.array(
-    z.object({
-      id: z.string(),
-      name: z.string().trim().nonempty().max(32),
-      columnCount: boardColumnCountSchema,
-      breakpoint: z.number().min(0).max(32767),
-    }),
-  ),
+  layouts: responsiveBoardLayoutsSchema,
+});
+
+export const boardResetLayoutSchema = z.object({
+  boardId: z.string(),
+  layoutId: z.string(),
 });
 
 export const boardSaveSchema = z.object({
diff --git a/packages/validation/src/custom-widget.ts b/packages/validation/src/custom-widget.ts
deleted file mode 100644
index a9298c20d..000000000
--- a/packages/validation/src/custom-widget.ts
+++ /dev/null
@@ -1,471 +0,0 @@
-import { z } from "zod/v4";
-
-export const customWidgetAuthTypes = ["none", "bearer", "basic", "apiKeyHeader", "apiKeyQuery"] as const;
-export type CustomWidgetAuthType = (typeof customWidgetAuthTypes)[number];
-
-export const customWidgetDisplayTypes = [
-  "singleValue",
-  "keyValue",
-  "table",
-  "statGrid",
-  "progressBars",
-  "statusIndicator",
-  "countGrid",
-  "raw",
-  "actionButton",
-  "customJsx",
-] as const;
-export type CustomWidgetDisplayType = (typeof customWidgetDisplayTypes)[number];
-
-export const customWidgetMethods = ["GET", "POST", "PUT", "DELETE", "PATCH"] as const;
-export type CustomWidgetMethod = (typeof customWidgetMethods)[number];
-
-export const customWidgetSecretKinds = ["apiKey", "username", "password"] as const;
-export type CustomWidgetSecretKind = (typeof customWidgetSecretKinds)[number];
-
-const singleValueDisplayConfigSchema = z.object({
-  type: z
-    .literal("singleValue")
-    .describe("Display type discriminator — must be 'singleValue' when displayType is singleValue"),
-  jsonPath: z
-    .string()
-    .min(1)
-    .describe(
-      "JSONPath expression to extract the value from the API response (e.g. $.data.count, $.items[0].name, $.status). Use $ for the root object.",
-    ),
-  label: z
-    .string()
-    .describe("Human-readable label shown alongside the extracted value (e.g. 'CPU Temperature', 'Total Users')"),
-  unit: z
-    .string()
-    .describe("Unit suffix displayed after the value (e.g. '°C', '%', 'GB'). Leave empty string if no unit is needed."),
-  valueSize: z
-    .enum(["sm", "md", "lg", "xl"])
-    .optional()
-    .describe(
-      "Font size of the displayed value: 'sm' (small), 'md' (medium), 'lg' (large, default), 'xl' (extra large)",
-    ),
-  labelPosition: z
-    .enum(["above", "below"])
-    .optional()
-    .describe("Position of the label relative to the value: 'above' or 'below' (default: below)"),
-});
-
-const keyValueMappingSchema = z.object({
-  label: z.string().min(1).describe("Label for this key-value pair (e.g. 'CPU', 'Memory', 'Uptime')"),
-  jsonPath: z
-    .string()
-    .min(1)
-    .describe(
-      "JSONPath expression to extract this value from the API response (e.g. $.cpu.percent, $.memory.used). Use $ for the root object.",
-    ),
-  unit: z
-    .string()
-    .describe("Unit suffix for this value (e.g. '%', 'GB', 'ms'). Leave empty string if no unit is needed."),
-});
-
-const keyValueDisplayConfigSchema = z.object({
-  type: z.literal("keyValue").describe("Display type discriminator — must be 'keyValue' when displayType is keyValue"),
-  mappings: z
-    .array(keyValueMappingSchema)
-    .min(1)
-    .describe("Array of label/jsonPath/unit mappings — each entry becomes one labeled value in the widget"),
-  layout: z
-    .enum(["list", "grid"])
-    .optional()
-    .describe("Layout style: 'list' (vertical stack, default) or 'grid' (multi-column grid)"),
-  columns: z
-    .number()
-    .int()
-    .min(1)
-    .max(3)
-    .optional()
-    .describe("Number of columns when layout is 'grid' (1–3, default: 2)"),
-});
-
-const tableColumnSchema = z.object({
-  header: z.string().min(1).describe("Column header text shown in the table (e.g. 'Name', 'Status', 'Size')"),
-  jsonPath: z
-    .string()
-    .min(1)
-    .describe(
-      "JSONPath expression relative to each row object to extract the cell value (e.g. $.name, $.status, $.size). Do not include the array path here — that goes in tablePath.",
-    ),
-});
-
-const tableDisplayConfigSchema = z.object({
-  type: z.literal("table").describe("Display type discriminator — must be 'table' when displayType is table"),
-  tablePath: z
-    .string()
-    .min(1)
-    .describe(
-      "JSONPath expression to the array of row objects in the API response (e.g. $.data.items, $.results, $.users[*])",
-    ),
-  columns: z
-    .array(tableColumnSchema)
-    .min(1)
-    .describe("Column definitions — each column has a header and a jsonPath relative to each row"),
-  striped: z
-    .boolean()
-    .optional()
-    .describe("Whether to alternate row background colors for readability (default: true)"),
-  compact: z.boolean().optional().describe("Whether to use compact row spacing (default: false)"),
-});
-
-const statGridItemSchema = z.object({
-  label: z.string().min(1).describe("Label for this stat card (e.g. 'Movies', 'Series', 'Episodes')"),
-  jsonPath: z
-    .string()
-    .min(1)
-    .describe(
-      "JSONPath expression to extract the stat value from the API response (e.g. $.library.movies, $.counts.series)",
-    ),
-  unit: z.string().describe("Unit suffix for the stat (e.g. '', 'GB', '%'). Leave empty string if no unit is needed."),
-  color: z
-    .string()
-    .optional()
-    .describe("Mantine color name for the stat card (e.g. 'blue', 'green', 'red', 'orange', 'violet'). Default: blue"),
-});
-
-const statGridDisplayConfigSchema = z.object({
-  type: z.literal("statGrid").describe("Display type discriminator — must be 'statGrid' when displayType is statGrid"),
-  items: z
-    .array(statGridItemSchema)
-    .min(1)
-    .describe("Array of stat cards — each item shows a labeled value in a colored card"),
-  columns: z.number().int().min(1).max(4).optional().describe("Number of columns in the stat grid (1–4, default: 2)"),
-  cardStyle: z
-    .enum(["filled", "outline", "subtle"])
-    .optional()
-    .describe(
-      "Visual style of stat cards: 'filled' (solid background, default), 'outline' (border only), 'subtle' (light tint)",
-    ),
-});
-
-const progressBarItemSchema = z.object({
-  label: z.string().min(1).describe("Label for this progress bar (e.g. 'Disk Usage', 'Memory', 'Quota')"),
-  valuePath: z
-    .string()
-    .min(1)
-    .describe(
-      "JSONPath expression to extract the current value (numerator) from the API response (e.g. $.disk.used, $.memory.used_bytes)",
-    ),
-  maxPath: z
-    .string()
-    .optional()
-    .describe(
-      "JSONPath expression to extract the maximum value (denominator). If omitted, defaults to 100. Use for ratios like used/total (e.g. $.disk.total)",
-    ),
-  unit: z
-    .string()
-    .describe("Unit suffix shown alongside values (e.g. 'GB', 'MB', '%'). Leave empty string if no unit is needed."),
-  color: z
-    .string()
-    .optional()
-    .describe("Mantine color name for the progress bar fill (e.g. 'blue', 'green', 'red'). Default: blue"),
-});
-
-const progressBarsDisplayConfigSchema = z.object({
-  type: z
-    .literal("progressBars")
-    .describe("Display type discriminator — must be 'progressBars' when displayType is progressBars"),
-  bars: z
-    .array(progressBarItemSchema)
-    .min(1)
-    .describe("Array of progress bar definitions — each bar shows value/max as a visual progress indicator"),
-  showPercentage: z.boolean().optional().describe("Whether to display the percentage next to each bar (default: true)"),
-  barSize: z
-    .enum(["sm", "md", "lg"])
-    .optional()
-    .describe("Height of progress bars: 'sm' (small), 'md' (medium, default), 'lg' (large)"),
-});
-
-const statusIndicatorItemSchema = z.object({
-  label: z.string().min(1).describe("Label for this status indicator (e.g. 'Web Server', 'Database', 'API')"),
-  jsonPath: z
-    .string()
-    .min(1)
-    .describe(
-      "JSONPath expression to extract the status value from the API response (e.g. $.services.web.status, $.health.database)",
-    ),
-  goodValues: z
-    .array(z.string())
-    .min(1)
-    .describe(
-      "Array of string values considered 'healthy/good' — case-insensitive match (e.g. ['online', 'up', 'true', 'healthy', 'ok'])",
-    ),
-});
-
-const statusIndicatorDisplayConfigSchema = z.object({
-  type: z
-    .literal("statusIndicator")
-    .describe("Display type discriminator — must be 'statusIndicator' when displayType is statusIndicator"),
-  items: z
-    .array(statusIndicatorItemSchema)
-    .min(1)
-    .describe("Array of status indicators — each shows a green dot if the value matches goodValues, red otherwise"),
-  layout: z
-    .enum(["list", "grid"])
-    .optional()
-    .describe("Layout style: 'list' (vertical, default) or 'grid' (multi-column)"),
-  dotSize: z
-    .enum(["sm", "md", "lg"])
-    .optional()
-    .describe("Size of status dots: 'sm' (small), 'md' (medium, default), 'lg' (large)"),
-});
-
-const countGridItemSchema = z.object({
-  label: z.string().min(1).describe("Label for this count (e.g. 'Movies', 'Shows', 'Albums')"),
-  jsonPath: z
-    .string()
-    .min(1)
-    .describe(
-      "JSONPath expression to extract the count value from the API response (e.g. $.counts.movies, $.stats.total)",
-    ),
-  unit: z.string().describe("Unit suffix for the count (e.g. '', 'items'). Leave empty string if no unit is needed."),
-});
-
-const countGridDisplayConfigSchema = z.object({
-  type: z
-    .literal("countGrid")
-    .describe("Display type discriminator — must be 'countGrid' when displayType is countGrid"),
-  items: z
-    .array(countGridItemSchema)
-    .min(1)
-    .describe("Array of count items — each shows a number with a label in a simple grid (no colors)"),
-  columns: z.number().int().min(2).max(4).optional().describe("Number of columns in the count grid (2–4, default: 2)"),
-  valueSize: z
-    .enum(["sm", "md", "lg"])
-    .optional()
-    .describe("Font size of count values: 'sm' (small), 'md' (medium, default), 'lg' (large)"),
-});
-
-const rawDisplayConfigSchema = z.object({
-  type: z.literal("raw").describe("Display type discriminator — must be 'raw' when displayType is raw"),
-  jsonPath: z
-    .string()
-    .min(1)
-    .describe(
-      "JSONPath expression to extract the data to display (e.g. $ for entire response, $.data, $.result). The extracted value is pretty-printed as JSON.",
-    ),
-  maxHeight: z
-    .number()
-    .int()
-    .min(50)
-    .max(1000)
-    .optional()
-    .describe("Maximum height of the raw JSON display area in pixels (50–1000, default: 300)"),
-});
-
-const FORBIDDEN_TEMPLATE_PATTERN =
-  /\bconstructor\b|\b__proto__\b|\bprototype\b|\beval\b|\bFunction\b|\bimport\s*\(|\brequire\b|\bglobalThis\b|\bwindow\b|\bdocument\b|\bfetch\b|\bXMLHttpRequest\b/i;
-
-const customJsxDisplayConfigSchema = z.object({
-  type: z
-    .literal("customJsx")
-    .describe("Display type discriminator — must be 'customJsx' when displayType is customJsx"),
-  template: z
-    .string()
-    .min(1)
-    .max(10000)
-    .refine((t) => !FORBIDDEN_TEMPLATE_PATTERN.test(t), {
-      message:
-        "Template contains forbidden keywords (constructor, __proto__, eval, Function, import, require, globalThis, window, document, fetch)",
-    })
-    .describe(
-      "JSX template string using whitelisted Mantine components. Access API data via {data.fieldName}. Forbidden keywords: constructor, __proto__, eval, Function, import, require, globalThis, window, document, fetch",
-    ),
-});
-
-const actionButtonDisplayConfigSchema = z.object({
-  type: z
-    .literal("actionButton")
-    .describe("Display type discriminator — must be 'actionButton' when displayType is actionButton"),
-  buttonLabel: z
-    .string()
-    .min(1)
-    .describe("Text shown on the action button (e.g. 'Restart Service', 'Clear Cache', 'Run Backup')"),
-  buttonColor: z
-    .string()
-    .optional()
-    .describe("Mantine color name for the button (e.g. 'blue', 'red', 'green'). Default: blue"),
-  confirmText: z
-    .string()
-    .optional()
-    .describe(
-      "If set, shows a confirmation dialog with this message before executing the API request. Omit for immediate execution.",
-    ),
-  successMessage: z
-    .string()
-    .optional()
-    .describe("Notification message shown after successful API execution. Omit for a generic success message."),
-});
-
-export const displayConfigSchema = z
-  .discriminatedUnion("type", [
-    singleValueDisplayConfigSchema,
-    keyValueDisplayConfigSchema,
-    tableDisplayConfigSchema,
-    statGridDisplayConfigSchema,
-    progressBarsDisplayConfigSchema,
-    statusIndicatorDisplayConfigSchema,
-    countGridDisplayConfigSchema,
-    rawDisplayConfigSchema,
-    actionButtonDisplayConfigSchema,
-    customJsxDisplayConfigSchema,
-  ])
-  .describe(
-    "Configuration for how API response data is displayed. The 'type' field MUST match the top-level 'displayType' field exactly. Choose the variant that matches your displayType.",
-  );
-
-export type DisplayConfig = z.infer<typeof displayConfigSchema>;
-
-const displayTypesMatch = (displayType?: string, configType?: string): boolean => {
-  if (!displayType) return true;
-  if (!configType) return true;
-  return displayType === configType;
-};
-
-const displayTypeMatchRefinement = (d: { displayType: string; displayConfig: { type: string } }) =>
-  displayTypesMatch(d.displayType, d.displayConfig.type);
-const displayTypeMatchMessage = {
-  message: "displayType must match displayConfig.type",
-  path: ["displayConfig", "type"],
-};
-
-const baseDefinitionSchema = z.object({
-  name: z
-    .string()
-    .min(1)
-    .max(128)
-    .describe("Human-readable name for the widget, displayed in the dashboard and management UI"),
-  description: z
-    .string()
-    .max(512)
-    .optional()
-    .describe("Optional longer description of what this widget shows, shown in tooltips and management UI"),
-  iconUrl: z
-    .string()
-    .url()
-    .optional()
-    .describe(
-      "Optional URL to an icon image for the widget (e.g. https://example.com/icon.png). Shown in widget picker.",
-    ),
-  url: z
-    .string()
-    .min(1)
-    .describe(
-      "Full URL to the API endpoint to fetch data from (e.g. https://myapp.local/api/stats). Must include protocol.",
-    ),
-  authType: z
-    .enum(customWidgetAuthTypes)
-    .describe(
-      "Authentication method: 'none' for public APIs, 'bearer' for Bearer token, 'basic' for Basic auth, 'apiKeyHeader' for API key sent as a custom header, 'apiKeyQuery' for API key as query parameter. Secrets are configured separately in the UI.",
-    ),
-  headerName: z
-    .string()
-    .max(256)
-    .optional()
-    .describe(
-      "Custom header or query parameter name for API key auth. For apiKeyHeader: the HTTP header name (default: X-API-Key). For apiKeyQuery: the query param name (default: api_key). Ignored for other auth types.",
-    ),
-  method: z
-    .enum(customWidgetMethods)
-    .describe(
-      "HTTP method for the API request: 'GET' (fetch data, most common), 'POST'/'PUT'/'PATCH' (with optional requestBody), 'DELETE' (destructive actions)",
-    ),
-  requestBody: z
-    .string()
-    .optional()
-    .describe(
-      'JSON string body sent with POST/PUT/PATCH requests. Must be valid JSON as a string (e.g. \'{"action":"restart"}\'). Omit for GET requests.',
-    ),
-  displayType: z
-    .enum(customWidgetDisplayTypes)
-    .describe(
-      "How to render the API response: 'singleValue' (one big number/text), 'keyValue' (labeled pairs), 'table' (rows/columns), 'statGrid' (colored stat cards), 'progressBars' (usage bars), 'statusIndicator' (health dots), 'countGrid' (simple counts), 'raw' (JSON debug view), 'actionButton' (clickable action), 'customJsx' (custom JSX template with Mantine components)",
-    ),
-  displayConfig: displayConfigSchema,
-});
-
-const secretsInputSchema = z.array(
-  z.object({
-    kind: z
-      .enum(customWidgetSecretKinds)
-      .describe(
-        "Secret type: 'apiKey' (token/key for bearer/apiKey auth), 'username' (for basic auth), 'password' (for basic auth)",
-      ),
-    value: z
-      .string()
-      .min(1)
-      .describe("The secret value. Never include in exported JSON — configure in the UI after import."),
-  }),
-);
-
-export const customWidgetCreateSchema = baseDefinitionSchema
-  .extend({ secrets: secretsInputSchema })
-  .refine(displayTypeMatchRefinement, displayTypeMatchMessage);
-
-export const customWidgetUpdateSchema = baseDefinitionSchema
-  .partial()
-  .extend({ id: z.string(), secrets: secretsInputSchema.optional() })
-  .refine((d) => displayTypesMatch(d.displayType, d.displayConfig?.type), displayTypeMatchMessage);
-
-const customWidgetImportFieldsSchema = z.object({
-  name: z
-    .string()
-    .min(1)
-    .max(128)
-    .describe("Human-readable name for the widget, displayed in the dashboard and management UI"),
-  description: z
-    .string()
-    .max(512)
-    .nullish()
-    .describe("Optional longer description of what this widget shows. Use null or omit if not needed."),
-  iconUrl: z
-    .string()
-    .url()
-    .nullish()
-    .describe("Optional URL to an icon image for the widget. Use null or omit if not needed."),
-  authType: z
-    .enum(customWidgetAuthTypes)
-    .describe(
-      "Authentication method: 'none' for public APIs, 'bearer' for Bearer token, 'basic' for Basic auth, 'apiKeyHeader' for API key sent as a custom header, 'apiKeyQuery' for API key as query parameter",
-    ),
-  headerName: z
-    .string()
-    .max(256)
-    .nullish()
-    .describe(
-      "Custom header or query parameter name for API key auth. For apiKeyHeader: HTTP header name (default: X-API-Key). For apiKeyQuery: query param name (default: api_key).",
-    ),
-  method: z
-    .enum(customWidgetMethods)
-    .describe(
-      "HTTP method: 'GET' (fetch data), 'POST'/'PUT'/'PATCH' (with requestBody), 'DELETE' (destructive). Use GET unless the API requires otherwise.",
-    ),
-  requestBody: z.string().nullish().describe("JSON string body for POST/PUT/PATCH. Use null or omit for GET requests."),
-  displayType: z
-    .enum(customWidgetDisplayTypes)
-    .describe(
-      "How to render the API response: 'singleValue', 'keyValue', 'table', 'statGrid', 'progressBars', 'statusIndicator', 'countGrid', 'raw', 'actionButton', or 'customJsx'",
-    ),
-  displayConfig: displayConfigSchema,
-});
-
-export const customWidgetImportSchema = customWidgetImportFieldsSchema
-  .extend({
-    $schema: z
-      .literal("homarr-custom-widget-v2")
-      .optional()
-      .describe("Schema version identifier. Should be 'homarr-custom-widget-v2' for current format."),
-    url: z
-      .string()
-      .min(1)
-      .describe(
-        "Full URL to the API endpoint to fetch data from (e.g. https://myapp.local/api/stats). Must include protocol.",
-      ),
-  })
-  .refine(displayTypeMatchRefinement, displayTypeMatchMessage);
-
-export type CustomWidgetImport = z.infer<typeof customWidgetImportSchema>;
diff --git a/packages/validation/src/shared.ts b/packages/validation/src/shared.ts
index 620a0f2f4..cd7ec8ac3 100644
--- a/packages/validation/src/shared.ts
+++ b/packages/validation/src/shared.ts
@@ -21,15 +21,18 @@ export const itemAdvancedOptionsSchema = z.object({
 
 export type BoardItemAdvancedOptions = z.infer<typeof itemAdvancedOptionsSchema>;
 
+const gridOffsetSchema = z.number().int().min(0).max(32767);
+const gridSizeSchema = z.number().int().min(1).max(32767);
+
 export const sharedItemSchema = z.object({
   id: z.string(),
   layouts: z.array(
     z.object({
       layoutId: z.string(),
-      yOffset: z.number(),
-      xOffset: z.number(),
-      width: z.number(),
-      height: z.number(),
+      yOffset: gridOffsetSchema,
+      xOffset: gridOffsetSchema,
+      width: gridSizeSchema,
+      height: gridSizeSchema,
       sectionId: z.string(),
     }),
   ),
@@ -44,42 +47,50 @@ export const commonItemSchema = z
   })
   .and(sharedItemSchema);
 
-const categorySectionSchema = z.object({
-  id: z.string(),
-  name: z.string(),
-  kind: z.literal("category"),
-  yOffset: z.number(),
-  xOffset: z.number(),
-  collapsed: z.boolean(),
-});
-
 const emptySectionSchema = z.object({
   id: z.string(),
   kind: z.literal("empty"),
-  yOffset: z.number(),
-  xOffset: z.number(),
+  yOffset: z.number().int(),
+  xOffset: z.number().int(),
 });
 
-export const dynamicSectionOptionsSchema = z.object({
-  title: z.string().max(20).default(""),
-  customCssClasses: z.array(z.string()).default([]),
-  borderColor: z.string().default(""),
-});
+export const containerSectionOptionsDefaults = {
+  title: "",
+  customCssClasses: [] as string[],
+  borderColor: "",
+  showLabel: true,
+  collapsible: false,
+  showOpenAll: false,
+} as const;
 
-const dynamicSectionSchema = z.object({
+export const containerSectionOptionsSchema = z
+  .object({
+    title: z.string().max(64).default(containerSectionOptionsDefaults.title),
+    customCssClasses: z.array(z.string()).default([]),
+    borderColor: z.string().default(containerSectionOptionsDefaults.borderColor),
+    showLabel: z.boolean().default(containerSectionOptionsDefaults.showLabel),
+    collapsible: z.boolean().default(containerSectionOptionsDefaults.collapsible),
+    showOpenAll: z.boolean().default(containerSectionOptionsDefaults.showOpenAll),
+  })
+  .default(containerSectionOptionsDefaults);
+
+export type ContainerSectionOptions = z.infer<typeof containerSectionOptionsSchema>;
+
+const containerSectionSchema = z.object({
   id: z.string(),
-  kind: z.literal("dynamic"),
-  options: dynamicSectionOptionsSchema,
+  kind: z.literal("container"),
+  options: containerSectionOptionsSchema,
+  collapsed: z.boolean().default(false),
   layouts: z.array(
     z.object({
       layoutId: z.string(),
-      yOffset: z.number(),
-      xOffset: z.number(),
-      width: z.number(),
-      height: z.number(),
+      yOffset: gridOffsetSchema,
+      xOffset: gridOffsetSchema,
+      width: gridSizeSchema,
+      height: gridSizeSchema,
       parentSectionId: z.string(),
     }),
   ),
 });
 
-export const sectionSchema = z.union([categorySectionSchema, emptySectionSchema, dynamicSectionSchema]);
+export const sectionSchema = z.union([emptySectionSchema, containerSectionSchema]);
diff --git a/packages/widgets/package.json b/packages/widgets/package.json
index 2f835dafd..d5d9740f2 100644
--- a/packages/widgets/package.json
+++ b/packages/widgets/package.json
@@ -15,12 +15,18 @@
     ".": "./index.ts",
     "./_inputs/json-path-tree-picker": "./src/_inputs/json-path-tree-picker.tsx",
     "./custom-api/component": "./src/custom-api/component.tsx",
+    "./custom-api/custom-jsx-display": "./src/custom-api/custom-jsx-display.tsx",
     "./custom-api/extract-display-data": "./src/custom-api/extract-display-data.ts",
+    "./catalog": "./src/catalog.ts",
+    "./definition": "./src/definition.ts",
     "./errors": "./src/errors/component.tsx",
+    "./manifest": "./src/manifest.ts",
+    "./options": "./src/options.ts",
     "./errors/classes": "./src/errors/index.ts",
     "./widget-integration-select": "./src/widget-integration-select.tsx",
     "./modals": "./src/modals/index.ts",
-    "./prefetch": "./src/prefetch.ts"
+    "./prefetch": "./src/prefetch.ts",
+    "./refetch-intervals": "./src/refetch-intervals.ts"
   },
   "scripts": {
     "clean": "rm -rf .turbo node_modules",
@@ -36,6 +42,7 @@
     "@homarr/boards": "workspace:^0.1.0",
     "@homarr/common": "workspace:^0.1.0",
     "@homarr/core": "workspace:^0.1.0",
+    "@homarr/custom-widgets": "workspace:^0.1.0",
     "@homarr/db": "workspace:^0.1.0",
     "@homarr/definitions": "workspace:^0.1.0",
     "@homarr/docker": "workspace:^0.1.0",
@@ -54,6 +61,7 @@
     "@homarr/validation": "workspace:^0.1.0",
     "@mantine/charts": "catalog:",
     "@mantine/core": "catalog:",
+    "@mantine/dates": "catalog:",
     "@mantine/form": "catalog:",
     "@mantine/hooks": "catalog:",
     "@tabler/icons-react": "catalog:",
@@ -73,16 +81,17 @@
     "@tiptap/extension-underline": "catalog:",
     "@tiptap/react": "catalog:",
     "@tiptap/starter-kit": "catalog:",
+    "@trpc/react-query": "catalog:",
+    "acorn": "catalog:",
+    "acorn-jsx": "catalog:",
     "clsx": "catalog:",
     "dayjs": "catalog:",
-    "jsonpath-plus": "catalog:",
     "lucide-react": "catalog:",
     "mantine-datatable": "catalog:",
     "mantine-react-table": "catalog:",
     "next": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
-    "react-jsx-parser": "catalog:",
     "react-markdown": "catalog:",
     "react-quill-new": "catalog:",
     "recharts": "catalog:",
diff --git a/packages/widgets/src/_inputs/common.tsx b/packages/widgets/src/_inputs/common.tsx
index 3d575bfb0..abeb7e350 100644
--- a/packages/widgets/src/_inputs/common.tsx
+++ b/packages/widgets/src/_inputs/common.tsx
@@ -9,6 +9,7 @@ export interface CommonWidgetInputProps<TKey extends WidgetOptionType> {
   options: Omit<WidgetOptionOfType<TKey>, "defaultValue" | "type">;
   initialOptions: Record<string, unknown>;
   itemId?: string;
+  boardId?: string;
 }
 
 type UseWidgetInputTranslationReturnType = (key: "label" | "description" | "placeholder") => string;
diff --git a/packages/widgets/src/_inputs/index.ts b/packages/widgets/src/_inputs/index.ts
index 2e6943ac0..d05510232 100644
--- a/packages/widgets/src/_inputs/index.ts
+++ b/packages/widgets/src/_inputs/index.ts
@@ -2,6 +2,7 @@ import type { WidgetOptionType } from "../options";
 import { WidgetAnchorNoteInput } from "./widget-anchor-note-input";
 import { WidgetAppInput } from "./widget-app-input";
 import { WidgetCustomWidgetSelectInput } from "./widget-custom-widget-select-input";
+import { WidgetCustomWidgetConfigurationInput } from "./widget-custom-widget-configuration-input";
 import { WidgetDynamicSelectInput } from "./widget-dynamic-select-input";
 import { WidgetLocationInput } from "./widget-location-input";
 import { WidgetMultiTextInput } from "./widget-multi-text-input";
@@ -18,8 +19,10 @@ import { WidgetUmamiEventNamesInput } from "./widget-umami-event-names-input";
 import { WidgetUmamiWebsiteInput } from "./widget-umami-website-input";
 import { WidgetIntegrationSelectInput } from "./widget-integration-select-input";
 import { WidgetIntegrationMultiSelectInput } from "./widget-integration-multi-select-input";
+import { WidgetInternalInput } from "./widget-internal-input";
 
 const mapping = {
+  internal: WidgetInternalInput,
   anchorNote: WidgetAnchorNoteInput,
   text: WidgetTextInput,
   location: WidgetLocationInput,
@@ -37,6 +40,7 @@ const mapping = {
   umamiEventNames: WidgetUmamiEventNamesInput,
   umamiWebsite: WidgetUmamiWebsiteInput,
   customWidgetSelect: WidgetCustomWidgetSelectInput,
+  customWidgetConfiguration: WidgetCustomWidgetConfigurationInput,
   integrationSelect: WidgetIntegrationSelectInput,
   integrationMultiSelect: WidgetIntegrationMultiSelectInput,
 } satisfies Record<WidgetOptionType, unknown>;
diff --git a/packages/widgets/src/_inputs/widget-custom-widget-configuration-input.spec.tsx b/packages/widgets/src/_inputs/widget-custom-widget-configuration-input.spec.tsx
new file mode 100644
index 000000000..6f3fa1dd3
--- /dev/null
+++ b/packages/widgets/src/_inputs/widget-custom-widget-configuration-input.spec.tsx
@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { JsonOption } from "./widget-custom-widget-configuration-input";
+
+vi.mock("@homarr/custom-widgets/workbench", () => ({
+  CustomWidgetCodeEditor: (props: {
+    id: string;
+    label: string;
+    value: string;
+    error?: string;
+    onChange(value: string): void;
+  }) => (
+    <textarea
+      id={props.id}
+      aria-label={props.label}
+      aria-invalid={Boolean(props.error)}
+      value={props.value}
+      onChange={(event) => props.onChange(event.currentTarget.value)}
+    />
+  ),
+}));
+
+let root: Root;
+let host: HTMLDivElement;
+
+beforeEach(() => {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+
+afterEach(async () => {
+  await act(() => root.unmount());
+  host.remove();
+});
+
+async function renderJsonOption(identity: string, value: unknown) {
+  await act(async () => {
+    root.render(
+      <JsonOption
+        identity={identity}
+        editorId="settings-json-option"
+        label="Settings"
+        value={value}
+        onChange={vi.fn()}
+      />,
+    );
+  });
+}
+
+function enterEditorValue(editor: HTMLTextAreaElement, value: string) {
+  const valueSetter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set;
+  valueSetter?.call(editor, value);
+  editor.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+describe("custom widget JSON option", () => {
+  it("preserves an invalid active draft until its definition or external value changes", async () => {
+    await renderJsonOption("definition-a:settings", { owner: "Alice" });
+    const editor = host.querySelector("textarea");
+    if (!editor) throw new Error("JSON editor was not rendered");
+    expect(editor?.value).toContain("Alice");
+
+    await act(async () => enterEditorValue(editor, '{"owner":'));
+    expect(editor?.value).toBe('{"owner":');
+
+    await renderJsonOption("definition-a:settings", { owner: "Alice" });
+    expect(editor?.value).toBe('{"owner":');
+
+    await renderJsonOption("definition-b:settings", { owner: "Bob" });
+    expect(editor?.value).toContain("Bob");
+    expect(editor?.value).not.toContain("Alice");
+  });
+
+  it("synchronizes a valid external configuration update", async () => {
+    await renderJsonOption("definition-a:settings", { page: 1 });
+    const editor = host.querySelector("textarea");
+    await renderJsonOption("definition-a:settings", { page: 2 });
+    expect(editor?.value).toContain('"page": 2');
+  });
+});
diff --git a/packages/widgets/src/_inputs/widget-custom-widget-configuration-input.tsx b/packages/widgets/src/_inputs/widget-custom-widget-configuration-input.tsx
new file mode 100644
index 000000000..052563fee
--- /dev/null
+++ b/packages/widgets/src/_inputs/widget-custom-widget-configuration-input.tsx
@@ -0,0 +1,348 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  Accordion,
+  Alert,
+  ColorInput,
+  MultiSelect,
+  NumberInput,
+  Select,
+  Slider,
+  Stack,
+  Switch,
+  Text,
+  Textarea,
+  TextInput,
+} from "@mantine/core";
+import { DateInput, TimeInput } from "@mantine/dates";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { useOptionalBoard } from "@homarr/boards/context";
+import type { CustomWidgetOption } from "@homarr/custom-widgets/core";
+import { validateCustomWidgetOptions } from "@homarr/custom-widgets/core";
+import { CustomWidgetCodeEditor } from "@homarr/custom-widgets/workbench";
+import type { CustomWidgetEditorMessages } from "@homarr/custom-widgets/workbench";
+import { IconPicker } from "@homarr/forms-collection";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import type { CommonWidgetInputProps } from "./common";
+import { useFormContext } from "./form";
+
+export const WidgetCustomWidgetConfigurationInput = ({
+  property,
+}: CommonWidgetInputProps<"customWidgetConfiguration">) => {
+  const form = useFormContext();
+  const labels = useScopedI18n("widget.customApi.configuration");
+  const board = useOptionalBoard();
+  const definitionId = typeof form.values.options.definitionId === "string" ? form.values.options.definitionId : "";
+  const configurationValue = form.values.options[property];
+  const configuration = useMemo(() => (isRecord(configurationValue) ? configurationValue : {}), [configurationValue]);
+  const available = clientApi.customWidget.available.useQuery(
+    { boardId: board?.id ?? "", currentId: definitionId || undefined },
+    { enabled: board !== null && Boolean(definitionId) },
+  );
+  const definition = available.data?.find((candidate) => candidate.id === definitionId);
+  const options = isRecord(definition?.options) ? (definition.options as Record<string, CustomWidgetOption>) : null;
+  const issues = useMemo(
+    () => (options ? validateCustomWidgetOptions(options, configuration) : []),
+    [configuration, options],
+  );
+
+  useEffect(() => {
+    const path = `options.${property}`;
+    if (issues[0]) form.setFieldError(path, `${issues[0].path}: ${issues[0].message}`);
+    else form.clearFieldError(path);
+  }, [form, issues, property]);
+
+  if (!definitionId || !options) return null;
+  const entries = Object.entries(options);
+  const regular = entries.filter(([, option]) => !option.advanced);
+  const advanced = entries.filter(([, option]) => option.advanced);
+  return (
+    <Stack gap="md">
+      {issues[0] && (
+        <Alert color="yellow" variant="light" icon={<IconAlertTriangle size={16} />}>
+          <Text size="sm">{labels("needsAttention", { message: issues[0].message })}</Text>
+        </Alert>
+      )}
+      {regular.map(([name, option]) => (
+        <OptionField
+          key={`${definitionId}:${name}`}
+          option={option}
+          path={`options.${property}.${name}`}
+          configuration={configuration}
+          definitionId={definitionId}
+        />
+      ))}
+      {advanced.length > 0 && (
+        <Accordion variant="contained">
+          <Accordion.Item value="advanced-options">
+            <Accordion.Control>{labels("advancedOptions")}</Accordion.Control>
+            <Accordion.Panel>
+              <Stack gap="sm">
+                {advanced.map(([name, option]) => (
+                  <OptionField
+                    key={`${definitionId}:${name}`}
+                    option={option}
+                    path={`options.${property}.${name}`}
+                    configuration={configuration}
+                    definitionId={definitionId}
+                  />
+                ))}
+              </Stack>
+            </Accordion.Panel>
+          </Accordion.Item>
+        </Accordion>
+      )}
+    </Stack>
+  );
+};
+
+function OptionField({
+  option,
+  path,
+  configuration,
+  definitionId,
+}: {
+  option: CustomWidgetOption;
+  path: string;
+  configuration: Record<string, unknown>;
+  definitionId: string;
+}) {
+  const form = useFormContext();
+  const input = form.getInputProps(path, { type: option.control === "switch" ? "checkbox" : "input" });
+  const common = { label: option.label, description: option.description };
+  if (option.choicesFrom)
+    return <DynamicOptionField option={option} path={path} configuration={configuration} definitionId={definitionId} />;
+  if (option.control === "switch") return <Switch {...common} {...input} />;
+  if (["number", "duration"].includes(option.control))
+    return <NumberInput {...common} min={option.min} max={option.max} step={option.step} {...input} />;
+  if (option.control === "slider")
+    return (
+      <Stack gap={4}>
+        <Text size="sm" fw={500}>
+          {option.label}
+        </Text>
+        {option.description && (
+          <Text size="xs" c="dimmed">
+            {option.description}
+          </Text>
+        )}
+        <Slider min={option.min ?? 0} max={option.max ?? 100} step={option.step ?? 1} {...input} />
+      </Stack>
+    );
+  const choices = option.choices?.map((choice) => ({ label: choice.label, value: String(choice.value) })) ?? [];
+  if (option.control === "select")
+    return (
+      <Select
+        {...common}
+        data={choices}
+        value={input.value == null ? null : String(input.value)}
+        onChange={(value) => form.setFieldValue(path, coerceChoice(value, option))}
+      />
+    );
+  if (option.control === "multiSelect")
+    return (
+      <MultiSelect
+        {...common}
+        data={choices}
+        value={Array.isArray(input.value) ? input.value.map(String) : []}
+        onChange={(value) =>
+          form.setFieldValue(
+            path,
+            value.map((entry) => coerceChoice(entry, option)),
+          )
+        }
+      />
+    );
+  if (option.control === "textarea") return <Textarea {...common} autosize minRows={3} {...input} />;
+  if (option.control === "color") return <ColorInput {...common} {...input} />;
+  if (option.control === "date") return <DateInput {...common} valueFormat="YYYY-MM-DD" {...input} />;
+  if (option.control === "time") return <TimeInput {...common} {...input} />;
+  if (option.control === "icon") return <IconPicker withAsterisk={false} {...input} />;
+  if (option.control === "timeZone")
+    return <Select {...common} searchable data={Intl.supportedValuesOf("timeZone")} {...input} />;
+  if (option.control === "json")
+    return (
+      <JsonOption
+        identity={`${definitionId}:${path}`}
+        editorId={`${definitionId}-${path}-json-option`}
+        label={option.label}
+        description={option.description}
+        value={input.value}
+        onChange={(value) => form.setFieldValue(path, value)}
+      />
+    );
+  return <TextInput {...common} type={option.control === "url" ? "url" : "text"} {...input} />;
+}
+
+function DynamicOptionField({
+  option,
+  path,
+  configuration,
+  definitionId,
+}: {
+  option: CustomWidgetOption;
+  path: string;
+  configuration: Record<string, unknown>;
+  definitionId: string;
+}) {
+  const form = useFormContext();
+  const board = useOptionalBoard();
+  const source = option.choicesFrom;
+  if (!source) return null;
+  const query = clientApi.customWidget.optionRequest.useQuery(
+    {
+      boardId: board?.id ?? "",
+      definitionId,
+      requestId: source.request,
+      params: primitiveConfiguration(configuration),
+    },
+    { enabled: Boolean(board?.id && definitionId && source.request) },
+  );
+  const collection = source.itemsPath ? getByPath(query.data?.data, source.itemsPath) : query.data?.data;
+  const data = (Array.isArray(collection) ? collection : []).flatMap((row) => {
+    const value = getByPath(row, source.valuePath);
+    const label = getByPath(row, source.labelPath);
+    return typeof value === "string" || typeof value === "number"
+      ? [{ value: String(value), label: String(label ?? value) }]
+      : [];
+  });
+  const input = form.getInputProps(path);
+  const common = {
+    label: option.label,
+    description: option.description,
+    data,
+    searchable: true,
+    disabled: query.isError,
+    rightSection: query.isFetching ? "…" : undefined,
+  };
+  if (option.control === "multiSelect")
+    return (
+      <MultiSelect
+        {...common}
+        value={Array.isArray(input.value) ? input.value.map(String) : []}
+        onChange={(value) =>
+          form.setFieldValue(
+            path,
+            value.map((entry) => coerceChoice(entry, option)),
+          )
+        }
+      />
+    );
+  return (
+    <Select
+      {...common}
+      value={input.value == null ? null : String(input.value)}
+      onChange={(value) => form.setFieldValue(path, coerceChoice(value, option))}
+    />
+  );
+}
+
+const editorMessages: CustomWidgetEditorMessages = {
+  languageJsx: "JSX",
+  languageJson: "JSON",
+  undo: "Undo",
+  redo: "Redo",
+  components: "Components",
+  componentSearch: "Search components",
+  componentEmpty: "No components",
+  componentCount: (count) => `${count} components`,
+  insertStarter: "Insert starter",
+  format: "Format",
+  copy: "Copy",
+  copied: "Copied",
+  schema: "Schema",
+  schemaTab: "JSON Schema",
+  minimalTab: "Minimal",
+  fullTab: "Full",
+  errors: (count) => `${count} errors`,
+  warnings: (count) => `${count} warnings`,
+  ready: "Ready",
+  position: ({ line, column }) => `Ln ${line}, Col ${column}`,
+  characters: (count, limit) => (limit ? `${count} / ${limit}` : `${count} characters`),
+  diagnosticsTitle: "Diagnostics",
+  diagnostic: (diagnostic) => diagnostic.value ?? diagnostic.code,
+};
+
+export function JsonOption({
+  identity,
+  editorId,
+  label,
+  description,
+  value,
+  onChange,
+}: {
+  identity: string;
+  editorId: string;
+  label: string;
+  description?: string;
+  value: unknown;
+  onChange(value: unknown): void;
+}) {
+  const serializedValue = JSON.stringify(value ?? null, null, 2);
+  const [draft, setDraft] = useState(serializedValue);
+  const [error, setError] = useState<string>();
+  const synchronizedValueRef = useRef(serializedValue);
+  const identityRef = useRef(identity);
+  useEffect(() => {
+    if (identityRef.current === identity && synchronizedValueRef.current === serializedValue) return;
+    identityRef.current = identity;
+    synchronizedValueRef.current = serializedValue;
+    setDraft(serializedValue);
+    setError(undefined);
+  }, [identity, serializedValue]);
+  return (
+    <CustomWidgetCodeEditor
+      id={editorId}
+      label={label}
+      description={description}
+      language="json"
+      value={draft}
+      height="160px"
+      error={error}
+      onChange={(next) => {
+        setDraft(next);
+        try {
+          const parsed = JSON.parse(next) as unknown;
+          synchronizedValueRef.current = JSON.stringify(parsed ?? null, null, 2);
+          onChange(parsed);
+          setError(undefined);
+        } catch (cause) {
+          setError(cause instanceof Error ? cause.message : "Invalid JSON");
+        }
+      }}
+      messages={editorMessages}
+    />
+  );
+}
+
+function coerceChoice(value: string | null, option: CustomWidgetOption) {
+  if (value === null) return null;
+  return typeof option.default === "number" ||
+    option.choices?.some((choice) => typeof choice.value === "number" && String(choice.value) === value)
+    ? Number(value)
+    : value;
+}
+
+function primitiveConfiguration(value: Record<string, unknown>) {
+  return Object.fromEntries(
+    Object.entries(value).filter((entry): entry is [string, string | number | boolean] =>
+      ["string", "number", "boolean"].includes(typeof entry[1]),
+    ),
+  );
+}
+
+function getByPath(value: unknown, path: string): unknown {
+  return path
+    .replace(/^\$\.?/u, "")
+    .split(".")
+    .filter(Boolean)
+    .reduce<unknown>((current, segment) => (isRecord(current) ? current[segment] : undefined), value);
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
diff --git a/packages/widgets/src/_inputs/widget-custom-widget-select-input.spec.tsx b/packages/widgets/src/_inputs/widget-custom-widget-select-input.spec.tsx
new file mode 100644
index 000000000..95103f25f
--- /dev/null
+++ b/packages/widgets/src/_inputs/widget-custom-widget-select-input.spec.tsx
@@ -0,0 +1,169 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import type { ReactNode } from "react";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { WidgetCustomWidgetSelectInput } from "./widget-custom-widget-select-input";
+
+const mocks = vi.hoisted(() => ({
+  available: [] as Array<Record<string, unknown>>,
+  permissions: ["admin"] as string[],
+  setFieldValue: vi.fn(),
+}));
+
+vi.mock("@mantine/core", () => {
+  // oxlint-disable-next-line unicorn/consistent-function-scoping -- the mock factory is hoisted by Vitest
+  const Container = ({ children }: { children?: ReactNode }) => <div>{children}</div>;
+  const Combobox = Object.assign(Container, {
+    Target: Container,
+    Dropdown: Container,
+    Options: Container,
+    Group: Container,
+    Option: Container,
+    Empty: Container,
+    Chevron: () => null,
+  });
+
+  return {
+    Alert: ({ children, title }: { children?: ReactNode; title?: ReactNode }) => (
+      <div role="alert">
+        <strong>{title}</strong>
+        {children}
+      </div>
+    ),
+    Anchor: ({ children, href }: { children?: ReactNode; href?: string }) => <a href={href}>{children}</a>,
+    Avatar: Container,
+    Badge: Container,
+    Combobox,
+    Group: Container,
+    InputBase: ({ value }: { value?: string }) => <input aria-label="Custom widget" value={value} readOnly />,
+    Loader: () => null,
+    Stack: Container,
+    Text: Container,
+    useCombobox: () => ({
+      dropdownOpened: false,
+      resetSelectedOption: vi.fn(),
+      closeDropdown: vi.fn(),
+      openDropdown: vi.fn(),
+      updateSelectedOptionIndex: vi.fn(),
+    }),
+  };
+});
+
+vi.mock("@homarr/api/client", () => ({
+  clientApi: {
+    customWidget: {
+      available: {
+        useQuery: () => ({ data: mocks.available, isLoading: false }),
+      },
+    },
+  },
+}));
+
+vi.mock("@homarr/auth/client", () => ({
+  useSession: () => ({ data: { user: { permissions: mocks.permissions } } }),
+}));
+
+vi.mock("@homarr/boards/context", () => ({
+  useOptionalBoard: () => ({ id: "board-1" }),
+}));
+
+vi.mock("@homarr/translation/client", () => ({
+  useScopedI18n: () => (key: string) =>
+    ({
+      migrationRequired: "Migration required",
+      migrationDescription: "Copy its redacted prompt to an LLM, then paste the single JSON response into Homarr.",
+      manageMigration: "Open Manage custom widgets",
+      contactAdmin: "Contact an administrator.",
+    })[key] ?? key,
+}));
+
+vi.mock("@homarr/ui", () => ({ Link: "a" }));
+
+vi.mock("./form", () => ({
+  useFormContext: () => ({
+    values: { options: { definitionId: "legacy-widget" } },
+    setFieldValue: mocks.setFieldValue,
+  }),
+}));
+
+let root: Root;
+let host: HTMLDivElement;
+
+beforeEach(() => {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  mocks.available = [];
+  mocks.permissions = ["admin"];
+  mocks.setFieldValue.mockReset();
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+
+afterEach(async () => {
+  await act(() => root.unmount());
+  host.remove();
+});
+
+async function renderInput() {
+  await act(async () => {
+    root.render(
+      <WidgetCustomWidgetSelectInput
+        kind="customApi"
+        property="definitionId"
+        options={{ withDescription: false }}
+        initialOptions={{}}
+      />,
+    );
+  });
+}
+
+describe("custom widget picker migration status", () => {
+  it("keeps an existing legacy selection visible with migration guidance", async () => {
+    mocks.available = [
+      {
+        id: "legacy-widget",
+        name: "Legacy status",
+        description: "Old API widget",
+        iconUrl: null,
+        sources: [],
+        requestCapabilities: [],
+        defaultOptions: {},
+        updatedAt: new Date(0),
+        migrationRequired: true,
+      },
+    ];
+
+    await renderInput();
+
+    expect(host.querySelector("input")?.value).toBe("Legacy status");
+    expect(host.textContent).toContain("Migration required");
+    expect(host.textContent).toContain("Copy its redacted prompt to an LLM");
+    expect(host.querySelector('a[href="/manage/custom-widgets"]')?.textContent).toBe("Open Manage custom widgets");
+  });
+
+  it("tells non-admins to contact an administrator without linking management", async () => {
+    mocks.permissions = ["board-modify-all"];
+    mocks.available = [
+      {
+        id: "legacy-widget",
+        name: "Legacy status",
+        description: "Old API widget",
+        iconUrl: null,
+        sources: [],
+        requestCapabilities: [],
+        defaultOptions: {},
+        updatedAt: new Date(0),
+        migrationRequired: true,
+      },
+    ];
+
+    await renderInput();
+
+    expect(host.textContent).toContain("Contact an administrator.");
+    expect(host.querySelector('a[href="/manage/custom-widgets"]')).toBeNull();
+  });
+});
diff --git a/packages/widgets/src/_inputs/widget-custom-widget-select-input.tsx b/packages/widgets/src/_inputs/widget-custom-widget-select-input.tsx
index b177b20b4..24276feea 100644
--- a/packages/widgets/src/_inputs/widget-custom-widget-select-input.tsx
+++ b/packages/widgets/src/_inputs/widget-custom-widget-select-input.tsx
@@ -1,9 +1,26 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import { Combobox, InputBase, Loader, useCombobox } from "@mantine/core";
+import {
+  Alert,
+  Anchor,
+  Avatar,
+  Badge,
+  Combobox,
+  Group,
+  InputBase,
+  Loader,
+  Stack,
+  Text,
+  useCombobox,
+} from "@mantine/core";
+import { IconAlertTriangle, IconApi } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
+import { useSession } from "@homarr/auth/client";
+import { useOptionalBoard } from "@homarr/boards/context";
+import { useScopedI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";
@@ -15,18 +32,21 @@ export const WidgetCustomWidgetSelectInput = ({
   options,
 }: CommonWidgetInputProps<"customWidgetSelect">) => {
   const t = useWidgetInputTranslation(kind, property);
+  const labels = useScopedI18n("widget.customApi.picker");
+  const { data: session } = useSession();
+  const isAdmin = session?.user.permissions.includes("admin") ?? false;
   const form = useFormContext();
-  const { data, isLoading } = clientApi.customWidget.all.useQuery();
+  const board = useOptionalBoard();
+  const currentValue = form.values.options[property] as string;
+  const { data, isLoading } = clientApi.customWidget.available.useQuery(
+    { boardId: board?.id ?? "", currentId: currentValue || undefined },
+    { enabled: board !== null },
+  );
   const [search, setSearch] = useState("");
 
-  const currentValue = form.values.options[property] as string;
-
   const definitions = useMemo(
-    () =>
-      (data ?? [])
-        .filter((def) => def.enabled || def.id === currentValue)
-        .map((def) => ({ value: def.id, label: def.name })),
-    [data, currentValue],
+    () => (data ?? []).map((definition) => ({ ...definition, value: definition.id, label: definition.name })),
+    [data],
   );
 
   const filteredOptions = useMemo(
@@ -39,8 +59,8 @@ export const WidgetCustomWidgetSelectInput = ({
     [definitions, search],
   );
 
-  const selectedLabel = definitions.find((d) => d.value === currentValue)?.label;
-
+  const selectedDefinition = definitions.find((definition) => definition.value === currentValue);
+  const selectedLabel = selectedDefinition?.label;
   const combobox = useCombobox({
     onDropdownClose: () => {
       combobox.resetSelectedOption();
@@ -49,43 +69,104 @@ export const WidgetCustomWidgetSelectInput = ({
   });
 
   return (
-    <Combobox
-      store={combobox}
-      onOptionSubmit={(val) => {
-        form.setFieldValue(`options.${property}`, val);
-        combobox.closeDropdown();
-      }}
-    >
-      <Combobox.Target>
-        <InputBase
-          label={t("label")}
-          description={options.withDescription ? t("description") : undefined}
-          rightSection={isLoading ? <Loader size="xs" /> : <Combobox.Chevron />}
-          rightSectionPointerEvents="none"
-          value={combobox.dropdownOpened ? search : (selectedLabel ?? currentValue)}
-          onChange={(event) => {
-            setSearch(event.currentTarget.value);
-            form.setFieldValue(`options.${property}`, event.currentTarget.value);
-            combobox.openDropdown();
-            combobox.updateSelectedOptionIndex();
-          }}
-          onClick={() => combobox.openDropdown()}
-          onFocus={() => combobox.openDropdown()}
-          onBlur={() => combobox.closeDropdown()}
-          placeholder={t("label")}
-        />
-      </Combobox.Target>
+    <Stack gap="sm">
+      <Combobox
+        store={combobox}
+        onOptionSubmit={(val) => {
+          const definition = definitions.find((candidate) => candidate.value === val);
+          if (!definition || definition.migrationRequired) return;
+          form.setFieldValue(`options.${property}`, val);
+          form.setFieldValue("options.configuration", definition?.defaultOptions ?? {});
+          form.setFieldValue(
+            "options.configurationVersion",
+            definition?.updatedAt instanceof Date ? definition.updatedAt.getTime() : Date.now(),
+          );
+          combobox.closeDropdown();
+        }}
+      >
+        <Combobox.Target>
+          <InputBase
+            label={t("label")}
+            description={options.withDescription ? t("description") : undefined}
+            rightSection={isLoading ? <Loader size="xs" /> : <Combobox.Chevron />}
+            rightSectionPointerEvents="none"
+            value={combobox.dropdownOpened ? search : (selectedLabel ?? currentValue)}
+            onChange={(event) => {
+              setSearch(event.currentTarget.value);
+              combobox.openDropdown();
+              combobox.updateSelectedOptionIndex();
+            }}
+            onClick={() => combobox.openDropdown()}
+            onFocus={() => combobox.openDropdown()}
+            onBlur={() => combobox.closeDropdown()}
+            placeholder={t("label")}
+          />
+        </Combobox.Target>
 
-      <Combobox.Dropdown>
-        <Combobox.Options>
-          {filteredOptions.map((def) => (
-            <Combobox.Option key={def.value} value={def.value} active={def.value === currentValue}>
-              {def.label}
-            </Combobox.Option>
-          ))}
-          {filteredOptions.length === 0 && !isLoading && <Combobox.Empty>No definitions found</Combobox.Empty>}
-        </Combobox.Options>
-      </Combobox.Dropdown>
-    </Combobox>
+        <Combobox.Dropdown>
+          <Combobox.Options>
+            <Combobox.Group label={labels("group")}>
+              {filteredOptions.map((def) => (
+                <Combobox.Option
+                  key={def.value}
+                  value={def.value}
+                  active={def.value === currentValue}
+                  disabled={def.migrationRequired}
+                >
+                  <Group wrap="nowrap" gap="sm">
+                    <Avatar src={def.iconUrl} size={36} radius="md" color="blue">
+                      <IconApi size={18} />
+                    </Avatar>
+                    <Stack gap={1} style={{ minWidth: 0 }}>
+                      <Text size="sm" fw={600} truncate>
+                        {def.label}
+                      </Text>
+                      {def.description && (
+                        <Text size="xs" c="dimmed" lineClamp={1}>
+                          {def.description}
+                        </Text>
+                      )}
+                      <Group gap={4} mt={2}>
+                        {def.migrationRequired && (
+                          <Badge size="xs" variant="light" color="yellow">
+                            {labels("migrationRequired")}
+                          </Badge>
+                        )}
+                        <Badge size="xs" variant="light">
+                          {labels("sources", { count: def.sources.length })}
+                        </Badge>
+                        <Badge size="xs" variant="light" color="gray">
+                          {labels("requests", { count: def.requestCapabilities.length })}
+                        </Badge>
+                      </Group>
+                    </Stack>
+                  </Group>
+                </Combobox.Option>
+              ))}
+            </Combobox.Group>
+            {filteredOptions.length === 0 && !isLoading && <Combobox.Empty>{labels("empty")}</Combobox.Empty>}
+          </Combobox.Options>
+        </Combobox.Dropdown>
+      </Combobox>
+      {selectedDefinition?.migrationRequired && (
+        <Alert
+          color="yellow"
+          variant="light"
+          icon={<IconAlertTriangle size={18} />}
+          title={labels("migrationRequired")}
+        >
+          <Text size="xs">{labels("migrationDescription")}</Text>
+          {isAdmin ? (
+            <Anchor component={Link} href="/manage/custom-widgets" size="xs" fw={600}>
+              {labels("manageMigration")}
+            </Anchor>
+          ) : (
+            <Text size="xs" fw={600}>
+              {labels("contactAdmin")}
+            </Text>
+          )}
+        </Alert>
+      )}
+    </Stack>
   );
 };
diff --git a/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx b/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx
index 71d3aecaa..27ea719cc 100644
--- a/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx
+++ b/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx
@@ -17,7 +17,13 @@ export interface DynamicSelectOption {
   label: string;
 }
 
-export const WidgetDynamicSelectInput = ({ property, kind, options }: CommonWidgetInputProps<"dynamicSelect">) => {
+export const WidgetDynamicSelectInput = ({
+  property,
+  kind,
+  options,
+  itemId,
+  boardId,
+}: CommonWidgetInputProps<"dynamicSelect">) => {
   const t = useI18n();
   const tSelect = useScopedI18n("widget.dynamicSelect");
   const tWidget = useWidgetInputTranslation(kind, property);
@@ -26,10 +32,10 @@ export const WidgetDynamicSelectInput = ({ property, kind, options }: CommonWidg
   const [search, setSearch] = useState("");
   const [debouncedSearch] = useDebouncedValue(search, 300);
   const {
+    error: optionsError,
     isPending,
-    isError = false,
     options: selectOptions,
-  } = options.useOptions(debouncedSearch, form.values.integrationIds, form.values.options);
+  } = options.useOptions(debouncedSearch, form.values.integrationIds, form.values.options, itemId, boardId);
   const currentOption = inputProps.value as DynamicSelectOption | null;
   const onChange = inputProps.onChange as (value: DynamicSelectOption | null) => void;
 
@@ -93,8 +99,7 @@ export const WidgetDynamicSelectInput = ({ property, kind, options }: CommonWidg
       description={options.withDescription ? tWidget("description") : undefined}
       searchable
       {...inputProps}
-      disabled={isError}
-      error={isError ? tSelect("loadError") : inputProps.error}
+      error={inputProps.error ?? optionsError}
       value={currentOption === null ? null : currentOption.value}
       onChange={(selectedValue: string | null) => {
         if (selectedValue === null) {
diff --git a/packages/widgets/src/_inputs/widget-internal-input.tsx b/packages/widgets/src/_inputs/widget-internal-input.tsx
new file mode 100644
index 000000000..30d77d1a4
--- /dev/null
+++ b/packages/widgets/src/_inputs/widget-internal-input.tsx
@@ -0,0 +1,3 @@
+import type { CommonWidgetInputProps } from "./common";
+
+export const WidgetInternalInput = (_props: CommonWidgetInputProps<"internal">) => null;
diff --git a/packages/widgets/src/_inputs/widget-location-input.tsx b/packages/widgets/src/_inputs/widget-location-input.tsx
index 37d26cf2e..91501aa2c 100644
--- a/packages/widgets/src/_inputs/widget-location-input.tsx
+++ b/packages/widgets/src/_inputs/widget-location-input.tsx
@@ -21,8 +21,9 @@ import { IconClick, IconListSearch } from "@tabler/icons-react";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { createModal, useModalAction } from "@homarr/modals";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
+import { formatLocalizedCompactNumber } from "../common/locale";
 import type { OptionLocation } from "../options";
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";
@@ -128,7 +129,7 @@ const LocationSearchModal = createModal<LocationSearchInnerProps>(({ actions, in
   if (error) {
     return (
       <Alert title={tCommon("error")} color="red">
-        {error.message}
+        {tCommon("action.tryAgain")}
       </Alert>
     );
   }
@@ -187,6 +188,7 @@ interface LocationSearchTableRowProps {
 
 const LocationSelectTableRow = ({ city, onLocationSelect, closeModal }: LocationSearchTableRowProps) => {
   const t = useScopedI18n("widget.common.location.table");
+  const locale = useCurrentIntlLocale();
   const onSelect = useCallback(() => {
     onLocationSelect({
       name: city.name,
@@ -196,8 +198,6 @@ const LocationSelectTableRow = ({ city, onLocationSelect, closeModal }: Location
     closeModal();
   }, [city, onLocationSelect, closeModal]);
 
-  const formatter = Intl.NumberFormat("en", { notation: "compact" });
-
   return (
     <Table.Tr>
       <Table.Td>
@@ -215,7 +215,7 @@ const LocationSelectTableRow = ({ city, onLocationSelect, closeModal }: Location
       </Table.Td>
       <Table.Td>
         {city.population ? (
-          <Text style={{ whiteSpace: "nowrap" }}>{formatter.format(city.population)}</Text>
+          <Text style={{ whiteSpace: "nowrap" }}>{formatLocalizedCompactNumber(city.population, locale)}</Text>
         ) : (
           <Text c="gray"> {t("population.fallback")}</Text>
         )}
diff --git a/packages/widgets/src/_inputs/widget-multiReleasesRepositories-input.tsx b/packages/widgets/src/_inputs/widget-multiReleasesRepositories-input.tsx
index 45c9ed595..9e3b925e4 100644
--- a/packages/widgets/src/_inputs/widget-multiReleasesRepositories-input.tsx
+++ b/packages/widgets/src/_inputs/widget-multiReleasesRepositories-input.tsx
@@ -272,19 +272,19 @@ const ProviderTokensSection = ({ itemId, repositories }: { itemId: string; repos
   const { data: configuredKinds = [], refetch } = clientApi.widget.secrets.getConfiguredKinds.useQuery({ itemId });
   const setSecret = clientApi.widget.secrets.setSecret.useMutation({
     onSuccess: () => refetch(),
-    onError: (error) => {
+    onError: () => {
       showErrorNotification({
-        title: "Failed to save token",
-        message: error.message,
+        title: tRepository("tokens.label"),
+        message: tRepository("tokens.notConfigured"),
       });
     },
   });
   const deleteSecret = clientApi.widget.secrets.deleteSecret.useMutation({
     onSuccess: () => refetch(),
-    onError: (error) => {
+    onError: () => {
       showErrorNotification({
-        title: "Failed to delete token",
-        message: error.message,
+        title: tRepository("tokens.label"),
+        message: tRepository("tokens.notConfigured"),
       });
     },
   });
diff --git a/packages/widgets/src/advanced-focus-support.spec.ts b/packages/widgets/src/advanced-focus-support.spec.ts
new file mode 100644
index 000000000..2ee1dcc84
--- /dev/null
+++ b/packages/widgets/src/advanced-focus-support.spec.ts
@@ -0,0 +1,43 @@
+import { describe, expect, test } from "vitest";
+
+import { supportsAdvancedFocus } from "./definition";
+import { widgetImports } from ".";
+
+const compactOnlyWidgetKinds = [
+  "app",
+  "bazarr",
+  "beszelAlerts",
+  "beszelSystemGrid",
+  "beszelSystemStats",
+  "beszelSystemTable",
+  "coolify",
+  "dnsHoleControls",
+  "dnsHoleSummary",
+  "iframe",
+  "indexerManager",
+  "mediaRequests-requestList",
+  "mediaRequests-requestStats",
+  "minecraftServerStatus",
+  "networkControllerSummary",
+  "notebook",
+  "notifications",
+  "paperlessNgx",
+  "patchmon",
+  "releases",
+  "rssFeed",
+  "stockPrice",
+  "systemDisks",
+  "video",
+  "vpn",
+] as const;
+
+describe("advanced focus support", () => {
+  test("is reserved for widgets with a distinct advanced experience", () => {
+    const actualCompactOnlyKinds = Object.entries(widgetImports)
+      .filter(([, widgetImport]) => !supportsAdvancedFocus(widgetImport.definition))
+      .map(([kind]) => kind)
+      .toSorted();
+
+    expect(actualCompactOnlyKinds).toEqual([...compactOnlyWidgetKinds].toSorted());
+  });
+});
diff --git a/packages/widgets/src/anchor-note/anchor-note.css b/packages/widgets/src/anchor-note/anchor-note.css
index c28655e87..d107b2a77 100644
--- a/packages/widgets/src/anchor-note/anchor-note.css
+++ b/packages/widgets/src/anchor-note/anchor-note.css
@@ -4,6 +4,34 @@
   height: 100%;
 }
 
+.homarr-anchor-actions {
+  opacity: 0;
+  transform: translateY(-2px);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+}
+
+.homarr-anchor-note:hover .homarr-anchor-actions,
+.homarr-anchor-note:focus-within .homarr-anchor-actions,
+.homarr-anchor-actions[data-visible="true"] {
+  opacity: 1;
+  transform: none;
+}
+
+@media (any-pointer: coarse) {
+  .homarr-anchor-actions {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .homarr-anchor-actions {
+    transition: none;
+  }
+}
+
 .homarr-anchor-quill .ql-toolbar.ql-snow,
 .homarr-anchor-quill .ql-container.ql-snow {
   border: 0;
diff --git a/packages/widgets/src/anchor-note/component.tsx b/packages/widgets/src/anchor-note/component.tsx
index 90a1c998c..9e786afa8 100644
--- a/packages/widgets/src/anchor-note/component.tsx
+++ b/packages/widgets/src/anchor-note/component.tsx
@@ -3,19 +3,23 @@
 import { startTransition, useCallback, useEffect, useMemo, useState } from "react";
 import type { ComponentProps } from "react";
 import dynamic from "next/dynamic";
-import { Button, Center, Group, Stack, Text, TextInput } from "@mantine/core";
+import { ActionIcon, Badge, Button, Center, Group, Stack, Text, TextInput, Tooltip } from "@mantine/core";
+import { IconEdit } from "@tabler/icons-react";
 import { Quill } from "react-quill-new";
 import type { DeltaStatic } from "react-quill-new";
 import type ReactQuillComponent from "react-quill-new";
 import { z } from "zod/v4";
 
 import { clientApi } from "@homarr/api/client";
+import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
 import { useTimeAgo } from "@homarr/common";
 import type { AnchorNotePermission } from "@homarr/integrations";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
+import actionTargetClasses from "../common/action-target.module.css";
 
 import "react-quill-new/dist/quill.snow.css";
 import "./anchor-note.css";
@@ -106,6 +110,13 @@ const stringifyDelta = (delta: unknown): string => {
   return JSON.stringify(emptyDelta());
 };
 
+export const storedContentToPlainText = (content?: string | null): string => {
+  return parseStoredContent(content)
+    .ops.map(({ insert }) => (typeof insert === "string" ? insert : ""))
+    .join("")
+    .trim();
+};
+
 const canEditPermission = (permission: AnchorNotePermission) => {
   return permission === "owner" || permission === "editor";
 };
@@ -119,7 +130,13 @@ const isForbiddenError = (error: unknown): boolean => {
   return (data as { code?: unknown }).code === "FORBIDDEN";
 };
 
-export default function AnchorNoteWidget({ options, integrationIds }: WidgetComponentProps<"anchorNote">) {
+export default function AnchorNoteWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+  displayMode,
+}: WidgetComponentProps<"anchorNote">) {
   const t = useScopedI18n("widget.anchorNote");
   const noteId = options.noteId.trim();
   if (!noteId) {
@@ -134,21 +151,43 @@ export default function AnchorNoteWidget({ options, integrationIds }: WidgetComp
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const integrationId = integrationIds[0]!;
 
-  return <AnchorNoteWidgetContent options={options} integrationId={integrationId} noteId={noteId} />;
+  return (
+    <AnchorNoteWidgetContent
+      options={options}
+      integrationId={integrationId}
+      noteId={noteId}
+      width={width}
+      height={height}
+      isAdvanced={displayMode === "advanced"}
+    />
+  );
 }
 
 interface AnchorNoteWidgetContentProps {
   options: WidgetComponentProps<"anchorNote">["options"];
   integrationId: string;
   noteId: string;
+  width: number;
+  height: number;
+  isAdvanced: boolean;
 }
 
-const AnchorNoteWidgetContent = ({ options, integrationId, noteId }: AnchorNoteWidgetContentProps) => {
+const AnchorNoteWidgetContent = ({
+  options,
+  integrationId,
+  noteId,
+  width,
+  height,
+  isAdvanced,
+}: AnchorNoteWidgetContentProps) => {
   const t = useScopedI18n("widget.anchorNote");
-  const { data: note, refetch } = clientApi.widget.anchorNotes.getNote.useQuery({
+  const locale = useCurrentIntlLocale();
+  const noteQuery = clientApi.widget.anchorNotes.getNote.useQuery({
     integrationId,
     noteId,
   });
+  const note = getUsableWidgetQueryData(noteQuery);
+  const { refetch } = noteQuery;
   const { mutateAsync: updateNoteAsync, isPending: isUpdating } = clientApi.widget.anchorNotes.updateNote.useMutation();
 
   const [isEditing, setIsEditing] = useState(false);
@@ -165,7 +204,8 @@ const AnchorNoteWidgetContent = ({ options, integrationId, noteId }: AnchorNoteW
     });
   }, [isEditing, note]);
 
-  const canEdit = canEditPermission(note?.permission ?? "viewer");
+  const hasInteractAccess = useIntegrationsWithInteractAccess().some(({ id }) => id === integrationId);
+  const canEdit = canEditPermission(note?.permission ?? "viewer") && hasInteractAccess;
   const isViewer = !note || note.permission === "viewer";
   const updatedAt = useMemo(() => (note ? new Date(note.updatedAt) : new Date()), [note]);
   const updatedAtRelative = useTimeAgo(updatedAt, 30000);
@@ -178,6 +218,7 @@ const AnchorNoteWidgetContent = ({ options, integrationId, noteId }: AnchorNoteW
 
   const editorValue = useMemo(() => parseStoredContent(draftContent), [draftContent]);
   const readOnlyValue = useMemo(() => parseStoredContent(note?.content), [note?.content]);
+  const plainText = useMemo(() => storedContentToPlainText(note?.content), [note?.content]);
   const handleEditorChange = useCallback<ReactQuillOnChange>(
     (_html, _delta, source, editor) => {
       if (!isEditing || source !== "user") return;
@@ -260,7 +301,7 @@ const AnchorNoteWidgetContent = ({ options, integrationId, noteId }: AnchorNoteW
   if (!note) return <WidgetEmptyState />;
 
   return (
-    <Stack h="100%" gap="xs" p="sm">
+    <Stack className="homarr-anchor-note" h="100%" gap="xs" p={height < 120 ? "xs" : "sm"}>
       <Group justify="space-between" align="flex-start">
         <Stack gap={2} style={{ flex: 1 }}>
           {isEditing ? (
@@ -278,40 +319,85 @@ const AnchorNoteWidgetContent = ({ options, integrationId, noteId }: AnchorNoteW
               {t("readOnlyViewer")}
             </Text>
           )}
+          {!isEditing && isAdvanced && (
+            <Group gap={4}>
+              <Badge size="xs" variant="light">
+                {t(`permission.${note.permission}`)}
+              </Badge>
+              {note.isPinned && <Badge size="xs">{t("status.pinned")}</Badge>}
+              {note.isArchived && (
+                <Badge size="xs" color="gray">
+                  {t("status.archived")}
+                </Badge>
+              )}
+              <Text size="xs" c="dimmed">
+                {t("createdAt", { date: new Date(note.createdAt).toLocaleDateString(locale) })}
+              </Text>
+            </Group>
+          )}
           {saveError && (
             <Text size="xs" c="red">
               {saveError}
             </Text>
           )}
         </Stack>
-        <Group gap="xs">
-          {isEditing ? (
-            <>
-              <Button size="xs" onClick={handleSave} loading={isUpdating} disabled={!hasChanges || !canEdit}>
-                {t("save")}
+        {(isEditing || canEdit) && (
+          <Group className="homarr-anchor-actions" data-visible={isEditing || isAdvanced || undefined} gap="xs">
+            {isEditing ? (
+              <>
+                <Button size="xs" onClick={handleSave} loading={isUpdating} disabled={!hasChanges || !canEdit}>
+                  {t("save")}
+                </Button>
+                <Button size="xs" variant="subtle" onClick={handleCancel} disabled={isUpdating}>
+                  {t("cancel")}
+                </Button>
+              </>
+            ) : isAdvanced ? (
+              <Button size="xs" variant="light" onClick={handleEdit} disabled={isUpdating}>
+                {t("edit")}
               </Button>
-              <Button size="xs" variant="subtle" onClick={handleCancel} disabled={isUpdating}>
-                {t("cancel")}
-              </Button>
-            </>
-          ) : (
-            <Button size="xs" variant="light" onClick={handleEdit} disabled={!canEdit || isUpdating}>
-              {t("edit")}
-            </Button>
-          )}
-        </Group>
+            ) : (
+              <Tooltip label={t("edit")}>
+                <ActionIcon
+                  className={actionTargetClasses.root}
+                  aria-label={t("edit")}
+                  size="md"
+                  variant="light"
+                  onClick={handleEdit}
+                  disabled={isUpdating}
+                >
+                  <IconEdit size={16} />
+                </ActionIcon>
+              </Tooltip>
+            )}
+          </Group>
+        )}
       </Group>
-      <div className={`homarr-anchor-quill${isEditing ? "" : " homarr-anchor-quill--readonly"}`} style={{ flex: 1 }}>
-        <ReactQuill
-          theme="snow"
-          readOnly={!isEditing}
-          value={isEditing ? editorValue : readOnlyValue}
-          onChange={handleEditorChange}
-          modules={isEditing ? quillModules : readOnlyModules}
-          formats={quillFormats}
-          placeholder={t("emptyContent")}
-        />
-      </div>
+      {isEditing || isAdvanced ? (
+        <div
+          className={`homarr-anchor-quill${isEditing ? "" : " homarr-anchor-quill--readonly"}`}
+          style={{ flex: 1, minHeight: 0 }}
+        >
+          <ReactQuill
+            theme="snow"
+            readOnly={!isEditing}
+            value={isEditing ? editorValue : readOnlyValue}
+            onChange={handleEditorChange}
+            modules={isEditing ? quillModules : readOnlyModules}
+            formats={quillFormats}
+            placeholder={t("emptyContent")}
+          />
+        </div>
+      ) : (
+        <Text
+          size={width < 180 || height < 100 ? "xs" : "sm"}
+          c={plainText ? undefined : "dimmed"}
+          style={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}
+          lineClamp={Math.max(2, Math.floor((height - 70) / 18))}
+        >
+          {plainText || t("emptyContent")}
+        </Text>
+      )}
     </Stack>
   );
 };
diff --git a/packages/widgets/src/anchor-note/index.ts b/packages/widgets/src/anchor-note/index.ts
index a54aada3f..9baaccf2d 100644
--- a/packages/widgets/src/anchor-note/index.ts
+++ b/packages/widgets/src/anchor-note/index.ts
@@ -5,6 +5,8 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("anchorNote", {
   icon: IconNotes,
+  queryKey: [["widget", "anchorNotes"]],
+  maxIntegrations: 1,
   supportedIntegrations: ["anchor"],
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/app/component.tsx b/packages/widgets/src/app/component.tsx
index 56e079a8c..6e84876fd 100644
--- a/packages/widgets/src/app/component.tsx
+++ b/packages/widgets/src/app/component.tsx
@@ -2,7 +2,7 @@
 
 import type { PropsWithChildren } from "react";
 import { Fragment, Suspense } from "react";
-import { Flex, rem, Stack, Text, Tooltip, UnstyledButton } from "@mantine/core";
+import { Box, Flex, Stack, Text, Tooltip, UnstyledButton } from "@mantine/core";
 import { IconMinus } from "@tabler/icons-react";
 import combineClasses from "clsx";
 
@@ -14,6 +14,9 @@ import { useI18n } from "@homarr/translation/client";
 import { MaskedOrNormalImage } from "@homarr/ui";
 
 import { WidgetEmptyState } from "../common/empty-state";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "../common/query-state";
+import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "../common/query-state-indicator";
 import type { WidgetComponentProps } from "../definition";
 import classes from "./app.module.css";
 import { PingDot } from "./ping/ping-dot";
@@ -23,12 +26,12 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
   const t = useI18n();
   const settings = useSettings();
   const board = useRequiredBoard();
-  const { data: app } = clientApi.app.byId.useQuery({
-    id: options.appId,
-  });
+  const appQuery = clientApi.app.byId.useQuery({ id: options.appId });
+  const app = getUsableWidgetQueryData(appQuery);
+  const href = getSafeApplicationUrl(app?.href);
   useRegisterSpotlightContextResults(
     `app-${app?.id ?? options.appId}`,
-    app?.href
+    app && href
       ? [
           {
             id: app.id,
@@ -37,99 +40,102 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
             interaction() {
               return {
                 type: "link",
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                href: app.href!,
+                href,
                 newTab: options.openInNewTab,
               };
             },
           },
         ]
       : [],
-    [app, options.openInNewTab],
+    [app, href, options.openInNewTab],
   );
 
+  if (isInitialWidgetQueryPending(appQuery)) return <WidgetQueryLoadingState />;
   if (!app) return <WidgetEmptyState />;
 
   const isTiny = height < 100 || width < 100;
   const isColumnLayout = options.layout.startsWith("column");
 
   return (
-    <AppLink
-      href={app.href ?? undefined}
-      openInNewTab={options.openInNewTab}
-      enabled={Boolean(app.href) && !isEditMode}
-    >
-      <Tooltip.Floating
-        label={app.description?.split("\n").map((line, index) => (
-          <Fragment key={index}>
-            {line}
-            <br />
-          </Fragment>
-        ))}
-        position="right-start"
-        multiline
-        disabled={options.descriptionDisplayMode !== "tooltip" || !app.description || isEditMode}
-        styles={{ tooltip: { maxWidth: 300 } }}
-      >
-        <Flex
-          p={isTiny ? 4 : "sm"}
-          className={combineClasses("app-flex-wrapper", app.name, app.id, app.href && classes.appWithUrl)}
-          h="100%"
-          w="100%"
-          direction={options.layout}
-          justify="center"
-          align="center"
-          gap={isColumnLayout ? 0 : "sm"}
-          onContextMenu={isEditMode ? (e) => e.preventDefault() : undefined}
+    <Box h="100%" w="100%" pos="relative">
+      <AppLink href={href} openInNewTab={options.openInNewTab} enabled={Boolean(href) && !isEditMode}>
+        <Tooltip.Floating
+          label={app.description?.split("\n").map((line, index) => (
+            <Fragment key={index}>
+              {line}
+              <br />
+            </Fragment>
+          ))}
+          position="right-start"
+          multiline
+          disabled={options.descriptionDisplayMode !== "tooltip" || !app.description || isEditMode}
+          styles={{ tooltip: { maxWidth: 300 } }}
         >
-          <Stack gap={0}>
-            {options.showTitle && (
-              <Text
-                className="app-title"
-                fw={700}
-                size={isTiny ? rem(8) : "sm"}
-                ta={isColumnLayout ? "center" : undefined}
-              >
-                {app.name}
-              </Text>
-            )}
-            {options.descriptionDisplayMode === "normal" && (
-              <Text
-                className="app-description"
-                size={isTiny ? rem(8) : "sm"}
-                ta={isColumnLayout ? "center" : undefined}
-                c="dimmed"
-                lineClamp={4}
-              >
-                {app.description?.split("\n").map((line, index) => (
-                  <Fragment key={index}>
-                    {line}
-                    <br />
-                  </Fragment>
-                ))}
-              </Text>
-            )}
-          </Stack>
-          <MaskedOrNormalImage
-            imageUrl={app.iconUrl}
-            hasColor={board.iconColor !== null}
-            alt={app.name}
-            className={combineClasses(classes.appIcon, "app-icon")}
-            style={{
-              height: "100%",
-              width: "100%",
-              minWidth: "20%",
-              maxWidth: isColumnLayout ? undefined : "50%",
-            }}
-          />
-        </Flex>
-      </Tooltip.Floating>
-      {options.pingEnabled && !settings.forceDisableStatus && !board.disableStatus && app.href ? (
-        <Suspense fallback={<PingDot icon={IconMinus} color="gray" tooltip={`${t("common.action.loading")}…`} />}>
-          <PingIndicator appId={app.id} />
-        </Suspense>
-      ) : null}
-    </AppLink>
+          <Flex
+            p={isTiny ? 4 : "sm"}
+            className={combineClasses("app-flex-wrapper", app.name, app.id, href && classes.appWithUrl)}
+            h="100%"
+            w="100%"
+            direction={options.layout}
+            justify="center"
+            align="center"
+            gap={isColumnLayout ? 0 : "sm"}
+            onContextMenu={isEditMode ? (e) => e.preventDefault() : undefined}
+          >
+            <Stack gap={0}>
+              {options.showTitle && (
+                <Text
+                  className="app-title"
+                  fw={700}
+                  size={isTiny ? "xs" : "sm"}
+                  ta={isColumnLayout ? "center" : undefined}
+                >
+                  {app.name}
+                </Text>
+              )}
+              {options.descriptionDisplayMode === "normal" && !isTiny && (
+                <Text
+                  className="app-description"
+                  size="sm"
+                  ta={isColumnLayout ? "center" : undefined}
+                  c="dimmed"
+                  lineClamp={Math.max(1, Math.floor((height - 48) / 18))}
+                >
+                  {app.description?.split("\n").map((line, index) => (
+                    <Fragment key={index}>
+                      {line}
+                      <br />
+                    </Fragment>
+                  ))}
+                </Text>
+              )}
+            </Stack>
+            <MaskedOrNormalImage
+              imageUrl={app.iconUrl}
+              hasColor={board.iconColor !== null}
+              alt={app.name}
+              className={combineClasses(classes.appIcon, "app-icon")}
+              style={{
+                height: "100%",
+                width: "100%",
+                minWidth: "20%",
+                maxWidth: isColumnLayout ? undefined : isTiny ? "38%" : "50%",
+              }}
+            />
+          </Flex>
+        </Tooltip.Floating>
+        {options.pingEnabled && !settings.forceDisableStatus && !board.disableStatus && app.href ? (
+          <Suspense fallback={<PingDot icon={IconMinus} color="gray" tooltip={`${t("common.action.loading")}…`} />}>
+            <PingIndicator appId={app.id} />
+          </Suspense>
+        ) : null}
+      </AppLink>
+      {appQuery.error && (
+        <Box pos="absolute" top={4} right={4}>
+          <WidgetQueryErrorIndicator error={appQuery.error} label={t("widget.app.name")} />
+        </Box>
+      )}
+    </Box>
   );
 }
 
@@ -145,7 +151,7 @@ const AppLink = ({ href, openInNewTab, enabled, children }: PropsWithChildren<Ap
       component="a"
       href={href}
       target={openInNewTab ? "_blank" : undefined}
-      rel="noreferrer"
+      rel={openInNewTab ? SAFE_NEW_TAB_REL : undefined}
       h="100%"
       w="100%"
     >
diff --git a/packages/widgets/src/app/index.ts b/packages/widgets/src/app/index.ts
index 62f01287d..7b8416ca9 100644
--- a/packages/widgets/src/app/index.ts
+++ b/packages/widgets/src/app/index.ts
@@ -15,6 +15,8 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("app", {
   icon: IconApps,
+  supportsAdvancedFocus: false,
+  queryKeys: [[["app", "byId"]], [["widget", "app", "ping"]]],
   createOptions(settings) {
     return optionsBuilder.from(
       (factory) => ({
diff --git a/packages/widgets/src/app/ping/ping-indicator.tsx b/packages/widgets/src/app/ping/ping-indicator.tsx
index 75dc38974..1548881b5 100644
--- a/packages/widgets/src/app/ping/ping-indicator.tsx
+++ b/packages/widgets/src/app/ping/ping-indicator.tsx
@@ -11,7 +11,9 @@ interface PingIndicatorProps {
 
 export const PingIndicator = ({ appId }: PingIndicatorProps) => {
   const t = useI18n();
-  const { data: pingResult } = clientApi.widget.app.ping.useQuery({ id: appId }, { refetchOnMount: false });
+  const { data: pingResult, error } = clientApi.widget.app.ping.useQuery({ id: appId }, { refetchOnMount: false });
+
+  if (error) return <PingDot icon={IconX} color="red" tooltip={t("common.error")} />;
 
   if (!pingResult) return <PingDot icon={IconMinus} color="gray" tooltip={`${t("common.action.loading")}…`} />;
 
diff --git a/packages/widgets/src/app/prefetch.ts b/packages/widgets/src/app/prefetch.ts
index 45300197b..8e99f7082 100644
--- a/packages/widgets/src/app/prefetch.ts
+++ b/packages/widgets/src/app/prefetch.ts
@@ -1,9 +1,9 @@
-import { trpc } from "@homarr/api/server";
 import { createLogger } from "@homarr/core/infrastructure/logs";
 import { db, inArray } from "@homarr/db";
 import { apps } from "@homarr/db/schema";
 
 import type { Prefetch } from "../definition";
+import { createTrpcQueryKey } from "../trpc-query-key";
 
 const logger = createLogger({ module: "appWidgetPrefetch" });
 
@@ -16,7 +16,7 @@ const prefetchAllAsync: Prefetch<"app"> = async (queryClient, items) => {
   });
 
   for (const app of dbApps) {
-    queryClient.setQueryData(trpc.app.byId.queryKey({ id: app.id }), app);
+    queryClient.setQueryData(createTrpcQueryKey("app.byId", { id: app.id }), app);
   }
 
   logger.info("Successfully prefetched apps for app widget", { count: dbApps.length });
diff --git a/packages/widgets/src/archive-team-warrior/component.tsx b/packages/widgets/src/archive-team-warrior/component.tsx
index 5ac03eadc..35cb3049e 100644
--- a/packages/widgets/src/archive-team-warrior/component.tsx
+++ b/packages/widgets/src/archive-team-warrior/component.tsx
@@ -1,16 +1,20 @@
 "use client";
 
-import { Avatar, Badge, Card, Group, SimpleGrid, Stack, Text } from "@mantine/core";
+import { Avatar, Badge, Card, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { formatByteRate } from "@homarr/common";
 import { getIconUrl } from "@homarr/definitions";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 
 export default function ArchiveTeamWarriorWidget({
   integrationIds,
   options,
+  width,
+  height,
+  displayMode,
 }: WidgetComponentProps<"archiveTeamWarrior">) {
   const integrationId = integrationIds[0];
 
@@ -18,23 +22,47 @@ export default function ArchiveTeamWarriorWidget({
     return null;
   }
 
-  return <ArchiveTeamWarriorWidgetContent integrationId={integrationId} options={options} />;
+  return (
+    <ArchiveTeamWarriorWidgetContent
+      integrationId={integrationId}
+      options={options}
+      width={width}
+      height={height}
+      isAdvanced={displayMode === "advanced"}
+    />
+  );
 }
 
 const ArchiveTeamWarriorWidgetContent = ({
   integrationId,
   options,
+  width,
+  height,
+  isAdvanced,
 }: {
   integrationId: string;
   options: WidgetComponentProps<"archiveTeamWarrior">["options"];
+  width: number;
+  height: number;
+  isAdvanced: boolean;
 }) => {
+  const t = useScopedI18n("widget.archiveTeamWarrior");
+  const locale = useCurrentIntlLocale();
   const [data] = clientApi.widget.archiveTeamWarrior.getStatus.useSuspenseQuery({ integrationId });
 
   const status = data.status;
-  const projectName = status.project?.title ?? status.selectedProject ?? "No project selected";
+  const projectName = status.project?.title ?? status.selectedProject ?? t("noProjectSelected");
+  const statusKey = getStatusKey(status.status);
+  const layout = getArchiveCompactLayout(width, height, isAdvanced);
+  const countMetrics = [
+    { label: t("metric.running"), value: status.counts.running },
+    ...(layout.showSecondaryCounts ? [{ label: t("metric.completed"), value: status.counts.completed }] : []),
+    { label: t("metric.failed"), value: status.counts.failed },
+    ...(layout.showSecondaryCounts ? [{ label: t("metric.canceled"), value: status.counts.canceled }] : []),
+  ];
 
   return (
-    <Stack p="xs" gap="xs" h="100%">
+    <Stack p="xs" gap={layout.gap} h="100%" style={{ overflow: "hidden" }}>
       <Group justify="space-between" align="center" wrap="nowrap">
         <Group gap="xs" wrap="nowrap" miw={0}>
           <Avatar size="sm" radius="md" src={getIconUrl("archiveTeamWarrior")} />
@@ -43,12 +71,12 @@ const ArchiveTeamWarriorWidgetContent = ({
           </Text>
         </Group>
 
-        <Badge size="sm" color={status.status === "Running" ? "green" : "gray"}>
-          {status.status}
+        <Badge size="sm" color={getStatusColor(statusKey)}>
+          {t(`status.${statusKey}`)}
         </Badge>
       </Group>
 
-      {options.showBroadcastMessage && status.broadcastMessage && (
+      {options.showBroadcastMessage && status.broadcastMessage && layout.showBroadcast && (
         <Card withBorder p="xs">
           <Text size="xs" lineClamp={3}>
             {status.broadcastMessage}
@@ -56,32 +84,112 @@ const ArchiveTeamWarriorWidgetContent = ({
         </Card>
       )}
 
-      <SimpleGrid cols={2} spacing="xs">
-        <Metric label="Running" value={status.counts.running} />
-        <Metric label="Done" value={status.counts.completed} />
-        <Metric label="Failed" value={status.counts.failed} />
-        <Metric label="Canceled" value={status.counts.canceled} />
+      <SimpleGrid cols={layout.metricColumns} spacing={layout.gap}>
+        {countMetrics.map((metric) => (
+          <Metric key={metric.label} {...metric} dense={layout.dense} />
+        ))}
       </SimpleGrid>
 
-      {status.bandwidth && (
-        <SimpleGrid cols={2} spacing="xs">
-          <Metric label="Download" value={formatBandwidth(status.bandwidth.receiving)} />
-          <Metric label="Upload" value={formatBandwidth(status.bandwidth.sending)} />
+      {status.bandwidth && layout.showBandwidth && (
+        <SimpleGrid cols={2} spacing={layout.gap}>
+          <Metric label={t("metric.download")} value={formatBandwidth(status.bandwidth.receiving)} dense />
+          <Metric label={t("metric.upload")} value={formatBandwidth(status.bandwidth.sending)} dense />
         </SimpleGrid>
       )}
+      {isAdvanced && (
+        <>
+          <Group justify="space-between" gap="xs">
+            <Text size="xs" c="dimmed">
+              {t("runnerStatus", { status: t(`status.${getStatusKey(status.runnerStatus ?? status.status)}`) })}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {t("updatedAt", { date: new Date(status.updatedAt).toLocaleString(locale) })}
+            </Text>
+          </Group>
+          <ScrollArea style={{ flex: 1 }}>
+            <Stack gap={4}>
+              {status.items.map((item) => {
+                const itemStatusKey = getStatusKey(item.status);
+                return (
+                  <Card key={item.id} withBorder p="xs">
+                    <Group justify="space-between" wrap="nowrap">
+                      <Stack gap={0} miw={0}>
+                        <Text size="sm" fw={600} lineClamp={1}>
+                          {item.name}
+                        </Text>
+                        <Text size="xs" c="dimmed" lineClamp={1}>
+                          {item.project ?? projectName}
+                        </Text>
+                      </Stack>
+                      <Badge size="xs" color={getStatusColor(itemStatusKey)}>
+                        {t(`status.${itemStatusKey}`)}
+                      </Badge>
+                    </Group>
+                  </Card>
+                );
+              })}
+            </Stack>
+          </ScrollArea>
+        </>
+      )}
     </Stack>
   );
 };
 
-const Metric = ({ label, value }: { label: string; value: number | string }) => (
+const Metric = ({ label, value, dense = false }: { label: string; value: number | string; dense?: boolean }) => (
   <Stack gap={0} miw={0}>
-    <Text size="md" fw={700} lineClamp={1}>
+    <Text size={dense ? "sm" : "md"} fw={700} lineClamp={1} title={String(value)}>
       {value}
     </Text>
-    <Text size="xs" c="dimmed" lineClamp={1}>
+    <Text size="xs" c="dimmed" lineClamp={1} title={label}>
       {label}
     </Text>
   </Stack>
 );
 
+export const getArchiveCompactLayout = (width: number, height: number, isAdvanced = false) => {
+  const dense = !isAdvanced && (width < 240 || height < 160);
+  const showSecondaryCounts = isAdvanced || (width >= 200 && height >= 120);
+  const metricCount = showSecondaryCounts ? 4 : 2;
+
+  return {
+    dense,
+    gap: dense ? 4 : "xs",
+    metricColumns: height < 160 ? metricCount : Math.min(metricCount, width >= 260 ? 4 : 2),
+    showBandwidth: isAdvanced || height >= 190,
+    showBroadcast: isAdvanced || height >= 240,
+    showSecondaryCounts,
+  } as const;
+};
+
 const formatBandwidth = (value?: number) => formatByteRate(Math.round(value ?? 0));
+
+type WarriorStatusKey = "running" | "completed" | "failed" | "canceled" | "stopped" | "idle" | "unknown";
+
+const getStatusKey = (status?: string | null): WarriorStatusKey => {
+  switch (status?.trim().toLowerCase()) {
+    case "running":
+      return "running";
+    case "done":
+    case "completed":
+      return "completed";
+    case "failed":
+      return "failed";
+    case "canceled":
+    case "cancelled":
+      return "canceled";
+    case "stopped":
+      return "stopped";
+    case "idle":
+      return "idle";
+    default:
+      return "unknown";
+  }
+};
+
+const getStatusColor = (status: WarriorStatusKey): string => {
+  if (status === "running") return "green";
+  if (status === "failed") return "red";
+  if (status === "canceled" || status === "stopped") return "yellow";
+  return "gray";
+};
diff --git a/packages/widgets/src/archive-team-warrior/index.ts b/packages/widgets/src/archive-team-warrior/index.ts
index 5e0998ec2..1eaf0a691 100644
--- a/packages/widgets/src/archive-team-warrior/index.ts
+++ b/packages/widgets/src/archive-team-warrior/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("archiveTeamWarrior", {
   icon: IconArchive,
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showBroadcastMessage: factory.switch({
diff --git a/packages/widgets/src/archive-team-warrior/layout.spec.ts b/packages/widgets/src/archive-team-warrior/layout.spec.ts
new file mode 100644
index 000000000..213c5bd11
--- /dev/null
+++ b/packages/widgets/src/archive-team-warrior/layout.spec.ts
@@ -0,0 +1,23 @@
+import { describe, expect, test } from "vitest";
+
+import { getArchiveCompactLayout } from "./component";
+
+describe("archive team warrior compact layout", () => {
+  test("keeps only primary counters in a minimum-size widget", () => {
+    expect(getArchiveCompactLayout(180, 100)).toMatchObject({
+      metricColumns: 2,
+      showBandwidth: false,
+      showBroadcast: false,
+      showSecondaryCounts: false,
+    });
+  });
+
+  test("adds secondary information as height becomes available", () => {
+    expect(getArchiveCompactLayout(320, 260)).toMatchObject({
+      metricColumns: 4,
+      showBandwidth: true,
+      showBroadcast: true,
+      showSecondaryCounts: true,
+    });
+  });
+});
diff --git a/packages/widgets/src/audio-stats/audio-stats-content.tsx b/packages/widgets/src/audio-stats/audio-stats-content.tsx
index b6824a1fe..3592744a4 100644
--- a/packages/widgets/src/audio-stats/audio-stats-content.tsx
+++ b/packages/widgets/src/audio-stats/audio-stats-content.tsx
@@ -8,7 +8,14 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import classes from "./component.module.css";
 import type { AudioStatsBackend, AudioStatsDisplayOptions } from "./shared";
-import { AUDIO_STATS_TRANSLATION_SCOPE, getGridCols, getIconSize, getVisibleStats } from "./shared";
+import {
+  AUDIO_STATS_TRANSLATION_SCOPE,
+  getGridCols,
+  getIconSize,
+  prioritizeVisibleStats,
+  getVisibleStatLimit,
+  getVisibleStats,
+} from "./shared";
 
 const rootClassByCompact = {
   true: classes.rootCompact,
@@ -30,14 +37,17 @@ interface AudioStatsContentProps {
   stats: NavidromeDashboardData | AudiobookshelfDashboardData;
   options: AudioStatsDisplayOptions;
   width: number;
+  height: number;
 }
 
-export function AudioStatsContent({ backend, stats, options, width }: AudioStatsContentProps) {
+export function AudioStatsContent({ backend, stats, options, width, height }: AudioStatsContentProps) {
   const t = useScopedI18n(AUDIO_STATS_TRANSLATION_SCOPE);
-  const visibleStats = getVisibleStats(backend, options, stats);
-  const compactKey = String(options.compactMode ?? false) as keyof typeof rootClassByCompact;
-  const gridCols = getGridCols(width, visibleStats.length, options.compactMode ?? false);
-  const iconSize = getIconSize(width, options.compactMode ?? false);
+  const compact = options.compactMode ?? false;
+  const enabledStats = prioritizeVisibleStats(getVisibleStats(backend, options, stats), compact);
+  const visibleStats = enabledStats.slice(0, getVisibleStatLimit(width, height, enabledStats.length, compact));
+  const compactKey = String(compact) as keyof typeof rootClassByCompact;
+  const gridCols = getGridCols(width, visibleStats.length, compact);
+  const iconSize = getIconSize(width, compact);
 
   return (
     <div className={`${classes.root} ${rootClassByCompact[compactKey]}`}>
diff --git a/packages/widgets/src/audio-stats/audio-stats-shared.spec.ts b/packages/widgets/src/audio-stats/audio-stats-shared.spec.ts
index 406562f66..c4484ac12 100644
--- a/packages/widgets/src/audio-stats/audio-stats-shared.spec.ts
+++ b/packages/widgets/src/audio-stats/audio-stats-shared.spec.ts
@@ -2,7 +2,7 @@ import { describe, expect, test } from "vitest";
 
 import type { AudiobookshelfDashboardData, NavidromeDashboardData } from "@homarr/integrations/types";
 
-import { getGridCols, getIconSize, getVisibleStats } from "./shared";
+import { getGridCols, getIconSize, getVisibleStatLimit, getVisibleStats, prioritizeVisibleStats } from "./shared";
 
 describe("getGridCols", () => {
   test("caps columns to visible stat count", () => {
@@ -37,6 +37,17 @@ describe("getIconSize", () => {
   });
 });
 
+describe("getVisibleStatLimit", () => {
+  test("keeps compact metrics legible when height is constrained", () => {
+    expect(getVisibleStatLimit(100, 80, 5, true)).toBe(1);
+    expect(getVisibleStatLimit(180, 50, 5, true)).toBe(3);
+  });
+
+  test("preserves every configured metric outside compact mode", () => {
+    expect(getVisibleStatLimit(100, 80, 5, false)).toBe(5);
+  });
+});
+
 describe("getVisibleStats", () => {
   const navidromeStats: NavidromeDashboardData = {
     artistCount: 100,
@@ -91,3 +102,21 @@ describe("getVisibleStats", () => {
     expect(typeof result[0]?.value).toBe("string");
   });
 });
+
+describe("prioritizeVisibleStats", () => {
+  test("puts an active session first only on compact surfaces", () => {
+    const stats = getVisibleStats(
+      "audiobookshelf",
+      { showLibraryCount: true, showActiveSessions: true },
+      {
+        libraryCount: 3,
+        totalAudiobooks: 150,
+        totalPodcasts: 20,
+        totalListeningTimeSeconds: 86400,
+        activeSessions: 2,
+      },
+    );
+    expect(prioritizeVisibleStats(stats, true)[0]?.statKey).toBe("activeSessions");
+    expect(prioritizeVisibleStats(stats, false)[0]?.statKey).toBe("libraryCount");
+  });
+});
diff --git a/packages/widgets/src/audio-stats/component.tsx b/packages/widgets/src/audio-stats/component.tsx
index 9e410f527..16ff58069 100644
--- a/packages/widgets/src/audio-stats/component.tsx
+++ b/packages/widgets/src/audio-stats/component.tsx
@@ -1,17 +1,120 @@
 "use client";
 
+import { Badge, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+import { getQueryKey } from "@trpc/react-query";
+
 import { clientApi } from "@homarr/api/client";
+import { formatBytes, formatDuration } from "@homarr/common";
+import type { AudiobookshelfDashboardData } from "@homarr/integrations/types";
 
 import { WidgetEmptyState } from "../common/empty-state";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../definition";
+import { useWidgetRuntimeQueries } from "../runtime-hooks";
 import { AudioStatsContent } from "./audio-stats-content";
 
-export default function AudioStatsWidget({ integrationIds, options, width }: WidgetComponentProps<"audioStats">) {
-  const { data: response } = clientApi.widget.audioStats.getStats.useQuery({
-    integrationId: integrationIds[0] ?? "",
-  });
+export default function AudioStatsWidget({
+  integrationIds,
+  options,
+  width,
+  height,
+  displayMode = "compact",
+  widgetRuntimeRef,
+}: WidgetComponentProps<"audioStats">) {
+  const statsInput = { integrationId: integrationIds[0] ?? "" };
+  const { data: response, error: statsError } = clientApi.widget.audioStats.getStats.useQuery(statsInput);
+  const streamsInput = { integrationIds: [statsInput.integrationId], showOnlyPlaying: true };
+  const streamsEnabled = displayMode === "advanced" && response?.kind === "navidrome";
+  const { data: streamResults, error: streamsError } = clientApi.widget.mediaServer.getCurrentStreams.useQuery(
+    streamsInput,
+    { enabled: streamsEnabled },
+  );
+  useWidgetRuntimeQueries(widgetRuntimeRef, [
+    getQueryKey(clientApi.widget.audioStats.getStats, statsInput, "query"),
+    ...(streamsEnabled ? [getQueryKey(clientApi.widget.mediaServer.getCurrentStreams, streamsInput, "query")] : []),
+  ]);
 
+  if (statsError && response === undefined) throw statsError;
+  if (streamsEnabled && streamsError && streamResults === undefined) throw streamsError;
+  const currentStreams = streamResults ?? [];
   if (!response) return <WidgetEmptyState />;
 
-  return <AudioStatsContent backend={response.kind} stats={response.data} options={options} width={width} />;
+  const summary = (
+    <AudioStatsContent
+      backend={response.kind}
+      stats={response.data}
+      options={{ ...options, compactMode: displayMode === "compact" && (options.compactMode || height < 160) }}
+      width={width}
+      height={height}
+    />
+  );
+  if (displayMode === "compact") return summary;
+
+  const sessions = currentStreams.flatMap((result) =>
+    result.sessions.map((session) => ({ integrationId: result.integrationId, session })),
+  );
+  const audiobookStats = response.kind === "audiobookshelf" ? (response.data as AudiobookshelfDashboardData) : null;
+  const advancedGridColumns = width >= 760 ? 2 : 1;
+  const hasStreamErrors = currentStreams.some(({ error }) => Boolean(error));
+  return (
+    <Stack h="100%" gap="lg" p="md">
+      <div style={{ minHeight: 150 }}>{summary}</div>
+      {hasStreamErrors && (
+        <Group justify="flex-end">
+          <IntegrationErrorIndicator results={currentStreams} />
+        </Group>
+      )}
+      <ScrollArea style={{ flex: 1, minHeight: 0 }}>
+        {response.kind === "navidrome" ? (
+          <SimpleGrid cols={advancedGridColumns} spacing="xs">
+            {sessions.map(({ integrationId, session }) => {
+              const currentlyPlaying = session.currentlyPlaying;
+              if (!currentlyPlaying) return null;
+              return (
+                <Group key={`${integrationId}:${session.sessionId}`} justify="space-between" wrap="nowrap" p="sm">
+                  <Stack gap={0} style={{ minWidth: 0, flex: 1 }}>
+                    <Text size="sm" fw={600} truncate>
+                      {currentlyPlaying.name}
+                    </Text>
+                    <Text size="xs" c="dimmed" truncate>
+                      {currentlyPlaying.seasonName ?? currentlyPlaying.albumName ?? session.user?.username ?? "—"}
+                    </Text>
+                  </Stack>
+                  <Badge
+                    variant="light"
+                    maw="40%"
+                    h="auto"
+                    py={4}
+                    style={{ flexShrink: 0 }}
+                    styles={{ label: { whiteSpace: "normal", overflowWrap: "anywhere", lineHeight: 1.2 } }}
+                  >
+                    {session.sessionName}
+                  </Badge>
+                </Group>
+              );
+            })}
+          </SimpleGrid>
+        ) : (
+          <SimpleGrid cols={advancedGridColumns} spacing="xs">
+            {(audiobookStats?.libraries ?? []).map((library) => (
+              <Stack key={library.id} gap={2} p="sm">
+                <Group justify="space-between" wrap="nowrap">
+                  <Text size="sm" fw={600} truncate>
+                    {library.name}
+                  </Text>
+                  <Badge size="xs" variant="light">
+                    {library.totalItems}
+                  </Badge>
+                </Group>
+                <Text size="xs" c="dimmed">
+                  {library.totalDurationSeconds === null ? "—" : formatDuration(library.totalDurationSeconds * 1000)} ·{" "}
+                  {library.totalSizeBytes === null ? "—" : formatBytes(library.totalSizeBytes)}
+                </Text>
+              </Stack>
+            ))}
+          </SimpleGrid>
+        )}
+      </ScrollArea>
+    </Stack>
+  );
 }
diff --git a/packages/widgets/src/audio-stats/index.ts b/packages/widgets/src/audio-stats/index.ts
index ffcd2dd93..a21e70278 100644
--- a/packages/widgets/src/audio-stats/index.ts
+++ b/packages/widgets/src/audio-stats/index.ts
@@ -1,6 +1,6 @@
 import { IconHeadphones, IconServerOff } from "@tabler/icons-react";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery } from "../definition";
 import { optionsBuilder } from "../options";
 
 const hideUnlessNavidrome = {
@@ -13,6 +13,8 @@ const hideUnlessAudiobookshelf = {
 
 export const { definition, componentLoader } = createWidgetDefinition("audioStats", {
   icon: IconHeadphones,
+  queryKeys: [[["widget", "audioStats", "getStats"]], [["widget", "mediaServer", "getCurrentStreams"]]],
+  queryMatcher: matchesWidgetRuntimeQuery,
   supportedIntegrations: ["navidrome", "audiobookshelf"],
   integrationsRequired: true,
   maxIntegrations: 1,
diff --git a/packages/widgets/src/audio-stats/shared.ts b/packages/widgets/src/audio-stats/shared.ts
index d4b79c72c..15e6b8a12 100644
--- a/packages/widgets/src/audio-stats/shared.ts
+++ b/packages/widgets/src/audio-stats/shared.ts
@@ -155,6 +155,23 @@ export const getGridCols = (width: number, visibleCount: number, compact: boolea
   return Math.min(maxCols, Math.max(visibleCount, 1));
 };
 
+export const getVisibleStatLimit = (width: number, height: number, visibleCount: number, compact: boolean): number => {
+  if (!compact) return visibleCount;
+
+  const columns = getGridCols(width, visibleCount, true);
+  const rows = Math.max(1, Math.floor(Math.max(0, height - 8) / 44));
+  return Math.min(visibleCount, columns * rows);
+};
+
+export const prioritizeVisibleStats = (stats: VisibleStat[], compact: boolean): VisibleStat[] => {
+  if (!compact) return stats;
+  return stats.toSorted(
+    (left, right) =>
+      Number(right.statKey === "activeSessions" && Number(right.value) > 0) -
+      Number(left.statKey === "activeSessions" && Number(left.value) > 0),
+  );
+};
+
 const fallbackIconSize = { true: 14, false: 16 } as const;
 
 export const getIconSize = (width: number, compact: boolean): number => {
diff --git a/packages/widgets/src/bazarr/component.module.css b/packages/widgets/src/bazarr/component.module.css
index 9b5857379..a41eeb5bf 100644
--- a/packages/widgets/src/bazarr/component.module.css
+++ b/packages/widgets/src/bazarr/component.module.css
@@ -33,6 +33,16 @@
   overflow: hidden;
 }
 
+.grid[data-short] .statTile {
+  flex-direction: row;
+  gap: 3px;
+  padding: 3px 4px;
+}
+
+.grid[data-short] .statLabel {
+  text-align: left;
+}
+
 .statTileWarning {
   background-color: light-dark(var(--mantine-color-orange-0), var(--mantine-color-dark-5));
 }
diff --git a/packages/widgets/src/bazarr/component.tsx b/packages/widgets/src/bazarr/component.tsx
index 094c32ee1..4d4e9cedd 100644
--- a/packages/widgets/src/bazarr/component.tsx
+++ b/packages/widgets/src/bazarr/component.tsx
@@ -26,6 +26,7 @@ const statIcons = {
 } as const;
 
 const gridColsByWidth = [
+  { minWidth: 640, cols: 4 },
   { minWidth: 380, cols: 2 },
   { minWidth: 0, cols: 1 },
 ] as const;
@@ -36,13 +37,14 @@ const iconSizeByWidth = [
   { minWidth: 0, size: 16 },
 ] as const;
 
-export default function BazarrWidget({ integrationIds, options, width }: WidgetComponentProps<"bazarr">) {
+export default function BazarrWidget({ integrationIds, options, width, height }: WidgetComponentProps<"bazarr">) {
   const t = useScopedI18n("widget.bazarr");
-  const { data: badges } = clientApi.widget.bazarr.getBadges.useQuery(
+  const { data: badges, error } = clientApi.widget.bazarr.getBadges.useQuery(
     { integrationId: integrationIds[0] ?? "" },
     { enabled: Boolean(integrationIds[0]) },
   );
 
+  if (error && !badges) throw error;
   if (!badges) return <WidgetEmptyState />;
 
   const statValues = {
@@ -56,8 +58,8 @@ export default function BazarrWidget({ integrationIds, options, width }: WidgetC
     .filter(([optionKey]) => options[optionKey as keyof typeof options])
     .map(([, statKey]) => statKey);
 
-  const gridCols = getGridCols(width);
-  const iconSize = getIconSize(width);
+  const gridCols = getGridCols(width, height, visibleStatKeys.length);
+  const iconSize = getIconSize(Math.min(width, height));
 
   if (visibleStatKeys.length === 0) {
     return (
@@ -73,7 +75,11 @@ export default function BazarrWidget({ integrationIds, options, width }: WidgetC
 
   return (
     <div className={classes.root}>
-      <div className={classes.grid} style={{ "--stat-cols": gridCols } as CSSProperties}>
+      <div
+        className={classes.grid}
+        data-short={height < 120 || undefined}
+        style={{ "--stat-cols": gridCols } as CSSProperties}
+      >
         {visibleStatKeys.map((statKey) => {
           const Icon = statIcons[statKey];
           const value = statValues[statKey];
@@ -83,7 +89,9 @@ export default function BazarrWidget({ integrationIds, options, width }: WidgetC
             <div key={statKey} className={`${classes.statTile} ${isWarning ? classes.statTileWarning : ""}`}>
               <Icon className={classes.statIcon} size={iconSize} stroke={1.5} />
               <span className={`${classes.statValue} ${isWarning ? classes.statValueWarning : ""}`}>{value}</span>
-              <span className={classes.statLabel}>{t(statKey)}</span>
+              <span className={classes.statLabel} title={t(statKey)}>
+                {t(statKey)}
+              </span>
             </div>
           );
         })}
@@ -92,12 +100,17 @@ export default function BazarrWidget({ integrationIds, options, width }: WidgetC
   );
 }
 
-function getGridCols(width: number): number {
-  const match = gridColsByWidth.find(({ minWidth }) => width >= minWidth);
-  return match?.cols ?? 1;
+export function getGridCols(width: number, height: number, itemCount: number): number {
+  if (itemCount <= 1) return 1;
+
+  const preferredColumns = gridColsByWidth.find(({ minWidth }) => width >= minWidth)?.cols ?? 1;
+  const maxColumnsByWidth = Math.max(1, Math.floor(width / 100));
+  const maxRowsByHeight = Math.max(1, Math.floor(height / 72));
+  const columnsNeededToFit = Math.ceil(itemCount / maxRowsByHeight);
+  return Math.min(itemCount, maxColumnsByWidth, Math.max(preferredColumns, columnsNeededToFit));
 }
 
-function getIconSize(width: number): number {
+export function getIconSize(width: number): number {
   const match = iconSizeByWidth.find(({ minWidth }) => width >= minWidth);
   return match?.size ?? 16;
 }
diff --git a/packages/widgets/src/bazarr/index.ts b/packages/widgets/src/bazarr/index.ts
index f2e79f570..3a63fe4bd 100644
--- a/packages/widgets/src/bazarr/index.ts
+++ b/packages/widgets/src/bazarr/index.ts
@@ -4,9 +4,11 @@ import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("bazarr", {
+  supportsAdvancedFocus: false,
   icon: IconBadgeCc,
   supportedIntegrations: ["bazarr"],
   integrationsRequired: true,
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showMissingEpisodes: factory.switch({
diff --git a/packages/widgets/src/bazarr/layout.spec.ts b/packages/widgets/src/bazarr/layout.spec.ts
new file mode 100644
index 000000000..f5e03fba4
--- /dev/null
+++ b/packages/widgets/src/bazarr/layout.spec.ts
@@ -0,0 +1,18 @@
+import { describe, expect, test } from "vitest";
+
+import { getGridCols, getIconSize } from "./component";
+
+describe("Bazarr responsive layout", () => {
+  test("uses two columns for a short widget so all stats remain visible", () => {
+    expect(getGridCols(220, 100, 4)).toBe(2);
+  });
+
+  test("uses four columns in a wide advanced surface", () => {
+    expect(getGridCols(800, 400, 4)).toBe(4);
+  });
+
+  test("sizes icons from the constrained dimension", () => {
+    expect(getIconSize(180)).toBe(16);
+    expect(getIconSize(340)).toBe(22);
+  });
+});
diff --git a/packages/widgets/src/beszel-alerts/component.tsx b/packages/widgets/src/beszel-alerts/component.tsx
index 3f934423d..23243f35e 100644
--- a/packages/widgets/src/beszel-alerts/component.tsx
+++ b/packages/widgets/src/beszel-alerts/component.tsx
@@ -1,7 +1,20 @@
 "use client";
 
 import { useMemo } from "react";
-import { Badge, Box, Center, Divider, Group, Loader, ScrollArea, Stack, Text, ThemeIcon } from "@mantine/core";
+import {
+  Badge,
+  Box,
+  Center,
+  Divider,
+  Group,
+  Loader,
+  ScrollArea,
+  Stack,
+  Text,
+  ThemeIcon,
+  Tooltip,
+  VisuallyHidden,
+} from "@mantine/core";
 import { IconBellOff, IconCircleCheck, IconFlame, IconHistory } from "@tabler/icons-react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
@@ -12,7 +25,8 @@ import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
-import { BeszelIntegrationErrorIndicator } from "../beszel/_shared/error-indicator";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
+import { getUsableWidgetQueryData } from "../common/query-state";
 
 const alertIconMap: Record<string, LucideIcon> = {
   CPU: Cpu,
@@ -35,13 +49,16 @@ export default function BeszelAlertsWidget({
   options,
   integrationIds,
   isEditMode,
+  height,
 }: WidgetComponentProps<"beszelAlerts">) {
   const t = useScopedI18n("widget.beszelAlerts");
   const alertsInput = useMemo(
     () => ({ integrationIds, includeHistory: options.showHistory, maxHistoryItems: options.maxHistoryItems }),
     [integrationIds, options.showHistory, options.maxHistoryItems],
   );
-  const { data: results = [], error: alertsError, isPending } = clientApi.widget.beszel.getAlerts.useQuery(alertsInput);
+  const alertsQuery = clientApi.widget.beszel.getAlerts.useQuery(alertsInput);
+  const results = getUsableWidgetQueryData(alertsQuery) ?? [];
+  const { isPending } = alertsQuery;
 
   const systemNameMap = useMemo(() => {
     const map: Record<string, string> = {};
@@ -67,8 +84,9 @@ export default function BeszelAlertsWidget({
 
   const triggeredAlerts = alerts.filter((a) => a.triggered);
   const okAlerts = alerts.filter((a) => !a.triggered);
-
-  if (alertsError) throw alertsError;
+  const showOkAlerts = triggeredAlerts.length === 0 || height >= 260;
+  const showHistory = options.showHistory && height >= 360;
+  const showAlertDescriptions = height >= 190;
 
   if (isPending) {
     return (
@@ -81,7 +99,7 @@ export default function BeszelAlertsWidget({
   return (
     <Box h="100%" pos="relative">
       <Box pos="absolute" top={4} right={8} style={{ zIndex: 1 }}>
-        <BeszelIntegrationErrorIndicator results={results} />
+        <IntegrationErrorIndicator results={results} />
       </Box>
       <ScrollArea h="100%" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
         <Stack gap="sm" p="sm">
@@ -100,7 +118,7 @@ export default function BeszelAlertsWidget({
             <Stack gap={6}>
               <Group gap={6}>
                 <IconFlame size={14} color="var(--mantine-color-red-6)" />
-                <Text size="xs" fw={600} tt="uppercase" c="red">
+                <Text size="xs" fw={600} c="red">
                   {t("status.triggered")} ({triggeredAlerts.length})
                 </Text>
               </Group>
@@ -112,18 +130,19 @@ export default function BeszelAlertsWidget({
                   min={alert.min}
                   systemName={systemNameMap[alert.system] ?? alert.system}
                   triggered
+                  showDescription={showAlertDescriptions}
                 />
               ))}
             </Stack>
           )}
 
-          {triggeredAlerts.length > 0 && okAlerts.length > 0 && <Divider />}
+          {triggeredAlerts.length > 0 && showOkAlerts && okAlerts.length > 0 && <Divider />}
 
-          {okAlerts.length > 0 && (
+          {showOkAlerts && okAlerts.length > 0 && (
             <Stack gap={6}>
               <Group gap={6}>
                 <IconCircleCheck size={14} color="var(--mantine-color-green-6)" />
-                <Text size="xs" fw={600} tt="uppercase" c="dimmed">
+                <Text size="xs" fw={600} c="dimmed">
                   {t("status.ok")} ({okAlerts.length})
                 </Text>
               </Group>
@@ -135,18 +154,19 @@ export default function BeszelAlertsWidget({
                   min={alert.min}
                   systemName={systemNameMap[alert.system] ?? alert.system}
                   triggered={false}
+                  showDescription={showAlertDescriptions}
                 />
               ))}
             </Stack>
           )}
 
-          {options.showHistory && history.length > 0 && (
+          {showHistory && history.length > 0 && (
             <>
               <Divider />
               <Stack gap={6}>
                 <Group gap={6}>
                   <IconHistory size={14} opacity={0.5} />
-                  <Text size="xs" fw={600} tt="uppercase" c="dimmed">
+                  <Text size="xs" fw={600} c="dimmed">
                     {t("history")}
                   </Text>
                 </Group>
@@ -199,6 +219,7 @@ interface AlertRowProps {
   min: number;
   systemName: string;
   triggered: boolean;
+  showDescription: boolean;
 }
 
 const unitSuffixMap: Record<string, string> = {
@@ -222,38 +243,43 @@ function formatAlertDescription(name: string, value: number, min: number): strin
   return `exceeds ${value}${suffix} over ${min} min`;
 }
 
-function AlertRow({ name, value, min, systemName, triggered }: AlertRowProps) {
+function AlertRow({ name, value, min, systemName, triggered, showDescription }: AlertRowProps) {
   const Icon = alertIconMap[name] ?? Server;
+  const description = formatAlertDescription(name, value, min);
   return (
-    <Group
-      wrap="nowrap"
-      gap="xs"
-      py={4}
-      pr={8}
-      pl={12}
-      style={{
-        borderRadius: "var(--mantine-radius-sm)",
-        borderLeft: `3px solid var(--mantine-color-${triggered ? "red" : "green"}-6)`,
-        backgroundColor: triggered ? "var(--mantine-color-red-light)" : "var(--mantine-color-default-hover)",
-      }}
-    >
-      <Icon size={14} opacity={0.7} style={{ flexShrink: 0 }} />
-      <Stack gap={0} style={{ flex: 1, minWidth: 0 }}>
-        <Group gap={6} wrap="nowrap">
-          <Text size="xs" fw={600} truncate>
-            {systemName}
-          </Text>
-          <Text size="xs" c="dimmed">
-            ·
-          </Text>
-          <Text size="xs" c="dimmed" style={{ whiteSpace: "nowrap" }}>
-            {name}
-          </Text>
-        </Group>
-        <Text size="xs" c="dimmed" truncate>
-          {formatAlertDescription(name, value, min)}
-        </Text>
-      </Stack>
-    </Group>
+    <Tooltip label={description} disabled={showDescription} withArrow>
+      <Group
+        wrap="nowrap"
+        gap="xs"
+        py={showDescription ? 4 : 2}
+        px={8}
+        style={{
+          borderRadius: "var(--mantine-radius-sm)",
+          border: `1px solid var(--mantine-color-${triggered ? "red" : "gray"}-4)`,
+          backgroundColor: triggered ? "var(--mantine-color-red-light)" : "var(--mantine-color-default-hover)",
+        }}
+      >
+        <Icon size={14} opacity={0.7} style={{ flexShrink: 0 }} />
+        <Stack gap={0} style={{ flex: 1, minWidth: 0 }}>
+          <Group gap={6} wrap="nowrap">
+            <Text size="xs" fw={600} truncate>
+              {systemName}
+            </Text>
+            <Text size="xs" c="dimmed">
+              ·
+            </Text>
+            <Text size="xs" c="dimmed" style={{ whiteSpace: "nowrap" }}>
+              {name}
+            </Text>
+          </Group>
+          {showDescription && (
+            <Text size="xs" c="dimmed" truncate>
+              {description}
+            </Text>
+          )}
+          {!showDescription && <VisuallyHidden>{description}</VisuallyHidden>}
+        </Stack>
+      </Group>
+    </Tooltip>
   );
 }
diff --git a/packages/widgets/src/beszel-alerts/index.ts b/packages/widgets/src/beszel-alerts/index.ts
index 5e3799a90..db1e791b2 100644
--- a/packages/widgets/src/beszel-alerts/index.ts
+++ b/packages/widgets/src/beszel-alerts/index.ts
@@ -1,11 +1,19 @@
 import { IconBell, IconServerOff } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("beszelAlerts", {
   icon: IconBell,
+  supportsAdvancedFocus: false,
+  queryKey: [["widget", "beszel", "getAlerts"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      integrationIds: scope.integrationIds,
+      includeHistory: scope.options.showHistory,
+      maxHistoryItems: scope.options.maxHistoryItems,
+    }),
   supportedIntegrations: ["beszel", "mock"],
   integrationsRequired: true,
   createOptions() {
diff --git a/packages/widgets/src/beszel-system-grid/component.module.css b/packages/widgets/src/beszel-system-grid/component.module.css
index f70cde0e9..94c951dca 100644
--- a/packages/widgets/src/beszel-system-grid/component.module.css
+++ b/packages/widgets/src/beszel-system-grid/component.module.css
@@ -1,7 +1,20 @@
 .clickableCard {
   transition: background-color 150ms;
+  cursor: pointer;
 }
 
-.clickableCard:hover {
+.clickableCard:hover,
+.clickableCard:focus-visible {
   background-color: color-mix(in srgb, var(--mantine-color-default-hover) 40%, transparent) !important;
 }
+
+.clickableCard:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: -2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .clickableCard {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/beszel-system-grid/component.tsx b/packages/widgets/src/beszel-system-grid/component.tsx
index dd2f56c54..66f32dc35 100644
--- a/packages/widgets/src/beszel-system-grid/component.tsx
+++ b/packages/widgets/src/beszel-system-grid/component.tsx
@@ -36,7 +36,8 @@ import {
   getProgressTrackSize,
 } from "../beszel/_shared/format";
 import { useBeszelFilteredSystems } from "../beszel/_shared/hooks";
-import { BeszelIntegrationErrorIndicator } from "../beszel/_shared/error-indicator";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { BeszelSystemStatsModal } from "../beszel/_shared/system-stats-modal";
 import { DiskUsage } from "../beszel/_shared/disk-usage";
 
@@ -330,10 +331,15 @@ const metricRenderers = [
 ] as const;
 
 const SystemCard = ({ system, options, t, size, maxMetrics, itemRadius, onClick }: SystemCardProps) => {
-  const visibleMetrics = metricRenderers.filter((m) => m.visible(system, options)).slice(0, maxMetrics);
+  const enabledMetrics = metricRenderers.filter((metric) => metric.visible(system, options));
+  const visibleMetrics = enabledMetrics.slice(0, maxMetrics);
+  const hiddenMetricCount = enabledMetrics.length - visibleMetrics.length;
 
   return (
     <Card
+      component="button"
+      type="button"
+      disabled={!onClick}
       padding={size.cardPadding}
       radius={itemRadius}
       bg="transparent"
@@ -345,7 +351,10 @@ const SystemCard = ({ system, options, t, size, maxMetrics, itemRadius, onClick
         display: "flex",
         flexDirection: "column" as const,
         border: "0.0625rem solid var(--border-color)",
-        cursor: onClick ? "pointer" : undefined,
+        color: "inherit",
+        font: "inherit",
+        textAlign: "left",
+        width: "100%",
       }}
     >
       <Group gap="xs" mb={2}>
@@ -362,6 +371,11 @@ const SystemCard = ({ system, options, t, size, maxMetrics, itemRadius, onClick
       <Stack gap={0} style={{ flex: 1 }} justify="space-evenly">
         {visibleMetrics.map((m) => m.render(system, t, size))}
       </Stack>
+      {hiddenMetricCount > 0 && (
+        <Text size="10px" c="dimmed" ta="right">
+          +{hiddenMetricCount}
+        </Text>
+      )}
     </Card>
   );
 };
@@ -377,16 +391,12 @@ export default function BeszelSystemGridWidget({
   const board = useRequiredBoard();
   const { openModal } = useModalAction(BeszelSystemStatsModal);
 
-  const {
-    data: results = [],
-    error: systemsError,
-    isPending,
-  } = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
+  const systemsQuery = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
+  const results = getUsableWidgetQueryData(systemsQuery) ?? [];
+  const { isPending } = systemsQuery;
 
   const filteredSystems = useBeszelFilteredSystems(results, options.statusFilter);
 
-  if (systemsError) throw systemsError;
-
   if (isPending) {
     return (
       <Center h="100%">
@@ -398,7 +408,7 @@ export default function BeszelSystemGridWidget({
   if (filteredSystems.length === 0) {
     return (
       <Box h="100%" pos="relative" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
-        <BeszelIntegrationErrorIndicator results={results} />
+        <IntegrationErrorIndicator results={results} />
         <Center h="100%">
           <Stack align="center" gap="xs">
             <IconServerOff size={28} opacity={0.5} />
@@ -414,21 +424,22 @@ export default function BeszelSystemGridWidget({
   const cols = getColCount(width, height, filteredSystems.length);
   const rows = Math.ceil(filteredSystems.length / cols) || 1;
   const rawCellHeight = height / rows;
-  const scrollEnabled = rawCellHeight < MIN_CELL_HEIGHT;
-  const effectiveCellHeight = scrollEnabled ? MIN_CELL_HEIGHT : rawCellHeight;
+  const minimumCellHeight = MIN_CELL_HEIGHT;
+  const scrollEnabled = rawCellHeight < minimumCellHeight;
+  const effectiveCellHeight = scrollEnabled ? minimumCellHeight : rawCellHeight;
   const cellWidth = width / cols;
   const size = getSizeConfig(cellWidth, effectiveCellHeight);
   const maxMetrics = getMaxVisibleMetrics(effectiveCellHeight, size);
 
   return (
     <Box h="100%" pos="relative" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
-      <BeszelIntegrationErrorIndicator results={results} />
+      <IntegrationErrorIndicator results={results} />
       <Box
         h="100%"
         style={{
           display: "grid",
           gridTemplateColumns: `repeat(${cols}, 1fr)`,
-          gridTemplateRows: scrollEnabled ? `repeat(${rows}, ${MIN_CELL_HEIGHT}px)` : `repeat(${rows}, 1fr)`,
+          gridTemplateRows: scrollEnabled ? `repeat(${rows}, ${minimumCellHeight}px)` : `repeat(${rows}, 1fr)`,
           gap: size.gap,
           overflow: scrollEnabled ? "auto" : "hidden",
         }}
diff --git a/packages/widgets/src/beszel-system-grid/index.ts b/packages/widgets/src/beszel-system-grid/index.ts
index 69dc7e2ba..b3ef14806 100644
--- a/packages/widgets/src/beszel-system-grid/index.ts
+++ b/packages/widgets/src/beszel-system-grid/index.ts
@@ -6,7 +6,8 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemGrid", {
   icon: IconLayoutGrid,
-  queryKey: [["widget", "beszel"]],
+  supportsAdvancedFocus: false,
+  queryKey: [["widget", "beszel", "getSystems"]],
   supportedIntegrations: ["beszel", "mock"],
   integrationsRequired: true,
   createOptions() {
diff --git a/packages/widgets/src/beszel-system-stats/component.module.css b/packages/widgets/src/beszel-system-stats/component.module.css
index 7750108f9..9966f37be 100644
--- a/packages/widgets/src/beszel-system-stats/component.module.css
+++ b/packages/widgets/src/beszel-system-stats/component.module.css
@@ -8,7 +8,21 @@
   pointer-events: none;
 }
 
-.beszelStatsContainer:hover .beszelStatsSystemToggle {
+.beszelStatsContainer:hover .beszelStatsSystemToggle,
+.beszelStatsContainer:focus-within .beszelStatsSystemToggle {
   opacity: 1;
   pointer-events: auto;
 }
+
+@media (any-pointer: coarse) {
+  .beszelStatsSystemToggle {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .beszelStatsSystemToggle {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/beszel-system-stats/component.tsx b/packages/widgets/src/beszel-system-stats/component.tsx
index 91dcd7292..a4031e865 100644
--- a/packages/widgets/src/beszel-system-stats/component.tsx
+++ b/packages/widgets/src/beszel-system-stats/component.tsx
@@ -1,21 +1,26 @@
 "use client";
 
-import { useCallback, useMemo } from "react";
-import { Box, Button, Center, Loader, Menu, ScrollArea, Select, Stack, Text } from "@mantine/core";
+import { useCallback, useMemo, useRef } from "react";
+import { Box, Button, Center, Loader, Menu, ScrollArea, SegmentedControl, Select, Stack, Text } from "@mantine/core";
 import { IconQuestionMark, IconServer, IconServerOff } from "@tabler/icons-react";
+import { getQueryKey } from "@trpc/react-query";
 
 import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
 import { constructBoardPermissions } from "@homarr/auth/shared";
 import { useOptionalBoard } from "@homarr/boards/context";
+import { showErrorNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import classes from "./component.module.css";
 
 import type { WidgetComponentProps } from "../definition";
+import { useWidgetRuntimeQueries } from "../runtime-hooks";
 import type { BeszelTimePeriod } from "../beszel/_shared/chart";
-import { BeszelIntegrationErrorIndicator } from "../beszel/_shared/error-indicator";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { BeszelStatsView } from "../beszel/_shared/stats-view";
+import { createBeszelSystemChoices, resolveBeszelSystemChoice } from "./selection";
 
 export default function BeszelSystemStatsWidget({
   options,
@@ -25,37 +30,106 @@ export default function BeszelSystemStatsWidget({
   boardId,
   itemId,
   setOptions,
+  widgetRuntimeRef,
 }: WidgetComponentProps<"beszelSystemStats">) {
   const t = useScopedI18n("widget.beszelSystemStats");
   const board = useOptionalBoard();
   const { data: session } = useSession();
   const hasChangeAccess = board ? constructBoardPermissions(board, session).hasChangeAccess : false;
-  const { mutate: saveItemOptions } = clientApi.widget.options.saveItemOptions.useMutation();
-  const {
-    data: systemsResult = [],
-    isPending: systemsPending,
-    error: systemsError,
-  } = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
+  const selectionSavePendingRef = useRef(false);
+  const { mutate: saveItemOptions, isPending: isSelectionSavePending } =
+    clientApi.widget.options.saveItemOptions.useMutation({
+      onError: () =>
+        showErrorNotification({
+          title: t("error.selectionSaveTitle"),
+          message: t("error.selectionSaveMessage"),
+        }),
+    });
+  const systemsQuery = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
+  const systemsResult = getUsableWidgetQueryData(systemsQuery) ?? [];
+  const { isPending: systemsPending } = systemsQuery;
 
-  const systems = useMemo(
-    () => systemsResult.flatMap((result) => result.systems.map((system) => ({ value: system.id, label: system.name }))),
-    [systemsResult],
+  const systems = useMemo(() => createBeszelSystemChoices(systemsResult), [systemsResult]);
+  const selectedSystem = resolveBeszelSystemChoice(systems, options.systemId);
+  const selectedValue = selectedSystem?.value ?? "";
+  const selectedLabel = selectedSystem?.label;
+  const systemExists = selectedSystem !== undefined;
+  const includeDocker = options.showDockerCpu || options.showDockerMemory || options.showDockerNetwork;
+  const periodOptions = [
+    { value: "1m", label: t("period.live") },
+    { value: "1h", label: t("period.oneHour") },
+    { value: "12h", label: t("period.twelveHours") },
+    { value: "24h", label: t("period.oneDay") },
+    { value: "1w", label: t("period.oneWeek") },
+    { value: "30d", label: t("period.thirtyDays") },
+  ];
+  useWidgetRuntimeQueries(
+    widgetRuntimeRef,
+    selectedSystem && options.timePeriod !== "1m"
+      ? [
+          getQueryKey(
+            clientApi.widget.beszel.getSystemStats,
+            {
+              integrationIds: [selectedSystem.integrationId],
+              systemId: selectedSystem.systemId,
+              timePeriod: options.timePeriod as BeszelTimePeriod,
+              includeDocker,
+            },
+            "query",
+          ),
+        ]
+      : [],
   );
-  const selectedSystem = options.systemId || systems[0]?.value || "";
-  const selectedLabel = systems.find((system) => system.value === selectedSystem)?.label;
-  const systemExists = systems.some((system) => system.value === selectedSystem);
 
   const handleSelectSystem = useCallback(
     (value: string) => {
+      if (selectionSavePendingRef.current) return;
+
+      const previousValue = options.systemId;
       setOptions({ newOptions: { systemId: value } });
       if (hasChangeAccess && boardId && itemId) {
-        saveItemOptions({ boardId, itemId, newOptions: { systemId: value } });
+        selectionSavePendingRef.current = true;
+        saveItemOptions(
+          { boardId, itemId, newOptions: { systemId: value } },
+          {
+            onError: () => {
+              setOptions({ newOptions: { systemId: previousValue } });
+            },
+            onSettled: () => {
+              selectionSavePendingRef.current = false;
+            },
+          },
+        );
       }
     },
-    [setOptions, hasChangeAccess, boardId, itemId, saveItemOptions],
+    [boardId, hasChangeAccess, itemId, options.systemId, saveItemOptions, setOptions],
+  );
+
+  const handleTimePeriod = useCallback(
+    (value: string) => {
+      if (selectionSavePendingRef.current) return;
+
+      const timePeriod = value as BeszelTimePeriod;
+      const previousValue = options.timePeriod;
+      setOptions({ newOptions: { timePeriod } });
+      if (hasChangeAccess && boardId && itemId) {
+        selectionSavePendingRef.current = true;
+        saveItemOptions(
+          { boardId, itemId, newOptions: { timePeriod } },
+          {
+            onError: () => {
+              setOptions({ newOptions: { timePeriod: previousValue } });
+            },
+            onSettled: () => {
+              selectionSavePendingRef.current = false;
+            },
+          },
+        );
+      }
+    },
+    [boardId, hasChangeAccess, itemId, options.timePeriod, saveItemOptions, setOptions],
   );
 
-  if (systemsError) throw systemsError;
   if (systemsPending)
     return (
       <Center h="100%">
@@ -66,7 +140,7 @@ export default function BeszelSystemStatsWidget({
   if (systems.length === 0) {
     return (
       <Box h="100%" pos="relative">
-        <BeszelIntegrationErrorIndicator results={systemsResult} />
+        <IntegrationErrorIndicator results={systemsResult} />
         <Center h="100%">
           <Stack align="center" gap="xs">
             <IconServerOff size={28} opacity={0.5} />
@@ -90,8 +164,9 @@ export default function BeszelSystemStatsWidget({
           <Select
             size="xs"
             data={systems}
-            value={selectedSystem}
+            value={selectedValue}
             placeholder={t("selectSystem")}
+            disabled={isSelectionSavePending}
             onChange={(value) => value && handleSelectSystem(value)}
           />
         </Stack>
@@ -102,7 +177,7 @@ export default function BeszelSystemStatsWidget({
   return (
     <Box h="100%" pos="relative">
       <Box pos="absolute" top={4} right={8} style={{ zIndex: 1 }}>
-        <BeszelIntegrationErrorIndicator results={systemsResult} />
+        <IntegrationErrorIndicator results={systemsResult} />
       </Box>
       <ScrollArea
         h="100%"
@@ -118,6 +193,7 @@ export default function BeszelSystemStatsWidget({
                   size="compact-xs"
                   leftSection={<IconServer size={14} />}
                   className={classes.beszelStatsSystemToggle}
+                  disabled={isSelectionSavePending}
                 >
                   {selectedLabel}
                 </Button>
@@ -127,8 +203,9 @@ export default function BeszelSystemStatsWidget({
                   <Menu.Item
                     key={system.value}
                     fz="xs"
-                    fw={system.value === selectedSystem ? 600 : 400}
-                    c={system.value !== selectedSystem ? "dimmed" : undefined}
+                    fw={system.value === selectedValue ? 600 : 400}
+                    c={system.value !== selectedValue ? "dimmed" : undefined}
+                    disabled={isSelectionSavePending}
                     onClick={() => handleSelectSystem(system.value)}
                   >
                     {system.label}
@@ -137,9 +214,28 @@ export default function BeszelSystemStatsWidget({
               </Menu.Dropdown>
             </Menu>
           )}
+          {!isEditMode &&
+            (width >= 560 ? (
+              <SegmentedControl
+                size="xs"
+                fullWidth
+                value={options.timePeriod}
+                onChange={handleTimePeriod}
+                disabled={isSelectionSavePending}
+                data={periodOptions}
+              />
+            ) : (
+              <Select
+                size="xs"
+                value={options.timePeriod}
+                onChange={(value) => value && handleTimePeriod(value)}
+                disabled={isSelectionSavePending}
+                data={periodOptions}
+              />
+            ))}
           <BeszelStatsView
-            integrationIds={integrationIds}
-            systemId={selectedSystem}
+            integrationIds={selectedSystem ? [selectedSystem.integrationId] : []}
+            systemId={selectedSystem?.systemId ?? ""}
             timePeriod={options.timePeriod as BeszelTimePeriod}
             columns={width > 600 ? 2 : 1}
             visibility={{
@@ -152,7 +248,7 @@ export default function BeszelSystemStatsWidget({
               dockerMemory: options.showDockerMemory,
               dockerNetwork: options.showDockerNetwork,
             }}
-            onSwitchToHistorical={() => setOptions({ newOptions: { timePeriod: "1h" } })}
+            onSwitchToHistorical={() => handleTimePeriod("1h")}
           />
         </Stack>
       </ScrollArea>
diff --git a/packages/widgets/src/beszel-system-stats/index.ts b/packages/widgets/src/beszel-system-stats/index.ts
index af2907b25..d3df5734b 100644
--- a/packages/widgets/src/beszel-system-stats/index.ts
+++ b/packages/widgets/src/beszel-system-stats/index.ts
@@ -2,8 +2,9 @@ import { IconChartAreaLine, IconServerOff } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
+import { createBeszelSystemChoices, resolveStoredBeszelQuerySelection } from "./selection";
 
 const timePeriodOptions = [
   { value: "1m", label: "Live" },
@@ -15,8 +16,31 @@ const timePeriodOptions = [
 ];
 
 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemStats", {
+  supportsAdvancedFocus: false,
   icon: IconChartAreaLine,
-  queryKey: [["widget", "beszel"]],
+  queryKeys: [[["widget", "beszel", "getSystems"]], [["widget", "beszel", "getSystemStats"]]],
+  queryMatcher(query, scope) {
+    if (query.path.at(-1) === "getSystems") {
+      return widgetQueryInputMatches(query.input, { integrationIds: scope.integrationIds });
+    }
+
+    const hasRuntimeStatsQuery = scope.runtimeQueries.some(({ path }) => path.at(-1) === "getSystemStats");
+    if (hasRuntimeStatsQuery) return matchesWidgetRuntimeQuery(query, scope);
+
+    const selection = resolveStoredBeszelQuerySelection(String(scope.options.systemId ?? ""), scope.integrationIds);
+    if (!selection) return false;
+    const dockerEnabled = ["showDockerCpu", "showDockerMemory", "showDockerNetwork"].some(
+      (key) => scope.options[key] === true,
+    );
+    const expected = {
+      ...selection,
+      timePeriod: scope.options.timePeriod,
+    };
+    return (
+      widgetQueryInputMatches(query.input, { ...expected, includeDocker: false }) ||
+      (dockerEnabled && widgetQueryInputMatches(query.input, { ...expected, includeDocker: true }))
+    );
+  },
   supportedIntegrations: ["beszel", "mock"],
   integrationsRequired: true,
   createOptions() {
@@ -30,7 +54,7 @@ export const { definition, componentLoader } = createWidgetDefinition("beszelSys
             isPending,
             isError,
           } = clientApi.widget.beszel.getSystems.useQuery({ integrationIds }, { enabled: integrationIds.length > 0 });
-          const selectData = data.flatMap((r) => r.systems.map((s) => ({ value: s.id, label: s.name })));
+          const selectData = createBeszelSystemChoices(data).map(({ value, label }) => ({ value, label }));
           return { data: selectData, isPending, isError };
         },
       }),
diff --git a/packages/widgets/src/beszel-system-stats/selection.spec.ts b/packages/widgets/src/beszel-system-stats/selection.spec.ts
new file mode 100644
index 000000000..cc237e947
--- /dev/null
+++ b/packages/widgets/src/beszel-system-stats/selection.spec.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest";
+
+import { createBeszelSystemChoices, resolveBeszelSystemChoice, resolveStoredBeszelQuerySelection } from "./selection";
+
+const choices = createBeszelSystemChoices([
+  { integrationId: "one", integrationName: "Primary", systems: [{ id: "same", name: "Host A" }] },
+  { integrationId: "two", integrationName: "Backup", systems: [{ id: "same", name: "Host B" }] },
+]);
+
+describe("Beszel system selection", () => {
+  it("uses a composite integration and system identity", () => {
+    expect(choices.map((choice) => choice.value)).toEqual(["one:same", "two:same"]);
+    expect(resolveBeszelSystemChoice(choices, "two:same")?.integrationId).toBe("two");
+  });
+
+  it("keeps unique legacy plain system ids working", () => {
+    expect(resolveBeszelSystemChoice(choices.slice(0, 1), "same")?.integrationId).toBe("one");
+  });
+
+  it("defaults an empty selection to the first system", () => {
+    expect(resolveBeszelSystemChoice(choices, "")?.integrationId).toBe("one");
+  });
+
+  it("does not guess when a legacy plain system id is ambiguous", () => {
+    expect(resolveBeszelSystemChoice(choices, "same")).toBeUndefined();
+  });
+
+  it("does not silently replace an unresolved stored system", () => {
+    expect(resolveBeszelSystemChoice(choices, "missing")).toBeUndefined();
+  });
+
+  it("derives the queried integration and system from a composite selection", () => {
+    expect(resolveStoredBeszelQuerySelection("two:same", ["one", "two"])).toEqual({
+      integrationIds: ["two"],
+      systemId: "same",
+    });
+  });
+
+  it("supports a legacy plain system id only when the integration is unambiguous", () => {
+    expect(resolveStoredBeszelQuerySelection("same", ["one"])).toEqual({
+      integrationIds: ["one"],
+      systemId: "same",
+    });
+    expect(resolveStoredBeszelQuerySelection("same", ["one", "two"])).toBeNull();
+  });
+});
diff --git a/packages/widgets/src/beszel-system-stats/selection.ts b/packages/widgets/src/beszel-system-stats/selection.ts
new file mode 100644
index 000000000..d48ffa45e
--- /dev/null
+++ b/packages/widgets/src/beszel-system-stats/selection.ts
@@ -0,0 +1,48 @@
+export interface BeszelSystemChoice {
+  value: string;
+  label: string;
+  integrationId: string;
+  systemId: string;
+}
+
+interface BeszelSystemsResult {
+  integrationId: string;
+  integrationName: string;
+  systems: { id: string; name: string }[];
+}
+
+export function createBeszelSystemChoices(results: BeszelSystemsResult[]): BeszelSystemChoice[] {
+  const includeIntegrationName = results.length > 1;
+  return results.flatMap((result) =>
+    result.systems.map((system) => ({
+      value: `${result.integrationId}:${system.id}`,
+      label: includeIntegrationName ? `${result.integrationName} · ${system.name}` : system.name,
+      integrationId: result.integrationId,
+      systemId: system.id,
+    })),
+  );
+}
+
+export function resolveBeszelSystemChoice(choices: BeszelSystemChoice[], storedValue: string) {
+  const exactMatch = choices.find((choice) => choice.value === storedValue);
+  if (exactMatch) return exactMatch;
+  if (storedValue === "") return choices[0];
+
+  const legacyMatches = choices.filter((choice) => choice.systemId === storedValue);
+  return legacyMatches.length === 1 ? legacyMatches[0] : undefined;
+}
+
+export function resolveStoredBeszelQuerySelection(storedValue: string, integrationIds: readonly string[]) {
+  for (const integrationId of integrationIds) {
+    const prefix = `${integrationId}:`;
+    if (storedValue.startsWith(prefix)) {
+      return { integrationIds: [integrationId], systemId: storedValue.slice(prefix.length) };
+    }
+  }
+
+  if (storedValue !== "" && integrationIds.length === 1) {
+    return { integrationIds: [integrationIds[0] as string], systemId: storedValue };
+  }
+
+  return null;
+}
diff --git a/packages/widgets/src/beszel-system-table/component.tsx b/packages/widgets/src/beszel-system-table/component.tsx
index 8286335a6..44c03ec70 100644
--- a/packages/widgets/src/beszel-system-table/component.tsx
+++ b/packages/widgets/src/beszel-system-table/component.tsx
@@ -26,6 +26,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { HomarrDataTable } from "../common/homarr-data-table";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { usePersistedTableLayout, useTableLayoutPersistence } from "../common/use-persisted-table-layout";
 import type { BeszelSystemRow } from "../beszel/_shared/types";
 import { loadAvgColor, statusColorMap, thresholdColor } from "../beszel/_shared/colors";
@@ -38,7 +39,7 @@ import {
   getProgressTrackSize,
 } from "../beszel/_shared/format";
 import { useBeszelFilteredSystems } from "../beszel/_shared/hooks";
-import { BeszelIntegrationErrorIndicator } from "../beszel/_shared/error-indicator";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import { BeszelSystemStatsModal } from "../beszel/_shared/system-stats-modal";
 import { DiskUsage } from "../beszel/_shared/disk-usage";
 
@@ -102,12 +103,27 @@ export default function BeszelSystemTableWidget({
   const board = useOptionalBoard();
   const { data: session } = useSession();
   const hasChangeAccess = board ? constructBoardPermissions(board, session).hasChangeAccess : false;
-  const {
-    data: results = [],
-    error: systemsError,
-    isPending,
-  } = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
+  const systemsQuery = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
+  const results = getUsableWidgetQueryData(systemsQuery) ?? [];
+  const { isPending } = systemsQuery;
   const size = useMemo(() => getSizeConfig(width), [width]);
+  const visibleMetricKeys = useMemo(() => {
+    const enabled = [
+      "showCpu",
+      "showMemory",
+      "showDisk",
+      "showGpu",
+      "showLoadAvg",
+      "showNet",
+      "showTemp",
+      "showBattery",
+      "showServices",
+      "showUptime",
+      "showAgent",
+    ].filter((key) => options[key as keyof typeof options]) as string[];
+    const budget = width < 360 ? 1 : width < 560 ? 2 : width < 760 ? 4 : enabled.length;
+    return new Set(enabled.slice(0, budget));
+  }, [options, width]);
 
   const { mutate: saveItemOptions } = clientApi.widget.options.saveItemOptions.useMutation({
     onError: () =>
@@ -185,7 +201,7 @@ export default function BeszelSystemTableWidget({
           </Group>
         ),
       },
-      options.showCpu && {
+      visibleMetricKeys.has("showCpu") && {
         accessor: "cpu",
         width: 140,
         title: (
@@ -197,7 +213,7 @@ export default function BeszelSystemTableWidget({
         sortable: true,
         render: (record) => <PercentCell value={record.cpu} />,
       },
-      options.showMemory && {
+      visibleMetricKeys.has("showMemory") && {
         accessor: "memory",
         width: 140,
         title: (
@@ -209,7 +225,7 @@ export default function BeszelSystemTableWidget({
         sortable: true,
         render: (record) => <PercentCell value={record.memory} />,
       },
-      options.showDisk && {
+      visibleMetricKeys.has("showDisk") && {
         accessor: "disk",
         width: 160,
         title: (
@@ -229,7 +245,7 @@ export default function BeszelSystemTableWidget({
           />
         ),
       },
-      options.showGpu && {
+      visibleMetricKeys.has("showGpu") && {
         accessor: "gpu",
         width: 140,
         title: (
@@ -241,7 +257,7 @@ export default function BeszelSystemTableWidget({
         sortable: true,
         render: (record) => <PercentCell value={record.gpu} />,
       },
-      options.showLoadAvg && {
+      visibleMetricKeys.has("showLoadAvg") && {
         accessor: "loadAvg",
         width: 100,
         title: (
@@ -258,7 +274,7 @@ export default function BeszelSystemTableWidget({
           </Group>
         ),
       },
-      options.showNet && {
+      visibleMetricKeys.has("showNet") && {
         accessor: "netBytes",
         width: 100,
         title: (
@@ -274,7 +290,7 @@ export default function BeszelSystemTableWidget({
           </Text>
         ),
       },
-      options.showTemp && {
+      visibleMetricKeys.has("showTemp") && {
         accessor: "temp",
         width: 80,
         title: (
@@ -286,7 +302,7 @@ export default function BeszelSystemTableWidget({
         sortable: true,
         render: (record) => <Text size={size.fontSize}>{formatTemp(record.temp, false)}</Text>,
       },
-      options.showBattery && {
+      visibleMetricKeys.has("showBattery") && {
         accessor: "battery",
         width: 70,
         title: (
@@ -297,7 +313,7 @@ export default function BeszelSystemTableWidget({
         ),
         render: (record) => <Text size={size.fontSize}>{record.battery ? `${record.battery[0]}%` : "—"}</Text>,
       },
-      options.showServices && {
+      visibleMetricKeys.has("showServices") && {
         accessor: "services",
         width: 80,
         title: (
@@ -309,7 +325,7 @@ export default function BeszelSystemTableWidget({
         sortable: true,
         render: (record) => <Text size={size.fontSize}>{record.services}</Text>,
       },
-      options.showUptime && {
+      visibleMetricKeys.has("showUptime") && {
         accessor: "uptime",
         width: 90,
         title: (
@@ -321,7 +337,7 @@ export default function BeszelSystemTableWidget({
         sortable: true,
         render: (record) => <Text size={size.fontSize}>{formatUptime(record.uptime)}</Text>,
       },
-      options.showAgent && {
+      visibleMetricKeys.has("showAgent") && {
         accessor: "agentVersion",
         width: 90,
         title: (
@@ -336,21 +352,7 @@ export default function BeszelSystemTableWidget({
     ];
 
     return cols.filter(Boolean) as DataTableColumn<SystemRowWithKey>[];
-  }, [
-    options.showAgent,
-    options.showBattery,
-    options.showCpu,
-    options.showDisk,
-    options.showGpu,
-    options.showLoadAvg,
-    options.showMemory,
-    options.showNet,
-    options.showServices,
-    options.showTemp,
-    options.showUptime,
-    size,
-    t,
-  ]);
+  }, [t, size, visibleMetricKeys]);
 
   const { effectiveColumns, storeKey } = usePersistedTableLayout({
     columns,
@@ -370,8 +372,6 @@ export default function BeszelSystemTableWidget({
     [openModal],
   );
 
-  if (systemsError) throw systemsError;
-
   if (isPending) {
     return (
       <Center h="100%">
@@ -380,10 +380,10 @@ export default function BeszelSystemTableWidget({
     );
   }
 
-  return (
+  const table = (
     <div style={{ position: "relative", height: "100%" }}>
       <div style={{ position: "absolute", top: 4, right: 8, zIndex: 1 }}>
-        <BeszelIntegrationErrorIndicator results={results} />
+        <IntegrationErrorIndicator results={results} />
       </div>
       <HomarrDataTable
         isEditMode={isEditMode}
@@ -400,4 +400,6 @@ export default function BeszelSystemTableWidget({
       />
     </div>
   );
+
+  return table;
 }
diff --git a/packages/widgets/src/beszel-system-table/index.ts b/packages/widgets/src/beszel-system-table/index.ts
index e31bbc597..4007bebc0 100644
--- a/packages/widgets/src/beszel-system-table/index.ts
+++ b/packages/widgets/src/beszel-system-table/index.ts
@@ -1,6 +1,6 @@
 import { IconServerOff, IconTable } from "@tabler/icons-react";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery, widgetQueryInputMatches } from "../definition";
 import { statusOptions } from "../beszel/_shared/options";
 import { optionsBuilder } from "../options";
 
@@ -25,7 +25,12 @@ const sortDirectionOptions = [
 
 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemTable", {
   icon: IconTable,
-  queryKey: [["widget", "beszel"]],
+  supportsAdvancedFocus: false,
+  queryKeys: [[["widget", "beszel", "getSystems"]], [["widget", "beszel", "getSystemStats"]]],
+  queryMatcher: (query, scope) =>
+    query.path.at(-1) === "getSystems"
+      ? widgetQueryInputMatches(query.input, { integrationIds: scope.integrationIds })
+      : matchesWidgetRuntimeQuery(query, scope),
   supportedIntegrations: ["beszel", "mock"],
   integrationsRequired: true,
   createOptions() {
diff --git a/packages/widgets/src/beszel/_shared/chart.tsx b/packages/widgets/src/beszel/_shared/chart.tsx
index 7ba5b66fe..73601b7b6 100644
--- a/packages/widgets/src/beszel/_shared/chart.tsx
+++ b/packages/widgets/src/beszel/_shared/chart.tsx
@@ -8,33 +8,38 @@ import dayjs from "dayjs";
 
 import type { BeszelContainerStatsRecord, BeszelSystemStatsRecord } from "@homarr/integrations/types";
 
+import { formatLocalizedDate } from "../../common/locale";
+
 export type BeszelTimePeriod = "1m" | "1h" | "12h" | "24h" | "1w" | "30d";
 
-const timeFormats: Record<BeszelTimePeriod, string> = {
-  "1m": "HH:mm:ss",
-  "1h": "HH:mm",
-  "12h": "HH:mm",
-  "24h": "HH:mm",
-  "1w": "MMM D",
-  "30d": "MMM D",
+const timeFormatOptions: Record<BeszelTimePeriod, Intl.DateTimeFormatOptions> = {
+  "1m": { hour: "numeric", minute: "2-digit", second: "2-digit" },
+  "1h": { hour: "numeric", minute: "2-digit" },
+  "12h": { hour: "numeric", minute: "2-digit" },
+  "24h": { hour: "numeric", minute: "2-digit" },
+  "1w": { month: "short", day: "numeric" },
+  "30d": { month: "short", day: "numeric" },
 };
 
 const periodDays: Partial<Record<BeszelTimePeriod, number>> = { "1w": 7, "30d": 30 };
 
-function prepareRecords<T>(records: T[], timePeriod: BeszelTimePeriod) {
-  const fmt = (timestamp: string) => dayjs(timestamp).format(timeFormats[timePeriod]);
+export const formatBeszelChartTimestamp = (timestamp: string, timePeriod: BeszelTimePeriod, locale: string): string =>
+  formatLocalizedDate(timestamp, locale, timeFormatOptions[timePeriod]);
+
+function prepareRecords<T>(records: T[], timePeriod: BeszelTimePeriod, locale: string) {
+  const fmt = (timestamp: string) => formatBeszelChartTimestamp(timestamp, timePeriod, locale);
   if (timePeriod === "1m") {
     return { fmt, ordered: records };
   }
   return { fmt, ordered: [...records].toReversed() };
 }
 
-function padTimeGrid(data: Record<string, unknown>[], timePeriod: BeszelTimePeriod) {
-  if (timePeriod === "1m") return padLiveTimeGrid(data);
+function padTimeGrid(data: Record<string, unknown>[], timePeriod: BeszelTimePeriod, locale: string) {
+  if (timePeriod === "1m") return padLiveTimeGrid(data, 60, locale);
   const days = periodDays[timePeriod];
   if (!days) return data;
 
-  const fmt = (ts: string) => dayjs(ts).format(timeFormats[timePeriod]);
+  const fmt = (timestamp: string) => formatBeszelChartTimestamp(timestamp, timePeriod, locale);
   const now = dayjs();
   const existingDays = new Set(data.map((d) => dayjs(d.rawTime as string).format("YYYY-MM-DD")));
   const result = [...data];
@@ -51,7 +56,7 @@ function padTimeGrid(data: Record<string, unknown>[], timePeriod: BeszelTimePeri
   return result.toSorted((a, b) => new Date(a.rawTime as string).getTime() - new Date(b.rawTime as string).getTime());
 }
 
-export function padLiveTimeGrid(data: Record<string, unknown>[], pointCount = 60) {
+export function padLiveTimeGrid(data: Record<string, unknown>[], pointCount = 60, locale = "en-US") {
   if (data.length === 0) return data;
 
   const end = dayjs(
@@ -76,7 +81,7 @@ export function padLiveTimeGrid(data: Record<string, unknown>[], pointCount = 60
     const timestamp = end.subtract(pointCount - index - 1, "second");
     return (
       pointsBySecond.get(timestamp.valueOf()) ?? {
-        time: timestamp.format(timeFormats["1m"]),
+        time: formatBeszelChartTimestamp(timestamp.toISOString(), "1m", locale),
         rawTime: timestamp.toISOString(),
       }
     );
@@ -162,17 +167,18 @@ export const useSystemChartData = (
   systemStats: BeszelSystemStatsRecord[] | undefined,
   mapFn: (stats: BeszelSystemStatsRecord["stats"]) => Record<string, unknown>,
   timePeriod: BeszelTimePeriod = "1h",
+  locale = "en-US",
 ) =>
   useMemo(() => {
     if (!systemStats) return [];
-    const { fmt, ordered } = prepareRecords(systemStats, timePeriod);
+    const { fmt, ordered } = prepareRecords(systemStats, timePeriod, locale);
     const mapped = ordered.map((r) => ({
       time: fmt(r.created),
       rawTime: r.created,
       ...mapFn(r.stats),
     }));
-    return padTimeGrid(mapped, timePeriod);
-  }, [systemStats, mapFn, timePeriod]);
+    return padTimeGrid(mapped, timePeriod, locale);
+  }, [systemStats, mapFn, timePeriod, locale]);
 
 export const useContainerNames = (containerStats: BeszelContainerStatsRecord[] | undefined, max = 15) => {
   const prevRef = useRef<string[]>([]);
@@ -212,10 +218,11 @@ export const useDiskChartData = (
   efsPaths: string[],
   rootSeriesName: string,
   timePeriod: BeszelTimePeriod = "1h",
+  locale = "en-US",
 ) =>
   useMemo(
-    () => buildDiskChartData(systemStats, efsPaths, rootSeriesName, timePeriod),
-    [systemStats, efsPaths, rootSeriesName, timePeriod],
+    () => buildDiskChartData(systemStats, efsPaths, rootSeriesName, timePeriod, locale),
+    [systemStats, efsPaths, rootSeriesName, timePeriod, locale],
   );
 
 export const buildDiskChartData = (
@@ -223,9 +230,10 @@ export const buildDiskChartData = (
   efsPaths: string[],
   rootSeriesName: string,
   timePeriod: BeszelTimePeriod = "1h",
+  locale = "en-US",
 ) => {
   if (!systemStats?.length) return [];
-  const { fmt, ordered } = prepareRecords(systemStats, timePeriod);
+  const { fmt, ordered } = prepareRecords(systemStats, timePeriod, locale);
   const mapped = ordered.map((record) => {
     const point: Record<string, unknown> = {
       time: fmt(record.created),
@@ -238,7 +246,7 @@ export const buildDiskChartData = (
     }
     return point;
   });
-  return padTimeGrid(mapped, timePeriod);
+  return padTimeGrid(mapped, timePeriod, locale);
 };
 
 export const useDockerChartData = (
@@ -246,12 +254,13 @@ export const useDockerChartData = (
   containerNames: string[],
   metric: "cpu" | "memory" | "network",
   timePeriod: BeszelTimePeriod = "1h",
+  locale = "en-US",
 ) =>
   useMemo(() => {
     if (!containerStats?.length) return [];
     const extract = defaultContainerExtractors[metric];
     if (!extract) return [];
-    const { fmt, ordered } = prepareRecords(containerStats, timePeriod);
+    const { fmt, ordered } = prepareRecords(containerStats, timePeriod, locale);
     const mapped = ordered.map((record) => {
       const point: Record<string, unknown> = { time: fmt(record.created), rawTime: record.created };
       const byName = new Map(record.stats.map((c) => [c.n, c]));
@@ -260,5 +269,5 @@ export const useDockerChartData = (
       }
       return point;
     });
-    return padTimeGrid(mapped, timePeriod);
-  }, [containerStats, containerNames, metric, timePeriod]);
+    return padTimeGrid(mapped, timePeriod, locale);
+  }, [containerStats, containerNames, metric, timePeriod, locale]);
diff --git a/packages/widgets/src/beszel/_shared/disk-usage.module.css b/packages/widgets/src/beszel/_shared/disk-usage.module.css
new file mode 100644
index 000000000..68cfb396e
--- /dev/null
+++ b/packages/widgets/src/beszel/_shared/disk-usage.module.css
@@ -0,0 +1,11 @@
+.target {
+  min-width: 24px;
+  min-height: 24px;
+}
+
+@media (pointer: coarse) {
+  .target {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
diff --git a/packages/widgets/src/beszel/_shared/disk-usage.tsx b/packages/widgets/src/beszel/_shared/disk-usage.tsx
index 9aa2a14ad..ce7ec95f8 100644
--- a/packages/widgets/src/beszel/_shared/disk-usage.tsx
+++ b/packages/widgets/src/beszel/_shared/disk-usage.tsx
@@ -1,8 +1,12 @@
-import { Box, Group, HoverCard, Progress, Stack, Text, UnstyledButton } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { Box, Group, Popover, Progress, Stack, Text, UnstyledButton } from "@mantine/core";
+
+import { useScopedI18n } from "@homarr/translation/client";
 
 import type { BeszelSystemRow } from "./types";
 import { thresholdColor } from "./colors";
 import { formatPercent, getProgressTrackSize } from "./format";
+import classes from "./disk-usage.module.css";
 
 interface DiskUsageProps {
   system: BeszelSystemRow;
@@ -17,33 +21,44 @@ const mountLabel = (path: string) =>
 const severityColor = (value: number) => `var(--mantine-color-${thresholdColor(value)}-6)`;
 
 export const DiskUsage = ({ system, fontSize, progressSize, valueMiw, valueGap = 6 }: DiskUsageProps) => {
+  const t = useScopedI18n("common");
+  const [opened, setOpened] = useState(false);
   const filesystems = Object.entries(system.extraFilesystems).filter(([path]) => path !== "/");
+  const filesystemUsageLabel = t("filesystemUsage", { count: filesystems.length + 1 });
   const trackSize = getProgressTrackSize(progressSize);
   const dotSize = progressSize === "xs" ? 2 : 3;
   const dotGap = 2;
 
+  useEffect(() => {
+    if (filesystems.length === 0) setOpened(false);
+  }, [filesystems.length]);
+
   return (
     <Group gap={valueGap} wrap="nowrap" style={{ flex: 1, minWidth: 0, marginLeft: "auto" }}>
       <Text size={fontSize} fw={500} w={valueMiw} ta="left" style={{ whiteSpace: "nowrap", flexShrink: 0 }}>
         {formatPercent(system.disk)}
       </Text>
-      <HoverCard
-        position="right"
-        withArrow
-        shadow="md"
-        openDelay={200}
-        closeDelay={100}
-        disabled={filesystems.length === 0}
-      >
-        <HoverCard.Target>
-          {filesystems.length > 0 ? (
+      {filesystems.length > 0 ? (
+        <Popover
+          opened={opened}
+          onChange={setOpened}
+          zIndex="var(--homarr-z-index-widget-background-tooltip)"
+          position="right"
+          withArrow
+          shadow="md"
+        >
+          <Popover.Target>
             <UnstyledButton
-              aria-label={`Show usage for ${filesystems.length + 1} filesystems`}
+              aria-label={filesystemUsageLabel}
+              className={classes.target}
+              onMouseEnter={() => setOpened(true)}
+              onMouseLeave={() => setOpened(false)}
+              onBlur={() => setOpened(false)}
+              onClick={() => setOpened(true)}
               style={{
                 display: "flex",
                 alignItems: "center",
                 flex: 1,
-                minWidth: 24,
                 cursor: "pointer",
               }}
             >
@@ -74,32 +89,32 @@ export const DiskUsage = ({ system, fontSize, progressSize, valueMiw, valueGap =
                 </Group>
               </Box>
             </UnstyledButton>
-          ) : (
-            <Box style={{ display: "flex", alignItems: "center", flex: 1, minWidth: 24 }}>
-              <Box pos="relative" style={{ flex: 1, minWidth: 24 }}>
-                <Progress value={system.disk} color={thresholdColor(system.disk)} size={trackSize} />
-              </Box>
-            </Box>
-          )}
-        </HoverCard.Target>
-        <HoverCard.Dropdown p={8}>
-          <Stack gap={6} miw={145}>
-            {[["/", system.disk] as const, ...filesystems].map(([path, value]) => (
-              <Stack key={path} gap={1}>
-                <Text size="10px" c="dimmed" fw={500} lh={1.2}>
-                  {mountLabel(path)}
-                </Text>
-                <Group gap={8} wrap="nowrap">
-                  <Text size="sm" fw={600} miw={48} lh={1.25}>
-                    {formatPercent(value)}
+          </Popover.Target>
+          <Popover.Dropdown aria-label={filesystemUsageLabel} p={8}>
+            <Stack gap={6} miw={145}>
+              {[["/", system.disk] as const, ...filesystems].map(([path, value]) => (
+                <Stack key={path} gap={1}>
+                  <Text size="10px" c="dimmed" fw={500} lh={1.2}>
+                    {mountLabel(path)}
                   </Text>
-                  <Progress value={value} color={thresholdColor(value)} size="xs" style={{ flex: 1 }} />
-                </Group>
-              </Stack>
-            ))}
-          </Stack>
-        </HoverCard.Dropdown>
-      </HoverCard>
+                  <Group gap={8} wrap="nowrap">
+                    <Text size="sm" fw={600} miw={48} lh={1.25}>
+                      {formatPercent(value)}
+                    </Text>
+                    <Progress value={value} color={thresholdColor(value)} size="xs" style={{ flex: 1 }} />
+                  </Group>
+                </Stack>
+              ))}
+            </Stack>
+          </Popover.Dropdown>
+        </Popover>
+      ) : (
+        <Box style={{ display: "flex", alignItems: "center", flex: 1, minWidth: 24 }}>
+          <Box pos="relative" style={{ flex: 1, minWidth: 24 }}>
+            <Progress value={system.disk} color={thresholdColor(system.disk)} size={trackSize} />
+          </Box>
+        </Box>
+      )}
     </Group>
   );
 };
diff --git a/packages/widgets/src/beszel/_shared/error-indicator.tsx b/packages/widgets/src/beszel/_shared/error-indicator.tsx
deleted file mode 100644
index 7d539baac..000000000
--- a/packages/widgets/src/beszel/_shared/error-indicator.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client";
-
-import { Tooltip } from "@mantine/core";
-import { IconAlertTriangle } from "@tabler/icons-react";
-
-interface IntegrationResult {
-  integrationId: string;
-  integrationName?: string;
-  error?: string;
-}
-
-interface BeszelIntegrationErrorIndicatorProps {
-  results: IntegrationResult[];
-}
-
-export function BeszelIntegrationErrorIndicator({ results }: BeszelIntegrationErrorIndicatorProps) {
-  const failed = results.filter((r) => "error" in r && r.error);
-  if (failed.length === 0) return null;
-  const label = failed.map((r) => r.integrationName ?? r.integrationId).join(", ");
-  return (
-    <Tooltip label={label} position="left" withArrow>
-      <IconAlertTriangle size={14} color="var(--mantine-color-orange-6)" style={{ cursor: "help", flexShrink: 0 }} />
-    </Tooltip>
-  );
-}
diff --git a/packages/widgets/src/beszel/_shared/stats-view.tsx b/packages/widgets/src/beszel/_shared/stats-view.tsx
index 48706d4ad..c2042a4a9 100644
--- a/packages/widgets/src/beszel/_shared/stats-view.tsx
+++ b/packages/widgets/src/beszel/_shared/stats-view.tsx
@@ -6,8 +6,9 @@ import { IconPlugConnectedX, IconServerOff } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import type { BeszelContainerStatsRecord, BeszelSystemStatsRecord } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
+import { getUsableWidgetQueryData } from "../../common/query-state";
 import { containerColors } from "./colors";
 import type { BeszelTimePeriod } from "./chart";
 import {
@@ -19,16 +20,23 @@ import {
   useSystemChartData,
 } from "./chart";
 import { chartAxisFormatters, formatByteRate, formatGB, formatPercent, formatStorageBytes } from "./format";
+import type { BeszelTooltipLayer } from "./tooltip";
 import { makeTooltipProps } from "./tooltip";
 import { useLiveStats } from "./use-live-stats";
 
 const CHART_HEIGHT = 180;
 const MB = 1024 * 1024;
-const tooltipPercent = makeTooltipProps(formatPercent);
-const tooltipGB = makeTooltipProps(formatGB, true);
-const tooltipRate = makeTooltipProps(formatByteRate, true);
-const tooltipPercentTotal = makeTooltipProps(formatPercent, true);
-const tooltipBytesTotal = makeTooltipProps(formatStorageBytes, true);
+const makeTooltipSet = (layer: BeszelTooltipLayer) => ({
+  percent: makeTooltipProps(formatPercent, false, layer),
+  gigabytes: makeTooltipProps(formatGB, true, layer),
+  rate: makeTooltipProps(formatByteRate, true, layer),
+  percentTotal: makeTooltipProps(formatPercent, true, layer),
+  bytesTotal: makeTooltipProps(formatStorageBytes, true, layer),
+});
+const tooltipSets = {
+  background: makeTooltipSet("background"),
+  modal: makeTooltipSet("modal"),
+};
 
 const ChartSkeleton = () => (
   <Stack gap={4} style={{ minWidth: 0 }}>
@@ -58,6 +66,7 @@ interface BeszelStatsViewProps {
   visibility: BeszelStatsVisibility;
   columns: 1 | 2;
   onSwitchToHistorical?: () => void;
+  tooltipLayer?: BeszelTooltipLayer;
 }
 
 const whenVisible = <T,>(visible: boolean, data: T | undefined) => (visible ? data : undefined);
@@ -69,15 +78,19 @@ export function BeszelStatsView({
   visibility,
   columns,
   onSwitchToHistorical,
+  tooltipLayer = "background",
 }: BeszelStatsViewProps) {
   const t = useScopedI18n("widget.beszelSystemStats");
+  const locale = useCurrentIntlLocale();
   const showDocker = visibility.dockerCpu || visibility.dockerMemory || visibility.dockerNetwork;
   const isLive = timePeriod === "1m";
+  const tooltips = tooltipSets[tooltipLayer];
 
-  const { data: historicalData, error: historicalError } = clientApi.widget.beszel.getSystemStats.useQuery(
+  const historicalQuery = clientApi.widget.beszel.getSystemStats.useQuery(
     { integrationIds, systemId, timePeriod, includeDocker: showDocker },
     { refetchInterval: isLive ? false : 5_000, enabled: !isLive && systemId !== "" },
   );
+  const historicalData = isLive ? historicalQuery.data : getUsableWidgetQueryData(historicalQuery);
   const { data: liveData, error: liveError } = useLiveStats(integrationIds, systemId, isLive && systemId !== "");
 
   const activeStats:
@@ -125,10 +138,25 @@ export function BeszelStatsView({
 
   const systemStats = activeStats?.systemStats;
   const containerStats = activeStats?.containerStats;
-  const cpuData = useSystemChartData(whenVisible(visibility.cpu, systemStats), mappers.cpu, timePeriod);
-  const memoryData = useSystemChartData(whenVisible(visibility.memory, systemStats), mappers.memory, timePeriod);
-  const diskIOData = useSystemChartData(whenVisible(visibility.diskIO, systemStats), mappers.diskIO, timePeriod);
-  const networkData = useSystemChartData(whenVisible(visibility.network, systemStats), mappers.network, timePeriod);
+  const cpuData = useSystemChartData(whenVisible(visibility.cpu, systemStats), mappers.cpu, timePeriod, locale);
+  const memoryData = useSystemChartData(
+    whenVisible(visibility.memory, systemStats),
+    mappers.memory,
+    timePeriod,
+    locale,
+  );
+  const diskIOData = useSystemChartData(
+    whenVisible(visibility.diskIO, systemStats),
+    mappers.diskIO,
+    timePeriod,
+    locale,
+  );
+  const networkData = useSystemChartData(
+    whenVisible(visibility.network, systemStats),
+    mappers.network,
+    timePeriod,
+    locale,
+  );
 
   const efsPaths = useMemo(() => {
     const paths = new Set<string>();
@@ -138,7 +166,13 @@ export function BeszelStatsView({
     return [...paths];
   }, [systemStats]);
   const rootSeriesName = t("chart.disk.series");
-  const diskData = useDiskChartData(whenVisible(visibility.disk, systemStats), efsPaths, rootSeriesName, timePeriod);
+  const diskData = useDiskChartData(
+    whenVisible(visibility.disk, systemStats),
+    efsPaths,
+    rootSeriesName,
+    timePeriod,
+    locale,
+  );
   const diskSeries = useMemo(
     () => [
       { name: rootSeriesName, color: "grape.6" },
@@ -161,22 +195,23 @@ export function BeszelStatsView({
     containerNames,
     "cpu",
     timePeriod,
+    locale,
   );
   const dockerMemoryData = useDockerChartData(
     whenVisible(visibility.dockerMemory, containerStats),
     containerNames,
     "memory",
     timePeriod,
+    locale,
   );
   const dockerNetworkData = useDockerChartData(
     whenVisible(visibility.dockerNetwork, containerStats),
     containerNames,
     "network",
     timePeriod,
+    locale,
   );
 
-  if (historicalError) throw historicalError;
-
   if (isLive && liveError) {
     return (
       <Center h={CHART_HEIGHT}>
@@ -198,7 +233,7 @@ export function BeszelStatsView({
   if (!activeStats) {
     const visibleChartCount = Object.values(visibility).filter(Boolean).length;
     return (
-      <SimpleGrid cols={columns} spacing="md" aria-label="Loading system statistics">
+      <SimpleGrid cols={columns} spacing="md" aria-label={t("name")}>
         {Array.from({ length: visibleChartCount }, (_, index) => (
           <ChartSkeleton key={index} />
         ))}
@@ -212,7 +247,7 @@ export function BeszelStatsView({
         <Stack align="center" gap="xs">
           <IconServerOff size={24} opacity={0.5} />
           <Text size="sm" c="dimmed">
-            {activeStats.error}
+            {t("error.internalServerError")}
           </Text>
         </Stack>
       </Center>
@@ -231,7 +266,7 @@ export function BeszelStatsView({
             series: series.cpu,
             yAxisFormatter: chartAxisFormatters.percent,
             yAxisDomain: CPU_Y_AXIS_DOMAIN,
-            tooltipProps: tooltipPercent,
+            tooltipProps: tooltips.percent,
           }}
         />
       )}
@@ -245,7 +280,7 @@ export function BeszelStatsView({
             type: "stacked",
             series: series.memory,
             yAxisFormatter: chartAxisFormatters.gb,
-            tooltipProps: tooltipGB,
+            tooltipProps: tooltips.gigabytes,
           }}
         />
       )}
@@ -259,7 +294,7 @@ export function BeszelStatsView({
             type: "stacked",
             series: diskSeries,
             yAxisFormatter: chartAxisFormatters.gb,
-            tooltipProps: tooltipGB,
+            tooltipProps: tooltips.gigabytes,
           }}
         />
       )}
@@ -272,7 +307,7 @@ export function BeszelStatsView({
             data: diskIOData,
             series: series.diskIO,
             yAxisFormatter: chartAxisFormatters.rate,
-            tooltipProps: tooltipRate,
+            tooltipProps: tooltips.rate,
           }}
         />
       )}
@@ -285,7 +320,7 @@ export function BeszelStatsView({
             data: networkData,
             series: series.network,
             yAxisFormatter: chartAxisFormatters.rate,
-            tooltipProps: tooltipRate,
+            tooltipProps: tooltips.rate,
           }}
         />
       )}
@@ -301,7 +336,7 @@ export function BeszelStatsView({
                 type: "stacked",
                 series: containerSeries,
                 yAxisFormatter: chartAxisFormatters.percent,
-                tooltipProps: tooltipPercentTotal,
+                tooltipProps: tooltips.percentTotal,
               }}
             />
           )}
@@ -315,7 +350,7 @@ export function BeszelStatsView({
                 type: "stacked",
                 series: containerSeries,
                 yAxisFormatter: chartAxisFormatters.bytes,
-                tooltipProps: tooltipBytesTotal,
+                tooltipProps: tooltips.bytesTotal,
               }}
             />
           )}
@@ -328,7 +363,7 @@ export function BeszelStatsView({
                 data: dockerNetworkData,
                 series: containerSeries,
                 yAxisFormatter: chartAxisFormatters.rate,
-                tooltipProps: tooltipRate,
+                tooltipProps: tooltips.rate,
               }}
             />
           )}
diff --git a/packages/widgets/src/beszel/_shared/system-stats-modal.tsx b/packages/widgets/src/beszel/_shared/system-stats-modal.tsx
index fda3146d2..bc13d498b 100644
--- a/packages/widgets/src/beszel/_shared/system-stats-modal.tsx
+++ b/packages/widgets/src/beszel/_shared/system-stats-modal.tsx
@@ -50,6 +50,7 @@ export const BeszelSystemStatsModal = createModal<BeszelSystemStatsModalProps>((
         timePeriod={timePeriod}
         visibility={allCharts}
         columns={2}
+        tooltipLayer="modal"
         onSwitchToHistorical={() => setTimePeriod("1h")}
       />
     </Stack>
diff --git a/packages/widgets/src/beszel/_shared/tooltip.tsx b/packages/widgets/src/beszel/_shared/tooltip.tsx
index b43ea1765..f6f7b35c6 100644
--- a/packages/widgets/src/beszel/_shared/tooltip.tsx
+++ b/packages/widgets/src/beszel/_shared/tooltip.tsx
@@ -3,10 +3,9 @@
 import type { CSSProperties } from "react";
 import { createPortal } from "react-dom";
 import { useCallback, useEffect, useRef, useState } from "react";
-import dayjs from "dayjs";
-import localizedFormat from "dayjs/plugin/localizedFormat";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
-dayjs.extend(localizedFormat);
+import { formatLocalizedDate } from "../../common/locale";
 
 const styles: Record<string, CSSProperties> = {
   wrapper: {
@@ -53,11 +52,15 @@ interface PortalTooltipProps {
   payload?: TooltipPayloadItem[];
   formatter: (value: number) => string;
   showTotal?: boolean;
+  layer: BeszelTooltipLayer;
 }
 
-const MARGIN = 14;
+export type BeszelTooltipLayer = "background" | "modal";
 
-const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }: PortalTooltipProps) => {
+const MARGIN = 14;
+const PortalTooltipContent = ({ active, label, payload, formatter, showTotal, layer }: PortalTooltipProps) => {
+  const locale = useCurrentIntlLocale();
+  const t = useScopedI18n("common");
   const mouseRef = useRef({ x: 0, y: 0 });
   const [pos, setPos] = useState({ x: 0, y: 0 });
   const rafRef = useRef(0);
@@ -70,7 +73,6 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
       const el = tooltipRef.current;
       const mx = mouseRef.current.x;
       const my = mouseRef.current.y;
-
       if (!el) {
         setPos({ x: mx + MARGIN, y: my });
         return;
@@ -113,14 +115,17 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
   if (!sorted.length) return null;
 
   const rawTime = sorted[0]?.payload?.rawTime as string | undefined;
-  const tooltipLabel = rawTime ? dayjs(rawTime).format("MMM D, LT") : label;
+  const tooltipLabel = rawTime
+    ? formatLocalizedDate(rawTime, locale, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" })
+    : label;
   const total = sorted.reduce((sum, p) => sum + p.value, 0);
 
   const portalStyle: CSSProperties = {
     position: "fixed",
     left: pos.x,
     top: pos.y,
-    zIndex: 10000,
+    zIndex:
+      layer === "modal" ? "var(--homarr-z-index-modal-tooltip)" : "var(--homarr-z-index-widget-background-tooltip)",
     pointerEvents: "none",
   };
 
@@ -137,7 +142,7 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
         ))}
         {showTotal && sorted.length > 1 && (
           <div style={{ ...styles.row, ...styles.separator }}>
-            <span style={styles.name}>Total</span>
+            <span style={styles.name}>{t("total")}</span>
             <span style={styles.value}>{formatter(total)}</span>
           </div>
         )}
@@ -148,7 +153,11 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const makeTooltipProps = (formatter: (v: number) => string, showTotal = false) => ({
+export const makeTooltipProps = (
+  formatter: (v: number) => string,
+  showTotal = false,
+  layer: BeszelTooltipLayer = "background",
+) => ({
   content: (props: any) => (
     <PortalTooltipContent
       active={props.active}
@@ -156,6 +165,7 @@ export const makeTooltipProps = (formatter: (v: number) => string, showTotal = f
       payload={props.payload}
       formatter={formatter}
       showTotal={showTotal}
+      layer={layer}
     />
   ),
   wrapperStyle: { visibility: "hidden" as const, position: "absolute" as const, width: 0, height: 0 },
diff --git a/packages/widgets/src/bookmarks/bookmark.module.css b/packages/widgets/src/bookmarks/bookmark.module.css
index c37b78242..807b90e48 100644
--- a/packages/widgets/src/bookmarks/bookmark.module.css
+++ b/packages/widgets/src/bookmarks/bookmark.module.css
@@ -2,6 +2,12 @@
   background-color: var(--mantine-color-primaryColor-light-hover);
 }
 
+.bookmarkButton:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
+  border-radius: var(--mantine-radius-sm);
+}
+
 [data-mantine-color-scheme="light"] .card-grid {
   background-color: var(--mantine-color-gray-1);
 }
@@ -13,3 +19,7 @@
 .card:hover > div > div.bookmarkIcon {
   background-color: var(--mantine-color-iconColor-filled-hover);
 }
+
+.bookmarkButton:focus-visible .bookmarkIcon {
+  background-color: var(--mantine-color-iconColor-filled-hover);
+}
diff --git a/packages/widgets/src/bookmarks/component.tsx b/packages/widgets/src/bookmarks/component.tsx
index e6b7eb7c0..c241549ae 100644
--- a/packages/widgets/src/bookmarks/component.tsx
+++ b/packages/widgets/src/bookmarks/component.tsx
@@ -1,6 +1,19 @@
 "use client";
 
-import { Anchor, Card, Flex, Group, Stack, Text, Title, UnstyledButton } from "@mantine/core";
+import { useMemo } from "react";
+import {
+  Anchor,
+  Box,
+  Card,
+  Flex,
+  Group,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+  UnstyledButton,
+} from "@mantine/core";
 import combineClasses from "clsx";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -10,67 +23,138 @@ import { useRegisterSpotlightContextResults } from "@homarr/spotlight";
 import { MaskedOrNormalImage } from "@homarr/ui";
 
 import type { WidgetComponentProps } from "../definition";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import classes from "./bookmark.module.css";
 
-export default function BookmarksWidget({ options, itemId }: WidgetComponentProps<"bookmarks">) {
+type BookmarkLayout = WidgetComponentProps<"bookmarks">["options"]["layout"];
+
+export interface CompactBookmarkLayout {
+  columns: number;
+  hideHostname: boolean;
+  hideTitle: boolean;
+  minimumItemSize: number;
+}
+
+export function getCompactBookmarkLayout(
+  width: number,
+  height: number,
+  itemCount: number,
+  layout: BookmarkLayout,
+): CompactBookmarkLayout {
+  const count = Math.max(1, itemCount);
+  const isGrid = layout === "grid" || layout === "gridHorizontal";
+  const targetWidth = layout === "gridHorizontal" ? 180 : 104;
+  const columns = isGrid ? Math.max(1, Math.min(count, Math.floor(width / targetWidth))) : layout === "row" ? count : 1;
+  const rows = Math.max(1, Math.ceil(count / columns));
+  const cellWidth = width / columns;
+  const cellHeight = height / rows;
+  const usesHorizontalItems = layout === "column" || layout === "gridHorizontal";
+
+  return {
+    columns,
+    hideHostname: cellWidth < 120 || cellHeight < (usesHorizontalItems ? 52 : 96),
+    hideTitle: cellWidth < 64 || cellHeight < 40,
+    minimumItemSize: usesHorizontalItems ? 48 : 96,
+  };
+}
+
+export default function BookmarksWidget({
+  options,
+  itemId,
+  width,
+  height,
+  displayMode,
+}: WidgetComponentProps<"bookmarks">) {
   const board = useRequiredBoard();
-  const { data = [] } = clientApi.app.byIds.useQuery(options.items, {
-    select(data) {
-      return data.toSorted((appA, appB) => options.items.indexOf(appA.id) - options.items.indexOf(appB.id));
-    },
-  });
+  const data =
+    getUsableWidgetQueryData(
+      clientApi.app.byIds.useQuery(options.items, {
+        select(apps) {
+          return apps.toSorted((appA, appB) => options.items.indexOf(appA.id) - options.items.indexOf(appB.id));
+        },
+      }),
+    ) ?? [];
 
   useRegisterSpotlightContextResults(
     `bookmark-${itemId}`,
-    data
-      .filter((app) => app.href !== null)
-      .map((app) => ({
-        id: app.id,
-        name: app.name,
-        icon: app.iconUrl,
-        interaction() {
-          return {
-            type: "link",
-            // We checked above that app.href is defined
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            href: app.href!,
-            newTab: false,
-          };
-        },
-      })),
+    data.flatMap((app) => {
+      const href = getSafeApplicationUrl(app.href);
+      return href
+        ? [
+            {
+              id: app.id,
+              name: app.name,
+              icon: app.iconUrl,
+              interaction() {
+                return {
+                  type: "link",
+                  href,
+                  newTab: false,
+                };
+              },
+            },
+          ]
+        : [];
+    }),
     [data],
   );
 
+  const compactLayout = useMemo(
+    () => getCompactBookmarkLayout(width, height, data.length, options.layout),
+    [width, height, data.length, options.layout],
+  );
+  const compactHideTitle = options.hideTitle || (compactLayout.hideTitle && !options.hideIcon);
+  const compactHideHostname =
+    options.hideHostname || (compactLayout.hideHostname && !(options.hideTitle && options.hideIcon));
+
   return (
-    <Stack h="100%" gap="sm" p="sm">
+    <Stack h="100%" mih={0} gap="sm" p={height < 120 ? "xs" : "sm"}>
       {options.title.length > 0 && (
-        <Title order={4} px="0.25rem">
+        <Title order={4} px="0.25rem" lineClamp={1}>
           {options.title}
         </Title>
       )}
-      {(options.layout === "grid" || options.layout === "gridHorizontal") && (
-        <GridLayout
+      {displayMode === "advanced" && (
+        <AdvancedBookmarksLayout
           data={data}
-          itemDirection={options.layout === "gridHorizontal" ? "horizontal" : "vertical"}
-          hideTitle={options.hideTitle}
-          hideIcon={options.hideIcon}
-          hideHostname={options.hideHostname}
+          width={width}
           openNewTab={options.openNewTab}
           withBorder={options.withBorder}
           hasIconColor={board.iconColor !== null}
         />
       )}
-      {options.layout !== "grid" && options.layout !== "gridHorizontal" && (
-        <FlexLayout
-          data={data}
-          direction={options.layout}
-          hideTitle={options.hideTitle}
-          hideIcon={options.hideIcon}
-          hideHostname={options.hideHostname}
-          openNewTab={options.openNewTab}
-          withBorder={options.withBorder}
-          hasIconColor={board.iconColor !== null}
-        />
+      {displayMode !== "advanced" && (
+        <ScrollArea type="auto" scrollbarSize={6} offsetScrollbars style={{ flex: 1, minHeight: 0 }}>
+          <Box mih="100%">
+            {options.layout === "grid" || options.layout === "gridHorizontal" ? (
+              <GridLayout
+                data={data}
+                columns={compactLayout.columns}
+                minimumItemHeight={compactLayout.minimumItemSize}
+                itemDirection={options.layout === "gridHorizontal" ? "horizontal" : "vertical"}
+                hideTitle={compactHideTitle}
+                hideIcon={options.hideIcon}
+                hideHostname={compactHideHostname}
+                openNewTab={options.openNewTab}
+                withBorder={options.withBorder}
+                hasIconColor={board.iconColor !== null}
+              />
+            ) : (
+              <FlexLayout
+                data={data}
+                direction={options.layout}
+                minimumItemSize={compactLayout.minimumItemSize}
+                hideTitle={compactHideTitle}
+                hideIcon={options.hideIcon}
+                hideHostname={compactHideHostname}
+                openNewTab={options.openNewTab}
+                withBorder={options.withBorder}
+                hasIconColor={board.iconColor !== null}
+              />
+            )}
+          </Box>
+        </ScrollArea>
       )}
     </Stack>
   );
@@ -85,6 +169,7 @@ interface FlexLayoutProps {
   openNewTab: boolean;
   withBorder: boolean;
   hasIconColor: boolean;
+  minimumItemSize: number;
 }
 
 const FlexLayout = ({
@@ -96,54 +181,130 @@ const FlexLayout = ({
   openNewTab,
   withBorder,
   hasIconColor,
+  minimumItemSize,
 }: FlexLayoutProps) => {
   const board = useRequiredBoard();
   return (
-    <Flex direction={direction} gap="0" w="100%">
-      {data.map((app) => (
-        <div key={app.id} style={{ display: "flex", flex: "1", flexDirection: direction }}>
-          <UnstyledButton
-            component="a"
-            href={app.href ?? undefined}
-            target={openNewTab ? "_blank" : "_self"}
-            rel="noopener noreferrer"
-            key={app.id}
-            w="100%"
-          >
-            <Card
-              radius={board.itemRadius}
-              className={classes.card}
+    <Flex direction={direction} gap={4} w="100%" mih="100%" wrap="nowrap">
+      {data.map((app) => {
+        const href = getSafeApplicationUrl(app.href);
+        return (
+          <div key={app.id} style={{ display: "flex", flex: `1 0 ${minimumItemSize}px`, flexDirection: direction }}>
+            <UnstyledButton
+              className={classes.bookmarkButton}
+              component={href ? "a" : "div"}
+              href={href}
+              target={href ? (openNewTab ? "_blank" : "_self") : undefined}
+              rel={href && openNewTab ? SAFE_NEW_TAB_REL : undefined}
+              key={app.id}
               w="100%"
-              display="flex"
-              p={4}
-              h="100%"
-              withBorder={withBorder}
             >
-              {direction === "row" ? (
-                <VerticalItem
-                  app={app}
-                  hideTitle={hideTitle}
-                  hideIcon={hideIcon}
-                  hideHostname={hideHostname}
-                  hasIconColor={hasIconColor}
-                />
-              ) : (
-                <HorizontalItem
-                  app={app}
-                  hideTitle={hideTitle}
-                  hideIcon={hideIcon}
-                  hideHostname={hideHostname}
-                  hasIconColor={hasIconColor}
-                />
-              )}
-            </Card>
-          </UnstyledButton>
-        </div>
-      ))}
+              <Card
+                radius={board.itemRadius}
+                className={classes.card}
+                w="100%"
+                display="flex"
+                p={4}
+                h="100%"
+                withBorder={withBorder}
+              >
+                {direction === "row" ? (
+                  <VerticalItem
+                    app={app}
+                    hideTitle={hideTitle}
+                    hideIcon={hideIcon}
+                    hideHostname={hideHostname}
+                    hasIconColor={hasIconColor}
+                  />
+                ) : (
+                  <HorizontalItem
+                    app={app}
+                    hideTitle={hideTitle}
+                    hideIcon={hideIcon}
+                    hideHostname={hideHostname}
+                    hasIconColor={hasIconColor}
+                  />
+                )}
+              </Card>
+            </UnstyledButton>
+          </div>
+        );
+      })}
     </Flex>
   );
 };
 
+interface AdvancedBookmarksLayoutProps {
+  data: RouterOutputs["app"]["byIds"];
+  width: number;
+  openNewTab: boolean;
+  withBorder: boolean;
+  hasIconColor: boolean;
+}
+
+export const getAdvancedBookmarkColumns = (width: number, itemCount: number): number =>
+  Math.max(1, Math.min(itemCount || 1, Math.floor(width / 280)));
+
+export const getBookmarkHostname = (href: string | null): string | undefined => {
+  const safeHref = getSafeApplicationUrl(href);
+  return safeHref ? new URL(safeHref).hostname : undefined;
+};
+
+const AdvancedBookmarksLayout = ({
+  data,
+  width,
+  openNewTab,
+  withBorder,
+  hasIconColor,
+}: AdvancedBookmarksLayoutProps) => {
+  const board = useRequiredBoard();
+
+  return (
+    <ScrollArea h="100%" style={{ flex: 1 }}>
+      <SimpleGrid cols={getAdvancedBookmarkColumns(width, data.length)} spacing="sm">
+        {data.map((app) => {
+          const href = getSafeApplicationUrl(app.href);
+          return (
+            <UnstyledButton
+              key={app.id}
+              className={classes.bookmarkButton}
+              component={href ? "a" : "div"}
+              href={href}
+              target={href ? (openNewTab ? "_blank" : "_self") : undefined}
+              rel={href && openNewTab ? SAFE_NEW_TAB_REL : undefined}
+            >
+              <Card radius={board.itemRadius} className={classes.card} withBorder={withBorder} p="md" h="100%">
+                <Group align="flex-start" wrap="nowrap">
+                  <MaskedOrNormalImage
+                    imageUrl={app.iconUrl}
+                    hasColor={hasIconColor}
+                    alt={app.name}
+                    className={classes.bookmarkIcon}
+                    style={{ width: 40, height: 40, flex: "0 0 auto" }}
+                  />
+                  <Stack gap={3} miw={0}>
+                    <Text fw={700} size="sm" truncate="end">
+                      {app.name}
+                    </Text>
+                    <Anchor component="span" size="xs" truncate="end">
+                      {getBookmarkHostname(app.href)}
+                    </Anchor>
+                    {app.description && (
+                      <Text size="xs" c="dimmed" lineClamp={3}>
+                        {app.description}
+                      </Text>
+                    )}
+                  </Stack>
+                </Group>
+              </Card>
+            </UnstyledButton>
+          );
+        })}
+      </SimpleGrid>
+    </ScrollArea>
+  );
+};
+
 interface GridLayoutProps {
   data: RouterOutputs["app"]["byIds"];
   hideTitle: boolean;
@@ -153,6 +314,8 @@ interface GridLayoutProps {
   withBorder: boolean;
   itemDirection: "horizontal" | "vertical";
   hasIconColor: boolean;
+  columns: number;
+  minimumItemHeight: number;
 }
 
 const GridLayout = ({
@@ -164,48 +327,61 @@ const GridLayout = ({
   withBorder,
   itemDirection,
   hasIconColor,
+  columns,
+  minimumItemHeight,
 }: GridLayoutProps) => {
   const board = useRequiredBoard();
 
   return (
-    <Flex miw="100%" gap={4} wrap="wrap" style={{ flex: 1 }}>
-      {data.map((app) => (
-        <UnstyledButton
-          component="a"
-          href={app.href ?? undefined}
-          target={openNewTab ? "_blank" : "_self"}
-          rel="noopener noreferrer"
-          key={app.id}
-          flex="1"
-        >
-          <Card
+    <SimpleGrid
+      cols={columns}
+      spacing={4}
+      verticalSpacing={4}
+      miw="100%"
+      mih="100%"
+      style={{ gridAutoRows: `minmax(${minimumItemHeight}px, 1fr)` }}
+    >
+      {data.map((app) => {
+        const href = getSafeApplicationUrl(app.href);
+        return (
+          <UnstyledButton
+            className={classes.bookmarkButton}
+            component={href ? "a" : "div"}
+            href={href}
+            target={href ? (openNewTab ? "_blank" : "_self") : undefined}
+            rel={href && openNewTab ? SAFE_NEW_TAB_REL : undefined}
+            key={app.id}
             h="100%"
-            className={combineClasses(classes.card, classes["card-grid"])}
-            radius={board.itemRadius}
-            withBorder={withBorder}
-            p="xs"
           >
-            {itemDirection === "horizontal" ? (
-              <HorizontalItem
-                app={app}
-                hideTitle={hideTitle}
-                hideIcon={hideIcon}
-                hideHostname={hideHostname}
-                hasIconColor={hasIconColor}
-              />
-            ) : (
-              <VerticalItem
-                app={app}
-                hideTitle={hideTitle}
-                hideIcon={hideIcon}
-                hideHostname={hideHostname}
-                hasIconColor={hasIconColor}
-              />
-            )}
-          </Card>
-        </UnstyledButton>
-      ))}
-    </Flex>
+            <Card
+              h="100%"
+              className={combineClasses(classes.card, classes["card-grid"])}
+              radius={board.itemRadius}
+              withBorder={withBorder}
+              p="xs"
+            >
+              {itemDirection === "horizontal" ? (
+                <HorizontalItem
+                  app={app}
+                  hideTitle={hideTitle}
+                  hideIcon={hideIcon}
+                  hideHostname={hideHostname}
+                  hasIconColor={hasIconColor}
+                />
+              ) : (
+                <VerticalItem
+                  app={app}
+                  hideTitle={hideTitle}
+                  hideIcon={hideIcon}
+                  hideHostname={hideHostname}
+                  hasIconColor={hasIconColor}
+                />
+              )}
+            </Card>
+          </UnstyledButton>
+        );
+      })}
+    </SimpleGrid>
   );
 };
 
@@ -225,7 +401,7 @@ const VerticalItem = ({
   return (
     <Stack h="100%" miw={16} gap="sm" justify={"center"}>
       {!hideTitle && (
-        <Text fw={700} ta="center" size="xs">
+        <Text fw={700} ta="center" size="xs" lineClamp={2}>
           {app.name}
         </Text>
       )}
@@ -246,8 +422,8 @@ const VerticalItem = ({
         />
       )}
       {!hideHostname && (
-        <Anchor ta="center" component="span" size="xs">
-          {app.href ? new URL(app.href).hostname : undefined}
+        <Anchor ta="center" component="span" size="xs" truncate="end" w="100%">
+          {getBookmarkHostname(app.href)}
         </Anchor>
       )}
     </Stack>
@@ -285,7 +461,7 @@ const HorizontalItem = ({
       )}
       {!(hideTitle && hideHostname) && (
         <>
-          <Stack justify="space-between" gap={0}>
+          <Stack justify="space-between" gap={0} miw={0} style={{ flex: 1 }}>
             {!hideTitle && (
               <Text fw={700} size="xs" lineClamp={hideHostname ? 2 : 1}>
                 {app.name}
@@ -293,8 +469,8 @@ const HorizontalItem = ({
             )}
 
             {!hideHostname && (
-              <Anchor component="span" size="xs">
-                {app.href ? new URL(app.href).hostname : undefined}
+              <Anchor component="span" size="xs" truncate="end">
+                {getBookmarkHostname(app.href)}
               </Anchor>
             )}
           </Stack>
diff --git a/packages/widgets/src/bookmarks/index.tsx b/packages/widgets/src/bookmarks/index.tsx
index c57b909fd..c18ff796e 100644
--- a/packages/widgets/src/bookmarks/index.tsx
+++ b/packages/widgets/src/bookmarks/index.tsx
@@ -10,6 +10,7 @@ import { BookmarkAddButton } from "./add-button";
 
 export const { definition, componentLoader } = createWidgetDefinition("bookmarks", {
   icon: IconBookmark,
+  queryKey: [["app", "byIds"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
       title: factory.text(),
diff --git a/packages/widgets/src/bookmarks/layout.spec.ts b/packages/widgets/src/bookmarks/layout.spec.ts
new file mode 100644
index 000000000..5ff6eeb33
--- /dev/null
+++ b/packages/widgets/src/bookmarks/layout.spec.ts
@@ -0,0 +1,33 @@
+import { describe, expect, test } from "vitest";
+
+import { getAdvancedBookmarkColumns, getBookmarkHostname, getCompactBookmarkLayout } from "./component";
+
+describe("bookmark display helpers", () => {
+  test("uses bounded advanced columns", () => {
+    expect(getAdvancedBookmarkColumns(900, 8)).toBe(3);
+    expect(getAdvancedBookmarkColumns(120, 8)).toBe(1);
+    expect(getAdvancedBookmarkColumns(900, 0)).toBe(1);
+  });
+
+  test("uses container geometry to keep compact cards legible", () => {
+    expect(getCompactBookmarkLayout(420, 220, 4, "gridHorizontal")).toMatchObject({
+      columns: 2,
+      hideHostname: false,
+      hideTitle: false,
+      minimumItemSize: 48,
+    });
+
+    expect(getCompactBookmarkLayout(180, 80, 4, "row")).toMatchObject({
+      columns: 4,
+      hideHostname: true,
+      hideTitle: true,
+      minimumItemSize: 96,
+    });
+  });
+
+  test("does not crash on malformed bookmark URLs", () => {
+    expect(getBookmarkHostname("https://homarr.dev/docs")).toBe("homarr.dev");
+    expect(getBookmarkHostname("not a URL")).toBeUndefined();
+    expect(getBookmarkHostname(null)).toBeUndefined();
+  });
+});
diff --git a/packages/widgets/src/bookmarks/prefetch.ts b/packages/widgets/src/bookmarks/prefetch.ts
index 2c3970327..616de0718 100644
--- a/packages/widgets/src/bookmarks/prefetch.ts
+++ b/packages/widgets/src/bookmarks/prefetch.ts
@@ -1,9 +1,9 @@
-import { trpc } from "@homarr/api/server";
 import { createLogger } from "@homarr/core/infrastructure/logs";
 import { db, inArray } from "@homarr/db";
 import { apps } from "@homarr/db/schema";
 
 import type { Prefetch } from "../definition";
+import { createTrpcQueryKey } from "../trpc-query-key";
 
 const logger = createLogger({ module: "bookmarksWidgetPrefetch" });
 
@@ -21,7 +21,7 @@ const prefetchAllAsync: Prefetch<"bookmarks"> = async (queryClient, items) => {
     }
 
     queryClient.setQueryData(
-      trpc.app.byIds.queryKey(item.options.items),
+      createTrpcQueryKey("app.byIds", item.options.items),
       dbApps.filter((app) => item.options.items.includes(app.id)),
     );
   }
diff --git a/packages/widgets/src/calendar/calendar-event-list.tsx b/packages/widgets/src/calendar/calendar-event-list.tsx
index 992da9d71..95187b3e3 100644
--- a/packages/widgets/src/calendar/calendar-event-list.tsx
+++ b/packages/widgets/src/calendar/calendar-event-list.tsx
@@ -1,3 +1,4 @@
+import { useId } from "react";
 import {
   Badge,
   Box,
@@ -16,122 +17,173 @@ import dayjs from "dayjs";
 
 import { isNullOrWhitespace } from "@homarr/common";
 import type { CalendarEvent } from "@homarr/integrations/types";
-import { useI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
 
+import { groupEventsByDate } from "./calendar-events";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { formatLocalizedTime } from "../common/locale";
 import classes from "./calendar-event-list.module.css";
 
 interface CalendarEventListProps {
   events: CalendarEvent[];
+  fillHeight?: boolean;
+  groupByDate?: boolean;
+  locale?: string;
 }
 
-export const CalendarEventList = ({ events }: CalendarEventListProps) => {
-  const { colorScheme } = useMantineColorScheme();
-  const t = useI18n();
+export const CalendarEventList = ({
+  events,
+  fillHeight = false,
+  groupByDate = false,
+  locale,
+}: CalendarEventListProps) => {
+  const headingIdPrefix = useId();
+  const currentLocale = useCurrentIntlLocale();
+  const effectiveLocale = locale ?? currentLocale;
+  const dateFormatter = new Intl.DateTimeFormat(effectiveLocale, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+  const groups = groupByDate ? [...groupEventsByDate(events).entries()] : null;
+
   return (
     <ScrollArea
       offsetScrollbars
       pt={5}
       w="100%"
+      h={fillHeight ? "100%" : undefined}
       styles={{
         viewport: {
-          maxHeight: 450,
+          maxHeight: fillHeight ? undefined : 450,
         },
       }}
     >
-      <Stack>
-        {events.map((event, eventIndex) => (
-          <Group key={`event-${eventIndex}`} align={"stretch"} wrap="nowrap">
-            {event.image !== null && (
-              <Box pos="relative">
-                <Image
-                  src={event.image.src}
-                  w={70}
-                  mah={150}
-                  style={{
-                    aspectRatio: event.image.aspectRatio
-                      ? `${event.image.aspectRatio.width} / ${event.image.aspectRatio.height}`
-                      : "1/1",
-                  }}
-                  radius="sm"
-                  fallbackSrc="https://placehold.co/400x400?text=No%20image"
-                />
-                {event.image.badge !== undefined && (
-                  <Badge pos="absolute" bottom={-6} left="50%" w="90%" className={classes.badge}>
-                    {event.image.badge.content}
-                  </Badge>
-                )}
-              </Box>
-            )}
-            <Stack style={{ flexGrow: 1 }} gap={0}>
-              <Group justify="space-between" align="start" mb="xs" wrap="nowrap">
-                <Stack gap={0}>
-                  {event.subTitle !== null && (
-                    <Text lineClamp={1} size="sm">
-                      {event.subTitle}
-                    </Text>
-                  )}
-                  <Text fw={"bold"} lineClamp={1} size="sm">
-                    {event.title}
-                  </Text>
-                </Stack>
-                {event.metadata?.type === "radarr" && (
-                  <Group wrap="nowrap">
-                    <Text c="dimmed" size="sm">
-                      {t(`widget.calendar.option.releaseType.options.${event.metadata.releaseType}`)}
-                    </Text>
-                  </Group>
-                )}
-
-                <Group gap={3} wrap="nowrap" align={"center"}>
-                  <IconClock opacity={0.7} size={"1rem"} />
-                  {isAllDay(event) ? (
-                    <Text c={"dimmed"} size={"sm"}>
-                      {t("widget.calendar.duration.allDay")}
-                    </Text>
-                  ) : (
-                    <>
-                      <Text c={"dimmed"} size={"sm"}>
-                        {dayjs(event.startDate).format("HH:mm")}
-                      </Text>
-
-                      {event.endDate !== null && (
-                        <>
-                          -{" "}
-                          <Text c={"dimmed"} size={"sm"}>
-                            {dayjs(event.endDate).format("HH:mm")}
-                          </Text>
-                        </>
-                      )}
-                    </>
-                  )}
-                </Group>
-              </Group>
-
-              {event.location !== null && (
-                <Group gap={4} mb={isNullOrWhitespace(event.description) ? 0 : "sm"}>
-                  <IconPin opacity={0.7} size={"1rem"} />
-                  <Text size={"xs"} c={"dimmed"} lineClamp={1}>
-                    {event.location}
-                  </Text>
-                </Group>
-              )}
-
-              {!isNullOrWhitespace(event.description) && (
-                <Text size={"xs"} c={"dimmed"} lineClamp={2}>
-                  {event.description}
+      <Stack gap="md">
+        {groups ? (
+          groups.map(([date, groupedEvents]) => {
+            const headingId = `${headingIdPrefix}-${date}`;
+            return (
+              <Box key={date} component="section" aria-labelledby={headingId}>
+                <Text id={headingId} component="h3" size="sm" fw={600} tt="capitalize">
+                  {dateFormatter.format(groupedEvents[0]?.startDate)}
                 </Text>
+                <Stack mt="xs">
+                  <CalendarEventRows events={groupedEvents} locale={effectiveLocale} />
+                </Stack>
+              </Box>
+            );
+          })
+        ) : (
+          <CalendarEventRows events={events} locale={effectiveLocale} />
+        )}
+      </Stack>
+    </ScrollArea>
+  );
+};
+
+const CalendarEventRows = ({ events, locale }: Pick<CalendarEventListProps, "events"> & { locale: string }) => {
+  const { colorScheme } = useMantineColorScheme();
+  const t = useI18n();
+  return (
+    <>
+      {events.map((event, eventIndex) => (
+        <Group key={`event-${eventIndex}`} align={"stretch"} wrap="nowrap">
+          {event.image !== null && (
+            <Box pos="relative">
+              <Image
+                src={event.image.src}
+                w={70}
+                mah={150}
+                style={{
+                  aspectRatio: event.image.aspectRatio
+                    ? `${event.image.aspectRatio.width} / ${event.image.aspectRatio.height}`
+                    : "1/1",
+                }}
+                radius="sm"
+                fallbackSrc="https://placehold.co/400x400?text=No%20image"
+              />
+              {event.image.badge !== undefined && (
+                <Badge pos="absolute" bottom={-6} left="50%" w="90%" className={classes.badge}>
+                  {event.image.badge.content}
+                </Badge>
+              )}
+            </Box>
+          )}
+          <Stack style={{ flexGrow: 1, minWidth: 0 }} gap={0}>
+            <Group justify="space-between" align="start" mb="xs" wrap="wrap">
+              <Stack gap={0} style={{ flex: "1 1 12rem", minWidth: 0 }}>
+                {event.subTitle !== null && (
+                  <Text lineClamp={1} size="sm">
+                    {event.subTitle}
+                  </Text>
+                )}
+                <Text fw={"bold"} lineClamp={1} size="sm">
+                  {event.title}
+                </Text>
+              </Stack>
+              {event.metadata?.type === "radarr" && (
+                <Group wrap="nowrap">
+                  <Text c="dimmed" size="sm">
+                    {t(`widget.calendar.option.releaseType.options.${event.metadata.releaseType}`)}
+                  </Text>
+                </Group>
               )}
 
-              {event.links.length > 0 && (
-                <Group pt={5} gap={5} mt={"auto"} wrap="nowrap">
-                  {event.links
-                    .filter((link) => link.href)
-                    .map((link) => (
+              <Group gap={3} wrap="nowrap" align={"center"} ml="auto">
+                <IconClock opacity={0.7} size={"1rem"} />
+                {isAllDay(event) ? (
+                  <Text c={"dimmed"} size={"sm"}>
+                    {t("widget.calendar.duration.allDay")}
+                  </Text>
+                ) : (
+                  <>
+                    <Text c={"dimmed"} size={"sm"}>
+                      {formatLocalizedTime(event.startDate, locale)}
+                    </Text>
+
+                    {event.endDate !== null && (
+                      <>
+                        -{" "}
+                        <Text c={"dimmed"} size={"sm"}>
+                          {formatLocalizedTime(event.endDate, locale)}
+                        </Text>
+                      </>
+                    )}
+                  </>
+                )}
+              </Group>
+            </Group>
+
+            {event.location !== null && (
+              <Group gap={4} mb={isNullOrWhitespace(event.description) ? 0 : "sm"}>
+                <IconPin opacity={0.7} size={"1rem"} />
+                <Text size={"xs"} c={"dimmed"} lineClamp={1}>
+                  {event.location}
+                </Text>
+              </Group>
+            )}
+
+            {!isNullOrWhitespace(event.description) && (
+              <Text size={"xs"} c={"dimmed"} lineClamp={2}>
+                {event.description}
+              </Text>
+            )}
+
+            {event.links.length > 0 && (
+              <Group pt={5} gap={5} mt={"auto"} wrap="nowrap">
+                {event.links
+                  .filter((link) => link.href)
+                  .map((link) => {
+                    const href = getSafeApplicationUrl(link.href.toString());
+                    return (
                       <Button
                         key={link.href}
-                        component={"a"}
-                        href={link.href.toString()}
-                        target={"_blank"}
+                        component={href ? "a" : "div"}
+                        href={href}
+                        target={href ? "_blank" : undefined}
+                        rel={href ? SAFE_NEW_TAB_REL : undefined}
                         size={"xs"}
                         radius={"xl"}
                         variant={link.color ? undefined : "default"}
@@ -150,14 +202,14 @@ export const CalendarEventList = ({ events }: CalendarEventListProps) => {
                       >
                         <Text>{link.name}</Text>
                       </Button>
-                    ))}
-                </Group>
-              )}
-            </Stack>
-          </Group>
-        ))}
-      </Stack>
-    </ScrollArea>
+                    );
+                  })}
+              </Group>
+            )}
+          </Stack>
+        </Group>
+      ))}
+    </>
   );
 };
 
diff --git a/packages/widgets/src/calendar/calendar-events.ts b/packages/widgets/src/calendar/calendar-events.ts
new file mode 100644
index 000000000..19ddd3bd5
--- /dev/null
+++ b/packages/widgets/src/calendar/calendar-events.ts
@@ -0,0 +1,80 @@
+import dayjs from "dayjs";
+
+import type { CalendarEvent } from "@homarr/integrations/types";
+
+export const toCalendarDateKey = (date: Date) => dayjs(date).format("YYYY-MM-DD");
+
+export const moveCalendarMonth = (month: Date, amount: number): Date =>
+  dayjs(month).startOf("month").add(amount, "month").toDate();
+
+const matchesReleaseType = (event: CalendarEvent, releaseTypes: readonly string[]) =>
+  event.metadata?.type !== "radarr" || releaseTypes.includes(event.metadata.releaseType);
+
+export const getCalendarAgendaEvents = (
+  events: CalendarEvent[],
+  viewedMonth: Date,
+  releaseTypes: readonly string[],
+): CalendarEvent[] => {
+  const monthStart = dayjs(viewedMonth).startOf("month");
+  const monthEnd = monthStart.add(1, "month");
+
+  return events
+    .filter((event) => {
+      if (!matchesReleaseType(event, releaseTypes)) return false;
+
+      const start = dayjs(event.startDate);
+      if (!event.endDate) return !start.isBefore(monthStart) && start.isBefore(monthEnd);
+
+      // Calendar intervals are half-open: an all-day event ending at midnight does not occupy the next day.
+      return start.isBefore(monthEnd) && dayjs(event.endDate).isAfter(monthStart);
+    })
+    .toSorted((eventA, eventB) => eventA.startDate.getTime() - eventB.startDate.getTime());
+};
+
+export const groupEventsByDate = (events: CalendarEvent[]): Map<string, CalendarEvent[]> => {
+  const result = new Map<string, CalendarEvent[]>();
+  for (const event of events) {
+    const key = toCalendarDateKey(event.startDate);
+    const entries = result.get(key) ?? [];
+    entries.push(event);
+    result.set(key, entries);
+  }
+
+  return new Map(
+    [...result.entries()]
+      .toSorted(([dateA], [dateB]) => dateA.localeCompare(dateB))
+      .map(([date, entries]) => [
+        date,
+        entries.toSorted((eventA, eventB) => eventA.startDate.getTime() - eventB.startDate.getTime()),
+      ]),
+  );
+};
+
+/** Splits multi-day events into single-day calendar tiles. */
+export const splitEvents = (events: CalendarEvent[]): CalendarEvent[] => {
+  const splitEventEntries: CalendarEvent[] = [];
+  for (const event of events) {
+    if (!event.endDate) {
+      splitEventEntries.push(event);
+      continue;
+    }
+
+    if (dayjs(event.startDate).isSame(event.endDate, "day")) {
+      splitEventEntries.push(event);
+      continue;
+    }
+
+    if (dayjs(event.startDate).isAfter(event.endDate)) continue;
+
+    let currentStart = dayjs(event.startDate);
+    while (currentStart.isBefore(event.endDate)) {
+      splitEventEntries.push({
+        ...event,
+        startDate: currentStart.toDate(),
+        endDate: currentStart.endOf("day").isAfter(event.endDate) ? event.endDate : currentStart.endOf("day").toDate(),
+      });
+      currentStart = currentStart.add(1, "day").startOf("day");
+    }
+  }
+  return splitEventEntries;
+};
diff --git a/packages/widgets/src/calendar/calendar.spec.ts b/packages/widgets/src/calendar/calendar.spec.ts
index 0d655adc6..d42d6f151 100644
--- a/packages/widgets/src/calendar/calendar.spec.ts
+++ b/packages/widgets/src/calendar/calendar.spec.ts
@@ -2,7 +2,7 @@ import { describe, expect, test } from "vitest";
 
 import type { CalendarEvent } from "@homarr/integrations/types";
 
-import { splitEvents } from "./component";
+import { getCalendarAgendaEvents, groupEventsByDate, moveCalendarMonth, splitEvents } from "./calendar-events";
 
 describe("splitEvents should split multi-day events into multiple single-day events", () => {
   test("2 day all-day event should be split up into two all-day events", () => {
@@ -53,6 +53,52 @@ describe("splitEvents should split multi-day events into multiple single-day eve
   });
 });
 
+describe("groupEventsByDate", () => {
+  test("groups once per day and sorts each bucket", () => {
+    const later = createEvent(new Date(2025, 0, 1, 18));
+    const earlier = createEvent(new Date(2025, 0, 1, 9));
+    const nextDay = createEvent(new Date(2025, 0, 2, 9));
+
+    const result = groupEventsByDate([later, nextDay, earlier]);
+
+    expect(result.size).toBe(2);
+    expect([...result.values()][0]).toEqual([earlier, later]);
+  });
+});
+
+describe("getCalendarAgendaEvents", () => {
+  test("keeps overlapping original events once and excludes adjacent-month events", () => {
+    const spansIntoMonth = createEvent(new Date(2024, 11, 31, 22), new Date(2025, 0, 2, 8));
+    const inMonth = createEvent(new Date(2025, 0, 20, 9));
+    const endsAtMonthStart = createEvent(new Date(2024, 11, 31), new Date(2025, 0, 1));
+    const nextMonth = createEvent(new Date(2025, 1, 1));
+
+    const result = getCalendarAgendaEvents(
+      [nextMonth, spansIntoMonth, endsAtMonthStart, inMonth],
+      new Date(2025, 0, 15),
+      [],
+    );
+
+    expect(result).toEqual([spansIntoMonth, inMonth]);
+  });
+
+  test("applies Radarr release filters without splitting multi-day events", () => {
+    const cinema = createEvent(new Date(2025, 0, 5), new Date(2025, 0, 8));
+    cinema.metadata = { type: "radarr", releaseType: "inCinemas" };
+    const digital = createEvent(new Date(2025, 0, 7));
+    digital.metadata = { type: "radarr", releaseType: "digitalRelease" };
+
+    expect(getCalendarAgendaEvents([cinema, digital], new Date(2025, 0, 1), ["inCinemas"])).toEqual([cinema]);
+  });
+});
+
+describe("moveCalendarMonth", () => {
+  test("uses the first day so short months do not skip", () => {
+    expect(moveCalendarMonth(new Date(2025, 0, 31), 1)).toEqual(new Date(2025, 1, 1));
+    expect(moveCalendarMonth(new Date(2025, 2, 31), -1)).toEqual(new Date(2025, 1, 1));
+  });
+});
+
 const createEvent = (startDate: Date, endDate: Date | null = null): CalendarEvent => ({
   title: "Test",
   subTitle: null,
diff --git a/packages/widgets/src/calendar/component.tsx b/packages/widgets/src/calendar/component.tsx
index 2888ba694..f2b18fed6 100644
--- a/packages/widgets/src/calendar/component.tsx
+++ b/packages/widgets/src/calendar/component.tsx
@@ -1,26 +1,62 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import { useParams } from "next/navigation";
-import { useMantineTheme } from "@mantine/core";
+import { ActionIcon, Box, Center, Group, Loader, Stack, Text, Tooltip, useMantineTheme } from "@mantine/core";
 import { Calendar } from "@mantine/dates";
 import { useElementSize } from "@mantine/hooks";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { getQueryKey } from "@trpc/react-query";
 import dayjs from "dayjs";
 
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import type { CalendarEvent } from "@homarr/integrations/types";
 import { useSettings } from "@homarr/settings";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
+import actionTargetClasses from "../common/action-target.module.css";
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
+import { useWidgetRuntimeQueries } from "../runtime-hooks";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import { CalendarDay } from "./calender-day";
+import {
+  getCalendarAgendaEvents,
+  groupEventsByDate,
+  moveCalendarMonth,
+  splitEvents,
+  toCalendarDateKey,
+} from "./calendar-events";
+import { CalendarEventList } from "./calendar-event-list";
 import classes from "./component.module.css";
 
 export default function CalendarWidget(props: WidgetComponentProps<"calendar">) {
-  const [month, setMonth] = useState(new Date());
+  const [month, setMonth] = useState(() => new Date());
+  const runtimeInput = {
+    integrationIds: props.integrationIds,
+    month: month.getMonth(),
+    year: month.getFullYear(),
+    releaseType: props.options.releaseType,
+    showUnmonitored: props.options.showUnmonitored,
+  };
+  useWidgetRuntimeQueries(
+    props.widgetRuntimeRef,
+    props.integrationIds.length > 0
+      ? [getQueryKey(clientApi.widget.calendar.findAllEvents, runtimeInput, "query")]
+      : [],
+  );
 
   if (props.integrationIds.length === 0) {
-    return <CalendarBase {...props} events={[]} month={month} setMonth={setMonth} />;
+    return (
+      <CalendarBase
+        {...props}
+        events={[]}
+        failedIntegrations={[]}
+        isPending={false}
+        month={month}
+        setMonth={setMonth}
+      />
+    );
   }
 
   return <FetchCalendar month={month} setMonth={setMonth} {...props} />;
@@ -31,7 +67,7 @@ interface FetchCalendarProps extends WidgetComponentProps<"calendar"> {
   setMonth: (date: Date) => void;
 }
 
-const FetchCalendar = ({ month, setMonth, isEditMode, integrationIds, options }: FetchCalendarProps) => {
+const FetchCalendar = ({ month, setMonth, isEditMode, integrationIds, options, displayMode }: FetchCalendarProps) => {
   const input = {
     integrationIds,
     month: month.getMonth() + 1,
@@ -39,24 +75,52 @@ const FetchCalendar = ({ month, setMonth, isEditMode, integrationIds, options }:
     releaseType: options.releaseType,
     showUnmonitored: options.showUnmonitored,
   };
-  const { data } = clientApi.widget.calendar.findAllEvents.useQuery(input);
+  const calendarQuery = clientApi.widget.calendar.findAllEvents.useQuery(input);
+  const data = getUsableWidgetQueryData(calendarQuery);
+  const { isPending } = calendarQuery;
 
   const events = useMemo(() => data?.flatMap((item) => item.events) ?? [], [data]);
+  const failedIntegrations =
+    data?.flatMap(({ integration, error }) =>
+      error ? [{ integrationId: integration.id, integrationName: integration.name, error }] : [],
+    ) ?? [];
 
-  return <CalendarBase isEditMode={isEditMode} events={events} month={month} setMonth={setMonth} options={options} />;
+  return (
+    <CalendarBase
+      isEditMode={isEditMode}
+      events={events}
+      failedIntegrations={failedIntegrations}
+      isPending={isPending}
+      month={month}
+      setMonth={setMonth}
+      options={options}
+      displayMode={displayMode}
+    />
+  );
 };
 
 interface CalendarBaseProps {
   isEditMode: boolean;
   events: CalendarEvent[];
+  failedIntegrations: { integrationId: string; integrationName: string; error: string }[];
+  isPending: boolean;
   month: Date;
   setMonth: (date: Date) => void;
   options: WidgetComponentProps<"calendar">["options"];
+  displayMode?: WidgetComponentProps<"calendar">["displayMode"];
 }
 
-const CalendarBase = ({ isEditMode, events, month, setMonth, options }: CalendarBaseProps) => {
-  const params = useParams();
-  const locale = params.locale as string;
+const CalendarBase = ({
+  isEditMode,
+  events,
+  failedIntegrations,
+  isPending,
+  month,
+  setMonth,
+  options,
+  displayMode,
+}: CalendarBaseProps) => {
+  const locale = useCurrentIntlLocale();
   const { firstDayOfWeek } = useSettings();
   const board = useRequiredBoard();
   const mantineTheme = useMantineTheme();
@@ -64,125 +128,197 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
   const { ref, width, height } = useElementSize();
   const isSmall = width < 256;
 
-  const normalizedEvents = useMemo(() => splitEvents(events), [events]);
+  const normalizedEvents = useMemo(
+    () => (displayMode === "advanced" ? [] : splitEvents(events)),
+    [displayMode, events],
+  );
+  const visibleEvents = useMemo(
+    () =>
+      normalizedEvents.filter(
+        (event) => event.metadata?.type !== "radarr" || options.releaseType.includes(event.metadata.releaseType),
+      ),
+    [normalizedEvents, options.releaseType],
+  );
+  const eventsByDate = useMemo(() => groupEventsByDate(visibleEvents), [visibleEvents]);
+  const agendaEvents = useMemo(
+    () => (displayMode === "advanced" ? getCalendarAgendaEvents(events, month, options.releaseType) : []),
+    [displayMode, events, month, options.releaseType],
+  );
+
+  if (displayMode === "advanced") {
+    return (
+      <CalendarAgenda
+        events={agendaEvents}
+        failedIntegrations={failedIntegrations}
+        isPending={isPending}
+        isEditMode={isEditMode}
+        locale={locale}
+        month={month}
+        setMonth={setMonth}
+      />
+    );
+  }
 
   return (
-    <Calendar
-      defaultDate={new Date()}
-      onPreviousMonth={(month) => setMonth(new Date(month))}
-      onNextMonth={(month) => setMonth(new Date(month))}
-      highlightToday
-      locale={locale}
-      hideWeekdays={false}
-      date={month}
-      maxLevel="month"
-      firstDayOfWeek={firstDayOfWeek}
-      static={isEditMode}
-      className={classes.calendar}
-      w="100%"
-      h="100%"
-      ref={ref}
-      styles={{
-        calendarHeaderControl: {
-          pointerEvents: isEditMode ? "none" : undefined,
-          borderRadius: "md",
-          height: isSmall ? "1.5rem" : undefined,
-          width: isSmall ? "1.5rem" : undefined,
-        },
-        calendarHeaderLevel: {
-          pointerEvents: "none",
-          fontSize: isSmall ? "0.75rem" : undefined,
-          height: "100%",
-        },
-        levelsGroup: {
-          height: "100%",
-          padding: "md",
-        },
-        calendarHeader: {
-          maxWidth: "unset",
-          marginBottom: 0,
-        },
-        monthCell: {
-          textAlign: "center",
-          position: "relative",
-        },
-        day: {
-          borderRadius: actualItemRadius,
-          width: "100%",
-          height: "100%",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          bottom: 0,
-          right: 0,
-        },
-        month: {
-          height: "100%",
-        },
-        weekday: {
-          padding: 0,
-        },
-        weekdaysRow: {
-          height: 22,
-        },
-      }}
-      renderDay={(tileDate) => {
-        const eventsForDate = normalizedEvents
-          .filter((event) => dayjs(event.startDate).isSame(tileDate, "day"))
-          .filter(
-            (event) => event.metadata?.type !== "radarr" || options.releaseType.includes(event.metadata.releaseType),
-          )
-          .toSorted((eventA, eventB) => eventA.startDate.getTime() - eventB.startDate.getTime());
+    <Stack ref={ref} h="100%" w="100%" gap="xs" style={{ overflow: "hidden" }}>
+      {failedIntegrations.length > 0 && (
+        <Group px="xs" justify="flex-end">
+          <IntegrationErrorIndicator results={failedIntegrations} />
+        </Group>
+      )}
+      <Calendar
+        defaultDate={new Date()}
+        onPreviousMonth={(previousMonth) => setMonth(new Date(previousMonth))}
+        onNextMonth={(nextMonth) => setMonth(new Date(nextMonth))}
+        highlightToday
+        locale={locale}
+        hideWeekdays={false}
+        date={month}
+        maxLevel="month"
+        firstDayOfWeek={firstDayOfWeek}
+        static={isEditMode}
+        className={classes.calendar}
+        w="100%"
+        h="100%"
+        styles={{
+          calendarHeaderControl: {
+            pointerEvents: isEditMode ? "none" : undefined,
+            borderRadius: "md",
+            height: isSmall ? "1.5rem" : undefined,
+            width: isSmall ? "1.5rem" : undefined,
+          },
+          calendarHeaderLevel: {
+            pointerEvents: "none",
+            fontSize: isSmall ? "0.75rem" : undefined,
+            height: "100%",
+          },
+          levelsGroup: {
+            height: "100%",
+            padding: "md",
+          },
+          calendarHeader: {
+            maxWidth: "unset",
+            marginBottom: 0,
+          },
+          monthCell: {
+            textAlign: "center",
+            position: "relative",
+          },
+          day: {
+            borderRadius: actualItemRadius,
+            width: "100%",
+            height: "100%",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+          },
+          month: {
+            height: "100%",
+          },
+          weekday: {
+            padding: 0,
+          },
+          weekdaysRow: {
+            height: 22,
+          },
+        }}
+        renderDay={(tileDate) => {
+          const eventsForDate = eventsByDate.get(toCalendarDateKey(dayjs(tileDate).toDate())) ?? [];
 
-        return (
-          <CalendarDay
-            date={dayjs(tileDate).toDate()}
-            events={eventsForDate}
-            disabled={isEditMode || eventsForDate.length === 0}
-            rootWidth={width}
-            rootHeight={height}
-          />
-        );
-      }}
-    />
+          return (
+            <CalendarDay
+              date={dayjs(tileDate).toDate()}
+              events={eventsForDate}
+              disabled={isEditMode || eventsForDate.length === 0}
+              rootWidth={width}
+              rootHeight={height}
+            />
+          );
+        }}
+      />
+    </Stack>
   );
 };
 
-/**
- * Splits multi-day events into multiple single-day events.
- * @param events The events to split.
- * @returns The split events.
- */
-export const splitEvents = (events: CalendarEvent[]): CalendarEvent[] => {
-  const splitEvents: CalendarEvent[] = [];
-  for (const event of events) {
-    if (!event.endDate) {
-      splitEvents.push(event);
-      continue;
-    }
+interface CalendarAgendaProps {
+  events: CalendarEvent[];
+  failedIntegrations: CalendarBaseProps["failedIntegrations"];
+  isPending: boolean;
+  isEditMode: boolean;
+  locale: string;
+  month: Date;
+  setMonth: (date: Date) => void;
+}
 
-    if (dayjs(event.startDate).isSame(event.endDate, "day")) {
-      splitEvents.push(event);
-      continue;
-    }
+const CalendarAgenda = ({
+  events,
+  failedIntegrations,
+  isPending,
+  isEditMode,
+  locale,
+  month,
+  setMonth,
+}: CalendarAgendaProps) => {
+  const t = useScopedI18n("widget.calendar.advanced");
+  const monthLabel = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(month);
 
-    if (dayjs(event.startDate).isAfter(event.endDate)) {
-      // Invalid event, skip it
-      continue;
-    }
+  return (
+    <Stack h="100%" w="100%" gap="sm" p="md" style={{ overflow: "hidden" }}>
+      <Group justify="space-between" align="center" wrap="nowrap">
+        <Group gap="xs" wrap="nowrap">
+          <Tooltip label={t("previousMonth")} events={{ hover: true, focus: true, touch: false }}>
+            <ActionIcon
+              className={actionTargetClasses.root}
+              variant="subtle"
+              size="lg"
+              aria-label={t("previousMonth")}
+              disabled={isEditMode}
+              onClick={() => setMonth(moveCalendarMonth(month, -1))}
+            >
+              <IconChevronLeft size={18} aria-hidden />
+            </ActionIcon>
+          </Tooltip>
+          <Stack gap={0} miw={0}>
+            <Text component="h3" size="sm" fw={600} tt="capitalize" lineClamp={1}>
+              {monthLabel}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {isPending ? t("loading") : t("eventCount", { count: events.length })}
+            </Text>
+          </Stack>
+          <Tooltip label={t("nextMonth")} events={{ hover: true, focus: true, touch: false }}>
+            <ActionIcon
+              className={actionTargetClasses.root}
+              variant="subtle"
+              size="lg"
+              aria-label={t("nextMonth")}
+              disabled={isEditMode}
+              onClick={() => setMonth(moveCalendarMonth(month, 1))}
+            >
+              <IconChevronRight size={18} aria-hidden />
+            </ActionIcon>
+          </Tooltip>
+        </Group>
+        {failedIntegrations.length > 0 && <IntegrationErrorIndicator results={failedIntegrations} />}
+      </Group>
 
-    // Event spans multiple days, split it
-    let currentStart = dayjs(event.startDate);
-
-    while (currentStart.isBefore(event.endDate)) {
-      splitEvents.push({
-        ...event,
-        startDate: currentStart.toDate(),
-        endDate: currentStart.endOf("day").isAfter(event.endDate) ? event.endDate : currentStart.endOf("day").toDate(),
-      });
-
-      currentStart = currentStart.add(1, "day").startOf("day");
-    }
-  }
-  return splitEvents;
+      <Box style={{ flex: 1, minHeight: 0 }}>
+        {isPending ? (
+          <Center component="output" h="100%" aria-label={t("loading")}>
+            <Loader size="sm" />
+          </Center>
+        ) : events.length > 0 ? (
+          <CalendarEventList events={events} groupByDate locale={locale} fillHeight />
+        ) : (
+          <Stack h="100%" align="center" justify="center" p="md">
+            <Text c="dimmed" size="sm" ta="center">
+              {t("noEvents")}
+            </Text>
+          </Stack>
+        )}
+      </Box>
+    </Stack>
+  );
 };
diff --git a/packages/widgets/src/calendar/index.ts b/packages/widgets/src/calendar/index.ts
index d03b2f610..270981f5d 100644
--- a/packages/widgets/src/calendar/index.ts
+++ b/packages/widgets/src/calendar/index.ts
@@ -4,11 +4,13 @@ import { z } from "zod/v4";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { radarrReleaseTypes } from "@homarr/integrations/types";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("calendar", {
   icon: IconCalendar,
+  queryKey: [["widget", "calendar", "findAllEvents"]],
+  queryMatcher: matchesWidgetRuntimeQuery,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       releaseType: factory.multiSelect({
diff --git a/packages/widgets/src/catalog.ts b/packages/widgets/src/catalog.ts
new file mode 100644
index 000000000..86720020d
--- /dev/null
+++ b/packages/widgets/src/catalog.ts
@@ -0,0 +1,112 @@
+import {
+  IconActivityHeartbeat,
+  IconAd,
+  IconApi,
+  IconApps,
+  IconArchive,
+  IconBadgeCc,
+  IconBatteryCharging,
+  IconBell,
+  IconBinaryTree,
+  IconBookmark,
+  IconBrandDocker,
+  IconBrandMinecraft,
+  IconBrowser,
+  IconBuildingBank,
+  IconBusStop,
+  IconCalendar,
+  IconChartAreaLine,
+  IconChartBar,
+  IconClock,
+  IconCloud,
+  IconDeviceCctv,
+  IconDeviceGamepad,
+  IconDownload,
+  IconFileText,
+  IconGraphFilled,
+  IconHeadphones,
+  IconHeartRateMonitor,
+  IconHeartbeat,
+  IconLayoutGrid,
+  IconMessage,
+  IconMovie,
+  IconNotes,
+  IconPhoto,
+  IconReportSearch,
+  IconRocket,
+  IconRobot,
+  IconRoute,
+  IconRss,
+  IconServer2,
+  IconShieldCheck,
+  IconShieldLock,
+  IconSpeedboat,
+  IconTable,
+  IconTicket,
+  IconTopologyFull,
+  IconTransform,
+  IconVideo,
+  IconWall,
+  IconZoomQuestion,
+} from "@tabler/icons-react";
+
+import type { WidgetKind } from "@homarr/definitions";
+import type { TablerIcon } from "@homarr/ui";
+
+export const widgetCatalogIcons: Record<WidgetKind, TablerIcon> = {
+  clock: IconClock,
+  weather: IconCloud,
+  app: IconApps,
+  assistant: IconRobot,
+  iframe: IconBrowser,
+  video: IconDeviceCctv,
+  notebook: IconNotes,
+  anchorNote: IconNotes,
+  dnsHoleSummary: IconAd,
+  dnsHoleControls: IconDeviceGamepad,
+  "smartHome-entityState": IconBinaryTree,
+  "smartHome-executeAutomation": IconBinaryTree,
+  stockPrice: IconBuildingBank,
+  mediaServer: IconVideo,
+  calendar: IconCalendar,
+  downloads: IconDownload,
+  "mediaRequests-requestList": IconZoomQuestion,
+  "mediaRequests-requestStats": IconChartBar,
+  mediaTranscoding: IconTransform,
+  mediaMissing: IconMovie,
+  minecraftServerStatus: IconBrandMinecraft,
+  networkControllerSummary: IconTopologyFull,
+  networkControllerStatus: IconTopologyFull,
+  rssFeed: IconRss,
+  bookmarks: IconBookmark,
+  indexerManager: IconReportSearch,
+  healthMonitoring: IconHeartRateMonitor,
+  releases: IconRocket,
+  mediaReleases: IconTicket,
+  dockerContainers: IconBrandDocker,
+  firewall: IconWall,
+  notifications: IconMessage,
+  systemResources: IconGraphFilled,
+  coolify: IconCloud,
+  systemDisks: IconServer2,
+  timetable: IconBusStop,
+  "immich-serverStats": IconGraphFilled,
+  "immich-albumCarousel": IconPhoto,
+  paperlessNgx: IconFileText,
+  patchmon: IconShieldCheck,
+  bazarr: IconBadgeCc,
+  tracearr: IconActivityHeartbeat,
+  speedtestTracker: IconSpeedboat,
+  uptimeKuma: IconHeartbeat,
+  audioStats: IconHeadphones,
+  umami: IconChartBar,
+  vpn: IconShieldLock,
+  archiveTeamWarrior: IconArchive,
+  ups: IconBatteryCharging,
+  beszelSystemTable: IconTable,
+  beszelSystemGrid: IconLayoutGrid,
+  beszelAlerts: IconBell,
+  beszelSystemStats: IconChartAreaLine,
+  traefik: IconRoute,
+  customApi: IconApi,
+};
diff --git a/packages/widgets/src/clock/component.tsx b/packages/widgets/src/clock/component.tsx
index dd43e0380..91a4904b0 100644
--- a/packages/widgets/src/clock/component.tsx
+++ b/packages/widgets/src/clock/component.tsx
@@ -1,14 +1,18 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Box, Stack, Text, Title } from "@mantine/core";
+import { Box, Loader, Stack, Text, Title } from "@mantine/core";
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import timezones from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 
 import { clientApi } from "@homarr/api/client";
+import { metricToImperial } from "@homarr/common";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
+import { isInitialWidgetQueryPending } from "../common/query-state";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
 import type { WidgetComponentProps } from "../definition";
 import { AnimatedWeatherIcon } from "../weather/animated-icon";
 
@@ -16,7 +20,7 @@ dayjs.extend(advancedFormat);
 dayjs.extend(utc);
 dayjs.extend(timezones);
 
-export default function ClockWidget({ options, width }: WidgetComponentProps<"clock">) {
+export default function ClockWidget({ options, width, height, displayMode }: WidgetComponentProps<"clock">) {
   const secondsFormat = options.showSeconds ? ":ss" : "";
   const timeFormat = options.is24HourFormat ? `HH:mm${secondsFormat}` : `hh:mm${secondsFormat} A`;
   const dateFormat = options.dateFormat;
@@ -25,7 +29,8 @@ export default function ClockWidget({ options, width }: WidgetComponentProps<"cl
   const timezone = options.useCustomTimezone ? options.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
   const time = useCurrentTime(options);
 
-  const sizing = width < 128 ? "xs" : width < 196 ? "sm" : "md";
+  const minimumAxis = Math.min(width, height * 1.5);
+  const sizing = minimumAxis < 128 ? "xs" : minimumAxis < 196 ? "sm" : "md";
   const showWeatherCorner = options.showWeather && sizing !== "xs";
 
   return (
@@ -35,6 +40,7 @@ export default function ClockWidget({ options, width }: WidgetComponentProps<"cl
           latitude={options.weatherLocation.latitude}
           longitude={options.weatherLocation.longitude}
           isFahrenheit={options.isWeatherFormatFahrenheit}
+          showDetails={displayMode === "advanced"}
         />
       )}
       <Stack className="clock-text-stack" h="100%" align="center" justify="center" gap={sizing}>
@@ -44,9 +50,11 @@ export default function ClockWidget({ options, width }: WidgetComponentProps<"cl
           </Text>
         )}
         <Title className="clock-time-text" fw={700} order={sizing === "md" ? 2 : sizing === "sm" ? 4 : 6} lh="1">
-          {options.customTimeFormat
-            ? dayjs(time).tz(timezone).format(customTimeFormat)
-            : dayjs(time).tz(timezone).format(timeFormat)}
+          <time dateTime={dayjs(time).tz(timezone).toISOString()}>
+            {options.customTimeFormat
+              ? dayjs(time).tz(timezone).format(customTimeFormat)
+              : dayjs(time).tz(timezone).format(timeFormat)}
+          </time>
         </Title>
         {options.showDate && (
           <Text className="clock-date-text" size={sizing} lineClamp={1}>
@@ -55,6 +63,11 @@ export default function ClockWidget({ options, width }: WidgetComponentProps<"cl
               : dayjs(time).tz(timezone).format(dateFormat)}
           </Text>
         )}
+        {displayMode === "advanced" && (
+          <Text size="xs" c="dimmed" lineClamp={1}>
+            {timezone} · UTC{dayjs(time).tz(timezone).format("Z")}
+          </Text>
+        )}
       </Stack>
     </Box>
   );
@@ -64,12 +77,26 @@ interface ClockWeatherCornerProps {
   latitude: number;
   longitude: number;
   isFahrenheit: boolean;
+  showDetails: boolean;
 }
 
-const ClockWeatherCorner = ({ latitude, longitude, isFahrenheit }: ClockWeatherCornerProps) => {
-  const { data: weather } = clientApi.widget.weather.atLocation.useQuery({ latitude, longitude });
+const ClockWeatherCorner = ({ latitude, longitude, isFahrenheit, showDetails }: ClockWeatherCornerProps) => {
+  const t = useI18n();
+  const tCommon = useScopedI18n("common");
+  const weatherQuery = clientApi.widget.weather.atLocation.useQuery({ latitude, longitude });
+  const weather = weatherQuery.data;
 
-  if (!weather) return null;
+  if (!weather) {
+    return (
+      <Box pos="absolute" top={4} left={4}>
+        {isInitialWidgetQueryPending(weatherQuery) ? (
+          <Loader size="xs" aria-label={tCommon("action.loading")} />
+        ) : (
+          <WidgetQueryErrorIndicator error={weatherQuery.error} label={t("widget.weather.name")} />
+        )}
+      </Box>
+    );
+  }
 
   const temp = isFahrenheit ? weather.current.temperature * (9 / 5) + 32 : weather.current.temperature;
   const unit = isFahrenheit ? "°F" : "°C";
@@ -81,6 +108,13 @@ const ClockWeatherCorner = ({ latitude, longitude, isFahrenheit }: ClockWeatherC
         {Math.round(temp)}
         {unit}
       </Text>
+      {showDetails && (
+        <Text size="xs" c="dimmed">
+          {Math.round(isFahrenheit ? metricToImperial(weather.current.windspeed) : weather.current.windspeed)}{" "}
+          {isFahrenheit ? tCommon("unit.speed.milesPerHour") : tCommon("unit.speed.kilometersPerHour")}
+        </Text>
+      )}
+      <WidgetQueryErrorIndicator error={weatherQuery.error} label={t("widget.weather.name")} />
     </Stack>
   );
 };
diff --git a/packages/widgets/src/clock/index.ts b/packages/widgets/src/clock/index.ts
index 20b22d6a0..e7657b918 100644
--- a/packages/widgets/src/clock/index.ts
+++ b/packages/widgets/src/clock/index.ts
@@ -1,11 +1,28 @@
 import { IconClock } from "@tabler/icons-react";
 import dayjs from "dayjs";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("clock", {
   icon: IconClock,
+  queryKey: [["widget", "weather", "atLocation"]],
+  queryMatcher: ({ input }, scope) => {
+    const location = scope.options.weatherLocation;
+    if (
+      scope.options.showWeather !== true ||
+      location === null ||
+      typeof location !== "object" ||
+      !("latitude" in location) ||
+      !("longitude" in location)
+    ) {
+      return false;
+    }
+    return widgetQueryInputMatches(input, {
+      latitude: location.latitude,
+      longitude: location.longitude,
+    });
+  },
   createOptions() {
     return optionsBuilder.from(
       (factory) => ({
diff --git a/packages/widgets/src/common/action-target.module.css b/packages/widgets/src/common/action-target.module.css
new file mode 100644
index 000000000..28f6cc672
--- /dev/null
+++ b/packages/widgets/src/common/action-target.module.css
@@ -0,0 +1,11 @@
+.root {
+  min-width: 24px;
+  min-height: 24px;
+}
+
+@media (any-pointer: coarse) {
+  .root {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
diff --git a/packages/widgets/src/common/application-url.spec.ts b/packages/widgets/src/common/application-url.spec.ts
new file mode 100644
index 000000000..7866461bc
--- /dev/null
+++ b/packages/widgets/src/common/application-url.spec.ts
@@ -0,0 +1,30 @@
+import { describe, expect, test } from "vitest";
+
+import { getSafeApplicationUrl } from "./application-url";
+
+describe("getSafeApplicationUrl", () => {
+  test.each(["javascript:alert(1)", "data:text/html,test", "not a URL", "/relative", "./relative"])(
+    "rejects unsafe or non-absolute URL %s",
+    (value) => expect(getSafeApplicationUrl(value)).toBeUndefined(),
+  );
+
+  test("rejects credential-bearing URLs", () => {
+    expect(getSafeApplicationUrl("https://user:password@example.com/path")).toBeUndefined();
+    expect(getSafeApplicationUrl("/path", { baseUrl: "https://user:password@example.com" })).toBeUndefined();
+  });
+
+  test("allows absolute HTTP and HTTPS URLs", () => {
+    expect(getSafeApplicationUrl("http://example.com/path")).toBe("http://example.com/path");
+    expect(getSafeApplicationUrl("https://example.com/path?q=1#result")).toBe("https://example.com/path?q=1#result");
+  });
+
+  test("resolves feed-relative URLs only against a safe HTTP(S) base", () => {
+    expect(getSafeApplicationUrl("/story", { baseUrl: "https://example.com/feed.xml?token=secret" })).toBe(
+      "https://example.com/story",
+    );
+  });
+
+  test.each([undefined, null, ""])("rejects missing URL %s", (value) => {
+    expect(getSafeApplicationUrl(value)).toBeUndefined();
+  });
+});
diff --git a/packages/widgets/src/common/application-url.ts b/packages/widgets/src/common/application-url.ts
new file mode 100644
index 000000000..cfbef8abc
--- /dev/null
+++ b/packages/widgets/src/common/application-url.ts
@@ -0,0 +1 @@
+export { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "@homarr/common";
diff --git a/packages/widgets/src/common/integration-error-indicator.tsx b/packages/widgets/src/common/integration-error-indicator.tsx
new file mode 100644
index 000000000..6e9f27dd4
--- /dev/null
+++ b/packages/widgets/src/common/integration-error-indicator.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+interface IntegrationResult {
+  integrationId: string;
+  integrationName?: string;
+  error?: string;
+}
+
+interface IntegrationErrorIndicatorProps {
+  results: readonly IntegrationResult[];
+}
+
+export function IntegrationErrorIndicator({ results }: IntegrationErrorIndicatorProps) {
+  const t = useScopedI18n("common");
+  const failed = results.filter((result) => Boolean(result.error));
+  if (failed.length === 0) return null;
+
+  const names = failed.map((result) => result.integrationName ?? result.integrationId).join(", ");
+  const label = `${t("error")}: ${names}`;
+  return (
+    <Tooltip label={label} position="left" withArrow>
+      <ActionIcon variant="transparent" color="orange" size={28} aria-label={label} style={{ cursor: "help" }}>
+        <IconAlertTriangle aria-hidden size={14} />
+      </ActionIcon>
+    </Tooltip>
+  );
+}
diff --git a/packages/widgets/src/common/locale.spec.ts b/packages/widgets/src/common/locale.spec.ts
new file mode 100644
index 000000000..9cae44936
--- /dev/null
+++ b/packages/widgets/src/common/locale.spec.ts
@@ -0,0 +1,39 @@
+import { describe, expect, test } from "vitest";
+
+import { formatLocalizedCompactNumber, formatLocalizedDate, formatLocalizedTime, getBinaryStatusKey } from "./locale";
+
+const sample = new Date("2026-01-02T13:05:09.000Z");
+
+describe("localized widget formatting", () => {
+  test.each([
+    ["en-US", /Jan/],
+    ["fr-FR", /janv/i],
+    ["de-DE", /Jan/],
+    ["he-IL", /[\u0590-\u05ff]/],
+  ])("formats dates for %s", (locale, expected) => {
+    expect(
+      formatLocalizedDate(sample, locale, { weekday: "short", month: "short", day: "numeric", timeZone: "UTC" }),
+    ).toMatch(expected);
+  });
+
+  test("supports explicit 12-hour and 24-hour clocks", () => {
+    expect(formatLocalizedTime(sample, "en-US", { hour12: true, timeZone: "UTC" })).toBe("1:05 PM");
+    expect(formatLocalizedTime(sample, "en-US", { hour12: false, timeZone: "UTC" })).toBe("13:05");
+  });
+
+  test("keeps date-only values on the requested calendar day", () => {
+    expect(formatLocalizedDate("2026-08-03", "en-US", { month: "long", day: "numeric" })).toBe("August 3");
+  });
+
+  test("localizes compact numbers", () => {
+    expect(formatLocalizedCompactNumber(1_234_567, "en-US")).toBe("1.2M");
+    expect(formatLocalizedCompactNumber(1_234_567, "fr-FR")).toContain("1,2");
+    expect(formatLocalizedCompactNumber(1_234_567, "de-DE")).toContain("Mio.");
+  });
+
+  test("normalizes binary status for translated accessibility labels", () => {
+    expect(getBinaryStatusKey("enabled")).toBe("enabled");
+    expect(getBinaryStatusKey("disabled")).toBe("disabled");
+    expect(getBinaryStatusKey()).toBe("unknown");
+  });
+});
diff --git a/packages/widgets/src/common/locale.ts b/packages/widgets/src/common/locale.ts
new file mode 100644
index 000000000..3d1c6bf3f
--- /dev/null
+++ b/packages/widgets/src/common/locale.ts
@@ -0,0 +1,72 @@
+export type LocalizedDateValue = Date | number | string;
+
+const dateOnlyPattern = /^\d{4}-\d{2}-\d{2}$/;
+
+interface LocalizedTimeOptions {
+  hour12?: boolean;
+  includeSeconds?: boolean;
+  timeZone?: string;
+}
+
+const toValidDate = (value: LocalizedDateValue): Date | undefined => {
+  const date =
+    value instanceof Date
+      ? value
+      : new Date(typeof value === "string" && dateOnlyPattern.test(value) ? `${value}T00:00:00Z` : value);
+  return Number.isNaN(date.getTime()) ? undefined : date;
+};
+
+export const formatLocalizedDate = (
+  value: LocalizedDateValue,
+  locale: string,
+  options: Intl.DateTimeFormatOptions,
+  fallback = "?",
+): string => {
+  const date = toValidDate(value);
+  if (!date) return fallback;
+
+  const normalizedOptions =
+    typeof value === "string" && dateOnlyPattern.test(value) && options.timeZone === undefined
+      ? { ...options, timeZone: "UTC" }
+      : options;
+  return new Intl.DateTimeFormat(locale, normalizedOptions).format(date);
+};
+
+export const formatLocalizedTime = (
+  value: LocalizedDateValue,
+  locale: string,
+  { hour12, includeSeconds = false, timeZone }: LocalizedTimeOptions = {},
+  fallback = "?",
+): string =>
+  formatLocalizedDate(
+    value,
+    locale,
+    {
+      hour: "numeric",
+      minute: "2-digit",
+      second: includeSeconds ? "2-digit" : undefined,
+      hour12,
+      timeZone,
+    },
+    fallback,
+  );
+
+export const formatLocalizedDateTime = (
+  value: LocalizedDateValue,
+  locale: string,
+  options: Pick<LocalizedTimeOptions, "hour12" | "timeZone"> = {},
+  fallback = "?",
+): string =>
+  formatLocalizedDate(
+    value,
+    locale,
+    { dateStyle: "medium", timeStyle: "short", hour12: options.hour12, timeZone: options.timeZone },
+    fallback,
+  );
+
+export const formatLocalizedCompactNumber = (value: number, locale: string): string =>
+  new Intl.NumberFormat(locale, { notation: "compact" }).format(value);
+
+export type BinaryStatusKey = "enabled" | "disabled" | "unknown";
+
+export const getBinaryStatusKey = (status?: "enabled" | "disabled"): BinaryStatusKey => status ?? "unknown";
diff --git a/packages/widgets/src/common/query-state-indicator.spec.ts b/packages/widgets/src/common/query-state-indicator.spec.ts
new file mode 100644
index 000000000..86da6f64b
--- /dev/null
+++ b/packages/widgets/src/common/query-state-indicator.spec.ts
@@ -0,0 +1,72 @@
+// @vitest-environment jsdom
+
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "./query-state-indicator";
+
+vi.mock("@homarr/translation/client", () => ({
+  useScopedI18n: () => (key: string, values?: { widget?: string }) => {
+    if (key === "stale") return `Could not refresh ${values?.widget}; showing saved data`;
+    if (key === "loading") return "Loading widget data";
+    return key;
+  },
+}));
+
+const matchMedia = (query: string) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: () => undefined,
+  removeListener: () => undefined,
+  addEventListener: () => undefined,
+  removeEventListener: () => undefined,
+  dispatchEvent: () => false,
+});
+
+describe("WidgetQueryErrorIndicator", () => {
+  let host: HTMLDivElement | undefined;
+  let root: ReturnType<typeof createRoot> | undefined;
+
+  afterEach(async () => {
+    if (root) await act(async () => root?.unmount());
+    host?.remove();
+    vi.unstubAllGlobals();
+  });
+
+  test("uses a localized label without exposing the raw failure", async () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal("matchMedia", matchMedia);
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+    const secret = "http://admin:password@private.local/path?token=secret";
+
+    await act(async () =>
+      root?.render(
+        createElement(
+          MantineProvider,
+          null,
+          createElement(WidgetQueryErrorIndicator, { error: new Error(secret), label: "Weather" }),
+        ),
+      ),
+    );
+
+    expect(host.querySelector("[aria-label='Could not refresh Weather; showing saved data']")).not.toBeNull();
+    expect(host.textContent).not.toMatch(/password|private\.local|token=secret/);
+  });
+
+  test("announces the loading state to assistive technology", async () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal("matchMedia", matchMedia);
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+
+    await act(async () => root?.render(createElement(MantineProvider, null, createElement(WidgetQueryLoadingState))));
+
+    expect(host.querySelector("output")?.textContent).toContain("Loading widget data");
+  });
+});
diff --git a/packages/widgets/src/common/query-state-indicator.tsx b/packages/widgets/src/common/query-state-indicator.tsx
new file mode 100644
index 000000000..dbd2c5a69
--- /dev/null
+++ b/packages/widgets/src/common/query-state-indicator.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { ActionIcon, Center, Loader, Tooltip, VisuallyHidden } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+interface WidgetQueryErrorIndicatorProps {
+  error: unknown;
+  label: string;
+}
+
+/** Localized warning for stale or optional-query failures. Never renders the raw error. */
+export function WidgetQueryErrorIndicator({ error, label }: WidgetQueryErrorIndicatorProps) {
+  const t = useScopedI18n("common.widgetQuery");
+  if (!error) return null;
+
+  const accessibleLabel = t("stale", { widget: label });
+  return (
+    <Tooltip label={accessibleLabel} position="left" withArrow>
+      <ActionIcon
+        component="span"
+        color="orange"
+        variant="subtle"
+        size="sm"
+        role="note"
+        aria-label={accessibleLabel}
+        tabIndex={0}
+        style={{ cursor: "help" }}
+      >
+        <IconAlertTriangle aria-hidden size={14} />
+      </ActionIcon>
+    </Tooltip>
+  );
+}
+
+export function WidgetQueryLoadingState() {
+  const t = useScopedI18n("common.widgetQuery");
+  return (
+    <Center component="output" h="100%" w="100%" p="sm" aria-live="polite">
+      <Loader size="sm" />
+      <VisuallyHidden>{t("loading")}</VisuallyHidden>
+    </Center>
+  );
+}
diff --git a/packages/widgets/src/common/query-state.spec.ts b/packages/widgets/src/common/query-state.spec.ts
new file mode 100644
index 000000000..c90c0ae50
--- /dev/null
+++ b/packages/widgets/src/common/query-state.spec.ts
@@ -0,0 +1,31 @@
+import { describe, expect, test } from "vitest";
+
+import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "./query-state";
+
+describe("getUsableWidgetQueryData", () => {
+  test.each([[], null, 0, false, ""])("preserves successful empty value %#", (data) => {
+    expect(getUsableWidgetQueryData({ data, error: null })).toBe(data);
+  });
+
+  test("preserves stale cached data when a refetch fails", () => {
+    const data = [{ id: "healthy" }];
+    expect(getUsableWidgetQueryData({ data, error: new Error("offline") })).toBe(data);
+  });
+
+  test("throws a terminal failure when no usable data exists", () => {
+    const error = new Error("offline");
+    expect(() => getUsableWidgetQueryData({ data: undefined, error })).toThrow(error);
+  });
+
+  test("keeps the initial pending state when neither data nor an error exists", () => {
+    expect(getUsableWidgetQueryData({ data: undefined, error: null })).toBeUndefined();
+  });
+});
+
+describe("isInitialWidgetQueryPending", () => {
+  test("only marks the unresolved first request as initial pending", () => {
+    expect(isInitialWidgetQueryPending({ data: undefined, error: null, isPending: true })).toBe(true);
+    expect(isInitialWidgetQueryPending({ data: [], error: null, isPending: true })).toBe(false);
+    expect(isInitialWidgetQueryPending({ data: undefined, error: new Error("offline"), isPending: true })).toBe(false);
+  });
+});
diff --git a/packages/widgets/src/common/query-state.ts b/packages/widgets/src/common/query-state.ts
new file mode 100644
index 000000000..a83066c0b
--- /dev/null
+++ b/packages/widgets/src/common/query-state.ts
@@ -0,0 +1,18 @@
+interface WidgetQueryState {
+  data: unknown;
+  error: unknown;
+}
+
+interface PendingWidgetQueryState extends WidgetQueryState {
+  isPending: boolean;
+}
+
+/** Throws terminal query failures while preserving successful empty values and stale cached data. */
+export const getUsableWidgetQueryData = <TQuery extends WidgetQueryState>(query: TQuery): TQuery["data"] => {
+  if (query.error && query.data === undefined) throw query.error;
+  return query.data;
+};
+
+/** True only before the first result; successful empty values and cached data are both ready to render. */
+export const isInitialWidgetQueryPending = ({ data, error, isPending }: PendingWidgetQueryState): boolean =>
+  isPending && data === undefined && !error;
diff --git a/packages/widgets/src/coolify/component.tsx b/packages/widgets/src/coolify/component.tsx
index 46940f56e..83449f190 100644
--- a/packages/widgets/src/coolify/component.tsx
+++ b/packages/widgets/src/coolify/component.tsx
@@ -1,16 +1,17 @@
 "use client";
 
-import { ScrollArea, Stack, Text } from "@mantine/core";
+import { ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { createWidgetKey } from "./coolify-utils";
 import { InstanceCard } from "./instance-card";
 import { SingleInstanceLayout } from "./single-instance-layout";
 
-export default function CoolifyWidget({ options, integrationIds, width }: WidgetComponentProps<"coolify">) {
+export default function CoolifyWidget({ options, integrationIds, width, height }: WidgetComponentProps<"coolify">) {
   const t = useScopedI18n("widget.coolify");
 
   if (integrationIds.length === 0) {
@@ -21,29 +22,54 @@ export default function CoolifyWidget({ options, integrationIds, width }: Widget
     );
   }
 
-  return <CoolifyContent integrationIds={integrationIds} options={options} width={width} />;
+  return <CoolifyContent integrationIds={integrationIds} options={options} width={width} height={height} />;
 }
 
 interface CoolifyContentProps {
   integrationIds: string[];
   options: WidgetComponentProps<"coolify">["options"];
   width: number;
+  height: number;
 }
 
-function CoolifyContent({ integrationIds, options, width }: CoolifyContentProps) {
-  const { data: instancesData = [] } = clientApi.widget.coolify.getInstancesInfo.useQuery({ integrationIds });
+function CoolifyContent({ integrationIds, options, width, height }: CoolifyContentProps) {
+  const t = useScopedI18n("common");
+  const instancesQuery = clientApi.widget.coolify.getInstancesInfo.useQuery({
+    integrationIds,
+  });
+  const instancesData = getUsableWidgetQueryData(instancesQuery) ?? [];
+  const { isPending } = instancesQuery;
 
-  const isTiny = width < 256;
+  const isTiny = width < 256 || height < 144;
+  const hideFooter = height < 112;
   const [firstInstance] = instancesData;
   const widgetKey = createWidgetKey(integrationIds);
 
+  if (isPending) {
+    return (
+      <Stack align="center" justify="center" h="100%">
+        <Text c="dimmed" size="sm">
+          {t("action.loading")}
+        </Text>
+      </Stack>
+    );
+  }
+
   if (instancesData.length === 1 && firstInstance) {
-    return <SingleInstanceLayout instance={firstInstance} options={options} isTiny={isTiny} widgetKey={widgetKey} />;
+    return (
+      <SingleInstanceLayout
+        instance={firstInstance}
+        options={options}
+        isTiny={isTiny}
+        widgetKey={widgetKey}
+        hideFooter={hideFooter}
+      />
+    );
   }
 
   return (
     <ScrollArea h="100%">
-      <Stack gap="xs" p="xs">
+      <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="sm" p="xs">
         {instancesData.map((instance) => (
           <InstanceCard
             key={instance.integrationId}
@@ -51,9 +77,10 @@ function CoolifyContent({ integrationIds, options, width }: CoolifyContentProps)
             options={options}
             isTiny={isTiny}
             widgetKey={widgetKey}
+            hideFooter={hideFooter}
           />
         ))}
-      </Stack>
+      </SimpleGrid>
     </ScrollArea>
   );
 }
diff --git a/packages/widgets/src/coolify/coolify-utils.spec.ts b/packages/widgets/src/coolify/coolify-utils.spec.ts
new file mode 100644
index 000000000..0b9345861
--- /dev/null
+++ b/packages/widgets/src/coolify/coolify-utils.spec.ts
@@ -0,0 +1,29 @@
+import dayjs from "dayjs";
+import frenchLocale from "dayjs/locale/fr";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { formatRelativeTime, getResourceTimestamp } from "./coolify-utils";
+
+describe("Coolify time formatting", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-08-02T12:00:00Z"));
+    dayjs.locale(frenchLocale);
+  });
+
+  afterEach(() => {
+    dayjs.locale("en");
+    vi.useRealTimers();
+  });
+
+  it("uses the active Day.js locale for past and future timestamps", () => {
+    expect(formatRelativeTime("2026-08-02T11:00:00Z")).toBe("il y a une heure");
+    expect(formatRelativeTime("2026-08-02T13:00:00Z")).toBe("dans une heure");
+  });
+
+  it("omits missing, invalid, and currently running timestamps", () => {
+    expect(formatRelativeTime(undefined)).toBeUndefined();
+    expect(formatRelativeTime("invalid")).toBeUndefined();
+    expect(getResourceTimestamp({ status: "running", updated_at: "2026-08-02T11:00:00Z" }, "service")).toBeUndefined();
+  });
+});
diff --git a/packages/widgets/src/coolify/coolify-utils.ts b/packages/widgets/src/coolify/coolify-utils.ts
index 7bf4f50cb..89343af93 100644
--- a/packages/widgets/src/coolify/coolify-utils.ts
+++ b/packages/widgets/src/coolify/coolify-utils.ts
@@ -1,9 +1,14 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
 import type {
   CoolifyApplicationWithContext,
   CoolifyServer,
   CoolifyServiceWithContext,
 } from "@homarr/integrations/types";
 
+dayjs.extend(relativeTime);
+
 export function parseStatus(status: string): string {
   const firstPart = status.split(":")[0]?.toLowerCase();
   if (!firstPart) return "unknown";
@@ -42,26 +47,8 @@ export function getBadgeColor(running: number, total: number): string {
 
 export function formatRelativeTime(dateString: string | null | undefined): string | undefined {
   if (!dateString) return undefined;
-  const date = new Date(dateString);
-  if (isNaN(date.getTime())) return undefined;
-
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffSec = Math.floor(diffMs / 1000);
-  const diffMin = Math.floor(diffSec / 60);
-  const diffHour = Math.floor(diffMin / 60);
-  const diffDay = Math.floor(diffHour / 24);
-
-  if (diffDay > 0) {
-    const remainingHours = diffHour % 24;
-    return remainingHours > 0 ? `${diffDay}d ${remainingHours}h ago` : `${diffDay}d ago`;
-  }
-  if (diffHour > 0) {
-    const remainingMin = diffMin % 60;
-    return remainingMin > 0 ? `${diffHour}h ${remainingMin}m ago` : `${diffHour}h ago`;
-  }
-  if (diffMin > 0) return `${diffMin}m ago`;
-  return "just now";
+  const date = dayjs(dateString);
+  return date.isValid() ? date.fromNow() : undefined;
 }
 
 export function getResourceTimestamp(
@@ -116,7 +103,7 @@ export function buildServerResourceCounts(
 }
 
 export function createWidgetKey(integrationIds: string[]): string {
-  return integrationIds.slice().sort().join("-");
+  return integrationIds.toSorted().join("-");
 }
 
 export function createStorageKey(widgetKey: string, integrationId: string, type: "sections" | "show-ip"): string {
diff --git a/packages/widgets/src/coolify/index.ts b/packages/widgets/src/coolify/index.ts
index cebf9de05..5aad13a33 100644
--- a/packages/widgets/src/coolify/index.ts
+++ b/packages/widgets/src/coolify/index.ts
@@ -4,6 +4,7 @@ import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("coolify", {
+  supportsAdvancedFocus: false,
   icon: IconCloud,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/coolify/instance-card.tsx b/packages/widgets/src/coolify/instance-card.tsx
index 0f4522dc4..a085f0ef5 100644
--- a/packages/widgets/src/coolify/instance-card.tsx
+++ b/packages/widgets/src/coolify/instance-card.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import { Accordion, Anchor, Badge, Card, Group, Image, Text } from "@mantine/core";
+import { Accordion, Anchor, Badge, Card, Group, Image, Text, Tooltip } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 
 import { useTimeAgo } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { ApplicationsSection } from "./applications-section";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import { buildServerResourceCounts, getBadgeColor, parseStatus } from "./coolify-utils";
 import { ServersSection } from "./servers-section";
 import { ServicesSection } from "./services-section";
@@ -18,10 +19,12 @@ interface InstanceCardProps {
   options: CoolifyOptions;
   isTiny: boolean;
   widgetKey: string;
+  hideFooter: boolean;
 }
 
-export function InstanceCard({ instance, options, isTiny, widgetKey }: InstanceCardProps) {
+export function InstanceCard({ instance, options, isTiny, widgetKey, hideFooter }: InstanceCardProps) {
   const t = useScopedI18n("widget.coolify");
+  const tCommon = useScopedI18n("common");
   const cardKey = `${widgetKey}-${instance.integrationId}`;
   const [showIp, setShowIp] = useLocalStorage({
     key: `coolify-show-ip-${cardKey}`,
@@ -31,14 +34,13 @@ export function InstanceCard({ instance, options, isTiny, widgetKey }: InstanceC
     key: `coolify-sections-${cardKey}`,
     defaultValue: ["applications"],
   });
-
   const serverResourceCounts = buildServerResourceCounts(
     instance.instanceInfo.servers,
     instance.instanceInfo.applications,
     instance.instanceInfo.services,
   );
 
-  const baseUrl = instance.integrationUrl.replace(/\/+$/, "");
+  const baseUrl = getSafeApplicationUrl(instance.integrationUrl)?.replace(/\/+$/, "") ?? "";
   const relativeTime = useTimeAgo(instance.updatedAt);
 
   const onlineServers = instance.instanceInfo.servers.filter((s) => s.is_reachable !== false).length;
@@ -48,6 +50,23 @@ export function InstanceCard({ instance, options, isTiny, widgetKey }: InstanceC
   const runningServices = instance.instanceInfo.services.filter(
     (s) => parseStatus(s.status ?? "") === "running",
   ).length;
+  const healthyResources =
+    (options.showServers ? onlineServers : 0) +
+    (options.showApplications ? runningApps : 0) +
+    (options.showServices ? runningServices : 0);
+  const totalResources =
+    (options.showServers ? instance.instanceInfo.servers.length : 0) +
+    (options.showApplications ? instance.instanceInfo.applications.length : 0) +
+    (options.showServices ? instance.instanceInfo.services.length : 0);
+  const resourceSummary = [
+    options.showServers ? `${tCommon("servers")}: ${onlineServers}/${instance.instanceInfo.servers.length}` : null,
+    options.showApplications
+      ? `${tCommon("applications")}: ${runningApps}/${instance.instanceInfo.applications.length}`
+      : null,
+    options.showServices ? `${tCommon("services")}: ${runningServices}/${instance.instanceInfo.services.length}` : null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
 
   return (
     <Card p={0} radius="sm">
@@ -59,17 +78,33 @@ export function InstanceCard({ instance, options, isTiny, widgetKey }: InstanceC
       >
         <Group gap={4} wrap="nowrap">
           <Image src={COOLIFY_ICON_URL} alt="Coolify" w={16} h={16} />
-          <Anchor href={baseUrl} target="_blank" fz={isTiny ? "10px" : "xs"} fw={600} c="inherit" lineClamp={1}>
+          <Anchor
+            component={baseUrl ? "a" : "span"}
+            href={baseUrl}
+            target={baseUrl ? "_blank" : undefined}
+            rel={baseUrl ? SAFE_NEW_TAB_REL : undefined}
+            fz={isTiny ? "10px" : "xs"}
+            fw={600}
+            c="inherit"
+            lineClamp={1}
+          >
             {instance.integrationName}
           </Anchor>
         </Group>
         <Group gap={4} wrap="nowrap">
-          {options.showServers && (
+          {isTiny && totalResources > 0 ? (
+            <Tooltip label={resourceSummary}>
+              <Badge variant="dot" color={getBadgeColor(healthyResources, totalResources)} size="xs">
+                {healthyResources}/{totalResources}
+              </Badge>
+            </Tooltip>
+          ) : null}
+          {!isTiny && options.showServers && (
             <Badge variant="dot" color={getBadgeColor(onlineServers, instance.instanceInfo.servers.length)} size="xs">
               {onlineServers}/{instance.instanceInfo.servers.length}
             </Badge>
           )}
-          {options.showApplications && (
+          {!isTiny && options.showApplications && (
             <Badge
               variant="dot"
               color={getBadgeColor(runningApps, instance.instanceInfo.applications.length)}
@@ -78,7 +113,7 @@ export function InstanceCard({ instance, options, isTiny, widgetKey }: InstanceC
               {runningApps}/{instance.instanceInfo.applications.length}
             </Badge>
           )}
-          {options.showServices && (
+          {!isTiny && options.showServices && (
             <Badge
               variant="dot"
               color={getBadgeColor(runningServices, instance.instanceInfo.services.length)}
@@ -109,14 +144,20 @@ export function InstanceCard({ instance, options, isTiny, widgetKey }: InstanceC
         )}
       </Accordion>
 
-      <Group justify="space-between" p={4} style={{ borderTop: "1px solid var(--mantine-color-dark-4)" }}>
-        <Text size="10px" c="dimmed">
-          v{instance.instanceInfo.version}
-        </Text>
-        <Text size="10px" c="dimmed">
-          {t("footer.updated", { when: relativeTime })}
-        </Text>
-      </Group>
+      {!hideFooter && (
+        <Group
+          justify="space-between"
+          p={4}
+          style={{ borderTop: "1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))" }}
+        >
+          <Text size="10px" c="dimmed">
+            v{instance.instanceInfo.version}
+          </Text>
+          <Text size="10px" c="dimmed">
+            {t("footer.updated", { when: relativeTime })}
+          </Text>
+        </Group>
+      )}
     </Card>
   );
 }
diff --git a/packages/widgets/src/coolify/resource-row.tsx b/packages/widgets/src/coolify/resource-row.tsx
index 9f6cfe1ae..b13c629c1 100644
--- a/packages/widgets/src/coolify/resource-row.tsx
+++ b/packages/widgets/src/coolify/resource-row.tsx
@@ -1,8 +1,19 @@
 "use client";
 
-import { ActionIcon, Anchor, Group, Indicator, Stack, Text } from "@mantine/core";
-import { IconExternalLink, IconFileText, IconLink } from "@tabler/icons-react";
+import { ActionIcon, Anchor, Group, Stack, Text } from "@mantine/core";
+import {
+  IconCircleCheckFilled,
+  IconCircleXFilled,
+  IconFileText,
+  IconHelpCircleFilled,
+  IconLink,
+  IconLoader2,
+} from "@tabler/icons-react";
 
+import { useScopedI18n } from "@homarr/translation/client";
+
+import actionTargetClasses from "../common/action-target.module.css";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import { cleanFqdn, getResourceTimestamp, getStatusColor, parseStatus } from "./coolify-utils";
 
 interface ResourceRowProps {
@@ -24,52 +35,103 @@ interface ResourceRowProps {
 }
 
 export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRowProps) {
+  const t = useScopedI18n("widget.coolify");
   const status = parseStatus(item.status ?? "");
   const statusColor = getStatusColor(status);
+  const isTransitioning = status === "starting" || status === "restarting";
+  const StatusIcon =
+    status === "running"
+      ? IconCircleCheckFilled
+      : isTransitioning
+        ? IconLoader2
+        : status === "unknown"
+          ? IconHelpCircleFilled
+          : IconCircleXFilled;
+  const statusLabel =
+    status === "running"
+      ? t("status.running")
+      : status === "stopped"
+        ? t("status.stopped")
+        : status === "exited"
+          ? t("status.exited")
+          : status === "starting"
+            ? t("status.starting")
+            : status === "restarting"
+              ? t("status.restarting")
+              : t("status.unknown");
 
-  const resourceUrl =
+  const resourceUrl = getSafeApplicationUrl(
     item.projectUuid && item.environmentUuid
       ? `${baseUrl}/project/${item.projectUuid}/environment/${item.environmentUuid}/${resourceType}/${item.uuid}`
-      : undefined;
+      : undefined,
+  );
 
-  const logsUrl = resourceUrl ? `${resourceUrl}/logs` : undefined;
+  const logsUrl = getSafeApplicationUrl(resourceUrl ? `${resourceUrl}/logs` : undefined);
+  const publicUrl = getSafeApplicationUrl(cleanFqdn(item.fqdn));
+  const resourceTimestamp = getResourceTimestamp(item, resourceType);
 
   return (
     <Stack gap={0}>
       <Group wrap="nowrap" gap={isTiny ? 4 : "xs"}>
-        <Indicator size={isTiny ? 4 : 8} color={statusColor} />
+        <StatusIcon aria-label={statusLabel} size={isTiny ? 12 : 16} color={`var(--mantine-color-${statusColor}-6)`} />
         {resourceUrl ? (
-          <Anchor href={resourceUrl} target="_blank" fz={isTiny ? "8px" : "xs"} c="inherit" lineClamp={1}>
+          <Anchor
+            className={actionTargetClasses.root}
+            href={resourceUrl}
+            target="_blank"
+            rel={SAFE_NEW_TAB_REL}
+            fz="xs"
+            c="inherit"
+            truncate="end"
+            style={{ display: "inline-flex", alignItems: "center", overflow: "hidden" }}
+          >
             {item.name}
           </Anchor>
         ) : (
-          <Text lineClamp={1} fz={isTiny ? "8px" : "xs"}>
+          <Text lineClamp={1} fz="xs">
             {item.name}
           </Text>
         )}
       </Group>
       <Group wrap="nowrap" gap={4} ml={16}>
-        {cleanFqdn(item.fqdn) && (
-          <ActionIcon component="a" href={cleanFqdn(item.fqdn)} target="_blank" size="xs" variant="subtle" c="dimmed">
+        {publicUrl && (
+          <ActionIcon
+            className={actionTargetClasses.root}
+            component="a"
+            href={publicUrl}
+            target="_blank"
+            rel={SAFE_NEW_TAB_REL}
+            aria-label={t("action.openResource", { name: item.name })}
+            size="xs"
+            variant="subtle"
+            c="dimmed"
+          >
             <IconLink size={12} />
           </ActionIcon>
         )}
-        {resourceUrl && (
-          <ActionIcon component="a" href={resourceUrl} target="_blank" size="xs" variant="subtle" c="dimmed">
-            <IconExternalLink size={12} />
-          </ActionIcon>
-        )}
-        {logsUrl && (
-          <ActionIcon component="a" href={logsUrl} target="_blank" size="xs" variant="subtle" c="dimmed">
+        {!isTiny && logsUrl && (
+          <ActionIcon
+            className={actionTargetClasses.root}
+            component="a"
+            href={logsUrl}
+            target="_blank"
+            rel={SAFE_NEW_TAB_REL}
+            aria-label={t("action.openLogs", { name: item.name })}
+            size="xs"
+            variant="subtle"
+            c="dimmed"
+          >
             <IconFileText size={12} />
           </ActionIcon>
         )}
-        <Text fz="10px" c="dimmed" lineClamp={1}>
-          {item.projectName ?? "-"} / {item.environmentName ?? "-"}
-        </Text>
-        {getResourceTimestamp(item, resourceType) && (
+        {!isTiny && (
+          <Text fz="10px" c="dimmed" lineClamp={1}>
+            {item.projectName ?? "-"} / {item.environmentName ?? "-"}
+          </Text>
+        )}
+        {!isTiny && resourceTimestamp && (
           <Text fz="10px" c="dimmed" ml="auto">
-            {getResourceTimestamp(item, resourceType)}
+            {resourceTimestamp}
           </Text>
         )}
       </Group>
diff --git a/packages/widgets/src/coolify/servers-section.tsx b/packages/widgets/src/coolify/servers-section.tsx
index 543df1c67..2e79bfdf0 100644
--- a/packages/widgets/src/coolify/servers-section.tsx
+++ b/packages/widgets/src/coolify/servers-section.tsx
@@ -1,11 +1,13 @@
 "use client";
 
-import { Accordion, ActionIcon, Anchor, Badge, Group, Indicator, Stack, Text } from "@mantine/core";
-import { IconExternalLink, IconEye, IconEyeOff, IconServer } from "@tabler/icons-react";
+import { Accordion, ActionIcon, Anchor, Badge, Group, Stack, Text } from "@mantine/core";
+import { IconCircleCheckFilled, IconCircleXFilled, IconEye, IconEyeOff, IconServer } from "@tabler/icons-react";
 
 import type { CoolifyServer } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import actionTargetClasses from "../common/action-target.module.css";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import { getBadgeColor } from "./coolify-utils";
 
 interface ServersSectionProps {
@@ -31,27 +33,28 @@ export function ServersSection({
 
   return (
     <Accordion.Item value="servers">
-      <Accordion.Control icon={isTiny ? null : <IconServer size={16} />}>
-        <Group gap="xs" justify="space-between" wrap="nowrap" style={{ flex: 1 }}>
+      <Group gap={0} wrap="nowrap">
+        <Accordion.Control icon={isTiny ? null : <IconServer size={16} />} style={{ flex: 1, minWidth: 0 }}>
           <Group gap="xs">
             <Text size="xs">{tCommon("servers")}</Text>
             <Badge variant="dot" color={getBadgeColor(onlineServers, servers.length)} size="xs">
               {onlineServers} / {servers.length}
             </Badge>
           </Group>
-          <ActionIcon
-            size="xs"
-            variant="subtle"
-            c="dimmed"
-            onClick={(event) => {
-              event.stopPropagation();
-              onToggleIp();
-            }}
-          >
-            {showIp ? <IconEye size={12} /> : <IconEyeOff size={12} />}
-          </ActionIcon>
-        </Group>
-      </Accordion.Control>
+        </Accordion.Control>
+        <ActionIcon
+          className={actionTargetClasses.root}
+          aria-label={t(showIp ? "action.hideIp" : "action.showIp")}
+          aria-pressed={showIp}
+          size="xs"
+          variant="subtle"
+          c="dimmed"
+          mr="xs"
+          onClick={onToggleIp}
+        >
+          {showIp ? <IconEye size={12} /> : <IconEyeOff size={12} />}
+        </ActionIcon>
+      </Group>
       <Accordion.Panel p={4}>
         {servers.length > 0 ? (
           <Stack gap={4}>
@@ -90,13 +93,28 @@ function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps)
   const t = useScopedI18n("widget.coolify");
   const isBuildServer = server.settings?.is_build_server === true;
   const isOnline = server.is_reachable !== false;
-  const serverUrl = `${baseUrl}/server/${server.uuid}`;
+  const serverUrl = getSafeApplicationUrl(`${baseUrl}/server/${server.uuid}`);
+  const StatusIcon = isOnline ? IconCircleCheckFilled : IconCircleXFilled;
 
   return (
     <Stack gap={0}>
       <Group wrap="nowrap" gap={isTiny ? 4 : "xs"}>
-        <Indicator size={isTiny ? 4 : 8} color={isOnline ? "green" : "red"} />
-        <Anchor href={serverUrl} target="_blank" fz={isTiny ? "8px" : "xs"} c="inherit" lineClamp={1}>
+        <StatusIcon
+          aria-label={t(isOnline ? "status.online" : "status.offline")}
+          size={isTiny ? 12 : 16}
+          color={`var(--mantine-color-${isOnline ? "green" : "red"}-6)`}
+        />
+        <Anchor
+          className={actionTargetClasses.root}
+          component={serverUrl ? "a" : "span"}
+          href={serverUrl}
+          target={serverUrl ? "_blank" : undefined}
+          rel={serverUrl ? SAFE_NEW_TAB_REL : undefined}
+          fz="xs"
+          c="inherit"
+          truncate="end"
+          style={{ display: "inline-flex", alignItems: "center", overflow: "hidden" }}
+        >
           {server.name}
         </Anchor>
         {isBuildServer ? (
@@ -105,14 +123,11 @@ function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps)
           </Badge>
         ) : (
           <Text fz="10px" c="dimmed">
-            ({counts.apps} apps / {counts.services} svcs)
+            ({t("server.resourceCounts", { applications: counts.apps, services: counts.services })})
           </Text>
         )}
       </Group>
       <Group wrap="nowrap" gap={4} ml={16}>
-        <ActionIcon component="a" href={serverUrl} target="_blank" size="xs" variant="subtle" c="dimmed">
-          <IconExternalLink size={12} />
-        </ActionIcon>
         <Text fz="10px" c="dimmed">
           {showIp ? server.ip : "***.***.***.***"}
         </Text>
diff --git a/packages/widgets/src/coolify/single-instance-layout.tsx b/packages/widgets/src/coolify/single-instance-layout.tsx
index ae44b998f..fc3455b2d 100644
--- a/packages/widgets/src/coolify/single-instance-layout.tsx
+++ b/packages/widgets/src/coolify/single-instance-layout.tsx
@@ -7,6 +7,7 @@ import { useTimeAgo } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { ApplicationsSection } from "./applications-section";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import { buildServerResourceCounts } from "./coolify-utils";
 import { ServersSection } from "./servers-section";
 import { ServicesSection } from "./services-section";
@@ -18,9 +19,10 @@ interface SingleInstanceLayoutProps {
   options: CoolifyOptions;
   isTiny: boolean;
   widgetKey: string;
+  hideFooter: boolean;
 }
 
-export function SingleInstanceLayout({ instance, options, isTiny, widgetKey }: SingleInstanceLayoutProps) {
+export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, hideFooter }: SingleInstanceLayoutProps) {
   const t = useScopedI18n("widget.coolify");
   const [showIp, setShowIp] = useLocalStorage({
     key: `coolify-show-ip-${widgetKey}`,
@@ -30,15 +32,14 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey }: S
     key: `coolify-sections-${widgetKey}`,
     defaultValue: ["applications"],
   });
-
   const serverResourceCounts = buildServerResourceCounts(
     instance.instanceInfo.servers,
     instance.instanceInfo.applications,
     instance.instanceInfo.services,
   );
 
-  const baseUrl = instance.integrationUrl.replace(/\/+$/, "");
-  const displayUrl = baseUrl.replace(/^https?:\/\//, "");
+  const baseUrl = getSafeApplicationUrl(instance.integrationUrl)?.replace(/\/+$/, "") ?? "";
+  const displayUrl = baseUrl ? baseUrl.replace(/^https?:\/\//, "") : "—";
   const relativeTime = useTimeAgo(instance.updatedAt);
 
   return (
@@ -51,7 +52,16 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey }: S
               oolify
             </Text>
           </Group>
-          <Anchor href={baseUrl} target="_blank" fz={isTiny ? "xs" : "sm"} fw={500} c="dimmed" lineClamp={1}>
+          <Anchor
+            component={baseUrl ? "a" : "span"}
+            href={baseUrl}
+            target={baseUrl ? "_blank" : undefined}
+            rel={baseUrl ? SAFE_NEW_TAB_REL : undefined}
+            fz={isTiny ? "xs" : "sm"}
+            fw={500}
+            c="dimmed"
+            lineClamp={1}
+          >
             {displayUrl}
           </Anchor>
         </Group>
@@ -75,21 +85,23 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey }: S
           )}
         </Accordion>
 
-        <Group
-          justify="space-between"
-          p={4}
-          style={{ borderTop: "1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))" }}
-        >
-          <Group gap={2}>
-            <Image src={COOLIFY_ICON_URL} alt="Coolify" w={16} h={16} />
+        {!hideFooter && (
+          <Group
+            justify="space-between"
+            p={4}
+            style={{ borderTop: "1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))" }}
+          >
+            <Group gap={2}>
+              <Image src={COOLIFY_ICON_URL} alt="Coolify" w={16} h={16} />
+              <Text size="xs" c="dimmed">
+                v{instance.instanceInfo.version}
+              </Text>
+            </Group>
             <Text size="xs" c="dimmed">
-              v{instance.instanceInfo.version}
+              {t("footer.updated", { when: relativeTime })}
             </Text>
           </Group>
-          <Text size="xs" c="dimmed">
-            {t("footer.updated", { when: relativeTime })}
-          </Text>
-        </Group>
+        )}
       </Stack>
     </ScrollArea>
   );
diff --git a/packages/widgets/src/custom-api/component.tsx b/packages/widgets/src/custom-api/component.tsx
index ea89301d8..05e8775af 100644
--- a/packages/widgets/src/custom-api/component.tsx
+++ b/packages/widgets/src/custom-api/component.tsx
@@ -1,493 +1,132 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import { useState } from "react";
-import type { ComponentType } from "react";
-import {
-  ActionIcon,
-  Button,
-  Card,
-  Center,
-  Code,
-  Flex,
-  Group,
-  Loader,
-  Progress,
-  ScrollArea,
-  SimpleGrid,
-  Stack,
-  Table,
-  Text,
-  Title,
-  Tooltip,
-} from "@mantine/core";
-import { useElementSize } from "@mantine/hooks";
-import { IconAlertTriangle, IconCheck, IconExternalLink, IconPlayerPlay } from "@tabler/icons-react";
+import { Button, Center, Loader, Stack, Text } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import { useConfirmModal } from "@homarr/modals";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useSession } from "@homarr/auth/client";
 import { useScopedI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 
 import type { WidgetComponentProps } from "../definition";
+import { isLegacyCustomWidgetMigrationError, isTerminalCustomWidgetDefinitionError } from "./migration-state";
 
 const CustomJsxDisplay = dynamic(() => import("./custom-jsx-display"), { ssr: false });
 
-const valueSizeMap: Record<string, string> = { sm: "sm", md: "md", lg: "lg", xl: "xl" };
-
-function SingleValueDisplay({ data }: { data: Record<string, unknown> }) {
-  const size = valueSizeMap[(data.valueSize as string) ?? "lg"] ?? "lg";
-  const labelAbove = (data.labelPosition as string) === "above";
-  const label = data.label ? (
-    <Text c="dimmed" size="sm">
-      {String(data.label)}
-    </Text>
-  ) : null;
-
-  return (
-    <Stack h="100%" align="center" justify="center" gap="xs">
-      {labelAbove && label}
-      <Title order={size === "xl" ? 1 : size === "lg" ? 2 : size === "md" ? 3 : 4}>
-        {String(data.value ?? "—")}
-        {data.unit ? ` ${data.unit}` : ""}
-      </Title>
-      {!labelAbove && label}
-    </Stack>
-  );
-}
-
-function KeyValueDisplay({ data }: { data: Record<string, unknown> }) {
-  const entries = (data.entries as Array<{ label: string; unit: string; value: unknown }>) ?? [];
-  const layout = (data.layout as string) ?? "list";
-  const columns = (data.columns as number) ?? 2;
-
-  if (layout === "grid") {
-    return (
-      <SimpleGrid cols={columns} spacing="xs" p="sm" h="100%">
-        {entries.map((entry, i) => (
-          <Stack key={i} align="center" gap={2}>
-            <Text size="sm" fw={600}>
-              {String(entry.value ?? "—")}
-              {entry.unit ? ` ${entry.unit}` : ""}
-            </Text>
-            <Text size="xs" c="dimmed">
-              {entry.label}
-            </Text>
-          </Stack>
-        ))}
-      </SimpleGrid>
-    );
-  }
-
-  return (
-    <Stack h="100%" justify="center" gap="xs" p="sm">
-      {entries.map((entry, i) => (
-        <Group key={i} justify="space-between" wrap="nowrap">
-          <Text size="sm" c="dimmed">
-            {entry.label}
-          </Text>
-          <Text size="sm" fw={600}>
-            {String(entry.value ?? "—")}
-            {entry.unit ? ` ${entry.unit}` : ""}
-          </Text>
-        </Group>
-      ))}
-    </Stack>
-  );
-}
-
-function TableDisplay({ data }: { data: Record<string, unknown> }) {
-  const columns = (data.columns as string[]) ?? [];
-  const rows = (data.rows as unknown[][]) ?? [];
-  const striped = (data.striped as boolean) ?? true;
-  const compact = (data.compact as boolean) ?? false;
-
-  return (
-    <ScrollArea>
-      <Table striped={striped} highlightOnHover withTableBorder>
-        <Table.Thead>
-          <Table.Tr>
-            {columns.map((col, i) => (
-              <Table.Th key={i} py={compact ? 4 : undefined}>
-                {col}
-              </Table.Th>
-            ))}
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {rows.map((row, i) => (
-            <Table.Tr key={i}>
-              {row.map((cell, j) => (
-                <Table.Td key={j} py={compact ? 2 : undefined}>
-                  {String(cell ?? "—")}
-                </Table.Td>
-              ))}
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
-    </ScrollArea>
-  );
-}
-
-function StatGridCard({
-  item,
-  cardStyle,
-}: {
-  item: { label: string; unit: string; color: string; value: unknown };
-  cardStyle: string;
-}) {
-  const { ref, height, width } = useElementSize();
-  const isWide = width > height + 20;
-  const hideLabel = height > 0 && height <= 38;
-
-  const bgMap: Record<string, string> = {
-    filled: `var(--mantine-color-${item.color}-light)`,
-    outline: "transparent",
-    subtle: `var(--mantine-color-${item.color}-light)`,
-  };
-
-  return (
-    <Card
-      ref={ref}
-      p="sm"
-      radius="md"
-      bg={bgMap[cardStyle] ?? bgMap.filled}
-      withBorder={cardStyle === "outline"}
-      h="100%"
-      style={{ flex: 1 }}
-    >
-      <Flex
-        h="100%"
-        w="100%"
-        align="center"
-        justify="center"
-        direction={isWide ? "row" : "column"}
-        gap={isWide ? 8 : 4}
-      >
-        <Flex direction="column" align={isWide ? "flex-start" : "center"} gap={0}>
-          <Text size="md" fw={700} ta="center" lh={1.1}>
-            {String(item.value ?? "—")}
-            {item.unit ? ` ${item.unit}` : ""}
-          </Text>
-          {!hideLabel && (
-            <Text size="xs" c="dimmed" ta="center" tt="uppercase" lh={1.3} style={{ letterSpacing: "0.03em" }}>
-              {item.label}
-            </Text>
-          )}
-        </Flex>
-      </Flex>
-    </Card>
-  );
-}
-
-function StatGridDisplay({ data }: { data: Record<string, unknown> }) {
-  const items = (data.items as Array<{ label: string; unit: string; color: string; value: unknown }>) ?? [];
-  const columns = (data.columns as number) ?? 2;
-  const cardStyle = (data.cardStyle as string) ?? "filled";
-
-  return (
-    <SimpleGrid
-      cols={columns}
-      spacing="xs"
-      p="xs"
-      h="100%"
-      style={{ gridTemplateRows: `repeat(${Math.ceil(items.length / columns)}, 1fr)` }}
-    >
-      {items.map((item, i) => (
-        <StatGridCard key={i} item={item} cardStyle={cardStyle} />
-      ))}
-    </SimpleGrid>
-  );
-}
-
-function ProgressBarsDisplay({ data }: { data: Record<string, unknown> }) {
-  const bars = (data.bars as Array<{ label: string; unit: string; color: string; value: number; max?: number }>) ?? [];
-  const showPercentage = (data.showPercentage as boolean) ?? true;
-  const barSize = (data.barSize as string) ?? "md";
-
-  const sizeMap: Record<string, number> = { sm: 8, md: 14, lg: 22 };
-
-  return (
-    <Stack h="100%" justify="center" gap="sm" p="sm">
-      {bars.map((bar, i) => {
-        const max = bar.max ?? 100;
-        const pct = max > 0 ? Math.min((bar.value / max) * 100, 100) : 0;
-        return (
-          <Stack key={i} gap={4}>
-            <Group justify="space-between" wrap="nowrap">
-              <Text size="xs" fw={500}>
-                {bar.label}
-              </Text>
-              <Text size="xs" c="dimmed">
-                {showPercentage ? `${pct.toFixed(0)}%` : `${bar.value}${bar.unit ? ` ${bar.unit}` : ""}`}
-                {bar.max !== undefined && showPercentage
-                  ? ` (${bar.value}/${max}${bar.unit ? ` ${bar.unit}` : ""})`
-                  : ""}
-              </Text>
-            </Group>
-            <Progress value={pct} size={sizeMap[barSize] ?? 14} color={bar.color} radius="sm" />
-          </Stack>
-        );
-      })}
-    </Stack>
-  );
-}
-
-function StatusIndicatorDisplay({ data }: { data: Record<string, unknown> }) {
-  const items = (data.items as Array<{ label: string; value: string; isGood: boolean }>) ?? [];
-  const layout = (data.layout as string) ?? "list";
-  const dotSize = (data.dotSize as string) ?? "md";
-
-  const dotSizeMap: Record<string, number> = { sm: 8, md: 10, lg: 14 };
-  const size = dotSizeMap[dotSize] ?? 10;
-
-  const renderItem = (item: { label: string; value: string; isGood: boolean }, i: number) => (
-    <Group key={i} gap="xs" wrap="nowrap">
-      <div
-        style={{
-          width: size,
-          height: size,
-          borderRadius: "50%",
-          backgroundColor: item.isGood ? "var(--mantine-color-green-6)" : "var(--mantine-color-red-6)",
-          flexShrink: 0,
-        }}
-      />
-      <Text size="sm" fw={500}>
-        {item.label}
-      </Text>
-      <Text size="xs" c="dimmed" ml="auto">
-        {item.value}
-      </Text>
-    </Group>
-  );
-
-  if (layout === "grid") {
-    return (
-      <SimpleGrid cols={2} spacing="xs" p="sm" h="100%">
-        {items.map(renderItem)}
-      </SimpleGrid>
-    );
-  }
-
-  return (
-    <Stack h="100%" justify="center" gap="xs" p="sm">
-      {items.map(renderItem)}
-    </Stack>
-  );
-}
-
-function CountGridDisplay({ data }: { data: Record<string, unknown> }) {
-  const items = (data.items as Array<{ label: string; unit: string; value: unknown }>) ?? [];
-  const columns = (data.columns as number) ?? 2;
-  const valueSize = (data.valueSize as string) ?? "md";
-
-  const sizeMap: Record<string, string> = { sm: "sm", md: "md", lg: "lg" };
-
-  return (
-    <SimpleGrid cols={columns} spacing="xs" p="sm" h="100%">
-      {items.map((item, i) => (
-        <Stack key={i} align="center" justify="center" gap={0}>
-          <Text size={sizeMap[valueSize] ?? "md"} fw={700} lh={1.2}>
-            {String(item.value ?? "—")}
-            {item.unit ? ` ${item.unit}` : ""}
-          </Text>
-          <Text size="xs" c="dimmed" tt="uppercase" ta="center" lh={1.3} style={{ letterSpacing: "0.03em" }}>
-            {item.label}
-          </Text>
-        </Stack>
-      ))}
-    </SimpleGrid>
-  );
-}
-
-function openJsonInBrowser(json: unknown) {
-  const blob = new Blob([JSON.stringify(json, null, 2)], { type: "application/json" });
-  const blobUrl = URL.createObjectURL(blob);
-  window.open(blobUrl);
-  setTimeout(() => URL.revokeObjectURL(blobUrl), 60_000);
-}
-
-function RawDisplay({ data }: { data: Record<string, unknown> }) {
-  const maxHeight = (data.maxHeight as number) ?? 300;
-  const jsonString = JSON.stringify(data.data, null, 2);
-
-  return (
-    <Stack gap={4} p="xs">
-      <Group justify="flex-end">
-        <Tooltip label="Open in browser JSON viewer">
-          <ActionIcon variant="subtle" size="sm" onClick={() => openJsonInBrowser(data.data)}>
-            <IconExternalLink size={14} />
-          </ActionIcon>
-        </Tooltip>
-      </Group>
-      <ScrollArea mah={maxHeight}>
-        <Code block style={{ fontSize: 12 }}>
-          {jsonString}
-        </Code>
-      </ScrollArea>
-    </Stack>
-  );
-}
-
-function ActionButtonDisplay({ data }: { data: Record<string, unknown> }) {
+export default function CustomApiWidget({
+  options,
+  itemId,
+  isEditMode,
+  removeItem,
+}: WidgetComponentProps<"customApi">) {
   const t = useScopedI18n("widget.customApi");
-  const { openConfirmModal } = useConfirmModal();
-  const executeMutation = clientApi.customWidget.execute.useMutation();
-  const [lastSuccess, setLastSuccess] = useState(false);
-
-  const buttonLabel = (data.buttonLabel as string) ?? "Execute";
-  const buttonColor = (data.buttonColor as string) ?? "blue";
-  const confirmText = (data.confirmText as string) || "";
-  const successMessage = (data.successMessage as string) || t("executeSuccess");
-  const definitionId = data.widgetDefinitionId as string | undefined;
-
-  const handleExecute = async () => {
-    if (!definitionId) return;
-    setLastSuccess(false);
-    try {
-      const result = await executeMutation.mutateAsync({ definitionId });
-      if (result.success) {
-        setLastSuccess(true);
-        showSuccessNotification({ title: buttonLabel, message: successMessage });
-        setTimeout(() => setLastSuccess(false), 3000);
-      } else {
-        showErrorNotification({ title: buttonLabel, message: result.error ?? t("executeFailed") });
-      }
-    } catch {
-      showErrorNotification({ title: buttonLabel, message: t("executeFailed") });
-    }
-  };
-
-  const handleClick = () => {
-    if (confirmText) {
-      openConfirmModal({
-        title: buttonLabel,
-        children: confirmText,
-        onConfirm: () => void handleExecute(),
-      });
-    } else {
-      void handleExecute();
-    }
-  };
-
-  return (
-    <Center h="100%">
-      <Button
-        size="lg"
-        color={buttonColor}
-        onClick={handleClick}
-        loading={executeMutation.isPending}
-        leftSection={lastSuccess ? <IconCheck size={20} /> : <IconPlayerPlay size={20} />}
-        variant={lastSuccess ? "light" : "filled"}
-      >
-        {executeMutation.isPending ? t("executing") : buttonLabel}
-      </Button>
-    </Center>
-  );
-}
-
-export const displayComponents: Record<string, ComponentType<{ data: Record<string, unknown> }>> = {
-  singleValue: SingleValueDisplay,
-  keyValue: KeyValueDisplay,
-  table: TableDisplay,
-  statGrid: StatGridDisplay,
-  progressBars: ProgressBarsDisplay,
-  statusIndicator: StatusIndicatorDisplay,
-  countGrid: CountGridDisplay,
-  raw: RawDisplay,
-  actionButton: ActionButtonDisplay,
-  customJsx: CustomJsxDisplay,
-};
-
-export default function CustomApiWidget({ options }: WidgetComponentProps<"customApi">) {
-  const t = useScopedI18n("widget.customApi");
-  const { definitionId, refreshInterval } = options;
-
-  if (!definitionId) {
-    return (
-      <Center h="100%">
-        <Stack align="center" gap="xs">
-          <IconAlertTriangle size={32} color="var(--mantine-color-yellow-6)" />
-          <Text c="dimmed" size="sm">
-            {t("noDefinition")}
-          </Text>
-        </Stack>
-      </Center>
-    );
-  }
-
-  return <CustomApiWidgetInner definitionId={definitionId} refreshInterval={refreshInterval as number} />;
-}
-
-function CustomApiWidgetInner({ definitionId, refreshInterval }: { definitionId: string; refreshInterval: number }) {
-  const t = useScopedI18n("widget.customApi");
-  const tCustomWidget = useScopedI18n("customWidget");
-  const safeInterval = Number.isFinite(refreshInterval) ? refreshInterval : 30;
-  const intervalMs = Math.max(1000, safeInterval * 1000);
-  const { data, isLoading, error } = clientApi.widget.customApi.getData.useQuery(
-    { definitionId },
+  const tCustomJsx = useScopedI18n("widget.customApi.customJsx");
+  const { data: session } = useSession();
+  const isAdmin = session?.user.permissions.includes("admin") ?? false;
+  const definitionId = options.definitionId;
+  const safeInterval = Number.isFinite(options.refreshInterval) ? options.refreshInterval : 30;
+  const intervalMs = Math.max(1_000, safeInterval * 1_000);
+  const query = clientApi.widget.customApi.getData.useQuery(
+    { itemId: itemId ?? "" },
     {
-      refetchInterval: (query) => {
-        const result = query.state.data as Record<string, unknown> | undefined;
-        if (result?.type === "actionButton" || result?.type === "disabled") return false;
-        return intervalMs;
-      },
-      retry: (failureCount, err) => {
-        if (err.data?.code === "NOT_FOUND") return false;
-        return failureCount < 3;
-      },
+      enabled: Boolean(itemId) && Boolean(definitionId),
+      refetchInterval: (currentQuery) =>
+        isTerminalCustomWidgetDefinitionError(currentQuery.state.error) ? false : intervalMs,
+      retry: (failureCount, error) => !isTerminalCustomWidgetDefinitionError(error) && failureCount < 3,
     },
   );
 
-  if (isLoading) {
+  if (!definitionId) {
+    return <Unavailable message={t("definitionNotFound")} removeLabel={t("removeFromBoard")} onRemove={removeItem} />;
+  }
+  if (isEditMode && !itemId) return <Unavailable message={t("editModePending")} />;
+  if (query.isLoading)
     return (
       <Center h="100%">
         <Loader size="sm" />
       </Center>
     );
-  }
-
-  if (error) {
-    const isNotFound = error.data?.code === "NOT_FOUND";
+  if (query.error) {
+    const errorCode = query.error.data?.code;
+    const migrationRequired = isLegacyCustomWidgetMigrationError(query.error);
+    if (isEditMode && errorCode === "NOT_FOUND") {
+      return <Unavailable message={t("editModePending")} />;
+    }
+    const isUnavailable = errorCode === "NOT_FOUND" || errorCode === "FORBIDDEN";
     return (
-      <Center h="100%">
-        <Stack align="center" gap="xs">
-          <IconAlertTriangle size={32} color={`var(--mantine-color-${isNotFound ? "yellow" : "red"}-6)`} />
-          <Text c="dimmed" size="sm" ta="center">
-            {isNotFound ? t("definitionNotFound") : error.message}
-          </Text>
-        </Stack>
-      </Center>
+      <Unavailable
+        message={
+          migrationRequired
+            ? t("migrationRequired")
+            : isUnavailable
+              ? t("definitionNotFound")
+              : errorCode === "PRECONDITION_FAILED"
+                ? t("configurationNeedsRepair")
+                : tCustomJsx("requestFailed")
+        }
+        danger={!isUnavailable && !migrationRequired}
+        removeLabel={isUnavailable ? t("removeFromBoard") : undefined}
+        actionLabel={migrationRequired && isAdmin ? t("manageMigration") : undefined}
+        actionHref={migrationRequired && isAdmin ? "/manage/custom-widgets" : undefined}
+        supplementaryMessage={migrationRequired && !isAdmin ? t("contactAdmin") : undefined}
+        onRemove={removeItem}
+      />
     );
   }
-
-  if (!data) return null;
-
-  const widgetData = data as Record<string, unknown>;
-  const dataType = widgetData.type as string | undefined;
-
-  if (dataType === "disabled") {
-    return (
-      <Center h="100%">
-        <Text c="dimmed" size="sm">
-          {tCustomWidget("widget.disabled")}
-        </Text>
-      </Center>
-    );
-  }
-
-  const Component = dataType ? displayComponents[dataType] : undefined;
-  if (Component) {
-    const enrichedData = dataType === "actionButton" ? { ...widgetData, widgetDefinitionId: definitionId } : widgetData;
-    return <Component data={enrichedData} />;
-  }
+  if (!query.data) return null;
 
   return (
-    <ScrollArea h="100%" p="xs">
-      <Code block style={{ fontSize: 11 }}>
-        {JSON.stringify(data, null, 2)}
-      </Code>
-    </ScrollArea>
+    <CustomJsxDisplay
+      data={{
+        ...query.data,
+        widgetDefinitionId: definitionId,
+        widgetItemId: itemId,
+        isEditMode,
+      }}
+    />
+  );
+}
+function Unavailable({
+  message,
+  danger = false,
+  removeLabel,
+  actionLabel,
+  actionHref,
+  supplementaryMessage,
+  onRemove,
+}: {
+  message: string;
+  danger?: boolean;
+  removeLabel?: string;
+  actionLabel?: string;
+  actionHref?: string;
+  supplementaryMessage?: string;
+  onRemove?: () => void;
+}) {
+  return (
+    <Center h="100%" p="sm">
+      <Stack align="center" gap="xs">
+        <IconAlertTriangle size={32} color={`var(--mantine-color-${danger ? "red" : "yellow"}-6)`} />
+        <Text c="dimmed" size="sm" ta="center">
+          {message}
+        </Text>
+        {supplementaryMessage && (
+          <Text size="sm" fw={600} ta="center">
+            {supplementaryMessage}
+          </Text>
+        )}
+        {actionLabel && actionHref && (
+          <Button component={Link} href={actionHref} size="compact-sm" color="yellow" variant="light">
+            {actionLabel}
+          </Button>
+        )}
+        {removeLabel && onRemove && (
+          <Button size="compact-sm" color="red" variant="light" onClick={onRemove}>
+            {removeLabel}
+          </Button>
+        )}
+      </Stack>
+    </Center>
   );
 }
diff --git a/packages/widgets/src/custom-api/custom-jsx-display.spec.ts b/packages/widgets/src/custom-api/custom-jsx-display.spec.ts
index d8839ff06..51e8ba437 100644
--- a/packages/widgets/src/custom-api/custom-jsx-display.spec.ts
+++ b/packages/widgets/src/custom-api/custom-jsx-display.spec.ts
@@ -1,14 +1,47 @@
 import { MantineProvider } from "@mantine/core";
+import * as MantineCharts from "@mantine/charts";
+import * as MantineCore from "@mantine/core";
+import * as MantineDates from "@mantine/dates";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { act, createElement } from "react";
 import { createRoot } from "react-dom/client";
-import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
 
 import type { Root } from "react-dom/client";
 
+import { customJsxComponentRegistry, enabledCustomJsxComponents } from "@homarr/custom-widgets/catalog";
+import {
+  BUNDLED_CUSTOM_WIDGETS,
+  customJsxExamples,
+  customJsxTablerIconNames,
+  getCustomWidgetDefaultOptions,
+} from "@homarr/custom-widgets/core";
+import { renderSafeJsx, SafeJsxError, sanitizeCustomJsxProps } from "@homarr/custom-widgets/jsx";
+
 import CustomJsxDisplay from "./custom-jsx-display";
-import { SAFE_BINDINGS } from "./jsx-whitelist";
+import { createCustomWidgetComponents, SAFE_BINDINGS } from "./jsx-components";
+import { SAFE_TABLER_ICON_NAMES } from "./jsx-icon-adapter";
+
+const CUSTOM_WIDGET_COMPONENTS = createCustomWidgetComponents({ copy: "Copy", copied: "Copied" });
+
+vi.mock("@homarr/translation/client", () => ({
+  useScopedI18n: () => (key: string, params?: Record<string, string>) =>
+    key === "templateWarnings" ? `${params?.count ?? "0"} template warning(s):` : key,
+}));
+
+const isComponentLikeExport = ([name, value]: [string, unknown]): boolean => {
+  if (!/^[A-Z][A-Za-z0-9]*$/.test(name) || name.endsWith("Context")) return false;
+  if (typeof value === "function") return true;
+  if (!value || typeof value !== "object") return false;
+  const reactType = (value as { $$typeof?: unknown }).$$typeof;
+  return reactType === Symbol.for("react.forward_ref") || reactType === Symbol.for("react.memo");
+};
 
 describe("CustomJsxDisplay", () => {
+  it("keeps safe Tabler icon metadata synchronized with the runtime", () => {
+    expect(SAFE_TABLER_ICON_NAMES).toEqual(customJsxTablerIconNames);
+  });
+
   let container: HTMLDivElement;
   let root: Root;
 
@@ -27,10 +60,18 @@ describe("CustomJsxDisplay", () => {
         dispatchEvent: () => false,
       }),
     });
+    Object.defineProperty(globalThis, "ResizeObserver", {
+      writable: true,
+      value: class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      },
+    });
   });
 
-  afterEach(() => {
-    root?.unmount();
+  afterEach(async () => {
+    await act(async () => root?.unmount());
     container?.remove();
   });
 
@@ -38,8 +79,15 @@ describe("CustomJsxDisplay", () => {
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
     await act(async () => {
-      root.render(createElement(MantineProvider, null, createElement(CustomJsxDisplay, { data })));
+      root.render(
+        createElement(
+          MantineProvider,
+          null,
+          createElement(QueryClientProvider, { client: queryClient }, createElement(CustomJsxDisplay, { data })),
+        ),
+      );
     });
   };
 
@@ -53,6 +101,65 @@ describe("CustomJsxDisplay", () => {
     expect(container.textContent).toContain("3");
   });
 
+  it("keeps runtime components inside an inert provider before a preview session exists", async () => {
+    await renderDisplay({ template: '<RefreshButton label="Refresh" />', data: {} });
+
+    expect(container.querySelector('button[aria-label="Refresh"]')).not.toBeNull();
+    expect(container.textContent).not.toContain("RUNTIME_RENDER_ERROR");
+    expect(container.querySelector("button")?.disabled).toBe(true);
+  });
+
+  it("renders the bundled Pokédex list without a widget-wide runtime failure", async () => {
+    const pokedex = BUNDLED_CUSTOM_WIDGETS.find(({ id }) => id === "seed-pokedex")?.widget;
+    expect(pokedex).toBeDefined();
+    await renderDisplay({
+      template: pokedex?.template,
+      data: {
+        pokemon: {
+          count: 2,
+          results: [
+            { name: "bulbasaur", url: "https://pokeapi.co/api/v2/pokemon/1/" },
+            { name: "pikachu", url: "https://pokeapi.co/api/v2/pokemon/25/" },
+          ],
+        },
+      },
+      status: { pokemon: { loading: false, ok: true, status: 200 } },
+      options: getCustomWidgetDefaultOptions(pokedex?.options ?? {}),
+    });
+
+    expect(container.textContent).toContain("bulbasaur");
+    expect(container.textContent).toContain("pikachu");
+    expect(
+      container.querySelector('img[src="https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/1.png"]'),
+    ).not.toBeNull();
+    expect(
+      container.querySelector('img[src="https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/25.png"]'),
+    ).not.toBeNull();
+    expect(container.querySelectorAll("img.mantine-Image-root")).toHaveLength(2);
+    expect(container.querySelectorAll(".mantine-Card-root")).toHaveLength(2);
+    expect(container.textContent).not.toContain("RUNTIME_RENDER_ERROR");
+  });
+
+  it("recovers when preview data arrives after an initial render error", async () => {
+    const template = "<Stack>{data.items.map((item) => <Text key={item}>{item}</Text>)}</Stack>";
+    await renderDisplay({ template, data: {} });
+    expect(container.textContent).toContain("RUNTIME_RENDER_ERROR");
+
+    await act(async () => {
+      root.render(
+        createElement(
+          MantineProvider,
+          null,
+          createElement(CustomJsxDisplay, { data: { template, data: { items: ["Bulbasaur", "Pikachu"] } } }),
+        ),
+      );
+    });
+
+    expect(container.textContent).toContain("Bulbasaur");
+    expect(container.textContent).toContain("Pikachu");
+    expect(container.textContent).not.toContain("RUNTIME_RENDER_ERROR");
+  });
+
   it("blocks script tags and event handlers", async () => {
     await renderDisplay({
       template: '<script>document.title = "hacked"</script><button onClick={() => {}}>Click</button><Text>Safe</Text>',
@@ -64,6 +171,127 @@ describe("CustomJsxDisplay", () => {
     expect(container.textContent).toContain("Safe");
   });
 
+  it("supports bounded collection callbacks and safe string helpers", async () => {
+    await renderDisplay({
+      template:
+        '<Stack>{data.items.filter((item) => item.enabled).slice(0, 2).map((item, i) => <Text key={i}>{String(i + 1) + ". " + item.name.toUpperCase()}</Text>)}</Stack>',
+      data: {
+        items: [
+          { name: "alpha", enabled: true },
+          { name: "hidden", enabled: false },
+          { name: "beta", enabled: true },
+          { name: "gamma", enabled: true },
+        ],
+      },
+    });
+
+    expect(container.textContent).toContain("1. ALPHA");
+    expect(container.textContent).toContain("2. BETA");
+    expect(container.textContent).not.toContain("GAMMA");
+  });
+
+  it("blocks reflective properties assembled with string concatenation", async () => {
+    await renderDisplay({
+      template: '<Text>{data["con" + "structor"]}</Text>',
+      data: { value: 1 },
+    });
+
+    expect(container.textContent).toContain("reflective property");
+  });
+
+  it.each([
+    '<Text>{data["constr\\u0075ctor"]}</Text>',
+    '<Text>{data["__pro" + "to__"]}</Text>',
+    '<Text>{String["b" + "ind"](null)}</Text>',
+    "<Text>{data.items.map.call(null, (item) => item)}</Text>",
+    "<Text>{data.items.map.apply(null, [])}</Text>",
+  ])("blocks Unicode, computed, and call/apply reflective escapes", (template) => {
+    expect(() =>
+      renderSafeJsx({
+        template,
+        components: { Text: (() => null) as never },
+        bindings: SAFE_BINDINGS({ items: [1] }),
+      }),
+    ).toThrow(/reflective property/);
+  });
+
+  it("never resolves inherited data properties", () => {
+    const inherited = Object.create({ secret: "leak" }) as Record<string, unknown>;
+    inherited.visible = "safe";
+    const bindings = SAFE_BINDINGS(inherited);
+    const data = bindings.data as Record<string, unknown>;
+
+    expect(data.visible).toBe("safe");
+    expect(data.secret).toBeUndefined();
+    expect(Object.getPrototypeOf(data)).toBeNull();
+  });
+
+  it("blocks direct global calls but allows benign text containing fetch", async () => {
+    await renderDisplay({ template: "<Text>fetch is available through controlled requests</Text>", data: {} });
+    expect(container.textContent).toContain("fetch is available through controlled requests");
+
+    await act(async () => {
+      root.render(
+        createElement(
+          MantineProvider,
+          null,
+          createElement(CustomJsxDisplay, { data: { template: '<Text>{fetch("/private")}</Text>', data: {} } }),
+        ),
+      );
+    });
+    expect(container.textContent).toContain("Unknown binding: fetch");
+  });
+
+  it("strips polymorphic, callback, unsafe URL, and escaping style props", () => {
+    const props = sanitizeCustomJsxProps({
+      component: "iframe",
+      renderRoot: "iframe",
+      withinPortal: true,
+      onClick: () => undefined,
+      href: "javascript:alert(1)",
+      style: { position: "fixed", zIndex: 999_999, flex: 1, color: "red" },
+    });
+
+    expect(props).toEqual({ style: { flex: 1, color: "red" } });
+  });
+
+  it("enforces collection and template length budgets", () => {
+    const bindings = SAFE_BINDINGS({ items: [1, 2, 3] });
+
+    expect(() =>
+      renderSafeJsx({
+        template: "<Stack>{data.items.map((item) => <Text>{item}</Text>)}</Stack>",
+        components: {
+          Text: ((props: { children?: unknown }) => props.children) as never,
+          Stack: (() => null) as never,
+        },
+        bindings,
+        budgets: { maxCollectionItems: 2 },
+      }),
+    ).toThrow(/collection limit/);
+
+    expect(() => renderSafeJsx({ template: " ".repeat(50_001), components: {}, bindings: {} })).toThrow(
+      new SafeJsxError("Template exceeds the 50000 character limit"),
+    );
+
+    expect(() =>
+      renderSafeJsx({
+        template: '<Text>{"x".padStart(1000, "x")}</Text>',
+        components: { Text: (() => null) as never },
+        bindings: {},
+        budgets: { maxStringLength: 10 },
+      }),
+    ).toThrow(/string length limit/);
+
+    expect(() =>
+      renderSafeJsx({
+        template: "<B/>".repeat(10_000),
+        components: { B: (() => null) as never },
+        bindings: {},
+      }),
+    ).toThrow("Template exceeded the rendered node limit (10000)");
+  });
+
   describe("safe bindings security", () => {
     it("exposes wrapper functions, not native constructors", () => {
       const bindings = SAFE_BINDINGS({ value: 7 });
@@ -153,6 +381,17 @@ describe("CustomJsxDisplay", () => {
       expect(math.abs(-5)).toBe(5);
     });
 
+    it("Date helpers only return primitives and getDay returns the weekday", () => {
+      const bindings = SAFE_BINDINGS({});
+      const date = bindings.Date as {
+        create: (value: string) => number;
+        getDay: (value: string) => number;
+      };
+
+      expect(typeof date.create("2024-01-07T12:00:00Z")).toBe("number");
+      expect(date.getDay("2024-01-07T12:00:00Z")).toBe(0);
+    });
+
     it("JSON.stringify works correctly", () => {
       const bindings = SAFE_BINDINGS({});
       const json = bindings.JSON as { stringify: (v: unknown) => string };
@@ -176,3 +415,209 @@ describe("CustomJsxDisplay", () => {
     });
   });
 });
+describe("Custom JSX component registry", () => {
+  it.each([
+    ["@mantine/core", MantineCore],
+    ["@mantine/charts", MantineCharts],
+    ["@mantine/dates", MantineDates],
+  ] as const)("classifies every component-like %s export", (packageName, moduleExports) => {
+    const classified = new Set(
+      customJsxComponentRegistry
+        .filter((component) => component.package === packageName)
+        .flatMap(({ name }) => [name, name.replaceAll(".", "")]),
+    );
+    const unclassified = Object.entries(moduleExports)
+      .filter(isComponentLikeExport)
+      .map(([name]) => name)
+      .filter((name) => !classified.has(name));
+
+    expect(unclassified, `Unclassified ${packageName} component exports`).toEqual([]);
+  });
+
+  it("has a runtime implementation for every enabled registry component", () => {
+    const missing = enabledCustomJsxComponents
+      .map(({ name }) => name)
+      .filter((name) => !Object.hasOwn(CUSTOM_WIDGET_COMPONENTS, name));
+
+    expect(missing, "Enabled components without a runtime implementation").toEqual([]);
+  });
+});
+
+const renderTemplate = (template: string, data: Record<string, unknown> = {}) =>
+  renderSafeJsx({ template, components: CUSTOM_WIDGET_COMPONENTS, bindings: SAFE_BINDINGS(data) });
+
+describe("new collection/string methods", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  afterEach(async () => {
+    await act(async () => root?.unmount());
+    container?.remove();
+  });
+
+  const renderAndGetText = async (template: string, data: Record<string, unknown> = {}) => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    await act(async () => {
+      root.render(createElement(MantineProvider, null, createElement(CustomJsxDisplay, { data: { template, data } })));
+    });
+    return container.textContent ?? "";
+  };
+
+  it("find returns the first matching item", async () => {
+    const text = await renderAndGetText(`<Text>{data.items.find((x) => x.id === 2).name}</Text>`, {
+      items: [
+        { id: 1, name: "a" },
+        { id: 2, name: "b" },
+      ],
+    });
+    expect(text).toContain("b");
+  });
+
+  it("findIndex returns correct index", async () => {
+    const text = await renderAndGetText(`<Text>{data.items.findIndex((x) => x > 5)}</Text>`, { items: [1, 3, 7, 9] });
+    expect(text).toContain("2");
+  });
+
+  it("some returns boolean", async () => {
+    const text = await renderAndGetText(`<Text>{data.items.some((x) => x > 5) ? "yes" : "no"}</Text>`, {
+      items: [1, 2, 3],
+    });
+    expect(text).toContain("no");
+  });
+
+  it("every returns boolean", async () => {
+    const text = await renderAndGetText(`<Text>{data.items.every((x) => x > 0) ? "all" : "nope"}</Text>`, {
+      items: [1, 2, 3],
+    });
+    expect(text).toContain("all");
+  });
+
+  it("sort with comparator returns stable order on NaN", async () => {
+    const text = await renderAndGetText(
+      `<Text>{data.items.sort((a, b) => a.v - b.v).map((x) => x.n).join(",")}</Text>`,
+      { items: [{ n: "b", v: 2 }, { n: "a", v: 1 }, { n: "c" }] },
+    );
+    expect(text).toContain("a,");
+    expect(text).toContain("b");
+  });
+
+  it("reduce accumulates values", async () => {
+    const text = await renderAndGetText(`<Text>{data.nums.reduce((acc, n) => acc + n, 0)}</Text>`, {
+      nums: [1, 2, 3],
+    });
+    expect(text).toContain("6");
+  });
+
+  it("at returns element by negative index", async () => {
+    const text = await renderAndGetText(`<Text>{data.items.at(-1)}</Text>`, { items: ["a", "b", "c"] });
+    expect(text).toContain("c");
+  });
+
+  it("flat(2) throws SafeJsxError", () => {
+    expect(() => renderTemplate(`<Text>{data.items.flat(2)}</Text>`, { items: [[1, [2]]] })).toThrow(SafeJsxError);
+  });
+
+  it("flat(1) flattens one level", async () => {
+    const text = await renderAndGetText(`<Text>{data.items.flat().join(",")}</Text>`, { items: [[1, 2], [3]] });
+    expect(text).toContain("1,2,3");
+  });
+
+  it("reverse returns reversed copy", async () => {
+    const text = await renderAndGetText(`<Text>{data.items.reverse().join(",")}</Text>`, { items: [1, 2, 3] });
+    expect(text).toContain("3,2,1");
+  });
+
+  it("string replaceAll works", async () => {
+    const text = await renderAndGetText(`<Text>{data.s.replaceAll("o", "0")}</Text>`, { s: "foobar" });
+    expect(text).toContain("f00bar");
+  });
+
+  it("string replaceAll with empty search is a no-op", async () => {
+    const text = await renderAndGetText(`<Text>{data.s.replaceAll("", "x")}</Text>`, { s: "abc" });
+    expect(text).toContain("abc");
+  });
+
+  it("string repeat caps at budget", async () => {
+    const text = await renderAndGetText(`<Text>{data.s.repeat(3)}</Text>`, { s: "hi" });
+    expect(text).toContain("hihihi");
+  });
+
+  it("string indexOf and lastIndexOf return positions", async () => {
+    const text = await renderAndGetText(`<Text>{data.s.indexOf("l")}-{data.s.lastIndexOf("l")}</Text>`, {
+      s: "hello",
+    });
+    expect(text).toContain("2-3");
+  });
+
+  it("string trimStart and trimEnd work", async () => {
+    const text = await renderAndGetText(`<Text>{data.s.trimStart().trimEnd()}</Text>`, { s: "  hi  " });
+    expect(text).toContain("hi");
+  });
+
+  it("filter(Boolean) removes falsy values", async () => {
+    const text = await renderAndGetText(`<Text>{data.items.filter(Boolean).join(",")}</Text>`, {
+      items: ["a", "", "b", null, "c"],
+    });
+    expect(text).toContain("a,b,c");
+  });
+
+  it("pop returns last element", async () => {
+    const text = await renderAndGetText(`<Text>{data.url.split("/").filter(Boolean).pop()}</Text>`, {
+      url: "https://pokeapi.co/api/v2/pokemon/1/",
+    });
+    expect(text).toContain("1");
+  });
+
+  it("String(n).padStart works for number formatting", async () => {
+    const text = await renderAndGetText(`<Text>{String(data.n + 1).padStart(4, "0")}</Text>`, { n: 5 });
+    expect(text).toContain("0006");
+  });
+
+  it("number arithmetic in string concatenation", async () => {
+    const text = await renderAndGetText(`<Text>{"https://example.com/" + (data.index + 1) + ".png"}</Text>`, {
+      index: 3,
+    });
+    expect(text).toContain("https://example.com/4.png");
+  });
+});
+
+describe("shared Custom JSX examples", () => {
+  const sampleData: Record<string, unknown> = {
+    name: "Server A",
+    status: "online",
+    value: 42,
+    count: 1351,
+    results: [{ name: "bulbasaur" }, { name: "ivysaur" }],
+    holdings: [{ symbol: "HOMR", price: 42.5, change: 1.2, history: [38, 40, 42.5] }],
+    timeline: [
+      { date: "2026-07-11", value: 40 },
+      { date: "2026-07-12", value: 42.5 },
+    ],
+    albumArt: "https://example.com/cover.jpg",
+    album: "Album",
+    title: "Track",
+    artist: "Artist",
+    progress: 55,
+    playing: true,
+    shuffle: false,
+    state: "on",
+  };
+
+  it.each(customJsxExamples)("parses and creates the $id renderer tree", (example) => {
+    const rendered = renderSafeJsx({
+      template: example.widget.template,
+      components: CUSTOM_WIDGET_COMPONENTS,
+      bindings: {
+        ...SAFE_BINDINGS(sampleData),
+        status: {},
+        options: getCustomWidgetDefaultOptions(example.widget.options ?? {}),
+        inputs: {},
+      },
+    });
+
+    expect(rendered.warnings).toEqual([]);
+    expect(rendered.node).not.toBeNull();
+  });
+});
diff --git a/packages/widgets/src/custom-api/custom-jsx-display.tsx b/packages/widgets/src/custom-api/custom-jsx-display.tsx
index 1a6bf2f93..7037c7272 100644
--- a/packages/widgets/src/custom-api/custom-jsx-display.tsx
+++ b/packages/widgets/src/custom-api/custom-jsx-display.tsx
@@ -1,74 +1,92 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import JsxParser from "react-jsx-parser";
-import { Alert, Stack, Text } from "@mantine/core";
-import { IconAlertTriangle } from "@tabler/icons-react";
 
-import { WHITELISTED_COMPONENTS, SAFE_BINDINGS } from "./jsx-whitelist";
+import { useScopedI18n } from "@homarr/translation/client";
+import type { CustomWidgetPublishedQueryState } from "@homarr/custom-widgets/runtime";
+import { CustomJsxRenderer, parseRequestCapabilities } from "@homarr/custom-widgets/runtime";
 
-const MAX_PARSE_ERRORS = 5;
+import { createCustomWidgetComponents, SAFE_BINDINGS } from "./jsx-components";
+import { InactiveWidgetDefinitionProvider, WidgetDefinitionProvider } from "./widget-definition-context";
 
-function appendParseError(prev: string[], message: string): string[] {
-  if (prev.length >= MAX_PARSE_ERRORS) return prev;
-  if (prev.includes(message)) return prev;
-  return [...prev, message];
-}
+export { CUSTOM_JSX_METHOD_COLORS } from "@homarr/custom-widgets/runtime";
 
 export default function CustomJsxDisplay({ data }: { data: Record<string, unknown> }) {
-  const template = String(data.template ?? "");
-  const apiData = data.data;
-  const [parseErrors, setParseErrors] = useState<string[]>([]);
-  const bindings = useMemo(() => SAFE_BINDINGS(apiData), [apiData]);
-
-  useEffect(() => {
-    setParseErrors([]);
-  }, [template, bindings]);
-
-  const handleError = useCallback((error: Error) => {
-    setParseErrors((prev) => appendParseError(prev, error.message));
+  const t = useScopedI18n("widget.customApi.customJsx");
+  const capabilities = useMemo(() => parseRequestCapabilities(data.requestCapabilities), [data.requestCapabilities]);
+  const components = useMemo(() => createCustomWidgetComponents({ copy: t("copy"), copied: t("copied") }), [t]);
+  const [queryState, setQueryState] = useState<Record<string, CustomWidgetPublishedQueryState>>({});
+  useEffect(
+    () => setQueryState({}),
+    [data.widgetDefinitionId, data.widgetItemId, data.previewSessionId, data.template],
+  );
+  const publishQueryState = useCallback((requestId: string, value: CustomWidgetPublishedQueryState | null) => {
+    setQueryState((current) => {
+      if (!value) {
+        if (!Object.hasOwn(current, requestId)) return current;
+        const next = { ...current };
+        delete next[requestId];
+        return next;
+      }
+      const previous = current[requestId];
+      if (previous && previous.data === value.data && sameStatus(previous.status, value.status)) return current;
+      return { ...current, [requestId]: value };
+    });
   }, []);
-
-  if (!template.trim()) {
+  const baseData = isRecord(data.data) ? data.data : {};
+  const baseStatus = isRecord(data.status) ? data.status : {};
+  const renderer = (
+    <CustomJsxRenderer
+      template={String(data.template ?? "")}
+      data={{ ...baseData, ...Object.fromEntries(Object.entries(queryState).map(([id, value]) => [id, value.data])) }}
+      status={{
+        ...baseStatus,
+        ...Object.fromEntries(Object.entries(queryState).map(([id, value]) => [id, value.status])),
+      }}
+      options={isRecord(data.options) ? data.options : {}}
+      components={components}
+      createBindings={SAFE_BINDINGS}
+      messages={{
+        noTemplate: t("noTemplate"),
+        templateWarnings: (count) => t("templateWarnings", { count: String(count) }),
+      }}
+    />
+  );
+  const definitionId = typeof data.widgetDefinitionId === "string" ? data.widgetDefinitionId : undefined;
+  const itemId = typeof data.widgetItemId === "string" ? data.widgetItemId : undefined;
+  const previewSessionId = typeof data.previewSessionId === "string" ? data.previewSessionId : undefined;
+  if (!itemId && !previewSessionId) {
     return (
-      <Alert color="gray" variant="light" p="xs">
-        <Text size="xs" c="dimmed">
-          No JSX template configured
-        </Text>
-      </Alert>
+      <InactiveWidgetDefinitionProvider definitionId={definitionId} isEditMode={data.isEditMode === true}>
+        {renderer}
+      </InactiveWidgetDefinitionProvider>
     );
   }
-
   return (
-    <Stack gap={0} h="100%">
-      <JsxParser
-        jsx={template}
-        components={WHITELISTED_COMPONENTS as never}
-        bindings={bindings}
-        disableKeyGeneration
-        componentsOnly
-        allowUnknownElements={false}
-        blacklistedAttrs={[/^on.+/i, /^dangerously/i]}
-        blacklistedTags={["script", "iframe", "object", "embed", "form", "style", "link", "meta", "base"]}
-        onError={handleError}
-        renderError={({ error }) => (
-          <Alert color="red" variant="light" icon={<IconAlertTriangle size={16} />} p="xs">
-            <Text size="xs">{String(error)}</Text>
-          </Alert>
-        )}
-      />
-      {parseErrors.length > 0 && (
-        <Alert color="yellow" variant="light" p="xs" mt="xs">
-          <Text size="xs" c="dimmed">
-            {parseErrors.length} template warning(s):
-          </Text>
-          {parseErrors.map((msg) => (
-            <Text key={msg} size="xs" c="dimmed" style={{ fontFamily: "monospace" }}>
-              {msg}
-            </Text>
-          ))}
-        </Alert>
-      )}
-    </Stack>
+    <WidgetDefinitionProvider
+      definitionId={definitionId}
+      itemId={itemId}
+      previewSessionId={previewSessionId}
+      previewLiveActions={data.previewLiveActions === true}
+      queriesDisabled={data.queriesDisabled === true}
+      isEditMode={data.isEditMode === true}
+      requestCapabilities={capabilities}
+      setQueryState={publishQueryState}
+    >
+      {renderer}
+    </WidgetDefinitionProvider>
   );
 }
+function sameStatus(left: CustomWidgetPublishedQueryState["status"], right: CustomWidgetPublishedQueryState["status"]) {
+  return (
+    left.loading === right.loading &&
+    left.ok === right.ok &&
+    left.status === right.status &&
+    left.statusText === right.statusText &&
+    left.error === right.error
+  );
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
diff --git a/packages/widgets/src/custom-api/extract-display-data.ts b/packages/widgets/src/custom-api/extract-display-data.ts
deleted file mode 100644
index 9163f95cb..000000000
--- a/packages/widgets/src/custom-api/extract-display-data.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { extractDisplayData } from "@homarr/api/custom-widget/display-data";
diff --git a/packages/widgets/src/custom-api/index.ts b/packages/widgets/src/custom-api/index.ts
index 2bb9d3867..5ca4b6f1f 100644
--- a/packages/widgets/src/custom-api/index.ts
+++ b/packages/widgets/src/custom-api/index.ts
@@ -9,6 +9,8 @@ export const { definition, componentLoader } = createWidgetDefinition("customApi
   createOptions() {
     return optionsBuilder.from((factory) => ({
       definitionId: factory.customWidgetSelect({ defaultValue: "" }),
+      configuration: factory.customWidgetConfiguration(),
+      configurationVersion: factory.internal({ defaultValue: 1 }),
       refreshInterval: factory.slider({
         defaultValue: 30,
         validate: z.number().min(1).max(3600),
diff --git a/packages/widgets/src/custom-api/jsx-components.ts b/packages/widgets/src/custom-api/jsx-components.ts
new file mode 100644
index 000000000..2a93e4fb1
--- /dev/null
+++ b/packages/widgets/src/custom-api/jsx-components.ts
@@ -0,0 +1,12 @@
+import type { ComponentType } from "react";
+
+import { createCustomJsxBindings, createCustomJsxComponents } from "@homarr/custom-widgets/jsx";
+
+import { SafeTablerIcon } from "./jsx-icon-adapter";
+
+// Labels are replaced by the localized runtime adapter in the renderer. These
+// fallbacks are used only in isolated component-map tests.
+export const createCustomWidgetComponents = (copyLabels: { copy: string; copied: string }) =>
+  createCustomJsxComponents({ TablerIcon: SafeTablerIcon as ComponentType<never>, copyLabels });
+
+export const SAFE_BINDINGS = createCustomJsxBindings;
diff --git a/packages/widgets/src/custom-api/jsx-icon-adapter.tsx b/packages/widgets/src/custom-api/jsx-icon-adapter.tsx
new file mode 100644
index 000000000..52a23c868
--- /dev/null
+++ b/packages/widgets/src/custom-api/jsx-icon-adapter.tsx
@@ -0,0 +1,248 @@
+import {
+  IconActivity,
+  IconAlertCircle,
+  IconAlertTriangle,
+  IconApi,
+  IconArrowDown,
+  IconArrowLeft,
+  IconArrowRight,
+  IconArrowUp,
+  IconBell,
+  IconBluetooth,
+  IconBolt,
+  IconBookmark,
+  IconBrandDocker,
+  IconBug,
+  IconCalendar,
+  IconCamera,
+  IconChartBar,
+  IconChartLine,
+  IconChartPie,
+  IconCheck,
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronUp,
+  IconCircleCheck,
+  IconCircleX,
+  IconClipboard,
+  IconClock,
+  IconCloud,
+  IconCloudOff,
+  IconCode,
+  IconCompass,
+  IconCopy,
+  IconCpu,
+  IconDatabase,
+  IconDeviceDesktop,
+  IconDeviceMobile,
+  IconDownload,
+  IconDroplet,
+  IconEdit,
+  IconExternalLink,
+  IconEye,
+  IconEyeOff,
+  IconFile,
+  IconFlag,
+  IconFlame,
+  IconFolder,
+  IconGauge,
+  IconGitBranch,
+  IconHeart,
+  IconHistory,
+  IconHome,
+  IconInfoCircle,
+  IconKey,
+  IconLink,
+  IconLoader,
+  IconLock,
+  IconLockOpen,
+  IconMail,
+  IconMap,
+  IconMapPin,
+  IconMinus,
+  IconMoon,
+  IconMusic,
+  IconNetwork,
+  IconPhoto,
+  IconPokeball,
+  IconPin,
+  IconPlayerPause,
+  IconPlayerPlay,
+  IconPlayerSkipBack,
+  IconPlayerSkipForward,
+  IconPlayerStop,
+  IconPlus,
+  IconPower,
+  IconProgress,
+  IconHeartbeat,
+  IconRefresh,
+  IconReload,
+  IconSearch,
+  IconServer,
+  IconSettings,
+  IconShield,
+  IconStar,
+  IconSun,
+  IconTerminal,
+  IconThermometer,
+  IconTrash,
+  IconTrendingDown,
+  IconTrendingUp,
+  IconUpload,
+  IconUser,
+  IconUsers,
+  IconVideo,
+  IconVolume,
+  IconVolume2,
+  IconVolumeOff,
+  IconWifi,
+  IconWifiOff,
+  IconWorld,
+  IconX,
+  IconSpeedboat,
+} from "@tabler/icons-react";
+
+function tablerIconExportToKey(exportName: string): string {
+  return exportName
+    .slice(4)
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2")
+    .replace(/([A-Za-z])(\d)/g, "$1-$2")
+    .toLowerCase();
+}
+
+const TABLER_ICON_IMPORTS = {
+  IconCheck,
+  IconX,
+  IconPlus,
+  IconMinus,
+  IconArrowUp,
+  IconArrowDown,
+  IconArrowLeft,
+  IconArrowRight,
+  IconChevronUp,
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconHome,
+  IconSettings,
+  IconUser,
+  IconUsers,
+  IconSearch,
+  IconBell,
+  IconMail,
+  IconHeart,
+  IconStar,
+  IconBookmark,
+  IconBrandDocker,
+  IconFlag,
+  IconPin,
+  IconPlayerPlay,
+  IconPlayerPause,
+  IconPlayerStop,
+  IconPlayerSkipForward,
+  IconPlayerSkipBack,
+  IconVolume,
+  IconVolumeOff,
+  IconVolume2,
+  IconWifi,
+  IconWifiOff,
+  IconBluetooth,
+  IconCloud,
+  IconCloudOff,
+  IconServer,
+  IconDatabase,
+  IconCpu,
+  IconDeviceDesktop,
+  IconDeviceMobile,
+  IconFolder,
+  IconFile,
+  IconDownload,
+  IconUpload,
+  IconRefresh,
+  IconReload,
+  IconPower,
+  IconBolt,
+  IconFlame,
+  IconDroplet,
+  IconSun,
+  IconMoon,
+  IconEye,
+  IconEyeOff,
+  IconLock,
+  IconLockOpen,
+  IconShield,
+  IconKey,
+  IconAlertTriangle,
+  IconAlertCircle,
+  IconInfoCircle,
+  IconCircleCheck,
+  IconCircleX,
+  IconTrash,
+  IconEdit,
+  IconCopy,
+  IconClipboard,
+  IconExternalLink,
+  IconLink,
+  IconPhoto,
+  IconPokeball,
+  IconCamera,
+  IconMusic,
+  IconVideo,
+  IconCalendar,
+  IconClock,
+  IconHistory,
+  IconMap,
+  IconMapPin,
+  IconCompass,
+  IconTerminal,
+  IconCode,
+  IconBug,
+  IconGitBranch,
+  IconNetwork,
+  IconWorld,
+  IconApi,
+  IconChartBar,
+  IconChartLine,
+  IconChartPie,
+  IconTrendingUp,
+  IconTrendingDown,
+  IconActivity,
+  IconProgress,
+  IconLoader,
+  IconThermometer,
+  IconGauge,
+  IconSpeedboat,
+  IconHeartbeat,
+} as const;
+
+const TABLER_ICON_MAP: Record<string, ComponentType<never>> = {
+  ...Object.fromEntries(
+    Object.entries(TABLER_ICON_IMPORTS).map(([exportName, IconComponent]) => [
+      tablerIconExportToKey(exportName),
+      IconComponent,
+    ]),
+  ),
+  pulse: IconHeartbeat,
+};
+
+export const SAFE_TABLER_ICON_NAMES = Object.freeze(Object.keys(TABLER_ICON_MAP).toSorted());
+
+function isValidIconProp(value: unknown): value is string | number {
+  return typeof value === "number" || typeof value === "string";
+}
+
+export function SafeTablerIcon(props: Record<string, unknown>) {
+  const name = props.name;
+  if (typeof name !== "string") return null;
+  const IconComponent = TABLER_ICON_MAP[name];
+  if (!IconComponent) return null;
+  const iconProps: Record<string, unknown> = {};
+  if (isValidIconProp(props.size)) iconProps.size = props.size;
+  if (typeof props.color === "string") iconProps.color = props.color;
+  if (isValidIconProp(props.stroke)) iconProps.stroke = props.stroke;
+  return createElement(IconComponent as never, iconProps);
+}
+import { createElement } from "react";
+import type { ComponentType } from "react";
diff --git a/packages/widgets/src/custom-api/jsx-whitelist.ts b/packages/widgets/src/custom-api/jsx-whitelist.ts
deleted file mode 100644
index 983821955..000000000
--- a/packages/widgets/src/custom-api/jsx-whitelist.ts
+++ /dev/null
@@ -1,192 +0,0 @@
-import type { ComponentType } from "react";
-import { createElement } from "react";
-import {
-  Stack,
-  Group,
-  Flex,
-  Grid,
-  SimpleGrid,
-  Center,
-  Space,
-  Container,
-  AspectRatio,
-  Text,
-  Title,
-  Code,
-  Highlight,
-  Mark,
-  Kbd,
-  Blockquote,
-  Anchor,
-  NumberFormatter,
-  Badge,
-  Card,
-  Paper,
-  Alert,
-  ThemeIcon,
-  ColorSwatch,
-  Table,
-  List,
-  Timeline,
-  Accordion,
-  Indicator,
-  Pill,
-  Spoiler,
-  Progress,
-  RingProgress,
-  Skeleton,
-  Loader,
-  Image,
-  Avatar,
-  BackgroundImage,
-  Tooltip,
-  Divider,
-  ScrollArea,
-} from "@mantine/core";
-import {
-  AreaChart,
-  BarChart,
-  LineChart,
-  DonutChart,
-  PieChart,
-  RadarChart,
-  RadialBarChart,
-  Sparkline,
-} from "@mantine/charts";
-
-import { PaginatedList, TabsContainer, TabPanel, Collapsible, StatBar, TypeBadge } from "./jsx-interactive-components";
-
-const SAFE_URL_PATTERN = /^https?:\/\//i;
-
-function isSafeUrl(url: unknown): boolean {
-  if (typeof url !== "string") return false;
-  return SAFE_URL_PATTERN.test(url) || url.startsWith("/") || url.startsWith("#");
-}
-
-function SafeAnchor(props: Record<string, unknown>) {
-  const href = props.href;
-  const safeHref = href && isSafeUrl(href) ? href : undefined;
-  return createElement(Anchor as never, { ...props, href: safeHref });
-}
-
-export const WHITELISTED_COMPONENTS: Record<string, ComponentType<never>> = {
-  Stack,
-  Group,
-  Flex,
-  Grid,
-  "Grid.Col": Grid.Col,
-  SimpleGrid,
-  Center,
-  Space,
-  Container,
-  AspectRatio,
-  Text,
-  Title,
-  Code,
-  Highlight,
-  Mark,
-  Kbd,
-  Blockquote,
-  Anchor: SafeAnchor,
-  NumberFormatter,
-  Badge,
-  Card,
-  "Card.Section": Card.Section,
-  Paper,
-  Alert,
-  ThemeIcon,
-  ColorSwatch,
-  Table,
-  "Table.Thead": Table.Thead,
-  "Table.Tbody": Table.Tbody,
-  "Table.Tr": Table.Tr,
-  "Table.Th": Table.Th,
-  "Table.Td": Table.Td,
-  List,
-  "List.Item": List.Item,
-  Timeline,
-  "Timeline.Item": Timeline.Item,
-  Accordion,
-  "Accordion.Item": Accordion.Item,
-  "Accordion.Control": Accordion.Control,
-  "Accordion.Panel": Accordion.Panel,
-  Indicator,
-  Pill,
-  Spoiler,
-  Progress,
-  "Progress.Section": Progress.Section,
-  RingProgress,
-  Skeleton,
-  Loader,
-  Image,
-  Avatar,
-  "Avatar.Group": Avatar.Group,
-  BackgroundImage,
-  Tooltip,
-  Divider,
-  ScrollArea,
-  AreaChart,
-  BarChart,
-  LineChart,
-  DonutChart,
-  PieChart,
-  RadarChart,
-  RadialBarChart,
-  Sparkline,
-  PaginatedList,
-  TabsContainer,
-  TabPanel,
-  Collapsible,
-  StatBar,
-  TypeBadge,
-};
-
-function sanitizeData(obj: unknown): unknown {
-  if (obj === null || obj === undefined) return obj;
-  if (typeof obj !== "object") return obj;
-  if (Array.isArray(obj)) return obj.map(sanitizeData);
-
-  const safe: Record<string, unknown> = Object.create(null);
-  for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {
-    if (key === "constructor" || key === "__proto__" || key === "prototype") continue;
-    safe[key] = sanitizeData(value);
-  }
-  return safe;
-}
-
-const safeMath: Record<string, unknown> = Object.create(null);
-safeMath.round = (v: number) => Math.round(v);
-safeMath.floor = (v: number) => Math.floor(v);
-safeMath.ceil = (v: number) => Math.ceil(v);
-safeMath.abs = (v: number) => Math.abs(v);
-safeMath.min = (...args: number[]) => Math.min(...args);
-safeMath.max = (...args: number[]) => Math.max(...args);
-safeMath.pow = (b: number, e: number) => Math.pow(b, e);
-safeMath.sqrt = (v: number) => Math.sqrt(v);
-safeMath.PI = Math.PI;
-Object.freeze(safeMath);
-
-const safeJSON: Record<string, unknown> = Object.create(null);
-safeJSON.stringify = (v: unknown) => JSON.stringify(v);
-Object.freeze(safeJSON);
-
-const safeArray: Record<string, unknown> = Object.create(null);
-safeArray.isArray = (v: unknown) => Array.isArray(v);
-Object.freeze(safeArray);
-
-const safeObject: Record<string, unknown> = Object.create(null);
-safeObject.keys = (v: object) => Object.keys(v);
-safeObject.values = (v: object) => Object.values(v);
-safeObject.entries = (v: object) => Object.entries(v);
-Object.freeze(safeObject);
-
-export const SAFE_BINDINGS = (apiData: unknown) => ({
-  data: sanitizeData(apiData),
-  String: (v: unknown) => String(v),
-  Number: (v: unknown) => Number(v),
-  Boolean: (v: unknown) => Boolean(v),
-  Math: safeMath,
-  JSON: safeJSON,
-  Array: safeArray,
-  Object: safeObject,
-});
diff --git a/packages/widgets/src/custom-api/migration-state.spec.ts b/packages/widgets/src/custom-api/migration-state.spec.ts
new file mode 100644
index 000000000..f947cfdeb
--- /dev/null
+++ b/packages/widgets/src/custom-api/migration-state.spec.ts
@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+
+import { isLegacyCustomWidgetMigrationError, isTerminalCustomWidgetDefinitionError } from "./migration-state";
+
+describe("custom widget migration state", () => {
+  it("recognizes the preserved legacy definition error and stops retries", () => {
+    const error = {
+      message: "LEGACY_CUSTOM_WIDGET_MIGRATION_REQUIRED",
+      data: { code: "PRECONDITION_FAILED" },
+    };
+
+    expect(isLegacyCustomWidgetMigrationError(error)).toBe(true);
+    expect(isTerminalCustomWidgetDefinitionError(error)).toBe(true);
+  });
+
+  it("does not label an invalid v2 configuration as a legacy migration", () => {
+    const error = {
+      message: "Custom widget configuration needs repair",
+      data: { code: "PRECONDITION_FAILED" },
+    };
+
+    expect(isLegacyCustomWidgetMigrationError(error)).toBe(false);
+    expect(isTerminalCustomWidgetDefinitionError(error)).toBe(true);
+  });
+
+  it("allows transient request failures to retry", () => {
+    const error = { message: "Request failed", data: { code: "INTERNAL_SERVER_ERROR" } };
+
+    expect(isLegacyCustomWidgetMigrationError(error)).toBe(false);
+    expect(isTerminalCustomWidgetDefinitionError(error)).toBe(false);
+  });
+});
diff --git a/packages/widgets/src/custom-api/migration-state.ts b/packages/widgets/src/custom-api/migration-state.ts
new file mode 100644
index 000000000..bb8f6e237
--- /dev/null
+++ b/packages/widgets/src/custom-api/migration-state.ts
@@ -0,0 +1,13 @@
+const LEGACY_MIGRATION_ERROR = "LEGACY_CUSTOM_WIDGET_MIGRATION_REQUIRED";
+const TERMINAL_DEFINITION_CODES = new Set(["NOT_FOUND", "FORBIDDEN", "PRECONDITION_FAILED"]);
+
+export function isLegacyCustomWidgetMigrationError(error: unknown): boolean {
+  return Boolean(error && typeof error === "object" && "message" in error && error.message === LEGACY_MIGRATION_ERROR);
+}
+
+export function isTerminalCustomWidgetDefinitionError(error: unknown): boolean {
+  if (!error || typeof error !== "object" || !("data" in error)) return false;
+  const data = error.data;
+  if (!data || typeof data !== "object" || !("code" in data) || typeof data.code !== "string") return false;
+  return TERMINAL_DEFINITION_CODES.has(data.code);
+}
diff --git a/packages/widgets/src/custom-api/widget-definition-context.tsx b/packages/widgets/src/custom-api/widget-definition-context.tsx
new file mode 100644
index 000000000..661f0ce61
--- /dev/null
+++ b/packages/widgets/src/custom-api/widget-definition-context.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { fetchApi, clientApi } from "@homarr/api/client";
+import type {
+  CustomWidgetPublishedQueryState,
+  CustomJsxRequestCapability,
+  CustomWidgetRuntimeMessages,
+  CustomWidgetRuntimePort,
+} from "@homarr/custom-widgets/runtime";
+import { CustomWidgetRuntimeProvider } from "@homarr/custom-widgets/runtime";
+import { useConfirmModal } from "@homarr/modals";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useScopedI18n } from "@homarr/translation/client";
+import { useQueryClient } from "@tanstack/react-query";
+
+interface WidgetDefinitionProviderProps {
+  itemId?: string;
+  definitionId?: string;
+  previewSessionId?: string;
+  previewLiveActions?: boolean;
+  queriesDisabled?: boolean;
+  isEditMode?: boolean;
+  requestCapabilities?: readonly CustomJsxRequestCapability[];
+  setQueryState?(requestId: string, value: CustomWidgetPublishedQueryState | null): void;
+  children: ReactNode;
+}
+
+const INACTIVE_PORT: CustomWidgetRuntimePort = {
+  query: async () => ({ ok: false, status: 0, data: null, error: "Custom widget unavailable" }),
+  executeAction: async () => ({ ok: false, status: 0, data: null, error: "Custom widget unavailable" }),
+  invalidate: async () => undefined,
+  confirm: async () => false,
+  notify: () => undefined,
+};
+
+const useRuntimeMessages = (): CustomWidgetRuntimeMessages => {
+  const t = useScopedI18n("widget.customApi.customJsx");
+  return {
+    requestIdRequired: t("requestIdRequired"),
+    unsavedPreview: t("unsavedPreview"),
+    invalidParams: t("invalidParams"),
+    loadRequest: t("loadRequest"),
+    requestFailed: t("requestFailed"),
+    loading: t("loading"),
+    retry: t("retry"),
+    widgetItemUnavailable: t("widgetItemUnavailable"),
+    actionsDisabledEditMode: t("actionsDisabledEditMode"),
+    actionSimulated: t("actionSimulated"),
+    actionCompleted: t("actionCompleted"),
+    confirmDelete: t("confirmDelete"),
+    toggle: t("toggle"),
+    refresh: t("refresh"),
+  };
+};
+
+export function InactiveWidgetDefinitionProvider({
+  definitionId,
+  isEditMode,
+  children,
+}: Pick<WidgetDefinitionProviderProps, "definitionId" | "isEditMode" | "children">) {
+  const messages = useRuntimeMessages();
+  return (
+    <CustomWidgetRuntimeProvider
+      definitionId={definitionId}
+      isEditMode={isEditMode ?? false}
+      requestCapabilities={[]}
+      port={INACTIVE_PORT}
+      messages={messages}
+    >
+      {children}
+    </CustomWidgetRuntimeProvider>
+  );
+}
+
+export function WidgetDefinitionProvider(props: WidgetDefinitionProviderProps) {
+  const utils = clientApi.useUtils();
+  const queryClient = useQueryClient();
+  const { openConfirmModal } = useConfirmModal();
+  const messages = useRuntimeMessages();
+  const port: CustomWidgetRuntimePort = {
+    query: async (input, signal) => {
+      if (input.itemId) {
+        return fetchApi.widget.customApi.queryRequest.query(
+          { itemId: input.itemId, requestId: input.requestId, params: input.params },
+          { signal },
+        );
+      }
+      return fetchApi.customWidget.previewQuery.query(
+        { sessionId: input.previewSessionId ?? "", requestId: input.requestId, params: input.params },
+        { signal },
+      );
+    },
+    executeAction: (input) =>
+      input.itemId
+        ? fetchApi.widget.customApi.executeAction.mutate({
+            itemId: input.itemId,
+            requestId: input.requestId,
+            params: input.params,
+            confirmed: input.confirmed,
+          })
+        : fetchApi.customWidget.previewAction.mutate({
+            sessionId: input.previewSessionId ?? "",
+            requestId: input.requestId,
+            params: input.params,
+            confirmed: input.confirmed,
+          }),
+    invalidate: async ({ itemId, previewSessionId, targets }) => {
+      if (previewSessionId) {
+        await queryClient.invalidateQueries({
+          predicate: (query) => {
+            const key = query.queryKey;
+            return key[0] === "custom-widget" && key[1] === previewSessionId && targets.includes(String(key[2]));
+          },
+        });
+        return;
+      }
+      if (!itemId) return;
+      if (targets.length === 0) return;
+      const tasks: Promise<unknown>[] = [
+        queryClient.invalidateQueries({
+          predicate: (query) => {
+            const key = query.queryKey;
+            return key[0] === "custom-widget" && key[1] === itemId && targets.includes(String(key[2]));
+          },
+        }),
+      ];
+      if (
+        (props.requestCapabilities ?? []).some((request) => request.trigger === "load" && targets.includes(request.id))
+      ) {
+        tasks.push(utils.widget.customApi.getData.invalidate({ itemId }));
+      }
+      await Promise.all(tasks);
+    },
+    confirm: ({ title, message, confirmLabel, destructive }) =>
+      new Promise((resolve) => {
+        openConfirmModal({
+          title,
+          children: message,
+          labels: { confirm: confirmLabel },
+          confirmProps: { color: destructive ? "red.9" : "blue" },
+          onConfirm: () => resolve(true),
+          onCancel: () => resolve(false),
+        });
+      }),
+    notify: ({ kind, ...notification }) =>
+      kind === "success" ? showSuccessNotification(notification) : showErrorNotification(notification),
+  };
+  return (
+    <CustomWidgetRuntimeProvider
+      itemId={props.itemId}
+      definitionId={props.definitionId}
+      previewSessionId={props.previewSessionId}
+      previewLiveActions={props.previewLiveActions}
+      queriesDisabled={props.queriesDisabled}
+      isEditMode={props.isEditMode ?? false}
+      requestCapabilities={props.requestCapabilities ?? []}
+      port={port}
+      messages={messages}
+      setQueryState={props.setQueryState}
+    >
+      {props.children}
+    </CustomWidgetRuntimeProvider>
+  );
+}
diff --git a/packages/widgets/src/definition.spec.ts b/packages/widgets/src/definition.spec.ts
new file mode 100644
index 000000000..7f976692c
--- /dev/null
+++ b/packages/widgets/src/definition.spec.ts
@@ -0,0 +1,33 @@
+import { describe, expect, test } from "vitest";
+import { definition as appDefinition } from "./app";
+import { definition as beszelSystemGridDefinition } from "./beszel-system-grid";
+import { definition as beszelSystemTableDefinition } from "./beszel-system-table";
+import { getWidgetQueryKeys, supportsAdvancedFocus } from "./definition";
+
+describe("getWidgetQueryKeys", () => {
+  test("falls back to the widget router namespace", () => {
+    expect(getWidgetQueryKeys({ kind: "example" })).toEqual([[["widget", "example"]]]);
+  });
+
+  test("wraps a singular explicit key", () => {
+    expect(getWidgetQueryKeys({ kind: "example", queryKey: [["app", "byId"]] })).toEqual([[["app", "byId"]]]);
+  });
+
+  test("preserves every explicit key for multi-root widgets", () => {
+    const queryKeys = [
+      [["widget", "audioStats", "getStats"]],
+      [["widget", "mediaServer", "getCurrentStreams"]],
+    ] as const;
+
+    expect(getWidgetQueryKeys({ kind: "audioStats", queryKeys })).toBe(queryKeys);
+  });
+});
+
+describe("supportsAdvancedFocus", () => {
+  test.each([appDefinition, beszelSystemGridDefinition, beszelSystemTableDefinition])(
+    "keeps non-enhanced widgets compact",
+    (widgetDefinition) => {
+      expect(supportsAdvancedFocus(widgetDefinition)).toBe(false);
+    },
+  );
+});
diff --git a/packages/widgets/src/definition.ts b/packages/widgets/src/definition.ts
index 3ba53987e..3f148ce77 100644
--- a/packages/widgets/src/definition.ts
+++ b/packages/widgets/src/definition.ts
@@ -1,6 +1,7 @@
 import type React from "react";
 import type { LoaderComponent } from "next/dynamic";
 import type { QueryClient, QueryKey } from "@tanstack/react-query";
+import { hashKey } from "@tanstack/react-query";
 import type { DefaultErrorData } from "@trpc/server/unstable-core-do-not-import";
 
 import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
@@ -10,7 +11,7 @@ import type { stringOrTranslation } from "@homarr/translation";
 import type { TablerIcon } from "@homarr/ui";
 
 import type { WidgetImports } from ".";
-import type { inferOptionsFromCreator, inferOptionsFromDefinition, WidgetOptionsRecord } from "./options";
+import type { inferOptionsFromCreator, WidgetOptionsRecord } from "./options";
 
 export interface WidgetContextMenuAction {
   key: string;
@@ -26,18 +27,50 @@ export interface WidgetContextMenuContext {
   isEditMode: boolean;
   boardId: string | undefined;
   itemId: string | undefined;
+  canInteractWithSelectedIntegrations: boolean;
 }
 
-export interface WidgetContextActionProps<
-  TKind extends WidgetKind,
-  TOptions extends WidgetOptionsRecord = WidgetOptionsRecord,
-> {
-  kind: TKind;
-  options: inferOptionsFromDefinition<TOptions>;
-  setOptions: (partial: Partial<inferOptionsFromDefinition<TOptions>>) => void;
+export interface WidgetRuntimeActions {
+  togglePolling?: () => void;
+  testAllIndexers?: () => void;
+  previousPhoto?: () => void;
+  nextPhoto?: () => void;
+  toggleSlideshow?: () => void;
+}
+
+export interface WidgetRuntimeState {
+  queries: readonly NormalizedWidgetQuery[];
+  actions: WidgetRuntimeActions;
+}
+
+export type WidgetRuntimeRef = React.MutableRefObject<WidgetRuntimeState>;
+
+export const createWidgetRuntimeState = (): WidgetRuntimeState => ({
+  queries: [],
+  actions: {},
+});
+
+export interface NormalizedWidgetQuery {
+  path: readonly string[];
+  input: unknown;
+}
+
+export interface WidgetQueryMatcherScope {
+  itemId: string;
+  boardId: string | undefined;
+  integrationIds: readonly string[];
+  options: Record<string, unknown>;
+  runtimeQueries: readonly NormalizedWidgetQuery[];
+}
+
+export type WidgetQueryMatcher = (query: NormalizedWidgetQuery, scope: WidgetQueryMatcherScope) => boolean;
+
+export interface WidgetContextActionProps {
+  options: Record<string, unknown>;
+  setOptions: (partial: Record<string, unknown>) => void;
   integrationIds: string[];
   context: WidgetContextMenuContext;
-  widgetStateRef: React.MutableRefObject<Record<string, unknown> | null>;
+  widgetRuntimeRef: WidgetRuntimeRef;
 }
 
 const createWithDynamicImport =
@@ -69,7 +102,10 @@ export const createWidgetDefinition = <TKind extends WidgetKind, TDefinition ext
 
 export interface WidgetDefinition {
   icon: TablerIcon;
+  supportsAdvancedFocus?: boolean;
   queryKey?: QueryKey;
+  queryKeys?: readonly QueryKey[];
+  queryMatcher?: WidgetQueryMatcher;
   refetchInterval?: number | null;
   supportedIntegrations?: IntegrationKind[];
   integrationsRequired?: boolean;
@@ -87,9 +123,50 @@ export interface WidgetDefinition {
       }
     >
   >;
-  contextActions?: (props: Omit<WidgetContextActionProps<WidgetKind>, "kind">) => WidgetContextMenuAction[];
+  contextActions?: (props: WidgetContextActionProps) => WidgetContextMenuAction[];
 }
 
+export const supportsAdvancedFocus = (definition: object) =>
+  !("supportsAdvancedFocus" in definition) || definition.supportsAdvancedFocus !== false;
+
+export const getWidgetQueryKeys = (
+  definition: {
+    kind?: string;
+    queryKey?: QueryKey;
+    queryKeys?: readonly QueryKey[];
+  },
+  kind?: WidgetKind,
+): readonly QueryKey[] => {
+  if (definition.queryKeys && definition.queryKeys.length > 0) return definition.queryKeys;
+  return [definition.queryKey ?? [["widget", definition.kind ?? kind]]];
+};
+
+export const normalizeWidgetQuery = (queryKey: QueryKey): NormalizedWidgetQuery | null => {
+  const path = queryKey[0];
+  if (!Array.isArray(path) || !path.every((part): part is string => typeof part === "string")) return null;
+
+  const queryKeyOptions = queryKey[1];
+  const input = isRecord(queryKeyOptions) && "input" in queryKeyOptions ? queryKeyOptions.input : undefined;
+  return { path, input };
+};
+
+export const getWidgetRuntimeQueries = (widgetRuntimeRef: WidgetRuntimeRef): readonly NormalizedWidgetQuery[] =>
+  widgetRuntimeRef.current.queries;
+
+export const matchesWidgetRuntimeQuery: WidgetQueryMatcher = (query, scope) =>
+  scope.runtimeQueries.some(
+    (runtimeQuery) =>
+      widgetQueryValueEquals(runtimeQuery.path, query.path) && widgetQueryValueEquals(runtimeQuery.input, query.input),
+  );
+
+export const widgetQueryInputMatches = (input: unknown, expected: Record<string, unknown>) =>
+  isRecord(input) && Object.entries(expected).every(([key, value]) => widgetQueryValueEquals(input[key], value));
+
+export const widgetQueryValueEquals = (left: unknown, right: unknown) => hashKey([left]) === hashKey([right]);
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === "object" && !Array.isArray(value);
+
 export interface WidgetProps<TKind extends WidgetKind> {
   options: inferOptionsFromCreator<WidgetOptionsRecordOf<TKind>>;
   integrationIds: string[];
@@ -99,10 +176,13 @@ export interface WidgetProps<TKind extends WidgetKind> {
 export type WidgetComponentProps<TKind extends WidgetKind> = WidgetProps<TKind> & {
   boardId: string | undefined; // undefined when in preview mode
   isEditMode: boolean;
+  displayMode?: "compact" | "advanced";
   setOptions: ({ newOptions }: { newOptions: Partial<inferOptionsFromCreator<WidgetOptionsRecordOf<TKind>>> }) => void;
   width: number;
   height: number;
+  widgetRuntimeRef?: WidgetRuntimeRef;
   widgetStateRef?: React.MutableRefObject<Record<string, unknown> | null>;
+  removeItem?: () => void;
 };
 
 export type WidgetOptionsRecordOf<TKind extends WidgetKind> = WidgetImports[TKind]["definition"]["createOptions"];
diff --git a/packages/widgets/src/dns-hole/controls/component.tsx b/packages/widgets/src/dns-hole/controls/component.tsx
index f46c3d746..13977a5a0 100644
--- a/packages/widgets/src/dns-hole/controls/component.tsx
+++ b/packages/widgets/src/dns-hole/controls/component.tsx
@@ -33,6 +33,8 @@ import { MaskedOrNormalImage } from "@homarr/ui";
 
 import type { widgetKind } from ".";
 import type { WidgetComponentProps } from "../../definition";
+import { getUsableWidgetQueryData } from "../../common/query-state";
+import actionTargetClasses from "../../common/action-target.module.css";
 import classes from "./component.module.css";
 import TimerModal from "./TimerModal";
 
@@ -44,6 +46,7 @@ export default function DnsHoleControlsWidget({
   integrationIds,
   isEditMode,
   width,
+  height,
 }: WidgetComponentProps<typeof widgetKind>) {
   const board = useRequiredBoard();
   // DnsHole integrations with interaction permissions
@@ -51,18 +54,26 @@ export default function DnsHoleControlsWidget({
     .map(({ id }) => id)
     .filter((id) => integrationIds.includes(id));
 
-  const { data: summaries = [] } = clientApi.widget.dnsHole.summary.useQuery({
-    integrationIds,
-  });
+  const summaryQuery = clientApi.widget.dnsHole.summary.useQuery({ integrationIds });
+  const summaries = getUsableWidgetQueryData(summaryQuery) ?? [];
+  const { isPending: isSummaryPending } = summaryQuery;
   const utils = clientApi.useUtils();
 
-  const { mutate: enableDns } = clientApi.widget.dnsHole.enable.useMutation({
+  const {
+    mutateAsync: enableDns,
+    isPending: isEnabling,
+    error: enableError,
+  } = clientApi.widget.dnsHole.enable.useMutation({
     onSettled: () => void utils.widget.dnsHole.summary.invalidate(),
   });
-  const { mutate: disableDns } = clientApi.widget.dnsHole.disable.useMutation({
+  const {
+    mutateAsync: disableDns,
+    isPending: isDisabling,
+    error: disableError,
+  } = clientApi.widget.dnsHole.disable.useMutation({
     onSettled: () => void utils.widget.dnsHole.summary.invalidate(),
   });
-  const toggleDns = (integrationId: string) => {
+  const toggleDns = async (integrationId: string) => {
     const integrationStatus = summaries.find(({ integration }) => integration.id === integrationId);
     if (!integrationStatus?.summary.status) return;
     utils.widget.dnsHole.summary.setData(
@@ -86,9 +97,9 @@ export default function DnsHoleControlsWidget({
       },
     );
     if (integrationStatus.summary.status === "enabled") {
-      disableDns({ integrationId, duration: 0 });
+      await disableDns({ integrationId, duration: 0 });
     } else {
-      enableDns({ integrationId });
+      await enableDns({ integrationId });
     }
   };
 
@@ -103,9 +114,30 @@ export default function DnsHoleControlsWidget({
 
   // Timer modal setup
   const [selectedIntegrationIds, setSelectedIntegrationIds] = useState<string[]>([]);
+  const [bulkPending, setBulkPending] = useState(false);
+  const [bulkFailureCount, setBulkFailureCount] = useState(0);
   const [opened, { close, open }] = useDisclosure(false);
 
   const controlAllButtonsVisible = options.showToggleAllButtons && integrationsWithInteractions.length > 0;
+  const actionsPending = bulkPending || isEnabling || isDisabling;
+  const actionError = enableError ?? disableError;
+  const runBulkToggle = async (integrationIdsToToggle: string[]) => {
+    setBulkPending(true);
+    setBulkFailureCount(0);
+    const results = await Promise.allSettled(integrationIdsToToggle.map(toggleDns));
+    setBulkFailureCount(results.filter(({ status }) => status === "rejected").length);
+    setBulkPending(false);
+  };
+
+  if (isSummaryPending) {
+    return (
+      <Stack h="100%" justify="center" align="center">
+        <Text c="dimmed" size="sm">
+          {t("common.action.loading")}
+        </Text>
+      </Stack>
+    );
+  }
 
   return (
     <Stack
@@ -120,11 +152,12 @@ export default function DnsHoleControlsWidget({
         <Flex className="dns-hole-controls-buttons" gap="sm">
           <Tooltip label={t("widget.dnsHoleControls.controls.enableAll")}>
             <Button
+              aria-label={t("widget.dnsHoleControls.controls.enableAll")}
               size="xs"
               p={0}
               className="dns-hole-controls-enable-all-button"
-              onClick={() => integrationsSummaries.disabled.forEach((integrationId) => toggleDns(integrationId))}
-              disabled={integrationsSummaries.disabled.length === 0}
+              onClick={() => void runBulkToggle(integrationsSummaries.disabled)}
+              disabled={integrationsSummaries.disabled.length === 0 || actionsPending}
               variant="light"
               color="green"
               bd={0}
@@ -137,6 +170,7 @@ export default function DnsHoleControlsWidget({
 
           <Tooltip label={t("widget.dnsHoleControls.controls.setTimer")}>
             <Button
+              aria-label={t("widget.dnsHoleControls.controls.setTimer")}
               size="xs"
               p={0}
               className="dns-hole-controls-timer-all-button"
@@ -144,7 +178,7 @@ export default function DnsHoleControlsWidget({
                 setSelectedIntegrationIds(integrationsSummaries.enabled);
                 open();
               }}
-              disabled={integrationsSummaries.enabled.length === 0}
+              disabled={integrationsSummaries.enabled.length === 0 || actionsPending}
               variant="light"
               color="yellow"
               bd={0}
@@ -157,11 +191,12 @@ export default function DnsHoleControlsWidget({
 
           <Tooltip label={t("widget.dnsHoleControls.controls.disableAll")}>
             <Button
+              aria-label={t("widget.dnsHoleControls.controls.disableAll")}
               size="xs"
               p={0}
               className="dns-hole-controls-disable-all-button"
-              onClick={() => integrationsSummaries.enabled.forEach((integrationId) => toggleDns(integrationId))}
-              disabled={integrationsSummaries.enabled.length === 0}
+              onClick={() => void runBulkToggle(integrationsSummaries.enabled)}
+              disabled={integrationsSummaries.enabled.length === 0 || actionsPending}
               variant="light"
               color="red"
               bd={0}
@@ -192,16 +227,31 @@ export default function DnsHoleControlsWidget({
               t={t}
               hasIconColor={board.iconColor !== null}
               rootWidth={width}
+              rootHeight={height}
+              actionsPending={actionsPending}
             />
           ))}
         </Stack>
       </ScrollArea.Autosize>
 
+      {bulkFailureCount > 0 && (
+        <Text size="xs" c="red" ta="center">
+          {t("widget.dnsHoleControls.error.bulkActionsFailed", { count: bulkFailureCount })}
+        </Text>
+      )}
+      {actionError && (
+        <Tooltip label={t("widget.dnsHoleControls.error.internalServerError")}>
+          <Text size="xs" c="red" ta="center" lineClamp={2} tabIndex={0}>
+            {t("widget.dnsHoleControls.error.internalServerError")}
+          </Text>
+        </Tooltip>
+      )}
+
       <TimerModal
         opened={opened}
         close={close}
         selectedIntegrationIds={selectedIntegrationIds}
-        disableDns={disableDns}
+        disableDns={(input) => void disableDns(input).catch(() => undefined)}
       />
     </Stack>
   );
@@ -209,13 +259,15 @@ export default function DnsHoleControlsWidget({
 
 interface ControlsCardProps {
   integrationsWithInteractions: string[];
-  toggleDns: (integrationId: string) => void;
+  toggleDns: (integrationId: string) => Promise<void>;
   data: RouterOutputs["widget"]["dnsHole"]["summary"][number];
   setSelectedIntegrationIds: (integrationId: string[]) => void;
   open: () => void;
   t: TranslationFunction;
   hasIconColor: boolean;
   rootWidth: number;
+  rootHeight: number;
+  actionsPending: boolean;
 }
 
 const ControlsCard: React.FC<ControlsCardProps> = ({
@@ -227,16 +279,18 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
   t,
   hasIconColor,
   rootWidth,
+  rootHeight,
+  actionsPending,
 }) => {
   const isConnected = useIntegrationConnected(data.integration.updatedAt, { timeout: 30000 });
   const isEnabled = data.summary.status ? data.summary.status === "enabled" : undefined;
   const isInteractPermitted = integrationsWithInteractions.includes(data.integration.id);
   // Use all factors to infer the state of the action buttons
-  const controlEnabled = isInteractPermitted && isEnabled !== undefined && isConnected;
+  const controlEnabled = isInteractPermitted && isEnabled !== undefined && isConnected && !actionsPending;
   const board = useRequiredBoard();
 
   const iconUrl = integrationDefs[data.integration.kind].iconUrl;
-  const layout = rootWidth < 256 ? "sm" : "md";
+  const layout = rootWidth < 256 || rootHeight < 112 ? "sm" : "md";
 
   return (
     <Indicator
@@ -296,7 +350,9 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
                 <Group gap="xs" grow wrap="nowrap" w="100%">
                   {!isEnabled ? (
                     <ActionIcon
-                      onClick={() => toggleDns(data.integration.id)}
+                      className={actionTargetClasses.root}
+                      aria-label={`${t("widget.dnsHoleControls.controls.enableAll")}: ${data.integration.name}`}
+                      onClick={() => void toggleDns(data.integration.id).catch(() => undefined)}
                       disabled={!controlEnabled}
                       size="sm"
                       color="green"
@@ -306,7 +362,9 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
                     </ActionIcon>
                   ) : (
                     <ActionIcon
-                      onClick={() => toggleDns(data.integration.id)}
+                      className={actionTargetClasses.root}
+                      aria-label={`${t("widget.dnsHoleControls.controls.disableAll")}: ${data.integration.name}`}
+                      onClick={() => void toggleDns(data.integration.id).catch(() => undefined)}
                       disabled={!controlEnabled}
                       size="sm"
                       color="red"
@@ -316,6 +374,8 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
                     </ActionIcon>
                   )}
                   <ActionIcon
+                    className={actionTargetClasses.root}
+                    aria-label={`${t("widget.dnsHoleControls.controls.setTimer")}: ${data.integration.name}`}
                     onClick={() => {
                       setSelectedIntegrationIds([data.integration.id]);
                       open();
@@ -323,6 +383,8 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
                     size="sm"
                     color="yellow"
                     variant="light"
+                    display={isInteractPermitted ? undefined : "none"}
+                    disabled={!controlEnabled || !isEnabled}
                   >
                     <IconClockPause size={12} />
                   </ActionIcon>
@@ -330,11 +392,16 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
               )}
               {layout === "md" && (
                 <UnstyledButton
+                  aria-label={`${
+                    isEnabled
+                      ? t("widget.dnsHoleControls.controls.disableAll")
+                      : t("widget.dnsHoleControls.controls.enableAll")
+                  }: ${data.integration.name}`}
                   className="dns-hole-controls-item-toggle-button"
                   disabled={!controlEnabled}
                   display="contents"
                   style={{ cursor: controlEnabled ? "pointer" : "default" }}
-                  onClick={() => toggleDns(data.integration.id)}
+                  onClick={() => void toggleDns(data.integration.id).catch(() => undefined)}
                 >
                   <Badge
                     className={`dns-hole-controls-item-toggle-button-styling${controlEnabled ? " hoverable-component clickable-component" : ""}`}
@@ -372,7 +439,8 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
           </Flex>
           {layout === "md" && (
             <ActionIcon
-              className="dns-hole-controls-item-timer-button"
+              aria-label={`${t("widget.dnsHoleControls.controls.setTimer")}: ${data.integration.name}`}
+              className={combineClasses("dns-hole-controls-item-timer-button", actionTargetClasses.root)}
               display={isInteractPermitted ? undefined : "none"}
               disabled={!controlEnabled || !isEnabled}
               color="yellow"
diff --git a/packages/widgets/src/dns-hole/controls/index.ts b/packages/widgets/src/dns-hole/controls/index.ts
index 9340a642a..8e5a3ee02 100644
--- a/packages/widgets/src/dns-hole/controls/index.ts
+++ b/packages/widgets/src/dns-hole/controls/index.ts
@@ -8,6 +8,7 @@ import { optionsBuilder } from "../../options";
 export const widgetKind = "dnsHoleControls";
 
 export const { definition, componentLoader } = createWidgetDefinition(widgetKind, {
+  supportsAdvancedFocus: false,
   icon: IconDeviceGamepad,
   queryKey: [["widget", "dnsHole"]],
   refetchInterval: 5,
diff --git a/packages/widgets/src/dns-hole/summary/component.tsx b/packages/widgets/src/dns-hole/summary/component.tsx
index 4bcc82568..f61991d27 100644
--- a/packages/widgets/src/dns-hole/summary/component.tsx
+++ b/packages/widgets/src/dns-hole/summary/component.tsx
@@ -1,8 +1,19 @@
 "use client";
 
-import { useMemo } from "react";
 import type { BoxProps } from "@mantine/core";
-import { Avatar, AvatarGroup, Card, Flex, SimpleGrid, Stack, Text, Tooltip, TooltipFloating } from "@mantine/core";
+import {
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Card,
+  Flex,
+  Group,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  Tooltip,
+} from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 import { IconBarrierBlock, IconPercentage, IconSearch, IconWorldWww } from "@tabler/icons-react";
 
@@ -18,37 +29,84 @@ import type { TablerIcon } from "@homarr/ui";
 
 import type { widgetKind } from ".";
 import type { WidgetComponentProps, WidgetProps } from "../../definition";
+import { getUsableWidgetQueryData } from "../../common/query-state";
 
-export default function DnsHoleSummaryWidget({ options, integrationIds }: WidgetComponentProps<typeof widgetKind>) {
-  const { data: summaries = [] } = clientApi.widget.dnsHole.summary.useQuery({
+export default function DnsHoleSummaryWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+}: WidgetComponentProps<typeof widgetKind>) {
+  const summaryQuery = clientApi.widget.dnsHole.summary.useQuery({
     integrationIds,
   });
+  const summaries = getUsableWidgetQueryData(summaryQuery) ?? [];
+  const { isPending } = summaryQuery;
 
   const t = useI18n();
 
-  const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);
+  const data = summaries.flatMap(({ summary }) => summary);
+  const layoutProps = boxPropsByLayout(options.layout);
+  const showSourceStatuses = summaries.length > 1 && width >= 240 && height >= 220;
+
+  if (isPending) {
+    return (
+      <Stack h="100%" justify="center" align="center">
+        <Text c="dimmed" size="sm">
+          {t("common.action.loading")}
+        </Text>
+      </Stack>
+    );
+  }
 
   return (
-    <SimpleGrid cols={2} spacing="xs" h="100%" p={"xs"} {...boxPropsByLayout(options.layout)}>
-      {data.length > 0 ? (
-        stats.map((item) => (
-          <StatCard key={item.color} item={item} usePiHoleColors={options.usePiHoleColors} data={data} t={t} />
-        ))
-      ) : (
-        <Stack h="100%" w="100%" justify="center" align="center" gap="sm" p="sm">
-          <AvatarGroup spacing="md">
-            {summaries.map(({ integration }) => (
-              <Tooltip key={integration.id} label={integration.name}>
-                <Avatar h={30} w={30} src={integrationDefs[integration.kind].iconUrl} />
-              </Tooltip>
+    <Stack h="100%" gap={0}>
+      <SimpleGrid cols={2} spacing="xs" p="xs" {...layoutProps} style={{ ...layoutProps.style, flex: 1, minHeight: 0 }}>
+        {data.length > 0 ? (
+          stats.map((item) => (
+            <StatCard key={item.color} item={item} usePiHoleColors={options.usePiHoleColors} data={data} t={t} />
+          ))
+        ) : (
+          <Stack
+            aria-live="polite"
+            h="100%"
+            w="100%"
+            justify="center"
+            align="center"
+            gap="sm"
+            p="sm"
+            style={{ gridColumn: "1 / -1" }}
+          >
+            <AvatarGroup spacing="md">
+              {summaries.map(({ integration }) => (
+                <Tooltip key={integration.id} label={integration.name}>
+                  <Avatar h={30} w={30} src={integrationDefs[integration.kind].iconUrl} />
+                </Tooltip>
+              ))}
+            </AvatarGroup>
+            <Text fz="md" ta="center">
+              {t("widget.dnsHoleSummary.error.integrationsDisconnected")}
+            </Text>
+          </Stack>
+        )}
+      </SimpleGrid>
+      {showSourceStatuses && (
+        <ScrollArea type="auto" scrollbarSize={4} px="xs" pb="xs">
+          <Group gap="xs" wrap="nowrap">
+            {summaries.map(({ integration, summary }) => (
+              <Badge
+                key={integration.id}
+                variant="light"
+                color={summary.status === "enabled" ? "green" : summary.status === "disabled" ? "red" : "gray"}
+                style={{ flexShrink: 0 }}
+              >
+                {integration.name}: {t(`widget.dnsHoleSummary.status.${summary.status ?? "unknown"}` as never)}
+              </Badge>
             ))}
-          </AvatarGroup>
-          <Text fz="md" ta="center">
-            {t("widget.dnsHoleSummary.error.integrationsDisconnected")}
-          </Text>
-        </Stack>
+          </Group>
+        </ScrollArea>
       )}
-    </SimpleGrid>
+    </Stack>
   );
 }
 
@@ -61,7 +119,7 @@ const stats = [
         size === "sm" ? 0 : 2,
       ),
     label: (t) => t("widget.dnsHoleSummary.data.adsBlockedToday"),
-    color: "rgba(240, 82, 60, 0.4)", // RED
+    color: "var(--mantine-color-red-light)",
   },
   {
     icon: IconPercentage,
@@ -71,7 +129,7 @@ const stats = [
       return `${formatNumber(totalCount === 0 ? 0 : (blocked / totalCount) * 100, size === "sm" ? 0 : 2)}%`;
     },
     label: (t) => t("widget.dnsHoleSummary.data.adsBlockedTodayPercentage"),
-    color: "rgba(255, 165, 20, 0.4)", // YELLOW
+    color: "var(--mantine-color-yellow-light)",
   },
   {
     icon: IconSearch,
@@ -81,7 +139,7 @@ const stats = [
         size === "sm" ? 0 : 2,
       ),
     label: (t) => t("widget.dnsHoleSummary.data.dnsQueriesToday"),
-    color: "rgba(0, 175, 218, 0.4)", // BLUE
+    color: "var(--mantine-color-cyan-light)",
   },
   {
     icon: IconWorldWww,
@@ -97,7 +155,7 @@ const stats = [
     },
     tooltip: (data, t) => (data.length >= 2 ? t("widget.dnsHoleSummary.domainsTooltip") : undefined),
     label: (t) => t("widget.dnsHoleSummary.data.domainsBeingBlocked"),
-    color: "rgba(0, 176, 96, 0.4)", // GREEN
+    color: "var(--mantine-color-green-light)",
   },
 ] satisfies StatItem[];
 
@@ -122,15 +180,20 @@ const StatCard = ({ item, data, usePiHoleColors, t }: StatCardProps) => {
   const hideLabel = (height <= 32 && width <= 256) || (height <= 64 && width <= 92);
   const tooltip = item.tooltip?.(data, t);
   const board = useRequiredBoard();
+  const label = translateIfNecessary(t, item.label);
+  const value = item.value(data, width <= 64 ? "sm" : "md");
 
   return (
-    <TooltipFloating label={tooltip} disabled={!tooltip} w={250} multiline>
+    <Tooltip label={tooltip} disabled={!tooltip} w={250} multiline events={{ hover: true, focus: true, touch: true }}>
       <Card
         ref={ref}
+        component="section"
+        tabIndex={tooltip ? 0 : undefined}
+        aria-label={`${label}: ${value}`}
         className="summary-card"
         p="sm"
         radius={board.itemRadius}
-        bg={usePiHoleColors ? item.color : "rgba(96, 96, 96, 0.1)"}
+        bg={usePiHoleColors ? item.color : "var(--mantine-color-default-hover)"}
         style={{
           flex: 1,
         }}
@@ -158,17 +221,17 @@ const StatCard = ({ item, data, usePiHoleColors, t }: StatCardProps) => {
             wrap="wrap"
           >
             <Text className="summary-card-value text-flash" ta="center" size="lg" fw="bold" maw="100%">
-              {item.value(data, width <= 64 ? "sm" : "md")}
+              {value}
             </Text>
             {!hideLabel && (
               <Text className="summary-card-label" ta="center" size="xs" maw="100%">
-                {translateIfNecessary(t, item.label)}
+                {label}
               </Text>
             )}
           </Flex>
         </Flex>
       </Card>
-    </TooltipFloating>
+    </Tooltip>
   );
 };
 
diff --git a/packages/widgets/src/dns-hole/summary/index.ts b/packages/widgets/src/dns-hole/summary/index.ts
index 0d605e8e9..dcc77a041 100644
--- a/packages/widgets/src/dns-hole/summary/index.ts
+++ b/packages/widgets/src/dns-hole/summary/index.ts
@@ -8,6 +8,7 @@ import { optionsBuilder } from "../../options";
 export const widgetKind = "dnsHoleSummary";
 
 export const { definition, componentLoader } = createWidgetDefinition(widgetKind, {
+  supportsAdvancedFocus: false,
   icon: IconAd,
   queryKey: [["widget", "dnsHole"]],
   refetchInterval: 5,
diff --git a/packages/widgets/src/docker/component.tsx b/packages/widgets/src/docker/component.tsx
index 576a80d9d..9ade953fd 100644
--- a/packages/widgets/src/docker/component.tsx
+++ b/packages/widgets/src/docker/component.tsx
@@ -1,7 +1,21 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { ActionIcon, Avatar, Badge, Box, Center, Group, Menu, Portal, Stack, Text, Tooltip } from "@mantine/core";
+import {
+  ActionIcon,
+  Avatar,
+  Badge,
+  Box,
+  Center,
+  getDefaultZIndex,
+  Group,
+  Menu,
+  Portal,
+  Stack,
+  Text,
+  Tooltip,
+  VisuallyHidden,
+} from "@mantine/core";
 import {
   IconBrandDocker,
   IconCategoryPlus,
@@ -29,8 +43,11 @@ import { showErrorNotification, showSuccessNotification } from "@homarr/notifica
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
+import actionTargetClasses from "../common/action-target.module.css";
 import { HomarrDataTable } from "../common/homarr-data-table";
 import { usePersistedTableLayout, useTableLayoutPersistence } from "../common/use-persisted-table-layout";
+import { getDockerColumnVisibility, getDockerFooterVisibility } from "./layout";
 
 type DockerContainer = RouterOutputs["docker"]["getContainers"]["containers"][number];
 type ContainerAction = "start" | "stop" | "restart" | "remove";
@@ -63,10 +80,32 @@ const ContainerStateBadge = ({ state }: { state: ContainerState }) => {
   );
 };
 
+const ContainerStateDot = ({ state }: { state: ContainerState }) => {
+  const t = useScopedI18n("docker.field.state.option");
+  const label = t(state);
+
+  return (
+    <Tooltip label={label} withArrow>
+      <Box component="span" style={{ display: "inline-flex", flexShrink: 0 }}>
+        <Box
+          component="span"
+          aria-hidden="true"
+          w={8}
+          h={8}
+          bg={`${containerStateColorMap[state]}.6`}
+          style={{ borderRadius: "50%" }}
+        />
+        <VisuallyHidden>{label}</VisuallyHidden>
+      </Box>
+    </Tooltip>
+  );
+};
+
 const createColumns = (
   t: ReturnType<typeof useScopedI18n<"docker">>,
   handlers: ContainerActionHandlers,
   sortingEnabled: boolean,
+  inlineState: boolean,
 ): DataTableColumn<DockerContainer>[] => [
   {
     accessor: "name",
@@ -76,6 +115,7 @@ const createColumns = (
     sortable: sortingEnabled,
     render: (container) => (
       <Group gap="xs" wrap="nowrap" style={{ overflow: "hidden" }}>
+        {inlineState && <ContainerStateDot state={container.state} />}
         <Avatar
           variant="outline"
           radius="sm"
@@ -188,6 +228,7 @@ export default function DockerWidget({
   options,
   width,
   isEditMode,
+  displayMode,
   boardId,
   itemId,
   setOptions,
@@ -198,9 +239,11 @@ export default function DockerWidget({
   const board = useOptionalBoard();
   const { data: session } = useSession();
   const hasChangeAccess = board ? constructBoardPermissions(board, session).hasChangeAccess : false;
-  const isTiny = width <= 256;
+  const isAdvanced = displayMode === "advanced";
 
-  const { data, refetch, isFetching } = clientApi.docker.getContainers.useQuery();
+  const containersQuery = clientApi.docker.getContainers.useQuery();
+  const data = getUsableWidgetQueryData(containersQuery);
+  const { refetch, isFetching } = containersQuery;
   const containers = useMemo(() => data?.containers ?? [], [data?.containers]);
   const timestamp = useMemo(() => data?.timestamp ?? new Date(), [data?.timestamp]);
   const relativeTime = useTimeAgo(timestamp);
@@ -279,13 +322,18 @@ export default function DockerWidget({
     [containers],
   );
 
-  const selectedColumns = useMemo(() => new Set<string>(options.columns), [options.columns]);
+  const columnVisibility = useMemo(
+    () => getDockerColumnVisibility(options.columns, width, isAdvanced),
+    [isAdvanced, options.columns, width],
+  );
+  const inlineState =
+    !isAdvanced && width < 340 && options.columns.includes("name") && options.columns.includes("state");
   const columns = useMemo(() => {
-    const sortingEnabled = options.enableRowSorting && !isEditMode;
-    return createColumns(t, actionHandlers, sortingEnabled).filter(({ accessor }) =>
-      selectedColumns.has(String(accessor)),
+    const sortingEnabled = (isAdvanced || options.enableRowSorting) && !isEditMode;
+    return createColumns(t, actionHandlers, sortingEnabled, inlineState).filter(
+      ({ accessor }) => columnVisibility[String(accessor) as keyof typeof columnVisibility],
     );
-  }, [actionHandlers, isEditMode, options.enableRowSorting, selectedColumns, t]);
+  }, [actionHandlers, columnVisibility, inlineState, isAdvanced, isEditMode, options.enableRowSorting, t]);
   const { effectiveColumns, storeKey } = usePersistedTableLayout({
     columns,
     columnAccessors,
@@ -303,7 +351,7 @@ export default function DockerWidget({
     setContextMenu({ x: event.clientX, y: event.clientY, container: record });
   }, []);
 
-  if (options.columns.length === 0) {
+  if (!isAdvanced && options.columns.length === 0) {
     return (
       <Center h="100%">
         <Text>{t("error.noColumns")}</Text>
@@ -311,6 +359,8 @@ export default function DockerWidget({
     );
   }
 
+  const footerVisibility = getDockerFooterVisibility(width, isAdvanced);
+
   return (
     <Stack gap={0} h="100%" style={{ overflow: "hidden" }}>
       <Box style={{ flex: 1, minHeight: 0 }}>
@@ -325,7 +375,7 @@ export default function DockerWidget({
           columns={effectiveColumns}
           storeColumnsKey={storeKey}
           sortStatus={sortStatus}
-          onSortStatusChange={options.enableRowSorting && !isEditMode ? setSortStatus : undefined}
+          onSortStatusChange={(isAdvanced || options.enableRowSorting) && !isEditMode ? setSortStatus : undefined}
           idAccessor="id"
           onRowContextMenu={isEditMode ? undefined : handleContextMenu}
           onScroll={() => {
@@ -334,8 +384,15 @@ export default function DockerWidget({
         />
       </Box>
 
-      {!isTiny && (
-        <Group justify="space-between" style={{ borderTop: "0.0625rem solid var(--border-color)" }} p={4} wrap="nowrap">
+      {footerVisibility.footer && (
+        <Group
+          justify="space-between"
+          style={{
+            borderTop: "0.0625rem solid var(--border-color)",
+          }}
+          p={4}
+          wrap="nowrap"
+        >
           <Group gap={4} wrap="nowrap">
             <IconBrandDocker size={20} style={{ flexShrink: 0 }} />
             <Text size="sm" truncate>
@@ -344,14 +401,19 @@ export default function DockerWidget({
           </Group>
 
           <Group gap="sm" wrap="nowrap" justify="flex-end" style={{ minWidth: 0 }}>
-            <Text size="sm" style={{ whiteSpace: "nowrap" }}>
-              {t("table.totalCpu", { cpu: totals.cpu.toFixed(2) })}
-            </Text>
-            <Text size="sm" style={{ whiteSpace: "nowrap" }}>
-              {t("table.totalMemory", { memory: formatBytes(totals.memory) })}
-            </Text>
+            {footerVisibility.cpu && (
+              <Text size="sm" style={{ whiteSpace: "nowrap" }}>
+                {t("table.totalCpu", { cpu: totals.cpu.toFixed(2) })}
+              </Text>
+            )}
+            {footerVisibility.memory && (
+              <Text size="sm" style={{ whiteSpace: "nowrap" }}>
+                {t("table.totalMemory", { memory: formatBytes(totals.memory) })}
+              </Text>
+            )}
             <Tooltip label={t("table.refresh.lastUpdated", { when: relativeTime })}>
               <ActionIcon
+                className={actionTargetClasses.root}
                 size="sm"
                 variant="transparent"
                 c="var(--mantine-color-text)"
@@ -386,6 +448,7 @@ function ContainerMenuButton({
     <Menu opened={opened} onChange={setOpened} closeOnItemClick={false} withinPortal position="bottom-end" shadow="sm">
       <Menu.Target>
         <ActionIcon
+          className={actionTargetClasses.root}
           variant="subtle"
           color="gray"
           size="sm"
@@ -486,7 +549,7 @@ function ContainerContextMenu({
         left={0}
         w="100vw"
         h="100vh"
-        style={{ zIndex: 1000 }}
+        style={{ zIndex: getDefaultZIndex("popover") }}
         onClick={onClose}
         onContextMenu={(event) => {
           event.preventDefault();
diff --git a/packages/widgets/src/docker/layout.spec.ts b/packages/widgets/src/docker/layout.spec.ts
new file mode 100644
index 000000000..190ed9542
--- /dev/null
+++ b/packages/widgets/src/docker/layout.spec.ts
@@ -0,0 +1,52 @@
+import { describe, expect, test } from "vitest";
+
+import { getDockerColumnVisibility, getDockerFooterVisibility } from "./layout";
+
+const columns = ["name", "state", "host", "cpuUsage", "memoryUsage", "actions"] as const;
+
+describe("getDockerColumnVisibility", () => {
+  test("keeps only essential columns in a narrow compact widget", () => {
+    expect(getDockerColumnVisibility(columns, 240, false)).toEqual({
+      name: true,
+      state: false,
+      host: false,
+      cpuUsage: false,
+      memoryUsage: false,
+      actions: true,
+    });
+  });
+
+  test("reveals compact metrics as width becomes available", () => {
+    expect(getDockerColumnVisibility(columns, 440, false)).toMatchObject({
+      host: false,
+      cpuUsage: true,
+      memoryUsage: false,
+    });
+  });
+
+  test("keeps a configured state column when there is no name column for the inline dot", () => {
+    expect(getDockerColumnVisibility(["state"], 240, false).state).toBe(true);
+  });
+
+  test("uses every expert column in advanced mode", () => {
+    expect(getDockerColumnVisibility([], 240, true)).toEqual({
+      name: true,
+      state: true,
+      host: true,
+      cpuUsage: true,
+      memoryUsage: true,
+      actions: true,
+    });
+  });
+});
+
+describe("getDockerFooterVisibility", () => {
+  test("reveals totals only when they fit", () => {
+    expect(getDockerFooterVisibility(300, false)).toEqual({ footer: true, cpu: false, memory: false });
+    expect(getDockerFooterVisibility(400, false)).toEqual({ footer: true, cpu: true, memory: false });
+  });
+
+  test("keeps every total in advanced mode", () => {
+    expect(getDockerFooterVisibility(240, true)).toEqual({ footer: true, cpu: true, memory: true });
+  });
+});
diff --git a/packages/widgets/src/docker/layout.ts b/packages/widgets/src/docker/layout.ts
new file mode 100644
index 000000000..465ac51fc
--- /dev/null
+++ b/packages/widgets/src/docker/layout.ts
@@ -0,0 +1,25 @@
+export type DockerColumn = "name" | "state" | "host" | "cpuUsage" | "memoryUsage" | "actions";
+
+export const getDockerColumnVisibility = (
+  configuredColumns: readonly DockerColumn[],
+  width: number,
+  isAdvanced: boolean,
+): Record<DockerColumn, boolean> => {
+  const configured = new Set(configuredColumns);
+  const isVisible = (column: DockerColumn) => isAdvanced || configured.has(column);
+
+  return {
+    name: isVisible("name"),
+    state: isVisible("state") && (isAdvanced || width >= 340 || !configured.has("name")),
+    host: isVisible("host") && (isAdvanced || width >= 640),
+    cpuUsage: isVisible("cpuUsage") && (isAdvanced || width >= 420),
+    memoryUsage: isVisible("memoryUsage") && (isAdvanced || width >= 520),
+    actions: isVisible("actions"),
+  };
+};
+
+export const getDockerFooterVisibility = (width: number, isAdvanced: boolean) => ({
+  footer: isAdvanced || width > 256,
+  cpu: isAdvanced || width >= 360,
+  memory: isAdvanced || width >= 480,
+});
diff --git a/packages/widgets/src/downloads/component.tsx b/packages/widgets/src/downloads/component.tsx
index 939293ed5..a3957a587 100644
--- a/packages/widgets/src/downloads/component.tsx
+++ b/packages/widgets/src/downloads/component.tsx
@@ -3,7 +3,7 @@
 import "../widgets-common.css";
 import "./styles.css";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   ActionIcon,
   Avatar,
@@ -50,11 +50,14 @@ import { formatByteRate, formatBytes, useIntegrationConnected } from "@homarr/co
 import { getIconUrl, getIntegrationKindsByCategory } from "@homarr/definitions";
 import type { ExtendedClientStatus, ExtendedDownloadClientItem } from "@homarr/integrations";
 import { showErrorNotification } from "@homarr/notifications";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { HomarrDataTable } from "../common/homarr-data-table";
+import { formatLocalizedDateTime } from "../common/locale";
 import { usePersistedTableLayout, useTableLayoutPersistence } from "../common/use-persisted-table-layout";
+import { filterDownloadItemsByStatus, getAvailableDownloadStates } from "./helpers";
 
 dayjs.extend(relativeTime);
 
@@ -132,8 +135,8 @@ const stateColorMap: Record<DownloadState, string> = {
 };
 
 const rowBgAlpha: Partial<Record<DownloadState, string>> = {
-  failed: "rgba(255, 0, 0, 0.04)",
-  paused: "rgba(255, 200, 0, 0.03)",
+  failed: "var(--mantine-color-red-light)",
+  paused: "var(--mantine-color-yellow-light)",
 };
 
 const columnVisibilityChecks: Partial<Record<string, (ctx: ColumnContext) => boolean>> = {
@@ -152,7 +155,10 @@ const speedColumnConfig = {
   up: { Icon: IconUpload, color: "green" as const },
 } as const;
 
-function getSizeConfig(width: number): SizeConfig {
+export function getSizeConfig(width: number, height = Number.POSITIVE_INFINITY, isAdvanced = false): SizeConfig {
+  if (isAdvanced) return DEFAULT_SIZE_CONFIG;
+  if (height < 120) return SIZE_BREAKPOINTS[0]?.config ?? DEFAULT_SIZE_CONFIG;
+  if (height < 180) return SIZE_BREAKPOINTS[1]?.config ?? DEFAULT_SIZE_CONFIG;
   for (const { maxWidth, config } of SIZE_BREAKPOINTS) {
     if (width < maxWidth) return config;
   }
@@ -298,24 +304,24 @@ export default function DownloadClientsWidget({
   boardId,
   itemId,
   width,
+  height,
+  displayMode,
 }: WidgetComponentProps<"downloads">) {
-  const allInteractAccess = useIntegrationsWithInteractAccess();
   const board = useOptionalBoard();
   const { data: session } = useSession();
   const hasChangeAccess = board ? constructBoardPermissions(board, session).hasChangeAccess : false;
+  const allInteractAccess = useIntegrationsWithInteractAccess();
   const integrationInteractSet = useMemo(
     () => new Set(allInteractAccess.filter(({ id }) => integrationIds.includes(id)).map(({ id }) => id)),
     [allInteractAccess, integrationIds],
   );
 
-  const {
-    data: currentItems = [],
-    isFetching,
-    isError,
-  } = clientApi.widget.downloads.getJobsAndStatuses.useQuery({
+  const downloadsQuery = clientApi.widget.downloads.getJobsAndStatuses.useQuery({
     integrationIds,
     limitPerIntegration: options.limitPerIntegration,
   });
+  const currentItems = getUsableWidgetQueryData(downloadsQuery) ?? [];
+  const { isFetching } = downloadsQuery;
 
   const t = useScopedI18n("widget.downloads");
 
@@ -323,6 +329,7 @@ export default function DownloadClientsWidget({
   const [statusFilter, setStatusFilter] = useState<string[]>([]);
   const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
   const [showStats, { toggle: toggleStats }] = useDisclosure(false);
+  const isAdvanced = displayMode === "advanced";
 
   const utils = clientApi.useUtils();
   const mutationOptions = {
@@ -336,6 +343,7 @@ export default function DownloadClientsWidget({
   const { mutate: mutatePauseQueue } = clientApi.widget.downloads.pause.useMutation(mutationOptions);
 
   const { mutate: saveItemOptions } = clientApi.widget.options.saveItemOptions.useMutation({
+    scope: { id: `downloads-options:${boardId ?? "preview"}:${itemId ?? "preview"}` },
     onError: () => showErrorNotification({ title: t("errors.actionFailed"), message: t("errors.actionFailedMessage") }),
   });
   const persistOption = useTableLayoutPersistence({
@@ -348,26 +356,27 @@ export default function DownloadClientsWidget({
 
   let defaultSortDirection: DataTableSortStatus<ExtendedDownloadClientItem>["direction"] = "asc";
   if (options.descendingDefaultSort) defaultSortDirection = "desc";
-  const [sortStatus, setSortStatus] = useState<DataTableSortStatus<ExtendedDownloadClientItem>>({
+  const [sortStatus, setSortStatus] = useState<DataTableSortStatus<ExtendedDownloadClientItem>>(() => ({
     columnAccessor: options.defaultSort,
     direction: defaultSortDirection,
-  });
+  }));
+  const hasMountedSortDefaults = useRef(false);
   useEffect(() => {
+    if (!hasMountedSortDefaults.current) {
+      hasMountedSortDefaults.current = true;
+      return;
+    }
     setSortStatus({ columnAccessor: options.defaultSort, direction: defaultSortDirection });
   }, [options.defaultSort, defaultSortDirection]);
 
-  const data = useMemo<ExtendedDownloadClientItem[]>(() => {
+  const eligibleData = useMemo<ExtendedDownloadClientItem[]>(() => {
     return currentItems
       .filter(({ integration }) => integrationIds.includes(integration.id))
       .flatMap((pair) =>
         pair.data.items
           .filter(({ category }) => matchesCategoryFilter(category, options.categoryFilter, options.filterIsWhitelist))
           .filter((item) => showCompletedItem(item, options))
-          .filter(
-            ({ state }) =>
-              (clientFilter.length === 0 || clientFilter.includes(pair.integration.id)) &&
-              (statusFilter.length === 0 || statusFilter.includes(state)),
-          )
+          .filter(() => clientFilter.length === 0 || clientFilter.includes(pair.integration.id))
           .map((item): ExtendedDownloadClientItem => {
             const received = item.received ?? Math.floor(item.size * item.progress);
             const ids = [pair.integration.id];
@@ -398,9 +407,10 @@ export default function DownloadClientsWidget({
     mutateResumeItem,
     options,
     clientFilter,
-    statusFilter,
   ]);
 
+  const data = useMemo(() => filterDownloadItemsByStatus(eligibleData, statusFilter), [eligibleData, statusFilter]);
+
   const sortedData = useMemo(() => {
     const accessor = sortStatus.columnAccessor as keyof ExtendedDownloadClientItem;
     const multiplier = getSortMultiplier(sortStatus.direction);
@@ -461,7 +471,7 @@ export default function DownloadClientsWidget({
   const hasMultipleClients = clients.length > 1;
   const hasMultipleTypes = new Set(data.map(({ type }) => type)).size > 1;
 
-  const size = useMemo(() => getSizeConfig(width), [width]);
+  const size = useMemo(() => getSizeConfig(width, height, isAdvanced), [height, isAdvanced, width]);
   const optionsColumnSet = useMemo(() => new Set<string>(options.columns), [options.columns]);
   const columnContext = useMemo<ColumnContext>(
     () => ({ optionsColumnSet, hasTorrents, hasMultipleClients, hasMultipleTypes, size }),
@@ -701,7 +711,7 @@ export default function DownloadClientsWidget({
     return traffic.up / traffic.down;
   }, [clients]);
 
-  const availableStatuses = useMemo(() => [...new Set(data.map(({ state }) => state))], [data]);
+  const availableStatuses = useMemo(() => getAvailableDownloadStates(eligibleData), [eligibleData]);
 
   const queueStats = useMemo(() => {
     const stateCounts: Record<string, number> = {};
@@ -723,20 +733,12 @@ export default function DownloadClientsWidget({
     );
   }
 
-  if (isError && currentItems.length === 0) {
-    return (
-      <Center h="100%">
-        <Text c="red">{t("errors.noCommunications")}</Text>
-      </Center>
-    );
-  }
-
   let rowContextMenuHandler: typeof handleContextMenu | undefined = handleContextMenu;
   if (isEditMode) rowContextMenuHandler = undefined;
 
   return (
     <Stack gap={0} h="100%" style={{ overflow: "hidden" }}>
-      {showStats && (
+      {(showStats || isAdvanced) && (
         <GlobalStatsBar
           queueStats={queueStats}
           totalSpeed={totalSpeed}
@@ -780,22 +782,24 @@ export default function DownloadClientsWidget({
         />
       </Box>
 
-      <WidgetFooter
-        clients={clients}
-        totalSpeed={totalSpeed}
-        totalUpSpeed={totalUpSpeed}
-        globalRatio={globalRatio}
-        hasTorrents={hasTorrents}
-        clientFilter={clientFilter}
-        setClientFilter={setClientFilter}
-        statusFilter={statusFilter}
-        setStatusFilter={setStatusFilter}
-        availableStatuses={availableStatuses}
-        pauseQueue={mutatePauseQueue}
-        resumeQueue={mutateResumeQueue}
-        showStats={showStats}
-        toggleStats={toggleStats}
-      />
+      {(isAdvanced || height >= 96) && (
+        <WidgetFooter
+          clients={clients}
+          totalSpeed={totalSpeed}
+          totalUpSpeed={totalUpSpeed}
+          globalRatio={globalRatio}
+          hasTorrents={hasTorrents}
+          clientFilter={clientFilter}
+          setClientFilter={setClientFilter}
+          statusFilter={statusFilter}
+          setStatusFilter={setStatusFilter}
+          availableStatuses={availableStatuses}
+          pauseQueue={mutatePauseQueue}
+          resumeQueue={mutateResumeQueue}
+          showStats={showStats}
+          toggleStats={toggleStats}
+        />
+      )}
 
       {contextMenu && <RowContextMenu state={contextMenu} onClose={closeContextMenu} t={t} />}
     </Stack>
@@ -847,6 +851,7 @@ function buildHoverTooltip(record: ExtendedDownloadClientItem, t: DownloadsT): R
 
 function ExpandedRow({ item, collapse }: { item: ExtendedDownloadClientItem; collapse: () => void }) {
   const t = useScopedI18n("widget.downloads");
+  const locale = useCurrentIntlLocale();
   const progressPercent = Math.floor(item.progress * 100);
   const categoryDisplay = formatCategoryDisplay(item.category);
 
@@ -909,7 +914,7 @@ function ExpandedRow({ item, collapse }: { item: ExtendedDownloadClientItem; col
               <DetailPair label={t("items.sent.detailsTitle")} value={formatBytes(item.sent)} />
             )}
             {item.added !== undefined && (
-              <DetailPair label={t("items.added.detailsTitle")} value={dayjs(item.added).format("YYYY-MM-DD HH:mm")} />
+              <DetailPair label={t("items.added.detailsTitle")} value={formatLocalizedDateTime(item.added, locale)} />
             )}
             {categoryDisplay && <DetailPair label={t("items.category.detailsTitle")} value={categoryDisplay} />}
             <DetailPair label={t("items.id.detailsTitle")} value={item.id} />
@@ -1046,7 +1051,7 @@ function RowContextMenu({ state, onClose, t }: { state: ContextMenuState; onClos
         left={0}
         w="100vw"
         h="100vh"
-        style={{ zIndex: 1000 }}
+        style={{ zIndex: "var(--mantine-z-index-popover)" }}
         onClick={onClose}
         onContextMenu={(e) => {
           e.preventDefault();
diff --git a/packages/widgets/src/downloads/helpers.spec.ts b/packages/widgets/src/downloads/helpers.spec.ts
new file mode 100644
index 000000000..a7648146e
--- /dev/null
+++ b/packages/widgets/src/downloads/helpers.spec.ts
@@ -0,0 +1,19 @@
+import { describe, expect, test } from "vitest";
+
+import { filterDownloadItemsByStatus, getAvailableDownloadStates } from "./helpers";
+
+describe("downloads filters", () => {
+  const eligibleItems = [{ state: "downloading" as const }, { state: "seeding" as const }];
+
+  test("keeps all eligible statuses available after applying a status filter", () => {
+    expect(filterDownloadItemsByStatus(eligibleItems, ["downloading"])).toEqual([{ state: "downloading" }]);
+    expect(getAvailableDownloadStates(eligibleItems)).toEqual(["downloading", "seeding"]);
+  });
+
+  test("deduplicates available statuses", () => {
+    expect(getAvailableDownloadStates([...eligibleItems, { state: "downloading" }])).toEqual([
+      "downloading",
+      "seeding",
+    ]);
+  });
+});
diff --git a/packages/widgets/src/downloads/helpers.ts b/packages/widgets/src/downloads/helpers.ts
new file mode 100644
index 000000000..e37b24643
--- /dev/null
+++ b/packages/widgets/src/downloads/helpers.ts
@@ -0,0 +1,15 @@
+import type { ExtendedDownloadClientItem } from "@homarr/integrations";
+
+type DownloadState = ExtendedDownloadClientItem["state"];
+
+export function filterDownloadItemsByStatus<T extends { state: DownloadState }>(
+  items: readonly T[],
+  statusFilter: readonly string[],
+): T[] {
+  if (statusFilter.length === 0) return [...items];
+  return items.filter(({ state }) => statusFilter.includes(state));
+}
+
+export function getAvailableDownloadStates(items: readonly { state: DownloadState }[]): DownloadState[] {
+  return [...new Set(items.map(({ state }) => state))];
+}
diff --git a/packages/widgets/src/downloads/index.ts b/packages/widgets/src/downloads/index.ts
index cc8f9a5b0..60064de9a 100644
--- a/packages/widgets/src/downloads/index.ts
+++ b/packages/widgets/src/downloads/index.ts
@@ -4,7 +4,7 @@ import { z } from "zod/v4";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import type { ExtendedDownloadClientItem } from "@homarr/integrations";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 const columnsList = [
@@ -42,6 +42,12 @@ const sortColumns = [
 
 export const { definition, componentLoader } = createWidgetDefinition("downloads", {
   icon: IconDownload,
+  queryKey: [["widget", "downloads", "getJobsAndStatuses"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      integrationIds: scope.integrationIds,
+      limitPerIntegration: scope.options.limitPerIntegration,
+    }),
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from(
diff --git a/packages/widgets/src/downloads/prefetch.ts b/packages/widgets/src/downloads/prefetch.ts
deleted file mode 100644
index 4eb073c43..000000000
--- a/packages/widgets/src/downloads/prefetch.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { api, trpc } from "@homarr/api/server";
-import { createLogger } from "@homarr/core/infrastructure/logs";
-
-import type { Prefetch } from "../definition";
-
-const logger = createLogger({ module: "downloadsWidgetPrefetch" });
-
-const prefetchAllAsync: Prefetch<"downloads"> = async (queryClient, items) => {
-  await Promise.all(
-    items.map(async (item) => {
-      if (item.integrationIds.length === 0) return;
-
-      const input = {
-        integrationIds: item.integrationIds,
-        limitPerIntegration: Number(item.options.limitPerIntegration) || 50,
-      };
-
-      try {
-        const data = await api.widget.downloads.getJobsAndStatuses(input);
-        queryClient.setQueryData(trpc.widget.downloads.getJobsAndStatuses.queryKey(input), data);
-        logger.info("Prefetched downloads widget data", { integrations: item.integrationIds.length });
-      } catch (error) {
-        logger.warn("Failed to prefetch downloads widget data", { error });
-      }
-    }),
-  );
-};
-
-export default prefetchAllAsync;
diff --git a/packages/widgets/src/errors/base-component.tsx b/packages/widgets/src/errors/base-component.tsx
index 8d656f0c4..69392923d 100644
--- a/packages/widgets/src/errors/base-component.tsx
+++ b/packages/widgets/src/errors/base-component.tsx
@@ -17,7 +17,7 @@ export const BaseWidgetError = (props: BaseWidgetErrorProps) => {
   const t = useI18n();
 
   return (
-    <Stack h="100%" align="center" justify="center" gap="md">
+    <Stack h="100%" align="center" justify="center" gap="md" data-homarr-widget-error>
       <props.icon size={40} />
       <Stack gap={0}>
         <Text ta="center">{translateIfNecessary(t, props.message)}</Text>
diff --git a/packages/widgets/src/errors/component.spec.ts b/packages/widgets/src/errors/component.spec.ts
new file mode 100644
index 000000000..c1bc146c4
--- /dev/null
+++ b/packages/widgets/src/errors/component.spec.ts
@@ -0,0 +1,60 @@
+// @vitest-environment jsdom
+
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+import { WidgetError } from "./component";
+
+vi.mock("@homarr/translation/client", () => ({
+  useI18n: () => (key: string) => key,
+}));
+
+const matchMedia = (query: string) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: () => undefined,
+  removeListener: () => undefined,
+  addEventListener: () => undefined,
+  removeEventListener: () => undefined,
+  dispatchEvent: () => false,
+});
+
+describe("WidgetError", () => {
+  let host: HTMLDivElement | undefined;
+  let root: ReturnType<typeof createRoot> | undefined;
+
+  afterEach(async () => {
+    if (root) await act(async () => root?.unmount());
+    host?.remove();
+    vi.unstubAllGlobals();
+  });
+
+  test("never renders an unmapped backend error", async () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal("matchMedia", matchMedia);
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+    const secret = "http://admin:password@private.local/path?token=secret";
+
+    await act(async () =>
+      root?.render(
+        createElement(
+          MantineProvider,
+          null,
+          createElement(WidgetError, {
+            error: new Error(secret),
+            resetErrorBoundary: vi.fn(),
+          }),
+        ),
+      ),
+    );
+
+    expect(host.textContent).toContain("common.error");
+    expect(host.textContent).not.toContain(secret);
+    expect(host.textContent).not.toMatch(/password|private\.local|token=secret/);
+  });
+});
diff --git a/packages/widgets/src/errors/component.tsx b/packages/widgets/src/errors/component.tsx
index 57f77d62a..56cfbbc8c 100644
--- a/packages/widgets/src/errors/component.tsx
+++ b/packages/widgets/src/errors/component.tsx
@@ -1,30 +1,24 @@
-import { useMemo } from "react";
 import { IconExclamationCircle, IconShield } from "@tabler/icons-react";
 import { TRPCClientError } from "@trpc/client";
 import type { DefaultErrorData } from "@trpc/server/unstable-core-do-not-import";
 
-import type { WidgetKind } from "@homarr/definitions";
-
-import type { WidgetDefinition } from "..";
-import { widgetImports } from "..";
+import type { WidgetDefinition } from "../definition";
 import { ErrorBoundaryError } from "./base";
 import type { BaseWidgetErrorProps } from "./base-component";
 import { BaseWidgetError } from "./base-component";
 
 interface WidgetErrorProps {
-  kind: WidgetKind;
+  definition?: WidgetDefinition;
   error: unknown;
   resetErrorBoundary: () => void;
 }
 
-export const WidgetError = ({ error, resetErrorBoundary, kind }: WidgetErrorProps) => {
-  const currentDefinition = useMemo(() => widgetImports[kind].definition, [kind]);
-
+export const WidgetError = ({ error, resetErrorBoundary, definition }: WidgetErrorProps) => {
   if (error instanceof ErrorBoundaryError) {
     return <BaseWidgetError {...error.getErrorBoundaryData()} onRetry={resetErrorBoundary} />;
   }
 
-  const widgetTrpcErrorData = handleWidgetTrpcError(error, currentDefinition);
+  const widgetTrpcErrorData = definition ? handleWidgetTrpcError(error, definition) : null;
   if (widgetTrpcErrorData) {
     return <BaseWidgetError {...widgetTrpcErrorData} onRetry={resetErrorBoundary} />;
   }
@@ -37,7 +31,8 @@ export const WidgetError = ({ error, resetErrorBoundary, kind }: WidgetErrorProp
   return (
     <BaseWidgetError
       icon={IconExclamationCircle}
-      message={(error as { toString: () => string }).toString()}
+      message={(t) => t("common.error")}
+      showLogsLink
       onRetry={resetErrorBoundary}
     />
   );
@@ -72,7 +67,7 @@ const handleCommonTrpcError = (error: unknown): Omit<BaseWidgetErrorProps, "onRe
   if (errorData.code === "UNAUTHORIZED" || errorData.code === "FORBIDDEN") {
     return {
       icon: IconShield,
-      message: "You don't have permission to access this widget",
+      message: (t) => t("integration.testConnection.error.certificate.alert.permission.title"),
       showLogsLink: false,
     };
   }
diff --git a/packages/widgets/src/filter-storage-volumes.spec.ts b/packages/widgets/src/filter-storage-volumes.spec.ts
index 51d84169a..25a459c06 100644
--- a/packages/widgets/src/filter-storage-volumes.spec.ts
+++ b/packages/widgets/src/filter-storage-volumes.spec.ts
@@ -1,10 +1,6 @@
 import { describe, expect, test } from "vitest";
 
-import {
-  filterStorageVolumes,
-  normalizeStorageDeviceName,
-  toScopedStorageVolumeValue,
-} from "./filter-storage-volumes";
+import { filterStorageVolumes, normalizeStorageDeviceName, toScopedStorageVolumeValue } from "./filter-storage-volumes";
 import { matchFileSystemAndSmart } from "./health-monitoring/system-health";
 
 describe("normalizeStorageDeviceName", () => {
diff --git a/packages/widgets/src/filter-storage-volumes.ts b/packages/widgets/src/filter-storage-volumes.ts
index 5e88584be..9c406c65e 100644
--- a/packages/widgets/src/filter-storage-volumes.ts
+++ b/packages/widgets/src/filter-storage-volumes.ts
@@ -35,11 +35,7 @@ const storageDeviceNamesMatch = (leftDeviceName: string, rightDeviceName: string
   );
 };
 
-const matchesVisibleStorageVolume = (
-  visibleVolume: string,
-  integrationId: string,
-  deviceName: string,
-): boolean => {
+const matchesVisibleStorageVolume = (visibleVolume: string, integrationId: string, deviceName: string): boolean => {
   const separatorIndex = visibleVolume.indexOf(":");
   if (separatorIndex === -1) {
     return storageDeviceNamesMatch(visibleVolume, deviceName);
diff --git a/packages/widgets/src/firewall/bandwidth.spec.ts b/packages/widgets/src/firewall/bandwidth.spec.ts
new file mode 100644
index 000000000..9b9250d98
--- /dev/null
+++ b/packages/widgets/src/firewall/bandwidth.spec.ts
@@ -0,0 +1,40 @@
+import { describe, expect, test } from "vitest";
+
+import { calculateBandwidth, formatBitsPerSec } from "./bandwidth";
+
+describe("calculateBandwidth", () => {
+  test("sorts samples before calculating a rate", () => {
+    const result = calculateBandwidth([
+      { timestamp: new Date("2026-01-01T00:00:00Z"), data: [{ name: "wan", receive: 100, transmit: 200 }] },
+      { timestamp: new Date("2026-01-01T00:00:10Z"), data: [{ name: "wan", receive: 300, transmit: 500 }] },
+    ]);
+
+    expect(result.data).toEqual([{ name: "wan", receive: 160, transmit: 240 }]);
+  });
+
+  test("treats counter resets as zero instead of negative traffic", () => {
+    const result = calculateBandwidth([
+      { timestamp: new Date("2026-01-01T00:00:10Z"), data: [{ name: "wan", receive: 10, transmit: 10 }] },
+      { timestamp: new Date("2026-01-01T00:00:00Z"), data: [{ name: "wan", receive: 100, transmit: 100 }] },
+    ]);
+
+    expect(result.data).toEqual([{ name: "wan", receive: 0, transmit: 0 }]);
+  });
+
+  test("rejects duplicate timestamps", () => {
+    const timestamp = new Date("2026-01-01T00:00:00Z");
+    expect(
+      calculateBandwidth([
+        { timestamp, data: [{ name: "wan", receive: 100, transmit: 100 }] },
+        { timestamp, data: [{ name: "wan", receive: 50, transmit: 50 }] },
+      ]).data,
+    ).toEqual([]);
+  });
+});
+
+describe("formatBitsPerSec", () => {
+  test("handles invalid and negative rates", () => {
+    expect(formatBitsPerSec(Number.NaN, 2)).toBe("0 b/s");
+    expect(formatBitsPerSec(-1, 2)).toBe("0 b/s");
+  });
+});
diff --git a/packages/widgets/src/firewall/bandwidth.ts b/packages/widgets/src/firewall/bandwidth.ts
new file mode 100644
index 000000000..79744660c
--- /dev/null
+++ b/packages/widgets/src/firewall/bandwidth.ts
@@ -0,0 +1,39 @@
+import type { FirewallInterface, FirewallInterfacesSummary } from "@homarr/integrations";
+
+export function formatBitsPerSec(bitsPerSecond: number, decimals: number): string {
+  if (!Number.isFinite(bitsPerSecond) || bitsPerSecond <= 0) return "0 b/s";
+
+  const unitSize = 1024;
+  const sizes = ["b/s", "kb/s", "Mb/s", "Gb/s", "Tb/s", "Pb/s", "Eb/s", "Zb/s", "Yb/s"];
+  const unitIndex = Math.min(Math.floor(Math.log(bitsPerSecond) / Math.log(unitSize)), sizes.length - 1);
+
+  return `${parseFloat((bitsPerSecond / Math.pow(unitSize, unitIndex)).toFixed(decimals))} ${sizes[unitIndex]}`;
+}
+
+export function calculateBandwidth(data: FirewallInterfacesSummary[]): { data: FirewallInterface[] } {
+  const samples = data
+    .filter((sample) => Number.isFinite(new Date(sample.timestamp).getTime()))
+    .toSorted((left, right) => new Date(right.timestamp).getTime() - new Date(left.timestamp).getTime());
+  const latest = samples[0];
+  const previous = samples[1];
+
+  if (!latest || !previous) return { data: [] };
+
+  const timeDiffInSeconds = (new Date(latest.timestamp).getTime() - new Date(previous.timestamp).getTime()) / 1000;
+  if (timeDiffInSeconds <= 0) return { data: [] };
+
+  return {
+    data: latest.data.flatMap((latestInterface) => {
+      const previousInterface = previous.data.find((item) => item.name === latestInterface.name);
+      if (!previousInterface) return [];
+
+      return [
+        {
+          name: latestInterface.name,
+          receive: Math.max(0, (8 * (latestInterface.receive - previousInterface.receive)) / timeDiffInSeconds),
+          transmit: Math.max(0, (8 * (latestInterface.transmit - previousInterface.transmit)) / timeDiffInSeconds),
+        },
+      ];
+    }),
+  };
+}
diff --git a/packages/widgets/src/firewall/component.tsx b/packages/widgets/src/firewall/component.tsx
index 523eadd8d..62a553c4f 100644
--- a/packages/widgets/src/firewall/component.tsx
+++ b/packages/widgets/src/firewall/component.tsx
@@ -1,241 +1,445 @@
 "use client";
 
 import { useCallback, useState } from "react";
-import { Accordion, Box, Center, Flex, Group, RingProgress, ScrollArea, Text } from "@mantine/core";
+import {
+  Accordion,
+  Badge,
+  Center,
+  Flex,
+  Group,
+  Paper,
+  RingProgress,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  Tooltip,
+} from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 import { IconArrowBarDown, IconArrowBarUp, IconBrain, IconCpu, IconTopologyBus } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import type { FirewallInterface, FirewallInterfacesSummary } from "@homarr/integrations";
+import type { FirewallInterfacesSummary } from "@homarr/integrations";
+import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { calculateBandwidth, formatBitsPerSec } from "./bandwidth";
 import { FirewallMenu } from "./firewall-menu";
-import { FirewallVersion } from "./firewall-version";
+import { FirewallVersion, formatVersion } from "./firewall-version";
 
 export interface Firewall {
   label: string;
   value: string;
 }
 
-export default function FirewallWidget({ integrationIds, width, itemId }: WidgetComponentProps<"firewall">) {
-  const [selectedFirewall, setSelectedFirewall] = useState<string>("");
+interface FirewallQueryState {
+  isPending: boolean;
+  isFetching: boolean;
+  isError: boolean;
+  data?: readonly { error?: string; integration?: { id: string } }[];
+}
+
+export const hasTotalFirewallFailure = (queries: readonly FirewallQueryState[]) =>
+  queries.every((query) => !query.isPending && !query.isFetching) &&
+  queries.every(
+    (query) =>
+      (query.isError && query.data === undefined) ||
+      (query.data !== undefined && query.data.length > 0 && query.data.every(({ error }) => error)),
+  );
+
+export const hasFirewallPartialFailure = (firewallId: string, queries: readonly FirewallQueryState[]) =>
+  queries.some(
+    (query) =>
+      query.isError ||
+      query.data?.some(({ error, integration }) => integration?.id === firewallId && Boolean(error)) === true,
+  );
+
+export default function FirewallWidget({
+  integrationIds,
+  width,
+  height,
+  itemId,
+  displayMode,
+}: WidgetComponentProps<"firewall">) {
+  const [selectedFirewall, setSelectedFirewall] = useState("");
+  const isAdvanced = displayMode === "advanced";
+  const isTiny = !isAdvanced && (width < 256 || height < 180);
+  const ringSize = isAdvanced ? 100 : height < 120 ? 44 : isTiny ? 64 : 100;
+  const showInterfaces = isAdvanced || (!isTiny && height >= 120);
+  const t = useI18n();
 
   const handleSelect = useCallback((value: string | null) => {
-    if (value !== null) {
-      setSelectedFirewall(value);
-    } else {
-      setSelectedFirewall("default_value");
-    }
+    setSelectedFirewall(value ?? "");
   }, []);
 
-  const { data: firewallsCpuData = [] } = clientApi.widget.firewall.getFirewallCpuStatus.useQuery({ integrationIds });
-  const { data: firewallsMemoryData = [] } = clientApi.widget.firewall.getFirewallMemoryStatus.useQuery({
+  const cpuQuery = clientApi.widget.firewall.getFirewallCpuStatus.useQuery({ integrationIds });
+  const memoryQuery = clientApi.widget.firewall.getFirewallMemoryStatus.useQuery({
     integrationIds,
   });
-  const { data: firewallsVersionData = [] } = clientApi.widget.firewall.getFirewallVersionStatus.useQuery({
+  const versionQuery = clientApi.widget.firewall.getFirewallVersionStatus.useQuery({
     integrationIds,
   });
-  const { data: firewallsInterfacesData = [] } = clientApi.widget.firewall.getFirewallInterfacesStatus.useQuery({
+  const interfacesQuery = clientApi.widget.firewall.getFirewallInterfacesStatus.useQuery({
     integrationIds,
   });
-
-  const initialSelectedFirewall = firewallsVersionData[0] ? firewallsVersionData[0].integration.id : "undefined";
-  const isTiny = width < 256;
+  const firewallsCpuData = cpuQuery.data ?? [];
+  const firewallsMemoryData = memoryQuery.data ?? [];
+  const firewallsVersionData = versionQuery.data ?? [];
+  const firewallsInterfacesData = interfacesQuery.data ?? [];
+  const queries = [cpuQuery, memoryQuery, versionQuery, interfacesQuery];
+  const hasTotalFailure = hasTotalFirewallFailure(queries);
 
   const [accordionValue, setAccordionValue] = useLocalStorage<string | null>({
     key: `homarr-${itemId}-firewall`,
     defaultValue: "interfaces",
   });
 
-  const dropdownItems = firewallsVersionData.map((firewall) => ({
-    label: firewall.integration.name,
-    value: firewall.integration.id,
+  if (hasTotalFailure) {
+    throw new Error(t("widget.firewall.error.internalServerError"));
+  }
+
+  const firewallMetadata = new Map(
+    [...firewallsVersionData, ...firewallsCpuData, ...firewallsMemoryData, ...firewallsInterfacesData].map(
+      ({ integration }) => [integration.id, integration] as const,
+    ),
+  );
+  const firewallIds = [...firewallMetadata.keys()];
+  const initialSelectedFirewall = firewallIds[0] ?? "";
+  const activeFirewall = firewallMetadata.has(selectedFirewall) ? selectedFirewall : initialSelectedFirewall;
+  const displayedFirewallIds = isAdvanced ? firewallIds : activeFirewall ? [activeFirewall] : [];
+  const firewallHasError = (firewallId: string) => hasFirewallPartialFailure(firewallId, queries);
+  const dropdownItems = firewallIds.map((firewallId) => ({
+    label: firewallMetadata.get(firewallId)?.name ?? firewallId,
+    value: firewallId,
   }));
 
-  const t = useI18n();
+  if (firewallIds.length === 0) {
+    const isLoading = queries.some((query) => query.isPending || query.isFetching);
+    return (
+      <Center h="100%" p="sm">
+        <Text size="sm" c="dimmed" ta="center">
+          {isLoading ? t("common.action.loading") : t("widget.firewall.empty.noInterfaces")}
+        </Text>
+      </Center>
+    );
+  }
 
   return (
     <ScrollArea h="100%">
-      <Group justify="space-between" w="100%" style={{ padding: "8px" }}>
-        <FirewallMenu
-          onChange={handleSelect}
-          selectedFirewall={selectedFirewall || initialSelectedFirewall}
-          dropdownItems={dropdownItems}
-          isTiny={isTiny}
-        />
-        <FirewallVersion
-          firewallsVersionData={firewallsVersionData}
-          selectedFirewall={selectedFirewall || initialSelectedFirewall}
-          isTiny={isTiny}
-        />
-      </Group>
-      <Flex justify="center" align="center" wrap="wrap">
-        {/* Render CPU and Memory data */}
-        {firewallsCpuData
-          .filter(({ integration }) => integration.id === (selectedFirewall || initialSelectedFirewall))
-          .map(({ summary, integration }) => (
-            <RingProgress
-              key={`${integration.name}-cpu`}
-              roundCaps
-              size={isTiny ? 50 : 100}
-              thickness={isTiny ? 4 : 8}
-              label={
-                <Center style={{ flexDirection: "column" }}>
-                  <Text size={isTiny ? "8px" : "xs"}>{`${summary.total.toFixed(2)}%`}</Text>
-                  <IconCpu size={isTiny ? 8 : 16} />
-                </Center>
-              }
-              sections={[
-                {
-                  value: Number(summary.total.toFixed(1)),
-                  color: summary.total > 50 ? (summary.total < 75 ? "yellow" : "red") : "green",
-                },
-              ]}
+      <Stack gap="xs" p={isAdvanced ? "xs" : 0}>
+        {!isAdvanced && (
+          <Group justify="space-between" w="100%" p="xs">
+            <FirewallMenu
+              onChange={handleSelect}
+              selectedFirewall={activeFirewall}
+              dropdownItems={dropdownItems}
+              isTiny={isTiny}
             />
-          ))}
-        {firewallsMemoryData
-          .filter(({ integration }) => integration.id === (selectedFirewall || initialSelectedFirewall))
-          .map(({ summary, integration }) => (
-            <RingProgress
-              key={`${integration.name}-memory`}
-              roundCaps
-              size={isTiny ? 50 : 100}
-              thickness={isTiny ? 4 : 8}
-              label={
-                <Center style={{ flexDirection: "column" }}>
-                  <Text size={isTiny ? "8px" : "xs"}>{`${summary.percent.toFixed(1)}%`}</Text>
-                  <IconBrain size={isTiny ? 8 : 16} />
-                </Center>
-              }
-              sections={[
-                {
-                  value: Number(summary.percent.toFixed(1)),
-                  color: summary.percent > 50 ? (summary.percent < 75 ? "yellow" : "red") : "green",
-                },
-              ]}
-            />
-          ))}
-      </Flex>
-      {firewallsInterfacesData
-        .filter(({ integration }) => integration.id === (selectedFirewall || initialSelectedFirewall))
-        .map(({ summary }) => (
-          <Accordion key="interfaces" value={accordionValue} onChange={setAccordionValue}>
-            <Accordion.Item value="interfaces">
-              <Accordion.Control icon={isTiny ? null : <IconTopologyBus size={16} />}>
-                <Text size={isTiny ? "8px" : "xs"}> {t("widget.firewall.widget.interfaces.title")} </Text>
-              </Accordion.Control>
-              <Accordion.Panel>
-                <Flex direction="column" key="interfaces">
-                  {Array.isArray(summary) && summary.every((item) => Array.isArray(item.data)) ? (
-                    calculateBandwidth(summary).data.map(({ name, receive, transmit }) => (
-                      <Flex
-                        key={name}
-                        direction={isTiny ? "column" : "row"}
-                        style={{
-                          width: "100%",
-                          padding: isTiny ? "2px" : "0px",
-                        }}
-                      >
-                        <Flex w={isTiny ? "100%" : "33%"} style={{ justifyContent: "flex-start" }}>
-                          <Text
-                            size={isTiny ? "8px" : "xs"}
-                            color="lightblue"
-                            style={{
-                              maxWidth: "100px",
-                              overflow: "hidden",
-                              textOverflow: "ellipsis",
-                              whiteSpace: "nowrap",
-                              textAlign: "left",
-                            }}
-                          >
-                            {name}
-                          </Text>
-                        </Flex>
-                        <Flex
-                          align="center"
-                          gap="4"
-                          w={isTiny ? "100%" : "33%"}
-                          style={{ justifyContent: "flex-start" }}
-                        >
-                          <IconArrowBarUp size={isTiny ? "8" : "12"} color="lightgreen" />
-                          <Text size={isTiny ? "8px" : "xs"} c="lightgreen" style={{ textAlign: "left" }}>
-                            {formatBitsPerSec(transmit, 2)}
-                          </Text>
-                        </Flex>
-                        <Flex
-                          align="center"
-                          gap="4"
-                          w={isTiny ? "100%" : "33%"}
-                          style={{ justifyContent: "flex-start" }}
-                        >
-                          <IconArrowBarDown size={isTiny ? "8" : "12"} color="yellow" />
-                          <Text size={isTiny ? "8px" : "xs"} c="yellow" style={{ textAlign: "left" }}>
-                            {formatBitsPerSec(receive, 2)}
-                          </Text>
-                        </Flex>
-                      </Flex>
-                    ))
-                  ) : (
-                    <Box>No data available</Box>
-                  )}
-                </Flex>
-              </Accordion.Panel>
-            </Accordion.Item>
-          </Accordion>
-        ))}
+            <Group gap={4} wrap="nowrap">
+              {activeFirewall && firewallHasError(activeFirewall) && (
+                <Tooltip label={t("widget.firewall.error.internalServerError")}>
+                  <Badge color="red" variant="light" size="xs">
+                    {t("common.error")}
+                  </Badge>
+                </Tooltip>
+              )}
+              <FirewallVersion
+                firewallsVersionData={firewallsVersionData.filter(({ error }) => !error)}
+                selectedFirewall={activeFirewall}
+                isTiny={isTiny}
+              />
+            </Group>
+          </Group>
+        )}
+
+        <SimpleGrid cols={isAdvanced && width >= 720 ? 2 : 1} spacing="xs">
+          {displayedFirewallIds.map((firewallId) => {
+            const cpu = firewallsCpuData.find(({ integration }) => integration.id === firewallId);
+            const memory = firewallsMemoryData.find(({ integration }) => integration.id === firewallId);
+            const version = firewallsVersionData.find(({ integration }) => integration.id === firewallId);
+            const interfaces = firewallsInterfacesData.find(({ integration }) => integration.id === firewallId);
+            const hasError = firewallHasError(firewallId);
+            const metadata = firewallMetadata.get(firewallId);
+
+            return (
+              <FirewallPanel
+                key={firewallId}
+                name={metadata?.name ?? firewallId}
+                kind={metadata?.kind}
+                version={version?.error ? undefined : version?.summary.version}
+                cpu={cpu?.error ? undefined : cpu?.summary.total}
+                memory={memory?.error ? undefined : memory?.summary.percent}
+                interfaces={interfaces?.summary}
+                interfacesLoaded={interfaces !== undefined}
+                interfacesError={interfacesQuery.isError || Boolean(interfaces?.error)}
+                hasError={hasError}
+                isAdvanced={isAdvanced}
+                ringSize={ringSize}
+                showInterfaces={showInterfaces}
+                accordionValue={accordionValue}
+                setAccordionValue={setAccordionValue}
+                errorLabel={t("widget.firewall.error.internalServerError")}
+                noDataLabel={t("widget.firewall.empty.noInterfaces")}
+                loadingLabel={t("common.action.loading")}
+                errorBadgeLabel={t("common.error")}
+                interfacesLabel={t("widget.firewall.widget.interfaces.title")}
+                t={t}
+              />
+            );
+          })}
+        </SimpleGrid>
+      </Stack>
     </ScrollArea>
   );
 }
 
-export function formatBitsPerSec(bytes: number, decimals: number): string {
-  if (bytes === 0) return "0 b/s";
-
-  const kilobyte = 1024;
-  const sizes = ["b/s", "kb/s", "Mb/s", "Gb/s", "Tb/s", "Pb/s", "Eb/s", "Zb/s", "Yb/s"];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(kilobyte));
-
-  return `${parseFloat((bytes / Math.pow(kilobyte, i)).toFixed(decimals))} ${sizes[i]}`;
+interface FirewallPanelProps {
+  name: string;
+  kind?: string;
+  version?: string;
+  cpu?: number;
+  memory?: number;
+  interfaces?: FirewallInterfacesSummary[];
+  interfacesLoaded: boolean;
+  interfacesError: boolean;
+  hasError: boolean;
+  isAdvanced: boolean;
+  ringSize: number;
+  showInterfaces: boolean;
+  accordionValue: string | null;
+  setAccordionValue: (value: string | null) => void;
+  errorLabel: string;
+  noDataLabel: string;
+  loadingLabel: string;
+  errorBadgeLabel: string;
+  interfacesLabel: string;
+  t: TranslationFunction;
 }
 
-export function calculateBandwidth(data: FirewallInterfacesSummary[]): { data: FirewallInterface[] } {
-  const result = {
-    data: [] as FirewallInterface[],
-    timestamp: new Date().toISOString(),
-  };
+const FirewallPanel = ({
+  name,
+  kind,
+  version,
+  cpu,
+  memory,
+  interfaces,
+  interfacesLoaded,
+  interfacesError,
+  hasError,
+  isAdvanced,
+  ringSize,
+  showInterfaces,
+  accordionValue,
+  setAccordionValue,
+  errorLabel,
+  noDataLabel,
+  loadingLabel,
+  errorBadgeLabel,
+  interfacesLabel,
+  t,
+}: FirewallPanelProps) => (
+  <Paper withBorder={isAdvanced} radius="sm" p={isAdvanced ? "xs" : 0}>
+    <Stack gap="xs">
+      {isAdvanced && (
+        <Group justify="space-between" wrap="nowrap">
+          <Stack gap={0} miw={0}>
+            <Text size="sm" fw={600} truncate="end">
+              {name}
+            </Text>
+            {kind && (
+              <Text size="xs" c="dimmed">
+                {kind}
+              </Text>
+            )}
+          </Stack>
+          <Group gap={4} wrap="nowrap">
+            {hasError && (
+              <Tooltip label={errorLabel}>
+                <Badge color="red" variant="light" size="xs">
+                  {t("common.error")}
+                </Badge>
+              </Tooltip>
+            )}
+            <Badge variant="outline" color="gray" size="xs">
+              {formatVersion(version ?? "", t("widget.firewall.versionUnknown"))}
+            </Badge>
+          </Group>
+        </Group>
+      )}
 
-  if (data.length > 1) {
-    const firstData = data[0];
-    const secondData = data[1];
+      <Flex justify="center" align="center" wrap="wrap">
+        {cpu !== undefined && (
+          <MetricRing value={cpu} icon={IconCpu} size={ringSize} label={t("widget.firewall.widget.cpu")} t={t} />
+        )}
+        {memory !== undefined && (
+          <MetricRing
+            value={memory}
+            icon={IconBrain}
+            size={ringSize}
+            label={t("widget.firewall.widget.memory")}
+            t={t}
+          />
+        )}
+      </Flex>
 
-    if (firstData && secondData) {
-      const time1 = new Date(firstData.timestamp);
-      const time2 = new Date(secondData.timestamp);
-      const timeDiffInSeconds = (time1.getTime() - time2.getTime()) / 1000;
+      {showInterfaces && (
+        <InterfacesPanel
+          summary={interfaces ?? []}
+          hasResult={interfacesLoaded}
+          hasError={interfacesError}
+          isAdvanced={isAdvanced}
+          accordionValue={accordionValue}
+          setAccordionValue={setAccordionValue}
+          errorLabel={errorLabel}
+          errorBadgeLabel={errorBadgeLabel}
+          noDataLabel={noDataLabel}
+          loadingLabel={loadingLabel}
+          label={interfacesLabel}
+        />
+      )}
+    </Stack>
+  </Paper>
+);
 
-      firstData.data.forEach((iface) => {
-        const ifaceName = iface.name;
-        const recv1 = iface.receive;
-        const trans1 = iface.transmit;
-
-        const iface2 = secondData.data.find((i) => i.name === ifaceName);
-
-        if (iface2) {
-          const recv2 = iface2.receive;
-          const trans2 = iface2.transmit;
-          const recvDiff = recv1 - recv2;
-          const transDiff = trans1 - trans2;
-
-          result.data.push({
-            name: ifaceName,
-            receive: (8 * recvDiff) / timeDiffInSeconds,
-            transmit: (8 * transDiff) / timeDiffInSeconds,
-          });
-        }
-      });
-    }
-  }
-
-  return result;
+interface MetricRingProps {
+  value: number;
+  icon: typeof IconCpu;
+  size: number;
+  label: string;
+  t: TranslationFunction;
 }
+
+const MetricRing = ({ value, icon: Icon, size, label, t }: MetricRingProps) => {
+  const safeValue = Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0));
+  const status = getMetricStatus(safeValue);
+  const statusLabel = t(`widget.firewall.status.${status}`);
+  const showIcon = size >= 64;
+  const showStatus = size >= 96;
+
+  return (
+    <RingProgress
+      aria-label={t("widget.firewall.metricAccessible", {
+        metric: label,
+        value: safeValue.toFixed(1),
+        status: statusLabel,
+      })}
+      roundCaps
+      size={size}
+      thickness={size < 72 ? 4 : 8}
+      label={
+        <Center style={{ flexDirection: "column" }}>
+          <Text size="xs">{safeValue.toFixed(1)}%</Text>
+          {showIcon && <Icon size={size < 96 ? 12 : 16} />}
+          {showStatus && <Text size="xs">{statusLabel}</Text>}
+        </Center>
+      }
+      sections={[
+        {
+          value: safeValue,
+          color: status === "warning" ? "yellow" : status === "critical" ? "red" : "green",
+        },
+      ]}
+    />
+  );
+};
+
+const getMetricStatus = (value: number): "normal" | "warning" | "critical" => {
+  if (value >= 75) return "critical";
+  if (value > 50) return "warning";
+  return "normal";
+};
+
+interface InterfacesPanelProps {
+  summary: FirewallInterfacesSummary[];
+  hasResult: boolean;
+  hasError: boolean;
+  isAdvanced: boolean;
+  accordionValue: string | null;
+  setAccordionValue: (value: string | null) => void;
+  errorLabel: string;
+  errorBadgeLabel: string;
+  noDataLabel: string;
+  loadingLabel: string;
+  label: string;
+}
+
+const InterfacesPanel = ({
+  summary,
+  hasResult,
+  hasError,
+  isAdvanced,
+  accordionValue,
+  setAccordionValue,
+  errorLabel,
+  errorBadgeLabel,
+  noDataLabel,
+  loadingLabel,
+  label,
+}: InterfacesPanelProps) => {
+  const bandwidth = calculateBandwidth(summary).data;
+
+  return (
+    <Accordion
+      value={isAdvanced ? "interfaces" : accordionValue}
+      onChange={isAdvanced ? undefined : setAccordionValue}
+      variant={isAdvanced ? "contained" : "default"}
+    >
+      <Accordion.Item value="interfaces">
+        <Accordion.Control icon={<IconTopologyBus size={16} />}>
+          <Group justify="space-between" wrap="nowrap" gap="xs">
+            <Text size="xs">{label}</Text>
+            {hasError && (
+              <Badge color="red" variant="light" size="xs">
+                {errorBadgeLabel}
+              </Badge>
+            )}
+          </Group>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <Stack gap={4}>
+            {bandwidth.map(({ name, receive, transmit }) => (
+              <Group key={name} gap="xs" wrap="nowrap" justify="space-between">
+                <Text
+                  size="xs"
+                  c="light-dark(var(--mantine-color-blue-8), var(--mantine-color-blue-3))"
+                  truncate="end"
+                  style={{ flex: 1 }}
+                >
+                  {name}
+                </Text>
+                <Group gap={4} wrap="nowrap">
+                  <IconArrowBarUp
+                    size={12}
+                    color="light-dark(var(--mantine-color-green-8), var(--mantine-color-green-3))"
+                  />
+                  <Text size="xs" c="light-dark(var(--mantine-color-green-8), var(--mantine-color-green-3))">
+                    {formatBitsPerSec(transmit, 2)}
+                  </Text>
+                </Group>
+                <Group gap={4} wrap="nowrap">
+                  <IconArrowBarDown
+                    size={12}
+                    color="light-dark(var(--mantine-color-yellow-9), var(--mantine-color-yellow-3))"
+                  />
+                  <Text size="xs" c="light-dark(var(--mantine-color-yellow-9), var(--mantine-color-yellow-3))">
+                    {formatBitsPerSec(receive, 2)}
+                  </Text>
+                </Group>
+              </Group>
+            ))}
+            {hasError ? (
+              <Text size="xs" c="red">
+                {errorLabel}
+              </Text>
+            ) : bandwidth.length === 0 ? (
+              <Text size="xs" c="dimmed">
+                {hasResult ? noDataLabel : loadingLabel}
+              </Text>
+            ) : null}
+          </Stack>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
+  );
+};
diff --git a/packages/widgets/src/firewall/failure-state.spec.ts b/packages/widgets/src/firewall/failure-state.spec.ts
new file mode 100644
index 000000000..eb4743ccc
--- /dev/null
+++ b/packages/widgets/src/firewall/failure-state.spec.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+
+import { hasFirewallPartialFailure, hasTotalFirewallFailure } from "./component";
+
+const failedQuery = {
+  isPending: false,
+  isFetching: false,
+  isError: false,
+  data: [{ error: "offline" }],
+};
+
+describe("firewall failure state", () => {
+  it("rejects only after every dimension fails", () => {
+    expect(hasTotalFirewallFailure([failedQuery, failedQuery, failedQuery, failedQuery])).toBe(true);
+    expect(
+      hasTotalFirewallFailure([
+        failedQuery,
+        failedQuery,
+        failedQuery,
+        { ...failedQuery, data: [{ error: undefined }] },
+      ]),
+    ).toBe(false);
+  });
+
+  it("lets an error-only persisted cache recover while it refetches", () => {
+    expect(hasTotalFirewallFailure([failedQuery, failedQuery, { ...failedQuery, isFetching: true }, failedQuery])).toBe(
+      false,
+    );
+  });
+
+  it("preserves stale cached data when a query-wide refetch fails", () => {
+    const staleQuery = {
+      ...failedQuery,
+      isError: true,
+      data: [{ integration: { id: "firewall-1" }, error: undefined }],
+    };
+
+    expect(hasTotalFirewallFailure([staleQuery, failedQuery, failedQuery, failedQuery])).toBe(false);
+  });
+
+  it("surfaces query-wide and integration-specific partial failures", () => {
+    const successfulQuery = {
+      isPending: false,
+      isFetching: false,
+      isError: false,
+      data: [{ integration: { id: "firewall-1" }, error: undefined }],
+    };
+
+    expect(hasFirewallPartialFailure("firewall-1", [successfulQuery])).toBe(false);
+    expect(hasFirewallPartialFailure("firewall-1", [{ ...successfulQuery, isError: true }])).toBe(true);
+    expect(
+      hasFirewallPartialFailure("firewall-1", [
+        { ...successfulQuery, data: [{ integration: { id: "firewall-1" }, error: "offline" }] },
+      ]),
+    ).toBe(true);
+  });
+});
diff --git a/packages/widgets/src/firewall/firewall-menu.tsx b/packages/widgets/src/firewall/firewall-menu.tsx
index e96662dfb..6b7a26239 100644
--- a/packages/widgets/src/firewall/firewall-menu.tsx
+++ b/packages/widgets/src/firewall/firewall-menu.tsx
@@ -10,16 +10,18 @@ interface FirewallMenuProps {
 }
 
 export const FirewallMenu = ({ onChange, isTiny, dropdownItems, selectedFirewall }: FirewallMenuProps) => (
-  <Box>
+  <Box style={{ flex: 1, minWidth: 0 }}>
     <Select
       value={selectedFirewall}
       onChange={onChange}
-      size={isTiny ? "8px" : "xs"}
+      size="xs"
+      w="100%"
       color="lightgray"
       data={dropdownItems}
       styles={{
         input: {
           minHeight: "24px",
+          paddingInline: isTiny ? 6 : undefined,
         },
       }}
     />
diff --git a/packages/widgets/src/firewall/firewall-version.tsx b/packages/widgets/src/firewall/firewall-version.tsx
index 8a85312fb..87ec9f9d8 100644
--- a/packages/widgets/src/firewall/firewall-version.tsx
+++ b/packages/widgets/src/firewall/firewall-version.tsx
@@ -1,6 +1,7 @@
 import { Badge, Box } from "@mantine/core";
 
 import type { FirewallVersionSummary } from "@homarr/integrations";
+import { useI18n } from "@homarr/translation/client";
 
 interface FirewallVersionProps {
   firewallsVersionData: {
@@ -18,24 +19,32 @@ export interface FirewallIntegration {
   updatedAt: Date;
 }
 
-export const FirewallVersion = ({ firewallsVersionData, selectedFirewall, isTiny }: FirewallVersionProps) => (
-  <Box>
-    <Badge autoContrast variant="outline" color="lightgray" size={isTiny ? "8px" : "xs"} style={{ minHeight: "24px" }}>
-      {firewallsVersionData
-        .filter(({ integration }) => integration.id === selectedFirewall)
-        .map(({ summary, integration }) => (
-          <span key={integration.id}>{formatVersion(summary.version)}</span>
-        ))}
-    </Badge>
-  </Box>
-);
+export const FirewallVersion = ({ firewallsVersionData, selectedFirewall, isTiny }: FirewallVersionProps) => {
+  const t = useI18n();
+  const version = firewallsVersionData.find(({ integration }) => integration.id === selectedFirewall)?.summary.version;
 
-function formatVersion(inputString: string): string {
+  return (
+    <Box>
+      <Badge
+        autoContrast
+        variant="outline"
+        color="lightgray"
+        size="xs"
+        style={{ minHeight: "24px", maxWidth: isTiny ? 72 : undefined }}
+        styles={{ label: { overflow: "hidden", textOverflow: "ellipsis" } }}
+      >
+        {formatVersion(version ?? "", t("widget.firewall.versionUnknown"))}
+      </Badge>
+    </Box>
+  );
+};
+
+export function formatVersion(inputString: string, fallback: string): string {
   const regex = /([\d._]+)/;
   const match = regex.exec(inputString);
   if (match?.[1]) {
     return match[1];
   } else {
-    return "Unknown Version";
+    return fallback;
   }
 }
diff --git a/packages/widgets/src/health-monitoring/cluster/accordion-state.spec.ts b/packages/widgets/src/health-monitoring/cluster/accordion-state.spec.ts
new file mode 100644
index 000000000..2004a4b01
--- /dev/null
+++ b/packages/widgets/src/health-monitoring/cluster/accordion-state.spec.ts
@@ -0,0 +1,17 @@
+import { describe, expect, test } from "vitest";
+
+import { getClusterAccordionDefault } from "./accordion-state";
+
+describe("getClusterAccordionDefault", () => {
+  test("opens only the first visible section in compact mode", () => {
+    expect(getClusterAccordionDefault("compact", ["node", "qemu", "storage"])).toEqual(["node"]);
+  });
+
+  test("opens every visible section in advanced mode", () => {
+    expect(getClusterAccordionDefault("advanced", ["node", "qemu", "storage"])).toEqual(["node", "qemu", "storage"]);
+  });
+
+  test("does not invent a section when none are visible", () => {
+    expect(getClusterAccordionDefault("compact", [])).toEqual([]);
+  });
+});
diff --git a/packages/widgets/src/health-monitoring/cluster/accordion-state.ts b/packages/widgets/src/health-monitoring/cluster/accordion-state.ts
new file mode 100644
index 000000000..425e4431b
--- /dev/null
+++ b/packages/widgets/src/health-monitoring/cluster/accordion-state.ts
@@ -0,0 +1,4 @@
+export const getClusterAccordionDefault = (
+  displayMode: "compact" | "advanced" | undefined,
+  visibleSections: readonly string[],
+): string[] => (displayMode === "advanced" ? [...visibleSections] : visibleSections.slice(0, 1));
diff --git a/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx b/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx
index 1ac7922d5..08d053e60 100644
--- a/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx
+++ b/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Accordion, Center, Flex, Group, RingProgress, Stack, Text } from "@mantine/core";
 import { IconBrain, IconCpu, IconCube, IconDatabase, IconDeviceLaptop, IconServer } from "@tabler/icons-react";
 
@@ -6,8 +7,10 @@ import type { Resource } from "@homarr/integrations/types";
 import { useI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
+import { getUsableWidgetQueryData } from "../../common/query-state";
 import type { WidgetComponentProps } from "../../definition";
 import { formatUptime } from "../system-health";
+import { getClusterAccordionDefault } from "./accordion-state";
 import { ResourceAccordionItem } from "./resource-accordion-item";
 import { ResourceTable } from "./resource-table";
 
@@ -33,11 +36,16 @@ export const ClusterHealthMonitoring = ({
   integrationId,
   options,
   width,
+  displayMode,
 }: WidgetComponentProps<"healthMonitoring"> & { integrationId: string }) => {
   const t = useI18n();
-  const { data: healthData } = clientApi.widget.healthMonitoring.getClusterHealthStatus.useQuery({
-    integrationId,
-  });
+  const healthData = getUsableWidgetQueryData(
+    clientApi.widget.healthMonitoring.getClusterHealthStatus.useQuery({ integrationId }),
+  );
+  const accordionScope = `${displayMode}:${options.visibleClusterSections.join(",")}`;
+  const accordionDefault = getClusterAccordionDefault(displayMode, options.visibleClusterSections);
+  const [accordionValues, setAccordionValues] = useState<Record<string, string[]>>({});
+  const accordionValue = accordionValues[accordionScope] ?? accordionDefault;
 
   if (!healthData) return <WidgetEmptyState />;
 
@@ -53,18 +61,16 @@ export const ClusterHealthMonitoring = ({
     (sum, item) => (item.isRunning ? item.cpu.utilization * item.cpu.cores + sum : sum),
     0,
   );
-  const uptime = healthData.nodes.reduce((sum, { uptime }) => (sum > uptime ? sum : uptime), 0);
+  const uptime = healthData.nodes.reduce((sum, { uptime: nodeUptime }) => (sum > nodeUptime ? sum : nodeUptime), 0);
 
   const cpuPercent = maxCpu ? (usedCpu / maxCpu) * 100 : 0;
   const memPercent = maxMem ? (usedMem / maxMem) * 100 : 0;
-  const defaultValue = [options.visibleClusterSections.at(0) ?? "node"];
-
-  const isTiny = width < 256;
+  const isTiny = displayMode !== "advanced" && width < 256;
   return (
-    <Stack h="100%" p="xs" gap={isTiny ? "xs" : "md"}>
-      {options.showUptime && (
+    <Stack h={displayMode === "advanced" ? "auto" : "100%"} p="xs" gap={isTiny ? "xs" : "md"}>
+      {options.showUptime && !isTiny && (
         <Group justify="center" wrap="nowrap">
-          <Text fz={isTiny ? 8 : "xs"} tt="uppercase" fw={700} c="dimmed" ta="center">
+          <Text fz="xs" fw={700} c="dimmed" ta="center">
             {formatUptime(uptime, t)}
           </Text>
         </Group>
@@ -81,7 +87,13 @@ export const ClusterHealthMonitoring = ({
         isTiny={isTiny}
       />
       {options.visibleClusterSections.length >= 1 && (
-        <Accordion variant="contained" chevronPosition="right" multiple defaultValue={defaultValue}>
+        <Accordion
+          variant="contained"
+          chevronPosition="right"
+          multiple
+          value={accordionValue}
+          onChange={(value) => setAccordionValues((current) => ({ ...current, [accordionScope]: value }))}
+        >
           {options.visibleClusterSections.includes("node") && (
             <ResourceAccordionItem
               value="node"
@@ -179,10 +191,12 @@ const SummaryHeader = ({ cpu, memory, isTiny }: SummaryHeaderProps) => {
               sections={[{ value: cpu.value, color: cpu.value > 75 ? "orange" : "green" }]}
             />
             <Stack align="center" justify="center" gap={0}>
-              <Text fw={500} size={isTiny ? "xs" : "sm"}>
-                {t("widget.healthMonitoring.cluster.summary.cpu")}
-              </Text>
-              <Text size={isTiny ? "8px" : "xs"}>{cpu.value.toFixed(1)}%</Text>
+              {!isTiny && (
+                <Text fw={500} size="sm">
+                  {t("widget.healthMonitoring.cluster.summary.cpu")}
+                </Text>
+              )}
+              <Text size="xs">{cpu.value.toFixed(1)}%</Text>
             </Stack>
           </Flex>
         )}
@@ -200,10 +214,12 @@ const SummaryHeader = ({ cpu, memory, isTiny }: SummaryHeaderProps) => {
               sections={[{ value: memory.value, color: memory.value > 75 ? "orange" : "green" }]}
             />
             <Stack align="center" justify="center" gap={0}>
-              <Text size={isTiny ? "xs" : "sm"} fw={500}>
-                {t("widget.healthMonitoring.cluster.summary.memory")}
-              </Text>
-              <Text size={isTiny ? "8px" : "xs"}>{memory.value.toFixed(1)}%</Text>
+              {!isTiny && (
+                <Text size="sm" fw={500}>
+                  {t("widget.healthMonitoring.cluster.summary.memory")}
+                </Text>
+              )}
+              <Text size="xs">{memory.value.toFixed(1)}%</Text>
             </Stack>
           </Flex>
         )}
diff --git a/packages/widgets/src/health-monitoring/cluster/resource-table.tsx b/packages/widgets/src/health-monitoring/cluster/resource-table.tsx
index 2c2b17e0e..18f7a0fa0 100644
--- a/packages/widgets/src/health-monitoring/cluster/resource-table.tsx
+++ b/packages/widgets/src/health-monitoring/cluster/resource-table.tsx
@@ -27,21 +27,21 @@ export const ResourceTable = ({ type, data, isTiny }: ResourceTableProps) => {
   return (
     <Table highlightOnHover>
       <TableThead>
-        <TableTr fz={isTiny ? "8px" : "xs"}>
+        <TableTr fz="xs">
           <TableTh ta="start" p={0}>
             {t("widget.healthMonitoring.cluster.table.header.name")}
           </TableTh>
-          {type !== "storage" ? (
+          {!isTiny && type !== "storage" ? (
             <TableTh ta="start" p={0}>
               {t("widget.healthMonitoring.cluster.table.header.cpu")}
             </TableTh>
           ) : null}
-          {type !== "storage" ? (
+          {!isTiny && type !== "storage" ? (
             <TableTh ta="start" p={0}>
               {t("widget.healthMonitoring.cluster.table.header.memory")}
             </TableTh>
           ) : null}
-          {type === "storage" ? (
+          {!isTiny && type === "storage" ? (
             <TableTh ta="start" p={0}>
               {t("widget.healthMonitoring.cluster.table.header.node")}
             </TableTh>
@@ -59,25 +59,25 @@ export const ResourceTable = ({ type, data, isTiny }: ResourceTableProps) => {
             return (
               <ResourcePopover key={item.id} item={item}>
                 <Popover.Target>
-                  <TableTr fz={isTiny ? "8px" : "xs"}>
+                  <TableTr fz="xs">
                     <TableTd>
                       <Group wrap="nowrap" gap={isTiny ? 8 : "xs"}>
-                        <Indicator size={isTiny ? 4 : 8} color={item.isRunning ? "green" : "yellow"}>
+                        <Indicator size={isTiny ? 6 : 8} color={item.isRunning ? "green" : "yellow"}>
                           {null}
                         </Indicator>
-                        <Text lineClamp={1} fz={isTiny ? "8px" : "xs"}>
+                        <Text lineClamp={1} fz="xs">
                           {item.name}
                         </Text>
                       </Group>
                     </TableTd>
-                    {item.type === "storage" ? (
-                      <td style={{ WebkitLineClamp: "1" }}>{item.node}</td>
+                    {isTiny ? null : item.type === "storage" ? (
+                      <TableTd style={{ WebkitLineClamp: "1" }}>{item.node}</TableTd>
                     ) : (
                       <>
-                        <td style={{ whiteSpace: "nowrap" }}>{(item.cpu.utilization * 100).toFixed(1)}%</td>
-                        <td style={{ whiteSpace: "nowrap" }}>
+                        <TableTd style={{ whiteSpace: "nowrap" }}>{(item.cpu.utilization * 100).toFixed(1)}%</TableTd>
+                        <TableTd style={{ whiteSpace: "nowrap" }}>
                           {(item.memory.total ? (item.memory.used / item.memory.total) * 100 : 0).toFixed(1)}%
-                        </td>
+                        </TableTd>
                       </>
                     )}
                   </TableTr>
diff --git a/packages/widgets/src/health-monitoring/component.tsx b/packages/widgets/src/health-monitoring/component.tsx
index ead4fef92..8aff3c1fa 100644
--- a/packages/widgets/src/health-monitoring/component.tsx
+++ b/packages/widgets/src/health-monitoring/component.tsx
@@ -1,38 +1,66 @@
 "use client";
 
-import { ScrollArea, Tabs } from "@mantine/core";
+import { Box, ScrollArea, SimpleGrid, Stack, Tabs } from "@mantine/core";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 
 import { clientApi } from "@homarr/api/client";
-import type { IntegrationKind } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { ClusterHealthMonitoring } from "./cluster/cluster-health";
+import { partitionHealthMonitoringIntegrations } from "./integration-selection";
 import { SystemHealthMonitoring } from "./system-health";
 
 dayjs.extend(duration);
 
-const isClusterIntegration = (integration: { kind: IntegrationKind }) =>
-  integration.kind === "proxmox" || integration.kind === "mock";
-
 export default function HealthMonitoringWidget(props: WidgetComponentProps<"healthMonitoring">) {
-  const { data: integrations = [] } = clientApi.integration.byIds.useQuery(props.integrationIds);
+  const integrations = getUsableWidgetQueryData(clientApi.integration.byIds.useQuery(props.integrationIds)) ?? [];
   const t = useI18n();
 
-  const clusterIntegrationId = integrations.find(isClusterIntegration)?.id;
+  const { clusterIntegrationIds, systemIntegrationIds } = partitionHealthMonitoringIntegrations(integrations);
 
-  if (!clusterIntegrationId) {
+  if (clusterIntegrationIds.length === 0) {
     return <SystemHealthMonitoring {...props} />;
   }
 
-  const otherIntegrationIds = integrations
-    // We want to have the mock integration also in the system tab, so we use it for both
-    .filter((integration) => integration.kind !== "proxmox")
-    .map((integration) => integration.id);
-  if (otherIntegrationIds.length === 0) {
-    return <ClusterHealthMonitoring {...props} integrationId={clusterIntegrationId} />;
+  const clusters = (
+    <Stack gap="sm">
+      {clusterIntegrationIds.map((integrationId) => (
+        <ClusterHealthMonitoring key={integrationId} {...props} integrationId={integrationId} />
+      ))}
+    </Stack>
+  );
+
+  if (systemIntegrationIds.length === 0) {
+    const onlyClusterIntegrationId = clusterIntegrationIds[0];
+    if (clusterIntegrationIds.length === 1 && onlyClusterIntegrationId) {
+      return <ClusterHealthMonitoring {...props} integrationId={onlyClusterIntegrationId} />;
+    }
+    return <ScrollArea h="100%">{clusters}</ScrollArea>;
+  }
+
+  if (props.displayMode === "advanced") {
+    if (props.width < 900) {
+      return (
+        <ScrollArea h="100%">
+          <Stack gap="sm" p="xs">
+            <SystemHealthMonitoring {...props} integrationIds={systemIntegrationIds} withScrollArea={false} />
+            {clusters}
+          </Stack>
+        </ScrollArea>
+      );
+    }
+
+    return (
+      <SimpleGrid cols={2} spacing="sm" p="xs" h="100%" style={{ gridTemplateRows: "minmax(0, 1fr)" }}>
+        <Box style={{ minHeight: 0, overflow: "hidden" }}>
+          <SystemHealthMonitoring {...props} integrationIds={systemIntegrationIds} />
+        </Box>
+        <ScrollArea h="100%">{clusters}</ScrollArea>
+      </SimpleGrid>
+    );
   }
 
   return (
@@ -47,11 +75,9 @@ export default function HealthMonitoringWidget(props: WidgetComponentProps<"heal
           </Tabs.Tab>
         </Tabs.List>
         <Tabs.Panel value="system">
-          <SystemHealthMonitoring {...props} integrationIds={otherIntegrationIds} />
-        </Tabs.Panel>
-        <Tabs.Panel value="cluster">
-          <ClusterHealthMonitoring integrationId={clusterIntegrationId} {...props} />
+          <SystemHealthMonitoring {...props} integrationIds={systemIntegrationIds} />
         </Tabs.Panel>
+        <Tabs.Panel value="cluster">{clusters}</Tabs.Panel>
       </Tabs>
     </ScrollArea>
   );
diff --git a/packages/widgets/src/health-monitoring/index.ts b/packages/widgets/src/health-monitoring/index.ts
index ff8eb87ab..c322e322a 100644
--- a/packages/widgets/src/health-monitoring/index.ts
+++ b/packages/widgets/src/health-monitoring/index.ts
@@ -8,6 +8,7 @@ import { createStorageVolumeMultiSelectOptions } from "../storage-volume-options
 
 export const { definition, componentLoader } = createWidgetDefinition("healthMonitoring", {
   icon: IconHeartRateMonitor,
+  queryKeys: [[["integration", "byIds"]], [["widget", "healthMonitoring"]]],
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from(
diff --git a/packages/widgets/src/health-monitoring/integration-selection.spec.ts b/packages/widgets/src/health-monitoring/integration-selection.spec.ts
new file mode 100644
index 000000000..3d7b3c916
--- /dev/null
+++ b/packages/widgets/src/health-monitoring/integration-selection.spec.ts
@@ -0,0 +1,25 @@
+import { describe, expect, test } from "vitest";
+
+import { partitionHealthMonitoringIntegrations } from "./integration-selection";
+
+describe("partitionHealthMonitoringIntegrations", () => {
+  test("preserves every Proxmox integration", () => {
+    expect(
+      partitionHealthMonitoringIntegrations([
+        { id: "proxmox-a", kind: "proxmox" },
+        { id: "proxmox-b", kind: "proxmox" },
+        { id: "system", kind: "glances" },
+      ]),
+    ).toEqual({
+      clusterIntegrationIds: ["proxmox-a", "proxmox-b"],
+      systemIntegrationIds: ["system"],
+    });
+  });
+
+  test("keeps mock integrations in both views", () => {
+    expect(partitionHealthMonitoringIntegrations([{ id: "mock", kind: "mock" }])).toEqual({
+      clusterIntegrationIds: ["mock"],
+      systemIntegrationIds: ["mock"],
+    });
+  });
+});
diff --git a/packages/widgets/src/health-monitoring/integration-selection.ts b/packages/widgets/src/health-monitoring/integration-selection.ts
new file mode 100644
index 000000000..ee2f679df
--- /dev/null
+++ b/packages/widgets/src/health-monitoring/integration-selection.ts
@@ -0,0 +1,12 @@
+import type { IntegrationKind } from "@homarr/definitions";
+
+interface HealthMonitoringIntegration {
+  id: string;
+  kind: IntegrationKind;
+}
+
+export const partitionHealthMonitoringIntegrations = (integrations: HealthMonitoringIntegration[]) => ({
+  clusterIntegrationIds: integrations.filter(({ kind }) => kind === "proxmox" || kind === "mock").map(({ id }) => id),
+  // Mock implements both contracts and remains visible in both views.
+  systemIntegrationIds: integrations.filter(({ kind }) => kind !== "proxmox").map(({ id }) => id),
+});
diff --git a/packages/widgets/src/health-monitoring/system-health.module.css b/packages/widgets/src/health-monitoring/system-health.module.css
index 1ab18a656..71b6ae8f7 100644
--- a/packages/widgets/src/health-monitoring/system-health.module.css
+++ b/packages/widgets/src/health-monitoring/system-health.module.css
@@ -5,3 +5,35 @@
 [data-mantine-color-scheme="dark"] .card {
   background-color: var(--mantine-color-dark-7);
 }
+
+.systemPanel {
+  min-width: 0;
+}
+
+.infoAction {
+  transition: opacity 150ms ease;
+}
+
+.infoActionCompact {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.systemPanel:hover .infoActionCompact,
+.systemPanel:focus-within .infoActionCompact {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (any-pointer: coarse) {
+  .infoActionCompact {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .infoAction {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/health-monitoring/system-health.tsx b/packages/widgets/src/health-monitoring/system-health.tsx
index 3614a570c..f8cfafda0 100644
--- a/packages/widgets/src/health-monitoring/system-health.tsx
+++ b/packages/widgets/src/health-monitoring/system-health.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useState } from "react";
+
 import {
   ActionIcon,
   Box,
@@ -11,10 +13,10 @@ import {
   List,
   Modal,
   Progress,
+  ScrollArea,
   Stack,
   Text,
 } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import {
   IconBrain,
   IconClock,
@@ -30,6 +32,7 @@ import combineClasses from "clsx";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 
+import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { formatBytes } from "@homarr/common";
@@ -38,7 +41,9 @@ import { useI18n } from "@homarr/translation/client";
 
 import { filterStorageVolumes, normalizeStorageDeviceName } from "../filter-storage-volumes";
 import { WidgetEmptyState } from "../common/empty-state";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import type { WidgetComponentProps } from "../definition";
+import actionTargetClasses from "../common/action-target.module.css";
 import { CpuRing } from "./rings/cpu-ring";
 import { CpuTempRing } from "./rings/cpu-temp-ring";
 import { GpuRing } from "./rings/gpu-ring";
@@ -51,206 +56,238 @@ export const SystemHealthMonitoring = ({
   options,
   integrationIds,
   width,
-}: WidgetComponentProps<"healthMonitoring">) => {
+  displayMode,
+  withScrollArea = true,
+}: WidgetComponentProps<"healthMonitoring"> & { withScrollArea?: boolean }) => {
   const t = useI18n();
-  const { data: healthData = [] } = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({
-    integrationIds,
-  });
-  const [opened, { open, close }] = useDisclosure(false);
+  const healthData =
+    getUsableWidgetQueryData(clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({ integrationIds })) ??
+    [];
+  const [openedIntegrationId, setOpenedIntegrationId] = useState<string | null>(null);
   const board = useRequiredBoard();
 
-  const isTiny = width < 256;
+  const isAdvanced = displayMode === "advanced";
+  const isTiny = !isAdvanced && width < 256;
 
   if (healthData.length === 0) return <WidgetEmptyState />;
 
+  const Container = withScrollArea ? ScrollArea : Box;
+
   return (
-    <Stack h="100%" gap="sm" className="health-monitoring">
-      {healthData.map(({ integrationId, integrationName, healthInfo }) => {
-        const filteredFileSystem = filterStorageVolumes(
-          healthInfo.fileSystem,
-          options.visibleStorageVolumes,
-          integrationId,
-        );
-        const filteredSmart = filterStorageVolumes(healthInfo.smart, options.visibleStorageVolumes, integrationId);
-        const disksData = matchFileSystemAndSmart(filteredFileSystem, filteredSmart);
-        const memoryUsage = formatMemoryUsage(healthInfo.memAvailableInBytes, healthInfo.memUsedInBytes);
-        return (
-          <Stack
-            gap="sm"
-            key={integrationId}
-            h="100%"
-            className={`health-monitoring-information health-monitoring-${integrationName}`}
-            p="sm"
-            pos="relative"
-          >
-            <Box className="health-monitoring-information-card-section" pos="absolute" top={8} right={8}>
-              <Indicator
-                className="health-monitoring-updates-reboot-indicator"
-                inline
-                processing
-                styles={{ indicator: { pointerEvents: "none" } }}
-                color={healthInfo.rebootRequired ? "red" : healthInfo.availablePkgUpdates > 0 ? "blue" : "gray"}
-                position="top-end"
-                size={16}
-                label={healthInfo.availablePkgUpdates > 0 ? healthInfo.availablePkgUpdates : undefined}
-                disabled={!healthInfo.rebootRequired && healthInfo.availablePkgUpdates === 0}
+    <Container h={withScrollArea ? "100%" : undefined}>
+      <Stack mih="100%" gap="sm" className="health-monitoring">
+        {healthData.map(({ integrationId, integrationName, healthInfo }) => {
+          const filteredFileSystem = filterStorageVolumes(
+            healthInfo.fileSystem,
+            options.visibleStorageVolumes,
+            integrationId,
+          );
+          const filteredSmart = filterStorageVolumes(healthInfo.smart, options.visibleStorageVolumes, integrationId);
+          const disksData = matchFileSystemAndSmart(filteredFileSystem, filteredSmart);
+          const memoryUsage = formatMemoryUsage(healthInfo.memAvailableInBytes, healthInfo.memUsedInBytes);
+          const hasAttentionState = healthInfo.rebootRequired || healthInfo.availablePkgUpdates > 0;
+          return (
+            <Stack
+              gap="sm"
+              key={integrationId}
+              h={!isAdvanced && healthData.length === 1 ? "100%" : "auto"}
+              className={combineClasses(
+                `health-monitoring-information health-monitoring-${integrationName}`,
+                classes.systemPanel,
+              )}
+              p="sm"
+              pos="relative"
+            >
+              <Box
+                className={combineClasses(
+                  "health-monitoring-information-card-section",
+                  classes.infoAction,
+                  !isAdvanced && !hasAttentionState && classes.infoActionCompact,
+                )}
+                pos="absolute"
+                top={8}
+                right={8}
               >
-                <ActionIcon
-                  className="health-monitoring-information-icon-avatar"
-                  variant={"light"}
-                  color="var(--mantine-color-text)"
-                  size="sm"
-                  radius={board.itemRadius}
+                <Indicator
+                  className="health-monitoring-updates-reboot-indicator"
+                  inline
+                  processing
+                  styles={{ indicator: { pointerEvents: "none" } }}
+                  color={healthInfo.rebootRequired ? "red" : healthInfo.availablePkgUpdates > 0 ? "blue" : "gray"}
+                  position="top-end"
+                  size={16}
+                  label={healthInfo.availablePkgUpdates > 0 ? healthInfo.availablePkgUpdates : undefined}
+                  disabled={!healthInfo.rebootRequired && healthInfo.availablePkgUpdates === 0}
                 >
-                  <IconInfoCircle className="health-monitoring-information-icon" size={30} onClick={open} />
-                </ActionIcon>
-              </Indicator>
-              <Modal
-                opened={opened}
-                onClose={close}
-                size="auto"
-                title={t("widget.healthMonitoring.popover.information")}
-                centered
-              >
-                <Stack gap="10px" className="health-monitoring-modal-stack">
-                  <Divider />
-                  <List className="health-monitoring-information-list" center spacing="xs">
-                    <List.Item className="health-monitoring-information-processor" icon={<IconCpu2 size={30} />}>
-                      {t("widget.healthMonitoring.popover.processor", { cpuModelName: healthInfo.cpuModelName })}
-                    </List.Item>
-                    <List.Item className="health-monitoring-information-memory" icon={<IconBrain size={30} />}>
-                      {t("widget.healthMonitoring.popover.memory", { memory: memoryUsage.memTotal.GB })}
-                    </List.Item>
-                    <List.Item className="health-monitoring-information-memory" icon={<IconBrain size={30} />}>
-                      {t("widget.healthMonitoring.popover.memoryAvailable", {
-                        memoryAvailable: memoryUsage.memFree.GB,
-                        percent: String(memoryUsage.memFree.percent),
-                      })}
-                    </List.Item>
-                    <List.Item className="health-monitoring-information-version" icon={<IconVersions size={30} />}>
-                      {t("widget.healthMonitoring.popover.version", {
-                        version: healthInfo.version,
-                      })}
-                    </List.Item>
-                    <List.Item className="health-monitoring-information-uptime" icon={<IconClock size={30} />}>
-                      {formatUptime(healthInfo.uptime, t)}
-                    </List.Item>
-                    {healthInfo.loadAverage && (
-                      <>
-                        <List.Item className="health-monitoring-information-load-average" icon={<IconCpu size={30} />}>
-                          {t("widget.healthMonitoring.popover.loadAverage")}
-                        </List.Item>
-                        <List m="xs" withPadding center spacing="xs" icon={<IconCpu size={30} />}>
-                          <List.Item className="health-monitoring-information-load-average-1min">
-                            {t("widget.healthMonitoring.popover.minute")} {healthInfo.loadAverage["1min"]}%
-                          </List.Item>
-                          <List.Item className="health-monitoring-information-load-average-5min">
-                            {t("widget.healthMonitoring.popover.minutes", { count: "5" })}{" "}
-                            {healthInfo.loadAverage["5min"]}%
-                          </List.Item>
-                          <List.Item className="health-monitoring-information-load-average-15min">
-                            {t("widget.healthMonitoring.popover.minutes", { count: "15" })}{" "}
-                            {healthInfo.loadAverage["15min"]}%
-                          </List.Item>
-                        </List>
-                      </>
-                    )}
-                  </List>
-                </Stack>
-              </Modal>
-            </Box>
-            <Flex className="health-monitoring-information-card-elements" justify="center" align="center" wrap="wrap">
-              {options.cpu && <CpuRing cpuUtilization={healthInfo.cpuUtilization} isTiny={isTiny} />}
-              {options.cpu && (
-                <CpuTempRing fahrenheit={options.fahrenheit} cpuTemp={healthInfo.cpuTemp} isTiny={isTiny} />
-              )}
-              {options.memory && (
-                <MemoryRing
-                  available={healthInfo.memAvailableInBytes}
-                  used={healthInfo.memUsedInBytes}
-                  isTiny={isTiny}
-                />
-              )}
-              {options.gpu &&
-                healthInfo.gpu.map((gpu) => (
-                  <GpuRing key={gpu.gpuId} gpu={gpu} isTiny={isTiny} fahrenheit={options.fahrenheit} />
-                ))}
-            </Flex>
-            {options.fileSystem &&
-              disksData.map((disk) => {
-                return (
-                  <Card
-                    className={combineClasses(
-                      `health-monitoring-disk-card health-monitoring-disk-card-${integrationName}`,
-                      classes.card,
-                    )}
-                    style={{ overflow: "visible" }}
-                    key={disk.deviceName}
+                  <ActionIcon
+                    className={combineClasses("health-monitoring-information-icon-avatar", actionTargetClasses.root)}
+                    variant={"light"}
+                    color="var(--mantine-color-text)"
+                    size="sm"
                     radius={board.itemRadius}
-                    p="xs"
+                    onClick={() => setOpenedIntegrationId(integrationId)}
+                    aria-label={t("widget.healthMonitoring.popover.information")}
                   >
-                    <Stack gap="xs">
-                      <Group
-                        className="health-monitoring-disk-status"
-                        justify="space-between"
-                        align="center"
-                        wrap="wrap"
-                        gap={8}
-                      >
-                        <Group gap={4} wrap="nowrap">
-                          <IconServer className="health-monitoring-disk-icon" size="1rem" />
-                          <Text className="dihealth-monitoring-disk-name" size="xs">
-                            {disk.deviceName}
-                          </Text>
-                        </Group>
-                        {disk.temperature !== null && (
+                    <IconInfoCircle className="health-monitoring-information-icon" size={30} />
+                  </ActionIcon>
+                </Indicator>
+                <Modal
+                  opened={openedIntegrationId === integrationId}
+                  onClose={() => setOpenedIntegrationId(null)}
+                  size="auto"
+                  title={t("widget.healthMonitoring.popover.information")}
+                  centered
+                >
+                  <Stack gap="10px" className="health-monitoring-modal-stack">
+                    <Divider />
+                    <SystemInformationList healthInfo={healthInfo} memoryUsage={memoryUsage} t={t} />
+                  </Stack>
+                </Modal>
+              </Box>
+              <Flex className="health-monitoring-information-card-elements" justify="center" align="center" wrap="wrap">
+                {options.cpu && <CpuRing cpuUtilization={healthInfo.cpuUtilization} isTiny={isTiny} />}
+                {options.cpu && (
+                  <CpuTempRing fahrenheit={options.fahrenheit} cpuTemp={healthInfo.cpuTemp} isTiny={isTiny} />
+                )}
+                {options.memory && (
+                  <MemoryRing
+                    available={healthInfo.memAvailableInBytes}
+                    used={healthInfo.memUsedInBytes}
+                    isTiny={isTiny}
+                  />
+                )}
+                {options.gpu &&
+                  healthInfo.gpu.map((gpu) => (
+                    <GpuRing key={gpu.gpuId} gpu={gpu} isTiny={isTiny} fahrenheit={options.fahrenheit} />
+                  ))}
+              </Flex>
+              {isAdvanced && (
+                <Card radius={board.itemRadius} p="sm">
+                  <SystemInformationList healthInfo={healthInfo} memoryUsage={memoryUsage} t={t} compact />
+                </Card>
+              )}
+              {options.fileSystem &&
+                disksData.map((disk) => {
+                  return (
+                    <Card
+                      className={combineClasses(
+                        `health-monitoring-disk-card health-monitoring-disk-card-${integrationName}`,
+                        classes.card,
+                      )}
+                      style={{ overflow: "visible" }}
+                      key={disk.deviceName}
+                      radius={board.itemRadius}
+                      p="xs"
+                    >
+                      <Stack gap="xs">
+                        <Group
+                          className="health-monitoring-disk-status"
+                          justify="space-between"
+                          align="center"
+                          wrap="wrap"
+                          gap={8}
+                        >
                           <Group gap={4} wrap="nowrap">
-                            <IconTemperature className="health-monitoring-disk-temperature-icon" size="1rem" />
-                            <Text className="health-monitoring-disk-temperature-value" size="xs">
-                              {options.fahrenheit
-                                ? `${(disk.temperature * 1.8 + 32).toFixed(1)}°F`
-                                : `${disk.temperature}°C`}
+                            <IconServer className="health-monitoring-disk-icon" size="1rem" />
+                            <Text className="dihealth-monitoring-disk-name" size="xs">
+                              {disk.deviceName}
                             </Text>
                           </Group>
-                        )}
-                        <Group gap={4} wrap="nowrap">
-                          <IconFileReport className="health-monitoring-disk-status-icon" size="1rem" />
-                          <Text className="health-monitoring-disk-status-value" size="xs">
-                            {disk.overallStatus ? disk.overallStatus : "N/A"}
+                          {disk.temperature !== null && (
+                            <Group gap={4} wrap="nowrap">
+                              <IconTemperature className="health-monitoring-disk-temperature-icon" size="1rem" />
+                              <Text className="health-monitoring-disk-temperature-value" size="xs">
+                                {options.fahrenheit
+                                  ? `${(disk.temperature * 1.8 + 32).toFixed(1)}°F`
+                                  : `${disk.temperature}°C`}
+                              </Text>
+                            </Group>
+                          )}
+                          <Group gap={4} wrap="nowrap">
+                            <IconFileReport className="health-monitoring-disk-status-icon" size="1rem" />
+                            <Text className="health-monitoring-disk-status-value" size="xs">
+                              {disk.overallStatus ? disk.overallStatus : "N/A"}
+                            </Text>
+                          </Group>
+                        </Group>
+                        <Progress.Root className="health-monitoring-disk-use" radius={board.itemRadius} size="lg">
+                          <Progress.Section
+                            value={disk.percentage}
+                            color={progressColor(disk.percentage)}
+                            className="health-monitoring-disk-use-percentage"
+                          />
+                          <Progress.Section
+                            className="health-monitoring-disk-available-percentage"
+                            value={100 - disk.percentage}
+                            color="default"
+                          />
+                        </Progress.Root>
+                        <Group justify="space-between" gap={8} wrap="nowrap">
+                          <Text className="health-monitoring-disk-use-value" size="xs" c="dimmed">
+                            {t("widget.healthMonitoring.popover.used")} {formatFileSize(disk.used)}
+                          </Text>
+                          <Text className="health-monitoring-disk-available-value" size="xs" c="dimmed">
+                            {formatFileSize(disk.available)} {t("widget.healthMonitoring.popover.available")}
                           </Text>
                         </Group>
-                      </Group>
-                      <Progress.Root className="health-monitoring-disk-use" radius={board.itemRadius} size="lg">
-                        <Progress.Section
-                          value={disk.percentage}
-                          color={progressColor(disk.percentage)}
-                          className="health-monitoring-disk-use-percentage"
-                        />
-                        <Progress.Section
-                          className="health-monitoring-disk-available-percentage"
-                          value={100 - disk.percentage}
-                          color="default"
-                        />
-                      </Progress.Root>
-                      <Group justify="space-between" gap={8} wrap="nowrap">
-                        <Text className="health-monitoring-disk-use-value" size="xs" c="dimmed">
-                          {t("widget.healthMonitoring.popover.used")} {formatFileSize(disk.used)}
-                        </Text>
-                        <Text className="health-monitoring-disk-available-value" size="xs" c="dimmed">
-                          {formatFileSize(disk.available)} {t("widget.healthMonitoring.popover.available")}
-                        </Text>
-                      </Group>
-                    </Stack>
-                  </Card>
-                );
-              })}
-          </Stack>
-        );
-      })}
-    </Stack>
+                      </Stack>
+                    </Card>
+                  );
+                })}
+            </Stack>
+          );
+        })}
+      </Stack>
+    </Container>
   );
 };
 
+type HealthInfo = RouterOutputs["widget"]["healthMonitoring"]["getSystemHealthStatus"][number]["healthInfo"];
+
+const SystemInformationList = ({
+  healthInfo,
+  memoryUsage,
+  t,
+  compact = false,
+}: {
+  healthInfo: HealthInfo;
+  memoryUsage: ReturnType<typeof formatMemoryUsage>;
+  t: TranslationFunction;
+  compact?: boolean;
+}) => (
+  <List
+    className="health-monitoring-information-list"
+    center
+    spacing={compact ? 4 : "xs"}
+    size={compact ? "sm" : undefined}
+  >
+    <List.Item className="health-monitoring-information-processor" icon={<IconCpu2 size={compact ? 18 : 30} />}>
+      {t("widget.healthMonitoring.popover.processor", { cpuModelName: healthInfo.cpuModelName })}
+    </List.Item>
+    <List.Item className="health-monitoring-information-memory" icon={<IconBrain size={compact ? 18 : 30} />}>
+      {t("widget.healthMonitoring.popover.memory", { memory: memoryUsage.memTotal.GB })}
+    </List.Item>
+    <List.Item className="health-monitoring-information-memory" icon={<IconBrain size={compact ? 18 : 30} />}>
+      {t("widget.healthMonitoring.popover.memoryAvailable", {
+        memoryAvailable: memoryUsage.memFree.GB,
+        percent: String(memoryUsage.memFree.percent),
+      })}
+    </List.Item>
+    <List.Item className="health-monitoring-information-version" icon={<IconVersions size={compact ? 18 : 30} />}>
+      {t("widget.healthMonitoring.popover.version", { version: healthInfo.version })}
+    </List.Item>
+    <List.Item className="health-monitoring-information-uptime" icon={<IconClock size={compact ? 18 : 30} />}>
+      {formatUptime(healthInfo.uptime, t)}
+    </List.Item>
+    {healthInfo.loadAverage && (
+      <List.Item className="health-monitoring-information-load-average" icon={<IconCpu size={compact ? 18 : 30} />}>
+        {t("widget.healthMonitoring.popover.loadAverage")}: {healthInfo.loadAverage["1min"]}% /{" "}
+        {healthInfo.loadAverage["5min"]}% / {healthInfo.loadAverage["15min"]}%
+      </List.Item>
+    )}
+  </List>
+);
+
 export const formatUptime = (uptimeInSeconds: number, t: TranslationFunction) => {
   const uptimeDuration = dayjs.duration(uptimeInSeconds, "seconds");
   const months = uptimeDuration.months();
diff --git a/packages/widgets/src/iframe/component.spec.ts b/packages/widgets/src/iframe/component.spec.ts
new file mode 100644
index 000000000..a5f3b5835
--- /dev/null
+++ b/packages/widgets/src/iframe/component.spec.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+
+import { getAllowedPermissions, getFrameTitle, getSandboxFlags, isSupportedProtocol } from "./component";
+
+const permissions = {
+  allowFullScreen: true,
+  allowPayment: false,
+  allowAutoPlay: true,
+  allowMicrophone: false,
+  allowCamera: false,
+  allowGeolocation: false,
+  allowModals: true,
+};
+
+describe("iframe policy", () => {
+  it("keeps sandbox-only modal permission out of Permissions Policy", () => {
+    expect(getAllowedPermissions(permissions)).toBe("fullscreen *; autoplay *");
+    expect(getSandboxFlags(permissions)).toContain("allow-modals");
+  });
+
+  it("accepts only HTTP protocols", () => {
+    expect(isSupportedProtocol("https://example.com")).toBe(true);
+    expect(isSupportedProtocol("javascript:alert(1)")).toBe(false);
+    expect(isSupportedProtocol("not a url")).toBe(false);
+  });
+
+  it("creates a display title without credentials, paths, or query parameters", () => {
+    expect(getFrameTitle("https://user:secret@example.com/private?token=sensitive")).toBe("example.com");
+  });
+
+  it("keeps a non-default port in the display title", () => {
+    expect(getFrameTitle("http://user:secret@example.com:8080/private?token=sensitive")).toBe("example.com:8080");
+  });
+});
diff --git a/packages/widgets/src/iframe/component.tsx b/packages/widgets/src/iframe/component.tsx
index ac794a631..7dce2c91b 100644
--- a/packages/widgets/src/iframe/component.tsx
+++ b/packages/widgets/src/iframe/component.tsx
@@ -7,45 +7,44 @@ import { objectEntries } from "@homarr/common";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getSafeApplicationUrl } from "../common/application-url";
 import classes from "./component.module.css";
 
 export default function IFrameWidget({ options, isEditMode }: WidgetComponentProps<"iframe">) {
   const t = useI18n();
   const { embedUrl, allowScrolling, ...permissions } = options;
+  const safeEmbedUrl = getSafeApplicationUrl(embedUrl);
   const allowedPermissions = getAllowedPermissions(permissions);
   const sandboxFlags = getSandboxFlags(permissions);
 
   if (embedUrl.trim() === "") return <NoUrl />;
-  if (!isSupportedProtocol(embedUrl)) {
+  if (!safeEmbedUrl) {
     return <UnsupportedProtocol />;
   }
 
   return (
-    <Box h="100%" w="100%">
-      <iframe
-        style={isEditMode ? { userSelect: "none", pointerEvents: "none" } : undefined}
-        className={classes.iframe}
-        src={embedUrl}
-        title="widget iframe"
-        allow={allowedPermissions}
-        scrolling={allowScrolling ? "yes" : "no"}
-        sandbox={sandboxFlags.join(" ")}
-      >
-        <Text>{t("widget.iframe.error.noBrowerSupport")}</Text>
-      </iframe>
-    </Box>
+    <Stack h="100%" w="100%" gap={0}>
+      <Box style={{ flex: 1, minHeight: 0 }}>
+        <iframe
+          style={isEditMode ? { userSelect: "none", pointerEvents: "none" } : undefined}
+          className={classes.iframe}
+          src={safeEmbedUrl}
+          title={getFrameTitle(safeEmbedUrl)}
+          allow={allowedPermissions}
+          scrolling={allowScrolling ? "yes" : "no"}
+          sandbox={sandboxFlags.join(" ")}
+        >
+          <Text>{t("widget.iframe.error.noBrowerSupport")}</Text>
+        </iframe>
+      </Box>
+    </Stack>
   );
 }
 
 const supportedProtocols = ["http", "https"];
 
-const isSupportedProtocol = (url: string) => {
-  try {
-    const parsedUrl = new URL(url);
-    return supportedProtocols.map((protocol) => `${protocol}:`).includes(`${parsedUrl.protocol}`);
-  } catch {
-    return false;
-  }
+export const isSupportedProtocol = (url: string) => {
+  return getSafeApplicationUrl(url) !== undefined;
 };
 
 const NoUrl = () => {
@@ -74,19 +73,22 @@ const UnsupportedProtocol = () => {
   );
 };
 
-const getAllowedPermissions = (
+export const getAllowedPermissions = (
   permissions: Omit<WidgetComponentProps<"iframe">["options"], "embedUrl" | "allowScrolling">,
 ) => {
   return (
     objectEntries(permissions)
-      .filter(([_key, value]) => value)
-      // * means it applies to all origins
-      .map(([key]) => `${permissionMapping[key]} *`)
+      // * means it applies to all origins. Sandbox-only flags such as
+      // allow-modals intentionally have no Permissions Policy mapping.
+      .flatMap(([key, value]) => {
+        const permission = permissionMapping[key];
+        return value && permission ? [`${permission} *`] : [];
+      })
       .join("; ")
   );
 };
 
-const getSandboxFlags = (
+export const getSandboxFlags = (
   permissions: Omit<WidgetComponentProps<"iframe">["options"], "embedUrl" | "allowScrolling">,
 ) => {
   const baseSandbox = [
@@ -112,12 +114,21 @@ const getSandboxFlags = (
   return baseSandbox;
 };
 
-const permissionMapping = {
+const permissionMapping: Partial<
+  Record<keyof Omit<WidgetComponentProps<"iframe">["options"], "embedUrl" | "allowScrolling">, string>
+> = {
   allowAutoPlay: "autoplay",
   allowCamera: "camera",
   allowFullScreen: "fullscreen",
   allowGeolocation: "geolocation",
   allowMicrophone: "microphone",
   allowPayment: "payment",
-  allowModals: "allow-modals",
-} satisfies Record<keyof Omit<WidgetComponentProps<"iframe">["options"], "embedUrl" | "allowScrolling">, string>;
+};
+
+export const getFrameTitle = (url: string) => {
+  try {
+    return new URL(url).host;
+  } catch {
+    return "iframe";
+  }
+};
diff --git a/packages/widgets/src/iframe/index.ts b/packages/widgets/src/iframe/index.ts
index d4313aebe..fb30b51ea 100644
--- a/packages/widgets/src/iframe/index.ts
+++ b/packages/widgets/src/iframe/index.ts
@@ -1,23 +1,39 @@
-import { IconBrowser } from "@tabler/icons-react";
+import { IconBrowser, IconExternalLink } from "@tabler/icons-react";
 
 import { createWidgetDefinition } from "../definition";
+import { getSafeApplicationUrl } from "../common/application-url";
 import { optionsBuilder } from "../options";
 
+const createOptions = () =>
+  optionsBuilder.from((factory) => ({
+    embedUrl: factory.text(),
+    allowFullScreen: factory.switch(),
+    allowScrolling: factory.switch({
+      defaultValue: true,
+    }),
+    allowPayment: factory.switch(),
+    allowAutoPlay: factory.switch(),
+    allowMicrophone: factory.switch(),
+    allowCamera: factory.switch(),
+    allowGeolocation: factory.switch(),
+    allowModals: factory.switch(),
+  }));
+
 export const { definition, componentLoader } = createWidgetDefinition("iframe", {
+  supportsAdvancedFocus: false,
   icon: IconBrowser,
-  createOptions() {
-    return optionsBuilder.from((factory) => ({
-      embedUrl: factory.text(),
-      allowFullScreen: factory.switch(),
-      allowScrolling: factory.switch({
-        defaultValue: true,
-      }),
-      allowPayment: factory.switch(),
-      allowAutoPlay: factory.switch(),
-      allowMicrophone: factory.switch(),
-      allowCamera: factory.switch(),
-      allowGeolocation: factory.switch(),
-      allowModals: factory.switch(),
-    }));
+  contextActions: ({ options }) => {
+    const embedUrl = getSafeApplicationUrl(options.embedUrl);
+    return embedUrl
+      ? [
+          {
+            key: "open-iframe",
+            label: "widget.app.option.openInNewTab.label",
+            icon: IconExternalLink,
+            onClick: () => window.open(embedUrl, "_blank", "noopener,noreferrer"),
+          },
+        ]
+      : [];
   },
+  createOptions,
 }).withDynamicImport(() => import("./component"));
diff --git a/packages/widgets/src/immich/album-carousel/component.module.css b/packages/widgets/src/immich/album-carousel/component.module.css
index 9412b96dc..ab23cb8ec 100644
--- a/packages/widgets/src/immich/album-carousel/component.module.css
+++ b/packages/widgets/src/immich/album-carousel/component.module.css
@@ -24,29 +24,42 @@
   border-radius: 0;
 }
 
-.dots {
+.carouselControls {
   position: absolute;
-  bottom: 12px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10;
+  inset-block-start: 8px;
+  inset-inline-end: 8px;
+  z-index: 1;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-2px);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
 }
 
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: rgba(255, 255, 255, 0.5);
-  cursor: pointer;
-  transition: all 0.2s ease;
+.carouselContainer:hover .carouselControls,
+.carouselContainer:focus-within .carouselControls,
+.carouselControls[data-visible="true"] {
+  opacity: 1;
+  pointer-events: auto;
+  transform: none;
+}
 
-  &[data-active="true"] {
-    background-color: rgba(255, 255, 255, 1);
-    width: 24px;
-    border-radius: 4px;
+@media (any-pointer: coarse) {
+  .carouselControls {
+    opacity: 1;
+    pointer-events: auto;
+    transform: none;
   }
 
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.8);
+  .carouselControls button {
+    width: 44px;
+    height: 44px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carouselControls {
+    transition: none;
   }
 }
diff --git a/packages/widgets/src/immich/album-carousel/component.tsx b/packages/widgets/src/immich/album-carousel/component.tsx
index 49bb4ceec..a0bb5f416 100644
--- a/packages/widgets/src/immich/album-carousel/component.tsx
+++ b/packages/widgets/src/immich/album-carousel/component.tsx
@@ -1,30 +1,45 @@
 "use client";
 
 import type { Dispatch, SetStateAction } from "react";
-import { useEffect, useMemo, useState } from "react";
-import { Box, Center, Group, Image, Stack, Text } from "@mantine/core";
-import { IconAlertCircle, IconCalendar } from "@tabler/icons-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { ActionIcon, Box, Center, Group, Image, ScrollArea, Stack, Text, UnstyledButton } from "@mantine/core";
+import { useReducedMotion } from "@mantine/hooks";
+import {
+  IconAlertCircle,
+  IconCalendar,
+  IconChevronLeft,
+  IconChevronRight,
+  IconPlayerPause,
+  IconPlayerPlay,
+} from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import { useI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useI18n, useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
 import type { WidgetComponentProps } from "../../definition";
+import { useWidgetRuntimeActions } from "../../runtime-hooks";
+import { getUsableWidgetQueryData } from "../../common/query-state";
 import classes from "./component.module.css";
 import { ALL_PHOTOS_ALBUM_ID } from "./constants";
 
 export default function ImmichAlbumCarouselWidget({
   integrationIds,
   options,
+  displayMode = "compact",
+  widgetRuntimeRef,
 }: WidgetComponentProps<"immich-albumCarousel">) {
   const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
+  const [paused, setPaused] = useState(false);
 
-  const { data: album } = clientApi.widget.immich.getAlbum.useQuery(
-    {
-      integrationId: integrationIds[0] ?? "",
-      albumId: options.albumId && options.albumId !== ALL_PHOTOS_ALBUM_ID ? options.albumId : undefined,
-    },
-    { enabled: integrationIds.length > 0 },
+  const album = getUsableWidgetQueryData(
+    clientApi.widget.immich.getAlbum.useQuery(
+      {
+        integrationId: integrationIds[0] ?? "",
+        albumId: options.albumId && options.albumId !== ALL_PHOTOS_ALBUM_ID ? options.albumId : undefined,
+      },
+      { enabled: integrationIds.length > 0 },
+    ),
   );
 
   const photoAssets = useMemo(() => {
@@ -33,8 +48,23 @@ export default function ImmichAlbumCarouselWidget({
   }, [album?.assets, options.randomizePhotos]);
 
   useEffect(() => {
-    setCurrentPhotoIndex(0);
-  }, [photoAssets]);
+    if (photoAssets.length === 0) return;
+    setCurrentPhotoIndex((current) => Math.min(current, photoAssets.length - 1));
+  }, [photoAssets.length]);
+
+  const previousPhoto = useCallback(
+    () => setCurrentPhotoIndex((current) => (current - 1 + photoAssets.length) % photoAssets.length),
+    [photoAssets.length],
+  );
+  const nextPhoto = useCallback(
+    () => setCurrentPhotoIndex((current) => (current + 1) % photoAssets.length),
+    [photoAssets.length],
+  );
+  const toggleSlideshow = useCallback(() => setPaused((value) => !value), []);
+  useWidgetRuntimeActions(
+    widgetRuntimeRef,
+    photoAssets.length > 1 ? { previousPhoto, nextPhoto, toggleSlideshow } : {},
+  );
 
   if (!album) return <WidgetEmptyState />;
 
@@ -53,6 +83,10 @@ export default function ImmichAlbumCarouselWidget({
       setCurrentIndex={setCurrentPhotoIndex}
       rotationInterval={options.rotationIntervalSeconds}
       showPhotoInfo={options.showPhotoInfo}
+      albumName={album.albumName}
+      advanced={displayMode === "advanced"}
+      paused={paused}
+      setPaused={setPaused}
     />
   );
 }
@@ -73,7 +107,6 @@ function shuffle<T>(items: T[]) {
 interface CarouselProps {
   assets: {
     id: string;
-    originalPath: string;
     fileModifiedAt: string;
     publicLink: string;
   }[];
@@ -81,36 +114,134 @@ interface CarouselProps {
   setCurrentIndex: Dispatch<SetStateAction<number>>;
   rotationInterval: number;
   showPhotoInfo: boolean;
+  albumName: string;
+  advanced: boolean;
+  paused: boolean;
+  setPaused: Dispatch<SetStateAction<boolean>>;
 }
 
-function Carousel({ assets, currentIndex, setCurrentIndex, rotationInterval, showPhotoInfo }: CarouselProps) {
+function Carousel({
+  assets,
+  currentIndex,
+  setCurrentIndex,
+  rotationInterval,
+  showPhotoInfo,
+  albumName,
+  advanced,
+  paused,
+  setPaused,
+}: CarouselProps) {
+  const t = useScopedI18n("widget.immich-albumCarousel");
+  const locale = useCurrentIntlLocale();
+  const reduceMotion = useReducedMotion();
+
   useEffect(() => {
+    if (paused || reduceMotion || assets.length <= 1) return;
     const interval = setInterval(() => {
       setCurrentIndex((prev) => (prev + 1) % assets.length);
     }, rotationInterval * 1000);
 
     return () => clearInterval(interval);
-  }, [assets.length, rotationInterval, setCurrentIndex]);
+  }, [assets.length, paused, reduceMotion, rotationInterval, setCurrentIndex]);
 
+  const safeCurrentIndex = Math.min(currentIndex, assets.length - 1);
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const currentAsset = assets[currentIndex]!;
+  const currentAsset = assets[safeCurrentIndex]!;
+
+  const move = (offset: number) => setCurrentIndex((current) => (current + offset + assets.length) % assets.length);
 
   return (
-    <Box w="100%" h="100%" className={classes.carouselContainer}>
-      <Image src={currentAsset.publicLink} alt="Album photo" className={classes.carouselImage} />
+    <Stack w="100%" h="100%" gap={0}>
+      <Box w="100%" style={{ flex: 1, minHeight: 0 }} className={classes.carouselContainer}>
+        <Image src={currentAsset.publicLink} alt={t("albumPhoto")} className={classes.carouselImage} />
 
-      {showPhotoInfo && (
-        <Stack gap="xs" className={classes.photoInfo} p="md">
-          <Group gap="xs">
-            <IconCalendar size={16} />
-            <Text size="xs">{new Date(currentAsset.fileModifiedAt).toLocaleDateString()}</Text>
+        {assets.length > 1 && (
+          <Group
+            className={classes.carouselControls}
+            data-visible={advanced || paused || undefined}
+            gap={4}
+            wrap="nowrap"
+          >
+            {advanced && (
+              <ActionIcon
+                aria-label={t("actions.previousPhoto")}
+                variant="filled"
+                color="dark"
+                radius="xl"
+                size={40}
+                onClick={() => move(-1)}
+              >
+                <IconChevronLeft size={18} />
+              </ActionIcon>
+            )}
+            <ActionIcon
+              aria-label={paused ? t("actions.resumeSlideshow") : t("actions.pauseSlideshow")}
+              variant="filled"
+              color="dark"
+              radius="xl"
+              size={advanced ? 40 : 32}
+              onClick={() => setPaused((value) => !value)}
+            >
+              {paused ? <IconPlayerPlay size={18} /> : <IconPlayerPause size={18} />}
+            </ActionIcon>
+            {advanced && (
+              <ActionIcon
+                aria-label={t("actions.nextPhoto")}
+                variant="filled"
+                color="dark"
+                radius="xl"
+                size={40}
+                onClick={() => move(1)}
+              >
+                <IconChevronRight size={18} />
+              </ActionIcon>
+            )}
           </Group>
-          <Text size="xs" c="dimmed">
-            {currentIndex + 1} / {assets.length}
-          </Text>
-        </Stack>
+        )}
+
+        {(showPhotoInfo || advanced) && (
+          <Stack gap="xs" className={classes.photoInfo} p="md">
+            {albumName && (
+              <Text size="xs" fw={600}>
+                {albumName}
+              </Text>
+            )}
+            <Group gap="xs">
+              <IconCalendar size={16} />
+              <Text size="xs">{new Date(currentAsset.fileModifiedAt).toLocaleDateString(locale)}</Text>
+            </Group>
+            <Text size="xs" c="dimmed">
+              {safeCurrentIndex + 1} / {assets.length}
+            </Text>
+          </Stack>
+        )}
+      </Box>
+      {advanced && (
+        <ScrollArea type="never" scrollbarSize={0} px="xs" py={6}>
+          <Group gap={6} wrap="nowrap">
+            {assets.slice(0, 24).map((asset, index) => (
+              <UnstyledButton
+                key={asset.id}
+                onClick={() => setCurrentIndex(index)}
+                aria-label={t("actions.photo", { number: index + 1 })}
+                aria-pressed={index === safeCurrentIndex}
+                aria-current={index === safeCurrentIndex ? "true" : undefined}
+              >
+                <Image
+                  src={asset.publicLink}
+                  alt=""
+                  w={64}
+                  h={44}
+                  radius="sm"
+                  fit="cover"
+                  style={{ opacity: index === currentIndex ? 1 : 0.55 }}
+                />
+              </UnstyledButton>
+            ))}
+          </Group>
+        </ScrollArea>
       )}
-    </Box>
+    </Stack>
   );
 }
 
diff --git a/packages/widgets/src/immich/album-carousel/index.ts b/packages/widgets/src/immich/album-carousel/index.ts
index 8c4223ef3..f18585280 100644
--- a/packages/widgets/src/immich/album-carousel/index.ts
+++ b/packages/widgets/src/immich/album-carousel/index.ts
@@ -1,58 +1,94 @@
-import { IconPhoto } from "@tabler/icons-react";
+import { IconChevronLeft, IconChevronRight, IconPhoto, IconPlayerPause } from "@tabler/icons-react";
 import z from "zod";
 
 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
 
-import { createWidgetDefinition } from "../../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../../definition";
 import { optionsBuilder } from "../../options";
 import { ALL_PHOTOS_ALBUM_ID } from "./constants";
 
+const createOptions = () =>
+  optionsBuilder.from((factory) => ({
+    albumId: factory.integrationSelect({
+      defaultValue: ALL_PHOTOS_ALBUM_ID,
+      withDescription: true,
+      clearable: true,
+      useOptions: (integrationIds: string[]) => {
+        const t = useScopedI18n("widget.immich-albumCarousel");
+        const {
+          data = [],
+          isPending,
+          isError,
+        } = clientApi.widget.immich.getAlbums.useQuery(
+          { integrationId: integrationIds[0] ?? "" },
+          { enabled: integrationIds.length > 0, staleTime: 15 * 60 * 1000 },
+        );
+        return {
+          data: [
+            { value: ALL_PHOTOS_ALBUM_ID, label: t("allPhotos") },
+            ...data.map((album) => ({ value: album.id, label: album.albumName })),
+          ],
+          isPending,
+          isError,
+        };
+      },
+    }),
+    rotationIntervalSeconds: factory.number({
+      defaultValue: 5,
+      validate: z.number().min(1).max(3600),
+      withDescription: true,
+    }),
+    showPhotoInfo: factory.switch({
+      defaultValue: false,
+      withDescription: true,
+    }),
+    randomizePhotos: factory.switch({
+      defaultValue: false,
+      withDescription: true,
+    }),
+  }));
+
 export const { definition, componentLoader } = createWidgetDefinition("immich-albumCarousel", {
   icon: IconPhoto,
-  queryKey: [["widget", "immich"]],
+  queryKey: [["widget", "immich", "getAlbum"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      integrationId: scope.integrationIds[0] ?? "",
+      albumId:
+        typeof scope.options.albumId === "string" && scope.options.albumId !== ALL_PHOTOS_ALBUM_ID
+          ? scope.options.albumId
+          : undefined,
+    }),
   refetchInterval: null,
   supportedIntegrations: ["immich"],
   integrationsRequired: true,
-  createOptions() {
-    return optionsBuilder.from((factory) => ({
-      albumId: factory.integrationSelect({
-        defaultValue: ALL_PHOTOS_ALBUM_ID,
-        withDescription: true,
-        clearable: true,
-        useOptions: (integrationIds: string[]) => {
-          const t = useScopedI18n("widget.immich-albumCarousel");
-          const {
-            data = [],
-            isPending,
-            isError,
-          } = clientApi.widget.immich.getAlbums.useQuery(
-            { integrationId: integrationIds[0] ?? "" },
-            { enabled: integrationIds.length > 0, staleTime: 15 * 60 * 1000 },
-          );
-          return {
-            data: [
-              { value: ALL_PHOTOS_ALBUM_ID, label: t("allPhotos") },
-              ...data.map((album) => ({ value: album.id, label: album.albumName })),
-            ],
-            isPending,
-            isError,
-          };
-        },
-      }),
-      rotationIntervalSeconds: factory.number({
-        defaultValue: 5,
-        validate: z.number().min(1).max(3600),
-        withDescription: true,
-      }),
-      showPhotoInfo: factory.switch({
-        defaultValue: false,
-        withDescription: true,
-      }),
-      randomizePhotos: factory.switch({
-        defaultValue: false,
-        withDescription: true,
-      }),
-    }));
+  maxIntegrations: 1,
+  contextActions: ({ widgetRuntimeRef }) => {
+    const actions = widgetRuntimeRef.current.actions;
+    return [
+      {
+        key: "previousPhoto",
+        label: "widget.immich-albumCarousel.actions.previousPhoto",
+        icon: IconChevronLeft,
+        disabled: typeof actions.previousPhoto !== "function",
+        onClick: () => actions.previousPhoto?.(),
+      },
+      {
+        key: "nextPhoto",
+        label: "widget.immich-albumCarousel.actions.nextPhoto",
+        icon: IconChevronRight,
+        disabled: typeof actions.nextPhoto !== "function",
+        onClick: () => actions.nextPhoto?.(),
+      },
+      {
+        key: "toggleSlideshow",
+        label: "widget.immich-albumCarousel.actions.toggleSlideshow",
+        icon: IconPlayerPause,
+        disabled: typeof actions.toggleSlideshow !== "function",
+        onClick: () => actions.toggleSlideshow?.(),
+      },
+    ];
   },
+  createOptions,
 }).withDynamicImport(() => import("./component"));
diff --git a/packages/widgets/src/immich/albums-query.spec.ts b/packages/widgets/src/immich/albums-query.spec.ts
new file mode 100644
index 000000000..85faa58bc
--- /dev/null
+++ b/packages/widgets/src/immich/albums-query.spec.ts
@@ -0,0 +1,104 @@
+// @vitest-environment jsdom
+
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import type { WidgetComponentProps } from "../definition";
+import ImmichServerStatsWidget from "./server-stats/component";
+import { definition as albumCarouselDefinition } from "./album-carousel";
+
+const mocks = vi.hoisted(() => ({
+  getAlbums: vi.fn(() => ({ data: [], isPending: false, isError: false })),
+}));
+
+vi.mock("@trpc/react-query", () => ({
+  getQueryKey: (procedure: { path: string[] }, input: unknown) => [procedure.path, { input, type: "query" }],
+}));
+
+vi.mock("@homarr/api/client", () => ({
+  clientApi: {
+    widget: {
+      immich: {
+        getAlbums: { path: ["widget", "immich", "getAlbums"], useQuery: mocks.getAlbums },
+        getServerStats: {
+          path: ["widget", "immich", "getServerStats"],
+          useQuery: () => ({ data: undefined }),
+        },
+      },
+    },
+  },
+}));
+
+vi.mock("@homarr/translation/client", () => ({
+  useCurrentIntlLocale: () => "en",
+  useI18n: () => (key: string) => key,
+  useScopedI18n: () => (key: string) => key,
+}));
+
+describe("Immich album queries", () => {
+  let host: HTMLDivElement | undefined;
+  let root: ReturnType<typeof createRoot> | undefined;
+
+  beforeEach(() => vi.clearAllMocks());
+
+  afterEach(async () => {
+    if (root) await act(async () => root?.unmount());
+    host?.remove();
+    vi.unstubAllGlobals();
+  });
+
+  test("server stats requests a bounded album response", async () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal("matchMedia", (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => undefined,
+      removeListener: () => undefined,
+      addEventListener: () => undefined,
+      removeEventListener: () => undefined,
+      dispatchEvent: () => false,
+    }));
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+
+    await act(async () =>
+      root?.render(
+        createElement(
+          MantineProvider,
+          null,
+          createElement(ImmichServerStatsWidget, {
+            integrationIds: ["immich-id"],
+            options: { showUsers: true, showPhotos: true, showVideos: true, showStorage: true },
+            displayMode: "advanced",
+            width: 800,
+            height: 600,
+            isEditMode: false,
+            boardId: "board-id",
+            itemId: "item-id",
+            setOptions: vi.fn(),
+          } satisfies WidgetComponentProps<"immich-serverStats">),
+        ),
+      ),
+    );
+
+    expect(mocks.getAlbums).toHaveBeenCalledWith(
+      { integrationId: "immich-id", limit: 50 },
+      expect.objectContaining({ enabled: true }),
+    );
+  });
+
+  test("album carousel keeps requesting every album for its selector", () => {
+    const options = albumCarouselDefinition.createOptions();
+
+    options.albumId.useOptions(["immich-id"]);
+
+    expect(mocks.getAlbums).toHaveBeenCalledWith(
+      { integrationId: "immich-id" },
+      expect.objectContaining({ enabled: true }),
+    );
+  });
+});
diff --git a/packages/widgets/src/immich/server-stats/component.module.css b/packages/widgets/src/immich/server-stats/component.module.css
index b16fdb597..6ef6260c4 100644
--- a/packages/widgets/src/immich/server-stats/component.module.css
+++ b/packages/widgets/src/immich/server-stats/component.module.css
@@ -2,9 +2,12 @@
   padding: 12px;
   border-radius: var(--mantine-radius-md);
   background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-  transition: all 0.2s ease;
-
-  &:hover {
-    background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
-  }
+}
+
+.statItemDense {
+  min-width: 0;
+  min-height: 44px;
+  padding: 4px 6px;
+  border-radius: var(--mantine-radius-sm);
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
 }
diff --git a/packages/widgets/src/immich/server-stats/component.tsx b/packages/widgets/src/immich/server-stats/component.tsx
index 3b82499f7..8f58fb108 100644
--- a/packages/widgets/src/immich/server-stats/component.tsx
+++ b/packages/widgets/src/immich/server-stats/component.tsx
@@ -1,45 +1,80 @@
 "use client";
 
 import React from "react";
-import { Group, Stack, Text } from "@mantine/core";
+import { Box, Center, Group, Progress, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 import { IconDatabase, IconPhoto, IconUsers, IconVideo } from "@tabler/icons-react";
+import { getQueryKey } from "@trpc/react-query";
 
 import { clientApi } from "@homarr/api/client";
 import { formatBytes } from "@homarr/common";
-import { useI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
 import type { WidgetComponentProps } from "../../definition";
+import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "../../common/query-state";
+import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "../../common/query-state-indicator";
+import { useWidgetRuntimeQueries } from "../../runtime-hooks";
 import classes from "./component.module.css";
 
+const MAX_ADVANCED_ALBUMS = 50;
+
 export default function ImmichServerStatsWidget({
   integrationIds,
   options,
+  displayMode = "compact",
+  width,
+  height,
+  widgetRuntimeRef,
 }: WidgetComponentProps<"immich-serverStats">) {
   const t = useI18n();
-  const { data: stats } = clientApi.widget.immich.getServerStats.useQuery({
-    integrationId: integrationIds[0] ?? "",
+  const locale = useCurrentIntlLocale();
+  const input = { integrationId: integrationIds[0] ?? "" };
+  const albumsInput = { ...input, limit: MAX_ADVANCED_ALBUMS };
+  const isAdvanced = displayMode === "advanced";
+  const albumsEnabled = isAdvanced && integrationIds.length > 0;
+  const statsQuery = clientApi.widget.immich.getServerStats.useQuery(input);
+  const stats = getUsableWidgetQueryData(statsQuery);
+  const albumsQuery = clientApi.widget.immich.getAlbums.useQuery(albumsInput, {
+    enabled: albumsEnabled,
+    staleTime: 15 * 60 * 1000,
   });
+  const albums = albumsQuery.data ?? [];
+  useWidgetRuntimeQueries(widgetRuntimeRef, [
+    getQueryKey(clientApi.widget.immich.getServerStats, input, "query"),
+    ...(albumsEnabled ? [getQueryKey(clientApi.widget.immich.getAlbums, albumsInput, "query")] : []),
+  ]);
 
+  if (isInitialWidgetQueryPending(statsQuery)) return <WidgetQueryLoadingState />;
   if (!stats) return <WidgetEmptyState />;
 
-  return (
-    <Stack gap="md" h="100%" p="md">
+  const statCount =
+    Number(options.showUsers) + Number(options.showPhotos) + Number(options.showVideos) + Number(options.showStorage);
+  const statsLayout = getImmichStatsLayout(width, height, statCount, isAdvanced);
+
+  const statsContent = (
+    <SimpleGrid cols={statsLayout.columns} spacing={statsLayout.dense ? 4 : "sm"}>
       {options.showUsers && (
-        <StatItem icon={<IconUsers size={20} />} label={t("widget.immich-serverStats.users")} value={stats.userCount} />
+        <StatItem
+          icon={<IconUsers size={20} />}
+          label={t("widget.immich-serverStats.users")}
+          value={stats.userCount.toLocaleString(locale)}
+          dense={statsLayout.dense}
+        />
       )}
       {options.showPhotos && (
         <StatItem
           icon={<IconPhoto size={20} />}
           label={t("widget.immich-serverStats.photos")}
-          value={stats.photoCount}
+          value={stats.photoCount.toLocaleString(locale)}
+          dense={statsLayout.dense}
         />
       )}
       {options.showVideos && (
         <StatItem
           icon={<IconVideo size={20} />}
           label={t("widget.immich-serverStats.videos")}
-          value={stats.videoCount}
+          value={stats.videoCount.toLocaleString(locale)}
+          dense={statsLayout.dense}
         />
       )}
       {options.showStorage && (
@@ -47,8 +82,66 @@ export default function ImmichServerStatsWidget({
           icon={<IconDatabase size={20} />}
           label={t("widget.immich-serverStats.storage")}
           value={formatBytes(stats.totalLibraryUsageInBytes)}
+          dense={statsLayout.dense}
         />
       )}
+    </SimpleGrid>
+  );
+
+  if (!isAdvanced) {
+    return (
+      <Stack gap="md" h="100%" p={statsLayout.dense ? "xs" : "md"} justify="center" pos="relative">
+        {statsContent}
+        {statsQuery.error && (
+          <Box pos="absolute" top={4} right={4}>
+            <WidgetQueryErrorIndicator error={statsQuery.error} label={t("widget.immich-serverStats.name")} />
+          </Box>
+        )}
+      </Stack>
+    );
+  }
+
+  const sortedAlbums = albums;
+  const maxAssets = sortedAlbums[0]?.assetCount ?? 1;
+  return (
+    <Stack gap="lg" h="100%" p="lg">
+      {statsContent}
+      <Group justify="space-between" wrap="nowrap">
+        <Text size="xs" c="dimmed">
+          {t("widget.immich-serverStats.albumLimit", { count: MAX_ADVANCED_ALBUMS })}
+        </Text>
+        <WidgetQueryErrorIndicator
+          error={statsQuery.error ?? albumsQuery.error}
+          label={t("widget.immich-serverStats.name")}
+        />
+      </Group>
+      <ScrollArea style={{ flex: 1, minHeight: 0 }}>
+        {isInitialWidgetQueryPending(albumsQuery) ? (
+          <WidgetQueryLoadingState />
+        ) : albumsQuery.error && albumsQuery.data === undefined ? (
+          <Center h="100%" p="md">
+            <WidgetQueryErrorIndicator error={albumsQuery.error} label={t("widget.immich-serverStats.name")} />
+          </Center>
+        ) : albums.length === 0 ? (
+          <WidgetEmptyState />
+        ) : (
+          <SimpleGrid cols={width >= 900 ? 2 : 1} spacing="xs">
+            {sortedAlbums.map((album) => (
+              <Stack key={album.id} gap={4} p="xs">
+                <Group justify="space-between" wrap="nowrap">
+                  <Text size="sm" fw={600} truncate>
+                    {album.albumName}
+                  </Text>
+                  <Text size="xs" c="dimmed">
+                    {album.assetCount.toLocaleString(locale)}
+                  </Text>
+                </Group>
+                <Progress value={(album.assetCount / Math.max(maxAssets, 1)) * 100} size="sm" />
+              </Stack>
+            ))}
+          </SimpleGrid>
+        )}
+      </ScrollArea>
     </Stack>
   );
 }
@@ -57,20 +150,46 @@ interface StatItemProps {
   icon: React.ReactNode;
   label: string;
   value: string | number;
+  dense: boolean;
 }
 
-function StatItem({ icon, label, value }: StatItemProps) {
+function StatItem({ icon, label, value, dense }: StatItemProps) {
+  if (dense) {
+    return (
+      <Stack gap={1} align="center" justify="center" className={classes.statItemDense} title={`${label}: ${value}`}>
+        <Text size="sm" fw={700} truncate="end" w="100%" ta="center">
+          {value}
+        </Text>
+        <Text size="xs" c="dimmed" truncate="end" w="100%" ta="center">
+          {label}
+        </Text>
+      </Stack>
+    );
+  }
+
   return (
     <Group justify="space-between" align="center" className={classes.statItem}>
-      <Group gap="sm" align="center">
+      <Group gap="sm" align="center" wrap="nowrap" miw={0}>
         {icon}
-        <Text size="sm" fw={500}>
+        <Text size="sm" fw={500} truncate="end">
           {label}
         </Text>
       </Group>
-      <Text size="sm" fw={700} c="var(--mantine-primary-color)">
+      <Text size="sm" fw={700} c="var(--mantine-primary-color)" truncate="end" title={String(value)}>
         {value}
       </Text>
     </Group>
   );
 }
+
+export const getImmichStatsLayout = (width: number, height: number, itemCount: number, isAdvanced = false) => {
+  const count = Math.max(1, itemCount);
+  if (isAdvanced) {
+    return { columns: width >= 720 ? Math.min(count, 4) : width >= 360 ? Math.min(count, 2) : 1, dense: false };
+  }
+
+  const dense = width < 320 || height < 160;
+  if (height < 140) return { columns: Math.min(count, width >= 360 ? 4 : 2), dense: true };
+  if (height < 220) return { columns: Math.min(count, 2), dense: true };
+  return { columns: Math.min(count, width >= 280 ? 2 : 1), dense };
+};
diff --git a/packages/widgets/src/immich/server-stats/index.ts b/packages/widgets/src/immich/server-stats/index.ts
index ed4e05a20..a1c966664 100644
--- a/packages/widgets/src/immich/server-stats/index.ts
+++ b/packages/widgets/src/immich/server-stats/index.ts
@@ -1,14 +1,16 @@
 import { IconGraphFilled } from "@tabler/icons-react";
 
-import { createWidgetDefinition } from "../../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery } from "../../definition";
 import { optionsBuilder } from "../../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("immich-serverStats", {
   icon: IconGraphFilled,
-  queryKey: [["widget", "immich"]],
+  queryKeys: [[["widget", "immich", "getServerStats"]], [["widget", "immich", "getAlbums"]]],
+  queryMatcher: matchesWidgetRuntimeQuery,
   refetchInterval: null,
   supportedIntegrations: ["immich"],
   integrationsRequired: true,
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showUsers: factory.switch({
diff --git a/packages/widgets/src/immich/server-stats/layout.spec.ts b/packages/widgets/src/immich/server-stats/layout.spec.ts
new file mode 100644
index 000000000..7640bda4b
--- /dev/null
+++ b/packages/widgets/src/immich/server-stats/layout.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, test } from "vitest";
+
+import { getImmichStatsLayout } from "./component";
+
+describe("Immich server statistics compact layout", () => {
+  test("keeps four enabled stats legible in a short widget", () => {
+    expect(getImmichStatsLayout(280, 120, 4)).toEqual({ columns: 2, dense: true });
+    expect(getImmichStatsLayout(480, 120, 4)).toEqual({ columns: 4, dense: true });
+  });
+
+  test("uses the roomier summary layout when space is available", () => {
+    expect(getImmichStatsLayout(360, 240, 4)).toEqual({ columns: 2, dense: false });
+    expect(getImmichStatsLayout(200, 180, 4)).toEqual({ columns: 2, dense: true });
+  });
+});
diff --git a/packages/widgets/src/index.tsx b/packages/widgets/src/index.tsx
index 6b7e7dad3..8f56ee80c 100644
--- a/packages/widgets/src/index.tsx
+++ b/packages/widgets/src/index.tsx
@@ -67,10 +67,24 @@ import * as customApi from "./custom-api";
 import * as assistant from "./assistant";
 
 export type {
+  NormalizedWidgetQuery,
   WidgetDefinition,
   WidgetContextMenuAction,
   WidgetContextActionProps,
   WidgetOptionsSettings,
+  WidgetQueryMatcher,
+  WidgetQueryMatcherScope,
+  WidgetRuntimeActions,
+  WidgetRuntimeRef,
+  WidgetRuntimeState,
+} from "./definition";
+export {
+  createWidgetRuntimeState,
+  getWidgetQueryKeys,
+  getWidgetRuntimeQueries,
+  normalizeWidgetQuery,
+  supportsAdvancedFocus,
+  widgetQueryValueEquals,
 } from "./definition";
 export type { WidgetComponentProps };
 export type { WidgetOptionDefinition, WidgetOptionType } from "./options";
diff --git a/packages/widgets/src/indexer-manager/component.module.css b/packages/widgets/src/indexer-manager/component.module.css
index 1ab18a656..a2ffdd407 100644
--- a/packages/widgets/src/indexer-manager/component.module.css
+++ b/packages/widgets/src/indexer-manager/component.module.css
@@ -5,3 +5,57 @@
 [data-mantine-color-scheme="dark"] .card {
   background-color: var(--mantine-color-dark-7);
 }
+
+.root {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.testAction {
+  margin-inline-start: auto;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.root:hover .testAction,
+.root:focus-within .testAction {
+  opacity: 1;
+}
+
+.indexerRow {
+  min-height: 24px;
+  padding: 2px 4px;
+  border-radius: var(--mantine-radius-xs);
+
+  &:hover,
+  &:focus-within {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+.indexerLink {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  min-width: 0;
+  flex: 1;
+}
+
+@media (any-pointer: coarse) {
+  .testAction {
+    opacity: 1;
+  }
+
+  .indexerRow {
+    min-height: 44px;
+    padding-block: 8px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .testAction {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/indexer-manager/component.tsx b/packages/widgets/src/indexer-manager/component.tsx
index 4e3fb7c7e..54758dfe3 100644
--- a/packages/widgets/src/indexer-manager/component.tsx
+++ b/packages/widgets/src/indexer-manager/component.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { ActionIcon, Anchor, Button, Card, Flex, Group, ScrollArea, Stack, Text } from "@mantine/core";
+import { useMemo } from "react";
+import { ActionIcon, Anchor, Badge, Card, Flex, Group, ScrollArea, Stack, Text, Tooltip } from "@mantine/core";
 import { IconCircleCheck, IconCircleX, IconReportSearch, IconTestPipe } from "@tabler/icons-react";
 import combineClasses from "clsx";
 
@@ -9,6 +10,10 @@ import { useRequiredBoard } from "@homarr/boards/context";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { useWidgetRuntimeActions } from "../runtime-hooks";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { getUsableWidgetQueryData } from "../common/query-state";
+import actionTargetClasses from "../common/action-target.module.css";
 import classes from "./component.module.css";
 
 export default function IndexerManagerWidget({
@@ -16,9 +21,12 @@ export default function IndexerManagerWidget({
   integrationIds,
   width,
   height,
+  isEditMode,
+  widgetRuntimeRef,
 }: WidgetComponentProps<"indexerManager">) {
   const t = useI18n();
-  const { data: indexersData = [] } = clientApi.widget.indexerManager.getIndexersStatus.useQuery({ integrationIds });
+  const indexersData =
+    getUsableWidgetQueryData(clientApi.widget.indexerManager.getIndexersStatus.useQuery({ integrationIds })) ?? [];
 
   const utils = clientApi.useUtils();
   const { mutate: testAll, isPending } = clientApi.widget.indexerManager.testAllIndexers.useMutation({
@@ -26,98 +34,135 @@ export default function IndexerManagerWidget({
   });
   const board = useRequiredBoard();
   const hasSmallWidth = width < 256;
-  const hasSmallHeight = height < 256;
+  const isDense = width < 280 || height < 180;
+  const showHealthCounts = width >= 200 && height >= 100;
+  const allIndexers = useMemo(() => indexersData.flatMap((entry) => entry.indexers), [indexersData]);
+  const unavailableCount = allIndexers.filter(
+    (indexer) => indexer.status === false || indexer.enabled === false,
+  ).length;
+
+  useWidgetRuntimeActions(widgetRuntimeRef, { testAllIndexers: () => testAll({ integrationIds }) });
 
   return (
-    <Flex className="indexer-manager-container" h="100%" direction="column" gap="sm" p="sm" align="center">
-      <Group className="indexer-manager-title" align="center" gap="xs" wrap="nowrap">
-        <IconReportSearch
-          className="indexer-manager-title-icon"
-          size={hasSmallWidth ? 16 : 20}
-          style={{ minWidth: hasSmallWidth ? 16 : 20 }}
-        />
-        <Text size={hasSmallWidth ? "xs" : "md"} fw="bold">
-          {t("widget.indexerManager.title")}
-        </Text>
-        {hasSmallHeight && (
+    <Flex
+      className={`indexer-manager-container ${classes.root}`}
+      h="100%"
+      direction="column"
+      gap={isDense ? 4 : "xs"}
+      p={isDense ? "xs" : "sm"}
+    >
+      <Group className="indexer-manager-title" align="center" gap="xs" wrap="nowrap" w="100%">
+        <Tooltip label={t("widget.indexerManager.title")} disabled={!hasSmallWidth}>
+          <IconReportSearch
+            className="indexer-manager-title-icon"
+            size={hasSmallWidth ? 16 : 20}
+            style={{ minWidth: hasSmallWidth ? 16 : 20 }}
+          />
+        </Tooltip>
+        {!hasSmallWidth && (
+          <Text size={isDense ? "xs" : "sm"} fw={600} truncate="end">
+            {t("widget.indexerManager.title")}
+          </Text>
+        )}
+        {showHealthCounts && (
+          <Group gap={4} wrap="nowrap">
+            <Badge size="xs" color="green" variant="light">
+              {allIndexers.length - unavailableCount}
+            </Badge>
+            {unavailableCount > 0 && (
+              <Badge size="xs" color="red" variant="light">
+                {unavailableCount}
+              </Badge>
+            )}
+          </Group>
+        )}
+        <Tooltip label={t("widget.indexerManager.testAll")}>
           <ActionIcon
-            className="indexer-manager-test-action-icon"
+            className={combineClasses("indexer-manager-test-action-icon", classes.testAction, actionTargetClasses.root)}
             size="sm"
             radius={board.itemRadius}
             variant="light"
             loading={isPending}
+            disabled={isEditMode}
             loaderProps={{ type: "dots" }}
             onClick={() => {
               testAll({ integrationIds });
             }}
+            aria-label={t("widget.indexerManager.testAll")}
           >
-            <IconTestPipe size={12} />
+            <IconTestPipe size={14} />
           </ActionIcon>
-        )}
+        </Tooltip>
       </Group>
       <Card
         className={combineClasses("indexer-manager-list-container", classes.card)}
         w="100%"
-        p="xs"
+        p={isDense ? 4 : "xs"}
         radius={board.itemRadius}
         flex={1}
       >
         <ScrollArea className="indexer-manager-list-scroll-area" h="100%" scrollbars="y">
-          {indexersData.map(({ integrationId, indexers }) => (
+          {indexersData.map(({ integrationId, integrationName, indexers, error }) => (
             <Stack gap={4} className={`indexer-manager-${integrationId}-list-container`} p={0} key={integrationId}>
-              {indexers.map((indexer) => (
-                <Group
-                  className={`indexer-manager-line indexer-manager-${indexer.name}`}
-                  key={indexer.id}
-                  justify="space-between"
-                  gap="xs"
-                  wrap="nowrap"
-                >
-                  <Anchor
-                    className="indexer-manager-line-anchor"
-                    href={indexer.url}
-                    target={options.openIndexerSiteInNewTab ? "_blank" : "_self"}
-                  >
-                    <Text className="indexer-manager-line-anchor-text" c="dimmed" size={hasSmallWidth ? "xs" : "sm"}>
-                      {indexer.name}
-                    </Text>
-                  </Anchor>
-                  {indexer.status === false || indexer.enabled === false ? (
-                    <IconCircleX
-                      className="indexer-manager-line-status-icon indexer-manager-line-icon-disabled"
-                      color="#d9534f"
-                      size={hasSmallWidth ? 12 : 16}
-                    />
-                  ) : (
-                    <IconCircleCheck
-                      className="indexer-manager-line-status-icon indexer-manager-line-icon-enabled"
-                      color="#2ecc71"
-                      size={hasSmallWidth ? 12 : 16}
-                    />
+              {indexersData.length > 1 && (
+                <Group justify="space-between" wrap="nowrap" py={4}>
+                  <Text size="xs" fw={600} truncate="end">
+                    {integrationName}
+                  </Text>
+                  {error && (
+                    <Badge size="xs" color="red" variant="light">
+                      {t("common.error")}
+                    </Badge>
                   )}
                 </Group>
-              ))}
+              )}
+              {indexers.map((indexer) => {
+                const href = getSafeApplicationUrl(indexer.url);
+                return (
+                  <Group
+                    className={`indexer-manager-line indexer-manager-${indexer.name} ${classes.indexerRow}`}
+                    key={indexer.id}
+                    justify="space-between"
+                    gap="xs"
+                    wrap="nowrap"
+                  >
+                    <Anchor
+                      className={combineClasses("indexer-manager-line-anchor", classes.indexerLink)}
+                      component={href ? "a" : "span"}
+                      href={href}
+                      target={href ? (options.openIndexerSiteInNewTab ? "_blank" : "_self") : undefined}
+                      rel={href && options.openIndexerSiteInNewTab ? SAFE_NEW_TAB_REL : undefined}
+                      title={href}
+                    >
+                      <Text
+                        className="indexer-manager-line-anchor-text"
+                        c="dimmed"
+                        size={hasSmallWidth ? "xs" : "sm"}
+                        truncate="end"
+                      >
+                        {indexer.name}
+                      </Text>
+                    </Anchor>
+                    {indexer.status === false || indexer.enabled === false ? (
+                      <IconCircleX
+                        className="indexer-manager-line-status-icon indexer-manager-line-icon-disabled"
+                        color="var(--mantine-color-red-6)"
+                        size={hasSmallWidth ? 12 : 16}
+                      />
+                    ) : (
+                      <IconCircleCheck
+                        className="indexer-manager-line-status-icon indexer-manager-line-icon-enabled"
+                        color="var(--mantine-color-green-6)"
+                        size={hasSmallWidth ? 12 : 16}
+                      />
+                    )}
+                  </Group>
+                );
+              })}
             </Stack>
           ))}
         </ScrollArea>
       </Card>
-      {!hasSmallHeight && (
-        <Button
-          className="indexer-manager-test-button"
-          w="100%"
-          size="xs"
-          radius={board.itemRadius}
-          variant="light"
-          leftSection={<IconTestPipe size={"1rem"} />}
-          loading={isPending}
-          loaderProps={{ type: "dots" }}
-          onClick={() => {
-            testAll({ integrationIds });
-          }}
-        >
-          {t("widget.indexerManager.testAll")}
-        </Button>
-      )}
     </Flex>
   );
 }
diff --git a/packages/widgets/src/indexer-manager/index.ts b/packages/widgets/src/indexer-manager/index.ts
index e515cd697..c61bd84c1 100644
--- a/packages/widgets/src/indexer-manager/index.ts
+++ b/packages/widgets/src/indexer-manager/index.ts
@@ -1,20 +1,36 @@
-import { IconReportSearch, IconServerOff } from "@tabler/icons-react";
+import { IconReportSearch, IconServerOff, IconTestPipe } from "@tabler/icons-react";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
+const createOptions = () =>
+  optionsBuilder.from((factory) => ({
+    openIndexerSiteInNewTab: factory.switch({
+      defaultValue: true,
+    }),
+  }));
+
 export const { definition, componentLoader } = createWidgetDefinition("indexerManager", {
+  supportsAdvancedFocus: false,
   icon: IconReportSearch,
+  contextActions: ({ widgetRuntimeRef, context }) => [
+    {
+      key: "test-all-indexers",
+      label: "widget.indexerManager.testAll",
+      icon: IconTestPipe,
+      disabled:
+        context.isEditMode ||
+        !context.canInteractWithSelectedIntegrations ||
+        typeof widgetRuntimeRef.current.actions.testAllIndexers !== "function",
+      onClick: () => {
+        widgetRuntimeRef.current.actions.testAllIndexers?.();
+      },
+    },
+  ],
   refetchInterval: null,
-  createOptions() {
-    return optionsBuilder.from((factory) => ({
-      openIndexerSiteInNewTab: factory.switch({
-        defaultValue: true,
-      }),
-    }));
-  },
+  createOptions,
   supportedIntegrations: getIntegrationKindsByCategory("indexerManager"),
   errors: {
     INTERNAL_SERVER_ERROR: {
diff --git a/packages/widgets/src/manifest.spec.ts b/packages/widgets/src/manifest.spec.ts
new file mode 100644
index 000000000..013f207d8
--- /dev/null
+++ b/packages/widgets/src/manifest.spec.ts
@@ -0,0 +1,153 @@
+import type { QueryKey } from "@tanstack/react-query";
+import { describe, expect, it } from "vitest";
+
+import { widgetIntegrationSupport, widgetKinds as definedWidgetKinds } from "@homarr/definitions";
+
+import {
+  createRetryableLoader,
+  loadAllWidgetDefinitions,
+  loadWidgetComponent,
+  loadWidgetDefinition,
+  loadWidgetModule,
+  loadWidgetResources,
+  reduceWidgetOptionsWithDefinition,
+  widgetKinds,
+} from "./manifest";
+import { widgetQueryRefetchIntervals } from "./refetch-intervals";
+import { widgetCatalogIcons } from "./catalog";
+import { getWidgetQueryKeys } from "./definition";
+
+describe("widget manifest promise stability", () => {
+  it("returns the same module promise for every render", () => {
+    expect(loadWidgetModule("clock")).toBe(loadWidgetModule("clock"));
+  });
+
+  it("returns the same derived definition promise for every render", () => {
+    expect(loadWidgetDefinition("clock")).toBe(loadWidgetDefinition("clock"));
+  });
+
+  it("returns stable component and combined resource promises", () => {
+    expect(loadWidgetComponent("clock")).toBe(loadWidgetComponent("clock"));
+    expect(loadWidgetResources("clock")).toBe(loadWidgetResources("clock"));
+  });
+
+  it("returns the same all-definitions promise for every modal render", () => {
+    expect(loadAllWidgetDefinitions()).toBe(loadAllWidgetDefinitions());
+  });
+
+  it("retries a failed loader instead of retaining its rejected promise", async () => {
+    let attempts = 0;
+    const loader = createRetryableLoader(
+      new Map([
+        [
+          "example",
+          () => {
+            attempts += 1;
+            if (attempts === 1) return Promise.reject(new Error("temporary failure"));
+            return Promise.resolve("loaded");
+          },
+        ],
+      ]),
+    );
+
+    await expect(loader("example")).rejects.toThrow("temporary failure");
+    await expect(loader("example")).resolves.toBe("loaded");
+    expect(attempts).toBe(2);
+  });
+
+  it("covers every declared widget kind", () => {
+    expect(new Set(widgetKinds)).toEqual(new Set(definedWidgetKinds));
+  });
+
+  it("loads matching definitions and component loaders for every widget", async () => {
+    const definitions = await loadAllWidgetDefinitions();
+
+    await Promise.all(
+      widgetKinds.map(async (kind) => {
+        const module = await loadWidgetModule(kind);
+        const canonicalComponent = await module.componentLoader();
+        const component = await loadWidgetComponent(kind);
+        const resources = await loadWidgetResources(kind);
+        expect(definitions.get(kind)).toBe(module.definition);
+        expect(component.default).toBe(canonicalComponent.default);
+        expect(component.default).toBeDefined();
+        expect(resources.definition).toBe(module.definition);
+        expect(resources.Component).toBe(component.default);
+      }),
+    );
+  }, 30_000);
+
+  it("preserves every widget option default", async () => {
+    const definitions = await loadAllWidgetDefinitions();
+    const settings = { enableStatusByDefault: true, forceDisableStatus: false };
+
+    for (const definition of definitions.values()) {
+      const options = definition.createOptions(settings);
+      const reduced = reduceWidgetOptionsWithDefinition(definition, settings);
+      expect(Object.keys(reduced)).toEqual(Object.keys(options));
+      expect(Object.values(reduced).every((value) => value !== undefined)).toBe(true);
+    }
+  });
+
+  it("keeps the lightweight integration support map aligned with widget definitions", async () => {
+    const definitions = await loadAllWidgetDefinitions();
+
+    for (const kind of widgetKinds) {
+      const definition = definitions.get(kind);
+      const supportedIntegrations =
+        definition && "supportedIntegrations" in definition ? (definition.supportedIntegrations ?? []) : [];
+      expect([...(widgetIntegrationSupport[kind] ?? [])].toSorted()).toEqual([...supportedIntegrations].toSorted());
+    }
+  });
+
+  it("keeps the lightweight catalog icons aligned with widget definitions", async () => {
+    const definitions = await loadAllWidgetDefinitions();
+
+    for (const kind of widgetKinds) {
+      expect(widgetCatalogIcons[kind]).toBe(definitions.get(kind)?.icon);
+    }
+  });
+
+  it("declares the real query prefix for widget kinds that share a router", async () => {
+    const definitions = await loadAllWidgetDefinitions();
+    const expectedQueryKeys = new Map([
+      ["anchorNote", [["widget", "anchorNotes"]]],
+      ["beszelAlerts", [["widget", "beszel", "getAlerts"]]],
+      ["clock", [["widget", "weather", "atLocation"]]],
+      ["mediaMissing", [["widget", "mediaOrganizer", "getData"]]],
+      ["mediaRequests-requestList", [["widget", "mediaRequests", "getLatestRequests"]]],
+      ["mediaRequests-requestStats", [["widget", "mediaRequests", "getStats"]]],
+      ["smartHome-entityState", [["widget", "smartHome"]]],
+    ] as const);
+
+    for (const [kind, queryKey] of expectedQueryKeys) {
+      expect(definitions.get(kind)?.queryKey).toEqual(queryKey);
+    }
+  });
+
+  it("keeps the client polling policy aligned with widget definitions", async () => {
+    const definitions = await loadAllWidgetDefinitions();
+    type PollingPolicy = { queryKey: QueryKey; intervalSeconds: number | null };
+    const expectedByQueryKey = new Map<string, PollingPolicy>();
+
+    for (const kind of widgetKinds) {
+      const definition = definitions.get(kind);
+      if (definition?.refetchInterval === undefined) continue;
+
+      for (const queryKey of getWidgetQueryKeys(definition, kind)) {
+        const path = queryKey[0];
+        if (!Array.isArray(path) || (path[0] !== "widget" && path[0] !== "docker")) continue;
+        const entry = { queryKey, intervalSeconds: definition.refetchInterval } as const;
+        const serializedQueryKey = JSON.stringify(entry.queryKey);
+        const existing = expectedByQueryKey.get(serializedQueryKey);
+        expect(existing?.intervalSeconds ?? entry.intervalSeconds).toBe(entry.intervalSeconds);
+        expectedByQueryKey.set(serializedQueryKey, entry);
+      }
+    }
+
+    const serializePolicy = (entry: PollingPolicy) => JSON.stringify(entry);
+    expect(widgetQueryRefetchIntervals.map(serializePolicy).toSorted()).toEqual(
+      [...expectedByQueryKey.values()].map(serializePolicy).toSorted(),
+    );
+  });
+});
diff --git a/packages/widgets/src/manifest.ts b/packages/widgets/src/manifest.ts
new file mode 100644
index 000000000..6ea3d14ea
--- /dev/null
+++ b/packages/widgets/src/manifest.ts
@@ -0,0 +1,231 @@
+import type { ComponentType } from "react";
+
+import { objectEntries } from "@homarr/common";
+import type { WidgetKind } from "@homarr/definitions";
+import type { SettingsContextProps } from "@homarr/settings/creator";
+
+import type { WidgetComponentProps, WidgetDefinition } from "./definition";
+import type { WidgetOptionDefinition } from "./options";
+
+type WidgetModule = {
+  definition: WidgetDefinition;
+  componentLoader: () => Promise<{ default: ComponentType<WidgetComponentProps<WidgetKind>> }>;
+};
+
+type WidgetComponentModule = {
+  default: ComponentType<WidgetComponentProps<WidgetKind>>;
+};
+
+export type WidgetResources = {
+  definition: WidgetDefinition;
+  Component: ComponentType<WidgetComponentProps<WidgetKind>>;
+};
+
+const moduleLoaders: Record<WidgetKind, () => Promise<WidgetModule>> = {
+  clock: () => import("./clock") as Promise<WidgetModule>,
+  weather: () => import("./weather") as Promise<WidgetModule>,
+  app: () => import("./app") as Promise<WidgetModule>,
+  assistant: () => import("./assistant") as Promise<WidgetModule>,
+  archiveTeamWarrior: () => import("./archive-team-warrior") as Promise<WidgetModule>,
+  anchorNote: () => import("./anchor-note") as Promise<WidgetModule>,
+  notebook: () => import("./notebook") as Promise<WidgetModule>,
+  iframe: () => import("./iframe") as Promise<WidgetModule>,
+  video: () => import("./video") as Promise<WidgetModule>,
+  dnsHoleSummary: () => import("./dns-hole/summary") as Promise<WidgetModule>,
+  dnsHoleControls: () => import("./dns-hole/controls") as Promise<WidgetModule>,
+  "smartHome-entityState": () => import("./smart-home/entity-state") as Promise<WidgetModule>,
+  "smartHome-executeAutomation": () => import("./smart-home/execute-automation") as Promise<WidgetModule>,
+  stockPrice: () => import("./stocks") as Promise<WidgetModule>,
+  mediaServer: () => import("./media-server") as Promise<WidgetModule>,
+  calendar: () => import("./calendar") as Promise<WidgetModule>,
+  downloads: () => import("./downloads") as Promise<WidgetModule>,
+  "mediaRequests-requestList": () => import("./media-requests/list") as Promise<WidgetModule>,
+  "mediaRequests-requestStats": () => import("./media-requests/stats") as Promise<WidgetModule>,
+  mediaMissing: () => import("./media-missing") as Promise<WidgetModule>,
+  networkControllerSummary: () => import("./network-controller/summary") as Promise<WidgetModule>,
+  networkControllerStatus: () => import("./network-controller/network-status") as Promise<WidgetModule>,
+  rssFeed: () => import("./rssFeed") as Promise<WidgetModule>,
+  bookmarks: () => import("./bookmarks") as Promise<WidgetModule>,
+  bazarr: () => import("./bazarr") as Promise<WidgetModule>,
+  indexerManager: () => import("./indexer-manager") as Promise<WidgetModule>,
+  healthMonitoring: () => import("./health-monitoring") as Promise<WidgetModule>,
+  mediaTranscoding: () => import("./media-transcoding") as Promise<WidgetModule>,
+  minecraftServerStatus: () => import("./minecraft/server-status") as Promise<WidgetModule>,
+  dockerContainers: () => import("./docker") as Promise<WidgetModule>,
+  releases: () => import("./releases") as Promise<WidgetModule>,
+  firewall: () => import("./firewall") as Promise<WidgetModule>,
+  notifications: () => import("./notifications") as Promise<WidgetModule>,
+  mediaReleases: () => import("./media-releases") as Promise<WidgetModule>,
+  systemResources: () => import("./system-resources") as Promise<WidgetModule>,
+  coolify: () => import("./coolify") as Promise<WidgetModule>,
+  systemDisks: () => import("./system-disks") as Promise<WidgetModule>,
+  timetable: () => import("./timetable") as Promise<WidgetModule>,
+  "immich-serverStats": () => import("./immich/server-stats") as Promise<WidgetModule>,
+  "immich-albumCarousel": () => import("./immich/album-carousel") as Promise<WidgetModule>,
+  paperlessNgx: () => import("./paperless-ngx") as Promise<WidgetModule>,
+  patchmon: () => import("./patchmon") as Promise<WidgetModule>,
+  tracearr: () => import("./tracearr") as Promise<WidgetModule>,
+  speedtestTracker: () => import("./speedtest-tracker") as Promise<WidgetModule>,
+  uptimeKuma: () => import("./uptime-kuma") as Promise<WidgetModule>,
+  audioStats: () => import("./audio-stats") as Promise<WidgetModule>,
+  umami: () => import("./umami") as Promise<WidgetModule>,
+  vpn: () => import("./vpn") as Promise<WidgetModule>,
+  ups: () => import("./ups") as Promise<WidgetModule>,
+  beszelSystemTable: () => import("./beszel-system-table") as Promise<WidgetModule>,
+  beszelSystemGrid: () => import("./beszel-system-grid") as Promise<WidgetModule>,
+  beszelAlerts: () => import("./beszel-alerts") as Promise<WidgetModule>,
+  beszelSystemStats: () => import("./beszel-system-stats") as Promise<WidgetModule>,
+  traefik: () => import("./traefik") as Promise<WidgetModule>,
+  customApi: () => import("./custom-api") as Promise<WidgetModule>,
+};
+
+// Keep these imports explicit so Turbopack can create one discoverable chunk per
+// widget implementation. Loading this registry does not load the implementations.
+const componentLoaders: Record<WidgetKind, () => Promise<WidgetComponentModule>> = {
+  clock: () => import("./clock/component") as Promise<WidgetComponentModule>,
+  weather: () => import("./weather/component") as Promise<WidgetComponentModule>,
+  app: () => import("./app/component") as Promise<WidgetComponentModule>,
+  assistant: () => import("./assistant/component") as Promise<WidgetComponentModule>,
+  archiveTeamWarrior: () => import("./archive-team-warrior/component") as Promise<WidgetComponentModule>,
+  anchorNote: () => import("./anchor-note/component") as Promise<WidgetComponentModule>,
+  notebook: () => import("./notebook/component") as Promise<WidgetComponentModule>,
+  iframe: () => import("./iframe/component") as Promise<WidgetComponentModule>,
+  video: () => import("./video/component") as Promise<WidgetComponentModule>,
+  dnsHoleSummary: () => import("./dns-hole/summary/component") as Promise<WidgetComponentModule>,
+  dnsHoleControls: () => import("./dns-hole/controls/component") as Promise<WidgetComponentModule>,
+  "smartHome-entityState": () => import("./smart-home/entity-state/component") as Promise<WidgetComponentModule>,
+  "smartHome-executeAutomation": () =>
+    import("./smart-home/execute-automation/component") as Promise<WidgetComponentModule>,
+  stockPrice: () => import("./stocks/component") as Promise<WidgetComponentModule>,
+  mediaServer: () => import("./media-server/component") as Promise<WidgetComponentModule>,
+  calendar: () => import("./calendar/component") as Promise<WidgetComponentModule>,
+  downloads: () => import("./downloads/component") as Promise<WidgetComponentModule>,
+  "mediaRequests-requestList": () => import("./media-requests/list/component") as Promise<WidgetComponentModule>,
+  "mediaRequests-requestStats": () => import("./media-requests/stats/component") as Promise<WidgetComponentModule>,
+  mediaMissing: () => import("./media-missing/component") as Promise<WidgetComponentModule>,
+  networkControllerSummary: () => import("./network-controller/summary/component") as Promise<WidgetComponentModule>,
+  networkControllerStatus: () =>
+    import("./network-controller/network-status/component") as Promise<WidgetComponentModule>,
+  rssFeed: () => import("./rssFeed/component") as Promise<WidgetComponentModule>,
+  bookmarks: () => import("./bookmarks/component") as Promise<WidgetComponentModule>,
+  bazarr: () => import("./bazarr/component") as Promise<WidgetComponentModule>,
+  indexerManager: () => import("./indexer-manager/component") as Promise<WidgetComponentModule>,
+  healthMonitoring: () => import("./health-monitoring/component") as Promise<WidgetComponentModule>,
+  mediaTranscoding: () => import("./media-transcoding/component") as Promise<WidgetComponentModule>,
+  minecraftServerStatus: () => import("./minecraft/server-status/component") as Promise<WidgetComponentModule>,
+  dockerContainers: () => import("./docker/component") as Promise<WidgetComponentModule>,
+  releases: () => import("./releases/component") as Promise<WidgetComponentModule>,
+  firewall: () => import("./firewall/component") as Promise<WidgetComponentModule>,
+  notifications: () => import("./notifications/component") as Promise<WidgetComponentModule>,
+  mediaReleases: () => import("./media-releases/component") as Promise<WidgetComponentModule>,
+  systemResources: () => import("./system-resources/component") as Promise<WidgetComponentModule>,
+  coolify: () => import("./coolify/component") as Promise<WidgetComponentModule>,
+  systemDisks: () => import("./system-disks/component") as Promise<WidgetComponentModule>,
+  timetable: () => import("./timetable/component") as Promise<WidgetComponentModule>,
+  "immich-serverStats": () => import("./immich/server-stats/component") as Promise<WidgetComponentModule>,
+  "immich-albumCarousel": () => import("./immich/album-carousel/component") as Promise<WidgetComponentModule>,
+  paperlessNgx: () => import("./paperless-ngx/component") as Promise<WidgetComponentModule>,
+  patchmon: () => import("./patchmon/component") as Promise<WidgetComponentModule>,
+  tracearr: () => import("./tracearr/component") as Promise<WidgetComponentModule>,
+  speedtestTracker: () => import("./speedtest-tracker/component") as Promise<WidgetComponentModule>,
+  uptimeKuma: () => import("./uptime-kuma/component") as Promise<WidgetComponentModule>,
+  audioStats: () => import("./audio-stats/component") as Promise<WidgetComponentModule>,
+  umami: () => import("./umami/component") as Promise<WidgetComponentModule>,
+  vpn: () => import("./vpn/component") as Promise<WidgetComponentModule>,
+  ups: () => import("./ups/component") as Promise<WidgetComponentModule>,
+  beszelSystemTable: () => import("./beszel-system-table/component") as Promise<WidgetComponentModule>,
+  beszelSystemGrid: () => import("./beszel-system-grid/component") as Promise<WidgetComponentModule>,
+  beszelAlerts: () => import("./beszel-alerts/component") as Promise<WidgetComponentModule>,
+  beszelSystemStats: () => import("./beszel-system-stats/component") as Promise<WidgetComponentModule>,
+  traefik: () => import("./traefik/component") as Promise<WidgetComponentModule>,
+  customApi: () => import("./custom-api/component") as Promise<WidgetComponentModule>,
+};
+
+const definitionPromises = new Map<WidgetKind, Promise<WidgetDefinition>>();
+
+export const widgetKinds = Object.keys(moduleLoaders) as WidgetKind[];
+
+export const createRetryableLoader = <TKey, TValue>(loaders: ReadonlyMap<TKey, () => Promise<TValue>>) => {
+  const promises = new Map<TKey, Promise<TValue>>();
+
+  return (key: TKey) => {
+    const existing = promises.get(key);
+    if (existing) return existing;
+
+    const loader = loaders.get(key);
+    if (!loader) throw new Error(`No loader is registered for ${String(key)}`);
+
+    const promise = loader();
+    promises.set(key, promise);
+    void promise.catch(() => {
+      if (promises.get(key) === promise) promises.delete(key);
+    });
+    return promise;
+  };
+};
+
+export const loadWidgetModule = createRetryableLoader(
+  new Map(Object.entries(moduleLoaders) as [WidgetKind, () => Promise<WidgetModule>][]),
+);
+
+export const loadWidgetComponent = createRetryableLoader(
+  new Map(Object.entries(componentLoaders) as [WidgetKind, () => Promise<WidgetComponentModule>][]),
+);
+
+export const loadWidgetResources = createRetryableLoader(
+  new Map(
+    (Object.keys(moduleLoaders) as WidgetKind[]).map((kind) => [
+      kind,
+      async () => {
+        const [{ definition }, { default: Component }] = await Promise.all([
+          loadWidgetModule(kind),
+          loadWidgetComponent(kind),
+        ]);
+        return { definition, Component } satisfies WidgetResources;
+      },
+    ]),
+  ),
+);
+
+export const loadWidgetDefinition = (kind: WidgetKind) => {
+  const existing = definitionPromises.get(kind);
+  if (existing) return existing;
+
+  const promise = loadWidgetModule(kind).then(({ definition }) => definition);
+  definitionPromises.set(kind, promise);
+  void promise.catch(() => {
+    if (definitionPromises.get(kind) === promise) definitionPromises.delete(kind);
+  });
+  return promise;
+};
+
+let allWidgetDefinitionsPromise: Promise<Map<WidgetKind, WidgetDefinition>> | undefined;
+
+export const loadAllWidgetDefinitions = () => {
+  if (allWidgetDefinitionsPromise) return allWidgetDefinitionsPromise;
+
+  const promise = Promise.all(widgetKinds.map(async (kind) => [kind, await loadWidgetDefinition(kind)] as const)).then(
+    (entries) => new Map(entries),
+  );
+  allWidgetDefinitionsPromise = promise;
+  void promise.catch(() => {
+    if (allWidgetDefinitionsPromise === promise) allWidgetDefinitionsPromise = undefined;
+  });
+
+  return promise;
+};
+
+export const reduceWidgetOptionsWithDefinition = (
+  definition: WidgetDefinition,
+  settings: Pick<SettingsContextProps, "enableStatusByDefault" | "forceDisableStatus">,
+  currentValue: Record<string, unknown> = {},
+) => {
+  const options = definition.createOptions(settings) as Record<string, WidgetOptionDefinition>;
+  return objectEntries(options).reduce(
+    (prev, [key, value]) => ({
+      ...prev,
+      [key]: currentValue[key] ?? value.defaultValue,
+    }),
+    {} as Record<string, unknown>,
+  );
+};
diff --git a/packages/widgets/src/media-missing/component.module.css b/packages/widgets/src/media-missing/component.module.css
index 5b1c9f568..9068a25b3 100644
--- a/packages/widgets/src/media-missing/component.module.css
+++ b/packages/widgets/src/media-missing/component.module.css
@@ -5,10 +5,10 @@
   text-decoration: none;
   color: inherit;
   border: 1px solid var(--border-color);
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
   transition:
     border-color 120ms ease,
-    transform 120ms ease,
-    box-shadow 120ms ease;
+    background-color 120ms ease;
 
   @mixin dark {
     --border-color: var(--mantine-color-dark-4);
@@ -17,22 +17,16 @@
     --border-color: var(--mantine-color-gray-3);
   }
 
-  &:hover {
+  &:hover,
+  &:focus-visible {
     border-color: var(--mantine-primary-color-filled);
-    transform: translateY(-1px);
-    box-shadow: var(--mantine-shadow-sm);
+    background-color: var(--mantine-color-default-hover);
   }
-}
 
-.backdrop {
-  position: absolute;
-  inset: 0;
-  background-size: cover;
-  background-position: center;
-  filter: blur(20px) saturate(1.2);
-  transform: scale(1.3);
-  opacity: 0.16;
-  pointer-events: none;
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: -2px;
+  }
 }
 
 .content {
@@ -47,3 +41,9 @@
   object-fit: cover;
   box-shadow: var(--mantine-shadow-sm);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .card {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/media-missing/component.tsx b/packages/widgets/src/media-missing/component.tsx
index 69c1edf21..be7366f3a 100644
--- a/packages/widgets/src/media-missing/component.tsx
+++ b/packages/widgets/src/media-missing/component.tsx
@@ -1,25 +1,66 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { Badge, Box, Center, Group, Image, Paper, RingProgress, ScrollArea, SimpleGrid, Stack, Tabs, Text, ThemeIcon } from "@mantine/core";
+import { useEffect, useState } from "react";
+import {
+  Badge,
+  Box,
+  Center,
+  Group,
+  Image,
+  Paper,
+  RingProgress,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Tabs,
+  Text,
+  ThemeIcon,
+  Tooltip,
+} from "@mantine/core";
 import { IconDownload, IconMovie, IconQuestionMark, IconVideo } from "@tabler/icons-react";
+import { getQueryKey } from "@trpc/react-query";
 
 import { clientApi } from "@homarr/api/client";
 import type { MissingMediaItem, QueuedMediaItem } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import type { WidgetComponentProps } from "../definition";
+import { useWidgetRuntimeQueries } from "../runtime-hooks";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
 import classes from "./component.module.css";
+import type { MediaMissingTab } from "./tabs";
+import { resolveMediaMissingTab } from "./tabs";
 
-export default function MediaMissingWidget({ integrationIds, options, width, height }: WidgetComponentProps<"mediaMissing">) {
+export default function MediaMissingWidget({
+  integrationIds,
+  options,
+  width,
+  height,
+  displayMode,
+  widgetRuntimeRef,
+}: WidgetComponentProps<"mediaMissing">) {
   const t = useScopedI18n("widget.mediaMissing");
-  const pageSize = Number(options.pageSize);
-  const { data } = clientApi.widget.mediaOrganizer.getData.useQuery(
-    { integrationIds, pageSize },
-    { staleTime: 60 * 1000, refetchOnWindowFocus: false, refetchOnReconnect: false },
+  const isAdvanced = displayMode === "advanced";
+  const pageSize = isAdvanced ? Math.max(Number(options.pageSize), 50) : Number(options.pageSize);
+  const input = { integrationIds, pageSize };
+  useWidgetRuntimeQueries(widgetRuntimeRef, [getQueryKey(clientApi.widget.mediaOrganizer.getData, input, "query")]);
+  const data = getUsableWidgetQueryData(
+    clientApi.widget.mediaOrganizer.getData.useQuery(input, {
+      staleTime: 60 * 1000,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    }),
   );
+  const [selectedTab, setSelectedTab] = useState<MediaMissingTab>(options.showMissing ? "missing" : "queued");
+  const activeTab = resolveMediaMissingTab(selectedTab, options.showMissing, options.showQueued);
+
+  useEffect(() => {
+    if (activeTab !== null && activeTab !== selectedTab) setSelectedTab(activeTab);
+  }, [activeTab, selectedTab]);
 
   if (!data) return <WidgetEmptyState />;
   if (data.length === 0) throw new NoIntegrationDataError();
@@ -32,25 +73,26 @@ export default function MediaMissingWidget({ integrationIds, options, width, hei
       </Center>
     );
 
-  const missing = data.flatMap((entry) =>
-    entry.missing.map((item) => ({ item, integrationId: entry.integrationId })),
-  );
-  const queued = data.flatMap((entry) =>
-    entry.queued.map((item) => ({ item, integrationId: entry.integrationId })),
-  );
+  const missing = data.flatMap((entry) => entry.missing.map((item) => ({ item, integrationId: entry.integrationId })));
+  const queued = data.flatMap((entry) => entry.queued.map((item) => ({ item, integrationId: entry.integrationId })));
   const missingCount = data.reduce((sum, entry) => sum + entry.missingCount, 0);
   const queuedCount = data.reduce((sum, entry) => sum + entry.queuedCount, 0);
+  const failedIntegrations = data.filter((entry): entry is typeof entry & { error: string } => Boolean(entry.error));
 
-  const isThin = width > 0 && width < 160;
-  const isShort = height > 0 && height < 180;
+  const enabledPanelCount = Number(options.showMissing) + Number(options.showQueued);
+  const panelWidth = isAdvanced && enabledPanelCount > 1 ? width / enabledPanelCount : width;
+  const isThin = !isAdvanced && panelWidth > 0 && panelWidth < 160;
+  const isShort = !isAdvanced && height > 0 && height < 180;
   const targetCardWidth = isShort ? 130 : 200;
-  const columns = width > 0 ? Math.max(1, Math.min(Math.floor(width / targetCardWidth), 4)) : 1;
-  const density: Density = isThin ? "thin" : width > 0 && width / columns < 180 ? "compact" : "comfortable";
+  const columns = panelWidth > 0 ? Math.max(1, Math.min(Math.floor(panelWidth / targetCardWidth), 4)) : 1;
+  const density: Density = isThin ? "thin" : panelWidth > 0 && panelWidth / columns < 180 ? "compact" : "comfortable";
 
-  const tabLabel = (label: string, shown: number, total: number) =>
-    isThin ? total : `${label} (${shown}/${total})`;
+  const tabLabel = (label: string, shown: number, total: number) => (isThin ? total : `${label} (${shown}/${total})`);
 
-  const renderPanel = (entries: { item: MissingMediaItem | QueuedMediaItem; integrationId: string }[], emptyLabel: string) => (
+  const renderPanel = (
+    entries: { item: MissingMediaItem | QueuedMediaItem; integrationId: string }[],
+    emptyLabel: string,
+  ) => (
     <ScrollArea h="100%" scrollbarSize={4}>
       <Box p="xs">
         {entries.length === 0 ? (
@@ -68,12 +110,60 @@ export default function MediaMissingWidget({ integrationIds, options, width, hei
     </ScrollArea>
   );
 
+  const partialFailures = failedIntegrations.length > 0 && (
+    <Group gap={4} p={4} wrap="wrap">
+      {failedIntegrations.map((entry) => (
+        <Tooltip key={entry.integrationId} label={`${entry.integrationName}: ${t("name")}`}>
+          <Badge size="xs" color="red" variant="light">
+            {entry.integrationName}
+          </Badge>
+        </Tooltip>
+      ))}
+    </Group>
+  );
+
+  if (isAdvanced) {
+    return (
+      <Stack h="100%" gap={0}>
+        {partialFailures}
+        <SimpleGrid cols={enabledPanelCount} spacing="sm" p="sm" style={{ flex: 1, minHeight: 0 }}>
+          {options.showMissing && (
+            <Paper withBorder radius="sm" style={{ minHeight: 0, overflow: "hidden" }}>
+              <Group p="xs" gap="xs">
+                <IconQuestionMark size={16} />
+                <Text size="sm" fw={600}>
+                  {tabLabel(t("tab.missing"), missing.length, missingCount)}
+                </Text>
+              </Group>
+              <Box h="calc(100% - 40px)">{renderPanel(missing, t("empty.missing"))}</Box>
+            </Paper>
+          )}
+          {options.showQueued && (
+            <Paper withBorder radius="sm" style={{ minHeight: 0, overflow: "hidden" }}>
+              <Group p="xs" gap="xs">
+                <IconDownload size={16} />
+                <Text size="sm" fw={600}>
+                  {tabLabel(t("tab.queued"), queued.length, queuedCount)}
+                </Text>
+              </Group>
+              <Box h="calc(100% - 40px)">{renderPanel(queued, t("empty.queued"))}</Box>
+            </Paper>
+          )}
+        </SimpleGrid>
+      </Stack>
+    );
+  }
+
   return (
     <Tabs
-      defaultValue={options.showMissing ? "missing" : "queued"}
+      value={activeTab}
+      onChange={(value) => {
+        if (value === "missing" || value === "queued") setSelectedTab(value);
+      }}
       h="100%"
       style={{ display: "flex", flexDirection: "column" }}
     >
+      {partialFailures}
       <Tabs.List grow>
         {options.showMissing && (
           <Tabs.Tab value="missing" px={isThin ? 6 : undefined} leftSection={<IconQuestionMark size={14} />}>
@@ -116,7 +206,14 @@ const Poster = ({ src, type, density }: { src?: string | null; type: "movie" | "
   }
 
   return (
-    <ThemeIcon className={classes.poster} h={size} w={w} radius="sm" variant="light" color={type === "movie" ? "yellow" : "blue"}>
+    <ThemeIcon
+      className={classes.poster}
+      h={size}
+      w={w}
+      radius="sm"
+      variant="light"
+      color={type === "movie" ? "yellow" : "blue"}
+    >
       {type === "movie" ? <IconMovie size={size * 0.5} /> : <IconVideo size={size * 0.5} />}
     </ThemeIcon>
   );
@@ -183,14 +280,31 @@ const ProgressRing = ({ percent, density }: { percent: number; density: Density
   );
 };
 
-const CardShell = ({ item, density, children }: { item: MissingMediaItem | QueuedMediaItem; density: Density; children: ReactNode }) => (
-  <Paper className={classes.card} component="a" href={item.link} target="_blank" rel="noreferrer" radius="sm" p="xs" h={CARD_HEIGHT[density]}>
-    {item.imageUrl && (
-      <span className={classes.backdrop} style={{ backgroundImage: `url("${item.imageUrl}")` }} aria-hidden />
-    )}
-    <div className={classes.content}>{children}</div>
-  </Paper>
-);
+const CardShell = ({
+  item,
+  density,
+  children,
+}: {
+  item: MissingMediaItem | QueuedMediaItem;
+  density: Density;
+  children: ReactNode;
+}) => {
+  const href = getSafeApplicationUrl(item.link);
+  return (
+    <Paper
+      className={classes.card}
+      component={href ? "a" : "div"}
+      href={href}
+      target={href ? "_blank" : undefined}
+      rel={href ? SAFE_NEW_TAB_REL : undefined}
+      radius="sm"
+      p="xs"
+      h={CARD_HEIGHT[density]}
+    >
+      <div className={classes.content}>{children}</div>
+    </Paper>
+  );
+};
 
 const MediaCard = ({ item, density }: { item: MissingMediaItem | QueuedMediaItem; density: Density }) => {
   const isQueued = "percentComplete" in item;
diff --git a/packages/widgets/src/media-missing/index.ts b/packages/widgets/src/media-missing/index.ts
index eaa44be6d..69a6ecf73 100644
--- a/packages/widgets/src/media-missing/index.ts
+++ b/packages/widgets/src/media-missing/index.ts
@@ -2,13 +2,15 @@ import { IconMovie } from "@tabler/icons-react";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery } from "../definition";
 import { optionsBuilder } from "../options";
 
 const pageSizeOptions = ["10", "20", "30", "50"] as const;
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaMissing", {
   icon: IconMovie,
+  queryKey: [["widget", "mediaOrganizer", "getData"]],
+  queryMatcher: matchesWidgetRuntimeQuery,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showMissing: factory.switch({ defaultValue: true }),
diff --git a/packages/widgets/src/media-missing/tabs.spec.ts b/packages/widgets/src/media-missing/tabs.spec.ts
new file mode 100644
index 000000000..4f3af6af1
--- /dev/null
+++ b/packages/widgets/src/media-missing/tabs.spec.ts
@@ -0,0 +1,18 @@
+import { describe, expect, test } from "vitest";
+
+import { resolveMediaMissingTab } from "./tabs";
+
+describe("resolveMediaMissingTab", () => {
+  test("preserves the selected tab while it remains enabled", () => {
+    expect(resolveMediaMissingTab("queued", true, true)).toBe("queued");
+  });
+
+  test("falls back when the selected tab is disabled", () => {
+    expect(resolveMediaMissingTab("missing", false, true)).toBe("queued");
+    expect(resolveMediaMissingTab("queued", true, false)).toBe("missing");
+  });
+
+  test("returns no tab when both panels are disabled", () => {
+    expect(resolveMediaMissingTab("missing", false, false)).toBeNull();
+  });
+});
diff --git a/packages/widgets/src/media-missing/tabs.ts b/packages/widgets/src/media-missing/tabs.ts
new file mode 100644
index 000000000..8877dc15f
--- /dev/null
+++ b/packages/widgets/src/media-missing/tabs.ts
@@ -0,0 +1,13 @@
+export type MediaMissingTab = "missing" | "queued";
+
+export const resolveMediaMissingTab = (
+  current: MediaMissingTab,
+  showMissing: boolean,
+  showQueued: boolean,
+): MediaMissingTab | null => {
+  if (current === "missing" && showMissing) return current;
+  if (current === "queued" && showQueued) return current;
+  if (showMissing) return "missing";
+  if (showQueued) return "queued";
+  return null;
+};
diff --git a/packages/widgets/src/media-releases/component.module.css b/packages/widgets/src/media-releases/component.module.css
new file mode 100644
index 000000000..602f43ba1
--- /dev/null
+++ b/packages/widgets/src/media-releases/component.module.css
@@ -0,0 +1,24 @@
+.item {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  color: inherit;
+  text-align: start;
+  transition: background-color 120ms ease;
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--mantine-color-default-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: -2px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .item {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/media-releases/component.tsx b/packages/widgets/src/media-releases/component.tsx
index 05ba18fe5..9893a91fb 100644
--- a/packages/widgets/src/media-releases/component.tsx
+++ b/packages/widgets/src/media-releases/component.tsx
@@ -1,7 +1,20 @@
 "use client";
 
 import { Fragment } from "react";
-import { Avatar, Badge, Box, Divider, Group, Image, Stack, Text, TooltipFloating, UnstyledButton } from "@mantine/core";
+import {
+  Avatar,
+  Badge,
+  Box,
+  Divider,
+  Group,
+  Image,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
 import { IconBook, IconCalendar, IconClock, IconStarFilled } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -11,68 +24,117 @@ import { getIconUrl } from "@homarr/definitions";
 import type { MediaRelease } from "@homarr/integrations/types";
 import { mediaTypeConfigurations } from "@homarr/integrations/types";
 import type { TranslationFunction } from "@homarr/translation";
-import { useCurrentLocale, useI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
 import { OverflowBadge } from "@homarr/ui";
 
+import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "../common/query-state";
+import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "../common/query-state-indicator";
+import classes from "./component.module.css";
 
-export default function MediaReleasesWidget({ options, integrationIds }: WidgetComponentProps<"mediaReleases">) {
-  const { data: releases = [] } = clientApi.widget.mediaRelease.getMediaReleases.useQuery({
-    integrationIds,
-  });
+export default function MediaReleasesWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+  displayMode,
+}: WidgetComponentProps<"mediaReleases">) {
+  const t = useI18n();
+  const releasesQuery = clientApi.widget.mediaRelease.getMediaReleases.useQuery({ integrationIds });
+  const releases = getUsableWidgetQueryData(releasesQuery);
+
+  if (isInitialWidgetQueryPending(releasesQuery)) return <WidgetQueryLoadingState />;
+  if (!releases || releases.length === 0) return <WidgetEmptyState />;
+
+  const isAdvanced = displayMode === "advanced";
 
   return (
-    <Stack p="xs" gap="sm">
-      {releases.map((item, index) => (
-        <Fragment key={item.id}>
-          {index !== 0 && options.layout === "poster" && <Divider />}
-          <Item item={item} options={options} />
-        </Fragment>
-      ))}
-    </Stack>
+    <Box h="100%" pos="relative">
+      <ScrollArea h="100%">
+        <SimpleGrid cols={isAdvanced ? Math.max(1, Math.floor(width / 360)) : 1} p="xs" spacing="sm">
+          {releases.map((item, index) => (
+            <Fragment key={`${item.integration.id}:${item.id}`}>
+              {!isAdvanced && index !== 0 && options.layout === "poster" && <Divider />}
+              <Item item={item} options={options} isAdvanced={isAdvanced} width={width} height={height} />
+            </Fragment>
+          ))}
+        </SimpleGrid>
+      </ScrollArea>
+      {releasesQuery.error && (
+        <Box pos="absolute" top={4} right={4}>
+          <WidgetQueryErrorIndicator error={releasesQuery.error} label={t("widget.mediaReleases.name")} />
+        </Box>
+      )}
+    </Box>
   );
 }
 
 interface ItemProps {
   item: RouterOutputs["widget"]["mediaRelease"]["getMediaReleases"][number];
   options: WidgetComponentProps<"mediaReleases">["options"];
+  isAdvanced: boolean;
+  width: number;
+  height: number;
 }
 
-const formatReleaseDate = (value: unknown, locale: string) => {
+const formatReleaseDate = (value: unknown, locale: string, compact: boolean) => {
   const date = toValidDate(value);
   if (!date) return "—";
   return Intl.DateTimeFormat(locale, {
-    month: "2-digit",
+    month: compact ? "short" : "2-digit",
     year: "numeric",
     day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-    hour12: false,
+    ...(compact ? {} : { hour: "2-digit", minute: "2-digit", hour12: false }),
   }).format(date);
 };
 
-const Item = ({ item, options }: ItemProps) => {
-  const locale = useCurrentLocale();
+const Item = ({ item, options, isAdvanced, width, height }: ItemProps) => {
+  const locale = useCurrentIntlLocale();
   const t = useI18n();
   const length = formatLength(item.length, item.type, t);
+  const isCompact = !isAdvanced && (width < 340 || height < 180);
+  const isTiny = !isAdvanced && (width < 220 || height < 105);
+  const showPoster = (isAdvanced || options.layout === "poster") && !isTiny;
+  const showExtendedMetadata = isAdvanced || (!isCompact && width >= 360);
+  const showSide = isAdvanced || (!isTiny && (options.showType || options.showSource));
+  const href = getSafeApplicationUrl(item.href);
 
   return (
-    <TooltipFloating
+    <Tooltip
       label={item.description}
       w={300}
       multiline
-      disabled={item.description === undefined || item.description.trim() === "" || !options.showDescriptionTooltip}
+      events={{ hover: true, focus: true, touch: true }}
+      disabled={
+        isAdvanced ||
+        item.description === undefined ||
+        item.description.trim() === "" ||
+        !options.showDescriptionTooltip
+      }
     >
       <UnstyledButton
-        component="a"
-        href={item.href}
-        target="_blank"
-        rel="noopener noreferrer"
+        className={classes.item}
+        component={href ? "a" : "div"}
+        href={href}
+        target={href ? "_blank" : undefined}
+        rel={href ? SAFE_NEW_TAB_REL : undefined}
         pos="relative"
-        p={options.layout === "poster" ? 0 : 4}
+        p={isAdvanced ? "sm" : options.layout === "poster" ? 4 : isTiny ? 4 : 6}
+        h="100%"
+        title={item.title}
+        style={
+          isAdvanced
+            ? {
+                border: "1px solid var(--mantine-color-default-border)",
+                borderRadius: "var(--mantine-radius-sm)",
+              }
+            : undefined
+        }
       >
-        {options.layout === "backdrop" && (
+        {!isAdvanced && options.layout === "backdrop" && (
           <Box
             w="100%"
             h="100%"
@@ -89,62 +151,75 @@ const Item = ({ item, options }: ItemProps) => {
             }}
           />
         )}
-        <Group justify="space-between" h="100%" wrap="nowrap">
-          <Group align="start" wrap="nowrap" style={{ zIndex: 0 }}>
-            {options.layout === "poster" && <Image w={60} src={item.imageUrls.poster} alt={item.title} />}
-            <Stack gap={4}>
+        <Group justify="space-between" h="100%" wrap="nowrap" gap={isCompact ? "xs" : "sm"}>
+          <Group align="start" wrap="nowrap" style={{ zIndex: 0, minWidth: 0, flex: 1 }} gap="xs">
+            {showPoster && (
+              <Image
+                w={isAdvanced ? 80 : isCompact ? 44 : 60}
+                src={item.imageUrls.poster}
+                alt=""
+                radius="xs"
+                style={{ flexShrink: 0 }}
+              />
+            )}
+            <Stack gap={isCompact ? 2 : 4} style={{ minWidth: 0, flex: 1 }}>
               <Stack gap={0}>
-                <Text size="sm" fw="bold" lineClamp={2}>
+                <Text size={isTiny ? "xs" : "sm"} fw="bold" lineClamp={isCompact ? 1 : 2}>
                   {item.title}
                 </Text>
-                {item.subtitle !== undefined && (
-                  <Text size="sm" lineClamp={1}>
+                {item.subtitle !== undefined && !isTiny && (
+                  <Text size={isCompact ? "xs" : "sm"} c={isCompact ? "dimmed" : undefined} lineClamp={1}>
                     {item.subtitle}
                   </Text>
                 )}
               </Stack>
-              <Group gap={6} style={{ rowGap: 0 }}>
-                <Info icon={IconCalendar} label={formatReleaseDate(item.releaseDate, locale)} />
-                {length !== undefined && (
+              <Group gap={6} wrap="nowrap" style={{ minWidth: 0 }}>
+                <Info icon={IconCalendar} label={formatReleaseDate(item.releaseDate, locale, isCompact)} />
+                {length !== undefined && !isTiny && (
                   <>
                     <InfoDivider />
                     <Info icon={length.type === "duration" ? IconClock : IconBook} label={length.label} />
                   </>
                 )}
-                {item.producer !== undefined && (
+                {item.producer !== undefined && showExtendedMetadata && (
                   <>
                     <InfoDivider />
                     <Info label={item.producer} />
                   </>
                 )}
-                {item.rating !== undefined && (
+                {item.rating !== undefined && showExtendedMetadata && (
                   <>
                     <InfoDivider />
                     <Info icon={IconStarFilled} label={item.rating} />
                   </>
                 )}
-                {item.price !== undefined && (
+                {item.price !== undefined && showExtendedMetadata && (
                   <>
                     <InfoDivider />
                     <Info label={`$${item.price.toFixed(2)}`} />
                   </>
                 )}
               </Group>
-              {item.tags.length > 0 && (
+              {item.tags.length > 0 && (isAdvanced || !isCompact) && (
                 <OverflowBadge
                   size="xs"
                   groupGap={4}
                   data={item.tags}
                   overflowCount={3}
-                  disablePopover
-                  style={{ cursor: "pointer" }}
+                  disablePopover={!isAdvanced}
+                  style={{ cursor: isAdvanced ? "pointer" : undefined }}
                 />
               )}
+              {isAdvanced && item.description && (
+                <Text size="xs" c="dimmed" lineClamp={3}>
+                  {item.description}
+                </Text>
+              )}
             </Stack>
           </Group>
-          {(options.showType || options.showSource) && (
+          {showSide && (
             <Stack justify="space-between" align="end" h="100%" style={{ zIndex: 0 }}>
-              {options.showType && (
+              {(isAdvanced || options.showType) && (
                 <Badge
                   w="max-content"
                   size="xs"
@@ -155,14 +230,14 @@ const Item = ({ item, options }: ItemProps) => {
                 </Badge>
               )}
 
-              {options.showSource && (
+              {(isAdvanced || options.showSource) && (
                 <Avatar size="sm" radius="xl" src={getIconUrl(item.integration.kind)} alt={item.integration.name} />
               )}
             </Stack>
           )}
         </Group>
       </UnstyledButton>
-    </TooltipFloating>
+    </Tooltip>
   );
 };
 
@@ -179,9 +254,9 @@ const InfoDivider = () => (
 
 const Info = ({ icon: Icon, label }: IconAndLabelProps) => {
   return (
-    <Group gap={4}>
-      {Icon && <Icon size={12} color={getMantineColor("gray", 5)} />}
-      <Text size="xs" c="gray.5">
+    <Group gap={4} wrap="nowrap" miw={0}>
+      {Icon && <Icon size={12} color={getMantineColor("gray", 5)} style={{ flexShrink: 0 }} />}
+      <Text size="xs" c="dimmed" truncate="end">
         {label}
       </Text>
     </Group>
diff --git a/packages/widgets/src/media-requests/list/component.module.css b/packages/widgets/src/media-requests/list/component.module.css
new file mode 100644
index 000000000..ee7dfd344
--- /dev/null
+++ b/packages/widgets/src/media-requests/list/component.module.css
@@ -0,0 +1,38 @@
+.card {
+  min-width: 0;
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease;
+
+  &:hover,
+  &:focus-within {
+    border-color: var(--mantine-primary-color-filled);
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+.pendingActions {
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.card:hover .pendingActions,
+.card:focus-within .pendingActions,
+.pendingActionsVisible {
+  opacity: 1;
+}
+
+@media (any-pointer: coarse) {
+  .pendingActions {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card,
+  .pendingActions {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/media-requests/list/component.tsx b/packages/widgets/src/media-requests/list/component.tsx
index c5dc5bf06..92beaf0d0 100644
--- a/packages/widgets/src/media-requests/list/component.tsx
+++ b/packages/widgets/src/media-requests/list/component.tsx
@@ -1,23 +1,11 @@
 "use client";
 
-import {
-  ActionIcon,
-  Anchor,
-  Avatar,
-  Badge,
-  Box,
-  Card,
-  Group,
-  Image,
-  ScrollArea,
-  Stack,
-  Text,
-  Tooltip,
-} from "@mantine/core";
+import { ActionIcon, Anchor, Avatar, Badge, Card, Group, Image, ScrollArea, Stack, Text, Tooltip } from "@mantine/core";
 import { IconSearch, IconThumbDown, IconThumbUp } from "@tabler/icons-react";
 
 import type { RouterInputs, RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
+import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { toValidDate } from "@homarr/common";
 import type { MediaRequestStatus } from "@homarr/integrations/types";
@@ -26,48 +14,71 @@ import { openMediaRequestSearch } from "@homarr/spotlight";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../../common/application-url";
+import { getUsableWidgetQueryData } from "../../common/query-state";
+import actionTargetClasses from "../../common/action-target.module.css";
+import { IntegrationErrorIndicator } from "../../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../../definition";
 import { NoIntegrationDataError } from "../../errors/no-data-integration";
-import classes from "../search-button.module.css";
+import classes from "./component.module.css";
+import searchClasses from "../search-button.module.css";
 
 export default function MediaServerWidget({
   integrationIds,
   isEditMode,
   options,
   width,
+  height,
 }: WidgetComponentProps<"mediaRequests-requestList">) {
-  const { data: mediaRequests } = clientApi.widget.mediaRequests.getLatestRequests.useQuery({
-    integrationIds,
-    statuses:
-      options.statusFilter.length > 0
-        ? options.statusFilter
-        : ["pending", "approved", "declined", "failed", "completed"],
-    recentDays: options.recentDays,
-  });
+  const interactIntegrationIds = new Set(
+    useIntegrationsWithInteractAccess()
+      .filter(({ id }) => integrationIds.includes(id))
+      .map(({ id }) => id),
+  );
+  const mediaRequestData = getUsableWidgetQueryData(
+    clientApi.widget.mediaRequests.getLatestRequests.useQuery({
+      integrationIds,
+      statuses:
+        options.statusFilter.length > 0
+          ? options.statusFilter
+          : ["pending", "approved", "declined", "failed", "completed"],
+      recentDays: options.recentDays,
+    }),
+  );
 
-  if (!mediaRequests) return <WidgetEmptyState />;
-  if (mediaRequests.length === 0) throw new NoIntegrationDataError();
+  if (!mediaRequestData) return <WidgetEmptyState />;
+  const { requests: mediaRequests, failedIntegrations } = mediaRequestData;
+  if (mediaRequests.length === 0 && failedIntegrations.length === 0) throw new NoIntegrationDataError();
+  const showIntegrationSource = new Set(mediaRequests.map(({ integrationId }) => integrationId)).size > 1;
 
   return (
-    <Box className={classes.searchRoot}>
+    <Stack className={searchClasses.searchRoot} gap={0}>
       {!isEditMode && <MediaRequestSearchButton integrationIds={integrationIds} />}
+      {failedIntegrations.length > 0 && (
+        <Group px="sm" pt="xs">
+          <IntegrationErrorIndicator results={failedIntegrations} />
+        </Group>
+      )}
       <ScrollArea
         className="mediaRequests-list-scrollArea"
         scrollbarSize="md"
-        style={{ pointerEvents: isEditMode ? "none" : undefined }}
+        style={{ flex: 1, minHeight: 0, pointerEvents: isEditMode ? "none" : undefined }}
       >
         <Stack className="mediaRequests-list-list" gap="xs" p="sm">
           {mediaRequests.map((mediaRequest) => (
             <MediaRequestCard
               key={`${mediaRequest.integrationId}-${mediaRequest.id}`}
               request={mediaRequest}
-              isTiny={width <= 256}
+              isTiny={width <= 256 || height < 96}
+              isDense={width < 340 || height < 150}
+              showIntegrationSource={showIntegrationSource}
+              canInteract={interactIntegrationIds.has(mediaRequest.integrationId)}
               options={options}
             />
           ))}
         </Stack>
       </ScrollArea>
-    </Box>
+    </Stack>
   );
 }
 
@@ -77,7 +88,7 @@ const MediaRequestSearchButton = ({ integrationIds }: { integrationIds: string[]
   return (
     <Tooltip label={t("action.search.label")}>
       <ActionIcon
-        className={classes.searchButton}
+        className={`${searchClasses.searchButton} ${actionTargetClasses.root}`}
         variant="light"
         size="sm"
         aria-label={t("action.search.label")}
@@ -90,33 +101,34 @@ const MediaRequestSearchButton = ({ integrationIds }: { integrationIds: string[]
 };
 
 interface MediaRequestCardProps {
-  request: RouterOutputs["widget"]["mediaRequests"]["getLatestRequests"][number];
+  request: RouterOutputs["widget"]["mediaRequests"]["getLatestRequests"]["requests"][number];
   isTiny: boolean;
+  isDense: boolean;
+  showIntegrationSource: boolean;
+  canInteract: boolean;
   options: WidgetComponentProps<"mediaRequests-requestList">["options"];
 }
 
-const MediaRequestCard = ({ request, isTiny, options }: MediaRequestCardProps) => {
+const MediaRequestCard = ({
+  request,
+  isTiny,
+  isDense,
+  showIntegrationSource,
+  canInteract,
+  options,
+}: MediaRequestCardProps) => {
   const board = useRequiredBoard();
   const t = useScopedI18n("widget.mediaRequests-requestList");
+  const requestHref = getSafeApplicationUrl(request.href);
+  const requestedByHref = getSafeApplicationUrl(request.requestedBy?.link);
 
   return (
     <Card
-      className={`mediaRequests-list-item-wrapper mediaRequests-list-item-${request.type} mediaRequests-list-item-${request.status}`}
+      className={`mediaRequests-list-item-wrapper mediaRequests-list-item-${request.type} mediaRequests-list-item-${request.status} ${classes.card}`}
       radius={board.itemRadius}
-      p="xs"
+      p={isDense ? 6 : "xs"}
+      withBorder
     >
-      <Image
-        className="mediaRequests-list-item-background"
-        src={request.backdropImageUrl}
-        pos="absolute"
-        w="100%"
-        h="100%"
-        opacity={0.2}
-        top={0}
-        left={0}
-        alt=""
-      />
-
       <Group
         className="mediaRequests-list-item-contents"
         h="100%"
@@ -125,20 +137,56 @@ const MediaRequestCard = ({ request, isTiny, options }: MediaRequestCardProps) =
         wrap="nowrap"
         gap={0}
       >
-        <Group className="mediaRequests-list-item-left-side" h="100%" gap="md" wrap="nowrap" flex={1}>
+        <Group
+          className="mediaRequests-list-item-left-side"
+          h="100%"
+          gap={isDense ? "xs" : "md"}
+          wrap="nowrap"
+          flex={1}
+          miw={0}
+        >
           {!isTiny && (
             <Image
               className="mediaRequests-list-item-poster"
               src={request.posterImagePath}
-              h={40}
+              h={isDense ? 36 : 44}
               w="auto"
-              radius={"md"}
+              radius="sm"
+              alt=""
+              style={{ flexShrink: 0 }}
             />
           )}
 
-          <Stack gap={0} w="100%">
-            <Group justify="space-between" gap="xs" className="mediaRequests-list-item-top-group">
-              <Group gap="xs">
+          <Stack gap={2} w="100%" miw={0}>
+            <Group gap="xs" justify="space-between" wrap="nowrap" className="mediaRequests-list-item-top-group">
+              <Anchor
+                className="mediaRequests-list-item-info-second-line mediaRequests-list-item-media-title"
+                component={requestHref ? "a" : "span"}
+                href={requestHref}
+                c="var(--mantine-color-text)"
+                target={requestHref ? (options.linksTargetNewTab ? "_blank" : "_self") : undefined}
+                rel={requestHref && options.linksTargetNewTab ? SAFE_NEW_TAB_REL : undefined}
+                fz={isTiny ? "xs" : "sm"}
+                fw={600}
+                title={request.name}
+                truncate="end"
+                style={{ minWidth: 0, flex: 1 }}
+              >
+                {request.name || "unknown"}
+              </Anchor>
+              {request.status === "pending" ? (
+                <DecisionButtons
+                  requestId={request.id}
+                  integrationId={request.integrationId}
+                  canInteract={canInteract}
+                  alwaysVisible={isTiny}
+                />
+              ) : (
+                <StatusBadge status={request.status} />
+              )}
+            </Group>
+            <Group justify="space-between" gap="xs" wrap="nowrap" className="mediaRequests-list-item-bottom-group">
+              <Group gap={4} wrap="nowrap" miw={0}>
                 <Text className="mediaRequests-list-item-media-year" size="xs">
                   {toValidDate(request.airDate)?.getFullYear() ?? t("toBeDetermined")}
                 </Text>
@@ -152,43 +200,33 @@ const MediaRequestCard = ({ request, isTiny, options }: MediaRequestCardProps) =
                     {t(`availability.${request.availability}`)}
                   </Badge>
                 )}
+                {showIntegrationSource && !isTiny && (
+                  <Badge size="xs" variant="outline">
+                    {request.integration.name}
+                  </Badge>
+                )}
               </Group>
-              <Group className="mediaRequests-list-item-request-user" gap={4} wrap="nowrap">
-                <Avatar
-                  className="mediaRequests-list-item-request-user-avatar"
-                  src={request.requestedBy?.avatar}
-                  size="xs"
-                />
-                <Anchor
-                  className="mediaRequests-list-item-request-user-name"
-                  href={request.requestedBy?.link}
-                  c="var(--mantine-color-text)"
-                  target={options.linksTargetNewTab ? "_blank" : "_self"}
-                  fz="xs"
-                  lineClamp={1}
-                  style={{ wordBreak: "break-all" }}
-                >
-                  {(request.requestedBy?.displayName ?? "") || "unknown"}
-                </Anchor>
-              </Group>
-            </Group>
-            <Group gap="xs" justify="space-between" className="mediaRequests-list-item-bottom-group">
-              <Anchor
-                className="mediaRequests-list-item-info-second-line mediaRequests-list-item-media-title"
-                href={request.href}
-                c="var(--mantine-color-text)"
-                target={options.linksTargetNewTab ? "_blank" : "_self"}
-                fz={isTiny ? "xs" : "sm"}
-                fw={"bold"}
-                title={request.name}
-                lineClamp={1}
-              >
-                {request.name || "unknown"}
-              </Anchor>
-              {request.status === "pending" ? (
-                <DecisionButtons requestId={request.id} integrationId={request.integrationId} />
-              ) : (
-                <StatusBadge status={request.status} />
+              {!isTiny && (
+                <Group className="mediaRequests-list-item-request-user" gap={4} wrap="nowrap" miw={0}>
+                  <Avatar
+                    className="mediaRequests-list-item-request-user-avatar"
+                    src={request.requestedBy?.avatar}
+                    size={18}
+                  />
+                  <Anchor
+                    className="mediaRequests-list-item-request-user-name"
+                    component={requestedByHref ? "a" : "span"}
+                    href={requestedByHref}
+                    c="dimmed"
+                    target={requestedByHref ? (options.linksTargetNewTab ? "_blank" : "_self") : undefined}
+                    rel={requestedByHref && options.linksTargetNewTab ? SAFE_NEW_TAB_REL : undefined}
+                    fz="xs"
+                    truncate="end"
+                    style={{ minWidth: 0, maxWidth: isDense ? 100 : 180 }}
+                  >
+                    {(request.requestedBy?.displayName ?? "") || "unknown"}
+                  </Anchor>
+                </Group>
               )}
             </Group>
           </Stack>
@@ -201,15 +239,22 @@ const MediaRequestCard = ({ request, isTiny, options }: MediaRequestCardProps) =
 interface DecisionButtonsProps {
   requestId: number;
   integrationId: string;
+  canInteract: boolean;
+  alwaysVisible: boolean;
 }
 
-const DecisionButtons = ({ requestId, integrationId }: DecisionButtonsProps) => {
+const DecisionButtons = ({ requestId, integrationId, canInteract, alwaysVisible }: DecisionButtonsProps) => {
   const utils = clientApi.useUtils();
-  const { mutate: mutateRequestAnswer } = clientApi.widget.mediaRequests.answerRequest.useMutation({
+  const {
+    mutate: mutateRequestAnswer,
+    isPending,
+    error,
+  } = clientApi.widget.mediaRequests.answerRequest.useMutation({
     onSettled: () => void utils.widget.mediaRequests.invalidate(),
   });
   const t = useScopedI18n("widget.mediaRequests-requestList");
   const handleDecision = (answer: RouterInputs["widget"]["mediaRequests"]["answerRequest"]["answer"]) => {
+    if (!canInteract || isPending) return;
     mutateRequestAnswer({
       integrationId,
       requestId,
@@ -218,13 +263,20 @@ const DecisionButtons = ({ requestId, integrationId }: DecisionButtonsProps) =>
   };
 
   return (
-    <Group className="mediaRequests-list-item-pending-buttons" gap="sm">
+    <Group
+      className={`mediaRequests-list-item-pending-buttons ${classes.pendingActions} ${alwaysVisible ? classes.pendingActionsVisible : ""}`}
+      gap={4}
+      wrap="nowrap"
+      aria-invalid={Boolean(error)}
+    >
       <Tooltip label={t("pending.approve")}>
         <ActionIcon
-          className="mediaRequests-list-item-pending-button-approve"
+          className={`mediaRequests-list-item-pending-button-approve ${actionTargetClasses.root}`}
           variant="light"
           color="green"
-          size="xs"
+          size="sm"
+          disabled={!canInteract || isPending}
+          aria-label={t("pending.approve")}
           onClick={() => {
             handleDecision("approve");
           }}
@@ -234,10 +286,12 @@ const DecisionButtons = ({ requestId, integrationId }: DecisionButtonsProps) =>
       </Tooltip>
       <Tooltip label={t("pending.decline")}>
         <ActionIcon
-          className="mediaRequests-list-item-pending-button-decline"
+          className={`mediaRequests-list-item-pending-button-decline ${actionTargetClasses.root}`}
           variant="light"
           color="red"
-          size="xs"
+          size="sm"
+          disabled={!canInteract || isPending}
+          aria-label={t("pending.decline")}
           onClick={() => {
             handleDecision("decline");
           }}
diff --git a/packages/widgets/src/media-requests/list/index.ts b/packages/widgets/src/media-requests/list/index.ts
index 1f65cd0c3..8b67f6eed 100644
--- a/packages/widgets/src/media-requests/list/index.ts
+++ b/packages/widgets/src/media-requests/list/index.ts
@@ -4,35 +4,46 @@ import { z } from "zod/v4";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { openMediaRequestSearch } from "@homarr/spotlight";
 
-import { createWidgetDefinition } from "../../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../../definition";
 import { optionsBuilder } from "../../options";
 
 const mediaRequestStatusValues = ["pending", "approved", "declined", "failed", "completed"] as const;
+const createOptions = () =>
+  optionsBuilder.from((factory) => ({
+    linksTargetNewTab: factory.switch({
+      defaultValue: true,
+    }),
+    statusFilter: factory.multiSelect({
+      defaultValue: [...mediaRequestStatusValues],
+      options: mediaRequestStatusValues.map((value) => ({
+        value,
+        label: (t) => t(`widget.mediaRequests-requestList.status.${value}`),
+      })),
+    }),
+    recentDays: factory.number({
+      validate: z.number().min(0).max(365),
+      defaultValue: 0,
+    }),
+  }));
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaRequests-requestList", {
+  supportsAdvancedFocus: false,
   icon: IconZoomQuestion,
-  createOptions() {
-    return optionsBuilder.from((factory) => ({
-      linksTargetNewTab: factory.switch({
-        defaultValue: true,
-      }),
-      statusFilter: factory.multiSelect({
-        defaultValue: [...mediaRequestStatusValues],
-        options: mediaRequestStatusValues.map((value) => ({
-          value,
-          label: (t) => t(`widget.mediaRequests-requestList.status.${value}`),
-        })),
-      }),
-      recentDays: factory.number({
-        validate: z.number().min(0).max(365),
-        defaultValue: 0,
-      }),
-    }));
-  },
+  queryKey: [["widget", "mediaRequests", "getLatestRequests"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      integrationIds: scope.integrationIds,
+      statuses:
+        Array.isArray(scope.options.statusFilter) && scope.options.statusFilter.length > 0
+          ? scope.options.statusFilter
+          : mediaRequestStatusValues,
+      recentDays: scope.options.recentDays,
+    }),
+  createOptions,
   contextActions: ({ integrationIds }) => [
     {
       key: "search",
-      label: (t) => t("search.mode.media.action.search.label"),
+      label: "search.mode.media.action.search.label",
       icon: IconSearch,
       onClick: () => {
         openMediaRequestSearch({ integrationIds });
diff --git a/packages/widgets/src/media-requests/search-button.module.css b/packages/widgets/src/media-requests/search-button.module.css
index b131da24d..693b88644 100644
--- a/packages/widgets/src/media-requests/search-button.module.css
+++ b/packages/widgets/src/media-requests/search-button.module.css
@@ -17,7 +17,11 @@
   opacity: 1;
 }
 
-@media (hover: none) {
+@media (any-pointer: coarse) {
+  .searchRoot {
+    padding-top: 52px;
+  }
+
   .searchButton {
     opacity: 1;
   }
diff --git a/packages/widgets/src/media-requests/stats/component.module.css b/packages/widgets/src/media-requests/stats/component.module.css
index 1ab18a656..913c196c4 100644
--- a/packages/widgets/src/media-requests/stats/component.module.css
+++ b/packages/widgets/src/media-requests/stats/component.module.css
@@ -5,3 +5,25 @@
 [data-mantine-color-scheme="dark"] .card {
   background-color: var(--mantine-color-dark-7);
 }
+
+.userCard {
+  color: inherit;
+  text-decoration: none;
+  transition: background-color 120ms ease;
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--mantine-color-default-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: -2px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .userCard {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/media-requests/stats/component.tsx b/packages/widgets/src/media-requests/stats/component.tsx
index 5348b845a..ea96b099f 100644
--- a/packages/widgets/src/media-requests/stats/component.tsx
+++ b/packages/widgets/src/media-requests/stats/component.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ActionIcon, Avatar, Box, Card, Grid, Group, Stack, Text, Tooltip } from "@mantine/core";
+import { ActionIcon, Avatar, Badge, Box, Card, Grid, Group, ScrollArea, Stack, Text, Tooltip } from "@mantine/core";
 import type { Icon } from "@tabler/icons-react";
 import {
   IconDeviceTv,
@@ -22,6 +22,10 @@ import { openMediaRequestSearch } from "@homarr/spotlight";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../../common/application-url";
+import { getUsableWidgetQueryData } from "../../common/query-state";
+import actionTargetClasses from "../../common/action-target.module.css";
+import { IntegrationErrorIndicator } from "../../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../../definition";
 import { NoIntegrationDataError } from "../../errors/no-data-integration";
 import classes from "./component.module.css";
@@ -34,16 +38,20 @@ export default function MediaServerWidget({
   integrationIds,
   isEditMode,
   width,
+  height,
 }: WidgetComponentProps<"mediaRequests-requestStats">) {
   const t = useScopedI18n("widget.mediaRequests-requestStats");
-  const { data: requestStats } = clientApi.widget.mediaRequests.getStats.useQuery({
-    integrationIds,
-  });
+  const requestStats = getUsableWidgetQueryData(clientApi.widget.mediaRequests.getStats.useQuery({ integrationIds }));
 
   const board = useRequiredBoard();
 
   if (!requestStats) return <WidgetEmptyState />;
-  if (requestStats.users.length === 0 && requestStats.stats.length === 0) throw new NoIntegrationDataError();
+  if (
+    requestStats.users.length === 0 &&
+    requestStats.stats.length === 0 &&
+    requestStats.failedIntegrations.length === 0
+  )
+    throw new NoIntegrationDataError();
 
   const data = [
     {
@@ -88,10 +96,16 @@ export default function MediaServerWidget({
     },
   ] satisfies { name: keyof RequestStats; icon: Icon; number: number }[];
 
-  const isTiny = width < 256;
+  const isTiny = width < 256 || height < 180;
+  const showSectionTitles = height >= 180;
+  const visibleStats = data.slice(0, height < 120 ? 4 : 8);
+  const showIntegrationLegend = requestStats.integrations.length > 1 && height >= 240;
 
   return (
     <Box className={searchClasses.searchRoot}>
+      <Box pos="absolute" top="xs" left="xs" style={{ zIndex: 2 }}>
+        <IntegrationErrorIndicator results={requestStats.failedIntegrations} />
+      </Box>
       {!isEditMode && <MediaRequestSearchButton integrationIds={integrationIds} />}
       <Stack
         className="mediaRequests-stats-layout"
@@ -100,14 +114,16 @@ export default function MediaServerWidget({
         p="sm"
         align="center"
         justify="space-between"
-        style={{ pointerEvents: isEditMode ? "none" : undefined }}
+        style={{ pointerEvents: isEditMode ? "none" : undefined, overflow: "hidden" }}
       >
         <Stack gap={4} w="100%">
-          <Text className="mediaRequests-stats-stats-title" fw="bold" ta="center" size={isTiny ? "xs" : "sm"}>
-            {t("titles.stats.main")}
-          </Text>
+          {showSectionTitles && (
+            <Text className="mediaRequests-stats-stats-title" fw={600} ta="center" size={isTiny ? "xs" : "sm"}>
+              {t("titles.stats.main")}
+            </Text>
+          )}
           <Grid className="mediaRequests-stats-stats-grid" gap={4} w="100%">
-            {data.map((stat) => (
+            {visibleStats.map((stat) => (
               <Grid.Col
                 className={combineClasses("mediaRequests-stats-stat-wrapper", `mediaRequests-stats-stat-${stat.name}`)}
                 key={stat.name}
@@ -127,48 +143,71 @@ export default function MediaServerWidget({
             ))}
           </Grid>
         </Stack>
-        <Stack gap={4} w="100%">
-          <Text className="mediaRequests-stats-users-title" fw="bold" ta="center" size={isTiny ? "xs" : "sm"}>
-            {t("titles.users.main")} ({t("titles.users.requests")})
-          </Text>
-          <Stack className="mediaRequests-stats-users-wrapper" flex={1} w="100%" gap={4} style={{ overflow: "hidden" }}>
-            {requestStats.users.slice(0, 10).map((user) => (
-              <Card
-                component="a"
-                href={user.link}
-                target="_blank"
-                rel="noopener noreferrer"
-                className={combineClasses(
-                  "mediaRequests-stats-users-user-wrapper",
-                  `mediaRequests-stats-users-user-${user.id}`,
-                  classes.card,
-                )}
-                key={user.id}
-                p="xs"
-                radius={board.itemRadius}
-              >
-                <Group className="mediaRequests-stats-users-user-group" h="100%" p={0} gap="sm" justify="space-between">
-                  <Group gap={4}>
-                    <Tooltip label={user.integration.name}>
-                      <Avatar
-                        className="mediaRequests-stats-users-user-avatar"
-                        size={20}
-                        src={user.avatar}
-                        bd={`2px solid ${user.integration.kind === "overseerr" ? OVERSEERR_COLOR : JELLYSEERR_COLOR}`}
-                      />
-                    </Tooltip>
-                    <Text className="mediaRequests-stats-users-user-userName" size="sm">
-                      {user.displayName}
-                    </Text>
-                  </Group>
+        <Stack gap={4} w="100%" style={{ flex: 1, minHeight: 0, overflow: "hidden" }}>
+          {showSectionTitles && (
+            <Text className="mediaRequests-stats-users-title" fw={600} ta="center" size={isTiny ? "xs" : "sm"}>
+              {t("titles.users.main")} ({t("titles.users.requests")})
+            </Text>
+          )}
+          <ScrollArea className="mediaRequests-stats-users-wrapper" flex={1} mih={0} w="100%">
+            <Stack gap={4}>
+              {requestStats.users.map((user) => {
+                const href = getSafeApplicationUrl(user.link);
+                return (
+                  <Card
+                    component={href ? "a" : "div"}
+                    href={href}
+                    target={href ? "_blank" : undefined}
+                    rel={href ? SAFE_NEW_TAB_REL : undefined}
+                    className={combineClasses(
+                      "mediaRequests-stats-users-user-wrapper",
+                      `mediaRequests-stats-users-user-${user.id}`,
+                      classes.card,
+                      classes.userCard,
+                    )}
+                    key={`${user.integration.id}:${user.id}`}
+                    p="xs"
+                    radius={board.itemRadius}
+                  >
+                    <Group
+                      className="mediaRequests-stats-users-user-group"
+                      h="100%"
+                      p={0}
+                      gap="sm"
+                      justify="space-between"
+                    >
+                      <Group gap={4} wrap="nowrap" miw={0}>
+                        <Tooltip label={user.integration.name}>
+                          <Avatar
+                            className="mediaRequests-stats-users-user-avatar"
+                            size={20}
+                            src={user.avatar}
+                            bd={`2px solid ${user.integration.kind === "overseerr" ? OVERSEERR_COLOR : JELLYSEERR_COLOR}`}
+                          />
+                        </Tooltip>
+                        <Text className="mediaRequests-stats-users-user-userName" size="sm" truncate="end">
+                          {user.displayName}
+                        </Text>
+                      </Group>
 
-                  <Text className="mediaRequests-stats-users-user-request-count" size="md" fw={500}>
-                    {user.requestCount}
-                  </Text>
-                </Group>
-              </Card>
-            ))}
-          </Stack>
+                      <Text className="mediaRequests-stats-users-user-request-count" size="md" fw={500}>
+                        {user.requestCount}
+                      </Text>
+                    </Group>
+                  </Card>
+                );
+              })}
+            </Stack>
+          </ScrollArea>
+          {showIntegrationLegend && (
+            <Group justify="center" gap={4}>
+              {requestStats.integrations.map((integration) => (
+                <Badge key={integration.id} size="xs" variant="light">
+                  {integration.name}
+                </Badge>
+              ))}
+            </Group>
+          )}
         </Stack>
       </Stack>
     </Box>
@@ -181,7 +220,7 @@ const MediaRequestSearchButton = ({ integrationIds }: { integrationIds: string[]
   return (
     <Tooltip label={t("action.search.label")}>
       <ActionIcon
-        className={searchClasses.searchButton}
+        className={`${searchClasses.searchButton} ${actionTargetClasses.root}`}
         variant="light"
         size="sm"
         aria-label={t("action.search.label")}
diff --git a/packages/widgets/src/media-requests/stats/index.ts b/packages/widgets/src/media-requests/stats/index.ts
index d49cb8495..0c264e78a 100644
--- a/packages/widgets/src/media-requests/stats/index.ts
+++ b/packages/widgets/src/media-requests/stats/index.ts
@@ -5,15 +5,17 @@ import { openMediaRequestSearch } from "@homarr/spotlight";
 
 import { createWidgetDefinition } from "../../definition";
 
+const createOptions = () => ({});
+
 export const { componentLoader, definition } = createWidgetDefinition("mediaRequests-requestStats", {
+  supportsAdvancedFocus: false,
   icon: IconChartBar,
-  createOptions() {
-    return {};
-  },
+  queryKey: [["widget", "mediaRequests", "getStats"]],
+  createOptions,
   contextActions: ({ integrationIds }) => [
     {
       key: "search",
-      label: (t) => t("search.mode.media.action.search.label"),
+      label: "search.mode.media.action.search.label",
       icon: IconSearch,
       onClick: () => {
         openMediaRequestSearch({ integrationIds });
diff --git a/packages/widgets/src/media-server/component.module.css b/packages/widgets/src/media-server/component.module.css
new file mode 100644
index 000000000..3987924f4
--- /dev/null
+++ b/packages/widgets/src/media-server/component.module.css
@@ -0,0 +1,13 @@
+.sessionRow {
+  cursor: pointer;
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--mantine-color-default-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: -2px;
+  }
+}
diff --git a/packages/widgets/src/media-server/component.tsx b/packages/widgets/src/media-server/component.tsx
index 2b127a234..a932091a1 100644
--- a/packages/widgets/src/media-server/component.tsx
+++ b/packages/widgets/src/media-server/component.tsx
@@ -17,7 +17,7 @@ import { MantineReactTable } from "mantine-react-table";
 
 import { clientApi } from "@homarr/api/client";
 import { objectEntries } from "@homarr/common";
-import { getIconUrl, integrationDefs } from "@homarr/definitions";
+import { getIconUrl } from "@homarr/definitions";
 import type { StreamSession } from "@homarr/integrations";
 import { createModal, useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -25,10 +25,11 @@ import type { TablerIcon } from "@homarr/ui";
 import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
+import classes from "./component.module.css";
 
-type TranscodingDecision = NonNullable<
-  NonNullable<StreamSession["currentlyPlaying"]>["metadata"]
->["transcoding"];
+type TranscodingDecision = NonNullable<NonNullable<StreamSession["currentlyPlaying"]>["metadata"]>["transcoding"];
 
 type PlaybackStatus = "directPlay" | "directStream" | "transcodeVideo" | "transcodeAudio" | "transcoding";
 
@@ -55,38 +56,53 @@ function formatBitrate(bitrateKbps: number | null | undefined): string | null {
   return bitrateKbps >= 1000 ? `${(bitrateKbps / 1000).toFixed(1)} Mbps` : `${Math.round(bitrateKbps)} kbps`;
 }
 
-export default function MediaServerWidget({ options, integrationIds }: WidgetComponentProps<"mediaServer">) {
-  const { data: currentStreams = [] } = clientApi.widget.mediaServer.getCurrentStreams.useQuery({
-    integrationIds,
-    showOnlyPlaying: options.showOnlyPlaying,
-  });
+export default function MediaServerWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+  isEditMode,
+  displayMode,
+}: WidgetComponentProps<"mediaServer">) {
+  const currentStreams =
+    getUsableWidgetQueryData(
+      clientApi.widget.mediaServer.getCurrentStreams.useQuery({
+        integrationIds,
+        showOnlyPlaying: options.showOnlyPlaying,
+      }),
+    ) ?? [];
 
   const t = useScopedI18n("widget.mediaServer");
-  const columns = useMemo<MRT_ColumnDef<StreamSession>[]>(
-    () => [
-      {
-        accessorKey: "user.username",
-        header: t("items.user"),
-        size: 160,
+  const isAdvanced = displayMode === "advanced";
+  const columns = useMemo<MRT_ColumnDef<StreamSession>[]>(() => {
+    const result: MRT_ColumnDef<StreamSession>[] = [
+      ...(width >= 300 || isAdvanced
+        ? [
+            {
+              accessorKey: "user.username",
+              header: t("items.user"),
+              size: 160,
 
-        Cell: ({ row }) => (
-          <Group gap="xs" wrap="nowrap">
-            <Avatar size={28} src={row.original.user.profilePictureUrl} />
-            <Stack gap={0} style={{ minWidth: 0 }}>
-              <Text size="xs" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                {row.original.user.username}
-              </Text>
-              <Text
-                size="10px"
-                c="dimmed"
-                style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
-              >
-                {row.original.sessionName}
-              </Text>
-            </Stack>
-          </Group>
-        ),
-      },
+              Cell: ({ row }) => (
+                <Group gap="xs" wrap="nowrap">
+                  <Avatar size={28} src={row.original.user?.profilePictureUrl} />
+                  <Stack gap={0} style={{ minWidth: 0 }}>
+                    <Text size="xs" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                      {row.original.user?.username ?? t("items.unknownUser")}
+                    </Text>
+                    <Text
+                      size="10px"
+                      c="dimmed"
+                      style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+                    >
+                      {row.original.sessionName}
+                    </Text>
+                  </Stack>
+                </Group>
+              ),
+            } satisfies MRT_ColumnDef<StreamSession>,
+          ]
+        : []),
       {
         accessorKey: "currentlyPlaying", // currentlyPlaying.name can be undefined which results in a warning. This is why we use currentlyPlaying instead of currentlyPlaying.name
         header: t("items.currentlyPlaying"),
@@ -106,7 +122,9 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
               ? Math.min(100, Math.round((positionMs / durationMs) * 100))
               : null;
           const remainingMinutes =
-            positionMs !== null && durationMs !== null ? Math.max(0, Math.round((durationMs - positionMs) / 60_000)) : null;
+            positionMs !== null && durationMs !== null
+              ? Math.max(0, Math.round((durationMs - positionMs) / 60_000))
+              : null;
 
           return (
             <Stack gap={4} style={{ minWidth: 0 }}>
@@ -135,55 +153,59 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
                   value={progressPercent}
                   size={4}
                   color={isPaused ? "yellow" : "green"}
-                  style={{ backgroundColor: "rgba(255, 255, 255, 0.15)" }}
+                  style={{ backgroundColor: "var(--mantine-color-default-border)" }}
                 />
               )}
             </Stack>
           );
         },
-      },
-      {
-        id: "status",
-        header: t("items.status"),
-        size: 110,
+      } satisfies MRT_ColumnDef<StreamSession>,
+      ...(width >= 420 || isAdvanced
+        ? [
+            {
+              id: "status",
+              header: t("items.status"),
+              size: 110,
 
-        Cell: ({ row }) => {
-          const currentlyPlaying = row.original.currentlyPlaying;
-          if (!currentlyPlaying) return null;
+              Cell: ({ row }) => {
+                const currentlyPlaying = row.original.currentlyPlaying;
+                if (!currentlyPlaying) return null;
 
-          const status = getPlaybackStatus(currentlyPlaying.metadata?.transcoding);
-          const bitrateLabel = formatBitrate(currentlyPlaying.metadata?.bitrateKbps);
+                const status = getPlaybackStatus(currentlyPlaying.metadata?.transcoding);
+                const location = options.showLocation ? currentlyPlaying.location : null;
+                const bitrateLabel = options.showBitrate ? formatBitrate(currentlyPlaying.metadata?.bitrateKbps) : null;
 
-          return (
-            <Stack gap={4} align="flex-start">
-              <Badge size="xs" variant="light" color={playbackStatusColorMap[status]}>
-                {t(`items.${status}` as never)}
-              </Badge>
-              {(currentlyPlaying.location ?? bitrateLabel) && (
-                <Group gap={4} align="center" justify="space-between" wrap="nowrap" w="100%">
-                  <Group gap={4} align="center">
-                    {currentlyPlaying.location &&
-                      (currentlyPlaying.location === "lan" ? <IconWifi size={12} /> : <IconWorld size={12} />)}
-                    {currentlyPlaying.location && (
-                      <Text size="10px" c="dimmed" tt="uppercase">
-                        {currentlyPlaying.location}
-                      </Text>
+                return (
+                  <Stack gap={4} align="flex-start">
+                    <Badge size="xs" variant="light" color={playbackStatusColorMap[status]}>
+                      {t(`items.${status}` as never)}
+                    </Badge>
+                    {(location ?? bitrateLabel) && (
+                      <Group gap={4} align="center" justify="space-between" wrap="nowrap" w="100%">
+                        <Group gap={4} align="center">
+                          {location && (location === "lan" ? <IconWifi size={12} /> : <IconWorld size={12} />)}
+                          {location && (
+                            <Text size="10px" c="dimmed" tt="uppercase">
+                              {location}
+                            </Text>
+                          )}
+                        </Group>
+                        {bitrateLabel && (
+                          <Text size="10px" c="dimmed">
+                            {bitrateLabel}
+                          </Text>
+                        )}
+                      </Group>
                     )}
-                  </Group>
-                  {bitrateLabel && (
-                    <Text size="10px" c="dimmed">
-                      {bitrateLabel}
-                    </Text>
-                  )}
-                </Group>
-              )}
-            </Stack>
-          );
-        },
-      },
-    ],
-    [t],
-  );
+                  </Stack>
+                );
+              },
+            } satisfies MRT_ColumnDef<StreamSession>,
+          ]
+        : []),
+    ];
+    return result;
+  }, [isAdvanced, options.showBitrate, options.showLocation, t, width]);
 
   // Only render the flat list of sessions when the currentStreams change
   // Otherwise it will always create a new array reference and cause the table to re-render
@@ -192,8 +214,9 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
       currentStreams.flatMap((pair) =>
         pair.sessions.map((session) => ({
           ...session,
+          integrationId: pair.integrationId,
           integrationKind: pair.integrationKind,
-          integrationName: integrationDefs[pair.integrationKind].name,
+          integrationName: pair.integrationName,
           integrationIcon: getIconUrl(pair.integrationKind),
         })),
       ),
@@ -205,15 +228,15 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
     columns,
     data: flatSessions,
     enablePagination: false,
-    enableTopToolbar: false,
+    enableTopToolbar: isAdvanced,
     enableBottomToolbar: false,
-    enableSorting: false,
+    enableSorting: isAdvanced,
     enableColumnActions: false,
     enableStickyHeader: false,
     enableColumnOrdering: false,
     enableRowSelection: false,
     enableFullScreenToggle: false,
-    enableGlobalFilter: false,
+    enableGlobalFilter: isAdvanced,
     enableDensityToggle: false,
     enableFilters: false,
     enableHiding: false,
@@ -244,19 +267,29 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
     mantineTableContainerProps: {
       style: {
         height: "100%",
+        pointerEvents: isEditMode ? "none" : undefined,
       },
     },
-    mantineTableBodyCellProps: ({ row }) => ({
-      onClick: () => {
-        openModal(
-          {
-            item: row.original,
-          },
-          {
-            title: row.original.sessionName,
-          },
-        );
-      },
+    mantineTableBodyRowProps: ({ row }) => {
+      const openDetails = () => {
+        openModal({ item: row.original }, { title: row.original.sessionName });
+      };
+
+      return {
+        className: isEditMode ? undefined : classes.sessionRow,
+        tabIndex: isEditMode ? -1 : 0,
+        "aria-label": row.original.sessionName,
+        onClick: isEditMode ? undefined : openDetails,
+        onKeyDown: isEditMode
+          ? undefined
+          : (event) => {
+              if (event.key !== "Enter" && event.key !== " ") return;
+              event.preventDefault();
+              openDetails();
+            },
+      };
+    },
+    mantineTableBodyCellProps: () => ({
       py: 4,
       style: {
         overflowX: "hidden",
@@ -265,58 +298,88 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
     }),
   });
 
-  const uniqueIntegrations = Array.from(new Set(flatSessions.map((session) => session.integrationKind))).map((kind) => {
-    const session = flatSessions.find((session) => session.integrationKind === kind);
-    return {
-      integrationKind: kind,
-      integrationIcon: session?.integrationIcon,
-      integrationName: session?.integrationName,
-    };
-  });
+  const uniqueIntegrations = currentStreams.map((stream) => ({
+    integrationId: stream.integrationId,
+    integrationKind: stream.integrationKind,
+    integrationIcon: getIconUrl(stream.integrationKind),
+    integrationName: stream.integrationName,
+  }));
+
+  const playingCount = flatSessions.filter(
+    (session) => session.currentlyPlaying && session.currentlyPlaying.playback?.state !== "paused",
+  ).length;
+  const transcodingCount = flatSessions.filter((session) => {
+    const status = getPlaybackStatus(session.currentlyPlaying?.metadata?.transcoding);
+    return status !== "directPlay" && status !== "directStream";
+  }).length;
 
   const totalBitrateKbps = flatSessions.reduce(
     (sum, session) => sum + (session.currentlyPlaying?.metadata?.bitrateKbps ?? 0),
     0,
   );
   const totalBitrateLabel = options.showBitrate ? formatBitrate(totalBitrateKbps) : null;
+  const hasFailedIntegrations = currentStreams.some(({ error }) => Boolean(error));
 
   return (
     <Stack gap={0} h="100%" display="flex">
+      {isAdvanced && (
+        <Group px="xs" py={4} gap="xs">
+          <Badge variant="light">{t("summary.sessions", { count: flatSessions.length })}</Badge>
+          <Badge variant="light" color="green">
+            {t("summary.playing", { count: playingCount })}
+          </Badge>
+          <Badge variant="light" color="orange">
+            {t("summary.transcoding", { count: transcodingCount })}
+          </Badge>
+          <Group ml="auto">
+            <IntegrationErrorIndicator results={currentStreams} />
+          </Group>
+        </Group>
+      )}
+      {!isAdvanced && hasFailedIntegrations && (
+        <Group px="xs" justify="flex-end">
+          <IntegrationErrorIndicator results={currentStreams} />
+        </Group>
+      )}
       <MantineReactTable table={table} />
-      <Group
-        gap="xs"
-        h={30}
-        px="xs"
-        pr="md"
-        justify="space-between"
-        style={{
-          borderTop: "1px solid var(--border-color)",
-        }}
-      >
-        <Group gap={4} wrap="nowrap">
-          <IconVideo size={16} style={{ flexShrink: 0 }} />
-          <Text size="sm" style={{ whiteSpace: "nowrap" }}>
-            {(t as unknown as (key: string, params?: { count: number }) => string)("footer.streams", {
-              count: flatSessions.length,
-            })}
-          </Text>
-          {totalBitrateLabel && (
-            <Text size="sm" c="dimmed" style={{ whiteSpace: "nowrap" }}>
-              {t("footer.totalBitrate", { bitrate: totalBitrateLabel })}
+      {(isAdvanced || height >= 144) && (
+        <Group
+          gap="xs"
+          h={30}
+          px="xs"
+          pr="md"
+          justify="space-between"
+          style={{
+            borderTop: "1px solid var(--border-color)",
+          }}
+        >
+          <Group gap={4} wrap="nowrap">
+            <IconVideo size={16} style={{ flexShrink: 0 }} />
+            <Text size="sm" style={{ whiteSpace: "nowrap" }}>
+              {(t as unknown as (key: string, params?: { count: number }) => string)("footer.streams", {
+                count: flatSessions.length,
+              })}
             </Text>
-          )}
-        </Group>
-        <Group gap="xs">
-          {uniqueIntegrations.map((integration) => (
-            <Group key={integration.integrationKind} gap="xs" align="center">
-              <Avatar className="media-server-icon" src={integration.integrationIcon} radius={"xs"} size="xs" />
-              <Text className="media-server-name" size="sm">
-                {integration.integrationName}
+            {totalBitrateLabel && (isAdvanced || width >= 300) && (
+              <Text size="sm" c="dimmed" style={{ whiteSpace: "nowrap" }}>
+                {t("footer.totalBitrate", { bitrate: totalBitrateLabel })}
               </Text>
-            </Group>
-          ))}
+            )}
+          </Group>
+          <Group gap="xs">
+            {uniqueIntegrations.map((integration) => (
+              <Group key={integration.integrationId} gap="xs" align="center">
+                <Avatar className="media-server-icon" src={integration.integrationIcon} radius={"xs"} size="xs" />
+                {(isAdvanced || width >= 480) && (
+                  <Text className="media-server-name" size="sm" truncate="end">
+                    {integration.integrationName}
+                  </Text>
+                )}
+              </Group>
+            ))}
+          </Group>
         </Group>
-      </Group>
+      )}
     </Stack>
   );
 }
@@ -356,8 +419,8 @@ const ItemInfoModal = createModal<{ item: StreamSession }>(({ innerProps }) => {
         itemKey={t("user")}
         value={
           <Group gap="sm" align="center">
-            <Avatar size="sm" src={innerProps.item.user.profilePictureUrl} />{" "}
-            <Text>{innerProps.item.user.username}</Text>
+            <Avatar size="sm" src={innerProps.item.user?.profilePictureUrl} />{" "}
+            <Text>{innerProps.item.user?.username ?? t("unknownUser")}</Text>
           </Group>
         }
       />
diff --git a/packages/widgets/src/media-server/index.ts b/packages/widgets/src/media-server/index.ts
index ef746e921..46f3fd489 100644
--- a/packages/widgets/src/media-server/index.ts
+++ b/packages/widgets/src/media-server/index.ts
@@ -2,11 +2,17 @@ import { IconVideo } from "@tabler/icons-react";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaServer", {
   icon: IconVideo,
+  queryKey: [["widget", "mediaServer", "getCurrentStreams"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      integrationIds: scope.integrationIds,
+      showOnlyPlaying: scope.options.showOnlyPlaying,
+    }),
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/media-transcoding/component.tsx b/packages/widgets/src/media-transcoding/component.tsx
index fe4873e45..eddf8adea 100644
--- a/packages/widgets/src/media-transcoding/component.tsx
+++ b/packages/widgets/src/media-transcoding/component.tsx
@@ -1,7 +1,21 @@
 "use client";
 
-import { useState } from "react";
-import { Center, Divider, Group, Pagination, SegmentedControl, Stack, Text } from "@mantine/core";
+import { useEffect, useState } from "react";
+import type { ReactNode } from "react";
+import { getQueryKey } from "@trpc/react-query";
+import {
+  Center,
+  Divider,
+  Group,
+  Pagination,
+  Paper,
+  ScrollArea,
+  SegmentedControl,
+  SimpleGrid,
+  Stack,
+  Text,
+  VisuallyHidden,
+} from "@mantine/core";
 import { IconClipboardList, IconCpu2, IconReportAnalytics } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -11,6 +25,8 @@ import type { TablerIcon } from "@homarr/ui";
 import { views } from ".";
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
+import { useWidgetRuntimeQueries } from "../runtime-hooks";
 import { HealthCheckStatus } from "./health-check-status";
 import { QueuePanel } from "./panels/queue.panel";
 import { StatisticsPanel } from "./panels/statistics.panel";
@@ -30,23 +46,85 @@ export default function MediaTranscodingWidget({
   integrationIds,
   options,
   width,
+  height,
+  displayMode,
+  widgetRuntimeRef,
 }: WidgetComponentProps<"mediaTranscoding">) {
-  const [queuePage, setQueuePage] = useState(1);
-  const queuePageSize = 10;
+  const isAdvanced = displayMode === "advanced";
+  const queuePageSize = getQueuePageSize(height, isAdvanced);
+  const [queuePagination, setQueuePagination] = useState<QueuePaginationState>(() => ({
+    page: 1,
+    pageSize: queuePageSize,
+    isAdvanced,
+  }));
+  const requestPagination = resolveQueuePagination(queuePagination, queuePageSize, isAdvanced, null);
   const input = {
     integrationId: integrationIds[0] ?? "",
     pageSize: queuePageSize,
-    page: queuePage,
+    page: requestPagination.page,
   };
-  const { data: transcodingData } = clientApi.widget.mediaTranscoding.getDataAsync.useQuery(input);
+  useWidgetRuntimeQueries(widgetRuntimeRef, [
+    getQueryKey(clientApi.widget.mediaTranscoding.getDataAsync, input, "query"),
+  ]);
+  const transcodingData = getUsableWidgetQueryData(clientApi.widget.mediaTranscoding.getDataAsync.useQuery(input));
 
   const [view, setView] = useState<View>(options.defaultView);
   const t = useI18n("widget.mediaTranscoding");
+  const totalQueuePages = transcodingData
+    ? Math.max(1, Math.ceil(transcodingData.data.queue.totalCount / queuePageSize))
+    : null;
+  const resolvedPagination = resolveQueuePagination(queuePagination, queuePageSize, isAdvanced, totalQueuePages);
+  const queuePage = resolvedPagination.page;
+
+  useEffect(() => {
+    setQueuePagination((current) => {
+      const next = resolveQueuePagination(current, queuePageSize, isAdvanced, totalQueuePages);
+      return current.page === next.page && current.pageSize === next.pageSize && current.isAdvanced === next.isAdvanced
+        ? current
+        : next;
+    });
+  }, [isAdvanced, queuePageSize, totalQueuePages]);
+
+  const handleQueuePageChange = (page: number) => {
+    setQueuePagination({ page, pageSize: queuePageSize, isAdvanced });
+  };
 
   if (!transcodingData) return <WidgetEmptyState />;
 
-  const totalQueuePages = Math.ceil((transcodingData.data.queue.totalCount || 1) / queuePageSize);
-  const isTiny = width < 256;
+  const queuePageCount = totalQueuePages ?? 1;
+  const isTiny = !isAdvanced && (width < 280 || height < 140);
+  const footerLayout = getTranscodingFooterLayout(width, height);
+
+  if (isAdvanced) {
+    return (
+      <Stack gap="xs" h="100%" p="xs">
+        <ScrollArea h="100%" style={{ flex: 1 }}>
+          <SimpleGrid cols={width >= 1100 ? 3 : width >= 700 ? 2 : 1} spacing="sm">
+            <AdvancedPanel title={t("tab.workers")} icon={IconCpu2}>
+              <WorkersPanel workers={transcodingData.data.workers} isTiny={false} />
+            </AdvancedPanel>
+            <AdvancedPanel title={t("tab.queue")} icon={IconClipboardList}>
+              <QueuePanel queue={transcodingData.data.queue} />
+            </AdvancedPanel>
+            <AdvancedPanel title={t("tab.statistics")} icon={IconReportAnalytics}>
+              <StatisticsPanel statistics={transcodingData.data.statistics} />
+            </AdvancedPanel>
+          </SimpleGrid>
+        </ScrollArea>
+        <Group gap="xs" justify={queuePageCount > 1 ? "space-between" : "flex-end"} wrap="nowrap">
+          {queuePageCount > 1 && (
+            <QueuePaginationControls
+              total={queuePageCount}
+              value={queuePage}
+              onChange={handleQueuePageChange}
+              layout={footerLayout}
+            />
+          )}
+          <HealthCheckStatus statistics={transcodingData.data.statistics} />
+        </Group>
+      </Stack>
+    );
+  }
 
   return (
     <Stack gap={4} h="100%">
@@ -58,7 +136,7 @@ export default function MediaTranscodingWidget({
         <StatisticsPanel statistics={transcodingData.data.statistics} />
       )}
       <Divider />
-      <Group gap="xs" mb={4} ms={4} me={8}>
+      <Group gap="xs" mb={4} ms={4} me={8} wrap="nowrap">
         <SegmentedControl
           data={views.map((value) => {
             const Icon = viewIcons[value];
@@ -66,10 +144,12 @@ export default function MediaTranscodingWidget({
               label: (
                 <Center style={{ gap: 4 }}>
                   <Icon size={12} />
-                  {!isTiny && (
+                  {footerLayout.showTabLabels ? (
                     <Text span size="xs">
                       {t(`tab.${value}`)}
                     </Text>
+                  ) : (
+                    <VisuallyHidden>{t(`tab.${value}`)}</VisuallyHidden>
                   )}
                 </Center>
               ),
@@ -84,26 +164,27 @@ export default function MediaTranscodingWidget({
             }
           }}
           size="xs"
+          style={{ minWidth: 0, flexShrink: footerLayout.showTabLabels ? 1 : 0 }}
         />
 
-        <Group gap="xs" ml="auto">
-          {view === "queue" && (
+        <Group gap="xs" ml="auto" wrap="nowrap">
+          {view === "queue" && queuePageCount > 1 && (
             <>
-              <Pagination.Root total={totalQueuePages} value={queuePage} onChange={setQueuePage} size="xs">
-                <Group gap={2} justify="center">
-                  {!isTiny && <Pagination.First disabled={transcodingData.data.queue.startIndex === 1} />}
-                  <Pagination.Previous disabled={transcodingData.data.queue.startIndex === 1} />
-                  <Pagination.Next disabled={transcodingData.data.queue.startIndex === totalQueuePages} />
-                  {!isTiny && <Pagination.Last disabled={transcodingData.data.queue.startIndex === totalQueuePages} />}
-                </Group>
-              </Pagination.Root>
-              <Text size="xs">
-                {t("currentIndex", {
-                  start: String(transcodingData.data.queue.startIndex + 1),
-                  end: String(transcodingData.data.queue.endIndex + 1),
-                  total: String(transcodingData.data.queue.totalCount),
-                })}
-              </Text>
+              <QueuePaginationControls
+                total={queuePageCount}
+                value={queuePage}
+                onChange={handleQueuePageChange}
+                layout={footerLayout}
+              />
+              {footerLayout.showPageRange && (
+                <Text size="xs" style={{ whiteSpace: "nowrap" }}>
+                  {t("currentIndex", {
+                    start: String(transcodingData.data.queue.startIndex + 1),
+                    end: String(transcodingData.data.queue.endIndex + 1),
+                    total: String(transcodingData.data.queue.totalCount),
+                  })}
+                </Text>
+              )}
             </>
           )}
 
@@ -113,3 +194,66 @@ export default function MediaTranscodingWidget({
     </Stack>
   );
 }
+
+export const getQueuePageSize = (height: number, isAdvanced: boolean): number => {
+  if (isAdvanced) return 25;
+  return Math.max(3, Math.min(15, Math.floor((height - 84) / 28)));
+};
+
+export const getTranscodingFooterLayout = (width: number, height: number) => ({
+  showTabLabels: width >= 420 && height >= 160,
+  showPageEdges: width >= 360,
+  showPageItems: width >= 600,
+  showPageRange: width >= 760,
+});
+
+interface QueuePaginationControlsProps {
+  total: number;
+  value: number;
+  onChange: (page: number) => void;
+  layout: ReturnType<typeof getTranscodingFooterLayout>;
+}
+
+const QueuePaginationControls = ({ total, value, onChange, layout }: QueuePaginationControlsProps) => (
+  <Pagination.Root total={total} value={value} onChange={onChange} size="xs">
+    <Group gap={2} justify="center" wrap="nowrap">
+      {layout.showPageEdges && <Pagination.First disabled={value === 1} />}
+      <Pagination.Previous disabled={value === 1} />
+      {layout.showPageItems && <Pagination.Items />}
+      <Pagination.Next disabled={value === total} />
+      {layout.showPageEdges && <Pagination.Last disabled={value === total} />}
+    </Group>
+  </Pagination.Root>
+);
+
+interface QueuePaginationState {
+  page: number;
+  pageSize: number;
+  isAdvanced: boolean;
+}
+
+export const resolveQueuePagination = (
+  state: QueuePaginationState,
+  pageSize: number,
+  isAdvanced: boolean,
+  totalPages: number | null,
+): QueuePaginationState => ({
+  page:
+    state.pageSize !== pageSize || state.isAdvanced !== isAdvanced
+      ? 1
+      : Math.max(1, totalPages === null ? state.page : Math.min(state.page, totalPages)),
+  pageSize,
+  isAdvanced,
+});
+
+const AdvancedPanel = ({ title, icon: Icon, children }: { title: string; icon: TablerIcon; children: ReactNode }) => (
+  <Paper withBorder radius="sm" p="xs" mih={280} style={{ display: "flex", flexDirection: "column" }}>
+    <Group gap="xs" mb="xs">
+      <Icon size={16} />
+      <Text size="sm" fw={600}>
+        {title}
+      </Text>
+    </Group>
+    {children}
+  </Paper>
+);
diff --git a/packages/widgets/src/media-transcoding/health-check-status.tsx b/packages/widgets/src/media-transcoding/health-check-status.tsx
index 24a8100d3..17c575899 100644
--- a/packages/widgets/src/media-transcoding/health-check-status.tsx
+++ b/packages/widgets/src/media-transcoding/health-check-status.tsx
@@ -1,11 +1,13 @@
 import type { MantineColor } from "@mantine/core";
-import { Divider, Group, HoverCard, Indicator, RingProgress, Stack, Text } from "@mantine/core";
+import { ActionIcon, Divider, Group, Indicator, Popover, RingProgress, Stack, Text } from "@mantine/core";
 import { useColorScheme } from "@mantine/hooks";
 import { IconHeartbeat } from "@tabler/icons-react";
 
 import type { TdarrStatistics } from "@homarr/integrations";
 import { useI18n } from "@homarr/translation/client";
 
+import actionTargetClasses from "../common/action-target.module.css";
+
 interface HealthCheckStatusProps {
   statistics: TdarrStatistics;
 }
@@ -21,13 +23,15 @@ export function HealthCheckStatus(props: HealthCheckStatusProps) {
       : "green";
 
   return (
-    <HoverCard position="bottom" width={250} shadow="sm">
-      <HoverCard.Target>
-        <Indicator color={textColor(indicatorColor, colorScheme)} size={6} display="flex">
-          <IconHeartbeat size={16} />
-        </Indicator>
-      </HoverCard.Target>
-      <HoverCard.Dropdown
+    <Popover position="bottom" width={250} shadow="sm" withArrow>
+      <Popover.Target>
+        <ActionIcon className={actionTargetClasses.root} variant="subtle" size="sm" aria-label={t("title")}>
+          <Indicator color={textColor(indicatorColor, colorScheme)} size={6} display="flex">
+            <IconHeartbeat size={16} />
+          </Indicator>
+        </ActionIcon>
+      </Popover.Target>
+      <Popover.Dropdown
         style={{
           backgroundColor: "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-8))",
         }}
@@ -70,8 +74,8 @@ export function HealthCheckStatus(props: HealthCheckStatusProps) {
             </Stack>
           </Group>
         </Stack>
-      </HoverCard.Dropdown>
-    </HoverCard>
+      </Popover.Dropdown>
+    </Popover>
   );
 }
 
diff --git a/packages/widgets/src/media-transcoding/index.ts b/packages/widgets/src/media-transcoding/index.ts
index ff4922dad..fc91622e3 100644
--- a/packages/widgets/src/media-transcoding/index.ts
+++ b/packages/widgets/src/media-transcoding/index.ts
@@ -4,13 +4,16 @@ import { z } from "zod/v4";
 import { capitalize } from "@homarr/common";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const views = ["workers", "queue", "statistics"] as const;
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaTranscoding", {
   icon: IconTransform,
+  queryKey: [["widget", "mediaTranscoding", "getDataAsync"]],
+  queryMatcher: matchesWidgetRuntimeQuery,
+  maxIntegrations: 1,
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/media-transcoding/layout.spec.ts b/packages/widgets/src/media-transcoding/layout.spec.ts
new file mode 100644
index 000000000..e90a06f51
--- /dev/null
+++ b/packages/widgets/src/media-transcoding/layout.spec.ts
@@ -0,0 +1,52 @@
+import { describe, expect, test } from "vitest";
+
+import { getQueuePageSize, getTranscodingFooterLayout, resolveQueuePagination } from "./component";
+import { toRingProgressSections } from "./panels/statistics.panel";
+
+describe("media transcoding layout", () => {
+  test("keeps compact queues bounded to the available height", () => {
+    expect(getQueuePageSize(140, false)).toBe(3);
+    expect(getQueuePageSize(500, false)).toBe(14);
+    expect(getQueuePageSize(2000, false)).toBe(15);
+  });
+
+  test("loads a bounded deeper queue in advanced mode", () => {
+    expect(getQueuePageSize(200, true)).toBe(25);
+  });
+
+  test("reveals footer detail only as space becomes available", () => {
+    expect(getTranscodingFooterLayout(280, 220)).toEqual({
+      showTabLabels: false,
+      showPageEdges: false,
+      showPageItems: false,
+      showPageRange: false,
+    });
+    expect(getTranscodingFooterLayout(600, 220)).toEqual({
+      showTabLabels: true,
+      showPageEdges: true,
+      showPageItems: true,
+      showPageRange: false,
+    });
+    expect(getTranscodingFooterLayout(760, 220).showPageRange).toBe(true);
+    expect(getTranscodingFooterLayout(760, 120).showTabLabels).toBe(false);
+  });
+
+  test("resets the queue when display mode or page size changes", () => {
+    const compact = { page: 7, pageSize: 10, isAdvanced: false };
+
+    expect(resolveQueuePagination(compact, 25, true, 8)).toEqual({ page: 1, pageSize: 25, isAdvanced: true });
+    expect(resolveQueuePagination(compact, 12, false, 8)).toEqual({ page: 1, pageSize: 12, isAdvanced: false });
+  });
+
+  test("clamps the queue page when the result count shrinks", () => {
+    expect(resolveQueuePagination({ page: 7, pageSize: 10, isAdvanced: false }, 10, false, 3)).toEqual({
+      page: 3,
+      pageSize: 10,
+      isAdvanced: false,
+    });
+  });
+
+  test("does not create NaN chart sections for empty statistics", () => {
+    expect(toRingProgressSections([{ name: "none", value: 0 }])).toEqual([]);
+  });
+});
diff --git a/packages/widgets/src/media-transcoding/panels/statistics.panel.tsx b/packages/widgets/src/media-transcoding/panels/statistics.panel.tsx
index c09647138..e31f51de1 100644
--- a/packages/widgets/src/media-transcoding/panels/statistics.panel.tsx
+++ b/packages/widgets/src/media-transcoding/panels/statistics.panel.tsx
@@ -71,8 +71,9 @@ const StatisticRingProgress = ({ items, label }: StatisticRingProgressProps) =>
   );
 };
 
-function toRingProgressSections(segments: TdarrPieSegment[]): RingProgressProps["sections"] {
+export function toRingProgressSections(segments: TdarrPieSegment[]): RingProgressProps["sections"] {
   const total = segments.reduce((prev, curr) => prev + curr.value, 0);
+  if (total <= 0) return [];
   return segments.map((segment, index) => ({
     value: (segment.value * 100) / total,
     tooltip: `${segment.name}: ${segment.value}`,
diff --git a/packages/widgets/src/minecraft/server-status/component.tsx b/packages/widgets/src/minecraft/server-status/component.tsx
index 20214e3ac..39bbfbf06 100644
--- a/packages/widgets/src/minecraft/server-status/component.tsx
+++ b/packages/widgets/src/minecraft/server-status/component.tsx
@@ -1,23 +1,43 @@
 "use client";
 
-import { Box, Flex, Group, Text, Tooltip } from "@mantine/core";
+import { Badge, Box, Flex, Group, Progress, Stack, Text, Tooltip, VisuallyHidden } from "@mantine/core";
 import { IconCube, IconUsersGroup } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { formatNumber } from "@homarr/common";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
 import type { WidgetComponentProps } from "../../definition";
 
-export default function MinecraftServerStatusWidget({ options }: WidgetComponentProps<"minecraftServerStatus">) {
-  const { data: result } = clientApi.widget.minecraft.getServerStatus.useQuery(options);
-  const tStatus = useScopedI18n("widget.minecraftServerStatus.status");
+export default function MinecraftServerStatusWidget({
+  options,
+  width,
+  height,
+}: WidgetComponentProps<"minecraftServerStatus">) {
+  const { data: result, isPending, error } = clientApi.widget.minecraft.getServerStatus.useQuery(options);
+  const t = useI18n();
 
+  if (isPending) {
+    return (
+      <Flex align="center" justify="center" h="100%">
+        <Text c="dimmed" size="sm">
+          {t("common.action.loading")}
+        </Text>
+      </Flex>
+    );
+  }
+  if (error && !result) throw error;
   if (!result) return <WidgetEmptyState />;
   const { data } = result;
 
   const title = options.title.trim().length > 0 ? options.title : options.domain;
+  const isDense = width < 220 || height < 120;
+  const showServerIcon = !isDense && height >= 144;
+  const showMetadata = width >= 260 && height >= 180;
+  const showCapacity = width >= 180 && height >= 140;
+  const iconSize = Math.max(40, Math.min(80, width * 0.45, height * 0.45));
+  const playerPercent = data.online && data.players.max > 0 ? (data.players.online / data.players.max) * 100 : 0;
 
   return (
     <Flex
@@ -25,24 +45,44 @@ export default function MinecraftServerStatusWidget({ options }: WidgetComponent
       h="100%"
       w="100%"
       direction="column"
-      p="sm"
+      p={isDense ? "xs" : "sm"}
       justify="center"
       align="center"
     >
-      <Group gap="xs" wrap="nowrap" align="center">
-        <Tooltip label={data.online ? tStatus("online") : tStatus("offline")}>
-          <Box miw="md" h="md" bg={data.online ? "teal" : "red"} style={{ borderRadius: "100%" }}></Box>
+      <Group gap="xs" wrap="nowrap" align="center" maw="100%">
+        <Tooltip
+          label={
+            data.online
+              ? t("widget.minecraftServerStatus.status.online")
+              : t("widget.minecraftServerStatus.status.offline")
+          }
+        >
+          <Box aria-hidden miw="md" h="md" bg={data.online ? "teal" : "red"} style={{ borderRadius: "100%" }} />
         </Tooltip>
-        <Text size="md" fw="bold">
+        <VisuallyHidden>
+          {data.online
+            ? t("widget.minecraftServerStatus.status.online")
+            : t("widget.minecraftServerStatus.status.offline")}
+        </VisuallyHidden>
+        <Text size={showMetadata ? "lg" : "md"} fw="bold" truncate="end">
           {title}
         </Text>
       </Group>
+      {showMetadata && (
+        <Group gap="xs" mt="xs" wrap="wrap" justify="center">
+          <Badge variant="light">{options.domain}</Badge>
+          {options.isBedrockServer && (
+            <Badge variant="outline">{t("widget.minecraftServerStatus.option.isBedrockServer.label")}</Badge>
+          )}
+        </Group>
+      )}
       {data.online && (
         <>
           {!options.isBedrockServer &&
+            showServerIcon &&
             (data.icon ? (
               <img
-                style={{ flex: 1, transform: "scale(0.8)", objectFit: "contain" }}
+                style={{ flex: 1, width: iconSize, maxHeight: iconSize, objectFit: "contain" }}
                 alt={`minecraft icon ${options.domain}`}
                 src={data.icon}
               />
@@ -55,17 +95,25 @@ export default function MinecraftServerStatusWidget({ options }: WidgetComponent
                   justifyContent: "center",
                 }}
               >
-                <IconCube size="3rem" color="var(--mantine-color-gray-5)" />
+                <IconCube size={iconSize} color="var(--mantine-color-gray-5)" />
               </Box>
             ))}
-          <Group gap={5} c="gray.6" align="center">
-            <IconUsersGroup size="1rem" />
-            <Text size="md">
-              {formatNumber(data.players.online, 1)} / {formatNumber(data.players.max, 1)}
-            </Text>
-          </Group>
+          <Stack gap={4} w={showCapacity ? "min(100%, 420px)" : "auto"} align="stretch">
+            <Group gap={5} c="dimmed" align="center" justify="center">
+              <IconUsersGroup size={showMetadata ? "1.25rem" : "1rem"} />
+              <Text size={showMetadata ? "lg" : isDense ? "sm" : "md"}>
+                {formatNumber(data.players.online, 1)} / {formatNumber(data.players.max, 1)}
+              </Text>
+            </Group>
+            {showCapacity && <Progress value={playerPercent} color={playerPercent >= 90 ? "orange" : "teal"} />}
+          </Stack>
         </>
       )}
+      {showMetadata && !data.online && (
+        <Text mt="md" c="dimmed" size="sm">
+          {options.domain}
+        </Text>
+      )}
     </Flex>
   );
 }
diff --git a/packages/widgets/src/minecraft/server-status/index.ts b/packages/widgets/src/minecraft/server-status/index.ts
index 028393955..91f3e6cdc 100644
--- a/packages/widgets/src/minecraft/server-status/index.ts
+++ b/packages/widgets/src/minecraft/server-status/index.ts
@@ -1,12 +1,19 @@
 import { IconBrandMinecraft } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
-import { createWidgetDefinition } from "../../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../../definition";
 import { optionsBuilder } from "../../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("minecraftServerStatus", {
+  supportsAdvancedFocus: false,
   icon: IconBrandMinecraft,
-  queryKey: [["widget", "minecraft"]],
+  queryKey: [["widget", "minecraft", "getServerStatus"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      title: scope.options.title,
+      domain: scope.options.domain,
+      isBedrockServer: scope.options.isBedrockServer,
+    }),
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/modals/widget-edit-modal.tsx b/packages/widgets/src/modals/widget-edit-modal.tsx
index bcfb75454..68be7d2d2 100644
--- a/packages/widgets/src/modals/widget-edit-modal.tsx
+++ b/packages/widgets/src/modals/widget-edit-modal.tsx
@@ -8,17 +8,18 @@ import { z } from "zod/v4";
 
 import { objectEntries } from "@homarr/common";
 import { useSession } from "@homarr/auth/client";
+import { useOptionalBoard } from "@homarr/boards/context";
 import type { WidgetKind } from "@homarr/definitions";
 import { createModal, ModalFormFooter, modalSizeForm, useModalAction } from "@homarr/modals";
 import type { SettingsContextProps } from "@homarr/settings/creator";
 import { useI18n } from "@homarr/translation/client";
 import { zodErrorMap } from "@homarr/validation/form/i18n";
 
-import { widgetImports } from "..";
 import { getInputForType } from "../_inputs";
 import { FormProvider, useForm } from "../_inputs/form";
 import type { BoardItemAdvancedOptions } from "../../../validation/src/shared";
 import type { OptionsBuilderResult } from "../options";
+import type { WidgetDefinition } from "../definition";
 import { OPTIONS_SUPER_REFINE } from "../options";
 import type { IntegrationSelectOption } from "../widget-integration-select";
 import { WidgetIntegrationSelect } from "../widget-integration-select";
@@ -32,19 +33,22 @@ export interface WidgetEditModalState {
   advancedOptions: BoardItemAdvancedOptions;
 }
 
-interface ModalProps<TSort extends WidgetKind> {
+export interface WidgetEditModalProps<TSort extends WidgetKind> {
   kind: TSort;
+  definition: WidgetDefinition;
   value: WidgetEditModalState;
   onSuccessfulEdit: (value: WidgetEditModalState) => void;
   integrationData: IntegrationSelectOption[];
   integrationSupport: boolean;
   settings: SettingsContextProps;
   itemId?: string;
+  boardId?: string;
   appId?: string;
 }
 
-export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, innerProps }) => {
+export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({ actions, innerProps }) => {
   const t = useI18n();
+  const board = useOptionalBoard();
   const { data: session } = useSession();
   const [advancedOptions, setAdvancedOptions] = useState<BoardItemAdvancedOptions>(innerProps.value.advancedOptions);
   const appEditRef = useRef<EmbeddedAppEditFormHandle>(null);
@@ -53,10 +57,10 @@ export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, i
   z.config({
     customError: zodErrorMap(t),
   });
-  const { definition } = widgetImports[innerProps.kind];
-  const integrationSupport = "supportedIntegrations" in definition;
+  const { definition } = innerProps;
   const integrationsRequired =
-    integrationSupport && (!("integrationsRequired" in definition) || definition.integrationsRequired !== false);
+    innerProps.integrationSupport &&
+    (!("integrationsRequired" in definition) || definition.integrationsRequired !== false);
   const options = definition.createOptions(innerProps.settings) as Record<string, OptionsBuilderResult[string]>;
   const optionsSuperRefine = (options as Record<symbol, unknown>)[OPTIONS_SUPER_REFINE] as
     | ((data: Record<string, unknown>, ctx: z.RefinementCtx) => void)
@@ -95,6 +99,7 @@ export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, i
   const { openModal } = useModalAction(WidgetAdvancedOptionsModal);
 
   const canModifyApps = session?.user.permissions.includes("app-modify-all") ?? false;
+  const canConfigureWidget = innerProps.kind !== "customApi" || (session?.user.permissions.includes("admin") ?? false);
   const appId = innerProps.appId;
   const showAppTab = innerProps.kind === "app" && canModifyApps && Boolean(appId);
 
@@ -123,44 +128,43 @@ export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, i
 
   const widgetFormContent = (
     <Stack>
-      {innerProps.integrationSupport && (
+      {canConfigureWidget && innerProps.integrationSupport && (
         <WidgetIntegrationSelect
           label={t("item.edit.field.integrations.label")}
           data={innerProps.integrationData}
-          canSelectMultiple={
-            ((widgetImports[innerProps.kind].definition as { maxIntegrations?: number }).maxIntegrations ?? Infinity) >
-            1
-          }
+          canSelectMultiple={((definition as { maxIntegrations?: number }).maxIntegrations ?? Infinity) > 1}
           withAsterisk={integrationsRequired}
           {...form.getInputProps("integrationIds")}
         />
       )}
-      {Object.entries(options).map(([key, value]) => {
-        const Input = getInputForType(value.type);
+      {canConfigureWidget &&
+        Object.entries(options).map(([key, value]) => {
+          const Input = getInputForType(value.type);
 
-        if (
-          !Input ||
-          value.shouldHide?.(
-            form.values.options as never,
-            innerProps.integrationData
-              .filter(({ id }) => form.values.integrationIds.includes(id))
-              .map(({ kind }) => kind),
-          )
-        ) {
-          return null;
-        }
+          if (
+            !Input ||
+            value.shouldHide?.(
+              form.values.options as never,
+              innerProps.integrationData
+                .filter(({ id }) => form.values.integrationIds.includes(id))
+                .map(({ kind }) => kind),
+            )
+          ) {
+            return null;
+          }
 
-        return (
-          <Input
-            key={key}
-            kind={innerProps.kind}
-            property={key}
-            options={value as never}
-            initialOptions={innerProps.value.options}
-            itemId={innerProps.itemId}
-          />
-        );
-      })}
+          return (
+            <Input
+              key={key}
+              kind={innerProps.kind}
+              property={key}
+              options={value as never}
+              initialOptions={innerProps.value.options}
+              itemId={innerProps.itemId}
+              boardId={innerProps.boardId ?? board?.id}
+            />
+          );
+        })}
       {showAppTab ? (
         <Button
           variant="subtle"
diff --git a/packages/widgets/src/network-controller/network-status/component.tsx b/packages/widgets/src/network-controller/network-status/component.tsx
index c4e892dba..bfd25dec5 100644
--- a/packages/widgets/src/network-controller/network-status/component.tsx
+++ b/packages/widgets/src/network-controller/network-status/component.tsx
@@ -1,15 +1,17 @@
 "use client";
 
 import { useMemo } from "react";
-import { Box } from "@mantine/core";
+import { Box, Card, Center, SimpleGrid, Text } from "@mantine/core";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 import objectSupport from "dayjs/plugin/objectSupport";
 import relativeTime from "dayjs/plugin/relativeTime";
 
 import { clientApi } from "@homarr/api/client";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
+import { getNetworkControllerStatusLayout } from "./layout";
 import { WifiVariant } from "./variants/wifi-variant";
 import { WiredVariant } from "./variants/wired-variant";
 
@@ -20,26 +22,63 @@ dayjs.extend(duration);
 export default function NetworkControllerNetworkStatusWidget({
   options,
   integrationIds,
+  displayMode,
+  width,
+  height,
 }: WidgetComponentProps<"networkControllerStatus">) {
-  const { data: summaries = [] } = clientApi.widget.networkController.summary.useQuery({
+  const {
+    data: summaries,
+    error,
+    isPending,
+  } = clientApi.widget.networkController.summary.useQuery({
     integrationIds,
   });
+  const t = useScopedI18n("widget.networkControllerStatus");
+  const tCommon = useScopedI18n("common");
 
-  const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);
+  const data = useMemo(() => (summaries ?? []).flatMap(({ summary }) => summary), [summaries]);
+  const countWifiGuests = data.reduce((sum, summary) => sum + summary.wifi.guests, 0);
+  const countWifiUsers = data.reduce((sum, summary) => sum + summary.wifi.users, 0);
+  const countLanGuests = data.reduce((sum, summary) => sum + summary.lan.guests, 0);
+  const countLanUsers = data.reduce((sum, summary) => sum + summary.lan.users, 0);
+  const layout = getNetworkControllerStatusLayout({ width, height, displayMode, content: options.content });
+
+  if (error && summaries === undefined) throw error;
+
+  if (isPending || data.length === 0) {
+    return (
+      <Center h="100%" p="sm">
+        <Text c="dimmed" size="sm" ta="center">
+          {isPending ? tCommon("action.loading") : t("error.integrationsDisconnected")}
+        </Text>
+      </Center>
+    );
+  }
 
   return (
-    <Box p={"sm"}>
-      {options.content === "wifi" ? (
-        <WifiVariant
-          countGuests={data.reduce((sum, summary) => sum + summary.wifi.guests, 0)}
-          countUsers={data.reduce((sum, summary) => sum + summary.wifi.users, 0)}
-        />
-      ) : (
-        <WiredVariant
-          countGuests={data.reduce((sum, summary) => sum + summary.lan.guests, 0)}
-          countUsers={data.reduce((sum, summary) => sum + summary.lan.users, 0)}
-        />
-      )}
+    <Box p={layout.padding} h="100%">
+      <SimpleGrid cols={layout.columns} h="100%" spacing="sm">
+        {layout.showWifi && (
+          <Card p={layout.cardPadding} withBorder={layout.withBorder}>
+            <WifiVariant
+              countGuests={countWifiGuests}
+              countUsers={countWifiUsers}
+              compact={layout.compact}
+              horizontal={layout.horizontalStats}
+            />
+          </Card>
+        )}
+        {layout.showWired && (
+          <Card p={layout.cardPadding} withBorder={layout.withBorder}>
+            <WiredVariant
+              countGuests={countLanGuests}
+              countUsers={countLanUsers}
+              compact={layout.compact}
+              horizontal={layout.horizontalStats}
+            />
+          </Card>
+        )}
+      </SimpleGrid>
     </Box>
   );
 }
diff --git a/packages/widgets/src/network-controller/network-status/layout.spec.ts b/packages/widgets/src/network-controller/network-status/layout.spec.ts
new file mode 100644
index 000000000..8e6376f8b
--- /dev/null
+++ b/packages/widgets/src/network-controller/network-status/layout.spec.ts
@@ -0,0 +1,49 @@
+import { describe, expect, test } from "vitest";
+
+import { getNetworkControllerStatusLayout } from "./layout";
+
+describe("network controller status layout", () => {
+  test.each([
+    {
+      name: "minimum compact",
+      input: { width: 160, height: 90, displayMode: "compact" as const, content: "wifi" as const },
+      expected: { padding: "xs", columns: 1, showWifi: true, showWired: false, horizontalStats: false },
+    },
+    {
+      name: "short compact",
+      input: { width: 200, height: 149, displayMode: "compact" as const, content: "wired" as const },
+      expected: { padding: "sm", columns: 1, showWifi: false, showWired: true, horizontalStats: true },
+    },
+    {
+      name: "typical compact",
+      input: { width: 320, height: 220, displayMode: "compact" as const, content: "wifi" as const },
+      expected: { padding: "sm", columns: 1, showWifi: true, showWired: false, horizontalStats: false },
+    },
+    {
+      name: "advanced below wide boundary",
+      input: { width: 559, height: 320, displayMode: "advanced" as const, content: "wifi" as const },
+      expected: { padding: "md", columns: 1, showWifi: true, showWired: true, horizontalStats: false },
+    },
+    {
+      name: "wide advanced",
+      input: { width: 560, height: 320, displayMode: "advanced" as const, content: "wired" as const },
+      expected: { padding: "md", columns: 2, showWifi: true, showWired: true, horizontalStats: false },
+    },
+    {
+      name: "advanced at 200 percent zoom",
+      input: { width: 280, height: 320, displayMode: "advanced" as const, content: "wired" as const },
+      expected: { padding: "md", columns: 1, showWifi: true, showWired: true, horizontalStats: false },
+    },
+  ])("selects the $name tier", ({ input, expected }) => {
+    expect(getNetworkControllerStatusLayout(input)).toMatchObject(expected);
+  });
+
+  test("keeps breakpoint boundaries explicit", () => {
+    expect(
+      getNetworkControllerStatusLayout({ width: 200, height: 150, displayMode: "compact", content: "wifi" }),
+    ).toMatchObject({ padding: "sm", horizontalStats: false });
+    expect(
+      getNetworkControllerStatusLayout({ width: 199, height: 119, displayMode: "compact", content: "wifi" }),
+    ).toMatchObject({ padding: "xs", horizontalStats: false });
+  });
+});
diff --git a/packages/widgets/src/network-controller/network-status/layout.ts b/packages/widgets/src/network-controller/network-status/layout.ts
new file mode 100644
index 000000000..549ec1f62
--- /dev/null
+++ b/packages/widgets/src/network-controller/network-status/layout.ts
@@ -0,0 +1,42 @@
+import type { WidgetComponentProps } from "../../definition";
+
+type NetworkStatusContent = WidgetComponentProps<"networkControllerStatus">["options"]["content"];
+type NetworkStatusDisplayMode = WidgetComponentProps<"networkControllerStatus">["displayMode"];
+
+interface NetworkControllerStatusLayoutInput {
+  width: number;
+  height: number;
+  displayMode: NetworkStatusDisplayMode;
+  content: NetworkStatusContent;
+}
+
+export interface NetworkControllerStatusLayout {
+  padding: "xs" | "sm" | "md";
+  columns: 1 | 2;
+  showWifi: boolean;
+  showWired: boolean;
+  cardPadding: 0 | "md";
+  withBorder: boolean;
+  compact: boolean;
+  horizontalStats: boolean;
+}
+
+export const getNetworkControllerStatusLayout = ({
+  width,
+  height,
+  displayMode,
+  content,
+}: NetworkControllerStatusLayoutInput): NetworkControllerStatusLayout => {
+  const isAdvanced = displayMode === "advanced";
+
+  return {
+    padding: isAdvanced ? "md" : height < 120 ? "xs" : "sm",
+    columns: isAdvanced && width >= 560 ? 2 : 1,
+    showWifi: isAdvanced || content === "wifi",
+    showWired: isAdvanced || content === "wired",
+    cardPadding: isAdvanced ? "md" : 0,
+    withBorder: isAdvanced,
+    compact: !isAdvanced,
+    horizontalStats: !isAdvanced && height < 150 && width >= 200,
+  };
+};
diff --git a/packages/widgets/src/network-controller/network-status/variants/stat-row.tsx b/packages/widgets/src/network-controller/network-status/variants/stat-row.tsx
index aa6c1998b..de9be70d3 100644
--- a/packages/widgets/src/network-controller/network-status/variants/stat-row.tsx
+++ b/packages/widgets/src/network-controller/network-status/variants/stat-row.tsx
@@ -1,12 +1,20 @@
 import { Stack, Text } from "@mantine/core";
 
-export const StatRow = ({ label, value }: { label: string; value: string | number }) => {
+export const StatRow = ({
+  label,
+  value,
+  compact = false,
+}: {
+  label: string;
+  value: string | number;
+  compact?: boolean;
+}) => {
   return (
     <Stack gap={0}>
-      <Text size={"2xl"} fw={900} lh={1}>
+      <Text size={compact ? "xl" : "2xl"} fw={800} lh={1}>
         {value}
       </Text>
-      <Text size={"md"} c={"dimmed"}>
+      <Text size={compact ? "sm" : "md"} c="dimmed">
         {label}
       </Text>
     </Stack>
diff --git a/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx b/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx
index 85b7e2355..ebcfbe2d9 100644
--- a/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx
+++ b/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx
@@ -1,24 +1,34 @@
-import { Group, Stack, Text } from "@mantine/core";
+import { Group, SimpleGrid, Text } from "@mantine/core";
 import { IconWifi } from "@tabler/icons-react";
 
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { StatRow } from "./stat-row";
 
-export const WifiVariant = ({ countGuests, countUsers }: { countUsers: number; countGuests: number }) => {
+export const WifiVariant = ({
+  countGuests,
+  countUsers,
+  compact = false,
+  horizontal = false,
+}: {
+  countUsers: number;
+  countGuests: number;
+  compact?: boolean;
+  horizontal?: boolean;
+}) => {
   const t = useScopedI18n("widget.networkControllerStatus.card");
   return (
     <>
-      <Group gap={"xs"} wrap={"nowrap"} mb={"md"}>
+      <Group gap="xs" wrap="nowrap" mb={compact ? "xs" : "md"}>
         <IconWifi size={24} />
         <Text size={"md"} fw={"bold"}>
           {t("variants.wifi.name")}
         </Text>
       </Group>
-      <Stack gap={"lg"}>
-        <StatRow label={t("users.label")} value={countUsers} />
-        <StatRow label={t("guests.label")} value={countGuests} />
-      </Stack>
+      <SimpleGrid cols={horizontal ? 2 : 1} spacing={compact ? "sm" : "lg"}>
+        <StatRow label={t("users.label")} value={countUsers} compact={compact} />
+        <StatRow label={t("guests.label")} value={countGuests} compact={compact} />
+      </SimpleGrid>
     </>
   );
 };
diff --git a/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx b/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx
index f635dd897..ff19d41e2 100644
--- a/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx
+++ b/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx
@@ -1,24 +1,34 @@
-import { Group, Stack, Text } from "@mantine/core";
+import { Group, SimpleGrid, Text } from "@mantine/core";
 import { IconNetwork } from "@tabler/icons-react";
 
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { StatRow } from "./stat-row";
 
-export const WiredVariant = ({ countGuests, countUsers }: { countUsers: number; countGuests: number }) => {
+export const WiredVariant = ({
+  countGuests,
+  countUsers,
+  compact = false,
+  horizontal = false,
+}: {
+  countUsers: number;
+  countGuests: number;
+  compact?: boolean;
+  horizontal?: boolean;
+}) => {
   const t = useScopedI18n("widget.networkControllerStatus.card");
   return (
     <>
-      <Group gap={"xs"} wrap={"nowrap"} mb={"md"}>
+      <Group gap="xs" wrap="nowrap" mb={compact ? "xs" : "md"}>
         <IconNetwork size={24} />
         <Text size={"md"} fw={"bold"}>
           {t("variants.wired.name")}
         </Text>
       </Group>
-      <Stack gap={"lg"}>
-        <StatRow label={t("users.label")} value={countUsers} />
-        <StatRow label={t("guests.label")} value={countGuests} />
-      </Stack>
+      <SimpleGrid cols={horizontal ? 2 : 1} spacing={compact ? "sm" : "lg"}>
+        <StatRow label={t("users.label")} value={countUsers} compact={compact} />
+        <StatRow label={t("guests.label")} value={countGuests} compact={compact} />
+      </SimpleGrid>
     </>
   );
 };
diff --git a/packages/widgets/src/network-controller/summary/component.tsx b/packages/widgets/src/network-controller/summary/component.tsx
index cb5dc7545..1584e70a7 100644
--- a/packages/widgets/src/network-controller/summary/component.tsx
+++ b/packages/widgets/src/network-controller/summary/component.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
-import { Box, Center, List, Text, useMantineTheme } from "@mantine/core";
+import { Badge, Card, Center, Group, List, ScrollArea, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
 import { IconCircleCheckFilled, IconCircleXFilled } from "@tabler/icons-react";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
@@ -12,6 +11,8 @@ import { clientApi } from "@homarr/api/client";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
+import { getBinaryStatusKey } from "../../common/locale";
+import { getUsableWidgetQueryData } from "../../common/query-state";
 
 dayjs.extend(objectSupport);
 dayjs.extend(relativeTime);
@@ -19,47 +20,137 @@ dayjs.extend(duration);
 
 export default function NetworkControllerSummaryWidget({
   integrationIds,
+  width,
+  height,
 }: WidgetComponentProps<"networkControllerSummary">) {
-  const { data: summaries = [] } = clientApi.widget.networkController.summary.useQuery({
+  const summaryQuery = clientApi.widget.networkController.summary.useQuery({
     integrationIds,
   });
+  const summaries = getUsableWidgetQueryData(summaryQuery) ?? [];
+  const { isPending } = summaryQuery;
 
   const t = useI18n();
+  const statusLabels = {
+    enabled: t("widget.dnsHoleSummary.status.enabled"),
+    disabled: t("widget.dnsHoleSummary.status.disabled"),
+    unknown: t("widget.dnsHoleSummary.status.unknown"),
+  };
 
-  const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);
+  const isDense = height < 160;
+  const showDetails = height >= 180 && width >= 240;
+  const columns = width >= 720 ? 2 : 1;
+
+  if (isPending || summaries.length === 0) {
+    return (
+      <Center h="100%" p="sm">
+        <Text c="dimmed" size="sm" ta="center">
+          {isPending ? t("common.action.loading") : t("widget.networkControllerSummary.error.integrationsDisconnected")}
+        </Text>
+      </Center>
+    );
+  }
 
   return (
-    <Box h="100%" p="sm">
-      <Center h={"100%"}>
-        <List spacing={"xs"} center>
-          <List.Item icon={<StatusIcon status={data[0]?.wanStatus} />}>WAN</List.Item>
-          <List.Item icon={<StatusIcon status={data[0]?.www.status} />}>
-            <Text>
-              WWW
-              <Text c={"dimmed"} size={"md"} ms={"xs"} span>
-                {data[0]?.www.latency}ms
-              </Text>
-            </Text>
-          </List.Item>
-          <List.Item icon={<StatusIcon status={data[0]?.wifi.status} />}>Wi-Fi</List.Item>
-          <List.Item icon={<StatusIcon status={data[0]?.vpn.status} />}>
-            <Text>
-              VPN
-              <Text c={"dimmed"} size={"md"} ms={"xs"} span>
-                {t("widget.networkControllerSummary.card.vpn.countConnected", { count: `${data[0]?.vpn.users}` })}
-              </Text>
-            </Text>
-          </List.Item>
-        </List>
-      </Center>
-    </Box>
+    <ScrollArea h="100%" p={isDense ? "xs" : "sm"}>
+      <SimpleGrid cols={columns} spacing="sm">
+        {summaries.map(({ integration, summary }) => (
+          <Card key={integration.id} p={isDense ? "xs" : "sm"} withBorder={summaries.length > 1}>
+            <Stack gap="xs">
+              {summaries.length > 1 && (
+                <Group justify="space-between" wrap="nowrap">
+                  <Text fw={600} size="sm" truncate="end">
+                    {integration.name}
+                  </Text>
+                  <Badge size="xs" variant="light">
+                    {integration.kind}
+                  </Badge>
+                </Group>
+              )}
+              <List spacing={isDense ? 2 : "xs"} center size={isDense ? "sm" : undefined}>
+                <List.Item
+                  icon={
+                    <StatusIcon
+                      status={summary.wanStatus}
+                      label={statusLabels[getBinaryStatusKey(summary.wanStatus)]}
+                      size={isDense ? 16 : 20}
+                    />
+                  }
+                >
+                  {t("widget.networkControllerSummary.card.wan")}
+                </List.Item>
+                <List.Item
+                  icon={
+                    <StatusIcon
+                      status={summary.www.status}
+                      label={statusLabels[getBinaryStatusKey(summary.www.status)]}
+                      size={isDense ? 16 : 20}
+                    />
+                  }
+                >
+                  <Text>
+                    {t("widget.networkControllerSummary.card.web")}
+                    <Text c="dimmed" size="sm" ms="xs" span>
+                      {summary.www.latency}ms{showDetails ? ` · ${summary.www.ping}ms` : ""}
+                    </Text>
+                  </Text>
+                </List.Item>
+                <List.Item
+                  icon={
+                    <StatusIcon
+                      status={summary.wifi.status}
+                      label={statusLabels[getBinaryStatusKey(summary.wifi.status)]}
+                      size={isDense ? 16 : 20}
+                    />
+                  }
+                >
+                  {t("widget.networkControllerSummary.card.wifi")}
+                  {showDetails ? ` · ${summary.wifi.users + summary.wifi.guests}` : ""}
+                </List.Item>
+                {showDetails && (
+                  <List.Item
+                    icon={
+                      <StatusIcon
+                        status={summary.lan.status}
+                        label={statusLabels[getBinaryStatusKey(summary.lan.status)]}
+                        size={20}
+                      />
+                    }
+                  >
+                    {t("widget.networkControllerSummary.card.lan")} · {summary.lan.users + summary.lan.guests}
+                  </List.Item>
+                )}
+                <List.Item
+                  icon={
+                    <StatusIcon
+                      status={summary.vpn.status}
+                      label={statusLabels[getBinaryStatusKey(summary.vpn.status)]}
+                      size={isDense ? 16 : 20}
+                    />
+                  }
+                >
+                  <Text>
+                    {t("widget.networkControllerSummary.card.vpn.label")}
+                    <Text c="dimmed" size="sm" ms="xs" span>
+                      {t("widget.networkControllerSummary.card.vpn.countConnected", { count: summary.vpn.users })}
+                    </Text>
+                  </Text>
+                </List.Item>
+              </List>
+            </Stack>
+          </Card>
+        ))}
+      </SimpleGrid>
+    </ScrollArea>
   );
 }
 
-const StatusIcon = ({ status }: { status?: "enabled" | "disabled" }) => {
+const StatusIcon = ({ status, label, size }: { status?: "enabled" | "disabled"; label: string; size: number }) => {
   const mantineTheme = useMantineTheme();
   if (status === "enabled") {
-    return <IconCircleCheckFilled size={20} color={mantineTheme.colors.green[6]} />;
+    return <IconCircleCheckFilled aria-label={label} size={size} color={mantineTheme.colors.green[6]} />;
   }
-  return <IconCircleXFilled size={20} color={mantineTheme.colors.red[6]} />;
+  if (status === "disabled") {
+    return <IconCircleXFilled aria-label={label} size={size} color={mantineTheme.colors.red[6]} />;
+  }
+  return <IconCircleXFilled aria-label={label} size={size} color={mantineTheme.colors.gray[6]} />;
 };
diff --git a/packages/widgets/src/network-controller/summary/index.ts b/packages/widgets/src/network-controller/summary/index.ts
index cadc7b5f8..1a4544b30 100644
--- a/packages/widgets/src/network-controller/summary/index.ts
+++ b/packages/widgets/src/network-controller/summary/index.ts
@@ -6,6 +6,7 @@ import { createWidgetDefinition } from "../../definition";
 import { optionsBuilder } from "../../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("networkControllerSummary", {
+  supportsAdvancedFocus: false,
   icon: IconTopologyFull,
   queryKey: [["widget", "networkController"]],
   refetchInterval: null,
diff --git a/packages/widgets/src/notebook/index.ts b/packages/widgets/src/notebook/index.ts
index 6b85f3e33..7b01c83a7 100644
--- a/packages/widgets/src/notebook/index.ts
+++ b/packages/widgets/src/notebook/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 import { defaultContent } from "./default-content";
 
 export const { definition, componentLoader } = createWidgetDefinition("notebook", {
+  supportsAdvancedFocus: false,
   icon: IconNotes,
   createOptions() {
     return optionsBuilder.from(
diff --git a/packages/widgets/src/notebook/notebook.css b/packages/widgets/src/notebook/notebook.css
index 6b8054367..002195400 100644
--- a/packages/widgets/src/notebook/notebook.css
+++ b/packages/widgets/src/notebook/notebook.css
@@ -70,3 +70,31 @@
 .ProseMirror {
   height: 100%;
 }
+
+.homarr-notebook-action {
+  opacity: 0;
+  transform: translateX(2px);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+}
+
+.homarr-notebook:hover .homarr-notebook-action,
+.homarr-notebook:focus-within .homarr-notebook-action,
+.homarr-notebook-action[data-visible="true"] {
+  opacity: 1;
+  transform: none;
+}
+
+@media (any-pointer: coarse) {
+  .homarr-notebook-action {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .homarr-notebook-action {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/notebook/notebook.tsx b/packages/widgets/src/notebook/notebook.tsx
index 9fdd692fb..6ecaae51b 100644
--- a/packages/widgets/src/notebook/notebook.tsx
+++ b/packages/widgets/src/notebook/notebook.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { MouseEvent as ReactMouseEvent } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 import {
   ActionIcon,
   Box,
@@ -13,7 +13,9 @@ import {
   Popover,
   ScrollArea,
   Stack,
+  Text,
   TextInput,
+  Tooltip,
   useMantineColorScheme,
   useMantineTheme,
 } from "@mantine/core";
@@ -51,7 +53,6 @@ import { Table } from "@tiptap/extension-table";
 import { TableCell } from "@tiptap/extension-table-cell";
 import { TableHeader } from "@tiptap/extension-table-header";
 import { TableRow } from "@tiptap/extension-table-row";
-import { TaskItem } from "@tiptap/extension-task-item";
 import { TaskList } from "@tiptap/extension-task-list";
 import { TextAlign } from "@tiptap/extension-text-align";
 import { TextStyle } from "@tiptap/extension-text-style";
@@ -59,7 +60,6 @@ import type { Editor } from "@tiptap/react";
 import { useEditor } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
 import { StarterKit } from "@tiptap/starter-kit";
-import type { Node } from "prosemirror-model";
 
 import { clientApi } from "@homarr/api/client";
 import { useForm } from "@homarr/form";
@@ -68,6 +68,8 @@ import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
 
 import type { WidgetComponentProps } from "../definition";
+import actionTargetClasses from "../common/action-target.module.css";
+import { createReadOnlyTaskItemTransaction, ReadOnlyTaskItem } from "./read-only-task-item";
 import { NotebookTextDirection, setTextDirection } from "./text-direction";
 
 import "@mantine/tiptap/styles.css";
@@ -89,9 +91,17 @@ const controlIconProps = {
   stroke: 1.5,
 };
 
-export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: WidgetComponentProps<"notebook">) {
+export function Notebook({
+  options,
+  setOptions,
+  isEditMode,
+  boardId,
+  itemId,
+  height,
+}: WidgetComponentProps<"notebook">) {
   const [content, setContent] = useState(options.content);
-  const previousContentRef = useRef(content);
+  const previousContentRef = useRef(options.content);
+  const [saveError, setSaveError] = useState<string | null>(null);
 
   const board = useRequiredBoard();
   const { data: session } = useSession();
@@ -99,15 +109,53 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
 
   const canChange = !isEditMode && hasChangeAccess;
   const [isEditing, setIsEditing] = useState(false);
+  const canChangeRef = useRef(canChange);
+  const allowReadOnlyCheckRef = useRef(options.allowReadOnlyCheck);
+  const savingRef = useRef(false);
+  const readOnlyCheckEventName = `homarr:notebook-read-only-check:${useId()}`;
+
+  useEffect(() => {
+    allowReadOnlyCheckRef.current = options.allowReadOnlyCheck;
+  }, [options.allowReadOnlyCheck]);
 
   const { primaryColor } = useMantineTheme();
   const { colorScheme } = useMantineColorScheme();
 
-  const { mutateAsync } = clientApi.widget.notebook.updateContent.useMutation();
+  const { mutateAsync, isPending: isSaving } = clientApi.widget.notebook.updateContent.useMutation({
+    scope: { id: `notebook-content:${boardId ?? "preview"}:${itemId ?? "preview"}` },
+  });
+
+  useEffect(() => {
+    canChangeRef.current = canChange && !isSaving;
+  }, [canChange, isSaving]);
 
   const tControls = useScopedI18n("widget.notebook.controls");
   const t = useI18n();
 
+  const handleContentUpdate = useCallback(
+    async (contentUpdate: string) => {
+      savingRef.current = true;
+      canChangeRef.current = false;
+      setSaveError(null);
+
+      try {
+        if (boardId && itemId) {
+          await mutateAsync({ boardId, itemId, content: contentUpdate });
+        }
+        previousContentRef.current = contentUpdate;
+        setOptions({ newOptions: { content: contentUpdate } });
+        return true;
+      } catch {
+        setSaveError(t("widget.notebook.saveFailed"));
+        return false;
+      } finally {
+        savingRef.current = false;
+        canChangeRef.current = canChange;
+      }
+    },
+    [boardId, canChange, itemId, mutateAsync, setOptions, t],
+  );
+
   const editor = useEditor(
     {
       extensions: [
@@ -159,17 +207,20 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
         }),
         TableHeader,
         TableRow,
-        TaskItem.configure({
+        ReadOnlyTaskItem.configure({
           nested: true,
-          onReadOnlyChecked: (node, checked) => {
-            if (!options.allowReadOnlyCheck) return false;
-            if (!canChange) return false;
-
-            const event = new CustomEvent("onReadOnlyCheck", {
-              detail: { node, checked },
+          onReadOnlyChecked: () => {
+            if (!allowReadOnlyCheckRef.current) return false;
+            if (!canChangeRef.current) return false;
+            return true;
+          },
+          onReadOnlyCheckedAtPosition: (position, checked) => {
+            if (!allowReadOnlyCheckRef.current) return;
+            if (!canChangeRef.current) return;
+            const event = new CustomEvent(readOnlyCheckEventName, {
+              detail: { position, checked },
             });
             dispatchEvent(event);
-            return true;
           },
         }),
         TaskList.configure({ itemTypeName: "taskItem" }),
@@ -184,62 +235,46 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
         setContent(editor.getHTML());
       },
       onCreate: ({ editor }) => {
-        editor.setEditable(false);
+        editor.setEditable(isEditing);
       },
     },
     [],
   );
 
-  const handleOnReadOnlyCheck = (event: CustomEventInit<{ node: Node; checked: boolean }>) => {
-    if (!options.allowReadOnlyCheck) return;
-    if (!editor) return;
+  const handleOnReadOnlyCheck = useCallback(
+    (event: Event) => {
+      if (!allowReadOnlyCheckRef.current) return;
+      if (!editor) return;
+      const { detail } = event as CustomEvent<{ position: number; checked: boolean }>;
+      const transaction = createReadOnlyTaskItemTransaction(editor.state, detail.position, detail.checked);
+      if (!transaction) return;
 
-    editor.state.doc.descendants((subnode, pos) => {
-      if (!event.detail) return;
-      if (!subnode.eq(event.detail.node)) return;
-
-      const { tr } = editor.state;
-      tr.setNodeMarkup(pos, undefined, {
-        ...event.detail.node.attrs,
-        checked: event.detail.checked,
+      editor.view.dispatch(transaction);
+      const nextContent = editor.getHTML();
+      setContent(nextContent);
+      void handleContentUpdate(nextContent).then((wasSaved) => {
+        if (wasSaved) return;
+        setContent(previousContentRef.current);
+        editor.commands.setContent(previousContentRef.current);
       });
-      editor.view.dispatch(tr);
-      setContent(editor.getHTML());
-      handleContentUpdate(editor.getHTML());
-    });
-  };
-
-  addEventListener("onReadOnlyCheck", handleOnReadOnlyCheck);
-
-  const handleContentUpdate = useCallback(
-    (contentUpdate: string) => {
-      previousContentRef.current = contentUpdate;
-      setOptions({ newOptions: { content: contentUpdate } });
-
-      // This is not available in preview mode
-      if (boardId && itemId) {
-        void mutateAsync({ boardId, itemId, content: contentUpdate });
-      }
     },
-    [boardId, itemId, mutateAsync, setOptions],
+    [editor, handleContentUpdate],
   );
 
-  const handleEditToggleCallback = useCallback(
-    (previous: boolean) => {
-      const current = !previous;
-      if (!editor) return current;
-      editor.setEditable(current);
+  useEffect(() => {
+    addEventListener(readOnlyCheckEventName, handleOnReadOnlyCheck);
+    return () => removeEventListener(readOnlyCheckEventName, handleOnReadOnlyCheck);
+  }, [handleOnReadOnlyCheck, readOnlyCheckEventName]);
 
-      if (previous) {
-        handleContentUpdate(content);
-      }
-
-      return current;
-    },
-    [content, editor, handleContentUpdate],
-  );
+  useEffect(() => {
+    if (isEditing || !editor || options.content === previousContentRef.current) return;
+    previousContentRef.current = options.content;
+    setContent(options.content);
+    editor.commands.setContent(options.content);
+  }, [editor, isEditing, options.content]);
 
   const handleEditCancelCallback = useCallback(() => {
+    if (savingRef.current) return true;
     if (!editor) return false;
     editor.setEditable(false);
 
@@ -251,6 +286,7 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
 
   const { openConfirmModal } = useConfirmModal();
   const handleEditCancel = useCallback(() => {
+    if (savingRef.current) return;
     openConfirmModal({
       title: t("widget.notebook.dismiss.title"),
       children: t("widget.notebook.dismiss.message"),
@@ -264,30 +300,55 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
     });
   }, [setIsEditing, handleEditCancelCallback, openConfirmModal, t]);
 
-  const handleEditToggle = useCallback(() => {
-    setIsEditing(handleEditToggleCallback);
-  }, [setIsEditing, handleEditToggleCallback]);
+  const handleEditToggle = useCallback(async () => {
+    if (!editor || savingRef.current) return;
+    if (!isEditing) {
+      setSaveError(null);
+      editor.setEditable(true);
+      setIsEditing(true);
+      return;
+    }
+
+    editor.setEditable(false);
+    const wasSaved = await handleContentUpdate(content);
+    if (!wasSaved) {
+      editor.setEditable(true);
+      return;
+    }
+    editor.setEditable(false);
+    setIsEditing(false);
+  }, [content, editor, handleContentUpdate, isEditing]);
 
   const handleDoubleClick = useCallback(
     (event: ReactMouseEvent<HTMLDivElement>) => {
-      if (!canChange || isEditing) return;
+      if (!canChange || isEditing || savingRef.current) return;
       // Ignore double-clicks bubbling up from interactive controls (e.g. the
       // edit/save ActionIcon), which would otherwise toggle edit mode twice.
       if (event.target instanceof Element && event.target.closest("button, a")) {
         return;
       }
-      setIsEditing(handleEditToggleCallback);
+      setSaveError(null);
+      editor?.setEditable(true);
+      setIsEditing(true);
     },
-    [canChange, isEditing, setIsEditing, handleEditToggleCallback],
+    [canChange, editor, isEditing],
   );
 
+  const documentText = editor?.getText().trim() ?? "";
+  const documentStats = {
+    characters: documentText.length,
+    words: documentText.length === 0 ? 0 : documentText.split(/\s+/).length,
+  };
+
   return (
-    <Box h="100%" onDoubleClick={handleDoubleClick}>
+    <Box className="homarr-notebook" h="100%" onDoubleClick={handleDoubleClick}>
       <RichTextEditor
         p={0}
         mt={0}
         h="100%"
-        onKeyDown={isEditing ? getHotkeyHandler([[hotkeys.saveNotebook, handleEditToggle]]) : undefined}
+        onKeyDown={
+          isEditing && !isSaving ? getHotkeyHandler([[hotkeys.saveNotebook, () => void handleEditToggle()]]) : undefined
+        }
         editor={editor}
         styles={(theme) => ({
           root: {
@@ -304,7 +365,7 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
           },
           content: {
             backgroundColor: "transparent",
-            padding: "0.5rem",
+            padding: height < 120 ? "0.25rem" : "0.5rem",
             height: "100%",
           },
           typographyStylesProvider: {
@@ -314,7 +375,9 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
       >
         <RichTextEditor.Toolbar
           style={{
-            display: isEditing && options.showToolbar === true ? "flex" : "none",
+            display: isEditing && !isSaving && options.showToolbar === true ? "flex" : "none",
+            maxHeight: height < 180 ? "4.5rem" : "10rem",
+            overflowY: "auto",
           }}
         >
           <RichTextEditor.ControlsGroup>
@@ -415,7 +478,7 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
             <RichTextEditor.Redo />
           </RichTextEditor.ControlsGroup>
         </RichTextEditor.Toolbar>
-        {editor && (
+        {editor && isEditing && !isSaving && (
           <BubbleMenu editor={editor}>
             <RichTextEditor.ControlsGroup>
               <RichTextEditor.Bold title={tControls("bold")} />
@@ -442,41 +505,61 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
           <RichTextEditor.Content />
         </ScrollArea>
       </RichTextEditor>
+      {(saveError || height >= 180) && (
+        <Group pos="absolute" bottom={4} right={8} gap="xs" style={{ pointerEvents: saveError ? undefined : "none" }}>
+          {saveError && (
+            <Tooltip label={saveError} multiline>
+              <Text
+                size="xs"
+                c="red"
+                lineClamp={1}
+                maw={320}
+                tabIndex={0}
+                aria-label={`${t("widget.notebook.saveFailed")}. ${saveError}`}
+              >
+                {t("widget.notebook.saveFailed")}
+              </Text>
+            </Tooltip>
+          )}
+          {height >= 180 && (
+            <Text size="xs" c="dimmed">
+              {t("widget.notebook.documentStats", documentStats)}
+            </Text>
+          )}
+        </Group>
+      )}
       {canChange && (
-        <>
+        <Stack pos="absolute" top={7} right={7} gap={7} style={{ zIndex: 1 }}>
           <ActionIcon
+            className={`homarr-notebook-action ${actionTargetClasses.root}`}
+            data-visible={isEditing || undefined}
             title={isEditing ? t("common.action.save") : t("common.action.edit")}
-            style={{
-              zIndex: 1,
-            }}
-            top={7}
-            right={7}
-            pos="absolute"
+            aria-label={isEditing ? t("common.action.save") : t("common.action.edit")}
             color={primaryColor}
             variant="light"
             size={30}
-            onClick={handleEditToggle}
+            loading={isSaving}
+            disabled={isSaving}
+            onClick={() => void handleEditToggle()}
           >
             {isEditing ? <IconDeviceFloppy {...iconProps} /> : <IconEdit {...iconProps} />}
           </ActionIcon>
           {isEditing && (
             <ActionIcon
+              className={`homarr-notebook-action ${actionTargetClasses.root}`}
+              data-visible
               title={t("common.action.cancel")}
-              style={{
-                zIndex: 1,
-              }}
-              top={44}
-              right={7}
-              pos="absolute"
+              aria-label={t("common.action.cancel")}
               color={primaryColor}
               variant="light"
               size={30}
+              disabled={isSaving}
               onClick={handleEditCancel}
             >
               <IconX {...iconProps} />
             </ActionIcon>
           )}
-        </>
+        </Stack>
       )}
     </Box>
   );
@@ -654,13 +737,31 @@ const ColorControl = ({ defaultColor, getCurrent, update, icon: Icon, ariaLabel
         <Stack gap={8}>
           <ColorPicker value={color} onChange={setColor} format="hexa" swatches={palette} swatchesPerRow={6} />
           <Group justify="right" gap={8}>
-            <ActionIcon title={t("common.action.cancel")} variant="default" onClick={close}>
+            <ActionIcon
+              className={actionTargetClasses.root}
+              title={t("common.action.cancel")}
+              aria-label={t("common.action.cancel")}
+              variant="default"
+              onClick={close}
+            >
               <IconX stroke={1.5} size="1rem" />
             </ActionIcon>
-            <ActionIcon title={t("common.action.apply")} variant="default" onClick={handleApplyColor}>
+            <ActionIcon
+              className={actionTargetClasses.root}
+              title={t("common.action.apply")}
+              aria-label={t("common.action.apply")}
+              variant="default"
+              onClick={handleApplyColor}
+            >
               <IconCheck stroke={1.5} size="1rem" />
             </ActionIcon>
-            <ActionIcon title={t("widget.notebook.popover.clearColor")} variant="default" onClick={handleClearColor}>
+            <ActionIcon
+              className={actionTargetClasses.root}
+              title={t("widget.notebook.popover.clearColor")}
+              aria-label={t("widget.notebook.popover.clearColor")}
+              variant="default"
+              onClick={handleClearColor}
+            >
               <IconCircleOff stroke={1.5} size="1rem" />
             </ActionIcon>
           </Group>
diff --git a/packages/widgets/src/notebook/read-only-task-item.spec.ts b/packages/widgets/src/notebook/read-only-task-item.spec.ts
new file mode 100644
index 000000000..a6f99a368
--- /dev/null
+++ b/packages/widgets/src/notebook/read-only-task-item.spec.ts
@@ -0,0 +1,96 @@
+import { Editor } from "@tiptap/core";
+import { TaskList } from "@tiptap/extension-task-list";
+import { Schema } from "@tiptap/pm/model";
+import { EditorState } from "@tiptap/pm/state";
+import { StarterKit } from "@tiptap/starter-kit";
+import { describe, expect, it } from "vitest";
+
+import { createReadOnlyTaskItemTransaction, ReadOnlyTaskItem } from "./read-only-task-item";
+
+const schema = new Schema({
+  nodes: {
+    doc: { content: "taskList" },
+    paragraph: { content: "text*" },
+    text: { inline: true },
+    taskList: { content: "taskItem+" },
+    taskItem: {
+      attrs: { checked: { default: false } },
+      content: "paragraph",
+    },
+  },
+});
+
+const createTaskItem = () =>
+  schema.node("taskItem", { checked: false }, [schema.node("paragraph", null, [schema.text("Duplicate task")])]);
+
+describe("read-only task item updates", () => {
+  it("reports the exact position of the clicked duplicate task", () => {
+    const element = document.createElement("div");
+    let clickedPosition: number | undefined;
+    const editor = new Editor({
+      element,
+      editable: false,
+      extensions: [
+        StarterKit,
+        TaskList.configure({ itemTypeName: "taskItem" }),
+        ReadOnlyTaskItem.configure({
+          nested: true,
+          onReadOnlyChecked: () => true,
+          onReadOnlyCheckedAtPosition: (position) => {
+            clickedPosition = position;
+          },
+        }),
+      ],
+      content: {
+        type: "doc",
+        content: [
+          {
+            type: "taskList",
+            content: [
+              { type: "taskItem", attrs: { checked: false }, content: [{ type: "paragraph", content: [] }] },
+              { type: "taskItem", attrs: { checked: false }, content: [{ type: "paragraph", content: [] }] },
+            ],
+          },
+        ],
+      },
+    });
+
+    try {
+      const positions: number[] = [];
+      editor.state.doc.descendants((node, position) => {
+        if (node.type.name === "taskItem") positions.push(position);
+      });
+      const secondPosition = positions[1];
+      const secondCheckbox = element.querySelectorAll<HTMLInputElement>('input[type="checkbox"]').item(1);
+      if (secondPosition === undefined || !secondCheckbox) throw new Error("Expected a second task item checkbox");
+
+      secondCheckbox.checked = true;
+      secondCheckbox.dispatchEvent(new Event("change", { bubbles: true }));
+
+      expect(clickedPosition).toBe(secondPosition);
+    } finally {
+      editor.destroy();
+    }
+  });
+
+  it("updates the selected position when task items are structurally identical", () => {
+    const doc = schema.node("doc", null, [schema.node("taskList", null, [createTaskItem(), createTaskItem()])]);
+    const taskItemPositions: number[] = [];
+    doc.descendants((node, position) => {
+      if (node.type.name === "taskItem") taskItemPositions.push(position);
+    });
+    const secondTaskItemPosition = taskItemPositions[1];
+    if (secondTaskItemPosition === undefined) throw new Error("Expected a second task item");
+
+    const state = EditorState.create({ doc });
+    const transaction = createReadOnlyTaskItemTransaction(state, secondTaskItemPosition, true);
+    if (!transaction) throw new Error("Expected a task-item transaction");
+    const nextState = state.apply(transaction);
+    const checkedStates: boolean[] = [];
+    nextState.doc.descendants((node) => {
+      if (node.type.name === "taskItem") checkedStates.push(Boolean(node.attrs.checked));
+    });
+
+    expect(checkedStates).toEqual([false, true]);
+  });
+});
diff --git a/packages/widgets/src/notebook/read-only-task-item.ts b/packages/widgets/src/notebook/read-only-task-item.ts
new file mode 100644
index 000000000..88770a110
--- /dev/null
+++ b/packages/widgets/src/notebook/read-only-task-item.ts
@@ -0,0 +1,66 @@
+import type { NodeViewRenderer } from "@tiptap/core";
+import { TaskItem } from "@tiptap/extension-task-item";
+import type { TaskItemOptions } from "@tiptap/extension-task-item";
+import type { EditorState, Transaction } from "@tiptap/pm/state";
+
+interface ReadOnlyTaskItemOptions extends TaskItemOptions {
+  onReadOnlyCheckedAtPosition?: (position: number, checked: boolean) => void;
+}
+
+export const ReadOnlyTaskItem = TaskItem.extend<ReadOnlyTaskItemOptions>({
+  addOptions() {
+    const parentOptions = this.parent?.();
+    return {
+      onReadOnlyChecked: parentOptions?.onReadOnlyChecked,
+      nested: parentOptions?.nested ?? false,
+      HTMLAttributes: parentOptions?.HTMLAttributes ?? {},
+      taskListTypeName: parentOptions?.taskListTypeName ?? "taskList",
+      a11y: parentOptions?.a11y,
+      onReadOnlyCheckedAtPosition: undefined,
+    };
+  },
+  addNodeView() {
+    const parentNodeView = this.parent?.() as NodeViewRenderer | undefined;
+    if (!parentNodeView) return null;
+
+    return (props) => {
+      const nodeView = parentNodeView(props);
+      const checkbox =
+        nodeView.dom instanceof HTMLElement
+          ? nodeView.dom.querySelector<HTMLInputElement>('input[type="checkbox"]')
+          : null;
+      if (!checkbox) return nodeView;
+
+      const handleChange = () => {
+        if (props.editor.isEditable) return;
+        const position = props.getPos();
+        if (typeof position !== "number") return;
+        this.options.onReadOnlyCheckedAtPosition?.(position, checkbox.checked);
+      };
+      checkbox.addEventListener("change", handleChange);
+      const destroyParent = nodeView.destroy?.bind(nodeView);
+
+      return {
+        ...nodeView,
+        destroy() {
+          checkbox.removeEventListener("change", handleChange);
+          destroyParent?.();
+        },
+      };
+    };
+  },
+});
+
+export const createReadOnlyTaskItemTransaction = (
+  state: EditorState,
+  position: number,
+  checked: boolean,
+): Transaction | null => {
+  const taskItem = state.doc.nodeAt(position);
+  if (taskItem?.type.name !== "taskItem") return null;
+
+  return state.tr.setNodeMarkup(position, undefined, {
+    ...taskItem.attrs,
+    checked,
+  });
+};
diff --git a/packages/widgets/src/notifications/component.tsx b/packages/widgets/src/notifications/component.tsx
index 3b04393d0..59f42bd96 100644
--- a/packages/widgets/src/notifications/component.tsx
+++ b/packages/widgets/src/notifications/component.tsx
@@ -1,94 +1,162 @@
 "use client";
 
 import { useMemo } from "react";
-import { Avatar, Card, Flex, Group, ScrollArea, Stack, Text } from "@mantine/core";
+import { Avatar, Badge, Card, Flex, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 import { IconClock } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { useTimeAgo } from "@homarr/common";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { getUsableWidgetQueryData } from "../common/query-state";
 
-export default function NotificationsWidget({ options, integrationIds }: WidgetComponentProps<"notifications">) {
-  const { data: notificationIntegrations = [] } = clientApi.widget.notifications.getNotifications.useQuery({
+export default function NotificationsWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+}: WidgetComponentProps<"notifications">) {
+  const notificationsQuery = clientApi.widget.notifications.getNotifications.useQuery({
     ...options,
     integrationIds,
   });
+  const notificationIntegrations = getUsableWidgetQueryData(notificationsQuery) ?? [];
+  const { isPending } = notificationsQuery;
 
-  const t = useScopedI18n("widget.notifications");
+  const t = useI18n();
 
   const board = useRequiredBoard();
 
   const sortedNotifications = useMemo(
     () =>
       notificationIntegrations
-        .flatMap((integration) => integration.data)
+        .flatMap((integration) =>
+          integration.data.map((notification) => ({
+            ...notification,
+            compositeKey: `${integration.integration.id}:${notification.id}`,
+            integrationName: integration.integration.name,
+          })),
+        )
         .sort((entryA, entryB) => entryB.time.getTime() - entryA.time.getTime()),
     [notificationIntegrations],
   );
+  const failedIntegrations = notificationIntegrations.filter(
+    (integration): integration is typeof integration & { error: string } => Boolean(integration.error),
+  );
+  const isDense = width < 280 || height < 180;
+  const isRoomy = width >= 360 && height >= 220;
+  const bodyLineClamp = height < 112 ? 1 : isDense ? 2 : height >= 300 ? 8 : 4;
+  const columns = width >= 720 ? 2 : 1;
+  const spacing = isRoomy ? "sm" : "xs";
 
   return (
-    <ScrollArea className="scroll-area-w100" w="100%" p="sm">
-      <Stack w={"100%"} gap="sm">
-        {sortedNotifications.length > 0 ? (
-          sortedNotifications.map((notification) => (
-            <Card
-              key={notification.id}
-              component={notification.href ? "a" : "div"}
-              href={notification.href}
-              target={notification.href ? "_blank" : undefined}
-              rel={notification.href ? "noopener noreferrer" : undefined}
-              radius={board.itemRadius}
-              w="100%"
-              p="sm"
-              style={{ color: "inherit", textDecoration: "none" }}
-            >
-              <Flex gap="sm" align="flex-start" w="100%">
-                {!options.hideLogos && notification.source?.iconUrl && (
-                  <Avatar
-                    src={notification.source.iconUrl}
-                    alt={notification.source.name}
-                    size="sm"
-                    radius={board.itemRadius}
-                  />
-                )}
+    <ScrollArea className="scroll-area-w100" w="100%" h="100%" p="xs">
+      <Stack w="100%" gap="xs">
+        {failedIntegrations.length > 0 && (
+          <Group gap={4} wrap="wrap">
+            {failedIntegrations.map((integration) => (
+              <Badge key={integration.integration.id} color="red" variant="light" size="xs">
+                {integration.integration.name}: {t("common.error")}
+              </Badge>
+            ))}
+          </Group>
+        )}
+        {isPending ? (
+          <Flex justify="center" align="center" mih={96} p="sm">
+            <Text size="sm" c="dimmed" ta="center">
+              {t("common.action.loading")}
+            </Text>
+          </Flex>
+        ) : sortedNotifications.length > 0 ? (
+          <SimpleGrid cols={columns} spacing={spacing} verticalSpacing={spacing}>
+            {sortedNotifications.map((notification) => {
+              const href = getSafeApplicationUrl(notification.href);
+              return (
+                <Card
+                  key={notification.compositeKey}
+                  component={href ? "a" : "div"}
+                  href={href}
+                  target={href ? "_blank" : undefined}
+                  rel={href ? SAFE_NEW_TAB_REL : undefined}
+                  radius={board.itemRadius}
+                  w="100%"
+                  p={isRoomy ? "sm" : isDense ? 6 : "xs"}
+                  bg={columns > 1 ? undefined : "transparent"}
+                  style={{
+                    color: "inherit",
+                    textDecoration: "none",
+                    borderBottom:
+                      columns > 1
+                        ? undefined
+                        : "1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4))",
+                  }}
+                >
+                  <Flex gap={isDense ? "xs" : "sm"} align="flex-start" w="100%">
+                    {!options.hideLogos && notification.source?.iconUrl && (
+                      <Avatar
+                        src={notification.source.iconUrl}
+                        alt={notification.source.name}
+                        size={isDense ? "xs" : "sm"}
+                        radius={board.itemRadius}
+                      />
+                    )}
 
-                <Flex gap="sm" direction="column" w="100%">
-                  {notification.title && (
-                    <Text fz="sm" lh="sm" lineClamp={2}>
-                      {notification.title}
-                    </Text>
-                  )}
-                  <Text c="dimmed" size="sm" lineClamp={4} style={{ whiteSpace: "pre-line" }}>
-                    {notification.body}
-                  </Text>
+                    <Flex gap={isRoomy ? "sm" : isDense ? 4 : 6} direction="column" w="100%" miw={0}>
+                      {notification.title && (
+                        <Text fz={isRoomy ? "md" : "sm"} fw={600} lh={1.25} lineClamp={isDense ? 1 : 2}>
+                          {notification.title}
+                        </Text>
+                      )}
+                      <Text
+                        c="dimmed"
+                        size={isDense ? "xs" : "sm"}
+                        lineClamp={bodyLineClamp}
+                        style={{ whiteSpace: "pre-line" }}
+                      >
+                        {notification.body}
+                      </Text>
 
-                  <InfoDisplay date={notification.time} />
-                </Flex>
-              </Flex>
-            </Card>
-          ))
+                      <InfoDisplay
+                        date={notification.time}
+                        source={isRoomy ? (notification.source?.name ?? notification.integrationName) : undefined}
+                        dense={isDense}
+                      />
+                    </Flex>
+                  </Flex>
+                </Card>
+              );
+            })}
+          </SimpleGrid>
         ) : (
-          <Text size="sm" c="dimmed">
-            {t("noItems")}
-          </Text>
+          <Flex justify="center" align="center" mih={96} p="sm">
+            <Text size="sm" c="dimmed" ta="center">
+              {t("widget.notifications.noItems")}
+            </Text>
+          </Flex>
         )}
       </Stack>
     </ScrollArea>
   );
 }
 
-const InfoDisplay = ({ date }: { date: Date }) => {
+const InfoDisplay = ({ date, source, dense }: { date: Date; source?: string; dense: boolean }) => {
   const timeAgo = useTimeAgo(date, 30000); // update every 30sec
 
   return (
-    <Group gap={5} align={"center"}>
-      <IconClock size={"1rem"} color={"var(--mantine-color-dimmed)"} />
-      <Text size="sm" c="dimmed">
+    <Group gap={5} align="center" wrap="nowrap">
+      <IconClock aria-hidden size={dense ? 12 : "1rem"} color="var(--mantine-color-dimmed)" />
+      <Text size={dense ? "xs" : "sm"} c="dimmed">
         {timeAgo}
       </Text>
+      {source && <Text c="dimmed">•</Text>}
+      {source && (
+        <Text size="xs" c="dimmed" truncate="end">
+          {source}
+        </Text>
+      )}
     </Group>
   );
 };
diff --git a/packages/widgets/src/notifications/index.ts b/packages/widgets/src/notifications/index.ts
index 553ef5d9f..6358d8303 100644
--- a/packages/widgets/src/notifications/index.ts
+++ b/packages/widgets/src/notifications/index.ts
@@ -2,11 +2,18 @@ import { IconMessage } from "@tabler/icons-react";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("notifications", {
+  supportsAdvancedFocus: false,
   icon: IconMessage,
+  queryKey: [["widget", "notifications", "getNotifications"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      hideLogos: scope.options.hideLogos,
+      integrationIds: scope.integrationIds,
+    }),
   createOptions() {
     return optionsBuilder.from((factory) => ({
       hideLogos: factory.switch({ defaultValue: false }),
diff --git a/packages/widgets/src/options.ts b/packages/widgets/src/options.ts
index c6a0f7bc3..43428fd4b 100644
--- a/packages/widgets/src/options.ts
+++ b/packages/widgets/src/options.ts
@@ -56,7 +56,10 @@ interface DynamicSelectInput extends CommonInput<DynamicSelectOption | null> {
     query: string,
     integrationIds: string[],
     options: Record<string, unknown>,
+    itemId?: string,
+    boardId?: string,
   ) => {
+    error?: string;
     isPending: boolean;
     isError?: boolean;
     options: DynamicSelectOption[];
@@ -99,6 +102,12 @@ export interface OptionLocation {
 }
 
 const optionsFactory = {
+  internal: <T>(input: CommonInput<T> & { defaultValue: T }) => ({
+    type: "internal" as const,
+    defaultValue: input.defaultValue,
+    withDescription: false,
+    skipContextMenu: true,
+  }),
   switch: (input?: CommonInput<boolean>) => ({
     type: "switch" as const,
     defaultValue: input?.defaultValue ?? false,
@@ -217,6 +226,12 @@ const optionsFactory = {
     defaultValue: input?.defaultValue ?? "",
     withDescription: input?.withDescription ?? false,
   }),
+  customWidgetConfiguration: (input?: CommonInput<Record<string, unknown>>) => ({
+    type: "customWidgetConfiguration" as const,
+    defaultValue: input?.defaultValue ?? {},
+    withDescription: input?.withDescription ?? false,
+    skipContextMenu: true,
+  }),
   sortableItemList: <const TItem, const TOptionValue extends UniqueIdentifier>(
     input: SortableItemListInput<TItem, TOptionValue>,
   ) => ({
diff --git a/packages/widgets/src/paperless-ngx/component.tsx b/packages/widgets/src/paperless-ngx/component.tsx
index 08bcee3fb..ea9499679 100644
--- a/packages/widgets/src/paperless-ngx/component.tsx
+++ b/packages/widgets/src/paperless-ngx/component.tsx
@@ -2,7 +2,7 @@
 
 import { Fragment } from "react";
 import type { CSSProperties } from "react";
-import { RingProgress, Text } from "@mantine/core";
+import { Center, RingProgress, Text } from "@mantine/core";
 import { IconFileDescription, IconFileText, IconInbox, IconTag, IconUsers } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -70,12 +70,32 @@ const heroPartVisibility = {
   ring: "showInboxRing",
 } as const;
 
-export default function PaperlessNgxWidget({ integrationIds, options, width }: WidgetComponentProps<"paperlessNgx">) {
+export default function PaperlessNgxWidget({
+  integrationIds,
+  options,
+  width,
+  height,
+}: WidgetComponentProps<"paperlessNgx">) {
   const t = useScopedI18n("widget.paperlessNgx");
-  const { data: stats } = clientApi.widget.paperlessNgx.getStats.useQuery({
+  const tCommon = useScopedI18n("common");
+  const {
+    data: stats,
+    error,
+    isPending,
+  } = clientApi.widget.paperlessNgx.getStats.useQuery({
     integrationId: integrationIds[0] ?? "",
   });
 
+  if (isPending) {
+    return (
+      <Center h="100%">
+        <Text c="dimmed" size="sm">
+          {tCommon("action.loading")}
+        </Text>
+      </Center>
+    );
+  }
+  if (error && stats === undefined) throw error;
   if (!stats) return <WidgetEmptyState />;
 
   const canShowInboxHero = options.showDocumentsInbox && options.showDocumentsTotal;
@@ -95,18 +115,19 @@ export default function PaperlessNgxWidget({ integrationIds, options, width }: W
     .map(([, statKey]) => statKey)
     .filter((statKey) => !(showHero && gridHiddenWhenHeroShown.has(statKey)));
 
-  const gridCols = getGridCols(width);
-  const ringSize = getRingSize(width);
+  const gridCols = Math.max(1, Math.min(visibleStatKeys.length, getGridCols(width, height)));
+  const ringSize = getRingSize(Math.min(width, height * 2));
   const iconSize = getIconSize(width);
   const ringLabelSize = getRingLabelSize(ringSize);
   const hasContent = showHero || visibleStatKeys.length > 0;
 
   const heroLayoutClass =
     heroLayoutBySecondaryStats[String(visibleStatKeys.length > 0) as keyof typeof heroLayoutBySecondaryStats];
-  const heroRingClass = heroVariantByRing[String(options.showInboxRing) as keyof typeof heroVariantByRing];
+  const showInboxRing = options.showInboxRing && height >= 120;
+  const heroRingClass = heroVariantByRing[String(showInboxRing) as keyof typeof heroVariantByRing];
 
   const visibleHeroParts = Object.entries(heroPartVisibility).filter(
-    ([, optionKey]) => options[optionKey as keyof typeof options],
+    ([partKey, optionKey]) => options[optionKey as keyof typeof options] && (partKey !== "ring" || showInboxRing),
   );
 
   const heroPartRenderers = {
@@ -183,9 +204,9 @@ function computeInboxProgress(total: number, inbox: number): number {
   return Math.round((inbox / total) * 100);
 }
 
-function getGridCols(width: number): number {
+function getGridCols(width: number, height: number): number {
   const match = gridColsByWidth.find(({ minWidth }) => width >= minWidth);
-  return match?.cols ?? 1;
+  return Math.min(match?.cols ?? 1, height < 140 ? 2 : 5);
 }
 
 function getRingSize(width: number): number {
diff --git a/packages/widgets/src/paperless-ngx/index.ts b/packages/widgets/src/paperless-ngx/index.ts
index ef6fd2e5a..600ee4652 100644
--- a/packages/widgets/src/paperless-ngx/index.ts
+++ b/packages/widgets/src/paperless-ngx/index.ts
@@ -4,10 +4,12 @@ import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("paperlessNgx", {
+  supportsAdvancedFocus: false,
   icon: IconFileText,
   refetchInterval: null,
   supportedIntegrations: ["paperlessNgx"],
   integrationsRequired: true,
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showInboxRatio: factory.switch({
diff --git a/packages/widgets/src/patchmon/component.tsx b/packages/widgets/src/patchmon/component.tsx
index f1dae3e29..9889b0797 100644
--- a/packages/widgets/src/patchmon/component.tsx
+++ b/packages/widgets/src/patchmon/component.tsx
@@ -78,8 +78,12 @@ const getLayoutMode = (width: number, height: number): LayoutMode => {
 export default function PatchMonWidget({ integrationIds, options, width, height }: WidgetComponentProps<"patchmon">) {
   const t = useScopedI18n("widget.patchmon");
   const integrationId = integrationIds[0] ?? "";
-  const { data: stats } = clientApi.widget.patchmon.getStats.useQuery({ integrationId }, { staleTime: 60 * 1000 });
+  const { data: stats, error } = clientApi.widget.patchmon.getStats.useQuery(
+    { integrationId },
+    { staleTime: 60 * 1000 },
+  );
 
+  if (error && !stats) throw error;
   if (!stats) return <WidgetEmptyState />;
 
   const statValues: Record<PatchMonStatKey, number> = {
diff --git a/packages/widgets/src/patchmon/index.ts b/packages/widgets/src/patchmon/index.ts
index 6f97be83f..868a804e5 100644
--- a/packages/widgets/src/patchmon/index.ts
+++ b/packages/widgets/src/patchmon/index.ts
@@ -7,9 +7,11 @@ import { PATCHMON_STAT_COLOR_PRESETS } from "./stat-colors";
 import { patchmonOptionsSuperRefine } from "./threshold-validation";
 
 export const { definition, componentLoader } = createWidgetDefinition("patchmon", {
+  supportsAdvancedFocus: false,
   icon: IconShieldCheck,
   supportedIntegrations: ["patchmon"],
   integrationsRequired: true,
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from(
       (factory) => ({
@@ -188,18 +190,42 @@ export const { definition, componentLoader } = createWidgetDefinition("patchmon"
         useCustomThresholds: {
           shouldHide: (options) => !options.enableThresholdColors,
         },
-        hostsNeedingUpdatesThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsNeedingUpdatesWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsNeedingUpdatesCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        securityUpdatesThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        securityUpdatesWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        securityUpdatesCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsWithSecurityUpdatesThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsWithSecurityUpdatesWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsWithSecurityUpdatesCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        upToDateHostsThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        upToDateHostsWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        upToDateHostsCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
+        hostsNeedingUpdatesThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsNeedingUpdatesWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsNeedingUpdatesCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        securityUpdatesThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        securityUpdatesWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        securityUpdatesCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsWithSecurityUpdatesThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsWithSecurityUpdatesWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsWithSecurityUpdatesCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        upToDateHostsThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        upToDateHostsWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        upToDateHostsCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
         totalOutdatedPackagesThresholdMode: {
           shouldHide: (options) =>
             !options.enableThresholdColors || !options.useCustomThresholds || !options.showTotalOutdatedPackages,
diff --git a/packages/widgets/src/patchmon/os-distribution-section.tsx b/packages/widgets/src/patchmon/os-distribution-section.tsx
index cb21cb203..4cb03447c 100644
--- a/packages/widgets/src/patchmon/os-distribution-section.tsx
+++ b/packages/widgets/src/patchmon/os-distribution-section.tsx
@@ -9,16 +9,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import classes from "./component.module.css";
 
-const OS_COLORS = [
-  "blue.6",
-  "orange.6",
-  "green.6",
-  "grape.6",
-  "cyan.6",
-  "pink.6",
-  "yellow.6",
-  "teal.6",
-] as const;
+const OS_COLORS = ["blue.6", "orange.6", "green.6", "grape.6", "cyan.6", "pink.6", "yellow.6", "teal.6"] as const;
 
 interface OsDistributionSectionProps {
   entries: PatchMonOsDistributionEntry[];
@@ -73,13 +64,7 @@ export function OsDistributionSection({
         )}
         <div className={`${classes.osDonutContent} ${showLegend ? classes.osDonutContentWithLegend : ""}`}>
           <div className={classes.osDonut}>
-            <DonutChart
-              data={chartData}
-              size={donutSize}
-              withTooltip
-              tooltipDataSource="segment"
-              paddingAngle={2}
-            />
+            <DonutChart data={chartData} size={donutSize} withTooltip tooltipDataSource="segment" paddingAngle={2} />
           </div>
           {showLegend && (
             <div className={classes.osLegend}>
@@ -115,7 +100,12 @@ export function OsDistributionSection({
       <div className={classes.compactOsBars}>
         {compactEntries.map((entry, i) => (
           <div key={`${entry.name}-${entry.osVersion ?? ""}`} className={classes.compactOsBar}>
-            <Text size="xs" className={classes.compactOsLabel} truncate="end" title={formatOsLabel(entry, showOsVersion)}>
+            <Text
+              size="xs"
+              className={classes.compactOsLabel}
+              truncate="end"
+              title={formatOsLabel(entry, showOsVersion)}
+            >
               {formatOsLabel(entry, showOsVersion)}
             </Text>
             <Group gap={6} wrap="nowrap" className={classes.osBarGroup}>
diff --git a/packages/widgets/src/patchmon/stat-colors.ts b/packages/widgets/src/patchmon/stat-colors.ts
index 7ecd035ac..1974f73a2 100644
--- a/packages/widgets/src/patchmon/stat-colors.ts
+++ b/packages/widgets/src/patchmon/stat-colors.ts
@@ -13,11 +13,7 @@ export type PatchMonStatKey =
 
 export type ColorablePatchMonStatKey = Extract<
   PatchMonStatKey,
-  | "hostsNeedingUpdates"
-  | "securityUpdates"
-  | "hostsWithSecurityUpdates"
-  | "upToDateHosts"
-  | "totalOutdatedPackages"
+  "hostsNeedingUpdates" | "securityUpdates" | "hostsWithSecurityUpdates" | "upToDateHosts" | "totalOutdatedPackages"
 >;
 
 export type StatSeverity = "green" | "yellow" | "red" | "neutral";
diff --git a/packages/widgets/src/patchmon/test/stat-colors.spec.ts b/packages/widgets/src/patchmon/test/stat-colors.spec.ts
index 12596f499..22d296829 100644
--- a/packages/widgets/src/patchmon/test/stat-colors.spec.ts
+++ b/packages/widgets/src/patchmon/test/stat-colors.spec.ts
@@ -117,11 +117,16 @@ describe("resolveStatColor options", () => {
   test("handles zero total hosts for percent-based stats", () => {
     expect(resolveStatColor("upToDateHosts", 0, { totalHosts: 0 }, defaultOptions)).toBe("green");
     expect(
-      resolveStatColor("hostsNeedingUpdates", 1, { totalHosts: 0 }, {
-        ...defaultOptions,
-        useCustomThresholds: true,
-        hostsNeedingUpdatesThresholdMode: "percent",
-      }),
+      resolveStatColor(
+        "hostsNeedingUpdates",
+        1,
+        { totalHosts: 0 },
+        {
+          ...defaultOptions,
+          useCustomThresholds: true,
+          hostsNeedingUpdatesThresholdMode: "percent",
+        },
+      ),
     ).toBe("red");
   });
 
diff --git a/packages/widgets/src/patchmon/test/threshold-validation.spec.ts b/packages/widgets/src/patchmon/test/threshold-validation.spec.ts
index 00dafba3b..008d9746d 100644
--- a/packages/widgets/src/patchmon/test/threshold-validation.spec.ts
+++ b/packages/widgets/src/patchmon/test/threshold-validation.spec.ts
@@ -23,25 +23,27 @@ const baseOptions = {
   totalOutdatedPackagesCriticalAt: 50,
 };
 
-const optionsSchema = z.object({
-  hostsNeedingUpdatesWarningAt: z.number().int().min(0),
-  hostsNeedingUpdatesCriticalAt: z.number().int().min(0),
-  securityUpdatesWarningAt: z.number().int().min(0),
-  securityUpdatesCriticalAt: z.number().int().min(0),
-  hostsWithSecurityUpdatesWarningAt: z.number().int().min(0),
-  hostsWithSecurityUpdatesCriticalAt: z.number().int().min(0),
-  upToDateHostsWarningAt: z.number().int().min(0),
-  upToDateHostsCriticalAt: z.number().int().min(0),
-  totalOutdatedPackagesWarningAt: z.number().int().min(0),
-  totalOutdatedPackagesCriticalAt: z.number().int().min(0),
-  enableThresholdColors: z.boolean(),
-  useCustomThresholds: z.boolean(),
-  hostsNeedingUpdatesThresholdMode: z.enum(["absolute", "percent"]),
-  securityUpdatesThresholdMode: z.enum(["absolute", "percent"]),
-  hostsWithSecurityUpdatesThresholdMode: z.enum(["absolute", "percent"]),
-  upToDateHostsThresholdMode: z.enum(["absolute", "percent"]),
-  totalOutdatedPackagesThresholdMode: z.enum(["absolute", "percent"]),
-}).superRefine(patchmonOptionsSuperRefine);
+const optionsSchema = z
+  .object({
+    hostsNeedingUpdatesWarningAt: z.number().int().min(0),
+    hostsNeedingUpdatesCriticalAt: z.number().int().min(0),
+    securityUpdatesWarningAt: z.number().int().min(0),
+    securityUpdatesCriticalAt: z.number().int().min(0),
+    hostsWithSecurityUpdatesWarningAt: z.number().int().min(0),
+    hostsWithSecurityUpdatesCriticalAt: z.number().int().min(0),
+    upToDateHostsWarningAt: z.number().int().min(0),
+    upToDateHostsCriticalAt: z.number().int().min(0),
+    totalOutdatedPackagesWarningAt: z.number().int().min(0),
+    totalOutdatedPackagesCriticalAt: z.number().int().min(0),
+    enableThresholdColors: z.boolean(),
+    useCustomThresholds: z.boolean(),
+    hostsNeedingUpdatesThresholdMode: z.enum(["absolute", "percent"]),
+    securityUpdatesThresholdMode: z.enum(["absolute", "percent"]),
+    hostsWithSecurityUpdatesThresholdMode: z.enum(["absolute", "percent"]),
+    upToDateHostsThresholdMode: z.enum(["absolute", "percent"]),
+    totalOutdatedPackagesThresholdMode: z.enum(["absolute", "percent"]),
+  })
+  .superRefine(patchmonOptionsSuperRefine);
 
 describe("patchmonOptionsSuperRefine", () => {
   test("accepts percent thresholds within 0-100", () => {
diff --git a/packages/widgets/src/prefetch.ts b/packages/widgets/src/prefetch.ts
index c0e3d03c4..36e2f3415 100644
--- a/packages/widgets/src/prefetch.ts
+++ b/packages/widgets/src/prefetch.ts
@@ -1,26 +1,20 @@
-import { cache } from "react";
 import type { QueryClient } from "@tanstack/react-query";
 
-import { db } from "@homarr/db";
-import { getServerSettingsAsync } from "@homarr/db/queries";
+import { getRscServerSettingsAsync } from "@homarr/api/server-settings-server";
 import type { WidgetKind } from "@homarr/definitions";
 import { createSettings } from "@homarr/settings/creator";
 
-import { reduceWidgetOptionsWithDefaultValues } from ".";
+import { loadWidgetDefinition, reduceWidgetOptionsWithDefinition } from "./manifest";
 import prefetchForApps from "./app/prefetch";
 import prefetchForBookmarks from "./bookmarks/prefetch";
-import prefetchForDownloads from "./downloads/prefetch";
 import type { Prefetch, WidgetOptionsRecordOf } from "./definition";
 import type { inferOptionsFromCreator } from "./options";
 
-const cachedGetServerSettingsAsync = cache(getServerSettingsAsync);
-
 const prefetchCallbacks: Partial<{
   [TKind in WidgetKind]: Prefetch<TKind>;
 }> = {
   bookmarks: prefetchForBookmarks,
   app: prefetchForApps,
-  downloads: prefetchForDownloads,
 };
 
 export const prefetchForKindAsync = async <TKind extends WidgetKind>(
@@ -36,11 +30,15 @@ export const prefetchForKindAsync = async <TKind extends WidgetKind>(
     return;
   }
 
-  const serverSettings = await cachedGetServerSettingsAsync(db);
+  const [serverSettings, definition] = await Promise.all([getRscServerSettingsAsync(), loadWidgetDefinition(kind)]);
 
   const itemsWithDefaultOptions = items.map((item) => ({
     ...item,
-    options: reduceWidgetOptionsWithDefaultValues(kind, createSettings({ user: null, serverSettings }), item.options),
+    options: reduceWidgetOptionsWithDefinition(
+      definition,
+      createSettings({ user: null, serverSettings }),
+      item.options,
+    ),
   }));
 
   await callback(queryClient, itemsWithDefaultOptions as never[]);
diff --git a/packages/widgets/src/refetch-intervals.ts b/packages/widgets/src/refetch-intervals.ts
new file mode 100644
index 000000000..b571180c7
--- /dev/null
+++ b/packages/widgets/src/refetch-intervals.ts
@@ -0,0 +1,35 @@
+/**
+ * Query policy used by the root client provider.
+ *
+ * Keep this module free of widget component/definition imports. Importing the
+ * full widget registry from a root provider makes every widget part of the
+ * initial client graph, even before a board has rendered one widget.
+ */
+export const widgetQueryRefetchIntervals = [
+  { queryKey: [["docker", "getContainers"]], intervalSeconds: 30 },
+  { queryKey: [["widget", "dnsHole"]], intervalSeconds: 5 },
+  { queryKey: [["widget", "downloads", "getJobsAndStatuses"]], intervalSeconds: 5 },
+  { queryKey: [["widget", "firewall"]], intervalSeconds: 5 },
+  { queryKey: [["widget", "healthMonitoring"]], intervalSeconds: 5 },
+  { queryKey: [["widget", "mediaServer", "getCurrentStreams"]], intervalSeconds: 5 },
+  { queryKey: [["widget", "tracearr"]], intervalSeconds: 5 },
+  { queryKey: [["widget", "immich", "getAlbum"]], intervalSeconds: null },
+  { queryKey: [["widget", "immich", "getServerStats"]], intervalSeconds: null },
+  { queryKey: [["widget", "immich", "getAlbums"]], intervalSeconds: null },
+  { queryKey: [["widget", "indexerManager"]], intervalSeconds: null },
+  { queryKey: [["widget", "mediaRelease"]], intervalSeconds: null },
+  { queryKey: [["widget", "mediaTranscoding", "getDataAsync"]], intervalSeconds: null },
+  { queryKey: [["widget", "minecraft", "getServerStatus"]], intervalSeconds: null },
+  { queryKey: [["widget", "networkController"]], intervalSeconds: null },
+  { queryKey: [["widget", "paperlessNgx"]], intervalSeconds: null },
+  { queryKey: [["widget", "releases", "getLatest"]], intervalSeconds: null },
+  { queryKey: [["widget", "rssFeed", "getFeeds"]], intervalSeconds: null },
+  { queryKey: [["widget", "speedtestTracker"]], intervalSeconds: null },
+  { queryKey: [["widget", "stockPrice", "getPriceHistory"]], intervalSeconds: null },
+  { queryKey: [["widget", "umami", "getVisitorStats"]], intervalSeconds: null },
+  { queryKey: [["widget", "umami", "getActiveVisitors"]], intervalSeconds: null },
+  { queryKey: [["widget", "umami", "getMultiEventTimeSeries"]], intervalSeconds: null },
+  { queryKey: [["widget", "umami", "getTopPages"]], intervalSeconds: null },
+  { queryKey: [["widget", "umami", "getTopReferrers"]], intervalSeconds: null },
+  { queryKey: [["widget", "vpn"]], intervalSeconds: null },
+] as const;
diff --git a/packages/widgets/src/releases/component.module.scss b/packages/widgets/src/releases/component.module.scss
index 9d41454cb..caafaa929 100644
--- a/packages/widgets/src/releases/component.module.scss
+++ b/packages/widgets/src/releases/component.module.scss
@@ -7,20 +7,41 @@
 }
 
 .releasesRepositoryHeader {
+  width: 100%;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  text-align: start;
   user-select: none;
   cursor: pointer;
 
   &:hover,
   &.active,
+  &:focus-visible,
   &:has(~ .releasesRepositoryDetails:hover) {
     background-color: var(--mantine-color-secondaryColor-light);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: -2px;
+  }
 }
 
 .releasesRepositoryDetails {
+  width: 100%;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  text-align: start;
   background-color: var(--mantine-color-default-hover);
   user-select: none;
   cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: -2px;
+  }
 }
 
 .releasesRepositoryExpanded {
diff --git a/packages/widgets/src/releases/component.tsx b/packages/widgets/src/releases/component.tsx
index ca61d24c3..c7295ec59 100644
--- a/packages/widgets/src/releases/component.tsx
+++ b/packages/widgets/src/releases/component.tsx
@@ -1,7 +1,18 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
-import { Button, Divider, Group, Stack, Text, Title, Tooltip } from "@mantine/core";
+import {
+  Button,
+  Divider,
+  Group,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 import {
   IconArchive,
@@ -27,6 +38,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 import { MaskedOrNormalImage } from "@homarr/ui";
 
 import type { WidgetComponentProps } from "../definition";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import classes from "./component.module.scss";
 import type { ReleasesRepository, ReleasesRepositoryResponse } from "./releases-repository";
 import { getReleasesQueryStaleTimeMs } from "./query-options";
@@ -37,7 +49,7 @@ const formatRelativeDate = (value: string): string => {
   return isMonths ? value.toUpperCase() : isOtherUnits ? value.toLowerCase() : value;
 };
 
-export default function ReleasesWidget({ options, itemId }: WidgetComponentProps<"releases">) {
+export default function ReleasesWidget({ options, itemId, width }: WidgetComponentProps<"releases">) {
   const t = useScopedI18n("widget.releases");
   const now = useNow();
   const formatter = useFormatter();
@@ -48,6 +60,7 @@ export default function ReleasesWidget({ options, itemId }: WidgetComponentProps
     key: "releases-viewed-versions",
     defaultValue: {},
   });
+  const columns = Math.max(1, Math.floor(width / 420));
 
   const relativeDateOptions = useMemo(
     () => ({
@@ -174,343 +187,378 @@ export default function ReleasesWidget({ options, itemId }: WidgetComponentProps
   );
 
   return (
-    <Stack gap={0} className="releases">
-      {repositories.map((repository: ReleasesRepositoryResponse) => {
-        const isActive = expandedRepositoryId === repository.id;
-        const hasError = repository.error !== undefined;
+    <ScrollArea h="100%" className="releases">
+      <SimpleGrid cols={columns} spacing={columns > 1 ? "sm" : 0} p={columns > 1 ? "xs" : 0}>
+        {repositories.map((repository: ReleasesRepositoryResponse) => {
+          const isActive = expandedRepositoryId === repository.id;
+          const hasError = repository.error !== undefined;
 
-        return (
-          <Stack
-            key={repository.id}
-            className={combineClasses(
-              "releases-repository",
-              // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-              `releases-repository-${repository.providerMetadata?.name ?? "error"}-${repository.name || repository.identifier.replace(/[^a-zA-Z0-9]/g, "_")}`,
-              classes.releasesRepository,
-            )}
-            gap={0}
-          >
-            <Group
-              className={combineClasses("releases-repository-header", classes.releasesRepositoryHeader, {
-                [classes.active ?? ""]: isActive,
-              })}
-              p="xs"
-              onClick={() => toggleExpandedDisplay(repository)}
+          return (
+            <Stack
+              key={repository.id}
+              className={combineClasses(
+                "releases-repository",
+                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                `releases-repository-${repository.providerMetadata?.name ?? "error"}-${repository.name || repository.identifier.replace(/[^a-zA-Z0-9]/g, "_")}`,
+                classes.releasesRepository,
+              )}
+              gap={0}
+              style={
+                columns > 1
+                  ? {
+                      border: "1px solid var(--mantine-color-default-border)",
+                      borderRadius: "var(--mantine-radius-sm)",
+                    }
+                  : undefined
+              }
             >
-              <MaskedOrNormalImage
-                className="releases-repository-header-icon"
-                imageUrl={repository.iconUrl ?? repository.providerMetadata?.iconUrl}
-                hasColor={hasIconColor}
-                style={{
-                  width: "1em",
-                  aspectRatio: "1/1",
-                }}
-              />
-
-              <Group
-                className="releases-repository-header-nameVersion-wrapper"
-                gap={5}
-                justify="space-between"
-                miw={0}
-                style={{ flex: 1 }}
+              <UnstyledButton
+                className={combineClasses("releases-repository-header", classes.releasesRepositoryHeader, {
+                  [classes.active ?? ""]: isActive,
+                })}
+                onClick={() => toggleExpandedDisplay(repository)}
+                aria-expanded={isActive}
+                aria-label={t(isActive ? "collapseDetails" : "expandDetails", {
+                  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                  name: repository.name || repository.identifier,
+                })}
               >
-                {!options.showOnlyIcon && (
-                  <Text className="releases-repository-header-name" size="xs">
-                    {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
-                    {repository.name || repository.identifier}
-                  </Text>
-                )}
+                <Group p="xs">
+                  <MaskedOrNormalImage
+                    className="releases-repository-header-icon"
+                    imageUrl={repository.iconUrl ?? repository.providerMetadata?.iconUrl}
+                    hasColor={hasIconColor}
+                    style={{
+                      width: "1em",
+                      aspectRatio: "1/1",
+                    }}
+                  />
 
-                <Tooltip
-                  className="releases-repository-header-version-tooltip"
-                  withArrow
-                  arrowSize={5}
-                  label={repository.latestRelease}
-                  events={{ hover: repository.latestRelease !== undefined, focus: false, touch: false }}
-                >
-                  <Text
-                    className="releases-repository-header-version"
-                    size="xs"
-                    fw={700}
-                    truncate="end"
-                    c={hasError ? "red" : "text"}
-                    style={{ flexShrink: 1 }}
+                  <Group
+                    className="releases-repository-header-nameVersion-wrapper"
+                    gap={5}
+                    justify="space-between"
+                    miw={0}
+                    style={{ flex: 1 }}
                   >
-                    {hasError ? t("error.label") : (repository.latestRelease ?? t("not-found"))}
-                  </Text>
-                </Tooltip>
-              </Group>
+                    {!options.showOnlyIcon && (
+                      <Text className="releases-repository-header-name" size="xs">
+                        {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
+                        {repository.name || repository.identifier}
+                      </Text>
+                    )}
 
-              <Group className="releases-repository-header-releaseDate-wrapper" gap={5} style={{ flex: "0 0 auto" }}>
-                <Text
-                  className="releases-repository-header-releaseDate"
-                  size="xs"
-                  c={
-                    repository.viewed
-                      ? "green"
-                      : repository.isNewRelease
-                        ? "primaryColor"
-                        : repository.isStaleRelease
-                          ? "secondaryColor"
-                          : "dimmed"
-                  }
-                >
-                  {repository.latestReleaseAt &&
-                    !hasError &&
-                    formatter.relativeTime(repository.latestReleaseAt, {
-                      now,
-                      style: "long",
-                    })}
-                </Text>
-                {hasError ? (
-                  <IconTriangleFilled
-                    className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-error"
-                    size={10}
-                    color="var(--mantine-color-red-filled)"
-                  />
-                ) : repository.viewed ? (
-                  <IconCheck
-                    className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-confirmed"
-                    size={10}
-                    color="green"
-                  />
-                ) : (
-                  (repository.isNewRelease || repository.isStaleRelease) && (
-                    <IconCircleFilled
-                      className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-marker"
-                      size={10}
-                      color={
-                        repository.isNewRelease
-                          ? "var(--mantine-color-primaryColor-filled)"
-                          : "var(--mantine-color-secondaryColor-filled)"
+                    <Tooltip
+                      className="releases-repository-header-version-tooltip"
+                      withArrow
+                      arrowSize={5}
+                      label={repository.latestRelease}
+                      events={{ hover: repository.latestRelease !== undefined, focus: true, touch: false }}
+                    >
+                      <Text
+                        className="releases-repository-header-version"
+                        size="xs"
+                        fw={700}
+                        truncate="end"
+                        c={hasError ? "red" : "text"}
+                        style={{ flexShrink: 1 }}
+                      >
+                        {hasError ? t("error.label") : (repository.latestRelease ?? t("not-found"))}
+                      </Text>
+                    </Tooltip>
+                  </Group>
+
+                  <Group
+                    className="releases-repository-header-releaseDate-wrapper"
+                    gap={5}
+                    style={{ flex: "0 0 auto" }}
+                  >
+                    <Text
+                      className="releases-repository-header-releaseDate"
+                      size="xs"
+                      c={
+                        repository.viewed
+                          ? "green"
+                          : repository.isNewRelease
+                            ? "primaryColor"
+                            : repository.isStaleRelease
+                              ? "secondaryColor"
+                              : "dimmed"
                       }
-                    />
-                  )
-                )}
-              </Group>
-            </Group>
-            {options.showDetails && (
-              <DetailsDisplay repository={repository} toggleExpandedDisplay={toggleExpandedDisplay} />
-            )}
-            {isActive && (
-              <ExpandedDisplay
-                repository={repository}
-                hasIconColor={hasIconColor}
-                markReleaseViewed={markReleaseViewed}
-                toggleExpandedDisplay={toggleExpandedDisplay}
-              />
-            )}
-            <Divider className="releases-repository-divider" />
-          </Stack>
-        );
-      })}
-    </Stack>
+                    >
+                      {repository.latestReleaseAt &&
+                        !hasError &&
+                        formatter.relativeTime(repository.latestReleaseAt, {
+                          now,
+                          style: "long",
+                        })}
+                    </Text>
+                    {hasError ? (
+                      <IconTriangleFilled
+                        className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-error"
+                        size={10}
+                        color="var(--mantine-color-red-filled)"
+                      />
+                    ) : repository.viewed ? (
+                      <IconCheck
+                        className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-confirmed"
+                        size={10}
+                        color="green"
+                      />
+                    ) : (
+                      (repository.isNewRelease || repository.isStaleRelease) && (
+                        <IconCircleFilled
+                          className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-marker"
+                          size={10}
+                          color={
+                            repository.isNewRelease
+                              ? "var(--mantine-color-primaryColor-filled)"
+                              : "var(--mantine-color-secondaryColor-filled)"
+                          }
+                        />
+                      )
+                    )}
+                  </Group>
+                </Group>
+              </UnstyledButton>
+              {options.showDetails && (
+                <DetailsDisplay
+                  repository={repository}
+                  isExpanded={isActive}
+                  toggleExpandedDisplay={toggleExpandedDisplay}
+                />
+              )}
+              {isActive && (
+                <ExpandedDisplay
+                  repository={repository}
+                  hasIconColor={hasIconColor}
+                  markReleaseViewed={markReleaseViewed}
+                  toggleExpandedDisplay={toggleExpandedDisplay}
+                />
+              )}
+              <Divider className="releases-repository-divider" />
+            </Stack>
+          );
+        })}
+      </SimpleGrid>
+    </ScrollArea>
   );
 }
 
 interface DetailsDisplayProps {
   repository: ReleasesRepositoryResponse;
+  isExpanded: boolean;
   toggleExpandedDisplay: (repository: ReleasesRepositoryResponse) => void;
 }
 
-const DetailsDisplay = ({ repository, toggleExpandedDisplay }: DetailsDisplayProps) => {
+const DetailsDisplay = ({ repository, isExpanded, toggleExpandedDisplay }: DetailsDisplayProps) => {
   const t = useScopedI18n("widget.releases");
   const formatter = useFormatter();
 
   return (
     <>
-      <Divider className="releases-repository-details-divider" onClick={() => toggleExpandedDisplay(repository)} />
-      <Group
+      <Divider className="releases-repository-details-divider" />
+      <UnstyledButton
         className={combineClasses("releases-repository-details", classes.releasesRepositoryDetails)}
-        justify="space-between"
-        p={5}
         onClick={() => toggleExpandedDisplay(repository)}
+        aria-expanded={isExpanded}
+        aria-label={t(isExpanded ? "collapseDetails" : "expandDetails", {
+          // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+          name: repository.name || repository.identifier,
+        })}
       >
-        <Group className="releases-repository-details-icon-wrapper">
-          <Tooltip
-            className={combineClasses(
-              "releases-repository-details-icon-tooltip",
-              "releases-repository-details-icon-preRelease-tooltip",
-            )}
-            label={t("pre-release")}
-            withArrow
-            arrowSize={5}
-          >
-            <IconProgressCheck
+        <Group justify="space-between" p={5}>
+          <Group className="releases-repository-details-icon-wrapper">
+            <Tooltip
               className={combineClasses(
-                "releases-repository-details-icon",
-                "releases-repository-details-icon-preRelease",
+                "releases-repository-details-icon-tooltip",
+                "releases-repository-details-icon-preRelease-tooltip",
               )}
-              size={13}
-              color={
-                repository.isPreRelease ? "var(--mantine-color-secondaryColor-text)" : "var(--mantine-color-dimmed)"
-              }
-            />
-          </Tooltip>
-
-          <Tooltip
-            className={combineClasses(
-              "releases-repository-details-icon-tooltip",
-              "releases-repository-details-icon-archived-tooltip",
-            )}
-            label={t("archived")}
-            withArrow
-            arrowSize={5}
-          >
-            <IconArchive
-              className={combineClasses(
-                "releases-repository-details-icon",
-                "releases-repository-details-icon-archived",
-              )}
-              size={13}
-              color={repository.isArchived ? "var(--mantine-color-secondaryColor-text)" : "var(--mantine-color-dimmed)"}
-            />
-          </Tooltip>
-
-          <Tooltip
-            className={combineClasses(
-              "releases-repository-details-icon-tooltip",
-              "releases-repository-details-icon-forked-tooltip",
-            )}
-            label={t("forked")}
-            withArrow
-            arrowSize={5}
-          >
-            <IconGitFork
-              className={combineClasses("releases-repository-details-icon", "releases-repository-details-icon-forked")}
-              size={13}
-              color={repository.isFork ? "var(--mantine-color-secondaryColor-text)" : "var(--mantine-color-dimmed)"}
-            />
-          </Tooltip>
-        </Group>
-        <Group className="releases-repository-details-stats">
-          <Tooltip
-            className={combineClasses(
-              "releases-repository-details-stats-tooltip",
-              "releases-repository-details-stats-stars-tooltip",
-            )}
-            label={t("starsCount")}
-            withArrow
-            arrowSize={5}
-          >
-            <Group
-              className={combineClasses(
-                "releases-repository-details-stats-wrapper",
-                "releases-repository-details-stats-stars-wrapper",
-              )}
-              gap={5}
+              label={t("pre-release")}
+              withArrow
+              arrowSize={5}
             >
-              <IconStar
+              <IconProgressCheck
                 className={combineClasses(
-                  "releases-repository-details-stats-icon",
-                  "releases-repository-details-stats-stars-icon",
+                  "releases-repository-details-icon",
+                  "releases-repository-details-icon-preRelease",
                 )}
-                size={12}
-                color={!repository.starsCount ? "var(--mantine-color-dimmed)" : "var(--mantine-color-text)"}
+                size={13}
+                color={
+                  repository.isPreRelease ? "var(--mantine-color-secondaryColor-text)" : "var(--mantine-color-dimmed)"
+                }
               />
-              <Text
-                className={combineClasses(
-                  "releases-repository-details-stats-text",
-                  "releases-repository-details-stats-stars-text",
-                )}
-                size="xs"
-                c={!repository.starsCount ? "dimmed" : ""}
-              >
-                {!repository.starsCount
-                  ? "-"
-                  : formatter.number(repository.starsCount, {
-                      notation: "compact",
-                      maximumFractionDigits: 1,
-                    })}
-              </Text>
-            </Group>
-          </Tooltip>
+            </Tooltip>
 
-          <Tooltip
-            className={combineClasses(
-              "releases-repository-details-stats-tooltip",
-              "releases-repository-details-stats-forks-tooltip",
-            )}
-            label={t("forksCount")}
-            withArrow
-            arrowSize={5}
-          >
-            <Group
+            <Tooltip
               className={combineClasses(
-                "releases-repository-details-stats-wrapper",
-                "releases-repository-details-stats-forks-wrapper",
+                "releases-repository-details-icon-tooltip",
+                "releases-repository-details-icon-archived-tooltip",
               )}
-              gap={5}
+              label={t("archived")}
+              withArrow
+              arrowSize={5}
+            >
+              <IconArchive
+                className={combineClasses(
+                  "releases-repository-details-icon",
+                  "releases-repository-details-icon-archived",
+                )}
+                size={13}
+                color={
+                  repository.isArchived ? "var(--mantine-color-secondaryColor-text)" : "var(--mantine-color-dimmed)"
+                }
+              />
+            </Tooltip>
+
+            <Tooltip
+              className={combineClasses(
+                "releases-repository-details-icon-tooltip",
+                "releases-repository-details-icon-forked-tooltip",
+              )}
+              label={t("forked")}
+              withArrow
+              arrowSize={5}
             >
               <IconGitFork
                 className={combineClasses(
-                  "releases-repository-details-stats-icon",
-                  "releases-repository-details-stats-forks-icon",
+                  "releases-repository-details-icon",
+                  "releases-repository-details-icon-forked",
                 )}
-                size={12}
-                color={!repository.forksCount ? "var(--mantine-color-dimmed)" : "var(--mantine-color-text)"}
+                size={13}
+                color={repository.isFork ? "var(--mantine-color-secondaryColor-text)" : "var(--mantine-color-dimmed)"}
               />
-              <Text
-                className={combineClasses(
-                  "releases-repository-details-stats-text",
-                  "releases-repository-details-stats-forks-text",
-                )}
-                size="xs"
-                c={!repository.forksCount ? "dimmed" : ""}
-              >
-                {!repository.forksCount
-                  ? "-"
-                  : formatter.number(repository.forksCount, {
-                      notation: "compact",
-                      maximumFractionDigits: 1,
-                    })}
-              </Text>
-            </Group>
-          </Tooltip>
-
-          <Tooltip
-            className={combineClasses(
-              "releases-repository-details-stats-tooltip",
-              "releases-repository-details-stats-issues-tooltip",
-            )}
-            label={t("issuesCount")}
-            withArrow
-            arrowSize={5}
-          >
-            <Group
+            </Tooltip>
+          </Group>
+          <Group className="releases-repository-details-stats">
+            <Tooltip
               className={combineClasses(
-                "releases-repository-details-stats-wrapper",
-                "releases-repository-details-stats-issues-wrapper",
+                "releases-repository-details-stats-tooltip",
+                "releases-repository-details-stats-stars-tooltip",
               )}
-              gap={5}
+              label={t("starsCount")}
+              withArrow
+              arrowSize={5}
             >
-              <IconCircleDot
+              <Group
                 className={combineClasses(
-                  "releases-repository-details-stats-icon",
-                  "releases-repository-details-stats-issues-icon",
+                  "releases-repository-details-stats-wrapper",
+                  "releases-repository-details-stats-stars-wrapper",
                 )}
-                size={12}
-                color={!repository.openIssues ? "var(--mantine-color-dimmed)" : "var(--mantine-color-text)"}
-              />
-              <Text
-                className={combineClasses(
-                  "releases-repository-details-stats-text",
-                  "releases-repository-details-stats-issues-text",
-                )}
-                size="xs"
-                c={!repository.openIssues ? "dimmed" : ""}
+                gap={5}
               >
-                {!repository.openIssues
-                  ? "-"
-                  : formatter.number(repository.openIssues, {
-                      notation: "compact",
-                      maximumFractionDigits: 1,
-                    })}
-              </Text>
-            </Group>
-          </Tooltip>
+                <IconStar
+                  className={combineClasses(
+                    "releases-repository-details-stats-icon",
+                    "releases-repository-details-stats-stars-icon",
+                  )}
+                  size={12}
+                  color={!repository.starsCount ? "var(--mantine-color-dimmed)" : "var(--mantine-color-text)"}
+                />
+                <Text
+                  className={combineClasses(
+                    "releases-repository-details-stats-text",
+                    "releases-repository-details-stats-stars-text",
+                  )}
+                  size="xs"
+                  c={!repository.starsCount ? "dimmed" : ""}
+                >
+                  {!repository.starsCount
+                    ? "-"
+                    : formatter.number(repository.starsCount, {
+                        notation: "compact",
+                        maximumFractionDigits: 1,
+                      })}
+                </Text>
+              </Group>
+            </Tooltip>
+
+            <Tooltip
+              className={combineClasses(
+                "releases-repository-details-stats-tooltip",
+                "releases-repository-details-stats-forks-tooltip",
+              )}
+              label={t("forksCount")}
+              withArrow
+              arrowSize={5}
+            >
+              <Group
+                className={combineClasses(
+                  "releases-repository-details-stats-wrapper",
+                  "releases-repository-details-stats-forks-wrapper",
+                )}
+                gap={5}
+              >
+                <IconGitFork
+                  className={combineClasses(
+                    "releases-repository-details-stats-icon",
+                    "releases-repository-details-stats-forks-icon",
+                  )}
+                  size={12}
+                  color={!repository.forksCount ? "var(--mantine-color-dimmed)" : "var(--mantine-color-text)"}
+                />
+                <Text
+                  className={combineClasses(
+                    "releases-repository-details-stats-text",
+                    "releases-repository-details-stats-forks-text",
+                  )}
+                  size="xs"
+                  c={!repository.forksCount ? "dimmed" : ""}
+                >
+                  {!repository.forksCount
+                    ? "-"
+                    : formatter.number(repository.forksCount, {
+                        notation: "compact",
+                        maximumFractionDigits: 1,
+                      })}
+                </Text>
+              </Group>
+            </Tooltip>
+
+            <Tooltip
+              className={combineClasses(
+                "releases-repository-details-stats-tooltip",
+                "releases-repository-details-stats-issues-tooltip",
+              )}
+              label={t("issuesCount")}
+              withArrow
+              arrowSize={5}
+            >
+              <Group
+                className={combineClasses(
+                  "releases-repository-details-stats-wrapper",
+                  "releases-repository-details-stats-issues-wrapper",
+                )}
+                gap={5}
+              >
+                <IconCircleDot
+                  className={combineClasses(
+                    "releases-repository-details-stats-icon",
+                    "releases-repository-details-stats-issues-icon",
+                  )}
+                  size={12}
+                  color={!repository.openIssues ? "var(--mantine-color-dimmed)" : "var(--mantine-color-text)"}
+                />
+                <Text
+                  className={combineClasses(
+                    "releases-repository-details-stats-text",
+                    "releases-repository-details-stats-issues-text",
+                  )}
+                  size="xs"
+                  c={!repository.openIssues ? "dimmed" : ""}
+                >
+                  {!repository.openIssues
+                    ? "-"
+                    : formatter.number(repository.openIssues, {
+                        notation: "compact",
+                        maximumFractionDigits: 1,
+                      })}
+                </Text>
+              </Group>
+            </Tooltip>
+          </Group>
         </Group>
-      </Group>
+      </UnstyledButton>
     </>
   );
 };
@@ -531,6 +579,8 @@ const ExpandedDisplay = ({
   const t = useScopedI18n("widget.releases");
   const now = useNow();
   const formatter = useFormatter();
+  const releaseUrl = getSafeApplicationUrl(repository.releaseUrl);
+  const repositoryUrl = releaseUrl ?? getSafeApplicationUrl(repository.projectUrl);
 
   return (
     <>
@@ -600,19 +650,19 @@ const ExpandedDisplay = ({
           </Group>
         </Button>
 
-        {(repository.releaseUrl ?? repository.projectUrl) && (
+        {repositoryUrl && (
           <Button
             className="releases-repository-expanded-openButton"
             variant="light"
             component="a"
-            href={repository.releaseUrl ?? repository.projectUrl}
+            href={repositoryUrl}
             target="_blank"
-            rel="noreferrer"
+            rel={SAFE_NEW_TAB_REL}
           >
             <Group className="releases-repository-expanded-openButton-wrapper" gap={5} justify="center" align="center">
               <IconExternalLink className="releases-repository-expanded-openButton-icon" size="1.5em" />
               <Text className="releases-repository-expanded-openButton-text">
-                {repository.releaseUrl ? t("openReleasePage") : t("openProjectPage")}
+                {releaseUrl ? t("openReleasePage") : t("openProjectPage")}
               </Text>
             </Group>
           </Button>
@@ -631,8 +681,9 @@ const ExpandedDisplay = ({
               c="red"
               style={{ whiteSpace: "pre-wrap" }}
             >
-              {repository.error.message ??
-                (repository.error.code ? t(`error.messages.${repository.error.code}` as never) : null)}
+              {repository.error.code
+                ? t(`error.messages.${repository.error.code}` as never)
+                : t("error.messages.unexpected")}
             </Text>
           </>
         )}
diff --git a/packages/widgets/src/releases/index.ts b/packages/widgets/src/releases/index.ts
index 62fa7ebab..0507e8f42 100644
--- a/packages/widgets/src/releases/index.ts
+++ b/packages/widgets/src/releases/index.ts
@@ -4,7 +4,7 @@ import { z } from "zod/v4";
 import { createId } from "@homarr/common";
 import { releaseProviderKinds } from "@homarr/definitions";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 const relativeDateSchema = z
@@ -13,7 +13,10 @@ const relativeDateSchema = z
   .or(z.literal(""));
 
 export const { definition, componentLoader } = createWidgetDefinition("releases", {
+  supportsAdvancedFocus: false,
   icon: IconRocket,
+  queryKey: [["widget", "releases", "getLatest"]],
+  queryMatcher: ({ input }, scope) => widgetQueryInputMatches(input, { itemId: scope.itemId }),
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/rssFeed/component.module.scss b/packages/widgets/src/rssFeed/component.module.scss
index cd68be962..7d68fd7de 100644
--- a/packages/widgets/src/rssFeed/component.module.scss
+++ b/packages/widgets/src/rssFeed/component.module.scss
@@ -1,11 +1,26 @@
-.backgroundImage {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  filter: blur(5px);
-  transform: scaleX(-1.05) scaleZ(-1.05);
-  opacity: 0.25;
-  top: 0;
-  left: 0;
-  object-fit: cover;
+.entry {
+  min-width: 0;
+  color: inherit;
+  text-decoration: none;
+  transition: background-color 120ms ease;
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--mantine-color-default-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: -2px;
+  }
+}
+
+.poster {
+  flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .entry {
+    transition: none;
+  }
 }
diff --git a/packages/widgets/src/rssFeed/component.tsx b/packages/widgets/src/rssFeed/component.tsx
index 626f87328..5bcd3bfd3 100644
--- a/packages/widgets/src/rssFeed/component.tsx
+++ b/packages/widgets/src/rssFeed/component.tsx
@@ -1,86 +1,169 @@
 "use client";
 
-import { Card, Flex, Group, Image, ScrollArea, Stack, Text } from "@mantine/core";
-import { IconClock } from "@tabler/icons-react";
+import { Alert, Card, Flex, Group, Image, ScrollArea, SimpleGrid, Text } from "@mantine/core";
+import { IconAlertTriangle, IconClock, IconServerOff } from "@tabler/icons-react";
 import dayjs from "dayjs";
 
-import type { RouterInputs } from "@homarr/api";
+import type { RouterInputs, RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { BaseWidgetError } from "../errors/base-component";
 import classes from "./component.module.scss";
 
-const useLiveFeedEntries = (input: RouterInputs["widget"]["rssFeed"]["getFeeds"]) => {
-  const { data: feedEntries = [] } = clientApi.widget.rssFeed.getFeeds.useQuery(input);
+const useLiveFeed = (input: RouterInputs["widget"]["rssFeed"]["getFeeds"]) => {
+  const query = clientApi.widget.rssFeed.getFeeds.useQuery(input);
+  if (query.error && query.data === undefined) {
+    return { hasError: true as const, refetch: query.refetch };
+  }
 
-  return feedEntries;
+  // Persisted query caches can still contain the array response used before failed-feed metadata was added.
+  const normalizedData = query.data as typeof query.data | RouterOutputs["widget"]["rssFeed"]["getFeeds"]["entries"];
+  if (Array.isArray(normalizedData)) {
+    return {
+      hasError: false as const,
+      entries: normalizedData,
+      failedFeedCount: 0,
+      isStale: Boolean(query.error),
+    };
+  }
+
+  return {
+    hasError: false as const,
+    entries: normalizedData?.entries ?? [],
+    failedFeedCount: normalizedData?.failedFeedCount ?? 0,
+    isStale: Boolean(query.error),
+  };
 };
 
-export default function RssFeed({ options, width }: WidgetComponentProps<"rssFeed">) {
-  const feedEntries = useLiveFeedEntries({
+export default function RssFeed({ options, width, height }: WidgetComponentProps<"rssFeed">) {
+  const feed = useLiveFeed({
     urls: options.feedUrls,
     maximumAmountPosts: typeof options.maximumAmountPosts === "number" ? options.maximumAmountPosts : 100,
   });
 
   const board = useRequiredBoard();
+  const t = useScopedI18n("widget.rssFeed");
+  if (feed.hasError) {
+    return (
+      <BaseWidgetError
+        icon={IconServerOff}
+        message={t("error.allFeedsFailed")}
+        showLogsLink
+        onRetry={() => void feed.refetch()}
+      />
+    );
+  }
+
+  const warning = feed.isStale
+    ? t("warning.stale")
+    : feed.failedFeedCount > 0
+      ? t("warning.partial", { count: feed.failedFeedCount })
+      : undefined;
 
   const languageDir = options.enableRtl ? "RTL" : "LTR";
 
-  const isNarrow = width < 128 * 3;
+  const isDense = width < 420 || height < 180;
+  const isTiny = width < 260 || height < 110;
+  const isRoomy = width >= 420 && height >= 240;
+  const columns = width >= 720 && height >= 260 ? 2 : 1;
+  const descriptionLines = isRoomy ? Math.max(options.textLinesClamp, 6) : isDense ? 1 : options.textLinesClamp;
+  const spacing = isRoomy ? "sm" : "xs";
 
   return (
-    <ScrollArea className="scroll-area-w100" w="100%" p="sm">
-      <Stack w={"100%"} gap="sm">
-        {feedEntries.map((feedEntry) => (
-          <Card
-            key={feedEntry.id}
-            component={"a"}
-            href={feedEntry.link}
-            radius={board.itemRadius}
-            target="_blank"
-            w="100%"
-            p="sm"
-          >
-            {feedEntry.enclosure !== undefined && (
-              <Image className={classes.backgroundImage} src={feedEntry.enclosure} alt="backdrop" />
-            )}
-
-            <Group wrap="nowrap">
-              {feedEntry.enclosure !== undefined && options.showPosterImage && !isNarrow && (
-                <Image src={feedEntry.enclosure} alt={feedEntry.title} w={140} h={140} radius="sm" />
-              )}
-
-              <Flex gap="sm" direction="column" w="100%">
-                <Text dir={languageDir} fz="sm" lh="sm" lineClamp={2}>
-                  {feedEntry.title}
-                </Text>
-                {!options.hideDescription && feedEntry.description && (
-                  <Text
-                    className={feedEntry.description}
-                    dir={languageDir}
-                    c="dimmed"
-                    size="sm"
-                    lineClamp={options.textLinesClamp}
-                    dangerouslySetInnerHTML={{ __html: feedEntry.description }}
+    <ScrollArea className="scroll-area-w100" w="100%" h="100%" p={isTiny ? 4 : "xs"}>
+      {warning && (
+        <Alert role="presentation" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs" mb="xs">
+          <output>{warning}</output>
+        </Alert>
+      )}
+      <SimpleGrid cols={columns} w="100%" spacing={spacing} verticalSpacing={spacing}>
+        {feed.entries.map((feedEntry) => {
+          const href = getSafeApplicationUrl(feedEntry.link, { baseUrl: feedEntry.feedUrl });
+          return (
+            <Card
+              key={feedEntry.id}
+              className={classes.entry}
+              component={href ? "a" : "div"}
+              href={href}
+              radius={board.itemRadius}
+              target={href ? "_blank" : undefined}
+              rel={href ? SAFE_NEW_TAB_REL : undefined}
+              w="100%"
+              p={isDense ? 6 : "xs"}
+              title={feedEntry.title}
+            >
+              <Group wrap="nowrap" align="flex-start" gap={isDense ? "xs" : "md"}>
+                {feedEntry.enclosure !== undefined && options.showPosterImage && !isTiny && (
+                  <Image
+                    className={classes.poster}
+                    src={feedEntry.enclosure}
+                    alt=""
+                    w={isRoomy ? 140 : isDense ? 64 : 96}
+                    h={isRoomy ? 96 : isDense ? 64 : 96}
+                    radius="sm"
+                    fit="cover"
                   />
                 )}
 
-                {feedEntry.published && <InfoDisplay date={dayjs(feedEntry.published).fromNow()} />}
-              </Flex>
-            </Group>
-          </Card>
-        ))}
-      </Stack>
+                <Flex gap={isRoomy ? "sm" : 6} direction="column" w="100%" miw={0}>
+                  <Text dir={languageDir} fz={isRoomy ? "md" : "sm"} fw={600} lh={1.25} lineClamp={2}>
+                    {feedEntry.title}
+                  </Text>
+                  {!options.hideDescription && feedEntry.description && !isTiny && (
+                    <Text dir={languageDir} c="dimmed" size="sm" lineClamp={descriptionLines}>
+                      {feedDescriptionToText(feedEntry.description)}
+                    </Text>
+                  )}
+
+                  <InfoDisplay
+                    source={!isDense ? getHostname(feedEntry.feedUrl) : undefined}
+                    date={feedEntry.published ? dayjs(feedEntry.published).fromNow() : undefined}
+                  />
+                </Flex>
+              </Group>
+            </Card>
+          );
+        })}
+      </SimpleGrid>
     </ScrollArea>
   );
 }
 
-const InfoDisplay = ({ date }: { date: string }) => (
-  <Group gap={5} align={"center"}>
-    <IconClock size={"1rem"} color={"var(--mantine-color-dimmed)"} />
-    <Text size="sm" c="dimmed">
-      {date}
-    </Text>
+export const feedDescriptionToText = (description: string): string => {
+  if (typeof DOMParser !== "undefined") {
+    return new DOMParser().parseFromString(description, "text/html").body.textContent?.trim() ?? "";
+  }
+  return description
+    .replace(/<[^>]*>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+};
+
+export const getHostname = (url: string): string => {
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return url;
+  }
+};
+
+const InfoDisplay = ({ date, source }: { date?: string; source?: string }) => (
+  <Group gap={5} align="center" wrap="nowrap">
+    {date && <IconClock size="1rem" color="var(--mantine-color-dimmed)" />}
+    {date && (
+      <Text size="xs" c="dimmed">
+        {date}
+      </Text>
+    )}
+    {date && source && <Text c="dimmed">•</Text>}
+    {source && (
+      <Text size="xs" c="dimmed" truncate="end">
+        {source}
+      </Text>
+    )}
   </Group>
 );
diff --git a/packages/widgets/src/rssFeed/feed-display.spec.ts b/packages/widgets/src/rssFeed/feed-display.spec.ts
new file mode 100644
index 000000000..d18a7c9e0
--- /dev/null
+++ b/packages/widgets/src/rssFeed/feed-display.spec.ts
@@ -0,0 +1,16 @@
+import { describe, expect, test } from "vitest";
+
+import { feedDescriptionToText, getHostname } from "./component";
+
+describe("RSS feed display helpers", () => {
+  test("renders feed markup as inert text", () => {
+    expect(feedDescriptionToText('<p>Hello <strong>world</strong><img src=x onerror="alert(1)"></p>')).toBe(
+      "Hello world",
+    );
+  });
+
+  test("handles malformed feed URLs without crashing the widget", () => {
+    expect(getHostname("not a URL")).toBe("not a URL");
+    expect(getHostname("https://example.com/feed.xml")).toBe("example.com");
+  });
+});
diff --git a/packages/widgets/src/rssFeed/index.ts b/packages/widgets/src/rssFeed/index.ts
index eee7028cb..683dd07ef 100644
--- a/packages/widgets/src/rssFeed/index.ts
+++ b/packages/widgets/src/rssFeed/index.ts
@@ -1,7 +1,7 @@
-import { IconRss } from "@tabler/icons-react";
+import { IconRss, IconServerOff } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 /**
@@ -11,8 +11,21 @@ import { optionsBuilder } from "../options";
  * - https://www.jsonfeed.org/version/1.1/
  */
 export const { definition, componentLoader } = createWidgetDefinition("rssFeed", {
+  supportsAdvancedFocus: false,
   icon: IconRss,
+  queryKey: [["widget", "rssFeed", "getFeeds"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      urls: scope.options.feedUrls,
+      maximumAmountPosts: scope.options.maximumAmountPosts,
+    }),
   refetchInterval: null,
+  errors: {
+    BAD_GATEWAY: {
+      icon: IconServerOff,
+      message: (t) => t("widget.rssFeed.error.allFeedsFailed"),
+    },
+  },
   createOptions() {
     return optionsBuilder.from((factory) => ({
       feedUrls: factory.multiText({
diff --git a/packages/widgets/src/runtime-hooks.ts b/packages/widgets/src/runtime-hooks.ts
new file mode 100644
index 000000000..684c33db1
--- /dev/null
+++ b/packages/widgets/src/runtime-hooks.ts
@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect } from "react";
+
+import type { QueryKey } from "@tanstack/react-query";
+
+import type { WidgetRuntimeActions, WidgetRuntimeRef } from "./definition";
+import { normalizeWidgetQuery } from "./definition";
+
+export const useWidgetRuntimeQueries = (
+  widgetRuntimeRef: WidgetRuntimeRef | undefined,
+  queryKeys: readonly QueryKey[],
+) => {
+  useEffect(() => {
+    if (!widgetRuntimeRef) return;
+    const runtime = widgetRuntimeRef.current;
+    const queries = queryKeys.flatMap((queryKey) => {
+      const query = normalizeWidgetQuery(queryKey);
+      return query ? [query] : [];
+    });
+    runtime.queries = queries;
+    return () => {
+      if (runtime.queries === queries) runtime.queries = [];
+    };
+  }, [queryKeys, widgetRuntimeRef]);
+};
+
+export const useWidgetRuntimeActions = (
+  widgetRuntimeRef: WidgetRuntimeRef | undefined,
+  actions: WidgetRuntimeActions,
+) => {
+  useEffect(() => {
+    if (!widgetRuntimeRef) return;
+    const runtime = widgetRuntimeRef.current;
+    runtime.actions = actions;
+    return () => {
+      if (runtime.actions === actions) runtime.actions = {};
+    };
+  }, [actions, widgetRuntimeRef]);
+};
diff --git a/packages/widgets/src/smart-home/entity-state/component.tsx b/packages/widgets/src/smart-home/entity-state/component.tsx
index f1d6b6e18..f5d6a2ed9 100644
--- a/packages/widgets/src/smart-home/entity-state/component.tsx
+++ b/packages/widgets/src/smart-home/entity-state/component.tsx
@@ -1,20 +1,30 @@
 "use client";
 
 import { useCallback } from "react";
-import { Center, Stack, Text, UnstyledButton } from "@mantine/core";
+import { Badge, Center, Group, Stack, Text, UnstyledButton } from "@mantine/core";
 import { IconBinaryTree } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
+import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
+import { showErrorNotification } from "@homarr/notifications";
 import { useRegisterSpotlightContextActions } from "@homarr/spotlight";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
+import { isSmartHomeTiny } from "../layout";
+import { getEntityStateLabel } from "./state";
 
 export default function SmartHomeEntityStateWidget({
   options,
   integrationIds,
   isEditMode,
   width,
+  height,
+  displayMode,
 }: WidgetComponentProps<"smartHome-entityState">) {
+  const t = useScopedI18n("widget.smartHome-entityState");
+  const tCommon = useScopedI18n("common");
+  const locale = useCurrentIntlLocale();
   // It will always have at least one integration as otherwise the NoIntegrationSelectedError would be thrown in item-content.tsx
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const integrationId = integrationIds[0]!;
@@ -23,21 +33,38 @@ export default function SmartHomeEntityStateWidget({
     entityId: options.entityId,
     integrationId,
   };
-  const { data: entityState } = clientApi.widget.smartHome.entityState.useQuery(input);
+  const {
+    data: entity,
+    isPending: isEntityPending,
+    error: entityError,
+  } = clientApi.widget.smartHome.entityDetails.useQuery(input);
+  const canInteract = useIntegrationsWithInteractAccess().some(({ id }) => id === integrationId);
 
   const utils = clientApi.useUtils();
-  const { mutate } = clientApi.widget.smartHome.switchEntity.useMutation({
-    onSettled: () => void utils.widget.smartHome.entityState.invalidate(input),
+  const { mutate, isPending } = clientApi.widget.smartHome.switchEntity.useMutation({
+    onSettled: () => void utils.widget.smartHome.entityDetails.invalidate(input),
+    onError: () =>
+      showErrorNotification({
+        title: tCommon("error"),
+        message: t("error.toggleFailed"),
+      }),
   });
 
-  const attribute = options.entityUnit.length > 0 ? " " + options.entityUnit : "";
+  const apiUnit = entity?.attributes.unit_of_measurement;
+  const unit = options.entityUnit || (typeof apiUnit === "string" ? apiUnit : "");
+  const attribute = unit.length > 0 ? ` ${unit}` : "";
+  const isActionable =
+    !isEditMode &&
+    options.clickable &&
+    canInteract &&
+    entity !== undefined &&
+    !entityError &&
+    !isEntityPending &&
+    !isPending;
+  const queryErrorLabel = entityError ? t("error.loadFailed") : undefined;
 
   const handleClick = useCallback(() => {
-    if (isEditMode) {
-      return;
-    }
-
-    if (!options.clickable) {
+    if (!isActionable) {
       return;
     }
 
@@ -45,7 +72,7 @@ export default function SmartHomeEntityStateWidget({
       entityId: options.entityId,
       integrationId,
     });
-  }, [integrationId, isEditMode, mutate, options.clickable, options.entityId]);
+  }, [integrationId, isActionable, mutate, options.entityId]);
 
   useRegisterSpotlightContextActions(
     `smartHome-entityState-${options.entityId}`,
@@ -62,35 +89,81 @@ export default function SmartHomeEntityStateWidget({
             },
           };
         },
-        disabled: !options.clickable,
+        disabled: !isActionable,
       },
     ],
-    [handleClick, options.clickable, options.displayName, options.entityId],
+    [handleClick, isActionable, options.displayName, options.entityId],
   );
-  const isTiny = width < 128;
+
+  if (entityError && entity === undefined) throw entityError;
+
+  const isTiny = isSmartHomeTiny(width, height);
+  const advancedAttributes = [
+    { key: "unit" as const, value: entity?.attributes.unit_of_measurement },
+    { key: "deviceClass" as const, value: entity?.attributes.device_class },
+    { key: "icon" as const, value: entity?.attributes.icon },
+  ].filter(({ value }) => typeof value === "string" && value.length > 0);
+  const displayName =
+    displayMode === "advanced" && typeof entity?.attributes.friendly_name === "string"
+      ? entity.attributes.friendly_name
+      : options.displayName;
+  const knownStates = {
+    on: t("state.on"),
+    off: t("state.off"),
+    unavailable: t("state.unavailable"),
+    unknown: t("state.unknown"),
+  };
+  const state = getEntityStateLabel(entity?.state, knownStates);
 
   return (
     <UnstyledButton
-      mod={{ "entity-state": entityState, "entity-id": options.entityId }}
+      mod={{ "entity-state": entity?.state, "entity-id": options.entityId }}
       onClick={handleClick}
+      disabled={!isActionable}
+      aria-label={`${displayName}: ${state}${attribute}`}
+      aria-description={queryErrorLabel}
       w="100%"
       h="100%"
       styles={{
         root: {
-          cursor: options.clickable && !isEditMode ? "pointer" : "initial",
+          cursor: isActionable ? "pointer" : "initial",
           pointerEvents: isEditMode ? "none" : undefined,
         },
       }}
     >
       <Center h="100%" w="100%">
-        <Stack align="center" gap="md">
-          <Text ta="center" fw="bold" size={isTiny ? "sm" : "lg"}>
-            {options.displayName}
-          </Text>
-          <Text ta="center" size={isTiny ? "xs" : "lg"}>
-            {entityState}
+        <Stack align="center" gap={isTiny ? 4 : "md"} p="xs" maw="100%">
+          <Text ta="center" fw={700} size={isTiny ? "lg" : "2xl"} lh={1.1} lineClamp={1} maw="100%">
+            {state}
             {attribute}
           </Text>
+          <Text ta="center" c="dimmed" fw={500} size={isTiny ? "xs" : "sm"} lineClamp={2} maw="100%">
+            {displayName}
+          </Text>
+          {queryErrorLabel && (
+            <Text size="xs" c="orange" ta="center" lineClamp={1} maw="100%" aria-live="polite">
+              {queryErrorLabel}
+            </Text>
+          )}
+          {displayMode === "advanced" && entity && (
+            <>
+              <Group justify="center" gap={4}>
+                {advancedAttributes.map(({ key, value }) => (
+                  <Badge key={key} size="xs" variant="light" tt="none">
+                    {t(`advanced.attribute.${key}`)}: {String(value)}
+                  </Badge>
+                ))}
+              </Group>
+              <Text size="xs" c="dimmed">
+                {t("advanced.entityId", { id: entity.entity_id })}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {t("advanced.lastUpdated", {
+                  date: new Date(entity.last_updated).toLocaleString(locale),
+                })}
+              </Text>
+            </>
+          )}
         </Stack>
       </Center>
     </UnstyledButton>
diff --git a/packages/widgets/src/smart-home/entity-state/index.ts b/packages/widgets/src/smart-home/entity-state/index.ts
index a4dd32921..93a12a872 100644
--- a/packages/widgets/src/smart-home/entity-state/index.ts
+++ b/packages/widgets/src/smart-home/entity-state/index.ts
@@ -1,4 +1,4 @@
-import { IconBinaryTree } from "@tabler/icons-react";
+import { IconBinaryTree, IconServerOff } from "@tabler/icons-react";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
@@ -7,6 +7,8 @@ import { optionsBuilder } from "../../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("smartHome-entityState", {
   icon: IconBinaryTree,
+  queryKey: [["widget", "smartHome"]],
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       entityId: factory.text({
@@ -20,4 +22,10 @@ export const { definition, componentLoader } = createWidgetDefinition("smartHome
     }));
   },
   supportedIntegrations: getIntegrationKindsByCategory("smartHomeServer"),
+  errors: {
+    INTERNAL_SERVER_ERROR: {
+      icon: IconServerOff,
+      message: (t) => t("widget.smartHome-entityState.error.loadFailed"),
+    },
+  },
 }).withDynamicImport(() => import("./component"));
diff --git a/packages/widgets/src/smart-home/entity-state/state.spec.ts b/packages/widgets/src/smart-home/entity-state/state.spec.ts
new file mode 100644
index 000000000..072b5dde4
--- /dev/null
+++ b/packages/widgets/src/smart-home/entity-state/state.spec.ts
@@ -0,0 +1,16 @@
+import { describe, expect, test } from "vitest";
+
+import { getEntityStateLabel } from "./state";
+
+const labels = { on: "On", off: "Off", unavailable: "Unavailable", unknown: "Unknown" };
+
+describe("getEntityStateLabel", () => {
+  test("localizes known states and preserves custom states", () => {
+    expect(getEntityStateLabel("on", labels)).toBe("On");
+    expect(getEntityStateLabel("heating", labels)).toBe("heating");
+  });
+
+  test.each(["__proto__", "constructor", "toString"])("preserves prototype-like state %s", (state) => {
+    expect(getEntityStateLabel(state, labels)).toBe(state);
+  });
+});
diff --git a/packages/widgets/src/smart-home/entity-state/state.ts b/packages/widgets/src/smart-home/entity-state/state.ts
new file mode 100644
index 000000000..6100221d1
--- /dev/null
+++ b/packages/widgets/src/smart-home/entity-state/state.ts
@@ -0,0 +1,11 @@
+export interface LocalizedEntityStates {
+  on: string;
+  off: string;
+  unavailable: string;
+  unknown: string;
+}
+
+export const getEntityStateLabel = (state: string | undefined, labels: LocalizedEntityStates) => {
+  if (!state) return "—";
+  return Object.hasOwn(labels, state) ? labels[state as keyof LocalizedEntityStates] : state;
+};
diff --git a/packages/widgets/src/smart-home/execute-automation/component.tsx b/packages/widgets/src/smart-home/execute-automation/component.tsx
index f61ea1cfc..40e5a3487 100644
--- a/packages/widgets/src/smart-home/execute-automation/component.tsx
+++ b/packages/widgets/src/smart-home/execute-automation/component.tsx
@@ -1,44 +1,67 @@
 "use client";
 
 import React from "react";
-import { Center, LoadingOverlay, Overlay, Stack, Text, ThemeIcon, UnstyledButton } from "@mantine/core";
+import {
+  Box,
+  Center,
+  LoadingOverlay,
+  Overlay,
+  Stack,
+  Text,
+  ThemeIcon,
+  UnstyledButton,
+  VisuallyHidden,
+} from "@mantine/core";
 import { useDisclosure, useTimeout } from "@mantine/hooks";
 import { IconAutomation, IconCheck } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
+import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
 import { useRegisterSpotlightContextActions } from "@homarr/spotlight";
-import { useI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
+import { isSmartHomeTiny } from "../layout";
 
 export default function SmartHomeTriggerAutomationWidget({
   options,
   integrationIds,
   isEditMode,
   width,
+  height,
+  displayMode,
 }: WidgetComponentProps<"smartHome-executeAutomation">) {
+  const integrationId = integrationIds[0];
+  const canInteract = useIntegrationsWithInteractAccess().some(({ id }) => id === integrationId);
+  const [lastExecutedAt, setLastExecutedAt] = React.useState<Date | null>(null);
   const [isShowSuccess, { open: showSuccess, close: closeSuccess }] = useDisclosure();
   const { start } = useTimeout(() => {
     closeSuccess();
   }, 1000);
 
-  const { mutateAsync, isPending } = clientApi.widget.smartHome.executeAutomation.useMutation({
+  const { mutateAsync, isPending, error } = clientApi.widget.smartHome.executeAutomation.useMutation({
     onSuccess: () => {
+      setLastExecutedAt(new Date());
       showSuccess();
       start();
     },
   });
   const handleClick = React.useCallback(async () => {
-    if (isEditMode) {
+    if (isEditMode || isPending || !integrationId || !canInteract) {
       return;
     }
-    await mutateAsync({
-      automationId: options.automationId,
-      integrationId: integrationIds[0] ?? "",
-    });
-  }, [integrationIds, isEditMode, mutateAsync, options.automationId]);
+    try {
+      await mutateAsync({
+        automationId: options.automationId,
+        integrationId,
+      });
+    } catch {
+      // The mutation exposes the error below and remains retryable.
+    }
+  }, [canInteract, integrationId, isEditMode, isPending, mutateAsync, options.automationId]);
 
   const t = useI18n();
+  const locale = useCurrentIntlLocale();
   useRegisterSpotlightContextActions(
     `smartHome-automation-${options.automationId}`,
     [
@@ -55,38 +78,87 @@ export default function SmartHomeTriggerAutomationWidget({
             },
           };
         },
+        disabled: !integrationId || !canInteract || isPending,
       },
     ],
-    [handleClick, options.automationId, options.displayName],
+    [canInteract, handleClick, integrationId, isPending, options.automationId, options.displayName],
   );
 
-  const isTiny = width < 128;
+  const isTiny = isSmartHomeTiny(width, height);
 
   return (
-    <UnstyledButton
-      onClick={handleClick}
-      style={{ cursor: !isEditMode ? "pointer" : "initial", pointerEvents: isEditMode ? "none" : undefined }}
-      w="100%"
-      h="100%"
-    >
-      {isShowSuccess && (
-        <Overlay>
-          <Center w="100%" h="100%">
-            <ThemeIcon variant="filled" color="green" size="xl" radius="xl">
-              <IconCheck style={{ width: "70%", height: "70%" }} stroke={1.5} />
-            </ThemeIcon>
-          </Center>
-        </Overlay>
+    <Box pos="relative" w="100%" h="100%">
+      <VisuallyHidden component="output">
+        {isPending
+          ? t("widget.smartHome-executeAutomation.status.running")
+          : isShowSuccess
+            ? t("widget.smartHome-executeAutomation.status.success")
+            : ""}
+      </VisuallyHidden>
+      {error && (
+        <VisuallyHidden role="alert">{t("widget.smartHome-executeAutomation.error.executeFailed")}</VisuallyHidden>
       )}
-      <LoadingOverlay visible={isPending} />
-      <Center w="100%" h="100%">
-        <Stack align="center" gap="md">
-          <IconAutomation size={isTiny ? 16 : undefined} />
-          <Text ta="center" fw="bold" fz={isTiny ? "xs" : undefined}>
-            {options.displayName}
-          </Text>
-        </Stack>
-      </Center>
-    </UnstyledButton>
+      <UnstyledButton
+        onClick={handleClick}
+        disabled={!integrationId || !canInteract || isPending}
+        aria-label={t("widget.smartHome-executeAutomation.spotlightAction.run", { name: options.displayName })}
+        style={{
+          cursor: !isEditMode && integrationId && canInteract ? "pointer" : "initial",
+          pointerEvents: isEditMode ? "none" : undefined,
+        }}
+        aria-description={error ? t("widget.smartHome-executeAutomation.error.executeFailed") : undefined}
+        w="100%"
+        h="100%"
+      >
+        {isShowSuccess && (
+          <Overlay>
+            <Center w="100%" h="100%">
+              <ThemeIcon variant="filled" color="green" size="xl" radius="xl">
+                <IconCheck style={{ width: "70%", height: "70%" }} stroke={1.5} />
+              </ThemeIcon>
+            </Center>
+          </Overlay>
+        )}
+        <LoadingOverlay visible={isPending} />
+        {error && displayMode !== "advanced" && (
+          <Overlay>
+            <Center w="100%" h="100%" p="xs">
+              <Text size="xs" c="red" ta="center" lineClamp={3}>
+                {t("widget.smartHome-executeAutomation.error.executeFailed")}
+              </Text>
+            </Center>
+          </Overlay>
+        )}
+        <Center w="100%" h="100%">
+          <Stack align="center" gap={isTiny ? 6 : "md"} p="xs" maw="100%">
+            <ThemeIcon variant="light" size={isTiny ? "md" : "xl"} radius="xl">
+              <IconAutomation size={isTiny ? 14 : 24} />
+            </ThemeIcon>
+            <Text ta="center" fw={600} fz={isTiny ? "xs" : "sm"} lineClamp={2} maw="100%">
+              {options.displayName}
+            </Text>
+            {displayMode === "advanced" && (
+              <>
+                {error ? (
+                  <Text ta="center" size="xs" c="red">
+                    {t("widget.smartHome-executeAutomation.error.executeFailed")}
+                  </Text>
+                ) : (
+                  <Text ta="center" size="xs" c="dimmed">
+                    {lastExecutedAt
+                      ? t("widget.smartHome-executeAutomation.advanced.lastExecuted", {
+                          time: lastExecutedAt.toLocaleTimeString(locale),
+                        })
+                      : t("widget.smartHome-executeAutomation.advanced.automationId", {
+                          id: options.automationId,
+                        })}
+                  </Text>
+                )}
+              </>
+            )}
+          </Stack>
+        </Center>
+      </UnstyledButton>
+    </Box>
   );
 }
diff --git a/packages/widgets/src/smart-home/execute-automation/index.ts b/packages/widgets/src/smart-home/execute-automation/index.ts
index ea957fab9..e4435f892 100644
--- a/packages/widgets/src/smart-home/execute-automation/index.ts
+++ b/packages/widgets/src/smart-home/execute-automation/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("smartHome-executeAutomation", {
   icon: IconBinaryTree,
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       displayName: factory.text(),
diff --git a/packages/widgets/src/smart-home/layout.spec.ts b/packages/widgets/src/smart-home/layout.spec.ts
new file mode 100644
index 000000000..e9643d677
--- /dev/null
+++ b/packages/widgets/src/smart-home/layout.spec.ts
@@ -0,0 +1,14 @@
+import { describe, expect, test } from "vitest";
+
+import { isSmartHomeTiny } from "./layout";
+
+describe("smart home layout", () => {
+  test.each([
+    { width: 127, height: 96, expected: true },
+    { width: 128, height: 95, expected: true },
+    { width: 128, height: 96, expected: false },
+    { width: 256, height: 192, expected: false },
+  ])("classifies $width x $height", ({ width, height, expected }) => {
+    expect(isSmartHomeTiny(width, height)).toBe(expected);
+  });
+});
diff --git a/packages/widgets/src/smart-home/layout.ts b/packages/widgets/src/smart-home/layout.ts
new file mode 100644
index 000000000..488330549
--- /dev/null
+++ b/packages/widgets/src/smart-home/layout.ts
@@ -0,0 +1 @@
+export const isSmartHomeTiny = (width: number, height: number) => width < 128 || height < 96;
diff --git a/packages/widgets/src/speedtest-tracker/averages.tsx b/packages/widgets/src/speedtest-tracker/averages.tsx
index 41b116d56..ea4404c4d 100644
--- a/packages/widgets/src/speedtest-tracker/averages.tsx
+++ b/packages/widgets/src/speedtest-tracker/averages.tsx
@@ -10,7 +10,7 @@ import { formatStatsSpeed } from "./helpers";
 import { SectionLabel } from "./section-label";
 import { SpeedStatCard } from "./speed-stat-card";
 
-export function AveragesSection({ stats }: { stats: SpeedtestTrackerStats }) {
+export function AveragesSection({ stats, width = 500 }: { stats: SpeedtestTrackerStats; width?: number }) {
   const t = useScopedI18n("widget.speedtestTracker");
 
   return (
@@ -18,7 +18,7 @@ export function AveragesSection({ stats }: { stats: SpeedtestTrackerStats }) {
       <SectionLabel>
         {t("averages")} · {t("tests", { count: stats.total_results.toString() })}
       </SectionLabel>
-      <SimpleGrid cols={3} spacing="xs" style={{ flex: 1, gridTemplateRows: "1fr" }}>
+      <SimpleGrid cols={width < 220 ? 1 : 3} spacing="xs" style={{ flex: 1, gridTemplateRows: "1fr" }}>
         <SpeedStatCard
           icon={IconArrowDown}
           color="blue"
diff --git a/packages/widgets/src/speedtest-tracker/component.tsx b/packages/widgets/src/speedtest-tracker/component.tsx
index 4b2b83dbb..f1b096e4a 100644
--- a/packages/widgets/src/speedtest-tracker/component.tsx
+++ b/packages/widgets/src/speedtest-tracker/component.tsx
@@ -1,61 +1,104 @@
 "use client";
 
-import { useMemo } from "react";
-import { Stack, Text } from "@mantine/core";
+import { useMemo, useState } from "react";
+import { SegmentedControl, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import type { SpeedtestTrackerDashboardData } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { WidgetEmptyState } from "../common/empty-state";
 import { AveragesSection } from "./averages";
-import { mergeStats } from "./helpers";
+import { combineSpeedtestDashboards, getCompactSections } from "./helpers";
 import { LatestResultSection } from "./latest-result";
 import { RecentResultsSection } from "./recent-results";
 
-export default function SpeedtestTrackerWidget({ options, integrationIds }: WidgetComponentProps<"speedtestTracker">) {
+export default function SpeedtestTrackerWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+  displayMode = "compact",
+}: WidgetComponentProps<"speedtestTracker">) {
   const t = useScopedI18n("widget.speedtestTracker");
-  const { data: dashboardData = [] } = clientApi.widget.speedtestTracker.getDashboard.useQuery({ integrationIds });
+  const dashboardData =
+    getUsableWidgetQueryData(clientApi.widget.speedtestTracker.getDashboard.useQuery({ integrationIds })) ?? [];
+  const [advancedRange, setAdvancedRange] = useState("24");
 
   const combined = useMemo(
-    () =>
-      dashboardData.reduce<SpeedtestTrackerDashboardData>(
-        (acc, item) => ({
-          latestResult: item.dashboard.latestResult ?? acc.latestResult,
-          stats: mergeStats(acc.stats, item.dashboard.stats),
-          recentResults: [...acc.recentResults, ...item.dashboard.recentResults],
-        }),
-        { latestResult: null, stats: null, recentResults: [] },
-      ),
+    () => combineSpeedtestDashboards(dashboardData.map((item) => item.dashboard)),
     [dashboardData],
   );
 
-  const twelveHoursAgo = Date.now() - 12 * 60 * 60 * 1000;
-  const recentFiltered = combined.recentResults.filter((result) => result.created_at.getTime() > twelveHoursAgo);
+  const rangeHours = displayMode === "advanced" ? Number(advancedRange) : 12;
+  const cutoff = rangeHours > 0 ? Date.now() - rangeHours * 60 * 60 * 1000 : 0;
+  const recentFiltered = combined.recentResults.filter((result) => result.created_at.getTime() > cutoff);
 
   const hasStatSection =
     (options.showLatestResult && combined.latestResult !== null) || (options.showStats && combined.stats !== null);
   const hasChart = options.showRecentResults && recentFiltered.length > 0;
   const noSectionsEnabled = !options.showLatestResult && !options.showStats && !options.showRecentResults;
+  const advancedSectionWidth = width >= 720 ? width / 2 : width;
+
+  const latest = options.showLatestResult && combined.latestResult && (
+    <LatestResultSection
+      result={combined.latestResult}
+      width={displayMode === "advanced" ? advancedSectionWidth : width}
+    />
+  );
+  const averages = options.showStats && combined.stats && (
+    <AveragesSection stats={combined.stats} width={displayMode === "advanced" ? advancedSectionWidth : width} />
+  );
+  const compactSections = getCompactSections(height, {
+    latest: Boolean(latest),
+    chart: hasChart,
+    averages: Boolean(averages),
+  });
+
+  if (displayMode === "advanced") {
+    return (
+      <Stack h="100%" gap="md" p="md" style={{ overflow: "hidden" }}>
+        <SegmentedControl
+          size="xs"
+          value={advancedRange}
+          onChange={setAdvancedRange}
+          data={[
+            { value: "12", label: t("range.twelveHours") },
+            { value: "24", label: t("range.oneDay") },
+            { value: "0", label: t("range.all") },
+          ]}
+        />
+        {hasStatSection && (
+          <SimpleGrid cols={width >= 720 ? 2 : 1} spacing="md">
+            {latest}
+            {averages}
+          </SimpleGrid>
+        )}
+        {hasChart && (
+          <div style={{ flex: 1, minHeight: Math.max(220, height / 2) }}>
+            <RecentResultsSection results={recentFiltered} showPingGraph={options.showPingGraph} />
+          </div>
+        )}
+        {noSectionsEnabled && (
+          <Text c="dimmed" ta="center" size="sm">
+            {t("noSectionsEnabled")}
+          </Text>
+        )}
+        {!noSectionsEnabled && !hasStatSection && !hasChart && <WidgetEmptyState />}
+      </Stack>
+    );
+  }
 
   return (
     <Stack h="100%" gap="sm" p="xs" style={{ overflow: "hidden" }}>
-      {hasStatSection && (
+      {(compactSections.latest || compactSections.averages) && (
         <Stack gap="sm" style={{ flex: 1, minHeight: 0 }}>
-          {options.showLatestResult && combined.latestResult && (
-            <div style={{ flex: 1, minHeight: 0 }}>
-              <LatestResultSection result={combined.latestResult} />
-            </div>
-          )}
-          {options.showStats && combined.stats && (
-            <div style={{ flex: 1, minHeight: 0 }}>
-              <AveragesSection stats={combined.stats} />
-            </div>
-          )}
+          {compactSections.latest && <div style={{ flex: 1, minHeight: 0 }}>{latest}</div>}
+          {compactSections.averages && <div style={{ flex: 1, minHeight: 0 }}>{averages}</div>}
         </Stack>
       )}
-      {hasChart && (
+      {compactSections.chart && (
         <div style={{ flex: 2, minHeight: 0 }}>
           <RecentResultsSection results={recentFiltered} showPingGraph={options.showPingGraph} />
         </div>
diff --git a/packages/widgets/src/speedtest-tracker/helpers.spec.ts b/packages/widgets/src/speedtest-tracker/helpers.spec.ts
new file mode 100644
index 000000000..1e02bf183
--- /dev/null
+++ b/packages/widgets/src/speedtest-tracker/helpers.spec.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+
+import type { SpeedtestTrackerDashboardData, SpeedtestTrackerStats } from "@homarr/integrations/types";
+
+import { combineSpeedtestDashboards, getCompactSections, mergeStats } from "./helpers";
+
+const stats = (average: number, totalResults: number): SpeedtestTrackerStats => ({
+  ping: { avg: average, min: average, max: average },
+  download: { avg: average, avg_bits: average, min: average, max: average },
+  upload: { avg: average, avg_bits: average, min: average, max: average },
+  total_results: totalResults,
+});
+
+describe("speedtest dashboard aggregation", () => {
+  it("weights averages by result count", () => {
+    expect(mergeStats(stats(10, 1), stats(20, 3))?.ping.avg).toBe(17.5);
+  });
+
+  it("selects the newest latest result independent of integration order", () => {
+    const older = { id: 1, ping: 1, download_bits: 1, upload_bits: 1, healthy: true, created_at: new Date(1) };
+    const newer = { ...older, id: 2, created_at: new Date(2) };
+    const dashboards: SpeedtestTrackerDashboardData[] = [
+      { latestResult: newer, stats: null, recentResults: [] },
+      { latestResult: older, stats: null, recentResults: [] },
+    ];
+    expect(combineSpeedtestDashboards(dashboards).latestResult?.id).toBe(2);
+  });
+});
+
+describe("getCompactSections", () => {
+  const available = { latest: true, chart: true, averages: true };
+
+  it("prioritizes the latest result in a short widget", () => {
+    expect(getCompactSections(180, available)).toEqual({ latest: true, chart: false, averages: false });
+  });
+
+  it("reveals history before averages as height grows", () => {
+    expect(getCompactSections(300, available)).toEqual({ latest: true, chart: true, averages: false });
+    expect(getCompactSections(400, available)).toEqual({ latest: true, chart: true, averages: true });
+  });
+});
diff --git a/packages/widgets/src/speedtest-tracker/helpers.ts b/packages/widgets/src/speedtest-tracker/helpers.ts
index 075fdb90c..b590d0214 100644
--- a/packages/widgets/src/speedtest-tracker/helpers.ts
+++ b/packages/widgets/src/speedtest-tracker/helpers.ts
@@ -11,34 +11,58 @@ export const mergeStats = (
 ): SpeedtestTrackerDashboardData["stats"] => {
   if (!statsB) return statsA;
   if (!statsA) return statsB;
+  const totalResults = statsA.total_results + statsB.total_results;
+  const weightedAverage = (left: number, right: number) =>
+    totalResults > 0 ? (left * statsA.total_results + right * statsB.total_results) / totalResults : (left + right) / 2;
   return {
     ping: {
-      avg: (statsA.ping.avg + statsB.ping.avg) / 2,
+      avg: weightedAverage(statsA.ping.avg, statsB.ping.avg),
       min: Math.min(statsA.ping.min, statsB.ping.min),
       max: Math.max(statsA.ping.max, statsB.ping.max),
     },
     download: {
-      avg: (statsA.download.avg + statsB.download.avg) / 2,
+      avg: weightedAverage(statsA.download.avg, statsB.download.avg),
       avg_bits:
         statsA.download.avg_bits !== undefined && statsB.download.avg_bits !== undefined
-          ? (statsA.download.avg_bits + statsB.download.avg_bits) / 2
+          ? weightedAverage(statsA.download.avg_bits, statsB.download.avg_bits)
           : (statsA.download.avg_bits ?? statsB.download.avg_bits),
       min: Math.min(statsA.download.min, statsB.download.min),
       max: Math.max(statsA.download.max, statsB.download.max),
     },
     upload: {
-      avg: (statsA.upload.avg + statsB.upload.avg) / 2,
+      avg: weightedAverage(statsA.upload.avg, statsB.upload.avg),
       avg_bits:
         statsA.upload.avg_bits !== undefined && statsB.upload.avg_bits !== undefined
-          ? (statsA.upload.avg_bits + statsB.upload.avg_bits) / 2
+          ? weightedAverage(statsA.upload.avg_bits, statsB.upload.avg_bits)
           : (statsA.upload.avg_bits ?? statsB.upload.avg_bits),
       min: Math.min(statsA.upload.min, statsB.upload.min),
       max: Math.max(statsA.upload.max, statsB.upload.max),
     },
-    total_results: statsA.total_results + statsB.total_results,
+    total_results: totalResults,
   };
 };
 
+export const selectLatestResult = (
+  current: SpeedtestTrackerResult | null,
+  candidate: SpeedtestTrackerResult | null,
+): SpeedtestTrackerResult | null => {
+  if (!candidate) return current;
+  if (!current) return candidate;
+  return candidate.created_at.getTime() > current.created_at.getTime() ? candidate : current;
+};
+
+export const combineSpeedtestDashboards = (
+  dashboards: SpeedtestTrackerDashboardData[],
+): SpeedtestTrackerDashboardData =>
+  dashboards.reduce<SpeedtestTrackerDashboardData>(
+    (combined, dashboard) => ({
+      latestResult: selectLatestResult(combined.latestResult, dashboard.latestResult),
+      stats: mergeStats(combined.stats, dashboard.stats),
+      recentResults: [...combined.recentResults, ...dashboard.recentResults],
+    }),
+    { latestResult: null, stats: null, recentResults: [] },
+  );
+
 export const formatBitsPerSec = (bps: number): string => `${formatNumber(bps, 2)}bps`;
 
 export const formatResultSpeed = (result: SpeedtestTrackerResult, dir: "download" | "upload"): string => {
@@ -51,3 +75,21 @@ export const formatStatsSpeed = (band: SpeedtestTrackerStats["download"]): strin
   if (band.avg_bits != null) return formatBitsPerSec(band.avg_bits);
   return formatBitsPerSec(band.avg * 8);
 };
+
+type CompactSection = "latest" | "chart" | "averages";
+
+export const getCompactSections = (
+  height: number,
+  available: Record<CompactSection, boolean>,
+): Record<CompactSection, boolean> => {
+  const budget = height < 240 ? 1 : height < 360 ? 2 : 3;
+  const visible = new Set(
+    (["latest", "chart", "averages"] as const).filter((section) => available[section]).slice(0, budget),
+  );
+
+  return {
+    latest: visible.has("latest"),
+    chart: visible.has("chart"),
+    averages: visible.has("averages"),
+  };
+};
diff --git a/packages/widgets/src/speedtest-tracker/latest-result.tsx b/packages/widgets/src/speedtest-tracker/latest-result.tsx
index fcc6136cf..968db8bbf 100644
--- a/packages/widgets/src/speedtest-tracker/latest-result.tsx
+++ b/packages/widgets/src/speedtest-tracker/latest-result.tsx
@@ -4,28 +4,29 @@ import { Group, SimpleGrid, Stack, Text } from "@mantine/core";
 import { IconArrowDown, IconArrowUp, IconCircleCheck, IconCircleX, IconWaveSine } from "@tabler/icons-react";
 
 import type { SpeedtestTrackerResult } from "@homarr/integrations/types";
-import { useCurrentLocale, useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { formatResultSpeed } from "./helpers";
 import { SectionLabel } from "./section-label";
 import { SpeedStatCard } from "./speed-stat-card";
 
-export function LatestResultSection({ result }: { result: SpeedtestTrackerResult }) {
+export function LatestResultSection({ result, width = 500 }: { result: SpeedtestTrackerResult; width?: number }) {
   const t = useScopedI18n("widget.speedtestTracker");
-  const locale = useCurrentLocale();
+  const locale = useCurrentIntlLocale();
   const timestamp = Intl.DateTimeFormat(locale, {
     month: "short",
     day: "numeric",
     hour: "2-digit",
     minute: "2-digit",
   }).format(result.created_at);
-  const cols = result.healthy !== null ? 4 : 3;
+  const metricCount = result.healthy !== null ? 4 : 3;
+  const cols = width < 230 ? 2 : metricCount;
 
   return (
     <Stack gap={6} h="100%">
       <Group justify="space-between" align="center" wrap="nowrap">
         <SectionLabel>{t("latestResult")}</SectionLabel>
-        <Text size="xs" c="dimmed">
+        <Text size="xs" c="dimmed" truncate title={timestamp} style={{ minWidth: 0 }}>
           {timestamp}
         </Text>
       </Group>
diff --git a/packages/widgets/src/speedtest-tracker/recent-results.tsx b/packages/widgets/src/speedtest-tracker/recent-results.tsx
index 5d2328563..174a4c890 100644
--- a/packages/widgets/src/speedtest-tracker/recent-results.tsx
+++ b/packages/widgets/src/speedtest-tracker/recent-results.tsx
@@ -8,7 +8,7 @@ import { ReferenceLine, XAxis } from "recharts";
 
 import { useRequiredBoard } from "@homarr/boards/context";
 import type { SpeedtestTrackerResult } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { SectionLabel } from "./section-label";
 
@@ -40,17 +40,17 @@ function buildXAxisTicks(data: { ts: number }[]): XAxisTicks {
 
   return {
     midnightTs: foundMidnight,
-    xTicks: Array.from(tickSet).sort((tsA, tsB) => tsA - tsB),
+    xTicks: Array.from(tickSet).toSorted((tsA, tsB) => tsA - tsB),
     topDateTicks: topTicks,
   };
 }
 
-function makeXTickRenderer(midnightTs: number | null) {
+function makeXTickRenderer(midnightTs: number | null, locale: string) {
   return ({ x, y, payload }: { x: number | string; y: number | string; payload: { value: number } }) => {
     const date = new Date(payload.value);
-    const timeStr = date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    const timeStr = date.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" });
     const isMidnight = midnightTs !== null && payload.value === midnightTs;
-    const dateStr = isMidnight ? date.toLocaleDateString([], { month: "short", day: "numeric" }) : null;
+    const dateStr = isMidnight ? date.toLocaleDateString(locale, { month: "short", day: "numeric" }) : null;
 
     return (
       <g transform={`translate(${x},${y})`}>
@@ -67,23 +67,29 @@ function makeXTickRenderer(midnightTs: number | null) {
   };
 }
 
-function renderTopDateTick(props: {
-  x: number | string;
-  y: number | string;
-  payload: { value: number };
-  index: number;
-}) {
-  const { x, y, payload, index } = props;
-  const date = new Date(payload.value);
-  const dateStr = date.toLocaleDateString([], { weekday: "short", month: "short", day: "numeric" });
-  const anchor = index === 0 ? "start" : "middle";
-  return (
-    <g transform={`translate(${x},${y})`}>
-      <text x={0} y={-4} textAnchor={anchor} fontSize={10} fill="var(--mantine-color-dimmed)">
-        {dateStr}
-      </text>
-    </g>
-  );
+function makeTopDateTickRenderer(locale: string) {
+  return ({
+    x,
+    y,
+    payload,
+    index,
+  }: {
+    x: number | string;
+    y: number | string;
+    payload: { value: number };
+    index: number;
+  }) => {
+    const date = new Date(payload.value);
+    const dateStr = date.toLocaleDateString(locale, { weekday: "short", month: "short", day: "numeric" });
+    const anchor = index === 0 ? "start" : "middle";
+    return (
+      <g transform={`translate(${x},${y})`}>
+        <text x={0} y={-4} textAnchor={anchor} fontSize={10} fill="var(--mantine-color-dimmed)">
+          {dateStr}
+        </text>
+      </g>
+    );
+  };
 }
 
 function buildYAxisConfig(maxVal: number, stepOptions: { threshold: number; step: number }[]) {
@@ -94,10 +100,10 @@ function buildYAxisConfig(maxVal: number, stepOptions: { threshold: number; step
   return { ticks, domain: [0, roundedMax] as [number, number] };
 }
 
-function formatTooltipDate(label: number | string | undefined): string {
+function formatTooltipDate(label: number | string | undefined, locale: string): string {
   const timestamp = typeof label === "number" ? label : Number(label);
   if (Number.isNaN(timestamp)) return "";
-  return new Date(timestamp).toLocaleString([], {
+  return new Date(timestamp).toLocaleString(locale, {
     month: "short",
     day: "numeric",
     hour: "2-digit",
@@ -157,11 +163,12 @@ function SpeedHistoryChart({ results, height }: { results: SpeedtestTrackerResul
   const board = useRequiredBoard();
   const theme = useMantineTheme();
   const t = useScopedI18n("widget.speedtestTracker");
+  const locale = useCurrentIntlLocale();
 
   const data = useMemo(
     () =>
-      [...results]
-        .sort((resultA, resultB) => resultA.created_at.getTime() - resultB.created_at.getTime())
+      results
+        .toSorted((resultA, resultB) => resultA.created_at.getTime() - resultB.created_at.getTime())
         .filter((result) => (result.download_bits ?? 0) > 0)
         .map((result) => ({
           ts: result.created_at.getTime(),
@@ -184,7 +191,8 @@ function SpeedHistoryChart({ results, height }: { results: SpeedtestTrackerResul
   );
 
   const { midnightTs, xTicks, topDateTicks } = useMemo(() => buildXAxisTicks(data), [data]);
-  const renderXTick = useMemo(() => makeXTickRenderer(midnightTs), [midnightTs]);
+  const renderXTick = useMemo(() => makeXTickRenderer(midnightTs, locale), [locale, midnightTs]);
+  const renderTopDateTick = useMemo(() => makeTopDateTickRenderer(locale), [locale]);
 
   if (data.length === 0) return null;
 
@@ -230,7 +238,7 @@ function SpeedHistoryChart({ results, height }: { results: SpeedtestTrackerResul
           if (!active || !payload?.length) return null;
           return (
             <ChartTooltip
-              label={formatTooltipDate(label)}
+              label={formatTooltipDate(label, locale)}
               payload={payload}
               valueFormatter={(val: number) => `${val} Mbps`}
             />
@@ -269,11 +277,12 @@ function PingHistoryChart({ results, height }: { results: SpeedtestTrackerResult
   const board = useRequiredBoard();
   const theme = useMantineTheme();
   const t = useScopedI18n("widget.speedtestTracker");
+  const locale = useCurrentIntlLocale();
 
   const data = useMemo(
     () =>
-      [...results]
-        .sort((resultA, resultB) => resultA.created_at.getTime() - resultB.created_at.getTime())
+      results
+        .toSorted((resultA, resultB) => resultA.created_at.getTime() - resultB.created_at.getTime())
         .map((result) =>
           result.ping === null
             ? null
@@ -298,7 +307,7 @@ function PingHistoryChart({ results, height }: { results: SpeedtestTrackerResult
   );
 
   const { midnightTs, xTicks } = useMemo(() => buildXAxisTicks(data), [data]);
-  const renderXTick = useMemo(() => makeXTickRenderer(midnightTs), [midnightTs]);
+  const renderXTick = useMemo(() => makeXTickRenderer(midnightTs, locale), [locale, midnightTs]);
 
   if (data.length === 0) return null;
 
@@ -341,7 +350,7 @@ function PingHistoryChart({ results, height }: { results: SpeedtestTrackerResult
           if (!active || !payload?.length) return null;
           return (
             <ChartTooltip
-              label={formatTooltipDate(label)}
+              label={formatTooltipDate(label, locale)}
               payload={payload}
               valueFormatter={(val: number) => `${val} ms`}
             />
diff --git a/packages/widgets/src/speedtest-tracker/section-label.tsx b/packages/widgets/src/speedtest-tracker/section-label.tsx
index 255e05113..ce7e306d2 100644
--- a/packages/widgets/src/speedtest-tracker/section-label.tsx
+++ b/packages/widgets/src/speedtest-tracker/section-label.tsx
@@ -3,7 +3,7 @@ import { Text } from "@mantine/core";
 
 export function SectionLabel({ children }: { children: ReactNode }) {
   return (
-    <Text size="xs" fw={600} c="dimmed" tt="uppercase" style={{ letterSpacing: "0.05em" }}>
+    <Text size="xs" fw={600} c="dimmed">
       {children}
     </Text>
   );
diff --git a/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx b/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx
index 0817d07f4..844093417 100644
--- a/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx
+++ b/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Card, Flex, Text } from "@mantine/core";
+import { Box, Flex, Text, Tooltip, VisuallyHidden } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 
 import { useRequiredBoard } from "@homarr/boards/context";
@@ -21,34 +21,37 @@ export function SpeedStatCard({ icon: Icon, color, value, label, compact = false
   const hideLabel = height > 0 && height <= 38;
 
   return (
-    <Card
-      ref={ref}
-      p={compact ? "xs" : "sm"}
-      radius={board.itemRadius}
-      bg={`var(--mantine-color-${color}-light)`}
-      h="100%"
-      style={{ flex: 1 }}
-    >
-      <Flex
+    <Tooltip label={`${label}: ${value}`} withArrow>
+      <Box
+        ref={ref}
+        p={compact ? "xs" : "sm"}
+        bg={`var(--mantine-color-${color}-light)`}
         h="100%"
-        w="100%"
-        align="center"
-        justify="center"
-        direction={isWide ? "row" : "column"}
-        gap={isWide ? 8 : 4}
+        style={{ flex: 1, borderRadius: `var(--mantine-radius-${board.itemRadius})`, minWidth: 0 }}
       >
-        <Icon size={compact ? 16 : 20} color={`var(--mantine-color-${color}-5)`} style={{ flexShrink: 0 }} />
-        <Flex direction="column" align={isWide ? "flex-start" : "center"} gap={0}>
-          <Text size={compact ? "sm" : "md"} fw={700} ta="center" lh={1.1}>
-            {value}
-          </Text>
-          {!hideLabel && (
-            <Text size="xs" c="dimmed" ta="center" lh={1.3}>
-              {label}
+        <Flex
+          h="100%"
+          w="100%"
+          align="center"
+          justify="center"
+          direction={isWide ? "row" : "column"}
+          gap={isWide ? 8 : 4}
+          style={{ minWidth: 0 }}
+        >
+          <Icon size={compact ? 16 : 20} color={`var(--mantine-color-${color}-5)`} style={{ flexShrink: 0 }} />
+          <Flex direction="column" align={isWide ? "flex-start" : "center"} gap={0} style={{ minWidth: 0 }}>
+            <Text size={compact ? "sm" : "md"} fw={700} ta="center" lh={1.1} truncate w="100%">
+              {value}
             </Text>
-          )}
+            {!hideLabel && (
+              <Text size="xs" c="dimmed" ta="center" lh={1.3} truncate w="100%">
+                {label}
+              </Text>
+            )}
+            {hideLabel && <VisuallyHidden>{label}</VisuallyHidden>}
+          </Flex>
         </Flex>
-      </Flex>
-    </Card>
+      </Box>
+    </Tooltip>
   );
 }
diff --git a/packages/widgets/src/stocks/component.spec.ts b/packages/widgets/src/stocks/component.spec.ts
new file mode 100644
index 000000000..f7a39e0b1
--- /dev/null
+++ b/packages/widgets/src/stocks/component.spec.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+
+import { getStockLayout, getStockSummary } from "./component";
+
+describe("stock summary", () => {
+  it("returns no summary for an empty series", () => {
+    expect(getStockSummary([], 10)).toBeNull();
+  });
+
+  it("does not divide by a zero previous close", () => {
+    expect(getStockSummary([0, 5], 0)).toMatchObject({
+      currentPrice: 5,
+      change: 5,
+      changePercentage: null,
+      graphValues: [50, 55],
+    });
+  });
+});
+
+describe("stock layout", () => {
+  it("keeps compact widgets focused on symbol and price", () => {
+    expect(getStockLayout(320, 100)).toMatchObject({
+      showName: false,
+      showChange: false,
+      showRange: false,
+      priceOrder: 2,
+    });
+  });
+
+  it("reveals secondary data only when both axes have room", () => {
+    expect(getStockLayout(320, 160)).toMatchObject({
+      showName: false,
+      showChange: true,
+      showRange: true,
+    });
+    expect(getStockLayout(320, 220)).toMatchObject({
+      showName: true,
+      showChange: true,
+      showRange: true,
+      graphHeight: "68%",
+    });
+  });
+
+  it("exposes the complete summary when the widget is roomy", () => {
+    expect(getStockLayout(640, 360)).toEqual({
+      showName: true,
+      showChange: true,
+      showRange: true,
+      graphHeight: "75%",
+      priceOrder: 1,
+    });
+  });
+});
diff --git a/packages/widgets/src/stocks/component.tsx b/packages/widgets/src/stocks/component.tsx
index 918851ce8..a66f216e9 100644
--- a/packages/widgets/src/stocks/component.tsx
+++ b/packages/widgets/src/stocks/component.tsx
@@ -2,10 +2,10 @@
 
 import { Sparkline } from "@mantine/charts";
 import { Flex, Stack, Text, Title, useMantineTheme } from "@mantine/core";
-import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react";
+import { IconMinus, IconTrendingDown, IconTrendingUp } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
@@ -19,25 +19,66 @@ function calculateChange(currentPrice: number, previousClose: number) {
 }
 
 function calculateChangePercentage(currentPrice: number, previousClose: number) {
+  if (previousClose === 0) return null;
   return 100 * ((currentPrice - previousClose) / previousClose);
 }
 
+export interface StockSummary {
+  currentPrice: number;
+  change: number;
+  changePercentage: number | null;
+  graphValues: number[];
+}
+
+export interface StockLayout {
+  showName: boolean;
+  showChange: boolean;
+  showRange: boolean;
+  graphHeight: "48%" | "68%" | "75%";
+  priceOrder: 1 | 2;
+}
+
+export function getStockLayout(width: number, height: number): StockLayout {
+  return {
+    showName: width >= 300 && height >= 190,
+    showChange: width >= 260 && height >= 130,
+    showRange: width >= 220 && height >= 130,
+    graphHeight: height >= 320 ? "75%" : height >= 220 ? "68%" : "48%",
+    priceOrder: width >= 280 && height >= 120 ? 1 : 2,
+  };
+}
+
+export function getStockSummary(priceHistory: number[], previousClose: number): StockSummary | null {
+  const currentPrice = priceHistory.at(-1);
+  if (currentPrice === undefined) return null;
+
+  const minimum = Math.min(...priceHistory);
+  return {
+    currentPrice,
+    change: round(calculateChange(currentPrice, previousClose)),
+    changePercentage: calculateChangePercentage(currentPrice, previousClose),
+    graphValues: priceHistory.map((value) => value - minimum + 50),
+  };
+}
+
 export default function StockPriceWidget({ options, width, height }: WidgetComponentProps<"stockPrice">) {
   const t = useScopedI18n("widget.stockPrice");
+  const locale = useCurrentIntlLocale();
+  const numberFormatter = new Intl.NumberFormat(locale);
   const theme = useMantineTheme();
-  const { data: result } = clientApi.widget.stockPrice.getPriceHistory.useQuery(options);
+  const { data: result, error } = clientApi.widget.stockPrice.getPriceHistory.useQuery(options);
 
+  if (error && !result) throw error;
   if (!result) return <WidgetEmptyState />;
   const { data } = result;
 
-  const stockValuesChange = round(calculateChange(data.priceHistory.at(-1) ?? 0, data.previousClose));
-  const stockValuesChangePercentage = round(
-    calculateChangePercentage(data.priceHistory.at(-1) ?? 0, data.previousClose),
-  );
-
-  const stockValuesMin = Math.min(...data.priceHistory);
-  const stockGraphValues = data.priceHistory.map((value) => value - stockValuesMin + 50);
+  const summary = getStockSummary(data.priceHistory, data.previousClose);
+  if (!summary) return <WidgetEmptyState />;
+  const stockValuesChange = summary.change;
+  const stockValuesChangePercentage = summary.changePercentage === null ? null : round(summary.changePercentage);
+  const stockGraphValues = summary.graphValues;
   const trendColor = stockValuesChange > 0 ? "green.7" : stockValuesChange < 0 ? "red.7" : "gray.6";
+  const layout = getStockLayout(width, height);
 
   return (
     <Flex h="100%" w="100%">
@@ -45,7 +86,7 @@ export default function StockPriceWidget({ options, width, height }: WidgetCompo
         pos="absolute"
         bottom={10}
         w="100%"
-        h={height > 280 ? "75%" : "50%"}
+        h={layout.graphHeight}
         data={stockGraphValues}
         curveType="linear"
         color={trendColor}
@@ -57,50 +98,38 @@ export default function StockPriceWidget({ options, width, height }: WidgetCompo
         <Text size="xl" fw={700} lh="0.715">
           {stockValuesChange > 0 ? (
             <IconTrendingUp size="1.5rem" color={theme.colors.green[7]} />
-          ) : (
+          ) : stockValuesChange < 0 ? (
             <IconTrendingDown size="1.5rem" color={theme.colors.red[7]} />
+          ) : (
+            <IconMinus size="1.5rem" color={theme.colors.gray[6]} />
           )}
           {data.symbol}
         </Text>
-        {width > 280 && height > 280 && (
+        {layout.showName && (
           <Text size="md" lh="1">
             {data.shortName}
           </Text>
         )}
       </Stack>
 
-      <Title pos="absolute" bottom={10} right={10} order={width > 280 ? 1 : 2} fw={700}>
-        {new Intl.NumberFormat().format(round(data.priceHistory.at(-1) ?? 0))}
+      <Title pos="absolute" bottom={10} right={10} order={layout.priceOrder} fw={700}>
+        {numberFormatter.format(round(summary.currentPrice))}
       </Title>
 
-      {width > 280 && (
+      {layout.showChange && (
         <Text pos="absolute" top={10} right={10} size="xl" fw={700}>
-          {new Intl.NumberFormat().format(stockValuesChange)} ({stockValuesChange > 0 ? "+" : ""}
-          {new Intl.NumberFormat().format(stockValuesChangePercentage)}%)
+          {numberFormatter.format(stockValuesChange)}
+          {stockValuesChangePercentage === null
+            ? null
+            : ` (${stockValuesChange > 0 ? "+" : ""}${numberFormatter.format(stockValuesChangePercentage)}%)`}
         </Text>
       )}
 
-      {width > 280 && (
+      {layout.showRange && (
         <Text pos="absolute" bottom={10} left={10} fw={700}>
           {t(`option.timeRange.option.${options.timeRange}.label`)}
         </Text>
       )}
-
-      <Stack pos="absolute" top={10} left={10}>
-        <Text size="xl" fw={700} lh="0.715">
-          {stockValuesChange > 0 ? (
-            <IconTrendingUp size="1.5rem" color={theme.colors.green[7]} />
-          ) : (
-            <IconTrendingDown size="1.5rem" color={theme.colors.red[7]} />
-          )}
-          {data.symbol}
-        </Text>
-        {width > 280 && height > 280 && (
-          <Text size="md" lh="1">
-            {data.shortName}
-          </Text>
-        )}
-      </Stack>
     </Flex>
   );
 }
diff --git a/packages/widgets/src/stocks/index.ts b/packages/widgets/src/stocks/index.ts
index ba44f481e..2b6e637e6 100644
--- a/packages/widgets/src/stocks/index.ts
+++ b/packages/widgets/src/stocks/index.ts
@@ -1,6 +1,6 @@
 import { IconBuildingBank } from "@tabler/icons-react";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const stockPriceTimeFrames = {
@@ -12,7 +12,15 @@ const timeRangeOptions = stockPriceTimeFrames.range;
 const timeIntervalOptions = stockPriceTimeFrames.interval;
 
 export const { definition, componentLoader } = createWidgetDefinition("stockPrice", {
+  supportsAdvancedFocus: false,
   icon: IconBuildingBank,
+  queryKey: [["widget", "stockPrice", "getPriceHistory"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      stock: scope.options.stock,
+      timeRange: scope.options.timeRange,
+      timeInterval: scope.options.timeInterval,
+    }),
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/system-disks/component.tsx b/packages/widgets/src/system-disks/component.tsx
index 5f84dd0b4..80e0dd1e8 100644
--- a/packages/widgets/src/system-disks/component.tsx
+++ b/packages/widgets/src/system-disks/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { Box, Card, Group, Stack, Tooltip, useMantineColorScheme } from "@mantine/core";
+import { Box, Card, Group, ScrollArea, SimpleGrid, Text, Tooltip, useMantineColorScheme } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
@@ -9,13 +9,17 @@ import { formatBytesPair } from "@homarr/common";
 import { useI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import type { WidgetComponentProps } from "../definition";
-import { filterStorageVolumes } from "../filter-storage-volumes";
+import { filterStorageVolumes, normalizeStorageDeviceName } from "../filter-storage-volumes";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
 
 type DisplayMode = WidgetComponentProps<"systemDisks">["options"]["displayMode"];
 
-const getDisplayText = (item: { used: string; available: string; percentage: number }, displayMode: DisplayMode) => {
+export const getDisplayText = (
+  item: { used: string; available: string; percentage: number },
+  displayMode: DisplayMode,
+) => {
   switch (displayMode) {
     case "percentage":
       return `${Math.round(item.percentage)}%`;
@@ -35,6 +39,16 @@ const getDisplayText = (item: { used: string; available: string; percentage: num
   }
 };
 
+export const clampPercentage = (percentage: number): number => Math.min(100, Math.max(0, percentage));
+
+const getAbsoluteText = (item: { used: string; available: string }) => {
+  const usedInBytes = Number(item.used);
+  const availableInBytes = Number(item.available);
+  if (!Number.isFinite(usedInBytes) || !Number.isFinite(availableInBytes)) return `${item.used} / ${item.available}`;
+  const { used, available } = formatBytesPair(usedInBytes, availableInBytes);
+  return `${used} / ${available}`;
+};
+
 interface SystemDiskCardProps {
   deviceName: string;
   percentage: number;
@@ -42,6 +56,10 @@ interface SystemDiskCardProps {
   temperature: number | null | undefined;
   healthy: boolean;
   showBackgroundBar: boolean;
+  integrationName?: string;
+  secondaryText?: string;
+  showSecondaryText: boolean;
+  showTemperature: boolean;
 }
 
 const SystemDiskCard = ({
@@ -51,6 +69,10 @@ const SystemDiskCard = ({
   temperature,
   healthy,
   showBackgroundBar,
+  integrationName,
+  secondaryText,
+  showSecondaryText,
+  showTemperature,
 }: SystemDiskCardProps) => {
   const board = useRequiredBoard();
   const scheme = useMantineColorScheme();
@@ -76,42 +98,65 @@ const SystemDiskCard = ({
   }, [displayText, healthy]);
 
   const unhealthyLabel = t("widget.systemDisks.status.unhealthy");
+  const hasHiddenTemperature = temperature !== null && temperature !== undefined && !showTemperature;
+  const hasHiddenSecondaryText = Boolean(secondaryText && secondaryText !== displayText && !showSecondaryText);
+  const tooltipLabel = [
+    healthy ? displayText : `${displayText} (${unhealthyLabel})`,
+    hasHiddenSecondaryText ? secondaryText : null,
+    hasHiddenTemperature ? `${temperature}°C` : null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
 
   return (
     <Tooltip
-      label={healthy ? displayText : `${displayText} (${unhealthyLabel})`}
-      disabled={valueFits}
+      label={tooltipLabel}
+      disabled={valueFits && !hasHiddenTemperature && !hasHiddenSecondaryText}
       position="top"
       withinPortal
     >
       <Card
         radius={board.itemRadius}
-        py={"xs"}
+        py="xs"
         bg={scheme.colorScheme === "dark" ? "dark.7" : "gray.1"}
         style={{ overflow: "hidden", position: "relative" }}
       >
-        <Group justify="space-between" style={{ zIndex: 1 }}>
-          <div>
-            <p style={{ margin: 0 }}>
-              <b>{deviceName}</b>
-            </p>
-            <p ref={valueRef} style={{ margin: 0, visibility: valueFits ? "visible" : "hidden" }}>
+        <Group justify="space-between" wrap="nowrap" style={{ zIndex: 1, minWidth: 0 }}>
+          <div style={{ minWidth: 0, flex: 1 }}>
+            <Text fw={700} size="sm" truncate="end">
+              {deviceName}
+            </Text>
+            {integrationName && (
+              <Text size="xs" c="dimmed" truncate="end">
+                {integrationName}
+              </Text>
+            )}
+            <Text ref={valueRef} size="sm" style={{ visibility: valueFits ? "visible" : "hidden" }}>
               <span>{displayText}</span>
               {!healthy && <span style={{ marginLeft: 5 }}>{unhealthyLabel}</span>}
-            </p>
+            </Text>
+            {showSecondaryText && secondaryText && secondaryText !== displayText && (
+              <Text size="xs" c="dimmed">
+                {secondaryText}
+              </Text>
+            )}
+          </div>
+          <div style={{ flexShrink: 0 }}>
+            {showTemperature && temperature !== null && temperature !== undefined ? (
+              <Text size="sm">{temperature}°C</Text>
+            ) : null}
           </div>
-          <div>{temperature ? <p style={{ margin: 0 }}>{temperature}°C</p> : null}</div>
         </Group>
         <Box
-          bg={healthy ? "green" : "red"}
           style={{
             position: "absolute",
             top: 0,
             left: 0,
-            width: `${percentage}%`,
+            width: `${clampPercentage(percentage)}%`,
             height: "100%",
             zIndex: 0,
             display: showBackgroundBar ? "block" : "none",
+            backgroundColor: healthy ? "var(--mantine-color-green-light)" : "var(--mantine-color-red-light)",
           }}
         ></Box>
       </Card>
@@ -119,41 +164,61 @@ const SystemDiskCard = ({
   );
 };
 
-export default function SystemResources({ integrationIds, options }: WidgetComponentProps<"systemDisks">) {
+export default function SystemResources({
+  integrationIds,
+  options,
+  width,
+  height,
+}: WidgetComponentProps<"systemDisks">) {
   const queryInput = { integrationIds };
-  const { data = [] } = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery(queryInput);
+  const data =
+    getUsableWidgetQueryData(clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery(queryInput)) ?? [];
 
-  const lastItem = data.at(-1);
+  if (data.length === 0) return <WidgetEmptyState />;
 
-  if (!lastItem) return <WidgetEmptyState />;
+  const disks = data.flatMap((entry) => {
+    const fileSystem = filterStorageVolumes(
+      entry.healthInfo.fileSystem,
+      options.visibleStorageVolumes,
+      entry.integrationId,
+    );
+    const smart = filterStorageVolumes(entry.healthInfo.smart, options.visibleStorageVolumes, entry.integrationId);
+    return fileSystem.map((item) => ({
+      integrationId: entry.integrationId,
+      integrationName: entry.integrationName,
+      item,
+      smartItem: smart.find(
+        (candidate) => normalizeStorageDeviceName(candidate.deviceName) === normalizeStorageDeviceName(item.deviceName),
+      ),
+    }));
+  });
 
-  const rawFileSystem = lastItem.healthInfo.fileSystem;
-  if (rawFileSystem.length === 0) {
-    throw new NoIntegrationDataError();
-  }
+  if (data.every((entry) => entry.healthInfo.fileSystem.length === 0)) throw new NoIntegrationDataError();
+  if (disks.length === 0) return <WidgetEmptyState />;
 
-  const fileSystem = filterStorageVolumes(rawFileSystem, options.visibleStorageVolumes, lastItem.integrationId);
-  const smart = filterStorageVolumes(lastItem.healthInfo.smart, options.visibleStorageVolumes, lastItem.integrationId);
-
-  if (fileSystem.length === 0) return <WidgetEmptyState />;
+  const minimumCardWidth = 260;
+  const columns = Math.max(1, Math.min(disks.length, Math.floor(width / minimumCardWidth)));
+  const cellWidth = width / columns;
 
   return (
-    <Stack gap="xs" p="xs" h="100%">
-      {fileSystem.map((item) => {
-        const smartItem = smart.find((smart) => smart.deviceName === item.deviceName);
-
-        return (
+    <ScrollArea h="100%">
+      <SimpleGrid cols={columns} spacing="xs" p="xs">
+        {disks.map(({ integrationId, integrationName, item, smartItem }) => (
           <SystemDiskCard
-            key={`disk-${item.deviceName}`}
+            key={`${integrationId}:${item.deviceName}`}
             deviceName={item.deviceName}
             percentage={item.percentage}
             displayText={getDisplayText(item, options.displayMode)}
             temperature={options.showTemperatureIfAvailable ? smartItem?.temperature : undefined}
             healthy={smartItem?.healthy ?? true} // fall back to healthy if no information is available
             showBackgroundBar={options.showBackgroundBar}
+            integrationName={data.length > 1 ? integrationName : undefined}
+            secondaryText={getAbsoluteText(item)}
+            showSecondaryText={height >= 160 && cellWidth >= 260}
+            showTemperature={height >= 100 && cellWidth >= 220}
           />
-        );
-      })}
-    </Stack>
+        ))}
+      </SimpleGrid>
+    </ScrollArea>
   );
 }
diff --git a/packages/widgets/src/system-disks/display.spec.ts b/packages/widgets/src/system-disks/display.spec.ts
new file mode 100644
index 000000000..1ed6e3eac
--- /dev/null
+++ b/packages/widgets/src/system-disks/display.spec.ts
@@ -0,0 +1,14 @@
+import { describe, expect, test } from "vitest";
+
+import { clampPercentage, getDisplayText } from "./component";
+
+describe("system disk display", () => {
+  test("clamps malformed utilization before sizing the background", () => {
+    expect(clampPercentage(-4)).toBe(0);
+    expect(clampPercentage(108)).toBe(100);
+  });
+
+  test("falls back to provider values when sizes are already formatted", () => {
+    expect(getDisplayText({ used: "5 GiB", available: "10 GiB", percentage: 50 }, "absolute")).toBe("5 GiB / 10 GiB");
+  });
+});
diff --git a/packages/widgets/src/system-disks/index.ts b/packages/widgets/src/system-disks/index.ts
index 66ffcc286..375d51232 100644
--- a/packages/widgets/src/system-disks/index.ts
+++ b/packages/widgets/src/system-disks/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 import { createStorageVolumeMultiSelectOptions } from "../storage-volume-options";
 
 export const { definition, componentLoader } = createWidgetDefinition("systemDisks", {
+  supportsAdvancedFocus: false,
   icon: IconServer2,
   queryKey: [["widget", "healthMonitoring"]],
   refetchInterval: 5,
diff --git a/packages/widgets/src/system-resources/chart/common-chart.tsx b/packages/widgets/src/system-resources/chart/common-chart.tsx
index f2f9f1d87..ffc10a45f 100644
--- a/packages/widgets/src/system-resources/chart/common-chart.tsx
+++ b/packages/widgets/src/system-resources/chart/common-chart.tsx
@@ -83,6 +83,13 @@ export const CommonChart = ({
           )}
         </Group>
       )}
+      {data.length > 1 && height > 0 && height <= 40 && lastValue && !hovered && (
+        <Center pos="absolute" w="100%" h="100%" style={{ zIndex: 2, pointerEvents: "none" }}>
+          <Text size="xs" fw={600}>
+            {lastValue}
+          </Text>
+        </Center>
+      )}
       {data.length <= 1 ? (
         <Center pos="absolute" w="100%" h="100%">
           <Stack px={"xs"} align={"center"} gap={4}>
@@ -92,6 +99,11 @@ export const CommonChart = ({
                 {title}
               </Text>
             )}
+            {lastValue && (
+              <Text size={height > 100 ? "md" : "xs"} fw={600} ta="center">
+                {lastValue}
+              </Text>
+            )}
           </Stack>
         </Center>
       ) : (
diff --git a/packages/widgets/src/system-resources/chart/memory-chart.tsx b/packages/widgets/src/system-resources/chart/memory-chart.tsx
index b49ea81be..429ec7016 100644
--- a/packages/widgets/src/system-resources/chart/memory-chart.tsx
+++ b/packages/widgets/src/system-resources/chart/memory-chart.tsx
@@ -22,7 +22,7 @@ export const SystemResourceMemoryChart = ({
   const t = useScopedI18n("widget.systemResources.card");
 
   const percentageUsed =
-    memoryUsageOverTime.length > 0
+    memoryUsageOverTime.length > 0 && totalCapacityInBytes > 0
       ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         memoryUsageOverTime[memoryUsageOverTime.length - 1]! / totalCapacityInBytes
       : undefined;
@@ -45,7 +45,8 @@ export const SystemResourceMemoryChart = ({
           return (
             <Paper px={3} py={2} shadow="md">
               <Text c="dimmed" size="xs">
-                {memory.used} / {memory.available} ({Math.round((value / totalCapacityInBytes) * 100)}%)
+                {memory.used} / {memory.available} (
+                {totalCapacityInBytes > 0 ? Math.round((value / totalCapacityInBytes) * 100) : 0}%)
               </Text>
             </Paper>
           );
diff --git a/packages/widgets/src/system-resources/chart/network-traffic.tsx b/packages/widgets/src/system-resources/chart/network-traffic.tsx
index fc3b644b6..5ea5bff9a 100644
--- a/packages/widgets/src/system-resources/chart/network-traffic.tsx
+++ b/packages/widgets/src/system-resources/chart/network-traffic.tsx
@@ -23,6 +23,7 @@ export const NetworkTrafficChart = ({
 
   const max = Math.max(...usageOverTime);
   const upperBound = max + max * 0.2;
+  const latest = usageOverTime.at(-1) ?? 0;
 
   return (
     <CommonChart
@@ -32,7 +33,7 @@ export const NetworkTrafficChart = ({
       title={isUp ? t("up") : t("down")}
       icon={isUp ? IconArrowUp : IconArrowDown}
       yAxisProps={{ domain: [0, upperBound] }}
-      lastValue={formatByteRate(Math.round(max))}
+      lastValue={formatByteRate(Math.round(latest))}
       chartType={hasShadow ? "area" : "line"}
       labelDisplayMode={labelDisplayMode}
       tooltipProps={{
diff --git a/packages/widgets/src/system-resources/component.tsx b/packages/widgets/src/system-resources/component.tsx
index 1d3854c89..018a3388f 100644
--- a/packages/widgets/src/system-resources/component.tsx
+++ b/packages/widgets/src/system-resources/component.tsx
@@ -1,127 +1,246 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
-import { Box, Group, Stack } from "@mantine/core";
-import { useElementSize } from "@mantine/hooks";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Center, Group, Loader, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 
+import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { CombinedNetworkTrafficChart } from "./chart/combined-network-traffic";
 import { SystemResourceCPUChart } from "./chart/cpu-chart";
 import { SystemResourceGPUChart } from "./chart/gpu-chart";
 import { SystemResourceMemoryChart } from "./chart/memory-chart";
 import { NetworkTrafficChart } from "./chart/network-traffic";
 
-const MAX_QUEUE_SIZE = 15;
+const COMPACT_HISTORY_SIZE = 15;
+const ADVANCED_HISTORY_SIZE = 60;
 
-const toChartItem = (healthInfo: {
+type ChartItem = {
+  cpu: number;
+  memory: number;
+  gpu: number;
+  network: { up: number; down: number } | null;
+};
+
+export const toChartItem = (healthInfo: {
   cpuUtilization: number;
   memUsedInBytes: number;
   gpu: { processorUtilization: number }[];
   network: { up: number; down: number } | null;
-}) => ({
+}): ChartItem => ({
   cpu: healthInfo.cpuUtilization,
   memory: healthInfo.memUsedInBytes,
   gpu:
     healthInfo.gpu.length > 0
-      ? healthInfo.gpu.reduce((acc, g) => acc + g.processorUtilization, 0) / healthInfo.gpu.length
+      ? healthInfo.gpu.reduce((acc, gpu) => acc + gpu.processorUtilization, 0) / healthInfo.gpu.length
       : 0,
   network: healthInfo.network,
 });
 
-export default function SystemResources({ integrationIds, options }: WidgetComponentProps<"systemResources">) {
-  const { ref, width } = useElementSize();
+export const appendBoundedHistory = (history: ChartItem[], item: ChartItem, limit: number): ChartItem[] =>
+  [...history, item].slice(-limit);
 
-  const { data = [], dataUpdatedAt } = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({
-    integrationIds,
-  });
-  const memoryCapacityInBytes =
-    (data[0]?.healthInfo.memAvailableInBytes ?? 0) + (data[0]?.healthInfo.memUsedInBytes ?? 0);
+export const getNetworkHistory = (items: readonly ChartItem[]) =>
+  items.flatMap((item) => (item.network === null ? [] : [item.network]));
 
-  const [items, setItems] = useState<
-    { cpu: number; memory: number; gpu: number; network: { up: number; down: number } | null }[]
-  >(() => (data[0] ? [toChartItem(data[0].healthInfo)] : []));
+export const getCompactChartBudget = (height: number): number => {
+  if (height < 140) return 1;
+  if (height < 260) return 2;
+  return 4;
+};
+
+export default function SystemResources({
+  integrationIds,
+  options,
+  width,
+  height,
+  displayMode,
+}: WidgetComponentProps<"systemResources">) {
+  const healthQuery = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({ integrationIds });
+  const data = getUsableWidgetQueryData(healthQuery) ?? [];
+  const { dataUpdatedAt, isPending } = healthQuery;
+  const isAdvanced = displayMode === "advanced";
+  const integrationKey = useMemo(() => integrationIds.join("\u0000"), [integrationIds]);
+  const [historyByIntegration, setHistoryByIntegration] = useState<Record<string, ChartItem[]>>({});
+  const previousIntegrationKey = useRef(integrationKey);
 
-  const prevIntegrationIds = useRef(integrationIds);
   useEffect(() => {
-    if (prevIntegrationIds.current === integrationIds) return;
-    prevIntegrationIds.current = integrationIds;
-    setItems([]);
-  }, [integrationIds]);
+    if (previousIntegrationKey.current === integrationKey) return;
+    previousIntegrationKey.current = integrationKey;
+    setHistoryByIntegration({});
+  }, [integrationKey]);
 
   const lastUpdatedAt = useRef(dataUpdatedAt);
   useEffect(() => {
     if (dataUpdatedAt === lastUpdatedAt.current) return;
     lastUpdatedAt.current = dataUpdatedAt;
-    const firstItem = data[0];
-    if (!firstItem) return;
-    setItems((prev) => [...prev, toChartItem(firstItem.healthInfo)].slice(-MAX_QUEUE_SIZE));
+    setHistoryByIntegration((previous) =>
+      Object.fromEntries(
+        data.map((entry) => [
+          entry.integrationId,
+          appendBoundedHistory(
+            previous[entry.integrationId] ?? [],
+            toChartItem(entry.healthInfo),
+            ADVANCED_HISTORY_SIZE,
+          ),
+        ]),
+      ),
+    );
   }, [dataUpdatedAt, data]);
 
-  const showNetwork =
-    items.length === 0 || (items.every((item) => item.network !== null) && options.visibleCharts.includes("network"));
-  const rowHeight = `calc((100% - ${(options.visibleCharts.length - 1) * 8}px) / ${options.visibleCharts.length})`;
+  const panelColumns = isAdvanced && width >= 960 && data.length > 1 ? 2 : 1;
+  const panelWidth = width / panelColumns;
+  const renderCharts = (entry: (typeof data)[number], availableWidth: number, availableHeight: number) => {
+    const currentItem = toChartItem(entry.healthInfo);
+    const fullHistory = historyByIntegration[entry.integrationId] ?? [currentItem];
+    const history = isAdvanced ? fullHistory : fullHistory.slice(-COMPACT_HISTORY_SIZE);
+
+    return (
+      <SystemCharts
+        key={entry.integrationId}
+        integrationName={entry.integrationName}
+        items={history}
+        memoryCapacityInBytes={entry.healthInfo.memAvailableInBytes + entry.healthInfo.memUsedInBytes}
+        options={options}
+        width={availableWidth}
+        height={availableHeight}
+        isAdvanced={isAdvanced}
+        showTitle={isAdvanced || data.length > 1}
+      />
+    );
+  };
+
+  if (isPending) {
+    return (
+      <Center h="100%">
+        <Loader size="sm" />
+      </Center>
+    );
+  }
+
+  if (data.length === 0) return <WidgetEmptyState />;
+
+  if (!isAdvanced && data.length === 1 && data[0]) {
+    return (
+      <Box h="100%" p="xs">
+        {renderCharts(data[0], width, Math.max(0, height - 20))}
+      </Box>
+    );
+  }
+
+  const compactPanelHeight = Math.max(160, Math.floor(height / Math.min(data.length, 2)));
 
   return (
-    <Stack gap="xs" p="xs" ref={ref} h="100%">
-      {options.visibleCharts.includes("cpu") && (
-        <Box h={rowHeight}>
-          <SystemResourceCPUChart
-            cpuUsageOverTime={items.map((item) => item.cpu)}
-            hasShadow={options.hasShadow}
-            labelDisplayMode={options.labelDisplayMode}
-          />
-        </Box>
-      )}
-      {options.visibleCharts.includes("memory") && (
-        <Box h={rowHeight}>
-          <SystemResourceMemoryChart
-            memoryUsageOverTime={items.map((item) => item.memory)}
-            totalCapacityInBytes={memoryCapacityInBytes}
-            hasShadow={options.hasShadow}
-            labelDisplayMode={options.labelDisplayMode}
-          />
-        </Box>
-      )}
-      {options.visibleCharts.includes("gpu") && (
-        <Box h={rowHeight}>
-          <SystemResourceGPUChart
-            gpuUsageOverTime={items.map((item) => item.gpu)}
-            hasShadow={options.hasShadow}
-            labelDisplayMode={options.labelDisplayMode}
-          />
-        </Box>
-      )}
-      {showNetwork &&
-        (width > 256 ? (
-          <Group h={rowHeight} gap="xs" grow>
-            <NetworkTrafficChart
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              usageOverTime={items.map((item) => item.network!.down)}
-              isUp={false}
-              hasShadow={options.hasShadow}
-              labelDisplayMode={options.labelDisplayMode}
-            />
+    <ScrollArea h="100%">
+      <SimpleGrid cols={panelColumns} spacing="xs" p="xs">
+        {data.map((entry) => renderCharts(entry, panelWidth, isAdvanced ? height : compactPanelHeight))}
+      </SimpleGrid>
+    </ScrollArea>
+  );
+}
 
-            <NetworkTrafficChart
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              usageOverTime={items.map((item) => item.network!.up)}
-              isUp
-              hasShadow={options.hasShadow}
-              labelDisplayMode={options.labelDisplayMode}
-            />
-          </Group>
-        ) : (
-          <Box h={rowHeight}>
-            <CombinedNetworkTrafficChart
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              usageOverTime={items.map((item) => item.network!)}
+interface SystemChartsProps {
+  integrationName: string;
+  items: ChartItem[];
+  memoryCapacityInBytes: number;
+  options: WidgetComponentProps<"systemResources">["options"];
+  width: number;
+  height: number;
+  isAdvanced: boolean;
+  showTitle: boolean;
+}
+
+const SystemCharts = ({
+  integrationName,
+  items,
+  memoryCapacityInBytes,
+  options,
+  width,
+  height,
+  isAdvanced,
+  showTitle,
+}: SystemChartsProps) => {
+  const networkItems = getNetworkHistory(items);
+  const availableCharts = options.visibleCharts.filter((chart) => chart !== "network" || networkItems.length > 0);
+  const visibleCharts = isAdvanced ? availableCharts : availableCharts.slice(0, getCompactChartBudget(height));
+  const showNetwork = visibleCharts.includes("network");
+  const chartCount = visibleCharts.length;
+  const chartColumns = isAdvanced && width >= 560 ? 2 : 1;
+  const chartHeight = isAdvanced
+    ? 180
+    : `calc((100% - ${Math.max(0, chartCount - 1) * 10}px) / ${Math.max(1, chartCount)})`;
+
+  return (
+    <Stack gap="xs" h={isAdvanced ? "auto" : height} miw={0}>
+      {showTitle && (
+        <Text size="sm" fw={600} truncate="end">
+          {integrationName}
+        </Text>
+      )}
+      <SimpleGrid cols={chartColumns} spacing="xs" style={{ flex: 1, minHeight: 0 }}>
+        {chartCount === 0 && (
+          <Center h="100%">
+            <Text size="sm" c="dimmed">
+              —
+            </Text>
+          </Center>
+        )}
+        {visibleCharts.includes("cpu") && (
+          <Box h={chartHeight}>
+            <SystemResourceCPUChart
+              cpuUsageOverTime={items.map((item) => item.cpu)}
               hasShadow={options.hasShadow}
               labelDisplayMode={options.labelDisplayMode}
             />
           </Box>
-        ))}
+        )}
+        {visibleCharts.includes("memory") && (
+          <Box h={chartHeight}>
+            <SystemResourceMemoryChart
+              memoryUsageOverTime={items.map((item) => item.memory)}
+              totalCapacityInBytes={memoryCapacityInBytes}
+              hasShadow={options.hasShadow}
+              labelDisplayMode={options.labelDisplayMode}
+            />
+          </Box>
+        )}
+        {visibleCharts.includes("gpu") && (
+          <Box h={chartHeight}>
+            <SystemResourceGPUChart
+              gpuUsageOverTime={items.map((item) => item.gpu)}
+              hasShadow={options.hasShadow}
+              labelDisplayMode={options.labelDisplayMode}
+            />
+          </Box>
+        )}
+        {showNetwork &&
+          (width >= 300 ? (
+            <Group h={chartHeight} gap="xs" grow wrap="nowrap">
+              <NetworkTrafficChart
+                usageOverTime={networkItems.map((network) => network.down)}
+                isUp={false}
+                hasShadow={options.hasShadow}
+                labelDisplayMode={options.labelDisplayMode}
+              />
+              <NetworkTrafficChart
+                usageOverTime={networkItems.map((network) => network.up)}
+                isUp
+                hasShadow={options.hasShadow}
+                labelDisplayMode={options.labelDisplayMode}
+              />
+            </Group>
+          ) : (
+            <Box h={chartHeight}>
+              <CombinedNetworkTrafficChart
+                usageOverTime={networkItems}
+                hasShadow={options.hasShadow}
+                labelDisplayMode={options.labelDisplayMode}
+              />
+            </Box>
+          ))}
+      </SimpleGrid>
     </Stack>
   );
-}
+};
diff --git a/packages/widgets/src/system-resources/history.spec.ts b/packages/widgets/src/system-resources/history.spec.ts
new file mode 100644
index 000000000..f08be4208
--- /dev/null
+++ b/packages/widgets/src/system-resources/history.spec.ts
@@ -0,0 +1,39 @@
+import { describe, expect, test } from "vitest";
+
+import { appendBoundedHistory, getCompactChartBudget, getNetworkHistory, toChartItem } from "./component";
+
+describe("system resource history", () => {
+  test("averages all GPU values", () => {
+    expect(
+      toChartItem({
+        cpuUtilization: 10,
+        memUsedInBytes: 20,
+        gpu: [{ processorUtilization: 20 }, { processorUtilization: 60 }],
+        network: null,
+      }).gpu,
+    ).toBe(40);
+  });
+
+  test("keeps a bounded rolling history", () => {
+    const item = toChartItem({ cpuUtilization: 1, memUsedInBytes: 2, gpu: [], network: null });
+    expect(appendBoundedHistory([item, item], item, 2)).toHaveLength(2);
+  });
+
+  test("omits unavailable network samples instead of inventing zero traffic", () => {
+    const missing = toChartItem({ cpuUtilization: 1, memUsedInBytes: 2, gpu: [], network: null });
+    const available = toChartItem({
+      cpuUtilization: 1,
+      memUsedInBytes: 2,
+      gpu: [],
+      network: { up: 12, down: 34 },
+    });
+
+    expect(getNetworkHistory([missing, available, missing])).toEqual([{ up: 12, down: 34 }]);
+  });
+
+  test("limits compact charts to the available height", () => {
+    expect(getCompactChartBudget(100)).toBe(1);
+    expect(getCompactChartBudget(200)).toBe(2);
+    expect(getCompactChartBudget(300)).toBe(4);
+  });
+});
diff --git a/packages/widgets/src/test/translation.spec.ts b/packages/widgets/src/test/translation.spec.ts
index 8af82dc25..fb8f63843 100644
--- a/packages/widgets/src/test/translation.spec.ts
+++ b/packages/widgets/src/test/translation.spec.ts
@@ -1,42 +1,51 @@
 import { describe, expect, it } from "vitest";
 
-import { objectEntries } from "@homarr/common";
 import type { SettingsContextProps } from "@homarr/settings/creator";
 import { createLanguageMapping } from "@homarr/translation";
 
-import { widgetImports } from "..";
+import { loadAllWidgetDefinitions } from "../manifest";
 
-describe("Widget properties with description should have matching translations", async () => {
-  const enTranslation = await createLanguageMapping().en();
-  objectEntries(widgetImports).forEach(([key, value]) => {
-    Object.entries(value.definition.createOptions({} as SettingsContextProps)).forEach(([optionKey, optionValue_]) => {
-      const optionValue = optionValue_ as { withDescription: boolean };
-      it(`should have matching translations for ${optionKey} option description of ${key} widget`, () => {
-        const option = enTranslation.default.widget[key].option;
-        if (!(optionKey in option)) {
-          throw new Error(`Option ${optionKey} not found in translation`);
-        }
-        const value = option[optionKey as keyof typeof option];
+const doesOptionRenderTranslatedCopy = (option: unknown) => {
+  if (typeof option !== "object" || option === null || !("type" in option)) return false;
+  return option.type !== "internal" && option.type !== "customWidgetConfiguration";
+};
 
-        expect("description" in value).toBe(optionValue.withDescription);
+const widgetDefinitions = await loadAllWidgetDefinitions();
+const enTranslation = await createLanguageMapping().en();
+
+describe("Widget properties with description should have matching translations", () => {
+  for (const [key, definition] of widgetDefinitions) {
+    Object.entries(definition.createOptions({} as SettingsContextProps))
+      .filter(([, option]) => doesOptionRenderTranslatedCopy(option))
+      .forEach(([optionKey, optionValue_]) => {
+        const optionValue = optionValue_ as { withDescription: boolean };
+        it(`should have matching translations for ${optionKey} option description of ${key} widget`, () => {
+          const option = enTranslation.default.widget[key].option;
+          if (!(optionKey in option)) {
+            throw new Error(`Option ${optionKey} not found in translation`);
+          }
+          const value = option[optionKey as keyof typeof option];
+
+          expect("description" in value).toBe(optionValue.withDescription);
+        });
       });
-    });
-  });
+  }
 });
 
-describe("Widget properties should have matching name translations", async () => {
-  const enTranslation = await createLanguageMapping().en();
-  objectEntries(widgetImports).forEach(([key, value]) => {
-    Object.keys(value.definition.createOptions({} as SettingsContextProps)).forEach((optionKey) => {
-      it(`should have matching translations for ${optionKey} option name of ${key} widget`, () => {
-        const option = enTranslation.default.widget[key].option;
-        if (!(optionKey in option)) {
-          throw new Error(`Option ${optionKey} not found in translation`);
-        }
-        const value = option[optionKey as keyof typeof option];
+describe("Widget properties should have matching name translations", () => {
+  for (const [key, definition] of widgetDefinitions) {
+    Object.entries(definition.createOptions({} as SettingsContextProps))
+      .filter(([, option]) => doesOptionRenderTranslatedCopy(option))
+      .forEach(([optionKey]) => {
+        it(`should have matching translations for ${optionKey} option name of ${key} widget`, () => {
+          const option = enTranslation.default.widget[key].option;
+          if (!(optionKey in option)) {
+            throw new Error(`Option ${optionKey} not found in translation`);
+          }
+          const value = option[optionKey as keyof typeof option];
 
-        expect("label" in value).toBe(true);
+          expect("label" in value).toBe(true);
+        });
       });
-    });
-  });
+  }
 });
diff --git a/packages/widgets/src/timetable/component.tsx b/packages/widgets/src/timetable/component.tsx
index 47751a751..29602c9a8 100644
--- a/packages/widgets/src/timetable/component.tsx
+++ b/packages/widgets/src/timetable/component.tsx
@@ -1,72 +1,185 @@
-import { Badge, Center, Group, Stack, Text } from "@mantine/core";
-import dayjs from "dayjs";
+import { Alert, Badge, Center, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import type { DynamicSelectOption } from "../_inputs/widget-dynamic-select-input";
+import { formatLocalizedTime } from "../common/locale";
 import type { WidgetComponentProps } from "../definition";
 
-export default function TimetableWidget({ options }: WidgetComponentProps<"timetable">) {
+export default function TimetableWidget({
+  options,
+  displayMode = "compact",
+  width,
+  height,
+  itemId,
+}: WidgetComponentProps<"timetable">) {
   const t = useScopedI18n("widget.timetable");
 
   if (!options.station) {
     return <Center h="100%">{t("noStation")}</Center>;
   }
 
-  return <TimetableWidgetInner station={options.station} baseUrl={options.baseUrl} />;
+  return (
+    <TimetableWidgetInner
+      station={options.station}
+      baseUrl={options.baseUrl}
+      itemId={itemId}
+      displayMode={displayMode}
+      width={width}
+      height={height}
+    />
+  );
 }
 
 interface TimetableWidgetInnerProps {
   station: DynamicSelectOption;
   baseUrl: string;
+  itemId?: string;
+  displayMode: "compact" | "advanced";
+  width: number;
+  height: number;
 }
 
-const TimetableWidgetInner = ({ station, baseUrl }: TimetableWidgetInnerProps) => {
-  const { data: timetable } = clientApi.widget.timetable.getTimetable.useQuery({
+const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width, height }: TimetableWidgetInnerProps) => {
+  const {
+    data: timetable,
+    error,
+    isPending,
+  } = clientApi.widget.timetable.getTimetable.useQuery({
     baseUrl,
+    itemId,
     stationId: station.value,
-    limit: 10,
+    limit: displayMode === "advanced" ? 50 : 10,
   });
   const t = useScopedI18n("widget.timetable");
+  const tCommon = useScopedI18n("common");
+  const locale = useCurrentIntlLocale();
+
+  if (error && timetable === undefined) throw error;
+
+  const entries = timetable?.entries ?? [];
+  const staleTime = timetable ? formatLocalizedTime(timetable.timestamp, locale, { includeSeconds: true }) : undefined;
+  const staleWarning = error && staleTime ? t("warning.stale", { time: staleTime }) : undefined;
+  const compactStaleWarning = error && staleTime ? t("warning.staleCompact") : undefined;
+  const isAdvanced = displayMode === "advanced";
+  const isDense = !isAdvanced && (width < 300 || height < 160);
+  const showTitle = isAdvanced || height >= 112;
+  const showLine = isAdvanced || width >= 200;
+  const showPlatform = isAdvanced || width >= 320;
 
   return (
-    <Stack w="100%" gap="xs" p="sm">
-      <Text fw="bold">{t("title", { station: station.label })}</Text>
-      {(timetable?.entries ?? []).map((entry) => (
-        <Group key={`${entry.timestamp.toISOString()}-${entry.location}`} justify="space-between" w="100%">
-          <Group gap="sm">
-            {entry.line && (
-              <Badge
-                size="sm"
-                color={entry.line.color ?? undefined}
-                variant={entry.line.color ? "filled" : "default"}
-                w={32}
-                p={0}
-                radius={0}
-              >
-                {entry.line.name}
-              </Badge>
-            )}
-            <Text size="sm">
-              {dayjs(entry.timestamp).format("HH:mm")}{" "}
-              {entry.delay >= 1 && (
-                <Text size="sm" span c="red">
-                  +{entry.delay}&apos;
-                </Text>
-              )}
-            </Text>
-
-            <Text size="sm">{entry.location}</Text>
-          </Group>
-
-          {entry.platform && (
-            <Text size="sm" c={entry.platform.hasChanged ? "red" : undefined}>
-              {entry.platform.name}
-            </Text>
-          )}
+    <Stack w="100%" h="100%" gap={isDense ? 4 : "xs"} p={isDense ? "xs" : "sm"}>
+      {showTitle && (
+        <Text fw={600} size={isDense ? "sm" : undefined} truncate="end">
+          {t("title", { station: station.label })}
+        </Text>
+      )}
+      {compactStaleWarning && displayMode === "compact" && (
+        <Group gap={2} wrap="nowrap">
+          <IconAlertTriangle aria-hidden size={12} color="var(--mantine-color-orange-light-color)" />
+          <Text component="output" size="xs" c="var(--mantine-color-text)" style={{ whiteSpace: "nowrap" }}>
+            {compactStaleWarning}
+          </Text>
         </Group>
-      ))}
+      )}
+      {staleWarning && displayMode === "advanced" && (
+        <Alert role="presentation" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs">
+          <output>{staleWarning}</output>
+        </Alert>
+      )}
+      <ScrollArea style={{ flex: 1, minHeight: 0 }}>
+        <SimpleGrid cols={displayMode === "advanced" && width >= 760 ? 2 : 1} spacing="xs">
+          {isPending ? (
+            <Center mih={64} style={{ gridColumn: "1 / -1" }}>
+              <Text size="sm" c="dimmed">
+                {tCommon("action.loading")}
+              </Text>
+            </Center>
+          ) : entries.length > 0 ? (
+            entries.map((entry) => (
+              <DepartureRow
+                key={`${entry.timestamp.toISOString()}-${entry.location}`}
+                entry={entry}
+                dense={isDense}
+                showLine={showLine}
+                showPlatform={showPlatform}
+                locale={locale}
+              />
+            ))
+          ) : (
+            <Center mih={64} style={{ gridColumn: "1 / -1" }}>
+              <Text size="sm" c="dimmed">
+                —
+              </Text>
+            </Center>
+          )}
+        </SimpleGrid>
+      </ScrollArea>
+      {displayMode === "advanced" && timetable && (
+        <Text size="xs" c="dimmed" ta="right">
+          {formatLocalizedTime(timetable.timestamp, locale, { includeSeconds: true })}
+        </Text>
+      )}
     </Stack>
   );
 };
+
+interface TimetableEntryView {
+  timestamp: Date;
+  delay: number;
+  line: { name: string; color: string | null } | null;
+  location: string;
+  platform: { name: string; hasChanged: boolean } | null;
+}
+
+function DepartureRow({
+  entry,
+  dense,
+  showLine,
+  showPlatform,
+  locale,
+}: {
+  entry: TimetableEntryView;
+  dense: boolean;
+  showLine: boolean;
+  showPlatform: boolean;
+  locale: string;
+}) {
+  return (
+    <Group justify="space-between" w="100%" wrap="nowrap">
+      <Group gap={dense ? 6 : "sm"} wrap="nowrap" style={{ minWidth: 0 }}>
+        {showLine && entry.line && (
+          <Badge
+            size="sm"
+            color={entry.line.color ?? undefined}
+            variant={entry.line.color ? "filled" : "default"}
+            w={32}
+            p={0}
+            radius={0}
+          >
+            {entry.line.name}
+          </Badge>
+        )}
+        <Text size={dense ? "xs" : "sm"} fw={dense ? 600 : undefined} style={{ whiteSpace: "nowrap" }}>
+          {formatLocalizedTime(entry.timestamp, locale)}{" "}
+          {entry.delay >= 1 && (
+            <Text size={dense ? "xs" : "sm"} span c="red">
+              +{entry.delay}&apos;
+            </Text>
+          )}
+        </Text>
+        <Text size={dense ? "xs" : "sm"} truncate>
+          {entry.location}
+        </Text>
+      </Group>
+
+      {showPlatform && entry.platform && (
+        <Text size={dense ? "xs" : "sm"} c={entry.platform.hasChanged ? "red" : undefined} style={{ flexShrink: 0 }}>
+          {entry.platform.name}
+        </Text>
+      )}
+    </Group>
+  );
+}
diff --git a/packages/widgets/src/timetable/index.ts b/packages/widgets/src/timetable/index.ts
index cee44323c..81ec81db8 100644
--- a/packages/widgets/src/timetable/index.ts
+++ b/packages/widgets/src/timetable/index.ts
@@ -1,27 +1,44 @@
-import { IconBusStop } from "@tabler/icons-react";
+import { IconBusStop, IconWorldOff } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
 import { clientApi } from "@homarr/api/client";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("timetable", {
   icon: IconBusStop,
+  errors: {
+    BAD_REQUEST: {
+      icon: IconWorldOff,
+      message: (t) => t("widget.timetable.error.customSourceUnavailable"),
+      hideLogsLink: true,
+    },
+  },
   createOptions() {
     return optionsBuilder.from((factory) => ({
       baseUrl: factory.text({
         defaultValue: "https://search.ch",
         validate: z.string().url(),
+        withDescription: true,
       }),
       station: factory.dynamicSelect({
-        useOptions(query, _integrationIds, options) {
-          const { data: stations, isPending } = clientApi.widget.timetable.searchStations.useQuery({
+        useOptions(query, _integrationIds, options, itemId, boardId) {
+          const t = useScopedI18n("widget.timetable");
+          const {
+            data: stations,
+            error,
+            isPending,
+          } = clientApi.widget.timetable.searchStations.useQuery({
             baseUrl: typeof options.baseUrl === "string" ? options.baseUrl : "https://search.ch",
+            itemId,
+            boardId,
             query,
           });
 
           return {
+            error: error ? t("error.stationSearch") : undefined,
             isPending,
             options:
               stations?.map((station) => ({
diff --git a/packages/widgets/src/tracearr/bitrate.spec.ts b/packages/widgets/src/tracearr/bitrate.spec.ts
new file mode 100644
index 000000000..cbac63553
--- /dev/null
+++ b/packages/widgets/src/tracearr/bitrate.spec.ts
@@ -0,0 +1,18 @@
+import { describe, expect, test } from "vitest";
+
+import { formatTotalTracearrBitrate, formatTracearrBitrate } from "./bitrate";
+
+describe("Tracearr bitrate formatting", () => {
+  test("sums raw Kbps before choosing the display unit", () => {
+    expect(formatTotalTracearrBitrate([{ bitrate: 800 }, { bitrate: 1200 }])).toBe("2 Mbps");
+  });
+
+  test("formats Gbps after aggregation", () => {
+    expect(formatTotalTracearrBitrate([{ bitrate: 1_500_000 }, { bitrate: 500_000 }])).toBe("2 Gbps");
+  });
+
+  test("ignores missing and invalid bitrate values", () => {
+    expect(formatTotalTracearrBitrate([{ bitrate: null }, { bitrate: Number.NaN }, { bitrate: 500 }])).toBe("500 kbps");
+    expect(formatTracearrBitrate(0)).toBe("—");
+  });
+});
diff --git a/packages/widgets/src/tracearr/bitrate.ts b/packages/widgets/src/tracearr/bitrate.ts
new file mode 100644
index 000000000..203dcdbdc
--- /dev/null
+++ b/packages/widgets/src/tracearr/bitrate.ts
@@ -0,0 +1,20 @@
+import type { TracearrStream } from "@homarr/integrations/types";
+
+export function formatTracearrBitrate(kbps: number): string {
+  if (!Number.isFinite(kbps) || kbps <= 0) return "—";
+  if (kbps >= 1_000_000) return `${formatScaledBitrate(kbps / 1_000_000)} Gbps`;
+  if (kbps >= 1000) return `${formatScaledBitrate(kbps / 1000)} Mbps`;
+  return `${kbps} kbps`;
+}
+
+export function formatTotalTracearrBitrate(streams: readonly Pick<TracearrStream, "bitrate">[]): string {
+  const totalKbps = streams.reduce((sum, { bitrate }) => {
+    if (bitrate === null || !Number.isFinite(bitrate) || bitrate <= 0) return sum;
+    return sum + bitrate;
+  }, 0);
+  return formatTracearrBitrate(totalKbps);
+}
+
+function formatScaledBitrate(value: number): string {
+  return value % 1 === 0 ? value.toFixed(0) : value.toFixed(1);
+}
diff --git a/packages/widgets/src/tracearr/component.spec.ts b/packages/widgets/src/tracearr/component.spec.ts
new file mode 100644
index 000000000..e74b35a54
--- /dev/null
+++ b/packages/widgets/src/tracearr/component.spec.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+
+import { getAdvancedColumnWidth, getCompactSectionVisibility } from "./component";
+
+describe("Tracearr advanced layout", () => {
+  it("subtracts grid padding and the inter-column gap", () => {
+    expect(getAdvancedColumnWidth(800, true)).toBe(376);
+    expect(getAdvancedColumnWidth(801, true)).toBe(376.5);
+  });
+
+  it("subtracts only grid padding in a single-column layout", () => {
+    expect(getAdvancedColumnWidth(799, false)).toBe(767);
+  });
+});
+
+describe("Tracearr compact disclosure", () => {
+  it("keeps urgent violations visible in a short widget", () => {
+    expect(
+      getCompactSectionVisibility({
+        height: 160,
+        showStreams: true,
+        showViolations: true,
+        hasViolations: true,
+        showRecentActivity: true,
+      }),
+    ).toEqual({ violations: true, recentActivity: false });
+  });
+
+  it("reveals secondary history as height becomes available", () => {
+    expect(
+      getCompactSectionVisibility({
+        height: 400,
+        showStreams: true,
+        showViolations: true,
+        hasViolations: false,
+        showRecentActivity: true,
+      }),
+    ).toEqual({ violations: true, recentActivity: true });
+  });
+});
diff --git a/packages/widgets/src/tracearr/component.tsx b/packages/widgets/src/tracearr/component.tsx
index f3b70192a..04687c823 100644
--- a/packages/widgets/src/tracearr/component.tsx
+++ b/packages/widgets/src/tracearr/component.tsx
@@ -1,38 +1,78 @@
 "use client";
 
-import { ScrollArea, Stack, Text } from "@mantine/core";
+import { ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import type { TracearrDashboardData } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
+import { formatTotalTracearrBitrate } from "./bitrate";
 import { RecentActivityList } from "./recent-activity-section";
 import { StatsBar } from "./stats-section";
 import { StreamsList } from "./streams-section";
 import { ViolationsList } from "./violations-section";
 
-export default function TracearrWidget({ options, integrationIds, width }: WidgetComponentProps<"tracearr">) {
+const ADVANCED_GRID_BREAKPOINT = 800;
+const ADVANCED_GRID_GAP_PX = 16;
+const ADVANCED_GRID_PADDING_PX = 16;
+
+export const getCompactSectionVisibility = ({
+  height,
+  showStreams,
+  showViolations,
+  hasViolations,
+  showRecentActivity,
+}: {
+  height: number;
+  showStreams: boolean;
+  showViolations: boolean;
+  hasViolations: boolean;
+  showRecentActivity: boolean;
+}) => ({
+  violations: showViolations && (hasViolations || height >= 240 || !showStreams),
+  recentActivity: showRecentActivity && (height >= 360 || (!showStreams && (!showViolations || !hasViolations))),
+});
+
+export default function TracearrWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+  displayMode = "compact",
+}: WidgetComponentProps<"tracearr">) {
   if (integrationIds.length === 0) {
     throw new NoIntegrationDataError();
   }
 
-  return <TracearrContent integrationIds={integrationIds} options={options} width={width} />;
+  return (
+    <TracearrContent
+      integrationIds={integrationIds}
+      options={options}
+      width={width}
+      height={height}
+      displayMode={displayMode}
+    />
+  );
 }
 
 interface TracearrContentProps {
   integrationIds: string[];
   options: WidgetComponentProps<"tracearr">["options"];
   width: number;
+  height: number;
+  displayMode: "compact" | "advanced";
 }
 
-function TracearrContent({ integrationIds, options, width }: TracearrContentProps) {
+function TracearrContent({ integrationIds, options, width, height, displayMode }: TracearrContentProps) {
   const t = useScopedI18n("widget.tracearr");
-  const { data: dashboardData = [] } = clientApi.widget.tracearr.getDashboard.useQuery({ integrationIds });
+  const dashboardData =
+    getUsableWidgetQueryData(clientApi.widget.tracearr.getDashboard.useQuery({ integrationIds })) ?? [];
 
   // Merge data from all integrations
-  const combined = dashboardData.reduce<TracearrDashboardData>(
+  const combinedData = dashboardData.reduce<TracearrDashboardData>(
     (acc, item) => {
       const { stats, streams, violations, recentActivity } = item.dashboard;
       const vData = violations ?? { data: [], meta: { total: 0, page: 1, pageSize: 5 } };
@@ -53,7 +93,7 @@ function TracearrContent({ integrationIds, options, width }: TracearrContentProp
             transcodes: acc.streams.summary.transcodes + streams.summary.transcodes,
             directStreams: acc.streams.summary.directStreams + streams.summary.directStreams,
             directPlays: acc.streams.summary.directPlays + streams.summary.directPlays,
-            totalBitrate: streams.summary.totalBitrate,
+            totalBitrate: "—",
             byServer: [...acc.streams.summary.byServer, ...streams.summary.byServer],
           },
         },
@@ -85,17 +125,64 @@ function TracearrContent({ integrationIds, options, width }: TracearrContentProp
       recentActivity: null,
     },
   );
+  const combined: TracearrDashboardData = {
+    ...combinedData,
+    streams: {
+      ...combinedData.streams,
+      summary: {
+        ...combinedData.streams.summary,
+        totalBitrate: formatTotalTracearrBitrate(combinedData.streams.data),
+      },
+    },
+  };
 
   const noSectionsEnabled =
     !options.showStats && !options.showStreams && !options.showRecentActivity && !options.showViolations;
 
+  const compactLimit = height < 220 ? 2 : height < 360 ? 4 : 8;
+  const streams = displayMode === "advanced" ? combined.streams.data : combined.streams.data.slice(0, compactLimit);
+  const violations = combined.violations?.data ?? [];
+  const recentActivity = combined.recentActivity?.data ?? [];
+  const compactSections = getCompactSectionVisibility({
+    height,
+    showStreams: options.showStreams,
+    showViolations: options.showViolations,
+    hasViolations: violations.length > 0,
+    showRecentActivity: options.showRecentActivity,
+  });
+
+  if (displayMode === "advanced") {
+    const isTwoColumn = width >= ADVANCED_GRID_BREAKPOINT;
+    const columnWidth = getAdvancedColumnWidth(width, isTwoColumn);
+    return (
+      <ScrollArea h="100%">
+        <SimpleGrid
+          cols={isTwoColumn ? 2 : 1}
+          spacing={`${ADVANCED_GRID_GAP_PX}px`}
+          p={`${ADVANCED_GRID_PADDING_PX}px`}
+        >
+          <Stack gap="sm">
+            {options.showStats && (
+              <StatsBar stats={combined.stats} summary={combined.streams.summary} width={columnWidth} />
+            )}
+            {options.showStreams && <StreamsList streams={streams} width={columnWidth} />}
+          </Stack>
+          <Stack gap="sm">
+            {options.showViolations && <ViolationsList violations={violations} />}
+            {options.showRecentActivity && <RecentActivityList sessions={recentActivity} />}
+          </Stack>
+        </SimpleGrid>
+      </ScrollArea>
+    );
+  }
+
   return (
     <ScrollArea h="100%">
       <Stack gap="xs" p="xs">
         {options.showStats && <StatsBar stats={combined.stats} summary={combined.streams.summary} width={width} />}
-        {options.showStreams && <StreamsList streams={combined.streams.data} width={width} />}
-        {options.showViolations && <ViolationsList violations={combined.violations?.data ?? []} />}
-        {options.showRecentActivity && <RecentActivityList sessions={combined.recentActivity?.data ?? []} />}
+        {compactSections.violations && <ViolationsList violations={violations.slice(0, compactLimit)} />}
+        {options.showStreams && <StreamsList streams={streams} width={width} />}
+        {compactSections.recentActivity && <RecentActivityList sessions={recentActivity.slice(0, compactLimit)} />}
         {noSectionsEnabled && (
           <Text c="dimmed" ta="center">
             {t("noSectionsEnabled")}
@@ -105,3 +192,8 @@ function TracearrContent({ integrationIds, options, width }: TracearrContentProp
     </ScrollArea>
   );
 }
+
+export const getAdvancedColumnWidth = (width: number, isTwoColumn: boolean) => {
+  const contentWidth = Math.max(0, width - ADVANCED_GRID_PADDING_PX * 2);
+  return isTwoColumn ? Math.max(0, (contentWidth - ADVANCED_GRID_GAP_PX) / 2) : contentWidth;
+};
diff --git a/packages/widgets/src/tracearr/recent-activity-section.tsx b/packages/widgets/src/tracearr/recent-activity-section.tsx
index e078fd6f2..994ff89a2 100644
--- a/packages/widgets/src/tracearr/recent-activity-section.tsx
+++ b/packages/widgets/src/tracearr/recent-activity-section.tsx
@@ -1,14 +1,15 @@
 import { Avatar, Badge, Group, Paper, Stack, Text } from "@mantine/core";
 
 import type { TracearrHistorySession } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 export function RecentActivityList({ sessions }: { sessions: TracearrHistorySession[] }) {
   const t = useScopedI18n("widget.tracearr");
+  const locale = useCurrentIntlLocale();
 
   return (
     <Stack gap={4}>
-      <Text size="xs" fw={600} c="dimmed" tt="uppercase">
+      <Text size="xs" fw={600} c="dimmed">
         {t("recentActivity.title")}
       </Text>
       {sessions.length === 0 ? (
@@ -42,7 +43,7 @@ export function RecentActivityList({ sessions }: { sessions: TracearrHistorySess
                       {session.watched ? t("recentActivity.watched") : t("recentActivity.partial")}
                     </Badge>
                     <Text size="xs" c="dimmed" lineClamp={1}>
-                      {new Date(session.startedAt).toLocaleDateString()}
+                      {new Date(session.startedAt).toLocaleDateString(locale)}
                     </Text>
                   </Stack>
                 </Group>
diff --git a/packages/widgets/src/tracearr/violations-section.tsx b/packages/widgets/src/tracearr/violations-section.tsx
index 2ce675ed8..5c96a5c83 100644
--- a/packages/widgets/src/tracearr/violations-section.tsx
+++ b/packages/widgets/src/tracearr/violations-section.tsx
@@ -2,14 +2,15 @@ import { Avatar, Badge, Group, Paper, Stack, Text } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
 
 import type { TracearrViolation } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 export function ViolationsList({ violations }: { violations: TracearrViolation[] }) {
   const t = useScopedI18n("widget.tracearr");
+  const locale = useCurrentIntlLocale();
 
   return (
     <Stack gap={4}>
-      <Text size="xs" fw={600} c="dimmed" tt="uppercase">
+      <Text size="xs" fw={600} c="dimmed">
         {t("violations.title")}
       </Text>
       {violations.length === 0 ? (
@@ -53,7 +54,7 @@ export function ViolationsList({ violations }: { violations: TracearrViolation[]
                     {violation.severity}
                   </Badge>
                   <Text size="xs" c="dimmed" lineClamp={1}>
-                    {new Date(violation.createdAt).toLocaleDateString()}
+                    {new Date(violation.createdAt).toLocaleDateString(locale)}
                   </Text>
                 </Stack>
               </Group>
diff --git a/packages/widgets/src/traefik/component.tsx b/packages/widgets/src/traefik/component.tsx
index 69ec3e811..5af263385 100644
--- a/packages/widgets/src/traefik/component.tsx
+++ b/packages/widgets/src/traefik/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { Badge, Group, ScrollArea, Text } from "@mantine/core";
+import { Badge, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 import {
   IconAlertTriangle,
   IconCircleCheck,
@@ -17,6 +17,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
 import classes from "./component.module.css";
 
@@ -36,6 +37,8 @@ const emptyProtocol: TraefikProtocolSummary = {
 const emptyDashboard: TraefikDashboardData = {
   version: null,
   entryPoints: [],
+  resources: [],
+  failedEndpoints: [],
   http: emptyProtocol,
   tcp: emptyProtocol,
   udp: {
@@ -47,13 +50,23 @@ const emptyDashboard: TraefikDashboardData = {
 type ProtocolKey = "http" | "tcp" | "udp";
 type ResourceKey = "routers" | "services" | "middlewares";
 
-export default function TraefikWidget({ integrationIds, options, width }: WidgetComponentProps<"traefik">) {
-  if (integrationIds.length === 0) {
+export default function TraefikWidget(props: WidgetComponentProps<"traefik">) {
+  if (props.integrationIds.length === 0) {
     throw new NoIntegrationDataError();
   }
 
+  return <TraefikWidgetContent {...props} />;
+}
+
+function TraefikWidgetContent({
+  integrationIds,
+  options,
+  width,
+  height,
+  displayMode = "compact",
+}: WidgetComponentProps<"traefik">) {
   const t = useScopedI18n("widget.traefik");
-  const { data } = clientApi.widget.traefik.getDashboard.useQuery({ integrationIds });
+  const data = getUsableWidgetQueryData(clientApi.widget.traefik.getDashboard.useQuery({ integrationIds }));
 
   if (!data) return <WidgetEmptyState />;
 
@@ -61,6 +74,8 @@ export default function TraefikWidget({ integrationIds, options, width }: Widget
     (acc, item) => ({
       version: acc.version ?? item.dashboard.version,
       entryPoints: [...acc.entryPoints, ...item.dashboard.entryPoints],
+      resources: [...acc.resources, ...item.dashboard.resources],
+      failedEndpoints: [...acc.failedEndpoints, ...item.dashboard.failedEndpoints],
       http: combineProtocol(acc.http, item.dashboard.http),
       tcp: combineProtocol(acc.tcp, item.dashboard.tcp),
       udp: {
@@ -72,59 +87,127 @@ export default function TraefikWidget({ integrationIds, options, width }: Widget
   );
 
   const totalRouters = combined.http.routers.total + combined.tcp.routers.total + combined.udp.routers.total;
-  const totalErrors = getProtocolErrors(combined.http) + getProtocolErrors(combined.tcp) + getUdpErrors(combined.udp);
+  const totalErrors =
+    getProtocolErrors(combined.http) +
+    getProtocolErrors(combined.tcp) +
+    getUdpErrors(combined.udp) +
+    combined.failedEndpoints.length;
   const totalWarnings =
     getProtocolWarnings(combined.http) + getProtocolWarnings(combined.tcp) + getUdpWarnings(combined.udp);
   const protocolKeys: ProtocolKey[] = ["http"];
-  if (options.showTcp) protocolKeys.push("tcp");
-  if (options.showUdp) protocolKeys.push("udp");
+  if (options.showTcp && (displayMode === "advanced" || height >= 220)) protocolKeys.push("tcp");
+  if (options.showUdp && (displayMode === "advanced" || height >= 300)) protocolKeys.push("udp");
+
+  const summary = (
+    <div className={classes.root}>
+      <Group justify="space-between" gap="xs" wrap="nowrap">
+        <div className={classes.titleBlock}>
+          <Text className={classes.title}>{data.length === 1 ? data[0]?.integrationName : t("instances")}</Text>
+          <Text className={classes.subtitle}>{combined.version ? `v${combined.version}` : t("versionUnknown")}</Text>
+        </div>
+        <HealthBadge errors={totalErrors} warnings={totalWarnings} />
+      </Group>
+
+      <div className={classes.hero}>
+        <SummaryMetric
+          icon={<IconRoute size={getHeroIconSize(width)} />}
+          label={t("summary.routers")}
+          value={totalRouters}
+        />
+        <SummaryMetric
+          icon={<IconDoorEnter size={getHeroIconSize(width)} />}
+          label={t("summary.entryPoints")}
+          value={dedupe(combined.entryPoints).length}
+        />
+      </div>
+
+      <div className={classes.protocolGrid}>
+        {protocolKeys.map((protocol) => (
+          <ProtocolCard key={protocol} protocol={protocol} data={combined[protocol]} />
+        ))}
+      </div>
+
+      {options.showEntryPoints && combined.entryPoints.length > 0 && (displayMode === "advanced" || height >= 340) && (
+        <div className={classes.entryPoints}>
+          {dedupe(combined.entryPoints)
+            .slice(0, getEntryPointLimit(width))
+            .map((entryPoint) => (
+              <Badge key={entryPoint} variant="light" size="sm" radius="sm">
+                {entryPoint}
+              </Badge>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+
+  if (displayMode === "compact") return <ScrollArea h="100%">{summary}</ScrollArea>;
+
+  const resources = [...combined.resources].toSorted(
+    (left, right) =>
+      resourceStatusOrder[left.status] - resourceStatusOrder[right.status] || left.name.localeCompare(right.name),
+  );
+  const resourceList = (
+    <Stack gap="xs">
+      {combined.failedEndpoints.map((endpoint) => (
+        <Badge key={endpoint} color="red" variant="light">
+          {t("failedEndpoint", { endpoint })}
+        </Badge>
+      ))}
+      {resources.map((resource, index) => (
+        <Group
+          key={`${resource.protocol}:${resource.type}:${resource.name}:${index}`}
+          justify="space-between"
+          wrap="nowrap"
+          p="xs"
+        >
+          <Stack gap={0} style={{ minWidth: 0 }}>
+            <Text size="sm" fw={600} truncate>
+              {resource.name}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {resource.protocol.toUpperCase()} · {t(`resourceType.${resource.type}`)} · {resource.provider ?? "—"}
+            </Text>
+          </Stack>
+          <Badge
+            color={
+              resource.status === "error"
+                ? "red"
+                : resource.status === "warning"
+                  ? "yellow"
+                  : resource.status === "enabled"
+                    ? "green"
+                    : "gray"
+            }
+          >
+            {t(`resourceStatus.${resource.status}`)}
+          </Badge>
+        </Group>
+      ))}
+    </Stack>
+  );
+
+  if (width < 900) {
+    return (
+      <ScrollArea h="100%">
+        <Stack gap="md" p="md">
+          {summary}
+          {resourceList}
+        </Stack>
+      </ScrollArea>
+    );
+  }
 
   return (
-    <ScrollArea h="100%">
-      <div className={classes.root}>
-        <Group justify="space-between" gap="xs" wrap="nowrap">
-          <div className={classes.titleBlock}>
-            <Text className={classes.title}>{data.length === 1 ? data[0]?.integrationName : t("instances")}</Text>
-            <Text className={classes.subtitle}>{combined.version ? `v${combined.version}` : t("versionUnknown")}</Text>
-          </div>
-          <HealthBadge errors={totalErrors} warnings={totalWarnings} />
-        </Group>
-
-        <div className={classes.hero}>
-          <SummaryMetric
-            icon={<IconRoute size={getHeroIconSize(width)} />}
-            label={t("summary.routers")}
-            value={totalRouters}
-          />
-          <SummaryMetric
-            icon={<IconDoorEnter size={getHeroIconSize(width)} />}
-            label={t("summary.entryPoints")}
-            value={dedupe(combined.entryPoints).length}
-          />
-        </div>
-
-        <div className={classes.protocolGrid}>
-          {protocolKeys.map((protocol) => (
-            <ProtocolCard key={protocol} protocol={protocol} data={combined[protocol]} />
-          ))}
-        </div>
-
-        {options.showEntryPoints && combined.entryPoints.length > 0 && (
-          <div className={classes.entryPoints}>
-            {dedupe(combined.entryPoints)
-              .slice(0, getEntryPointLimit(width))
-              .map((entryPoint) => (
-                <Badge key={entryPoint} variant="light" size="sm" radius="sm">
-                  {entryPoint}
-                </Badge>
-              ))}
-          </div>
-        )}
-      </div>
-    </ScrollArea>
+    <SimpleGrid cols={2} spacing="md" h="100%" p="md" style={{ gridTemplateRows: "minmax(0, 1fr)" }}>
+      <ScrollArea h="100%">{summary}</ScrollArea>
+      <ScrollArea h="100%">{resourceList}</ScrollArea>
+    </SimpleGrid>
   );
 }
 
+const resourceStatusOrder = { error: 0, warning: 1, disabled: 2, unknown: 3, enabled: 4 } as const;
+
 function ProtocolCard({ protocol, data }: { protocol: ProtocolKey; data: TraefikDashboardData[ProtocolKey] }) {
   const t = useScopedI18n("widget.traefik");
   const rows: { key: ResourceKey; icon: typeof IconRoute; summary: TraefikResourceSummary }[] = [
diff --git a/packages/widgets/src/trpc-query-key.spec.ts b/packages/widgets/src/trpc-query-key.spec.ts
new file mode 100644
index 000000000..e411f8272
--- /dev/null
+++ b/packages/widgets/src/trpc-query-key.spec.ts
@@ -0,0 +1,12 @@
+import { describe, expect, test } from "vitest";
+
+import { createTrpcQueryKey } from "./trpc-query-key";
+
+describe("createTrpcQueryKey", () => {
+  test("matches the tRPC TanStack query key shape", () => {
+    expect(createTrpcQueryKey("widget.downloads.getJobsAndStatuses", { integrationIds: ["one"], limit: 50 })).toEqual([
+      ["widget", "downloads", "getJobsAndStatuses"],
+      { input: { integrationIds: ["one"], limit: 50 }, type: "query" },
+    ]);
+  });
+});
diff --git a/packages/widgets/src/trpc-query-key.ts b/packages/widgets/src/trpc-query-key.ts
new file mode 100644
index 000000000..51ea030dd
--- /dev/null
+++ b/packages/widgets/src/trpc-query-key.ts
@@ -0,0 +1,4 @@
+export const createTrpcQueryKey = <TInput>(path: string, input: TInput) => [
+  path.split("."),
+  { input, type: "query" as const },
+];
diff --git a/packages/widgets/src/umami/component.tsx b/packages/widgets/src/umami/component.tsx
index 2aec3b46e..e4fbbe52e 100644
--- a/packages/widgets/src/umami/component.tsx
+++ b/packages/widgets/src/umami/component.tsx
@@ -1,16 +1,75 @@
 "use client";
 
 import { Stack, Text } from "@mantine/core";
+import { getQueryKey } from "@trpc/react-query";
 
+import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { useWidgetRuntimeQueries } from "../runtime-hooks";
 import { UmamiContent } from "./umami-content";
 
-export default function UmamiWidget({ options, integrationIds }: WidgetComponentProps<"umami">) {
-  if (!options.websiteId || options.websiteId.trim() === "") {
-    return <NoWebsiteConfigured />;
-  }
+export default function UmamiWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+  displayMode = "compact",
+  widgetRuntimeRef,
+}: WidgetComponentProps<"umami">) {
+  const integrationId = integrationIds[0] ?? "";
+  const commonTopInput = {
+    integrationId,
+    websiteId: options.websiteId,
+    timeFrame: options.timeFrame,
+    limit: options.topCount,
+  };
+  const hasWebsite = Boolean(options.websiteId?.trim());
+  useWidgetRuntimeQueries(
+    widgetRuntimeRef,
+    hasWebsite
+      ? [
+          getQueryKey(
+            clientApi.widget.umami.getVisitorStats,
+            {
+              integrationIds,
+              websiteId: options.websiteId,
+              timeFrame: options.timeFrame,
+              eventName: options.eventName || undefined,
+            },
+            "query",
+          ),
+          getQueryKey(
+            clientApi.widget.umami.getActiveVisitors,
+            { integrationId, websiteId: options.websiteId },
+            "query",
+          ),
+          ...(options.viewMode === "events" && options.eventNames.length > 0
+            ? [
+                getQueryKey(
+                  clientApi.widget.umami.getMultiEventTimeSeries,
+                  {
+                    integrationId,
+                    websiteId: options.websiteId,
+                    timeFrame: options.timeFrame,
+                    eventNames: [...options.eventNames].toSorted(),
+                  },
+                  "query",
+                ),
+              ]
+            : []),
+          ...(displayMode === "advanced" || options.viewMode === "topPages"
+            ? [getQueryKey(clientApi.widget.umami.getTopPages, commonTopInput, "query")]
+            : []),
+          ...(displayMode === "advanced" || options.viewMode === "topReferrers"
+            ? [getQueryKey(clientApi.widget.umami.getTopReferrers, commonTopInput, "query")]
+            : []),
+        ]
+      : [],
+  );
+
+  if (!hasWebsite) return <NoWebsiteConfigured />;
 
   return (
     <UmamiContent
@@ -23,6 +82,9 @@ export default function UmamiWidget({ options, integrationIds }: WidgetComponent
       chartType={options.chartType}
       viewMode={options.viewMode}
       topCount={options.topCount}
+      width={width}
+      height={height}
+      displayMode={displayMode}
     />
   );
 }
diff --git a/packages/widgets/src/umami/index.ts b/packages/widgets/src/umami/index.ts
index badbef369..423eebebe 100644
--- a/packages/widgets/src/umami/index.ts
+++ b/packages/widgets/src/umami/index.ts
@@ -1,15 +1,25 @@
 import { IconChartBar, IconServerOff } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const timeFrameValues = ["today", "24h", "7d", "30d", "month", "lastMonth"] as const;
 
 export const { definition, componentLoader } = createWidgetDefinition("umami", {
   icon: IconChartBar,
+  queryKeys: [
+    [["widget", "umami", "getVisitorStats"]],
+    [["widget", "umami", "getActiveVisitors"]],
+    [["widget", "umami", "getMultiEventTimeSeries"]],
+    [["widget", "umami", "getTopPages"]],
+    [["widget", "umami", "getTopReferrers"]],
+  ],
+  queryMatcher: matchesWidgetRuntimeQuery,
   refetchInterval: null,
   supportedIntegrations: ["umami"],
+  integrationsRequired: true,
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from(
       (factory) => ({
diff --git a/packages/widgets/src/umami/umami-content.tsx b/packages/widgets/src/umami/umami-content.tsx
index 2a187c3d5..d88e3beca 100644
--- a/packages/widgets/src/umami/umami-content.tsx
+++ b/packages/widgets/src/umami/umami-content.tsx
@@ -1,17 +1,20 @@
 "use client";
 
 import { BarChart, LineChart } from "@mantine/charts";
-import { Box, Group, Stack, Text, useMantineColorScheme } from "@mantine/core";
+import { Box, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { formatDuration } from "@homarr/common";
 import type { UmamiVisitorStats } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { UmamiEventsContent } from "./umami-events-content";
+import { getUmamiLayout } from "./umami-layout";
 import { UmamiTopPagesContent, UmamiTopReferrersContent } from "./umami-top-list";
 import { formatTimeFrameLabel, formatXLabel, umamiQueryOptions } from "./umami-utils";
 import type { TimeFrame } from "./umami-utils";
+import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "../common/query-state";
+import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "../common/query-state-indicator";
 
 interface UmamiContentProps {
   integrationIds: string[];
@@ -23,6 +26,9 @@ interface UmamiContentProps {
   chartType: string;
   viewMode: string;
   topCount: number;
+  width: number;
+  height: number;
+  displayMode: "compact" | "advanced";
 }
 
 export function UmamiContent({
@@ -35,32 +41,36 @@ export function UmamiContent({
   chartType,
   viewMode,
   topCount,
+  width,
+  height,
+  displayMode,
 }: UmamiContentProps) {
   const t = useScopedI18n("widget.umami");
-  const { colorScheme } = useMantineColorScheme();
-  const tickColor = colorScheme === "dark" ? "#c1c2c5" : "#495057";
+  const locale = useCurrentIntlLocale();
+  const tickColor = "var(--mantine-color-dimmed)";
 
-  const { data: results = [] } = clientApi.widget.umami.getVisitorStats.useQuery(
+  const statsQuery = clientApi.widget.umami.getVisitorStats.useQuery(
     { integrationIds, websiteId, timeFrame, eventName },
     umamiQueryOptions,
   );
+  const results = getUsableWidgetQueryData(statsQuery);
 
   const activeVisitorsInput = { integrationId: integrationIds[0] ?? "", websiteId };
-  const { data: activeVisitors = 0 } = clientApi.widget.umami.getActiveVisitors.useQuery(
-    activeVisitorsInput,
-    umamiQueryOptions,
-  );
+  const activeVisitorsQuery = clientApi.widget.umami.getActiveVisitors.useQuery(activeVisitorsInput, umamiQueryOptions);
+  const activeVisitors = activeVisitorsQuery.data;
 
-  const { data: multiEventSeries } = clientApi.widget.umami.getMultiEventTimeSeries.useQuery(
+  const multiEventQuery = clientApi.widget.umami.getMultiEventTimeSeries.useQuery(
     { integrationId: integrationIds[0] ?? "", websiteId, timeFrame, eventNames: [...eventNames].toSorted() },
     { enabled: viewMode === "events" && eventNames.length > 0, ...umamiQueryOptions },
   );
+  const multiEventSeries = multiEventQuery.data;
 
   const multiEventTotal = multiEventSeries
     ? multiEventSeries.flatMap(({ dataPoints }) => dataPoints).reduce((sum, { y }) => sum + y, 0)
     : undefined;
 
-  const firstResult = results[0];
+  const firstResult = results?.[0];
+  if (isInitialWidgetQueryPending(statsQuery)) return <WidgetQueryLoadingState />;
   if (!firstResult) {
     return (
       <Stack align="center" justify="center" h="100%">
@@ -74,7 +84,7 @@ export function UmamiContent({
   const { visitorStats } = firstResult;
 
   const chartData = visitorStats.dataPoints.map((point: UmamiVisitorStats["dataPoints"][number]) => ({
-    label: formatXLabel(point.timestamp, timeFrame),
+    label: formatXLabel(point.timestamp, timeFrame, locale),
     visitors: point.visitors,
     ...(point.events !== undefined ? { events: point.events } : {}),
   }));
@@ -87,9 +97,109 @@ export function UmamiContent({
 
   const isOverlay = chartStyle === "overlay" && hasEventSeries;
   const overlayBarSize = 16;
+  const { isDense, showXAxis, showSecondaryStats, showDetailedStats, stackAdvancedContent } = getUmamiLayout({
+    width,
+    height,
+    displayMode,
+  });
+
+  const selectedView =
+    viewMode === "events" ? (
+      <UmamiEventsContent
+        integrationIds={integrationIds}
+        websiteId={websiteId}
+        timeFrame={timeFrame}
+        eventNames={eventNames}
+        chartType={chartType}
+        showXAxis={showXAxis}
+      />
+    ) : viewMode === "topPages" ? (
+      <UmamiTopPagesContent
+        integrationIds={integrationIds}
+        websiteId={websiteId}
+        timeFrame={timeFrame}
+        limit={topCount}
+      />
+    ) : viewMode === "topReferrers" ? (
+      <UmamiTopReferrersContent
+        integrationIds={integrationIds}
+        websiteId={websiteId}
+        timeFrame={timeFrame}
+        limit={topCount}
+      />
+    ) : chartType === "sparkline" ? (
+      <LineChart
+        h="100%"
+        data={chartData}
+        dataKey="label"
+        series={series}
+        withDots={false}
+        curveType="monotone"
+        tickLine="none"
+        gridAxis="none"
+        withLegend={false}
+        withTooltip
+        withXAxis={showXAxis}
+        withYAxis={false}
+        xAxisProps={{ tick: { fontSize: 9, fill: tickColor }, interval: "preserveStartEnd" }}
+      />
+    ) : (
+      <BarChart
+        h="100%"
+        data={chartData}
+        dataKey="label"
+        series={series}
+        tickLine="none"
+        gridAxis="none"
+        withLegend={false}
+        withTooltip
+        withXAxis={showXAxis}
+        withYAxis={false}
+        barProps={isOverlay ? { barSize: overlayBarSize, radius: 2 } : { radius: 2 }}
+        barChartProps={isOverlay ? { barGap: -overlayBarSize } : undefined}
+        xAxisProps={{ tick: { fontSize: 9, fill: tickColor }, interval: "preserveStartEnd" }}
+      />
+    );
+
+  const advancedLists = (
+    <SimpleGrid cols={viewMode === "topPages" || viewMode === "topReferrers" ? 1 : 2} spacing="md" mih={260}>
+      {viewMode !== "topPages" && (
+        <UmamiTopPagesContent
+          integrationIds={integrationIds}
+          websiteId={websiteId}
+          timeFrame={timeFrame}
+          limit={topCount}
+        />
+      )}
+      {viewMode !== "topReferrers" && (
+        <UmamiTopReferrersContent
+          integrationIds={integrationIds}
+          websiteId={websiteId}
+          timeFrame={timeFrame}
+          limit={topCount}
+        />
+      )}
+    </SimpleGrid>
+  );
+
+  const advancedContent = stackAdvancedContent ? (
+    <ScrollArea h="100%">
+      <Stack gap="md">
+        <Box h={Math.max(280, Math.min(420, height - 160))}>{selectedView}</Box>
+        {advancedLists}
+      </Stack>
+    </ScrollArea>
+  ) : (
+    <SimpleGrid cols={2} spacing="md" h="100%" style={{ gridTemplateRows: "minmax(0, 1fr)" }}>
+      <Box h="100%" mih={260}>
+        {selectedView}
+      </Box>
+      <ScrollArea h="100%">{advancedLists}</ScrollArea>
+    </SimpleGrid>
+  );
 
   return (
-    <Stack gap={4} p="xs" h="100%">
+    <Stack gap={isDense ? 2 : 4} p={isDense ? 4 : "xs"} h="100%" pos="relative">
       <Group justify="space-between" align="baseline" wrap="nowrap">
         <Text size="xs" c="dimmed" truncate="end" style={{ maxWidth: "55%" }}>
           {visitorStats.domain} ({formatTimeFrameLabel(timeFrame, t)})
@@ -100,8 +210,8 @@ export function UmamiContent({
             <Group gap={4} align="baseline">
               <Text size="lg" fw={700} lh={1}>
                 {viewMode === "events"
-                  ? (multiEventTotal ?? 0).toLocaleString()
-                  : (visitorStats.eventCount ?? 0).toLocaleString()}
+                  ? (multiEventTotal ?? 0).toLocaleString(locale)
+                  : (visitorStats.eventCount ?? 0).toLocaleString(locale)}
               </Text>
               <Text size="xs" c="dimmed">
                 {t("event.label")}
@@ -112,7 +222,7 @@ export function UmamiContent({
             </Text>
             <Group gap={4} align="baseline">
               <Text size="lg" fw={700} lh={1}>
-                {visitorStats.totalVisitors.toLocaleString()}
+                {visitorStats.totalVisitors.toLocaleString(locale)}
               </Text>
               <Text size="xs" c="dimmed">
                 {t("visitors")}
@@ -122,7 +232,7 @@ export function UmamiContent({
         ) : (
           <Group gap={4} align="baseline">
             <Text size="xl" fw={700} lh={1}>
-              {visitorStats.totalVisitors.toLocaleString()}
+              {visitorStats.totalVisitors.toLocaleString(locale)}
             </Text>
             <Text size="xs" c="dimmed">
               {t("visitors")}
@@ -130,86 +240,42 @@ export function UmamiContent({
           </Group>
         )}
       </Group>
-      <Group wrap="wrap" style={{ columnGap: 12, rowGap: 4 }}>
-        <Text size="xs" c="green">
-          ● {activeVisitors.toLocaleString()} {t("active")}
-        </Text>
-        <Text size="xs" c="dimmed">
-          {visitorStats.totalPageviews.toLocaleString()} {t("pageviews")}
-        </Text>
-        <Text size="xs" c="dimmed">
-          {visitorStats.totalVisits.toLocaleString()} {t("visits")}
-        </Text>
-        <Text size="xs" c="dimmed">
-          {visitorStats.bounceRate}% {t("bounceRate")}
-        </Text>
-        <Text size="xs" c="dimmed">
-          {formatDuration(visitorStats.avgDuration * 1000)} {t("avgDuration")}
-        </Text>
-      </Group>
+      {showSecondaryStats && (
+        <Group wrap="wrap" style={{ columnGap: 12, rowGap: 4 }}>
+          {activeVisitors !== undefined && (
+            <Text size="xs" c="green">
+              ● {activeVisitors.toLocaleString(locale)} {t("active")}
+            </Text>
+          )}
+          <Text size="xs" c="dimmed">
+            {visitorStats.totalPageviews.toLocaleString(locale)} {t("pageviews")}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {visitorStats.totalVisits.toLocaleString(locale)} {t("visits")}
+          </Text>
+          {showDetailedStats && (
+            <>
+              <Text size="xs" c="dimmed">
+                {visitorStats.bounceRate.toLocaleString(locale)}% {t("bounceRate")}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {formatDuration(visitorStats.avgDuration * 1000)} {t("avgDuration")}
+              </Text>
+            </>
+          )}
+        </Group>
+      )}
       <Box mt={4} style={{ flex: 1, minHeight: 0 }}>
-        {viewMode === "events" ? (
-          <UmamiEventsContent
-            integrationIds={integrationIds}
-            websiteId={websiteId}
-            timeFrame={timeFrame}
-            eventNames={eventNames}
-            chartType={chartType}
-          />
-        ) : viewMode === "topPages" ? (
-          <UmamiTopPagesContent
-            integrationIds={integrationIds}
-            websiteId={websiteId}
-            timeFrame={timeFrame}
-            limit={topCount}
-          />
-        ) : viewMode === "topReferrers" ? (
-          <UmamiTopReferrersContent
-            integrationIds={integrationIds}
-            websiteId={websiteId}
-            timeFrame={timeFrame}
-            limit={topCount}
-          />
-        ) : chartType === "sparkline" ? (
-          <LineChart
-            h="100%"
-            data={chartData}
-            dataKey="label"
-            series={series}
-            withDots={false}
-            curveType="monotone"
-            tickLine="none"
-            gridAxis="none"
-            withLegend={false}
-            withTooltip
-            withXAxis
-            withYAxis={false}
-            xAxisProps={{
-              tick: { fontSize: 9, fill: tickColor },
-              interval: "preserveStartEnd",
-            }}
-          />
-        ) : (
-          <BarChart
-            h="100%"
-            data={chartData}
-            dataKey="label"
-            series={series}
-            tickLine="none"
-            gridAxis="none"
-            withLegend={false}
-            withTooltip
-            withXAxis
-            withYAxis={false}
-            barProps={isOverlay ? { barSize: overlayBarSize, radius: 2 } : { radius: 2 }}
-            barChartProps={isOverlay ? { barGap: -overlayBarSize } : undefined}
-            xAxisProps={{
-              tick: { fontSize: 9, fill: tickColor },
-              interval: "preserveStartEnd",
-            }}
-          />
-        )}
+        {displayMode === "advanced" ? advancedContent : selectedView}
       </Box>
+      {(statsQuery.error || activeVisitorsQuery.error || multiEventQuery.error) && (
+        <Box pos="absolute" top={4} right={4}>
+          <WidgetQueryErrorIndicator
+            error={statsQuery.error ?? activeVisitorsQuery.error ?? multiEventQuery.error}
+            label={t("name")}
+          />
+        </Box>
+      )}
     </Stack>
   );
 }
diff --git a/packages/widgets/src/umami/umami-events-content.tsx b/packages/widgets/src/umami/umami-events-content.tsx
index ef91df422..752d5f33b 100644
--- a/packages/widgets/src/umami/umami-events-content.tsx
+++ b/packages/widgets/src/umami/umami-events-content.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import { BarChart, LineChart } from "@mantine/charts";
-import { Box, Group, Stack, Text, useMantineColorScheme } from "@mantine/core";
+import { Box, Group, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import type { UmamiEventSeries } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { EVENT_COLORS, formatXLabel, umamiQueryOptions } from "./umami-utils";
+import { getUsableWidgetQueryData } from "../common/query-state";
 
 interface UmamiEventsContentProps {
   integrationIds: string[];
@@ -15,6 +16,7 @@ interface UmamiEventsContentProps {
   timeFrame: string;
   eventNames: string[];
   chartType: string;
+  showXAxis: boolean;
 }
 
 export function UmamiEventsContent({
@@ -23,15 +25,19 @@ export function UmamiEventsContent({
   timeFrame,
   eventNames,
   chartType,
+  showXAxis,
 }: UmamiEventsContentProps) {
   const t = useScopedI18n("widget.umami");
-  const { colorScheme } = useMantineColorScheme();
-  const tickColor = colorScheme === "dark" ? "#c1c2c5" : "#495057";
+  const locale = useCurrentIntlLocale();
+  const tickColor = "var(--mantine-color-dimmed)";
 
-  const { data: series = [] } = clientApi.widget.umami.getMultiEventTimeSeries.useQuery(
-    { integrationId: integrationIds[0] ?? "", websiteId, timeFrame, eventNames: [...eventNames].toSorted() },
-    umamiQueryOptions,
-  );
+  const series =
+    getUsableWidgetQueryData(
+      clientApi.widget.umami.getMultiEventTimeSeries.useQuery(
+        { integrationId: integrationIds[0] ?? "", websiteId, timeFrame, eventNames: [...eventNames].toSorted() },
+        umamiQueryOptions,
+      ),
+    ) ?? [];
 
   if (eventNames.length === 0) {
     return (
@@ -57,7 +63,7 @@ export function UmamiEventsContent({
   );
 
   const chartData = allTimestamps.map((timestamp) => {
-    const row: Record<string, string | number> = { label: formatXLabel(timestamp, timeFrame) };
+    const row: Record<string, string | number> = { label: formatXLabel(timestamp, timeFrame, locale) };
     for (const serie of series) {
       row[serie.eventName] = byEvent.get(serie.eventName)?.get(timestamp) ?? 0;
     }
@@ -104,7 +110,7 @@ export function UmamiEventsContent({
             gridAxis="none"
             withLegend={false}
             withTooltip
-            withXAxis
+            withXAxis={showXAxis}
             withYAxis={false}
             xAxisProps={{
               tick: { fontSize: 9, fill: tickColor },
@@ -121,7 +127,7 @@ export function UmamiEventsContent({
             gridAxis="none"
             withLegend={false}
             withTooltip
-            withXAxis
+            withXAxis={showXAxis}
             withYAxis={false}
             barProps={{ radius: 2 }}
             xAxisProps={{
diff --git a/packages/widgets/src/umami/umami-layout.spec.ts b/packages/widgets/src/umami/umami-layout.spec.ts
new file mode 100644
index 000000000..b03f5af51
--- /dev/null
+++ b/packages/widgets/src/umami/umami-layout.spec.ts
@@ -0,0 +1,30 @@
+import { describe, expect, test } from "vitest";
+
+import { getUmamiLayout } from "./umami-layout";
+
+describe("Umami layout", () => {
+  test.each([
+    { width: 260, height: 119, property: "isDense" as const, expected: true },
+    { width: 260, height: 120, property: "isDense" as const, expected: false },
+    { width: 260, height: 139, property: "showXAxis" as const, expected: false },
+    { width: 260, height: 140, property: "showXAxis" as const, expected: true },
+    { width: 260, height: 95, property: "showSecondaryStats" as const, expected: false },
+    { width: 260, height: 96, property: "showSecondaryStats" as const, expected: true },
+    { width: 259, height: 150, property: "showDetailedStats" as const, expected: false },
+    { width: 260, height: 149, property: "showDetailedStats" as const, expected: false },
+    { width: 260, height: 150, property: "showDetailedStats" as const, expected: true },
+  ])("sets $property to $expected at $width x $height", ({ width, height, property, expected }) => {
+    expect(getUmamiLayout({ width, height, displayMode: "compact" })[property]).toBe(expected);
+  });
+
+  test("keeps advanced details visible and changes columns at 900px", () => {
+    expect(getUmamiLayout({ width: 899, height: 80, displayMode: "advanced" })).toEqual({
+      isDense: false,
+      showXAxis: true,
+      showSecondaryStats: true,
+      showDetailedStats: true,
+      stackAdvancedContent: true,
+    });
+    expect(getUmamiLayout({ width: 900, height: 80, displayMode: "advanced" }).stackAdvancedContent).toBe(false);
+  });
+});
diff --git a/packages/widgets/src/umami/umami-layout.ts b/packages/widgets/src/umami/umami-layout.ts
new file mode 100644
index 000000000..05f02140f
--- /dev/null
+++ b/packages/widgets/src/umami/umami-layout.ts
@@ -0,0 +1,16 @@
+interface UmamiLayoutInput {
+  width: number;
+  height: number;
+  displayMode: "compact" | "advanced";
+}
+
+export const getUmamiLayout = ({ width, height, displayMode }: UmamiLayoutInput) => {
+  const isAdvanced = displayMode === "advanced";
+  return {
+    isDense: !isAdvanced && height < 120,
+    showXAxis: isAdvanced || height >= 140,
+    showSecondaryStats: isAdvanced || height >= 96,
+    showDetailedStats: isAdvanced || (width >= 260 && height >= 150),
+    stackAdvancedContent: isAdvanced && width < 900,
+  };
+};
diff --git a/packages/widgets/src/umami/umami-top-list.tsx b/packages/widgets/src/umami/umami-top-list.tsx
index 3ce4b8730..7824602c4 100644
--- a/packages/widgets/src/umami/umami-top-list.tsx
+++ b/packages/widgets/src/umami/umami-top-list.tsx
@@ -4,9 +4,10 @@ import { Group, ScrollArea, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import type { UmamiMetricItem } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { umamiQueryOptions } from "./umami-utils";
+import { getUsableWidgetQueryData } from "../common/query-state";
 
 interface UmamiTopListProps {
   integrationIds: string[];
@@ -17,19 +18,25 @@ interface UmamiTopListProps {
 
 export function UmamiTopPagesContent({ integrationIds, websiteId, timeFrame, limit }: UmamiTopListProps) {
   const t = useScopedI18n("widget.umami");
-  const { data = [] } = clientApi.widget.umami.getTopPages.useQuery(
-    { integrationId: integrationIds[0] ?? "", websiteId, timeFrame, limit },
-    umamiQueryOptions,
-  );
+  const data =
+    getUsableWidgetQueryData(
+      clientApi.widget.umami.getTopPages.useQuery(
+        { integrationId: integrationIds[0] ?? "", websiteId, timeFrame, limit },
+        umamiQueryOptions,
+      ),
+    ) ?? [];
   return <UmamiTopList items={data} heading={t("option.viewMode.option.topPages")} emptyLabel={t("topPages.direct")} />;
 }
 
 export function UmamiTopReferrersContent({ integrationIds, websiteId, timeFrame, limit }: UmamiTopListProps) {
   const t = useScopedI18n("widget.umami");
-  const { data = [] } = clientApi.widget.umami.getTopReferrers.useQuery(
-    { integrationId: integrationIds[0] ?? "", websiteId, timeFrame, limit },
-    umamiQueryOptions,
-  );
+  const data =
+    getUsableWidgetQueryData(
+      clientApi.widget.umami.getTopReferrers.useQuery(
+        { integrationId: integrationIds[0] ?? "", websiteId, timeFrame, limit },
+        umamiQueryOptions,
+      ),
+    ) ?? [];
   return (
     <UmamiTopList
       items={data}
@@ -48,6 +55,8 @@ function UmamiTopList({
   heading: string;
   emptyLabel: string;
 }) {
+  const locale = useCurrentIntlLocale();
+
   return (
     <Stack gap={2} h="100%">
       <Text size="xs" c="dimmed" fw={500}>
@@ -64,7 +73,7 @@ function UmamiTopList({
                 {item.x || emptyLabel}
               </Text>
               <Text size="xs" fw={600} flex="0 0 auto">
-                {item.y.toLocaleString()}
+                {item.y.toLocaleString(locale)}
               </Text>
             </Group>
           ))}
diff --git a/packages/widgets/src/umami/umami-utils.ts b/packages/widgets/src/umami/umami-utils.ts
index bca9d247b..dd64a6e64 100644
--- a/packages/widgets/src/umami/umami-utils.ts
+++ b/packages/widgets/src/umami/umami-utils.ts
@@ -6,17 +6,17 @@ export const umamiQueryOptions = { refetchInterval: 60_000 } as const;
 
 export const EVENT_COLORS = ["blue.5", "orange.5", "green.5", "red.5", "violet.5", "teal.5", "yellow.5", "pink.5"];
 
-export function formatXLabel(timestamp: string, timeFrame: string): string {
+export function formatXLabel(timestamp: string, timeFrame: string, locale: string): string {
   const date = new Date(timestamp);
   switch (timeFrame) {
     case "today":
     case "24h":
-      return `${date.getHours().toString().padStart(2, "0")}:00`;
+      return date.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
     case "7d":
     case "30d":
     case "month":
     case "lastMonth":
-      return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+      return date.toLocaleDateString(locale, { month: "short", day: "numeric" });
     default:
       return timestamp;
   }
diff --git a/packages/widgets/src/ups/component.tsx b/packages/widgets/src/ups/component.tsx
index 2b3d93bd9..b291c5937 100644
--- a/packages/widgets/src/ups/component.tsx
+++ b/packages/widgets/src/ups/component.tsx
@@ -1,6 +1,18 @@
 "use client";
 
-import { Badge, Box, Card, Group, Progress, RingProgress, ScrollArea, Stack, Text } from "@mantine/core";
+import {
+  Badge,
+  Box,
+  Card,
+  Group,
+  Progress,
+  RingProgress,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  VisuallyHidden,
+} from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { formatDuration } from "@homarr/common";
@@ -10,6 +22,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { NoIntegrationSelectedError } from "../errors/no-integration-selected";
 
 const statusColors: Record<UpsStatus, string> = {
@@ -22,29 +35,47 @@ const statusColors: Record<UpsStatus, string> = {
 
 type UpsLayout = "mini" | "compact" | "full";
 
-export default function UpsWidget({ options, integrationIds, width }: WidgetComponentProps<"ups">) {
+export default function UpsWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+  displayMode = "compact",
+}: WidgetComponentProps<"ups">) {
   if (integrationIds.length === 0) {
     throw new NoIntegrationSelectedError();
   }
 
-  return <UpsContent integrationIds={integrationIds} options={options} width={width} />;
+  return (
+    <UpsContent
+      integrationIds={integrationIds}
+      options={options}
+      width={width}
+      height={height}
+      displayMode={displayMode}
+    />
+  );
 }
 
 interface UpsContentProps {
   integrationIds: string[];
   options: WidgetComponentProps<"ups">["options"];
   width: number;
+  height: number;
+  displayMode: "compact" | "advanced";
 }
 
-function UpsContent({ integrationIds, options, width }: UpsContentProps) {
+function UpsContent({ integrationIds, options, width, height, displayMode }: UpsContentProps) {
   const t = useScopedI18n("widget.ups");
-  const { data } = clientApi.widget.ups.getSummaries.useQuery({ integrationIds });
+  const data = getUsableWidgetQueryData(clientApi.widget.ups.getSummaries.useQuery({ integrationIds }));
 
   if (!data) return <WidgetEmptyState />;
 
-  const devices = data.flatMap((instance) =>
-    instance.summaries.map((summary) => ({ key: `${instance.integrationId}:${summary.id}`, summary })),
-  );
+  const devices = data
+    .flatMap((instance) =>
+      instance.summaries.map((summary) => ({ key: `${instance.integrationId}:${summary.id}`, summary })),
+    )
+    .toSorted((left, right) => statusPriority[left.summary.status] - statusPriority[right.summary.status]);
 
   if (devices.length === 0) {
     return <WidgetEmptyState />;
@@ -55,27 +86,52 @@ function UpsContent({ integrationIds, options, width }: UpsContentProps) {
   // - full: ring beside a column of stats (runtime, load, voltage)
   // - compact (~2 columns): ring beside the name and a status badge
   // - mini (~1 column): a text badge no longer fits, so status becomes a colour dot next to the name
-  const layout: UpsLayout = width < 150 ? "mini" : width < 256 ? "compact" : "full";
+  const layout: UpsLayout =
+    displayMode === "advanced" ? "full" : width < 150 || height < 110 ? "mini" : width < 256 ? "compact" : "full";
+
+  const cards = devices.map(({ key, summary }) => (
+    <UpsDeviceCard
+      key={key}
+      summary={summary}
+      options={options}
+      layout={layout}
+      advanced={displayMode === "advanced"}
+      t={t}
+    />
+  ));
 
   return (
     <ScrollArea h="100%">
-      <Stack gap="xs" p="xs">
-        {devices.map(({ key, summary }) => (
-          <UpsDeviceCard key={key} summary={summary} options={options} layout={layout} t={t} />
-        ))}
-      </Stack>
+      {displayMode === "advanced" ? (
+        <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="md" p="md">
+          {cards}
+        </SimpleGrid>
+      ) : (
+        <Stack gap="xs" p="xs">
+          {cards}
+        </Stack>
+      )}
     </ScrollArea>
   );
 }
 
+const statusPriority: Record<UpsStatus, number> = {
+  lowBattery: 0,
+  onBattery: 1,
+  charging: 2,
+  unknown: 3,
+  online: 4,
+};
+
 interface UpsDeviceCardProps {
   summary: UpsSummary;
   options: WidgetComponentProps<"ups">["options"];
   layout: UpsLayout;
+  advanced: boolean;
   t: ScopedTranslationFunction<"widget.ups">;
 }
 
-function UpsDeviceCard({ summary, options, layout, t }: UpsDeviceCardProps) {
+function UpsDeviceCard({ summary, options, layout, advanced, t }: UpsDeviceCardProps) {
   const showRing = options.showBattery && summary.batteryCharge !== null;
   const statusBadge = (
     <Badge
@@ -95,12 +151,14 @@ function UpsDeviceCard({ summary, options, layout, t }: UpsDeviceCardProps) {
           <Box
             w={8}
             h={8}
+            aria-hidden="true"
             style={{
               borderRadius: "50%",
               backgroundColor: `var(--mantine-color-${statusColors[summary.status]}-6)`,
               flexShrink: 0,
             }}
           />
+          <VisuallyHidden>{t(`status.${summary.status}`)}</VisuallyHidden>
           <Text fw={600} size="xs" truncate>
             {summary.name}
           </Text>
@@ -205,6 +263,20 @@ function UpsDeviceCard({ summary, options, layout, t }: UpsDeviceCardProps) {
           )}
         </Stack>
       </Group>
+      {advanced && (
+        <SimpleGrid cols={2} spacing={4} mt="sm">
+          {summary.batteryVoltage !== null && (
+            <StatRow label={t("field.batteryVoltage")} value={`${summary.batteryVoltage} V`} />
+          )}
+          {summary.power !== null && <StatRow label={t("field.power")} value={`${summary.power} W`} />}
+          {summary.temperature !== null && (
+            <StatRow label={t("field.temperature")} value={`${summary.temperature} °C`} />
+          )}
+          {summary.manufacturer && <StatRow label={t("field.manufacturer")} value={summary.manufacturer} />}
+          {summary.model && <StatRow label={t("field.model")} value={summary.model} />}
+          {summary.serial && <StatRow label={t("field.serial")} value={summary.serial} />}
+        </SimpleGrid>
+      )}
     </Card>
   );
 }
diff --git a/packages/widgets/src/uptime-kuma/aggregate.spec.ts b/packages/widgets/src/uptime-kuma/aggregate.spec.ts
new file mode 100644
index 000000000..4982f5331
--- /dev/null
+++ b/packages/widgets/src/uptime-kuma/aggregate.spec.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+
+import { aggregateUptimeKumaDashboards } from "./aggregate";
+import { getCompactStatLimit, getCompactStatPriority } from "./component";
+
+describe("aggregateUptimeKumaDashboards", () => {
+  it("weights uptime by monitors instead of integrations", () => {
+    const combined = aggregateUptimeKumaDashboards([
+      {
+        totalMonitors: 1,
+        upCount: 1,
+        downCount: 0,
+        pausedCount: 0,
+        averageUptimePercent: 100,
+        monitors: [{ id: 1, name: "one", status: "up", uptimePercent24h: 100 }],
+      },
+      {
+        totalMonitors: 3,
+        upCount: 0,
+        downCount: 3,
+        pausedCount: 0,
+        averageUptimePercent: 0,
+        monitors: [
+          { id: 2, name: "two", status: "down", uptimePercent24h: 0 },
+          { id: 3, name: "three", status: "down", uptimePercent24h: 0 },
+          { id: 4, name: "four", status: "down", uptimePercent24h: 0 },
+        ],
+      },
+    ]);
+    expect(combined.averageUptimePercent).toBe(25);
+  });
+});
+
+describe("getCompactStatLimit", () => {
+  it("reserves compact height for the uptime summary", () => {
+    expect(getCompactStatLimit(150, true, 4)).toBe(0);
+    expect(getCompactStatLimit(220, true, 4)).toBe(2);
+  });
+
+  it("uses the space for metrics when the summary is disabled", () => {
+    expect(getCompactStatLimit(100, false, 4)).toBe(2);
+    expect(getCompactStatLimit(240, false, 4)).toBe(4);
+  });
+});
+
+describe("getCompactStatPriority", () => {
+  it("puts active failures before healthy totals", () => {
+    expect(getCompactStatPriority("downCount", 2)).toBeLessThan(getCompactStatPriority("totalMonitors", 10));
+    expect(getCompactStatPriority("pausedCount", 1)).toBeLessThan(getCompactStatPriority("upCount", 8));
+  });
+
+  it("moves zero-value problem states behind healthy totals", () => {
+    expect(getCompactStatPriority("downCount", 0)).toBeGreaterThan(getCompactStatPriority("upCount", 8));
+  });
+});
diff --git a/packages/widgets/src/uptime-kuma/aggregate.ts b/packages/widgets/src/uptime-kuma/aggregate.ts
new file mode 100644
index 000000000..f7e6650be
--- /dev/null
+++ b/packages/widgets/src/uptime-kuma/aggregate.ts
@@ -0,0 +1,30 @@
+import type { UptimeKumaDashboardData } from "@homarr/integrations/types";
+
+const emptyDashboard: UptimeKumaDashboardData = {
+  totalMonitors: 0,
+  upCount: 0,
+  downCount: 0,
+  pausedCount: 0,
+  averageUptimePercent: 0,
+  monitors: [],
+};
+
+export function aggregateUptimeKumaDashboards(dashboards: UptimeKumaDashboardData[]): UptimeKumaDashboardData {
+  const combined = dashboards.reduce<UptimeKumaDashboardData>(
+    (acc, dashboard) => ({
+      totalMonitors: acc.totalMonitors + dashboard.totalMonitors,
+      upCount: acc.upCount + dashboard.upCount,
+      downCount: acc.downCount + dashboard.downCount,
+      pausedCount: acc.pausedCount + dashboard.pausedCount,
+      averageUptimePercent: 0,
+      monitors: [...acc.monitors, ...dashboard.monitors],
+    }),
+    emptyDashboard,
+  );
+  const uptimeValues = combined.monitors
+    .map((monitor) => monitor.uptimePercent24h)
+    .filter((value): value is number => value !== null);
+  combined.averageUptimePercent =
+    uptimeValues.reduce((total, value) => total + value, 0) / Math.max(uptimeValues.length, 1);
+  return combined;
+}
diff --git a/packages/widgets/src/uptime-kuma/component.tsx b/packages/widgets/src/uptime-kuma/component.tsx
index 5719f2f13..6dccbbb11 100644
--- a/packages/widgets/src/uptime-kuma/component.tsx
+++ b/packages/widgets/src/uptime-kuma/component.tsx
@@ -1,27 +1,19 @@
 "use client";
 
 import type { CSSProperties } from "react";
-import { RingProgress, Text } from "@mantine/core";
+import { Badge, Box, Group, RingProgress, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 import { IconArrowDown, IconArrowUp, IconClockPause, IconServer } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { formatNumber } from "@homarr/common";
-import type { UptimeKumaDashboardData } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
 import classes from "./component.module.css";
-
-const emptyDashboard: UptimeKumaDashboardData = {
-  totalMonitors: 0,
-  upCount: 0,
-  downCount: 0,
-  pausedCount: 0,
-  averageUptimePercent: 0,
-  monitors: [],
-};
+import { aggregateUptimeKumaDashboards } from "./aggregate";
 
 const statVisibilityByOption = {
   showTotalMonitors: "totalMonitors",
@@ -85,58 +77,101 @@ const heroVariantByRing = {
   false: classes.heroTextOnly,
 } as const;
 
-export default function UptimeKumaWidget({ integrationIds, options, width }: WidgetComponentProps<"uptimeKuma">) {
+export function getCompactStatLimit(height: number, showHero: boolean, statCount: number): number {
+  if (showHero) {
+    if (height < 180) return 0;
+    if (height < 260) return Math.min(2, statCount);
+    if (height < 340) return Math.min(4, statCount);
+  } else {
+    if (height < 130) return Math.min(2, statCount);
+    if (height < 220) return Math.min(4, statCount);
+  }
+  return statCount;
+}
+
+export function getCompactStatPriority(statKey: keyof typeof statIcons, value: number): number {
+  if (statKey === "downCount") return value > 0 ? 0 : 4;
+  if (statKey === "pausedCount") return value > 0 ? 1 : 5;
+  if (statKey === "totalMonitors") return 2;
+  return 3;
+}
+
+export default function UptimeKumaWidget({
+  integrationIds,
+  options,
+  width,
+  height,
+  displayMode = "compact",
+}: WidgetComponentProps<"uptimeKuma">) {
   if (integrationIds.length === 0) {
     throw new NoIntegrationDataError();
   }
 
-  return <UptimeKumaContent integrationIds={integrationIds} options={options} width={width} />;
+  return (
+    <UptimeKumaContent
+      integrationIds={integrationIds}
+      options={options}
+      width={width}
+      height={height}
+      displayMode={displayMode}
+    />
+  );
 }
 
 interface UptimeKumaContentProps {
   integrationIds: string[];
   options: WidgetComponentProps<"uptimeKuma">["options"];
   width: number;
+  height: number;
+  displayMode: "compact" | "advanced";
 }
 
-function UptimeKumaContent({ integrationIds, options, width }: UptimeKumaContentProps) {
+function UptimeKumaContent({ integrationIds, options, width, height, displayMode }: UptimeKumaContentProps) {
   const t = useScopedI18n("widget.uptimeKuma");
-  const { data: dashboardData } = clientApi.widget.uptimeKuma.getDashboard.useQuery({ integrationIds });
+  const dashboardData = getUsableWidgetQueryData(clientApi.widget.uptimeKuma.getDashboard.useQuery({ integrationIds }));
 
   if (!dashboardData) return <WidgetEmptyState />;
 
-  const combined = dashboardData.reduce<UptimeKumaDashboardData>(
-    (acc, item) => ({
-      totalMonitors: acc.totalMonitors + item.dashboard.totalMonitors,
-      upCount: acc.upCount + item.dashboard.upCount,
-      downCount: acc.downCount + item.dashboard.downCount,
-      pausedCount: acc.pausedCount + item.dashboard.pausedCount,
-      averageUptimePercent: acc.averageUptimePercent + item.dashboard.averageUptimePercent,
-      monitors: [...acc.monitors, ...item.dashboard.monitors],
-    }),
-    emptyDashboard,
+  const combined = aggregateUptimeKumaDashboards(dashboardData.map((item) => item.dashboard));
+  const monitors = dashboardData.flatMap((result) =>
+    result.dashboard.monitors.map((monitor) => ({
+      ...monitor,
+      key: `${result.integrationId}:${monitor.id}`,
+      integrationName: result.integrationName,
+    })),
   );
-
-  const instanceCount = dashboardData.length;
-  const averageUptime = combined.averageUptimePercent / Math.max(instanceCount, 1);
-  const uptimeValue = clampPercent(averageUptime);
+  const uptimeValue = clampPercent(combined.averageUptimePercent);
   const uptimeColor = getUptimeColor(uptimeValue);
   const ringSize = getRingSize(width);
   const iconSize = getIconSize(width);
   const gridCols = getGridCols(width);
 
-  const visibleStatKeys = Object.entries(statVisibilityByOption)
+  const enabledStatKeys = Object.entries(statVisibilityByOption)
     .filter(([optionKey]) => options[optionKey as keyof typeof options])
     .map(([, statKey]) => statKey);
 
   const showHero = options.showAverageUptime;
+  const showRing = options.showUptimeRing && (displayMode === "advanced" || (width >= 170 && height >= 110));
+  const prioritizedStatKeys =
+    displayMode === "advanced"
+      ? enabledStatKeys
+      : enabledStatKeys.toSorted(
+          (left, right) =>
+            getCompactStatPriority(left, combined[left]) - getCompactStatPriority(right, combined[right]),
+        );
+  const visibleStatKeys = prioritizedStatKeys.slice(
+    0,
+    displayMode === "advanced"
+      ? prioritizedStatKeys.length
+      : getCompactStatLimit(height, showHero, prioritizedStatKeys.length),
+  );
   const hasContent = showHero || visibleStatKeys.length > 0;
 
   const heroLayoutClass =
     heroLayoutBySecondaryStats[String(visibleStatKeys.length > 0) as keyof typeof heroLayoutBySecondaryStats];
-  const heroRingClass = heroVariantByRing[String(options.showUptimeRing) as keyof typeof heroVariantByRing];
+  const heroRingClass = heroVariantByRing[String(showRing) as keyof typeof heroVariantByRing];
 
-  return (
+  const summaryContent = (
     <div className={classes.root}>
       {showHero && (
         <div className={`${classes.hero} ${heroLayoutClass} ${heroRingClass}`}>
@@ -144,7 +179,7 @@ function UptimeKumaContent({ integrationIds, options, width }: UptimeKumaContent
             <span className={classes.heroLabel}>{t("averageUptime")}</span>
             <span className={classes.heroValue}>{formatNumber(uptimeValue, 1)}%</span>
           </div>
-          {options.showUptimeRing && (
+          {showRing && (
             <RingProgress
               className={classes.ring}
               size={ringSize}
@@ -189,10 +224,75 @@ function UptimeKumaContent({ integrationIds, options, width }: UptimeKumaContent
           })}
         </div>
       )}
+      {displayMode === "compact" && height >= 300 && combined.downCount > 0 && (
+        <Stack gap={2} px="sm">
+          {monitors
+            .filter((monitor) => monitor.status === "down")
+            .slice(0, 3)
+            .map((monitor) => (
+              <Group key={monitor.key} justify="space-between" wrap="nowrap">
+                <Text size="xs" truncate>
+                  {monitor.name}
+                </Text>
+                <Badge size="xs" color="red">
+                  {t("status.down")} ·{" "}
+                  {monitor.uptimePercent24h === null ? "—" : `${formatNumber(monitor.uptimePercent24h, 1)}%`}
+                </Badge>
+              </Group>
+            ))}
+        </Stack>
+      )}
     </div>
   );
+
+  if (displayMode === "compact") return summaryContent;
+
+  const monitorList = (
+    <Stack gap="xs">
+      {monitors
+        .toSorted((left, right) => statusOrder[left.status] - statusOrder[right.status])
+        .map((monitor) => (
+          <Group key={monitor.key} justify="space-between" wrap="nowrap" p="xs">
+            <Stack gap={0} style={{ minWidth: 0 }}>
+              <Text size="sm" fw={600} truncate>
+                {monitor.name}
+              </Text>
+              {dashboardData.length > 1 && (
+                <Text size="xs" c="dimmed">
+                  {monitor.integrationName}
+                </Text>
+              )}
+            </Stack>
+            <Badge color={monitor.status === "up" ? "green" : monitor.status === "down" ? "red" : "yellow"}>
+              {t(`status.${monitor.status}`)} ·{" "}
+              {monitor.uptimePercent24h === null ? "—" : `${formatNumber(monitor.uptimePercent24h, 1)}%`}
+            </Badge>
+          </Group>
+        ))}
+    </Stack>
+  );
+
+  if (width < 760) {
+    return (
+      <ScrollArea h="100%">
+        <Stack gap="lg" p="md">
+          <Box h={Math.max(280, Math.min(420, height - 120))}>{summaryContent}</Box>
+          {monitorList}
+        </Stack>
+      </ScrollArea>
+    );
+  }
+
+  return (
+    <SimpleGrid cols={2} spacing="lg" h="100%" p="md" style={{ gridTemplateRows: "minmax(0, 1fr)" }}>
+      {summaryContent}
+      <ScrollArea h="100%">{monitorList}</ScrollArea>
+    </SimpleGrid>
+  );
 }
 
+const statusOrder = { down: 0, paused: 1, up: 2 } as const;
+
 function clampPercent(value: number): number {
   return Math.min(100, Math.max(0, value));
 }
diff --git a/packages/widgets/src/video/component.tsx b/packages/widgets/src/video/component.tsx
index 12b6bbde0..bc0bdf1b9 100644
--- a/packages/widgets/src/video/component.tsx
+++ b/packages/widgets/src/video/component.tsx
@@ -16,18 +16,27 @@ import type Player from "video.js/dist/types/player";
 
 import { createDocumentationLink } from "@homarr/definitions";
 
-export default function VideoWidget({ options }: WidgetComponentProps<"video">) {
+export default function VideoWidget({ options, isEditMode }: WidgetComponentProps<"video">) {
   if (options.feedUrl.trim() === "") {
     return <NoUrl />;
   }
 
-  if (options.feedUrl.trim().startsWith("https://www.youtube.com/watch")) {
+  if (isYouTubeUrl(options.feedUrl)) {
     return <ForYoutubeUseIframe />;
   }
 
-  return <Feed options={options} />;
+  return <Feed options={options} isEditMode={isEditMode} />;
 }
 
+export const isYouTubeUrl = (value: string): boolean => {
+  try {
+    const url = new URL(value);
+    return url.hostname === "youtu.be" || url.hostname === "youtube.com" || url.hostname.endsWith(".youtube.com");
+  } catch {
+    return false;
+  }
+};
+
 const NoUrl = () => {
   const t = useI18n();
 
@@ -55,7 +64,7 @@ const ForYoutubeUseIframe = () => {
   );
 };
 
-const Feed = ({ options }: Pick<WidgetComponentProps<"video">, "options">) => {
+const Feed = ({ options, isEditMode }: Pick<WidgetComponentProps<"video">, "options"> & { isEditMode: boolean }) => {
   const videoRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<Player>(null);
 
@@ -98,8 +107,8 @@ const Feed = ({ options }: Pick<WidgetComponentProps<"video">, "options">) => {
 
   useEffect(() => {
     if (!playerRef.current) return;
-    playerRef.current.controls(options.hasControls);
-  }, [options.hasControls]);
+    playerRef.current.controls(!isEditMode && options.hasControls);
+  }, [isEditMode, options.hasControls]);
 
   useEffect(() => {
     const player = playerRef.current;
@@ -113,7 +122,7 @@ const Feed = ({ options }: Pick<WidgetComponentProps<"video">, "options">) => {
   }, [playerRef]);
 
   return (
-    <Group justify="center" w="100%" h="100%" pos="relative">
+    <Group justify="center" w="100%" h="100%" pos="relative" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
       <Box w="100%" h="100%" ref={videoRef} />
     </Group>
   );
diff --git a/packages/widgets/src/video/index.ts b/packages/widgets/src/video/index.ts
index d35a83dd5..36f3ea677 100644
--- a/packages/widgets/src/video/index.ts
+++ b/packages/widgets/src/video/index.ts
@@ -4,6 +4,7 @@ import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("video", {
+  supportsAdvancedFocus: false,
   icon: IconDeviceCctv,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/vpn/component.tsx b/packages/widgets/src/vpn/component.tsx
index 79ed5d695..2c2a7bbe5 100644
--- a/packages/widgets/src/vpn/component.tsx
+++ b/packages/widgets/src/vpn/component.tsx
@@ -1,39 +1,69 @@
 "use client";
 
-import { Flex, ScrollArea, Stack } from "@mantine/core";
+import { Center, Flex, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { VpnIntegrationCard } from "./vpn-card";
 
-export default function VpnWidget({ options, integrationIds }: WidgetComponentProps<"vpn">) {
-  const { data: integrations = [] } = clientApi.widget.vpn.getSummaries.useQuery({
+export default function VpnWidget({ options, integrationIds, width, height }: WidgetComponentProps<"vpn">) {
+  const summariesQuery = clientApi.widget.vpn.getSummaries.useQuery({
     ...options,
     integrationIds,
   });
+  const integrations = getUsableWidgetQueryData(summariesQuery) ?? [];
+  const { isPending } = summariesQuery;
+  const t = useScopedI18n("widget.vpn");
+  const tCommon = useScopedI18n("common");
+  const locale = useCurrentIntlLocale();
+  const dense = width < 240 || height < 120;
+
+  if (isPending || integrations.length === 0) {
+    return (
+      <Center h="100%" p="sm">
+        <Text c="dimmed" size="sm" ta="center">
+          {isPending ? tCommon("action.loading") : t("serviceUnavailable")}
+        </Text>
+      </Center>
+    );
+  }
 
   const [vpn] = integrations;
   if (integrations.length === 1 && vpn) {
     return (
       <Flex align="center" justify="center" w="100%" h="100%" px="xs" py="sm">
-        <VpnIntegrationCard vpn={vpn.summary} integrationName={vpn.integration.name} />
+        <VpnIntegrationCard
+          vpn={vpn.summary}
+          integrationName={vpn.integration.name}
+          variant={width < 240 ? "list" : "single"}
+          dense={dense}
+        />
       </Flex>
     );
   }
 
   return (
-    <ScrollArea className="scroll-area-w100" w="100%" h="100%" offsetScrollbars>
-      <Stack w="100%" gap="sm" py="xs" px="xs">
-        {integrations.map((vpn) => (
-          <VpnIntegrationCard
-            key={vpn.integration.id}
-            vpn={vpn.summary}
-            integrationName={vpn.integration.name}
-            variant="list"
-          />
+    <ScrollArea className="scroll-area-w100" w="100%" h="100%" offsetScrollbars p="xs">
+      <SimpleGrid cols={width >= 640 ? 2 : 1} spacing="sm">
+        {integrations.map((result) => (
+          <Stack key={result.integration.id} gap={4}>
+            <VpnIntegrationCard
+              vpn={result.summary}
+              integrationName={result.integration.name}
+              variant="list"
+              dense={dense}
+            />
+            {height >= 180 && !result.error && new Date(result.integration.updatedAt).getTime() > 0 && (
+              <Text size="xs" c="dimmed" ta="right">
+                {new Date(result.integration.updatedAt).toLocaleString(locale)}
+              </Text>
+            )}
+          </Stack>
         ))}
-      </Stack>
+      </SimpleGrid>
     </ScrollArea>
   );
 }
diff --git a/packages/widgets/src/vpn/index.ts b/packages/widgets/src/vpn/index.ts
index b3cbe8c73..f8418d86f 100644
--- a/packages/widgets/src/vpn/index.ts
+++ b/packages/widgets/src/vpn/index.ts
@@ -6,6 +6,7 @@ import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("vpn", {
+  supportsAdvancedFocus: false,
   icon: IconShieldLock,
   refetchInterval: null,
   createOptions() {
diff --git a/packages/widgets/src/vpn/vpn-card.tsx b/packages/widgets/src/vpn/vpn-card.tsx
index 3cb26bdd5..aeaa36c0c 100644
--- a/packages/widgets/src/vpn/vpn-card.tsx
+++ b/packages/widgets/src/vpn/vpn-card.tsx
@@ -1,8 +1,15 @@
 "use client";
 
 import React from "react";
-import { Badge, Box, Card, Flex, Group, Text } from "@mantine/core";
-import { IconArrowsExchange, IconMapPin, IconShieldCheck, IconShieldX } from "@tabler/icons-react";
+import { Badge, Box, Card, Flex, Group, Text, VisuallyHidden } from "@mantine/core";
+import {
+  IconArrowsExchange,
+  IconCircleCheckFilled,
+  IconCircleXFilled,
+  IconMapPin,
+  IconShieldCheck,
+  IconShieldX,
+} from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { useRequiredBoard } from "@homarr/boards/context";
@@ -16,17 +23,19 @@ export function VpnIntegrationCard({
   vpn,
   integrationName,
   variant = "single",
+  dense = false,
 }: {
   vpn: VpnInfo;
   integrationName?: string;
   variant?: "single" | "list";
+  dense?: boolean;
 }) {
   const board = useRequiredBoard();
   const compact = variant === "list";
 
   const content = vpn ? (
     <Flex direction="row" w="100%" align="center" gap="xs">
-      <VpnStatusColumn vpnStatus={vpn.vpnStatus} dnsStatus={vpn.dnsStatus} compact={compact} />
+      <VpnStatusColumn vpnStatus={vpn.vpnStatus} dnsStatus={vpn.dnsStatus} compact={compact} dense={dense} />
       <VpnInfoColumn
         integrationName={compact ? integrationName : undefined}
         publicIp={vpn.publicIp}
@@ -35,15 +44,16 @@ export function VpnIntegrationCard({
         provider={vpn.vpnProvider.provider}
         protocol={vpn.vpnProvider.protocol}
         compact={compact}
+        dense={dense}
       />
     </Flex>
   ) : (
-    <VpnUnavailableContent compact={compact} integrationName={compact ? integrationName : undefined} />
+    <VpnUnavailableContent compact={compact} dense={dense} integrationName={compact ? integrationName : undefined} />
   );
 
   if (compact) {
     return (
-      <Card withBorder radius={board.itemRadius} p="xs" w="100%">
+      <Card withBorder radius={board.itemRadius} p={dense ? 6 : "xs"} w="100%">
         {content}
       </Card>
     );
@@ -52,20 +62,28 @@ export function VpnIntegrationCard({
   return <Box w="100%">{content}</Box>;
 }
 
-function VpnUnavailableContent({ compact, integrationName }: { compact: boolean; integrationName?: string }) {
+function VpnUnavailableContent({
+  compact,
+  dense,
+  integrationName,
+}: {
+  compact: boolean;
+  dense: boolean;
+  integrationName?: string;
+}) {
   const t = useScopedI18n("widget.vpn");
 
   return (
     <Flex direction="row" w="100%" align="center" gap="xs">
       {/* Empty statuses render the shield and DNS badge in red (see getStatusColor). */}
-      <VpnStatusColumn vpnStatus="" dnsStatus="" compact={compact} />
+      <VpnStatusColumn vpnStatus="" dnsStatus="" compact={compact} dense={dense} />
       <Flex gap={2} direction="column" w="100%" align="flex-start" style={{ minWidth: 0 }}>
         {integrationName ? (
           <Text fw={600} size="xs" lh={1.2} c="dimmed" lineClamp={1}>
             {integrationName}
           </Text>
         ) : null}
-        <Text fw={700} size={compact ? "md" : "lg"} lh={1.2} c="red" lineClamp={2}>
+        <Text fw={700} size={dense ? "sm" : compact ? "md" : "lg"} lh={1.2} c="red" lineClamp={2}>
           {t("serviceUnavailable")}
         </Text>
       </Flex>
@@ -77,17 +95,34 @@ function VpnStatusColumn({
   vpnStatus,
   dnsStatus,
   compact,
+  dense,
 }: {
   vpnStatus: string;
   dnsStatus: string;
   compact: boolean;
+  dense: boolean;
 }) {
+  const t = useScopedI18n("widget.vpn");
   // Connected shows a shield with a check; anything else (stopped or unavailable) shows a shield with a cross.
   const ShieldIcon = vpnStatus === RUNNING_STATUS ? IconShieldCheck : IconShieldX;
+  const statusLabel = t(
+    vpnStatus === RUNNING_STATUS ? "status.running" : vpnStatus ? "status.notRunning" : "status.unavailable",
+  );
 
   return (
-    <Flex gap={4} direction="column" w={compact ? "28%" : "30%"} miw={compact ? 56 : undefined} align="center">
-      <ShieldIcon stroke={2} color={getStatusColor(vpnStatus)} size={compact ? 44 : 52} />
+    <Flex
+      gap={4}
+      direction="column"
+      w={compact ? "28%" : "30%"}
+      miw={dense ? 44 : compact ? 56 : undefined}
+      align="center"
+    >
+      <ShieldIcon
+        aria-label={t("status.vpn", { status: statusLabel })}
+        stroke={2}
+        color={getStatusColor(vpnStatus)}
+        size={dense ? 32 : compact ? 44 : 52}
+      />
       <DnsStatusBadge status={dnsStatus} />
     </Flex>
   );
@@ -101,6 +136,7 @@ function VpnInfoColumn({
   provider,
   protocol,
   compact,
+  dense,
 }: {
   integrationName?: string;
   publicIp: string;
@@ -109,6 +145,7 @@ function VpnInfoColumn({
   provider: string;
   protocol: string;
   compact: boolean;
+  dense: boolean;
 }) {
   return (
     <Flex gap={2} direction="column" w="100%" align="flex-start" style={{ minWidth: 0 }}>
@@ -117,16 +154,18 @@ function VpnInfoColumn({
           {integrationName}
         </Text>
       ) : null}
-      <Text fw={700} size={compact ? "xl" : "2xl"} lh={1.1} lineClamp={1}>
-        {publicIp}
+      <Text fw={700} size={dense ? "md" : compact ? "xl" : "2xl"} lh={1.1} lineClamp={1}>
+        {publicIp || "—"}
       </Text>
-      <Group gap={4} justify="flex-start" wrap="nowrap">
-        <IconMapPin size={10} />
-        <Text fs="italic" fw={500} size="sm" lh={1.2} lineClamp={1}>
-          {city}, {country}
-        </Text>
-      </Group>
-      <VpnProviderDetails provider={provider} protocol={protocol} />
+      {!dense && (city || country) && (
+        <Group gap={4} justify="flex-start" wrap="nowrap">
+          <IconMapPin aria-hidden size={10} />
+          <Text fs="italic" fw={500} size="sm" lh={1.2} lineClamp={1}>
+            {[city, country].filter(Boolean).join(", ")}
+          </Text>
+        </Group>
+      )}
+      {!dense && (provider || protocol) && <VpnProviderDetails provider={provider} protocol={protocol} />}
     </Flex>
   );
 }
@@ -145,20 +184,22 @@ function VpnProviderDetails({ provider, protocol }: { provider: string; protocol
   );
 }
 
-function StatusDot({ status, size = 10 }: { status: string; size?: number }) {
-  return <Box bg={getStatusColor(status)} h={size} w={size} style={{ borderRadius: 999 }} />;
-}
-
 function DnsStatusBadge({ status }: { status: string }) {
+  const t = useScopedI18n("widget.vpn");
+  const StatusIcon = status === RUNNING_STATUS ? IconCircleCheckFilled : IconCircleXFilled;
+  const statusLabel = t(
+    status === RUNNING_STATUS ? "status.running" : status ? "status.notRunning" : "status.unavailable",
+  );
   return (
     <Badge
       variant="outline"
       color={getStatusColor(status)}
       size="xs"
       radius="xl"
-      leftSection={<StatusDot status={status} size={5} />}
+      leftSection={<StatusIcon aria-hidden size={9} />}
     >
       DNS
+      <VisuallyHidden> {statusLabel}</VisuallyHidden>
     </Badge>
   );
 }
diff --git a/packages/widgets/src/weather/animated-icon.tsx b/packages/widgets/src/weather/animated-icon.tsx
index 70145b4b1..e95fa2f47 100644
--- a/packages/widgets/src/weather/animated-icon.tsx
+++ b/packages/widgets/src/weather/animated-icon.tsx
@@ -7,7 +7,6 @@ interface AnimatedWeatherIconProps {
   size?: string | number;
 }
 
-
 const getAnimationClass = (code: number): string => {
   if (code === 0) return "weather-anim-sun";
   if ([1, 2, 3].includes(code)) return "weather-anim-cloud";
@@ -18,7 +17,6 @@ const getAnimationClass = (code: number): string => {
   return "";
 };
 
-
 export const AnimatedWeatherIcon = ({ code, size = 26 }: AnimatedWeatherIconProps) => {
   return (
     <span className={`weather-anim-wrapper ${getAnimationClass(code)}`}>
diff --git a/packages/widgets/src/weather/component.module.css b/packages/widgets/src/weather/component.module.css
new file mode 100644
index 000000000..4b7b623be
--- /dev/null
+++ b/packages/widgets/src/weather/component.module.css
@@ -0,0 +1,31 @@
+.detailsButton,
+.forecastButton {
+  color: inherit;
+  border-radius: var(--mantine-radius-sm);
+}
+
+.detailsButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  min-height: 24px;
+}
+
+.forecastButton {
+  display: block;
+}
+
+.detailsButton:focus-visible,
+.forecastButton:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
+}
+
+@media (any-pointer: coarse) {
+  .detailsButton,
+  .forecastButton {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
diff --git a/packages/widgets/src/weather/component.spec.ts b/packages/widgets/src/weather/component.spec.ts
new file mode 100644
index 000000000..fc0d219a2
--- /dev/null
+++ b/packages/widgets/src/weather/component.spec.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+
+import { getPreferredTime, getPreferredUnit, getPreferredWindSpeed, getVisibleForecastDays } from "./component";
+import { formatWeatherDate } from "./icon";
+
+describe("weather formatting", () => {
+  it("preserves valid zero temperatures", () => {
+    expect(getPreferredUnit(0)).toBe("0.0°C");
+    expect(getPreferredUnit(0, true, true)).toBe("32°F");
+  });
+
+  it("keeps zero wind speeds and missing forecast values truthful", () => {
+    expect(getPreferredWindSpeed(0)).toBe("0.0");
+    expect(getPreferredWindSpeed(undefined)).toBe("?");
+    expect(getPreferredTime(undefined, "en-US")).toBe("?");
+    expect(getPreferredTime("invalid", "en-US")).toBe("?");
+  });
+
+  it("limits compact forecasts by both axes", () => {
+    expect(getVisibleForecastDays(7, 120, 100)).toBe(2);
+    expect(getVisibleForecastDays(7, 600, 100)).toBe(3);
+  });
+
+  it.each([
+    ["dddd, MMMM D", "Monday, August 3"],
+    ["dddd, D MMMM", "Monday, 3 August"],
+    ["MMM D", "Aug 3"],
+    ["D MMM", "3 Aug"],
+    ["DD/MM/YYYY", "03/08/2026"],
+    ["MM/DD/YYYY", "08/03/2026"],
+    ["DD/MM", "03/08"],
+    ["MM/DD", "08/03"],
+  ] as const)("honors the saved %s date format", (pattern, expected) => {
+    expect(formatWeatherDate("2026-08-03", "en-US", pattern)).toBe(expected);
+  });
+});
diff --git a/packages/widgets/src/weather/component.tsx b/packages/widgets/src/weather/component.tsx
index 0329597b1..f58e97653 100644
--- a/packages/widgets/src/weather/component.tsx
+++ b/packages/widgets/src/weather/component.tsx
@@ -1,68 +1,279 @@
 "use client";
 
-import { Box, Group, HoverCard, Stack, Text } from "@mantine/core";
-import { IconArrowDownRight, IconArrowUpRight, IconDroplets, IconMapPin, IconWind } from "@tabler/icons-react";
+import { useId } from "react";
+import { Box, Group, Popover, Stack, Table, Text, UnstyledButton } from "@mantine/core";
+import {
+  IconArrowDownRight,
+  IconArrowUpRight,
+  IconDroplets,
+  IconMapPin,
+  IconSunrise,
+  IconSunset,
+  IconWind,
+} from "@tabler/icons-react";
 import combineClasses from "clsx";
 import dayjs from "dayjs";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { metricToImperial } from "@homarr/common";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
+import { formatLocalizedDate, formatLocalizedTime } from "../common/locale";
+import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "../common/query-state";
+import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "../common/query-state-indicator";
 import type { WidgetComponentProps } from "../definition";
 import { AnimatedWeatherIcon } from "./animated-icon";
-import { WeatherDescription } from "./icon";
+import { formatWeatherDate, WeatherDescription } from "./icon";
+import classes from "./component.module.css";
 
-export default function WeatherWidget({ isEditMode, options }: WidgetComponentProps<"weather">) {
+export default function WeatherWidget({
+  isEditMode,
+  options,
+  width,
+  height,
+  displayMode,
+}: WidgetComponentProps<"weather">) {
+  const t = useScopedI18n("widget.weather");
   const input = {
     latitude: options.location.latitude,
     longitude: options.location.longitude,
   };
-  const { data: weather } = clientApi.widget.weather.atLocation.useQuery(input);
+  const weatherQuery = clientApi.widget.weather.atLocation.useQuery(input);
+  const weather = getUsableWidgetQueryData(weatherQuery);
 
+  if (isInitialWidgetQueryPending(weatherQuery)) return <WidgetQueryLoadingState />;
   if (!weather) return <WidgetEmptyState />;
 
+  const content =
+    displayMode === "advanced" ? (
+      <AdvancedWeather weather={weather} options={options} />
+    ) : (
+      <Stack
+        align="center"
+        gap="sm"
+        justify="center"
+        w="100%"
+        h="100%"
+        style={{ pointerEvents: isEditMode ? "none" : undefined }}
+      >
+        {options.hasForecast ? (
+          <WeeklyForecast
+            weather={weather}
+            options={options}
+            isEditMode={isEditMode}
+            maxDays={getVisibleForecastDays(options.forecastDayCount, width, height)}
+          />
+        ) : (
+          <DailyWeather weather={weather} options={options} isEditMode={isEditMode} />
+        )}
+      </Stack>
+    );
+
   return (
-    <Stack
-      align="center"
-      gap="sm"
-      justify="center"
-      w="100%"
-      h="100%"
-      style={{ pointerEvents: isEditMode ? "none" : undefined }}
-    >
-      {options.hasForecast ? (
-        <WeeklyForecast weather={weather} options={options} />
-      ) : (
-        <DailyWeather weather={weather} options={options} />
+    <Box h="100%" w="100%" pos="relative">
+      {content}
+      {weatherQuery.error && (
+        <Box pos="absolute" top={4} right={4}>
+          <WidgetQueryErrorIndicator error={weatherQuery.error} label={t("name")} />
+        </Box>
       )}
-    </Stack>
+    </Box>
   );
 }
 
 interface WeatherProps extends Pick<WidgetComponentProps<"weather">, "options"> {
-  weather: RouterOutputs["widget"]["weather"]["atLocation"];
+  weather: NonNullable<RouterOutputs["widget"]["weather"]["atLocation"]>;
 }
 
-const DailyWeather = ({ options, weather }: WeatherProps) => {
+interface CompactWeatherProps extends WeatherProps {
+  isEditMode: boolean;
+}
+
+const AdvancedWeather = ({ options, weather }: WeatherProps) => {
+  const forecastHeadingId = useId();
+  const locale = useCurrentIntlLocale();
+  const t = useScopedI18n("widget.weather");
+  const tCommon = useScopedI18n("common");
+
+  return (
+    <Stack h="100%" w="100%" gap="sm" p="md" style={{ overflow: "hidden" }}>
+      <Group justify="space-between" align="center" gap="sm" wrap="wrap">
+        <Group gap="sm" wrap="nowrap">
+          <AnimatedWeatherIcon size={42} code={weather.current.weathercode} />
+          <Stack gap={0}>
+            <Text fz="xl" fw={700} lh={1.1}>
+              {getPreferredUnit(
+                weather.current.temperature,
+                options.isFormatFahrenheit,
+                options.disableTemperatureDecimals,
+              )}
+            </Text>
+            <WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />
+          </Stack>
+        </Group>
+
+        <Group gap="lg" wrap="wrap">
+          <Group gap={5} wrap="nowrap">
+            <IconMapPin size={16} aria-hidden />
+            <Text size="sm">{options.location.name}</Text>
+          </Group>
+          <Group gap={5} wrap="nowrap">
+            <IconWind size={16} aria-hidden />
+            <Text size="sm">
+              {t("currentWindSpeed", {
+                currentWindSpeed: getPreferredWindSpeed(weather.current.windspeed, options.useImperialSpeed),
+                unit: options.useImperialSpeed
+                  ? tCommon("unit.speed.milesPerHour")
+                  : tCommon("unit.speed.kilometersPerHour"),
+              })}
+            </Text>
+          </Group>
+        </Group>
+      </Group>
+
+      <Text id={forecastHeadingId} component="h3" size="sm" fw={600}>
+        {t("advanced.forecast")}
+      </Text>
+      <Table.ScrollContainer
+        minWidth={680}
+        maxHeight="100%"
+        style={{ flex: 1, minHeight: 0 }}
+        scrollAreaProps={{ type: "auto", offsetScrollbars: "present" }}
+      >
+        <Table
+          aria-labelledby={forecastHeadingId}
+          striped
+          highlightOnHover
+          verticalSpacing="xs"
+          horizontalSpacing="sm"
+          stickyHeader
+        >
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>{t("advanced.day")}</Table.Th>
+              <Table.Th>{t("advanced.conditions")}</Table.Th>
+              <Table.Th>{t("advanced.temperature")}</Table.Th>
+              <Table.Th>{t("advanced.humidity")}</Table.Th>
+              <Table.Th>
+                {t("advanced.wind", {
+                  unit: options.useImperialSpeed
+                    ? tCommon("unit.speed.milesPerHour")
+                    : tCommon("unit.speed.kilometersPerHour"),
+                })}
+              </Table.Th>
+              <Table.Th>{t("advanced.sun")}</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {weather.daily.length === 0 ? (
+              <Table.Tr>
+                <Table.Td colSpan={6}>
+                  <Text size="sm" c="dimmed" ta="center">
+                    {t("advanced.noForecast")}
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            ) : (
+              weather.daily.map((dayWeather) => (
+                <Table.Tr key={dayWeather.time}>
+                  <Table.Td>
+                    <Stack gap={0}>
+                      <Text size="sm" fw={600} tt="capitalize">
+                        {formatLocalizedDate(dayWeather.time, locale, { weekday: "short" })}
+                      </Text>
+                      <Text size="xs" c="dimmed">
+                        {formatLocalizedDate(dayWeather.time, locale, { month: "short", day: "numeric" })}
+                      </Text>
+                    </Stack>
+                  </Table.Td>
+                  <Table.Td>
+                    <Group gap="xs" wrap="nowrap">
+                      <AnimatedWeatherIcon size={20} code={dayWeather.weatherCode} />
+                      <WeatherDescription weatherOnly weatherCode={dayWeather.weatherCode} />
+                    </Group>
+                  </Table.Td>
+                  <Table.Td>
+                    <Group gap={4} wrap="nowrap">
+                      <IconArrowUpRight size={15} aria-hidden />
+                      <Text size="sm">
+                        {getPreferredUnit(
+                          dayWeather.maxTemp,
+                          options.isFormatFahrenheit,
+                          options.disableTemperatureDecimals,
+                        )}
+                      </Text>
+                      <Text size="sm" c="dimmed">
+                        /
+                      </Text>
+                      <IconArrowDownRight size={15} aria-hidden />
+                      <Text size="sm">
+                        {getPreferredUnit(
+                          dayWeather.minTemp,
+                          options.isFormatFahrenheit,
+                          options.disableTemperatureDecimals,
+                        )}
+                      </Text>
+                    </Group>
+                  </Table.Td>
+                  <Table.Td>
+                    <Group gap={5} wrap="nowrap">
+                      <IconDroplets size={15} aria-hidden />
+                      <Text size="sm">{dayWeather.humidity === undefined ? "?" : `${dayWeather.humidity}%`}</Text>
+                    </Group>
+                  </Table.Td>
+                  <Table.Td>
+                    <Group gap={5} wrap="nowrap">
+                      <IconWind size={15} aria-hidden />
+                      <Text size="sm">
+                        {getPreferredWindSpeed(dayWeather.maxWindSpeed, options.useImperialSpeed)} /{" "}
+                        {getPreferredWindSpeed(dayWeather.maxWindGusts, options.useImperialSpeed)}
+                      </Text>
+                    </Group>
+                  </Table.Td>
+                  <Table.Td>
+                    <Group gap="xs" wrap="nowrap">
+                      <Group gap={3} wrap="nowrap">
+                        <IconSunrise size={15} aria-hidden />
+                        <Text size="sm">{getPreferredTime(dayWeather.sunrise, locale)}</Text>
+                      </Group>
+                      <Text size="sm" c="dimmed">
+                        /
+                      </Text>
+                      <Group gap={3} wrap="nowrap">
+                        <IconSunset size={15} aria-hidden />
+                        <Text size="sm">{getPreferredTime(dayWeather.sunset, locale)}</Text>
+                      </Group>
+                    </Group>
+                  </Table.Td>
+                </Table.Tr>
+              ))
+            )}
+          </Table.Tbody>
+        </Table>
+      </Table.ScrollContainer>
+    </Stack>
+  );
+};
+
+const DailyWeather = ({ options, weather, isEditMode }: CompactWeatherProps) => {
   const t = useScopedI18n("widget.weather");
   const tCommon = useScopedI18n("common");
 
   return (
     <>
       <Group className="weather-day-group" gap="sm">
-        <HoverCard>
-          <HoverCard.Target>
-            <Box>
+        <Popover position="bottom" withArrow shadow="md">
+          <Popover.Target>
+            <UnstyledButton className={classes.detailsButton} aria-label={t("details")} disabled={isEditMode}>
               <AnimatedWeatherIcon size={30} code={weather.current.weathercode} />
-            </Box>
-          </HoverCard.Target>
-          <HoverCard.Dropdown>
+            </UnstyledButton>
+          </Popover.Target>
+          <Popover.Dropdown>
             <WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />
-          </HoverCard.Dropdown>
-        </HoverCard>
+          </Popover.Dropdown>
+        </Popover>
         <Text fz={30}>
           {getPreferredUnit(
             weather.current.temperature,
@@ -131,7 +342,9 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
   );
 };
 
-const WeeklyForecast = ({ options, weather }: WeatherProps) => {
+const WeeklyForecast = ({ options, weather, isEditMode, maxDays }: CompactWeatherProps & { maxDays: number }) => {
+  const t = useScopedI18n("widget.weather");
+
   return (
     <>
       <Group className="weather-forecast-city-temp-group" wrap="nowrap" gap="md">
@@ -144,16 +357,16 @@ const WeeklyForecast = ({ options, weather }: WeatherProps) => {
           </Group>
         )}
         <Group gap="xs" wrap="nowrap">
-          <HoverCard>
-            <HoverCard.Target>
-              <Box>
+          <Popover position="bottom" withArrow shadow="md">
+            <Popover.Target>
+              <UnstyledButton className={classes.detailsButton} aria-label={t("details")} disabled={isEditMode}>
                 <AnimatedWeatherIcon size={16} code={weather.current.weathercode} />
-              </Box>
-            </HoverCard.Target>
-            <HoverCard.Dropdown>
+              </UnstyledButton>
+            </Popover.Target>
+            <Popover.Dropdown>
               <WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />
-            </HoverCard.Dropdown>
-          </HoverCard>
+            </Popover.Dropdown>
+          </Popover>
           <Text fz={16}>
             {getPreferredUnit(
               weather.current.temperature,
@@ -163,35 +376,46 @@ const WeeklyForecast = ({ options, weather }: WeatherProps) => {
           </Text>
         </Group>
       </Group>
-      <Forecast weather={weather} options={options} />
+      <Forecast weather={weather} options={options} isEditMode={isEditMode} maxDays={maxDays} />
     </>
   );
 };
 
-function Forecast({ weather, options }: WeatherProps) {
+function Forecast({ weather, options, isEditMode, maxDays }: CompactWeatherProps & { maxDays: number }) {
   const dateFormat = options.dateFormat;
+  const t = useScopedI18n("widget.weather");
+  const locale = useCurrentIntlLocale();
   return (
     <Group className="weather-forecast-days-group" w="100%" justify="space-evenly" wrap="nowrap" pb="sm">
-      {weather.daily.slice(0, options.forecastDayCount).map((dayWeather, index) => (
-        <HoverCard key={dayWeather.time} withArrow shadow="md">
-          <HoverCard.Target>
-            <Stack
-              className={combineClasses(
-                "weather-forecast-day-stack",
-                `weather-forecast-day${index}`,
-                `weather-forecast-weekday${dayjs(dayWeather.time).day()}`,
-              )}
-              gap="0"
-              align="center"
+      {weather.daily.slice(0, maxDays).map((dayWeather, index) => (
+        <Popover key={dayWeather.time} position="bottom" withArrow shadow="md">
+          <Popover.Target>
+            <UnstyledButton
+              className={classes.forecastButton}
+              aria-label={t("detailsFor", { date: formatWeatherDate(dayWeather.time, locale, dateFormat) })}
+              disabled={isEditMode}
             >
-              <Text fz="xl">{dayjs(dayWeather.time).format("dd")}</Text>
-              <AnimatedWeatherIcon size={16} code={dayWeather.weatherCode} />
-              <Text fz={16}>
-                {getPreferredUnit(dayWeather.maxTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
-              </Text>
-            </Stack>
-          </HoverCard.Target>
-          <HoverCard.Dropdown>
+              <Stack
+                component="span"
+                className={combineClasses(
+                  "weather-forecast-day-stack",
+                  `weather-forecast-day${index}`,
+                  `weather-forecast-weekday${dayjs(dayWeather.time).day()}`,
+                )}
+                gap="0"
+                align="center"
+              >
+                <Text component="span" fz="xl">
+                  {formatLocalizedDate(dayWeather.time, locale, { weekday: "short" })}
+                </Text>
+                <AnimatedWeatherIcon size={16} code={dayWeather.weatherCode} />
+                <Text component="span" fz={16}>
+                  {getPreferredUnit(dayWeather.maxTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
+                </Text>
+              </Stack>
+            </UnstyledButton>
+          </Popover.Target>
+          <Popover.Dropdown>
             <WeatherDescription
               useImperialSpeed={options.useImperialSpeed}
               dateFormat={dateFormat}
@@ -207,22 +431,34 @@ function Forecast({ weather, options }: WeatherProps) {
                 options.isFormatFahrenheit,
                 options.disableTemperatureDecimals,
               )}
-              sunrise={dayjs(dayWeather.sunrise).format("HH:mm")}
-              sunset={dayjs(dayWeather.sunset).format("HH:mm")}
+              sunrise={getPreferredTime(dayWeather.sunrise, locale)}
+              sunset={getPreferredTime(dayWeather.sunset, locale)}
               maxWindSpeed={dayWeather.maxWindSpeed}
               maxWindGusts={dayWeather.maxWindGusts}
               humidity={dayWeather.humidity}
             />
-          </HoverCard.Dropdown>
-        </HoverCard>
+          </Popover.Dropdown>
+        </Popover>
       ))}
     </Group>
   );
 }
 
-const getPreferredUnit = (value?: number, isFahrenheit = false, disableTemperatureDecimals = false): string =>
-  value
+export const getPreferredUnit = (value?: number, isFahrenheit = false, disableTemperatureDecimals = false): string =>
+  value !== undefined
     ? isFahrenheit
       ? `${(value * (9 / 5) + 32).toFixed(disableTemperatureDecimals ? 0 : 1)}°F`
       : `${value.toFixed(disableTemperatureDecimals ? 0 : 1)}°C`
     : "?";
+
+export const getPreferredWindSpeed = (value: number | undefined, useImperialSpeed = false): string =>
+  value === undefined ? "?" : (useImperialSpeed ? metricToImperial(value) : value).toFixed(1);
+
+export const getPreferredTime = (value: string | undefined, locale = "en-US"): string =>
+  value ? formatLocalizedTime(value, locale) : "?";
+
+export const getVisibleForecastDays = (configuredDays: number, width: number, height: number): number => {
+  const widthBudget = Math.max(1, Math.floor(width / 58));
+  const heightBudget = height < 120 ? 3 : configuredDays;
+  return Math.min(configuredDays, widthBudget, heightBudget);
+};
diff --git a/packages/widgets/src/weather/icon.tsx b/packages/widgets/src/weather/icon.tsx
index 6153484f0..d2c5a28b7 100644
--- a/packages/widgets/src/weather/icon.tsx
+++ b/packages/widgets/src/weather/icon.tsx
@@ -14,11 +14,9 @@ import {
   IconTemperaturePlus,
   IconWind,
 } from "@tabler/icons-react";
-import dayjs from "dayjs";
-
 import { metricToImperial } from "@homarr/common";
 import type { TranslationObject } from "@homarr/translation";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
 
 import type { WidgetProps } from "../definition";
@@ -84,6 +82,7 @@ export const WeatherDescription = ({
 }: WeatherDescriptionProps) => {
   const t = useScopedI18n("widget.weather");
   const tCommon = useScopedI18n("common");
+  const locale = useCurrentIntlLocale();
 
   const { name } = weatherDefinitions.find((definition) => definition.codes.includes(weatherCode)) ?? unknownWeather;
 
@@ -93,7 +92,7 @@ export const WeatherDescription = ({
 
   return (
     <Stack align="center" gap="0">
-      <Text fz="24px">{dayjs(time).format(dateFormat)}</Text>
+      <Text fz="24px">{formatWeatherDate(time, locale, dateFormat)}</Text>
       <Text fz="16px">{t(`kind.${name}`)}</Text>
       <List>
         <List.Item icon={<IconTemperaturePlus size={15} />}>{`${tCommon("information.max")}: ${maxTemp}`}</List.Item>
@@ -124,6 +123,50 @@ export const WeatherDescription = ({
   );
 };
 
+export const formatWeatherDate = (
+  value: string | undefined,
+  locale: string,
+  pattern: WidgetProps<"weather">["options"]["dateFormat"] | undefined,
+) => {
+  if (!value) return "?";
+  const resolvedPattern = pattern ?? "dddd, MMMM D";
+  const date = new Date(/^\d{4}-\d{2}-\d{2}$/.test(value) ? `${value}T00:00:00Z` : value);
+  if (Number.isNaN(date.getTime())) return "?";
+
+  const parts = new Intl.DateTimeFormat(locale, {
+    weekday: "long",
+    year: "numeric",
+    month: resolvedPattern.includes("MMMM") ? "long" : resolvedPattern.includes("MMM") ? "short" : "2-digit",
+    day: resolvedPattern.includes("DD") ? "2-digit" : "numeric",
+    timeZone: "UTC",
+  })
+    .formatToParts(date)
+    .reduce<Record<string, string>>((result, part) => {
+      if (part.type !== "literal") result[part.type] = part.value;
+      return result;
+    }, {});
+
+  switch (resolvedPattern) {
+    case "dddd, D MMMM":
+      return `${parts.weekday}, ${parts.day} ${parts.month}`;
+    case "MMM D":
+      return `${parts.month} ${parts.day}`;
+    case "D MMM":
+      return `${parts.day} ${parts.month}`;
+    case "DD/MM/YYYY":
+      return `${parts.day}/${parts.month}/${parts.year}`;
+    case "MM/DD/YYYY":
+      return `${parts.month}/${parts.day}/${parts.year}`;
+    case "DD/MM":
+      return `${parts.day}/${parts.month}`;
+    case "MM/DD":
+      return `${parts.month}/${parts.day}`;
+    case "dddd, MMMM D":
+    default:
+      return `${parts.weekday}, ${parts.month} ${parts.day}`;
+  }
+};
+
 interface WeatherDefinitionType {
   icon: TablerIcon;
   name: keyof TranslationObject["widget"]["weather"]["kind"];
diff --git a/packages/widgets/src/weather/index.ts b/packages/widgets/src/weather/index.ts
index 6c30b6df8..978c9a855 100644
--- a/packages/widgets/src/weather/index.ts
+++ b/packages/widgets/src/weather/index.ts
@@ -2,11 +2,22 @@ import { IconCloud } from "@tabler/icons-react";
 import dayjs from "dayjs";
 import { z } from "zod/v4";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("weather", {
   icon: IconCloud,
+  queryKey: [["widget", "weather", "atLocation"]],
+  queryMatcher: ({ input }, scope) => {
+    const location = scope.options.location;
+    if (location === null || typeof location !== "object" || !("latitude" in location) || !("longitude" in location)) {
+      return false;
+    }
+    return widgetQueryInputMatches(input, {
+      latitude: location.latitude,
+      longitude: location.longitude,
+    });
+  },
   createOptions() {
     return optionsBuilder.from(
       (factory) => ({
diff --git a/packages/widgets/src/widget-runtime.spec.ts b/packages/widgets/src/widget-runtime.spec.ts
new file mode 100644
index 000000000..6e32ef457
--- /dev/null
+++ b/packages/widgets/src/widget-runtime.spec.ts
@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+
+import { act, createElement, StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+import type { WidgetRuntimeRef } from "./definition";
+import { createWidgetRuntimeState, getWidgetRuntimeQueries } from "./definition";
+import { useWidgetRuntimeActions, useWidgetRuntimeQueries } from "./runtime-hooks";
+
+const queryPath = ["widget", "calendar", "findAllEvents"] as const;
+
+const RuntimeRegistration = ({
+  runtimeRef,
+  month,
+  action,
+}: {
+  runtimeRef: WidgetRuntimeRef;
+  month: number;
+  action?: () => void;
+}) => {
+  useWidgetRuntimeQueries(runtimeRef, [[queryPath, { input: { month } }]]);
+  useWidgetRuntimeActions(runtimeRef, action ? { togglePolling: action } : {});
+  return null;
+};
+
+describe("widget runtime registration", () => {
+  let host: HTMLDivElement | undefined;
+  let root: ReturnType<typeof createRoot> | undefined;
+
+  afterEach(async () => {
+    if (root) await act(async () => root?.unmount());
+    host?.remove();
+    vi.unstubAllGlobals();
+  });
+
+  test("does not publish query identity from an uncommitted render", () => {
+    const runtimeRef = { current: createWidgetRuntimeState() };
+
+    renderToString(createElement(RuntimeRegistration, { runtimeRef, month: 6 }));
+
+    expect(getWidgetRuntimeQueries(runtimeRef)).toEqual([]);
+    expect(runtimeRef.current.actions).toEqual({});
+  });
+
+  test("survives StrictMode, replaces option-dependent queries, and cleans up on remount", async () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+    const runtimeRef = { current: createWidgetRuntimeState() };
+    const action = vi.fn();
+
+    await act(async () =>
+      root?.render(
+        createElement(StrictMode, null, createElement(RuntimeRegistration, { runtimeRef, month: 6, action })),
+      ),
+    );
+    expect(getWidgetRuntimeQueries(runtimeRef)).toEqual([{ path: queryPath, input: { month: 6 } }]);
+    expect(runtimeRef.current.actions.togglePolling).toBe(action);
+
+    await act(async () =>
+      root?.render(
+        createElement(StrictMode, null, createElement(RuntimeRegistration, { runtimeRef, month: 7, action })),
+      ),
+    );
+    expect(getWidgetRuntimeQueries(runtimeRef)).toEqual([{ path: queryPath, input: { month: 7 } }]);
+    expect(runtimeRef.current.actions.togglePolling).toBe(action);
+
+    await act(async () => root?.render(null));
+    expect(getWidgetRuntimeQueries(runtimeRef)).toEqual([]);
+    expect(runtimeRef.current.actions).toEqual({});
+
+    await act(async () => root?.render(createElement(RuntimeRegistration, { runtimeRef, month: 8, action })));
+    expect(getWidgetRuntimeQueries(runtimeRef)).toEqual([{ path: queryPath, input: { month: 8 } }]);
+    expect(runtimeRef.current.actions.togglePolling).toBe(action);
+  });
+});
+
+const assertRuntimeActionTypes = () => {
+  const runtime = createWidgetRuntimeState();
+  runtime.actions.togglePolling = () => undefined;
+  // @ts-expect-error Unknown runtime actions are rejected.
+  runtime.actions.unknownAction = () => undefined;
+};
+
+void assertRuntimeActionTypes;
diff --git a/packages/workshop/package.json b/packages/workshop/package.json
new file mode 100644
index 000000000..06e595211
--- /dev/null
+++ b/packages/workshop/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@homarr/workshop",
+  "version": "0.1.0",
+  "private": true,
+  "license": "Apache-2.0",
+  "type": "module",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*"
+      ]
+    }
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./client": "./src/client.ts",
+    "./backend": "./src/backend.ts",
+    "./schema": "./src/schema.ts"
+  },
+  "scripts": {
+    "clean": "rm -rf .turbo node_modules",
+    "format": "oxfmt .",
+    "lint": "oxlint",
+    "test": "vitest run --root ../.. packages/workshop/src",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@homarr/custom-widgets": "workspace:^0.1.0",
+    "@tanstack/react-query": "catalog:",
+    "pocketbase": "catalog:",
+    "react": "catalog:",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@homarr/tsconfig": "workspace:^0.1.0",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  }
+}
diff --git a/packages/workshop/src/backend.ts b/packages/workshop/src/backend.ts
new file mode 100644
index 000000000..35b3852a8
--- /dev/null
+++ b/packages/workshop/src/backend.ts
@@ -0,0 +1,878 @@
+import PocketBase, { ClientResponseError } from "pocketbase";
+import type { RecordService } from "pocketbase";
+import {
+  keepPreviousData,
+  mutationOptions,
+  queryOptions,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+
+import type { HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
+
+import type {
+  WorkshopComment,
+  WorkshopReport,
+  WorkshopSubmissionDetail,
+  WorkshopSubmissionInput,
+  WorkshopSubmissionSummary,
+  WorkshopSubmissionType,
+  WorkshopUser,
+  WorkshopVote,
+} from "./schema";
+import {
+  WORKSHOP_API_URL,
+  MAX_WORKSHOP_SCREENSHOTS,
+  WORKSHOP_REQUEST_TIMEOUT_MS,
+  WORKSHOP_SCHEMA_BY_TYPE,
+  workshopCommentSchema,
+  workshopReportSchema,
+  workshopSubmissionDetailSchema,
+  workshopSubmissionSummarySchema,
+  workshopSubmissionInputSchema,
+  workshopScreenshotsSchema,
+  workshopUserSchema,
+  workshopVoteSchema,
+} from "./schema";
+
+export interface WorkshopListOptions {
+  page?: number;
+  perPage?: number;
+  sort?: "top" | "newest" | "recent" | "discussed";
+  search?: string;
+  author?: string;
+  type?: WorkshopSubmissionType | "all";
+  includeOutdated?: boolean;
+  signal?: AbortSignal;
+}
+
+export interface WorkshopPage<T> {
+  page: number;
+  perPage: number;
+  totalPages: number;
+  totalItems: number;
+  items: T[];
+}
+
+export interface WorkshopScreenshotChanges {
+  additions?: File[];
+  removals?: string[];
+}
+
+interface WorkshopBaseRecord {
+  [key: string]: unknown;
+  id: string;
+  collectionId: string;
+  collectionName: string;
+}
+
+export interface WorkshopUserRecord extends WorkshopBaseRecord {
+  email: string;
+  emailVisibility: boolean;
+  verified: boolean;
+  username: string;
+  displayName: string;
+  avatarUrl: string;
+  avatar: string;
+  githubUsername: string;
+  githubProfileUrl: string;
+  isAdmin: boolean;
+  created: string;
+  updated: string;
+}
+
+export interface WorkshopSubmissionRecord extends WorkshopBaseRecord {
+  type: WorkshopSubmissionType;
+  title: string;
+  description: string;
+  widgetSchema: string;
+  content: string;
+  revision: number;
+  changelog: string;
+  outdated: boolean;
+  screenshots: string[];
+  author: string;
+  created: string;
+  updated: string;
+  expand?: { author?: WorkshopUserRecord };
+}
+
+export interface WorkshopListingRecord extends Omit<WorkshopSubmissionRecord, "content" | "screenshots"> {
+  screenshots: string[] | string;
+  authorName: string;
+  authorAvatar: string;
+  authorAvatarUrl: string;
+  authorGithubUsername: string;
+  authorGithubProfileUrl: string;
+  score: number;
+  upvotes: number;
+  downvotes: number;
+  commentCount: number;
+  reportCount: number;
+}
+
+export interface WorkshopVoteRecord extends WorkshopBaseRecord {
+  submission: string;
+  user: string;
+  value: 1 | -1;
+  created: string;
+  updated: string;
+}
+
+export interface WorkshopReportRecord extends WorkshopBaseRecord {
+  submission: string;
+  reporter: string;
+  category: WorkshopReport["category"];
+  explanation: string;
+  status: WorkshopReport["status"];
+  created: string;
+  updated: string;
+  expand?: { reporter?: WorkshopUserRecord; submission?: WorkshopSubmissionRecord };
+}
+
+export interface WorkshopCommentRecord extends WorkshopBaseRecord {
+  submission: string;
+  author: string;
+  content: string;
+  created: string;
+  updated: string;
+  expand?: { author?: WorkshopUserRecord };
+}
+
+export interface TypedWorkshopPocketBase extends PocketBase {
+  collection(idOrName: "users"): RecordService<WorkshopUserRecord>;
+  collection(idOrName: "submissions"): RecordService<WorkshopSubmissionRecord>;
+  collection(idOrName: "workshop_listings"): RecordService<WorkshopListingRecord>;
+  collection(idOrName: "votes"): RecordService<WorkshopVoteRecord>;
+  collection(idOrName: "reports"): RecordService<WorkshopReportRecord>;
+  collection(idOrName: "comments"): RecordService<WorkshopCommentRecord>;
+  collection(idOrName: string): RecordService;
+}
+
+const requestSignal = (signal?: AbortSignal) =>
+  AbortSignal.any(
+    signal
+      ? [signal, AbortSignal.timeout(WORKSHOP_REQUEST_TIMEOUT_MS)]
+      : [AbortSignal.timeout(WORKSHOP_REQUEST_TIMEOUT_MS)],
+  );
+
+const timestamp = (value: string) => (Number.isNaN(Date.parse(value)) ? 0 : Date.parse(value));
+
+function sortListings(items: WorkshopSubmissionSummary[], sort: WorkshopListOptions["sort"]) {
+  return items.toSorted((left, right) => {
+    if (sort === "newest") return timestamp(right.created) - timestamp(left.created);
+    if (sort === "recent") return timestamp(right.updated) - timestamp(left.updated);
+    if (sort === "discussed")
+      return right.commentCount - left.commentCount || timestamp(right.created) - timestamp(left.created);
+    return right.score - left.score || timestamp(right.created) - timestamp(left.created);
+  });
+}
+
+function filterListings(items: WorkshopSubmissionSummary[], options: WorkshopListOptions) {
+  const search = options.search?.trim().toLocaleLowerCase();
+  return sortListings(
+    items.filter((item) => {
+      if (options.type && options.type !== "all" && item.type !== options.type) return false;
+      if (options.author && item.author !== options.author) return false;
+      if (options.includeOutdated === false && item.outdated) return false;
+      if (search && !`${item.title}\n${item.description}\n${item.authorName}`.toLocaleLowerCase().includes(search))
+        return false;
+      return true;
+    }),
+    options.sort,
+  );
+}
+
+const listingSort = (sort: WorkshopListOptions["sort"]) => {
+  if (sort === "newest") return "-created";
+  if (sort === "recent") return "-updated";
+  if (sort === "discussed") return "-commentCount,-created";
+  return "-score,-created";
+};
+
+function listingFilter(pocketBase: TypedWorkshopPocketBase, options: WorkshopListOptions) {
+  const filters: string[] = [];
+  if (options.type && options.type !== "all") filters.push(pocketBase.filter("type = {:type}", { type: options.type }));
+  if (options.search?.trim()) {
+    filters.push(
+      pocketBase.filter("(title ~ {:search} || description ~ {:search} || authorName ~ {:search})", {
+        search: options.search.trim(),
+      }),
+    );
+  }
+  if (options.author) filters.push(pocketBase.filter("author = {:author}", { author: options.author }));
+  if (options.includeOutdated === false) filters.push("outdated = false");
+  return filters.join(" && ");
+}
+
+const isViewCompatibilityError = (error: unknown) =>
+  error instanceof ClientResponseError && (error.status === 400 || error.status === 404);
+
+const enrichAuthor = (
+  row: unknown,
+  resolveAvatarUrl?: (record: Record<string, unknown>, user: Record<string, unknown>) => string,
+) => {
+  if (typeof row !== "object" || row === null || Array.isArray(row)) return row;
+  const record = row as Record<string, unknown>;
+  const expand = record.expand;
+  const author =
+    typeof expand === "object" && expand !== null && !Array.isArray(expand)
+      ? (expand as Record<string, unknown>).author
+      : undefined;
+  const user =
+    typeof author === "object" && author !== null && !Array.isArray(author) ? (author as Record<string, unknown>) : {};
+  const githubUsername = record.authorGithubUsername || user.githubUsername || user.username;
+  return {
+    ...record,
+    authorName: record.authorName || user.displayName || user.username,
+    authorAvatarUrl: resolveAvatarUrl?.(record, user) || record.authorAvatarUrl || user.avatarUrl,
+    authorGithubUsername: githubUsername,
+    authorGithubProfileUrl:
+      record.authorGithubProfileUrl ||
+      user.githubProfileUrl ||
+      (typeof githubUsername === "string" && githubUsername
+        ? `https://github.com/${encodeURIComponent(githubUsername)}`
+        : undefined),
+  };
+};
+
+const parseListings = (
+  rows: unknown[],
+  resolveAvatarUrl?: (record: Record<string, unknown>, user: Record<string, unknown>) => string,
+) =>
+  rows.flatMap((row) => {
+    const result = workshopSubmissionSummarySchema.safeParse(enrichAuthor(row, resolveAvatarUrl));
+    return result.success ? [result.data] : [];
+  });
+
+function workshopError(error: unknown, fallback: string) {
+  const rawMessage = error instanceof Error ? error.message : String(error ?? "");
+  if (/popup.*block|blocked.*popup/iu.test(rawMessage))
+    return new Error("GitHub sign-in popup was blocked. Allow popups for this site and try again.", { cause: error });
+  if (/cancel|closed.*popup|popup.*closed/iu.test(rawMessage))
+    return new Error("GitHub sign-in was cancelled before it completed.", { cause: error });
+  if (
+    /provider|oauth|redirect|callback|client.?id/iu.test(rawMessage) &&
+    /invalid|missing|not found|failed/iu.test(rawMessage)
+  )
+    return new Error("GitHub sign-in is not configured correctly on the Workshop server.", { cause: error });
+  if (
+    (error instanceof ClientResponseError && error.status === 0) ||
+    /networkerror|failed to fetch|fetch failed|load failed|connection (?:refused|reset)|econn(?:refused|reset)|offline/iu.test(
+      rawMessage,
+    )
+  )
+    return new Error("Homarr Workshop seems to be unavailable right now. Try again in a moment.", { cause: error });
+  if (error instanceof ClientResponseError) {
+    const sdkMessage = error.data?.message || error.message;
+    const originalMessage =
+      error.originalError instanceof Error ? error.originalError.message : String(error.originalError?.message ?? "");
+    const message = !sdkMessage || sdkMessage === "Something went wrong." ? originalMessage || fallback : sdkMessage;
+    return Object.assign(new Error(message, { cause: error }), { status: error.status });
+  }
+  if (error instanceof DOMException && (error.name === "AbortError" || error.name === "TimeoutError"))
+    return new Error(`${fallback}. The request timed out.`, { cause: error });
+  return error instanceof Error ? error : new Error(fallback);
+}
+
+export class WorkshopBackend {
+  public readonly pocketBase: TypedWorkshopPocketBase;
+
+  public constructor(public readonly baseUrl = WORKSHOP_API_URL) {
+    this.pocketBase = new PocketBase(baseUrl.replace(/\/$/u, "")) as TypedWorkshopPocketBase;
+    this.pocketBase.autoCancellation(false);
+  }
+
+  private userAvatarUrl(record: Record<string, unknown>) {
+    const avatar = typeof record.avatar === "string" ? record.avatar : "";
+    if (avatar) return this.pocketBase.files.getURL(record, avatar);
+    return typeof record.avatarUrl === "string" ? record.avatarUrl : "";
+  }
+
+  private listingAuthorAvatarUrl(record: Record<string, unknown>, user: Record<string, unknown>) {
+    const expandedAvatarUrl = this.userAvatarUrl(user);
+    if (expandedAvatarUrl) return expandedAvatarUrl;
+
+    const author = typeof record.author === "string" ? record.author : "";
+    const avatar = typeof record.authorAvatar === "string" ? record.authorAvatar : "";
+    if (!author || !avatar) return "";
+    return `${this.baseUrl}/api/files/users/${encodeURIComponent(author)}/${encodeURIComponent(avatar)}`;
+  }
+
+  public get currentUser(): WorkshopUser | null {
+    const record = this.pocketBase.authStore.record;
+    if (!record) return null;
+    return workshopUserSchema.parse({
+      id: record.id,
+      displayName: record.displayName || record.name || record.username || "Community member",
+      avatarUrl: this.userAvatarUrl(record),
+      githubUsername: record.githubUsername || "",
+      githubProfileUrl:
+        record.githubProfileUrl ||
+        (record.githubUsername ? `https://github.com/${encodeURIComponent(record.githubUsername)}` : ""),
+      isAdmin: record.isAdmin === true,
+    });
+  }
+
+  public subscribeToAuth(listener: (user: WorkshopUser | null) => void) {
+    return this.pocketBase.authStore.onChange(() => listener(this.currentUser), true);
+  }
+
+  public async refreshAuth() {
+    if (!this.pocketBase.authStore.isValid) return null;
+    try {
+      await this.pocketBase.collection("users").authRefresh();
+      return this.currentUser;
+    } catch (error) {
+      if (error instanceof ClientResponseError && (error.status === 401 || error.status === 403)) {
+        this.pocketBase.authStore.clear();
+        return null;
+      }
+      return this.currentUser;
+    }
+  }
+
+  public async signInWithGitHub() {
+    try {
+      const auth = await this.pocketBase.collection("users").authWithOAuth2({
+        provider: "github",
+        createData: { displayName: "GitHub user" },
+      });
+      this.pocketBase.authStore.save(auth.token, auth.record);
+      return this.currentUser;
+    } catch (error) {
+      throw workshopError(error, "GitHub sign-in failed");
+    }
+  }
+
+  public signOut() {
+    this.pocketBase.authStore.clear();
+  }
+
+  public async list(options: WorkshopListOptions = {}): Promise<WorkshopPage<WorkshopSubmissionSummary>> {
+    try {
+      const page = options.page ?? 1;
+      const perPage = options.perPage ?? 24;
+      try {
+        const result = await this.pocketBase.collection("workshop_listings").getList(page, perPage, {
+          filter: listingFilter(this.pocketBase, options),
+          sort: listingSort(options.sort),
+          signal: requestSignal(options.signal),
+        });
+        return {
+          ...result,
+          items: parseListings(result.items, (record, user) => this.listingAuthorAvatarUrl(record, user)),
+        };
+      } catch (error) {
+        if (!isViewCompatibilityError(error)) throw error;
+        const items = filterListings(await this.loadListingsFallback(options.signal), options);
+        return {
+          page,
+          perPage,
+          totalItems: items.length,
+          totalPages: Math.ceil(items.length / perPage),
+          items: items.slice((page - 1) * perPage, page * perPage),
+        };
+      }
+    } catch (error) {
+      throw workshopError(error, "Failed to load Workshop submissions");
+    }
+  }
+
+  public async listAll(options: Omit<WorkshopListOptions, "page" | "perPage"> = {}) {
+    try {
+      try {
+        const rows = await this.pocketBase.collection("workshop_listings").getFullList({
+          batch: 200,
+          filter: listingFilter(this.pocketBase, options),
+          sort: listingSort(options.sort),
+          signal: requestSignal(options.signal),
+        });
+        return parseListings(rows, (record, user) => this.listingAuthorAvatarUrl(record, user));
+      } catch (error) {
+        if (!isViewCompatibilityError(error)) throw error;
+        return filterListings(await this.loadListingsFallback(options.signal), options);
+      }
+    } catch (error) {
+      throw workshopError(error, "Failed to load Workshop submissions");
+    }
+  }
+
+  private async loadListingsFallback(signal?: AbortSignal) {
+    const options = { batch: 200, signal: requestSignal(signal) };
+    const rows = await this.pocketBase
+      .collection("workshop_listings")
+      .getFullList(options)
+      .catch((error: unknown) => {
+        if (isViewCompatibilityError(error))
+          return this.pocketBase.collection("submissions").getFullList({ ...options, expand: "author" });
+        throw error;
+      });
+    return parseListings(rows, (record, user) => this.listingAuthorAvatarUrl(record, user));
+  }
+
+  public async get(id: string, signal?: AbortSignal): Promise<WorkshopSubmissionDetail> {
+    try {
+      const submission = await this.pocketBase
+        .collection("submissions")
+        .getOne(id, { signal: requestSignal(signal), expand: "author" });
+      const listing = await this.pocketBase
+        .collection("workshop_listings")
+        .getOne(id, { signal: requestSignal(signal) })
+        .catch((error: unknown) => {
+          if (error instanceof ClientResponseError && (error.status === 400 || error.status === 404)) return {};
+          throw error;
+        });
+      return workshopSubmissionDetailSchema.parse(
+        enrichAuthor(
+          { ...submission, ...listing, expand: submission.expand, content: submission.content },
+          (record, user) => this.listingAuthorAvatarUrl(record, user),
+        ),
+      );
+    } catch (error) {
+      throw workshopError(error, "Submission not found");
+    }
+  }
+
+  public fileUrl(submissionId: string, filename: string, thumb?: string) {
+    return `${this.baseUrl}/api/files/submissions/${submissionId}/${encodeURIComponent(filename)}${thumb ? `?thumb=${encodeURIComponent(thumb)}` : ""}`;
+  }
+
+  public async create(input: WorkshopSubmissionInput, screenshots: File[] = []) {
+    const parsed = workshopSubmissionInputSchema.parse(input);
+    workshopScreenshotsSchema.parse(screenshots);
+    const data = new FormData();
+    Object.entries(parsed).forEach(([key, value]) => data.set(key, typeof value === "string" ? value : String(value)));
+    data.set("author", this.currentUser?.id ?? "");
+    data.set("widgetSchema", WORKSHOP_SCHEMA_BY_TYPE[parsed.type]);
+    screenshots.forEach((file) => data.append("screenshots", file));
+    try {
+      const result = await this.pocketBase.collection("submissions").create(data);
+      return this.get(result.id);
+    } catch (error) {
+      throw workshopError(error, "Failed to publish submission");
+    }
+  }
+
+  public async update(id: string, input: WorkshopSubmissionInput, screenshotChanges: WorkshopScreenshotChanges = {}) {
+    const parsed = workshopSubmissionInputSchema.parse(input);
+    const additions = screenshotChanges.additions ?? [];
+    const removals = screenshotChanges.removals ?? [];
+    workshopScreenshotsSchema.parse(additions);
+    const current = await this.get(id);
+    const removalSet = new Set(removals);
+    const retainedCount = current.screenshots.filter((filename) => !removalSet.has(filename)).length;
+    if (retainedCount + additions.length > MAX_WORKSHOP_SCREENSHOTS)
+      throw new Error(`A submission can have up to ${MAX_WORKSHOP_SCREENSHOTS} screenshots`);
+
+    const data: Record<string, unknown> = {
+      ...parsed,
+      expectedRevision: current.revision,
+    };
+    if (additions.length > 0) data["screenshots+"] = additions;
+    if (removals.length > 0) data["screenshots-"] = removals;
+    try {
+      await this.pocketBase.collection("submissions").update(id, data);
+      return this.get(id);
+    } catch (error) {
+      throw workshopError(error, "Failed to update submission");
+    }
+  }
+
+  public async delete(id: string) {
+    try {
+      await this.pocketBase.collection("submissions").delete(id);
+    } catch (error) {
+      throw workshopError(error, "Failed to delete submission");
+    }
+  }
+
+  public async vote(submission: string, value: 1 | -1): Promise<WorkshopVote | null> {
+    const user = this.currentUser?.id ?? "";
+    const filter = this.pocketBase.filter("submission = {:submission} && user = {:user}", { submission, user });
+    try {
+      const existing = await this.pocketBase
+        .collection("votes")
+        .getFirstListItem(filter)
+        .catch((error: unknown) =>
+          error instanceof ClientResponseError && error.status === 404 ? null : Promise.reject(error),
+        );
+      if (existing?.value === value) {
+        await this.pocketBase.collection("votes").delete(existing.id);
+        return null;
+      }
+      const record = existing
+        ? await this.pocketBase.collection("votes").update(existing.id, { value })
+        : await this.pocketBase.collection("votes").create({ submission, user, value });
+      return workshopVoteSchema.parse(record);
+    } catch (error) {
+      throw workshopError(error, "Failed to save vote");
+    }
+  }
+
+  public async listVotesForCurrentUser(): Promise<WorkshopVote[]> {
+    const user = this.currentUser?.id;
+    if (!user) return [];
+    try {
+      const rows = await this.pocketBase.collection("votes").getFullList({
+        filter: this.pocketBase.filter("user = {:user}", { user }),
+      });
+      return rows.map((row) => workshopVoteSchema.parse(row));
+    } catch (error) {
+      throw workshopError(error, "Failed to load votes");
+    }
+  }
+
+  public async report(submission: string, category: WorkshopReport["category"], explanation: string) {
+    try {
+      return workshopReportSchema.parse(
+        await this.pocketBase.collection("reports").create({
+          submission,
+          reporter: this.currentUser?.id ?? "",
+          category,
+          explanation: explanation.trim(),
+          status: "open",
+        }),
+      );
+    } catch (error) {
+      throw workshopError(error, "Failed to report submission");
+    }
+  }
+
+  public async listReports(): Promise<WorkshopReport[]> {
+    try {
+      const items = await this.pocketBase
+        .collection("reports")
+        .getFullList({ batch: 200, filter: "status = 'open'", sort: "-created", expand: "reporter,submission" });
+      return items.map((item) =>
+        workshopReportSchema.parse({
+          ...item,
+          reporterName: item.expand?.reporter?.displayName,
+          submissionTitle: item.expand?.submission?.title,
+        }),
+      );
+    } catch (error) {
+      throw workshopError(error, "Failed to load reports");
+    }
+  }
+
+  public async dismissReport(id: string) {
+    try {
+      await this.pocketBase.collection("reports").update(id, { status: "dismissed" });
+    } catch (error) {
+      throw workshopError(error, "Failed to dismiss report");
+    }
+  }
+
+  public async toggleOutdated(id: string, outdated: boolean) {
+    try {
+      const current = await this.get(id);
+      await this.pocketBase.collection("submissions").update(id, { outdated, expectedRevision: current.revision });
+      return this.get(id);
+    } catch (error) {
+      throw workshopError(error, "Failed to update submission status");
+    }
+  }
+
+  public async listComments(submission: string): Promise<WorkshopComment[]> {
+    try {
+      const rows = await this.pocketBase.collection("comments").getFullList({
+        filter: this.pocketBase.filter("submission = {:submission}", { submission }),
+        sort: "created",
+        expand: "author",
+      });
+      return rows.map((row) =>
+        workshopCommentSchema.parse({
+          ...row,
+          authorName: row.expand?.author?.displayName,
+          authorAvatarUrl: row.expand?.author ? this.userAvatarUrl(row.expand.author) : undefined,
+          authorGithubProfileUrl:
+            row.expand?.author?.githubProfileUrl ||
+            (row.expand?.author?.githubUsername
+              ? `https://github.com/${encodeURIComponent(row.expand.author.githubUsername)}`
+              : undefined),
+        }),
+      );
+    } catch (error) {
+      throw workshopError(error, "Failed to load comments");
+    }
+  }
+
+  public async createComment(submission: string, content: string): Promise<WorkshopComment> {
+    try {
+      const row = await this.pocketBase
+        .collection("comments")
+        .create({ submission, author: this.currentUser?.id ?? "", content: content.trim() }, { expand: "author" });
+      return workshopCommentSchema.parse({
+        ...row,
+        authorName: row.expand?.author?.displayName,
+        authorAvatarUrl: row.expand?.author ? this.userAvatarUrl(row.expand.author) : undefined,
+        authorGithubProfileUrl:
+          row.expand?.author?.githubProfileUrl ||
+          (row.expand?.author?.githubUsername
+            ? `https://github.com/${encodeURIComponent(row.expand.author.githubUsername)}`
+            : undefined),
+      });
+    } catch (error) {
+      throw workshopError(error, "Failed to post comment");
+    }
+  }
+
+  public async updateComment(id: string, content: string): Promise<WorkshopComment> {
+    try {
+      const row = await this.pocketBase
+        .collection("comments")
+        .update(id, { content: content.trim() }, { expand: "author" });
+      return workshopCommentSchema.parse({
+        ...row,
+        authorName: row.expand?.author?.displayName,
+        authorAvatarUrl: row.expand?.author ? this.userAvatarUrl(row.expand.author) : undefined,
+        authorGithubProfileUrl:
+          row.expand?.author?.githubProfileUrl ||
+          (row.expand?.author?.githubUsername
+            ? `https://github.com/${encodeURIComponent(row.expand.author.githubUsername)}`
+            : undefined),
+      });
+    } catch (error) {
+      throw workshopError(error, "Failed to update comment");
+    }
+  }
+
+  public async deleteComment(id: string) {
+    try {
+      await this.pocketBase.collection("comments").delete(id);
+    } catch (error) {
+      throw workshopError(error, "Failed to delete comment");
+    }
+  }
+}
+
+const listKeyOptions = (options: WorkshopListOptions) => ({
+  page: options.page,
+  perPage: options.perPage,
+  sort: options.sort,
+  search: options.search,
+  author: options.author,
+  type: options.type,
+  includeOutdated: options.includeOutdated,
+});
+
+export const workshopQueryKeys = {
+  all: ["workshop"] as const,
+  lists: (baseUrl?: string) => [...workshopQueryKeys.all, "list", baseUrl] as const,
+  list: (backend: WorkshopBackend, options: WorkshopListOptions) =>
+    [...workshopQueryKeys.lists(backend.baseUrl), listKeyOptions(options)] as const,
+  details: (baseUrl?: string) => [...workshopQueryKeys.all, "detail", baseUrl] as const,
+  detail: (backend: WorkshopBackend, id: string) => [...workshopQueryKeys.details(backend.baseUrl), id] as const,
+  reports: (backend: WorkshopBackend) => [...workshopQueryKeys.all, "reports", backend.baseUrl] as const,
+  comments: (backend: WorkshopBackend, submission: string) =>
+    [...workshopQueryKeys.all, "comments", backend.baseUrl, submission] as const,
+};
+
+export const workshopListQueryOptions = (backend: WorkshopBackend, options: WorkshopListOptions = {}) =>
+  queryOptions({
+    queryKey: workshopQueryKeys.list(backend, options),
+    queryFn: ({ signal }) => backend.list({ ...options, signal }),
+    placeholderData: keepPreviousData,
+  });
+
+export const workshopSubmissionQueryOptions = (backend: WorkshopBackend, id: string) =>
+  queryOptions({
+    queryKey: workshopQueryKeys.detail(backend, id),
+    queryFn: ({ signal }) => backend.get(id, signal),
+    enabled: id.length > 0,
+  });
+
+export const workshopReportsQueryOptions = (backend: WorkshopBackend) =>
+  queryOptions({ queryKey: workshopQueryKeys.reports(backend), queryFn: () => backend.listReports() });
+
+export const workshopCommentsQueryOptions = (backend: WorkshopBackend, submission: string) =>
+  queryOptions({
+    queryKey: workshopQueryKeys.comments(backend, submission),
+    queryFn: () => backend.listComments(submission),
+    enabled: submission.length > 0,
+  });
+
+export const workshopCreateMutationOptions = (backend: WorkshopBackend) =>
+  mutationOptions({
+    mutationFn: ({ input, screenshots = [] }: { input: WorkshopSubmissionInput; screenshots?: File[] }) =>
+      backend.create(input, screenshots),
+  });
+
+export const workshopUpdateMutationOptions = (backend: WorkshopBackend) =>
+  mutationOptions({
+    mutationFn: ({
+      id,
+      input,
+      screenshotChanges,
+    }: {
+      id: string;
+      input: WorkshopSubmissionInput;
+      screenshotChanges?: WorkshopScreenshotChanges;
+    }) => backend.update(id, input, screenshotChanges),
+  });
+
+export const workshopDeleteMutationOptions = (backend: WorkshopBackend) =>
+  mutationOptions({ mutationFn: (id: string) => backend.delete(id) });
+
+export const workshopVoteMutationOptions = (backend: WorkshopBackend) =>
+  mutationOptions({
+    mutationFn: ({ submission, value }: { submission: string; value: 1 | -1 }) => backend.vote(submission, value),
+  });
+
+export const workshopReportMutationOptions = (backend: WorkshopBackend) =>
+  mutationOptions({
+    mutationFn: ({
+      submission,
+      category,
+      explanation,
+    }: Pick<WorkshopReport, "submission" | "category" | "explanation">) =>
+      backend.report(submission, category, explanation),
+  });
+
+export const workshopDismissReportMutationOptions = (backend: WorkshopBackend) =>
+  mutationOptions({ mutationFn: (id: string) => backend.dismissReport(id) });
+
+export const workshopToggleOutdatedMutationOptions = (backend: WorkshopBackend) =>
+  mutationOptions({
+    mutationFn: ({ id, outdated }: { id: string; outdated: boolean }) => backend.toggleOutdated(id, outdated),
+  });
+
+export const workshopCreateCommentMutationOptions = (backend: WorkshopBackend) =>
+  mutationOptions({
+    mutationFn: ({ submission, content }: { submission: string; content: string }) =>
+      backend.createComment(submission, content),
+  });
+
+export const workshopUpdateCommentMutationOptions = (backend: WorkshopBackend) =>
+  mutationOptions({
+    mutationFn: ({ id, content }: { id: string; content: string }) => backend.updateComment(id, content),
+  });
+
+export const workshopDeleteCommentMutationOptions = (backend: WorkshopBackend) =>
+  mutationOptions({
+    mutationFn: ({ id }: { id: string; submission: string }) => backend.deleteComment(id),
+  });
+
+export function useWorkshopQuery(backend: WorkshopBackend, options: WorkshopListOptions = {}) {
+  return useQuery(workshopListQueryOptions(backend, options));
+}
+
+export function useWorkshopSubmissionQuery(backend: WorkshopBackend, id: string) {
+  return useQuery(workshopSubmissionQueryOptions(backend, id));
+}
+
+export function useWorkshopReportsQuery(backend: WorkshopBackend) {
+  return useQuery(workshopReportsQueryOptions(backend));
+}
+
+export function useWorkshopCommentsQuery(backend: WorkshopBackend, submission: string) {
+  return useQuery(workshopCommentsQueryOptions(backend, submission));
+}
+
+function useWorkshopInvalidation(backend: WorkshopBackend) {
+  const queryClient = useQueryClient();
+  return {
+    lists: () => queryClient.invalidateQueries({ queryKey: workshopQueryKeys.lists(backend.baseUrl) }),
+    details: () => queryClient.invalidateQueries({ queryKey: workshopQueryKeys.details(backend.baseUrl) }),
+    detail: (id: string) => queryClient.invalidateQueries({ queryKey: workshopQueryKeys.detail(backend, id) }),
+    removeDetail: (id: string) => queryClient.removeQueries({ queryKey: workshopQueryKeys.detail(backend, id) }),
+    reports: () => queryClient.invalidateQueries({ queryKey: workshopQueryKeys.reports(backend) }),
+    comments: (submission: string) =>
+      queryClient.invalidateQueries({ queryKey: workshopQueryKeys.comments(backend, submission) }),
+  };
+}
+
+export function useWorkshopCreateMutation(backend: WorkshopBackend) {
+  const invalidation = useWorkshopInvalidation(backend);
+  return useMutation({ ...workshopCreateMutationOptions(backend), onSuccess: invalidation.lists });
+}
+
+export function useWorkshopUpdateMutation(backend: WorkshopBackend) {
+  const invalidation = useWorkshopInvalidation(backend);
+  return useMutation({
+    ...workshopUpdateMutationOptions(backend),
+    onSuccess: async (submission) => Promise.all([invalidation.lists(), invalidation.detail(submission.id)]),
+  });
+}
+
+export function useWorkshopDeleteMutation(backend: WorkshopBackend) {
+  const invalidation = useWorkshopInvalidation(backend);
+  return useMutation({
+    ...workshopDeleteMutationOptions(backend),
+    onSuccess: async (_result, id) => {
+      invalidation.removeDetail(id);
+      await invalidation.lists();
+    },
+  });
+}
+
+export function useWorkshopVoteMutation(backend: WorkshopBackend) {
+  const invalidation = useWorkshopInvalidation(backend);
+  return useMutation({
+    ...workshopVoteMutationOptions(backend),
+    onSuccess: async () => Promise.all([invalidation.lists(), invalidation.details()]),
+  });
+}
+
+export function useWorkshopReportMutation(backend: WorkshopBackend) {
+  const invalidation = useWorkshopInvalidation(backend);
+  return useMutation({
+    ...workshopReportMutationOptions(backend),
+    onSuccess: async () => Promise.all([invalidation.lists(), invalidation.details(), invalidation.reports()]),
+  });
+}
+
+export function useWorkshopDismissReportMutation(backend: WorkshopBackend) {
+  const invalidation = useWorkshopInvalidation(backend);
+  return useMutation({
+    ...workshopDismissReportMutationOptions(backend),
+    onSuccess: async () => Promise.all([invalidation.reports(), invalidation.lists(), invalidation.details()]),
+  });
+}
+
+export function useWorkshopToggleOutdatedMutation(backend: WorkshopBackend) {
+  const invalidation = useWorkshopInvalidation(backend);
+  return useMutation({
+    ...workshopToggleOutdatedMutationOptions(backend),
+    onSuccess: async (submission) => Promise.all([invalidation.lists(), invalidation.detail(submission.id)]),
+  });
+}
+
+export function useWorkshopCreateCommentMutation(backend: WorkshopBackend) {
+  const invalidation = useWorkshopInvalidation(backend);
+  return useMutation({
+    ...workshopCreateCommentMutationOptions(backend),
+    onSuccess: async (_comment, input) =>
+      Promise.all([invalidation.comments(input.submission), invalidation.lists(), invalidation.details()]),
+  });
+}
+
+export function useWorkshopUpdateCommentMutation(backend: WorkshopBackend) {
+  const invalidation = useWorkshopInvalidation(backend);
+  return useMutation({
+    ...workshopUpdateCommentMutationOptions(backend),
+    onSuccess: (comment) => invalidation.comments(comment.submission),
+  });
+}
+
+export function useWorkshopDeleteCommentMutation(backend: WorkshopBackend) {
+  const invalidation = useWorkshopInvalidation(backend);
+  return useMutation({
+    ...workshopDeleteCommentMutationOptions(backend),
+    onSuccess: async (_result, input) =>
+      Promise.all([invalidation.comments(input.submission), invalidation.lists(), invalidation.details()]),
+  });
+}
+
+export function useWorkshopWidgetImportMutation(
+  install: ((widget: HomarrCustomWidgetV2) => Promise<void>) | undefined,
+  onSuccess?: () => void,
+) {
+  return useMutation({ mutationFn: async (widget: HomarrCustomWidgetV2) => install?.(widget), onSuccess });
+}
+
+export function useWorkshopCssImportMutation(useCss: ((css: string) => void) | undefined, onSuccess?: () => void) {
+  return useMutation({ mutationFn: async (css: string) => useCss?.(css), onSuccess });
+}
diff --git a/packages/workshop/src/client.spec.ts b/packages/workshop/src/client.spec.ts
new file mode 100644
index 000000000..5942cabc8
--- /dev/null
+++ b/packages/workshop/src/client.spec.ts
@@ -0,0 +1,273 @@
+import { beforeEach, describe, expect, expectTypeOf, test, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  autoCancellation: vi.fn(),
+  authWithOAuth2: vi.fn(),
+  create: vi.fn(),
+  getFullList: vi.fn(),
+  getList: vi.fn(),
+  update: vi.fn(),
+}));
+
+vi.mock("pocketbase", () => {
+  class MockPocketBase {
+    public readonly authStore = {
+      record: null as Record<string, unknown> | null,
+      isValid: false,
+      save: (_token: string, record: Record<string, unknown>) => {
+        this.authStore.record = record;
+      },
+    };
+
+    public collection() {
+      return mocks;
+    }
+
+    public autoCancellation(enabled: boolean) {
+      mocks.autoCancellation(enabled);
+      return this;
+    }
+
+    public filter(template: string, values: Record<string, string>) {
+      return template.replaceAll(/\{:(\w+)\}/gu, (_match, key: string) => `'${values[key]}'`);
+    }
+  }
+
+  return {
+    default: MockPocketBase,
+    ClientResponseError: class ClientResponseError extends Error {
+      public constructor(public readonly status = 0) {
+        super("PocketBase request failed");
+      }
+    },
+  };
+});
+
+import { ClientResponseError } from "pocketbase";
+import type { RecordService } from "pocketbase";
+
+import { WorkshopBackend } from "./backend";
+import type { WorkshopSubmissionRecord } from "./backend";
+import * as workshopClient from "./client";
+
+describe("WorkshopBackend", () => {
+  test("resolves the advertised client module", () => {
+    expect(workshopClient.WorkshopBackend).toBe(WorkshopBackend);
+    expect(workshopClient.validateWorkshopContent).toBeTypeOf("function");
+  });
+
+  beforeEach(() => {
+    mocks.autoCancellation.mockReset();
+    mocks.authWithOAuth2.mockReset();
+    mocks.create.mockReset();
+    mocks.getFullList.mockReset();
+    mocks.getList.mockReset();
+    mocks.update.mockReset();
+  });
+
+  test("lets PocketBase own the complete GitHub popup flow", async () => {
+    mocks.authWithOAuth2.mockResolvedValue({
+      token: "token",
+      record: {
+        id: "user-id",
+        displayName: "octocat",
+        githubUsername: "octocat",
+        githubProfileUrl: "https://github.com/octocat",
+      },
+      meta: { username: "octocat" },
+    });
+
+    const client = new WorkshopBackend("https://workshop.example.com");
+    const user = await client.signInWithGitHub();
+
+    expect(mocks.authWithOAuth2).toHaveBeenCalledWith({
+      provider: "github",
+      createData: { displayName: "GitHub user" },
+    });
+    expect(mocks.authWithOAuth2.mock.calls[0]?.[0]).not.toHaveProperty("requestKey");
+    expect(mocks.authWithOAuth2.mock.calls[0]?.[0]).not.toHaveProperty("urlCallback");
+    expect(mocks.update).not.toHaveBeenCalled();
+    expect(user).toMatchObject({ displayName: "octocat", githubUsername: "octocat" });
+  });
+
+  test("exposes the typed submission collection service", () => {
+    const client = new WorkshopBackend("https://workshop.example.com");
+    expectTypeOf(client.pocketBase.collection("submissions")).toEqualTypeOf<RecordService<WorkshopSubmissionRecord>>();
+    expect(mocks.autoCancellation).toHaveBeenCalledWith(false);
+  });
+
+  test("sends the exported schema while leaving initial revision ownership to PocketBase", async () => {
+    const client = new WorkshopBackend("https://workshop.example.com");
+    client.pocketBase.authStore.save("token", { id: "author-id" } as never);
+    mocks.create.mockResolvedValue({ id: "submission-id" });
+    vi.spyOn(client, "get").mockResolvedValue(listingRecord() as never);
+
+    await client.create({
+      type: "customCss",
+      title: "Dashboard theme",
+      description: "A theme",
+      content: ".dashboard { color: red; }",
+      changelog: "",
+      outdated: false,
+    });
+
+    const payload = mocks.create.mock.calls[0]?.[0] as FormData;
+    expect(payload.get("author")).toBe("author-id");
+    expect(payload.get("widgetSchema")).toBe("homarr-custom-css-v1");
+    expect(payload.get("revision")).toBeNull();
+  });
+
+  test("appends and removes screenshots without replacing retained files", async () => {
+    const client = new WorkshopBackend("https://workshop.example.com");
+    const current = {
+      ...listingRecord(),
+      type: "customCss" as const,
+      content: ".dashboard { color: red; }",
+      screenshots: ["keep.png", "remove.png"],
+      revision: 2,
+    };
+    vi.spyOn(client, "get").mockResolvedValue(current as never);
+    mocks.update.mockResolvedValue(current);
+    const addition = new File(["image"], "new.png", { type: "image/png" });
+
+    await client.update(
+      current.id,
+      {
+        type: "customCss",
+        title: current.title,
+        description: current.description,
+        content: current.content,
+        changelog: "Updated screenshots",
+        outdated: false,
+      },
+      { additions: [addition], removals: ["remove.png"] },
+    );
+
+    expect(mocks.update).toHaveBeenCalledWith(
+      current.id,
+      expect.objectContaining({
+        "screenshots+": [addition],
+        "screenshots-": ["remove.png"],
+        expectedRevision: 2,
+      }),
+    );
+    const payload = mocks.update.mock.calls[0]?.[1];
+    expect(payload).not.toHaveProperty("revision");
+    expect(payload).not.toHaveProperty("widgetSchema");
+  });
+
+  test("uses the current revision when toggling submission status", async () => {
+    const client = new WorkshopBackend("https://workshop.example.com");
+    const current = {
+      ...listingRecord(),
+      type: "customCss" as const,
+      content: ".dashboard { color: red; }",
+      revision: 4,
+      outdated: false,
+    };
+    const updated = { ...current, revision: 5, outdated: true };
+    vi.spyOn(client, "get")
+      .mockResolvedValueOnce(current as never)
+      .mockResolvedValueOnce(updated as never);
+    mocks.update.mockResolvedValue(updated);
+
+    await expect(client.toggleOutdated(current.id, true)).resolves.toMatchObject({
+      revision: 5,
+      outdated: true,
+    });
+    expect(mocks.update).toHaveBeenCalledWith(current.id, {
+      outdated: true,
+      expectedRevision: 4,
+    });
+  });
+
+  test("uses PocketBase filtering and pagination when the listing view is current", async () => {
+    mocks.getList.mockResolvedValue({
+      page: 1,
+      perPage: 12,
+      totalPages: 1,
+      totalItems: 1,
+      items: [listingRecord()],
+    });
+
+    const client = new WorkshopBackend("https://workshop.example.com");
+    const result = await client.list({ type: "customWidget", sort: "top", page: 1, perPage: 12 });
+
+    expect(result.items).toHaveLength(1);
+    expect(result.items[0]).toMatchObject({ type: "customWidget", score: 0, revision: 1 });
+    expect(mocks.getList).toHaveBeenCalledWith(
+      1,
+      12,
+      expect.objectContaining({ filter: "type = 'customWidget'", sort: "-score,-created" }),
+    );
+    expect(mocks.getFullList).not.toHaveBeenCalled();
+  });
+
+  test("searches listing titles, descriptions, and authors", async () => {
+    mocks.getList.mockResolvedValue({
+      page: 1,
+      perPage: 12,
+      totalPages: 1,
+      totalItems: 1,
+      items: [listingRecord()],
+    });
+
+    const client = new WorkshopBackend("https://workshop.example.com");
+    await client.list({ search: "active streams", page: 1, perPage: 12 });
+
+    expect(mocks.getList).toHaveBeenCalledWith(
+      1,
+      12,
+      expect.objectContaining({
+        filter: "(title ~ 'active streams' || description ~ 'active streams' || authorName ~ 'active streams')",
+      }),
+    );
+  });
+
+  test("retries an incomplete listing view without missing-field filters", async () => {
+    mocks.getList.mockRejectedValueOnce(new ClientResponseError(400));
+    mocks.getFullList.mockResolvedValueOnce([listingRecord()]);
+
+    const client = new WorkshopBackend("https://workshop.example.com");
+    const result = await client.list({ type: "customWidget" });
+
+    expect(result.items).toHaveLength(1);
+    expect(mocks.getFullList).toHaveBeenCalledWith(
+      expect.not.objectContaining({ filter: expect.anything(), sort: expect.anything() }),
+    );
+  });
+
+  test("falls back to base submissions when an old listing view itself returns 400", async () => {
+    mocks.getList.mockRejectedValueOnce(new ClientResponseError(400));
+    mocks.getFullList.mockRejectedValueOnce(new ClientResponseError(400)).mockResolvedValueOnce([listingRecord()]);
+
+    const client = new WorkshopBackend("https://workshop.example.com");
+    const result = await client.list({ type: "customWidget" });
+
+    expect(result.items).toHaveLength(1);
+    expect(mocks.getFullList).toHaveBeenCalledTimes(2);
+  });
+
+  test("replaces low-level network errors with an actionable Workshop outage message", async () => {
+    mocks.getList.mockRejectedValueOnce(new Error("NetworkError when attempting to fetch resource."));
+
+    const client = new WorkshopBackend("https://workshop.example.com");
+
+    await expect(client.list({ type: "customWidget" })).rejects.toThrow(
+      "Homarr Workshop seems to be unavailable right now. Try again in a moment.",
+    );
+  });
+});
+
+function listingRecord() {
+  return {
+    id: "submission-id",
+    title: "Tautulli Activity",
+    description: "Shows active streams",
+    widgetSchema: "homarr-custom-widget-v2",
+    screenshots: [],
+    author: "author-id",
+    created: "2026-07-21 14:19:25.790Z",
+    updated: "2026-07-21 14:19:25.790Z",
+  };
+}
diff --git a/packages/workshop/src/client.ts b/packages/workshop/src/client.ts
new file mode 100644
index 000000000..7b5eafed4
--- /dev/null
+++ b/packages/workshop/src/client.ts
@@ -0,0 +1,2 @@
+export * from "./backend";
+export * from "./schema";
diff --git a/packages/workshop/src/index.ts b/packages/workshop/src/index.ts
new file mode 100644
index 000000000..7b5eafed4
--- /dev/null
+++ b/packages/workshop/src/index.ts
@@ -0,0 +1,2 @@
+export * from "./backend";
+export * from "./schema";
diff --git a/packages/workshop/src/schema.spec.ts b/packages/workshop/src/schema.spec.ts
new file mode 100644
index 000000000..a0b807f12
--- /dev/null
+++ b/packages/workshop/src/schema.spec.ts
@@ -0,0 +1,131 @@
+import { describe, expect, test } from "vitest";
+
+import { CUSTOM_WIDGET_STARTER } from "@homarr/custom-widgets/core";
+
+import {
+  normalizeHttpUrl,
+  resolveHomarrUrlConfig,
+  validateWorkshopWidget,
+  workshopSubmissionInputSchema,
+  workshopSubmissionSummarySchema,
+} from "./schema";
+
+describe("Workshop URL configuration", () => {
+  test("normalizes the URL contract and derives Workshop defaults", () => {
+    expect(
+      resolveHomarrUrlConfig({
+        homarrWebsiteUrl: "https://docs.example.com/",
+        workshopApiUrl: "https://api.example.com///",
+      }),
+    ).toEqual({
+      homarrWebsiteUrl: "https://docs.example.com",
+      workshopApiUrl: "https://api.example.com",
+      workshopWebUrl: "https://docs.example.com/workshop",
+    });
+  });
+
+  test("rejects unsafe or ambiguous public URLs", () => {
+    expect(() => normalizeHttpUrl("file:///tmp/workshop", "WORKSHOP_API_URL")).toThrow("HTTP or HTTPS");
+    expect(() => normalizeHttpUrl("https://user:secret@example.com", "WORKSHOP_API_URL")).toThrow("credentials");
+    expect(() => normalizeHttpUrl("https://example.com/?token=secret", "WORKSHOP_API_URL")).toThrow("query string");
+    expect(() => normalizeHttpUrl("\nhttps://example.com", "WORKSHOP_API_URL")).toThrow("control characters");
+  });
+});
+
+describe("Workshop widget validation", () => {
+  test("accepts a canonical credential-free widget", () => {
+    expect(validateWorkshopWidget(JSON.stringify(CUSTOM_WIDGET_STARTER)).success).toBe(true);
+    expect(
+      workshopSubmissionInputSchema.safeParse({
+        type: "customWidget",
+        title: "Starter widget",
+        description: "",
+        content: JSON.stringify(CUSTOM_WIDGET_STARTER),
+      }).success,
+    ).toBe(true);
+  });
+
+  test("accepts Custom CSS without treating it as widget JSON", () => {
+    expect(
+      workshopSubmissionInputSchema.safeParse({
+        type: "customCss",
+        title: "Quiet dashboard",
+        description: "",
+        content: ".mantine-Card-root { box-shadow: none; }",
+      }).success,
+    ).toBe(true);
+  });
+
+  test("validates direct bindings in the official client before publication", () => {
+    const widget = {
+      ...CUSTOM_WIDGET_STARTER,
+      requests: {
+        data: {
+          path: "/data/{option:endpointId}",
+          query: { limit: 5 },
+        },
+      },
+      options: { endpointId: { label: "Endpoint", control: "text", default: "local" } },
+    };
+
+    expect(validateWorkshopWidget(JSON.stringify(widget)).success).toBe(true);
+    expect(
+      validateWorkshopWidget(JSON.stringify({ ...widget, requests: { data: { path: "/data/{option:missing}" } } }))
+        .success,
+    ).toBe(false);
+    expect(
+      validateWorkshopWidget(
+        JSON.stringify({
+          ...widget,
+          requests: { data: { path: "/data/{param:endpointId}" } },
+        }),
+      ).success,
+    ).toBe(false);
+  });
+
+  test("normalizes PocketBase records before rendering", () => {
+    const result = workshopSubmissionSummarySchema.parse({
+      id: "jzyxskmimxn42io",
+      title: "Tautulli Activity",
+      description: "Shows active Plex streams from Tautulli",
+      widgetSchema: "homarr-custom-widget-v2",
+      screenshots: "[]",
+      author: "wsqylmotymtqpox",
+      revision: 1,
+      created: "2026-07-21 14:19:25.790Z",
+      updated: "2026-07-21 14:19:25.790Z",
+    });
+
+    expect(result.type).toBe("customWidget");
+    expect(result.screenshots).toEqual([]);
+    expect(result.authorName).toBe("Community member");
+    expect(result.upvotes).toBe(0);
+  });
+
+  test("rejects literal credentials in templates and icon URLs", () => {
+    expect(
+      validateWorkshopWidget(
+        JSON.stringify({
+          ...CUSTOM_WIDGET_STARTER,
+          template: "<Text>Authorization: Bearer literal-secret-value</Text>",
+        }),
+      ).success,
+    ).toBe(false);
+    expect(
+      validateWorkshopWidget(
+        JSON.stringify({
+          ...CUSTOM_WIDGET_STARTER,
+          iconUrl: "https://example.com/icon.png?clientSecret=literal-secret",
+        }),
+      ).success,
+    ).toBe(false);
+    expect(
+      validateWorkshopWidget(
+        JSON.stringify({
+          ...CUSTOM_WIDGET_STARTER,
+          requests: { load: { path: "/load", headers: { "X-Api-Key": "literal-secret-value" } } },
+        }),
+      ).success,
+    ).toBe(false);
+  });
+});
diff --git a/packages/workshop/src/schema.ts b/packages/workshop/src/schema.ts
new file mode 100644
index 000000000..94cd36151
--- /dev/null
+++ b/packages/workshop/src/schema.ts
@@ -0,0 +1,243 @@
+import { CUSTOM_WIDGET_SCHEMA, customWidgetImportSchema } from "@homarr/custom-widgets/core";
+import { z } from "zod/v4";
+
+export const HOMARR_WEBSITE_URL = "https://homarr.dev";
+export const WORKSHOP_API_URL = HOMARR_WEBSITE_URL;
+export const WORKSHOP_WEB_URL = `${HOMARR_WEBSITE_URL}/workshop`;
+export const WORKSHOP_CSS_SCHEMA = "homarr-custom-css-v1";
+export const WORKSHOP_SCHEMA_BY_TYPE = {
+  customWidget: CUSTOM_WIDGET_SCHEMA,
+  customCss: WORKSHOP_CSS_SCHEMA,
+} as const;
+export const MAX_WORKSHOP_CSS_LENGTH = 16_384;
+export const MAX_WORKSHOP_CONTENT_LENGTH = 1_000_000;
+export const MAX_WORKSHOP_SCREENSHOTS = 5;
+export const MAX_WORKSHOP_SCREENSHOT_BYTES = 5 * 1024 * 1024;
+export const WORKSHOP_REQUEST_TIMEOUT_MS = 8_000;
+export const WORKSHOP_SCREENSHOT_MIME_TYPES = ["image/png", "image/jpeg", "image/webp"] as const;
+
+export interface HomarrUrlConfig {
+  homarrWebsiteUrl: string;
+  workshopApiUrl: string;
+  workshopWebUrl: string;
+}
+
+export interface HomarrUrlConfigInput {
+  homarrWebsiteUrl?: string;
+  workshopApiUrl?: string;
+  workshopWebUrl?: string;
+}
+
+export function normalizeHttpUrl(value: string, variableName: string): string {
+  if (value !== value.trim() || hasAsciiControl(value)) {
+    throw new Error(`${variableName} must not include surrounding whitespace or control characters`);
+  }
+
+  let url: URL;
+  try {
+    url = new URL(value);
+  } catch {
+    throw new Error(`${variableName} must be a valid absolute HTTP(S) URL`);
+  }
+
+  if (url.protocol !== "http:" && url.protocol !== "https:") {
+    throw new Error(`${variableName} must use HTTP or HTTPS`);
+  }
+  if (url.username || url.password) {
+    throw new Error(`${variableName} must not include credentials`);
+  }
+  if (url.search || url.hash) {
+    throw new Error(`${variableName} must not include a query string or fragment`);
+  }
+
+  return url.toString().replace(/\/+$/u, "");
+}
+
+function hasAsciiControl(value: string): boolean {
+  return [...value].some((character) => {
+    const code = character.codePointAt(0) ?? 0;
+    return code <= 31 || code === 127;
+  });
+}
+
+export function resolveHomarrUrlConfig(input: HomarrUrlConfigInput = {}): HomarrUrlConfig {
+  const homarrWebsiteUrl = normalizeHttpUrl(input.homarrWebsiteUrl ?? HOMARR_WEBSITE_URL, "HOMARR_WEBSITE_URL");
+  const workshopApiUrl = normalizeHttpUrl(input.workshopApiUrl ?? homarrWebsiteUrl, "WORKSHOP_API_URL");
+  const workshopWebUrl = normalizeHttpUrl(input.workshopWebUrl ?? `${homarrWebsiteUrl}/workshop`, "WORKSHOP_WEB_URL");
+
+  return { homarrWebsiteUrl, workshopApiUrl, workshopWebUrl };
+}
+
+export const workshopReportCategorySchema = z.enum(["malicious", "spam", "copyright", "inappropriate", "other"]);
+export const workshopSubmissionTypeSchema = z.enum(["customWidget", "customCss"]);
+export type WorkshopSubmissionType = z.infer<typeof workshopSubmissionTypeSchema>;
+
+const workshopFileListSchema = z
+  .preprocess((value) => {
+    if (typeof value !== "string") return value;
+    try {
+      return JSON.parse(value) as unknown;
+    } catch {
+      return [];
+    }
+  }, z.array(z.string()))
+  .default([]);
+
+export const workshopUserSchema = z.object({
+  id: z.string(),
+  displayName: z.string(),
+  avatarUrl: z.string().default(""),
+  githubUsername: z.string().default(""),
+  githubProfileUrl: z.string().default(""),
+  isAdmin: z.boolean().default(false),
+});
+export type WorkshopUser = z.infer<typeof workshopUserSchema>;
+
+const normalizeWorkshopSubmissionRecord = (value: unknown) => {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return value;
+  const record = value as Record<string, unknown>;
+  if (record.type === "customWidget" || record.type === "customCss") return value;
+  if (record.widgetSchema === WORKSHOP_CSS_SCHEMA) return { ...record, type: "customCss" };
+  if (typeof record.widgetSchema === "string" && record.widgetSchema.startsWith("homarr-custom-widget-"))
+    return { ...record, type: "customWidget" };
+  return value;
+};
+
+const workshopSubmissionBaseObjectSchema = z.object({
+  id: z.string(),
+  type: workshopSubmissionTypeSchema,
+  title: z.string(),
+  description: z.string().default(""),
+  widgetSchema: z.string(),
+  screenshots: workshopFileListSchema,
+  author: z.string(),
+  authorName: z.string().default("Community member"),
+  authorAvatarUrl: z.string().default(""),
+  authorGithubUsername: z.string().default(""),
+  authorGithubProfileUrl: z.string().default(""),
+  score: z.number().int().default(0),
+  upvotes: z.number().int().default(0),
+  downvotes: z.number().int().default(0),
+  commentCount: z.number().int().default(0),
+  reportCount: z.number().int().default(0),
+  revision: z.number().int().positive().default(1),
+  changelog: z.string().default(""),
+  outdated: z.boolean().default(false),
+  created: z.string(),
+  updated: z.string(),
+});
+
+export const workshopSubmissionSummarySchema = z.preprocess(
+  normalizeWorkshopSubmissionRecord,
+  workshopSubmissionBaseObjectSchema,
+);
+export type WorkshopSubmissionSummary = z.infer<typeof workshopSubmissionSummarySchema>;
+export const workshopSubmissionDetailSchema = z.preprocess(
+  normalizeWorkshopSubmissionRecord,
+  workshopSubmissionBaseObjectSchema.extend({ content: z.string() }),
+);
+export type WorkshopSubmissionDetail = z.infer<typeof workshopSubmissionDetailSchema>;
+
+export const workshopSubmissionInputSchema = z
+  .object({
+    type: workshopSubmissionTypeSchema,
+    title: z.string().trim().min(3).max(100),
+    description: z.string().trim().max(2_000).default(""),
+    content: z.string().min(1).max(MAX_WORKSHOP_CONTENT_LENGTH),
+    changelog: z.string().trim().max(2_000).default(""),
+    outdated: z.boolean().default(false),
+  })
+  .superRefine((input, context) => {
+    const result = validateWorkshopContent(input.type, input.content);
+    if (!result.success) context.addIssue({ code: "custom", path: ["content"], message: result.error });
+  });
+export type WorkshopSubmissionInput = z.input<typeof workshopSubmissionInputSchema>;
+
+export const workshopScreenshotsSchema = z
+  .array(
+    z.object({
+      size: z.number().max(MAX_WORKSHOP_SCREENSHOT_BYTES),
+      type: z.enum(WORKSHOP_SCREENSHOT_MIME_TYPES),
+    }),
+  )
+  .max(MAX_WORKSHOP_SCREENSHOTS);
+
+export const workshopVoteSchema = z.object({
+  id: z.string(),
+  submission: z.string(),
+  user: z.string(),
+  value: z.union([z.literal(1), z.literal(-1)]),
+});
+export type WorkshopVote = z.infer<typeof workshopVoteSchema>;
+
+export const workshopReportSchema = z.object({
+  id: z.string(),
+  submission: z.string(),
+  reporter: z.string(),
+  reporterName: z.string().default("Community member"),
+  submissionTitle: z.string().default("Deleted submission"),
+  category: workshopReportCategorySchema,
+  explanation: z.string(),
+  status: z.enum(["open", "dismissed"]).default("open"),
+  created: z.string(),
+  updated: z.string(),
+});
+export type WorkshopReport = z.infer<typeof workshopReportSchema>;
+
+export const workshopCommentSchema = z.object({
+  id: z.string(),
+  submission: z.string(),
+  author: z.string(),
+  content: z.string().min(1).max(2_000),
+  created: z.string(),
+  updated: z.string(),
+  authorName: z.string().default("Community member"),
+  authorAvatarUrl: z.string().default(""),
+  authorGithubProfileUrl: z.string().default(""),
+});
+export type WorkshopComment = z.infer<typeof workshopCommentSchema>;
+
+export type WorkshopWidgetValidationResult =
+  | { success: true; data: z.infer<typeof customWidgetImportSchema> }
+  | { success: false; error: string };
+export type WorkshopValidationResult =
+  | { success: true; data: z.infer<typeof customWidgetImportSchema> | string }
+  | { success: false; error: string };
+
+export function validateWorkshopContent(type: WorkshopSubmissionType, content: string): WorkshopValidationResult {
+  if (type === "customCss") {
+    if (!content.trim()) return { success: false, error: "CSS cannot be empty" };
+    if (content.length > MAX_WORKSHOP_CSS_LENGTH)
+      return { success: false, error: `CSS must be at most ${MAX_WORKSHOP_CSS_LENGTH} characters` };
+    return { success: true, data: content };
+  }
+
+  return validateWorkshopWidget(content);
+}
+
+export function validateWorkshopWidget(content: string): WorkshopWidgetValidationResult {
+  try {
+    const parsed: unknown = JSON.parse(content);
+    const result = customWidgetImportSchema.safeParse(parsed);
+    if (!result.success) {
+      const error = result.error.issues
+        .slice(0, 5)
+        .map((issue) => `${issue.path.join(".") || "widget"}: ${issue.message}`)
+        .join("\n");
+      return { success: false, error: error || "Invalid widget" };
+    }
+    return { success: true, data: result.data };
+  } catch {
+    return { success: false, error: "Widget content is not valid JSON" };
+  }
+}
+
+export function workshopExportFilename(title: string, type: WorkshopSubmissionType = "customWidget") {
+  const safe =
+    title
+      .trim()
+      .toLowerCase()
+      .replaceAll(/[^a-z0-9]+/g, "-")
+      .replaceAll(/^-|-$/g, "") || "homarr-widget";
+  return `${safe}.${type === "customCss" ? "css" : "json"}`;
+}
diff --git a/packages/workshop/tsconfig.json b/packages/workshop/tsconfig.json
new file mode 100644
index 000000000..479a72564
--- /dev/null
+++ b/packages/workshop/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "@homarr/tsconfig/base.json",
+  "compilerOptions": { "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json" },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 31986c192..8e37933c2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,16 +10,16 @@ catalogs:
       specifier: 3.0.14
       version: 3.0.14
     '@assistant-ui/react':
-      specifier: ^0.14.27
+      specifier: 0.14.27
       version: 0.14.27
     '@assistant-ui/react-ai-sdk':
-      specifier: ^1.3.41
+      specifier: 1.3.41
       version: 1.3.41
     '@assistant-ui/react-lexical':
       specifier: 0.2.0
       version: 0.2.0
     '@assistant-ui/react-markdown':
-      specifier: ^0.14.7
+      specifier: 0.14.7
       version: 0.14.7
     '@auth/core':
       specifier: ^0.41.2
@@ -27,6 +27,36 @@ catalogs:
     '@auth/drizzle-adapter':
       specifier: ^1.11.2
       version: 1.11.2
+    '@babel/parser':
+      specifier: ^7.29.7
+      version: 7.29.7
+    '@codemirror/autocomplete':
+      specifier: ^6.20.3
+      version: 6.20.3
+    '@codemirror/commands':
+      specifier: ^6.10.3
+      version: 6.10.3
+    '@codemirror/lang-css':
+      specifier: ^6.3.1
+      version: 6.3.1
+    '@codemirror/lang-javascript':
+      specifier: ^6.2.5
+      version: 6.2.5
+    '@codemirror/lang-json':
+      specifier: ^6.0.2
+      version: 6.0.2
+    '@codemirror/lint':
+      specifier: ^6.9.6
+      version: 6.9.6
+    '@codemirror/state':
+      specifier: ^6.6.0
+      version: 6.6.0
+    '@codemirror/theme-one-dark':
+      specifier: ^6.1.3
+      version: 6.1.3
+    '@codemirror/view':
+      specifier: ^6.43.0
+      version: 6.43.0
     '@ctrl/deluge':
       specifier: ^8.0.0
       version: 8.0.0
@@ -36,12 +66,24 @@ catalogs:
     '@ctrl/transmission':
       specifier: ^7.4.0
       version: 7.4.0
+    '@dnd-kit/abstract':
+      specifier: 0.5.0
+      version: 0.5.0
+    '@dnd-kit/collision':
+      specifier: 0.5.0
+      version: 0.5.0
     '@dnd-kit/core':
       specifier: ^6.3.1
       version: 6.3.1
+    '@dnd-kit/dom':
+      specifier: 0.5.0
+      version: 0.5.0
     '@dnd-kit/modifiers':
       specifier: ^9.0.0
       version: 9.0.0
+    '@dnd-kit/react':
+      specifier: 0.5.0
+      version: 0.5.0
     '@dnd-kit/sortable':
       specifier: ^10.0.0
       version: 10.0.0
@@ -55,11 +97,8 @@ catalogs:
       specifier: 7.2.1
       version: 7.2.1
     '@gfazioli/mantine-onboarding-tour':
-      specifier: ^4.0.6
-      version: 4.0.6
-    '@homarr/gridstack':
-      specifier: ^1.12.0
-      version: 1.12.0
+      specifier: ^4.0.7
+      version: 4.0.8
     '@homarr/node-unifi':
       specifier: ^2.6.0
       version: 2.6.0
@@ -135,15 +174,18 @@ catalogs:
     '@semantic-release/release-notes-generator':
       specifier: ^14.1.1
       version: 14.1.1
+    '@shadcn/react':
+      specifier: ^0.2.1
+      version: 0.2.1
     '@t3-oss/env-nextjs':
       specifier: ^0.13.11
       version: 0.13.11
     '@tabler/icons-react':
       specifier: ^3.44.0
       version: 3.44.0
-    '@tanstack/query-async-storage-persister':
-      specifier: ^5.101.2
-      version: 5.101.2
+    '@tanstack/react-devtools':
+      specifier: ^0.10.8
+      version: 0.10.9
     '@tanstack/react-query':
       specifier: ^5.101.2
       version: 5.101.2
@@ -153,9 +195,6 @@ catalogs:
     '@tanstack/react-query-next-experimental':
       specifier: ^5.101.2
       version: 5.101.2
-    '@tanstack/react-query-persist-client':
-      specifier: ^5.101.2
-      version: 5.101.2
     '@testcontainers/mysql':
       specifier: ^12.0.4
       version: 12.0.4
@@ -300,14 +339,20 @@ catalogs:
     '@xterm/xterm':
       specifier: ^6.0.0
       version: 6.0.0
+    acorn:
+      specifier: ^8.16.0
+      version: 8.16.0
+    acorn-jsx:
+      specifier: ^5.3.2
+      version: 5.3.2
     adm-zip:
       specifier: 0.5.18
       version: 0.5.18
     ai:
       specifier: ^7.0.37
-      version: 7.0.37
+      version: 7.0.52
     assistant-stream:
-      specifier: ^0.3.26
+      specifier: 0.3.26
       version: 0.3.26
     babel-plugin-react-compiler:
       specifier: ^1.0.0
@@ -324,6 +369,12 @@ catalogs:
     clsx:
       specifier: ^2.1.1
       version: 2.1.1
+    cmdk:
+      specifier: ^1.1.1
+      version: 1.1.1
+    codemirror:
+      specifier: ^6.0.2
+      version: 6.0.2
     concurrently:
       specifier: ^10.0.3
       version: 10.0.3
@@ -345,6 +396,9 @@ catalogs:
     crypto-js:
       specifier: ^4.2.0
       version: 4.2.0
+    date-fns:
+      specifier: ^4.4.0
+      version: 4.4.0
     dayjs:
       specifier: ^1.11.21
       version: 1.11.21
@@ -372,6 +426,9 @@ catalogs:
     drizzle-zod:
       specifier: ^0.8.3
       version: 0.8.3
+    embla-carousel-react:
+      specifier: ^8.6.0
+      version: 8.6.0
     esbuild:
       specifier: ^0.28.0
       version: 0.28.0
@@ -390,6 +447,9 @@ catalogs:
     ical.js:
       specifier: ^2.2.1
       version: 2.2.1
+    input-otp:
+      specifier: ^1.4.2
+      version: 1.4.2
     ioredis:
       specifier: 5.11.1
       version: 5.11.1
@@ -439,14 +499,17 @@ catalogs:
       specifier: 3.22.6
       version: 3.22.6
     next:
-      specifier: 16.2.10
-      version: 16.2.10
+      specifier: 16.3.0-preview.9
+      version: 16.3.0-preview.9
     next-auth:
       specifier: 5.0.0-beta.31
       version: 5.0.0-beta.31
     next-intl:
       specifier: 4.13.1
       version: 4.13.1
+    next-themes:
+      specifier: ^0.4.6
+      version: 0.4.6
     node-loader:
       specifier: ^2.1.0
       version: 2.1.0
@@ -462,6 +525,9 @@ catalogs:
     pg:
       specifier: ^8.22.0
       version: 8.22.0
+    pocketbase:
+      specifier: ^0.26.2
+      version: 0.26.9
     postcss-preset-mantine:
       specifier: ^1.18.0
       version: 1.18.0
@@ -480,26 +546,29 @@ catalogs:
     react:
       specifier: 19.2.7
       version: 19.2.7
+    react-day-picker:
+      specifier: ^10.0.1
+      version: 10.0.1
     react-dom:
       specifier: 19.2.7
       version: 19.2.7
     react-error-boundary:
       specifier: ^6.1.2
       version: 6.1.2
-    react-jsx-parser:
-      specifier: ^2.4.1
-      version: 2.4.1
     react-markdown:
       specifier: ^10.1.0
       version: 10.1.0
     react-quill-new:
       specifier: ^3.8.3
       version: 3.8.3
+    react-resizable-panels:
+      specifier: ^4.12.2
+      version: 4.12.2
     react-simple-code-editor:
       specifier: ^0.14.1
       version: 0.14.1
     recharts:
-      specifier: ^3.9.1
+      specifier: ^3.8.0
       version: 3.9.1
     remark-breaks:
       specifier: ^4.0.0
@@ -519,6 +588,9 @@ catalogs:
     semver-parser:
       specifier: ^4.2.1
       version: 4.2.1
+    sonner:
+      specifier: ^2.0.7
+      version: 2.0.7
     sql.js:
       specifier: ^1.14.1
       version: 1.14.1
@@ -550,8 +622,8 @@ catalogs:
       specifier: ^2.10.4
       version: 2.10.4
     typescript:
-      specifier: npm:@typescript/typescript6@^6.0.2
-      version: 6.0.2
+      specifier: 7.0.2
+      version: 7.0.2
     undici:
       specifier: 7.28.0
       version: 7.28.0
@@ -593,6 +665,10 @@ catalogs:
       version: 5.0.0
 
 overrides:
+  '@assistant-ui/core': 0.2.21
+  '@assistant-ui/store': 0.2.20
+  '@assistant-ui/tap': 0.9.4
+  assistant-cloud: 0.1.35
   '@babel/helpers@<7.26.10': '>=7.29.7'
   '@babel/runtime@<7.26.10': '>=7.29.7'
   axios@>=1.0.0 <1.8.2: '>=1.18.1'
@@ -625,27 +701,30 @@ importers:
         specifier: 'catalog:'
         version: 10.4.0
     devDependencies:
+      '@babel/parser':
+        specifier: 'catalog:'
+        version: 7.29.7
       '@playwright/test':
         specifier: 'catalog:'
         version: 1.61.1
       '@semantic-release/changelog':
         specifier: 'catalog:'
-        version: 7.0.0(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))
+        version: 7.0.0(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))
       '@semantic-release/commit-analyzer':
         specifier: 'catalog:'
-        version: 13.0.1(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(supports-color@10.2.2)
+        version: 13.0.1(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))(supports-color@10.2.2)
       '@semantic-release/git':
         specifier: 'catalog:'
-        version: 11.0.1(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(supports-color@10.2.2)
+        version: 11.0.1(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))(supports-color@10.2.2)
       '@semantic-release/github':
         specifier: 'catalog:'
-        version: 12.0.9(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(supports-color@10.2.2)
+        version: 12.0.9(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))(supports-color@10.2.2)
       '@semantic-release/npm':
         specifier: 'catalog:'
-        version: 13.1.5(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))
+        version: 13.1.5(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))
       '@semantic-release/release-notes-generator':
         specifier: 'catalog:'
-        version: 14.1.1(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(supports-color@10.2.2)
+        version: 14.1.1(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))(supports-color@10.2.2)
       '@testcontainers/redis':
         specifier: 'catalog:'
         version: 12.0.4(supports-color@10.2.2)
@@ -654,7 +733,7 @@ importers:
         version: 2.10.4(@types/node@24.13.3)
       '@vitejs/plugin-react':
         specifier: 'catalog:'
-        version: 6.0.3(babel-plugin-react-compiler@1.0.0)(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0))
+        version: 6.0.3(babel-plugin-react-compiler@1.0.0)(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0))
       '@vitest/coverage-v8':
         specifier: 'catalog:'
         version: 4.1.10(vitest@4.1.10)
@@ -681,52 +760,67 @@ importers:
         version: 1.73.0
       semantic-release:
         specifier: 'catalog:'
-        version: 25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
+        version: 25.0.5(supports-color@10.2.2)(typescript@7.0.2)
       testcontainers:
         specifier: 'catalog:'
         version: 12.0.4(supports-color@10.2.2)
+      tsx:
+        specifier: 'catalog:'
+        version: 4.20.4
       turbo:
         specifier: 'catalog:'
         version: 2.10.4
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
       vite:
         specifier: 'catalog:'
-        version: 8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0)
+        version: 8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0)
       vite-tsconfig-paths:
         specifier: 'catalog:'
-        version: 6.1.1(@typescript/typescript6@6.0.2)(supports-color@10.2.2)(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0))
+        version: 6.1.1(supports-color@10.2.2)(typescript@7.0.2)(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0))
       vitest:
         specifier: 'catalog:'
-        version: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1(@noble/hashes@2.0.1))(msw@2.14.6(@types/node@24.13.3)(@typescript/typescript6@6.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0))
+        version: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1(@noble/hashes@2.0.1))(msw@2.14.6(@types/node@24.13.3)(typescript@7.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0))
 
   apps/docs:
     dependencies:
+      '@base-ui/react':
+        specifier: ^1.5.0
+        version: 1.6.0(@date-fns/tz@1.5.0)(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@docusaurus/core':
         specifier: ^3.10.1
-        version: 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+        version: 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/faster':
         specifier: ^3.10.1
         version: 3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3)
       '@docusaurus/plugin-content-docs':
         specifier: ^3.10.1
-        version: 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+        version: 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/plugin-sitemap':
         specifier: ^3.10.1
-        version: 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+        version: 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/preset-classic':
         specifier: ^3.10.1
-        version: 3.10.1(@algolia/client-search@5.53.0)(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(search-insights@2.17.3)(supports-color@10.2.2)(uglify-js@3.19.3)
+        version: 3.10.1(@algolia/client-search@5.53.0)(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(search-insights@2.17.3)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/theme-common':
         specifier: ^3.10.1
-        version: 3.10.1(411712c28a3adb38d3c382c02b26255d)
+        version: 3.10.1(76621e8bff6c45bac3fc2219e99bbda8)
       '@docusaurus/theme-mermaid':
         specifier: ^3.10.1
-        version: 3.10.1(59bf1c207f3351d61f3d6e4d32f816cb)
+        version: 3.10.1(61e2dfd21fb4d409e7bca036dfc2b268)
+      '@homarr/custom-widgets':
+        specifier: workspace:^
+        version: link:../../packages/custom-widgets
       '@homarr/definitions':
         specifier: workspace:^
         version: link:../../packages/definitions
+      '@homarr/workshop':
+        specifier: workspace:^
+        version: link:../../packages/workshop
+      '@mantine/core':
+        specifier: 'catalog:'
+        version: 9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@mdx-js/react':
         specifier: ^3.1.1
         version: 3.1.1(@types/react@19.2.17)(react@19.2.7)
@@ -735,28 +829,49 @@ importers:
         version: 0.99.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@scalar/api-reference-react':
         specifier: 'catalog:'
-        version: 0.9.54(@typescript/typescript6@6.0.2)(nprogress@0.2.0)(react@19.2.7)(supports-color@10.2.2)(tailwindcss@4.3.2)(zod@4.4.3)
-      '@signalwire/docusaurus-plugin-llms-txt':
-        specifier: ^1.2.2
-        version: 1.2.2(@docusaurus/core@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(supports-color@10.2.2)
+        version: 0.9.54(nprogress@0.2.0)(react@19.2.7)(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)(zod@4.4.3)
+      '@shadcn/react':
+        specifier: 'catalog:'
+        version: 0.2.1(@types/react@19.2.17)(react@19.2.7)
       '@tabler/icons-react':
         specifier: 'catalog:'
         version: 3.44.0(react@19.2.7)
       '@tailwindcss/postcss':
         specifier: ^4.3.2
         version: 4.3.2
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
       clsx:
         specifier: 'catalog:'
         version: 2.1.1
+      cmdk:
+        specifier: 'catalog:'
+        version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      date-fns:
+        specifier: 'catalog:'
+        version: 4.4.0
       dayjs:
         specifier: 'catalog:'
         version: 1.11.21
       docusaurus-plugin-image-zoom:
         specifier: ^3.0.1
-        version: 3.0.1(@docusaurus/theme-classic@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))
+        version: 3.0.1(@docusaurus/theme-classic@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3))
+      embla-carousel-react:
+        specifier: 'catalog:'
+        version: 8.6.0(react@19.2.7)
+      input-otp:
+        specifier: 'catalog:'
+        version: 1.4.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       leader-line-new:
         specifier: ^1.1.9
         version: 1.1.9
+      next-themes:
+        specifier: 'catalog:'
+        version: 0.4.6(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      pocketbase:
+        specifier: 'catalog:'
+        version: 0.26.9
       postcss:
         specifier: ^8.5.16
         version: 8.5.16
@@ -772,12 +887,27 @@ importers:
       react:
         specifier: 'catalog:'
         version: 19.2.7
+      react-day-picker:
+        specifier: 'catalog:'
+        version: 10.0.1(@types/react@19.2.17)(react@19.2.7)
       react-dom:
         specifier: 'catalog:'
         version: 19.2.7(react@19.2.7)
+      react-resizable-panels:
+        specifier: 'catalog:'
+        version: 4.12.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      recharts:
+        specifier: 3.8.0
+        version: 3.8.0(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react-is@19.2.7)(react@19.2.7)(redux@5.0.1)
+      sonner:
+        specifier: 'catalog:'
+        version: 2.0.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       swiper:
         specifier: ^14.0.5
         version: 14.0.5
+      tailwind-merge:
+        specifier: ^3.6.0
+        version: 3.6.0
       tailwindcss:
         specifier: ^4.3.2
         version: 4.3.2
@@ -808,7 +938,7 @@ importers:
         version: 1.2.0
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
       zod:
         specifier: 'catalog:'
         version: 4.4.3
@@ -826,16 +956,28 @@ importers:
         version: 1.3.41(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(ioredis@5.11.1(supports-color@10.2.2))(react@19.2.7)(zod@4.4.3)(zustand@5.0.14(@types/react@19.2.17)(immer@11.1.9)(react@19.2.7)(use-sync-external-store@1.6.0(react@19.2.7)))
       '@assistant-ui/react-lexical':
         specifier: 'catalog:'
-        version: 0.2.0(@assistant-ui/core@0.2.21(@assistant-ui/store@0.2.20(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react@19.2.7))(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(assistant-cloud@0.1.35(ioredis@5.11.1(supports-color@10.2.2)))(ioredis@5.11.1(supports-color@10.2.2))(react@19.2.7)(zustand@5.0.14(@types/react@19.2.17)(immer@11.1.9)(react@19.2.7)(use-sync-external-store@1.6.0(react@19.2.7))))(@assistant-ui/react@0.14.27(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(immer@11.1.9)(ioredis@5.11.1(supports-color@10.2.2))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(use-sync-external-store@1.6.0(react@19.2.7)))(@assistant-ui/store@0.2.20(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(yjs@13.6.31)
+        version: 0.2.0(@assistant-ui/core@0.2.21(@assistant-ui/store@0.2.20(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react@19.2.7))(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(assistant-cloud@0.1.35(ioredis@5.11.1(supports-color@10.2.2)))(ioredis@5.11.1(supports-color@10.2.2))(react@19.2.7)(zustand@5.0.14(@types/react@19.2.17)(immer@11.1.9)(react@19.2.7)(use-sync-external-store@1.6.0(react@19.2.7))))(@assistant-ui/react@0.14.27(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(immer@11.1.9)(ioredis@5.11.1(supports-color@10.2.2))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(use-sync-external-store@1.6.0(react@19.2.7)))(@assistant-ui/store@0.2.20(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(yjs@13.6.32)
       '@assistant-ui/react-markdown':
         specifier: 'catalog:'
         version: 0.14.7(@assistant-ui/react@0.14.27(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(immer@11.1.9)(ioredis@5.11.1(supports-color@10.2.2))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(use-sync-external-store@1.6.0(react@19.2.7)))(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)
+      '@dnd-kit/abstract':
+        specifier: 'catalog:'
+        version: 0.5.0
+      '@dnd-kit/collision':
+        specifier: 'catalog:'
+        version: 0.5.0
       '@dnd-kit/core':
         specifier: 'catalog:'
         version: 6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@dnd-kit/dom':
+        specifier: 'catalog:'
+        version: 0.5.0
       '@dnd-kit/modifiers':
         specifier: 'catalog:'
         version: 9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)
+      '@dnd-kit/react':
+        specifier: 'catalog:'
+        version: 0.5.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@dnd-kit/sortable':
         specifier: 'catalog:'
         version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)
@@ -844,7 +986,7 @@ importers:
         version: 3.2.2(react@19.2.7)
       '@gfazioli/mantine-onboarding-tour':
         specifier: 'catalog:'
-        version: 4.0.6(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        version: 4.0.8(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@homarr/analytics':
         specifier: workspace:^0.1.0
         version: link:../../packages/analytics
@@ -866,6 +1008,9 @@ importers:
       '@homarr/cron-job-status':
         specifier: workspace:^0.1.0
         version: link:../../packages/cron-job-status
+      '@homarr/custom-widgets':
+        specifier: workspace:^0.1.0
+        version: link:../../packages/custom-widgets
       '@homarr/db':
         specifier: workspace:^0.1.0
         version: link:../../packages/db
@@ -881,9 +1026,6 @@ importers:
       '@homarr/forms-collection':
         specifier: workspace:^0.1.0
         version: link:../../packages/forms-collection
-      '@homarr/gridstack':
-        specifier: 'catalog:'
-        version: 1.12.0
       '@homarr/icons':
         specifier: workspace:^0.1.0
         version: link:../../packages/icons
@@ -938,6 +1080,9 @@ importers:
       '@homarr/widgets':
         specifier: workspace:^0.1.0
         version: link:../../packages/widgets
+      '@homarr/workshop':
+        specifier: workspace:^0.1.0
+        version: link:../../packages/workshop
       '@mantine/colors-generator':
         specifier: 'catalog:'
         version: 9.4.1(chroma-js@3.2.0)
@@ -947,6 +1092,9 @@ importers:
       '@mantine/dropzone':
         specifier: 'catalog:'
         version: 9.4.1(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@mantine/form':
+        specifier: 'catalog:'
+        version: 9.4.1(react@19.2.7)
       '@mantine/hooks':
         specifier: 'catalog:'
         version: 9.4.1(react@19.2.7)
@@ -961,13 +1109,13 @@ importers:
         version: 1.29.0(supports-color@10.2.2)(zod@4.4.3)
       '@scalar/api-reference-react':
         specifier: 'catalog:'
-        version: 0.9.54(@typescript/typescript6@6.0.2)(nprogress@0.2.0)(react@19.2.7)(supports-color@10.2.2)(tailwindcss@4.3.2)(zod@4.4.3)
+        version: 0.9.54(nprogress@0.2.0)(react@19.2.7)(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)(zod@4.4.3)
       '@tabler/icons-react':
         specifier: 'catalog:'
         version: 3.44.0(react@19.2.7)
-      '@tanstack/query-async-storage-persister':
+      '@tanstack/react-devtools':
         specifier: 'catalog:'
-        version: 5.101.2
+        version: 0.10.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(csstype@3.2.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(solid-js@1.9.14)
       '@tanstack/react-query':
         specifier: 'catalog:'
         version: 5.101.2(react@19.2.7)
@@ -976,22 +1124,19 @@ importers:
         version: 5.101.2(@tanstack/react-query@5.101.2(react@19.2.7))(react@19.2.7)
       '@tanstack/react-query-next-experimental':
         specifier: 'catalog:'
-        version: 5.101.2(@tanstack/react-query@5.101.2(react@19.2.7))(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react@19.2.7)
-      '@tanstack/react-query-persist-client':
-        specifier: 'catalog:'
-        version: 5.101.2(@tanstack/react-query@5.101.2(react@19.2.7))(react@19.2.7)
+        version: 5.101.2(@tanstack/react-query@5.101.2(react@19.2.7))(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react@19.2.7)
       '@trpc/client':
         specifier: 'catalog:'
-        version: 11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)
+        version: 11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2)
       '@trpc/next':
         specifier: 'catalog:'
-        version: 11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2))(@trpc/react-query@11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2))(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)(react@19.2.7))(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        version: 11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2))(@trpc/react-query@11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2))(@trpc/server@11.18.0(typescript@7.0.2))(react@19.2.7)(typescript@7.0.2))(@trpc/server@11.18.0(typescript@7.0.2))(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(typescript@7.0.2)
       '@trpc/react-query':
         specifier: 'catalog:'
-        version: 11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2))(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)(react@19.2.7)
+        version: 11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2))(@trpc/server@11.18.0(typescript@7.0.2))(react@19.2.7)(typescript@7.0.2)
       '@trpc/server':
         specifier: 'catalog:'
-        version: 11.18.0(@typescript/typescript6@6.0.2)
+        version: 11.18.0(typescript@7.0.2)
       '@xterm/addon-canvas':
         specifier: 'catalog:'
         version: 0.7.0(@xterm/xterm@6.0.0)
@@ -1006,7 +1151,7 @@ importers:
         version: 0.5.18
       ai:
         specifier: 'catalog:'
-        version: 7.0.37(zod@4.4.3)
+        version: 7.0.52(zod@4.4.3)
       assistant-stream:
         specifier: 'catalog:'
         version: 0.3.26(ioredis@5.11.1(supports-color@10.2.2))
@@ -1057,13 +1202,13 @@ importers:
         version: mantine-react-table-open@9.0.3(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/dates@9.4.1(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(dayjs@1.11.21)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(clsx@2.1.1)(dayjs@1.11.21)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       mcp-handler:
         specifier: 'catalog:'
-        version: 1.1.0(@modelcontextprotocol/sdk@1.29.0(supports-color@10.2.2)(zod@4.4.3))(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))
+        version: 1.1.0(@modelcontextprotocol/sdk@1.29.0(supports-color@10.2.2)(zod@4.4.3))(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))
       mermaid:
         specifier: 'catalog:'
         version: 11.15.0
       next:
         specifier: 'catalog:'
-        version: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+        version: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       postcss-preset-mantine:
         specifier: 'catalog:'
         version: 1.18.0(postcss@8.5.16)
@@ -1105,7 +1250,7 @@ importers:
         version: 2.2.6
       trpc-to-mcp:
         specifier: 'catalog:'
-        version: 1.3.2(6bd31c056f397ffcf9e77883340c3ff9)
+        version: 1.3.2(7c45d4095abf7cef4938a6fc2cc62863)
       use-deep-compare-effect:
         specifier: 'catalog:'
         version: 1.8.1(react@19.2.7)
@@ -1148,7 +1293,7 @@ importers:
         version: 2.1.0(webpack@5.107.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(uglify-js@3.19.3))
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   apps/tasks:
     dependencies:
@@ -1236,7 +1381,7 @@ importers:
         version: 4.20.4
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   apps/websocket:
     dependencies:
@@ -1285,7 +1430,7 @@ importers:
         version: 0.28.0
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/analytics:
     dependencies:
@@ -1313,7 +1458,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/api:
     dependencies:
@@ -1335,6 +1480,9 @@ importers:
       '@homarr/cron-jobs':
         specifier: workspace:^0.1.0
         version: link:../cron-jobs
+      '@homarr/custom-widgets':
+        specifier: workspace:^0.1.0
+        version: link:../custom-widgets
       '@homarr/db':
         specifier: workspace:^0.1.0
         version: link:../db
@@ -1374,6 +1522,9 @@ importers:
       '@homarr/validation':
         specifier: workspace:^0.1.0
         version: link:../validation
+      '@homarr/workshop':
+        specifier: workspace:^0.1.0
+        version: link:../workshop
       '@kubernetes/client-node':
         specifier: 'catalog:'
         version: 1.4.0(supports-color@10.2.2)
@@ -1382,25 +1533,22 @@ importers:
         version: 5.101.2(react@19.2.7)
       '@trpc/client':
         specifier: 'catalog:'
-        version: 11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)
+        version: 11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2)
       '@trpc/react-query':
         specifier: 'catalog:'
-        version: 11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2))(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)(react@19.2.7)
+        version: 11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2))(@trpc/server@11.18.0(typescript@7.0.2))(react@19.2.7)(typescript@7.0.2)
       '@trpc/server':
         specifier: 'catalog:'
-        version: 11.18.0(@typescript/typescript6@6.0.2)
+        version: 11.18.0(typescript@7.0.2)
       '@trpc/tanstack-react-query':
         specifier: 'catalog:'
-        version: 11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2))(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)(react@19.2.7)
-      jsonpath-plus:
-        specifier: 'catalog:'
-        version: 10.4.0
+        version: 11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2))(@trpc/server@11.18.0(typescript@7.0.2))(react@19.2.7)(typescript@7.0.2)
       lodash.clonedeep:
         specifier: 'catalog:'
         version: 4.5.0
       next:
         specifier: 'catalog:'
-        version: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+        version: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       react:
         specifier: 'catalog:'
         version: 19.2.7
@@ -1412,10 +1560,13 @@ importers:
         version: 2.2.6
       trpc-to-mcp:
         specifier: 'catalog:'
-        version: 1.3.2(20caeb9169922dd2adb62d9d2fa0352f)
+        version: 1.3.2(09f4f932022b61bbb1db30a9d75546c7)
       trpc-to-openapi:
         specifier: 'catalog:'
-        version: 3.3.0(patch_hash=2ca3c16af0fcca0c736697ad4fe553a14f794524fa9ce0d5c3e8ee4aea76090c)(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(zod-openapi@5.4.6(zod@4.4.3))(zod@4.4.3)
+        version: 3.3.0(patch_hash=2ca3c16af0fcca0c736697ad4fe553a14f794524fa9ce0d5c3e8ee4aea76090c)(@trpc/server@11.18.0(typescript@7.0.2))(zod-openapi@5.4.6(zod@4.4.3))(zod@4.4.3)
+      undici:
+        specifier: 'catalog:'
+        version: 7.28.0
       zod:
         specifier: 'catalog:'
         version: 4.4.3
@@ -1425,7 +1576,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/auth:
     dependencies:
@@ -1461,10 +1612,10 @@ importers:
         version: 8.1.8
       next:
         specifier: 'catalog:'
-        version: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+        version: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       next-auth:
         specifier: 'catalog:'
-        version: 5.0.0-beta.31(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react@19.2.7)
+        version: 5.0.0-beta.31(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react@19.2.7)
       react:
         specifier: 'catalog:'
         version: 19.2.7
@@ -1486,7 +1637,7 @@ importers:
         version: 0.9.2
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/boards:
     dependencies:
@@ -1505,7 +1656,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/cli:
     dependencies:
@@ -1536,7 +1687,7 @@ importers:
         version: 0.28.0
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/common:
     dependencies:
@@ -1554,7 +1705,7 @@ importers:
         version: 1.11.21
       next:
         specifier: 'catalog:'
-        version: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+        version: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       octokit:
         specifier: 'catalog:'
         version: 5.0.5
@@ -1579,13 +1730,13 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/core:
     dependencies:
       '@t3-oss/env-nextjs':
         specifier: 'catalog:'
-        version: 0.13.11(@typescript/typescript6@6.0.2)(arktype@2.1.20)(zod@4.4.3)
+        version: 0.13.11(arktype@2.1.20)(typescript@7.0.2)(zod@4.4.3)
       better-sqlite3:
         specifier: 'catalog:'
         version: 12.11.1
@@ -1625,7 +1776,7 @@ importers:
         version: 8.20.0
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/cron-job-status:
     dependencies:
@@ -1638,7 +1789,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/cron-jobs:
     dependencies:
@@ -1702,7 +1853,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/cron-jobs-core:
     dependencies:
@@ -1724,7 +1875,101 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
+
+  packages/custom-widgets:
+    dependencies:
+      '@codemirror/autocomplete':
+        specifier: 'catalog:'
+        version: 6.20.3
+      '@codemirror/commands':
+        specifier: 'catalog:'
+        version: 6.10.3
+      '@codemirror/lang-css':
+        specifier: 'catalog:'
+        version: 6.3.1
+      '@codemirror/lang-javascript':
+        specifier: 'catalog:'
+        version: 6.2.5
+      '@codemirror/lang-json':
+        specifier: 'catalog:'
+        version: 6.0.2
+      '@codemirror/lint':
+        specifier: 'catalog:'
+        version: 6.9.6
+      '@codemirror/state':
+        specifier: 'catalog:'
+        version: 6.6.0
+      '@codemirror/theme-one-dark':
+        specifier: 'catalog:'
+        version: 6.1.3
+      '@codemirror/view':
+        specifier: 'catalog:'
+        version: 6.43.0
+      '@mantine/charts':
+        specifier: 'catalog:'
+        version: 9.4.1(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(recharts@3.9.1(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react-is@19.2.7)(react@19.2.7)(redux@5.0.1))
+      '@mantine/core':
+        specifier: 'catalog:'
+        version: 9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@mantine/dates':
+        specifier: 'catalog:'
+        version: 9.4.1(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(dayjs@1.11.21)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@mantine/hooks':
+        specifier: 'catalog:'
+        version: 9.4.1(react@19.2.7)
+      '@tabler/icons-react':
+        specifier: 'catalog:'
+        version: 3.44.0(react@19.2.7)
+      '@tanstack/react-query':
+        specifier: 'catalog:'
+        version: 5.101.2(react@19.2.7)
+      acorn:
+        specifier: 'catalog:'
+        version: 8.16.0
+      acorn-jsx:
+        specifier: 'catalog:'
+        version: 5.3.2(acorn@8.16.0)
+      codemirror:
+        specifier: 'catalog:'
+        version: 6.0.2
+      jsonpath-plus:
+        specifier: 'catalog:'
+        version: 10.4.0
+      react:
+        specifier: 'catalog:'
+        version: 19.2.7
+      undici:
+        specifier: 'catalog:'
+        version: 7.28.0
+      zod:
+        specifier: 'catalog:'
+        version: 4.4.3
+    devDependencies:
+      '@homarr/tsconfig':
+        specifier: workspace:^0.1.0
+        version: link:../../tooling/typescript
+      '@types/node':
+        specifier: 'catalog:'
+        version: 24.13.3
+      '@types/react':
+        specifier: 'catalog:'
+        version: 19.2.17
+      '@types/react-dom':
+        specifier: 'catalog:'
+        version: 19.2.3(@types/react@19.2.17)
+      jsdom:
+        specifier: 'catalog:'
+        version: 29.1.1(@noble/hashes@2.0.1)
+      react-dom:
+        specifier: 'catalog:'
+        version: 19.2.7(react@19.2.7)
+      typescript:
+        specifier: 'catalog:'
+        version: 7.0.2
+      vitest:
+        specifier: 'catalog:'
+        version: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1(@noble/hashes@2.0.1))(msw@2.14.6(@types/node@24.13.3)(typescript@7.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0))
 
   packages/db:
     dependencies:
@@ -1737,6 +1982,9 @@ importers:
       '@homarr/core':
         specifier: workspace:^0.1.0
         version: link:../core
+      '@homarr/custom-widgets':
+        specifier: workspace:^0.1.0
+        version: link:../custom-widgets
       '@homarr/definitions':
         specifier: workspace:^0.1.0
         version: link:../definitions
@@ -1803,7 +2051,7 @@ importers:
         version: 4.20.4
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/definitions:
     dependencies:
@@ -1825,7 +2073,7 @@ importers:
         version: 4.20.4
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/docker:
     dependencies:
@@ -1847,7 +2095,7 @@ importers:
         version: 4.0.1
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/form:
     dependencies:
@@ -1872,7 +2120,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/forms-collection:
     dependencies:
@@ -1915,7 +2163,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/icons:
     dependencies:
@@ -1934,7 +2182,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/image-proxy:
     dependencies:
@@ -1959,7 +2207,7 @@ importers:
         version: 6.0.0
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/integrations:
     dependencies:
@@ -2050,7 +2298,7 @@ importers:
         version: 0.4.14
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/modals:
     dependencies:
@@ -2075,7 +2323,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/modals-collection:
     dependencies:
@@ -2123,7 +2371,7 @@ importers:
         version: 1.11.21
       next:
         specifier: 'catalog:'
-        version: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+        version: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       react:
         specifier: 'catalog:'
         version: 19.2.7
@@ -2139,7 +2387,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/notifications:
     dependencies:
@@ -2158,7 +2406,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/old-import:
     dependencies:
@@ -2206,7 +2454,7 @@ importers:
         version: 0.5.18
       next:
         specifier: 'catalog:'
-        version: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+        version: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       react:
         specifier: 'catalog:'
         version: 19.2.7
@@ -2231,7 +2479,7 @@ importers:
         version: 0.5.8
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/old-schema:
     dependencies:
@@ -2247,7 +2495,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/ping:
     dependencies:
@@ -2263,7 +2511,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/redis:
     dependencies:
@@ -2291,7 +2539,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/request-handler:
     dependencies:
@@ -2340,7 +2588,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/server-settings:
     dependencies:
@@ -2356,7 +2604,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/settings:
     dependencies:
@@ -2371,7 +2619,7 @@ importers:
         version: 9.4.1(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(dayjs@1.11.21)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       next:
         specifier: 'catalog:'
-        version: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+        version: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       react:
         specifier: 'catalog:'
         version: 19.2.7
@@ -2384,7 +2632,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/spotlight:
     dependencies:
@@ -2438,7 +2686,7 @@ importers:
         version: 2.20.1(@babel/core@7.29.0(supports-color@10.2.2))(@babel/template@7.29.7)(@types/react@19.2.17)(react@19.2.7)
       next:
         specifier: 'catalog:'
-        version: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+        version: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       react:
         specifier: 'catalog:'
         version: 19.2.7
@@ -2454,7 +2702,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/translation:
     dependencies:
@@ -2475,10 +2723,10 @@ importers:
         version: mantine-react-table-open@9.0.3(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/dates@9.4.1(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(dayjs@1.11.21)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(clsx@2.1.1)(dayjs@1.11.21)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       next:
         specifier: 'catalog:'
-        version: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+        version: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       next-intl:
         specifier: 'catalog:'
-        version: 4.13.1(@typescript/typescript6@6.0.2)(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react@19.2.7)
+        version: 4.13.1(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react@19.2.7)(typescript@7.0.2)
       react:
         specifier: 'catalog:'
         version: 19.2.7
@@ -2491,7 +2739,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/ui:
     dependencies:
@@ -2530,7 +2778,7 @@ importers:
         version: mantine-react-table-open@9.0.3(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/dates@9.4.1(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(dayjs@1.11.21)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(clsx@2.1.1)(dayjs@1.11.21)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       next:
         specifier: 'catalog:'
-        version: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+        version: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       react:
         specifier: 'catalog:'
         version: 19.2.7
@@ -2552,7 +2800,7 @@ importers:
         version: 1.0.5
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/validation:
     dependencies:
@@ -2562,6 +2810,12 @@ importers:
       '@homarr/translation':
         specifier: workspace:^0.1.0
         version: link:../translation
+      acorn:
+        specifier: 'catalog:'
+        version: 8.16.0
+      acorn-jsx:
+        specifier: 'catalog:'
+        version: 5.3.2(acorn@8.16.0)
       zod:
         specifier: 'catalog:'
         version: 4.4.3
@@ -2574,7 +2828,7 @@ importers:
         version: link:../../tooling/typescript
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
 
   packages/widgets:
     dependencies:
@@ -2599,6 +2853,9 @@ importers:
       '@homarr/core':
         specifier: workspace:^0.1.0
         version: link:../core
+      '@homarr/custom-widgets':
+        specifier: workspace:^0.1.0
+        version: link:../custom-widgets
       '@homarr/db':
         specifier: workspace:^0.1.0
         version: link:../db
@@ -2653,6 +2910,9 @@ importers:
       '@mantine/core':
         specifier: 'catalog:'
         version: 9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@mantine/dates':
+        specifier: 'catalog:'
+        version: 9.4.1(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(dayjs@1.11.21)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@mantine/form':
         specifier: 'catalog:'
         version: 9.4.1(react@19.2.7)
@@ -2710,15 +2970,21 @@ importers:
       '@tiptap/starter-kit':
         specifier: 'catalog:'
         version: 3.27.3
+      '@trpc/react-query':
+        specifier: 'catalog:'
+        version: 11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2))(@trpc/server@11.18.0(typescript@7.0.2))(react@19.2.7)(typescript@7.0.2)
+      acorn:
+        specifier: 'catalog:'
+        version: 8.16.0
+      acorn-jsx:
+        specifier: 'catalog:'
+        version: 5.3.2(acorn@8.16.0)
       clsx:
         specifier: 'catalog:'
         version: 2.1.1
       dayjs:
         specifier: 'catalog:'
         version: 1.11.21
-      jsonpath-plus:
-        specifier: 'catalog:'
-        version: 10.4.0
       lucide-react:
         specifier: 'catalog:'
         version: 1.24.0(react@19.2.7)
@@ -2730,16 +2996,13 @@ importers:
         version: mantine-react-table-open@9.0.3(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/dates@9.4.1(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(dayjs@1.11.21)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(clsx@2.1.1)(dayjs@1.11.21)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       next:
         specifier: 'catalog:'
-        version: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+        version: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       react:
         specifier: 'catalog:'
         version: 19.2.7
       react-dom:
         specifier: 'catalog:'
         version: 19.2.7(react@19.2.7)
-      react-jsx-parser:
-        specifier: 'catalog:'
-        version: 2.4.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       react-markdown:
         specifier: 'catalog:'
         version: 10.1.0(@types/react@19.2.17)(react@19.2.7)(supports-color@10.2.2)
@@ -2764,7 +3027,35 @@ importers:
         version: 7.3.58
       typescript:
         specifier: 'catalog:'
-        version: '@typescript/typescript6@6.0.2'
+        version: 7.0.2
+
+  packages/workshop:
+    dependencies:
+      '@homarr/custom-widgets':
+        specifier: workspace:^0.1.0
+        version: link:../custom-widgets
+      '@tanstack/react-query':
+        specifier: 'catalog:'
+        version: 5.101.2(react@19.2.7)
+      pocketbase:
+        specifier: 'catalog:'
+        version: 0.26.9
+      react:
+        specifier: 'catalog:'
+        version: 19.2.7
+      zod:
+        specifier: 'catalog:'
+        version: 4.4.3
+    devDependencies:
+      '@homarr/tsconfig':
+        specifier: workspace:^0.1.0
+        version: link:../../tooling/typescript
+      typescript:
+        specifier: 'catalog:'
+        version: 7.0.2
+      vitest:
+        specifier: 'catalog:'
+        version: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1(@noble/hashes@2.0.1))(msw@2.14.6(@types/node@24.13.3)(typescript@7.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0))
 
   tooling/github: {}
 
@@ -2790,14 +3081,14 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
-  '@ai-sdk/gateway@4.0.28':
-    resolution: {integrity: sha512-ee9TsNO3mkgHDWmTmJ8Fvltr6PFh52zhrV2+FaKJY3F3iu7kWZi5tCRJCR1HVhhlpj6lHniUb28nLQdPHkA/1Q==}
+  '@ai-sdk/gateway@4.0.41':
+    resolution: {integrity: sha512-DPkDmmA336kqmIp62on550/6Q6JHvldsnvN1SmkwU8QGrVt1PzFxqyKUn0C5EGGmSBpvF1ohZNtvWNl8gEVugA==}
     engines: {node: '>=22'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
-  '@ai-sdk/mcp@2.0.16':
-    resolution: {integrity: sha512-jC2r+StEuk8uIldfP4j8nBwOEBJ2TRwy/bz71SHMZ3NG6PSbvRPXGfyoHHR6JTm1O5GcIww0f6B8LznzkrseDA==}
+  '@ai-sdk/mcp@2.0.25':
+    resolution: {integrity: sha512-TEQXa2UCl2963LYaVKjRkFi0zqRraCcY5jAcVqoUjzaiKdkMWuRYjhx8wvZ9UXpqj5NjkXczZovjCLHaX/TiTg==}
     engines: {node: '>=22'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
@@ -2820,6 +3111,12 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
+  '@ai-sdk/provider-utils@5.0.21':
+    resolution: {integrity: sha512-Q4z27c5vqKuXZN65QuF7FVm+uvm3qxEioiQ+8c3s5xXlhbE1Y/SLGBB4BuF+UWia4KaDu2HmNpdR1RGW02/eGg==}
+    engines: {node: '>=22'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   '@ai-sdk/provider@3.0.2':
     resolution: {integrity: sha512-HrEmNt/BH/hkQ7zpi2o6N3k1ZR1QTb7z85WYhYygiTxOQuaml4CMtHCWRbric5WPU+RNsYI7r1EpyVQMKO1pYw==}
     engines: {node: '>=18'}
@@ -2828,8 +3125,12 @@ packages:
     resolution: {integrity: sha512-e0CpNWJUY7OxAFAnCZkw+ri9QOHWwTs1tXP42782KFGCU07qt8NiXCrCVowyCB5dP2r5/Uls+g2oPd8kOJn9dw==}
     engines: {node: '>=22'}
 
-  '@ai-sdk/react@4.0.40':
-    resolution: {integrity: sha512-z3Ht1ERCEYmt7vo6IZYXlPPNEH/SYz8CAdRWuxA+MgA5p8AXFnor/U6WhZmsAmyzhQk1Oe138PtlW7ee4Ap4qg==}
+  '@ai-sdk/provider@4.0.5':
+    resolution: {integrity: sha512-9WAerTaPU2jcVi8dh8x27tySEuLur1Kfg7Go74GuCmsC/2MDSvrTkrK8ZrXWjryEevKfcPPmO1enveE7eqlzoA==}
+    engines: {node: '>=22'}
+
+  '@ai-sdk/react@4.0.55':
+    resolution: {integrity: sha512-eEtWwlfgeFNGzGZuuJce3IxTkDX2nFamkA/siBFYdjfQa37vmDwfkCo9zhhGhkxaLUr6mib55tJV8itsJm+sSw==}
     engines: {node: '>=22'}
     peerDependencies:
       react: ^18 || ~19.0.1 || ~19.1.2 || ^19.2.1
@@ -2958,10 +3259,10 @@ packages:
   '@assistant-ui/core@0.2.21':
     resolution: {integrity: sha512-Kwv9EywvtTsvoSmqFS0uonsQmN9iuo0GaIpqPGkxnfu4o8/slMw8gNDFNc+2+mzAdNCXcwkkLxh52gws7vhf0w==}
     peerDependencies:
-      '@assistant-ui/store': ^0.2.13
-      '@assistant-ui/tap': ^0.9.0
+      '@assistant-ui/store': 0.2.20
+      '@assistant-ui/tap': 0.9.4
       '@types/react': '*'
-      assistant-cloud: ^0.1.31
+      assistant-cloud: 0.1.35
       react: ^18 || ^19
       zustand: ^5.0.11
     peerDependenciesMeta:
@@ -2986,9 +3287,9 @@ packages:
   '@assistant-ui/react-lexical@0.2.0':
     resolution: {integrity: sha512-jngZcKAiAe4T7EPtdJxrXBWvfWLtJ2lAP4EuzlLaM2nmlep2tZcsJyjyXbXiBVxkA6ROdGHH7shWxGm13gwMIA==}
     peerDependencies:
-      '@assistant-ui/core': ^0.2.0
+      '@assistant-ui/core': 0.2.21
       '@assistant-ui/react': ^0.14.0
-      '@assistant-ui/store': '*'
+      '@assistant-ui/store': 0.2.20
       '@types/react': '*'
       react: ^18 || ^19
       react-dom: ^18 || ^19
@@ -3022,7 +3323,7 @@ packages:
   '@assistant-ui/store@0.2.20':
     resolution: {integrity: sha512-g+iHnov+JMZmVAPKhfs9YqCXWFcCBWCyi+oqsc/kAR9zMsE0+qbE36iyRYfsJFrhMDm+6Ev7/2UTO+1HwTiZfA==}
     peerDependencies:
-      '@assistant-ui/tap': ^0.5.16 || ^0.7.1 || ^0.8.1 || ^0.9.0
+      '@assistant-ui/tap': 0.9.4
       '@types/react': '*'
       react: ^18 || ^19
     peerDependenciesMeta:
@@ -3653,6 +3954,33 @@ packages:
   '@balena/dockerignore@1.0.2':
     resolution: {integrity: sha512-wMue2Sy4GAVTk6Ic4tJVcnfdau+gx2EnG7S+uAEe+TWJFqE4YoWN4/H8MSLj4eYJKxGg26lZwboEniNiNwZQ6Q==}
 
+  '@base-ui/react@1.6.0':
+    resolution: {integrity: sha512-/jzjTWJYXhRFO45Bev9lc3cHbmjzCMpUqbMZ2AgKy/z25mY9B6shGSNcXcjQar9n5doM0KYW1W8fcFv2jZBuMw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': ^17 || ^18 || ^19
+      date-fns: ^4.0.0
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
+  '@base-ui/utils@0.3.1':
+    resolution: {integrity: sha512-gFFiltORVmW/N6IILTGxizP3PBpVpysqML1ALY5Vk0mH+7faVkCknOU31goYHN5Aoek2dkjxva1XOD2Ce9WuIg==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@bcoe/v8-coverage@1.0.2':
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
@@ -3775,9 +4103,15 @@ packages:
   '@codemirror/lint@6.9.6':
     resolution: {integrity: sha512-6Kp7r6XfCi/D/5sdXieMfg9pJU1bUEx96WITuLU6ESaKizCz0QHFMjY/TaFSbigDdEAIgi93itLBIUETP4oK+A==}
 
+  '@codemirror/search@6.7.1':
+    resolution: {integrity: sha512-uMe5UO6PamJtSHrXhhHOzSX3ReWtiJrva6GnPMwSOrZtiExb5X5eExhr2OUZQVvdxPsKpY3Ro2mFbQadpPWmHA==}
+
   '@codemirror/state@6.6.0':
     resolution: {integrity: sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==}
 
+  '@codemirror/theme-one-dark@6.1.3':
+    resolution: {integrity: sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==}
+
   '@codemirror/view@6.43.0':
     resolution: {integrity: sha512-V7ZCLQO3Jus9hzh2jVCCPW3mO4IBMr43O37PqSUYautJSnnJF41YlgLw21x0fLJTYvJ+Vkm6Gp+qKGH9pltgXA==}
 
@@ -4158,33 +4492,57 @@ packages:
   '@dabh/diagnostics@2.0.8':
     resolution: {integrity: sha512-R4MSXTVnuMzGD7bzHdW2ZhhdPC/igELENcq5IjEverBvq5hn1SXCWcsi6eSsdWP0/Ur+SItRRjAktmdoX/8R/Q==}
 
+  '@date-fns/tz@1.5.0':
+    resolution: {integrity: sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==}
+
   '@discoveryjs/json-ext@0.5.7':
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
 
+  '@dnd-kit/abstract@0.5.0':
+    resolution: {integrity: sha512-hi13iMJgjPX/KDYVKg5VeDIhmYiV6buc9bAX+tCLYf4QdyYjPbsXjn2sPo6m7fQ6SGJBEFgHJ2PemeKDUbwBaA==}
+
   '@dnd-kit/accessibility@3.1.1':
     resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
     peerDependencies:
       react: '>=16.8.0'
 
+  '@dnd-kit/collision@0.5.0':
+    resolution: {integrity: sha512-xUqRn3lS7oqLkT0AnnHS/STh/Czvwe1UapZFYiLbsUGxopMsQd4teaPCzPouOThoMdGEe+dHWjfqJl6t9iG4mQ==}
+
   '@dnd-kit/core@6.3.1':
     resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@dnd-kit/dom@0.5.0':
+    resolution: {integrity: sha512-f2xFJp5SYQ8EW/Fbtaa8iBb66hpkWc7qa8vU826KW11/tb44sH+AisZnGtwOOTWTQ0GraqBDr5ixTErww+eKXw==}
+
+  '@dnd-kit/geometry@0.5.0':
+    resolution: {integrity: sha512-ubHQS1CiSDH8ssYH2xG5BnpwPSFP1tStXXjug7/Ba6qnQdu/EUH47l6QXKIksQnnanfVfDf0aGeevRxgZlj28A==}
+
   '@dnd-kit/modifiers@9.0.0':
     resolution: {integrity: sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==}
     peerDependencies:
       '@dnd-kit/core': ^6.3.0
       react: '>=16.8.0'
 
+  '@dnd-kit/react@0.5.0':
+    resolution: {integrity: sha512-abQPLI8lmfVE+v/n+pqy5WFxrw6T2Yg0UQZsL78dp5DKci7dKTVDjvLWqvass+XTFtzJmsZEjk1NdqE6xG8Jiw==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+
   '@dnd-kit/sortable@10.0.0':
     resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
     peerDependencies:
       '@dnd-kit/core': ^6.3.0
       react: '>=16.8.0'
 
+  '@dnd-kit/state@0.5.0':
+    resolution: {integrity: sha512-y7XbabQqjF58Lk8YmDQuR8l6QjN+Kh4qlGEjUvHuIeasLk1QP+9L5diXS98VMxQIivyMmUtX2//f+3N7qPJX4w==}
+
   '@dnd-kit/utilities@3.2.2':
     resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
     peerDependencies:
@@ -4240,6 +4598,7 @@ packages:
   '@docusaurus/core@3.10.1':
     resolution: {integrity: sha512-3pf2fXXw0eVk8WnC3T4LIigRDupcpvngpKo9Vy7mYyBhuddc0klDUuZAIfzMoK6z05pdlk6EFC/vBSX43+1O5w==}
     engines: {node: '>=20.0'}
+    hasBin: true
     peerDependencies:
       '@docusaurus/faster': '*'
       '@mdx-js/react': ^3.0.0
@@ -5147,8 +5506,8 @@ packages:
   '@formatjs/intl-localematcher@0.8.1':
     resolution: {integrity: sha512-xwEuwQFdtSq1UKtQnyTZWC+eHdv7Uygoa+H2k/9uzBVQjDyp9r20LNDNKedWXll7FssT3GRHvqsdJGYSUWqYFA==}
 
-  '@gfazioli/mantine-onboarding-tour@4.0.6':
-    resolution: {integrity: sha512-EMXwq5VPdQO8ppgKGY3i/KbB3jfuqJir5xmbAx0RNV3Ua3uXfznXJb0mNLykP1gQ+qe6WceORNsFUtQS0tIZAw==}
+  '@gfazioli/mantine-onboarding-tour@4.0.8':
+    resolution: {integrity: sha512-5YePS8nXkrLyc0OEHPZ/cpkcVEPjtf9VP9QWl6HxfMW9s6pBq1bWz5VcOoRKEVZWKi4xmskBcEPxB81syYrYXQ==}
     peerDependencies:
       '@mantine/core': '>=9.0.0'
       '@mantine/hooks': '>=9.0.0'
@@ -5185,9 +5544,6 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
-  '@homarr/gridstack@1.12.0':
-    resolution: {integrity: sha512-5gg9HaSPETgDMmpcPWYKEiaQsDEkMPu3xgHKvpmTo9JKUSE8Q06fdrf+N2WN3A2wGhZz2+/jPoIEXAuoYfvn0w==}
-
   '@homarr/node-unifi@2.6.0':
     resolution: {integrity: sha512-Nsh23+aIMzWhHelM7XDGz5B+5ADprOWuPVUyCpEStOgnHQfdC1Wa6z66VkROBeV2ep4a7YgvQV166/OCzP1sgw==}
     engines: {node: '>=22.0.0'}
@@ -5204,156 +5560,165 @@ packages:
   '@iconify/utils@3.1.3':
     resolution: {integrity: sha512-LPKOXPn/zV+zis1oOfGWogaXVpqUybF3ZS6SCZIsz8vg0ivVp9+fVqyYB7xq0aiST/VhUQYGO1qo6uoYSiEJqw==}
 
-  '@img/colour@1.0.0':
-    resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
+  '@img/colour@1.1.0':
+    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
     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}
+  '@img/sharp-darwin-arm64@0.35.3':
+    resolution: {integrity: sha512-RMnFX7YQsMoh7lWfcM4NEHHymBX/rLuKNPVM84XE9ONPcaSCDgE7CHIHpSgPcO2xcRthgBy1HfNO319mwhIAkg==}
+    engines: {node: '>=20.9.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}
+  '@img/sharp-darwin-x64@0.35.3':
+    resolution: {integrity: sha512-Xo+5uFBtLN0BKqieTxiFzFPQAUlBbbH5iBKyRX/z1JrbnYsHTfKJnUfL8+p2TPXr1pXqao4eeL4Rl144uDpK9w==}
+    engines: {node: '>=20.9.0'}
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-libvips-darwin-arm64@1.2.4':
-    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
+  '@img/sharp-freebsd-wasm32@0.35.3':
+    resolution: {integrity: sha512-lUxcqWIj2wMQ9BrwNjngcr1gWUr5xgaGThBRqPPalIC2n67Cqj1uPh8NnA/ZhAg8hUbKl+kVHKwgUIwe6ZYPrg==}
+    engines: {node: '>=20.9.0'}
+    os: [freebsd]
+
+  '@img/sharp-libvips-darwin-arm64@1.3.2':
+    resolution: {integrity: sha512-9J6ypZFpQBj4YnePGoq/S38w6nz+vqg5WZLrLGY4YuSemdMq47GMLBPO42MzwdGwpg/agZ7xzZcFHa48xlywfg==}
     cpu: [arm64]
     os: [darwin]
 
-  '@img/sharp-libvips-darwin-x64@1.2.4':
-    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
+  '@img/sharp-libvips-darwin-x64@1.3.2':
+    resolution: {integrity: sha512-m2pW1n6cns9VaubNwsZ+c3CRYjxNQWgJ5gPlnL1nbBcpkBvFm6SCFN5o0psFHI8w9n11NKhFkeEDns98tiqbEw==}
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-libvips-linux-arm64@1.2.4':
-    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
+  '@img/sharp-libvips-linux-arm64@1.3.2':
+    resolution: {integrity: sha512-dqVSFynCox4C/J8kT16V7SIFAns0IjgLwkvYT7p8LQVmJ5OS5b6tI9IGflxTeuBS//zXeFIUbwt5dwxyZ17cnA==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-libvips-linux-arm@1.2.4':
-    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
+  '@img/sharp-libvips-linux-arm@1.3.2':
+    resolution: {integrity: sha512-1eMLzy92I4J6rmi4mAT8yC3HxOtniyGELlzGbNMLLeqe052ahFQ0h6LFq+lh5DsDIdYViIDst08abvSbcEdLXQ==}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-libvips-linux-ppc64@1.2.4':
-    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
+  '@img/sharp-libvips-linux-ppc64@1.3.2':
+    resolution: {integrity: sha512-3z0NHDxD6n5I9gc05U1eW1AyRm+Gznzq3naMrthPNqE6oYykcogW0l/jfpJdjYnuNl8R7yI9pNbE1XiUeyq0Aw==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-libvips-linux-riscv64@1.2.4':
-    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
+  '@img/sharp-libvips-linux-riscv64@1.3.2':
+    resolution: {integrity: sha512-bsb4rI+NldGOsXuej2r8OdSS8+zXDVaCWxyWrcv6kneTOlgAHtZABRzBBCwdsPiD90J4myNJuHpg6kA20ImW/w==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-libvips-linux-s390x@1.2.4':
-    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
+  '@img/sharp-libvips-linux-s390x@1.3.2':
+    resolution: {integrity: sha512-/ABshyj8gCpyIrNXnHn4LorDJ0HHm1VhXPBlxZ8zAtfVPAaSafXPGn+sUSIRiwaSBy0mmFjSjiXI5mkcwdChKQ==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-libvips-linux-x64@1.2.4':
-    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
+  '@img/sharp-libvips-linux-x64@1.3.2':
+    resolution: {integrity: sha512-ITPEtgffGJ0S6G9dRyw/366tJQqFRcHWPHhC+Stpg3Z8AEMrDrTr2lhdz4f/Y/HMbRh//7Z5mBzEpVdi62Oc3w==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
-    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
+  '@img/sharp-libvips-linuxmusl-arm64@1.3.2':
+    resolution: {integrity: sha512-zE9EdiUzUmg5mDT5a1rk5fYJ6GWPloTwWBYDS14naqHsL+EaMpDj1AWnpLgh3u0YCORv2Tt50wrcrpYqkP97Kw==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
-    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
+  '@img/sharp-libvips-linuxmusl-x64@1.3.2':
+    resolution: {integrity: sha512-m0lrLiUt+lBYnCFr8qV/65yMR4E/c7/wf78I5eKTdkEakFAlZ9QlzEM3QIhhAwVeUhLAHLcCq7a7Vszq/oFNZQ==}
     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}
+  '@img/sharp-linux-arm64@0.35.3':
+    resolution: {integrity: sha512-QgKDspHPnrU+GQ55XPhGwyhC8acLVOOSyAvo1oVfFmrIXLkDNmGWzAfDZ4xK8oSA1qBQrALcHX0G5UZni/SuFQ==}
+    engines: {node: '>=20.9.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}
+  '@img/sharp-linux-arm@0.35.3':
+    resolution: {integrity: sha512-affVWCTLooy8TSxbDx2qkzuDeaWLNVBA+P//FNBirHsXpP2fuBhk5AuboYUnrDnzoXes8GFjpTx0SBFOCRg+FA==}
+    engines: {node: '>=20.9.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}
+  '@img/sharp-linux-ppc64@0.35.3':
+    resolution: {integrity: sha512-sMd8rDxmpLOwv/7N44klFjOD5DUO7FLdjiXDI0hoxYaf7Ar262dQIEkosE98bps+5HPLtp/EvNqeqQtOycP/IA==}
+    engines: {node: '>=20.9.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}
+  '@img/sharp-linux-riscv64@0.35.3':
+    resolution: {integrity: sha512-0Eob78yjlYPfL5vMNWAW55l3R9Y6BQS/gOfe0ZcP9mEz9ohhKSt4im1hayiknXgf8AWrFqMvJcKIdmLmEe7yeQ==}
+    engines: {node: '>=20.9.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}
+  '@img/sharp-linux-s390x@0.35.3':
+    resolution: {integrity: sha512-KgAxQ0DxpNOq1rG2t5cgTgShJFGSuU7XO45cqC+1NVOuZnP6tlgZRuSYOfNupGkHID0o3cJOsw4DVeJpMovcGw==}
+    engines: {node: '>=20.9.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}
+  '@img/sharp-linux-x64@0.35.3':
+    resolution: {integrity: sha512-8pqvxubL2PGdhlPy6GLqzDYMUjyRmKAwKHYKixpdJYBUK7PJ0C029XdsnpFIdgRZG68fZiGdHVWcKPvtiPB4cA==}
+    engines: {node: '>=20.9.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}
+  '@img/sharp-linuxmusl-arm64@0.35.3':
+    resolution: {integrity: sha512-Vz0iQjzzcSX3HCbfwFfCSG/9SCIqyO0mH2sXyiHaAYfBk0cRsCWXRyQYX0ovCK/PAQBbTzQ0dsPQHh5MAFL59w==}
+    engines: {node: '>=20.9.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}
+  '@img/sharp-linuxmusl-x64@0.35.3':
+    resolution: {integrity: sha512-6O1NPKcDVj9QEdg7Hx549EX8U0rp6yXQERqru6yRN7fGBn32UvIRJUlWnk+8xDCiG76hXVBbX82NZ/ZKr0euIg==}
+    engines: {node: '>=20.9.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}
+  '@img/sharp-wasm32@0.35.3':
+    resolution: {integrity: sha512-cZ0XkcYGpHZkqW6iCkqTcmUC0CD9DhD5d/qeZlZkfRBn6GnHniZXLUo5+9xw8Iv76YE6LQFN9YNBlKREcCG76w==}
+    engines: {node: '>=20.9.0'}
+
+  '@img/sharp-webcontainers-wasm32@0.35.3':
+    resolution: {integrity: sha512-2rnq7bX3NzeR2T4YWgz8qiG4h3TSdMe+vN1iQXpJleSJ3SM5zQ8Fy2SyyXAWlbxpEZ2Y+Z4u1BePgJEYbSy80Q==}
+    engines: {node: '>=20.9.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}
+  '@img/sharp-win32-arm64@0.35.3':
+    resolution: {integrity: sha512-4bPwFdMbeC4JQ8L8LOyWp6nsHcboP5fxkp6iPOXz2Vg49R42TuMs2whkJ5OAP4/Ul035qOzy0AecOF9VOscn4w==}
+    engines: {node: '>=20.9.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}
+  '@img/sharp-win32-ia32@0.35.3':
+    resolution: {integrity: sha512-r53mXsBN6lFUDiST764SvgwUdHAqM4rPAiDzAmf4fLoB6X/rkfyTrLCg6+g17wJJiCmB3JYgHuUldCWUIRFSXw==}
+    engines: {node: ^20.9.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}
+  '@img/sharp-win32-x64@0.35.3':
+    resolution: {integrity: sha512-D4y1vNeZrIIJCN+uHaWVtH86B+aCrdMYYjicy9pXHvbGZeGYLLSd3wdVuC37FxVXlU1ARsk84eKWfWMXGYEqvA==}
+    engines: {node: '>=20.9.0'}
     cpu: [x64]
     os: [win32]
 
@@ -5985,57 +6350,57 @@ packages:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
 
-  '@next/env@16.2.10':
-    resolution: {integrity: sha512-zLPxg9M0MEHmygpj5OuxjQ+vHMiy/K7cSp74G8ecYolmgUWw0RwN02tF56npup/+qaI8JB97hQgS/r2Hb6QwVA==}
+  '@next/env@16.3.0-preview.9':
+    resolution: {integrity: sha512-BcD+/sVDfoHckHcEx6e4RaLfWrUb+DpXgL9jOc6f29RTyvNwVVtnAaPljp3ok4zFQan6RhFE7q32lSXAFjjV9A==}
 
-  '@next/swc-darwin-arm64@16.2.10':
-    resolution: {integrity: sha512-v9IdJCa0H0mbo+8z5zwUpOk1Vj7RjkcI5uNYf5Ws1y6szf/p3Mzl9hLaST8SCt6L9h8NGnruZcd2+o0NTNwDhA==}
+  '@next/swc-darwin-arm64@16.3.0-preview.9':
+    resolution: {integrity: sha512-42OV/jDhHoKuqq+kp0RYrW1uksykLhXQeX+zx4SYFEG45ec9HnLHnsGgG1vy5W+LaSDvj3BPMBPTKMCh1vl1Ew==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@16.2.10':
-    resolution: {integrity: sha512-17IS0jJRViROGmA9uGdNR8VPJpfbnaVG7E9qhso5jDLkmyd0lSDORWxbcKINzcFqzZqGwGtMSnrFRxBpuUYjLQ==}
+  '@next/swc-darwin-x64@16.3.0-preview.9':
+    resolution: {integrity: sha512-j6dvZHjhjB3l+uDQiBmuajzzCyCetWdQw+eouwR0mE455b+OvPY32dUNIY+D33oTOe3f0My9wSw4Um5hxywUlA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@16.2.10':
-    resolution: {integrity: sha512-GRQRsRtuciNJvB54AvvuQTiq0oZtFwa1owQqtZD8wwnGpM2L39MV22kpI72YSXLKIyY40LC66EiLFv4PiicXxg==}
+  '@next/swc-linux-arm64-gnu@16.3.0-preview.9':
+    resolution: {integrity: sha512-2+1WzP2+ngzCkXiyzBwowgBiYaUycjAB/9b5ah5TjP0icBHOHf7oaPnjSZlZ8iq6x2G6QuR9S840jkOKNInUCw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@next/swc-linux-arm64-musl@16.2.10':
-    resolution: {integrity: sha512-zkN9MQYS7UQBro+FnISUq1itaQjXI9xqISzuQ+2bc921NcJ1x4yPCqrn77tVN6/dOOXaaWVX3k6/bR07pPwK+A==}
+  '@next/swc-linux-arm64-musl@16.3.0-preview.9':
+    resolution: {integrity: sha512-2Tq6H0LtObGQj2s7u56TYakTJ3NmDOWnNRaT2TI17oQEUfPv3O4a22jt4xIDVkxvaYfB2L4y2hl8DGAEw1WV6g==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@next/swc-linux-x64-gnu@16.2.10':
-    resolution: {integrity: sha512-iCVJnwvrPYECvA6WM/7+oo+OiTvedIKLxtCLAZP4xZR3nXa1zmzZyLPbYCmWvpd4CvMYF1EMTafd0ii3DygLvA==}
+  '@next/swc-linux-x64-gnu@16.3.0-preview.9':
+    resolution: {integrity: sha512-H2bCT2w2H/W6xRLRw4oWgOEMIyWc1tn65c46u0zC60omKig9hPWj7vrhMBqwOMTmZcFZwNqBTpJTF0LuopEfHA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@next/swc-linux-x64-musl@16.2.10':
-    resolution: {integrity: sha512-ov2g4H0dHY9bPoOU83m91hWT7Iq5qy13bUnyyshLU3HGR1Ownn0X9QpmDPc5iIUaahTp7f7LeGAhV4DSFtackw==}
+  '@next/swc-linux-x64-musl@16.3.0-preview.9':
+    resolution: {integrity: sha512-WK0CI8ky1oDGwqzi8oJjtC5rfMNOUx4DMBiVr1o9mvsMwkCUkVh7n6+AAx2Qxk8llRJxpaGlBZv1fhHytsENVw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@next/swc-win32-arm64-msvc@16.2.10':
-    resolution: {integrity: sha512-DwAnhLX76HQiFFQNgWlcK+JzlnD1rZ+UK/WY0ZMI/deXpvgnesjNYrqcfo1JzBuz4Kf7o3brIBL0glI1junatA==}
+  '@next/swc-win32-arm64-msvc@16.3.0-preview.9':
+    resolution: {integrity: sha512-COFwXsMQsStyBv4qBn6E3tKHuPVifMkpVvF2k2/I0HsLAwuelgj+5uO8jS4e+sfTcdvczdvuiG8BjJz3aAa0IQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@16.2.10':
-    resolution: {integrity: sha512-0JXq3b85Jk9Jg4ntLUbXSPvoDw3gpZou7twuKdoFG2jOw635v7+IiXfTaa0TxVMyx78pUjnrVYwLgjKfX4e6/A==}
+  '@next/swc-win32-x64-msvc@16.3.0-preview.9':
+    resolution: {integrity: sha512-RG4rEpg3ynGwTP6mnsDZHLuFbKksXkQCd9A5MDkgPY9+wYawIrc23pJYHZxyBxisuV/t+dwCgbpZoclW8icE7A==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -6702,6 +7067,9 @@ packages:
   '@radix-ui/number@1.1.3':
     resolution: {integrity: sha512-Road2bidD0uu/1BGDOWNdPI06g0lIRy6IF9GZcIrDK2KGItfor8IQwQa+yM2ERgHM1MmHxaxpTzk0/Jp42lNfA==}
 
+  '@radix-ui/primitive@1.1.5':
+    resolution: {integrity: sha512-d86WIWFYNtGA0H/d8exstrTRTp7eWJYlYJbtNofxr/3ljupZYn6EFDG/Qgu/0Kc8v7yMUxySagqJsL1+PdYjWg==}
+
   '@radix-ui/primitive@1.1.7':
     resolution: {integrity: sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q==}
 
@@ -6822,6 +7190,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-compose-refs@1.1.3':
+    resolution: {integrity: sha512-rYOP8OMnuuPMQF1uhPVlGNcCDlkokKqGFE3JcxFViIkAXP7EvFWUliJAstrapypaBLJNHbZL6jGhbVDGTwmVhA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.1.5':
     resolution: {integrity: sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==}
     peerDependencies:
@@ -6844,6 +7221,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-context@1.2.0':
+    resolution: {integrity: sha512-fOE+JtN9rygNZkCnHRBEP0TAvLldlhyOxMsbwFvTP4nAs+nBmfnna+o/Zski2wkmY1YMrFC0aSzsHoLY47iLrg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-context@1.2.2':
     resolution: {integrity: sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA==}
     peerDependencies:
@@ -6853,6 +7239,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-dialog@1.1.19':
+    resolution: {integrity: sha512-+HhbN2+YtkRgVirjZ2afMeutQRuGOrdkWR5+EFC58SJojGmtyNQwYzgi6tHBpOxvFHefMtPeHdgtjz0BOGxFQg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-dialog@1.1.23':
     resolution: {integrity: sha512-Ksw4WeROkO4rC9k/onilX/Ao2Cr1ku1unMNH+XSCcP4jSXYu7HDsg9n4ojMjVb22XpYjAQ9qfrFlVbru1vXDUA==}
     peerDependencies:
@@ -6875,6 +7274,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-dismissable-layer@1.1.15':
+    resolution: {integrity: sha512-b0XaRlzn2QKuo10XyNgi2DAJDf5XC9d1nD3FJcuvCjbR7+4Ad28zmZsLsqx+hvDEzMnRuZaZxZm9gYObV6RmRA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.1.19':
     resolution: {integrity: sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w==}
     peerDependencies:
@@ -6901,6 +7313,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-focus-guards@1.1.4':
+    resolution: {integrity: sha512-cot/aB/mOm0IYVYTTmQcEEK1M48lZWi8FlYe5nDPQQ8NYZUlXEFgncJ9p2Kzer3RKSrY7cTTpEMLZKNo9QoP5Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-focus-guards@1.1.6':
     resolution: {integrity: sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==}
     peerDependencies:
@@ -6910,6 +7331,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-focus-scope@1.1.12':
+    resolution: {integrity: sha512-jjk/lqTeNL0azUx5ZYzVrl4NgaDIrdzTNE4mABV9yBFI7FQqN7pIgzV1bTleUezP2QiTGA1BFTqY8MegDgWX9A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-focus-scope@1.1.16':
     resolution: {integrity: sha512-wmRZ2WWLvmt6KHy2rNPOdPUjwq5xOHY02+m+udwJTn0aNIox/rkskAvJTyTLGhPK6KgrUjlJUJpgmx/+wFiFIQ==}
     peerDependencies:
@@ -6949,6 +7383,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-id@1.1.2':
+    resolution: {integrity: sha512-orBC88futVpqCmhX1p4cvquNHsELQ+w+vBJnuj3ftETI5bJb0bZn3Tqu3SWN2IOcPycTnMGnhwoermvISt72sA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-id@1.1.4':
     resolution: {integrity: sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==}
     peerDependencies:
@@ -7062,6 +7505,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-portal@1.1.13':
+    resolution: {integrity: sha512-z3oXfmaHLJTF1wktbjgD6cn9jiEbq3WSondB10LIuIt2m2Ym4iJlrW04/euMwENDdWDdE7z+OuY7Qyp1YpRSwA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-portal@1.1.17':
     resolution: {integrity: sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ==}
     peerDependencies:
@@ -7088,6 +7544,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-presence@1.1.7':
+    resolution: {integrity: sha512-zBZ4QM5XG3JRanDmqXYf3MD6th4AFXFmgU6KNMFzUaV6F3uw9I5/zjMUvFriSEn5ewo1nxuibvyxJdmLlDcslA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-primitive@2.1.10':
     resolution: {integrity: sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg==}
     peerDependencies:
@@ -7101,6 +7570,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.1.7':
+    resolution: {integrity: sha512-bC3NiwsprbxKjuon9l7X6BUTw7FPVzEYaL92MPEY5SCd/9hUTPXVFtVwRix7778wtRsVao+zE062gL79FZleeQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-progress@1.1.16':
     resolution: {integrity: sha512-5XnomAsoZZCY+KNTxbIghpGqPruZvKFNlvcAljVAOdDRDsH4/OZQxhtwo5wdtoDM5R6MhJBb2sPnDuRFep3lzg==}
     peerDependencies:
@@ -7192,6 +7674,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-slot@1.3.0':
+    resolution: {integrity: sha512-MojKku4U/miO8Av4Dkb+ctMAQx7JmY96LmtDQlAarCRtd7rN52QCSzBF+XAvr5S6coSVj9HEPBgHAHKEJVk/WA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-slot@1.3.3':
     resolution: {integrity: sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==}
     peerDependencies:
@@ -7292,6 +7783,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-use-callback-ref@1.1.2':
+    resolution: {integrity: sha512-xCso9j1/u8sEgP1RNHjFrXJLApL8LiqOkI1R4ywuN00rxWdYg4oQXuwKLS3i0j5NWLromUD27/4nlxj2UFVvIw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-callback-ref@1.1.4':
     resolution: {integrity: sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==}
     peerDependencies:
@@ -7301,6 +7801,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-controllable-state@1.2.3':
+    resolution: {integrity: sha512-PLzC90MS+ReootmjC597dvopoelpZ8Q61HJkDXZSExitIq7PL55vHNnesAHwguHK0aPfBnpdNzQtv1uliaqQrA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-controllable-state@1.2.6':
     resolution: {integrity: sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ==}
     peerDependencies:
@@ -7310,6 +7819,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-effect-event@0.0.3':
+    resolution: {integrity: sha512-6c8ZqvPTWILEKnyVkP53EGRCcpnJiKTC21sS/6R1GF5xKyHJJWQEPfkqlcgUkdRQivd6tb23abUwe4ngWmY0JA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-effect-event@0.0.5':
     resolution: {integrity: sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg==}
     peerDependencies:
@@ -7337,6 +7855,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-layout-effect@1.1.2':
+    resolution: {integrity: sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-layout-effect@1.1.4':
     resolution: {integrity: sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==}
     peerDependencies:
@@ -7785,6 +8312,17 @@ packages:
     peerDependencies:
       semantic-release: '>=20.1.0'
 
+  '@shadcn/react@0.2.1':
+    resolution: {integrity: sha512-5krgi3dRMKb5jH6a+qPzVJUy/54s0kKE4Rw4LjDfLqOdVQTWKUgxWf1kW8r912I0jX/Lzxqc+pgjkjWxUIK5BQ==}
+    peerDependencies:
+      '@types/react': '>=19'
+      react: '>=19'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+
   '@sideway/address@4.1.5':
     resolution: {integrity: sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==}
 
@@ -7794,12 +8332,6 @@ packages:
   '@sideway/pinpoint@2.0.0':
     resolution: {integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==}
 
-  '@signalwire/docusaurus-plugin-llms-txt@1.2.2':
-    resolution: {integrity: sha512-Qo5ZBDZpyXFlcrWwise77vs6B0R3m3/qjIIm1IHf4VzW6sVYgaR/y46BJwoAxMrV3WJkn0CVGpyYC+pMASFBZw==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      '@docusaurus/core': ^3.0.0
-
   '@sinclair/typebox@0.27.10':
     resolution: {integrity: sha512-MTBk/3jGLNB2tVxv6uLlFh1iu64iYOQ2PbdOSK3NW8JZsmlaOh2q6sdtKowBhfw8QFLmYNzTW4/oK4uATIi6ZA==}
 
@@ -7827,6 +8359,36 @@ packages:
   '@so-ric/colorspace@1.1.6':
     resolution: {integrity: sha512-/KiKkpHNOBgkFJwu9sh48LkHSMYGyuTcSFK/qMBdnOAlrRJzRSXAOFB5qwzaVQuDl8wAvHVMkaASQDReTahxuw==}
 
+  '@solid-primitives/event-listener@2.4.6':
+    resolution: {integrity: sha512-5I0YJcTVYIWoMmgBSROBZGcz+ymhew/pGTg2dHW74BUjFKsV8Li4bOZYl0YAGP4mHw5o4UBd9/BEesqBci3wxw==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/keyboard@1.3.7':
+    resolution: {integrity: sha512-558RPNYnXx4nGh537DSqAn4xMrC8iFipl/5+xzgzWoTNFst4RnUN3BOLmtDjJ0UGGoQXVMALYR3bNOHM0xnt1Q==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/resize-observer@2.2.0':
+    resolution: {integrity: sha512-9Fuu/EWBeGj+atGHRJp70HKhdfalmpjwxY8a32NZixdLNmfCJ45AfhLQNr6uOzETbbiMx4iCKlTrJ8KZCHC2Ww==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/rootless@1.5.4':
+    resolution: {integrity: sha512-TOIZa1VUfVJ+9nkCcRajw3U4t9vBOP1HxX1WHNTbXq32mXwlqTvUnC4CRIilohcryBkT9u2ZkhUDSHRTaGp55g==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/static-store@0.1.4':
+    resolution: {integrity: sha512-LgtVaVBtB7EbmS4+M0b8xY5Iq6pUWXBsIC4VgtrFKDGDdyCaDt88sHk0fUlx1Enxm/XZnZyLXJABRoa39RjJqA==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/utils@6.4.1':
+    resolution: {integrity: sha512-ISSB5QX1qP2ynrheIpYwc4oKR5Ny4siNuUyf1qZniy+Il+p/PtDB0QK1Dnle8noiHpwRD3gpPdubOC3qI/Zamg==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
@@ -8213,21 +8775,50 @@ packages:
   '@tailwindcss/postcss@4.3.2':
     resolution: {integrity: sha512-rjVWYCa7Ngbi5AarT6k8TkxUG3Wl1QKzHdIZVsjZSzf36Jmo2IKZt/NHRAwly8oDkbBOH0YTu+CHuf9jPxMc+g==}
 
+  '@tanstack/devtools-client@0.0.8':
+    resolution: {integrity: sha512-cG3iZkGWCwN330bLBKa8+9r4Of2AXNoz2zUqcsy/4XsD3105ghVBx78cGyvJj9fSclNomPxoqAnDGXXhg1WLvA==}
+    engines: {node: '>=18'}
+
+  '@tanstack/devtools-event-bus@0.4.2':
+    resolution: {integrity: sha512-2LHzhwBFlKHCcklsQrGe8TeyjHd4XAF8nuCO6wHmva5fePUkJUULbu6CsCNAlGlCi0KkEsMXZSvRdR4HgMq4yA==}
+    engines: {node: '>=18'}
+
+  '@tanstack/devtools-event-client@0.5.0':
+    resolution: {integrity: sha512-H+OH3zC6Vhu/K0NaVfQKknEKawc/+2PT+D3SB3Ox0V8SiMlTo0abbmH2rH0721R2aNYbjdMXA1oENOd8E2UVoA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  '@tanstack/devtools-ui@0.6.0':
+    resolution: {integrity: sha512-CVaM6rT6Nl5ijo83vJYFa2SjofvpuOl/uOvbYGhBrRgUhhelNHhx8zZX+hnZCHmIr0/lzM65hsocnZ72592Rvg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      solid-js: '>=1.9.7'
+
+  '@tanstack/devtools@0.13.0':
+    resolution: {integrity: sha512-p/nOH9bS/OO/u3402zPjoGu+Mz6Fzi/iRqJuYghuuYRUY32kZt+C0/d+pP/bi6/2JTi1FdT6oEXI2lWlA5tXxw==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      solid-js: '>=1.9.7'
+
   '@tanstack/match-sorter-utils@8.19.4':
     resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
     engines: {node: '>=12'}
 
-  '@tanstack/query-async-storage-persister@5.101.2':
-    resolution: {integrity: sha512-jf7zvVKZ5q2j/xuhbTIBUpw5xt6cw/ioOFQquxK7fRY0AmMQP8A0JVMOgYoeQLA4PKdeT7RxsuLAF0Lft9oJ8Q==}
-
   '@tanstack/query-core@5.101.2':
     resolution: {integrity: sha512-hH5MLoJhF7KaIGd7q3xTXGXvslI+GYlM1Z/35aSHHWaCJWB7XvTSHYuV3eM7tw+aE0mT/xMro4M4Q9rCGHT0lw==}
 
   '@tanstack/query-devtools@5.101.2':
     resolution: {integrity: sha512-o+wHcqgN7Pp0s8v1i0UGq/ZrrEKrxdIiMQmKRdYb2w7NPtylYSJ4+wg/tIn71m9DLstwUwdEGAvROdly6HXP6w==}
 
-  '@tanstack/query-persist-client-core@5.101.2':
-    resolution: {integrity: sha512-rgMsbvBVpSPDUsprC9FYxojdG0Q1LH6yq1i3DXz2aps4VEqv2l4Msj3YDqIifU3xkl/DrYe9YWntZAJLrM6xTg==}
+  '@tanstack/react-devtools@0.10.9':
+    resolution: {integrity: sha512-lS6mtccEmUaodsWiRORGM/MGKT0jgzcy5v+eY6pzOPxEgzTHUDhca+WGxShFqKxmF4oneRxXjww1gkvMrWq6uw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      '@types/react-dom': '>=16.8'
+      react: '>=16.8'
+      react-dom: '>=16.8'
 
   '@tanstack/react-query-devtools@5.101.2':
     resolution: {integrity: sha512-eU7HctdA9gDjqoERoEdzLbw9DiqnBDfh5+Hu0u26gjqoHJezOpQAuiesDL2VvkU+2cPV76zgv0tMZsOrI4LjnQ==}
@@ -8242,12 +8833,6 @@ packages:
       next: ^13 || ^14 || ^15 || ^16
       react: ^18 || ^19
 
-  '@tanstack/react-query-persist-client@5.101.2':
-    resolution: {integrity: sha512-19UpaRtf0lvB2QAJ2MoixxtGf3osMOd508g99EsttUj4+3eLs+ulnNgYjB7AkQMHrRlcbVXqpVNqWkB4a7g8Zw==}
-    peerDependencies:
-      '@tanstack/react-query': ^5.101.2
-      react: ^18 || ^19
-
   '@tanstack/react-query@5.101.2':
     resolution: {integrity: sha512-seDkr6kzGzX1okaaTtZPtgA688CDPlXUz1C6xSg0ESqn04Vuc8tlrYms1s3de+znBqhPVxFRfpAfUf+6XvfPWg==}
     peerDependencies:
@@ -8502,12 +9087,14 @@ packages:
 
   '@trpc/client@11.18.0':
     resolution: {integrity: sha512-wOqeg3Fvl25V1ZisQhUD3K8G60ZJDlSGJNSyeXrLH24xAo5w6GSR2Kzb1cSNY9Y+IQ2YZvYGZstBU+V/ulo/ow==}
+    hasBin: true
     peerDependencies:
       '@trpc/server': 11.18.0
       typescript: '>=5.7.2'
 
   '@trpc/next@11.18.0':
     resolution: {integrity: sha512-ocwbruAWMGX9hY3HFg86X4jAcoF2v+xx+A2jDn72SbttRRG2hXR+XKPjrLc1dDJC0oi+/2DJEbL14+k1pyY5og==}
+    hasBin: true
     peerDependencies:
       '@tanstack/react-query': ^5.59.15
       '@trpc/client': 11.18.0
@@ -8534,11 +9121,13 @@ packages:
 
   '@trpc/server@11.18.0':
     resolution: {integrity: sha512-JAvXOuNTxgXjIDfQaOvDq1j66LMNfDJUH1IU7Slfn8EvRv2EkH6ehu3A7zpYhjO0syHHiYg77v2lG2JFJgvw7Q==}
+    hasBin: true
     peerDependencies:
       typescript: '>=5.7.2'
 
   '@trpc/tanstack-react-query@11.18.0':
     resolution: {integrity: sha512-dm5xIlN0SEzJAbQ34EHdb1Kgd/zWZ63ZMviQEw3WCWCIPz8MjLKAhquncPcn+YxFUJa+Qi4qatdGFymmM4HmAQ==}
+    hasBin: true
     peerDependencies:
       '@tanstack/react-query': ^5.80.3
       '@trpc/client': 11.18.0
@@ -8837,20 +9426,12 @@ packages:
   '@types/prismjs@1.26.6':
     resolution: {integrity: sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==}
 
-  '@types/prop-types@15.7.15':
-    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
-
   '@types/qs@6.9.16':
     resolution: {integrity: sha512-7i+zxXdPD0T4cKDuxCUXJ4wHcsJLwENa6Z3dCu8cfCK743OGy5Nu1RmAGqDPsoTDINVEcdXKRvR/zre+P2Ku1A==}
 
   '@types/range-parser@1.2.7':
     resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
 
-  '@types/react-dom@18.3.7':
-    resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
-    peerDependencies:
-      '@types/react': ^18.0.0
-
   '@types/react-dom@19.2.3':
     resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
     peerDependencies:
@@ -8865,9 +9446,6 @@ packages:
   '@types/react-router@5.1.20':
     resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
 
-  '@types/react@18.3.31':
-    resolution: {integrity: sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==}
-
   '@types/react@19.2.17':
     resolution: {integrity: sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==}
 
@@ -8946,8 +9524,125 @@ packages:
   '@types/yargs@17.0.35':
     resolution: {integrity: sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==}
 
-  '@typescript/typescript6@6.0.2':
-    resolution: {integrity: sha512-mbCddXd+jm7hfx7w2YU64/Av4/NqqeG3GoRZgxPcgoTxYjhrcfJRw9ULch71SS4G+Q3bOXFhRvPqjguN0Hyp5w==}
+  '@typescript/typescript-aix-ppc64@7.0.2':
+    resolution: {integrity: sha512-MTKKkWB7p/0E9xi1d1tHtZ5PiLkGEMIq88pK2CubZjOsLtYTLqhgIgi6zepFa+9GHZ6h05NMCkQxGKiPXMxXtQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@typescript/typescript-darwin-arm64@7.0.2':
+    resolution: {integrity: sha512-gowzar9MwS/aRWp6f3a4KUqzRjAZjOsmGNCM6LcTgXum+dBfgsBVMN+AgvOCCbguXyick6LJhpBszxMebJ8syA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@typescript/typescript-darwin-x64@7.0.2':
+    resolution: {integrity: sha512-SZ9xZInqApNlNGc9s0W1VSsktYSOe9cFqNOIqmN1Gs8SmkjKZYFt017G4VwPxASInODuAdbTW7sXiFUf893RgA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@typescript/typescript-freebsd-arm64@7.0.2':
+    resolution: {integrity: sha512-W5NH4y/J0plIIS5b2xvTEkU7JFxyqdMAOgf+Ilhl0vHQXKO5dZoxd+C/jEtq56c4F3wk71RB4BMRQ2XdI+bwYQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@typescript/typescript-freebsd-x64@7.0.2':
+    resolution: {integrity: sha512-UMGDx5sTpzNw3WiPebH7l90IWfJggEd+egHt/q6p7/Cm3zqoV7VxkGXt+3DxPIw8CcmvAB0j3sVVfbhX+M4Tpw==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@typescript/typescript-linux-arm64@7.0.2':
+    resolution: {integrity: sha512-Qh4eU4/y3yDjnfjjyPYihMj5/ODIlmt+Bzu17OI+fiSRDW57QmU5SiN63exPRNJPKUzcc1INa1NXdrJ+MqHjUQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@typescript/typescript-linux-arm@7.0.2':
+    resolution: {integrity: sha512-gffT3xPz9sR7j/YJExkyPntrI0P2EP9XbOyWzth2/Gs0RstK+90RBcO0ncXoXy/beYll1SXw846Nf2zdnEz0QQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@typescript/typescript-linux-loong64@7.0.2':
+    resolution: {integrity: sha512-uEHck9i8hoAzXPiYRib1O7miOnz23SxIeVl6F4LXox+qov1K35jHcEW6VHKvZI+pyvl7fZEP4MCU5LYvIq1GuQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@typescript/typescript-linux-mips64el@7.0.2':
+    resolution: {integrity: sha512-R4KvAMnE43W5Qeqb0Ly56O3mWMWIAgsMyz36DCaycd5nbg/9kzm0liw3JocfRqyJY0KPmzFjbswozXyW0DnIYA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@typescript/typescript-linux-ppc64@7.0.2':
+    resolution: {integrity: sha512-DORx5b3sd/4S7eayxm4FQv+A7CrkUIGRaHiwI8oiHTAI1fAPWhF4J0vAlkC8biAlHSVVwxMQ3tjZ2/DVbnQiiA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@typescript/typescript-linux-riscv64@7.0.2':
+    resolution: {integrity: sha512-wf0jqEDOjrPRnKwYRyyJDRo11KMbvMFrU+q4zqKyChODBzvlkbhNQfKvLxQCcwTpdDaXSHZTVuh0JoCrKCUMHQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@typescript/typescript-linux-s390x@7.0.2':
+    resolution: {integrity: sha512-IkwJc3L7yhytWd/ewjyxNDfOmswCm9GWMJT/ue/dU4aZNbwZeYAetq42VyLmsmSjvoX7z74X6ZaYCtzAr0EuGw==}
+    engines: {node: '>=16.20.0'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@typescript/typescript-linux-x64@7.0.2':
+    resolution: {integrity: sha512-EYdf2cNg7rgCWJnxCdJ+F3V39O8ihb37eHAu1LK8oAFizgTQbPOK7zHHXbPt8rX24COqODXeI3sIf0fCXG7H/A==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@typescript/typescript-netbsd-arm64@7.0.2':
+    resolution: {integrity: sha512-+polYF4MF04aPpO5FTkHran9yUQDSXqy5GiSDKpsll5jy3l3+g9QLhpf39T+ePtefhXLOGrLl0QIjkQP6VnelA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@typescript/typescript-netbsd-x64@7.0.2':
+    resolution: {integrity: sha512-8YIT0EHM/3dq10ZOVF/A7pc/YSMtbcecct4rWtexrnSCHOPcpC2KTLXfTCR6vDpnSiY12heNb1GiN/wu+T/FyA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@typescript/typescript-openbsd-arm64@7.0.2':
+    resolution: {integrity: sha512-APT8+ClYnuYm1u9+kgGXoMj2VzWzcymwh2gNSQVySHfkRDGOTVkoWLjCmOQSaO+PoqQ57B0flRp9SA+7GnnkzQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@typescript/typescript-openbsd-x64@7.0.2':
+    resolution: {integrity: sha512-yX7s+Q0Dln0Dt9tEzZsAjXXR/+ytBM7AlglaqyeMPxQszJ1JhlJdZ6jLA+IzldHtflX81em7lDao1xXu+aRRkg==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@typescript/typescript-sunos-x64@7.0.2':
+    resolution: {integrity: sha512-dLJDGaLZ1D4HPQn62u1n8mBDkJREwMsAkCdkwd4Ieqw+x3TUyTsqY0YiBCtE6H6OzzgGk3iuZ3vFWRS+E8/d1g==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@typescript/typescript-win32-arm64@7.0.2':
+    resolution: {integrity: sha512-Gyl1Vy6OsWesLzmq+EP0Fb7b4Nid5232AvcA2SFcdYreldpNtYFFofPjnt62y9hQy7VTaZp65ICJjuAQRaVcIQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@typescript/typescript-win32-x64@7.0.2':
+    resolution: {integrity: sha512-0BQ3HkAHHlKLSp1qRvf3SUhGpGsDuhB/jgFw75guyqbxJqEaS0Cw/VFO8i2nHglJUzQCRtMMR/IBAKE3ETMC4g==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [win32]
 
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
@@ -9272,8 +9967,8 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
-  ai@7.0.37:
-    resolution: {integrity: sha512-stF+SEQJgKY3Qfe3FwNzqUrehHviOp2l7LemoI8YMOa0Zk5PxKsRNgUk3cHXz0RAue9RRyCAis2fz6LSCP6EKw==}
+  ai@7.0.52:
+    resolution: {integrity: sha512-sEgRnYA+ddJ1rJSz1uKBjkGbOXhXdon1nvno49fVk3tabnlf8v5SaceLBpPDMtmDuLKQFztc/YbRsoCQoPzKZw==}
     engines: {node: '>=22'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
@@ -9422,6 +10117,17 @@ packages:
       redis:
         optional: true
 
+  assistant-stream@0.3.33:
+    resolution: {integrity: sha512-ZUP5hGMtucRpg1TQWCMX3Tp7iOvhG4KWrKTJYtNUCbtDvPuMod4JbBp2JJp8ThrNALXBi3OlE4ZU1a/6W11Cog==}
+    peerDependencies:
+      ioredis: ^5.10.1
+      redis: ^5.12.1
+    peerDependenciesMeta:
+      ioredis:
+        optional: true
+      redis:
+        optional: true
+
   ast-v8-to-istanbul@1.0.0:
     resolution: {integrity: sha512-1fSfIwuDICFA4LKkCzRPO7F0hzFf0B7+Xqrl27ynQaa+Rh0e1Es0v6kWHPott3lU10AyAr7oKHa65OppjLn3Rg==}
 
@@ -9448,6 +10154,7 @@ packages:
   autoprefixer@10.5.0:
     resolution: {integrity: sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==}
     engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
     peerDependencies:
       postcss: ^8.1.0
 
@@ -9546,13 +10253,11 @@ packages:
   baseline-browser-mapping@2.10.31:
     resolution: {integrity: sha512-MujYO3eP72uvmSE0i4wltsodRfIpZATP3jvzRNRGGxgzId7aVocVJJV3nf01qnzzKFGxQVC9bpWxl5cjxTr/7Q==}
     engines: {node: '>=6.0.0'}
+    hasBin: true
 
   batch@0.6.1:
     resolution: {integrity: sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==}
 
-  bcp-47-match@2.0.3:
-    resolution: {integrity: sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==}
-
   bcrypt-pbkdf@1.0.2:
     resolution: {integrity: sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==}
 
@@ -9853,6 +10558,9 @@ packages:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   classnames@2.5.1:
     resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
 
@@ -9914,10 +10622,19 @@ packages:
     resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
     engines: {node: '>=0.10.0'}
 
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
   co-body@6.2.0:
     resolution: {integrity: sha512-Kbpv2Yd1NdL1V/V4cwLVxraHDV6K8ayohr2rmH0J87Er8+zJjcTa6dAn9QMPC9CRgU8+aNajKbSf1TzDB1yKPA==}
     engines: {node: '>=8.0.0'}
 
+  codemirror@6.0.2:
+    resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}
+
   collapse-white-space@2.1.0:
     resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
 
@@ -10186,6 +10903,7 @@ packages:
 
   crypto-js@4.2.0:
     resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+    deprecated: Active development of CryptoJS has been discontinued. This library is no longer maintained.
 
   crypto-random-string@4.0.0:
     resolution: {integrity: sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==}
@@ -10258,9 +10976,6 @@ packages:
   css-select@5.2.2:
     resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
 
-  css-selector-parser@3.3.0:
-    resolution: {integrity: sha512-Y2asgMGFqJKF4fq4xHDSlFYIkeVfRsm69lQC1q9kbEsH5XtnINTMrweLkjYMeaUgiXBy/uvKeO/a1JHTNnmB2g==}
-
   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'}
@@ -10379,6 +11094,7 @@ packages:
   d3-dsv@3.0.1:
     resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
     engines: {node: '>=12'}
+    hasBin: true
 
   d3-ease@3.0.1:
     resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
@@ -10491,6 +11207,9 @@ packages:
     resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
 
+  date-fns@4.4.0:
+    resolution: {integrity: sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==}
+
   dayjs@1.11.21:
     resolution: {integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==}
 
@@ -10625,9 +11344,6 @@ packages:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
 
-  direction@2.0.1:
-    resolution: {integrity: sha512-9S6m9Sukh1cZNknO1CWAr2QAWsbKLafQiyM5gZ7VgXHeuaoUwffKN4q6NC4A/Mf9iiPlOXQEKW/Mv/mh9/3YFA==}
-
   dns-caching@0.2.9:
     resolution: {integrity: sha512-FSvmI/dC/HXYIyX2m7MvQt36Yut49GCw3hWaDqaTgLLmKyLs5lmv/jhmNKqWjSF2vRGTgFYL0G3mwcjLlKXj0w==}
 
@@ -10837,6 +11553,19 @@ packages:
   electron-to-chromium@1.5.361:
     resolution: {integrity: sha512-Q6Hts7N9FnJc5LeGRINFvLhCI9xZmNtTDe5ZbcVezQz7cU4a8Aua3GH1b8J2XY8Al9PF+OCwYqhgsOOheMdvkA==}
 
+  embla-carousel-react@8.6.0:
+    resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  embla-carousel-reactive-utils@8.6.0:
+    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0:
+    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
+
   emoji-regex@10.6.0:
     resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
 
@@ -11076,8 +11805,8 @@ packages:
     resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
     engines: {node: '>=18.0.0'}
 
-  execa@10.0.0:
-    resolution: {integrity: sha512-Cxl6MKxB1dr1H0FHmiizJ+lavKF7pV+fcDZFyqMB8d5m7qUPm/OtZYcD5vPWePKxSnTQ57KuBd9mtdZ3oNCvyQ==}
+  execa@10.0.1:
+    resolution: {integrity: sha512-ge98qjkRK4IB7tL7Ju/6qmm5LHoH1eEMt5FNZrz3f4UIYhF28lggX20z3FaX1sgc67msLEn0N0BscOs29iuwyw==}
     engines: {node: '>=22'}
 
   execa@5.1.1:
@@ -11466,6 +12195,11 @@ packages:
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
+  goober@2.1.19:
+    resolution: {integrity: sha512-U7veizMqxyKlM58+Z5j2ngJBH/r9siDmxpvNxSw0PylF6WQvrASJEZrxh1hidRBJc2jqoBVSyOban5u8m+6Rxg==}
+    peerDependencies:
+      csstype: ^3.0.10
+
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -11572,9 +12306,6 @@ packages:
   hast-util-sanitize@5.0.2:
     resolution: {integrity: sha512-3yTWghByc50aGS7JlGhk61SPenfE/p1oaFeNwkOOyrscaOkMGrcW9+Cy/QAIOBpZxP1yqDIzFMR0+Np0i0+usg==}
 
-  hast-util-select@6.0.4:
-    resolution: {integrity: sha512-RqGS1ZgI0MwxLaKLDxjprynNzINEkRHY2i8ln4DDjgv9ZhcYVIHN9rlpiYsqtFwrgpYU361SyWDQcGNIBVu3lw==}
-
   hast-util-to-estree@3.1.3:
     resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==}
 
@@ -11584,15 +12315,9 @@ packages:
   hast-util-to-jsx-runtime@2.3.6:
     resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
 
-  hast-util-to-mdast@10.1.2:
-    resolution: {integrity: sha512-FiCRI7NmOvM4y+f5w32jPRzcxDIz+PUqDwEqn1A+1q2cdp3B8Gx7aVrXORdOKjMNDQsD1ogOr896+0jJHW1EFQ==}
-
   hast-util-to-parse5@8.0.1:
     resolution: {integrity: sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==}
 
-  hast-util-to-string@3.0.1:
-    resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
-
   hast-util-to-text@4.0.2:
     resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==}
 
@@ -11813,8 +12538,8 @@ packages:
   immediate@3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
 
-  immer@11.1.4:
-    resolution: {integrity: sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==}
+  immer@10.2.0:
+    resolution: {integrity: sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==}
 
   immer@11.1.9:
     resolution: {integrity: sha512-sc/z0Cyti70bZa0ZU4sWfAElfovFb9Ni8tArJZLuklYWxegPiK3pDOql1Rq5H0FIRAW9LSQRG6OX4KqBldbhBA==}
@@ -11874,6 +12599,12 @@ packages:
   inline-style-parser@0.2.4:
     resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
 
+  input-otp@1.4.2:
+    resolution: {integrity: sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
   internmap@1.0.1:
     resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
 
@@ -12260,6 +12991,7 @@ packages:
 
   katex@0.16.47:
     resolution: {integrity: sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==}
+    hasBin: true
 
   keygrip@1.1.0:
     resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==}
@@ -12581,6 +13313,7 @@ packages:
   marked@16.4.2:
     resolution: {integrity: sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==}
     engines: {node: '>= 20'}
+    hasBin: true
 
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
@@ -12588,6 +13321,7 @@ packages:
 
   mcp-handler@1.1.0:
     resolution: {integrity: sha512-MVCES7g18gcoZy+R/3v5nadkUMzMAWdos8jRl6DyljOKvd2/ZKDmwlCjL6zp4vo+7FeCXOYL1uWinHWlkKAAUg==}
+    hasBin: true
     peerDependencies:
       '@modelcontextprotocol/sdk': 1.26.0
       next: '>=13.0.0'
@@ -12985,10 +13719,12 @@ packages:
   nanoid@5.1.16:
     resolution: {integrity: sha512-kVrnsrJqMR8+oLJnGEmSWw9BivK5mt7H3FZatVRjrc5wGqFYuBxX1yG7+A7Gi5AefkX6t/oCkizcQgpu0cY1dQ==}
     engines: {node: ^18 || >=20}
+    hasBin: true
 
-  nanoid@6.0.0:
-    resolution: {integrity: sha512-mkUH+rPkwU2qPadJ0oJZOjeZ5Mxn8Q1UhevwkTRWNuUZzyia3h4rhzK39hxaHTk0o2OxB8W2SQ6A8k23ZDi1pQ==}
+  nanoid@6.0.1:
+    resolution: {integrity: sha512-3wVS3i51pE2pi1k5FFL/95BGfVS0kSsvDVuGXHOtxox/TywUmtgq+3qiTOTbs9J7KfHaXPiN171k/A6dBnaXFw==}
     engines: {node: ^22 || ^24 || >=26}
+    hasBin: true
 
   nanostores@1.3.0:
     resolution: {integrity: sha512-XPUa/jz+P1oJvN9VBxw4L9MtdFfaH3DAryqPssqhb2kXjmb9npz0dly6rCsgFWOPr4Yg9mTfM3MDZgZZ+7A3lA==}
@@ -13047,9 +13783,16 @@ packages:
       typescript:
         optional: true
 
-  next@16.2.10:
-    resolution: {integrity: sha512-2som5AVXb3kE6Yjine3/mNbBayYF58eguBWIVVUdr1y/L426xyVEgYxgBG+1QC34P2x5E+tcDup6XkuOAX3dCA==}
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
+  next@16.3.0-preview.9:
+    resolution: {integrity: sha512-ruev+K1No0Cm/05hSrgKLtzaBdUIT+2I/Bj8x+K8/vk3j/dW+9YJOqGdDEkqNBOXtQlLxuEgeTH71jgsKTfWiQ==}
     engines: {node: '>=20.9.0'}
+    hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
       '@playwright/test': ^1.51.1
@@ -13311,6 +14054,7 @@ packages:
   oxfmt@0.58.0:
     resolution: {integrity: sha512-8feG/7NVEHDVwc1OUpP6Pks+TnaDFUw2jLLFIMi5bcmmwxAX2wBQvjSzj62RRTYBf2Op1Wt8xbkmagmPTR5ETg==}
     engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
     peerDependencies:
       svelte: ^5.0.0
       vite-plus: '*'
@@ -13323,6 +14067,7 @@ packages:
   oxlint@1.73.0:
     resolution: {integrity: sha512-u91G9TJzU6yqKWNZUYprQB07W7YvntZXaRxQ6CkoytepYhLWUXWsr1M8zUJ34VatNPuUAr3Z8GH+O2A331CluQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
     peerDependencies:
       oxlint-tsgolint: '>=0.24.0'
       vite-plus: '*'
@@ -13573,6 +14318,10 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+
   picomatch@4.0.5:
     resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
     engines: {node: '>=12'}
@@ -13620,6 +14369,9 @@ packages:
   po-parser@2.1.1:
     resolution: {integrity: sha512-ECF4zHLbUItpUgE3OTtLKlPjeBN+fKEczj2zYjDfCGOzicNs0GK3Vg2IoAYwx7LH/XYw43fZQP6xnZ4TkNxSLQ==}
 
+  pocketbase@0.26.9:
+    resolution: {integrity: sha512-Tiv1/hNuUzRdvT0d8hF03dfzuefQ1WdSRp1A1q3wzFC/WYhQcbU/Qlaubl/3ZDo6xvFXBS8JAgBS/L+ms7nkVQ==}
+
   points-on-curve@0.2.0:
     resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
 
@@ -14042,8 +14794,8 @@ packages:
     peerDependencies:
       postcss: ^8.4.31
 
-  postcss@8.4.31:
-    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+  postcss@8.5.10:
+    resolution: {integrity: sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==}
     engines: {node: ^10 || ^12 || >=14}
 
   postcss@8.5.15:
@@ -14306,6 +15058,16 @@ packages:
   rc@1.2.8:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
 
+  react-day-picker@10.0.1:
+    resolution: {integrity: sha512-eNh6BlwcYInWaJtRv18mXQ06Ys/H6rdTZAnTaSdOYJuTpwP1JMCHNd1FDRadA+gbeinq+psdULN5Xnowy9mV8w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/react': '>=16.8.0'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-dom@19.2.7:
     resolution: {integrity: sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==}
     peerDependencies:
@@ -14334,13 +15096,6 @@ packages:
     peerDependencies:
       react: ^18.0.0 || ^19.0.0
 
-  react-jsx-parser@2.4.1:
-    resolution: {integrity: sha512-gE25DiHseuKmSbb5O1K1IkyQ/bwth3zl4z3EdW8XMhwrb2agUpuh8GvqHFvGwh/wdZjDDuadGrSR2lEgjcOvqQ==}
-    engines: {bun: ^1.1.27}
-    peerDependencies:
-      react: '>=18'
-      react-dom: '>=18'
-
   react-loadable-ssr-addon-v5-slorber@1.0.3:
     resolution: {integrity: sha512-GXfh9VLwB5ERaCsU6RULh7tkemeX15aNh6wuMEBtfdyMa7fFG8TXrhXlx1SoEK2Ty/l6XIkzzYIQmyaWW3JgdQ==}
     engines: {node: '>=10.13.0'}
@@ -14399,6 +15154,12 @@ packages:
       '@types/react':
         optional: true
 
+  react-resizable-panels@4.12.2:
+    resolution: {integrity: sha512-NwY5LCo4WrxVvDh0xoMML6EMLPONP/8ckKcIdpnojxexoatZdjLiRqLJQjQK5CPkd4SYiB/2M5BVrjZBQtOO7Q==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+
   react-router-config@5.1.1:
     resolution: {integrity: sha512-DuanZjaD8mQp1ppHjgnnUnyOlqYXZVjnov/JzFhjLEwd3Z4dYjMSnqrEzzGThH47vpCOqPPwJM2FtthLeJ8Pbg==}
     peerDependencies:
@@ -14495,6 +15256,14 @@ packages:
     resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==}
     engines: {node: '>= 12.13.0'}
 
+  recharts@3.8.0:
+    resolution: {integrity: sha512-Z/m38DX3L73ExO4Tpc9/iZWHmHnlzWG4njQbxsF5aSjwqmHNDDIm0rdEBArkwsBvR8U6EirlEHiQNYWCVh9sGQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-is: ^19.2.7
+
   recharts@3.9.1:
     resolution: {integrity: sha512-WMcwlXcB7l+BbxiEdyClkG+1sxrMHNZpzT577LEvU4+rXPd8oTAy1wXk72hnk2KOOmxuLvw3z5DtXT7HEAydtg==}
     engines: {node: '>=18'}
@@ -14570,9 +15339,6 @@ packages:
   rehype-format@5.0.1:
     resolution: {integrity: sha512-zvmVru9uB0josBVpr946OR8ui7nJEdzZobwLOOqHb/OOD88W0Vk2SqLwoVOj0fM6IPCCO6TaV9CvQvJMWwukFQ==}
 
-  rehype-minify-whitespace@6.0.2:
-    resolution: {integrity: sha512-Zk0pyQ06A3Lyxhe9vGtOtzz3Z0+qZ5+7icZ/PL/2x1SHPbKao5oB/g/rlc6BCTajqBb33JcOe71Ye1oFsuYbnw==}
-
   rehype-parse@9.0.1:
     resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
 
@@ -14582,9 +15348,6 @@ packages:
   rehype-recma@1.0.0:
     resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
 
-  rehype-remark@10.0.1:
-    resolution: {integrity: sha512-EmDndlb5NVwXGfUa4c9GPK+lXeItTilLhE6ADSaQuHr4JUlKw9MidzGzx4HpqZrNCt6vnHmEifXQiiA+CEnjYQ==}
-
   rehype-sanitize@6.0.0:
     resolution: {integrity: sha512-CsnhKNsyI8Tub6L4sm5ZFsme4puGfc6pYylvXo1AeqaGbjOYyzNv3qZPwvs0oMJ39eryyeOdmxwUIo94IpEhqg==}
 
@@ -14827,11 +15590,17 @@ packages:
 
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
 
   semver@7.7.4:
     resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
     engines: {node: '>=10'}
 
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   send@0.19.2:
     resolution: {integrity: sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==}
     engines: {node: '>= 0.8.0'}
@@ -14843,6 +15612,16 @@ packages:
   serialize-javascript@6.0.2:
     resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
 
+  seroval-plugins@1.5.6:
+    resolution: {integrity: sha512-HXuLAX2pu/UByPpaeo/TaMfvMIi+1QqIoPJYCcAtU8QkVNwgR6MPlGuCQTErV1JwraaMbYaWVIBX7mppzGLATQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      seroval: ^1.0
+
+  seroval@1.5.6:
+    resolution: {integrity: sha512-rVQVWjjSvlINzaQPZH5JFqsqEsIWdTxY3iJZCnTL/5gQbXIRooVZKI60tVCkOVfzcRPejboxO2t0P89dg5mQaA==}
+    engines: {node: '>=10'}
+
   serve-handler@6.1.7:
     resolution: {integrity: sha512-CinAq1xWb0vR3twAv9evEU8cNWkXCb9kd5ePAHUKJBkOsUpR1wt/CvGdeca7vqumL1U5cSaeVQ6zZMxiJ3yWsg==}
 
@@ -14881,9 +15660,14 @@ packages:
   shallowequal@1.1.0:
     resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
 
-  sharp@0.34.5:
-    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  sharp@0.35.3:
+    resolution: {integrity: sha512-ej0zVHuZGHCiABXcNxeYhpRnPNPAcvbG8RMdBAhDAxLKkCRVSpK3Iyu7qbqw3JMzoj0REeM6f3tJLtVwl0023Q==}
+    engines: {node: '>=20.9.0'}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
 
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
@@ -14978,9 +15762,18 @@ packages:
     resolution: {integrity: sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==}
     engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
 
+  solid-js@1.9.14:
+    resolution: {integrity: sha512-sAEXC0Kk0S1EDg+8ysEWJDbYhA3RRoEjwuySUGlKIemeo0I5YZfOyumNjNs9Sv3y2nmhD+0rW66ag2HsMuQiGQ==}
+
   sonic-boom@4.2.1:
     resolution: {integrity: sha512-w6AxtubXa2wTXAUsZMMWERrsIRAdrK0Sc+FUytWvYAhBJLyuI4llrMIC1DtlNSdI99EI86KZum2MMq3EAZlF9Q==}
 
+  sonner@2.0.7:
+    resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   sort-css-media-queries@2.2.0:
     resolution: {integrity: sha512-0xtkGhWCC9MGt/EzgnvbbbKhqWjl1+/rncmhTh5qCpbYguXh6S/qwePfv/JQ8jePXXmqingylxoC49pCkSPIbA==}
     engines: {node: '>= 6.3.0'}
@@ -15266,8 +16059,8 @@ packages:
     resolution: {integrity: sha512-SMSKS0sj+lPIFzngfIKb5cyBtzmAuJw7rXgXdyYiDReb+pSpJXuNljHYgT4DXa5Stnl2Ew2/Lam5ipv4PIqZ7A==}
     engines: {node: '>= 4.7.0'}
 
-  swr@2.4.2:
-    resolution: {integrity: sha512-ej644Y2bvkIajfR32KGeSSdBXQW+ScjGjkybZgSE7kFpk9eGnV44XY9FJylXi+W75pavSX1PVNB57W5EbhGIYw==}
+  swr@2.5.0:
+    resolution: {integrity: sha512-W0GomadRJe9OfzIoRX0kZHhDSaRRfdiOUeH6uazgR05SibBhDNwfdTbhAxmFtObvkf59fFymo22mooKukosvNA==}
     peerDependencies:
       react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
@@ -15289,6 +16082,9 @@ packages:
   tailwind-merge@3.5.0:
     resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
 
+  tailwind-merge@3.6.0:
+    resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
+
   tailwindcss@4.3.2:
     resolution: {integrity: sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA==}
 
@@ -15502,9 +16298,6 @@ packages:
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
-  trim-trailing-lines@2.1.0:
-    resolution: {integrity: sha512-5UR5Biq4VlVOtzqkm2AZlgvSlDJtME46uV0br0gENbwN4l5+mMKT4b9gJKqWtuL2zAIqajGJGuvbCbcAJUZqBg==}
-
   triple-beam@1.4.1:
     resolution: {integrity: sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg==}
     engines: {node: '>= 14.0.0'}
@@ -15539,6 +16332,7 @@ packages:
     resolution: {integrity: sha512-ulNZP1SVpRDesxeMLON/LtWM8HIgAJEIVpVVhBM6gsmvQ8+Rh+ZG7FWGvHh7Ah3pRABwVJWklWCr/BTZSv0xnQ==}
     engines: {node: ^18 || >=20}
     deprecated: unmaintained
+    hasBin: true
     peerDependencies:
       typescript: ^5.0.0
     peerDependenciesMeta:
@@ -15615,9 +16409,9 @@ packages:
   typedarray-to-buffer@3.1.5:
     resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
 
-  typescript@6.0.3:
-    resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
-    engines: {node: '>=14.17'}
+  typescript@7.0.2:
+    resolution: {integrity: sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA==}
+    engines: {node: '>=16.20.0'}
     hasBin: true
 
   ufo@1.6.4:
@@ -15721,9 +16515,6 @@ packages:
   unist-util-visit@2.0.3:
     resolution: {integrity: sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==}
 
-  unist-util-visit@5.0.0:
-    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
-
   unist-util-visit@5.1.0:
     resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
 
@@ -15746,6 +16537,7 @@ packages:
 
   update-browserslist-db@1.2.3:
     resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
 
@@ -15860,10 +16652,12 @@ packages:
 
   uuid@14.0.0:
     resolution: {integrity: sha512-Qo+uWgilfSmAhXCMav1uYFynlQO7fMFiMVZsQqZRMIXp0O7rR7qjkj+cPvBHLgBqi960QCoo/PH2/6ZtVqKvrg==}
+    hasBin: true
 
   uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
+    hasBin: true
 
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
@@ -15914,6 +16708,7 @@ packages:
   vite@8.1.4:
     resolution: {integrity: sha512-bTT9PsdWO+MQMNG9ZXIP/qM9wGh37DFxTV/sPq9cFpHr3w4jkgef032PkAL9jAqhk3Nz8NQw3O8n6/xFkqO4QQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
     peerDependencies:
       '@types/node': ^20.19.0 || >=22.12.0
       '@vitejs/devtools': ^0.3.0
@@ -15956,6 +16751,7 @@ packages:
   vitest@4.1.10:
     resolution: {integrity: sha512-R9jUTe5S4Qb0HCd4TNqpC7oGcrMssMRGXLW80ubjWsW9VH5GF8y1Y0SFLY9AbqSk6nt0PnOx4H4WNJYZ13GUPw==}
     engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@opentelemetry/api': ^1.9.0
@@ -15999,6 +16795,7 @@ packages:
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
+    hasBin: true
     peerDependencies:
       '@vue/composition-api': ^1.0.0-rc.1
       vue: ^3.0.0-0 || ^2.6.0
@@ -16060,6 +16857,7 @@ packages:
   webpack-dev-server@5.2.4:
     resolution: {integrity: sha512-GqDPGZN9bRqKBTkp4aWkobDDHMsrXKoGSdOH56smIri8qR0JG8gfL8/v/f/OZR3/OKXjG8uwJbFVhKm/FNU/UA==}
     engines: {node: '>= 18.12.0'}
+    hasBin: true
     peerDependencies:
       webpack: ^5.0.0
       webpack-cli: '*'
@@ -16084,6 +16882,7 @@ packages:
   webpack@5.107.1:
     resolution: {integrity: sha512-mvdIWxj/H6QsfgDdH9djne3a5dYcmEmtsXGESkypaGN5jXjF/b+9KDlmTDQ2TKlFUeA2fI9Y65kihD30JOdB+Q==}
     engines: {node: '>=10.13.0'}
+    hasBin: true
     peerDependencies:
       webpack-cli: '*'
     peerDependenciesMeta:
@@ -16289,8 +17088,8 @@ packages:
     resolution: {integrity: sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=23}
 
-  yjs@13.6.31:
-    resolution: {integrity: sha512-Eq+5BRfbeGyqGVrTJL3bEcr8gKkxPuyuoHmAwpk52fDb8kOVMrfVSTRPd6yiGgX5Fskb96qCRjzjbRjrL4YEnw==}
+  yjs@13.6.32:
+    resolution: {integrity: sha512-lfiJIIC4Xayt5ItynE407ehlE03pCjeOc4hkR4yxxvvNJ4kuiN25B0g+Qp8XagYz361LLL7DCzR5bvFJ81QKtQ==}
     engines: {node: '>=16.0.0', npm: '>=8.0.0'}
 
   yocto-queue@1.2.2:
@@ -16305,8 +17104,8 @@ packages:
     resolution: {integrity: sha512-GQHQqAopRhwU8Kt1DDM8NjibDXHC8eoh1erhGAJPEyveY9qqVeXvVikNKrDz69sHowPMorbPUrH/mx8c50eiBQ==}
     engines: {node: '>=18'}
 
-  yoctocolors@2.1.2:
-    resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
+  yoctocolors@2.2.0:
+    resolution: {integrity: sha512-xYqdZFUK/VYazNl/oCDYN+3WloWQwMfZxBoiNt6qNyk+xfOdi598muWE42rNZFp1kNOiqW936q5RhUdnpqElSg==}
     engines: {node: '>=18'}
 
   zip-stream@6.0.1:
@@ -16384,17 +17183,17 @@ snapshots:
       '@vercel/oidc': 3.1.0
       zod: 4.4.3
 
-  '@ai-sdk/gateway@4.0.28(zod@4.4.3)':
+  '@ai-sdk/gateway@4.0.41(zod@4.4.3)':
     dependencies:
-      '@ai-sdk/provider': 4.0.3
-      '@ai-sdk/provider-utils': 5.0.12(zod@4.4.3)
+      '@ai-sdk/provider': 4.0.5
+      '@ai-sdk/provider-utils': 5.0.21(zod@4.4.3)
       '@vercel/oidc': 3.2.0
       zod: 4.4.3
 
-  '@ai-sdk/mcp@2.0.16(zod@4.4.3)':
+  '@ai-sdk/mcp@2.0.25(zod@4.4.3)':
     dependencies:
-      '@ai-sdk/provider': 4.0.3
-      '@ai-sdk/provider-utils': 5.0.12(zod@4.4.3)
+      '@ai-sdk/provider': 4.0.5
+      '@ai-sdk/provider-utils': 5.0.21(zod@4.4.3)
       pkce-challenge: 5.0.1
       zod: 4.4.3
 
@@ -16419,6 +17218,15 @@ snapshots:
       eventsource-parser: 3.1.0
       zod: 4.4.3
 
+  '@ai-sdk/provider-utils@5.0.21(zod@4.4.3)':
+    dependencies:
+      '@ai-sdk/provider': 4.0.5
+      '@standard-schema/spec': 1.1.0
+      '@workflow/serde': 4.1.0
+      eventsource-parser: 3.1.0
+      undici: 7.28.0
+      zod: 4.4.3
+
   '@ai-sdk/provider@3.0.2':
     dependencies:
       json-schema: 0.4.0
@@ -16427,24 +17235,28 @@ snapshots:
     dependencies:
       json-schema: 0.4.0
 
-  '@ai-sdk/react@4.0.40(react@19.2.7)(zod@4.4.3)':
+  '@ai-sdk/provider@4.0.5':
     dependencies:
-      '@ai-sdk/mcp': 2.0.16(zod@4.4.3)
-      '@ai-sdk/provider': 4.0.3
-      '@ai-sdk/provider-utils': 5.0.12(zod@4.4.3)
-      ai: 7.0.37(zod@4.4.3)
+      json-schema: 0.4.0
+
+  '@ai-sdk/react@4.0.55(react@19.2.7)(zod@4.4.3)':
+    dependencies:
+      '@ai-sdk/mcp': 2.0.25(zod@4.4.3)
+      '@ai-sdk/provider': 4.0.5
+      '@ai-sdk/provider-utils': 5.0.21(zod@4.4.3)
+      ai: 7.0.52(zod@4.4.3)
       react: 19.2.7
-      swr: 2.4.2(react@19.2.7)
+      swr: 2.5.0(react@19.2.7)
       throttleit: 2.1.0
     transitivePeerDependencies:
       - zod
 
-  '@ai-sdk/vue@3.0.33(vue@3.5.35(@typescript/typescript6@6.0.2))(zod@4.4.3)':
+  '@ai-sdk/vue@3.0.33(vue@3.5.35(typescript@7.0.2))(zod@4.4.3)':
     dependencies:
       '@ai-sdk/provider-utils': 4.0.5(zod@4.4.3)
       ai: 6.0.33(zod@4.4.3)
-      swrv: 1.2.0(vue@3.5.35(@typescript/typescript6@6.0.2))
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      swrv: 1.2.0(vue@3.5.35(typescript@7.0.2))
+      vue: 3.5.35(typescript@7.0.2)
     transitivePeerDependencies:
       - zod
 
@@ -16617,8 +17429,8 @@ snapshots:
     dependencies:
       '@assistant-ui/store': 0.2.20(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react@19.2.7)
       '@assistant-ui/tap': 0.9.4(@types/react@19.2.17)(react@19.2.7)
-      assistant-stream: 0.3.26(ioredis@5.11.1(supports-color@10.2.2))
-      nanoid: 6.0.0
+      assistant-stream: 0.3.33(ioredis@5.11.1(supports-color@10.2.2))
+      nanoid: 6.0.1
     optionalDependencies:
       '@types/react': 19.2.17
       assistant-cloud: 0.1.35(ioredis@5.11.1(supports-color@10.2.2))
@@ -16630,13 +17442,13 @@ snapshots:
 
   '@assistant-ui/react-ai-sdk@1.3.41(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(ioredis@5.11.1(supports-color@10.2.2))(react@19.2.7)(zod@4.4.3)(zustand@5.0.14(@types/react@19.2.17)(immer@11.1.9)(react@19.2.7)(use-sync-external-store@1.6.0(react@19.2.7)))':
     dependencies:
-      '@ai-sdk/mcp': 2.0.16(zod@4.4.3)
-      '@ai-sdk/react': 4.0.40(react@19.2.7)(zod@4.4.3)
+      '@ai-sdk/mcp': 2.0.25(zod@4.4.3)
+      '@ai-sdk/react': 4.0.55(react@19.2.7)(zod@4.4.3)
       '@assistant-ui/core': 0.2.21(@assistant-ui/store@0.2.20(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react@19.2.7))(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(assistant-cloud@0.1.35(ioredis@5.11.1(supports-color@10.2.2)))(ioredis@5.11.1(supports-color@10.2.2))(react@19.2.7)(zustand@5.0.14(@types/react@19.2.17)(immer@11.1.9)(react@19.2.7)(use-sync-external-store@1.6.0(react@19.2.7)))
       '@assistant-ui/store': 0.2.20(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react@19.2.7)
-      ai: 7.0.37(zod@4.4.3)
+      ai: 7.0.52(zod@4.4.3)
       assistant-cloud: 0.1.35(ioredis@5.11.1(supports-color@10.2.2))
-      assistant-stream: 0.3.26(ioredis@5.11.1(supports-color@10.2.2))
+      assistant-stream: 0.3.33(ioredis@5.11.1(supports-color@10.2.2))
       react: 19.2.7
     optionalDependencies:
       '@types/react': 19.2.17
@@ -16647,12 +17459,12 @@ snapshots:
       - zod
       - zustand
 
-  '@assistant-ui/react-lexical@0.2.0(@assistant-ui/core@0.2.21(@assistant-ui/store@0.2.20(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react@19.2.7))(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(assistant-cloud@0.1.35(ioredis@5.11.1(supports-color@10.2.2)))(ioredis@5.11.1(supports-color@10.2.2))(react@19.2.7)(zustand@5.0.14(@types/react@19.2.17)(immer@11.1.9)(react@19.2.7)(use-sync-external-store@1.6.0(react@19.2.7))))(@assistant-ui/react@0.14.27(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(immer@11.1.9)(ioredis@5.11.1(supports-color@10.2.2))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(use-sync-external-store@1.6.0(react@19.2.7)))(@assistant-ui/store@0.2.20(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(yjs@13.6.31)':
+  '@assistant-ui/react-lexical@0.2.0(@assistant-ui/core@0.2.21(@assistant-ui/store@0.2.20(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react@19.2.7))(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(assistant-cloud@0.1.35(ioredis@5.11.1(supports-color@10.2.2)))(ioredis@5.11.1(supports-color@10.2.2))(react@19.2.7)(zustand@5.0.14(@types/react@19.2.17)(immer@11.1.9)(react@19.2.7)(use-sync-external-store@1.6.0(react@19.2.7))))(@assistant-ui/react@0.14.27(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(immer@11.1.9)(ioredis@5.11.1(supports-color@10.2.2))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(use-sync-external-store@1.6.0(react@19.2.7)))(@assistant-ui/store@0.2.20(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(yjs@13.6.32)':
     dependencies:
       '@assistant-ui/core': 0.2.21(@assistant-ui/store@0.2.20(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react@19.2.7))(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(assistant-cloud@0.1.35(ioredis@5.11.1(supports-color@10.2.2)))(ioredis@5.11.1(supports-color@10.2.2))(react@19.2.7)(zustand@5.0.14(@types/react@19.2.17)(immer@11.1.9)(react@19.2.7)(use-sync-external-store@1.6.0(react@19.2.7)))
       '@assistant-ui/react': 0.14.27(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(immer@11.1.9)(ioredis@5.11.1(supports-color@10.2.2))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(use-sync-external-store@1.6.0(react@19.2.7))
       '@assistant-ui/store': 0.2.20(@assistant-ui/tap@0.9.4(@types/react@19.2.17)(react@19.2.7))(@types/react@19.2.17)(react@19.2.7)
-      '@lexical/react': 0.44.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(yjs@13.6.31)
+      '@lexical/react': 0.44.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(yjs@13.6.32)
       '@lexical/utils': 0.44.0
       lexical: 0.44.0
       react: 19.2.7
@@ -16691,8 +17503,8 @@ snapshots:
       '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.17)(react@19.2.7)
       '@radix-ui/react-use-escape-keydown': 1.1.5(@types/react@19.2.17)(react@19.2.7)
       assistant-cloud: 0.1.35(ioredis@5.11.1(supports-color@10.2.2))
-      assistant-stream: 0.3.26(ioredis@5.11.1(supports-color@10.2.2))
-      nanoid: 6.0.0
+      assistant-stream: 0.3.33(ioredis@5.11.1(supports-color@10.2.2))
+      nanoid: 6.0.1
       radix-ui: 1.6.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
@@ -17535,6 +18347,31 @@ snapshots:
 
   '@balena/dockerignore@1.0.2': {}
 
+  '@base-ui/react@1.6.0(@date-fns/tz@1.5.0)(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@base-ui/utils': 0.3.1(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@floating-ui/utils': 0.2.11
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      use-sync-external-store: 1.6.0(react@19.2.7)
+    optionalDependencies:
+      '@date-fns/tz': 1.5.0
+      '@types/react': 19.2.17
+      date-fns: 4.4.0
+
+  '@base-ui/utils@0.3.1(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@floating-ui/utils': 0.2.11
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      reselect: 5.2.0
+      use-sync-external-store: 1.6.0(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   '@bcoe/v8-coverage@1.0.2': {}
 
   '@better-auth/core@1.6.15(@better-auth/utils@0.4.1)(@better-fetch/fetch@1.1.21)(@opentelemetry/api@1.9.0)(better-call@1.3.5(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.3.0)':
@@ -17683,10 +18520,23 @@ snapshots:
       '@codemirror/view': 6.43.0
       crelt: 1.0.6
 
+  '@codemirror/search@6.7.1':
+    dependencies:
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.43.0
+      crelt: 1.0.6
+
   '@codemirror/state@6.6.0':
     dependencies:
       '@marijn/find-cluster-break': 1.0.2
 
+  '@codemirror/theme-one-dark@6.1.3':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.43.0
+      '@lezer/highlight': 1.2.3
+
   '@codemirror/view@6.43.0':
     dependencies:
       '@codemirror/state': 6.6.0
@@ -18083,13 +18933,27 @@ snapshots:
       enabled: 2.0.0
       kuler: 2.0.0
 
+  '@date-fns/tz@1.5.0': {}
+
   '@discoveryjs/json-ext@0.5.7': {}
 
+  '@dnd-kit/abstract@0.5.0':
+    dependencies:
+      '@dnd-kit/geometry': 0.5.0
+      '@dnd-kit/state': 0.5.0
+      tslib: 2.8.1
+
   '@dnd-kit/accessibility@3.1.1(react@19.2.7)':
     dependencies:
       react: 19.2.7
       tslib: 2.8.1
 
+  '@dnd-kit/collision@0.5.0':
+    dependencies:
+      '@dnd-kit/abstract': 0.5.0
+      '@dnd-kit/geometry': 0.5.0
+      tslib: 2.8.1
+
   '@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@dnd-kit/accessibility': 3.1.1(react@19.2.7)
@@ -18098,6 +18962,19 @@ snapshots:
       react-dom: 19.2.7(react@19.2.7)
       tslib: 2.8.1
 
+  '@dnd-kit/dom@0.5.0':
+    dependencies:
+      '@dnd-kit/abstract': 0.5.0
+      '@dnd-kit/collision': 0.5.0
+      '@dnd-kit/geometry': 0.5.0
+      '@dnd-kit/state': 0.5.0
+      tslib: 2.8.1
+
+  '@dnd-kit/geometry@0.5.0':
+    dependencies:
+      '@dnd-kit/state': 0.5.0
+      tslib: 2.8.1
+
   '@dnd-kit/modifiers@9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@dnd-kit/core': 6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -18105,6 +18982,15 @@ snapshots:
       react: 19.2.7
       tslib: 2.8.1
 
+  '@dnd-kit/react@0.5.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@dnd-kit/abstract': 0.5.0
+      '@dnd-kit/dom': 0.5.0
+      '@dnd-kit/state': 0.5.0
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      tslib: 2.8.1
+
   '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@dnd-kit/core': 6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -18112,6 +18998,11 @@ snapshots:
       react: 19.2.7
       tslib: 2.8.1
 
+  '@dnd-kit/state@0.5.0':
+    dependencies:
+      '@preact/signals-core': 1.14.4
+      tslib: 2.8.1
+
   '@dnd-kit/utilities@3.2.2(react@19.2.7)':
     dependencies:
       react: 19.2.7
@@ -18173,7 +19064,7 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/bundler@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(csso@5.0.5)(esbuild@0.28.1)(lightningcss@1.32.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)':
+  '@docusaurus/bundler@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(csso@5.0.5)(esbuild@0.28.1)(lightningcss@1.32.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)':
     dependencies:
       '@babel/core': 7.29.0(supports-color@10.2.2)
       '@docusaurus/babel': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
@@ -18192,7 +19083,7 @@ snapshots:
       mini-css-extract-plugin: 2.10.2(webpack@5.107.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(uglify-js@3.19.3))
       null-loader: 4.0.1(webpack@5.107.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(uglify-js@3.19.3))
       postcss: 8.5.16
-      postcss-loader: 7.3.4(@typescript/typescript6@6.0.2)(postcss@8.5.16)(webpack@5.107.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(uglify-js@3.19.3))
+      postcss-loader: 7.3.4(postcss@8.5.16)(typescript@7.0.2)(webpack@5.107.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(uglify-js@3.19.3))
       postcss-preset-env: 10.6.1(postcss@8.5.16)
       terser-webpack-plugin: 5.6.0(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(uglify-js@3.19.3)(webpack@5.107.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(uglify-js@3.19.3))
       tslib: 2.8.1
@@ -18218,10 +19109,10 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/core@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)':
+  '@docusaurus/core@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)':
     dependencies:
       '@docusaurus/babel': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/bundler': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(csso@5.0.5)(esbuild@0.28.1)(lightningcss@1.32.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/bundler': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(csso@5.0.5)(esbuild@0.28.1)(lightningcss@1.32.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/logger': 3.10.1
       '@docusaurus/mdx-loader': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
@@ -18397,13 +19288,13 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/plugin-content-blog@3.10.1(59bf1c207f3351d61f3d6e4d32f816cb)':
+  '@docusaurus/plugin-content-blog@3.10.1(61e2dfd21fb4d409e7bca036dfc2b268)':
     dependencies:
-      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/logger': 3.10.1
       '@docusaurus/mdx-loader': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/plugin-content-docs': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/theme-common': 3.10.1(411712c28a3adb38d3c382c02b26255d)
+      '@docusaurus/plugin-content-docs': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
+      '@docusaurus/theme-common': 3.10.1(76621e8bff6c45bac3fc2219e99bbda8)
       '@docusaurus/types': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils-common': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
@@ -18445,13 +19336,13 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-content-docs@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)':
+  '@docusaurus/plugin-content-docs@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)':
     dependencies:
-      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/logger': 3.10.1
       '@docusaurus/mdx-loader': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/module-type-aliases': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/theme-common': 3.10.1(411712c28a3adb38d3c382c02b26255d)
+      '@docusaurus/theme-common': 3.10.1(76621e8bff6c45bac3fc2219e99bbda8)
       '@docusaurus/types': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils-common': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
@@ -18491,9 +19382,9 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-content-pages@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)':
+  '@docusaurus/plugin-content-pages@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)':
     dependencies:
-      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/mdx-loader': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/types': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
@@ -18527,9 +19418,9 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-css-cascade-layers@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)':
+  '@docusaurus/plugin-css-cascade-layers@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)':
     dependencies:
-      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/types': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils-validation': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
@@ -18560,9 +19451,9 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-debug@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)':
+  '@docusaurus/plugin-debug@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)':
     dependencies:
-      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/types': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       fs-extra: 11.2.0
@@ -18594,9 +19485,9 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-google-analytics@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)':
+  '@docusaurus/plugin-google-analytics@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)':
     dependencies:
-      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/types': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils-validation': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       react: 19.2.7
@@ -18626,9 +19517,9 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-google-gtag@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)':
+  '@docusaurus/plugin-google-gtag@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)':
     dependencies:
-      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/types': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils-validation': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@types/gtag.js': 0.0.20
@@ -18659,9 +19550,9 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-google-tag-manager@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)':
+  '@docusaurus/plugin-google-tag-manager@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)':
     dependencies:
-      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/types': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils-validation': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       react: 19.2.7
@@ -18691,9 +19582,9 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-sitemap@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)':
+  '@docusaurus/plugin-sitemap@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)':
     dependencies:
-      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/logger': 3.10.1
       '@docusaurus/types': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
@@ -18728,14 +19619,14 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/plugin-svgr@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)':
+  '@docusaurus/plugin-svgr@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)':
     dependencies:
-      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/types': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils-validation': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@svgr/core': 8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
-      '@svgr/webpack': 8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
+      '@svgr/core': 8.1.0(supports-color@10.2.2)(typescript@7.0.2)
+      '@svgr/webpack': 8.1.0(supports-color@10.2.2)(typescript@7.0.2)
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
       tslib: 2.8.1
@@ -18764,22 +19655,22 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/preset-classic@3.10.1(@algolia/client-search@5.53.0)(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(search-insights@2.17.3)(supports-color@10.2.2)(uglify-js@3.19.3)':
+  '@docusaurus/preset-classic@3.10.1(@algolia/client-search@5.53.0)(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(search-insights@2.17.3)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)':
     dependencies:
-      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/plugin-content-blog': 3.10.1(59bf1c207f3351d61f3d6e4d32f816cb)
-      '@docusaurus/plugin-content-docs': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/plugin-content-pages': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/plugin-css-cascade-layers': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/plugin-debug': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/plugin-google-analytics': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/plugin-google-gtag': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/plugin-google-tag-manager': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/plugin-sitemap': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/plugin-svgr': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/theme-classic': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/theme-common': 3.10.1(411712c28a3adb38d3c382c02b26255d)
-      '@docusaurus/theme-search-algolia': 3.10.1(@algolia/client-search@5.53.0)(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(search-insights@2.17.3)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
+      '@docusaurus/plugin-content-blog': 3.10.1(61e2dfd21fb4d409e7bca036dfc2b268)
+      '@docusaurus/plugin-content-docs': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
+      '@docusaurus/plugin-content-pages': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
+      '@docusaurus/plugin-css-cascade-layers': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
+      '@docusaurus/plugin-debug': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
+      '@docusaurus/plugin-google-analytics': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
+      '@docusaurus/plugin-google-gtag': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
+      '@docusaurus/plugin-google-tag-manager': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
+      '@docusaurus/plugin-sitemap': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
+      '@docusaurus/plugin-svgr': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
+      '@docusaurus/theme-classic': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
+      '@docusaurus/theme-common': 3.10.1(76621e8bff6c45bac3fc2219e99bbda8)
+      '@docusaurus/theme-search-algolia': 3.10.1(@algolia/client-search@5.53.0)(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(search-insights@2.17.3)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/types': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
@@ -18815,16 +19706,16 @@ snapshots:
       '@types/react': 19.2.17
       react: 19.2.7
 
-  '@docusaurus/theme-classic@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)':
+  '@docusaurus/theme-classic@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)':
     dependencies:
-      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/logger': 3.10.1
       '@docusaurus/mdx-loader': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/module-type-aliases': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/plugin-content-blog': 3.10.1(59bf1c207f3351d61f3d6e4d32f816cb)
-      '@docusaurus/plugin-content-docs': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/plugin-content-pages': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/theme-common': 3.10.1(411712c28a3adb38d3c382c02b26255d)
+      '@docusaurus/plugin-content-blog': 3.10.1(61e2dfd21fb4d409e7bca036dfc2b268)
+      '@docusaurus/plugin-content-docs': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
+      '@docusaurus/plugin-content-pages': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
+      '@docusaurus/theme-common': 3.10.1(76621e8bff6c45bac3fc2219e99bbda8)
       '@docusaurus/theme-translations': 3.10.1
       '@docusaurus/types': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
@@ -18868,11 +19759,11 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/theme-common@3.10.1(411712c28a3adb38d3c382c02b26255d)':
+  '@docusaurus/theme-common@3.10.1(76621e8bff6c45bac3fc2219e99bbda8)':
     dependencies:
       '@docusaurus/mdx-loader': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/module-type-aliases': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/plugin-content-docs': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/plugin-content-docs': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/utils': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils-common': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@types/history': 4.7.11
@@ -18901,11 +19792,11 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/theme-mermaid@3.10.1(59bf1c207f3351d61f3d6e4d32f816cb)':
+  '@docusaurus/theme-mermaid@3.10.1(61e2dfd21fb4d409e7bca036dfc2b268)':
     dependencies:
-      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/module-type-aliases': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/theme-common': 3.10.1(411712c28a3adb38d3c382c02b26255d)
+      '@docusaurus/theme-common': 3.10.1(76621e8bff6c45bac3fc2219e99bbda8)
       '@docusaurus/types': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils-validation': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       mermaid: 11.15.0
@@ -18937,14 +19828,14 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@docusaurus/theme-search-algolia@3.10.1(@algolia/client-search@5.53.0)(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(search-insights@2.17.3)(supports-color@10.2.2)(uglify-js@3.19.3)':
+  '@docusaurus/theme-search-algolia@3.10.1(@algolia/client-search@5.53.0)(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(search-insights@2.17.3)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)':
     dependencies:
       '@algolia/autocomplete-core': 1.19.8(@algolia/client-search@5.53.0)(algoliasearch@5.53.0)(search-insights@2.17.3)
       '@docsearch/react': 4.6.3(@algolia/client-search@5.53.0)(@types/react@19.2.17)(algoliasearch@5.53.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(search-insights@2.17.3)
-      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       '@docusaurus/logger': 3.10.1
-      '@docusaurus/plugin-content-docs': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      '@docusaurus/theme-common': 3.10.1(411712c28a3adb38d3c382c02b26255d)
+      '@docusaurus/plugin-content-docs': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
+      '@docusaurus/theme-common': 3.10.1(76621e8bff6c45bac3fc2219e99bbda8)
       '@docusaurus/theme-translations': 3.10.1
       '@docusaurus/utils': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
       '@docusaurus/utils-validation': 3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
@@ -19524,20 +20415,20 @@ snapshots:
 
   '@floating-ui/utils@0.2.11': {}
 
-  '@floating-ui/vue@1.1.11(vue@3.5.35(@typescript/typescript6@6.0.2))':
+  '@floating-ui/vue@1.1.11(vue@3.5.35(typescript@7.0.2))':
     dependencies:
       '@floating-ui/dom': 1.7.6
       '@floating-ui/utils': 0.2.11
-      vue-demi: 0.14.10(vue@3.5.35(@typescript/typescript6@6.0.2))
+      vue-demi: 0.14.10(vue@3.5.35(typescript@7.0.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@floating-ui/vue@1.1.9(vue@3.5.35(@typescript/typescript6@6.0.2))':
+  '@floating-ui/vue@1.1.9(vue@3.5.35(typescript@7.0.2))':
     dependencies:
       '@floating-ui/dom': 1.7.6
       '@floating-ui/utils': 0.2.11
-      vue-demi: 0.14.10(vue@3.5.35(@typescript/typescript6@6.0.2))
+      vue-demi: 0.14.10(vue@3.5.35(typescript@7.0.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -19574,7 +20465,7 @@ snapshots:
       '@formatjs/fast-memoize': 3.1.0
       tslib: 2.8.1
 
-  '@gfazioli/mantine-onboarding-tour@4.0.6(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@gfazioli/mantine-onboarding-tour@4.0.8(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@mantine/core': 9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@mantine/hooks': 9.4.1(react@19.2.7)
@@ -19606,12 +20497,10 @@ snapshots:
     dependencies:
       tailwindcss: 4.3.2
 
-  '@headlessui/vue@1.7.23(vue@3.5.35(@typescript/typescript6@6.0.2))':
+  '@headlessui/vue@1.7.23(vue@3.5.35(typescript@7.0.2))':
     dependencies:
-      '@tanstack/vue-virtual': 3.13.28(vue@3.5.35(@typescript/typescript6@6.0.2))
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
-
-  '@homarr/gridstack@1.12.0': {}
+      '@tanstack/vue-virtual': 3.13.28(vue@3.5.35(typescript@7.0.2))
+      vue: 3.5.35(typescript@7.0.2)
 
   '@homarr/node-unifi@2.6.0(debug@4.4.3(supports-color@10.2.2))(undici@7.28.0)':
     dependencies:
@@ -19638,101 +20527,111 @@ snapshots:
       '@iconify/types': 2.0.0
       import-meta-resolve: 4.2.0
 
-  '@img/colour@1.0.0':
+  '@img/colour@1.1.0':
     optional: true
 
-  '@img/sharp-darwin-arm64@0.34.5':
+  '@img/sharp-darwin-arm64@0.35.3':
     optionalDependencies:
-      '@img/sharp-libvips-darwin-arm64': 1.2.4
+      '@img/sharp-libvips-darwin-arm64': 1.3.2
     optional: true
 
-  '@img/sharp-darwin-x64@0.34.5':
+  '@img/sharp-darwin-x64@0.35.3':
     optionalDependencies:
-      '@img/sharp-libvips-darwin-x64': 1.2.4
+      '@img/sharp-libvips-darwin-x64': 1.3.2
     optional: true
 
-  '@img/sharp-libvips-darwin-arm64@1.2.4':
+  '@img/sharp-freebsd-wasm32@0.35.3':
+    dependencies:
+      '@img/sharp-wasm32': 0.35.3
     optional: true
 
-  '@img/sharp-libvips-darwin-x64@1.2.4':
+  '@img/sharp-libvips-darwin-arm64@1.3.2':
     optional: true
 
-  '@img/sharp-libvips-linux-arm64@1.2.4':
+  '@img/sharp-libvips-darwin-x64@1.3.2':
     optional: true
 
-  '@img/sharp-libvips-linux-arm@1.2.4':
+  '@img/sharp-libvips-linux-arm64@1.3.2':
     optional: true
 
-  '@img/sharp-libvips-linux-ppc64@1.2.4':
+  '@img/sharp-libvips-linux-arm@1.3.2':
     optional: true
 
-  '@img/sharp-libvips-linux-riscv64@1.2.4':
+  '@img/sharp-libvips-linux-ppc64@1.3.2':
     optional: true
 
-  '@img/sharp-libvips-linux-s390x@1.2.4':
+  '@img/sharp-libvips-linux-riscv64@1.3.2':
     optional: true
 
-  '@img/sharp-libvips-linux-x64@1.2.4':
+  '@img/sharp-libvips-linux-s390x@1.3.2':
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+  '@img/sharp-libvips-linux-x64@1.3.2':
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+  '@img/sharp-libvips-linuxmusl-arm64@1.3.2':
     optional: true
 
-  '@img/sharp-linux-arm64@0.34.5':
+  '@img/sharp-libvips-linuxmusl-x64@1.3.2':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.35.3':
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.2.4
+      '@img/sharp-libvips-linux-arm64': 1.3.2
     optional: true
 
-  '@img/sharp-linux-arm@0.34.5':
+  '@img/sharp-linux-arm@0.35.3':
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.2.4
+      '@img/sharp-libvips-linux-arm': 1.3.2
     optional: true
 
-  '@img/sharp-linux-ppc64@0.34.5':
+  '@img/sharp-linux-ppc64@0.35.3':
     optionalDependencies:
-      '@img/sharp-libvips-linux-ppc64': 1.2.4
+      '@img/sharp-libvips-linux-ppc64': 1.3.2
     optional: true
 
-  '@img/sharp-linux-riscv64@0.34.5':
+  '@img/sharp-linux-riscv64@0.35.3':
     optionalDependencies:
-      '@img/sharp-libvips-linux-riscv64': 1.2.4
+      '@img/sharp-libvips-linux-riscv64': 1.3.2
     optional: true
 
-  '@img/sharp-linux-s390x@0.34.5':
+  '@img/sharp-linux-s390x@0.35.3':
     optionalDependencies:
-      '@img/sharp-libvips-linux-s390x': 1.2.4
+      '@img/sharp-libvips-linux-s390x': 1.3.2
     optional: true
 
-  '@img/sharp-linux-x64@0.34.5':
+  '@img/sharp-linux-x64@0.35.3':
     optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.2.4
+      '@img/sharp-libvips-linux-x64': 1.3.2
     optional: true
 
-  '@img/sharp-linuxmusl-arm64@0.34.5':
+  '@img/sharp-linuxmusl-arm64@0.35.3':
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.3.2
     optional: true
 
-  '@img/sharp-linuxmusl-x64@0.34.5':
+  '@img/sharp-linuxmusl-x64@0.35.3':
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.3.2
     optional: true
 
-  '@img/sharp-wasm32@0.34.5':
+  '@img/sharp-wasm32@0.35.3':
     dependencies:
       '@emnapi/runtime': 1.11.1
     optional: true
 
-  '@img/sharp-win32-arm64@0.34.5':
+  '@img/sharp-webcontainers-wasm32@0.35.3':
+    dependencies:
+      '@img/sharp-wasm32': 0.35.3
     optional: true
 
-  '@img/sharp-win32-ia32@0.34.5':
+  '@img/sharp-win32-arm64@0.35.3':
     optional: true
 
-  '@img/sharp-win32-x64@0.34.5':
+  '@img/sharp-win32-ia32@0.35.3':
+    optional: true
+
+  '@img/sharp-win32-x64@0.35.3':
     optional: true
 
   '@immich/sdk@3.0.2':
@@ -19930,7 +20829,7 @@ snapshots:
       '@jest/schemas': 29.6.3
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
       '@types/yargs': 17.0.35
       chalk: 4.1.2
 
@@ -20223,7 +21122,7 @@ snapshots:
       '@lexical/utils': 0.44.0
       lexical: 0.44.0
 
-  '@lexical/react@0.44.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(yjs@13.6.31)':
+  '@lexical/react@0.44.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(yjs@13.6.32)':
     dependencies:
       '@floating-ui/react': 0.27.19(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@lexical/devtools-core': 0.44.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -20241,13 +21140,13 @@ snapshots:
       '@lexical/table': 0.44.0
       '@lexical/text': 0.44.0
       '@lexical/utils': 0.44.0
-      '@lexical/yjs': 0.44.0(yjs@13.6.31)
+      '@lexical/yjs': 0.44.0(yjs@13.6.32)
       lexical: 0.44.0
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
       react-error-boundary: 6.1.2(react@19.2.7)
     optionalDependencies:
-      yjs: 13.6.31
+      yjs: 13.6.32
 
   '@lexical/rich-text@0.44.0':
     dependencies:
@@ -20277,11 +21176,11 @@ snapshots:
       '@lexical/selection': 0.44.0
       lexical: 0.44.0
 
-  '@lexical/yjs@0.44.0(yjs@13.6.31)':
+  '@lexical/yjs@0.44.0(yjs@13.6.32)':
     dependencies:
       '@lexical/selection': 0.44.0
       lexical: 0.44.0
-      yjs: 13.6.31
+      yjs: 13.6.32
 
   '@lezer/common@1.5.2': {}
 
@@ -20565,30 +21464,30 @@ snapshots:
       '@tybys/wasm-util': 0.10.3
     optional: true
 
-  '@next/env@16.2.10': {}
+  '@next/env@16.3.0-preview.9': {}
 
-  '@next/swc-darwin-arm64@16.2.10':
+  '@next/swc-darwin-arm64@16.3.0-preview.9':
     optional: true
 
-  '@next/swc-darwin-x64@16.2.10':
+  '@next/swc-darwin-x64@16.3.0-preview.9':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@16.2.10':
+  '@next/swc-linux-arm64-gnu@16.3.0-preview.9':
     optional: true
 
-  '@next/swc-linux-arm64-musl@16.2.10':
+  '@next/swc-linux-arm64-musl@16.3.0-preview.9':
     optional: true
 
-  '@next/swc-linux-x64-gnu@16.2.10':
+  '@next/swc-linux-x64-gnu@16.3.0-preview.9':
     optional: true
 
-  '@next/swc-linux-x64-musl@16.2.10':
+  '@next/swc-linux-x64-musl@16.3.0-preview.9':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@16.2.10':
+  '@next/swc-win32-arm64-msvc@16.3.0-preview.9':
     optional: true
 
-  '@next/swc-win32-x64-msvc@16.2.10':
+  '@next/swc-win32-x64-msvc@16.3.0-preview.9':
     optional: true
 
   '@nivo/annotations@0.99.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
@@ -21257,6 +22156,8 @@ snapshots:
 
   '@radix-ui/number@1.1.3': {}
 
+  '@radix-ui/primitive@1.1.5': {}
+
   '@radix-ui/primitive@1.1.7': {}
 
   '@radix-ui/react-accessible-icon@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
@@ -21373,6 +22274,12 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
+  '@radix-ui/react-compose-refs@1.1.3(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   '@radix-ui/react-compose-refs@1.1.5(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
       react: 19.2.7
@@ -21392,12 +22299,40 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
+  '@radix-ui/react-context@1.2.0(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   '@radix-ui/react-context@1.2.2(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
       react: 19.2.7
     optionalDependencies:
       '@types/react': 19.2.17
 
+  '@radix-ui/react-dialog@1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-dismissable-layer': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-focus-guards': 1.1.4(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-focus-scope': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-portal': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-presence': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      aria-hidden: 1.2.6
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
   '@radix-ui/react-dialog@1.1.23(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
@@ -21427,6 +22362,19 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
+  '@radix-ui/react-dismissable-layer@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-effect-event': 0.0.3(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
   '@radix-ui/react-dismissable-layer@1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
@@ -21455,12 +22403,29 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
+  '@radix-ui/react-focus-guards@1.1.4(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   '@radix-ui/react-focus-guards@1.1.6(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
       react: 19.2.7
     optionalDependencies:
       '@types/react': 19.2.17
 
+  '@radix-ui/react-focus-scope@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
   '@radix-ui/react-focus-scope@1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.7)
@@ -21503,6 +22468,13 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
+  '@radix-ui/react-id@1.1.2(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   '@radix-ui/react-id@1.1.4(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.7)
@@ -21662,6 +22634,16 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
+  '@radix-ui/react-portal@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
   '@radix-ui/react-portal@1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -21681,6 +22663,15 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
+  '@radix-ui/react-presence@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
   '@radix-ui/react-primitive@2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@radix-ui/react-slot': 1.3.3(@types/react@19.2.17)(react@19.2.7)
@@ -21690,6 +22681,15 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
+  '@radix-ui/react-primitive@2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
   '@radix-ui/react-progress@1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.7)
@@ -21811,6 +22811,13 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
+  '@radix-ui/react-slot@1.3.0(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   '@radix-ui/react-slot@1.3.3(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.7)
@@ -21930,12 +22937,26 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
+  '@radix-ui/react-use-callback-ref@1.1.2(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   '@radix-ui/react-use-callback-ref@1.1.4(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
       react: 19.2.7
     optionalDependencies:
       '@types/react': 19.2.17
 
+  '@radix-ui/react-use-controllable-state@1.2.3(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   '@radix-ui/react-use-controllable-state@1.2.6(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
@@ -21945,6 +22966,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
+  '@radix-ui/react-use-effect-event@0.0.3(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   '@radix-ui/react-use-effect-event@0.0.5(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.7)
@@ -21965,6 +22993,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
+  '@radix-ui/react-use-layout-effect@1.1.2(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   '@radix-ui/react-use-layout-effect@1.1.4(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
       react: 19.2.7
@@ -22065,10 +23099,10 @@ snapshots:
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@standard-schema/utils': 0.3.0
-      immer: 11.1.4
+      immer: 11.1.9
       redux: 5.0.1
       redux-thunk: 3.1.0(redux@5.0.1)
-      reselect: 5.1.1
+      reselect: 5.2.0
     optionalDependencies:
       react: 19.2.7
       react-redux: 9.2.0(@types/react@19.2.17)(react@19.2.7)(redux@5.0.1)
@@ -22188,27 +23222,27 @@ snapshots:
 
   '@rvf/set-get@7.0.1': {}
 
-  '@scalar/agent-chat@0.12.18(@typescript/typescript6@6.0.2)(nprogress@0.2.0)(supports-color@10.2.2)(tailwindcss@4.3.2)(zod@4.4.3)':
+  '@scalar/agent-chat@0.12.18(nprogress@0.2.0)(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)(zod@4.4.3)':
     dependencies:
-      '@ai-sdk/vue': 3.0.33(vue@3.5.35(@typescript/typescript6@6.0.2))(zod@4.4.3)
-      '@scalar/api-client': 3.13.3(@typescript/typescript6@6.0.2)(nprogress@0.2.0)(supports-color@10.2.2)(tailwindcss@4.3.2)
-      '@scalar/components': 0.27.6(@typescript/typescript6@6.0.2)(supports-color@10.2.2)(tailwindcss@4.3.2)
+      '@ai-sdk/vue': 3.0.33(vue@3.5.35(typescript@7.0.2))(zod@4.4.3)
+      '@scalar/api-client': 3.13.3(nprogress@0.2.0)(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)
+      '@scalar/components': 0.27.6(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)
       '@scalar/helpers': 0.9.0
-      '@scalar/icons': 0.7.3(@typescript/typescript6@6.0.2)
+      '@scalar/icons': 0.7.3(typescript@7.0.2)
       '@scalar/json-magic': 0.12.17
       '@scalar/openapi-types': 0.9.1
       '@scalar/schemas': 0.7.2
       '@scalar/themes': 0.16.2
       '@scalar/types': 0.16.2
-      '@scalar/use-toasts': 0.10.2(@typescript/typescript6@6.0.2)
+      '@scalar/use-toasts': 0.10.2(typescript@7.0.2)
       '@scalar/validation': 0.6.0
-      '@scalar/workspace-store': 0.55.3(@typescript/typescript6@6.0.2)
-      '@vueuse/core': 13.9.0(vue@3.5.35(@typescript/typescript6@6.0.2))
+      '@scalar/workspace-store': 0.55.3(typescript@7.0.2)
+      '@vueuse/core': 13.9.0(vue@3.5.35(typescript@7.0.2))
       ai: 6.0.33(zod@4.4.3)
       js-base64: 3.7.8
       neverpanic: 0.0.8
       truncate-json: 3.0.1
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - async-validator
@@ -22226,36 +23260,36 @@ snapshots:
       - universal-cookie
       - zod
 
-  '@scalar/api-client@3.13.3(@typescript/typescript6@6.0.2)(nprogress@0.2.0)(supports-color@10.2.2)(tailwindcss@4.3.2)':
+  '@scalar/api-client@3.13.3(nprogress@0.2.0)(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)':
     dependencies:
       '@headlessui/tailwindcss': 0.2.2(tailwindcss@4.3.2)
-      '@headlessui/vue': 1.7.23(vue@3.5.35(@typescript/typescript6@6.0.2))
-      '@scalar/blocks': 0.1.4(@typescript/typescript6@6.0.2)(supports-color@10.2.2)(tailwindcss@4.3.2)
-      '@scalar/components': 0.27.6(@typescript/typescript6@6.0.2)(supports-color@10.2.2)(tailwindcss@4.3.2)
+      '@headlessui/vue': 1.7.23(vue@3.5.35(typescript@7.0.2))
+      '@scalar/blocks': 0.1.4(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)
+      '@scalar/components': 0.27.6(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)
       '@scalar/helpers': 0.9.0
-      '@scalar/icons': 0.7.3(@typescript/typescript6@6.0.2)
-      '@scalar/oas-utils': 0.19.4(@typescript/typescript6@6.0.2)
+      '@scalar/icons': 0.7.3(typescript@7.0.2)
+      '@scalar/oas-utils': 0.19.4(typescript@7.0.2)
       '@scalar/openapi-types': 0.9.1
-      '@scalar/sidebar': 0.9.29(@typescript/typescript6@6.0.2)(supports-color@10.2.2)(tailwindcss@4.3.2)
+      '@scalar/sidebar': 0.9.29(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)
       '@scalar/snippetz': 0.9.21
       '@scalar/themes': 0.16.2
       '@scalar/typebox': 0.1.3
       '@scalar/types': 0.16.2
-      '@scalar/use-codemirror': 0.14.12(@typescript/typescript6@6.0.2)
-      '@scalar/use-hooks': 0.4.7(@typescript/typescript6@6.0.2)
-      '@scalar/use-toasts': 0.10.2(@typescript/typescript6@6.0.2)
-      '@scalar/workspace-store': 0.55.3(@typescript/typescript6@6.0.2)
-      '@vueuse/core': 13.9.0(vue@3.5.35(@typescript/typescript6@6.0.2))
-      '@vueuse/integrations': 13.9.0(focus-trap@7.8.0)(fuse.js@7.4.2)(nprogress@0.2.0)(vue@3.5.35(@typescript/typescript6@6.0.2))
+      '@scalar/use-codemirror': 0.14.12(typescript@7.0.2)
+      '@scalar/use-hooks': 0.4.7(typescript@7.0.2)
+      '@scalar/use-toasts': 0.10.2(typescript@7.0.2)
+      '@scalar/workspace-store': 0.55.3(typescript@7.0.2)
+      '@vueuse/core': 13.9.0(vue@3.5.35(typescript@7.0.2))
+      '@vueuse/integrations': 13.9.0(focus-trap@7.8.0)(fuse.js@7.4.2)(nprogress@0.2.0)(vue@3.5.35(typescript@7.0.2))
       focus-trap: 7.8.0
       fuse.js: 7.4.2
       js-base64: 3.7.8
       jsonc-parser: 3.3.1
       nanoid: 5.1.16
       pretty-ms: 9.3.0
-      radix-vue: 1.9.17(vue@3.5.35(@typescript/typescript6@6.0.2))
+      radix-vue: 1.9.17(vue@3.5.35(typescript@7.0.2))
       set-cookie-parser: 3.1.0
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
       yaml: 2.9.0
       zod: 4.4.3
     transitivePeerDependencies:
@@ -22274,9 +23308,9 @@ snapshots:
       - typescript
       - universal-cookie
 
-  '@scalar/api-reference-react@0.9.54(@typescript/typescript6@6.0.2)(nprogress@0.2.0)(react@19.2.7)(supports-color@10.2.2)(tailwindcss@4.3.2)(zod@4.4.3)':
+  '@scalar/api-reference-react@0.9.54(nprogress@0.2.0)(react@19.2.7)(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)(zod@4.4.3)':
     dependencies:
-      '@scalar/api-reference': 1.62.5(@typescript/typescript6@6.0.2)(nprogress@0.2.0)(supports-color@10.2.2)(tailwindcss@4.3.2)(zod@4.4.3)
+      '@scalar/api-reference': 1.62.5(nprogress@0.2.0)(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)(zod@4.4.3)
       '@scalar/types': 0.16.2
       react: 19.2.7
     transitivePeerDependencies:
@@ -22296,32 +23330,32 @@ snapshots:
       - universal-cookie
       - zod
 
-  '@scalar/api-reference@1.62.5(@typescript/typescript6@6.0.2)(nprogress@0.2.0)(supports-color@10.2.2)(tailwindcss@4.3.2)(zod@4.4.3)':
+  '@scalar/api-reference@1.62.5(nprogress@0.2.0)(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)(zod@4.4.3)':
     dependencies:
-      '@headlessui/vue': 1.7.23(vue@3.5.35(@typescript/typescript6@6.0.2))
-      '@scalar/agent-chat': 0.12.18(@typescript/typescript6@6.0.2)(nprogress@0.2.0)(supports-color@10.2.2)(tailwindcss@4.3.2)(zod@4.4.3)
-      '@scalar/api-client': 3.13.3(@typescript/typescript6@6.0.2)(nprogress@0.2.0)(supports-color@10.2.2)(tailwindcss@4.3.2)
-      '@scalar/blocks': 0.1.4(@typescript/typescript6@6.0.2)(supports-color@10.2.2)(tailwindcss@4.3.2)
+      '@headlessui/vue': 1.7.23(vue@3.5.35(typescript@7.0.2))
+      '@scalar/agent-chat': 0.12.18(nprogress@0.2.0)(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)(zod@4.4.3)
+      '@scalar/api-client': 3.13.3(nprogress@0.2.0)(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)
+      '@scalar/blocks': 0.1.4(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)
       '@scalar/code-highlight': 0.4.1(supports-color@10.2.2)
-      '@scalar/components': 0.27.6(@typescript/typescript6@6.0.2)(supports-color@10.2.2)(tailwindcss@4.3.2)
+      '@scalar/components': 0.27.6(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)
       '@scalar/helpers': 0.9.0
-      '@scalar/icons': 0.7.3(@typescript/typescript6@6.0.2)
-      '@scalar/oas-utils': 0.19.4(@typescript/typescript6@6.0.2)
+      '@scalar/icons': 0.7.3(typescript@7.0.2)
+      '@scalar/oas-utils': 0.19.4(typescript@7.0.2)
       '@scalar/schemas': 0.7.2
-      '@scalar/sidebar': 0.9.29(@typescript/typescript6@6.0.2)(supports-color@10.2.2)(tailwindcss@4.3.2)
+      '@scalar/sidebar': 0.9.29(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)
       '@scalar/snippetz': 0.9.21
       '@scalar/themes': 0.16.2
       '@scalar/types': 0.16.2
-      '@scalar/use-hooks': 0.4.7(@typescript/typescript6@6.0.2)
-      '@scalar/use-toasts': 0.10.2(@typescript/typescript6@6.0.2)
+      '@scalar/use-hooks': 0.4.7(typescript@7.0.2)
+      '@scalar/use-toasts': 0.10.2(typescript@7.0.2)
       '@scalar/validation': 0.6.0
-      '@scalar/workspace-store': 0.55.3(@typescript/typescript6@6.0.2)
-      '@unhead/vue': 2.1.15(vue@3.5.35(@typescript/typescript6@6.0.2))
-      '@vueuse/core': 13.9.0(vue@3.5.35(@typescript/typescript6@6.0.2))
+      '@scalar/workspace-store': 0.55.3(typescript@7.0.2)
+      '@unhead/vue': 2.1.15(vue@3.5.35(typescript@7.0.2))
+      '@vueuse/core': 13.9.0(vue@3.5.35(typescript@7.0.2))
       fuse.js: 7.4.2
       microdiff: 1.5.0
       nanoid: 5.1.16
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
       yaml: 2.9.0
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -22344,18 +23378,18 @@ snapshots:
     dependencies:
       '@scalar/helpers': 0.9.0
 
-  '@scalar/blocks@0.1.4(@typescript/typescript6@6.0.2)(supports-color@10.2.2)(tailwindcss@4.3.2)':
+  '@scalar/blocks@0.1.4(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)':
     dependencies:
-      '@scalar/components': 0.27.6(@typescript/typescript6@6.0.2)(supports-color@10.2.2)(tailwindcss@4.3.2)
+      '@scalar/components': 0.27.6(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)
       '@scalar/helpers': 0.9.0
-      '@scalar/icons': 0.7.3(@typescript/typescript6@6.0.2)
+      '@scalar/icons': 0.7.3(typescript@7.0.2)
       '@scalar/snippetz': 0.9.21
       '@scalar/themes': 0.16.2
       '@scalar/types': 0.16.2
-      '@scalar/workspace-store': 0.55.3(@typescript/typescript6@6.0.2)
+      '@scalar/workspace-store': 0.55.3(typescript@7.0.2)
       '@types/har-format': 1.2.16
       js-base64: 3.7.8
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - supports-color
@@ -22382,21 +23416,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@scalar/components@0.27.6(@typescript/typescript6@6.0.2)(supports-color@10.2.2)(tailwindcss@4.3.2)':
+  '@scalar/components@0.27.6(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)':
     dependencies:
       '@floating-ui/utils': 0.2.10
-      '@floating-ui/vue': 1.1.9(vue@3.5.35(@typescript/typescript6@6.0.2))
+      '@floating-ui/vue': 1.1.9(vue@3.5.35(typescript@7.0.2))
       '@headlessui/tailwindcss': 0.2.2(tailwindcss@4.3.2)
-      '@headlessui/vue': 1.7.23(vue@3.5.35(@typescript/typescript6@6.0.2))
+      '@headlessui/vue': 1.7.23(vue@3.5.35(typescript@7.0.2))
       '@scalar/code-highlight': 0.4.1(supports-color@10.2.2)
       '@scalar/helpers': 0.9.0
-      '@scalar/icons': 0.7.3(@typescript/typescript6@6.0.2)
+      '@scalar/icons': 0.7.3(typescript@7.0.2)
       '@scalar/themes': 0.16.2
-      '@scalar/use-hooks': 0.4.7(@typescript/typescript6@6.0.2)
-      '@vueuse/core': 13.9.0(vue@3.5.35(@typescript/typescript6@6.0.2))
-      cva: 1.0.0-beta.4(@typescript/typescript6@6.0.2)
-      radix-vue: 1.9.17(vue@3.5.35(@typescript/typescript6@6.0.2))
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      '@scalar/use-hooks': 0.4.7(typescript@7.0.2)
+      '@vueuse/core': 13.9.0(vue@3.5.35(typescript@7.0.2))
+      cva: 1.0.0-beta.4(typescript@7.0.2)
+      radix-vue: 1.9.17(vue@3.5.35(typescript@7.0.2))
+      vue: 3.5.35(typescript@7.0.2)
       vue-component-type-helpers: 3.3.4
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -22406,12 +23440,12 @@ snapshots:
 
   '@scalar/helpers@0.9.0': {}
 
-  '@scalar/icons@0.7.3(@typescript/typescript6@6.0.2)':
+  '@scalar/icons@0.7.3(typescript@7.0.2)':
     dependencies:
       '@phosphor-icons/core': 2.1.1
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
       chalk: 5.6.2
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
     transitivePeerDependencies:
       - typescript
 
@@ -22421,14 +23455,14 @@ snapshots:
       pathe: 2.0.3
       yaml: 2.9.0
 
-  '@scalar/oas-utils@0.19.4(@typescript/typescript6@6.0.2)':
+  '@scalar/oas-utils@0.19.4(typescript@7.0.2)':
     dependencies:
       '@scalar/helpers': 0.9.0
       '@scalar/themes': 0.16.2
       '@scalar/types': 0.16.2
-      '@scalar/workspace-store': 0.55.3(@typescript/typescript6@6.0.2)
+      '@scalar/workspace-store': 0.55.3(typescript@7.0.2)
       flatted: 3.4.2
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
       yaml: 2.9.0
     transitivePeerDependencies:
       - typescript
@@ -22444,15 +23478,15 @@ snapshots:
       '@scalar/helpers': 0.9.0
       '@scalar/validation': 0.6.0
 
-  '@scalar/sidebar@0.9.29(@typescript/typescript6@6.0.2)(supports-color@10.2.2)(tailwindcss@4.3.2)':
+  '@scalar/sidebar@0.9.29(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)':
     dependencies:
-      '@scalar/components': 0.27.6(@typescript/typescript6@6.0.2)(supports-color@10.2.2)(tailwindcss@4.3.2)
+      '@scalar/components': 0.27.6(supports-color@10.2.2)(tailwindcss@4.3.2)(typescript@7.0.2)
       '@scalar/helpers': 0.9.0
-      '@scalar/icons': 0.7.3(@typescript/typescript6@6.0.2)
+      '@scalar/icons': 0.7.3(typescript@7.0.2)
       '@scalar/themes': 0.16.2
-      '@scalar/use-hooks': 0.4.7(@typescript/typescript6@6.0.2)
-      '@scalar/workspace-store': 0.55.3(@typescript/typescript6@6.0.2)
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      '@scalar/use-hooks': 0.4.7(typescript@7.0.2)
+      '@scalar/workspace-store': 0.55.3(typescript@7.0.2)
+      vue: 3.5.35(typescript@7.0.2)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - supports-color
@@ -22479,7 +23513,7 @@ snapshots:
       type-fest: 5.7.0
       zod: 4.4.3
 
-  '@scalar/use-codemirror@0.14.12(@typescript/typescript6@6.0.2)':
+  '@scalar/use-codemirror@0.14.12(typescript@7.0.2)':
     dependencies:
       '@codemirror/autocomplete': 6.20.3
       '@codemirror/commands': 6.10.3
@@ -22495,31 +23529,31 @@ snapshots:
       '@lezer/common': 1.5.2
       '@lezer/highlight': 1.2.3
       '@replit/codemirror-css-color-picker': 6.3.0(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.43.0)
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
     transitivePeerDependencies:
       - typescript
 
-  '@scalar/use-hooks@0.4.7(@typescript/typescript6@6.0.2)':
+  '@scalar/use-hooks@0.4.7(typescript@7.0.2)':
     dependencies:
-      '@scalar/use-toasts': 0.10.2(@typescript/typescript6@6.0.2)
+      '@scalar/use-toasts': 0.10.2(typescript@7.0.2)
       '@scalar/validation': 0.6.0
-      '@vueuse/core': 13.9.0(vue@3.5.35(@typescript/typescript6@6.0.2))
-      cva: 1.0.0-beta.4(@typescript/typescript6@6.0.2)
+      '@vueuse/core': 13.9.0(vue@3.5.35(typescript@7.0.2))
+      cva: 1.0.0-beta.4(typescript@7.0.2)
       tailwind-merge: 3.5.0
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
     transitivePeerDependencies:
       - typescript
 
-  '@scalar/use-toasts@0.10.2(@typescript/typescript6@6.0.2)':
+  '@scalar/use-toasts@0.10.2(typescript@7.0.2)':
     dependencies:
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
       vue-sonner: 1.3.2
     transitivePeerDependencies:
       - typescript
 
   '@scalar/validation@0.6.0': {}
 
-  '@scalar/workspace-store@0.55.3(@typescript/typescript6@6.0.2)':
+  '@scalar/workspace-store@0.55.3(typescript@7.0.2)':
     dependencies:
       '@scalar/asyncapi-upgrader': 0.1.2
       '@scalar/helpers': 0.9.0
@@ -22532,7 +23566,7 @@ snapshots:
       '@scalar/validation': 0.6.0
       js-base64: 3.7.8
       type-fest: 5.7.0
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
       yaml: 2.9.0
     transitivePeerDependencies:
       - typescript
@@ -22541,14 +23575,14 @@ snapshots:
 
   '@sec-ant/readable-stream@0.4.1': {}
 
-  '@semantic-release/changelog@7.0.0(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))':
+  '@semantic-release/changelog@7.0.0(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))':
     dependencies:
       '@semantic-release/error': 4.0.0
       aggregate-error: 5.0.0
       lodash-es: 4.17.21
-      semantic-release: 25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
+      semantic-release: 25.0.5(supports-color@10.2.2)(typescript@7.0.2)
 
-  '@semantic-release/commit-analyzer@13.0.1(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(supports-color@10.2.2)':
+  '@semantic-release/commit-analyzer@13.0.1(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))(supports-color@10.2.2)':
     dependencies:
       conventional-changelog-angular: 8.0.0
       conventional-changelog-writer: 8.0.0
@@ -22558,27 +23592,27 @@ snapshots:
       import-from-esm: 2.0.0(supports-color@10.2.2)
       lodash-es: 4.17.21
       micromatch: 4.0.8
-      semantic-release: 25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
+      semantic-release: 25.0.5(supports-color@10.2.2)(typescript@7.0.2)
     transitivePeerDependencies:
       - supports-color
 
   '@semantic-release/error@4.0.0': {}
 
-  '@semantic-release/git@11.0.1(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(supports-color@10.2.2)':
+  '@semantic-release/git@11.0.1(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))(supports-color@10.2.2)':
     dependencies:
       '@semantic-release/error': 4.0.0
       aggregate-error: 5.0.0
       debug: 4.4.3(supports-color@10.2.2)
       dir-glob: 3.0.1
-      execa: 10.0.0
+      execa: 10.0.1
       lodash-es: 4.17.21
       micromatch: 4.0.8
       p-reduce: 3.0.0
-      semantic-release: 25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
+      semantic-release: 25.0.5(supports-color@10.2.2)(typescript@7.0.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@semantic-release/github@12.0.9(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(supports-color@10.2.2)':
+  '@semantic-release/github@12.0.9(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))(supports-color@10.2.2)':
     dependencies:
       '@octokit/core': 7.0.6
       '@octokit/plugin-paginate-rest': 14.0.0(@octokit/core@7.0.6)
@@ -22594,14 +23628,14 @@ snapshots:
       lodash-es: 4.17.21
       mime: 4.0.4
       p-filter: 4.1.0
-      semantic-release: 25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
+      semantic-release: 25.0.5(supports-color@10.2.2)(typescript@7.0.2)
       tinyglobby: 0.2.17
       undici: 7.28.0
       url-join: 5.0.0
     transitivePeerDependencies:
       - supports-color
 
-  '@semantic-release/npm@13.1.5(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))':
+  '@semantic-release/npm@13.1.5(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))':
     dependencies:
       '@actions/core': 3.0.0
       '@semantic-release/error': 4.0.0
@@ -22616,11 +23650,11 @@ snapshots:
       rc: 1.2.8
       read-pkg: 10.0.0
       registry-auth-token: 5.0.2
-      semantic-release: 25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
+      semantic-release: 25.0.5(supports-color@10.2.2)(typescript@7.0.2)
       semver: 7.7.4
       tempy: 3.1.0
 
-  '@semantic-release/release-notes-generator@14.1.1(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(supports-color@10.2.2)':
+  '@semantic-release/release-notes-generator@14.1.1(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))(supports-color@10.2.2)':
     dependencies:
       conventional-changelog-angular: 8.0.0
       conventional-changelog-writer: 8.0.0
@@ -22630,10 +23664,15 @@ snapshots:
       import-from-esm: 2.0.0(supports-color@10.2.2)
       lodash-es: 4.17.21
       read-package-up: 11.0.0
-      semantic-release: 25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
+      semantic-release: 25.0.5(supports-color@10.2.2)(typescript@7.0.2)
     transitivePeerDependencies:
       - supports-color
 
+  '@shadcn/react@0.2.1(@types/react@19.2.17)(react@19.2.7)':
+    optionalDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.7
+
   '@sideway/address@4.1.5':
     dependencies:
       '@hapi/hoek': 9.3.0
@@ -22642,24 +23681,6 @@ snapshots:
 
   '@sideway/pinpoint@2.0.0': {}
 
-  '@signalwire/docusaurus-plugin-llms-txt@1.2.2(@docusaurus/core@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(supports-color@10.2.2)':
-    dependencies:
-      '@docusaurus/core': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.7))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
-      fs-extra: 11.2.0
-      hast-util-select: 6.0.4
-      hast-util-to-html: 9.0.5
-      hast-util-to-string: 3.0.1
-      p-map: 7.0.3
-      rehype-parse: 9.0.1
-      rehype-remark: 10.0.1
-      remark-gfm: 4.0.1(supports-color@10.2.2)
-      remark-stringify: 11.0.0
-      string-width: 5.1.2
-      unified: 11.0.5
-      unist-util-visit: 5.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   '@sinclair/typebox@0.27.10': {}
 
   '@sindresorhus/is@4.6.0': {}
@@ -22689,6 +23710,40 @@ snapshots:
       color: 5.0.2
       text-hex: 1.0.0
 
+  '@solid-primitives/event-listener@2.4.6(solid-js@1.9.14)':
+    dependencies:
+      '@solid-primitives/utils': 6.4.1(solid-js@1.9.14)
+      solid-js: 1.9.14
+
+  '@solid-primitives/keyboard@1.3.7(solid-js@1.9.14)':
+    dependencies:
+      '@solid-primitives/event-listener': 2.4.6(solid-js@1.9.14)
+      '@solid-primitives/rootless': 1.5.4(solid-js@1.9.14)
+      '@solid-primitives/utils': 6.4.1(solid-js@1.9.14)
+      solid-js: 1.9.14
+
+  '@solid-primitives/resize-observer@2.2.0(solid-js@1.9.14)':
+    dependencies:
+      '@solid-primitives/event-listener': 2.4.6(solid-js@1.9.14)
+      '@solid-primitives/rootless': 1.5.4(solid-js@1.9.14)
+      '@solid-primitives/static-store': 0.1.4(solid-js@1.9.14)
+      '@solid-primitives/utils': 6.4.1(solid-js@1.9.14)
+      solid-js: 1.9.14
+
+  '@solid-primitives/rootless@1.5.4(solid-js@1.9.14)':
+    dependencies:
+      '@solid-primitives/utils': 6.4.1(solid-js@1.9.14)
+      solid-js: 1.9.14
+
+  '@solid-primitives/static-store@0.1.4(solid-js@1.9.14)':
+    dependencies:
+      '@solid-primitives/utils': 6.4.1(solid-js@1.9.14)
+      solid-js: 1.9.14
+
+  '@solid-primitives/utils@6.4.1(solid-js@1.9.14)':
+    dependencies:
+      solid-js: 1.9.14
+
   '@standard-schema/spec@1.1.0': {}
 
   '@standard-schema/utils@0.3.0': {}
@@ -22737,12 +23792,12 @@ snapshots:
       '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.29.0(supports-color@10.2.2))
       '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.29.0(supports-color@10.2.2))
 
-  '@svgr/core@8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2)':
+  '@svgr/core@8.1.0(supports-color@10.2.2)(typescript@7.0.2)':
     dependencies:
       '@babel/core': 7.29.0(supports-color@10.2.2)
       '@svgr/babel-preset': 8.1.0(@babel/core@7.29.0(supports-color@10.2.2))
       camelcase: 6.3.0
-      cosmiconfig: 8.3.6(@typescript/typescript6@6.0.2)
+      cosmiconfig: 8.3.6(typescript@7.0.2)
       snake-case: 3.0.4
     transitivePeerDependencies:
       - supports-color
@@ -22753,35 +23808,35 @@ snapshots:
       '@babel/types': 7.29.7
       entities: 4.5.0
 
-  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(supports-color@10.2.2)':
+  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0(supports-color@10.2.2)(typescript@7.0.2))(supports-color@10.2.2)':
     dependencies:
       '@babel/core': 7.29.0(supports-color@10.2.2)
       '@svgr/babel-preset': 8.1.0(@babel/core@7.29.0(supports-color@10.2.2))
-      '@svgr/core': 8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
+      '@svgr/core': 8.1.0(supports-color@10.2.2)(typescript@7.0.2)
       '@svgr/hast-util-to-babel-ast': 8.0.0
       svg-parser: 2.0.4
     transitivePeerDependencies:
       - supports-color
 
-  '@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(@typescript/typescript6@6.0.2)':
+  '@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0(supports-color@10.2.2)(typescript@7.0.2))(typescript@7.0.2)':
     dependencies:
-      '@svgr/core': 8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
-      cosmiconfig: 8.3.6(@typescript/typescript6@6.0.2)
+      '@svgr/core': 8.1.0(supports-color@10.2.2)(typescript@7.0.2)
+      cosmiconfig: 8.3.6(typescript@7.0.2)
       deepmerge: 4.3.1
       svgo: 3.3.3
     transitivePeerDependencies:
       - typescript
 
-  '@svgr/webpack@8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2)':
+  '@svgr/webpack@8.1.0(supports-color@10.2.2)(typescript@7.0.2)':
     dependencies:
       '@babel/core': 7.29.0(supports-color@10.2.2)
       '@babel/plugin-transform-react-constant-elements': 7.29.7(@babel/core@7.29.0(supports-color@10.2.2))
       '@babel/preset-env': 7.29.7(@babel/core@7.29.0(supports-color@10.2.2))(supports-color@10.2.2)
       '@babel/preset-react': 7.29.7(@babel/core@7.29.0(supports-color@10.2.2))(supports-color@10.2.2)
       '@babel/preset-typescript': 7.29.7(@babel/core@7.29.0(supports-color@10.2.2))(supports-color@10.2.2)
-      '@svgr/core': 8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
-      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(supports-color@10.2.2)
-      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(@typescript/typescript6@6.0.2)
+      '@svgr/core': 8.1.0(supports-color@10.2.2)(typescript@7.0.2)
+      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(supports-color@10.2.2)(typescript@7.0.2))(supports-color@10.2.2)
+      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0(supports-color@10.2.2)(typescript@7.0.2))(typescript@7.0.2)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -22899,18 +23954,18 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
-  '@t3-oss/env-core@0.13.11(@typescript/typescript6@6.0.2)(arktype@2.1.20)(zod@4.4.3)':
+  '@t3-oss/env-core@0.13.11(arktype@2.1.20)(typescript@7.0.2)(zod@4.4.3)':
     optionalDependencies:
       arktype: 2.1.20
-      typescript: '@typescript/typescript6@6.0.2'
+      typescript: 7.0.2
       zod: 4.4.3
 
-  '@t3-oss/env-nextjs@0.13.11(@typescript/typescript6@6.0.2)(arktype@2.1.20)(zod@4.4.3)':
+  '@t3-oss/env-nextjs@0.13.11(arktype@2.1.20)(typescript@7.0.2)(zod@4.4.3)':
     dependencies:
-      '@t3-oss/env-core': 0.13.11(@typescript/typescript6@6.0.2)(arktype@2.1.20)(zod@4.4.3)
+      '@t3-oss/env-core': 0.13.11(arktype@2.1.20)(typescript@7.0.2)(zod@4.4.3)
     optionalDependencies:
       arktype: 2.1.20
-      typescript: '@typescript/typescript6@6.0.2'
+      typescript: 7.0.2
       zod: 4.4.3
 
   '@tabler/icons-react@3.44.0(react@19.2.7)':
@@ -22989,22 +24044,64 @@ snapshots:
       postcss: 8.5.15
       tailwindcss: 4.3.2
 
+  '@tanstack/devtools-client@0.0.8':
+    dependencies:
+      '@tanstack/devtools-event-client': 0.5.0
+
+  '@tanstack/devtools-event-bus@0.4.2':
+    dependencies:
+      ws: 8.21.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@tanstack/devtools-event-client@0.5.0': {}
+
+  '@tanstack/devtools-ui@0.6.0(csstype@3.2.3)(solid-js@1.9.14)':
+    dependencies:
+      clsx: 2.1.1
+      dayjs: 1.11.21
+      goober: 2.1.19(csstype@3.2.3)
+      solid-js: 1.9.14
+    transitivePeerDependencies:
+      - csstype
+
+  '@tanstack/devtools@0.13.0(csstype@3.2.3)(solid-js@1.9.14)':
+    dependencies:
+      '@solid-primitives/event-listener': 2.4.6(solid-js@1.9.14)
+      '@solid-primitives/keyboard': 1.3.7(solid-js@1.9.14)
+      '@solid-primitives/resize-observer': 2.2.0(solid-js@1.9.14)
+      '@tanstack/devtools-client': 0.0.8
+      '@tanstack/devtools-event-bus': 0.4.2
+      '@tanstack/devtools-ui': 0.6.0(csstype@3.2.3)(solid-js@1.9.14)
+      clsx: 2.1.1
+      goober: 2.1.19(csstype@3.2.3)
+      solid-js: 1.9.14
+    transitivePeerDependencies:
+      - bufferutil
+      - csstype
+      - utf-8-validate
+
   '@tanstack/match-sorter-utils@8.19.4':
     dependencies:
       remove-accents: 0.5.0
 
-  '@tanstack/query-async-storage-persister@5.101.2':
-    dependencies:
-      '@tanstack/query-core': 5.101.2
-      '@tanstack/query-persist-client-core': 5.101.2
-
   '@tanstack/query-core@5.101.2': {}
 
   '@tanstack/query-devtools@5.101.2': {}
 
-  '@tanstack/query-persist-client-core@5.101.2':
+  '@tanstack/react-devtools@0.10.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(csstype@3.2.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(solid-js@1.9.14)':
     dependencies:
-      '@tanstack/query-core': 5.101.2
+      '@tanstack/devtools': 0.13.0(csstype@3.2.3)(solid-js@1.9.14)
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    transitivePeerDependencies:
+      - bufferutil
+      - csstype
+      - solid-js
+      - utf-8-validate
 
   '@tanstack/react-query-devtools@5.101.2(@tanstack/react-query@5.101.2(react@19.2.7))(react@19.2.7)':
     dependencies:
@@ -23012,16 +24109,10 @@ snapshots:
       '@tanstack/react-query': 5.101.2(react@19.2.7)
       react: 19.2.7
 
-  '@tanstack/react-query-next-experimental@5.101.2(@tanstack/react-query@5.101.2(react@19.2.7))(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react@19.2.7)':
+  '@tanstack/react-query-next-experimental@5.101.2(@tanstack/react-query@5.101.2(react@19.2.7))(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react@19.2.7)':
     dependencies:
       '@tanstack/react-query': 5.101.2(react@19.2.7)
-      next: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
-      react: 19.2.7
-
-  '@tanstack/react-query-persist-client@5.101.2(@tanstack/react-query@5.101.2(react@19.2.7))(react@19.2.7)':
-    dependencies:
-      '@tanstack/query-persist-client-core': 5.101.2
-      '@tanstack/react-query': 5.101.2(react@19.2.7)
+      next: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       react: 19.2.7
 
   '@tanstack/react-query@5.101.2(react@19.2.7)':
@@ -23047,10 +24138,10 @@ snapshots:
 
   '@tanstack/virtual-core@3.17.0': {}
 
-  '@tanstack/vue-virtual@3.13.28(vue@3.5.35(@typescript/typescript6@6.0.2))':
+  '@tanstack/vue-virtual@3.13.28(vue@3.5.35(typescript@7.0.2))':
     dependencies:
       '@tanstack/virtual-core': 3.17.0
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
 
   '@testcontainers/mysql@12.0.4(supports-color@10.2.2)':
     dependencies:
@@ -23294,42 +24385,42 @@ snapshots:
       '@tiptap/extensions': 3.27.3(@tiptap/core@3.27.3(@tiptap/pm@3.27.3))(@tiptap/pm@3.27.3)
       '@tiptap/pm': 3.27.3
 
-  '@trpc/client@11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)':
+  '@trpc/client@11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2)':
     dependencies:
-      '@trpc/server': 11.18.0(@typescript/typescript6@6.0.2)
-      typescript: '@typescript/typescript6@6.0.2'
+      '@trpc/server': 11.18.0(typescript@7.0.2)
+      typescript: 7.0.2
 
-  '@trpc/next@11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2))(@trpc/react-query@11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2))(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)(react@19.2.7))(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@trpc/next@11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2))(@trpc/react-query@11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2))(@trpc/server@11.18.0(typescript@7.0.2))(react@19.2.7)(typescript@7.0.2))(@trpc/server@11.18.0(typescript@7.0.2))(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(typescript@7.0.2)':
     dependencies:
-      '@trpc/client': 11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)
-      '@trpc/server': 11.18.0(@typescript/typescript6@6.0.2)
-      next: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+      '@trpc/client': 11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2)
+      '@trpc/server': 11.18.0(typescript@7.0.2)
+      next: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
-      typescript: '@typescript/typescript6@6.0.2'
+      typescript: 7.0.2
     optionalDependencies:
       '@tanstack/react-query': 5.101.2(react@19.2.7)
-      '@trpc/react-query': 11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2))(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)(react@19.2.7)
+      '@trpc/react-query': 11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2))(@trpc/server@11.18.0(typescript@7.0.2))(react@19.2.7)(typescript@7.0.2)
 
-  '@trpc/react-query@11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2))(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)(react@19.2.7)':
+  '@trpc/react-query@11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2))(@trpc/server@11.18.0(typescript@7.0.2))(react@19.2.7)(typescript@7.0.2)':
     dependencies:
       '@tanstack/react-query': 5.101.2(react@19.2.7)
-      '@trpc/client': 11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)
-      '@trpc/server': 11.18.0(@typescript/typescript6@6.0.2)
+      '@trpc/client': 11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2)
+      '@trpc/server': 11.18.0(typescript@7.0.2)
       react: 19.2.7
-      typescript: '@typescript/typescript6@6.0.2'
+      typescript: 7.0.2
 
-  '@trpc/server@11.18.0(@typescript/typescript6@6.0.2)':
+  '@trpc/server@11.18.0(typescript@7.0.2)':
     dependencies:
-      typescript: '@typescript/typescript6@6.0.2'
+      typescript: 7.0.2
 
-  '@trpc/tanstack-react-query@11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2))(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)(react@19.2.7)':
+  '@trpc/tanstack-react-query@11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2))(@trpc/server@11.18.0(typescript@7.0.2))(react@19.2.7)(typescript@7.0.2)':
     dependencies:
       '@tanstack/react-query': 5.101.2(react@19.2.7)
-      '@trpc/client': 11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)
-      '@trpc/server': 11.18.0(@typescript/typescript6@6.0.2)
+      '@trpc/client': 11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2)
+      '@trpc/server': 11.18.0(typescript@7.0.2)
       react: 19.2.7
-      typescript: '@typescript/typescript6@6.0.2'
+      typescript: 7.0.2
 
   '@tsconfig/docusaurus@2.0.9': {}
 
@@ -23380,11 +24471,11 @@ snapshots:
   '@types/body-parser@1.19.5':
     dependencies:
       '@types/connect': 3.4.38
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
 
   '@types/bonjour@3.5.13':
     dependencies:
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
 
   '@types/chai@5.2.2':
     dependencies:
@@ -23395,11 +24486,11 @@ snapshots:
   '@types/connect-history-api-fallback@1.5.4':
     dependencies:
       '@types/express-serve-static-core': 4.19.5
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
 
   '@types/connect@3.4.38':
     dependencies:
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
 
   '@types/cookies@0.9.2':
     dependencies:
@@ -23545,13 +24636,13 @@ snapshots:
 
   '@types/docker-modem@3.0.6':
     dependencies:
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
       '@types/ssh2': 1.15.1
 
   '@types/dockerode@4.0.1':
     dependencies:
       '@types/docker-modem': 3.0.6
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
       '@types/ssh2': 1.15.1
 
   '@types/estree-jsx@1.0.5':
@@ -23562,7 +24653,7 @@ snapshots:
 
   '@types/express-serve-static-core@4.19.5':
     dependencies:
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
       '@types/qs': 6.9.16
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
@@ -23594,7 +24685,7 @@ snapshots:
 
   '@types/http-proxy@1.17.17':
     dependencies:
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
 
   '@types/istanbul-lib-coverage@2.0.6': {}
 
@@ -23624,7 +24715,7 @@ snapshots:
 
   '@types/node-fetch@2.6.13':
     dependencies:
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
       form-data: 4.0.6
 
   '@types/node-unifi@2.5.1(patch_hash=5e6ae51e2a17a7f9729bfa30b0eb3d0842a5810ac6db47603ab4a6efa1ed84c5)':
@@ -23655,18 +24746,10 @@ snapshots:
 
   '@types/prismjs@1.26.6': {}
 
-  '@types/prop-types@15.7.15':
-    optional: true
-
   '@types/qs@6.9.16': {}
 
   '@types/range-parser@1.2.7': {}
 
-  '@types/react-dom@18.3.7(@types/react@18.3.31)':
-    dependencies:
-      '@types/react': 18.3.31
-    optional: true
-
   '@types/react-dom@19.2.3(@types/react@19.2.17)':
     dependencies:
       '@types/react': 19.2.17
@@ -23688,12 +24771,6 @@ snapshots:
       '@types/history': 4.7.11
       '@types/react': 19.2.17
 
-  '@types/react@18.3.31':
-    dependencies:
-      '@types/prop-types': 15.7.15
-      csstype: 3.2.3
-    optional: true
-
   '@types/react@19.2.17':
     dependencies:
       csstype: 3.2.3
@@ -23702,14 +24779,14 @@ snapshots:
 
   '@types/sax@1.2.7':
     dependencies:
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
 
   '@types/semver@7.5.8': {}
 
   '@types/send@0.17.4':
     dependencies:
       '@types/mime': 1.3.5
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
 
   '@types/serve-index@1.9.4':
     dependencies:
@@ -23718,7 +24795,7 @@ snapshots:
   '@types/serve-static@1.15.7':
     dependencies:
       '@types/http-errors': 2.0.4
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
       '@types/send': 0.17.4
 
   '@types/set-cookie-parser@2.4.10':
@@ -23728,15 +24805,15 @@ snapshots:
 
   '@types/sockjs@0.3.36':
     dependencies:
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
 
   '@types/ssh2-streams@0.1.12':
     dependencies:
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
 
   '@types/ssh2@0.5.52':
     dependencies:
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
       '@types/ssh2-streams': 0.1.12
 
   '@types/ssh2@1.15.1':
@@ -23748,7 +24825,7 @@ snapshots:
 
   '@types/stream-buffers@3.0.7':
     dependencies:
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
 
   '@types/triple-beam@1.3.5': {}
 
@@ -23772,7 +24849,7 @@ snapshots:
 
   '@types/xml2js@0.4.14':
     dependencies:
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
 
   '@types/yargs-parser@21.0.3': {}
 
@@ -23780,17 +24857,73 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
-  '@typescript/typescript6@6.0.2':
-    dependencies:
-      '@typescript/old': typescript@6.0.3
+  '@typescript/typescript-aix-ppc64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-darwin-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-darwin-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-freebsd-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-freebsd-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-arm@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-loong64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-mips64el@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-ppc64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-riscv64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-s390x@7.0.2':
+    optional: true
+
+  '@typescript/typescript-linux-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-netbsd-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-netbsd-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-openbsd-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-openbsd-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-sunos-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-win32-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-win32-x64@7.0.2':
+    optional: true
 
   '@ungap/structured-clone@1.3.0': {}
 
-  '@unhead/vue@2.1.15(vue@3.5.35(@typescript/typescript6@6.0.2))':
+  '@unhead/vue@2.1.15(vue@3.5.35(typescript@7.0.2))':
     dependencies:
       hookable: 6.1.1
       unhead: 2.1.15
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
 
   '@upsetjs/venn.js@2.0.0':
     optionalDependencies:
@@ -23828,10 +24961,10 @@ snapshots:
       global: 4.4.0
       is-function: 1.0.2
 
-  '@vitejs/plugin-react@6.0.3(babel-plugin-react-compiler@1.0.0)(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0))':
+  '@vitejs/plugin-react@6.0.3(babel-plugin-react-compiler@1.0.0)(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0))':
     dependencies:
       '@rolldown/pluginutils': 1.0.1
-      vite: 8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0)
+      vite: 8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0)
     optionalDependencies:
       babel-plugin-react-compiler: 1.0.0
 
@@ -23847,7 +24980,7 @@ snapshots:
       obug: 2.1.1
       std-env: 4.0.0
       tinyrainbow: 3.1.0
-      vitest: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1(@noble/hashes@2.0.1))(msw@2.14.6(@types/node@24.13.3)(@typescript/typescript6@6.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0))
+      vitest: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1(@noble/hashes@2.0.1))(msw@2.14.6(@types/node@24.13.3)(typescript@7.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0))
 
   '@vitest/expect@4.1.10':
     dependencies:
@@ -23858,13 +24991,22 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.1.10(msw@2.14.6(@types/node@24.13.3)(@typescript/typescript6@6.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0))':
+  '@vitest/mocker@4.1.10(msw@2.14.6(@types/node@24.13.3)(typescript@7.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0))':
     dependencies:
       '@vitest/spy': 4.1.10
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      msw: 2.14.6(@types/node@24.13.3)(@typescript/typescript6@6.0.2)
+      msw: 2.14.6(@types/node@24.13.3)(typescript@7.0.2)
+      vite: 8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0)
+
+  '@vitest/mocker@4.1.10(msw@2.14.6(@types/node@24.13.3)(typescript@7.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0))':
+    dependencies:
+      '@vitest/spy': 4.1.10
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      msw: 2.14.6(@types/node@24.13.3)(typescript@7.0.2)
       vite: 8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0)
 
   '@vitest/pretty-format@4.1.10':
@@ -23894,7 +25036,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.17
       tinyrainbow: 3.1.0
-      vitest: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1(@noble/hashes@2.0.1))(msw@2.14.6(@types/node@24.13.3)(@typescript/typescript6@6.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0))
+      vitest: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1(@noble/hashes@2.0.1))(msw@2.14.6(@types/node@24.13.3)(typescript@7.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0))
 
   '@vitest/utils@4.1.10':
     dependencies:
@@ -23948,36 +25090,36 @@ snapshots:
       '@vue/shared': 3.5.35
       csstype: 3.2.3
 
-  '@vue/server-renderer@3.5.35(vue@3.5.35(@typescript/typescript6@6.0.2))':
+  '@vue/server-renderer@3.5.35(vue@3.5.35(typescript@7.0.2))':
     dependencies:
       '@vue/compiler-ssr': 3.5.35
       '@vue/shared': 3.5.35
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
 
   '@vue/shared@3.5.35': {}
 
-  '@vueuse/core@10.11.1(vue@3.5.35(@typescript/typescript6@6.0.2))':
+  '@vueuse/core@10.11.1(vue@3.5.35(typescript@7.0.2))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.11.1
-      '@vueuse/shared': 10.11.1(vue@3.5.35(@typescript/typescript6@6.0.2))
-      vue-demi: 0.14.10(vue@3.5.35(@typescript/typescript6@6.0.2))
+      '@vueuse/shared': 10.11.1(vue@3.5.35(typescript@7.0.2))
+      vue-demi: 0.14.10(vue@3.5.35(typescript@7.0.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/core@13.9.0(vue@3.5.35(@typescript/typescript6@6.0.2))':
+  '@vueuse/core@13.9.0(vue@3.5.35(typescript@7.0.2))':
     dependencies:
       '@types/web-bluetooth': 0.0.21
       '@vueuse/metadata': 13.9.0
-      '@vueuse/shared': 13.9.0(vue@3.5.35(@typescript/typescript6@6.0.2))
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      '@vueuse/shared': 13.9.0(vue@3.5.35(typescript@7.0.2))
+      vue: 3.5.35(typescript@7.0.2)
 
-  '@vueuse/integrations@13.9.0(focus-trap@7.8.0)(fuse.js@7.4.2)(nprogress@0.2.0)(vue@3.5.35(@typescript/typescript6@6.0.2))':
+  '@vueuse/integrations@13.9.0(focus-trap@7.8.0)(fuse.js@7.4.2)(nprogress@0.2.0)(vue@3.5.35(typescript@7.0.2))':
     dependencies:
-      '@vueuse/core': 13.9.0(vue@3.5.35(@typescript/typescript6@6.0.2))
-      '@vueuse/shared': 13.9.0(vue@3.5.35(@typescript/typescript6@6.0.2))
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      '@vueuse/core': 13.9.0(vue@3.5.35(typescript@7.0.2))
+      '@vueuse/shared': 13.9.0(vue@3.5.35(typescript@7.0.2))
+      vue: 3.5.35(typescript@7.0.2)
     optionalDependencies:
       focus-trap: 7.8.0
       fuse.js: 7.4.2
@@ -23987,16 +25129,16 @@ snapshots:
 
   '@vueuse/metadata@13.9.0': {}
 
-  '@vueuse/shared@10.11.1(vue@3.5.35(@typescript/typescript6@6.0.2))':
+  '@vueuse/shared@10.11.1(vue@3.5.35(typescript@7.0.2))':
     dependencies:
-      vue-demi: 0.14.10(vue@3.5.35(@typescript/typescript6@6.0.2))
+      vue-demi: 0.14.10(vue@3.5.35(typescript@7.0.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/shared@13.9.0(vue@3.5.35(@typescript/typescript6@6.0.2))':
+  '@vueuse/shared@13.9.0(vue@3.5.35(typescript@7.0.2))':
     dependencies:
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
 
   '@webassemblyjs/ast@1.14.1':
     dependencies:
@@ -24153,11 +25295,11 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       zod: 4.4.3
 
-  ai@7.0.37(zod@4.4.3):
+  ai@7.0.52(zod@4.4.3):
     dependencies:
-      '@ai-sdk/gateway': 4.0.28(zod@4.4.3)
-      '@ai-sdk/provider': 4.0.3
-      '@ai-sdk/provider-utils': 5.0.12(zod@4.4.3)
+      '@ai-sdk/gateway': 4.0.41(zod@4.4.3)
+      '@ai-sdk/provider': 4.0.5
+      '@ai-sdk/provider-utils': 5.0.21(zod@4.4.3)
       zod: 4.4.3
 
   ajv-formats@2.1.1(ajv@8.18.0):
@@ -24306,7 +25448,7 @@ snapshots:
 
   assistant-cloud@0.1.35(ioredis@5.11.1(supports-color@10.2.2)):
     dependencies:
-      assistant-stream: 0.3.26(ioredis@5.11.1(supports-color@10.2.2))
+      assistant-stream: 0.3.33(ioredis@5.11.1(supports-color@10.2.2))
     transitivePeerDependencies:
       - ioredis
       - redis
@@ -24314,7 +25456,15 @@ snapshots:
   assistant-stream@0.3.26(ioredis@5.11.1(supports-color@10.2.2)):
     dependencies:
       '@standard-schema/spec': 1.1.0
-      nanoid: 6.0.0
+      nanoid: 6.0.1
+      secure-json-parse: 4.1.0
+    optionalDependencies:
+      ioredis: 5.11.1(supports-color@10.2.2)
+
+  assistant-stream@0.3.33(ioredis@5.11.1(supports-color@10.2.2)):
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      nanoid: 6.0.1
       secure-json-parse: 4.1.0
     optionalDependencies:
       ioredis: 5.11.1(supports-color@10.2.2)
@@ -24457,8 +25607,6 @@ snapshots:
 
   batch@0.6.1: {}
 
-  bcp-47-match@2.0.3: {}
-
   bcrypt-pbkdf@1.0.2:
     dependencies:
       tweetnacl: 0.14.5
@@ -24470,7 +25618,7 @@ snapshots:
 
   before-after-hook@4.0.0: {}
 
-  better-auth@1.6.15(@opentelemetry/api@1.9.0)(better-sqlite3@12.11.1)(drizzle-kit@0.31.10)(drizzle-orm@0.45.2(@libsql/client-wasm@0.14.0)(@opentelemetry/api@1.9.0)(@types/better-sqlite3@7.6.13)(@types/pg@8.20.0)(better-sqlite3@12.11.1)(gel@2.0.0(supports-color@10.2.2))(kysely@0.29.2)(mysql2@3.22.6(@types/node@24.13.3))(pg@8.22.0)(sql.js@1.14.1))(mysql2@3.22.6(@types/node@24.13.3))(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(pg@8.22.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vitest@4.1.10)(vue@3.5.35(@typescript/typescript6@6.0.2)):
+  better-auth@1.6.15(@opentelemetry/api@1.9.0)(better-sqlite3@12.11.1)(drizzle-kit@0.31.10)(drizzle-orm@0.45.2(@libsql/client-wasm@0.14.0)(@opentelemetry/api@1.9.0)(@types/better-sqlite3@7.6.13)(@types/pg@8.20.0)(better-sqlite3@12.11.1)(gel@2.0.0(supports-color@10.2.2))(kysely@0.29.2)(mysql2@3.22.6(@types/node@24.13.3))(pg@8.22.0)(sql.js@1.14.1))(mysql2@3.22.6(@types/node@24.13.3))(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(pg@8.22.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(solid-js@1.9.14)(vitest@4.1.10)(vue@3.5.35(typescript@7.0.2)):
     dependencies:
       '@better-auth/core': 1.6.15(@better-auth/utils@0.4.1)(@better-fetch/fetch@1.1.21)(@opentelemetry/api@1.9.0)(better-call@1.3.5(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.3.0)
       '@better-auth/drizzle-adapter': 1.6.15(@better-auth/core@1.6.15(@better-auth/utils@0.4.1)(@better-fetch/fetch@1.1.21)(@opentelemetry/api@1.9.0)(better-call@1.3.5(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.3.0))(@better-auth/utils@0.4.1)(drizzle-orm@0.45.2(@libsql/client-wasm@0.14.0)(@opentelemetry/api@1.9.0)(@types/better-sqlite3@7.6.13)(@types/pg@8.20.0)(better-sqlite3@12.11.1)(gel@2.0.0(supports-color@10.2.2))(kysely@0.29.2)(mysql2@3.22.6(@types/node@24.13.3))(pg@8.22.0)(sql.js@1.14.1))
@@ -24494,12 +25642,13 @@ snapshots:
       drizzle-kit: 0.31.10
       drizzle-orm: 0.45.2(@libsql/client-wasm@0.14.0)(@opentelemetry/api@1.9.0)(@types/better-sqlite3@7.6.13)(@types/pg@8.20.0)(better-sqlite3@12.11.1)(gel@2.0.0(supports-color@10.2.2))(kysely@0.29.2)(mysql2@3.22.6(@types/node@24.13.3))(pg@8.22.0)(sql.js@1.14.1)
       mysql2: 3.22.6(@types/node@24.13.3)
-      next: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+      next: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       pg: 8.22.0
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
-      vitest: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1(@noble/hashes@2.0.1))(msw@2.14.6(@types/node@24.13.3)(@typescript/typescript6@6.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0))
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      solid-js: 1.9.14
+      vitest: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1(@noble/hashes@2.0.1))(msw@2.14.6(@types/node@24.13.3)(typescript@7.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0))
+      vue: 3.5.35(typescript@7.0.2)
     transitivePeerDependencies:
       - '@cloudflare/workers-types'
       - '@opentelemetry/api'
@@ -24792,6 +25941,10 @@ snapshots:
 
   ci-info@3.9.0: {}
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   classnames@2.5.1: {}
 
   clean-css@5.3.3:
@@ -24855,6 +26008,18 @@ snapshots:
 
   cluster-key-slot@1.1.2: {}
 
+  cmdk@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-dialog': 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   co-body@6.2.0:
     dependencies:
       '@hapi/bourne': 3.0.0
@@ -24863,6 +26028,16 @@ snapshots:
       raw-body: 2.5.3
       type-is: 1.6.18
 
+  codemirror@6.0.2:
+    dependencies:
+      '@codemirror/autocomplete': 6.20.3
+      '@codemirror/commands': 6.10.3
+      '@codemirror/language': 6.12.3
+      '@codemirror/lint': 6.9.6
+      '@codemirror/search': 6.7.1
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.43.0
+
   collapse-white-space@2.1.0: {}
 
   color-convert@1.9.3:
@@ -25067,23 +26242,23 @@ snapshots:
     dependencies:
       layout-base: 2.0.1
 
-  cosmiconfig@8.3.6(@typescript/typescript6@6.0.2):
+  cosmiconfig@8.3.6(typescript@7.0.2):
     dependencies:
       import-fresh: 3.3.0
       js-yaml: 4.1.1
       parse-json: 5.2.0
       path-type: 4.0.0
     optionalDependencies:
-      typescript: '@typescript/typescript6@6.0.2'
+      typescript: 7.0.2
 
-  cosmiconfig@9.0.0(@typescript/typescript6@6.0.2):
+  cosmiconfig@9.0.0(typescript@7.0.2):
     dependencies:
       env-paths: 2.2.1
       import-fresh: 3.3.0
       js-yaml: 4.1.1
       parse-json: 5.2.0
     optionalDependencies:
-      typescript: '@typescript/typescript6@6.0.2'
+      typescript: 7.0.2
 
   cpu-features@0.0.10:
     dependencies:
@@ -25148,7 +26323,7 @@ snapshots:
       postcss-modules-scope: 3.2.1(postcss@8.5.16)
       postcss-modules-values: 4.0.0(postcss@8.5.16)
       postcss-value-parser: 4.2.0
-      semver: 7.7.4
+      semver: 7.8.5
     optionalDependencies:
       '@rspack/core': 1.7.11
       webpack: 5.107.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(uglify-js@3.19.3)
@@ -25188,8 +26363,6 @@ snapshots:
       domutils: 3.2.2
       nth-check: 2.1.1
 
-  css-selector-parser@3.3.0: {}
-
   css-tree@2.2.1:
     dependencies:
       mdn-data: 2.0.28
@@ -25272,11 +26445,11 @@ snapshots:
 
   csstype@3.2.3: {}
 
-  cva@1.0.0-beta.4(@typescript/typescript6@6.0.2):
+  cva@1.0.0-beta.4(typescript@7.0.2):
     dependencies:
       clsx: 2.1.1
     optionalDependencies:
-      typescript: '@typescript/typescript6@6.0.2'
+      typescript: 7.0.2
 
   cytoscape-cose-bilkent@4.1.0(cytoscape@3.34.0):
     dependencies:
@@ -25477,6 +26650,8 @@ snapshots:
     transitivePeerDependencies:
       - '@noble/hashes'
 
+  date-fns@4.4.0: {}
+
   dayjs@1.11.21: {}
 
   debounce@1.2.1: {}
@@ -25582,8 +26757,6 @@ snapshots:
     dependencies:
       path-type: 4.0.0
 
-  direction@2.0.1: {}
-
   dns-caching@0.2.9:
     dependencies:
       lru-cache: 11.3.5
@@ -25627,9 +26800,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  docusaurus-plugin-image-zoom@3.0.1(@docusaurus/theme-classic@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)):
+  docusaurus-plugin-image-zoom@3.0.1(@docusaurus/theme-classic@3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)):
     dependencies:
-      '@docusaurus/theme-classic': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(@typescript/typescript6@6.0.2)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3)
+      '@docusaurus/theme-classic': 3.10.1(@docusaurus/faster@3.10.1(@docusaurus/types@3.10.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(uglify-js@3.19.3))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(postcss@8.5.16)(uglify-js@3.19.3))(@rspack/core@1.7.11)(@swc/core@1.15.3)(@swc/html@1.15.40)(@types/react@19.2.17)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(debug@4.4.3(supports-color@10.2.2))(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(supports-color@10.2.2)(typescript@7.0.2)(uglify-js@3.19.3)
       medium-zoom: 1.1.0
       validate-peer-dependencies: 2.2.0
 
@@ -25753,6 +26926,18 @@ snapshots:
 
   electron-to-chromium@1.5.361: {}
 
+  embla-carousel-react@8.6.0(react@19.2.7):
+    dependencies:
+      embla-carousel: 8.6.0
+      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
+      react: 19.2.7
+
+  embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0: {}
+
   emoji-regex@10.6.0: {}
 
   emoji-regex@8.0.0: {}
@@ -26039,7 +27224,7 @@ snapshots:
 
   eval@0.1.8:
     dependencies:
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
       require-like: 0.1.2
 
   event-target-shim@5.0.1: {}
@@ -26060,7 +27245,7 @@ snapshots:
     dependencies:
       eventsource-parser: 3.1.0
 
-  execa@10.0.0:
+  execa@10.0.1:
     dependencies:
       '@sindresorhus/merge-streams': 4.0.0
       figures: 6.1.0
@@ -26069,12 +27254,11 @@ snapshots:
       is-plain-obj: 4.1.0
       is-stream: 4.0.1
       npm-run-path: 6.0.0
-      path-key: 4.0.0
       pretty-ms: 9.3.0
       signal-exit: 4.1.0
       strip-final-newline: 4.0.0
       which-command: 0.1.0
-      yoctocolors: 2.1.2
+      yoctocolors: 2.2.0
 
   execa@5.1.1:
     dependencies:
@@ -26455,7 +27639,7 @@ snapshots:
       '@petamoriken/float16': 3.9.3
       debug: 4.4.3(supports-color@10.2.2)
       env-paths: 3.0.0
-      semver: 7.7.4
+      semver: 7.8.5
       shell-quote: 1.8.4
       which: 4.0.0
     transitivePeerDependencies:
@@ -26585,6 +27769,10 @@ snapshots:
 
   globrex@0.1.2: {}
 
+  goober@2.1.19(csstype@3.2.3):
+    dependencies:
+      csstype: 3.2.3
+
   gopd@1.2.0: {}
 
   got@12.6.1:
@@ -26755,24 +27943,6 @@ snapshots:
       '@ungap/structured-clone': 1.3.0
       unist-util-position: 5.0.0
 
-  hast-util-select@6.0.4:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/unist': 3.0.3
-      bcp-47-match: 2.0.3
-      comma-separated-tokens: 2.0.3
-      css-selector-parser: 3.3.0
-      devlop: 1.1.0
-      direction: 2.0.1
-      hast-util-has-property: 3.0.0
-      hast-util-to-string: 3.0.1
-      hast-util-whitespace: 3.0.0
-      nth-check: 2.1.1
-      property-information: 7.0.0
-      space-separated-tokens: 2.0.2
-      unist-util-visit: 5.1.0
-      zwitch: 2.0.4
-
   hast-util-to-estree@3.1.3(supports-color@10.2.2):
     dependencies:
       '@types/estree': 1.0.8
@@ -26828,23 +27998,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  hast-util-to-mdast@10.1.2:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      '@ungap/structured-clone': 1.3.0
-      hast-util-phrasing: 3.0.1
-      hast-util-to-html: 9.0.5
-      hast-util-to-text: 4.0.2
-      hast-util-whitespace: 3.0.0
-      mdast-util-phrasing: 4.1.0
-      mdast-util-to-hast: 13.2.0
-      mdast-util-to-string: 4.0.0
-      rehype-minify-whitespace: 6.0.2
-      trim-trailing-lines: 2.1.0
-      unist-util-position: 5.0.0
-      unist-util-visit: 5.1.0
-
   hast-util-to-parse5@8.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -26855,10 +28008,6 @@ snapshots:
       web-namespaces: 2.0.1
       zwitch: 2.0.4
 
-  hast-util-to-string@3.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-
   hast-util-to-text@4.0.2:
     dependencies:
       '@types/hast': 3.0.4
@@ -27108,7 +28257,7 @@ snapshots:
 
   immediate@3.0.6: {}
 
-  immer@11.1.4: {}
+  immer@10.2.0: {}
 
   immer@11.1.9: {}
 
@@ -27150,6 +28299,11 @@ snapshots:
 
   inline-style-parser@0.2.4: {}
 
+  input-otp@1.4.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
   internmap@1.0.1: {}
 
   internmap@2.0.3: {}
@@ -27369,7 +28523,7 @@ snapshots:
   jest-util@29.7.0:
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
       chalk: 4.1.2
       ci-info: 3.9.0
       graceful-fs: 4.2.11
@@ -27383,7 +28537,7 @@ snapshots:
 
   jest-worker@29.7.0:
     dependencies:
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
       jest-util: 29.7.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
@@ -27734,7 +28888,7 @@ snapshots:
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.7.4
+      semver: 7.8.5
 
   mantine-datatable@9.3.1(@mantine/core@9.4.1(@mantine/hooks@9.4.1(react@19.2.7))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.4.1(react@19.2.7))(clsx@2.1.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
@@ -27781,23 +28935,23 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
-  mcp-handler@1.1.0(@modelcontextprotocol/sdk@1.26.0(supports-color@10.2.2)(zod@4.4.3))(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)):
+  mcp-handler@1.1.0(@modelcontextprotocol/sdk@1.26.0(supports-color@10.2.2)(zod@4.4.3))(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)):
     dependencies:
       '@modelcontextprotocol/sdk': 1.26.0(supports-color@10.2.2)(zod@4.4.3)
       chalk: 5.6.2
       commander: 11.1.0
       redis: 4.7.1
     optionalDependencies:
-      next: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+      next: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
 
-  mcp-handler@1.1.0(@modelcontextprotocol/sdk@1.29.0(supports-color@10.2.2)(zod@4.4.3))(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)):
+  mcp-handler@1.1.0(@modelcontextprotocol/sdk@1.29.0(supports-color@10.2.2)(zod@4.4.3))(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)):
     dependencies:
       '@modelcontextprotocol/sdk': 1.29.0(supports-color@10.2.2)(zod@4.4.3)
       chalk: 5.6.2
       commander: 11.1.0
       redis: 4.7.1
     optionalDependencies:
-      next: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+      next: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
 
   mdast-util-directive@3.1.0(supports-color@10.2.2):
     dependencies:
@@ -28444,7 +29598,7 @@ snapshots:
 
   ms@2.1.3: {}
 
-  msw@2.14.6(@types/node@24.13.3)(@typescript/typescript6@6.0.2):
+  msw@2.14.6(@types/node@24.13.3)(typescript@7.0.2):
     dependencies:
       '@inquirer/confirm': 6.0.13(@types/node@24.13.3)
       '@mswjs/interceptors': 0.41.9
@@ -28465,7 +29619,7 @@ snapshots:
       until-async: 3.0.2
       yargs: 17.7.2
     optionalDependencies:
-      typescript: '@typescript/typescript6@6.0.2'
+      typescript: 7.0.2
     transitivePeerDependencies:
       - '@types/node'
     optional: true
@@ -28514,7 +29668,7 @@ snapshots:
 
   nanoid@5.1.16: {}
 
-  nanoid@6.0.0: {}
+  nanoid@6.0.1: {}
 
   nanostores@1.3.0: {}
 
@@ -28532,57 +29686,63 @@ snapshots:
 
   neverpanic@0.0.8: {}
 
-  next-auth@5.0.0-beta.31(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react@19.2.7):
+  next-auth@5.0.0-beta.31(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react@19.2.7):
     dependencies:
       '@auth/core': 0.41.2
-      next: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+      next: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       react: 19.2.7
 
   next-intl-swc-plugin-extractor@4.13.1: {}
 
-  next-intl@4.13.1(@typescript/typescript6@6.0.2)(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react@19.2.7):
+  next-intl@4.13.1(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(react@19.2.7)(typescript@7.0.2):
     dependencies:
       '@formatjs/intl-localematcher': 0.8.1
       '@parcel/watcher': 2.4.1
       '@swc/core': 1.15.3
       icu-minify: 4.13.1
       negotiator: 1.0.0
-      next: 16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
+      next: 16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
       next-intl-swc-plugin-extractor: 4.13.1
       po-parser: 2.1.1
       react: 19.2.7
       use-intl: 4.13.1(react@19.2.7)
     optionalDependencies:
-      typescript: '@typescript/typescript6@6.0.2'
+      typescript: 7.0.2
     transitivePeerDependencies:
       - '@swc/helpers'
 
-  next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0):
+  next-themes@0.4.6(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
-      '@next/env': 16.2.10
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0):
+    dependencies:
+      '@next/env': 16.3.0-preview.9
       '@swc/helpers': 0.5.15
       baseline-browser-mapping: 2.10.31
       caniuse-lite: 1.0.30001793
-      postcss: 8.4.31
+      postcss: 8.5.10
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
       styled-jsx: 5.1.6(@babel/core@7.29.0(supports-color@10.2.2))(react@19.2.7)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 16.2.10
-      '@next/swc-darwin-x64': 16.2.10
-      '@next/swc-linux-arm64-gnu': 16.2.10
-      '@next/swc-linux-arm64-musl': 16.2.10
-      '@next/swc-linux-x64-gnu': 16.2.10
-      '@next/swc-linux-x64-musl': 16.2.10
-      '@next/swc-win32-arm64-msvc': 16.2.10
-      '@next/swc-win32-x64-msvc': 16.2.10
+      '@next/swc-darwin-arm64': 16.3.0-preview.9
+      '@next/swc-darwin-x64': 16.3.0-preview.9
+      '@next/swc-linux-arm64-gnu': 16.3.0-preview.9
+      '@next/swc-linux-arm64-musl': 16.3.0-preview.9
+      '@next/swc-linux-x64-gnu': 16.3.0-preview.9
+      '@next/swc-linux-x64-musl': 16.3.0-preview.9
+      '@next/swc-win32-arm64-msvc': 16.3.0-preview.9
+      '@next/swc-win32-x64-msvc': 16.3.0-preview.9
       '@opentelemetry/api': 1.9.0
       '@playwright/test': 1.61.1
       babel-plugin-react-compiler: 1.0.0
       sass: 1.101.0
-      sharp: 0.34.5
+      sharp: 0.35.3(@types/node@24.13.3)
     transitivePeerDependencies:
       - '@babel/core'
+      - '@types/node'
       - babel-plugin-macros
 
   no-case@3.0.4:
@@ -28592,7 +29752,7 @@ snapshots:
 
   node-abi@3.67.0:
     dependencies:
-      semver: 7.7.4
+      semver: 7.8.5
 
   node-addon-api@7.1.1: {}
 
@@ -28625,13 +29785,13 @@ snapshots:
   normalize-package-data@6.0.2:
     dependencies:
       hosted-git-info: 7.0.2
-      semver: 7.7.4
+      semver: 7.8.5
       validate-npm-package-license: 3.0.4
 
   normalize-package-data@8.0.0:
     dependencies:
       hosted-git-info: 9.0.2
-      semver: 7.7.4
+      semver: 7.8.5
       validate-npm-package-license: 3.0.4
 
   normalize-path@3.0.0: {}
@@ -28865,7 +30025,7 @@ snapshots:
       got: 12.6.1
       registry-auth-token: 5.0.2
       registry-url: 6.0.1
-      semver: 7.7.4
+      semver: 7.8.5
 
   package-manager-detector@1.6.0: {}
 
@@ -29034,6 +30194,8 @@ snapshots:
 
   picomatch@2.3.1: {}
 
+  picomatch@4.0.4: {}
+
   picomatch@4.0.5: {}
 
   pify@3.0.0: {}
@@ -29092,6 +30254,8 @@ snapshots:
 
   po-parser@2.1.1: {}
 
+  pocketbase@0.26.9: {}
+
   points-on-curve@0.2.0: {}
 
   points-on-path@0.2.1:
@@ -29246,12 +30410,12 @@ snapshots:
       '@csstools/utilities': 2.0.0(postcss@8.5.16)
       postcss: 8.5.16
 
-  postcss-loader@7.3.4(@typescript/typescript6@6.0.2)(postcss@8.5.16)(webpack@5.107.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(uglify-js@3.19.3)):
+  postcss-loader@7.3.4(postcss@8.5.16)(typescript@7.0.2)(webpack@5.107.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(uglify-js@3.19.3)):
     dependencies:
-      cosmiconfig: 8.3.6(@typescript/typescript6@6.0.2)
+      cosmiconfig: 8.3.6(typescript@7.0.2)
       jiti: 1.21.7
       postcss: 8.5.16
-      semver: 7.7.4
+      semver: 7.8.5
       webpack: 5.107.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(uglify-js@3.19.3)
     transitivePeerDependencies:
       - typescript
@@ -29562,7 +30726,7 @@ snapshots:
     dependencies:
       postcss: 8.5.16
 
-  postcss@8.4.31:
+  postcss@8.5.10:
     dependencies:
       nanoid: 3.3.12
       picocolors: 1.1.1
@@ -29784,7 +30948,7 @@ snapshots:
       '@protobufjs/path': 1.1.2
       '@protobufjs/pool': 1.1.0
       '@protobufjs/utf8': 1.1.0
-      '@types/node': 24.13.2
+      '@types/node': 24.13.3
       long: 5.3.2
 
   proxmox-api@1.1.1:
@@ -29905,20 +31069,20 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  radix-vue@1.9.17(vue@3.5.35(@typescript/typescript6@6.0.2)):
+  radix-vue@1.9.17(vue@3.5.35(typescript@7.0.2)):
     dependencies:
       '@floating-ui/dom': 1.7.6
-      '@floating-ui/vue': 1.1.11(vue@3.5.35(@typescript/typescript6@6.0.2))
+      '@floating-ui/vue': 1.1.11(vue@3.5.35(typescript@7.0.2))
       '@internationalized/date': 3.12.2
       '@internationalized/number': 3.6.7
-      '@tanstack/vue-virtual': 3.13.28(vue@3.5.35(@typescript/typescript6@6.0.2))
-      '@vueuse/core': 10.11.1(vue@3.5.35(@typescript/typescript6@6.0.2))
-      '@vueuse/shared': 10.11.1(vue@3.5.35(@typescript/typescript6@6.0.2))
+      '@tanstack/vue-virtual': 3.13.28(vue@3.5.35(typescript@7.0.2))
+      '@vueuse/core': 10.11.1(vue@3.5.35(typescript@7.0.2))
+      '@vueuse/shared': 10.11.1(vue@3.5.35(typescript@7.0.2))
       aria-hidden: 1.2.6
       defu: 6.1.7
       fast-deep-equal: 3.1.3
-      nanoid: 6.0.0
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      nanoid: 6.0.1
+      vue: 3.5.35(typescript@7.0.2)
     transitivePeerDependencies:
       - '@vue/composition-api'
 
@@ -29955,6 +31119,14 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
+  react-day-picker@10.0.1(@types/react@19.2.17)(react@19.2.7):
+    dependencies:
+      '@date-fns/tz': 1.5.0
+      date-fns: 4.4.0
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   react-dom@19.2.7(react@19.2.7):
     dependencies:
       react: 19.2.7
@@ -29979,16 +31151,6 @@ snapshots:
     dependencies:
       react: 19.2.7
 
-  react-jsx-parser@2.4.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
-    dependencies:
-      acorn: 8.16.0
-      acorn-jsx: 5.3.2(acorn@8.16.0)
-      react: 19.2.7
-      react-dom: 19.2.7(react@19.2.7)
-    optionalDependencies:
-      '@types/react': 18.3.31
-      '@types/react-dom': 18.3.7(@types/react@18.3.31)
-
   react-loadable-ssr-addon-v5-slorber@1.0.3(@docusaurus/react-loadable@6.0.0(react@19.2.7))(webpack@5.107.1(@swc/core@1.15.3)(@swc/html@1.15.40)(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.16))(csso@5.0.5)(esbuild@0.28.1)(html-minifier-terser@7.2.0)(lightningcss@1.32.0)(postcss@8.5.16)(uglify-js@3.19.3)):
     dependencies:
       '@babel/runtime': 7.29.7
@@ -30054,6 +31216,11 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
+  react-resizable-panels@4.12.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
   react-router-config@5.1.1(react-router@5.3.4(react@19.2.7))(react@19.2.7):
     dependencies:
       '@babel/runtime': 7.29.7
@@ -30132,14 +31299,14 @@ snapshots:
     dependencies:
       find-up-simple: 1.0.1
       read-pkg: 10.0.0
-      type-fest: 5.6.0
+      type-fest: 5.7.0
 
   read-pkg@10.0.0:
     dependencies:
       '@types/normalize-package-data': 2.4.4
       normalize-package-data: 8.0.0
       parse-json: 8.3.0
-      type-fest: 5.6.0
+      type-fest: 5.7.0
       unicorn-magic: 0.3.0
 
   read-pkg@9.0.1:
@@ -30186,6 +31353,26 @@ snapshots:
 
   real-require@0.2.0: {}
 
+  recharts@3.8.0(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react-is@19.2.7)(react@19.2.7)(redux@5.0.1):
+    dependencies:
+      '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@19.2.17)(react@19.2.7)(redux@5.0.1))(react@19.2.7)
+      clsx: 2.1.1
+      decimal.js-light: 2.5.1
+      es-toolkit: 1.46.1
+      eventemitter3: 5.0.4
+      immer: 10.2.0
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      react-is: 19.2.7
+      react-redux: 9.2.0(@types/react@19.2.17)(react@19.2.7)(redux@5.0.1)
+      reselect: 5.1.1
+      tiny-invariant: 1.3.3
+      use-sync-external-store: 1.6.0(react@19.2.7)
+      victory-vendor: 37.3.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - redux
+
   recharts@3.9.1(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react-is@19.2.7)(react@19.2.7)(redux@5.0.1):
     dependencies:
       '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@19.2.17)(react@19.2.7)(redux@5.0.1))(react@19.2.7)
@@ -30301,11 +31488,6 @@ snapshots:
       '@types/hast': 3.0.4
       hast-util-format: 1.1.0
 
-  rehype-minify-whitespace@6.0.2:
-    dependencies:
-      '@types/hast': 3.0.4
-      hast-util-minify-whitespace: 1.0.1
-
   rehype-parse@9.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -30326,14 +31508,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  rehype-remark@10.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      hast-util-to-mdast: 10.1.2
-      unified: 11.0.5
-      vfile: 6.0.3
-
   rehype-sanitize@6.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -30610,15 +31784,15 @@ snapshots:
       '@peculiar/x509': 1.14.3
       pkijs: 3.4.0
 
-  semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2):
+  semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2):
     dependencies:
-      '@semantic-release/commit-analyzer': 13.0.1(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(supports-color@10.2.2)
+      '@semantic-release/commit-analyzer': 13.0.1(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))(supports-color@10.2.2)
       '@semantic-release/error': 4.0.0
-      '@semantic-release/github': 12.0.9(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(supports-color@10.2.2)
-      '@semantic-release/npm': 13.1.5(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))
-      '@semantic-release/release-notes-generator': 14.1.1(semantic-release@25.0.5(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(supports-color@10.2.2)
+      '@semantic-release/github': 12.0.9(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))(supports-color@10.2.2)
+      '@semantic-release/npm': 13.1.5(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))
+      '@semantic-release/release-notes-generator': 14.1.1(semantic-release@25.0.5(supports-color@10.2.2)(typescript@7.0.2))(supports-color@10.2.2)
       aggregate-error: 5.0.0
-      cosmiconfig: 9.0.0(@typescript/typescript6@6.0.2)
+      cosmiconfig: 9.0.0(typescript@7.0.2)
       debug: 4.4.3(supports-color@10.2.2)
       env-ci: 11.2.0
       execa: 9.5.2
@@ -30646,7 +31820,7 @@ snapshots:
 
   semver-diff@4.0.0:
     dependencies:
-      semver: 7.7.4
+      semver: 7.8.5
 
   semver-parser@4.2.1: {}
 
@@ -30656,6 +31830,8 @@ snapshots:
 
   semver@7.7.4: {}
 
+  semver@7.8.5: {}
+
   send@0.19.2(supports-color@10.2.2):
     dependencies:
       debug: 2.6.9(supports-color@10.2.2)
@@ -30694,6 +31870,12 @@ snapshots:
     dependencies:
       randombytes: 2.1.0
 
+  seroval-plugins@1.5.6(seroval@1.5.6):
+    dependencies:
+      seroval: 1.5.6
+
+  seroval@1.5.6: {}
+
   serve-handler@6.1.7:
     dependencies:
       bytes: 3.0.0
@@ -30757,36 +31939,38 @@ snapshots:
 
   shallowequal@1.1.0: {}
 
-  sharp@0.34.5:
+  sharp@0.35.3(@types/node@24.13.3):
     dependencies:
-      '@img/colour': 1.0.0
+      '@img/colour': 1.1.0
       detect-libc: 2.1.2
-      semver: 7.7.4
+      semver: 7.8.5
     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
+      '@img/sharp-darwin-arm64': 0.35.3
+      '@img/sharp-darwin-x64': 0.35.3
+      '@img/sharp-freebsd-wasm32': 0.35.3
+      '@img/sharp-libvips-darwin-arm64': 1.3.2
+      '@img/sharp-libvips-darwin-x64': 1.3.2
+      '@img/sharp-libvips-linux-arm': 1.3.2
+      '@img/sharp-libvips-linux-arm64': 1.3.2
+      '@img/sharp-libvips-linux-ppc64': 1.3.2
+      '@img/sharp-libvips-linux-riscv64': 1.3.2
+      '@img/sharp-libvips-linux-s390x': 1.3.2
+      '@img/sharp-libvips-linux-x64': 1.3.2
+      '@img/sharp-libvips-linuxmusl-arm64': 1.3.2
+      '@img/sharp-libvips-linuxmusl-x64': 1.3.2
+      '@img/sharp-linux-arm': 0.35.3
+      '@img/sharp-linux-arm64': 0.35.3
+      '@img/sharp-linux-ppc64': 0.35.3
+      '@img/sharp-linux-riscv64': 0.35.3
+      '@img/sharp-linux-s390x': 0.35.3
+      '@img/sharp-linux-x64': 0.35.3
+      '@img/sharp-linuxmusl-arm64': 0.35.3
+      '@img/sharp-linuxmusl-x64': 0.35.3
+      '@img/sharp-webcontainers-wasm32': 0.35.3
+      '@img/sharp-win32-arm64': 0.35.3
+      '@img/sharp-win32-ia32': 0.35.3
+      '@img/sharp-win32-x64': 0.35.3
+      '@types/node': 24.13.3
     optional: true
 
   shebang-command@2.0.0:
@@ -30900,10 +32084,21 @@ snapshots:
       ip-address: 9.0.5
       smart-buffer: 4.2.0
 
+  solid-js@1.9.14:
+    dependencies:
+      csstype: 3.2.3
+      seroval: 1.5.6
+      seroval-plugins: 1.5.6(seroval@1.5.6)
+
   sonic-boom@4.2.1:
     dependencies:
       atomic-sleep: 1.0.0
 
+  sonner@2.0.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
   sort-css-media-queries@2.2.0: {}
 
   source-map-js@1.2.1: {}
@@ -31180,15 +32375,15 @@ snapshots:
 
   swiper@14.0.5: {}
 
-  swr@2.4.2(react@19.2.7):
+  swr@2.5.0(react@19.2.7):
     dependencies:
       dequal: 2.0.3
       react: 19.2.7
       use-sync-external-store: 1.6.0(react@19.2.7)
 
-  swrv@1.2.0(vue@3.5.35(@typescript/typescript6@6.0.2)):
+  swrv@1.2.0(vue@3.5.35(typescript@7.0.2)):
     dependencies:
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
 
   symbol-tree@3.2.4: {}
 
@@ -31198,6 +32393,8 @@ snapshots:
 
   tailwind-merge@3.5.0: {}
 
+  tailwind-merge@3.6.0: {}
+
   tailwindcss@4.3.2: {}
 
   tapable@2.3.3: {}
@@ -31403,37 +32600,35 @@ snapshots:
 
   trim-lines@3.0.1: {}
 
-  trim-trailing-lines@2.1.0: {}
-
   triple-beam@1.4.1: {}
 
   trough@2.2.0: {}
 
-  trpc-to-mcp@1.3.2(20caeb9169922dd2adb62d9d2fa0352f):
+  trpc-to-mcp@1.3.2(09f4f932022b61bbb1db30a9d75546c7):
     dependencies:
       '@modelcontextprotocol/sdk': 1.29.0(supports-color@10.2.2)(zod@4.4.3)
-      '@trpc/server': 11.18.0(@typescript/typescript6@6.0.2)
-      better-auth: 1.6.15(@opentelemetry/api@1.9.0)(better-sqlite3@12.11.1)(drizzle-kit@0.31.10)(drizzle-orm@0.45.2(@libsql/client-wasm@0.14.0)(@opentelemetry/api@1.9.0)(@types/better-sqlite3@7.6.13)(@types/pg@8.20.0)(better-sqlite3@12.11.1)(gel@2.0.0(supports-color@10.2.2))(kysely@0.29.2)(mysql2@3.22.6(@types/node@24.13.3))(pg@8.22.0)(sql.js@1.14.1))(mysql2@3.22.6(@types/node@24.13.3))(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(pg@8.22.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vitest@4.1.10)(vue@3.5.35(@typescript/typescript6@6.0.2))
-      mcp-handler: 1.1.0(@modelcontextprotocol/sdk@1.26.0(supports-color@10.2.2)(zod@4.4.3))(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))
+      '@trpc/server': 11.18.0(typescript@7.0.2)
+      better-auth: 1.6.15(@opentelemetry/api@1.9.0)(better-sqlite3@12.11.1)(drizzle-kit@0.31.10)(drizzle-orm@0.45.2(@libsql/client-wasm@0.14.0)(@opentelemetry/api@1.9.0)(@types/better-sqlite3@7.6.13)(@types/pg@8.20.0)(better-sqlite3@12.11.1)(gel@2.0.0(supports-color@10.2.2))(kysely@0.29.2)(mysql2@3.22.6(@types/node@24.13.3))(pg@8.22.0)(sql.js@1.14.1))(mysql2@3.22.6(@types/node@24.13.3))(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(pg@8.22.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(solid-js@1.9.14)(vitest@4.1.10)(vue@3.5.35(typescript@7.0.2))
+      mcp-handler: 1.1.0(@modelcontextprotocol/sdk@1.26.0(supports-color@10.2.2)(zod@4.4.3))(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))
       zod: 4.4.3
     transitivePeerDependencies:
       - '@cfworker/json-schema'
       - supports-color
 
-  trpc-to-mcp@1.3.2(6bd31c056f397ffcf9e77883340c3ff9):
+  trpc-to-mcp@1.3.2(7c45d4095abf7cef4938a6fc2cc62863):
     dependencies:
       '@modelcontextprotocol/sdk': 1.29.0(supports-color@10.2.2)(zod@4.4.3)
-      '@trpc/server': 11.18.0(@typescript/typescript6@6.0.2)
-      better-auth: 1.6.15(@opentelemetry/api@1.9.0)(better-sqlite3@12.11.1)(drizzle-kit@0.31.10)(drizzle-orm@0.45.2(@libsql/client-wasm@0.14.0)(@opentelemetry/api@1.9.0)(@types/better-sqlite3@7.6.13)(@types/pg@8.20.0)(better-sqlite3@12.11.1)(gel@2.0.0(supports-color@10.2.2))(kysely@0.29.2)(mysql2@3.22.6(@types/node@24.13.3))(pg@8.22.0)(sql.js@1.14.1))(mysql2@3.22.6(@types/node@24.13.3))(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(pg@8.22.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vitest@4.1.10)(vue@3.5.35(@typescript/typescript6@6.0.2))
-      mcp-handler: 1.1.0(@modelcontextprotocol/sdk@1.29.0(supports-color@10.2.2)(zod@4.4.3))(next@16.2.10(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))
+      '@trpc/server': 11.18.0(typescript@7.0.2)
+      better-auth: 1.6.15(@opentelemetry/api@1.9.0)(better-sqlite3@12.11.1)(drizzle-kit@0.31.10)(drizzle-orm@0.45.2(@libsql/client-wasm@0.14.0)(@opentelemetry/api@1.9.0)(@types/better-sqlite3@7.6.13)(@types/pg@8.20.0)(better-sqlite3@12.11.1)(gel@2.0.0(supports-color@10.2.2))(kysely@0.29.2)(mysql2@3.22.6(@types/node@24.13.3))(pg@8.22.0)(sql.js@1.14.1))(mysql2@3.22.6(@types/node@24.13.3))(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))(pg@8.22.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(solid-js@1.9.14)(vitest@4.1.10)(vue@3.5.35(typescript@7.0.2))
+      mcp-handler: 1.1.0(@modelcontextprotocol/sdk@1.29.0(supports-color@10.2.2)(zod@4.4.3))(next@16.3.0-preview.9(@babel/core@7.29.0(supports-color@10.2.2))(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(@types/node@24.13.3)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0))
       zod: 4.4.3
     transitivePeerDependencies:
       - '@cfworker/json-schema'
       - supports-color
 
-  trpc-to-openapi@3.3.0(patch_hash=2ca3c16af0fcca0c736697ad4fe553a14f794524fa9ce0d5c3e8ee4aea76090c)(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(zod-openapi@5.4.6(zod@4.4.3))(zod@4.4.3):
+  trpc-to-openapi@3.3.0(patch_hash=2ca3c16af0fcca0c736697ad4fe553a14f794524fa9ce0d5c3e8ee4aea76090c)(@trpc/server@11.18.0(typescript@7.0.2))(zod-openapi@5.4.6(zod@4.4.3))(zod@4.4.3):
     dependencies:
-      '@trpc/server': 11.18.0(@typescript/typescript6@6.0.2)
+      '@trpc/server': 11.18.0(typescript@7.0.2)
       co-body: 6.2.0
       h3: 1.15.11
       openapi3-ts: 4.4.0
@@ -31450,9 +32645,9 @@ snapshots:
 
   ts-dedent@2.2.0: {}
 
-  tsconfck@3.1.3(@typescript/typescript6@6.0.2):
+  tsconfck@3.1.3(typescript@7.0.2):
     optionalDependencies:
-      typescript: '@typescript/typescript6@6.0.2'
+      typescript: 7.0.2
 
   tsdav@2.3.0(supports-color@10.2.2):
     dependencies:
@@ -31531,7 +32726,28 @@ snapshots:
     dependencies:
       is-typedarray: 1.0.0
 
-  typescript@6.0.3: {}
+  typescript@7.0.2:
+    optionalDependencies:
+      '@typescript/typescript-aix-ppc64': 7.0.2
+      '@typescript/typescript-darwin-arm64': 7.0.2
+      '@typescript/typescript-darwin-x64': 7.0.2
+      '@typescript/typescript-freebsd-arm64': 7.0.2
+      '@typescript/typescript-freebsd-x64': 7.0.2
+      '@typescript/typescript-linux-arm': 7.0.2
+      '@typescript/typescript-linux-arm64': 7.0.2
+      '@typescript/typescript-linux-loong64': 7.0.2
+      '@typescript/typescript-linux-mips64el': 7.0.2
+      '@typescript/typescript-linux-ppc64': 7.0.2
+      '@typescript/typescript-linux-riscv64': 7.0.2
+      '@typescript/typescript-linux-s390x': 7.0.2
+      '@typescript/typescript-linux-x64': 7.0.2
+      '@typescript/typescript-netbsd-arm64': 7.0.2
+      '@typescript/typescript-netbsd-x64': 7.0.2
+      '@typescript/typescript-openbsd-arm64': 7.0.2
+      '@typescript/typescript-openbsd-x64': 7.0.2
+      '@typescript/typescript-sunos-x64': 7.0.2
+      '@typescript/typescript-win32-arm64': 7.0.2
+      '@typescript/typescript-win32-x64': 7.0.2
 
   ufo@1.6.4: {}
 
@@ -31628,12 +32844,6 @@ snapshots:
       unist-util-is: 4.1.0
       unist-util-visit-parents: 3.1.1
 
-  unist-util-visit@5.0.0:
-    dependencies:
-      '@types/unist': 3.0.3
-      unist-util-is: 6.0.0
-      unist-util-visit-parents: 6.0.1
-
   unist-util-visit@5.1.0:
     dependencies:
       '@types/unist': 3.0.3
@@ -31833,16 +33043,34 @@ snapshots:
     dependencies:
       global: 4.4.0
 
-  vite-tsconfig-paths@6.1.1(@typescript/typescript6@6.0.2)(supports-color@10.2.2)(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0)):
+  vite-tsconfig-paths@6.1.1(supports-color@10.2.2)(typescript@7.0.2)(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0)):
     dependencies:
       debug: 4.4.3(supports-color@10.2.2)
       globrex: 0.1.2
-      tsconfck: 3.1.3(@typescript/typescript6@6.0.2)
-      vite: 8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0)
+      tsconfck: 3.1.3(typescript@7.0.2)
+      vite: 8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
+  vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0):
+    dependencies:
+      lightningcss: 1.32.0
+      picomatch: 4.0.5
+      postcss: 8.5.16
+      rolldown: 1.1.4
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      '@types/node': 24.13.3
+      esbuild: 0.28.1
+      fsevents: 2.3.3
+      jiti: 2.7.0
+      sass: 1.101.0
+      sugarss: 5.0.0(postcss@8.5.16)
+      terser: 5.46.1
+      tsx: 4.20.4
+      yaml: 2.9.0
+
   vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0):
     dependencies:
       lightningcss: 1.32.0
@@ -31861,10 +33089,10 @@ snapshots:
       tsx: 4.21.0
       yaml: 2.9.0
 
-  vitest@4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1(@noble/hashes@2.0.1))(msw@2.14.6(@types/node@24.13.3)(@typescript/typescript6@6.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0)):
+  vitest@4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1(@noble/hashes@2.0.1))(msw@2.14.6(@types/node@24.13.3)(typescript@7.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0)):
     dependencies:
       '@vitest/expect': 4.1.10
-      '@vitest/mocker': 4.1.10(msw@2.14.6(@types/node@24.13.3)(@typescript/typescript6@6.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0))
+      '@vitest/mocker': 4.1.10(msw@2.14.6(@types/node@24.13.3)(typescript@7.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0))
       '@vitest/pretty-format': 4.1.10
       '@vitest/runner': 4.1.10
       '@vitest/snapshot': 4.1.10
@@ -31875,7 +33103,38 @@ snapshots:
       magic-string: 0.30.21
       obug: 2.1.1
       pathe: 2.0.3
-      picomatch: 4.0.5
+      picomatch: 4.0.4
+      std-env: 4.0.0
+      tinybench: 2.9.0
+      tinyexec: 1.0.2
+      tinyglobby: 0.2.17
+      tinyrainbow: 3.1.0
+      vite: 8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.20.4)(yaml@2.9.0)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@opentelemetry/api': 1.9.0
+      '@types/node': 24.13.3
+      '@vitest/coverage-v8': 4.1.10(vitest@4.1.10)
+      '@vitest/ui': 4.1.10(vitest@4.1.10)
+      jsdom: 29.1.1(@noble/hashes@2.0.1)
+    transitivePeerDependencies:
+      - msw
+
+  vitest@4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1(@noble/hashes@2.0.1))(msw@2.14.6(@types/node@24.13.3)(typescript@7.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0)):
+    dependencies:
+      '@vitest/expect': 4.1.10
+      '@vitest/mocker': 4.1.10(msw@2.14.6(@types/node@24.13.3)(typescript@7.0.2))(vite@8.1.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(sugarss@5.0.0(postcss@8.5.16))(terser@5.46.1)(tsx@4.21.0)(yaml@2.9.0))
+      '@vitest/pretty-format': 4.1.10
+      '@vitest/runner': 4.1.10
+      '@vitest/snapshot': 4.1.10
+      '@vitest/spy': 4.1.10
+      '@vitest/utils': 4.1.10
+      es-module-lexer: 2.1.0
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      obug: 2.1.1
+      pathe: 2.0.3
+      picomatch: 4.0.4
       std-env: 4.0.0
       tinybench: 2.9.0
       tinyexec: 1.0.2
@@ -31894,21 +33153,21 @@ snapshots:
 
   vue-component-type-helpers@3.3.4: {}
 
-  vue-demi@0.14.10(vue@3.5.35(@typescript/typescript6@6.0.2)):
+  vue-demi@0.14.10(vue@3.5.35(typescript@7.0.2)):
     dependencies:
-      vue: 3.5.35(@typescript/typescript6@6.0.2)
+      vue: 3.5.35(typescript@7.0.2)
 
   vue-sonner@1.3.2: {}
 
-  vue@3.5.35(@typescript/typescript6@6.0.2):
+  vue@3.5.35(typescript@7.0.2):
     dependencies:
       '@vue/compiler-dom': 3.5.35
       '@vue/compiler-sfc': 3.5.35
       '@vue/runtime-dom': 3.5.35
-      '@vue/server-renderer': 3.5.35(vue@3.5.35(@typescript/typescript6@6.0.2))
+      '@vue/server-renderer': 3.5.35(vue@3.5.35(typescript@7.0.2))
       '@vue/shared': 3.5.35
     optionalDependencies:
-      typescript: '@typescript/typescript6@6.0.2'
+      typescript: 7.0.2
 
   w3c-keyname@2.2.8: {}
 
@@ -32253,7 +33512,7 @@ snapshots:
       y18n: 5.0.8
       yargs-parser: 22.0.0
 
-  yjs@13.6.31:
+  yjs@13.6.32:
     dependencies:
       lib0: 0.2.117
 
@@ -32263,7 +33522,7 @@ snapshots:
 
   yoctocolors@2.1.1: {}
 
-  yoctocolors@2.1.2: {}
+  yoctocolors@2.2.0: {}
 
   zip-stream@6.0.1:
     dependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 2c4697860..70cc23136 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -3,20 +3,33 @@ packages:
   - packages/*
   - tooling/*
 catalog:
+  "@babel/parser": ^7.29.7
+  "@codemirror/autocomplete": ^6.20.3
+  "@codemirror/commands": ^6.10.3
+  "@codemirror/lang-css": ^6.3.1
+  "@codemirror/lang-javascript": ^6.2.5
+  "@codemirror/lang-json": ^6.0.2
+  "@codemirror/lint": ^6.9.6
+  "@codemirror/state": ^6.6.0
+  "@codemirror/theme-one-dark": ^6.1.3
+  "@codemirror/view": ^6.43.0
   "@auth/core": ^0.41.2
   "@auth/drizzle-adapter": ^1.11.2
   "@ctrl/deluge": ^8.0.0
   "@ctrl/qbittorrent": ^9.14.0
   "@ctrl/transmission": ^7.4.0
+  "@dnd-kit/abstract": 0.5.0
+  "@dnd-kit/collision": 0.5.0
   "@dnd-kit/core": ^6.3.1
+  "@dnd-kit/dom": 0.5.0
   "@dnd-kit/modifiers": ^9.0.0
+  "@dnd-kit/react": 0.5.0
   "@dnd-kit/sortable": ^10.0.0
   "@dnd-kit/utilities": ^3.2.2
   "@drizzle-team/brocli": ^0.12.0
   "@extractus/feed-extractor": 7.2.1
-  "@gfazioli/mantine-onboarding-tour": ^4.0.6
+  "@gfazioli/mantine-onboarding-tour": ^4.0.7
   "@gitbeaker/rest": ^43.8.0
-  "@homarr/gridstack": ^1.12.0
   "@homarr/node-unifi": ^2.6.0
   "@immich/sdk": ^3.0.2
   "@jellyfin/sdk": ^0.13.0
@@ -33,10 +46,10 @@ catalog:
   "@mantine/notifications": ^9.4.1
   "@mantine/spotlight": ^9.4.1
   "@mantine/tiptap": ^9.4.1
-  "@next/eslint-plugin-next": 16.2.10
   "@octokit/auth-app": ^8.2.0
   "@paralleldrive/cuid2": ^3.3.0
   "@playwright/test": ^1.61.1
+  pocketbase: ^0.26.2
   "@semantic-release/changelog": ^7.0.0
   "@semantic-release/commit-analyzer": ^13.0.1
   "@semantic-release/git": ^11.0.1
@@ -45,11 +58,10 @@ catalog:
   "@semantic-release/release-notes-generator": ^14.1.1
   "@t3-oss/env-nextjs": ^0.13.11
   "@tabler/icons-react": ^3.44.0
-  "@tanstack/query-async-storage-persister": ^5.101.2
+  "@tanstack/react-devtools": ^0.10.8
   "@tanstack/react-query": ^5.101.2
   "@tanstack/react-query-devtools": ^5.101.2
   "@tanstack/react-query-next-experimental": ^5.101.2
-  "@tanstack/react-query-persist-client": ^5.101.2
   "@testcontainers/mysql": ^12.0.4
   "@testcontainers/postgresql": ^12.0.4
   "@testcontainers/redis": ^12.0.4
@@ -90,8 +102,10 @@ catalog:
   "@types/react": 19.2.17
   "@types/react-dom": 19.2.3
   "@scalar/api-reference-react": ^0.9.54
+  "@shadcn/react": ^0.2.1
   "@types/video.js": ^7.3.58
   "@types/ws": ^8.18.1
+  "@uiw/react-codemirror": ^4.25.11
   "@types/xml2js": ^0.4.14
   posthog-js: ^1.399.1
   posthog-node: ^5.40.0
@@ -102,6 +116,8 @@ catalog:
   "@xterm/addon-fit": 0.11.0
   "@xterm/xterm": ^6.0.0
   adm-zip: 0.5.18
+  acorn: ^8.16.0
+  acorn-jsx: ^5.3.2
   jszip: ^3.10.1
   sql.js: ^1.14.1
   babel-plugin-react-compiler: ^1.0.0
@@ -109,6 +125,7 @@ catalog:
   better-sqlite3: ^12.11.1
   chroma-js: ^3.2.0
   clsx: ^2.1.1
+  codemirror: ^6.0.2
   concurrently: ^10.0.3
   conventional-changelog-conventionalcommits: ^10.2.0
   cookie: 2.0.1
@@ -116,7 +133,9 @@ catalog:
   croner: 10.0.1
   cross-env: ^10.1.0
   crypto-js: ^4.2.0
+  cmdk: ^1.1.1
   dayjs: ^1.11.21
+  date-fns: ^4.4.0
   deepmerge: 4.3.1
   dns-caching: ^0.2.9
   dockerode: ^5.0.1
@@ -125,12 +144,14 @@ catalog:
   drizzle-kit: ^0.31.10
   drizzle-orm: ^0.45.2
   drizzle-zod: ^0.8.3
+  embla-carousel-react: ^8.6.0
   esbuild: ^0.28.0
   fast-xml-parser: ^5.9.3
   fastify: ^5.9.0
   flag-icons: ^7.5.0
   glob: ^13.0.6
   ical.js: ^2.2.1
+  input-otp: ^1.4.2
   ioredis: 5.11.1
   isomorphic-dompurify: ^3.18.0
   jotai: ^2.20.1
@@ -147,9 +168,10 @@ catalog:
   mcp-handler: ^1.1.0
   maria2: ^0.4.1
   mysql2: 3.22.6
-  next: 16.2.10
+  next: 16.3.0-preview.9
   next-auth: 5.0.0-beta.31
   next-intl: 4.13.1
+  next-themes: ^0.4.6
   node-loader: ^2.1.0
   octokit: ^5.0.5
   oxfmt: ^0.58.0
@@ -159,16 +181,18 @@ catalog:
   prismjs: ^1.30.0
   proxmox-api: 1.1.1
   react: 19.2.7
+  react-day-picker: ^10.0.1
   react-dom: 19.2.7
   react-error-boundary: ^6.1.2
-  react-jsx-parser: ^2.4.1
   react-markdown: ^10.1.0
   react-quill-new: ^3.8.3
   react-simple-code-editor: ^0.14.1
-  recharts: ^3.9.1
+  react-resizable-panels: ^4.12.2
+  recharts: ^3.8.0
   sass: ^1.101.0
   semantic-release: ^25.0.5
   semver-parser: ^4.2.1
+  sonner: ^2.0.7
   superjson: 2.2.6
   svgson: ^5.3.1
   testcontainers: ^12.0.4
@@ -178,7 +202,7 @@ catalog:
   tsdav: ^2.3.0
   tsx: 4.20.4
   turbo: ^2.10.4
-  typescript: "npm:@typescript/typescript6@^6.0.2"
+  typescript: 7.0.2
   vite: ^8.1.4
   undici: 7.28.0
   use-deep-compare-effect: ^1.8.1
@@ -192,12 +216,12 @@ catalog:
   zod: ^4.4.3
   zod-form-data: ^3.0.2
   zod-validation-error: ^5.0.0
-  "@assistant-ui/react": ^0.14.27
-  "@assistant-ui/react-ai-sdk": ^1.3.41
+  "@assistant-ui/react": 0.14.27
+  "@assistant-ui/react-ai-sdk": 1.3.41
   "@assistant-ui/react-lexical": 0.2.0
-  "@assistant-ui/react-markdown": ^0.14.7
+  "@assistant-ui/react-markdown": 0.14.7
   ai: ^7.0.37
-  assistant-stream: ^0.3.26
+  assistant-stream: 0.3.26
   "@ai-sdk/openai-compatible": 3.0.14
   remark-breaks: ^4.0.0
   remark-directive: ^3.0.1
@@ -212,6 +236,7 @@ minimumReleaseAge: 4320
 minimumReleaseAgeExclude:
   - next
   - "@next/*"
+  - "typescript@7.0.2"
   - "@immich/sdk@3.0.0"
   # Renovate security update: turbo@2.9.14
   - turbo@2.9.14
@@ -222,6 +247,10 @@ minimumReleaseAgeExclude:
   # Renovate security update: esbuild@0.28.1
   - esbuild@0.28.1
 overrides:
+  "@assistant-ui/core": 0.2.21
+  "@assistant-ui/store": 0.2.20
+  "@assistant-ui/tap": 0.9.4
+  "assistant-cloud": 0.1.35
   "@babel/helpers@<7.26.10": ">=7.29.7"
   "@babel/runtime@<7.26.10": ">=7.29.7"
   "axios@>=1.0.0 <1.8.2": ">=1.18.1"
diff --git a/scripts/benchmarks/benchmark-compare.mts b/scripts/benchmarks/benchmark-compare.mts
new file mode 100644
index 000000000..2b77fd2b0
--- /dev/null
+++ b/scripts/benchmarks/benchmark-compare.mts
@@ -0,0 +1,40 @@
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+import type { BenchmarkPairInput, BuildResult, RuntimeResult } from "./benchmark-pair-lib.mts";
+import { compareBenchmarkPair } from "./benchmark-pair-lib.mts";
+
+const values = new Map<string, string[]>();
+for (let index = 2; index < process.argv.length; index += 2) {
+  const flag = process.argv[index];
+  const value = process.argv[index + 1];
+  if (!flag?.startsWith("--") || !value) throw new Error(`Invalid argument at ${String(flag)}`);
+  values.set(flag, [...(values.get(flag) ?? []), value]);
+}
+
+const requireMany = (flag: string) => {
+  const result = values.get(flag) ?? [];
+  if (result.length === 0) throw new Error(`${flag} is required`);
+  return result;
+};
+const requireOne = (flag: string) => {
+  const result = requireMany(flag);
+  if (result.length !== 1) throw new Error(`${flag} must be provided exactly once`);
+  return result[0] as string;
+};
+const readJson = async <T,>(file: string) => JSON.parse(await readFile(path.resolve(file), "utf8")) as T;
+
+const input: BenchmarkPairInput = {
+  baselineWarmup: await readJson<BuildResult>(requireOne("--baseline-warmup")),
+  candidateWarmup: await readJson<BuildResult>(requireOne("--candidate-warmup")),
+  baselineBuilds: await Promise.all(requireMany("--baseline-build").map(readJson<BuildResult>)),
+  candidateBuilds: await Promise.all(requireMany("--candidate-build").map(readJson<BuildResult>)),
+  baselineRuntime: await readJson<RuntimeResult>(requireOne("--baseline-runtime")),
+  candidateRuntime: await readJson<RuntimeResult>(requireOne("--candidate-runtime")),
+};
+const result = compareBenchmarkPair(input);
+const outputPath = path.resolve(requireOne("--output"));
+await mkdir(path.dirname(outputPath), { recursive: true });
+await writeFile(outputPath, `${JSON.stringify(result, null, 2)}\n`);
+console.log(JSON.stringify({ outputPath, ...result }, null, 2));
+if (!result.claimEligible) process.exitCode = 1;
diff --git a/scripts/benchmarks/benchmark-pair-lib.mts b/scripts/benchmarks/benchmark-pair-lib.mts
new file mode 100644
index 000000000..4ee7885aa
--- /dev/null
+++ b/scripts/benchmarks/benchmark-pair-lib.mts
@@ -0,0 +1,713 @@
+import { summarize } from "./dev-benchmark-lib.mts";
+
+type BuildResult = {
+  schemaVersion: number;
+  createdAt: string;
+  run: { startedAt: string; finishedAt: string };
+  claimEligible: boolean;
+  claimIneligibleReasons: string[];
+  mode: string;
+  builder: string | null;
+  runLabel: string | null;
+  declaredRevision: string | null;
+  series: { id: string | null; cacheState: string | null; repetition: number; totalRepetitions: number };
+  source: {
+    headSha: string;
+    measuredRevision: string;
+    fingerprint: string;
+    baseFingerprint: string;
+    syntheticSourceChange: { file: string; id: string } | null;
+  };
+  host: {
+    architecture: string;
+    dockerServer: { architecture: string; operatingSystem: string; targetPlatform: string; version: string | null };
+    platform: string;
+  };
+  image: {
+    architecture: string;
+    digest: string | null;
+    id: string;
+    revision: string | null;
+    sourceFingerprint: string | null;
+    targetPlatform: string;
+  };
+  builderCache: {
+    expected: Array<{ logicalId: string; target: string; mustIncreaseUsage: boolean }>;
+    before: BuildCacheSnapshot | null;
+    after: BuildCacheSnapshot | null;
+    afterStability: { attempts: number; pollIntervalMs: number; stableForMs: number; timeoutMs: number } | null;
+  };
+  build: { nextCompileMs: number | null; wallTimeMs: number };
+};
+
+type BuildCacheSnapshot = {
+  cacheMountCount: number;
+  cacheMounts: Array<{
+    logicalId: string | null;
+    recordId: string;
+    target: string | null;
+    usageCount: number | null;
+  }>;
+  recordCount: number;
+  recordsFingerprint: string;
+};
+
+type RuntimePageSample = {
+  boardMountedMs: number;
+  fcpMs: number;
+  lcpFinalizedByInputMs: number;
+  lcpMs: number;
+  ttfbMs: number;
+  widgetImplementationsMountedMs: number | null;
+  widgetDataSettledMs: number;
+};
+
+type RuntimeResult = {
+  schemaVersion: number;
+  claimEligible: boolean;
+  claimIneligibleReasons: string[];
+  claimScope: string[];
+  metricEligibility: Record<string, { claimEligible: boolean }>;
+  image: {
+    architecture: string;
+    digest: string | null;
+    id: string;
+    revision: string | null;
+    sourceFingerprint: string | null;
+  };
+  host: {
+    architecture: string;
+    node: { version: string; v8Version: string };
+    platform: string;
+    release: string;
+  };
+  provenance: {
+    browser: {
+      engine: string;
+      executablePath: string;
+      headless: boolean;
+      httpCachePolicy: string;
+      launchArguments?: string[];
+      version: string;
+      viewport: unknown;
+    };
+    container: {
+      cpuLimit: number;
+      memoryLimitBytes: number;
+      network: { internal: boolean };
+      node: { architecture: string; platform: string; version: string; v8Version: string };
+    };
+    docker: { engine: unknown; version: unknown };
+    ingressProxy: { excludedFromMemorySamples: boolean; implementation: string };
+  };
+  browserNetworkIsolation: {
+    active: boolean;
+    canaries: {
+      http: { attemptCount: number; responseHeader: string | null; status: number | null };
+      webSockets: Array<{
+        attemptCount: number;
+        browserEventCount: number;
+        closeCount: number;
+        connectTarget: string;
+        errorEvent: boolean;
+        frameReceivedCount: number;
+        frameSentCount: number;
+        opened: boolean;
+        socketErrorCount: number;
+        timedOut: boolean;
+        url: string;
+      }>;
+    };
+    externalBrowserWebSockets: unknown[];
+    unexpectedExternalResponses: unknown[];
+  };
+  serverNetworkIsolation: {
+    active: boolean;
+    canary: { directIp: { blocked: boolean }; domain: { blocked: boolean } };
+    network: { internal: boolean };
+  };
+  checkpoints: Array<{ capturedAt: string; name: string }>;
+  workload: {
+    settleMs: number;
+    sampleIntervalMs: number;
+    settleSampleCount: number;
+    lcpObservationMs: number;
+    lcpStabilityMs: number;
+    widgetDataQuietMs: number;
+    spotlightIdleMs: number;
+    spotlightIdlePolicy: string;
+    interactionIterations: number;
+    widgetCount: number;
+    implementationMarkerPolicy: string;
+    widgetImplementationMarkerCount: number;
+    widgetErrorCount: number;
+    startToReadyMs: number;
+    coldSpotlightFeedbackMs: number | null;
+    coldSpotlightReadyMs: number | null;
+    postIdleWarmInteractionMs: number | null;
+    routeTimings: Array<{ path: string }>;
+    pageLoadSamples: RuntimePageSample[];
+  };
+  summary: {
+    startupBytes: number | null;
+    workloadBytes: number | null;
+    settledBytes: number | null;
+    peakBytes: number | null;
+  };
+};
+
+export type BenchmarkPairInput = {
+  baselineWarmup: BuildResult;
+  candidateWarmup: BuildResult;
+  baselineBuilds: BuildResult[];
+  candidateBuilds: BuildResult[];
+  baselineRuntime: RuntimeResult;
+  candidateRuntime: RuntimeResult;
+};
+
+const stable = (value: unknown) => JSON.stringify(value);
+const unique = <T,>(values: T[]) => [...new Set(values)];
+
+const improvement = (baseline: number | null, candidate: number | null) => ({
+  baseline,
+  candidate,
+  delta: baseline === null || candidate === null ? null : candidate - baseline,
+  improvementPercent:
+    baseline === null || candidate === null || baseline === 0 ? null : ((baseline - candidate) / baseline) * 100,
+});
+
+const validateRunWindow = (label: string, build: BuildResult, reasons: string[]) => {
+  const startedAt = Date.parse(build.run.startedAt);
+  const finishedAt = Date.parse(build.run.finishedAt);
+  if (!Number.isFinite(startedAt) || !Number.isFinite(finishedAt) || finishedAt < startedAt) {
+    reasons.push(`${label} build run window is invalid`);
+  }
+  if (build.createdAt !== build.run.finishedAt) reasons.push(`${label} build completion timestamp is inconsistent`);
+};
+
+const validateMeasuredBuildCache = (label: string, build: BuildResult, reasons: string[]) => {
+  const { after, before, expected } = build.builderCache;
+  if (expected.length === 0) {
+    reasons.push(`${label} build declares no expected cache mounts`);
+    return;
+  }
+  if (!before || !after) {
+    reasons.push(`${label} build cache continuity snapshots are missing`);
+    return;
+  }
+  for (const expectedMount of expected) {
+    const matches = (snapshot: BuildCacheSnapshot) =>
+      snapshot.cacheMounts.filter(
+        ({ logicalId, target }) => logicalId === expectedMount.logicalId && target === expectedMount.target,
+      );
+    const beforeMatches = matches(before);
+    const afterMatches = matches(after);
+    if (beforeMatches.length !== 1 || afterMatches.length !== 1) {
+      reasons.push(`${label} build cache mount ${expectedMount.logicalId} cannot be traced uniquely`);
+      continue;
+    }
+    const beforeMount = beforeMatches[0];
+    const afterMount = afterMatches[0];
+    if (!beforeMount || !afterMount || beforeMount.recordId !== afterMount.recordId) {
+      reasons.push(`${label} build cache mount ${expectedMount.logicalId} was replaced`);
+      continue;
+    }
+    if (
+      expectedMount.mustIncreaseUsage &&
+      (beforeMount.usageCount === null ||
+        afterMount.usageCount === null ||
+        afterMount.usageCount <= beforeMount.usageCount)
+    ) {
+      reasons.push(`${label} build cache mount ${expectedMount.logicalId} usage did not increase`);
+    }
+  }
+};
+
+const validateBuildSide = (label: string, builds: BuildResult[], reasons: string[]) => {
+  if (builds.length === 0) {
+    reasons.push(`${label} build series is empty`);
+    return;
+  }
+
+  const first = builds[0];
+  if (!first) return;
+  for (const build of builds) {
+    if (build.schemaVersion !== 4) reasons.push(`${label} build schema is not 4`);
+    validateRunWindow(`${label} repetition ${build.series.repetition}`, build, reasons);
+    if (!build.claimEligible || build.claimIneligibleReasons.length > 0) {
+      reasons.push(`${label} build repetition ${build.series.repetition} is not claim eligible`);
+    }
+    if (build.mode !== "source-change") reasons.push(`${label} build is not a source-change rebuild`);
+    if (build.runLabel !== label) reasons.push(`${label} build run label is not ${label}`);
+    if (build.series.cacheState !== "warm") reasons.push(`${label} build cache is not warm`);
+    if (!build.source.syntheticSourceChange) reasons.push(`${label} build has no synthetic source change`);
+    if (build.source.fingerprint === build.source.baseFingerprint) {
+      reasons.push(`${label} build synthetic source fingerprint did not change`);
+    }
+    if (build.image.sourceFingerprint !== build.source.fingerprint) {
+      reasons.push(`${label} build image fingerprint does not match its immutable source snapshot`);
+    }
+    if (!Number.isFinite(build.build.nextCompileMs) || (build.build.nextCompileMs ?? 0) <= 0) {
+      reasons.push(`${label} build has no valid Next compile timing`);
+    }
+    if (!Number.isFinite(build.build.wallTimeMs) || build.build.wallTimeMs <= 0) {
+      reasons.push(`${label} build has no valid wall timing`);
+    }
+    validateMeasuredBuildCache(`${label} repetition ${build.series.repetition}`, build, reasons);
+    if (!build.builderCache.afterStability || build.builderCache.afterStability.stableForMs < 10_000) {
+      reasons.push(`${label} build cache snapshot did not settle for 10000ms`);
+    }
+    if (!Number.isFinite(Date.parse(build.createdAt))) reasons.push(`${label} build timestamp is invalid`);
+  }
+
+  const expectedRepetitions = Array.from({ length: first.series.totalRepetitions }, (_, index) => index + 1);
+  const actualRepetitions = builds.map(({ series }) => series.repetition).toSorted((left, right) => left - right);
+  if (first.series.totalRepetitions < 2 || stable(actualRepetitions) !== stable(expectedRepetitions)) {
+    reasons.push(`${label} build repetitions are incomplete`);
+  }
+
+  const stableFields: Array<[string, unknown[]]> = [
+    ["builder", builds.map(({ builder }) => builder)],
+    ["series id", builds.map(({ series }) => series.id)],
+    ["total repetitions", builds.map(({ series }) => series.totalRepetitions)],
+    ["declared revision", builds.map(({ declaredRevision }) => declaredRevision)],
+    ["head SHA", builds.map(({ source }) => source.headSha)],
+    ["measured revision", builds.map(({ source }) => source.measuredRevision)],
+    ["base fingerprint", builds.map(({ source }) => source.baseFingerprint)],
+    ["host", builds.map(({ host }) => stable(host))],
+    ["image platform", builds.map(({ image }) => `${image.architecture}:${image.targetPlatform}`)],
+    ["expected cache mounts", builds.map(({ builderCache }) => stable(builderCache.expected))],
+  ];
+  for (const [field, values] of stableFields) {
+    if (unique(values).length !== 1) reasons.push(`${label} build ${field} changes within the series`);
+  }
+  if (!first.builder) reasons.push(`${label} build builder is missing`);
+  if (!first.series.id) reasons.push(`${label} build series id is missing`);
+};
+
+const validateWarmup = (label: string, warmup: BuildResult, builds: BuildResult[], reasons: string[]) => {
+  if (warmup.schemaVersion !== 4) reasons.push(`${label} warmup schema is not 4`);
+  validateRunWindow(`${label} warmup`, warmup, reasons);
+  if (warmup.mode !== "cached") reasons.push(`${label} warmup mode is not cached`);
+  if (warmup.runLabel !== label) reasons.push(`${label} warmup run label is not ${label}`);
+  if (warmup.series.cacheState !== "cold") reasons.push(`${label} warmup cache state is not cold`);
+  if (warmup.source.syntheticSourceChange !== null) reasons.push(`${label} warmup contains a synthetic source change`);
+  const expectedWarmupReason = "cached mode does not force an application rebuild";
+  if (
+    warmup.claimEligible ||
+    !warmup.claimIneligibleReasons.includes(expectedWarmupReason) ||
+    warmup.claimIneligibleReasons.some((reason) => reason !== expectedWarmupReason)
+  ) {
+    reasons.push(`${label} warmup has unexpected claim eligibility reasons`);
+  }
+  if (!warmup.builderCache.before || warmup.builderCache.before.recordCount !== 0) {
+    reasons.push(`${label} warmup builder did not begin empty`);
+  }
+  if (!warmup.builderCache.after || warmup.builderCache.after.recordCount === 0) {
+    reasons.push(`${label} warmup did not populate the builder cache`);
+  }
+  if (!warmup.builderCache.afterStability || warmup.builderCache.afterStability.stableForMs < 10_000) {
+    reasons.push(`${label} warmup cache snapshot did not settle for 10000ms`);
+  }
+  for (const expected of warmup.builderCache.expected) {
+    const matches =
+      warmup.builderCache.after?.cacheMounts.filter(
+        ({ logicalId, target }) => logicalId === expected.logicalId && target === expected.target,
+      ) ?? [];
+    if (matches.length !== 1) {
+      reasons.push(`${label} warmup did not populate cache mount ${expected.logicalId} at ${expected.target}`);
+    }
+  }
+  if (warmup.image.sourceFingerprint !== warmup.source.baseFingerprint) {
+    reasons.push(`${label} warmup image fingerprint does not match its source`);
+  }
+  if (warmup.source.fingerprint !== warmup.source.baseFingerprint) {
+    reasons.push(`${label} warmup immutable source fingerprint does not match its base source`);
+  }
+  if (warmup.image.revision !== warmup.source.measuredRevision) {
+    reasons.push(`${label} warmup image revision does not match its source`);
+  }
+
+  const first = builds[0];
+  if (!first) return;
+  const stableFields: Array<[string, unknown, unknown]> = [
+    ["builder", warmup.builder, first.builder],
+    ["series id", warmup.series.id, first.series.id],
+    ["declared revision", warmup.declaredRevision, first.declaredRevision],
+    ["head SHA", warmup.source.headSha, first.source.headSha],
+    ["measured revision", warmup.source.measuredRevision, first.source.measuredRevision],
+    ["base fingerprint", warmup.source.baseFingerprint, first.source.baseFingerprint],
+    ["host", stable(warmup.host), stable(first.host)],
+    [
+      "image platform",
+      `${warmup.image.architecture}:${warmup.image.targetPlatform}`,
+      `${first.image.architecture}:${first.image.targetPlatform}`,
+    ],
+    ["expected cache mounts", stable(warmup.builderCache.expected), stable(first.builderCache.expected)],
+  ];
+  for (const [field, warmupValue, measuredValue] of stableFields) {
+    if (warmupValue !== measuredValue) reasons.push(`${label} warmup ${field} does not match the measured series`);
+  }
+
+  let previous = warmup;
+  for (const build of builds.toSorted((left, right) => left.series.repetition - right.series.repetition)) {
+    if (!previous.builderCache.after || !build.builderCache.before) {
+      reasons.push(`${label} cache continuity snapshot is missing before repetition ${build.series.repetition}`);
+    } else if (previous.builderCache.after.recordsFingerprint !== build.builderCache.before.recordsFingerprint) {
+      reasons.push(`${label} builder cache changed outside repetition ${build.series.repetition}`);
+    }
+    previous = build;
+  }
+};
+
+const runtimeConfiguration = (runtime: RuntimeResult) => ({
+  host: runtime.host,
+  browser: {
+    ...runtime.provenance.browser,
+    launchArguments: runtime.provenance.browser.launchArguments?.map((argument) =>
+      argument.startsWith("--proxy-server=") ? "--proxy-server=<ephemeral-deny-proxy>" : argument,
+    ),
+  },
+  container: {
+    cpuLimit: runtime.provenance.container.cpuLimit,
+    memoryLimitBytes: runtime.provenance.container.memoryLimitBytes,
+    node: runtime.provenance.container.node,
+  },
+  docker: runtime.provenance.docker,
+  workload: {
+    settleMs: runtime.workload.settleMs,
+    sampleIntervalMs: runtime.workload.sampleIntervalMs,
+    settleSampleCount: runtime.workload.settleSampleCount,
+    lcpObservationMs: runtime.workload.lcpObservationMs,
+    lcpStabilityMs: runtime.workload.lcpStabilityMs,
+    widgetDataQuietMs: runtime.workload.widgetDataQuietMs,
+    spotlightIdleMs: runtime.workload.spotlightIdleMs,
+    interactionIterations: runtime.workload.interactionIterations,
+    widgetCount: runtime.workload.widgetCount,
+    implementationMarkerPolicy: runtime.workload.implementationMarkerPolicy,
+    routePaths: runtime.workload.routeTimings.map(({ path }) => path),
+    pageSampleCount: runtime.workload.pageLoadSamples.length,
+  },
+});
+
+const validateRuntime = (label: string, runtime: RuntimeResult, reasons: string[]) => {
+  const expectedClaimScope = ["pageLoads", "largestContentfulPaint", "widgetDataSettled", "settleStability"];
+  if (runtime.schemaVersion !== 7) reasons.push(`${label} runtime schema is not 7`);
+  if (stable(runtime.claimScope) !== stable(expectedClaimScope)) {
+    reasons.push(`${label} runtime claim scope is incomplete`);
+  }
+  if (!runtime.claimEligible || runtime.claimIneligibleReasons.length > 0) {
+    reasons.push(`${label} runtime is not claim eligible`);
+  }
+  for (const metric of ["pageLoads", "largestContentfulPaint", "widgetDataSettled", "settleStability"]) {
+    if (runtime.metricEligibility[metric]?.claimEligible !== true) {
+      reasons.push(`${label} runtime metric ${metric} is not claim eligible`);
+    }
+  }
+  if (runtime.workload.pageLoadSamples.length < 20) reasons.push(`${label} runtime has fewer than 20 page samples`);
+  if (runtime.workload.lcpObservationMs < 5_000) reasons.push(`${label} runtime LCP observation is below 5000ms`);
+  if (runtime.workload.widgetDataQuietMs < 500)
+    reasons.push(`${label} runtime widget-data quiet window is below 500ms`);
+  if (runtime.workload.settleMs < 600_000) reasons.push(`${label} runtime settle duration is below 600000ms`);
+  const actualSettleSampleCount = runtime.checkpoints.filter(({ name }) => name.startsWith("settle-")).length;
+  if (runtime.workload.settleSampleCount < 20 || actualSettleSampleCount < 20) {
+    reasons.push(`${label} runtime has fewer than 20 settle samples`);
+  }
+  if (runtime.workload.settleSampleCount !== actualSettleSampleCount) {
+    reasons.push(`${label} runtime settle sample count does not match checkpoints`);
+  }
+  const workloadCheckpoints = runtime.checkpoints.filter(({ name }) => name === "workload");
+  const settleCheckpoints = runtime.checkpoints.filter(({ name }) => name.startsWith("settle-"));
+  const expectedSettleNames = Array.from({ length: actualSettleSampleCount }, (_, index) => `settle-${index + 1}`);
+  if (
+    workloadCheckpoints.length !== 1 ||
+    stable(settleCheckpoints.map(({ name }) => name)) !== stable(expectedSettleNames) ||
+    runtime.checkpoints.some(({ capturedAt }) => !Number.isFinite(Date.parse(capturedAt))) ||
+    runtime.checkpoints.some(
+      ({ capturedAt }, index, checkpoints) =>
+        index > 0 && Date.parse(capturedAt) < Date.parse(checkpoints[index - 1]?.capturedAt ?? ""),
+    )
+  ) {
+    reasons.push(`${label} runtime checkpoint chronology is invalid`);
+  }
+  const workloadCapturedAt = Date.parse(workloadCheckpoints[0]?.capturedAt ?? "");
+  const finalSettleCapturedAt = Date.parse(settleCheckpoints.at(-1)?.capturedAt ?? "");
+  if (
+    !Number.isFinite(workloadCapturedAt) ||
+    !Number.isFinite(finalSettleCapturedAt) ||
+    finalSettleCapturedAt - workloadCapturedAt < runtime.workload.settleMs
+  ) {
+    reasons.push(`${label} runtime checkpoint span is shorter than the declared settle duration`);
+  }
+  for (const metric of [
+    "boardMountedMs",
+    "fcpMs",
+    "lcpFinalizedByInputMs",
+    "lcpMs",
+    "ttfbMs",
+    "widgetImplementationsMountedMs",
+    "widgetDataSettledMs",
+  ] satisfies Array<keyof RuntimePageSample>) {
+    const values = runtime.workload.pageLoadSamples.map((sample) => sample[metric]);
+    if (
+      values.some((value) => typeof value !== "number" || !Number.isFinite(value) || value < 0) ||
+      runtimeMetric(runtime, metric).count !== runtime.workload.pageLoadSamples.length
+    ) {
+      reasons.push(`${label} runtime metric ${metric} has invalid or missing samples`);
+    }
+  }
+  if (
+    runtime.workload.pageLoadSamples.some(
+      ({ lcpFinalizedByInputMs, lcpMs }) =>
+        lcpFinalizedByInputMs < runtime.workload.lcpObservationMs || lcpMs > lcpFinalizedByInputMs,
+    )
+  ) {
+    reasons.push(`${label} runtime LCP samples were not observed and finalized for the declared window`);
+  }
+  if (runtime.workload.widgetErrorCount !== 0) reasons.push(`${label} runtime rendered widget errors`);
+  if (runtime.workload.widgetImplementationMarkerCount !== runtime.workload.widgetCount) {
+    reasons.push(`${label} runtime did not mount every widget implementation`);
+  }
+  const webSocketCanaryProtocols = runtime.browserNetworkIsolation.canaries.webSockets.flatMap(
+    ({ connectTarget, url }) => {
+      try {
+        const parsed = new URL(url);
+        const defaultPort = parsed.protocol === "ws:" ? "80" : parsed.protocol === "wss:" ? "443" : null;
+        return defaultPort && connectTarget === `${parsed.hostname}:${parsed.port || defaultPort}`
+          ? [parsed.protocol]
+          : [];
+      } catch {
+        return [];
+      }
+    },
+  );
+  if (
+    !runtime.browserNetworkIsolation.active ||
+    runtime.browserNetworkIsolation.unexpectedExternalResponses.length > 0 ||
+    runtime.browserNetworkIsolation.externalBrowserWebSockets.length > 0 ||
+    runtime.browserNetworkIsolation.canaries.http.status !== 502 ||
+    runtime.browserNetworkIsolation.canaries.http.responseHeader !== "true" ||
+    runtime.browserNetworkIsolation.canaries.http.attemptCount < 1 ||
+    runtime.browserNetworkIsolation.canaries.webSockets.length !== 2 ||
+    stable(webSocketCanaryProtocols.toSorted()) !== stable(["ws:", "wss:"]) ||
+    runtime.browserNetworkIsolation.canaries.webSockets.some(
+      ({
+        attemptCount,
+        browserEventCount,
+        closeCount,
+        errorEvent,
+        frameReceivedCount,
+        frameSentCount,
+        opened,
+        socketErrorCount,
+        timedOut,
+      }) =>
+        attemptCount < 1 ||
+        browserEventCount < 1 ||
+        closeCount < 1 ||
+        !errorEvent ||
+        frameReceivedCount !== 0 ||
+        frameSentCount !== 0 ||
+        opened ||
+        socketErrorCount < 1 ||
+        timedOut,
+    )
+  ) {
+    reasons.push(`${label} browser network is not isolated`);
+  }
+  if (
+    !runtime.serverNetworkIsolation.active ||
+    !runtime.serverNetworkIsolation.network.internal ||
+    !runtime.serverNetworkIsolation.canary.domain.blocked ||
+    !runtime.serverNetworkIsolation.canary.directIp.blocked
+  ) {
+    reasons.push(`${label} server network is not isolated`);
+  }
+  if (!runtime.provenance.container.network.internal) reasons.push(`${label} app container network is not internal`);
+  if (!runtime.provenance.ingressProxy.excludedFromMemorySamples) {
+    reasons.push(`${label} ingress proxy memory accounting is ambiguous`);
+  }
+};
+
+const runtimeMetric = (runtime: RuntimeResult, key: keyof RuntimePageSample) =>
+  summarize(runtime.workload.pageLoadSamples.map((sample) => sample[key]));
+
+export const compareBenchmarkPair = (input: BenchmarkPairInput) => {
+  const reasons: string[] = [];
+  validateBuildSide("baseline", input.baselineBuilds, reasons);
+  validateBuildSide("candidate", input.candidateBuilds, reasons);
+  validateWarmup("baseline", input.baselineWarmup, input.baselineBuilds, reasons);
+  validateWarmup("candidate", input.candidateWarmup, input.candidateBuilds, reasons);
+  validateRuntime("baseline", input.baselineRuntime, reasons);
+  validateRuntime("candidate", input.candidateRuntime, reasons);
+
+  const baselineBuild = input.baselineBuilds[0];
+  const candidateBuild = input.candidateBuilds[0];
+  if (baselineBuild && candidateBuild) {
+    if (baselineBuild.series.id !== candidateBuild.series.id) reasons.push("build series ids do not match");
+    if (baselineBuild.builder === candidateBuild.builder) reasons.push("build sides reuse the same builder cache");
+    if (baselineBuild.source.measuredRevision !== candidateBuild.source.measuredRevision) {
+      reasons.push("build measured revisions do not match");
+    }
+    if (stable(baselineBuild.host) !== stable(candidateBuild.host)) reasons.push("build hosts do not match");
+    if (
+      `${baselineBuild.image.architecture}:${baselineBuild.image.targetPlatform}` !==
+      `${candidateBuild.image.architecture}:${candidateBuild.image.targetPlatform}`
+    ) {
+      reasons.push("build image platforms do not match");
+    }
+    if (baselineBuild.source.baseFingerprint === candidateBuild.source.baseFingerprint) {
+      reasons.push("baseline and candidate source fingerprints are identical");
+    }
+
+    const candidateByRepetition = new Map(
+      input.candidateBuilds.map((build) => [build.series.repetition, build.source.syntheticSourceChange?.id]),
+    );
+    for (const build of input.baselineBuilds) {
+      if (build.source.syntheticSourceChange?.id !== candidateByRepetition.get(build.series.repetition)) {
+        reasons.push(`synthetic source change differs at repetition ${build.series.repetition}`);
+      }
+    }
+
+    if (baselineBuild.series.totalRepetitions !== 2 || candidateBuild.series.totalRepetitions !== 2) {
+      reasons.push("balanced build order currently requires exactly two repetitions per side");
+    } else {
+      const chronologicalRuns = [
+        { build: input.baselineWarmup, label: "baseline:warmup" },
+        { build: input.candidateWarmup, label: "candidate:warmup" },
+        ...input.baselineBuilds.map((build) => ({ build, label: `baseline:${build.series.repetition}` })),
+        ...input.candidateBuilds.map((build) => ({ build, label: `candidate:${build.series.repetition}` })),
+      ].toSorted((left, right) => Date.parse(left.build.run.startedAt) - Date.parse(right.build.run.startedAt));
+      const chronologicalOrder = chronologicalRuns.map(({ label }) => label);
+      if (
+        stable(chronologicalOrder) !==
+        stable(["baseline:warmup", "candidate:warmup", "baseline:1", "candidate:1", "candidate:2", "baseline:2"])
+      ) {
+        reasons.push(
+          "build execution order is not cold-warmup baseline-candidate then balanced baseline-candidate-candidate-baseline",
+        );
+      }
+      for (let index = 1; index < chronologicalRuns.length; index += 1) {
+        const previous = chronologicalRuns[index - 1];
+        const current = chronologicalRuns[index];
+        if (
+          previous &&
+          current &&
+          Date.parse(previous.build.run.finishedAt) > Date.parse(current.build.run.startedAt)
+        ) {
+          reasons.push(`build runs overlap between ${previous.label} and ${current.label}`);
+        }
+      }
+    }
+
+    if (input.baselineRuntime.image.sourceFingerprint !== baselineBuild.source.baseFingerprint) {
+      reasons.push("baseline runtime image does not match the baseline build source");
+    }
+    if (input.baselineRuntime.image.sourceFingerprint !== input.baselineWarmup.image.sourceFingerprint) {
+      reasons.push("baseline runtime image does not match the baseline warmup image");
+    }
+    if (input.candidateRuntime.image.sourceFingerprint !== input.candidateWarmup.image.sourceFingerprint) {
+      reasons.push("candidate runtime image does not match the candidate warmup image");
+    }
+    if (
+      input.baselineRuntime.image.id !== input.baselineWarmup.image.id ||
+      input.baselineRuntime.image.digest !== input.baselineWarmup.image.digest
+    ) {
+      reasons.push("baseline runtime image identity does not match the baseline warmup image");
+    }
+    if (
+      input.candidateRuntime.image.id !== input.candidateWarmup.image.id ||
+      input.candidateRuntime.image.digest !== input.candidateWarmup.image.digest
+    ) {
+      reasons.push("candidate runtime image identity does not match the candidate warmup image");
+    }
+    if (input.candidateRuntime.image.sourceFingerprint !== candidateBuild.source.baseFingerprint) {
+      reasons.push("candidate runtime image does not match the candidate build source");
+    }
+    if (
+      input.baselineRuntime.image.revision !== baselineBuild.source.measuredRevision ||
+      input.candidateRuntime.image.revision !== candidateBuild.source.measuredRevision
+    ) {
+      reasons.push("runtime image revisions do not match their build revisions");
+    }
+  }
+
+  if (input.baselineRuntime.image.revision !== input.candidateRuntime.image.revision) {
+    reasons.push("runtime image revisions do not match");
+  }
+  if (input.baselineRuntime.image.architecture !== input.candidateRuntime.image.architecture) {
+    reasons.push("runtime image architectures do not match");
+  }
+  if (stable(runtimeConfiguration(input.baselineRuntime)) !== stable(runtimeConfiguration(input.candidateRuntime))) {
+    reasons.push("runtime host, browser, container, or workload configuration does not match");
+  }
+  if (stable(input.baselineRuntime.claimScope) !== stable(input.candidateRuntime.claimScope)) {
+    reasons.push("runtime claim scopes do not match");
+  }
+  if (input.baselineRuntime.workload.spotlightIdlePolicy !== "mounted") {
+    reasons.push("baseline Spotlight idle policy is not mounted");
+  }
+  if (input.candidateRuntime.workload.spotlightIdlePolicy !== "preload-only") {
+    reasons.push("candidate Spotlight idle policy is not preload-only");
+  }
+
+  const buildMetric = (key: "wallTimeMs" | "nextCompileMs") => {
+    const baseline = summarize(input.baselineBuilds.map(({ build }) => build[key]));
+    const candidate = summarize(input.candidateBuilds.map(({ build }) => build[key]));
+    return { baseline, candidate, comparison: improvement(baseline.median, candidate.median) };
+  };
+  const pageMetric = (key: keyof RuntimePageSample) => {
+    const baseline = runtimeMetric(input.baselineRuntime, key);
+    const candidate = runtimeMetric(input.candidateRuntime, key);
+    return { baseline, candidate, comparison: improvement(baseline.median, candidate.median) };
+  };
+
+  return {
+    schemaVersion: 1,
+    claimEligible: reasons.length === 0,
+    claimIneligibleReasons: unique(reasons),
+    claimScope: {
+      build: "alternating warm incremental Docker source rebuilds",
+      runtime: "fresh authenticated Chromium documents against one warmed, network-isolated app container",
+    },
+    limitations: [
+      "build series report controlled medians, not statistical significance",
+      "runtime documents share one warmed server",
+      "widget settlement covers observed non-subscription tRPC requests followed by the configured quiet window",
+      "startup, RAM levels, initial bundle data, and cold Spotlight timings remain single-container diagnostics",
+    ],
+    build: {
+      seriesId: baselineBuild?.series.id ?? null,
+      baselineFingerprint: baselineBuild?.source.baseFingerprint ?? null,
+      candidateFingerprint: candidateBuild?.source.baseFingerprint ?? null,
+      wallTimeMs: buildMetric("wallTimeMs"),
+      nextCompileMs: buildMetric("nextCompileMs"),
+    },
+    runtime: {
+      boardMountedMs: pageMetric("boardMountedMs"),
+      fcpMs: pageMetric("fcpMs"),
+      lcpMs: pageMetric("lcpMs"),
+      ttfbMs: pageMetric("ttfbMs"),
+      widgetImplementationsMountedMs: pageMetric("widgetImplementationsMountedMs"),
+      widgetDataSettledMs: pageMetric("widgetDataSettledMs"),
+    },
+    diagnostics: {
+      baseline: {
+        startToReadyMs: input.baselineRuntime.workload.startToReadyMs,
+        coldSpotlightFeedbackMs: input.baselineRuntime.workload.coldSpotlightFeedbackMs,
+        coldSpotlightReadyMs: input.baselineRuntime.workload.coldSpotlightReadyMs,
+        postIdleFirstOpenMs: input.baselineRuntime.workload.postIdleWarmInteractionMs,
+        memory: input.baselineRuntime.summary,
+      },
+      candidate: {
+        startToReadyMs: input.candidateRuntime.workload.startToReadyMs,
+        coldSpotlightFeedbackMs: input.candidateRuntime.workload.coldSpotlightFeedbackMs,
+        coldSpotlightReadyMs: input.candidateRuntime.workload.coldSpotlightReadyMs,
+        postIdleFirstOpenMs: input.candidateRuntime.workload.postIdleWarmInteractionMs,
+        memory: input.candidateRuntime.summary,
+      },
+    },
+  };
+};
+
+export type { BuildResult, RuntimeResult };
diff --git a/scripts/benchmarks/benchmark-pair-lib.spec.ts b/scripts/benchmarks/benchmark-pair-lib.spec.ts
new file mode 100644
index 000000000..be8477dba
--- /dev/null
+++ b/scripts/benchmarks/benchmark-pair-lib.spec.ts
@@ -0,0 +1,360 @@
+import { describe, expect, it } from "vitest";
+
+import type { BenchmarkPairInput, BuildResult, RuntimeResult } from "./benchmark-pair-lib.mts";
+import { compareBenchmarkPair } from "./benchmark-pair-lib.mts";
+
+const runWindow = (index: number) => {
+  const startedAt = new Date(Date.UTC(2026, 0, 1, 0, 0, index * 2)).toISOString();
+  const finishedAt = new Date(Date.UTC(2026, 0, 1, 0, 0, index * 2 + 1)).toISOString();
+  return { startedAt, finishedAt };
+};
+
+const expectedCache = [{ logicalId: "pnpm-store", target: "/pnpm/store", mustIncreaseUsage: true }];
+const cacheStability = { attempts: 6, pollIntervalMs: 2_000, stableForMs: 10_000, timeoutMs: 30_000 };
+const cacheSnapshot = (side: "baseline" | "candidate", stage: "empty" | "warm" | "r1" | "r2") => ({
+  cacheMountCount: stage === "empty" ? 0 : 1,
+  cacheMounts:
+    stage === "empty"
+      ? []
+      : [
+          {
+            logicalId: "pnpm-store",
+            recordId: `${side}-pnpm-record`,
+            target: "/pnpm/store",
+            usageCount: { warm: 1, r1: 2, r2: 3 }[stage],
+          },
+        ],
+  recordCount: stage === "empty" ? 0 : { warm: 10, r1: 12, r2: 14 }[stage],
+  recordsFingerprint: `${side}-${stage}`,
+});
+
+const build = (side: "baseline" | "candidate", repetition: number): BuildResult => ({
+  schemaVersion: 4,
+  createdAt: runWindow(side === "baseline" ? (repetition === 1 ? 2 : 5) : repetition === 1 ? 3 : 4).finishedAt,
+  run: runWindow(side === "baseline" ? (repetition === 1 ? 2 : 5) : repetition === 1 ? 3 : 4),
+  claimEligible: true,
+  claimIneligibleReasons: [],
+  mode: "source-change",
+  builder: `${side}-builder`,
+  runLabel: side,
+  declaredRevision: "head+worktree",
+  series: { id: "series", cacheState: "warm", repetition, totalRepetitions: 2 },
+  source: {
+    headSha: "head",
+    measuredRevision: "head+worktree",
+    fingerprint: `${side}-change-${repetition}`,
+    baseFingerprint: `${side}-fingerprint`,
+    syntheticSourceChange: { file: "layout.tsx", id: `change-${repetition}` },
+  },
+  host: {
+    architecture: "arm64",
+    dockerServer: { architecture: "arm64", operatingSystem: "linux", targetPlatform: "linux/arm64", version: "1" },
+    platform: "darwin",
+  },
+  image: {
+    architecture: "arm64",
+    digest: null,
+    id: `${side}-build-${repetition}`,
+    revision: "head+worktree",
+    sourceFingerprint: `${side}-change-${repetition}`,
+    targetPlatform: "linux/arm64",
+  },
+  builderCache: {
+    expected: expectedCache,
+    before: cacheSnapshot(side, repetition === 1 ? "warm" : "r1"),
+    after: cacheSnapshot(side, repetition === 1 ? "r1" : "r2"),
+    afterStability: cacheStability,
+  },
+  build: { nextCompileMs: side === "baseline" ? 200 : 100, wallTimeMs: side === "baseline" ? 300 : 150 },
+});
+
+const warmup = (side: "baseline" | "candidate"): BuildResult => {
+  const run = runWindow(side === "baseline" ? 0 : 1);
+  return {
+    schemaVersion: 4,
+    createdAt: run.finishedAt,
+    run,
+    claimEligible: false,
+    claimIneligibleReasons: ["cached mode does not force an application rebuild"],
+    mode: "cached",
+    builder: `${side}-builder`,
+    runLabel: side,
+    declaredRevision: "head+worktree",
+    series: { id: "series", cacheState: "cold", repetition: 1, totalRepetitions: 2 },
+    source: {
+      headSha: "head",
+      measuredRevision: "head+worktree",
+      fingerprint: `${side}-fingerprint`,
+      baseFingerprint: `${side}-fingerprint`,
+      syntheticSourceChange: null,
+    },
+    host: {
+      architecture: "arm64",
+      dockerServer: {
+        architecture: "arm64",
+        operatingSystem: "linux",
+        targetPlatform: "linux/arm64",
+        version: "1",
+      },
+      platform: "darwin",
+    },
+    image: {
+      architecture: "arm64",
+      digest: null,
+      id: `${side}-runtime-image`,
+      revision: "head+worktree",
+      sourceFingerprint: `${side}-fingerprint`,
+      targetPlatform: "linux/arm64",
+    },
+    builderCache: {
+      expected: expectedCache,
+      before: cacheSnapshot(side, "empty"),
+      after: cacheSnapshot(side, "warm"),
+      afterStability: cacheStability,
+    },
+    build: { nextCompileMs: side === "baseline" ? 400 : 300, wallTimeMs: side === "baseline" ? 500 : 400 },
+  };
+};
+
+const runtimeSample = (value: number) => ({
+  boardMountedMs: value,
+  fcpMs: value,
+  lcpFinalizedByInputMs: 5_100,
+  lcpMs: value,
+  ttfbMs: value,
+  widgetImplementationsMountedMs: value,
+  widgetDataSettledMs: value,
+});
+
+const runtime = (side: "baseline" | "candidate"): RuntimeResult => {
+  return {
+    schemaVersion: 7,
+    claimEligible: true,
+    claimIneligibleReasons: [],
+    claimScope: ["pageLoads", "largestContentfulPaint", "widgetDataSettled", "settleStability"],
+    metricEligibility: Object.fromEntries(
+      ["pageLoads", "largestContentfulPaint", "widgetDataSettled", "settleStability"].map((key) => [
+        key,
+        { claimEligible: true },
+      ]),
+    ),
+    image: {
+      architecture: "arm64",
+      digest: null,
+      id: `${side}-runtime-image`,
+      revision: "head+worktree",
+      sourceFingerprint: `${side}-fingerprint`,
+    },
+    host: { architecture: "arm64", node: { version: "24", v8Version: "13" }, platform: "darwin", release: "1" },
+    provenance: {
+      browser: {
+        engine: "chromium",
+        executablePath: "/chromium",
+        headless: true,
+        httpCachePolicy: "default",
+        launchArguments: [`--proxy-server=http://127.0.0.1:${side === "baseline" ? "31001" : "32002"}`],
+        version: "1",
+        viewport: { width: 1280, height: 720 },
+      },
+      container: {
+        cpuLimit: 2,
+        memoryLimitBytes: 1024,
+        network: { internal: true },
+        node: { architecture: "arm64", platform: "linux", version: "24", v8Version: "13" },
+      },
+      docker: { engine: { version: "1" }, version: { version: "1" } },
+      ingressProxy: { excludedFromMemorySamples: true, implementation: "Node.js TCP proxy" },
+    },
+    browserNetworkIsolation: {
+      active: true,
+      canaries: {
+        http: { attemptCount: 1, responseHeader: "true", status: 502 },
+        webSockets: [
+          { connectTarget: "browser-ws.invalid:80", url: "ws://browser-ws.invalid/canary" },
+          { connectTarget: "browser-wss.invalid:443", url: "wss://browser-wss.invalid/canary" },
+        ].map((canary) => ({
+          ...canary,
+          attemptCount: 1,
+          browserEventCount: 1,
+          closeCount: 1,
+          errorEvent: true,
+          frameReceivedCount: 0,
+          frameSentCount: 0,
+          opened: false,
+          socketErrorCount: 1,
+          timedOut: false,
+        })),
+      },
+      externalBrowserWebSockets: [],
+      unexpectedExternalResponses: [],
+    },
+    serverNetworkIsolation: {
+      active: true,
+      canary: { directIp: { blocked: true }, domain: { blocked: true } },
+      network: { internal: true },
+    },
+    workload: {
+      settleMs: 600_000,
+      sampleIntervalMs: 30_000,
+      settleSampleCount: 20,
+      lcpObservationMs: 5_000,
+      lcpStabilityMs: 500,
+      widgetDataQuietMs: 500,
+      spotlightIdleMs: 2_500,
+      spotlightIdlePolicy: side === "baseline" ? "mounted" : "preload-only",
+      interactionIterations: 7,
+      widgetCount: 32,
+      implementationMarkerPolicy: "true",
+      widgetImplementationMarkerCount: 32,
+      widgetErrorCount: 0,
+      startToReadyMs: 1_000,
+      coldSpotlightFeedbackMs: 20,
+      coldSpotlightReadyMs: 200,
+      postIdleWarmInteractionMs: 30,
+      routeTimings: [{ path: "/manage" }],
+      pageLoadSamples: Array.from({ length: 20 }, () => runtimeSample(side === "baseline" ? 200 : 100)),
+    },
+    checkpoints: [
+      { capturedAt: new Date(0).toISOString(), name: "startup" },
+      { capturedAt: new Date(1_000).toISOString(), name: "workload" },
+      ...Array.from({ length: 20 }, (_, index) => ({
+        capturedAt: new Date(1_000 + (index + 1) * 30_000).toISOString(),
+        name: `settle-${index + 1}`,
+      })),
+    ],
+    summary: { startupBytes: 1, workloadBytes: 2, settledBytes: 2, peakBytes: 3 },
+  };
+};
+
+const validInput = (): BenchmarkPairInput => ({
+  baselineWarmup: warmup("baseline"),
+  candidateWarmup: warmup("candidate"),
+  baselineBuilds: [build("baseline", 1), build("baseline", 2)],
+  candidateBuilds: [build("candidate", 1), build("candidate", 2)],
+  baselineRuntime: runtime("baseline"),
+  candidateRuntime: runtime("candidate"),
+});
+
+describe("benchmark pair validation", () => {
+  it("accepts a complete, isolated, provenance-matched comparison", () => {
+    const result = compareBenchmarkPair(validInput());
+
+    expect(result.claimEligible).toBe(true);
+    expect(result.claimIneligibleReasons).toEqual([]);
+    expect(result.runtime.lcpMs.comparison).toMatchObject({ baseline: 200, candidate: 100, improvementPercent: 50 });
+  });
+
+  it("rejects an incomplete build series", () => {
+    const input = validInput();
+    input.candidateBuilds.pop();
+
+    expect(compareBenchmarkPair(input).claimIneligibleReasons).toContain("candidate build repetitions are incomplete");
+  });
+
+  it("rejects runtime source drift and uncontrolled server egress", () => {
+    const input = validInput();
+    input.candidateRuntime.image.sourceFingerprint = "wrong";
+    input.candidateRuntime.serverNetworkIsolation.canary.directIp.blocked = false;
+
+    const result = compareBenchmarkPair(input);
+    expect(result.claimEligible).toBe(false);
+    expect(result.claimIneligibleReasons).toContain(
+      "candidate runtime image does not match the candidate build source",
+    );
+    expect(result.claimIneligibleReasons).toContain("candidate server network is not isolated");
+  });
+
+  it("rejects runtime evidence without blocked HTTP, WS, and WSS browser canaries", () => {
+    const input = validInput();
+    const wssCanary = input.candidateRuntime.browserNetworkIsolation.canaries.webSockets[1];
+    if (!wssCanary) throw new Error("Missing WSS canary fixture");
+    wssCanary.opened = true;
+
+    expect(compareBenchmarkPair(input).claimIneligibleReasons).toContain("candidate browser network is not isolated");
+  });
+
+  it("requires one WS and one WSS browser isolation canary", () => {
+    const input = validInput();
+    const wssCanary = input.candidateRuntime.browserNetworkIsolation.canaries.webSockets[1];
+    if (!wssCanary) throw new Error("Missing WSS canary fixture");
+    wssCanary.url = "ws://second-browser-ws.invalid/canary";
+    wssCanary.connectTarget = "second-browser-ws.invalid:80";
+
+    expect(compareBenchmarkPair(input).claimIneligibleReasons).toContain("candidate browser network is not isolated");
+  });
+
+  it("recomputes runtime claim minima instead of trusting embedded eligibility flags", () => {
+    const input = validInput();
+    input.candidateRuntime.claimScope = [];
+    input.candidateRuntime.workload.lcpObservationMs = 1_000;
+    input.candidateRuntime.workload.widgetDataQuietMs = 100;
+    input.candidateRuntime.workload.settleMs = 1_000;
+    input.candidateRuntime.workload.settleSampleCount = 19;
+    input.candidateRuntime.checkpoints.pop();
+    const firstSample = input.candidateRuntime.workload.pageLoadSamples[0];
+    if (!firstSample) throw new Error("Missing runtime sample fixture");
+    firstSample.lcpMs = Number.POSITIVE_INFINITY;
+
+    const reasons = compareBenchmarkPair(input).claimIneligibleReasons;
+    expect(reasons).toContain("candidate runtime claim scope is incomplete");
+    expect(reasons).toContain("candidate runtime LCP observation is below 5000ms");
+    expect(reasons).toContain("candidate runtime widget-data quiet window is below 500ms");
+    expect(reasons).toContain("candidate runtime settle duration is below 600000ms");
+    expect(reasons).toContain("candidate runtime has fewer than 20 settle samples");
+    expect(reasons).toContain("candidate runtime metric lcpMs has invalid or missing samples");
+  });
+
+  it("recomputes measured cache-mount use instead of trusting build eligibility flags", () => {
+    const input = validInput();
+    const firstBuild = input.candidateBuilds[0];
+    const beforeMount = firstBuild?.builderCache.before?.cacheMounts[0];
+    const afterMount = firstBuild?.builderCache.after?.cacheMounts[0];
+    if (!beforeMount || !afterMount) throw new Error("Missing cache mount fixture");
+    afterMount.usageCount = beforeMount.usageCount;
+
+    expect(compareBenchmarkPair(input).claimIneligibleReasons).toContain(
+      "candidate repetition 1 build cache mount pnpm-store usage did not increase",
+    );
+  });
+
+  it("verifies actual settle chronology, LCP finalization, and immutable build fingerprints", () => {
+    const input = validInput();
+    const finalSettle = input.candidateRuntime.checkpoints.at(-1);
+    const firstSample = input.candidateRuntime.workload.pageLoadSamples[0];
+    const firstBuild = input.candidateBuilds[0];
+    if (!finalSettle || !firstSample || !firstBuild) throw new Error("Missing evidence fixture");
+    finalSettle.capturedAt = new Date(500_000).toISOString();
+    firstSample.lcpFinalizedByInputMs = 4_999;
+    firstBuild.image.sourceFingerprint = "wrong-fingerprint";
+
+    const reasons = compareBenchmarkPair(input).claimIneligibleReasons;
+    expect(reasons).toContain("candidate runtime checkpoint span is shorter than the declared settle duration");
+    expect(reasons).toContain("candidate runtime LCP samples were not observed and finalized for the declared window");
+    expect(reasons).toContain("candidate build image fingerprint does not match its immutable source snapshot");
+  });
+
+  it("rejects a contaminated warmup or cache use outside the measured chain", () => {
+    const input = validInput();
+    if (input.candidateWarmup.builderCache.before) input.candidateWarmup.builderCache.before.recordCount = 1;
+    if (input.baselineBuilds[0]?.builderCache.before) {
+      input.baselineBuilds[0].builderCache.before.recordsFingerprint = "unrecorded-cache-use";
+    }
+
+    const result = compareBenchmarkPair(input);
+    expect(result.claimIneligibleReasons).toContain("candidate warmup builder did not begin empty");
+    expect(result.claimIneligibleReasons).toContain("baseline builder cache changed outside repetition 1");
+  });
+
+  it("rejects overlapping builds and a stale runtime image with copied labels", () => {
+    const input = validInput();
+    const candidateFirst = input.candidateBuilds[0];
+    if (candidateFirst) candidateFirst.run.startedAt = input.baselineBuilds[0]?.run.startedAt ?? "";
+    input.candidateRuntime.image.id = "stale-image-with-matching-labels";
+
+    const result = compareBenchmarkPair(input);
+    expect(result.claimIneligibleReasons).toContain("build runs overlap between baseline:1 and candidate:1");
+    expect(result.claimIneligibleReasons).toContain(
+      "candidate runtime image identity does not match the candidate warmup image",
+    );
+  });
+});
diff --git a/scripts/benchmarks/board-static-graph.mts b/scripts/benchmarks/board-static-graph.mts
new file mode 100644
index 000000000..8c7dda589
--- /dev/null
+++ b/scripts/benchmarks/board-static-graph.mts
@@ -0,0 +1,235 @@
+import fs from "node:fs";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+import { parse } from "@babel/parser";
+
+export const getRuntimeModuleSpecifiers = (sourceText: string, fileName: string) => {
+  try {
+    const ast = parse(sourceText, { sourceFilename: fileName, sourceType: "module", plugins: ["typescript", "jsx"] });
+    return ast.program.body.flatMap((statement) => {
+      if (statement.type === "ImportDeclaration") {
+        if (statement.importKind === "type" || statement.importKind === "typeof") return [];
+        const hasRuntimeBinding =
+          statement.specifiers.length === 0 ||
+          statement.specifiers.some(
+            (specifier) => specifier.type !== "ImportSpecifier" || specifier.importKind !== "type",
+          );
+        return hasRuntimeBinding ? [statement.source.value] : [];
+      }
+      if (statement.type === "ExportAllDeclaration") {
+        return statement.exportKind === "type" ? [] : [statement.source.value];
+      }
+      if (statement.type === "ExportNamedDeclaration" && statement.source) {
+        if (statement.exportKind === "type") return [];
+        const hasRuntimeBinding =
+          statement.specifiers.length === 0 ||
+          statement.specifiers.some((specifier) => specifier.exportKind !== "type");
+        return hasRuntimeBinding ? [statement.source.value] : [];
+      }
+      return [];
+    });
+  } catch (error) {
+    throw new Error(`Unable to parse static imports in ${fileName}`, { cause: error });
+  }
+};
+
+const canonicalize = (fileName: string) => {
+  try {
+    return fs.realpathSync.native(fileName);
+  } catch {
+    return path.resolve(fileName);
+  }
+};
+
+const resolveFile = (candidate: string) => {
+  const candidates = path.extname(candidate)
+    ? [candidate]
+    : [
+        candidate,
+        `${candidate}.ts`,
+        `${candidate}.tsx`,
+        `${candidate}.mts`,
+        `${candidate}.js`,
+        `${candidate}.jsx`,
+        path.join(candidate, "index.ts"),
+        path.join(candidate, "index.tsx"),
+        path.join(candidate, "index.mts"),
+        path.join(candidate, "index.js"),
+      ];
+  return candidates.find((fileName) => fs.existsSync(fileName) && fs.statSync(fileName).isFile()) ?? null;
+};
+
+const firstExportTarget = (value: unknown): string | null => {
+  if (typeof value === "string") return value;
+  if (!value || typeof value !== "object") return null;
+  for (const nested of Object.values(value)) {
+    const target = firstExportTarget(nested);
+    if (target) return target;
+  }
+  return null;
+};
+
+const getPackageName = (specifier: string) => specifier.split("/").slice(0, 2).join("/");
+
+const resolvePackageExport = (exports: unknown, exportKey: string) => {
+  if (exportKey === "." && typeof exports === "string") return exports;
+  if (!exports || typeof exports !== "object") return null;
+  const exportMap = exports as Record<string, unknown>;
+  const exact = firstExportTarget(exportMap[exportKey]);
+  if (exact) return exact;
+
+  for (const [pattern, value] of Object.entries(exportMap)) {
+    const wildcard = pattern.indexOf("*");
+    if (wildcard < 0) continue;
+    const prefix = pattern.slice(0, wildcard);
+    const suffix = pattern.slice(wildcard + 1);
+    if (!exportKey.startsWith(prefix) || !exportKey.endsWith(suffix)) continue;
+    const match = exportKey.slice(prefix.length, exportKey.length - suffix.length);
+    const target = firstExportTarget(value);
+    if (target) return target.replaceAll("*", match);
+  }
+  return null;
+};
+
+const getWorkspacePackages = (root: string) => {
+  const packages = new Map<string, { directory: string; exports: unknown }>();
+  for (const parent of ["apps", "packages", "tooling"]) {
+    const parentDirectory = path.join(root, parent);
+    if (!fs.existsSync(parentDirectory)) continue;
+    for (const directoryEntry of fs.readdirSync(parentDirectory, { withFileTypes: true })) {
+      if (!directoryEntry.isDirectory()) continue;
+      const directory = path.join(parentDirectory, directoryEntry.name);
+      const manifestPath = path.join(directory, "package.json");
+      if (!fs.existsSync(manifestPath)) continue;
+      const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8")) as { name?: string; exports?: unknown };
+      if (manifest.name) packages.set(manifest.name, { directory, exports: manifest.exports });
+    }
+  }
+  return packages;
+};
+
+export const collectBoardStaticGraph = (repositoryRoot: string) => {
+  const root = canonicalize(repositoryRoot);
+  const entries = [
+    "apps/nextjs/src/app/[locale]/layout.tsx",
+    "apps/nextjs/src/app/[locale]/(home)/(board)/layout.tsx",
+    "apps/nextjs/src/app/[locale]/(home)/(board)/page.tsx",
+    "apps/nextjs/src/app/[locale]/boards/(content)/[name]/(board)/layout.tsx",
+    "apps/nextjs/src/app/[locale]/boards/(content)/[name]/(board)/page.tsx",
+    "apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx",
+  ].map((entry) => path.join(root, entry));
+  const workspacePackages = getWorkspacePackages(root);
+  const unresolvedWorkspaceImports: Array<{ importer: string; specifier: string }> = [];
+
+  const resolveSpecifier = (specifier: string, importer: string) => {
+    if (specifier.startsWith(".")) return resolveFile(path.resolve(path.dirname(importer), specifier));
+    if (specifier.startsWith("~/")) return resolveFile(path.join(root, "apps/nextjs/src", specifier.slice(2)));
+    if (specifier.startsWith("@static-data/")) {
+      return resolveFile(path.join(root, "static-data", specifier.slice("@static-data/".length)));
+    }
+    if (!specifier.startsWith("@homarr/") || specifier === "@homarr/node-unifi") return null;
+
+    const [, , ...subpathParts] = specifier.split("/");
+    const workspacePackage = workspacePackages.get(getPackageName(specifier));
+    if (!workspacePackage) return null;
+    const exportKey = subpathParts.length === 0 ? "." : `./${subpathParts.join("/")}`;
+    const target = resolvePackageExport(workspacePackage.exports, exportKey);
+    return target ? resolveFile(path.resolve(workspacePackage.directory, target)) : null;
+  };
+
+  const queue = [...entries];
+  const visited = new Set<string>();
+  const parents = new Map<string, { importer: string; specifier: string }>();
+  const bareWidgetImports: Array<{ importer: string; specifier: string }> = [];
+  const forbiddenModules = new Set([
+    path.join(root, "packages/widgets/index.ts"),
+    path.join(root, "packages/widgets/src/index.tsx"),
+    path.join(root, "packages/spotlight/src/component.ts"),
+    path.join(root, "packages/spotlight/src/components/spotlight.tsx"),
+    path.join(root, "packages/spotlight/src/spotlight-store.ts"),
+    path.join(root, "packages/widgets/src/modals/widget-edit-modal.tsx"),
+    path.join(root, "apps/nextjs/src/components/board/items/item-move-modal.tsx"),
+    path.join(root, "apps/nextjs/src/components/onboarding/board-tour.tsx"),
+    path.join(root, "apps/nextjs/src/components/onboarding/tour-shell.tsx"),
+  ]);
+
+  while (queue.length > 0) {
+    const next = queue.shift();
+    if (!next) continue;
+    const current = canonicalize(next);
+    if (visited.has(current)) continue;
+    visited.add(current);
+    if (!/\.[cm]?[jt]sx?$/.test(current)) continue;
+
+    const sourceText = fs.readFileSync(current, "utf8");
+    for (const specifier of getRuntimeModuleSpecifiers(sourceText, current)) {
+      if (specifier === "@homarr/widgets") bareWidgetImports.push({ importer: current, specifier });
+      const resolved = resolveSpecifier(specifier, current);
+      if (!resolved) {
+        if (workspacePackages.has(getPackageName(specifier))) {
+          unresolvedWorkspaceImports.push({ importer: current, specifier });
+        }
+        continue;
+      }
+      const target = canonicalize(resolved);
+      if (!target.startsWith(`${root}${path.sep}`) || target.includes(`${path.sep}node_modules${path.sep}`)) continue;
+      if (!parents.has(target)) parents.set(target, { importer: current, specifier });
+      queue.push(target);
+    }
+  }
+
+  const reachedForbiddenModules = [...forbiddenModules].filter((fileName) => visited.has(fileName));
+  const formatChain = (target: string) => {
+    const chain = [path.relative(root, target)];
+    let current = target;
+    while (parents.has(current)) {
+      const parent = parents.get(current);
+      if (!parent) break;
+      chain.unshift(`${path.relative(root, parent.importer)} --${parent.specifier}-->`);
+      current = parent.importer;
+    }
+    return chain.join(" ");
+  };
+
+  return {
+    entries: entries.map((entry) => path.relative(root, entry)),
+    visitedModuleCount: visited.size,
+    bareWidgetImports: bareWidgetImports.map(({ importer, specifier }) => ({
+      importer: path.relative(root, importer),
+      specifier,
+    })),
+    reachedForbiddenModules: reachedForbiddenModules.map(formatChain),
+    unresolvedWorkspaceImports: unresolvedWorkspaceImports.map(({ importer, specifier }) => ({
+      importer: path.relative(root, importer),
+      specifier,
+    })),
+  };
+};
+
+const run = () => {
+  const repositoryRoot = path.resolve(process.env.BOARD_GRAPH_ROOT ?? ".");
+  const result = collectBoardStaticGraph(repositoryRoot);
+  if (
+    result.bareWidgetImports.length > 0 ||
+    result.reachedForbiddenModules.length > 0 ||
+    result.unresolvedWorkspaceImports.length > 0
+  ) {
+    throw new Error(`Board static graph reaches a forbidden eager module:\n${JSON.stringify(result, null, 2)}`);
+  }
+  console.log(
+    JSON.stringify(
+      {
+        ...result,
+        eagerWidgetRegistryReachable: false,
+        eagerSpotlightImplementationReachable: false,
+        eagerWidgetEditorReachable: false,
+        eagerItemMoveEditorReachable: false,
+        eagerBoardTourReachable: false,
+      },
+      null,
+      2,
+    ),
+  );
+};
+
+if (process.argv[1] && import.meta.url === pathToFileURL(path.resolve(process.argv[1])).href) run();
diff --git a/scripts/benchmarks/board-static-graph.spec.ts b/scripts/benchmarks/board-static-graph.spec.ts
new file mode 100644
index 000000000..dede54b7d
--- /dev/null
+++ b/scripts/benchmarks/board-static-graph.spec.ts
@@ -0,0 +1,37 @@
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+import { collectBoardStaticGraph, getRuntimeModuleSpecifiers } from "./board-static-graph.mts";
+
+describe("board static dependency graph", () => {
+  it("ignores type-only and dynamic imports", () => {
+    expect(
+      getRuntimeModuleSpecifiers(
+        [
+          'import type { A } from "type-only";',
+          'import { type B } from "also-type-only";',
+          'import { C, type D } from "runtime";',
+          'export type { E } from "export-type";',
+          'export { type F } from "also-export-type";',
+          'export { G } from "runtime-export";',
+          'export * from "runtime-star";',
+          'import "runtime-side-effect";',
+          "import {",
+          "  H,",
+          "  type I,",
+          '} from "runtime-multiline";',
+          'void import("lazy");',
+        ].join("\n"),
+        "fixture.ts",
+      ),
+    ).toEqual(["runtime", "runtime-export", "runtime-star", "runtime-side-effect", "runtime-multiline"]);
+  });
+
+  it("keeps widget registries, editors, Spotlight, and onboarding tour out of the board's static graph", () => {
+    const result = collectBoardStaticGraph(path.resolve("."));
+    expect(result.visitedModuleCount).toBeGreaterThan(0);
+    expect(result.bareWidgetImports).toEqual([]);
+    expect(result.reachedForbiddenModules).toEqual([]);
+    expect(result.unresolvedWorkspaceImports).toEqual([]);
+  });
+});
diff --git a/scripts/benchmarks/dev-benchmark-lib.mts b/scripts/benchmarks/dev-benchmark-lib.mts
new file mode 100644
index 000000000..4113eaaf3
--- /dev/null
+++ b/scripts/benchmarks/dev-benchmark-lib.mts
@@ -0,0 +1,81 @@
+export type NumericSummary = {
+  count: number;
+  min: number | null;
+  median: number | null;
+  p95: number | null;
+  max: number | null;
+  standardDeviation: number | null;
+  outliers: number[];
+};
+
+export const normalizeTrpcPath = (requestUrl: string) => {
+  try {
+    const url = new URL(requestUrl, "http://benchmark.invalid");
+    url.searchParams.sort();
+    return url.pathname + url.search;
+  } catch {
+    return requestUrl;
+  }
+};
+
+export const countDuplicateTrpcPaths = (requestUrls: string[]) => {
+  const paths = requestUrls.map(normalizeTrpcPath);
+  return Math.max(0, paths.length - new Set(paths).size);
+};
+
+const values = (numbers: Array<number | null | undefined>) =>
+  numbers.filter((value): value is number => typeof value === "number" && value >= 0).toSorted((a, b) => a - b);
+
+export const summarize = (numbers: Array<number | null | undefined>): NumericSummary => {
+  const sorted = values(numbers);
+  if (sorted.length === 0) {
+    return { count: 0, min: null, median: null, p95: null, max: null, standardDeviation: null, outliers: [] };
+  }
+
+  const middleIndex = Math.floor(sorted.length / 2);
+  let median = sorted[middleIndex] ?? 0;
+  if (sorted.length % 2 === 0) {
+    median = ((sorted[middleIndex - 1] ?? 0) + median) / 2;
+  }
+  const p95Index = Math.min(sorted.length - 1, Math.ceil(sorted.length * 0.95) - 1);
+  const mean = sorted.reduce((total, value) => total + value, 0) / sorted.length;
+  const variance = sorted.reduce((total, value) => total + (value - mean) ** 2, 0) / sorted.length;
+  const firstQuartile = sorted[Math.floor((sorted.length - 1) * 0.25)] ?? 0;
+  const thirdQuartile = sorted[Math.floor((sorted.length - 1) * 0.75)] ?? 0;
+  const iqr = thirdQuartile - firstQuartile;
+  const outlierLimit = thirdQuartile + Math.max(1, iqr * 1.5);
+
+  return {
+    count: sorted.length,
+    min: sorted[0] ?? null,
+    median,
+    p95: sorted.length >= 20 ? (sorted[p95Index] ?? null) : null,
+    max: sorted.at(-1) ?? null,
+    standardDeviation: Math.round(Math.sqrt(variance)),
+    outliers: sorted.filter((value) => value > outlierLimit),
+  };
+};
+
+export const validateBrowserMeasurement = (measurement: {
+  responseStatus: number | null;
+  domContentLoadedMs: number;
+  boardHydratedMs: number | null;
+  widgetsReadyMs?: number | null;
+  widgetCount?: number;
+  coldImmediateInteractionMs?: number | null;
+  postIdleWarmInteractionMs?: number | null;
+  error?: string;
+}) => {
+  const errors: string[] = [];
+  if (measurement.error) errors.push(measurement.error);
+  if (measurement.responseStatus === null) errors.push("browser navigation returned no response");
+  else if (measurement.responseStatus < 200 || measurement.responseStatus >= 300)
+    errors.push(`browser navigation returned HTTP ${measurement.responseStatus}`);
+  if (measurement.domContentLoadedMs < 0) errors.push("DOMContentLoaded timing is missing");
+  if (measurement.boardHydratedMs === null) errors.push("board hydration marker is missing");
+  if (measurement.widgetsReadyMs === null) errors.push("widget readiness marker is missing");
+  if (measurement.widgetCount === 0) errors.push("representative board contains no widgets");
+  if (measurement.coldImmediateInteractionMs === null) errors.push("cold immediate interaction timing is missing");
+  if (measurement.postIdleWarmInteractionMs === null) errors.push("post-idle warm interaction timing is missing");
+  return errors;
+};
diff --git a/scripts/benchmarks/dev-benchmark-lib.spec.ts b/scripts/benchmarks/dev-benchmark-lib.spec.ts
new file mode 100644
index 000000000..b7755102d
--- /dev/null
+++ b/scripts/benchmarks/dev-benchmark-lib.spec.ts
@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  countDuplicateTrpcPaths,
+  normalizeTrpcPath,
+  summarize,
+  validateBrowserMeasurement,
+} from "./dev-benchmark-lib.mts";
+
+describe("development benchmark measurements", () => {
+  it("preserves tRPC input payloads when counting duplicates", () => {
+    const first = "/api/trpc/board.get?batch=1&input=%7B%22json%22%3A1%7D";
+    const second = "/api/trpc/board.get?batch=1&input=%7B%22json%22%3A2%7D";
+
+    expect(normalizeTrpcPath(first)).toBe("/api/trpc/board.get?batch=1&input=%7B%22json%22%3A1%7D");
+    expect(countDuplicateTrpcPaths([first, second, first, "/api/trpc/user.get"])).toBe(1);
+  });
+
+  it("reports median, p95, deviation, and high outliers", () => {
+    expect(summarize([1, 2, 3, 4, 5, 6, 100])).toEqual({
+      count: 7,
+      min: 1,
+      median: 4,
+      p95: null,
+      max: 100,
+      standardDeviation: 34,
+      outliers: [100],
+    });
+  });
+
+  it("averages both middle values for an even sample count", () => {
+    expect(summarize([100, 200]).median).toBe(150);
+    expect(summarize(Array.from({ length: 20 }, (_, index) => index + 1)).p95).toBe(19);
+  });
+
+  it("requires a successful authenticated board hydration and interaction", () => {
+    expect(
+      validateBrowserMeasurement({
+        responseStatus: 307,
+        domContentLoadedMs: 120,
+        boardHydratedMs: null,
+        widgetsReadyMs: null,
+        widgetCount: 0,
+        coldImmediateInteractionMs: null,
+        postIdleWarmInteractionMs: null,
+      }),
+    ).toEqual([
+      "browser navigation returned HTTP 307",
+      "board hydration marker is missing",
+      "widget readiness marker is missing",
+      "representative board contains no widgets",
+      "cold immediate interaction timing is missing",
+      "post-idle warm interaction timing is missing",
+    ]);
+  });
+});
diff --git a/scripts/benchmarks/dev-board.mts b/scripts/benchmarks/dev-board.mts
new file mode 100644
index 000000000..1765b1623
--- /dev/null
+++ b/scripts/benchmarks/dev-board.mts
@@ -0,0 +1,324 @@
+import fs from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+import { performance } from "node:perf_hooks";
+import type { BrowserContext, Page } from "@playwright/test";
+import { chromium } from "@playwright/test";
+
+import { countDuplicateTrpcPaths, summarize, validateBrowserMeasurement } from "./dev-benchmark-lib.mts";
+
+type BoardMeasurement = {
+  boardMountedMs: number;
+  domContentLoadedMs: number;
+  postIdleWarmInteractionMs: number;
+  widgetCount: number;
+  widgetsReadyMs: number;
+  pageErrors: string[];
+  responseStatus: number | null;
+  trpcDuplicateRequestCount: number;
+  trpcRequestCount: number;
+  webSocketCount: number;
+  performance: {
+    cls: number;
+    decodedScriptBytes: number;
+    jsHeapBytes: number | null;
+    lcpMs: number | null;
+    longTaskCount: number;
+    longTaskTotalMs: number;
+    resourceCount: number;
+    transferBytes: number;
+  };
+};
+
+const root = path.resolve(import.meta.dirname, "../..");
+const argumentsSet = new Set(process.argv.slice(2));
+const smokeOnly = argumentsSet.has("--smoke");
+const iterations = Number(process.env.DEV_BENCHMARK_ITERATIONS ?? 10);
+const spotlightIdleMs = Number(process.env.DEV_BENCHMARK_SPOTLIGHT_IDLE_MS ?? 2_500);
+const outputDirectory = path.resolve(
+  process.env.DEV_BENCHMARK_OUTPUT_DIR ?? path.join(root, "benchmark-results", "dev"),
+);
+const boardUrl = process.env.DEV_BENCHMARK_BOARD_URL;
+const storageStatePath = process.env.DEV_BENCHMARK_STORAGE_STATE;
+const readinessUrl = process.env.DEV_BENCHMARK_READINESS_URL ?? "http://127.0.0.1:3000/api/health/ready";
+const boardSelector = "[data-homarr-dev-benchmark-board]";
+const interactionSelector = '[data-homarr-dev-benchmark-interaction="search"]';
+const spotlightSelector = "[data-homarr-dev-benchmark-spotlight]";
+const spotlightFeedbackSelector =
+  "[data-homarr-dev-benchmark-spotlight-feedback], [data-homarr-dev-benchmark-spotlight]";
+
+if (!Number.isInteger(iterations) || iterations < 7) {
+  throw new Error("DEV_BENCHMARK_ITERATIONS must be an integer of at least 7");
+}
+if (!Number.isFinite(spotlightIdleMs) || spotlightIdleMs < 0) {
+  throw new Error("DEV_BENCHMARK_SPOTLIGHT_IDLE_MS must be non-negative");
+}
+
+await fs.mkdir(outputDirectory, { recursive: true });
+
+if (smokeOnly) {
+  const measurements: number[] = [];
+  for (let iteration = 0; iteration < iterations; iteration++) {
+    const startedAt = performance.now();
+    const response = await fetch(readinessUrl);
+    await response.arrayBuffer();
+    if (!response.ok) throw new Error(`Readiness smoke received HTTP ${response.status}`);
+    measurements.push(Math.round(performance.now() - startedAt));
+  }
+
+  const result = {
+    kind: "readiness-smoke",
+    claimEligible: false,
+    reason: "Readiness checks do not exercise the browser or dashboard graph",
+    url: readinessUrl,
+    iterations,
+    summary: summarize(measurements),
+  };
+  const outputPath = path.join(outputDirectory, `smoke-${Date.now()}.json`);
+  await fs.writeFile(outputPath, `${JSON.stringify(result, null, 2)}\n`);
+  console.log(JSON.stringify({ outputPath, result }, null, 2));
+  process.exit(0);
+}
+
+if (!boardUrl || !storageStatePath) {
+  throw new Error(
+    "Authenticated mode requires DEV_BENCHMARK_BOARD_URL and DEV_BENCHMARK_STORAGE_STATE. " +
+      "Use --smoke only for the non-claimable readiness check.",
+  );
+}
+
+await fs.access(storageStatePath);
+
+const installPerformanceObservers = () => {
+  const state = { cls: 0, lcpMs: null as number | null, longTaskCount: 0, longTaskTotalMs: 0 };
+  Object.defineProperty(window, "homarrBenchmarkVitals", { value: state, configurable: true });
+
+  if (PerformanceObserver.supportedEntryTypes.includes("largest-contentful-paint")) {
+    new PerformanceObserver((list) => {
+      const latest = list.getEntries().at(-1);
+      if (latest) state.lcpMs = latest.startTime;
+    }).observe({ type: "largest-contentful-paint", buffered: true });
+  }
+  if (PerformanceObserver.supportedEntryTypes.includes("layout-shift")) {
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        const shift = entry as PerformanceEntry & { hadRecentInput?: boolean; value?: number };
+        if (!shift.hadRecentInput) state.cls += shift.value ?? 0;
+      }
+    }).observe({ type: "layout-shift", buffered: true });
+  }
+  if (PerformanceObserver.supportedEntryTypes.includes("longtask")) {
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        state.longTaskCount += 1;
+        state.longTaskTotalMs += entry.duration;
+      }
+    }).observe({ type: "longtask", buffered: true });
+  }
+};
+
+const createContextAsync = async (): Promise<BrowserContext> => {
+  const context = await browser.newContext({ storageState: storageStatePath });
+  await context.addInitScript(installPerformanceObservers);
+  return context;
+};
+
+const browser = await chromium.launch();
+const freshContext: BoardMeasurement[] = [];
+const warmPage: BoardMeasurement[] = [];
+const coldInteractionSamples: Array<{ feedbackMs: number; readyMs: number }> = [];
+
+const measureBoardAsync = async (page: Page) => {
+  const trpcRequests: string[] = [];
+  const pageErrors: string[] = [];
+  let webSocketCount = 0;
+
+  page.on("request", (request) => {
+    if (request.url().includes("/api/trpc/")) trpcRequests.push(request.url());
+  });
+  page.on("websocket", () => {
+    webSocketCount += 1;
+  });
+  page.on("pageerror", (error) => pageErrors.push(error.message));
+
+  const startedAt = performance.now();
+  const response = await page.goto(boardUrl, { waitUntil: "domcontentloaded" });
+  const domContentLoadedMs = Math.round(performance.now() - startedAt);
+  await page.locator(boardSelector).waitFor({ state: "visible" });
+  const boardMountedMs = Math.round(performance.now() - startedAt);
+
+  await page.waitForFunction(
+    (selector) => {
+      const board = document.querySelector(selector);
+      if (!board) return false;
+      const widgetCount = board.querySelectorAll('[data-type="item"]').length;
+      return widgetCount > 0 && board.querySelectorAll("[data-homarr-widget-ready]").length === widgetCount;
+    },
+    boardSelector,
+    { timeout: 30_000 },
+  );
+  const widgetsReadyMs = Math.round(performance.now() - startedAt);
+  const widgetCount = await page.locator(`${boardSelector} [data-type="item"]`).count();
+
+  await page.waitForTimeout(spotlightIdleMs);
+  const warmInteractionStartedAt = performance.now();
+  await page.locator(`${interactionSelector}:visible`).click();
+  await page.locator(spotlightSelector).waitFor({ state: "visible" });
+  const postIdleWarmInteractionMs = Math.round(performance.now() - warmInteractionStartedAt);
+  await page.keyboard.press("Escape");
+  await page.locator(spotlightSelector).waitFor({ state: "hidden" });
+
+  const browserPerformance = await page.evaluate(() => {
+    const resources = performance.getEntriesByType("resource") as PerformanceResourceTiming[];
+    const vitals = (
+      window as Window & {
+        homarrBenchmarkVitals?: {
+          cls: number;
+          lcpMs: number | null;
+          longTaskCount: number;
+          longTaskTotalMs: number;
+        };
+      }
+    ).homarrBenchmarkVitals;
+    const memory = performance as Performance & { memory?: { usedJSHeapSize: number } };
+    return {
+      cls: Number((vitals?.cls ?? 0).toFixed(4)),
+      decodedScriptBytes: resources
+        .filter((resource) => resource.initiatorType === "script")
+        .reduce((total, resource) => total + resource.decodedBodySize, 0),
+      jsHeapBytes: memory.memory?.usedJSHeapSize ?? null,
+      lcpMs: vitals?.lcpMs === null || vitals?.lcpMs === undefined ? null : Math.round(vitals.lcpMs),
+      longTaskCount: vitals?.longTaskCount ?? 0,
+      longTaskTotalMs: Math.round(vitals?.longTaskTotalMs ?? 0),
+      resourceCount: resources.length,
+      transferBytes: resources.reduce((total, resource) => total + resource.transferSize, 0),
+    };
+  });
+
+  const measurement: BoardMeasurement = {
+    responseStatus: response?.status() ?? null,
+    domContentLoadedMs,
+    boardMountedMs,
+    widgetsReadyMs,
+    widgetCount,
+    postIdleWarmInteractionMs,
+    trpcRequestCount: trpcRequests.length,
+    trpcDuplicateRequestCount: countDuplicateTrpcPaths(trpcRequests),
+    webSocketCount,
+    performance: browserPerformance,
+    pageErrors,
+  };
+  const errors = validateBrowserMeasurement({
+    responseStatus: measurement.responseStatus,
+    domContentLoadedMs,
+    boardHydratedMs: boardMountedMs,
+    widgetsReadyMs,
+    widgetCount,
+    postIdleWarmInteractionMs,
+    error: pageErrors.length > 0 ? pageErrors.join("; ") : undefined,
+  });
+  if (errors.length > 0) throw new Error(errors.map((error) => `${boardUrl}: ${error}`).join("; "));
+
+  return measurement;
+};
+
+const measureColdInteractionAsync = async (page: Page) => {
+  const pageErrors: string[] = [];
+  page.on("pageerror", (error) => pageErrors.push(error.message));
+
+  const response = await page.goto(boardUrl, { waitUntil: "domcontentloaded" });
+  if (!response?.ok()) {
+    throw new Error(`Cold-interaction board returned HTTP ${String(response?.status() ?? "none")}`);
+  }
+  await page.locator(boardSelector).waitFor({ state: "visible" });
+  const interactionStartedAt = performance.now();
+  await page.locator(`${interactionSelector}:visible`).click();
+  await page.locator(spotlightFeedbackSelector).waitFor({ state: "visible" });
+  const feedbackMs = Math.round(performance.now() - interactionStartedAt);
+  await page.locator(spotlightSelector).waitFor({ state: "visible" });
+  const readyMs = Math.round(performance.now() - interactionStartedAt);
+  if (pageErrors.length > 0) throw new Error(`Cold-interaction page errors: ${pageErrors.join("; ")}`);
+  return { feedbackMs, readyMs };
+};
+
+try {
+  for (let iteration = 0; iteration < iterations; iteration++) {
+    const context = await createContextAsync();
+    const firstPage = await context.newPage();
+    freshContext.push(await measureBoardAsync(firstPage));
+    await firstPage.close();
+    const secondPage = await context.newPage();
+    warmPage.push(await measureBoardAsync(secondPage));
+    await context.close();
+
+    const coldContext = await createContextAsync();
+    await coldContext.addInitScript(() => {
+      // Measure the actual first-open path instead of racing the intentional
+      // requestIdleCallback prefetch used during normal idle time.
+      Object.defineProperty(window, "requestIdleCallback", { value: () => 0, configurable: true });
+      Object.defineProperty(window, "cancelIdleCallback", { value: () => undefined, configurable: true });
+    });
+    const coldPage = await coldContext.newPage();
+    coldInteractionSamples.push(await measureColdInteractionAsync(coldPage));
+    await coldContext.close();
+  }
+} finally {
+  await browser.close();
+}
+
+const summarizeMeasurements = (measurements: BoardMeasurement[]) => ({
+  boardMountedMs: summarize(measurements.map(({ boardMountedMs }) => boardMountedMs)),
+  widgetsReadyMs: summarize(measurements.map(({ widgetsReadyMs }) => widgetsReadyMs)),
+  domContentLoadedMs: summarize(measurements.map(({ domContentLoadedMs }) => domContentLoadedMs)),
+  postIdleWarmInteractionMs: summarize(measurements.map(({ postIdleWarmInteractionMs }) => postIdleWarmInteractionMs)),
+  lcpMs: summarize(measurements.map(({ performance: browserPerformance }) => browserPerformance.lcpMs)),
+  cls: summarize(measurements.map(({ performance: browserPerformance }) => browserPerformance.cls)),
+  longTaskTotalMs: summarize(
+    measurements.map(({ performance: browserPerformance }) => browserPerformance.longTaskTotalMs),
+  ),
+  decodedScriptBytes: summarize(
+    measurements.map(({ performance: browserPerformance }) => browserPerformance.decodedScriptBytes),
+  ),
+  transferBytes: summarize(measurements.map(({ performance: browserPerformance }) => browserPerformance.transferBytes)),
+  jsHeapBytes: summarize(measurements.map(({ performance: browserPerformance }) => browserPerformance.jsHeapBytes)),
+  trpcRequests: summarize(measurements.map(({ trpcRequestCount }) => trpcRequestCount)),
+  duplicateTrpcRequests: summarize(measurements.map(({ trpcDuplicateRequestCount }) => trpcDuplicateRequestCount)),
+});
+
+const sha = process.env.DEV_BENCHMARK_SHA ?? null;
+const image = process.env.DEV_BENCHMARK_IMAGE ?? null;
+const runtime = process.env.DEV_BENCHMARK_RUNTIME ?? "development";
+const claimEligible = false;
+const result = {
+  kind: "authenticated-board",
+  claimEligible,
+  claimIneligibleReasons: [
+    "served revision and production runtime are self-reported, not independently verified",
+    ...(runtime === "production" ? [] : ["runtime is not production"]),
+    ...(sha ? [] : ["DEV_BENCHMARK_SHA is missing"]),
+    ...(image ? [] : ["DEV_BENCHMARK_IMAGE is missing"]),
+  ],
+  boardUrl,
+  createdAt: new Date().toISOString(),
+  environment: {
+    architecture: process.arch,
+    cpus: os.cpus().map(({ model }) => model),
+    image,
+    node: process.version,
+    platform: `${process.platform} ${os.release()}`,
+    runtime,
+    sha,
+  },
+  iterations,
+  spotlightIdleMs,
+  measurements: { freshContext, warmPage, coldInteractionSamples },
+  summary: {
+    coldInteractionFeedbackMs: summarize(coldInteractionSamples.map(({ feedbackMs }) => feedbackMs)),
+    coldInteractionReadyMs: summarize(coldInteractionSamples.map(({ readyMs }) => readyMs)),
+    freshContext: summarizeMeasurements(freshContext),
+    warmPage: summarizeMeasurements(warmPage),
+  },
+};
+const outputPath = path.join(outputDirectory, `board-${Date.now()}.json`);
+await fs.writeFile(outputPath, `${JSON.stringify(result, null, 2)}\n`);
+console.log(JSON.stringify({ outputPath, claimEligible, summary: result.summary }, null, 2));
diff --git a/scripts/benchmarks/docker-build-lib.mts b/scripts/benchmarks/docker-build-lib.mts
new file mode 100644
index 000000000..4eaebcdad
--- /dev/null
+++ b/scripts/benchmarks/docker-build-lib.mts
@@ -0,0 +1,259 @@
+import { createHash } from "node:crypto";
+
+export type DockerBuildSourceEntry =
+  | { file: string; mode: number; content: Buffer; linkTarget?: never }
+  | { file: string; mode: number; content?: never; linkTarget: string };
+
+export type DockerBuildSyntheticSourceChange = {
+  file: string;
+  id: string;
+  from: string;
+  to: string;
+};
+
+export const nextBuildCacheTarget = "/app/apps/nextjs/.next/cache";
+
+export type ExpectedDockerBuildCacheMount = {
+  logicalId: string;
+  target: string;
+  mustIncreaseUsage: boolean;
+};
+
+export type DockerBuildCacheMount = {
+  description: string | null;
+  logicalId: string | null;
+  recordId: string;
+  size: string | null;
+  target: string | null;
+  usageCount: number | null;
+};
+
+export type DockerBuildCacheSnapshot = {
+  cacheMountCount: number;
+  cacheMounts: DockerBuildCacheMount[];
+  recordCount: number;
+};
+
+export const fingerprintDockerBuildSource = (entries: DockerBuildSourceEntry[]) => {
+  const hash = createHash("sha256");
+  for (const entry of entries.toSorted((left, right) => left.file.localeCompare(right.file))) {
+    hash.update(entry.file);
+    hash.update("\0");
+    hash.update(String(entry.mode));
+    hash.update("\0");
+    hash.update(entry.linkTarget ?? entry.content);
+    hash.update("\0");
+  }
+  return hash.digest("hex");
+};
+
+export const applyDockerBuildSyntheticSourceChange = (
+  entries: DockerBuildSourceEntry[],
+  id: string,
+): { entries: DockerBuildSourceEntry[]; change: DockerBuildSyntheticSourceChange } => {
+  const file = "apps/nextjs/src/app/[locale]/layout.tsx";
+  const from = 'siteName: "Homarr",';
+  const to = `siteName: ${JSON.stringify(`Homarr build benchmark ${id}`)},`;
+  let changed = false;
+  const nextEntries = entries.map((entry) => {
+    if (entry.file !== file || entry.content === undefined) return entry;
+    const source = entry.content.toString("utf8");
+    if (source.split(from).length !== 2) {
+      throw new Error(`Expected exactly one build benchmark source marker in ${file}`);
+    }
+    changed = true;
+    return { ...entry, content: Buffer.from(source.replace(from, to)) };
+  });
+  if (!changed) throw new Error(`Build benchmark source marker file is missing: ${file}`);
+  return { entries: nextEntries, change: { file, id, from, to } };
+};
+
+const expandDockerfileMountValue = (value: string, variables: Record<string, string>) => {
+  const expanded = value.replaceAll(
+    /\$(?:\{([A-Za-z_][A-Za-z0-9_]*)\}|([A-Za-z_][A-Za-z0-9_]*))/g,
+    (reference, braced, plain) => {
+      const name = (braced ?? plain) as string;
+      const replacement = variables[name];
+      if (replacement === undefined) {
+        throw new Error(`Dockerfile cache mount contains unresolved variable ${reference}`);
+      }
+      return replacement;
+    },
+  );
+  if (expanded.includes("$")) {
+    throw new Error(`Dockerfile cache mount contains unresolved variable in ${value}`);
+  }
+  return expanded;
+};
+
+export const parseDockerfileCacheMounts = (
+  dockerfile: string,
+  targetPlatform: string,
+): ExpectedDockerBuildCacheMount[] => {
+  const mounts = [...dockerfile.matchAll(/--mount=([^\s\\]+)/g)]
+    .map(([, serialized = ""]) =>
+      Object.fromEntries(
+        serialized.split(",").map((option) => {
+          const separator = option.indexOf("=");
+          return separator === -1 ? [option, ""] : [option.slice(0, separator), option.slice(separator + 1)];
+        }),
+      ),
+    )
+    .filter(({ type }) => type === "cache")
+    .map((options) => {
+      const id = options.id;
+      const target = options.target ?? options.dst ?? options.destination;
+      if (!id || !target) {
+        throw new Error("Dockerfile cache mounts must declare explicit id and target options");
+      }
+      const variables = { TARGETPLATFORM: targetPlatform };
+      const logicalId = expandDockerfileMountValue(id, variables);
+      const expandedTarget = expandDockerfileMountValue(target, variables);
+      return {
+        logicalId,
+        target: expandedTarget,
+        mustIncreaseUsage: expandedTarget === nextBuildCacheTarget,
+      };
+    });
+
+  const uniqueMounts = new Map(mounts.map((mount) => [`${mount.logicalId}\0${mount.target}`, mount]));
+  return [...uniqueMounts.values()].toSorted(
+    (left, right) => left.logicalId.localeCompare(right.logicalId) || left.target.localeCompare(right.target),
+  );
+};
+
+export const parseDockerBuildCacheMountDescription = (description: string | null) => {
+  if (!description) return null;
+  const match = /^cached mount (\S+) from exec .* with id "(\/[^"\n]+)"$/.exec(description);
+  if (!match) return null;
+  const [, target = "", printedId = ""] = match;
+  return { logicalId: printedId.slice(1), target };
+};
+
+export const normalizeDockerArchitecture = (architecture: string) => {
+  switch (architecture.toLowerCase()) {
+    case "x64":
+    case "x86_64":
+      return "amd64";
+    case "aarch64":
+      return "arm64";
+    case "armv6l":
+      return "arm/v6";
+    case "armv7l":
+      return "arm/v7";
+    default:
+      return architecture.toLowerCase();
+  }
+};
+
+export const parseDockerBuildOutput = (output: string) => {
+  const compileDurationsMs = [...output.matchAll(/Compiled (?:successfully )?in\s+([\d.]+)\s*(ms|s)/gi)].map(
+    ([, value = "0", unit = "ms"]) => Number(value) * (unit.toLowerCase() === "s" ? 1_000 : 1),
+  );
+
+  return {
+    cachedStepCount: (output.match(/^#\d+ CACHED$/gm) ?? []).length,
+    completedStepCount: (output.match(/^#\d+ DONE(?:\s+[\d.]+s)?$/gm) ?? []).length,
+    nextCompileMs: compileDurationsMs.at(-1) ?? null,
+  };
+};
+
+export const getMeasuredRevision = (headSha: string, dirty: boolean) => (dirty ? `${headSha}+worktree` : headSha);
+
+export const getBuildCacheStateIneligibleReasons = (
+  cacheState: string | null,
+  snapshot: DockerBuildCacheSnapshot | null,
+  expectedMounts: ExpectedDockerBuildCacheMount[],
+) => {
+  if (cacheState !== "cold" && cacheState !== "warm") {
+    return ["BUILD_BENCHMARK_CACHE_STATE must be cold or warm"];
+  }
+  if (!snapshot) return ["Docker builder cache state could not be inspected"];
+  if (cacheState === "cold" && snapshot.recordCount !== 0) {
+    return [`cold builder already contains ${snapshot.recordCount} cache records`];
+  }
+  if (cacheState === "warm" && expectedMounts.length === 0) {
+    return ["Dockerfile declares no cache mounts for a warm build"];
+  }
+  if (cacheState === "warm") {
+    return expectedMounts.flatMap((expected) => {
+      const matches = snapshot.cacheMounts.filter(
+        ({ logicalId, target }) => logicalId === expected.logicalId && target === expected.target,
+      );
+      if (matches.length === 0) {
+        return [`warm builder is missing cache mount ${expected.logicalId} at ${expected.target}`];
+      }
+      if (matches.length > 1) {
+        return [`warm builder contains duplicate cache mounts ${expected.logicalId} at ${expected.target}`];
+      }
+      return [];
+    });
+  }
+  return [];
+};
+
+export const getBuildCacheContinuityIneligibleReasons = (
+  cacheState: string | null,
+  before: DockerBuildCacheSnapshot | null,
+  after: DockerBuildCacheSnapshot | null,
+  expectedMounts: ExpectedDockerBuildCacheMount[],
+) => {
+  if (cacheState !== "warm") return [];
+  if (!before || !after) return ["warm builder cache continuity could not be inspected"];
+
+  return expectedMounts.flatMap((expected) => {
+    const beforeMatches = before.cacheMounts.filter(
+      ({ logicalId, target }) => logicalId === expected.logicalId && target === expected.target,
+    );
+    const afterMatches = after.cacheMounts.filter(
+      ({ logicalId, target }) => logicalId === expected.logicalId && target === expected.target,
+    );
+    if (beforeMatches.length !== 1 || afterMatches.length !== 1) {
+      return [`warm cache mount ${expected.logicalId} at ${expected.target} could not be traced across the build`];
+    }
+    const beforeMount = beforeMatches[0];
+    const afterMount = afterMatches[0];
+    if (!beforeMount || !afterMount || beforeMount.recordId !== afterMount.recordId) {
+      return [`warm cache mount ${expected.logicalId} at ${expected.target} was replaced during the build`];
+    }
+    if (!expected.mustIncreaseUsage) return [];
+    if (beforeMount.usageCount === null || afterMount.usageCount === null) {
+      return [`warm cache mount ${expected.logicalId} usage could not be verified`];
+    }
+    if (afterMount.usageCount <= beforeMount.usageCount) {
+      return [`warm cache mount ${expected.logicalId} was not used by the application build`];
+    }
+    return [];
+  });
+};
+
+export const getDockerBuildClaimIneligibleReasons = ({
+  expectedRevision,
+  expectedSourceFingerprint,
+  imageArchitecture,
+  imageRevision,
+  imageSourceFingerprint,
+  expectedImageArchitecture,
+}: {
+  expectedRevision: string | null;
+  expectedSourceFingerprint: string;
+  imageArchitecture: string;
+  imageRevision: string | null;
+  imageSourceFingerprint: string | null;
+  expectedImageArchitecture: string;
+}) => {
+  const reasons: string[] = [];
+
+  if (!expectedRevision) reasons.push("BUILD_BENCHMARK_REVISION is missing");
+  else if (imageRevision !== expectedRevision) {
+    reasons.push(`image revision ${imageRevision ?? "missing"} does not match ${expectedRevision}`);
+  }
+  if (imageSourceFingerprint !== expectedSourceFingerprint) {
+    reasons.push("image source fingerprint does not match the measured context");
+  }
+  if (imageArchitecture !== expectedImageArchitecture) {
+    reasons.push(`image architecture ${imageArchitecture} is not Docker server ${expectedImageArchitecture}`);
+  }
+
+  return reasons;
+};
diff --git a/scripts/benchmarks/docker-build-lib.spec.ts b/scripts/benchmarks/docker-build-lib.spec.ts
new file mode 100644
index 000000000..f2b4ac9a2
--- /dev/null
+++ b/scripts/benchmarks/docker-build-lib.spec.ts
@@ -0,0 +1,224 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  applyDockerBuildSyntheticSourceChange,
+  fingerprintDockerBuildSource,
+  getBuildCacheContinuityIneligibleReasons,
+  getBuildCacheStateIneligibleReasons,
+  getDockerBuildClaimIneligibleReasons,
+  getMeasuredRevision,
+  nextBuildCacheTarget,
+  normalizeDockerArchitecture,
+  parseDockerBuildCacheMountDescription,
+  parseDockerBuildOutput,
+  parseDockerfileCacheMounts,
+} from "./docker-build-lib.mts";
+
+const pnpmMount = { logicalId: "pnpm-store", target: "/pnpm/store", mustIncreaseUsage: false };
+const nextMount = {
+  logicalId: "homarr-next-build-linux/arm64",
+  target: nextBuildCacheTarget,
+  mustIncreaseUsage: true,
+};
+const cacheRecord = ({
+  logicalId,
+  recordId,
+  target,
+  usageCount,
+}: {
+  logicalId: string;
+  recordId: string;
+  target: string;
+  usageCount: number | null;
+}) => ({
+  description: `cached mount ${target} from exec benchmark with id "/${logicalId}"`,
+  logicalId,
+  recordId,
+  size: "1MB",
+  target,
+  usageCount,
+});
+
+describe("Docker build benchmark", () => {
+  it("fingerprints the exact imported source mutation used to force incremental compilation", () => {
+    const entries = [
+      {
+        file: "apps/nextjs/src/app/[locale]/layout.tsx",
+        mode: 0o100644,
+        content: Buffer.from('openGraph: {\n    siteName: "Homarr",\n  },\n'),
+      },
+    ];
+    const before = fingerprintDockerBuildSource(entries);
+    const { entries: changedEntries, change } = applyDockerBuildSyntheticSourceChange(entries, "paired-edit-1");
+
+    expect(change).toEqual({
+      file: "apps/nextjs/src/app/[locale]/layout.tsx",
+      id: "paired-edit-1",
+      from: 'siteName: "Homarr",',
+      to: 'siteName: "Homarr build benchmark paired-edit-1",',
+    });
+    expect(changedEntries[0]?.content?.toString("utf8")).toContain(change.to);
+    expect(fingerprintDockerBuildSource(changedEntries)).not.toBe(before);
+  });
+
+  it("fails closed when the real source marker is absent or ambiguous", () => {
+    expect(() =>
+      applyDockerBuildSyntheticSourceChange(
+        [{ file: "apps/nextjs/src/app/[locale]/layout.tsx", mode: 0o100644, content: Buffer.from("no marker") }],
+        "edit",
+      ),
+    ).toThrow("Expected exactly one build benchmark source marker");
+    expect(() => applyDockerBuildSyntheticSourceChange([], "edit")).toThrow("source marker file is missing");
+  });
+
+  it("derives the exact context-specific cache mounts for the target platform", () => {
+    const dockerfile = `RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store echo fetch
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store echo install
+RUN --mount=type=cache,id=homarr-next-build-\${TARGETPLATFORM},target=${nextBuildCacheTarget},sharing=locked echo build`;
+
+    expect(parseDockerfileCacheMounts(dockerfile, "linux/arm64")).toEqual([nextMount, pnpmMount]);
+    expect(parseDockerfileCacheMounts(dockerfile.split("\n").slice(0, 2).join("\n"), "linux/arm64")).toEqual([
+      pnpmMount,
+    ]);
+  });
+
+  it("fails closed for implicit or unresolved Dockerfile cache mount identity", () => {
+    expect(() => parseDockerfileCacheMounts("RUN --mount=type=cache,target=/cache echo build", "linux/arm64")).toThrow(
+      "explicit id and target",
+    );
+    expect(() =>
+      parseDockerfileCacheMounts(
+        "RUN --mount=type=cache,id=homarr-${BUILDPLATFORM},target=/cache echo build",
+        "linux/arm64",
+      ),
+    ).toThrow("unresolved variable ${BUILDPLATFORM}");
+    expect(() =>
+      parseDockerfileCacheMounts(
+        "RUN --mount=type=cache,id=homarr-${INVALID-NAME},target=/cache echo build",
+        "linux/arm64",
+      ),
+    ).toThrow("unresolved variable");
+  });
+
+  it("reads exact logical cache identity from real buildx du descriptions", () => {
+    expect(
+      parseDockerBuildCacheMountDescription(
+        'cached mount /app/apps/nextjs/.next/cache from exec /bin/sh -c pnpm build with id "/homarr-next-build-linux/arm64"',
+      ),
+    ).toEqual({ logicalId: "homarr-next-build-linux/arm64", target: nextBuildCacheTarget });
+    expect(parseDockerBuildCacheMountDescription("unrecognized output")).toBeNull();
+  });
+
+  it("extracts cache and Next compilation measurements from plain BuildKit output", () => {
+    const output = `#7 CACHED
+#8 DONE 0.4s
+#9 12.0 ✓ Compiled successfully in 21.7s
+#9 DONE 22.3s`;
+
+    expect(parseDockerBuildOutput(output)).toEqual({
+      cachedStepCount: 1,
+      completedStepCount: 2,
+      nextCompileMs: 21_700,
+    });
+  });
+
+  it("only permits claims for a native image labeled with the exact measured source", () => {
+    expect(
+      getDockerBuildClaimIneligibleReasons({
+        expectedRevision: "head+worktree",
+        expectedSourceFingerprint: "source-hash",
+        imageArchitecture: "amd64",
+        imageRevision: "head+worktree",
+        imageSourceFingerprint: "source-hash",
+        expectedImageArchitecture: "amd64",
+      }),
+    ).toEqual([]);
+  });
+
+  it("normalizes Docker server architectures into OCI platform names", () => {
+    expect(normalizeDockerArchitecture("x86_64")).toBe("amd64");
+    expect(normalizeDockerArchitecture("aarch64")).toBe("arm64");
+    expect(normalizeDockerArchitecture("armv7l")).toBe("arm/v7");
+  });
+
+  it("derives revisions from Git state instead of trusting image-label input", () => {
+    expect(getMeasuredRevision("abc123", false)).toBe("abc123");
+    expect(getMeasuredRevision("abc123", true)).toBe("abc123+worktree");
+  });
+
+  it("verifies declared cold and warm cache preconditions", () => {
+    const empty = { cacheMountCount: 0, cacheMounts: [], recordCount: 0 };
+    const warm = {
+      cacheMountCount: 2,
+      cacheMounts: [
+        cacheRecord({ logicalId: pnpmMount.logicalId, recordId: "pnpm", target: pnpmMount.target, usageCount: 2 }),
+        cacheRecord({ logicalId: nextMount.logicalId, recordId: "next", target: nextMount.target, usageCount: 4 }),
+      ],
+      recordCount: 4,
+    };
+    expect(getBuildCacheStateIneligibleReasons("cold", empty, [pnpmMount])).toEqual([]);
+    expect(getBuildCacheStateIneligibleReasons("cold", warm, [pnpmMount])).toEqual([
+      "cold builder already contains 4 cache records",
+    ]);
+    expect(getBuildCacheStateIneligibleReasons("warm", warm, [pnpmMount, nextMount])).toEqual([]);
+
+    const staleNext = {
+      ...warm,
+      cacheMounts: [
+        warm.cacheMounts[0]!,
+        cacheRecord({
+          logicalId: "homarr-next-build",
+          recordId: "old-next",
+          target: nextBuildCacheTarget,
+          usageCount: 9,
+        }),
+      ],
+    };
+    expect(getBuildCacheStateIneligibleReasons("warm", staleNext, [pnpmMount, nextMount])).toEqual([
+      `warm builder is missing cache mount ${nextMount.logicalId} at ${nextBuildCacheTarget}`,
+    ]);
+  });
+
+  it("requires every warm cache record to survive and the Next cache to be used", () => {
+    const before = {
+      cacheMountCount: 2,
+      cacheMounts: [
+        cacheRecord({ logicalId: pnpmMount.logicalId, recordId: "pnpm", target: pnpmMount.target, usageCount: 2 }),
+        cacheRecord({ logicalId: nextMount.logicalId, recordId: "next", target: nextMount.target, usageCount: 4 }),
+      ],
+      recordCount: 4,
+    };
+    const after = {
+      cacheMountCount: 2,
+      cacheMounts: [
+        cacheRecord({ logicalId: pnpmMount.logicalId, recordId: "pnpm", target: pnpmMount.target, usageCount: 2 }),
+        cacheRecord({ logicalId: nextMount.logicalId, recordId: "next", target: nextMount.target, usageCount: 6 }),
+      ],
+      recordCount: 8,
+    };
+
+    expect(getBuildCacheContinuityIneligibleReasons("warm", before, after, [pnpmMount, nextMount])).toEqual([]);
+    expect(
+      getBuildCacheContinuityIneligibleReasons(
+        "warm",
+        before,
+        {
+          ...after,
+          cacheMounts: [after.cacheMounts[0]!, { ...after.cacheMounts[1]!, recordId: "replacement" }],
+        },
+        [pnpmMount, nextMount],
+      ),
+    ).toEqual([`warm cache mount ${nextMount.logicalId} at ${nextBuildCacheTarget} was replaced during the build`]);
+    expect(
+      getBuildCacheContinuityIneligibleReasons(
+        "warm",
+        before,
+        {
+          ...after,
+          cacheMounts: [after.cacheMounts[0]!, { ...after.cacheMounts[1]!, usageCount: 4 }],
+        },
+        [pnpmMount, nextMount],
+      ),
+    ).toEqual([`warm cache mount ${nextMount.logicalId} was not used by the application build`]);
+  });
+});
diff --git a/scripts/benchmarks/docker-build.mts b/scripts/benchmarks/docker-build.mts
new file mode 100644
index 000000000..5df7e1fcc
--- /dev/null
+++ b/scripts/benchmarks/docker-build.mts
@@ -0,0 +1,351 @@
+import { execFile, spawn } from "node:child_process";
+import { createHash } from "node:crypto";
+import { chmod, lstat, mkdir, mkdtemp, readFile, readlink, rm, symlink, writeFile } from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+import { performance } from "node:perf_hooks";
+import { promisify } from "node:util";
+
+import {
+  applyDockerBuildSyntheticSourceChange,
+  fingerprintDockerBuildSource,
+  getBuildCacheContinuityIneligibleReasons,
+  getBuildCacheStateIneligibleReasons,
+  getDockerBuildClaimIneligibleReasons,
+  getMeasuredRevision,
+  normalizeDockerArchitecture,
+  parseDockerBuildCacheMountDescription,
+  parseDockerBuildOutput,
+  parseDockerfileCacheMounts,
+} from "./docker-build-lib.mts";
+import type { DockerBuildSourceEntry } from "./docker-build-lib.mts";
+
+const runStartedAt = new Date().toISOString();
+const execFileAsync = promisify(execFile);
+const contextDirectory = path.resolve(process.env.BUILD_BENCHMARK_CONTEXT ?? ".");
+const declaredRevision = process.env.BUILD_BENCHMARK_REVISION?.trim() || null;
+const mode = process.env.BUILD_BENCHMARK_MODE ?? "cached";
+if (mode !== "cached" && mode !== "no-cache" && mode !== "source-change") {
+  throw new Error("BUILD_BENCHMARK_MODE must be cached, no-cache, or source-change");
+}
+const sourceChangeId = process.env.BUILD_BENCHMARK_SOURCE_CHANGE_ID?.trim() || null;
+if (mode === "source-change" && !sourceChangeId) {
+  throw new Error("BUILD_BENCHMARK_SOURCE_CHANGE_ID is required in source-change mode");
+}
+
+const imageTag = process.env.BUILD_BENCHMARK_IMAGE ?? `homarr-build-benchmark:${process.pid}`;
+const builder = process.env.BUILD_BENCHMARK_BUILDER?.trim() || null;
+const runLabel = process.env.BUILD_BENCHMARK_RUN_LABEL?.trim() || null;
+const seriesId = process.env.BUILD_BENCHMARK_SERIES_ID?.trim() || null;
+const cacheState = process.env.BUILD_BENCHMARK_CACHE_STATE?.trim() || null;
+const repetition = Number(process.env.BUILD_BENCHMARK_REPETITION ?? 0);
+const totalRepetitions = Number(process.env.BUILD_BENCHMARK_TOTAL_REPETITIONS ?? 0);
+const outputDirectory = path.resolve(process.env.BUILD_BENCHMARK_OUTPUT_DIR ?? "benchmark-results/docker-build");
+const cacheSnapshotPollMs = 2_000;
+const cacheSnapshotStableMs = 10_000;
+const cacheSnapshotTimeoutMs = 30_000;
+const execGitAsync = async (args: string[]) =>
+  await execFileAsync("git", ["-C", contextDirectory, ...args], { maxBuffer: 16 * 1024 * 1024 });
+
+const inspectDockerServerAsync = async () => {
+  const { stdout } = await execFileAsync("docker", ["version", "--format", "{{json .Server}}"], {
+    maxBuffer: 16 * 1024 * 1024,
+  });
+  const server = JSON.parse(stdout) as {
+    ApiVersion?: string;
+    Arch?: string;
+    Os?: string;
+    Version?: string;
+  } | null;
+  if (!server?.Arch || !server.Os) throw new Error("Docker server OS and architecture could not be inspected");
+  const architecture = normalizeDockerArchitecture(server.Arch);
+  return {
+    apiVersion: server.ApiVersion ?? null,
+    architecture,
+    operatingSystem: server.Os.toLowerCase(),
+    targetPlatform: `${server.Os.toLowerCase()}/${architecture}`,
+    version: server.Version ?? null,
+  };
+};
+
+const fingerprintSourceAsync = async () => {
+  const { stdout } = await execGitAsync(["ls-files", "--cached", "--others", "--exclude-standard", "-z"]);
+  const files = stdout.split("\0").filter(Boolean).toSorted();
+  let fileCount = 0;
+  const entries: DockerBuildSourceEntry[] = [];
+
+  for (const file of files) {
+    const absolutePath = path.join(contextDirectory, file);
+    const stats = await lstat(absolutePath).catch((error: NodeJS.ErrnoException) => {
+      if (error.code === "ENOENT") return null;
+      throw error;
+    });
+    if (!stats) continue;
+    fileCount += 1;
+    const entry: DockerBuildSourceEntry = stats.isSymbolicLink()
+      ? { file, mode: stats.mode, linkTarget: await readlink(absolutePath) }
+      : { file, mode: stats.mode, content: await readFile(absolutePath) };
+    entries.push(entry);
+  }
+
+  return { fingerprint: fingerprintDockerBuildSource(entries), fileCount, entries };
+};
+
+const materializeSourceSnapshotAsync = async (entries: DockerBuildSourceEntry[]) => {
+  const directory = await mkdtemp(path.join(os.tmpdir(), "homarr-build-benchmark-"));
+  for (const entry of entries) {
+    const destination = path.join(directory, entry.file);
+    await mkdir(path.dirname(destination), { recursive: true });
+    if (entry.linkTarget !== undefined) {
+      await symlink(entry.linkTarget, destination);
+    } else {
+      await writeFile(destination, entry.content);
+      await chmod(destination, entry.mode & 0o777);
+    }
+  }
+  return directory;
+};
+
+const runDockerBuildAsync = async (args: string[]) =>
+  await new Promise<{ output: string; wallTimeMs: number }>((resolve, reject) => {
+    const startedAt = performance.now();
+    const child = spawn("docker", args, { cwd: contextDirectory, env: process.env, stdio: ["ignore", "pipe", "pipe"] });
+    const chunks: Buffer[] = [];
+    const capture = (chunk: Buffer) => {
+      chunks.push(chunk);
+      process.stdout.write(chunk);
+    };
+    child.stdout.on("data", capture);
+    child.stderr.on("data", capture);
+    child.once("error", reject);
+    child.once("close", (code) => {
+      const output = Buffer.concat(chunks).toString("utf8");
+      const wallTimeMs = Math.round(performance.now() - startedAt);
+      if (code !== 0) {
+        reject(new Error(`docker build exited with ${String(code)} after ${wallTimeMs}ms`));
+        return;
+      }
+      resolve({ output, wallTimeMs });
+    });
+  });
+
+const inspectBuilderCacheAsync = async () => {
+  if (!builder) return null;
+  await execFileAsync("docker", ["buildx", "inspect", "--builder", builder, "--bootstrap"], {
+    maxBuffer: 16 * 1024 * 1024,
+  });
+  const { stdout } = await execFileAsync("docker", ["buildx", "du", "--builder", builder, "--format", "json"], {
+    maxBuffer: 16 * 1024 * 1024,
+  });
+  const records = stdout
+    .split("\n")
+    .filter(Boolean)
+    .map(
+      (line) =>
+        JSON.parse(line) as {
+          CreatedAt?: string;
+          Description?: string;
+          ID: string;
+          Mutable?: boolean;
+          Parents?: string[];
+          Reclaimable?: boolean;
+          Shared?: boolean;
+          Size?: string;
+          Type?: string;
+          UsageCount?: number;
+        },
+    );
+  const normalizedRecords = records
+    .map(({ CreatedAt, Description, ID, Mutable, Parents, Reclaimable, Shared, Size, Type, UsageCount }) => ({
+      createdAt: CreatedAt ?? null,
+      description: Description ?? null,
+      id: ID,
+      mutable: Mutable ?? null,
+      parents: Parents?.toSorted() ?? [],
+      reclaimable: Reclaimable ?? null,
+      shared: Shared ?? null,
+      size: Size ?? null,
+      type: Type ?? null,
+      usageCount: UsageCount ?? null,
+    }))
+    .toSorted((left, right) => left.id.localeCompare(right.id));
+  const cacheMounts = records
+    .filter(({ Type }) => Type === "exec.cachemount")
+    .map(({ Description, ID, Size, UsageCount }) => {
+      const description = Description ?? null;
+      const identity = parseDockerBuildCacheMountDescription(description);
+      return {
+        description,
+        logicalId: identity?.logicalId ?? null,
+        recordId: ID,
+        size: Size ?? null,
+        target: identity?.target ?? null,
+        usageCount: UsageCount ?? null,
+      };
+    });
+  return {
+    cacheMountCount: cacheMounts.length,
+    cacheMounts,
+    recordCount: records.length,
+    recordsFingerprint: createHash("sha256").update(JSON.stringify(normalizedRecords)).digest("hex"),
+  };
+};
+
+const inspectSettledBuilderCacheAsync = async () => {
+  if (!builder) return { snapshot: null, stability: null };
+  const startedAt = performance.now();
+  let attempts = 1;
+  let previous = await inspectBuilderCacheAsync();
+  let stableSince = performance.now();
+
+  while (performance.now() - startedAt < cacheSnapshotTimeoutMs) {
+    await new Promise((resolve) => setTimeout(resolve, cacheSnapshotPollMs));
+    const current = await inspectBuilderCacheAsync();
+    attempts += 1;
+    if (current?.recordsFingerprint !== previous?.recordsFingerprint) stableSince = performance.now();
+    previous = current;
+    const stableForMs = Math.round(performance.now() - stableSince);
+    if (stableForMs >= cacheSnapshotStableMs) {
+      return {
+        snapshot: current,
+        stability: { attempts, pollIntervalMs: cacheSnapshotPollMs, stableForMs, timeoutMs: cacheSnapshotTimeoutMs },
+      };
+    }
+  }
+
+  throw new Error(`Docker builder cache did not settle for ${cacheSnapshotStableMs}ms`);
+};
+
+await mkdir(outputDirectory, { recursive: true });
+const [{ stdout: headOutput }, { stdout: statusOutput }, source, dockerServer] = await Promise.all([
+  execGitAsync(["rev-parse", "HEAD"]),
+  execGitAsync(["status", "--porcelain=v1"]),
+  fingerprintSourceAsync(),
+  inspectDockerServerAsync(),
+]);
+const headSha = headOutput.trim();
+const dirty = statusOutput.trim().length > 0;
+const measuredRevision = getMeasuredRevision(headSha, dirty);
+const dockerfile = source.entries.find(({ file }) => file === "Dockerfile");
+if (!dockerfile?.content) throw new Error("Docker build context contains no regular Dockerfile");
+const expectedCacheMounts = parseDockerfileCacheMounts(
+  dockerfile.content.toString("utf8"),
+  dockerServer.targetPlatform,
+);
+const cacheBefore = await inspectBuilderCacheAsync();
+const syntheticSource =
+  mode === "source-change"
+    ? applyDockerBuildSyntheticSourceChange(source.entries, sourceChangeId as string)
+    : { entries: source.entries, change: null };
+const measuredSourceFingerprint = fingerprintDockerBuildSource(syntheticSource.entries);
+
+const buildArgs = [
+  "build",
+  "--progress=plain",
+  "--platform",
+  dockerServer.targetPlatform,
+  "--label",
+  `org.opencontainers.image.revision=${measuredRevision}`,
+  "--label",
+  `dev.homarr.source-fingerprint=${measuredSourceFingerprint}`,
+  "--tag",
+  imageTag,
+];
+if (builder) buildArgs.push("--builder", builder, "--load");
+if (mode === "no-cache") buildArgs.push("--no-cache");
+const snapshotDirectory = await materializeSourceSnapshotAsync(syntheticSource.entries);
+buildArgs.push(snapshotDirectory);
+
+const build = await runDockerBuildAsync(buildArgs).finally(
+  async () => await rm(snapshotDirectory, { recursive: true }),
+);
+const { snapshot: cacheAfter, stability: cacheAfterStability } = await inspectSettledBuilderCacheAsync();
+const imageInspect = JSON.parse((await execFileAsync("docker", ["image", "inspect", imageTag])).stdout)[0] as {
+  Architecture: string;
+  Config?: { Labels?: Record<string, string> };
+  Id: string;
+  RepoDigests?: string[];
+  Size: number;
+};
+const labels = imageInspect.Config?.Labels ?? {};
+const parsedBuild = parseDockerBuildOutput(build.output);
+const claimIneligibleReasons = getDockerBuildClaimIneligibleReasons({
+  expectedRevision: measuredRevision,
+  expectedSourceFingerprint: measuredSourceFingerprint,
+  imageArchitecture: imageInspect.Architecture,
+  imageRevision: labels["org.opencontainers.image.revision"] ?? null,
+  imageSourceFingerprint: labels["dev.homarr.source-fingerprint"] ?? null,
+  expectedImageArchitecture: dockerServer.architecture.split("/")[0] as string,
+});
+if (!declaredRevision) claimIneligibleReasons.push("BUILD_BENCHMARK_REVISION is missing");
+else if (declaredRevision !== measuredRevision) {
+  claimIneligibleReasons.push(`declared revision ${declaredRevision} does not match measured ${measuredRevision}`);
+}
+if (!builder) claimIneligibleReasons.push("BUILD_BENCHMARK_BUILDER is missing");
+if (!seriesId) claimIneligibleReasons.push("BUILD_BENCHMARK_SERIES_ID is missing");
+claimIneligibleReasons.push(...getBuildCacheStateIneligibleReasons(cacheState, cacheBefore, expectedCacheMounts));
+claimIneligibleReasons.push(
+  ...getBuildCacheContinuityIneligibleReasons(cacheState, cacheBefore, cacheAfter, expectedCacheMounts),
+);
+if (mode === "cached") claimIneligibleReasons.push("cached mode does not force an application rebuild");
+if (mode === "no-cache" && cacheState === "warm") {
+  claimIneligibleReasons.push("no-cache mode resets BuildKit cache mounts and cannot measure a warm build");
+}
+if (mode !== "cached" && parsedBuild.nextCompileMs === null) {
+  claimIneligibleReasons.push("application build did not expose a Next compilation measurement");
+}
+if (!Number.isInteger(totalRepetitions) || totalRepetitions < 2) {
+  claimIneligibleReasons.push("BUILD_BENCHMARK_TOTAL_REPETITIONS must be at least 2");
+}
+if (!Number.isInteger(repetition) || repetition < 1 || repetition > totalRepetitions) {
+  claimIneligibleReasons.push("BUILD_BENCHMARK_REPETITION is outside the declared series");
+}
+const timestamp = Date.now();
+const logPath = path.join(outputDirectory, `build-${timestamp}.log`);
+const outputPath = path.join(outputDirectory, `build-${timestamp}.json`);
+const runFinishedAt = new Date().toISOString();
+const result = {
+  schemaVersion: 4,
+  claimEligible: claimIneligibleReasons.length === 0,
+  claimIneligibleReasons,
+  createdAt: runFinishedAt,
+  run: { startedAt: runStartedAt, finishedAt: runFinishedAt },
+  mode,
+  builder,
+  runLabel,
+  declaredRevision,
+  series: { id: seriesId, cacheState, repetition, totalRepetitions },
+  source: {
+    contextDirectory,
+    headSha,
+    dirty,
+    measuredRevision,
+    fingerprint: measuredSourceFingerprint,
+    baseFingerprint: source.fingerprint,
+    fileCount: source.fileCount,
+    immutableSnapshot: true,
+    syntheticSourceChange: syntheticSource.change,
+  },
+  builderCache: {
+    expected: expectedCacheMounts,
+    before: cacheBefore,
+    after: cacheAfter,
+    afterStability: cacheAfterStability,
+  },
+  host: { architecture: process.arch, cpuCount: os.cpus().length, dockerServer, platform: os.platform() },
+  image: {
+    requested: imageTag,
+    id: imageInspect.Id,
+    digest: imageInspect.RepoDigests?.[0] ?? null,
+    revision: labels["org.opencontainers.image.revision"] ?? null,
+    sourceFingerprint: labels["dev.homarr.source-fingerprint"] ?? null,
+    architecture: imageInspect.Architecture,
+    targetPlatform: dockerServer.targetPlatform,
+    localUncompressedBytes: imageInspect.Size,
+  },
+  build: { wallTimeMs: build.wallTimeMs, ...parsedBuild },
+  logPath,
+};
+
+await Promise.all([writeFile(logPath, build.output), writeFile(outputPath, `${JSON.stringify(result, null, 2)}\n`)]);
+console.log(JSON.stringify({ outputPath, ...result }, null, 2));
diff --git a/scripts/benchmarks/docker-runtime-lib.mts b/scripts/benchmarks/docker-runtime-lib.mts
new file mode 100644
index 000000000..adae41819
--- /dev/null
+++ b/scripts/benchmarks/docker-runtime-lib.mts
@@ -0,0 +1,649 @@
+import { createHash } from "node:crypto";
+import { jsonlStreamConsumer } from "@trpc/server/unstable-core-do-not-import";
+import { deserialize } from "superjson";
+import type { SuperJSONResult } from "superjson";
+
+import { isWidgetDataTrpcPath } from "../../packages/api/src/query-cache.ts";
+
+export type RuntimeMemoryCheckpoint = {
+  name: string;
+  capturedAt: string;
+  container: {
+    currentBytes: number;
+    peakBytes: number | null;
+    anonymousBytes: number;
+    fileBytes: number;
+  };
+  cpu: {
+    usageUsec: number;
+    userUsec: number;
+    systemUsec: number;
+    nrThrottled: number;
+    throttledUsec: number;
+  };
+  processes: Array<{
+    command: string;
+    parentPid: number;
+    pid: number;
+    pssBytes: number;
+    rssBytes: number;
+  }>;
+  redis: { usedMemoryBytes: number; peakMemoryBytes: number } | null;
+};
+
+export const minimumClaimSettleMs = 10 * 60 * 1_000;
+export const minimumClaimSettleSamples = 20;
+export const minimumClaimPageSamples = 20;
+export const minimumClaimLcpObservationMs = 5_000;
+export const minimumClaimWidgetDataQuietMs = 500;
+
+export const getBrowserNetworkIsolationLaunchArgs = (denyProxyUrl: string) => [
+  `--proxy-server=${denyProxyUrl}`,
+  "--proxy-bypass-list=127.0.0.1;localhost",
+  "--host-resolver-rules=MAP * ~NOTFOUND, EXCLUDE 127.0.0.1, EXCLUDE localhost",
+];
+
+export const normalizeDockerArchitecture = (nodeArchitecture: string) =>
+  nodeArchitecture === "x64" ? "amd64" : nodeArchitecture;
+
+export const getTrpcProcedures = (requestUrl: string) => {
+  const pathname = new URL(requestUrl).pathname;
+  const prefix = "/api/trpc/";
+  const index = pathname.indexOf(prefix);
+  if (index < 0) return [];
+
+  return decodeURIComponent(pathname.slice(index + prefix.length))
+    .split(",")
+    .filter(Boolean);
+};
+
+const canonicalizeJson = (value: unknown): string => {
+  if (value === null || typeof value !== "object") return JSON.stringify(value) ?? "undefined";
+  if (Array.isArray(value)) return `[${value.map(canonicalizeJson).join(",")}]`;
+
+  return `{${Object.entries(value)
+    .toSorted(([left], [right]) => (left < right ? -1 : left > right ? 1 : 0))
+    .map(([key, nestedValue]) => `${JSON.stringify(key)}:${canonicalizeJson(nestedValue)}`)
+    .join(",")}}`;
+};
+
+const hashRequestInput = (value: unknown) => createHash("sha256").update(canonicalizeJson(value)).digest("hex");
+
+export type TrpcRequestIdentity = { batchIndex: number; identity: string; inputHash: string; procedure: string };
+
+export const getTrpcRequestIdentities = (requestUrl: string): TrpcRequestIdentity[] => {
+  const url = new URL(requestUrl);
+  const procedures = getTrpcProcedures(requestUrl);
+  if (procedures.length === 0) return [];
+  const rawInput = url.searchParams.get("input");
+  let parsedInput: unknown = null;
+  if (rawInput !== null) {
+    try {
+      parsedInput = JSON.parse(rawInput) as unknown;
+    } catch {
+      throw new Error("Malformed serialized tRPC request input");
+    }
+  }
+
+  const isBatch = url.searchParams.get("batch") === "1";
+  return procedures.map((procedure, index) => {
+    const input =
+      isBatch && parsedInput !== null && typeof parsedInput === "object" && !Array.isArray(parsedInput)
+        ? (parsedInput as Record<string, unknown>)[String(index)]
+        : parsedInput;
+    const inputHash = hashRequestInput(input);
+    return { batchIndex: index, procedure, inputHash, identity: `${procedure}#${inputHash}` };
+  });
+};
+
+export const isRuntimeWidgetDataProcedure = (procedure: string) => {
+  if (procedure.split(".").some((part) => part.startsWith("subscribe"))) return false;
+  if (procedure.startsWith("widget.")) return procedure !== "widget.app.ping";
+  return isWidgetDataTrpcPath(procedure);
+};
+
+export const isRuntimeWidgetDataRequest = (method: string, procedure: string) =>
+  method === "GET" && isRuntimeWidgetDataProcedure(procedure);
+
+export const recordWidgetDataRequestOutcome = (
+  recoveryBalance: Map<string, number>,
+  requestIdentities: string[],
+  outcome: "aborted" | "completed",
+) => {
+  const delta = outcome === "aborted" ? 1 : -1;
+  for (const requestIdentity of requestIdentities) {
+    recoveryBalance.set(requestIdentity, (recoveryBalance.get(requestIdentity) ?? 0) + delta);
+  }
+};
+
+export const getUnrecoveredWidgetDataRequests = (recoveryBalance: Map<string, number>) =>
+  [...recoveryBalance.entries()]
+    .filter(([, balance]) => balance > 0)
+    .flatMap(([requestIdentity, balance]) => Array.from({ length: balance }, () => requestIdentity))
+    .toSorted();
+
+export const hasBlockingWidgetDataAborts = (allowUnrecoveredAborts: boolean, unrecoveredProcedureCount: number) =>
+  !allowUnrecoveredAborts && unrecoveredProcedureCount > 0;
+
+export const getSpotlightIdleNetworkFailure = (policy: string, nonWidgetTrpcRequestCount: number) =>
+  policy === "preload-only" && nonWidgetTrpcRequestCount > 0
+    ? `Idle Spotlight preload-only preparation made ${nonWidgetTrpcRequestCount} non-widget tRPC requests`
+    : null;
+
+export const getSpotlightIdleMountFailure = (policy: string, mountedCount: number) =>
+  policy === "preload-only" && mountedCount > 0 ? "Idle Spotlight preload mounted the UI before user intent" : null;
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === "object" && !Array.isArray(value);
+
+export type TrpcOperationFailure = {
+  batchIndex: number;
+  kind: "http-status" | "invalid-jsonl" | "index-mismatch" | "invalid-envelope" | "trpc-error" | "stream-error";
+  httpStatus?: number;
+  jsonRpcCode?: number;
+  status?: number;
+  trpcCode?: string;
+};
+
+export type TrpcBatchInspection = { failures: TrpcOperationFailure[]; successfulIndexes: number[] };
+
+const failEveryOperation = (
+  operationCount: number,
+  failure: Omit<TrpcOperationFailure, "batchIndex">,
+): TrpcBatchInspection => ({
+  failures: Array.from({ length: operationCount }, (_, batchIndex) => ({ batchIndex, ...failure })),
+  successfulIndexes: [],
+});
+
+const safeTrpcError = (batchIndex: number, error: unknown): TrpcOperationFailure => {
+  const record = isRecord(error) ? error : {};
+  const data = isRecord(record.data) ? record.data : {};
+  return {
+    batchIndex,
+    kind: "trpc-error",
+    ...(typeof data.httpStatus === "number" ? { httpStatus: data.httpStatus } : {}),
+    ...(typeof record.code === "number" ? { jsonRpcCode: record.code } : {}),
+    ...(typeof data.code === "string" ? { trpcCode: data.code } : {}),
+  };
+};
+
+export const inspectTrpcBatchStreamResponse = async (
+  status: number,
+  responseBody: string,
+  expectedOperationCount: number,
+): Promise<TrpcBatchInspection> => {
+  if (!Number.isInteger(expectedOperationCount) || expectedOperationCount < 1) {
+    throw new Error("expectedOperationCount must be a positive integer");
+  }
+  if (status < 200 || status >= 300) {
+    return failEveryOperation(expectedOperationCount, { kind: "http-status", status });
+  }
+  if (responseBody.trim().length === 0) return failEveryOperation(expectedOperationCount, { kind: "invalid-jsonl" });
+
+  const physicalLines = responseBody.split("\n");
+  const trailing = physicalLines.pop() ?? "";
+  if (trailing.trim() !== "") return failEveryOperation(expectedOperationCount, { kind: "invalid-jsonl" });
+  try {
+    const records = physicalLines.filter((line) => line.trim().length > 0);
+    if (records.length === 0) throw new Error("missing JSONL records");
+    for (const line of records) {
+      const serialized = JSON.parse(line) as unknown;
+      if (!isRecord(serialized) || !Object.hasOwn(serialized, "json")) throw new Error("not SuperJSON");
+      deserialize(serialized as SuperJSONResult);
+    }
+  } catch {
+    return failEveryOperation(expectedOperationCount, { kind: "invalid-jsonl" });
+  }
+
+  const abortController = new AbortController();
+  try {
+    const bytes = new TextEncoder().encode(responseBody);
+    const from = new ReadableStream<Uint8Array>({
+      start(controller) {
+        controller.enqueue(bytes);
+        controller.close();
+      },
+    });
+    const [head] = await jsonlStreamConsumer<Record<string, Promise<unknown>>>({
+      abortController,
+      deserialize: (value) => deserialize(value as SuperJSONResult),
+      formatError: () => new Error("tRPC stream operation error"),
+      from,
+    });
+    if (!isRecord(head)) return failEveryOperation(expectedOperationCount, { kind: "invalid-envelope" });
+
+    const actualIndexes = Object.keys(head);
+    const expectedIndexes = Array.from({ length: expectedOperationCount }, (_, index) => String(index));
+    if (
+      actualIndexes.length !== expectedIndexes.length ||
+      expectedIndexes.some((index) => !Object.hasOwn(head, index))
+    ) {
+      for (const value of Object.values(head)) void Promise.resolve(value).catch(() => undefined);
+      return failEveryOperation(expectedOperationCount, { kind: "index-mismatch" });
+    }
+
+    const outcomes = await Promise.all(
+      expectedIndexes.map(async (key): Promise<{ failure: TrpcOperationFailure | null; index: number }> => {
+        const batchIndex = Number(key);
+        try {
+          const envelope = await Promise.resolve(head[key]);
+          if (!isRecord(envelope)) return { failure: { batchIndex, kind: "invalid-envelope" }, index: batchIndex };
+          if (Object.hasOwn(envelope, "error")) {
+            return { failure: safeTrpcError(batchIndex, envelope.error), index: batchIndex };
+          }
+          if (!Object.hasOwn(envelope, "result")) {
+            return { failure: { batchIndex, kind: "invalid-envelope" }, index: batchIndex };
+          }
+          const result = await Promise.resolve(envelope.result);
+          if (!isRecord(result) || !Object.hasOwn(result, "data")) {
+            return { failure: { batchIndex, kind: "invalid-envelope" }, index: batchIndex };
+          }
+          await Promise.resolve(result.data);
+          return { failure: null, index: batchIndex };
+        } catch {
+          return { failure: { batchIndex, kind: "stream-error" }, index: batchIndex };
+        }
+      }),
+    );
+    return {
+      failures: outcomes.flatMap(({ failure }) => (failure ? [failure] : [])),
+      successfulIndexes: outcomes.flatMap(({ failure, index }) => (failure ? [] : [index])),
+    };
+  } catch {
+    return failEveryOperation(expectedOperationCount, { kind: "invalid-jsonl" });
+  } finally {
+    abortController.abort();
+  }
+};
+
+type RuntimeMetricEligibilityInput = {
+  expectedSha: string | null;
+  expectedSourceFingerprint: string | null;
+  browserNetworkIsolated: boolean;
+  serverNetworkIsolated: boolean;
+  imageArchitecture: string;
+  lcpObservationMs: number;
+  lcpSampleCount: number;
+  nodeArchitecture: string;
+  pageSampleCount: number;
+  requireImplementationMarkers: boolean;
+  revision: string | null;
+  sourceFingerprint: string | null;
+  settleMs: number;
+  settleSampleCount: number;
+  widgetDataQuietMs: number;
+  widgetDataSampleCount: number;
+};
+
+const getRuntimeProvenanceIneligibleReasons = ({
+  browserNetworkIsolated,
+  serverNetworkIsolated,
+  expectedSha,
+  expectedSourceFingerprint,
+  imageArchitecture,
+  nodeArchitecture,
+  revision,
+  sourceFingerprint,
+}: Pick<
+  RuntimeMetricEligibilityInput,
+  | "browserNetworkIsolated"
+  | "serverNetworkIsolated"
+  | "expectedSha"
+  | "expectedSourceFingerprint"
+  | "imageArchitecture"
+  | "nodeArchitecture"
+  | "revision"
+  | "sourceFingerprint"
+>) => {
+  const reasons: string[] = [];
+  const expectedArchitecture = normalizeDockerArchitecture(nodeArchitecture);
+
+  if (imageArchitecture !== expectedArchitecture) {
+    reasons.push(`image architecture ${imageArchitecture} is not host ${expectedArchitecture}`);
+  }
+  if (!expectedSha) reasons.push("RUNTIME_BENCHMARK_SHA is missing");
+  else if (!revision) reasons.push("image revision label is missing");
+  else if (revision !== expectedSha) reasons.push(`image revision ${revision} does not match ${expectedSha}`);
+  if (!expectedSourceFingerprint) reasons.push("RUNTIME_BENCHMARK_SOURCE_FINGERPRINT is missing");
+  else if (!sourceFingerprint) reasons.push("image source fingerprint label is missing");
+  else if (sourceFingerprint !== expectedSourceFingerprint) {
+    reasons.push(`image source fingerprint ${sourceFingerprint} does not match ${expectedSourceFingerprint}`);
+  }
+  if (!browserNetworkIsolated) reasons.push("browser external network isolation is not active");
+  if (!serverNetworkIsolated) reasons.push("server external network isolation is not active");
+
+  return reasons;
+};
+
+const createEligibility = ({
+  ineligibleReasons,
+  kind,
+  limitations,
+  requiredSampleCount,
+  sampleCount,
+  sampleUnit,
+  scope,
+}: {
+  ineligibleReasons: string[];
+  kind: "comparative" | "diagnostic" | "within-run";
+  limitations: string[];
+  requiredSampleCount: number | null;
+  sampleCount: number;
+  sampleUnit: string;
+  scope: string;
+}) => ({
+  claimEligible: ineligibleReasons.length === 0,
+  ineligibleReasons,
+  kind,
+  limitations,
+  requiredSampleCount,
+  sampleCount,
+  sampleUnit,
+  scope,
+});
+
+export const getRuntimeMetricEligibility = (input: RuntimeMetricEligibilityInput) => {
+  const provenanceReasons = getRuntimeProvenanceIneligibleReasons(input);
+  const markerReasons = input.requireImplementationMarkers ? [] : ["widget implementation markers are not required"];
+  const pageReasons = [
+    ...provenanceReasons,
+    ...markerReasons,
+    ...(input.pageSampleCount < minimumClaimPageSamples
+      ? [`page sample count ${input.pageSampleCount} is below ${minimumClaimPageSamples}`]
+      : []),
+  ];
+  const lcpReasons = [
+    ...provenanceReasons,
+    ...markerReasons,
+    ...(input.lcpObservationMs < minimumClaimLcpObservationMs
+      ? [`LCP observation ${input.lcpObservationMs}ms is below ${minimumClaimLcpObservationMs}ms`]
+      : []),
+    ...(input.lcpSampleCount < minimumClaimPageSamples
+      ? [`LCP sample count ${input.lcpSampleCount} is below ${minimumClaimPageSamples}`]
+      : []),
+  ];
+  const settleReasons = [
+    ...provenanceReasons,
+    ...markerReasons,
+    ...(input.settleMs < minimumClaimSettleMs
+      ? [`settle duration ${input.settleMs}ms is below ${minimumClaimSettleMs}ms`]
+      : []),
+    ...(input.settleSampleCount < minimumClaimSettleSamples
+      ? [`settle sample count ${input.settleSampleCount} is below ${minimumClaimSettleSamples}`]
+      : []),
+  ];
+  const widgetDataReasons = [
+    ...provenanceReasons,
+    ...markerReasons,
+    ...(input.widgetDataQuietMs < minimumClaimWidgetDataQuietMs
+      ? [`widget data quiet window ${input.widgetDataQuietMs}ms is below ${minimumClaimWidgetDataQuietMs}ms`]
+      : []),
+    ...(input.widgetDataSampleCount < minimumClaimPageSamples
+      ? [`widget data sample count ${input.widgetDataSampleCount} is below ${minimumClaimPageSamples}`]
+      : []),
+  ];
+
+  return {
+    pageLoads: createEligibility({
+      ineligibleReasons: pageReasons,
+      kind: "comparative",
+      limitations: [
+        "samples share one container instance",
+        "application ingress traverses a local TCP proxy sidecar excluded from memory samples",
+      ],
+      requiredSampleCount: minimumClaimPageSamples,
+      sampleCount: input.pageSampleCount,
+      sampleUnit: "fresh authenticated Chromium document",
+      scope: "fresh authenticated dashboard document load timings",
+    }),
+    largestContentfulPaint: createEligibility({
+      ineligibleReasons: lcpReasons,
+      kind: "comparative",
+      limitations: [
+        "samples share one container instance",
+        "application ingress traverses a local TCP proxy sidecar excluded from memory samples",
+      ],
+      requiredSampleCount: minimumClaimPageSamples,
+      sampleCount: input.lcpSampleCount,
+      sampleUnit: "fresh authenticated Chromium document",
+      scope: `dashboard LCP observed for at least ${minimumClaimLcpObservationMs}ms and finalized by trusted input`,
+    }),
+    widgetDataSettled: createEligibility({
+      ineligibleReasons: widgetDataReasons,
+      kind: "comparative",
+      limitations: [
+        "samples share one container instance",
+        "covers observed widget read-side tRPC requests; excludes subscriptions and widget.app.ping",
+        "application ingress traverses a local TCP proxy sidecar excluded from memory samples",
+      ],
+      requiredSampleCount: minimumClaimPageSamples,
+      sampleCount: input.widgetDataSampleCount,
+      sampleUnit: "fresh authenticated Chromium document",
+      scope: `widget tRPC completion followed by a ${minimumClaimWidgetDataQuietMs}ms quiet window and two animation frames`,
+    }),
+    settleStability: createEligibility({
+      ineligibleReasons: settleReasons,
+      kind: "within-run",
+      limitations: [
+        "one container instance",
+        "eligible only for within-run memory stability and trend, not cross-build RAM level claims",
+      ],
+      requiredSampleCount: minimumClaimSettleSamples,
+      sampleCount: input.settleSampleCount,
+      sampleUnit: "time-series checkpoint",
+      scope: `one warmed container observed for at least ${minimumClaimSettleMs}ms`,
+    }),
+    startup: createEligibility({
+      ineligibleReasons: ["single container start is diagnostic only"],
+      kind: "diagnostic",
+      limitations: ["n=1 container start"],
+      requiredSampleCount: null,
+      sampleCount: 1,
+      sampleUnit: "container start",
+      scope: "start-to-ready timing",
+    }),
+    memoryLevels: createEligibility({
+      ineligibleReasons: ["memory levels have one container observation per workload stage"],
+      kind: "diagnostic",
+      limitations: ["n=1 container per workload stage", "settle checkpoints are correlated time samples"],
+      requiredSampleCount: null,
+      sampleCount: 1,
+      sampleUnit: "container instance",
+      scope: "startup, workload, peak, and settled RAM levels",
+    }),
+    coldSpotlightInteraction: createEligibility({
+      ineligibleReasons: ["cold Spotlight interaction has one observation"],
+      kind: "diagnostic",
+      limitations: ["n=1 cold interaction"],
+      requiredSampleCount: null,
+      sampleCount: 1,
+      sampleUnit: "cold browser interaction",
+      scope: "first feedback and full-ready Spotlight latency",
+    }),
+  };
+};
+
+export const getRuntimeClaimIneligibleReasons = (input: RuntimeMetricEligibilityInput) => {
+  const eligibility = getRuntimeMetricEligibility(input);
+  return [
+    ...new Set([
+      ...eligibility.pageLoads.ineligibleReasons,
+      ...eligibility.largestContentfulPaint.ineligibleReasons,
+      ...eligibility.widgetDataSettled.ineligibleReasons,
+      ...eligibility.settleStability.ineligibleReasons,
+    ]),
+  ];
+};
+
+const readNumericLine = (input: string, key: string) => {
+  const match = input.match(new RegExp(`^${key}[=:]\\s*(\\d+)`, "m"));
+  return match ? Number(match[1]) : null;
+};
+
+export const parseRuntimeMemorySnapshot = (name: string, output: string): RuntimeMemoryCheckpoint => {
+  const currentBytes = readNumericLine(output, "memory_current");
+  const anonymousBytes = readNumericLine(output, "cgroup_anon");
+  const fileBytes = readNumericLine(output, "cgroup_file");
+  if (currentBytes === null || anonymousBytes === null || fileBytes === null) {
+    throw new Error(`Incomplete cgroup memory snapshot for ${name}`);
+  }
+
+  const usageUsec = readNumericLine(output, "cpu_usage_usec");
+  const userUsec = readNumericLine(output, "cpu_user_usec");
+  const systemUsec = readNumericLine(output, "cpu_system_usec");
+  const nrThrottled = readNumericLine(output, "cpu_nr_throttled");
+  const throttledUsec = readNumericLine(output, "cpu_throttled_usec");
+  if (
+    usageUsec === null ||
+    userUsec === null ||
+    systemUsec === null ||
+    nrThrottled === null ||
+    throttledUsec === null
+  ) {
+    throw new Error(`Incomplete cgroup CPU snapshot for ${name}`);
+  }
+
+  const processes = output
+    .split("\n")
+    .filter((line) => line.startsWith("process="))
+    .flatMap((line) => {
+      const [pid, parentPid, rssKiB, command, pssKiB] = line.slice("process=".length).split("|");
+      if (!pid || !parentPid || !rssKiB || !command || !pssKiB) return [];
+      return [
+        {
+          pid: Number(pid),
+          parentPid: Number(parentPid),
+          rssBytes: Number(rssKiB) * 1024,
+          pssBytes: Number(pssKiB) * 1024,
+          command,
+        },
+      ];
+    });
+  const redisUsed = readNumericLine(output, "redis_used_memory");
+  const redisPeak = readNumericLine(output, "redis_used_memory_peak");
+
+  return {
+    name,
+    capturedAt: new Date().toISOString(),
+    container: {
+      currentBytes,
+      peakBytes: readNumericLine(output, "memory_peak"),
+      anonymousBytes,
+      fileBytes,
+    },
+    cpu: { usageUsec, userUsec, systemUsec, nrThrottled, throttledUsec },
+    processes,
+    redis: redisUsed === null || redisPeak === null ? null : { usedMemoryBytes: redisUsed, peakMemoryBytes: redisPeak },
+  };
+};
+
+const cpuDelta = (start: RuntimeMemoryCheckpoint | undefined, end: RuntimeMemoryCheckpoint | undefined) =>
+  start && end
+    ? {
+        usageUsec: end.cpu.usageUsec - start.cpu.usageUsec,
+        userUsec: end.cpu.userUsec - start.cpu.userUsec,
+        systemUsec: end.cpu.systemUsec - start.cpu.systemUsec,
+        nrThrottled: end.cpu.nrThrottled - start.cpu.nrThrottled,
+        throttledUsec: end.cpu.throttledUsec - start.cpu.throttledUsec,
+      }
+    : null;
+
+const summarizeSamples = (values: number[]) => {
+  if (values.length === 0) return null;
+  const sorted = values.toSorted((left, right) => left - right);
+  const middle = Math.floor(sorted.length / 2);
+  const median =
+    sorted.length % 2 === 0 ? ((sorted[middle - 1] ?? 0) + (sorted[middle] ?? 0)) / 2 : (sorted[middle] ?? 0);
+  const mean = sorted.reduce((total, value) => total + value, 0) / sorted.length;
+  const variance = sorted.reduce((total, value) => total + (value - mean) ** 2, 0) / sorted.length;
+  return {
+    count: sorted.length,
+    minBytes: sorted[0] ?? null,
+    medianBytes: median,
+    p95Bytes: sorted[Math.min(sorted.length - 1, Math.ceil(sorted.length * 0.95) - 1)] ?? null,
+    maxBytes: sorted.at(-1) ?? null,
+    standardDeviationBytes: Math.round(Math.sqrt(variance)),
+  };
+};
+
+const getTrendBytesPerHour = (samples: Array<{ capturedAt: string; value: number }>) => {
+  if (samples.length < 2) return null;
+  const originMs = Date.parse(samples[0]?.capturedAt ?? "");
+  const timedSamples = samples.flatMap(({ capturedAt, value }) => {
+    const capturedAtMs = Date.parse(capturedAt);
+    return Number.isFinite(originMs) && Number.isFinite(capturedAtMs)
+      ? [{ elapsedMs: capturedAtMs - originMs, value }]
+      : [];
+  });
+  if (timedSamples.length < 2) return null;
+  const xMean = timedSamples.reduce((total, { elapsedMs }) => total + elapsedMs, 0) / timedSamples.length;
+  const yMean = timedSamples.reduce((total, { value }) => total + value, 0) / timedSamples.length;
+  let numerator = 0;
+  let denominator = 0;
+  for (const { elapsedMs, value } of timedSamples) {
+    numerator += (elapsedMs - xMean) * (value - yMean);
+    denominator += (elapsedMs - xMean) ** 2;
+  }
+  return denominator === 0 ? null : (numerator / denominator) * 3_600_000;
+};
+
+export const summarizeRuntimeMemory = (checkpoints: RuntimeMemoryCheckpoint[]) => {
+  const startup = checkpoints.find(({ name }) => name === "startup");
+  const workload = checkpoints.find(({ name }) => name === "workload");
+  const settled = checkpoints.at(-1);
+  const settleValues = checkpoints
+    .filter(({ name }) => name.startsWith("settle-"))
+    .map(({ container }) => container.currentBytes);
+  const settleCurrentSamples = checkpoints
+    .filter(({ name }) => name.startsWith("settle-"))
+    .map(({ capturedAt, container }) => ({ capturedAt, value: container.currentBytes }));
+  const settleAnonymousValues = checkpoints
+    .filter(({ name }) => name.startsWith("settle-"))
+    .map(({ container }) => container.anonymousBytes);
+  const settleAnonymousSamples = checkpoints
+    .filter(({ name }) => name.startsWith("settle-"))
+    .map(({ capturedAt, container }) => ({ capturedAt, value: container.anonymousBytes }));
+  const settleFileValues = checkpoints
+    .filter(({ name }) => name.startsWith("settle-"))
+    .map(({ container }) => container.fileBytes);
+  const settleFileSamples = checkpoints
+    .filter(({ name }) => name.startsWith("settle-"))
+    .map(({ capturedAt, container }) => ({ capturedAt, value: container.fileBytes }));
+  const settle = summarizeSamples(settleValues);
+  const settleAnonymous = summarizeSamples(settleAnonymousValues);
+  const settleFile = summarizeSamples(settleFileValues);
+  const currentValues = checkpoints.map(({ container }) => container.currentBytes);
+  const peakValues = checkpoints.flatMap(({ container }) =>
+    container.peakBytes === null ? [] : [container.peakBytes],
+  );
+  const growthBytes = workload && settle ? settle.medianBytes - workload.container.currentBytes : null;
+  return {
+    startupBytes: startup?.container.currentBytes ?? null,
+    workloadBytes: workload?.container.currentBytes ?? null,
+    settledBytes: settled?.container.currentBytes ?? null,
+    maximumSampleBytes: currentValues.length > 0 ? Math.max(...currentValues) : null,
+    peakBytes: peakValues.length > 0 ? Math.max(...peakValues) : null,
+    growthBytes,
+    growthPercent:
+      workload && growthBytes !== null && workload.container.currentBytes > 0
+        ? (growthBytes / workload.container.currentBytes) * 100
+        : null,
+    settle: settle
+      ? {
+          ...settle,
+          trendBytesPerHour: getTrendBytesPerHour(settleCurrentSamples),
+          anonymous: settleAnonymous
+            ? {
+                ...settleAnonymous,
+                trendBytesPerHour: getTrendBytesPerHour(settleAnonymousSamples),
+              }
+            : null,
+          file: settleFile ? { ...settleFile, trendBytesPerHour: getTrendBytesPerHour(settleFileSamples) } : null,
+        }
+      : null,
+    cpu: {
+      startupToWorkload: cpuDelta(startup, workload),
+      workloadToSettled: cpuDelta(workload, settled),
+    },
+  };
+};
diff --git a/scripts/benchmarks/docker-runtime-lib.spec.ts b/scripts/benchmarks/docker-runtime-lib.spec.ts
new file mode 100644
index 000000000..c434b3217
--- /dev/null
+++ b/scripts/benchmarks/docker-runtime-lib.spec.ts
@@ -0,0 +1,432 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  getBrowserNetworkIsolationLaunchArgs,
+  getSpotlightIdleMountFailure,
+  getSpotlightIdleNetworkFailure,
+  getTrpcRequestIdentities,
+  getUnrecoveredWidgetDataRequests,
+  getTrpcProcedures,
+  getRuntimeClaimIneligibleReasons,
+  getRuntimeMetricEligibility,
+  hasBlockingWidgetDataAborts,
+  normalizeDockerArchitecture,
+  isRuntimeWidgetDataProcedure,
+  isRuntimeWidgetDataRequest,
+  inspectTrpcBatchStreamResponse,
+  parseRuntimeMemorySnapshot,
+  recordWidgetDataRequestOutcome,
+  summarizeRuntimeMemory,
+} from "./docker-runtime-lib.mts";
+
+const snapshot = (current: number, peak: number, cpuUsageUsec = 1_000) => `memory_current=${current}
+memory_peak=${peak}
+cgroup_anon=100
+cgroup_file=20
+cpu_usage_usec=${cpuUsageUsec}
+cpu_user_usec=${cpuUsageUsec - 300}
+cpu_system_usec=300
+cpu_nr_throttled=2
+cpu_throttled_usec=50
+process=42|1|200|next-server|180
+process=7|1|10|redis-server|8
+redis_used_memory=30
+redis_used_memory_peak=40`;
+
+const trpcRequestUrl = (input: string) =>
+  `https://homarr.test/api/trpc/widget.weather.atLocation,app.byIds?batch=1&input=${input}`;
+
+describe("Docker runtime memory parsing", () => {
+  it("classifies every procedure in batched tRPC requests", () => {
+    expect(getTrpcProcedures("https://homarr.test/api/trpc/widget.foo,queryCache.setItem?batch=1")).toEqual([
+      "widget.foo",
+      "queryCache.setItem",
+    ]);
+    expect(getTrpcProcedures("https://homarr.test/api/trpc/widget.foo%2Csearch.query?batch=1")).toEqual([
+      "widget.foo",
+      "search.query",
+    ]);
+    expect(getTrpcProcedures("https://homarr.test/api/health/ready")).toEqual([]);
+    expect(isRuntimeWidgetDataProcedure("widget.calendar.findAllEvents")).toBe(true);
+    expect(isRuntimeWidgetDataProcedure("app.byIds")).toBe(true);
+    expect(isRuntimeWidgetDataProcedure("integration.byIds")).toBe(true);
+    expect(isRuntimeWidgetDataProcedure("docker.getContainers")).toBe(true);
+    expect(isRuntimeWidgetDataProcedure("widget.beszel.getSystemStats")).toBe(true);
+    expect(isRuntimeWidgetDataProcedure("widget.beszel.subscribeSystemStats")).toBe(false);
+    expect(isRuntimeWidgetDataProcedure("widget.app.ping")).toBe(false);
+    expect(isRuntimeWidgetDataProcedure("board.getBoardByName")).toBe(false);
+    expect(isRuntimeWidgetDataRequest("GET", "widget.weather.atLocation")).toBe(true);
+    expect(isRuntimeWidgetDataRequest("POST", "widget.options.saveItemOptions")).toBe(false);
+  });
+
+  it("normalizes Node's x64 architecture to Docker's amd64 name", () => {
+    expect(normalizeDockerArchitecture("x64")).toBe("amd64");
+    expect(normalizeDockerArchitecture("arm64")).toBe("arm64");
+  });
+
+  it("keys batched tRPC operations by procedure and canonical serialized input", () => {
+    const first = encodeURIComponent(
+      JSON.stringify({
+        0: { json: { location: "Paris", units: "metric" } },
+        1: { json: { ids: ["app-1"] } },
+      }),
+    );
+    const reordered = encodeURIComponent(
+      JSON.stringify({
+        0: { json: { units: "metric", location: "Paris" } },
+        1: { json: { ids: ["app-1"] } },
+      }),
+    );
+    const different = encodeURIComponent(
+      JSON.stringify({
+        0: { json: { location: "Lyon", units: "metric" } },
+        1: { json: { ids: ["app-1"] } },
+      }),
+    );
+    const identities = getTrpcRequestIdentities(trpcRequestUrl(first));
+    expect(identities.map(({ procedure }) => procedure)).toEqual(["widget.weather.atLocation", "app.byIds"]);
+    expect(identities.map(({ batchIndex }) => batchIndex)).toEqual([0, 1]);
+    expect(identities).toEqual(getTrpcRequestIdentities(trpcRequestUrl(reordered)));
+    expect(getTrpcRequestIdentities(trpcRequestUrl(different))[0]?.identity).not.toBe(identities[0]?.identity);
+    expect(getTrpcRequestIdentities(trpcRequestUrl(different))[1]?.identity).toBe(identities[1]?.identity);
+    expect(
+      identities.every(
+        ({ identity, inputHash, procedure }) =>
+          procedure.includes(".") && /^[a-f0-9]{64}$/.test(inputHash) && identity === `${procedure}#${inputHash}`,
+      ),
+    ).toBe(true);
+    expect(JSON.stringify(identities)).not.toContain("Paris");
+    expect(() =>
+      getTrpcRequestIdentities("https://homarr.test/api/trpc/widget.weather.atLocation?batch=1&input=%7Bmalformed"),
+    ).toThrow("Malformed serialized tRPC request input");
+  });
+
+  it("requires every aborted widget-data request identity to be recovered by an exact successful request", () => {
+    const recoveryBalance = new Map<string, number>();
+    recordWidgetDataRequestOutcome(recoveryBalance, ["weather#paris", "app#1"], "aborted");
+    recordWidgetDataRequestOutcome(recoveryBalance, ["app#1", "weather#lyon"], "completed");
+
+    expect(getUnrecoveredWidgetDataRequests(recoveryBalance)).toEqual(["weather#paris"]);
+
+    recordWidgetDataRequestOutcome(recoveryBalance, ["weather#paris"], "completed");
+    expect(getUnrecoveredWidgetDataRequests(recoveryBalance)).toEqual([]);
+  });
+
+  it("credits an earlier successful response when a superseding refetch is aborted", () => {
+    const recoveryBalance = new Map<string, number>();
+    recordWidgetDataRequestOutcome(recoveryBalance, ["widget.weather.atLocation"], "completed");
+    recordWidgetDataRequestOutcome(recoveryBalance, ["widget.weather.atLocation"], "aborted");
+
+    expect(getUnrecoveredWidgetDataRequests(recoveryBalance)).toEqual([]);
+  });
+
+  it("allows unrecovered aborts only for the non-claim login transition", () => {
+    expect(hasBlockingWidgetDataAborts(true, 2)).toBe(false);
+    expect(hasBlockingWidgetDataAborts(false, 0)).toBe(false);
+    expect(hasBlockingWidgetDataAborts(false, 1)).toBe(true);
+  });
+
+  it("allows eager baseline Spotlight work but keeps preload-only preparation network-free", () => {
+    expect(getSpotlightIdleNetworkFailure("mounted", 1)).toBeNull();
+    expect(getSpotlightIdleNetworkFailure("preload-only", 0)).toBeNull();
+    expect(getSpotlightIdleNetworkFailure("preload-only", 1)).toBe(
+      "Idle Spotlight preload-only preparation made 1 non-widget tRPC requests",
+    );
+    expect(getSpotlightIdleMountFailure("mounted", 1)).toBeNull();
+    expect(getSpotlightIdleMountFailure("preload-only", 0)).toBeNull();
+    expect(getSpotlightIdleMountFailure("preload-only", 1)).toBe(
+      "Idle Spotlight preload mounted the UI before user intent",
+    );
+  });
+
+  it("fails closed on HTTP, malformed, missing, and per-operation streamed tRPC errors", async () => {
+    const errorShape = {
+      code: -32603,
+      data: { code: "INTERNAL_SERVER_ERROR", httpStatus: 500 },
+      message: "boom",
+    };
+    const head = `${JSON.stringify({ json: { 0: [[0], [null, 0, 0]] } })}\n`;
+    const errorBody = `${head}${JSON.stringify({ json: [0, 0, [[{ error: errorShape }]]] })}\n`;
+    const rejectedBody = `${head}${JSON.stringify({ json: [0, 1, errorShape] })}\n`;
+    const rejectedDataBody = [
+      head.trimEnd(),
+      JSON.stringify({ json: [0, 0, [[{ result: 0 }], ["result", 0, 1]]] }),
+      JSON.stringify({ json: [1, 0, [[{ data: 0 }], ["data", 0, 2]]] }),
+      JSON.stringify({ json: [2, 1, errorShape] }),
+      "",
+    ].join("\n");
+    const successfulUserDataBody = [
+      head.trimEnd(),
+      JSON.stringify({ json: [0, 0, [[{ result: 0 }], ["result", 0, 1]]] }),
+      JSON.stringify({ json: [1, 0, [[{ data: 0 }], ["data", 0, 2]]] }),
+      JSON.stringify({ json: [2, 0, [[{ error: errorShape }]]] }),
+      "",
+    ].join("\n");
+    const mixedBody = [
+      JSON.stringify({ json: { 0: [[0], [null, 0, 0]], 1: [[0], [null, 0, 1]] } }),
+      JSON.stringify({ json: [0, 0, [[{ result: 0 }], ["result", 0, 2]]] }),
+      JSON.stringify({ json: [1, 0, [[{ error: errorShape }]]] }),
+      JSON.stringify({ json: [2, 0, [[{ data: "ok" }]]] }),
+      "",
+    ].join("\n");
+
+    await expect(inspectTrpcBatchStreamResponse(500, errorBody, 2)).resolves.toEqual({
+      failures: [
+        { batchIndex: 0, kind: "http-status", status: 500 },
+        { batchIndex: 1, kind: "http-status", status: 500 },
+      ],
+      successfulIndexes: [],
+    });
+    for (const body of ["", "not-json\n", "{}\n", head.trimEnd()]) {
+      await expect(inspectTrpcBatchStreamResponse(200, body, 1)).resolves.toEqual({
+        failures: [{ batchIndex: 0, kind: "invalid-jsonl" }],
+        successfulIndexes: [],
+      });
+    }
+    await expect(inspectTrpcBatchStreamResponse(200, head, 2)).resolves.toEqual({
+      failures: [
+        { batchIndex: 0, kind: "index-mismatch" },
+        { batchIndex: 1, kind: "index-mismatch" },
+      ],
+      successfulIndexes: [],
+    });
+    await expect(inspectTrpcBatchStreamResponse(200, errorBody, 1)).resolves.toEqual({
+      failures: [
+        {
+          batchIndex: 0,
+          httpStatus: 500,
+          jsonRpcCode: -32603,
+          kind: "trpc-error",
+          trpcCode: "INTERNAL_SERVER_ERROR",
+        },
+      ],
+      successfulIndexes: [],
+    });
+    for (const body of [rejectedBody, rejectedDataBody]) {
+      await expect(inspectTrpcBatchStreamResponse(200, body, 1)).resolves.toEqual({
+        failures: [{ batchIndex: 0, kind: "stream-error" }],
+        successfulIndexes: [],
+      });
+    }
+    await expect(inspectTrpcBatchStreamResponse(200, successfulUserDataBody, 1)).resolves.toEqual({
+      failures: [],
+      successfulIndexes: [0],
+    });
+    await expect(inspectTrpcBatchStreamResponse(200, mixedBody, 2)).resolves.toEqual({
+      failures: [
+        {
+          batchIndex: 1,
+          httpStatus: 500,
+          jsonRpcCode: -32603,
+          kind: "trpc-error",
+          trpcCode: "INTERNAL_SERVER_ERROR",
+        },
+      ],
+      successfulIndexes: [0],
+    });
+  });
+
+  it("isolates external browser traffic without disabling Chromium's HTTP cache", () => {
+    expect(getBrowserNetworkIsolationLaunchArgs("http://127.0.0.1:43123")).toEqual([
+      "--proxy-server=http://127.0.0.1:43123",
+      "--proxy-bypass-list=127.0.0.1;localhost",
+      "--host-resolver-rules=MAP * ~NOTFOUND, EXCLUDE 127.0.0.1, EXCLUDE localhost",
+    ]);
+    expect(getBrowserNetworkIsolationLaunchArgs("http://127.0.0.1:43123").join(" ")).not.toContain("disable-cache");
+  });
+
+  it("only permits claims with native, SHA-pinned images and enough settle samples", () => {
+    expect(
+      getRuntimeClaimIneligibleReasons({
+        expectedSha: "abc123",
+        expectedSourceFingerprint: "source-hash",
+        browserNetworkIsolated: true,
+        serverNetworkIsolated: true,
+        imageArchitecture: "amd64",
+        lcpObservationMs: 5_000,
+        lcpSampleCount: 20,
+        nodeArchitecture: "x64",
+        pageSampleCount: 20,
+        requireImplementationMarkers: true,
+        revision: "abc123",
+        sourceFingerprint: "source-hash",
+        settleMs: 10 * 60 * 1_000,
+        settleSampleCount: 20,
+        widgetDataQuietMs: 500,
+        widgetDataSampleCount: 20,
+      }),
+    ).toEqual([]);
+
+    expect(
+      getRuntimeClaimIneligibleReasons({
+        expectedSha: "abc123",
+        expectedSourceFingerprint: "source-hash",
+        browserNetworkIsolated: false,
+        serverNetworkIsolated: false,
+        imageArchitecture: "arm64",
+        lcpObservationMs: 1_000,
+        lcpSampleCount: 1,
+        nodeArchitecture: "x64",
+        pageSampleCount: 1,
+        requireImplementationMarkers: false,
+        revision: null,
+        sourceFingerprint: null,
+        settleMs: 0,
+        settleSampleCount: 0,
+        widgetDataQuietMs: 100,
+        widgetDataSampleCount: 1,
+      }),
+    ).toEqual([
+      "image architecture arm64 is not host amd64",
+      "image revision label is missing",
+      "image source fingerprint label is missing",
+      "browser external network isolation is not active",
+      "server external network isolation is not active",
+      "widget implementation markers are not required",
+      "page sample count 1 is below 20",
+      "LCP observation 1000ms is below 5000ms",
+      "LCP sample count 1 is below 20",
+      "widget data quiet window 100ms is below 500ms",
+      "widget data sample count 1 is below 20",
+      "settle duration 0ms is below 600000ms",
+      "settle sample count 0 is below 20",
+    ]);
+  });
+
+  it("scopes repeatable, within-run, and single-sample metrics separately", () => {
+    const eligibility = getRuntimeMetricEligibility({
+      expectedSha: "abc123",
+      expectedSourceFingerprint: "source-hash",
+      browserNetworkIsolated: true,
+      serverNetworkIsolated: true,
+      imageArchitecture: "amd64",
+      lcpObservationMs: 5_000,
+      lcpSampleCount: 20,
+      nodeArchitecture: "x64",
+      pageSampleCount: 20,
+      requireImplementationMarkers: true,
+      revision: "abc123",
+      sourceFingerprint: "source-hash",
+      settleMs: 10 * 60 * 1_000,
+      settleSampleCount: 20,
+      widgetDataQuietMs: 500,
+      widgetDataSampleCount: 20,
+    });
+
+    expect(eligibility.pageLoads).toMatchObject({
+      claimEligible: true,
+      kind: "comparative",
+      requiredSampleCount: 20,
+      sampleCount: 20,
+    });
+    expect(eligibility.largestContentfulPaint).toMatchObject({
+      claimEligible: true,
+      kind: "comparative",
+      requiredSampleCount: 20,
+      sampleCount: 20,
+    });
+    expect(eligibility.widgetDataSettled).toMatchObject({
+      claimEligible: true,
+      kind: "comparative",
+      requiredSampleCount: 20,
+      sampleCount: 20,
+    });
+    expect(eligibility.settleStability).toMatchObject({
+      claimEligible: true,
+      kind: "within-run",
+      requiredSampleCount: 20,
+      sampleCount: 20,
+    });
+    expect(eligibility.settleStability.limitations).toContain("one container instance");
+    expect(eligibility.startup).toMatchObject({ claimEligible: false, kind: "diagnostic", sampleCount: 1 });
+    expect(eligibility.memoryLevels).toMatchObject({ claimEligible: false, kind: "diagnostic", sampleCount: 1 });
+    expect(eligibility.coldSpotlightInteraction).toMatchObject({
+      claimEligible: false,
+      kind: "diagnostic",
+      sampleCount: 1,
+    });
+  });
+
+  it("normalizes cgroup, process, and Redis values", () => {
+    expect(parseRuntimeMemorySnapshot("startup", snapshot(1_000, 2_000))).toMatchObject({
+      name: "startup",
+      container: { currentBytes: 1_000, peakBytes: 2_000, anonymousBytes: 100, fileBytes: 20 },
+      cpu: { usageUsec: 1_000, userUsec: 700, systemUsec: 300, nrThrottled: 2, throttledUsec: 50 },
+      processes: [
+        { pid: 42, parentPid: 1, rssBytes: 200 * 1024, pssBytes: 180 * 1024, command: "next-server" },
+        { pid: 7, parentPid: 1, rssBytes: 10 * 1024, pssBytes: 8 * 1024, command: "redis-server" },
+      ],
+      redis: { usedMemoryBytes: 30, peakMemoryBytes: 40 },
+    });
+  });
+
+  it("keeps a failed Redis collection absent instead of reporting zero bytes", () => {
+    const withoutRedis = snapshot(1_000, 2_000)
+      .split("\n")
+      .filter((line) => !line.startsWith("redis_"))
+      .join("\n");
+
+    expect(parseRuntimeMemorySnapshot("startup", withoutRedis).redis).toBeNull();
+  });
+
+  it("reports workload-to-settled growth and the largest sample", () => {
+    const checkpoints = [
+      parseRuntimeMemorySnapshot("startup", snapshot(1_000, 2_000)),
+      parseRuntimeMemorySnapshot("workload", snapshot(1_100, 2_500, 1_500)),
+      parseRuntimeMemorySnapshot("settle-1", snapshot(1_200, 2_500, 1_800)),
+    ];
+    checkpoints.forEach((checkpoint, index) => {
+      checkpoint.capturedAt = new Date(Date.UTC(2026, 0, 1, 0, index)).toISOString();
+    });
+
+    expect(summarizeRuntimeMemory(checkpoints)).toEqual({
+      startupBytes: 1_000,
+      workloadBytes: 1_100,
+      settledBytes: 1_200,
+      maximumSampleBytes: 1_200,
+      peakBytes: 2_500,
+      growthBytes: 100,
+      growthPercent: 100 / 11,
+      settle: {
+        count: 1,
+        minBytes: 1_200,
+        medianBytes: 1_200,
+        p95Bytes: 1_200,
+        maxBytes: 1_200,
+        standardDeviationBytes: 0,
+        trendBytesPerHour: null,
+        anonymous: {
+          count: 1,
+          minBytes: 100,
+          medianBytes: 100,
+          p95Bytes: 100,
+          maxBytes: 100,
+          standardDeviationBytes: 0,
+          trendBytesPerHour: null,
+        },
+        file: {
+          count: 1,
+          minBytes: 20,
+          medianBytes: 20,
+          p95Bytes: 20,
+          maxBytes: 20,
+          standardDeviationBytes: 0,
+          trendBytesPerHour: null,
+        },
+      },
+      cpu: {
+        startupToWorkload: { usageUsec: 500, userUsec: 500, systemUsec: 0, nrThrottled: 0, throttledUsec: 0 },
+        workloadToSettled: { usageUsec: 300, userUsec: 300, systemUsec: 0, nrThrottled: 0, throttledUsec: 0 },
+      },
+    });
+  });
+
+  it("derives memory trends from observed checkpoint timestamps", () => {
+    const first = parseRuntimeMemorySnapshot("settle-1", snapshot(1_000, 2_000));
+    const second = parseRuntimeMemorySnapshot("settle-2", snapshot(1_100, 2_000));
+    first.capturedAt = "2026-01-01T00:00:00.000Z";
+    second.capturedAt = "2026-01-01T02:00:00.000Z";
+
+    expect(summarizeRuntimeMemory([first, second]).settle?.trendBytesPerHour).toBe(50);
+  });
+});
diff --git a/scripts/benchmarks/docker-runtime.mts b/scripts/benchmarks/docker-runtime.mts
new file mode 100644
index 000000000..b3500e70c
--- /dev/null
+++ b/scripts/benchmarks/docker-runtime.mts
@@ -0,0 +1,1656 @@
+import { execFile } from "node:child_process";
+import { createHash } from "node:crypto";
+import { mkdtemp, mkdir, rm, writeFile } from "node:fs/promises";
+import { createServer } from "node:http";
+import type { AddressInfo } from "node:net";
+import os from "node:os";
+import path from "node:path";
+import { promisify } from "node:util";
+import { chromium } from "@playwright/test";
+import type { BrowserContext, BrowserContextOptions, Page, Request } from "@playwright/test";
+
+import {
+  getBrowserNetworkIsolationLaunchArgs,
+  getSpotlightIdleMountFailure,
+  getSpotlightIdleNetworkFailure,
+  getRuntimeClaimIneligibleReasons,
+  getRuntimeMetricEligibility,
+  getTrpcProcedures,
+  getTrpcRequestIdentities,
+  getUnrecoveredWidgetDataRequests,
+  hasBlockingWidgetDataAborts,
+  inspectTrpcBatchStreamResponse,
+  isRuntimeWidgetDataRequest,
+  parseRuntimeMemorySnapshot,
+  recordWidgetDataRequestOutcome,
+  summarizeRuntimeMemory,
+} from "./docker-runtime-lib.mts";
+import type { RuntimeMemoryCheckpoint, TrpcBatchInspection, TrpcRequestIdentity } from "./docker-runtime-lib.mts";
+import { summarize } from "./dev-benchmark-lib.mts";
+
+const execFileAsync = promisify(execFile);
+const image = process.env.RUNTIME_BENCHMARK_IMAGE;
+if (!image) throw new Error("RUNTIME_BENCHMARK_IMAGE is required");
+
+const expectedSha = process.env.RUNTIME_BENCHMARK_SHA?.trim() || null;
+const expectedSourceFingerprint = process.env.RUNTIME_BENCHMARK_SOURCE_FINGERPRINT?.trim() || null;
+const settleMs = Number(process.env.RUNTIME_BENCHMARK_SETTLE_MS ?? 10 * 60 * 1_000);
+const sampleIntervalMs = Number(process.env.RUNTIME_BENCHMARK_SAMPLE_INTERVAL_MS ?? 30_000);
+const lcpObservationMs = Number(process.env.RUNTIME_BENCHMARK_LCP_OBSERVATION_MS ?? 5_000);
+const lcpStabilityMs = 500;
+const widgetDataQuietMs = Number(process.env.RUNTIME_BENCHMARK_WIDGET_DATA_QUIET_MS ?? 500);
+const spotlightIdleMs = Number(process.env.RUNTIME_BENCHMARK_SPOTLIGHT_IDLE_MS ?? 2_500);
+const spotlightIdlePolicy = process.env.RUNTIME_BENCHMARK_SPOTLIGHT_IDLE_POLICY;
+const interactionIterations = Number(process.env.RUNTIME_BENCHMARK_INTERACTION_ITERATIONS ?? 7);
+const pageIterations = Number(process.env.RUNTIME_BENCHMARK_PAGE_ITERATIONS ?? 20);
+const readyMarkerPolicy = process.env.RUNTIME_BENCHMARK_REQUIRE_READY_MARKERS;
+const requireImplementationMarkers = readyMarkerPolicy === "true";
+const outputDirectory = path.resolve(process.env.RUNTIME_BENCHMARK_OUTPUT_DIR ?? "benchmark-results/docker-runtime");
+const routePaths = (
+  process.env.RUNTIME_BENCHMARK_ROUTES ?? "/manage,/manage/apps,/manage/integrations,/manage/settings"
+)
+  .split(",")
+  .filter(Boolean);
+const viewport = { height: 720, width: 1280 } as const;
+
+const safeUrlDetails = (rawUrl: string) => {
+  const parsed = new URL(rawUrl);
+  return {
+    origin: parsed.origin,
+    pathname: parsed.pathname,
+    protocol: parsed.protocol,
+    urlHash: createHash("sha256").update(parsed.href).digest("hex"),
+  };
+};
+
+if (!Number.isFinite(settleMs) || settleMs < 0) throw new Error("RUNTIME_BENCHMARK_SETTLE_MS must be non-negative");
+if (!Number.isFinite(sampleIntervalMs) || sampleIntervalMs <= 0) {
+  throw new Error("RUNTIME_BENCHMARK_SAMPLE_INTERVAL_MS must be positive");
+}
+if (!Number.isFinite(lcpObservationMs) || lcpObservationMs < 1_000) {
+  throw new Error("RUNTIME_BENCHMARK_LCP_OBSERVATION_MS must be at least 1000");
+}
+if (!Number.isFinite(spotlightIdleMs) || spotlightIdleMs < 0) {
+  throw new Error("RUNTIME_BENCHMARK_SPOTLIGHT_IDLE_MS must be non-negative");
+}
+if (spotlightIdlePolicy !== "mounted" && spotlightIdlePolicy !== "preload-only") {
+  throw new Error('RUNTIME_BENCHMARK_SPOTLIGHT_IDLE_POLICY must be "mounted" or "preload-only"');
+}
+if (!Number.isFinite(widgetDataQuietMs) || widgetDataQuietMs < 0) {
+  throw new Error("RUNTIME_BENCHMARK_WIDGET_DATA_QUIET_MS must be non-negative");
+}
+if (!Number.isInteger(interactionIterations) || interactionIterations < 7) {
+  throw new Error("RUNTIME_BENCHMARK_INTERACTION_ITERATIONS must be an integer of at least 7");
+}
+if (!Number.isInteger(pageIterations) || pageIterations < 1) {
+  throw new Error("RUNTIME_BENCHMARK_PAGE_ITERATIONS must be a positive integer");
+}
+if (readyMarkerPolicy !== "true" && readyMarkerPolicy !== "false") {
+  throw new Error("RUNTIME_BENCHMARK_REQUIRE_READY_MARKERS must be true or false");
+}
+
+const startExternalDenyProxyAsync = async () => {
+  const attempts = new Map<string, { count: number; method: string; origin: string | null; target: string }>();
+  const recordAttempt = (method: string, target: string) => {
+    let origin: string | null = null;
+    try {
+      origin = new URL(method === "CONNECT" ? `https://${target}` : target).origin;
+    } catch {
+      // Keep the raw target when Chromium sends a non-URL proxy request.
+    }
+    const key = `${method} ${target}`;
+    const existing = attempts.get(key);
+    attempts.set(key, { count: (existing?.count ?? 0) + 1, method, origin, target });
+  };
+  const server = createServer((request, response) => {
+    recordAttempt(request.method ?? "GET", request.url ?? "");
+    response.writeHead(502, {
+      "cache-control": "no-store",
+      connection: "close",
+      "x-homarr-benchmark-blocked": "true",
+    });
+    response.end("External network disabled by Homarr runtime benchmark\n");
+  });
+  server.on("connect", (request, socket) => {
+    recordAttempt("CONNECT", request.url ?? "");
+    socket.end("HTTP/1.1 502 Bad Gateway\r\nConnection: close\r\n\r\n");
+  });
+  server.on("upgrade", (request, socket) => {
+    const rawTarget = request.url ?? "";
+    const target = /^wss?:\/\//.test(rawTarget) ? rawTarget : `ws://${request.headers.host ?? "unknown"}${rawTarget}`;
+    recordAttempt("UPGRADE", target);
+    socket.end("HTTP/1.1 502 Bad Gateway\r\nConnection: close\r\nX-Homarr-Benchmark-Blocked: true\r\n\r\n");
+  });
+  await new Promise<void>((resolve, reject) => {
+    server.once("error", reject);
+    server.listen(0, "127.0.0.1", () => {
+      server.off("error", reject);
+      resolve();
+    });
+  });
+  const address = server.address() as AddressInfo;
+  return {
+    closeAsync: async () => {
+      await new Promise<void>((resolve, reject) => {
+        server.close((error) => (error ? reject(error) : resolve()));
+      });
+    },
+    getAttempts: () => [...attempts.values()].toSorted((left, right) => left.target.localeCompare(right.target)),
+    host: address.address,
+    port: address.port,
+    url: `http://127.0.0.1:${address.port}`,
+  };
+};
+
+const memoryScript = String.raw`
+echo "memory_current=$(cat /sys/fs/cgroup/memory.current)"
+memory_peak="$(cat /sys/fs/cgroup/memory.peak 2>/dev/null || true)"
+case "$memory_peak" in ''|'max') ;; *) echo "memory_peak=$memory_peak" ;; esac
+awk '/^anon / { print "cgroup_anon=" $2 } /^file / { print "cgroup_file=" $2 }' /sys/fs/cgroup/memory.stat
+awk '/^usage_usec / { print "cpu_usage_usec=" $2 } /^user_usec / { print "cpu_user_usec=" $2 } /^system_usec / { print "cpu_system_usec=" $2 } /^nr_throttled / { print "cpu_nr_throttled=" $2 } /^throttled_usec / { print "cpu_throttled_usec=" $2 }' /sys/fs/cgroup/cpu.stat
+for status_file in /proc/[0-9]*/status; do
+  process_dir="\${status_file%/status}"
+  process_values="$(awk '/^Name:/ { name=$2 } /^Pid:/ { pid=$2 } /^PPid:/ { ppid=$2 } /^VmRSS:/ { rss=$2 } END { print pid "|" ppid "|" rss "|" name }' "$status_file")"
+  process_pss="$(awk '/^Pss:/ { print $2 }' "$process_dir/smaps_rollup" 2>/dev/null || echo 0)"
+  echo "process=$process_values|$process_pss"
+done
+redis_info="$(redis-cli INFO memory 2>/dev/null | tr -d '\r' || true)"
+redis_used="$(printf '%s\n' "$redis_info" | awk -F: '/^used_memory:/ { print $2 }')"
+redis_peak="$(printf '%s\n' "$redis_info" | awk -F: '/^used_memory_peak:/ { print $2 }')"
+if [ -n "$redis_used" ] && [ -n "$redis_peak" ]; then
+  echo "redis_used_memory=$redis_used"
+  echo "redis_used_memory_peak=$redis_peak"
+fi
+`;
+
+const waitForReadyAsync = async (baseUrl: string) => {
+  const deadline = Date.now() + 120_000;
+  while (Date.now() < deadline) {
+    try {
+      const response = await fetch(`${baseUrl}/api/health/ready`);
+      if (response.ok) return;
+    } catch {
+      // The socket is not listening yet.
+    }
+    await new Promise((resolve) => setTimeout(resolve, 1_000));
+  }
+  throw new Error(`Container did not become ready at ${baseUrl}`);
+};
+
+const captureCheckpointAsync = async (containerId: string, name: string): Promise<RuntimeMemoryCheckpoint> => {
+  const { stdout } = await execFileAsync("docker", ["exec", containerId, "sh", "-c", memoryScript], {
+    maxBuffer: 4 * 1024 * 1024,
+  });
+  await writeFile(path.join(outputDirectory, `${name}.txt`), stdout);
+  return parseRuntimeMemorySnapshot(name, stdout);
+};
+
+const waitForBoardWidgetsAsync = async (page: Page) => {
+  const boardSelector = "[data-homarr-dev-benchmark-board]";
+  await page.locator(boardSelector).waitFor({ state: "visible", timeout: 30_000 });
+  await page.waitForFunction((selector) => {
+    const board = document.querySelector(selector);
+    const items = [...(board?.querySelectorAll('[data-type="item"]') ?? [])];
+    return items.length > 0 && items.every((item) => item.querySelector(".grid-stack-item-content") !== null);
+  }, boardSelector);
+
+  if (requireImplementationMarkers) {
+    await page.waitForFunction((selector) => {
+      const board = document.querySelector(selector);
+      const items = [...(board?.querySelectorAll('[data-type="item"]') ?? [])];
+      return (
+        items.length > 0 &&
+        items.every(
+          (item) =>
+            item.querySelector("[data-homarr-widget-ready]") !== null ||
+            item.querySelector('[data-homarr-widget-error], a[href*="/manage/tools/logs"]') !== null,
+        )
+      );
+    }, boardSelector);
+  } else {
+    await page.waitForLoadState("networkidle");
+  }
+  await page.evaluate(
+    () => new Promise<void>((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))),
+  );
+  return await readBoardWidgetStateAsync(page);
+};
+
+const waitForSpotlightIdlePreparationAsync = async (page: Page) => {
+  const startedAt = performance.now();
+  const marker =
+    spotlightIdlePolicy === "preload-only"
+      ? "[data-homarr-dev-benchmark-spotlight-preloaded]"
+      : "[data-homarr-dev-benchmark-spotlight-mounted]";
+  await page.locator(marker).waitFor({
+    state: "attached",
+    timeout: Math.max(30_000, spotlightIdleMs + 5_000),
+  });
+  const remainingIdleMs = Math.max(0, spotlightIdleMs - (performance.now() - startedAt));
+  if (remainingIdleMs > 0) await page.waitForTimeout(remainingIdleMs);
+  await page.evaluate(
+    () => new Promise<void>((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))),
+  );
+  await page.waitForTimeout(100);
+  const mountFailure = getSpotlightIdleMountFailure(
+    spotlightIdlePolicy,
+    await page.locator("[data-homarr-dev-benchmark-spotlight-mounted]").count(),
+  );
+  if (mountFailure) throw new Error(mountFailure);
+};
+
+const readBoardWidgetStateAsync = async (page: Page) =>
+  await page.evaluate((selector) => {
+    const board = document.querySelector(selector);
+    return {
+      widgetCount: board?.querySelectorAll('[data-type="item"]').length ?? 0,
+      implementationMarkerCount: board?.querySelectorAll("[data-homarr-widget-ready]").length ?? 0,
+      widgetErrorCount:
+        board?.querySelectorAll('[data-homarr-widget-error], a[href*="/manage/tools/logs"]').length ?? 0,
+    };
+  }, "[data-homarr-dev-benchmark-board]");
+
+const assertBoardWidgetState = (state: Awaited<ReturnType<typeof readBoardWidgetStateAsync>>, scope: string) => {
+  if (requireImplementationMarkers && state.implementationMarkerCount !== state.widgetCount) {
+    throw new Error(`${scope} has incomplete widget implementation markers`);
+  }
+  if (state.widgetErrorCount > 0) {
+    throw new Error(`${scope} rendered ${state.widgetErrorCount} widget errors`);
+  }
+};
+
+type WidgetDataRequestTracker = {
+  activeRequests: Map<Request, { operationCount: number; widgetOperations: TrpcRequestIdentity[] }>;
+  completedOperationCount: number;
+  failedRequests: string[];
+  lastActivityAtMs: number;
+  observedOperationCount: number;
+  recoveryBalance: Map<string, number>;
+};
+
+const trackWidgetDataRequests = (page: Page): WidgetDataRequestTracker => {
+  const tracker: WidgetDataRequestTracker = {
+    activeRequests: new Map(),
+    completedOperationCount: 0,
+    failedRequests: [],
+    lastActivityAtMs: performance.now(),
+    observedOperationCount: 0,
+    recoveryBalance: new Map(),
+  };
+  page.on("request", (request) => {
+    if (request.method() !== "GET") return;
+    try {
+      const operations = getTrpcRequestIdentities(request.url());
+      const widgetOperations = operations.filter(({ procedure }) =>
+        isRuntimeWidgetDataRequest(request.method(), procedure),
+      );
+      if (widgetOperations.length === 0) return;
+      tracker.activeRequests.set(request, { operationCount: operations.length, widgetOperations });
+      tracker.observedOperationCount += widgetOperations.length;
+      tracker.lastActivityAtMs = performance.now();
+    } catch {
+      if (getTrpcProcedures(request.url()).length === 0) return;
+      tracker.failedRequests.push("malformed serialized tRPC request input");
+      tracker.lastActivityAtMs = performance.now();
+    }
+  });
+  const takeRequest = (request: Request) => {
+    const trackedRequest = tracker.activeRequests.get(request);
+    if (!trackedRequest) return null;
+    tracker.activeRequests.delete(request);
+    tracker.lastActivityAtMs = performance.now();
+    return trackedRequest;
+  };
+  const settleTransportFailure = (request: Request, failure: string) => {
+    const trackedRequest = takeRequest(request);
+    if (!trackedRequest) return;
+    const identities = trackedRequest.widgetOperations.map(({ identity }) => identity);
+    if (failure === "net::ERR_ABORTED") {
+      recordWidgetDataRequestOutcome(tracker.recoveryBalance, identities, "aborted");
+    } else {
+      tracker.failedRequests.push(`transport failure ${failure}: ${identities.join(",")}`);
+    }
+  };
+  const settleInspection = (request: Request, inspection: TrpcBatchInspection) => {
+    const trackedRequest = takeRequest(request);
+    if (!trackedRequest) return;
+    const failuresByIndex = new Map(inspection.failures.map((failure) => [failure.batchIndex, failure]));
+    const successfulIndexes = new Set(inspection.successfulIndexes);
+    for (const operation of trackedRequest.widgetOperations) {
+      const failure = failuresByIndex.get(operation.batchIndex);
+      if (failure) {
+        tracker.failedRequests.push(`${JSON.stringify(failure)}: ${operation.identity}`);
+      } else if (successfulIndexes.has(operation.batchIndex)) {
+        tracker.completedOperationCount += 1;
+        recordWidgetDataRequestOutcome(tracker.recoveryBalance, [operation.identity], "completed");
+      } else {
+        tracker.failedRequests.push(`missing tRPC response outcome: ${operation.identity}`);
+      }
+    }
+  };
+  page.on("requestfinished", (request) => {
+    const trackedRequest = tracker.activeRequests.get(request);
+    if (!trackedRequest) return;
+    void (async () => {
+      try {
+        const response = await request.response();
+        if (!response) {
+          settleTransportFailure(request, "missing HTTP response");
+          return;
+        }
+        settleInspection(
+          request,
+          await inspectTrpcBatchStreamResponse(response.status(), await response.text(), trackedRequest.operationCount),
+        );
+      } catch {
+        settleTransportFailure(request, "unable to inspect response");
+      }
+    })();
+  });
+  page.on("requestfailed", (request) =>
+    settleTransportFailure(request, request.failure()?.errorText ?? "request failed"),
+  );
+  return tracker;
+};
+
+const waitForWidgetDataSettledAsync = async (
+  page: Page,
+  tracker: WidgetDataRequestTracker,
+  { allowUnrecoveredAborts = false } = {},
+) => {
+  const deadline = Date.now() + 30_000;
+  while (Date.now() < deadline) {
+    if (tracker.failedRequests.length > 0) {
+      throw new Error(`Widget data requests failed: ${tracker.failedRequests.join("; ")}`);
+    }
+    const unrecoveredRequests = getUnrecoveredWidgetDataRequests(tracker.recoveryBalance);
+    const remainingQuietMs = widgetDataQuietMs - (performance.now() - tracker.lastActivityAtMs);
+    if (
+      tracker.observedOperationCount > 0 &&
+      tracker.activeRequests.size === 0 &&
+      !hasBlockingWidgetDataAborts(allowUnrecoveredAborts, unrecoveredRequests.length) &&
+      remainingQuietMs <= 0
+    ) {
+      const lastActivityAtMs = tracker.lastActivityAtMs;
+      await page.evaluate(
+        () => new Promise<void>((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))),
+      );
+      if (tracker.activeRequests.size === 0 && tracker.lastActivityAtMs === lastActivityAtMs) {
+        return {
+          completedOperationCount: tracker.completedOperationCount,
+          observedOperationCount: tracker.observedOperationCount,
+          quietWindowObserved: true,
+          unrecoveredAbortedRequests: unrecoveredRequests,
+        };
+      }
+    }
+    await new Promise((resolve) => setTimeout(resolve, Math.max(10, Math.min(50, remainingQuietMs))));
+  }
+  const unrecoveredRequests = getUnrecoveredWidgetDataRequests(tracker.recoveryBalance);
+  throw new Error(
+    `Widget data did not settle: observed=${tracker.observedOperationCount} active=${tracker.activeRequests.size} unrecoveredAborts=${unrecoveredRequests.join(",") || "none"}`,
+  );
+};
+
+const deferIdleCallbacksForInitialMeasurement = () => {
+  const originalRequest = window.requestIdleCallback?.bind(window);
+  const originalCancel = window.cancelIdleCallback?.bind(window);
+  const queued = new Map<number, { callback: IdleRequestCallback; options?: IdleRequestOptions }>();
+  let nextId = 1;
+  Object.defineProperty(window, "requestIdleCallback", {
+    configurable: true,
+    value: (callback: IdleRequestCallback, options?: IdleRequestOptions) => {
+      const id = nextId++;
+      queued.set(id, { callback, options });
+      return id;
+    },
+  });
+  Object.defineProperty(window, "cancelIdleCallback", {
+    configurable: true,
+    value: (id: number) => {
+      queued.delete(id);
+    },
+  });
+  Object.defineProperty(window, "homarrReleaseBenchmarkIdleCallbacks", {
+    configurable: true,
+    value: () => {
+      if (originalRequest)
+        Object.defineProperty(window, "requestIdleCallback", { configurable: true, value: originalRequest });
+      if (originalCancel)
+        Object.defineProperty(window, "cancelIdleCallback", { configurable: true, value: originalCancel });
+      for (const { callback, options } of queued.values()) {
+        if (originalRequest) originalRequest(callback, options);
+        else window.setTimeout(() => callback({ didTimeout: false, timeRemaining: () => 50 }), 0);
+      }
+      queued.clear();
+    },
+  });
+};
+
+const initializeBrowserVitals = () => {
+  const state = {
+    cls: 0,
+    lcpElement: null as null | {
+      className: string | null;
+      id: string | null;
+      origin: string | null;
+      pathname: string | null;
+      size: number | null;
+      tagName: string | null;
+      text: string | null;
+    },
+    lcpMs: null as number | null,
+    lcpFinalizedByInputMs: null as number | null,
+    lcpUpdatedAtMs: null as number | null,
+    longTaskCount: 0,
+    longTaskTotalMs: 0,
+  };
+  Object.defineProperty(window, "homarrBenchmarkVitals", { value: state, configurable: true });
+  window.addEventListener(
+    "keydown",
+    (event) => {
+      if (event.isTrusted && state.lcpFinalizedByInputMs === null) state.lcpFinalizedByInputMs = performance.now();
+    },
+    { capture: true },
+  );
+  if (PerformanceObserver.supportedEntryTypes.includes("largest-contentful-paint")) {
+    new PerformanceObserver((list) => {
+      const entry = list.getEntries().at(-1);
+      if (!entry) return;
+      const lcp = entry as PerformanceEntry & { element?: Element; size?: number; url?: string };
+      const element = lcp.element;
+      state.lcpMs = entry.startTime;
+      state.lcpUpdatedAtMs = performance.now();
+      state.lcpElement = {
+        className: element?.getAttribute("class") ?? null,
+        id: element?.id || null,
+        origin: lcp.url ? new URL(lcp.url, window.location.href).origin : null,
+        pathname: lcp.url ? new URL(lcp.url, window.location.href).pathname : null,
+        size: lcp.size ?? null,
+        tagName: element?.tagName ?? null,
+        text: element?.textContent?.trim().slice(0, 120) || null,
+      };
+    }).observe({ type: "largest-contentful-paint", buffered: true });
+  }
+  if (PerformanceObserver.supportedEntryTypes.includes("layout-shift")) {
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        const shift = entry as PerformanceEntry & { hadRecentInput?: boolean; value?: number };
+        if (!shift.hadRecentInput) state.cls += shift.value ?? 0;
+      }
+    }).observe({ type: "layout-shift", buffered: true });
+  }
+  if (PerformanceObserver.supportedEntryTypes.includes("longtask")) {
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        state.longTaskCount += 1;
+        state.longTaskTotalMs += entry.duration;
+      }
+    }).observe({ type: "longtask", buffered: true });
+  }
+};
+
+const installMeasurementScriptsAsync = async (context: BrowserContext, options?: { deferIdle?: boolean }) => {
+  if (options?.deferIdle) await context.addInitScript(deferIdleCallbacksForInitialMeasurement);
+  await context.addInitScript(initializeBrowserVitals);
+};
+
+const waitForFinalLcpAsync = async (page: Page) => {
+  await page.waitForFunction(
+    () =>
+      typeof (window as Window & { homarrBenchmarkVitals?: { lcpMs: number | null } }).homarrBenchmarkVitals?.lcpMs ===
+      "number",
+    undefined,
+    { timeout: Math.max(10_000, lcpObservationMs + 5_000) },
+  );
+  while (true) {
+    const { elapsedMs, lastCandidateAtMs } = await page.evaluate(() => {
+      const vitals = (window as Window & { homarrBenchmarkVitals?: { lcpUpdatedAtMs: number | null } })
+        .homarrBenchmarkVitals;
+      return { elapsedMs: performance.now(), lastCandidateAtMs: vitals?.lcpUpdatedAtMs ?? null };
+    });
+    if (lastCandidateAtMs === null) throw new Error("LCP candidate timestamp is missing");
+    const remainingMs = Math.max(0, lcpObservationMs - elapsedMs, lcpStabilityMs - (elapsedMs - lastCandidateAtMs));
+    if (remainingMs === 0) break;
+    await page.waitForTimeout(remainingMs);
+  }
+
+  // LCP remains open to later candidates until the first trusted input. End
+  // the declared observation window with an inert key so the recorded value
+  // is final, while leaving application state and layout untouched.
+  await page.keyboard.press("Shift");
+  await page.waitForFunction(
+    () =>
+      typeof (window as Window & { homarrBenchmarkVitals?: { lcpFinalizedByInputMs: number | null } })
+        .homarrBenchmarkVitals?.lcpFinalizedByInputMs === "number",
+  );
+  await page.waitForTimeout(100);
+};
+
+const readBrowserMetricsAsync = async (page: Page) =>
+  await page.evaluate(() => {
+    const resources = performance.getEntriesByType("resource") as PerformanceResourceTiming[];
+    const navigation = performance.getEntriesByType("navigation")[0] as PerformanceNavigationTiming | undefined;
+    const firstContentfulPaint = performance
+      .getEntriesByType("paint")
+      .find(({ name }) => name === "first-contentful-paint");
+    const vitals = (
+      window as Window & {
+        homarrBenchmarkVitals?: {
+          cls: number;
+          lcpElement: {
+            className: string | null;
+            id: string | null;
+            origin: string | null;
+            pathname: string | null;
+            size: number | null;
+            tagName: string | null;
+            text: string | null;
+          } | null;
+          lcpMs: number | null;
+          lcpFinalizedByInputMs: number | null;
+          lcpUpdatedAtMs: number | null;
+          longTaskCount: number;
+          longTaskTotalMs: number;
+        };
+      }
+    ).homarrBenchmarkVitals;
+    const memory = performance as Performance & { memory?: { usedJSHeapSize: number } };
+    return {
+      cls: Number((vitals?.cls ?? 0).toFixed(4)),
+      decodedScriptBytes: resources
+        .filter((resource) => resource.initiatorType === "script")
+        .reduce((sum, resource) => sum + resource.decodedBodySize, 0),
+      domContentLoadedMs: navigation ? Math.round(navigation.domContentLoadedEventEnd) : null,
+      fcpMs: firstContentfulPaint ? Math.round(firstContentfulPaint.startTime) : null,
+      jsHeapBytes: memory.memory?.usedJSHeapSize ?? null,
+      lcpElement: vitals?.lcpElement ?? null,
+      lcpFinalizedByInputMs:
+        vitals?.lcpFinalizedByInputMs === null || vitals?.lcpFinalizedByInputMs === undefined
+          ? null
+          : Math.round(vitals.lcpFinalizedByInputMs),
+      lcpMs: vitals?.lcpMs === null || vitals?.lcpMs === undefined ? null : Math.round(vitals.lcpMs),
+      lcpUpdatedAtMs:
+        vitals?.lcpUpdatedAtMs === null || vitals?.lcpUpdatedAtMs === undefined
+          ? null
+          : Math.round(vitals.lcpUpdatedAtMs),
+      loadMs: navigation?.loadEventEnd ? Math.round(navigation.loadEventEnd) : null,
+      longTaskCount: vitals?.longTaskCount ?? 0,
+      longTaskTotalMs: Math.round(vitals?.longTaskTotalMs ?? 0),
+      largestScripts: resources
+        .filter((resource) => resource.initiatorType === "script")
+        .toSorted((left, right) => right.decodedBodySize - left.decodedBodySize)
+        .slice(0, 10)
+        .map(({ decodedBodySize, name, transferSize }) => {
+          const url = new URL(name, window.location.href);
+          return { decodedBodySize, origin: url.origin, pathname: url.pathname, transferSize };
+        }),
+      resourceCount: resources.length,
+      slowestResources: resources
+        .toSorted((left, right) => right.duration - left.duration)
+        .slice(0, 10)
+        .map(({ duration, initiatorType, name, transferSize }) => {
+          const url = new URL(name, window.location.href);
+          return {
+            durationMs: Math.round(duration),
+            initiatorType,
+            origin: url.origin,
+            pathname: url.pathname,
+            transferSize,
+          };
+        }),
+      ttfbMs: navigation ? Math.round(navigation.responseStart) : null,
+      transferBytes: resources.reduce((sum, resource) => sum + resource.transferSize, 0),
+    };
+  });
+
+await mkdir(outputDirectory, { recursive: true });
+const appDataDirectory = await mkdtemp(path.join(os.tmpdir(), "homarr-runtime-benchmark-"));
+const containerName = `homarr-runtime-benchmark-${process.pid}`;
+const proxyContainerName = `${containerName}-proxy`;
+const isolationNetworkName = `${containerName}-internal`;
+let containerId: string | undefined;
+let proxyContainerId: string | undefined;
+let isolationNetworkId: string | undefined;
+let browser: Awaited<ReturnType<typeof chromium.launch>> | undefined;
+let denyProxy: Awaited<ReturnType<typeof startExternalDenyProxyAsync>> | undefined;
+let cleanupPromise: Promise<void> | undefined;
+let lifecycleMutation: ReturnType<typeof execFileAsync> | undefined;
+let shutdownRequested = false;
+
+const execDockerLifecycleAsync = async (args: string[]) => {
+  const mutation = execFileAsync("docker", args);
+  lifecycleMutation = mutation;
+  try {
+    const result = await mutation;
+    if (shutdownRequested) throw new Error("Runtime benchmark interrupted");
+    return result;
+  } finally {
+    if (lifecycleMutation === mutation) lifecycleMutation = undefined;
+  }
+};
+
+const cleanupAsync = () => {
+  cleanupPromise ??= (async () => {
+    const activeLifecycleMutation = lifecycleMutation;
+    if (activeLifecycleMutation) await activeLifecycleMutation.catch(() => undefined);
+    await browser?.close().catch(() => undefined);
+    await denyProxy?.closeAsync().catch(() => undefined);
+    await execFileAsync("docker", ["rm", "--force", proxyContainerName]).catch(() => undefined);
+    await execFileAsync("docker", ["rm", "--force", containerName]).catch(() => undefined);
+    await execFileAsync("docker", ["network", "rm", isolationNetworkName]).catch(() => undefined);
+    await rm(appDataDirectory, { recursive: true, force: true }).catch(() => undefined);
+  })();
+  return cleanupPromise;
+};
+
+const handleSignal = (signal: "SIGINT" | "SIGTERM") => {
+  shutdownRequested = true;
+  console.error(`Received ${signal}; cleaning up runtime benchmark resources`);
+  void cleanupAsync().finally(() => process.exit(signal === "SIGINT" ? 130 : 143));
+};
+const handleSigint = () => handleSignal("SIGINT");
+const handleSigterm = () => handleSignal("SIGTERM");
+process.once("SIGINT", handleSigint);
+process.once("SIGTERM", handleSigterm);
+
+try {
+  const imageInspect = JSON.parse((await execFileAsync("docker", ["image", "inspect", image])).stdout)[0] as {
+    Architecture: string;
+    Config?: { Labels?: Record<string, string> };
+    Id: string;
+    RepoDigests?: string[];
+    Size: number;
+  };
+  const revision = imageInspect.Config?.Labels?.["org.opencontainers.image.revision"] ?? null;
+  const sourceFingerprint = imageInspect.Config?.Labels?.["dev.homarr.source-fingerprint"] ?? null;
+  const dockerVersion = JSON.parse(
+    (await execFileAsync("docker", ["version", "--format", "{{json .}}"])).stdout,
+  ) as Record<string, unknown>;
+  const dockerInfo = JSON.parse((await execFileAsync("docker", ["info", "--format", "{{json .}}"])).stdout) as {
+    Architecture?: string;
+    CgroupDriver?: string;
+    CgroupVersion?: string;
+    Driver?: string;
+    KernelVersion?: string;
+    MemTotal?: number;
+    NCPU?: number;
+    OSType?: string;
+    OperatingSystem?: string;
+    ServerVersion?: string;
+  };
+
+  const containerStartedAt = performance.now();
+  isolationNetworkId = (
+    await execDockerLifecycleAsync(["network", "create", "--driver", "bridge", "--internal", isolationNetworkName])
+  ).stdout.trim();
+  const runResult = await execDockerLifecycleAsync([
+    "run",
+    "--detach",
+    "--rm",
+    "--name",
+    containerName,
+    "--cpus",
+    "2",
+    "--memory",
+    "1g",
+    "--network",
+    isolationNetworkName,
+    "--volume",
+    `${appDataDirectory}:/appdata`,
+    "--env",
+    "DEMO_MODE=true",
+    "--env",
+    "DEMO_READ_ONLY=false",
+    "--env",
+    "UNSAFE_ENABLE_MOCK_INTEGRATION=true",
+    "--env",
+    "NO_EXTERNAL_CONNECTION=true",
+    "--env",
+    "LOG_LEVEL=warn",
+    "--env",
+    `SECRET_ENCRYPTION_KEY=${"0".repeat(64)}`,
+    imageInspect.Id,
+  ]);
+  containerId = runResult.stdout.trim();
+  proxyContainerId = (
+    await execDockerLifecycleAsync([
+      "run",
+      "--detach",
+      "--rm",
+      "--name",
+      proxyContainerName,
+      "--publish",
+      "127.0.0.1::7575",
+      "--env",
+      `UPSTREAM_HOST=${containerName}`,
+      "--entrypoint",
+      "node",
+      imageInspect.Id,
+      "-e",
+      `const net = require("node:net");
+net.createServer((client) => {
+  const upstream = net.connect(7575, process.env.UPSTREAM_HOST);
+  client.pipe(upstream).pipe(client);
+  const close = () => { client.destroy(); upstream.destroy(); };
+  client.on("error", close);
+  upstream.on("error", close);
+}).listen(7575, "0.0.0.0");`,
+    ])
+  ).stdout.trim();
+  await execDockerLifecycleAsync(["network", "connect", isolationNetworkName, proxyContainerId]);
+  const portOutput = (await execFileAsync("docker", ["port", proxyContainerId, "7575/tcp"])).stdout;
+  const port = Number(portOutput.trim().match(/:(\d+)$/)?.[1]);
+  if (!Number.isInteger(port)) throw new Error(`Unable to resolve mapped port from ${portOutput}`);
+  const baseUrl = `http://127.0.0.1:${port}`;
+  await waitForReadyAsync(baseUrl);
+  const startToReadyMs = Math.round(performance.now() - containerStartedAt);
+  const containerNode = JSON.parse(
+    (
+      await execFileAsync("docker", [
+        "exec",
+        containerId,
+        "node",
+        "-p",
+        "JSON.stringify({architecture:process.arch,platform:process.platform,version:process.version,v8Version:process.versions.v8})",
+      ])
+    ).stdout,
+  ) as { architecture: string; platform: string; version: string; v8Version: string };
+  const serverNetworkIsolationCanary = JSON.parse(
+    (
+      await execFileAsync("docker", [
+        "exec",
+        containerId,
+        "node",
+        "-e",
+        `Promise.all([
+  fetch("https://example.com", { signal: AbortSignal.timeout(3000) }).then((response) => ({ blocked: false, status: response.status }), (error) => ({ blocked: true, code: error.cause?.code ?? error.name })),
+  fetch("http://1.1.1.1", { signal: AbortSignal.timeout(3000) }).then((response) => ({ blocked: false, status: response.status }), (error) => ({ blocked: true, code: error.cause?.code ?? error.name })),
+]).then((result) => console.log(JSON.stringify({ domain: result[0], directIp: result[1] })));`,
+      ])
+    ).stdout,
+  ) as {
+    directIp: { blocked: boolean; code?: string; status?: number };
+    domain: { blocked: boolean; code?: string; status?: number };
+  };
+  const serverNetworkIsolated =
+    serverNetworkIsolationCanary.domain.blocked && serverNetworkIsolationCanary.directIp.blocked;
+  if (!serverNetworkIsolated) {
+    throw new Error(`Server external network isolation canary failed: ${JSON.stringify(serverNetworkIsolationCanary)}`);
+  }
+
+  const checkpoints: RuntimeMemoryCheckpoint[] = [];
+  checkpoints.push(await captureCheckpointAsync(containerId, "startup"));
+
+  denyProxy = await startExternalDenyProxyAsync();
+  const browserLaunchArguments = getBrowserNetworkIsolationLaunchArgs(denyProxy.url);
+  browser = await chromium.launch({ args: browserLaunchArguments });
+  const isolationCanaryUrl = "http://homarr-benchmark.invalid/__network-isolation-canary__";
+  const canaryAttemptsBefore = denyProxy
+    .getAttempts()
+    .filter(({ method, target }) => method === "GET" && target === isolationCanaryUrl)
+    .reduce((total, { count }) => total + count, 0);
+  const canaryContext = await browser.newContext({ viewport });
+  const canaryPage = await canaryContext.newPage();
+  const canaryWebSocketUrls: string[] = [];
+  const canaryWebSocketEvents = new Map<
+    string,
+    { closeCount: number; frameReceivedCount: number; frameSentCount: number; socketErrorCount: number }
+  >();
+  canaryPage.on("websocket", (webSocket) => {
+    const url = webSocket.url();
+    canaryWebSocketUrls.push(url);
+    const events = { closeCount: 0, frameReceivedCount: 0, frameSentCount: 0, socketErrorCount: 0 };
+    canaryWebSocketEvents.set(url, events);
+    webSocket.on("close", () => {
+      events.closeCount += 1;
+    });
+    webSocket.on("framereceived", () => {
+      events.frameReceivedCount += 1;
+    });
+    webSocket.on("framesent", () => {
+      events.frameSentCount += 1;
+    });
+    webSocket.on("socketerror", () => {
+      events.socketErrorCount += 1;
+    });
+  });
+  const canaryResponse = await canaryPage.goto(isolationCanaryUrl, { waitUntil: "domcontentloaded" });
+  const canaryAttemptsAfter = denyProxy
+    .getAttempts()
+    .filter(({ method, target }) => method === "GET" && target === isolationCanaryUrl)
+    .reduce((total, { count }) => total + count, 0);
+  const browserNetworkIsolationCanary = {
+    attemptCount: canaryAttemptsAfter - canaryAttemptsBefore,
+    responseHeader: canaryResponse?.headers()["x-homarr-benchmark-blocked"] ?? null,
+    status: canaryResponse?.status() ?? null,
+    url: isolationCanaryUrl,
+  };
+  const runWebSocketIsolationCanaryAsync = async (url: string, connectTarget: string) => {
+    const getAttemptCount = () =>
+      denyProxy
+        ?.getAttempts()
+        .filter(
+          ({ method, target }) =>
+            (method === "CONNECT" && target === connectTarget) || (method === "UPGRADE" && target === url),
+        )
+        .reduce((total, { count }) => total + count, 0) ?? 0;
+    const attemptsBefore = getAttemptCount();
+    const result = await canaryPage.evaluate(
+      (canaryUrl) =>
+        new Promise<{ closeCode: number | null; errorEvent: boolean; opened: boolean; timedOut: boolean }>(
+          (resolve) => {
+            const webSocket = new WebSocket(canaryUrl);
+            let settled = false;
+            const finish = (value: {
+              closeCode: number | null;
+              errorEvent: boolean;
+              opened: boolean;
+              timedOut: boolean;
+            }) => {
+              if (settled) return;
+              settled = true;
+              window.clearTimeout(timeout);
+              if (webSocket.readyState === WebSocket.OPEN) webSocket.close();
+              resolve(value);
+            };
+            const timeout = window.setTimeout(
+              () => finish({ closeCode: null, errorEvent: false, opened: false, timedOut: true }),
+              5_000,
+            );
+            webSocket.addEventListener("open", () =>
+              finish({ closeCode: null, errorEvent: false, opened: true, timedOut: false }),
+            );
+            webSocket.addEventListener("error", () =>
+              finish({ closeCode: null, errorEvent: true, opened: false, timedOut: false }),
+            );
+            webSocket.addEventListener("close", (event) =>
+              finish({ closeCode: event.code, errorEvent: false, opened: false, timedOut: false }),
+            );
+          },
+        ),
+      url,
+    );
+    const eventsDeadline = Date.now() + 2_000;
+    while (Date.now() < eventsDeadline) {
+      const events = canaryWebSocketEvents.get(url);
+      if ((events?.closeCount ?? 0) > 0 && (events?.socketErrorCount ?? 0) > 0) break;
+      await canaryPage.waitForTimeout(25);
+    }
+    const events = canaryWebSocketEvents.get(url) ?? {
+      closeCount: 0,
+      frameReceivedCount: 0,
+      frameSentCount: 0,
+      socketErrorCount: 0,
+    };
+    return {
+      ...result,
+      ...events,
+      attemptCount: getAttemptCount() - attemptsBefore,
+      browserEventCount: canaryWebSocketUrls.filter((observedUrl) => observedUrl === url).length,
+      connectTarget,
+      url,
+    };
+  };
+  const browserWebSocketIsolationCanaries = await Promise.all([
+    runWebSocketIsolationCanaryAsync(
+      "ws://homarr-benchmark-ws.invalid/__websocket-network-isolation-canary__",
+      "homarr-benchmark-ws.invalid:80",
+    ),
+    runWebSocketIsolationCanaryAsync(
+      "wss://homarr-benchmark-wss.invalid/__websocket-network-isolation-canary__",
+      "homarr-benchmark-wss.invalid:443",
+    ),
+  ]);
+  await canaryContext.close();
+  const browserNetworkIsolated =
+    browserNetworkIsolationCanary.status === 502 &&
+    browserNetworkIsolationCanary.responseHeader === "true" &&
+    browserNetworkIsolationCanary.attemptCount > 0 &&
+    browserWebSocketIsolationCanaries.every(
+      ({
+        attemptCount,
+        browserEventCount,
+        closeCount,
+        errorEvent,
+        frameReceivedCount,
+        frameSentCount,
+        opened,
+        socketErrorCount,
+        timedOut,
+      }) =>
+        attemptCount > 0 &&
+        browserEventCount > 0 &&
+        closeCount > 0 &&
+        errorEvent &&
+        frameReceivedCount === 0 &&
+        frameSentCount === 0 &&
+        !opened &&
+        socketErrorCount > 0 &&
+        !timedOut,
+    );
+  if (!browserNetworkIsolated) {
+    throw new Error(
+      `Browser network isolation canary failed: ${JSON.stringify({ http: browserNetworkIsolationCanary, webSockets: browserWebSocketIsolationCanaries })}`,
+    );
+  }
+  const browserNetworkObservations = new Map<
+    string,
+    {
+      failedCount: number;
+      failureTexts: Set<string>;
+      methods: Set<string>;
+      origin: string;
+      pathname: string;
+      protocol: string;
+      requestCount: number;
+      resourceTypes: Set<string>;
+      responseStatuses: Set<number>;
+      urlHash: string;
+    }
+  >();
+  const browserWebSocketObservations = new Map<
+    string,
+    {
+      closeCount: number;
+      frameReceivedCount: number;
+      frameSentCount: number;
+      origin: string;
+      pathname: string;
+      protocol: string;
+      requestCount: number;
+      socketErrorCount: number;
+      urlHash: string;
+    }
+  >();
+  const allowedBrowserOrigin = new URL(baseUrl).origin;
+  const allowedBrowserWebSocketUrl = new URL(baseUrl);
+  allowedBrowserWebSocketUrl.protocol = allowedBrowserWebSocketUrl.protocol === "https:" ? "wss:" : "ws:";
+  const allowedBrowserWebSocketOrigin = allowedBrowserWebSocketUrl.origin;
+  const getNetworkObservation = (url: string) => {
+    const safeUrl = safeUrlDetails(url);
+    const existing = browserNetworkObservations.get(safeUrl.urlHash);
+    if (existing) return existing;
+    const observation = {
+      failedCount: 0,
+      failureTexts: new Set<string>(),
+      methods: new Set<string>(),
+      ...safeUrl,
+      requestCount: 0,
+      resourceTypes: new Set<string>(),
+      responseStatuses: new Set<number>(),
+    };
+    browserNetworkObservations.set(safeUrl.urlHash, observation);
+    return observation;
+  };
+  const observeBrowserNetwork = (browserContext: BrowserContext) => {
+    browserContext.on("request", (request) => {
+      const observation = getNetworkObservation(request.url());
+      observation.requestCount += 1;
+      observation.methods.add(request.method());
+      observation.resourceTypes.add(request.resourceType());
+    });
+    browserContext.on("requestfailed", (request) => {
+      const observation = getNetworkObservation(request.url());
+      observation.failedCount += 1;
+      const failureText = request.failure()?.errorText;
+      if (failureText) observation.failureTexts.add(failureText);
+    });
+    browserContext.on("response", (response) => {
+      getNetworkObservation(response.url()).responseStatuses.add(response.status());
+    });
+    browserContext.on("page", (observedPage) => {
+      observedPage.on("websocket", (webSocket) => {
+        const url = webSocket.url();
+        const safeUrl = safeUrlDetails(url);
+        const observation = browserWebSocketObservations.get(safeUrl.urlHash) ?? {
+          closeCount: 0,
+          frameReceivedCount: 0,
+          frameSentCount: 0,
+          ...safeUrl,
+          requestCount: 0,
+          socketErrorCount: 0,
+        };
+        observation.requestCount += 1;
+        browserWebSocketObservations.set(safeUrl.urlHash, observation);
+        webSocket.on("close", () => {
+          observation.closeCount += 1;
+        });
+        webSocket.on("framereceived", () => {
+          observation.frameReceivedCount += 1;
+        });
+        webSocket.on("framesent", () => {
+          observation.frameSentCount += 1;
+        });
+        webSocket.on("socketerror", () => {
+          observation.socketErrorCount += 1;
+        });
+      });
+    });
+  };
+  const createBenchmarkContextAsync = async (options: BrowserContextOptions = {}) => {
+    if (!browser) throw new Error("Chromium is not running");
+    const browserContext = await browser.newContext({
+      deviceScaleFactor: 1,
+      viewport,
+      ...options,
+    });
+    observeBrowserNetwork(browserContext);
+    return browserContext;
+  };
+  const browserProvenance = {
+    engine: "chromium",
+    executablePath: chromium.executablePath(),
+    headless: true,
+    httpCachePolicy: "Chromium default cache enabled within each browser context",
+    launchArguments: browserLaunchArguments,
+    version: browser.version(),
+    viewport: { deviceScaleFactor: 1, ...viewport },
+  };
+  const context = await createBenchmarkContextAsync();
+  await installMeasurementScriptsAsync(context, { deferIdle: true });
+  const page = await context.newPage();
+  await page.goto(`${baseUrl}/auth/login`, { waitUntil: "domcontentloaded" });
+  await page.waitForFunction(
+    () => {
+      const form = document.querySelector("form");
+      return form !== null && Object.keys(form).some((key) => key.startsWith("__reactProps$"));
+    },
+    undefined,
+    { timeout: 30_000 },
+  );
+  await page.getByLabel("Username").fill("demo");
+  await page.locator("#password").fill("demo");
+  const loginWidgetDataTracker = trackWidgetDataRequests(page);
+
+  const pageErrors: string[] = [];
+  let legacyQueryCacheWriteBytes = 0;
+  let legacyQueryCacheWriteCount = 0;
+  let trpcRequestCount = 0;
+  let nonWidgetTrpcRequestCount = 0;
+  let widgetRequestCount = 0;
+  let webSocketCount = 0;
+  page.on("pageerror", (error) => pageErrors.push(error.message));
+  page.on("websocket", () => {
+    webSocketCount += 1;
+  });
+  page.on("request", (request) => {
+    const procedures = getTrpcProcedures(request.url());
+    const widgetProcedures = procedures.filter((procedure) => procedure.startsWith("widget."));
+    const legacyQueryCacheWrites = procedures.filter((procedure) => procedure === "queryCache.setItem");
+    trpcRequestCount += procedures.length;
+    widgetRequestCount += widgetProcedures.length;
+    nonWidgetTrpcRequestCount += procedures.length - widgetProcedures.length;
+    if (legacyQueryCacheWrites.length > 0) {
+      legacyQueryCacheWriteCount += legacyQueryCacheWrites.length;
+      legacyQueryCacheWriteBytes += request.postDataBuffer()?.byteLength ?? 0;
+    }
+  });
+
+  const loginJourneyBoardStartedAt = performance.now();
+  await page.locator('button[type="submit"]').click();
+  await page.waitForURL(`${baseUrl}/`, { timeout: 30_000, waitUntil: "domcontentloaded" });
+  await page.locator("[data-homarr-dev-benchmark-board]").waitFor({ state: "visible", timeout: 30_000 });
+  const loginJourneyBoardMountedMs = Math.round(performance.now() - loginJourneyBoardStartedAt);
+  const loginBoardState = await waitForBoardWidgetsAsync(page);
+  const { widgetCount, implementationMarkerCount, widgetErrorCount } = loginBoardState;
+  if (requireImplementationMarkers && implementationMarkerCount !== widgetCount) {
+    throw new Error(`Only ${implementationMarkerCount} of ${widgetCount} widget implementations mounted`);
+  }
+  if (widgetErrorCount > 0) throw new Error(`Representative board rendered ${widgetErrorCount} widget errors`);
+  const loginJourneyWidgetImplementationsMountedMs = requireImplementationMarkers
+    ? Math.round(performance.now() - loginJourneyBoardStartedAt)
+    : null;
+  const loginJourneyWidgetData = await waitForWidgetDataSettledAsync(page, loginWidgetDataTracker, {
+    allowUnrecoveredAborts: true,
+  });
+  const loginJourneyWidgetDataSettledMs =
+    loginJourneyWidgetData.completedOperationCount > 0 && loginJourneyWidgetData.unrecoveredAbortedRequests.length === 0
+      ? Math.round(performance.now() - loginJourneyBoardStartedAt)
+      : null;
+  assertBoardWidgetState(await readBoardWidgetStateAsync(page), "Representative board after widget data settled");
+  const authenticatedStorageState = await context.storageState();
+  const loginJourneyNetworkCounts = {
+    trpcRequestCount,
+    widgetRequestCount,
+    webSocketCount,
+    legacyQueryCacheWriteCount,
+    legacyQueryCacheWriteBytes,
+  };
+  const pageLoadSamples = [] as Array<{
+    boardMountedMs: number;
+    fcpMs: number;
+    lcpFinalizedByInputMs: number;
+    lcpMs: number;
+    ttfbMs: number;
+    widgetImplementationsMountedMs: number | null;
+    widgetDataObservedOperationCount: number;
+    widgetDataSettledMs: number;
+  }>;
+
+  // Login uses a soft navigation whose LCP is terminated by the submit click.
+  // Keep that journey timing separate and measure browser vitals in a fresh,
+  // naturally scheduled authenticated document.
+  const initialContext = await createBenchmarkContextAsync({ storageState: authenticatedStorageState });
+  await installMeasurementScriptsAsync(initialContext);
+  const initialPage = await initialContext.newPage();
+  const initialWidgetDataTracker = trackWidgetDataRequests(initialPage);
+  const initialPageErrors: string[] = [];
+  const initialNetworkCounts = {
+    legacyQueryCacheWriteBytes: 0,
+    legacyQueryCacheWriteCount: 0,
+    trpcRequestCount: 0,
+    webSocketCount: 0,
+    widgetRequestCount: 0,
+  };
+  initialPage.on("pageerror", (error) => initialPageErrors.push(error.message));
+  initialPage.on("websocket", () => {
+    initialNetworkCounts.webSocketCount += 1;
+  });
+  initialPage.on("request", (request) => {
+    const procedures = getTrpcProcedures(request.url());
+    const legacyQueryCacheWrites = procedures.filter((procedure) => procedure === "queryCache.setItem");
+    initialNetworkCounts.trpcRequestCount += procedures.length;
+    initialNetworkCounts.widgetRequestCount += procedures.filter((procedure) => procedure.startsWith("widget.")).length;
+    if (legacyQueryCacheWrites.length > 0) {
+      initialNetworkCounts.legacyQueryCacheWriteCount += legacyQueryCacheWrites.length;
+      initialNetworkCounts.legacyQueryCacheWriteBytes += request.postDataBuffer()?.byteLength ?? 0;
+    }
+  });
+  const initialDashboardStartedAt = performance.now();
+  const initialDashboardResponse = await initialPage.goto(baseUrl, { waitUntil: "domcontentloaded" });
+  if (!initialDashboardResponse?.ok()) {
+    throw new Error(`Initial authenticated dashboard returned HTTP ${String(initialDashboardResponse?.status())}`);
+  }
+  const initialAuthenticatedBoardState = await waitForBoardWidgetsAsync(initialPage);
+  if (
+    requireImplementationMarkers &&
+    initialAuthenticatedBoardState.implementationMarkerCount !== initialAuthenticatedBoardState.widgetCount
+  ) {
+    throw new Error("Initial authenticated dashboard has incomplete widget implementation markers");
+  }
+  if (initialAuthenticatedBoardState.widgetErrorCount > 0) {
+    throw new Error(
+      `Initial authenticated dashboard rendered ${initialAuthenticatedBoardState.widgetErrorCount} widget errors`,
+    );
+  }
+  const initialWidgetData = await waitForWidgetDataSettledAsync(initialPage, initialWidgetDataTracker);
+  const initialWidgetDataSettledMs = Math.round(performance.now() - initialDashboardStartedAt);
+  assertBoardWidgetState(
+    await readBoardWidgetStateAsync(initialPage),
+    "Initial authenticated dashboard after widget data settled",
+  );
+  await waitForFinalLcpAsync(initialPage);
+  const initialBrowserMetrics = await readBrowserMetricsAsync(initialPage);
+  if (initialBrowserMetrics.lcpFinalizedByInputMs === null) {
+    throw new Error("Initial authenticated dashboard did not finalize LCP with trusted input");
+  }
+  if (initialPageErrors.length > 0) {
+    throw new Error(`Initial authenticated dashboard page errors: ${initialPageErrors.join("; ")}`);
+  }
+  await initialContext.close();
+
+  const trpcRequestCountBeforeIdleSpotlight = trpcRequestCount;
+  const nonWidgetTrpcRequestCountBeforeIdleSpotlight = nonWidgetTrpcRequestCount;
+  await page.evaluate(() => {
+    (window as Window & { homarrReleaseBenchmarkIdleCallbacks?: () => void }).homarrReleaseBenchmarkIdleCallbacks?.();
+  });
+  await waitForSpotlightIdlePreparationAsync(page);
+  const idleSpotlightNetworkCounts = {
+    trpcRequestCount: trpcRequestCount - trpcRequestCountBeforeIdleSpotlight,
+    nonWidgetTrpcRequestCount: nonWidgetTrpcRequestCount - nonWidgetTrpcRequestCountBeforeIdleSpotlight,
+  };
+  const idleSpotlightNetworkFailure = getSpotlightIdleNetworkFailure(
+    spotlightIdlePolicy,
+    idleSpotlightNetworkCounts.nonWidgetTrpcRequestCount,
+  );
+  if (idleSpotlightNetworkFailure) throw new Error(idleSpotlightNetworkFailure);
+
+  const warmInteractionSamplesMs: number[] = [];
+  for (let iteration = 0; iteration < interactionIterations; iteration += 1) {
+    const warmInteractionStartedAt = performance.now();
+    await page.locator('[data-homarr-dev-benchmark-interaction="search"]:visible').click();
+    await page.locator("[data-homarr-dev-benchmark-spotlight]").waitFor({ state: "visible" });
+    warmInteractionSamplesMs.push(Math.round(performance.now() - warmInteractionStartedAt));
+    await page.keyboard.press("Escape");
+    await page.locator("[data-homarr-dev-benchmark-spotlight]").waitFor({ state: "hidden" });
+  }
+  const postIdleWarmInteractionMs = warmInteractionSamplesMs[0] ?? null;
+  const postIdleWarmInteractionSummary = summarize(warmInteractionSamplesMs);
+
+  const websocketStartedAt = performance.now();
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve, reject) => {
+        const socket = new WebSocket(
+          `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/websockets`,
+        );
+        const timeout = window.setTimeout(() => {
+          socket.close();
+          reject(new Error("WebSocket readiness probe timed out"));
+        }, 10_000);
+        socket.addEventListener("open", () => {
+          window.clearTimeout(timeout);
+          socket.close();
+          resolve();
+        });
+        socket.addEventListener("error", () => {
+          window.clearTimeout(timeout);
+          reject(new Error("WebSocket readiness probe failed"));
+        });
+      }),
+  );
+  const websocketReadyMs = Math.round(performance.now() - websocketStartedAt);
+
+  checkpoints.push(await captureCheckpointAsync(containerId, "first-board"));
+
+  for (let iteration = 0; iteration < pageIterations; iteration += 1) {
+    const iterationContext = await createBenchmarkContextAsync({ storageState: authenticatedStorageState });
+    await installMeasurementScriptsAsync(iterationContext);
+    const iterationPage = await iterationContext.newPage();
+    const iterationWidgetDataTracker = trackWidgetDataRequests(iterationPage);
+    const iterationErrors: string[] = [];
+    iterationPage.on("pageerror", (error) => iterationErrors.push(error.message));
+    const iterationStartedAt = performance.now();
+    const response = await iterationPage.goto(baseUrl, { waitUntil: "domcontentloaded" });
+    if (!response?.ok()) {
+      throw new Error(`Board iteration ${iteration + 1} returned HTTP ${String(response?.status() ?? "none")}`);
+    }
+    await iterationPage.locator("[data-homarr-dev-benchmark-board]").waitFor({ state: "visible", timeout: 30_000 });
+    const iterationBoardMountedMs = Math.round(performance.now() - iterationStartedAt);
+    const iterationBoardState = await waitForBoardWidgetsAsync(iterationPage);
+    if (
+      requireImplementationMarkers &&
+      iterationBoardState.implementationMarkerCount !== iterationBoardState.widgetCount
+    ) {
+      throw new Error(`Board iteration ${iteration + 1} has incomplete widget implementation markers`);
+    }
+    if (iterationBoardState.widgetErrorCount > 0) {
+      throw new Error(
+        `Board iteration ${iteration + 1} rendered ${iterationBoardState.widgetErrorCount} widget errors`,
+      );
+    }
+    const iterationWidgetImplementationsMountedMs = requireImplementationMarkers
+      ? Math.round(performance.now() - iterationStartedAt)
+      : null;
+    const iterationWidgetData = await waitForWidgetDataSettledAsync(iterationPage, iterationWidgetDataTracker);
+    const iterationWidgetDataSettledMs = Math.round(performance.now() - iterationStartedAt);
+    assertBoardWidgetState(
+      await readBoardWidgetStateAsync(iterationPage),
+      `Board iteration ${iteration + 1} after widget data settled`,
+    );
+    await waitForFinalLcpAsync(iterationPage);
+    const iterationMetrics = await readBrowserMetricsAsync(iterationPage);
+    if (iterationMetrics.fcpMs === null) throw new Error(`Board iteration ${iteration + 1} has no FCP sample`);
+    if (iterationMetrics.lcpFinalizedByInputMs === null) {
+      throw new Error(`Board iteration ${iteration + 1} did not finalize LCP with trusted input`);
+    }
+    if (iterationMetrics.lcpMs === null) throw new Error(`Board iteration ${iteration + 1} has no LCP sample`);
+    if (iterationMetrics.ttfbMs === null) throw new Error(`Board iteration ${iteration + 1} has no TTFB sample`);
+    pageLoadSamples.push({
+      boardMountedMs: iterationBoardMountedMs,
+      fcpMs: iterationMetrics.fcpMs,
+      lcpFinalizedByInputMs: iterationMetrics.lcpFinalizedByInputMs,
+      lcpMs: iterationMetrics.lcpMs,
+      ttfbMs: iterationMetrics.ttfbMs,
+      widgetImplementationsMountedMs: iterationWidgetImplementationsMountedMs,
+      widgetDataObservedOperationCount: iterationWidgetData.observedOperationCount,
+      widgetDataSettledMs: iterationWidgetDataSettledMs,
+    });
+    if (iterationErrors.length > 0) {
+      throw new Error(`Board iteration ${iteration + 1} page errors: ${iterationErrors.join("; ")}`);
+    }
+    await iterationContext.close();
+  }
+
+  const coldContext = await createBenchmarkContextAsync({ storageState: authenticatedStorageState });
+  await coldContext.addInitScript(() => {
+    // Keep the cold-interaction probe cold instead of racing the application's
+    // intentional requestIdleCallback prefetch.
+    Object.defineProperty(window, "requestIdleCallback", { value: () => 0, configurable: true });
+    Object.defineProperty(window, "cancelIdleCallback", { value: () => undefined, configurable: true });
+  });
+  const coldPage = await coldContext.newPage();
+  const coldPageErrors: string[] = [];
+  coldPage.on("pageerror", (error) => coldPageErrors.push(error.message));
+  const coldResponse = await coldPage.goto(`${baseUrl}/`, { waitUntil: "domcontentloaded" });
+  if (!coldResponse?.ok()) {
+    throw new Error(`Cold-interaction board returned HTTP ${String(coldResponse?.status() ?? "none")}`);
+  }
+  await coldPage.locator("[data-homarr-dev-benchmark-board]").waitFor({ state: "visible", timeout: 30_000 });
+  await coldPage.evaluate(() => {
+    const state = {
+      clickedAtMs: null as number | null,
+      feedbackAtMs: null as number | null,
+      observer: null as MutationObserver | null,
+    };
+    const recordFeedback = () => {
+      const element = document.querySelector("[data-homarr-dev-benchmark-spotlight-feedback]");
+      if (
+        state.clickedAtMs !== null &&
+        state.feedbackAtMs === null &&
+        element instanceof HTMLElement &&
+        element.getClientRects().length > 0 &&
+        window.getComputedStyle(element).visibility !== "hidden"
+      ) {
+        state.feedbackAtMs = performance.now();
+      }
+    };
+    document.addEventListener(
+      "click",
+      (event) => {
+        if (
+          !(event.target instanceof Element) ||
+          !event.target.closest('[data-homarr-dev-benchmark-interaction="search"]')
+        )
+          return;
+        state.clickedAtMs = performance.now();
+        state.observer = new MutationObserver(recordFeedback);
+        state.observer.observe(document.documentElement, {
+          attributes: true,
+          childList: true,
+          subtree: true,
+        });
+        recordFeedback();
+      },
+      { capture: true, once: true },
+    );
+    Object.defineProperty(window, "homarrColdSpotlightProbe", { configurable: true, value: state });
+  });
+  const coldInteractionStartedAt = performance.now();
+  await coldPage.locator('[data-homarr-dev-benchmark-interaction="search"]:visible').click();
+  await coldPage.locator("[data-homarr-dev-benchmark-spotlight]").waitFor({ state: "visible" });
+  const coldSpotlightReadyMs = Math.round(performance.now() - coldInteractionStartedAt);
+  const coldSpotlightFeedbackMs = await coldPage.evaluate(() => {
+    const state = (
+      window as Window & {
+        homarrColdSpotlightProbe?: {
+          clickedAtMs: number | null;
+          feedbackAtMs: number | null;
+          observer: MutationObserver | null;
+        };
+      }
+    ).homarrColdSpotlightProbe;
+    state?.observer?.disconnect();
+    return state?.clickedAtMs !== null && state?.clickedAtMs !== undefined && state.feedbackAtMs !== null
+      ? Math.round(state.feedbackAtMs - state.clickedAtMs)
+      : null;
+  });
+  if (coldPageErrors.length > 0) throw new Error(`Cold-interaction page errors: ${coldPageErrors.join("; ")}`);
+  await coldPage.close();
+  await coldContext.close();
+
+  const routeContext = await createBenchmarkContextAsync({ storageState: authenticatedStorageState });
+  await installMeasurementScriptsAsync(routeContext);
+  const routePage = await routeContext.newPage();
+  const routePageErrors: string[] = [];
+  routePage.on("pageerror", (error) => routePageErrors.push(error.message));
+  const routeTimings = [] as Array<{ path: string; durationMs: number; status: number | null }>;
+  for (const routePath of routePaths) {
+    const startedAt = performance.now();
+    const response = await routePage.goto(`${baseUrl}${routePath}`, { waitUntil: "domcontentloaded" });
+    await routePage.locator("main:visible").waitFor({ state: "visible", timeout: 30_000 });
+    if (!response?.ok()) throw new Error(`Route ${routePath} returned HTTP ${String(response?.status() ?? "none")}`);
+    routeTimings.push({
+      path: routePath,
+      durationMs: Math.round(performance.now() - startedAt),
+      status: response.status(),
+    });
+  }
+
+  await routePage.goto(`${baseUrl}/`, { waitUntil: "domcontentloaded" });
+  const finalBoardState = await waitForBoardWidgetsAsync(routePage);
+  if (requireImplementationMarkers && finalBoardState.implementationMarkerCount !== finalBoardState.widgetCount) {
+    throw new Error("Final board load has incomplete widget implementation markers");
+  }
+  if (finalBoardState.widgetErrorCount > 0) {
+    throw new Error(`Final board load rendered ${finalBoardState.widgetErrorCount} widget errors`);
+  }
+  await waitForSpotlightIdlePreparationAsync(routePage);
+  if (routePageErrors.length > 0) throw new Error(`Route browser page errors: ${routePageErrors.join("; ")}`);
+  checkpoints.push(await captureCheckpointAsync(containerId, "workload"));
+
+  const settleDeadline = Date.now() + settleMs;
+  let sample = 0;
+  while (Date.now() < settleDeadline) {
+    await new Promise((resolve) => setTimeout(resolve, Math.min(sampleIntervalMs, settleDeadline - Date.now())));
+    sample += 1;
+    checkpoints.push(await captureCheckpointAsync(containerId, `settle-${sample}`));
+  }
+
+  if (pageErrors.length > 0) throw new Error(`Browser page errors: ${pageErrors.join("; ")}`);
+  if (widgetRequestCount === 0) throw new Error("Representative board made no widget requests");
+  if (webSocketCount === 0) throw new Error("WebSocket readiness was not observed by the browser");
+
+  const containerLogs = await execFileAsync("docker", ["logs", containerId]);
+  const startupErrors = `${containerLogs.stdout}\n${containerLogs.stderr}`
+    .split("\n")
+    .filter((line) => /Failed to (?:load|start) embedded/.test(line));
+  if (startupErrors.length > 0) throw new Error(`Embedded service startup failed: ${startupErrors.join("; ")}`);
+
+  const browserNetworkRequests = [...browserNetworkObservations.values()]
+    .map((observation) => ({
+      failedCount: observation.failedCount,
+      failureTexts: [...observation.failureTexts].toSorted(),
+      methods: [...observation.methods].toSorted(),
+      origin: observation.origin,
+      pathname: observation.pathname,
+      protocol: observation.protocol,
+      requestCount: observation.requestCount,
+      resourceTypes: [...observation.resourceTypes].toSorted(),
+      responseStatuses: [...observation.responseStatuses].toSorted((left, right) => left - right),
+      urlHash: observation.urlHash,
+    }))
+    .toSorted((left, right) => left.urlHash.localeCompare(right.urlHash));
+  const browserWebSockets = [...browserWebSocketObservations.values()].toSorted((left, right) =>
+    left.urlHash.localeCompare(right.urlHash),
+  );
+  const externalBrowserWebSockets = browserWebSockets.filter(({ origin }) => origin !== allowedBrowserWebSocketOrigin);
+  if (externalBrowserWebSockets.length > 0) {
+    throw new Error(
+      `Application pages attempted external WebSockets: ${externalBrowserWebSockets
+        .map(({ origin, pathname, urlHash }) => `${origin}${pathname}#${urlHash.slice(0, 12)}`)
+        .join("; ")}`,
+    );
+  }
+  const externalBrowserRequests = browserNetworkRequests.filter(
+    ({ origin, protocol }) => (protocol === "http:" || protocol === "https:") && origin !== allowedBrowserOrigin,
+  );
+  const unexpectedExternalResponses = externalBrowserRequests.flatMap(
+    ({ origin, pathname, responseStatuses, urlHash }) =>
+      responseStatuses.filter((status) => status !== 502).map((status) => ({ origin, pathname, status, urlHash })),
+  );
+  if (unexpectedExternalResponses.length > 0) {
+    throw new Error(
+      `External browser responses bypassed the deny proxy: ${unexpectedExternalResponses
+        .map(({ origin, pathname, status, urlHash }) => `${status} ${origin}${pathname}#${urlHash.slice(0, 12)}`)
+        .join("; ")}`,
+    );
+  }
+  const proxyAttempts = denyProxy
+    .getAttempts()
+    .filter(({ method, target }) => !(method === "GET" && target === isolationCanaryUrl));
+  const safeProxyAttempts = proxyAttempts.map(({ count, method, target }) => {
+    const targetHash = createHash("sha256").update(target).digest("hex");
+    try {
+      const safeUrl = safeUrlDetails(method === "CONNECT" ? `https://${target}` : target);
+      return { count, method, ...safeUrl, targetHash };
+    } catch {
+      return { count, method, origin: null, pathname: null, protocol: null, targetHash, urlHash: null };
+    }
+  });
+  const observedOrigins = [...new Set(browserNetworkRequests.map(({ origin }) => origin))].toSorted();
+
+  const settleSampleCount = checkpoints.filter(({ name }) => name.startsWith("settle-")).length;
+  const pageLoadSummary = {
+    boardMountedMs: summarize(pageLoadSamples.map((measurement) => measurement.boardMountedMs)),
+    fcpMs: summarize(pageLoadSamples.map((measurement) => measurement.fcpMs)),
+    lcpFinalizedByInputMs: summarize(pageLoadSamples.map((measurement) => measurement.lcpFinalizedByInputMs)),
+    lcpMs: summarize(pageLoadSamples.map((measurement) => measurement.lcpMs)),
+    ttfbMs: summarize(pageLoadSamples.map((measurement) => measurement.ttfbMs)),
+    widgetImplementationsMountedMs: summarize(
+      pageLoadSamples.flatMap((measurement) =>
+        measurement.widgetImplementationsMountedMs === null ? [] : [measurement.widgetImplementationsMountedMs],
+      ),
+    ),
+    widgetDataSettledMs: summarize(pageLoadSamples.map((measurement) => measurement.widgetDataSettledMs)),
+  };
+  const eligibilityInput = {
+    expectedSha,
+    expectedSourceFingerprint,
+    browserNetworkIsolated,
+    serverNetworkIsolated,
+    imageArchitecture: imageInspect.Architecture,
+    lcpObservationMs,
+    lcpSampleCount: pageLoadSummary.lcpMs.count,
+    nodeArchitecture: process.arch,
+    revision,
+    sourceFingerprint,
+    pageSampleCount: pageLoadSamples.length,
+    requireImplementationMarkers,
+    settleMs,
+    settleSampleCount,
+    widgetDataQuietMs,
+    widgetDataSampleCount: pageLoadSummary.widgetDataSettledMs.count,
+  };
+  const metricEligibility = getRuntimeMetricEligibility(eligibilityInput);
+  const claimIneligibleReasons = getRuntimeClaimIneligibleReasons(eligibilityInput);
+  const claimEligible = claimIneligibleReasons.length === 0;
+  const result = {
+    schemaVersion: 7,
+    claimEligible,
+    claimIneligibleReasons,
+    claimScope: ["pageLoads", "largestContentfulPaint", "widgetDataSettled", "settleStability"],
+    metricEligibility,
+    createdAt: new Date().toISOString(),
+    image: {
+      requested: image,
+      id: imageInspect.Id,
+      digest: imageInspect.RepoDigests?.[0] ?? null,
+      revision,
+      sourceFingerprint,
+      architecture: imageInspect.Architecture,
+      localUncompressedBytes: imageInspect.Size,
+    },
+    host: {
+      architecture: process.arch,
+      cpus: os.cpus().map(({ model }) => model),
+      node: { executable: process.execPath, version: process.version, v8Version: process.versions.v8 },
+      platform: os.platform(),
+      release: os.release(),
+      totalMemoryBytes: os.totalmem(),
+    },
+    provenance: {
+      browser: browserProvenance,
+      container: {
+        cpuLimit: 2,
+        memoryLimitBytes: 1024 ** 3,
+        network: { id: isolationNetworkId, internal: true, name: isolationNetworkName },
+        node: containerNode,
+      },
+      ingressProxy: {
+        containerId: proxyContainerId,
+        excludedFromMemorySamples: true,
+        implementation: "Node.js TCP proxy",
+      },
+      docker: {
+        engine: {
+          architecture: dockerInfo.Architecture ?? null,
+          cgroupDriver: dockerInfo.CgroupDriver ?? null,
+          cgroupVersion: dockerInfo.CgroupVersion ?? null,
+          cpuCount: dockerInfo.NCPU ?? null,
+          kernelVersion: dockerInfo.KernelVersion ?? null,
+          memoryBytes: dockerInfo.MemTotal ?? null,
+          operatingSystem: dockerInfo.OperatingSystem ?? null,
+          osType: dockerInfo.OSType ?? null,
+          serverVersion: dockerInfo.ServerVersion ?? null,
+          storageDriver: dockerInfo.Driver ?? null,
+        },
+        version: dockerVersion,
+      },
+    },
+    browserNetworkIsolation: {
+      active: browserNetworkIsolated,
+      allowedOrigins: [allowedBrowserOrigin, allowedBrowserWebSocketOrigin],
+      blockedProxyAttemptCount: proxyAttempts.reduce((total, { count }) => total + count, 0),
+      externalBrowserRequests,
+      externalBrowserWebSockets,
+      hostResolverPolicy: "deny all DNS except localhost and 127.0.0.1",
+      httpCachePolicy: browserProvenance.httpCachePolicy,
+      observedOrigins,
+      proxy: { host: denyProxy.host, port: denyProxy.port, policy: "deny", attempts: safeProxyAttempts },
+      canaries: { http: browserNetworkIsolationCanary, webSockets: browserWebSocketIsolationCanaries },
+      observedWebSockets: browserWebSockets,
+      unexpectedExternalResponses,
+    },
+    serverNetworkIsolation: {
+      active: serverNetworkIsolated,
+      canary: serverNetworkIsolationCanary,
+      network: { id: isolationNetworkId, internal: true, name: isolationNetworkName },
+      policy: "application container attached only to an internal Docker network",
+    },
+    workload: {
+      baseUrl,
+      startToReadyMs,
+      settleMs,
+      sampleIntervalMs,
+      settleSampleCount,
+      lcpObservationMs,
+      lcpStabilityMs,
+      widgetDataQuietMs,
+      spotlightIdleMs,
+      spotlightIdlePolicy,
+      interactionIterations,
+      widgetCount,
+      implementationMarkerPolicy: readyMarkerPolicy,
+      widgetImplementationMarkerCount: implementationMarkerCount,
+      widgetErrorCount,
+      loginJourneyBoardMountedMs,
+      loginJourneyWidgetImplementationsMountedMs,
+      loginJourneyWidgetData,
+      loginJourneyWidgetDataSettledMs,
+      pageLoadSamples,
+      pageLoadSummary,
+      coldSpotlightFeedbackMs,
+      coldSpotlightReadyMs,
+      idleSpotlightNetworkCounts,
+      postIdleWarmInteractionMs,
+      postIdleWarmInteractionSummary,
+      warmInteractionSamplesMs,
+      routeTimings,
+      trpcRequestCount,
+      widgetRequestCount,
+      webSocketCount,
+      websocketReadyMs,
+      legacyQueryCacheWriteCount,
+      legacyQueryCacheWriteBytes,
+      initialNetworkCounts,
+      loginJourneyNetworkCounts,
+      initialBrowserMetrics,
+      initialWidgetData,
+      initialWidgetDataSettledMs,
+    },
+    checkpoints,
+    summary: summarizeRuntimeMemory(checkpoints),
+  };
+  const outputPath = path.join(outputDirectory, `runtime-${Date.now()}.json`);
+  await writeFile(outputPath, `${JSON.stringify(result, null, 2)}\n`);
+  console.log(
+    JSON.stringify({ outputPath, claimEligible, summary: result.summary, workload: result.workload }, null, 2),
+  );
+
+  await page.close();
+  await context.close();
+  await routeContext.close();
+} catch (error) {
+  if (containerId) {
+    const logs = await execFileAsync("docker", ["logs", "--tail", "100", containerId]).catch(() => null);
+    if (logs?.stdout) console.error(logs.stdout);
+    if (logs?.stderr) console.error(logs.stderr);
+  }
+  throw error;
+} finally {
+  process.off("SIGINT", handleSigint);
+  process.off("SIGTERM", handleSigterm);
+  await cleanupAsync();
+}
diff --git a/scripts/benchmarks/request-handler-memory.mts b/scripts/benchmarks/request-handler-memory.mts
new file mode 100644
index 000000000..c867efaa1
--- /dev/null
+++ b/scripts/benchmarks/request-handler-memory.mts
@@ -0,0 +1,107 @@
+import { createIntegrationRequestHandler } from "../../packages/request-handler/src/lib/integration-request-handler.ts";
+import { createRequestHandler } from "../../packages/request-handler/src/lib/request-handler.ts";
+
+const allocations = Number(process.env.REQUEST_MEMORY_ALLOCATIONS ?? 64);
+const allocationBytes = Number(process.env.REQUEST_MEMORY_ALLOCATION_BYTES ?? 1024 * 1024);
+const maxRetainedBytes = Number(process.env.REQUEST_MEMORY_MAX_RETAINED_BYTES ?? 16 * 1024 * 1024);
+const positiveTtlMs = Number(process.env.REQUEST_MEMORY_POSITIVE_TTL_MS ?? 25);
+
+if (!globalThis.gc) throw new Error("Run this benchmark with node --expose-gc");
+if (!Number.isInteger(allocations) || allocations < 2) throw new Error("REQUEST_MEMORY_ALLOCATIONS must be >= 2");
+if (!Number.isInteger(allocationBytes) || allocationBytes < 1) {
+  throw new Error("REQUEST_MEMORY_ALLOCATION_BYTES must be positive");
+}
+
+const collectGarbage = async () => {
+  for (let index = 0; index < 4; index++) {
+    globalThis.gc?.();
+    await new Promise((resolve) => setImmediate(resolve));
+  }
+};
+
+const retainedRoots: unknown[] = [];
+const measureArrayBufferGrowthAsync = async (workload: () => Promise<unknown>) => {
+  await collectGarbage();
+  const before = process.memoryUsage().arrayBuffers;
+  const retainedRoot = await workload();
+  retainedRoots.push(retainedRoot);
+  await collectGarbage();
+  const growth = process.memoryUsage().arrayBuffers - before;
+  retainedRoots.pop();
+  return growth;
+};
+
+const zeroTtlGrowthBytes = await measureArrayBufferGrowthAsync(async () => {
+  const handler = createRequestHandler<Uint8Array, { id: number }>({
+    cacheTtlMs: 0,
+    requestAsync: async () => new Uint8Array(allocationBytes),
+  });
+  for (let id = 0; id < allocations; id++) {
+    await handler.handler({ id }).getDataAsync();
+  }
+  return handler;
+});
+
+const integrationGrowthBytes = await measureArrayBufferGrowthAsync(async () => {
+  const handler = createIntegrationRequestHandler<number, "mock", Record<string, never>>({
+    cacheTtlMs: 0,
+    requestAsync: async (integration) =>
+      (integration as typeof integration & { benchmarkPayload: Uint8Array }).benchmarkPayload.byteLength,
+  });
+  for (let id = 0; id < allocations; id++) {
+    await handler
+      .handler(
+        {
+          id: `benchmark-${id}`,
+          kind: "mock",
+          name: "benchmark",
+          url: "http://benchmark.invalid",
+          externalUrl: null,
+          decryptedSecrets: [],
+          benchmarkPayload: new Uint8Array(allocationBytes),
+        } as never,
+        {},
+      )
+      .getDataAsync();
+  }
+  return handler;
+});
+
+const expiredPositiveTtlGrowthBytes = await measureArrayBufferGrowthAsync(async () => {
+  const handler = createRequestHandler<Uint8Array, { id: number }>({
+    cacheTtlMs: positiveTtlMs,
+    requestAsync: async () => new Uint8Array(allocationBytes),
+  });
+  for (let id = 0; id < allocations; id++) {
+    await handler.handler({ id }).getDataAsync();
+  }
+  await new Promise((resolve) => setTimeout(resolve, positiveTtlMs + 25));
+  return handler;
+});
+
+const positiveControlGrowthBytes = await measureArrayBufferGrowthAsync(async () =>
+  Array.from({ length: allocations }, () => new Uint8Array(allocationBytes)),
+);
+const positiveControlMinimumBytes = allocations * allocationBytes * 0.8;
+
+const result = {
+  allocations,
+  allocationBytes,
+  allocatedPerScenarioBytes: allocations * allocationBytes,
+  maxRetainedBytes,
+  positiveTtlMs,
+  zeroTtlGrowthBytes,
+  integrationGrowthBytes,
+  expiredPositiveTtlGrowthBytes,
+  positiveControlGrowthBytes,
+  positiveControlMinimumBytes,
+  zeroTtlPass: zeroTtlGrowthBytes <= maxRetainedBytes,
+  integrationPass: integrationGrowthBytes <= maxRetainedBytes,
+  expiredPositiveTtlPass: expiredPositiveTtlGrowthBytes <= maxRetainedBytes,
+  positiveControlPass: positiveControlGrowthBytes >= positiveControlMinimumBytes,
+};
+
+console.log(JSON.stringify(result, null, 2));
+if (!result.zeroTtlPass || !result.integrationPass || !result.expiredPositiveTtlPass || !result.positiveControlPass) {
+  process.exitCode = 1;
+}
diff --git a/scripts/check-custom-widget-bundle.mjs b/scripts/check-custom-widget-bundle.mjs
new file mode 100644
index 000000000..4b6d6b352
--- /dev/null
+++ b/scripts/check-custom-widget-bundle.mjs
@@ -0,0 +1,96 @@
+import { gzipSync } from "node:zlib";
+import { readdir, readFile, stat } from "node:fs/promises";
+import { basename, join, relative, resolve } from "node:path";
+
+const repositoryRoot = resolve(import.meta.dirname, "..");
+const nextRoot = join(repositoryRoot, "apps/nextjs/.next");
+const budgetBytes = Number(process.env.CUSTOM_WIDGET_CHUNK_BUDGET_BYTES ?? 768 * 1024);
+if (!Number.isSafeInteger(budgetBytes) || budgetBytes <= 0) {
+  throw new Error("CUSTOM_WIDGET_CHUNK_BUDGET_BYTES must be a positive integer.");
+}
+
+async function collect(directory, predicate) {
+  const result = [];
+  for (const entry of await readdir(directory, { withFileTypes: true })) {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) result.push(...(await collect(path, predicate)));
+    else if (predicate(entry.name, path)) result.push(path);
+  }
+  return result;
+}
+
+async function resolveChunk(chunk) {
+  const normalized = chunk.replace(/^\/_next\//u, "");
+  const candidates = [join(nextRoot, normalized), join(nextRoot, "static/chunks", basename(normalized))];
+  for (const candidate of candidates) {
+    try {
+      if ((await stat(candidate)).isFile()) return candidate;
+    } catch {
+      // Try the next manifest-path representation.
+    }
+  }
+  return null;
+}
+
+let serverChunks;
+let manifestPaths;
+try {
+  [serverChunks, manifestPaths] = await Promise.all([
+    collect(join(nextRoot, "server/chunks/ssr"), (name) =>
+      /^packages_widgets_src_custom-api_component.*\.js$/u.test(name),
+    ),
+    collect(join(nextRoot, "standalone"), (name) => name === "react-loadable-manifest.json"),
+  ]);
+} catch {
+  throw new Error("Next.js build output is missing. Run the Next.js production build before the bundle check.");
+}
+
+const moduleIds = new Set();
+for (const serverChunk of serverChunks) {
+  const source = await readFile(serverChunk, "utf8");
+  for (const match of source.matchAll(/loadableGenerated:\{modules:\[(\d+)\]\}/gu)) moduleIds.add(match[1]);
+}
+if (moduleIds.size === 0) {
+  throw new Error("The Custom JSX dynamic module was not found in the Next.js server build.");
+}
+
+const routePayloads = [];
+for (const manifestPath of manifestPaths) {
+  const normalizedManifestPath = manifestPath.replaceAll("\\", "/");
+  const isRuntimeOrWorkbenchRoute =
+    normalizedManifestPath.includes("/(board)/") ||
+    normalizedManifestPath.includes("/boards/(content)/(home)/") ||
+    normalizedManifestPath.includes("/manage/custom-widgets/");
+  if (!isRuntimeOrWorkbenchRoute) continue;
+  const manifest = JSON.parse(await readFile(manifestPath, "utf8"));
+  const files = new Set();
+  for (const moduleId of moduleIds) {
+    for (const file of manifest[moduleId]?.files ?? []) if (file.endsWith(".js")) files.add(file);
+  }
+  if (files.size === 0) continue;
+
+  let rawBytes = 0;
+  let compressedBytes = 0;
+  for (const file of files) {
+    const chunkPath = await resolveChunk(file);
+    if (!chunkPath) throw new Error(`Custom JSX chunk ${file} referenced by a route manifest is missing.`);
+    const source = await readFile(chunkPath);
+    rawBytes += source.byteLength;
+    compressedBytes += gzipSync(source).byteLength;
+  }
+  routePayloads.push({ manifestPath, files: files.size, rawBytes, compressedBytes });
+}
+if (routePayloads.length === 0) {
+  throw new Error("No route manifest references the Custom JSX dynamic module.");
+}
+
+routePayloads.sort((left, right) => right.compressedBytes - left.compressedBytes);
+const largest = routePayloads[0];
+if (largest.compressedBytes > budgetBytes) {
+  throw new Error(
+    `The largest Custom JSX route payload is ${largest.compressedBytes} gzip bytes (${largest.rawBytes} raw), exceeding the ${budgetBytes} byte budget in ${relative(nextRoot, largest.manifestPath)}.`,
+  );
+}
+console.log(
+  `Custom JSX bundle check passed: ${routePayloads.length} routes, largest payload ${largest.compressedBytes} gzip bytes (${largest.rawBytes} raw across ${largest.files} chunks).`,
+);
diff --git a/scripts/check-custom-widget-bundle.spec.ts b/scripts/check-custom-widget-bundle.spec.ts
new file mode 100644
index 000000000..fcb41db55
--- /dev/null
+++ b/scripts/check-custom-widget-bundle.spec.ts
@@ -0,0 +1,21 @@
+// @vitest-environment node
+
+import { spawnSync } from "node:child_process";
+import { describe, expect, test } from "vitest";
+
+describe("Custom Widget bundle budget", () => {
+  test.each(["not-a-number", "0", "-1", "1.5", String(Number.MAX_SAFE_INTEGER + 1)])(
+    "rejects an invalid byte budget (%s)",
+    (budget) => {
+      const result = spawnSync(process.execPath, ["scripts/check-custom-widget-bundle.mjs"], {
+        cwd: process.cwd(),
+        encoding: "utf8",
+        env: { ...process.env, CUSTOM_WIDGET_CHUNK_BUDGET_BYTES: budget },
+      });
+
+      expect(result.status).not.toBe(0);
+      expect(result.stderr).toContain("CUSTOM_WIDGET_CHUNK_BUDGET_BYTES must be a positive integer");
+      expect(result.stderr).not.toContain("Next.js build output is missing");
+    },
+  );
+});
diff --git a/scripts/check-openapi-schema.mts b/scripts/check-openapi-schema.mts
new file mode 100644
index 000000000..dce453dc2
--- /dev/null
+++ b/scripts/check-openapi-schema.mts
@@ -0,0 +1,17 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+
+import { openApiDocument } from "../packages/api/src/open-api";
+
+const baseUrl = "http://localhost:3000";
+const generated = JSON.parse(JSON.stringify(openApiDocument(baseUrl))) as unknown;
+const checkedIn = JSON.parse(await readFile("apps/docs/static/api/open-api-schema.json", "utf8")) as unknown;
+
+try {
+  assert.deepStrictEqual(checkedIn, generated);
+} catch {
+  console.error(
+    "The checked-in OpenAPI schema is stale. Regenerate it from openApiDocument and update apps/docs/static/api/open-api-schema.json.",
+  );
+  process.exitCode = 1;
+}
diff --git a/scripts/run.sh b/scripts/run.sh
index 83eff588e..6357c723c 100644
--- a/scripts/run.sh
+++ b/scripts/run.sh
@@ -24,8 +24,17 @@ export AUTH_SECRET=$(openssl rand -base64 32)
 # 1. Replace the HOSTNAME in the nginx template file
 # 2. Create the nginx configuration file from the template
 # 3. Start the nginx server
+# Only listen on IPv6 when the host actually has IPv6 configured (#4596).
+# Otherwise nginx aborts with "socket() [::]:7575 failed (97: Address family
+# not supported by protocol)". Check HOMARR_DISABLE_IPV6 first so users can
+# force IPv4-only even when the host supports IPv6, then probe for IPv6
+# addresses via grep (not -s: proc files always report size 0).
 export HOSTNAME
-envsubst '${HOSTNAME}' < /etc/nginx/templates/nginx.conf > /etc/nginx/nginx.conf
+export NGINX_LISTEN_IPV6=''
+if [ "${HOMARR_DISABLE_IPV6:-false}" != "true" ] && grep -q . /proc/net/if_inet6 2>/dev/null; then
+    NGINX_LISTEN_IPV6='listen [::]:7575;'
+fi
+envsubst '${HOSTNAME} ${NGINX_LISTEN_IPV6}' < /etc/nginx/templates/nginx.conf > /etc/nginx/nginx.conf
 # Start services in the background and store their PIDs
 nginx -g 'daemon off;' &
 NGINX_PID=$!
diff --git a/static-data/opencollective-contributors.json b/static-data/opencollective-contributors.json
index 54aeb15bc..937164812 100644
--- a/static-data/opencollective-contributors.json
+++ b/static-data/opencollective-contributors.json
@@ -1 +1 @@
-[{"id":"zaxon793-jy8gpl0v-d89pbrkd-emwl5v04","name":"Mike","slug":"guest-5da646e8","imageUrl":"https://images.opencollective.com/guest-5da646e8/avatar.png"},{"id":"ywz9j4av-god8pgwg-db36mr35-nxklb0e7","name":"Guest","slug":"guest-554ec68f","imageUrl":"https://images.opencollective.com/guest-554ec68f/avatar.png"},{"id":"mlo94zn7-x08dpo09-xlxpewga-3vjbrky5","name":"Robert Hermann","slug":"robert-hermann","imageUrl":"https://images.opencollective.com/robert-hermann/avatar.png"},{"id":"zaxon793-jy8gpl0n-8r3pbrkd-emwl5v04","name":"Sebastian Raubuch","slug":"sebastian-raubuch","imageUrl":"https://images.opencollective.com/sebastian-raubuch/avatar.png"},{"id":"nmlo94zn-7x08dpod-ykm6ewga-3vjbrky5","name":"Didier LUTHI","slug":"didier-luthi","imageUrl":"https://images.opencollective.com/didier-luthi/avatar.png"},{"id":"vedj9wro-z3a56dgk-z3z67blg-8x4m0ykn","name":"Guest","slug":"guest-b1459a68","imageUrl":"https://images.opencollective.com/guest-b1459a68/avatar.png"},{"id":"gm9bnk80-437xqry4-8vepvzeo-ljdayw5r","name":"Mohister","slug":"mohister","imageUrl":"https://images.opencollective.com/mohister/1d8a592/avatar.png"},{"id":"vrgbk357-l4x96e70-m0apomew-a0jdyzn8","name":"sidens","slug":"sidens","imageUrl":"https://images.opencollective.com/sidens/avatar.png"},{"id":"mlo94zn7-x08dpo0d-l7epewga-3vjbrky5","name":"Chris","slug":"guest-937065bb","imageUrl":"https://images.opencollective.com/guest-937065bb/avatar.png"},{"id":"k9mbw7y4-8r3zq3ol-7zlq0ej5-lavnodgx","name":"Nick W","slug":"guest-7501840a","imageUrl":"https://images.opencollective.com/guest-7501840a/avatar.png"},{"id":"e0adkjrv-8xwm69o8-5al67z5n-4l93bgoy","name":"Jeppedy","slug":"guest-ab78e46a","imageUrl":"https://images.opencollective.com/guest-ab78e46a/avatar.png"},{"id":"a47byg9n-xozdp8xo-jgm6mjlv-03rek5w8","name":"naru","slug":"guest-02fd264a","imageUrl":"https://images.opencollective.com/guest-02fd264a/avatar.png"},{"id":"3k0exgzn-m8yj64g3-ll865wao-9r7b4dlv","name":"Jared Hocutt","slug":"jared-hocutt","imageUrl":"https://images.opencollective.com/jared-hocutt/avatar.png"},{"id":"eng0kzdy-vor4pz8l-exopbma8-37xlw95j","name":"Incognito","slug":"user-e63f4a5b","imageUrl":"https://images.opencollective.com/user-e63f4a5b/avatar.png"},{"id":"8k03reyd-5agmq50v-8vyplbwo-z7j4nxv9","name":"dazi","slug":"guest-11663a46","imageUrl":"https://images.opencollective.com/guest-11663a46/avatar.png"},{"id":"vedj9wro-z3a56dgd-zwl67blg-8x4m0ykn","name":"ZoopaMario","slug":"zoopamario","imageUrl":"https://images.opencollective.com/zoopamario/bea900d/avatar.png"},{"id":"a47byg9n-xozdp8xe-xmb6mjlv-03rek5w8","name":"FlamebergUA","slug":"guest-a59fd500","imageUrl":"https://images.opencollective.com/guest-a59fd500/avatar.png"},{"id":"8k03reyd-5agmq50y-kzoplbwo-z7j4nxv9","name":"StLCards","slug":"guest-e1de33dc","imageUrl":"https://images.opencollective.com/guest-e1de33dc/avatar.png"},{"id":"ejoxl3az-45w9pa54-dk46y870-mgkbrvdn","name":"Varadha","slug":"guest-6f68eed9","imageUrl":"https://images.opencollective.com/guest-6f68eed9/avatar.png"},{"id":"jrkx5lmn-v904qjl0-3oz68bwa-7zdygoe3","name":"Guest","slug":"guest-6da419b5","imageUrl":"https://images.opencollective.com/guest-6da419b5/avatar.png"},{"id":"mywxoz34-09rl6k3z-lmlqvenb-dj7gk85a","name":"Guest","slug":"guest-122d7e0a","imageUrl":"https://images.opencollective.com/guest-122d7e0a/avatar.png"},{"id":"3z8arxve-ymko60vm-3eaqgl5n-bj9w704d","name":"Ricardo","slug":"ricardo34","imageUrl":"https://images.opencollective.com/ricardo34/avatar.png"},{"id":"e0adkjrv-8xwm69or-reo67z5n-4l93bgoy","name":"GoM","slug":"guest-3944feab","imageUrl":"https://images.opencollective.com/guest-3944feab/avatar.png"},{"id":"gm9bnk80-437xqrnr-r5o6vzeo-ljdayw5r","name":"Brent Maxwell","slug":"brentmaxwell","imageUrl":"https://images.opencollective.com/brentmaxwell/avatar.png"},{"id":"gnxdwzj3-le5mpwzd-ll0py8rv-bko04a97","name":"Eric G","slug":"guest-478270f1","imageUrl":"https://images.opencollective.com/guest-478270f1/avatar.png"},{"id":"v349mrwg-z75lpyjo-ez8pa08d-jeybknox","name":"ninja","slug":"guest-0bb6ba36","imageUrl":"https://images.opencollective.com/guest-0bb6ba36/avatar.png"},{"id":"ywz9j4av-god8pgw0-53y6mr35-nxklb0e7","name":"s11","slug":"guest-6e9a2588","imageUrl":"https://images.opencollective.com/guest-6e9a2588/avatar.png"},{"id":"mlo94zn7-x08dpo30-v73pewga-3vjbrky5","name":"Incognito","slug":"user-cbad11af","imageUrl":"https://images.opencollective.com/user-cbad11af/avatar.png"},{"id":"v349mrwg-z75lpy7l-yzgpa08d-jeybknox","name":"Ronald Simmons","slug":"ronald-simmons","imageUrl":"https://images.opencollective.com/ronald-simmons/avatar.png"},{"id":"7ywz9j4a-vgod8pgl-me9qmr35-nxklb0e7","name":"Joel","slug":"guest-3376ab02","imageUrl":"https://images.opencollective.com/guest-3376ab02/avatar.png"},{"id":"v349mrwg-z75lpyjw-kxzpa08d-jeybknox","name":"Gokay Yamankurt","slug":"gokay-yamankurt","imageUrl":"https://images.opencollective.com/gokay-yamankurt/avatar.png"},{"id":"v349mrwg-z75lpyjv-59rpa08d-jeybknox","name":"Rhiz3K","slug":"rhiz3k","imageUrl":"https://images.opencollective.com/rhiz3k/7287acd/avatar.png"},{"id":"8k03reyd-5agmq5x7-77gplbwo-z7j4nxv9","name":"vukie","slug":"guest-40aabe13","imageUrl":"https://images.opencollective.com/guest-40aabe13/avatar.png"},{"id":"a47byg9n-xozdp84a-rmvqmjlv-03rek5w8","name":"Guest","slug":"guest-2fe979fa","imageUrl":"https://images.opencollective.com/guest-2fe979fa/avatar.png"},{"id":"rxg0j35l-zkwm6vgm-k3x6voe9-8n47daby","name":"AngryPig","slug":"guest-b9e8a062","imageUrl":"https://images.opencollective.com/guest-b9e8a062/avatar.png"},{"id":"acc_00XiGzC0V5uzYIL5imKK8","name":"Christopher Jones","slug":"christopher-jones-aae1b68a","imageUrl":"https://images.opencollective.com/christopher-jones-aae1b68a/avatar.png"},{"id":"acc_Usap6nzTGh8BCPg0V6lM7","name":"zzoomless7","slug":"guest-a4dec157","imageUrl":"https://images.opencollective.com/guest-a4dec157/avatar.png"}]
\ No newline at end of file
+[{"id":"zaxon793-jy8gpl0v-d89pbrkd-emwl5v04","name":"Mike","slug":"guest-5da646e8","imageUrl":"https://images.opencollective.com/guest-5da646e8/avatar.png"},{"id":"ywz9j4av-god8pgwg-db36mr35-nxklb0e7","name":"Guest","slug":"guest-554ec68f","imageUrl":"https://images.opencollective.com/guest-554ec68f/avatar.png"},{"id":"mlo94zn7-x08dpo09-xlxpewga-3vjbrky5","name":"Robert Hermann","slug":"robert-hermann","imageUrl":"https://images.opencollective.com/robert-hermann/avatar.png"},{"id":"zaxon793-jy8gpl0n-8r3pbrkd-emwl5v04","name":"Sebastian Raubuch","slug":"sebastian-raubuch","imageUrl":"https://images.opencollective.com/sebastian-raubuch/avatar.png"},{"id":"nmlo94zn-7x08dpod-ykm6ewga-3vjbrky5","name":"Didier LUTHI","slug":"didier-luthi","imageUrl":"https://images.opencollective.com/didier-luthi/avatar.png"},{"id":"vedj9wro-z3a56dgk-z3z67blg-8x4m0ykn","name":"Guest","slug":"guest-b1459a68","imageUrl":"https://images.opencollective.com/guest-b1459a68/avatar.png"},{"id":"gm9bnk80-437xqry4-8vepvzeo-ljdayw5r","name":"Mohister","slug":"mohister","imageUrl":"https://images.opencollective.com/mohister/1d8a592/avatar.png"},{"id":"vrgbk357-l4x96e70-m0apomew-a0jdyzn8","name":"sidens","slug":"sidens","imageUrl":"https://images.opencollective.com/sidens/avatar.png"},{"id":"mlo94zn7-x08dpo0d-l7epewga-3vjbrky5","name":"Chris","slug":"guest-937065bb","imageUrl":"https://images.opencollective.com/guest-937065bb/avatar.png"},{"id":"k9mbw7y4-8r3zq3ol-7zlq0ej5-lavnodgx","name":"Nick W","slug":"guest-7501840a","imageUrl":"https://images.opencollective.com/guest-7501840a/avatar.png"},{"id":"e0adkjrv-8xwm69o8-5al67z5n-4l93bgoy","name":"Jeppedy","slug":"guest-ab78e46a","imageUrl":"https://images.opencollective.com/guest-ab78e46a/avatar.png"},{"id":"a47byg9n-xozdp8xo-jgm6mjlv-03rek5w8","name":"naru","slug":"guest-02fd264a","imageUrl":"https://images.opencollective.com/guest-02fd264a/avatar.png"},{"id":"3k0exgzn-m8yj64g3-ll865wao-9r7b4dlv","name":"Jared Hocutt","slug":"jared-hocutt","imageUrl":"https://images.opencollective.com/jared-hocutt/avatar.png"},{"id":"eng0kzdy-vor4pz8l-exopbma8-37xlw95j","name":"Incognito","slug":"user-e63f4a5b","imageUrl":"https://images.opencollective.com/user-e63f4a5b/avatar.png"},{"id":"8k03reyd-5agmq50v-8vyplbwo-z7j4nxv9","name":"dazi","slug":"guest-11663a46","imageUrl":"https://images.opencollective.com/guest-11663a46/avatar.png"},{"id":"vedj9wro-z3a56dgd-zwl67blg-8x4m0ykn","name":"ZoopaMario","slug":"zoopamario","imageUrl":"https://images.opencollective.com/zoopamario/bea900d/avatar.png"},{"id":"a47byg9n-xozdp8xe-xmb6mjlv-03rek5w8","name":"FlamebergUA","slug":"guest-a59fd500","imageUrl":"https://images.opencollective.com/guest-a59fd500/avatar.png"},{"id":"8k03reyd-5agmq50y-kzoplbwo-z7j4nxv9","name":"StLCards","slug":"guest-e1de33dc","imageUrl":"https://images.opencollective.com/guest-e1de33dc/avatar.png"},{"id":"ejoxl3az-45w9pa54-dk46y870-mgkbrvdn","name":"Varadha","slug":"guest-6f68eed9","imageUrl":"https://images.opencollective.com/guest-6f68eed9/avatar.png"},{"id":"jrkx5lmn-v904qjl0-3oz68bwa-7zdygoe3","name":"Guest","slug":"guest-6da419b5","imageUrl":"https://images.opencollective.com/guest-6da419b5/avatar.png"},{"id":"mywxoz34-09rl6k3z-lmlqvenb-dj7gk85a","name":"Guest","slug":"guest-122d7e0a","imageUrl":"https://images.opencollective.com/guest-122d7e0a/avatar.png"},{"id":"3z8arxve-ymko60vm-3eaqgl5n-bj9w704d","name":"Ricardo","slug":"ricardo34","imageUrl":"https://images.opencollective.com/ricardo34/avatar.png"},{"id":"e0adkjrv-8xwm69or-reo67z5n-4l93bgoy","name":"GoM","slug":"guest-3944feab","imageUrl":"https://images.opencollective.com/guest-3944feab/avatar.png"},{"id":"gm9bnk80-437xqrnr-r5o6vzeo-ljdayw5r","name":"Brent Maxwell","slug":"brentmaxwell","imageUrl":"https://images.opencollective.com/brentmaxwell/avatar.png"},{"id":"gnxdwzj3-le5mpwzd-ll0py8rv-bko04a97","name":"Eric G","slug":"guest-478270f1","imageUrl":"https://images.opencollective.com/guest-478270f1/avatar.png"},{"id":"v349mrwg-z75lpyjo-ez8pa08d-jeybknox","name":"ninja","slug":"guest-0bb6ba36","imageUrl":"https://images.opencollective.com/guest-0bb6ba36/avatar.png"},{"id":"ywz9j4av-god8pgw0-53y6mr35-nxklb0e7","name":"s11","slug":"guest-6e9a2588","imageUrl":"https://images.opencollective.com/guest-6e9a2588/avatar.png"},{"id":"mlo94zn7-x08dpo30-v73pewga-3vjbrky5","name":"Incognito","slug":"user-cbad11af","imageUrl":"https://images.opencollective.com/user-cbad11af/avatar.png"},{"id":"v349mrwg-z75lpy7l-yzgpa08d-jeybknox","name":"Ronald Simmons","slug":"ronald-simmons","imageUrl":"https://images.opencollective.com/ronald-simmons/avatar.png"},{"id":"7ywz9j4a-vgod8pgl-me9qmr35-nxklb0e7","name":"Joel","slug":"guest-3376ab02","imageUrl":"https://images.opencollective.com/guest-3376ab02/avatar.png"},{"id":"v349mrwg-z75lpyjw-kxzpa08d-jeybknox","name":"Gokay Yamankurt","slug":"gokay-yamankurt","imageUrl":"https://images.opencollective.com/gokay-yamankurt/avatar.png"},{"id":"v349mrwg-z75lpyjv-59rpa08d-jeybknox","name":"Rhiz3K","slug":"rhiz3k","imageUrl":"https://images.opencollective.com/rhiz3k/7287acd/avatar.png"},{"id":"8k03reyd-5agmq5x7-77gplbwo-z7j4nxv9","name":"vukie","slug":"guest-40aabe13","imageUrl":"https://images.opencollective.com/guest-40aabe13/avatar.png"},{"id":"a47byg9n-xozdp84a-rmvqmjlv-03rek5w8","name":"Guest","slug":"guest-2fe979fa","imageUrl":"https://images.opencollective.com/guest-2fe979fa/avatar.png"},{"id":"rxg0j35l-zkwm6vgm-k3x6voe9-8n47daby","name":"AngryPig","slug":"guest-b9e8a062","imageUrl":"https://images.opencollective.com/guest-b9e8a062/avatar.png"},{"id":"acc_00XiGzC0V5uzYIL5imKK8","name":"Christopher Jones","slug":"christopher-jones-aae1b68a","imageUrl":"https://images.opencollective.com/christopher-jones-aae1b68a/avatar.png"},{"id":"acc_Usap6nzTGh8BCPg0V6lM7","name":"zzoomless7","slug":"guest-a4dec157","imageUrl":"https://images.opencollective.com/guest-a4dec157/avatar.png"},{"id":"acc_BhFQegbcujMZPebCsBuYv","name":"Sobe","slug":"guest-27946e70","imageUrl":"https://images.opencollective.com/guest-27946e70/avatar.png"}]
\ No newline at end of file
diff --git a/static-data/translators.json b/static-data/translators.json
index ca0462ceb..f95101c26 100644
--- a/static-data/translators.json
+++ b/static-data/translators.json
@@ -1 +1 @@
-[{"username":"carlchina","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/6697/medium/d22bbe7797bbeb30dbdc73a5648d329a_default.png"},{"username":"zielmann","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/7795/medium/ad22b8b8d5eb33e4154d53a454c862fd_default.png"},{"username":"Thalyn","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12494028/medium/5faf5acc945a874ed116c4567edaa09f_default.png"},{"username":"magnushj","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12503488/medium/68f32e33ea7b891960055c9f831f7344_default.png"},{"username":"almontegil","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12580457/medium/f4136cacbdfdb4c28ae7f85dc5f840db_default.png"},{"username":"andibing","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12664938/medium/b8be63e4dcb2e791ced1ffc9e3a049a5.jpg"},{"username":"gronare","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12680911/medium/c6eb14d1504156f34a158e507f73aa3d_default.png"},{"username":"SmartPhoneLover","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12701640/medium/ec95486662ec875cda080e778c3ff702.jpg"},{"username":"marcelotk_15","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12773227/medium/ecf6bea16ab0c873c131df2154ee9718_default.png"},{"username":"S3OD177","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13051544/medium/11dd990837f61f7e8f7d36b041a7fddb_default.png"},{"username":"marcg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13153301/medium/ebcf60fbf27deb148ec40a659566c6ff_default.png"},{"username":"BeersTeddy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13185230/medium/2f1f4e1effe74a23422b195cbefb2a95_default.png"},{"username":"jamesmcmahon0","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13245578/medium/586aa873b4abddbd9abc6f3de99ab70e.jpeg"},{"username":"b1nar10","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13286752/medium/aaa1f083e04c572f953fde4563171e4a.jpeg"},{"username":"vannCN","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13330448/medium/9b8a9ee3611e51e951e22d5fd4eb7d8d.jpg"},{"username":"binswm","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13343482/medium/45dde0e6097b9b72705d2eba9dbbc276_default.png"},{"username":"SkewRam","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13496556/medium/188f5c2deb7938eda51eb786cc4539ca.jpeg"},{"username":"raphcatarino","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13547726/medium/b003511e67df13a4b4b5689488fa8099.jpg"},{"username":"shillos5","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13600557/medium/b17650b2b84f829d54fa548c44c1ab27.jpeg"},{"username":"wolong98","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13641407/medium/f4634edc58c7857a357e5293543c15cf.jpg"},{"username":"spair0039","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14012333/medium/72430e96027c09c19141cac38eae4617.png"},{"username":"MajorMarcin","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14072183/medium/0a197e64bb92b6ea94cecbb607512c45.jpg"},{"username":"KosmoMoustache","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14103535/medium/51c438cdd9f86e8811c75f4869de479c.png"},{"username":"Soochaehwa","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14118689/medium/496a1ce63111547bf455a1e0a7ac75f1_default.png"},{"username":"garryfield","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14187035/medium/520c964706676045f6eeec1b08edc880.jpg"},{"username":"droidenko","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14444264/medium/4aa3a8e824f72bc9e5ec0d8de307095e.jpeg"},{"username":"maathis","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14489950/medium/6eeddf13a757ee35f78f1763f94d95e1.jpeg"},{"username":"bukvam","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14546502/medium/a819dc40a13c57395a17dc46e847d3ce.jpg"},{"username":"gm.cinalli","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14670666/medium/2d466a0fdbda40764526be86c97c0ab4.jpeg"},{"username":"antoine2tt","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14722148/medium/f88d926900862dd59007ea4b3419cb9d.png"},{"username":"cretzen","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14799754/medium/3ba5c1805ec20c000d5810c07985afe9.jpg"},{"username":"ktKongTong","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14817246/medium/97cfc3c028dbdaf85ebd1102da71e58c.jpeg"},{"username":"marinkaberg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14861042/medium/2d5c4e62613f03082f3e645fa92efd59.jpeg"},{"username":"djismgaming","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14934947/medium/f5a8570713c34ab0f7d5405d105e2a9a.jpeg"},{"username":"f1refa11","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14949159/medium/fd2ae63b8eb4462200ba96abf943c1b9.png"},{"username":"jeffersonraimon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15057621/medium/6dff469563860e2618bc9d45646d0ab4.png"},{"username":"giop98","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15057987/medium/b8a4825d3fc39fc662f35ee258db4b2d.jpeg"},{"username":"tomislav.kraljevic","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15118857/medium/e133f1061cc92850b854d05d8faaeafd.png"},{"username":"Walkx","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15202182/medium/5c37361ae45aeed487b34582c1f7ca37.png"},{"username":"andrea.rosso","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15246318/medium/11f3f5ef44ec7f55b6f143090e208704_default.png"},{"username":"ajnart","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15270132/medium/a0f107a463c8910ee96bc2fa843a17e3.jpeg"},{"username":"Witchling","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15282238/medium/9e196b6783415b10ca571b7673c2ef33.jpg"},{"username":"guineuu","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15292058/medium/22fbb758bda3b7805d50bf21d38f2c20.jpeg"},{"username":"Bulgus","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15304568/medium/0e8787e5ceb02ed5c96a514d0068ae87.jpg"},{"username":"Narno","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15314996/medium/a6ba093f24884250a1bf6c6f2ca50f1b_default.png"},{"username":"BySempron","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15315986/medium/e3d22d7b1423c6823a9f36d595ed4bdb.png"},{"username":"jonathan.berglin.work","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15359236/medium/95930b2093db13b76179782f7322c5d5.png"},{"username":"icdmkg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15405504/medium/f334d16cde1ac4ffb935b440d03465af.gif"},{"username":"irithys","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15405614/medium/3086461c47cce0a0c031925e5f943412.png"},{"username":"JannesV","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15419912/medium/a7809eb4b817d7c49b62cf10ae86b950.png"},{"username":"benniblot","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15419914/medium/8086b1573d31f152ba41949b3a172445.jpeg"},{"username":"pacjo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15419916/medium/3cbeddbd7bc01faafb5a3bf47bba915b_default.png"},{"username":"Payou6994","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15419934/medium/37c9b9b17dfb578404c1c1ddb73ba7a8.png"},{"username":"fzibi21","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15419976/medium/0da688450358e0290a7b7359cc1f7328.png"},{"username":"WowMurdock","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15420118/medium/de19576fccb495b6dfe4c4c04a56b834.png"},{"username":"hbooo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15420120/medium/6c7c7f8db785061356ebb03d044d3329.jpeg"},{"username":"Manicraft1001","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15420178/medium/50ec94563a06a9f74f33bd09f01eed4d.jpg"},{"username":"Void123","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15420354/medium/86929d44df92a00f9fe900a985c196df_default.png"},{"username":"R4cc","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15422606/medium/a390979662b84694f59de30bdb732141.jpeg"},{"username":"fabricionaweb","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15425808/medium/a9354142e7ae5152c144409d55fda551_default.png"},{"username":"JokeOfDead","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15426890/medium/a383eac9365e9de64fd4ab1d6fd0cb95.jpeg"},{"username":"hkz","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15427174/medium/c88acefb0d7306e1f7470e872029fb39_default.png"},{"username":"Steken","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15428516/medium/d5aea5653c769c3a523182bdb60d1664.png"},{"username":"flar.anton","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15428592/medium/b01fdb365d892e9f811f77fcb50a80a2.jpeg"},{"username":"Bon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15433542/medium/5397da4dfc821f20b6ac14fe0c514e9a.jpeg"},{"username":"bfkadan","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15434162/medium/4f9a0b43cfe3acaea60124c14ba7f44a.png"},{"username":"BunnySweety","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15434662/medium/f0ef200a6a0dcf0e1d0e9ecd4148f560_default.png"},{"username":"HRKings","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15436168/medium/69a31e461d38549f01864e7ef10d642e.png"},{"username":"wiston81","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15439078/medium/10f292c8d12a7c21a44b54495fa4a3d8.jpeg"},{"username":"qaz0911","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15440860/medium/3d3e50ee388c72dc4bf7a771761f2d89_default.png"},{"username":"qqyule","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15441462/medium/7a3cdf82710ffb5d8f388bc0bd010665.png"},{"username":"Bims0n","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15445560/medium/603220b603eeb3367e0f0d3fa675247c.jpg"},{"username":"TariqDaCoder","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15446228/medium/50b0f4040112bbd67690b769477398e5_default.png"},{"username":"Anarchon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15449644/medium/e925e1f3e3ffbf0f982391ce263a1a28.jpeg"},{"username":"Ashun","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15453020/medium/ccdcf51c73d6aae40751bb30beee1915_default.png"},{"username":"sebekmartin","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15454038/medium/bcfb44598cdfd1d7cd4eb35812538962.jpeg"},{"username":"RagnarGraves","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15459882/medium/143d5af850c1154070a218bea124e9cb_default.png"},{"username":"PrtmPhlp","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15462414/medium/b80db55e9de301432dcd1f8c8b24fd49_default.png"},{"username":"DooYoo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15470768/medium/2a18cf4be67094724b508c9e1e698a21_default.png"},{"username":"espentruls","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15486092/medium/8e38afc3a4ff669226a0cfd3e420ff3a.jpeg"},{"username":"frisco82","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15486922/medium/4e1c5d4189b42508e660daa3c1c25b2a.jpeg"},{"username":"lupineDK","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15491798/medium/461bd501e8371c062bf29ea171aedd36_default.png"},{"username":"hillaliy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15492732/medium/0bae17b421604892d888e3fc70cf0587.jpeg"},{"username":"MarcOrfilaCarreras","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15501072/medium/ea52b26c3c6f21e4931e38e3ce3f3d6e.png"},{"username":"robertbridda","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15507822/medium/a368c2e30411bb2da9b49290084191f3.png"},{"username":"MKoniuszko","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15518090/medium/87605434fcc839f6763ab07c50f6d232.jpeg"},{"username":"HeroSizy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15518710/medium/4e79c0e98cbeb536dd961e656331b509.png"},{"username":"dwt136","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15520022/medium/554422503f2baea43ace85facb4546fb_default.png"},{"username":"asifthewebguy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15526719/medium/b18931dd0c800d725048bd440646198b_default.png"},{"username":"eiloogs","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15545537/medium/f290a2f1190983530a9b76b2e858a609.gif"},{"username":"_vytdv","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15547289/medium/60d8644cc8ad6f11a92ccea4a14cd098_default.png"},{"username":"crendasien","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15554645/medium/598ab1d4aaf6b8dccd5ba16be92da7b9.jpeg"},{"username":"edxo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15573823/medium/8a565b732a75a77f840dd123cdb30bf4.png"},{"username":"somerlev","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15617065/medium/f4b13513e311ec902d90b2f718412c55.jpg"},{"username":"kid1412621","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15643771/medium/dd455e32de652fa88e6fd97598bdffa7.png"},{"username":"suming","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15644717/medium/244159dfe10fa03436205506f80c9e25.png"},{"username":"nick.gher","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15647517/medium/5374a2c6fef60a3fbf0edf86b997c351_default.png"},{"username":"DataCat","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15650315/medium/ce7c1365adf35c5d490d77500a4607fb_default.png"},{"username":"dizo89","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15658375/medium/0ca745e5017d491fe1b22b0239904de8.jpeg"},{"username":"tee_noodle","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15674577/medium/804d9cf06f5196026acb6436b809d0da_default.png"},{"username":"Marty88","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15674593/medium/492b1509d52bd2809dea768121217125.jpeg"},{"username":"Spillebulle","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15677023/medium/20b98bb85062e07afe0e63618f8a5feb.PNG"},{"username":"petitmewen","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15685239/medium/15de9b62d2e0bc25013435f1784bbcc1.jpeg"},{"username":"NoProsNoNoobs","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15687709/medium/ae8f65fafeb8bcf74dcb8871bbe46461.png"},{"username":"y.gybson","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15690777/medium/b5cb5d2d5768904ff6586c727e3a6c77.jpeg"},{"username":"inside90","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15704947/medium/c1355fcb30dd76f8e39d98d1d49f1c52.png"},{"username":"RJSkudra","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15709853/medium/c3abf2774913dc4e81fb261d36d7668c.png"},{"username":"binge203","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15713937/medium/77c1cfa4314673db80e6881fd9f64668.gif"},{"username":"Mailootje","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15714337/medium/743c3bc4ab1989966a375eeeec83d8b8.jpeg"},{"username":"tim-wiegers","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15719805/medium/08a96f064813350661cd6b20bf3d7d99.png"},{"username":"GkhnG","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15722911/medium/71a027caec489ef6ce82bcf1888329d0_default.png"},{"username":"Zoen-Millo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15760967/medium/9e956f11adc5b34f5636268b5c485dbf.jpg"},{"username":"HooinKyoma","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15792897/medium/9489f0a9b368e0e827ae758b740a2eed.jpeg"},{"username":"wathergeen","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15794495/medium/a83b7fc80d180669ebfd6deb3544cfd0.png"},{"username":"MoeToo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15818233/medium/d35cd6953717706eaf20f6c143c62947.png"},{"username":"itodouble","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15836233/medium/e984caea18fb0673bf319fcf28cef649.png"},{"username":"loslocitos","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15847901/medium/fe30d12fd2cf38212f929e13b169f9ec.jpeg"},{"username":"Oversleep","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15849065/medium/06141f13a6d541d753f3c2f2947b8068_default.png"},{"username":"Beardy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15865139/medium/fca6b9d2b3f52e286d1568f52b83b6a0_default.png"},{"username":"raelyan","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15875457/medium/2f4fda1d1aaa5dcc79b328baf3f03151.jpeg"},{"username":"dolphin738","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15913763/medium/ee6fede7b8528ca642329ada80d1cc18.png"},{"username":"brunotco","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15916719/medium/09db45880fc05abc18adb8d932a5ecf9_default.png"},{"username":"LukeIsHereToDevelop","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15924739/medium/3e6cd3940297bb4ba7bb039c93e6f918.png"},{"username":"kennit","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15925879/medium/6b0733ad3c5949b91c55e4d8b03db8a5_default.png"},{"username":"kuunpire","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15950309/medium/8192a4f08f07086828ac9f74ed29a169.jpeg"},{"username":"Sandor-dev","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15951759/medium/0216c2da4eb028164ebbecf1c72f6271_default.png"},{"username":"Meierschlumpf","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15953187/medium/23c744faef1ab84fbdc9351a7850aab6.jpeg"},{"username":"harmlesscat","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15970733/medium/dd8d0214a0250c932bb518b1b55e45a2_default.png"},{"username":"OrzWTF","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15976121/medium/4c4557cbff7ff7b0503455bc59c020e0.jpeg"},{"username":"tagaishi","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15977271/medium/eade504c83a5a1ff831c80a538fbdb44_default.png"},{"username":"azurite928","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15981895/medium/547ccc459ee123e78b5401c499f1022d.png"},{"username":"Ronner231","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16021342/medium/7734d550df2de5a2fec2ffff33e7024c.jpeg"},{"username":"ugyes","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16034148/medium/ed001e3f470a2dea9a8ce955b18e7bd5.png"},{"username":"rpieja","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16045554/medium/bd55baca2ef8b92502a760cc9ee7c505_default.png"},{"username":"flambyisyou","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16051620/medium/3a3bc0c90f6b95ab4ef74396a0a17beb.png"},{"username":"Topbcy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16077170/medium/d3aed33ea56330338756cfcd89477cfe.jpeg"},{"username":"ai5d02sb","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16084674/medium/7c8119fe2a5ca71bb15f636916a42b95_default.png"},{"username":"explosiveparrot","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16097722/medium/7762f80fc1da63f5b2eb87de9d640324_default.png"},{"username":"DestroyCom","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16111544/medium/83e3d3ac5c8bfed634cd1a074854db67.png"},{"username":"neotraxo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16116966/medium/b30df957873329019a8a90a69f6efe3a.png"},{"username":"gzxpa","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16123314/medium/487b05577310a946b0b98bc72c11213b_default.png"},{"username":"TORIK","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16124732/medium/de770890e6411860ac06e8cc2dc0abd0_default.png"},{"username":"sergio.pibot","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16138114/medium/80db802b2fcd6bbf19ea4c7413367dca.jpeg"},{"username":"karam-ajaj","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16139838/medium/7539ab958d3c85d5f67e7849483ea8f7.jpeg"},{"username":"SimonHenz97","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16151520/medium/9b94a85b536688e2d94538c384fd0a76.png"},{"username":"olsson82","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16198988/medium/eeaab4cba210c537424d4204754b604e.png"},{"username":"bo3bdo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16222806/medium/8652f3beacb6098dde5a4cd0a29fe80d.jpeg"},{"username":"AngryPlayer04","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16245192/medium/342715274f4dc31fd4132cdae9126188.jpeg"},{"username":"ehatamm","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16245884/medium/979d5e5526fe545be9bf46db481f7182.jpeg"},{"username":"Balionelis","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16246058/medium/986d62ba363594c517d966fe9178dcbb.png"},{"username":"kwargs","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16248816/medium/19ce11f04bf1ae2637e0483399c675f9_default.png"},{"username":"lucicu","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16273892/medium/3b09e8f3bead221ef98d6a45a16851dc_default.png"},{"username":"Michael5564445","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16357688/medium/9d9026a8bf3eaccb0417da240932ebf7.png"},{"username":"Netscream","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16359198/medium/694e0c8572dc8a47e6d63da31ec5b992.png"},{"username":"belicstefan04","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16368142/medium/4742dcfd7bf7ad7e33e37ac44fba7e0f.png"},{"username":"Hamad2066","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16371478/medium/f37bbc7685b6757defdbd1494236af61.jpeg"},{"username":"3ct0pl4sm","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16399616/medium/ce796d1c40163975624c0a483e56374f.png"},{"username":"sanchez.marcell626","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16433865/medium/3ddde1314764cc2205ffdcd1ae719a91.png"},{"username":"Minoctis","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16490079/medium/91fd0849303a4eca033d660d0a7b6854.jpeg"},{"username":"homarr","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16657003/medium/3afabfd3de949a54ff5d40ad04552aba.png"},{"username":"mwgg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16658379/medium/763dd09f5c238cc5324d4d5357985292.png"},{"username":"kiwinho","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16671855/medium/bfe3a2d497dc4748a04d02e4ae2139cb.jpeg"},{"username":"tjvg4m34r13","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16679135/medium/7a483b9b0abe0d925e54808e1cb38fa0.jpeg"},{"username":"Diegoem","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16705921/medium/29ce68ebc191fc3f65499511b12de98f_default.png"},{"username":"bouks69","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16746091/medium/b58b1fc08520de416198be9df5d093eb.jpeg"},{"username":"futhgar","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16748067/medium/b8c526b097f9aa9d687250cac3df16dc.jpeg"},{"username":"GrimSQL","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16764343/medium/fff729a76d1f8fbcdaee9bb0c0f5f3fd.png"},{"username":"chnikel","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16767047/medium/3dda2a37e03049dafefe6697bb00f75c.png"},{"username":"yuki19870616","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16767951/medium/f59c848e38382cda6c8464b0a7b9e642_default.png"},{"username":"noamdal","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16782245/medium/b4a72a61f9caf138f0322c0cb987e6d0.png"},{"username":"MalithRukshan","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16809057/medium/084d6a5b35fbbeacc70e7021197d222f.png"},{"username":"minirope19","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16930929/medium/e8cbbc26747e31c5a8959215e1dd067b.jpeg"},{"username":"prubin","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17503492/medium/96ac87644691e49c1f983f2f094e541c_default.png"},{"username":"sam-tam-sam","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17578052/medium/1628dc2954ce3ae95e0caaa2bd60ab0c.png"},{"username":"KydoxOwn","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17764383/medium/0bc150a09d77f5fda43988e6342777dc.png"},{"username":"toineenzo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12371852/medium/9f1b2bedb4794c59479cd289bdba9fab.png"},{"username":"RollstuhlJack","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12386691/medium/192fa7d350b148a55d37332c9d17c529_default.png"},{"username":"ArcaneWater","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12421105/medium/1ac82517a6c658f6b62c48aebcb17e86_default.png"},{"username":"Ascalon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12743376/medium/7845361ea1fae14e71978df906d60250.png"},{"username":"Ebedami","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12974801/medium/b596dea5c09454c4c828eac558389755.jpg"},{"username":"perrygamerptyt","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13117177/medium/1406c949507ecd438480473c8a1f6124.jpg"},{"username":"SergiSvK","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13320543/medium/3df3c79cc5f0c53716c559cd3fd2fc20.png"},{"username":"jeongeon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13362856/medium/eb572f72cde5e5526c517ca3a6489850_default.png"},{"username":"thrmda","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13431074/medium/c79736af3a4140a01254ea1a887f64bc_default.png"},{"username":"MrTranCFCVN","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13439475/medium/a1789d69c85d90c667194b5d6a518c08_default.png"},{"username":"Tobost06","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13467449/medium/9227dc07f6366bc060d28304f5cb8ce7.jpeg"},{"username":"Kf637","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13530622/medium/118b00bb72d01d3229c97409637e25d1_default.png"},{"username":"Cruellest","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13610615/medium/2a74faa0947ee08d18f7946fb8602c1e.jpg"},{"username":"olavinto","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14424644/medium/37c01732bd2b7a272b421807a05ccfeb.png"},{"username":"OzakIOne","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14446246/medium/3abb08846344706d3a16a9fb196655ee.jpeg"},{"username":"Thario","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14491372/medium/dd5e142070802a672900121aa3f332a6_default.png"},{"username":"Wjouter","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14585620/medium/b91a51513332bdc0a0a9ecbed99ecbc3.png"},{"username":"albanobattistella","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14686194/medium/564afcfd76f5cd24751bd669cf4943aa.jpg"},{"username":"angrystar170","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14736454/medium/7a70edc6b50122877533e95a4e971203.jpeg"},{"username":"Kachelkaiser","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14763406/medium/203a781797da4a18fe0f4e7db8fd547c.png"},{"username":"regi4","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14842936/medium/f7e1d672f562a7db61ba6b4b8f4de41d.png"},{"username":"baton5129","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14891064/medium/8d438f557b82977dd02f0ead3187265f.PNG"},{"username":"legocuedy09","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15206280/medium/a93129b77a54ffbb2c9f136f18718e80.png"},{"username":"meviper","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15958903/medium/209f521ce33a05831fa8d7d1b7babc20_default.png"},{"username":"GerOriki","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16268376/medium/da00e54b08cd40348231d92873a0cd0a_default.png"},{"username":"TheRedCyclops","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16486399/medium/7f39226180120d5a9efcb8e13d8aec8e_default.png"},{"username":"dymek37","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16659221/medium/d1dc6d11d7e7fc370efc5070e837ae03.png"},{"username":"B3CKDOOR","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16744975/medium/e6c7b2d45e76465d54e6efb67c83da7d.png"},{"username":"on9686","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16768173/medium/6282fed9aafe0262a173a5ec0887e5d9_default.png"},{"username":"Larsluph","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16779933/medium/ed7d36f8b44013bad3a16ac0491bd0f7.png"},{"username":"FOEDI","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16781001/medium/6b4552fb72e359aa016f7a054078fac8.png"},{"username":"xmarkurion","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16805443/medium/34a20428427de5aaef99c7d140646803.png"},{"username":"gregid","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16806705/medium/f3c8f4a20436e8538929130142bbc104.png"},{"username":"Flameberg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16820453/medium/d47be866148474c9d05fec6fbe406d88.png"},{"username":"Playfust","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16872865/medium/5f4609cc711e5fb9fa8a0b178635769c.jpeg"},{"username":"Cotignac","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16879297/medium/81ff353edf030699a159bb79cda26e84.jpg"},{"username":"LeaHun","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16916375/medium/618520f0543b1e212ebc83d66b683d4b_default.png"},{"username":"jackwellerreal","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16919717/medium/37bbfdc03893f141133ccc619593266d.png"},{"username":"renan.costaalencar","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16938427/medium/6d25b25320c5bde734118dec4af9cd5b.png"},{"username":"andrius.cim","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16967845/medium/46028fc1a0ddfaaeebcb37b39739625d_default.png"},{"username":"xjxexrxrxyx","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17041412/medium/d34d664166db6fb25579bca9ff3b50b4.jpeg"},{"username":"bilhal.fellah","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17044572/medium/d1ec6f17e4aa013e9eededc83778d2c6.png"},{"username":"the_octo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17058060/medium/7423ab3a4cabb67f5decb2e2dfa2b675_default.png"},{"username":"BamesJond","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17075846/medium/128d7ffd40254c8e376f45678e2fc620_default.png"},{"username":"Kornikus","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17134240/medium/d7a42b2c30db46ff152699ca01f9e11a_default.png"},{"username":"Master3307","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17161852/medium/94ec577dd53e16b434f2aac9c34f64c6.png"},{"username":"xoxyuxu","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17176526/medium/108055aa24343043de852e412bec74be.png"},{"username":"cryptodntsleep","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17249408/medium/b9e15aa2b24a0dbc1e4f194aa8ed5109.png"},{"username":"yaniorg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17261842/medium/7dbfc77f21c826845961243c44540d26.jpg"},{"username":"Vidariondr","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17262438/medium/45fbc71be02ef27296b6f423e97b6a03_default.png"},{"username":"Fastery","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17263066/medium/701b0edc59676174863ad651528bbb37.jpeg"},{"username":"stratself","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17290388/medium/57d9d8161b3fd0abf4dc5558b4a1fa05_default.png"},{"username":"wuzeqin","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17292606/medium/b9e0308410b31337e2d7aa6ed346d718_default.png"},{"username":"ChristopherBull","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17304338/medium/21a175ce596bfae81430767467908b90.jpeg"},{"username":"darkbcnlord","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17311436/medium/b271bc0b419ec3a26ddb7b63ff8ffc4b.png"},{"username":"zhoran1997","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17344028/medium/c8f450b5a8f1e9494a45dc60af7ce63e.png"},{"username":"Pakura","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17396930/medium/18602738018348bf2ffa83a78bf165e2_default.png"},{"username":"gilalves1703","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17447768/medium/3f1de562a5c2391c88bbf8d5cf40a266.png"},{"username":"iServeCloud","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17470960/medium/11649b99d609438d66455a4d2fdc70f7.png"},{"username":"guibolzantvbox","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17474136/medium/59a576e6da538664ceb972253916fa02.jpeg"},{"username":"ivann136","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17506062/medium/67d09ada36fac5f444a1f7517e3a97bd_default.png"},{"username":"Maheshivara","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17516082/medium/576e1e6581cf969615b265de6aeff8b7.jpeg"},{"username":"brunogui81","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17517542/medium/7c0d174e810435af518fe8e0c05e151f.jpeg"},{"username":"michelwilhelm","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17542190/medium/4c6b33fd8993ff565fa75add2ce8355e.jpeg"},{"username":"dias-gxstavo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17547376/medium/8c6b109aae8aeb651192346a39ae9e5b.jpeg"},{"username":"ToxykAuBleu","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17614030/medium/8d21e0608560172b121bd46126d827c7.jpeg"},{"username":"e.erdemir","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17617994/medium/7259a29db9941c6171a8cbbd643b92bd.png"},{"username":"sjonkreutz","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17618306/medium/7601c45d015189a863656e21348d223b.png"},{"username":"volovich0377","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17620388/medium/c929a8fbd24f96d17620fa497ade7309.png"},{"username":"Hamstio1","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17624898/medium/406e0bf40094c24a01c3064f8f5b2a82.png"},{"username":"i3laa","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17627462/medium/613a9d283ed8b69819ee181903851660.jpeg"},{"username":"bastiengrignon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17629884/medium/ddfc3339285bd65195fcd834e512e9b7.jpeg"},{"username":"kauhee","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17644600/medium/def1b9066cf9275b4273a5a5dca7f325.png"},{"username":"hongminzheng","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17683860/medium/a764f4963912777d27a7cd98e136a2b2.png"},{"username":"d-lindahl","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17726729/medium/cbde348582fbabcfadd89a56cd5a0b40.png"},{"username":"Enoal-Fauchille-Bolle","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17734649/medium/6e6fb29198782dc7856ea21811db669c.jpeg"},{"username":"manos-grigorakis","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17737973/medium/b37f685587c920c81fdaf9a357962434.jpeg"},{"username":"SertraFurr","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17738703/medium/5f1e9f270e315ee3185cf2ccb3f5a833.png"},{"username":"Kle.Ma","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17739207/medium/b767d6093e6608f251ca152f53d359b8_default.png"},{"username":"WalkerLukas","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17744485/medium/87508ce83a9b6e5391f55883a66a054b.png"},{"username":"mtya","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17748447/medium/f574d5a770d74814f8c49ee68e00f5b7.jpeg"},{"username":"Elaktrato","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17750977/medium/f4109d379f29dc8ea2e7799ac9e208c8.png"},{"username":"marcelmeis","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17753627/medium/4ba32116c27e427d3073e45713f6564e.png"},{"username":"ProKafelek12e","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17760377/medium/5199af152f1ea42cee718e7729bd41ff.png"},{"username":"zalaghi","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17763367/medium/a06f7b15222663517b58b8dc8902f8a1.png"},{"username":"Amato21","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17776775/medium/214b1f1581a85fe10f1ae3241aab43e4.png"},{"username":"jabalv","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17778347/medium/14dd47fff64f6543e6015be7373420c3.png"},{"username":"agiledivider","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17801131/medium/0039d926d5a716e712e36b06004369ab_default.png"},{"username":"nocteln","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17806203/medium/fc84143ba6b94cc8e8a37415a0d91fb0_default.png"},{"username":"b.yatsenko","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17810347/medium/6db1ce1d6b9f07afbcec0ca43b8015c8.png"}]
\ No newline at end of file
+[{"username":"carlchina","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/6697/medium/d22bbe7797bbeb30dbdc73a5648d329a_default.png"},{"username":"zielmann","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/7795/medium/ad22b8b8d5eb33e4154d53a454c862fd_default.png"},{"username":"Thalyn","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12494028/medium/5faf5acc945a874ed116c4567edaa09f_default.png"},{"username":"magnushj","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12503488/medium/68f32e33ea7b891960055c9f831f7344_default.png"},{"username":"almontegil","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12580457/medium/f4136cacbdfdb4c28ae7f85dc5f840db_default.png"},{"username":"andibing","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12664938/medium/b8be63e4dcb2e791ced1ffc9e3a049a5.jpg"},{"username":"gronare","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12680911/medium/c6eb14d1504156f34a158e507f73aa3d_default.png"},{"username":"SmartPhoneLover","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12701640/medium/ec95486662ec875cda080e778c3ff702.jpg"},{"username":"marcelotk_15","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12773227/medium/ecf6bea16ab0c873c131df2154ee9718_default.png"},{"username":"S3OD177","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13051544/medium/11dd990837f61f7e8f7d36b041a7fddb_default.png"},{"username":"marcg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13153301/medium/ebcf60fbf27deb148ec40a659566c6ff_default.png"},{"username":"BeersTeddy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13185230/medium/2f1f4e1effe74a23422b195cbefb2a95_default.png"},{"username":"jamesmcmahon0","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13245578/medium/586aa873b4abddbd9abc6f3de99ab70e.jpeg"},{"username":"b1nar10","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13286752/medium/aaa1f083e04c572f953fde4563171e4a.jpeg"},{"username":"vannCN","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13330448/medium/9b8a9ee3611e51e951e22d5fd4eb7d8d.jpg"},{"username":"binswm","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13343482/medium/45dde0e6097b9b72705d2eba9dbbc276_default.png"},{"username":"SkewRam","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13496556/medium/188f5c2deb7938eda51eb786cc4539ca.jpeg"},{"username":"raphcatarino","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13547726/medium/b003511e67df13a4b4b5689488fa8099.jpg"},{"username":"shillos5","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13600557/medium/b17650b2b84f829d54fa548c44c1ab27.jpeg"},{"username":"wolong98","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13641407/medium/f4634edc58c7857a357e5293543c15cf.jpg"},{"username":"spair0039","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14012333/medium/72430e96027c09c19141cac38eae4617.png"},{"username":"MajorMarcin","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14072183/medium/0a197e64bb92b6ea94cecbb607512c45.jpg"},{"username":"KosmoMoustache","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14103535/medium/51c438cdd9f86e8811c75f4869de479c.png"},{"username":"Soochaehwa","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14118689/medium/496a1ce63111547bf455a1e0a7ac75f1_default.png"},{"username":"garryfield","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14187035/medium/520c964706676045f6eeec1b08edc880.jpg"},{"username":"droidenko","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14444264/medium/4aa3a8e824f72bc9e5ec0d8de307095e.jpeg"},{"username":"maathis","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14489950/medium/6eeddf13a757ee35f78f1763f94d95e1.jpeg"},{"username":"bukvam","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14546502/medium/a819dc40a13c57395a17dc46e847d3ce.jpg"},{"username":"gm.cinalli","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14670666/medium/2d466a0fdbda40764526be86c97c0ab4.jpeg"},{"username":"antoine2tt","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14722148/medium/f88d926900862dd59007ea4b3419cb9d.png"},{"username":"cretzen","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14799754/medium/3ba5c1805ec20c000d5810c07985afe9.jpg"},{"username":"ktKongTong","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14817246/medium/97cfc3c028dbdaf85ebd1102da71e58c.jpeg"},{"username":"marinkaberg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14861042/medium/2d5c4e62613f03082f3e645fa92efd59.jpeg"},{"username":"djismgaming","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14934947/medium/f5a8570713c34ab0f7d5405d105e2a9a.jpeg"},{"username":"f1refa11","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14949159/medium/fd2ae63b8eb4462200ba96abf943c1b9.png"},{"username":"jeffersonraimon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15057621/medium/6dff469563860e2618bc9d45646d0ab4.png"},{"username":"giop98","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15057987/medium/b8a4825d3fc39fc662f35ee258db4b2d.jpeg"},{"username":"tomislav.kraljevic","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15118857/medium/e133f1061cc92850b854d05d8faaeafd.png"},{"username":"Walkx","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15202182/medium/5c37361ae45aeed487b34582c1f7ca37.png"},{"username":"andrea.rosso","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15246318/medium/11f3f5ef44ec7f55b6f143090e208704_default.png"},{"username":"ajnart","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15270132/medium/a0f107a463c8910ee96bc2fa843a17e3.jpeg"},{"username":"Witchling","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15282238/medium/9e196b6783415b10ca571b7673c2ef33.jpg"},{"username":"guineuu","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15292058/medium/22fbb758bda3b7805d50bf21d38f2c20.jpeg"},{"username":"Bulgus","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15304568/medium/0e8787e5ceb02ed5c96a514d0068ae87.jpg"},{"username":"Narno","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15314996/medium/a6ba093f24884250a1bf6c6f2ca50f1b_default.png"},{"username":"BySempron","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15315986/medium/e3d22d7b1423c6823a9f36d595ed4bdb.png"},{"username":"jonathan.berglin.work","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15359236/medium/95930b2093db13b76179782f7322c5d5.png"},{"username":"icdmkg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15405504/medium/f334d16cde1ac4ffb935b440d03465af.gif"},{"username":"irithys","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15405614/medium/3086461c47cce0a0c031925e5f943412.png"},{"username":"JannesV","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15419912/medium/a7809eb4b817d7c49b62cf10ae86b950.png"},{"username":"benniblot","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15419914/medium/8086b1573d31f152ba41949b3a172445.jpeg"},{"username":"pacjo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15419916/medium/3cbeddbd7bc01faafb5a3bf47bba915b_default.png"},{"username":"Payou6994","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15419934/medium/37c9b9b17dfb578404c1c1ddb73ba7a8.png"},{"username":"fzibi21","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15419976/medium/0da688450358e0290a7b7359cc1f7328.png"},{"username":"WowMurdock","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15420118/medium/de19576fccb495b6dfe4c4c04a56b834.png"},{"username":"hbooo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15420120/medium/6c7c7f8db785061356ebb03d044d3329.jpeg"},{"username":"Manicraft1001","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15420178/medium/50ec94563a06a9f74f33bd09f01eed4d.jpg"},{"username":"Void123","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15420354/medium/86929d44df92a00f9fe900a985c196df_default.png"},{"username":"R4cc","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15422606/medium/a390979662b84694f59de30bdb732141.jpeg"},{"username":"fabricionaweb","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15425808/medium/a9354142e7ae5152c144409d55fda551_default.png"},{"username":"JokeOfDead","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15426890/medium/a383eac9365e9de64fd4ab1d6fd0cb95.jpeg"},{"username":"hkz","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15427174/medium/c88acefb0d7306e1f7470e872029fb39_default.png"},{"username":"Steken","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15428516/medium/d5aea5653c769c3a523182bdb60d1664.png"},{"username":"flar.anton","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15428592/medium/b01fdb365d892e9f811f77fcb50a80a2.jpeg"},{"username":"Bon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15433542/medium/5397da4dfc821f20b6ac14fe0c514e9a.jpeg"},{"username":"bfkadan","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15434162/medium/4f9a0b43cfe3acaea60124c14ba7f44a.png"},{"username":"BunnySweety","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15434662/medium/f0ef200a6a0dcf0e1d0e9ecd4148f560_default.png"},{"username":"HRKings","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15436168/medium/69a31e461d38549f01864e7ef10d642e.png"},{"username":"wiston81","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15439078/medium/10f292c8d12a7c21a44b54495fa4a3d8.jpeg"},{"username":"qaz0911","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15440860/medium/3d3e50ee388c72dc4bf7a771761f2d89_default.png"},{"username":"qqyule","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15441462/medium/7a3cdf82710ffb5d8f388bc0bd010665.png"},{"username":"Bims0n","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15445560/medium/603220b603eeb3367e0f0d3fa675247c.jpg"},{"username":"TariqDaCoder","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15446228/medium/50b0f4040112bbd67690b769477398e5_default.png"},{"username":"Anarchon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15449644/medium/e925e1f3e3ffbf0f982391ce263a1a28.jpeg"},{"username":"Ashun","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15453020/medium/ccdcf51c73d6aae40751bb30beee1915_default.png"},{"username":"sebekmartin","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15454038/medium/bcfb44598cdfd1d7cd4eb35812538962.jpeg"},{"username":"RagnarGraves","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15459882/medium/143d5af850c1154070a218bea124e9cb_default.png"},{"username":"PrtmPhlp","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15462414/medium/b80db55e9de301432dcd1f8c8b24fd49_default.png"},{"username":"DooYoo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15470768/medium/2a18cf4be67094724b508c9e1e698a21_default.png"},{"username":"espentruls","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15486092/medium/8e38afc3a4ff669226a0cfd3e420ff3a.jpeg"},{"username":"frisco82","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15486922/medium/4e1c5d4189b42508e660daa3c1c25b2a.jpeg"},{"username":"lupineDK","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15491798/medium/461bd501e8371c062bf29ea171aedd36_default.png"},{"username":"hillaliy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15492732/medium/0bae17b421604892d888e3fc70cf0587.jpeg"},{"username":"MarcOrfilaCarreras","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15501072/medium/ea52b26c3c6f21e4931e38e3ce3f3d6e.png"},{"username":"robertbridda","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15507822/medium/a368c2e30411bb2da9b49290084191f3.png"},{"username":"MKoniuszko","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15518090/medium/87605434fcc839f6763ab07c50f6d232.jpeg"},{"username":"HeroSizy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15518710/medium/4e79c0e98cbeb536dd961e656331b509.png"},{"username":"dwt136","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15520022/medium/554422503f2baea43ace85facb4546fb_default.png"},{"username":"asifthewebguy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15526719/medium/b18931dd0c800d725048bd440646198b_default.png"},{"username":"eiloogs","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15545537/medium/f290a2f1190983530a9b76b2e858a609.gif"},{"username":"_vytdv","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15547289/medium/60d8644cc8ad6f11a92ccea4a14cd098_default.png"},{"username":"crendasien","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15554645/medium/598ab1d4aaf6b8dccd5ba16be92da7b9.jpeg"},{"username":"edxo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15573823/medium/8a565b732a75a77f840dd123cdb30bf4.png"},{"username":"somerlev","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15617065/medium/f4b13513e311ec902d90b2f718412c55.jpg"},{"username":"kid1412621","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15643771/medium/dd455e32de652fa88e6fd97598bdffa7.png"},{"username":"suming","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15644717/medium/244159dfe10fa03436205506f80c9e25.png"},{"username":"nick.gher","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15647517/medium/5374a2c6fef60a3fbf0edf86b997c351_default.png"},{"username":"DataCat","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15650315/medium/ce7c1365adf35c5d490d77500a4607fb_default.png"},{"username":"dizo89","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15658375/medium/0ca745e5017d491fe1b22b0239904de8.jpeg"},{"username":"tee_noodle","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15674577/medium/804d9cf06f5196026acb6436b809d0da_default.png"},{"username":"Marty88","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15674593/medium/492b1509d52bd2809dea768121217125.jpeg"},{"username":"Spillebulle","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15677023/medium/20b98bb85062e07afe0e63618f8a5feb.PNG"},{"username":"petitmewen","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15685239/medium/15de9b62d2e0bc25013435f1784bbcc1.jpeg"},{"username":"NoProsNoNoobs","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15687709/medium/ae8f65fafeb8bcf74dcb8871bbe46461.png"},{"username":"y.gybson","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15690777/medium/b5cb5d2d5768904ff6586c727e3a6c77.jpeg"},{"username":"inside90","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15704947/medium/c1355fcb30dd76f8e39d98d1d49f1c52.png"},{"username":"RJSkudra","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15709853/medium/c3abf2774913dc4e81fb261d36d7668c.png"},{"username":"binge203","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15713937/medium/77c1cfa4314673db80e6881fd9f64668.gif"},{"username":"Mailootje","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15714337/medium/743c3bc4ab1989966a375eeeec83d8b8.jpeg"},{"username":"tim-wiegers","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15719805/medium/08a96f064813350661cd6b20bf3d7d99.png"},{"username":"GkhnG","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15722911/medium/71a027caec489ef6ce82bcf1888329d0_default.png"},{"username":"Zoen-Millo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15760967/medium/9e956f11adc5b34f5636268b5c485dbf.jpg"},{"username":"HooinKyoma","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15792897/medium/9489f0a9b368e0e827ae758b740a2eed.jpeg"},{"username":"wathergeen","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15794495/medium/a83b7fc80d180669ebfd6deb3544cfd0.png"},{"username":"MoeToo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15818233/medium/d35cd6953717706eaf20f6c143c62947.png"},{"username":"itodouble","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15836233/medium/e984caea18fb0673bf319fcf28cef649.png"},{"username":"loslocitos","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15847901/medium/fe30d12fd2cf38212f929e13b169f9ec.jpeg"},{"username":"Oversleep","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15849065/medium/06141f13a6d541d753f3c2f2947b8068_default.png"},{"username":"Beardy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15865139/medium/fca6b9d2b3f52e286d1568f52b83b6a0_default.png"},{"username":"raelyan","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15875457/medium/2f4fda1d1aaa5dcc79b328baf3f03151.jpeg"},{"username":"dolphin738","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15913763/medium/ee6fede7b8528ca642329ada80d1cc18.png"},{"username":"brunotco","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15916719/medium/09db45880fc05abc18adb8d932a5ecf9_default.png"},{"username":"LukeIsHereToDevelop","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15924739/medium/3e6cd3940297bb4ba7bb039c93e6f918.png"},{"username":"kennit","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15925879/medium/6b0733ad3c5949b91c55e4d8b03db8a5_default.png"},{"username":"kuunpire","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15950309/medium/8192a4f08f07086828ac9f74ed29a169.jpeg"},{"username":"Sandor-dev","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15951759/medium/0216c2da4eb028164ebbecf1c72f6271_default.png"},{"username":"Meierschlumpf","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15953187/medium/23c744faef1ab84fbdc9351a7850aab6.jpeg"},{"username":"harmlesscat","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15970733/medium/dd8d0214a0250c932bb518b1b55e45a2_default.png"},{"username":"OrzWTF","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15976121/medium/4c4557cbff7ff7b0503455bc59c020e0.jpeg"},{"username":"tagaishi","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15977271/medium/eade504c83a5a1ff831c80a538fbdb44_default.png"},{"username":"azurite928","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15981895/medium/547ccc459ee123e78b5401c499f1022d.png"},{"username":"Ronner231","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16021342/medium/7734d550df2de5a2fec2ffff33e7024c.jpeg"},{"username":"ugyes","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16034148/medium/ed001e3f470a2dea9a8ce955b18e7bd5.png"},{"username":"rpieja","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16045554/medium/bd55baca2ef8b92502a760cc9ee7c505_default.png"},{"username":"flambyisyou","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16051620/medium/3a3bc0c90f6b95ab4ef74396a0a17beb.png"},{"username":"Topbcy","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16077170/medium/d3aed33ea56330338756cfcd89477cfe.jpeg"},{"username":"ai5d02sb","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16084674/medium/7c8119fe2a5ca71bb15f636916a42b95_default.png"},{"username":"explosiveparrot","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16097722/medium/7762f80fc1da63f5b2eb87de9d640324_default.png"},{"username":"DestroyCom","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16111544/medium/83e3d3ac5c8bfed634cd1a074854db67.png"},{"username":"neotraxo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16116966/medium/b30df957873329019a8a90a69f6efe3a.png"},{"username":"gzxpa","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16123314/medium/487b05577310a946b0b98bc72c11213b_default.png"},{"username":"TORIK","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16124732/medium/de770890e6411860ac06e8cc2dc0abd0_default.png"},{"username":"sergio.pibot","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16138114/medium/80db802b2fcd6bbf19ea4c7413367dca.jpeg"},{"username":"karam-ajaj","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16139838/medium/7539ab958d3c85d5f67e7849483ea8f7.jpeg"},{"username":"SimonHenz97","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16151520/medium/9b94a85b536688e2d94538c384fd0a76.png"},{"username":"olsson82","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16198988/medium/eeaab4cba210c537424d4204754b604e.png"},{"username":"bo3bdo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16222806/medium/8652f3beacb6098dde5a4cd0a29fe80d.jpeg"},{"username":"AngryPlayer04","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16245192/medium/342715274f4dc31fd4132cdae9126188.jpeg"},{"username":"ehatamm","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16245884/medium/979d5e5526fe545be9bf46db481f7182.jpeg"},{"username":"Balionelis","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16246058/medium/986d62ba363594c517d966fe9178dcbb.png"},{"username":"kwargs","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16248816/medium/19ce11f04bf1ae2637e0483399c675f9_default.png"},{"username":"lucicu","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16273892/medium/3b09e8f3bead221ef98d6a45a16851dc_default.png"},{"username":"Michael5564445","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16357688/medium/9d9026a8bf3eaccb0417da240932ebf7.png"},{"username":"Netscream","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16359198/medium/694e0c8572dc8a47e6d63da31ec5b992.png"},{"username":"belicstefan04","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16368142/medium/4742dcfd7bf7ad7e33e37ac44fba7e0f.png"},{"username":"Hamad2066","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16371478/medium/f37bbc7685b6757defdbd1494236af61.jpeg"},{"username":"3ct0pl4sm","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16399616/medium/ce796d1c40163975624c0a483e56374f.png"},{"username":"sanchez.marcell626","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16433865/medium/3ddde1314764cc2205ffdcd1ae719a91.png"},{"username":"Minoctis","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16490079/medium/91fd0849303a4eca033d660d0a7b6854.jpeg"},{"username":"homarr","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16657003/medium/3afabfd3de949a54ff5d40ad04552aba.png"},{"username":"mwgg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16658379/medium/763dd09f5c238cc5324d4d5357985292.png"},{"username":"kiwinho","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16671855/medium/bfe3a2d497dc4748a04d02e4ae2139cb.jpeg"},{"username":"tjvg4m34r13","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16679135/medium/7a483b9b0abe0d925e54808e1cb38fa0.jpeg"},{"username":"Diegoem","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16705921/medium/29ce68ebc191fc3f65499511b12de98f_default.png"},{"username":"bouks69","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16746091/medium/b58b1fc08520de416198be9df5d093eb.jpeg"},{"username":"futhgar","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16748067/medium/b8c526b097f9aa9d687250cac3df16dc.jpeg"},{"username":"GrimSQL","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16764343/medium/fff729a76d1f8fbcdaee9bb0c0f5f3fd.png"},{"username":"chnikel","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16767047/medium/3dda2a37e03049dafefe6697bb00f75c.png"},{"username":"yuki19870616","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16767951/medium/f59c848e38382cda6c8464b0a7b9e642_default.png"},{"username":"noamdal","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16782245/medium/b4a72a61f9caf138f0322c0cb987e6d0.png"},{"username":"MalithRukshan","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16809057/medium/084d6a5b35fbbeacc70e7021197d222f.png"},{"username":"minirope19","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16930929/medium/e8cbbc26747e31c5a8959215e1dd067b.jpeg"},{"username":"prubin","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17503492/medium/96ac87644691e49c1f983f2f094e541c_default.png"},{"username":"sam-tam-sam","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17578052/medium/1628dc2954ce3ae95e0caaa2bd60ab0c.png"},{"username":"KydoxOwn","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17764383/medium/0bc150a09d77f5fda43988e6342777dc.png"},{"username":"toineenzo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12371852/medium/9f1b2bedb4794c59479cd289bdba9fab.png"},{"username":"RollstuhlJack","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12386691/medium/192fa7d350b148a55d37332c9d17c529_default.png"},{"username":"ArcaneWater","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12421105/medium/1ac82517a6c658f6b62c48aebcb17e86_default.png"},{"username":"Ascalon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12743376/medium/7845361ea1fae14e71978df906d60250.png"},{"username":"Ebedami","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/12974801/medium/b596dea5c09454c4c828eac558389755.jpg"},{"username":"perrygamerptyt","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13117177/medium/1406c949507ecd438480473c8a1f6124.jpg"},{"username":"SergiSvK","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13320543/medium/3df3c79cc5f0c53716c559cd3fd2fc20.png"},{"username":"jeongeon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13362856/medium/eb572f72cde5e5526c517ca3a6489850_default.png"},{"username":"thrmda","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13431074/medium/c79736af3a4140a01254ea1a887f64bc_default.png"},{"username":"MrTranCFCVN","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13439475/medium/a1789d69c85d90c667194b5d6a518c08_default.png"},{"username":"Tobost06","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13467449/medium/9227dc07f6366bc060d28304f5cb8ce7.jpeg"},{"username":"Kf637","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13530622/medium/118b00bb72d01d3229c97409637e25d1_default.png"},{"username":"Cruellest","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13610615/medium/2a74faa0947ee08d18f7946fb8602c1e.jpg"},{"username":"colonnelli.st","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/13835985/medium/69aac81cc1475cff06fff0dc6ee7ad51.jpg"},{"username":"olavinto","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14424644/medium/37c01732bd2b7a272b421807a05ccfeb.png"},{"username":"OzakIOne","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14446246/medium/3abb08846344706d3a16a9fb196655ee.jpeg"},{"username":"Thario","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14491372/medium/dd5e142070802a672900121aa3f332a6_default.png"},{"username":"Wjouter","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14585620/medium/b91a51513332bdc0a0a9ecbed99ecbc3.png"},{"username":"albanobattistella","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14686194/medium/564afcfd76f5cd24751bd669cf4943aa.jpg"},{"username":"angrystar170","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14736454/medium/7a70edc6b50122877533e95a4e971203.jpeg"},{"username":"Kachelkaiser","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14763406/medium/203a781797da4a18fe0f4e7db8fd547c.png"},{"username":"regi4","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14842936/medium/f7e1d672f562a7db61ba6b4b8f4de41d.png"},{"username":"baton5129","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/14891064/medium/8d438f557b82977dd02f0ead3187265f.PNG"},{"username":"legocuedy09","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15206280/medium/a93129b77a54ffbb2c9f136f18718e80.png"},{"username":"meviper","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/15958903/medium/209f521ce33a05831fa8d7d1b7babc20_default.png"},{"username":"GerOriki","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16268376/medium/da00e54b08cd40348231d92873a0cd0a_default.png"},{"username":"TheRedCyclops","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16486399/medium/7f39226180120d5a9efcb8e13d8aec8e_default.png"},{"username":"dymek37","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16659221/medium/d1dc6d11d7e7fc370efc5070e837ae03.png"},{"username":"B3CKDOOR","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16744975/medium/e6c7b2d45e76465d54e6efb67c83da7d.png"},{"username":"on9686","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16768173/medium/6282fed9aafe0262a173a5ec0887e5d9_default.png"},{"username":"Larsluph","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16779933/medium/ed7d36f8b44013bad3a16ac0491bd0f7.png"},{"username":"FOEDI","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16781001/medium/6b4552fb72e359aa016f7a054078fac8.png"},{"username":"xmarkurion","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16805443/medium/34a20428427de5aaef99c7d140646803.png"},{"username":"gregid","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16806705/medium/f3c8f4a20436e8538929130142bbc104.png"},{"username":"Flameberg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16820453/medium/d47be866148474c9d05fec6fbe406d88.png"},{"username":"Playfust","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16872865/medium/5f4609cc711e5fb9fa8a0b178635769c.jpeg"},{"username":"Cotignac","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16879297/medium/81ff353edf030699a159bb79cda26e84.jpg"},{"username":"LeaHun","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16916375/medium/618520f0543b1e212ebc83d66b683d4b_default.png"},{"username":"jackwellerreal","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16919717/medium/37bbfdc03893f141133ccc619593266d.png"},{"username":"renan.costaalencar","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16938427/medium/6d25b25320c5bde734118dec4af9cd5b.png"},{"username":"andrius.cim","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/16967845/medium/46028fc1a0ddfaaeebcb37b39739625d_default.png"},{"username":"xjxexrxrxyx","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17041412/medium/d34d664166db6fb25579bca9ff3b50b4.jpeg"},{"username":"bilhal.fellah","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17044572/medium/d1ec6f17e4aa013e9eededc83778d2c6.png"},{"username":"the_octo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17058060/medium/7423ab3a4cabb67f5decb2e2dfa2b675_default.png"},{"username":"BamesJond","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17075846/medium/128d7ffd40254c8e376f45678e2fc620_default.png"},{"username":"Kornikus","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17134240/medium/d7a42b2c30db46ff152699ca01f9e11a_default.png"},{"username":"Master3307","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17161852/medium/94ec577dd53e16b434f2aac9c34f64c6.png"},{"username":"xoxyuxu","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17176526/medium/108055aa24343043de852e412bec74be.png"},{"username":"cryptodntsleep","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17249408/medium/b9e15aa2b24a0dbc1e4f194aa8ed5109.png"},{"username":"yaniorg","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17261842/medium/7dbfc77f21c826845961243c44540d26.jpg"},{"username":"Vidariondr","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17262438/medium/45fbc71be02ef27296b6f423e97b6a03_default.png"},{"username":"Fastery","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17263066/medium/701b0edc59676174863ad651528bbb37.jpeg"},{"username":"stratself","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17290388/medium/57d9d8161b3fd0abf4dc5558b4a1fa05_default.png"},{"username":"wuzeqin","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17292606/medium/b9e0308410b31337e2d7aa6ed346d718_default.png"},{"username":"ChristopherBull","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17304338/medium/21a175ce596bfae81430767467908b90.jpeg"},{"username":"darkbcnlord","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17311436/medium/b271bc0b419ec3a26ddb7b63ff8ffc4b.png"},{"username":"zhoran1997","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17344028/medium/c8f450b5a8f1e9494a45dc60af7ce63e.png"},{"username":"Pakura","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17396930/medium/18602738018348bf2ffa83a78bf165e2_default.png"},{"username":"gilalves1703","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17447768/medium/3f1de562a5c2391c88bbf8d5cf40a266.png"},{"username":"iServeCloud","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17470960/medium/11649b99d609438d66455a4d2fdc70f7.png"},{"username":"guibolzantvbox","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17474136/medium/59a576e6da538664ceb972253916fa02.jpeg"},{"username":"ivann136","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17506062/medium/67d09ada36fac5f444a1f7517e3a97bd_default.png"},{"username":"Maheshivara","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17516082/medium/576e1e6581cf969615b265de6aeff8b7.jpeg"},{"username":"brunogui81","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17517542/medium/7c0d174e810435af518fe8e0c05e151f.jpeg"},{"username":"michelwilhelm","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17542190/medium/4c6b33fd8993ff565fa75add2ce8355e.jpeg"},{"username":"dias-gxstavo","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17547376/medium/8c6b109aae8aeb651192346a39ae9e5b.jpeg"},{"username":"ToxykAuBleu","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17614030/medium/8d21e0608560172b121bd46126d827c7.jpeg"},{"username":"e.erdemir","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17617994/medium/7259a29db9941c6171a8cbbd643b92bd.png"},{"username":"sjonkreutz","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17618306/medium/7601c45d015189a863656e21348d223b.png"},{"username":"volovich0377","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17620388/medium/c929a8fbd24f96d17620fa497ade7309.png"},{"username":"Hamstio1","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17624898/medium/406e0bf40094c24a01c3064f8f5b2a82.png"},{"username":"i3laa","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17627462/medium/613a9d283ed8b69819ee181903851660.jpeg"},{"username":"bastiengrignon","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17629884/medium/ddfc3339285bd65195fcd834e512e9b7.jpeg"},{"username":"kauhee","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17644600/medium/def1b9066cf9275b4273a5a5dca7f325.png"},{"username":"hongminzheng","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17683860/medium/a764f4963912777d27a7cd98e136a2b2.png"},{"username":"d-lindahl","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17726729/medium/cbde348582fbabcfadd89a56cd5a0b40.png"},{"username":"Enoal-Fauchille-Bolle","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17734649/medium/6e6fb29198782dc7856ea21811db669c.jpeg"},{"username":"manos-grigorakis","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17737973/medium/b37f685587c920c81fdaf9a357962434.jpeg"},{"username":"SertraFurr","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17738703/medium/5f1e9f270e315ee3185cf2ccb3f5a833.png"},{"username":"Kle.Ma","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17739207/medium/b767d6093e6608f251ca152f53d359b8_default.png"},{"username":"WalkerLukas","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17744485/medium/87508ce83a9b6e5391f55883a66a054b.png"},{"username":"mtya","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17748447/medium/f574d5a770d74814f8c49ee68e00f5b7.jpeg"},{"username":"Elaktrato","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17750977/medium/f4109d379f29dc8ea2e7799ac9e208c8.png"},{"username":"marcelmeis","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17753627/medium/4ba32116c27e427d3073e45713f6564e.png"},{"username":"ProKafelek12e","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17760377/medium/5199af152f1ea42cee718e7729bd41ff.png"},{"username":"zalaghi","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17763367/medium/a06f7b15222663517b58b8dc8902f8a1.png"},{"username":"Amato21","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17776775/medium/214b1f1581a85fe10f1ae3241aab43e4.png"},{"username":"jabalv","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17778347/medium/14dd47fff64f6543e6015be7373420c3.png"},{"username":"agiledivider","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17801131/medium/0039d926d5a716e712e36b06004369ab_default.png"},{"username":"nocteln","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17806203/medium/fc84143ba6b94cc8e8a37415a0d91fb0_default.png"},{"username":"b.yatsenko","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17810347/medium/6db1ce1d6b9f07afbcec0ca43b8015c8.png"},{"username":"wolliS","avatarUrl":"https://crowdin-static.cf-downloads.crowdin.com/avatar/17824457/medium/ab196ecab415d34826955027ae36a72f_default.png"}]
\ No newline at end of file
diff --git a/vitest.config.mts b/vitest.config.mts
index 78e23e9b2..13a8cd658 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -6,8 +6,6 @@ export default defineConfig({
   plugins: [react(), tsconfigPaths()],
   test: {
     setupFiles: ["./vitest.setup.ts"],
-    environment: "jsdom",
-    include: ["**/*.spec.ts"],
     clearMocks: true,
     coverage: {
       provider: "v8",
@@ -18,5 +16,58 @@ export default defineConfig({
     },
 
     exclude: [...configDefaults.exclude, "apps/nextjs/.next"],
+    projects: [
+      {
+        extends: true,
+        test: {
+          name: "api-node",
+          environment: "node",
+          setupFiles: ["./vitest.setup.ts", "./vitest.setup.node.ts"],
+          include: ["packages/api/**/*.spec.ts"],
+        },
+      },
+      {
+        extends: true,
+        test: {
+          name: "db-node",
+          environment: "node",
+          setupFiles: ["./vitest.setup.ts", "./vitest.setup.node.ts"],
+          include: ["packages/db/test/**/*.spec.ts"],
+        },
+      },
+      {
+        extends: true,
+        test: {
+          name: "custom-widgets-node",
+          environment: "node",
+          setupFiles: ["./vitest.setup.ts", "./vitest.setup.node.ts"],
+          include: ["packages/custom-widgets/src/**/*.spec.{ts,tsx}"],
+        },
+      },
+      {
+        extends: true,
+        test: {
+          name: "dom",
+          environment: "jsdom",
+          include: ["**/*.spec.{ts,tsx}"],
+          exclude: [
+            ...configDefaults.exclude,
+            "apps/nextjs/.next",
+            "packages/api/**",
+            "packages/custom-widgets/**",
+            "packages/db/**",
+            "e2e/**",
+          ],
+        },
+      },
+      {
+        extends: true,
+        test: {
+          name: "e2e",
+          environment: "node",
+          include: ["e2e/**/*.spec.ts"],
+        },
+      },
+    ],
   },
 });
diff --git a/vitest.setup.node.ts b/vitest.setup.node.ts
new file mode 100644
index 000000000..3e981c76f
--- /dev/null
+++ b/vitest.setup.node.ts
@@ -0,0 +1,6 @@
+// Server packages validate their environment during module initialization.
+// Keep deterministic, non-secret values here so focused Node suites collect
+// without requiring a developer's local .env file.
+process.env.DB_DRIVER ??= "better-sqlite3";
+process.env.DB_URL ??= ":memory:";
+process.env.SECRET_ENCRYPTION_KEY ??= "0".repeat(64);
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 9c01f0b66..22fd74865 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,3 +1,5 @@
 import { vi } from "vitest";
 
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
 vi.mock("server-only", () => ({ default: undefined }));